블로그 이미지
JEEN

서울에 사는 꽃청년의 IT찌질모험기

Rss feed Tistory
IT 2013.02.26 10:56

돌아보는 소소한 HTML / Git 의 역사적인 순간

 하루를 시작하려고 맥북을 열었더니 @yuni_kim 님께서 메신저로 아래의 링크를 던져주더랍니다.

 - WWW-Talk Jan-Mar 1993 : proposed new tag : IMG

 그러니 네, 20년전에 HTML IMG 태그가 Marc Andreessen 에 의해 제안되었습니다. 네, 그러니까 아시는 분은 익히 아시는 그 Marc Andreessen 입니다. 할려는 얘기는 이 사람 얘기는 아니었으니... 일단 패스 =3

 지금의 현란하고 복잡해지는 웹과는 달리 20년전 이미지 태그 제안이 올라가는 그런 시절의 웹이라니... 하긴 저도 뭐 97년쯤에 비싼돈(분당 요금 20원인가)에 웹에 접속하곤 했던 기억이... 하지만 뭐 있는 게 없으니... 2002년까지 나우누리 VT모드에서 주로 놀았었죠.

 마침 Github CEO 인 @defunkt 도 똑같은 내용의 트윗을 했더군요.

 더 재미있는 건...

 2092일 전, 2007년 6월 5일 @defunkt 는 git 을 배우고 있다고 트위터에 트윗을 했더라는 것입니다. :-) 그리고 2013년 지금은 Github 는 사무실 하나 없이 시작해서 지금은 관련기술을 선도하는 유명한 IT회사가 되어 있네요.

 전 그때 쯤에 아마 Google Tech Video 에서 Randal Schwartz 아저씨가 Git 에 대해서 강연하는 동영상을 본 기억이 있습니다. 이때까지는 SVN 을 쓰다가 SVK 를 써보려는 즈음 이었던 것 같네요.

 10년쯤 후에는 지금 또다른 누군가가 또 큰 조류를 끌고 올 지...


신고
IT/Tips 2010.11.22 13:40

블로그 엔트리에 읽는 데 걸리는 시간을 표시

  예전에 lifehacker 인가에서 본 적이 있었는데, 블로그 엔트리를 읽기 전에 "이 블로그 엔트리를 다 읽는 데 몇분이 걸립니다" 라는 안내문구를 표시함으로 블로그 외부유입이 늘어났다 라는 도시전설이 있었습니다. 소스를 찾아보려고 URL 을 뒤져도 안나오네요.
  
  실제로 이를 적용한 사이트가 몇 군데 있는데, 그 중 하나가 제가 자주 들르는 일본의 기술평론사 홈페이지입니다.


  이 페이지를 보면 "この記事を読むのに必要な時間:およそ 5.5 ~ 10.5 分"이라고 되어 있죠. 5.5분 - 10.5분이라면 뭐 물론 개인차에 따르겠지만요;;;
  아무튼 그 전설을 듣고나서 티스토리에서는 어떻게 쓰면될까 했는데, 결국은 js 에서 할 수 밖에 없었습니다. 뭐 플러그인이라도 제공해주면 모르겠지만... 

  대충 깨작여볼까 하다가 그냥 먼저 적당한 검색키워드를 통해서 구글해본 결과 나름 간단하게 구현한 예제가 있어서 소개합니다.


  여기에는 html 길이를 기준으로 계산을 했는데, 이걸 text 로 고쳐서 티스토리에 올려봤습니다.


  그리고 위에서 보실 수 있듯이 이렇게 추가를 해주었더랬죠. :-)
  일단 위의 js 코드에서 제시한 분당 800자의 속도에 대해서는 어떤 기준인지 잘 몰라서 일단 그대로 써봤습니다. 어차피 일본어 읽는 거랑 한글 읽는거랑 비슷하겠거니...

<script type="text/javascript">
jQuery.fn.ReadTime = function(conf){
  var txtLen = $(this).text().length;
  var time = Math.floor(txtLen/conf.spd);
  var msg = (time>0)? time : 1 ;
  $(conf.timeTxt).text(msg);
  return this;
};
$(function(){
  $('.article').ReadTime({
    timeTxt : ".readtime",
    spd : 800
  });
});
</script>

  아무튼 위의 jsdo.it 에서 사용한 코드를 그대로 가지고 왔습니다. GeckoTang 씨에게 감사의 말씀을 전하며...
  위의 코드를 티스토리 [스킨] -> [HTML/CSS 편집] 에서 HTML/CSS 편집 란의 <head>...</head> 안에 붙여넣습니다. 

  그리고 안내문을 표시하기 위해서... 원하시는 장소에

