PHP와 Python 그리고 Ruby의 한 줄 내장 웹 서버 실행

, 댓글이 없음 »

얼마 전 무료로 공개된 Tuts+ Premium 코스인 30 Days to Learn jQuery 영상에서 따온 요령으로, Python의 내장된 간단한 웹 서버를 현 작업 디렉터리에서 실행시키는 명령인데 다음과 같이 쓰일 수 있다.

터미얼을 열고,

cd /some/test/directory
open http://localhost:8000 && python -m SimpleHTTPServer

편한 것이 굳이 일반 웹 서버를 실행시킬 필요 없이, 예를 들어 ajax call 실험용으로 간단한 테스트만 할 때 손쉽게 사용할 수 있다. 글 마저 읽기 »

꼬리표:

CSS를 써서 옛 한글의 강조점 찍어주기

댓글이 없음 »

최근 공식 배포된 iOS 5.1에서와 마찬가지로 차기 OS X 10.8 Mountain Lion의 기본 한국어 시스템 서체로 '애플 산돌 고딕 네오(AppleSDGothicNeo)'가 추가되었다는 소식은 이미 널리 알려진 사실이다. 그동안 애증의 대상이었던 AppleGothic 글꼴의 새로운 대안으로 떠오르면서 많은 사람이 반가움을 표시하고 있는 상황.

그런데 새로 추가된 글꼴도 비스듬히 누운 이탤릭 스타일을 제대로 표시해주지 못한다는 얘기는 또 아쉬울 수밖에 없다. 비록 이탤릭 스타일로 표시된 한글이 영문 글꼴의 멋스러운 형태를 보일 순 없더라도, 가령 <em> 태그 속에 표시된 한글이 그저 시스템이 일률적으로 눕혀놓아서 밋밋하게 표현된다면 이 또한 차별의 느낌을 지울 수가 없는 것이다.

그렇다면 웹에서라도 예전 한글 고문서에서나 볼 수 있었던 성조를 나타내는 기호인 방점을 흉내 내서 강조점의 형태로 표시해주면 어떨까 하는 생각이 들었다. (물론 강조점으로 굳이 방점을 빌려 와 쓸 필요는 없고 적당한 기호를 선택해서 쓰면 된다.)

오로지 CSS만 써서 표현해 보려 했으나, 아쉽게도 CSS에서 쓸 수 있는 Pseudo Elements 중에 ::every-letter와 같은 것은 존재하지 않기 때문에 JavaScript의 힘을 빌려 jQuery plugin인 Lettering.js를 사용했다. 글 마저 읽기 »

꼬리표:

jQuery에서 이벤트를 심는 데 사용되는 여러 가지 방법과 그 장단점 비교

5개의 댓글 »

jQuery에서 많이 사용되는 이벤트(event) 심는 방법에는 옛 버전부터 최근까지 여러 용법이 소개되고 쓰여왔다. 이런 많은 용법이 함께 사용되면서 상황에 따라 어떤 것을 써야 할지 고민하게 되고, 또 서로 다른 용법으로 혼란을 줄 수도 있었다.
그래서 최신 1.7 버전부턴 과거부터 축적돼서 사용되던 이런 여러 방법을 통합하려는 시도로 .on() method가 소개되었는데, 이런 여러 용법을 잘 정리해서 비교해 놓은 글. – Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

결국, 전부터 쓰던 .bind(), .live(), .delegate() method는 더 일관된 사용법의 통합된 .on() method를 써서 다음과 같이 적용해 줄 수 있다.

/* The jQuery .bind(), .live(), and .delegate() methods are just one 
   line pass throughs to the new jQuery 1.7 .on() method */

// Bind
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );

jQuery 1.7.x 버전부턴 .on() method가 대세.

덧붙임: jQuery 1.7 버전의 문법을 지원하는 TextMate jQuery Bundle

꼬리표:

WordPress에서 JavaScript 파일을 페이지 마지막 부분에 추가하는 법

, , 댓글이 없음 »

JavaScript 파일은 페이지 로딩 속도 측면에서 페이지의 body가 닫히기 바로 전에 추가해 주는 것이 가장 좋은데, WordPress에 기본적으로 추가된 jQuery는 꼭대기 head 부분에 붙어 있다.

이놈을 맨 아랫부분에 추가하려면, 테마 파일에 있는 functions.php 파일을 열고 WordPress의 wp_register_script()와 wp_enqueue_script() function을 사용하는 다음과 같은 코드를 추가해 준다.

<?php
function my_scripts_enqueue() {
  wp_deregister_script('jquery');
  wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . '://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', false, NULL, true);
  wp_enqueue_script('jquery');
}    

if (!is_admin()) add_action('wp_enqueue_scripts', 'my_scripts_enqueue', 11);
?>

여기에 있는 wp_register_script() function의 parameter 중 네 번째와 다섯 번째가 중요한 요소인데, 각각 $ver과 $in_footer 변수를 의미한다.

$ver 변수는 보통 JavaScript 파일 경로의 마지막 부분에 query string처럼 붙으면서 JavaScript 파일이 갱신되었을 때 caching된 것의 사용을 막으려고 사용되는데, jQuery처럼 Google CDN에서 불러올 때는 오히려 방해되므로 NULL 값을 줘서 없애버린다. 그리고 $in_footer 값에 true를 주면 JavaScript가 body 맨 마지막 부분에 붙게 된다.

꼬리표:

jQuery 1.4 발표

댓글이 없음 »

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 버전이 발표되었다.

꼬리표: