Blog ng Yahoo! User Interface (YUIBlog)

CSS Quick Tip: Paano upang maiwasan ang isang "drop ng Float" sa IE6

Kahit na ang pag-uugali na ito ay madalas na tinatawag na isang " Float drop "o" Float drop ", ang haligi na patak para sa ay hindi kailangang maging isang Float ... ay may lamang ito upang maging mas malawak na kaysa sa space na inilalaan para dito. Tandaan na ito ay sa pamamagitan ng spec at ito ay isang pangkaraniwang pag-uugali sa buong browser, kung ang isang haligi ay "masyadong malapad", pagkatapos ito ay drop.

Ano gumagawa ng IE 6 ng taxi out na ang browser na ito ay hindi ganap na suportahan ang ari-arian ng width (o height para sa bagay na). Samakatuwid, ito ay nagbibigay-daan sa mga lalagyan na lumago upang mapaunlakan ang kanilang nilalaman. Ito ay ang paglago na lumilikha ng drop, dahil ang kahon ay hindi maaaring magkasya sa kanyang dinisenyo puwang.

Karaniwan, ang mga culprits ay mga elemento na hindi Pakibalot (eg mga imahe, mga url, atbp), ngunit ang font styling (eg, IE at italics ) ay maaaring maging responsable masyadong.

Halimbawa, upang gumawa ng karapatan drop na hanay sa YUIBlog sa IE 6, lahat ng ako ay gawin ay ang istilo ng isa ng ang mga imahe sa ang karapatan na tren na may isang lapad na mas malaki kaysa sa 210 pixels. Na ang imahe pwersa IE 6 upang madagdagan ang lapad ng kanang haligi na kung saan pagkatapos ay hindi na magkasya sa tabi ng kaliwang haligi.

Ang mga karaniwang pag-aayos:

word-wrap: break-word;

String wrap sa pamamagitan ng paglabag sa kanang gilid ng kahon.

wbr sa wbr:after {content:"\00200B"} para sa Opera

Ang wbr elemento ay kumakatawan sa isang line break na pagkakataon. Pagpasok wbr ng loob ng mga mahabang string ay nagbibigay-daan sa browser upang magdagdag ng isang linya pahinga kung kailangan.

overflow-x:hidden;

Anumang nilalaman na mas malawak kaysa sa lalagyan ay cut-off sa kanang gilid ng sinabi kahon.

Tandaan na ang dalawang unang solusyon ay gagana lamang sa mga string at hindi maiwasan ang mga imahe, atbp mula sa pagpapalawak ng kahon.

Kapag ang mga kilalang mga pag-aayos ay hindi maikling

Ang ilang linggo likod, ako ay tatanungin upang ayusin ang isang "drop ng Float" sa isa sa mga pahina ng Yahoo! Finance. Sa modernong mga browser, ang isang mahabang string ay luwa ng karapatan tren (screenshot), ngunit sa IE 6 na ang parehong string ginawa ang kanang haligi ng drop sa ibaba ng fold (screenshot). Sa kasamaang palad, ang nilalaman na dumating mula sa isang provider, kaya e-edit ng markup ng ay hindi isang opsyon.

Dahil sa likas na katangian ng string, kung saan ay isang comma-separated na listahan ng mga simbolo, mga pag-aayos sa itaas ay hindi kasiya-siya. Pangunahing na listahan sa isang arbitrary lugar ay mas mahusay kaysa sa pagputol ito off, ngunit hindi pa rin mabubuhay solusyon ...

Paggawa ng IE 6 kumilos tulad ng malaking lalaki

Ang panlinlang upang gumawa ng IE 6 kumilos tulad ng anumang mga modernong mga browser out doon sa estilo ng kahon na may isang negatibong kanan margin (plus position:relative ).

Live Demo

Wala ang pag-aayos

Screenshot para sa mga na hindi mo makita ang pahinang ito sa IE 6.

Lorem ipsum pighati umupo amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ng AC rhoncus ultrices, turpis mauris mattis dui, quis pharetra sa odio orci vitae risus. Nunc ultricies gravida facilisis.

Curabitur luctus, ang quis orci vitae risus.

Gamit ang pag-aayos

Lorem ipsum pighati umupo amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ng AC rhoncus ultrices, turpis mauris mattis dui, quis pharetra sa odio orci vitae risus. Nunc ultricies gravida facilisis.

Curabitur luctus, ang quis orci vitae risus.

.fixMe { margin-right:-100px; position:relative; }
.fixMe { margin-right:-100px; position:relative; } 

Ang mga negatibong margin ay maaaring maging ng anumang halaga hangga't ang halaga na ito ay mas mataas kaysa sa delta sa pagitan ng inilalaan lapad at ang aktwal na lapad ng pinalawak na kahon. Ito ay na deklarasyon na pinipigilan ang drop Float. Ang layunin ng position:relative ay upang gumawa ng ang IE na ipakita ang nilalaman sa labas ng hangganan ng mga magulang ang lalagyan.

Dahil gusto ko sa mga elemento ng estilo ang parehong sa buong board, ako ay karaniwang hindi sandbox na ito tuntunin.

Bagay upang isaalang-alang

Magtadtad ito pinapanatili ang haligi sa lugar, ngunit ito ay hindi maiwasan na lalagyan mula sa pagkuha ng mas malawak na. Ang ibig sabihin nito hindi mo maaari estilo ng elemento sa isang background o isang hangganan dahil sila ay ipininta sa labas ng wrapper. Narito ang isang screenshot ng kung ano ang background at mga hangganan hitsura kapag inilapat sa mga kumbinasyon na may pamamaraan na ito sa IE 6:

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

jQuery at Yui 3: isang kuwento ng Dalawang Aklatan JavaScript

Kamakailan ako nagkaroon ng pagkakataon upang bumuo ng aking unang JavaScript front end application. Ano sumusunod ay isang maikling kuwento ng pagtuklas at paglaki na ay tungkol sa kapag sinusubukan mong gamitin ang mga tool na ay hindi angkop para sa trabaho sa kamay. Ito ay isang account ng pag-aaral na nakuha sa pamamagitan ng pagbuo ng parehong front end application gamit ang dalawang ibang-iba na mga aklatan, jQuery at Yui 3. Ang mga detalye ng client at ang proyekto ay sadyang tinanggal.

Pangkalahatang-ideya ng

Proyekto ang kasangkot ang refactoring na ng ilang disparate tool ng Flash sa isang solong interactive na aplikasyon na batay sa bukas na mga pamantayan para sa isang malaking nilalaman ng publisher. Ng mataas na kahalagahan, ang application ay may mataas na-optimize na may isang maliit na paunang-print ng paa dahil sa malaking bilang ng mga pang-araw-araw na mga impression ng pahina na natatanggap ng client. Ilang phases ay kasangkot, ang unang pagiging isang unang patunay ng konsepto.

Ang konsepto ang mga kasangkot sa pagbuo ng isang view ng kung ano ay ang nakumpletong application. Ito ay binubuo ng:

