Hej front-end i full-stack developeri — važno je da naučite CSS

Članak koji prenosimo sa bloga Džoša Komoa, poznatog front-end developera, istražuje važno i malo obrađeno pitanje — šta spada u neophodne veštine front-end developera, i na koje načine veštine koje se smatraju sekundarnim, mogu da pospeše i obogate karijeru. Autor ovde razmatra CSS, i naročito obraća pažnju na koje sve načine iskustvo i znanje front-end developera može biti prepreka u učenju CSS-a, i obrazlaže razloge zašto je to dobar smer za razvijanje karijere, a daje  korisne savete o tome kako olakšati učenje.

Važnost učenja CSS-a

Hrpa stvari koje moramo da znamo kao JavaScript developeri nema granicu, i svakog dana je sve veća.

Sa tolikim brojem programskih jezika, alata i tehnologija koji se utrkuju za naše vreme i pažnju, teško je uvideti čemu treba dati prioritet. Poboljšati znanje TypeScript-a? Možda Svelte? Da li ćemo u budućnosti uopšte pisati JS, ili je ovaj „WebAssembly” prava stvar?

Mislim da ako stvarno želimo da maksimalizujemo odnos uloženog i dobijenog, najbolje je da se usredsredimo na CSS.

Možda deluje kao čudan izbor, ali je CSS igrao ogromnu ulogu u mom životu i karijeri kao developera. U ovom članku ću s vama podeliti neke od razloga zbog kojih smatram da je to dobra ideja.

Publika za koju je tekst namenjen:

Ovaj članak pisan je pre svega za front-end / full-stack developere, a naročito za sve one koji vole da koriste savremene JavaScript alate poput React-a, ali ih CSS nervira i zbunjuje.

CSS poboljšava vaš život

Proteklih par meseci razgovarao sam sa velikim brojem developera kojima je CSS mučenje. Imam hipotezu zašto je to tako.

CSS je veoma implicitan jezik, jer se dosta oslanja na mehanizme koji su zakopani  duboko u specifikaciji CSS-a. Kada ti mehanizmi ne rade na način na koji očekujemo, mi tapkamo u mraku i ne znamo šta se dešava. Ne znamo šta u stvari ne znamo.

Uporedimo to sa jezikom poput TypeScript-a: kad napravimo grešku, pojavi se zgodno objašnjenje (tooltip) koje nam javlja gde smo pogrešili. Čak i u labavom JavaScript-u, izuzeci (exceptions) nas vode u pravom smeru (a tu su još i linting, logovi, prelamanja (breakpoints)…).

Kada pišemo kod na bilo kom jeziku, oslanjamo se na mentalni model načina na koji taj jezik funkcioniše. Ako nam je predložak nekompletan ili netačan, dobre su šanse da nećemo dobiti rezultate kakve očekujemo. U CSS-u su te pojave jako česte, baš zbog toga koliko je implicitan sam CSS.

Pogledajmo jedan primer.

U CSS-u z-index može da se koristi da bi se element pomerio ispod ili iznad nekog drugog elementa. U ovom slučaju roze kvadrat stoji ispred sivog jer ima veći z-index.

Međutim, u nekim drugim situacijama, čak i kad sve deluje jako slično, ovo pravilo ne važi. z-index vrednosti se nisu promenile, ali je sada roze kvadrat iza sivog:

Kao i kod mnogo čega drugog što ima veze s CSS-om, z-index krije više stvari ispod površine.

Ako želimo da razumemo kako pregledač koristi z-index vrednosti, moramo da znamo šta su slagajući mehanizmi (stacking contexts), implicitni mehanizam koji upravlja načinom na koji se te vrednosti koriste. Ako vas zanima ta zagonetka, evo jednog mog članka na tu temu.

Ovo nas nervira jer izgleda nepredvidljivo i nasumično. Kao da sadrži elemente ruskog ruleta: kad god da upotrebimo z-index, nadamo se da će da uradi ono što očekujemo od njega.

Važno je odmah naglasiti: ovo nije vaša krivica! Većina resursa koji podučavaju CSS-u govore o površnim svojstvima ili „zgodnim trikovima”, umesto da zalaze dublje u problematiku i bave se stvarima kakve su slagajući mehanizmi (stacking contexts).

I do think that the way CSS has been taught – as a collection of tricks – hasn’t helped people understand the language. And I’ve done that in the past too. You can understand modern CSS as a system, and it makes a lot more sense when you do.

— Rachel Andrew (@rachelandrew) December 4, 2020

