Professional Frontend
     Engineering
               Nate Koechley
          Senior Frontend Engineer
                   ...
Why this topic?
• Put a stake in the
  ground.
• Reiterate our
  values.
• Advocate the
  discipline.
• Nurture a healthy
  Web.
Historical
Perspective
Historical   Our Beliefs
Perspective   & Principles
Historical    Our Beliefs
Perspective    & Principles


 Knowledge
Areas & Best
  Practices
Historical    Our Beliefs
Perspective    & Principles


 Knowledge
               Why It All
Areas & Best
               M...
Historical
Perspective
Year = 2001
Age = 7 years
Employees = 3000
Frontend
Engineers = 0
So?
2001
First frontend engineering
      specialists hired.
2008
~700 professional frontend
 engineers spread across
  Y! offices worldwide.

     And hiring!!!
2001
Font tags & nested tables.

     Static interface.
2008
Semantic & accessible markup.

Rich DHTML & Ajax behavior.

More content. Same fast speed.
2001
Available and accessible to
         everyone.
2008
Available and accessible to
         everyone.
2001
Plain but predictable.
2008
Highly visual and adaptive, but
       still dependable.
2001
Modest user expectations.
2008
  Sophisticated, broad, and
non-trivial user expectations.
2001
Intersection of design and
 development still vague.
Now
    Professional Frontend
   Engineers focused at the
  intersection of design and
development is a best practice.
—Irene Au, SVP of UED at Yahoo!
“In 2001, with developments in advanced
   JavaScript and DHTML, we knew the web
  experience would evolve beyond the stat...
—Irene Au, SVP of UED at Yahoo!
“... Another motivation was to bring in a
     disciplined frontend programming
     practice to Yahoo. Before then, the
p...
“The Framers of the Web
 saw browser differences
as beneficial and believed
   that visitors should
choose how their brows...
“...I wanted more control
   so I threw my HTML
  book in the trash and
  started from scratch.”
The Web is
 still sick.
Frontend Engineers are
the Web’s Radiologists
Question:

What is Frontend
Engineering?
Answer:

We write software
in JavaScript, CSS,
and HTML & more...
Answer:

We tell browsers
what to do.
Answer:

We’re responsible
for “view source”
The Yahoo! Stack
      Pages & modules
          95% HTML, 5% PHP


     Display logic & APIs
         50% HTML, 50% PHP

...
The Yahoo! Stack
     Pages & modules
                               Frontend
         95% HTML, 5% PHP


    Display logi...
The Yahoo! Stack
     Pages & modules
                               Frontend
         95% HTML, 5% PHP


    Display logi...
SIMPLE?
no.
server
(X)HTML




 server
(X)HTML

          Specification




 server
(X)HTML

           Specification
          Implementation




 server
(X)HTML

           Specification
          Implementation
               Bugs




 server
(X)HTML

              Specification
             Implementation
                  Bugs
          [ Theory / Practice ]



...
CSS

                          BOM API
(X)HTML    DOM                      JavaScript
                          DOM API

 ...
Safari    Firefox    Opera   IE5, 6, 7    Firefox   Opera       10,000+ UAs
         Macintosh                       Windo...
Safari    Firefox    Opera   IE5, 6, 7   Firefox   Opera        10,000+ UAs
         Macintosh                       Windo...
Safari    Firefox    Opera   IE5, 6, 7   Firefox   Opera        10,000+ UAs
         Macintosh                       Windo...
usability, internationalization,
    localization, visual design,
  accessibility, information
   architecture, security, ...
from Lifted
©2007 Pixar Animation Studios
Different from Backend
      because we:

• Can’t compile.
• Can’t trust.
• Can’t predict.
• Can’t install or store.
• Can...
Douglas Crockford on browsers:

       “The most hostile
    software development
   environment imaginable.”
If your business is online...
   your value depends on
   Frontend Engineering.
Elegant algorithms benefit users
   through interfaces built by
      Frontend Engineers.
