Arhiva Razvoj - Stranica 4 od 27 - Tomislav Stanković

Recenzija: CSS Grid by Wes Bos, 2. dio

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.

Prvi dio blog posta objavljen pod naslovom “Recenzija: CSS Grid by Wes Bos, 1. dio“.

11.) Spanning and Placing Cardio

U ovom dijelu tečaja cilj je ponoviti sve do sada obrađeno tj. samostalno napraviti primjer stranice sa zadanim rasmještajem elemenata.

<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item poop">💩</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
    <div class="item item11">11</div>
    <div class="item item12">12</div>
    <div class="item item13">13</div>
    <div class="item item14">14</div>
    <div class="item item15">15</div>
    <div class="item item16">16</div>
    <div class="item item17">17</div>
    <div class="item item18">18</div>
    <div class="item item19">19</div>
    <div class="item item20">20</div>
    <div class="item item21">21</div>
    <div class="item item22">22</div>
    <div class="item item23">23</div>
    <div class="item item24">24</div>
    <div class="item item25">25</div>
    <div class="item item26">26</div>
    <div class="item item27">27</div>
    <div class="item item28">28</div>
    <div class="item item29">29</div>
    <div class="item item30">30</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;

      /* Make the grid 10 columns wide, every other taking up twice the free space */
      /* Make the grid have 10 explicit rows, 50px high each */
     /* With Item 1, start at col 3 and go until 5 */
     /* With Item 2, start at col 5 and go until the end */
     /* Make Item 5 double span 2 cols and rows */
     /* Make Item 8 two rows high */
     /* Make Item 15 span the entire grid width */
     /* Make item 18 span 4 widths, but end 9 */
     /* Make item 20 start at row 4 and go for 3 */
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

/* Make the grid 10 columns wide, every other taking up twice the free space */

/* Make the grid have 10 explicit rows, 50px high each */

/* With Item 1, start at col 3 and go until 5 */

/* With Item 2, start at col 5 and go until the end */

/* Make Item 5 double span 2 cols and rows */

/* Make Item 8 two rows high */

/* Make Item 15 span the entire grid width */

/* Make item 18 span 4 widths, but end 9 */

/* Make item 20 start at row 4 and go for 3 */

</style>

</body>

Ovdje je poželjno “izgubiti” nešto vremena i barem pokušati samostalno napraviti krajnje rješenje nego u startu gledati kako ti radi Wes Bos.

Krajnje rješenje izgleda kao u nastavku. Zakomentirani dijelovi su moji pokušaji prije nego sam ih ispravno napravio.

.container {
      display: grid;
      grid-gap: 20px;

      /* Make the grid 10 columns wide, every other taking up twice the free space */
      /* grid-template-columns: repeat(10, auto 2fr); */
      /* grid-template-columns: auto 2fr auto 2fr auto 2fr auto 2fr auto 2fr; */
      grid-template-columns: repeat(5, 1fr 2fr);

      /* Make the grid have 10 explicit rows, 50px high each */
      /*grid-template-rows: repeat(10, 50px); */
      grid-template-rows: repeat(10, 50px); 
    }

    /* With Item 1, start at col 3 and go until 5 */
    .item1 {
      grid-column: 3 / 5;
    }

    /* With Item 2, start at col 5 and go until the end */
    .item2 {
      grid-column: 5 / -1;
    }

    /* Make Item 5 double span 2 cols and rows */
    .item5 {
      grid-column: span 2;
      grid-row: span 2;
    }

    /* Make Item 8 two rows high */
    .item8 {
      grid-row: span 2;
    }

    /* Make Item 15 span the entire grid width */
    .item15 {
      grid-column: 1 / -1; 
    }

    /* Make item 18 span 4 widths, but end 9 */
    .item18 {
      grid-column: span 4 / 9;
    }

    /* Make item 20 start at row 4 and go for 3 */
    .item20 {
      grid-row: 4 / span 3;
    }

