Javascript snippet of the day

[sanel]

Neki dan sam naletio na nesto od cega sam pao sa stolice. Da li znate sta ce sljedeci kod u javascriptu da vrati:

["10", "10", "10", "10"].map(parseInt)

Normalan citalac ce ocekivati:

[10, 10, 10, 10]

Ipak, JS dizajneri su skontali da su svi u krivu, pa cemo imati ovo:

[10, NaN, 2, 3]

Valjda zato sto Array.map prosljedjuje vise parametara nego sto smo navikli. Ipak, ne lezi vraze, ovo ce da radi kako treba:

[1, 4, 9].map(Math.sqrt) -> [1, 2, 3]

Evo primjera sta se desava:

function parse_int(s,i) { print("==> " + i); return parseInt(s); }

js> ["10", "10", "10", "10"].map(parse_int)                            
==> 0
==> 1
==> 2
==> 3
[10, 10, 10, 10]

Razlog svega ovoga je sto javascript dozvoljava poziv funkcija bez parametera, iako funkcija zahtijeva parametare:

function foo(a) { return a + 1; }
js> foo()
NaN
js> foo(1)
2
js> foo(1,2) 
2

a nas parseInt() kao drugi parametar prima bazu po kojoj ce raditi konverziju. U nasem slucaju, baza je index u nizu, pa imamo:

parseInt("10", 0); -> 10
parseInt("10", 1); -> NaN
parseInt("10", 2); -> 2
parseInt("10", 3); -> 3

Eto, naucio sam nesto novo. Unaprijed se izvinjavam svim javascript ekspertima koji poznaju ovu materiju - odoh si obloziti oci kamilicom da dodjem sebi.

[adioe3]

Meni je pak najdraže iteriranje kroz djecu elementa. Ako imamo:

<div id="a">
    Nu lijepa teksta.
  
    <div id="b">
    A jos ljepseg djeteta.
    </div>
</div>

Hajmo obić djecu od tog prvog DIV elementa:

var nasa_buducnost = document.getElementById("a").children;
for (i in nasa_buducnost){
    console.log(i);
    console.log(nasa_buducnost[i]);
}

Output u Chromeu je da čupaš kosu:

Svako dijete zna da je for petlja iz C jezika jedina koja radi. Ovo vrati očekivano:

var nasa_buducnost = document.getElementById("a").children;
for (var i=0; i < nasa_buducnost.length; i++) {
    console.log(nasa_buducnost[i]);
}

A kad tek se počne zapravo nešto raditi sa elementima, uffa, ljepota! Nekoliko bisera koji mi padaju sad na pamet:

• Node.insertBefore() ima ali ne i Node.insertAfter(), za takvo što treba koristiti logična rješenja tipa

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

Naravno, ovo gore ne pokriva slučaj ako hoćete dodati iza zadnjeg elementa, za to postoji metoda:

• Node.appendChild() ima ali ne i Node.prependChild(), opet, samo logična rješenja:

Node.insertBefore(newNode, Node.firstChild)

• Array.forEach ima ali ne i Object.forEach mada for i for...in radi i na Array i na Object. Želim puno sreće, zdravlja i veselja onome ko treba da prođe kroz propertyje od nekog objekta
• Svaki browser za globalnu varijablu navigator.appName vrati Netscape
• evo Chrome u mene za navigator.appCodeName vrati Mozilla
• itd do beskonačnosti

Prva slika koja pada na pamet je za jezik sa relativno sličnim nivoom kvalitete:

Onda gledaš u ovakve primjerke misleći “Jednostavno, zašto?” te odeš čitat neki OpenBSD source il takvo šta da ispereš oči i mozak.

[testni_hamo2]

Javascript je super. Uvijek te nanovo iznenadjuje

On a more serious note. Moderni web develiopment je u krizi. Ovo ne moze ovako - mora se stabilizirati.
Dok se to ne desi - postoje pokusaji da se makar malo iskoristi u odnosu na ovo relativno stabilna baza
klasicnih web aplikacija: http://unpoly.com/

[sanel]

Za Polymer ne pokusava isto?

Tuga je sto su desktop i web koncepti razvoja otisli u dva razlicita pravca i vjerovatno je glavni krivac za to CSS layout dizajn. 20 godina istrazivanja iz desktop svijeta je otislo niz vodu…

Nisam cuo jednom da ljudi koji su presli na web (a radili su prije na desktop aplikacijama), imali osjecaj da su dosli u kameno doba.

[testni_hamo2]

Problem je sto je HTML bio zamisljen kao format za opisivanje dokumenata, a web kao platforma za razmjenu dokumenata a sad mora da nosi breme platforme za razvoj aplikacija.
Dakle i CSS je prvi zamisljen opet kao jezik za formatiranje dokumenata. I oni taj posao rade relativno dobro - npr. cak je i EPUB format za knjige u sustini samo html sa odredjenim metapodacima.

Koliko sam vidio polymer samo dodaje mogucnost pravljenja komponenti na client sideu. Unpoly tvoju klasicnu web aplikaciju (koja svaki put na backendu izgenerise kompletan html kao odgovor) ubrzava tako sto umjesto sto ce dati browseru taj cijeli html da ga izrendera, uzme iz njega samo selektovani dio i updateuje ga dinamicki.

Ako je neko radio na Railsu i koristio Turbolinks - ideja je ista, samo sto turbolinks uvijek zamjenjuje body i head elemente, dok unpoly uzima ono sto mu ti preko selektora kazes - (npr. sve elemente odredjene klase ili element sa nekim id-om).
Mislim performance nije smooth kao npr. React prerenderisan na serveru i onda pusten, ali je pristojan gledajuci koliko manje imas posla i koliko manje nivoa apstrakcije imas.

[irfanka]

Što, pa js je super - možeš napraviti ovo, npr:

Array(16).join('lol' - 1) + ', Batmaaan!'

Output:

NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN, Batmaaan!'

[adioe3]

Jos par bisera koje sam pokupio od kolega danas:

{} + [] = 0
[] + {} = Object
{} + {} + [] = NaN

Takodjer divna stvar: http://www.jsfuck.com/