Frontend 2 - NinaPajonk/BlokTech2021 GitHub Wiki

Front-end Week 1: Progressive Enhancement Findings

Desk research Progressive Enhancement

Progressive Enhancement houdt in dat je website/ app op elke browser werkt. Dit houdt dus ook in op oudere versie van browsers. De eerste laag bestaat uit HTML (semantisch correct). Zodat de informatie/inhoud centraal staat en voor iedereen dus goed te volgen is. Daarna komt de tweede laag, die bestaat uit CSS. Zodat je de visuele weergave kan opmaken. En als laatste Javascript voor nog meer gebruiksvriendelijkheid. Door Progressive Enhancement is je website altijd goed te volgen ook als bijvoorbeeld javascript of css weg valt. Je hebt altijd een sterke basis om op terug te vallen. Zie onderstaande afbeelding voor een visueel beeld van de 3 lagen: Progressive Enhancement What is progressive enhancement. (z.d.). [Illustratiee]. Shopify. https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care

In mijn eigen project, de eerste laag uit HTML. 2e en 3e laag de opmaak en css form validation en javascript form validation. Wanneer ik javascript uit zet in mijn applicatie, valt de animation van de h1 op de homepage weg en de javascript form validition. Maar mijn formulier werkt nog steeds. Wanneer je CSS uitzet valt de opmaak weg. Het formulier laat de legends nu ook zien voor extra duidelijkheid. Maar het formulier is nog steeds te gebruiken. De html werkt dus ook opzich zelf, het geeft nog steeds form validation aan door gebruik te maken van patterns en required etc. Progressive Enhancement

bronnen:

Chapter 4 - Data Structures: Objects and Arrays

De wereld zit vol met gegevens die genoteerd kunnen worden, om te werken met veel digitale gegevens moet er eerst een manier gevonden worden om deze op de juiste manier te structureren en te presenteren. In JavaScript zijn datastructuren opgebouwd uit de volgende onderdelen: Strings, Boleans en nummers. JavaScript heeft een datatype dat je kan gebruiken voor het opslaan van verschillende waarden. Dit noem je een array en schrijf je tussen [vierkante haken], gescheiden door komma's. Een array kan bestaan uit een lange lijst. (zie mijn code dogs.json bestand als voorbeeld). JSON (JavaScript Object Notation) wordt veel gebruikt voor opslag van gegevens. Om een waarden op te halen uit een Array begin je met tellen vanaf 0 en niet met 1. Voorbeeld: listOfNumbers[0].

De elementen van een array worden opgeslagen als eigenschappen. De length is bijvoorbeeld een eigenschap van een array die laat zien hoeveel elementen een array heeft. array.length Als je weet dat de eigenschap die je wilt ophalen color heet, gebruik je value.color Er zijn enkele uitzonderingen: undefind en null, deze waardes hebben geen properties. Properties kunnen ook functies bevatten, dit noem je methods.

Voorbeeld Array:

var puppies = ['Harrie','Wolf','Momo']; 
// puppies[0] is nu: 'Harrie' 
// puppies[1] is nu: 'Wolf'
// puppies[2] is nu: 'Momo'

Van getallen, strings en Booleans is het onmogelijk om waarden te veranderen. Objecten werken anders, je kan de eigenschappen wel veranderen, waardoor een objectwaarde op verschillende momenten een andere inhoud heeft. Je kan objecten vergelijken met de operator == Als beide objecten precies dezelfde waarde hebben, krijg je "true" terug.

Nuttige array methods zijn push and pop, deze verwijderen of voegen elementen toe aan het einde van een array. De method indexOf doorzoekt de gehele array en geeft de index terug waar de waarde wordt gevonden. Een string kan worden herhaald met de methode repeat, die een nieuwe string maakt met kopieën aan elkaar geplakt. Voorbeeld: console.log("LA".repeat(3)); // → LALALA

Chapter 13 - JavaScript and the Browser