.container {

display: grid;

grid-gap: 20px;

/* Make the grid 10 columns wide, every other taking up twice the free space */

/* grid-template-columns: repeat(10, auto 2fr); */

/* grid-template-columns: auto 2fr auto 2fr auto 2fr auto 2fr auto 2fr; */

grid-template-columns: repeat(5, 1fr 2fr);

/* Make the grid have 10 explicit rows, 50px high each */

/*grid-template-rows: repeat(10, 50px); */

grid-template-rows: repeat(10, 50px);

}

/* With Item 1, start at col 3 and go until 5 */

.item1 {

grid-column: 3 / 5;

}

/* With Item 2, start at col 5 and go until the end */

.item2 {

grid-column: 5 / -1;

}

/* Make Item 5 double span 2 cols and rows */

.item5 {

grid-column: span 2;

grid-row: span 2;

}

/* Make Item 8 two rows high */

.item8 {

grid-row: span 2;

}

/* Make Item 15 span the entire grid width */

.item15 {

grid-column: 1 / -1;

}

/* Make item 18 span 4 widths, but end 9 */

.item18 {

grid-column: span 4 / 9;

}

/* Make item 20 start at row 4 and go for 3 */

.item20 {

grid-row: 4 / span 3;

}

12.) auto-fit and auto-fill

auto-fit i auto-fill koriste se za bolje upravljanje kolonama tj. stupcima grid-template-columns.

Na početku imam sljedeću situaciju

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../assets/style.css">
  <title>auto-fit and auto-fill!</title>
</head>

<body>
  <div class="container">
    <div class="item item1">Item 01</div>
    <div class="item item2">Item 02</div>
    <div class="item item3">Item 03</div>
    <div class="item item4">Item 04</div>
    <div class="item item5">Item 05</div>
    <div class="item item6">Item 06</div>
    <div class="item item7">Item 07</div>
    <div class="item item8">Item 08</div>
    <div class="item item9">Item 09</div>
    <div class="item item10">Item 10</div>
    <div class="item item11">Item 11</div>
    <div class="item item12">Item 12</div>
    <div class="item item13">Item 13</div>
    <div class="item item14">Item 14</div>
    <div class="item item15">Item 15</div>
    <div class="item item16">Item 16</div>
    <div class="item item17">Item 17</div>
    <div class="item item18">Item 18</div>
    <div class="item item19">Item 19</div>
    <div class="item item20">Item 20</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      border: 10px solid var(--yellow);
      grid-template-columns: repeat(5, 100px);
    }
  </style>
</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: repeat(5, 100px);

}

</style>

</body>

</html>

Na ekranu će to izgledati kao na slici ispod. Znači, imam pet kolona i višak praznog prostora sa desne strane ekrana. U slučaju kada znam kakav će sadržaj biti u svakoj koloni tj. kada znam koliko takvih kolona mi je potrebno da bi popunio cijeli red onda mogu koristiti nešto kao grid-template-columns: repeat(5, 100px).

Međutim ako nisam siguran kakav će mi biti sadržaj u svakoj koloni niti koliko njih mi je potrebno da popunim cijeli red, a ipak želim da cijeli red bude dinamički popunjen mogu koristiti npr. grid-template-columns: repeat(auto-fill, 100px) tj. grid-template-columns: repeat(auto-fit, 100px) i rezultat će biti sljedeći

Gledajući gornju sliku lako se može zaključiti da ne postoji razlika između auto-fit i auto-fill, međutim razlika postoji i može se vidjeti kada nema dovoljno kolona da popune cijeli red.

auto-fit završava red iza zadnje kolone – vidljivo po punoj okomitoj liniji na kraju zadnje kolone što označava explicit grid pojašnjen u prethodnom blog postu.

.container {
      display: grid;
      grid-gap: 20px;
      border: 10px solid var(--yellow);
      grid-template-columns: repeat(auto-fit, 100px);
}

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: repeat(auto-fit, 100px);

}

auto-fill kreira prazne kolone u preostalom prostoru. U te je kolone moguće postaviti novi sadržaj.

.container {
      display: grid;
      grid-gap: 20px;
      border: 10px solid var(--yellow);
      grid-template-columns: repeat(auto-fill, 100px);
}

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: repeat(auto-fill, 100px);

}

