DEV Community: Jelena Petkovic

Sve što treba da znate o `FormData` objektu u JavaScript-u

Jelena Petkovic — Thu, 21 Nov 2024 13:47:12 +0000

Kada radite sa podacima iz HTML formi u JavaScript-u, često se susrećete sa potrebom za prikupljanjem, manipulisanjem i slanjem tih podataka na server. Ovde na scenu stupa FormData — moćan i fleksibilan API za upravljanje formama. U ovom postu ćemo detaljno objasniti kako FormData funkcioniše, njegove prednosti i kako ga možete koristiti u stvarnim scenarijima.

Šta je `FormData`?

FormData je ugrađeni JavaScript objekat koji omogućava:

Jednostavno prikupljanje podataka iz HTML formi.
Slanje tih podataka serveru koristeći fetch API ili XMLHttpRequest.
Rad sa binarnim podacima, poput fajlova.

Ovaj objekat automatski formatira podatke u skladu sa MIME tipom multipart/form-data, što ga čini idealnim za slanje složenih podataka, uključujući fajlove.

Kako kreirati `FormData` objekat?

Kreiranje praznog `FormData` objekta

Ako želite ručno da dodate podatke, koristite prazan FormData konstruktor:

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

Kreiranje `FormData` objekta iz forme

Ako imate HTML formu, možete direktno proslediti referencu forme FormData konstruktoru, što će automatski prikupiti sve podatke iz nje.

const form = document.getElementById('registrationForm');
const formData = new FormData(form);

Dodavanje podataka

Podaci se dodaju pomoću metode .append(key, value):

formData.append('firstName', 'Jelena');
formData.append('lastName', 'Petković');

Ako dodajete fajl iz <input type="file">, prosto koristite .files[0]:

const fileInput = document.getElementById('profilePicture');
formData.append('profilePicture', fileInput.files[0]);

Čitanje podataka

Da biste iterirali kroz podatke u FormData objektu, koristite for...of petlju zajedno sa .entries() metodom:

for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

Slanje `FormData` podataka na server

FormData je idealan za slanje podataka serveru pomoću fetch API-ja. Evo jednostavnog primera:

fetch('https://example.com/api/register', {
  method: 'POST',
  body: formData, // Automatski formatiran kao multipart/form-data
})
  .then(response => response.json())
  .then(data => console.log('Uspešno registrovano:', data))
  .catch(error => console.error('Greška:', error));

Nema potrebe za ručnim postavljanjem Content-Type zaglavlja; FormData to automatski radi.

Prednosti `FormData`

Rad sa fajlovima

FormData omogućava lako dodavanje i slanje fajlova direktno iz <input type="file"> polja.
Automatska serializacija

Umesto da ručno formatirate podatke, FormData ih automatski formatira u multipart/form-data.
Fleksibilnost

Lako upravljanje parovima ključeva i vrednosti, uključujući mogućnost iteracije i ažuriranja podataka.
Podrška za binarne podatke

Idealan je za slanje binarnih podataka poput slika, PDF-ova ili drugih fajlova.

Primer iz prakse: Registraciona forma

Evo jednog kompletnog primera gde prikupljamo podatke iz forme i šaljemo ih serveru:

HTML Forma

<form id="registrationForm">
  <label for="username">Korisničko ime:</label>
  <input type="text" id="username" name="username" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="profilePicture">Profilna slika:</label>
  <input type="file" id="profilePicture" name="profilePicture">

  <button type="submit">Registruj se</button>
</form>

JavaScript Kod

document.getElementById('registrationForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Sprečava reload stranice

  const form = event.target;
  const formData = new FormData(form);

  fetch('https://example.com/api/register', {
    method: 'POST',
    body: formData,
  })
    .then(response => response.json())
    .then(data => console.log('Uspešno registrovano:', data))
    .catch(error => console.error('Greška:', error));
});

Korisni saveti

Ako želite da ručno modifikujete podatke, koristite .set(key, value) umesto .append().
Možete proveriti da li određeni ključ postoji pomoću .has(key) metode.
Za uklanjanje podataka koristite .delete(key).

Zaključak

FormData je moćan alat za rad sa podacima iz formi. Omogućava lako prikupljanje, manipulaciju i slanje podataka, čak i kada radite sa fajlovima. Njegova fleksibilnost i jednostavna integracija sa modernim JavaScript API-jima čine ga nezamenjivim za mnoge web aplikacije.

Kako rešiti probleme sa specifičnim stilovima za različite pretraživače

Jelena Petkovic — Fri, 15 Nov 2024 12:46:55 +0000

Prilikom izrade web stranica, često se suočavamo sa problemima u vezi sa specifičnim stilovima koji se pojavljuju samo na određenim pretraživačima. Iako svi pretraživači renderuju HTML i CSS na sličan način, postoje sitne razlike koje mogu dovesti do toga da stranica izgleda ili funkcioniše različito u Chrome-u, Firefox-u, Safari-u ili Internet Explorer-u. Srećom, postoji nekoliko tehnika koje mogu pomoći da rešimo ove probleme i obezbedimo dosledno korisničko iskustvo na svim platformama.

1. Identifikuj problematični pretraživač

Prvi korak je da testiramo svoj sajt na različitim pretraživačima i uređajima kako bi otkrili koji tačno pretraživač pravi problem.

Najčešći problemi sa kompatibilnošću javljaće se na starijim verzijama Internet Explorer-a, Safari-u ili nekim specifičnim verzijama Firefox-a.

Možemo koristiti alate kao što je BrowserStack koji omogućava testiranje sajta na raznim pretraživačima i uređajima.

2. Koristiti zasebne stilove za specifične pretraživače (kondicionalni stilovi)

Jedna od najjednostavnijih tehnika je korišćenje kondicionalnih stilova koji se učitavaju samo za određene pretraživače. Ovaj pristup omogućava nam da ciljamo određene pretraživače i primenimo specifične stilove samo za njih.

Na primer, ako želimo da dodamo specifične stilove samo za Internet Explorer 9 i starije verzije, možemo koristiti sledeći HTML kod:

<!-- Za Internet Explorer 9 i starije verzije -->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->

Ovaj kod omogućava učitavanje stila ie9.css samo za korisnike koji koriste Internet Explorer 9 ili starije verzije.
Na taj način, možemo targetirati samo one elemente koji prouzrokuju problem u tom pretraživaču, bez uticaja na ostale.

3. Koristiti CSS framework-e kao što je Bootstrap

Ako želimo da izbegnemo previše manuelnog podešavanja za različite pretraživače, najbolja opcija je da koristimo CSS framework poput Bootstrap-a.

Framework-i kao što je Bootstrap već imaju rešenja za mnoge probleme sa kompatibilnošću među pretraživačima.

Korišćenjem framework-a, dobijamo unapred postavljene stilove koji su testirani na više pretraživača i uređaja, što može značajno uštedeti vreme i trud.

4. Koristiti Autoprefixer

Autoprefixer je alat koji automatski dodaje potrebne vendor prefikse za CSS svojstva.

Različiti pretraživači često zahtevaju različite prefikse za određena CSS svojstva kako bi ih podržali, kao što su:

-webkit- za Chrome i Safari,
-moz- za Firefox,
-ms- za Internet Explorer.

Na primer, ako koristimo CSS za transformaciju elementa, neki pretraživači mogu zahtevati prefiks -webkit- dok drugi ne.
Sa Autoprefixer-om, ne moramo ručno dodavati ove prefikse – on će automatski dodati pravi prefiks za svaki pretraživač.

Evo kako bi izgledao primer bez i sa Autoprefixer-om:

Bez Autoprefixer-a:

div {
  transform: rotate(45deg);
}

Sa Autoprefixer-om:

div {
  -webkit-transform: rotate(45deg); /* Safari i Chrome */
  -moz-transform: rotate(45deg); /* Firefox */
  transform: rotate(45deg); /* Moderni browseri */
}

5. Koristi Reset CSS ili Normalize.css

Jedan od čestih problema sa kompatibilnošću između pretraživača su podrazumevani stilovi koji se primenjuju na HTML elemente. Na primer, neki pretraživači mogu podrazumevano dodati margine ili padding na h1 elemente, dok drugi ne.

Reset CSS i Normalize.css su skupovi stilova koji resetuju ili standardizuju ove podrazumevane vrednosti, omogućavajući nam da imamo čistiji i dosledniji osnovni izgled.

Normalize.css je često bolja opcija od kompletnog resetovanja stila, jer samo standardizuje razlike među pretraživačima, zadržava korisne podrazumevane stilove, čineći dizajn konzistentnijim između različitih pretraživača bez prekomernog uklanjanja. Ovaj pristup je modularniji i lakši za debagovanje, ali manje "agresivan" u odnosu na resetovanje stilova.

Reset CSS potpuno uklanja sve podrazumevane stilove koje pretraživači primenjuju i vraća elemente u početno stanje, omogućavajući developerima da počnu sa "čistom" osnovom. Ovim pristupom može nam biti teško debagovanje i održavanje zbog velikih lanaca selektora.

6. PostCSS i plugin-ovi za kompatibilnost

Ako koristimo PostCSS ili slične biblioteke za CSS, možemo koristiti plugin-ove koji omogućavaju korišćenje moderne CSS sintakse.

Na primer, neki plugin-ovi omogućavaju korišćenje novih CSS funkcionalnosti koje nisu još podržane u svim pretraživačima, ali će biti automatski transpile-ovane u stariju verziju koda koja je kompatibilna sa svim pretraživačima.

Zaključak

Rešavanje problema sa specifičnim pretraživačima zahteva korišćenje više tehnika i alata, kako bi se osigurao dosledan izgled i funkcionalnost sajta na svim platformama.
Kombinovanjem alata kao što su Autoprefixer, Normalize.css, i CSS framework-ovi poput Bootstrap-a, možemo značajno pojednostaviti ovaj proces i eliminisati mnoge probleme sa kompatibilnošću.
Pored toga, korišćenje kondicionalnih stilova i specifičnih rešenja za starije verzije pretraživača, pomoćiće da sajt izgleda i funkcioniše kako treba, bez obzira na uređaj ili pretraživač koji korisnici koriste.

Progresivno renderovanje: poboljšanje performansi prikaza sadržaja

Jelena Petkovic — Thu, 14 Nov 2024 18:36:48 +0000

Progresivno renderovanje je skup tehnika koje se koriste za poboljšanje performansi web stranice, posebno u smislu brzine prikaza sadržaja korisnicima. Delovi stranice se prikazuju i učitavaju postepeno, umesto da se cela stranica učitava odjednom. Cilj je da se sadržaj što pre prikaže, čime se poboljšava perceptivno vreme učitavanja – vreme tokom kog korisnik doživljava da se stranica učitava.

Prednosti progresivnog renderovanja

