Azt hittem, hogy csempészhetek egy kis JavaScript feelinget a PHP-be, sajnos nemsikerült. Vagyis csak félig.

PHP-ben akartam megoldani, hogy az itemek egy  ciklusból csak szép sorjában íródjanak ki a képernyőre. Tehát futás közben már renderelődjön is a tartalom a böngészőben.
Ennek tesztelésére készítettem egy rövid kódot:

Az előző cikkben, amiben az API kulcs backend-en történő elrejtéséről írtam, ígértem, hogy kifejtem majd részletesebben is az API proxy működését, ami nem teljesen transzparens proxy, mert a küldött adatokat is átalakítja, illetve a fő proxyra küldött API kulcsot is elrejti a végfelhasználó elől.
Most, hogy egy kódszínezőt is beépítettem a bogba, így minden készen áll arra, hogy kicsit részletesebben is bemutathassam az API proxy működését.

Mostantól szép színes kódokkal tudom bővíteni az írásaimat a Prism.JS segítségével.

Így fog kinézni egy átlagos JS kód:

//This is a comment line

function myFunctioon(argument){
	return argument;
}

let myString = "This is a string";
const myArr = [3, 2, 1];
var myJson = {
	key1: "value1",
    key2: "value2",
    key3: "value3",
}

document.querySelector('click', ()=>{
	const variable = undefined;
    let templateLiteral = `This is a ${variable}`;
    if(variable){
    	console.log("OK" + "OK")
    }else{
    	alert("NOT OK")
     }
})

myArr.map((item, index)=>{
	root.innerHTML = String(item) + " " + String(index)
    //Amúgy nem teszünk innerHTML-t ciklusba !!! :)
})

Így pedig a HTML

<!-- HTML COMMENT -->
<div id="root">CONTENT</div>
<input type="number" required>

És a CSS. (Itt például külön kis négyzetben láthatók lesznek a színek is)

	body {
		margin: 0px;
	}
    #idselector {
    	color: white;
    }
    .classelector {
    	color: green;
    }

És a JSON

{
  "key1":{"subkey1":"subvalue1", "subkey2":"subvalue2" },
  "key2":{"subkey1":"subvalue1", "subkey2":"subvalue2" },
  "key3":{"subkey1":"subvalue1", "subkey2":"subvalue2" },
}

A jobboldali copy gombra kattintással azonnali kimásolásra is lehetőség van.

Kipróbáltam, hogy FetchAPI-al le tudom e kérni Budapest aktuális időjárását egyenesen bele egy cikkbe vagy nevezzük ezt most postnak a Blog.hu-n.

 Elsőként a JavaScript kódot próbáltam beszúrni magába a post szerkesztőbe. Sajnos azt nem engedte megjeleníteni (automatikusan CDATA tagek közé zárta a script kódokat), illetve js cdn-nek sem sikerült használnom a blog.hu-t ( Megpróbáltam feltenni a sablon fájlok közé :D)
Aztán gondoltam egyet és felraktam a js részt a Guthubon egy Repo-ba, azt publikáltam Github Pages-el és azt linkeltem be ide "<script src="..."></script>"  formában a postba.

Objektumok/JSON adat használatakor fel kell készíteni a weboldalad vagy webalkalmazásod arra, hogy egy objektum keresett kulcsértékpárja nem létezik, illetve a keresett kulcs alatt található kulcsértékpárok sem. Ezt ellenőrizheted If-el is, de ez nagyon hosszú és kevésbé átlátható kódot eredményez. Erre találták ki a JavaScriptben az optional cahaininget.

Egy objektum / json adat értékét az objektum kulcsainak megadásával érhetjük el. Például, ha az users objektumunkban található egy user1 kulcs és az alatt egy email kulcs, akkor ezt users.user1.email formában érhetjük el. De mi történik akkor, ha nem létezik az user1 kulcs? Hibát kapunk. ugyanis user.user1 értéke undefined lesz, az undefined-nak pedig nincs email nevű property-je így users.user1.email-re már nem undefined-ot, hanem hibát kapunk, ami a JS kódunk teljes megállásával jár, azaz nem fut tovább.

A Google 6 módszert osztott meg arról, hogyan teheted webhelyed még hatékonyabbá, még gyorsabbá.

A lenti videóban Alan Kent 6 optimalizációs módszert oszt meg. Kent áttekinti a problémákat és javaslatokat mond azok javítására.