Npr. mogu dodati jednu kolonu u krajnji desni rub ekrana.

.container {
      display: grid;
      grid-gap: 20px;
      border: 10px solid var(--yellow);
      grid-template-columns: repeat(auto-fill, 100px);
    }
.item4 {
      grid-column-end: -1; 
}

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: repeat(auto-fill, 100px);

}

.item4 {

grid-column-end: -1;

}

Google My Business API – kako ga aktivirati i koristiti

Google My Business API pruža brz i jednostavan način za tvrtke, proizvode, robne marke, umjetnike i organizacije da upravljaju svojim lokacijama na Google mreži.

API omogućava da se lokacijama upravlja putem prilagođenih aplikacija, npr. možemo napraviti Ionic mobilnu aplikaciju ili web Angular aplikaciju koja će dohvaćati popis svih naših lokacija sa Google mreže. Na taj način na jednom mjestu imamo pregled detalja svih lokacija. Također, za svaku od tih lokacija možemo uređivati te detalje ili dodavati nove informacije bez potrebe za ručnom prijavom u Google My Business sučelje na adresi http://business.google.com/manage.

Preduvjeti

Nekoliko je preduvjeta potrebno zadovoljiti kako bi se Google My Business API mogao koristiti jer inače nije dostupan unutar Google Developer Console.

1.) Google račun

Potrebno je kreirati Google račun kako bi se moglo pristupiti Google API Console sučelju. Za pretpostaviti je da već imamo Google račun ako želimo upravljati našim lokacijama koje smo ranije već kreirali u Google mreži, ali eto ovo je ipak prvi korak.

2.) Upoznati Google My Business sučelje

Prije korištenja API-ja važno je dobro upoznati što sve nudi Google My Business sučelje na adresi http://business.google.com/manage kako bi se uopće znalo kojim podacima je moguće upravljati.

3.) Google API Console

Kreirati projekt unutar Google API Console sučelja na adresi https://console.developers.google.com/project. Ovdje će se kasnije aktivirati Google My Business API.

P.S. Ako ste pratili neke od mojih ranijih blog postova možete prepoznati projekte koje sam kreirao upravo za te blog postove.

4.) Zatražiti pristup API-ju.

U ovom je koraku potrebno ispuniti Google My Business API: Application Form For Basic Access formu.

1. stranica

2. stranica

– Project ID – može se vidjeti u jednoj od gornjih slika. Lijevo se nalazi naziv projekta, a desno project ID.
– Project Number – može se pronaći na adresi https://console.developers.google.com/iam-admin/settings?project=projectid
– Gmail e-mail adrese – e-mail adrese developera koji će raditi s API-jem

3. stranica

– Company Name – naziv tvrtke
– Company Website – web adresa tvrtke
– Company’s Headquarters Address – adresa tvrtke
– Company HQ’s Google Maps Listing URL – Google Maps poveznica tvrtkine adrese
– Your Name – ime i prezime osobe koja ispunjava formu
– Your Email – e-mail adresa, odgovorne, osobe koja ispunjava formu. Mora imati isti nastavak kao i web adresa. Ovo će biti glavna e-mail adresa za svu komunikaciju sa Googleom.
– Gmail adresa Google Account Managera ako ga imate. U suprotnom navesti N/A.

4. stranica

Potrebno odabrati u kojoj se kategoriji tvrtka nalazi, Local Business ili Third-pary / Reseller / Agency. Ostala će pitanja ovisiti o ovom odabiru.

5. stranica – ako se odabere Local Business

– Odabrati na koliko se lokacija poduzeće nalazi, manje ili više od 10.
– Označiti koristi li se trenutno Google My Business za upravljanje lokacijama.
– Ako je odgovor na prethodno pitanje “da” potrebno je navesti Gmail adresu ili adrese koje imaju mogućnost pristupa Google My Business web sučelju.
– Za kraj, opisati u koju svrhu se planira koristiti Google My Business API.

6. stranica – ako se odabere Third-pary / Reseller / Agency

8. stranica – na nju se dođe nakon što se ispuni 5. ili 6. i 7. stranica

Klikom na “SUBMIT” pojavljuje se ekran s osnovnim informacijama.