• Isang paunang file buto (<1KB) na responsable para sa dynamic loading ng anumang frameworks (hal., ang jQuery o Yui 3) at ang unang file ng application.
• Ang pagbuo at pagsasama ng mga jQuery plugin upang suportahan ang styling ng form na elemento at pagpapatunay, at dynamic na tsart visualisations.
• Ang henerasyon at populasyon ng UI, na batay sa mga user input, mga configuration default at ang lokasyon ng application sa loob ng site ng publisher.
• Ang pagkalkula at pagtatanghal ng impormasyon na batay sa input ng gumagamit.

Sa interes ng buong pagsisiwalat, ang aking sariling mga karanasan hanggang sa puntong ito ay naging sa pagbuo ng mga maliit, standalone na solusyon, ang uri ng kung saan maaari mong karaniwang ilarawan bilang plugin. Mga kasama dynamic na mga sangkap ng UI tulad ng mga mga imahe carousels, interactive na mapa at Twitter / Flickr widgets. Sa panahon ng unang dabbling sa JavaScript, jQuery ay popular, madaling upang malaman at pinapayagan mabilis ako upang kunin ang mga pangunahing kaalaman na kailangan para sa proyekto ko ay nagtatrabaho sa. Subalit ito ay ang lahat ng nakapag-iisang unit at may hindi na kailangan upang makipag-ugnayan sa iba pang mga code o bilang bahagi ng isang mas malaki na application.

Unang pagtatangka

Sa pagkumpleto sa unang phase ng proyekto, ito ay naging painfully halata na ako ay pagharap sa isang iba't ibang mga hayop kaysa sa kung ano ako ay ginagamit upang. Pag may maliit na karanasan sa code organisasyon, ang aking code ay mabilis na naging ginulo, hindi sanay at paulit-ulit. Bilang isang resulta, ang unang bahagi ng kung ano ang nais maging isang mas malaki na application ay mabagal mag-load. Sa katunayan ito kinuha walong segundo upang makabuo na isang patunay ng konsepto. Isang malaking pagbabago ay kinakailangan at habang ako ay isinasaalang-alang ang paggamit ng isang maliit na library tulad ng Dean Edward Base o ng John Resig ay Simple JavaScript mana pattern upang magdagdag ng klase-based mana sa jQuery, nagpasya kong pumunta isang hakbang karagdagang.

Ano Nais kong ay isang kumpletong, mature na framework sa loob kung saan upang bumuo ng aking unang OO application. Isang bagay na ay epektibo gagabay sa akin sa pamamagitan ng proseso. Sa pagrepaso ng mga magagamit na mga aklatan ko nagpasyang gamitin ang Yui 3 para sa mga sumusunod na kadahilanan:

• Integrated, mana-based pagbuo ng application support kasama ang pamamahala ng katangian at klase.
• Pangmatagalang solusyon:
  • Suporta para sa mga pamantayan at access.
  • Pinondohan sa pamamagitan ng isang malaki na rin na kilala na samahan ng Yahoo!,
  • Nauugnay sa mga respetado pangalan tulad sa Douglas Crockford , ang Nicholas Zakas , at Stoyan Stefanov ang .
• Pagganap-optimize:
  • Unang kalahati ng file ng mga lamang 7KB.
  • Tamad-load module on demand.
  • Ang CDN paghahatid.
• Naiba at komprehensibong babasahin:
  • Yahoo! Developer Network
  • Yui 3 API Documentation
  • Yui Teatro
  • Yui Library
  • Yui Blog
• Mature, pare-pareho paglaki sa pagitan ng release.
• Integrated tool sa ang Yui tagapiga , YUIDoc , Yui Tagabuo , at Console .
• Hindi lang JavaScript, isang CSS framework.

Dalhin Dalawang

Pagsasama Yui 3 nagdala ng ilang mga direktang at hindi direktang benepisyo sa proyekto:

• Mana-based architecture at pamamahala ng klase sa pamamagitan ng Attribute interface, at Base at mga Widget klase na paggawa performant, magagamit muli at organisadong code.
• Paghihiwalay ng pagtatanghal mula sa modelo at mga data na paggamit ng klase ng Widget sa render ang kahaliling mga view (inline o overlay) batay sa lokasyon ng application sa loob ng site.
• Sandboxing at dynamic na pagsasama ng module sa pamamagitan ng YUI.use ().
• Cross-debug ng console ng browser gamit ang Yui Console .
• Sa-save, pag-optimize ng pagganap gamit Yui tagapiga sa Eclipse.
• Madaling pagsasama at pagsasama ng mga pre-umiiral na jQuery plugin.
• Sa-save, awtomatikong code papeles gamit YUIDoc na .

Ang huling resulta ay isang masaya na client at isang tapos na produkto na may sub-ikalawang beses ng load (pagtanda ito kinuha ng 8 segundo upang i-load ang unang patunay ng konsepto).

Aralin natutunan

Piliin ang karapatan na kasangkapan para sa trabaho

Sa pagbabasa ng post na ito ako ba ang ilang mga mambabasa ay tingnan ito bilang anti-jQuery. Hindi sa lahat. jQuery ay isang hindi kapani-paniwala proyekto na responsable para sa maraming mga makabagong-likha. Subalit, tulad ng sa anumang mga kasangkapan, ito ay may lakas at inilaan na layunin. Ang lakas nito ay namamalagi sa normalizing inconsistencies browser, pagbaba ng barrier sa entry para sa mga baguhan at pagpapabuti ng kahusayan ng mga karanasan programmer. Ang pangunahing pag-aaral na dumating ng proyekto ay na hindi ka maaaring umasa sa isang kasangkapan para sa bawat trabaho. Yui builds sa kung ano ang jQuery ay maaaring magbigay sa pamamagitan ng nag-aalok din ng isang mahusay na architected application framework. Ngunit ito ay makatarungan sa sabihin na ito ay dumating sa isang gastos, tingnan ang susunod na point.

Matarik learning curve

Kailangan mo ng pasensya, lalo na kapag sumusulat ng iyong unang application na may isang hindi kilalang library bilang ko. Gayunpaman kabayaran ay napakalawak. Sa pamamagitan ng pag-aaral ng ibang library, hindi lamang ay ang iyong pangunahing kasanayan sa JavaScript pagbutihin, makikita mo din na bumuo ng isang mas malalim-unawa sa kung paano aklatan ng trabaho at ang mga benepisyo na dalhin sila. Subukan ko upang malaman ng isang bagong bagay tungkol sa Yui araw-araw at mas malaman ko, mas ako sa sindak ng ang pag-iisip at manipis na manipis na talento na wala sa pagbuo Yui.

Lamang-load ang nilalaman kapag kailangan mo ito

Habang ito ay tiyak na programa madali lang i-load ang lahat ay maaaring kailangan mong upfront, ang pagpapabuti ng pagganap ay nagkamit bilang isang direktang resulta ng tamad loading nilalaman lamang kapag kailangan mo ito ay napakalaking. Ito ay isa ng ang susi magbigay ng kadahilanan para sa husto sa pagpapabuti ng pagganap ng mga application.

Makipag-ugnayan sa ang DOM bilang maliit na hangga't maaari

Point na ito ay hindi kaugnay sa ang tiyak na aklatan na ginagamit. Sa pamamagitan ng caching ang kinakailangang mga elemento ng DOM at paggamit ng mga HTML template mas, UI rendering time nahulog masyado. Nodes ay maaaring naka-cache na gamit Y.one () habang mga node listahan ay maaaring nakunan gamit ang Y.all (). Gayundin Y.Node.create () ay lubhang kapaki-pakinabang sa mahusay na nagko-convert ng mga malalaking mga string ng teksto ng HTML sa mga DOM mga sangkap bago sa insertion.

Alamin sa pamamagitan ng halimbawa, gumamit ng isang CDN

Sa gamit Yui sa CDN naihatid library namin nagpasya upang maihatid ang lahat ng mga ari-arian sa proyekto sa pamamagitan ng CDN. Ito ay marahil sa susunod na pinakamalaking nag-aambag kadahilanan sa pagpapabuti ng pagganap.

Pub, sub paghihiyawan

Para sa mga karanasan programmer out doon, subukan na hindi matawa sa isang ito. Pag ginamit sa pagsulat kaunti pa kaysa sa mga plugin sa nakaraan, ako ay walang ideya kung paano ang mga aplikasyon ay dapat makipag-usap sa loob. Kahit pagkatapos ng pagbabasa ng "Custom Kaganapan ay nagbibigay-daan sa mong i-publish ang mga kagiliw-giliw na mga sandali o mga kaganapan sa iyong sariling code upang ang iba pang mga bahagi sa pahina ay maaaring mag-subscribe sa mga kaganapan at tumugon sa kanila," ko pa nasagot ito.

Bilang ito ay lumiliko out, pasadyang kaganapan Yui publish-at-subscribe modelo ay gumagana maganda para maki-klase at maki-bagay na komunikasyon. Maaari ka ring mag-subscribe pre at post sa mga kaganapan at isama ang dynamic na lohika upang sugpuin ang bulubok batay sa ilang mga kundisyon.

Isama ang pinakamahusay na kasanayan sa iyong workflow

Paggamit ng Eclipse nagawa naming isama JSLint at Yui tagapiga sa ang bumuo ng proseso. Ilagay lamang, ang bawat oras na pindutin mo ang Ctrl / cmd + S ang iyong code ng JavaScript ay napatunayan na at optimize. Na nangangahulugan na ikaw ay pagsubok laban sa sinulit, produksyon ng code grado mula sa unang linya ng code. Ito ay nangangahulugan na hindi mo kalimutan na-optimize sa nagkakanggagalit huling lahi sa paghahatid ang deadline.

Learning Yui sa trabaho

Bagaman ang lahat ay may iba't ibang estilo sa pag-aaral, Akala ko Gusto kong ibahagi ang kung ano ang mga mapagkukunan na ginamit ko upang malaman Yui sa isang tiyak na layunin sa isip.

• Panoorin ang mga kaugnay na mga episodes ng Yui Teatro upang makakuha ng isang pangkalahatang pangkalahatang-ideya ng library o dagdagan ang isang tiyak na module. Maaari ko mataas na pinapayo na nagsisimula sa:
  • Eric Miraglia Maligayang pagdating sa Yui 3
  • Ang Todd Kloots sa Yui 3 Sugar
  • Matt Sweeney Yui 3 Pagganap
  • Lucas Smith debugging sa Yui 3
  • Ng Isaac Schlueter sa paglutas ng mga problema sa Yui 3
  • Eric Ferraiuolo sa Web App Development na may Yui 3
  • Lucas Smith Kaganapan umunlad
• Basahin up sa Yui sa Yahoo! Developer Network . Subukan ko na basahin ng kaunti ang bawat linggo at matuto nang higit pa sa bawat oras na ko muling-basahin ito.
• Basahin ang API babasahin. Kung hindi mo mahanap ito sa Yui Teatro o sa Network ng Developer, maghukay sa API. Nagbabayad kahit na ito na basahin ang code direkta.
• Magbasa at mag-post ng mga tanong sa forum sa YUILibrary.com .
• Maglaro ng maraming at magsaya!

Konklusyon

Yui 3 ay isang buong itinampok, mature at patuloy na umuusbong library na angkop para sa mga maliliit na sa malaking proyekto. Tulad ng mga web application sa harap dulo maging mas kumplikado, ang pangangailangan para sa mga aklatan tulad Yui ay lalaki. Habang para sa ang uninitiated maaari itong maging isang daunting karanasan sa una, kung dumikit sa mga ito ikaw ay gagantimpalaan.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

YUIConf 2010 nagbebenta Out; hayag Dalawang Espesyal na Kaganapan gabi

YUIConf 2010 ay nabili na! Salamat sa lahat na nakarehistro - masaya naming inaabangan ang panahon upang makita ang lahat ng sa iyo noong Nobyembre. Kami ay ngayon paglagay ang huling touches sa aming mga iskedyul, ngunit maaari mong gawin ang isang silip sa kung ano ang mayroon kami sa tindahan dito: http://yuilibrary.com/yuiconf2010/schedule.php .

Highlight isama ang:

• Ang isang Node.js subaybayan kung saan maaari mong ramp sa lahat ng mga kapanapanabik na mga bagay na nangyayari sa server-side JavaScript. Mayroon kaming Node.js lumikha Ryan Dahl pagtatanghal at pag-upo sa isang panel ng tungkol sa hinaharap ng frontend engineering, at mayroon kaming Yui sa Dav Glass, isa sa mga unang upang ipakita ang node-based umuunlad pagpapahusay gamit ang off-the-istante bahagi ng library (mula Yui 3), ipinapakita kung ano ang hinaharap ng mukhang.
• Isang YQL track upang makakuha ng sa iyo upang mapabilis sa kung paano pagkilos YQL upang ma-access ang data mula sa kahit saan sa Internet. Ang YQL koponan mismo ay sa kamay sabihin sa iyo tungkol sa kanilang mga pinakabagong trabaho.
• Kaso pag-aaral na ilantad kung paano ang real-mundo na mga proyekto ipatupad Yui sa demanding ng mga kapaligiran ng produksyon. Mga inhinyero mula sa Flickr at Yahoo! Mail ay sa kamay, at Eric Ferraiuolo - nagwagi ng isang PayPalX na premyo para sa kanyang mga kamakailang trabaho - ay dito upang makipag-usap tungkol sa Tip sa Web , ang kanyang pinakabagong Yui 3-based na proyekto.
• Insightful pagtatanghal sa kung paano upang maihatid ang mga mobile / ugnay na karanasan.
• Deep dives sa Yui module, mula sa AutoComplete sa CSS Grids sa mga kontribusyon ng Gallery.

