Rev. 2.73

http://antisocial.demozoo.org/

Matt Westcott씨는 "Antisocial"이라는 환상적인 영상 데모를 만들었습니다. Canvas로 생성되는 그래픽과 Flash를 이용한 사운드 효과는 jQuerySoundmanager2 등의 자바스크립트 라이브러리를 사용하여 구현한 것입니다. 2년간의 공백기를 거쳐 컴백기념으로 코딩한 것이라고 하는군요. 데모가 담고 있는 내용은 "소셜 네트워킹(social networking)" 현상을 파노라마 형식으로 그려내고 있습니다. 특히, 노골적인 끝장면은 매우 인상적이네요. 삽입된 사운드트랙은 ZX Spectrum Orchestra입니다.

데모를 보는 방법은 두가지가 있는데 일반적인 플레이 외에 demotool에서는 마치 플래시의 타임라인과 같은 UI를 이용하여 영상을 면밀히 확인하거나 시퀀스를 편집할 수도 있게 했습니다. 그저 놀라울 뿐입니다.

antisocial.nfo.txt에 재미있는 문구가 있군요. "Internet Explorer? Hahahahahaha."

Comments

console.png

클라이언트 사이드 웹개발에 유용하게 사용되는 자바스크립트 디버그 콘솔은 더이상 없어서는 안될 매우 중요한 요소가 되었습니다. 최근에는 브라우저 자체적으로 디버그 콘솔을 제공하거나 부가 기능으로 제공하여 개발을 이롭게하고 있습니다. IE에서도 이와 비슷한 Companion.JS라는 플러그인이 있지만 파이어버그보다는 다소 기능이 떨어지거나 사용법이 다르고 특히, 변수 출력의 디테일면에서 차이를 보이기 때문에 사용하는데 불편함이 있었습니다. 그래서 자바스크립트를 이용한 자바스크립트 디버그 콘솔을 만들게 되었습니다.

Prototype 기반이고, 파이어버그의 콘솔과 유사하게 만들려고 노력했습니다, 타입이 object인 경우 이를 분석하여 배열/노드/객체를 구분하고, 커맨드 라인을 사용할 수 있으며, 약소하지만 Ajax 통신하는 모습을 모니터링 할 수도 있어요. 단점은 콘솔의 호출 수와 작동 속도가 반비례 한는 것입니다. 호출이 많을수록 브라우저의 작동속도가 떨어지는 것이죠. 때문에 개발과정에서만 사용하는 것을 권장하며, 되도록이면 간격을 두어 콘솔을 호출하는 것이 좋습니다. console.js는 아래와 같은 방법으로 응용할 수 있습니다.

<script type="text/javascript">
  if (Prototype.Browser.IE && !window.console) 
    document.write('<script type="text\/javascript" src="console.js"><\/script>');
</script>

<script type="text/javascript">
  (function() {
    var set = function(type) {
      var func = (typeof console != 'undefined' && typeof console.log != 'undefined')?
        !!(console[type])? console[type] : console.log : Prototype.emptyFunction;
      /* fix for the firebug less than or equal to version v1.1 */
      return (typeof func.bind == 'function') ? func.bind(console) : func; 
    };
    ["debug", "log", "info", "warn", "error"].each(function(type, i) {
      (i)? debug[type] = set(type) : debug = set(type);
    });
  })();
</script>

위 코드는 제가 즐겨 사용하는 디버그 콘솔 호출 함수입니다. debug 함수를 만들어 사용하는데 파이어버그 콘솔 API를 따르는 디버그 콘솔을 제공하는 대부분의 브라우저들(파이어폭스, 크롬, 사파리 등)에서 사용할 수 있습니다. console 메서드들을 오버라이딩하여 사용하는 방식으로 통합적으로 사용할 수 있게 만든 것이죠. 물론 console.log 메서드를 그대로 사용해도 무방합니다.

다운로드 :

* original - console.js (14.1kb)
* minified - console.js (10.1kb)

업데이트 :

* 2008.10.08 - IE6에서도 Ajax 통신을 모니터링 할 수 있습니다.
* 2008.10.08 - Object 분석 결과 처리가 개선되었습니다.
* 2008.10.08 - Ajax 통신에 소요된 시간을 표시합니다.
* 2008.10.09 - Ajax 통신 결과물(responseText)을 표시합니다.
* 2008.10.09 - Ajax 통신 상황(status)의 오류를 표시합니다.
* 2008.10.10 - 자동으로 스크롤 위치를 계산합니다.

Comments

prototypejs.png

참으로 오랜만에 Prototype이 업데이트 되었군요. 30가지 버그 수정과 25가지 개선사항이 적용되어 있다고 합니다. 전체코드는 4320열로 약 100라인 가량 추가되었으며, 이렇다할만한 특징은 찾아 볼 수 없었습니다. 8개월만의 업데이트 치고는 조금 실망스럽네요.

Prototype 1.6.0.3 다운로드

Comments