SlideShare a Scribd company logo
YUI – The Elephant in the room  Christian Heilmann and Nate Koechley  UK Open Hack Day – London – 16 th  June 2007 [email_address]  &  [email_address]  & creative commons by: 3.0
Following is a transcript of a chat I had a week before I joined Yahoo! a bit over a year ago. I had just finished writing my book on JavaScript.
[chris]  Hey, I took the job at Yahoo in London! [friend]  Congrats, so much for you coding. I guess now it is all YUI for you.  [chris]  Nah, I honestly haven’t done much with it, but what I saw seems a bit bloated, I guess for most of the stuff I will code my own scripts. It is an OK library, but I am not convinced.
Now I am standing here, talking to you about the YUI and why it is a good thing. What happened?
To: Mechanical Turk Subject: I can has beat-up for Chris?
To: Mechanical Turk Subject: I can has beat-up for Chris?
 
 
Pragmatism
Let me show you some of the things I spend money on…
 
This is our third Henry, … the first … lasted five years, the only reason it went was because it was used and abused but still worked. The second lasted about ten years went for the same reason as the first.  Our last Henry was a bit of a disappointment it blew up after  fifteen years  but we have still purchased another one.
 
Air cushioned Resistant to Oil Fat Acid Petrol Alkali Steel Toes Perfect to wear on the tube
And this is what the YUI is. Industrial-strength solutions for every day problems If it works for our web sites it should work for you (or do you have more users?).
Using the YUI also means another, very important step towards producing big products.  It takes the random element out of web development.  Normally we have the following scenario:
HKR 1 Prod 1 Own conventions Own testing methods  Own environment  Own coding style  Own sense of who uses the product
HKR 2 Prod 1 Own conventions Own testing methods  Own environment  Own coding style  Own sense of who uses the product
HKR 3 Prod 1 Own conventions Own testing methods  Own environment  Own coding style  Own sense of who uses the product
Prod 1
HKR 2 Prod 1 HKR 3 HKR 1 YUI Magic!
YUI allows simple collaboration by enforcing a strict namespace. This is what I considered “bloated” until I realized the benefits of it.  Namespacing of the different YUI components and clever namespacing of your objects ensures readability.
YAHOO.util.Dom.addClass YAHOO.util.Event.getTarget YAHOO.widget.Tooltip YAHOO.util.DragDrop YAHOO.util.Connect.isCallInProgress   All do what they say on the tin.
By coming up with your own namespace and sticking to it, you ensure that your code will play well with others. You can cut your applications up into several components and develop them in parallel without interfering. File size of your scripts can be easily reduced by minifying and gzipping the scripts – long names pack nicely.
The best thing: Readable method names = half a good comment Agreed namespace = understanding what your predecessors have done.
The next best thing: Submitted hacks should either use a BBC or a Yahoo! API.
The next best thing: Submitted hacks should either use a BBC or a Yahoo! API. yahoo-min.js  is  1kb , gives you the namespace and satisfies this rule :-)
HKR 1 Prod 1
HKR 1 Prod 1 The INTERNETS
HKR 1 Prod 1 The INTERNETS DA DAH DUUUUUMMMM…
The INTERNETS are scary, as they mean: Different Browsers Different Assistive Technology Different Operating Systems Different Configurations Different Hardware
HKR 1 Prod 1 The INTERNETS 20% 80%
HKR 1 Prod 1 HKR 3 HKR 2 HKR 4 HKR 5
HKR 1 Prod 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5
HKR 1 Prod 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5 Battle And Tame  The Internets!
HKR 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5 HKR Several hundreds in world-wide locations X
And now we need you to help us make this even better.
Photo Credits Numatic Henry  http://www.flickr.com/photos/nicohogg/516490143/ Docs  http://www.flickr.com/photos/davetron5000/276535342/ Elephant  http://www.flickr.com/photos/euromagic/318774561/ Vic20 Game  http://www.flickr.com/photos/lifeontheedge/84913291/   Chris and the babes:  http://www.flickr.com/photos/72169999@N00/348839862/   Nate  http://www.flickr.com/photos/freshelectrons/400135496/   Spaghetti  http://www.flickr.com/photos/hikikomori/155256307/ Kitten  http://www.flickr.com/photos/miller-lowe/346191736/ Puppy  http://www.cuteoverload.com
YUI Goodies Industrial strength cross-browser JavaScript and CSS, free for all
The YUI Team
“ You bring the skills. We bring the ingredients.”
What’s YUI got?
[primitives] [compounds] [idioms] Connection Manager (Ajax) Event Utility Dom Collection Drag & Drop Animation CSS Reset, Fonts, Grids The Yahoo! User Interface Library Logger Control Menu Control Slider Tree Control Calendar Control AutoComplete DHTML Windowing TabView
DOM Utility Positioning HTML Elements  Get/set Styles  Client/Viewport/Doc Size  Manage Class Names  Regions & points
Event Utility Attach to one or many Auto-deferral if nodes aren’t yet available; execute onAvailable Auto scope correction (or assign)  Can send objects Automatic listener cleanup  Custom Events (pub/sub)
Animation Beautiful API  Size/opacity/color/position/etc Bezier math
Good for spicing up hacks: Slider AutoComplete DragDrop Menu / Tabs / Trees Container Reset / Fonts / Grids
But wait, there’s more!
Design Patterns
Design Patterns
What happens when the mouse is pressed on the draggable object but dragging has not initiated? Storyboard Template for Drag & Drop
A full pantry web services & data  + YUI (interface code) + Y design patterns -------------------- = tasty hack goodness
Getting Started
Wide-open BSD License
Free hardcore hosting http://yui.yahooapis.com/2.2.2/build/dom/dom-min.js http://yui.yahooapis.com/2.2.2/build/event/event-min.js   http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js   http://yui.yahooapis.com/2.2.2/build/reset-fonts-grids/reset-fonts-grids.css
 