Lahat ng sesyon ay naka-archive sa video at magagamit sa Yui Teatro ilang sandali matapos ang conference.

Kami ay nasasabik sa sumali sa pwersa sa Yahoo! Developer Network upang mag-host ang dalawang espesyal na mga kaganapan ng gabi na ay bukas sa publiko sa pangkalahatan. Ang upang bagaman conference ay nabili na, sinuman ay maaaring dumalo sa mga kaganapan ng gabi sa pamamagitan ng pag-sign up sa Meetup.com. Space ay limitado, kaya mag-sign up sa lalong madaling panahon! (Ang mga mga dadalo YUIConf hindi kailangan mag-sign up.)

YUIConf 2010 Panel Usapan: "Ang Hinaharap ng Web Development" na tagapamagitan sa pamamagitan ng Ben Galbraith at Dion Almaer ang
Nobyembre 8, 2010, 6:30 - 8 pm

Mag-sign up na dumalo sa panel discussion sa http://www.meetup.com/BayJax/calendar/15239592/ .

YUIConf ay nagdala ng sama-sama ang ilustre panel na ito upang galugarin ang malapit na hinaharap ng disiplina sa panahon ng malaking pagbabago. Naka-iskedyul panelists ay kinabibilangan ng sa Elaine weri, founder at frontend arkitekto sa Meebo; ang Douglas Crockford, JavaScript arkitekto sa Yahoo!; Tantek Çelik, teknologo at may-akda; Ryan Dahl, lumikha ng Node.js; Joe Hewitt ng Facebook, lumikha ng Firebug at isa sa mga pinaka-download ng mga mobile na mga aplikasyon ng lahat ng oras (Facebook para iOS); Thomas Sha, Yui founder sa Yahoo!.

YUIConf 2010 tono: "Kinabukasan Project" sa pamamagitan ng Douglas Crockford
Nobyembre 10, 2010, 6:30 - 8 pm

Mag-sign up na dumalo ang mga pangunahing tono sa http://www.meetup.com/BayJax/calendar/15239717/ .

Sa software na pag-unlad, panaginip namin tungkol sa architecture. Ito ay ang tunay na kuwento ng tulad ng isang panaginip.

Pag-upo ay limitado para sa mga espesyal na kaganapan, kaya siguraduhin na mag-sign up sa lalong madaling panahon!

Mga CC larawan:

• Dion Almaer: http://www.flickr.com/photos/seanosh/3306058997/
• Tantek Çelik: http://www.flickr.com/photos/thomashawk/409672754/
• Ryan Dahl: http://www.flickr.com/photos/blank22763/4089950858/
• Elaine weri: http://www.flickr.com/photos/drewm/3016944830/
• Ben Galbraith: http://www.flickr.com/photos/seanosh/3306056383/

Mga larawan na ginamit sa pamamagitan ng uri pahintulot:

• Douglas Crockford: http://www.flickr.com/photos/allenr/4482834276/
• Douglas Crockford: http://www.flickr.com/photos/allenr/4341338168/

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Hayag Yui 2.8.2 - Mahalaga Security Update para sa lahat ng mga gumagamit ng Yui 2.4.0-2.8.1

Ang Yui koponan inilabas Yui 2.8.2 ngayon. Ang release Ito corrects isang seguridad-kaugnay na sira na ay ipinakilala sa ang Yui 2 Flash simula bahagi imprastraktura sa release Yui 2.4.0. Sira na ito ay nagbibigay-daan sa JavaScript iniksyon nagsasamantala na ginawa laban sa mga domain na ang host apektado Yui .swf file. Bisitahin ang pahayagan ng seguridad para sa ang Yui 2.8.2 para sa kumpletong detalye tungkol sa kung paano makilala at palitan ang mga apektadong mga file .

Kung ang iyong site ay nagho-host ng pamamahagi Yui 2 sa pagitan ng bersyon 2.4.0 at 2.8.1 na kasama ang mga file na ito, ito ay apektado ng ito kahinaan.

Kung ang iyong site na naglo-load na ang Yui 2 mula sa Yahoo sa CDN ( yui.yahooapis.com ) o mula sa Google CDN ( ajax.googleapis.com ) na, at ang mga file ay hindi naka-host sa iyong sariling domain, hindi ka apektado. Yui 3 ay hindi apektado ng isyung ito.

Maaari mong i-download ang Yui 2.8.2 (at patched bersyon ng Yui 2.4.0-2.8.1) mula sa pahina ng YUILibrary.com download .

Tingnan ang seguridad na paunawa para sa impormasyon tungkol sa kung paano upang matukoy kung ang iyong site ay apektado, kung paano malunasan ang problema, at kung paano i-verify ang pag-aayos.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Sa Gallery Yui 3: Extension para sa SVG, Nilikha para sa SVG Wow!

Pagpapakilala

SVG ( scalable Vector Graphics ) ay nagbibigay ng isang paturol syntax para sa interactive, animated 2D graphics: mga hugis, mga imahe at teksto. Ang SVG support ay bahagi ng ang HTML 5 detalye at SVG ay ipinatupad sa pamamagitan ng lahat ng mga pangunahing browser, kasama ang Microsoft Internet Explorer sa bersyon 9 .

Ang SVG-wow.org web site showcases kung ano ang maaaring gawin sa SVG ngayon. Ang mga demo sa web site na ito ay nilikha para sa SVG Buksan ang conference, kung saan ang SVG Wow! sesyon ng isang tradisyon para sa ilang mga taon. Ang SVG Wow! Ang mga sesyon ay nagsimula sa pamamagitan ng Dean Jackson, at pagkatapos ay sa pakikipagtulungan sa aking sarili at pagkatapos ay patuloy sa pamamagitan ng Erik Dahlstrom . Erik at ako collorated sa session para sa 2009 at 2010 edisyon ng ang conference.

Para sa nakaraang dalawang taon, ang mga demo increasingly ginamit mga frameworks AJAX, paglalapat ng kanilang mga mga tampok sa SVG sa halip ng (o sa karagdagan sa) HTML. Yui ay ang pinaka-malawak na ginamit framework sa web site, na gumagamit ng parehong ng Yui 2 at Yui 3 .

Kukunin ko magsimula sa isang mabilis na pangkalahatang-ideya ng SVG at pagkatapos ay talakayin ang uri ng mga demo na Yui suportado at sa mga extension ko na idinagdag sa ang Gallery Yui 3 upang gawin itong gumagana sa SVG. (Mga extension na ito ay malayang gamitin sa ilalim ng mga tuntunin ng BSD lisensya Yui .)

SVG pangkalahatang-ideya

Tulad ng HTML, SVG ay isang W3C detalye. Ito ay nagbibigay ng isang syntax para sa naglalarawan ng mga pangunahing hugis (parihaba, bilog, linya, polygon, ellipses, polylines), arbitrary hugis (inilarawan sa mga tuntunin ng mga segment ng landas na maaaring maging ng mga linya, parisukat o kubiko Bezier curves), teksto at mga imahe.

