Alle berichten van Peter Kassenaar

Handboek JavaScript en jQuery

Het zal niemand in de webdevelopment wereld zijn ontgaan. JavaScript is de laatste jaren in sneltreinvaart geëvolueerd. Lange tijd was het 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.

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().
Lees verder Handboek JavaScript en jQuery

Programmeren voor het web: alles over JavaScript

Of je nu net van school komt of al jaren meedraait in de webdevelopercultuur, het zal je niet verbazen dat je continu nieuwe dingen moet blijven leren om je kennis up-to-date te houden. Het is niet meer voldoende om een eenvoudige website te kunnen maken met HTML en CSS. Werkgevers vragen ook om interactiviteit in die website. En dan is JavaScript je enige keuze!  Wil je nu alles over JavaScript leren? Dan is er een bundel van drie boeken over JavaScript die je nu voor een speciale bundelprijs kunt aanschaffen! De boeken JavaScript, EcmaScript en TypeScript, en Node.js schaf je nu samen aan voor €49,99, een korting van bijna €38,-!
(Foto hierboven: Irvan Smith on Unsplash.)

Als backend programmeur kun je kiezen uit tal van programmeertalen en technieken: Java, .NET, PHP, Python, of talloze andere. In de wereld van frontend webdevelopment heb je eigenlijk maar één keuze: JavaScript. Immers, dat is de enige programmeertaal die de browser begrijpt. Maar het JavaScript-landschap is de laatste jaren enorm uitgebreid. Er zijn letterlijk honderden bibliotheken en frameworks beschikbaar. Waar moet je beginnen? Als je googelt op ‘JavaScript’ vindt je miljoenen pagina’s met informatie. Zelfs als je het trefwoord ‘beginnners’ of ‘tutorial’ er aan toevoegt, blijven er nog tienduizenden hits over.
Lees verder Programmeren voor het web: alles over JavaScript

Waarom ik heb gekozen voor een Surface Laptop 3…

Waarom ik heb gekozen voor een Surface Laptop 3 en niet voor een Macbook Pro…

TLDR; Ik had graag een nieuwe MacBook willen kopen. Maar Apple heeft de slag om de developer verloren, zowel qua hardware als qua software. Redenen hiervoor zijn de verplichte – maar totaal overbodige – Touch Bar, beperkte configuratiemogelijkheden, toetsenbordkwaliteit, Apple ecosysteem lock-in, geen magnetische stroomvoorziening, de afwezigheid van een touchscreen en de mogelijkheid om (makkelijk) een Linux distributie te installeren. Om over de prijs van het geheel nog maar te zwijgen. Ik heb daarom gekozen voor een Surface Laptop 3, die voor minder dan 70% van de prijs, een betere uitrusting en performance biedt.

Apple sinds 1998

Ik gebruik Apple-hardware sinds 1998. Mijn eerste Apple-product was de originele iMac uit dat jaar. Sinds 2008 werk ik onderweg met een 15-inch MacBook Pro laptop. Mijn huidige MacBook uit 2013 is verreweg de fijnste laptop waarmee ik in 25 jaar gewerkt heb. Ook naar huidige maatstaven is hij nog snel met zijn i7-processor, heeft hij een degelijke SSD-vaste schijf van 256 GB en vrijwel alle I/O-poorten die je als trainer en programmeur onderweg nodig hebt: HDMI, USB, en dongles voor netwerk en VGA.

De allereerste iMac.

Lees verder Waarom ik heb gekozen voor een Surface Laptop 3…

Lokaliseer uw programmacode rechtstreeks met JavaScript met de API Intl

JavaScript heeft lang de naam gehad weliswaar een krachtige taal te zijn, maar waarbij voor het serieuze werk toch aanvullende gereedschappen nodig zijn. Voor het manipuleren van webpagina’s was jQuery jarenlang de aangewezen tool. Voor het rekenen met datums en tijden en het omzetten van het lastige datumformaat van JavaScript naar leesbare tekst werd veelal de bibliotheek moment.js gebruikt. Dat is handig, maar betekent ook dat potentieel tientallen extra kilobytes voor het ondersteunen van allerlei talen wordt meegebundeld met uw applicatie. Maar dat hoeft nu niet meer dankzij de API Intl.

Er was al de website You might not need jQuery, de nieuwe specificaties van JavaScript voorzien tevens in een API die Intl heet (een afkorting voor ‘internationalization’), waarin de meest voorkomende handelingen voor het werken met datums, tijden, getallen en valuta zijn gebundeld.

