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.

11november

Nieuwe uitgave–Praktisch Python

praktisch-pythonEen definitieve datum is nog niet bekend, maar ik ben bezig met het schrijven van een nieuw boek (als in: nieuw. Niet een update van een bestaande uitgave). De voorlopige werktitel is Praktisch Python. Het boek zal – zoals je op basis van de naam waarschijnlijk al had verwacht :-) - gaan over Python.

Hoewel je zeker Python kunt leren met dit boek naast het toetsenbord, wordt het geen leerboek in traditionele zin. Veel programmeertitels, die van mijzelf niet uitgezonderd overigens, beginnen met variabelen, vervolgens de lus-constructies van de taal, voorwaardelijke statements, collectietypen, functies enzovoort. Dit werkt goed als je een totale beginner bent.

Maar velen zijn inmiddels geen totale beginner meer. Programmeren komt aan bod op middelbare scholen, MBO’s, HBO’s en natuurlijk in het bedrijfsleven. Zelfs als je een ingewikkelde Excel-formule maakt, ben je in feite al aan het programmeren. In Python is dat in bijna alle gevallen makkelijker.

Projecten

Het boek is dan ook opgezet rondom projecten. Elk project geeft een oplossing voor een alledaags programmeerprobleem waarbij Python wordt ingezet als tool. Denk bijvoorbeeld aan:

  • “Ik wil alle afbeeldingen in een map in één keer verkleinen naar 800x600.”
  • “Ik wil een programma schrijven dat het laatste weerbericht ophaalt en toont.”
  • “Ik wil gegevens ophalen van internet, maar de API die de gegevens levert, werkt met authenticatie. Hoe doe ik dit?”
  • “Ik wil alle prijzen van een bepaald product uit een e-commerce website ophalen (web scraping) en opslaan in een Excel-bestand.”

Dit zijn allemaal klusjes die uitstekend met een – relatief klein – Python-programma kunnen worden opgelost.

  • Als je al Python kent, zie je hoe het kan worden ingezet om veelvoorkomende vraagstukken op te lossen.
  • Als je nog geen Python kent, zie je hoe de structuur en syntaxis van Python er uitziet en in real-life projecten wordt ingezet. Je leert al doende en hoeft niet eerst talloze tutorials of academische voorbeelden te volgen.

Het is wel handig als je enige voorkennis hebt op het gebied van programmeren. Dat mag natuurlijk ook een andere taal zijn zoals Java, C#, PHP of JavaScript. Dan kun je de projecten snel volgen.

Als jij wél een totale beginner bent, dan wil je misschien eerst een andere uitgave lezen, zoals het uitstekende Handboek Programmeren in Python.

Concept inhoudsopgave