Ang mga sumusunod na imahe ay isang screen makunan ng kahaliling Halimbawa stylesheet sa SVG-wow.org at nagpapakita ng ilang mga mga SVG tampok sa paglalaro: mayaman rendering (epekto ng anino, gradients, pattern) at mga simple at kumplikadong hugis.

Dahil ang mga SVG mga imahe ay natukoy sa mga tuntunin ng mga katangian ng geometry at rendering, ito ay posible na render sa mga ito sa anumang resolution. Bilang isang resulta, SVG imahe ay maaaring scale sa anumang laki habang napananatili ang isang mataas na kalidad ng rendering, halimbawa kapag paglilimbag (hindi hihigit tulis-tulis gilid).

Ang mga sumusunod na naka-zoom-in view ng nagpapakita sa parehong SVG imahe na ipinapakita mas maaga ngunit nai-render sa isang mas mataas na resolution habang pagpepreserba ang mataas na kalidad.

Tulad ng HTML, SVG sumusuporta interactivity: posible upang idagdag ang mga tagapakinig ng kaganapan sa mga graphic na bagay para sa mga pakikipag-ugnayan ng mouse o keyboard. Siyempre, ang SVG sumusuporta Dokumento Modelo Bagay, na ginagawang madaling upang manipulahin ang ibang mga katangian ng mga graphical bagay, tulad ng kanilang geometry o estilo ng rendering.

May ay isang pulutong sa ang detalye ng SVG: advanced rendering estilo (stroking, pagpuno, pattern, gradients), ang mga filter na epekto (blurs, anino, kulay matrices), CSS styling, mga advanced na mga tampok ng teksto (tulad ng teksto sa isang path) at deklaratibo animation . Maaari mong suriin ang mga sanggunian sa dulo ng post na ito upang madagdagan ang nalalaman tungkol sa SVG format tampok.

SVG at HTML

Sa HTML5 , ay maaaring ng SVG inlined sa HTML dokumento nang walang karagdagang linggal. Ang browser ay nagsisimula upang suportahan na tampok (hal., Firefox 4 ). Para sa Pansamantala, ang lahat ng mga pangunahing mga browser na sumusuporta sa ng SVG inlined sa XHTML, na nagbibigay ng parehong pag-andar. Ang SVG sa XHTML ay nangangailangan lamang na mga namespaces ay maayos ipinahayag.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         ....
     </ Head>
     <body>
         <h1> Inline SVG </ h1>

         <SVG xmlns = sa "http://www.w3.org/2000/svg" bersyon = "1.1"
          xmlns: xlink = "http://www.w3.org/1999/xlink ang"
          width = "100%" taas = "100%" id = "backgroundSVG">
             <-! SVG nilalaman dito ->
         </ SVG>
     </ Body>
 </ Html>
        

Ang lahat ng mga sample code sa pahinang ito ay gamitin ang paraan na ito ng inlining SVG sa XHTML.

SVG at Yui

Ang SVG sumusuporta paturol animation. Halimbawa, maaari mong animate na radius ng isang <circle> elemento tulad nito:

 <circle cx="50" cy="100" r="40">
     <animate attributeName="r" values="40,60,20,40" dur="1.5s" />
 </ Bilog>
       

Ang <animate> tag ay hiniram mula sa specification ang SMIL at, kasama ang iba pang mga elemento ng animation, ito ay nagbibigay ng isang napaka-makapangyarihang engine animation sa SVG.

Sa kasamaang palad, hanggang kamakailan-lamang, ang browser na suporta para sa SVG animation ay kalat-kalat. Ito ay napabuti sa nakaraang dalawang taon, ngunit Microsoft ay ginawa ito malinaw na ito ay hindi sumusuporta sa ng paturol SVG animation sa IE 9.

Bilang isang resulta, ang karamihan ng mga demo sa ang SVG-wow.org na web site gamitin scripted animation sa halip ng paturol animation. Sa isang dako, ito ay kapus-palad dahil ang ang paturol animation ay mas mahusay kaysa sa scripted animation. Sa tuwad, scripted animation ay maaaring maging lubhang naibabagay sa mga pangyayari, at gumana sila sa buong pagpapatupad napakahusay.

Ang pangangailangan para sa isang mahusay na scripted animation solusyon ay kung ano ang kawan ang paggamit ng Yui sa mga SVG-a demo. Gayunpaman, ang mga demo ring gamitin ang iba pang mga tampok ng Yui, sa partikular ang tagapagsakay at mga module ng node .

Animating SVG sa Yui

Ang mga demo sa SVG-a gamitin ang Yui upang lumikha nababanat dram beats , morphing hugis o umiikot na text at mga hugis halimbawa. Paggamit Yui sa SVG na kinakailangan ng ilang extension sa Yui; Kukunin ko ilarawan ang mga ito sa loob lamang ng isang sandali.

umiikot na text at mga hugis	morphing hugis
nababanat dram beats

Ang mga sumusunod ay naglalarawan kung paano Yui pagdating sa madaling gamitin na lang magpasaya at manipulahin ang mga SVG graphics.

Animating ang SVG transform attribute

Lahat SVG graphical na mga elemento ay may isang transform attribute. Ang katangian na tumutukoy ng 2D affine na pagbabago sa mga elemento, na kung saan ay maaaring gamitin upang masukat, hilig, pumihit o isalin.

Ang SVG-wow.org Yui extension para sa SVG ay nagbibigay-daan sa animating ang transform katangian tulad nito:

 var anim = bagong Y.Animate sa ({
     node: '# circleA',
     mula sa: {
         ibahin ang anyo: {TX: 0, Ty: 0, sx: 2, sy: 2}
     },
     sa: {
         ibahin ang anyo: {TX: 20, Ty: 20, sx: 1, sy: 1}
     },
     transformTemplate: "isalin (# TX, # Ty) scale (# sx, # sy)",
     tagal: 1
 });
        

Tingnan ang mga mga Transform animation pagsubok.

Ikaw tandaan na ang Transform halaga ay tinukoy sa mga tuntunin ng "bahagi" (tulad ng tx o ty ) na pinagsama upang bumuo ng isang halaga gamit ang transformTemplate natagpuan sa ang configuration ng animation ng bagay.

Ang template ay isang nababaluktot na mekanismo para sa pagbuo ng ibahin ang anyo ng halaga habang ang mga hiwalay na mga bahagi madaling upang kalkulahin ang mga animated halaga. Ito ay isang halimbawa kung saan ang ang Yui animation modelo pinapayagan higit pang kakayahang umangkop (at mas makahulugan kapangyarihan) kaysa sa SVG ng elemento SMIL animation ( animateTransform ). Upang lumikha ng animation na inilarawan sa itaas, ang katumbas SMIL na deklarasyon ay hindi:

 <circle ...>
     <AnimateTransform attributeName = "Transform" type = "pagsasalin-wika"
                       mula sa = "0,0" sa = "20,20" dur = "1s" magsimula = sa "scaleAnim.begin" />
     <AnimateTransform id = sa "scaleAnim" attributeName = "Transform" type = "scale"
                       mula sa = "2,2" sa = "1,1" dur = "1s" magsimula = "malabo" />
 </ Bilog>
        

