Categoriearchief: Web Development

Development, Interviews, JavaScript, Scripting, Software

Programmeren is een simpel kunstje en iedereen kan het leren!

Een reactie plaatsen

Het 100ste boek van Victor Peter is eind deze maand klaar: This is IT! – programmeren voor niet-programmeurs. We spraken met Victor over de inhoud van het boek en de noodzaak van programmeerkennis voor niet-programmeurs. Zijn motto: ‘Programmeren is een simpel kunstje en iedereen kan het leren!’

Wat wordt This is IT!- Programmeren voor niet-programmeurs voor boek? Volgens jou moet iedereen leren programmeren…
Victor Peters: ‘Dit boek is voor mij heel belangrijk. Dit boek gaat ergens over. Nu ja, elk boek gaat ergens over, maar dit boek heeft een maatschappelijk belang. Ik probeer jongeren aan hun verstand te peuteren dat programmeren niet iets is wat speciaal programmeurs doen. Dat is ook wat ik in mijn werk voor de hogeschool ook doe, studenten leren programmeren. Programmeren is niet iets waarvan je zegt: dat hoef ik niet te kunnen. Dat is net zo naïef als in de middeleeuwen zeggen: ik hoef niet te leren schrijven of lezen.’ Lees verder Programmeren is een simpel kunstje en iedereen kan het leren! →

Interviews, Web Development

Live schrijven aan Programmeren voor niet-programmeurs…

Een reactie plaatsen

Er zat een mailtje in de mailbox met de boodschap: Victor Peters schrijft live – online – zijn 100ste boek ‘Programmeren voor niet-programmeurs’. Kunnen we daar wat mee op het blog? Natuurlijk kunnen we daar wat mee! Live, online aan een boek schrijven is volgens mij nog nooit vertoond. Dus stoorden we Victor Peters even een half uurtje in zijn schrijfproces om over dat nieuwe boek te praten en natuurlijk hadden we de vraag: waarom live schrijven?

Victor Peters tijdens het Skype-gesprek voor deze blogpost.

Victor Peters: Ik had het al een paar jaar geleden bedacht. Iedereen deelt altijd alles op het internet, maar ik heb nog nooit iets gezien van live schrijven. Een vriend van mij publiceert veel, die blogt heel veel. Ik dacht bij hem: het zou heel grappig zijn als je mee kunt lezen met een schrijver. Er zijn duizenden schrijfcursussen en schrijfcoaches, maar meelezen met een schrijver, dat is nog nooit gedaan. Ik bekeek een heel nieuw platform voor webdevelopment – Flask gebaseerd op python – en ik wilde het eens uitproberen. Ik zocht er een projectje voor en toen dacht ik aan het live schrijven.’ 
Lees verder Live schrijven aan Programmeren voor niet-programmeurs… →

Web Development

Een grote update voor Flutter: Flutter 2.0

Een reactie plaatsen

Niet eerder was het mogelijk om op basis van één code volwaardige apps te maken voor mobiele apparaten, desktopcomputers en het web. Met Flutter 2.0 kan het wel!

De lancering van Flutter

Eind 2019 verscheen de eerste stabiele versie van Flutter. Sindsdien groeide het aantal gebruikers en toepassingen gestaag. Grote bedrijven als Sonos, Albert Heijn, Philips en Toyota gebruiken het voor consumentenapps. Talloze onafhankelijke ontwikkelaars en hobbyisten over de hele wereld maken in Flutter apps van uiteenlopende complexiteit. Lees verder Een grote update voor Flutter: Flutter 2.0 →

CSS, Web Development, Webdesign

Het boxmodel van CSS

Een reactie plaatsen

Alles wat je op een webpagina ziet is een box. Het boxmodel van CSS regelt de opbouw van boxen en de interactie tussen boxen. Weten hoe het boxmodel werk is onmisbare CSS-basiskennis.

Lees verder Het boxmodel van CSS →

SEO / SEA, Web Development

Hoe begin je met SEO?

