HTML interpolacija u okviru Vue.js

Posted on 30/03/2018 at 18:12.Written by Dragoljub Živanović

Uvod

Vue.js je MVVM framework, koji ima sistem kako da poveže “model” (podatke) sa odgovarajućim “view”. Sekcija “view” je kao i u drugim frontend bibliotekama ustvari HTML, ali sa dodatnim funkcionalnostima koje mu omogućavaju dinamičko prikazivanje model-a, a to su:

“interpolacija”
“direktive”

Deo HTML koda nad kojim se izvršava interpolacija se obeležava sa duplim vitičastim zagradam a takva sintaksa je poznata pod nazivom “Mustache syntax”. Sve što se nalazi u okviru duplih vitičastih zagrada će biti obradjeno od strane Vue.js i zamenjeno odgovarajućim rezultatom.

Interpolacija teksta

Ukoliko se izmedju zagrada nalazi tekst koji predstavlja neko svojstvo iz “data” objekta ova sintaksa će da prikaže u okviru HTML-a trenutnu vrednost iz tog svojstva. Pošto je “data” svojstvo specifično i ponaša se kao proxy prema vue instanci, nije potrebno koristi sintaksu this.data.svojstvo, već je dovoljan samo naziv svojsva. Najbitnija stvar vezana za interpolaciju teksta je da će Vue.js ponovno obraditi sve što je u okviru zagrada ukoliko dodje do promene podataka, nakon čega će automatski ažurirati HTML.

<p id="example">{{ message }}</p>

<script>
    new Vue ({
      el: "#example"
      data: {
        messsage: "Ovaj tekst treba da se izrenderuje!"
      }
    });
</script>

<p id="example">{{ message }}</p>

new Vue ({

el: "#example"

data: {

messsage: "Ovaj tekst treba da se izrenderuje!"

}

});

</script>

Sa ovakvim načinom se interpretira “data” kao običan tekst, ne kao HTML. Ukoliko je potrebno da se evaulira HTML onda se koristi direktiva “v-html”. Treba naglastiti da se interpolacija teksta ne može koristiti za interpretaciju atributa HTML taga, za to je neophodno da se koristi direktiva “v-bind”.

Životni ciklus Vue.js instance/komponente

Posted on 28/03/2018 at 20:55.Written by Dragoljub Živanović

Uvod

vue

Da bi se tergetirao neki odredjeni trenutak u “životu” jedne vue instance/komponente, u sam core Vue.js frameworka su integrisane tzv. udice (eng. hooks). Udice omogućavaju da željenu akciju pokrenete precizno u odgovarajućem trenutku životnog ciklusa komponente. Udice u okviru Vue.js frameworka su predstavljene kroz specifične predefinisane metode koje to omogućuju.

Metode vezane za Lifecycle

Sve metode vezane za lifecycle se smeštaju u root vue instance kao direktno svojstvo.

Svojstva Vue instance: methods, computed i watch

Posted on 25/03/2018 at 17:14.Written by Dragoljub Živanović

methods

Svojstva u okviru Methods su funkcije vezane za Vue instancu. “Metode” se koriste kada želite da se nešto izvrši nakon nekog događaja ili kada želite da se funkcija izvrši kada god se promeni stanje instance/komponente nakon čega se DOM re-renderuje. “Metode” se takodje izvršavaju pri svakom učitavanju instance (komponente).

When this data changes, the view will re-render. Method invocation will always run the function whenever a re-render happens.
Dokumentacija Vue.js

Ovakvo ponašanje metoda je omogućeno time što Vue.js ne vodi računa šta se nalazi u okviru metode pa će metoda, biti ponovo proračunata čak iako promena ne utiče na metodu.

Primer

methods

U ovome primeru imamo dve metode (“obavestenje()” i “ispisiVrednostB()”) čije su funkcionalnost jednostavne i opisane samim nazivom metode. Medjutim funkcionalnost koja je važna u ovome primeru je ispisivanje poruke u konzoli svaki put kada se klikne bilo koje dugme.
Kao prva stvar na koju treba obratiti pažnju je činjenica da se odmah nakon učitavanja Vue instance u konzoli ispisuju poruke iz obe metode, što potvrdjuje činjenicu da se metode izvršavaju pri svakom učitavanju Vue instance (komponente).
Zatim treba pratiti konzolu nakon svakog klika na akciono dugme, jer se nakon svakog klika ispisuju po dve nove poruke, bez obzira koje dugme je kliknuto. Ovo ukazuje da se obe metode izvršavaju svaki put kada se re-renderuje DOM nakon promene nekog od data svojstava, pa čak i metoda na koju promena data svojstva ne utiče.

