야후 사용자 인터페이스 블로그 (YUIBlog)

유이 고용

우리는 선택 YUI 팀에 합류하기 위해 수석 프런트 엔드 엔지니어를 찾고 있어요! 당신은 JavaScript와 다양한 프런트 엔드 기술을 잘 한건지에서 전문가가되어야합니다. 당신은 엄청난 규모로 복잡한 문제를 해결하는 사랑, 그것이 강력하고 직관적인 API를 설계하는 데 걸리는 알고, 성능, 보안, 접근성 및 사용성의 모범 사례를 받아들인다. 당신은 또한, 우수한 커뮤니케이션 능력을 갖고 세부 사항에 큰 관심을 가지고 있고 독립적이고 가치입니다.

최소 작업 자격 :

• 전문가 수준의 자바 스크립트, HTML 및 CSS 기술이 필요합니다.
• 모듈식 performant, 그리고 maintainable있는 재사용 가능한 JS 컴포넌트를 구축 시연 경험.
• 수백만 매일 영향을 세계적 수준의 프론트 엔드 라이브러리를 구축하고 evangelizing에 대한 열정.
• 특히 오픈 소스 소프트웨어 프로젝트, YUI와 친숙.
• 컴퓨터 과학 학위 또는 이와 동등한 경력.

선호하는 취업 자격 :

• 이러한 모바일, 공연, 서버측의 JavaScript 또는 국제화와 같은 하나 이상의 프런트 엔드 도메인의 전문 기술 시연 깊이.

당신과 같은 경우이 소리, 이력서를 보내 YUI - 작업 (에서) 야후-INC (점) com 사이트 편지를 덮어주십시오.

야후에 대하여

고유 야후있는 혁신적이고 창의적인 방법으로 - 온라인 매 2 사람 중 1 아웃에 영향을 생각해보십시오. 우리는 매일 그냥 알아, 당신도 못했습니다. 결국, 그것은 전세계 소비자와 광고주의 인터넷 경험을 다음 세대를 만드는 것입니다 당신과 같은 큰 사상가입니다. 지금 당신이 알아낸 세계를 보여줄 시간이야. 억 반 이상의 사람에게 어떤 효과가 귀하의 아이디어를 넣어.

야후 주식은 기회 균등의 고용주입니다. 자세한 내용 또는 채용을 모두 검색하려면 참조하시기 바랍니다 http://careers.yahoo.com .

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 압축기 2.4.6을 발표

우리는 버전 2.4.6의 즉각적인 가용성 발표하게 된 것을 기쁘게 생각 YUI 압축기 . 이 버전은 대부분의 CSS minification하고 단일 명령으로 여러 개의 파일을 소개하는 배치 처리의 압축기의 처리에 관련된 업데이 트가 포함되어 있습니다.

CSS의 minification

주요 특징은 다음과 같습니다 :

• 압축기 및 / 또는 그 결과 minified 파일을 깰 고정 수많은 버그.
• 추가 설명서를 정확히 minifier이 무엇에 있으며 CSS를 해킹 그것은 허용합니다.
• CSS는 분 경우에 당신의 빌드 프로세스에 대한 더 적합한 것이죠 자바 스크립트를 포트 있어요. 여기도 테스트 웹 UI이야 당신 minifier 실험할 수있는 자바 스크립트 포트를 사용합니다.
• 의 상당수 새 테스트 추가 (하지만 당신은 할 수 더 추가 ).
• 이러한 미디어 쿼리와 CSS3 변환으로 더 채택을 받고 일부 CSS 기능의 안전 처리.

일괄 처리

압축기에 대한 또 다른 환영 더불어 이젠 파일을 일괄적으로 처리할 수있다는 것입니다. 이것은 상당히 빌드 프로세스가 작게하다하는 파일의 큰 번호가 특히, 걸리는 시간을 줄일 수 있습니다.

