Front-End Career

This talk was presented as a 2017 wrap up for Udacity's React Nanodegree program, where I'm part of the official team of instructors.

The idea was to share my experience and beliefs on what things one should consider learning in order to become a Front-End developer. It was targeted for an audience that is either starting with web development or people in different areas of computer programming wanting to shift their focus to the web.

The talk has received really good feedback from the students so far.

Udacity's React Nanodegree program:
https://br.udacity.com/course/react-nanodegree--nd019

Video (in Brazilian Portuguese):
https://www.youtube.com/watch?v=nll-IIQmVNs

Transcript

1. FRONT-END CAREER
2. https://rinaldi.io
3. https://work.co
4. Disclaimer
5. Not a highly technical talk
6. My own experience ~10 years building UIs
7. So, what should I learn?
8. English
9. • Travel abroad • Spend money and get proper training (take it seriously) • Should be your number one priority English
10. Find a mentor
11. Computer Science
12. • You don’t have to master all of Computer Science • It’ll help you find solutions to your problems • It’ll smooth out the transition between languages and paradigms • Abstractions: somebody probably already have solved it for you • Can help you in programming interviews Computer Science
13. https://www.udacity.com/course/intro-to-computer-science--cs101
14. https://lagunita.stanford.edu/courses/Engineering/CS101/Summer2014/about
15. Paradigms
16. • Object Oriented Programming (OOP) Paradigms
17. • Object Oriented Programming (OOP) • Functional Programming (FP) Paradigms
18. Best Practices
19. • Modularization Best Practices
20. • Modularization • Refactoring Best Practices
21. • Modularization • Refactoring • Code Smells Best Practices
22. • Modularization • Refactoring • Code Smells • DRY Best Practices
23. • Modularization • Refactoring • Code Smells • DRY • Duplication is better than the wrong abstraction Best Practices
24. https://www.youtube.com/watch?v=8bZh5LMaSmE
25. https://pragprog.com/book/tpp/the-pragmatic-programmer
26. Regular Expressions
27. https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags
28. http://piazinho.com.br/#comprar
29. Command Line
30. But, why?
31. • Reading and writing to files and folders Command Line
32. • Reading and writing to files and folders • Navigating through the file system Command Line
33. • Reading and writing to files and folders • Navigating through the file system • Standard streams Command Line
34. • Reading and writing to files and folders • Navigating through the file system • Standard streams • Shell Script Command Line
35. https://www.udacity.com/course/linux-command-line-basics--ud595
36. http://conqueringthecommandline.com
37. JavaScript
38. But, why?
39. • The syntax JavaScript
40. • The syntax • Context and scopes (how "this" works) (call, apply, bind) JavaScript
41. • The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes JavaScript
42. • The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting JavaScript
43. • The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting • AJAX (Asynchronous JavaScript and XML) (XMLHttpRequest) JavaScript
44. • The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting • AJAX (Asynchronous JavaScript and XML) (XMLHttpRequest) • ES2015 JavaScript
45. https://speakerdeck.com/rafaelrinaldi/es6-for-rubyists
46. https://es6.io
47. • The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting • AJAX (Asynchronous JavaScript and XML) (XMLHttpRequest) • ES2015 • Async JavaScript
48. https://github.com/getify/You-Dont-Know-JS
49. • The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting • AJAX (Asynchronous JavaScript and XML) (XMLHttpRequest) • ES2015 • Async • Module Formats (CommonJS, ES Modules) JavaScript
50. • The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting • AJAX (Asynchronous JavaScript and XML) (XMLHttpRequest) • ES2015 • Async • Module Formats (CommonJS, ES Modules) • npm JavaScript
51. • The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting • AJAX (Asynchronous JavaScript and XML) (XMLHttpRequest) • ES2015 • Async • Module Formats (CommonJS, ES Modules) • npm • Node.js JavaScript
52. React
53. Don’t fear the frameworks!
54. • Understand why React is an interesting choice • Great component API • Virtual DOM • Functional Programming • React Native React
55. Testing
56. Testing UIs is hard
57. • Unit Tests Testing
58. • Unit Tests • Integration Tests Testing
59. • Unit Tests • Integration Tests • QA Testing
60. • Unit Tests • Integration Tests • QA • Snapshot testing using Jest Testing
61. https://egghead.io/lessons/javascript-test-javascript-with-jest
62. HTML
63. • The DOM (Document Object Model) HTML
64. • The DOM (Document Object Model) • Semantics HTML
65. • The DOM (Document Object Model) • Semantics • Accessibility HTML
66. https://egghead.io/courses/start-building-accessible-web-applications-today
67. CSS
69. • The box model CSS
70. • The box model • The cascade CSS
71. https://speakerdeck.com/rafaelrinaldi/arquitetura-css
72. • The box model • The cascade • Functional CSS CSS
73. https://github.com/chibicode/react-functional-css-protips
74. • The box model • The cascade • Functional CSS • Flexbox CSS
75. https://flexbox.io
76. • The box model • The cascade • Functional CSS • Flexbox • Grid layout CSS
77. HTTP
78. “This page is too slow, how do I fix it?”
79. • From request to page render HTTP
80. • From request to page render HTTP
81. • From request to page render • REST • Cookies HTTP
82. http://desconstruindoaweb.com.br
83. • From request to page render • REST • Cookies • HTTP/2 HTTP
84. https://speakerdeck.com/rafaelrinaldi/2-dot-0
85. Optimization
86. • Image compression Optimization
87. • Image compression • Bundle minification Optimization
88. • Image compression • Bundle minification • Lazy load Optimization
89. • Image compression • Bundle minification • Lazy load • The RAIL Model Optimization
90. https://developers.google.com/web/fundamentals/performance/rail
91. Don’t overthink JavaScript optimizations
92. Design
93. • Sketch Design
94. https://sketchapp.com
95. • Sketch • Diagrams Design
97. • Sketch • Diagrams • Grid systems Design
98. https://www.niggli.ch/en/grid-systems-in-graphic-design.html
99. • Sketch • Diagrams • Grid systems • Typography Design
100. https://www.slideshare.net/eshiota/dominating-the-web-typography
101. • Sketch • Diagrams • Grid systems • Typography • Color theory Design
102. • Sketch • Diagrams • Grid systems • Typography • Color theory • Responsive Design Design
103. https://abookapart.com/products/responsive-web-design
104. • Sketch • Diagrams • Grid systems • Typography • Color theory • Responsive Design • Progressive Enhancement Design
105. Git and GitHub
106. Everything you do should always be under version control
107. • Branching Git and GitHub
108. • Branching • Merging and Rebasing Git and GitHub
109. • Branching • Merging and Rebasing • Cherry Picking Git and GitHub
110. • Branching • Merging and Rebasing • Cherry Picking • Tagging for releases Git and GitHub
111. • Branching • Merging and Rebasing • Cherry Picking • Tagging for releases • Diffing changes Git and GitHub
112. • Branching • Merging and Rebasing • Cherry Picking • Tagging for releases • Diffing changes • Pull Requests Git and GitHub
113. • Branching • Merging and Rebasing • Cherry Picking • Tagging for releases • Diffing changes • Pull Requests • Code Reviews Git and GitHub
114. https://www.udacity.com/course/how-to-use-git-and-github--ud775
115. Tools
116. Find an editor that feels comfortable and stick to it
117. • Text editor or IDE that feels comfortable Tools
118. • Text editor or IDE that feels comfortable • Linting (ESLint) Tools
119. • Text editor or IDE that feels comfortable • Linting (ESLint) • Formatting (Prettier) Tools
120. • Text editor or IDE that feels comfortable • Linting (ESLint) • Formatting (Prettier) • REPL Tools
122. • Text editor or IDE that feels comfortable • Linting (ESLint) • Formatting (Prettier) • REPL • Documentation lookup Tools
123. https://devdocs.io
124. https://github.com/rafaelrinaldi/mdn
125. • Text editor or IDE that feels comfortable • Linting (ESLint) • Formatting (Prettier) • REPL • Documentation lookup • Debugging Tools
127. https://egghead.io/courses/chrome-devtools-sources-panel
128. Communication
129. Writing code is just part of what we do
131. • Exercise empathy Communication
132. • Exercise empathy • Listen Communication
133. • Exercise empathy • Listen • Review the code, not the person Communication
134. • Exercise empathy • Listen • Review the code, not the person • Communication via text is super hard Communication
135. • Exercise empathy • Listen • Review the code, not the person • Communication via text is super hard • Pair Programming Communication
136. • Exercise empathy • Listen • Review the code, not the person • Communication via text is super hard • Pair Programming • Agile Ceremonies Communication
137. • Exercise empathy • Listen • Review the code, not the person • Communication via text is super hard • Pair Programming • Agile Ceremonies • Ask for feedback (not the good, but the ugly) Communication
138. • Exercise empathy • Listen • Review the code, not the person • Communication via text is super hard • Pair Programming • Agile Ceremonies • Ask for feedback (not the good, but the ugly) • Documentation Communication
139. Wrap up
140. Reinvent the wheel!
141. Never stop learning
142. Don’t get too comfortable
143. Learn by doing
144. Contribute to an open source project
145. https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github
146. Attend to meet ups and conferences
147. Don’t worry about job titles or roles
148. Critical Thinking: Know how to evaluate options for yourself
149. Don’t be cheap
150. Associate with people who are likely to improve you. “ – Seneca
151. Learn how to spend your time wisely
152. http://gettingthingsdone.com
153. Learn how to manage your money wisely
154. https://cs007.blog
155. https://www.magnetis.com.br/convite/c85599
157. Thank you https://rinaldi.io