현재의 웹은 어떻게 흘러가고 있을까요? 존 얼솝(John Allsopp)씨가 웹 개발 현황 2010 최신 설문조사 결과와 함께 돌아왔습니다.
이 어마한 양의 데이터는 직접 받아볼 수 있으며, 전체 보고서는 PDF로 볼 수 있습니다.

보고서에서 주목할만한 부분을 간추려봤습니다.
  • 소수의 응답자만이 인터넷 익스플로러를 일상적으로 사용하지만, 사이트를 테스트할 때는 IE8을 가장 많이 사용했습니다.
  •  구글 크롬이 극적으로 성장해 개발자들이 사용하는 브라우저 3위로 자리잡았습니다. 20%인 사파리를 17%로 바짝 추격하고 있습니다.
  • 파이어폭스가 여전히 1위 자리를 지키고 있지만, 응답자들의 브라우저는 3.5와 3.6으로 나누어졌습니다.
  • 파이어폭스 3.6은 설문조사를 실시하기 1주일 전에 출시되었습니다.
  • 절반 이상의 응답자들이 맥 OS X를 주 운영체제로 사용했습니다.
  • 응답자들의 1/3 정도(16%)가 모바일 사파리를 사용하는 반면, 안드로이드는 4%에 그쳤습니다.
  • jQuery의 독주는 더 강화되었습니다. 80%에 가까운 응답자들이 라이브러리로 jQuery를 사용했습니다. 작년에는 63% 였습니다.
  • Cappuccino나 SproutCore와 같은 데스크톱스러운 응용프로그램 프레임워크들이 개발자들에게 조금씩 퍼지고 있는 것처럼 보입니다. 데스크톱스러운 응용프로그램의 시대가 아직 오지 않은 것일 수도 있고, 개발자들이 데스크톱 흉내를 낸 웹 응용프로그램을 만들고 싶어하지 않는 것일 수도 있습니다.
웹 기술 쪽에서의 화두는 역시 HTML5, CSS3, 웹폰트 등이었습니다.
  • 다수의 응답자들(45%)이 CSS3나 실험적인 CSS를 사용했습니다. 사용하지 않는 비율은 44%입니다. 이는 작년에 비해 극적으로 증가한 수치입니다(작년에는 22%가 CSS3 사용, 70%가 사용하지 않음).
  • 바로 전 설문조사에서는 4%의 응답자만이 @font-face를 사용한 웹 폰트를 적용했었는데, 이번 조사에서는 23%로 증가했습니다.
  • 응답자의 30%가 HTML5를 사용하는데, 바로 전 설문조사에서는 10%이하였습니다.
재밌는 결과네요. 데이터에서 또 다른 트렌드를 알 수 있나요?

from The State of Web Development 2010 - Web Directions
Posted by 행복한고니 트랙백 1 : 댓글 2

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

from iPhone-like password field; quickshow character
Posted by 행복한고니 트랙백 0 : 댓글 0
Giva Labs의 팀은 자신들 소프트웨어 프로그램 옵션의 복잡하고 상속적인 구조를 보여줄 방법을 찾고 있었습니다. UI 컨트롤들에는 많은 옵션이 있지만, 이를 직관적으로 보여주고 키보드와 마우스로 제어가 가능한 무언가가 필요했었습니다. 쉬운일은 아니었습니다.

그래서 결국 mcDropdown이라 불리는 꽤 그럴싸한 계층적인 콤보박스를 만들게 되었습니다. mcDropdown은 이런 기능을 가지고 있습니다:
  • 다중열이 지원되는 계층적인 선택 UI 컴포넌트
  • 텍스트 필드나 div 엘리먼트를 목록 엘리먼트에 바인드(중첩 목록 포함)
  • 필요하면 메뉴는 자동으로 열분리
  • 메뉴는 항상 화면상에 위치해 있습니다
  • 키보드 자동완성(유효한 옵션만 허용됩니다)
  • 메뉴가 열리면 그에 맞춰 잘 보이도록 페이지가 자동으로 스크롤됩니다
