Learning journal - lemuelmgsn/ako GitHub Wiki

Commandline

Wat heb ik geleerd?
Ik begrijp nu hoe de commandline werkt en waarom het handig is voor front-end development. Ik weet nu hoe ik door mijn bestanden kan navigeren en beheren met cd, ls, mkdir, rm en mv.

Hieronder de functies van deze afkortingen:

  • cd - change directory, om van map te veranderen

  • ls = lijst, toont inhoud van de map

  • mkdir = make directory, nieuwe map aanmaken

  • rm = remove, verwijdert bestanden

  • mv = move, mappen verplaatsen of hernoemen

  • code . = open de huidige map in visual studio code

  • npm install = installeert de benodigde pakketten die in het bestand package.json staan.

  • npm run build = genereert de geoptimaliseerde bestanden voor productie in een map

  • npm run dev = start de server en maakt je project lokaal toegankelijk, vaak via http://localhost:

  • npm run preview = start een server die de geoptimaliseerde versie van je project toont.

Wat vind ik interessant?
Het feit dat ik veel sneller kan werken zonder telkens een GUI zoals Github Desktop te openen. Ook snap ik nu beter hoe tools als Vite draaien onder de water omdat ik de commando’s zelf uitvoer.

Wat betekent dit voor mijn ontwikkeling?
Ik kan hiermee als ik vaker oefen efficiënter werken en sneller projecten opzetten en beheren. De commandline voelt niet langer als een obstakel, maar als een krachtige tool.

image

Wat is Vite?

Vite is een snelle front-end build tool die vooral wordt gebruikt voor moderne JavaScript-frameworks zoals Vue en Svelte. Het werkt als volgt:

  1. Snelle ontwikkeling

    • Vite gebruikt een ontwikkelingsserver die ES modules (ESM) direct in de browser laadt. ES Modules zijn een manier om JavaScript-code in verschillende bestanden te verdelen, zodat je ze kunt gebruiken waar je ze nodig hebt. Ze maken het makkelijker om je code te organiseren en sneller te laden. Geen bundling nodig dus snelle starttijden.

  2. Hot Module Replacement (HMR)

    • Wijzigingen in je code worden direct toegepast zonder de pagina te herladen. Dit bespaart tijd en maakt development soepel.

  3. Productiebundeling

    • Vite gebruikt Rollup om je code samen te voegen en te optimaliseren. Vite Rollup is de bundler die Vite gebruikt om je code te optimaliseren voor productie. Het combineert en minimaliseert je bestanden zodat ze sneller laden op de website

  4. Automatische optimalisaties

    • Ondersteuning voor: Code-splitting, CSS-preprocessing, Dynamic imports, Snelle builds

Samengevat:

Vite is supersnel tijdens ontwikkeling en maakt kleine, geoptimaliseerde bestanden voor productie.

Container Queries

Wat heb ik geleerd?

Container queries laten me stijlen toepassen op basis van de grootte van een element in plaats van het hele viewport. Dit maakt componenten flexibeler en minder afhankelijk van media queries.

Codevoorbeeld:

.card {
    container-type: inline-size;
}

.card:container(400px) {
    background-color: lightblue;
}

.card:container(600px) {
    background-color: lightgreen;
}

Wat doet deze code?

In dit voorbeeld wordt de grootte van de .card container gebruikt om stijlen toe te passen. Het container-type: inline-size; geeft aan dat de container wordt gemeten op basis van de breedte.

  • Wanneer de container smaller dan 400px is, wordt de achtergrondkleur lightblue.
  • Wanneer de container groter dan 600px is, wordt de achtergrondkleur lightgreen.

Wat is het voordeel?

Met container queries kan ik stijlen dynamisch aanpassen op basis van de grootte van de container, wat de flexibiliteit en herbruikbaarheid van mijn componenten vergroot zonder afhankelijk te zijn van de viewportgrootte of complexe media queries.

:has() Selector

De :has() selector werkt als een "parent selector" en laat me conditionele stijlen toepassen zonder gebruik van extra classes of JavaScript.

Codevoorbeeld:

.court:has(.shooting-score) .scoreboard {
    color: green;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

.court:has(.shooting-miss) .scoreboard {
    color: red;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

Wat doet deze code?

In dit voorbeeld wordt de :has() selector gebruikt om stijlen te conditioneren op basis van de aanwezigheid van bepaalde elementen binnen de .court container.

  • De eerste regel past stijlen toe op de .scoreboard binnen een .court element als er een .shooting-score element aanwezig is. Het maakt de tekst groen en vetgedrukt.
  • De tweede regel past stijlen toe op de .scoreboard binnen een .court element als er een .shooting-miss element aanwezig is. Het maakt de tekst rood en vetgedrukt.

Wat is het voordeel?

Met :has() hoef ik geen extra JavaScript of complexere HTML-structuren te gebruiken om de stijl van een element te bepalen op basis van de inhoud van zijn ouder. Het maakt het veel eenvoudiger om dynamisch stijlen toe te passen.