예를 들어 다음 명령은 모두 작게하다 .js 와 .css 파일과 "min.css"접미사와 minified 파일을 작성합니다.

  $ 자바 - 병 yuicompressor.jar-O '. CSS $ : - min.css'* CSS.
 $ 자바 - 병 yuicompressor.jar-O '. JS $ : - min.js'* JS. 

덕분에 나가 스티븐 우즈 와 플리 커 팀 이 기능을 위해!

링크

YUI 압축기 2.4.6 즉각 사용할 수 있습니다 다운로드 . 으로 우리를 도와 부담 버그 또는 기능 요청을 제출 , 더 많은 테스트를 작성 , 코드를 분기 하거나 대화에 합류 .

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

방향 친화적인 탐색 바

나는 최근에 오른쪽 정렬 링크가있는 수평 탐색 메뉴를 건너 왔어요. 네가 기대한대로, 그것은있는 목록 요소였다 float:right 와 함께 목록 항목 float:left . 이 접근법 잘못은 전혀 없다하더라도, 그것은 나를 논의할 기회 걸릴 영감 방향성을 레이아웃합니다.

부동 요소의 비용

수레 방향성에 대한 개념이 없다, 그들은 인라인 요소 또는 테이블 컬럼 (하는 것처럼 작동하지 않습니다 dir 속성 마법의 총알입니다.) 수레로, 저자는 가치를 '교환'하는 메커니즘을 구현해야 때마다 인터페이스 변경 ( ltr 대 rtl ).

대신에 사용하는 자 float , 저자 선호 수 있습니다 inline-block . 다음은 간단한 예제이다 :

 ul { text-align: end; text-align: right\9; *text-align: right; } li { display: inline; } a { display: inline-block; padding: 5px 15px; margin: 0 5px; } 

참고 그 "사용 \ 0 대신에 "(공백 포함)" \9 "오페라 돌볼 것이지만,"향후 증거로되지 않을 수 있습니다 \9 "(IE 전용).

본 바와 같이 데모 페이지 쇼, 크롬에서 사파리와 파이어 폭스, inline-block 기법 (흐름 방향의 값이 일치 레이아웃 작성 모드에 의존하게 dir 아무런 방향을 지정하지 않으면 속성, 또는 초기 값). 다른 UA의 하시려면 때문에 속성을 선택 (즉 지원의 IE의 부족 html[dir="rtl"] ), 저자 방향의 변화를 수용하기 위해 마크업에 후크를 추가해야합니다. 예를 들어, 전체 학년 호환성을 위해 :

플로트 기술의 경우 :

 .rtl ul { float: left; } .rtl ul li { float: right; } 

: 인라인 블록 기법에 대한

 .rtl ul { text-align: left\9; /* IE8/9 */ *text-align: left; /* IE5/6/7 */ } 

text-align: start | end

달리 left 과 right , start 과 end 쓰기 모드에 의존하는 키워드입니다. 영어로, start 으로지도를 left 과 end 에지도 right . 에 의존하는 start 및 end 보다는 left 과 right 일부 브라우저 (스와핑을 할 수 있습니다 ltr / rtl 자동).

브라우저 및 기법의 차이점

"지원하지 않는 브라우저에서는 start / end (IE, 오페라) "

스와핑 방향 아무것도 변경하지 않습니다 기법을 떠

인라인 블록 기법 : 방향을 교환하는 메뉴의 정렬을 변경하지 않지만 링크가 올바른 순서에 표시됩니다

지원 "할 브라우저에서 start / end "(크롬, 사파리, 파이어 폭스를)

스와핑 방향 아무것도 변경하지 않습니다 기법을 떠

인라인 블록 기법 : 방향을 교환하는 메뉴가 모두 방향을 바꾸려고 정도이며 링크

그것은 그것이다! 당신이 수평 스타일 요소가 다음번에,주는 것을 잊지 display:inline-block 이나 display:table 봐요.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 3 "빌딩 블록, 모듈, 및 응용 프로그램은"포틀랜드와, 무료 워크숍!

