Fluent Knowledge Share

This is the slide deck for my Fluent Knowledge share on May 6th. Fluent was a web developer's conference in SF on April 20th-22nd; these are my takeaways from the sessions I attended.

1. Fluent Knowledge Share Jefferson Lam May 6th, 2015
2. “Fluent is for everyone who has a hand in web development, from front-end to back-end and everything in between.”
4. https://github.com/jeffersonlam/talks/tree/master/fluent-2015 Notes & Resources
5. Themes • Web Development & Standards • Git, JS, CSS, Performance • Design • Performance • Culture • Diversity, Learning
6. Git Gitting More Out of Git Jordan Kasper (Strongloop)
7. • Advanced Git tips and techniques • resetting • reflog Gitting More Out of Git Jordan Kasper (Strongloop)
8. Resetting ~$ git reset --hard origin/master ~$ git reset --hard HEAD^ ~$ git reset --hard HEAD^^
9. Reflog ~$ git reflog 84e1f6f HEAD@{0}: reset: moving to HEAD^ d078d5e HEAD@{1}: commit: Fix a giant bug 84e1f6f HEAD@{2}: commit: Add a new feature! 142b98d HEAD@{3}: commit: First commit ~$ git reset --hard HEAD^ HEAD is now at 84e1f6f
10. Reflog ~$ git reflog 84e1f6f HEAD@{0}: reset: moving to HEAD^ d078d5e HEAD@{1}: commit: Fix a giant bug 84e1f6f HEAD@{2}: commit: Add a new feature! 142b98d HEAD@{3}: commit: First commit ~$ git reset --hard HEAD^ HEAD is now at 84e1f6f
11. Uh oh, I reset and lost some important commits!
12. The Reflog never forgets (commits) ~$ git reflog 84e1f6f HEAD@{0}: reset: moving to HEAD^ d078d5e HEAD@{1}: commit: Fix a giant bug 84e1f6f HEAD@{2}: commit: Add a new feature! 142b98d HEAD@{3}: commit: First commit
13. Undoing Things with Reset & Reflog ~$ git reset --hard HEAD@{1} HEAD is now at d078d5e ~$ git reflog d078d5e HEAD@{0}: reset: moving to HEAD@{1} 84e1f6f HEAD@{1}: reset: moving to HEAD^ d078d5e HEAD@{2}: commit: Fix a giant bug 84e1f6f HEAD@{3}: commit: Add a new feature! 142b98d HEAD@{3}: commit: First commit
14. Undoing Things with Reset & Reflog ~$ git reset --hard HEAD@{1} HEAD is now at d078d5e ~$ git reflog d078d5e HEAD@{0}: reset: moving to HEAD@{1} 84e1f6f HEAD@{1}: reset: moving to HEAD^ d078d5e HEAD@{2}: commit: Fix a giant bug 84e1f6f HEAD@{3}: commit: Add a new feature! 142b98d HEAD@{3}: commit: First commit
15. Gitting More Out of Git Jordan Kasper (Strongloop) http://cdn.oreillystatic.com/en/assets/1/event/125/Gitting%20More %20Out%20of%20Git%20Presentation.pdf Slides
16. JavaScript ECMAScript Harmony Brendan Eich (JS Creator) Eliminate JS Smells Elijah Manor (Ramsey Solutions)
17. • This dude is alive! • JS compilers are pretty good • JS is ever evolving. Embrace the change ECMAScript Harmony Brendan Eich (JS Creator)
18. ECMAScript Harmony Brendan Eich (JS Creator) https://www.youtube.com/watch? v=PlmsweSNhTw&list=PL055Epbe6d5ZqIHE7NA5f6Iq_bZNjuWvS&index=4 Video
19. Eliminate JS Smells Elijah Manor (Ramsey Solutions) • Standards for non-smelly JS code • Techniques for eliminating smells
20. http://elijahmanor.github.io/talks/js-smells/#/ Slides Eliminate JS Smells Elijah Manor (Ramsey Solutions)
21. CSS SMACSS Your Sass Up Mina Markham (IBM Design)
22. • A concept on how to architect your Sass • Keep your Sass scalable and modular SMACSS Your Sass Up Mina Markham (IBM Design)
23. “CSS is bullshit.” - Mina Markham
24. “This is not a homepage. It’s a collection of modules that make up the homepage.” - Mina Markham
25. Example SMACSS Architecture + scss/ | | + base/ # reset, typography, site-wide | | + layout/ # major components, e.g., header, footer etc. | | + modules/ # minor components, e.g., buttons, widgets etc. | | + states/ # js-based classes, alternative states e.g., success or error | | + themes/ # (optional) separate theme files | | + utilities/ # non-CSS outputs (i.e. mixins, variables) & non-modules | | + _shame.scss # because hacks happen
26. Example SMACSS Architecture + scss/ | | + base/ # reset, typography, site-wide | | + layout/ # major components, e.g., header, footer etc. | | + modules/ # minor components, e.g., buttons, widgets etc. | | + states/ # js-based classes, alternative states e.g., success or error | | + themes/ # (optional) separate theme files | | + utilities/ # non-CSS outputs (i.e. mixins, variables) & non-modules | | + _shame.scss # because hacks happen
27. Example SMACSS Architecture + scss/ | | + base/ # reset, typography, site-wide | | + layout/ # major components, e.g., header, footer etc. | | + modules/ # minor components, e.g., buttons, widgets etc. | | + states/ # js-based classes, alternative states e.g., success or error | | + themes/ # (optional) separate theme files | | + utilities/ # non-CSS outputs (i.e. mixins, variables) & non-modules | | + _shame.scss # because hacks happen
28. Example SMACSS Architecture + scss/ | | + base/ # reset, typography, site-wide | | + layout/ # major components, e.g., header, footer etc. | | + modules/ # minor components, e.g., buttons, widgets etc. | | + states/ # js-based classes, alternative states e.g., success or error | | + themes/ # (optional) separate theme files | | + utilities/ # non-CSS outputs (i.e. mixins, variables) & non-modules | | + _shame.scss # because hacks happen
29. Example SMACSS Architecture + scss/ | | + base/ # reset, typography, site-wide | | + layout/ # major components, e.g., header, footer etc. | | + modules/ # minor components, e.g., buttons, widgets etc. | | + states/ # js-based classes, alternative states e.g., success or error | | + themes/ # (optional) separate theme files | | + utilities/ # non-CSS outputs (i.e. mixins, variables) & non-modules | | + _shame.scss # because hacks happen
30. Example SMACSS Architecture + scss/ | | + base/ # reset, typography, site-wide | | + layout/ # major components, e.g., header, footer etc. | | + modules/ # minor components, e.g., buttons, widgets etc. | | + states/ # js-based classes, alternative states e.g., success or error | | + themes/ # (optional) separate theme files | | + utilities/ # non-CSS outputs (i.e. mixins, variables) & non-modules | | + _shame.scss # because hacks happen
31. Example SMACSS Architecture + scss/ | | + base/ # reset, typography, site-wide | | + layout/ # major components, e.g., header, footer etc. | | + modules/ # minor components, e.g., buttons, widgets etc. | | + states/ # js-based classes, alternative states e.g., success or error | | + themes/ # (optional) separate theme files | | + utilities/ # non-CSS outputs (i.e. mixins, variables) & non-modules | | + _shame.scss # because hacks happen
32. Example SMACSS Architecture + scss/ | | + base/ # reset, typography, site-wide | | + layout/ # major components, e.g., header, footer etc. | | + modules/ # minor components, e.g., buttons, widgets etc. | | + states/ # js-based classes, alternative states e.g., success or error | | + themes/ # (optional) separate theme files | | + utilities/ # non-CSS outputs (i.e. mixins, variables) & non-modules | | + _shame.scss # because hacks happen
33. SMACSS Your Sass Up Mina Markham (IBM Design) http://minamarkham.github.io/smacss-sass-up/#/ Slides
34. Performance How Users Perceive the Speed of The Web Paul Irish (Google Chrome) Extreme Mobile Web Performance Maximiliano Firtman Design + Performance Steve Souders (SpeedCurve) Automate Your Site's Front-End Performance Kitt Hodsden (CodingClan LLC)
35. In summary: Bad performance is bad UX.
38. https://medium.com/@zengabor/three-takeaways-for-web-developers-after-two- weeks-of-painfully-slow-internet-9e7f6d47726e • “Some sites never loaded” • “Takeaway 1: Develop in extra slow emulated mode” Three Takeaways for Web Devs after 2 Weeks of Painfully Slow Internet
39. "I used to be a reckless designer." - Yesenia Perez-Cruz (Philadelphia, PA)
42. For example… *image removed*
43. • Chrome Dev Tools • throttling, timeline • http://www.webpagetest.org • http://whatdoesmysitecost.com/ • In-browser reminders during development • e.g. Etsy engis use in-browser performance widget • Have a performance budget • ms, kb Tools & Techniques
44. Culture Diversity in Tech: The Distorted Truth Christina Truong Welcoming the Web Estelle Weyl (standardista.com) Making Badass Developers Kathy Sierra (SeriousPony)
45. Welcoming the Web Estelle Weyl (standardista.com) • The web development community isn’t very welcoming to everyone (particularly non-male)
46. - Estelle Weyl “50% of women in STEM leave due to hostile work environments.”
47. • There are cultural biases in the tech community Diversity in Tech: The Distorted Truth Christina Truong
48. “It wasn’t long before I realized I was different, and my presence made other people curious, or even uncomfortable." - Christina Truong "I learned to make myself less different, just so I could make my life a little easier." "What I didn't realize at the time was that I was casually erasing my identity."
49. "English-speaking employers in Montreal, Toronto, and Vancouver were 35% more likely to interview an applicant with an English sounding name.” - Christina Truong “In a study where the same resume was screened under two different names - Jennifer and John - Jennifer was perceived as less competent than John.”
50. - Christina Truong "It's difficult to confront or admit you may harbor feelings that go against your beliefs about equality, but identifying it is the first step to correcting it."
51. *image removed*
52. *image removed*
54. • Learn better by understanding the science of cognitive resources! Making Badass Developers Kathy Sierra (SeriousPony)
55. “When you ask experts ‘how did you do that?’, they don’t know, they just know.” “Whatever you practice, the longer you practice being a beginner at it, the better you get at staying a beginner.” - Kathy Sierra
56. Making Badass Developers Kathy Sierra (SeriousPony) https://www.youtube.com/watch?v=FKTxC9pl-WM Video
57. Takeaways Web Development & Standards • Git • Get comfortable with the reflog! • JS • Use linters! • Embrace the change
58. Takeaways Web Development & Standards • CSS • Use Sass! • SMACSS your Sass up • Performance • Make it a priority! • Use performance testing tools
59. Takeaways Design • Performance • Performance is a UX concern! • Design within a performance budget
60. Takeaways Culture • Diversity • Be conscious of & identify cultural & gender biases • Learning • Don’t make people choose cake • Utilize the A-B-C method
61. https://github.com/jeffersonlam/talks/tree/master/fluent-2015 Notes & Resources Thank you!