Rev. 2.73

John-David Dalton씨는 오래 전부터 PrototypeScriptaculous를 압축하여 페이지 로딩속도를 향상시키는 방법을 소개하고 다양한 형태로 압축된 파일들을 구글 그룹스를 통해 배포하고 있습니다. 그리고 지난 20일에는 Prototype 1.6과 Scriptaculous 1.8버전이 추가된 업데이트(protopacked_v2.17)를 공개했습니다. prototype.js(1.6) 파일용량은 121kb입니다. 이 것을 압축하여 46.1kb로 줄이고 다시금 Gzip으로 압축 전송하면 고작 20.6kb입니다. 자바스크립트의 용량을 실시간으로 줄이는 Minify를 사용했을 때 90.5kb로 줄어드는 것에 비하면 상당량 줄어든 것임을 알 수 있습니다.(Minify된 파일을 Gzip으로 압축 전송하면 22.6kb입니다.) 12월 20일짜 Packed버전에는 "Protoculous"라는 이름을 가진 새로운 형태의 압축파일이 있으며, 이 것은 Prototype과 Scriptaculous가 합쳐진 것이라고 합니다.
.

<!-- Good: -->
<script type="text/javascript" src="prototype.js"></script>

<!-- Good: -->
<script type="text/javascript" src="gz.php?src=prototype"></script>

<!-- Good: -->
<script type="text/javascript" src="protoculous.js?load=addon"></script>

<!-- Bad: -->
<script type="text/javascript" src="prototype.gz"></script>

참고로, 자바스크립트 파일을 압축하는 도구로는 Dojo ShrinkSafeDean Edwards씨의 Packer가 사용되었습니다.

Comments

js3d.gif

Joonas Lehtinen씨는 플래시나 SVG, Canvas를 사용하지 않고 생짜 자바스크립트만으로 3D스타일 애니메이션을 만들었습니다. 3D로 사용할 이미지를 너비 1픽셀씩 순차적으로 잘라내고 384개 이미지 태그를 HTML에 마크업한 후, 몇몇 수학 계산식이 사용 된 아래와 같은 함수를 지속적으로 호출하여 좌측 그림처럼 나타나는 회전목마 애니메이션을 태스트 했습니다. CPU 자원을 엄청나게 차지하네요. 정말 이렇게까지 해야하나요?

// Draw a frame
function draw(x) {
	var prevx=0;
	for (i=0;i<384;i++) {
		var rad = i*3.14/384;
		var nextx = Math.round((1-Math.cos(rad))*180);
		var h=Math.round(40+50*Math.sin(rad));
		var s = document.getElementById("slice-"+((i+x*2)%384));
		s.height=h;
		var w = Math.round(nextx-prevx);
		if (w==0) {
			s.style.display="none";
		} else {		
			s.style.display="block";
			s.width= w;
			s.style.top=""+(50-Math.round(h/1.5))+"px";
			s.style.left=""+(prevx)+"px";
		}
		prevx=nextx;
	}
}

// Animate the images
var frame=0;
function animate() {
	draw(frame++);
	setTimeout("animate()",1);
}

// Initialize the image slices
for (i=0;i<384;i++) {
	var s = document.getElementById("slice-"+i);
	s.style.position="absolute";
	s.style.display="none";
}

animate();

덧, 아이쿠, John Dyer씨 또한 픽셀단위 div컬럼을 사용하여 3D 파노라마까지 구현하셨네요. Prototype기반으로 클래스화 된 코드를 작성하여 손쉽게 인스턴스를 생성하는 구조입니다.(다행히도 픽셀 단위로 이미지를 클리핑하지는 않았군요.) 보다 빠른 브라우저의 인터프리터 및 그래픽 처리능력이 절실합니다.

var pano = new JsPano('Courtyard',1240,300,350,300,5);

Comments

buddy.gif

AjaxIM은 누구나 웹상에 설치해서 사용할 수 있는 Ajax기반 인스턴트 메신저(IM)입니다. PrototypeScriptaculous, Prototype Window, SoundManager2 등의 자바스크립트 라이브러리가 사용되고 있으며, 백-엔드 플랫폼은 PHP로 작성되었습니다. 친구 목록을 그룹으로 관리할 수 있는 목록창과 이모티콘 삽입, 텍스트 스타일을 커스토마이즈하여 대화할 수 있는 대화창으로 구성되어 있습니다. 다국어 설정, 테마 변경, 사용자 차단, 관리자 패널 등의 기능을 제공합니다. 실험을 위해 저도 설치해 보았는데요. im.firejune.com에서 테스트해 볼 수 있으며, 저와 대화 하시려면 'firejune'을 초대하시면 됩니다. 어딘가에 응용할 곳이 있을 듯 한데요.

Comments