Tandaan kung paano sa itaas na snippet ay nangangailangan ng mga maramihang animateTransform elemento na may mai-synchronize: ang begin katangian ng unang animation ay nakatakda sa scaleAnim.begin upang i-synchronize ang simula ng dalawang animation. Ang isang magandang tampok ng ang Yui animation engine ay na ang tiyempo ng isang animation (ibig sabihin, umpisa, katapusan at tagal) maibabahagi na mag-aplay sa mga katangian ng maramihang mga sangkap.

Ang Yui extension para sa animating SVG transforms ay ginagamit malawakan, tulad ng sa camera at animated lyrics halimbawa. Ang dating ay gumagamit ng isang extension ng Yui 3 habang ang huli ay gumagamit ng isang extension ng Yui 2.

Animating geometry

Basic geometry

Animating SVG geometry sa Yui ay medyo simple. Ang sumusunod na halimbawa animates isang <rect> lapad, taas at sulok radii na elemento ng:

 var anim = bagong Y.Animate sa ({
     node: '# rectA',
     mula sa: {
         lapad: 200,
         taas: 100,
         rx: 5,
         ry: 5
     },
     sa: {
         lapad: 300,
         taas: 100,
         rx: 10,
         ry: 10;
     },
     tagal: 2,
     easing: Y.Easing.elasticOut
 });
        

Tingnan ang mga animation ng hugis pagsusulit.

Tulad ng tinalakay sa paglaon, ang ilang mga pagbabago sa ilalim ng hood Yui ginawa sa trabahong ito. Subalit mula sa pananaw ng isang developer, ang animation na ito gumagana ang eksaktong parehong paraan na ang animation ng anumang iba pang mga katangian na HTML o CSS na ari-arian.

Ang <path> ng d attribute

Isa geometry attribute ay isang maliit na espesyal na: d attribute sa ang <path> elemento. Ang <path> elemento ay ginagamit para sa sino kumplikadong geometry. Isang <path> maaaring ilarawan ang anumang hugis. Nito d katangian naglalarawan nito geometry sa mga tuntunin ng mga segment ng landas na maaaring maging ng mga linya, arcs, parisukat o kubiko Bezier mga curves (may mga ilang mga utos, ngunit ang lahat ng mga ito mapa sa Bezier curves).

Animating ang d attribute kinakailangan ding isang bit ng extension sa animation engine Yui, ngunit may extension na iyon, ang d attribute ay maaaring animate tulad ng anumang iba pang, tulad ng ipinapakita sa ibaba.

 var anim = bagong Y.Animate sa ({
     node: "# pathA",
     mula sa: {d: "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"},
     sa: {d: "M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z"},
     tagal 1s,
     easing: Y.Easing.bounceBack
 });
        

Tingnan ang animation ng path pagsusulit, na nagpapakita, bukod sa iba pang mga bagay, ng isang tseke markahan morphing sa isang krus sa paglipas ng panahon, bilang kinakatawan sa mga sumusunod na mga imahe.

Ang Gandhi demo d quote ay gumagamit ng ito pamamaraan ng animating ang d attribute sa morph hugis sa Gandhi ng figure.

Animating iba pang SVG katangian

Siyempre, Yui animation ay hindi limitado sa mga katangian geometry. Ng attribute Maaari anumang SVG-animate. Halimbawa, ang mga sumusunod na animation animates ang lumabo radius sa isang pahalang na lumabo filter.

 / / SVG snippet
 <Filter ...
     <FeGaussianBlur id = sa "blurFilter" stdDeviation = "10 10" ...  />
 </ Filter>

 / / JavaScript animation
 var anim = bagong Y.Animate sa ({
     node: '# blurFilter',
     mula: {stdDeviation: [0, 20]},
     sa: ng {stdDeviation: [0, 0]}
 });
        

Tingnan ang mga filter animation pagsusulit. Ang mga sumusunod na imahe ay nagpapakita kung paano animating isang Gaussian lumabo ay maaaring gamitin sa paglipat sa pagitan ng mga pindutan ng estado.

Ang uri ng epekto na ito ay ginagamit sa mabilis na demo ng epekto ng lumabo , kahit demo na hindi gamitin Yui animation ngunit deklaratibo na SMIL animation elemento (sa gastos ng tumatakbo lamang sa mga browser na sumusuporta na ang tampok na, gaya ng ipinaliwanag mas maaga).

Animating katangian ng CSS

Tulad ng HTML, mga SVG elemento ay may katangian at din CSS katangian. Ang SVG may ilang tiyak na mga katangian ng CSS . Ang mga katangian na ito ay maaaring maging animated, paminsan-minsan upang lumikha ng mga kamangha-mangha epekto. Halimbawa, ang stroke-dashoffset ari-arian ay maaaring gamitin upang gayahin ang pagguhit ng isang hugis.

 / / SVG snippet
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScript
 var anim = bagong Y.Animate sa ({
     node: "# rectA",
     : {'stroke-dashoffset na': 0},
     tagal: 0.25
 });
        

Tingnan ang stroke animation pagsusulit.

Ang graffitis demo gumagamit ng pamamaraan na ito (kahit na walang Yui animation) at kaya ang ang camera demo (oras na ito sa Yui animation).

Yui at SVG: Sa ilalim ng hood

Ang SVG-wow.org web site ay gumagamit ng parehong ng Yui 2 at ang Yui 3 at may mga SVG-tiyak na extension para sa parehong. Ang sumusunod na seksyon ng artikulong ito ay nakatutok sa ang Yui 3 extension.

Extension ay kinakailangan upang:

• gumawa ng ang Yui trabaho sa SVG ng specificities DOM
• account para sa mga pagkakaiba sa pagpapatupad
• magdagdag ng suporta para sa mga bagong uri ng katangian tulad ng SVG transforms
• magdagdag ng karagdagang animation tiyempo at mga tampok ng synchronization

Accounting para sa SVG Specificities DOM

Tulad ng inilarawan mas maaga, ang mga SVG katangian ay maaaring-animate sa deklaratibo mga elemento tulad ng <animate> . Upang suportahan sa SVG ng animation modelo, ang mga mga SVG attribute halaga hawakan parehong isang animated at isang batayang halaga. Halimbawa, ang r attribute sa isang <circle> elemento ay isang SVGAnimatedLength tinukoy bilang mga sumusunod:

 interface SVGAnimatedLength {
  readonly attribute SVGLength baseVal;
  readonly attribute SVGLength animVal;
 };

As a result, even in implementations that do not support declarative animation, we need to reach down to the baseVal to read an attribute's value:

var circle = document.getElementById('#myCircle');
var rValue = circle.getAttribute('r').baseVal.value;