원래는 내부에서 사용하려고 작성했지만 Giva는 Apache 라이선스로 이 jQuery 플러그인을 릴리스했습니다. 또한 문서화도 잘 해두었고, 컨트롤을 구현하는 방법을 알려주는 훌륭한 예제도 제공하고 있습니다.

from Combobox Coolness by Giva Labs
Posted by 행복한고니 트랙백 0 : 댓글 0
Filament Group의 Scott Jehl씨가 이미지 미리읽기를 위한 jQuery 플러그인을 소개해주셨습니다. 해당 스크립트는 현재 페이지의 각 스타일 시트 내의 모든 규칙에 대해 반복하며 이미지 URL이 있으면 읽도록 해서 미리 캐싱하도록 합니다.
[code:js]
jQuery.preloadCssImages = function(){
      var allImgs = [];//new array for all the image urls
      var k = 0; //iterator for adding images
      var sheets = document.styleSheets;//array of stylesheets
     
      for(var i = 0; i<sheets .length; i++){//loop through each stylesheet
              var cssPile = '';//create large string of all css rules in sheet
              var csshref = (sheets[i].href) ? sheets[i].href : 'window.location.href';
              var baseURLarr = csshref.split('/');//split href at / to make array
              baseURLarr.pop();//remove file path from baseURL array
              var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
              if(baseURL!="") baseURL+='/'; //tack on a / if needed
              if(document.styleSheets[i].cssRules){//w3
                      var thisSheetRules = document.styleSheets[i].cssRules; //w3
                      for(var j = 0; j<thisSheetRules.length; j++){
                              cssPile+= thisSheetRules[j].cssText;
                      }
              }
              else {
                      cssPile+= document.styleSheets[i].cssText;
              }
             
              //parse cssPile for image urls and load them into the DOM
              var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
              if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array
                      var arr = jQuery.makeArray(imgUrls);//create array from regex obj      
                      jQuery(arr).each(function(){
                              allImgs[k] = new Image(); //new img obj
                              allImgs[k].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this;     //set src either absolute or rel to css dir
                              k++;
                      });
              }
      }//loop
      return allImgs;
}
편하네요.

from Preloading Images with jQuery
TAG jquery
Posted by 행복한고니 트랙백 1 : 댓글 0

iWidget 공개 베타

2008.07.05 15:24 from [IT] Web Tech
iWidgets는 여러분이 위젯을 작성하고 그들을 다양하고 인기있는 위젯 API들과 플랫폼에 배치할 수 있게 합니다.
사용자 삽입 이미지
iWidget의 핵심은 "PowerPoint 스러운" 위젯 빌더입니다. Yahoo! Pipes로부터 강한 디자인 영감을 받았지만, Peter Yared(iWidgets의 CEO)씨가 말했듯:
Pipes는 또 Prograph와 몹시 유사하게 보입니다(데이터 플로우 프로그래밍 회사이고 1992~1995년까지 제가 일했었습니다).
사용자 삽입 이미지
이 사이트는 여러분이 작성한 위젯을 GoogleGadget/OpenSocial 등으로 변환합니다. 빌더는 jQuery를 이용해 작성되었으며, Pipes와 같이 <canvas>를 이용해서 연결선을 렌더링합니다. Peter씨가 이 응용프로그램과 관련한 비하인드 스토리를 들려주셨습니다:
초기의 빌더는 [다른 프레임웍]을 이용해 작성했었는데, 이것이 둔하다는 것을 알게되었습니다. 문자 그대로 일주일내내 날짜 선택기를 색상 선택기로 바꾸는데 허비하고 나서야, 포기하고 말았습니다. 제 친구가 jQuery를 권했고 깔끔하고 빠른 모습에, JavaScript에서 HTML을 분리하는 방법의 아름다움에 반해버렸습니다. 그래서 빌더를 바로 2주만에 jQuery로 재작성했습니다. 그 직후 Opus Capital로부터 투자를 받고, 사람들을 고용하려고 했을 때, 우리 개발자들 4명중 3명은 jQuery 메일링 리스트에서 찾았습니다. 그런 식으로 진행되는게 꽤 재미있죠; 프로그램이 끝내주는 새 라이브러리로 작동했기때문에 완전한 방법을 찾는 것을 끝냈습니다.
Peter씨는 전체 개발 프로세스에 대해서도 얘기해주었습니다. 그리고 앞으로 반복 테이블, 페이징, z-order 컨트롤 등 여러 컴포넌트를 제공할 것이며, iPhone 등의 다른 플랫폼도 고려하고 있다고 합니다.

