Niezbędnik frontenddevelopera

Maciej KorsanKariera IT, Białystok 2016

1

Maciej Korsan

Frontend developer @ SICCWykładowca na studiach podyplomowych

Frontend development @ WI PBFotograf @ Korsan StudioW internetach @maciejkorsan

2

SONDA

3

4

DZIĘKUJĘ ZA UWAGĘ

@MACIEJKORSAN

5

6

7

FUTUREFICTION.COM

8

2016

9

NIEZBĘDNIK FRONTENDDEVELOPERA

Odpowiednie warunkiSprzętWiedzaOprogramowanie

10

ODPOWIEDNIEWARUNKI

11

12

13

14

15

SPRZĘT

16

17

Dlaczego macbook?

Terminal

Bateria

System

Wytrzymałość

Naklejki wyglądają spoko

18

WIEDZA

19 . 1

19 . 2

Warto zaglądaćgoogle: vertical align inside div...

smashingmagazine.com

facebook.com/thisispagepro

bit.ly/jsnewspl

fb.com/groups/javascript.bialystok/

20

http://bit.ly/felist

21

Komputer, system operacyjny z dobrymteminalem, internet.

Reszta to tylko hipsterka.

Łukasz Ksawery Rozbicki

22

OPROGRAMOWANIE

23

oprogramowanie // prototypowanie

uxpin.com

24

oprogramowanie // prototypowanie

codepen.io / jsbin.com itp.

25

oprogramowanie // edytor

Sublime Atom

Visual Studio WebStorm

26

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

oprogramowanie // grafika

Photoshop CC (9.99 EUR/miesiąc)

28

Zestaw dissów na grafików

29

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

oprogramowanie // automatyzacja

Gulp Grunt

webpack

31

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

oprogramowanie // preprocesory css

less sass

33

oprogramowanie // preprocesory css

Łatwiejsze zarządzanie kodem (moduły!)

Szybsze tworzenie

Dostęp do zmiennych, funkcji, pętli

Własne generatory

Preprocesory CSS

34

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

oprogramowanie // lintery

eslint.org/demo/

36

oprogramowanie // zewnętrzne dane

postman

37

oprogramowanie // debugowanie

Chrome Developers Tools

38

oprogramowanie // debugowanie

Chrome Developers Tools // Canary

39

oprogramowanie // testowanie

30 USD/msc

40

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

Jak nie zwariować?NIE MUSISZ ZNAĆ WSZYSTKICH NAJNOWSZYCHNARZĘDZI!!! (NIE MYŚL NAWET O WDRAŻANIUWSZYSTKICH NOWOŚCI DO ISTNIEJĄCEGO PROJEKTU! Eksperymentuj Nie bój się pytać - każdy kiedyś zaczynał :)

42

PYTANIA?

43

DZIĘKUJĘ ZA UWAGĘ

@MACIEJKORSAN

44