See the Pen Specifičnost metoda u Vue.js by Web programiranje (@chos) on CodePen.

Zaključak:

Stoga zbog svega pomenutog treba naglasiti da u slučaju čestog ažuriranja user interfejsa, može doći do problema sa preformansama aplikacije, jer se troše resursi pri ponovnom pokretanja svih metoda. Na primer, ako imamo aplikaciju koja prikazuje tajmer koji se ažurira posle svake sekund, sve funkcije u okviu “methods” objekta će biti pozivane za izvršenje posle svake sekunde, i ponovno izračunati bez obzira na to koja im je namena. U ovakvom slučaju je preporuka koristi computed properties.

Pristup svojstvima Vue.js instance

Posted on 22/03/2018 at 18:42.Written by Dragoljub Živanović

Pristup svojstvima u okviru same Vue instance

Unutar Vue.js instance ključna reč “this” ukazuje na instancu vue.js objekta. Stoga se za pristup svojstvima instance koristi rezervisana reč “this”, na koju se nadovezuje naziv željenog svojstva:

this.nazivSvojstvaVueInstance

1	this.nazivSvojstvaVueInstance

Treba napomenuti da su odredjena svojstva vue instance specifična, jer se kod njih odvija dodatna “magija u pozadini”. Svojstva data, methods, computed i watch se ponašaju kao “proxy za vue instancu”, pa sva svojstva unutar njih se direktno prosledjuju vue instanci. Zbog toga sva child svojstva ovih navedenih svojstava se predstavljaju kao da su direktna svojstva Vue instance.

Primer

Zahvaljujući ovoj “magiji”, kod tergetiranja child svojstava unutar tih specifinih svojstava, pristupamo im kao da su “glavna” svojstva. Tako da ne moramo da koristimo “this.data.nekoSvojstvo”, već možemo da koristimo samo “this.nekoSvojstvo”.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    ispisiPoruku : function () {
       console.log (this.message);
    }
  }
})

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

methods: {

ispisiPoruku : function () {

console.log (this.message);

}

})

U ovome primeru umesto da koristimo this.data.message izraz, mi koristimo this.message kao sasvim legitiman način.

Problematični slučajevi pri korišćenju “this” (za: data, methods, computed i watch)

a) Arrow funkcija

Child svojstva u okviru ovih “specijalni” svojstava (data, methods, computed i watch), upravo zbog “magije” u pozadini ne bi trebalo da koriste arrow funkciju jer ona koristi leksički “this” tj. koristi “this” od roditeljskog okruženja pa bi u tom slučaju vraćao “undefined”. Više o arrow funkciji možete pročitati u članku “Arrow funkcija”

b) Closure

Ukoliko clousure funkciju poziva spoljna funkcija, onda se pri odredjivanju vrednosti ključne reči “this” koristi “podrazumevano pravilo” (pročitaj više o ovome u članku “Značenje operatora “this” u JavaScript-u”). Iz pomenutog razloga ključna reč “this” u okviru closure ukazuje na globalni objekat.

Primer

U ovome primeru this.message ne vraća očekivanu vrednost već “undefined” jer globalni objekat nema svojstvo “message”

var app = new Vue({
  el: "#app",
  data: {
    message: 'Poruka poslata iz closure!'
  },
  methods: {
    ispisiPoruku : function () {
       function nekaClosure(){
         return this.message;
       };
       var a =  nekaClosure()
       console.log(a);              // Vraća undefined
    }
  }
})

