Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

16april

Presentatie boek Vue 3 en demo

9789463562096-grootOnlangs is mijn boek Web Development Library – Vue.js, tweede geactualiseerde editie verschenen. Op woensdag 14 april 2021 gaf ik hierover in samenwerking met uitgeverij Van Duuren Media een Zoom-presentatie voor lezers die dit boek bij voorinschrijving hadden besteld.

De presentatie is opgenomen, en is nu voor iedereen beschikbaar!

De opname is alleen audio en de slides/demos die ik gaf, dus zonder mijn geanimeerde visuele ondersteuning :-). Die zul je er zelf bij moeten bedenken.

De presentatie bestaat uit drie delen:

  • Inleiding en korte inleiding over het boek.
  • Theorie – enkele achtergronden bij het gebruik van Vue en andere frameworks.
  • Praktijk – live coding van een kleine Vue-applicatie, componenten en beoordeling in de browser.

Link: https://www.youtube.com/watch?v=HKVG3CUs-qI

    De uitgebreide inhoudsopgave, zoals ook in de YouTube-video staat:

    • 00:00​ – Inleiding
    • 05:02​ - Indeling van het boek
    • 09:23​ - Theorie en achtergronden bij Vue (en andere frameworks)
    • 13:30​ - Overeenkomsten en verschillen bij frameworks
    • 24:01​ - Populariteit van Vue
    • 26:22​ - Verschillende versies van Vue
    • 30:17​ - Vue applicatiestructuur
    • 34:17​ – Praktijk
    • 37:51​ - Vue CLI, nieuw project maken
    • 44:50​ - Project bewerken in je editor
    • 46:25​ - Structuur van componenten
    • 53:33​ - Nieuwe Vue-componenten maken
    • 56:37​ - Scripts in componenten
    • 1:00:51​ - Q & A
    • 1:04:50​ - Bootstrap in Vue-applicaties
    • 1:08:30​ – StudieMix

    Heb je vragen over Vue, of wil je een complete training boeken voor jouw bedrijf of organisatie? Aarzel dan niet om contact op te nemen.

    Peter Kassenaar

    -- 16 april 2021

    17november

    TypeScript voor beginners

    logo-ts-newJavaScript is een fantastische en flexibele taal, maar kent ook een groot nadeel: het is al sinds jaar en dag een loosely typed language. Dat is aan de ene kant heel flexibel, maar aan de andere kant ook lastig.

    We willen vaak immers wel graag kunnen afdwingen dat variabelen niet gevuld worden met ‘verkeerde’ informatie of op voorhand weten wat het type van een variabele is (string, boolean, number, een eigen type, enzovoort).

    Welkom TypeScript.

    TypeScript is een aanvulling op JavaScript, geen vervanging. TypeScript heeft twee doelen:

    1. Moderne JavaScript-code (ES6 en nieuwer) terugcompileren naar ‘oude’ code, zodat ook oudere browsers en devices met jouw moderne code of framework overweg kunnen. Dit proces heet ook wel transpiling.
    2. TypeSafety in het frontend brengen. Je weet dan op voorhand waaruit variabelen en objecten bestaan en je kunt fouten in de code in een vroeg stadium opsporen.

    Ik maakte een korte videoserie over de basisbeginselen van TypeScript. Hij staat op YouTube in de playlist https://www.youtube.com/playlist?list=PLhOYRbbfrvpGoqOWh8IObz03xdkDWd3j0.

    De complete inhoud van de playlist is:

    1. Kennismaken met TypeScript
    2. TypeScript Types
    3. TypeScript Return Types
    4. Function syntaxis
    5. TypeScript arrays
    6. Classes
    7. TypeScript Interfaces
    8. Meer informatie over TypeScript

    Het is een algemene introductie op de core concepts van TypeScript, dus niet gebonden aan een framework als Angular, Vue of React. We maken gebruik van de TypeScript Playground om aan de slag te gaan. Je hoeft zelf dus niets te installeren.

    Meer informatie over TypeScript is te vinden op https://www.typescriptlang.org/

    In de toekomst hoop ik er korte algemene video’s aan toe te voegen over het maken van JavaScript-projecten in combinatie met TypeScript. Laat het weten als je er vragen over hebt!

    Peter Kassenaar
    -- 17 november 2020

      23oktober

      Kennismaken met Svelte

      svelte-logoNu in coronatijden mijn ZZP-agenda maar heel mager is gevuld, heb ik besloten om van de nood een deugd te maken. Ik ga twee nieuwe frameworks onderzoeken waarvoor het mij tot op dit moment aan de tijd ontbrak om me er meer in te verdiepen. Dat zijn:

      In dit artikel kijk ik naar Svelte (spreek uit 'Svelt'). Afgelopen week heb ik kennisgemaakt met Svelte, de documentatie gelezen, online tutorial(s) gevolgd en verder rondgesnuffeld naar Svelte-informatie op de voor de hand liggende plekken als Stack Overflow, Medium en Dev.to.

      Disclaimer - ik ben frontend developer. Ik ken frameworks als Angular, Vue en React op mijn duimpje. Hiermee heb ik veel applicaties gemaakt. Mijn beleving en beschrijving van Svelte komt dan ook vanuit dit perspectief. Ik maak regelmatig de vergelijking me zaken die ik ken. Dat hoeft voor jou natuurlijk niet zo te zijn! Toch probeer ik het zo eenvoudig mogelijk te houden en een voor iedereen duidelijke beginners/intro te schrijven over Svelte.

      Download dit artikel als PDF (11 pagina’s, 1,1 MB)

      Vragen

      In dit artikel beantwoord ik de volgende vragen:

      1. Wat is Svelte?
      2. Waar wordt het voor gebruikt?
      3. Hoe gaat lokale Installatie en Ontwikkeling?
      4. Hoe maak ik een eerste applicatie?
      5. Hoe maak ik een niet-triviale proof-of-concept applicatie: een app die op basis van een zoekvraag van een gebruiker communiceert met een backend en de resultaten in de UI toont.

      Omdat ik een absolute beginner ben in Svelte heb ik ongetwijfeld zaken gemist of heb ik dingen omslachtig gedaan (omdat ik die nu eenmaal ken uit Angular, React of Vue) die in Svelte veel eenvoudiger kunnen. Aarzel in dat geval niet om het mij te laten weten!

      1. Wat is Svelte?

      Svelte is een framework voor het ontwikkelen van webapplicaties. Het is daarmee vergelijkbaar met Angular, React en Vue. Het is niet vergelijkbaar met de vorige generatie webdevelopment tools zoals jQuery, AngularJS of Backbone. Svelte is een modern framework, gebouwd op Node.js, ES6, componenten en JavaScript-bundlers. Het is een alternatief voor Angular, React of Vue. Of zo je wilt: een concurrent. Je gebruikt het een of het ander. Niet tegelijk.

      Svelte is gemaakt door Rich Harris, de ontwikkelaar die ook de bundler rollup.js heeft gemaakt. Het is dan ook geen verrassing dat rollup de standaard bundler is in Svelte. Je kunt eventueel ook WebPack instellen als bundler, maar dat moet je zelf doen.

      Het belangrijkste verschil tussen Angular, React en Vue is dat Svelte-applicaties in hun geheel op de server worden gecompileerd. Alles wordt vertaald naar JavaScript en kant-en-klaar naar de browser gestuurd. Svelte is daarom razendsnel. Bedenk, in andere frameworks wordt ook het framework zélf meegestuurd naar de browser. De browser moet vervolgens de code parsen en uitvoeren. Die stap wordt bij Svelte overgeslagen. Svelte kent geen virtual dom of shadow dom.

      Lees er meer over op https://svelte.dev/blog/virtual-dom-is-pure-overhead.

      2. Waar wordt Svelte voor gebruikt?

      Svelte wordt gebruikt voor het ontwikkelen van grotere webapplicaties. Natuurlijk kun je er ook een website voor “de bakker op de hoek” mee maken, maar daar is het framework in principe niet voor bedoeld. Denk voor typische toepassingen aan:

      • E-commerceapplicaties
      • Dashboards
      • CRUD-Frontends voor databaseapplicaties
      • Een overzicht van websites en -applicaties die zijn gemaakt met Svelte is beschikbaar op https://madewithsvelte.com/

      made-with-svelte

      3. Hoe gaat lokale ontwikkeling en installatie?

      Svelte heeft naar goed gebruik een CLI-omgeving (net zoals Angular, React en Vue). Deze wordt echter niet lokaal geïnstalleerd. Rich Harris heeft een kleine tool geschreven (degit) die een Github-repository ophaalt zonder de .git-info. Daardoor is ook deze tool razendsnel. Je geeft aan degit een sjabloonlocatie mee en op basis daarvan wordt een lokaal project gemaakt. Dit stel je in met npm install, waarna je vervolgens de eenvoudige startapplicatie (Hello World) kunt draaien.

      De opdrachten om een Svelte-project te maken zien er daarmee uit als:

      Je applicatie wordt gestart op http://localhost:5000.

      Daarna kun je het project svelte-hello-world openen in je favoriete editor (Visual Studio Code of JetBrains WebStorm) en er verder in werken.

      svelte-hello-world

      4. Hoe maak ik een eerste applicatie?

      Nadat je de applicatie hebt geïnitialiseerd en gestart, kun je componenten toevoegen of bestaande componenten aanpassen. Net als in de andere frameworks zijn componenten de basis bouwstenen van een applicatie. Je maakt dus geen webpagina's meer, maar componenten die tezamen de lay-out van de pagina vormen.

      De basisapplicatie ziet er uit als in de volgende afbeelding. Wanneer je eerder hebt gewerkt met frameworks als Angular, Vue of React ziet dit er vertrouwd uit. Heb je hier nog geen kennis van, dan is de structuur niet erg lastig.

      • In de map \public staat je index.html en plaats je andere statische bestanden (css, afbeeldingen, pdf's enzovoort).
      • In de map \src staan je componenten en overige logica. De applicatie wordt gestart via main.js (meestal zul je hier nooit iets in wijzigen), de startcomponent is App.svelte.
      • Op het rootniveau (\) staan configuratiebestanden als package.json, readme.md en rollup.config.js. Ook hier zul je maar heel zelden handmatig wijzigingen in hoeven aan te brengen.
      • Het meeste zul je aan het werk zijn in de map \src. Maak hierin een bijvoorbeeld een map \components en verdeel dit eventueel verder onder in modules, afhankelijk van de requirements van je project.

      svelte-structure

      Plug-ins voor Svelte-ontwikkeling

      Componenten worden in svelte opgeslagen als .svelte-bestanden. Deze worden door de meeste editors standaard niet herkend. Toch wil je zaken als kleurcodering, automatisch aanvullen en meer. Hiervoor hebben de meeste IDE's gelukkig plug-ins of extensions beschikbaar. Installeer bijvoorbeeld:

      Componenten in Svelte

      Componenten bestaan in Svelte uit drie delen.

      • Een <script>-blok waarin alle logica van de component staat.
      • Een HTML-blok waarin de template/user interface van de component staat.
      • Een <style>-blok waarin eventuele CSS-stijlen van de component worden genoemd. Stijlen hebben standaard component scope (net zoals in Angular en Vue). Svelte kent geen CSS-as-JavaScript, zoals React.

      Alle onderdelen zijn optioneel. Je mag dus ook een component maken die uit een leeg bestand bestaat(!) Niet dat dit nuttig is, maar het toont de flexibiliteit van Svelte. Het framework gaat uit van Single File Components, net zoals React en Vue (en anders dan Angular). Alle logica en lay-out wordt dus ingekapseld in een enkel bestand. Er is geen separation of concerns by file types. In de component importeer je eventueel andere componenten die je vervolgens als HTML-element kunt aanspreken. Bijvoorbeeld op deze wijze:

      Svelte syntaxis

      Componenten schrijf je in een typische Svelte-syntaxis. Het is feitelijk een mix van Angular en Vue aan de ene kant (omdat je veel HTML-schrijft die wordt uitgebreid met Svelte-specifieke directives), maar aan de andere kant lijkt het ook op React, omdat je in Svelte-componenten rechtstreeks JavaScript-expressies tussen enkele accolades mag schrijven. Zoals in <h1>Hello {name}</h1>. De syntaxis is daarmee tamelijk beknopt (er zijn handige shortcuts), maar wel even wennen.

      Daarbij zijn er veel Svelte-specifieke uitbreidingen zoals:

      {#if …} … {/if}

      {#each …} … {/each} en

      {#await …}

      Dit zorgt naar mijn mening soms voor rommelige opmaak van de HTML-code. Het is zeker helderder en duidelijker dan React JSX, maar bepaald niet zo compact als *ngFor van Angular of v-for van Vue. Ik wéét waarom het op deze manier gedaan is, maar het is…wennen. Laten we het daar maar op houden.

      Svelte kent vergelijkbare bindings als Vue en Angular. Dit zijn onder meer

      • Simple data binding met {…} zoals je al zag.
      • Event binding met on:, zoals in on:click={<someHandler>} of on:mouseover={…}.
      • Attribute binding waarbij je een variabele rechtstreeks kunt binden aan de waarde van een attribuut zoals in <img src={src}>. Als de naam en de waarde van het attribuut aan elkaar gelijk zijn (zoals hier), mag je dit ook afkorten als <img {src}>. Supercompact en erg elegant. Properties mag je daarnaast met de spread-operator aan een element toekennen, zoals in <MyElement {…props} />. Je hoeft ze dan niet apart te benoemen. Mooi gedaan.
      • Two-way binding met bind:. Je kunt bijvoorbeeld een variabele toekennen aan een tekstinvoerveld en de waarde hiervan direct uitlezen door <input type="text" bind:value={<someVariable>}> te gebruiken. De directive bind: is daarnaast voor tal van andere zaken te gebruiken. Ook dit gaat erg intuïtief als je er aan gewend bent. Hier toont Svelte zich een beetje een combinatie van Vue en React naar mijn idee.

      Alle overige mogelijkheden en syntaxis wordt uitstekend beschreven in de Svelte documentatie op https://svelte.dev/docs. Dit is maar weer eens het bewijs dat de kwaliteit en gebruikersvriendelijkheid van een framework vaak valt of staat met de documentatie die er voor beschikbaar is. Die van Svelte is uitstekend in orde. Ik heb maar zelden een beroep hoeven doen op Stack Overflow of andere bronnen om Svelte te leren.

      svelte-docs

      Tutorial

      Bij het leren van Svelte heb ik veel gehad aan de interactieve tutorial, beschikbaar op https://svelte.dev/tutorial/basics. De schatting van de makers dat je “in ongeveer anderhalf uur wel door de tutorial heen bent” is evenwel een schromelijke overschatting. Reken op ruim een dag, als je alles goed wilt uitproberen en zo nu en dan een zijstap wilt maken. Of ik ben niet zo snel. Dat kan ook natuurlijk.

      5. Hoe maak ik een Proof-of-concept applicatie?

      Met alle kennis uit de tutorial was ik na een paar uurtjes echter al in staat om een applicatie als onderstaande te maken. De requirements zijn tamelijk eenvoudig, maar laten toch het complete stappenplan van een real-life applicatie, inclusief communicatie met een backend zien.

      • Toon een eenvoudige user interface waar de bezoeker kan zoeken op (deel van) de naam van een land.
      • Communiceer met een backend - ik gebruik hiervoor de REST Countries API, beschikbaar op https://restcountries.eu/ - om een serie landen op te halen die voldoen aan het trefwoord van de bezoeker.
      • Toon een lijstje met landen die aan het trefwoord voldoen in de user interface.
      • Bij klikken op een land worden details van het betreffende land getoond in een nieuwe component.

      svelte-country-demo-app

      Je kunt deze applicatie zelf bekijken op github, op https://github.com/PeterKassenaar/svelte-demo-countries. Voel je vrij om de applicatie te downloaden, er een npm install voor uit te voeren en te kijken hoe de data flow door de applicatie en de componenten is. Vervolgens kun je hem verder zelf uitbreiden. Mocht je aanpassingen of verbeteringen hebben, dan houd ik me natuurlijk aanbevolen voor PR's!

      Dit is een tamelijk eenvoudige applicatie, nog zonder error handling, routing of een state management-oplossing. Dit zou echter wel relatief eenvoudig toe te voegen zijn. Svelte heeft hiervoor mogelijkheden aan boord, maar met het oog op de tijd en het leerproces heb ik die niet toegepast. Dat zou de code een stuk complexer maken dan nodig is.

      Conclusie

      Svelte is een framework dat zich qua functionaliteit zeker kan meten met de meer bekende oplossingen als Angular, Vue en React. Het heeft superveel potentie en brengt eigenlijk het beste uit alle frameworks samen in een nieuwe omgeving. Doordat de browser geen overhead heeft maar kant-en-klare JavaScriptcode krijgt, is Svelte in potentie het snelste van alle frameworks verwacht ik. Hierbij moet ik wel aantekenen dat ik geen audit heb gedaan alle varianten heb vergeleken qua snelheid, footprint en andere performance-metrics.

      De state management-oplossing die Svelte standaard aan boord heeft (met stores) behoort zelfs tot de beste die ik ooit heb gezien. Zoveel eenvoudiger dan Angular met Ngrx en React met Redux, en zelfs beter schaalbaar (denk ik) dan in Vue met Vuex. Dit is wat state management in de andere frameworks eigenlijk had moeten zijn!

      Met Sapper (https://sapper.svelte.dev/) is er bovendien een applicatieframework beschikbaar dat draait 'bovenop' Svelte. Sapper is bedoeld voor het maken van applicaties en lijkt daarmee op Nuxt (Vue) of Next (React).

      Toch is Svelte naar mijn mening nog niet klaar voor het 'grote werk'.

      Dit komt niet door de mogelijkheden van het framework zelf, maar waarschijnlijk puur door de leeftijd ervan. Svelte is nog jong en onvolwassen. Ik miste bijvoorbeeld:

      • Een aangewezen oplossing voor routing. Onontbeerlijk voor grotere webapplicaties. Er zijn wel tal van 3rd-party mogelijkheden waar door de makers naar verwezen wordt, maar een aanbevolen, officieel ondersteunde oplossing is naar mijn idee noodzaak.
      • Nog weinig user interface-libraries. Het is geen probleem om standaard Bootstrap of een andere library te implementeren en er zijn bijvoorbeeld Svelte-implementaties van Bootstrap (SvelteStrap) en Material Design (Svelte Material UI), maar het is allemaal nog erg mager.
      • Testing. Evenmin als voor routing is er momenteel een goede unit testing-oplossing beschikbaar. Je kunt zelf aan de slag met Cypress, maar er is geen officiële ondersteuning voor. Dat komt natuurlijk mede doordat Svelte al op de server wordt gecompileerd en er geen framework in de browser draait. Daardoor zijn framworks als Jasmine, Jest of Karma niet bruikbaar. Hopelijk wordt hier in de toekomst aan gewerkt.
      • Beperkte ondersteuning voor TypeScript. TypeScript is een technologie die steeds bredere ondersteuning krijgt in het frontend. Hoewel er standaard een script setupTypeScript.js aanwezig is in nieuwe projecten, kent Svelte geen out-of-the-box ondersteuning voor TypeScript. Er zijn flink wat scherpe randjes en je moet er nog heel wat moeite voor doen. Ook bij Vue en React is TypeScript een opt-in keuze, maar je ziet dat deze frameworks al jaren langer de tijd hebben gehad om zich hierop aan te passen. Ook dit zal - hopelijk - een kwestie van tijd zijn.

      Al met al denk ik genoeg redenen om Svelte zeker uit te proberen en te bekijken of het een oplossing is in jouw situatie. Mijn indruk is dat voor serieuze enterprise-toepassingen nog iets te vroeg is. Maar houd Svelte zeker op je radar voor toekomstige projecten. En natuurlijk laat ik mij graag terechtwijzen! Kom maar op met je projecten waarin je het tegendeel bewijst.

      Peter Kassenaar
      --23 oktober 2020.

      20oktober

      Twee nieuwe technieken

      Nu in coronatijden mijn ZZP-agenda maar heel mager is gevuld met opdrachten, heb ik besloten om van de nood een deugd te maken. Ik ga twee nieuwe frameworks onderzoeken waarvoor het mij tot op dit moment aan de tijd ontbrak om me er meer in te verdiepen. Dat zijn:

      Voor beide frameworks geldt dat ze (bij mijn weten) nog niet superveel worden gebruikt, maar dat er wel interesse is vanuit de frontend-wereld om er meer kennis over op te doen. Misschien schrijven we over vijf jaar allemaal Svelte-applicaties, maar misschien ook niet. Misschien worden de meeste mobiele apps tegen die tijd in Flutter gemaakt, maar wellicht ook niet. Dat is nu nog niet te zeggen. De onderwerpen hebben in ieder geval genoeg tractie om eens te kijken wat het precies is en hoe het werkt.

      svelte-flutter-logo

      Want pas daarna kun je een uitspraak doen over of je een van deze twee technieken zou willen gebruiken in je volgende project(en).

      Vragen

      Terzijde – ik weet op dit moment nog hoegenaamd niets van beide technieken. Ik duik er blanco in en probeer de volgende vragen te beantwoorden:

      • Wat is het?
      • Waar wordt het voor gebruikt?
      • Hoe gaat lokale Installatie en Ontwikkeling?
      • Hoe maak ik een eerste applicatie?
      • Niet-triviale proof-of-concept applicatie: een app die op basis van een zoekvraag van een gebruiker communiceert met een backend en de resultaten in de UI toont.

      Ik zal proberen voor beide technieken de vragen te beantwoorden en hier een blogpost over te schrijven zodat je er mee geholpen bent als je ook nieuw bent in deze technologieën.

      Mocht mijn interesse daarna verder gewekt zijn, dan ga ik kijken naar meer complexe technieken als routing, state management, deployment en meer.

      Ben jij een Svelte-goeroe of Heb je Flutter-tips of aanbevelingen die mij kunnen helpen bij het leren van deze frameworks? Laat het weten!

      Peter Kassenaar
      -- 20 oktober 2020

      08juli

      Drie manieren om broncode in je webpagina of blog te tonen

      Als je regelmatig technische artikelen of blogs schrijft, is het ongetwijfeld vaak voorgekomen dat je programmacode in de pagina wilt tonen. Dit kan natuurlijk van alle zijn. HTML, JavaScript, C++, Python en zo verder.

      Om er voor te zorgen dat de lezer je broncode zo makkelijk mogelijk kan begrijpen, heb ik drie manieren op een rijtje gezet. Ze hebben allemaal hun eigen voor- en nadelen. Er is niet één ‘beste’ manier om het te doen, denk ik.

      1. Copy/Paste

      De eenvoudigste manier is natuurlijk om rechtstreeks vanuit je editor te kopiëren-en-plakken. Dit is snel, eenvoudig en zorgt meestal voor een goed resultaat. Nadeel kan zijn dat de opmaak verloren gaat, dat regelovergangen niet goed overkomen en dat speciale tekens mogelijk automatisch worden omgezet door je editor (berucht voorbeeld: het HTML-commentaar <!—en --> wordt door veel editor automatisch omgezet naar een lang liggend streepje – of een pijl).

      Een eenvoudige React-component ziet er dan bijvoorbeeld als volgt uit:

      // App.js
      import React from 'react';
      // Child components
      import Counter from "./Counter/Counter";
      import DisplayCounter from "./DisplayCounter/DisplayCounter";
      // Our parent component - it holds the state for the child components
      function App() {
      const [counter, setCounter] = React.useState(0);
      const incrementCounter = (val) => setCounter(counter + val);
      return (
      <div className="container">
      <h2>Hello React</h2>
      {/*We are now passing the value and functionality for*/}
      {/*the counter down to child components. */}
      <Counter increment={incrementCounter} val={30} />
      <DisplayCounter counter={counter}/>
      </div>
      );
      }
      export default App;

      Door het lettertype aan te passen naar Courier of een ander monospaced font kun je wat betere resultaten bereiken:

      // App.js
      import React from 'react';

      // Child components
      import Counter from "./Counter/Counter";
      import DisplayCounter from "./DisplayCounter/DisplayCounter";

      // Our parent component - it holds the state for the child components
      function App() {
      const [counter, setCounter] = React.useState(0);

      const incrementCounter = (val) => setCounter(counter + val);

      return (
      <div className="container">
      <h2>Hello React</h2>
      {/*We are now passing the value and functionality for*/}
      {/*the counter down to child components. */}
      <Counter increment={incrementCounter} val={30} />
      <DisplayCounter counter={counter}/>
      </div>
      );
      }

      export default App;

      2. Github Gists

      Bij Github kun je veel meer hosten dan alleen complete repositories. Je kunt ook individuele snippets broncode plaatsen en hier bijvoorbeeld commentaar op vragen. Een geïsoleerd stuk code zonder omliggende structuur of project heet een gist.

      En het mooie is: van Github krijg je een embed-code die je in je webpagina of blog kunt plakken. Dezelfde React-component ziet er dan opeens als volgt uit:

      Het werken met Gists is superpraktisch als je broncode wilt delen, de lezer de mogelijkheid wilt geven de code eenvoudig te kopiëren, commentaar wilt verzamelen op je gist (via Github) en meer. Het is echt een sociale manier om met code om te gaan.

      In populaire editors kun je van broncode rechtstreeks een gist maken:

        Webstorm

        • Selecteer een stuk code, klik met de rechtermuisknop en kies Create Gist.

        webstorm-gist

          Visual Studio Code

          Installeer de extension Gist van Ken Howard (https://marketplace.visualstudio.com/items?itemName=kenhowardpdx.vscode-gist). Voordat je de extensie kunt gebruiken, moet je wel eerst zelf een Github Access Token voor Gists aanmaken. Hoe dat gaat, lees je hier: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token.

          Daarna kun je via Ctrl+Shift+P, Create New Gist een nieuwe gist maken.

          vs-code-gist

            3. Carbon

            Tot slot kun je een mooie afbeelding van je broncode laten maken via de online dienst Carbon (https://carbon.now.sh/).

            Hier kun je je broncode kopieren/plakken en er een .png- of .svg-afbeelding van laten maken. Je hebt keuze uit tal van kleurenschema’s, achtergrondkleur en taalschema’s (HTML, JavaScript, CSS, C#, JSX en talloze andere).

            Onze React-component ziet er dan op deze manier uit:

            carbon

            Conclusie

            Je hebt drie manieren gezien om broncode te delen via je webpagina. De eenvoudigste manier is het rechtstreeks kopiëren/plakken vanuit je editor. Als je de broncode via een online platform wilt delen, is Github Gists een goede manier. Wil je een fraaie screenshot van je code distribueren (zonder dat deze rechtstreeks te kopieren is), gebruik dan de online dienst Carbon.

            Ken jij nog andere alternatieven? Laat het weten. Ik ben benieuwd naar de manier waarop jij broncode deelt via je blog of website.

            Peter Kassenaar

            -- 8 juli 2020

            29mei

            Handboek JavaScript en jQuery–3e editie

            Het zal niemand in de webdevelopment wereld zijn ontgaan. JavaScript is de laatste jaren in sneltreinvaart geëvolueerd. Lange tijd was het niet meer dan een programmeertaal waarmee je klokjes in de statusbalk van de browser kon tonen of eenvoudige animaties in de pagina plaatste. Maar sinds de komst van jQuery in 2006 werd alles anders.

            SNAGHTML4f03ea9e

            Voor het eerst werden complexe, cross-browser compatible handelingen mogelijk zoals het selecteren van elementen en er allerlei handelingen mee uitvoeren. Het is niet overdreven om jQuery 'de redding van JavaScript' te noemen. JQuery is een bibliotheek die in aanvulling op JavaScript wordt gebruikt.

            Populariteit

            Ook met de populariteit van frameworks zoals React, Angular en Vue is de rol van 'gewoon' JavaScript en jQuery nog lang niet uitgespeeld. JQuery wordt meegeleverd met de standaardinstallaties van WordPress (35% van álle honderden miljoenen websites ter wereld draait op WordPress), andere content management systemen, wordt aanwezig veronderstelt in de populaire CSS-bibliotheek Bootstrap en wordt in het onderwijs gebruikt om snel interactiviteit aan webpagina's toe te voegen. JQuery is meegegroeid met deze ontwikkelingen. Oude opdrachten verdwenen uit de bibliotheek, nieuwe opdrachten zijn toegevoegd.

            De laatste jaren zijn er echter ook wijzigingen doorgevoerd in de taal JavaScript zelf. De manier om variabelen te declareren met var werd vervangen door const en let. Er zijn nieuwe manieren om functies te definiëren en bijvoorbeeld communicatie met een achterliggende API en database zijn nu rechtstreeks vanuit JavaScript mogelijk met de opdracht .fetch().

            Derde editie

            De derde editie van het Handboek JavaScript en jQuery is aangepast aan al deze vernieuwingen. Het is gericht op de beginnende programmeur die nog geen kennis heeft van JavaScript, of er alleen zijdelings mee te maken heeft gehad. Je leert vanaf het begin werken met variabelen, lussen, events en HTML-elementen als formulieren. Tegelijkertijd is het wel een boek voor degenen die met code bezig gaan. Je zult er geen aspecten van webdesign in terugvinden voor het ontwerpen of opmaken van pagina's met Photoshop of Illustrator. Alle codevoorbeelden zijn te downloaden om zelf aan te passen.

            In het eerste deel maak je kennis met JavaScript als programmeertaal zelf. Stapsgewijs leer je de achterliggende theorie, maar aan het einde van elk hoofdstuk staan praktijkoefeningen om het geleerde zelf uit te proberen.

            Het tweede deel gaat in op jQuery. Je leert dat het een uitbreiding is op JavaScript en hoe jQuery het leven van de JavaScript-programmeur makkelijker maakt. Ook wordt ingegaan op de wijze waarop je met jQuery communiceert met achterliggende API's. Gegevens uit databases kun je zo in de webpagina verwerken.

            Zo biedt het Handboek JavaScript en jQuery een uitstekende inleiding op je carrière als webdeveloper. Kennis die je hiermee opdoet kun je rechtstreeks gebruiken in je werk of hobby. Ook is deze kennis onontbeerlijk als je op termijn een volgende stap wilt zetten naar het ontwikkelen in een framework als React, Angular of Vue.

            Meer informatie

            Peter Kassenaar
            -- 29 mei 2020

            07mei

            CKEditor 5 gebruiken in een Angular-project

            Zo nu en dan kom je als webdeveloper een project tegen waarin het nodig is dat gebruikers zelf rich text kunnen invoeren. Denk aan een blog, een forum of een chatbox met opmaakmogelijkheden. Een standaard <textarea> element voldoet dan niet meer.

            Er zijn tal van oplossingen beschikbaar, maar de twee bekendste zijn waarschijnlijk:

            Beide editors zijn beschikbaar voor tal van frameworks (Angular, React, Vue) maar daarnaast ook voor vanilla JavaScript projecten en andere omgevingen.

            image

            In dit artikel lees je hoe je CKEditor 5 gebruikt. De focus ligt daarbij op een basisinstallatie in een leeg Angular-project. Via de documentatie kun je allerlei extra configuraties uitproberen, meer properties en events leren enzovoort.

            TLDR; Just show me the codez…https://github.com/PeterKassenaar/ng-ckeditor-example

            Inhoud

            1. Een blanco Angular project maken.
            2. CKEditor 5 installeren
            3. CKEditor toevoegen aan een component
            4. Gegevens uitlezen uit de editor en verder verwerken
            5. Vervolgstappen

            1. Angular Project maken

            We gebruiken CKEditor 5 in een standaard Angular CLI-project. Ik ga er van uit dat Angular CLI is geïnstalleerd. Zo niet, volg dan de installatiestappen op cli.angular.io.

            ng new ckeditor --defaults

            Als er toch nog om gevraagd wordt: neem de standaardinstellingen van CLI over met Enter. Je hebt dan een blanco project. Start dit en ga in de browser naar http://localhost:4200.

            npm start

            Open /src/app/app.component.html en verwijder alle (standaard)inhoud.

            Vervang dit door een eenvoudige koptekst:

            <h1>CKEditor 5 in een Angular-project</h1>
            image

            2. CKEditor 5 installeren

            Het installeren van CKEditor 5 bestaat uit twee stappen. Je moet de Angular Module installeren en een build kiezen. Je kunt kiezen uit een klassieke build, een inline editor, een balloon editor en meer. Wij kiezen de klassieke editor (=de vervanging van <textarea>).

            npm install --save @ckeditor/ckeditor5-angular

            npm install --save @ckeditor/ckeditor5-build-classic

            Vervolgens moet je – als bij elke Angular-module – de editormodule toevoegen aan je hoofdmodule. In ons geval is dat app.module.ts.

            3. CKEditor toevoegen aan een component

            Open app.component.ts en importeer hierin de classic editor die je eerder hebt geïnstalleerd. Maak hem daarna beschikbaar via een property in je class:

            Tot slot gebruik je de tag <ckeditor> in je template om de rich text editor te plaatsen:

            SNAGHTML6e614c0a

            Behalve de data rechtstreeks in de template te zetten met data=”<h2>…</h2>” kun je hiervan uiteraard ook een variabele maken en deze binden aan de template. Vergeet niet om het attribuut data in dat geval dynamisch te maken met […]. De code in de HTML wordt dan iets als

            [data]=”templateData”

            en in app.component.ts wordt de variabele ingesteld. Het is niet verplicht om vooraf data op te geven. Je mag uiteraard ook met een lege editor beginnen.

            templateData=’<h2>Welkom bij ….</h2>’;

            4. Gegevens uitlezen en verwerken

            Uiteraard wil je iets doen met de tekst die in CKEditor is getypt. Hiervoor is de event (change) beschikbaar en de methode .getData(). We gebruiken een aantal hulpvariabelen en voegen een knop toe die de getypte tekst als HTML in de component template toont.

            In werkelijkheid wil je de tekst waarschijnlijk naar een backend sturen om op te slaan. Gebruik in dat geval een service die HttpClient implementeert, enzovoort. Behandeling daarvan valt zoals je begrijpt buiten het bestek van dit artikel.

            Pas eerst de template als volgt aan.

            Wijzig app.component.ts om de gegevens te verwerken:

            image

            5. Conclusie

            Dit artikel liet zien hoe je op eenvoudige wijze CKEditor 5 toevoegt aan een Angular-project. Uiteraard is er veel meer mogelijk dan in het kader van dit artikel kon worden besproken. Kijk bijvoorbeeld naar:

            • Integratie met [(ngModel)]
            • Welke @Input() properties beschikbaar zijn
            • Welke @Output() properties beschikbaar zijn
            • Op welke manier je de editor kunt stylen met CSS
            • …en uiteraard alle overige documentatie

            Lees hiervoor de informatie op https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html.

            Cross-site scripting (XSS)

            Let er wel op dat áls je de tekst naar een backend stuurt, dat je kale HTML naar een API stuurt. Je backend moet dit als onbetrouwbare bron behandelen, en HTML altijd escapen. Een kwaadwillende gebruiker zou <script> tags kunnen typen met hierbinnen kwaadaardige code. Als je backend hierop niet is voorbereid, wordt vervolgens de scriptcode uitgevoerd! Dit wil geen enkele developer. Let hier dus goed op als je een rich text editor gebruikt (maar eigenlijk geldt dit voor alle user-input die je verzamelt. Escape altijd de HTML-tekens in de code.

            Voorbeeldcode downloaden

            Het eenvoudige project dat we hier gemaakt hebben, is beschikbaar op Github:

            Meer weten over Angular? Boek een training via www.angulartraining.nl

            Of lees een boek: Web Development Library – Angular

            Peter Kassenaar
            -- 7 mei 2020

            30augustus

            Infosessies TypeScript en ES6

            Logo's TypeScript en ES6

            In september en oktober verzorg ik voor aariXa in België een tweetal infosessies met als onderwerpen ECMAScript 2015/ES6 en TypeScript. De toegang is gratis, maar inschrijven vooraf is wel verplicht. Zie hiervoor de link onderaan deze pagina.

            De eerste sessie vindt plaats op donderdag 22 september 2016 in de Ehsal Campus te Brussel en de tweede sessie is op donderdag 13 oktober 2016 op de campus Elfde Linie van Hogeschool PXL te Hasselt.

            ECMAScript 2015 (voorheen ES6) is een major upgrade van de huidige versie van JavaScript. In de taal zijn tal van nieuwe keywords en functies aanwezig. Nieuw zijn bijvoorbeeld de keywords class, import, export, let, const en meer. Ook kunt u gebruik maken van arrow functions en lambda expressions. Met ES6 maakt JavaScript een enorme stap voorwaarts en wordt de taal echt volwassen.

            TypeScript biedt vervolgens extra features in de vorm van definition files, static typing, interfaces en generics, waardoor fouten in een applicatie al compile-time aan het licht komen, in plaats van run-time, zoals met de huidige generatie JavaScript-applicaties het geval is.

            Programma

            17:30 u

            Ontvangst met broodjes en drank

            18:00 u

            Welkomstwoord – Introductie

            Start infosessie: TypeScript & ECMAScript

            Deel 1: Algemeen en specifieke kenmerken van ES6

            · Historie van JavaScript en ECMAScript 2015  (ES6)

            · De plaats van ECMAScript 2015 en TypeScript in het landschap

            · Waarom Tranpilers? Babel, Traceur en polyfills

            · Belangrijke ECMAScript 2015-kenmerken

            · Nieuwe keywords, arrow functions, classes, parameters en meer

            19:30 u

            Pauze

            19:45 u

            Vervolg infosessie:

            Deel 2: TypeScript in concrete projecten en de relatie met ECMAScript 2015

            · TypeScript: voordelen van TypeScript, hoe te gebruiken?

            · Ingebouwde data-types van TypeScript: string, boolean, number en andere.

            · Custom Types en Return Types.

            · Classes, public en private modifiers.

            · TypeScript in een real-life workflow.

            · Debugging TypeScript.

            · Pointers naar meer informatie over TypeScript en ECMAScript 2015.

            · Q & A – aanvullende vragen.

            · Afsluiting

            21:30 u

            Napraten

             

            Na afloop nodigt aariXa alle deelnemers uit voor een glaasje.

            Praktisch

            Inschrijven via http://aariXa.com/inschrijvingen

            Hopelijk tot ziens in Brussel of in Hasselt!

            -- Peter Kassenaar
            30 augustus 2016.