Recenzija: CSS Grid by Wes Bos, 1. dio

Kada su u pitanju HTML i CSS dosta developera voli misliti da ih zna 90%-100%, a upravo ovakvi tečajevi služe da to demantiraju.

Wes Bos je poduzetnik i autor nekoliko tečajeva, među kojima je i ovaj o CSS Gridu. S obzirom da mi njegov stil podučavanja odgovara neke od tečajeva sam i kupio kako bi na strukturiran način saznao i naučio nešto novo.

Redovito ih se sjetim kada me netko od kolega pita za dobre online resurse, a prema njihovim pozitivnim reakcijama zaključio sam da bi bilo dobro nešto više o tome napisati i na blogu.

Jedan od tih tečajeva je CSS Grid koji je u potpunosti besplatan, a moguće ga je pronaći na adresi https://cssgrid.io/. Sastoji se od 25 videa tj. lekcija od kojih će svaka biti detaljnije pojašnjena u nastavku. Trajanje snimljenog materijala je 4 sata, ali ako se paralelno idu raditi primjeri satnica će vrlo brzo rasti.

CSS Grid by Wes Bos

1. Introduction

U ovom dijelu Wes Bos daje uvod u tečaj i naglašava kako Firefox stoji iza odluke da tečaj bude besplatan zbog čega ćemo koristiti njihove alate u nastavku tečaja.

Autor također potiče developere koji će krenuti s ovim tečajem da redovito daju povratne informacije, bilo to putem društvenih mreža ili blogova.

Osim toga, na svakome od nas ostaje odluka hoćemo li ovaj tečaj pogledati samo da bismo mogli reći da smo ga prošli ili ćemo paralelno raditi primjere i tako nešto konkretno i naučiti.

2. Starter files

Preporuka ovog dijela tečaja je preuzeti i koristiti Firefox Quantum: Developer Edition koji je sa svojim naprednim rješenjima prilagođen upravo developerima.

Sve starter datoteke moguće je preuzeti na adresi https://courses.wesbos.com/account/ nakon besplatne registracije. Za one nestrpljive datoteke se nalaze i na sljedećoj poveznici https://github.com/wesbos/css-grid.

Nakon preuzimanja moguće je vidjeti package.json datoteku:

Zbog paketa “browser-sync” i “run-script-os” potrebno je na računalu imati instaliran NodeJS.

Pokretanjem ove dvije naredbe instaliram ranije navedene NPM pakete i tečaj mi se otvara u odabranom web pregledniku.

CSS Grid by Wes Bos

Ovo je sada temelj svega što ću u nastavku raditi.

3. CSS Grid Fundamentals

Fokus ovog dijela tečaja je odgovor na pitanje – što je CSS Grid? U donjem primjeru ako smo za klasu container rekli da je display: grid; automatski smo sve unutarnje elemente, u ovom slučaju to su <div class="item">1</div>, klasificirali kao dijelove CSS Grida.

Nakon toga ostaje podijeliti ih u redove i kolone pomoću: grid-template-columns, grid-template-rows i grid-gap.

4. CSS Grid Dev Tools

Desni klik miša tj. odabir “Inspect Elements” vodi nas do dijela web preglednika koji je poznat svakom web developeru.

Ovdje upoznajemo Grid Inspector.

Grid Inspector

5. CSS Grid Implicit vs Explicit Tracks

Explicit označava sve redove (grid-template-columns) i kolone (grid-template-rows) koje smo sami odredili tj. zadali im parametre. U ovom primjeru to su prva dva stupca tj. prva dva retka.

Explicit CSS Grid

Implicit označava sve preostale stupce (grid-auto-columns) i retke (grid-auto-rows). U ovom primjeru to su zadnja dva, tj. blokovi 5, 6, 7 i 8.

Implicit CSS Grid

Zaključno, u sljedećem primjeru explicit su nam redovi dok su stupci implicit jer njih nigdje nismo definirali, a svejedno ih imamo.

CSS Grid Implicit vs Explicit Tracks

6. CSS Grid Auto Flow

U ovom dijelu tečaja pojašnjen je grid-auto-flow pomoću kojega određujemo hoće li implicitno kreirani elementi biti prikazani kao redovi ili stupci.

U startu dodajemo dva elementa i za njih definiramo dva stupca.

CSS Grid Auto Flow

Međutim, ako dodamo nekoliko novih elemenata koje nismo eksplicitno odredili pitanje je gdje će se oni prikazati.

Zadano će biti prikazani kao redovi,

CSS Grid Auto Flow

a možemo ih prikazati i kao stupce.

CSS Grid Auto Flow

Zaključno, na taj se način može napraviti horizontalni scroll.

CSS Grid Auto Flow