var app = new Vue({

el: "#app",

data: {

message: 'Poruka poslata iz closure!'

methods: {

ispisiPoruku : function () {

function nekaClosure(){

return this.message;

};

var a = nekaClosure()

console.log(a); // Vraća undefined

}

})

Za rešenje ovog problema možemo koristi poznatu tehniku var self = this;, gde u okviru nove variable van closure funkcije sačuvamo vrednost this (closure ima uvek pristup ovoj promenjivoj). Više o ovome mehanizmu pročitajte u sekciji “Mehanizam self=this”

See the Pen Closure unutar Vue.js by Web programiranje (@chos) on CodePen.

Svojstva Vue instance

Posted on 17/03/2018 at 12:24.Written by Dragoljub Živanović

Šta su svojstva Vue instance?

Pri definisanju nove Vue instance konstruktorska funkcija kao parametar prihvata objekat kroz koji se definišu sve opcije Vue instance. U okviru tog objekta Vue.js obezbedjuje već predefinisana svojstva svaka sa svojim karakteristikama, koja omogućavaju rad Vue aplikacije. Sledeća lista predstavlja osnovna svojstva svake Vue instance i njima se pristupa van instance sa predznakom $.

Pored njih su pomenuta i tri veoma važana svojstva: computed, methods i watch koja se ponašaju kao proksi (više o ovome pročitajte u članku “Pristup svojstivima Vue instance”).

U okviru 3.0 verzije $el može da se koristi za pristup osnovnom DOM element-u, uglavnom kod komponenti koje koriste fragmente. Ipak je preporučeno da se od verzije 3.0 izbegava oslanjanje na $el već da se umesto njega koriste šablonske reference $refs kao direktan pristup DOM elementima.

U okviru 2.0 verzije sa svojstvom “el” definišemo HTML element nad koji će da “upravlja” Vue aplikacija:

HTML

<div id="nekiSelektor"></div>

1	<div id="nekiSelektor"></div>

JavaScript

new Vue ({
   el: "#nekiSelektor"
})

new Vue ({

el: "#nekiSelektor"

})

Instalacija Vue.js

Posted on 16/03/2018 at 19:18.Written by Dragoljub Živanović

Integrisanje u postojeći projekat

Izmedju ostalog Vue.js je popularan medju developer-ima, jer ima mogućnost da se jednostavno integriše u postojeći projekat, dovoljno je da se na dnu body sekcije ubaci skipta koja se nalazi na CDN-u:

ver. 3.0
ver. 2.0

<script src="https://unpkg.com/vue@next"></script>

1	<script src="https://unpkg.com/vue@next"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Kada imamo dostupanu Vue.js biblioteku u okviru projekta posle ovog script taga je dovoljno da otvorimo novi script tag u okviru koga će se kreirati instanca.

ver. 3.0
ver. 2.0

U slučaju verzije 3.0 je malo promenjena sintaksa (pogledajte zbog čega su nastale ove promene na oficijelnom sajtu), pa instanciranje Vue objekta izgleda ovako:

let app = Vue.createApp({ // Options objekat  });

1	let app = Vue.createApp({ // Options objekat });

U ovoj verziji je nakon instanciranja je još potrebno da se odradi “mount-ovanje” tj. povezivanje instance sa HTML elementom.

let vm = app.mount("#app")

1	let vm = app.mount("#app")

Pa bi ceo kod izgledao ovako:

let app = Vue.createApp({ // Options objekat  });

let vm = app.mount("#app")

let app = Vue.createApp({ // Options objekat });

let vm = app.mount("#app")

Primer (3.0 ver):

See the Pen
Untitled by Web programiranje (@chos)
on CodePen.

Svaka Vue aplikacija mora da ima kreiranu instancu na osnovu konstruktorske funkcije Vue(). Konstruktorskoj funkciji se prosledjuju podaci neophodni za kreiranje nove instance kroz tzv. “options objekat”. Za kreiranje nove instance je dovoljno pozvati konstruktorsku funkciju sa ključnom reči new.

new Vue(  { //ovo je tzv. options objekat }  )

1	new Vue( { //ovo je tzv. options objekat } )

Ukoliko imamo potrebu da pristupamo svojstvima Vue instance i izvan same instance, onda je potrebno dodeliti nekoj promenjivoj kreiranu instancu:

var vm = new Vue({
  // "options objekat"
})

var vm = new Vue({

// "options objekat"

})

Dozvoljeno je intancirati više Vue instanci ali sva od instanci mora da “kontroliše” različite delove HTML-a, jer nije dozvoljeno vezivati jednu instancu za više različitih HTML delova. Medjutim često se javlja potreba da se u web aplikaciju ugradi više istih ili sličnih HTML elemenata koji se ponavljaju (kao što je npr. produkt), a ipak da su povezani sa Vue.js instancama. Pošto nije dozvoljeno vezivati jednu instancu za više različitih HTML delova, onda u tom slučaju treba kreirati Vue.js komponentu i ugraditi je više puta.

Destruktuiranje u JavaScriptu

Posted on 26/01/2018 at 17:47.Written by Dragoljub Živanović

Uvod

destruktuiranje niza

Pojam “destruktuiranje” podrazumeva “izvlačenje” podataka iz strukture podataka (objekat ili niz) i pravljenje novih manjih struktura kojima se dodeljuju vrednosti na osnovu “izvučenih” podataka.
Pre ES2015 je bilo neophodno da se napiše kod koji bi vršio destruktuiranje ali srećom sa novim JavaScript standardom je došla i sintaksa koja omogućava da JavaScript kompajler ovaj posao automatski izvršava umesto nas. Ova sintaksa se naziva “destructuring assignment”, i upravo predstavlja to što joj sam naziv govori, dodeljuje vrednosti iz neke strukture novim promenjivima.

Primer

“Manuelno” destruktuiranje

var velikaStruktura = [1, 2, 3];
// Manuelno destruktuiranje
var a = velikaStruktura[0];
var b = velikaStruktura[1];
var c = velikaStruktura[2];

var velikaStruktura = [1, 2, 3];

// Manuelno destruktuiranje

var a = velikaStruktura[0];

var b = velikaStruktura[1];

var c = velikaStruktura[2];

Nova ES6 sintaksa

var velikaStruktura = [1, 2, 3];
// Automatsko destruktuiranje
var a, b, c;
[a,b,c] = velikaStruktura;

console.log(a);      // Vraća 1
console.log(b);      // Vraća 2
console.log(c);      // Vraća 3

var velikaStruktura = [1, 2, 3];

// Automatsko destruktuiranje

var a, b, c;

[a,b,c] = velikaStruktura;

console.log(a); // Vraća 1

console.log(b); // Vraća 2

console.log(c); // Vraća 3

NAPOMENA: [a,b,c] iz prethodnog primera nove sintakse NIJE NIZ ! ! !
Kada se uglaste zagrade (ili vitičaste) nalaze sa leve strane znaka jednakosti, to ukazuje na patern (šablon) za dodeljivanje promenjivih. One nam omogućavaju da definišemo JavaScript kompajleru kako i pod kojim nazivom varijabli da sačuva destrukturisane vrednosti.

Novi tipovi podataka Map, Set & Symbol

Posted on 22/01/2018 at 09:25.Written by Dragoljub Živanović

Symbol

Karakteristike

Symbol je novi tip podataka koji je došao sa ES2015 standardom. Symbol predstavlja jedinstveni token. Simbol se kreira koristeći funkciju Symbol().

noviSymbol1 = Symbol();
noviSymbol2 = Symbol();
noviSymbol1 == noviSymbol2; // Vraća false

noviSymbol1 = Symbol();

noviSymbol2 = Symbol();

noviSymbol1 == noviSymbol2; // Vraća false

Symbol može biti kreiran i sa label-om, koji mu se prosledi kao string. Taj label ne utiče na vrednost symbola, ali je koristan pri debagovanju i može da prikaže koristeći metod toString() nad symbol-om.

let nekiSymbol = Symbol('nekiLabel');
console.log(nekiSimbol);     // Vraća: Symbol('nekiLabel')

1 2	let nekiSymbol = Symbol('nekiLabel'); console.log(nekiSimbol); // Vraća: Symbol('nekiLabel')

Namena: Ključ svojstva objekta

Uglavnom se “symbol” koristi kao ključ svojstva objekta, kada želimo da zaštitimo to svojstvo. Kada se koristi “symbol” kao ključ svojstva objekta, potrebno je da se koriste uglaste zagrade za pristup svojstvu (tzv. “bracket notation”). Takva svojstvo imaju sledeće karakteristike:

Jedinstveno svojstvo
Svojstvo ne može da se nabraja (eng. enumerated) kroz “for…in” petlju
Svosjtvo ignorišu metode: Object.keys(), Object.getOwnPropertyNames() i JSON.stringify()

let user = {};
let email = Symbol();

user.name = 'Dragoljub';
user.age = 44;
user[email] = 'nekimail@example.com';

Object.keys(user);                  // Vraća: Array [ "name", "age" ]
Object.getOwnPropertyNames(user);   // Vraća: Array [ "name", "age" ]
JSON.stringify(user);               // Vraća: "{"name":"Dragoljub","age":44}"

let user = {};

let email = Symbol();

user.name = 'Dragoljub';

user.age = 44;

user[email] = '[email protected]';

Object.keys(user); // Vraća: Array [ "name", "age" ]

Object.getOwnPropertyNames(user); // Vraća: Array [ "name", "age" ]

JSON.stringify(user); // Vraća: "{"name":"Dragoljub","age":44}"

Treba napomenuti da privatnost ovoga svojstva nije 100%, jer ipak postoji način za pristup svojstvu preko metoda “.getOwnPropertySymbols()” i .ownKeys():

Object.getOwnPropertySymbols(user);     // Vraća: Array [ Symbol() ]
Reflect.ownKeys(user)                   // Vraća: Array [ "name", "age", Symbol() ]

1 2	Object.getOwnPropertySymbols(user); // Vraća: Array [ Symbol() ] Reflect.ownKeys(user) // Vraća: Array [ "name", "age", Symbol() ]

Nove karakteristike “string-a”

Posted on 16/01/2018 at 14:27.Written by Dragoljub Živanović

String su iterabilne kolekcije

String tip podataka je od ES2015 standarda postalo iterabilna kolekcija podataka tzv. “iterable”. Sada su string-ovima dostupni svi mehanizmim koji zahtevaju da kolekcija ima implementiran “iterable protokol”. Pa tako sada možemo nad string-ovima koristiti “for..of”:

for (const clanKolekcije of 'abc') {
    console.log(clanKolekcije);
}
// Vraća:
// a
// b
// c

for (const clanKolekcije of 'abc') {

console.log(clanKolekcije);

}

// Vraća:

// a

// b

// c

ili čak da koristimo spread operator koji takodje zahteva iterable kolekciju za kreiranje niza:

const karakteri = [...'abc']; //
console.log(karakteri); // Vraća: ['a', 'b', 'c']

1 2	const karakteri = [...'abc']; // console.log(karakteri); // Vraća: ['a', 'b', 'c']

Više o ovome pogledajte u delu “Iteratori i Iterable protokol”

Šablonski literali (template literals)

šablonski literali

Šablonski literali (eng. “template literals”) su znakovni nizovi (tzv. string) sa ugradjenim izrazima. Obeležavaju se obrnutim polunavodnicima (eng. backtick).
“Template literal” predstavlja novi poboljšani način konkatenacije string-ova, koji je pregledniji i jednostavniji za rad. U template literal-u je dozvoljena ugradnja izraza, ukoliko se obeleže sa dolar znakom i vitičastim zagradama. Template podrazumeva tzv. ” “preset format” dok “literal” predstavlja vrednost koja je napisana tačno onako kako se podrazumeva da se tumači. Stoga svaka nova linija, dodatna praznina (tab) postaju deo tog stringa
Šablonski literali objedinjuju sledeće karakteristike:

String interpolation

let first = 'Pera'; let last = 'Perić'; console.log(`Zdravo ${first} ${last}!`); //Vraća: Zdravo Pera Perić!

1
2
3

let first = 'Pera';
let last = 'Perić';
console.log(`Zdravo ${first} ${last}!`); //Vraća: Zdravo Pera Perić!

Multi-line string literals tzv. “preset format”, tj. kako je zapisano u kodu tako se i interpretira na izlazu.

let multiLine = `Ovo je
neki string
    koji se definiše
u više linija`;

// Izlaz:
//Ovo je
//neki string
//    koji se definiše
//u više linija

let multiLine = `Ovo je

neki string

koji se definiše

u više linija`;

// Izlaz:

//Ovo je

//neki string

// koji se definiše

//u više linija

Primer

Primer uradjen sa ES5 i konkatenacijom string-ova:

var osoba = {
  ime: 'Petar',
  nadimak: 'Pera',
};
console.log('Zdravo, Ja sam ' + osoba.ime + '!'  +  "\n" + 'Možete me zvati "' + osoba.nadimak + '".');

// Zdravo, Ja sam Petar!
// Možete me zvati "Pera".

var osoba = {

ime: 'Petar',

nadimak: 'Pera',

};

console.log('Zdravo, Ja sam ' + osoba.ime + '!' + "\n" + 'Možete me zvati "' + osoba.nadimak + '".');

// Zdravo, Ja sam Petar!

// Možete me zvati "Pera".

Novi pristup sa šablonskim literalima:

var osoba = {
  ime: 'Petar',
  nadimak: 'Pera',
};
console.log(`Zdravo, Ja sam ${osoba.ime}!
Možete me zvati "${osoba.nadimak}".`);

// Zdravo, Ja sam Petar!
// Možete me zvati "Pera".

var osoba = {

ime: 'Petar',

nadimak: 'Pera',

};

console.log(`Zdravo, Ja sam ${osoba.ime}!

Možete me zvati "${osoba.nadimak}".`);

// Zdravo, Ja sam Petar!

// Možete me zvati "Pera".

Spread & Rest operator

Posted on 15/01/2018 at 08:36.Written by Dragoljub Živanović

Spread operator

Sa novim ES2015 standardom je došao novi operator “…” koji može da razdvoji niz u listu i obrnuto da grupiše listu u niz. U zavisnosti koju funkciju obavlja ovaj parametar ima naziv “spread” ili “rest”. Ukoliko se operator nalazi ispred iteratibilnog objekta i “širi” iterator (npr.niz) u pojedinačne vrednosti praveći listu, onda se naziva “spread”.

Transformacija niza u listu argumenata

Ovaj operator je zamena za često korišćen problem kada je potrebno niz prebaciti u listu argumenata. A najbolji primer je “širenje” niza u listu argumenata funkcije. Ovaj operator se koristi pri pozivanju funkcije:

function foo (a,b,c){
  console.log(a);
  console.log(b);
  console.log(c);
}
argNiz = [1,2,3];

// Problem funkcija ne prihvata niz:
foo(argNiz);                         // Vraća: [1,2,3], undefined, undefined

// Stari način rešavanja problema:
foo.apply(null, argNiz);             // Vraća: 1,2,3

// Novi pristup sa novom sintaksom
foo(...argNiz);                      // Vraća: 1,2,3

function foo (a,b,c){

console.log(a);

console.log(b);

console.log(c);

}

argNiz = [1,2,3];

// Problem funkcija ne prihvata niz:

foo(argNiz); // Vraća: [1,2,3], undefined, undefined

// Stari način rešavanja problema:

foo.apply(null, argNiz); // Vraća: 1,2,3

// Novi pristup sa novom sintaksom

foo(...argNiz); // Vraća: 1,2,3

Deklaracije niza koji sadrži drugi niz

Koristi se u okviru deklaracije niza koji sadrži drugi niz:

var a = [2,3]
var b = [1, ...a];    // [1,2,3]

1 2	var a = [2,3] var b = [1, ...a]; // [1,2,3]

Kloniranje objekta

Sa novim standardom je dozvoljeno korišećenje spread operatora u okviru object literala. Ova pogodnost nam omogućava da korišćenjem spread operatora jednostavno kloniramo objekte, bez korišćenja metode Object.assign():

var obj1 = { foo: 'bar', x: 42 };

var clonedObj = { ...obj1 }; // Vraca: { foo: 'bar', x: 42 }

var obj1 = { foo: 'bar', x: 42 };

var clonedObj = { ...obj1 }; // Vraca: { foo: 'bar', x: 42 }

Spajanje dva objekta

Korišećenjem spread operatora je olakšano spajanje dva objekta bez dupliranja svojstava:

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var mergedObj = { ...obj1, ...obj2 }; // Vraća: { foo: "baz", x: 42, y: 13 }

var obj1 = { foo: 'bar', x: 42 };

var obj2 = { foo: 'baz', y: 13 };

var mergedObj = { ...obj1, ...obj2 }; // Vraća: { foo: "baz", x: 42, y: 13 }