와 함께 유이, 야후! 개발자 네트워크는 , 무료로 초청 기대 YUI 3 "빌딩 블록, 모듈 및 응용 '워크숍 오리건주 포틀랜드에있는 2011년 5월 1일 (일요일)에 있습니다. 이것은 귀하의 시간을 킥오프 좋은 방법입니다 JSConf 하지만 워크샵에 참가 JSConf 티켓 필요하지 않습니다. 모든 사람은이 무료 이벤트에 초대된다!

나는 동료 야후에 합류하게됩니다 곤잘로 콜데로 의 전체 하루 동안 실습에 당신이 stateful 클래스, 플러그인, 그리고 YUI 세 인프라 구성 요소를 사용하는 위젯을 빌드하는 방법을 배우게 될 교육, 재사용 가능한 모듈로 그들을 포장하고, 그들을 조립 간단한 응용 프로그램에. 아침 클래스는 빌딩 블록 (예 : Base와 위젯 등) 언제, 사용 방법 제공하고해야할지에 초점을 것입니다. 오후 클래스는 호스팅 모듈을 결합 로더를 설정 및 사용자 지정 이벤트를 통해 다양한 모듈 클래스와 API를 관련하는 애플 리케이션 컨트롤러를 설정, 고급 수준의 구성으로 얻을 것이다.

공간이 한정되어 있으므로시 오늘 좌석을 예약 http://training.bocoup.com/PreJSConf-2011/

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 3 DataTable의를위한 빠른 편집 모드

비록 YUI 3 DataTable의는 아직 개별 세포의 인라인 편집을 가지고 있지 않으며, 그것은 빠른 편집 모드를 구현하는 비교적 간단하다. QuickEdit 프로그램 에서 DataTable의 용 플러그인 YUI 세 갤러리는 DataTable의 모든 보이는 값을 동시에 편집할 수 있습니다.

( 이 예제와 함께 재생 화면을 클릭하십시오 .)

개요

과 마찬가지로 YUI 2 버전 , 빠른 편집 모드의 핵심 아이디어는 폼 요소, 예를 들어, 입력 필드 또는 드롭 다운과 함께 세포를 채우는 새로운 모든 세포 formatters을 교체하는 것입니다. 때 끝났다 start() 아래에 설명된 구성을 바탕으로 호출됩니다. 사용자가 완료되면, 당신은 전화 getChanges() 변경된 값을주고 그들을 유지합니다. 빠른 편집 모드를 종료하려면 전화 cancel() . (이것은 취소 대신 그것이 모든 변경 사항을 버리고라고 말씀 드리고 중지라고합니다.)

빠른 수정 갤러리 모듈 DataTable의 용 플러그인이기 때문에, 당신은 당신이 그것을 사용하기 전에 DataTable에 그것을 연결해야합니다

 my_table.plug (Y.Plugin.DataTableQuickEdit);

이것에 플러그인을 저장 qe DataTable의 회원이 때문에,이 같은 플러그인의 함수를 호출해야합니다

 my_table.qe.start ();

구성

: 빠른 수정은 모든 컬럼에 대한 두 가지 새로운 구성 속성에 추가 quickEdit 및 qeFormatter .

컬럼의 경우 quickEdit 속성이 정의되고, 열은 빠른 편집 모드에서 편집 가능한 것입니다. 모든 기본 값을 적용하기 위해서는 간단하게 설정할 수 있습니다 quickEdit:true . 추가 기능이 들어, 다음과 같은 속성을 가진 개체를 전달할 수 있습니다 :

formatter

<input type="text">, <textarea> 또는 <select> : 해당 양식 필드를 렌더링 세포 포맷터. 기본적으로 셀 포맷의 Y.Plugin.DataTableQuickEdit.textFormatter 입력 요소를 생성하기 위해 모든 세포에 사용됩니다. 얻으려면 textarea 요소를 사용하여 열을 구성 Y.Plugin.DataTableQuickEdit.textareaFormatter 대신합니다.

validation

