webdevlpr

Petlja dogadjaja ili event loop

2023-04-02T17:00:00Z

JavaScript se izvrsava u jednoj niti (single-threaded) 🧵, sto znaci da sve operacije koje obavlja JavaScript jesu sinhrone i blokirajuce. Petlja dogadjaja (event loop) je razlog zasto JavaScript djeluje kao asinhroni neblokirajuci jezik. Sve ovo odrzava nekoliko pametnih struktura podataka iza sebe, ali hajde da se vratimo na pocetak.

Sinhrono vs asinhrono izvrsavanje

JavaScript je po svojoj prirodi sinhroni programski jezik, sto znaci da se operacije izvrsavaju jedna za drugom u nizu, na nacin da se jedna operacija mora zavrsiti prije nego se predje na sledecu.

To moze biti problem kada se radi o operacijama koje traze vise vremena, kao sto su zahtijevanje podataka preko mreze, citanje/zapisivanje velikih fajlova itd. U takvim slucajevima, korisnicki interfejs je blokiran dok se operacija ne zavrsi, sto vodi ka losem korisnickom iskustvu i 😠. Mozemo zaboraviti na interaktivnost sa stranicom dok se ova velika operacija ne zavrsi.

Ali asinhrono izvrsavanje instrukcija je jedan od znacajnih razloga zasto je
JavaScript tu gdje jeste. Drugim rijecima, umjesto da cekamo da jedna operacija zavrsi prije nego pocne druga, instrukcije se mogu nastaviti izvrsavati paralelno.

Ovo je moguce jer okruzenje poput Node.js i pretrazivaca imaju event loop. Event loop zahtjevnije/sporije operacije moze predati pretrazivacu. Kada pretrazivac obradi operaciju, rezultat vraca u glavnu skriptu (npr. u obliku Promise objekta) u red zadataka i ceka da JavaScript engine postane slobodan kako bi izvrsio ostatak koda.

V8

V8 engin je odgovoran za brzo izvrsavanje JavaScript koda. Napisan je u C++ sto utice na dobar performas. V8 kompajlira kod u masinski i izvrsava u procesoru racunara. Izmedju ostalog ga koriste Chrome, Opera, Microsoft Ege, Brave (Chromium pretrazivaci) i Node.js.

Call stack

Pozivni stek (call stack) je Last In First out (LIFO) struktura podataka koja prati pozive funkcija u programu. Kada se funkcija pozove, dodaje se na vrh pozivnog steka i sklanja tek kada se izvrsi. Ovo omogucava V8 enginu da prati red izvrsavanja programa.

Ako razmislite o tome, ovu strukturu vjerovatno koristite kada jedete palacinke, osim ako je smjelo od mene da pretpostavim da cekate da sve budu gotove prije nego ih pojedete.

Okej je ako objasnjenje iznad nije dovoljno da potpuno procesuirate call stack i LIFO strukturu podataka, ali kod i praktican primjer govore hiljadu rijeci (i debagovanje isto 😶). Zato je sledece pitanje sta je rezultat koda ispod i kako se on izvrsava?

function weAreAtTheTop() {
  console.log('weAreAtTheTop is executed');
}

function forward() {
  weAreAtTheTop();
  console.log('forward is executed');
}

let move = function() {
  forward();
  console.log('move is executed');
};

move();

console.log('next instruction');

Rezultat u konzoli je:

weAreAtTheTop is executed
forward is executed
move is executed
next instruction

Evo kratke vizualizacije izvrsavanja koda i prikaza u pozivnom steku (Last In First Out struktura podataka). Prvo se poziva move() funkcija na liniji 15.

Kod vizualiziramo uz pomoc alata koji se moze pronaci ovdje

Ovako to radimo jer single-threaded znaci da imamo jedan call stack na kom se obradjuje jedna naredba istovremeno: sinhrono izvrsavanje.

Evo primjera kako to moze uticati na korisnicko iskustvo: zamislite da kliknete na dugme koje otvara pop-up prozor, ali V8 engine je vec zauzet izvrsavanjem neke druge CPU gladne naredbe. U tom slucaju, na ekranu se nista nece dogoditi, cak ni ako ponovo kliknete na dugme. Ukoliko postoji animirani GIF na stranici, on je zaustavljen i djeluje kao staticna slika. Kada se V8 engine oslobodi i obradi klikove, pretrazivac ce prikazati niz pop-up prozora i nastaviti s animacijom GIF-a.

Task queue i web API

Scenario iznad implicira da je pretrazivac bio svjestan klikova i da su oni negdje zabiljezeni iako nisu izvrseni istog trenutka. A to negdje je red zadataka (task queue) koji ima First In First Out (FIFO) strukturu podataka, kao onaj u prodavnici na kasi. Da bi ovi zadaci iz task queue dosli na red u pozivni stek, moraju sacekati da se instrukcije iz glavne skripte sinhrono izvrse i da call stack postane slobodan. Tada se mogu izvrsavati task / callback queue zadaci.

Kako uopste operacija dospije u task queue? Ovdje u sliku dolaze WebAPI-jevi.

Web API (Application Programming Interface) je skup alata i metoda koje su dostupne u pretrazivacu. Oni prosiruju mogucnosti JavaScript-a. JavaScript u sebi nema ugradjen pristup DOM-u (Document Object Model), niti mogucnost da slusa klik na dugme, salje mrezne zahtjeve ili odlozi dogadjaje uz setTimeout() metodu.

Ovo su karakteristike okruzenja u kom se JavaScript izvrsava. Kao takve ih obradjuje pretrazivac paralelno sa call stackom koji se bavi sinhronim operacijama koje JavaScript engine izvrsava sam bez pomoci petlje dogadjaja.

Call stack je inicijalno samo registrovao slusanje dogadjaja. Dogadjaj je asinhrona operacija koja nije ugradjena u JavaScript, vec u pretrazivac. Nakon registracije, pretrazivac ce slusati i cekati klik. Kada se klik dogodi, on ide u "red cekanja" koji sada poznajemo kao task queue. Event loop ga iz task queue prebacuje u call stack kada primjeti da je call stack slobodan. Tek tada se klik obradjuje.

Event loop

Koncept petlje dogadjaja je jednostavan. Postoji beskonacna petlja u kojoj JavaScript izvrsava zadatke od najstarijeg (First in First Out), ceka na nove i do tada spava. JavaScript engine vecinu vremena miruje.

Medju prvim zadacima je izvrsavanje eskterne skripte <script src="..."> koja obicno bude postavljena u html dokument i ona kreira GCE (Global Execution Context), pored toga mozda otprema klik i izvrsava hadnlere (funkcije koje "hendluju" odgovor na dogadjaj).

U JavaScript-u globalni kontekst izvrsavanja je defaultni kontekst izvrsavanja i kreira se kada JavaScript engine pocne pokretati nas kod. Kontekst izvrsavanja funkcije kreira se kad god se pozove funkcija i predstavlja lokalni opseg funkcije.

Takodje, treba znati da postoji dvije vrste zadataka: mikro i makro.

Makrozadaci

Makrozadaci su zadaci koji zahtijevaju vise vremena za izvrsenje i dodaju se na kraj reda. Primjeri makrozadataka ukljucuju setTimeout, setInterval, DOM manipulaciju i mrezne zahtjeve. Kada se makrozadatak doda u red, event loop provjerava postoje li drugi zadaci koji se trenutno izvrsavaju i stavlja makrotask u call stack ako JavaScript engine miruje.

Mikrozadaci

Mikrozadaci su zadaci koji zahtijevaju manje vremena za izvrsenje i izvrsavaju se odmah nakon sto se zadatak koji se trenutno izvrsava izvrsi. Mikrozadaci dolaze iskljucivo iz naseg koda. Obicno ih kreiraju Promise, sa .then/catch/finally/await hendlerima. Postoji i posebna funkcija queueMicrotask(func) koja dodaje callback funkciju u red za izvrsavanje mikrozadataka.

Red izvrsavanja

Odmah po izvrsavanju jednog makrozadatka, JavaScript engine izvrsava sve mikrozadatke u redu prije nego nastavi izvrsavati preostale makrozadatke. Evo primjera koda koji to ilustruje:

console.log('start');

// makrozadatak
setTimeout(() => {
  console.log('timeout');
}, 0);

// mikrozadatak
Promise.resolve().then(() => {
  console.log('promise');
  // drugi mikrozadatak
  Promise.resolve().then(() => console.log('nested promise'));
});

console.log('end');

// kozola: 
start
end
promise
nested promise
timeout

Gdje se tu uklapa renderovanje? Izmedju izvrsenja svih mikrozadataka i pokretanja novog makro zadatka.

Kada je JavaScript engine zauzet renderovanje nece biti izvrseno, bez obzira na to koliko ce zadatak uzeti vremena. Ako zadatak traje predugo, pretrazivac moze prestati reagovati i predloziti da potpuno "ubijete zadatak" zajedno sa stranicom.

Ukratko

Izvrsi najstariji makrozadatak iz reda
Izvrsi sve mikrozadatke, pocevsi od najstarijeg
Renderuj promjene ako ih ima
Ako nema zadataka, cekaj

Dodatni izvori

YT: Asynchronous JavaScript & EVENT LOOP from scratch 🔥 Namaste JavaScript | Akshay Saini
YT: What the heck is the event loop anyway? Philip Roberts | JSConf EU
YT: Web browser event loop, setTimeout, micro tasks, requestAnimationFrame.. od Jake Archibald
Post: Event loop: microtasks and macrotasks

ES6 Moduli

2022-11-28T17:00:00Z

Moduli olaksavaju odrzavanje koda jednostavnijim. Jedan modul je jedna skripta, odnosno fajl. Glavna ideja iza modula je da cuvamo relevantan kod u jednoj skripti, umjesto da sve bude zajedno. Kada je potrebno, te skripte mozemo importovati u druge skripte.

Osnovna primjena

U primjeru ispod cemo eksportovati klasu i dvije funkcije iz macka.js u glavnu skriptu gdje ce se one moci koristiti. Da bi to radilo potrebno je da:

Fajl koji se eksportuje koristi export \ default export
Fajl koji se importuje import (uz from sa apsolutnim ili relativnim putem)
HTML fajlu bude naznaceno da se radi o skripti koja koristi module sa atributom type='module' (ukoliko ne koristite alat poput webpack-a).

// macka.js
// export default ...
export default class Macka {
  constructor(ime, vrsta) {
    this.ime = ime;
    this.vrsta = vrsta;
  }
}

// export ...
export function prikaziIme(macka) {
  console.log(`Ja se zovem ${macka.ime}.`);
}

export function prikaziVrstu(macka) {
  console.log(`${macka.ime} pripada ${macka.vrsta} vrsti.`);
}

// ili
// export default Macka;
// export {prikaziIme as prikaziImeMacke, prikaziVrstu};
// Odvojeni import/export se moze navesti na vrhu ili dnu skripte

// main.js:
import Macka, {prikaziIme, prikaziVrstu as prikaziVrstuMacke} from '/macka.js';

let macka = new Macka('Lana', 'Munchkin');
prikaziVrstuMacke(macka); // Lana pripada Munchkin vrsti.
prikaziIme(macka); // Ja se zovem Lana.

<!-- index.html: -->
<script type="module" src="main.js"></script>
<!-- Da bi pruzili alternativu starijim pretrazivacima: -->
<script nomodule src="fallback.js"></scripts>

type="module" se ponasa kao defer atribut. Skripte sa tim atributom se preuzimaju paralelno sa ostalim izvorima i izvrsavaju nakon sto je HTML dokument rasclanjen. Glavna razlika izmedju defer i type="module" atributa je ta sto drugi atribut oznacava da se skripta tretira kao modul zbog cega su kljucne rijeci poput import i export dostupne. Da bi se ove skripte izvrsile odmah, dovoljno je dodati atribut async. On obicno ne radi inline, osim ako se radi o skripti tipa modul.

Import iz primjera iznad mozemo skratiti kako smo sve sto je naznaceno za eksportovanje importovali u glavni .js fajl. Zato koristimo zvjezdicu * u sledecem primjeru. Ona sve dodaje u jedan objekat. Mana je sto su nazivi zbunjujuci i nepregledni samo da bi linija importovanja bila kraca.

import * as macka from './macka.js';

let macor = new macka.default('Artur', 'Evropska kratkodlaka macka');
macka.prikaziIme(macor); // Ja se zovem Artur.

console.log(macka);

U konzoli cemo dobiti:

× Module
   default: (...)
   prikaziIme: (...)
   prikaziVrstu: (...)
   Symbol(Symbol.toStringTag): 'Module'
   ...

Sa druge strane webpack i slicni alati obicno optimizuju module kako bi ubrzali ucitiavanje tako sto uklone importe koji se ne koriste.

Podrazumijevani eksport

Moguce je eksportovati bilo koji dio koda skripte: varijablu, funkciju, niz, klasu itd. Medjutim u fajlu samo jedan moze biti naznacen sa default. On se importuje bez viticastih zagrada i njen naziv je nezavisan, tj. ne mora biti identican kao u fajlu iz kog se eksportuje.

// macka.js
export default class Macka {}

// main.js
import M from '/macka.js'; 
let macka = new M('Lana', 'Munchkin');

Kako default export ima nezavisno ime jer mozemo imati samo jedan takav po fajlu — mozemo ga izostaviti i recimo eksportovati kao anonimnu funkciju, niz, vrijednost bez kreiranje varijable itd.

Prema tome mozemo razlikovati dva eksporta:
defaultni eksport: export default {ime: 'Lana'} i
imenovani eksport: export class Macka {}.

Priznajem da se default export ipak moze napisati sa viticastim zagradama, ali postoji mali trik — potrebno je naznaciti as default.

// export.js
class Macka {}
export {Macka as default};

// import.js
import {default as Macka};

Dalje izvozenje

export {} from ... je sintaksa koja vise podsjeca na import kakav smo koristili iznad. Kada zelimo sa jednog fajla imati dostupne sve funkcionalnosti drugih modula za dalji izvoz koristimo zvjezdicu ili viticaste zagrade kao u primjeru ispod.

export {default, prikaziIme, prikaziVrstu} from './macka.js';

Dalje izvozenje sa zvjezdicom * ne ukljucuje default eksport i njega je potrebno navesti u zasebnoj liniji sa export {default} from "./fajl.js"

Ovakvo dalje izvozenje uskracuje trenutni fajl za pristup navedenim funkcijama, ono ih samo usmjerava dalje. Da bi modul koristili u fajlu koji ih dalje izvozi, potrebno je prvo importovati i potom eksportovati.

import Macka, {prikaziIme, prikaziVrstu} from './macka.js';
export {Macka as default, prikaziIme, prikaziVrstu};

Dalje izozenje se obicno koristi kada objavljujemo paket na npm-u (Node Package Manager). U licnom projektu ovo izaziva problem sa funkcijama poput "Go to defenition", "Go to implementation", "Go to reference" u VS Code editoru (bar u mom slucaju).

Dinamicno importovanje

Sa sintaksom o kojoj smo diskutovali do sada nije moguce importovati u nekom bloku koda, samo na najvisem nivou opsega. Da bi stavili import u okviru nekog bloka kao sto je uslovni, pomoci ce nam jos jedna opcija koju nismo pominjali: import('./fajl.js')

let nazivFajla = 'macka.js';

if (nazivFajla) {
  // dodjeljivanje vrijednosti destrukturisanjem
  let {default: Macka, prikaziIme} = await import(`./${nazivFajla}`);

  let macor = new Macka('Artur', 'Evropskoj');
  prikaziIme(macor); // Ja se zovem Artur.
}

import('./fajl.js') vraca promise, iz tog razloga ispred stoji kljucna rijec await. Iako je ona uglavnom dopustena unutar async funkcije, u modulima radi i na najvisem nivou opsega izvan nje.

Dinamicno importovanje radi i u obicnim skriptama te nije potrebno dodavati type="module".

Neke karakteristike modula

Moduli su uvijek u 'use strict' rezimu. To znaci da bi akcija poput dodjeljivanja vrijednosti nedeklarisanoj varijabli dala gresku. Takodje, u tom rezimu this na opsegu najviseg nivoa ima vrijednost undefined umjesto window.

<script type="module">
  ime = Vanja; // Uncaught ReferenceError: ime is not defined
  console.log(this) // undefined
</script>

Opseg na nivou modula

Opseg radi na nivou modula, odnosno svaki modul za sebe ima nezavisne varijable i funkcije najviseg nivoa koje nisu vidljive u opsegu drugog modula.
Recimo da imamo dvije skripte i u drugoj zelimo pozvati funkciju iz prve:

// funkcija.js:
let pozdravi = (ime) => console.log(`Dobrodosao, ${ime}!`);

// pozivanjeFunkcije.js:
pozdravi('Marko');

index.html:

<script src="funkcija.js"></script>
<script src="pozivanjeFunkcije.js"></script>

Rezultat koda je ispis Dobrodosao, Marko! u konzoli, ali sa modulima to ne bi bio slucaj. Ako script tagu gdje se nalazi funkcija dodamo type='module' atribut, rezultat je greska: pozdravi is not defined. Druga skripta ne vidi funkciju jer je "zarobljena" unutar opsega svog modula.

Umjesto toga, module mozemo ukljuciti sa par izmjena.

// funkcija.js:
let pozdravi = (ime) => console.log(`Dobrodosao, ${ime}!`);
export {pozdravi};

// pozivanjeFunkcije.js:
import {pozdravi} from './funkcija.js';
pozdravi('Marko');

I u index.html fajlu ostavimo samo pozivanjeFunkcije.js koja ce samostalno importovati funkciju od koje ovisi:

<script type="module" src="pozivanjeFunkcije.js"></script>

Klase

2022-11-17T17:00:00Z

U objektno-orijentisanom programiranju, klasa je prosiriv sablon programskog koda za kreiranje objekata. Uz kreiranje objekta, ona obezbjedjuje pocetne vrijednosti za stanja (clanske varijable) i implementacije ponasanja (clanske funkcije ili metode). Wikipedia

*JavaScript nema klase onako kako ih imaju neki drugi jezici. JavaScript ih imitira na osnovu prototipnog nasljedjivanja. Zato ohrabrujem razumijevanje prototipa i prototipnog nasljedjivanja prvo jer jer je klasa implementirana na ovom mehanizmu.