<span>아래의 블로그 기사는 <span class="readtime"></span>분 안으로 읽으실 수 있습니다.</span>

  를 추가합니다. 자세한 내용은 소스보기를 통해서 확인해보세요.

  아무튼 뭐 대략적인 숫자를 내던지는데, 체감속도에 맞는지 어떤지는 모르겠습니다. 개인차가 있겠고, 그 범위를 계산해서 나중에 기회가 생기면 더 만지작거려서 고쳐나가면 되지 않을까 싶네요.
신고
IT/Tips 2010.05.07 13:20

[ Vim/Zencoding ] Vim 에 늦바람들기 시작하면서 Zencoding 만지다

  원격으로 서버에 들어가서 작업해야 될 일이 많기에 주로 emacs/vim 을 사용해왔습니다.
  하지만 뭐 기본적으로 복사/붙여넣기, 검색/치환 을 시작으로 Syntax Highlighting 되면 그냥 오케이라고 생각해왔었습니다.

  올해 초 서서히 붐이 일기 시작한 Zencoding 도 다른 여러 IDE 에 플러그인으로 등장했지만 그닥 사용성에서 만족하지는 못했기에 (IDE 자체가 무겁기도 하고..) 잊고 지내다가, 심심해서 vim의 zencoding 플러그인을 넣어보았습니다.


  $HOME/.vim/plugin/ 에 zencoding.vim 을 넣고 
  
  vim 을 실행시켜서 INSERT MODE 에서 아래와 같이 입력하고

  html:5

  커맨드 모드에서 Ctrl + y , 를 누르면 

  <!DOCTYPE HTML>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>

  </body>
  </html>

 로 변환됩니다. 적은 타이핑 수로  HTML 기본 뼈대를 갖출 수 있는 것입니다. html:5 같은 스니펫은 zencoding.vim 안에 정의되어 있기 때문에... 거기에 맞춰서 자신에게 필요한 html 기본 뼈대를 만드는 방법도 있을 겁니다. (html:4t 나 html:4s 등등...)

  또한 역시 INSERT MODE 에서 
  table#main>tr.head>th*4<tr.cols*2>td*4

  라고 입력하고 커맨드 모드에서 Ctrl + y , 를 누르면 
<table id="main">
     <tr class="head">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr class="cols">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
     </tr>
      <tr class="cols">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
     </tr>
  </table>

  이렇게 CSS 셀렉터 와 같은 형식도 지원을 하게 됩니다. 
  그외 자신만의 스니펫을 정의해서 여러모로 웹개발에 편리하게 쓰일 수 있지 않을까 합니다.
  
* 개발서버의 vim 이 6.8.x 였는데 여기에 zencoding.vim 을 넣으니까 에러가 나서 최신버젼 7.2.x 를  홈디렉토리에 넣고 돌렸더니 잘 되덥니다. 은근히 버젼많이 타나봐요. (vim 초짜 ;ㅁ;)

 아무튼 vim++
신고
IT/Tips 2010.05.06 13:36

아기다리고기다리던 Blackbird Pie

  예전에 여러번 이런 기능이 있었으면 했던 걸 Twitter 가 만들어 줬군요.

  블로그 등에 집어넣기 좋게끔 HTML 코드를 생성해주는 BlackBird Pie 입니다.


큰일났다... 수확할때 되었는데 위룰 접속이 안된다;;;; 아오 ;ㅁ;less than a minute ago via Echofon


  트윗 URL 을 지정하면 이렇게 깔끔하게 표시해줍니다.
  그리스몽키 같은 거 써서 어케 간단하게 쓸 수 없을까 하는 궁리를 해봅니다.
  (아니면 티스토리에서 해주는 것도 좋...)

  @Anywhere 도 그렇고 .. 요즘 트위터의 행보가 참 맘에 듭니다 (안에서는 FB 와 불타는 경쟁이려나요...)
신고
TOTAL 462,217 TODAY 19

티스토리 툴바