Skip links en inhoudsopgave Home
Sitemap

Pagina met (voornamelijk externe) links

Op de meeste sites is (vrijwel) gratis. Soms gelden er voorwaarden. Tenzij anders vermeld, zijn de sites Engelstalig. Nederlandstalige en Vlaamstalige sites zijn ook te herkennen aan het vlaggetje (met excuses aan de Vlamingen voor het gemakshalve even annexeren van Vlaanderen):

Er wordt op deze pagina vaak gelinkt naar artikelen op Mozilla. Veel van deze artikelen zijn in het Nederlands vertaald, maar vaak nog (heel) onvolledig. De nog niet vertaalde delen ontbreken dan vaak gewoon, zonder dat dit wordt gemeld. Dit maakt de Nederlandse vertalingen helaas volledig onbetrouwbaar, omdat je niet weet, wanneer er eventueel iets ontbreekt. Daarom wordt op deze pagina naar de Engelse artikelen gelinkt en niet naar de Nederlandse. Als je toch de Nederlandse vertaling wilt lezen, vervang dan in het adres 'en-US' door 'nl'.

Afgelopen maand toegevoegde, gewijzigde en verwijderde links

13 december WebGL nieuw: link naar tutorial op alain.xyz.

13 december CSS → Overzicht eigenschappen (properties), cursussen, tips, en dergelijke nieuw: twee links naar w3.org met overzichten van alle eigenschappen en descriptors.

10 december HTML → Formulieren, <input>, en dergelijke nieuw: link naar adamsilver.io met tutorial over formulieren en toegankelijkheid.

9 december Toegankelijkheid → Artikelen, tutorials, links, en dergelijke → Algemeen nieuw: link naar tutorial op dev.to/addyosmani

8 december HTML → Charsets, unicode, entiteiten → Sets met tekens, entiteiten, en dergelijke verwijderd: link naar babelstone.co.uk met slideshow met unicode-tekens. Pagina bestaat kennelijk niet meer.

8 december Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen → Algemeen verwijderd: link naar opendevicelab.com met plaatsen waar je sites kunt testen. Al maanden kan niets worden opgezocht.

5 december: Nieuwsbrieven, nieuwssites, en dergelijke nieuw: link naar ongeveer tiendaagse nieuwsbrief over typografie van rwt.io.

5 december CSS → Fonts en typografie → Variabele fonts nieuw: link naar 24ways.org met uitgebreide uitleg over de werking van variabele fonts.

28 november: SQL hernoemd naar SQL, NoSQL, databases, en dergelijke.

28 november: Nieuwsbrieven, nieuwssites, en dergelijke nieuw: links naar wekelijkse nieuwsbrieven van dbweekly.com over databases, van nodeweekly.com over node.js, van nosqlweekly.com over NoSQL en van postgresweekly.com over PostgreSQL.

26 november Toegankelijkheid → Contrast en Toegankelijkheid → Kleurenblindheid samengevoegd tot Toegankelijkheid → Contrast en kleurenblindheid.

26 november Toegankelijkheid → WCAG en WAI-ARIA nieuw: link naar de.ryerson.ca met cursus WAI-ARIA in boekvorm.

26 november Toegankelijkheid → Artikelen, tutorials, links, en dergelijke nieuw: link naar de.ryerson.ca met cursus hoe te testen op toegankelijkheid in boekvorm.

26 november Toegankelijkheid → Schermlezers → Algemeen nieuw: link naar axesslab.com met tutorial over het gebruik van schermlezers.

24 november JavaScript, DOM en CSSOM → Tutorials, voorbeelden verwijderd: link naar es6-features.org met overzicht van verschillen tussen ECMA-Script 5 en 6. Versie 6 is inmiddels zelf al wat verouderd...

17 november JavaScript, DOM en CSSOM → Scripts, bibliotheken en frameworks verwijderd: link naar JavaScript InfoVis Toolkit op philogb.github.io. Wordt kennelijk niet meer bijgwerkt. Idem link naar prototypejs.org.

15 november CSSLogical properties nieuw: link naar uitleg op adrianroselli.com.

15 november: nieuwe categorie: CSSLogical properties.

Achtergronden, animaties, knoppen, pijlen, iconen, foto's, en dergelijke

Webfonts (ook webfonts die bestaan uit iconen) zie CSS → Fonts en typografie → Webfonts (om te downloaden).

Afbeeldingen optimaliseren zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren (inclusief theorie).

'Lazy loading' zie CSS → Media Query's en Responsive Web Design → Images (inclusief 'lazy loading'' en niet-css-methoden zoals SVG, <picture> en <img>).

De hieronder staande sites bevatten (voornamelijk) gratis materiaal. Maar dat geldt niet voor álles op élke site. Bovendien kunnen voorwaarden veranderen. Als je materiaal gebruikt in strijd met een licentie of zonder rekening te houden met copyright, kan dat tot schadeclaims van duizenden euro's leiden. Oók als je het gebruikte materiaal gelijk verwijdert, nadat het is ontdekt! Controleer áltijd of het materiaal echt volledig vrij en gratis gebruikt mag worden. Als je een zoekmachine of verzamelsite gebruikt, controleer dan altijd de licentie op de originele site. En 'royalty free' hoeft niet te betekenen dat het gratis is: het kan ook betekenen dat je slechts één keer moet betalen en niet opnieuw voor elke publicatie.

Bij de laatste controle van dit soort sites bleken twee sites plotseling hun licentie fors gewijzigd te hebben. Het is dus echt belangrijk dat je zelf de voorwaarden voor gebruik leest, want deze kunnen inmiddels zijn gewijzigd.

Sites in de categorieën animaties, clipart en foto's zijn meestal ingedeeld in categoriën. Alleen als dat niet zo is, wordt dat vermeld.

Hieronder staat slechts een heel kleine selectie van wat er op internet is te vinden, vooral grotere sites. Toch zijn dit al zoveel sites dat het wat onoverzichtelijk wordt. Indelen in soorten materiaal gaat niet, omdat veel sites meerdere soorten aanbieden. Daarom kun je hieronder aanvinken, wat je zoekt. Alleen de sites met dat soort materiaal worden dan getoond. Als je 'Alles' uitvinkt, kun je kiezen, wat je wilt zien.

akveo.github.io/eva-icons
Ruim 500 iconen over computers in png- en svg-formaat.

animaatjes.nl
Achtergronden, foto's, tekeningen, animaties, lijnen, alfabetten, cursors, smileys, clipart, enzovoort. Nederlandstalig.

animatedgif.net
Animaties.

animatieplaatjes.nl
Gigantische verzameling animaties. Nederlandstalig

annasanimaties.com
Animaties. Nederlandstalig.

backgroundlabs.com
Achtergronden.

bbcsfx.acropolis.org.uk
Meer dan 16.000 geluidseffecten. Doorzoekbaar op trefwoord.

bensound.com
Creative commons-muziek. Ingedeeld in genre.

bestanimations.com
Animaties.

bluevertigo.com.ar
Links naar onder andere sites met (gratis) achtergronden, foto's, clipart, video's, geluid en iconen.

burst.shopify.com
Vrij te gebruiken en Creative Commons-foto's.

buttonland.com
Knoppen.

clipartsalbum.com
Clipart. Nederlandstalig.

clipcanvas.com
Achtergrondvideo's, waarvan een deel gratis is. Doorzoekbaar op trefwoord.

clker.com
Royalty free public domain clipart en foto's.

colourlovers.com/patterns
Achtergronden.

commons.wikimedia.org/wiki/Main_Page
Public domain en Creative Commons foto's, geluiden, video's, animaties, en dergelijke. Rechts op de pagina staan links naar de diverse categorieën.
Enorme lijst met links naar sites met publiek domein foto's en afbeeldingen, ingedeeld naar onderwerp.

coverr.co
Vrij te gebruiken video's. Ingedeeld in categorieën.

cursors-4u.com
Gratis cursors.

demooisteanimaties.com/images
Animaties. Nederlandstalig.

everystockphoto.com
Foto's. Als je op 'advanced search' klikt, kun je ook zoeken op dingen als licentie.

flickr.com/creativecommons
Foto's, waarvan veel onder een Creative Commons-licentie vallen. Doorzoekbaar op trefwoord.

foodiesfeed.com
Foto's van voedsel onder Creative Commons-licentie.

freemusicarchive.org
Complete nummers, waarvan veel onder een Creative Commons-licentie vallen. Ingedeeld in genre.

freesfx.co.uk
Duizenden geluiden, gratis te gebruiken. Ingedeeld in categorieën.

freesound.org
Héél veel geluiden onder een Creative Commons-licentie. Je kunt zoeken op tag.

freewebsitebuttons.com
Knoppen met (onder andere) Nederlandse tekst.

game-icons.net
Iconen voor spelletjes.

graphicburger.com
Grote hoeveelheid gratis sets met iconen en gratis achtergronden.

grsites.com/archive/textures
Achtergronden, gesorteerd op kleur en/of onderwerp.

heropatterns.com
SVG-achtergronden. Het basispatroon (en de bijbehorende code) kan online worden aangepast.

i2clipart.com
Publiek domein clipart.

iconarchive.com
Iconen. Wisselende licenties, commercieel gebruik vaak niet toegestaan.

iconbros.com
Vrij te gebruiken iconen.

iconfinder.com
Iconen. Je kunt filteren op gratis iconen.

iconspedia.com
Iconen.

ikonate.com
Groot aantal makkelijk aan te passen iconen in svg-formaat.

imageafter.com
Foto's.

images.google.com
Zoekmachine voor afbeeldingen. Als je na het zoeken op Tools klikt, kun je onder andere op Gebruiksrechten (licentie) zoeken.

incredibleart.org/links/clipart
Grote lijst met links naar (gratis) clipart en foto's.

isorepublic.com
Foto's en video's onder een Creative Commons-licentie.

kaboompics.com
Vrij te gebruiken foto's. Doorzoekbaar op trefwoord.

librestock.com
Zoekmachine voor publiek domein foto' s.

lifeofvids.com
Vrij te gebruiken video's. Doorzoekbaar op trefwoord.

linkli.st/optimiseordie/9BJvY
Lijst met links naar gratis foto's.

nl.freeimages.com
Foto's. Naast de indeling in categorieën kun je heel gedetailleerd zoeken. Gedeeltelijk Nederlandstalig.

lpc.opengameart.org
Groot aantal sprites en andere afbeeldingen, geschikt om beweging te simuleren. Veel sprites zijn in het .xcf-formaat en kunnnen dus in Gimp worden bewerkt. (De eigenlijke pagina met de sprites is te vinden op lpc-art-entries.)

material.io/resources/icons
Iconen met allerlei symbolen voor apps, computer, en dergelijke. In verschillende formaten.

nuope.com/essentials/thou-shalt-not-steal-free-music-for-your-videos-and-websites
Lijst met links naar sites met gratis muziek.

openphoto.net/gallery/browse
Foto's. Controleer de licentie bij de betreffende foto.

open-video.org
Gratis video's. (Er wordt wel aangeraden de licentie te controleren bij de betreffende video.)

pdclipart.org (Public Domain Clip Art)
Publiek domein clipart.

pexels.com
Foto's onder een Creative Commons-licentie. (Video's zeer goed verstopt onder 'n kleine knop rechtsboven.) Doorzoekbaar op trefwoord.

picjumbo.com
Gratis foto's.

pixabay.com
Publiek domein foto's, clipart en video's.

reinerstilesets.de
Geluiden, achtergronden en afbeeldingen. De afbeeldingen kunnen worden samengevoegd tot sprites, waarmee beweging kan worden gesimuleerd.

rw-designer.com/cursor-library
Cursors, waarvan veel vrij gebruikt kunnen worden.

search.creativecommons.org
Zoekmachine voor afbeeldingen en dergelijke die onder een Creative Commons-licentie vallen.

silhouette-ac.com/en
52.000 (niet nageteld...) vrij te gebruiken zwart-wit silhouetten als afbeelding of svg-bestand.

silscreations.blogspot.com
Heel aparte achtergronden. Ze zijn bedoeld voor 'n blog, maar kunnen ook prima op 'n gewone pagina worden gebruikt. Nederlandstalig.

sitebuilderreport.com/stock-up
Vrij te gebruiken foto's onder een Creative Commons-licentie en een soort Public Domain-licentie. Doorzoekbaar op trefwoord.

smashingmagazine.com/2008/09/the-hr-contest-results-download-your-fresh-hr-line-now
Horizontale lijnen.

smashingmagazine.com/2010.04/the-ultimate-free-web-designer-s-icon-set-750-icons-incl-psd-sources
Set met 750 iconen voor webdesign. Bevat onder andere iconen voor toetsen, sociale media (volgens mij asociale, maar goed), vlaggen en computersymbolen.

soundjay.com
Gratis te gebruiken geluiden. Ingedeeld in categorieën.

stocksnap.io
Foto's onder een Creative Commons-licentie.

stockvault.net
Grote hoeveelheid foto's onder verschillende Creative Commons- en soortgelijke licenties. Doorzoekbaar op trefwoord.

thenounproject.com
Iconen, waarvan veel onder een Creative Commons-licentie vallen.

thepatternlibrary.com
Gratis achtergronden. De meeste zijn zo weerzinwekkend lelijk, dat ze juist daardoor interessant worden.

theshockzone.com
Animaties, achtergronden, clipart, iconen.

unsplash.com
Gratis foto's.

videvo.net
Video's. Zoeken per categorie of met trefwoord. Nadat je hebt gezocht, kun je filteren op de licentie (niet alles is gratis).

vidsplay.com
Gratis video's. Ingedeeld in categorieën.

visualhunt.com
Gratis foto's.

widgetworx.com/projects/sl
Zip met aantal sprites, toegespitst op spelletjes. Met behulp van sommige sprites kan beweging worden gesimuleerd.

wpclipart.com/browse
Publiek domein clipart.

Bezoekersteller en dergelijke

Statistieken browsergebruik, besturingssystemen, en dergelijke zie Statistieken browsergebruik, besturingssystemen, en dergelijke.

Niet elke teller wordt uit vriendelijkheid gratis ter beschikking gesteld. Sommige helpen (actief) bij de verspreiding van malware en andere ellende. Lees eerst Hoe krijg ik een gratis bezoekersteller zonder pop-ups, malware, enzovoort?

Er staan hier geen links meer naar gratis bezoekerstellers, omdat er geen sites meer zijn met links naar betrouwbare tellers. Je zult zelf op internet moeten zoeken, maar lees vooral eerst bovenstaand artikel, want voor je het weet, haal je je echt heel veel ellende op je nek met een gratis teller.

matomo.org
(Voorheen Piwik). Open source alternatief voor Google Analytics. De verzamelde data gaan niet naar Google, maar blijven eigendom van de site, waar ze verzameld worden. Dat is geen garantie voor privacy, want ook de site kan data verkopen, maar het biedt in ieder geval de mogelijkheid voor (meer) privacy.

CSS

Animation, transform en transition

(Onderafdeling van CSS)

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

Canvas, CSS, WebGL, SVG of ...? staat bij SVG.

SVG animeren met behulp van css staat bij SVG.

Animatie met behulp van JavaScript staat bij JavaScript, DOM en CSSOM → Tutorials, voorbeelden.

CSSOM staat bij JavaScript → CSSOM (CSS Object Model).

3dtransforms.desandro.com
Uiterst duidelijke tutorial over 3D transforms. Bij de voorbeelden kan de code vaak worden gewijzigd, zodat je gelijk het effect van een wijziging ziet.

canianimate.com
Opzoeken welke css-eigenschappen geanimeerd kunnen worden, met links naar meer uitleg.

css-animations.io
Online interactieve cursus animation met opgaven. Het resultaat van de opgaven is gelijk zichtbaar.

css-transformlmoro.ess
Maakt de verschillendeeigenschappen van transform zichtbaar. Zodra je een eigenschap wijzigt, zie je direct het effect daarvan. Uiterst handig om een visuele voorstelling van een effect te krijgen.

css-tricks.com/css-animation-tricks
Code voor en (heel beknopte) uitleg van enkele zeer knappe animaties.

css-tricks.com/reversing-an-easing-curve
Gedetailleerd voorbeeld hoe je 'n cubic-bezier functie kunt aanpassen.

designmodo.com/steps-css-animations
Uitgebreid artikel met demo's over het gebruik van steps() bij animation.

developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Lijst van eigenschappen die met behulp van transition zijn te veranderen.

developers.google.com/web/fundamentals/design-and-ux/animations
Uitgebreide tutorial over het maken van animaties.

easings.net
Enkele tientallen werkende voorbeelden van de cubic-bezier functie, inclusief code.

github.com/cssanimation/css-animation-101
Uitgebreide tutorial over alle vormen van css-animaties in de vorm van een boek (online, ePub of PDF.)

heartinternet.uk/blog/should-you-use-css-of-javascript-for-web-animations
Artikel over wanneer css en wanneer JavaScript beter is voor animaties.

html5rocks.com/en/tutorials/speed/high-performance/animations
Uitleg welke invloed het gebruik van transform bij verschillende eigenschappen op de snelheid heeft.

learn.shayhowe.com/advanced-html-css/transitions-animations
Uitgebreide tutorial over transition en animation, met voorbeelden.

sitepoint.com/how-to-get-started-with-css-animation
Uitgebreide tutorial over animation.

smashingmagazine.com/2014/04/understanding-css-timing-functions
Uitgebreide uitleg over functies die de snelheid van animaties en dergelijke regelen.

thewebrocks.com/demos/3D-css-tester
Demo van transform en bijbehorende eigenschappen, zoals backface-visibility. De waarden kunnen online worden veranderd, waardoor je duidelijk kunt zien, wat de werking van bepaalde eigenschappen en waarden is.

useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms
Technieken om fonts die in sommige browsers bij draaien blokkerig worden weer mooi rond te krijgen.

viget.com/articles/animation-performance-101-browser-under-the-hood
Uitleg over hoe de browser animaties verwerkt en hoe je daar op de beste manier gebruik van kunt maken.

webdesignerwall.com/tutorials/esay-css-animation-using-keyframes
Duidelijke stap-voor-stap-tutorial over animation, met voorbeelden.

Background, background-image en sprites

(Onderafdeling van CSS)

Online sprite maken zie Gereedschap → Sprite maken.

Gradiënts zie CSS → Gradiënts.

background-blend-mode zie CSSCompositing, filters en blending.

Artikelen en dergelijke die zich speciaal richten op mobiele browsers en dergelijke zie CSS → Media query's en Responsive Web Design.

creativebloq.com/css3/take-advantage-css-background-size-property
Uitgebreid artikel over background-size.

css-tricks.com/css-sprites
Artikel over de voordelen van het gebruik van sprites.

css-tricks.com/focusing-background-image-precise-location-percentages
Uitgebreide uitleg hoe background-image te positioneren met behulp van percentages.

csswizardry.com/2018/06/image-inconsistencies-how-and-when-browsers-download-images
Artikel over onder andere het downloaden van background-images. Rond begin 2019 hebben Edge en Google Chrome (en op Blink gebaseerde browsers) het downloaden van background-images ingrijpend veranderd: deze worden nu áltijd gedownload, ook als ze niet worden weergegeven.

Borders, hoeken en figuren

(Onderafdeling van CSS)

Figuren zijn hier ondergebracht, omdat borders vaak een (heel) belangrijk onderdeel zijn. En omdat ik geen betere plek wist...

Mask en clip zie CSS → Masking en clipping.

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

Op deze (Nederlandstalige) site vind je voorbeelden van border-radius, border-image en dergelijke onder Kader.

cloudfour.com/thinks/css-circles
Artikel over alle mogelijke manieren om een cirkel, rondlopende tekst, en dergelijke te maken.

css-tricks.com/the-shapes-of-css
Grote hoeveelheid geometrische vormen zoals sterren, veelhoeken, enzovoort, die zijn gemaakt met gebruik van alleen CSS.

css-voorbeelden.nl/kader/afbeelding/kader-111
Voorbeeld van het gebruik van en uitgebreide uitleg over border-image. Nederlandstalig.

css-voorbeelden/tekst/lijnen/tekst-105
Deze uitleg gaat eigenlijk over lijnen, maar als je met behulp van de inhoud naar CSS → Uitgebreide beschrijvingen van een eigenschap → border-radius gaat, is daar een uitgebreide uitleg over border-radius te vinden.

hongkiat.com/blog/css-gradient-border
Uitleg hoe een hoek met gradiënts te maken.

medium.com/coding-artist/a-beginners-guide-to-pure-css-images
Tutorial hoe je met alleen css een afbeelding kunt maken (in dit geval van een beer).

webdesign.tutsplus.com/tutorials/quick-tip-rounded-corners-done-right
Uitleg hoe geneste ronde hoeken te maken, die goed in elkaar passen.

Browser support

(Onderafdeling van CSS)

Combinaties van CSS, HTML, JavaScript en/of SVG

(Onderafdeling van CSS → Browser support)

Support voor specifieke eigenschappen, tags, attributen, functies, events, en dergelijke staat mogelijk bij die specifieke eigenschappen, tags, attributen, functies, events, en dergelijke.

CSS filteren en aanpassen zie CSS → Bugs en hacks → CSS wegfilteren/aanpassen (inclusief @supports).

Gebruik van niet ondersteunde eigenschappen, elementen, en dergelijke mogelijk maken zie CSS → Bugs en hacks → Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken.

Dat iets wordt ondersteund, wil niet zeggen dat het volledig wordt ondersteund of dat er geen bugs in kunnen zitten!

Het is verstandig bij twijfel op meerdere sites te kijken, omdat niet elke site even snel wordt bijgewerkt.

caniuse.com
Uitgebreide en uiterst overzichtelijke tabel met wat in welke browser werkt van css3, svg, html5, JavaScript API's, en nog wat dingen. Inclusief mobiele browsers. De belangrijkste bugs en dergelijke worden ook gemeld. Mogelijkheid gegevens specifiek per land te bekijken.

chromestatus.com/features
Overzicht van wat Chromium, waar onder andere Google Chrome op is gebaseerd, ondersteunt van html, css en JavaScript. Laat ook (geschatte) ondersteuning door Edge, Firefox en Safari zien. Geeft percentages van hoeveel eigenschappen, functies, en dergelijke websites daadwerkelijk gebruiken (onder de knop 'Stats'). Met voorbeelden.

devdocs.io
Browser support voor zo'n beetje elk denkbare taal, ook in mobiele browsers. Met voorbeelden, links naar meer info, enzovoort.

deveveloper.microsoft.com/en-us/microsoft-edge/platform/status
Overzicht van wat Edge en Internet Explorer ondersteunen en waaraan wordt gewerkt. Geeft ook ondersteuning in andere desktopbrowsers aan.

html5please.com
Geeft van groot aantal css3-eigenschappen, html5-onderdelen, API's, microdata, enzovoort aan in welke browser ze werken. Met manieren om ze werkend te krijgen in andere browsers.

platform-status.mozilla.org
Overzicht van wat Firefox ondersteunt en waaraan wordt gewerkt. Met links naar andere bronnen, onder andere naar pagina's met browser support van andere browsers.

w3.org/2018/07/web-roadmaps/mobile
Overzicht van standaarden en ondersteuning daarvan door mobiele browsers.

webkit.org/status
Overzicht van wat Webkit, waar onder andere Safari op is gebaseerd, ondersteunt van html, css, JavaScript en SVG. Met links naar documentatie, referentie, en dergelijke.

Specifiek CSS

(Onderafdeling van CSS → Browser support)

Support voor specifieke eigenschappen en dergelijke staat mogelijk bij die specifieke eigenschappen.

Dat iets wordt ondersteund, wil niet zeggen dat het volledig wordt ondersteund of dat er geen bugs in kunnen zitten!

Het is verstandig bij twijfel op meerdere sites te kijken, omdat niet elke site even snel wordt bijgewerkt.

css3test.com
Geeft online gedetailleerd aan welke css3-eigenschappen worden ondersteund in de browser, waarmee je deze site bezoekt.

developer.mozilla.org/en-us/docs/Web/CSS/Reference
Officiële lijst van door Firefox ondersteunde CSS-eigenschappen. Met voorbeelden en beknopte uitleg. Geeft ook aan wat in andere browsers wordt ondersteund, inclusief mobiele browsers.

en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
Uitgebreide browser support tabel.

shoudiprefix.com
Overzicht bij welke eigenschappen nog een prefix (voorvoegsel) nodig is.

Specifiek HTML

(Onderafdeling van CSS → Browser support)

Support voor specifieke tags, attributen, en dergelijke staat mogelijk bij die specifieke tags, attributen, en dergelijke.

Dat iets wordt ondersteund, wil niet zeggen dat het volledig wordt ondersteund of dat er geen bugs in kunnen zitten!

Het is verstandig bij twijfel op meerdere sites te kijken, omdat niet elke site even snel wordt bijgewerkt.

developer.mozilla.org/en-US/docs/Web/HTML/Element
Mozilla's officiële pagina's over wat Firefox van html ondersteunt. Met voorbeelden en korte uitleg. Geeft ook aan wat in andere browsers wordt ondersteund, inclusief mobiele browsers.

en.wikipedia.org/wiki
Tabel welke browser wat ondersteunt van html5.

html5test.com
Online testen wat de gebruikte browser van html5 ondersteunt. Daarnaast mogelijkheid om, uit een enorm aantal browsers en besturingssystemen, meerdere browsers te kiezen en met elkaar te vergelijken. Omdat van dezelfde browser meerdere versies naast elkaar kunnen worden bekeken, kun je snel zien wat er nieuw is in een bepaalde versie vergeleken met een vorige versie van dezelfde browser.

Specifiek JavaScript

(Onderafdeling van CSS → Browser support)

Support voor specifieke functies, events en dergelijke staat mogelijk bij die specifieke functies, events en dergelijke.

Dat iets wordt ondersteund, wil niet zeggen dat het volledig wordt ondersteund of dat er geen bugs in kunnen zitten!

Het is verstandig bij twijfel op meerdere sites te kijken, omdat niet elke site even snel wordt bijgewerkt.

JavaScript is een van de 'dialecten' van ECMAScript, zoals de naam van de officiële specificatie luidt. Tot en met JavaScript versie 6 wordt algemeen de naam 'JavaScript' gebruikt, daarna vaak 'ECMAScript' gevolgd door het jaartal van de versie.

developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Gecko DOM reference. (Gecko is de rendering engine van Firefox.)

developer.mozilla.org/en-US/docs/web/Events
Overzicht van ondersteuning van events in Firefox.

developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla
Overzicht van ECMAScript 2015 (JavaScript 6) support in Firefox.

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
JavaScript Reference van Mozilla. Ook Microsoft verwijst hiernaartoe.

kangax.github.io/compat-table/es6
Overzicht van welke browser wat van welke versie ondersteunt. Je kunt selecteren per versie, per browser, per polyfill, en dergelijke.

w3schools.com/jsref
JavaScript en HTML DOM referentie.

w3schools.com/tags/ref_eventattributes
Overzicht van HTML event-attributen.

whatwebcando.today
Overzicht van browser support voor html5 API's in de browser waarmee je deze site bezoekt.

Specifiek SVG

(Onderafdeling van CSS → Browser support)

Support voor specifieke tags, attributen, en dergelijke staat mogelijk bij die specifieke tags, attributen, en dergelijke.

Dat iets wordt ondersteund, wil niet zeggen dat het volledig wordt ondersteund of dat er geen bugs in kunnen zitten!

Het is verstandig bij twijfel op meerdere sites te kijken, omdat niet elke site even snel wordt bijgewerkt.

developer.mozilla.org/en-US/docs/Web/SVG
Overzichtspagina over Firefox en SVG. Met referentie, voorbeelden, enzovoort.

en.wikipedia.org/wiki/Comparison_of_layout_engines_(Scalable_Vector_Graphics)
Browser support van 'n hele serie browsers, viewers, en dergelijke.

Bugs en hacks

(Onderafdeling van CSS)

Bugs in mobiele apparatuur zie Mobiele apparatuur → Theorie, links, forums, en dergelijke.

Hulpmiddelen voor debuggen zoals handleidingen voor developer tools (ontwikkelgereedschap), extensies bij browsers, en dergelijke, zie Gereedschap → Debuggen.

Bugs melden en opzoeken

(Onderafdeling van CSS → Bugs en hacks)

Niet alle browsers hebben een plaats, waar je centraal kunt opzoeken, of een bug al is gemeld. Maar (vrijwel) alle browsers gebruiken een weergavemachine van een van onderstaande browsers, dus onderstaande pagina's geven toch een vrij volledige dekking.

