A Front-end Designer's Guide to the Galaxy

Dutch only, sorry :)

My talk for the Webdev minor of CMD Amsterdam

Transcript

1. A Front-end Designer’s Guide to the Galaxy Mattijs Bliek
3. We zijn een creative agency
4. We werken voor zinnige zaken
15. Waar ga ik het vandaag over hebben?
16. 1. The Front-end Designer
17. Dit:
19. IS GEEN
20. IS GEEN FUCKING
21. IS GEEN FUCKING UX DESIGN
22. IS GEEN FUCKING UX DESIGN !
23. “User experience design is [about] improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.” https://en.wikipedia.org/wiki/User_experience_design
25. Pushing the wrong pixels
26. Subscribe! Sign up me@gmail.com
27. Subscribe! Sign up me@gmail.com
28. Subscribe! Sign up mattijs@grrr.nl
29. Thanks for signing up! here’s a gif of a pony while we get your things in order
30. Your account is ready Our pony is sending you there now
31. Your account is ready Our pony is sending you there now Here be fucking magic
32. Maar hoe kom je daar?
33. Enter: The Front-end Designer
34. http://bradfrost.com/blog/post/frontend-design/
35. They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios http://bradfrost.com/blog/post/frontend-design/
36. They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons. http://bradfrost.com/blog/post/frontend-design/
37. They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging. http://bradfrost.com/blog/post/frontend-design/
38. They understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc. http://bradfrost.com/blog/post/frontend-design/
39. Front-end design wordt steeds belangrijker
40. strategy content design development
41. design development strategy content design development strategy content design development strategy content
42. 2. Development als UX
43. UX is niet alleen voor designers
44. Slechte code leidt tot slechte UX
48. Slechte front-end code = Slechte UX voor de user
49. Maar slechte code leidt ook tot slechte UX voor developers
50. De meeste projecten die je nu maakt, gaan de kast in nadat je je cijfer hebt gehad
51. Maintainability
52. The Unix philosophy
53. “The Unix philosophy emphasizes building short, simple, clear, modular, and extensible code that can be easily maintained and repurposed by developers other than its creators. The Unix philosophy favors composability as opposed to monolithic design.” http://en.wikipedia.org/wiki/Unix_philosophy
56. This is software designed according to the Unix philosophy
58. 3. Performance is een feature
59. It’s a mobile world
61. Mobiele connecties zijn traag
63. Maar pagina’s worden steeds zwaarder
69. Ik bedoel dus niet: ‘Mijn pagina is minder dan 1 MB’.
70. Ik bedoel: ‘Mijn pagina rendert in 2 seconden via een 3G verbinding’
71. Critical path & render blocking
72. Libraries, plugins & bullshit
73. HTTP Requests
74. GZIP / Minification
75. Caching / Invalidation
76. Volg deze mensen: Scott Jehl (Filament Group) Ilya Grigorik (Google) Jake Archibald (Google) Paul Lewis (Google) Addy Osmani (Google) Lara Hogan (Etsy)
77. 4. jQuery !== JavaScript
78. Leer vanilla JavaScript te schrijven
85. Leer native mogelijkheden te gebruiken
89. Bonus: leer ES2015
93. Lees deze boeken Eloquent Javascript - Marijn Haaverbeke JavaScript The Good Parts - Douglas Crockford You Don’t Know JS - Kyle Simpson Programming Javascript Applications - Eric Elliot Understanding ECMAScript 6 - Nicholas Zakas
94. 5. Your editor is your friend
95. Installeer een degelijke editor
96. Sublime Text Atom Vim Emacs
97. Keyboard shortcuts
99. Text snippets
101. Linters
103. Creëer je eigen config Git integratie Themes Indentation settings Custom keyboard shortcuts Snippets
104. 6. CLI
105. De CLI—aka command- line interface—is het controle-centrum van waaruit je alles regelt
106. Zodra je in een werkomgeving komt, is basic kennis een vereiste
107. Commando’s als ls, mkdir, cd, grep, helpen je sneller te ontwikkelen
108. Met command-line kennis kun je meewerken aan dev projecten
109. Of open source projecten
110. Met command-line kennis hoef je minder handwerk te verrichten
111. Met command-line kennis hoef je nooit meer de FTP’en
113. 7. Lezen Lezen Lezen Lezen
114. Je gaat van het lezen van blogposts, boeken, en artikelen meer leren dan van welke leraar dan ook. (sorry Koop)
115. Volg mensen op Twitter. Kijk wie werk maakt wat je inspireert.
116. Newsletters PonyFoo All The Small Things WDRL Responsive Design Weekly Twitter twitter.com/mattijsbliek/following Various Hacker News Designer News Echo JS
117. Bonus
118. * Fuck Wordpress
119. Vragen? The Front-end Designer Development als UX Performance is een feature jQuery !== JavaScript Your editor is your friend CLI Lezen lezen lezen 1. 2. 3. 4. 5. 6. 7. Slides https://goo.gl/WHdTq9 Contact details mattijs@grrr.nl @mattijsbliek