http://www.flickr.com/photos/jasonprini/4104210048/

스티브 사우더스씨가 브라우저의 이상한 동작에 대한 글을 작성했습니다. 성능에 관련된 내용인데, 간략한 내용은 다음과 같습니다.

스키마가 없으면 두 번 다운로드
인터넷 익스플로러 7과 8 버전은 http 프로토콜이 빠져있으면 스타일 시트를 두 번 다운로드 합니다. 가끔 "//stevesouders.com/images/book-84x110.jpg" 과 같이 사용하는 경우는 봤는데, 이 경우는 계속 주의해야 할 것 같습니다.

document.write 스크립트가 다운로드 정지의 원인(파이어폭스)
파이어폭스에서는 docuemnt.write를 사용한 스크립트를 읽어들이면 다른 다운로드를 정지시킵니다. 안타까운 사실이지만, document.write는 이미 만들어졌습니다. 이 문제는 페이지 컨텐트에 document.write를 이용해서 광고를 삽입하려고 할 때 수천억배쯤 더 나빠집니다. 대충 이런 식으로 작성하죠.
[code:js]
document.write('<script src="http://www.adnetwork.com/main.js"><\/script>');
다행히 대부분의 최신 브라우저들은 document.write로 추가된 스크립트까지 병렬로 읽어들입니다. 그러나, 몇 주전 파이어폭스 3.6에서 광고를 삽입할 때 이상한 중단 현상을 발견하고, 추적해보았더니 document.write로 추가된 스크립트가 문제였습니다.
document.write 스크립트 테스트 페이지에서 이 문제점을 보여주고 있습니다. 이 페이지에는 4개의 스크립트가 있는데, 첫번째와 두번째 스크립트는 document.write를 사용해 추가되었습니다. 세번째와 네번째 스크립트는 일반적인 방법(HTML과 SCRIPT SRC)을 사용해서 추가했습니다. 그리고 모든 스크립트는 4초가 걸려야 다운로드 할 수 있도록 했습니다. IE8, 크롬4, 사파리4, 오페라 10.10은 페이지를 전부 다운로드 하는데 ~4초가 걸렸습니다. 모든 스크립트는 document.write까지 포함해서 병렬로 처리되었습니다. 반면 파이어폭스에서는 페이지를 전부 다운로드 하는데 12초가 걸렸습니다(2.0, 3.0, 3.6에서 테스트). 첫번째 document.write 스크립트는 1초부터 4초까지 걸렸고, 두번째 document.write 스크립트에 5초부터 8초까지 걸렸습니다. 그리고 나머지 두 개의 일반적인 스크립트를 9초부터 12초까지 다운로드 했습니다.

media=print 스타일시트
인터넷 익스플로러에서는 media="print"를 사용한 스타일시트가 렌더링을 정지시킵니다.
저는 웹브라우저가 현재 사용중이지 않은 미디어 타입의 스타일시트를 건너뛰지 않고 다운로드한다는 사실에 놀랐습니다. 몇몇 웹 개발자들에게 물어보았지만 아무도 이런 동작에 대한 적당한 이유를 대지 못하더군요. 또한 여러분은 media="print" 타입의 스타일시트라 하더라도 Page Speed나 YSlow의 추천에 따라 문서 HEAD에 스타일시트를 두려고 할 것입니다.

동적인 스타일시트
IE에서는 DHTML과 setTimeout을 사용해서 스타일시트를 읽어들이면 렌더링이 멈추는 것을 방지할 수 있습니다. 몇 주전에 유명한 위젯을 만든 회사와 회의를 했습니다. 위젯이 메인 페이지에 주는 영향을 줄이기 위해 그들이 사용한 기술이 바로 다음과 같이 스타일시트를 동적으로 불러들이는 것이었습니다.
[code:js] var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = '/main.css'; document.getElementsByTagName('head')[0].appendChild(link);
과거에는 다운로드 중단을 피하기 위해 스크립트를 동적으로 로딩하는 것에만 주의를 기울였습니다. 스타일시트를 동적으로 읽어들일 생각은 미처 하지 못했었죠. 스타일시트로 오면 다운로드 중단은 문제가 되지 않습니다. 스타일시트는 다운로드를 멈추게 하지 않습니다(파이어폭스 2.0는 예외). 스타일시트 다운로드에서 걱정스러운 부분은 스타일시트를 모두 다운로드 하기 전까지 렌더링을 멈추는 IE의 특성입니다. 다른 브라우저에서는 스타일이 적용되지 않은 컨텐트가 잠깐 나왔다가 사라지는 현상(Flash Of Unstyled Content, FOUC)이 생길 것입니다.

