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.

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

12juli

New online course: Productive Coding with WebStorm

I’m happy to announce that as of today, my new course “Productive Coding with WebStorm” is available on the online training platform Udemy.

Order now with a 30% discount!

JetBrains WebStorm is the perfect editor for web developers. It is a full featured IDE that provides all the tools and features for developers in JavaScript, Typescript, NodeJS and of course HTML and CSS.

This brief training will show you how to best use WebStorm to be as productive as possible. You will learn many useful tricks to work faster. You'll see all the possibilities to customize the user interface, using keyboard shortcuts and write your code superfast by creating and using Live Templates. Also you'll learn how WebStorm supports your workflow and lets you use tools like Gulp, NPM or Github, all without leaving your editor!

The course is specifically intended for WebStorm, but is also extremely valuable for users of other JetBrains editors like IntelliJ, PHPStorm, PyCharm and others.

jetbrains-editors

This course covers the following topics:

  • Welcome and introduction
  • Downloading and installing WebStorm
  • Touring the IDE and setting up your working environment
  • Adapting the UI to meet your personal needs
  • Coding faster in JavaScript, TypeScript, HTML and CSS
  • Using build- and workflow tools right from the IDE
  • Git- and Github integration
  • Testing your RESTful Services with the REST Client
  • Adding and deleting plugins
  • Other tips and tricks

If you have any questions on this course, feel free to contact me.

Order now with a 30% discount!

Peter Kassenaar
-- 12 July 2016

12juni

Angular 2 – leren en begrijpen

Al eerder schreef ik over de online training Angular 2 – Leren en begrijpen die ik aan het ontwikkelen ben. Het doet me plezier te kunnen melden dat deze training nu gereed is en is goedgekeurd door het online trainingsplatform Udemy. De training is vanaf vandaag te vinden op:

https://www.udemy.com/angular-2-leren-en-begrijpen/

angular2-bij-udemy

De training heeft onder meer de volgende kenmerken:

  • Videotraining – beschikbaar op pc, laptop, smartphone en tablet, via de Udemy App.
  • 90+ video’s en 5,5 uur videomateriaal.
  • Korte lessen (4-6 minuten), met telkens één onderwerp.
  • Oefeningen in PDF-formaat zodat je zelf aan de slag kunt met Angular 2.
  • Talloze extra resources en webadressen voor meer informatie.

Zie https://www.udemy.com/angular-2-leren-en-begrijpen/ (verder naar beneden, onder Curriculum) voor een complete inhoudsopgave:

Inhoudsopgave van Angular 2 - Leren en begrijpen

 

Als je specifieke vragen hebt over de training, tips voor verbetering van de inhoud of voor nieuwe trainingen, aarzel dan niet om contact op te nemen of een mailtje te sturen naar info@kassenaar.com!

Experiment

Het is ook voor mij een experiment, om te bekijken of hier in het Nederlandse en Belgische taalgebied voldoende animo voor is. Udemy is een platform dat op dit moment voornamelijk Engelstalige trainingen aanbied (op dit moment kon ik 14 andere Nederlandstalige trainingen ontdekken). Het heeft echter wel ambities om ook een belangrijke rol in andere markten te gaan spelen. Er zijn onder meer al Spaanse, Duitse en Chinese varianten.

Kortingscode

Als je al eerder een kortingscode hebt aangevraagd, dan heb je hierover inmiddels een mailtje ontvangen. Wil je alsnog aanmelden voor een kortingscode voor vroege vogels, dan kan dit nog tot 1 augustus 2016. Stuur een mailtje naar info@kassenaar.com met als onderwerp Udemy – Angular 2 en ik mail je terug met een code en instructies om deze in te wisselen.

Ik ben benieuwd naar jullie reacties,

Ondertussen veel succes met Angular 2!

--Peter Kassenaar
12 juni 2016

 

02juni

Online training Angular 2 – update

angular2-leren-begrijpen-promo-image