Sada se može jedino čekati. Iako navode da je potrebno do dva tjedna za odgovor obično će on stići kroz 2-3 radna dana.

Nakon što Google pregleda zahtjev i omogući pristup API-ju stići će poruka na e-mail adresu, npr. @tvrtka.com, navedenu unutar forme sa sljedećim sadržajem:

Dodavanje developera

Već sada mogu dodati Gmail račune developera koji će imati mogućnost upravljanja API-jem, a koje sam naveo prilikom ispunjavanja forme.

U Google API Console sučelju, u gornjem desnom uglu, klikom na Project settings pojavljuje se izbornik s lijeve strane i ondje odabirem IAM kako bi klikom na ADD dodao Gmail račun novog developera.

Uskoro će navedeni developeri dobiti e-mail sljedećeg sadržaja

Oni sada, ovisno o dobivenim pravima, mogu raditi sve što ću napisati u nastavku.

Aktivacija Google My Business API-ja

Povratak u Google API Console sučelje na adresu projekta https://console.developers.google.com/apis/library?project=projectid

Tek sada je u katalogu API-ja, moguće pronaći Google My Business API.

VAŽNO! Ako se nisu obavili koraci navedeni iznad tj. ako se nije ispunio upitnik i ako nije stigao potvrdni e-mail Google My Business API neće biti moguće pronaći i aktivirati.

Aktivacija se obavlja klikom na “ENABLE“.

OAuth 2.0 client ID

Nakon što je API aktiviran potrebno je kreirati OAuth 2.0 client ID zato što API nije javan i Google na taj način kontrolira da API koriste samo one osobe koje na to imaju pravo.

Svaki zahtjev koji se uputi na Google My Business API treba u sebi sadržavati OAuth 2.0 token koji se kreira unutar izbornika Credentials. Ovdje mi je bitan Client ID.

S obzirom da API planiram testirati na OAuth 2.0 Playground moram odobriti adresu https://developers.google.com/oauthplayground kako bi s iste mogao slati upite na API.

U gornjem desnom kutu klikom na ikonu kotačića otvaraju se postavke. Za “OAuth flow” je potrebno odabrati Client-side. Osim toga potrebno je još kliknuti i na “Use your own OAuth credentials” te ondje unijeti ranije kreiran OAuth client ID.

U izborniku s lijeve strane pod “Step 1 – Select & authorize APIs” je potrebno unijeti https://www.googleapis.com/auth/plus.business.manage i kliknuti na Authorize APIs.

Pod “Step 2 – Configure request to API” je potrebno unijeti https://mybusiness.googleapis.com/v4/accounts i kliknuti na Send the request.

Ako je sve prošlo uspješno prikazati će se status 200 OK što znači da je API funkcionalan.

Na slici iznad može se vidjeti i autorizacijski token Bearer ya29.GlvmBlVJdoojCkXP9boiD1oudk8teDNzqls485U6Uylf74QUc2mlhw0RDOoszfdqo594IH2YOqVjNwCPscwEgFPqs3pwiRNPizJyrdUHaJCiiI-pjnX4TyPpK1ic koji ću sada iskoristiti kako bi isti upit na API napravio kroz Postman.

Kao što se može vidjeti na sljedećoj slici dobio sam rezultat s popisom lokacija tj. detalje, radno vrijeme, tih lokacija.

Bez autorizacijskog tokena ne bi mogao dobiti traženi rezultat s popisom lokacija.

Više informacija o ostalim dostupnim API pozivima na poveznici https://developers.google.com/my-business/reference/rest/

Uber API & Ionic 4 – Ride Request Button

U ovom ću blog postu pokazati kako koristiti Uber API tj. Ride Request Button unutar Ionic 4 aplikacije.

Ride Request Button je najjednostavniji i najbrži način da se unutar Ionic aplikacije omogući korištenje Ubera tj. slanje zahtjeva za vožnjom.

Dovoljno je kliknuti na gumb i korisnik će automatski biti preusmjeren unutar Uber aplikacije kojoj će biti prosljeđeni parametri kao što su mjesto preuzimanja i mjesto odredišta, uz ostale opcionalne parametre.