bugs.chromium.org/p/chromium/issues/list
Bugs in chromium (onder andere Google Chrome) melden en/of opzoeken.

bugs.webkit.org
Bugs in webkit (onder andere Safari) melden en/of opzoeken.

bugzilla.mozilla.org
Bugs in Firefox melden en/of opzoeken.

developer.microsoft.com/en-us/microsoft-edge/platform/issues
Bugs in Edge melden en/of opzoeken.

webcompat.com
Site waar niet (goed) werkende sites gemeld kunnen worden. Voornamelijk gericht op Mozilla (Firefox).

CSS wegfilteren/aanpassen (inclusief @supports)

(Onderafdeling van CSS → Bugs en hacks)

Mobiele browser herkennen zie Mobiele apparatuur → Validators, snelheid testen, browser sniffing, en dergelijke.

css-tricks.com/how-supports-works
Uitgebreide uitleg over hoe @supports werkt en wanneer het wel en niet zinvol te gebruiken is.

css-tricks.com/using-feature-detection-to-write-css-with-cross-browser-support
Uitgebreide bespreking van diverse manieren om te testen op ondersteuning van bepaalde CSS.

hacks.mozilla.org/2016/08/using-feature-queries-in-css
Uitgebreid artikel over het gebruik van @supports.

modernizr.com
JavaScript om te detecteren of een browser bepaalde css/html ondersteunt. Als dat niet zo is, kan alternatieve css worden aangeboden. (Als je alleen nieuwere browsers die @supports ondersteunen wilt testen, is @supports een betere keuze.)

quirksmode.org/blog/archives/2016/07
Artikel over de beperkingen van @supports.

sitepoint.com/an-introduction-to-css-supports-rule-feature-queries
Uitgebreide tutorial over @supports.

Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken

(Onderafdeling van CSS → Bugs en hacks)

Simpele oplossingen om 'n bepaalde eigenschap en dergelijke mogelijk te maken, zonder dat daarbij JavaScript of zoiets nodig is, staan bij de betreffende eigenschap en dergelijke.

Ondersteuning voor SVG zie CSS → Browser support.

github.com/Modernizr/Modernizr/wiki
Gigantische lijst met links naar HTML5 Cross Browser Polyfills. (Een polyfill is een stukje JavaScript, waardoor nieuwere css, html, en dergelijke ook in oudere browsers (min of meer) werkt.)
In het verleden stonden hier ook links naar aparte polyfills. De kwalitatief goede bleken ook allemaal op bovengenoemde site te staan. Vanwege de zeer wisselende kwaliteit van polyfills is het veiliger om alleen op bovengenoemde site te zoeken.

Compositing, filters en blending

(Onderafdeling van CSS)

Canvas, CSS, WebGL, SVG of ...? staat bij SVG.

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

alistapart.com/article/blending-modes-demystified
Overzichtelijke uitleg met voorbeelden over blending modes.

arthurgouveia.com/css-mix-blend-mode
Online uitproberen hoe tekst op een afbeelding er in verschillende modes uitziet. Foto en tekstkleur kunnen worden aangepast.

bennettfeely.com/image-effects
Het uiterlijke van één afbeelding wordt met behulp van filter, mix-blend-mode en background blend-mode volledig veranderd. Inclusief gebruikte code.

blog.logrocket.com/advanced-effects-with-css-background-blend-modes
Voorbeelden met uitleg en code van het gebruik van blog.logrocket.com.

css-voorbeelden.nl/tekst/effecten/uiterlijk/tekst-121
Kleur van de tekst aanpassen aan de achtergrond met behulp van mix-blend-mode. Met uitgebreide beschrijving van mix-blend-mode in de uitleg (onder css → Uitgebreide beschrijving van mix-blend-mode). Nederlandstalig.

sarasoueidan.com/blog/compositing-and-blending-in-css
Uitgebreide uitleg met demo's over compositing en blending.
Bijbehorende mogelijkheid om te experimenteren met de effecten van background-blend-mode en mix-blend-mode.

sitepoint.com/close-up-css-mix-blend-mode-property
Uitgebreide tutorial met voorbeelden over mix-blend-mode.

sitepoint.com/css-filter-effects-blur-grayscale-brigthness-and-more-in-css
Overzicht van filters. Met links naar codepen.io, waar de code bewerkt kan worden en het resultaat daarvan gelijk zichtbaar is.

webdesign.tutsplus.com/tutorials/blending-modes-in-css-color-theory-and-practical-application
Tutorial over background-blend-mode en mix-blend-mode, waarin ook de theoretische achtergronden zoals formules worden behandeld.

CSS4

(Onderafdeling van CSS)

xanthir.com
Álles over CSS4 op één pagina! Door de nieuwe werkwijze van w3c past álle informatie over de laatste versie van css op maar één pagina. Ongelooflijk. Verplicht leesvoer voor alle mensen die verlangen naar css4.

Cursors

(Onderafdeling van CSS)

Cursors downloaden zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, en dergelijke

webdesign.tutsplus.com/articles/everything-you-need-to-know-about-the-css-cursor-rule
Uitgebreide uitleg over cursors op verschillende systemen en hoe deze met css aan te passen.

Default ('standaard') stylesheets

(Onderafdeling van CSS)

chromium.googlesource.com/chromium/blink/+/master/Source/core/css
Browser stylesheet van chromium (gebruikt in onder andere Google Chrome en Opera).

dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
Browser stylesheet van Firefox.

trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Browser stylesheet van webkit (gebruikt in onder andere Safari)

Eenheden en calc()

(Onderafdeling van CSS)

Omdat de eenheid 'fr' (vooralsnog) alleen bij grid wordt gebruikt, staat die bij CSS → Grid.

Dingen als ppi, dpi, css-pixels, device-pixels zijn te vinden bij Mobiele apparatuur → Theorie, links, forums, en dergelijke.

css-tricks.com/a-couple-of-use-cases-for-calc
Enkele voorbeelden van het gebruik van calc().

css-voorbeelden.nl/artikelen/css/artikelen-119
Lengte-eenheden in css (inclusief calc() en percentage) (Nederlandstalig).

dev.to/kenbellows/gradians-and-turns-the-quiet-heroes-of-css-angles
Uitleg over het verschil tussen en gebruik van degrees, radians, gradians en turns.

hacks.mozilla.org/2013/09/css-length-explained
Overzicht van eenheden in css en van het onderling verband tussen deze eenheden.

katydecorah.com/css-ruler
Verschil tussen relatieve, absolute en viewport eenheden uiterst duidelijk zichtbaar gemaakt. Door getallen te wijzigen zie je, hoe de verschillende eenheden reageren.

medium.com/dev/channel/css-hex-colors-demystified
Uiterst gedetailleerde uitleg over hexadecimale waarden bij kleuren.

meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit
Uitleg over de eenheid ch en waarom het meestal geen goed idee is die te gebruiken om te lange regels te voorkomen.

sitepoint.com/understanding-and-using-rem-units-in-css
Artikel met praktische voorbeelden voor het gebruik van rem.

techtime.getharvest.com/blog/in-defense-of-rem-units
Artikel over de voordelen van het gebruik van rem als eenheid.

webdesign.tutsplus.com/articles/taking-ems-even-further
Uitgebreid artikel over em's en andere relatieve eenheden.

webdesignrankings.com/resources/px-em
Online uitrekenen welke waarde em moet hebben om een bepaald verschil tussen twee waarden in px te krijgen.

zellwk.com/blog/rem-vs-em
Uitermate duidelijk artikel over wanneer em en wanneer rem te gebruiken.

Flexbox

(Onderafdeling van CSS)

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

Meer algemene artikelen over display, boxmodel, en dergelijke (waar flexbox een onderdeel van kan zijn) staan bij CSS → Positioneren, z-index, display, boxmodel, overflow, marges, containing block, en dergelijke.

writing-mode zie CSS → writing-mode.

De specificatie voor flexbox is een aantal keren volledig herschreven. Oudere handleidingen zijn hierdoor volstrekt onbruikbaar geworden. Als in een handleiding display: box; of display: flexbox; wordt gebruikt, is deze verouderd en volledig onbruikbaar. Als een handleiding display: flex; gebruikt, is die handleiding geschreven volgens de nieuwste specificatie.

codecamps.com/3-superpowers-of-the-flex-box-model
Uitgebreid artikel over met name flex-basis, flex-shrink en flex-grow.

codepen.io/enxaneta/
Werking van allerlei onderdelen van flexbox gedemonstreerd. Als je iets verandert, zie je gelijk het resultaat.

css-tricks.com/snippets/a-guide-to-flexbox
Uitleg met vrij weinig tekst, maar veel afbeeldingen. Heel duidelijk.

davidwalsh.name/flexbox-dice
Er wordt getoond hoe je met behulp van flexbox een dobbelsteen kunt maken, wat een uiterst duidelijke en korte uitleg over flexbox oplevert.

dev.to/danny/designing-layouts---flexbox
Tutorial waarin op duidelijke wijze alle aparte eigenschappen worden uitgelegd.

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
Uitleg over het gebruik van flexbox. Met de gebruikelijke uitgebreidheid en grondigheid van Mozilla.

flexbox.help
Online de werking van verschillende eigenschappen en waarden uitproberen. Heel simpel en heel duidelijk.

flexbox.malven.co
Soort spiekbriefje met voorbeelden. Als je op 'n voorbeeld klikt, wordt de code gekopieerd.

flexboxfroggy.com
Uiterst duidelijke tutorial in de vorm van een spelletje met kikkers.

freecodecamp.org/news/an-animated-guide-to-flexbox
Tutorial aan de hand van bewegende gif's.
Deel 2.

freecodecamp.org/news/the-ultimate-guide-to-flexbox-learning-through-examples
Tutorial aan de hand van praktische voorbeelden.

freecodecamp.org/news/understanding-flexbox-everything-you-need-to-know
Zeer uitgebreide tutorial over flexbox.

github.com/philipwalton/flexbugs
Overzicht van bugs, verschillen tussen browsers, en dergelijke, en mogelijke oplossingen. Handig, maar beslist niet volledig.

jonibologna.com/flexbox-cheatsheet
Spiekbriefje ('cheatsheet') waarin je met behulp van vragen kunt zien, welk attribuut wat doet.

kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
Uitgebreid overzicht van technieken om (onderdelen van) flexbox te simuleren in oudere browsers.

medium.com/hackernoon/11-things-i-learned-reading-the-flexbox-spec
Uiterst humoristische beschrijving van de belangrijkste verschillen tussen flexbox-elementen en 'gewone' elementen.

onextrapixel.com/flexbox-centering-guide
Artikel met tal van voorbeelden over verticaal en/of horizontaal centreren met behulp van flexbox.

philipwalton.github.io/solved-by-flexbox
Voorbeelden van enkele veel voorkomende lay-outproblemen die met behulp van flexbox opgelost kunnen worden.

scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Uitgebreid overzicht van flexbox-eigenschappen. Met veel afbeeldingen.

sketchingwitchcss.com
Spiekbriefje ('cheatsheet') waarin je snel kunt zien, welk attribuut wat doet.

smashingmagazine.com/2013/05/centering-elements-with-flexbox
Korte tutorial met de nadruk op horizontaal en verticaal centreren.

smashingmagazine.com/2018/08/flexbox-display-flex-container
Deel 1 van een zeer uitgebreide tutorial over flexbox.
Deel 2  Deel 3  Deel 4

webdesignerdepot.com/2015/09/modern-web-layout-with-flexbox
Duidelijke tutorial met voorbeelden.

Float

(Onderafdeling van CSS)

bitsofco.de/how-floating-works
Uiterst overzichtelijk artikel over hoe float werkt.

designshack.net/articles/css/everything-you-never-knew-about-css-floats
Uitgebreid artikel over het gebruik van float met voorbeelden en oplossingen voor problemen.

Fonts en typografie

(Onderafdeling van CSS)

Als je fonts gebruikt in strijd met een licentie, kan dat tot schadeclaims van duizenden euro's leiden. Oók als je de gebruikte fonts gelijk verwijdert, nadat het is ontdekt! Controleer áltijd of het font echt volledig vrij en gratis gebruikt mag worden. Dit geldt ook voor fonts die bij aankoop al in de computer zijn geïnstalleerd! Als je een zoekmachine of verzamelsite gebruikt, controleer dan altijd de licentie op de originele site. En 'royalty free' hoeft niet te betekenen dat het gratis is: het kan ook betekenen dat je slechts één keer moet betalen en niet opnieuw voor elke publicatie.

Bepaald karakter opzoeken

(Onderafdeling van CSS → Fonts en typografie)

copychar.cc
Online enorme verzameling nummers, pijlen, symbolen, emoticons, enzvoort kopiëren. Als je op Toggle metadata onderaan de pagina klikt, krijg je de utf-8-code.

shapecatcher.com
Teken een symbool, vorm, letter, of wat dan ook en krijg suggesties voor het dichtst in de buurt komende utf-8-symbool (met bijbehorende code en dergelijke). Het meest ongelooflijke van deze pagina: het werkt nog ook!

toptal.com/designers/htmlarrows
Entiteit, utf-8-code, en dergelijke opzoeken voor grote hoeveelheid pijlen, valuta, letters, wiskundige symbolen, en dergelijke.

Hulpmiddelen en theorie @font-face

(Onderafdeling van CSS → Fonts en typografie)

Sites met webfonts om te downloaden zie CSS → Fonts en typografie → Webfonts (om te downloaden).

Hulpmiddelen specifiek voor variabele fonts staan bij CSS → Fonts en typografie → Variabele fonts.

css-voorbeelden.nl/tekst/effecten/font/tekst-098
Met @font-face eigen aangepaste fonts (webfonts) gebruiken.

developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
Uitgebreid artikel over hoe webfonts te optimaliseren, waardoor ze zo snel mogelijk worden weergegeven.

font-display.glitch.me
Gedetailleerde uitleg over font-display.

everythingfonts.com/woff-to-woff2
Online font omzetten van WOFF naar WOFF2.

fontsquirrel.com/tools/webfont-generator
Online code voor @font-face aanmaken en desgewenst eigen fonts omzetten naar benodigde formaten.

medium.com/hackernoon/web-fonts-when-you-need-them-when-you-dont
Artikel met handvaten om na te gaan of je webfonts wel nodig hebt.

meowni.ca/font-style-matcher
Online grootte van webfont met fallback-font vergelijken om FOUT te voorkomen. De fonts kunnen over elkaar heen worden gezet, waardoor je heel precies het verschil kunt zien.

sitepoint.com/css-font-display-future-font-rendering-web
Tutorial over de @font-face-eigenschap font-display.

sitepoint.com/optimizing-web-fonts-for-performance-the-state-of-the-art
Overzicht van hoe browsers omgaan met FOUC en FOIC en hoe dat te verbeteren.

smashingmagazine.com/2014/05/unicode-for-a-multi-device-world
Uitgebreid artikel over hoe je kunt voorkomen dat bepaalde unicode-symbolen niet worden weergegeven op bepaalde (mobiele) apparaten.

thenewcode.com/878/Slash-Page-Load-Times-With-CSS-Font-Subsetting
Uitleg hoe alleen de benodigde tekens van een font te downloaden.

typography.supply
Pagina met links naar veel hulpmiddelen voor typografie, zoals afbreken, leading berekenen, @font-face optimaliseren, enzovoort.

wakamaifondue.com
Online uitgebreid overzicht van mogelijkheden, karakters, enzovoort van een geïnstalleerd font krijgen.

zachleat.com/web/comprehensive-webfonts
Overzicht van voor- en nadelen van diverse manieren om webfonts te laden.

Typografie

(Onderafdeling van CSS → Fonts en typografie)

Eenheden zoals em en rem zie CSS → Eenheden en calc().

Specifiek voor variabele fonts staat bij CSS → Fonts en typografie → Variabele fonts.

Lettergrootte aanpassen aan grootte van het venster zie CSS → Media Query's en Responsive Web Design → Overig.

betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography
Uitgebreid artikel over typografie en toegankelijkheid.

betterwebtype.com/web-typography-resources
Pagina met heel veel links naar sites met allerlei onderwerpen die met typografie en fonts te maken hebben.

blog.ricardofilipe.com/post/deep-into-opentype-features
Tutorial over het gebruik van font-feature-settings, waarin ook het verschil met font-variant wordt behandeld.

blog.typekit.com/2014/02/05/kerning-on-the-web
Artikel over in welke browsers kerning werkt en hoe je dit kunt toepassen.

brunildo.org/text/xheight
Online invloed van font-size-adjust op weergave van font laten zien.

cjcid.com/articles/wrapping-long-words-css-html
Uitgebreide uitleg over <wbr>, &shy;, white-space, word-break, overflow-wrap en line-break en hoe dze te gebruiken voor woordafbreking.

clagnut.com/blog/2395
Uitgebreid artikel over het automatisch afbreken van woorden en hoe dat netjes te doen.

classic.typetester.org
Online allerlei eigenschappen van een font uitproberen, zoals grootte, leading en tracking.

codepo8.github.io/typography-cheatsheet
Als je op een bepaald deel van een letter klikt, krijg je de Engelse naam van dat deel. (Omdat het overgrote deel van artikelen over typografie Engelstalig is, kan dit handig zijn.)

css-tricks.com/styling-links-with-real-underlines
Tutorial over het gecontroleerd onderstrepen van links (en gewone tekst) met behulp van eigenschappen als text-underline-offset, text-decoration-thickness, en dergelijke.

css-tricks.com/understanding-web-fonts-getting
Inleiding in het gebruik van eigenschappen als font-feature-settings.

design.tutsplus.com/articles/the-ultimate-guide-to-basic-typography
Geïllustreerde uitleg van de belangrijkste typografische begrippen.

docs.microsoft.com/nl-nl/typography/opentype/spec/featurelist
Overzicht van mogelijke waarden bij font-feature-settings. Met uitleg.

fontdrop.info
Online allerlei info over een geinstalleerd font krijgen, zoals erin zittende karakters, otf-features, en dergelijke. Je kunt ook experimenteren met dingen als het aan- en uitzetten van ligaturen.

html5rocks.com/en/tutorials/internals/antiliasing
Uitleg over hoe anti-aliasing werkt bij tekst.

jkorpela.fi/x-height
Online relatieve x-hoogte (aspect ratio) van font berekenen.

open-type.surge.sh
Online meest gebruikte eigenschappen van font-feature-setting in werking zien.

sitepoint.com/css-properties-to-control-web-typography
Uitgebreid overzicht van eigenschappen voor typografie. Met voorbeelden.

supremo.co.uk/typeterms
Namen bij alle onderdelen van een letter en een regel. Als je op een naam klikt, krijg je meer uitleg. Engelstalig, maar door de illustraties levert dat geen problemen op, ook niet voor de minder bekende begrippen.

thenewcode.com/946/CSS-last-line-Controlling-Windows-&-Orphans
Met behulp van orphans en widows voorkomen dat onder- of bovenaan een kolom en dergelijke een losse regel komt te staan.

wakamasifondue.com
Online alle mogelijkheden van een font bekijken en css-variabelen aanmaken om deze te gebruiken, zodat bepaalde problemen met font-feature-settings worden omzeild.

Variabele fonts

(Onderafdeling van CSS → Fonts en typografie)

Meer algemene hulpmiddelen (niet specifiek voor variabele fonts) staan bij CSS → Fonts en typografie → Hulpmiddelen en theorie @font-face.

24ways.org/2019/an-introduction-to-variable-fonts
Uitgebreide uitleg over de werking van variabele fonts.

axis-praxis.org
Online verschillende variabele fonts uitproberen. Met behulp van schuifknoppen en dergelijke kun je instellingen veranderen, waarbij je desgewenst de css mee kunt zien veranderen.

css-tricks.com/one-file-many-options-using-variable-fonts-web
Uitleg over wat variabele fonts zijn en over de mogelijkheden ervan.

developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
Uitleg over en demonstratie van variabele fonts, waaronder geanimeerde fonts.

medium.com/clear-left-thinking/how-to-use-variable-fonts-in-the-real-world
Praktijkvoorbeeld van het gebruik van variabele fonts.

play.typedetail.com
Online uitproberen van en code genereren voor variabele fonts. Met links naar de fonts zelf, waaronder veel open source fonts en dergelijke.

v-fonts.com
Online uitproberen van allerlei eigenschappen van variabele fonts. Geeft een goed overzicht van de mogelijkheden van variabele fonts. Er zijn ook wat links naar open source variabele fonts.

webdesign.tutsplus.com/articles/how-to-use-variable-fonts-on-the-web
Tutorial met veel links en een gedetailleerd voorbeeld.

zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web
Uiterst duidelijke uitleg wat variabele fonts zijn en hoe deze te gebruiken.

zeichenschatz.net/typografie/implementing-a-variable-font-with-fallback-web-fonts
Tutorial over fallback fonts voor oudere browsers die variabele fonts niet ondersteunen.

Webfonts (om te downloaden)

(Onderafdeling van CSS → Fonts en typografie)

Zelf fonts samenstellen zie CSS → Fonts en typografie → Zelf font samenstellen of aanpassen.

Variabele fonts kunnen ook bij CSS → Fonts en typografie → Variabele fonts staan.

Als je fonts gebruikt in strijd met een licentie, kan dat tot schadeclaims van duizenden euro's leiden. Oók als je de gebruikte fonts gelijk verwijdert, nadat het is ontdekt! Controleer áltijd of het font echt volledig vrij en gratis gebruikt mag worden. Dit geldt ook voor fonts die bij aankoop al in de computer zijn geïnstalleerd! Als je een zoekmachine of verzamelsite gebruikt, controleer dan altijd de licentie op de originele site. Ook op de hieronder genoemde sites moet je áltijd de licentie goed controleren! Niet op elke site is alles gratis. En 'royalty free' hoeft niet te betekenen dat het gratis is: het kan ook betekenen dat je slechts één keer moet betalen en niet opnieuw voor elke publicatie.

Bij de laatste controle van dit soort sites bleken twee sites plotseling hun licentie fors gewijzigd te hebben. Het is dus echt belangrijk dat je zelf de voorwaarden voor gebruik leest, want deze kunnen inmiddels zijn gewijzigd.

En bij de allerlaatste controle bleken twee kennelijk door asbakken gerunde sites de term 'free' op een uiterst smerige, misleidende manier te gebruiken. Kortom: lees altijd de echte licentie!

Als je webfonts niet meelevert vanaf je eigen site, maar met behulp van een link naar bijvoorbeeld fonts.google.com, is er een grote kans dat je actief meehelpt bij het bespioneren van je bezoekers. Zonder dat je bezoekers daar ook maar iets van merken. Als je een webfont wilt gebruiken, lever dat dan mee vanaf je eigen site!

Bij CSS → Fonts en typografie → Hulpmiddelen en theorie @font-face vind je sites, waar je hier eenvoudig code voor kunt aanmaken.

1001freefonts.com
Grote verzameling voornamelijk gratis fonts.

befonts.com
Vrij te gebruiken fonts.

blog.spoongraphics.co.uk/articles/the-best-free-alternatives-to-the-most-popular-fonts
Overzicht van gratis alternatieven voor de tien populairste commerciële fonts.

creativebloq.com/graphic-design-tips/best-free-fonts-for-designers
Links naar 100 gratis fonts.

dafont.com
Grote verzameling fonts, waarvan veel gratis.

fontfabric.com/fonts
Grote hoeveel webfonts, waarvan veel gratis..

fontlibrary.org
Webfonts waarvan een deel onder een vrije licentie gebruikt kan worden. Lees vooral de betreffende licentie!

fonts.google.com
Site met gratis te gebruiken webfonts van onder andere Google.
Tips om Google webfonts sneller te laden.
Twee Google webfonts zoeken die bij elkaar passen: eerste font opzoeken en handmatig uit alle andere fonts bijpassend font zoeken of suggesties voor bijpassend font krijgen.
google-webfonts-helper.herokuapp.com/fonts: online Google font uitzoeken, css aanmaken en font downloaden om zelf te hosten. Zodat je niet (onbedoeld) Google laat weten, wie er allemaal jouw site bezoekt.

fontsforweb.com
Grote hoeveelheid webfonts, waarvan veel vrij gebruikt mogen worden.

fontsquirrel.com
Grote hoeveelheid gratis te gebruiken webfonts. Online eigen fonts omzetten naar webfonts, met bijbehorende css (onder de tab 'Generator').

losttype.com
Pay-what-you-want fonts. De volledige opbrengst gaat naar de ontwerper van het font.

open-foundry.com
Open source fonts.

theleagueofmoveabletype.com
Open source fonts.

vorillaz.github.io/devicons/
Webfont met icoontjes die met het maken van sites te maken (kunnen) hebben, zoals tal van logo's.

weloveiconfonts.com
Op deze site wordt een groot aantal iconenfonts gehost. Deze zijn op dezelfde manier te gebruiken als 'gewone' webfonts, maar bestaan uit iconen.

Zelf font samenstellen of aanpassen

(Onderafdeling van CSS → Fonts en typografie)

Overzichten met utf-8-codes, entiteiten, en dergelijke zie HTML → Charsets, unicode, entiteiten → Sets met tekens, entiteiten, en dergelijke.

fontello.com
Zelf een webfont samenstellen uit een groot aantal iconen. Het font wordt in alle benodigde formaten aangemaakt.

glyphter.com
Zelf een webfont samenstellen uit een groot aantal iconen. Het font wordt in alle benodigde formaten aangemaakt.

heydonworks.com/article/font-hacking
Duidelijke uitleg hoe je het uiterlijk van één of meer tekens uit een font kunt veranderen.

icomoon.io
Zelf een webfont samenstellen uit een groot aantal iconen. Het font wordt in alle benodigde formaten aangemaakt.

jakearchibald.com/2017/combining-fonts
Uitleg hoe één (of meer) tekens uit een font te vervangen door tekens uit een ander font, zonder twee volledige fonts te downloaden.

Forms, buttons, en dergelijke

(Onderafdeling van CSS)

Valideren van formulieren zie HTML → Formulieren, <input>, en dergelijke.

adrianroselli.com/2019/09/under-engineered-text-boxen
Tutorial over het opmaken van toegankelijke tekstvelden. Rechtsboven staan links naar tutorials voor het opmaken van toegankelijke keuzevakjes en radioknoppen.

a11withlindsey.com/blog/create-custom-keyboard-accessible-checkboxes
Stap-voor-stap-tutorial hoe je keuzevakjes op kunt maken én toegankelijk kunt houden.

blog.cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont
Uitgebreid artikel over het gebruik van autofill.

codersblock.com/blog/checkbox-trickery-with-css
Checkbox gebruiken om allerlei elementen te veranderen, te verbergen, enzovoort, zonder gebruik van JavaScript. (Overigens kan hetzelfde ook met radioknoppen en dergelijke.)

css-tricks.com/sliding-nightmare-understanding-range-input
Uiterst gedetailleerd artikel over hoe verschillende browsers het (on)mogelijk maken onderdelen van een sleepbalk (<input type="range">) op te maken.

css-tricks.com/styling-cross-browser-compatible-range-inputs-css
<input type="range"> er in alle browsers hetzelfde uit laten zien.

css-voorbeelden/tekst/bewerken
Onderdelen van een formulier in- en uitschakelen met behulp van enabled en disabled. Nederlandstalig.

filamentgroup.com/lab/select-css
Uitleg over het opmaken van <select> in verschillende browsers.

hongkiat.com/blog/html5-range-slider-style
<input type="range"> er in alle browsers hetzelfde uit laten zien.

inclusive-components.club/toggle-button
Artikel met praktische aanwijzingen voor toegankelijke knoppen.

jonathan-harrell.com/advanced-css-form-styling
Formulieren opmaken met behulp van minder bekende selectors.

scottaohara.github.io/a11y_styled_form_controls
Onderdelen van formulieren opmaken op een manier dat ze toch toegankelijk blijven.

sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons
Uitleg hoe het uiterlijk van radioknoppen te wijzigen, terwijl ze toch gewoon radioknoppen (en dus toegankelijk) blijven.

tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls
Uitgebreid overzicht van pseudo-elementen om formulieren mee op te maken. Met overzicht van browser-specifieke extra's, afwijkingen en rarigheden. Artikel is inmiddels wel wat verouderd, maar er staat nog genoeg bruikbaars in.

webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons
Tutorial over het opmaken van aankruisvakjes en radioknoppen, waarbij ook op toegankelijkheid wordt gelet.

