2010 6월 12

Safari 5의 beforeload 이벤트가 없애려는 것

Safari 5가 발표되면서 반가움이 컸는지 연달아 Safari 얘기만 적게 되는데, 이 번엔 새로 추가된 JavaScript event인 “beforeload” 이벤트에 관한 글을 올려 놓는다.

이 놈은 웹페이지에 포함된 모든 스크립트와 iframe, 이미지, 스타일쉬트 등 그 어떤 리소스도 읽어들이기 전에 발사되는데, Apple은 우연찮게 그 사용의 한 예시로 광고 차단에 활용할 수 있는 기술로 서술하고 있다.

자연스럽게, 위 기술은 광고 차단 목적의 AdBlock for Safari Extention에 그대로 사용되었고, 원하지 않는 광고는 그 내용을 읽어들이기도 전에 차단해버린다. 그래서 광고 도배 사이트의 경우 통신량이 줄어서 페이지 로딩 속도가 더 빨라지는 효과를 얻을 수 있다.

한편, 별로 관련이 없는 얘기일 수도 있지만, 문득 스치는 생각.
Apple은 현재 주도권을 쥐고 있는 모바일 플렛폼에서 iAd를 통해, 점점 그 파이가 커져가고 있는, 휴대장비의 광고 시장을 장악하려 한다는 것은 잘 알려진 사실. 반면, 데스크탑에선 Safari Reader를 위시한 여러 차단막 강화로 사용자들에게 “annoying ads”로부터의 해방을 도모하고 있으니 참 오묘한 형국이다.

물론, 이것은 무엇보다도 사용자 경험을 중시하려는 전략으로 생각할 수도 있는데, 과연 일반 사용자와 개발자 그리고 광고 생산자와 제공자 모두에게 지지를 얻을 수 있을지는 더 지켜볼 일이다.

결국, 광고 시장은 사용자를 향한 접근 방식의 끊임없는 변화를 모색하려 하겠지만, 이 흐름을 가지고 누가 주도권을 잡느냐에 따라 그 경쟁은 더욱 치열해질 것이란 점은 누구나 쉽게 예상할 수 있다.

아래는 Google로 찾아낸 재미난 사진. 😆

꼬리표:

2010 6월 11

Safari Validator Extension

Apple, Mac & iOS, Web Standards 댓글이 없음 »

개인적으로, Safari(WebKit)를 주 웹 브라우저로 사용하면서 Safari 5가 Extensions 기능을 지원하기 시작한 후로 제일 먼저 기다렸던 놈이 있는데, 웹페이지의 (x)html 표준 검사 결과를 표시해주는 SafariTidy plugin이 Extension으로 나와주는 것이었다. 그런데, 오늘 드디어 요놈이 Safari Validator Extension 모습으로 공개되었다. 😈

설치하면, 확장 막대(extension bar)에 Tidy와 W3C 검사 결과를 함께 보여준다.

Safari Vaidator 사용 예

Tidy 검사 결과를 누르면 현 웹페이지의 소스와 함께 오류 부분까지 꼭 집어서 보여주어서 무척 편리하다.

Safari Vaidator에서 Tidy 검사 결과를 표시해 준 그림

그리고 W3C 검사 결과를 누르면 W3C validator가 생성한 보고서를 띄워 준다. 참고로, 설치 후 페이지 로딩 속도가 느려진 것처럼 느껴진다면 평소에는 설정에서 W3C 검사 기능만 꺼주면 된다고 함.

이제 HTML5만 더 무르익으면, 요넘까지 지원되길 바래야지. 🙂

꼬리표:

Safari Extensions

2010 5월 20

WebM 그리고 Google Font API

Web Development 댓글이 없음 »

오늘 열린 Googl I/O 2010에서 개발자들에게 선택의 폭을 넓혀줄 반갑고 새로운 기술들이 소개되었다. 바로, WebM과 Google Font API.

그 동안 HTML5의 video tag 안에서 생식하게 될 Video와 Audio 형식을 두고 license를 문제 삼아 많은 논란들이 있었는데, 이미 예견되었듯이 Google에서 WebM 이름의 video codec을 BSD 스타일로 공개하였다. 이 포멧은 고화질 영상을 낮은 성능의 CPU를 가진 휴대용 기기들에서도 효율적으로 전송할 수 있다고 주장하고 있다.