(I ja sam kriv za to 😅, ali nemojte mi mnogo zameriti!)

Svojstva kao što su z-index ili position se koriste kao inputi u raznim algoritmima za raspoređivanje (layout algorithms). Umesto da se bavimo pojedinačnim svojstvima, trebalo bi da učimo kako ti algoritmi funkcionišu!

Ovaj pristup može da preobrazi način na koji pomoću CSS-a pravimo interfejs. Tako se razvija čvršća i predvidljivija intuicija, i uvećava naše samopouzdanje u vladanju jezikom. Tako možemo da provodimo sate u zoni, čineći dizajn responzivnim i funkcionalnim, znajući da možemo da rešimo gotovo svaki problem koji se pojavi.

Protekle godine razgovarao sam sa stotinama JavaScript developera o CSS-u, i primetio sam isti obrazac: mnogi JS developeri misle da im mozak nije namešten tako da razumeju CSS. Pretpostavljaju da drugima CSS prirodno ide od ruke i da oni prosto nisu za to.

Kunem vam se, to nije istina. Niko se ne rađa s veštinama CSS-a u rukama. Svako može da postane dobar u CSS-u.

Ne samo da može, nego i treba! Teško je preceniti značaj solidnih CSS veština kad čovek već vlada HTML-om i JS-om. To kompletira sveto trojstvo: sakupili ste sve alate i sada možete da napravite bilo šta. ✨

CSS i developeri „zaleđe front-end-a”

U članku „Velika podela”, Kris je podelio rad na front-endu u dve grupe:

1. „Zaleđe front-end-a”: JavaScript inženjeri koji se usredsređuju na arhitekturu, performanse, logiku aplikacije, React…
2. „Pročelje front-end-a”: UX inženjeri koji se usredsređuju na HTML/CSS, SVG, animaciju, dizajn, pristupačnost…

Da li je CSS važan čak i ako sebe vidite kao „zaleđe front-end-a”?

Mislim da je za većinu ljudi odgovor da!

Način na koji je članak postavljen je korisno gledište za razumevanje industrije, ali mislim da je život mnogo nejasniji — na primer, kada posmatram sopstvene veštine i interesovanja, ona su raštrkana na sve strane! Kad bolje razmislim, ne poznajem nijednog programera koji se lako smešta u bilo koju od ove dve kategorije.

Čak i ako prihvatimo podelu sasvim bukvalno, i kod „JS Inženjera” i dalje postoji gomila CSS-a. Fensi React aplikacije koje pravimo traže interfejse, a oni moraju da se stilizuju!

Postoje delovi front-end developmenta koje nemaju dodirnih tačaka sa CSS-om, poput:

• Optimizacija webpack procesa
• Održavanje end-to-end infrastrukture
• Migracija baze koda iz JS na TS

Ako radite za nekog iz „velike petorke” kao što su Microsoft ili Google, možda zaista provodite 100 odsto vremena na ovakvim stvarima, i godinama niste morali ni da pipnete CSS. U tom slučaju vama CSS možda i nije prioritet.

Većina preostalih front-end developera nisu u takvoj poziciji. Na mestima gde sam ja radio — organizacije poput DigitalOcean i Khan Academy — svi front-end developeri provode neko vreme pišući CSS.

CSS može da vam pomogne u karijeri

U određenim krugovima web-development zajednice postoji ideja da znanje CSS-a nije veština koju poslodavci vrednuju. Ako jurite dobro plaćen posao, važan je samo JS, zar ne?

Iako je tačno da poslodavci daju prednost JS veštinama, pogotovu za seniorske pozicije, tu postoji interesantna dinamika.

Poslodavcima zapravo trebaju developeri koji su dobri i u JS-u, CSS-u, i HTML-u. Sve tri tehnologije čine front-end! Baš zato što toliko JS developera među svojim veštinama ima rupu u obliku CSS-a, te veštine nedostaju.

Skoro sam odslušao sjajnu epizodu Indie Hackers podkasta s Dejvom Gedesom. Dejv je napravio Flexbox Zombies, igru koja podučava osnovama CSS flexbox-eva. Evo odlomka iz epizode:

Neki lik mi je jednom rekao, napisao je da je inženjer junior, i da je tek dobio prvi posao. Radio je uz seniora koji ga je pitao „Kako ti znaš toliko o flexbox-u?… Toliko ga je impresionirao mladić, da ga je pitao kako je to uspeo da uradi.