Brže vreme prikaza - Korisnici brže vide prvi sadržaj, što poboljšava korisničko iskustvo, posebno na sporijim mrežama.
Optimizacija za slabije uređaje - Manje moćni uređaji mogu lakše prikazati inicijalni sadržaj bez zastoja.
SEO koristi - Pretraživači indeksiraju inicijalno učitane elemente, što pomaže u boljem rangiranju stranice.

Tehnike za progresivno renderovanje

Tehnike koje se koriste za progresivno renderovanje uključuju lazy loading za slike i druge resurse, server-side rendering (SSR) i client-side hydration kod SPA aplikacija.

Iako je progresivno renderovanje bilo posebno važno u danima kada je internet bio sporiji, ono je i dalje korisno u današnjem razvoju zbog široke upotrebe mobilnih mreža koje mogu biti nepouzdane. Evo nekoliko tehnika koje se koriste za progresivno renderovanje.

1. Lenjo učitavanje slika (Lazy loading)

U ovoj tehnici, slike na stranici se ne učitavaju sve odjednom. Umesto toga, slike se učitavaju tek kada korisnik skroluje do dela stranice gde se slika nalazi. Na taj način, resursi se koriste ekonomičnije, a stranica se učitava brže jer se prvo prikaže samo najvažniji sadržaj.

Moderno lenjo učitavanje: HTML sada podržava atribut loading="lazy" za <img> elemente, kojim se browseru poručuje da odloži učitavanje slika koje su izvan vidljivog dela stranice sve dok korisnik ne skroluje blizu njih. Na primer:

   <img src="image.jpg" loading="lazy" alt="Opis slike">

JavaScript praćenje skrolovanja: Možete koristiti JavaScript kako biste pratili poziciju skrola, i kada slika dođe blizu vidljivog dela ekrana, učitavanje slike može da se aktivira u tom trenutku (poređenjem koordinata slike sa trenutnom pozicijom skrola).

2. Prioritet za vidljiv sadržaj (Rendering sadržaja iznad preklopa)

Pod "sadržajem iznad preklopa" podrazumevamo sadržaj koji je odmah vidljiv u pretraživaču bez skrolovanja. Da bi stranica što brže prikazala ovaj ključni sadržaj, potrebno je učitati samo neophodne resurse kao što su osnovni CSS i skripte za početno prikazivanje stranice.

Minimizovanje resursa: Prilikom učitavanja stranice, trebalo bi uključiti samo minimalne količine CSS-a, sadržaja i skripti koji su neophodni za prikazivanje prvog dela stranice. Ostali resursi mogu biti odloženi koristeći skripte sa oznakom defer ili kroz praćenje događaja kao što su DOMContentLoaded ili load, kako bi se dodatni resursi učitali nakon početnog prikaza.

3. Asinhroni HTML fragmenti

Ova tehnika omogućava serveru da pošalje deo HTML-a ka pretraživaču kako bi stranica mogla da se renderuje odmah, dok se preostali delovi učitavaju sukcesivno. Ovakav pristup je posebno koristan za dinamičke stranice gde sadržaj dolazi sa servera – prvo se prikazuje deo stranice, dok se ostali delovi naknadno dopunjuju.

4. Preload i prefetching resursa

Korišćenje <link rel="preload"> ili <link rel="prefetch"> za učitavanje kritičnih resursa kao što su stilovi, skripte ili fontovi pre nego što postanu potrebni. Ovo omogućava brže učitavanje sadržaja, posebno za resurse koji nisu odmah potrebni, ali se koriste kasnije na stranici.

5. Code splitting i dinamičko učitavanje JavaScript-a

Razbijanje JavaScript koda u manje delove (chunke) koji se učitavaju samo kada su potrebni, čime se smanjuje početni volumen podataka koji se preuzima.

6. CSS kritična putanja (Critical CSS)

Izolovanje i učitavanje samo najvažnijeg CSS-a za inicijalni prikaz stranice, dok se ostatak može učitati asinhrono. Ovo omogućava brže prikazivanje vizuelnog sadržaja, dok se ostatak stranice učitava u pozadini.

7. Server-Side Rendering (SSR) i Static Site Generation (SSG)

Renderovanje delova stranice na serveru pre nego što se pošalju korisniku. Ovo omogućava da korisnici odmah vide sadržaj bez čekanja na JavaScript učitavanje, čime se postiže bolja performansa i SEO.

8. Progressive Web Apps (PWA)

Korisćenje tehnologije PWA omogućava učitavanje i pristupanje aplikaciji i kada korisnik nije online, čime se smanjuje opterećenje mreže i omogućava brzo učitavanje sadržaja čak i u uslovima lošije internet konekcije.

Zaključak

Progresivno renderovanje pomaže u postizanju bržeg prikaza sadržaja, čime se smanjuje percepcija vremena učitavanja. Bez obzira na sve brže internet veze, ove tehnike su i dalje korisne zbog povećane upotrebe mobilnih uređaja i promenljivog kvaliteta mobilnih mreža. Na taj način korisnicima pružate bolje iskustvo, uz brži pristup najvažnijim informacijama na vašoj stranici.

Razumevanje funkcija višeg reda (Higher-Order Functions) u JavaScript-u

Jelena Petkovic — Thu, 14 Nov 2024 15:32:59 +0000

Ako učite JavaScript, verovatno ste naišli na pojam Funkcija Višeg Reda (Higher-Order Functions). Iako zvuči složeno, nije toliko komplikovano. JavaScript, kao funkcionalni programski jezik, omogućava korišćenje ovih funkcija, koje su ključne u programiranju zasnovanom na funkcijama.

Funkcionalno Programiranje

Funkcionalno programiranje podrazumeva kreiranje i korišćenje funkcija kao primarnih gradivnih elemenata. U ovom pristupu, funkcije se mogu prosleđivati kao parametri drugim funkcijama ili vraćati kao rezultati. Ovaj način razmišljanja omogućava organizovano i efikasno pisanje koda.

Prvoklasne Funkcije

JavaScript tretira funkcije kao "prvoklasne građane". To znači da su funkcije objekti — specifična vrsta objekata koji se mogu dodeljivati promenljivama, prosleđivati kao parametri i koristiti u različitim kontekstima, kao što je slučaj sa brojevima ili stringovima.

Primer:

function pozdrav() {
  console.log('Zdravo, svete!');
}
pozdrav();  // Ispisuje 'Zdravo, svete!'

// Dodavanje svojstva funkciji
pozdrav.jezik = 'srpski';
console.log(pozdrav.jezik); // Ispisuje 'srpski'

Dodeljivanje Funkcija Promenljivama

U JavaScriptu, funkcije se mogu dodeljivati promenljivama:

const kvadrat = function(x) {
  return x * x;
};
console.log(kvadrat(5));  // Ispisuje 25

Prosleđivanje Funkcija kao Parametara

Jedna od glavnih karakteristika prvoklasnih funkcija je mogućnost da se proslede kao argumenti drugim funkcijama:

function formalniPozdrav() {
  console.log("Kako ste?");
}
function neformalniPozdrav() {
  console.log("Šta ima?");
}
function pozdravVrsta(vrsta, formalan, neformalan) {
  if (vrsta === 'formalan') {
    formalan();
  } else if (vrsta === 'neformalan') {
    neformalan();
  }
}
pozdravVrsta('neformalan', formalniPozdrav, neformalniPozdrav);  // Ispisuje 'Šta ima?'

Funkcije Višeg Reda

Funkcije Višeg Reda su funkcije koje prihvataju druge funkcije kao argumente ili ih vraćaju kao rezultate. Ovo omogućava elegantnije i sažetije pisanje koda. Primeri uključuju metode map, filter i reduce.

`map` Metod

map kreira novi niz tako što poziva funkciju na svakom elementu postojećeg niza:

Bez map metode:

const arr1 = [10, 20, 30, 40, 50];
const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
  arr2.push(arr1[i] * 2);
}
console.log(arr2);  // [20, 40, 60, 80, 100]

Sa map metodom:

const arr1 = [10, 20, 30. 40, 50];
const arr2 = arr1.map(item => item * 2);
console.log(arr2);  // [20, 40, 60, 8-, 100]

`filter` Metod

filter stvara novi niz sa svim elementima koji zadovoljavaju zadati uslov:

const osobe = [
  { ime: 'Pera', godine: 13 },
  { ime: 'Mika', godine: 18 },
  { ime: 'Laza', godine: 64 },
  { ime: 'Ana', godine: 10 },
];
const punoletni = osobe.filter(osoba => osoba.godine >= 18);
console.log(punoletni);  // [ { ime: 'Mika', godine: 18 }, { ime: 'Laza', godine: 64 } ]

`reduce` Metod

reduce izvršava funkciju na svakom članu niza i vraća jedinstvenu vrednost:

Primer sa reduce:

const arr = [4, 6, 10, 5, 25];
const suma = arr.reduce((akumulator, vrednost) => akumulator + vrednost, 0);
console.log(suma);  // 50

Kreiranje Funkcije Višeg Reda

Zamislite da JavaScript nema ugrađenu map metodu. Možemo sami da je kreiramo:

function mapiraj(arr, fn) {
  const noviNiz = [];
  for (let i = 0; i < arr.length; i++) {
    noviNiz.push(fn(arr[i]));
  }
  return noviNiz;
}
const duzine = mapiraj(['JavaScript', 'Python'], item => item.length);
console.log(duzine);  // [10, 6]

Zaključak

Funkcije Višeg Reda omogućavaju fleksibilnost i jednostavnost koda u JavaScriptu. Korišćenjem ovih funkcija, naš kod postaje sažetiji, organizovaniji i lakši za održavanje.

Uvod u Modularizaciju u React-u: AMD i CommonJS modularizacija

Jelena Petkovic — Wed, 06 Nov 2024 17:55:04 +0000

Modularizacija je srce modernog razvoja aplikacija, naročito kada radimo sa bibliotekama poput React-a. Razumevanje modularizacije i različitih pristupa modularizaciji kao što su AMD i CommonJS je ključ za razvoj efikasnog, održivog i skalabilnog koda. U ovom blog postu, istražićemo kako funkcioniše modularizacija u React aplikacijama, zašto je važna i kako AMD i CommonJS pristupi modularizaciji doprinose efikasnosti JavaScript aplikacija.

Zašto je modularizacija ključna za React aplikacije?

Kada radimo sa React-om, modularizacija nam omogućava da razbijemo naš korisnički interfejs na manje delove – komponente – koje funkcionišu kao nezavisne jedinice. U suštini, svaka komponenta predstavlja deo korisničkog interfejsa sa sopstvenim stilovima, funkcionalnostima i zavisnostima, što aplikaciju čini preglednijom i olakšava njen razvoj i održavanje.