Developer Dashboard

Prije svega potrebno je kreirati korisnički računa unutar Developer Dashboard sučelja. Također, potrebno je kreirati i profil za mobilnu aplikaciju koja će koristiti Uber API.

Od podataka ovdje su mi najvažniji Client ID, Server Token i Client Secret.

Parametar	Opis
client_id	Služi kao identifikator aplikacije, nešto kao korisničko ime aplikacije.
client_secret	Služi kao lozinka aplikacije.
server_token	Omogućava slanje zahtjeva prema API-ju.

Slanje upita na API

Sada se prebacujem na Uber API dokumentaciju.

Ekran će se sastojati od prikaza Google karte na većem dijelu ekrana i Uber gumba na dnu ekrana. Klikom na taj gumb poziva se Uber aplikacija kojoj prosljeđujem parametre:

clientID – obavezno
pickupLat
pickupLng
dropoffLat – obavezno
dropoffLng – obavezno

<ion-header>
  <ion-navbar>
    <ion-title>Steakhouse Club</ion-title>
  </ion-navbar>
</ion-header>

<div #mapa id="mapa"></div> 
  <a href="https://m.uber.com/ul/?client_id=**********************&action=setPickup&pickup[latitude]={{pickupLat}}&pickup[longitude]={{pickupLng}}&dropoff[latitude]={{dropoffLat}}&dropoff[longitude]={{dropoffLng}}">
  <div tappable><img src="assets/imgs/uber.png"></div>
</a>

<ion-header>

<ion-navbar>

<ion-title>Steakhouse Club</ion-title>

</ion-navbar>

</ion-header>

</a>

Na slici iznad vidim ekran sa Google kartom na kojoj se nalazi lokacija gdje želim da me Uber odveze. Ako mu i ne proslijedim svoju lokaciju Uber aplikacija će ju sama dohvatiti.

Čak niti Uber aplikacije ne mora, u trenutku klika na gumb, biti instalirana na mobilnom uređaju.

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.

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:

{
  "name": "css-grid",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "run-script-os",
    "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
    "//": "Hello! If you are having trouble running this command. Try changing Firefox Developer Edition to FirefoxDeveloperEdition",
    "start:darwin:linux": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser 'Firefox Developer Edition'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.24.5",
    "run-script-os": "^1.0.3"
  }
}

{

"name": "css-grid",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"start": "run-script-os",

"start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",

"//": "Hello! If you are having trouble running this command. Try changing Firefox Developer Edition to FirefoxDeveloperEdition",

"start:darwin:linux": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser 'Firefox Developer Edition'"

"author": "",

"license": "ISC",

"devDependencies": {

"browser-sync": "^2.24.5",

"run-script-os": "^1.0.3"

}

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.

$ npm install
$ npm start

1 2	$ npm install $ npm start

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.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../assets/style.css">
  <title>CSS Grid Fundamentals!</title>
</head>

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <style>
     .container{
       display: grid;
       /* grid-template-columns: 200px auto 500px 50px; 
        grid-template-columns: repeat(5, 100px); 
       grid-template-columns: 200px 500px;
       grid-template-rows: 200px 500px 50px;
       grid-gap: 20px; */
     }
  </style>
</body>

</html>

<!DOCTYPE html>

<head>

<title>CSS Grid Fundamentals!</title>

</head>

<body>

</div>

<style>

.container{

display: grid;

/* grid-template-columns: 200px auto 500px 50px;

grid-template-columns: repeat(5, 100px);

grid-template-columns: 200px 500px;

grid-template-rows: 200px 500px 50px;

grid-gap: 20px; */

}

</style>

</body>

</html>

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.

5. CSS Grid Implicit vs Explicit Tracks

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

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 200px 400px;
      grid-template-rows: 50px 100px;
      /* grid-auto-rows: 200px;  */
      /* grid-auto-columns: 100px; */
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 200px 400px;

grid-template-rows: 50px 100px;

/* grid-auto-rows: 200px; */

/* grid-auto-columns: 100px; */

}

</style>

