코드(Code)가 웹에 뛰어들 때

Apple, Mac & iOS, HTML, Me, myself & and I 댓글이 없음 »

아무 준비없이 그냥 뛰어든다면 그 코드는 물론 무참히 깨지고 말 것이다. 그렇기 때문에 항상 코드 속 HTML entities들과 겹치는 부분은 웹 상에서도 그대로 보여지도록 알맞게 고쳐주어야 한다. 악명 놓은 놈들로 >, &, <가 있지.

물론 간편하게 웹 상에서 준비 작업을 해줄 수도 있겠지만, 한글 사용에 약간 문제가 있고 서버와의 연결은 필수 조건이다.

단순한 작업이지만 매번 번거로워서 Dashboard 용 widget으로 만들게 되었다.

웹에 뛰어든 코드 위젯(widget)의 그림

이름을, 약간 우습지만, 웹에 뛰어든 코드(Code Postable)로 지었는데, Dashcode Beta에서 탄생한 첫 위젯이지만 만드는 작업이 꽤 순조로웠기에 앞으로 발표될 정식 버전이 기대된다.

그나저나, 정작 위젯 1순위 후보에서 탈락한 온라인 문법/철자검사기가 utf-8를 지원해주면 좋으련만 아쉽군… 🙁

꼬리표:

간단한 HTML 문서 생성을 위한 TextMate 용 snippet

Apple, Mac & iOS, HTML, Quotes, Web Development 댓글이 없음 »

과거 Yahoo!의 User Interface Engineer이기도 했던 Dustin Diaz씨가 얼마 전 공개한 네 번째 스크린캐스트(screencast)를 보면 TextMate가 웹 개발에 사용되는 한 단면을 엿볼 수가 있다.

그런데, 여기서 눈에 띄는 것 중에 하나는 TextMate가 기본적으로 제공하는 snippts 중에는 없는 것으로 기본 밑바탕의 HTML 문서를 만들 때 그가 사용했던 page로 지정된 tab trigger snippet. TextMate에서 사용되는 snippet이란 일정 길이의 글 단락을 문서에 삽입할 수 있는 기능을 제공하고 있는데, 이놈이 아주 유용한 이유는 삽입된 글 단락 안에서 tab 키를 이용해서 순차적으로 특정 위치로 이동할 수 있도록 지정해 줄 수도 있고, 삽입될 단락 중에 특정 부분을 변수로 지정해 놓고서 삽입된 후에 tab 키로 이동해서 상황에 맞게 수정해 줄 수도 있다.

쓸모가 많을 것 같아서 하나 만들어 볼까 하는 중에, 반갑게도 바로 그가 사용했던 Textmate의 “page” snippet을 공개해 주었다.

당장 그대로 추가하고 보니, 몇 가지 XHTML 1.0 Strict Doctype에 안어울리는 것이 있어서 입맛대로 약간 수정해 보았다.

<!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" />
    <!--[if IE]><link rel="stylesheet" href="$7ie.css" type="text/css" media="screen, projection"><![endif]-->
    }<style type="text/css" media="screen">
    /* <![CDATA[ */
      
    /* ]]> */
    </style> 
    ${8:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    }<script type="text/javascript">
    // <![CDATA[ 
      $0
    // ]]> 
    </script> 
  </head>
  <body id="${9:page}">
    <div class="container">
      ${10:<div class="span-${11:24}">
        <h1>${12:Header}</h1>
      </div>
      <div class="span-${13:20}">
        ${14:Main content}
      </div>
      <div class="span-${15:4} last">
        ${16:Right sidebar}
      </div>
      ${17:<div class="span-24">
        ${18:Footer}
      </div>}}
    </div>
  </body>
</html>

XHTML 문서에 포함된 inline style sheet가 적용되려면, link tag으로 삽입된 style sheet 뒤에 위치해야 해서 자리를 옮겼고, script tag에 빠져있는 type 요소도 추가해 주었다. 물론, XHTML 문서에 맞는 MIME type도 기본적으로 application/xhtml+xml로 지정되도록 바꾸었으며, CSS와 JavaScript를 감싸주는 HTML 주석(comments) 기호도 XHTML 문서에서 올바로 인식되도록 고쳐주었다.
마지막으로, 애용하는 JavaScript Library들 중의 하나인 jQuery를 불러오는 단락도 추가함.