Een netwerkprotocol beschrijft de communicatie over een netwerk. Er zijn verschillende protocollen voor het verzenden en ophalen van e-mail, delen van bestanden. Het Hypertext Transfer Protocol (HTTP) is een protocol voor het ophalen van informatie, zoals websites of afbeeldingen tussen netwerken. Http VanHakobyan. (z.d.). HTTP-Protocol-Manipulation [Afbeelding]. Github. https://github.com/VanHakobyan/HTTP-Protocol-Manipulation

Transmission Control Protocol (TCP) zorgt ervoor dat alle devices die verbonden zijn met het internet met elkaar communiceren via ports. Computers kunnen met elkaar communiceren door te luisteren en te praten, ze moeten verbinding maken met dezelfde poort. De luisterende computer wordt de server genoemd en de verbonden computer wordt de client genoemd.

Het World Wide Web is een geheel van protocollen die het mogelijk maak websites in een browser te bezoeken. Machines die met het Internet verbonden zijn krijgen een IP adres, wat een nummer is dat gebruikt kan worden om berichten naar die machine te sturen.

HTML (Hypertext Markup Language) is een document indeling wat bevat tekst, maar ook tags die structuur geven aan de tekst. Het document begint met <!doctype html> dat aangeeft aan browsers dat het html tekst is. Naast de standaards html tags, kan je ook met de <script> tag, javascript toevoegen en met de <style> tag CSS toevoegen. (Side-note in mijn project heb ik het niet op deze manier gedaan, maar een aparte stylesheet en script bestand. En deze geconnect met mijn html. <link rel="stylesheet" href="css/style.css"> <script src="javascript/client.js" defer></script> )

Chapter 14 - The Document Object Model

Een HTML-document bestaat uit een verzameling van geneste "boxen". Namelijk tags zoals <body> en </body> etc. De structuur van de browser om een document weer te geven wordt het document object model (DOM) genoemd. . Om door de DOM heen te navigeren kan je: firstChild, LastChild, PreviousSibling en NextSibling gebruiken. DOM Wikipedia. (z.d.). Document Object Model [Afbeelding]. Wikipedia. https://en.wikipedia.org/wiki/Document_Object_Model

TREE De gegevensstructuur heeft allemaal verschillende vertakkingen vandaar de naam Tree. In het geval van het DOM wordt document.documentElement gezien als wortel. Bijna alles aan de DOM-gegevensstructuur kan worden veranderd. Door gebruik te maken van parent, child en siblings kun je gemakkelijk bepaalde wijzigingen aanbrengen aan elementen zoals styling of interactie met Javascript. Een andere manier is een ID's een Classes meegeven. Er wordt al een bepaalde styling meegegeven vanuit het DOM. Een voorbeeld hiervan is dat een link een standaard de blauwe kleur heeft en paars wordt wanneer de link al is bezocht. Finding Elements : getElementsByTagName, getElementsById, getElementsByClassName

Front-end Week 2: Codeplan

Chapter 15 - Handling Events

Event handlers worden gebruikt om te reageren op gebeurtenissen, ze luisteren achter de schermen naar welke gebeurtenis er op dat moment plaatsvindt. Sommige programma's werken met directe gebruikersinvoer, zoals muis- en toetsenbord-acties. Deze input komt piece by piece (real-time). Om er achter te komen of een toets dus wordt ingedrukt, moet je de huidige status lezen. En om er op te reageren moet je dus te status van de toets continu lezen. Een oplossing hiervoor is om de toetsaanslag in de wachtrij te zetten. Een programma kan dan controleren op nieuwe "events" en dan hierop reageren. Een betere oplossing is code actief op de hoogte te stellen wanneer er een gebeurtenis plaatsvindt. Dit doe je door event handlers te gebruiken, zodat deze het event gelijk detecteren en kunnen reageren. Hier voor gebruik je methode addEventListener. Op dit moment zijn er twee soorten manieren om dingen op een scherm aan te wijzen: het gebruik van een muis en een touchscreen. Het indrukken van een toets vuurt "keydown" en "keyup" events af. Drukken op een muisknop vuurt "mousedown", "mouseup" en "click" events af. Verplaatsen van de muis vuurt "mousemove"-gebeurtenissen af. Touchscreen interactie gebeurt met "touchstart", "touchmove", en "touchend" events.

