웹 개발 과정에 있어서 웹 페이지 속 UI 동작을 구현하는데 필요한 기본적인 기능들을 모아놓은 JavaScript Library들이 제공되면서 개발자들의 손을 한 시름 덜어주게 되었고, 결국 남은 여력을 프로젝트에 더 집중하게 되면서 작업의 효율성을 증가시켜 주었듯이, 마찬가지로 웹 페이지의 기본 layout을 잡을 때 반복적으로 수행되던 CSS 작업에서도 빠른 작업 수행 속도를 붙여줄 수 있는 framework 형태의 여러 조력자들이 등장하고 있다.
개인적으로 JavaScript Library로는 jQuery를 그리고 CSS framework로는 blueprintcss를 주로 사용하게 되면서, 예전에 공개했던 HTML 문서 생성을 위한 TextMate용 snippet에도 작은 변화가 있었다.
여기에 그 바뀐 내용을 공개하면, 우선 아래는 HTML 4.01 Strict DocType을 위해 "page4" tab trigger로 지정된 HTML snippet이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ko" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${1:Title}</title>
${2:<link rel="stylesheet" href="${3:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="$3print.css" type="text/css" media="print" />
}<style type="text/css" media="screen">
</style>
${4:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
}<script type="text/javascript">
$0
</script>
</head>
<body id="${5:page}">
<div class="container">
<div class="column span-${6:24}">
<h1>${7:Header}</h1>
</div>
<div class="column span-${8:20}">
${9:Main content}
</div>
<div class="column span-${10:4} last">
${11:Right sidebar}
</div>
${12:<div class="column span-24">
${13:Footer}
</div>}
</div>
</body>
</html>
기본적으로 지정되어 있는 HTML 문서의 구조는, 오른쪽에 작은 sidebar가 위치한 보편적인 2 column 구조로 위 아래에 Header와 Footer가 위치하고 있다.
다음은 같은 구조를 가진 XHTML 1.0 Strict DocType 문서를 위한 HTML snippet. tab trigger로 "page"가 지정되어 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ${1:${2 
ml:lang="ko"}${3: lang="ko"}} dir="ltr">
<head>
<meta http-equiv="Content-Type" content="${4:application/xhtml+xml}; charset=utf-8" />
<title>${5:Title}</title>
${6:<link rel="stylesheet" href="${7:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="$7print.css" type="text/css" media="print" />
}<style type="text/css" media="screen">
</style>
${8:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
}<script type="text/javascript">
$0
</script>
</head>
<body id="${9:page}">
<div class="container">
<div class="column span-${10:24}">
<h1>${11:Header}</h1>
</div>
<div class="column span-${12:20}">
${13:Main content}
</div>
<div class="column span-${14:4} last">
${15:Right sidebar}
</div>
${16:<div class="column span-24">
${17:Footer}
</div>}
</div>
</body>
</html>
간단한 것이지만, 손놀림을 덜 수 있는 또 하나의 꼼수다.
jQuery 1.2 발표후 보고된 자질한 버그들을 잽싸게 잡으면서 jQuery 1.2.1이 배포되고 있다.
벌레 잡기와 함께 바뀐 주요 변경 내용은, 새로 추가되었던 상대적 애니메이션 효과의 API가 기존 애니메이션 스타일과 충돌을 일으키는 문제를 해결하면서 상대적 애니메니션 효과의 문법이 아래처럼 약간 바뀌었다.
$(...).animate({ height: "+=50px", width: "-=20%", fontSize: "+=2em" });
위에서, +=는 현재 위치에서 더하고, -=는 현재의 위치에서 값을 빼라는 의미로 사용.
그리고 대체 용법을 제공하면서 사라졌던 .eq() method가 다시 추가되었다. 여기에는 많은 플러그인들이 그 동안 .eq() method를 많이 써왔다는 점과, 기존에 이것을 대체하려고 했던 .slice()가 이 경우 자연스런 해법이 아닌 것 같아서 삭제가 재고되었단다.
1.2 발표 후, 연이어 급히 벌레 잡는 발표로 불안한 인상을 주기도 하지만 그 만큼 더 안정화 되었다고 믿고 싶다.
한편, 얼마 전에 예고되었듯이 jQuery UI가 공식 페이지와 함께 공개되기 직전인가보다.
아직 공식 발표 소식은 없지만, 잠깐 데모를 살펴봤는데 Safari에서는 몇몇 동작이 제대로 동작하지 않는 등, 아직 개발이 활발히 진행중인 상태라 실제 적용에는 아직 무리가 있는 듯 하지만, 앞으로 분명 UI 개발자들에게 다양한 선택의 폭을 넓혀주리라 믿는다.
데모 어플리케이션 중에, JavaScript Speed Test 어플리케이션을 Safari에서 열어보면 여지없이 Safari가 뻗어버려서 주의가 요구됨. 
근래에 있었던 작은 버전들의 갱신 후에 드디어 커다란 걸음을 내딛는 jQuery 1.2 버전이 공개되었다. 이번 버전은 여러 새로운 기능들이 추가되었고, 이번에 소개된 새로운 jQuery Animation API를 이용해서 특정 요소에 색깔 변화 효과를 줄 수 있는 Color Animation Plugin을 포함해서 호환성 문제 해결을 위한 새로운 plugin들도 소개되었다. 반면에, 그 동안 잘 사용되지 않고 혼란을 가중시킬 수 있었던 몇 가지 기능들도 함께 제거되었는데, 제거된 기능들은 보다 나은 대체 기능들을 사용하면 되겠다. 물론 굳이 없어진 기능들을 계속 사용하려면, 이번에 새로 소개된 하위 버전과 호환성을 유지시켜 주는 Compatibilility Plugin을 사용하면 된다.
또, 한 가지.
User Interface의 특수 효과와 관련해서 jQuery의 공식 plugin으로 자리잡을 jQuery UI가 이번 16일 일요일에 드디어 공개될 예정이다. jQuery UI의 대략적인 구성은 이미 공개되었듯이 Draggables, droppables, resizables, shadows, sliders, sortables, tabs, accordions, selectables, trees, 그리고 modals이 포함되게 된다. 이렇게 되면 다른 라이브러리들의 의존성도 줄이고 선택면에서 더 이상 부럽지 않겠군. 
jQuery에서 selector 선언이나 jQuery 함수(method)를 사용하면 되돌려 받는 것은 항상 jQuery object이다.
대부분의 경우 이 오브젝트에 직접 여러 method들을 묶어서(chaining) 사용하거나 기본적으로 제공되는 모든 object들의 자동적인 접근의 용이함도 장점이겠지만 가끔은 DOM element를 직접 만져야 할 때가 있다.
이럴 경우를 대비해서 jQuery에는 get() method를 제공하는데, 예를 들어 특정 element의 tag 이름을 얻고 싶을 때는 다음과 같이 할 수 있다:
var tag = $('#some-element').get(0).tagName;
여기에는 .get()을 쓰느 대신 더 간단한 방법이 있는데, $('#some-element').get(0) 대신에 바로 $('#some-element')[0]처럼 사용할 수도 있다.
바로 DOM elements의 array처럼 사용될 수 있는 것이다.
공식 jQuery 문서에는 설명이 안되어 있는 것 같아서 적어놓는다.
jQuery 1.1.3 버전에 와서는 거의 80개 이상의 버그가 잡혔고 DOM 위를 돌아다니는 속도가 무려 800%나 빨라졌다고 한다.
그리고, 이벤트와 효과 관련 시스템이 다시 쓰여지면서, 키보드 이벤트를 더 효율적으로 처리할 수 있게 되었고 UI 효과의 처리 속도와 호환성이 향상되었다.
그 동안 다른 자바스크립트 라이브러리들과 비교해서 selector 처리 속도에서 약점을 보여왔었는데, 이젠 말끔히 해소된 느낌이다.
또한 눈에 띄는 것은, 새로운 유형의 selector들이 소개되었는데, 그 중 selector로 유니코드를 사용할 수 있게 되면서 $("div.머릿말")처럼 한국어로 된 속성 값을 바로 사용할 수 있게 되었고, 새로 추가된 'test suite'은 애니메이션 효과를 실험하는데 있어 버그 탐색에 도움을 줄 듯 하다. 또, event.which 속성으로 눌린 특정 키나 마우스 버튼에 관한 상세한 정보를 얻을 수도 있단다.
이제 더 날렵해지고 활동 범위도 넓어진 jQuery의 다음 버전도 기대되는데, 7월 말에 1.1.4 버전의 발표를 끝으로 더 많은 새로운 기능들을 흡수한 jQuery 1.2로 건너뛸 예정이다.
한편, 그 동안 비밀 프로젝트로 숨겨왔던 jQuery UI 소식을 공개하였는데, 여기에는 Drag & Drop 라이브러리가 포함되어 있고 Draggables, Droppables, Sortables, Resizables, 그리고 Slider 등 여러 UI 효과와 관련된 코드가 포함될 예정이란다. 아마도 이 놈은 Prototype과 Script.aculo.us가 쌍을 이루듯 jQuery의 UI 효과를 위한 대표 plugin으로 자리잡을 듯.