'Ajaxian'에 해당되는 글 6건

  1. 2007.04.27 Ajaxian 2007-04-27 (2)
  2. 2007.04.24 Ajaxian 2007-04-24 (5)
  3. 2007.04.20 Ajaxian 2007-04-20 (4)
  4. 2007.04.18 Ajaxian 2007-04-18 (4)
  5. 2007.04.16 Ajaxian 2007-04-16

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가 어떤 컴포넌트 인지 아실겁니다. 실시간 공지, 인기글 등을 효과적으로 보여줄 수 있죠.

사용자 삽입 이미지

신고

1. Dojo Offline Toolkit 출시

BSD 라이센스의 오픈소스 자바스크립트 라이브러리. 300k 수준의 작은 자바스크립트 라이브러리로 구성된 클라이언트 런타임으로 설치시 케싱을 이용해 효과적이고 빠른 UI.
업무시스템을 웹으로 구축하는 경우 이처럼 런타임을 미리 설치하도록 하면 효과적일 것이라고 생각함. 개발자를 위한 SDK사용자를 위한 Runtime을 각각 제공하며, 사용자 Runtime은 installer로 설치하는 방식

사용자 삽입 이미지

2. Rico 2.0 출시

RIA용 자바스크립트라는 타이틀을 가진 Rico의 새버전 출시.

사용자 삽입 이미지

데모페이지에서 볼 수 있듯이 Drag&Drop이나 풀다운 메뉴와, 각종 에니메메이션 효과, 아코디언 등이 강점. LiveGrid에서 타이틀 밑에 바로 AJAX 스타일의 검색 필드를 준 형태의 UI는 매우 특이함

사용자 삽입 이미지

3. AutoSuggestMenu 1.1

네이봉 검색창의 서제스트 기능을 갖춘 .Net용 컴포넌트(Atlas)


4.
S5 1.3 aka 출시

S5 - Simple Standards-based Slide Show System .. 이름 참. XHTML, CSS, JavaScript로 슬라이드쇼를 만들어줌. 데모페이지를 보면 알기 쉬운데 옛날에 xWiki에도 들어가 있던 위키페이지로 프리젠테이션 하기와 같은 기능을 만들어줌. 브라우저 창의 크기변화에 따라 글자크기 등이 자동조정되는 기능도 있고.

사용자 삽입 이미지


5.
Support Center

쓸만한 소프트웨어가 나왔음 $199, 20만원 정도면 무제한 사용자가 쓸 수 있는 고객지원용 소프트웨어를 구매, 구축가능. 한글 지역화는 되어 있지 않으나, 국제화를 지원하는 구조라 메시지 파일 몇개 수정하면 쉽게 한국어 버전으로 만들 수 있을 듯. 실험해볼 수 있는 개인 사용자용은 무료. (2.24MB크기) 컨플루언스와 병행해서 개발팀 지원용 내부 소프트웨어로 채택하는 것도 나쁘지 않을 듯.

사용자 삽입 이미지

6. 자바스크립트로 즐기는 Arkanoid 게임

정말 부드럽게 에니메이션이 동작함. 자바스크립트로 만든거라고 믿어지지 않을 정도.
홈페이지에 방문자를 위한 벽돌깨기 게임 서비스? 오랜만에 해보는 추억의 게임. 자석 기능이 짱이쥐.

사용자 삽입 이미지


7.
Flexjson

JSON을 처리하기 위한 자바언어용 라이브러리로 DSL 방식을 채택했다고 주장함. 감히 특정 도메인 처리를 위한 언어 수준이라고 주장할만큼 의도가 잘 드러나도록 API를 신경써서 설계했음.

예) return new JSONSerializer().include("hobbies", "favoriteMovies").serialize(person);


8.
Specifications 라이브러리

