Tweet
Tweet

Slide 1

Slide 1 text

Fluent Knowledge Share Jefferson Lam May 6th, 2015

Slide 2

Slide 2 text

“Fluent is for everyone who has a hand in web development, from front-end to back-end and everything in between.”

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

https://github.com/jeffersonlam/talks/tree/master/fluent-2015 Notes & Resources

Slide 5

Slide 5 text

Themes • Web Development & Standards • Git, JS, CSS, Performance • Design • Performance • Culture • Diversity, Learning

Slide 6

Slide 6 text

Git Gitting More Out of Git Jordan Kasper (Strongloop)

Slide 7

Slide 7 text

• Advanced Git tips and techniques • resetting • reflog Gitting More Out of Git Jordan Kasper (Strongloop)

Slide 8

Slide 8 text

Resetting ~$ git reset --hard origin/master ~$ git reset --hard HEAD^ ~$ git reset --hard HEAD^^

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Uh oh, I reset and lost some important commits!

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

JavaScript ECMAScript Harmony Brendan Eich (JS Creator) Eliminate JS Smells Elijah Manor (Ramsey Solutions)

Slide 17

Slide 17 text

• This dude is alive! • JS compilers are pretty good • JS is ever evolving. Embrace the change ECMAScript Harmony Brendan Eich (JS Creator)

Slide 18

Slide 18 text

ECMAScript Harmony Brendan Eich (JS Creator) https://www.youtube.com/watch? v=PlmsweSNhTw&list=PL055Epbe6d5ZqIHE7NA5f6Iq_bZNjuWvS&index=4 Video

Slide 19

Slide 19 text

Eliminate JS Smells Elijah Manor (Ramsey Solutions) • Standards for non-smelly JS code • Techniques for eliminating smells

Slide 20

Slide 20 text

http://elijahmanor.github.io/talks/js-smells/#/ Slides Eliminate JS Smells Elijah Manor (Ramsey Solutions)

Slide 21

Slide 21 text

CSS SMACSS Your Sass Up Mina Markham (IBM Design)

Slide 22

Slide 22 text

• A concept on how to architect your Sass • Keep your Sass scalable and modular SMACSS Your Sass Up Mina Markham (IBM Design)

Slide 23

Slide 23 text

“CSS is bullshit.” - Mina Markham

Slide 24

Slide 24 text

“This is not a homepage. It’s a collection of modules that make up the homepage.” - Mina Markham

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

SMACSS Your Sass Up Mina Markham (IBM Design) http://minamarkham.github.io/smacss-sass-up/#/ Slides

Slide 34

Slide 34 text

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)

Slide 35

Slide 35 text

In summary: Bad performance is bad UX.

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

"I used to be a reckless designer." - Yesenia Perez-Cruz (Philadelphia, PA)

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

For example… *image removed*

Slide 43

Slide 43 text

• 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

Slide 44

Slide 44 text

Culture Diversity in Tech: The Distorted Truth Christina Truong Welcoming the Web Estelle Weyl (standardista.com) Making Badass Developers Kathy Sierra (SeriousPony)

Slide 45

Slide 45 text

Welcoming the Web Estelle Weyl (standardista.com) • The web development community isn’t very welcoming to everyone (particularly non-male)

Slide 46

Slide 46 text

- Estelle Weyl “50% of women in STEM leave due to hostile work environments.”

Slide 47

Slide 47 text

• There are cultural biases in the tech community Diversity in Tech: The Distorted Truth Christina Truong

Slide 48

Slide 48 text

“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."

Slide 49

Slide 49 text

"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.”

Slide 50

Slide 50 text

- 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."

Slide 51

Slide 51 text

*image removed*

Slide 52

Slide 52 text

*image removed*

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

• Learn better by understanding the science of cognitive resources! Making Badass Developers Kathy Sierra (SeriousPony)

Slide 55

Slide 55 text

“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

Slide 56

Slide 56 text

Making Badass Developers Kathy Sierra (SeriousPony) https://www.youtube.com/watch?v=FKTxC9pl-WM Video

Slide 57

Slide 57 text

Takeaways Web Development & Standards • Git • Get comfortable with the reflog! • JS • Use linters! • Embrace the change

Slide 58

Slide 58 text

Takeaways Web Development & Standards • CSS • Use Sass! • SMACSS your Sass up • Performance • Make it a priority! • Use performance testing tools

Slide 59

Slide 59 text

Takeaways Design • Performance • Performance is a UX concern! • Design within a performance budget

Slide 60

Slide 60 text

Takeaways Culture • Diversity • Be conscious of & identify cultural & gender biases • Learning • Don’t make people choose cake • Utilize the A-B-C method

Slide 61

Slide 61 text

https://github.com/jeffersonlam/talks/tree/master/fluent-2015 Notes & Resources Thank you!