from iWidgets Public Beta: Impressive Widget Builder
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

Our Signal에서 Digg, Reddit, Delicious, Hacker News를 모아 jQuery를 이용해 클라우드 시각화 페이지를 작성했습니다.

상자의 크기는 인기도를 반영했다고 합니다(클수록 인기가 있는 겁니다). 또한 색상은 인기도의 상승도를 반영했다고 하는군요. 색상이 따뜻한 계열일 수록 상승폭이 큰 것이고 반대로 차가울 수록 하락폭이 큰 것입니다.

from Our Signal: Page Cloud Visualization of Digg, Reddit, Delicious, Hacker news
Posted by 행복한고니 트랙백 0 : 댓글 0
Bear Bibeault씨와 Yehuda Katz씨가 작성하신 jQuery Selectors 레퍼런스 카드가 릴리스되어 PDF 형식으로 다운로드 받을 수 있게 되었습니다(DZone 계정 필요!).

jQuery 셀렉터는 jQuery 라이브러리의 가장 중요한 면 중 하나입니다. 이 셀렉터들은 친숙한 CSS 문법을 사용해 빠르고 확실하게 페이지 내의 어떠한 엘리먼트들이라도 쉽게 접근할 수 있도록 하며 이들을 jQuery 라이브러리 메소드에서 사용할 수 있도록 합니다. jQuery 셀렉터를 이해하는 것은 jQuery 라이브러리를 가장 효율적으로 사용하기위한 열쇠입니다.

레퍼런스 카드는 jQuery 셀렉터, 기본 CSS 셀렉터, 커스텀 jQuery 셀렉터 등과 같은 jQuery 주제들에 대해서 다루고 있습니다. 또한 매우 유용한 "Hot Tips"도 포함하고 있습니다. 예를 들면, 쿼리 조합을 작성하는 법이나 초보자들이 실수하는 부분에 대한 내용입니다.
________________
해당 사이트에 갔더니 jQuery 뿐만 아니라 다른 개발툴에 대한 레퍼런스 카드도 많은 것 같습니다. Ajax 시작하기, 디자인 패턴, Eclipse 시작하기 등이 있습니다. 물론, 다 Free Download 입니다. 계정 하나 만들어두는 것도 나쁘지 않을 것 같습니다. ^^

from jQuery Selectors Refcard Now Availiable
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지
Paul Bakaus씨와 jQuery UI 팀이 메이저 업데이트된 jQuery UI 1.5를 릴리스했습니다.

세 가지 새로운 점이 있습니다:

API Refactoring
우리가 가지고 온 것은 우리가 발표한 메소드의 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 위젯 팩토리를 작성했습니다.

Effects: Internalizing Enchant
훌륭한 점 중 하나는 모든 기능을 갖춘 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)까지 포함해서 말이죠.

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


Create your own Themes, with help
ThemeRoller는 사용자가 바로 테마를 작성하고 저장할 수 있는 응용프로그램입니다. Filament Group이 사용법에 대한 글을 블로그에 작성했습니다.

from jQuery UI 1.5 : Effects, API, and Themes
TAG jquery, UI
Posted by 행복한고니 트랙백 0 : 댓글 0
Umut Muhaddisoglu씨가 Wikia Search나 국내 사이트로는 Mixsh 등에서 볼 수 있던 무한 스크롤 패턴을 구현하셨습니다.

다른 구현물들도 많았지만, 이것은 jQuery를 사용한 제대로 된 것입니다. 이렇게 작동한다고 합니다:
  • 사용자가 스크롤을 내려 끝에 도달하면 함수가 호출됩니다.
  • 이 함수는 datagrid의 마지막 DIV ID를 가져옵니다.
  • 이 DIV ID를 포함해 쿼리를 보냅니다.
  • 결과가 돌아오면 datagrid의 마지막에 그들을 추가합니다.
데모는 Umut 씨의 DNS Pinger 서비스에서 스크롤을 다운하면 보실 수 있습니다. 데모의 일부분들입니다:

HTML 구조는 이렇습니다:
[code:js]
<div class="wrdLatest" id=9>content</div>
<div class="wrdLatest" id=8>content</div>
아래 함수는 로딩 아이콘을 보여주고, 그 후 새로운 컨텐트로 그 영역을 채웁니다:
[code:js]
function lastPostFunc()
{
    $(’div#lastPostsLoader’).html(’<img src="bigLoader.gif"/>’);
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),  
 
    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);          
        }
        $(’div#lastPostsLoader’).empty();
    });
};
스크롤 검출 부분입니다:
[code:js]
$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

from Implementing infinite scrolling with jQuery on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1
jQuery의 새버전 1.2.6 이 릴리스 되었습니다. 1.2.3에서 바로 건너뛰었네요. 가장 주목할만한 것은 성능 개선입니다(Google Spreadsheet를 통해 상세한 성능 자료를 보실 수 있습니다). 개선의 헤드라인 들입니다:
  • 이벤트 핸들링: 103%
  • CSS 셀렉터: 13%
  • .offset: 21%
  • .css: 25%
수많은 수정사항이 있지만, 가장 중요한 것은, 제 생각에는, Brandon Aaron씨의 Dimension 플러그인을 포함한 것이 아닐까 합니다. 해당 플러그인은 jQuery core에서 엘리먼트 차원, 오프셋, 포지션을 찾기 위한 크로스 브라우저 지원을 합니다.

자세한 것은 릴리스 노트를 참고하세요

from jQuery Release 1.2.6: Performance Improvements and Dimensions Plugin Added to Core on Ajaxian
TAG jquery
Posted by 행복한고니 트랙백 0 : 댓글 0
"슬라이딩 패널" 효과는 한 페이지에 카테고리 분류와 대용량 데이터 표시를 하는데 매우 유명해졌습니다. 이 효과를 구현한 결과물 중 가장 주목할만한 것 중 하나는 Panic에 의해 만들어져 그들의 Coda 웹 개발 IDE의 모든 기능과 장점을 다 보여준 것입니다. 이후로 많은 이 효과의 구현물들이 만들어졌고, 대부분은 지금 그들이 매우 유사한 스크롤 기능을 제공하기 때문에 "Coda 슬라이더"로 불려지고 있습니다.

디자이너를 위한 jQuery의 Remy Sharp씨는 jQuery를 이용해서 coda 슬라이더 효과를 만드는 방법에 대한 새로운 스크린캐스트와 자습서를 작성했습니다:
Panic이 정말로 이 효과를 발명한 것은 아닐지라도, Coda의 슬라이딩 패널은 이 효과를 구현한 멋진 결과물입니다. 이 글은 이 효과를 만들기 위해 필요한 부분과 보다 좋게 만드는 법에 대해 짚어보겠습니다.
사용자 삽입 이미지
이 자습서는 페이지의 마크업, 여러 jQuery 플러그인의 사용, 탐색 메뉴 설정, 슬라이더를 위한 이벤트 다루기 등을 거쳐 매우 상세히 주제를 다루고 있습니다. Remy 씨가 작성한 스크린 캐스트는 QuicktimeFlash 형식으로 이용가능합니다.

from Ajaxian Featured Tutorial: Coda Slider Effect on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