TDD에서 발전한 용어로 BDD(Behavior Driven Development)란 말이 있음. 루비에 보면 이런 BDD를 지원하는 Rspec이라는 Benavior Definition Framework이 제공되는데, Specifications는 Rspec의 개념을 자바스크립트에서 지원할 수 있도록 만든 프레임워크임. 그러니까 TDD, BDD를 위한 자바스크립트 라이브러리. 0.1 버전이지만 꽤 잘 만들었음

Stack.Specification = new Specification({
  "A stack should": {
    setup: function() {
      this.stack = new Stack();
      this.stack.push('a').push('b').push('c');
    },
    'add to the top using push.': {
      run: function() { this.stack.push('d') },
      assert: function() { return this.stack.peek()=='d' }
    },
    'return the top using peek.': {
      run: function() {},
      assert: function() { return this.stack.peek()=='c' }
    }
    // etc.
  }
});

Event.observe( window, 'load', function() {
  Cruiser.Specification.validate().show();
});

신고
TAG Ajaxian, dojo, s5
1. Canvas Corner 1.0

Christian Effenberger란 사람이 만든 스크립트로 이미지나 특정 영역을의 테두리를 꾸밀 수 있는 기능이다. 6.4k의 크기와 class만 지정하면 되는 쉬운 사용법. IE7에서는 보여지지 않음.

사용자 삽입 이미지

2. S60: More Mobile Ajax

노키아 휴대폰에서 동작하는 최신 S60 브라우저의 다양한 RIA 지원이 화제. 노키아의 오픈소스 프로젝트에서 제공하는 WTK를 이용하면  에뮬레이터로 동작 테스트 가능. 심비안 C++, J2ME, Flash Lite 등은 물론 Perl/Phthon 등으로도 개발 가능. 모바일의 불편함을 해소할 수 있는 핵심 기능들을 선별해 추가하고 있으며, 최근에 추가된 S60 브라우저의 3가지 기능은 나중에 오프라인 웹 브라우저에서 홈페이지를 저장하는 Save for Later, Flash Lite 2로 제작된 컨텐츠 지원, 주소가 아닌 Favicon - 즐겨찾기 아이콘으로 북마크 하는 기능임.

흠. 휴대폰용 웹 브라우저가 이렇게 까지 발전했다면.. 쓸만함.

사용자 삽입 이미지


3. 자바스크립트로 단축키 다루기

웹이 플랫폼화 되면서 고급 사용자를 위한 단축키 제공은 필수 기능이 되어가는 듯. 쉽게 단축키 처리를 할 수 있는 shorcut.js가 BSD 라이센스로 공개됨.


사용자 삽입 이미지


4. 구글에서 AJAX Feed API를 새롭게 공개

Atom이나 RSS 등의 Feed를 처리하는 자바스크립트 라이브러리. JSON 방식과 XML 방식, 혼합 방식의 데이터를 모두 지원. 오픈 API나 매쉬업은 그다지 관심 없지만 이렇게 자바스크립트로 관련 기능이 제공된다면 땡큐 베리 감사지. 관련 메뉴얼을 읽어보는 것도 좋을 듯.



신고
1. GWT-Jsonizer: JSON/JavaBeans translator

구글코드에 JSON과 자바빈 사이의 손쉬운 변환을 위한 Jsonizer라는 프로젝트가 공개되었다. 자바빈의 정보를 알려주고 parse 메소드에 JSON 정보를 넘겨주는 식이다. 다음 프로젝트에서는 toString() 처럼 Jsonable이라는 인터페이스를 통해 toJson()을 구현해서 변환처리 하는 코드를  짜게 될지도.. 간단한 유틸이지만 유용하게 써먹을 수 있을 듯.
  1. interface PersonJsonizer extends Jsonizer{}
  2.  
  3. // A JSON String with Person properties
  4. String json = '{'name':'Andres','age':28}';
  5.  
  6. // Create the Person Jsonizer
  7. PersonJsonizer jsonizer = (PersonJsonizer)GWT.create(PersonJsonizer.class);
  8. try{
  9.   // Translate the JSON String to a Person bean
  10.   Person p = (Person)JsonizerParser.parse(jsonizer, json);
  11. }catch(JsonizerException e){
      Window.alert('JSON Translation Error!');
    }
그러고 보니 요즘 소스포지 외에도 구글코드 같은 곳에서의 오픈소스 활동이 늘어난 것 같다.

2. Ext 1.0 릴리즈
Ext 1.0 릴리즈가 다시 한번 Ajaxian에 올라왔다. 이전부터 Ext의 툴바와 메뉴는 뽀대나기로 유명했다. 이번에 다시 소개된 것은 자체 확장방법의 제공 때문이다.

사용자 삽입 이미지
3. Sylvester: Vector and Matrix Math for JavaScript

벡터와 매트릭스 연산을 위한 스크립트 라이브러리가 공개되었다. 이건 관심 밖이라 스킵.




신고
TAG Ajaxian, Ext, GWT
1. 스크립트 없는 날(Scriptless Day) :
사용자 삽입 이미지
Naked CSS day에 이어, Scriptless Day까지 등장. 자바스크립트의 중요성을 알리기 위한 취지라고는 하는데.. 저 로고 붙은 사이트 들에는 7월 7일 방문하면 심난할 것 같군.

2. Yummy JSON Cookies

prototype 기반으로 JSON 정보를 쿠기에 담아 쓰도록 함. 간혹 소스를 보다보면 CookieJar 란 녀석이 보이던데 이거였군.


3. 그리스 신화와 관련한 가십거리(RIA와 그리스신화)
Ajax는 그리스 신화에서 신의 도움을 받지 못한 일리아드 지방의 영웅이라, MS에서 이러한 인간을 돕는 프로메테우스와 같은 티탄족의 아틀라스(Atlas)를 Ajax 플랫폼의 이름으로 정한게 아니겠느냐고 함. Adobe에서 음악과 시를 관장하는 태양신 아폴로(Apollo)를 코드명으로 정한 것도 같은 맥락.

4. Advancing JavaScript with Libraries
이번 정리 중 가장 쓸만한 기사. utrend님의 블로그에 "Web 3.0:웹사이트에서 웹서비스로"란 글이 있는데, 표준화된 URL이 API를 대신할 수 있다는 내용이 소개됨. 그러고 보니 Ajaxian도 URL에 의미를 부여하고 있음. 여기서 소개하는 라이브러리는 단순 API 묶음이 아니라 API 위의 추상계층을 뜻함. 뻔한 말들이지만, Framework of Frameworks의 개념이 자바스크립트에도 똑같이 적용됨을 확인. 괜찮은 것들을 그져 가져다 쓰는 것으로는 충분하지 않음.

DOM API를 예를 들어 "Libraries break down issues into meta-problems" 라는 주제에 대한 설명 과정이 인상적.  결론만 옮겨둠.
* Libraries build new patterns on top of existing APIs
* New library patterns advance development in meaningful considerable ways
기타 : 새로 배운 용어 : 웹 스크래핑 (Web scraping) : OpenAPI로 제공되는 정보를 가공하는 게 아니라, 기존 컨텐츠를 파싱해서 원하는 정보를 꺼내는 것. 옛날부터 흔히 쓰던 기법인데 Ajax 마냥 이런 근사해 보이는 이름이 붙었군.. utrend 님은 Dapper, Teqlo, Yahoo! Pipes를 차세대 스크래핑 기술로 분류해 두었음. (참고 : "Web 3.0:웹사이트에서 웹서비스로")

덧붙임글)
desperado님 블로그에서 WPF/E와 관련한 준서아빠가 생각하는 행복한 UX 이야기 블로그 발견

신고
TAG Ajaxian
1 2 

글 보관함

카운터

Total : 249,260 / Today : 0 / Yesterday : 14
get rsstistory!