Modularizacija takođe pomaže u smanjenju rizika od konflikata između različitih delova koda, jer svaka komponenta može da funkcioniše nezavisno, koristeći sopstvene module i resurse. Tako dolazimo do važnosti modularizacije u React aplikacijama: svaka komponenta može biti definisana kao zasebni modul, što pojednostavljuje upravljanje zavisnostima i omogućava timskom radu da teče glatko i bez ometanja.

Struktura modula u React-u

React aplikacije obično prate strukturu foldera koja grupiše srodne komponente i resurse. Recimo da pravimo jednostavnu aplikaciju sa nekoliko stranica kao što su Home, About i Contact. Umesto da sve stranice definišemo u jednom fajlu, možemo ih modularizovati tako da svaki fajl predstavlja jednu komponentu. Evo primera kako bi to izgledalo:

// Home.js
export default function Home() {
  return <h1>Home Page</h1>;
}

// About.js
export default function About() {
  return <h1>About Page</h1>;
}

// Contact.js
export default function Contact() {
  return <h1>Contact Page</h1>;
}

Kada je svaki deo aplikacije podeljen u nezavisne module (komponente), lako možemo ponovo koristiti ove delove i u drugim delovima aplikacije. Ovaj pristup pomaže da aplikacija ostane čista, lako održiva i skalabilna.

AMD i CommonJS modularizacija u JavaScript-u

Dok su ES6 moduli standard u modernom JavaScript-u i često se koriste u React aplikacijama, postoje i drugi standardi koji su popularni u JavaScript svetu, poput AMD (Asynchronous Module Definition) i CommonJS. Iako nisu podjednako uobičajeni u React aplikacijama, razumevanje razlika između njih može pomoći kada radimo sa različitim JavaScript projektima, posebno onima koji se ne oslanjaju na React.

CommonJS

CommonJS je modularizacija razvijena za server-side JavaScript okruženja, posebno za Node.js. Ovaj standard koristi module.exports za eksportovanje modula i require za njihovo učitavanje. Ključna karakteristika CommonJS-a je sinhronost, što znači da se moduli učitavaju redom, i pogodan je za server-side okruženja gde je učitavanje modula sinhrono (redom) često efikasnije i bolje usklađeno sa zahtevima servera.

Primer CommonJS modularizacije:

// math.js
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};

// main.js
const math = require('./math');
console.log(math.add(2, 3)); // 5

U CommonJS-u, sve što je potrebno za modul definišemo pomoću module.exports. Kada želimo da koristimo modul, jednostavno ga require-ujemo. Zbog ove jednostavnosti, CommonJS je najčešći standard za Node.js projekte i omogućava diveloperima da dele module kroz Node Package Manager (NPM).

AMD (Asynchronous Module Definition)

Za razliku od CommonJS-a, AMD (Asynchronous Module Definition) standard koristi se pre svega u aplikacijama u brauzeru. Osmišljen je kako bi omogućio asinhrono učitavanje modula, što je ključno za optimizaciju performansi brauzera.

Kod asinhonog učitavanja, moduli se ne učitavaju redom, već se paralelno preuzimaju, smanjujući vreme čekanja i omogućavajući brže učitavanje stranica. AMD koristi funkciju define za definisanje modula i funkciju require za njihovo učitavanje.

Primer AMD modularizacije:

// math.js
define([], function () {
  return {
    add: function (a, b) {
      return a + b;
    },
    subtract: function (a, b) {
      return a - b;
    },
  };
});

// main.js
require(['math'], function (math) {
  console.log(math.add(2, 3)); // 5
});

AMD omogućava modularizaciju na način koji je idealan za okruženja gde su performanse i brzina učitavanja stranica od suštinskog značaja. Uzimajući u obzir da asinhonost omogućava efikasniju upotrebu resursa brauzera, AMD je popularan u velikim JavaScript aplikacijama koje zahtevaju brzo učitavanje i interaktivnost.

Koje su glavne razlike između CommonJS i AMD modularizacije?

Primena: CommonJS je idealan za server-side JavaScript aplikacije kao što je Node.js, dok je AMD dizajniran za aplikacije u brauzeru gde asinhonost može poboljšati performanse.
Sinhronost: CommonJS moduli se učitavaju sinhrono, što znači da se svaki modul učitava redom. AMD, s druge strane, koristi asinhrono učitavanje, omogućavajući aplikacijama u brauzeru da se učitaju brže i koriste resurse efikasnije.
Složenost: CommonJS koristi require za učitavanje modula i module.exports za eksport, što je prilično jednostavno. AMD koristi define za definisanje i require za učitavanje modula, što može zahtevati više koda, ali pruža veću fleksibilnost u brauzeru.
Kompaktibilnost: CommonJS radi dobro u Node.js okruženju, dok AMD pruža veću fleksibilnost u pretraživačima zbog asinhronog učitavanja. Ovo ih čini pogodnim za različite svrhe.

AMD i CommonJS u React-u

U React-u se AMD i CommonJS ne koriste toliko često jer su ES6 moduli (import i export) postali standardni način modularizacije. Ipak, poznavanje AMD i CommonJS modula može biti korisno kada radimo na projektima koji se ne oslanjaju na React, kao što su neke stare JavaScript aplikacije ili projekti zasnovani na Node.js.

Zaključak

Modularizacija koda omogućava izgradnju skalabilnih, organizovanih i efikasnih aplikacija. Iako se u React-u primarno koriste ES6 moduli, razumevanje AMD i CommonJS modularizacije može biti korisno kada radimo sa različitim JavaScript projektima i alatima. CommonJS je izvrstan za server-side aplikacije zbog sinhronog učitavanja, dok AMD omogućava brže učitavanje modula u brauzeru, čineći ga odličnim izborom za aplikacije u pretraživaču.

Bez obzira na odabrani pristup, modularizacija je osnovna praksa u modernom JavaScript programiranju i donosi brojna poboljšanja u organizaciji, održavanju i performansama aplikacija.

Sveobuhvatan Vodič za Čuvanje Podataka u JavaScript-u

Jelena Petkovic — Tue, 01 Oct 2024 16:52:35 +0000

U savremenom razvoju web aplikacija, efikasno čuvanje podataka na klijentskoj strani je ključno za poboljšanje korisničkog iskustva i performansi aplikacije. Ovaj post pruža detaljno objašnjenje različitih metoda čuvanja podataka u JavaScript-u, uključujući cookies, local storage, session storage i IndexedDB. Takođe ćemo pokriti najbolje prakse, bezbednost, performanse i reaktivne pristupe.

1. Cookies

Kako funkcionišu Cookies?

Cookies su male datoteke koje server šalje klijentskom pretraživaču, a koje se čuvaju lokalno na korisničkom uređaju. Koriste se za različite svrhe, uključujući autentifikaciju, praćenje sesija i čuvanje korisničkih preferencija.

Gde se koristi Cookies?

Autentifikaciju: Cookies često čuvaju tokene za prijavu (npr. JWT) ili sesije, tako da korisnici ostaju prijavljeni čak i kada osveže stranicu ili posete sajt nakon nekog vremena.
Praćenje korisnika: Koriste se za praćenje korisničkih aktivnosti na više sajtova (često za ciljanje oglasa ili analitiku).
Personalizacija: Čuvanje korisničkih preferencija (npr. jezik sajta, tema) kako bi sajt mogao da prilagodi sadržaj sledeći put kada ga posetite.

Primer upotrebe:
Kada se korisnik prijavi na sajt, server može da pošalje cookie sa tokenom za sesiju. Svaki sledeći zahtev ka serveru koristi taj cookie za potvrdu identiteta.

Prednosti Cookies-a

Cookies mogu imati datum isteka, što znači da se automatski brišu kada više nisu potrebni. Ovo je korisno za čuvanje privremenih informacija.
Cookies se šalju sa svakim HTTP zahtevom, što ih čini pogodnim za autentifikaciju korisnika i praćenje sesija.

Mane Cookies-a

Ograničeni su na otprilike 4KB po cookie-ju, što može biti nedovoljno za veće količine podataka.
Prekomerna upotreba cookies-a može usporiti performanse, posebno ako se često šalju sa HTTP zahtevima.

Primer korišćenja Cookies-a

Instalirajte biblioteku js-cookie za lakše upravljanje cookies-ima:

npm install js-cookie

import Cookies from 'js-cookie';

// Čuvanje korisničkog imena 7 dana
Cookies.set('username', 'Jelena', { expires: 7 });

// Čitanje korisničkog imena
const username = Cookies.get('username');

// Brisanje korisničkog imena
Cookies.remove('username');

2. Local Storage

Kako funkcioniše Local Storage?

Local storage omogućava čuvanje podataka u klijentskom pretraživaču bez datuma isteka. Ovo znači da podaci ostaju dostupni između sesija, što ga čini idealnim za dugotrajne informacije.

Gde se koristi Local Storage?

Čuvanje podataka koji treba da traju duže: Može se koristiti za čuvanje podataka koji ostaju sačuvani i nakon zatvaranja prozora bruzera, poput korisničkih preferencija ili postavki sajta.
Keširanje podataka: Može se koristiti za keširanje odgovora sa servera ili sadržaja kako bi se smanjio broj zahteva prilikom ponovnih poseta sajtu.

Primer upotrebe:
Aplikacija za upravljanje zadacima može čuvati listu zadataka u localStorage, tako da se zadržavaju i nakon što korisnik zatvori ili osveži stranicu.

Prednosti Local Storage-a

Local storage može da čuva do 5-10MB podataka, što je znatno više od cookies-a.
Podaci ostaju dostupni između sesija, čime se omogućava dugotrajno skladištenje informacija.

Mane Local Storage-a

Local storage ne može slati podatke sa HTTP zahtevima, što ga čini manje pogodnim za autentifikaciju.
Podaci nisu enkriptovani i lako su dostupni putem JavaScript-a, što može predstavljati rizik.

Primer korišćenja Local Storage-a

// Čuvanje korisničkog imena
localStorage.setItem('username', 'Jelena');

// Čitanje korisničkog imena
const username = localStorage.getItem('username');

// Brisanje korisničkog imena
localStorage.removeItem('username');

3. Session Storage

Kako funkcioniše Session Storage?

Session storage je sličan local storage-u, ali se podaci čuvaju samo za vreme trajanja sesije. Kada se prozori zatvore, podaci se brišu, čime se osigurava privatnost.

Gde se koristi Session Storage?

Privremeno čuvanje korisničkih podataka: Na primer, ako korisnik popunjava višeformni obrazac kroz više stranica, sessionStorage se može koristiti za čuvanje unosa korisnika između stranica.
Privremeno stanje aplikacije: Kada je potrebno čuvati podatke dok korisnik ne osveži ili zatvori stranicu, na primer za pamćenje korisničkih akcija koje su relevantne samo tokom trenutne posete sajtu.

Primer upotrebe:
Kod online prodavnica, podaci o artiklima u korpi mogu se čuvati u sessionStorage dok korisnik ne dovrši proces kupovine. Kada zatvori tab, podaci se brišu.