Generated content, ::after, ::before, en dergelijke

(Onderafdeling van CSS)

smashingmagazine.com/2013/04/css-generated-content-counters
Tutorial over content, ::after en ::before, met hele serie voorbeelden.

Gradiënts

(Onderafdeling van CSS)

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

dev.opera.com/articles/css3-radial-gradients
Tutorial over radiale gradiënts.

standardista.com/cssgradients
Voorbeelden van wat je allemaal met gradiënts kunt doen.

webdesign.tutsplus.com/tutorials/how-to-use-gradients-on-the-web
Korte, uiterst overzichtelijke tutorial over gradiënts.

Grid

(Onderafdeling van CSS)

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

Meer algemene artikelen over display, boxmodel, en dergelijke (waar grid een onderdeel van kan zijn) staan bij CSS → Positioneren, z-index, display, boxmodel, overflow, marges, containing block, en dergelijke.

writing-mode zie CSS → writing-mode.

Inmiddels staan er op internet 3.769.980.417 tutorials en dergelijke over Grid en komen er per seconde 47 bij. Hieronder staat een heel kleine selectie van tutorials en dergelijke die er om een of andere reden wat uitspringen, bijvoorbeeld omdat ze heel erg duidelijk zijn. Er zijn ongetwijfeld nog veel meer goede sites over grid te vinden, maar wat hieronder staat, is in ieder geval kwalitatief goed.

alistapart.com/article/practical-grid
Artikel waarin Eric Meyer het ombouwen van zijn site naar grid beschrijft.

bitsofco.de/css-grid-terminology
Uitleg over allerlei bij grid gebruikte begrippen.

blog.logrocket.com/the-simpletons-guide-to-css-grid
Uitgebreide tutorial met duidelijke voorbeelden en links naar meer info.

chenhuijing.com/blog/basic-grid-with-fallbacks
Eenvoudige grid lay-out waarbij het vooral gaat om fallbacks voor browsers die grid niet ondersteunen.

css-tricks.com/snippets/css/complete-guide-grid
Systematisch overzicht van eigenschappen. Met afbeeldingen die het effect van de eigenschappen laten zien.

css-tricks.com/difference-explicit-implicit-grids
Artikel over het verschil tussen expliciete en impliciete grids.

css-tricks.com/introduction-fr-css-unit
Uitgebreide uitleg over de fr-eenheid.

cssgridgarden.com/#nl
Grid leren met behulp van een interactief spel (Nederlandstalig).

dev.to/mustapha/css-grid-illustrated-introduction
Overzichtelijke tutorial die stap voor stap de verschillende eigenschappen behandelt.

developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
Beknopte tutorial voor beginners.

freecodecamp.org/news/learn-css-grid-in-5-minutes
De basisprincipes van grid uitgelegd in duidelijke stappen.

github.com/rachelandrew/gridbugs
Overzicht van bugs, verschillen tussen browsers, en dergelijke, en mogelijke oplossingen.

grid.malven.co
Soort spiekbriefje met voorbeelden. Als je op 'n voorbeeld klikt, wordt de code gekopieerd.

gridbyexample.com
Site over grid met voorbeelden, tutorials en links naar andere sites.

learncssgrid.com
Uitgebreide uitleg met duidelijke illustraties bij elke eigenschap.

matuzo.at/blog/the-dark-side-of-the-grid
Serie artikelen over toegankelijkheid en grid en hoe eventuele problemen te voorkomen.

mozilladevelopers.github.io/playground/css-grid
Tutorial met voorbeelden en uitleg hoe developertools te gebruiken voor grid. De code van de voorbeelden kan worden gewijzigd, waardoor je gelijk het effect van veranderingen ziet.

rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
Overzicht van manieren om grid te combineren met andere methoden voor browsers die grid niet kennen.

smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks
Oplossingen voor problemen die veel mensen tegenkomen, als ze met grid beginnen.

smashingmagazine.com/2017/10/naming-things-css-grid-layout
Tutorial over hoe namen te geven in grid.

smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid
Artikel over het oplossen van problemen met browsers die grid niet (volledig) of onjuist ondersteunen.

smashingmagazine.com/2017/12/grid-inspector
Uitgebreide handleiding voor de in het ontwikkelgereedschap van Firefox ingebouwde Grid Inspector.

testdriven.io/blog/css-grid
Uiterst overzichtelijke tutorial over Grid.

tympanus.net/codrops/css_reference/grid
Uitgebreide en overzichtelijke tutorial.

varun.ca/css-grid
Heel duidelijke stap-voor-stap-tutorial.

viget.com/articles/getting-started-with-css-grid-part-1
Duidelijke tutorial over grid. Inclusief debuggen en het maken van een voorbeeld-pagina.
Deel 2.

webdesign.tutsplus.com/series/understanding-the-css-grid-layout-module
Serie tutorials over grid.

webkit.org/blog/7434/css-grid-layout-a-new-layout-modole-for-the-web
Beschrijving van Grid door een van de ontwikkelaars voor webkit.

Hulpmiddelen

(Onderafdeling van CSS)

Comprimeren zie Gereedschap → Snelheid testen, gzip, comprimeren (inclusief theorie).

cleancss.com/css-beautify
Online ongeformatteerde css netjes laten inspringen en dergelijke.

Kleuren

(Onderafdeling van CSS)

Online kleuren samenstellen, kleurenpalet samenstellen, converteren, color()-fucntie uitproberen, en dergelijke zie Gereedschap → Kleuren.

Uitleg over de theorie van hexadecimale waarden en dergelijke zie CSS → Eenheden en calc().

css-tricks.com/nerds-guide-color-web
Overzichtsartikel over de opbouw van kleuren, eigenschappen die met kleur te maken hebben, voorbeelden, en dan nog wat meer.

en.wikipedia.org/wiki/Web_colors
Uitgebreid overzicht met onder andere de namen van css2- en css3-kleuren, hexadecimale en decimale waardes, enzovoort.

medium.com/pilcro/the-surprising-science-behind-colour-codes
Uiterst leesbaar artikel over de opbouw van kleuren en de verschillende codes om kleuren te definiëren.

webfx.com/blog/web-design/css-colors
Overzicht van de verschillende manieren om kleuren op te geven in css.

xhtml5.nl/naslag/kleuren
Nederlandstalig overzicht van in css gebruikte namen en bijbehorende hexadecimale codes.

Kolommen (column-*)

(Onderafdeling van CSS)

break-before, break-after en dergelijke staan bij CSS → Printen (inclusief @page, page-break-..., en dergelijke).

css-tricks.com/guide-responsive-friendly-css-columns
Uitleg over het juiste gebruik van css-kolommen, waarbij ook op het probleem van kolommen hoger dan het venster (voortdurend terug naar boven scrollen) wordt ingegaan.

smashingmagazine.com/2019/01/css-multiple-column-layout-multicol
Tutorial over css-kolommen met voor- en nadelen, hoe ze op dit moment bruikbaar kunnen zijn en over toekomstige ontwikkelingen.

Lay-outs (en <main>, <nav> en dergelijke)

(Onderafdeling van CSS)

Op deze (Nederlandstalige) site vind je voorbeelden van lay-outs onder Lay-out.

Online lay-outs maken zie Gereedschap → Lay-out maken.

Theorie over boxmodel, positioneren, en dergelijke is te vinden onder CSS → Positioneren, z-index, display, boxmodel, overflow, marges, containing block, en dergelijke.

Kolommen zie CSS → Kolommen (column-*).

Flexbox zie CSS → Flexbox.

Grid zie CSS → Grid.

cssplay.co.uk/layouts/ (Stu Nicholls | CSSplay)
CSS-lay-outs. Voor het gebruik van sommige lay-outs is eerst toestemming nodig.

free-css-templates.com
CSS-lay-outs onder een Creative Commons-licentie.

css-tricks.com/how-to-section-your-html
Uitgebreid artikel over hoe <nav>, <aside>, <article>, <section>, <header>, <footer>, <h>'s te gebruiken, eventueel in combinatie met aria-label en dergelijke.

freewebtemplates.com
Grote collectie lay-outs. Deze zijn niet allemaal gratis en ook niet allemaal te downloaden. Even opletten dus.

html5up.net
CSS-lay-outs onder een Creative Commons-licentie.

responsivedesign.is/patterns
Enkele veel voorkomende basis-lay-outs, die zich aanpassen aan de grootte van het venster.

solucija.com/home/templates/free
CSS-lay-outs onder een Creative Commons-licentie.

templated.co
Grote collectie css-lay-outs onder een Creative Commons-licentie.

Logical properties

(Onderafdeling van CSS)

adrianrosellil.com/2019-11/css-logical-properties
Uitleg over logical properties (eigenschappen en waarden die rekening houden met de richting van de taal). Met handige 'vertaaltabel' tussen oude en nieuwe eigenschappen en waarden.

Masking en clipping

(Onderafdeling van CSS)

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

alligator.io/css/clipping-with-clip-path
Tutorial over clip-path.

css-tricks.com/using-css-clip-path-create-interactive-effects
Voorbeelden van het gebruik van clip-path, deel 1. En hier is deel 2 te vinden.

hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking
Korte vergelijking tussen clipping en masking. Met voorbeelden.

smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path
Uitgebreide tutorial over clip-path.

Media Query's en Responsive Web Design

(Onderafdeling van CSS)

Viewport, dpi, ppi, verschil tussen css-pixels en device-pixels, dingen die specifiek voor mobiele apparatuur gelden, en dergelijke zie Mobiele apparatuur → Theorie, links, forums, en dergelijke.

Browser sniffing zie Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen → Algemeen.

Specifiek voor e-mail zie E-mail ontwerpen.

Images (inclusief 'lazy loading' en niet-css-methoden zoals SVG, <picture> en <img>)

(Onderafdeling van CSS → Media Query's en Responsive Web Design)

Sites, artikelen, en dergelijke die over meer dan alleen afbeeldingen gaan, staan gelijk hieronder bij CSS → Media Query's en Responsive Web Design → Overig.

Online (code voor) responsive images maken zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren (inclusief theorie).

<figure> en <figcaption> zijn niet alleen bedoeld voor afbeeldingen en staan bij HTML → <figure> en <figcaption>.

Figuren maken met behulp van alleen css zie CSS → Borders, hoeken en figuren.

bitsofco.de/why-and-how-to-use-webp-images-today
Uitleg over de voor- en nadelen van het WebP-formaat voor afbeeldingen.

codepen.io/tigt/post/when-responsive-images-get-ugly
Artikel over (het oplossen van) problemen bij het gebruik van responsive images.

css-tricks.com/the-complete/guide/to-lazy-loading-images
Uitgebreide uitleg over lazy loading, met overzicht van verschillende technieken om dat te doen.

css-voorbeelden-nl/afbeelding/overig/afbeelding-117
Voorbeeld van art direction (verschillende afbeeldingen afhankelijk van grootte en dergelijke van venster) met behulp van <picture>. Nederlandstalig.

medium.com/@elad/a-complete-guide-for-responsive-images
Volledig overzicht van alle (ook vrijwel onbekende) manieren om responsieve afbeeldingen te gebruiken.

thenewcode.com/744/Make-SVG-Responsive
Uitleg hoe SVG-afbeeldingen responsief gemaakt kunnen worden. In bepaalde situaties lukt dat niet zonder extra code.

thenewcode.com/936/Responsive-Images-For-Designers-The-HTML5-picture-element
Uitleg hoe <picture> is te gebruiken voor art direction (in kleinere vensters kleinere delen van een afbeelding weergeven).

web.wurfl.io (WURFL Image Tailor)
Er wordt uitgegaan van slechts één afbeelding. De server op wurfl.io detecteert het toestel van de bezoeker en past eventueel de afbeelding aan de grootte daarvan aan. Je kunt allerlei parameters opgeven om dat aanpassen te sturen. De service is gratis voor publiek toegankelijke sites die zelf ook gratis zijn.

Overig

(Onderafdeling van CSS → Media Query's en Responsive Web Design)

Testen in verschillende resoluties zie Gereedschap → Weergave en dergelijke testen.

Viewport, dpi, ppi, verschil tussen css-pixels en device-pixels, dingen die specifiek voor mobiele apparatuur gelden, en dergelijke zie Mobiele apparatuur → Theorie, links, forums, en dergelijke.

Eenheden zie CSS → Eenheden en calc().

blog.logrocket.com/the-elements-of-responsivs-typography
Verschillende manier om de lettergrootte aan te passen aan de grootte van het venster.

bradfrost.github.io/this-is-responsive/resources
Pagina met héél veel links over van alles met betrekking tot Responsive Web Design.

browserleaks.com/css
Online testen wat je toestel en browser precies ondersteunen van en rapporteren aan media query's. Als je op het punt staat de crisisdienst te bellen, omdat je mobieltje opeens puberteits-groeischeuten of ouderdomskrimp vertoont, zou ik toch eerst nog even hier kijken. Verbijsterend hoeveel gegevens sommige browsers foutief weten te melden.

mydevice.io
Online testen wat je toestel en browser precies ondersteunen van en rapporteren aan media query's. Verder zelfde verhaal als iets hierboven bij browserleaks.com.

responsivedesign.is
Site met veel links, artikelen, tutorials, enzovoort over Responsive Web Design.

smashingmagazine.com/2012/03/device-agnostic-approach-to-responsive-web-design
Uitstekend artikel waarom het niet slim is, om iets specifiek op maat te maken voor één bepaald modieus (en peperduur) apparaat.

udacity.com/course/responsive-web-design-fundamentals
Online cursus responsieve site maken. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

Menu's, lijsten, counter en ::marker

(Onderafdeling van CSS)

Online menu of list maken zie Gereedschap → Menu en list maken.

Op deze (Nederlandstalige) site vind je voorbeelden van menu's onder Menu.

Uitklapmenu's (dropdownmenu's) werken heel vaak niet of niet goed op touchscreens. Als er niet nadrukkelijk bij staat dat ze zijn getest (en werken) op touchscreens, kun je er waarschijnlijk vanuit gaan dat ze niet (goed) werken op een touchscreen. Ook zijn veel menu's volstrekt ontoegankelijk voor schermlezers en dergelijke.

cssplay.co.uk/menus/ (Stu Nicholls | CSSplay)
Tientallen menu's, waaronder hele originele.

designmodo.com/css3-menus
Links naar tutorials over menu's.

ginva.com/2011/04/108-free-css-menu-designs
Links naar gratis menu's.

line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
Handleiding voor het maken van een zo simpel mogelijk uitklapmenu. Vanuit deze basis kun je het dan naar hartenlust opleuken.

smashingapps.com
Links naar tutorials over menu's.

smashingmagazine.com/2019/07/css-lists-markers-counters
Tutorial over counters en ::marker.

tympanus.net/codrops/2013/05/02/automatic-figure-numbering-with-css-counters
Onderschriften bij afbeeldingen automatisch nummeren met behulp van css-counters.

Nieuwsbrieven en dergelijke

(Onderafdeling van CSS)

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Online uitproberen, code genereren, en dergelijke

(Onderafdeling van CSS)

Dingen uitproberen in het ontwikkelgereedschap van de browser staat bij Gereedschap → Debuggen.

Combinaties van css, html, JavaScript enzovoort online uitproberen en eventueel delen met anderen zie Gereedschap → Combinaties van css, html, JavaScript enzovoort uitproberen en eventueel delen.

Als iets niet hier staat, kun je het ook bij Gereedschap proberen.

Hieronder staat slechts een fractie van wat er op internet aan generators is te vinden. Geprobeerd is naar alleen kwalitatief goede generators te linken. Sommige van deze zijn al wat ouder, daarom wordt vaak ook inmiddels overbodige code voor oudere browsers gegenereerd. Het is daarom nodig de code goed te bekijken en eventueel op te schonen, voordat deze echt goed bruikbaar is.
Verder kan niet bij elke generator elke eigenschap en waarde worden gebruikt. Bij flexbox bijvoorbeeld is er geen enkele generator, waarbij echt bij álle eigenschappen álle waarden kunnen worden gegenereerd. Het aantal mogelijkheden verschilt ook nog 'ns per generator. Ook om deze reden is het goed de gegenereerde code altijd even kritisch te bekijken.

Hoewel hieronder slechts een heel beperkt aantal generators staat, zijn dit er toch al zoveel dat het wat onoverzichtelijk wordt. Indelen in soort generator gaat niet, omdat op veel sites meerdere generators staan. Daarom kun je hieronder aanvinken, wat je zoekt. Alleen de sites met zo'n generator worden dan getoond. Als je 'Alles' uitvinkt, kun je kiezen, wat je wilt zien.

Niet alle generators laten alle eigenschappen veranderen. Bij bijvoorbeeld transform() varieert het van generators die slechts vier eigenschappen laten veranderen tot generators die álle eigenschappen laten veranderen. Oftewel: wie zoekt, zal vinden.

Alles voor het html-element <canvas> staat bij HTML → <canvas>.

Alles voor fonts (inclusief @font-face) staat bij CSS → Fonts en typografie.

Html voor formulieren en dergelijke zie HTML → Formulieren, <input>, en dergelijke.

Online kleuren samenstellen, kleurenpalet samenstellen, converteren, color()-fucntie uitproberen, en dergelijke zie Gereedschap → Kleuren.

9elements.github.io/fancy-border-radius/full-control
Uiterst simpel door middel van slepen code genereren voor border-radius. Er kunnen acht waarden worden gebruikt, dus je kunt ook niet-cirkelvormige hoeken maken.

alialaa.github.io/css-grid-cheat-cheet
Online lay-out in grid maken en bijbehorende code genereren.

angrytools.com/css-generator
Online code genereren voor animation, border, border-radius, box-shadow, filters, gradiënt, text-shadow, transform (matrix) en transition

animista.net
Online allerlei animaties maken en code genereren. De animaties kunnen heel simpel worden aangepast.

bennettfeely.com/clippy
Online code genereren voor clip-path. Je kunt een volledig eigen vorm maken of een voorgedefinieerde vorm aanpassen.

bennettfeely.com/flexplorer
Online flexbox uitproberen en code genereren (alleen voor de flex container).

bestagencies.com/tools
Online uitproberen van en code genereren voor onder andere border-image, border-radius, box-shadow, column, filters, outline, overflow, text-shadow en transform.

betravis.github.io/shape-tools/polygon-drawing
Online een polygoon tekenen en bijbehorende code genereren voor de polygon()-functie van clip-path.

blendy.ml
Online uitproberen en code genereren voor background-blend-mode, desgewenst met een eigen afbeelding.

bouncejs.com
Online transforms met bijbehorende code maken. Je kunt eventueel beginnen met een voorbeeld en dit naar wens aanpassen. Wijzigingen in de code zijn gelijk zichtbaar.

codepen.io/mburakerman
Online code voor transform uitproberen.

codepen.io/thebabydino
Artikel over de nadelen van gradiënt-generators en waarom je de code die ze genereren moet opschonen.

colorzilla.com/gradient-editor
Online gradiënt maken met bijbehorende code. Maakt ook code voor oudere versies van Internet Explorer, voor zover dat mogelijk is.

cssgrid-generator.netlify.com
Online basis-grid maken maken en bijbehorende code genereren.

css-grid-layout-generator.pw
Online lay-out in grid maken en bijbehorende code genereren.

css3factory.com/linear-gradients
Online lineaire gradiënt maken met bijbehorende code.

css3generator.com
Online onder andere border-radius, box-shadow, flexbox, outline, text-shadow, transition, en transform uitproberen. Van flexbox kunnen lang niet alle eigenschappen worden gebruikt. De uitprobeersels worden automatisch aangepast voor de verschillende browsers, zelfs voor Internet Explorer. Dit laatste alleen voor zover Internet Explorer 'n eigen manier heeft om iets te doen.

css3please.com
Online onder andere animation, background-clip, border-radius, box-shadow, gradiënt, kolommen (column-), text-shadow, transform (ook 3D) en transition uitproberen. De uitprobeersels worden automatisch aangepast voor de verschillende browsers en zelfs voor Internet Explorer. Dit laatste alleen voor zover Internet Explorer 'n eigen manier heeft om iets te doen.

cssanimate.com
Online animaties maken met behulp van @keyframes en alle bijbehorende eigenschappen. Heel overzichtelijk weergegeven: als je 'n kleine afbeelding versleept, zie je gelijk hoe alle waarden bij de diverse eigenschappen mee veranderen. Code wordt automatisch gegenereerd.

cssfilters.co
Afbeelding uploaden en online filters uitproberen, waarbij het resultaat gelijk zichtbaar is, en bijbehorende css genereren.

cssgenerator.org/box-shadow-css-generator
Online box-shadow uitproberen en code genereren.

cssgenerator.org/filter-css-generator
Online filters uitproberen en code genereren.

cssgenerator.org/gradient-css-generator
Online uitgebreid gradiënts uitproberen en code genereren.

cssgenerator.org/text-shadow-css-generator
Online text-shadow uitproberen en code genereren.

cssgradient.io
Online gradiënt maken en bijbehorende code genereren. Uiterst gemakkelijk te bedienen.

cubic-bezier.com
Online de transition-timing-eigenschap cubic-bezier uitproberen en vergelijken met waarden als ease. Als je de kromme aanpast, worden automatisch de bijbehorende waarden aangemaakt.

danielstern.ca/range.css
Online css voor opmaak van <input type="range"> genereren.

developer.mozilla.org/en-US/docs/Web/CSS_Background_and_Borders/Border-image_generator
Online code voor border-image genereren, met gebruik van een eigen afbeelding.

flexible-boxes.wstone.io
Flexbox-generator, waarbij de meeste eigenschappen kunnen worden gebruikt. Genereert ook code.

gradient-animator.com
Online code genereren voor een bewegende gradiënt. (Eigenljk kan dit niet, maar door de gradiënt groter te maken dan nodig is en background-position te manipuleren, lukt dit toch.)

jeremyckahn.github.io/stylie
Heel gedetailleerde animaties maken en code daarvoor genereren.

keyframes.app/editor
Online heel gedetailleerde animaties maken en code genereren. Fantastisch gedetailleerd en de animaties kunnen heel simpel op heel veel manieren worden aangepast.

layoutit.com/grid
Online lay-out in grid maken en bijbehorende code genereren.

leaverou.github.io/css3patterns
Achtergronden die volledig met css worden gemaakt. Je kunt online wijzigingen uitproberen.

learnflexbox.org
Online een flexbox lay-out maken en code genereren. De meeste eigenschappen kunnen worden gebruikt.

matthewlein.com/tools/ceaser
Online de transition-timing-eigenschap cubic-bezier uitproberen, in samenhang met ease en dergelijke. De bijbehorende css wordt automatisch gemaakt.

mizchi-sandbox.github.io/grid-generator
Eenvoudige grid-generator, uitstekend geschikt om grid in je vingers te krijgen.

netzgesta.de/dev/cubic-bezier-timing/function
Met behulp van schuifknoppen de transition-timing-eigenschap cubic-bezier instellen.

peterned.home.xs4all.nl/matrices
Online een figuur vervormen met move (translate), rotate, skew en scale en automatisch de code omzetten naar transform: matrix().

roblaplaca.com/examples.bezierBuilder
Online de transition-timing-eigenschap cubic-bezier uitproberen en vergelijken met waarden als ease. Als je de kromme aanpast, worden automatisch de bijbehorende waarden aangemaakt.

shapy.app
Online code genereren voor lineaire en radiale gradiënts. Uiterst simpel te bedienen.

the-echoplex.net/flexyboxes
Online een flexbox lay-out maken en code genereren.

virtuosoft.eu/tools/css-gradient-generator
Online code genereren voor gradiënts, inclusief ondersteuning voor oudere browsers.

w3schools.com/css/css_examples
Vrijwel alle CSS-eigenschappen online uitproberen.

webcode.tools/css-generator
Online allerlei css-eigenschappen uitproberen en code genereren, waaronder animation, background-size, border, border-image, border-radius, box-shadow, filters, gradiënts, text-shadow, transform en transition.

westciv.com/tools/animations
Uitgebreide animations-generator.

westciv.com/tools/gradients
Lineaire gradiënts maken

westciv.com/tools/radialgradients
Radiale gradiënts maken

westciv.com/tools/shadows
Online code voor text-shadow genereren.

westciv.com/tools/boxshadows
Online code voor box-shadow genereren.

westciv.com/tools/transforms
Online code voor transform genereren.

westciv.com/tools/3Dtransforms
Online code voor 3D-transforms genereren.

Overzicht eigenschappen (properties), cursussen, tips, specificatie, en dergelijke

(Onderafdeling van CSS)

Het over-, overgrote deel van de cursussen op internet is echt van een bedroevende kwaliteit en/of zwaar verouderd. Aan zo'n cursus heb je helemaal niets. Integendeel: je leert technieken, waar je tegenwoordig helemaal niets meer aan hebt, en die je later weer voor het grootste deel af moet leren. De cursussen hieronder zijn kwalitatief goed.

codecademy.com/learn/learn-html
Interactieve cursussen css en html. Alleen de basiscursussen zijn gratis. Je moet je wel registreren.

css-tricks.com/almanac
Inhoudsopgave van op css-tricks.com beschreven eigenschappen. Meestal met voorbeeldcode, links naar pagina's met meer info, en dergelijke.

cssreference.io
Alfabetisch overzicht van eigenschappen met bij elke eigenschap visuele voorbeelden.

csstriggers.com
Overzicht van de invloed van verschillende eigenschappen op lay-out, paint en composite in Blink, Gecko, Webkit en EdgeHTML, en daarmee op de weergavesnelheid.

devdocs.io
Browser support voor zo'n beetje elk denkbare taal, ook in mobiele browsers. Met voorbeelden, links naar meer info, enzovoort.

developer.microsoft.com/en-us/microsoft-edge/platform/usage
Overzicht hoeveel sites 'n bepaalde eigenschap gebruiken. Als je op 'n eigenschap klikt, krijg je 'n gedetailleerder overzicht over die eigenschap.

developer.mozilla.org/en-US/docs/Web/CSS/Reference
Mozilla's uitgebreide overzicht (met uitleg en voorbeelden) van wat Firefox ondersteunt aan attributen, selectors, enzovoort. Heeft ook verwijzingen naar wat andere browsers ondersteunen, en op welke (afwijkende) manier die dat doen.

developer.mozilla.org/en-US/docs/Learn/CSS
Cursus css. Met de gebruikelijke grondigheid van Mozilla.

drafts.csswg.org/indexes
Alfabetisch overzicht van alle in css-specificaties genoemde eigenschappen, selectors, enzovoort, met links naar betreffende specificatie.

freecodecamp.org/learn
Interactieve cursus css, html en JavaScript.

freecodecamp.org/news/the-css-handbook-a-handy-guide-to-css-for-developers
Cursus css in boekvorm. Na registratie is de cursus ook als e-book te downloaden.

goalkicker.com/CSSBook
Gratis pdf-boek over CSS, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

meiert.com/en/indices/css-properties
Alfabetisch overzicht van css-eigenschappen met de versie waarin ze gebruikt mogen worden. Elke eigenschap linkt rechtstreeks naar de officiële specificatie.

quackit.com/css
Uitgebreid overzicht van css-eigenschappen met voorbeelden, cursussen, enzovoort.

ref.openweb.io/CSS
Alfabetisch overzicht van eigenschappen, selectors, attributen, @-regels, enzovoort met links naar bijbehorende specificatie.

thenewcode.com/919/A-Complete-Reading-List-For-CSS
Cursus css in de vorm van een leeslijst.

tympanus.net/codrops/css_reference
Heel uitgebreid overzicht van eigenschappen, functies, enzovoort, met voorbeelden, links naar meer info, demo's, enzovoort. Veel voorbeelden kun je online uitproberen.

udacity.com/course/browser-rendering-optimization
Online cursus optimaliseren van de weergave in de browser. De (uitstekende) cursus is gratis, maar je moet je wel registreren. De cursus richt zich op apps, maar ook voor websites is er het nodige uit te halen.

w3.org/Style/CSS/all-descriptors
Overzicht van alle css-descriptors met links naar de bijbehorende specificatie.

w3.org/Style/CSS/all-properties
Overzicht van alle css-eigenschappen met links naar de bijbehorende specificatie.

w3.org/Style/CSS/current-work
Beknopt overzicht van de status van en links naar alle css-modules na versie 2.2 (de laatste versie die als één geheel is verschenen.)

w3.org/TR/CSS21
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. Officiële specificatie CSS 2.1. Met ingang van css3 is css opgesplitst in een hele serie afzonderlijke modules, die elk een eigen level-nummer hebben.

w3.org/TR/CSS22
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. Officiële specificatie CSS 2.2. Bevat kleine verbeteringen en dergelijke ten opzichte van de hierboven genoemde versie 2.1.

w3schools.com/css
CSS-tutorial.

Positioneren, z-index, display, boxmodel, overflow, marges, containing block, en dergelijke

(Onderafdeling van CSS)

Specifiek flexbox zie CSS → Flexbox.

Specifiek grid zie CSS → Grid.

Specifiek vertical-align zie CSS → vertical-align.

writing-mode zie CSS → writing-mode.

Logical properties zie CSSLogical properties.

bitsofco.de/collapsible-margins
Uiterst duidelijke uitleg over horizontale 'collapsing margins': marges die (ogenschijnlijk) uit het niets verschijnen of juist verdwijnen.

bifsofco.de/how-z-index-works
Korte, heldere uitleg over z-index.

book.mixu.net/css
Zeer grondige uitleg over alles van css dat met lay-out te maken heeft: boxmodel, vertical-align, display, noem maar op.

chenhuijing.com/blog/how-well-do-you-know-display
Uitgebreide uitleg over alle mogelijke waarden bij display.

codepen.io/carolineartz
Visuele uitleg over het boxmodel. Breedte, hoogte, box-sizing, marge, padding en border zijn simpel te veranderen, waardoor je goed kunt zien, hoe het boxmodel werkt.

designshack.net/articles/css/the-lowdown-on-absolute-vs-relative-positioning
Uitgebreide uitleg over het verschil tussen absoluut en relatief positioneren (position: absolute; en position: relative;).

developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
Uitleg over wat een containing block is en de mogelijk onverwachte bijwerkingen daarvan.

developer.mozilla.org/en-US/docs/Web/CSS_Positioning/Understanding_z_index/The_stacking_context
Uitleg over wat een 'stacking context' is en wanneer deze ontstaat.

freecodecamp.org/news/z-index-explained-how-to-stack-elements-using-css
Duidelijke uitleg over z-index en stacking context.

hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property
Uitleg over de nieuwe mogelijkheid voor twee waarden bij display en de samenhang met al langer bestaande waarden.

medium.com/elad/css-position-sticky-how-it-really-works
Korte, duidelijke uitleg over de werking van position: sticky;.

philipwalton.com/articles/what-no-one-told-you-about-z-index
Artikel over minder bekende wisselwerkingen tussen z-index en onder andere opacity, transforms, filters, css-regions en paged media.

smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css
Artikel over allerlei manieren om verticaal en horizontaal te centreren.

smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context
Artikel over Block Formatting Context. Waarin bijvoorbeeld ook wordt uitgelegd waarom overflow: auto; helpt bij problemen met floats.

smashingmagazine.com/2019/04/display-two-value
Serie artikelen over de oudere en nieuwere waarden (zoals grid) bij display, de geschiedenis van die waarden, het boxmodel, enzovoort.

smashingmagazine.com/2019/07/margins-in-css
Artikel over marges met de nadruk op het samenvallen van marges ('collapsing margins') en het verschijnen van 'spookmarges'. (Beide kunnen zelfs een ervaren sitebouwer in een staat van acute razernij brengen.)

tellthemachines.com/stacking-contexts
Duidelijke uitleg over wat een stacking context is.

thenewcode.com/1052/position-sticky-scroll-to-top-then-fixed-in-pure-CSS
Artikel over de problemen (en mogelijke oplossingen) bij het gebruik van position: sticky;.

webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property
Korte, uiterst duideljke uitleg over z-index.

Printen (inclusief @page, page-break-..., en dergelijke)

(Onderafdeling van CSS)

css-voorbeelden.nl/artikelen/printen/artikelen-090
Nederlandstalig artikel over het gebruik van css bij het printen.

smashingmagazine.com/2015/01/designing-for-print-with-css
Artikel over het gebruik van css voor het maken van boeken, brochures, en dergelijke.

smashingmagazine.com/2018/05/print-stylesheets-in-2018
Artikel met praktische tips over het gebruik van stylesheets voor printen.

smashingmagazine.com/2019/02/css-fragmentation
Tutorial over break-before, break-after, en dergelijke. Met tips hoe dit te gebruiken in browsers die dit (nog) niet ondersteunen.

Quirks mode

(Onderafdeling van CSS)

Doctype zie HTML → Doctype (DTD).

hsivonen.fi/doctype
Zeer uitgebreid artikel over wat welk doctype doet, almost standards, standards en quirks mode, compatibiliteitsweergave in Internet Explorer, enzovoort.

jkorpela.fi/quirks-mode
Uitgebreid artikel over wat quirks mode is en hoe de weergave in quirks mode is.

Schaduw

(Onderafdeling van CSS)

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

Op deze (Nederlandstalige) site vind je voorbeelden van schaduw onder Schaduw.

bitsofco.de/the-box-shadow-property
Tutorial over box-shadow met voorbeelden en enkele aparte effecten.

css3.info/preview/box-shadow
Uitgebreide uitleg over box-shadow, met voorbeelden.

Scrollbalk

(Onderafdeling van CSS)

filamentgroup.com/lab/scrollbars
Overzichtsartikel hoe je het uiterlijke van een scrollbalk kunt wijzigen. Inclusief tal van vreemdigheden die de verschillende browsermakers er kennelijk als ietwat eigenaardige hobby in stoppen.

Scroll snap en overflow-behavior

(Onderafdeling van CSS)

css-tricks.com/practical-css-scroll-snapping
Tutorial over Scroll snap. Met ook aandacht voor de (nog vele) problemen en praktische voorbeelden.

developers.google.com/web/updates/2018/07/css-scroll-snap
Uitgebreide tutorial over scroll snap.

newinweb.com/2018/09/06/css-scroll-snap
Tutorial over het maken van een slideshow met behulp van Scroll snap.

smashingmagazine.com/2018/08/scroll-bouncing-websites
Tutorial over hoe het stuiter-effect bij scrollen te voorkomen bij fixed footers en dergelijke.

webdesign.tutsplus.com/tutorials/how-to-scroll-snap-using-css
Tutorial over scroll snap.

Selectors, specificiteit, class, id, erfelijkheid (inheritance), en dergelijke

(Onderafdeling van CSS)

::after en ::before zie ook CSSGenerated content, ::after, ::before, en dergelijke.

:disabled en :enabled zie ook CSS → Forms, buttons, en dergelijke.

::marker zie CSS → Menu's, lijsten, counter en ::marker.

bigsofco.de/on-not-and-specificity
Uitgebreide uitleg over :not() en specificiteit.

bitsofco.de/use-the-lang-pseudo-class-over-the-lang-attribute-for-language-specific-styles
Artikel over het verschil tussen p:[lang="nl"] en p:lang(nl). (Geldt natuurlijk ook voor andere elementen en talen.)

codepen.io/nana8
Spiekbriefje om snel de werking van een bepaalde selector op te kunnen zoeken.

css-voorbeelden.nl/artikelen/css/artikelen-094
Selector, identiteit, class, specificiteit: hoe overleef ik de nieuwe klassenstrijd? Nederlandstalig.

css3.info/selectors-test
Online testen welke selectors in welke browsers werken. Tot en met level 3.

css4-selectors.com
Site over selectors tot en met level 4 (selectors level 4, niet css4, want dat bestaat niet). Onder andere online testen wat de browser ondersteunt, uitleg, voorbeelden, artikelen.

css-tricks.com/examples/nth-child-tester
Online :nth-child(); :nth-last-child(); :nth-of-type() en :nth-last-of-type uitproberen. Met voorbeelden.

dev.to/samanthaming/css-empty-selector
Tutorial over :emtpy met voorbeelden hoe je deze pseudo-class kunt gebruiken.

flukeout/github.io
Interactieve tutorial over selectors.

isellsoap.github.io/specificity-visualizer
Specificiteit weergeven in 'n soort tabelvorm. Geeft een overzicht van de complexiteit van selectors en kan helpen bij het oplossen van (gekmakende) problemen met specifiteit.

kevinpowell.co/article/initial-unset-revert
Uitleg over de werking van de waarden initial, unset en revert.

lea.verou.me/demos/nth
Online de css3-pseudo-classes :nth-child(), :nth-last-child(), :nth-of-type() en :nth-last-of-type() uitproberen.

meyerweb.com/eric/thoughts/2018/06/06/specificity-in-not-has-and-matches
Uitleg over de specificiteit van :not(), :has() en :matches().

nthmaster.com
Duidelijke voorbeelden van wat voor ingewikkelde dingen je kunt doen met nth-child en nth-of-type.

sitepoint.com/css-inheritance-introduction
Artikel over erfelijkheid (inheritance) van eigenschappen.

sitepoint.com/css-selectors-specificity
Uitstekende uitleg met voorbeelden over specificiteit.

smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css
Uitgebreide tutorial met voorbeelden over de attribute selector [].

specificity.keegan.st
Online met behulp van duidelijke beelden kijken welke van twee of meer selectors de meeste specifiteit heeft.

standardista.com/css3/css-specificity
Uitgebreide uitleg over specificiteit, grafisch weergegeven met behulp van afbeeldingen.

thenewcode.com/785/Web-Developer-Reading-List-Css-Selectors
Uitgebreide uitleg over selectors in de vorm van een leeslijst.

topdesignagencies.com/nth-test
Online nth-child() en nth-of-type() uitproberen met een groot aantal elementen, waardoor je uiterst duidelijk ziet, wat de werking van deze selectors is.

Shapes

(Onderafdeling van CSS)

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

alistapart.com/articles/css-shapes
Korte tutorial.

blog.logrocket.com/its-a-trapezoid-css-shapes-aren-t-what-you-d-expect
Uitgebreide tutorial met voorbeelden over shapes.

codepen.io/AmeliaBR/post/breaking-boxes-css-shapes
Korte, duidelijke tutorial met voorbeelden.

codepen.io/michellebarker/post/experimantal-layouts-with-css-shapes-and-clip-path
Uitgebreide tutorial en een aantal indrukwekkende voorbeelden.

css-tricks.com/basic-shapes-path-never-twain-shall-meet
Tutorial.

hacks.mozilla.org/2018/09/make-your-web-layouts-bust-out-of-the-rectangle-with-the-firefox-shape-path-editor
Tutorial over de shape-editor in het ontwikkelgereedschap van Firefox.

html5rocks.com/en/tutorials/shapes/getting-started
Uitgebreide tutorial met voorbeelden.

smashingmagazine.com/2018/09/css-shapes
Uitgebreide tutorial, waarin alle eigenschappen één voor één - met voorbeelden - worden besproken.

smashingmagazine.com/2019/04/art-direction-for-the-web-using-css-shapes
Tekst allerlei vormen laten volgen met behulp van shapes.

tympanus.net/codrops/2018/11/29/an-introduction-to-css-shapes
Tutorial met veel voorbeelden.

webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes
Uitgebreide tutorial met voorbeelden.

Validators

(Onderafdeling van CSS)

jigsaw.w3.org/css-validator
W3C CSS-validator. Geeft vaak raadselachtige meldingen, maar is wel redelijk beknopt. Om fouten te voorkomen: onder Meer opties zit de mogelijkheid om te kiezen voor css3 en om voorvoegsels als -moz- geen fout te laten geven.

Variabelen ('custom properties')

(Onderafdeling van CSS)

blogs.windows.com/msedgedev/2017/03/24/css-custom-properties
Korte inleiding in css-variabelen in Edge.

freecodecamp.org/news/everything-you-need-to-know-about-css-variables
Zeer gedetailleerde tutorial over css-variabelen met uitleg op beginnersniveau.

medium.com/dev-channel/css-variables-no-really
Uitgebreide tutorial over css-variabelen. Met tal van voorbeelden.

sitepoint.com/practital-guide-css-variables-custom-properties
Uitgebreide tutorial over css-variabelen.

smashingmagazine.com/2017/04/start-using-css-custom-properties
Uitgebreide tutorial met voorbeelden.

una.im/local-css-vars
Korte uitleg over css-variabelen, met praktische voorbeelden.

vertical-align

(Onderafdeling van CSS)

Onder CSS → Positioneren, z-index, display, boxmodel, overflow, marges, containing block, en dergelijke staan artikelen over boxmodel en dergelijke, waarin soms ook nog info over vertical-align is te vinden.

bitsofco.de/the-vertical-align-property
Uitgebreide beschrijving met voorbeelden.

christopheraue.net/design/vertical-align
Uitgebreid artikel over de vele valkuilen, voetangels en doolhoven van vertical-align. En had ik de dwaallichtjes al genoemd?

writing-mode

(Onderafdeling van CSS)

24ways.org/2016/css-writing-modes
Tutorial over writing-mode.

smashingmagazine.com/2019/08/writing-modes-layout
Artikel over writing-mode met de nadruk over de samenhang met flexbox en grid.

E-mail ontwerpen

alistapart.com/article/can-email-be-responsive
Artikel over de meest voorkomende problemen bij responsive e-mail en hoe deze zo goed mogelijk op te lossen.

campaignmonitor.com/css
Overzicht van css-ondersteuning in - op het moment van schrijven - 33 e-mail-programma's.

caniemail.com
Overzicht van ondersteuning van html en css in groot aantal e-mail-programma's.

css-tricks.com/tools-html-email-workflow
Overzicht van hulpmiddelen om mails te ontwerpen.

foundation.zurb.emails
Framework om responsive e-mails te maken.

htmlemailcheck.com/knowledge-base
Overzicht van problemen in (en oplossingen voor) het weergeven van een e-mail in diverse e-mail-cliënten.

leemunroe.com/building-html-email
Pagina met hele reeks tips voor het ontwerpen van responsive e-mails.

smashingmagazine.com/2017/10/introduction-building-sending-html-email-for-web-developers
Uitgebreide tutorial met heel veel tips en links naar meer info.

webdesign.tutsplus.com/series/mastering-html-email
Pagina met links naar serie tutorials over het ontwerpen van een e-mail.

webdesignerdepot.com/2013/06/responsive-html-email-design
Hoe een responsive e-mail ontworpen kan worden.

Forums (gespecialiseerde forums zie onderwerp)

css-voorbeelden.nl/forum
Forum van deze site. Nederlandstalig. Bedoeld voor vragen over de voorbeelden op deze site, maar je kunt andere vragen natuurlijk altijd proberen...

helpmij.nl/forum
Nederlandstalig forum over alle denkbare computer-onderwerpen, waaronder het maken van sites.

nationaalcomputerforum.nl
Nederlandstalig forum over alle denkbare computer-onderwerpen, waaronder het maken van sites.

stackoverflow.com
Engelstalig forum, maar vanwege de (vaak) hoge kwaliteit van de antwoorden hier toch vermeld.

webprofis.nl
Nederlandstalig forum over het maken van sites.

Foutcodes (statuscodes)

internetseer.com/help/error
Foutcodes en meldingen van servers.

serversmpt.com/smtp-error
Foutcodes (statuscodes) e-mail.

nl.wikipedia.org/wiki/Lijst_van_HTTP-statuscodes
Foutcodes (statuscodes) van servers (HTTP-foutcodes). Nederlandstalig.

w3schools.com/tags/ref_httpmessages
HTTP Status Messages (foutcodes zoals 404).

Gereedschap

Achtergrond of gradiënt (verlopende kleur) maken

(Onderafdeling van Gereedschap)

Online gradiënts met behulp van css3 maken of uitproberen zie CSS → Online uitproberen, code genereren, en dergelijke.

ogim.4u2ges.com
Online achtergrond-afbeelding maken. Er zijn behoorlijk ingewikkelde patronen mogelijk, waaronder gradiënts.

patterncooler.com
Online achtergrond-afbeeldingen (tiles) maken met allerlei zich herhalende patronen.

stripegenerator.com
Online achtergrond-afbeeldingen (tiles) maken met allerlei lijn-patronen.

tartanmaker.com
Online achtergrond-afbeeldingen (tiles) maken met allerlei ruit-patronen.

Afbeelding maken, bewerken, converteren en optimaliseren (inclusief theorie)

(Onderafdeling van Gereedschap)

De theorie achter SVG staat bij SVG.

Sprite maken zie Gereedschap → Sprite maken.

'Lazy loading' zie CSS → Media Query's en Responsive Web Design → Images (inclusief 'lazy loading'' en niet-css-methoden zoals SVG, <picture> en <img>).