Three Versions of each File http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/
À la carte  Dependencies
 
Download full dist  with  all  docs & examples http://developer.yahoo.com/yui/download/
Landing Page Quick Start Guides
Complete API Documentation
Examples and Tutorials
The YUI Cheat Sheets
ydn-javascript list
YUI Logger and Firebug alert(“stop the insanity”); YAHOO.log(“There IS a better way”); Debug with Logger or Firebug directly.
Things we’re proud of: Good page citizens We like javascript We care about accessibility and browser support
Graded Browser Support
Senior Architectural Leadership Douglas Crockford: “ Yoda of lambda programming and JavaScript” according to Brendan Eich (Inventor of JavaScript) Rasmus Lerdorf  Father of PHP
Now Hack! And come find me anytime.

More Related Content

Viewers also liked

Addressing the Elephant in the Room - Content Strategy
Addressing the Elephant in the Room - Content StrategyAddressing the Elephant in the Room - Content Strategy
Addressing the Elephant in the Room - Content Strategy
Ray Killebrew
 
Risk: the Elephant in the Room
Risk: the Elephant in the RoomRisk: the Elephant in the Room
Risk: the Elephant in the Room
Last Call Media
 
ELEARNING IN ART AND DESIGN: THE ELEPHANT IN THE ROOM
ELEARNING IN ART AND DESIGN: THE ELEPHANT IN THE ROOMELEARNING IN ART AND DESIGN: THE ELEPHANT IN THE ROOM
ELEARNING IN ART AND DESIGN: THE ELEPHANT IN THE ROOM
Art + Design: elearning lab design for social change
 
asteRISK
asteRISKasteRISK
asteRISK
krnmcg
 
Elephant in Room Version 2
Elephant in Room Version 2Elephant in Room Version 2
Elephant in Room Version 2
Global Risk Forum GRFDavos
 
Moving the Elephant in the Room: Data Migration at Scale
Moving the Elephant in the Room: Data Migration at ScaleMoving the Elephant in the Room: Data Migration at Scale
Moving the Elephant in the Room: Data Migration at Scale
Tyrone Hinderson
 
The elephant in the room. discussion
The elephant in the room. discussionThe elephant in the room. discussion
The elephant in the room. discussion
Andrew Gelston
 
The elephant in the room
The elephant in the roomThe elephant in the room
The elephant in the room
Cleveland-Marshall College of Law
 
Elephant in the Room: Social Media ROI - WEB 2.0 NYC
Elephant in the Room: Social Media ROI - WEB 2.0 NYCElephant in the Room: Social Media ROI - WEB 2.0 NYC
Elephant in the Room: Social Media ROI - WEB 2.0 NYC
Mike Lewis
 