De API Intl

In de nieuwste versies van Internet Explorer, Edge, Chrome en Firefox is de API Intl ingebakken en kan hij rechtstreeks vanuit JavaScript-code worden aangeroepen. Tip: wilt u weten of een bepaalde feature door uw favoriete browser wordt ondersteund, bezoek dan caniuse.com en typ de naam van de eigenschap. De website laat zien welke versies van de browser de gevraagde eigenschap ondersteunen (of niet). Lees verder Lokaliseer uw programmacode rechtstreeks met JavaScript met de API Intl

Vue.js – het nieuwe JavaScript-framework

In de webwereld is het frontend vakgebied een hot topic. Steeds meer bedrijven en organisaties kiezen ervoor hun frontend gescheiden te ontwikkelen van het backend. Zo kan het backend zich concentreren op authenticatie, API’s en datavoorziening, terwijl het frontend kan profiteren van compacte en lichtgewicht webapplicaties die op elke device draaien. Vaak wordt gekozen voor Angular of React als frontend framework, om niet telkens het wiel opnieuw te hoeven uitvinden. Maar sinds enige tijd is ook Vue.js een steeds vaker gekozen alternatief.

vue.js
De vue-homepage..

Vue.js is evenals React en Angular een frontend framework. Dit betekent dat in één geïntegreerde omgeving wordt voorzien in alle eisen waaraan een moderne webapplicatie moet voldoen. Denk aan zaken als webcomponenten, databinding, routing, state management en communicatie met het backend via http. Het gebruik van losse bibliotheken zoals jQuery, knockout, mobx (voor state management) en andere is vaak niet meer nodig. Alles is al beschikbaar in het framework. Het ene framework biedt out-of-the-box iets meer (Angular), het andere framework iets minder (React), maar daar staat dan weer meer keuzevrijheid tegenover. Vue.js biedt wat dat betreft een tussenweg. Er zijn standaard bibliotheken voor routing en state management, maar het is niet verplicht ze te gebruiken. Lees verder Vue.js – het nieuwe JavaScript-framework

Identificeer gebruikte webtechnologieën met Wappalyzer

In mijn vorige column over frameworks werd gesproken over de populaire JavaScript-frameworks React, Angular en VueJS. Hierin werd ook gezegd dat het voor de eindgebruiker eigenlijk niet uitmaakt welk framework wordt gebruikt. Als de website maar gebruikersvriendelijk en duidelijk is. Maar voor ons als developers kan het wel degelijk interessant zijn. Soms willen we gewoon graag eens bekijken hoe een bepaalde pagina werkt, welke lettertypen op een pagina zijn gebruikt, of er misschien een CMS is ingezet (en zo ja, welke?) en of gebruik wordt gemaakt van cloudopslag. Toegegeven, dat zijn allemaal nerdy zaken, maar als webontwikkeling je werk of je hobby is, is het toch interessant om te weten. Maar hoe kom je daar als developer nu eenvoudig achter? Met Wappalyzer!

Bron weergeven

Van oudsher hebben alle browsers de optie om de broncode van een pagina te tonen. Dit werkt via het menu, de sneltoets F12, of via de rechtermuisknop en de optie Bron Weergeven, Show Source of vergelijkbaar. Echter, moderne frameworks en CMS’en proberen de code te comprimeren en optimaliseren, zodat de website zo min mogelijk bandbreedte verbruikt en zo snel mogelijk te laden is. Zelfs een minimalistische pagina als Google.nl gebruikt deze techniek en is op deze wijze zo goed als onleesbaar (en in ieder geval onbruikbaar) voor de ontwikkelaar. Lees verder Identificeer gebruikte webtechnologieën met Wappalyzer

Front-end frameworks: keuze te over

Jarenlang bestond het vak van webdesigner uit het kunstig aan elkaar knopen van HTML- en CSS-pagina’s. Het was voldoende om de basiscommando’s te kennen en over enige designvaardigheden te beschikken. Voor animaties en al-dan-niet gehate ‘splash-pages’ was Adobe Flash de aangewezen tool. Als er lastig JavaScript geprogrammeerd moest worden, waren de bibliotheek jQuery en typische developersfora als stackoverflow.com meestal voldoende om de schijn op te houden dat u wist waar u mee bezig was. Tenminste, tot een jaar of vijf geleden… Nu heb je de keuze uit verschillende front-end frameworks: React, Angular en VueJS.

Front-end frameworks