</body>

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

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 200px 400px;
      grid-template-rows: 50px 100px;
      grid-auto-rows: 70px;
      /* grid-auto-columns: 100px; - u sljedećem dijelu tečaja*/
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 200px 400px;

grid-template-rows: 50px 100px;

grid-auto-rows: 70px;

/* grid-auto-columns: 100px; - u sljedećem dijelu tečaja*/

}

</style>

</body>

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

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 200px 400px;
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 200px 400px;

}

</style>

</body>

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.

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 400px 200px;
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 400px 200px;

}

</style>

</body>

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

Zadano će biti prikazani kao redovi,

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 400px 200px;
      grid-auto-flow: row;
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 400px 200px;

grid-auto-flow: row;

}

</style>

</body>

a možemo ih prikazati i kao stupce.

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 400px 200px;
      grid-auto-flow: column;
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 400px 200px;

grid-auto-flow: column;

}

</style>

</body>

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

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

<style>
    .container {
      display: grid;
      grid-gap: 20px;
      border: 10px solid var(--yellow);
      grid-template-columns: 150px 150px 1fr;
    }
 </style>

<style>

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: 150px 150px 1fr;

}

</style>

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.

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.

<style>
    .container {
      display: grid;
      grid-gap: 20px;
      border: 10px solid var(--yellow);
      grid-template-columns: auto 1fr;
    }
</style>

<style>

.container {

display: grid;

grid-gap: 20px;

border: 10px solid var(--yellow);

grid-template-columns: auto 1fr;

}

</style>

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

grid-template-columns: 1fr 1fr 1fr 1fr;

1	grid-template-columns: 1fr 1fr 1fr 1fr;

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.

grid-template-columns: repeat(4, 1fr);

1	grid-template-columns: repeat(4, 1fr);

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

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,…

<style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 100px repeat(4, 1fr 2fr);
    }
</style>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 100px repeat(4, 1fr 2fr);

}

</style>

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.

<body>
  <div class="container">
         <div class="item item1">1</div>
         <div class="item item2">2</div>
         <div class="item item3">3</div>
         <div class="item item4">4</div>
         <div class="item item5">5</div>
         <div class="item item6">6</div>
         <div class="item item7">7</div>
         <div class="item item8">8</div>
         <div class="item item9">9</div>
         <div class="item item10">10</div>
         <div class="item item11">11</div>
         <div class="item item12">12</div>
         <div class="item item13">13</div>
         <div class="item item14">14</div>
         <div class="item item15">15</div>
         <div class="item item16">16</div>
         <div class="item item17">17</div>
         <div class="item item18">18</div>
         <div class="item item19">19</div>
         <div class="item item20">20</div>
         <div class="item item21">21</div>
         <div class="item item22">22</div>
         <div class="item item23">23</div>
         <div class="item item24">24</div>
         <div class="item item25">25</div>
         <div class="item item26">26</div>
         <div class="item item27">27</div>
         <div class="item item28">28</div>
         <div class="item item29">29</div>
         <div class="item item30">30</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(5, 1fr);
    }
 /*.item17{
      background: mistyrose;
      grid-column: span 2;
      grid-row: span 2;
    } */
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: repeat(5, 1fr);

}

/*.item17{

background: mistyrose;

grid-column: span 2;

grid-row: span 2;

} */

</style>

</body>

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.

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

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

.item17{
   background: mistyrose;
   grid-column: span 2;
   grid-row: span 2;
}

.item17{

background: mistyrose;

grid-column: span 2;

grid-row: span 2;

}

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.

.item17{
grid-column: span 2;
    grid-column-start: span 2;
    grid-column-end: auto;
grid-row: span 2;
    grid-row-start: span 2;
    grid-row-end: auto;
}

.item17{

grid-column: span 2;

grid-column-start: span 2;

grid-column-end: auto;

grid-row: span 2;

grid-row-start: span 2;

grid-row-end: auto;

}

10. Placing Grid Items

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