열에있는 각 필드에 대한 유효성 검사 구성.

css

기본 유효성 검사 규칙을 인코딩 CSS 클래스 :

yiv-required

값이 비어있을 수 없습니다.

yiv-length:[x,y]

문자열은 최소한이어야합니다 x 문자와 대부분의 y 글자. x와 y 중 하나 이상을 지정해야합니다.

yiv-integer:[x,y]

정수 값은 최소한이어야 x 및 대부분의 y . x 와 y 모두 선택 사항입니다.

yiv-decimal:[x,y]

소수점 값은 최소한이어야 x 및 대부분의 y . 지수는 허용되지 않습니다. x 와 y 모두 옵션입니다.

fn

인자로서의 범위와 세포의 형태 요소로 DataTable의와 함께 호출됩니다 함수. 값이 유효한 경우 true 반환합니다. 그렇지 않으면, 전화 this.displayMessage(...) 오류를 표시하고 false를 반환합니다.

msg

기본 또는 정규식 유효성 검사 규칙이 실패할 때 표시되는 메시지 유형의지도. 유효한 유형은 다음과 같습니다 required , min_length , max_length , integer , decimal , 그리고 regex . 유형에 대한 기본값은 없습니다 regex 당신이 정규식 유효성 검사를 구성하는 경우, 그럼 당신이 메시지를 지정해야합니다. 다른 유형에 대한 기본 오류 메시지에 저장됩니다 Y.FormManager.Strings (에서 제공하는 갤러리 - formmgr-CSS-검증 ) 및 오버로드 및 / 또는 다른 언어가 될 수 있습니다.

regex

값이 순서대로 만족해야하는 정규 표현식은 유효한 것으로 간주되어야합니다.

때로 아닌 편집 가능한 컬럼은 빠른 편집 모드 중에 다르게 렌더링해야합니다. 가장 좋은 예제는 빠른 편집 모드에서 악영향이있을 수 있지만 페이지에서 멀리 이동 있기 때문에, 링크를 포함하는 컬럼입니다. 빠른 수정 중에 링크를 제거하려면 구성 qeFormatter 될 칼럼을위한 Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter . 이메일 주소의 경우 사용 Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter . 당신은 또한 당신에게 사용자 지정, 읽기 전용 포맷을 쓸 수 있습니다. 간단히있는 DataTable 셀 포맷을 구축을위한 일반적인 규칙을 따르십시오.

누락 특징

로 인해 YUI 3.3.0 DataTable의 버그 , td 요소가 열 포맷에 전달은 이전 칼럼에서 사실이다. 이것은 첫 번째 행에서 버튼을 사용하면 다른 모든 행이에 가치를 복사할 수있는 위치를 아래로 복사를 지원하는 것이 너무 성가신했다.

버그도 대신 DOM을 조작 텍스트를 반환하는 기본적인 빠른 수정 세포 formatters의 전체 reworking 필요했습니다. 사용자 정의 셀 formatters이 공식적으로이 초기 릴리스에서 지원되지 않는 이유입니다. 당신은 모험을 경우, 여전히 그들을 만들지만, 당신이 그들을 다시 작성하는 번거로움이 따른다는 것을 명심 아래로 복사에 대한 지원에 추가를 포함하여 수, 한 DataTable의 버그가 수정되었습니다.

소개 저자 : 존 Lindal는 ( @ jafl5272 트위터)에 토대 구축 리드 엔지니어 중 하나입니다 야후! APT가 내장되어 있습니다. 이전에, 그는 야후 제작사 네트워크에서 근무했습니다.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI : 개관 시간 목 4월 21일

YUI 원격 로더 서비스

한 동안, 리드 버크 YUI 3에 모듈 의존성을 계산하고 요청의 과정을 빠르게하기 위해 Node.js 기반 서비스에서 작업되었습니다. 그는 그것이 상당히이 시점에서 buttoned 최대 가까이에 있고, 그가있어 어떤 공유하고 그것도 awesomer하게 될지에 대한 아이디어를 얻을 싶은 것.

