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.

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.

          13juli

          Nieuwe online training: Productiviteit met WebStorm

          Als je wel eens een training van mij hebt gezien, dan weet je dat ik vaak JetBrains WebStorm gebruik als editor. Dit is zonder twijfel een van de beste IDE’s voor webdevelopment. Studenten stellen mij hierover ook vaak vragen:

          • “Hoe kun je dat bestand zo snel vinden in je project?!”
          • “Hoe schrijf je zo snel code, met maar een paar toetsaanslagen?”
          • “Wat is de beste manier om direct een project op Github te plaatsen?”

          Dat was het moment waarop ik dacht ‘misschien is het handig om hier een training voor samen te stellen. Deze vragen, en uiteraard nog veel meer worden daarom beantwoord in de nieuwe online cursus “Productiviteit met WebStorm”.

          Bestel nu met 30% korting!

          JetBrains WebStorm is de ideal editor voor webdevelopers. Het is een volledig uitgeruste IDE die alle tools en voorzieningen biedt voor ontwikkelaars in JavaScript, TypeScript, NodeJS en uiteraard HTML en CSS.

          Deze beknopte training laat zien hoe je WebStorm optimaal inzet om zo productief mogelijk te zijn. Je leert tal van handige trucs om sneller te werken. Je ziet alle mogelijkheden om de user interface aan te passen, sneltoetsen te gebruiken en je code snel te schrijven door Live Templates te maken en gebruiken. Daarnaast leer je hoe WebStorm je workflow ondersteunt als in jouw projecten gebruik wordt gemaakt van tools als Gulp, NPM of andere.

          jetbrains-editors

          De training is specifiek bedoeld voor WebStorm, maar is ook uiterst waardevol voor gebruikers van andere JetBrains-editors zoals IntelliJ, PHPStorm, PyCharm en andere.

          Tot de behandelde onderwerpen behoren:

          • WebStorm downloaden en installeren
          • De user interface verkennen en de deelvensters instellen
          • De user interface aanpassen en instellen voor optimaal gebruik
          • Sneller coderen met WebStorm in JavaScript, TypeScript, HTML en CSS
          • Build tools zoals Gulp en NPM optimaal gebruiken vanuit de IDE.
          • Git- en Github-integratie vanuit WebStorm
          • RESTful Webservices testen met de ingebouwde RESTful Client.
          • Plugins gebruiken, toevoegen en verwijderen

          Heb je vragen of opmerkingen over de training? Aarzel dan uiteraard niet om contact op te nemen!

          Bestel nu met 30% korting!

          Peter Kassenaar
          -- 13 juli 2016