<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item poop">💩</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
    <div class="item item11">11</div>
    <div class="item item12">12</div>
    <div class="item item13">13</div>
    <div class="item item14">14</div>
    <div class="item item15">15</div>
    <div class="item item16">16</div>
    <div class="item item17">17</div>
    <div class="item item18">18</div>
    <div class="item item19">19</div>
    <div class="item item20">20</div>
    <div class="item item21">21</div>
    <div class="item item22">22</div>
    <div class="item item23">23</div>
    <div class="item item24">24</div>
    <div class="item item25">25</div>
    <div class="item item26">26</div>
    <div class="item item27">27</div>
    <div class="item item28">28</div>
    <div class="item item29">29</div>
    <div class="item item30">30</div>
  </div>

  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(5, 1fr);
    }
    .poop {
      background: #BADA55;
    }
  </style>
</body>

<body>

</div>

<style>

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: repeat(5, 1fr);

}

.poop {

background: #BADA55;

}

</style>

</body>

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

.poop {
      background: #BADA55;
      grid-column-start: 2;
}

.poop {

background: #BADA55;

grid-column-start: 2;

}

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

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

.poop {
      background: #BADA55;
      grid-column-start: 2;
      grid-column-end: 5; 
}

.poop {

background: #BADA55;

grid-column-start: 2;

grid-column-end: 5;

}

A mogu i na skraćeni način.

.poop {
      background: #BADA55; 
      grid-column: 2 / 5;
}

.poop {

background: #BADA55;

grid-column: 2 / 5;

}

Rezultat je isti.

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.

.poop {
      background: #BADA55; 
      grid-column: span 2 / 5;
}

.poop {

background: #BADA55;

grid-column: span 2 / 5;

}

.poop {
      background: #BADA55; 
      grid-column: 1 / span 2;
}

.poop {

background: #BADA55;

grid-column: 1 / span 2;

}

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

.poop {
      background: #BADA55; 
      grid-column: 1 / -1; 
}

.poop {

background: #BADA55;

grid-column: 1 / -1;

}

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

.poop {
      background: #BADA55; 
      grid-row: 3 / span 3;
}

.poop {

background: #BADA55;

grid-row: 3 / span 3;

}

Naravno, moguće ih je i kombinirati.

.poop {
      background: #BADA55; 
      grid-column: 1 / span 2;
      grid-row: 3 / span 3;
}

.poop {

background: #BADA55;

grid-column: 1 / span 2;

grid-row: 3 / span 3;

}

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

Ionic 4 Slides – prikaz galerije slika

O ovom ću blog postu pokazati nekoliko načina na koje je moguće koristiti ion-slides komponentu unutar Ionic 4 aplikacije.

ion-slides komponenta sastoji se od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.

Ionic 4 Slides — https://ionicframework.com/docs/api/slides

Ova se komponenta može koristiti za prikaz uputa prilikom prvog pokretanja mobilne aplikacije, primjer čega se nalazi u dokumentaciji, ali se isto tako pomoću ove komponente može napraviti lijepa galerija slika. Slike se mogu pomicati lijevo-desno, ali ih je isto tako moguće postaviti da se pomiču automatski u određenim intervalima.

S obzirom da ion-slides svoje temelje ima u Swiper.js-u i ondje je moguće pronaći dodatne opcije za upravljanje slajdovima.

Kreiranje aplikacije

$ ionic start IonicSlidesGallery blank
$ cd IonicSlidesGaller
$ionic serve

$ ionic start IonicSlidesGallery blank

$ cd IonicSlidesGaller

$ionic serve

Struktura ekrana na kojemu ću testirati ion-slides izgleda ovako:

<ion-header text-center>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic 4 Slides
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  //ion-slides će ići ovdje
</ion-content>

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

//ion-slides će ići ovdje

</ion-content>

Slike se nalaze unutar assets/imgs mape.

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  imageContainer = [
    {url:"assets/imgs/image1.jpg"},
    {url:"assets/imgs/image2.jpg"},
    {url:"assets/imgs/image3.jpg"},
    {url:"assets/imgs/image4.jpg"} ];
 
  slideOpts = {
    //
  };

  constructor(){
  }

}

import { Component } from '@angular/core';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