배경이미지 예측
크롬과 사파리는 스타일시트가 전부 준비되기 전이라도 배경 이미지의 다운로드를 시작합니다. 배경 이미지 스타일이 재정의 되는 경우라면 쓸데없는 다운로드가 늘어나는 셈입니다.
직장 동료인 스티브 램이 이런 동작을 저에게 알려주었는데, 이 얘기를 들었을 때 제가 처음 했던 말은 "완전 낭비잖아!" 였습니다. 개인적으로 프리페칭(prefetching)을 좋아하기는 하지만, 대부분의 프리페칭 기능은 너무 공격적이어서 크게 좋아하지 않습니다. 사용하지 않아도 될 다운로드 리소스를 소모하는 일이 잦기 때문입니다. 이 얘기를 처음 들은 이후에 조금 더 생각해봤습니다. 예측된 배경 이미지의 낭비는 얼마나 자주 일어날까? 검색해봤더니 유명 웹 사이트에서는 재정의된 배경 이미지 스타일이 없더군요. 하나도요. 그런 페이지가 하나도 없다고 말할 수는 없겠지만, 매우 이례적인 경우인 것만은 확실합니다.
다르게 생각하면 이러한 배경 이미지 예측 다운로드는 사용자가 인지하는 페이지 속도와 성능을 개선시킬 것입니다.

from Souders blast off 5 in a row
Posted by 행복한고니 트랙백 1 : 댓글 3
Ajaxian에 모처럼 마음에 드는 프로그램이 나타났습니다. TinyMCE로 유명한 Moxiecode에서 Plupload라는 범용 업로드 컴포넌트를 릴리스 했습니다. 이 컴포넌트는 각종 플러그인을 활용해서 가능한 풍부한 사용자 경험을 만들어냅니다. HTML5, Google Gears, Silverlight, Flash, Yahoo! Browser Plus 등을 사용해서 드래그 & 드롭(탐색기에서 웹 브라우저로 바로 드래그하여 파일 업로드 가능), 업로드 프로그레스 바, 클라이언트 측 이미지 리사이즈가 가능합니다.
사용하는 백엔드에 따라서 기능이 조금 다를 수 있습니다. 모든 기능을 지원하는 백엔드는 Google Gears입니다.

