이제 Quicksilver에서 Twitter 하자!

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

Graham English씨가 공개한 iQuickTwitter AppleScript 덕분에 이제 Twitter 하기가 한결 더 수월해졌다.

공개된 iQuickTwitter를 한 마디로 설명하자면, iQuickTwitter = Twitter + Quicksilver + iChat + Growl의 자연스러운 조화라 할 수 있다.

물론 전에는 재잘거릴 때마다 Twitterrific을 통했었지만 가끔 하는 수다를 위해 항상 커놓기도 뭐했는데, 이렇게 필요할 때만 배출 구멍을 열어놓을 수 있으니 내겐 꼭 안성마춤이라 하겠다. 🙂

위의 소개 페이지에 있는 기능과 설치/사용 방법을 그대로 옮기면,

기능:

  • 입력된 글자 수를 계산해서 140을 초과하면 Growl을 통해 경고해줌.
  • 글 전송을 완료하면 Growl을 통해 알려줌.
  • 작동 지연 현상을 줄이기 위해 Keychain Access를 통하지 않고 Twitter의 사용자 이름과 암호를 직접 저장해서 사용함.
  • iChat이 실행되고 있는지 확인해서 최근 재잘거림을 상태 메시지로 설정해 줌.
  • Growl은 설치되어 있는Twitterific의 아이콘을 사용하게 됨.

설치 방법:

  1. 스크립트를 내려받고, 압축을 풀어서 아래의 장소에 놓는다.(Actions 폴더가 없다면 새로 만들어야 함):
    ~/Library/Application Support/Quicksilver/Actions
  2. Script Editor를 열어서, 스크립트에 있는 아래 줄과 같은 부분에 Twitter 사용자 이름과 암호를 적어놓는다:
    set twitter_key_account to "your@email.com"
    set twitter_key_pass to "your_password"
  3. Quicksilver를 재실행.

사용 방법:

  1. Quicksilver를 작동시키고.
  2. text mode(마침표 키를 누름)로 들어가서 메시지를 입력.
  3. 탭(Tab) 키를 누르고 Action Pane으로 가서 “Tweet”라고 입력 (모두 입력하지 않아도 됨).
  4. 엔터(Enter) 키를 눌러서 전송.

이러한 협업에서 가져올 좀 더 효율적인 수다는 과연 어떤 결과를 낳을 런지? :mrgreen:

꼬리표:

jQuery를 이용해서 코드의 모양새(style)를 자동으로 바꾸어 주기

Apple, Mac & iOS, CSS, JavaScript, Notes, Quotes, WordPress 댓글이 없음 »

예전에는 블로그 글에 포함된 코드의 문법을 색깔별로 구분하기 쉽게 표시되도록 WordPress의 plugin인 iG:Syntax Hiliter를 사용했었다. 하지만, 보이는 코드의 모양도 별로 마음에 들지 않거니와 코드 속에 쓸데없이 자동으로 포함되는 특정 요소 관련 링크들은 오히려 코드의 해석을 어렵게 하고, 문서의 구조까지 해치는 부작용이 있었다. 물론 지원되는 언어들도 한정적이었고.

그래서, 바램이었다면 평소 애용하는 TextMate를 이용해서 지원하는 여러 가지 다양한 테마들에서 보이는 코드의 모양을 그대로 블로그에도 옮겨놓을 수 없을까 궁금해하던 차에, 찾아보니 딱 내가 바라던 방법을 소개해 놓은 글을 발견하게 되었다. 그 후로 소개된 요령을 참고 해서 이미 올려두었던 코드들을 일일이 바꾸면서 이곳에도 비슷하게 적용해서 만족하게 사용하고 있다. 물론 코드를 올릴 일이 있으면 그 전에 TextMate에서 또 한 번의 변환 과정이 필요하지만 “Create HTML From Selection” 메뉴에 단축키만 지정해 두면 이것 또한 번거로운 작업은 아니다.

그런데, 사람의 욕심은 끝이 없어서인지 작업은 여기서 멈추지 않고, 이렇게 변환돼서 예쁘게 올려진 코드라도 실제로 쓰려고 복사할 때는 줄 바꿈이라든지 코드의 원래 모양이 제대로 전달되지 못하는 부작용이 있을 수 있다. 이것을 해결하기 위해서는 블로그에서 코드의 원래 모양을 그대로 전달해 주는 또 하나의 간단하면서도 깨끗한 버전의 모양새를 선택할 수 있게 해야 하는데, 일반적으로 떠오르는 방법으로 JavaScript의 힘을 빌려 새로운 창에 보여주는 방법이 있지만, 이것도 그리 깔끔한 방법은 아닌 듯 보였다.

마침, 요새 주무르고 있는 jQuery에서 제공하고 있는 몇 가지의 동작 효과들을 사용하면 간단하게 원하는 기능을 구현할 수 있을 것 같아서 바로 적용해 보았고, 참고를 위해 그 적용 방법을 여기에도 남겨둔다. jQuery를 이용해서 코드의 모양새(style)를 자동으로 바꾸어 주기(이)란 제목의 글 마저 읽기 →

꼬리표:

TextMate의 jQuery Bundle을 HTML Bundle에도 적용하기

Apple, Mac & iOS, HTML, JavaScript, Notes, Quotes 댓글이 없음 »

여러 JavaScript Library들 중에서 최근에 와서야 발견했지만 아주 마음에 드는 놈인 jQuery의 이모저모를 맛보고 있는데, 마침 TextMate 용 jQuery Bundle이 제공되고 있어서 바로 설치해서 사용하고 있다.

그런데, 사용하다 보니 jQuery bundle에 정의되어 있는 snippet들은 HTML 문서에서는 바로 사용할 수 없다는 사실을 알게 되었다. 실험 목적으로 HTML 문서에 바로 JavaScript를 삽입해서 쓸 경우에는 이 점이 무척 아쉬운 부분이다.
하지만, 해결책은 바로 옆에 있었다.

TextMate의 Languages Bundle Editor를 열고 HTML bundle을 선택한 후에, 다음과 같은 코드를 HTML의 기본 pattern이 정의되어 있는 부분(16 번째 줄 부터 시작 됨)에 추가해 주면 된다.

{   name = 'source.js.jquery.embedded.html';
    begin = '(?:^\\s+)?(<)((?i:script))\\b(?![^>]*/>)';
    end = '(?<=</(script|SCRIPT))(>)(?:\\s*\\n)?';
    patterns = ( { include = 'source.js.jquery'; } );
},

TextMate을 재실행하면, HTML bundle이 적용된 환경에서도 바로 jQuery snippet들을 불러와서 사용할 수 있게 된다. 🙂
jQuery bundle의 다음 버전에서는 아마도 위와 같은 추가 설정 작업이 필요 없도록 수정될 모양이다.

추가: Getting jQuery bundle to work within script tags embedded in HTML

꼬리표:

코드(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를 불러오는 단락도 추가함.

꼬리표: