Chritian Heilmann씨가 YUI Grids와 함께 쓰는 Autogrid 라는 새로운 JavaScript 라이브러리를 작성하셨습니다. 이 기반 CSS 라이브러리는 똑똑한 리사이즈 기능을 제공합니다:
저는 YUI Grids를 아주 좋아합니다. 저는 CSS를 알고 있고, 브라우저마다 일어나는 다른 문제를 처리할 방법도 알고 있습니다. 하지만, 동시에 이런 처리들을 계속 해가면서 고치고 작성하는 일에 무척 짜증이 나기도 합니다. YUI Grids가 모든 경우의 웹 개발에 완벽히 맞지 않다해도, 그것들을 이용해 실용적인 접근을 하고 사이트를 만드는 일이 매우 좋습니다(아시다시피 저는 디자이너가 아니거든요).

YUI 기반 사이트를 만들면서 계속 가지고 있던 한가지 문제는 정확한 화면 해상도 혹은 가시영역 크기 예측에 대한 사람들의 불평이었습니다. YUI Grids는 고 해상도에서는 조금 멍청해보일 수 있는 100% 너비도 되고 800x600이나 1024x768 등의 해상도에 최적화된 것도 가능합니다. 여러분이 800 픽셀에 최적화하면, 보다 높은 해상도를 사용하는 사람들은 페이지의 길이에 대해 불평할 것입니다. 여러분이 1024에 최적화한다면, 800x600을 사용하는 사람들은 가로 스크롤을 해야하는 것에 대해 뭐라고 할것입니다. 모두다 만족시킬 수 없는거죠.

할 수 있을까요? CSS는 동적이지 않습니다 —고정된 상태를 가지고 있으며 브라우저가 여러분이 작성한 대로 제대로 보여주기만 바랄 수 밖에 없습니다(음, IE를 위한 조건절이 있긴 합니다만 기술적으로 그것들은 HTML의 영역입니다. 물론, CSS3의 미디어 퀴리도 있고 다른 것들도 있지만, 이 글의 목적은 기본적으로 IE6 지원을 위한 것입니다). 한편, JavaScript는 매우 동적이라서 그것을 사용하고 반응할 때 브라우저에서 지금 무슨 일이 일어나고 있는지 읽고 확인할 수 있습니다.

JavaScript의 이 기능을 잘 사용하면 여백의 폭을 필요에 따라 조절할 수 있는 YUI Grids 기반의 레이아웃을 만들 수 있습니다. 여러분이 해야할 것은 약간의 YUI Dom 마법과 ID와 class를 바꾸어 주는 것뿐입니다.
Christian씨는 데모 페이지와 전체 코드를 제공하고 있습니다:
[code:js]
YAHOO.example.autoGrid = function(){
  var container = YAHOO.util.Dom.get('doc') ||
                  YAHOO.util.Dom.get('doc2') ||
                  YAHOO.util.Dom.get('doc4') ||
                  YAHOO.util.Dom.get('doc3') ||
                  YAHOO.util.Dom.get('doc-custom');
  if(container){
    var sidebar = null;
    var classes = container.className;
    if(classes.match(/yui-t[1-3]|yui-left/)){
       var sidebar = 'left';
    }
    if(classes.match(/yui-t[4-6]|yui-right/)){
       var sidebar = 'right';
    }
    function switchGrid(){
      var currentWidth = YAHOO.util.Dom.getViewportWidth();
      if(currentWidth> 950){
        container.id = 'doc2';
        if(sidebar){
          container.className = sidebar === 'left' ? 'yui-t3' : 'yui-t6';
        }
      }
      if(currentWidth <950){
        container.id = 'doc';
        if(sidebar){
          container.className = sidebar === 'left' ? 'yui-t2' : 'yui-t5';
        }
      }
      if(currentWidth <760){
        container.id = 'doc3';
        if(sidebar){
          container.className = sidebar === 'left' ? 'yui-t1' : 'yui-t4';
        }
      }
      if(currentWidth <600){
        container.id = 'doc3';
        container.className = '';
      }
    };
    switchGrid();
    /*
      Throttle by Nicholas Zakas to work around MSIE's resize nasties.
      http://www.nczonline.net/blog/2007/11/30/the_throttle_function
    */
    function throttle(method, scope) {
      clearTimeout(method._tId);
        method._tId= setTimeout(function(){
        method.call(scope);
      }, 100);
    };
    YAHOO.util.Event.on(window,'resize',function(){
      throttle(YAHOO.example.autoGrid.switch,window);
    });
 
  };
  return {
    switch:switchGrid
  };
}();

