Things to use, find and share.
Christian Heilmann | http://icant.co.uk | http://wait-till-i.com Yahoo7 Open Session, Sydney, Australia April 2009 Hi there, I am Chris. I am right now on a pretty mental schedule giving talks down south. Last week I flew from home (London, UK) to Hong Kong, Taipei, drove to Hsinchu, back to Taipei, onwards to Sydney via Hong Kong, then to Melbourne and now back to Sydney. All with the mission to share good info to make web development easier. Doing that and not sleeping much does things to you. You see hidden messages. ...and you misinterpret others. I live in London, England Spring Summer
The snow flake that spells the end of public transport
*
Autumn Winter Summer Originally I am German FIRST! Humour. I ♥ building great interfaces to access and find data. And I love making them work for everybody. The problem is that for years it was quite a job to make this is a reality. Nowadays we are very lucky as developers. It is increasingly easy to develop great products. The trick is to build them with parts that are proven to work. And these parts are readily available for us. Over the last years a revolution happened. Companies and individuals started realizing the power of giving things out to the public. By allowing people to use your products and keep an open ear you have a great opportunity to improve them. And this is exactly what we do at the Yahoo Developer Network. / 0 1 2 3 4 5 6 7 8 9 : ;
! !
" "
3D3@GB67<5G2<
# BVSGOV]]2SdSZ]^S`7abVOb[OYSWb SOagT]`RSdSZ]^S`ab]PcWZRO^^ZWQO bW]\a O\R [OaVc^a GOV]] />7a ZSb RSdSZ]^S`a bO^ W\b] GOV]]¸a e]`ZR QZOaaRObOO\RW\T`Oab`cQbc`Sb]VSZ^ ^]eS`bVSW`PcaW\SaaSaO\RW\bSU`ObS RObO a]c`QSa W\ \Se eOga [OYW\U
$ bVSeSPO[]`ScaSTcZO\RW\bS`Sab $ W\U^ZOQST]`SdS`g]\S
/ 0 1 2 3 4 5 6 7 8 9 : ; 2SaWU\PgAbS^VO\2]c`Wa:cQOa>SbbW\ObW
/>7aA3@D713A8C:G &327B7=< 1/B35=@73AAG;0=:A
1 /22@3AA0==9 4/@316/A3 2"# 93:9== 5"# ;G0:=5:=5 2 >7>3A 3!" A7<5:3A75<=< ; D723=A3/@16 ;" /QQSaaO\Rc^RObSQ]\bOQbaW\caS`a¸GOV]]/RR`Saa 6SZ^b`OdSZS`aaQ]c`bVSESPT]`bVSPSabTZWUVbaV]bSZa 1`SObSO^^ZWQObW]\abVOb^`]dWRSQ][^O`Wa]\aV]^^W\U 0cWZRa]QWOZ\Sbe]`YW\UaS`dWQSa]\RS[O\R 1`SObS CaSbVWa^]eS`TcZQ][^]aWbW]\b]]Zb]OUU`SUObS /ZZ]eGOV]]caS`ab]caSg]c`aS`dWQSaeWbV]cbVOdW\U ASO`QVbVS7\bS`\SbT]`dWRS]QZW^a 0]]Ya aSS1]\bOQba O\R`S\bOZQO`abVOb[SSbbVSW`PcRUSbO\Rb`OdSZ O\R^`]RcQbaSO`QVTc\QbW]\OZWbg PORUSaO\ROQQSaacaS`OQbWdWbgRObO [O\W^cZObSO\R[OaVc^Q]\bS\bT`][O`]c\RbVSeSP b]Q][^ZSbS[cZbW^ZS`SUWab`ObW]\^`]QSaaSa aQVSRcZS 4O`SQVOaSaSO`QVSaR]hS\a]Tb`OdSZeSPaWbSa E3/B63@ 6" /`]dWRScaS`US\S`ObSRORdWQS]\O\gb]^WQ]\g]c`]e\ A7B33F>:=@3@ 0cWZRW\bS`OQbWdSaSZTQ]\bOW\SRRSaYb]^EWRUSba AOdSeSP^OUSaW\QZcRW\UTcZZbSfbQOQVSRQ]^WSa :]QOZWhSO\Rb`O\aZObSg]c`eSPaWbSbS[^ZObSaSOaWZg 5OW\Oc\W_cS^S`a^SQbWdS]\g]c`]\ZW\S^`SaS\QSeWbV eSPaWbS 477a /QQSaaW\T]`[ObW]\OP]cbg]c`aWbS E30A3/@16 :# 2SZWdS`bW[SZgTW\O\QWOZ\SeaO\RRObOb]g]c`caS`a :/<5C/5313`]dWRScaS`aeWbVOeWRSdO`WSbg]T\Sea`SZObSR ]T@AATSSRa^`]dWRSRPgGOV]] A=17/:27@31B=@GQ][W\Ua]]\ 2 O\RW\Q]`^]`ObSbVS`SacZbaW\g]c`O^^ZWQObW]\a 1`SObSZ]QObW]\OeO`SO^^ZWQObW]\aO\RaS`dWQSa 6! RSdSZ]^SRPgGOV]]T]`/QbW]\AQ`W^bRSdSZ]^S`a :7D3D723= Q]\bS\b 5WdScaS`abVSZObSabab]`WSaT`][acQV 2SdSZ]^`WQVO^^ZWQObW]\aPgOQQSaaW\UW\T]`[ObW]\ 1`SObSg]c`]e\P`]ORQOabQVO\\SZ 2Wa^ZOgVOQYO\R QObSU]`WSaOaCA E]`ZR\Sea>]ZWbWQa0caW\Saa @756B;327/ 9$ OP]cbcaS`aRWa^ZOg\O[SW\bS`SabaSbQ bVSW`Q]\bOQba 7!" [OaVc^ZWdSdWRS]ab`SO[a]\g]c`eSPaWbS]`RSaYb]^ G/>Q][W\Ua]]\ 4 : ; 4:719@ A^]`ba3\bS`bOW\[S\bO\Ra^SQWOZ`S^]`ba >O`bWQW^ObSW\]c`]^S\[SRWOSfQVO\USb]P`W\U[]`S O\RbVSW`Q]\\SQbW]\a /CB6 O^^ZWQObW]\ 0cWZR`WQVO^^ZWQObW]\abVOb`c\]\GOV]]eSPaWbSa BO^W\b]bVSe]`ZR¸a[]abW\bS`OQbWdSQ][[c\Wbg STTWQWS\QgdOZcSO\RabO\RO`RWhObW]\b]g]c`W\bS`OQbWdS 0cWZR^S`a]\OZWhSRSf^S`WS\QSaeWbVOQQSaab]caS` T]`^V]b]a 2SdSZ]^a][SbVW\UcaSTcZ]`Tc\T]`caS`a]`PcWZRO\ a^SQWTWQRObO aSS00OcbVO\R=/cbV <3EAA3/@16 :" ORdS`bWaW\UW\WbWObWdSa 3 1" AB/BCAQ][W\Ua]]\ O^^ZWQObW]\bVObR`WdSab`OTTWQPOQYb]g]c`eSPaWbS :=1/: ASO`QVbVS7\bS`\SbT]`\Seaab]`WSa 53=1=27<5 /! 0`W\UZ]QObW]\POaSRW\T]`[ObW]\O\RZ]QOZcaS`Q`SObSR @O^WRZgRSdSZ]^O^^ZWQObW]\abVObQO\`SOQV[]`ScaS`a 00/CB6 ; ! A3/@16 8" Pg`SORW\UO\Re`WbW\UcaS`a¸abObca[SaaOUSa B`O\aT]`[^VgaWQOZORR`SaaSaW\b]S\Q]RSRZObWbcRS Q]\bS\bb]g]c`O^^ZWQObW]\ GC7 8 ! /ZZ]eGOV]]caS`ab]UWdSg]c^S`[WaaW]\b]OQQSaa :! /QQSaaGOV]]¸a^]eS`TcZaSO`QVaS`dWQSaT`][g]c`]e\ Z]\UWbcRSUS]Q]RSR`Sa^]\aSa 4W\RbVSa^SQWTWQ =/CB6 CaS]c`W\Rcab`gZSORW\UcbWZWbWSaO\RQ]\b`]Zae`WbbS\ bVSW`^S`a]\OZRObOPgcaW\UbVSGOV]]0`]eaS`0OaSR >`]dWRScaS`aeWbVOaW\UZSW\Rcab`gabO\RO`ReOgb] O^^ZWQObW]\ 1" ZObWbcRSO\RZ]\UWbcRST]`O\ORR`Saa 5S]Q]RSg]c` ;/7: 1$ B/5;/> W\8OdOAQ`W^bT]`PcWZRW\U`WQVZgW\bS`OQbWdSeSP /cbVS\bWQObW]\^`]QSaa aSS/cbV OZZ]eOQQSaab]bVSW`^S`a]\OZRObOT`][RSaYb]^O\R ^]W\baW\ORdO\QS]`T]`SU]WbOZb]USbVS`eWbVPcWZbW\ 0cWZRO^^ZWQObW]\ab]RWa^ZOgQ][^]aSO\RaS\R 2Wa^ZOgbVS`SZObWdSW[^]`bO\QS]TdO`W]caQ]\QS^ba O^^ZWQObW]\acaW\UbSQV\W_cSaacQVOa2=;aQ`W^bW\U eSPO^^ZWQObW]\a aSS/cbV :$ US]Q]RW\UW\]c`/8/FO\R4ZOaV/>7a [SaaOUSa A3/@16;/@93B7<5 RWa^ZOgSROabOUa]\OdWacOZ[O^ aSSH]\SBOU 26B;:O\R/8/F 0=AA 7" 1`SObSO\R[O\OUSQO[^OWU\a^cZZ`S^]`baaSbPWRa 0cWZRg]c`=e\ASO`QVAS`dWQS0=AAWaGOV]]¸a]^S\ : ; O\R[]`S BVSaSQO^OPWZWbWSaO`SSf^]aSRdWOOQ]ZZSQbW]\ 53=>:/<3B /! 0!" =>3<72 4" aSO`QVeSPaS`dWQSa^ZObT]`[bVObOZZ]eag]cb]PcWZR\Sfb ;/>A B@/4471 GA:=E :! =PbOW\O\R[O\OUSUS]Q]RSaT]`OZZUS]^S`[O\S\b 2SZWdS`OaW[^ZWTWSRZ]UW\Sf^S`WS\QST]`g]c`caS`aPg ]TA=/>POaSRESPAS`dWQSa US\aSO`QV[OaVc^a 0=AAUWdSag]cTW\SU`OW\SRQ]\b`]Z 0cWZR`WQVW\bS`OQbWdS[O^O^^ZWQObW]\acaW\U]c`4ZOaV 0cWZRO^^ZWQObW]\abVObcaS`SOZbW[Sb`OTTWQOZS`b /\OZghSg]c`eSP^OUSaO\RZSO`\V]eb]bc\S \O[SR^ZOQSa]\3O`bV OZZ]eW\UbVS[b]caSbVSW`GOV]]72aO\R^Oaae]`Rab] ]dS`bVSRWa^ZOgO\R`O\YW\U]TcaS`aSO`QV`SacZba /8/FO\R;O^7[OUS/>7a W\T]`[ObW]\T]`OUWdS\Z]QObW]\ OQQSaag]c`eSPaWbS A3/@16;=<93G 6" g]c`^OUSaT]`PSbbS`^S`T]`[O\QS GAZ]eWaO4W`ST]f ORR]\W\bSU`ObSReWbVbVS^]^cZO`4W`SPcUeSP 6/2==> / 0! @SOQVbS\a]T[WZZW]\a]TGOV]]ASO`QVcaS`aPgcaW\U 1=:/G3@ B@/D3: 8!" RSdSZ]^[S\bb]]Z :SO`\OP]cbGOV]]¸aW\d]ZdS[S\bW\bVS/^OQVS6OR]]^ 7 8 ab`cQbc`SRRObOb]S\VO\QSg]c`GOV]]ASO`QV`SacZba /QQSaaOcaS`¸aQ]\bOQbaW\g]c`O^^ZWQObW]\a)`S_cW`Sa 1`SObSO\S[PSRRSR^ZOgS`T]`SOQVOcRW]ZW\Y]\g]c` =>3<A=17/: 0cWZRO^^ZWQObW]\abVObOZZ]eb`W^^ZO\\W\UO\RaVO`W\U ^`]XSQbeVWQVRSdSZ]^a]^S\a]c`QSa]TbeO`ST]` aWbS]`eWbV]\SQZWQYbc`\O\g^OUSW\b]O^ZOgZWab 0cWZR=^S\A]QWOZO^^ZWQObW]\abVOb`c\]\GOV]] O\R[OYSbVS[[]`ScaSTcZ`SZSdO\bO\RdWacOZZgO^ ^S`[WaaW]\T`][bVScaS`b]OQQSaaVWa VS`W\T]`[ObW]\ OW`TO`SQ][^O`Wa]\aO\R`ObW\Ua `SdWSea 1!" `SZWOPZSaQOZOPZSRWab`WPcbSRQ][^cbW\U ^SOZW\U H=<3B/5 aSS/RR`Saa0]]Y eSPaWbSa BVS=^S\A]QWOZ/>7WaOaSb]TQ][[]\/>7a :SdS`OUSQSZZb]eS`b]Z]QObW]\[O^^W\UbSQV\]Z]UWSa ;3AA3<53@ 3$ QZWS\baWRScaW\UbVS8OdOAQ`W^b/>7O\RaS`dS`aWRS ;# 0 eWbVbVWa`SaSO`QV^`]b]bg^ST`][GOV]]@SaSO`QV 6=B8=0A /" 1`SObSORR]\aeWbVQ]ZZOP]`ObWdSTSObc`SabVObQO\`c\ caW\U@3ABTcZRObO/>7aT]`PcWZRW\Ua]QWOZO^^ZWQObW]\a A3/@16A29 C>2/B3AQ][W\Ua]]\ 1=]abSRWb`ST`SaVO\RRSZSbS^cPZWQO\R^`WdObSX]PORa ]\[O\geSPaWbSa /QQSaaGOV]]ASO`QVESPAS`dWQS/>7acaW\UO^^ZWQObW]\a @SORO\Re`WbScaS`OQbWdWbWSaW\b]O\OQbWdWbgab`SO[ 3fb`OQbOZWab]TaWU\WTWQO\be]`RaO\R^V`OaSaT`][ W\aWRSGOV]];SaaS\US` e`WbbS\W\dO`W]caZO\UcOUSaW\QZcRW\U4ZOaV8OdO>6> ]`UO\WhSRPg`SZObW]\aVW^a]`b]^WQa]TW\bS`SabO\R T`SST]`[bSfbcaW\UBVS1]\bS\b/\OZgaWaBS`[3fb`OQ CaSbVS/>7b][O\OUSg]c`X]PORaW\`SOZbW[S @cPg>gbV]\>S`Z8OdOAQ`W^b1D0O\R /BB3@<:70@/@G 6 7;/53A3/@16 9" 0cWZR;]PWZSeWRUSbaeWbVOabO\RO`RaPOaSRZO\UcOUS 2SZWdS`Oac^S`W]`caS`Sf^S`WS\QScaW\U]c`W\bS`OQbW]\ 3"# 5!" G2<E30A7B3 23: 717= CA 0" ASO`QVbVSeSPT]`W[OUSacaW\UGOV]]¸a^]eS`TcZ SOagb]caSb]]ZYWbO\ROaSO[ZSaa^ObVb]Vc\R`SRa ^ObbS`\a GOV]]¸a>ObbS`\:WP`O`gRSaQ`WPSaO\Ra]ZdSa A6=>>7<5 C>1=;7<5 W[OUSaSO`QVQO^OPWZWbWSa ]TRSdWQSa Q][[]\Zg]QQc``W\UcaS`Sf^S`WS\QS^`]PZS[aPg /QQSaa[WZZW]\a]T^`]RcQbZWabW\UaO\RbV]caO\Ra]T /RRcaS`US\S`ObSRSdS\bO\RZ]QObW]\RObOb]g]c` ASO`QVRSZ WQW] caP]]Y[O`YaO\RbOUa]`aSSeVS\ Vbb^( RSdSZ]^S` gOV]] Q][ Oa^SQWTWQcaS`ZOab^]abSRa][SbVW\U ORR`SaaW\Ua^SQWTWQ]\ZW\ScaS`\SSRa]`PSVOdW]`a [S`QVO\ba O^^ZWQObW]\aO\ReSPaWbSa Basically almost everything you see in use on Yahoo’s sites is available to you to build your solutions on. This starts with the thing great products are built on: user research. http://developer.yahoo.com/ypatterns The pattern library contains information on how users told us they reach their goals on our sites the easiest. The information is licensed creative commons, which means you can use and alter it. If you want to plan your interfaces based on these results, you even get them as stencils. http://developer.yahoo.com/ypatterns/wireframes/ Once you planned your product, the next problem is ensuring it works. For this, we need to somehow make sense of the crazy world of user agents (browsers, really). Trying to build web products that look and work the same for every browser out there is not possible...... unless you limit yourself to a terrible user experience. As we didn’t want this, we came up with a methodology to define “support”. http://developer.yahoo.com/yui/articles/gbs/ Once this was done, we had a chance to fix problems and build a solid base to work on. http://developer.yahoo.com/yui/ The Yahoo User Interface Library starts with making the creation of predictable designs easy. CSS CSS reset gets rid of browser differences. CSS fonts allow you to create predictable and scalable typography across browsers. And CSS grids allow you to create multi-column layouts. Even for *very* lazy developers:
http://developer.yahoo.com/yui/grids/builder/ Once the CSS was less confusing, we tackled JavaScript and browser confusions.
And with this arsenal we built reusable widgets to mix and match. http://ui.jquery.com/
http://ui.jquery.com All of the widgets can be extended and styled the way you want them to. http://developer.yahoo.com/yui/articles/skinning/ You can extend the widgets by listening for events that happen to them. http://developer.yahoo.com/yui/examples/autocomplete/ ac_basic_xhr_log.html They are built with ideas I very much subscribe to, like progressive enhancement. Without JavaScript With JavaScript
http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_array_clean.html Without JavaScript
With JavaScript
http://developer.yahoo.com/yui/examples/datatable/dt_enhanced.html We provide the bricks, you build the product.
http://www.flickr.com/photos/seven13avenue/2080281038/ All of this is open source, fully documented and you can either host it yourself or get it from a high speed distributed network (even Google’s). Another thing to consider is how your products perform. Fast and smooth products make users happy. http://developer.yahoo.com/performance/ You can test your products easily with YSlow.
http://developer.yahoo.com/yslow/ This solves most of our issues these days. And allows you to quickly create products that work. This solves most of our issues these days.
http://tweeteffect.com/ How about reaching out and finding data in other resources? http://developer.yahoo.com/search/boss/ Using Yahoo BOSS you can build own search engines based on Yahoo’s search index. Results include news, images or web results. Including keywords, microformats, RDF, social bookmarking data, incoming links... Thus you can create niche search products. Thus you can create niche search products.
http://keywordfinder.org/ Thus you can create niche search products.
http://icant.co.uk/sandbox/unsafe.html What if you want to reach even further? I personally have this crazy idea of the web. Users see the web as an interface. Developers have x-ray vision and see code I see something different. *
Sweet data to pick and mix.
http://www.flickr.com/photos/25802865@N08/3195857208/ We’ve provided a way to access this data for quite a while now. http://pipes.yahoo.com However, this was all visual. How about doing this on a language basis? Say you want to get photos of Sydney that you are allowed to show in your own products. You need to define Sydney, Australia without a doubt.
select woeid from geo.places where text='sydney,au' Then find photos that were taken there. select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='sydney,au') Check that they have the right license. select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='sydney,au') and license=4 And get all the information about them.
select * from flickr.photos.info where photo_id in (select id from flickr.photos.search where woe_id in (select woeid from geo.places where text='sydney,au') and license=4) http://developer.yahoo.com/yql
http://developer.yahoo.com/yql/console/?q=select%20*%20from %20flickr.photos.info%20where%20photo_id%20in%20(select%20id%20from %20flickr.photos.search%20where%20woe_id%20in%20(select%20woeid %20from%20geo.places%20where%20text%3D%27sydney%2Cau%27)%20and %20license%3D4) YQL gets the data, caches it and gives you information about the retrieval time. The results are available in XML or JSON and can be filtered down to the bare necessities. Using this you can get all the data you spread on the web...... and collate it in a single interface.
You can also use YQL to help people like me to get and use data provided by you using this interface. The trick is to tell us with a schema where your data is. And then use the schema in a query inside YQL as an “open table” use 'http://eatyourgreens.org.uk/yql/nmm- search.xml' as nmm; select * from nmm where category = 'art' and searchterm = '"tower bridge"' A lot of companies already start doing that. http://github.com/spullara/yql-tables/tree/master So, go and grab and use and give back and we’ll all make the web the best it can be. THANKS!
Christian Heilmann http://icant.co.uk http://wait-till-i.com http://scriptingenabled.orgText http://twitter.com/codepo8