Prednosti Session Storage-a

Podaci se ne čuvaju između sesija, što je idealno za privremene informacije.
Kao i local storage, session storage ima kapacitet 5-10MB.

Mane Session Storage-a

Ne može se koristiti za dugotrajno skladištenje podataka, što ga čini manje pogodnim za aplikacije koje zahtevaju trajno čuvanje informacija.

Primer korišćenja Session Storage-a

// Čuvanje korisničkog imena
sessionStorage.setItem('username', 'Jelena');

// Čitanje korisničkog imena
const username = sessionStorage.getItem('username');

// Brisanje korisničkog imena
sessionStorage.removeItem('username');

4. IndexedDB

Kako funkcioniše IndexedDB?

IndexedDB asinhrona baza podataka sa ključevima i vrednostima, zasnovana na objektima koja omogućava skladištenje velike količine podataka direktno u korisnikovom pregledaču. Podaci se čuvaju u indeksiranoj bazi, što omogućava brzo pretraživanje i organizaciju. Podaci se organizuju u objektne prodavnice (object stores) koje su slične tabelama u SQL bazama podataka. Svaka objektna prodavnica ima kolekciju zapisa gde se svaki zapis identifikuje putem ključa. IndexedDB je JavaScript API i deo je standarda HTML5, te je podržan u većini modernih pregledača.

Gde se koristi IndexedDB?

Web aplikacije koje rade offline: IndexedDB omogućava aplikacijama da nastave da rade čak i kada nema internet konekcije tako što omogućava čuvanje podataka lokalno.
Složeni podaci: Može da se koristi za čuvanje složenih struktura podataka poput objekata, nizova, i binarnih podataka, što je pogodno za aplikacije koje rade sa velikim količinama podataka.
Keširanje podataka: Može da služi za keširanje podataka radi ubrzavanja učitavanja i smanjenja opterećenja servera.
Progresivne web aplikacije (PWA): IndexedDB je često korišćen u PWA aplikacijama za sinhronizaciju podataka i podršku za offline rad.

Osnovni koncepti i operacije u IndexedDB:

Baza podataka (Database): Sadrži više objektnih prodavnica.
Objektna prodavnica (Object Store): Sadrži podatke kao što su objekti ili druge strukture podataka.
Transakcije (Transaction): Svaka operacija nad bazom podataka (čitanje, pisanje) mora biti unutar transakcije.
Indeksi (Indexes): Koriste se za efikasnije pretraživanje podataka unutar objektne prodavnice.
Ključevi (Keys): Identifikuju svaki zapis unutar objektne prodavnice.

Prednosti IndexedDB?

Može da skladišti veće količine podataka (do nekoliko GB) u poređenju sa drugim opcijama kao što su LocalStorage ili SessionStorage.
Podržava čuvanje kompleksnih struktura podataka kao što su objekti, slike, video zapisi i druge vrste binarnih podataka.
Većina operacija je asinhrona, što omogućava da se aplikacije ne blokiraju dok se podaci čitaju ili pišu.
Podržava transakcijski model koji osigurava integritet podataka i omogućava rollback u slučaju greške.

Mane IndexedDB-a

API za IndexedDB je komplikovaniji od drugih metoda, što može zahtevati više vremena za učenje i implementaciju.

Primer korišćenja IndexedDB-a

// Otvaranje ili kreiranje baze podataka
let request = indexedDB.open('MyDatabase', 1);

// Event handler za kreiranje novih objektnih prodavnica
request.onupgradeneeded = function(event) {
    let db = event.target.result;
    // Kreiranje objektne prodavnice sa ključem po imenu
    db.createObjectStore('users', { keyPath: 'id' });
};

// Event handler za uspešno otvaranje baze
request.onsuccess = function(event) {
    let db = event.target.result;

    // Kreiranje transakcije i pristupanje objektnoj prodavnici
    let transaction = db.transaction('users', 'readwrite');
    let objectStore = transaction.objectStore('users');

    // Dodavanje podataka
    let addRequest = objectStore.add({ id: 1, name: 'Jelena', age: 32 });

    addRequest.onsuccess = function() {
        console.log('Podatak uspešno dodat');
    };

    // Čitanje podataka
    let getRequest = objectStore.get(1);
    getRequest.onsuccess = function(event) {
        console.log('Pročitani podaci:', event.target.result);
    };
};

request.onerror = function() {
    console.log('Greška prilikom otvaranja baze');
};

Najbolje Prakse za Korišćenje

Cookies

Minimalizujte podatke: Čuvajte samo neophodne informacije da biste smanjili veličinu cookies-a.
Sigurnost: Koristite Secure i HttpOnly atribute kako biste zaštitili cookies od neovlašćenog pristupa.
Smanjite trajanje: Postavite razuman datum isteka kako biste smanjili rizik od zastarelih podataka.

Local i Session Storage

JSON.stringify() i JSON.parse(): Kada čuvate složene objekte, koristite JSON.stringify() za konverziju objekta u string prilikom čuvanja i JSON.parse() prilikom čitanja.
Organizacija podataka: Koristite jasne i opisne ključeve kako biste olakšali pronalaženje podataka.
Ručna provera: Povremeno proveravajte i brišite neaktuelne ili nepotrebne podatke da biste oslobodili prostor.

Bezbednost

XSS (Cross-Site Scripting): Budite oprezni s podacima koje čuvate. Enkriptujte osetljive podatke pre nego što ih sačuvate.
CORS (Cross-Origin Resource Sharing): Kada šaljete podatke između različitih domena, koristite CORS da biste osigurali da su samo ovlašćeni domeni u mogućnosti da pristupaju vašim resursima.

Performanse

Lazy loading: Prilikom učitavanja podataka iz IndexedDB ili Local Storage, razmotrite korišćenje lazy loading pristupa kako biste smanjili vreme učitavanja.
Batch operacije: Kada radite sa IndexedDB, koristite batch operacije za dodavanje ili ažuriranje više stavki odjednom, čime ćete smanjiti broj transakcija i povećati brzinu.

Reaktivno Čuvanje Podataka

U kombinaciji sa React-om, možete koristiti reaktivne pristupe za čuvanje podataka. Na primer, kreiranje prilagođenog hook-a za rad sa local storage:

import React, { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    const item = window.localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(storedValue));
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
};

const App = () => {
  const [name, setName] = useLocalStorage('name', '');

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <p>Your name is: {name}</p>
    </div>
  );
};

Analiza i Monitoring

Uvek je korisno analizirati i pratiti kako se podaci koriste u aplikaciji. Alati za analizu podataka kao što su Google Analytics ili Mixpanel mogu pomoći u razumevanju interakcija korisnika i optimizaciji sistema za čuvanje podataka.

Zaključak

Razumevanje različitih metoda za čuvanje podataka u JavaScript-u, kao i njihovih prednosti i mana, može značajno poboljšati vašu aplikaciju. Uzimajući u obzir bezbednost, performanse i korisničko iskustvo, možete izabrati pravu metodu za vaše specifične potrebe.

Mastering HTML i CSS za Intervju: 50 Obaveznih Pitanja i 10 Koja će Vas Iznenaditi

Jelena Petkovic — Thu, 19 Sep 2024 09:07:36 +0000

Kada se pripremate za intervju za poziciju front-end developera, HTML i CSS su osnovne tehnologije koje će vam sigurno biti na intervjuu. Većina poslodavaca će vam postaviti uobičajena pitanja koja se tiču strukture HTML-a i stilizacije CSS-om, ali postoje i ona pitanja koja vas mogu iznenaditi i izazvati konfuziju. Zato je važno ne samo savladati osnovna znanja, već biti spreman na dublja i neočekivana pitanja.
U ovom postu, prvo ćemo proći kroz 50 najčešćih pitanja koja se postavljaju na intervjuima za HTML i CSS, zajedno sa detaljnim odgovorima. Na kraju, dodaću još 10 neočekivanih pitanja koja vas mogu zbuniti, ali sa objašnjenjima kako ih rešiti.

HTML pitanja:

1. Šta je HTML i koja je njegova osnovna svrha?
HTML (HyperText Markup Language) je jezik za označavanje koji se koristi za strukturiranje sadržaja na web stranici. Omogućuje kreiranje naslova, paragrafa, linkova, slika, tabela i drugih elemenata stranice.

2. Koje su glavne HTML5 novine u odnosu na prethodne verzije?
HTML5 donosi semantičke oznake poput <header>, <footer>, <article>, <section>, podršku za multimedijske elemente <audio> i <video>, lokalno skladištenje (localStorage, sessionStorage), te unapređenu podršku za grafiku putem <canvas> elementa.

3. Objasni razliku između id i class atributa.
id je jedinstveni identifikator koji se može dodeliti samo jednom elementu na stranici, dok se class može dodeliti više elemenata i koristi se za grupisanje elemenata sa sličnim stilom ili funkcionalnošću.

4. Šta je semantički HTML i zašto je važan?
Semantički HTML koristi elemente koji imaju jasno definisano značenje (npr. <article>, <footer>, <header>). To poboljšava pristupačnost, SEO, čitljivost koda i olakšava rad pretraživačima i čitačima ekrana.

5. Koje su glavne semantičke HTML5 oznake i kako se koriste?
Glavne oznake uključuju <header>, <footer>, <nav>, <article>, <section>, <aside>, i <main>. Ove oznake pružaju strukturu i jasnoću za organizaciju sadržaja.

6. Šta je DOCTYPE i zašto je važan u HTML dokumentu?
<!DOCTYPE html> deklaracija definiše verziju HTML-a koja se koristi. U HTML5, jednostavna deklaracija <!DOCTYPE html> obezbeđuje da se stranica prikazuje pravilno u svim pretraživačima.

7. Kako napraviti link u HTML-u?
Koristi se <a> oznaka: <a href="https://example.com">Klikni ovde</a>. href atribut specificira URL na koji link vodi.

8. Kako kreirati tabelu u HTML-u?
Tabela se kreira pomoću <table> oznake, a redovi i kolone pomoću <tr>, <td>, i <th>. Primer:

<table>
  <tr>
    <th>Ime</th>
    <th>Prezime</th>
  </tr>
  <tr>
    <td>Marko</td>
    <td>Marković</td>
  </tr>
</table>

9. Šta je atribut alt kod slike i zašto je važan?
alt atribut pruža alternativni tekst za slike koje se ne mogu prikazati. Važan je za SEO i pristupačnost, jer ga čitači ekrana koriste za opisivanje slike.

10. Kako kreirati formu u HTML-u?
Forme se kreiraju pomoću <form> oznake sa poljima poput <input>, <textarea>, i <button>. Primer:

 <form action="/submit" method="POST">
     <input type="text" name="ime" placeholder="Unesi ime" />
     <button type="submit">Pošalji</button>
 </form>