7. Sizing tracks in CSS Grid

Ovdje se upoznajemo s fr (fractional unit) jedinicom koja označava preostali slobodan prostor na ekranu.

Ako definiramo tri stupca na sljedeći način

prva dva će biti široka 150px dok će zadnji biti širok koliko god je ostalo viška prostora.

Fr (fractional unit) uzima u obzir grid-gap tako da naši stupci prikazuju u prostoru koji ostane nakon što se zauzme grid-gap.

Sizing tracks in CSS Grid

Isto tako, moguće je koristiti i parametar auto.

Donji primjer označava prvi stupac čija je širina određena kao auto što znači da će on biti širok koliko i sadržaj unutar njega dok će drugi stupac uzeti preostali prostor 1fr.

Sizing tracks in CSS Grid

8. CSS Grid repeat function

Sve navedeno ranije može se napraviti na jednostavniji način koristeći repeat() funkciju. Npr. umjesto definiranja četiri stupca na standardni način

možemo ih definirati na sljedeći način gdje prva vrijednost označava koliko puta je taj element potrebno ponoviti, a druga vrijednost označava širinu.

Rezultat će biti isti tj. imati ćemo četiri stupca jednake širine.

CSS Grid repeat function

Mogu se raditi i naprednije stvari. Npr. prvi stupac će biti širok 100px dok će od preostalih osam jedan biti 1fr, drugi 2fr, treći 1fr,…

CSS Grid repeat function

9. Sizing Grid Items

U ovom dijelu fokus je na pojedinačnim elementima kompletnog grida, <div class="item item1">1</div>.

Ako napravimo sljedeće dobit ćemo pet stupaca koji su raspoređeni tako da zauzimaju sav slobodan prostor.

Sizing grid items

Pomoću parametara grid-column i grid-row možemo zadati visinu odnosno širinu pojedinog elementa, neka to sada bude .item17. Ostali elementi se automatski repozicioniraju.

Pomoću grid-column: span 2; određujemo širinu.

Sizing grid items

Pomoću grid-row: span 2; određujemo visinu.

Sizing grid items

Ako ih koristimo zajedno određujemo visinu i širinu.

Sizing grid items

U primjeru na slici iznad odredili smo visinu i širinu jednog elementa dok su se ostali automatski posložili na svoje nove pozicije.

U nastavku se može vidjeti primjer kada odabranom elementu zadajemo mjesto početka i mjesto završetka.

10. Placing Grid Items

Početni raspored svih elemenata izgleda ovako i ovdje će fokus biti na pozicioniranju elementa s klasom .poop.

Placing Grid Items

Na ovaj način određujem startnu poziciju odabranog elementa.

Placing Grid Items

Sada ću uz mjesto početka odabranom elementu zadati i mjesto završetka.

To mogu napraviti pojedinačno za početak i završetak.

A mogu i na skraćeni način.

Rezultat je isti.

Placing Grid Items

Osim što odabranom elementu na gornji način mogu reći gdje počinje i završava također mu na sljedeći način mogu odrediti širinu.

Placing Grid Items

Placing Grid Items

Ako želim da odabrani element uvijek počinje na prvom mjestu i završava na posljednjem napravit ću sljedeće. Ovo se može koristiti i kao zamjena za width: 100%;

Placing Grid Items

Isto to možemo napraviti i kada su u pitanju redovi koristeći grid-row.

Placing Grid Items

Naravno, moguće ih je i kombinirati.

Placing Grid Items

Nastavak ovog blog posta uskoro pod naslovom “Recenzija: CSS Grid by Wes Bos, 2. dio“.

Compodoc – izrada dokumentacije Angular aplikacije

Kada se radi na izradi Angular aplikacija osim poznavanja sintakse važno je imati dobru dokumentaciju kako bi svi uključeni u proces razvoja imali uvid u ono što se i kako radi.

Osim toga, ta se dokumentacija može lijepo iskoristiti prilikom uvođenja novih članova tima koji na jednom mjestu mogu dobiti uvid u sve komponente neke Angular aplikacije.

Compodoc – izrada dokumentacije Angular aplikacije

https://compodoc.app/ služi upravo tome i na jednostavna i brz način pruža automatsku izradu osnovne dokumentacije za Angular aplikacije. Kada kažem osnovne mislim na dio koji se dobije pokretanje jedne naredbe o kojoj će biti riječi u nastavku. Osim toga moguće je dodatno prilagoditi dokumentaciju (npr. izbaciti neke dijelove aplikacije iz dokumentacije) specifičnim potrebama svakog projekta.

Kreiranje aplikacije

Naravno, prije izrade dokumentacije potrebno je imati kreiranu aplikaciju.