Voorbeelden van de events:

  • Key events, Wanneer een toets op het toetsenbord wordt ingedrukt, vuurt je browser een "keydown" event af. Wanneer hij wordt losgelaten, krijg je een "keyup" event.

  • Pointer events, zoals mouse clicks, mouse motion,

  • Touch events, Als je op je scherm tikt, krijg je "mousedown", "mouseup", en "click" events.

  • Scroll events, Scrollen kan worden gedetecteerd met de "scroll" event.

  • Focus events, wanneer een element focus krijgt, vuurt de browser er een "focus" event op af. Wanneer het de focus verliest, krijgt het element een "blur" event.

  • Load event, wanneer een pagina klaar is met laden, vuurt de "load" event op de body van het document.

Chapter 18 - HTTP and Forms

HTTP-protocol: Wanner een gebruiker een URL in de adresbalk invoert, doet de browser een verzoek met meestal als resultaat een html-pagina. De browser doet dan een GET verzoek. GET: de gespecificeerde bron ophalen. GET verzoeken kunnen alleen gebruikt worden als het gaat om informatie opvragen. Methoden zoals POST worden gebruikt bij bijvoorbeeld het aanmaken van een nieuw account, dus stuurt informatie er naartoe. De server antwoordt met een statuscode en een antwoordtekst. Statuscodes die beginnen met een 2 geven aan dat de aanvraag is geslaagd. Codes die beginnen met een 4 betekenen dat er iets mis was met het verzoek. 404 is waarschijnlijk de bekendste HTTP-statuscode: het betekent dat de bron niet kon worden gevonden. Codes die beginnen met 5 betekenen dat er een fout is opgetreden op de server.

De interface waarmee browser JavaScript HTTP-verzoeken kan doen, heet fetch. Als fetch wordt aangeroepen, wordt een response-object met informatie over het respons van de server teruggestuurd.

HTML kan verschillende soorten formuliervelden weergeven, zoals tekstvelden, aankruisvakjes, meerkeuzevelden en bestandskiezers. Formuliervelden kunnen worden gemanipuleerd met JavaScript.

De objecten localStorage en sessionStorage kunnen worden gebruikt om informatie op te slaan. Zodat wanneer je de pagina herlaadt de gegevens niet worden verloren. Local storage bewaart de gegevens voor altijd en session storage bewaart ze totdat de browser wordt afgesloten. Dit is altijd handig te gebruiken wanneer je een formulier invult en de pagina om een of andere reden opnieuw laadt, dat niet al je ingevoerde gegevens verloren zijn.

Front-end Week 3:

Job Story

When....., I want to....., So I can.... (Situation), (Motivation), (Expected Outcome)

Wanneer ik de applicatie voor het eerst gebruik, wil ik niet te ingewikkeld een persoonlijk account aanmaken , zodat ik gelijk kan beginnen met het liken een matchen en de gebruikers dus een duidelijk beeld van mij al hebben.

Wanneer ik iemand tegen kom waar ik geïnteresseerd in ben, wil ik degene dit laten weten met een like , zodat ik een gesprek kan starten.

Wanneer ik gebruikers heb geliked. _wil ik _ deze op een later tijdstip overzichtelijk nog kunnen bekijken, zodat ik ook op een later moment een chat kan beginnen

Wanneer ik een account heb gemaakt, wil ik deze zoveel mogelijk personaliseren, zodat op basis daarvan het ook mogelijk is om te filteren en sorteren.

Scope

Scope in JavaScript houdt in de huidige context van code, die de toegankelijkheid van variabelen bepaalt. Je hebt global scope en local scope. Global scope houdt in dat wanneer een variabele is gedefined buiten alle functies en accolades {}. Dit kan je overal in je code gebruiken. bv:

