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.

06maart

Veranderingen…

[English text follows below]

Zoals je wellicht weet heb ik na mijn studies altijd via een eigen onderneming gewerkt als freelancer. Ik ben nooit in loondienst geweest bij een bedrijf. Het is inmiddels een heel leven aan ervaringen wat ik achter me heb liggen. Ik heb aan vertalingen gewerkt, boeken geschreven, trainingen en sprekersessies op congressen verzorgd en als programmeur meegewerkt in diverse projecten.

Het freelancebestaan beviel me zeer goed, maar ik merkte de afgelopen tijd toch dat ik aan iets nieuws toe was. Het reizen, de intakegespreken, de facturering en in het algemeen “het hele gedoe er omheen” zorgden voor versnippering van mijn focus. Dat ging me steeds meer tegenstaan.

Ik wéét dat het erbij hoort, en de afgelopen 25+ jaar sloeg de balans steeds door in het voordeel van het ZZP-schap, Maar dat is veranderd.

De afgelopen weken heb ik gesprekken gevoerd met verschillende partijen. Vandaag kan ik mededelen dat ik per 15 maart 2023 als sr. Frontend Developer in dienst zal treden bij Conclusion Confidential (https://www.conclusion.nl/confidential). Dit is een bedrijf in Apeldoorn dat software maakt ‘om de B.V. Nederland veilig te houden.’ Het gaat om ondersteuning van onder meer politie, Koninklijke marechaussee, handhavings- en opsporingsdiensten en diverse gemeenten. Er wordt voornamelijk gewerkt met Angular in het frontend en .NET als backend. Beiden technieken die mij welbekend zijn.

Ik stop derhalve met het geven van trainingen, het ontwikkelen van cursusmaterialen en het werken op projectbasis bij relaties. Ik stop niet (direct) met het schrijven van boeken en artikelen, maar zal hier wel veel minder tijd voor hebben. Het bijhouden van bestaande titels staat beslist op mijn verlanglijstje. Voor nieuwe titels zal echter weinig tot geen tijd meer overblijven, zo verwacht ik.

Ik ben benieuwd wat deze nieuwe stap brengen zal.

conclusion

Changes…

As you may know, after my studies, I have always worked as a freelancer through my own company. I have never been employed by a company. I have worked on translations, written books, provided training and speaker sessions at conferences and worked as a programmer in various projects.

I really enjoyed being a freelancer, but recently I felt I was ready for something new. The travelling, the intake meetings, the invoicing and in general "the whole thing around it" were fragmenting my focus. That started to bother me more and more.

I know it's part of the job, and for the past 25+ years the balance always tipped in favour of being self-employed, but that has changed.

Over the past few weeks, I have held talks with various parties. Today, I can announce that I will be joining Conclusion Confidential (https://www.conclusion.nl/confidential) as a Sr Frontend Developer from 15 March 2023. This is an Apeldoorn-based company that makes software "to keep the Netherlands safe". This involves supporting police, Koninklijke marechaussee, enforcement and investigation services and various municipalities, among others. I will work mainly with Angular in the frontend and .NET in the backend. Both techniques that are well known to me.

I will therefore stop giving training courses, developing course materials and working on a project basis with clients. I will not (immediately) stop writing books and articles, but I will have much less time for this. Keeping up with existing titles is definitely on my wish list. However, little to no time will be left for new titles, I expect.

I am excited to see what this new step will bring.

Peter Kassenaar

- - 6 maart 2023

22december

Handboek JavaScript en jQuery - vierde editie

Al meerdere jaren achter elkaar is JavaScript de populairste programmeertaal ter wereld, zoals de laat zien.

stackoverflow

Dit geldt niet alleen voor webdevelopers, maar voor alle ontwikkelaars. JavaScript wordt ook gebruikt in andere programma’s. Denk aan het uitvoeren van geautomatiseerde taken in PhotoShop, het animeren van 3D-modellen in AR-software en het maken van interactieve PDF’s. Het is dan ook niet overdreven om te stellen dat iemand die in de IT werkzaam is, op enig moment in zijn loopbaan met JavaScript in aanraking komt. Daarmee is het slim om goed voorbereid te zijn!

Ontwikkeling

JavaScript is de laatste jaren erg snel ontwikkeld. 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. Tegenwoordig doen we alles met JavaScript: online tickets boeken, internetbankieren, Gmail, Tiktok en Facebook zijn nog maar een paar voorbeelden. Zonder JavaScript zouden deze diensten niet bestaan. En eigenlijk is dit weer allemaal terug te leiden naar de komst van jQuery in 2006.

js-jq

Zo’n vijftien jaar geleden was het voor het eerst mogelijk ingewikkelde handelingen uit te voeren die daarvoor erg veel en ingewikkeld JavaScript vereisten. Denk aan het selecteren van elementen op een pagina (zoals knoppen, afbeeldingen en lijsten) en er allerlei handelingen mee uit te voeren. Het is niet overdreven om jQuery 'de redding van JavaScript' te noemen. JQuery is een bibliotheek die in aanvulling op JavaScript wordt gebruikt.

Populariteit

Zelfs 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), het zit in andere content management systemen, 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 ook veel 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().

Vierde editie

De vierde 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. Het is echter wel een boek voor degenen die met code bezig gaan. Je zult er geen aspecten van webdesign in terugvinden. Het gaat dus niet om het ontwerpen of opmaken van pagina's met Figma, Photoshop of Illustrator. Alle codevoorbeelden zijn te downloaden om zelf aan te passen.

9789463562652-groot

Opbouw van het boek

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

-- 22 december 2022

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