'Prototype'에 해당되는 글 3건

  1. 2007.04.27 Ajaxian 2007-04-27 (2)
  2. 2007.04.17 F함수의 radio 값 선택 불편함을 RF 함수로 날리기 (2)
  3. 2007.04.12 Ajaxian 2007-04-12 (3)

1. Image Concatenation을 통한 빠른 페이지 로딩 팁


원문은 "Faster Page Loads With Image Concatenation". 많이 알려져 있긴 하지만 다양한 이미지로 구성된 웹 페이지에서 페이지 로딩을 빠르게 해줄 수 있는 좋은 팁입니다.

원리는 여러 개의 작은 그림을 연결해서 하나의 이미지로 만든 다음, 그것을 백그라운드 이미지로 깔고 CSS를 이용해서 특정 이미지 영역을 보여주는 것입니다. 링크의 "An Example" 부분을 보면 쉽게 이해할 수 있을 듯.

사용자 삽입 이미지

사용자 삽입 이미지


2. Adobe Flex를 모질라 라이센스로 공개


와우, RIA 구축을 위한 선두주자 중 하나였던 Flex가 오픈소스화 된다는 소식이네요. Flex2SDK에는 이미 Flex 프레임워크의 소스 코드가 포함되어 있습니다. 놀라운 변화네요.


3. Prototype 1.5.1 RC3 릴리즈

- Ajax.Requests now supports per-request onCreate callbacks.
- JSON strings are automatically stripped of their security delimiters (if present) before eval. 
- all toJSON methods now generate YAML-loadable JSON.
- Event.element now returns an extended element.
- Linefeed normalisation is now prevented in IE on String#escapeHTML and String#unescapeHTML for consistency with other browsers.
- Added a new Element.childElements method
- Added a new Element.firstDescendant method

ChangeLog 자세히보기


4. 당신이 사용해야 하는 7가지 자바스크립트 기술


Dustin Diaz라는 분이 디지털 웹 매거진에서 작성한 기사
입니다.  7가지의 유용한 팁을 담고 있는데요, 마지막 7번째 팁은 "Reinvent the wheel" 이네요. 마무리가 마음에 듭니다. 이 분이 쓴 팁들 중에서 Speed Up Object Detection 이라는 팁도 멋집니다.

function addEvent(element, type, handler) {
 if (element.addEventListener) {
  element.addEventListener(type, handler, false);
 } else if (element.attachEvent) {
  element.attachEvent("on" + type, handler);
 }
};

위와 같은 코드를 많이 작성하게 되는데, 성능 향상을 위해 아래와 같이 바꾸자는 거죠.

var addEvent;
if (document.addEventListener) {
 addEvent = function(element, type, handler) {
  element.addEventListener(type, handler, false);
 };
} else if (document.attachEvent) {
 addEvent = function(element, type, handler) {
  element.attachEvent("on" + type, handler);
 };
} else {
 addEvent = new Function; // not supported
}


5. Satama의 포트폴리오 사이트


Satama 사이트
를 방문해보시면 아실텐데 처음 보면 플래시로 작성된 거라고 착각할 수 있습니다.
하지만 단순한 AJAX와 YUI 만으로 구축된 것입니다. 대단하네요.

사용자 삽입 이미지


6. A Javascript TickerTape Component


데모 사이트를 보면 TickerTape가 어떤 컴포넌트 인지 아실겁니다. 실시간 공지, 인기글 등을 효과적으로 보여줄 수 있죠.

사용자 삽입 이미지

신고
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
Prototype은 정말 굉장한 라이브러리다. 하지만 prototype을 사용해도 radio group에서 선택된 값을 알아내기는 여간 불편하지 않다. select/option의 선택값을 멋지게 찾아내는 F 함수가 아쉽게도 radio는 처리하지 못한다. 우아한 해결책을 찾다가 좋은 글을 발견.

"Using Prototype Javascript to get the value of a radio group"
http://xavisys.com/blog/2007/03/01/using-prototype-javascript-to-get-the-value-of-a-radio-group/


아래와 같이 쓰는 경우도 있지만,

var typeValue = Form.getInputs(’myform’,'radio’,'type’).find(function(radio) { return radio.checked; }).value;

xavisys.com에서 발견한 RF 함수가 깔끔하다. (흠. tistory에서 쓸만한 코드 플러그인은 언제쯤..)

/**
 * Returns the value of the selected radio button in the radio group
 * 
 * @param {radio Object} or {radio id} el
 * OR
 * @param {form Object} or {form id} el
 * @param {radio group name} radioGroup
 */
function $RF(el, radioGroup) {
	if($(el).type == 'radio') {
		var el = $(el).form;
		var radioGroup = $(el).name;
	} else if ($(el).tagName.toLowerCase() != 'form') {
		return false;
	}
	return $F($(el).getInputs('radio', radioGroup).find(
		function(re) {return re.checked;}
	));
}

이걸 찾다가 발견한 좋은 기사 2개도 같이 정리. 서버 측 validation도 유용하지만, 클라이언트 측에서 검증해야 할 것들이 분명히 있다. 스타일을 이용한 자동일괄검증 기법을 소개하는 2번째 기사는 매우 유용할 듯 싶다.

- Painless JavaScript Using Prototype By Dan Webb
http://www.sitepoint.com/article/painless-javascript-prototype
- Really easy field validation
http://tetlaw.id.au/view/javascript/really-easy-field-validation

신고
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
1. Emprise JavaScript Charts
100% 자바스크립트로 구성된 괜찮은 차트 솔루션이 소개되었다. 인터렉티브한 대화형 동작이 지원되고, AJAX 기반으로 데이터를 가져오는 점, 구글맵과 같은 실시간 줌이 가능하다는 것이 흥미롭다.

Prototype Graphic Framework에 대한 소개도 올라와있던데..

사용자 삽입 이미지

2, HTML5 Proposal
오페라, 모질라, 애들 등이 공동으로 W3C에 HTML 5 Proposal을 제출

3. DWR 2.0 RC 4 출시
DWR 버전이 조금 올라갔다. 스프링과의 연동으로 재미를 봐서 그런가 구글쥬스에 대한 재빠른 지원을 홍보하고 있다.

자바스크립트 보안과 관련해서 Fortify의 보고서를 인용 다양한 AJAX 프레임워크들 중에서 오직 DWR만이 JavaScript Hijacking을 막도록 구현되어 있다는 점을 자랑한 것도 보인다.

JavaScript Hijacking appears to be a ubiquitous problem. As part of Fortify’s work, the 12 most popular AJAX frameworks were analyzed, including frameworks from Google (NASDAQ: GOOG), Microsoft (NASDAQ: MSFT), Yahoo! (NASDAQ: YHOO) and the open source community. Fortify determined that among them, only Direct Web Remoting (DWR) 2.0 implements mechanisms for preventing JavaScript Hijacking.
신고
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
1 

글 보관함

카운터

Total : 226,975 / Today : 6 / Yesterday : 44
get rsstistory!

티스토리 툴바