SVG loading animacija

Minimalna "loading" animacija u svijetloj i tamnoj varijaciji. Ima "flex center", pa bi se trebalo lagano uklopiti u html elemente. Light: <div style="display: flex; align-items:...
Minimalna "loading" animacija u svijetloj i tamnoj varijaciji. Ima "flex center", pa bi se trebalo lagano uklopiti u html elemente. Light: <div style="display: flex; align-items: center; justify-content: center; height: 100%;"> <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000"> <g fill="none" fill-rule="evenodd"> <g transform="translate(1 1)" stroke-width="2"> <circle stroke-opacity=".3" cx="18" cy="18" r="18"/> <path d="M36 18c0-9.94-8.06-18-18-18"> <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/> </path> </g> </g> </svg> </div> Dark: <div style="display: flex; align-items: center; justify-content: center; height: 100%;"> <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff"> <g fill="none" fill-rule="evenodd"> <g transform="translate(1 1)" stroke-width="2"> <circle stroke-opacity=".5" cx="18" cy="18"...

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

Inkscape 2 HTML

Možemo li dizajnirati stranicu u Inkscape (vektorskom editor-u) i ondakoristiti vektorski dizajn kao model za izradu HTML-a? Pa izgleda da možemo… Znači, "hero header" dizajn...
Možemo li dizajnirati stranicu u Inkscape (vektorskom editor-u) i ondakoristiti vektorski dizajn kao model za izradu HTML-a? Pa izgleda da možemo… Znači, "hero header" dizajn sam izradio u Inkscape vektorskom editoru. Pa sam ga nakon toga konvertirao (ručno😊) u html. HTML demo SVG datoteka Inkscape (uslikani zaslon) HTML <section class="ds-header"> <div class="ds-header-logo"> <img class="ds-header-logo-img" src="logo.svg" /> <div class="ds-header-logo-text">IOOX</div> </div> <ul class="ds-header-menu"> <li>Why Ioox</li> <li>Solutions</li> <li>Features</li> <li>Pricing</li> <li>Company</li> <li>GET STARTED</li> </ul> <div class="ds-header-text"> <div class="ds-header-sub">Embrace the future</div> <div class="ds-header-huge">Grow Your Business <br> Faster with the World's <br> Smartest Technology</div> <div class="ds-header-sub">Choose the enterprise-grade platform with <br> built-in features for customer success.</div>...

Centrirani naslov

Popularno još od starih UI dana a dobar način za odvajanje grupa HTML elemenata. Demo: TITLE WITH LINE Kod: <style> .ds-line-title { text-align:center; width:100%; display:...
Popularno još od starih UI dana a dobar način za odvajanje grupa HTML elemenata. Demo: TITLE WITH LINE Kod: <style> .ds-line-title { text-align:center; width:100%; display: block; height:100%; background-size: cover; background-repeat: no-repeat; } .ds-line-title h1 { position:relative; display:inline-block; } .ds-line-title h1::before, .ds-line-title h1::after { content:' '; display:block; position:absolute; top:50%; left:-120px; width:100px; border-bottom:1px solid gray; } .ds-line-title h1::after { left:auto; right:-120px; } </style> <div class='ds-line-title'> <h1>TITLE WITH LINE</h1> </div>

Kako napraviti WordPress temu iz početka?

Želimo shvatiti kako funkcioniraju teme u Wordpressu pa ćemo malo to istražiti i istestirati. Istraga Prvo pravimo direktorij teme u '/wp-content/themes/' i nazvat ćemo ga...
Želimo shvatiti kako funkcioniraju teme u Wordpressu pa ćemo malo to istražiti i istestirati. Istraga Prvo pravimo direktorij teme u '/wp-content/themes/' i nazvat ćemo ga 'fullempty'. Kada odemo na admin/izgled dobijemo poruku da nedostaje stylesheet: Pa dobro, da ga napravimo: /* Theme Name: Full Empty Theme URI: https://damir.ioox.studio Description: Blank theme, got nothing. Author: Damir Sijakovic Author URI: https://damir.ioox.studio Version: 1.0 Requires at least: 1.0 Requires PHP: 5.2.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blog Text Domain: fullempty */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); body{ font-family: 'Poppins', sans-serif; background: #B7DCF2; font-size: 17px; } Dobivamo poruku u admin/izgled:...

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

Pup & scrape

Današnji zadatak je malo skrejpanja i automatizacije. Radimo dosadni posao u kojem moramo prebacivati podatke sa jednog sajta u dashboard drugoga i usput moramo skidati...
Današnji zadatak je malo skrejpanja i automatizacije. Radimo dosadni posao u kojem moramo prebacivati podatke sa jednog sajta u dashboard drugoga i usput moramo skidati slike pa uploadati… Znači proces koji spor, naporan i dugotrajan. SKREJPANJE Recimo da želimo uzeti podatke od Konzum proizvoda. Pa ćemo prvo proučiti samu stranicu. U terminalu upišemo: wget -O t.html https://www.konzum.hr/web/products/abc-svjezi-krem-sir-200-g i dobivamo HTML datoteku: t.html Prvo ćemo provjeriti možemo li doći do slike. Što znači, cilj nam je provjeriti da se naziv slike nalazi u html datoteci. Sa F12 dobivamo developer tools i ime datoteke slike. U mom slučaju: https://d17zv3ray5yxvp.cloudfront.net/variants/reAJQ7GVtNkfsDEWmWKkjQqi/57ed05bea98bceae5f0eaada26b69cee6c61471d3030f7123d212844a35eba04 Zatim otvaramo 't.html'...

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

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