Every gorgeous design is
brought to life by Frontend
        Engineers.
Frontend engineers give sites
    strength & resilience,
   appearance & form, and
 functionality & interactivity.
...which is why professional
   frontend engineering is
    critical for success.
Historical   Our Beliefs
Perspective   & Principles
Four Guiding Principles
1) Availability
Availability:
Maximize availability, accessibility
and utility of content and services
for all users worldwide.
2) Openness
Openness:
Share. Learn. Support. Advocate.
We benefit from a healthy Internet.
3) Richness
Richness:
Provide, but not too much.
Layer endlessly.
Remember we are not average.
4) Stability
Stability:
The Web is young.
Invest in quality.
Prepare for the future.
Four Guiding Principles

• Availability
• Openness
• Richness
• Stability
Three Core Techniques
1) Graded Browser
     Support
http://developer.yahoo.com/yui/articles/gbs/
“Support” does not
  mean identical.
“Support” is not a
  binary choice.
Three Support Grades
Three Support Grades
C-Grade
  •   Blacklist (of incapable browsers)
  •   Withhold CSS & JavaScript
Three Support Grades
C-Grade
  •   Blacklist (of incapable browsers)
  •   Withhold CSS & JavaScript
A-Grade
  •   Whiteli...
Three Support Grades
C-Grade
  •   Blacklist (of incapable browsers)
  •   Withhold CSS & JavaScript
A-Grade
  •   Whiteli...
A-Grade Support
http://developer.yahoo.com/yui/articles/gbs
C-Grade Experience
A-Grade Experience
C-Grade Experience
A-Grade Experience
2) Progressive
Enhancement
Rules of Progressive
   Enhancement
Rules of Progressive
       Enhancement
•   Enrich content with thorough, explicit markup.
Rules of Progressive
       Enhancement
•   Enrich content with thorough, explicit markup.

•   Test core functionality wi...
Rules of Progressive
       Enhancement
•   Enrich content with thorough, explicit markup.

•   Test core functionality wi...
Rules of Progressive
       Enhancement
•   Enrich content with thorough, explicit markup.

•   Test core functionality wi...
Rules of Progressive
       Enhancement
•   Enrich content with thorough, explicit markup.

•   Test core functionality wi...
Flipped definition of
“graceful degradation”
3) Unobtrusive JavaScript
http://onlinetools.org/articles/unobtrusivejavascript/
Rules of Unobtrusive
      JavaScript
Rules of Unobtrusive
          JavaScript
•   No JavaScript in HTML documents.
Rules of Unobtrusive
          JavaScript
•   No JavaScript in HTML documents.

•   Don’t depend on or trust JavaScript.
Rules of Unobtrusive
          JavaScript
•   No JavaScript in HTML documents.

•   Don’t depend on or trust JavaScript.

...
Rules of Unobtrusive
          JavaScript
•   No JavaScript in HTML documents.

•   Don’t depend on or trust JavaScript.

...
Rules of Unobtrusive
          JavaScript
•   No JavaScript in HTML documents.

•   Don’t depend on or trust JavaScript.

...
Rules of Unobtrusive
          JavaScript
•   No JavaScript in HTML documents.

•   Don’t depend on or trust JavaScript.

...
Don’t Break the Web!

href=“#”
href=“javascript:foo()”
onclick=“foo()”
Three Core Techniques
• Graded Browser
 Support

• Progressive
 Enhancement

• Unobtrusive
 JavaScript
Making Decisions
Making Decisions (1)
1. Do what is standard.
  if impossible, then:

2. Do what is common.
  if impossible, then:

3. Do w...
Making Decisions (2)
1. Do what is simple.
  ✚
2. Do what is flexible & progressive.
  ✚
3. Do what is open.
Making Decisions (3)

•   Remember you have multiples
    audiences to satisfy:
    •   Users
    •   Developers
    •   M...
Historical    Our Beliefs
Perspective    & Principles


 Knowledge
Areas & Best
  Practices