11. Kako se koristi input tipa radio i checkbox?
radio se koristi kada je potrebno izabrati jednu opciju iz grupe, dok checkbox omogućava izbor više opcija. Primer:

  <input type="radio" name="pol" value="muško" /> Muško
  <input type="radio" name="pol" value="žensko" /> Žensko
  <br>
  <input type="checkbox" name="hobi" value="sport" /> Sport

12. Kako uključiti video u HTML?
Koristi se <video> oznaka:

   <video controls>
      <source src="video.mp4" type="video/mp4">
   </video>

13. Šta je atribut placeholder u HTML formi?
placeholder atribut pruža tekstualni nagoveštaj unutar polja za unos koji se vidi dok korisnik ne unese podatke. Primer:

   <input type="text" placeholder="Unesi svoje ime">

14. Kako definišemo listu sa redosledom i bez redosleda?
Koristi se <ol> za numerisane liste i <ul> za liste sa tačkama. Stavke se definišu pomoću <li>. Primer:

   <ul>
      <li>Prva stavka</li>
      <li>Druga stavka</li>
   </ul>

15. Kako pravimo spoljne i unutrašnje linkove u HTML-u?
Spoljni link vodi do druge stranice na internetu (koristi se puna URL adresa), dok unutrašnji link vodi na drugu stranicu unutar sajta (koristi se relativna adresa). Primer:

   <a href="https://example.com">Spoljni link</a>
   <a href="/kontakt">Unutrašnji link</a>

CSS pitanja:

16. Šta je CSS i čemu služi?
CSS (Cascading Style Sheets) služi za stilizovanje HTML elemenata, definišući boje, margine, pozicioniranje, fontove, itd.

17. Koje su prednosti korišćenja eksternih CSS fajlova?
Eksterni CSS fajlovi omogućavaju da se stilovi dele između više HTML stranica, smanjujući redundanciju i olakšavajući održavanje koda.

18. Kako primenjujemo CSS na HTML elemente?
CSS se može primeniti na tri načina: inline (unutar HTML-a pomoću style atributa), u <style> oznaci unutar <head>, ili u eksternom CSS fajlu.

19. Objasni box model u CSS-u.
CSS box model definiše kako se svaki HTML element prikazuje, uključujući sadržaj (content), padding, border, i margin. To je ključna osnova za razumevanje layout-a.

20. Kako dodati pozadinsku sliku u CSS-u?
Koristi se background-image svojstvo:

      body {
        background-image: url('slika.jpg');
      }

21. Kako centrirati element horizontalno pomoću CSS-a?
Za blok elemente koristi se margin: 0 auto ako element ima zadatu širinu. Za inline elemente koristi se text-align: center na roditelju.

22. Kako se kreiraju responsive web stranice pomoću CSS-a?
Responsive dizajn se kreira korišćenjem media query-ja, fleksibilnih jedinica poput em, rem, i vw/vh, i fleksibilnih layout sistema kao što su Flexbox i Grid.

23. Šta su CSS pseudo-klase i kako se koriste?
Pseudo-klase definišu posebna stanja elemenata, npr. :hover, :focus, :nth-child(). Primer:

      a:hover {
        color: red;
      }

24. Kako koristiti Flexbox za postavljanje elemenata?
Flexbox je moćan alat za postavljanje elemenata u jednom pravcu (horizontalno ili vertikalno) i koristi se pomoću display: flex. Primer:

      .container {
        display: flex;
        justify-content: center;
        align-items: center;
      }

25. Kako funkcionišu CSS grid layout sistemi?
CSS Grid omogućava kreiranje dvodimenzionalnih layout-ova koristeći redove i kolone.
Primer:

      .grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
      }

26. Koja je razlika između inline i block elemenata u CSS-u?
block elementi zauzimaju celu širinu roditeljskog elementa i počinju novi red (npr. <div>), dok inline elementi zauzimaju samo potrebnu širinu i stoje u istom redu (npr. <span>).

27. Kako funkcioniše z-index?
z-index definiše redosled preklapanja elemenata. Elementi sa većim z-index vrednostima će biti iznad onih sa manjim vrednostima. Radi samo na elementima sa position vrednostima osim static.

28. Šta je razlika između position: relative, absolute, fixed, i sticky?
- relative: Pozicionira element relativno prema njegovom uobičajenom mestu.

- absolute: Pozicionira element relativno prema najbližem pozicioniranom roditelju.

- fixed: Element je fiksiran u odnosu na prozor pretraživača.

- sticky: Kombinacija relative i fixed - ostaje relativan dok ne dosegne određenu tačku.

29. Kako se koristi calc() funkcija u CSS-u?
calc() omogućava kombinovanje različitih CSS jedinica u izračunavanju vrednosti.
Primer:

      div {
        width: calc(100% - 50px);
      }

30. Kako se koristi transition za animaciju u CSS-u?
transition omogućava dodavanje efekta prelaza između dva stanja elementa.
Primer:

      button {
        background-color: blue;
        transition: background-color 0.3s ease;
      }
      button:hover {
        background-color: red;
      }

31. Kako primeniti više klasa na jedan HTML element?
Više klasa se dodaje razdvajanjem njihovih imena razmakom. Primer:

      <div class="box rounded"></div>

32. Kako se kreira vertikalni razmak između blok elemenata?
Koristi se margin. Na primer, margin-top ili margin-bottom mogu kreirati razmak između elemenata.

33. Šta su CSS varijable i kako se koriste?
CSS varijable omogućavaju definisanje prilagodljivih vrednosti koje se mogu koristiti više puta u stilovima.
Primer:

      :root {
        --main-color: #96c1b0;
      }
      body {
        background-color: var(--main-color);
      }

34. Kako izbeći CSS konflikte pomoću specificity pravila?
Specificity određuje koja pravila će biti primenjena kada više selektora odgovaraju istom elementu. Specifičniji selektori (npr. ID selektori) imaju prednost nad opštim selektorima (npr. tagovi ili klase).

Nivo - univerzalni selektor, ne utiče uopšte na specifičnost (*)
Nivo
- HTML selektor
- pseudo-element (::before, ::after, ::first-letter, ::first-line, ::selection...)
Nivo
- selektor klase
- selektor HTML parametra (npr.: a[href$=".pdf"], input[name*="email"] , [class~="button"] ...)
- pseudo-klasa (:hover, :focus, :active, :first-child, :nth-child())
Nivo - ID selektor
Nivo - inline CSS
Nivo - !important pravilo

35. Šta znači !important i kada ga treba koristiti?
!important preuzima prioritet nad bilo kojim drugim pravilima za isti element. Koristi se samo u posebnim slučajevima kada treba nadjačati pravilo.

36. Kako kreirati transition ili transform animacije u CSS-u?
Koriste se svojstva poput transition za prelaze između stanja ili transform za transformacije (rotacija, skaliranje, itd.). Primer:

      div {
        transition: transform 0.5s;
      }
      div:hover {
        transform: rotate(45deg);
      }

37. Kako dodati senku elementima?
Koristi se box-shadow za elemente kao što su div-ovi ili text-shadow za tekst. Primer:

      box {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      }

38. Šta znači display: none i kako se razlikuje od visibility: hidden?
display: none potpuno uklanja element iz dokumenta i layout-a, dok visibility: hidden element čini nevidljivim, ali on i dalje zauzima prostor na stranici.

39. Kako koristiti media queries za prilagođavanje različitim uređajima?
Media queries omogućavaju promenu stilova zavisno od veličine ekrana ili uređaja.
Primer:

      @media (max-width: 768px) {
        body {
          background-color: blue;
        }
      }

40. Kako koristiti float i koje su njegove alternative?
float se koristi za postavljanje elemenata levo ili desno od roditeljskog elementa. Moderne alternative su Flexbox i Grid.

41. Kako kreirati transparentnost u CSS-u?
Koristi se opacity ili RGBA boje. Primer:

      div {
        opacity: 0.5;
      }

42. Kako definišemo globalne stilove?
Globalni stilovi se definišu na vrhu CSS fajla ili koristeći selektore poput * ili html, body.
Primer:

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

43. Šta su CSS vendor prefiksi i zašto su važni?
Vendor prefiksi (npr. -webkit-, -moz-, -o-) omogućavaju podršku za novija CSS svojstva u različitim pretraživačima, dok svojstva još nisu potpuno standardizovana.

44. Kako koristiti min-width i max-width za responsivne dizajne?
min-width i max-width ograničavaju minimalne i maksimalne širine elemenata, čime se osigurava prilagodljiv dizajn.

45. Kako primeniti iste stilove na više elemenata u CSS-u?
Više selektora se može grupisati koristeći zarez.
Primer:

      h1, h2, h3 {
        color: #96c1b0;
      }

46. Kako stilizovati forme u CSS-u?
Možeš koristiti CSS pravila kao za druge elemente, ali može biti potrebno dodatno prilagođavanje za različite pretraživače.
Primer:

      input[type="text"] {
        padding: 10px;
        border: 2px solid #96c1b0;
      }

47. Šta je clearfix trik u CSS-u?
clearfix se koristi za rešavanje problema sa float elementima. Najčešće koristi pseudo-element:

      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }

48. Kako koristiti aspect-ratio u CSS-u?
aspect-ratio održava proporcije elementa (širina naspram visine) u zadatom odnosu. Primer:

      div {
        aspect-ratio: 16 / 9;
      }

49. Kako možemo kontrolisati protok teksta unutar elementa?
Koriste se svojstva kao što su:

