3. mart proveli smo na concat() 2018 konferenciji u Salzburgu (conc.at – obratite pažnju kako su pametno iskoristili svoj nacionalni domen 🙂 ). Riječ je o konferenciji posvećenoj veb developerima i dizajnerima koja se organizuje tek drugi put, ali na kojoj smo naučili mnogo zanimljivih i korisnih stvari koje ćemo se potruditi da podijelimo u blog postovima.

1 – Pristupačnost veb sadržaja

Ponovo je bilo riječi o pristupačnosti veb sadržaja. Ova tema se provlači na gotovo  svim konferencijama koje posjetimo i ne može se dovoljno naglasiti ozbiljnost problema nepristupačnog sadržaja. Ovog puta je Estelle Weyjl, developerka, trenerica i autorka, skrenula pažnju na ,,kako”, ne ,,zašto” rješavati ovaj problem:

  • Nikad ne provjeravajte da li posjetilac koristi čitač ekrana. Sada ne postoji tehnička mogućnost za to, ali i ako nekad bude postojala, ne radite to. Korisnici ne žele da vi znate da oni koriste čitač ekrana.
  • Koristite lang attribute jer ćete na taj način reći čitaču ekrana na kom jeziku da korisniku čita sadržaj.
  • Izbjegavajte RDD (resume driven development). Ne pišite kod koji je nov i svjetlucav ako je jedini razog zašto to radite da bi vam portfolio izgledao impresivno.
  • Imajte na umu skup atributa ARIA . Određene atribute ne smijete izostavljati. Estel je mišljenja da bi, ako vaš  <input> element nema postavljen label, title ili placeholder, trebalo da dobijete otkaz.
  • Koristite semantički ispravne elemente HTML-a.
  • Koristite maske za validaciju formi.
    Mask example
  • Izbjegavajte učitavanje 100 različitih biblioteka za stvari koje možete da postignete i bez njih (slajder se može napraviti pomoću radio dugmića, i to se može kontrolisati pomoću strelica ili TAB tastera).
  • Neka sajtovi koje pravite budu brzi, jednostavni i pristupačni.
Ivana Ćorović

Ivana Ćorović

Frontend Developer

Uz vječiti osmjeh i tiho pjevušenje transformiše dizajnerske zamisli u funkcionalna interaktivna rješenja. Njen pixel-perfect osjećaj se u timu smatra magijom. Obično tiha, zna da svojim dosjetkama i neočekivanim komentarima zasjeni i najveće kreativce. Voli i da članove tima vrati u realnost sa svojim “no nonsense” pristupom životu.

2 – Kompatibilnost veb pretraživača

Ola Gasidlo, Web Compatibility inženjerka koja radi u Mozili, govorila je o tome kako bi sada, nakon ratova pretraživača, prljavi hakovi i frustracija testiranja na svim pretraživačima trebalo da budu iza nas. Ali da li je tako? Pretraživači i dalje funckionišu različito, a developeri još uvijek radije pišu dodatni kod ne bi li postigli željeni efekat, a ne prijavljuju probleme.

Koraci koje treba pratiti da bi pisali čistiji kod su:

  1. Poznavanje specifikacija jezika
    • Istraživanja pokazuju da developeri ne znaju tako dobro specifikacije svog omiljenog jezika.
    • W3C je odgovoran za kreiranje specifikacija, tj. skup stanarda, principa i komponenti koji definišu jezik. Utičite na to.
  2. Pisanje kompatibilnog (i unazad kompatibinog) koda
  3. Širenje svijesti o zastarelim pretraivačima (postoji razlog zašto se više koriste)
  4. Prijavljivanje bagova na https://webcompat.com/
  5. Provjera kompatibilnosti na https://caniuse.com/

Koja linija koda od navedenih funkcioniše u Chrome-u, Firefox-u i Edge-u:

  • el.style.webkitTransform
  • el.style.WebkitTransform
  • el.style.[‘-webkit-transform’]
  • el.style.[‘transform’]

Uključite se u zajednicu koja ima uticaja na specifikacije jezika kako bi izbjegli situacije kao što je ova: četiri linije koda koje rade isto, a moraju da funkcionišu u svim pretraživačima.

Da li ste znali da prefiksi nikad nisu bili predviđeni za produkciju (-webkit)?

3 – PRPL šablon za brže učitavanje veb stranica