from YUI Autogrid: Correctly resize the grids
TAG CSS, Yahoo!, Yui
Posted by 행복한고니 트랙백 0 : 댓글 0

YSlow, Firefox3 지원

2008.07.10 03:19 from [IT] Web Tech
YSlow가 새 버전에서 Firefox3를 지원합니다.

새 버전의 기능:
  • Firefox 3와 Firebug 1.2 베타 지원
  • 자바스크립트 최소화 개선 및 단순한 체크
  • 인라인과 외부 CSS 혹은 JS의 색을 다르게 표시
  • 컴포넌트 범례의 색상과 표시부 개선
  • 동일한 호스트이름을 가지고 포트만 다른 사이트들을 분리된 DNS lookup으로 세던 버그 수정
  • 자잘한 버그와 스타일 개선
from YSlow now has Firefox 3 support
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

Yahoo! Developer Network 에서 Yahoo! 디자인 모양 키트 1.0 을 출시했습니다. 말 그대로 여러 응용프로그램에서 Yahoo! 웹 컴포넌트들의 외양을 표현할 수 있는 모양 키트입니다. 다음과 같은 컴포넌트 모양이 포함되어있습니다:
  • Ad Units
  • Calendars
  • Carousels
  • Charts and Tables
  • UI Controls
  • Form Elements
  • Grids
  • Menus and Buttons
  • Mobile - General
  • Mobile - iPhone
  • Navigation and Pagination
  • OS Elements
  • Placeholder Text
  • Screen Resolutions
  • Tabs
  • Windows and Containers
화면 디자인할 때 유용하게 사용할 수 있을 것 같습니다. 지원하는 포맷별로 다운로드 받으시면 됩니다:
OmniGraffle,
Visio (XML),
PDF,
PNG,
SVG.

from Yahoo! Design Stencil Kit 1.0 on Ajaxian
TAG UI, Yahoo!
Posted by 행복한고니 트랙백 0 : 댓글 0
사람들이 꼽은 Yahoo! BrowserPlus에 대한 세부 사항중 하나는 그것이 Yahoo! 계열 사이트에서만 작동한다는 것이었습니다.

하지만, 이 제한을 풀고 로컬에서 동작하도록 하는 사람들이 있고, 아마도 Yahoo!는 이를 달가워하지는 않을 것 같습니다.

Yahoo!의 Skylar Woodward 씨는 해킹이 별 문제 될 것이 없다는 글을 작성하셨습니다. 그리고는 제한을 해제하는 방법에 대해서 보여주셨네요(Yahoo! 직원이 Yahoo! 제품을 해킹하는군요 -_-a).
현재, BrowserPlus 사용은 Yahoo! 계열 사이트로만 제한되어있습니다. 로컬 파일 실행에 대한 제한도 포함되어있습니다. 에러를 표현하기 위해 테스트 파일에 간단한 코드를 추가합니다.
[code:js]
else {greeting = "BrowserPlus is hiding. ("+res.verboseError+")";}
BP_EC_UNAPPROVED_DOMAIN 에러가 로컬 도메인(file://)은 허가되지 않았다고 확인시켜줍니다. 이것은 BP 설정 파일을 파헤쳐 봐야 한다는 뜻도 됩니다. 맥이라면 아래 경로에 있습니다.
/Users/[you]/Library/Application Support/Yahoo!/BrowserPlus/
WindowsXP 라면...
c:\\Documents And Settings\[you]\Local Settings\Application Data\Yahoo!\BrowserPlus\
Windows Vista 라면...
c:\Users\[you]\AppData\Local\Yahoo!\BrowserPlus\
Permissions 폴더를 열어보면 우리가 찾는 것과 비슷한 이름을 가진 파일이 있을 것입니다. 열어보면 이런 코드를 볼 수 있습니다.
[code:js]
"whitelist" : [
        "^http(s?)://(.*)\\.yahoo\\.com$",
        "^http(s?)://(.*)\\.yahoo\\.com:[0-9]+$"
    ],
이렇게 목록에 추가해주시면 됩니다:
[code:js]
"whitelist" : [
        "^http(s?)://(.*)\\.yahoo\\.com$",
        "^http(s?)://(.*)\\.yahoo\\.com:[0-9]+$",
        "^file://$"
    ],
파일은 수정되었지만, 아직 BrowserPlus는 변경 사항을 적용하지 않습니다. 강제로 적용하는 확실한 방법은 모든 브라우저 창을 다 닫는 것입니다(BrowserPlus는 그것을 사용하는 페이지가 없을 때 종료됩니다). 다른 불편한 방법은 BrowserPlusCore를 프로세스 목록에서 찾아 종료하는 것입니다. 어느 쪽이든, test.html 파일을 연 후 "Hello World."가 보이면 사용할 준비가 된 것입니다.
from Hacking BrowserPlus to work locally on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Firefox 3와 Opera 9.5의 출시가 임박함에 따라, Yahoo UI 팀은 자신들의 YUI 2.5.2 버전에서 이 브라우저들과 강력한 호환성을 보증하는 선수(先手)를 두었습니다. 어제 발표된, YUI 2.5.2 는 다수의 버그를 수정했지만 주로 Mozilla와 Opera의 새로운 브라우저에 초점을 두었습니다. 업데이트는 다음 사항을 포함합니다:
  • Opera 9.5b2와 Firefox 3.0RC1에 대한 광범위한 테스트. 이들 브라우저는 최종 릴리스에서 A 등급 브라우저가 될 것입니다.
  • DataTable, Menu, Rich Text Editor,Button의 주요 버그가 수정되었습니다.
  • 라이브러리의 Rich Text Editor와 DataSource가 Adobe AIR를 더 잘 지원하도록 업데이트 되었습니다.
  • 완전한 범례와 세 개의 새로운 스타일 세트 지원을 포함해 실험적인 Charts Control 이 업그레이드 되었습니다.
  • 컴포넌트를 조금 더 깊이 알고 싶은 개발자를 위해 Flash를 사용하는 컴포넌트(Chart와 Uploader)의 ActionScript 소스를 다운로드할 수 있게 되었습니다.
YUI v2.5.2의 전체 릴리스 노트는 Yahoo! User Interface Library Group에서 보실 수 있으며, Yahoo!’s free edge-hosting service를 통해 즉시 다운로드 하실 수 있습니다.

from YUI 2.5.2 Released, Big Focus on Firefox 3 and Opera 9.5 Support on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지
Yahoo! 에서 Yahoo! BrowserPlus의 정보를 조금 공개했습니다.

웹을 확장하는 플랫폼: 최종 사용자는 BrowserPlus를 설치하고, 개발자는 작은 JavaScript 라이브러리를 통해 그것의 기능을 사용합니다. 오늘 플랫폼에 포함한 기능 몇 가지입니다:

  • 데스크탑에서의 드래그-앤-드랍
  • 클라이언트측 이미지 관리 (자르기, 회전 & 필터)
  • 데스크탑 알림
관련 서비스에 대해 더 아시고 싶으시면 BrowserPlus 랜딩 페이지를 참고하세요.

TTS 서비스도 있나봅니다.
[code:js]
// the "service specification" that we'll activate
var ttsService = {
  service: "TextToSpeech",  
  version: "1",  
  minversion: "1.0.2"  
};
  
// check for the presence of TextToSpeech, and dump results in the
// specified div
function checkForTextToSpeech(divName) {
  YAHOO.bp.isServiceActivated(
    ttsService,
    function() {
      var _divName = divName;
      return function(haveIt) {
        var d = document.getElementById(_divName);
        d.innerHTML = haveIt;            
      };
    }());
}
 
YAHOO.bp.init(function(res) {
  if (res.success) {
    checkForTextToSpeech("before");
    YAHOO.bp.require({services: [ ttsService ]},
                     function(r) {
                       checkForTextToSpeech("after");
                       if (r.success) {
                         YAHOO.bp.TextToSpeech.Say(
                           { utterance: "text to speech is activated" },
                           function() {} );
                       }
                     });
  }
});
이미지의 드래그앤드랍과 그들을 자르는 것을 합쳐놓은 좋은 데모가 있습니다.

Yahoo! 웹 확장에 동참해줘서 반갑다네! (...라고 Dion씨가 그랬어요)

from Yahoo! BrowserPlus: Sneak Peak on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Reid Burke씨가 YUI 확장기능들을 작성하는 yodeler 프로젝트를 시작했습니다. 그의 가장 최근 확장기능은 각 탭의 컨트롤을 수직 혹은 수평으로 스크롤 할 수 있는 tab view 입니다:

제 첫번째 작업은 탭 컨텐트간 전환을 위해 스크롤 애니메이션을 사용하는 YAHOO.widget.TabView의 확장입니다.

속성에서 부모 컨테이너를 위한 너비와 높이를 반드시 지정해야한다는 점만 빼면, TabView와 똑같이 동작합니다. 모든 스타일은 자동으로 적용됩니다!

사용자 삽입 이미지
ScrollTabView.js는 BSD 라이센스를 적용했고, Reid의 SVN 저장소에서 다운로드받을 수 있습니다.

from Scrolling Tab View for YUI on Ajaxian
TAG Yahoo!, Yui
Posted by 행복한고니 트랙백 0 : 댓글 0
Eric Miraglia씨가 첫번째 YUI 응용프로그램 만들기라는 좋은 자습서를 포스팅했습니다. 그는 Yahoo!의 검색 웹 서비스를 사용하는 사이트 검색 폼을 만들기 위한 YUI의 자동완성 컨트롤을 가져와 간단한 응용프로그램을 작성하는 과정을 단계별로 보여주었습니다.
사용자 삽입 이미지
이 자습서는 응용프로그램을 만드는 법이나 YUI의 광범위한 문서를 차용하는 법 어느 면에서도 훌륭한 자습서가 될 것입니다. 또한 다음과 같은 몇몇 멋진 부분들도 다루고 있습니다:
  • YUI 구현체를 설정하고 페이지에 YUI를 사용하는 법
  • 혁신적으로 개선된 YUI 위젯을 위한 마크업을 설정하는 법
  • YUI 위젯을 인스턴트화하고 설정하는 법
  • YUI 위젯에 의해 제공되는 "사용자정의 이벤트"를 구독하고 사용하는 법
  • 개발자의 요구를 반영한 맞춤 구현체를 얻기 위한 기본 동작을 재정의하는 법
from Ajaxian Featured Tutorial: Writing Your First YUI Application on Ajaxian

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

글쓴이가 작년 1월에 event driven application design in JavaScript 에 대해 쓴 적이 있는데, 이 아이디어에 영감을 얻은 Caridy Patiño씨가 Bubbling Library를 작성했습니다.

Caridy는 YUI 블로그에 버블링 라이브러리를 이용한 디커플링 방법을 작성했습니다.

본질적으로, 그의 해결책은 여러분이 응용프로그램 모듈에서 커스텀 이벤트를 가지고 실행순서나 가능성에 상관없이 이벤트를 살펴볼 수 있도록 합니다. 만약 이벤트의 순서에 종속적으로 된다면 단순하게 커스텀 이벤트를 사용하는 것은 꽤 곤란할 수도 있습니다. Caridy씨가 제안한 디커플링 해결책은 걱정거리를 하나 줄여주게 될 것입니다.

from Making application modules communicate with each other using Decoupling on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Mitchell Amihod씨가 YUI에서 조금 언급된 부분인 YAHOO.lang의 기능에 대한 글을 썼습니다.

그는 isNull(), isUndefined(), isValue() 등의 타입 체크 함수에 대한 이야기로 시작했고, 그 다음에 trim() 함수에 대해 말했습니다.

YUI에 치환 형식의 작은 템플릿 언어가 있다는 사실을 알고 계셨나요?

[code:JScript]
// simple

YAHOO.lang.substitute('Hello {world}', {'world':'earth'});

// process
var processText = function(key, value, extraInfo) {
  if(!YAHOO.lang.isNull(extraInfo)) {
    return extraInfo;
  }
  return value.toUpperCase();
};
YAHOO.lang.substitute('Hello {world Venus, Jupiter}', {'world':'earth'}, processText);

setInterval/setTimeout 호출을 래핑하지 않은 DHTML 라이브러리는 없겠죠:

[code:JScript]
var foo = {
  count :0,
  'method' : function(data) {
    this.count++;
    if(this.count == 10) {
      timer.cancel();
    }
    console.log(this.count);
  }

var timer = YAHOO.lang.later(1000, foo, 'method', [{data:'bar', data2:'zeta'}], true);

이후에는 머지할 필요가 있습니다. 만약 Rails 개발에 익숙하시다면, 해시를 대응시켜 머지 스타일의 연산을 해서 원하는 결과를 얻는 것에 중독되고 말 것입니다.

[code:JScript]
var myAwesomelWidget = function(oConfigs) {
  oConfigs = oConfigs || {};
  var defaults = {
    'awesomeness' : '11',
    'shiny'       : 'high',
    'sparkle'     : 'high'
  }
 
  var combinedConfigs = YAHOO.lang.merge(defaults, oConfigs);
  //Shiny is now set to low, everything else in combinedConfigs is set to the defaults
};
myAwesomelWidget({'shiny': 'low'});

from Reminded of speaking your YAHOO.lang on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Yahoo! BrowserPlus에 대한 글 이후, 많은 문의가 있었나봅니다. 그래서, strings 명령을 이용해 몇가지 사실을 밝혀낸 모양입니다:

  • 컴포넌트는 Corelets라고 불리는 것 같습니다.
  • Corelets를 제공하는 배포 서버가 있습니다. 기본값은 browserplus.yahoo.com 이지만 아무 것이나 가능합니다.
  • "동적 Corelets" 라는 개념이 있습니다. 이는 시스템에 새로운 Corelets 를 가져오거나 시스템을 프로그램하는데 동적 언어를 사용할 수 있는 것 같습니다.
  • OpenSSL이 포함되어 있고, 올바른 코드가 실행중인지 검증할 것으로 보입니다. SSL primitive를 이용할 수 있는지는 모르겠습니다.
  • 네이티브 JSON 구현체가 포함되어있습니다. 아마도 config 파일을 해석하는 용도인 것 같은데 개발자들에게는 노출되어있지 않습니다.
  • "업로드 Corelte"이라는 개념이 있습니다. 시스템에 새 Corelet을 업로드 하거나 (제발)파일 업로드를 개선하는 방법일 것 같습니다.

또한, 설치 디렉토리를 보신다면 시스템이 Netscape Portable Runtime을 사용한다고 알려주는 NSPR을 보실 수 있습니다. Netscape Portable Runtime(= NSPR)은 지원하는 모든 운영체제를 Mozilla와 같아 보이게 하는 플랫폼 추상 라이브러리입니다.

Netscape Portable Runtime(이하 NSPR)은 지원하는 모든 운영체제를 Mozilla와 같아 보이게 하는 플랫폼 추상 라이브러리입니다. NSPR은 GUI가 아닌 운영체제 기능에 플랫폼 독립성을 제공합니다. 이러한 기능에는 스레드, 스레드 동기화, 일반 파일과 네트웍 I/O, interval timing과 달력 시간, 기본적인 메모리 관리(malloc과 free), 공유 라이브러리 링크 등이 있습니다.
from Yahoo! BrowserPlus: Why wait for the news when you have strings? on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Yahoo! 에서 "Gears 비슷한" 프로젝트를 진행했다가 취소했다는 소문이 돌았었나봅니다. 소문은 사실이라, 취소되기는 했는데 다른 방식으로 돌아왔습니다. Brickhouse의 Skylar Woodward씨가 그의 블로그에서 이것에 대해 조금 말했었군요.

Skylar 씨에 따르면, BrowserPlus 라는 이름의 이 결과물은 개발자들에게 브라우저 프로그래밍 환경(DHTML, JS)에서 다양한 컴포넌트(VoIP, 이미지 관련, 데이터 캐싱, 기타 등등)를 사용할 수 있게 하는 프레임웍이자 소프트웨어가 될 것이라고 했습니다. 1.0 버전에서는 일단 Yahoo! 사이트에서만 쓸 생각이지만, 조만간 다른 사이트에서도 이용할 수 있도록 할 생각이라고 합니다. PhotoDropper 모듈이 탑재되고, PC에서 바로 설치가 가능하다고 합니다.

글쓴이가 오랫동안 바래왔다는 <input type="file" multiple="true"> 와 같은 식의 멀티 파일 업로더도 가능한 모양입니다. 하지만, 아마도 웹 개발자면 누구나 원하지 않았을까 싶습니다.

from Yahoo! BrowserPlus: The rumour is true on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

티스토리 툴바