Niezbędnik Frontend developera

Zestaw narzędzi współczesnego frontend developera

Transcript

1. Niezbędnik frontend developera Maciej Korsan Kariera IT, Białystok 2016 1
2. Maciej Korsan Frontend developer @ SICC Wykładowca na studiach podyplomowych Frontend development @ WI PB Fotograf @ Korsan Studio W internetach @maciejkorsan 2
3. SONDA 3
5. DZIĘKUJĘ ZA UWAGĘ @MACIEJKORSAN 5
8. FUTUREFICTION.COM 8
9. 2016 9
10. NIEZBĘDNIK FRONTEND DEVELOPERA Odpowiednie warunki Sprzęt Wiedza Oprogramowanie 10
11. ODPOWIEDNIE WARUNKI 11
16. SPRZĘT 16
18. Dlaczego macbook? Terminal Bateria System Wytrzymałość Naklejki wyglądają spoko 18
19. WIEDZA 19 . 1
20. 19 . 2
21. Warto zaglądać google: vertical align inside div... smashingmagazine.com facebook.com/thisispagepro bit.ly/jsnewspl fb.com/groups/javascript.bialystok/ 20
22. http://bit.ly/felist 21
23. Komputer, system operacyjny z dobrym teminalem, internet. Reszta to tylko hipsterka. Łukasz Ksawery Rozbicki 22
24. OPROGRAMOWANIE 23
25. oprogramowanie // prototypowanie uxpin.com 24
26. oprogramowanie // prototypowanie codepen.io / jsbin.com itp. 25
27. oprogramowanie // edytor Sublime Atom Visual Studio WebStorm 26
28. oprogramowanie // edytor Możliwość dostosowania do własnych potrzeb Wtyczki: emmet (emmet.io), "upiększacze", podpowiedzi itp. Kolorowanie składni (kolory!) Modułowy, lekki, szybki Dobry edytor 27
29. oprogramowanie // grafika Photoshop CC (9.99 EUR/miesiąc) 28
30. Zestaw dissów na grafików 29
31. oprogramowanie // npm Oparty o node.js (niespodzianka!) Zarządzanie paczkami (npm install angular) Instalacja globalna/lokalna Możliwość zapisywania konfiguracji paczek/zależności Node Package Manager 30
32. oprogramowanie // automatyzacja Gulp Grunt webpack 31
33. oprogramowanie // automatyzacja Automatyczne przeładowywanie Monitorowanie plików Budowanie paczek Minifikacja/obfuskacja Procesowanie less/scss (autoprefixer!) ... miejsce na Twój pomysł (masa gotowych modułów!) Automatyzacja 32
34. oprogramowanie // preprocesory css less sass 33
35. oprogramowanie // preprocesory css Łatwiejsze zarządzanie kodem (moduły!) Szybsze tworzenie Dostęp do zmiennych, funkcji, pętli Własne generatory Preprocesory CSS 34
36. oprogramowanie // preprocesory css //less / sass .class { color: pink; .element { background: blue; &:hover { background: red; } } } //css .class { color: pink } .class .element { background: blue; } .class .element:hover { background: red; } 35
37. oprogramowanie // lintery eslint.org/demo/ 36
38. oprogramowanie // zewnętrzne dane postman 37
39. oprogramowanie // debugowanie Chrome Developers Tools 38
40. oprogramowanie // debugowanie Chrome Developers Tools // Canary 39
41. oprogramowanie // testowanie 30 USD/msc 40
42. oprogramowanie // przydatne serwisy colourlovers.com - gotowe palety kolorów i tła validator.w3.org giphy.com flaticon.com - darmowe ikony developers.google.com/products/ chir.ag/projects/name-that-color/ - nazywarka kolorów 41
43. Jak nie zwariować? NIE MUSISZ ZNAĆ WSZYSTKICH NAJNOWSZYCH NARZĘDZI!!! (NIE MYŚL NAWET O WDRAŻANIU WSZYSTKICH NOWOŚCI DO ISTNIEJĄCEGO PROJEKTU! Eksperymentuj Nie bój się pytać - każdy kiedyś zaczynał :) 42
44. PYTANIA? 43
45. DZIĘKUJĘ ZA UWAGĘ @MACIEJKORSAN 44