Houssein Djirdeh, JavaScript developer iz Rangle.io, govorio je o tome koliko je važno da se vaš sajt brzo učitava, naročito na mobilnom telefonu. Broj korisika koji Internetu pristupaju preko telefona je u konstantnom porastu od 2014, a do 2019 se očekuje da će ovakve posjete činiti 63.4%. Dodajte tome činjenicu da je 73% njih izjavilo da su nailazili na sajtove koji se učitavaju pesporo, toliko sporo da se dešava da od njih odustanu. Shvatate motivaciju za razvijanje novih šablona koji koriste prednosti modernih veb platformi kako bi granulirano brže isporučivali sadržaj. Jedan od takvih šablona je PRPL.

PRPL je akronim za:

    • Push (učitati kritične resurse pri učitavanju prvog URL-a koji se posjeti)
    • Render (renderovati početne rute)
    • Pre-cache (unaprijed keširati ostale rute)
    • Lazy-load (lijeno učitavanje ostalih ruta na zahtjev: dajte korisniku ono što mu sad treba, a sve ostalo mu dajte kad mu zatreba)

PRPL pomaže da se isporuči minimalna funkcionalnost potrebna da stranica koju korisnik učita bude interaktivna, naročito za prvo učitavanje na mobilnim telefonima.

Nekoliko stvari koje možete da uradite da bi ubrzali učitavanje sadržaja su:

  • rel=”preload”
    Vrijednost rel atributa <link> elementa omogućava da unaprijed učitate resurse koji su potrebni brzo nakon učitavanja stranice. Na taj način su oni dostupni ranije i manja je šansa da će usporiti prvo renderovanje stranice. Ne preporučije se prekomjerna upotreba preload-a: gledajte na to kao na pokazatelj pretraživaču koji resursi su kritični korisniku.
    Možete čak i unaprijed učitati cross-origin resurse ako postavite i crossorigin atribut.
  • rel=”prefetch”
    Koristi se kao i preload, kao vrijednost rel atributa <link> elementa, ali se koristi više kao nagovještaj pretraživaču o tome koji će resursi možda biti potrebni, dok odluku o tome da li će i kada resursi biti učitani delegira pretraživaču.
    Koristite preload za resurse za koje ste sigurni da su kritični za trenutnu stranu, a prefetch za one koji će vjerovatno biti kritični za narednu.
  • HTTP/2 Server Push
    HTTP/2 server push dozvoljava servery da pošalje korisniku resurse koji još nisu zatraženi. Na primjer:

    • Pretraživač zatraži HTML fajl.
    • Server mu vrati HTML fajl zajedno sa stylesheet-om.
    • Pretraživač krene da parsira HTML. Dok naiđe na <link rel=”stylesheet”>, stylesheet je već u kešu.
Service worker (i dalje nije potpuno podržan od strane pretraživača Edge i Safari)

Service worker se koristi za kešianje application shell-a (teme, layouta). Sigurno ste primijetili kad pristupate facebook-u sa mobilnog da vam se, ako ste konektovani na spor Wi-Fi, učitaju samo plavi okviri, ali da u njima nema sadržaja. Service worker učitava te resurse preko mreže prvi put i kešira ih, tako da je ih ima spremne za svako sledeće učitavanje.

Dinamični sadržaj takođe možete keširati, ali možete podesiti handler u konfiguracionom fajlu svog service worker-a tako da ima jednu od sledećih vrijednosti:

  • networkOnly
  • cacheOnly
  • StaleWhileRevalidate
  • cacheFirst
  • networkFirst
Paketi (bundles)

Ako pretraživač ne podržava  <link rel=”preload”> ili HTTP/2 Push, možete mu isporučivati kod u paketima kako bi smanjili broj upita serveru. Morate voditi računa o veličini paketa, jer paketi rastu kako povećavate logiku na strani klijenta.

  • Code spliting
    Umjesto slanja cijelog JavaScript paketa korisniku prvi prvom učutavanju, posaljite samo onaj dio koji mu je trenutno potreban, a ostalo kad bude potrebno.


PRPL je moguće primijeniti i bez upotrebe svake moguće opcije koja je na raspolaganju. Budite oprezni da ne napravite više štete nego koristi.

4 – Zašto u 2018. treba da pređete na PHP 7

O karakteristikama PHP-a u 2018. govorio je niko drugi do Rasmus Lerdorf, njegov tvorac. Teško je i zamisliti da je PHP nastao kao templating jezik, i to bio dugo. Inicijalna zamisao je bila da PHP bude veoma bogata C struktura šablona HTML-a. Svijet se nije složio, htio je svu logiku u tom sistemu, pa su korisnici čak počeli da pišu templating jezike za templating sistem. Nije bilo izbora: PHP je morao da postane backend jezik.

