Categoriearchief: Web Development

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 →

SEO / SEA, Web Development

Wat is Search Engine Optimization, ofwel wat is 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 eerste blogpost in een serie over Search Engine Optimization: Wat is SEO? Bovenstaande illustratie: © Yoast. (H.F.)

Alles gebeurt tegenwoordig online. Daarom heb je misschien besloten om een website voor je bedrijf of organisatie op te zetten, of je om je bestaande website nieuw leven in te blazen. Bij het zoeken naar tips kom je de term ‘SEO’ steeds weer tegen, maar waar staat dat voor? In deze blogpost leggen we uit wat het betekent en hoe je het het beste kunt aanpakken!

Wat is SEO?

SEO staat voor ‘search engine optimization’. Kort gezegd gaat SEO om het optimaliseren van je webpagina’s, met als doel om een hoge positie te verkrijgen in de zoekresultaten van Google of andere zoekmachines. SEO richt zich op het verbeteren van de positie in de organische – oftewel de niet-betaalde – zoekresultaten. Heb je een website en wil je meer bezoekers trekken? Dan moet SEO een onderdeel zijn van je marketingstrategie.

Google’s algoritme

De positie in de zoekresultaten, ook wel de ranking genoemd, wordt bepaald door het algoritme van Google. En hoewel het algoritme van Google geheim is, hebben we door jarenlange ervaring met SEO een redelijk goed beeld van de belangrijke rankingfactoren. De factoren in het algoritme van Google kunnen in onze ogen worden onderverdeeld in twee categorieën: on-page en off-page factoren.

Lees verder Wat is Search Engine Optimization, ofwel wat is SEO? →

Android, Besturingssystemen, Tips & Trucs, Web Development

De 10 meest gestelde vragen over Flutter

Een reactie plaatsen

Als u programmeert in welke taal dan ook of overweegt daarmee te beginnen, dan heeft u vast van Flutter gehoord. Het relatief nieuwe systeem van Google zou het Zwitsers zakmes onder de ontwikkelplatformen moeten worden: geschikt voor elk platform en elk type applicatie. Maar wat is het nu echt? Hieronder vind je de antwoorden op de 10 meest gestelde vragen over Flutter.

1. Wat is Flutter?
Flutter is een systeem voor het ontwikkelen van apps voor meerdere platformen. De apps maak je in de programmeertaal Dart. Je kunt daarbij verschillende programmeeromgevingen gebruiken, zoals Android Studio, IntelliJ IDEA of Visual Studio Code. Ik adviseer Android Studio omdat het gratis is en veel specifieke Flutter-functies biedt.

2. Waarom heet Flutter zo?
In het Nederlands is de naam wat ongelukkig. Medici duiden met het woord een hartritmestoornis aan. De naam begint met ‘flut’. Dat is geen goed begin. Engelstaligen hebben deze associatie niet. To flutter, betekent fladderen, zoals van een vlinder. Wellicht is het een verwijzing naar de hoge snelheid waarmee Flutter het scherm vernieuwt: 60 keer per seconde, even snel als de vleugelslag van veel vlinders.
Lees verder De 10 meest gestelde vragen over Flutter →