Strategy - The elephant in the room
Strategy - The elephant in the roomStrategy - The elephant in the room
Strategy - The elephant in the room
IIBA UK Chapter
 
Elephant in the Room: Scaling Storage for the HathiTrust Research Center
Elephant in the Room: Scaling Storage for the HathiTrust Research CenterElephant in the Room: Scaling Storage for the HathiTrust Research Center
Elephant in the Room: Scaling Storage for the HathiTrust Research Center
Robert H. McDonald
 
Lance Concannon, Sysomos: Simplifiying social - How marketers can manage the ...
Lance Concannon, Sysomos: Simplifiying social - How marketers can manage the ...Lance Concannon, Sysomos: Simplifiying social - How marketers can manage the ...
Lance Concannon, Sysomos: Simplifiying social - How marketers can manage the ...
ad:tech London, MMS & iMedia
 
The elephant in the room mongo db + hadoop
The elephant in the room  mongo db + hadoopThe elephant in the room  mongo db + hadoop
The elephant in the room mongo db + hadoop
iammutex
 
CMS Expo 2011 Keynote - The Elephant in the Room
CMS Expo 2011 Keynote - The Elephant in the RoomCMS Expo 2011 Keynote - The Elephant in the Room
CMS Expo 2011 Keynote - The Elephant in the Room
Scott Liewehr
 