Een reactie plaatsen

Deze blogpost is geschreven door Marieke van de Rakt, CEO van Yoast en is een vertaling van deze blogpost. Met enige regelmaat zullen er blogposts verschijnen over het belang van goede SEO en de optimalisatie hiervan. Komend najaar verschijnt er een boek over Yoast SEO getiteld ‘Zo werkt Yoast SEO’. Wil je op de hoogte worden gehouden van de verschijningsdatum van dit boek meld je dan HIER aan voor onze nieuwsbrief. Dit is de 2de blogpost in een serie over Search Engine Optimization ‘Hoe begin je met SEO?’ De 1ste in deze serie vind je HIER: ‘Wat is SEO?’. Bovenstaande illustratie: © Yoast. (H.F.)

Als je wilt dat mensen je online kunnen vinden, is het belangrijk dat je je site optimaliseert voor zoekmachines (search engine optimization, of SEO). Maar hoe begin je met SEO? In deze blogpost beschrijf ik de zeven stappen die je moet nemen om je SEO-strategie op gang te brengen.

Hoe begin je met SEO?

Als je een site hebt gemaakt, wil je dat mensen die kunnen vinden, zodat je jouw gedachten en ideeën met de wereld kunt delen. Wat moet je daarvoor doen? 

Stap 1: Installeer Yoast SEO

Heb je je site met behulp van WordPress gemaakt? Dan zou het installeren van de Yoast SEO-plugin de eerste stap van je SEO-strategie moeten zijn. De Yoast SEO-plugin helpt je ervoor te zorgen dat je website gevonden kan worden door zoekmachines als Google. De plugin lost automatisch een aantal technische SEO-problemen voor je op, gewoon door de plugin te installeren! Daarnaast helpt de Yoast SEO-plugin je om je website zo te bouwen dat zoekmachines je site begrijpen. Dat kan ervoor zorgen dat je hoger rankt in de zoekresultaten. De Yoast SEO-plugin is er in een gratis versie en een Premium versie. Als je net begint met SEO, heb je de Premium plugin waarschijnlijk nog niet nodig (hoewel de Premium plugin je wel wat tijd kan besparen). Lees verder Hoe begin je met SEO? →

CSS, HTML, JavaScript, Web Development, Webdesign

Maak een schakelaar met CSS en HTML

Een reactie plaatsen

Maak een schakelaar met CSS en HTML die er niet alleen als een schakelaar uitzien, maar die ook daadwerkelijk iets doet. Zo’n aan-uitschakelaar (toggle of switch) gebruik je bijvoorbeeld om je webformulier op te fruiten. Of je laat bezoekers van de website kiezen tussen een licht en een donker thema. Met een klein beetje JavaScript maak je een werkende themawisselaar van je schakelaar.

Het mooie is dat de basis van de schakelaar gewoon in je HTML-gereedschapskist zit: het element <input type="checkbox">. Het principe is dat je de in- en uitgeschakelde toestand van dit selectievakje gebruikt om de opmaak van de zelfgebouwde schakelaar te veranderen en om JavaScript-code te activeren. Het selectievakje zelf maak je onzichtbaar.

Het is een eenvoudig project en toch maak je kennis met een berg CSS-mogelijkheden. Op CodePen staat het resultaat en daarmee kun je vrijuit experimenteren.

See the Pen schakelaar by Peter Doolaard (@dool) on CodePen.dark

Lees verder Maak een schakelaar met CSS en HTML →

CSS, Web Development, Webdesign

Specificiteit in CSS, zo werkt het

Een reactie plaatsen

Specificiteit in CSS is een belangrijke oorzaak van selectors die niet doen wat jij wilt. Specificiteit gaat over hoe zwaar een selector telt en of een concurrerende selector sterk genoeg is om hem te overschrijven. De oplossing begint met begrijpen hoe specificiteit werkt. Een goede tweede is: houd de specificiteit van je selectors zo laag als kan en zo hoog als nodig is.