Na het verschijnen van jQuery zat de populariteit van JavaScript duidelijk in de lift, terwijl de ooit populaire plug-ins Adobe Flash (en in het verlengde daarvan ook Microsoft Silverlight) een stille dood stierven doordat Steve Jobs ze eigenhandig van de iPad wist te weren. Alle inhoud van websites moest sinds ongeveer medio 2010 worden vormgegeven met de standaardtechnieken HTML, CSS en JavaScript. De rol van het programmeren van Flash- en Silverlight-applicaties werd overgenomen door JavaScript. Lees verder Front-end frameworks: keuze te over

Het web, 30 jaar later

Als u de internetberichtgeving iets aandachtiger dan normaal hebt gevolgd, dan zal het u niet ontgaan zijn. Deze week dertig jaar geleden, om precies te zijn op 12 maart 1989, deed de Engelsman Tim Berners-Lee, werkzaam bij kernonderzoeksinstituut CERN in Zwitserland een voorstel aan zijn meerdere waarvan hij nog niet kon bevroeden dat het de wereld zou veranderen. In een eenvoudig paper met de droge titel “Information Management” stelde hij een techniek voor waarmee wetenschappers informatie met elkaar konden uitwisselen om zo beter zicht te houden op hun steeds groter wordende projecten.

Enkele jaren later, rond 1991 was een systeem geboren dat hij WorldWideWeb noemde (alle woorden aan elkaar geschreven). Zeker, er waren al netwerken van talloze aan elkaar gekoppelde computers, universiteiten, wetenschappers en militairen hadden al jarenlang toegang tot e-mail, en zelfs de eerste emoji’s waren al geboren. Maar een manier om die informatie in de vorm van documenten en visueel met elkaar te delen bestond nog niet. De rest is geschiedenis, zoals dat zo mooi heet. Lees verder Het web, 30 jaar later

Microsoft Edge schakelt over naar de Chrome-engine en dat is een slecht teken…

We schrijven 1995. Microsoft viert grote triomfen met het zojuist gelanceerde Windows 95 dat samen met de succesvolle opvolgers als Windows XP en Windows 7 decennialang de bureaucomputer zal domineren. De opmars van het mobiele platform is de afgelopen jaren weliswaar onstuitbaar geweest, maar desktopcomputers zijn zakelijk en creatief gezien nog steeds een factor van belang. Ze vormen een niet te verwaarlozen marktaandeel. Volgens een recent rapport zat de verkoop van desktops, die nog steeds grotendeels voorzien zijn van het Windows-besturingssysteem, in 2018 voor het eerst sinds jaren weer in de lift (1). Toch pakten in 1995 donkere wolken zich samen aan de horizon. Microsoft dreigde namelijk de internetboot te missen.

Gesloten netwerken

Met de kennis van nu lijkt het een eenvoudig gegeven, maar in 1995 was het nog geen uitgemaakte zaak dat het open internet het ging maken. Er waren tal van consumentennetwerken actief, waarvan CompuServe en AOL de bekendste waren. Op deze netwerken konden gebruikers alleen gebruik maken van diensten die op dat platform werden aangeboden en communiceren met andere aanwezigen binnen hetzelfde netwerk. Een mailtje sturen van een CompuServe-gebruiker naar een AOL-abonnee zat er dus niet in. Microsoft, liefhebber van gesloten platformen, zag wel brood in dit model. Het ontwikkelde een eigen variant, het Microsoft Network of kortweg MSN. Dit zou de concurrentie wel wegvagen was het idee. Lees verder Microsoft Edge schakelt over naar de Chrome-engine en dat is een slecht teken…

Angular is koning

Elk tijdperk krijgt het framework dat het verdient

AngularAls je – zoals ik – al wat langer meeloopt in de wereld van frontenddevelopment, heb je allerlei trends voorbij zien komen. De complexiteit van systemen is enorm toegenomen. Tien jaar geleden waren bedrijven en organisaties tevreden met een site die hun zichtbaarheid op internet garandeerde. De huidige trend: Angular.

jQuery was koning, de websitemakers zijn onderdanen. Een website bestond uit tal van losse pagina’s, gekoppeld via een hoofdmenu met handige opties als Start, Contact, Over ons en Producten. Op een pagina kon de bezoeker het aanbod sorteren, filteren en had de webmaster (zo heette die rol destijds) wellicht wat animaties van de getoonde producten gerealiseerd. Bestellen? Geen probleem. Gebruik de koppeling naar het contactformulier, dat vervolgens – handmatig! – door de afdeling inkoop werd verwerkt. Lees verder Angular is koning