Don Katz씨가 Josh Bochner씨의 노고의 산물인 http://www.jigadig.com 을 알려주셨습니다. 이 사이트는 jQuery를 이용해 Ajax를 적극 사용한 경매 사이트 수집기입니다. 검색 결과페이지를 보시면, 페이지 이동을 하지 않고도 상품 상세설명을 바로 볼 수 있고, 스크롤을 내림에 따라 컨텐트가 자동으로 추가되는 것을 알 수 있습니다. 또한 쉽게 관심목록에 둘 수  있죠.

from On-line Auction Aggregator Innovates with Ajax on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
따로 설명은 필요없을 것 같습니다. jQuery를 이용해서 만든 Cubespace를 확인해보시면 되니까요.
통통 튀는 애니메이션이 꽤 귀엽습니다. ^^
Cubespace

from Cubespace : Isometric Pixel Fun on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 2
Filament Group 에서 Mark Grabanski씨가 만든 jQuery UI DatePicker 컨트롤을 수정해서 새로운 기능을 추가한 컨트롤을 작성했습니다. 이 새로운 컨트롤은 다음과 같은 기능을 포함하고 있습니다:
  • "과거 30일간", "올해 오늘까지"와 같이 미리 설정된 날짜범위 선택가능
  • "이후 모든 날", "이전 모든 날" 링크로 극단적인 큰 범위를 간단하게 선택 가능
  • 동작에 필요한 최소한의 달력만큼만 표시("이후 모든 날"과 같은 곳에선 하나만, 다른 경우엔 두 개를 표시)
  • 겸손한 JavaScript 사용
데모는 이곳에서 실행해볼 수 있습니다.
사용자 삽입 이미지
from A new spin on the datepicker control on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
이번 인터뷰는 jQuery의 John Resig 씨입니다. 다른 분들은 그냥 인터뷰였던데 반해 프로젝터를 사용하셨네요. jQuery Core의 가까운 미래(1.2.4)와 조금 더 먼 미래(1.3) 그리고 그 이후에 대한 얘기로 시작해서, jQuery UI 1.5로 UI 부분을 개발할 것이라고 말했습니다.

What's Next in jQuery and JavaScript? from John Resig on Vimeo.

Previously on Ajax Pioneer Week... from Ajax Pioneer Week: John Resig of jQuery on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Simon Willison씨가 이번엔 XTech에서 jQuery와 함께하는 겸손한 JavaScript라는 또다른 이야기를 했습니다.

프리젠테이션에서 그는 왜 당신이 겸손해져야 하고, jQuery를 어떻게 쓰는지, 그리고 그들을 어떻게 좋게 조합할 것인지에 대해 탐구했습니다.

전체 프리젠테이션입니다:

from Unobtrusive JavaScript with jQuery on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
지난 12월WriteMaps.com에 대해 포스팅한 적이 있습니다. Scott Jehl씨는 멋진 기능들로 사이트를 계속 업데이트해왔습니다. Scott씨는 이번에 jQuery UI최신 RC판을 사용한 매력적인 인쇄 미리보기 도구를 추가했습니다.
WriteMaps에서의 인쇄는 제가 좋아하는 것보다 어려웠습니다. 몇몇 브라우저는 큰 사이트맵을 유용하게도 여러장의 페이지에 나누어서 인쇄할 수 있었습니다만, 다른 브라우저들은 지도의 좌상단으로부터 일정한 위치까지만 잘라서 인쇄했습니다. 주요 브라우저들이 후자와 같기 때문에, 저는 인쇄 컨트롤을 개선해달라는 요청 메시지를 수없이 받았고, 좋은 해결책을 찾기 위해 열심히 작업했습니다.
Scott 씨는 WriteMap 사용자들에게 인쇄될 모양을 보여주는 커스터마이징된 인쇄 미리보기 화면을 작성했습니다. jQuery UI를 사용함으로써, 인쇄 미리보기에서 보다 나은 모양을 위해 확대 축소를 하며 사이트맵을 인쇄 영역으로 드래그할 수도 있게 되었습니다.
사이트맵을 드래그하거나 축소확대해서 사이트맵의 다른 부분들을 인쇄 영역으로 옮길 수 있기 때문에, 이 도구는 큰 사이트맵을 인쇄할 때 특히 유용합니다. 이 도구를 이용하면 맵을 여러장으로 나누어 인쇄해서 한 장으로 만들 수 있습니다. 인쇄 미리보기는 이렇게 보입니다:
WriteMaps.com의 새로운 인쇄 미리보기 도구