CoreAPI는 다음과 같이 사용할 수 있습니다.
[code:js]
var uploader = new plupload.Uploader({         runtimes : 'gears,html5,flash,silverlight,browserplus',         browse_button : 'pickfiles',         max_file_size : '10mb',         resize : {width : 320, height : 240, quality : 90},         url : 'upload.php',         flash_swf_url : '/plupload/js/plupload.flash.swf',         silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',         filters : [                 {title : "Image files", extensions : "jpg,gif,png"},                 {title : "Zip files", extensions : "zip"}         ] });
jQuery의 Queue Widget을 사용했다고 합니다.

from Plupload: A rich upload exprerience on pluggable backends
Posted by 행복한고니 트랙백 0 : 댓글 0
플래시 플러그인없이 플래시 파일(swf)을 실행할 수 있을까요? 어찌보면 황당하다고 할 수도 있을 이런 시도를 한 사람이 있습니다(그리고 성공했습니다). 토바이스 슈나이더(Tobias Schneider)는 브라우저에서 바로 실행할 수 있는 Gordon이라는 이름의 플래시 런타임을 작성했습니다. 이 런타임은 순수하게 자바스크립트와 HTML5 만으로 작성되었으며, 오픈소스이고, MIT 라이센스로 배포됩니다. 배포는 GitHub에서 하고 있습니다.

Gordon의 데모는 여기서 볼 수 있습니다.(데모는 폴 아이리쉬님이 제공해주셨습니다)

Gordon은 최신 버전의 파이어폭스, 크롬, 사파리에서 동작합니다. 그리고, 아이폰 사파리에서도 잘 동작합니다(다만 blue 데모의 경우 제 아이폰 3GS에서는 일부 효과가 다소 느려보입니다).  이 런타임은 "git clone git://github.com/tobeytailor/gordon.git" 명령을 통해 직접 설치해볼 수 있습니다. 데모가 file:// 로 시작하는 URI에서는 동작하지 않는다고 하므로, 웹 서버를 설치하거나 웹 호스팅을 사용해야 할 듯 합니다.

아직까지 문서가 충분히 많지는 않으므로, Gordon의 지원 기능이나 개발 방향에 대해서는 아직 명확하게 알 수 없습니다. 하지만, 개방형 웹 기술에 큰 방점을 찍은 것만은 사실로 보입니다.
[code:js]
<body onload="new Gordon.Movie('trip.swf', {id: 'stage', width: 500, height: 400})">
    <div id="stage"></div>
</body>

from Gordon: Flash Runtime Implemented in Javascript
Posted by 행복한고니 트랙백 1 : 댓글 4
Skulpt는 웹 브라우저에서 동작하는 Python입니다.
정말, 제대로 미친 것 같지만 멋지네요.
위 예제와 같은 터미널은 다음과 같이 작성할 수 있습니다.
 
[code:js]
window.addEvent('domready', function() {
    var term = initTerminal(80, 20);
 
    // set up demo typers
    $('codeexample1').addEvent('click', (function(e)
            {
                e.stop();
                term.doClear();
                term.writeStr("print \"Hello, World!\"     # natch", false, true);
                term.doEnter();
            }));
    $('codeexample2').addEvent('click', (function(e)
            {
                e.stop();
                term.doClear();
                term.writeStr("for i in range(5):", false, true); term.doEnter();
                term.writeStr("    print i", false, true); term.doEnter();
                term.doEnter();
            }));
    $('codeexample3').addEvent('click', (function(e)
            {
                e.stop();
                term.doClear();
                term.writeStr("[x*x for x in range(20) if x % 2 == 0]", false, true);
                term.doEnter();
            }));
 
    term.writeStr("Skulpt demo REPL - " + new Date().toLocaleString() + "\n");
    term.writeStr(term.PS1, true);
});
from Skulpt: Crazy project that lets your browser parse and run Python
 


Posted by 행복한고니 트랙백 0 : 댓글 1

지난주에는 멋진 Chroma Hash를 소개해드렸는데, 이번에 또 다른 jQuery 패스워드 플러그인을 발견했습니다.
iPhone 스타일의 패스워드 플러그인을 입력창에 사용하면 iPhone처럼 입력한 값을 점 모양의 문자로 감추어버립니다.
아직 글자를 중간에 삽입할 수 없는 등의 몇 가지 한계가 있습니다.

from iPhone-like password field; quickshow character
Posted by 행복한고니 트랙백 0 : 댓글 0
구글 크롬에는 V8 디버거라는 자바스크립트 디버거도 있습니다만, 이번에 새롭게 크롬 개발툴 프로토콜(Chrome Dev Tools Protocol)이라는 것을 선보였습니다.
V8 디버거는 자바스크립트 디버깅만 할 수 있었고, 하나의 V8 가상 머신에서만 동작했었습니다. 사실 하나의 구글 크롬 인스턴스에는 렌더링 프로세스에 따라 한 개 이상의 V8 가상 머신이 존재할 수 있습니다. 게다가 브라우저 탭에서 URL을 가져오거나 DOM 트리를 탐색하고 수정하는 작업은 자바스크립트 만으로는 다룰 수 없습니다.
이러한 제약때문에 원격 디버거와 디버깅되는 프로세스간에 추가 정보를 주고받을 수 있는 크롬 개발툴 프로토콜을 만들었습니다. 크롬 개발툴 프로토콜은 현재의 V8 디버거 프로토콜을 비롯한 다른 디버깅 관련 프로토콜의 전송 수단으로도 사용할 수 있습니다.
이 프로토콜을 사용해서 만든 도구 중 하나가 바로 이클립스 기반의 디버거입니다.
원격 디버거에 대한 노력은 그 밖에도 많이 있습니다. 한가지 예로, 오페라 드래곤플라이의 디버깅 및 검사 아키텍쳐인 스코프 인터페이스를 들 수 있습니다. 파이어버그 역시 웹 디버그 프로토콜을 가지고 있으며, ActiveState 에서 사용하던 전통있는 DBGP도 있습니다.

from Google Chrome Eclipse Debugger

Posted by 행복한고니 트랙백 0 : 댓글 0
Michael Ventnor씨가 HTML5에 정의된 체크박스와 라디오버튼의 미정 상태[각주:1]를 구현하고 이에 대한 글을 작성하셨습니다:
웹 개발을 해보셨다면, 체크박스와 라디오 버튼은 선택했거나 혹은 선택하지 않은 두 가지의 상태가 있다는 것을 아실 것입니다. 하지만, 체크박스의 경우 두 가지 상태 중간의 미정 상태를 사용하고 싶을 수도 있습니다. 예를 들면, 모든 체크박스가 하나의 상태(선택됐거나 선택되지 않은 것 중 하나)를 가질 때, 그를 표현할 수 있는 마스터 체크박스의 경우가 있습니다(아래 그림 참고). HTML5의 "미정 상태" DOM 속성을 구현한 덕분에 이 기능은 Trunk (Firefox 3.2) 에서 사용할 수 있습니다. 다음 코드면 충분하죠.
[code:js]
document.getElementById(”check1").indeterminate = true;
아래 그림을 보시면 애매하게 선택된 체크박스를 확인할 수 있습니다(첫번째 그룹의 "CheckAll" 체크박스). CSS3의 :indeterminate 수도 클래스(pseudoclass)는 아직 지원하지 않습니다.

from document.getElementById(”check1″).indeterminate = true; Now shipping in Firefox Trunk
  1. 영어로는 indeterminate로, 체크박스를 여러번 클릭하면 나타나는 선택한 것도 아니고 선택하지 않은 것도 아닌 상태를 뜻합니다. 우리말로는 정확한 번역이 없어 "정해지지 않았다"는 뜻으로 "미정(未定) 상태"라 번역했습니다. [본문으로]
Posted by 행복한고니 트랙백 0 : 댓글 0
Brad Neuberg씨가 이번에 iPhone에 포함된 두 가지 근사한 HTML5 기능에 대해 알려주셨습니다.

Safari 자바스크립트 데이터베이스 프로그래밍
HTML5 스펙에는 클라이언트 데이터 저장을 위한 새로운 메커니즘이 있습니다. 바로 자바스크립트 데이터베이스 지원입니다. HTML 5는 현재 Web Hypertext Application Technology Working Group(WHATWG)가 개발하고 있습니다.

자바스크립트 데이터베이스 지원은 Safari 3.1 이후부터 가능하며, iPhone OS는 2.0 이후부터 가능합니다.

HTTP 쿠키가 허용하는 용량보다 많은 데이터를 사용자의 로컬 컴퓨터에 저장하려는 웹 개발자라면 이 문서를 꼭 읽어보셔야 합니다.

HTML5 응용프로그램 캐시
구글의 Michael Nordman씨가 "이건 아직 Safari나 iPhone에서 지원하지 않습니까?"라고 물었습니다.

David Kilzer씨가 이에 대한 답변을 남겼습니다. "이 기능은 iPhone OS 2.1에 포함되었습니다. iPhone에 설치된 Safari에서 '+' 버튼을 눌러 '홈 스크린에 추가하기'를 사용하면, (HTML5 스펙별로) manifest가 정의된 웹 응용프로그램이 다른 캐시된 리소스와 함께 저장될 것입니다. 이 기능이 동작하려면 manifest 파일이 '반드시' 정확한 MIME 타입으로 제공되어야 합니다.

Mac OS X에는 아직 이 기능을 지원하는 Safari를 탑재하지 않았습니다."

from HTML5 Features in latest iPhone; Application Cache and Database
Posted by 행복한고니 트랙백 0 : 댓글 0

IE='\v'=='v'

2009.01.30 19:29 from [IT] Web Tech
[code:js]
IE='\v'=='v'
IE인지 확인하는 가장 짧은 방법입니다(8버전 포함). 다른 방법으로는 아래의 코드도 있습니다.
[code:js]
IE=top.execScript?1:0
흠 :)
Gareth Heyes씨는(v 트릭을 만든 사람) 이 트릭에 대해 포스팅하면서 여러 브라우저를 판별할 수 있는 한 줄 코드를 만들었습니다.
[code:js]
B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown'

국내 PHP 개발자 사이트인 PHP 스쿨에도 오늘자로 관련 팁이 게시되었습니다.

from IE='\v'=='v'
Posted by 행복한고니 트랙백 0 : 댓글 0
웹 어플리케이션을 보호하기 위해 많은 사람들이 즐겨쓰는 유리 방패가 CAPTCHAS 입니다. 일그러지고 찌그러진 글자를 표시해서 사용자로 하여금 그 글자를 입력하도록 한 다음에 폼을 전송하거나 데이터에 접근할 수 있게 합니다. 이 방법은 보통의 사용자들을 귀찮게 하고, 시각장애인이나 실독증 환자는 아예 접근이 불가능합니다. 이 방법은 또한 우리가 생각하는 것만큼 안전하지도 않습니다. PWNtcha는 OCR과 백엔드 시스템을 사용해서 여러  CAPTCHAS들을 계속해서 크랙하고 있습니다.

정말로 놀라운 것은 자바스크립트와 Canvas만 가지고도 크랙이 가능하다는 것입니다. ShaunF씨는 파일 호스팅 사이트인 Megaupload의 CAPTCHAS 암호를 자동으로 해독하는 GreaseMonkey 스크립트를 작성하셨습니다. 데모는 여기서 확인하실 수 있습니다.

John Resig씨가 이 스크립트를 분석하고 설명한대로, 몇 가지 재밌는 방법이 사용되었습니다.
  1. HTML 5 Canvas의 getImageData API를 CAPTCHA 이미지에서 픽셀 데이터를 가져오기 위해 사용했습니다. Canvas는 이미지를 포함할 수 있고, 그로부터 픽셀 데이터를 추출할 수 있습니다.
  2. 스크립트는 순수 자바스크립트로 작성된 신경망 구현체를 포함하고 있습니다.
  3. Canvas를 사용해 이미지로부터 추출한 픽셀 데이터는 신경망으로 전달되어 정확한 문자로 분리하고, 이 문자들은 광학 문자 인식(OCR)에서 사용됩니다.
사실, Megaupload의 CAPTCHA는 매우 기본적입니다. 그렇지만, 자바스크립트로 그것을 크랙할 수 있다는 것은 여전히 인상적입니다. getImageData API는 좀 더 살펴봐야 할 것 같습니다.

from Captcha cracking in JavaScript with Canvas and neural nets
Posted by 행복한고니 트랙백 1 : 댓글 0
[code:js]
typeof maybeArray ==  "Array"; // 에, 농담이시죠?
maybeArray instanceof Array; // 어쩌면요
maybeArray.constructor == Array; // 어쩌면요
typeof maybeArray.sort == 'function'; // 비슷합니다
Object.prototype.toString.call(maybeArray) === '[object Array]'; // 딩 동 댕

자바스크립트를 처음 접하는 사람들은 어떤 객체가 실제로 배열인지 아닌지 알아내는 간단한 방법이 있을 것이라고 생각합니다. 고수들은 저 너머에 있는 위험을 알고 있습니다. 특히, 프레임 사이를 탐색하며 작업할 때의 문제를 말이죠. 자바 진영은 클래스 로더에 이런 문제가 있었는데, 다른 클래스 로더로부터 객체를 가져올 때 이상한 문제가 일어나곤 했습니다.

Kangax씨는 이 문제에 대해 자세히 다루며 기술적으로 새로운 해결책을 제시했습니다. 덕분에 Prototype과 그 외의 라이브러리들이 그들의 코드를 덕 타이핑에서 다음 코드로 바꿀 수 있게되었습니다.

[code:js]
function isArray(o) {
    return Object.prototype.toString.call(o) == '[object Array]';
}

from isArray: Why is it so bloody hard to get right?
Posted by 행복한고니 트랙백 1 : 댓글 3
jslibsMozilla의 SpiderMonkey를 이용해 커맨드 라인에서 자바스크립트를 사용하는 한가지 방법입니다. jslibs는 보통 PHP나 Python을 통해 접근했던 수많은 공용 라이브러리에 대한 래퍼를 제공합니다. 이미지 관리, 압축, 사운드, ogg vorbis와 OpenGL을 통한 애니메이션과 비디오 등이 있습니다. 또한 전용 래퍼를 통해 SQLite에도 접근할 수 있습니다.

from jslibs - free JavaScript of browser limitations
Posted by 행복한고니 트랙백 0 : 댓글 0

alert()에게 작별을

2008.10.17 07:44 from [IT] Web Tech
Blackbird는 G. Scott Olson씨가 작성한 JavaScript 로깅 라이브러리로 "Blackbird에게 환영을, alert()에게 작별을" 이라는 캐치 슬로건을 가지고 있습니다. 그 슬로건이야말로 Blackbird 라이브러리가 목표하는 바를 명확히 알 수 있게 해줍니다. 자바스크립트에서 메시지 로깅을 아주 쉽게 해주는 것입니다. 그리고 설치도 매우 쉽습니다. 아래 몇 줄의 코드만으로, 관심있는 특정 데이터를 표현해주는 체크포인트를 설정할 수 있게 됩니다.
[code:html]
<html>
    <head>
        <script type="text/javascript" src="/PATH/TO/blackbird.js"></script>
        <link type="text/css" rel="Stylesheet" href="/PATH/TO/blackbird.css" />
        ...
    </head>
</html>
콘솔에 결과를 보내는 Blackbird의 메소드를 사용하는 것은 매우 간단한 일입니다.
[code:js]
log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );
이러한 공개 메소드들이 보내진 메시지들의 유형을 쉽게 파악할 수 있도록 고유한 방식으로 데이터를 표현한다는 것도 장점입니다.
Blackbird는 다음 브라우저들에서 테스트되었습니다.
  • Internet Explorer 6+
  • Firefox 2+
  • Safari 2+
  • Opera 9.5
Brian Dillard씨는 이번 릴리즈를 처음 알린 분들 중 한 명으로 Blackbird에 대한 좋은 글을 쓰기도 하셨습니다.

from Say Goodbye to alert()
Posted by 행복한고니 트랙백 2 : 댓글 3

런던에서 열린 Google Developer Day에서 Harry Guillermo씨가 JavaScript로 팩맨을 만드셨습니다.

from Pacman bites back
Posted by 행복한고니 트랙백 1 : 댓글 0
Michael Mahemof 씨가 HTML을 iframe에 넣고 추출하는 방법에 대해 작성하셨습니다. 원래 TiddlyWiki를 많이 사용하시는 분인데, 소스를 보다가 알게된 방법이라고 합니다. 이것은 그런 일을 하는데에 브라우저 파서를 사용할 수 있게 해줍니다:
[code:js]
// put it in
var doc = iframe.document;
if (iframe.contentDocument)
  doc = iframe.contentDocument; // For NS6
else if(iframe.contentWindow)
  doc = iframe.contentWindow.document; // For IE5.5 and IE6
 
// Put the content in the iframe
doc.open();
doc.writeln(content);
doc.close();
 
// and then get it out
var storeArea = doc.getElementById("storeArea");

from Introducing HTML into an iframe and getting it back
Posted by 행복한고니 트랙백 0 : 댓글 0

MooWheel은 0.2 버전까지 업데이트된 자바스크립트 연결 시각화 라이브러리입니다.

업데이트 사항입니다:

  • 새로운 데이터 형식
  • 텍스트는 물론 점에도 마우스를 올릴 수 있습니다.
  • 이미지가 각각의 항목에 추가될 수 있습니다.

유명한 Twitter 예제를 보실 수 있습니다(TweetWheel 개발자이신 Augsto Becciu씨께 감사드립니다).

MooCirclePack도 릴리스 되었습니다:

MooCirclePack은 또 다른 끝내주는 시각화 라이브러리로, 자바스크립트로 원 묶음을 만들 수 있습니다. 이것은 크기로 표현할 수 있는 데이터나(eg: 막대 그래프의 대안) 무정형으로 표현할 수 있는 데이터에는 정말 좋습니다.

Ajax를 사용하지 않은 데모도 있고, Ajax를 사용한 데모가 있습니다.

from MooWheel and MooCirclePack for visualizations
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

ShiftZoom 1.0 은 Christian Effenberger씨가 가장 최근에 작성한 도구로서, 웹 페이지상의 큰 이미지들을 확대/축소하거나 영역을 정해서 볼 수 있도록 합니다. 코드를 깔끔하게 보호하기 위해 겸손한(unobtrusive) 자바스크립트를 사용했습니다. 플러그인, 확장기능, 외부 리소스가 필요없습니다!

이것은 모든 주요 웹 브라우저에서 동작합니다 - Mozilla Firefox 1.5+, Opera 9+, IE 6+ 그리고 Safari. 또한 images & createElement & getElementById 가 지원되는 예전 브라우저도 지원합니다. 그 밖에는 자바스크립트가 사용되지 않아 방문자들은 멋진 것들이 있는지도 모르게 됩니다.

사용법은 간단합니다:

[code:xml]
<div><img onLoad="shiftzoom.add(this);" width="400" height="200" .../></div>

from ShiftZoom: Zoomify your oversize images
Posted by 행복한고니 트랙백 0 : 댓글 1
Gareth Heyes씨가 "링크로 실행되는 자바스크립트의 모든 변형을 만드는" 자바스크립트 프로토콜 퍼저(Fuzzer)를 작성하셨습니다.

데모를 보시면 퍼징(fuzzing)에 가능한 모든 옵션을 보실 수 있습니다. 여러 브라우저에서 테스트하다가 jav&#57343ascript: 가 작동한다는 재밌는 결과를 얻었습니다. 이 말은 아래 코드가 실행된다는 의미입니다.
[code:xml]
<a href="jav&#56325ascript:al&#56325ert(1)">test</a>


from JavaScript Protocol Fuzzer
Posted by 행복한고니 트랙백 0 : 댓글 0

Dan Vanderkam씨가 새 컴포넌트 dragtable발표하셨습니다:

지난 몇년간, Stuart Langridge씨의 sorttable 자바스크립트 라이브러리가 널리 사용되었습니다. 이유를 알기는 쉽습니다. 테이블 태그에 class=sortable를 추가하기만 하면 컬럼 헤더가 자동으로 정렬을 지원하도록 클릭할 수 있었기 때문입니다. 아주 쉽죠.

하지만 때때로 정렬 기능이 충분하지 않을 수 있습니다. 만약 테이블에서 한개나 두개의 컬럼에 포커스를 주고 싶을때는요? 클라이언트측 응용프로그램에서는 다룰 컬럼을 드래그해서 다음 칼럼으로 가져다 놓으면 됩니다. 왜 웹 응용프로그램에서는 안될까요?

dragtable로 들어가면. sorttable과 같이, 단순한 class 속성을 통해서도 HTML 테이블이 새 기술을 가지게 할 수 있습니다.

JavaScript를 불러온 후, 여러분은 단순히 class="draggable"을 추가할 수 있으며, class="draggable sortable"를 통해 둘 다 사용할 수도 있습니다.

테스트 베드open source project를 살펴보세요.

from dragtable: drag-and-drop reorderable columns for an HTML table
Posted by 행복한고니 트랙백 0 : 댓글 0
Peter Michaux씨가 Firefox에서의 마법같은 eval(..., context)를 발견하셨습니다. 이는 여러분이 진정한 private 데이터를 만들 수 없다는 의미입니다:
[code:js]
// Getting "private" variables
var obj = (function() {
  var a = 21;
  return {
    // public function must reference 'a'
    fn: function() {a;}
  };
})();
 
var foo;
eval('foo=a', obj.fn);
console.log(foo); // 21
 
// Setting "private" variables
var obj = (function() {
  var a = 21;
  return {
    getA: function(){return a;},
    alertA: function(){alert(a);}
  };
})();
 
console.log(obj.getA()); //21
eval('a=3', obj.getA);
console.log(obj.getA()); // 3
obj.alertA(); // 3
물론, 이것은 동적 언어의 방식이며, 여전히 가치는 있습니다:
하지만, eval의 이런 사용은 모듈 패턴을 쓸모없게 만들지 않습니다. 그것의 가장 큰 이점은 코드를 모듈화함으로써 비슷한 변수 이름이 충돌되지 않도록 하고 여러분이나 다른 개발자들을 프로그램의 예기치 못한 오류로부터 보호해주는 것입니다. 모듈 패턴은 또한 코드를 보다 견고하게 만들어주는 new, this, prototype과 같은 키워드 없이도 OOP-스러운 것들을 가능하게 해줍니다.

모듈 패턴은 여전히 좋습니다. 단지 주요 브라우저에서 보안을 제공할 수 없을 뿐입니다.

from eval('foo=a', obj.fn); How you aren't private in Firefox
Posted by 행복한고니 트랙백 0 : 댓글 0

티스토리 툴바