8 Areas of Focus
1. HTML                   6. Performance

2. CSS                    7. Infrastructure &
                 ...
oc us
F
  #1



         HTML
Focus: Be thorough.
<label>
<fieldset>
<cite>
<caption>
<thead>
<th scope=”row” abbr=”ManU”>
<ins datetime=”2008-05-30”>
Aim for permanence.
Switching costs
  are rising.
oc us
F
  #2



         CSS
Focus on the left side.
selector: declaration;
selector: declaration;
Focus: Specificity
   great selectors are an
expression of professionalism
h1: declaration;
#mod h1: declaration;
div#mod h1: declaration;
body.cart #mod h1.class a:
       declaration;
#mod ul li li: declaration;
Focus: Maintenance
  think about how sites age
oc us
F
  #3



         JavaScript
JavaScript


• Quality
• Security
1) Quality
Linting

• Use programs like JSLint (jslint.org) to
  confirm the quality of your code.
• Adopt the idioms it promotes to i...
Unit Testing w/ YUI Test
•   Rapid creation of test cases via simple syntax.

•   Advanced failure detection for methods t...
Profiling

• Learn where to improve your code.
• Programmatically retrieve profiling
  information as the application is run...
JavaScript Pollution

• Do not mutate JavaScript itself.
• Do protect yourself from browsers.
• Minimize touchpoints betwe...
2) Security
JavaScript Security

• Beware of XSS
• Never Trust Data from the Client
• Monitor AdSafe/Caja Developments
oc us
F
  #4



         Accessibility
ARIA
Decoupled Events
oc us
F
  #5



   Internationalization
Begin serving all .css
  and .js at UTF-8
@charset quot;
oc us
F
  #6



         Performance
14 then. 8 more today.
<link> not @import


•   Because @import
    overrides the browsers’
    native performance
    sequencing.
Avoid Redirects

• 3xx status codes – mostly 301 and 302
  HTTP/1.1 301 Moved Permanently
  Location: http://yahoo.com/new...
Use Cookie-Free
 Domains For Assets.
• Serving static cacheable assets from a
  distinct domains keeps cookies from riding...
Preload Assets
Preload Assets

1. Unconditional preload - always w/ onload
  Example: google.com’s sprite
Preload Assets

1. Unconditional preload - always w/ onload
  Example: google.com’s sprite

2. Conditional preload - based...
Preload Assets

1. Unconditional preload - always w/ onload
  Example: google.com’s sprite

2. Conditional preload - based...
Optimize CSS Sprites
Optimize CSS Sprites
1. Horizontal alignment is usually smaller than
   vertical.
Optimize CSS Sprites
1. Horizontal alignment is usually smaller than
   vertical.
2. Combine similar colors in a sprite to...
Optimize CSS Sprites
1. Horizontal alignment is usually smaller than
   vertical.
2. Combine similar colors in a sprite to...
GET for Ajax Requests

• POST is a two-step process.
• GET can send in one packet.
• Use if possible, but max payload is 2...
Keep Focusing on Events

1. Event Delegation to reduce total number
2. Don’t always wait for onLoad
 • YUI Event has onAva...
iPhone Tip

• iPhone will not cache assets larger than 25K
  • That’s 25K uncompressed.
  • Only 19 total items in cache.
...
oc us
F
  #7


         Infrastructure &
              Process
Build Process
Documentation
three versions of each member
*.js
*-debug.js
*-min.js
What Is YUI?
oc us
F
  #8



         Tooling
Need More Progress.
But there’s been some:

• JSLint, JScript Debugger, Firebug, Debug Bar,
  Fiddler, Charles, HTTP Live Headers,
  DragonFly...
Historical    Our Beliefs
Perspective    & Principles


 Knowledge
               Why It All
Areas & Best
               M...
There’s a lot of
work to be done.
We need more
people doing it.
The health of the
internet depends on it.
The health of our
businesses and passions
     depends on it.