white-space: kontroliše kako se upravlja razmacima i linijama unutar elementa (npr. nowrap za onemogućavanje prelamanja teksta).
overflow: određuje šta se dešava sa sadržajem koji izlazi izvan granica elementa (npr. hidden, scroll, auto).
text-overflow: koristi se zajedno sa overflow i white-space svojstvima za kontrolu kako se prikazuje višak teksta, npr. sa ellipsis dodaje tri tačke kada tekst prelazi granicu elementa. Primer:

     p {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

Ova svojstva omogućavaju kontrolu prikaza i formatiranja teksta, posebno u slučajevima kada je prostor za tekst ograničen.

50. Kako stilizovati listu tako da nema tačke ili brojeve?
Koristi se svojstvo list-style-type: none;. Primer:

      ul {
        list-style-type: none;
      }

Ovo su najčešća i najbitnija pitanja sa odgovorima za HTML i CSS intervjue. Ova pitanja pokrivaju širok spektar osnovnih i naprednih tema, koje su ključne za web development.

Bonus pitanja

Evo 10 pitanja za HTML i CSS koja mogu biti neočekivana ili te mogu zbuniti na intervjuu, zajedno sa objašnjenjima:

1. Kako funkcioniše data-* atribut u HTML-u i za šta se koristi?

data-* atributi se koriste za čuvanje prilagođenih podataka u HTML elementima koje JavaScript može da koristi. Na primer:

     <div data-user-id="123"></div>

Možeš pristupiti ovim podacima pomoću JavaScript-a:

     var userId = document.querySelector('div').dataset.userId;

2. Šta se dešava ako u CSS-u primeniš width: 100% na element koji već ima padding i border?
Podrazumevano, width: 100% će postaviti širinu elementa na 100% njegove roditeljske širine, ali će padding i border dodatno proširiti ukupnu širinu. Da bi to izbegao, koristi box-sizing: border-box, što uključuje padding i border u izračunavanje širine.

3. Koja je razlika između link i @import za dodavanje CSS-a u HTML?

link element se koristi u <head> sekciji za uključivanje CSS-a, dok se @import koristi unutar CSS fajlova za učitavanje drugih CSS fajlova.
Razlike:

link je brži jer se CSS učitava paralelno.
@import odlaže učitavanje CSS-a, što može usporiti renderovanje stranice.
link je bolje podržan i ima veći prioritet.

4. Kako možeš stilizovati placeholder tekst u HTML input elementima?
Koristi pseudo-klasu ::placeholder da bi stilizovao tekst unutar input polja. Na primer:

     input::placeholder {
       color: grey;
       font-style: italic;
     }

5. Šta se dešava kada postaviš position: absolute na element bez pozicioniranog roditelja?
Ako roditeljski element nema zadatu poziciju (relative, absolute, fixed ili sticky), apsolutno pozicionirani element će se pozicionirati relativno prema prozoru pretraživača, a ne prema roditelju.

6. Kako kreirati trougao koristeći samo CSS?
Trougao se kreira pomoću border svojstava. Na primer:

     .triangle {
       width: 0;
       height: 0;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       border-bottom: 100px solid red;
     }

Ovaj kod kreira crveni trougao.

7. Kako funkcionišu CSS rem i em jedinice i koja je razlika između njih?
rem je relativna jedinica u odnosu na font-size root elementa (obično <html>), dok je em relativan u odnosu na font-size roditeljskog elementa.

Na primer, ako je html { font-size: 16px; }:

1rem je uvek 16px.
1em zavisi od veličine fonta roditelja.

8. Kako radi zlatni rez (Golden Ratio) u web dizajnu i kako ga koristiš u CSS-u?
Zlatni rez je odnos od otprilike 1.618:1 i često se koristi za raspored elemenata na stranici kako bi dizajn bio vizuelno prijatan. Može se koristiti za određivanje proporcija elemenata, npr. širine i visine sekcija:

     .box {
       width: 61.8%;
       height: 100%;
     }

9. Šta se dešava kada HTML dokument nema deklaraciju <!DOCTYPE html>?
Bez <!DOCTYPE html>, pretraživač može prikazivati stranicu u "quirks mode", što uzrokuje ponašanje neusklađeno sa standardima, potencijalno menjajući renderovanje elemenata, veličine margina, itd.

10. Kako možeš učiniti da tekst bude selektibilan ili neselektibilan pomoću CSS-a?
Koristi CSS svojstvo user-select. Na primer, da onemogućiš selektovanje teksta:

      p {
        user-select: none;
      }

Možeš omogućiti selektovanje sa user-select: text;.

Zaključak:

Intervju za poziciju front-end developera može biti izazovan, ali uz pravu pripremu možete se lako izboriti sa svim pitanjima. Osim što je važno savladati osnovne koncepte HTML-a i CSS-a, od koristi vam može biti i priprema za pitanja koja idu korak dalje i zahtevaju dublje razumevanje tehnologija. Neočekivana pitanja koja vas zbunjuju pružaju priliku da se izdvojite od konkurencije i pokažete svoju sposobnost za rešavanje problema na kreativne načine.

Da li je uvek potrebno definisati `props` i `state` u konstruktoru kod klasnih komponenti u TypeScript-u?

Jelena Petkovic — Tue, 17 Sep 2024 11:07:24 +0000

Kada radimo sa klasnim komponentama u React-u koristeći TypeScript, često se postavlja pitanje da li je potrebno i obavezno definisati props i state unutar konstruktora. Odgovor na ovo pitanje zavisi od specifičnih potreba tvoje komponente. U ovom blog postu, razmotrićemo kada i zašto koristiti konstruktor za definisanje props i state, kao i prednosti i nedostatke različitih pristupa.

Korišćenje konstruktora

Kada koristiti konstruktor:

1. Inicijalizacija stanja (state) na osnovu props:

Ako state zavisi od props ili ako treba da izvršiš dodatnu logiku prilikom inicijalizacije stanja, konstruktor je najbolji izbor.

2. Postavljanje početnih vrednosti stanja:

Kada želiš da postaviš početno stanje komponente, konstruktor je tradicionalan način za to.

Primer:

interface IMyComponentProps {
  initialCount: number;
}

interface IMyComponentState {
  count: number;
}

class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
  constructor(props: IMyComponentProps) {
    super(props);
    this.state = {
      count: props.initialCount,
    };
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

Kada ne koristiti konstruktor

1. Jednostavna inicijalizacija stanja:

Ako state nije složen i ne zavisi od props, možeš koristiti direktnu inicijalizaciju stanja bez konstruktora.

2. Nema potrebe za složenom logikom:

Ako ne treba da izvršiš dodatnu logiku u vezi sa props ili state, možeš postaviti state direktno na nivou klase.

Primer:

interface IMyComponentProps {
  message: string;
}

interface IMyComponentState {
  count: number;
}

class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> {
  state: IMyComponentState = {
    count: 0,
  };

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

Prednosti i nedostaci različitih pristupa

Korišćenje konstruktora:

Prednosti:

Složenija inicijalizacija: Omogućava postavljanje state na osnovu props i izvršenje dodatne logike pre nego što komponenta renderuje.
Kontrola: Omogućava preciznu kontrolu nad inicijalizacijom i možeš lako dodati ili izmeniti logiku inicijalizacije.

Nedostaci:

Više koda: Korišćenje konstruktora može dodati više koda, što može učiniti komponentu težom za čitanje, naručito ako je inicijalizacija jednostavna.
Više složenosti: Uvođenje dodatne složenosti ako jednostavna inicijalizacija može biti obavljena bez konstruktora.

Direktna inicijalizacija (`state`) van konstruktora:

Prednosti:

Jednostavnost: Manje koda i jasniji kod za jednostavne komponente.
Bolja čitljivost: Komponente su često čitljivije kada se koristi direktna inicijalizacija za state.

Nedostaci:

Ograničena fleksibilnost: Ne možeš lako inicijalizovati state na osnovu props ili dodati složenu logiku prilikom inicijalizacije.

Zaključak

Koristi konstruktor ako treba da inicijalizuješ state na osnovu props ili ako imaš složenu logiku koja treba da se izvrši pre renderovanja komponente.
Izbegni konstruktor ako tvoja inicijalizacija state može biti jednostavno postavljena direktno na nivou klase i ne zahteva dodatnu logiku.

Oba pristupa su ispravna i zavise od složenosti tvoje komponente i specifičnih potreba. U savremenom React kodiranju, mnogi developeri preferiraju jednostavniji pristup direktne inicijalizacije ako to zadovoljava njihove potrebe.

Funkcionalne i Klasne Komponente u React-u sa TypeScript-om

Jelena Petkovic — Tue, 17 Sep 2024 10:36:47 +0000

U React-u sa TypeScript-om možemo koristiti dva glavna pristupa za kreiranje komponenti: funkcionalne i klasne komponente. Oba pristupa omogućuju rad sa props i state, ali koriste nešto drugačije paradigme. TypeScript dodatno pojačava razvojnu sigurnost pružanjem statičkog tipiziranja, što nam omogućuje da precizno definišemo oblik props i state.

U nastavku ćemo pogledati primere različitih komponenti, koristeći interface za definisanje tipova, kako bismo osigurali doslednost i čitljivost koda.

F-1. Funkcionalna komponenta bez `props` i `state`

U ovom slučaju, jednostavna funkcionalna komponenta koja ne koristi ni props ni state izgleda ovako:

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return <div>Hello, DEV.to!</div>;
};

Ova komponenta samo prikazuje statički tekst.

F-2. Funkcionalna komponenta sa `props`

Kada želimo da prosledimo podatke kroz props, koristimo interface kako bismo definisali oblik tih podataka:

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC<IMyProps> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

Ovde IMyProps sadrži name koji se koristi za prikaz personalizovanog pozdrava.

F-3. Funkcionalna komponenta sa `state`

Kada koristimo state u funkcionalnim komponentama, koristimo React-ov useState hook:

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

Ova komponenta koristi lokalni state za praćenje brojača.

F-4. Funkcionalna komponenta sa `props` i `state`

Kombinovanjem props i state možemo imati fleksibilne komponente koje primaju podatke kroz props, a manipulišu stanjem interno:

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC<IMyProps> = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

Ova komponenta koristi initialCount kao prop, a interni state za dinamičko praćenje brojača.

K-1. Klasna komponenta bez `props` i `state`

Klasna komponenta bez props i state u React-u izgleda ovako:

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return <div>Hello, DEV.to!</div>;
  }
}

Ovo je jednostavna klasna komponenta koja prikazuje statički tekst.

K-2. Klasna komponenta sa `props`

Kada klasna komponenta prima props, definišemo ih pomoću interface:

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component<IMyProps> {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

Kao i kod funkcionalne komponente, ovde koristimo props za prikaz personalizovanih podataka.

K-3. Klasna komponenta sa `state`

Kod klasnih komponenti sa state, definišemo stanje unutar konstruktora:

Prazne zagrade u konstruktoru

Ako ne koristite props, možete jednostavno ostaviti prazne zagrade u konstruktoru:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component<{}, IMyState> {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increase</button>
      </div>
    );
  }
}

Eksplicitno navesti {} kao tip za props

Ako želite biti eksplicitni u vezi sa props, možete navesti {} kao tip:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component<{}, IMyState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increase</button>
      </div>
    );
  }
}

-> U oba slučaja, TypeScript i React će ispravno funkcionisati. Ako vaša komponenta ne koristi props, jednostavno možete koristiti prazne zagrade u konstruktoru, ali obavezno prosledite {} u super pozivu kako biste izbegli greške u inicijalizaciji.

Ova komponenta koristi state kako bi pratila promene brojača.

K-4. Klasna komponenta sa `props` i `state`

Za klasne komponente koje koriste i props i state, možemo kombinovati oba koncepta:

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component<IMyProps, IMyState> {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increase</button>
      </div>
    );
  }
}

Ova komponenta prima početni brojač kroz props, a dalje manipuliše stanjem interno.

Korišćenje interface u TypeScript-u donosi bolje tipiziranje i lakšu čitljivost koda, pogotovo kada radimo sa složenijim strukturama podataka. Sa ovim osnovnim primerima, imate osnovu za pisanje funkcionalnih i klasnih komponenti sa React-om i TypeScript-om.

