Front-End Career - Speaker Deck

Slide 1

Slide 1 text

FRONT-END CAREER

Slide 2

Slide 2 text

https://rinaldi.io

Slide 3

Slide 3 text

https://work.co

Slide 4

Slide 4 text

Disclaimer

Slide 5

Slide 5 text

Not a highly technical talk

Slide 6

Slide 6 text

My own experience ~10 years building UIs

Slide 7

Slide 7 text

So, what should I learn?

Slide 8

Slide 8 text

English

Slide 9

Slide 9 text

• Travel abroad • Spend money and get proper training (take it seriously) • Should be your number one priority English

Slide 10

Slide 10 text

Find a mentor

Slide 11

Slide 11 text

Computer Science

Slide 12

Slide 12 text

• 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

Slide 13

Slide 13 text

https://www.udacity.com/course/intro-to-computer-science--cs101

Slide 14

Slide 14 text

https://lagunita.stanford.edu/courses/Engineering/CS101/Summer2014/about

Slide 15

Slide 15 text

Paradigms

Slide 16

Slide 16 text

• Object Oriented Programming (OOP) Paradigms

Slide 17

Slide 17 text

• Object Oriented Programming (OOP) • Functional Programming (FP) Paradigms

Slide 18

Slide 18 text

Best Practices

Slide 19

Slide 19 text

• Modularization Best Practices

Slide 20

Slide 20 text

• Modularization • Refactoring Best Practices

Slide 21

Slide 21 text

• Modularization • Refactoring • Code Smells Best Practices

Slide 22

Slide 22 text

• Modularization • Refactoring • Code Smells • DRY Best Practices

Slide 23

Slide 23 text

• Modularization • Refactoring • Code Smells • DRY • Duplication is better than the wrong abstraction Best Practices

Slide 24

Slide 24 text

https://www.youtube.com/watch?v=8bZh5LMaSmE

Slide 25

Slide 25 text

https://pragprog.com/book/tpp/the-pragmatic-programmer

Slide 26

Slide 26 text

Regular Expressions

Slide 27

Slide 27 text

https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags

Slide 28

Slide 28 text

http://piazinho.com.br/#comprar

Slide 29

Slide 29 text

Command Line

Slide 30

Slide 30 text

But, why?

Slide 31

Slide 31 text

• Reading and writing to files and folders Command Line

Slide 32

Slide 32 text

• Reading and writing to files and folders • Navigating through the file system Command Line

Slide 33

Slide 33 text

• Reading and writing to files and folders • Navigating through the file system • Standard streams Command Line

Slide 34

Slide 34 text

• Reading and writing to files and folders • Navigating through the file system • Standard streams • Shell Script Command Line

Slide 35

Slide 35 text

https://www.udacity.com/course/linux-command-line-basics--ud595

Slide 36

Slide 36 text

http://conqueringthecommandline.com

Slide 37

Slide 37 text

JavaScript

Slide 38

Slide 38 text

But, why?

Slide 39

Slide 39 text

• The syntax JavaScript

Slide 40

Slide 40 text

• The syntax • Context and scopes (how "this" works) (call, apply, bind) JavaScript

Slide 41

Slide 41 text

• The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes JavaScript

Slide 42

Slide 42 text

• The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting JavaScript

Slide 43

Slide 43 text

• The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting • AJAX (Asynchronous JavaScript and XML) (XMLHttpRequest) JavaScript

Slide 44

Slide 44 text

• The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting • AJAX (Asynchronous JavaScript and XML) (XMLHttpRequest) • ES2015 JavaScript

Slide 45

Slide 45 text

https://speakerdeck.com/rafaelrinaldi/es6-for-rubyists

Slide 46

Slide 46 text

https://es6.io

Slide 47

Slide 47 text

• The syntax • Context and scopes (how "this" works) (call, apply, bind) • Prototypes • Hoisting • AJAX (Asynchronous JavaScript and XML) (XMLHttpRequest) • ES2015 • Async JavaScript