Generalno gledano, PHP 7 brže obrađuje zahtjeve i zauzima manje memorije (nekad i drastično). Kada je u pitanju WordPress (oko 30% svih sajtova na Internetu), postiže se duplo veća brzina i 6-8 puta veće opterećenje na istom serveru, što znači da vam je za sajt sada dovoljan dosta slabiji hosting.

Bilješke o svim funkcionalnostima koje su dodate, izmijenjene ili izbačene u PHP 7.2 možete pronaću na githabu https://github.com/php/php-src/blob/PHP-7.2/UPGRADING. Izdvajamo neke novosti:

  • Ubrzanje od 70%
  • Poboljšana je CPU upotreba keša
  • Dozvoljeni su zarezi na kraju nabrajanja elemenata iz grupe (trailing commas)
  • each() funkcija je zastarela (deprecated), koristite foreach umjesto nje
  • Stringovi koji nisu pod navodnicima ne uzrokuju više upozorenje već su nepoželjni
  • Veličina zval-a je smanjena sa 24B na 16B
  • Veličina heš tabele je smanjena sa 72B na 56B
  • Veličina baketa heš tabele smanjena je sa 72B na 32B
  • Brži API za iteraciju kroz heš tabele
  • Optimizovano je dupliranje nizova
  • Dodat je novi alokator memorije koji liči na jemalloc
  • Optimizovani su nepromjenljivi nizovi
U narednu petlju nema potrebe ulaziti i izvršavati je 100000 puta, jer će u nizu biti isti elementi koji od nje ne zavise.
$a = []
for($i=0; $i&amp;amp;amp;lt;100000; $i++) {
 $a[] = [1, 2, 3, 4, 5];
}
echo memory_get_usage(true)

PHP 5.x za ovo koristi 109M
PHP 7.0 koristi 42M bez OP keša
PHP 7.0 koristi 6M sa OP kešom

Ako pišete ,,prljavi” kod, PHP 7.2, a naročito 7.3 će ga izvršiti veoma brzo. Na primjer:
function fn() {
 $a = 1;
 return 0; 
}

PHP odradi analizu koda (scope analysis) i vidi da je promjenljiva $a vidljiva samo u ovoj funkciji i da ničemu ne služi, tako da je zanemari i nigdje ne čuva.

Ako ovo nije dovoljna motivacija za prelazak na PHP 7, gledajte na ovu promjenu iz ugla spašavanja planete. Danas PHP pokreće oko 50% od 2 milijarde sajtova koji se nalaze na 10 miliona fizičkih mašina.

  • Jedan server potroši oko 3000KWH godišnje, što je otprilike 400$
  • Hlađenje data centara to udvostručuje
  • Ukupno se proizvede 0.5kg ugljenika po KWH.

Prelazak na PHP 7 na 5% pomenutih servera doveo je do ogromne uštede novca, energije i smanjio zagađivanje. Ušetda se procjenjuje na:

  • 200 miliona dolara
  • 750 miliona KWH
  • 375 miliona kg ugljenika

Ako bi svi serveri prešli na PHP 7, procijenjena ušteda bila bi:

  • 4 milijarde dolara
  • 15 milijardi KWH
  • 7.5 milijardi ugljenika

5 – Vodič za upotebu CSS promjenljivih

Mike Riethmuller, nezavisni developer, pokazao je kako je jednostavno i preporučljivo koristiti CSS promjenljive. CSS promjenljive (poznate i kao CSS Properties) su sada podržane u svim modernim pretraživačima i koriste se u produkciji. CSS promjenljive nisu isto što i promjenljive u prepocesoru (Sas, Less). Razlika je u tome što se CSS promjeljive mogu mijenjati i nakon što je CSS renderovan, dok su CSS vrijednosti promjenljivih u preporcesoru nakon toga uvijek statičke. Zahvaljujući tome se vrijednost CSS promjenljive može mijenjati zavisno od selektora i podložna je nasleđivanju. Na taj način se može promijeniti i njena vijednost u media query-ju i može se koristiti ista promjenljiva koja će na različitim mjestima na stranici imati različite vrijednosti, a kod će biti veoma čitljiv. Štaviše, ovim promjenljivima može se manipulisati i uz pomoć JavaScript-a.