De hieronder genoemde online grafische programma's kunnen handig zijn, maar hebben (uiteraard) veel minder mogelijkheden dan een zelfstandig programma als Gimp of Blender.

blender.org
Blender is een open source programma om 3d-animaties te maken. (In Linux zal het meestal in de repo's zitten.)

compress-or-die.com
Afbeelding optimaliseren en/of converteren. jpg, png, gif en WebP. Met veel instelmogelijkheden.

designer.io/en
Online vector-editor. (Editor kan ook worden gedownload en geïnstalleerd.)

drawsvg.org
Online SVG ontwerpen en bijbehorende code genereren.

editor.method.ac
Online SVG ontwerpen en bijbehorende code genereren.

evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
Uitgebreide verhandeling over het optimaliseren van afbeeldingen en de voor- en nadelen van verschillende formaten.

gifmaker.me
Online van een aantal eigen afbeeldingen bewegende gif of video maken.

gifmaker.org
Online van een aantal eigen afbeeldingen bewegende gif maken.

gimp.org (GNU Image Manipulation Program)
Professioneel programma voor Linux, OS X en Windows om afbeeldingen te bewerken. Site is Engelstalig, programma is ook Nederlandstalig. (In Linux zal het meestal in de repo's zitten.)
Links naar sites over Gimp: gimp.startpagina.nl. Nederlandstalig.
Nederlandstalig forum over Gimp: dutchgimpers.nl
Bundel met een groot aantal Nederlandstalige handleidingen over Gimp: handleiding.helpmij.nl. Links waarmee dezelfde handleidingen afzonderlijk kunnen worden gedownload: handleiding.helpmij.nl.

html5rocks.com/en/tutorials/speed/img-compression
Uitgebreide uitleg over hoe comprimeren bij de verschillende bestandsformaten werkt.

imagecompressor.com
Gelijktijdig tot twintig jpg- en png-afbeeldingen online optimaliseren. De compressie is per afbeelding in te stellen en het resultaat is vooraf per afbeelding te bekijken. Nederlandstalig.

images.guide
Artikel met alles (álles en dan nog iets meer) over het optimaliseren van afbeeldingen.

irfanview.com
Populair programma voor Windows, geschikt voor simpele bewerkingen. Site is Engelstalig, programma is ook Nederlandstalig. (Als 'snap' ook te installeren op Linux.)

jakearchibald.github.io/svgomg
Online SVG optimaliseren.

kraken.io/web-interface
Gelijktijdig tot 1 MB aan jpg-, png-, gif- en SVG-afbeeldingen optimaliseren.

krita.org/en
Professioneel programma voor Linux, OS X en Windows om afbeeldingen te bewerken. Site is Engelstalig, programma is ook Nederlandstalig. (In Linux zal het meestal in de repo's zitten.)

parametric.press/issue-01/unraveling-the-jpeg
Uitleg over hoe een jpg-afbeelding wordt gecomprimeerd.

photopea.com
Online bitmap-afbeelding (jpg, gif, png, en dergelijke) bewerken in GIMP-achtige editor met uitgebreide mogelijkheden.

picsvg.com
Online jpg-, gif- of png-afbeelding converteren naar svg.

picozu.com
Online bitmap-afbeelding (jpg, gif, png, en dergelijke) bewerken in GIMP-achtige editor met uitgebreide mogelijkheden.

pixlr.com/x
Online bitmap-afbeelding (jpg, gif, png, en dergelijke) bewerken in GIMP-achtige editor met uitgebreide mogelijkheden.

responsivebreakpoints.com
Online de benodigde afbeeldingen aanmaken voor een in te stellen aantal breakpoints en resoluties. Ook art direction is mogelijk. Maakt ook benodigde afbeeldingen en code.
Op smashingmagazine.com zijn een algemene tutorial voor deze generator en een tutorial specifiek voor art direction te vinden.

sitepoint.com/6-incredible-svg-pattern-generators
Korte uitleg over SVG patterns (vergelijkbaar met css tiles) en bespreking van zes online generators.

smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick
Handleiding hoe afbeeldingen te verkleinen met behulp van het gratis open source programma ImageMagick. (In Linux zal dit meestal in de repo's zitten.)

squoosh.app
Online afbeelding comprimeren en/of converteren van en naar onder andere bmp, jpg, WebP en png. Ook zijn eenvoudige bewerkingen mogelijk.

sumopaint.com/home
Online bitmap-afbeelding (jpg, gif, png, en dergelijke) bewerken in GIMP-achtige editor met uitgebreide mogelijkheden.

svg-edit.github.io/svgedit
Online vector-editor, die desgewenst exporteert in SVG.

tinypng.com
Online gelijktijdig tot vijf png- en jpg-afbeeldingen optimaliseren. Converteert PNG-24 naar PNG-8.

trianglify.io
Online afbeeldingen met gekleurde geometrische vormen maken.

unwttng.com/compression-decompressed
De theoretische basis van het optimaliseren van afbeeldingen, video, en dergelijke uitgelegd.

Animaties maken

(Onderafdeling van Gereedschap)

ezgif.com
Online animatie (gif) maken van eigen afbeeldingen of van video. Ook bewerken van gif, zoals tekst toevoegen en splitsen.

gickr.com
Online animatie (gif) maken van eigen afbeeldingen.

picasion.com
Online animatie (gif) maken van eigen afbeeldingen.

Audio

(Onderafdeling van Gereedschap)

Geluidsbestanden converteren, code genereren voor <audio>, enzovoort zie HTML → <embed>, <object>, <video>, <audio>, <iframe>.

Banner maken

(Onderafdeling van Gereedschap)

bannerfans.com/banner_maker
Online banner maken.

Bewaking site

(Onderafdeling van Gereedschap)

downforeveryoneorjustme.com/
Is 'n site alleen voor mij down of voor iedereen?

uptimerobot.com
Meldt per mail, twitter, en dergelijke of site offline is. Tot vijftig sites.

visualping.io/cdlp
Meldt als een pagina op 'n site is veranderd.

webbuddy.nl
Meldt per mail als site offline is. Nederlandstalig. Met uitgebreide statistieken en dergelijke. Uiterst betrouwbaar, gebruik het zelf al jaren.

Combinaties van css, html, JavaScript, enzovoort uitproberen en eventueel delen

(Onderafdeling van Gereedschap)

codepen.io
Online css, html en JavaScript uitproberen en eventueel delen met anderen.

dabblet.com
Online css, html en JavaScript uitproberen en eventueel delen met anderen.

hawramani.com/wp-content/jstinker
Online uiterst simpel html, css en JavaScript uitproberen. Met mogelijkheid bibliotheken zoals jQuery te gebruiken en anderen mee te laten kijken.

jsbin.com
Online css, html en JavaScript uitproberen en eventueel delen met anderen. Er kunnen ook bibliotheken zoals jQuery of MooTools worden gebruikt.

jsfiddle.net
Online css, html en JavaScript uitproberen en eventueel delen met anderen.

liveweave.com
Online css, html en JavaScript uitproberen. Er kunnen ook bibliotheken zoals jQuery of MooTools worden gebruikt.

rendera.org
Online css, html en JavaScript uitproberen. Met voorbeelden.

Commandline (NPM, Grunt, Gulp, en dergelijke)

(Onderafdeling van Gereedschap)

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

webdesign.tutsplus.com/series/the-command-line-for-web-design
Serie tutorials over zaken als NPM, Grunt, Gulp en andere hulpmiddelen.

CSS

(Onderafdeling van Gereedschap)

Door de veelheid aan online hulpmiddelen voor css, is het nogal lastig al het gereedschap voor css hier bij Gereedschap neer te zetten. Veel staat onder Gereedschap, maar vooral voor css3 staat ook een en ander bij CSS:

Online testen wat welke browser ondersteunt zie CSS → Browser support.

Online gereedschap voor fonts zie CSS → Fonts en typografie.

Online wijzigingen van alleen css uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

Combinaties van css, html, JavaScript enzovoort online uitproberen en eventueel delen met anderen zie Gereedschap → Combinaties van css, html, JavaScript enzovoort uitproberen en eventueel delen.

Css comprimeren zie Gereedschap → Snelheid testen, gzip, comprimeren (inclusief theorie).

Online testen welke media query's worden ondersteund en wat precies wordt doorgegeven zie CSS → Media query's en Responsive Web Design.

Online hulpmiddelen voor selectors, specificiteit, en dergelijke staan bij CSS → Selectors, specificiteit, class, id, erfelijkheid (inheritance), en dergelijke.

Online hulpmiddelen voor het omrekenen van eenheden staan bij CSS → Eenheden en calc().

Cursor maken

(Onderafdeling van Gereedschap)

cursor.cc
Online afbeelding omzetten naar eigen cursor voor Internet Explorer en Edge (.cur-bestand), of rechtstreeks zo'n cursor ontwerpen. (Alle andere browsers kunnen met tig normale formaten uit de voeten.)

Data-URI maken (base64)

(Onderafdeling van Gereedschap)

Een data-URI (of -URL) is een - meestal kleine - afbeelding die versleuteld in de html of css zelf wordt opgenomen.

csswizardry.com/2017/02/base-64-encoding-and-performance
Artikel waarin wordt uitgelegd, waarom je beter geen grote afbeeldingen op deze manier kunt opnemen in css.

dataurl.sveinbjorn.org/dataurlmaker
Uiterst simpele online data-URI-maker. Onder de tab CSS Optimizer zit de mogelijkheid afbeeldingen waarnaar de css linkt automatisch om te zetten en in de stylesheet op te nemen.

dopiaza.org/tools/datauri
Online data-URI maken van eigen afbeelding of afbeelding op internet..

Debuggen

(Onderafdeling van Gereedschap)

Mobiele systemen en browsers zie Mobiele apparatuur.

Bugs melden, opzoeken, omzeilen, en dergelijke zie CSS → Bugs en hacks.

Online in diverse browsers weergave testen, meerdere versies van 'n browser installeren, en dergelijke zie Gereedschap → Weergave en dergelijke testen.

Handleidingen voor het debuggen van specifieke eigenschappen en dergelijke, zoals Grid in Firefox, kunnen bij de betreffende eigenschappen en dergelijke staan.

Default stylesheets zie CSS → Default ('standaard') stylesheets.

Firefox

(Onderafdeling van Gereedschap → Debuggen)

addons.mozilla.org/nl/firefox/extensions
Firefox heeft tal van uiterst nuttige exensies voor het maken van een site. Als je echter naar de categorie 'Webontwikkeling' gaat, vind je daar van alles, maar vrijwel niets voor het maken van sites. Vandaar dat hier een link naar álle extensies staat en niet specifiek naar die voor het maken van sites.

developer.mozilla.org/en-US/docs/Tools/
Uitleg over de in Firefox ingebouwde ontwikkelaarsgereedschappen.

sitepoint.com/performance-auditing-a-firefox-developer-tools-deep-dive
Handleiding hoe snelheid te testen in het ontwikkelgereedschap van Firefox.

twitter.com/FirefoxDevTools
Twitterkanaal van Firefox DevTools.

Google Chrome

(Onderafdeling van Gereedschap → Debuggen)

chrome.google.com
Extensies voor het maken van sites.

developer.chrome.com/devtools
Uitgebreide handleiding Chrome Developer Tools. Met voorbeelden, tips, enzovoort, enzovoort.

sitepoint.com/optimatization/auditing-a-deep-dive-into-chromes-dev-console
Zeer uitgebreide handleiding voor Chrome Developer Tools.

Internet Explorer en Edge

(Onderafdeling van Gereedschap → Debuggen)

blogs.msdn.microsoft.com/ie/2013/07/29/debugging-and-tuning-web-sites-and-apps-with-f12-developer-tools-in-ie11
Uitleg over de ingebouwde Developer Tools in Internet Explorer 11.

blogs.msdn.microsoft.com/ie/2014/04/14/whats-new-in-f12-with-windows-8-1-update
Beschrijving van vernieuwingen in bovengenoemde Developer Tools in Windows 8.1.

code.tutsplus.com/articles/the-new-ie11-f12-tools
Handleiding voor de ingebouwde debugger in Internet Explorer 11.

docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer
Uitgebreide handleiding voor de ingebouwde debugger in Internet Explorer 11.

docs.microsoft.com/nl-nl/microsoft-edge/devtools-guide
Uitgebreide uitleg over developer tools in Edge.

Editors en IDE's

(Onderafdeling van Gereedschap)

wysiwyg-editors zie Gereedschap → wysiwyg-editor.

activestate.com/products/komodo-edit (Komodo Edit)
Open source editor voor 'n hele reeks talen, waaronder html, css, JavaScript en php. Draait op allerlei systemen. Naast het gratis Komodo Edit is er een betaalde versie.

aptana.com (Aptana Studio 3)
IDE voor HTML, JavaScript, CSS, DOM, en plug-ins voor tal van andere talen. Draait op allerlei systemen.

atom.io
Open source editor voor onder andere html, css en JavaScript. In het verleden werd er gewerkt aan een Nederlandse vertaling. Mogelijk is die al klaar, of wordt er niet meer aan gewerkt. Hoe het programma is, weet ik niet. Maar zoeken naar iets simpels als het bestaan van een Nederlandse vertaling lukt niet, omdat de site zo chaotisch is.

bluefish.openoffice.nl
Open source editor voor 'n hele reeks talen, waaronder html, css en php. Draait op allerlei systemen. Site is Engelstalig, programma is ook Nederlandstalig. Of dit programma nog wordt ontwikkeld, is onduidelijk.

boxy-svg.com
Editor voor SVG. Om hiermee te kunnen werken moet Google Chrome zijn geïnstalleerd. Omdat deze browser op de meeste systemen geïnstalleerd kan worden, werkt ook Boxy SVG op de meeste systemen.

brackets.io
Open source editor met de nadruk op html, css en JavaScript.

code.visualstudio.com
Visual Studio Code. (Oorspronkelijk) door Microsoft gemaakte open source editor met onder andere ondersteuning voor css, html en JavaScript. Draait ook op OS X en Linux.

eclipse.org/home
Open source framework voor het ontwikkelen in zo'n beetje elk denkbare taal. Draait op allerlei systemen.

en.wikipedia.org/wiki/Comparison_of_text_editors
Zeer uitgebreide vergelijking van groot aantal editors.

htmlkit.com (HTML-Kit Tools)
Editor voor onder andere HTML, XHTML, XML, CSS, JavaScript en PHP. Site is Engelstalig, programma is ook Nederlandstalig. Draait alleen op Windows. Oudere versies zijn gratis.

jedit.org
Open source editor met ondersteuning voor meer dan 200 talen.

notepad-plus-plus.org/ (Notepad++)
Simpele editor. De site is Engelstalig, het programma is ook Nederlandstalig. (Als 'snap' ook te installeren op Linux.)

scintilla.org (SciTE)
Editor voor Windows en Linux, geschikt voor 'n hele serie talen. Site is Engelstalig, programma is ook Nederlandstalig.

slant.co/topics/1686/~best-javascript-ides-or-editors
Vergelijkend overzicht van groot aantal IDE's, die geschikt zijn voor (onder andere) JavaScript.

Emulators en SDK's voor mobiele apparatuur

(Onderafdeling van Gereedschap)

Zie bij Mobiele appratuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen.

Favicon maken

(Onderafdeling van Gereedschap)

Vanuit veiligheidsoverwegingen verbergen steeds meer browsers standaard favicons in de adresbalk.

en.wikipedia.org/wiki/Favicon
Overzichtsartikel met links naar meer artikelen, browser support, enzovoort.

favicon.cc
Zelf online ontwerpen of bestaande afbeelding uploaden en bewerken. Alleen ico-formaat.

realfavicongenerator.net
Online favicon maken van bestaande afbeelding. Levert alle inmiddels ongeveer 372 formaten en maten plus bijbehorende code.
Handleiding voor bovenstaande generator: sitepoint.com.

tools.dynamicdrive.com/favicon
Online favicon maken van eigen afbeelding. Alleen ico-formaat.

xiconeditor.com
Zelf online ontwerpen of bestaande afbeelding uploaden en bewerken. Alleen ico-formaat.

Fonts

(Onderafdeling van Gereedschap)

Zie CSS → Fonts en typografie.

FTP-programma's

(Onderafdeling van Gereedschap)

filezilla-project.org
Uitstekende open source ftp-client. Site is Engelstalig, programma is ook Nederlandstalig.

Grafiek en diagram maken

(Onderafdeling van Gereedschap)

Voor bibliotheken en dergelijke die SVG en dergelijke gebruiken zie SVG.

draw.io
Online diagram maken. Keuze uit heel veel soorten. Kan worden opgeslagen als afbeelding, SVG, enzovoort.

easel.ly
Online uiterst ingewikkelde en mooie grafieken maken, met eventueel veel illustraties. Slechts een beperkt aantal modellen is gratis te maken en je moet je wel registreren.

nces.ed.gov/nceskids/createagraph
Online grafiek maken en opslaan als afbeelding.

onlinecharttool.com
Online grafieken maken en opslaan als afbeelding.

rawgraphs.io
Online grafieken maken van tekst of spreadsheet en exporteren als svg of png.

HTML

(Onderafdeling van Gereedschap)

Door de veelheid aan online hulpmiddelen voor html, is het nogal lastig al het gereedschap voor html hier bij Gereedschap neer te zetten. Veel staat onder Gereedschap, maar vooral voor html5 staat ook een en ander bij html:

Online <canvas> uitproberen zie HTML → <canvas>.

Online url encoderen zie HTMLURL-encoding (escaping), URL-rewriting en links.

Online wijzigingen uitproberen van alleen html zie HTML → Online wijzigingen uitproberen.

Combinaties van css, html, JavaScript enzovoort online uitproberen en eventueel delen met anderen zie Gereedschap → Combinaties van css, html, JavaScript enzovoort uitproberen en eventueel delen.

Video en audio converteren, code voor <video> en <audio> genereren, enzovoort zie HTML → <embed>, <object>, <video>, <audio>, <iframe>.

Online uitproberen en dergelijke van formulieren, input, en dergelijke zie HTML → Formulieren, <input>, en dergelijke.

Html comprimeren zie Gereedschap → Snelheid testen, gzip, comprimeren (inclusief theorie).

HTTP Request en Response Header, cache

(Onderafdeling van Gereedschap)

csswizardry.com/2019/03/cache-control-for-civilians
Gedetailleerde tutorial over cache-control.

mnot.net/cache_docs
Uitgebreid artikel over http-headers, cache, enzovoort.

redbot.org
Online inhoud van Response Header bekijken. Geeft suggesties om eventuele problemen op te lossen.

request.urih.com
Online inhoud HTTP Request bekijken.

whichbrowser.net
Online browser-identificatie-string bekijken.

Imagemap maken

(Onderafdeling van Gereedschap)

maschek.hu/imgemap/imgmap
Online imagemap maken.

Kleuren

(Onderafdeling van Gereedschap)

Online contrast-ratio en dergelijke testen en (online) kleurenblindheid simuleren zie Toegankelijkheid → Contrast en kleurenblindheid.

color.hailpixel.com
Online op uiterst intuïtieve wijze bij elkaar passende kleuren zoeken. Zoeken in hex, levert notatie ook in hsl() en rgb().

colorbox.io
Online tussenkleuren tussen twee kleuren opzoeken en daarvan de hex-code krijgen. Aantal tussenkleuren, begin- en eindkleur, en nog veel meer, is in te stellen.

colorme.io
Online color()-functie uitproberen. Omdat deze omgezet kan worden naar hex, rgb(), hsl(), en dergelijke, is heel duidelijk te zien, hoe de color()-functie werkt.

cssgenerator.org/rgba-and-hex-color-generator
Online op uiterst makkelijke manier rgba()- of hex-kleur aanmaken.

december.com/html/spec/colorshades
Uitgaande van een basiskleur worden online drie bijbehorende lichtere kleuren getoond. Notatie in hex.

degraeve.com/color-palette
Online op zelf te kiezen afbeelding gebaseerd kleurenpalet maken. Notatie in hex.

hexcolortool.com
Online kleur bepaald percentage donkerder of lichter maken. Percentage is tot in duizendsten van procenten in te stellen (kleiner heb ik niet geprobeerd). Notatie in hex, hsla() en rgba().

hslpicker.com
Online hsla() kleurenwaarden uitproberen en gelijk vertalen naar rgba() en hex.

htmlcolorcodes.com/color-picker
Online tot zes (niet) bij elkaar passende kleuren zoeken. Levert notatie in hex, hsl() en rgb().

javascripter.net/faq/hextorgb
Waarde converteren van en naar hexadecimaal en rgb(). Met links naar cmyk()- en hsl()-converters.

leaverou.github.io/css-colors
Online namen van css3-kleurnamen omzetten naar hsl(), rgb() en hex.

projects.susielu.com./viz-palette
Online kleurenreeks maken, speciaal gericht op grafieken.

slayeroffice.com/tools/color_palette
Online kleurenreeks maken van twee keer vijf bij elkaar horende kleuren (notatie in hex).

standardista.com/hsla-color-picker
Online hsla() kleurenwaarden uitproberen in hsla() en gelijk vertalen naar rgba() en hex.

webfx.com/web-design/color-picker
Uiterst simpele kleurenkiezer voor één kleur. Levert notatie in hex, rgb() en hsl().

workwithcolor.com
Allerlei online gereedschappen voor kleuren, waaronder een hsl() kleurzoeker met vertaling naar hsla(), rgba() en hex, zoeken op kleurnaam en een kleurenschema maken.

Knoppenmakers

(Onderafdeling van Gereedschap)

cooltext.com
Online knoppenmaker. Tekst in de knop kan op ontzettend veel manieren worden weergegeven. Het eindresultaat is een afbeelding.

css-tricks.com/examples/ButtonMaker
Online css3-knoppenmaker. De css moet wel worden opgeschoond, want er staan nogal wat inmiddels overbodige regels in.

css3button.net
Online css3-knoppenmaker. De css moet wel worden opgeschoond, want er staan nogal wat inmiddels overbodige regels in.

lucazappa.com/brilliantMaker/buttonImage
Online knoppenmaker met mogelijkheid voor twee afbeeldingen in één knop.

Label maken

(Onderafdeling van Gereedschap)

acme.com/labelmaker
Online label, zoals dat uit een lettertang komt, maken.

Lay-out maken

(Onderafdeling van Gereedschap)

cssportal.com/layout-generator
Online code voor één tot drie kolommen, header en footer maken.

Links controleren

(Onderafdeling van Gereedschap)

anybrowser.com/linkchecker
Online links checken van één pagina.

brokenlinkcheck.com
Online tot 3000 pagina's gratis controleren. De gratis versie controleert niet op links naar documenten (PDF, DOC, en dergelijke), afbeeldingen en adressen waarin een '/' zit. Je kunt met de gratis versie dus alleen de hele site controleren.

home.snafu.de/ (Xenu's Link Sleuth)
Gratis programma om links te controleren. Werkt helaas alleen op Windows. (Volgens geruchten zou het op Linux goed draaien onder Wine. Linux-gebruikers weten wat ik bedoel. En voor de rest: nee, dat betekent niet dat al je links mooie dingen tevoorschijn toveren als je maar genoeg gezopen hebt.)

validator.w3.org/checklink (W3C)
Online links controleren van 1 tot maximaal 150 pagina's. Geeft heel gedetailleerde info over fouten en suggesties hoe die te herstellen.

wummel.github.io/linkchecker
Open source link-checker met veel extra's. Werkt op Windows en Linux, en een oudere versie ook op OS X. (In Linux zal hij meestal ook in de repositories zitten.)

Logo maken

(Onderafdeling van Gereedschap)

cooltext.com
Online logo maken. Maakt een afbeelding.

simwebsol.com/imagetool
Online logo maken. Maakt een afbeelding.

web2.0stylr.com/stylr
Online logo maken. Maakt een afbeelding.

Lorem Ipsum (opvultekst) maken

(Onderafdeling van Gereedschap)

blindtextgenerator.com/lorem-ipsum
Online Lorem Ipsum-tekst genereren. Keuze uit meerdere teksten.

catipsum.com
Online Lorem Ipsum-tekst voor kattenliefhebbers genereren.

cupcakeipsum.com
Online Lorem Ipsum-tekst voor zoetekauwen genereren.

generator-lorem-ipsum.info
Online Lorem Ipsum-tekst genereren. Keuze uit meerdere talen.

hipsum.co
Online artistieke Lorum Ipsum-tekst genereren.

meettheipsums.com
Hele serie links naar allerlei soorten generators voor opvultekst.

nl.lipsum.com
Online Lorem Ipsum-tekst genereren. Nederlandstalige site. Keuze uit meerdere talen, waaronder Nederlands.

webfx.com/web-design/html-ipsum
Online Lorem Ipsum-tekst maken. Tekst kan desgewenst gelijk binnen een element zoals <ol>, <dl>, enzovoort geplaatst worden.

Menu en list maken

(Onderafdeling van Gereedschap)

De meeste van deze menu's werken zonder aanpassingen niet (goed) op touchscreens.

cssplay.co.uk/menus/menu_builder_flyout (Stu Nicholls | CSSplay)
Online css-uitklapmenu maken.

Metatags genereren

(Onderafdeling van Gereedschap)

marketing-rss.nl/tools/metatags-generator
Online metatags genereren. Nederlandstalig.

Reguliere expressies ('Regular Expressions')

(Onderafdeling van Gereedschap)

jex.im/regulex
Met behulp van een soort schema, in combinatie met normale mensentaal, laten zien wat een bepaalde reguliere expressie doet.

projects.lukehaas.me/regexhub
Voorbeelden van veel gebruikte expressies. Kunnen online worden gewijzigd en uitgeprobeerd.

qntm.org/files/re/re
Tutorial met oefenopgaven die gelijk nagekeken worden.

regex101.com
Uiterst handige online-tester voor reguliere expressies. Naar keuze JavaScript-, PHP-, Python- of Golang-stijl.

regexcrossword.com
Tutorial in de vorm van op te lossen kruiswoordraadsels. (Heel origineel en leuk om te doen.)

regexlib.com
Grote bibliotheek met reguliere expressies. Met zoekmogelijkheid.

regexpal.com
Online reguliere expressies testen.

regexper.com
Online reguliere expressies uitproberen (JavaScript-stijl).

regular-expressions.info
Site over reguliere expressies met voorbeelden, tutorial, enzovoort.

Sitemap maken en dergelijke

(Onderafdeling van Gereedschap)

Alles over het maken, testen enzovoort van een sitemap voor zoekmachines is te vinden bij Zoekmachines → XML-sitemap.

Snelheid testen, gzip, comprimeren (inclusief theorie)

(Onderafdeling van Gereedschap)

Snelheid mobiele apparatuur testen zie Mobiele apparatuur → Validators, snelheid testen, browser sniffing, en dergelijke.

Invloed van animaties, zoals transform en transition, zie CSSanimation, transform en transition.

Afbeeldingen optimaliseren zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren (inclusief theorie).

Snelheid testen in het ontwikkelgereedschap van de browser staat bij Gereedschap → Debuggen.

'Lazy loading' zie CSS → Media Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-css-methoden zoals SVG, <picture> en <img>).

3perf.com/talks/web-perf-101
Uitgebreid overzicht van manieren om de snelheid van 'n site te verbeteren.

blog.radware.com/applicationdelivery/wpo/2014/03/waterfalls-101-how-to-use-a-waterfall-chart-to-diagnose-performance-pains
Uitleg over een 'waterfall chart' en hoe deze kan helpen om problemen met de snelheid van het laden van een pagina op te lossen. (Een waterfall chart is een grafische voorstelling van de laadtijden en dergelijke. Onder andere op de hierboven staande site webpagetest.org kun je zo'n waterfall chart laten maken.)

csscompressor.com
Online css comprimeren.

cssshrink.com
Online css comprimeren.

cssminifier.com
Online css comprimeren.

developers.google.com/speed/pagespeed/insights
Online testen hoe snel de pagina laadt en dergelijke. Met suggesties voor oplossingen.

dotcom-tools.com/website-speed-test
Snelheid van site testen vanaf 24 plaatsen op de wereld, waarbij gekozen kan worden uit zeven verschillende browsers. Van elke plaats is onder andere een waterfall beschikbaar.

github.com/davidsonfellipe/awesome-wpo
Pagina met links over van alles wat met de snelheid van de site te maken heeft.

gtmetrix.com/
Online testen hoe snel de pagina laadt met behulp van YSlow en PageSpeed. Met suggesties voor oplossingen.
Een uitleg over GTmetrix is te vinden op sitepoint.com.

javascript-minifier.com
Online JavaScript comprimeren.

kangax.github.io/html-minifier
Online html comprimeren.

medium.com/@fox/talk-the-state-of-the-web
Overzichtsartikel van dingen die met de weergavesnelheid te maken hebben. Met tips voor mogelijke verbeteringen.

refresh-sf.com
Online JavaScript, CSS en HTML comprimeren.

tonsky.me/blog/pwa
Artikel waarom PWA's en AMP niet nodig zijn voor een snelle site.

tools.pingdom.com/
Online heel overzichtelijke waterfall, overzicht aantal verzoeken aan de server, en dergelijke maken. Geeft ook overzicht van enkele mogelijke knelpunten.
Een uitleg over Pingdom is te vinden op sitepoint.com.

varvy.com/pagespeed
Online snelheid pagina testen. Met uitleg hoe eventuele problemen op te lossen.

varvy.com/tools/gzip
Online testen of gzip aanstaat en hoeveel bytes je daarmee bespaart.

web.dev/measure
Test online op snelheid, toegankelijkheid, geschiktheid voor zoekmachines, en dergelijke. Is van Google, dus kritisch bekijken, want over sommige adviezen kun je beslist anders denken.

webpagetest.org
Online in echte browsers op een aantal plaatsen in de wereld testen hoe snel de pagina laadt. Bij 'browser' kun je ook kiezen voor specifieke browsers op een fors aantal mobiele apparaten.
Uitleg op moz.com: Algemeen, Specifiek voor waterfall.
Een andere uitgebreide uitleg over de waterfall is te vinden op nooshu.github.io.

websiteoptimization.com/services/analyze
Online testen hoe snel de verschillende onderdelen van 'n pagina laden.

webspeedtest.cloudinary.com
Geeft online over alle afbeeldingen op een pagina gedetailleerde informatie, waaronder of comprimeren zinvol is. Desgewenst kun je de (eventueel gecomprimeerde) afbeelding in diverse formaten downloaden.

yellowlab.tools
Online hele serie tests uitvoeren op allerlei zaken die mogelijk de snelheid van de site nadeling kunnen beïnvloeden.

Sprite maken

(Onderafdeling van Gereedschap)

css.spritegen.com
Afbeeldingen uploaden en sprite plus bijbehorende code aanmaken.

responsive-css.spritegen.com
Afbeeldingen uploaden en responsieve sprite plus bijbehorende code aanmaken.

spritepad.wearekiss.com
Afbeeldingen uploaden en op uiterst simpele manier door middel van slepen sprite en bijbehorende css maken. Geen instelmogelijkheden. (Als je denkt dat de site niet werkt: het is gewoon een uiterst eenvoudige interface. Sleep een afbeelding naar de site en het werkt.)

toptal.com/developers/css/sprite-generator
Afbeeldingen uploaden en online combineren tot een sprite. De manier waarop de afbeeldingen binnen de sprite worden verwerkt, zoals padding, kan enigszins worden opgegeven.

Tabel maken

(Onderafdeling van Gereedschap)

tableizer.journalistopia.com
Online html-tabel maken van Excel-, Calc- of andere spreadsheet.

tablesgenerator.com/
Online html-tabel maken met bijbehorende css. Met veel opmaakmogelijkheden. Ook kan een bestaande tabel of CSV-bestand als basis worden gebruikt.

Tekstbrowser simuleren

(Onderafdeling van Gereedschap)

lynx.browser.org
Lynx is de meest simpele tekstbrowser om in te testen. Op (of via) deze site kan worden gezocht naar installatiepakketten voor diverse besturingssystemen.

w3.org/services/html2txt
Zet online html om in platte tekst zonder enige opmaak, behalve 'n indeling in alinea's. Prima manier om te zien of de inhoud logisch is opgebouwd.

Thumbnails maken

(Onderafdeling van Gereedschap)

makethumbnails.com
Online thumbnails maken van (groot) aantal geüploade afbeeldingen. Maat en kwaliteit kunnen worden ingesteld.

Tijdelijk online zetten

(Onderafdeling van Gereedschap)

webdevout.net/test
Tijdelijk 'n pagina online zetten, zodat anderen hem kunnen bekijken en bewerken.

URL-encoding

(Onderafdeling van Gereedschap)

URL-encoding zie HTMLURL-encoding (escaping), URL-rewriting en links.

Validators

(Onderafdeling van Gereedschap)

Validators staan bij de taal, waarvoor ze zijn bedoeld.

Vector-editor

(Onderafdeling van Gereedschap)

Zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren (inclusief theorie).

Verschillen tussen twee teksten vinden

(Onderafdeling van Gereedschap)

diffchecker.com/diff
Online verschillen tussen twee teksten vinden.

Video

(Onderafdeling van Gereedschap)

Video's converteren, code genereren voor <video>, bijschriften maken, enzovoort zie HTML → <embed>, <object>, <video>, <audio>, <iframe>.

Voortgangsindicator maken

(Onderafdeling van Gereedschap)

ajaxload.info
Online bewegende voortgangsindicator maken. Formaat is gif.

Weergave en dergelijke testen

(Onderafdeling van Gereedschap)

Sites voor mobiele apparatuur en dergelijke testen zie Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen. Hiet staat alleen het testen van verschillende resoluties.

Er worden hier alleen - voor zover bekend - gratis mogelijkheden vermeld. Er zijn nog tal van programma's en services, waarin je tegen betaling kunt testen in verschillende (versies van) browsers. Voor je ergens voor betaalt, zou ik eerst heel erg goed recensies lezen, want er schijnt nogal wat kaf onder het (soms dure) koren te zitten.

Bij de meeste sites hieronder wordt alleen de resolutie veranderd. Dat kun je in principe zelf ook met elke desktopbrowser. Maar als je het venster van een desktopbrowser verkleint tot de afmetingen van een mobieltje, heb je absoluut nog geen mobieltje: je bent slechts in het gelukkige bezit van een doodgewone desktopbrowser met de grootte van een mobieltje. De meeste hieronder genoemde sites zijn dus absoluut geen vervanging voor het testen op een écht mobieltje en dergelijke.

ami.responsivedesign.is
Pagina geljktijdig in vier veel voorkomende resolutes bekijken. De voorbeelden reageren, zoals ze in die resolutie horen te reageren (hoewel dat niet hetzelfde is als testen in een écht apparaat!). Heel handig om snel het uiterlijk in verschillende resoluties met elkaar te vergeljken. Wat niet gelijk duidelijk is: je kunt de verschillende apparaten verslepen.

asisness.com/asisness/tools/screensize
Online het uiterlijk van de pagina bekijken in een aantal vooringestelde resoluties.

browsers.evolt.org
Groot archief van te downloaden oude, zeer oude en prehistorische browsers. Voor de gevorderde masochist die graag in oude browsers wil testen. (Deze site lijkt niet meer bijgehouden te worden. Maar een oude browser blijft een oude browser, dus eigenlijk kan deze site niet echt verouderen.)

browsershots.org
Test online het uiterlijk van je pagina in heel veel verschillende browsers op allerlei besturingssystemen met behulp van 'n screenshot.

browserstack.com/text-on-microsoft-edge-browser
Gratis online testen in Edge. Je moet je wel registreren bij browserstack.

developer.microsoft.com/en-us/microsoft-edge/tools/vms
Images van Internet Explorer 8 tot en met 11 en Edge op Windows 7 tot en met Windows 10 voor allerlei verschillende virtuele machines voor Windows, Mac en Linux. Site is Nederlandstalig. Zo'n beetje elke denkbare combinatie lijkt aanwezig. Omdat het hier gaat om een echt Windows systeem met de echte Internet Explorer of Edge, is de weergave exact hetzelfde als op een normale Windows computer.

infobyip.com/testwebsiteresolution
Online het uiterlijk van de pagina bekijken in een zelf op te geven resolutie. Er kan in ieder worden geëmuleerd tot een grootte van 5000 bij 5000 px, maar mogelijk is er zelfs helemaal geen maximum.

mattkersley.com/responsive
Online het uiterlijk van een pagina gelijktijdig in meerdere resoluties testen, die naast en onder elkaar op het scherm worden gezet.

virtualbox.org
Binnen een bestaand besturingssysteem een ander besturingssysteem installeren. Omdat je echt een heel besturingssysteem met browsers en al installeert, geeft dit een (vrijwel) perfecte testmogelijkeheid. Hiermee kun je Windows 7 installeren binnen Windows 8 of Linux, OS X installeren binnen Linux, Linux installeren binnen Windows 10, enzovoort. Pagina's met handleidingen worden hier niet vermeld, want die veranderen te snel. Maar als je even op internet zoekt, vind je zat goede en actuele handleidingen. Om echt lekker te kunnen werken, heeft je computer wel voldoende geheugen nodig.

wysiwyg-editor

(Onderafdeling van Gereedschap)

Editors en IDE's zie Gereedschap → Editors en IDE's.

Verreweg het beste is om zelf html, css, enzovoort te leren schrijven. Dat kan ook geen kwaad, als je een wysiwyg-editor gaat gebruiken, omdat je dan in ieder geval de gegenereerde code kunt lezen (voor zover er geen volstrekte onleesbare bagger wordt geproduceerd...).

Drie veel gebruikte programma's van Microsoft zijn in ieder geval zonder meer ongeschikt: FrontPage, Publisher en Word.

Publisher en Word stoppen er code in die alleen voor Internet Explorer werkt.

FrontPage maakt code die vaak alleen goed werkt in Internet Explorer. In alle andere browsers zie je 't vaak helemaal verkeerd of soms zelfs helemaal niets. Ook in Internet Explorer 8 en later geeft 't vaak problemen. Microsoft zelf raadt al jaren aan het niet meer te gebruiken.

Ook LibreOffice en OpenOffice leveren een uitermate beroerde kwaliteit html en css.

bluegriffon.org
wysiwyg-editor voor html5, css3, SVG en MathML. De site is Engelstalig, het programma is ook Nederlandstalig. (Voor geïnteresseerden: dit zijn de makers van het oorspronkelijke nvu, waaruit later weer Kompozer is voortgekomen. Kompozer wordt al jaren niet meer geüpdate en is inmiddels te sterk verouderd.)

en.wikipedia.org/wiki
Vergelijkend overzicht van groot aantal wysiwyg-editors.

mozilla-nl.org/mozbrowser/forum
Nederlandstalig forum over Kompozer, nvu en Bluegriffon. Kompozer en nvu zijn volstrekt verouderd en niet meer bruikbaar. Bluegriffon wordt nog wel onderhouden.

.htaccess

css-tricks.com/snippets/htaccess
Hele serie voorbeelden voor van alles en nog wat in .htaccess.

homepage-maken.nl/htaccess
Cursus .htaccess. Nederlandstalig.

htaccesseditor.com/
Online .htaccess-bestand aanmaken met redirects, 404-pagina, enzovoort.

htmlbasix.com/disablehotlinking
Online code genereren om hotlinken (rechtstreeks linken naar afbeeldingen en dergelijke) te verbieden.

ip2location.com/free/visitor-blocker
Lijsten met alle ip-nummers van 'n land om via .htaccess te blokkeren. Of dit écht alle ip-nummers van een land bestrijkt, weet ik niet. Je blokkeert hiermee dus álle bezoekers, ook fatsoenlijke.

jeroen.com/woordenboek/url_rewriting
Waarom en hoe van URL rewriting. Nederlandstalig.

onetomarket.nl/blog/seo/301-redirect-tutorial
Uitgebreid artikel over redirecten met behulp van de 301-code. Nederlandstalig.

shop.alterlinks.com/htaccess/validator
.htaccess-validator.

software77.net/geo-ip/
Lijst met ip-nummers van 'n heel land aanmaken. Kan gebruikt worden om hele land te blokkeren. Of dit écht alle ip-nummers van een land bestrijkt, weet ik niet. Je blokkeert hiermee dus álle bezoekers, ook fatsoenlijke.

websonic.nl/tutorials/websitehtaccess
Hele serie handleidingen, waaronder bestanden en/of mappen beveiligen met een wachtwoord. Nederlandstalig.

HTML

Browser support

(Onderafdeling van HTML)

zie CSS → Browser support.

Bugs en hacks

(Onderafdeling van HTML)

zie CSS → Bugs en hacks.

<canvas>

(Onderafdeling van HTML)

Canvas, CSS, WebGL, SVG of ...? staat bij SVG.

blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve
Online canvas Bézier-kromme uitproberen. De lijn verandert door de controlepunten te verslepen, waarbij de code gelijk mee verandert.

blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve
Online canvas kwadratische Bézier-kromme uitproberen. De lijn verandert door de controlepunten te verslepen, waarbij de code gelijk mee verandert.

developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
Zeer uitgebreide <canvas>-tutorial.

goalkicker.com/HTML5CanvasBook
Gratis pdf-boek over <canvas>, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

literallycanvas.com
Simpel open source canvas-tekenprogramma, dat in elke pagina kan worden ingebouwd. Met uitgebreide handleiding.

udacity.com/course/html5-canvas
Online cursus canvas. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

w3.org/TR/2dcontext
Ontwerp-specificatie Canvas 2D context.

Charsets, unicode, entiteiten

(Onderafdeling van HTML)

In het algemeen is utf-8 de enig juiste karakterset voor websites. Andere karaktersets staan hier eigenlijk alleen nog maar voor het geval je iets op wilt zoeken. (En voor gevorderde masochisten die zichzelf op 'n winteravond gezellig willen pesten door deze ellendepukkels nog 'ns te bekijken.)

Eén of meerdere tekens, entiteiten, codes, en dergelijke opzoeken op basis van een bepaald teken, tekening, verzameling (zoals pijlen), enzovoort zie CSS → Fonts en typografie → Bepaald karakter opzoeken.

Sets met tekens, entiteiten, en dergelijke

(Onderafdeling van HTML → Charsets, unicode, entiteiten)

css-voorbeelden.nl/artikelen/lijsten/artikelen-063
Lijsten met utf-8-codes en entiteiten. Nederlandstalig.

dev.w3.org/html5/html-author/charref
Overzicht van html5-entiteiten (met utf-8- en numerieke codes). Let op: lang niet al deze entiteiten worden door alle browsers weergegeven! Goed testen is absoluut noodzakelijk.

digitalmediaminute.com/reference/entity
Uiterst overzichtelijk overzicht van entiteiten (met numerieke en unicode-waardes).

en.wikipedia.org/wiki/List_of_Unicode_characters
Álle unicode-karakters op één pagina, opgedeeld in blokken.

fileformat.info/info/unicode
Zeer uitgebreide informatie over utf-8 zoals welk font welk teken ondersteunt en een alfabetische lijst van unicode-karakters.

iana.org/assignments/character-sets
Zeer uitgebreid overzicht en beschrijving van charsets.

kostis.net/charsets
Tekensets uit heel veel charsets, waaronder (naar computermaatstaven) prehistorische. Laat online de inhoud van elke charset zien.

toptal.com/designers/htmlarrows
Overzicht van de meest gebruikte utf-8-codes en entiteiten, ingedeeld in groepen, zoals pijlen en valuta.

unicode.org/charts/ (The Unicode Consortium)
Unicode - Lettertekens. Te downloaden pdf-bestanden.

xhtml5.nl/naslag/karaktersets
Meest voorkomende karaktersets. Kunnen online worden bekeken. Nederlandstalig.

xhtml5.nl/naslag/karaktersets/unicode
Alle tekens uit unicode. Kunnen online per blok bekeken worden. Nederlandstalig.

Overig

(Onderafdeling van HTML → Charsets, unicode, entiteiten)

css-voorbeelden.nl/artikelen/html/head/artikelen-064
Artikel over charset, tekenset, utf-8, entiteiten, accenten, en dergelijke. Nederlandstalig.

fileformat.info/info/unicode
Zeer uitgebreide informatie over utf-8 zoals welk font welk teken ondersteunt en een alfabetische lijst van unicode-karakters.

htmlhelp.com/reference/html40/entities
Tabellen om te controleren of je browser entiteiten, decimale en hexadecimale codes goed weergeeft.

ltg.ed.ac.uk/~richard/utf-8
Zoeken op naam en zoeken op en converteren tussen decimale, octale en hexadecimale utf-8 code.

r12a.github.io/app-conversion
Online van en naar hele reeks formaten (hex, unicode, enzovoort) converteren.

reedbeta.com/blog/programmers-intro-to-unicode
Aritkel over de opbouw van unicode.

smashingmagazine.com/2012/06/all-about-unicode-utf8-character-sets
Uitgebreide uitleg over unicode, tekensets, en dergelijke.

the-pastry-box-project.net/oli-studholme/2013-october-8
Artikel over hoe je servers, tekstverwerkers, html, css, enzovoort goed kunt instellen voor utf-8. Met links naar meer theoretische artikelen en dergelijke.

validator.w3.org/i18n-checker
Pagina of bestand controleren op potentiële problemen op het gebied van internationalisatie.

w3.org/International/techniques/authoring.html
Pagina met gigantisch aantal links naar artikelen en sites over onderwerpen die met internationalisatie te maken hebben. Onder andere links naar artikelen van w3c zelf voor mensen die net met dingen als charsets en unicode beginnen.

data-attribuut (data-*)

(Onderafdeling van HTML)

developer.mozilla.org/en-US/Learn/HTML/Howto/Use_data_attributes
Korte uitleg over het data-attribuut.

sitepoint.com/how-why-use-html5-custom-data-attributes
Tutorial met voorbeelden over het gebruik van het data-attribuut.

<details> en <summary>

(Onderafdeling van HTML)

scottohara.me/blog/2018/09/03/details-and-summary
Uitgebreide beschrijving van <details> en <summary>.

webdesign.tutsplus.com/tutorials/explaining-the-details-and-summary-elements
Tutorial over <details> en <summary>.

<dialog>

(Onderafdeling van HTML)

css-tricks.com/some-hands-on-with-the-html-dialog-element
Korte tutorial met mogelijkheden van <dialog>.

viget.com/articles/the-dialog-element
Korte beschrijving van het <dialog>-element.

Dingen mogelijk maken die (nog) niet werken

(Onderafdeling van HTML)

Zie CSS → Bugs en hacks → Niet-ondersteunde, elementen, eigenschappen, enzovoort mogelijk maken.

Doctype (DTD)

(Onderafdeling van HTML)

Quirks mode zie CSSQuirks mode.

css-voorbeelden.nl/artikelen/html/head/artikelen-102
Wat is het beste doctype? En waarom is dat zo? En hoe is dat zo gekomen? En waarom...? Daarom!

w3.org/QA/04/valid-dtd-list
Lijst met geldige doctypes (DTD's).

w3schools.com/xml/xml_dtd_intro
DTD Tutorial en overzicht. (Dit is een heel theoretisch verhaal en alleen interessant voor echt geïnteresseerden.)

xhtml5.nl/naslag/html/doctype
Nederlandstalig overzicht van doctypes, met korte uitleg.

<embed>, <object>, <video>, <audio>, <iframe>

(Onderafdeling van HTML)

Browser support

(Onderafdeling van HTML → <embed>, <object>, <video>, <audio>, <iframe>)

en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Media)
Browser support <video>- en <audio>-element uit HTML5. Toont ook ondersteuning voor alle parameters, DOM, enzovoort.

Converteren

(Onderafdeling van HTML → <embed>, <object>, <video>, <audio>, <iframe>)

audacityteam.org
Open source-programma om audio te converteren (en bewerken). Geschikt voor Linux, OS X en Windows. (In Linux zal het meestal in de repo's zitten.)

ffmpeg.org
Open source-programma om audio en video te converteren. Geschikt voor Linux, OS X en Windows. (In Linux zal het meestal in de repo's zitten.)

handbrake.fr
Open source-programma om video te converteren. Geschikt voor Linux, OS X en Windows. (In Linux zal het meestal in de repo's zitten.)

media.io
Online audio en video converteren van en naar een aantal formaten.

onlinevideoconverter.com/nl
Online video en audio converteren. Nederlandstalig.

video.online-convert.com/convert-to-webm
Online video converteren van en naar een aantal formaten.

Ondertiteling en bijschriften (<track>)

(Onderafdeling van HTML → <embed>, <object>, <video>, <audio>, <iframe>)

developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
Uitleg hoe ondertiteling en bijschriften aan te brengen bij <video>.

quuz.org/webvtt
Validator voor WebVTT.

scottbw.wordpress.com (Creating subtitles and audio descriptions with html5 video)
Uitleg hoe ondertiteling te maken in het WebVTT formaat.

w3.org/TR/webvtt1
Ontwerp-specificatie WebVTT (ondertitels en dergelijke).

w3.org/WAI/media/av
Tutorial over het toegankelijk maken van <audio> en >video>.

washington.edu/accessibility/videos/free-captioning
Overzicht van mogelijkheden om gratis te ondertitelen, tips, en dergelijke.

zcorpan.github.io/live-webvtt-viewer
Online onderschriften in WebVTT-formaat bekijken (om te controleren of het goed werkt).

Theorie, code en voorbeelden

(Onderafdeling van HTML → <embed>, <object>, <video>, <audio>, <iframe>)

Ingebedde inhoud aanpassen voor responsive weergave zie CSS → Media Query's en Responsive Web Design.

css-voorbeelden.nl/afbeelding/video/afbeelding-080
Video zonder plug-in in (bijna) elke browser, aangepast aan venstergrootte, met behulp van <video>. Met uitgebreide Nederlandstalige uitleg.

css-voorbeelden.nl/afbeelding/video/afbeelding-116
Met behulp van wat JavaScript naar een kleiner venster (zoals van een smartphone) een kleinere video sturen dan naar een groter venster. Nederlandstalig.

css-voorbeelden.nl/afbeelding/audio/afbeelding-126
Geluid afspelen met behulp van het <audio>-element. Nederlandstalig.

css-voorbeelden.nl/tekst/invoegen/tekst-108
Bestanden invoegen met behulp van <object>. Met uitgebreide Nederlandstalige uitleg.

simpl.info/video/events
Laat zien welke events optreden tijdens het afspelen, pauzeren, enzovoort van een video. De events worden achter elkaar vertoond.

smashingmagazine.com/2018/10/video-playback-on-the-web-part-2
Waarom en hoe je kleinere video's naar kleinere vensters (zoals smartphones) kunt sturen.

w3.org/2010/05/video/mediavents
Laat zien welke events optreden tijdens het afspelen, pauzeren, enzovoort van een video. De events worden gelijktijdig vertoond.

w3schools.com/html/html_media
Multimedia tutorials en online uitproberen.

Favicon

(Onderafdeling van HTML)

Alles over facicons, ook de theorie, is te vinden bij Gereedschap → Favicon maken.

<figure> en <figcaption>

(Onderafdeling van HTML)

<img> en <picture> zijn, anders dan <figure>, alleen bedoeld voor afbeeldingen en staan bij CSS → Media Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-css-methoden zoals SVG, <picture> en <img>).

scottohara.me/blog/2019/01/21/how-do-you-figure
Artikel over het gebruik van <figure>, <figurcaption> en eventueel alt.

Formulieren, <input>, en dergelijke

(Onderafdeling van HTML)

Online voorbeelden en uitproberen van reguliere expressies voor pattern attribuut zie Gereedschap → Reguliere expressies ('Regular Expressions').

Opmaak (het uiterlijk) van formulieren, <input>, en dergelijke zie CSS → Forms, buttons, en dergelijke.

adamsilver.io/articles/form-design-from-zero-to-hero
Tips om op te letten voor toegankelijke formulieren. Met bij elke tip links naar artikelen die dieper op de tip ingaan.

css-tricks.com/form-validation
Zeer uitgebreide tutorial over in de browser valideren van formulieren. (Vier delen, onderaan staan de links naar de andere delen.)

css-tricks.com/the-output-element
Artikel over het gebruik van het <output>-element.

css-voorbeelden.nl/tekst/bewerken/tekst-079
Formulier met meerdere soorten invoervelden en Nederlandstalige uitleg.

docs.microsoft.com/en/us/previous-versions/msdn10/dn133614
Uitgebreid artikel over het gebruik van datalist.

formlinter.com
Online toegankelijkheid van formulier testen.

inputtypes.com
Online allerlei soorten invoervelden, validatie, en dergelijke uitproberen.

nativeformelements.com
Online zien hoe alle form-elementen er in de browser, waarmee je deze pagina bezoekt, uitzien.

smashingmagazine.com/2019/01/html5-input-types
Artikel over de ondersteuning van diverse types <input> in browsers.

theblog.adobe.com/designing-more-efficient-forms-structure-inputs-labels-and-actions
Uitgebreid artikel met tips om goede formulieren te maken.

thenewcode.com/923/Using-The-HTML5-Date-Input
Uitleg over <input type="date"> met manieren om het tijdvak van de in te voeren datum te beperken.

udacity.com/course/building-high-conversion-web-forms
Online cursus efficiënte formulieren maken. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

webcode.tools/html-generator
Online code voor allerlei onderdelen van formulieren en dergelijke maken, waarbij gelijk het resultaat wordt getoond.

webdesign.tutsplus.com/tutoruals/html5-form-validationi-with-the-pattern-attribute
Tutorial over het valideren van formulieren.

webfx.com/blog/web-design/new-html5-form-input-types
Overzicht van input types, met voorbeeldpagina.

wufoo.com/html5
Online testen wat in de browser, waarmee je deze pagina bezoekt, werkt van html5-formulieren.

<head>

(Onderafdeling van HTML)

3perf.com/blog/link-rels
Uitgebreide uitleg over preload, prefetch, preconnect, dns-prefetch en prerender.

htmlhead.dev
Uitgebreid overzicht van alles wat in <head> kan worden geplaatst. (En dat is veel...)

iana.org/assignments/link-relations
Overzicht van alle geregistreerde relaties bij <link>. Met link naar bijbehorende specificatie en dergelijke.

smashingmagazine.com/2019/04/optimization-performance-resource-hints
Uitgebreide uitleg over het gebruik van dns-prefetch, preconnect, prefetch en prerender..

<hr>

(Onderafdeling van HTML)

css-voorbeelden.nl/tekst/lijnen/tekst-105
Voorbeelden van <hr>'s die geen aaneengesloten, rechte lijn zijn. Nederlandstalig.

<i>, <b>, <em> en <strong>

(Onderafdeling van HTML)

html5doctor.com/i-b-em-strong-element
Artikel over de verschillen tussen <i>, <b>, <em> en <strong> in html4 en html5, en wanneer wat te gebruiken.

Imagemap

(Onderafdeling van HTML)

Online imagemap maken zie Gereedschap → Imagemap maken.

<img>

(Onderafdeling van HTML)

Zie CSS → Media Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-css-methoden zoals SVG, <picture> en <img>).

Landcodes

(Onderafdeling van HTML)

loc.gov/standards/iso639-2/php/English_list
Alfabetische lijst met álle ISO-landcodes. Voor een website wordt de tweeletterige ISO 639-1-code gebruikt, eventueel met een subcode.

nl.wikipedia.org/wiki/ISO_639
Nederlandstalig artikel over ISO 639, de standaard voor taalcodes. Hierin wordt uitstekend beschreven, hoe techneuten een toch niet al te ingewikkeld systeem vrijwel onbegrijpelijk weten te maken.

r12a.github.io/app-subtags
Online zoekmogelijkheid om subcodes bij talen te vinden, zoals en-ca (Canadees Engels).

w3schools.com/ref_language_codes
Alfabetische lijst met tweeletterige ISO 639-1 landcodes.

Lijsten (<dl>, <li>, <ol> en <ul>)

(Onderafdeling van HTML)

tutorialspoint.com/html/html_lists
Uitgebreide tutorial over <ul>, <ol>, <dl> en de bijbehorende elementen en attributen..

LocalStorage, SessionStorage en IndexedDB

(Onderafdeling van HTML)

dev.opera.com/articles/introduction-to-indexeddb
Tutorial over IndexedDB.

taniarascia.com/how-to-use-local-storage-with-javascript
Tutorial over LocalStorage aan de hand van een nog-te-doen lijstje.

<meter> en <progress>

(Onderafdeling van HTML)

css-tricks.com/html5-meter-element
Uitgebreid artikel over toepassingen, opmaak, enzovoort van <meter>.

css-tricks.com/html5-progress-element
Uitgebreid artikel over toepassingen, opmaak, enzovoort van <progress>.

Microdata

(Onderafdeling van HTML)

diveintohtml5.info/extensibility
Uitgebreide uitleg over microdata.

html5doctor.com/microdata
Zeer uitgebreide uitleg over microdata.

microdatagenerator.com/generator
Online microdata maken voor allerlei soorten bedrijven, instellingen, enzovoort.
Deze site is Engelstalig, maar dat maakt in de meeste gevallen weinig uit: in plaats van bijvoorbeeld een Engelstalig adres vul je gewoon 'n Nederlandstalig adres in.

schema.org
Overzicht van gedefinieerde microdata.

search.google.com/stuctured-data/testing-tool
Rich snippets-validator, valideert ook microdata.

w3.org/TR/microdata
(Ontwerp-)specificatie microdata.

MIME-types

(Onderafdeling van HTML)

freeformatter.com/mime-types-list
Lijst van MIME-types zoals die onder andere kunnen worden gebruikt bij formulieren.

sitepoint.com/mime-types-complete-list
Lijst van MIME-types zoals die onder andere kunnen worden gebruikt bij formulieren.

Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken

(Onderafdeling van HTML)

Zie CSS → Bugs en hacks → Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken.

Nieuwsbrieven en dergelijke

(Onderafdeling van HTML)

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Online wijzigingen uitproberen

(Onderafdeling van HTML)

Alle (grotere) browsers hebben ingebouwde ontwikkelgereedschappen, waarin je online code kunt wijzigen. Ook als het om sites van anderen gaat. Zie hiervoor Gereedschap → Debuggen.

Als iets niet hier staat, kun je het ook bij Gereedschap proberen. Combinaties van css, html, JavaScript enzovoort online uitproberen en eventueel delen met anderen zie Gereedschap → Combinaties van css, html, JavaScript enzovoort uitproberen en eventueel delen.

w3schools.com/html/html_examples
HTML-voorbeelden online uitproberen.

Outline en sectievormende elementen

(Onderafdeling van HTML)

Het hele html5-outline-verhaal is inmiddels (gelukkig) at risk. Er bestaat geen enkele goede implementatie. Het officiële advies van w3c is om, in ieder geval voorlopig, de oude methode van <h1> tot en met <h6> te blijven gebruiken. De informatie over semantische elementen, sectievormende elementen, enzovoort, is nog wel actueel.

developer.paciellogroup.com/blog/2013/10/using-html5-section-element
Artikel over wanneer <section> en wanneer <div> te gebruiken.

html5doctor.com/downloads/h5d-sectioning-flowchart
Uit te printen flowchart van nieuwere semantische elementen als <nav>, <section>, enzovoort.

Overzicht elementen, cursussen, tips, specificatie, en dergelijke

(Onderafdeling van HTML)

Het over-, overgrote deel van de cursussen op internet is echt van een bedroevende kwaliteit en/of zwaar verouderd. Aan zo'n cursus heb je helemaal niets. Integendeel: je leert technieken, waar je tegenwoordig helemaal niets meer aan hebt, en die je later weer voor het grootste deel af moet leren. De cursussen hieronder zijn kwalitatief goed.

codecademy.com/learn/learn-html
Interactieve cursussen html en css. Alleen de basiscursussen zijn gratis. Je moet je wel registreren.

devdocs.io
Browser support voor zo'n beetje elk denkbare taal, ook in mobiele browsers. Met voorbeelden, links naar meer info, enzovoort.

developer.mozilla.org/en-US/docs/Web/HTML/Attributes
Overzicht van alle html-attributen en bij welke elementen ze gebruikt mogen worden.

developer.mozilla.org/en-US/docs/Web/HTML/Element
Mozilla's overzicht van wat Firefox ondersteunt aan html. Met voorbeelden en uitleg. Heeft ook verwijzingen naar wat andere (mobiele) browsers ondersteunen, en op welke (afwijkende) manier die dat doen.

developer.mozilla.org/en-US/docs/Learn/HTML
Cursus html. Met de gebruikelijke grondigheid van Mozilla.

freecodecamp.org/learn
Interactieve cursus css, html en JavaScript.

goalkicker.com/HTML5LBook
Gratis pdf-boek over HTML, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

html.com/attributes
Alfabetisch overzicht van attributen. Met omschrijving en voorbeeldcode.

html.com/tags
Alfabetisch overzicht van tags. Met omschrijving en voorbeeldcode.

html.spec.whatwg.org/multipage
html5-specificatie van W3C en WHATWG. Na een jarenlange splitsing hebben deze twee clubs (gelukkig) weer dezelfde specificatie. Specifieke (oudere) versies staan iets hieronder bij w3c.

htmlreference.io
Alfabetisch overzicht van elementen met bij elk element een voorbeeld.

quackit.com/html
Uitgebreid overzicht van html-elementen met voorbeelden, cursussen, enzovoort.

rawgit.com/w3c/elements-of-html
Overzicht van álle elementen uit xhtml en html, ook elementen die niet meer bestaan. Met links naar bijbehorende specificatie.

thenewcode.com/865/A-Complete-Web-Development-Reading-List-for-HTML
Cursus html in de vorm van een leeslijst.

tutsplus.com/courses
Groot aantal cursussen, waaronder gratis. Links kun je een onderwerp kiezen. Voor het volgen van een cursus moet je je wel registreren.

udacity.com/course/website-performance-optimization
Online cursus website optimaliseren. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

w3.org/TR/html401
Officiële specificatie html 4.01.

w3.org/TR/html51
Specificatie HTML 5.1. Bevat ook WAI-ARIA informatie over toegestane roles en dergelijke. (Inmiddels vervangen door het gelijk hieronder staande HTML 5.2.)

w3.org/TR/html52
Specificatie HTML 5.2. Bevat ook WAI-ARIA informatie over toegestane roles en dergelijke.

w3.org/TR/html53
Ontwerp-specificatie HTML 5.3. Bevat ook WAI-ARIA informatie over toegestane roles en dergelijke.

w3schools.com/tags
Overzicht van HTML-tags, met uitgebreide uitleg.

<picture>

(Onderafdeling van HTML)

Zie CSS → Media Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-css-methoden zoals SVG, <picture> en <img>).

<pre>

(Onderafdeling van HTML)

sitepoint.com/everything-need-know-html-pre-element
Uitgebreid artikel over het <pre>-element met allerlei mogelijke problemen en daarbij horende mogelijke oplossingen.

Snelheid

(Onderafdeling van HTML)

Algemene tests op snelheid, tips, theorie, en dergelijke zie Gereedschap → Snelheid testen, gzip, comprimeren (inclusief theorie).

Snelheid mobiele apparatuur testen zie Mobiele apparatuur → Validators, snelheid testen, browser sniffing,en dergelijke.

Invloed van animaties, zoals transform en transition, zie CSSanimation, transform en transition.

Afbeeldingen optimaliseren zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren (inclusief theorie).

Tabellen (<table>, <td>, en dergelijke)

(Onderafdeling van HTML)

Online tabel maken zie Gereedschap → Tabel maken.

Tabellen voor Responsive Web Design zie CSS → Media Query's en Responsive Web Design.

css-tricks.com/complete-guide-table-element
Uitgebreid artikel over het gebruik van tabellen. Met een beschrijving van alle onderdelen, links naar meer info, enzovoort.

smashingmagazine.com/2019/01/table-design-patterns-web
Artikel over het maken van toegankelijke responsieve tabellen.

URL-encoding (escaping), URL-rewriting en links

(Onderafdeling van HTML)

meyerweb.com/eric/tools/dencoder
Online url encoderen (speciale tekens vervangen door codes) en decoderen.

microformats.org/wiki/existing-rel-values
Lijst met toegestane waarden bij rel="..."

opinionatedgeek.com/codecs/urlencode
Online url encoderen (speciale tekens vervangen door codes).

stevesouders.com/blog/2013/11/07/prebrowsing
Uitleg over het gebruik van attributen als rel="prerender" om sites sneller weer te geven.

w3schools.com/tags/ref_urlencode
URL-encoding Reference (Dat zijn die % in url's).

Validators

(Onderafdeling van HTML)

htmlhint.com
HTML-validator die desgewenst ook kan controleren op het sluiten van <p>, plaats van het doctype, en dergelijke. Dingen die niet móéten, maar wel verstandig zijn. Zoiets als html controleren met de strengere maatstaven van het overleden xhtml.

manifest-validator.appspot.com
Web manifest Validator.

validator.nu
Alternatief adres voor de hieronder genoemde validator op validator.w3.org/nu. Deze heeft een aantal opties, die bij die hieronder missen.

validator.w3.org/nu
Validator van W3C, de club die de officiële specificactie van onder andere html5 bijhoudt. Online bij één pagina tegelijk html valideren. Valideert op onder andere html5, ARIA, MathML en SVG.

Web Components (Custom elements, Shadow DOM, <template> en <slot>)

(Onderafdeling van HTML)

bitsofco.de/what-is-the-shadow-dom
Uitleg over wat Shadow DOM is, met enkele voorbeelden.

blog.logrocket.com/understanding-shadow-dom-v1
Uitgebreide, duidelijke tutorial over Shadow DOM.

blog.teamtreehouse.com/working-with-shadow-dom
Uitleg over wat Shadow DOM is, met enkele voorbeelden.

brucelawson.co.uk/2014/on-the-accessibility-of-web-components-again
Artikel over toegankelijkheid en web components.

code.tutsplus.com/tutorials/intro-to-shadow-dom
Uitleg met voorbeelden over Shadow DOM.

css-tricks.com/an-introduction-to-web-components
Uitgebreide tutorial in vijf delen over Web Components (bovenaan de pagina staan links naar de andere delen).

dev.to/thepassle/web-components-from-zero-to-hero
Uitgebreide tutorial over Web Components en alles daaromheen.

github.com/mateusortiz/webcomponents-the-right-way
Pagina met veel links naar van alles wat met web components te maken heeft.

hacks.mozilla.org/2018/11/the-power-of-web-components
Tutorial over Web Components.

webdesign.tutsplus.com/articles/how-to-create-your-own-html-elements-with-web-components
Inleiding met enkele voorbeelden over wat web components zijn.

JavaScript, DOM en CSSOM

Browser support en referenties zie CSS → Browser support.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

JavaScript is een van de 'dialecten' van ECMAScript, zoals de naam van de officiële specificatie luidt. Tot en met JavaScript versie 6 wordt algemeen de naam 'JavaScript' gebruikt, daarna vaak 'ECMAScript' gevolgd door het jaartal van de versie.

CSSOM (CSS Object Model)

(Onderafdeling van JavaScript, DOM en CSSOM)

css-tricks.com/an-introduction-to-the-css-object-model-cssom
Uitleg over de CSSOM en hoe deze gebruikt kan worden om css te wijzigen.

DOM (Document Object Model) en events

(Onderafdeling van JavaScript, DOM en CSSOM)

Shadow DOM zie HTMLWeb Components (Custom elements, Shadow DOM, <template> en <slot>).

In de meer algemene tutorials en voorbeelden onder JavaScript, DOM en CSSOM → Tutorials, voorbeelden is vaak ook nog info over de DOM te vinden.

developer.mozilla.org/en-us/docs/Web/Events
Overzicht van alle bestaande events, met links naar bijbehorende specificatie en dergelijke.

digitalocean.com/community/tutorials/introduction-to-the-dom
Uitgebreide uitleg over de DOM.

domenlightenment.com
Online-versie van DOM Enlightenment - Exploring the relationship between JavaScript and the modern HTML DOM. Uitgebreide uitleg over het rechtstreeks manipuleren van de DOM, zonder gebruik van een bibliotheek zoals jQuery.

itnext.io/using-the-dom-like-a-pro
Overzicht van veel gebruikte methoden voor DOM-manipulatie, zoals toevoegen, wijzigen en verwijderen van elementen.

patrickhlauke.github.io/touch/tests/results
Volgorde waarin events worden afgevuurd bij aanraken van touchscreen in groot aantal combinaties van browsers en systemen.

smashingmagazine.com/2013/11/an-introduction-to-dom-events
Uiterst duidelijke uitleg over DOM events, met ook al uiterst duidelijke voorbeelden.

Scripts, bibliotheken en frameworks

(Onderafdeling van JavaScript, DOM en CSSOM)

Scripts en dergelijke speciaal voor één soort element, eigenschap, en dergelijke (zoals voor canvas of fonts) kunnen ook bij dat onderwerp staan.

Scripts, polyfils en dergelijke om dingen mogelijk te maken in browsers die iets niet ondersteunen staan bij CSS → Bugs en Hacks → Niet ondersteunde elementen, eigenschappen, enzovoort mogelijk maken.

Scripts, frameworks, en dergelijke speciaal voor mobiele apparatuur staan bij Mobiele apparatuur → Frameworks.

dojotoolkit.org
Bibliotheek met allerlei functies.

dynamicdrive.com
Grote hoeveelheid JavaScripts met uitgebreide uitleg. Veel scripts hebben werkende demo's.

github.com/30-seconds/30-seconds-of-code
Groot aantal korte stukjes code voor veel voorkomende taken.

github.com/mnater/Hyphenator
Script dat woorden automatisch laat afbreken, net zoals dat in een tekstverwerker zou gebeuren. Werkt met veel talen, waaronder Nederlands. Nederlands is summier getest, en het lijkt goed te werken.

greensock.com/gsap
GSAP (GreenSock Animation Platform): bibliotheek met allerlei functies voor animaties.

hammerjs.github.io
Bibliotheek om gebaren op touchscreens te verwerken.

javascripting.com
Uitgebreid overzicht van bibliotheken, frameworks en plug-ins. Met uitgebreide beschrijvingen, links, enzovoort.

jquery.com
Bibliotheek met allerlei functies.
Heel vaak wordt een grote bibliotheek als jQuery gebruikt, terwijl één regeltje JavaScript die hele bibliotheek overbodig maakt. jQuery blonk uit in het oplossen van incompabitliteiten tussen browsers, maar is daar nauwelijks nog voor nodig. Als je het alleen daarvoor gebruikte, heb je het dus inmiddels mogelijk niet meer nodig.
youmightnotneedjquery: laat zien wat jQuery doet en wat de code rechtstreeks in JavaScript is.
tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript: handige gids om jQuery te vervangen door JavaScript.

jster.net
Gigantisch overzicht van bibliotheken, ingedeeld naar waar ze voor zijn bedoeld.

lokeshdhakar.com/projects/lightbox2 (Lightbox)
Slideshow met effecten.

microjs.com
Gigantisch aantal gespecialiseerde kleine bibliotheken.

mootools.net
JavaScript framework.

plainjs.com
Groot aantal scripts en functies die werken zonder externe bibliotheek.

selection.datavisualization.ch
Lijst met links naar bibliotheken, frameworks, en dergelijke voor gespecialiseerde doeleinden.

velocityjs.org
velocity.js: bibliotheek met veel functies voor animaties.

Tutorials, voorbeelden

(Onderafdeling van JavaScript, DOM en CSSOM)

Shadow DOM zie Web Components (Custom elements, Shadow DOM, <template> en <slot>).

Specifiek voor API's en dergelijke voor html5 zie bij HTML.

JavaScript of css gebruiken voor animaties staat bij CSSAnimation, transform en transition.

Tutorials en dergelijke voor specifiek DOM en events zie JavaScript, DOM en CSSOM.

codecademy.com/learn/introduction-to-javascript
Interactieve cursussen JavaScript. Alleen de basiscursussen zijn gratis. Je moet je wel registreren.

devdocs.io
Browser support voor zo'n beetje elk denkbare taal, ook in mobiele browsers. Met voorbeelden, links naar meer info, enzovoort.

developer.mozilla.org/en-US/docs/Web/JavaScript
Links naar allerlei uiterst nuttige onderwerpen, zoals wat nieuw is in welke versie van JavaScript, uitgebreide tutorials, referentie, enzovoort.

eloquentjavascript.net
Uitgebreid online lesboek over JavaScript. Met oefeningen (en oplossingen).

freecodecamp.org/learn
Interactieve cursus css, html en JavaScript.

freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript
Artikel over het verschil tussen JavaScript en ECMAScript, maar ook uitleg over Babel, JavaScript-engines in browsers, enzovoort.

github.com/getify/You-Dont-Know-JS
Gratis versies van een aantal JavaScriptboeken van O'Reilly.

github.com/leonardomso/33-js-concepts
Enorme lijst met ilnks naar artikelen, tutorials, enzovoort, ingedeeld naar onderwerp.

goalkicker.com/JavaScriptBook
Gratis pdf-boek over JavaScript, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

javascript.info
Waanzinnig goede, zeer uitgebreide en duidelijke tutorial in de vorm van een boek. Overzichtelijk ingedeeld in hoofdstukken. Met opgaven (en oplossingen).

kirupa.com/html5/learn_javascript
Uiterst duidelijke online cursus JavaScript.

medium.com/@addyoamani/the-cost-of-javascript-in-2018
Uitgebreid artikel over de vertragende werking van JavaScript en hoe dat zoveel mogelijk te voorkomen.

udacity.com
Aantal kwalitatief goede cursussen, waaronder een aantal gratis. (Je moet zelf even zoeken op de site, want de gratis JavaScript-cursussen staan niet bij elkaar. Je moet je wel registreren.)

w3schools.com/js
JavaScript tutorial en overzicht.

Validators, debuggers en online uitproberen

(Onderafdeling van JavaScript, DOM en CSSOM)

Combinaties van css, html, JavaScript enzovoort online uitproberen en eventueel delen met anderen zie Gereedschap → Combinaties van css, html, JavaScript enzovoort uitproberen en eventueel delen.

Reguliere expressies uitproberen zie Gereedschap → Reguliere rexpressies ('Regular Expressions').

JavaScript comprimeren zie Gereedschap → Snelheid testen, gzip, comprimeren (inclusief theorie).

es6console.com
Online console met uitgebreide keuzemogelijkheden voor versies, syntaxchecker, transpiler, en dergelijke.

jshint.com
JavaScript-validator. Online, maar kan ook worden gedownload.

jslint.com
Online JavaScript-validator. Gruwelijk streng.

mothereff.in/js-variables
Online namen van variabelen valideren.

sitepoint.com/comparison-javascript-linting-tools
Vergelijking tussen de validators JSLint, JSHint, JSCS en ESLint.

w3schools.com/js/ (JavaScript Examples)
Online wijzigingen in JavaScripts uitproberen.

JSON

freeformatter.com/json-validator
Online JSON-validator.

json.org/json-nl
Zeer korte introductie over JSON. Nederlandstalig. Met veel links naar andere sites.

jsonlint.com
Online JSON-validator.

tutorialspoint.com/json
Tutorial over JSON.

w3schools.com/js/js_json_intro
Tutorial over JSON.

Juridisch

Nieuwsbrieven en dergelijke zie Nieuwsbrieven, nieuwssites, en dergelijke.

clinic.nl
Site over allerlei juridische zaken op het gebied van ICT. Mogelijkheid om (gratis) juridisch advies te krijgen voor beginnende bedrijfjes en particulieren. Nederlandstalig.

ictrecht.nl/diensten/contracten-opstellen
Online aan de hand van 'n paar vragen allerlei juridische documenten aanmaken, zoals een disclaimer, copyrightbrieven, cookieverklaring, enzovoort, enzovoort. Nederlandstalig. (Slechts enkele documenten zijn gratis.)

blog.iusmentis.com
Blog van ICT-jurist Arnoud Engelfriet, met elke dag een nieuw onderwerp met reacties. Nederlandstalig en uiterst leesbaar geschreven.

iusmentis.com/auteursrecht/nl/vvv
Veelgestelde vragen over auteursrecht, door ICT-jurist Arnoud Engelfriet. Nederlandstalig.

iusmentis.com/auteursrecht/spoedcursus/intro
Spoedcursus auteursrecht door ICT-jurist door Arnoud Engelfriet. Nederlandstalig.

iusmentis.com/auteursrecht/symbool
Het copyright-symbool, door ICT-jurist Arnoud Engelfriet. Nederlandstalig.

lira.nl/Over-Lira/Het-auteursrecht
Het auteursrecht, door de Stichting Lira. Nederlandstalig.

Mailinglists

laposta.nl
Nieuwsbrieven versturen. Nederlandstalig. De gratis versie gaat tot maximaal 2.000 contacten en maximaal 12.000 nieuwsbrieven per maand.

ymlp.com/nl
mailinglist en nieuwsbrief versturen. Nederlandstalig. De gratis versie gaat tot maximaal 1.000 contacten en maximaal 1.000 e-mails per maand.

Malware, spam, beveiliging, en dergelijke

developers.google.com/web/fundamentals/security/hacked
Stap-voor-stap-handleiding hoe een gehackte site op te schonen. (Afhankelijk van cookies, ingelogd zijn bij Google, en dergelijke, Nederlandstalig of Engels.)

kevv.net/you-probably-dont-need-recaptcha
Artikel dat helpt besluiten of je reCAPTCHA wel nodig hebt, en als dat zo is met een overzicht van meer pricavy-vriendelijke alternatieven komt (reCAPTCHA is een dataverzamelaar voor Google, zie bijvoorbeeld Google's new reCAPTCHA has a dark side).

projecthoneypot.org
Project gericht op de bestrijding van spammers. Iedereen kan eraan deelnemen. Er kan gezocht worden op 'foute' ip's.

stopbadware.org/home/clearinghouse/search
Online kijken of site op blacklist staat.

stopforumspam.com
Grote database met forumspammers. En kan op ip-nummer worden gezocht.

whynopadlock.com
Online testen waarom site geen slotje ('padlock') in browser toont bij https-verbinding.

MathML

developer.mozilla.org/en-US/docs/Web/MathML
Overzichtspagina van Mozilla over MathML met voorbeelden, referentie, links, enzovoort.

validator.w3.org/nu
W3C-validator voor HTML, XHTML, SMIL, MathML, enzovoort. Online één pagina tegelijk testen. W3C is de organisatie die de officiële standaard voor html, css, enzovoort bij houdt.

xhtml5.nl/naslag/mathml/entiteiten
Nederlandstalig overzicht van entiteiten, ingedeeld in groepen. Online te bekijken.

Mobiele apparatuur

Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen

(Onderafdeling van Mobiele apparatuur)

Alleen de resolutie testen zie Gereedschap → Weergave en dergelijke testen.

De meeste online simulators en dergelijke doen niet precies hetzelfde als een écht mobiel apparaat. In de regel wordt, met meer of minder succes, een mobiel apparaat geïmiteerd. Er is geprobeerd in dit overzicht geen simulators op te nemen die alleen het venster verkleinen, want dat heeft niets met een simulatie te maken en dat kun je zelf ook wel. Maar het kan best zijn dat er eentje doorheen is geglipt.

Dit is niet onbelangrijk, want je kunt tijden bezig zijn om iets te testen op zo'n nep-simulator, en dan blijkt het uiteindelijk gewoon niet te werken, omdat je bijvoorbeeld css gebruikt die op het echte apparaat niet wordt ondersteund. Om te testen kun je het best de downloads die door de officiële makers worden geleverd gebruiken. Of echte apparaten natuurlijk, maar dan moet je óf 'n hele grote vriendenkring hebben, óf eerst 'n bankoverval plegen of zoiets...

Algemeen

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

smashingmagazine.com/2014/07/server-side-detection-with-javascript
Uitleg hoe wurfl.js te gebruiken. Dit is een script dat het herkennen van mobiele apparaten door een combinatie van server side en client side mogelijk maakt, met gebruik van de hieronder genoemde databases van wurfl.
De site van de makers van wurfl.js is web.wurfl.io.

tera-wurfl.com/explore
Zeer uitgebreide info over zo'n beetje elk mobiel apparaat. Als je deze site met 'n mobiel apparaat bezoekt, krijg je gelijk info over dat apparaat. Met 'n desktop-browser kun je opgeven over welk apparaat je info wilt. Dit is de online-versie van wurfl.sourceforge.net hieronder.

Android

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

developer.android.com/studio
Android SDK.

developers/google.com/web/tools/chrome-devtools/remote-debugging
Handleiding om Android-toestellen remote te debuggen via een USB-verbinding.

Firefox for Android

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

developer.mozilla.org//en-US/docs/Tools/Remote_debugging
Links naar artikelen en dergelijke om Firefox op Android remote te debuggen op de desktop.

iOS

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

Apple heeft voor de tigste keer z'n site gewijzigd, zonder verwijzingen naar de gewijzigde pagina's. Je zult zelf naar de SDK en dergelijke moeten zoeken, ik geef het op. Geen links meer hier naar de site van Apple, want ik kan bezig blijven met die ongein.

apps.apple.com/us/app/mihtool
Dit is een link naar MIHTool in de appstore van Apple. MIHTool is een gratis app vergelijkbaar met de debugger in Google Chrome en Safari op de desktop. Maar dan eentje die werkt op iOS.
Pagina van de ontwikkelaar met beschrijving en dergelijke.
Handleiding.

Opera Mini

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

dev.opera.com/articles/installing-opera-mini-on-your-computer
Instructie hoe Opera Mini kan worden geïnstalleerd.

dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines
Richtlijnen voor het schrijven voor Opera Mini.

Sailfish OS

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

sailfishos.org/wiki/sailfishOS
Startpagina voor SailfishOS met onder andere links naar SDK.

Tizen

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

developer.tizen.org/development/tizen-studio/download
Tizen IDE.

Frameworks

(Onderafdeling van Mobiele apparatuur)

Bibliotheken en dergelijke voor gebaren zie JavaScript, DOM en CSSOM → Scripts, bibliotheken en frameworks.

jquerymobile.com
Open Source mobile framework.

mobile-frameworks-comparison-chart.com
Online een framework zoeken aan de hand van allerlei criteria.

phonegap.com
Open source development framework om cross-platform mobiele apps te bouwen in html, css en JavaScript, met gebruikmaking van de mogelijkheden van (onder andere) Android, Blackberry, Fire OS, iOS, Symbian, Tizen en Windows 10 Mobile.

Theorie, links, forums, en dergelijke

(Onderafdeling van Mobiele apparatuur)

Browser support voor css, html, JavaScript en/of SVG zie CSS → Browser support.

Media query's, responsive images, en dergelijke zie CSS → Media Query's en Responsive Web Design (ook bijvoorbeeld methoden om afbeeldingen te verkleinen, die géén css gebruiken staan daar bij elkaar).

Oplossingen voor dingen als scrollen binnen een div, fixed positie, en dergelijke zie CSS → Bugs en hacks → Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken.

Toegankelijkheid zie Toegankelijkheid.

developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Using the viewport meta tag to control layout on mobile browsers.

github.com/scottjehl/device-bugs/issues
Pagina met overzicht van fouten in mobiele apparatuur, mobiele besturingssystemen en mobiele browsers.

mobiforge.com
Site met handleidingen, artikelen, enzovoort.

mydevice.io
Breedte en hoogte in fysieke en css-pixels, pixel ratio en ppi van veel voorkomende smartphones, tablets, en dergelijke.

quirksmode.org/mobile/viewports
Zeer uitgebreide, zeer gedetailleerde en zeer duidelijke uitleg over de gespleten persoonlijkheid van viewport (het verschil tussen css-pixels en hardware- of device-pixels).

sebastien-gabriel.com/designers-guide-to-dpi
Tutorial over dpi, ppi, css-pixels, device-pixels, en dergelijke.

Validators, snelheid testen, browser sniffing, en dergelijke

(Onderafdeling van Mobiele apparatuur)

Theoretische aritkelen, zoals uitleg over een waterfall, online tests met praktische tips voor verbeteringen, en dergelijke zie Gereedschap → Snelheid testen, gzip, comprimeren (inclusief theorie).

bing.com/webmaster/tools/mobile-friendliness
Online (oppervlakkig) testen of de pagina geschikt is voor mobiel.

ready.mobi
Online testen of een pagina geschikt is voor mobiel. Niet iedereen zal het gelijk eens zijn over alle suggesties, dus niet alles blindelings overnemen.

search.google.com/test/mobile-friendly
Online (oppervlakkig) testen of de pagina geschikt is voor mobiel. Nederlandstalig.

webpagetest.org
Online in echte browsers op een aantal plaatsen in de wereld testen hoe snel de pagina laadt. Bij 'browser' kun je ook kiezen voor mobiele browsers.
Uitleg op moz.com: Algemeen, Specifiek voor waterfall.

whoishostingthis.com/tools/user-agent
Geeft de User Agent String van de gebruikte browser weer. Bevat ook info hoe je die string kunt uitlezen en eventueel gebruiken.

Nieuwsbrieven, nieuwssites, en dergelijke

Omdat veel nieuwsbrieven en dergelijke over meerdere onderwerpen gaan, staan ze hier allemaal bij elkaar en niet verspreid over de verschillende onderwerpen.

a11yweekly.com
A11yWeekly: wekelijkse nieuwsbrief over toegankelijkheid.

bitsoffreedom.nl/volg-ons
Tweewekelijkse nieuwsbrief van Bits of Freedom over (de volledige sloop van) privacy en dergelijke. Nederlandstalig.
Bits of Freedom is een van de weinige Nederlandse organisaties die opkomt voor dingen als privacy, die tegenwicht biedt voor de spionagedrift van de overheid, enzovoort. Het werk van deze organisatie is onmisbaar voor een vrij internet. Omdat Bits of Freedom geen subsidie krijgt, is de organisatie volledig afhankelijk van donateurs. Als je een vrij internet belangrijk vindt, wordt dan donateur!

blog.iusmentis.com/schrijf-je-voor-de-nieuwsbrief
Nederlandstalige wekelijkse nieuwsbrief van ict-advocaat Arnoud Engelfriet over allerlei juridische zaken die met ict (waaronder internet) te maken hebben.

css-tricks.com/newsletters
Wekelijkse nieuwsbrief over van alles wat met het maken websites te maken heeft.

css-weekly.com
cssweekly: wekelijkse nieuwsbrief over css.

csslayout.news
CSS Layout News: wekelijkse nieuwsbrief over lay-out en css.

dbweekly.com
DB Weekly: wekelijkse nieuwsbrief over databases, SQL, en dergelijke.

edri.org/newsletters
EDRi-gram: tweewekelijkse nieuwsbrief van European Digital Rights, een overkoepelende Europese organisatie voor privacy en dergelijke.

esnextnews.com
ES.Next News: wekelijkse nieuwsbrief met links naar artikelen over JavaScript.

freshbrewed.co/frontend
freshbrewedfrontend: wekelijkse nieuwsbrief over allerlei onderwerpen die met het maken van sites te maken hebben.

frontendfoc.us
Frontend Focus: wekelijkse nieuwsbrief over html5, css, WebGL, en dergelijke.

heydesigner.com
HeyDesigner: wekelijkse nieuwsbrief over van alles wat met het maken van sites te maken heeft.

importpython.com/newsletter
Weekly Python Newsletter: wekelijkse nieuwsbrief over Python.

javascriptkicks.com
JSK Weekly: wekelijkse nieuwsbrief over JavaScript

javascriptweekly.com
JavaScript Weekly: wekelijkse nieuwsbrief over JavaScript.

js.libhunt.com/newsletter
Awesome JavaScript Newsletter: wekelijkse nieuwebrief over JavaScript.

jster.net
JSter: tweewekelijkse nieuwsbrief over JavaScript.

mobiledevweekly.com
Mobile Dev Weekly: wekelijkse nieuwsbrief over onder andere het maken van sites en het mobiele web.

morninghacked.com
Morning hacked: dagelijkse nieuwsbrief over beveiliging, datalekken, en dergelijke. Uitstekend hulpmiddel voor mensen die niet vrolijk aan de dag willen beginnen.

nodeweekly.com
Node Weekly: wekelijkse nieuwsbrief over Node.js.

nosqlweekly.com
NoSQL Weekly: Wekelijkse nieuwsbrief over NoSQL.

perlweekly.com
Perl Weekly: wekelijkse nieuwsbrief over Perl.

php.libhunt.com/newsletter
Awesome PHP Newsletter: wekelijkse nieuwsbrief over PHP.

phpweekly.comn
PHP Weekly News: wekelijkse nieuwsbrief over PHP.

ponyfoo.com/weekly
Pony Foo Weekly: wekelijkse nieuwsbrief over het maken van sites.

postgresweekly.com
Postgres Weekly: Wekelijkse nieuwsbrief over PostgreSQL.

privacynieuws.nl
Privacynieuws weekbrief: Nederlandstalige wekelijkse nieuwsbrief over privacy.

pycoders.com
PyCoder's Weekly: wekelijkse nieuwsbrief over Python.

python.libhunt.com/newsletter
Awesome Python Newsletter: wekelijkse nieuwsbrief over Python.

pythonweekly.com
Python Weekly: wekelijkse nieuwsbrief over Python.

responsivedesign.is
RWD Weekly: wekelijkse nieuwsbrief over responsive design.

rwt.io/newsletter
Web Typography News: ongeveer tiendaagse nieuwsbrief over typografie.

smashingmagazine.com/the-smashing-newsletter/
Smashing Newsletter: tweewekelijkse nieuwsbrief met voornamelijk (links naar) artikelen over css, html, en dergelijke..

t12t.se/accessibility-newsletter
t12t Accessibility Newsletter: onregelmatig verschijnende nieuwsbrief over toegankelijkheid.

twitter.us18.list-manage.com
this week in security: wekelijkse nieuwsbrief over beveiliging, datalekken, en dergelijke.

tympanus.net/codrops/collective
Wekelijks overzicht van interessante artikelen, (nieuwe) fonts, (nieuwe) lay-outs, enzovoort.

w3.org/News/Public
Weekly newsletter: wekelijkse nieuwsbrief van w3c, de organisatie die de standaarden voor css, html, enzovoort beheert.

warchild.nl/nieuwsbrief
Nee, dit heeft niets met sites te maken. Maar misschien wel de belangrijkste nieuwsbrief van allemaal... Nederlandstalig.

wdrl.info
Web Development Reading List: wekelijkse nieuwsbrief over van alles wat met websites, internet, en dergelijke te maken heeft.

web-design-weekly.com/
Web Design Weekly: wekelijkse nieuwsbrief met links naar allerlei artikelen over css, html, enzovoort.

webaim.org/newsletter
The WebAIM Newsletter: maandelijkse nieuwsbrief over toegankelijkheid.

webanimationweekly.com
Web Animation Weekly: wekelijkse nieuwsbrief over animaties met onder andere artikelen over SVG en WebGL.

webtoolsweekly.com
Web Tools Weekly: wekelijkse nieuwsbrief over hulpmiddelen voor het maken van sites en dergelijke (tools).

weekly.cssanimation.rocks
CSS Animation Weekly: wekelijkse nieuwsbrief over alles wat met css-animaties te maken heeft.

weekly.statuscode.com
StatusCode Weekly: wekelijkse nieuwsbrief over alles dat met de browser, server, verbindingen, en dergelijke te maken heeft.

zendev.com/friday-frontend
Friday Frontend: wekelijkse nieuwsbrief met links naar artikelen over css, SCSS, JavaScript, en dergelijke.

Perl

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

cpan.org/ (Comprehensive Perl Archive Network)
Scripts en modules.

goalkicker.com/PerlBook
Gratis pdf-boek over Perl, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

guru99.com/perl-tutorial
Cursus Perl voor beginners.

perl.org
De grote Perl site.

perl-tutorial.org
Links naar tutorials over Perl.

perlmonks.org
Community rondom Perl met onder andere veel handleidingen.

PHP

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Forums

(Onderafdeling van PHP)

phphulp.nl/php/forum
Forum met de nadruk op PHP. Nederlandstalig.

Overig

(Onderafdeling van PHP)

apachefriends.org
Pakket met de apache server, PHP, Perl en MariaDB downloaden om op de eigen computer te installeren (XAMPP). Dit is nodig als je op je eigen computer PHP en/of Perl wilt testen.

Scripts

(Onderafdeling van PHP)

pear.php.net
Enorme bibliotheek met open source-code.

phpclasses.org/browse
Gigantische hoeveelheid classes.

phphulp.nl/php/scripts
Scripts. Nederlandstalig.

Tutorials, voorbeelden

(Onderafdeling van PHP)

devdocs.io
Uitgebreide overzichten van elementen, attributen, enzovoort. Met browser support, ook voor mobiele browsers, voorbeelden, links naar meer info, enzovoort.

goalkicker.com/PHPBook
Gratis pdf-boek over PHP, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

guru99.com/php-tutorials
Cursus PHP voor beginners.

phpboek.net
Nederlandstalig uiterst leesbaar boek over PHP. Feitelijk een cursusboek.

phptherightway.com
Site met tutorials, links naar tools, enz, waarbij geprobeerd wordt verouderde informatie te vermijden.

phphulp.nl/php/tutorials
Tutorials. Nederlandstalig.

secure.php.net
Officiële site van PHP met veel documentatie.

tutorialspoint.com/php
Uitgebreide tutorial.

w3schools.com/php/default
PHP-tutorial en overzicht.

Privacy en dergelijke

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

bitsoffreedom.nl
Nederlandstalige organisatie voor de verdediging van digitale burgerrechten.
Bits of Freedom is een van de weinige Nederlandse organisaties die opkomt voor dingen als privacy, die tegenwicht biedt voor de spionagedrift van de overheid, enzovoort. Het werk van deze organisatie is onmisbaar voor een vrij internet. Omdat Bits of Freedom geen subsidie krijgt, is de organisatie volledig afhankelijk van donateurs. Als je een vrij internet belangrijk vindt, wordt dan donateur!

browserspy.dk
Laat zien welke info de browser doorgeeft. Heel gedetailleerd en uitgebreid.

edri.org
Site van European Digital Rights. Uitgever van de uitstekende nieuwsbrief EDRI-gram. Van deze koepelorganisatis is onder andere het iets hierboven genoemde Bits of Freedom lid.

heise.de/extras/socialshareprivacy
Plug-in voor jQuery om bezoekers zelf te laten kiezen door welke social media ze bespioneerd willen worden. Site is Duitstalig.

lucble.com/rp/cookielesscookies
Uitleg over een methode om browsers (en dus mensen) uniek te identificeren en te volgen, zonder gebruik van cookies, JavaScript, en dergelijke

neustadt.fr/essays/against-a-user-hostile-web
Uitstekend artikel over pricacy en waarom bedrijven als Google, Facebook, en dergelijke de pest voor internet zijn.

nirsoft.net/show_my_ip_address
Laat zien wat je browser zoal verstuurt en toont externe IP-adres.

panopticlick.eff.org (Electronic Frontier Foundation)
Laat zien hoe je computer (vrijwel) uniek is te identificeren alleen aan de hand van gegevens die je browser doorstuurt.

prism-break.org/nl
Nederlandstalige site met alternatieven voor programma's en bedrijven die hun deur wijd open hebben staan voor inlichtingendiensten als de NSA, de AIVD, en dergelijke.

tosdr.org (Terms of Service; Didn't Read)
Beoordeling door gebruikers van Algemene voorwaarden van veel (grote) sites, softwarebedrijven, enzovoort, waaronder Facebook, Google, Apple en Microsoft.

Python

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

codecademy.com/learn/learn-python
Interactieve cursussen Python. De cursus is gratis, maar je moet je wel registreren.

guru99.com/python-tutorials
Cursus Python voor beginners.

openbookproject.net/py4fun
Voorbeeldprogramma's met uitgebreide uitleg.

pymbook.readthedocs.io/en/latest
Online boek met cursus Python.

python.org
Officiële python website. Veel handleidingen en dergelijke.

tutorialspoint.com/python
Cursus Python.

udacity.com/course/introduction-to-python
Online cursus python. De cursus is gratis, maar je moet je wel registreren.

SQL, NoSQL, databases, en dergelijke

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

goalkicker.com/MySQLBook
Gratis pdf-boek over MySQL, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

goalkicker.com/PostgreSQLBook
Gratis pdf-boek over PostgreSQL, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

goalkicker.com/SQLBook
Gratis pdf-boek over SQL, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

guru99.com/sql
Cursus SQL voor beginners.

mariadb.com/kb/en
Ingangspagina naar handleidingen en dergelijke over MariaDB.

mariadb.org
MariaDB is een open source vervanger van MySQL, dat in handen van Oracle steeds meer verandert in een melkkoe die nooit meer het weiland in mag.

sqlite.org
Centrale site van SQLite.

tutorialspoint.com/postgresql
Tutorial PostgreSQL.

tutorialspoint.com/sql
Cursus SQL.

udacity.com/course/intro-to-relational-databases
Basiscursus relationale databases (onder andere SQL). De cursus is gratis, maar je moet je wel registreren.

w3schools.com/sql
SQL-tutorial en -referentie.

SSI (Server Side Includes)

SSI is min of meer aan het uitsterven. Je kunt tegenwoordig beter PHP gebruiken, omdat dat veel meer mogelijkheden heeft. De hieronder staande voorbeelden op deze site worden, als ze worden bijgewerkt, ook overgezet naar PHP

css-voorbeelden.nl/tekst/invoegen/tekst-052
Tekst invoegen met behulp van SSI. Nederlandstalig.

css-voorbeelden.nl/tekst/invoegen/tekst-087
Menu invoegen met behulp van SSI. Nederlandstalig.

css-voorbeelden.nl/lijst/lijst-096
Sitemap met twee verschillende lay-outs binnen één pagina. Css kan worden gekozen via SSI. Nederlandstalig.

homepage-maken.nl/ssi/overssi
SSI-cursus. Nederlandstalig.

weijers.net/guide/ssi (WebThings)
Uitgebreide tutorial.

Statistieken browsergebruik, besturingssysteem, en dergelijke

Bezoekersteller en dergelijke zie Bezoekersteller en dergelijke.

clicky.com/marketshare/global/web-browsers
Statistieken over browser, besturingssysteem, en dergelijke.

developer.android.com/about/dashboards
Overzicht van het gebruik van de verschillende versies van Android.

en.wikipedia.org/wiki
Actuele en oude statistieken over browsers uit 'n hele serie bronnen.

gs.statcounter.com
Statistieken over resolutie, browser, besturingssysteem, en dergelijke.

netmarketshare.com/faq
Statistieken over resolutie, browser, besturingssysteem, en dergelijke. (Links zit een rijtje knoppen om te kiezen wat je wilt zien.)

w3schools.com/browsers
Statistieken over resolutie, browser, besturingssysteem, en dergelijke.

SVG

Online optimaliseren, code genereren en converteren voor en van svg-afbeelding zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren (inclusief theorie).

Browser support zie CSS → Browser support.

SVG-achtergronden en dergelijke zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, en dergelijke.

Responsive images maken met behulp van SVG zie CSS → Media Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-css-methoden zoals SVG, <picture> en <img>).

Editors en IDE's zie Gereedschap → Editors en IDE's.

apike.ca/prog_svg
Tutorial voor beginners.

css-tricks.com/comparison-animation-technologies
Overzicht van verschillende methodes voor animatie, inclusief externe bibliotheken. Met voor- en nadelen.

css-tricks.com/mega-list-svg-information
Gigantische lijst met links naar artikelen over alle denkbare onderwerpen betreffende SVG.

developer.mozilla.org/en-US/docs/Web/SVG
Overzichtspagina over Firefox en SVG. Met referentie, voorbeelden, enzovoort.

developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_web
Overzicht van manieren om een svg-afbeelding in html op te nemen. Met voor- en nadelen van de diverse manieren.

github.com/willianjusten/awesome-svg
Pagina met groot aantal links naar artikelen, tutorials, voorbeelden, enzovoort over svg, onderverdeeld in hoofdstukken.

highcharts.com
Open source JavaScript-bibliotheek om met SVG interactieve grafieken te maken. Gratis voor niet-commercieel en persoonlijk gebruik.

inkscape.org
Open source editor om svg mee te schrijven en bewerken. De site is Engelstalig, het programma is ook Nederlandstalig (hoewel volstrekt onduidelijk is, of die vertaling nog actueel is).

sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job
Artikel wanneer SVG en wanneer <canvas> beter is.

smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css
Zeer uitgebreid artikel over hoe svg te animeren met behulp van css.

smashingmagazine.com/2016/05/web-image-effects-performance-showdown
Vergelijking van SVG, html <canvas>, css filters en css blend modes op het gebied van snelheid en gemak. Als handvat is het grijs maken van een afbeelding gebruikt.

snapsvg.io
Open source JavaScript-bibliotheek om meer geavanceerde delen van SVG, zoals animaties, te kunnen gebruiken in nieuwere browsers, ook als die dit nog niet ondersteunen.

svgontheweb.com
Inleiding in het gebruik van SVG. Met links naar andere sites.

svgpocketguide.com/book
Online cursusboek.

theblog.adobe.com/css-vs-svg-the-final-roundup
Overzichtsartikel wanneer voor verschillende onderdelen van een site css of svg beter is. Met links naar uitgebreidere artikelen per onderdeel.

tutorials.jenkov.com/svg
Uitgebreide cursus met veel voorbeelden.

w3.org/TR/SVG11
Officiële specificatie SVG 1.1.

w3.org/TR/SVG2
Ontwerp-specificatie SVG 2.

w3c.github,io/svgwg/specs/svg-authoring
Praktische richtlijnen van w3c over het gebruik van SVG.

w3schools.com/graphics/svg_intro
SVG-tutorial en -referentie. Met mogelijkheid om zelf online uit te proberen.

webdesign.tutsplus.com/tutorials/how-to-hand-code-svg
Gedetailleerde tutorial over het maken van iconen met SVG.

Toegankelijkheid

Nieuwsbrieven en dergelijke zie Nieuwsbrieven, nieuwssites, en dergelijke.

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Algemene tests

(Onderafdeling van Toegankelijkheid)

Voor tests en dergelijke voor een speciale taal, zoals JavaScript, zie bij de betreffende taal. Tests voor een bepaald element, zoals formulieren, staan in de regel bij dat element.

Firefox en Google Chrome hebben tal van extensies op het gebied van toegankelijkheid.

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

a11ygator.chialab.io
Online de pagina testen op toegankelijkheid.

achecker.ca/checker
Online de pagina testen op toegankelijkheid. Bij mogelijke problemen verschijnt een link naar suggesties voor een mogelijke oplossing.

cynthiasays.com
Online de pagina testen op toegankelijkheid. Met uitgebreide toelichting over eventuele fouten. Sinds enige tijd moet je 'n e-mail-adres opgeven, maar 'n nep-adres werkt ook prima.

fae.disability.illinois.edu/anonymous
Pagina testen op toegankelijkheid met uitgebreide beschrijving van mogelijke fouten (en hoe die op te lossen). (Iets onder de grote inlog-knop zit een mogelijkheid om zonder inloggen één pagina te testen.)

matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score
Artikel over de beperkingen van geautomatiseerd testen. Wat niet wil zeggen dat je dat niet moet doen, maar dat je ook moet testen met echte schermlezers en dergelijke.

w3.org/WAI/ER/tools
Links naar elke bekende toegankelijkheidstest, met uitgebreide toelichting bij elke link. Deze pagina wordt niet echt regelmatig bijgwerkt.

wave.webaim.org
Test online je pagina op eventuele problemen met toegankelijkheid. Resultaten worden uiterst overzichtelijk weergegeven met behulp van icoontjes. Op hele lange pagina's loopt de online-test vast, maar je kunt 'n extensie installeren in Firefox en Google Chrome, en die werkt wel goed bij langere pagina's.

web.dev/measure
Test online op snelheid, toegankelijkheid, geschiktheid voor zoekmachines, en dergelijke. Is van Google, dus kritisch bekijken, want over sommige adviezen kun je beslist anders denken.

Artikelen, tutorials, links, en dergelijke

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Algemeen

(Onderafdeling van Toegankelijkheid → Artikelen, tutorials, links, en dergelijke)

accessibility-developer-guide.com
Zeer uitgebreide en duidelijke tutorial over toegankelijkheid. Van het opzetten van een test-omgeving tot het gebruik van WAI-ARIA en voorbeelden.

anysurfer.be/nl
Site met veel informatie over toegankelijkheid. Nederlandstalig.

blogs.adobe.com/creativecloud/making-your-website-design-accesible
Interview met blinde toegankelijkheidsexpert. Bevat aantal simpel toe te passen tips.

de.ryerson.ca/wa/audit
Cursus in boekvorm over hoe te testen op toegankelijkheid. Het boek is ook te downloaden.

developer.mozilla.org/en-US/docs/Learn/Accessibility
Overzicht van artikelen, tutorials, en dergelijke op mozilla.org op het gebied van toegankelijkheid.

dev.to/addyosmani/accessibility-tips-for-web-developers
Beknopte maar redelijk volledige tutorial waar op te letten bij het maken van een site.

engineerint.khanacademy.org/posts/windows-high-contrast-mode
Uitleg over Windows Hight Contrast Mode.

iacobien.nl
Uitleg over richtlijnen, artikelen, en dergelijke. Nederlandstalig.

jimthatcher.com/webcourse1
Uitgebreide cursus toegankelijkheid.

medium.com/@matuzo/writing-css-with-accessibility-in-mind
Uitgebreid overzicht van dingen waardoor css kan helpen (of juist niet) met het verbeteren van toegankelijkheid.

moritzgiessmann.de/accessibility-cheatsheet
Kort, overzichtelijk spiekbriefje met de belangrijkste dingen wat betreft toegankelijkheid.

pauljadam.com/resources
Groot aantal links over toegankelijkheid, overzichtelijk ingedeeld in groepen.

smashingmagazine.com/2014/05/mobile-accessibility-why-care-what-can-you-do
Uitgebreid artikel over het voorkomen van problemen met betrekking tot toegankelijkheid, toegespitst op mobiele apparaten.

smashingmagazine.com/2018/09/importance-manual-accessibility-testing
Uitstekende inleiding over testen op toegankelijkheid. Met veel links.

udacity.com/course/web-accessibility
Online cursus toegankelijke sites maken. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

w3.org/WAI/demos/bad/
Dezelfde pagina wel en niet toegankelijk, met uitleg over de verschillen. Om de uitleg te zien moet je bovenaan op de felgekleurde knoppen klikken.

w3.org/WAI/Resources
Links van W3C naar van alles over toegankelijkheid. Wordt niet echt goed bijgehouden, dus er zal wel wat missen of verouderd zijn.

w3.org/WAI/test-evaluate/preliminary
Artikel met enkele simpele vuistregels die toegankelijkheid bevorderen en veel links naar uitgebreidere info.

webdesign.tutsplus.com/series/web-accessibility-the-complete-learning-guide
Serie tutorials, waarvan het merendeel gratis is.

Specifieke elementen, attributen, en dergelijke

(Onderafdeling van Toegankelijkheid → Artikelen, tutorials, links, en dergelijke)

Onderwerpen die specifiek met één element of één eigenschap te maken hebben, kunnen ook bij dat specifieke element of eigenschap staan.

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Soms is toegankelijkheid van één bepaald element en dergelijke onderdeel van een algemener artikel over dat element. In dat geval staat het bij dat element. Als je informatie zoekt over één specifiek iets, is het daarom handig ook even bij dat ene specifieke iets te kijken.

24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute
Zeer uitgebreid artikel over het title-attribuut en toegankelijkheid.

a11ysupport.io
Groot aantal tests in diverse schermlezer/browser-combinaties. Onder andere WAI-ARIA en html-elementen.

bitsofco.de/alternative-text-and-images
Duidelijke uitleg over welk soort alt-tekst bij een afbeelding je wanneer moet gebruiken.

deuqe.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols
Zeer uitgebreid overzicht hoe schermlezers bijzondere tekens (niet) voorlezen.

github.com/scottaohara/accessible_components
Allerlei toegankelijke elementen en constructies zoals menu's, pop-ups en knoppen.

html5accessibility.com
Overzicht van toegankelijkheids-ondersteuning door grote browsers van groot aantal html-elementen.

html5accessibility.com/tests/hidden2013
Overzicht van wat schermlezers doen met display: none; en aria-hidden.
In 2016 is dit onderzoek herhaald. Omdat Windows 8 hierin mist, staat de vorige versie hierboven ook nog.

powermapper.com/tests
Zeer groot aantal tests in diverse schermlezer/browser-combinaties. Onder andere wai-aria, html-attributen en -elementen.

sitepoint.com/15-rules-making-accessible-links
Artikel over het toegankelijk maken van allerlei soorten links.

webdesign.tutsplus.com/articles/the-importance-of-heading-levels-for-assistive-technology
Artikel over het belang van (een juist gebruik) van <h>'s.

Contrast en kleurenblindheid

(Onderafdeling van Toegankelijkheid)

Firefox en Google Chrome hebben tal van extensies op het gebied van toegankelijkheid.

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

24ways.org/2012/colour/accessibility
Artikel over wat leurenblindheid is, over wat voor problemen dat op kan leveren en over hoe je die bij het maken van 'n site kunt voorkomen.

aditus.io/button-contrast-checker
Online contrast van knoppen op een pagina controleren in normale staat, bij :hover en bij :focus.

checkmycolours.com
Online de volledige DOM van een pagina controleren op voldoende contrast.

contrast-ratio.com
Online controleren of contrast tussen twee kleuren groot genoeg is. Kleuren kunnen worden ingevoerd als hex, rgb(), rgba(), hsl() en hsla()-waarden, dus ook eventuele doorzichtigheid kan worden getest.

juicystudio.com/services/luminositycontrastratio
Online controleren of contrast tussen twee kleuren groot genoeg is. Kleuren worden ingevoerd met behulp van hex-waarden.

lowvision/support
Laat online je pagina zien, zoals die bij allerlei soorten kleurenblindheid wordt gezien.

snook.ca/technical/colour_contrast
Online controleren of contrast van voor- en achtergrondkleur voldoet aan richtlijnen van WCAG, met nog wat meer info. Kleuren kunnen worden ingevoerd met behulp van sleepbalken, hex-waarden, rgb() of hsl().

webaim.org/resources/contrastchecker
Online controleren of contrast tussen twee kleuren voldoende is. Geeft aan of voldaan wordt aan de richtlijnen van WCAG.

webaim.org/resources/linkcontrastchecker
Online controleren of contrast tussen tekst- en achtergrondkleur van link en achtergrondkleur van pagina voldoende is. Geeft aan of voldaan wordt aan de richtlijnen van WCAG.

whocanuse.com
Online controleren op voldoende contrast bij verschillende vormen van kleurenblindheid en slechtziendheid.

Schermlezers, tekstbrowsers, en dergelijke

(Onderafdeling van Toegankelijkheid)

Specifiek voor kleurenblindheid staat onder Toegankelijkheid → Contrast en kleurenblindheid.

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Algemeen

(Onderafdeling van Toegankelijkheid → Schermlezers)

24a11y.com/2017/accessibility-testing-tools-desktop-mobile-websites
Beschrijving van enkele test-programma's voor toegankelijkheid. Met onder andere hoe deze zijn te gebruiken in verschillende browsers.

axesslab.com/what-is-a-screen-reader
Tutorial over het gebruik van verschillende schermlezers, gericht op sitebouwers.

smashingmagazine.com/2019/02/accessibility-webinar
Video over de problemen waar een gebruikster van een schermlezer tegenaan kan lopen. Absolute aanrader!

en.wikipedia.org/wiki/Comparison_of_screen_readers
Uitgebreid overzicht van schermlezers met prijzen, op welke systemen ze draaien, enzovoort.

ChromeVox

(Onderafdeling van Toegankelijkheid → Schermlezers)

chromevox.com
ChromeVox, een extensie bij Google Chrome. ChromeVox is een schermlezer voor Google Chrome. Op de site is een overzicht met sneltoetsen te vinden, maar deze is ook te bereiken via rechtsklikken op de extensies en kiezen voor Opties. Deze schermlezer werkt ook prima in Kubuntu, een versie van Linux. Dus waarschijnlijk werkt ChromeVox in veel meer Linux-versies.

Jaws (Windows)

(Onderafdeling van Toegankelijkheid → Schermlezers)

Jaws is een veel gebruikte schermlezer op Windows. Hij wordt hier alleen genoemd, omdat hij veel wordt gebruikt.

De probeerversie is gratis veertig minuten te proberen, daarna moet je Windows opnieuw opstarten. Maar tot eind 2017 verbood de licentie expliciet de gratis versie te gebruiken om sites te testen. Als je dus de moeite neemt om je site te testen op toegankelijkheid, mag je wat Jaws betreft als beloning 'n kapitaal neerleggen voor hun programma. Voor mij reden om over te stappen op NVDA, wat minstens zo goed is, en nog open source ook.

Begin januari 2018 verscheen een nieuwe EULA. Hierin staat geen expliciet verbod meer, maar nog wel dat het programma alleen mag worden gebruikt in de veertig-minutenmodus in afwachting van een licentie. Het is nu dus ietwat onduidelijk. Via de link naar de EULA kunnen mensen die zin hebben in een proefproces, of die geld over hebben, de link naar het programma zelf vinden.
Begin januari 2019 is de ellenlange EULA nog ellenlanger geworden en nog steeds even onduidelijk.

Lynx (Windows)

(Onderafdeling van Toegankelijkheid → Schermlezers)

invisible-island.net/lynx
Download, uitleg, en dergelijke voor Lynx op Windows. Lynx is een tekstbrowser die de pagina ongeveer laat zien zoals een spraakbrowser en dergelijke hem zien. (Voor OS X moet je zelf zoeken, want je zoekt je ongans op die site. In Linux zit Lynx in de distributie.)

NVDA (Windows)

(Onderafdeling van Toegankelijkheid → Schermlezers)

bocoup.com/blog/using-nvda-screen-reader-on-windows
Beknopte handleiding hoe NVDA te gebruiken.

nvaccess.org
NVDA. Gratis en open source schermlezer. Werkt alleen op Windows.

nvaccess.org/filex/nvda/documentation/userGuide
Gebruikershandleiding.

dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts.
Overzicht van de belangrijkste sneltoetsen.

webaim.org/articles/nvda.
Beknopte handleiding hoe NVDA te gebruiken om toegankelijkheid te testen.

TalkBack (Android)

(Onderafdeling van Toegankelijkheid → Schermlezers)

dequeuniversity.com/assets/pdf/screenreaders/talkback-guide.pdf
Beschrijvingen van de belangrijkste gebaren en dergelijke om TalkBack te kunnen bedienen.

dequeuniversity.com/assets/pdf/screenreaders/talkback-images-guide.pdf
Tekeningen met de belangrijkste gebaren om TalkBack te kunnen bedienen.

support.google.com/accessibility/android
Nederlandstalige pagina over toegankelijkheid in Android. Hier is ook de handleiding voor de ingebouwde schermlezer Talkback te vinden.

Verteller (Narrator) (Windows)

(Onderafdeling van Toegankelijkheid → Schermlezers)

support.microsoft.com/nl-nl/help/22798/windows-10-complete-guide-to-narrator
Nederlandstalige uitleg over de in Windows 10 ingebouwde schermlezer Verteller. (In eerdere versies van Windows zit dit ook, maar daarin is het echt volstrekt onbruikbaar.)

VoiceOver (OS X en iOS)

(Onderafdeling van Toegankelijkheid → Schermlezers)

bocoup.com/blog/getting-started-with-voiceover-accessibility
Beknopte handleiding hoe VoiceOver te gebruiken op OS X.

dequeuniversity.com/assets/pdf/screenreaders/voiceover-ios-guide.pdf
Beschrijvingen van de belangrijkste gebaren om VoiceOver op iOS te kunnen bedienen.

dequeuniversity.com/assets/pdf/screenreaders/voiceover-ios-images-guide.pdf
Tekeningen met de belangrijkste gebaren om VoiceOver op iOS te kunnen bedienen.

dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts
Sneltoetsen voor de bediening van VoiceOver op OS X.

help.apple.com/iphone/11
Nederlandstalige handleiding voor VoiceOver op de iPhone.

help.apple.com/voiceover/info/guide/10.8/Dutch
Nederlandstalige handleiding voor de in OS X 10.8 (Mountain Lion) ingebouwde schermlezer VoiceOver.

help.apple.com/voiceover/mac/10.14
Nederlandstalige handleiding voor de in OS X 10.14 (Mojave) ingebouwde schermlezer VoiceOver.

webaim.org/articles/voiceover
Beknopte handleiding hoe VoiceOver te gebruiken om toegankelijkheid te testen. Vooral gericht op OS X.

WebbIE (Windows)

(Onderafdeling van Toegankelijkheid → Schermlezers)

webbie.org.uk
In Windows kun je het gratis programma WebbIE installeren. WebbIE laat de pagina zien zoals een schermlezer en dergelijke hem zien. (Site is Engelstalig, programma heeft een Nederlandstalige versie.) LET OP: kies voor 'Install WebbIE 4 Web Browser Now'. Dat is de een na bovenste knop. Als je voor de bovenste download kiest, krijg je 'n hele berg hulpprogramma's erbij, waar je voor het testen niets aan hebt.

WCAG en WAI-ARIA

(Onderafdeling van Toegankelijkheid)

Speficieke onderwerpen, zoals een toegankelijk formulier of ondertiteling bij video, kunnen ook bij het betreffende onderwerp staan.

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

24ways.org/2017/wcag-for-people-who-havent-read-them
De 1200 pagina's van de WCAG-richtlijnen samengevat in ongeveer twaalf pagina's gewoon Engels.

code.tutsplus.com/series/web-accessibility-with-aria
Serie tutorials over het gebruik van WAI-ARIA.

de.ryerson.ca/advanced
Cursus in boekvorm over het gebruik van WAI-ARIA. Met tal van voorbeelden. Het boek is ook te downloaden.

w3.org/TR/html-aria
Praktisch gebruik van aria-attributen in html, met onder andere een tabel met toegestane en verboden attributen bij de diverse html-elementen.

w3.org/TR/html52
Specificatie HTML 5.2. Bevat ook WAI-ARIA informatie over toegestane roles en dergelijke.

w3.org/TR/using-aria
Uitleg voor makers van sites over de toepassing van WAI-ARIA.

w3.org/TR/wai-aria-1.1
Specificatie WAI-ARIA versie 1.1.

w3.org/TR/wai-aria-practices
Praktische uitleg over het gebruik van WAI-ARIA versie 1.1. Met link naar voorbeelden.

w3.org/TR/WCAG21
Specificatie Web Content Accessicbility Guidelines versie 2.1

w3.org/Translations/WCAG20-nl
Web Content Accessicibility Guidelines versie 2.0. Nederlandse vertaling.

w3.org/WAI/WCAG21/quickref
Beknopte checklist voor WCAG 2.1 met links naar meer uitleg, voorbeelden, en dergelijke.

w3.org/WAI/WCAG21/Understanding
Uitleg met voorbeelden over WCAG 2.1.

webaim.org/standards/wcag/checklist
Leesbare checklist voor WCAG2-richtlijnen.
Vlaamse vertaling.

whatsock.com/training/matrices
Overzicht van WAI-ARIA-roles: wat ze betekenen en hoe ze te gebruiken.

WebGL

Canvas, CSS, WebGL, SVG of ...? staat bij SVG.

alain.xyz/blog/raw-webgl
Gedetailleerde tutorial, waarin een kleine applicatie wordt geschreven.

developer.mozilla.org/en-US/docs/Web/API/WebGL_API
Pagina met links naar voorbeelden, tutorials, enzovoort.

webglfundamentals.org
Hele serie tutorials over allerlei technieken en onderdelen.

Webhosting

hostingbedrijven.nl
Zoeken naar een hoster op grond van allerlei criteria. Met klant-ervaringen. Nederlandstalig.

hostingwijzer.nl
Zoeken naar een hoster op grond van allerlei criteria. Met klant-ervaringen. Nederlandstalig.

ispgids.com/webhosting
Zoeken naar een hoster op grond van allerlei criteria. Met klant-ervaringen. Nederlandstalig.

webhosters.nl
Zoeken naar een hoster op grond van allerlei criteria. Met klant-ervaringen. Nederlandstalig.

webwijzer.nl/website-maken/gratis-website
Lijst met enkele gratis hosters en beoordeling daarvan. Nederlandstalig.

WhoIs, traceroute, en dergelijke

ping.eu
Ping, traceroute, whois, DNS lookup,, enzovoort.

sidn.nl
Informatie over in Nederland geregistreerde sites. Nederlandstalig.

toolbar.netcraft.com/site_report
Allerlei info over 'n site en de hoster daarvan.

viewdns.info/reverseip
Welke andere domeinen staan er op dezelfde server?

whatismyip.com/ip-address-lookup
Naam van 'n site bij het IP-nummer opzoeken.

whois.domaintools.com
Eigenaar, hoster, enzovoort van site opzoeken.

Zoekmachines

Algemene artikelen, forums, hulpmiddelen, en dergelijke

(Onderafdeling van Zoekmachines)

URL-rewriting zie HTMLURL-encoding (escaping), URL-rewriting en links.

Omdat de spider van een zoekmachine redelijk vergelijkbaar is met een blinde, is ook de informatie bij Toegankelijkheid van belang.

curatedseotools.com
Groot aantal op onderwerp gesorteerde links over van alles dat met zoekmachines te maken heeft.

jeroen.com/woordenboek
Zoekmachine woordenboek. Nederlandstalig.

seoguru.nl/handleiding-seo
Handleiding over optimaliseren van 'n site voor zoekmachines. Nederlandstalig.

support.google.com/webmasters
Waar je op moet letten als je gaat betalen voor zoekmachine-optimalisatie (in het Engels wordt meestal de afkorting SEO) gebruikt. Dit is niet onbelangrijk, want op bijvoorbeeld het forum van Google staan regelmatig verhalen van mensen die kapitalen hebben betaald voor volkomen waardeloze of zelfs schadelijke 'optimalisatie'.

web.dev/measure
Test online op snelheid, toegankelijkheid, geschiktheid voor zoekmachines, en dergelijke. Is van Google, dus kritisch bekijken, want over sommige adviezen kun je beslist anders denken.

Bing

(Onderafdeling van Zoekmachines)

bing.com/toolbox/webmaster
Microsoft hulpmiddelen voor webmasters. Nederlandstalig. Inmiddels begint de kwaliteit van de hulpprogramma's van Bing aardig in de buurt te komen van die van Google, en sommige hebben zelfs meer mogelijkheden, zoals de SEO-analyse.

bing.com/webmatser/help/webmaster-guidelines
Richtlijnen voor webmasters.

Google

(Onderafdeling van Zoekmachines)

google.nl/webmasters
Google centrum voor Webmasters (Search Console). Om site te beheren, met 'n hele reeks hulpmiddelen daarvoor.
Uitgebreide uitleg over Search Console.

static.googleusercontent.com/media/guidelines
Richtlijnen van Google voor raters (mensen die voor Google handmatig sites beoordelen.) LET OP: dit is een pdf.

support.google.com/webmasters
Richtlijnen voor webmasters. Nederlandstalig.

support.google.com/webmasters
Googles Startersgids voor zoekmachineoptimalisatie (SEO). Nederlandstalig.
Een onofficiële Nederlandse vertaling van een eerdere versie is te vinden op marketbizz.nl/google-zoekmachine-optimilisatie-beginners-gids-seo. Aan deze vertaling zijn nog behoorlijk wat nuttige aanvullende tips van 'n ervaren zoekmachine-specialist toegevoegd.

support.google.com/webmasters
Welke metatags Google gebruikt. Nederlandstalig. (Deze link is hier alleen neergezet vanwege de ongelooflijke hoeveelheden onjuiste informatie over dit onderwerp. Vrijwel alles wat op internet over metatags en Google te vinden is, is volstrekte onzin. Er is zelfs geboefte wat geld durft te vragen voor het plaatsen van volstrekt nutteloze en vak zelfs nadelige metatags. En voor 10 euro per maand of zo worden ze bijgehouden. Volstrekt zinloos, gewoon ordinaire oplichterij.)

webmasters.googleblog.com
Blog van Google met veel info over wat je wel en niet moet doen.

robots.txt

(Onderafdeling van Zoekmachines)

developers.google.com/search/reference/docs/robotx_txt
Uitgebreid Nederlandstalig artikel hoe robots.txt te gebruiken voor zoekmachines.

robotstxt.org/robotstxt (The Web Robots Pages)
Site over robots.txt.

tool.motoricera.info/robots-checker
Test op fouten en legt (in gewone taal) uit wat er aan opdrachten in staat.

websonic.nl/tutorials/website/website_robotstxt
Handleiding over robots.txt. Nederlandstalig.

yellowpipe.com/yis/tools/robots.txt
Automatisch online robots.txt laten aanmaken door het invullen van een aantal velden.

XML-sitemap

(Onderafdeling van Zoekmachines)

sitemaps.org/nl
Uitgebreide Nederlandstalige uitleg over wat een sitemap is en zo.

xml-sitemaps.com/validate-xml-sitemap
Online XML-sitemap valideren.