문제

잠시 동안 지금 우리는 개발자를위한 정말 편리한 반면, 알았다 Y.use( modules ,...) 메소드는 구현 코드의 시간을 최대 스핀의 불필요한 지연을 소개합니다. 그것은 의존성 트리를 계산하는 일이 많다이라고 밝혀, 그리고 혼자 메타 데이터는 페이지의 전체 메모리 풋프린트에 부담이 될 수 있습니다. YUI의 씨앗 파일 (포함하는 전통적인 방법 yui-min.js 다음에 부트 스트랩), YUI().use(...) 첫번째에 전체 라이브러리에 대한 의존성 메타 데이터에 매여되는 모듈-로더를로드 YUI를 알려줍니다 자사의 소스 후 로더가를 기반으로 필요한 모듈의 전체 목록 계산이 use(...) 클라이언트 컴퓨터에서 진술.

솔루션

메타 데이터와 로더가 클라이언트 컴퓨터에 더 이상 필요 없기 때문에 원격 로더 서비스는 여러분의 코드가 더 빠른 초기화하고 귀하의 사이트의 클라이언트 메모리 프로파일을 줄이고, 서버에이 계산을 이동합니다. 그것은 또한 모든 코드를 반환 직접보다는 yahooapis 콤보 서비스 (이하 네트워크 트래픽)을 통해 라우팅, 콤보 핸들러 역할을하고 도메인에 Node.js 서버에 배포되는이 가능합니다.

계획에 미치는 사용으로 꽤 인상적인 통계를 포함하여 현재 활동중인는지 레이드 데모를하는 것입니다 yuilibrary.com 다음 의견과 요청에 대한 호출을 엽니다. YUI 로더의 미래처럼 보이는는지 확인해 봐!

시간 및 세부 정보

우리는 오전 10 시부터 태평양 서머 타임 오전 11시 목요일 온라인습니다. 연결 세부 사항은 평소와 동일합니다.

1. (스카이 프 이외 참가자에 좋은 효과 *) 1-888-371-8922에 전화 걸기
2. 참석자 코드 47188953을 입력합니다 #
3. 화면 공유 세션에 참가 (이것은 그것을 처음 사용하는 경우 이것이 당신이 어도비 커넥트 플러그인을 설치하라는 메시지가 나타납니다)

* - 스카이 프가 옵션이 없다면, 지역 번호 freenode에 # YUI IRC 채널에서 날 이메일을 보내거나 나를 (ls_n)를 잡을 수있어.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 2.9.0을 발표

YUI 팀은 YUI 버전 2.9.0의 릴리스를 발표 감격하고 있습니다. YUI 2.9.0가있다 YUI이 코드 라인에서 마지막 버그 수정 프로그램 릴리스 유지 관리 모드로의 전환을 마킹. 앞으로 이동, 업데이트부터의 브라우저에 나타나는 브라우저 호환성 문제에 대해서만 중요한 버그 수정 또는 수정으로 구성된 자료보기를 기대 GBS를 . 우리는 정말로 더 YUI의 곧 3.4.0 릴리스에 우리의주의를 집중하게 된 것을 기쁘게 생각합니다.

YUI 2.9.0에 포함된 변경 사항의 아이디어를 얻으려면, 당신은 검토할 수 있습니다 추가 다이제스트 이 릴리스에 대한 각각의 추가 정보 파일에 대한 구성 요소 개발자가 만든 첨가물을 모두 요약되어 있습니다. 당신은 또한 볼 수있는 고정 티켓의 목록 이 릴리스에 완료 버그 수정 및 개선 요청에 대한 요약을 위해 YUI 2.9.0에 있습니다.

우리는 YUI 2.x에서를 비하하는 과정을 시작으로, 모든 출시된 버전은 야후의 CDN에서 호스팅 계속하고 코드베이스가 될 것이라는 사람을 상기하고 싶습니다 GitHub.com에 forkable .

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!