Slide 48

Slide 48 text

https://github.com/getify/You-Dont-Know-JS

Slide 49

Slide 49 text

• 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

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

React

Slide 53

Slide 53 text

Don’t fear the frameworks!

Slide 54

Slide 54 text

• Understand why React is an interesting choice • Great component API • Virtual DOM • Functional Programming • React Native React

Slide 55

Slide 55 text

Testing

Slide 56

Slide 56 text

Testing UIs is hard

Slide 57

Slide 57 text

• Unit Tests Testing

Slide 58

Slide 58 text

• Unit Tests • Integration Tests Testing

Slide 59

Slide 59 text

• Unit Tests • Integration Tests • QA Testing

Slide 60

Slide 60 text

• Unit Tests • Integration Tests • QA • Snapshot testing using Jest Testing

Slide 61

Slide 61 text

https://egghead.io/lessons/javascript-test-javascript-with-jest

Slide 62

Slide 62 text

HTML

Slide 63

Slide 63 text

• The DOM (Document Object Model) HTML

Slide 64

Slide 64 text

• The DOM (Document Object Model) • Semantics HTML

Slide 65

Slide 65 text

• The DOM (Document Object Model) • Semantics • Accessibility HTML

Slide 66

Slide 66 text

https://egghead.io/courses/start-building-accessible-web-applications-today

Slide 67

Slide 67 text

CSS

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

• The box model CSS

Slide 70

Slide 70 text

• The box model • The cascade CSS

Slide 71

Slide 71 text

https://speakerdeck.com/rafaelrinaldi/arquitetura-css

Slide 72

Slide 72 text

• The box model • The cascade • Functional CSS CSS

Slide 73

Slide 73 text

https://github.com/chibicode/react-functional-css-protips

Slide 74

Slide 74 text

• The box model • The cascade • Functional CSS • Flexbox CSS

Slide 75

Slide 75 text

https://flexbox.io

Slide 76

Slide 76 text

• The box model • The cascade • Functional CSS • Flexbox • Grid layout CSS

Slide 77

Slide 77 text

HTTP

Slide 78

Slide 78 text

“This page is too slow, how do I fix it?”

Slide 79

Slide 79 text

• From request to page render HTTP

Slide 80

Slide 80 text

• From request to page render HTTP

Slide 81

Slide 81 text

• From request to page render • REST • Cookies HTTP

Slide 82

Slide 82 text

http://desconstruindoaweb.com.br

Slide 83

Slide 83 text

• From request to page render • REST • Cookies • HTTP/2 HTTP

Slide 84

Slide 84 text

https://speakerdeck.com/rafaelrinaldi/2-dot-0

Slide 85

Slide 85 text

Optimization

Slide 86

Slide 86 text

• Image compression Optimization

Slide 87

Slide 87 text

• Image compression • Bundle minification Optimization

Slide 88

Slide 88 text

• Image compression • Bundle minification • Lazy load Optimization

Slide 89

Slide 89 text

• Image compression • Bundle minification • Lazy load • The RAIL Model Optimization

Slide 90

Slide 90 text

https://developers.google.com/web/fundamentals/performance/rail

Slide 91

Slide 91 text

Don’t overthink JavaScript optimizations

Slide 92

Slide 92 text

Design

Slide 93

Slide 93 text

• Sketch Design

Slide 94

Slide 94 text

https://sketchapp.com

Slide 95

Slide 95 text

• Sketch • Diagrams Design

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

• Sketch • Diagrams • Grid systems Design

Slide 98

Slide 98 text

https://www.niggli.ch/en/grid-systems-in-graphic-design.html

Slide 99

Slide 99 text

• Sketch • Diagrams • Grid systems • Typography Design

Slide 100

Slide 100 text

https://www.slideshare.net/eshiota/dominating-the-web-typography

Slide 101

Slide 101 text