Extensions were needed to allow the animation engine to account for the SVG attributes' unusual value model. Thankfully, YUI 3 has a concept of animation behaviors . Behaviors are essentially attribute-specific hooks, and it was fairly easy to add support to handle SVG attribute values. For example, SVGAnimatedLength attributes are handled like so:

var lengthBehavior = {
    set: function (anim, att, from, to, elapsed, duration, fun) {
        // SVG specific handling
     },

    get: function (anim, attr) {
        // SVG specific handling
     }
 };

// Handle <circle>'sr attribute
Y.Animate.behaviors.r = lengthBehavior;

There are more extensions for other SVG attributes values such as the transform attribute, color attribute values (like fill , stroke or stop-color ) and attributes such as stdDeviation mentioned earlier.

A few similar tweaks were required, for example in the Y.Node.prototype.toString method, again to account for SVG's baseVal (this time on the className node property). Another example is the default node setter in the Node module.

Accounting for browser differences

While the previous extensions are required because of specification differences between HTML and SVG, the following are required because of implementation variations between browsers.

SVG has a special category of attributes called presentation attributes . In implementations also supporting CSS styling (which all browsers support), these presentation attributes are really just another way to specify a CSS property with a low specificity . From the SVG specification:

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or 'style' attributes.

Unfortunately, some browsers do not implement the specification correctly and window.getComputedStyle does not always account for all possible sources for setting the SVG CSS properties: CSS selectors, style attribute and presentation attributes.

YUI came to the rescue thanks to the Node module which could be extended to hide these browser differences. The Y.DOM.CUSTOM_STYLES and the Y.Node.prototype.getComputedStyle could be extended to offer a uniform way to read SVG style properties.

Extending Y.DOM

YUI wraps all DOM access through the Node interface. As a result, some SVG specific DOM methods, such as getBBox (used to compute the bounds of an SVG element), are not accessible on the wrapped object.

To make things easier to program for SVG, extensions to the default Y.DOM module (which Node uses) were added to either expose SVG DOM features or add convenience methods, commonly needed when manipulating content:

• firstElement/lastElement/prevElement/nextElement/removeAllChildren (not SVG specific)
• getMatrix/setMatrix . Provides an easy way to manipulate transforms on SVG elements, something notoriously difficult with the standard SVG DOM
• getBBox/getViewportBBox provide simple ways to access bounding box in the element's coordinate system or in viewport space.
• loadContent . A utility to insert a DOM fragment described using a JavaScript object literal. Halimbawa:

  myNode.loadContent({
      tag: 'g',
      fill: 'red',
      stroke: 'none',
      children: [{
          tag: "rect",
          x: 10,
          y: 10,
          width: 200,
          height: 300
      }, {
          tag: 'circle',
          r: 10,
          cx: 105,
          cy: 155
      }, {
          tag: 'image',
          'xlink:href': 'images/photo.png',
          width: 200,
          height: '300px'
      }, prevSibling);
          

  is a shorthand for making various DOM calls (such as createElementNS , setAttributeNS and appendChild ) to create a g element and its children and inserting it before prevSibling under myNode . The utility deals with namespaces for attributes and elements.

Additions to the Animation engine for timing and synchronization

Many, if not most effects involving animation require multiple choreographed animation instances. Typically, several animations are required to create a desired effect, and the start or end of animations depend on each other, sometimes with a time offset: animations need to be synchronized.

For example, if you have a set of shapes which need to fade in one after the other, you will need to create a fade animation for each element and then chain their start time with a slight offset.

var chained = Y.all('#chained circle'),
    firstAnim, previousAnim;

chained.each(function (circle) {
    var anim = new Y.Animate({
        node: circle,
        from: {'fill': 'white'},
        to: {'fill': 'gray'},
        duration: 0.25
     });
    if (previousAnim !== undefined) {
        // Synchrnoize the start of anim to be 0.15 seconds after the begining
        // of the previous circle's animation (previousAnim).
        previousAnim.onBegin(anim, 0.15);
    } else {
        firstAnim = anim;
     }
    previousAnim = anim;
 });

// Start the first animation 1s after a click on any of the circles.
// Note that this is an extension to the default YUI run method which does not
// take a time offset.
chained.on('click', function () {
    firstAnim.run(1);
 });

See the time offsets tests.

The method onBegin makes it easy to synchronize the start of two animations, with an optional time offset. Actually, onBegin can also invoke a function with a time offset. Likewise, the onEnd extension makes it easy to synchronize with the end of an animation.

By default, YUI animations have events which provide a way to synchronize. The onBegin and onEnd methods express the synchronization more concisely (a similar example of conciseness is shown below).

In addition, it is sometime necessary to synchronize an animation with an event, again with a time offset. The beginOn and endOn extensions allow us to express that. Halimbawa:

anim.beginOn(Y.one('#button'), 'click', 0.5);

will start the animation 0.5s after the element with id 'button' was clicked. This is a short-hand for:

Y.one('#button').on('click', function () {
    setTimeout(500 /* ms */, function () {anim.run();});
 });

A final extension made to the animation class was the ability to make an animation object apply its first frame's state before it was actually started. This is often needed when creating animation effects involving multiple animations which start at different time offsets.

var anim = new Y.Animate({
    node: Y.one('#button'),
    from: {r: 30, 'fill-opacity': 0, color: 'crimson'},
    to: {r: 80, 'fill-opacity': 1, color: 'gold'},
    duration: 0.25
 });

// the following will set the desired state on the target object prior to
// actually starting the animation.
anim.applyStartFrame();
anim.run(2);

The picture shuffle demo uses animation offsets for the effect that spreads the stack of pictures or puts the pictures back in a stack.

Konklusyon

Working with SVG and YUI, and in particular YUI 3, has been a very enjoyable experience: a lot of the YUI functionality applies to SVG right out of the box and YUI's extensible architecture made it possible to work around occasional issues and to add desired functionality.

Of course, increased standard support for SVG in YUI would be helpful, in particular making YUI work with stand alone SVG documents and making the Node class wrap SVG elements without workarounds.

There are also a few enhancements that would be helpful. For example, it would help if animations could target multiple elements. Likewise, supporting multiple values (as in the <animate> SVG element for example) would be helpful to create more sophisticated effects.

The demos on svg-wow.org were written for YUI 3.1 and ported to 3.2 for the purpose of this blog. In 3.2, transitions were introduced which make use of native CSS transitions if available in the browser. It might be possible for the YUI animation engine to similarly leverage SMIL animation where available (Opera, Firefox and WebKit at the time of this writing) which should also yield performance improvements.

The SVG extensions on the svg-wow.org web site are available as a YUI 3 Gallery module for those who want to enjoy the fun of working with YUI and SVG.

Mga sanggunian

• SVG Wow!
• SVG Specification
• SVG Tutorial
• Adobe's SVG Zone (a little dated, but still has good examples)
• carto.net examples
• KevLinDev

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

In the Wild for October 15, 2010

YUIConf 2010 is right around the corner , and we continue to have our heads down working on that event and the upcoming YUI 3.3.0 release. In the meantime, here's what we've noted in the community in the past few weeks. Let us know @yuilibrary (or in the comments below) what we missed!

• Andrew Wooldridge, “Learning YUI: Pt. 2 – Community, Logging, and the Console” : Andrew Wooldridge (@triptych) is back with part 2 of his new “Learning YUI” blog series. I particularly like (and agree with) his take on the YUI community: “In a word, community is really what makes YUI stand out to me as a javascript library. If you need help working with YUI, there are community forums , an IRC channel , as well as Open Hours that allow you to talk directly with YUI developers. I would recommend that you get connected early on in your learning experience, especially with the IRC channel because you will discover a helpful group of smart folks hang out there and are willing to answer any question, no matter how seemingly mundane. You also should follow yuilibrary on twitter as you will be tapped into the latest YUI news there.” Check out the full blog post for more . I covered part one in a previous “In the Wild” column . #
  
• Andrew Burgess's “Crash Course” on YUI 2 Grids on NetTuts : Andrew Burgess's “Crash Course” on YUI 2 Grids, which we first noted in May last year , has been picked up by NetTuts and is bringing a new wave of attention to what has historically been one of YUI's most popular projects. #
  
• Create a BlogRoll with Google Spreadsheets and YUI3 : Andrew Wooldridge (@triptych) continues his series of YUI 3-focused articles with a new entry that ties together YUI 3 and Google Docs. “I admit it: I was inspired by this article by Codeinfront.com. The idea of creating a snippet of code that anyone can share, update, and learn from is just extremely compelling and gratifying. So, I offer to you something that you may have never thought of. You can use Google Spreadsheets as a JSON data source. YUI3′s JSONP module talks very nicely to this JSON data source and allows you to essentially create sites that can be data driven and yet never require you to have a complicated PHP MyAdmin setup or MYSQL database. You can do it all via client-side technologies and some help from Google Spreadsheets. If you combine this with the Forms ability in G Spreadsheets, you could even create a cool report page based on some survey you create. Let's get down to code.” Get down to code with the full blog post here #
  
• Video Remixing Site Dragontape Using YUI 3 : Video remixing site Dragontape is making extensive use of YUI 3. Here's how the site's authors describe the project: “Dragontape is a webapp that enables you to create mixtapes of your favorite online videos, so you can watch them as a continuous show. The tapes you create are accessed through a single URL, so you can easily share with friends or embed them in a webpage. The source clips remain in their original locations, Dragontape simply remembers where to find them.” #
  
• Erik Eldridge, “Simple YUI 3 Module for Yahoo! Login” : YDN evangelist Erik Eldrige has written up a nice tutorial on his personal blog that shows you how to leverage YUI 3 and Yahoo!'s OpenID system simply and efficiently. Writes Erik: “Looking at the OpenID landing page on the YDN site might give the impression that logging users into a site with a Yahoo! ID is difficult. Given the following conditions, however, adding Yahoo! login to your site can be quite simple:
  1. Because we're only targeting Yahoo! accounts, we can preset the login location to https://open.login.yahooapis.com/openid/op/auth
  2. If we log users in via a popup, but manage everything via JavaScript on the parent page, we can skip validation of the response coming back from Yahoo!”
  You can find the full tutorial here . #
  
• Upstage, a New YUI 3-powered HTML5 Presentation System by Reid Burke : @Reid is just getting this project underway, but there's a lot to like already. Following in the footsteps of a series of standards-based presentation tools that have launched in the last few years, Upstage puts a YUI 3 twist on the genre. Code is on GitHub — download, fork, and have fun. ( Original source. ) #
  
• A Simple Twitter Widget with YUI 3 and YQL (by @codeinfront) : @codeinfront has posted a new tutorial on using YUI 3 and YQL in a Twitter mashup. “While in between projects I've been playing around with JavaScript dates including conversion to relative time. This then lead me to testing the function within a Twitter widget context. I ended up with a Twitter widget using YUI 3 and YQL. The code below explores a couple of interesting concepts…” Check out the blog post for full details . #
  
• “YUI, How Dare You Make Me Rethink…” : Michigan Techie writes that YUI 3 is designed to break bad habits and challenges him to find new, hopefully better coding patterns. “When you use YUI3 you have a YUI().use() and everything gets encapsulated within that bit of code. So if I were to just move the MyApp code into the YUI block I'm no longer able to access it from the page of content I want to run JS on. So this is good, no JS globals, but it's bad…not the way I've been doing things.” You can see MT's full epiphany here . #
  
• Jeez.eu on Building a Custom Search Engine with YUI : Jeez.eu's tutorial on building a custom search engine relies heavily on YUI 2 widgets and utilities. #
  
• Node.js Resource List from @codeinfront Includes Crockford, Dav Glass : Blogger Mark Rall (@codeinfront) has compiled a set of his favorite Node.js-related resources. Key among them are two recent YUI Theater talks from Douglas Crockford and Dav Glass. For his other favorites, head over to his blog . #
• ErisDS Has Updated Her Carousel Custom-navigation Example for 2.8.x : Northampton blogger ErisDS has updated her work on custom navigation for YUI 2 Carousel to support YUI 2.8.x. “Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.” Check out the full post here . #
  
• Tweet of the Week : From @bartt : “Being able to use #YUI on both client & server is so nice. JavaScript + my favorite library on both sides of the fence == !context switch.” #
  

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

YUIConf 2010: Early-bird registration ends this week

An awesome lineup is in place for YUIConf 2010 , which will be held at Yahoo!'s Sunnyvale, CA campus this November 8-10. Douglas Crockford will be back with a new talk entitled “Project Future”, and Dion Almaer and Ben Galbraith will be moderating a panel on the future of the discipline. We have a stellar lineup of speakers, including Christian Heilmann, Dav Glass, and Nicholas Zakas, taking the podium this year on topics spanning YQL, NodeJS, and YUI:

• An Introduction to YQL
• YQL + YUI: Building End-to-End Applications
• Building YQL Open Data Tables with YQL Execute
• Using (Not Abusing) YQL for Caching, Filtering and Collating Data
• NodeJS + YUI 3
• Using NodeJS and YUI 3 for Server or Browser Side View Rendering
• Avoiding Spaghetti Code with Server-Side JavaScript
• Understanding Progressive Enhancement with YUI: Write Less, Achieve More
• Internationalizing Applications Using YUI 3
• Editor: The Next Generation
• AutoComplete: Deep Space Nine
• The Journey from Idea to Functioning Widget in YUI 3
• Finger Tips: Lessons Learned From Building a Touch-Based Experience
• and much, much more!

Be sure to sign up this week to receive the early-bird rate of $35. After October 8, tickets cost $50.

For folks traveling from outside the Bay Area, we have made available Yahoo! rates at a couple nearby hotels. Check out http://yuilibrary.com/yuiconf2010/ for more details.

CC photo of Dion Almaer by seanosh on Flickr.

Update: The early-bird price was incorrect. Tickets cost $35 through October 8.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!