Klase su dodane sa uvodjenjem ECMAScript 6 (es6) kako bi, izmedju ostalog, JavaScript podrzavala objektno orjentisani stil programiranja i kako bi se izaslo u susret programerima sa pozadinom objektno orjentisanih jezika koji se baziraju na klasnom nasljedjivanju (poput: Java, C++, C#..).

Mozemo reci da je JavaScript skriptni programski jezik visestruke paradigme i podrzava objektno-orijentisani, imperativni i funkcionalni nacin programiranja. Paradigma se moze definisati kao pristup rjesavanju problema, a programska paradigma je nacin rjesavanja problema koristenjem programskog jezika.

Neki istaknuti clanovi JavaScript zajednice smatraju da je funkcionalni nacin programiranja ispravan i prirodan JavaScript-u, a da OOP i klasa kao "sintaticki secer" moze izazvati glavobolje. Jedan od argumenata je da funkcionalno programiranje osigurava jednostavniju kontrolu toka u kodu, lakse razumijevanje koda i izbjegava iznenadjenja u obliku promjena varijabli, stanja i pojavljivanja gresaka.

Diskusije o tome da li se klase trebaju koristiti u JavaScript-u se neprekidno vode. Medjutim, to nije razlog da slijepo prihvatimo slicne stavove i odbacimo klase bez razumijevanja. Ovaj odjeljak ne sluzi da osudi upotrebu klase, vec da ohrabri istrazivanje i poznavanje klase kako bi donosili svoje zakljucke.

Osnovno

Klasa je funkcija i sintaksa podsjeca na konstruktore jer se poziva sa kljucnom rijeci new i naziv klase pocinje sa velikim slovom, ali se razlikuje po tome sto

klasu deklarisemo sa kljucnom rijeci class i
ne navodimo zagrade za parametre kao sto to obicno radimo sa funkcijama.

Zato je u klasi dostupna constructor(x, y) {...} metoda u koju mozemo smjestiti parametre. Automatski se izvrsava nakon pozivanja klase new Klasa(1, 2) da bi inicijalizovala novi objekat. Ukoliko konstruktor metoda nije navedena, JavaScript ce dodati nama nevidljivu i praznu konstruktor metodu.

// let Klasa = class {} ili
// let Klasa = class ImenovanaKlasaIzraz {} ili
class Klasa { 

  constructor(id) {
    this.id = id; // obj.id
    this.metoda = function() {}; // obj.metoda
  };

  ispisiID() {
    console.log(this.fraza + this.id);
  }; // direktne metode => Klasa.prototype

  fraza = 'Moj id je: '; 
  // direktna svojstva => obj.fraza

  // u konstruktor funkciji bi definisali svojstvo
  // this.fraza = ...
  // Sa direktnim clanovima klase to ne radimo,
  // samo sa clanovima unutar metoda

}

let obj = new Klasa(123);
obj.ispisiID(); // Moj id je: 123
console.log(obj); 
// {fraza: 'Moj id je: ', id: 123, metoda: ƒ}

Klasa ima jednu specijalnu constructor metodu, ostale metode se automatizovano dodaju u Klasa.prototype. .prototype klase nasljedjuju inicijalizovani objekti kao svoj [[Prototype]]. Sa druge strane, svaka instanca klase dobija svojstva direktno u objektu, ne kroz prototip.

Hajde da vidimo obj u DevTools konzoli (obratite paznju na to gdje se nalazi fraza, a gdje ispisiID metoda):

× Klasa
     fraza: 'Moj id je '
     id: 123
     metoda: ƒ metoda()
   × [[Prototype]]: Object
       > constructor: class Klasa
       > ispisiID: ƒ ispisiID()
       > [[Prototype]]: Object

Kao sto smo u clanku o prototipima naveli, svaka funkcija u svom prototip svojstvu ima constructor svojstvo koje pokazuje na samu funkciju.

console.log(typeof Klasa); // function
console.log(obj.__proto__ === Klasa.prototype); // true
console.log(obj.constructor === Klasa); // true

let obj1 = new obj.constructor(321);
console.log(obj1); // {fraza: 'Moj id je: ', id: 321}

Isto mozemo uraditi bez klase, koristeci konstruktor i prototipe.

function Konstruktor(param) {
  this.id = param;
  this.fraza = 'Moj id je: ';
}

Konstruktor.prototype.ispisiID = function() {
  console.log(this.fraza + ' ' + this.id);
};

let obj = new Konstruktor(123); 
// obj = {fraza: 'Moj id je: ', id: 123}

obj.ispisiID(); // Moj id je: 123

Petlje ne vide metode

Petlje ne vide metode u prototipu klase jer ova svojstva za enumerable deskriptor dobijaju false vrijednost, dok to sa konstruktorom u drugom primjeru nije slucaj.

// class Klasa {...}

let deskriptori = Object.getOwnPropertyDescriptors(Klasa.prototype);
console.log(deskriptori);

Daje:

{
  constructor: {
    writable: true,
    enumerable: false,
    configurable: true,
    value: class Klasa
  },
  ispisiSvojstvo: {
    writable: true,
    enumerable: false,
    configurable: true,
    value: ƒ ispisiSvojstvo()
  }
}

Mozemo napisati petlju koja ispisuje svojstva objekta kreiranog konstruktor funkcijom, ne klasom. Njegova metoda ispisiID() u prototipu ima vrijednost enumerable: true i zato je je petlja vidi.

for (let svojstvo in obj) {
  console.log(svojstvo); // id, fraza, ispisiID
}

use strict se podrazumijeva unutar klase. Svi dijelovi tijela klase su u striktnom rezimu. Bez striktnog rezima, ovo bi radilo:

class Klasa {
  constructor() {
    varijabla = '';  // varijabla is not defined
    console.log(varijabla);
  }
}

let obj = new Klasa();

Izgradnja strukture sa geterima i seterima

Pustanje korisnika klase da radi sa svojstvima direktno se potencijalno smatra losim dizajnom. Mozemo zastititi i zamaskirati stvarna svojstva setterima i getterima koji ce imati pristup pravim svojstvima objekta. Zasticena svojstva obicno imaju _ prefix.

class Konstruktor {
  constructor(fraza) {
    this.fraza = fraza; // poziva set fraza('Dobar dan.')
  }

  set fraza(vrijednost) {
    this._fraza = vrijednost; // dodjeljuje _fraza: 'Dobar dan.'
  }

  get fraza() {
    return this._fraza;
  }
}

let obj = new Konstruktor('Dobar dan.');

console.log(obj); // {_fraza: 'Dobar dan.'}
obj.fraza = 'Dobro vece.'; 
// poziva set fraza('Dobro vece.')
console.log(obj.fraza); 
// poziva get fraza() { return this._fraza }
// Dobro vece

Pozivanjem obj.fraza svojstva, pozivaju se setter ili getter ako su definisani (u ovisnosti sta zelimo uraditi).

Potencijal ovog koda je vise od definisanja neke vrijednosti ili vracanja iste. Metode se ponasaju kao svojstva sto nam daje moc da kontrolisemo podatke: svojstvima dodamo logiku, provjere prije nego svojstvo prihvati vrijednost ili instrukcije za vracanje vrijednosti u specificnom obliku.

Razlog za prefix "_" je razlikovanje izmedju setera / getera i originalnog svojstva. Po konvenciji, izvan klase ne treba manipulisati sa svojstvima sa prefixom "_" iako je moguce. Drugi razlog je da ako JavaScript engine ne moze razlikovati setter/getter metodu od svojstva dolazi do RangeError: Maximum call stack size exceeded.

Kako? Hajde da originalno svojstvo preimenujemo u ime settera.

constructor(fraza) {
  this.fraza = fraza; 
  // this.fraza poziva set fraza('Dobar dan.')
}
...
set fraza(vrijednost) {
  this.fraza = vrijednost; 
  // this.fraza beskonacno poziva set fraza('Dobar dan.')
}

Sa getterima mozemo dobiti Maximum call stack size exceeded na isti nacin.

Da bi se svojstvo moglo samo citati, ali ne i mijenjati dovoljno je definisati getter bez settera.

Ispod setter dobija instrukcije da provjeri broj rijeci u proslijedjenoj frazi. Ukoliko postoji vise od jedne rijeci vrijednost je prihvacena, inace porukom sugerise korisniku da pokusa frazu sa vise rijeci.

class Konstruktor {
  constructor(fraza) {
    this.fraza = fraza;
  }

  set fraza(vrijednost) {
    let nizRijeci = vrijednost.split(' ');

    if (nizRijeci.length > 1) {
      this._fraza = vrijednost;
      console.log(`Nova fraza je "${this._fraza}"`);
    } else {
      console.log(`Pokusajte frazu sa najmanje dvije rijeci.`);
    }
  }

  get fraza() {
    return this._fraza;
  }
}

let obj = new Konstruktor('x'); 
// Pokusajte frazu sa najmanje dvije rijeci
console.log(obj); 
// {}
obj.fraza = 'Dobro vece.'; 
// Nova fraza je "Dobro vece."
console.log(obj); 
// { _fraza: 'Dobro vece.' };

Prosirivanje klase i nasljedjivanje

Da bi prosirili klasu, odnosno da bi jedna naslijedila od druge koristimo kljucnu rijec extends.

class Macka {

  kaze = 'meow';

  fraza() {
    console.log(`${this.ime} kaze ${this.kaze}!`);
  }

  constructor(ime, vrsta, zvuk) {
    this.ime = ime;
    this.vrsta = vrsta;
    if (zvuk) this.kaze = zvuk;
  }
}

// definisanje nove klase sa extends
class Munchkin extends Macka {    
  prica() {
    this.fraza();
  }
}

let oddie = new Munchkin('Oddie', 'Munchkin');
oddie.prica(); // Oddie kaze meow!
console.log(oddie); // {kaze: 'meow', ime: 'Oddie', vrsta: 'Munchkin'}

Kljucna rijec extends je "ukrala" mehanizam prototipnog nasljedjivanja.

Metode u klasi nastanjuju .prototype klase.
Djecija klasa koja je prosirila (extended) roditeljsku klasu dobija DjecijaKlasa.prototype.[[Prototype]] = RoditeljskaKlasa.prototype.
Instanca djecije klase dobija objekat.[[Prototype]] = DjecijaKlasa.prototype
Sva polja postaju direktna svojstva objekta
Ako zvuci zbunjujuce:

Ili ispis conosle.log(oddie) u konzoli. Vidimo desnu stranu [[Prototype]] nasljedjivanja jer pocinje od objekta oddie:

× Munchkin
      vrsta: 'Munchkin'
      ime: 'Oddie'
      kaze: 'meow'
    × [[Prototype]]: Macka
       > constructor: class Munchkin
       > prica: ƒ prica()
       × [[Prototype]]: Object
          > constructor: class Macka
          > fraza: ƒ fraza()
          × [[Prototype]]: Object
             > constructor: ƒ Object
             > hasOwnProperty: ƒ hasOwnProperty()
             > isPrototypeOf: ƒ isPrototypeOf()
               ...

Kao u prototipima, JavaScript trazi metode uz lanac prototipnog nasljedjivanja.

Staticna polja i metode

Sa kljucnom rijeci static mozemo dodati korisne funkcije klasi. Sigurno ste vidjali neke predefinisane staticne metode poput Math.max() ili Object.getPrototypeOf().

Staticna polja i metode se dodjeljuju direktno klasi i dostupna su na njoj: Klasa.metoda = fn(), sto se znacajno razlikuje od Klasa.prototype.metoda = fn() cime smo se bavili do sada. Koriste se za kreiranje nekog "alata" koji nije specifican za izvedeni objekat i nisu dostupne u pojedinacim inicijalizovanim objektima kako ih ne nasljedjuju u prototipu.

class Student {
  constructor(ime, smijer) {
    this.ime = ime;
    this.smijer = smijer;
  }

  static studiraEkonomiju(student) {
    return (student.smijer === 'Ekonomija');
  }
}

let ena = new Student('Ena', 'Ekonomija');
Student.studiraEkonomiju(ena); // true

Prosirenjem klase, djecija klasa nasljedjuje roditeljsku za svoj prototip. Tako djecija klasa nasljedjuje roditeljske staticne metode.
Alumni.[[Prototype]] = Student.

Class Student {
  constructor(ime, smijer) {
    this.ime = ime;
    this.smijer = smijer;
  }

  static studiraEkonomiju(student) {
    return (student.smijer == 'Ekonomija');
  }
}

class Alumni extends Student {}

let ena = new Student('Ena', 'Ekonomija');
Alumni.studiraEkonomiju(ena); // true

Super

Kljucna rijec super je referenca na roditeljski objekat ili klasu (super klasu) i sluzi za pristup njihovim metodama i poljima kroz [[Prototype]].

super.metoda(); // poziva roditeljsku istoimenu metodu 
super.svojstvo; // poziva roditeljsko istoimenu svojstvo
super(...args); // poziva konstruktora roditeljske klase

Ono u cemu je super dobar je ponovna upotreba vec napisanog koda, sa opcijom da ga prosiri tamo gdje ima potrebe kao sto to rade klase. Evo i kako:

Konstruktor

Kada zelimo iz konstruktora djecije klase pozvati roditeljsku pozivamo super(...args) u obliku funkcije.

class Osoba {
  constructor(ime, godine) {
    this.ime = ime;
    this.godine = godine;
  }
}

class Student extends Osoba {
  // Kada djecija klasa nema definisan konstruktor onda se generise:
  // constructor(...args) {
  //  super(...args);
  //}
}

let student = new Student('Tea', 23);
// student = { ime: 'Tea', godine: 23};

U primjeru iznad djecija klasa automatski poziva roditeljski konstruktor i inicijalizuje objekat student. A ako zelimo definisati dodatne funkcionalnosti u konstruktoru djecije klase, onda konstruktora roditeljske klase moramo sami pozvati:

class Osoba {
  constructor(ime, godine) {
    this.ime = ime;
    this.godine = godine;
  }
}

class Student extends Osoba {
  constructor(ime, godine, smijer) {
    super(ime, godine);
    this.smijer = smijer;
  }
}

let student = new Student('Tea', 23, 'IT');
// student = { ime: 'Tea', godine: 23, smijer: 'IT' };

Trik je u tome da u konstruktoru djecije klase prije koristenja kljucne rijeci this moramo pozvati roditeljski konstruktor, inace dolazi do greske:

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

Radi se o tome da kljucna rijec new inicijalizuje objekat ali to ne moze uraditi izvedena klasa, samo ona koja nema roditelja (protoParent: null). Izvedene klase imaju interno svojstvo [[ConstructorKind]]: "derived". Tek kada super konstruktor inicijalizuje objekat, this pokazuje na objekat. Prije toga this nece raditi.

Metode

Kada djecija klasa ima trazenu metodu, onda JavaScript engine ne trazi dalje. Medjutim, ako zelimo dodati funkcionalnosti i prilagoditi metodu koja vec postoji u roditeljskoj klasi, ne moramo prepisivati vec napisan kod. U djecijoj klasi cemo kreirati istoimenu metodu i unutra pozvati super.metoda(). Prije ili nakon poziva super metode mozemo dodati jos funkcionalnosti.

class Osoba {
  ime = 'Tea';
  godine = 23;

  ispisInfo() {
    return `Ime: ${this.ime}. Godina: ${this.godine}.`;
  }
}

class Student extends Osoba {
  smijer = 'informatika';

  ispisInfo() {
    return `${super.ispisInfo()} Smijer: ${this.smijer}.`;
  }
}

let student = new Student();
console.log(student.ispisInfo()); 
// Ime: Tea. Godina: 23. Smijer: informatika.

Polja klase

Polja klase su svojstva instance, ali super pokusava pristupiti svojstvima u .prototype objektu superklase. Odnosno u [[Prototype]] lancu instance. U primjeru ispod vrijednost polja nije nadjena u prototipu instance i zato je undefined.

class RoditeljskaKlasa {
  roditeljskoPolje = 15;
}

class DjecijaKlasa extends RoditeljskaKlasa {
  djecijePolje = super.roditeljskoPolje; // undefined
}

let djecija = new DjecijaKlasa();
console.log(djecija); // {roditeljskoPolje: 15, djecijePolje: undefined}

Nadjacavanje polja klase

Kada su u pitanju dupla polja (polje istog imena u djecijoj i roditeljskoj klasi) postoji mala zackoljica zbog reda inicijalizacije polja klase i izvrsenja koda, koja moze izazvati nepredvidiv ishod. Sa druge strane, da su u pitanju metode rezultat koda bi bio "ispravan".

class Roditelj {
  polje = 0.3;

  constructor() {
    console.log(this.polje);
  }
}

class Dijete extends Roditelj {
  polje = 1000;
}

let dijete = new Dijete(); // 0.3
console.log(dijete); // { polje: 1000 }

Pozivom console.log() u super konstruktoru se ispisuje this.polje prije nego je djecija klasa uspjela dodijeliti svoje polje instanci.

Umjesto poziva this.polje prije nego klasa zavrsi sa kreiranjem objekta, ispisacemo vrijednost polja kroz metodu:

class Roditelj {
  polje = 0.3;
  constructor() {
    // console.log(this.polje);
  }

  vrijednostPolja() {
    console.log(this.polje);
  }
}

class Dijete extends Roditelj {
  polje = 1000;
}

let dijete = new Dijete(); 
dijete.vrijednostPolja(); 1000

Sledeci odjeljak detaljnije ulazi u izvrsavanje koda i zasto se polja ponasaju drugacije:

Da bi razrijesili vrijednost dijete varijable, pozivamo new Dijete().
konstruktor Dijete klase kreira konstruktor jer ga nismo naveli i poziva super konstruktor.

constructor(...args) {
  super(...args);
}

U njemu se inicijalizuje prazan objekat {}.
Potom polja postaju svojstva tog objekta. Objekat dobija { polje: 0.3 }.
Izvrsava se konstruktor jer nema drugih polja. Konstruktor sa console.log ispisuje this.polje koje je trenutno svojstvo objekta 0.3
Nakon izvrsenja konstruktora Roditelj klase, izvrsenje se vraca na Dijete klasu
Polja u Dijete klasi se inicijalizuju i polje dobija novu vrijednost 1000;
Nastavlja se izvrsenje konstruktora, ali u njemu nema vise instrukcija jer ga nismo kreirali i
Varijabli dijete se dodjeljuje novi objekat { polje: 1000 }

Zasto metode klase, za razliku od polja, rade ispravno?
Odmah po inicijalizaciji objekta, on za svoj [[Prototype]] nasljedjuje Dijete.prototype i pristup svim metodama u djecijoj i roditeljskoj klasi. Kako polja postaju svojstva instance pojedinacno, ona se inicijalizuju tek kada se kreira nova instanca u super klasi. Smijer inicijalizacije je Roditelj → Dijete.

`static` svojstva

Polje postaje svojstvo instance
Metoda postaje dio prototipnog lanca
Staticna metoda je direktno svojstvo klase

class Klasa {
  ime = 'Tea'; // objekat.ime = Tea
  static godine = 23; // Klasa.godine = 23

  ispisInfo() { // Klasa.prototype.ispisInfo = function()
    return `Ime: ${this.ime}. Godine ${this.godine}`;
  }
}

let objekat = new Klasa();
console.log(objekat.ispisInfo()); // Ime: Tea. Godine: undefined.
console.dir(Klasa.godine); // 23

Sada kada imamo osnovno znanje o metodama i poljima mozemo se vratiti kljucnoj rijeci super i osvrnuti kako ona zapravo radi na static poljima. Ispod vidimo djeciju klasu koja prosiruje roditeljsku. Obe imaju static polje i kao takvo postaje svojstvo klase. Klase nasljedjuju jedna drugu a super trazi svojstvo u [[Prototype]] tako da:

class RoditeljskaKlasa {
  static rPolje = 100; // RoditeljskaKlasa.rPolje = 100;
}

class DjecijaKlasa extends RoditeljskaKlasa {
  static dPolje = super.rPolje + 1; // DjecijaKlasa.dPolje = 100 + 1;
}

let djecija = new DjecijaKlasa();
console.log(djecija); // {} 
// instanca je prazna
console.dir(DjecijaKlasa);

Poslednja linija u DevTools konzoli ispisuje sledece:

× class DjecijaKlasa (**)
     dPolje: 101 (**)
     length: 0
     name: 'DjecijaKlasa'
   > prototype: 'RoditeljskaKlasa'
       arguments: (...)
       caller: (...)
     × [[Prototype]]: class RoditeljskaKlasa (**)
          rPolje: 100 (**)
          length: 0
          name: "RoditeljskaKlasa"
        > prototype: {constructor: ƒ}
          ...

`super` u objektu

super ide uz prototipni lanac nasljedjivanja sve dok ne nadje super objekat koji ima trazeno svojstvo.

let osoba = {
  ime: 'Jana Doe',

  sePredstavlja() {
    console.log(`Ja sam ${this.ime}.`);
  }
};

let student = {
  __proto__: osoba
};

let senior = {
  __proto__: student,
  ime: 'Teo',
  sePredstavlja() {   // [[HomeObject]] = senior
    super.sePredstavlja();
  }
};

senior.sePredstavlja(); // Ja sam Teo

Kada u metodi koristimo kljucnu rijec super, ona veze metodu sa objekatom u kom se nalazi koristeci posebno [[HomeObject]] svojstvo funkcije.
To svojstvo imaju samo funkcije stilizovane kao metode metoda() {...}.
[[HomeObject]] pamti objekat u kom je funkcija originalno definisana i super ovu vezu koristi za razrjesavanje metoda i roditeljskih prototipa.

let objekat = {
  metoda () {
    // objekat.metoda.[[HomeObject]] = objekat;
  }
};


class Klasa {
  metoda () {
    // Klasa.prototype.metoda.[[HomeObject]] = Klasa.prototype;
  }
}

function funkcija() {
  // funkcija.[[HomeObject]] = undefined;
}

Kada je super metoda pozvana, JavaScript engine trazi super metodu u [[Prototype]]-u [[HomeObject]]-a. Ovo osigurava da je nadjena metoda naslijedjena, a ne dio trenutnog objekta.

class RKlasa {
  metoda() {
    console.log('Zdravo iz roditeljske metode');
  }
}

class DKlasa extends RKlasa {
  metoda () { 
    // jer metoda() postaje metoda DKlasa.prototype objekta
    // DKlasa.prototype.metoda.[[HomeObject]] = DKlasa.prototype

    super.metoda(); 
    // super trazi .metoda() u DKlasa.prototype.[[Prototype]] lancu

    console.log('Zdravo iz djecije metode');
  }
}

new DKlasa().metoda();
// Zdravo iz roditeljske metode
// Zdravo iz djecije metode

console.dir(DKlasa);

Hajde da vidimo u konzoli gdje je pronasao super.metoda():

× class DKlasa
      length: 0
      name: 'DKlasa'
    × prototype: (**)
       > constructor: class DKlasa
       > metoda: ƒ metoda() (*)
       × [[Prototype]]: (***)
          > constructor: class RKlasa`
          > metoda: ƒ metoda()
          > [[Prototype]]: Object
      arguments: (...)
      caller: (...)
    > [[Prototype]]: class RKlasa

Na liniji sa * je oznacena metoda u kojoj smo pozvali super.metoda()
Na liniji sa ** je objekat u kojoj je ta metoda kreirana [[HomeObject]]
Na liniji sa *** se nalazi [[Prototype]] gdje pocinje potraga za super metodom

[[HomeObject]] bi u obliku objekta za navedeni primjer mogli predstaviti ovako:

[[HomeObject]] = DKlasa.protototype: {
  constructor: class DKlasa,
  metoda: ƒunction() {
    super.metoda(); 
    console.log('Zdravo iz djecije metode')
  },
  [[Prototype]]: {
    constructor: class RKlasa,
    metoda: ƒunction() {
      console.log('Zdravo iz roditeljske metode')
    },
    [[Prototype]]: {...}
  }
}

Privatna polja i metode

Do sada su klase bile iskljucivo javne u JavaScript-u, za razliku od nekih drugih jezika. ES2020 uvodi privatne clanove (polja i metode) klase. A da bi neki clan bio privatan koristimo # prefiks i ovakvi clanovi su dostupna samo iz klase. Ne mogu biti nasljedjeni.

class Osoba {
  #ime;
  #prezime;

  constructor(ime, prezime) {
    this.#ime = Osoba.#validiraj(ime);
    this.#prezime = Osoba.#validiraj(prezime);
  }

  get punoIme() {
    return this.#ime + ' ' + this.#prezime;
  }

  static #validiraj(str) {
    if (typeof str === 'string' && str.length > 2) {
      return str;
    }

    throw 'Vrijedno mora biti string, sa vise od 2 karaktera';
  }
}

let osoba = new Osoba('Marta', 'Martinovic');
console.log(osoba.punoIme); // Marta Martinovic


class Student extends Osoba {
  constructor(ime, prezime, smijer) {
    super(ime, prezime);
    this.smijer = smijer;
  }
}

let student = new Student('Lepa', 'Cvetic', 'CS');
// student = { smijer: 'CS', #ime: 'Lepa', #prezime: 'Cvetic' };

let ime = Osoba.#validiraj('Anja');
// SyntaxError: 
// Private field '#validiraj' must be declared in an enclosing class

U primjeru iznad smo inicijalizovali polja #ime i #prezime, kao i staticnu metodu #validiraj. Navedeni clanovi su dostupni samo iz klase u kojoj su definisani. Za postavljanje vrijednosti i citanje privatnih clanova izvan klase pristupljeno je javnim metodama koje to rade iznutra.

Privatno i javno svojstvo istog imena ne stvaraju konflikt.

Privatna svojstva sa WeakMap

WeakMap je kolekcija (kljuc/vrijednost) parova ciji kljuc mora biti objekat, dok vrijednost moze biti proizvoljnog tipa (sto se razlikuje od kolekcije Map koja za kljuc moze imati bilo koju vrijednost).

WakMap svojstva takodje ne stvaraju jake reference za svoje kljuceve, sto znaci da ako se objekat koji se koristio za kljuc izbrise, njegova vrijednost ce takodje biti uklonjena iz memorije i mape.

Da bi WeakMap sakrila svojstvo u ovom primjeru cemo koristiti i modul, odnosno odvojicemo kod. Klasa i privatna varijabla ce imati svoj modul i iz njega cemo eksportovati samo klasu, ne i privatnu varijablu.

// stack.js
const _items = new WeakMap();

export class Stack {
	constructor(stack = []) {
		_items.set(this, stack);
	}

	peek() {
		return _items.get(this)[this.count - 1];
	}

	pop() {
		if (this.count < 1) throw Error('Invalid request, empty stack.');
		return _items.get(this).pop();
	}

	push(value) {
		return _items.get(this).push(value);
	}

	get count() {
		return _items.get(this).length;
	}
}

// app.js 
import {Stack} from './stack.js';
const stack = new Stack();

Nemojte zaboraviti u HTML fajlu skripti dodati type="module" atribut kako bi pretrazivac znao kako tretirati fajl (ili podesite webpack) i pokrenite stranicu kroz server. Ovdje je koristena sintaksa ES6 modula za pretrazivace.
CommonJS Module format za Node je nesto drugaciji:

// stack.js
module.exports = Stack;
// app.js
const Stack = require('./stack');

Prosirivanje ugradjenih konstruktora

Nekada zelimo prosiriti mogucnosti ugradjenih konstruktora poput Object, Array, Map i drugih. Recimo da zelimo prosiriti Array sa klasom za brojeve koja dodaje funkcionalnost poduplavanja i provjeravanja da li je trenutna vrijednost jednaka izvornoj.

class NizBrojeva extends Array {

  constructor(...args) {
    super(...args);
    let kopijaNiza = {orig: [].concat(this)};
    Object.assign(Object.getPrototypeOf(this), kopijaNiza);
  }

  dupliraj() {
    return this.forEach((broj, index) => this[index] = broj * 2);
  }

  static jeIzvorni(niz) {
    let izvorniNiz = Object.getPrototypeOf(niz).orig;
    return JSON.stringify(niz) === JSON.stringify(izvorniNiz);
  }

}

let niz = new NizBrojeva(1, 2, 4);
niz.dupliraj(); // [2, 4, 8]
console.log(NizBrojeva.jeIzvorni(niz)); // false

Provjera tipa

Ali kako mozemo odrediti tip klase NizBrojeva koji smo vidjeli iznad?

console.log(niz instanceof NizBrojeva); // true
console.log({}.toString.call(niz)); // [object Array]
console.log(typeof niz); // object

instanceof

instanceof operator radi na objektima i testira da li se bilo gdje u prototipnom lancu objekta nalaze svojstva .prototype objekta navedenog konstruktora. Vraca true ili false. Sintakasa je objekat instanceof Konstruktor.

Kako je istina da je niz instanca klase NizBrojeva, tako je istina da je i instanca Array konstruktora jer se njegova prototip svojstva takodje nalaze u lancu prototipa objekta niz. Na kraju je i instanca Object konstruktora.

console.log(niz instanceof Object); // true

Kako je navedeno, instanceof provjerava da li se svojstva prototip objekta konstruktora nalaze u prototipnom lancu instance, ali mozemo modifikovati logiku, odnosno navesti uslove koje objekat mora ispuniti da bi se smatrao instancom nekog konstruktora.

Logiku pisemo u staticnoj metodi konstruktora static [Symbol.hasInstance](objekat) koja mora vratiti true ili false.

class NizBrojeva extends Array {

  static [Symbol.hasInstance](instanca) {
    return Array.isArray(instanca);
  }

}

let niz = new Array();
console.log(niz instanceof NizBrojeva); // true

Znamo da objekat niz nije naslijedio prototipna svojstva klase NizBrojeva, ali nasa logika kaze da su svi nizovi instanca klase NizBrojeva.

toString metoda

Object u svom prototipu ima metodu .toString(). Njegovo podrazumijevano ponasanje na objektu daje [object Object].

let objekat = {};
console.log(objekat.toString()); // [object Object]

Super moc ovakvog ponasanja nije ocigledna, ali mozemo posuditi Object.prototype.toString metodu i primjeniti na drugim podacima kako bi dobili njihov tip.

{}.toString.call( 1234 );      // [object Number]
{}.toString.call( 'ab' );      // [object String]
{}.toString.call( 111n );      // [object BigInt]
{}.toString.call( []   );      // [object Array]
{}.toString.call( null );      // [object Null]
{}.toString.call( undefined ); // [object Undefined]
{}.toString.call( new Map() ); // [object Map]
{}.toString.call( new Set() ); // [object Set]
{}.toString.call( class {}  ); // [object Function]
{}.toString.call( function() {} ); // [object Function]

Zakljucicemo da je {}.toString naprednija verzija typeof operatora. On radi na vecini primitivnih tipova podataka, ali null prepoznaje kao objekat. Dok vecinu tipova objekata prepoznaje samo kao objekte, ne i kao njegov tip.

{}.toString metodu smo posudili iz prototipa objekta i da bi je izvrsili u novom kontekstu (kontekstu podatka koji prosljedjujemo) koristimo .call(). Razlog posudjivanja na ovaj nacin je jer drugi tipovi takodje imaju toString metodu u svom prototipu, ali one nemaju ovakvo ponasanje, a nalaze se blize u prototipnom lancu nasljedjivanja.

Instance klasa imaju tip koji nasljedjuju od predefinisanih konstruktora poput [object Object] ili [object Array], ali ako zelimo da {}.toString metoda razlikuje instance nasih klasa dodacemo im [Symbol.toStringTag]: 'Tip' u svojstvo.

class NizBrojeva {
  [Symbol.toStringTag] = 'NizBrojeva';
}

let obj = new NizBrojeva();
console.log( {}.toString.call(obj) ); // [object NizBrojeva]

Mix-in

U OOP, mixin je klasa sa metodama koje druge klase mogu koristiti bez potrebe da od nje nasljedjuju. Sa ovim mozemo prevazici limitaciju nasljedjivanja u kojoj objekat moze imati samo jedan prototip i klasa moze prosiriti samo jednu klasu.

Mixini, kao i klase, ohrabruju koristenje vec napisanog koda umjesto dupliciranja (ali sa njima izbjegavamo i potencijalno nepredvidivo nasljedjivanje).

let mixIn = {
  sePredstavlja() {
    console.log(`Ja sam ${this.ime}.`);
  }
};

class Student {
  constructor(ime) {
    this.ime = ime;
  }
}

Object.assign(Student.prototype, mixIn);

let student = new Student('Ivana');

student.sePredstavlja(); // Ja sam Ivana.

Klasi smo dodali nove metode koje ce naslijediti njene instance, a Student i dalje ima priliku da prosiri jednu klasu.

Hajde da ispisemo Student klasu u konzoli i vidimo njena svojstva.

× Student
      length: 1
      name: 'Student'
    × prototype:
        > sePredstavlja: ƒ sePredstavlja() // mixIn
        > constructor: class Student
        > [[Prototype]]: Object
      arguments: (...)
      caller: (...)
    > [[Prototype]]: ƒ ()
      ...

Object.assign metoda je "tajni" sastojak koji je iskoristen za mixin. Ona je kopirala svojstva objekta u drugom argumentu (source) i dodala u objekat koji smo ponudili kao prvi argument (target).
Sintaksa je Object.assign(target, ...sources).

Ova metoda ne radi "deep cloning". Ako je vrijednost svojstva referenca na objekat, to svojstvo se ne klonira vec se kopira referenca na objekat. Vise o prosljedjivanju po referenci na Proslijediti po referenci ili vrijednosti

Prototipno nasljedjivanje

2022-11-07T17:00:00Z

Jednostavno receno, prototipsko nasljedjivanje se odnosi na mogucnost pristupa svojstvima jednog objekta iz drugog objekta, sto umanjuje potrebu dupliciranja koda. Klase su implementirane na osnovu prototipa i ovdje pricamo vise o tome sta se desava u pozadini.

Svaki objekat ima privatno svojstvo [[Prototype]] koje za vrijednost ima ili referencu na drugi objekat ili null. U primjeru ispod munchkin objekat za prototip dobija cat objekat.

let cat = {
  says: 'meow',
  talk() {
    console.log(`${this.name} says ${this.says}!`);
    // this je uvijek objekat prije tacke _____.svojstvo
  }
};

let munchkin = {
  name: 'Odie',
  breed: 'Munchkin',
  __proto__: cat
};

munchkin.talk(); // Odie says meow!

munchkin.talk() metoda ne postoji u munchkin objektu, ali kako je njegov prototip cat objekat, to je sledece mjesto gdje ce JavaScript engine nastaviti potragu. Potom bi je trazio u prototipu cat objekta, taj objekat potom ima svoj [[Prototype]], sve dok trazena metoda ne bude pronadjena ili dok pretraga ne dosegne kraj lanca, odnosno vrijednost null koja nema prototip i tu pretraga zavrsava sa greskom.

[[Prototype]] nije samo apstraktni koncept i da bi ga vidjeli mozemo napisati console.log(munchkin) i pregledati rezultat u DevTools konzoli.

×  Object
     breed: "Munchkin"
     name: "Odie"
  ×  [[Prototype]]: Object
        says: "meow"
      > talk: ƒ talk()
      × [[Prototype]]: Object
          > constructor: ƒ Object()
          > hasOwnProperty: ƒ hasOwnProperty()
            ...

Istom prototipu je moguce pristupiti direktno:

console.log(munchkin.__proto__); // cat
console.log(munchkin.__proto__.__proto__); // Object.prototype
// Vise o njemu kasnije
console.log(munchkin.__proto__.__proto__.__proto__);  // null
// Dosegli smo kraj lanca nasljedjivanja za ovaj objekat

[[Prototype]] referenca ne moze ici u krug.

let predator = {};
let cat =      { __proto__: predator };
let munchkin = { __proto__: cat };

predator.__proto__ = munchkin; // TypeError: Cyclic __proto__ value

for..in petlje su svjesne naslijedjenih svojstava sto znaci da ce se data akcija ponoviti i za nasljedjena svojstva (nije slucaj sa klasama). Vidljive su petljama jer deskriptor enumerable ovih svojstava nije podesen da bude false. Deskriptore je moguce podesiti rucno.

let predator = { dangerous: 'very' };
let cat =      { says: 'meow', __proto__: predator };
let munchkin = { name: 'Odie', __proto__: cat };

for (let prop in munchkin) {
  console.log(prop); // name, says, dangerous
}

Postoji nacin da testiramo da li je svojstvo dio objekta ili ne sa obj.hasOwnProperty(key) — vraca true ili false.

for (let key in munchkin) {
  if (munchkin.hasOwnProperty(key)) {
    console.log(key); // name
  } else {
    console.log(key); // says, dangerous
  }
}

Ili mozemo objekat pretvoriti u niz. On nece uzeti u obzir nasljedjena svojstva. Za nizove je prikladnije koristiti for..of petlju:

let munchkinArray = Object.keys(munchkin); // ['name']
for (let key of munchkinArray) {
  console.log(key); // name
}

Definisanje prototipa

U primjerima iznad je koristeno svojstvo __proto__. On je (getter i setter) svojstvo za pristupanje prototipu objekta. Smatra se zastarjelim, ali ga je prihvatljivo koristiti za vrijeme kreiranje objekta {__proto__: ...}. Preporuceni nacin za dodjeljivanje prototipa za vrijeme kreiranje objekta je Object.create(prototype, propertiesObject) (ili koristenjem klase). Prvi parametar je objekat koji ce novi objekat naslijediti, a kroz drugi opcioni parametar propertiesObject mozemo dodavati svojstva i podesiti njihove deskriptore.

let munchkin = Object.create(cat, { 
  'name': { 
    value: 'Odie', 
    enumerable: true, // prikazuje se u petljama
    writable: true, // promjenjiva vrijednost
    configurable: true // deskriptori se mogu modifikovati, a svojstvo brisati
  },
  'breed': {
    value: 'Munchkin',
    enumerable: true
    // nenavedeni deskriptori imaju vrijednost false
  }
});

Sada necemo definisati svojstva kroz drugi parametar u Object.create(). Ukoliko u sklopu njega ne navedemo neki deksriptor, njegova vrijednost ce biti false. Ako svi trebaju imati vrijednost true navodjenje svakog deskriptora je suvisno. Smislenije je dodati svojstva nakon kreiranja objekta:

let munchkin = Object.create(cat);
munchkin.name = 'Odie'; 

// ili __proto__ *za vrijeme kreiranje objekta*
let korat = {  __proto__: cat, name: Whiskers, breed: 'korat' };

Za mijenjanje prototipa postojecem objektu koristimo Object.setPrototypeOf(obj, proto) metodu:

let predator = { dangerous: 'very' };
let cat = { says: 'meow' };
let munchkin = { name: 'Odie' };

cat.__proto__ = predator; // zastarjelo
Object.setPrototypeOf(munchkin, cat); 

console.log(munchkin.dangerous); // very

Medjutim, dinamicno dodjeljivanje prototipa treba izbjegavati. Vecina interpretera JavaScript koda je optimizovalo mehanizam prototipnog nasljedjivanja. Ddefinisanje prototipa objekta nakon njegovog kreiranja ugrozava ovu optimizaciju. Ukoliko performans i brzina izvrsavanja koda nije vazna, onda ovo nije problem (ali onda prototip gubi svrhu). U suprotnom, dinamicno definisanje prototipa treba izbjegavati ako je moguce dodijeliti prototip za vrijeme kreiranja objekta.

Za dobijanje prototipa nekog objekta umjesto __proto__ svojstva tu treba koristiti Object.getPrototypeOf(obj) metoda.

let cat = { says: 'meow' };
let munchkin = Object.create(cat);

// munchkin.__proto__; // zastarjelo
Object.getPrototypeOf(munchkin); // cat

Jos jedan nacin za definisanje prototipa objekta je kroz konstruktor..

Funkcija.prototype svojstvo

Za razumijevanje ove teme je, izmedju ostalog, neophodno poznavanje konstruktora i operatora new. Ukratko, konstruktor je funkcija koja inicijalizuje objekat. Poziva se sa kljucnom rijeci new i po konvenciji se imenuje sa prvim velikim slovom. Funkcija za rezultat vraca objekat i omogucava kreiranje vise slicnih objekata.

function Cat(name, breed) {
	this.name = name;
	this.breed = breed;
}

let odie = new Cat('Odie', 'Munchkin');
let whiskers = new Cat('Whiskers', 'Korat');

console.log(odie);  // Cat {name: 'Odie', breed: 'Munchkin'}
console.log(whiskers.breed);  // Korat

prototype svojstvo

Funkcije su objekti. A objekti imaju svojstva (key-value parove). Uz to funkcije su specificne po tome sto imaju predefinisano fn.prototype svojstvo. Ovdje treba napraviti razliku izmedju .prototype i [[Prototype]] objekta. [[Prototype]] je prototip koji funkcija (ili bilo koji drugi objekat nasledjuje), fn.prototype je predefinisano svojstvo svih funkcija i sada pokusavamo shvatiti njegovu funkciju.

function funkcijaJeObj() {}

console.dir(funkcijaJeObj);

Umjesto console.log() je koristen console.dir() jer log prikazuje toString reprezentaciju funkcije (njeno tijelo u string obliku koje se moze pozvati dodavanjem zagrada), dok dir prikazuje interaktivnu listu svojstava JavaScript objekta.

Rezultat u konzoli:

×  ƒ funkcijaJeObj()
      arguments: null
      caller: null
      length: 0
      name: "funkcijaJeObj"
    × prototype: 
         > constructor: ƒ funkcijaJeObj()
         > [[Prototype]]: Object
      [[FunctionLocation]]: app.js:1
    > [[Prototype]]: ƒ ()
    > [[Scopes]]: Scopes[1]

Iako nismo sami dodali .prototype svojstvo funkciji, ono je tu i vec sadrzi objekat sa nekim svojstvima: {constructor: ƒ, [[Prototype]]: Object}.
Mozemo dodavati i modifikovati svojstva .prototype-a, ali ono ima efekat samo kada se pozove funkcija sa kljucnom rijeci new. Zasto? Jer se konstruktor funkcija poziva sa kljucnom rijeci new da bi kreirala novi objekat i njeno prototype svojstvo u procesu kreiranja postaje referenca [[Prototype]] objekta koji je kreirala.
constructor() metoda uvijek pokazuje na samu funkciju sto ce se vidjeti u sledecem primjeru..

Kreiracemo praznu konstruktor funkciju i dodati metodu u njen .prototype objekat. Ako pozovemo funkciju, ona ce nam vratiti prazan objekat, ali ce objekat imati pristup metodi koja je dodana .prototype-u funkcije iz koje je nastao:

// Kreiranje prazne konstruktor fn
function Funkcija() {} 

// Dodavanje metode u njeno .protoype svojstvo
Funkcija.prototype.svojstvo = function() {
  console.log("Zdravo iz prototipa!");
}; 

let obj1 = new Funkcija(); 
// Jer obj1 ima referencu na .prototype za svoj  [[Prototype]] 
// Je isto kao da smo napisali:
// obj1.__proto__.svojstvo = function() {...}

obj1.svojstvo(); // Zdravo iz prototipa!

console.log(Funkcija.prototype.constructor); // Funkcija() {}
console.log(obj1.constructor === Funkcija); // true

U konzoli:

× Funkcija {}
   × [[Prototype]]: Object
      > svojstvo: ƒ ()
      > constructor: ƒ Funkcija()
      > [[Prototype]]: Object

Ovaj odnos prototype svojstva konstruktora i [[Prototype]] svojstva objekta je mozda vizuelno lakse razumjeti:

Predefinisani prototipi

Rekli smo da sve funkcije imaju prototype svojstvo. Medjutim, ono sluzi samo funkcijama koje se izvrsavaju sa kljucnom rijeci new za definisanje prototipa [[Prototype]] objekta koji ce new inicijalizovati.
Sa druge strane, JavaScript dopusta kreiranje raznih objekata koristeci new, kao let arr = new Array(), let date = new Date(), let obj = new Object(), let fn = new Function(), let map = new Map(), let str = new String() itd. Mozemo zakljuciti da svaki put kada kreiramo objekat za to koristimo konstruktor. Cak i njihova imena po konvenciji pocinju velikim slovom.
Ovi predefinisani konstruktori u prototype svojstvu imaju predefinisane metode i svojstva koje se mogu koristiti na novo kreiranom objektu jer ih je objekat naslijedio. U konzoli cemo ispisati sadrzaj prototype svojstva jednog od konstruktora da bi vidjeli kako izgleda.

console.log(Array.prototype); 
// predefinisane metode za manipulisanje nizova

at: ƒ at()
concat: ƒ concat()
// ... 
sort: ƒ sort()
splice: ƒ splice()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
unshift: ƒ unshift()
values: ƒ values()
Symbol(Symbol.iterator): ƒ values()
[[Prototype]]: Object

Ovo su sve one vec vrlo poznate metode za nizove. Kreiranjem objekta sa new Array() (ili skraceno []), novoinicijalizovani niz dobija Array.prototype za svoj [[Prototype]].

let arr = new Array(); // isto kao let arr = []
console.log(arr.__proto__ === Array.prototype); // true

Ta svojstva su sada dostupna arr objektu jer se nalaze u njegovom prototipskom lancu. Primjer metode koju nismo kreirali, ali je JavaScript engine pronasao u [[Prototype]] i primjenio na novom objektu:

let arr = new Array(1, 2, 3, 4);  
console.log(arr.at(-1)); // 4

Ispod cemo vidjeti kako JavaScript engine reaguje kada ne moze pronaci metodu u samom objektu, niti u prototipnom lancu objekta. Objekat u ovom slucaju kreiram sa Object konstruktorom jer on u Object.prototype nema metodu za nizove.

let obj = new Object({1: 1, 2: 2, 3: 3, 4: 4});
obj.at(2); // obj.at is not a function

Ako se vratimo na sliku, strelice od objekta do prototype svojstva su dvosmjerne jer se ne radi o kopiji vec [[Prototype]] ima referencu na prototype konstruktora.

let arr = [1, 2, 3];

arr.__proto__.num = 3;
Array.prototype.num; // 3
console.log(arr.__proto__ === Array.prototype); // true

Objekat ne cuva metode prototipa. Ono sto on cuva su samo podaci poput stavki niza [1, 2, 3].

Lanac predefinisanih prototipa

Mozda ste primjetili da Array.prototype objekat na kraju predefinisanih metoda i svojstava ima naveden i [[Prototype]]: Object. To je zato sto svi oblici ugradjenih prototipa nasljedjuju prototip obicnog objekta i na ovaj nacin je on poslednji u prototipskom lancu nasljedjivanja.

let arr = [];
console.log(arr.__proto__); // Array.prototype 
console.log(arr.__proto__.__proto__); // Object.prototype 
console.log(arr.__proto__.__proto__.__proto__); // null 

// ili

console.log(Array.prototype.__proto__); // Object.prototype
console.log(Array.prototype.__proto__.__proto__); // null

U ovom slucaju bi JavaScript engine prvo trazio metodu ili svojstvo u samom objektu, potom u Array.prototype, pa u Object.prototype i nakon toga dobijamo gresku ukoliko ga ne nadje negdje u lancu.

Sta se nalazi u Array.__proto__?
Array je konstruktor, a konstruktor je funkcija. Sve funkcije (zajedno sa konstruktorima) za svoj [[Prototype]] imaju Function.prototype.

Array.__proto__ === Function.prototype; // true

Funkcija je objekat i ona ima referencu na Object.prototype.

Array.__proto__.__proto__ === Object.prototype; // true

Sada kada znamo kako pristupiti globalnim prototipima, napomenucu da treba izbjegavati mijenjanje izvornih prototipa da bi izbjegli konflikte usljed imenovanja. Medjutim, modifikacija metoda prototipa moze biti korisna za polifilovanje (kreiranje zamjenske metode koja postoji u JavaScript specifikaciji u pretrazivacu koji je jos nije implementirao).

if (!Array.prototype.join) {
  Array.prototype.join = function() {...}
}

Kreiranje naseg prototipskog nasljedjivanja

Recimo da imamo konstruktor Oblik, ali ga zelimo prosiriti i iz njega izvesti nekoliko novih konstruktora raznih oblika:

function Oblik() {}
Oblik.prototype.oboji = function() {};

function Kocka() {}
Kocka.prototype = Object.create(Oblik.prototype);
// Sada je property svojstvo Kocka = Oblik.prototype
// i oboji() metoda ce biti dostupna svim objektima Kocke

Kocka.prototype.izracunajDimenzije = function() {}

let kocka = new Kocka();

Medjutim postoje ne tako ceste situacije kada zelimo novi objekat kreirati dinamicno, kada nam tip objekta nije unaprijed poznat ili zelimo kreirati objekat nekog tipa koji ce biti odredjen za vrijeme izvrsavanja koda. Tada new Kocka() nije opcija. constructor svojstvo u prototipu nam omogucuje da kreiramo novi objekat tako sto cemo koristiti postojeci objekat: new kocka.constructor().

Ali postoji mali problem ako dopisemo sledece

// ...
let kocka = new Kocka();
let kockica = new kocka.constructor();

kockica ne nasljedjuje Kocku, vec Oblik. Zasto?
Stvar je u tome kako smo izvrsili nasljedjivanje.
Kocka.prototype = Object.create(Oblik.prototype) linija koda je potpuno zamjenila sva prethodna svojstva koja su zivjela u prototype-u Kocke, a predefinisani su bili constructor i [[Prototype]]. Prvo constructor svojstvo u lancu ce biti ono od konstruktora Oblik i na njemu ce kljucna rijec new kreirati novi objekat. Ispod je vrijednost kocka objekta u konzoli console.log(kocka):

×  Kocka {}
    × [[Prototype]]: Oblik
       ~ nedostaje: constructor: ƒ Kocka()~
       > izracunajDimenzije: ƒ ()
       × [[Prototype]]: Object
          > oboji: ƒ ()
          > constructor: ƒ Oblik() 
          > [[Prototype]]: Object

Zato je dobra praksa resetovati konstruktor svojstvo nakon nasljedjivanja druge konstruktor funkcije, ovako:

Kocka.prototype = Object.create(Oblik.prototype);
// Ispod resetujemo konstruktor i dodajemo metode
// koje pripadaju Kocka prototipu
Kocka.prototype.constructor = Kocka;
Kocka.prototype.izracunajDimenzije = function() {}

Sada ce pozivanje new kocka.constructor() kreirati objekat konstruktorom Kocka.

Mozemo napisati funkciju koja ce nas spasiti ponavljanja istih linija koda kada god zelimo prosiriti neki konstruktor:

function extend(Child, Parent) {
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;
}

extend(Kocka, Oblik);

Pozivanje roditeljskog konstruktora

S obzirom da na objekat uticu nasljedjeni prototipi, trebalo bi da naslijedi i clanove, ali se to u ovom slucaju ne desava automatski. Pozvacemo roditeljsku funkciju sa Oblik.call(this, argument) da bi bila svjesna objekta na kom treba dodati clanove.

function Oblik(boja) {
	this.boja = boja;
}

function Kocka(stranicaA, boja) {
	Oblik.call(this, boja);
	this.stranicaA = stranicaA;
}

Kocka.prototype = Object.create(Oblik.prototype);
Kocka.prototype.constructor = Kocka;

let kocka = new Kocka(50, 'crvena'); 
// kocka = { stranicaA: 50, boja: crvena }

.call() metoda poziva funkciju sa datom this vrijednosti i argumentima. Proslijedili smo joj novi objekat kao this. Da smo pozvali funkciju sa Oblik(boja), this bi u funkciji pokazivao na globalni objekat (window u pretrazivacu), sto znaci da bi svojstvo boje bilo dodjeljeno globalnom objektu: window.boja = 'crvena'.

Sintaksa: fn.call(thisObj, arg, /*...,*/, argN).

Ali, ako ne zelimo dodavati clanove nekih klasa direktno u objekat, vec u prototip, tada prototipu mozemo dodjeliti novu instancu Oblik konstruktor Kocka.prototype = new Oblik();

function Oblik() {
	this.boja = 'crna';
}

Oblik.prototype.nacrtaj = function() {
	console.log(this.boja + ' ' + this.constructor.name);
}

function Kocka(stranicaA) {
	this.stranicaA = stranicaA;
}

Kocka.prototype = new Oblik(); // ***
Kocka.prototype.constructor = Kocka;

let kocka = new Kocka(50); 
kocka.nacrtaj(); // crna kocka

U konzoli kocka izgleda ovako:

×  Kocka {}
      stranicaA: 50
    × [[Prototype]]: Oblik
         boja: "crna"
       > constructor: ƒ Kocka(stranicaA)
       × [[Prototype]]: Object
          > nacrtaj: ƒ ()
          > constructor: ƒ Oblik() 
          > [[Prototype]]: Object

Rekreiranje `new` operatora

Da bi bolje razumjeli kako new radi, pravicemo se da ne postoji i rekreirati njegove korake. Pravimo funkciju koja:

kreira prazan objekat na koji this pokazuje
novom objektu definise [[Prototype]]
nastanjuje novi objekat svojstvima this.property = value
vraca novi objekat

// konstruktor
function Person(name) {  
  this.name = name;
}

Person.prototype.talk = function() {
  console.log('My name is ' + this.name);
};

// Funkcija imitira new
function newF(constructor, ...args) {
  let obj = {}; 
  Object.setPrototypeOf(obj, constructor.prototype);
  constructor.apply(obj, args);
  return obj;
}

var person1 = newF(Person, 'Ike'); 
// person1 = { name: 'Ike', __proto__: Person.prototype }

var person2 = new Person('Vana');
// person1 = { name: 'Vana', __proto__: Person.prototype }

person1.talk(); // My name is Ike
person2.talk(); // My name is Vana

Posudjivanje metode od prototipa:

Ispod zelimo metodu niza .join() primjeniti na objekat koji nije niz.

function person() {
  console.log(arguments.join(' ')); 
  // arguments.join is not a function
  console.log(arguments.__proto__ === Object.prototype); // true
}

person('Ike', 'Barlowe');

arguments objekat sam po sebi je samo array-like, sto znaci da nije pravi niz (array) vec lici na njega jer ima indekse i length svojstvo. Po kreiranju za [[Prototype]] nasljedjuje Object.prototype i u svom prototipskom lancu nema metode koje rade sa nizovima.

Iz ovog razloga arguments.join(' ') izaziva gresku arguments.join is not a function. Medjutim, vecini metoda iz Array.prototype su samo potrebne vrijednosti sa indexima i svojstvo length, ne i da se radi o pravim nizovima. Problem je u tome sto arguments objekat nije kreiran kao niz i za prototip nije naslijedio Array.prototype od konstruktora. Prema tome je dovoljno da arguments objektu join() metodu ucinimo dostupnom.

person('Ike', 'Barlowe');

function person() {
  arguments.__proto__ = Array.prototype;
  // Arguments [[Prototype]] sada pokazuje na Array.prototype
  console.log(arguments.join(' ')); // Ike Barlowe

  console.dir(arguments);
}

Ispis arguments objekta u konzoli:

× Arguments(2)
    0: "Ike"
    1: "Barlowe"
  > callee: ƒ person()
    length: 2
  > Symbol(Symbol.iterator): ƒ values()
  × [[Prototype]]: Array(0)
     > at: ƒ at()
     > concat: ƒ concat()
       ...

Umjesto modifikovanja prototipa objekta, moguce je samo uvesti potrebnu metodu u objekat.

function person() {
  arguments.join = Array.prototype.join
  ...

× Arguments(2)
    0: "Ike"
    1: "Barlowe"
  > join: ƒ join()
  > callee: ƒ person()
    length: 2
  > Symbol(Symbol.iterator): ƒ values()
  × [[Prototype]]: Object
     > constructor: ƒ Object()
     > hasOwnProperty: ƒ hasOwnProperty()
       ...

Prototip je i dalje ostao Object.prototype, a join() metoda radi.

Izracunata imena svojstava

U ovakvim funkcijama mozemo primjeniti jednu od super moci uglastih zagrada []. One pruzaju opciju da definisemo ime svojstva racunanjem (nije ograniceno na klase i konstruktore, isto se moze uraditi direktno u objektu).

function Konstruktor(key, value) {
  this['Korisnikovo ' + key] = value;
}

let obj = new Konstruktor('Ime', 'Nina');
console.log(obj); // {Korisnokovo Ime: 'Nina'}

Gubljenje `this` i funkcija strelice

Jos jedan trik koji se moze izvesti u konstruktorima, klasama, ali ne i direktno u objektima.

Ukoliko neku metodu dodjelimo varijabli ona postaje nezavisna od objekta, zaboravlja na njegova ostala svojstva i this se gubi prilikom pozivanja takve funkcije. Ovo se cesto dogadja kada metodu proslijedimo funkciji kao argument.

function Konstruktor(fraza) {
  this.fraza = fraza;

  this.ispisiFrazu = function() {
    console.log('Nova fraza: ' + this.fraza);
  };
}

let obj = new Konstruktor('Dobar dan.');
let metoda = obj.ispisiFrazu;

metoda(); // Nova fraza: undefined

Pored poznatih rjesenja poput omotavanja metode u funkciju, koristenja bind metode, mozemo koristiti funciju strelice (arrow function () => {}).

// Omotavanje metode u funkciju.
let metoda = function() {
  obj.ispisiFrazu();
};
metoda(); // Dobar dan

// Bind metoda.
let metoda = obj.ispisiFrazu.bind(obj);
metoda(); // Dobar dan

// Definisanje metode sa funkcijom strelice:
function Konstruktor(fraza) {
  this.fraza = fraza;

  this.ispisiFrazu = () => {
    console.log('Nova fraza: ' + this.fraza);
  };
}

let obj = new Konstruktor('Dobar dan.');
let metoda = obj.ispisiFrazu;

metoda(); // Nova fraza: Dobar dan

Ovo radi jer je vrijednost this u funkciji strelice odredjena na osnovu vanjskog leksickog opsega. Funkcija strelice nema svoj this kao obicna funkcija. Ovaj isti trik ne radi u objektima zbog leksickog opsega za this.

let obj = {
  fraza: 'Dobar dan',
  ispisiFrazu: () => {
    console.log('Nova fraza: ' + this.fraza);
  }
};

let metoda = obj.ispisiFrazu;

metoda(); // Nova fraza: undefined

Buduci da objekat ne stvara novi leksicki opseg, funkcija strelice ce traziti vrijednost za this izvan objekta.

let obj = {
  vrijednostThis: this
};

console.log(obj); // {vrijednostThis: Window}

this pokazuje na Window globalni objekat u kom ne postoji svojstvo fraza i za rezultat JavaScript engine vraca vrijednost undefined.

Quokka za debagovanje JavaScript-a

2022-11-02T17:00:00Z

Vjerovatno kasnim na zurku, ali za one koji ne znaju:

Quokka.js je alat za produktivnost i brz pregled rezultata koda (JavaScript-a i TypeScript-a). Vrijednosti se azuriraju u realnom vremenu, paralelno sa pisanjem koda i prikazuju unutar integrisanog radnog okruzenja (engl. Integrated development environment, IDE).

Ekstenzija je dostupna za VS Code, JetBrains i Sublime Text.

Umjesto podesavanja automatizovanog testiranja za svaku napisanu liniju koda, nekada je prakticnije rezultat provuci kroz console.log (iako ni to nije idealno rjesenje jer zahtjeva dodatne korake). Svrha Quokka.js ekstenzije je da smanji otpor i oslobodi vrijeme za fokus na pisanje koda, ucenje, istrazivanje, testiranje ideja i novih funkcija.

Kod se izvrsava u toku kucanja, a greske se prikazuju pored koda koji ih uzrokuje.

Indikatori sa lijeve strane numerisanih linija su uvijek azurirane u realnom vremenu i odnose se na izvrsavanje koda. Crvena ukazuje na gresku, zelena na izvrsen kod, zuta na djelimicno izvrsen i siva na neizvrsen kod.

Boje sa lijeve strane koda su indikatori pokrivenosti i izvrsenja koda.

Sve opcije ekstenzije se mogu istraziti ispod, ali su neke u sklopu komercijalne "PRO" verzije sa jos naprednih funkcija. Besplatna verzija je dovoljno dobra da mi bude zao jer nisam ranije otkrila ekstenziju.

Funkcije su objekti

2022-10-25T17:00:00Z

Postoji osam osnovnih tipova podataka u JavaScript-u. Sedam od njih su primitivni tipovi podataka (poput brojeva, teksta itd.) i osmi je neprimitivni tip — objekat, a funkcije su prvoklasni objekti koji se mogu pozvati sa zagradama () kako bi izvrsili naredbu / akciju. Drugim rijecima, moguce je raditi sa funkcijama kao sa objektima.

function sayHi() {
  console.log('Greetings');
}

sayHi(); // Greetings
console.log(typeof sayHi); // function
console.log(sayHi instanceof Object); // true

Svojstva objekta

Funkcija moze biti korisna sama po sebi i nositi bezbroj dodatnih funkcionalnosti u svojstvima.

Jedna od osobina koju funkcije dijele sa objektima su svojstva (key: value parovi i metode) koje im se mogu kreirati, modifikovati i brisati. Za one koji nisu upoznati sa ovim tipom podatka, ispod je definisan objekat sa jednim key: value parom, da bi izvan objekta pristupili tom svojstvu i izmjenili njegovu vrijednost.

let sum = {
  current: 0;
};

sum.current = 3 + 5; // modifikuje vrijednost

A ovako izgleda funkcija sum() kojoj smo dodijelili isto svojstvo koristeci tacku sum.current.

function sum(a, b) {
  sum.current = a + b; // sum.current nije varijabla
}

sum.current = 0; // definisano svojstvo objekta funkcije

sum(3, 5); 
console.dir(sum); // prikazuje svojstva objekta

Rezultat koda u konzoli:

Prikaz sum() svojstava.

Kako je ona poseban tip objekta, dodijeljena su joj neka korisna svojstva koji drugi tipovi objekata nemaju. U konzoli su prikazani sa tamnijim slovima (arguments, caller, length, name itd.). Current svojstvo nije doslo sa funkcijom, definisano je u kodu.

Duzina parametara funkcije

length svojstvo se odnosi na definisan broj parametara koje funkcija prihvata:

function add(a, b) {
  return a + b;
}

console.log(add.length); // 2

Kontekstualno ime

Name svojstvo, kako ocekujemo, daje pristup imenu funkcije.

function add(a, b) {
  return a + b;
}

console.log(add.name); // add

Cak i kada se radi o varijabli kojoj je po kreiranju dodjeljena funkcija bez imena, svojstvo name ce zakljuciti ime iz konteksta.

let add = function(a, b) {
  return a + b;
};

console.log(add.name); // add

Koje ime ce imati izraz funkcije (function expression) ako varijabli dodijelimo funkciju sa imenom?

let add = function calculate(a, b) {
  return a + b;
};

console.log(add.name); // calculate

Ili ako funkcija nije dodijeljena varijabli i nema ime?

let func = [function() {}];

console.log(func[0].name); // *crickets chirping*
console.dir(func[0]);

// ƒ anonymous()
// arguments: null
// caller: null
// length: 0
// name: ""
// prototype: {constructor: ƒ}

Prioritet uvijek ima ime deklarisano nakon kljucne rijeci function, a ako ga uopste nema - onda se radi o anonimnoj funkciji sa name: "" (vrijednost je prazan string).

Imenovani funkcijski izrazi

Deklaracija funkcije (function declaration) uvijek pocinje sa function imeFunkcije() {...}, dok izraz funkcije (function expression) omogucava kreiranje nove funkcije unutar bilo kog izraza.

let func = function() {
  // ...
};

Ovo je jedan primjer izraza funkcije jer se kreiranje funkcije desava u sklopu izraza — kroz dodjeljivanje anonimne funkcije varijabli. Izrazi zavrsavaju sa ; da bi kompajler razlikovao i odvojio izraze. Funkcija nema ime i name svojstvo ove funkcije je izvuceno iz konteksta (varijable func).

Da bi kreirali imenovani funkcijski izraz (Named Function Expression), varijabli func treba dodijeliti imenovanu funkciju:

let func = function read() {
  // ..
}

console.log(func.name); // read

Kljucna stvar kod ovakve funkcije je da ona rezervise read identifikator za unutrasnji opseg i predstavlja pouzdan nacin za pozivanje sebe. Pouzdan je jer se taj identifikator ne moze izmjeniti nakon kreiranja funkcije, cak i ako se promijeni ime varijable. Ali read identifikator je pogodan za interno pozivanje sebe jer nije dostupan izvan funkcije, dok je func ime varijable dostupno unutar i izvan funkcije i njeno ime se moze izmjeniti.

let func = function read(quote) {
  if (quote) {
    console.log(quote);
  } else {
    read("Lorem ipsum dolor sit amet.");
    // poziva sebe sa argumentom
  }
};

func(); // Lorem ipsum...

read(); 
// Uncaught ReferenceError: read is not defined

Metode funkcije

Kao i objekti, funkcije mogu imati metode, a neke su predefinisane (console.dir(add)):

  ƒ add(a, b)
  arguments: null
  caller: null
  length: 2
  name: "add"
  [[Prototype]]: ƒ ()
    bind: ƒ bind()
    toString: ƒ toString()
    Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
    get arguments: ƒ ()
    ...

func.toString() u konzoli vraca tijelo funkcije kao string.

Metoda toString() primjenjena na funkciji u konzoli.

Mnoge JavaScript biblioteke koriste ovu osobinu funkcija. jQuery biblioteka ima glavnu funkciju $ i ostale pomocne funkcije koje se vezu za nju. Na ovaj nacin se izbjegava preopterecenje globalnog prostora i konflikti imenovanja varijabli i funkcija.

Prosljedjivanje po referenci

One se prosljedjuju po referenci (pass by reference) kao i drugi objekti (array i object), dok se primitivni tipovi podataka (svi ostali) prosljedjuju po vrijednosti. Ovdje je detaljnije objasnjeno sta to znaci i kako se razlikuju.

U sustini, kada varijabli dodijelimo funkciju, ona ne dobija kopiju funkcije, vec referencu koja pokazuje na mjesto u memoriji gdje se ona nalazi. Tako dvije varijable imaju razlicita imena iako pristupaju istoj funkciji.

let book = function() {
  // ...
}

var book2 = book;
book.author = "Ana";

console.log(book.author); // Ana
console.log(book2.author); // Ana

book2.author = "Vana";

console.log(book.author); // Vana
console.log(book2.author); // Vana

Funkcije se mogu prosljedjivati kao argumenti drugim funkcijama. I u ovom slucaju argumenti su referenca na funkciju, ne njena kopija.

function calculate(callback, x, y) {
    let result = callback(x, y);
    console.log(result);
}

function add(x, y) {
    return x + y;
}

function multiply(x, y) {
    return x * y;
}

calculate(add, 2, 3);      // => 5
calculate(multiply, 2, 3); // => 6

Proslijediti po referenci ili vrijednosti

2022-10-21T17:00:00Z

Vrijednosti u JavaScript-u su uvijek odredjenog tipa. Primitivni tip podataka su najsonovniji oblici vrijednosti (string, number, bigint, boolean, null, undefined, symbol) i oni se proslijede po vrijednosti / kopira se podatak.
Sa druge strane, svi objekti (kao obicni objekti, nizovi i funkcije) se proslijede po referenci / ne radi se o kopiji.

Sta to znaci?
Primitivni podaci se prosljedjuju po vrijednosti jer varijabla sadrzi sam podatak (kao broj ili tekst), dok se objekti prosljedjuju po referenci jer varijabla u sebi drzi referencu / adresu na kojoj se podatak nalazi.

let a = 7;
let b = a; // prosljedjivanje vrijednosti
b = b + 8; // b = 15; a = 7;

let c = {name: 'Jane'}; // kreiranje objekta
let d = c; // prosljedjivanje po referenci
d.lastName = 'Doe'; // objekat dobija novo svojstvo

console.log(c); // {name: 'Jane', lastName: 'Doe'}

Varijabla	Vrijednost		Adresa	Vrijednost
a	7	/	0x01	{name: 'Jane', lastName: 'Doe'}
b	15	/
c	0x01	/
d	0x01	/

Vazi i obrnuto. Izmjena c varijable bi promijenila d varijablu kako obe pokazuju na istu vrijednost.

Medjutim, treba imati na umu da prijenos po referenci znaci da:

let obj1 = {} // 0x01
let obj2 = {}; // 0x02

console.log(obj1 == obj2); // false
console.log({} == {}); // false

// ali

let obj3 = obj1; // 0x01
        
console.log(obj1 == obj3); // true

Svaki put kada kreiramo objekat, on je zaseban i cuva se na novoj adresi. Tako {} == {} je false jer nisu identicni objekti (0x01 =/= 0x02), dok obj1 == obj3 jesu jer imaju istu referencu (0x01).

let c = {}; // 0x01
let d = c; // 0x01
d.name = 'Jane'; // 0x01 dobija novo svojstvo
d = {author: 'Joe'}; // 0x02 definisan je novi objekat

console.log(c); // {name: 'Jane'}
console.log(d); // {author: 'Joe'}

Znakom jednakosti je varijabli d dodijeljen objekat {} sa desne strane. c i d vise ne pokazuju na isti objekat i modifikovanje vrijednosti jedne varijable nece uticati na vrijednost druge.

Varijabla	Vrijednost		Adresa	Vrijednost
c	0x01	/	0x01	{name: 'Jane'}
d	0x02	/	0x02	{author: 'Joe'}

Funkcija

Okolnosti u kojima se prijenos po vrijednosti i referenci jos primjenjuje je u funkcijama. Kroz argumente smo, u kodu ispod, funkciji proslijedili objekat i vrijednost 43.

let employee = {name: 'Jane'}; // 0x01
let a = 43;

function addAge(person, age) {
  person.isOld = age; 
 // 0x01.isOld = 43;
}

addAge(employee, a); // 0x01, 43

console.log(employee); // {name: 'Jane', isOld: 43}

Objekat nije primitivni tip podatka i prenosi se po referenci, te mu je dodano svojstvo isOld kroz adresu koja pokazuje gdje se nalazi objekat 0x01 u memoriji.
Sa druge strane, varijabla age koja sadrzi podatak primitivnog tipa nije proslijedjena kroz referencu, vec je kopirana u funkciju i postoji samo lokalno.

Sta ako varijabli person kojoj je proslijedjen objekat 0x01 dodijelimo novi objekat? Hoce li se globalni objekat employee promijeniti?

let employee = {name: 'Jane'}; // 0x01
let a = 43;

function addAge(person, age) {
  person = {age: age};
 // 0x02 = {age: 43};
}

addAge(employee, a); // 0x01, 43

console.log(employee); // {name: 'Jane'}

person vise nema referencu na 0x01 i kroz tu varijablu ne mozemo izmjeniti employee objekat, samo lokalni person objekat na lokaciji 0x02.

Razlika izmedju let i var

2022-10-18T17:00:00Z

Postoje tri nacina da se deklarise varijabla: let, const i var.
const i let su se pojavili sa ES6 u 2015. godini, dok se var koristio od ranih dana JavaScript-a.
Razlika izmedju cont i let je ta da je vrijednost const varijable nepromjenjiva. let varijabla nije jednako striktna i ona ce prihvatiti drugu vrijednost ako joj je dodijelimo, kao i var varijabla.
Osim toga, varijable deklarisane sa kljucnom rijeci const se ponasaju kao i let. Ono sto vazi za jednu, vazi i za drugu kljucnu rijec.

const poruka = true;
poruka = false; 
// Uncaught TypeError: Assignment to constant variable.
// Cannot assign to "poruka" because it is a constant

Iako u vecini slucajeva mozemo zamijeniti let i var i ocekivati da kod radi, princip rada se razlikuje. let se cesce koristi u modernijim skriptama jer var predstavlja njegovog prethodnika, dok drugi misle da var i dalje moze imati znacajnu ulogu u pisanju kvalitetnog i jednostavnijeg koda.

"var" i "let" opseg

var varijable imaju opseg funkcije ili globalni opseg ako su definisane izvan funkcije, ali su vidljive kroz blokove {}, uslovne izjave (if) i petlje (while i for loops). U primjeru ispod var varijabla ne bi bila vidljiva u globalnom opsegu da se nalazi u funkciji. Sa druge strane, let varijabla ima opseg bloka {} (bilo kojih viticastih zagrada).

Opseg se odnosi na trenutni kontekst koda, koji odredjuje dostupnost varijabli u JavaScript-u. Vise o ovim konceptima u closures i execution context clancima.

{
  var poruka = true;
  let email = 'email@email.com';
}

console.log(poruka); // true
console.log(email); 
// Uncaught ReferenceError: email is not defined

var varijabla je vidljiva kroz blokove jer nekada u JavaScript-u blokovi nisu imali leksicka okruzenja.

function brojanje() {
  for(var i = 0; i < 10; i++) {
    console.log(i); // 1 2 3 4 5 6 7 8 9
  }
  console.log(i); 
  // 10
}

brojanje();

U sledecem primjeru varijabla i je dostupna samo unutar for petlje jer je deklarisana sa kljucnom rijeci let.

function brojanje() {
  for(let i = 0; i < 10; i++) {
    console.log(i); // 1 2 3 4 5 6 7 8 9
  }
  console.log(i);
  // Uncaught ReferenceError: i is not defined
}

brojanje();

Hoisting varijabli

U prevodu hoisting znaci podizanje, a odnosi se na proces kojim JavaScript engine podize deklaracije varijable na vrh njihovog opsega, prije izvrsenja koda. Posljedicno se deklaracije mogu napisati nakon sto je varijabla koristena ili joj je vrijednost dodijeljena.

function ispisImena() {
  ime = "Ana";

  console.log(ime); // Ana

  if (false) { 
    var ime; // var je funcijskog opsega
  }
}
ispisImena();

Je isto kao i:

function ispisImena() {
  var ime;
  ime = "Ana";

  console.log(ime); // Ana
}

ispisImena();

Iako su deklaracije podignute, dodijeljene vrijednosti nisu. var varijable imaju undefined vrijednost do linije u kojoj joj je dodijeljena = neka druga.

function ispisImena() {
  console.log(ime); // undefined

  var ime = 'Ivan';
}

Sve ovo ovo ne vazi i za let varijable. Iako se podizu na vrh bloka i JavaScript engine je svjestan da su tu, one imaju neinicijalizovano stanje i nalaze se u privremenoj mrtvoj zoni (temporal dead zone) sve do deklaracije varijable — gotovo kao da varijabla ne postoji.

let ime = 'Marko';

function ispisiIme() {
  console.log(ime); 
  // ReferenceError: 
  // Cannot access 'ime' before initialization
  let ime = 'Ian'; 
}

ispisiIme();

console.log(nepostojecaVarijabla);
// Uncaught ReferenceError: 
// nepostojecaVarijabla is not defined

Ponovno deklarisanje

Ponovno deklarisanje let varijable u istom opsegu nije dozvoljeno.

var email;
var email; // radi 👍

let poruka;
let poruka; 
// SyntaxError: 'poruka' has already been declared

Svojstvo globalnog objekta

U globalnom opsegu var varijabla postaje svojstvo globalnog objekta (osim ako koristimo module). Sa let to nije slucaj.

var poruka = true;
let email = "@email.com";

console.log(window.poruka); // true
console.log(window.email); // undefined

"var" ili "let"?

Kyle Simpson u "You Don't Know JS" preporucuje da se var koristi za one varijable koje trebaju imati funcijski opseg, a let kada ga treba ograniciti na trenutni blok {}. Drugi smatraju da je var greska dizajna koja prividno ciniti stvari "jednostavnijima", ali ih zapravo komplikuje. Ukoliko zelite varijablu u opsegu funkcije dovoljno je let deklarisati u funkciji i bice na raspolaganju ugnijezdenim blokovima.

function brojanje() {
  let i = 0;
  for(; i < 10; i++) {
    console.log(i); // 1 2 3 4 5 6 7 8 9
  }
  console.log(i);
  // 10
}

brojanje();

Ili ukoliko zelite dodijeliti vrijednost varijabli pod odredjenim uslovima:

let isEmpty;

if(true) {
  isEmpty = true;
}

check(isEmpty);

Sazetak

Poredjenje var, let i conts varijabli.

Eagle — biblioteka za organizaciju medija

2022-10-10T17:00:00Z

Eagle korisnicki interfejs.

Eagle desktop aplikacija se mozda najvise plasira dizajnerima kako ima siri obim trikova za slike i omogucava kreiranje efikasnih digitalnih biblioteka, ali to bi ogranicilo njegovu primjenjivost jer podrzava razne formate medija (kao dokument, font, audio, video, 3D, gif itd.). Super moc ove aplikacije je organizacija i ⚡ brza pretraga kroz hiljade fajlova (po folderima, kategorijama, ocjenama, formatu fajla, boji koja preovladava, datumu, velicini, trajanju, biljeskama, URL-u itd).

Neki bi ga cak mogli nazvati i nindza File Explorer!

Zasto je tema Eagle?
TLDR: Jer nisam znala da mi treba dok ga nisam otkrila.

Ispod cu navesti neke od razloga zasto me je osvojio, ali u obliku bez previse standardne strukture. Pravicu se da smo na kafi, pricati o osobinama koje se isticu jer volimo hvaliti ono sto nam se dopada i mozda ce tekst nekome pomoci da prepozna da li mu nesto slicno uopste treba.

Web dizajn inspiracija

Isprva sam vidjela vrijednost Eagla za skupljanje i organizaciju web dizajn inspiracije zbog brzih snimaka ekrana stranica koje mi se svide i automatizovano cuvanje URL adrese u meta podacima ali i grabljenje slika sa Dribble, Behance i Pinteresta, cuvanje fontova itd. Pohrana sadrzaja sa pretrazivaca trenutno mozda najcesce koristim.

Chrome Eagle ekstenzija pravi snimak stranice i pohranjuje ga u biblioteci.

Ali i bez ekstenzije Eagle moze da pravi snimke ekrana. Ako instaliras aplikaciju probaj Ctrl + Alt + E. Ova kombinacija nudi dodatne alate kao dodavanje teksta, anotacija, zamucenje dijelova slike, olovku itd. Ovako pravim snimke ekrana kada ono sto zelim nije u sklopu pretrazivaca ili kada zelim na najjednostavniji nacin zamutiti dijelove slike. Alternativa bi bila da sacuvam sliku na racunar i uredim je u Adobe programu (radije ne).

Eagle ekstenzija nudi cuvanje snimaka vidljivog dijela stranice, citave stranice, samo regije, jedne ili grupe fotografija simultano kroz svoju ekstenziju koja postoji za najpopularnije pretrazivace (ako takve koristis).
— Lijevim klikom na sliku (ili .mp4 format za sada) i prevlacenjem se aktivira prozor za cuvanje medija u biblioteci (ili u specificnom folderu po izboru).

Drag and drop aktivira Eagle prozor za cuvanje fotografije.

Jedan mali simpaticni trik za web dizajnere: U ekstenziji postoji opcije "Capture Area" i svi znamo sta ona radi, ali ako u tom modu drzim Ctrl dok zadrzavam strelicu iznad nekog html elementa - ekstenzija ce ga sama selektovati i snimiti dok bih ja jos rucno pokusavala prilagoditi i popraviti ivice tako da prostor oko elementa bude "normalne velicine".

Eagle ekstenzija selektuje HTML elemente u "Capture Area" rezimu uz Ctrl dugme.

Eagle, izmedju ostalog, na desnoj bocnoj traci nudi generisanu paletu boja koje preovladavaju na slici, polje za biljeske, a ekstenzija je popunila URL adresu tako da se jednim klikom moze vratiti na izvor na kom je medij pronadjen. Ova super moc bi me spasila bezbroj puta.

Desni sidebar prikazuje vise detalja o fajlu (ili folderu).

Biblioteka licnih fajlova

Kako vise ucim o Eaglu, hvatam se da mi ideja kreiranja biblioteke u kojoj bih mogla organizovati sve one slike, videe, audio zapise, digitalne knjige koje su skupljane jos od prvog racunara koji smo imali izaziva euforiju. Ti fajlovi jesu "organizovani" u folderima ali se, ako cu biti iskrena, plasim zaviriti u hrpu nostalgicnog sadrzaja.

Strasni sistemi za organizovanje fajlova (derogatory)

Jedan od glavnih razloga zasto me je Eagle osvojio je jer su moji sistemi do sada bili "File Explorer" 📁 i "kreiranje kolekcija".

Medjutim, sistem foldera je vrlo bolan za pregled medija i nedostaje mu brzina u svakom aspektu od pregleda, do organizacije i pretrage, niti postoji jednostavan nacin za cuvati dodatne podatke uz medij.
Kolekcije nisu prakticne kako inspiraciju trazim na nekoliko razlicitih lokacija, ali i njima nedostaje brzina pretrage i dodatne opcije za organizaciju. Na kraju neke slike zavrse na racunaru u folderima, neke inspiracije u kolekcijama a neke u bookmark traci. Ni jedan od ovih sistema nije bio ~dovoljno odrziv i trosi mnogo vremena.

Vecina rjesenja za ove prituzbe su vec upakovane u Eagle i prekrasan je za pregled hiljade slika i drugih medija. Male generisane slicice daju bolji uvid i dodatne informacije za razlikovanje sadrzaja. Vise pregledanja i manipulacije sadrzaja, manje trazenja i cekanja da se originalni fajl ucita.

Pretrazivanje i organizacija

U filter traci iznad liste slika i fajlova su smjestene razne opcije za pretragu. Sistemi organizovanja vise nisu ograniceni na foldere ili naziv fajla, vec ovise o granicama dosjetljivosti ali necemo zanemariti da je svaki fajl moguce staviti u vise kategorija i foldera.

Eagle opcije za pretragu.

Klik lupe u search baru otkriva meni iz kog mogu birati da li zelim pretraziti po imenu fajla, foldera, opisu foldera, ekstenziji/formatu, tagovima, URL-u, komentaru i biljeskama. Moje biblioteke jos nisu toliko velike i ostavim sve ove opcije ukljucene kako sam sigurna da cu pronaci ono sto trazim.

Ostavljanje komentara na fotografiji i pretraga po njemu.

(Nisam se potpuno navikla na brzinu kojom je moguce pronaci, otvoriti fajl i izmjeniti meta podatke. Mozda zvuci kao da pretjerujem ali moji folderi su bili traumaticno iskustvo.)

Na snimku iznad, pored olovke za komentarisanje postoje jos neki alati poput isjecanja.
Sa lijeve strane je traka sa folderima i drugim kategorizacijama. Izmijenila sam boje i ikonice foldera da bi se vizuelno razlikovali, a Eagle omogucava kreiranje hijerarhiju foldera po volji. Ni lijeva traka ne zahtjeva neko posebno objasnjavanje jer su interfejs i korisnicko iskustvo intuitivni. Ono sto ocekujem da postoji se nalazi tamo gdje ocekujem da ce biti.

Mozda Smart Folders ostavlja prostor za pogadjanje funkcionalnosti, ali je ona zapravo jednostavna. Kada strelicu misa pomjerim iznad te opcije sa desne strane se pojavi plusic. Plusic znaci kreiranje novog pametnog foldera koji nudi opcije za definisanje pravila.

Recimo, kako bi pametni folder umjesto mene birao headere dovoljno siroke za desktop web stranicu - navela sam da sadrzi slike sire od 1920px iz header foldera. Drugi primjer bi bio da sve fajlove koji u sebi imaju naziv "Screenshot" budu dio Screenshot foldera.

Prozor za kreiranje pametnog foldera u Eaglu uz definisanje pravila.

Pomenula sam i tagove. Oni su tu da pojednostave hijerarhiju foldera kada ih koristim istovremeno. Medjutim, broj tagova raste velikom brzinom i da ih ne bi trazila po hrpi grupisem ih po konceptima.

Recimo, po folderima sam razdjelila inspiraciju u ovisnosti od koje stranice se radi: homepage, post, about, header, footer itd. Sa tagovima sam ih podijelila po dizajnu i namjeni kao: mobile, blog, portfolio, magazin, online prodavnica, dogadjaj, servis/prozivod, hrana, kompanija, moda itd.

Grupisanje i organizacija tagova.

Ako zelim da pronadjem pocetne stranice bloga - izaberem "homepage" folder i "blog" tag.

Filtriranje fajlova u Eaglu po folderu i tagovima.

Eagle-fast

Eagle folderi ne rade kao folderi na racunaru. Iako vise foldera u biblioteci ove aplikacije mogu imati istu fotografiju, ona se fizicki nalazi na samo jednoj lokaciji.

Recimo da smo importovali bilo koju sliku u biblioteku. U tom trenutku je kreiran folder sa originalanim fajlom, generisanim thumbnailom za brzi pregled i .json fajlom u kom se cuvaju svi podaci vezani za importovan medij. Tu vidimo meta podatke po kojima Eagle omogucava ⚡ pretragu cak i po boji. Ukoliko joj dodamo biljesku, tagove ili vise razlicitih foldera, promjena ce se oslikati u .json fajlu medija.

{
  "id":"L8KJH4YUE4RW2",
  "name":"York Mediale graphic",
  "size":220816,
  "height":2520,
  "width":2520,
  "ext":"png",
  "tags":["clean"],
  "annotation":"Art, meet the future.",
  "folders":["L8KJHHY1DJ5KR","L8LUQA4MLNUBT"],
  "isDeleted":false,
  "url":"https://pinterest.com/some-photo/3f6a5d.png",
  "modificationTime":1664303740597,
  "palettes":[
    {"color":[212,212,227],"ratio":93,"$$hashKey":"object:89111"},
    {"color":[42,42,48],"ratio":2.18,"$$hashKey":"object:89112"},
    {"color":[133,135,143],"ratio":1.4,"$$hashKey":"object:89113"},
    {"color":[168,169,177],"ratio":1.08,"$$hashKey":"object:89114"},
    {"color":[180,180,189],"ratio":0.49,"$$hashKey":"object:89115"},
    {"color":[108,108,116],"ratio":0.35,"$$hashKey":"object:89116"},
    {"color":[156,156,163],"ratio":0.32,"$$hashKey":"object:89117"}
  ],
  "mtime":1664303740520,
  "btime":1664303740520,
  "lastModified":1665086421573
}

Mobilnost medija

Ako probas Eagle mozda primjetis da iako se sve zavrsi uz par klikova, mnogo toga moze zamijeniti i prevlacenje.

Prevlacenjem thumbnaila u drugo okruzenje kopira originalni fajl.

U biblioteci radije drzim originalne fajlove u punoj rezoluciji i sto boljoj kvaliteti. Za web su ovakvi fajlovi preteski. Kada zelim neke slike koristiti na webu, oznacim njihov thumbnail (dok drzim Ctrl) i prevucem na web stranicu ili softver koji ce fajlove kompresovati za mene i Eagle ce automatski kopirati originalne fajlove u zadano okruzenje.

Za importovanje vazi isto, ali mi se cini da nisam napomenula da Eagle podrzava mnoge izvorne formate drugih aplikacija kao Illustrator, Figma i AutoCad.

Prevlacenjem fajla u Eagle ga importuje u trenutnu biblioteku.

A prevlacenjem nekog foldera sa racunara u lijevu traku Eagle aplikacije kopira identicnu hijerarhiju foldera koja se nalazi u njemu i njegov sadrzaj. Ono sto mozes nauciti iz mojih gresaka je da prevlacenje foldera na sredinu ne kopira hijerarhiju foldera, samo fajlove koje folderi sadrze.

Eksportovanje slika po dimenzijama i formatu

Aplikacija nudi eksportovanje citave biblioteke u formi obicnih foldera ili kao biblioteku za Eagle aplikaciju. To je ono sto ocekujemo, ali u ovom tekstu ne govorim o obicnom eksportovanju koje je norma za mnoge aplikacije. Ovo je zgodan trik za web dizajnere kada su potrebne slike u odredjenom formatu i dimenzijama. Kako to izgleda?

Prvo oznacim sve slike koje zelim eksportovati u odredjenom obliku. U desnoj traci na dnu se nalazi dugme "Export..". On nudi tri opcije i prve dvije su one "standardne". Treca je "Export in Specified Format/Dimension". Voilà.

Eagle prozor u kom se definisu format i dimenzije za eksportovanje izabranih slika.

Biblioteka na oblaku

Eagle biblioteku pohranjuje lokalno, a trenutno aplikaciju imam na laptopu i racunaru. Nekada ove uredjaje koristim naizmjenicno, ali cesto i istovremeno. Zato biblioteke kojim zelim imati pristup na vise uredjaja (i cak dijeliti sa drugima) cuvam u OneDrive folderu. Bez obzira na kom uredjaju radim, sve promjene koje napravim ce se oslikati i na drugom uredjaju (bar dok imam internet).

💡 Za one koji razmatraju sigurnost: Iako Eagle nudi opciju zakljucavanje aplikacije i zasebnih foldera unutar aplikacije, otvaranjem Eagle biblioteke kroz File Explorer je moguc (nepregledan) pristup fajlovima. Bilo bi korisno kada bi zakljucavanje uskratilo pristup fajlovima potpuno. Medjutim, postoje drugi alternativni nacini da se zastite folderi na racunaru.

Desava se da zelim iste fajlove koje su smjeseteni u lokalnoj biblioteci imati na onoj na ☁️. Oznacim sve fajlove koje zelim podijeliti, desni klik na jedan od oznacenih fajlova za prikaz menija i biram "Add to Other Library..".

Kombinovanje slika u jednu

Kada nadjem odgovarajuci dizajn za stranicu i njenu mobilnu verziju zelim ih spojiti zbog preglednosti.
Dok drzim Ctrl, lijevim klikom biram slike koje zelim grupisati u jednu. Potom desnim klikom otvaram meni i pored "More" opcije biram "Combine Images". Red selektovanja slika je vazan jer ga Eagle koristi za redoslijed kojim ih spaja.

Sjedinjenje nekoliko slika u jednu.

Pretraga po slici

Eagle pretraga interneta po slici.

Ovo je opcija koju nisam ocekivala i koja me je odusevila jer je proces (od kojeg je Eagle napravio dva brza klika) prije izgledao ovako:

Nekada pronadjem sliku koja mi se svidja ali ona bude premalih dimenzija. Da bih pronasla vecu - pretrazim internet po toj slici. Prvo pronadjem Google images web stranicu, izaberem "Search by image" opciju i nakon toga ucitam sliku sa racunara ili kopiram link fotografije. Zvuci kratko ali me je Google previse razmazio za ovo.

Fajl vec postoji

Pronalazak da u biblioteci negdje vec postoji identican fajl je sigurno prakticno u mnostvu fajlova. Nema razloga da fizicki zauzima duplo.

Eagle prozor koji pita da li korisnik zeli importovati fajl iako vec postoji u biblioteci.

A postoji i opcija za skeniranje cijele biblioteke u slucaju da je nesto promaklo.

Eagle skeniranje biblioteka u potrazi za duplikatima.

Sacuvaj URL

Mozes pohraniti URL i imati uzivo prikaz i interaktivno iskustvo web stranice iz Eagla. To je jos jedna kvalitetna opcija, ali ako mi je vazan sadrzaj ili dizajn onda se odlucim na snimak stranice pored kojeg je svakako sacuvan URL (u slucaju da stranica prestane biti dostupna ili se njen sadrzaj promijeni).

Cuvanje URL-a u Eaglu.

Prevlacenje URL adrese iz pretrazivaca ce uraditi isto.

Kada sacuvam YouTube URL desi se mali dijelic magije 🦄. Eagle ga djelimicno tretira kao video sa cim dolaze i djelimicne super moci. Ovako u galeriji imam videe koje ne moram imati na disku sa najpristupacnijim brzim pregledom (uz zvuk) koji mogu zamisliti.

Pregled YouTube URL-a u Eagle listi fajlova.

Istrazi

Postoji mnostvo opcija ali post bi bio prilicno dug kada bih navela sve a Eagle nudi sazet serijal tutorijala i bazu znanja koja je opsirnija. Ako nesto - aplikacija bi mogla nuditi previse opcija i napraviti paradoks izbora? Ali ne bih rekla jer su se potrudili da funkcije budu jednostavne i interfejs izgleda cisto. I dalje treba imati na umu da Eagle nije samo za dizajnere. Pomogao mi je da organizujem i pocistim haos u folderima na dva uredjaja, a opremljen je i trikovima za video, 3D medije, audio zapise, fontove i cak dokumente. Pusticu da istrazis i mozda te pozitivno iznenadi kao mene.

Na kraju, aplikacija dolazi u "Free trial" modelu sa 30 dana za istrazivanje, a jedna licenca je $29.95 (bar u trenutku pisanja) za dva uredjaja. Nekome bi ovo bio deal breaker i mislim da postoje popusti ali se mozda u produktivnost da uloziti ukoliko ce ti ovakav alat pomoci da radis pametno, a ne vise. + Aplikacija se aktivno razvija i njen roadmap je javan.

Ako te je zaintrigiralo, ovdje je link za preuzimanje: en.eagle.cool

Kontekst izvrsenja i leksicko okruzenje

2022-07-29T17:00:00Z

Managing complexity is the most important technical topic in software development. Steve McConnell

Kod obicno razdjelimo u smislene cjeline kako bi kontrolisali slozenost pisanja koda uz pomoc funkcija, modula, objekata itd. Tako kontekst izvrsenja omogucava JavaScript enginu da kontrolise kompleksnost interpretiranja i izvrsavanja koda.

Kontekst izvrsenja

Novi kontekst izvrsenja (Execution Context) je kreiran kad god se skripta ili funkcija izvrsava, a koristi se za pracenje stanja izvrsenja funkcije. JavaScript kod se izvrsava kroz jedan od sledecih konteksta izvrsenja:

Globalani kontekst
Kontekst funkcije
Eval - necemo diskutovati jer nije dovoljno relevantan

JavaScript engine (prevodilac ili interpreter) stvara novi kontekst kad god se sprema da izvrsi funkciju fn() {...} ili skriptu koju smo napisali, a svaka skripta pocinje sa globalnim kontekstom izvrsenja. Svaki sledeci put kada pozovemo funkciju, JS engine kreira novi kontekst izvrsenja, stavlja kontekst funkcije na vrh pozivnog steka (execution stack) i izvrsava funkciju. Ako u sklopu izvrsenja funkcije (prije nego je ona zavrsila) pozovemo drugu funkciju, kreira se novi kontekst, dodaje se na vrh pozivnog steka i nova funkcija se izvrsava. Takav tok akcija se ponavlja dok se jedna funkcija ne izvrsi do kraja i njen kontekst se izbaci iz steka. Potom kontrolu preuzima kontekst izvrsenja koji je pozvao tu funkciju.

function forward() {
  // code
}

let move = function() {
  forward();
}

move();

Pozivni stack LIFO (Last In First Out) za kod iznad se moze predstaviti ovako:

↑ [ Kontekst forward() ] ↓
↑ [ Kontekst move()    ] ↓
↑ [ Globalni kontekst  ] ↓

Struktura konteksta izvrsenja

Kontekst izvrsenja konceptualno ima strukturu koja moze izgledati zbunjujuce ali ce njene komponente biti razradjene u tekstu. 🛑: Ispod navedeni objekti postoje teoretski da bi objasnili procese i ne mozemo direktno manipulisati njima.

var executionContext = {
  variableObject: {},
  lexicalEnvironment: {},
  this: {}
}

Ono sto treba imati na umu je da svaki kreirani kontekst ima dvije faze: faza kreiranje i faza izvrsenja.

U fazi kreiranja izvrsnog konteksta

Pravi se variableObject koji sluzi za pocetno skladistenje varijabli, argumenata i deklarisanih funkcija.
Pravi se lexicalEnvironment kao kopija variableObject u ovom trenutku.
Definise se vrijednost this i pokazuje na objekat na koji se funkcija primjenjuje u tom kontekstu.

U fazi izvrsenja izvrsnog konteksta

Vrijednosti su dodijeljene
Leksicko okruzenje se koristi za razrjesenje veza i identifikatora

Pocetno skladistenje i hoisting

Varijable i funkcije su predstavljene kao svojstva sa vrijednostima unutar objekta koji zastupa kontekst. U fazi kreiranja (prije izvrsenja koda) u tom objektu var varijable imaju vrijednost undefined, a svaka deklaracija funkcije unutar konteksta je svojstvo koje pokazuje na sadrzaj funkcije i ona se automatski pohranjuje u memoriju. Ovo znaci da su deklarisane funkcije dostupne i prije nego se skripta pocne izvrsavati, ali ako pristupimo var varijabli prije nego je definisana za rezultat cemo dobiti undefined. Ovaj proces pohranjivanja varijabli i deklarisanih funkcija (function declaration) se naziva hoisting.

Hoisting je JavaScript zadano ponasanje premjestanja deklaracija na vrh. Drugim rijecima, funkcije i neke varijable se mogu koristiti prije nego su deklarisane.

console.log(hello); // undefined
var hello = 'Hello. Pleasure to meet you.';

sayHi(); // Hello. Pleasure to meet you.
function sayHi() {
  console.log('Hello. Pleasure to meet you.');
}

Kada se function expression pozove prije nego joj je dodijeljena vrijednost, tretira se kao varijabla i ima vrijednost undefined. Kada je pozovemo prije deklarisanja dobijamo gresku da varijabla nije funkcija:

sayHi(); 
// Uncaught TypeError: sayHi is not a function
var sayHi = function() {
  console.log('Hello. Pleasure to meet you.');
};

Ukoliko varijablu deklarisemo sa kljucnim rijecima let ili const hoisting nece raditi na isti nacin. Iako se varijabla podize na vrh bloka ona ima neinicijalizovano stanje i nalazi se u privremenoj mrtvoj zoni (temporal dead zone) — gotovo kao da varijabla ne postoji.

console.log(word); 
// Uncaught ReferenceError: 
// Cannot access 'word' before initialization
let word = 'Oui.'; 

console.log(nonExistingVariable);
// Uncaught ReferenceError: 
// nonExistingVariable is not defined

Razlika izmedju nepostojece i neinicijalizovane varijable je u tome sto je JavaScript engine svjestan varijable ali je neupotrebljiva do njene deklaracije. Znamo da je svjestan varijable jer u kodu ispod dobijamo gresku da ne mozemo pristupiti varijabli name prije inicijalizacije iako je vec jedna varijabla sa istim imenom definisana izvan funkcije.

let name = 'Mark';

function logName() {
  console.log(name); 
  // ReferenceError: 
  // Cannot access 'name' before initialization
  // Zona privremene neupotrebljivosti varijable je
  // TDZ ili Temporal Dead Zone
  let name = 'Ian'; // 
}

logName();

Leksicko okruzenje

Svaka skripta, funkcija fn() {...} i blok koda {...} koji napisemo ima skriveni objekat variableObject o kom smo maloprije govorili. Sadrzaj tog objekta se u fazi kreiranja kopira u lexicalEnvironment objekat i predstavlja leksicko okruzenje. Ovaj objekat se sastoji od

environmentRecord ili zapisanog stanja lokalnog okruzenja ukljucujuci argumente, deklaracije funkcija i varijable. Ovaj objekat cuva zapisana svojstva u kojem je funkcija kreirana bez obzira gdje je pozvana. Da bi azurirali varijablu, neophodno je promijeniti svojstvo leksickog okruzenja u kom zivi.
Referencu na vanjsko leksicko okruzenje, odnosno roditeljski blok koda. Globalni kontekst nema roditeljski opseg i u tom slucaju je vrijednost reference null.

Zato funkcija definisana unutar druge funkcije ima pristup roditeljskim varijablama, ne i obrnuto. Ovo ponasanje se naziva leksicki opseg (lexical scoping) koji je kljucan za zatvorenja (closures).

var phrase = 'Pleasure to meet you';

function sayHi() {
  var name = 'Summer';
  console.log(phrase + ' ' + name + '.'); 
}

sayHi(); // Pleasure to meet you Summer.

// Globalno leksicko okruzenje u fazi izvrsenja
globalLEnvironment = {
  environmentRecord: {
    phrase: 'Pleasure to meet you',
    sayHi: fn() {...}
  },
  outer: null // nema roditeljskog bloka
};

// Leksicko okruzenje sayHi funkcije
sayHiLEnvironment = {
  environmentRecord: {
    name: 'Summer'
  },
  outer: globalLEnvironment
};

Koje vrijednosti su varijable phrase i name imale u fazi kreiranja a koju sayHi?
Hint: hoisting - varijable u fazi kreiranja imaju vrijednost undefined. Funkcija ima istu vrijednost.

Kako identifikator phrase ne postoji u sayHi kontekstu moramo pogledati u roditeljski blok koji je naznacen u leksickom okruzenju. Ovaj proces se ponavlja dok se identifikataor ne razrjesi. Ako identifikator nije pronadjen ni u globalnom kontekstu dobicemo ReferenceError. Ovaj postupak se naziva razrjesenje identifikatora.

lexicalEnvironment objekat se cuva u memoriji dok traje izvrsavanje funkcije ili dok postoji referenca na njega. Ako je funkcija zavrsila, ali postoji referenca na njeno leksicko okruzenje onda je jos u memoriji.

function hello() {
  let greeting = 'Hello';

  return function() {
    console.log(greeting);
  }
}

let sayHi = hello(); // kreaira novi sayHiEnvironment
// referencu na leksicko okruzenje hello()
// vrijednosti se cuvaju u memoriji dok sayHi postoji

sayHi = null; // leksicko okruzenje vise nije u memoriji

🛑 JavaScript engine nekih pretrazivaca moze dalje optimizovati i brisati svojstva ovog objekta iz memorije ukoliko optimizacija ne remeti rad aplikacije.

Zatvorenja

Zatvorenja su funkcije koje imaju referencu ka varijablama u vanjskom opsegu iz svog unutrasnjeg opsega i ako niste dosli sa tog clanka — vise o njima se moze pronaci u Sta je closure u racunarskom programiranju?

Vizuelni prikaz izvrsnog konteksta i ostalih tema

Ovdje mozete pronaci JavaScript Visualiser: Alat za vizualiziranje izvrsnog konteksta, hoisting, zatvorenja, i opsege u JavaScriptu. Podrzava ES5 sto znaci da ce let i const pokazati gresku jer nisu dostupni.
var opseg je na nivou funkcije, ne bloka kao u slucaju let i const. Iz ovog razloga leksicko okruzenje u aplikaciji mozemo vidjeti na nivou skripte ili funkcije, ne i bloka.

Sta je closure u racunarskom programiranju

2022-07-14T17:00:00Z

Zatvorenja su vazna jer kontrolisu sta jeste i nije u opsegu odredjene funkcije. Razumijevanje ovakvih procesa doprinosi razumijevanju JavaScripta i ovladavanju slozenijih scenarija.

Sta je rezultat koda ispod?

let animal = 'dog'; 

function printAnimal() {
  console.log(animal);  // pristupa vanjskoj varijabli
}

printAnimal(); // poziva funkciju

Funkcija printAnimal() radi sa varijablom animal koja je definisana izvan funkcije. Unutar funkcije vidimo instrukcije za ispisivanje sadrzaja te varijable u konzoli: dog.

Upravo smo vidjeli closure ili zatvorenje. U nekim programskim jezicima funkcija ne moze pristupiti varijablama koje su definisane izvan funkcije ili je funkciju neophodno napisati na poseban nacin da bi se to ostvarilo.

Java Script closures su funkcije koje pamte svoje vanjske varijable, tj. takve funkcije imaju referencu na svoje okruzenje u kom su kreirane. Drugim rijecima, zatvorenje funkciji daje pristup stanjima koje obuhvata vanjska funkcija.

Sa druge strane, ovako izgleda samostalna funkcija koja ~nije closure i koristi samo lokalne varijable, proslijedjene kroz argumente, iako tehnicki ona i dalje jeste closure. Zbunjujuce?

function f(a, b) {
  return a / b;
}

f(6, 2); // 3

Zavisi od toga koga pitamo, neko ce se izjasniti da ovakvu funkciju smatra "uninteresting closure", neko drugi ce tvrditi da nije zatvorenje uopste jer ne koristi referencu na spoljni opseg (scope).

We don't normally call them closures unless they close over some other context and actually make use of the fact that they do, but at a technical level, they all are closures. stackoverflow: T.J. Crowder

Ugnijezdene funkcije ili nested functions

Obicno kada se misli na closures, one su u kontekstu ugnijezdenih funkcija. Funkcija je ugnijezdena kada se nalazi unutar druge funkcije sto se moze koristiti za organizovanje koda.

function sayHiBye(firstName, lastName) {

  // pomocna ugnijezdena funkcija
  function getFullName() {
    let fullName = firstName + " " + lastName;
    return fullName;
  }

  console.log( "Zdravo " + getFullName() );
  // Zdravo Marko Doe
  console.log( "Dovidjenja " + fullName );  
  // Error: Uncaught ReferenceError: fullName is not defined
}

sayHiBye('Marko', 'Doe');

Iako unutrasnje funkcije imaju referencu na vanjske, vanjska funkcija nema pristup stanju unutrasnje funkcije (osim onome sto funkcija proslijedi po dizajnu). Pristup je ogranicen izvan viticastih zagrada. To znaci da unutrasnja funkcija ima pristup varijablama firstName i lastName, ali vanjska funkcija nema pristup varijabli fullName. Ovakva enkapsulacija podataka moze sprijeciti curenje i izlaganje podataka tamo gdje nije potrebno.

Umjesto toga mozemo pozvati getFullName() u vanjskoj funkciji i vratiti fullName kao rezultat kroz kljucnu rijec return.

Closure funkcija demonstrira pristupacnost varijabli u opsegu odredjene funkcije.

U JavaScriptu ono sto je unutra ima pristup onome sto je napolju. Kao kod jednosmjernog stakla, mozes vidjeti sta se nalazi napolju, ali ljudi napolju ne mogu vidjeti tebe.

Ono sto je takodje vrijedno pomena, ugnijezdenu funkciju varijabli mozemo dodijeliti i kao samu funkciju, sto kasnije mozemo koristiti negdje drugo. Bez obzira gdje bi je koristili, ona i dalje ima pristup istim vanjskim varijablama.

U sledecem primjeru varijabli dodjeljujemo sadrzaj ugnijezdene funkcije tako sto pozivamo vanjsku. Vanjska funkcija vraca unutrasnju kroz kljucnu rijeci return.

function vanjskaF(vanjskaV) {
  
  function unutrasnjaF(unutrasnjaV) {
    console.log('Vanjska varijabla: ' + vanjskaV);
    console.log('Unutrasnja varijabla: ' + unutrasnjaV);
  }

  return unutrasnjaF;

  // ili mozemo napisati
  // return function unutrasnjaF(unutrasnjaV) {...}
}

let funkcija = vanjskaF('vanjska');

console.log(funkcija);

Sadrzaj funkcija varijable je sada:

function unutrasnjaF(unutrasnjaV) {
   console.log('Vanjska varijabla: ' + vanjskaV);
   console.log('Unutrasnja varijabla: ' + unutrasnjaV);
 }

Treba imati u vidu da ova vrijednost varijable takodje ostaje svjesna vanjskaV varijable vanjske funkcije ciju smo vrijednost proslijedili kroz argument.

Sada cemo pozvati ugnijezdenu funkciju sa argumentom. Naglasavam da — ugnijezdena funkcija pamti stanje vanjske funkcije i njene varijable bez obzira gdje je pozvana. To mozemo vidjeti u rezultatu koda ispod, gdje proslijedjen argument vanjskoj funkciji zadrzava vrijednost u oba primjera jer je unutrasnja funkcija pamti.

function vanjskaF(vanjskaV) {
  let brojanje = 0;

  return function unutrasnjaF(unutrasnjaV) {
    console.log(++brojanje);
    console.log('Vanjska varijabla: ' + vanjskaV);
    console.log('Unutrasnja varijabla: ' + unutrasnjaV);
  };
}

let funkcija = vanjskaF('vanjska');
funkcija('unutrasnja'); 
funkcija('druga unutrasnja');

U konzoli izgleda ovako:

1
Vanjska varijabla: vanjska
Unutrasnja varijabla: unutrasnja
2
Vanjska varijabla: vanjska
Unutrasnja varijabla: druga unutrasnja

Sta bi jos pisalo u konzoli kada bi ispod koda definisali novu varijablu?
let novaF = vanjskaF('nova');
novaF('unutrasnja nova');
Da li bi brojac ispisao 3 ili 1? Odgovor: Brojac bi se resetovao i prikazao 1.

U poslednjem primjeru se moze primjetiti da je ugnijezdena funkcija pamtila stanje varijable vanjske funkcije vanjskaV i brojanje koja se povecavala svakim pozivom ugnijezdene funkcije. Razlog je leksicko okruzenje koje se kreira na prvom pozivu vanjskaF(), ali da ne bi napravili prevelik korak, udubicemo se u tehnicke detalje koji omogucavaju funkcijama u JavaScriptu da pamte varijable i budu zatvorenja.
U clanku — Kontekst izvrsenja i leksicko okruzenje u JavaScriptu je objasnjeno kako takvi procesi rade u pozadini.

Closures se najcesce koriste da bi varijabli, koja je proslijedjena jednoj funkciji, kasnije mogli pristupiti u drugoj funkciji.

Implementacija Mocha, Chai i Sinona u projekat

2022-06-22T17:00:00Z

Mocha automatizovano Unit testiranje u pretrazivacu.

CDN

Uz cdnjs servis je jednostavno podesiti okruzenje za pisanje testova koji su zasnovani na pretrazivacu. Nije neophodno preuzeti sve fajlove da bi se sluzili bibliotekama jer su mnoge JavaScript i CSS biblioteke pohranjene javno na GitHubu. cdnjs opsluzuje oko 12.5% svih stranica na internetu i nije najbolji izbor za svaku priliku, ali je nekada i vise nego praktican u odnosu na druge.

Za Mochu je potrebno:

<!-- Mocha css stilizuje stranicu sa rezultatima -->
<link href="//cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.css" rel="stylesheet" />
<!-- Mocha framework -->
<script src="//cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.js"></script>

<script>
  mocha.setup('bdd'); // minimalno podesavanje
</script>

<!-- #mocha div u sebi drzi rezultate testova. -->
<div id="mocha"></div>

<!-- mocha.run(); pokrece testove -->
<script>
  mocha.run();
</script>

Za Chai je potrebno:

<!-- Chai -->
<script src="//cdnjs.cloudflare.com/ajax/libs/chai/1.10.0/chai.min.js"></script>

<script>
  let assert = chai.assert; // assert je dostupan globalno
</script>

Za Sinon je potrebno:

  <!-- Sinon -->
  <script src="//sinonjs.org/releases/sinon-1.12.2.js"></script>

I projektne skripte:

  <!-- Kod koji treba testirati. -->
  <script></script>

  <!-- Testovi. -->
  <script></script>

<link rel="stylesheet" href=""> mora biti u zaglavlju,
<script></script> moze biti u zaglavlju ili tijelu.
<div id="mocha"></div> mora biti u tijelu .html dokumenta i
mocha.run(); mora biti nakon <div id="mocha"></div>.

Praktican primjer:

Mocha Chai i Sinon instalacija

CDN nije jedina opcija. Ako ne zelite ovisiti o linku na koji ne mozete uticati — Mocha, Chai i Sinon se mogu instalirati u sklopu projekta kroz terminal:

npm init -y
npm install mocha chai sinon --save-dev

Na racunaru je neophodno imati instaliran Node.js da bi npm komande radile.

.html dokument je isti ali se putevi razlikuju jer smo kroz instalaciju fajlove pohranili lokalno.

<!DOCTYPE html>
<html>
  <head>
    <!-- stylesheets -->
    <link rel="stylesheet" href="./node_modules/mocha/mocha.css">

    <!-- library scripts -->
    <script src="./node_modules/mocha/mocha.js"></script>
    <script src="./node_modules/chai/chai.js"></script>
    <script src="./node_modules/sinon/pkg/sinon.js"></script>
    
    <script>
      mocha.setup('bdd'); 
    </script>

    <script>
      let assert = chai.assert; 
    </script>

    <!-- project scripts -->
    <script src="app.js"></script>
    <script src="test.js"></script>
  </head>

  <body>
    <div id="mocha"></div>

    <script>
      mocha.run();
    </script>
  </body>
</html>

Dodatni linkovi

Mocha automatizovano Unit testiranje

Mocha — automatizovano JavaScript testiranje

2022-06-15T17:00:00Z

Mocha je JavaScript framework za testiranje. Bogata je funkcijama i radi na Node.js. Koristi se za komponentno (eng. unit) i integraciono testiranje (eng. integration testing), i odlican je kandidat za razvoj vodjen ponasanjem (eng. Behavior Driven Development ili BDD).

Razlika izmedju unit i integracionog testiranja: U unit testiranju se testira komponenta odvojena od ostatka programa - integraciono testiranje testira nekoliko komponenata koje rade zajedno.

Zasto je testiranje vazno za razvoj softvera

Cilj testiranja softvera je pronalazenje gresaka, propusta i neispunjenih zahtjeva u odnosu na postavljene zahtjeve. Pronalazak ovih gresaka u ranijim fazama cini ispravljanje lakse, brze i jeftinije. Sto se ranije testiranje uvede u projekat - to bolje.

Osim sto se brine za ispunjavanje zahtjeva i presretanje gresaka prije nego proizvod bude dostupan korisniku, komponentno testiranje obicno uslovljava programera da pise sto modularniji kod. Testovi i modularan kod omogucavaju dodavanje novih funkcija ili izmjenu postojeceg koda bez straha. Ovakvi faktori cine kod, proces i proizvod kvalitetnijim.

Zasto je automatizovano testiranje vazno

Prilikom manuelnog testiranja lako je propustiti greske jer kroz razvoj necega, na umu imamo razne scenarije upotrebe proizvoda. Tesko je ocekivati od developera da ih sve provjeri nakon svake promjene koda. Ovakve okolnosti su plodno tlo za ispravljanje jedne greske bez svijesti o nastanku druge.

Razvoj vodjen ponasanjem

Razvoj vodjen ponasanjem ili BDD je agilni pristup za razvoj softvera. Intuitivno je napisati kod i potom ga testirati. Uz BDD se prvo fokusira na plan, tj. prvo se pise test. Kroz test se dokumentuje i definise kako dio programa treba raditi u odredjenim okolnostima.

Ovi testovi su ujedno testovi, dokumentacija i primjeri ili ocekivanja.

Sledeci korak je pisanje koda dok ne ispuni sva ocekivanja testa. U pocetku ni jedan uslov nece biti ispunjen i kod se usavrsava dok svi uspjesno ne prodju test.

Highlight App
    getHighlights()
      ✔ returns typeof array
    getNumberOfHighlights()
      ✔ returns typeof number
      1) number is above 0


  3 passing (10ms)
  1 failing

Isprva nema potrebe brinuti da li je kod efikasan ili izgleda dobro. U tom trenutku je fokus na ispunjavanju zahtjeva testa. Testovi koji prodju bez gresaka ukazuju da kod radi ono sto bi trebao i fokus moze biti na optimizovanju koda i njegovoj citljivosti. Ovaj proces se naziva refaktorisanje koda. U toku refaktorisanja koda, testovi ce istog trenutka pokazati ukoliko neka od funkcija prestane raditi i greska se moze ispraviti.

Navedeni razvojni ciklus se naziva red > green > refactor:

Red: Napisati test za novu funkcionalnost komponente. Kao referenca na nesto sto jos ne postoji isprva prikazuje gresku.
Green: napisati najlaksi kod koji ce ispuniti zahtjev testa.
Refactor: popraviti kvalitet i optimizovati kod.
Ponoviti ciklus.

Ovo je razvojni ciklus pretka BDD pristupa - Test Driven Development. BDD ima vise koraka, ali su navedeni sustinski za developere. Vise informacija

BDD benefiti

Cak i kada postane nejasno gdje poceti zbog kompleksnosti komponente, BDD pomaze pri razbijanju problema na manje i jednostavnije dijelove na temelju kojih dalje razvijamo sve slozeniju funkcionalnost. Osim sto BDD pristup vodi kroz jednostavnije pisanje koda, dobijamo i testove kao i pazljivije promisljene funkcije. Ovakvi testovi sami pristojno dokumentuju i objasnjavaju kod drugima jer govore kako funkcije rade i sta se od njih ocekuje.

Mocha automatizovano testiranje na djelu 🦸

Koristicemo Mocha framework sa uobicajnim funkcijama testiranja (poput describe i it koji se koriste za organizovanje i izvrsenje testova) i biblioteku sa razlicitim tvdnjama i ocekivanjima. Node.js vec ima ugradjenu biblioteku tvrdnji, ali su dostupne opseznije biblioteke poput Chai, Expect.js, Should.js itd. Biramo Chai.

I Mocha i Chai su pogodni za testiranje u pretrazivacu i za testiranje na strani servera, ali se ovdje bavimo pretrazivacem.

Kako instalirati i podesiti Mocha i Chai

mkdir mochatest 
cd mochatest
cat > index.js
npm init -y
npm install mocha chai --save-dev
code .

6. Otvara projekat u VSC-u ako terminal pokazuje na folder u kom je projekat ili `code put/do/foldera`.

Prvo kreiramo mochatest folder kroz terminal.
Druga linija terminalu pokazuje da mijenjamo folder na kom radimo.
Kreiramo fajl index.js.
Potom inicijalizujemo npm u nasem projektu (Node Package Manager je najveci svjetski softverski registar i developeri ga koriste da dijele softver). npm je instaliran uz Node.js i komanda nece raditi ukoliko Node.js nije instaliran na kompjuteru.
Nakon inicijalizacije instaliramo Mocha i Chai biblioteku u projekat sto se oslikava u package.json fajlu:

"devDependencies": {
  "chai": "^4.3.6",
  "mocha": "^10.0.0"
}

Mocha ce traziti folder nazvan test i unutar testnog foldera bi trebali oponasati strukturu foldera aplikacije koja se testira.

mkdir test 
cd test
cat > indexTest.js

Da bi pokretali testove napravicemo jednu izmjenu u package.json fajlu. "test": "echo \"Error: no test specified\" && exit 1" cemo zamjeniti sa "test": "mocha".

"scripts": {
  "test": "mocha"
},

Ukoliko u terminalu napisemo komandu npm test, Mocha ce pokrenuti sve testove u test folderu. Kako jos uvijek nemamo napisane testove dobijamo poruku 0 passing (1ms).

Describe i it

describe('Calculator', () => {
  describe('Addition', () => {
    it('should sum two numbers', () => {
        // Chai tvrdnja
      });
  });

  describe('Division', () => {
   it('should divide two numbers', () => {
       // Chai tvrdnja
    });

   it('should return NaN if the denominator is 0', () => {
        // Chai tvrdnja
      });
  });
});

it poziv identifikuje svaki pojedinacni test, ali ne govori kako Mocha treba strukturirati test suite ili paket. To radi describe. Testni paket opisuje i sadrzi set ciljeva ili tvrdnji koji zajedno sluze vecem slicnom cilju. Testni paket "Calculator" moze imati unutrasnje pakete sabiranja, oduzimanja, mnozenja i dijeljenja. Unutar testnog paketa "Division" su definisana dva testa koji trebaju utvrditi da li su brojevi ispravno podijeljeni i da li funkcija moze ispravno iznjeti dijeljenje ako je djelitelj 0.

Chai tvrdnje ili ocekivanja

Mozda je Chai najlakse shvatiti iz primjera. Prvo cemo predstaviti Chai biblioteku i ocekivanja na pocetku testnog fajla, ali i gdje ce se nalaziti kod aplikacije.

let expect     = require("chai").expect;
let calculator = require("../index");

expect(calculator.someFunction(Infinity)).to.be.NaN;

Chai ima 3 razlicita stila tvrdnji: expect, assert i should. Postoje manje razlike u stilovima - link za vise informacija. One za pocetak nisu znacajne i ovdje je prikazan expect.

Poslednja linija je tvrdnja i izgleda kao recenica na engleskom jeziku: ocekujem da someFunction(Infinity) iz fajla index.js vrati vrijednost NaN.

Uvod u Mocha i Chai automatizovano testiranje

Red faza ciklusa. Imajte na umu da nas implementacijski kod u ovom trenutku ne postoji, ali to nas ne sprecava da pisemo testove kao da implementacija postoji. Znamo da cemo funkciju za sabiranje nazvati add().

Chai tvrdnja za sabiranje ocekuje da funkcija add(50, 39) vrati vrijednost 89 i da add(4, 2) bude jednaka 6:

expect(calculator.add(50, 39)).to.equal(89);
expect(calculator.add(4, 2)).to.equal(6);

I nas indexTest.js bi sada trebao izgledati ovako:

let expect     = require("chai").expect;
let calculator = require("../index");

describe('Calculator', () => {
  describe('Addition', () => {
    it('should sum two numbers', () => {
        expect(calculator.add(4, 2)).to.equal(6);
        expect(calculator.add(50, 39)).to.equal(89);
      });
  });
});

Dovoljno je da samo jedna tvrdnja ne prodje da rezultat it testa bude negativan bez detaljnijih informacija sta je poslo krivo. Iz ovog razloga nije preporucljivo pod istim it testom provjeravati nekoliko razlicitih tvrdnji.

Pokrenucemo testove sa komandom npm run test u terminalu da bi vidjeli sta ce se desiti. Test ne bi trebao proci jer ne postoji implementacijski kod za sabiranje.

put\do\projektnog\foldera> npm test

> mochatest@1.0.0 test
> mocha

  Calculator
    Addition
      1) should sum two numbers

  0 passing (5ms)
  1 failing

Green faza ciklusa. Recimo da smo nakon toga napisali kod koji ce ispuniti zahtjeve testa u index.js fajlu i ponovo pokrecemo testove.

const add = (a, b) => a + b;

module.exports = {
  add,
};

put\do\projektnog\foldera> npm test

  Calculator
    Addition
      ✔ should sum two numbers

  1 passing (5ms)

Znamo da kod radi ono sto bi trebalo! Recimo da nema potrebe za refaktorizacijom i idemo dalje. Pisemo test za dijeljenje dva broja i znamo da ce se funkcija koja dijeli dva broja zvati divide(). Chai ocekuje da ce funkcija divide(50, 5) vratiti vrijednost 10, ali test ne moze proci kako funkcija jos ne postoji.

let expect     = require("chai").expect;
let calculator = require("../index");

describe('Calculator', () => {
  describe('Addition', () => {
    it('should sum two numbers', () => {
        expect(calculator.add(4, 2)).to.equal(6);
        expect(calculator.add(50, 39)).to.equal(89);
      });
  });

  describe('Division', () => {
   it('should divide two numbers', () => {
       expect(calculator.divide(50, 5)).to.equal(10);
    });
  });
});

put\do\projektnog\foldera> npm test

  Calculator
    Addition
      ✔ should sum two numbers
    Division
      1) should divide two numbers


  1 passing (6ms)
  1 failing

Potom dodajemo divide() funkciju u index.js fajlu koja ce dijeliti dva broja.

const add = (a, b) => a + b;
const divide = (a, b) => a / b;
module.exports = {
  add,
  divide,
};

put\do\projektnog\foldera> npm test

  Calculator
    Addition
      ✔ should sum two numbers
    Division
      ✔ should divide two numbers


  2 passing (5ms)

Medjutim, dijeljenje sa nulom u JavaScriptu daje beskonacno. Ono sto nam vise odgovara je NaN (Not a Number). Pisemo test koji ce potvrditi da bilo koje dijeljenje sa nulom vraca NaN.

let expect     = require("chai").expect;
let calculator = require("../index");

describe('Calculator', () => {
  describe('Addition', () => {
    it('should sum two numbers', () => {
        expect(calculator.add(4, 2)).to.equal(6);
        expect(calculator.add(50, 39)).to.equal(89);
      });
  });

  describe('Division', () => {
   it('should divide two numbers', () => {
       expect(calculator.divide(50, 5)).to.equal(10);
    });

    it('should return NaN if the denominator is 0', () => {
      expect(calculator.divide(7, 0)).to.be.NaN;
    });
  });
});

put\do\projektnog\foldera> npm test

  Calculator
    Addition
      ✔ should sum two numbers
    Division
      ✔ should divide two numbers
      1) should return NaN if the denominator is zero


  2 passing (7ms)
  1 failing

Test nam govori da funkcija divide() ne radi bas kako zelimo i reci cemo joj da prvo provjeri da li je djelilac 0 i ako jeste da vrati vrijednost NaN, ako djelilac nije 0 - da podijeli dva ponudjena broja. Na ovaj nacin mozemo ispuniti i prvi i drugi zahtjev.

const add = (a, b) => a + b;
const divide = (a, b) => b !== 0 ? a / b : NaN;
module.exports = {
  add,
  divide,
};

put\do\projektnog\foldera> npm test

  Calculator
    Addition
      ✔ should sum two numbers
    Division
      ✔ should divide two numbers
      ✔ should return NaN if the denominator is zero


  3 passing (6ms)

Kod za oduzimanje i mnozenje je dovoljno jednostavan i mozete ga sami dodati. Ovaj tekst je za sada samo uvod. Istrazite dokumentacije i eksperimentisite sa kompleksnijim problemima.

Dodatni linkovi

Computer Science kursevi sa prestiznih fakulteta

2022-05-22T19:33:53Z

Ako vam papir i diplome nisu vazne koliko znanje i prioritet je ovladavanjem racunarskim naukama — fakulteti poput Harvarda i Stanforda nude neke od svojih kurseva besplatno. Postoje i opcije za one koji zele sveobuhvatni nastavni plan.

CS50 u Harvardovom Sanders teatru.

CS50 Introduction to Computer Science

CS50 je uvodni kurs za racunarske nauke i umjetnost programiranja za one sa ili bez prethodnog programerskog iskustva sa Harvarda. David J. Malan uci kako razmisljati kroz algoritme i efikasno rjesavati probleme. Teme ukljucuju apstrakciju, algoritme, strukture podataka, enkapsulaciju, upravljanje resursima, sigurnost, softversko inzenjerstvo i web development.
Ukljuceni jezici: C, Python, SQL, JavaScript, CSS i HTML.

CS101 Introduction to Computing Principles

CS101 sa Stanforda poducava osnovnim idejama racunarstva za publiku bez prethodnog iskustva. Ovaj kurs umjesto kodiranja uci vise o tome kako racunari rade i tehnickim konceptima. Osim razumijevanja kako kompjuteri rade, ovaj kurs demistifikuje mnoge teme koje ukljucuju racunare i definisu svijet oko nas poput umjetne inteligencije, sigurnosti racunara, bitcoina, kriptovalute, te internet.

Computer Science Programming with a Purpose

Programming with a Purpose sa fakulteta Princeton pokriva prvu polovinu knjige Computer Science: An Interdisciplinary Approach (druga polovina je pokrivena u Coursera kursu Computer Science: Algorithms, Theory, and Machines). Namjera je uciti programiranje u naucnom kontekstu i to kroz upoznavanje sa programskim elementima poput varijabli, kondicionala, petlji, nizova i ulazno/izlaznih jedinica. Zatim se okrece funkcijama, sa kljucnim konceptima kao rekurzija, modularno programiranje, ponovna upotreba koda i moderno objektno orjentisano programiranje.

Kurs uci osnovnim vjestinama za rjesavanje racunarskih problema kroz Java programski jezik, ali koje su primjenjive i u drugim modernim racunarskim okruzenjima. Drugim rijecima, fokus je na osnovnim konceptima, ne na Javi.

Computer Science od Open Source Society University

Ovo je malo drugaciji koncept. Do sada su navedeni kursevi koji se fokusiraju na pocetnike ili na vrlo usko znanje u sklopu racunarskih nauka. OSSU nastavni plan i program je sveobuhvatni nastavni plan racunarskih nauka sklopljen od online materijala i resursa.

Drugim rijecima, OSSU je sastavio temeljan nastavni plan (ono sto dobijemo na fakultetu) iz mnogobrojnih besplatnih online resursa. OSSU na ovaj nacin nudi samoukim studentima strukturu, nesto sa cim se cesto borimo kada ne znamo sta ne znamo i sta je sledece potrebno savladati. Evo kako otprilike izgleda OSSU nastavni plan: The Open-Source Computer Science Degree

Navedeni koncept se moze primjeniti i samostalno bez obzira sta ucimo. Kako? Nastavni plan 'ukrasti' od placenih organizovanih kurseva i potom potraziti besplatan materijal.

Dodatni linkovi

Promisljeno vjezbanje

2022-03-17T19:33:53Z

Namjerno/promisljeno vjezbanje je poznato kao deliberate practice. Ovakvo vjezbanje se odnosni na specificnu vrstu prakse koja je svrsishodna i sistematicna. Dok standardan nacin vjezbanja nerijetko ukljucuje bezumno ponavljanje, promisljena vjezba zahtjeva fokusiranu paznju i provodi se sa specificnim ciljem popravljanja performansi na umu.

The right sort of practice carried out over a sufficient period of time leads to improvement. Nothing else. Anders Ericsson

Pravi se pazljiva dekonstrukcija cilja, odnosno dijeli u manje i lakse savladive segmente. Te se potpuno fokusira na jedan segment i svaka sesija ima unaprijed odredjenu svrhu. U pocetku je obicno dovoljno pojaviti se i upijati, ali je vremenom lakse nehajno previdjeti sitne greske i propustiti svakodnevnu priliku za iskonski napredak. Ovo se desava jer u pocetnoj fazi, dok je nesto potpuno nepoznato, pazljivo obracamo paznju na svaki korak. Ponasanje se automatizuje kroz ponavljanje koraka iznova i ono postaje nepromisljena navika. Vjezba kao bezumno ponavljanje je neprijatelj namjernom/promisljenom vjezbanju. Pocinjemo pretpostavljati da postojece vjestine postaju bolje jer sticemo iskustvo, dok zaista samo jacamo ustanovljene navike. Zato postoji tvrdnja da ce oni koji se poslom bave dvadeset godina vjerovatno imati slabiji ucinak od onih koji to rade samo pet.

Pored pazljive dekonstrukcije cilja u manje dijelove, potrebno je otkriti slabosti, testirati nove strategije za svaki segment i integrisati one djelotvorne u svoju vjezbu i praksu. Pravovremene povratne informacije (otkrivanje slabosti i analiza ucinka) i vjezbanje na rubu trenutnih sposobnosti je najveca razlika izmedju promisljene vjezbe i pukog ponavljanja aktivnosti.

Kako promisljeno uciti programiranje

Istrajnost u namjernoj/promisljenoj vjezbi, uprkos nepovoljnim okolnostima, zahtjeva intrinzicnu motivaciju. Drugim rijecima, da je moguce naci zadovoljstvo u aktivnosti zbog nje. Ekstrinzicna motivacija je manje efikasna u odrzavanju istrajnosti kroz duzi vremenski period kontinuiranih gresaka i neuspjeha dok se ne ovlada vjestinom.

Analiziranje i dekonstrukcija zeljene vjestine u segmente

Za prvi korak je neophodno sagledati siru sliku, potom glavni cilj podijeliti u manje sistematicne segmente ili ciljeve. Eksperti sa nesvakidasnjom preciznoscu ovaj put dijele u male detaljne potciljeve i gotovo da nije moguce biti previse specifican sa njima. Ne da bi ucinak bio popravljen na svim poljima odjednom, vec da bi znali koji je sledeci cilj koji ce dobiti punu paznju.

Bez skiciranja mape puta nije moguce stici na odrediste. Tako pitanje "Koji je najdjelotvorniji put od mjesta gdje se nalazim do mjesta gdje zelim stici?" moze voditi u pravom smijeru. Ako samostalno odredjivanje puta nije najoptimalnije, zasto ne uciti od nekoga ko je vec savladao vjestinu i napravio provjerenu mapu puta (ili uporediti nastavni plan kursa, sadrzaj knjige, vlogova i blogova developera koji su pricali na tu temu itd.)?

Note 📝: Nema potrebe biti opsjednut savrsenom dekonstrukcijom puta. Pocni i prilagodi po potrebi.

Izazovi na granici trenutnih sposobnosti.

Za svaki segmet je potrebno odrediti grupu zadataka koja ima za cilj da gura izvan trenutnih sposobnosti u okviru segmenta (ka cilju). U ovoj fazi se ne radi o sto duzoj listi zadataka koje treba obaviti ili kvantitetu. Fokus treba biti na izazovu koji pomjera granice trenutnih programerskih vjestina na nacin da je tezak i dostizan u isto vrijeme. Nakon odredjenog perioda van komfor zone (tijelo i u ovom slucaju) um se prilagodjava i takvo ponasanje postaje navika.

Na primjer, svaki zadatak uciniti oko 10% tezim od nivoa koji zvuci prijatno. Mozda je dobro povremeno izabrati znacajniji izazov i testirati koliko je zapravo moguce zagristi.

Usporiti namjernu/promisljenu vjezbu.

Trebalo bi raditi brzinom koja odgovara trenutnoj ucinkovitosti i omogucava kontrolu preciznosti. Bolja metoda je ponavljati ispravne korake polako da bi se izgradila solidna automatizovana osnova. Brzim pomjeranjem je znacajniji rizik da se nauce i internalizuju pogresne vjestine.

Vjezba moze izazvati osjecaj frustracije zbog gresaka. Usljed nestrpljivosti lako je ubrzati sledeca ponavljanja. Ovdje nema potrebe zuriti sa naporima. Uzmite nekoliko trenuta da saberete misli, shvatite gdje je nastala greska, a zatim ponovite korake jos sporije. Odrzite sporiji tempo dok ne osjetite samopouzdanje u vezi povecavanja brzine.

Fokus.

Zajednicka karakteristika medju onima koji brze usvajaju vjestinu je mogucnost odrzavanja intenzivnog fokusa duzi vremenski period. Sto je intenzivniji fokus tokom promisljene vjezbe znacajniji su rezultati. Medjutim, moderni svijet je pun distrakcija i dinamicnog sadrzaja koji skracuje raspon paznje.

Izgradnja fokusa je proces. U redu je poceti malim koracima i postepeno povecavati trajanje fokusiranog rada. Kljuc je birati okolinu bez distrakcija i imati spreman plan kako reagovati kada se ona pojavi. U ovisnosti od okolnosti, za izbjegavanje eksternih distrakcija je moguce ostaviti telefon u drugoj prostoriji, blokirati obavjestenja i sajtove, koristiti slusalice, raditi u tihom prostoru koji sluzi samo za produktivnost itd. Ukrotiti unutrasnje distrakcije znaci sprijeciti um da prekida tok rada. Fizicka aktivnost, istezanje, meditacija, redovne pauze pomazu u ovome, ali i "brain dump" papir za sve nevezane misli koje se mogu ostaviti za kasnije.

Potpun fokus u kracim sesijama je superiorniji od djelimicnog u duzim. Dobra ideja je izbjegavati planiranje vjezbanja u duzim vremenskim intervalima i prilagodjavanje intenziteta vjezbe da bi ona mogla istrajati tokom zadanog vremena. Djelotvornija promisljena vjezba je sa najintenzivnijim mogucim fokusom u trajanju koje je izvedivo (kraci periodi - sprint), potom uzeti pauzu i ponavljati ovaj sablon.

Pomodoro tehnika 🍅 se bazira na ovakvim sesijama. Ako Pomodoro ima previse grubu strukturu za vas, pauze mozete planirati nakon sto flow stanje zavrsi na prirodan nacin. Prisilni prekidi flow stanja su iritantni. Pauze mogu trajati od 5, 10, 15, 30 minuta do dan ili dva. Sistem treba biti prilagodjen osobi, a za to je potrebno eksperimentisati i slusati tijelo. Na primjer, osjecaj pospanosti, neugodnosti, bola ili iscrpljenosti su znakovi za pauzu.

Prakticna primjena.

Lako je pobrkati sticanje znanja sa ovladavanjem vjestine. Znanje na mnogo nacina daje lazan osjecaj napretka. Sticanje vjestina zahtjeva nespretnu primjenu znanja iznova i iznova sto izaziva osjecaj frustracije i nesposobnosti (bar isprva). Sticanje vjestine je iz ovog razloga neprijatno iskustvo i znak da se radi o pravom putu.
Nakon tutorijala je neophodno usvojeno znanje testirati u realnim prakticnim primjerima kroz brojna ponavljana i testiranja.

Sistem za dobijanje pravovremenih povratih informacija.

Promisljeno vjezbanje ukljucuje kontinuiran rad na slabostima. Mjerenje omogucava zapazanje da li je cilj postignut, koje strategije su djelotvorne, opazanje i eliminisanje drugih slabih tacaka. Skoro je nemoguce postati bolji bez svijesti o svojim trenutnim sposobnostima i gdje se one nalaze na putu do cilja.

Svaki put pri opazanju greske ili slabosti, zapisite u listu sa preprekama impediments.txt i oznacite njen prioritet na putu dostizanja cilja. Npr:
1/zid/crveno - nije moguce nastaviti bez rjesavanja slabosti,
2/prepreka/narandzasto - jacanje vjestine ce znacajno popraviti rad,
3/korisno/ljubicasto - korisno, ali nije hitno.

U ovome ne treba zaboraviti procjeniti koristene alate u procesu. Da li se koriste na najoptimalniji nacin i postoji li nesto bolje? Pri svakom uocavanju slabosti okrenite se ka listi prepreka. Vjerovatno je necete cesto otvarati onda kada ne izlazite iz komforne zone.

Mozete pronaci mentora koji ce pregledati, komentarisati kod, ukazati na bolje rjesenje ukoliko postoji, diskutovati novu tehnologiju i dekonstrukciju cilja. Iskusniji programeri mogu brzo primjetiti sta pocetnik radi pogresno i takve povratne informacije ce postediti osobu mnogih borbi i potrosenog vremena.

Ukoliko postoji ispravno rjesenje za problem koji rjesavate, mozete uporediti svoj i ispravan kod. Uzmite vrijeme da analizirate kako ispravan kod radi i po cemu se razlikuje od vaseg pristupa. Kopiranje bez razumijevanja jaza u razlici je lisavanje sebe povratne informacije koja bi pomogla u izgradnji vjestine.

Testing leads to failure, and failure leads to understanding. Burt Rutan

Pri citanju necijeg dobro napisanog koda na GitHubu, iskoristite priliku da kod uporedite sa vasim trenutnim razumijevanjem kako treba kodirati. Dekonstruisite kod i tehnike koje je autor koristio, potom bez gledanja probajte napraviti rjesenje poput njegovog. Poslednja faza je analiziranje konacnog rezultata u odnosu na originalni kod. Ovo je povratna informacija.
Moguce je i potraziti jos rjesenja, te ih uporediti i odrediti koje je bolje i zasto.

Prilagodjavanje.

Vazno je odvojiti malo vremena i analizirati sta je bila namjera, a sta se zapravo desilo, te na osnovu zakljucaka iz povratne informacije prilagoditi strategije vjezbanja. Prilagodjavanje je u promisljenom/namjernom vjezbanju sustinsko inace izostaje napredak. Stvar je u tome da odgovor nije uvijek uloziti vise napora jer postoji granica kada ovakav pristup gubi ucinak. Tada je konstruktivnije pristupiti problemu iz vise uglova i eksperimentisati.

Ponavljanje, ponavljanje i ponavljanje.

Dosljedno ponavljanje mozak shvata kao znak da je nova informacija ili ponasanje vrijedno usvajanja i autuomatizovanja.
Faza ponavljanja ne bi trebala biti laka jer svjesno reprogramiranje svog mozga nije. On prirodno tezi poznatom. Ponavljanje aktivnosti unutar zone komfora nije jednako promisljenom/namjernom vjezbanju i stanju ucenja.

Jedini siguran nacin da pokusaj ucenja bude neuspjesan je odustajanje. Sa dosljednom navikom ucenja materijal ce neminovno biti usvojen.

8. Odmaranje, punjenje baterija i oporavak. 🌴

Dosljednost ne treba pomjesati sa kontinuiranom aktivnoscu. Za ucinkovito usvajanje i rjesavanje problema mozak zasluzuje odmor od mentalnih izazova. Iako je ponavljanje vazno, izostanak oporavka izaziva kontraefekat i nesto sto se naziva burnout sindrom. S obzirom na zahtjevnost namjerne/promisljene vjezbe, nemoguce je praktikovati cijeli dan.

A finding that is remarkably consistent across disciplines is that four or five hours a day seems to be the upper limit of deliberate practice, and this is frequently accomplished in sessions lasting no more than an hour to ninety minutes.

Odredite vrijeme za aktivnosti koje ne zahtjevaju mentalni napor, zabavne su ili/i opustajuce (tusiranje, setnja, pisanje u dnevnik, igranje igrica, pranje sudja, pripremanje hrane, slusanje muzike, bastovanstvo, vjezbanje, druzenje sa prijateljima, joga, meditacija, spavanje ili nesto slicno sto ne zahtjeva previse napornog razmisljanja). U toku promisljenog vjezbanja treba zaista vjezbati, a u periodu oporavka zaista napuniti baterije.

Kada mozak nije u fokusiranom, onda je u difuznom nacinu rada. To znaci da misli kreativno i slobodno lutaju u ovom stanju. Oba nacina su korisna, ali je vazno uspostaviti balans da bi se dobio najbolji moguci efekat iz oba. U fokusiranom rezimu je fokus na savladavanju detalja, a u difuznom se grade veze izmedju njih (tj. kako se detalji uklapaju zajedno).

Kada se umorite ili suocite sa preprekom tokom promisljenog/namjernog vjezbanja - pogresno je forsirati. Treba vam neka potpuno druga opustajuca aktivnost na najmanje pet minuta. Vraticete se svjeziji, odmorniji i zadovoljniji sa novokreiranim vezama.

Dodatni linkovi

The Ultimate Deliberate Practice Guide: How to Be the Best

Tehnike za aktivno ucenje programiranja

2022-03-05T19:33:53Z

Balansiranje izmedju pasivnog i aktivnog ucenja je vazno jer gledanje videa ili citanje teksta (pasivno ili konceptualno ucenje) ne znaci da je nesto savladano. Drugim rijecima, posmatranjem utakmica ili kako se rade magicni trikovi kartama ne znaci da je steceno znanje primjenljivo. Sticanje vjestine je najdjelotvornije sa aktivnim metodama ucenja. Zato se vise broji — opsjednutost primjenom nad teorijom. Pokvarite kod, pravite greske, gradite projekte, rjesavajte probleme i u procesu koristite Google i Stack Overflow.

Djecija radoznalost

Dobra je ideja biti dijete i uzeti par minuta na kraju videa, igrati se sa kodom i izazvati gresku. Na primjer, zapitati se sta napisani kod radi i sta ce se desiti ukoliko se izmijeni neki dio (koji vama mozda ima smisla), potom ga izmijeniti, vidjeti da li ce web pregledac i dalje razumjeti kod ili prikazati neku specificnu gresku. Popravite kod i ponovo pokvarite. Um ce jasnije usvojiti kako kod funkcionise. Ili

Pronadjite mali projekat koji je neko drugi napisao i koji je zanimljiv.
Rasclaniti ga red po red.
Zatim poceti mijenjati kod i posmatrati sta promjene uzrokuju.
Kada ne kodirate mozete citati tekstove na temu koja je povezana sa projektom.

Samostalno rekreiranje projekta

Takodje mozete samostalno rekreirati projekat bez pomoci videa koji ste pratili. Pozeljno je koristiti internet i Stack Overflow. U toku procesa mozda odustanete misleci da niste ni blizu, a falila je jedna linija koda. U redu je ako pokusaj nije uspjesan i normalno je osjetiti frustriranost. Ona je dio procesa ucenja<3 !! Izaberite projekte i izazove koji vode vjestine do same granice i malo izvan nje.

The Feynman Technique

Kada pokusavate savladati neku materiju, pokusajte to nauciti nekoga drugog. Ova tehnika sprecava da previdimo nedostatak znanja sto je korisno ukoliko je potrebno temeljno razumjeti temu. Osnovni koraci Fejnmanove tehnike ucenja:

Uciti.
Objasniti nekome jednostavnim izrazima. U toku ovog koraka je neizbjezno pronaci rupe u znanju (sto je i cilj).
Popuniti praznine. Pronaci informacije koje nedostaju. Svrha koraka je fokusirati se na slabosti.
Pojednostaviti. Nije lako otkloniti nered i visak informacija, te objasniti nesto dovoljno jasno da i mala djeca mogu razumjeti. 4. korak tjera na dublje razmisljanje o temi i razumijevanje kako se dijelovi informacija uklapaju zajedno.

Ponoviti korake dok proces ne bude uspjesan.

Biljeske i komentarisanje koda

Vjerovatno cete pisati biljeske i vremenom primjetiti da nemaju znacaj za prisjecanje informacija kao sto su imale kada bi se pripremali za test. U ovom slucaju komentarisanje koda djelotvornije produbljuje razumijevanje materije. U programiranju je puno znacajnije iskonski razumjeti, nego znati kod napamet (ucenje napamet je obicno trosenje vremena koje se moze iskoristiti na usvajanje koncepata) jer se programiranje ne svodi na testove i same alate, koliko na sposobnost primjenjivanja znanja (znati koristiti cekic, ne znaci da znate napraviti kucu). Detalje ce pamtiti Google. Trik je znati gdje pronaci potrebne detalje i kako ih primjeniti, ali to je tema za drugi tekst.

Some people say a software engineer is just a professional Google searcher 💼. Some developers are smart enough to know that memorizing every piece of information can be a waste of time. It's more efficient to just google the information you need on demand. Fireship

Da se vratimo na komentarisanje koda. Komentari su dijelovi teksta koje racunar ignorise prilikom interpretiranja koda. Oni sluze programerima i prikazani su samo unutar programskog okruzenja, ali ne i na web stranici. Komentarisanje nije neophodno, medjutim postoji vise razloga zasto bi neko komentarisao kod. Komentari su inace temelj dobre komunikacije i dokumentacije. Oni olaksavaju radni tok medju programerima koji rade na istom projektu i objasnjavaju dijelove koda. Mogu koristiti i kao pocetna osnova za pravu dokumentaciju koja ce sluziti krajnjim korisnicima.

Sa druge strane, upotreba komentara ne mora biti vrijedna samo u profesionalnom smislu iskusnim programerima.
Kroz odgovaranje na pitanja poput "Sta rade ove instrukcije?" ili "Zasto je vazan ovaj korak?" se daje jasniji kontekst kako radi kod. Komentari dobijaju ulogu biljezaka na marginama. Ovakva primjena komentara uslovljava pocetnika da razumije i usvaja materijal. To je najveci poticaj da komentarisete od pocetka. Kada osjetite da pretjerano komentarisete, vjerovatno ne komentarisete dovoljno. Pretjerujte. Objasnite svaku linija koda i sta one rade. Nije vazno da li ste vi napisali tu liniju ili je kopirali sa Stack Overflowa.

Sticanjem iskustva ce se ovo smanjiti jer cete prirodno prepoznati sta jeste potrebno komentarisati i dalje, a sta nije. U toku stvaranja ove navike izgradicete jednu od vaznih vrlina kvalitetnog programera i nauciti jasnije komunicirati kroz komentare.

/*
'document' object lets 
JavaScript access any element 
in an HTML page.
'getElementById(id)' method 
finds an element by element id.
'innerHTML' sets or returns the 
HTML content of an element.
*/

// Will change the heading with id = "h"
document.getElementById("h").innerHTML = "Novi naslov";
// Will change the paragraph with id = "p"
document.getElementById("p").innerHTML = "Ovo je tekst paragrafa.";

Jos jedna aktivnost koja moze odmjeniti klasicne biljeske je pisanje dokumentacije i README.md fajla u sklopu svakog projekta. README.md je uvodni tekst kroz koji korisnici upoznaju projekat. To je tekstualni fajl sa informacijama o aplikaciji ili kodu. Moze sadrzavati kratko objasnjenje motivacije iza stvaranja i odrzavanja projekta, odnosno zasto on postoji, instrukcije kako pokrenuti isti projekat na svom racunaru, kako koristiti aplikaciju, detalje o azuriranjima i sve ono sto bi korisnik trebao znati.

Pocetnici obicno ne rade kompleksnije projekte i ne trebaju mnogo toga objasniti, sto je i razlog zasto je tada jednostavnije poceti. Mozete objasniti svrhu aplikacije, postaviti snimak ekrana kako ona izgleda, navesti koje tehnologije ste koristili, integrisane funkcionalnosti itd. Za inspiraciju procitajte druge dokumentacije ili clanak sa smjernicama koji je namjenjen pocetnicima.

`README.md` fajl za Eleventy Netlify Boilerplate na GitHubu.

.md esktenzija u nazivu fajla oznacava "Markdown documentation". To je jednostavan jezik za oznacavanje sadrzaja koji se lako pretvara u tekst. Za pisanje README.md fajla je potrebno nauciti Markdown sto se moze izvesti za sat ili dva. Potrazite tutorijal ili Markdown Cheatsheet.

Komentarisanje koda i pisanje dokumentacije su navike na kojima cete biti zahvalni, a cijenice ih buduce kolege i poslodavci. I (ako smijem da sugerisem) nemojte ih zaboraviti u projektima u porfoliju! Dokumentacija objasnjava vas projekat, a komentari linije koda.

Biljeske i dalje mogu biti korisne u specificnim situacijama. Na primjer, ukoliko ne mozete usvojiti nesto sto vam uporno zatreba ili za organizaciju zadataka. Ako se nesto moze lako pronaci na internetu obicno nije vrijedno zapisivanja jer te biljeske vjerovatno nece biti ponovo koristene.

Pauze

Za optimalniji efekat ne treba podcjeniti vaznost redovnih pauza kako bi se mozak oporavio. Cilj je raditi pametnije umjesto teze.

Aktivno ucenje bez pauza gubi ucinak jer kognitivne mogucnosti opadaju, fokus se ne moze odrzati duzi vremenski period i kvalitet sesije ucenja se smanjuje. Ucenje programiranja nije sprint, vec maraton i vazno je uvjeriti se da je sistem usvajanja vjestine odrziv na duzi period. Sa druge strane, mozak radi i kada se odmara. Znanje i materijal na koji je do skoro bio fokusiran se u ovoj fazi utemeljuje.

Kvalitet sesija se moze povecati kroz flow stanje u kojim pauze igraju znacajnu ulogu.

Flow

Flow je izrazito prijatno i optimalno psiholosko stanje koje ljudi postizu kada su potpuno zaokupljeni nekim zadatkom. U toku ovog stanja zaboravljaju na sve osim zadatka i aktivnost je prilicno ispunjavajuca, sto znaci da ce osoba biti sklona ponavljanju aktivnosti.

Nije ga lako postici u pocetku, posebno tokom pasivnog nacina ucenja. Obicno se postize u toku aktivne primjene znjanja (npr. pisanje koda). Potreban je unaprijed ulozen napor i desice se sa vremenom, ali to ne znaci da flow stanje treba biti krajnji cilj. Previse ulozenog napora i forsiranje ce paradoksalno uciniti postizanje flowa tezim.

Dobra strategija je uciti kroz kratke sesije sa intenzivnim fokusom i pauzama izmedju, naspram dugih sesija slabijeg intenziteta. Neke okvirne smjernice za postizanje ovog stanja:

Ukloniti sve sto moze ugroziti stanje dubokog fokusa. Npr. raditi u prostoriji koja sluzi samo za ucenje i maksimalno minimizuje distrakcije, biti nedostupan za druge, ugasiti sva nepotrebna obavjestenja itd.
Postaviti tajmer za pocetak i kraj sesije.

Sesije od 25 - 90 minuta u kojima je strogo zabranjen multitasking. Fokus je na jednom zadatku.
Pauze u ovisnosti od sistema i duzine sesije (npr. sesija 25 - pauza 5, sesija 50 - pauza 10 minuta). Slusajte tijelo i prilagodite sistem sebi. Fizicka promjena lokacije, setnja, uzivanje u suncu, razgovor sa nekim u toku pauze djelotvornije puni baterije od koristenja elektricnih uredjaja.

Odrediti izrazito specifican rezultat ili ishod za svaku sesiju, recimo kreiranje jednog malog dijela funkcionalnosti. Dobro razmislite sta zelite postici u toku kako bi optimalno iskoristili vrijeme i sprijecili da um odluta. Odredjivanje cilja omogucava pracenje i osjecaj napredovanja.
Vjezba, vjezba, vjezba. Sto vise vjezbate aktivnost, to ce ona donositi vise zadovoljstva. Sa dozom zadovoljstva, izazova i zanimljivosti se povecava i vjerovatnoca postizanja flow stanja.

Tekst na temu promisljenog/namjernog vjezbanja ima poveznice. Post je odvojen jer radi kao cjelina, ali u njemu pise i vise o efektnijem vjezbanju, fokusu, oporavku itd.

Sta je web sajt?

2022-02-23T19:33:53Z

Tekst je namjenjen laicima koji otprilike zanima kako izgleda struktura jednostavnijeg sajta i koncept sadrzaja koji ga cini. Sve navedeno u ovom dijelu teksta je jednostavno savladati kroz ucenje HTML, CSS i JavaScript jezika.

Post je nastao kao dio teksta iz Frontent - vodic za ucenje

Sajt je neki broj fajlova sa kodom, stilovima, medijskim sadrzajem itd. Da bi ti fajlovi djelovali kao cjelina neophodno je sastaviti ih u logicnu i povezanu strukturu kako bi bili svjesni ostalog sadrzaja sa kojim treba komunicirati. Proces izgradnje sajta se izvrsava na lokalnom kompjuteru da bi se uvjerili da web stranica izgleda i radi ispravno prije nego se otpremi na server.
Fajlovi koji cine web stranicu bi trebali biti organizovani u zajednickom folderu, a folder moze biti smjesten bilo gdje na lokalnom racunaru (recimo Desktopu da bi ga bilo jednostavno pronaci i pretpostavicemo da je folder nazivan "project").

Pogledacemo pojedinacne segmente koji najcesce cine web stranicu.

index.html fajl koji ukljucuje
stilove,
skripte i
slike.

`index.html` kao pocetna web stranica

Svaka web stranica na sajtu bi trebala imati .html dokument koji je predstavlja. Recimo, web stranicu "O nama" je moguce nazvati o-nama.html, a "Kontakt" kontakt.html. Dok se index.html dokument najcesce koristi kao ime za pocetnu stranicu (home) i web pregledac je prvu interpretira ukoliko u URL adresi nije naznaceno da klijent trazi neki odredjeni dokument (nekisajt.ba ce prikazati index.html, a nekisajt.ba/kontakt.html kontakt stranicu).

U pocetnoj (index.html) stranici se moze kreirati meni sa vezama koje vode ka o-nama.html i kontakt.html. Web je ipak mreza HTML dokumenata sa vezama koje dalje vode na druge HTML dokumente i web stranice.

.html ekstenzija govori da se radi o dokumentu koji sadrzi Hypertext Markup Language (HTML), jezik koji se koristi za kodiranje strukture web stranice. "Hypertext" se odnosi na hiperveze i linkove koji se dodaju kroz HTML. "Markup Language" se odnosi na tagove kojim se definise struktura stranice i njen sadrzaj. Tagovi se obicno sami opisuju i intuitivni su. Izgledaju otprilike ovako:

<img src="img/logo.jpg">

<h1>Pocetna stranica</h1>
<p>Ovdje mozete procitati sve o nasoj web stranici.</p>

<a href="o-nama.html">O nama</a>
<a href="kontakt.html">Kontakt</a>

Ukoliko ne postoji fajl na koji src ili href atribut vode, ta slika ili veza nece raditi.

h1 je naslov ili header najviseg nivoa. p oznacava paragraf. a predstavlja vezu.

Sto web pregledac interpretira ovako:

Ne izgleda magicno, ali HTML definise samo strukturu i znacenje sadrzaja.

Folder sa stilovima

Je folder sa CSS (Cascading Style Sheets) fajlovima koji sadrze CSS kod za stilizovanje sadrzaja (poput izbora fonta i velicine slova, boja, razmaka, animacija, pozicije elementa itd.). Sledeci primjer prikazuje kako naslov <h1>Pocetna stranica</h1> iz prikazanog index.html koda obojiti u ljubicasto.

h1 {
  color: purple;
}

Sada je potrebno index.html dokumentu pokazati gdje se nalazi CSS kod kako bi se on primjenio na toj stranici. Recimo da je ovaj CSS kod sacuvan u fajlu sa nazivom style.css, da se folder sa stilovima naziva styles i da smo ih ovako organizovali:

Raspored foldera i fajlova unutar glavnog foldera "project".

Sa <link> elementom u zaglavlju HTML stranice se moze naznaciti put do style.css kroz href atribut :

<link href="styles/style.css" rel="stylesheet">

<html>
  <head>
    <link href="styles/style.css" rel="stylesheet">
  </head>

  <body>
    <!-- Sadrzaj <h1> <p> <img> -->
  </body>
</html>

html tagovi oznacavaju pocetak i kraj HTML koda, odnosno on sadrzi sve ostale HTML elemente. Sadrzaj izmedju head tagova opisuje HTML dokument i ne prikazuje se na web stranici. Unutar body tagova se nalazi sav prikazani sadrzaj na web stranici (naslovi, paragrafi, slike, veze, tabele, liste itd.).

HTML i CSS nisu programski jezici i lako je savladati osnove.

Folder sa skriptama

Ovaj folder je namjenjen fajlovima sa skriptnim kodom poput JavaScripta i najcesce koristi se za dodavanje interaktivnog aspekta web stranici (dodavanje HTML elemenata, izmjenu postojeceg sadrzaja, promjenu stilova, reagovanje na radnje korisnika poput pomjeranje misa, klik, pritisak tipke na tastaturi, slanje zahtjeva serveru, upravljanje kolacicima, postavljanje pitanja korisniku, pamcenje podataka u lokalnom skladistu itd.). Medjutim, JavaScript omogucava i kreiranje servera, mobilnih aplikacija itd.

JavaScript kao najpopularniji programski jezik weba otkljucava nove dimenzije kreativnosti i moci, ali je i izazovniji za savladati. Medjutim, karakteristike JavaScripta su slicne drugim programskim jezicima i poznavanje njegovih osnova olaksava ucenje drugih. Ono sto JavaScript cini jedinstvenom je:

Potpuna integracija sa HTML/CSS
Proste stvari je jednostavno izvesti
Podrzavaju je svi bolji pretrazivaci - sto je razlog jer je najrasprostranjeniji alat na webu

Sa sledecim kodom mozemo izmijeniti sadrzaj <h1> naslova iz teksta "Pocetna stranica" u "Dobrodosli!":

var naslov = document.querySelector('h1');
naslov.textContent = 'Dobrodosli!';

querySelector() u ovom slucaju "selektuje" <h1> element, sto je slicno onome sto je uradjeno u CSS kodu. Prvo je izabran element na koji treba primjeniti kod i potom su navedene instrukcije.

<h1> element je smjesten u varijablu pod nazivom "naslov" da ne bi svaki put ponavljali isti dio koda. Varijabla je nadovezana na textContent koji predstavlja sadrzaj naslova, te je znakom jednakosti odredjena nova vrijednost sadrzaja iako u HTML dokumentu pise nesto potpuno drugo.

Medjutim, HTML dokument nije svjestan ovog koda. Da bi ga pronasao trebamo mu ukazati na to da postoji JavaScript fajl (sa .js ekstenzijom) i gdje. Recimo da je naziv fajla main.js, a naziv foldera sa skriptama scripts.

Raspored foldera i fajlova unutar glavnog foldera "project".

Kroz <scripts> tag mozemo HTML dokumentu reci da se radi o skriptnom jeziku, a kroz src atribut gdje je smjesten kod koji treba primjeniti na web stranicu.

<script src="scripts/main.js"></script>

<scripts> moze biti smjesten i u zaglavlju (unutar <head> taga) i u tijelu (unutar <body> elementa). Cesto se postavlja tik prije zatvaranja </body> taga.

Folder sa slikama

Ovaj folder je namijenjen za slike koje se koriste na sajtu. Vec smo ukljucili sliku i folder u primjerima iznad. Slike se u HTML jeziku dodaju sa tagom <img> a put do slike u src atribut:

<img src="img/logo.jpg">

Raspored foldera i fajlova unutar glavnog foldera "project".

Nije neophodno podijeliti fajlove kao u iznad prikazanom primjeru, ali su projekti obicno kompleksniji i preporucljivo je organizovati fajlove. Nacin na koji se ti fajlovi uvrstavaju u HTML dokument je definisan i nije proizvoljan. Neophodno je uvrstiti tacan tag, atribut i put do fajla.

Imenovanje fajlova i foldera

Foldere i fajlove je preporucljivo imenovati malim slovima jer su mnogi racunari i serveri osjetljivi na velika i mala slova. To znaci da prave razliku izmedju njih i da index.html i InDeX.html za njih nije isti fajl.

Najbolja praksa je razdvajati rijeci sa crticom (-) umjesto razmaka jer ih web pregledaci, serveri i programski jezici ne interpretiraju dosljedno. Neki sistemi ovaj razmak tretiraju kao da se radi o dva razlicita fajla, a vecina servera ce na mjesto razmaka staviti "%20" (kod za razmak: URL Encoding) ili "+" znak. Google crticu vidi kao karakter koji razdvaja rijeci sto je razlog vise da se koristi umjesto donje crte (_).

Dobar primjer: o-nama.html.

Osnove HTTP protokola

2022-02-16T19:33:53Z

Hypertext Transfer Protocol je temelj Word Wide Weba i komunikacijski protokol pomocu kojeg je moguce povezati se sa serverima sirom svijeta.
Primarna funkcija HTTP protokola je da uspostavi vezu sa serverom, trazi sve potrebne informacije za prikaz web stranice i preuzme odgovor od servera.

Ovaj post je nastavak teksta Kako radi web?.

HTTP protokol u URL adresi.

URL adresa identifikuje sa kojim serverom klijent zeli komunicirati, ali ne govori i sta se od njega trazi. Zato web pregledac salje zahtjeve kroz HTTP poruke, a HTTP protokol definise jezik izmedju klijenta i servera.

Kroz HTTP poruku klijent (web pregledac) naglasava kakvu reprezentaciju i u kom obliku zeli sadrzaj, kao i klijentovu namjeru (da cita, modifikuje, brise itd.). HTTP poruka je jednostavna tekstualna poruka koja moze biti zahtjev (request) od klijenta ili odgovor (response) od servera:
Zahtjev sadrzi HTTP metodu (GET, POST, Put, DELETE..) koja serveru govori sta klijent zeli da uradi, gdje se nalazi zeljeni sadrzaj i zaglavlja koja daju dodatne podatke o sadrzaju koji se trazi kao i vise informacija o samom klijentu.
Odgovor ukljucuje statusni kod o uspjesnosti realizacije zahtjeva, zaglavlja sa dodatnim korisnim informacijama o odgovoru i sadrzaj odgovora.

Zvuci apstraktno i zato su u nastavku teksta prikazani prakticni primjeri HTTP poruka i njihova objasnjenja.

HTTP ima definisan format koji odredjuje strukturu zahtjeva, kao i sve neophodne informacije da bi server shvatio sta se od njega trazi. Zato pri pretrazi naziva domene veb pregledac sam dopuni http:// protokol u URL adresi ukoliko on nedostaje.

HTTP je i ujedno protokol bez stanja (stateless), odnosno protokol koji ne odrzava konstantnu vezu izmedju klijenta i servera, vec se svaki upuceni zahtjev posmatra odvojeno. To znaci da server ne moze pratiti stanja i informacije o klijentu izvan tog zahtjeva, te da svaki zahtjev mora sadrzavati neophodne informacije potrebne za njegovo izvrsenje.

Ukoliko je neophodno kontinuirano cuvati podatke o nekom stanju (npr. da je korisnik prijavljen), moguce je koristiti lokalno skladiste (Local Storage), kolacice (Cookies), sesije (Sessions) itd.

3 faze standardne HTTP sesije izgledaju ovako:

Klijent uspostavi TCP vezu sa serverom
Klijent salje zahtjev i ceka odgovor
Server obradjuje zahtjev i salje odgovor sa statusnim kodom o uspjesnosti obrade

Dalje u tekstu su detaljnije objasnjene HTTP verzije, HTTP metode, HTTP zahtjev i odgovor, HTTP zaglavlje i podjela, proxy, kesiranje, kolacici, TCP veza, HTTPS, alati za pracenje HTTP saobracaja i HTTP statusni kodovi.

HTTP verzije

Nekada je za prikaz web stranice bilo dovoljno preuzeti jedan dokument. Danas mnogi sajtovi zahtijevaju vise od jednog fajla za prikaz stranice. Kada bi web pregledaci uspostavili konekciju i cekali da se preuzme jedan fajl da bi poceo preuzimati drugi, proces bi uzimao vise vremena.

HTTP/2.0 omogucava klijentu da zahtjeve salje istovremeno. Ova tehnika je poznata kao multipleksiranje i smanjuje vrijeme potrebno za ucitavanje stranice.
HTTP/1.1 dozvoljava samo jedan istovremeni zahtjev.

Poredjenje efikasnosti HTTP/1.1 i HTTP/2 protokola.

Na slici iznad vidimo da je klijent prvo trazio index.html kroz HTTP zahtjev. Server je poslao 200 OK i trazeni fajl u odgovoru. Web pregledac potom rasclanjuje kod index.html fajla koji ukljucuje style.css i script.js:

<link rel="stylesheet" href="/style.css">
<script src="/script.js"></script>

Sto znaci da su style.css i script.js potrebni za prikaz stranice, te je klijent u prvom primjeru (primjer rada HTTP 1.1 protokola) poslao zahtjev za preuzimanje style.css i nakon sto mu je server dostavio fajl, poslao je jos jedan zahtjev za scripts.js.
U drugom primjeru (primjer rada HTTP 2 protokola) je poslao oba zahtjeva istovremeno, smanjio broj koraka i ubrzao prikazivanje stranice.

HTTP metode

Navedene su HTTP metode koje se najcesce primjenjuju, ali nisu ogranicene na njih.

GET dobija podatke od servera da bi ih klijent citao. U ovakvom zahtjevu URL bi trebao nositi sve informacije koje su potrebne serveru da bi pronasao trazeni sadrzaj. Primjer https://nekisajt.ba/pretraga?trazi=web+development&poredaj=najnovije
POST salje nove podatke serveru.
PUT modifikuje vec postojece podatke na serveru.
DELETE brise postojece podatke sa servera.

HTTP zahtjev

HTTP zahtjev je ona HTTP poruka koju klijent salje serveru i sastoji se od sledecih dijelova:

Startna linija opisuje sta klijent trazi - sastoji se od HTTP metode, putanje i HTTP verzije: GET /blog/index.html HTTP/1.1
Zaglavlje zahtjeva je parametar poruke - obicno ih ima vise i oni daju informacije o posiljaocu, nacinu na koji klijent zeli da komunicira i o samoj poruci
Prazna linija - naznacuje da je zaglavlje zavrsilo i odvaja ga od tijela poruke.
Tijelo poruke je sadrzaj poruke - opcionalan. U slucaju jednostavnijih zahtjeva je prazno. Npr. kada klijent trazi staticni sajt. Ukoliko trazi obradu podataka usljed podnosenja forme tijelo ce sadrzati podatke sa forme.

Primjer HTTP zahtjeva koji zeli dobiti (GET HTTP metoda) fajlove staticne stranice i nema potrebe dalje obradjivati bilo kakve podatke. Prva linija je startna linija koju smo pomenuli. Sve ostale su neki od mogucih parametara iz zaglavlja zahtjeva. U ovom slucaju tijelo nije potrebno.

GET /blog/index.html HTTP/1.1
Host: nekisajt.ba
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Connection: Keep-Alive
Cache-Control: no-cache
Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8

Medjutim ako je korisnik popunio i poslao formu kroz svoj web pregledac, on zapravo salje zahtjev serveru sa startnom linijom koja sadrzi metodu za slanje podataka (poput POST HTTP metode). U ovom primjeru postoji prazna linija i tijelo odvojeno od zaglavlja poruke. U tijelu vidimo informacije poslane kroz formu.

POST /test/demo_form.php HTTP/1.1
Host: nekisajt.ba

name1=John&name2=Doe

HTTP odgovor

Odgovor se sastoji od sledecih dijelova:

Statusna linija je statusni kod koji pokazuje da li je zahtijev uspjesan (200 OK) ili zasto nije. Ona takodje ukljucuje HTTP verziju i kratak opis statusa.
Zaglavlje odgovora su dodatni podaci o tipu sadrzaja, informacije o serveru itd.
Prazna linija - naznacuje da je zaglavlje zavrsilo i odvaja ga od tijela poruke.
Tijelo poruke je sadrzaj poruke - opcionalan. Na primjer, ovo moze biti HTML sadrzaj trazene web stranice, slika itd.

Sledeci primjer je HTTP odgovor koji prikazuje stanje greske nakon sto server nije uspio pronaci trazenu web stranicu (404).

HTTP/1.1 404 Not Found
Date: Sun, 18 Oct 2012 10:36:20 GMT
Server: Apache/2.2.14 (Win32)
Connection: Closed
Content-Type: text/html; charset=iso-8859-1

HTTP zaglavlje

Svaka informacija u zaglavlju je formatirana kao par koji ima Ime-Zaglavlja: vrijednost. Na ovaj nacin HTTP protokol ukljucuje sve vazne informacije koje mogu koristiti klijentu i serveru. Zaglavlja se mogu podijeliti prema njihovom kontekstu:

Generalna zaglavlja se mogu koristiti za pruzanje informacija o zahtjevu ili odgovoru, ali ne govore o samom sadrzaju poruke
Zaglavlja zahtjeva pruzaju dodatne podatke o zahtjevu i salje ih klijent
Zaglavlja odgovora pruzaju dodatne podatke o odgovoru i salje ih server
Zaglavlja entiteta se koriste da opisu sadrzaj poruke

Mogu se podijeliti i u kategorije po: Authentication, Caching, Client hints, Device client hints, Conditionals, Connection management, Content negotiation, Controls, Cookies, CORS, Downloads, Message body information, Proxies, Redirects, Request context, Response context, Range requests, Security, Server-sent events, Transfer coding, WebSockets HTTP headers.

Opsirna dokumentacija o zaglavljima po kategorijama na developer.mozilla.org

Hajde da pogledamo kako izgledaju neka od osnovnih zaglavlja.

Autentifikacija

WWW-Authenticate zaglavlje definise metodu autentifikacije koja se koristi da bi se pristupilo sadrzaju. Ono se salje u zaglavlju odgovora, odnosno server salje klijentu.
Authorization zaglavlje sadrzi kredencijale za autentifikaciju korisnickog agenta. Klijent salje u zaglavlju HTTP zahtjeva kako bi dokazao da moze pogledati zasticeni sadrzaj.

Uslovi

Last-Modified zaglavlje predstavlja datum poslednje izmjene.
ETag ili entity tag je identifikator verzije sadrzaja. U trenutku promjene sadrzaja ETag vrijednost se mijenja. Ukoliko web pregledac uporedi vrijednosti verzije koju ima u kesu i vrijednost verzije sadrzaja koju ima server, moze odluciti da li ima potrebe da zahtijeva i preuzme novi sadrzaj ili ce prikazati onaj koji je sacuvan.
If-Match zaglavlje cini zahtjev uslovnim jer zeli potvrditi da li se poklapa sa drugim entity tagom.
If-None-Match zahtjev uslovljava i primjenjuje metodu samo ako se kesirani sadrzaj ne poklapa ni sa jednim entity tagom.

Upravljanje vezom

Connection zahtjev kontrolise hoce li mrezna veza ostati otvorena nakon sto se zavrsi trenutna transakcija izmedju servera i klijenta.
Keep-Alive zahtjev kontrolise koliko dugo veza treba ostati otvorena.

Pregovaranje o sadrzaju (Content Negotiation)

Accept zaglavlje obavjestava server o vrstama podataka koji se mogu poslati nazad.
Accept-Language zaglavlje obavjestava server da klijent npr. prihvata spanski jezik. Na serveru je da pokusa ispuniti zahtjev, sto ne znaci da hoce. Mozda posalje sadrzaj na engleskom.

Ovo se smatra pregovaranjem. Pregovaranje o sadrzaju je nesto za sta tipicni korisnik ne mari, ali za web developere znaci potencijal da linijom koda usavrse uslugu koja ce dostaviti informaciju u idealnom formatu za klijenta ili korisnika.

Informacije o tijelu poruke

Content-Length zaglavlje govori o velicini tijela u bajtovima.
Content-Type zaglavlje oznacava tip medija.
Content-Language zaglavlje opisuje ljudski jezik koristen u sadrzaju.

Kontekst zahtjeva

From, Host, Referer i User-Agent opisuju detalje o klijentu koji je pokrenuo zahtjev.

Proxy

Proxy je posrednik izmedju klijenta i zeljenog servera. HTTP poruke ne idu direktno trazenom serveru ili klijentu ukoliko je prisutan posrednik. Proxy server presretne poruke i prosljedjuje ka finalnoj destinaciji. To takodje znaci da proxy moze manipulisati HTTP porukom, izmijeniti je, citati i zapisati sadrzaj.

Proxy se moze koristiti za pracenje saobracaja ili blokiranje pristupa nekim sajtovima (npr. socijalnim mrezama), za kompresiju sadrzaja, anonimnost korisnika tako sto proxy server predstavlja sebe kao klijenta koji je napravio inicijalni HTTP zahtjev itd.
Proxy moze pomoci pri uravnotezenju opterecenja servera tako sto prosljedjuje nove zahtjeve na onaj koji je najmanje opterecen u tom trenutku. SSL i sifriranje HTTP poruka moze raditi proxy umjesto servera. Proxy za kesiranje pohranjuje kopije sadrzaja kojima se cesto pristupa i moze da odgovara na takve HTTP zahtjeve direktno.

Kesiranje (Caching)

Efikasnost web stranica se moze znacajno popraviti ponovnom upotrebnom prethodno preuzetog sadrzaja. To znaci da server ne mora slati sadrzaj koji klijent vec ima. Iz ovog razloga kes smanjuje kasnjenje, potrosnju mreznog protoka i vrijeme za preuzimanje neophodnog sadrzaja za prikaz web stranice. Kada postoji vise zahtjeva za isti sadrzaj, server ga moze iznova i iznova slati. Alternativa je da se sadrzaj kesira na proxy serveru ili u lokalnom skladistu klijenta dok serveru ostaje prostor za bavljenje vaznijim obradama, a vrijeme za prikaz stranice djeluje znatno brze.

Dvije vrste kesa

Javni ili dijeljeni kes je onaj koji dijeli vise korisnika. Obicno se nalazi u kes memoriji proxy servera. Cesto se koristi za sadrzaj koji je popularan medju korisnicima. Na primjer, dobavljac internet usluga (Internet service provider ili ISP) moze imati proxy server kao dio svoje lokalne mreze da bi brze usluzio mnogobrojne korisnike popularnim sadrzajem bez nepotrebnog gusenja protoka.

Privatni kes je namjenjen jednom specificnom korisniku. Web pregledac uvijek drzi privatni kes (preuzete i privremeno cuvane fajlove) na korisnikovom sistemu. Ona je korisna, izmedju ostalog, pri navigaciji naprijed/nazad kroz posjecene web stranice. Sve sto je web pregledac sacuvao na sistemu se moze pojaviti skoro istog trenutka na ekranu.

Kada kesirati i brisati privremeno pohranjen sadrzaj?

Ukoliko web pregledac ili proxy server dobije nov sadrzaj kao odgovor od servera, taj sadrzaj se automatski moze pohraniti. Medjutim, moguce je naglasiti da se nesto ne treba cuvati kroz HTTP zaglavlje Cache-Control koje smo nesto prije pomenuli. Expires i Pragma su zaglavlja koja takodje kontrolisu istek nekog kesa iako su zvanicno zastarjela do HTTP 1.1. Ova zaglavlja su dostupna da bi bila kompatibilna sa starijim verzijama (backward compatibility).

public, private, no-cache, no-store, max-age su samo neke od vrijednosti Cache-control zaglavlja.

public: sadrzaj kesira proxy server.
private: web pregledac kesira sadrzaj.
no-cache: sadrzaj ce se pohraniti samo za validaciju sadrzaja. Klijent salje serveru sadrzaj za provjeru validnosti prije nego ga obrise.
no-store: ne treba pohranjivati HTTP poruku. Zahtjev i odgovor se salju iznova svaki put.
max-age: kontrolise istek kesa sto izgleda ovako max-age=<sekunde> i definise kolicinu vremena kojom se sadrzaj smatra novim (fresh), odnosno koliko dugo web pregledac moze koristiti ovaj kesirani sadrzaj.

Sadrzaj koji je obicno statican je preporucljivo kesirati na proxy serveru, kao slika logotipa pocetne stranice. Kesirati privatno je preporucljivo ukoliko postoji prilagodjeni prikaz. Na primjer, ukoliko web stranica sadrzi ime korisnika.

U sledecem primjeru vidimo HTTP odgovor gdje Cache-Control dozvoljava javni i privatni kes, a moze se zadrzati 157,784,760 sekundi ili pet godina. Expires se koristi za starije verzije.

HTTP/1.1 200 OK
Last-Modified: Tue, 10 Oct 2019 22:38:58 GMT
Expires: Sat, 10 Oct 2024 22:38:58 GMT
Cache-Control: max-age=157784760,public

Ukoliko klijent posalje HTTP zahtjev koji ukljucuje i uslovno zaglavlje kao If-Modified-Since: Wed, 25 Jan 2020 14:27:01 GMT. Server odgovara sa 304 Not Modified ako sadrzaj nije modifikovan od dana preuzimanja i klijent moze slobodno koristiti vec pohranjen sadrzaj.

Jos jedan primjer validiranja je ETag. On nema drugog znacenja i generisan je tako sto je sadrzaj provucen kroz algoritam za hesiranje. Promjena i jednog slova u sadrzaju rezultira generisanjem drugacijeg ETaga. Poredjenjem dva ETaga se moze utvrditi da li se desila promjena. Ukoliko su ETag vrijednosti iste — kes fajlovi koje ima klijent su validni. Klijent preuzima sadrzaj ponovo ukoliko su vrijednosti razlicite.

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

Kada server odgovori sa zaglavljem Clear-Site-Data brisu se podaci pretrazivanja (npr. kolacici, skladiste, kes memorija).

Kolacici

Pomenuto je da je HTTP protokol bez stanja i da to znaci da je svaka transakcija zahtjev-odgovor nezavisna od bilo koje prosle ili buduce transakcije. Sa druge strane, mnoge web aplikacije i usluge imaju razna stanja. Jedan od uobicajnih je kada Facebook zna da smo prijavljeni na nalog iako iznova saljemo nove zahtjeve, a prosli su davno zaboravljeni.

Web stranice koje imaju potrebu pratiti korisnike ce se obicno okrenuti kolacicima. Kolacic je mali tekstualni fajl koji web pregledac dobije od web stranice pri posjeti. Kolacic sluzi da podsjeti sajt o korisnikovim prethodnim posjetama i prilagodi prikaz u skladu sa njim. Kolacic u sebi moze imati informacije poput korisnickog imena i lozinke ili identifikacionog broja za identifikaciju sesije.

Kada klijent posalje zahtjev da vidi sadrzaj web stranice, server u odgovoru moze ukljuciti kolacic kroz HTTP zaglavlje. Onda web pregledac u svakom sledecem zahtjevu salje i sadrzaj kolacica u HTTP zaglavlju.

Kako se postavlja kolacic?

Za postavljanje kolacica kroz HTTP odgovor se koristi Set-Cookie HTTP zaglavlje. Za slanje vise kolacica je potrebno postaviti vise Set-Cookie: <ime-kolacica>=<vrijednost-kolacica> zaglavlja u istom odgovoru.

HTTP/2.0 200 OK
Content-Type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

Svakim narednim zahtjevom web pregledac salje prethodno dobijene kolacice kroz HTTP zaglavlje Cookie.

GET /sample_page.html HTTP/2.0
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

Ovaj tekstualni fajl ne moze imati vise od 4 KB.

TCP veza i HTTP

Vidjeli smo kako HTTP omogucava web pregledacu da zahtjeva sadrzaj od servera, ali HTTP specifikacija ne govori o tome kako zahtjev ili odgovor putuju preko mreze do servera ili klijenta. Iz ovog razloga je potrebno zaviriti u slojeve ispod HTTP protokola. Mrezna komunikacija se sastoji od vise slojeva i svaki od njih ima odredjene odgovornosti.

HTTP se jos zove i aplikacijski sloj jer predstavlja jezik kojim dvije aplikacije komuniciraju preko mreze (npr. klijent i server).

Putovanje HTTP zahtjeva kroz slojeve.

HTTP poruka od web pregledaca mora putovati kroz seriju slojeva da bi stigla na destinaciju. Ispod aplikacijskog sloja se nalazi protokol transportnog sloja. HTTP obicno putuje kroz TCP (Transmission Control Protocol) i pri biranju URL adrese web pregledac uspostavlja TCP vezu sa serverom, tipicno na portu 80. TCP veza se brine o tome da se poruka dostavi serveru bez gubitka ili dupliranja. Ukoliko se neki paket izgubi TCP ce ga poslati ponovo. Takodje, TCP prilagodjava brzinu slanja brzini kojoj prijemnik obradjuje podatke.

Nakon transportnog sloja je IP (Internet protocol) ili mrezni / internet sloj. TCP i IP nisu isto, ali su besmisleni jedno bez drugog i cesto se pominju zajedno. Oni stavljaju veliki znacaj na tacnost. IP zahtjeva od servera da imaju IP adresu kako bi mogao kontrolisati kretanje paketa kroz rutere i druge mrezne uredjaje do njihove destinacije sirom svijeta.
IP je takodje odgovoran i za razbijanje podataka u pakete. Kada bi se cijela poruka slala odjednom u slucaju greske se ponovo mora poslati komplentna poruka. Zbog prakticnosti se svaka poruka dijeli u manje pakete koji se na destinaciji ponovo sastavljaju u cjelinu. Ovim svaki paket moze izabrati drugu rutu ukoliko je prva zagusena ili nedostupna.

Svi navedeni protokoli i slojevi se desavaju unutar racunara. Medjutim, da bi ovi paketi putovali mrezom potreban je hardver poput optickih kablova, bezicne mreze, satelitske veze itd. Za ovaj dio je odgovoran sloj veze (Data Link Layer). Ethernet odredjuje kako podaci trebaju izgledati u obliku elektricnih signalala (jedinica i nula).

Zatim se prolazi kroz ove iste slojeve obrnutim redoslijedom da bi se paketi ponovo sastavili u format koji odgovara klijentu. Ethernet prenosi podatke IP sloju. IP ih prenosi TCP transportnom sloju nakon kojeg dobijamo HTTP poruku koju je poslao klijent. HTTP poruka se onda obradjuje na serveru.

Medjutim, da li su ovi paketi sigurni i privatni?

HTTPS

Da bi klijent i server mogli komunicirati, izmedju njih mora biti uspostavljena veza. Kao sto je vec pomenuto, HTTP poruke se salju kroz transportni TCP protokol i web saobracaj obicno koristi 80 port. TCP garantuje da ce podaci biti dostavljeni ukoliko je "sagovornik" dostupan, ali ne garantuje bilo kakav nivo sigurnosti.

Iz ovog razloga se dodaje jedan sigurnosni sloj izmedju HTTP-a i TCP-a. Taj sloj je SSL (Secure Socket Layers) ili njegova novija i sigurnija verzija TLS (Transport Layer Security). TLS i SSL su kriptografski protokoli dizajnirani da obezbjede sigurnost komunikacije na mrezi. Na ovaj nacin dobijamo HTTPS (Hypertext Transfer Protocol Secure) i tuneliranje. HTTP poruka prolazi kroz SSL tunel. SSL prima HTTP poruke, sifrira ih, salje preko TCP veze i ponovo ih desifruje na destinaciji. Enkripcija stiti od prisluskivanja i izmjene HTTP poruka.

Pocetak sigurne HTTPS URL adrese.

SSL je termin koji preovladava na internetu i koji se cesto koristi iako se misli na TLS. SSL nije siguran i odavno je zastario. Vremenska linija razvoja SSL i TLS protokola:

SSL v1.0 je 90ih razvio Netscape i nikada nije bio objavljen zbog sigurnosnih problema
SSL v2.0 je pusten 1995. godine, ali i dalje ima mane
SSL v3.0 je objavljen 1996. godine i znacajno mijenja nivo sigurnosti. Medjutim, SSL 3.0 i prethodne verzije su zastarjele od 2015. godine.
TLS v1.0 je razvio IETF 1999. godine kao bolju verziju SSL-a
TLS v1.1 je izasao 2006. godine i 2008 je zamijenjen sa TLS v1.2
TLS v1.3 je objavljen 2018. godine. TLS v1.0 i TLS v1.1 se od 3.2020. godine smatraju zastarjelim verzijama. Dostupne su samo TLS v1.2 i TLS v1.3.

Da bi sajt imao HTTPS neophodno je da ima funkcionalan digitalni SSL certifikat na serveru. On potvrdjuje identitet servera (poput licne karte koja dokazuje identitet osobe) i omogucava kriptovanu vezu. Obicno sadrzi informacije poput

Naziv domene za koji je izdan certifikat
Osoba, organizacija ili uredjaj kom je certifikat izdan
Izdavac certifikata (Certificate Authority ili CA)
Digitalni potpis CA
Datum izdavanja i isteka certifikata
Algoritam koji se koristi za certifikat
Javni kljuc (privatni kljuc se ne otkriva)
itd.

Kada klijent isprva uputi HTTP zahtjev, on pokusava naci certifikat na serveru, a potom provjerava izdavaca certifikata u listi poznatih autorizovanih izdavaca. Ukoliko ga ne moze naci u CA listi ili certifikat ne postoji, web pregledac upozorava korisnika o tome. Nakon sto je certifikat potvrdjen izvrsava se SSL inicijalizacija i rukovanje (SSL handshake), te je moguce ostvariti sigurno slanje podataka.

Alati za pracenje HTTP saobracaja

Web developeri najcesce koriste Chrome DevTools koji se moze aktivirati na web stranici sa F12 ili desni klik > Inspect. Potrebno je izabrati karticu Network i ponovo ucitati stranicu. Klikom na neku od prikazanih stranica mogu se vidjeti detalji o tom specificnom HTTP zahtjevu i odgovoru.

Chrome DevTools i pracenje HTTP saobracaja.

Takodje se pominju Wireshark i Fiddler.

HTTP statusni kodovi

Svaki odgovor od servera ima statusni kod. Ovaj kod govori klijentu kako da tumaci odgovor servera. Navedeni su neki znacajni kodovi.

1xx: Informativne poruke

2xx: Uspjeh

Najcesci kod je 200 OK. Zahtjev je uspjesno obradjen i server kao odgovor salje trazeni sadrzaj.
201 Created. Zahtjev je zavrsen i kreiran je novi sadrzaj.
202 Accepted. Zahtjev je prihvacen za obradu, ali obrada nije zavrsena.
204 No Content. U odgovoru nema tijela poruke.
206 Partial Content. Oznacava da odgovor sadrzi samo djelimican sadrzaj.

3xx: Preusmjeravanje

Ovaj kod zahtijeva od klijenta da preduzme dodatne korake. Najcesci slucaj upotrebe je promjena URL kako bi klijent dosao do sadrzaja.

301 Moved Permanently. Sadrzaj se sada nalazi na novoj URL adresi.
303 See Other. Trazena stranica se moze pronaci na drugoj URL adresi.
304 Not Modified. Server je utvrdio da se sadrzaj nije promjenio i da klijent moze koristiti njegovu kesiranu kopiju. Ovo radi uz pomoc HTTP zaglavlja kao If-Modified-Since i If-None-Match, gdje se utvrdjuje da li je sadrzaj mijenjan nakon datuma kesiranja sadrzaja.
307 Temporary Redirect. Sadrzaj se privremeno nalazi na novom URL.

4xx: Greska klijenta

Ovi kodovi se koriste kada server misli da je klijent kriv, da li zbog zahtijevanja nepostojeceg sadrzaja ili kreiranja loseg zahtjeva. Najpoznatiji statusni kod u ovoj klasi je 404 Not Found.

400 Bad Request. Zahtjev pogresno formiran i server nije shvatio zahtjev.
401 Unauthorized. Za izvrsavanje zahtjeva klijent mora uraditi autentifikaciju (npr. podnosenjem korisnickog imena i sifre).
402 Payment Required. Ovaj statusni kod jos uvijek nije dostupan. Namjenjen je za sisteme digitalnog placanja.
403 Forbidden. Server je odbio pristup sadrzaju.
404 Not Found. Oznacava da server ne moze pronaci zahtjevani sadrzaj.
405 Method Not Allowed. Koristi se nevazeci HTTP metod u startnoj liniji ili server ne podrzava metod.
408 Request Timeout. Zahtjev je trajao duze nego je server bio spreman da ceka.
409 Conflict. Zahtjev nije mogao biti dovrsen zbog konflikta.
410 Gone. Zahtjevana stranica vise nije dostupna.
415 Unsupported Media Type. Server ne prihvata zahtjev jer tip medija nije podrzan.

5xx: Greska servera

Ova klasa kodova se koristi za oznacavanje greske servera tokom obrade zahtijeva.

500 Internal Server Error. Server ima internu gresku koja ga je sprijecila da ispuni zahtjev.
501 Not Implemented. Zahtjev nije zavrsen. Server ne podrzava trazenu funkcionalnost.
503 Service Unavailable. Server je privremeno preopterecen ili ne radi. Obicno server nece ni odgovoriti i zahtjev ce isteci.

Dodatni izvori

Uz ovaj video mozete prakticno istraziti zahtjeve, odgovore, zaglavlja i njihove kodove: Postman Beginner's Cousrse - API Testing
HTTP — MDN Web Docs
HTTP sazeto

Kako radi web?

2022-02-07T19:33:53Z

Cilj teksta je bolje razumijevanje necega sto koristimo svakodnevno. Ucenje osnova weba isprva nije neophodno za pisanje koda, ali na duze staze je kljucno za pisanje boljih web aplikacija i rjesavanje problema pri suocavanju sa greskama. Pogled iz perspektive web developera.

Klijent i server

Sajt je samo nekolicina fajlova (koji mogu biti kod, slike, pdf dokumenati itd.) koja se nalazi na nekom racunaru. Drugo ime za taj racunar je server i povezan je na internet. Njegova svrha je da usluzuje klijente i odgovara na zahtjeve.
Kada korisnik klikne na neki link, on je zapravo poslao zahtijev odgovarajucem serveru da dobije pristup fajlovima kako bi pogledao sadrzaj kroz web pregledac (poput Chrome, Firefox, Opera ili Safarija). Web pregledac je ovdje klijent.

Trazeni server odgovara na zahtjev sa svim potrebnim fajlovima, te web pregledac (klijent) interpretira kod iz fajlova i voilà: na ekranu vidite ovu stranicu. Internet se temelji na komunikaciji izmedju klijenta i servera.

Odvijanje komunikacija izmedju klijenta i servera.

Ipak pojednostavljeni opis komunikacije klijenta i servera ne govori cijelu pricu. Ukljuceno je mnogo drugih dijelova.

IP adrese i domene

Svakom povezanom uredjaju na internetu je dodjeljena jedinstvena IP adresa (Internet Protocol address). Svrha IP adrese je dodijeliti identifikator svakom uredjaju na internetu kako bi se mogao pronaci i komunicirati sa njim. Pomocu nje pristupamo racunaru (serveru) sa zeljenim sadrzajem.

Tipicna IP adresa bi izgledala ovako: 32.248.146.43. Najosnovniji format ukljucuje jednostavan skup od 4 bloka brojeva sa minimalnom 0.0.0.0 i maksimalnom 255.255.255.255 vrijednosti. Recimo 74.125.128.147/search?q=youtube vodi na Google stranicu sa rezultatima za kljucnu rijec "youtube" (bar dok google.com ne promjeni IP adresu).

Medjutim, ovakvi brojevi nisu prakticni za pamcenje. Ukoliko bi sajt promijenio server dodijelila bi mu se nova IP adresa a korisnik se razocarao sa This page can’t be found greskom jednom kada ukuca staru IP adresu i linkovi bi ucestalije prestajali raditi. Iz ovih razloga postoje domene kakve znamo poput nekisajt.ba gdje je .ba najvisi nivo internet domene ili Top Level Domain (TLD).

Ovdje je spisak internet domena najviseg nivoa. Njih uredjuje i dodaje medjunarodna organizacija IANA. IANA potom odredjuje koja organizacija ce dalje biti glavni administrator koje domene. Za .ba je to UTIC, za .hr je CARNet, za .rs je RNIDS itd.

Da bi firma mogla nuditi uslugu registracije domene — prvo se mora poslati zahtjev organizaciji koja je glavni administrator domene. Ako administrator odobri zahtjev firma ce biti dodana na spisak ovlastenih registara (sto izgleda ovako). Administratori i firme su zaduzene za registraciju drugog nivoa domene koja se nalazi prije TLD domene. Drugi nivo domene u nekisajt.ba je nekisajt.

Osoba koja je registrovala domenu u jednoj od ovlastenih firmi upravlja sledecim nivoima registrovane domene: blog.nekisajt.ba gdje je poddomena blog. Ta ista osoba treba povezati domenu i server na kojoj je pohranila fajlove sajta kako bi domena vodila na odgovarajuci server.

Kada posaljemo nekisajt.ba URL zahtjev, presrece ga internet provajder (kao M:tel, Blic, Telekom, SBB) i prosljedjuje ka svom Domain Name Serveru (DNS) koji domenu pretvara u IP adresu odgovarajuceg servera. DNS je poput adresara sa domenama i IP adresama. Ako DNS nema IP adresu servera na koji vodi trazena domena, zahtjev se onda salje ka administratoru najviseg nivoa domene (u ovom slucaju je to UTIC). Kada administrator posalje IP adresu, ona se cuva na DNS-u internet provajdera da bi se ovaj proces sledeci put izvrsio brze.

Jednom kada je IP adresa poznata web pregledacu, on serveru salje HTTP poruku u kojoj zahtjeva neku web stranicu ili obradu dinamicnog sadrzaja. Ova poruka i svi ostali podaci izmedju klijenta i servera se salju preko internet mreze koristeci TCP/IP (prevozno sredstvo). Ukoliko je server odobrio zahtjev, klijent dobija "200 OK" poruku (sto znaci da ima pristup) i trazeni sadrzaj.

Sve se ovo desava brzo ukoliko server ne mora da izvrsi neku kompleksniju obradu prije slanja podataka klijentu.

URL adresa

URL ili Uniform Resource Locator je jedinstveni identifikator koji se koristi za lociranje datoteka i fajlova (resursa) na internetu. Ime domene je zapravo samo jedan od dijelova URL adrese.

Elementi URL adrese.

Protokol: je uglavnom http ili https koji komunikaciju cini sigurnijom.
Oba protokola su opsirnije objasnjena u toku teksta.
Poddomena: je obicno www ali je ona opciona.
Domena: nekisajt.ba vodi do servera na kom "zivi" sajt
Port: Broj porta koji server koristi za slusanje HTTP zahtjeva je najcesce 80. Ovo je razlog zasto ga web pregledac obicno izostavi iz URL adrese. Potrebno ga je navesti samo ako server slusa na broju koji nije 80: http://nekisajt.ba:1234/.
Put do fajla: vodi na neki fajl na tvrdom disku servera. Npr.:

/kontakt.html vodi na kontakt stranicu koja se nalazi u glavnom folderu,
/kontakt.html#forma automatski vodi na sekciju koja je u html kodu oznacena sa jedinstvenim identifikatorom forma,
/aseti/knjiga.pdf vodi na pdf fajl koji je u ovom slucaju pohranjen u folderu 'aseti', a koji se nalazi u glavnom folderu ili
/aseti/slike/logo.jpg voditi na sliku ukoliko na serveru u /aseti/slike/ folderu postoji slika sa nazivom logo.jpg. Ako ne postoji slika sa identicnim nazivom ili naznacena hijerarhija foldera web pregledac ce prikazati gresku 404 Not Found.

Vecina sadrzaja i izvora mora postojati fizicki u fajl sistemu servera. Ovaj put radi poput fajl sistema na kompjuteru.

File Explorer put na Windows operativnom sistemu.

Ukoliko navedemo samo domenu nekisajt.ba ili put ka odredjenom folderu nekisajt.ba/blog/ bez navodjenja specificnog fajla koji zelimo iz njega, web pretrazivacu ce se usluziti osnovna stranica /index.html ukoliko postoji u izabranom folderu.
Drugi moguci nazivi osnovne stranice pored index.html su index.htm, default.html, default.htm, home.html i home.htm.
Ukoliko ova stranica ne postoji u trazenom folderu, vecina web pretrazivaca ce prikazati strukturu foldera i fajlova, sto nije najoptimalnije iskustvo.

Pretrazivac prikazuje sajt koji nema osnovnu stranicu.

Medjutim moguce je konfigurisati server da prepozna bilo koji fajl kao osnovnu stranicu iako se najcesce koristi "index".

Sadrzaj moze biti i dinamicne prirode. Zamislite URL adresu koja je dobijena klikom na kategoriju 'laptopi': https://prodavnica.ba/laptopi i koja ne mora voditi na postojeci staticni .html dokument sa prodavnica.ba servera. Recimo da je u ovom slucaju URL podesen da automatski pokrene web aplikaciju na serveru koja ce uzeti podatke (sve postojece laptope) iz baze podataka i u tom trenutku generisati i servirati .html stranicu prilagodjenu klijentovom zahtjevu. Ovakva web aplikacije se moze kreirati u PHP, Perl, Ruby on Rails ili nekom drugom backend jeziku.

GET parametri: primjer https://nekisajt.ba/pretraga?trazi=web+development&poredaj=najnovije
Sve nakon ? je poznato kao upit i sadrzi prosljedjene vrijednosti (query string) u zahtjevu. Ne postoji standard kako query string treba izgledati jer ovisi od toga kako je web aplikacija programirana da interpretira vrijednosti koje dobije.

Hypertext Transfer Protocol (HTTP)

URL adresa usmjerava i identifikuje sa kim klijent zeli komunicirati, ali ne govori serveru sta se zahtjeva od njega. Web pregledac salje zahtjeve koristeci HTTP poruke. Primarna funkcija HTTP protokola je da nakon uspostavljanja veze sa serverom trazi sve potrebne informacije za prikaz web stranice i preuzme podatke koje je server proslijedio kao odgovor.

Kroz HTTP poruku klijent naglasava kakvu reprezentaciju sadrzaja zeli i njegovu namjeru. HTTP poruka je jednostavna tekstualna poruka, a koncept zahtjeva i odgovora je lako usvojiti jer se nazivi u potpunosti opisuju.
Zahtjev sadrzi HTTP metodu koja serveru govori sta klijent zeli da radi (cita, modifikuje, brise itd.), putanju do sadrzaja i zaglavlja koja daju dodatne podatke o sadrzaju koji se trazi.
Odgovor ukljucuje statusni kod o uspjesnosti realizacije zahtjeva, zaglavlja sa dodatnim korisnim informacijama o odgovoru i sadrzaj.

HTTP ima definisan format kojim oblikuje zahtjev i salje sve neophodne informacije da bi klijent dobio trazeni sadrzaj, te World Wide Web ne bi radio bez njega. Zato ukoliko se domen ukuca u pretrazivac i pritisne enter — http se automatski pojavavljuje ispred naziva domena.

HTTP protokol u URL adresi.

HTTP je i ujedno protokol bez stanja (stateless), odnosno protokol koji ne odrzava konstantnu vezu izmedju klijenta i servera, vec se svaki upuceni zahtjev posmatra odvojeno. To znaci da server ne moze pratiti stanja i informacije o klijentu izvan tog zahtjeva i da svaki zahtjev mora sadrzati sve informacije potrebne za njegovo izvrsenje. Ove podatke sadrzi zaglavlje HTTP poruke.

Ukoliko je neophodno kontinuirano cuvati podatke o nekom stanju (npr. da je korisnik prijavljen), moguce je koristiti lokalno skladiste (Local Storage), kolacice (Cookies), sesije (Sessions) itd.

3 faze standardne HTTP sesije

Klijent uspostavi TCP vezu sa serverom
Klijent salje HTTP zahtjev i ceka HTTP odgovor
Server obradjuje zahtjev i salje svoj odgovor sa statusnim kodom o uspjesnosti obrade

Internet konekcija omogucava slanje i primanje podataka na internetu. Ona je poput puta izmedju klijenta i servera ili ulica izmedju nas i marketa.
TCP/IP ili Transmission Control Protocol i Internet Protocol jesu transportni protokoli koji definisu kako podaci trebaju putovati internetom. Moze se zamisliti kao prevozno sredstvo do marketa (recimo ako definisemo da je to hod ili biciklo).
HTTP je komunikacijski protokol koji definise jezik izmedju klijenta i servera kako bi se razumijeli i kako bi klijent dobio ono sto trazi od servera. HTTP je poput jezika koji koristimo za komunikaciju sa prodavcem da bi dobili ono sto zelimo.

Drugi dio teksta i vise o HTTP verzijama, metodama, porukama, zaglavljima, kesiranju, kolacicima, TCP vezama, HTTPS protokolu, statusnim kodovima, alatima za pracenje HTTP saobracaja u postu o osnovama HTTP protokola.

Dodatni izvori

How the Web works (tekst)
How The Web Works - The Big Picture (youtube)
How the Internet Works for Developers - Pt 1 - Overview & Frontend (youtube)

Frontend - vodic za ucenje

2022-01-31T19:33:53Z

Na internetu je moguce pronaci velike kolicine informacija o web tehnologijama. One se konstantno razvijaju i njihov broj se povecava, te je vrlo lako izgubiti se u njima. Ukoliko ne isplanirate put i krenete na vise strana odjednom mogao bi vas gusiti osjecaj nesigurnosti i izgubljenosti.
Tekst izlaze osnove i cilj nije uciniti nekoga strucnjakom. Cilj je da se osoba osjeca dovoljno prijatno u ovoj oblasti da nastavi graditi svoj put.

Poznavanje engleskog jezika je jedan od glavnih uslova jer je materijal za ucenje najcesce na engleskom, tolerantnost ka svakodnevnom sjedenju ispred racunara duze vremena, ali i osnovna kompjuterska pismenost.

Gdje poceti?

Slijepo kucanje

Ono sto moze znacajno popraviti iskustvo pisanja koda je slijepo kucanje. To znaci da nema potrebe sklanjati oci sa ekrana. Ono ubrzava rad i pomaze pri zadrzavanju fokusa na primarnom zadatku.

Postoje razlicite igre koje pomazu u vjezbanju ove vjestine. Npr. Ratatype, Typing, TypingClub, Speed Typing Online, Opcija za takmicenje sa drugima: Typeracer. Navedene su samo neke od njih. Mozete pretraziti vise sa kljucnim rijecima "touch typing" ili "fast typing".

U ovakvim igrama se uci i vjezba ispravan polozaj prstiju na tastaturi, kao i koji prst treba aktivirati koji karakter. Dobro je izdvojiti 10 - 15 minuta dnevno za vjezbanje slijepog kucanja. Osnove se brzo kupe, ali za mjesec dana ce ova vjestina biti na ozbiljnom nivou.

Sema ispravanog kucanja na tastaturi.

Uredjivac izvornog koda

Ono sto takodje moze popraviti iskustvo pisanja koda je uredjivac izvornog koda (source-code editor) ili editor. Izbor glavnog alata za pisanje koda igra znacajnu ulogu u radnom toku i produktivnosti.

Navedeni su neki od poznatijih besplatnih editora otvorenog koda sa naznacenim izuzetkom. Obicno dolaze sa odredjenim integrisanim funkcijama, ali se mogu instalirati dodatne po potrebi. Postoje razliciti stavovi na temu koji je najbolji, ali probajte zeljene editore kroz rad i zadrzati se na onom koji najvise odgovara.

Sublime Text

Sublime Text se cesto koristi zbog njegove brzine i jednostavnosti. Pri instalaciji ima osnovne integrisane funkcije za programiranje ali postoji veliki broj paketa za prosirivanje ovakvih funkcija koje je napravila zajednica. Potrebno je vrijeme da se zapamte precice i prilagodi sebi, ali jednom kada se ovo savlada moguce je uredjivati i pisati kod na najbrzi moguci nacin.

Od 2021. godine dostupan je Sublime Text 4 koji moze biti preuzet i koristen besplatno za evaluaciju. Do sada nije postojalo vremensko ogranicenje za ovu evaluaciju, ali se u besplatnoj verziji povremeno pojavi prozorcic koji pita da li zelite kupiti licencu.

VSCode

Visual Studio Code je kompleksan program koji vise zauzima sto ga cini sporijim. Medjutim on je jednostavniji za koristenje i bogat je funkcijama odmah po instalaciji. Ovakav editor pruza manji otpor da bi se savladao neki editor.

WebStorm

Jedan od popularnih je i WebStorm. On je kao i Visual Studio Code integrisano razvojno okruzenje (IDE), sto znaci da je bogat raznim svojstvima i spreman da barata velikim projektima. Ono sto dolazi uz kompleksnost je i to sto nije brz poput Sublime Texta. Zato programeri nekada koriste IDE poput WebStorm i VSCode na velikim projektima, a Sublime Text kada je potrebno raditi na pojedinacnom fajlu.

*Ovaj IDE nije besplatan, ali se cesto koristi u firmama. Sigurna sam da postoji i Free Educational License. wink

Brackets

Brackets je pogodan za web dizajnere i pocetnike front-end developere jer ima integrisane funkcije (poput Live Preview, Quick Edit, Quick View, Quick Docs, Code Hints za JavaScript, HTML i CSS).

Mislim da je Live Preview jedinstvena funkcija na ovom editoru, a koja moze olaksati usvanjanje CSS jezika. Live Preview vizuelno naznacuje elemente na kojima se primjenjuje blok koda na kom radite, a promjene u kodu su vidljive na stranici u pretrazivacu i prije nego se one zapamte.

Google i umjetnost pretrazivanja

Pretrazivanje je jedna od najvaznijih vjestina koje programer treba imati. Nemoguce je pamtiti sve o programiranju, a internet je najveća biblioteka koja postoji. Biti u mogucnosti brzo i efikasno pronaci informacije potrebne za rjesenje nekog problema je neprocjenjivo. Iz ovog razloga je pretrazivac takodje jedan od njegovih glavnih alata.

Za postavljanje pitanja tu su i razne zajednice u kojima je moguce postaviti pitanje: discord serveri, reddit, stackoverflow, ChatGPT (kome ne treba slijepo vjerovati kako "samouvjereno" moze dati krive ili nepotpune informacije) itd.

Kako radi internet

Kratkorocno ova teorija nije krucijalna za pisanje koda, ali na duze staze je korisno razumijevanje onoga sto se desava u pozadini.

Klijent i server

Klijent i server komunikacija.

Ipak opis klijenta i servera ne govori cijelu pricu. Ukljuceno je mnogo drugih dijelova. Ovdje pise vise o tome Kako radi web?.

Struktura sajta

Sve navedeno u ovom dijelu teksta je jednostavno savladati kroz ucenje HTML, CSS i JavaScript jezika. Cilj je samo prikazati kako otprilike izgleda struktura nekog jednostavnog sajta i koncept sadrzaja koji ga cini.

Pomenuli smo da je sajt neki broj fajlova sa kodom, stilovima, medijskim sadrzajem itd. Da bi ti fajlovi djelovali kao cjelina neophodno je sastaviti ih u logicnu i povezanu strukturu kako bi bili svjesni ostalog sadrzaja sa kojim treba komunicirati. Ovaj proces izgradnje web stranica se izvrsava na lokalnom kompjuteru da bi se uvjerili da web stranica izgleda i radi ispravno prije nego se otpremi na server.

U ovom tekstu su ukratko predjeni pojedinacni segmenti koji najcesce cine sajt:

index.html fajl i drugi HTML kod
Fajlovi sa stilovima i CSS kodom,
JavaScript,
slike i drugi medijski sadrzaj.

Planiranje prije pisanja koda

Moze biti korisno kada vodite svoj projekat ili nemate dizajn, samo ideju.

Iako su tehnicke vjestine presudne da bi se izgradio sajt, to nije prvi korak. Definisanje onoga sto je potrebno postici sa sajtom i planiranje dizajna se ne bi smjelo previdjeti. Iako naslov zvuci suvisno, mnogi projekti su neuspjesni zbog nedostatka ciljeva i usmjerenja, a ne nedostatka tehnickog znanja. Pitanja koja mogu pomoci pri definisanju cilja:

Sta tacno zelim postici?
Je najvaznije pitanje jer direktno odredjuje ostale odgovore. Napisati listu i poredati stavke po prioritetima.
Kako sajt moze pomoci da postignem te ciljeve?
Sta je neophodno uraditi i kojim redoslijedom da bi se ti ciljevi ostvarili?

Ova vjezba ce pomoci pri odlucivanju kakav dizajn i koje funkcionalnosti implementirati, a koje izostaviti jer implementacija nije najoptimalnije usmjeravanje energije za postizanje tih ciljeva. Nekada je bolje iskoristiti postojecu tehnologiju ili druge alate.

Jedna ideja moze kulminirati u beskonacan broj pitanja i dugu listu zadataka, ali nema potrebe odgovoriti na sva pitanja i zavrsiti sve zadatke. Vazno je imati jasnu ideju koja ce onda pojednostaviti odredjivanje prioriteta (20% zadataka daje 80% rezultata: Paretov princip) i njihovo izvrsavanje. Jedna od vaznih i siroko primjenjivih vjestina je umjeti podijeliti zadatke na manje izvedive korake.

Inspirisano sa How do I start to design my website?
Ovdje mozete pronaci osnove.

Objavljivanje sajta na internet

Proces postavljanja sajta na internet najvise ovisi od usluge hosting provajdera, ali su po pravilu obicno potrebne 3 stavke koje su prethodno pomenute:

Sajt izradjen na lokalnom racunaru (fajlovi).
Zakupljen prostor (hosting) je iznajmljen prostor za fajlove na web serveru od hosting kompanije. Na ovaj server se pohranjuju fajlovi, te ih on posluzuje klijentima na HTTP zahtjev (objasnjeni u Kako radi web? i osnove HTTP protokola).
Domena kao jedinstvena adresa na kojoj korisnici mogu pronaci sajt.

Sajt mora biti smjesten na web serveru kako bi mu bilo moguce pristupiti sa bilo kog mjesta na svijetu. Postoji mnogo dobrih hosting provajdera i ne bi trebao biti problem pronaci jedan. Postoje i besplatne opcije sve dok se od njih ne ocekuje mnogo.

Neki hosting provajderi nude uslugu kupovine domene preko njih, ali je obicno isplativije kupiti je zasebno. Cesto se preporucuje Namecheap kao jedna od povoljnijih opcija. Ukoliko najvisi nivo domene nije vazan, Freenom nudi besplatnu registraciju nekih (u ovom trenutku .tk, .ml, .ga, .cf, .gp). Bolje je registrovati poznatiju domenu najviseg nivoa (poput .com, .co, .org, .edu, .ba, .rs, .hr itd.) ukoliko se radi o ozbiljnijem sajtu.

Netlify

Ako zelite jednostavnost — Netlify je jedan od odlicnih hostinga za licne staticne sajtove i pocetnike. Pocetni paket je besplatan i pri pohranjivanju fajlova prvi put na server, Netlify ce automatski podesiti nasumicnu domenu poput awesome-muse-r78.netlify.com. Moguce je promijeniti poddomenu u bilo koju koja je slobodna ili podesiti da sajt koristi onu koju ste kupili. Sledeci video ukratko vodi kroz smjesno jednostavne korake objavljivanja sajta na internet pomocu Netlify servisa:

Moguce je povezati Nelify sa vasim skladistem na GitHubu tako da svaka promjena koda u skladistu automatski predstavlja okidac za Netlify da azurira sajt sa novim kodom. Ukoliko je kod svakako smjesten u ovakvom skladistu, web developer ne mora ulaziti na Netlify stranicu i rucno prebacivati fajlove na server.

Tema za neki drugi post 📝: Ovaj tip hostinga moze sluziti i sajtove koji su dinamicni, ali kroz JAMstack (JAMstack objedinjuje JavaScript, API-je, Markup) i serverless funkcije.

Optimalan pristup ucenju

Znam da se tekst oduzio, ali se priblizava konkretnom dijelu gdje ceka najvise posla. Navedene teme mogu sacuvati vrijeme i ne mora sve biti nauceno iz licnih gresaka. Zato sada pricamo o tome kako pojednostaviti proces ucenja, sacuvati vrijeme i o konceptima kojih je dobro biti svjestan:

Web development je ogroman labirint. Postoji mnogo vjestina koje je moguce nauciti, ali je vazno fokusirati se na jednu vjestinu u odredjenom periodu.
Medju prvim koracima je vazno upoznati osnove. One obicno pocetnika uce sintaksu i pravila tog jezika, ali i kako razmisljati kao programer. Precice su kontraproduktivne za vecinu (kao ucenje bootstrapa prije CSS-a ili Reacta prije JavaScripta). One znace brz pocetak, ali i naknadnu izgubljenost, ogranicene mogucnosti i trosenje vremenja.
Obratite paznju na svoj zivotni stil i kako on utice na nivo energije. Primjeniti zdravije navike i nacin zivota moze ucenje uciniti znacajno optimalnijim ali i popraviti kvalitet zivota. Obratite paznju na ishranu, fizicku aktivnost, spavanje, redovne pauze i vrijeme za sebe.
Lako je izgubiti se u tutorijalima i prelaziti sa teme na temu. Umjesto prelazenja svakog izvora po malo i prebacivanje na drugi ispocetka, izabrati medij i ispratiti ga do kraja. Ovako je jednostavnije izbjeci razvodnjenu paznju, duze zadrzati fokus i brze organizovano preci osnove. U redu je potraziti opsirnije objasnjenje negdje drugo (video, blog, dokumentacija, kurs, projekti).
Mnoge informacije necete nauciti napamet jer ih necete koristiti svakodnevno i to je u redu. Za razliku od onoga kako se uci u skoli, u programiranju je ucenje napamet beskorisno trosenje vremena. Vazno je shvatiti koncept naucenog i biti svjestan da je nesto moguce. Iz ovog razloga je korisno umjeti koristiti pretrazivac. Trik je znati kako pronaci potrebnu informaciju i kako je primjeniti.
Programiranje je tesko i kada se um suoci sa preprekom, suzdrzite se od prebrzo donesenih zakljucaka o vlastitim sposobnostima. Odmorite se i radite nesto potpuno drugo. Biranje aktivnosti koja ne zahtjeva mentalni napor moze vise koristiti od forsiranja jer u toku difuznog rada mozak pravi veze izmedju detalja. Zato se nerijetko desi klik i pojave ideje u vezi potencijalnog rjesenja u toku pauze. Cak i kada to nije slucaj, um ce biti svjeziji i spremniji da se suoci sa preprekom.
Kultura transparentnosti i poniznosti kroz iskrenost prema sebi i drugima u vezi svojih vjestina omogucuje otvorenost ka povratnim informacijama ukoliko nesto ili neko ukazuje na gresku. Internalizovanje povratnih informacija je prilika za napredak i ucenje.
Razmaknuto ponavljanje (spaced repetition).

Aktivno ucenje

Gledanje videa ne znaci da je nesto savladano. Drugim rijecima, posmatranjem utakmica ili kako se rade trikovi kartama ne znaci da je steceno znanje primjenljivo. Ucenje je djelotvornije sto je primijenjena metoda ucenja aktivnija. Zato je ono sto se najvise racuna — opsjednutost primjenom nad teorijom. Pokvarite kod, pravite greske, gradite projekte, rjesavajte probleme i u procesu koristite Google i Stack Overflow.

Dobra je ideja biti dijete igrati se sa kodom i izazvati gresku.
Samostalno rekreirati projekat bez pomoci videa ili originalnog izvora.
Kada pokusavate shvatiti i savladati nesto, pokusajte to objasniti/nauciti nekoga drugog (The Feynman Technique).
Objasnjavanje svake linije koda kroz komentar je djelotvornije od pisanja biljeski na koje se najcesce necete ponovo vracati.
Aktivno podsjecanje (active recall) i bilo koja metoda koja zahtjeva visi kognitivni napor (suprotno biljeskama i ponovnom citanju koje zahtjevaju nizi kognitivni napor). Objasnjenje.

Ove tehnike prisiljavaju dublje razmisljanje o temi i razumijevanje kako se dijelovi informacija uklapaju. Zabiljezite slabosti koje prepoznate i fokusirajte se na unaprijedjenje tih vjestina.

Don't practice until you get it right. Practice until you can't get it wrong.#javascript #100daysofcode
— Palash (@palashv2) August 2, 2020

Ako vas zanima vise o tehnikama koje mozete koristiti za aktivnije ucenje, provjerite ovu vezu.

Kako poceti sa web tehnologijama

Minimalni zahtjevi za solidnu pocetnu bazu je jasno razumijevanje HTML (za definisanje strukture sadrzaja), CSS (za manipulisanje prikaza i stilizovanje sadrzaja) i JavaScript jezika (za programiranje web stranice i dodavanje dinamickih funckionalnosti).

Balansiranje pasivnog i aktivnog ucenja

Medjutim, postoji nesto cega je dobro biti svjestan prije pocetka ucenja i zove se tutorial hell. Odnosi se na beskrajnu fazu u kom novi developeri prelaze tutorijale/kurseve/knjige, replikuju korake i kod radi ✨. Najcesce zbog osjecaja da je neophodno znati sve prije pocetka svog projekta, ali je u redu poceti ga i guglati sve nejasnoce.

Problem nastaje u tome sto je instruktor prosao kroz otklanjanje gresaka, rjesavanje problema i prikazuje radnu verziju, te izostaje povratna informacija i svjest o znanju koje nedostaje. Lako je provesti mnogo vremena u ovoj fazi jer je jednostavnija, stice se osjecaj napretka iako se znanje povrsno usvaja i informacije brzo zaboravljaju. Nikada necete biti spremni i znati sve sto zaista treba dok ne uradite taj projekat.

Ograniciti fazu tako sto cete:

Kroz nju nauciti samo osnove. U redu je preci neciji kurs ili drugi sadrzaj sa strukturom za pocetnike i tako ih usvojiti. Moguce je i odrediti vremenski period trajanja koji je otprilike potreban za ucenja osnova.

Nakon toga prestati gledati tutorijale i uciti samo (po potrebi iz dokumentacija, clanaka, tutorijala, kurseva itd.) ako pokusavate da napravite nesto sa tim znanjem.

Magija u tome je sto bi pri izgradnji vlastitog projekta trazili rjesenja na internetu, ona nekada ne bi radiila jer je vas kontekst drugaciji i to rjesenje ne razumijete dovoljno da bi ga prilagodili sebi. Zbog ovakve frustrirajuce, nesrecne ali i tragicne 💩 okolnosti ce biti neophodno citati dosadne dokumentacije ili potraziti neki drugi izvor za vise informacija da bi uspjesno implementirali rjesenje. U procesu se stice praksa i iskustvo koje izgradjuje razumijevanje kako odredjena tehnologija radi i kako je primjeniti u razlicitim uslovima. Na ovaj nacin se informacije bolje usvajaju i duze pamte sto ima znacajnu prednost nad oponasanjem gotovih koraka koje je instruktor pripremio za svoj projekat.

Poenta: potrebno je znati zasto se neki izvor koristi, odnosno sta se pokusava izvesti sa tom informacijom i ne uciti cinjenice radi pukog ucenja kako bi one pocetnika odvele na visi nivo. Gdje je to primjenjivo u onom sto radis? Ako nemas odgovor, izmisli projekat za koji ce koristiti i voilà. Projekti ce zacementirati znanje.

Izvori za ucenje

U ucenju vam mogu pomoci razni oblici sadrzaja. Izmedju ostalog i:

Interaktivni sajtovi za ucenje web programiranja (freeCodeCamp.org i w3schools su besplatni, codecademy i scrimba su freemium) koji sistematicno uvode nove tehnologije.
Kursevi i
Knjige cesto mogu biti fokusirane na jednu tehnologiju (kao Eloquent JavaScript ili Head First HTML and CSS).
'Bootcamp' je brz i intenzivan program/kurs. Osmisljen je da pripremi pocetnike za prakticni rad i obuhvata obradjivanje osnova nekoliko tehnologija. Ali se cini da su najcesce usmjereni ka full stack razvoju). Jedan od popularnih koje cesto preporucuju je "The Complete 2022 Web Development Bootcamp", objavljen na Udemy platformi, ovaj YouTube bootcamp od svega 12 sati od Ania Kubow. Za kraj nesto drugacije i potpuno besplatno sa mnostvo pozitivnih utisaka: #100Devs. Leon je naglasio da se radi o resursu koji ne uci primarno vjestinu kodiranja koliko stvara zajednicu i vodi kroz put koji ukljucuje sve sto je potrebno za pronaci posao u industriji.

Goalkicker je izvor koji objavljuje odlicne besplatne biljeske za web tehnologije.
free-programming-books je jedan od najpopularnijih GitHub repozitorija. Na njemu cete pronaci knjige i druge oblike izvora o programiranju. Projekat je preuzeo Free Ebook Foundation, a poceo je sa listom besplatnih knjiga o programiranju na Stack Overflow platformi.
MDN Web Docs je dokumentacija koja ce vas voditi od pocetka kroz osnove web developmenta. htmlreference.io i cssreference.io su vizuelni vodici i web stranice sa HTML i CSS referencama. javascript.info objasnjava modirni JavaScript od osnovnih do naprednih tema sa jednostavnim i detaljnim objasnjenjima.

Ovdje mozete pronaci mnogo vise korisnih izvora, ali je nemoguce sve obuhvatiti. Svrha je prikazati razlicitost medija koji se mogu pronaci na internetu. Ne morate se ograniciti navedenim. Izaberite ono sto vam odgovara i ispratite do kraja.

Poslije teorije i osnova uprljati ruke sa:

Projekti i izazovi

Uradite projekat sa tehnologijama u kojim zelite postati bolji. Nadjite nesto sto je vama zanimljivo ili zabavno i napravite uz pomoc interneta. Osim neprocjenjivog iskustva koje ce rastegnuti vjestine i utemeljiti znanje, ovo je prilika za popuniti portfolio.

Raditi izazove kodiranja je korisno za sticanje iskustva, aktivno usvajanje naucenog i prosirivanje postojece baze znanja. Neki od sajtova sa zadacima i izazovima su Edabit, Frontend Mentor, codementor, 100 Days of CSS, 30 Day Vanilla JS coding challenge, Advent of JavaScript, adventJS, Tevko Practice, Daily UI, Codewell, Dev Challenges, Piccalilli, HackerRank, Codewars itd. Dribble ima veliku kolekciju dizajniranih web stranica koje mozete klonirati kroz kod. Onepagelove je sajt sa razlicitim temama i sablonima web stranica kojih je moguce skinuti ili koristiti za inspiraciju. Potrazite "coding challenges" ili "coding wars".

#100daysofcode ce mozda zvucati kao zanimljiv trend.

Preuzimanje jednostavnih honorarnih projekata (na platformama poput Upwork) znaci da cete biti prisiljeni dostaviti proizvod za novac i prisiljeni da ucite.

Sirenje vjestina i posao

Sta nakon savladanih osnova kroz praktican rad? Na ovoj tacki mozete preuzeti neki jednostavniji honorarni posao ili aplicirati za poslove na puno radno vrijeme i kada jos uvijek ne ispunjavate sve navedene uslove oglasa. Neka mudrost kaze "ako ispunjavate sve zahtjeve posla, mozda aplicirate za pogresan posao". Pozicija bi trebala biti izazov za trenutne vjestine i na duze staze prosiriti sposobnosti aplikanta.

Pokazite volju da ucite, pozitivan stav, prizemnost i svjesnost svojih ogranicenja. Budite iskreni u vezi onoga sto ne znate, pokazite da umijete shvatiti kako rijesiti problem, ali i da znate kada je problem prekomplikovan za vase mogucnosti. U takvim okolnostima se vise cijeni sposobnost da osoba trazi pomoc umjesto provede previse vremena na problemu.

Ukoliko ne dobijete posao, dobicete iskustvo intervjuisanja i povratnu informaciju iz kojih mozete zakljuciti na cemu poraditi. U toku potrage za poslom nastaviti unaprijedjivati vjestine kroz licne projekte, dodavati ih u portfolio i siriti bazu vjestina: Mapa puta je dijagram za usmjeravanje programera koji nisu sigurni sta sledece savladati.

📝: Stranica je u razvoju.

Dodatni izvori

Inspiracija, Vodic za ucenje web programiranja.

Optimizacija sajta za pretrazivace

2022-01-25T19:33:53Z

SEO ili optimizacija web stranice za internet pretrazivace sluzi za povecanje kvaliteta saobracaja koji je usmjeren prema sajtu preko prirodnih (organskih ili algoritamskih) rezultata pretrage.

Marketari i SEO strucnjaci se bave optimizacijom web stranice. To uglavnom nisu web developeri i izostavljene su mnoge teme.

Znacaj ovog polja se vidi i u tome da visoko rangiranje na Google-u moze vrijediti milione eura. Sta web stranicu cini efektivnom?

Kvalitetan sadrzaj ♛

Jedna od losih metrika za SEO je ukoliko korisnik odmah po posjeti web stranice izgubi interesovanje da cita sarzaj i vrati se na rezultate pretrage. Ovo se naziva bounce rate — stopa korisnika koji su posjetili sajt, ali nisu pronasli sadrzaj koji ih zanima.

Zasiceni smo nepotrebnim informacijama i svjetlucavim naslovima, a ono sto korisnik prvo vidi ga treba navesti da zeli procitati vise. Najbolji adut za izbjegavanje visokog bounce rate je sto kvalitetniji sadrzaj.
Takav sadrzaj ce podsticati vrijeme zadrzavanja korisnika na stranici (dwell time) koji je vazniji i od vjerovatnoce da ce korisnik kliknuti link kada se sajt pojavi u rezultatima (click-through rate CTR).

Druge vazne metrike:

prosjecno trajanje sesije (session duration)
prosjecan broj pregledanih stranica po sesiji (number of pages viewed per session)

Ove i druge podatke o saobracaju na sajtu je moguce pratiti sa Google Analitikom.

XML Sitemap-a

Botovi pretrazivaca posjecuju linkove i sadrzaj na stranicama da bi se indeksirao sajt. Ukoliko web stranice nisu indeksirane one se nece prikazivati u rezultatima pretrage (search engine results page SERP). Sitemap-a pomaze pretrazivacima, kao sto je Google, da pronadju sve linkove i prepoznaju koje web stranice sajt sadrzi.

Sajtovi koji mogu imati benefit od ovog fajla:

Sitemap ne moze imati negativan uticaj — tako da svi?
Koji zele bolju vidljivost medju pretrazivacima
Sajt sa velikim brojem web stranica jer botovi pretrazivaca mogu propustiti linkove
Sajt koji ima web stranice, a koje nisu povezane u mrezu linkova
Novi sajt koji zeli podici nivo optimizacije

Kako kreirati XML Sitemap-u?

Moguce je generisati je sa XML-Sitemaps. Potrebno je kopirati link sajta i preuzeti generisani .xml fajl. Preuzeti fajl treba smjestiti u glavni (root) folder: https://www.example.com/sitemap.xml. Potom registrovati XML Sitemap-u na Google Search konzoli.

Robots.txt

Pomocu dadoteke robots.txt je moguce kontrolisati kojim folderima i fajlovima koji botovi mogu pristupiti i koji sadrzaj mogu indeksirati. robots.txt moze sadrzati jedno ili vise pravila. Svako pravilo blokira ili dozvoljava pristup odredjenom botu pretrazivaca ka odredjenoj web stranici.

Osim ako je navedeno suprotno, implicitno je dozvoljeno indeksiranje cijelog sadrzaja. U sledecem primjeru su postavljena dva pravila:

# Googlebot i AdsBot je dozvoljeno sve osim
# http://example.com/nogb/
User-agent: Googlebot
User-agent: AdsBot-Google
Disallow: /nogb/

# Svim drugim korisnickim agentima je dozvoljeno da indeksiraju
# cijeli sajt. Izostavljanje ovog pravila ima isti rezultat.
User-agent: *
Allow: /

# Link do XML Sitemap-e
Sitemap: http://www.example.com/sitemap.xml

Fajl se postavlja u glavni (root) folder https://www.example.com/robots.txt. Vise o robots.txt.

Upotreba ispravnog HTML koda

Semanticni HTML je upotreba HTML elemenata koji jacaju semantiku i znacenje informacija na web stranici. Semanticni elementi jasno komuniciraju sa pretrazivacom sta je znacenje stranice i njenog sadrzaja. Ta jasnoca osigurava da na upit pretrazivaci isporuce najbolje rezultate.

Nesemanticni tagovi poput <div> i <span> ne govore vise o sadrzaju.

Primjer semanticnog HTML koda.

Neki od tagova o kojima se cesto govori su tagovi za naslove gdje najveci znacaj ima <h1>. Lista semanticnih tagova.

Meta podaci

Meta elementi nisu vidljivi na stranici i sluze da bi pretrazivacu pruzile vise informacija o web stranici. Pretrazivac koristi ove podatke da bi shvatio o cemu je sajt, kada ga treba ponuditi kao rezultat i kako ga prezentovati na stranici sa rezultatima (SERP).

<head>
  <title>Naslov treba biti do 60 karaktera</title>
  <meta name="description" content="Optimalna duzina opisa je 160 karaktera" />
  <meta name="keywords" content="HTML, CSS, JS" />
  <meta name="author" content="John Doe" />
  <link href="https://example.com/" rel="canonical" />
</head>

Element <title> se prikazuje kao naslov na stranici sa rezultatima (SERP) i u tabu pretrazivaca kada je stranica otvorena.
Od <meta name='description'> ne ovisi da li ce pretrazivac ponuditi sajt kao rezultat, ali sluzi korisniku pri odabiru web stranice i utice na stopu klikanja (CTR). Prikazuje se na stranici sa rezultatima (SERP).
rel="canonical" govori pretrazivacu koji link se indeksira kada postoji nekoliko razlicitih URL adresa koje vode ka istoj web stranici poput: https://www.example.com/ ili https://example.com/index.html

`data nosnippet` atribut

Nekada pretrazivac ignorise opis koji je obezbjedjen kroz <meta name="description" content=""> tag i umjesto njega postavi sadrzaj sa stranice po svom nahodjenju (algoritmu) po kom bi prikazani tekst mozda vise bio od pomoci korisnikovom upitu.

Iako prikazani isjecak nije faktor rangiranja, on utice na korisnika da odabere odredjeni rezultat sto dalje utice na stopu klikanja (CTR). Da bi sprijecili Google da koristi odredjeni sadrzaj kao isjecak za opis moguce je koristiti data nosnippet atribut u sklopu <span>, <div> ili <section> taga.

<p>
  Sadrzaj u paragrafu moze biti ukljucen u isjecak
  <span data-nosnippet> ali ovaj dio ne bi bio prikazan. </span>
</p>

Robots meta

Robots meta element govori pretrazivacima da li da indeksiraju web stranicu:

<meta name="”robots”" content="”noindex,nofollow”" />
<!-- or -->
<meta name="”robots”" content="”index,follow”" />

follow pretrazivac ce pratiti sve linkove na toj web stranici
index pretrazivac indeksira cijelu web stranicu
nofollow pretrazivac nece pratiti sve linkove na toj web stranici
noindex pretrazivac nece indeksirati tu web stranicu

Meta socijalne mreze

Ovi meta tagovi omogucavaju sinhronizaciju i kontrolu prikaza web stranice pri dijeljenju na nekoj socijalnoj mrezi.

Kako izgleda web stranica kada se podijeli na Twitteru

Open graph meta tagovi integrisu web stranicu sa raznim mrezama poput Facebook, LinkedIn, Discord itd. Twitter ima vrijednosti koje funkcionisu na identican nacin. Izgled se moze provjeriti na sajtovima poput: Twitter validator kartica a neke druge mreze se mogu provjeriti na Open Graph. Oni ne moraju biti potpuno ispravni pa je mozda bolje provjeriti direktno na platformama.
Sharing Debugger je bio koristan za rjesavanje FaceBook problema.

<!-- OG ili Open graph-->
<meta property="og:type" content="article" />
<meta property="og:title" content="Naziv stranice" />
<meta property="og:description" content="Opis sajta" />
<meta property="og:image" content="Link do slike" />
<meta property="og:url" content="Link stranice" />
<meta property="og:site_name" content="Naziv sajta" />
<!-- Twitter-->
<meta name="twitter:title" content="Naziv stranice" />
<meta name="twitter:description" content="Opis sajta" />
<meta name="twitter:image" content="Link do slike" />
<meta name="twitter:site" content="@username" />
<meta name="twitter:creator" content="@username" />

Atributi schema

Schema.org je projekat zajednice sa misijom da stvaraju, odrzavaju i promovisu seme za strukturirane podatake na internetu. Diskutabilno je da li ovi atributi povecavaju rangiranje sajta pri pretrazivanju nekog upita, ali oni omogucavaju definisanje dodatnih meta podataka o sadrzaju na web stranici. Takvi podaci pomazu pretrazivacu da interpretiraju sadrzaj ispravno na stranici sa rezultatima pretrazivanja (SERP).

Jedni od primjetnijih primjena ovih atributa u rezultatima se vide pri pretrazivanju nekog proizvoda, usluge ili recepta koji je ocijenjen.

Google prikazuje ocjenjen recept u rezultatima

Seme su podjeljene u tipove, a svaki tip je povezan sa skupom atributa. Neki od njih su za knjige, filmove, muziku, recepte, serije, zdravlje, organizaciju, osobu, mjesto, lokalni posao, restoran, proizvod, ponudu, recenziju itd.

Koncept ovih meta podataka se moze vidjeti u kodu ispod:

<div itemscope itemtype="https://schema.org/Recipe">
  <span itemprop="name">Mom's Red Lentils</span>
  By <span itemprop="author">John Smith</span>,
  <meta itemprop="datePublished" content="2009-05-08" />May 8, 2009
  <img itemprop="image" src="bananabread.jpg" alt="Banana bread on a plate" />

  <span itemprop="description"
    >This classic banana bread recipe comes from my mom -- the walnuts add a
    nice texture and flavor to the banana bread.</span
  >

  Prep Time: <meta itemprop="prepTime" content="PT15M" />15 minutes Cook time:
  <meta itemprop="cookTime" content="PT1H" />1 hour Yield:
  <span itemprop="recipeYield">1 loaf</span> Tags:
  <link itemprop="suitableForDiet" href="https://schema.org/LowFatDiet" />Low
  fat

  <div
    itemprop="nutrition"
    itemscope
    itemtype="https://schema.org/NutritionInformation">
    Nutrition facts:
    <span itemprop="calories">240 calories</span>,
    <span itemprop="fatContent">9 grams fat</span>
  </div>

  Ingredients: -
  <span itemprop="recipeIngredient">3 or 4 ripe bananas, smashed</span> -
  <span itemprop="recipeIngredient">1 egg</span> -
  <span itemprop="recipeIngredient">3/4 cup of sugar</span>

  Instructions:
  <span itemprop="recipeInstructions">
    Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add the
    flour last. Pour the mixture into a loaf pan and bake for one hour.
  </span>
</div>

Strukturirani podaci se mogu testirati u ovim validatorima.

Pristupacnost

Responzivan i prilagodjen dizajn

Prisustvo <meta name="viewport" content="..."> linije ukazuje pretrazivacu da je stranica prilagodjena mobilnim uredjajima i kako treba kontrolisati dimenzije i skaliranje stranice. Ovim sajtovima se daje prednost, ali osim ove linije potrebno je definisati ponasanje stranice kroz CSS inace bi sadrzaj mogao izgledati losije sa ovom linijom.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Slike

Pretrazivaci ne mogu citati slike koje cine kljucni dio web stranica. Zato slike koriste alt atribut za pristupacnost. U pretrazi za slikama pretrazivac se vodi alternativnim tekstom.

<img alt="Opis fotografije" src="" />

Linkovi i veze

Pretrazivac ce pratiti izlazne linkove na sajtu da bi zakljucio da li web stranica nudi kvalitetan sadrzaj i o cemu se na njoj radi. Ako linkovi vode ka sajtovima sa kredibilitetom to je plus. Sa rel atributom je moguce naglasiti pretrazivacu da ne treba pratiti odredjeni link.

<a href="#" rel="nofollow"></a>

Koristiti nofollow za linkove u koje nemamo povjerenja
Sponsored za sponzorisane
Ugc za one koje su generisali korisnici (user generated content)

Brzo ucitavanje sadrzaja

Brzina ucitavanja stranice igra jos znacajniji faktor u rangiranju od kada su pametni telefoni preuzeli vecinu saobracaja na internetu. Oni mogu sporije ucitavati sadrzaj jer koriste mobilne podatke ili jer kod sajta nije ispravno prilagodjen manjim ekranima.

Brzina je samo jos jedan od faktora kvalitetnog korisnickog iskustva i Google preporucuje da ovo vrijeme bude ispod dvije sekunde, ali da cilj treba biti ispod pola sekunde.

Brzina se moze testirati na: PageSpeed Insights, Lighthouse, GTmetrix, Pingdom

Optimizacija koda

Kompresija i minimizacija koda
Upotreba hostinga sa CDN-om (content delivery network)
Upotreba generatora statickog sajta (static site generator) kao 11ty
Upotreba caching pretrazivaca
Skloniti JavaScript koji blokira ucitavanje sadrzaja (render blocking Javascript)
Izbjegavanje preusmjeravnja stranica

Smanjiti JavaScript koji blokira ucitavanje sadrzaja

Prije nego pretrazivac prikaze stranicu on mora napraviti DOM stablo rasclanjivanjem HTML elemenata. Tokom procesa, kad god se pojavi skripta, pretrazivac mora sacekati da se preuzme i izvrsi, potom nastaviti kreiranje DOM stabla.

Preporucuje se smanjiti upotrebu JavaScripta, posebno eksternih skripti koji se moraju preuzeti prije izvrsavanja. One koje su neophodne je:

Moguce staviti inline u sam dokument unutar <script> taga, ali ovaj sarzaj treba biti kratak i brzo se izvrsavati
Skripte koje nisu kljucne za inicijalno prikazivanje bi trebale biti asinhrone (asynchronoasius) ili odlozene (deferred)

<script type="text/javascript">
  /* ono sto bi bio sadrzaj manje JavaScript datoteke */
</script>

<script async src="my.js"></script>
<!-- Skripta ce biti preuzeta paralelno sa rasclanjivanjem stranice i izvrsena cim bude dostupna -->
<script defer src="my.js"></script>
<!-- Skripta ce biti preuzeta paralelno sa rasclanjivanjem stranice i izvrsena nakon sto stranica zavrsi rasclanjivanje -->

Optimizacija slika

Kompresija fotografija: Shortpixel, Image Resizer, Compress JPEG
Navodjenje velicine fotografije kroz width i height
Primjena lijenog ucitavanja (lazy loading)
Koristenje srcset atributa za razlicite velicine ekrana

Dodatni linkovi

SEO Cheat Sheet za Web Developere

webdevlpr

Petlja dogadjaja ili event loop

Sinhrono vs asinhrono izvrsavanje

V8

Call stack

Task queue i web API

Event loop

Makrozadaci

Mikrozadaci

Red izvrsavanja

Ukratko

Dodatni izvori

ES6 Moduli

Osnovna primjena

Podrazumijevani eksport

Dalje izvozenje

Dinamicno importovanje

Neke karakteristike modula

Opseg na nivou modula

Klase

Osnovno

Petlje ne vide metode

Izgradnja strukture sa geterima i seterima

Prosirivanje klase i nasljedjivanje

Staticna polja i metode

Super

Konstruktor

Metode

Polja klase

Nadjacavanje polja klase

static svojstva

super u objektu

Privatna polja i metode

Privatna svojstva sa WeakMap

Prosirivanje ugradjenih konstruktora

Provjera tipa

instanceof

toString metoda

Mix-in

Prototipno nasljedjivanje

Definisanje prototipa

Funkcija.prototype svojstvo

prototype svojstvo

Predefinisani prototipi

Lanac predefinisanih prototipa

Kreiranje naseg prototipskog nasljedjivanja

Pozivanje roditeljskog konstruktora

Rekreiranje new operatora

Posudjivanje metode od prototipa:

Izracunata imena svojstava

Gubljenje this i funkcija strelice

Quokka za debagovanje JavaScript-a

Funkcije su objekti

Svojstva objekta

Duzina parametara funkcije

Kontekstualno ime

Imenovani funkcijski izrazi

Metode funkcije

Prosljedjivanje po referenci

Proslijediti po referenci ili vrijednosti

Funkcija

Razlika izmedju let i var

"var" i "let" opseg

Hoisting varijabli

Ponovno deklarisanje

Svojstvo globalnog objekta

"var" ili "let"?

Sazetak

Eagle — biblioteka za organizaciju medija

Web dizajn inspiracija

Biblioteka licnih fajlova

Strasni sistemi za organizovanje fajlova (derogatory)

Pretrazivanje i organizacija

Eagle-fast

Mobilnost medija

Eksportovanje slika po dimenzijama i formatu

Biblioteka na oblaku

Kombinovanje slika u jednu

Pretraga po slici

Fajl vec postoji

`static` svojstva

`super` u objektu

Rekreiranje `new` operatora

Gubljenje `this` i funkcija strelice

`index.html` kao pocetna web stranica