Rails가 버전 2로 갱신한 지도 꽤 되었지만, TextMate에서 사용하되는 Rails bundle은 새로운 기능에 대응하지 못하고 제자리에 멈춘 지 오래다. 그래서, 여기에 만족하지 못하고 자기만의 번들을 수정해서 사용하는 사용자들도 많으리라 생각되는데, 반갑게도 얼마전 Rails 2.x 버전을 위한 새로운 TextMate 번들 개발/관리자가 등장하였다는 소식이 있었다.

이제, 최신 Rails 번들은 요새 많은 주목을 받고 있는 version control system인 Git을 써서, two_point_ooh branch에서 받을 수 있게 되었다.

cd "~/Library/Application Support/TextMate/Bundles/"
mv "Ruby on Rails.tmbundle" "RoR.tmbundle.orig"
git clone git://github.com/drnic/ruby-on-rails-tmbundle.git "Ruby on Rails.tmbundle"
cd "Ruby on Rails.tmbundle"
git checkout --track -b two_point_ooh origin/two_point_ooh
git pull

차후에, 또 갱신된 번들을 받을 때는,

cd "~/Library/Application Support/TextMate/Bundles/Ruby on Rails.tmbundle"
git checkout two_point_ooh  # optional; only if you changed to another branch etc 
git pull

나중에, 공식 Rails 2.0 bundle은 원래의 SVN repository에도 배포될 예정이란다.
참고로, git을 Mac OS X에서 컴파일하는데 약간의 애를 먹었는데, 이 곳에서 간편하게 설치할 수 있는 최신 버전의 git installer 파일을 받을 수 있다.

웹 개발 과정에 있어서 웹 페이지 속 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" />
    <!--[lt IE 7]><link rel="stylesheet" href="$3lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
    }<style type="text/css" media="screen">
    /* <![CDATA[ */
 
    /* ]]> */
    </style> 
    ${4:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    }<script type="text/javascript">
    // <![CDATA[ 
        $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:xml: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" />
    <!--[lt IE 7]><link rel="stylesheet" href="$7lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
    }<style type="text/css" media="screen">
    /* <![CDATA[ */
 
    /* ]]> */
    </style> 
    ${8:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    }<script type="text/javascript">
    // <![CDATA[ 
      $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>

간단한 것이지만, 손놀림을 덜 수 있는 또 하나의 꼼수다.

Mac OS X 10.5 Leopard 발매와 더불어서, 사용자들은 자기가 애용하고 있는 어플리케이션들이 과연 새로운 환경과 잘 어울리면서 부드럽게 돌아갈 것인지의 염려섞인 걱정이 들기 마련이다. 개인적으로 갱신이 약간 뜸했던 TextMate의 개발 근황을 알아보기 위해 TextMate 사용자 Mailing list를 들러보았다.

현재까지 알려진 소식으로, 개발자는 내년 1월까지 아프리카에서 그 만의 낭만적 휴가를 보낼 예정이며 차기 TextMate 2의 발표는 당분간 기대하기 어려울 것이란다.

역시나 나처럼 TextMate 2의 개발 현황에 대한 사용자들의 궁금증이 증가하면서, 최근 TextMate 2에 대한 공식적인 소식이 담긴 페이지를 걸어놓았다. 별건 없고 공개된 것은, TextMate 2는 Leopard에서만 돌아갈 것이며 mouse gestures 기능을 지원할지도 모르겠지만, 언제쯤 공개될 것인지는 노 코멘트란다.

한국어 입력 문제도 말끔히 해결되면서, 빠르면 연말의 깜짝 발표 소식을 기대할 수밖에… 🙄

아프리카 여행…

Was TextMate 2 Released Today?

TextMate와 함께 기본적으로 제공되는 CSS 번들에는 못난 Internet Explorer, 특히 IE 6 만을 위해서 사용될 수 있는 CSS hacks이 들어 있다.

바로 Other 항목 밑에 있는 것들로, 예를 들어 IE 6에게 png 그림의 투명도를 제대로 표시하게 하려고 Microsoft 전용 AlphaImageLoader Filter를 쓴 것이 있는데, background tab trigger로 사용될 수 있다.

.png-transparent {
  background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='image/scale/crop');
}

CSS3의 opacity 속성을 지정할 때는 IE를 위해 MS의 Alpha Filter가 사용된다. -moz-opacity 속성은 오래된 버전의 Mozilla 계열 브라우저들(Mozilla 1.7과 Firefox 0.9 이전) 위한 것으로 지금은 삭제해도 무관하다.

.opacity-div {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
}

그런데, 이것들 말고도 자주 쓰이는 꼼수들이 더 있기 마련인데, 개인적으로 두 가지를 더 추가해서 쓰고 있다.
하나는 IE 6 만을 위한 꼼수로, 이 놈은 CSS의 max-width와 min-width 속성을 전혀 알아듣지 못하는 관계로 할 수 없이 또 MS 전용 expression() 속성을 빌려와서 적용해 주어야 한다.
아래는 IE min-max-width라는 이름으로 저장된 CSS snippet의 내용인데, tab trigger로 iemwidth를 지정해 주었다.