Kada koristiti type, a kada interface u TypeScript-u?

Jelena Petkovic — Mon, 16 Sep 2024 20:33:53 +0000

U TypeScript-u, i type i interface omogućavaju definisanje struktura podataka, ali postoje suptilne razlike između njih. U zavisnosti od zahteva aplikacije, jedan od njih može biti bolji izbor. U ovom blogu, istražićemo ključne razlike i dati smernice o tome kada koristiti type, a kada interface.

1. Proširivanje (Extending)

interface podržava nativno proširivanje. Možeš koristiti ključnu reč extends kako bi kreirao nove interfejse na osnovu postojećih.

   interface IAnimal {
     name: string;
   }

   interface IDog extends IAnimal {
     breed: string;
   }

type takođe podržava proširivanje, ali koristi drugačiji sintaksu (kombinovanje & operatorom).

   type Animal = {
     name: string;
   };

   type Dog = Animal & {
     breed: string;
   };

Kada koristiti?

Ako planiraš da kreiraš složenije strukture koje ćeš često proširivati, interface je prirodniji izbor. Za jednostavno kombinovanje nekoliko tipova, type može biti efikasniji.

2. Deklaracija sa istim imenom

interface dozvoljava višestruke deklaracije sa istim imenom, a TypeScript će ih automatski spajati.

   interface IUser {
     name: string;
   }

   interface IUser {
     age: number;
   }

   const user: IUser = {
     name: "Jelena",
     age: 25,
   };

Ove dve deklaracije se kombinuju u jedan interfejs sa oba polja (name i age).

type ne dozvoljava višestruke deklaracije istog imena. Svaki pokušaj deklarisanja istog tipa više puta prikazuje grešku.

   type User = {
     name: string;
   };

   type User = {
     age: number;  // Greška - Duplicate identifier 'User'
   };

Kada koristiti?

Ako želiš da možeš kasnije proširiti definiciju nekog tipa u različitim fajlovima, interface ti daje tu fleksibilnost.

3. Unije i tipovi koji nisu objekti

type podržava definisanje kompleksnijih tipova, poput unija (unions), primitivnih tipova (npr. string, number), tuple-ova itd.

   type Status = "success" | "error" | "loading";

interface se uglavnom koristi za definisanje objekata i nije pogodan za definisanje unija ili primitivnih tipova.

Kada koristiti?

Ako treba da definišeš unije, tuple-ove ili kombinacije primitivnih tipova, koristi type. Za rad sa objektima ili složenim strukturama podataka, koristi interface.

4. Reakcija zajednice

interface je dugo bio preporučivani pristup u TypeScript zajednici, posebno za tipiziranje objekata i klasa, jer je semantički jasnije da se radi o objektu. Takođe, React zajednica često preferira interface za definisanje props i state.
type je fleksibilniji i često se koristi kada je potrebno tipizirati unije, funkcije, ili kada treba kombinovati više tipova sa operatorom & (intersekcije).

Kada koristiti?

interface je bolji izbor za konzistentnost i eksplicitnost pri radu sa objektima i složenim strukturama. type je odličan kada ti treba fleksibilnost za definiranje tipova koji nisu objekti.

Ukratko: `interface` vs. `type`

Osobina	`interface`	`type`
Proširivanje (`extends`)	Da	Da (`&` operator)
Merging (spajanje definicija)	Da	Ne
Definisanje unija i primitivnih tipova	Ne	Da
Koristi se za	Objekte i klase	Unije, primitive, funkcije
Fleksibilnost	Više za strukture objekata	Više za fleksibilne tipove
Reakcija zajednice	Preporučen za React `props` i `state`	Fleksibilniji za kompleksne tipove

Kada koristiti `type`?

Kada treba da definišeš unije tipova (npr. "success" | "error" | "loading").
Kada treba da kreiraš tuple ili kombinaciju primitivnih tipova.
Kada koristiš funkcije i želiš da tipizuješ kompleksne povratne vrednosti.

Kada koristiti `interface`?

Kada definišeš objekte, posebno kada očekuješ da ćeš ih proširivati.
Kada radiš sa React props i state (zbog čitanosti i konvencije).
Kada ti je potrebno spajanje (merging) definicija sa istim imenom u različitim fajlovima.

Zaključak

type i interface imaju svoja mesta u TypeScript-u, i oba alata nude fleksibilnost u različitim situacijama. Ako radiš sa strukturama objekata i očekuješ njihovo proširivanje, interface je prirodniji izbor. Za fleksibilnije tipove, unije, i tuple-ove, type je bolji alat. Razumevanje ovih razlika pomaže ti da praviš čiste i održive TypeScript aplikacije.

Kako se Pripremiti za Intervju za React Developera?

Jelena Petkovic — Sun, 15 Sep 2024 12:43:45 +0000

Ako se pripremaš za intervju za poziciju React developera, potrebno je da pokažeš širok spektar znanja – od osnovnih koncepata JavaScript-a do naprednih tema vezanih za performanse i testiranje. U ovom postu proći ćemo kroz ključne oblasti na koje bi trebalo da se fokusiraš kako bi bio/la spreman/a za intervju.

1. Osnove JavaScript-a

Iako će fokus intervjua biti na React-u, često će razgovor početi pitanjima o JavaScript-u, jer React ne može da funkcioniše bez solidnog poznavanja jezika. Pokazivanje da razumeš moderne JavaScript funkcionalnosti je ključno.

Ključne teme:

ES6+ sintaksa: Poznavanje modernih funkcionalnosti poput arrow funkcija, destrukturiranja objekata i nizova, let, const, i template stringova.
Asinhrono programiranje: Znanje o Promises, async/await, i asinhronom rukovanju operacijama.
Closures, scope, hoisting: Ključni koncepti za razumevanje kako funkcionišu promenljive i funkcije u JavaScript-u.
Array metode: Korišćenje metoda poput map(), filter(), reduce(), jer su veoma korisni u React-u.

Primer pitanja:

Koja je razlika između let, const, i var?
Kako funkcioniše async/await i kada bi koristio/la Promise.all()?

2. Osnove React-a

Da bi uspešno prošao/la tehnički intervju, moraš savladati osnove izgradnje aplikacija u React-u. Očekuj pitanja koja pokrivaju osnovne React koncepte, kao što su komponente, stanje i događaji.

Ključne teme:

Komponente: Razlika između funkcionalnih i klasnih komponenti. Iako su funkcionalne komponente sa hooks-ovima sada standard, važno je razumeti oba pristupa.
JSX: Sintaksa koju React koristi i kako ona funkcioniše ispod haube.
Props i state: Razumevanje kako React koristi props i state za upravljanje podacima.
Event handling: Rukovanje događajima u React-u i razumevanje sintetičkih događaja.

Primer pitanja:

Koja je razlika između props i state u React-u?
Kako funkcioniše useState hook i kako bi koristio/la useEffect za pozivanje API-ja prilikom mountovanja komponente?

3. Napredne React Teme

Za srednje i seniorske pozicije, očekuje se da poznaješ napredne koncepte kao što su upravljanje složenim stanjem i optimizacija performansi.

Ključne teme:

React Router: Dinamičko rutiranje i optimizacija sa lazy loading-om.
State management: Znanje o alatima poput Redux-a ili Context API-ja.
Hooks: Osim osnovnih hook-ova (useState, useEffect), očekuje se da poznaješ i custom hooks, useReducer, useContext.
Memoizacija: Korišćenje React.memo, useMemo i useCallback za optimizaciju.
Error boundaries: Kako implementirati "granice grešaka" da bi se aplikacija nosila sa izuzecima.

Primer pitanja:

Kada bi koristio/la useMemo i useCallback? Kako oni poboljšavaju performanse?
Kako bi koristio/la useContext za deljenje podataka između komponenti bez prosleđivanja props-a?

4. Performanse u React-u

Optimizacija performansi je ključna za aplikacije koje rade brzo i efikasno. Očekuj pitanja o tome kako smanjiti nepotrebne render-e i ubrzati aplikaciju.

Ključne teme:

Lazy loading komponente: Učitavanje komponenata samo kada su potrebne.
Code splitting: Razbijanje aplikacije u manje delove radi bržeg učitavanja.
Debouncing i throttling: Optimizacija događaja poput onih prilikom kucanja u input polje.
Virtual DOM: Razumevanje kako React koristi virtuelni DOM za efikasno renderovanje.

Primer pitanja:

Kako optimizuješ učitavanje velikih komponenti?
Objani kako funkcioniše virtuelni DOM i zašto je važan za performanse.

5. Stilizacija u React-u

Stilizacija je važan deo izgradnje UI-a, pa je neophodno da znaš kako se stilizuju React komponente, bilo da koristiš klasičan CSS ili modernije metode.

Ključne teme:

CSS-in-JS biblioteke: Alati poput styled-components ili emotion za stilizovanje komponenti.
CSS Modules: Lokalizacija stilova kako bi se izbegli konflikti u imenovanju klasa.
Responsive design: Korišćenje media queries za prilagođavanje različitim uređajima.
UI Frameworks: Poznavanje alata poput Bootstrap-a za brži razvoj responzivnih interfejsa.

Primer pitanja:

Kako bi stilizovao/la komponentu koristeći styled-components?
Kako implementirati prilagodljiv (responsive) dizajn u React aplikaciji?

6. Testiranje React aplikacija

Testiranje je ključno za održavanje stabilnosti i pouzdanosti aplikacija. Znanje o testiranju komponenti i interakcija korisnika je neophodno.

Ključne teme:

Jest i React Testing Library: Testiranje funkcionalnosti komponenti i korisničkih interakcija.
Snapshot testiranje: Testiranje UI promena.
Unit i integration testovi: Pisanje testova za manje delove i veće integracije u aplikaciji.

Primer pitanja:

Kako bi napisao/la test za komponentu koja koristi useEffect?
Kada bi koristio/la snapshot testiranje?

7. API i Asinhrono Programiranje

React aplikacije često komuniciraju sa serverom, pa ćeš morati da znaš kako obaviti asinhrone operacije i upravljati stanjima učitavanja i grešaka.

Ključne teme:

Fetch API ili Axios: Alati za pozivanje REST API-ja.
GraphQL: Plus ako znaš kako funkcioniše GraphQL.
Error handling: Rukovanje greškama i loading stanjima dok se podaci učitavaju.

Primer pitanja:

Kako koristiš useEffect za pozivanje API-ja i kako rukuješ greškama?
Koje su prednosti korišćenja Axios-a u odnosu na Fetch API?

8. Build Alati i Projekti

Razumevanje alata koji pomažu pri izgradnji i buildovanju aplikacija pokazuje tvoju tehničku stručnost.

Ključne teme:

Webpack i Babel: Konfiguracija build procesa.
npm i yarn: Upravljanje paketima i skriptama za build i testiranje.
CI/CD: Znanje o kontinualnoj integraciji i deployment-u može biti korisno za naprednije pozicije.

