Niezbędnik frontend developera

Maciej Korsan

Kariera IT, Białystok 2016

Maciej Korsan

• Frontend developer @ SICC
• Wykładowca na studiach podyplomowych Frontend development @ WI PB
• Fotograf @ Korsan Studio
• W internetach @maciejkorsan

SONDA

DZIĘKUJĘ ZA UWAGĘ

@MACIEJKORSAN

FUTUREFICTION.COM

NIEZBĘDNIK FRONTEND DEVELOPERA

• Odpowiednie warunki
• Sprzęt
• Wiedza
• Oprogramowanie

Dlaczego macbook?

• Terminal
• Bateria
• System
• Wytrzymałość
• Naklejki wyglądają spoko

Warto zaglądać

google: vertical align inside div...

smashingmagazine.com

facebook.com/thisispagepro

bit.ly/jsnewspl

fb.com/groups/javascript.bialystok/

Komputer, system operacyjny z dobrym teminalem, internet.

Reszta to tylko hipsterka.

Łukasz Ksawery Rozbicki

oprogramowanie // prototypowanie

uxpin.com

oprogramowanie // prototypowanie

codepen.io / jsbin.com itp.

oprogramowanie // edytor

Sublime

Atom

Visual Studio

WebStorm

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

oprogramowanie // grafika

Photoshop CC (9.99 EUR/miesiąc)

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

oprogramowanie // automatyzacja

Gulp

Grunt

webpack

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

oprogramowanie // preprocesory css

less

sass

oprogramowanie // preprocesory css

• Łatwiejsze zarządzanie kodem (moduły!)
• Szybsze tworzenie
• Dostęp do zmiennych, funkcji, pętli
• Własne generatory

Preprocesory CSS

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;
}

oprogramowanie // lintery

eslint.org/demo/

oprogramowanie // zewnętrzne dane

postman

oprogramowanie // debugowanie

Chrome Developers Tools

oprogramowanie // debugowanie

Chrome Developers Tools // Canary

oprogramowanie // testowanie

30 USD/msc

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

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ł :)

PYTANIA?

DZIĘKUJĘ ZA UWAGĘ

@MACIEJKORSAN