width:expression(document.body.clientWidth > ${1:980} ? "$1px" : (document.body.clientWidth < ${2:480} ? "$2px": "auto" ));

또 하나는 CSS layout을 구성할 때 자주 쓰이는 snippet으로 float된 자식 요소를 감싸주려고 과거에는 CSS의 :after pseudo-element를 써서 float을 clearing하는 벙법이 많이 사용되었으나, IE가 아직까지 CSS 2.1의 :before와 :after pseudo-element를 지원하지도 않거니와, 더 간편한 방법으로 알려진 pseudo-element를 쓰지 않고 float을 clearing하는 방법이 많이 사용되는데, 여기에는 또 IE 6 이하 버전 때문에 꼼수가 들어가야 한다.
그래서 아래는 짧지만 타이핑의 수고를 덜어주기 위해 IE 7까지 고려한 새 float clearing 방법을 참고해서 추가한 아주 간단한 snippet이다.

${1:.clearfix} {
  overflow: hidden;
  ${2:_}height: 1%; /* IE 6 fix */
}

IE의 경우, float된 자식을 감싸려면 부모가 MS 전용 속성인 “hasLayout“이 true 값을 가져야 하는데, 우연히도 IE 7에 와서는 overflow의 속성이 주어질 경우(visible 제외) 자동으로 hasLayout 값을 갖게 되면서 또 다른 꼼수를 사용할 필요가 없다. 하지만, 불행히도 IE 6에서는 여전히 hasLayout 값을 주려면 이미 알려져 있는 여러 hasLayout 값을 갖게 하는 CSS 속성들 가운데 하나를 적용해 주어야 한다. (위에서는 “Holly Hack”이라 일컬어지는 height: 1%를 사용했고, 다른 브라우저들로부터 감추기 위해 underscore hack이 사용되었지만, 부모 요소에 height 값을 지정할 필요가 없다면 밑줄은 필요없다.)

이런 꼼수들의 실제 적용은 나중에 CSS 파일에 따로 모아서 사용하는 것이 사이트 관리하는데 수월할 것이다.

아래는 TextMate에서 제공하는 HTML의 기본 table snippet에 의해 삽입되는 코드이다.

<table border="0" cellspacing="5" cellpadding="5">
  <tr><th>Header</th></tr>
  <tr><td>Data</td></tr>
</table>

무척이나 단출하고 접근성을 염두에 둔 최소한의 요소들이 빠져있기 때문에 데이타 테이블을 짤 때 무심코 그냥 지나칠 수가 있다.
간단한 데이타 테이블이라도 접근성을 고려한다면 최소한 테이블 안에 caption 요소summary 속성을 추가하고 th 혹은 간혹 td 요소에는 scope 속성이 포함되어 있어야 한다.
그래서, 나름대로 수정한 table snippet (행의 갯수가 최소 4, 최대 7 기준):

<table id="${1}" summary="${2}"${4:${5: border="${6:0}"}${7: cellspacing="${8:5}" cellpadding="${9:5}"}}>
  <caption>${10}</caption>
  <thead>
    <tr>
      ${11:<td></td>
      }<th scope="col">${12:Table Header}</th>
      <th scope="col">${13:Table Header}</th>
      <th scope="col">${14:Table Header}</th>
      <th scope="col">${15:Table Header}</th>
      ${16:<th scope="col">${17:Table Header}</th>
      ${18:<th scope="col">${19:Table Header}</th>
    }}</tr>
  </thead>
  ${20:<tfoot>
    <tr>
      <th scope="row">${21:Table Footer}</th>
      <td colspan="${22:}">${23:Footer Data}</td>
    </tr>
  </tfoot>
  }<tbody>
    ${35:<tr>
      ${24:<th scope="row">${25:Header}</th>
      }<td>${26:Data}</td>
      <td>${27:Data}</td>
      <td>${28:Data}</td>
      ${29:<td>${30:Data}</td>
      ${31:<td>${32:Data}</td>
      ${33:<td>${34:Data}</td>
    }}}</tr>}
    ${0:}
  </tbody>
</table>

간혹 구조가 복잡한 데이타 테이블일 경우 scope 속성으로는 테이타 셀과 테이블 제목들과의 관계를 제대로 표현할 수가 없기 때문에 대신에 headers 속성을 써야 할 경우가 있는데, 현재 논의되고 있는 HTML 5.0의 표준 초고 문안에는 headers 속성이 포함되지 않을 예정이라서 개발자들 사이에 많은 논란이 되고 있다.

앞으로 headers 속성의 운명은 알 수가 없지만, 분명한 것은 지금 바로 적용될 수 있는 올바른 데이타 테이블의 구현 방법을 숙지하는 것이리라. W3C의 HTML 문서에 나와있는 화면 해독기를 고려한 Table 표현 방법이나 한 번 더 훑어보자.
데이타 테이블의 디자인 아이디어를 얻고 싶을 땐 Data Tables and Cascading Style Sheets Gallery가 도움이 된다.