Može to biti web aplikacija ili mobilna aplikacija, samo je važno da se u pozadini nalazi Angular.

Za potrebu ovog blog posta iskoristit ću projekt Ionic 3 Start Theme jer se sastoji od puno različitih komponenti što će dobro doći za prikaz dokumentacije.

Ionic 3 Start Theme
Izvor: https://github.com/ionictheme/ionic3-start-theme

Izrada dokumentacije

Unutar mape projekta potrebno je pokrenuti sljedeću naredbu:

U to će se trenutku unutar package.json datoteke pod devDependencies dodati sljedeće:

Osim toga, unutar iste datoteke potrebno je dodati još i sljedeće:

Compodoc help

Sada je sve spremno za generiranje dokumentacije što se radi naredbom:

Compodoc – izrada dokumentacije Angular aplikacije

Nakon izvršenja naredbe pojavit će se mapa documentation.

Compodoc – izrada dokumentacije Angular aplikacije

Dokumentaciju je moguće vidjeti na da načina. Prvi je posjetom na adresu http://127.0.0.1:8080/, a drugi je otvaranjem datoteke documentation/index.html.

Compodoc – izrada dokumentacije Angular aplikacije

Zaključak

Dokumentacija može biti puno konkretnija od ranije prikazanog.

Ostale mogućnosti moguće je pronaći na adresi https://compodoc.app/guides/getting-started.html

Angular Multiselect Dropdown komponenta za web aplikacije

Angular2 Multiselect Dropdown
https://www.npmjs.com/package/angular2-multiselect-dropdown

U ovom ću blog postu pokazati kako na brz i jednostavan način ugraditi multiselect dropdown komponentu u Angular web aplikaciju.

Za početak, kreiram novi projekt koristeći Angular CLI.

Na adresi http://localhost:4200/ dobijem sljedeće:

Novi Angular projekt

Nakon što sam uspješno kreirao projekt mogu dodati potrebnu komponentu, a to radim, unutar mape projekta, naredbom:

npm i angular2-multiselect-dropdown

Jednom kada je komponenta uspješno instalirana potrebno je istu dodati unutar app.module.ts datoteke.

U dokumentaciji komponente navedeno je

From v3.0.0 onwards, you need to include default.theme.css file to get the basic styling of the dropdown.

tako da ću datoteku default.theme.css uključiti u projekt kako bi dobio zadani stil komponente.

To radim na način da unutar datoteke angular.json dodam sljedeće:

Tek sada se mogu baciti na konkretan rad s komponentom.

Unutar HTML datoteke dodajem sljedeće:

Ova se komponenta unutar angular2-multiselect tagova sastoji od nekoliko dijelova:

  • [data] – podaci kojima će se napuniti komponenta
  • [(ngModel)] – two-way binding
  • [settings] – poziva objekt s postavkama tog konkretnog padajućeg izbornika
  • (onSelect) – poziva funkciju koja će nešto napraviti kada se odabere jedan ili više podataka iz padajućeg izbornika
  • (onDeSelect) – poziva funkciju koja će nešto napraviti kada se odznači jedan ili više podataka iz padajućeg izbornika
  • (onSelectAll) – poziva funkciju koja će nešto napraviti kada se odaberu svi podataci iz padajućeg izbornika
  • (onDeSelectAll) – poziva funkciju koja će nešto napraviti kada se odznače svi podataci iz padajućeg izbornika
  • (onOpen) – metoda koja se poziva pri otvaranju padajućeg izbornika
  • (onClose) – metoda koja se poziva pri zatvaranju padajućeg izbornika

Sada ću unutar app.component.ts datoteke kreirati funkcionalnost koja će upravljati podacima.

U praksi to izgleda ovako:

Angular Multiselect Dropdown komponenta za web aplikacije

P.S. U slučaju pojavljivanja sljedeće greške

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘angular2-multiselect’.

Can't bind to 'ngModel' since it isn't a known property of 'angular2-multiselect'

potrebno je u projekt dodati FormsModule.

Zaključak

Struktura projekta prema package.json

Angular Framework resursi

Do sada sam objavio nekoliko blog postova na temu Angular Frameworka koje možete pronaći u kategoriji Razvoj, ali sam odlučio objaviti i ovaj blog post kako bi olakšao pronalazak i pregled svih blog postova vezanih upravo uz Angular Framework jednako kao što sam to napravio i za Ionic Framework, a nadam se da ću isto uskoro učiniti i za NodeJS tj. ExpressJS.

Ako niste pronašli vama zanimljiv/potreban blog post slobodno ostavite komentar s prijedlogom teme pa ću se potruditi objaviti blog post ili pronaći resurs koji će vam biti od pomoći.