꼬리표:

Yahoo User Interface Library의 무료 호스팅(hosting) 소식

Web Development, Web Optimization 댓글이 없음 »

JavaScript의 선두주자 격인 YUI Library 파일의 탄생 1주년과 맞물려서 YUI의 모든 라이브러리들을 Yahoo!에서 무료로 호스팅 해준다고 한다.

이것이 갖는 의미는, 세계 각지에 퍼져있는 속도가 빠른 네트워크 서버들의 힘을 빌어 작은 크기로 압축된(gzip compression) YUI 파일들을 불러와서 적용 웹 어플리케이션의 전체적인 반응 속도를 향상시킬 수 있게 된다. 그리고 모든 파일에는 Expires headers가 적용되어 있기 때문에 매번 파일들을 내려받는 수고를 덜어줄 수도 있단다.

다음 두 줄이면 끝나겠군.

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/reset-fonts-grids/reset-fonts-grids.css" />

Filepaths for YUI Library Component Files as of Version 2.2.2

이로써, 개발자들의 YUI Library에 대한 관심은 더 늘어날 듯.

꼬리표:

JavaScript의 올바른 표준 MIME TYPE은?

JavaScript, Notes 한 개의 댓글 »

지금까지 일반적으로 JavaScript를 웹 문서에 심어놓을 때 MIME type으로는 다음과 같은 어쩌면 즉흥적이고 통일되지 못한 것들이 사용되어 왔다.

  • text/javascript
  • text/ecmascript
  • application/x-javascript (javascript 앞에 x가 붙은 것은 표준이 아닌, 실험적인 것임을 뜻함)
  • text/javascript1.5 (요새 브라우저들은 버전 숫자를 그냥 무시해 버림)
  • language=”JavaScript” (HTML 4부터는 지원하지 않음)

그래서 이런 혼란스런 상황을 막으려고 2006년 4월에 Javascript(ECMAScirpt)를 위한 MIME type의 표준(RFC4329)이 마련되었지만, 여러 브라우저들의 표준 JavaScript MIME type 지원은 아직 요원한 상황이다.
(확인해 본 바로는, 지금까지 오직 Firefox 1.5+, Opera 9+, Camino 만이 지원하고 있다.)

Javascript 프로그램은 그 성격상 text 문서로 지정하는 것은 적절치 않으며, 대신 application/javascript 혹은 application/ecmascript(이것을 사용하면 좀 더 엄격한 적용 규칙이 주어진다)를 대신 사용할 것을 권장하고 있지만, 이는 대부분의 웹 브라우저들이 지원하지 않는 한 그 실제 적용은 아직 이를 것이다.

당장은 그냥 서버 쪽 MIME type만 고쳐 둠.

꼬리표:

Safari의 RSS 구독기 테마(theme)

Apple, Mac & iOS 2개의 댓글 »

얼마전에 SafariDocStatus의 소개 글에서도 썼지만, RSS 구독기로 Safari에서 기본적으로 제공하고 있는 것을 사용하고 있다. 여러 관심가는 곳에서 올려지는 새로운 글들을 확인할 때는 그냥 기본 브라우져에서 확인하는 것으로도 충분하고 더 자연스럽게 느껴지기 때문이다.

그런데, Safari RSS 구독기의 페이지 모양을 더 보기 편하게 바꿀 수 있을까 알아보는 중에, iLife라는 이름의 Safari RSS 테마를 발견했다.

iLife 테마를 Safari의 RSS 구독기에 적용한 모습

새로운 테마를 적용하고 난 후의 모습은 새 글을 구별하기가 한결 더 쉽고, 글의 제목을 눌렀을 경우 새 창 (혹은 새 텝)에서 글의 내용을 보여주기 때문에 RSS의 글 목록에서 여러 글들을 손쉽게 꺼내 볼 수가 있다.

설치는 iLife RSS 테마를 내려받아 압축을 푼 후, ilife.syndtheme 폴더를 ~/Library/Syndication/Themes 폴더 속에 넣고 Safari RSS Theme Switcher.app를 실행해서 iLife 테마를 선택해 주면 된다. 물론 기본 테마로 되돌아 가려면 Apple Default를 선택해 주면 됨.

ilife.syndtheme 폴더 속의 Articles.css 파일을 수정하면 자기만의 테마를 꾸밀 수도 있을 것이다.

꼬리표: