• 다중열이 지원되는 계층적인 선택 UI 컴포넌트
• 텍스트 필드나 div 엘리먼트를 목록 엘리먼트에 바인드(중첩 목록 포함)
• 필요하면 메뉴는 자동으로 열분리
• 메뉴는 항상 화면상에 위치해 있습니다
  
• 키보드 자동완성(유효한 옵션만 허용됩니다)
• 메뉴가 열리면 그에 맞춰 잘 보이도록 페이지가 자동으로 스크롤됩니다
  

Pipes는 또 Prograph와 몹시 유사하게 보입니다(데이터 플로우 프로그래밍 회사이고 1992~1995년까지 제가 일했었습니다).

초기의 빌더는 [다른 프레임웍]을 이용해 작성했었는데, 이것이 둔하다는 것을 알게되었습니다. 문자 그대로 일주일내내 날짜 선택기를 색상 선택기로 바꾸는데 허비하고 나서야, 포기하고 말았습니다. 제 친구가 jQuery를 권했고 깔끔하고 빠른 모습에, JavaScript에서 HTML을 분리하는 방법의 아름다움에 반해버렸습니다. 그래서 빌더를 바로 2주만에 jQuery로 재작성했습니다. 그 직후 Opus Capital로부터 투자를 받고, 사람들을 고용하려고 했을 때, 우리 개발자들 4명중 3명은 jQuery 메일링 리스트에서 찾았습니다. 그런 식으로 진행되는게 꽤 재미있죠; 프로그램이 끝내주는 새 라이브러리로 작동했기때문에 완전한 방법을 찾는 것을 끝냈습니다.

우리가 가지고 온 것은 우리가 발표한 메소드의 95%를 제거하고 플러그인 당 하나의 오버로드된 메소드를 유지한 API입니다. 예를 들어보죠:

• $("div").draggable()은 draggable을 하나 만듭니다.
• $("div").draggable("destory")는 그것을 파괴합니다.
• $("div").draggable("method")는 플러그인의 다른 메소드를 호출합니다.
  

새로운 API는 또한 모든 콜백이 유사하게 동작하도록 했으며, 각 플러그인에 기본 옵션을 드러냈고, remove()를 사용해 플러그인을 영리하게 지웁니다. 또한 바로 플러그인 옵션을 업데이트하게 했으며, UI가 하나의 수트인 것처럼 느껴지도록 작은 보다 작은 업데이트 사항을 추가했습니다.

이렇게 하기 위해, jquery.dimensions.js, ui.mouse.js, *.ext.js 에 대한 의존성을 없애고, ui.core.js(유용한 도우미가 많이 포함되어 있습니다)를 도입했으며, 새 UI 플러그인 작성을 놀랍도록 단순하게 해주는 jQuery UI 위젯 팩토리를 작성했습니다.

훌륭한 점 중 하나는 모든 기능을 갖춘 UI 솔루션이 제공해야할 것에 대해 완전히 다른 관점을 제공한다는 것입니다. jQuery UI v1.0에서는 UI 컨트롤의 멋진 수트는 제공했었지만, 사용자들은 script.aculo.us나 jQuery UI의 이전 형태인 Interface와 같은 라이브러리들이 제공해주는 단일 효과를 필요로 했습니다. 안타깝게도, Interface는 더 이상 업데이트되지 않고, 효과에서 허점을 남기고 말았습니다; 그래서 "Enchant"라 불리는 새로운 프로젝트가 탄생했습니다. 원래는 jQuery와 jQuery UI의 보완적인 성격으로 계획된 라이브러리였으나, Enchant를 jQuery UI와 통합해 사용자들이 하나의 솔루션으로부터 진보된 효과와 UI 컨트롤에 접근할 수 있도록 하는 것이 좋겠다 싶었습니다.

Enchant가 jQuery UI의 일부가 되었음을 말할 수 있어 자랑스럽게 생각합니다. jQuery 사용자들은 이제 그들의 효과와 UI에 대한 요구를 충족시킬 통합 솔루션을 가지게 되었습니다. jQuery UI 효과는 독립적으로 사용하거나 UI와 함께 사용하는 것이 가능하며 진보된 easing과 클래스 트랜지션(모핑), 색상 애니메이션의 도입을 위해 jQuery core를 확장하는 분리된 core를 가지고 있습니다. 모든 효과는 메인 API와 긴밀하게 통합되어있으며, 독립적으로 ( $(..).effect() ) 사용하거나 여러분이 이미 알고 있는 jQuery 메소드( hide()/show() ) 안에서 직접 사용할 수도 있습니다.

전체적으로, 우리는 이미 여러분의 프로젝트에서 사용할 수 있는 15개 이상의 효과를 가지게 되었습니다. script.aculo.us 에 의해 제공되는 것들(blind,bounce,drop,fold,slide …) 뿐만 아니라 jQuery UI를 훌룡한 라이브러리로 만들어주며 여러분의 응용프로그램을 매혹적으로 만들어주는 새로운 효과(transfer, explode. clip, scale)까지 포함해서 말이죠.

최근 블로그 글에서 약속했든 완벽한 문서와 직접 확인할 수 있는 데모 페이지도 함께 제공됩니다.

• 사용자가 스크롤을 내려 끝에 도달하면 함수가 호출됩니다.
• 이 함수는 datagrid의 마지막 DIV ID를 가져옵니다.
• 이 DIV ID를 포함해 쿼리를 보냅니다.
• 결과가 돌아오면 datagrid의 마지막에 그들을 추가합니다.
  

• 이벤트 핸들링: 103%
• CSS 셀렉터: 13%
• .offset: 21%
• .css: 25%

Panic이 정말로 이 효과를 발명한 것은 아닐지라도, Coda의 슬라이딩 패널은 이 효과를 구현한 멋진 결과물입니다. 이 글은 이 효과를 만들기 위해 필요한 부분과 보다 좋게 만드는 법에 대해 짚어보겠습니다.

• "과거 30일간", "올해 오늘까지"와 같이 미리 설정된 날짜범위 선택가능
• "이후 모든 날", "이전 모든 날" 링크로 극단적인 큰 범위를 간단하게 선택 가능
• 동작에 필요한 최소한의 달력만큼만 표시("이후 모든 날"과 같은 곳에선 하나만, 다른 경우엔 두 개를 표시)
• 겸손한 JavaScript 사용
  

• Alex Russell of Dojo
• Bruce Johnson of GWT
• Sam Stephenson of Prototype

WriteMaps에서의 인쇄는 제가 좋아하는 것보다 어려웠습니다. 몇몇 브라우저는 큰 사이트맵을 유용하게도 여러장의 페이지에 나누어서 인쇄할 수 있었습니다만, 다른 브라우저들은 지도의 좌상단으로부터 일정한 위치까지만 잘라서 인쇄했습니다. 주요 브라우저들이 후자와 같기 때문에, 저는 인쇄 컨트롤을 개선해달라는 요청 메시지를 수없이 받았고, 좋은 해결책을 찾기 위해 열심히 작업했습니다.

사이트맵을 드래그하거나 축소확대해서 사이트맵의 다른 부분들을 인쇄 영역으로 옮길 수 있기 때문에, 이 도구는 큰 사이트맵을 인쇄할 때 특히 유용합니다. 이 도구를 이용하면 맵을 여러장으로 나누어 인쇄해서 한 장으로 만들 수 있습니다. 인쇄 미리보기는 이렇게 보입니다:

Coyier씨의 기술에서 드는 걱정은 JavaScript에 대한 의존성과 JavaScript에 의해서만 스포일러가 가려진다는 것이었습니다. 한창 뜨고 있는 RSS와 모바일에서 많은 사람들이 JavaScript 가 지원되지 않는 브라우저에서 글을 읽습니다. 이 사람들도 스포일러로부터 지켜줘야하지 않을까요? 저는 원래의 글에 이런 내용을 댓글로 썼는데, 시험적으로 스스로 코드를 작성해야겠다고 생각했습니다.

첫번째 글에서는 다음과 같이 테스트를 진행했습니다:

테스트 결과, 삽입 메소드는 개선되어야 할 필요가 있지만 Prototype이 jQuery보다 빠른 것 같다. Prototype 보다 jQuery 같은 문법을 좋아하기는 하지만, 성능은 코드 몇 줄 절약하는 것보다 더 중요하다. 물론 내가 만든 테스트가 이 라이브러리들이 실제 응용프로그램에서 어떻게 동작하는지를 보여줄 수는 없다. 그것은 이 글 다음에 쓸 작업이다. 결과에도 불구하고 나는 jQuery가 매우 흥미롭다는 것은 인정한다. 내 일반적인 느낌은 이 라이브러리가 Prototype보다 조금 더 성숙한 것 같다는 것이다.

두번째 글에서, Piotr씨는 Firebug 프로파일러를 이용하는 실행 테스트 대신 스스로 만든 JavaScript 기반 테스트 환경을 사용했습니다. 덕분에 테스트 수트가 여러 브라우저에서 동작하게 되었습니다:

Prototype은 15가지 항목에서 jQuery 보다 최소 2배 정도 빨랐고, jQuery는 8가지 항목에서 Prototype 보다 빨랐다. 어떤 라이브러리를 선택해야할까? 내 경우라면, Prototype인데, jQuery와 같은 기능을 제공해주면서도 빠르기 때문이다. jQuery는 아마도 이쁜 UI 효과가 필요한 프로젝트에 어울릴 것 같지만 그냥 내 생각일 뿐이다. 틀렸으면 바로 잡아주기 바란다...

IE6의 투명 PNG 지원 미흡은 충격과 공포입니다만, Microsoft는 같은 문제에 대해 자기들만의 수정방안을 내놓았습니다: CSS 스펙의 비표준 확장인 CSS behavior 입니다. PNG 이미지에 특별한 behavior를 적용함으로써 IE6 에서도 투명 PNG의 알파 채널을 정상적으로 표시할 수 있게 됩니다.

이미지 하나하나에 CSS behavior를 코딩하는 것은 지겹습니다. 다행히, Angus Turnbull 이라는 개발자가 IE PNG Fix 라는 전역에 behavior 적용이 가능한 오픈소스 스크립트를 릴리스했습니다. 현재 버전은 v1.0 RC4 이지만 v1.0 RC5도 프리뷰용으로 제공하고 있습니다.

IE PNG Fix 스크립트가 PNG 투명 이슈를 주로 다루지만, 그것으로 해결할 수 없는 문제가 하나 남아있습니다:

그러나 Turnbull의 스크립트는 문제가 한가지 약점이 있습니다: top left 가 아닌 다른 방식으로 background-position이 설정된 PNG 배경 이미지는 다룰 수 없다는 것입니다. 알파채널의 투명도를 해당 이미지와 같이 복원하지만, top left를 재설정해버려서, 투명이 있어야 할 자리에 보기 싫은 회색이 있는 것보다 더 나쁜 디자인으로 만들 수도 있습니다.

Brian 씨는 jQuery 를 이용해서 그 문제를 해결했습니다.

코드를 포함한 더 자세한 해결책을 보시려면 아래 링크의 글을 참고하세요:

Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (part 1 of 2)

Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (part 2 of 2)