각 브라우저별 CSS3 properties의 사용 용법이 서로 다르고, 그래서 모두한테 적용하기가 번거롭다는 점 때문에 CSS3 사용을 주저할 이유가 없어졌다. CSS3 Please TextMate bundle만 설치해놓고, tab trigger만 당기면 너무나 간단할 일이 되어버렸기 때문이다.

snippets은 CSS3, Please! The Cross-Browser CSS3 Rule Generator에서 따온 것으로, 현재 다음과 같은 CSS3 snippets을 제공한다:

• border-radius (borderrad)
• box-shadow (boxshadow)
• rgba (rgba)
• background-gradient (bggradient)
• transition (transition)
• rotate (rotate)
• font-face (fontface)

앞으로, background-gradient에 방향 옵션(linear/radial)을 지정할 수 있는 기능도 추가될 예정.

CSS3 Please!

아무래도, 이렇게 놓고 보면 WebKit 엔진을 사용하고 있는 브라우저들(Safari, Google Chrome)에서 보는 것이 제일 예쁘고 CSS3 지원도 가장 앞서 있음을 알 수 있다. 다른 브라우저들의 지원 상황에도 가속도가 붙길 바라며, CSS3 많이 사용해 주세요!

물론, 이미 TextMate에는 내장된 훌륭한 HTML과 CSS snippets을 사용해서 효율적으로 코딩할 수 있는 여건이 제공되고 있지만, 456 Berea Street의 소개 기사로 알게된 zen-coding은 여기에 엄청난 효율의 상승 효과를 더해준다.

사용 예를 보면 한 눈에 그 막강함을 눈치챌 수 있다.

div#main-menu>ul.menu>li#item-$*5{This is an item $}*5

에디터에서 위 코드를 입력하고 Zen Coding 명령(command+E)을 실행하면 다음과 같은 snippet을 돌려준다.

<div id="main-menu">
  <ul class="menu">
    <li id="item-1">This is an item 1</li>
    <li id="item-2">This is an item 2</li>
    <li id="item-3">This is an item 3</li>
    <li id="item-4">This is an item 4</li>
    <li id="item-5">This is an item 5</li>
  </ul>
</div>

말 그대로, HTML and CSS hi-speed coding 주장에 걸맞는 plugin으로, CSS selectors를 써서 HTML DOM을 효과적으로 생성/코딩할 수 있다는 점은, 과거 Ruby gem plugin으로 유명한 Haml의 장점을 그대로 따와서 바로 HTML과 CSS 파일에 사용할 수 있게 된 것이나 마찮가지다.

현재, Zen Coding은 TextMate 말고도, Aptana, Coda, NetBeans 그리고 Expresso를 지원한다고 나와있으며, 홈 페이지에서 데모용 스크린케스트도 제공하고 있다.

참고로, Zen Coding은 러시아 개발자들이 주축이 되어 개발되고 있기 때문에, HTML Root element에 속해있는 html의 lang 속성을 기본 ru에서 ko로 바꾸어주는 수정이 필요하다. TextMate의 경우, Zen-HTML bundle은 Bundle Editor를 열어서 수정하고, Zen Coding bundle은 번들 패키지 속 /Support/zencoding/settings.py 파일을 열어서 수정해주면 된다.

이제, 이런 코딩 작업 향상이 받쳐줄 만한 좋은 아이디어만 쏟아져 나와주면 좋을 텐데, 역시 어렵군. 😮

TextMate을 설치하면 GetBundle이란 놈이 기본적으로 설치되어 있는데, 여기에 소개할 놈은 더 똑똑한 놈으로 이름이 복수형인 GetBundles. 더 똑똑하단 얘기는 TextMate의 공식 bundle repositories뿐만 아니라 GitHub에 자생하고 있는 bundle들마저 검색해서 한 번의 클릭만으로 간단하게 원하는 bundle들을 설치할 수 있게 해준다.

또, 새로 설치한 번들을 사용하기 위해 일일이 reload할 필요도 없다.
설치는 터미널에서 다음 두 줄로 해치운다:

cd ~/Library/Application\ Support/TextMate/Bundles
svn co http://svn.textmate.org/trunk/Review/Bundles/GetBundles.tmbundle/

개발 소식은 오래 전에 알고 있었는데, 우연하게 흘러들어 온 글을 보고서 이제야 설치.

웹 사이트 최적화 덕목들 중에서, JavaScript와 CSS 파일의 압축은 핵심 요소 중 하나다.
여기에 쓰이는 압축 도구로 웹에선 주로 JSMIN나 Packer가 많이 쓰이는데, 압축 효율과 안전성 면에서 YUI Compressor를 따를 수 없다.

YUI Compressor의 터미널 사용 기본 용법을 보면 다음과 같다:

$ java -jar yuicompressor-2.4.1.jar myfile.js -o myfile-min.js --type js|css --charset charset --nomunge --preserve-semi --disable-optimizations

이렇게 놓고 보면 터미널을 열고 일일이 타이핑 하는 수고가 꺼려질 법도 한데, 반갑게도 CSS와 JavaScript 파일은 YUI Compressor TextMate Bundle을 통해서, 단축키 하나(⌃⇧Y)로 간단하게 압축할 수 있게 되었다.
개인적으로 위젯 형태로 만들어 볼까 생각하고 있었는데, 이놈이 더 안성맞춤이군. 8)

요새 모든 소스 코드의 관리에 여기저기서 마구 언급되고 있는 Git를 익혀서 쓰려고 노력하고 있는 중이다. 그런데, git repository browser인 gitk와의 첫 대면은 결코 좋은 인상이 아니었다. Mac에 설치되어 있는 gitk의 User Interface는 TCL/TK 위에서 실행되는 놈이라서 그런지, 아무리 글꼴을 바꾸고 꾸며봐도 영 Mac OS X의 Inteface와 맞지를 않았다.

그래서, 대체할 놈을 찾아보니, 대표적으로 두 놈을 만났다. 바로 GitNub과 GitX. 우선 인터페이스를 비교해보면, 두 놈 다 코코아 어플리케이션이라 GitK보다 산뜻한 느낌이고 UI 측면에서 GitX가 더 편안한 느낌이 들었으며, RubyCocoa로 짠 GitNub에 비해서 GitX는 순 코코아 프로그램이라 설치도 싶다.

Mac에서 Gitk를 대체할 만한 도구들(이)란 제목의 글 마저 읽기 →