• Sketch • Diagrams • Grid systems • Typography • Color theory Design

Slide 102

Slide 102 text

• Sketch • Diagrams • Grid systems • Typography • Color theory • Responsive Design Design

Slide 103

Slide 103 text

https://abookapart.com/products/responsive-web-design

Slide 104

Slide 104 text

• Sketch • Diagrams • Grid systems • Typography • Color theory • Responsive Design • Progressive Enhancement Design

Slide 105

Slide 105 text

Git and GitHub

Slide 106

Slide 106 text

Everything you do should always be under version control

Slide 107

Slide 107 text

• Branching Git and GitHub

Slide 108

Slide 108 text

• Branching • Merging and Rebasing Git and GitHub

Slide 109

Slide 109 text

• Branching • Merging and Rebasing • Cherry Picking Git and GitHub

Slide 110

Slide 110 text

• Branching • Merging and Rebasing • Cherry Picking • Tagging for releases Git and GitHub

Slide 111

Slide 111 text

• Branching • Merging and Rebasing • Cherry Picking • Tagging for releases • Diffing changes Git and GitHub

Slide 112

Slide 112 text

• Branching • Merging and Rebasing • Cherry Picking • Tagging for releases • Diffing changes • Pull Requests Git and GitHub

Slide 113

Slide 113 text

• Branching • Merging and Rebasing • Cherry Picking • Tagging for releases • Diffing changes • Pull Requests • Code Reviews Git and GitHub

Slide 114

Slide 114 text

https://www.udacity.com/course/how-to-use-git-and-github--ud775

Slide 115

Slide 115 text

Tools

Slide 116

Slide 116 text

Find an editor that feels comfortable and stick to it

Slide 117

Slide 117 text

• Text editor or IDE that feels comfortable Tools

Slide 118

Slide 118 text

• Text editor or IDE that feels comfortable • Linting (ESLint) Tools

Slide 119

Slide 119 text

• Text editor or IDE that feels comfortable • Linting (ESLint) • Formatting (Prettier) Tools

Slide 120

Slide 120 text

• Text editor or IDE that feels comfortable • Linting (ESLint) • Formatting (Prettier) • REPL Tools

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

• Text editor or IDE that feels comfortable • Linting (ESLint) • Formatting (Prettier) • REPL • Documentation lookup Tools

Slide 123

Slide 123 text

https://devdocs.io

Slide 124

Slide 124 text

https://github.com/rafaelrinaldi/mdn

Slide 125

Slide 125 text

• Text editor or IDE that feels comfortable • Linting (ESLint) • Formatting (Prettier) • REPL • Documentation lookup • Debugging Tools

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

https://egghead.io/courses/chrome-devtools-sources-panel

Slide 128

Slide 128 text

Communication

Slide 129

Slide 129 text

Writing code is just part of what we do

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

• Exercise empathy Communication

Slide 132

Slide 132 text

• Exercise empathy • Listen Communication

Slide 133

Slide 133 text

• Exercise empathy • Listen • Review the code, not the person Communication

Slide 134

Slide 134 text

• Exercise empathy • Listen • Review the code, not the person • Communication via text is super hard Communication

Slide 135

Slide 135 text

• Exercise empathy • Listen • Review the code, not the person • Communication via text is super hard • Pair Programming Communication

Slide 136

Slide 136 text

• Exercise empathy • Listen • Review the code, not the person • Communication via text is super hard • Pair Programming • Agile Ceremonies Communication

Slide 137

Slide 137 text

• 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

Slide 138

Slide 138 text

Slide 139

Slide 139 text

Wrap up

Slide 140

Slide 140 text

Reinvent the wheel!

Slide 141

Slide 141 text

Never stop learning

Slide 142

Slide 142 text

Don’t get too comfortable

Slide 143

Slide 143 text

Learn by doing

Slide 144

Slide 144 text

Contribute to an open source project

Slide 145

Slide 145 text

https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github