We must stay vigilant.
We must defend users.
Go forth with this in
       mind:
Be Tireless
Trendsetters of Quality
                   Be active.
             Find the way forward.
                    E...
Be Belligerent
Gatekeepers of Quality
             Do not accept less.
             Do not cut corners.
Exhibit Stubborn
Empathy for Users
          We’re the last line of
               defense!
Let’s keep talking...
       nate@koechley.com
http://nate.koechley.com/blog
      “natekoechley”
CC Images Used
•   http://www.flickr.com/photos/dideo/407360526/sizes/l/

•   http://www.flickr.com/photos/jenniferbuehrer/1...
nate@koechley.com
http://nate.koechley.com/blog

          natekoechley         = twitter,
delicious, flickr, tripit, last...
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Professional Frontend Engineering
Upcoming SlideShare
Loading in...5
×

Professional Frontend Engineering

36,297

Published on

Here are the slides from my talk at @media in London two weeks ago titled "Professional Frontend Engineering." I had four goals for the talk.

Put a stake in the ground.
Reiterate our values.
Advocate the discipline.
Nurture a healthy Web.

The goals were threaded throughout the four sections of the talk::

Historical Perspective
Our Beliefs & Principles
Knowledge Areas & Best Practices
Why It All Matters

The professionalization of frontend engineering is a topic I'm passionate about. I think it is critical to the advancement of the Internet.

Presented May 30th, 2008, in London at the @media conference in the plenary opening day two.

Published in: Technology
2 Comments
124 Likes
Statistics
Notes
No Downloads
Views
Total Views
36,297
On Slideshare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
1,303
Comments
2
Likes
124
Embeds 0
No embeds

No notes for slide