앞으로 Mozilla, Opera, Google Chrome, Adobe 그리고 심지어 IE9마저도 VP8 codec 설치를 조건으로 하지만 지원할 것을 약속하고 있는 상황이다. Safari의 지원 여부는 아직 알 수 없지만, 이미 YouTube를 포함한 개발자들의 지지 성명이 잇다르고 있는 가운데 아마도 대세를 따라야 하지 않을까?

또 하나, 이젠 FOUT 걱정없이 web fonts를 자신의 페이지에서 사용하는 작업도 Google Font API 덕분에 쉬운 일이 될 듯하다. 그리고 JavaScript library인 WebFont Loader를 쓰면 자신의 서버에 존재하는 web font를 포함한 다양한 font provider를 선택해서 font 로딩에 관한 좀 더 섬세한 조절도 가능하단다.

현재 제공되는 Google Font Directory에는 아직 그 선택의 폭이 넓지 않지만, 차차 개선될 것이라 예상되고 역시나 이를 활용할 다양한 한글 글꼴의 부재는 아쉬운 일.

어쨌건, 앞으로 license 걱정없이 창작 Video/Audio와 Web font를 추가하는 일이 아래처럼 간단해졌으니 두 손 들고 환영할 일이다. 8)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>WebM and Google Font API</title>
  <link href='http://fonts.googleapis.com/css?family=Some+Cool+Font' rel='stylesheet' type='text/css'>
  <style>
    body { font-family: 'Some Cool Font', serif; font-size: 100px; }
  </style> 
</head>
<body>
<h1>This is cool!</h1>
<video width="640" height="360" poster="__POSTER__.jpg" controls>
  <source src="cool_video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
  <source src="cool_video.webm" type="video/webm; codecs='vp8, vorbis'"></source>
  <object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF?image=__POSTER__.jpg&amp;file=cool_video.mp4">
    <param name="movie" value="__FLASH__.SWF?image=__POSTER__.jpg&amp;file=cool_video.mp4" />
    <img src="__POSTER__.jpg" width="640" height="360" alt="__TITLE__" />
  </object>
</video>
</body>
</html>

이걸 보니, 어쩔 수 없는 과거 유물들을 위한 Flash 코드의 존재는 여전히 꺼림칙하고 지저분하다.

꼬리표:

2010 5월 08

느긋하게 비동기식으로 JavaScript를 웹 문서에 추가하는 방법

JavaScript, Quotes, Web Optimization 11개의 댓글 »

이 글은 Friendly Bit에 실린 Lazy Loading Asyncronous Javascript의 글을 정리해 놓은 것이다.

외부 JavaScript 파일을 문서에 추가하는 방법에는 여러 가지가 있지만, 여기엔 onload event를 지연시키지 않으면서 병렬 비동기식으로 불러와서 추가하는 방법을 소개한다.

Script tag

가장 보편적으로 쓰이는 벙법이다.

<script src="http://yourdomain.com/script.js"></script>

물론, 제일 단순한 방법이지만, 비동기식(asynchronous) 파일 내려받기를 지원하지 않으며 그 만큼 onload event도 지연된다. (빨간 선은 Load event 발생 시점을 나타냄.)

느긋하게 비동기식으로 JavaScript를 웹 문서에 추가하는 방법(이)란 제목의 글 마저 읽기 →

꼬리표:

2010 4월 26

JavaScript의 요지경 속으로

JavaScript 댓글이 없음 »

때때로, JavaScript의 type coercion은 유용할 때가 있다.

var myVar = "1.234"; // string 
+myVar; // 1.234 
typeof +myVar; // number 
(+myVar).toFixed(2); // "1.23" string

하지만, String을 다룰 때는 주의가 필요하지.

String("1.234") instanceof String; // false 진짜? 
(new String("1.234")) instanceof String; // true 어디보자... 
String("1.234") == (new String("1.234")); // true 설마? 
String("1.234") === (new String("1.234")); // false 그렇군. 
 
(function(){return 2*3;}).toString() === (function(){return 6;}).toString(); // true in FF & Opera, false in IE & WebKit

이쯤 되면 다음과 같은 결과도 미리 예상해 볼 수 있다.

0 == "0"; // true 이젠 안 속아. 
0 === "0"; // false 그렇지.

세상 속 사실로 알려진 명제도 JavaScript의 요지경 속에 한 번 빠지면,

3 > 2 > 1; // false

이것은 아래와 같은 true의 변심에서 시작되었음을 알 수 있다.

(true + 1) === 2; // true 
(true + true) === 2; // true 
true === 2; // false 
true === 1; // false

어디 한 번 JavaScript의 요지경 속으로 빠져 봅시다! (⊙﹏⊙)

꼬리표:

자바스크립트