imageContainer = [

{url:"assets/imgs/image1.jpg"},

{url:"assets/imgs/image2.jpg"},

{url:"assets/imgs/image3.jpg"},

{url:"assets/imgs/image4.jpg"} ];

slideOpts = {

};

constructor(){

}

Galerija preko cijelog ekrana

U ovom primjeru slike zauzimaju cijeli ekran. Dolaskom do zadnje slike nije moguće ići dalje loop: 'false'.

<ion-header text-center>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic 4 Slides
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-slides pager="true" scrollbar="false" [options]="slideOpts" style="object-fit:cover;height:100%;background-color:#000;">
    <ion-slide *ngFor="let image of imageContainer; let i = index">
      <img src="{{image.url}}">
    </ion-slide>
  </ion-slides>
</ion-content>

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-slides pager="true" scrollbar="false" [options]="slideOpts" style="object-fit:cover;height:100%;background-color:#000;">

<ion-slide *ngFor="let image of imageContainer; let i = index">

</ion-slide>

</ion-slides>

</ion-content>

Galerija preko jednog dijela ekrana

U ovom primjeru galerija slika zauzima samo jedan dio ekrana ispod koje se onda vidi ostatak sadržaja. Dolaskom do zadnje slike moguće je ići dalje tj. napraviti puni krug do prve slike pomoću loop: 'true'.

<ion-header text-center>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic 4 Slides
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-slides pager="true" [options]="slideOpts" scrollbar="false" style="background-size:cover;height:58%;background-color:#000;">
    <ion-slide *ngFor="let image of imageContainer; let i = index">
      <img src="{{image.url}}">
    </ion-slide>
  </ion-slides>
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>Ionic 4 Slides</ion-card-subtitle>
      <ion-card-title>Primjer galerije slika</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>O ovom ću blog postu pokazati nekoliko načina na koje je moguće koristiti ion-slides komponentu unutar Ionic 4 aplikacije.</p>
      <p>ion-slides komponenta sastoji od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.</p>
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-header text-center>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 Slides

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-slides pager="true" [options]="slideOpts" scrollbar="false" style="background-size:cover;height:58%;background-color:#000;">

<ion-slide *ngFor="let image of imageContainer; let i = index">

</ion-slide>

</ion-slides>

<ion-card>

<ion-card-header>

<ion-card-subtitle>Ionic 4 Slides</ion-card-subtitle>

<ion-card-title>Primjer galerije slika</ion-card-title>

</ion-card-header>

<ion-card-content>

<p>O ovom ću blog postu pokazati nekoliko načina na koje je moguće koristiti ion-slides komponentu unutar Ionic 4 aplikacije.</p>

<p>ion-slides komponenta sastoji od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.</p>

</ion-card-content>

</ion-card>

</ion-content>

Zaključak

Struktura projekta prema package.json

{
  "name": "IonicSlidesGallery",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.4.0",
    "@types/node": "~10.12.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic 4 Slides project"
}

{

"name": "IonicSlidesGallery",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/common": "^7.2.2",

"@angular/core": "^7.2.2",

"@angular/forms": "^7.2.2",

"@angular/http": "^7.2.2",

"@angular/platform-browser": "^7.2.2",

"@angular/platform-browser-dynamic": "^7.2.2",

"@angular/router": "^7.2.2",

"@ionic-native/core": "^5.0.0",

"@ionic-native/splash-screen": "^5.0.0",

"@ionic-native/status-bar": "^5.0.0",

"@ionic/angular": "^4.0.0",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"zone.js": "~0.8.29"

"devDependencies": {

"@angular-devkit/architect": "~0.12.3",

"@angular-devkit/build-angular": "~0.12.3",

"@angular-devkit/core": "~7.2.3",

"@angular-devkit/schematics": "~7.2.3",

"@angular/cli": "~7.2.3",

"@angular/compiler": "~7.2.2",

"@angular/compiler-cli": "~7.2.2",

"@angular/language-service": "~7.2.2",

"@ionic/angular-toolkit": "~1.4.0",

"@types/node": "~10.12.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.1.4",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~8.0.0",

"tslint": "~5.12.0",

"typescript": "~3.1.6"

"description": "An Ionic 4 Slides project"

}