G!
G!G!
RIDE 2011: Student dropout – the elephant in the room of distance education (...
RIDE 2011: Student dropout – the elephant in the room of distance education (...RIDE 2011: Student dropout – the elephant in the room of distance education (...
RIDE 2011: Student dropout – the elephant in the room of distance education (...
Centre for Distance Education
 
The elephant in the room
The elephant in the roomThe elephant in the room
The elephant in the room
John Gillis
 
The Elephant In The Room - Research Report 31 July 2013
The Elephant In The Room - Research Report 31 July 2013The Elephant In The Room - Research Report 31 July 2013
The Elephant In The Room - Research Report 31 July 2013
Howard Cooke
 
Kanban. Dealing with the elephant in the room. One chunk at a time
Kanban. Dealing with the elephant in the room. One chunk at a timeKanban. Dealing with the elephant in the room. One chunk at a time
Kanban. Dealing with the elephant in the room. One chunk at a time
jsonnevelt
 
How to Tame the Elephant in the Room- 6 steps to build trust and close deals!
How to Tame the Elephant in the Room- 6 steps to build trust and close deals!How to Tame the Elephant in the Room- 6 steps to build trust and close deals!
How to Tame the Elephant in the Room- 6 steps to build trust and close deals!
Mitch Jackson
 

Viewers also liked (20)

Addressing the Elephant in the Room - Content Strategy
Addressing the Elephant in the Room - Content StrategyAddressing the Elephant in the Room - Content Strategy
Addressing the Elephant in the Room - Content Strategy
 
Risk: the Elephant in the Room
Risk: the Elephant in the RoomRisk: the Elephant in the Room
Risk: the Elephant in the Room
 
ELEARNING IN ART AND DESIGN: THE ELEPHANT IN THE ROOM
ELEARNING IN ART AND DESIGN: THE ELEPHANT IN THE ROOMELEARNING IN ART AND DESIGN: THE ELEPHANT IN THE ROOM
ELEARNING IN ART AND DESIGN: THE ELEPHANT IN THE ROOM
 
asteRISK
asteRISKasteRISK
asteRISK
 
Elephant in Room Version 2
Elephant in Room Version 2Elephant in Room Version 2
Elephant in Room Version 2
 
Moving the Elephant in the Room: Data Migration at Scale
Moving the Elephant in the Room: Data Migration at ScaleMoving the Elephant in the Room: Data Migration at Scale
Moving the Elephant in the Room: Data Migration at Scale
 
The elephant in the room. discussion
The elephant in the room. discussionThe elephant in the room. discussion
The elephant in the room. discussion
 
The elephant in the room
The elephant in the roomThe elephant in the room
The elephant in the room
 
Elephant in the Room: Social Media ROI - WEB 2.0 NYC
Elephant in the Room: Social Media ROI - WEB 2.0 NYCElephant in the Room: Social Media ROI - WEB 2.0 NYC
Elephant in the Room: Social Media ROI - WEB 2.0 NYC
 
Strategy - The elephant in the room
Strategy - The elephant in the roomStrategy - The elephant in the room
Strategy - The elephant in the room
 
Elephant in the Room: Scaling Storage for the HathiTrust Research Center
Elephant in the Room: Scaling Storage for the HathiTrust Research CenterElephant in the Room: Scaling Storage for the HathiTrust Research Center
Elephant in the Room: Scaling Storage for the HathiTrust Research Center
 
Lance Concannon, Sysomos: Simplifiying social - How marketers can manage the ...
Lance Concannon, Sysomos: Simplifiying social - How marketers can manage the ...Lance Concannon, Sysomos: Simplifiying social - How marketers can manage the ...
Lance Concannon, Sysomos: Simplifiying social - How marketers can manage the ...
 
The elephant in the room mongo db + hadoop
The elephant in the room  mongo db + hadoopThe elephant in the room  mongo db + hadoop
The elephant in the room mongo db + hadoop
 
CMS Expo 2011 Keynote - The Elephant in the Room
CMS Expo 2011 Keynote - The Elephant in the RoomCMS Expo 2011 Keynote - The Elephant in the Room
CMS Expo 2011 Keynote - The Elephant in the Room
 
G!
G!G!
G!
 
RIDE 2011: Student dropout – the elephant in the room of distance education (...
RIDE 2011: Student dropout – the elephant in the room of distance education (...RIDE 2011: Student dropout – the elephant in the room of distance education (...
RIDE 2011: Student dropout – the elephant in the room of distance education (...
 
The elephant in the room
The elephant in the roomThe elephant in the room
The elephant in the room
 
The Elephant In The Room - Research Report 31 July 2013
The Elephant In The Room - Research Report 31 July 2013The Elephant In The Room - Research Report 31 July 2013
The Elephant In The Room - Research Report 31 July 2013
 
Kanban. Dealing with the elephant in the room. One chunk at a time
Kanban. Dealing with the elephant in the room. One chunk at a timeKanban. Dealing with the elephant in the room. One chunk at a time
Kanban. Dealing with the elephant in the room. One chunk at a time
 
How to Tame the Elephant in the Room- 6 steps to build trust and close deals!
How to Tame the Elephant in the Room- 6 steps to build trust and close deals!How to Tame the Elephant in the Room- 6 steps to build trust and close deals!
How to Tame the Elephant in the Room- 6 steps to build trust and close deals!
 

Similar to YUI The Elephant In The Room

Scripting Enabled at Georgia Tech
Scripting Enabled at Georgia TechScripting Enabled at Georgia Tech
Scripting Enabled at Georgia Tech
Christian Heilmann
 
Yahoo For You - Services and Libraries
Yahoo For You - Services and LibrariesYahoo For You - Services and Libraries
Yahoo For You - Services and Libraries
Christian Heilmann
 
Adobemax2009na
Adobemax2009naAdobemax2009na
Adobemax2009na
Masakazu Ohtsuka
 
Things to use, find and share
Things to use, find and shareThings to use, find and share
Things to use, find and share
Christian Heilmann
 
Working In The Now - Paris Web
Working In The Now - Paris WebWorking In The Now - Paris Web
Working In The Now - Paris Web
Christian Heilmann
 
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Association Paris-Web
 
Georgia Tech hacking Accessibility
Georgia Tech hacking AccessibilityGeorgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
Christian Heilmann
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature Creature
Christian Heilmann
 
Technical Introduction to YDN
Technical Introduction to YDNTechnical Introduction to YDN
Technical Introduction to YDN
Christian Heilmann
 
Hacking For Innovation
Hacking For InnovationHacking For Innovation
Hacking For Innovation
Christian Heilmann
 
Github github-github
Github github-githubGithub github-github
Github github-github
fusion2011
 
Yahoo is open to developers
Yahoo is open to developersYahoo is open to developers
Yahoo is open to developers
Christian Heilmann
 
Hacking101 delhi 2013
Hacking101 delhi 2013Hacking101 delhi 2013
Hacking101 delhi 2013
Jithin Emmanuel
 
Georgia Tech Hack Day
Georgia Tech Hack DayGeorgia Tech Hack Day
Georgia Tech Hack Day
Christian Heilmann
 
Purple Hack Fodder - my presentation at mashed08
Purple Hack Fodder - my presentation at mashed08Purple Hack Fodder - my presentation at mashed08
Purple Hack Fodder - my presentation at mashed08
Christian Heilmann
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhone
kentbrew
 
Introduction to YUI
Introduction to YUIIntroduction to YUI
Introduction to YUI
Christian Heilmann
 
Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1
benDesigning
 
Hacking for Innovation: IIT Kharagpur
Hacking for Innovation: IIT KharagpurHacking for Innovation: IIT Kharagpur
Hacking for Innovation: IIT Kharagpur
Saurabh Sahni
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
DevGAMM Conference
 

Similar to YUI The Elephant In The Room (20)

Scripting Enabled at Georgia Tech
Scripting Enabled at Georgia TechScripting Enabled at Georgia Tech
Scripting Enabled at Georgia Tech
 
Yahoo For You - Services and Libraries
Yahoo For You - Services and LibrariesYahoo For You - Services and Libraries
Yahoo For You - Services and Libraries
 
Adobemax2009na
Adobemax2009naAdobemax2009na
Adobemax2009na
 
Things to use, find and share
Things to use, find and shareThings to use, find and share
Things to use, find and share
 
Working In The Now - Paris Web
Working In The Now - Paris WebWorking In The Now - Paris Web
Working In The Now - Paris Web
 
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008
 
Georgia Tech hacking Accessibility
Georgia Tech hacking AccessibilityGeorgia Tech hacking Accessibility
Georgia Tech hacking Accessibility
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature Creature
 
Technical Introduction to YDN
Technical Introduction to YDNTechnical Introduction to YDN
Technical Introduction to YDN
 
Hacking For Innovation
Hacking For InnovationHacking For Innovation
Hacking For Innovation
 
Github github-github
Github github-githubGithub github-github
Github github-github
 
Yahoo is open to developers
Yahoo is open to developersYahoo is open to developers
Yahoo is open to developers
 
Hacking101 delhi 2013
Hacking101 delhi 2013Hacking101 delhi 2013
Hacking101 delhi 2013
 
Georgia Tech Hack Day
Georgia Tech Hack DayGeorgia Tech Hack Day
Georgia Tech Hack Day
 
Purple Hack Fodder - my presentation at mashed08
Purple Hack Fodder - my presentation at mashed08Purple Hack Fodder - my presentation at mashed08
Purple Hack Fodder - my presentation at mashed08
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhone
 
Introduction to YUI
Introduction to YUIIntroduction to YUI
Introduction to YUI
 
Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1
 
Hacking for Innovation: IIT Kharagpur
Hacking for Innovation: IIT KharagpurHacking for Innovation: IIT Kharagpur
Hacking for Innovation: IIT Kharagpur
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
Christian Heilmann
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
Christian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
Christian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
Christian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
Christian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
Christian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
Christian Heilmann
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
Christian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
Christian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Recently uploaded

(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
The Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdfThe Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdf
paysquare consultancy
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
CEPTES Software Inc
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
Overview of Enterprise-scale landing zones using Cloud Adoption Framework Rea...
Overview of Enterprise-scale landing zones using Cloud Adoption Framework Rea...Overview of Enterprise-scale landing zones using Cloud Adoption Framework Rea...
Overview of Enterprise-scale landing zones using Cloud Adoption Framework Rea...
MarceloMiranda38200
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAIApplying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
ssuserd4e0d2
 
Gen-AI in Telcos: Strategies, Challenges & Impact | Torry Harris Integration ...
Gen-AI in Telcos: Strategies, Challenges & Impact | Torry Harris Integration ...Gen-AI in Telcos: Strategies, Challenges & Impact | Torry Harris Integration ...
Gen-AI in Telcos: Strategies, Challenges & Impact | Torry Harris Integration ...
Torry Harris
 
BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
BEGINNER’S GUIDE TO AI AGENTS (1).pptx...BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
WriteMe
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
ScrumGathering New Orleans 2024 Catherine Louis.pdf
ScrumGathering New Orleans 2024  Catherine Louis.pdfScrumGathering New Orleans 2024  Catherine Louis.pdf
ScrumGathering New Orleans 2024 Catherine Louis.pdf
Global Agile Consulting- CLL-Group, LLC
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 

Recently uploaded (20)

(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
The Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdfThe Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdf
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
Overview of Enterprise-scale landing zones using Cloud Adoption Framework Rea...
Overview of Enterprise-scale landing zones using Cloud Adoption Framework Rea...Overview of Enterprise-scale landing zones using Cloud Adoption Framework Rea...
Overview of Enterprise-scale landing zones using Cloud Adoption Framework Rea...
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAIApplying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
Applying Retrieval-Augmented Generation (RAG) to Combat Hallucinations in GenAI
 
Gen-AI in Telcos: Strategies, Challenges & Impact | Torry Harris Integration ...
Gen-AI in Telcos: Strategies, Challenges & Impact | Torry Harris Integration ...Gen-AI in Telcos: Strategies, Challenges & Impact | Torry Harris Integration ...
Gen-AI in Telcos: Strategies, Challenges & Impact | Torry Harris Integration ...
 
BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
BEGINNER’S GUIDE TO AI AGENTS (1).pptx...BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
ScrumGathering New Orleans 2024 Catherine Louis.pdf
ScrumGathering New Orleans 2024  Catherine Louis.pdfScrumGathering New Orleans 2024  Catherine Louis.pdf
ScrumGathering New Orleans 2024 Catherine Louis.pdf
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 

YUI The Elephant In The Room

  • 1. YUI – The Elephant in the room Christian Heilmann and Nate Koechley UK Open Hack Day – London – 16 th June 2007 [email_address] & [email_address] & creative commons by: 3.0
  • 2. Following is a transcript of a chat I had a week before I joined Yahoo! a bit over a year ago. I had just finished writing my book on JavaScript.
  • 3. [chris] Hey, I took the job at Yahoo in London! [friend] Congrats, so much for you coding. I guess now it is all YUI for you. [chris] Nah, I honestly haven’t done much with it, but what I saw seems a bit bloated, I guess for most of the stuff I will code my own scripts. It is an OK library, but I am not convinced.
  • 4. Now I am standing here, talking to you about the YUI and why it is a good thing. What happened?
  • 5. To: Mechanical Turk Subject: I can has beat-up for Chris?
  • 6. To: Mechanical Turk Subject: I can has beat-up for Chris?
  • 7.  
  • 8.  
  • 10. Let me show you some of the things I spend money on…
  • 11.  
  • 12. This is our third Henry, … the first … lasted five years, the only reason it went was because it was used and abused but still worked. The second lasted about ten years went for the same reason as the first. Our last Henry was a bit of a disappointment it blew up after fifteen years but we have still purchased another one.
  • 13.  
  • 14. Air cushioned Resistant to Oil Fat Acid Petrol Alkali Steel Toes Perfect to wear on the tube
  • 15. And this is what the YUI is. Industrial-strength solutions for every day problems If it works for our web sites it should work for you (or do you have more users?).
  • 16. Using the YUI also means another, very important step towards producing big products. It takes the random element out of web development. Normally we have the following scenario:
  • 17. HKR 1 Prod 1 Own conventions Own testing methods Own environment Own coding style Own sense of who uses the product
  • 18. HKR 2 Prod 1 Own conventions Own testing methods Own environment Own coding style Own sense of who uses the product
  • 19. HKR 3 Prod 1 Own conventions Own testing methods Own environment Own coding style Own sense of who uses the product
  • 21. HKR 2 Prod 1 HKR 3 HKR 1 YUI Magic!
  • 22. YUI allows simple collaboration by enforcing a strict namespace. This is what I considered “bloated” until I realized the benefits of it. Namespacing of the different YUI components and clever namespacing of your objects ensures readability.
  • 23. YAHOO.util.Dom.addClass YAHOO.util.Event.getTarget YAHOO.widget.Tooltip YAHOO.util.DragDrop YAHOO.util.Connect.isCallInProgress All do what they say on the tin.
  • 24. By coming up with your own namespace and sticking to it, you ensure that your code will play well with others. You can cut your applications up into several components and develop them in parallel without interfering. File size of your scripts can be easily reduced by minifying and gzipping the scripts – long names pack nicely.
  • 25. The best thing: Readable method names = half a good comment Agreed namespace = understanding what your predecessors have done.
  • 26. The next best thing: Submitted hacks should either use a BBC or a Yahoo! API.
  • 27. The next best thing: Submitted hacks should either use a BBC or a Yahoo! API. yahoo-min.js is 1kb , gives you the namespace and satisfies this rule :-)
  • 29. HKR 1 Prod 1 The INTERNETS
  • 30. HKR 1 Prod 1 The INTERNETS DA DAH DUUUUUMMMM…
  • 31. The INTERNETS are scary, as they mean: Different Browsers Different Assistive Technology Different Operating Systems Different Configurations Different Hardware
  • 32. HKR 1 Prod 1 The INTERNETS 20% 80%
  • 33. HKR 1 Prod 1 HKR 3 HKR 2 HKR 4 HKR 5
  • 34. HKR 1 Prod 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5
  • 35. HKR 1 Prod 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5 Battle And Tame The Internets!
  • 36. HKR 1 Secret YUI lair! HKR 3 HKR 2 HKR 4 HKR 5 HKR Several hundreds in world-wide locations X
  • 37. And now we need you to help us make this even better.
  • 38. Photo Credits Numatic Henry http://www.flickr.com/photos/nicohogg/516490143/ Docs http://www.flickr.com/photos/davetron5000/276535342/ Elephant http://www.flickr.com/photos/euromagic/318774561/ Vic20 Game http://www.flickr.com/photos/lifeontheedge/84913291/ Chris and the babes: http://www.flickr.com/photos/72169999@N00/348839862/ Nate http://www.flickr.com/photos/freshelectrons/400135496/ Spaghetti http://www.flickr.com/photos/hikikomori/155256307/ Kitten http://www.flickr.com/photos/miller-lowe/346191736/ Puppy http://www.cuteoverload.com
  • 39. YUI Goodies Industrial strength cross-browser JavaScript and CSS, free for all
  • 41. “ You bring the skills. We bring the ingredients.”
  • 43. [primitives] [compounds] [idioms] Connection Manager (Ajax) Event Utility Dom Collection Drag & Drop Animation CSS Reset, Fonts, Grids The Yahoo! User Interface Library Logger Control Menu Control Slider Tree Control Calendar Control AutoComplete DHTML Windowing TabView
  • 44. DOM Utility Positioning HTML Elements Get/set Styles Client/Viewport/Doc Size Manage Class Names Regions & points
  • 45. Event Utility Attach to one or many Auto-deferral if nodes aren’t yet available; execute onAvailable Auto scope correction (or assign) Can send objects Automatic listener cleanup Custom Events (pub/sub)
  • 46. Animation Beautiful API Size/opacity/color/position/etc Bezier math
  • 47. Good for spicing up hacks: Slider AutoComplete DragDrop Menu / Tabs / Trees Container Reset / Fonts / Grids
  • 51. What happens when the mouse is pressed on the draggable object but dragging has not initiated? Storyboard Template for Drag & Drop
  • 52. A full pantry web services & data + YUI (interface code) + Y design patterns -------------------- = tasty hack goodness
  • 55. Free hardcore hosting http://yui.yahooapis.com/2.2.2/build/dom/dom-min.js http://yui.yahooapis.com/2.2.2/build/event/event-min.js http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js http://yui.yahooapis.com/2.2.2/build/reset-fonts-grids/reset-fonts-grids.css
  • 56.  
  • 57. Three Versions of each File http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/
  • 58. À la carte Dependencies
  • 59.  
  • 60. Download full dist with all docs & examples http://developer.yahoo.com/yui/download/
  • 61. Landing Page Quick Start Guides
  • 64. The YUI Cheat Sheets
  • 66. YUI Logger and Firebug alert(“stop the insanity”); YAHOO.log(“There IS a better way”); Debug with Logger or Firebug directly.
  • 67. Things we’re proud of: Good page citizens We like javascript We care about accessibility and browser support
  • 69. Senior Architectural Leadership Douglas Crockford: “ Yoda of lambda programming and JavaScript” according to Brendan Eich (Inventor of JavaScript) Rasmus Lerdorf Father of PHP
  • 70. Now Hack! And come find me anytime.