Frontend Begrippen - mbergevoet/blok-tech GitHub Wiki

Jobstory

Wanneer ik een profiel heb aangemaakt met mijn hobby's en interesses wil ik mensen met dezelfde interesses kunnen opzoeken, vinden en matchen zodat ik iemand kan ontmoeten met overeenkomende interesses en we beter bij elkaar passen.

HTML CSS JavaScript Breakdown

Ik heb profielen nodig op de site met informatie er in over de desbetreffende persoon. Het algorithme doet een voorstel en op basis van de foto en de interesses en die kun je als gebruiker bevestigen of afwijzen.

HTML

<section class ="profiel container">
   <figure>
      <img url ="profile.png>
      <figcaption>Jan van dijk</figcaption>
   </figure>
   <p>
      <ul>
         <li>interesse 1</li>
         <li>interesse 2</li>
         <li>interesse 3</li>
         <li>interesse 4</li>
         <li>interesse 5</li>
      </ul>
   </p> //informatie dat in de database wordt opgeslagen
</section>

Javascript

Profiel informatie word in een object of array opgeslagen die vervolgens in de database komt. Die array's worden gefilterd met een js functie die de matches ophaalt en toont aan de gebruiker die vervolgens kan goedkeuren.

Stappen

  1. Dating site/profielen maken in html
  2. Dating site/profielen maken in css
  3. Knoppen in js klikbaar maken
  4. Informatie in array's stoppen
  5. Array's in de database opslaan
  6. On click een request die de interesses opvraagt van de andere profielen sturen naar de database sturen
  7. Het request vergelijken met jou profiel interesses
  8. De overeenkomende profielen laten zien aan jou

Wordload

  • HTML en indeling (8h)
  • CSS responsive & styling (10h)
  • Client side JS (20h)
  • Server/ Node JS (20h)
  • Database opzetten (10h)

Wireframe & Wireflow


Dit zijn mijn eerste ideeën van hoe mijn interface en app er uit moet komen te zien. Ik heb de mobile navigatie en de desktop navigatie geschetst met daar onder hoe ik het zoek formulier zou willen maken. Dan als laatste nog een schetsje van hoe ik de profielen "tiles" wil maken.
  • Een pagina waarin je progressive disclosure binnen je feature uitlegt
  • Een pagina waarin je progressive enhancement binnen je feature uitlegt

Progressive disclosure

Progressive disclosure is het voorkomen van een overvloed aan content en opties voor gebruikers. Het wordt vooral gebruikt bij formulieren op een website. Wanneer een gebruiker een tekst veld invult of een checkbox aanklikt komen er meer opties te voorschijn, dat zijn dan meer checkboxes of tekst velden. Door dat te doen heeft de gebruiker niet het idee dat hij overspoeld wordt met opties en snapt hij ook waar de extra opties overgaan of op aansluiten. Want als een gebruiker zo maar een hele waslijst aan opties voorgeschoteld krijgt, ziet hij door de bomen het bos niet meer en zit er geen logica meer in. Gebruikers kunnen ook afgeschrikt worden door een hoop invoervelden of checkboxes en formulier niet invullen. Met behulp van progressive disclosure wordt de gebruiker in kleine stapjes door een proces heen geleid met steeds kleine beetjes content/informatie die zichtbaar worden. Hier onder een paar voorbeelden. Je kunt zien dat als er een checkbox of radio button wordt aangeklikt, er meer velden tevoorschijn komen.

Progressive enhancement

Progressive enchancement is het bevorderen van de gebruikservaring met behulp van CSS en JS. Met CSS word er styling toegevoegd die de indeling van een webapp logischer of rustiger maakt. Met JS wordt er gedrag toegevoegd wat bepaalde processen duidelijker kan maken voor gebruikers. De app moet ook nog kunnen werken op een kindle e-reader bij wijze van spreken waar geen opties voor CSS en JS zijn. Alle functies moeten toegankelijk zijn met alleen HTML. Dus alles wat wordt toegevoegd word aan de app dat geen HTML is, is progressive enhancement.


In het voorbeeld hier boven is het zien hoe CSS de gebruikerservaring kan bevorderen. In de linker afbeelding is de ruwe HTML te zien. De tekst is niet overzichtelijk en het is niet duidelijk waar het tekst blok begint en eindigt. Op de afbeelding rechts is CSS toegepast. Het tekst blok krijgt afgeronde hoeken en een _dropshadow _zodat hij opvalt opzichte van de achtergrond. De afbeelding word uitgelijnd in het midden en kleiner gemaakt. De kopjes worden dik gedrukt voor extra nadruk en de tekst krijgt een ander lettertype voor betere leesbaarheid. En tenslotte zit er ook nog een klein stukje JS achter.

Als er een afbeelding wordt geselecteerd in het `input[type=file]` word deze voorvertoond om te kunnen "uploaden".

Toepassing

Ik gebruik progressive disclosure in mijn zoek functie en in mijn filter functie op de resultaten pagina. Ik gebruik progressive enchancement op punten waar transities of partial states nodig zijn.

Map

De .map() function kun je gebruiken voor het maken van een nieuwe array op basis van een bestaand array. In de .map() function kun je zelf een function schrijven die wordt toegepast op de objects in het array.

Reduce

De .reduce() function kun je gebruiken als je alleen geïnteresseerd bent in één waarde van een object in een array. In de .reduce() function kun je zelf een function schrijven die wordt toegepast op de objects in het array die het dan reduceert tot één waarde. Dit kan handig zijn als je bijvoorbeeld alleen de naam wilt weten van een persoon object.

Filter