Zoals gezegd, het boek is nog niet klaar (nog lang niet! Ik ben op dit moment bij hoofdstuk 2 :-(, uitgave wordt ‘ergens medio 2023’ verwacht), maar de globale inhoud is al wel min of meer vastgesteld:

  1. Introductie
    • Voorkennis, werkomgeving inrichten, debuggen, etc.
  2. Project Raden Maar
    • Raadspelletje met kennismaken met constanten, if, while, import en meer
  3. Project Geboortedatum
    • werken met date en datetime
    • Argumenten op de command line meegegven
  4. Project Mastermind
    • Het bekende hersenkrakerspel nabouwen in Python
  5. Project Werken met API’s
    • Gegevens ophalen en verwerken uit een van talloze open API’s op internet.
    • data verwerken met de module json.
  6. Project API’s met authenticatie
    • Bij veel API’s is authenticatie verplicht. Dit project geeft hiervan een voorbeeld.
  7. Project Eigen API maken met Flask
    • Flask is een aanvullend webframework voor Python. Zo stel je snel eigen data beschikbaar.
  8. Project Webapp maken met Django (of ook weer Flask)
    • Behalve API’s kun je ook complete websites maken. Hiervoor wordt vaak Django (of Flask) gebruikt.
  9. Project Werken met bestanden
    • Bestanden openen en sluiten, lezen en schrijven.
    • csv-data.
    • Exif-data van alle foto’s uit een directory verwijderen/aanpassen (in verband met privacy).
  10. Project Afbeeldingen bewerken
    • JPG en PNG bestanden manipuleren met pillow.
  11. Project Web Scraping
    • Gegevens opzoeken vanaf websites en verder opslaan en bewerken
    • HTML parsen met de module bs4 (BeautifulSoup4)
  12. Project Excel
    • Excel-worksheets openen, lezen, bewerken en weer opslaan
  13. Project PDF
    • PDF’s openen, lezen en schrijven met PyPDF2.
  14. Project Text-To-Speech
    • Geschreven tekst uit een programma (of een bestand) omzetten naar een mp3-bestand met gTTS.

Aanvullende inhoud

Met de voorgaande inhoud wordt het aantal beschikbaar gestelde pagina’s voor het boek (200-300) waarschijnlijk wel gevuld. Mocht er nog ruimte over zijn, dan staan de volgende projecten ‘op de reservebank’. Het boek wordt dan uitgebreid met:

  1. Project Registratie
    • Een app maken voor registraties van een evenement/concert enzovoort
    • Werken met databases / sqlite / SQL
  2. Project E-mail
    • De modules smtplib, imapclient en ezgmail.
  3. Project GUIs
    • Module TKinter gebruiken om grafische toepassingen te schrijven.
  4. Project IOT
    • Applicaties schrijven voor Raspberry Pi, Arduino, etc.

Meewerken? Op de hoogte blijven?

Zoals je hebt begrepen is bovenstaande inhoud nog een concept. Waarschijnlijk gaat het boek er op deze manier uitzien, maar als jij vindt dat andere onderwerpen beter geschikt zijn, laat het dan vooral weten!

Ik ontvang graag feedback en zal op elke realistische bijdrage of vraag reageren.

Als je alleen op de hoogte gehouden wilt worden van het verschijnen van dit boek, laat dan je gegevens achter via Contact. Je ontvangt dan eenmalig (niet vaker, geen spam, je e-mailadres wordt weer verwijderd conform de AVG-wetgeving, etc) een mailtje met aankondiging, definitieve inhoud en meer informatie.

Opmerkingen welkom!

Peter Kassenaar
-- 11 november 2022

24juni

YouTube playlist - Windows 10 tips en trucs

windows_logoVaak zie ik tijdens mijn trainingen dat de basisvaardigheden van Windows wel bekend zijn (Programma's starten en sluiten, bestanden openen), maar dat enorm veel mogelijkheden ongebruikt blijven. Mogelijkheden waarmee je eenvoudig minuten kunt besparen. Elke dag opnieuw!

Ik heb daarom besloten een aantal korte video's op te nemen en te publiceren op YouTube. Elke video duurt niet langer dan 3-5 minuten, dus het kost niet te veel van je tijd. Als je een optie al kende heb je niet veel tijd verspild. Maar als een bepaalde mogelijkheid of instelling nieuw voor je is, kan het je in de toekomst een veelvoud van die tijd schelen.

In de video's komt onder meer aan de orde:

  • Het Startmenu optimaal gebruiken
  • Windows Verkenner
  • Sneltoetsen
  • Het uiterlijk van Windows instellen
  • Thema's gebruiken
  • Meegeleverde Tools
  • Browsers en internet gebruiken
  • Allerlei Windows-instellingen aanpassen
  • ... en nog veel meer

image

https://www.youtube.com/watch?v=Lr1TPUuQqOE&list=PLhOYRbbfrvpGEJdiYsRCHsfRczjNyX9vy

Daarnaast heb ik een bijpassende website gemaakt, www.windowstips.nl.

Als je er op- of aanmerkingen over hebt, hoor ik het graag.

Peter Kassenaar
-- 24 juni 2021

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.

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

        01mei

        Windows 10 tip : afbeelding over meerdere monitors

        Een leuke feature van mobiele telefoons is dat het tegenwoordig zo eenvoudig is om makkelijk panoramafoto’s te maken. Tegelijkertijd hebben veel computergebruikers (in ieder geval programmeurs, waar ik dagelijks mee werk) vaak twee of zelfs drie monitoren.

        De standaardinstelling van Windows is dat een gekozen achtergrondafbeelding voor het bureaublad wordt herhaald op elke monitor. In mijn geval ziet dat er dan op deze manier uit:

        wallpaper-fit

        Dat is niet slecht, maar het kan beter. Ik heb immers niet voor niks een panoramafoto gemaakt.

        Dit is wat we willen:

        wallpaper-span

        Het is niet lastig om dit in te stellen, maar je moet even weten waar het zit:

        1. Klik met de rechtermuisknop een leeg deel van het bureaublad en kies Personaliseren (Personalize).
        2. In het venster Achtergrond (Background) kun je een afbeelding kiezen en de manier waarop deze over de monitors verdeeld wordt.
        3. Kies de optie Verdelen (Span) in het venster dat is verschenen. Met de overige opties kun je direct testen hoe je achtergrond er bij de andere instellingen uitziet. Je hoeft het venster hiervoor niet te sluiten, of op Opslaan te klikken.

        background

        Meer informatie

        Wil je meer lezen over Windows 10 en alle instellingsmogelijkheden? Kies dan bijvoorbeeld een van onderstaande boeken.

        Peter Kassenaar
        -- 1 mei 2020

        23april

        Outlook tip: afspraak maken van e-mail

        Ik gebruik Outlook als belangrijkste communicatietool. Regelmatig krijg ik een mailtje met daarin details en een datum voor een afspraak, zoals bijvoorbeeld onderstaande.

        image

        Maar dan moet je er nog zelf aan denken om de Agenda te openen, de juiste datum op te zoeken en hier handmatig een nieuwe afspraak te plannen.

        Snelle stappen

        Gelukkig kan dat in moderne versies van Outlook automatiseren, door een Snelle stap (Quick Step) aan te maken. Dan kun je in het vervolg met één muisklik (nou ja, misschien twee of drie, maar in ieder geval een stuk sneller) een e-mailbericht naar de agenda sturen. Bijkomend voordeel is dat je in de betreffende afspraak dan ook direct de tekst en eventuele links uit het mailbericht bij de hand hebt.

        Het maken van een Snelle stap gaat als volgt:

        1. Open het e-mailbericht waarvan je een afspraak wilt maken.
        2. Klik op Nieuwe maken (Create New) het kader Snelle stappen.
        3. Typ een naam voor de actie. Ik koos E-mail naar afspraak.
        4. Kies een actie uit de lijst. Scroll naar beneden om Een afspraak met de tekst van het bericht maken te kiezen. Zoals je ziet kun je nog tal van andere handelingen automatiseren.

        image

        1. Klik op de knop Actie Toevoegen (Add Action).
        2. Eventueel kun je nog aanvullende acties toevoegen op dezelfde manier, een sneltoets kiezen, of een eigen tooltip schrijven. Maar voor mijn doeleinden is deze stap voldoende.
        3. Klik op Voltooien (Finish).

        De snelle stap is nu verschenen in het kader Snelle stappen. Je kunt hem direct gebruiken.

        Snelle stap activeren

        1. Open een mailtje waarvoor je een afspraak wilt maken (of, realistischer, je leest een mail en ziet dat hiervoor een afspraak in de agenda gepland moet worden).
        2. Klik in het kader Snelle stappen op de stap E-mail naar afspraak.
        3. Er wordt direct een nieuw Afsprakenvenster geopend, waarin je de titel van de afspraak, de tijd en de locatie op de gebruikelijke manier kunt aanpassen.
        4. Stel de afspraak in en kies Opslaan en sluiten (Save & Close).

        image

        De afspraak staat direct in je agenda. Hier kun je hem verder aanpassen zoals gebruikelijk. Er is geen koppeling aanwezig tussen het oorspronkelijke mailtje en de afspraak. De mail kun je dus verplaatsen, verwijderen, enzovoort. Dit heeft geen invloed op de afspraak.

        Stappen beheren

        Je kunt probleemloos wat experimenteren met deze tool. Via de optie en het venster Snelle stappen beheren (Manage Quick Steps) kun je stappen bewerken, dupliceren of weer verwijderen.

        Eventueel kun je ook vanuit dit venster een nieuwe Snelle stap maken – maar ik vind het makkelijker om dit rechtstreeks vanuit Outlook te doen, omdat je dan ziet waar je mee bezig bent.

        snelle-stap-1

        Handigheidje in Outlook. Doe er je voordeel mee!

        Handboek Outlook 2019

        P.S. Wil je meer weten over Outlook, lees dan ook mijn Handboek Outlook 2019. Hierin staan meer tips over het gebruik van E-mail, Afspraken en Contactpersonen.

        Peter Kassenaar
        -- 23 april 2020

        22januari

        Windows 10 en Microsoft HoloLens – de toekomst

        Op de langverwachte persbijeenkomst die Microsoft op 21 januari 2015 organiseerde was het grote nieuws niet Windows 10 zelf met al zijn nieuwe snufjes en verbeteringen, maar het konijn dat Microsoft aan het einde uit de grote hoed toverde: Microsoft HoloLens. De kaken van de aanwezigen in de zaal vielen collectief omlaag.
        - “Holograms?” 
        - “Yes. Holograms”.

        HoloLens projecteert hologrammen in de wereld waarin je je op dat moment bevindt

        Als je mijn Twitter feed die avond toevallig hebt gevolgd, dan heb je gezien dat ik er behoorlijk enthousiast over ben. Voor als je het nog niet hebt gezien: HoloLens projecteert real time hologrammen in de wereld waarin je op dat moment aanwezig bent. Je kunt met diverse apps interacteren met die projecties en zo games spelen, met anderen converseren, afstandsonderwijs volgen en meer. Bekijk hier de introductievideo. Nog korter:

        “Hololens is voor mij de meest opwindende introductie sinds de aankondiging van de iPhone in 2007.”

        Ja, lach maar. Ik wacht wel even. Misschien moet ik zelf over vijf jaar ook smakelijk lachen om deze uitspraak, maar op dit moment durf ik de stelling wel aan dat Microsoft hiermee een winnaar in handen heeft. Dit is de toekomst van gaming, design, voorraadbeheer, medische handelingen, praktijkonderwijs, apparaatonderhoud en wie weet wat nog meer als de API’s voor het hologramprogrammeren eenmaal in handen van de community komen.

        Ik ga hier niet alle kenmerken herhalen die ook al in de artikelen op de diverse nieuwssites worden genoemd. Lees zelf bijvoorbeeld:

        • Tweakers – inleidend artikel met commentaren
        • The Verge – Hands on ervaringen met HoloLens
        • Engadget – Artikel met speculaties over de technische specificaties.

        Waarom HoloLens een succes kan worden

        Belangrijke redenen die volgens mij doorslaggevend kunnen zijn waarom Hololens wel een succes wordt, terwijl bijvoorbeeld Google Glass dat niet zijn geworden en Oculus Rift nog lang niet de verspreidingsgraad heeft die de makers voor ogen hadden:

        • Hololens heeft geen front-side camera, zoals bijvoorbeeld Google Glass wel had. Met alle privacy-issues van dien. Met Hololens kun je je weliswaar samen in een virtuele wereld begeven, maar er is geen gevaar dat nietsvermoedende omstanders ongemerkt worden gefilmd en buiten hun medeweten op Facebook belanden, of erger. Goede keuze van Microsoft. [zie ook update, hieronder].
        • Hololens kent een view-throughmechanisme. Dat betekent dat je niet afgesloten wordt van de buitenwereld, maar dat hologrammen aan jouw bestaande wereld worden toegevoegd. Je kunt door de donkere lens gewoon anderen blijven zien, met anderen spreken en interacteren. Je bent niet asociaal in je eigen VR-wereld opgesloten, maar communicatie blijft mogelijk. Essentieel.
        • Door dat view-throughmechanisme hoeft Hololens niet de wereld opnieuw te berekenen en te creëren.  Het hoeft ‘alleen maar’ hologrammen op de al bestaande wereld te projecteren. Dat is nog voldoende uitdaging voor de rekenkracht van de processor (in HoloLens HPU, Hologram Processing Unit genoemd), maar maakt het een stuk eenvoudiger dan bij Oculus Rift, die de complete wereld moet berekenen, inclusief jouw interactie ermee. Dit voorkomt dat je projecten op grofkorrelige tafeltjes in een pixelige omgeving moet manipuleren. Alle rekenkracht kan worden aangewend voor de hologrammen. Heel slim.
        • Je hoeft HoloLens niet continu te dragen. Waar bij Google Glass werd verwacht dat je het geeky object de hele dag op je neus droeg, zal dat bij HoloLens niet het geval zijn. Net zoals je nu op de bank gaat zitten met je tablet of in je stoel neerploft om tv te kijken, zo zul je straks op de bank gaan zitten en zet je dan HoloLens op om informatie op te zoeken of er mee te interacteren. Of ga je voor je Xbox staan - als dat nog nodig is - om een HoloGame te starten (dat laatste woord heb ik zelf verzonnen ;-). Oftewel: HoloLens is een specifiek apparaat, waar Google Glass een generiek doel had. En mede daarom is mislukt.

        MineCraft live in je eigen huiskamer. Opslaan en de volgende dag doorspelen!

        Nogmaals, de geschiedenis zal uitwijzen of HoloLens het succes wordt waar Microsoft op hoopt, maar ik geef ze een goede, heel goede kans.

        Update – 23 januari 2015. Ik werd er via Twitter door @GerjanOnline op gewezen dat de HoloLens wel degelijk frontside camera’s heeft. Dit is uiteraard juist. Zonder frontside camera’s zou het apparaat immers totaal geen beeld van de omgeving kunnen opnemen om de hologrammen te kunnen projecteren. Het artikel op Engadget spreekt van “at least four cameras or sensors on the front”. Ik blijf er wel bij dat het doel van HoloLens in dit opzicht anders is dan bij Google Glass. De camera’s worden niet gebruikt voor opnamen of filmbeelden, maar alleen om te berekenen waar de lens zich bevind en hoe de hologramwereld moet worden opgebouwd. Het zijn rekendevices. Geen registratiedevices. Ik verwacht ook dat Microsoft niet zal toestaan dat apps de camera’s hiervoor gaan gebruiken. Maar de toekomst zal dit moeten uitwijzen.

        Houd de website http://www.microsoft.com/microsoft-hololens/en-us in de gaten voor het laatste nieuws, en volg https://twitter.com/hololens voor Twitter-updates. Het is de toekomst.

         

        Peter Kassenaar
        -- 22 januari 2015

        19november

        Unboxing iPad Air 2

        Mijn eerste iPad stamt uit april 2010 en is daarmee ruim 4,5 jaar oud. Ik denk dat het een van de oudste iPads in Nederland is, omdat ik hem in de Verenigde Staten kocht toen hij officieel nog niet in Europa gelanceerd was.

        Maar de levensduur van de iPad Classic is door Apple beëindigd. Technisch is het apparaat nog prima, maar er worden geen updates van iOS meer uitgegeven voor deze versie. iOS 5.1.1 is de maximale versie. Tegelijkertijd heeft Apple het app-makers verplicht gesteld om nieuw apps minimaal tegen iOS 6 te compileren. Apps voor iOS 5 worden niet meer geaccepteerd in de Store, met xCode kun je ze zelfs niet eens meer maken. Waarmee de originele iPad effectief om zeep is geholpen.

        En: daar kwam ik achter toen ik juist in een app-training bezig was (training PhoneGap). Ik dacht slim te zijn door de avond tevoren ‘nog snel even xCode te updaten’. Waardoor je per saldo de volgende dag met een tablet die dan plotsklaps de functionaliteit van een baksteen heeft, op stap gaat. Tja.

        Nu dus maar nóg slimmer geweest en tijdig een nieuwe iPad aangeschaft.

        Ik maakte onderstaand filmpje over het unboxing- en activeringsproces van de iPad Air 2.

        P.S. Ik kan me de storm van kritiek die op Microsoft nederdaalde nog goed herinneren, toen bleek dat van de beloofde 32GB op de Surface tablet slechts 16GB beschikbaar was voor het installeren van apps (november 2012). Apple fanboys riepen huilend van verontwaardiging de hulp van advocaten en class action-specialisten in om alle ‘benadeelden’ te compenseren.

        Bij toeval wierp ik nu echter even een blik op de hoeveelheid ruimte die op mijn ‘16GB’ iPad Air beschikbaar is, direct na installatie. Wat blijkt? Slechts ruim 5 GB (!) vrije ruimte. Op een totaal van 11,7?

        Dat betekent dus dat minder dan 35% van de geadverteerde ruimte ook daadwerkelijk gebruikt kan worden. Help me even herinneren; waar heb ik ook al weer al die verontwaardigde blogposts hierover gelezen?……crickets……

        iPad_air_storage

        Maar verder is het een mooi ding.

        -- Peter Kassenaar
        19 november 2014