Primer pitanja:

Kako bi konfigurisao/la Webpack za React aplikaciju?
Kako koristiš npm ili yarn skripte za upravljanje projektom?

9. Git i Timski Rad

Poznavanje Git-a je neophodno za timski rad i upravljanje verzijama. Očekuj pitanja o branch-ovanju, pravljenju pull request-ova, i rešavanju konflikata.

Primer pitanja:

Kako bi rešio/la konflikt u Git-u?
Objasni proces pravljenja pull request-a.

Zaključak

Priprema za intervju za React developera zahteva razumevanje osnovnih i naprednih tehnologija. Fokusiraj se na osnovne JavaScript koncepte, React-ove hooks-ove, optimizaciju performansi i testiranje, ali ne zaboravi i na build alatke, stilizaciju, i Git kako bi pokazao/la sveobuhvatno znanje i spremnost za rad u timu.

Razumevanje Renderovanja i Rerenderovanja u React Aplikacijama: Kako funkcionišu i kako ih optimizovati

Jelena Petkovic — Sat, 14 Sep 2024 10:31:46 +0000

Kada kreiramo aplikacije u React-u, često se suočavamo sa pojmovima renderovanje (rendering) i rerenderovanje (re-rendering) komponenata. Iako ovo na prvi pogled može delovati jednostavno, stvari postaju zanimljive kada se upetljaju različiti state menadžment sistemi poput useState, Redux, ili kada ubacimo lifecycle hook-ove poput useEffect. Ako želite da vaša aplikacija bude brza i efikasna, razumevanje ovih procesa je ključno.

Šta je Renderovanje?

Renderovanje je proces u kojem React prikazuje vaš korisnički interfejs (UI) na ekranu, bazirano na stanju (state-u) ili prosleđenim vrednostima (props). Kada se vaša komponenta prvi put prikazuje, to se zove prvo renderovanje.

Kako Funkcioniše Prvo Renderovanje (Initial Render)?

Kada se komponenta prvi put "montira" na DOM, evo šta se događa:

1. Inicijalizacija state-a:
Bilo da koristite useState, props ili Redux, inicijalni state komponente se kreira.

2. Render funkcija:
React prolazi kroz JSX kod i generiše virtuelni DOM baziran na trenutnom stanju.

3. Kreira virtuelni DOM (Virtual DOM) za trenutno stanje komponente.

4. Upoređivanje (diffing):
Virtuelni DOM se upoređuje sa pravim DOM-om (pošto je prvi render, svi elementi će biti potpuno prikazani).

5. Prikazivanje:
Komponenta se prikazuje na ekranu.
Jednom kada je komponenta prikazana, sledeći izazov je rerenderovanje.

Rerenderovanje (Re-render): Kada i Zašto?

Rerenderovanje se dešava svaki put kada se stanje ili props promene. Da li ste kliknuli na dugme koje menja broj na ekranu? Promenili ste vrednost u Redux store-u? Sve te akcije mogu dovesti do toga da React ponovo prikaže komponentu, i tu dolazi do rerenderovanja.

Kako Funkcioniše Rerenderovanje?

Detekcija promene state-a:

Kod useState, kada pozovete setState, React zna da treba da ažurira komponentu.
Kod Redux-a, kada se promeni vrednost u store, svaka komponenta povezana sa tim delom stanja se ponovo renderuje.

Trigger renderovanja:

Kada se stanje promeni, React kreira novi virtuelni DOM baziran na toj promeni.

Upoređivanje (diffing):

React upoređuje novi virtuelni DOM sa starim i izračunava koje promene treba primeniti. Ovo je jedan od načina na koji React optimizuje renderovanje.

Prikaz promena:

Nakon što su promene izračunate, React ih primenjuje na stvarni DOM. Tako se samo promenjeni delovi stranice ponovo prikazuju.

Koje Komponente Se Rerenderuju?

Nisu sve komponente pogođene svakom promenom. React rerenderuje samo one komponente koje:

Korisite lokalni state:
Ako koristite useState, komponenta se rerenderuje svaki put kada se pozove setState.

Koriste Redux state:
Ako vaša komponenta zavisi od Redux stanja (preko useSelector ili connect), biće ponovo renderovana kada se taj deo stanja promeni.

Koriste props:
Ako se props vrednost promeni, komponenta se ponovo renderuje sa novim vrednostima.

Optimizacija Rerenderovanja

Naravno, nije uvek idealno da se sve komponente bespotrebno ponovo renderuju. Ako želimo da aplikacija radi brzo i efikasno, evo nekoliko tehnika za optimizaciju:

1. Memoizacija Komponenti
React nudi funkcionalnost za memoizaciju komponenata preko React.memo. Ako vaša komponenta ne zavisi od promena props ili state-a, možete je "zapamtiti", pa će se ponovo renderovati samo kada se relevantne vrednosti promene.

Primer:

const MemoizedComponent = React.memo(MyComponent);

2. Memoizacija Funkcija i Vrednosti

Da biste izbegli ponovno kreiranje funkcija ili vrednosti pri svakom renderu, koristite useCallback za memoizaciju funkcija i useMemo za memoizaciju vrednosti.

useCallback vam omogućava da memoizujete funkciju i sprečite njeno ponovno kreiranje sve dok se zavisnosti ne promene.
useMemo memoizuje rezultat funkcije, tako da se ne računa ponovo na svakom renderu.

Primer:

const increment = useCallback(() => {
  setCount(prevCount => prevCount + 1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. Redux Optimizacija

Ako koristite Redux, možete dodatno optimizovati aplikaciju pomoću memoizovanih selektora kao što je reselect. To omogućava da se izbegne ponovno renderovanje komponenata koje nisu pogođene promenom stanja.

Lifecycle Hook-ovi i Rerenderovanje

U klasičnim React klasama, koristili smo shouldComponentUpdate da kontrolišemo kada će se komponenta ponovo renderovati. U funkcionalnim komponentama, ovaj koncept se može simulirati pomoću useEffect i memoizacije.

Zaključak

Renderovanje i rerenderovanje su ključni za prikaz korisničkog interfejsa u React aplikacijama, ali pravilno razumevanje i optimizacija tih procesa može napraviti razliku između spore i super brze aplikacije. Ispravno korišćenje memoizacije, useCallback, useMemo, kao i pažljivo rukovanje Redux-om, pomaže da izbegnemo nepotrebne re-rendere i održimo naše aplikacije brzim i responzivnim.

Primer Koda: Renderovanje i Rerenderovanje u Akciji
Evo primera komponente koja koristi useState, Redux i memoizaciju da optimizuje renderovanje:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={() => dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      </button>
    </div>
  );
};

Kao što vidimo, ovde se koristi kombinacija lokalnog state-a, Redux-a, memoizacije i useEffect hook-a da bi aplikacija bila što efikasnija.

DEV Community: Jelena Petkovic

Sve što treba da znate o `FormData` objektu u JavaScript-u

Šta je FormData?

Kako kreirati FormData objekat?

Kreiranje praznog FormData objekta

Kreiranje FormData objekta iz forme

Dodavanje podataka

Čitanje podataka

Slanje FormData podataka na server

Prednosti FormData

Primer iz prakse: Registraciona forma

HTML Forma

JavaScript Kod

Korisni saveti

Zaključak

Kako rešiti probleme sa specifičnim stilovima za različite pretraživače

1. Identifikuj problematični pretraživač

2. Koristiti zasebne stilove za specifične pretraživače (kondicionalni stilovi)

3. Koristiti CSS framework-e kao što je Bootstrap

4. Koristiti Autoprefixer

5. Koristi Reset CSS ili Normalize.css

6. PostCSS i plugin-ovi za kompatibilnost

Zaključak

Progresivno renderovanje: poboljšanje performansi prikaza sadržaja

Prednosti progresivnog renderovanja

Tehnike za progresivno renderovanje

1. Lenjo učitavanje slika (Lazy loading)

2. Prioritet za vidljiv sadržaj (Rendering sadržaja iznad preklopa)

3. Asinhroni HTML fragmenti

4. Preload i prefetching resursa

5. Code splitting i dinamičko učitavanje JavaScript-a

6. CSS kritična putanja (Critical CSS)

7. Server-Side Rendering (SSR) i Static Site Generation (SSG)

8. Progressive Web Apps (PWA)

Zaključak

Razumevanje funkcija višeg reda (Higher-Order Functions) u JavaScript-u

Funkcionalno Programiranje

Prvoklasne Funkcije

Dodeljivanje Funkcija Promenljivama

Prosleđivanje Funkcija kao Parametara

Funkcije Višeg Reda

map Metod

filter Metod

reduce Metod

Kreiranje Funkcije Višeg Reda

Zaključak

Uvod u Modularizaciju u React-u: AMD i CommonJS modularizacija

Zašto je modularizacija ključna za React aplikacije?

Struktura modula u React-u

AMD i CommonJS modularizacija u JavaScript-u

CommonJS

AMD (Asynchronous Module Definition)

Koje su glavne razlike između CommonJS i AMD modularizacije?

AMD i CommonJS u React-u

Zaključak

Sveobuhvatan Vodič za Čuvanje Podataka u JavaScript-u

1. Cookies

Kako funkcionišu Cookies?

Gde se koristi Cookies?

Prednosti Cookies-a

Mane Cookies-a

Primer korišćenja Cookies-a

2. Local Storage

Kako funkcioniše Local Storage?

Gde se koristi Local Storage?

Prednosti Local Storage-a

Mane Local Storage-a

Primer korišćenja Local Storage-a

3. Session Storage

Kako funkcioniše Session Storage?

Gde se koristi Session Storage?

Prednosti Session Storage-a

Mane Session Storage-a

Primer korišćenja Session Storage-a

4. IndexedDB

Kako funkcioniše IndexedDB?

Gde se koristi IndexedDB?

Osnovni koncepti i operacije u IndexedDB:

Prednosti IndexedDB?

Mane IndexedDB-a

Šta je `FormData`?

Kako kreirati `FormData` objekat?

Kreiranje praznog `FormData` objekta

Kreiranje `FormData` objekta iz forme

Slanje `FormData` podataka na server

Prednosti `FormData`

`map` Metod

`filter` Metod

`reduce` Metod

Direktna inicijalizacija (`state`) van konstruktora:

F-1. Funkcionalna komponenta bez `props` i `state`

F-2. Funkcionalna komponenta sa `props`

F-3. Funkcionalna komponenta sa `state`

F-4. Funkcionalna komponenta sa `props` i `state`

K-1. Klasna komponenta bez `props` i `state`

K-2. Klasna komponenta sa `props`

K-3. Klasna komponenta sa `state`

K-4. Klasna komponenta sa `props` i `state`

Ukratko: `interface` vs. `type`

Kada koristiti `type`?

Kada koristiti `interface`?