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...

CSV Liste i Html

Kada radimo sa web stranicama, radimo često i sa povećim listama.Te su liste obično veličine od 20-100 itema i to su, na primjer, liste adresa,...
Kada radimo sa web stranicama, radimo često i sa povećim listama.Te su liste obično veličine od 20-100 itema i to su, na primjer, liste adresa, dokumenata, slika i slično. Listu treba oblikovati da se uklopi u vaše web stranicu. Što znači daće lista najčešće biti UL element. Podatke treba ili unositi jedan pojedan, ako radite u Wordpress builderu ili kao HTML ručno rezuckati uvašem omiljenom tekst editoru. Problem je u tome što ako dođe doizmjena na stranici, prisiljeni ste opet iznova gubiti vrijeme ubuilderu ili tekst editoru. Rješenje je, da listu odmah u startu jednostavno pretvorite u CSV listu. Naprimjer,...

Leaflet – odlična zamjena za Google Maps iframe

Da bi ste ugradili i koristili naprednije opcije Google maps-a potrebanvam je API key. API key, koji naravno, se naplaćuje nakon što steprekoračili određeni broj...
Da bi ste ugradili i koristili naprednije opcije Google maps-a potrebanvam je API key. API key, koji naravno, se naplaćuje nakon što steprekoračili određeni broj HTTP zahtjeva. Problem je (barem meni)nejasnost i gnjavaža oko izdavanja API key-a. A ja bih samo želio imatijednostavnu mapu sa markerom. Što je iframe? Iframe je HTML 'okvir' u kojem je sadržaj vanjskiHTML ili neka druga vanjska stranica. Prvo što mi je palo na pamet su HTML 'image maps'. Ukratko, moguće jeodrediti koordinate na slici. Kada kliknete na određeni dio slike,aktivirate HTML link ili JS funkciju preko 'onclick' HTML atributa. Srećom, nakon detaljnije internet pretrage...