Professional Frontend Engineering

  1. 1. Professional Frontend Engineering Nate Koechley Senior Frontend Engineer Yahoo! natek@yahoo-inc.com | developer.yahoo.com/yui nate.koechley.com/blog | “natekoechley”
  2. 2. Why this topic?
  3. 3. • Put a stake in the ground. • Reiterate our values. • Advocate the discipline. • Nurture a healthy Web.
  4. 4. Historical Perspective
  5. 5. Historical Our Beliefs Perspective & Principles
  6. 6. Historical Our Beliefs Perspective & Principles Knowledge Areas & Best Practices
  7. 7. Historical Our Beliefs Perspective & Principles Knowledge Why It All Areas & Best Matters Practices
  8. 8. Historical Perspective
  9. 9. Year = 2001
  10. 10. Age = 7 years
  11. 11. Employees = 3000
  12. 12. Frontend Engineers = 0
  13. 13. So?
  14. 14. 2001 First frontend engineering specialists hired.
  15. 15. 2008 ~700 professional frontend engineers spread across Y! offices worldwide. And hiring!!!
  16. 16. 2001 Font tags & nested tables. Static interface.
  17. 17. 2008 Semantic & accessible markup. Rich DHTML & Ajax behavior. More content. Same fast speed.
  18. 18. 2001 Available and accessible to everyone.
  19. 19. 2008 Available and accessible to everyone.
  20. 20. 2001 Plain but predictable.
  21. 21. 2008 Highly visual and adaptive, but still dependable.
  22. 22. 2001 Modest user expectations.
  23. 23. 2008 Sophisticated, broad, and non-trivial user expectations.
  24. 24. 2001 Intersection of design and development still vague.
  25. 25. Now Professional Frontend Engineers focused at the intersection of design and development is a best practice.
  26. 26. —Irene Au, SVP of UED at Yahoo!
  27. 27. “In 2001, with developments in advanced JavaScript and DHTML, we knew the web experience would evolve beyond the static pages we were producing. We brought in web developers to help us pioneer Yahoo’s offerings to include a more dynamic, interactive experience for our users.” —Irene Au, SVP of UED at Yahoo!
  28. 28. —Irene Au, SVP of UED at Yahoo!
  29. 29. “... Another motivation was to bring in a disciplined frontend programming practice to Yahoo. Before then, the presentation, behavior, and structure of our pages were not separate, which led to many challenges and inefficiencies in designing and developing our products.” —Irene Au, SVP of UED at Yahoo!
  30. 30. “The Framers of the Web saw browser differences as beneficial and believed that visitors should choose how their browser displays the page...”
  31. 31. “...I wanted more control so I threw my HTML book in the trash and started from scratch.”
  32. 32. The Web is still sick.
  33. 33. Frontend Engineers are the Web’s Radiologists
  34. 34. Question: What is Frontend Engineering?
  35. 35. Answer: We write software in JavaScript, CSS, and HTML & more...
  36. 36. Answer: We tell browsers what to do.
  37. 37. Answer: We’re responsible for “view source”
  38. 38. The Yahoo! Stack Pages & modules 95% HTML, 5% PHP Display logic & APIs 50% HTML, 50% PHP Specific PHP biz logic 90% PHP, 10% Text Generic PHP functions & libs 100% PHP C/C++ Libraries. 90% C/C++, 10% PHP
  39. 39. The Yahoo! Stack Pages & modules Frontend 95% HTML, 5% PHP Display logic & APIs 50% HTML, 50% PHP Specific PHP biz logic 90% PHP, 10% Text Generic PHP functions & libs 100% PHP Backend C/C++ Libraries. 90% C/C++, 10% PHP
  40. 40. The Yahoo! Stack Pages & modules Frontend 95% HTML, 5% PHP Display logic & APIs 50% HTML, 50% PHP Specific PHP biz logic 90% PHP, 10% Text Generic PHP functions & libs 100% PHP Backend C/C++ Libraries. 90% C/C++, 10% PHP
  41. 41. SIMPLE?
  42. 42. no.
  43. 43. server
  44. 44. (X)HTML server
  45. 45. (X)HTML Specification server
  46. 46. (X)HTML Specification Implementation server
  47. 47. (X)HTML Specification Implementation Bugs server
  48. 48. (X)HTML Specification Implementation Bugs [ Theory / Practice ] server
  49. 49. CSS BOM API (X)HTML DOM JavaScript DOM API Specification Data Transport data: custom, xml, mixed: new xhtml Implementation json behavior: js Bugs [ Theory / Practice ] server
  50. 50. Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs Macintosh Windows Linux, Unix, Mobile CSS BOM API (X)HTML DOM JavaScript DOM API Specification Data Transport data: custom, xml, mixed: new xhtml Implementation json behavior: js Bugs [ Theory / Practice ] server
  51. 51. Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs Macintosh Windows Linux, Unix, Mobile CSS BOM API (X)HTML DOM JavaScript DOM API Specification data: custom, xml, mixed: new xhtml, Data Transport Implementation behavior: js json Defects [ Theory / Practice ] server
  52. 52. Safari Firefox Opera IE5, 6, 7 Firefox Opera 10,000+ UAs Macintosh Windows Linux, Unix, Mobile knowledge areas: 7 CSS (X)HTML dimensions: xJavaScript DOM 4 BOM API DOM API platforms: x 3 Specification data: custom, xml, mixed: new xhtml, browsers perDefects platform: x 4 Data Transport Implementation behavior: js json rendering modes: x 2 [ Theory / Practice ] server =672
  53. 53. usability, internationalization, localization, visual design, accessibility, information architecture, security, build processes, performance, benchmarking, devices, portability
  54. 54. from Lifted ©2007 Pixar Animation Studios
  55. 55. Different from Backend because we: • Can’t compile. • Can’t trust. • Can’t predict. • Can’t install or store. • Can’t hide anything!
  56. 56. Douglas Crockford on browsers: “The most hostile software development environment imaginable.”
  57. 57. If your business is online... your value depends on Frontend Engineering.
  58. 58. Elegant algorithms benefit users through interfaces built by Frontend Engineers.
  59. 59. Every gorgeous design is brought to life by Frontend Engineers.
  60. 60. Frontend engineers give sites strength & resilience, appearance & form, and functionality & interactivity.
  61. 61. ...which is why professional frontend engineering is critical for success.
  62. 62. Historical Our Beliefs Perspective & Principles
  63. 63. Four Guiding Principles
  64. 64. 1) Availability
  65. 65. Availability: Maximize availability, accessibility and utility of content and services for all users worldwide.
  66. 66. 2) Openness
  67. 67. Openness: Share. Learn. Support. Advocate. We benefit from a healthy Internet.
  68. 68. 3) Richness
  69. 69. Richness: Provide, but not too much. Layer endlessly. Remember we are not average.
  70. 70. 4) Stability
  71. 71. Stability: The Web is young. Invest in quality. Prepare for the future.
  72. 72. Four Guiding Principles • Availability • Openness • Richness • Stability
  73. 73. Three Core Techniques
  74. 74. 1) Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/
  75. 75. “Support” does not mean identical.
  76. 76. “Support” is not a binary choice.
  77. 77. Three Support Grades
  78. 78. Three Support Grades C-Grade • Blacklist (of incapable browsers) • Withhold CSS & JavaScript
  79. 79. Three Support Grades C-Grade • Blacklist (of incapable browsers) • Withhold CSS & JavaScript A-Grade • Whitelist (of capable browsers tested) • Serve CSS & JavaScript
  80. 80. Three Support Grades C-Grade • Blacklist (of incapable browsers) • Withhold CSS & JavaScript A-Grade • Whitelist (of capable browsers tested) • Serve CSS & JavaScript X-Grade • Everybody else. • Serve CSS & JavaScript
  81. 81. A-Grade Support http://developer.yahoo.com/yui/articles/gbs
  82. 82. C-Grade Experience
  83. 83. A-Grade Experience
  84. 84. C-Grade Experience
  85. 85. A-Grade Experience
  86. 86. 2) Progressive Enhancement
  87. 87. Rules of Progressive Enhancement
  88. 88. Rules of Progressive Enhancement • Enrich content with thorough, explicit markup.
  89. 89. Rules of Progressive Enhancement • Enrich content with thorough, explicit markup. • Test core functionality with HTML only.
  90. 90. Rules of Progressive Enhancement • Enrich content with thorough, explicit markup. • Test core functionality with HTML only. • Enhance layout via externally linked CSS.
  91. 91. Rules of Progressive Enhancement • Enrich content with thorough, explicit markup. • Test core functionality with HTML only. • Enhance layout via externally linked CSS. • Enhance behavior via externally linked unobtrusive JavaScript.
  92. 92. Rules of Progressive Enhancement • Enrich content with thorough, explicit markup. • Test core functionality with HTML only. • Enhance layout via externally linked CSS. • Enhance behavior via externally linked unobtrusive JavaScript. • Respect end-user browser preferences.
  93. 93. Flipped definition of “graceful degradation”
  94. 94. 3) Unobtrusive JavaScript http://onlinetools.org/articles/unobtrusivejavascript/
  95. 95. Rules of Unobtrusive JavaScript
  96. 96. Rules of Unobtrusive JavaScript • No JavaScript in HTML documents.
  97. 97. Rules of Unobtrusive JavaScript • No JavaScript in HTML documents. • Don’t depend on or trust JavaScript.
  98. 98. Rules of Unobtrusive JavaScript • No JavaScript in HTML documents. • Don’t depend on or trust JavaScript. • Poke objects before using them.
  99. 99. Rules of Unobtrusive JavaScript • No JavaScript in HTML documents. • Don’t depend on or trust JavaScript. • Poke objects before using them. • Write JavaScript, not dialects.
  100. 100. Rules of Unobtrusive JavaScript • No JavaScript in HTML documents. • Don’t depend on or trust JavaScript. • Poke objects before using them. • Write JavaScript, not dialects. • Mind your manners with vars & scope.
  101. 101. Rules of Unobtrusive JavaScript • No JavaScript in HTML documents. • Don’t depend on or trust JavaScript. • Poke objects before using them. • Write JavaScript, not dialects. • Mind your manners with vars & scope. • Support multiple event triggers.
  102. 102. Don’t Break the Web! href=“#” href=“javascript:foo()” onclick=“foo()”
  103. 103. Three Core Techniques • Graded Browser Support • Progressive Enhancement • Unobtrusive JavaScript
  104. 104. Making Decisions
  105. 105. Making Decisions (1) 1. Do what is standard. if impossible, then: 2. Do what is common. if impossible, then: 3. Do what it takes.
  106. 106. Making Decisions (2) 1. Do what is simple. ✚ 2. Do what is flexible & progressive. ✚ 3. Do what is open.
  107. 107. Making Decisions (3) • Remember you have multiples audiences to satisfy: • Users • Developers • Machines
  108. 108. Historical Our Beliefs Perspective & Principles Knowledge Areas & Best Practices
  109. 109. 8 Areas of Focus 1. HTML 6. Performance 2. CSS 7. Infrastructure & Process 3. JavaScript 8. Tooling 4. Accessibility 5. Internationalization
  110. 110. oc us F #1 HTML
  111. 111. Focus: Be thorough.
  112. 112. <label>
  113. 113. <fieldset>
  114. 114. <cite>
  115. 115. <caption>
  116. 116. <thead>
  117. 117. <th scope=”row” abbr=”ManU”>
  118. 118. <ins datetime=”2008-05-30”>
  119. 119. Aim for permanence.
  120. 120. Switching costs are rising.
  121. 121. oc us F #2 CSS
  122. 122. Focus on the left side.
  123. 123. selector: declaration;
  124. 124. selector: declaration;
  125. 125. Focus: Specificity great selectors are an expression of professionalism
  126. 126. h1: declaration;
  127. 127. #mod h1: declaration;
  128. 128. div#mod h1: declaration;
  129. 129. body.cart #mod h1.class a: declaration;
  130. 130. #mod ul li li: declaration;
  131. 131. Focus: Maintenance think about how sites age
  132. 132. oc us F #3 JavaScript
  133. 133. JavaScript • Quality • Security
  134. 134. 1) Quality
  135. 135. Linting • Use programs like JSLint (jslint.org) to confirm the quality of your code. • Adopt the idioms it promotes to improve your code quality.
  136. 136. Unit Testing w/ YUI Test • Rapid creation of test cases via simple syntax. • Advanced failure detection for methods that throw errors. • Grouping of related test cases using test suites. • Asynchronous tests for testing events and Ajax communication. • DOM Event simulation in all A-grade browsers.
  137. 137. Profiling • Learn where to improve your code. • Programmatically retrieve profiling information as the application is running. • Determine unit-testing success based on profiling results.
  138. 138. JavaScript Pollution • Do not mutate JavaScript itself. • Do protect yourself from browsers. • Minimize touchpoints between authors and vendors so vendors can iterate faster.
  139. 139. 2) Security
  140. 140. JavaScript Security • Beware of XSS • Never Trust Data from the Client • Monitor AdSafe/Caja Developments
  141. 141. oc us F #4 Accessibility
  142. 142. ARIA
  143. 143. Decoupled Events
  144. 144. oc us F #5 Internationalization
  145. 145. Begin serving all .css and .js at UTF-8
  146. 146. @charset quot;
  147. 147. oc us F #6 Performance
  148. 148. 14 then. 8 more today.
  149. 149. <link> not @import • Because @import overrides the browsers’ native performance sequencing.
  150. 150. Avoid Redirects • 3xx status codes – mostly 301 and 302 HTTP/1.1 301 Moved Permanently Location: http://yahoo.com/newuri • Cache redirects via Expires headers • Redirects are worst form of blocking
  151. 151. Use Cookie-Free Domains For Assets. • Serving static cacheable assets from a distinct domains keeps cookies from riding along with all requests. yimg.com images-amazon.com fbcdn.net
  152. 152. Preload Assets
  153. 153. Preload Assets 1. Unconditional preload - always w/ onload Example: google.com’s sprite
  154. 154. Preload Assets 1. Unconditional preload - always w/ onload Example: google.com’s sprite 2. Conditional preload - based on user action Ex: search.yahoo.com’s Search Assist
  155. 155. Preload Assets 1. Unconditional preload - always w/ onload Example: google.com’s sprite 2. Conditional preload - based on user action Ex: search.yahoo.com’s Search Assist 3. Anticipated preload - give redesigns a boost
  156. 156. Optimize CSS Sprites
  157. 157. Optimize CSS Sprites 1. Horizontal alignment is usually smaller than vertical.
  158. 158. Optimize CSS Sprites 1. Horizontal alignment is usually smaller than vertical. 2. Combine similar colors in a sprite to minimize color count. Only 256 colors can fit in a PNG8.
  159. 159. Optimize CSS Sprites 1. Horizontal alignment is usually smaller than vertical. 2. Combine similar colors in a sprite to minimize color count. Only 256 colors can fit in a PNG8. 3. Avoid unnecessarily large gaps between parts of the sprite.
  160. 160. GET for Ajax Requests • POST is a two-step process. • GET can send in one packet. • Use if possible, but max payload is 2K in IE.
  161. 161. Keep Focusing on Events 1. Event Delegation to reduce total number 2. Don’t always wait for onLoad • YUI Event has onAvailable, onContentReady, & onDomReady
  162. 162. iPhone Tip • iPhone will not cache assets larger than 25K • That’s 25K uncompressed. • Only 19 total items in cache. • http://yuiblog.com/blog/2008/02/06/iphone- cacheability/
  163. 163. oc us F #7 Infrastructure & Process
  164. 164. Build Process
  165. 165. Documentation
  166. 166. three versions of each member
  167. 167. *.js
  168. 168. *-debug.js
  169. 169. *-min.js
  170. 170. What Is YUI?
  171. 171. oc us F #8 Tooling
  172. 172. Need More Progress.
  173. 173. But there’s been some: • JSLint, JScript Debugger, Firebug, Debug Bar, Fiddler, Charles, HTTP Live Headers, DragonFly, Visual Studio 2008 • YUI Logger, YUI Test, and YUI Profiler
  174. 174. Historical Our Beliefs Perspective & Principles Knowledge Why It All Areas & Best Matters Practices
  175. 175. There’s a lot of work to be done.
  176. 176. We need more people doing it.
  177. 177. The health of the internet depends on it.
  178. 178. The health of our businesses and passions depends on it.
  179. 179. We must stay vigilant.
  180. 180. We must defend users.
  181. 181. Go forth with this in mind:
  182. 182. Be Tireless Trendsetters of Quality Be active. Find the way forward. Educate.
  183. 183. Be Belligerent Gatekeepers of Quality Do not accept less. Do not cut corners.
  184. 184. Exhibit Stubborn Empathy for Users We’re the last line of defense!
  185. 185. Let’s keep talking... nate@koechley.com http://nate.koechley.com/blog “natekoechley”
  186. 186. CC Images Used • http://www.flickr.com/photos/dideo/407360526/sizes/l/ • http://www.flickr.com/photos/jenniferbuehrer/113554568/sizes/l/ • http://www.flickr.com/photos/peteashton/290691658/sizes/l/ • http://www.flickr.com/photos/pedjap/101230548/sizes/o/ • http://www.flickr.com/photos/songtuyuri/2200100451/sizes/o/ • http://www.flickr.com/photos/dominik99/1403329318/sizes/o/ • http://www.flickr.com/photos/cuellar/482993472/sizes/o/
  187. 187. nate@koechley.com http://nate.koechley.com/blog natekoechley = twitter, delicious, flickr, tripit, last.fm, linkedin, fireeagle, friendfeed, ... everywhere.
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×