Op dit moment ben ik bezig met de ontwikkeling van de training “Angular 2 – leren en begrijpen”. Deze zal worden gepubliceerd op het online learningplatform Udemy.

Het was de bedoeling dat deze training medio mei 2016 zou verschijnen. Dat is helaas niet gelukt.

Ik ben er druk mee bezig, maar het opnemen en bewerken van de video’s duurt in combinatie met mijn overige werk langer dan ik vooraf had ingeschat.

Bovendien is het framework zelf zoals je wellicht hebt gezien nog druk in ontwikkeling. Met name de Router is de afgelopen weken flink onder handen genomen. De oorspronkelijke router is nu als ‘deprecated’ aangemerkt – terwijl de nieuwe router nog niet gereed is. (https://angular.io/docs/ts/latest/guide/router-deprecated.html) . Zowel de router zelf, als de documentatie hierover is nog niet klaar.

Het is daarom een lastige beslissing: Maak ik de module over routing (waar ik juist mee bezig was) op basis van de nu verouderde router, of ga ik toch alvast de nieuwe router gebruiken (die dus nog niet klaar is)?

Keuzes, keuzes ;-)

Ik heb toch besloten de bestaande routermodule opnieuw te gaan maken, met de nieuwe router, en de onderdelen die op het moment van opnemen nog niet gereed zijn aan te geven. Zodra de router wel klaar is, hoop ik vervolgens op een later tijdstip de training aan te vullen.

Dat betekende helaas echter wel weer een nieuwe vertraging.

De vernieuwde planning is dat de training Angular 2 over ongeveer 2 – 2,5 weken klaar is, medio juni 2016.

Mocht je ondertussen vragen hebben, aarzel dan niet om nader contact op te nemen.

Uiteraard kun je je nog altijd aanmelden voor een kortingscode.

Stay tuned, bedankt voor je geduld!

-- Peter Kassenaar
2 juni 2016

26april

Web Development Library–Angular 2

Web Development Library - Angular 2

Deze week is Web Development Library – Angular 2 verschenen. Angular 2 is een modern framework voor webdevelopment en is de opvolger van AngularJS. Maar behalve de naam is er maar weinig dat de twee frameworks met elkaar gemeen hebben. Angular 2 heeft een totaal nieuwe syntaxis en benadering voor zowel de front-endcode (in de templates en HTML) als de logica. Er wordt nu gewerkt met ECMAScript 2015-classes in plaats van JavaScript-functies.

Angular 2 is dan ook geen eenvoudig framework om te leren. Deze uitgave helpt u daarbij!

Specficaties

  • Boek, paperback, 240 pagina’s.
  • ISBN-13: 978-90-5940-868-5 (9789059408685)
  • Geschikt voor opleidingen en zelfstudie
  • Onafhankelijk van gebruikte platform en browser
  • Prijs: EUR 29,95

Van de flaptekst

“In dit deel van de Web Development Library leert u werken met de nieuwe, op componenten gebaseerde manier om webapplicaties te programmeren. U maakt kennis met de vernieuwde wijze van databinding, services, observables, routing en andere belangrijke Angular 2-concepten. Aan het einde gaan we kort in op het upgraden van AngularJS 1.x-applicaties naar Angular 2. Daarnaast leert u werken met bijkomende tools en programmeertalen zoals Node.js, TypeScript en ECMAScript 2015.

Tot de behandelde onderwerpen behoren:

  • Kennismaken met Angular 2
  • Hello World in Angular 2 – uw eerste component
  • Databinding op allerlei manieren
  • Datavoorziening met services
  • Asynchrone services – gegevens ophalen uit databases
  • Angular-applicaties als boomstructuur van componenten
  • Routing
  • Meer over Angular 2 – pipes, formulieren en upgraden

Meer informatie en downloads zijn te vinden op www.webdevelopmentlibrary.nl.”

Direct bestellen

Peter Kassenaar
-- 26 april 2016