WriteMaps.com의 데모를 실행해볼 수도 있습니다.

from WriteMaps.com's New Print Preview Tool on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
from Spoiler Blocker When JS Isn’t Available on Ajaxian

온라인에서 돌아다니면서 가장 열받는 일 중 하나가 스포일러일 것입니다. 그래서 친절하게 "이 이하로는 스포일러가 있음"이라고 쓰기도 하지만 그렇게 되면 스포일러를 제외한 다른 부분도 아예 못 읽게 됩니다.

CSS-Tricks의 Chris Coyier 씨도 비슷한 경험을 했었나 봅니다. jQuery를 이용한 페이드인 스포일러 드러내기 방식을 만들었습니다. 사용자가 클릭해야 가려져있던 스포일러 부분이 나오는 방식입니다. Agile Ajax의 Brian Dillard씨는 이 방식을 꽤나 마음에 들어하면서 RSS리더나 모바일 브라우저에 적용할 수 있겠다라고 생각했습니다.
Coyier씨의 기술에서 드는 걱정은 JavaScript에 대한 의존성과 JavaScript에 의해서만 스포일러가 가려진다는 것이었습니다. 한창 뜨고 있는 RSS와 모바일에서 많은 사람들이 JavaScript 가 지원되지 않는 브라우저에서 글을 읽습니다. 이 사람들도 스포일러로부터 지켜줘야하지 않을까요? 저는 원래의 글에 이런 내용을 댓글로 썼는데, 시험적으로 스스로 코드를 작성해야겠다고 생각했습니다.
Brian Dillard 씨는 JS가 사용불가라도 이용가능하도록 개선한 스포일러 차단기의 본인 버전을 만들었습니다. 원리는 간단합니다. JavaScript가 사용가능할 때는 Coyier 씨처럼 사용하도록 하고 그렇지 않을 때는 상당히 먼 아래쪽에(화면에 나타나지 않을만큼) 스포일러를 두고 클릭하면 스포일러를 표시하는 앵커로 이동하는 것입니다.

데모를 직접 확인해보세요.

TAG CSS, jquery
Posted by 행복한고니 트랙백 0 : 댓글 0
Piotr Solnica 씨가 예전에 jQuery와 Prototype에 관한 두 개포스트를 썼는데, John-David Dalton 씨가 찾았네요.

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

[code:js]
$('td.first').addClass('marked'); // jQuery

$$('td.first').each(function(cell){
  cell.addClassName('marked');
});

// or
$$('td.first').invoke('addClassName', 'marked');

그리고 결론입니다:

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

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

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

from jQuery and Prototype Benchmarks on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
from Ajaxian Featured Tutorial: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery on Ajaxian

글에서는 잘 알려져있지 않다고 하는데 아마도 IE6의 PNG 지원 문제는 우리나라에서는 꽤 잘 알려진 이슈가 아닐까 합니다. 어떻게 보면 우리로서는 조금 오래된 팁들일 수 있을 것 같습니다.
______________________________
Pathfinder 웹 사이트를 새로 설계하면서, Brian Dillard 씨는 잘 알려져있지 않은 IE6 의 투명 PNG 이슈와 부딛혔고 해결하기 위해 두가지 방법을 썼습니다. 그는 IE6가 PNG를 표시하면서도 알파 채널을 지원하지 않고 투명대신 의도하지 않은 색상을 넣는 문제를 어떻게 해결했는지 쓰기로 했습니다.

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)


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