met de .filter() function kun je gebruiken als je waarden wilt vergelijken met een bepaalde voorwaarden. In de .filter() function schrijf je een statement die word vergeleken met alle waardes. Als het statement true is wordt er een array gemaakt van die waarden.

Scope

Scope in webdevelopment betekend de toegang die een variabele heeft tot bepaalde delen van de code. Belangrijk daarvoor is het verschil tussen Globale variabelen en Locale variabelen. Globale variabelen worden ook wel global-scoped variables genoemd. Hier onder een voorbeeld van global scope.

1 //global scoped variabele
2 var geboorteJaar = 1998;
3 
4 function berekenLeeftijd(){
5    var leeftijd = 2020 - geboorteJaar;
6 }

Omdat de variabele geboorteJaar een var is en niet binnen een andere function staat kan de function berekenLeeftijd de variabele geboorteJaar gebruiken. Andere functions kunnen de variabelen geboorteJaar ook gebruiken omdat hij niet tussen 'curly brackets' staat. Binnen Local variabelen zijn er weer twee soorten scope, Function scope en Block scope. Function scope wil zeggen dat de variabelen binnen een function alleen toegang hebben tot alles wat er in de overkoepelende function staat. Een var in JS is function scoped. Block scope betekent dat een variabele alleen toegang heeft tot wat er tussen 'curly brackets' staat. Hier een voorbeeld van function scope.

1 function berekenLeeftijd(){
2    var geboorteJaar = 1998;
3    var leeftijd = 2020 - geboorteJaar;
4 }

Omdat var geboorteJaar nu binnen de function berekenLeeftijd staat kunnen andere functions geboorteJaar niet gebruiken. Hier onder een voorbeeld van Block scope.

1 function berekenHondenJaren(){
2    var leeftijd = 20;
3       if (leeftijd > 12){
4          let hondenJaren = leeftijd * 7;
5      }
6 }

var 'leeftijd' is nog steeds function-scoped omdat het if-statement het nog kan gebruiken. let hondenJaren is hier block-scoped, hij staat tussen de 'curly brackets' van het if statement (de block) en omdat het een let variabele is kan deze niet buiten de block gebruikt worden.

Context

Context gaat over de waarde van het this keyword. De waarde van this is de code die op dat moment wordt uitgevoerd. Daarom kan die waarde verschillen per function of per keer dat de code wordt uitgevoerd. De reden dat het context wordt genoemd is omdat het kan verschillen wanneer je het aanroept in een object of een function. Als this word gebruikt in een function die in een object zit (of te wel een method) dan krijgt het de waarde van het hele object. Als this word gebruikt in een gewone function krijgt het de waarde van het global object, ook wel window genoemd.

1  const boek = {
2     titel: "programmeren",
3     lees() {
4        console.log(this);
5     }
5  };
6  boek.lees();
7 
8  function leesBoek() {
9     console.log(this)
10 }
11 leesboek();

De uitkomst van de console.log in regel 4 zal het object boek zijn. {titel: "programmeren", lees: f}. De uitkomst van de console.log in regel 9 zal het global object of window zijn. Window{postMessage: f, blur: f, focus: f, close: f, parent: Window, ...}

Prototypes

Een prototype in JavaScript is een manier om dingen te veranderen of te gebruiken voor meerdere objecten te gelijk. Normaal wanneer je een constructor object gebruikt en meerdere objecten declareert, zullen er altijd functies en waardes uit de functie dubbel gebruikt worden. Dat kan wel maar het kan veel korter en efficiënter wanneer je een prototype gebruikt. Door een prototype te maken kun je daar in een functie of variabelen aanmaken die kan worden gebruikt door alle objecten met dezelfde constructor. Zo hoeft Javascript niet steeds de overeenkomende functies of variabelen dubbel te creëren en kunnen ze worden gehaald uit het prototype.

Voorbeeld van MDN

var Person = function() {
  this.canTalk = true;
};

Person.prototype.greet = function() {
  if (this.canTalk) {
    console.log('Hi, I am ' + this.name);
  }
};

var Employee = function(name, title) {
  Person.call(this);
  this.name = name;
  this.title = title;
};

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.greet = function() {
  if (this.canTalk) {
    console.log('Hi, I am ' + this.name + ', the ' + this.title);
  }
};

Hoisting

Functions en variabelen kunnen gehoist (omhoog gehesen) worden naar de bovenkant van de scope waarin de function of variabele zich in bevind. Dit wordt veroorzaakt door de manier waarop JavaScript code interpreteert. Dit gebeurt meestal als een variabele of een function eerder wordt aangeroepen dat hij gedeclareerd word. Of anders geformuleerd, een functie of variabelen kan gedeclareerd worden nadat deze al is gebruikt/aangeroepen.

1 groet();
2
3 function groet() {
4 console.log("Hallo Piet");
5 };

In het bovenstaande voorbeeld wordt function groet() gehoist naar de eerste regel omdat hij daar al wordt aangeroepen door groet();. Javascript weet dus door de aanroep in regel 1 wat er staat in regel 4 door de hoist.

Closures

Een closure is een function binnen een grotere function die gebruik maakt van variabelen/objecten/functions van die grotere function. De binnenste function heeft dus toegang tot te function scope van de grotere function.

1  function buiten() {
2     const b = 10;
3     function binnen() {
4           const a = 20; 
5           console.log(a+b);
6      }
7     return binnen;
8  }
9 
10 buiten();

In het bovenstaande voorbeeld kun je zien dat function binnen() de const b gebruikt uit de function buiten() om const a mee op te tellen. Het antwoord wat uit buiten(); zal dan ook 30 zijn.

Bronnen:

Map, Reduce, Filter

Afbeeldingen Progressive disclosure

Scope

Context

Protoypes

Hoisting

Closures

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