/*Deklaracija promjenljive*/
element { 
	--naziv-promjenljive: red;
}
/*Upotreba promjenljive*/
element { 
	background-color: var(--naziv-promjenljive);
}
/*Primjer*/
p { 
	--boja-teksta: #dddddd;
}
p { color: 
	var(--boja-teksta);
}
Odvajajte logiku od dizajna i trudite se da iskoristite mogućnosti koje CSS promjenljive nude. U narednom primjeru se logika svodi na definisanje promjenljivih, i to je jedino mjesto u kom koristimo media query. Ostatak koda postaje mnogo razumljiviji.
/*Logika*/
:root {
 --font-size-1: 2rem;
 --font-size-2: 1.8rem;
}

@media screen and (min-width: 768px) {
 :root {
 --font-size-1: 2.4rem;
 --font-size-2: 2rem;
 }
}

/*Dizajn*/
h1 {
 font-size: var(--font-size-1);
}
h2 {
 font-size: var(--font-size-2);
}

Dozvoljeno je dodjeljivati preprocesorske promjenljive CSS promjenljivima. Takođe je dozvoljeno dodjeljivanje jedne CSS promjenljive drugoj.

Savjetuje se korišćenje preprocesora za statičke promjenljive. U narednom primjeru su definisane statičke promjenljive za različite veličine fonta. Uz to je definisana i jedna dinamička promjenljiva kojoj se dodjeljuje neka statička promjenljiva, u zavisnosti od veličine ekrana. Na kraju se vrijednost te dinamičke promjenljive dodjeljuje kao vrijednost veličine fonta elemenata sa klasom<strong> btn</strong>. Na ovaj način je, ponovo, sva logika je odvojena od dizajna.

/*Statičke promjenljive*/
$btn-small: 2rem;
$btn-med: 3rem;
$btn-large: 4rem;

/*Dinamička promjenljiva*/
.btn {
 --button-size: $btn-small;
}

@media screen and (min-width: 768px) {
 .btn-large {
 --button-size: $btn-large;
 }
 .btn-med {
 --button-size: $btn-med;
 }
}
.btn {
 font-size: var(--button-size);
}
Radi preglednosti koda, dobra praksa je velikim slovima imenovati promjenljive koje su globalne. CSS promjenljive su case sensitive.
$default-theme-color: purple;
:root {
	--THEME-COLOR: $default-theme-color;
}
Dozvoljena je dodjela vrijednosti CSS promjenljivoj kroz JavaScript, i kao inline stil.
const elm = document.documentElement;
elm.style.setProperty('--THEME-COLOR', 'yellow');
U narednom projektu pokušajte da koristite CSS promjenljive za vrijednosti koje se mijenjaju za različite elementa i veličine ekrana, a preprocesore za statičke vrijednosti koje su vezane za temu. Ne djeluje teško, a kod postaje mnogo lakši za održavanje.

Da sumiram:

  •  Pravite brze, jednostavne i pristupačne sajtove;
  • Prijavljujte bagove vezane za veb pretraživače na koje naiđete
  • Koristite PRPL da bi vam se sajtovi na mobilnom učitavali što brže i da ne bi gubili te posjete
  • Pređite na PHP 7;
  • Pojednostavite svoj kod uz pomoć CSS promjenljivih.

U svijetu veb developera nema predaha, ali promjene koje se dešavju uslovljene su potrebama korisnika i tehničkim mogućnostima. Iako s vremena na vrijeme moramo usvojiti poneku novu stvar, concat() je ostavio opšti utisak da su promjene tu da olakšaju i programerskoj zajednici da kreiraju lakši, brži, dostupniji i održiviji kod na vebu.

Ivana Ćorović

Ivana Ćorović

Frontend Developer

Uz vječiti osmjeh i tiho pjevušenje transformiše dizajnerske zamisli u funkcionalna interaktivna rješenja. Njen pixel-perfect osjećaj se u timu smatra magijom. Obično tiha, zna da svojim dosjetkama i neočekivanim komentarima zasjeni i najveće kreativce. Voli i da članove tima vrati u realnost sa svojim “no nonsense” pristupom životu.

Ostanite u toku!

Ostanite u toku!

Prijavite se na Alicorn e-mail časopis i budite u toku sa najnovijim člancima našeg tima. Nema spama. Poruke šaljemo rijetko, isključivo kad imamo nešto važno da kažemo.

Hvala! Uspješno ste se prijavili!