GraphQL

GraphQL je query (query=upit, google translate) jezik. Query znači u istom smislu kao i query za bazu podataka. Dakle, daj mi određenu tablicu, stupac i...
GraphQL je query (query=upit, google translate) jezik. Query znači u istom smislu kao i query za bazu podataka. Dakle, daj mi određenu tablicu, stupac i redove. Cilj i svrha ovoga je pojednostavniti rad sa REST API-jima. Sa GraphQL API-jem dolazi i vizualno sučelje gdje se može vidjeti schema odnosno arhitektura cijelog API-ja. Primjer Za primjer ćemo koristiti http://api.spacex.land/graphql/ Ako napišemo: {capsules { id }} Dobivamo listu svih "kapsula". { "data": { "capsules": [ { "id": "C105" }, { "id": "C101" }, ... Jednostavno! Hajdemo složiti malo kompliciraniji upit: { capsules { id landings status missions { name } } }...

Typescript – bilješke

Zašto? U jezicima poput C ili Jave imamo tipove varijabli i funkcija koje uvijek moramo deklarirati. A možemo deklarirati i predložak u kojem je određeno...
Zašto? U jezicima poput C ili Jave imamo tipove varijabli i funkcija koje uvijek moramo deklarirati. A možemo deklarirati i predložak u kojem je određeno koji tip datoteke možemo imati u varijabli, funkciji ili strukturi. Koje su prednosti? function hello(mustBeString){ if (typeof mustBeString !== 'string'){ throw 'Argument nije string!'; } } Znači mi sada tu gubimo vrijeme na provjeru tipa argumenta. U typescript-u pišemo ovako: function hello(mustBeString: string){ //... } Isto tako možemo odrediti dozvoljeni tip koji vrača funkcija: function hello(n: number) : number{ return n++; } Znači sada ne moramo provjeravati vrijednost koju nam vrača funkcija. Instalacija sudo apt...

hex2rgb

Kada postavimo: element.style.backgroundColor = '#ffffff'; vrijednost se konvertira u: rgb(255, 255, 255) Iz nekog razloga ova funkcija nije dio standardnih funkcija pa ćemonapraviti novu funkciju....
Kada postavimo: element.style.backgroundColor = '#ffffff'; vrijednost se konvertira u: rgb(255, 255, 255) Iz nekog razloga ova funkcija nije dio standardnih funkcija pa ćemonapraviti novu funkciju. Funkcija uzima: #ffffff a izbaciva: rgb(255, 255, 255) Funkcija: const hex2rgb = (str) => { str = str.replace('#', ''); var aRgbHex = str.match(/.{1,2}/g); var aRgb = [ parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16) ]; return 'rgb(' + aRgb[0] + ', ' + aRgb[1] + ', ' + aRgb[2] + ')'; }

Kako instalirati i koristiti React na Linuxu?

Kako instalirati i koristiti React na Linuxu? Trebamo li proširiti svoje frontend znanje sa frameworkom u kojem jednostavno možemo podijeliti elemente web stranice (aplikacije) u...
Kako instalirati i koristiti React na Linuxu? Trebamo li proširiti svoje frontend znanje sa frameworkom u kojem jednostavno možemo podijeliti elemente web stranice (aplikacije) u samostalne komponente? Ovdje pitanje naravno sadržava i odgovor. Isplati li se naučiti React? Problem sa HTML/JS je taj da teško možemo održavati/nadograđivati veće projekte. React nam omogućava da se lakše snalazimo sa komponentama i da lakše povežemo evente preko state-a. Imamo i “build” opciju koja optimizira kod. Komponente možemo kasnije prekopirati u novi projekt i koristiti sa manjim prilagodbama. Osim mobilne, možemo napraviti web aplikacije ili Electron desktop aplikacije. Posao React developera je tražen i...

Kako XML prebaciti u CSV?

Kada radimo sa internet trgovinom, radimo i sa podacima proizvoda koji su pohranjeni u XML, JSON, CSV ili SQL datotekama. Problem je u tome što...
Kada radimo sa internet trgovinom, radimo i sa podacima proizvoda koji su pohranjeni u XML, JSON, CSV ili SQL datotekama. Problem je u tome što ponekad moramo podatke dostaviti našem trgovcu/šefu koji koristi spreadsheet software, znači (Google Sheets ili Excel). Kako ćemo to napraviti? Recimo da imamo XML datoteku i recimo da istu želimo učitati u Excel. Prvo što moramo je prebaciti XML u CSV format. Koristimo Linux, zašto? Zato što imamo mnoštvo CLI alata za manipulaciju datotekama i što možemo "mješati" bash sa python skriptama. Ako dodamo i node.js, onda na jednostavan način možemo dodati i webapi-je u bash...

Float 2 kuna

Hrvatska uskoro prelazi na euro valutu. Pa će postojati prijelazni period u kojem će na e-trgovinama morati biti navedene obije cijene. Tečaj (JSON) uzimamo sa...
Hrvatska uskoro prelazi na euro valutu. Pa će postojati prijelazni period u kojem će na e-trgovinama morati biti navedene obije cijene. Tečaj (JSON) uzimamo sa besplatnog HNB api-ja na: https://api.hnb.hr/tecajn/v1?valuta=EUR Nas zanima "Srednji za devize":"7,563015" dio u JSON datoteci. Cijenu u eurima dobivamo sa formulom: cijenaEuro = cijanaKuna * (1 / srednjiTecaj) Cijenu u eurima je lagano kasnije prikazati kao string a za dobivanje stringa kune iz float broja koristimo ove funkcije: //Javascript function float2Kuna(x) { //is number if(typeof x != 'number') { return null; } const currencyString = 'kn'; //is float? if (Number(x) === x && x % 1...

Kako si gulp

Gulp je js programčić (nešto poput make iz C jezika) kojeg možemo podesiti da prati promjene u datotekama, da spaja/filtrira datoteke i na kraju, kojeg...
Gulp je js programčić (nešto poput make iz C jezika) kojeg možemo podesiti da prati promjene u datotekama, da spaja/filtrira datoteke i na kraju, kojeg možemo povezati/sinkronizirati sa browser-syncom da dobijemo prikaz promjena u pregledniku bez osvježavanja (refresh). U primjeru koristim i PostCSS. PostCSS je alatka kroz koju kao filter, možemo primijeniti CSS minify ali i mnoštvo ostalih ekstenzija poput Autoprefixer ekstenzije koja pomaže u održavanju kompatibilnosti sa starijim browserima. Instalacija Prvo moramo instalirati gulp (terminal verziju): sudo npm install gulp-cli -g Arhiva sa primjerom se nalazi ovdje. Naravno, potrebno je raspakirati arhivu i unutra pokrenuti komandu: npm install Nakon...

Kako poslati http request POST kao notify na pametni telefon?

Zadatak: Radimo ekstenziju za Chrome preglednik koja prati promjene na dinamičnoj web-stranici. Kada se dogodi promjena, treba ju nekako prijaviti na pametni telefon. Najmanje komplicirani...
Zadatak: Radimo ekstenziju za Chrome preglednik koja prati promjene na dinamičnoj web-stranici. Kada se dogodi promjena, treba ju nekako prijaviti na pametni telefon. Najmanje komplicirani način je da pošaljemo HttpRequest iz ekstenzije. Ekstenzija je najjednostavnije svedena na 'content.js' skriptu. U ekstenziji imamo setInterval funkciju koja svake sekunde uzima html element provjerava sadržaj i (po potrebi) uzima screenshot elementa. Za screenshot koristimo 'html2canvas.js' lib koji će nam "ugrabiti" element i prebaciti ga u base64 format. html2canvas(document.querySelector("#capture")).then(canvas => { var data = canvas.toDataURL(); }); PHP/mariadb server Prvo sam zamislio složiti jednostavni webapi server. Server koji bi zaprimio sadržaj (tekst i base64 sliku)...

Uvod u web components

Web komponente su skup značajki koje pružaju standardni model komponenata za web koji omogućuje enkapsulaciju i interoperabilnost pojedinih HTML elemenata. Znači, radi se tehnologiji koja...
Web komponente su skup značajki koje pružaju standardni model komponenata za web koji omogućuje enkapsulaciju i interoperabilnost pojedinih HTML elemenata. Znači, radi se tehnologiji koja nam omogućava da pravimo komponente poput onih u React-u. To nam je korisno zbog toga što možemo imati komponente koje možemo ponovno iskoristiti. Tako da jednostavno možemo uvesti komponente kao js/css datoteke i prilagoditi ih ostatku HTML stranice. Nećemo se baviti detaljno sa svime onim što su web komponente nego samo sa dijelom koji nam omogućava da kod komponente ponovno iskoristimo. Ovakve komponente su korisne i u Wordpress-u gdje ih koristimo preko 'raw html' bloka....

CV forma – js dio

Ovo je nastavak prvog dijela. Izmjenili smo HTML od zadnji put. Uklonili smo 'form' elemente i sada samo koristimo input elemente i formdata sučelje. Razlog...
Ovo je nastavak prvog dijela. Izmjenili smo HTML od zadnji put. Uklonili smo 'form' elemente i sada samo koristimo input elemente i formdata sučelje. Razlog je tome što želimo imati više slobode i kontrole. See the Pen CV Forma 06 by Damir Sijakovic (@dsijak) on CodePen. Namespace Započeti ćemo sa ‘dsijak’ objektom. ‘dsijak’ skraćenica moga imena i prezimena. To radimo zbog toga što većina JS libsa koristi window kao namespace. Pa su sa takvim imenom šanse jako male da će doći do toga da je window variabla već zauzeta. Osim toga sve su funkcije na ovaj način lako dostupne. if...

🗣 You can translate this site using Chrome built-in translator.