이렇게 웹 브라우저 상에서 실제 HTML5 기능을 이용한 멋진 슬라이드를 구경하고 있노라면 눈과 머리에 충분한 자극이 될 것이다.

원래 Google Chrome 브라우저에서 시연할 용도로 제작되었으며, 대부분의 최신 브라우저들에서도 내용을 확인해 볼 수 있지만, 슬라이드에 있는 시연 기능을 100% 사용하려면 다음과 같이 터미널에서 Chrome의 시험적 기능들을 켜준 후에 열어서 보아야 한다.

/PATH_TO_GOOGLE_CHROME_APPLICATION/Google\ Chrome.app/Contents/MacOS/Google\ Chrome -enable-webgl -enable-geolocation -enable-desktop-notifications -allow-file-access-from-files

슬라이드는 code repository에서 내려받을 수 있으며, 앞으로 계속 새로운 내용이 수정/추가될 예정이란다.

IE에서 Google Chrome Frame을 심어놓고 HTML5 슬라이드를 시연한다면, 너무 심술긏은 짓일까? 😮

귀가 너무 얇은 탓일까? WordPress Cache를 위한 plugin으로 여태 잘 쓰고 있던 WP Super Cache에서 Hyper Cache로 갈아탔다.

갈아타게 만든 계기는 여러 WordPress Caching plugin들을 비교한 글에서 보여준 비교적 높은 성능 때문이다.

그런데, 처음 설치하고 나서 설정 페이지를 열어보았더니, 다음과 같은 반갑지 않은 메시지를 맞이하였다.

Hyper Cache was not able to create the folder “cache” in its installation dir. Create it by hand and make it writable.

여기서, cache 디렉토리의 권한을 설정해 주려고 Hyper Cache 공식 페이지에 나와있는대로 /wp-content/hyper-cache/cache 디렉토리를 생성해서 권한을 변경해 주었는데도 경고 메시지가 사라지지 않았다.

확인해 보니 버전이 갱신되면서 기존 캐쉬 디렉토리가 다음과 같은 위치로 바뀌었단다. :
wp-content/plugins/hyper-cache/cache

설치를 마치고 둘러본 바, 워낙 트랙픽이 저조한 곳이라 큰 차이점은 못 느겼지만, 기름칠 한 번 더 해주었다고 생각해야지. 🙂

WebKit에서 먼저 CSS Gradients가 소개된 이후 CSS 3의 Gradients 표준 용법은 아직 Draft 상태이나, 현재 Safari 4, Firefox 3.6, Google Chrome에 바로 적용해서 사용할 수 있다.

따로 이미지를 쓸 필요가 없는 이점에도 불구하고 통일되지 못한 사용법과 IE 미지원으로 아직은 많이 사용되지 않고 있는데, 그나마 CSS3 Gradient Generator가 있어서 적용에는 큰 어려움이 없다.

아래는 이 곳에 적용한 예.

#page {
  background-color: #160B37;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#271362), to(#160B37));
  background-image: -webkit-linear-gradient(top, #271362, #160B37);
  background-image: -moz-linear-gradient(top, #271362, #160B37);
  background-image: -o-linear-gradient(top, #271362, #160B37);
  background-image: -ms-linear-gradient(top, #271362, #160B37);
}

미적용 브라우저들엔 전처럼 그냥 이미지로 대체해주면 될 것이다.

요즘 CSS 작성할 때 점차 그 사용이 늘어나는 vendor specific extensions로 논쟁이 많은데, 어차피 표준 제정이 마무리 되지 않는 한 불편은 계속되겠지만 시도한 만큼의 결과물 만족감은 더 크다.

2010년이 돼서도 차별대우는 어쩔 수 없다.

var isMSIE = /*@cc_on!@*/false;
 
// or shorter one next 
 
var isMSIE//@cc_on=1 

Dean Edwards씨가 몇 년전 쌀짝 공개했던 코드로 알려지게 되었는데, Internet Explorer에서만 채용된 JavaScript의 짝퉁, JScript의 Conditional Compilation Statements때문이란다.

혹은 더 짧게,

if(!+"\v1") // true only in IE 

jQuery가 네 번째 생일을 맞아 새 버전(1.4)을 발표했다.

지금 당장 jQuery Minified 버전과 jQuery Regular 버전을 내려받아 둘러보고 자신의 사이트에 바로 적용시킬 수가 있다. 물론 Google에서 호스팅하고 있는 놈을 자신의 사이트에 직접 추가놓는 것이 여러모로 유리할 것이다.

참고로, WordPress에 새로운 버전의 jQuery를 추가할 때는 plugin들의 중복 loading을 막기위한 약간의 주의가 필요한데, 사용하고 있는 테마 디렉토리 밑에 있는 functions.php 파일에 다음과 같이 추가해 준다.

if ( !is_admin() ) {
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"), false, '1.4.0');
  wp_enqueue_script('jquery');
}

새 버전에서는 자주 쓰이는 method들의 function calls 횟수를 줄이면서 실행 속도가 무척 빨라졌다고 하니 반가운 일이다.

다음은 코드로 본 새로운 기능들 중 눈에 띄는 것들:

// Easy Setter Functions 
$('a[target]').attr("title", function(i,title){
  return title + " (Opens in External Window)";
});
 
// Quick Element Construction 
jQuery("<div/>", {
  id: "foo",
  css: {
      height: "50px",
      width: "50px",
      color: "blue",
      backgroundColor: "#ccc"
  },
  click: function() {
     $(this).css("backgroundColor", "red");
  }
}).appendTo("body");
 
// Per-property Easing 
$("#clickme").click(function() {
  $("div").animate({
    width: ["+=200px", "swing"],
    height: ["+=50px", "linear"],
  }, 2000, function() {
    $(this).after("<div>Animation complete.</div>");
  });
});
 
// Event Multi-binding 
$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

더불어서, jQuery API도 자기만의 sub-domain에 자리잡게 되었다: http://api.jquery.com/
PDF 혹은 JPEG 형식의 jQuery 1.4 API Cheat Sheet과 jQuery 1.4 iPhone reference app도 챙겨놓고 볼 일.

추가 참고 문서: jQuery 1.4 Resources For Developers | W3Avenue

갱신: 과거 전통(?)에 어긋나지 않게 일주일여 만에 버그를 잡은 jQuery 1.4.1 버전이 발표되었다.