const name = Loesje;

function puppyName() {
return name;
}

console.log(puppyName());

Hierin kan je de variabel Loesje dus overal gebruiken, omdat hij buiten de functie is gedefinieerd. In the root van het bestand staat hij nu namelijk gedefineerd.

Local scope Variabel gedefined binnen de functies en accolades. bv:

function greeting() 
{ const name = 'nina'; }

Je hebt 2 soorten local scopes: Function Scope en Block scope. For loop, if, else = Block scope. En alles waar we function voor zetten = function scope

Scope The dev, S. (z.d.). Scope [Illustratie]. Steve the Dev. https://www.stevethedev.com/blog/programming/javascript-scope-primer

Bronnen:

Context

Context is de omgeving waarin de Javascript-code wordt uitgevoerd. Het verschil met scope is dat, scope is function-based en context is object-based. Je hebt 2 soorten context: Global Execution Context: Dit is de standaard context waarin de code wordt uitgevoerd wanneer het bestand in de browser wordt geladen. Alle code die niet in een functie of object zit, is globaal.

const a = 8;
console.log(this.a);
// => 8
console.log(window.a);
// => 8

Functional Execution Context is een context die door Javascript is gemaakt. Het verwijst naar het object binnen de functie die wordt uitgevoerd. Buiten een functie in een global executioncontext, verwijst dit naar de globale context (Window object). De waarde van .this hangt af van het object de functie uitgevoerd/aangeroepen/zit. Daarom heeft this verschillende waardes. Het hangt af van waar het gebruikt wordt.

var a = 7;

function one () {
    return this;
}

function two () {
    return this.a;
}

function three () {
    return window.a;
}

console.log(one() === window);
// => True
console.log(two());
// => 7
console.log(threee());
// => 7

Bronnen:

Front-end Week 4:

Closure

Telkens wanneer een functie binnen een andere functie zit, maak je een sluiting/closure. Een closure geeft je toegang tot de scope van de buitenste functie, wanneer je in de binnenste functie zit. Alles wat geschreven is in het global kan overal gebruikt worden. En wat in een functie zelf is geschreven kan dus niet overal gebruikt worden maar in de functie zelf. Zie voorbeeld: Een closure is dus een functie die toegang heeft tot de variabele vanuit het bereik van een andere functie. Dit wordt bereikt door een functie binnen een functie te maken. Maar de buitenste functie heeft geen toegang tot het binnenste bereik. De closure dient als de poort tussen de globale context en de outer scope. Closures staan event handlers, callbacks toe om variabelen vast te leggen.

const groet = 'Welkom op Puppy Duppy!';

var start = function() {
  const groet2 = 'Goedemiddag bij Puppy Duppy';
  console.log(groet);
}

console.log(groet2);
start();
// =>  'Welkom op Puppy Duppy!' and undefined

Bronnen:

Hoisting

Hoisting is JavaScript's standaard gedrag om declaraties naar de top te verplaatsen. Javascript leest je code op volgorde, dus zorg ervoor dat je script in de juiste volgorde is geschreven. Variabelen staan bijvoorbeeld altijd bovenaan eerst gedeclareerd en daarna pas de functie. Anders roep je een functie aan, die nog niet gedeclareerd is. Dus definitie van hoisting is dat variabele en functie declaraties "fysiek" worden verplaatst naar de top. Maar het wordt niet letterlijk verplaatst. De variabele en functie verklaringen worden in het geheugen gezet in de compileer fase. Maar in je code blijven precies waar je ze getypt hebt in de code. Voorbeeld Hoisting:

rood();

function rood() {
  console.log('het werkt');
}

// => het werkt

hier zie je dus dat javascript je code omhoog plaatst omdat je het eerst aanroept rood(); en dat pas definieert.

Bronnen:

⚠️ **GitHub.com Fallback** ⚠️