Jedan od najboljih načina da se istaknete i napredujete u karijeri je da se profilišete kao natprosečni u svom domenu. Prosečan nivo znanja u JavaScript-u je jeb*no visok, baš zato što se toliko developera usredsređuje samo na to. Prosečan nivo znanja CSS-a je mnogo niži. (Stvari možda stoje drugačije van React / JS ekosistema, ovo je samo ono što sam primetio usput, u svom ograničenom iskustvu.)

CSS je težak

Budimo jasni: CSS nije lak jezik za učenje, ni za efektno korišćenje! Kriva učenja podseća na oblik hokejaškog štapa i u tome dosta liči na TypeScript.

Kad tek počnete s učenjem, TypeScript deluje lagano. Par anotacija, trange-frange, i gotovo:

Međutim, čim probate da upotrebite TypeScript u realnom projektu, stvari brzo postanu čupave:

(Kad bolje pogledate, videćete da drugi tultip s upozorenjem ima skrolbar 😱)

S CSS-om je slično. Na početku je sve jasno i deklarativno. Svojstva su intuitivna i brzo mogu da se slože na mesto:

Ali, kada pokušate da napravite veb aplikaciju koja se prilagođava različitim uređajima i pregledačima, koja treba da bude pristupačna, robustna, bez bagova… stvari onda više nisu tako jednostavne.

Neki developeri imaju pogrešan dojam da je CSS lak. Zbog Daning-Krugerovog efekta imaju nezasluženo poverenje u sopstvene sposobnosti.

CSS nije lak, ali je dobra stvar što malo usmerenog učenja može daleko da vas odvede. Ako primenite pravilo 80/20 i najpre se usredsredite na najvažnije delove jezika, prilično brzo možete da postanete kompetentni.

CSS i potraga za poslom

Proces portage za poslom ne valja, ali mislim da se polako poboljšava.

Pre par godina sam prošao kroz proceduru od 8 razgovora. 4 su bili tehnički intervjui, mada me nisu ništa pitali o React-u, JavaScript-u, ili CSS-u, niti bilo čime što je vezano za web-development. Sve je bilo po sistemu „Kako uhakovati programerski intervju”. Algoritmi i strukture podataka, stvari koje veze nemaju sa front-end-om. (Performanse jesu bitne, ali algoritamska složenost je retko kad usko grlo na front-end-u).

Srećom, izgleda da se klima polako menja. Sve više kompanija počinje da shvata suštinu, i u intervjuima i procedurama pokušavaju da imitiraju tipičan svakodnevni rad. Kada sam otišao na intervju za Gatsby Inc, kompaniju koja stoji iza Gatsby.js, tražili su mi da napravim modalni prozor.

Modali su poznati kao nezgodni UI elementi, pogotovo ako se pazi na praktičnost i pristupačnost. Jedno je sigurno: solidno razumevanje CSS-a dosta pomaže.

Na početku ovog članka smo videli par snipeta, i kako z-index može da bude nepredvidljiv. Baš zato što mi je bilo poznato kako rade slagajući mehanizmi (stacking contexts), mogao sam da primenim to znanje u svom rešenju i napravim bolji modal.

Da se razumemo, ne kažem da je samo CSS put za dobro plaćen posao. Na tom intervjuu su mi testirali i mnoge druge veštine, pa i React i JavaScript. Ali ako ovo čitate, mislim da već dovoljno poznajete JS i moderni ekosistem alata i frejmvorka oko njega. Dodavanje CSS-a tom sistemu alata može da bude prilično velika prednost.

Besplatni resursi:

CSS za JavaScript developere je kurs koji se naplaćuje, ali shvatam da nemaju svi sredstva za njega. Srećom, postoji veliki broj neverovatnih besplatnih resursa koje možete da iskoristite za savladavanje CSS-a!

Evo nekih od mojih omiljenih:

• MDN dokumentacija je etalon. Čovek sve može da nauči samo iščitavajući MDN.
• CSS specifikacija je začuđujuće prohodna! Mnogo sam naučio čitajući Flexbox specifikaciju.
• Rejčel Endrju napisala je sjajan blog post, How to Learn CSS.
• CSS Tricks Almanac je sjajan resurs za kopanje i istraživanje pojedinih svojstava.
• Flexbox Zombies je sjajan način da se nauče pravila CSS Flexbox-a.
• Ovaj blog sadrži mnogo CSS tutorijala, a neki su dignuti pravo iz kursa!
• The Rules of Margin Collapse
• What the Heck, z-index??
• An Interactive Guide to CSS Transitions
• Full-Bleed Layout using CSS Grid
• CSS Variables for React Devs