Lees verder Specificiteit in CSS, zo werkt het →

CSS, Web Development, Webdesign

Leer werken met nieuwe pseudoklassen van CSS

Een reactie plaatsen

Het assortiment selectors van CSS is uitgebreid. Leer werken met de nieuwe pseudoklassen :is(), :where() en :not(), maak kennis met :has() en controleer je focus met :focus-within en :focus-visible.

Voor een goed begrip van dit artikel is het handig als je weet wat specificiteit is. Kan je kennis een opfrisser gebruiken, lees dan ook het artikel Specificiteit in CSS, zo werkt het.

De pseudoklassen in het kort

Behalve :has() worden alle nieuwe pseudoklassen ondersteund door de belangrijke browser.

Tussen de haakjes van :is() en :where() zet je een lijst van selectors. Elke selector die overeenkomt met een element wordt opgemaakt. Alle soorten selectors en combinators zijn toegestaan. Foute selectors worden genegeerd, maar maken niet de complete selector ongeldig. Bij :is() is de specificiteit gelijk aan de selector met de hoogste specificiteit. Bij :where() is de specificiteit altijd 0.

Ook :not() krijgt een selectorlijst. Elementen die overeenkomen met een selector in de lijst worden juist niet opgemaakt. De specificiteit is gelijk aan de selector met de hoogste specificiteit.

:has() werkt als een ‘parent selector’. De selectorlijst is een voorwaarde, geen opmaakdoel. Het is erg onzeker of :has() daadwerkelijk wordt toegevoegd aan de specificatie.

:focus-within maakt het mogelijk om een voorouder op te maken van een element dat de focus kan krijgen.

:focus-visible laat de browser bepalen of het nodig is om de focusopmaak te tonen. Wel bij toetsenbordnavigatie, niet bij muisgebruik.

Lees verder Leer werken met nieuwe pseudoklassen van CSS →

HTML, Web Development, Webdesign

Emoji als favicon

Een reactie plaatsen

Sinds kort ondersteunen alle moderne browsers SVG als bestandsformaat voor favicons. Een bijwerking is dat je nu ook emoji’s als SVG-favicon kunt gebruiken. (Opfrisser: een favicon is het pictogram in een browsertab of op het homescreen van je telefoon.) Nou is een emoji in de browsertab niet een heel serieuze toepassing.  De echte winst is dat je met SVG eenvoudiger mooie favicons kunt maken.

Browsertab met emoji als favicon.
De emoji als favicon in Firefox op Windows.

Lees verder Emoji als favicon →

Web Development, Webdesign

Vue.js – lichtgewicht framework voor moderne websites

Een reactie plaatsen

De tijd dat een website op een regenachtige zondagmiddag met HTML, CSS en JavaScript in elkaar werd gezet is voorbij. Moderne websites worden tegenwoordig vaak gemaakt met behulp van een framework. Vue.js (of kortweg ‘Vue’) is zo’n lichtgewicht framework voor moderne websites!

Evenals de meer bekende varianten React en Angular, is Vue een framework dat voorziet in alle eisen waaraan een moderne webapplicatie moet voldoen. Denk aan zaken als webcomponenten, databinding, routing, state management en communicatie met het database via http. Het voordeel van Vue is echter dat het een veel eenvoudiger syntaxis en structuur kent dan de andere frameworks. Het is daarom sneller te leren. De Vue-leercurve is een stuk minder steil dan bij Angular of React. Al in enkele dagen kun je als programmeur het raamwerk van een complete, complexe applicatie in elkaar zetten. De Vue-praktijk sluit nauw aan bij wat webdevelopers gewend zijn, maar is eveneens eenvoudig te leren voor ervaren Java- of C#-programmeurs.

Websites in Vue bestaan niet meer uit losse pagina’s, maar uit kleine, gespecialiseerde componenten die tezamen de applicatie vormen. Elke component heeft dezelfde, eenvoudig te begrijpen structuur. Lees verder Vue.js – lichtgewicht framework voor moderne websites →