Skip to content

Front end

Jump to bottom
Lotte Koblens edited this page Feb 22, 2021 · 20 revisions

Front-end

Front-end Week 1: Progressive Enhancement Findings

Progressive Enhancement is als het ware een bepaalde ontwerpfilosofie, deze filosofie is de basislijn van de essentiële inhoud en biedt functionaliteit aan zoveel mogelijk gebruikers. De best mogelijke ervaring is dan alleen bruikbaar voor de gebruikers van de meest moderne browsers die dus in staat zijn om alle vereiste code uit te kunnen voeren.
Iedereen heeft dus toegang tot de basisinhoud en functionaliteiten van een website. Hierbij maakt het niet uit via welke browser dit gebeurt of hoe goed de internetverbinding is. Wanneer iemand dus gebruik maakt van een moderne, geavanceerde browser dan wordt er een betere versie van de pagina getoond.

Kernprincipes van Progressive enhancement:

  • De basisinhoud van een webpagina moet toegankelijk zijn voor alle webbrowsers

  • De basis functionaliteiten van een webpagina moeten ook toegankelijk zijn voor alle webbrowsers

  • Alle inhoud zit in ‘dunne’, semantische opmaak

  • Verbeterde lay-out wordt geleverd door CSS dat extern is gekoppeld

  • Verbeterde enhancement wordt geleverd door extern gekoppelde JavaScript 
- Er wordt rekening gehouden met de voorkeuren van de webbrowser van de eindgebruiker

Progressive enhancement wordt op de volgende manier toegepast in de praktijk: voor een website wordt eerst alleen een basiservaring ontwikkelt die toegankelijk is voor alle browser. Hierbij wordt alleen gebruik gemaakt van HTML en CSS en niet van JavaScript. Wanneer de browser ‘modern’ is dan pas wordt de JavaScript ingeladen.

Tevens verbeter je door Progressive enhancement ook de SEO. Je zorgt met PE er namelijk voor dat de basisinhoud ook altijd toegankelijk is voor de spiders van de zoekmachines. Je voorkomt dat er dynamische content wordt getoond die de spider kan hinderen bij het crawlen van de inhoud van de webpagina.

Bronnen:

Front-end: Codeplan

Codeplan

Front-end: First progress session

Als feedback heb ik gehad dat ik ervoor kan zorgen dat de images zonder css ook op het juiste formaat weergegeven kunnen worden door ze in Photoshop het juiste formaat te geven. En als je een image in de database wil zetten, dan zet je als het ware het path van de image in de database en niet de image zelf, dus daar kan ik dan ook rekening mee gaan houden.

Front-end: Scope

JS concept of Scope

Een global variabele is gedeclareerd buiten een functie. Deze variabele is te gebruiken door alle functies en scripts. Een local variabele is gedeclareerd binnen een functie, dus de variabele is lokaal voor de functie en zijn dus alleen toegankelijk vanuit de functie.

Hoisting

Maakt niet uit dat je variabele pas onderaan definieert, javascript verplaatst het als het ware naar de top en kan het dan gewoon gebruiken. Je moet dan wel de variabele bijvoorbeeld aanroepen aan de top.

Een codeblok in JavaScript definieert een scope voor variabelen die worden gedeclareerd met let en const:

if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

De eerste console.log zal werken, want message is gedefinieerd in de if, dus in de block scope. De tweede console.log zal niet werken aangezien deze buiten de if-statement staat. Het codeblok van if, for, while-instructies creëert ook een scope.

Var is dan weer niet block scoped, dus wanneer de volgende code wordt gerund, zal het wel werken:

if (true) {
  // "if" block scope
  var count = 0;
  console.log(count); // 0
}
console.log(count); // 0

Bij beide console.log komt er dus 0. Een codeblok creëert geen bereik voor var-variabelen, maar een functie-body wel.

Function scope: een functie in JavaScript definieert een scope voor variabelen die zijn gedeclareerd met var, let en const.

function run() {
  // "run" function scope
  var message = 'Run, Forrest, Run!';
  console.log(message); // 'Run, Forrest, Run!'
}
run();
console.log(message); // throws ReferenceError

Nested scopes Scopes kunnen genest worden.

function run() {
  // "run" function scope
  const message = 'Run, Forrest, Run!';
  if (true) {
    // "if" code block scope
    const friend = 'Bubba';
    console.log(message); // 'Run, Forrest, Run!'
  }
  console.log(friend); // throws ReferenceError
}
run();

Het if code block is genest in de functie scope. Een cope in een andere scope wordt ook wel een inner scope genoemd. En de functie scope wordt hier dan de outer scope genoemd.

Bronnen:

Clone this wiki locally