Pagina met (voornamelijk externe) links

Op de meeste sites is (vrijwel) alles 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

8 augustus CSSAnimation, transform, transition en Motion Path:
Nieuw: web.dev (artikel over het verschil tussen transform en de afzonderlijke eigenschappen translate, rotate en scale).

7 augustus Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren → Maken en bewerken:
Verwijderd: designer.io (online vector-editor linkt nu door naar CorelDraw, 'n gewoon commercieel programma).

7 augustus CSSCompositing, filters en blending:
Verwijderd: sarasoueidan.com (uitleg is te oud).
Verwijderd: webdesign.tutsplus.com (tutorial is te oud).

6 augustus Gereedschap → KLeuren:
Nieuw: toolness.github.io (toegankelijk kleurenpalet met zes kleuren samenstellen).

6 augustus Toegankelijkheid → Artikelen, tutorials, links, en dergelijke → Algemeen:
Nieuw: viget.com (niet-technisch overzicht van dingen die belangrijk zijn voor toegankelijkheid).
Nieuw: a11yproject.com (pagina met links naar van alles over toegankelijkheid).

3 augustus CSS → Fonts, typografie, tekst, emoticons en lijnen → Zelf font samenstellen en aanpassen (inclusief subsetting):
Nieuw: cloudfour.com (artikel over de voor- en nadelen van verschillende manieren van subsetting).

3 augustus CSS → Fonts, typografie, tekst, emoticons en lijnen → Zelf font samenstellen en aanpassen hernoemd naar CSS → Fonts, typografie, tekst, emoticons en lijnen → Zelf font samenstellen en aanpassen (inclusief subsetting).

3 augustus CSS → Forums en gespecialiseerde zoekmachines:
Nieuw: beta.sayhello.so (zoekmachine gericht op ontwikkelaars).

31 juli CSS → Clipping en masking (clip-path, mask-..., shape-outside, en dergelijke):
Verwijderd: webdesignerdepot.com (tutorial is te oud).

27 juli CSS → Forums en gespecialiseerde zoekmachines:
Nieuw: you.com (zoekmachine die gericht is op ontwikkelaars en programmeurs).

27 juli CSS → Forums hernoemd naar CSS → Forums en gespecialiseerde zoekmachines.

26 juli HTML → <embed>, <object>, <video>, <audio>, <iframe> → Ondertiteling en bijschriften (<track>):
Nieuw: accessibilityoz.com (artikel over het belang van bijschriften bij video's).

26 juli HTML → Kopregels (<h...>) en sectievormende elementen (zoals <section> en <nav>):
Nieuw: smashingmagazine.com (wanneer <article> en wanneer <section> te gebruiken).

26 juli HTML → Formulieren, <input>, en dergelijke:
Nieuw: adrianroselli.com (artikel over het nut van <fieldset> en <legend>).

26 juli CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke:
Nieuw: hidde.blog (artikel over de werking van focus:visible).

24 juli Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren → Maken en bewerken:
Verwijderd: gifmaker.me (site bestaat kennelijk niet meer).

24 juli CSS → Bugs en hacks → CSS wegfilteren/aanpassen (inclusief @supports):
Verwijderd: quirksmode.org (artikel over de beperkingen van @supports is verouderd).
Verwijderd: sitepoint.com (tutorial over @supports is te oud).

22 juli Toegankelijkheid → Algemene tests:
Nieuw: a11yproject.com (hoe Firefox te gebruiken voor testen op toegankelijkheid).

20 juli JavaScript, DOM en CSSOM → Scripts, bibliotheken, frameworks en API's:
Nieuw: apislist.com (overzicht van publieke API's).

20 juli JavaScript, DOM en CSSOM → Scripts, bibliotheken en frameworks hernoemd naar JavaScript, DOM en CSSOM → Scripts, bibliotheken, frameworks en API's.

19 juli HTML → Landcodes (lang="...") en internationalisatie:
Nieuw: rtlstyling.com (uitgebreid artikel hoe je site geschikt te maken voor talen die van rechts naar links lopen).

17 juli CSS → Online uitproberen, code genereren, en dergelijke:
Verwijderd: bouncejs.com (site bestaat niet meer).

17 juli Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke:
Verwijderd: picspree.com (site linkt nu door naar freeimages.com, die hier ook is vermeld).

17 juli CSS → Browser support → Specifiek CSS:
Verwijderd: shouldiprefix.com (de info over benodigde vendor prefixes is te oud).

17 juli CSS → Browser support → Combinaties van CSS, HTML, JavaScript en/of SVG:
Verwijderd: html5please.com (de info over browser support is te oud).

13 juli CSS → Media Query's, Container Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-CSS-methoden zoals SVG, <picture> en <img>):
Nieuw: jakearchibald.com (artikel over het verschil tussen width, height en aspect-ratio bij afbeeldingen).

10 juli HTML → <embed>, <object>, <video>, <audio>, <iframe>) → Ondertiteling en bijschriften (<track>):
Verwijderd: washington.edu (pagina met adressen voor gratis ondertiteling bestaat kennelijk niet meer).

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

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.

'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. 'Free to download' betekent vaak inderdaad: gratis downloaden. Maar ook niet meer dan dat: voor gebruik moet je vaak betalen.

Bij controles van hier vermelde sites blijkt regelmatig dat sites plotseling hun licentie fors gewijzigd hebben, bijvoorbeeld omdat ze zijn verkocht. Het is dus echt belangrijk dat je zelf de voorwaarden voor gebruik leest, want deze kunnen inmiddels zijn gewijzigd.

En ook als de (volledige of gedeeltelijke) inhoud van een site gratis is, kan een licentie nog wel aanvullende voorwaarden stellen. Zoals dat het materiaal niet gebruikt mag worden voor porno, of dat vermeld moet worden waar het vandaan komt.

Helaas is er een toenemend aantal sites met in de kop of naam iets als 'publicdomain' of 'free', terwijl je gewoon moet betalen. Lees daarom ALTIJD de licentie bij de site en/of bij het betreffende onderdeel. Als er geen licentie is, is het heel simpel: niet gebruiken. En als 'n licentie langer is dan zo'n twee schermen, of volkomen onleesbaar (nep-)juridisch blabla: ook niet gebruiken. Tenzij je geld te veel hebt. (Meestal is een licentie te vinden in het menu of onderaan de pagina onder een naam als 'Terms', 'Stuff', 'License', of iets dergelijks.)

Onder het kopje Juridisch is meer te vinden over de juridische kant van de zaak.

Afbeeldingen optimaliseren, maken, bewerken, en dergelijke zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren.

Kant-en-klare (aan te passen) lay-outs voor een complete pagina zie CSS → Lay-outs.

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

Webfonts (ook webfonts die bestaan uit iconen en/of emoticons) zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Webfonts (om te downloaden).

Veel sites zijn ingedeeld in categorieën en/of zijn te doorzoeken op trefwoord. Omdat dit soms verandert, staat dit er hieronder niet altijd bij.

Hieronder staat slechts een heel kleine selectie van wat er op internet is te vinden, vooral grotere en aparte 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 laten zien' uitvinkt, kun je kiezen, welke categorieën 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. Ingedeeld in categorieën en met zoekmogelijkheid.

animatedgif.net
Animaties. Ingedeeld in categorieën.

bensound.com
Muziek. Ingedeeld in genre. Voor niet-commercieel gebruik min of meer vrij te gebruiken, maar lees de licentie.

bestanimations.com
Animaties. Ingedeeld in categorieën en met zoekmogelijkheid. Niet alles is helemaal vrij te gebruiken.

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

brandsoftheworld.com
Gigantische hoeveelheid bedrijfslogo's. Lees vooral de terms of use, want je wilt niet de advocaten van Google of Microsoft achter je aan krijgen wegens misbruik van hun logo.

burst.shopify.com
Vrij te gebruiken en Creative Commons-foto's. Ingedeeld in categorieën en met zoekmogelijkheid.

clker.com
Publiek Domein clipart en foto's.

commons.wikimedia.org/wiki/Main_Page
Publiek Domein 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 en met zoekmogelijkheid.

css.gg
Ruim zevenhonderd met CSS gemaakte iconen. Van elke icon is de code te downloaden (in CSS- of SVG-formaat).

flickr.com/creativecommons
Foto's, waarvan veel onder een Creative Commons-licentie vallen. Met zoekmogelijkheid.

fluenticons.co
Meer dan 1000 open source iconen met computersymbolen.Doorzoekbaar op trefwoord. Te downloaden in SVG- en PNG-formaat.

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

foter.com
Foto's onder een Creative Common-licentie. Met zoekmogelijkheid.

freeimages.com/nl
Vrij te gebruiken foto's. Naast de indeling in categorieën kun je heel gedetailleerd zoeken. Gedeeltelijk Nederlandstalig.

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

freesound.org
Héél veel geluiden onder een Creative Commons-licentie. Met zoekmogelijkheid.

game-icons.net
Online aan te passen iconen voor spelletjes onder een Creative Commons-licentie. SVG- en PNG-formaat. Met zoekmogelijkheid.

gradientmagic.com
Achtergronden gemaakt met behulp van (soms heel bijzondere) gradiënts. De CSS is online aan te passen. Gesorteerd op patroon.

healthicons.org
Grote hoeveelheid open source-iconen over gezondheid, ziekte, behandelingen, en dergelijke. SVG- en PNG-formaat. Doorzoekbaar op categorie en trefwoord.

heropatterns.com
SVG-achtergronden onder een Creative Commons-licentie. Het basispatroon (en de bijbehorende code) kan online worden aangepast.

i2clipart.com
Publiek Domein clipart. Ingedeeld in categorieën en op kleur en met zoekmogelijkheid.

icons8.com
Iconen (alternatief voor het bekende Font Awesome), clipart, foto's, kunstmatig gemaakte gezichten. Alles ingedeeld in categorieën en met zoekmogelijkheid. Afhankelijk van de categorie verschilt de licentie (niet alles mag commercieel worden gebruikt, bijvoorbeeld). Lees de licentie dus.

iconbros.com
Vrij te gebruiken PNG- en SVG-iconen. Ingedeeld in categorieën en met zoekmogelijkheid.

iconduck.com
Meer dan honderdduizend open source iconen. Doorzoekbaar op trefwoord. SVG- en PNG-formaat.

iconfinder.com
PNG- en SVG-iconen. Je kunt filteren op vrij te gebruiken iconen, maar onder verschillende licenties.

iconmonstr.com
Vrij te gebruiken iconen in onder andere SVG- en PNG-formaat. Met zoekmogelijkheid.

icones.js.org
Groot aantal verzamelingen met iconen onder verschillende licenties, die op een aantal manieren zijn te downloaden, onder andere als SVG.

iconspedia.com
Iconen. Er kan worden gefilterd op een hele reeks licenties, waaronder Creative Commons. Ingedeeld in categorieën en met zoekmogelijkheid.

ikonate.com
Groot aantal vrij te gebruiken iconen in SVG-formaat. Een aantal dingen (zoals wel of geen randje) kan online worden aangepast.

imageafter.com
Vrij te gebruiken foto's en achtergronden. Ingedeeld in categorieën en met zoekmogelijkheid.

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 Creative Commons foto' s.

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

lpc.opengameart.org
Groot aantal sprites en andere afbeeldingen, geschikt om beweging te simuleren, onder vrije licenties. 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.)

markodenic.com/tools/buttons-generator
Kant-en-klare knoppen, waaronder bewegende, met bijbehorende CSS.

mixkit.co
Vrij te gebruiken geluiden, muziek en video's. Doorzoekbaar op trefwoord en categorie.

mazwai.com
Video's en foto's onder Creative Commons- en vergelijkbare licenties. Doorzoekbaar op trefwoord en categorie.

negativespace.co
Creative commons-foto's. Doorzoekbaar op trefwoord en categorie.

openphoto.net/gallery/browse
Foto's onder verschillende licenties (bij elke foto staat de licentie). Doorzoekbaar op categorie en trefwoord.

patternpictures.com
Vrij te gebruiken achtergronden. Doorzoekbaar op trefwoord en categorie.

pdclipart.org (Public Domain Clip Art)
Publiek Domein clipart. Doorzoekbaar op trefwoord en categorie.

pexels.com/nl-nl
Vrij te gebruiken foto's en video's. Doorzoekbaar op trefwoord. Nederlandstalig.

photos-public-domain.com
Publiek Domein foto's. Doorzoekbaar op trefwoord en categorie.

picjumbo.com
Gratis foto's. Doorzoekbaar op trefwoord en categorie.

picography.co
Creative common-foto's. Doorzoekbaar op trefwoord en categorie.

pixabay.com/nl
Vrij te gebruiken foto's, clipart, video's, muziek en geluidseffecten. Nederlandstalig.Doorzoekbaar op trefwoord.

publicdomainvectors.org/nl/
Clipart onder een Creative Commons-licentie. Nederlandstalig. Doorzoekbaar op trefwoord en categorie.

reinerstilesets.de
Vrij te gebruiken geluiden, achtergronden en afbeeldingen. De afbeeldingen kunnen worden samengevoegd tot sprites, waarmee beweging kan worden gesimuleerd.

remixicon.com
Grote hoeveelheid open source iconen in SVG- en PNG-formaat. Doorzoekbaar op trefwoord en categorie.

reshot.com
Vrij te gebruiken foto's. Doorzoekbaar op trefwoord en categorie.

rw-designer.com/cursor-library
Cursors, waarvan veel vrij gebruikt kunnen worden (bij elke set cursors staat de licentie). Doorzoekbaar op trefwoord en categorie. (Een afwijkende cursor kan grote problemen voor toegankelijkheid opleveren, zoals op ericwbailey wordt beschreven.)

simpleicons.org
Meer dan 2200 Creative Commons SVG-iconen met bedrijfsemblemen. Doorzoekbaar op merknaam.

skitterphoto.com
Publiek Domein foto's. Doorzoekbaar op trefwoord en categorie.

smashingmagazine.com/2008/09/the-hr-contest-results-download-your-fresh-hr-line-now
Vrij te gebruiken horizontale lijnen (uiteraard zijn dit geen gewone lijnen...).

smashingmagazine.com/2010.04/the-ultimate-free-web-designer-s-icon-set-750-icons-incl-psd-sources
Set met 750 vrij te gebruiken iconen voor webdesign. Bevat onder andere iconen voor toetsen, asociale media, vlaggen en computersymbolen.

soundjay.com
Vrij te gebruiken geluiden. Doorzoekbaar op categorie.

stockup.sitebuilderreport.com
Foto's, waarvan de meeste Publiek Domein of onder een Creative Commons-licentie. Doorzoekbaar op trefwoord. (Deze site doorzoek andere sites, dus controleer vooral de originele licentie goed!)

stockvault.net
Grote hoeveelheid foto's, die onder eigen - min of meer vrije - licenties vallen. Doorzoekbaar op trefwoord en categorie.

svgsilh.com
Grote hoeveelheid zwart-wit SVG-afbeeldingen onder Creative Commons-licentie. Doorzoekbaar op categorie en trefwoord. De afbeeldingen zijn online te bewerken. Te downloaden als SVG en PNG.

tablericons.com
Bijna tweeduizend vrij te gebruiken SVG-iconen over met name computers. Op de site aan te passen, waarna de bijbehorende kan code worden gekopieerd.

thepatternlibrary.com
Vrij te gebruiken zeer aparte achtergronden. (In plaats van 'apart' stond hier eerst 'weerzinwekkend lelijk', maar ze blijken serieus bedoeld te zijn. Sorry.)

ui-buttons.web.app
Code (CSS en HTML) voor honderd knoppen, die bij activeren van uiterlijk veranderen. MIT-licentie.

undraw.co
Vrij te gebruiken clipart, waarvan de belangrijkste kleur is aan te passen. Te downloaden als SVG en PNG.

unsplash.com
Vrij te gebruiken foto's. Doorzoekbaar op trefwoord en categorie.

videvo.net
Video's, muziek en geluiden. Doorzoekbaar op trefwoord en categorie. Nadat je hebt gezocht, kun je filteren op de licentie (niet alles is gratis).

vidsplay.com
Vrij te gebruiken video's. Doorzoekbaar op trefwoord en categorie.

visualhunt.com
Foto's onder Creative Commons-licentie. Doorzoekbaar op trefwoord en categorie.

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

wordpress.org/openverse
Zoekmachine voor afbeeldingen en dergelijke die Publiek Domein zijn of onder een Creative Commons-licentie vallen.

wpclipart.com/browse
Publiek Domein clipart. Doorzoekbaar op trefwoord en categorie.

CSS

Afbeeldingen

(Onderafdeling van CSS)

Animation, transform, transition en Motion Path

(Onderafdeling van CSS)

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

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

CLS (Cumulative Layout Shift) zie Hulpmiddelen en theorie @font-face (inclusief CLS.

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

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

SVG animeren met behulp van CSS staat bij SVG.

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.

blog.maximeheckel.com/posts/cubic-bezier-from-math-to-motion
Heldere uitleg over de wiskunde achter cubic bezier.

codersblock.com/blog/the-surprising-things-that-css-can-animate
Voorbeelden van het animeren van niet direct voor de hand liggende CSS-eigenschappen.

css-irl.info/fun-with-css-motion-path
Voorbeelden van animaties met behulp van Motion Path, inclusief uitleg en code.

css-transform.moro.ess
Maakt de verschillende eigenschappen van transform zichtbaar. Zodra je een eigenschap wijzigt, zie je direct het effect daarvan. Uiterst handig om te zien, wat een bepaalde wijziging van een eigenschap voor effect heeft.

css-tricks.com/advanced-css-animation-using-cubic-bezier
Interactieve tutorial over cubic-bezier.

css-tricks.com/how-css-perspective-works
Tutorial over perspective.

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

danielcwilsom.com/blog/2020/01/motion-path-quirks
Tutorial over Motion Path.

danielcwilsom.com/blog/2020-02/motion-path-transforms
Tutorial over de verschillen tussen translate, rotate en scale toegepast als afzonderlijke eigenschap, en toegepast in combinatie met transform().

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

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
Gedetailleerde tutorial over animaties.

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

freecodecamp.org/news/web-animation-performance-fundamentals
Uitgebreid artikel over wat een frame is en de invloed hiervan op de snelheid van de pagina.

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.

joshwcomeau.com/animation/css-transitions
Uiterst overzichtelijke en volledige interactieve tutorial over transition.

joshwcomeau.com/animation/keyframe-animations
Uiterst overzichtelijke en volledige interactieve tutorial over animation.

pomax.github.io/bezierinfo
Heel uitgebreid artikel over de theorie achter Bézier Curves.

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

themeisle.com/blog/css-animations-tutorial
Tutorial over animaties, gericht op beginners. Met veel voorbeelden.

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.

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.

web.dev/css-individual-transform-properties
Artikel over het verschil tussen transform en de afzonderlijke eigenschappen rotate(), scale() en translate().

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

Background, background-image, image-set() en sprites

(Onderafdeling van CSS)

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

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

Gradiënts zie CSS → Gradiënts.

Online sprite maken zie Gereedschap → Sprite maken.

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.

css-tricks.com/using-performant-next-gen-images-in-css-with-image-set
Tutorial over image-set().

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.

ishadeed.com/article/css-multiple-backgrounds
Uitgebreide tutorial over background.

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...

clip-path, mask-..., shape-outside, en dergelijke zie Clipping en masking (clip-path, mask-..., shape-outside, en dergelijke).

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

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/ronde-hoeken/kader-040
Uitgebreide uitleg van border-radius. Met voorbeelden. Nederlandstalig.

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).

Browser support

(Onderafdeling van CSS)

Combinaties van CSS, HTML, JavaScript en/of SVG

(Onderafdeling van CSS → Browser support)

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.

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 elementen, eigenschappen, en dergelijke mogelijk maken zie CSS → Bugs en hacks → Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken.

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. Ook de door Mozilla bijgehouden browserondersteuning wordt hier weergegeven.

chromestatus.com/features
Overzicht van wat Chromium ondersteunt van HTML, CSS en JavaScript. (Onder andere Google Chrome, Edge, Samsung Internet en Opera zijn op Chromium gebaseerd). Laat ook (geschatte) ondersteuning door Firefox en Safari (alleen desktopbrowsers) zien. Geeft percentages van hoeveel eigenschappen, functies, en dergelijke websites daadwerkelijk gebruiken (onder de knop 'Stats').

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

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

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)

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.

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

css3test.com
Geeft online gedetailleerd aan welke CSS-eigenschappen worden ondersteund in de browser, waarmee je deze site bezoekt. Met bij elke eigenschap links naar documentatie en specificatie.

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 desktop- en mobiele browsers wordt ondersteund.

css-tricks.com/is-vendor-prefixing-dead"
Artikel over ontstaan van vendor prefixes (voorvoegsels) en hoe het daar nu mee staat.

Specifiek JavaScript

(Onderafdeling van CSS → Browser support)

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.

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

developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Overzicht van de ondersteuning van de DOM in desktop- en mobiele browsers. Met links naar voorbeelden, documentatie, en dergelijke.

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

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Overzicht van ondersteuning van JavaScript in desktop- en mobiele browsers. Met links naar voorbeelden, documentatie, en dergelijke.

kangax.github.io/compat-table/es6
Overzicht welke (versie van) welke desktopbrowser, mobiele browser, server, node, en dergelijke wat van welke versie van JavaScript ondersteunt. Je kunt selecteren per versie, per browser, per polyfill, en dergelijke.

w3schools.com/jsref
JavaScript en HTML DOM referentie. Met links naar voorbeelden en ondersteuning door desktopbrowsers.

w3schools.com/tags/ref_eventattributes
Overzicht van HTML event-attributen. Met links naar voorbeelden en ondersteuning door desktopbrowsers.

whatwebcando.today
Overzicht van browser support voor HTML5 API's in de browser waarmee je deze site bezoekt. Met links naar meer documentatie.

Specifiek SVG

(Onderafdeling van CSS → Browser support)

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.

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

developer.mozilla.org/en-US/docs/Web/SVG
Ingangspagina naar een aantal referenties en dergelijke. Daar is dan weer de ondersteuning in desktop en mobiele browsers te vinden.Met voorbeelden.

en.wikipedia.org/wiki/Comparison_of_layout_engines_(Scalable_Vector_Graphics)
Browser support van 'n hele serie browsers, viewers, en dergelijke. De ondersteuning wordt niet per browser, maar per weergavemachine gegeven.

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 (ontwikkel­gereedschap), 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, Opera en Edge) 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.

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)

bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium
Tutorial hoe CSS met behulp van @supports alleen (of juist niet) toe te passen voor browsers gebaseerd op Gecko en/of Blink en/of Webkit. Lees vooral de waarschuwing over de (on)betrouwbaarheid van deze methode!

bram.us/2022/01/20/detect-at-rule-support-with-the-at-rule-function
Tips om te bepalen of een browser een bepaalde @-regel ondersteunt.

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. Bovendien lijkt modernizr niet meer te worden bijgehouden, maar dat is eigenlijk geen probleem, omdat het alleen op oudere browsers is gericht, die @supports niet ondersteunen.)

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.

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.
Aanvulling: de lijst bij Modernizr lijkt niet meer echt goed bijgehouden te worden. Het kan dus toch de moeite lonen om ook zelf op internet te zoeken, waarbij grondig testen in verband met de wisselende kwaliteit echt nodig is. Overigens zijn in nieuwere browsers nog nauwelijks polyfills nodig.

Clipping en masking (clip-path, mask-..., shape-outside, en dergelijke)

(Onderafdeling van CSS)

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

In Firefox is in het ontwikkelgereedschap een ongelooflijk handige shape-editor ingebouwd.

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

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

css-tricks.com/basic-shapes-path-never-twain-shall-meet
Tutorial over shape-outside en 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.

css-voorbeelden/tekst/illistraties/tekst-043
Met behulp van shape-outside tekst uitlijnen naast een ronde of stervormige afbeelding. Nederlandstalig.

digitalocean.com/community/tutorials/css-clipping-with-clip-path
Tutorial over clip-path.

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

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

ishadeed.com/article/clip-path
Tutorial over clip-path. Met veel voorbeelden.

jhey.dev/writing/squeaky-portraits-having-fun-with-the-css-path-function
Originele voorbeelden van wat er zoal mogelijk is met clip-path.

smashingmagazine.com/2018/09/css-shapes
Uitgebreide tutorial over shape-outside (en bijbehorende eigenschappen). Met voorbeelden.

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

tympanus.net/codrops/2018/11/29/an-introduction-to-css-shapes
Tutorial over clip-path en shape-outside met veel voorbeelden.

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.

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 uiterlijk van een afbeelding wordt met behulp van filter, mix-blend-mode en background-blend-mode volledig veranderd, waardoor je goed kunt zien, wat elke eigenschap voor invloed heeft.

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

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.

css-irl.info/drop-shadow-the-underrated-css-filter
Tutorial over drop-shadow.

contain

(Onderafdeling van CSS)

css-tricks.com/lets/take-a-deep-dive-into-the-css-contain-property
Tutorial over contain.

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)

csscursor.info
Overzicht van cursors. Klik op een cursor om de code ervoor te krijgen.

Cursussen CSS en/of HTML

(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. (Wat natuurlijk niet wil zeggen dat er geen andere goede cursussen zijn.)

Cursussen en dergelijke specifiek voor één eigenschap, element, attribuut en dergelijke, kunnen ook bij dat element, attribuut of eigenschap staan. Hier staan alleen algemene cursussen die echt (min of meer) een volledige cursus CSS en/of HTML zijn. (Alsof je op school zit, zoiets.)

Cursussen en dergelijke specifiek voor het optimaliseren van een website zijn te vinden bij Gereedschap → Snelheid testen, gzip, comprimeren (inclusief theorie).

Cursussen en dergelijke specifiek voor Responsive Web Design, responsieve afbeeldingen, en dergelijke staan bij CSS → Media Query's, Container Query's en Responsive Web Design.

Cursussen en dergelijke specifiek voor toegankelijkheid zijn te vinden bij Toegankelijkheid → Artikelen, tutorials, en dergelijke.

Specificaties voor CSS en overzichten met (alle) eigenschappen en dergelijke zijn te vinden bij CSS → Overzicht eigenschappen, tips, specificatie, en dergelijke. (Soms is de uitleg bij een eigenschap en dergelijke uit zo'n overzicht zo uitgebreid dat het ook een soort cursus is.)

Specificaties voor HTML en overzichten met (alle) HTML-elementen, -attributen, en dergelijke zijn te vinden bij HTML → Overzicht elementen, attributen, tips, specificatie, en dergelijke. (Soms is de uitleg bij een element en dergelijke uit zo'n overzicht zo uitgebreid dat het ook een soort cursus is.)

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

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

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

educba.com/software-development/software-development-tutorials/css-tutorial
Cursus CSS.

educba.com/software-development/software-development-tutorials/html-tutorial
Heel uitgebreide cursus HTML.

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 (in ruil voor een abonnement op een nieuwsbrief) ook als e-book te downloaden.

geeksforgeeks.org/css
Interactieve cursus CSS. (Voor het interactieve deel moet je je wel registreren.)

geeksforgeeks.org/html
Interactieve cursus HTML. (Voor het interactieve deel moet je je wel registreren.)

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.

html-site.nl/het-10-stappen-plan-om-een-website-te-maken
Korte, duidelijke Nederlandstalige cursus websitemaken.

internetingishard.netlify.app
Cursus CSS en HTML.

learn.shayhowe.com/html-css
Online interactieve cursus HTML en CSS.
Vervolgcursus.

leanit.nl/gratiscursus/html-en-css
Nederlandstalige basiscursus HTML en CSS.

modernways.be/myap/it/school/course/Webtechnologie
Uitgebreide Vlaamstalige cursus CSS en HTML. (De cursus is voor een school, maar ook prima daarbuiten te volgen.)

qhmit.com/html
Uitgebreid overzicht van HTML-elementen met voorbeelden, cursussen, enzovoort.

sherpa.guide/paths/htmlcss
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om HTML en CSS te leren. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

tutorialrepublic.com/css-tutorial
Interactieve cursus CSS.

tutorialrepublic.com/html-tutorial
Interactieve cursus HTML.

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.

w3schools.com/css
Online interactieve CSS-tutorial.

w3schools.com/html
Interactieve HTML-tutorial.

web.dev/learn/css
Online interactieve cursus CSS. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken. De cursus is bijvoorbeeld even goed in Firefox te volgen.

web4college.com/css
Cursus CSS met veel mogelijkheden om geleerde gelijk uit te proberen.

web4college.com/html
Cursus HTML met veel mogelijkheden om geleerde gelijk uit te proberen.

websitesmetstijl.nl
Uitgebreide Nederlandstalige cursus HTML.

Default ('standaard') stylesheets

(Onderafdeling van CSS)

chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css
Browser stylesheet van chromium (gebruikt in onder andere Google Chrome, Edge en Opera).

searchfox.org/mozilla/central/source/layout/style/res/html.css
Browser stylesheet van Firefox.
Deze pagina is (of was in ieder geval) negentig procent van de tijd onbereikbaar. Je kunt ook in de adresbalk van Firefox chrome://browser/content/extension.css intypen. Dat is de stylesheet die Firefox op dat moment gebruikt.

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

Eenheden, calc(), min(), en dergelijke

(Onderafdeling van CSS)

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

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

Voor- en nadelen van eenheden als em en px specifiek voor fonts staan bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Typografie.

areknawo.com/all-css-units-compared-and-explained
Kort en duidelijk overzicht van eenheden in CSS.

css-tricks.com/a-complete-guide-to-calc-in-css
Uitgebreide tutorial over calc().

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.

isahdeed.com/article/css-min-max-clamp()
Tutorial over min(), max() en clamp().

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.

misterpixel.nl/blog/css-eenheden-px-em-en-rem-gebruik-niet-alleen-maar-px
Nederlandstalig artikel over de verschillen tussen en voor- en nadelen van px, em en rem.

moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max
Tutorial met veel voorbeelden over calc(), clamp(), min() en max().

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

smashingmagazine.com/2021/07/css-absolute-units
Artikel over het afwijken van voor websites gebruikte absolute eenheden als inches, centimeters, en dergelijke van diezelfde eenheden in de fysieke wereld.

stackdiary.com/css-math-functions
Tutorial over calc(), min(), max() en clamp().

wattenberger.com/blog/css-percents
Een overzicht van waar een percentage op is gebaseerd bij verschillende eigenschappen.

web.dev/min-max-clamp
Tutorial over clamp(), min() en max(). Met een aantal praktische voorbeelden.

Flexbox

(Onderafdeling van CSS)

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.

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, width, height, aspect-ratio, object-fit, en dergelijke.

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

writing-mode zie CSSLogical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

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

codeinwp.com/blog/css-flexbox-tutorial
Uitgebreide interactieve tutorial. Met mogelijkheid om content van rechts naar links te laten lopen.

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

codingfantasy.com/flexboxadventure
Tutorial over flexbox. Onderdeel is een spel om flexbox spelenderwijs te leren.

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

css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think
Uitgebreide uitleg over de (soms onverwachte) effecten van flex-shrink, flex-grow, flex-basis en flex.

css-tricks.com/understanding/flex-grow-flex-shrink-and-flex-basis
Duidelijke tutorial over flex-grow, flex-shrink, flex-basis en hun onderlinge samenhang.

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

dev.to/smpnjn/a-complete-interactive-guide-to-css-flex-box
Met heel weinig tekst wordt behulp van knoppen op een uiterst simpele en duidelijke manier getoond, wat voor effect de verschillende waarden hebben.

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.

flexboxdefense.com
Tutorial in de vorm van een spelletje met bewegende doelen.

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.

ishadeed.com/article/css-flex-property
Uitgebreide tutorial over flex (de eigenschap 'flex').

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.

netspecialist.nl/html-en-css/486-de-flexbox-technologie
Korte tutorial over flexbox. Nederlandstalig.

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.

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

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

webdesign.tutsplus.com/categories/flexbox
Hele serie tutorials met praktische toepassingen van flexbox.

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, typografie, tekst, emoticons en lijnen

(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 op 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.

Hulpmiddelen specifiek voor Unicode, entiteit opzoeken, en dergelijke zie HTML → Charsets, unicode, entiteiten.

text-shadow zie CSS → Online uitproberen, code genereren, en dergelijke.

Emoticons

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

meowni.ca/posts/emoji-emoji-emoji
Uitleg over hoe emoticons worden weergegeven.

nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web
Artikel over de problemen die browsers hebben met het weergeven van emoticons.

smashingmagazine.com/2016/11/character-sets-encoding-emoji
Uitleg over hoe emoticons worden weergegeven, met veel aandacht voor utf.

tonsky.me/blog/emoji
Uitleg over hoe emoticons worden weergegeven.

Hulpmiddelen en theorie @font-face (inclusief CLS)

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Hulpmiddelen en theorie specifiek voor variabele en gekleurde fonts staan bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Variabele en gekleurde fonts.

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

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

css-tricks.com/the-best-font-loading-strategies-and-how-to-execute-them
Overzicht van manieren om webfonts (zo snel mogelijk) te downloaden.

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

font-match.netlify.app
Online twee uit te kiezen fonts over elkaar heen zetten, zodat je het verschil in grootte en dergelijke duidelijk kunt zien.

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

iainbean.com/posts/2021/5-steps-to-faster-web-fonts
Tips om webfonts sneller weer te geven.

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.

nooshu.com/blog/2020/02/23/improving-perceived-performance-with-the-css-font-display-property
Uitgebreide tutorial over font-display.

simonhearne.com/2021/layout-shifts-webfonts
Zeer uitgebreide tutorial hoe webfonts zo snel mogelijk te laden en hoe FOUT te voorkomen.

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/2021/06/how-to-fix-cumulative-layout-shift-issues
Tutorial hoe CLS te voorkomen.

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.

web.dev/css-web-vitals
Tutorial hoe CLS te voorkomen. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

web.dev/font-best-practices
Tutorial met tips om webfonts zo efficiënt mogelijk te gebruiken. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

Lijnen

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

css-voorbeelden.nl/tekst/lijnen/tekst-105
Voorbeelden van <hr>'s die met behulp van CSS (fors) van uiterlijk zijn veranderd. Nederlandstalig.

pqina.nl/blog/drawing-decorative-lines-with-css
Met behulp van alleen CSS decoratieve lijnen maken.

sarasoueidan.com/blog/horizontal-rules
Tutorial over het opmaken van <hr>'s, waarbij rekening wordt gehouden met toegankelijkheid.

Overig

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Online code voor text-shadow maken zie CSS → Online uitproberen, code genereren, en dergelijke.

cssportal.com/css-text-gradient-generator
Online tekst in een verlopende kleur (gradiënt) maken en bijbehorende code genereren.

Tekst en ::selection

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

codersblock.com/blog/using-css-to-control-text-selection
Uitgebreide uitleg over de werking van user-select bij het (voorkomen van) tekst selecteren.

coding-dude.com//wp/css/css-stroke-text
Tutorial over stroke-text.

ishadeed.com/article/selection-in-css
Artikel over het gebruik van ::selection en user-select om tekst te selecteren, of dat juist onmogelijk te maken.

Typografie

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

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.

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 deze 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.)

codersblock.com/blog/deep-dive-into-text-wrapping-and-word-breaking
Zeer uitgebreid overzicht van manieren om (delen van) woorden op dezelfde regel te houden, of juist niet. Zelfs afbreken in het Chinees wordt behandeld.

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.

design.tutsplus.com/courses/the-ultimate-guide-to-typography
Cursus typografie (in de vorm van video's, met ondertiteling). De nadruk ligt op het kiezen van het juiste font.

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.

fonts.google.com/knowledge
Aantal artikelen over van alles wat met typografie te maken heeft.

ishadeed.com/article/css-short-long-content
Overzicht van manieren om problemen met heel lange en heel korte woorden op te lossen.

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

joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility
Uitgebreid artikel over het gebruik van de eenheden em, rem en px met betrekking tot toegankelijkheid.

learnui.design/blog/identifying-fonts
Allerlei manieren om achter de naam van een font te komen.

material.io/design/typography/unterstanding-typography
Uitleg over de belangrijkste begrippen in typografie (eigenschappen van tekens, regelhoogte, regellengte, enzovoort).

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

prowebtype.com
Online boek over typografie (tegen kleine betaling ook te downloaden).

qwerty.dev/whitespace
Tutorial over het gebruik van de elf verschillende soorten 'spaties'.

simoncozens.github.io/feature-tags
Overzicht van font-feature-settings. 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.

webdesign.tutsplus.com/courses/an-introduction-to-typeface-styles
Cursus in de vorm van video's over de vormgeving van fonts (met ondertiteling).

Uniwidth fonts

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Uniwidth fonts zijn fonts, waarvan alle varianten even breed zijn. Dat kan handig zijn als je erg weinig ruimte hebt, maar bijvoorbeeld toch vet wilt gebruiken.

uxdesign.cc/uniwidth-typefaces-for-interface-design
Uitleg wat uniwidth fonts zijn. Met links naar een aantal (gratis) fonts.

Variabele en gekleurde fonts

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Variabele en gekleurde fonts staan bij elkaar, omdat het er dik in zit dat binnenkort gekleurde fonts ook variabel zijn, en omgekeerd.

Meer algemene hulpmiddelen (niet specifiek voor variabele en/of gekleurde fonts) staan bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Hulpmiddelen en theorie @font-face (inclusief CLS).

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/colrv1-and-css-font-palette-web-typography
Tutorial over @font-palette-values (meerkleurige fonts) met de bijbehorende eigenschappen.

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

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

evilmartians.com/chronicles/variable-fonts-in-real-life-how-to-use-and-love-them
Tutorial over variabele fonts met ook wat theorie over de opbouw en dergelijke.
Vervolg-artikel, meer gericht op de praktische toepassing: the-joy-of-variable-fonts-getting-started-on-the-frontend.

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

pimpmytype.com/variable-font-fallback
Tutorial over fallback fonts voor oudere browsers die variabele fonts niet ondersteunen.

pimpmytype.com/variable-fonts-on-the-web
Uiterst duidelijke uitleg wat variabele fonts zijn en hoe deze te gebruiken.

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/courses/up-and-running-with-variable-fonts
Uitgebreide cursus in de vorm van video's (met ondertiteling).

webkit.org/blog/12662/customizing-color-fonts-on-the-web
Uitleg over @font-palette-values (meerkleurige fonts) met de bijbehorende eigenschappen.

Webfonts (om te downloaden)

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

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.

'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. 'Free to download' betekent vaak inderdaad: gratis downloaden. Maar ook niet meer dan dat: voor gebruik moet je vaak betalen.

Helaas is er een toenemend aantal sites met in de kop of naam iets als 'publicdomain' of 'free', terwijl je gewoon moet betalen. Lees daarom ALTIJD de licentie bij de site en/of bij het betreffende onderdeel. Als er geen licentie is, is het heel simpel: niet gebruiken. En als 'n licentie langer is dan zo'n twee schermen, of volkomen onleesbaar (nep-)juridisch blabla: ook niet gebruiken. Tenzij je geld te veel hebt. (Meestal is een licentie te vinden in het menu of onderaan de pagina onder een naam als 'Terms', 'Stuff', 'License', of iets dergelijks.)

Bij controles van hier vermelde sites blijkt regelmatig dat sites plotseling hun licentie fors gewijzigd hebben, bijvoorbeeld omdat ze zijn verkocht. Het is dus echt belangrijk dat je zelf de voorwaarden voor gebruik leest, want deze kunnen inmiddels zijn gewijzigd.

En ook als de (volledige of gedeeltelijke) inhoud van een site gratis is, kan een licentie nog wel aanvullende voorwaarden stellen. Zoals dat het materiaal niet gebruikt mag worden voor porno, of dat vermeld moet worden waar het vandaan komt.

Onder het kopje Juridisch is meer te vinden over de juridische kant van de zaak.

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, typografie, tekst, emoticons en lijnen → Hulpmiddelen en theorie @font-face (inclusief CLS) vind je sites, waar je hier eenvoudig code voor kunt aanmaken. Specifiek voor fonts van Google staan iets hieronder bij fonts.google.com soortgelijke mogelijkheden en nog wat links naar sites met meer algemene info over Google fonts.

1001freefonts.com
Grote verzameling voornamelijk gratis fonts.

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

dafont.com
Grote verzameling fonts, waarvan veel gratis.

openmoji.org
Emoticons onder een Creative Commons-licentie.

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

fonts.bunny.net
Privacy-vriendelijk alternatief voor het hosten van fonts bij Google. Compatibel met Google fonts, dus uiterst simpel te veranderen. (<mopper>In een fatsoenlijke wereld zou dit normaal zijn, en zou Google het veel kleinere alternatief voor verstokte datadieven zijn.</mopper>)

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.
Op tryblackbird.com staat nog een verhaal over hoeveel sneller het zelf hosten kan zijn.
Op wpspeedmatters.com staat een overzicht van de voordelen van zelf hosten van Google fonts.
En dan nog 'n leuk verhaal op css-irl.info over wat er kan gebeuren als Google (of 'n andere hoster van je fonts) onverwacht z'n fonts wijzigt.
Als je beslist je fonts ergens anders wilt hosten, staat gelijk hierboven bij fonts.bunny.net een privacy-vriendelijk alternatief voor Google.

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').

learnui/design/blog/ultimate-guide-similar-fonts
Lijst met vrij te gebruiken alternatieven voor veel gebruikte commerciële fonts.

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

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 (inclusief subsetting)

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Overzichten met utf-8-codes, entiteiten, en dergelijke zie Lijsten met karakters en/of opzoeken van entiteit, utf-8-code, codepoint, en dergelijke.

cloudfour.com/thinks/font-subsetting-strategies-content-based-vs-alphabetical
Artikel over de voor- en nadelen van verschillende manieren van subsetting.

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

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.

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

Forms, buttons, :disabled, :enabled, en dergelijke

(Onderafdeling van CSS)

(Code voor) kant-en-klare knoppen en dergelijke zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke.

Html voor formulieren (inclusief valideren) zie HTML → Formulieren, <input>, en dergelijke.

adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen
Tutorial over het opmaken van <input type="radio"> en <input type="checkbox">.

adrianroselli.com/2021-03/under-engineered-select-menus.html
Tutorial over het opmaken van <select>.

adrianroselli.com/2019/09/under-engineered-text-boxen
Tutorial over het opmaken van <textarea>.

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

austingil.com/build-html-forms-right-styling
Uitgebreide tutorial over het opmaken van formulieren (onderdeel van een serie over formulieren).

codyhouse.co/blog/post/custom-accessible-radio-checkbox-buttons-vertical-alignment
Artikel over hoe zelfgemaakte radioknoppen en keuzevakjes goed uit te lijnen met hun <label>.

css-tricks.com/custom-styling-inputs-with-modern-css-features
Tutorial over het opmaken van <input type="radio"> en <input type="checkbox">.

css-tricks.com/fun-times-styling-checkbox-states
Voorbeelden voor het opmaken van een (niet-)aangekruist keuzevakje.

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.

developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling
Tutorial hoe verschillende onderdelen van een formulier op te maken.

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.

ishadeed.com/article/styling-the-good-old-button
Zeer uitgebreide tutorial over het opmaken van <button>.

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

moderncss.dev/pure-css-custom-checkbox-style
Tutorial voor het opmaken van keuzevakjes op een toegankelijke manier.

moderncss.dev/pure-css-custom-styled-radio-buttons
Tutorial voor het opmaken van radioknoppen op een toegankelijke manier.

sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons
Tutorial over het opmaken van keuzevakjes en radioknoppen, terwijl ze toegankelijk blijven.

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

smashingmagazine.com/2021/09/simplyfing-form-styles-accent-color
Tutorial over accent-color (basiskleur voor onderdelen van formulieren).

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.

Forums en gespecialiseerde zoekmachines

(Onderafdeling van CSS)

Omdat CSS, HTML en JavaScript elkaar sterk (kunnen) beïnvloeden, en omdat forums daarover ook nogal door elkaar lopen, staan forums over die drie onderwerpen hier bij elkaar.

beta.sayhello.so
Zoekmachine speciaal gericht op ontwikkelaars.

css-voorbeelden.nl/forum
Forum van deze site. Bedoeld voor vragen en dergelijke over de voorbeelden op deze site, maar je kunt het altijd proberen...

helpmij.nl/forum/Website-maken-Programmeren
Algemeen forum over het maken van websites. Nederlandstalig.

phphulp.nl/php/forum/javascript
Nederlandstalig forum over JavaScript.

phphulp.nl/php/forum/xhtml-css
Nederlandstalig forum over HTML en CSS.

you.com
Zoekmachine speciaal gericht op ontwikkelaars en programmeurs. Als je bijvoorbeeld als zoekterm mede 'css' opgeeft, krijg je vrijwel alleen resultaten die met het schrijven van css te maken hebben, soms zelfs gesorteerd per site. Waarbij ook nog 'ns kwalitatief goede sites bovenaan staan. Een aanrader.

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

(Onderafdeling van CSS)

adrianroselli.com/2020/10/alternative-text-for-css-generated-content
Artikel over alternatieve tekst voor schermlezers bij gebruik van 'content'.

codersblock.com/blog/diving-into-the-before-and-after-pseudo-elements
Uitgebreide tutorial met voorbeelden over ::after en ::before.

freefrontend.com/css-before-after
Tutorial over ::after en ::before, met links naar andere voorbeelden en tutorials.

matuzo.at/blog/heres-what-i-didnt-know-about-content
Artikel over de mogelijkheden (en risico's) van 'content'.

smashingmagazine.com/2013/04/css-generated-content-counters
Tutorial over content, ::after en ::before, met hele serie voorbeelden. Artikel is al wat ouder, maar heel volledig.

Gradiënts

(Onderafdeling van CSS)

smashingmagazine.com/2022/01/css-radial-conic-gradient
Uitgebreide uitleg over (het gebruik van) radial-gradient en conic-gradient.

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)

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.

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, width, height, aspect-ratio, object-fit, en dergelijke.

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

writing-mode zie CSSLogical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

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.

codeinwp.com/blog/css-grid-tutorial-layout
Uitgebreide interactieve tutorial. Met mogelijkheid om content van rechts naar links te laten lopen.

codingfantasy.com/games/css-grid-attack/play
Interactieve tutorial in de vorm van een spel met één lieverd en 'n stel booswichten.

css-tricks.com/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs
Tutorial voor een flexibele lay-out met minimaal gebruik van grid.

css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit
Duidelijke uitleg over het verschil tussen auto-fill en auto-fit.

css-tricks.copm/snippets/css/css-grid-starter-layouts
Voorbeelden van veel voorkomende lay-outs, maar dan gemaakt met behulp van grid. Inclusief code.

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
Tutorial met de gebruikelijke grondigheid van Mozilla.

fjolt.com/article/a-guide-to-css-grid
Met heel weinig tekst wordt behulp van knoppen op een uiterst simpele en duidelijke manier getoond, wat voor effect de verschillende waarden hebben.

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

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

gridbyexample.com
Site over grid met veel voorbeelden met bijbehorende code, tutorials, links naar andere sites, en dergelijke.

ishadeed.com/article/css-grid-minmax
Tutorial over minmax() bij grid.

ishadeed.com/article/learn-css-subgrid
Tutorial over subgrid. Met een aantal praktische voorbeelden.

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.

netspecialist.nl/html-en-css/531-css-grid
Korte tutorial over grid. Nederlandstalig.

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.

smashingmagazine.com/2020/01/understanding-css-grid-container
Uitgebreide meerdelige tutorial over grid. De link hierboven is het eerste deel.

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

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)

Gecomprimeerde CSS weer leesbaar maken, SCSS omzetten naar gewone CSS, en dergelijke zie Gereedschap → Code leesbaar maken.

Comprimeren, ongebruikte CSS verwijderen, en dergelijke zie Gereedschap → Snelheid testen, gzip, comprimeren (inclusief theorie).

Kleuren

(Onderafdeling van CSS)

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

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

blog.logrocket.com/exploring-css-color-module-level-5
Overzicht van nieuwe functies en dergelijke uit CSS Color Module Level 5. (Nog niet alles wordt al ondersteund door alle browsers.)

cloudfour.com/thinks/hsl-a-color-format-for-humans
Uitleg over hsl()-notatie en vergelijking daarvan met de hexadecimale notatie.

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.

ishadeed.com/article/css-color
Uitgebreid artikel over alle manieren om met css kleuren te definiëren, veranderen, en noem maar op.

maketintsandshades.com
Twee kleuren opgeven en codes voor de negen tussenliggende kleuren genereren.

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.

smashingmagazine.com/2021/07/hsl-colors-css
Tutorial over hsl(), met praktische voorbeelden.

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

(Onderafdeling van CSS)

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

Flexbox zie CSS → Flexbox.

Grid zie CSS → Grid.

Kolommen zie CSS → Kolommen (column-*).

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

Sectievormenden elementen zoals <section> en <nav> zie HTML → Outline, kopregels (<h...>) en sectievormende elementen (zoals <section> en <nav>).

Theorie over boxmodel, positioneren, en dergelijke is te vinden onder CSS → Positioneren, z-index, display, boxmodel, overflow, marges, containing block, width, height, aspect-ratio, object-fit, en dergelijke.

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.

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

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

Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke

(Onderafdeling van CSS)

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

adrianrosellil.com/2019-11/css-logical-properties
Uitleg over logical properties. Met handige 'vertaaltabel' tussen oude en nieuwe eigenschappen en waarden.

css-tricks.com/css-logical-properties-and-values
Uitgebreide tutorial over logical properties, met steeds overzichtelijk het verschil met de 'gewone' eigenschappen.

ishadeed.com/article/css-logical-properties
Tutorial over logical properties.

rtlstyling.com/posts/rtl-styling
Zeer uitgebreide tutorial over verschillende tekstrichtingen en de samenhang daarvan met tal van andere eigenschappen.

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

webdesign.tutsplus.com/courses/an-introduction-to-css-logical-properties
Cursus in de vorm van video's over logical properties (met ondertiteling).

Media Query's, Container Query's en Responsive Web Design

(Onderafdeling van CSS)

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.

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.

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

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

Achtergrond-afbeeldingen zie CSSBackground, background-image, image-set() en sprites.

CLS (Cumulative Layout Shift) zie Hulpmiddelen en theorie @font-face (inclusief CLS.

<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.

Gereedschappen om afbeeldingen te bewerken, converteren, enz. staan bij Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren. Hieronder staan alleen de links naar meer theoretische artikelen en dergelijke.

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

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

cloudfour.com/thinks/responsive-images-101-definitions
Zeer uitgebreide tutorial over responsieve afbeeldingen en alles wat daarmee te maken heeft. Inmiddels al wat ouder, maar vanwege de uitgebreidheid toch nog bruikbaar.
Er is ook een kortere, meer actuele, versie van bovenstaande tutorial.

codeinwp.com/blog/responsive-images
Tutorial hoe afbeeldingen responsief te maken.

compress-or-die.com/Understanding-PNG
Uitgebreide uitleg hoe een PNG is opgebouwd.

compress-or-die.com/Understanding-JPG
Uitgebreide uitleg hoe een JPG is opgebouwd.

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.

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

evilmartians.com/chronicles/decoding-avif-deep-dive-with-cats-and-imgproxy
Uiterst leesbare vergelijking tussen AVIF en andere formaten.

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.

imagekit.io/blog/how-to-resize-image-in-html
Overzicht van manieren (en nadelen) van het verkleinen van afbeeldingen bij de cliënt (in de browser).

imagekit.io/blog/lazy-loading-images-complete-guide
Uitgebreid artikel over de werking van 'lazy loading'.

imagekit.io/responsive-images
Uitgebreide tutorial over responsieve afbeeldingen.

jakearchibald.com/2020/avif-has-landed
Vergelijking tussen het nieuwe AVIF-formaat en andere formaten.

jakearchibald.com/2021/serving-sharp-images-to-high-density-screens
Uiterst leesbare uitleg hoe met relatief weinig moeite afbeeldingen scherp weer te geven op hogeresolutieschermen.

jakearchibald.com/2022/img-aspect-ratio
Artikel over het verschil tussen width, height en aspect-ratio bij afbeeldingen, en wanneer wat te gebruiken.

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

smashingmagazine.com/2021/04/humble-img-element-core-web-vitals
Overzicht van alle manieren om een afbeelding zo snel mogelijk in de juiste resolutie op de juiste grootte weer te geven.

smashingmagazine.com/2021/09/modern-image-formats-avif-webp
Uitgebreid artikel over het avif- en het WebP-formaat.

stackoverflow.blog/2022/03/28/picture-perfect-images-with-the-modern-element
Artikel over de invloed van afbeeldingen op snelheid en dataverbruik, met tips om dit te optimaliseren.

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).

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

Overig

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

Eenheden zie CSS → Eenheden, calc(), min(), en dergelijke.

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.

12daysofweb.dev/2021/container-queries
Tutorial over Container Query's.

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

css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions
Artikel over mogelijke problemen met de media query's pointer, any-pointer, hover en any-hover.

fluid-type-scale.com
Online code aanmaken voor lettergrootte die zich aanpast aan de breedte van het venster.

github.com/sturobson/Awesome-Container-Queries
Pagina met links naar van alles over Container Query's.

ishadeed.com/article/say-hello-to-css-container-queries
Tutorial over Container Query's.

maximeroudier.com/typeScaleClampGenerator
Online code genereren om met behulp van clamp() grootte van font aan te passen aan breedte van venster.

modern-fluid-typography.vercel.app
Online code aanmaken voor lettergrootte die zich aanpast aan de breedte van het venster.
De zeer uitgebreide theoretische onderbouwing van dit gereedschap, inclusief mogelijke problemen, is te vinden op smashingmagazine.com.

patrickhlauke.github.io/touch/pointer-hover-any-pointer-any-hover/results
Overzicht van waarden die verschillende browsers en systemen retrourneren bij de media query's pointer, any-pointer, hover en any-hover.

polypane.app/blog/the-complete-guide-to-css-media-queries
Zeer uitgebreide tutorial over media query's.

smashingmagazine.com/2021/05/complete-guide-css-container-queries
Tutorial over Container Query's.

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

utopia.fyi/type/calculator
Online lettergroottes uitproberen om vloeiend aan te passen aan de venstergrootte.
Bijbehorende css-generator.
Bijbehorende pagina met demo.
Bijbehorende theoretische onderbouwing.
Een vereenvoudigde vorm van deze calculator is te vinden op 9elements.com.

web.dev/learn/design
Interactieve cursus Responsive Web Design. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

webdesign.tutsplus.com/courses/introduction-to-css-container-queries
Cursus Container Query's in de vorm van video's (met ondertiteling).

Menu's, lijsten, counter en ::marker

(Onderafdeling van CSS)

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.

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

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

blog.logrocket.com/styling-numbered-lists-with-css-counters
Tutorial over het gebruik van counters bij lijsten.

css-tricks.com/list-markers-and-string-styles
Artikel over welke eigenschappen je wel en niet kunt gebruiken bij het opmaken met behulp van ::marker, inclusief bugs.

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

web.dev/css-marker-pseudo-element
Tutorial hoe ::marker te gebruiken voor aangepaste bullets. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

Nieuwsbrieven en dergelijke

(Onderafdeling van CSS)

Online uitproberen, code genereren, en dergelijke

(Onderafdeling van CSS)

Hieronder staat slechts een fractie van wat er op internet aan generators is te vinden. Geprobeerd is naar alleen kwalitatief goede generators te linken. Veel van deze generators zijn al (behoorlijk) wat ouder, daarom wordt vaak ook inmiddels overbodige code voor oudere browsers gegenereerd. Sommige maken zelfs nog code voor Internet Explorer 5 of eerder. Het is daarom aan te raden de code goed te bekijken en eventueel op te schonen, voordat je deze echt gaat gebruiken.
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.

Animatie maken waarbij alleen de afbeelding wordt bewerkt (zoals een bewegende GIF) zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren → Maken en bewerken.

Code voor een SVG-afbeelding maken (inclusief het vervormen van tekst en dergelijke) zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren.

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.

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

JavaScript zie JavaScript, DOM en CSSOM → Validators, debuggers, formatteren, online uitproberen, generators, en dergelijke.

Sprite maken zie Gereedschap → Sprite maken.

Als iets niet hier staat, kun je het ook bij Gereedschap proberen. Dat geldt met name voor het genereren van HTML met bijbehorende CSS, zoals het genereren van code voor een tabel.

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.

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.

Als je 'Alles tonen' uitvinkt, kun je kiezen, welke categoriëen je wilt zien.

Animatie maken waarbij alleen de afbeelding wordt bewerkt (zoals een bewegende GIF) zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren → Maken en bewerken.

Code voor een SVG-afbeelding maken (inclusief het vervormen van tekst en dergelijke) zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren.

Sprite maken zie Gereedschap → Sprite maken.

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

Algemene knoppen (geen <input> en dergelijke) maken zie Gereedschap → Knoppenmakers.

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

Kant-en-klare knoppen staan bij Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke.

In het ontwikkelgereedschap van Firefox is een bijzonder handige editor voor clip-path (en shape-outside) ingebouwd.

Hier staan alleen gereedschappen voor text-shadow (onder de knop 'Text-shadow'). Alle overige hulpmiddelen voor fonts en tekst (inclusief @font-face) staan bij CSS → Fonts, typografie, tekst, emoticons en lijnen.

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

10015.io/tools/css-loader-generator
Online kiezen uit meer dan 150 met behulp van transform bewegende laad-symbolen. De code kan online worden aangepast.

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

alialaa.github.io/css-grid-cheat-cheet
Online lay-out in grid maken en bijbehorende code genereren. Laat uiterst duidelijk het effect van elke verandering zien.

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.

apps.eky.hk/css-triangle-generator
Online code genereren voor driehoek met gebruik van alleen CSS.

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/border-radius-css-generator
Online code genereren voor vier (verschillende) ronde hoeken.

bestagencies.com/tools/box-shadow-css-generator
Online code voor box-shadow genereren.

bestagencies.com/tools/filter-effects-css-generator
Online één of een combinatie van filters uitproberen.

bestagencies.com/tools/multi-column-css-generator
Online tot twaalf kolommen maken en bijkomende code genereren. Met voorbeeld.

bestagencies.com/tools/transform-css-generator
Online de verschillende transform()-functies uitproberen en bijbehorende code genereren.

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

box-shadow.dev
Online groot aantal schaduwen en bijbehorende code genereren. Kleur, vorm, en dergelijke zijn voor elke schaduw afzonderlijk in te stellen, waarbij je gelijk heel duidelijk het effect ziet.

codepen.io/stoumann/full
Online code genereren voor clip-path. Je kunt volledig je eigen gang gaan of kiezen uit een groot aantal aan te passen voorgedefinieerde vormen.

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.

components.ai/gradient
Online veelkleurige achtergronden met bijbehorende code maken, opgebouwd uit een combinatie van een (groot) aantal gradiënten, die elk heel gedetailleerd kunnen worden ingesteld.

components.ai/text-shadow
Online tekst met meerdere schaduwen en bijbehorende code maken. Tekst en schaduwen kunnen zeer gedetailleerd ingesteld worden.

css3.mikeplate.com
Online element met tekst op alle mogelijke manieren aanpassen en bijbehorende code generen. Aan te passen zijn onder andere hoeken, schaduw, rotatie, tekst-eigenschappen, border, kleur en achtergrond. De veranderingen zijn dodelijk simpel aan te brengen. Omdat er één element (met daarin tekst) wordt veranderd, is dit echt een indrukwekkend stuk gereedschap. Je kunt werkelijk tot op de pixel precies eigenschappen op elkaar afstemmen.

css-generators.com/custom-borders
Online code voor speciaal soort border-image genereren: gekartelde randen, rondingen, en dergelijke die in de hoeken goed op elkaar aansluiten.
Het bijbehorende achtergrond-artikel staat op css-tricks.com.

css-grid-layout-generator.pw
Online (uitgebreide) 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.

cssdutone.com
Online weergave van eigen afbeelding aanpassen met filters en mix-blend-mode en bijbehorende code genereren.

cssfilters.co
Afbeelding uploaden en online één of een combinatie van 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 één of een combinatie van 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.

cssgradienteditor.com
Online gradiënt maken met bijbehorende code. Uiterst makkelijk te bedienen en je kunt heel ingewikkelde grdiënts maken.

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

cssportal.com/css-column-generator
Online tot tien kolommen maken en bijbehorende code genereren. Met voorbeeld.

cssportal.com/css-flexbox-generator
Online een flexbox lay-out maken en code genereren.

cssportal.com/css-gradient-generator
Online allerlei soorten gradiënts maken

cssportal.com/css3-flip-switch
Online <input type="checkbox"> met bijbehorende code maken, eruitziend als (aan te passen) aan-uitschakelaar.

cssportal.com/style-input-range
Online uiterlijk van <input type="range"> aanpassen en bijbehorende code maken.

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.

gra.dient.art
Allerlei soorten (ingewikkelde) gradiënts maken en code genereren met behulp van zeer handige knoppen en dergelijke.

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

grainy-gradients.vercel.app
Online code genereren voor een gradiënt met korrelige overgang.

html-css-js.com/css/generator/background
Online code voor background-image genereren.

ilyashubin.github.io/FilterBlend
Alle mogelijke combinaties van filters en background-blend-mode uitproberen op een (eigen) afbeelding en bijbehorende code genereren.

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

joshwcomeau.com/shadow-palette
Online code voor box-shadow genereren. De schaduw is opgebouwd uit een (groot) aantal sub-schaduwen, waardoor deze heel realistisch lijkt. Ook kunnen de richting van de lichtval en dergelijke worden aangepast.
De code voor deze schaduw is tamelijk ingewikkeld. In de bijbehorende tutorial wordt deze uitgelegd.

justcode.today/filters
Afbeelding uploaden en online één of een combinatie van filters uitproberen, waarbij het resultaat gelijk zichtbaar is, en bijbehorende CSS genereren.

keyframes.app/animate
Online animatie maken en code genereren. De animatie kan heel simpel op veel manieren worden aangepast.

layout.bradwoods.io
Een basis-grid kiezen en die met behulp van knoppen en dergelijke volledig aanpassen en de bijbehorende code genereren.. Werkt verbluffend overzichtelijk en eenvoudig.

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

learnui.design/tools/gradient-generator
Uitgebreide lineaire, radiale en conische gradiënt-generator met in te stellen interpolatie-methode, hoek, easing en precisie. Genereert naar keuze CSS of SVG.

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

maxbittker.github.io/broider
Online een afbeelding met bijbehorende code voor een border-image genereren. De afbeelding bestaat uit kleine blokjes. Het eindresultaat is een gestippelde border, waarbij de stippels zeer exact gepositioneerd kunnen worden in één of meer (on)regelmatige lijnen.

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.

neumorphism.io
Online box-shadow uitproberen en code genereren.

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

projects.verou.me/css3patterns
Achtergronden die volledig met CSS worden gemaakt. Je kunt online wijzigingen uitproberen.

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.

shadows.brumm.af
Online code genereren voor tot tien op elkaar aansluitende box-shadows. Met veel instelmogelijkheden.

stripesgenerator.com
Online gradiënt met in te stellen aantal strepen maken.

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

toptal.com/developers/css3maker
Voor hetzelfde element kunnen gecombineerd rgba(), gradiënt, border, box-shadow, backdrop filter, transform, @font-face, text-shadow, transition en animation worden aangepast, en wordt de bijbehorende code gegenereerd. Je ziet ook gelijk het effect van de verschillende eigenschappen op het element.

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

webcode.tools/generators/css/background-image
Online code voor background-image genereren.

webcode.tools/generators/css/border-image
Online code voor eenvoudige border-image genereren.

webcode.tools/generators/css/text-shadow
Online code voor text-shadow genereren.

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, tips, specificatie, en dergelijke

(Onderafdeling van CSS)

Algemene cursussen CSS zijn te vinden bij CSS → Cursussen CSS en/of HTML.

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

cssreference.io
Alfabetisch overzicht van eigenschappen met bij elke eigenschap (werkende) voorbeelden.

cssvalues.com
Bij alle css-eigenschappen snel de toegestane waarden en dergelijke, browser support en uitleg opzoeken.

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/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.

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

o7planning.org/11829/css
Duidelijke, uitgebreide tutorials over een aantal afzonderlijke eigenschappen, selectors, en dergelijke.

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

tutorialrepublic.com/references
Overzicht van eigenschappen met mogelijkheid om ze interactief uit te proberen.

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.

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.

Positioneren, z-index, display, boxmodel, overflow, marges, containing block, width, height, aspect-ratio, object-fit, en dergelijke

(Onderafdeling van CSS)

Logical properties (eigenschappen die rekening houden met de richting van de taal) en writing-mode zie CSSLogical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

Scrollbalk aanpassen zie CSS → Scrollbalk.

Scrollen en dergelijke zie CSS → Scrollen, scroll snap, overflow-behavior, en dergelijke.

Specifiek breedte, hoogte en aspect-ratio voor afbeeldingen zie CSS → Media Query's, Container Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-CSS-methoden zoals SVG, <picture> en <img>).

Specifiek flexbox zie CSS → Flexbox.

Specifiek grid zie CSS → Grid.

Specifiek vertical-align zie CSS → vertical-align.

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

blog.logrocket.com/understanding-min-content-max-content-fit-content-css
Tutorial over min-content, max-content en fit-content.

bram.us/2020/11/30/native-aspect-ratio-boxes-in-css-thanks-to-aspect-ratio
Ttorial over aspect-ratio (de eigenschap).

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

chenhuijing.com/blog/on-fixed-elements-and-backgrounds
Artikel over position: fixed; en waarom een fixed element soms toch nog scrolt.

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.

coder-coder.com/z-index-isnt-working
Artikel met vier veel voorkomende redenen waarom z-index soms niet werkt.

css-irl.info/aspect-ratio-is-great
Tutorial over aspect-ratio, ook in samenhang met eigenschappen als object-fit en align-items.

css-tricks.com/a-first-look-at-aspect-ratio
Tutorial over aspect-ratio.

css-tricks.com/creating-sliding-effects-using-sticky-positioning
Tutorial met voorbeelden over position: sticky;.

css-tricks.com/exploring-the-complexities-of-width-and-height-in-css
Zeer uitgebreide tutorial over alles wat met breedte en hoogte te maken heeft.

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

dev.to/huijing/understanding-positioning-in-css
Korte, duidelijke uitleg over de verschillende waarden bij position.

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.

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

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.

ishadeed.com/article/css-aspect-ratio
Tutorial over aspect-ratio.

ishadeed.com/article/learn-css-positioning
Artikel dat de verschillende manieren van positioneren bespreekt.

ishadeed.com/article/min-max-css
Tutorial over min-height, max-height, min-width en max-width. Met tal van voorbeelden.

ishadeed.com/article/overflow-css
Uitgebreide tutorial over overflow.

ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior
Tutorial over de eigenschap overscroll-behavior.

ishadeed.com/article/understanding/z-index
Uitgebreide tutorial over z-index.

joshwcomeau.com/css/rules-of-margin-collapse
Interactieve tutorial over margin collapsing.

joshwcomeau.com/css/stacking/contexts
Tutorial over stacking context.

marcus.io/blog/accessible-overflow
Artikel hoe je 'n element met overflow: auto; (dus mogelijk scrollbaar) toegankelijk kunt maken.

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. Al wat ouder, maar de spookachtige verschijnselen bestaan nog steeds.

quirksmode.org/blog/archives/2020/02/negative_margin
Uitleg over hoe negatieve marges werken.

quirksmode.org/blog/archives/2021/05/aspectratio
Artikel over aspect-ratio met oplossingen voor als dat (ogenschijnlijk) niet werkt en fallback voor oudere browsers.

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
Artikel 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.)

smashingmagazine.com/2019/12/browsers-containment-css-contain-property
Uitleg over de css-eigenschap contain.

smashingmagazine.com/2021/04/css-overflow-issues
Uitgebreid overzicht van mogelijke oorzaken van horizontale overflow, met bijbehorende oplossingen.

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

web.dev/learn/css/overflow
Tutorial over overflow en alles wat daarmij te maken heeft.

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.

sitepoint.com/css-printer-friendly-pages
Artikel met tips om met behulp van CSS een pagina printvriendelijk te maken.

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, compatibiliteits­weergave 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.

Schaduwen die met behulp van een filter worden gemaakt zie CSSCompositing, filters en blending.

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.

css-tricks.com/getting-deep-into-shadows
Theoretische achtergronden, praktische tips en voorbeelden met code van allerlei soorten schaduw.

joshwcomeau.com/css/designing-shadows
Artikel over de theorie achter het maken van goede schaduwen.

Scrollbalk

(Onderafdeling van CSS)

digitalocean.com/community/tutorials/css-scrollbars
Tutorial over het aanpassen van het uiterlijk van de scrollbalk.

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

ishadeed.com/article/custom-scrollbars-css
Tutorial over het aanpassen van het uiterlijk van de scrollbalk.

polypane.app/blog/strategies-for-dealing-with-horizontal-overflows
Artikel over het vinden (en verwijderen) van die vermaledijde niet-dood-te-krijgen horizontale scrollbalk.

Scrollen, scroll snap, overflow-behavior, en dergelijke

(Onderafdeling van CSS)

bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation
Artikel over manieren om soepeler te scrollen.

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

web.dev/css-scroll-snap
Uitgebreide tutorial over scroll snap.

ishadeed.com/article/css-scroll-snap
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 bij fixed footers en dergelijke het stuiter-effect bij scrollen te voorkomen.

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

Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke

(Onderafdeling van CSS)

apps.workflower.fi/vocabs/css/en
Lijst met namen van onderdelen van selectors. Als je op 'n onderdeel klikt, licht de naam op, en omgekeerd. Handig voor als je de Engelse naam niet weet.

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.)

blog.chromium.org/2020/09/giving-users-and-developers-more
Uitleg over de werking van pseudo-class :focus-visible.

blog.logrocket.com/deep-dive-css-where-function
Tutorial over :where().

bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer
Tutorial over @layer.

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

css.oddbird.net/layers/explainer
Uitgebreide tutorial over @layer.

css-speedrun.netlify.app
Online je kennis over selectors testen. Met hints en links naar tutorials.

css-tricks.com/css-cascade-layers
Uitgebreide tutorial over @layer.

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

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

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

dev.to/logrocket/deep-dive-into-the-css-where-function
Tutorial over :where(), met veel voorbeelden.

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

developer.chrome.com/blog/cascade-layers
Uitgebreide tutorial over @layer.

elad.medium.com/understanding-the-initial-inherit-and-unset-css-keywords
Uitleg over de sleutelwoorden inherit, initial, unset en revert.

flukeout/github.io
Interactieve tutorial over selectors.

hidde.blog/focus-visible-more-than-keyboard
Artikel over de werking van focus-visible.

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.

ishadeed.com/article/cascade-layers
Uitgebreide tutorial over @layer.

ishadeed.com/article/css-has-parent-selector
Uitgebreide tutorial met voorbeelden over :has() (de nieuwe 'parent-selector').

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

kittygiraudel.github.io/selectors-exlained
Selectors vertalen naar gewoon Engels.

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

matthiasott.com/notes/focus-visible-is-here
Tutorial over :focus-visible.

matthiasott.com/notes/css-has-a-parent-selector-now
Tutorial over :has() (met een leuke inleiding over de kommer en kwel die :has() eindelijk oplost).

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

moderncss.dev/guide-to-advanced-css-selectors
Uitgebreide tutorial over selectors. Met veel voorbeelden en links voor meer info.

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

polypane.app/css-specificity-calculator
Online specificiteit van selector berekenen.

polypane.app/blog/where-is-has-new-css-selectors-that-make-your-life-easier
Tutorial over :where(), :is() en :has().

quirksmode.org/blog/archives/2021/06/inherit_initial
Uitleg over het gebruik van en de verschillen tussen inherit, initial, unset en revert.

sitepoint.com/css-inheritance-introduction
Artikel over erfelijkheid 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 [].

smashingmagazine.com/2022/01/introduction-css-cascade-layers
Tutorial over @layer.

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.

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.

web.dev/css-is-and-where
Tutorial over :is() en :where().

Validators

(Onderafdeling van CSS)

csstree.github.io/docs/validator
Online CSS-validator.

jigsaw.w3.org/css-validator
Online W3C CSS-validator. Geeft vaak raadselachtige meldingen, maar is wel redelijk beknopt. Om overbodige foutmeldingen 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') en @property

(Onderafdeling van CSS)

blog.logrocket.com/how-to-use-css-variables-like-a-pro
Tutorial met voorbeelden over CSS-variabelen.

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

codersblock.com/blog/what-can-you-put-in-a-css-variable
Overzicht van wat er allemaal in een CSS-variabele kan worden gestopt.

css-tricks.com/a-complete-guide-to-custom-properties
Uitgebreide tutorial over custom properties.

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

ishadeed.com/article/css-vars
Tutorial met veel voorbeelden over CSS-variabelen.

matthiasott.com/notes/css-custom-properties-fail-without-fallback
Artikel over hoe te voorkomen dat (meer ingewikkelde) CSS-variabelen soms niet werken.

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

sitepoint.com/how-to-use-variables-in-css
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.

web.dev/at-property
Tutorial over @property.

vertical-align

(Onderafdeling van CSS)

Onder CSS → Positioneren, z-index, display, boxmodel, overflow, marges, containing block, width, height, aspect-ratio, object-fit, 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?

E-mail ontwerpen

caniemail.com
Overzicht van ondersteuning van HTML en CSS in - op het moment van schrijven - 32 e-mail-programma's.

github.com/hteumeuleu/email-bugs/issues
Overzicht van bugs in verschillende e-mail-programma's, met soms oplossingen.

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

paul-airy.medium.com/some-questions-on-accessibility-in-email-answered-7e231f375fd3
Onderzoek naar wat lezers van e-mail belangrijk vinden wat betreft toegankelijkheid.

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

smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools
Overzicht van hulpmiddelen, tutorials, en dergelijke om e-mails te ontwerpen. Met heel veel links.

webdesign.tutsplus.com/articles/build-an-html-email-temoplate-from-scratch
Gedetailleerde stap-voor-stap tutorial voor het ontwerpen van een e-mail.

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

Forums (gespecia­liseerde 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)

httpstatus.io
Redirects valideren op juiste werking.

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).

webfx.com/web-development/glossary/http-status-codes
Lijst met álle foutcodes. Als je op 'n code klikt, ga je naar een uitgebreide omschrijving. Vooral code 418 is uiterst interessant.

Gereedschap

Afbeelding maken, bewerken, converteren en optimaliseren

(Onderafdeling van Gereedschap)

Hieronder staan alleen de praktische gereedschappen voor het bewerken, converteren, en dergelijke van afbeeldingen. Meer theoretische onderwerpen zoals het verschil tussen de diverse formaten staan bij CSS → Media Query's, Container Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet CSS-methoden zoals SVG, <picture> en <img>.

Maken en bewerken

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

Animaties maken met behulp van CSS zie CSS → Online uitproberen, code genereren, en dergelijke.

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

Sprite maken zie Gereedschap → Sprite maken.

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.)
Nederlandstalig forum.

ditherit.com
Online eigen afbeelding omzetten in raster met desgewenst andere kleuren.

doodad.dev/dither-me-this
Online eigen afbeelding omzetten in grover of fijner raster. Opslaan als JPG of PNG.

drawsvg.org/drawsvg
Online SVG ontwerpen en bijbehorende code genereren.

duotones.co
Online foto omzetten naar twee te kiezen basiskleuren.

editor.method.ac
Online SVG ontwerpen en bijbehorende code genereren. Kan ook worden opgeslagen als PNG.

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

ezgif.com/avif-maker
Online animatie (avif) maken van eigen afbeeldingen of van video.

fffuel.co/llline
Online allerlei soorten lijnen ontwerpen en bijbehorende SVG genereren. Met veel instelmogelijkheden.

fffuel.co/pppointed
Online een pijl ontwerpen en de bijbehorende SVG genereren.

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

gif2avif.com
Online GIF converteren naar avif.

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.

github.com/SVG-Edit/svgedit
Online vector-editor. Omdat de links nogal vaak wisselen, moet je zelf even op deze pagina zoeken naar de link naar de online-versie. Opslaan als SVG, JPG, PNG of WebP.

glitchyimage.com
Online eigen afbeelding voorzien van in te stellen streep-patroon.

glyphdrawing.club
Online zeer gedetailleerde glyphe maken (kleinere of grotere afbeelding, op de pixel precies) in PNG- of SVG-formaat.

haikei.app
Online allerlei vormen, patronen en achtergrond-afbeeldingen met bijbehorende code maken in SVG-formaat. Met veel instelmogelijkheden.

iconify.pro
Online JPG of PNG veranderen in icoon. Desgewenst 178 verschillende resoluties en afmetingen mogelijk.

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

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.)

limus.netlify.app/app
Online afbeelding in allerlei mogelijke hoeken draaien.

loaders.holasvg.com
Online bewegende laad-symbolen maken en bijbehorende code (SVG met bijbehorende CSS) genereren.

msurguy.github.io/svg-cropper-tool
Online eigen SVG-afbeelding verkleinen en bijbehorende code genereren.

noisetexturegenerator.com
Online gestippelde achtergrond-afbeelding (tile) in PNG-formaat maken. Dichtheid en dergelijke kunnen worden ingesteld.

onlinegiftools.com
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met GIF's te doen.

onlineimagetools.com
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met afbeeldingen te doen.

onlinejpgtools.com
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met JPG's te doen.

onlinepngtools.com
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met PNG's te doen.

pattern.monster
Groot aantal aan te passen patronen met bijbehorende SVG-code. Ook te downloaden als PNG.

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

pavellaptev.github.io/warp-svg
Online tekst vervormen en bijbehorende SVG-code genereren.

photopea.com
Online afbeelding bewerken in GIMP-achtige editor met zeer uitgebreide mogelijkheden. Kan ook met PSD's overweg.

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

pixlr.com/nl/x
Online bitmap-afbeelding (JPG, GIF, PNG, en dergelijke) bewerken in GIMP-achtige editor met uitgebreide mogelijkheden. Nederlandstalig.

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

svgartista.net
Online eigen SVG animeren en bijbehorende code genereren.

svgeditor.publicdomainvectors.org/dist/editor
Online SVG-afbeelding met bijbehorende code ontwerpen. Ook op te slaan als PNG, JPG, bmp, WebP en pdf.

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

yqnn.github.io/svg-path-editor
Online path-editor voor SVG. Op een heel simpele manier is code voor de wildste paden te maken.

Overig

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

avif.io
Online privacy-vriendelijk afbeeldingen naar AVIF-formaat converteren.

compress-or-die.com
Afbeelding optimaliseren en/of converteren. JPG, PNG, GIF, WebP en SVG. Met veel instelmogelijkheden.

compressimage.io
Privacyvriendelijk JPG- en PNG-afbeeldingen comprimeren.

convert2svg.com
Online afbeelding converteren naar SVG. Met aantal filters en dergelijke.

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.

imagekit.io/website-analyzer
Online afbeeldingen binnen een pagina analyseren en tips voor een kleinere bestandsgrootte krijgen.

jakearchibald.github.io/svgomg
Online SVG optimaliseren.

jpeg.rocks
Online privacy-vriendelijk JPG optimaliseren.

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

omatsuri.app/svg-compressor
Online SVG comprimeren.

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 smashing­magazine.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.

shrink.media
Online PNG-, JPG- of WebP-afbeelding comprimeren en/of verkleinen. Uiterst simpel te bedienen.

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 AVIF, JPG, WebP en PNG. Ook zijn eenvoudige bewerkingen mogelijk.

tinypng.com
Online gelijktijdig tot twintig PNG-, JPG- en WebP-afbeeldingen optimaliseren. Converteert PNG-24 naar PNG-8.

tinywow.com/tools/image
Online een afbeelding converteren naar een ander formaat. Van en naar EPS, GIF, HEID, JPG, PNG, PDF, SVG, TIFF en WebP.

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.

Audio

(Onderafdeling van Gereedschap)

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

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
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, wordt op deze site al jaren gebruikt.

Code leesbaar maken

(Onderafdeling van Gereedschap)

a11y-tools/markup-de-crapulator
In elke browser kun je de code van een pagina bekijken. Maar dat levert vaak een volstrekt onleesbare brij op. Op deze site kun online je allerlei bijzaken weghalen, zodat je door de bomen het bos weer kunt zien.
Het bijbehorende artikel is te vinden op tpgi.com.

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

cleancss.com/html-beautify
Online ongeformatteerde of gecomprimeerde HTML netjes laten inspringen en dergelijke.

cleancss.com/javascript-beautify
Online ongeformatteerde of om andere redenen onleesbaar JavaScript netjes laten inspringen en dergelijke.

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

cleancss.com/sql-beautify
Online ongeformatteerde of om andere redenen onleesbare SQL netjes laten inspringen en dergelijke.

cssportal.com/less-to-css
Online LESS converteren naar gewone CSS.

cssportal.com/scss-to-css
Online SCSS converteren naar gewone CSS.

j-brooke.github.io/FracturedJson
Online JSON omzetten naar een voor mensen leesbaarder formaat.

jsonformatter.org/scss-to-css
Online SCSS converteren naar gewone CSS.

onlinejsontools.com/prettify-json
Online JSON formatteren.

pretty-print-json.js.org
Online ruwe JSON-code omzetten naar geformatteerde code.

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. Registratie noodzakelijk.
Op imaginarycloud.com staat een korte tutorial.

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 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 worden gebruikt.

jsfiddle.net
Online CSS, HTML en JavaScript uitproberen en eventueel delen met anderen.

jsitor.com
Online CSS, HTML en JavaScript uitproberen. Er kunnen ook bibliotheken worden gebruikt.

liveweave.com
Online CSS, HTML en JavaScript uitproberen. Er kunnen ook bibliotheken worden gebruikt.

rendera.org
Online CSS, HTML en JavaScript uitproberen. Met voorbeelden.

Commandline (terminal, NPM, Grunt, Gulp, en dergelijke)

(Onderafdeling van Gereedschap)

Browser support voor node.js en dergelijke zie CSS → Browser support.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

css-tricks.com/a-complete-beginners-guide-to-npm
Uitgebreide tutorial over NPM en Node.

joshwcomeau.com/javascript/terminal-for-js-devs
Inleiding voor websitebouwers in het gebruik van de terminal.

modernways.be/myap/it/school/course/De terminal voor ontwikkelaars
Vlaamstalige cursus werken in de terminal, waarbij ook het installeren van een server, MySQL, en dergelijke worden behandeld. (De cursus is voor een school, maar ook prima daarbuiten te volgen.)

sherpa.guide/paths/node
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om node.js te leren. Daarnaast veel links naar allerlei sites met cursussen, tutorials, 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:

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 gereedschap voor fonts zie CSS → Fonts, typografie, tekst, emoticons en lijnen.

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

Online hulpmiddelen voor selectors, specificiteit, en dergelijke staan bij CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke.

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

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

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

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.

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

Debuggen

(Onderafdeling van Gereedschap)

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

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

Mobiele systemen en browsers zie Mobiele apparatuur.

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.

Voor de hieronder staande browsers zijn (soms ongelooflijk veel) extensies beschikbaar, die kunnen helpen bij debuggen en testen. Als een browser iets niet kan, kijk dan even, of er een extensie beschikbaar is.

Algemeen

(Onderdeel van Gereedschap → Debuggen)

canidev.tools
Overzicht wat met het ingebouwwde ontikkelgereedschap van Google Chrome, Firefox, Safari en Edge wel (en niet) mogelijk is. Met (onder de vinkjes) hoe je het betreffende onderdeel kunt bereiken.

chenhuijing.com/blog/devtools-for-css-layouts-2021-edition
Overzicht van in browsers ingebouwde hulpmiddelen voor Flexbox en Grid.

smashingmagazine.com/2021/02/useful-chrome-firefox-devtools-tips-shortcuts
Artikel stampvol handige tips voor het gebruik van het ingebouwde ontwikkelgereedschap in Chrome, Edge, Firefox en Safari.

smashingmagazine.com/2021/10/guide-debugging-css
Artikel met veel praktische tips hoe CSS te debuggen.

Edge

(Onderdeel van Gereedschap → Debuggen)

blogs.windows.com/msedgedev/2021/09/14/edge-devtools-93-personalization
Tutorial over het aanpassen van het in Edge ingebouwde ontwikkelgereedschap.

docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/landing
Handleiding voor het in Edge ingebouwde ontwikkelgereedschap.

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.

designmodo.com/browser-developer-tools
Tutorial over het gebruik van het in Firefox ingebouwde ontwikkelgereedschap.

firefox-source-docs.mozilla.org/devtools-user
Heel uitgebreide uitleg over het in Firefox ingebouwde ontwikkelgereedschap.

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.

designmodo.com/browser-developer-tools
Tutorial over het gebruik van het in Google Chrome ingebouwde ontwikkelgereedschap.

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

Safari

(Onderafdeling van Gereedschap → Debuggen)

webkit.org/web-inspector
Handleiding voor Web Inspector.

Editors en IDE's

(Onderafdeling van Gereedschap)

wysiwyg-editors zie Gereedschap → wysiwyg-editor.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Tenzij anders vermeld, draaien onderstaande programma's in ieder geval op Linux, OS X en Windows. (Eventuele ondersteuning voor OpenBSD, FreeBSD, en dergelijke moet je zelf even opzoeken.)

Er bestaan nog veel meer (gratis en/of open source) editors en IDE's. Hieronder staan ook pagina's, waar een vollediger overzicht is te vinden.

Bij veel van deze programma's zijn (ongelooflijk veel) extensies te installeren. Als een programma iets niet kan doen, kijk dan even, of er een extensie beschikbaar is.

activestate.com/products/komodo-edit (Komodo Edit)
Open source editor voor 'n hele reeks talen, waaronder HTML, CSS, JavaScript en php. Naast Komodo Edit is er de (niet-gratis) uitgebreidere versie Komodo IDE.

atom.io
Open source editor voor onder andere HTML, CSS en JavaScript. Er is een Nederlands taalpakket, maar dat is (in oktober 2021) vijf jaar oud.
Dit project stopt per 15 december 2022.

bluefish.openoffice.nl
Open source editor voor 'n hele reeks talen, waaronder HTML, CSS en php. Site is Engelstalig, programma is ook Nederlandstalig.

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.
Visual Studio Code is gebaseerd op open source. Iedereen kan dat in principe zelf compileren. Visual Studio Code is wat Microsoft van deze open source maakt. Er zit bijvoorbeeld wat telemetrie in over gebruik en crashes. (Overigens zijn ze hier heel open over.) Het open source deel is te vinden op github.com/microsoft/vscode.
Een compilatie zonder de door Microsoft toegevoegde telemetrie en dergelijke is te vinden op github.com/VSCodium. Hier zitten wel wat nadelen aan, zoals dat extensies mogelijk niet gebruikt kunnen of mogen worden.
Een uitgebreider verhaal over de verschillen tussen beide versies is te vinden op ruky.me.

eclipse.org
Open source framework voor het ontwikkelen in zo'n beetje elk denkbare taal.

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

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

neovim.io
Op Vim gebaseerde editor met veel uitbreidings­mogelijkheden.

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, testen, en dergelijke

(Onderafdeling van Gereedschap)

Vanuit veiligheids­overwegingen verbergen inmiddels (vrijwel) alle browsers standaard favicons in de adresbalk.

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

evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
Tutorial hoe met zes bestanden toch overal een favicon te tonen.

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

favicon.io
Online favicon maken gebaseerd op eigen ontwerp, tekst, afbeelding of emoticon.

icon.kitchen
Online een icon uitkiezen en aanpassen en daar vervolgens een volledige set favicons van maken.

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.

realfavicongenerator.net/favicon_checker
Controleren of een favicon in alle browsers op alle systemen goed wordt getoond.

tools.dynamicdrive.com/favicon
Online favicon maken van eigen afbeelding (onderaan de pagina). Alleen ico-formaat.

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

Fonts

(Onderafdeling van Gereedschap)

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.

app.diagrams.net
Online diagram maken. Keuze uit heel veel soorten. Kan worden opgeslagen als afbeelding, SVG, enzovoort.

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:

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.

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

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

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

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

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

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

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.

simonhearne.com/2022/caching-header-best-practices
Uitgebreide tutorial over het gebruik van headers voor cache-controle.

whichbrowser.net
Online browser-identificatie-string bekijken.

Imagemap maken

(Onderafdeling van Gereedschap)

maschek.hu/imgemap/imgmap
Online imagemap maken.

Kleuren

(Onderafdeling van Gereedschap)

Hieronder staan vooral hulpmiddelen voor het uitzoeken van één of meer kleuren of volledige kleurpaletten.

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

codepen.io/robdimarzo/full
Online hexadecimale kleur uitkiezen door middel van uiterst simpel te bedienen kleurencirkel.

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.

components.ai/color-scale
Online heel gedetailleerd in te stellen kleurenpalet met bijbehorende code maken.

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().

planetcalc.com
Online complementaire hexadecimale kleur vinden.

projects.verou.me/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. Notatie in hex, hsl() en rgb().

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 kleurenwaarden uitproberen in hsla() en gelijk vertalen naar rgba() en hex.

toolness.github.io/accessible-color-matrix
Online wordt van een kleurenpalet met zes aan te passen kleuren van elke combinatie gelijk de toegankelijkheid (voldoende contrast) gegeven.

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)

Kant-en-klare knoppen staan bij Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke.

Knoppen voor formulieren maken (zoals <input>) zie CSS → Online uitproberen, code genereren, en dergelijke. Hier staan alleen gereedschappen voor algemene knoppen.

bestcssbuttongenerator.com
Online een knop ontwerpen en bijbehorende code genereren. Veel mogelijkheden.

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

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

sciweavers.org/12style
Online CSS-knoppenmaker. Het basispatroon kan op heel veel manieren worden aangepast.

Label maken

(Onderafdeling van Gereedschap)

acme.com/labelmaker
Online label, zoals dat uit een lettertang komt, maken. Levert een afbeelding in GIF-formaat.

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)

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 PNG-afbeelding.

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

Lorem Ipsum (opvultekst) maken

(Onderafdeling van Gereedschap)

Tenzij anders vermeld, leveren deze generators alleen gewone tekst, zonder HTML-tags en dergelijke. Het kunnen wel meerdere paragrafen of zo met tekst zijn, maar de HTML moet je zelf nog aanbrengen.

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. Deze generator kan meerdere paragrafen maken, inclusief de benodigde <HTML>, maar je krijgt dan wel de HTML voor een complete pagina, inclusief <head> en dergelijke. De lengte van de paragrafen is niet in te stellen.

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.

tinywow.com/other/lorem-ipsum-generator
Online Lorem Ipsum-tekst genereren. Als je voor paragrafen (<p>'s) kiest. wordt ook de benodige HTML gegenereerd. Aantal paragrafen is in te stellen, de lengte van de paragrafen niet.

webfx.com/web-design/html-ipsum
Online Lorem Ipsum-tekst maken. Tekst kan desgewenst gelijk binnen een element zoals <ol>, <dl>, <p>,enzovoort geplaatst worden, maar gelijktijdig meer dan één element maken is niet mogelijk.

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.

PDF bewerken

(Onderafdeling van Gereedschap)

tinywow.com/tools/pdf
Hele serie gereedschappen om online PDF bewerken, converteren, samen te voegen, afbeeldingen te extraheren, en dergelijke.

Reguliere expressies ('Regular Expressions')

(Onderafdeling van Gereedschap)

extendsclass.com/regex-tester
Online reguliere expressie uitproberen. Met (beknopte) uitleg. Naar keuze JavaScript, Python, Ruby, Java, PHP of MySQL-stijl.

github.com/aloisdg/awesome-regex
Pagina met veel links naar van alles over reguliere expressies, zoals cursussen, oefeningen, testers, enzovoort.

github.com/ziishaned/learn-regex
Interactieve tutorial.

ihateregex.io
Aantal veel gebruikte reguliere expressies, die kunnen worden aangepast en getest. Met duidelijke grafische uitleg.
Zelf uitproberen op playground

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

learnbyexample.github.io/learn_js_regexp
Online lesboek met veel voorbeelden en oefeningen.
Er is ook een op Python gericht lesboek.

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

qntm.org/re_en
Tutorial met oefenopgaven die gelijk nagekeken worden.

refrf.dev
Cursus reguliere expressies, gebaseerd op voorbeelden.

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 hoeveelheid kant-en-klaar te gebruiken reguliere expressies.

regexone.com
Interactieve cursus reguliere expressies.

regexpal.com
Online reguliere expressies testen.

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

regexr.com
Door de reguliere expressie te veranderen, zie je wat er wordt gevonden in een uitgebreide voorbeeldtekst. Met uitgebreide uitleg.

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

sherpa.guide/paths/regex
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om reguliere expressies te leren. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

wanago.io/courses/regex-course
Cursus reguliere expressies.

webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute
Tutorial over valideren met behulp van het pattern-attribuut.

Server installeren

(Onderafdeling van Gereedschap)

Eigen server installeren zie PHP → Overig.

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)

Als je CSS, HTML, JavaScript, en dergelijke comprimeert, moet je het resultaat grondig testen. Een compressor wil nog wel eens ál te enthousiast te werk gaan, waardoor fouten ontstaan.

345tool.com/minifier/html-minifier
Online HTML comprimeren.

345tool.com/minifier/javascript-minifier
Online JavaScript comprimeren.

3perf.com/talks/web-perf-101
Uitgebreid overzicht van manieren om de snelheid van 'n site te verbeteren.

ahrefs.com/blog/advanced-pagespeed-guide
Uitgebreid artikel bomvol tips hoe de site sneller te maken.

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 iets hieronder staande site webpagetest.org kun je zo'n waterfall chart laten maken.)

cssportal.com/css-optimize
Online CSS comprimeren. Met veel instelmogelijkheden.

cssshrink.com
Online CSS comprimeren.

dotcom-tools.com/website-speed-test
Online snelheid van site testen vanaf 24 plaatsen op de wereld, waarbij gekozen kan worden uit vijf verschillende browsers. Van elke plaats is onder andere een waterfall beschikbaar.

giftofspeed.com/gzip-test
Online testen of gzip aanstaat en hoeveel bytes je daarmee bespaart.

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.

internetmarketingninjas/tools/tools/pagespeed
Online snelheid pagina testen. Met uitleg hoe eventuele problemen op te lossen.

kangax.github.io/html-minifier
Online HTML comprimeren.

lighthouse-metrics.com
Online testen op een hele serie onderdelen, waaronder snelheid en toegankelijkheid.

medium.com/@fox/talk-the-state-of-the-web
Overzichtsartikel van dingen die met de weergavesnelheid te maken hebben. Met tips voor mogelijke verbeteringen.

misterpixel.nl/blog/core-web-vitals-wat-zijn-het-en-hoe-verbeter-je-ze
Nederlandstalige korte, duidelijke uitleg van Core Web Vitals.

pagespeed.web.dev
Online testen hoe snel de pagina laadt en dergelijke. Met suggesties voor oplossingen. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.
Uitleg over de belangrijkste begrippen is te vinden op smashingmagazine.com.

perf.rocks/tools
Pagina met zeer groot aantal links naar van alles wat met snelheid te maken heeft.

purifycss.online
Online op de geteste pagina ongebruikte CSS verwijderen en desgewenst de resterende CSS comprimeren.
Dit lijkt allemaal heel mooi, maar als een stylesheet voor meerdere pagina's wordt gebruikt, kun je niet zomaar CSS verwijderen, alleen maar omdat die op de geteste pagina niet wordt gebruikt. Je kunt in deze tester echter de gewijzigde CSS vergelijken met de originele, waardoor dit risico veel kleiner wordt. (In de meeste testers kan dat niet, waardoor de kans heel groot is dat je onterecht CSS verwijdert.)

refresh-sf.com
Online JavaScript, CSS en HTML comprimeren.

smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist
Zeer uitgebreid overzicht van technieken om 'n site sneller te maken. Met heel veel links naar meer info.

speedvitals.com
Online snelheid van pagina testen. Met tips om die te verbeteren.
calibreapp.com/core-web-vitals: uitleg wat Core Web Vitals zijn.

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.

toptal.com/developers/cssminifier
Online CSS comprimeren.

toptal.com/developers/javascript-minifier
Online JavaScript comprimeren.

udacity.com/course/website-performance-optimization
Online cursus website optimaliseren. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

web.dev/measure
Test online op snelheid, toegankelijkheid, geschiktheid voor zoekmachines, en dergelijke. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.
Uitgebreide uitleg over deze tester.

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. Als je in het testresultaat op de icoontjes klikt, krijg je tips voor verbeteringen.
Uitleg op moz.com: Algemeen, Specifiek voor waterfall.
Een andere uitgebreide uitleg over de waterfall is te vinden op nooshu.com.

websiteoptimization.com/services/analyze
Online testen hoe snel de verschillende onderdelen van 'n pagina laden.

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.

cssportal.com/css-sprite-generator
Afbeeldingen uploaden en sprite plus bijbehorende code aanmaken.

responsive-css.spritegen.com
Afbeeldingen uploaden en responsieve sprite plus bijbehorende code aanmaken.

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)

divtable.com/table-styler
Online HTML-tabel maken met bijbehorende CSS. Met heel veel opmaakmogelijkheden.

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)

invisible-island.net/lynx
Website van Lynx met onder andere downloads voor 32-bits Windows. Nieuwere (mogelijk wat instabiele) versies van Lynx zijn te vinden op invisible-mirror.net. (In Linux zal Lynx meestal in de repositories aanwezig zijn.)

links.twibright.com
Links. Deze browser lijkt wat actiever onderhouden te worden dan de hierboven genoemde Lynx.

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)

Validators

(Onderafdeling van Gereedschap)

Validators staan bij de taal, waarvoor ze zijn bedoeld.

Vector-editor

(Onderafdeling van Gereedschap)

Verschillen tussen twee teksten vinden

(Onderafdeling van Gereedschap)

diffchecker.com/diff
Online verschillen tussen twee teksten vinden.

Video

(Onderafdeling van Gereedschap)

Video's converteren en bewerken, code genereren voor <video>, bijschriften maken, enzovoort zie HTML → <embed>, <object>, <video>, <audio>, <iframe>.

Weergave en dergelijke testen

(Onderafdeling van Gereedschap)

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.

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.

asisness.com/asisness/tools/screensize
Online het uiterlijk van de pagina bekijken in een aantal vooringestelde resoluties.

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.

mattkersley.com/responsive
Online het uiterlijk van een pagina gelijktijdig in meerdere resoluties testen, die naast en onder elkaar op het scherm worden gezet.

responsively.app
Te downloaden programma om gelijktijdig in verschillende resoluties te testen.

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)

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 (in het verleden) 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.

Editors en IDE's zie Gereedschap → Editors en IDE's.

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

Redirects op juistheid controleren zie Foutcodes (statuscodes).

css-tricks.com/snippets/htaccess
Hele serie voorbeelden voor van alles en nog wat in .htaccess.

homepage-maken.nl/htaccess
Cursus .htaccess. Nederlandstalig.

htaccesscheck.com
.htaccess-validator.

htaccesseditor.com
Online .htaccess-bestand aanmaken met redirects, 404-pagina, enzovoort.

htaccessredirect.net
Online .htaccess-bestand aanmaken met mogelijkheid voor veel details.

htmlbasix.com/generator/disable-hotlinking-generator
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.

ipaddressguide.com
Gereedschappen voor ip-adressen, zoals het omzetten van een reeks ip-adressen naar CIDR-notatie.

onetomarket.nl/kennishub/growth/301-redirect-tutorial
Uitgebreid artikel over redirecten met behulp van de 301-code. Nederlandstalig.

shop.alterlinks.com/htaccess/validator
.htaccess-validator.

websonic.nl/tutorials/websitehtaccess
Hele serie handleidingen, waaronder bestanden en/of mappen beveiligen met een wachtwoord. Nederlandstalig.

HTML

Browser support

(Onderafdeling van HTML)

Bugs en hacks

(Onderafdeling van HTML)

<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.

udacity.com/course/html5-canvas
Online cursus canvas. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

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.)

Lijsten met karakters en/of opzoeken van entiteit, utf-8-code, codepoint, en dergelijke

(Onderafdeling van HTML → Charsets, unicode, entiteiten)

aymkdn.github.io/characters
Online utf-8-code voor HTML (&#....;) en CSS (content: "\....";) opzoeken voor grote hoeveelheid pijlen, valuta, emoticons, vormen, wiskundige symbolen, getallen, interpunctie en symbolen.

cryptii.com/pipes/unicode-lookup
In één keer alle unicode codepoints voor een stuk tekst opzoeken.

css-voorbeelden.nl/artikelen/lijsten/artikelen-063
Lijsten met utf-8-codes en HTML-entiteiten. Nederlandstalig.

emojipedia.org
Overzicht van alle emoticons uit Unicode. Met zoekmogelijkheid op onder andere trefwoord, categorie, besturingssysteem en versie. Geeft voorbeelden van de weergave op de verschillende besturingssystemen, codepoints, en dergelijke.

en.wikipedia.org/wiki/List_of_Unicode_characters
In westerse landen meest gebruikte unicode-karakters op één pagina, opgedeeld in blokken. Met links naar andere blokken met andere karakters.

html-css-js.com/html/character-codes
Online entiteit en numerieke code opzoeken voor grote hoeveelheid letters, symbolen, valuta, emoticons, en dergelijke.

kirillbelyaev.com/s
Codes voor alle mogelijke soorten spaties en andere witruimtes.

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

unicode.org/charts/ (The Unicode Consortium)
Alle unicode-karakters, opgedeeld in blokken. Elk blok is te downloaden als pdf.

unilist.raphaelbastide.com
Overzichtelijke lijst met grote hoeveelheid makkelijk te kopiëren emoticons, getallen, pijlen, symbolen, en dergelijke.

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.

iana.org/assignments/character-sets
Zeer uitgebreid overzicht en beschrijving van charsets, waaronder de meest dolzinnige uit de tijd dat charsets elkaar de tent uitvochten en je vaak algebra zag, als je probeerde 'n Windows-bestand op 'n Mac te lezen. En omgekeerd. Aanbevolen voor de liefhebbers van 'Vroeger was alles beter'.

onlineunicodetools.com
Grote verzameling gereedschap om unicode te converteren, te bewerken, codepoints op te zoeken, enzovoort.

onlineutf8tools.com
Grote verzameling gereedschap om utf-8 te converteren, te bewerken, codepoints op te zoeken, enzovoort.

r12a.github.io/app-conversion
Online van en naar hele reeks formaten (hex, unicode, enzovoort) converteren.

reedbeta.com/blog/programmers-intro-to-unicode
Artikel over de opbouw van unicode.

smashingmagazine.com/2012/06/all-about-unicode-utf8-character-sets
Uitgebreide uitleg over unicode, tekensets, en dergelijke.

Code bekijken

(Onderafdeling van HTML)

In elke browser kun je de HTML van een pagina bekijken, maar die is vaak gecomprimeerd of om andere redenen volstrekt onleesbaar. Hulpmiddelen om de HTML leesbaar te maken, vind je bij Gereedschap → Code leesbaar maken.

Cursusen

(Onderafdeling van HTML)

Omdat HTML en CSS in toenemende mate in samenhang worden behandeld, staan alle algemene cursussen HTML en/of CSS bij elkaar bij CSS → Cursussen CSS en/of HTML.

Cursussen en dergelijke specifiek voor het optimaliseren van een website zijn te vinden bij Gereedschap → Snelheid testen, gzip, comprimeren (inclusief theorie).

Cursussen en dergelijke specifiek voor Responsive Web Design, responsieve afbeeldingen, en dergelijke staan bij CSS → Media Query's, Container Query's en Responsive Web Design.

Cursussen en dergelijke specifiek voor toegankelijkheid zijn te vinden bij Toegankelijkheid → Artikelen, tutorials, en dergelijke.

Specificaties voor HTML en overzichten met (alle) HTML-elementen, -attributen, en dergelijke zijn te vinden bij HTML → Overzicht elementen, attributen, tips, specificatie, en dergelijke. (Soms is de uitleg bij een element en dergelijke uit zo'n overzicht zo uitgebreid dat het ook een soort cursus is.)

data-attribuut (data-*)

(Onderafdeling van HTML)

css-tricks.com/a-complete-guide-to-data-attributes
Tutorial met voorbeelden.

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)

css-tricks.com/exploring-what-the-details-and-summary-elements-can-do
Allerlei niet direct voor de hand liggende voorbeelden van wat mogelijk is met <details> en <summary>.

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> en inert-attribuut

(Onderafdeling van HTML)

Het inert-attribuut is hier ondergebracht, omdat dit vaak samen met <dialog> gebruikt zal worden.

css-tricks.com/focus-management-and-inert
Tutorial over het inert-attribuut.

css-tricks.com/some-hands-on-with-the-html-dialog-element
Korte tutorial met mogelijkheden van <dialog>.

stefanjudis.com/blog/a-look-at-the-dialog-elements-super-powers
Uitgebreide tutorial over <dialog>.

viget.com/articles/the-dialog-element
Korte beschrijving van het <dialog>-element.

web.dev/building-a-dialog-component
Uitgebreide tutorial over <dialog>.

webkit.org/blog/12209/introducing-the-dialog-element
Tutorial over het <dialog>-element, aangestuurd door JavaScript.

webkit.org/blog/12578/non-interactive-elements-with-the-inert-attribute
Tutorial over het inert-attribuut.

Dingen mogelijk maken die (nog) niet werken

(Onderafdeling van HTML)

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 en bewerken

(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.)
Op evanhahn.git.io kun je in gewone mensentaal (helaas alleen voor video) aangeven wat je wilt. De site zet dit dan om in de wiskundige formule voor cum laude-studenten die ffmpeg nodig heeft.

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.

tinywow.com/tools/video
Online video naar WebP of GIF converteren en gereedschap voor simpele bewerkingen als verkleinen en extraheren van geluid.

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>)

accessibilityoz.com/2020/03/the-importance-of-captioning
Artikel over het belang van (een juist gebruik van) bijschriften bij video's.

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>.

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, Container Query's en Responsive Web Design.

css-voorbeelden.nl/afbeelding/video/afbeelding-080
Video zonder plug-in in (bijna) elke browser 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, testen, en dergelijke.

<figure> en <figcaption>

(Onderafdeling van HTML)

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)

(Code voor) kant-en-klare knoppen en dergelijke zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke.

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, :disabled, :enabled, en dergelijke.

24a11y.com/2019/select-your-poison
Artikel over toegankelijkheid van <select> en de verschillen daarvan tussen verschillende besturingssystemen.
Deel 2.

adamsilver.io/blog/form-design-from-zero-to-hero-all-in-one-blog-post
Tips om op te letten voor toegankelijke formulieren. Met bij elke tip links naar artikelen die dieper op de tip ingaan.

adrianroselli.com/2022/07/use-legend-and-fieldset
Artikel over het nut van <fieldset> en ≤legend> voor toegankelijkheid, en hoe bepaalde problemen daarbij op te lossen.

austingil.com/how-to-build-html-forms-right-semantics
Zeer uitgebreide tutorial over het maken van (toegankelijke) formulieren.

bighack.org/how-to-design-accessible-web-forms
Tutorial over het maken van toegankelijke formulieren.

buttoncheatsheet.com
Tips hoe je een toegankeljke knop kunt maken.

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

css-tricks.com/better-form-inputs-for-better-mobile-user-experiences
Tutorial hoe input-types correct te gebruiken op mobiele apparaten.

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/html-inputs-and-labels-a-love-story
Artikel over het belang van (een juist gebruik van ) <label> voor toegankelijkheid.

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.

deque.com/blog/accessible-forms-the-problem-with-placeholders
Artikel over problemen met het placeholder-attribuut en mogelijke oplossingen daarvoor.

gerireid.com/forms
Uitgebreide tutorial over (de verschillende onderdelen van) een formulier. Met heel veel links voor meer informatie.

inputtypes.com
Online kijken welke invoer bij welk soort velden en dergelijke geldig is. De mogelijkheden zijn wel heel beperkt.

nativeformelements.com
Online zien hoe alle form-elementen er in de browser, waarmee je deze pagina bezoekt, uitzien.

ovl.design/text/inclusive-inputs
Handleiding hoe <input>'s toegankelijk te maken.

smashingmagazine.com/2019/01/html5-input-types
Artikel over de ondersteuning van diverse types <input> in browsers.

tpgi.com/labeling-the-point-scenarios-of-label-misuse-in-wcag
Voorbeelden van (vaak gemaakte) fouten bij <label> die toegankelijkheid verminderen.

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.

web.dev/learn/forms
Interactieve cursus formulieren maken. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

webcode.tools/generators/html
Online code voor allerlei onderdelen van formulieren en dergelijke maken, waarbij gelijk het resultaat wordt getoond.

xd.adobe.com/ideas/principles/web-design/best-practices-form-design
Uitgebreid artikel met tips om goede formulieren te maken.

Forums

(Onderafdeling van HTML)

<head>

(Onderafdeling van HTML)

3perf.com/blog/link-rels
Uitgebreide uitleg over preload, prefetch, preconnect, dns-prefetch, prerender en modulepreload.

htmlhead.dev
Uitgebreid overzicht van alles wat in <head> kan worden geplaatst. (En dat is veel...) Met veel links naar meer uitleg en dergelijke.

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, prerender.

<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)

Landcodes (lang="...") en internationalisatie

(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).

rtlstyling.com/posts/rtl-styling
Uitgebreide tutorial waarin systematisch wordt uitgelegd, waar je op moet letten, als je je site geschikt wilt maken voor talen die van rechts naar links lopen.

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. De pagina wordt niet goed bijgehouden, maar er staan allicht nog nuttige links op.

w3schools.com/ref_language_codes
Alfabetische lijst met tweeletterige ISO 639-1 landcodes.

Lijsten (<dl>, <li>, <ol> en <ul>)

(Onderafdeling van HTML)

benmyers.dev/blog/on-the-dl
Artikel over de voordelen van <dl> wat betreft toegankelijkheid. Met voorbeelden.

tutorialspoint.com/html/html_lists
Uitgebreide tutorial over <ul>, <ol>, <dl> en de bijbehorende elementen en attributen..

Links

(Onderafdeling van HTML)

dev.to/elisabethleonhardt/a-down-to-earth-explication-of-the-noopener-noreferrer-attributes
Heldere uitleg over de attributen noopener en noreferrer in een link.

<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)

html.spec.whatwg.org/#microdata
Rechtstreekse link naar het hoofdstuk microdata in de HTML-specificatie.

html5doctor.com/microdata
Zeer uitgebreide uitleg over microdata.

linter.structured-data.org
Online validator voor 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/test/rich-results
Validator voor bepaalde extra gegevens voor Google's zoekmachine, zoals data en te kopen producten.

validator.schema.org
Validator voor schema.org.

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)

Nieuwsbrieven en dergelijke

(Onderafdeling van HTML)

Online wijzigingen uitproberen

(Onderafdeling van HTML)

Alle (grotere) browsers hebben ingebouwde ontwikkel­gereedschappen, 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.

Het uitproberen van en code genereren voor CSS, bijvoorbeeld om een knop in een formulier op te maken, staat bij CSS → Online uitproberen, code genereren, en dergelijke.

w3schools.com/html/html_examples
HTML-voorbeelden online uitproberen.

Outline, kopregels (<h...>) en sectievormende elementen (zoals <section> en <nav>)

(Onderafdeling van HTML)

Het hele HTML5-outline-verhaal is inmiddels (gelukkig) verleden tijd. Geen enkele browser heeft het ooit ook maar enigszins geÍmplementeerd, en inmiddels is het ook uit de specificatie verdwenen. Dus gewoon één <h1> voor de belangrijkste kop, <h2>'s voor iets minder belangrijke koppen, enzovoort.

a11yproject.com/posts/how-to-accessible-heading-structure
Artikel over het belang van een juist gebruik van <h>'s voor toegankelijkheid.

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.

html5doctor.com/downloads/h5d-sectioning-flowchart
Uit te printen flowchart van nieuwere semantische elementen als <nav>, <section>, enzovoort.

scottohara.me/blog/2021/07/16/section
Artikel over het juiste gebruik van <section>.

smashingmagazine.com/2022/07/article-section-elements-accessibility
Heel uitgebreide tutorial wanneer <article> en wanneer <section> te gebruiken. Met veel links naar meer info.

webdesign.tutsplus.com/articles/the-importance-of-heading-levels-for-assistive-technology
Artikel over het belang voor toegankelijkheid van (een juist gebruik) van <h>'s.

Overzicht elementen, attributen, tips, specificatie, en dergelijke

(Onderafdeling van HTML)

Algemene cursussen HTML zijn te vinden bij CSS → Cursussen CSS en/of HTML.

apps.workflower.fi/vocabs/html/en
Lijst met namen van onderdelen van html. Als je op 'n onderdeel klikt, licht de naam op, en omgekeerd. Handig voor als je de Engelse naam niet weet.

books.theinternetacademy.nl/webtechniek
Nederlandstalige zeer uitgebreide uitleg van de belangrijkste begrippen, opbouw van een pagina, en dergelijke. Ook te downloaden als pdf en ePub.

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

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
Overzicht van alle HTML-elementen met bij elk element link naar uitgebreide uitleg.

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
'Living Standard' HTML. Dit is de laatste versie van HTML, die voortdurend wordt bijgewerkt.

htmlreference.io
Alfabetisch overzicht van elementen met bij elk element een voorbeeld.

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.

tutorialrepublic.com/references
Overzicht van elementen met mogelijkheid om ze interactief uit te proberen.

w3schools.com/tags
HTML-referentie met overzicht van tags, attributen, en dergelijke. Met uitgebreide uitleg bij elke ingang.

<picture>

(Onderafdeling van HTML)

<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)

Afbeeldingen optimaliseren zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren.

Algemene tests op snelheid, tips, theorie, cache-control, en dergelijke zie Gereedschap → Snelheid testen, gzip, comprimeren (inclusief theorie).

Invloed van animaties, zoals transform en transition, zie CSSAnimation, transform, transition en Motion Path.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

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

Webfonts downloaden versnellen zie CSS → Fonts, typografie, tekst, emoticons en lijnen.

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, Container 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.

w3.org/WAI/tutorials/tables
Voorbeelden van verschillende soorten toegankelijke tabellen.

webaim.org/techniques/tables/data
Tutorial over het maken van een toegankelijke tabel.

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).

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.
Je kunt deze validator installeren of online gebruiken op htmlhint-playground.

jsonschemavalidator.net
Web manifest validator.

manifesttester.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>, en de bijbehorende pseudo-classes en -elementen)

(Onderafdeling van HTML)

abeautifulsite.net/posts/a-web-components-primer
Uiterst duidelijke uitleg over Web Components en Shadow DOM.

adamsilver.io/blog/the-problem-with-web-components
Kritisch artikel over de huidige staat van Web Components.

bitsofco.de/what-is-the-shadow-dom
Uitleg over wat Shadow DOM is, met enkele voorbeelden.

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.

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).

css-tricks.com/web-component-pseudo-classes-and-pseudo-elements
Tutorial over ::part, ::slotted, :defined, :host, en:host-context.

dev.to/thepassle/web-components-from-zero-to-hero
Uitgebreide tutorial over Web Components en alles daaromheen.

genericcomponents.netlify.app
Kleine sortering toegankelijke web components die je kunt gebruiken zonder dat half github aan frameworks nodig is.

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.

lea.verou.me/2020/09/the-failed-promise-of-web-components
Kritisch artikel over de huidige staat van Web Components.

thenewobjective.com/web-development/a-criticism-of-web-components
Kritisch artikel over de huidige staat van Web Components.

JavaScript, DOM en CSSOM

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.

Browser support en referenties zie CSS → Browser support.

JSON zie JSON.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

node.js zie Commandline (terminal, NPM, Grunt, Gulp, en dergelijke).

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)

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.

egghead.io/courses/your-ultimate-guide-to-understanding-dom-events
Zeer uitgebreide curus in videovorm over events. Met ondertiteling.

itnext.io/using-the-dom-like-a-pro
Overzicht van veel gebruikte methoden voor DOM-manipulatie, zoals toevoegen, wijzigen en verwijderen van elementen.

Forums

(Onderafdeling van JavaScript, DOM en CSSOM)

Scripts, bibliotheken, frameworks en API's

(Onderafdeling van JavaScript, DOM en CSSOM)

Scripts, frameworks, en dergelijke speciaal voor mobiele apparatuur staan bij Mobiele apparatuur → Frameworks.

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 en dergelijke speciaal voor één soort element, eigenschap, en dergelijke (zoals voor canvas of fonts) kunnen ook bij dat onderwerp staan.

Afzonderlijke bibliotheken en frameworks staan hier niet meer, alleen nog pagina's met overzichten daarvan en dergelijke. Een konijnenfokker zou jaloers zijn op het voortplantingstempo van deze dingen: het is gewoon simpelweg niet bij te houden. Laat staan dat een enigszins fatsoenlijke controle op de kwaliteit van deze geboortegolf mogelijk is.

apislist.com
Overzicht van publieke API's. (Variërend van fantastische sympathieke non-profit projecten tot de meest griezelige datadieven, dus wel even kritisch bekijken voor je iets op je site zet.)

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/HyphenopolyJ
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.

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.

microjs.com
Gigantisch aantal gespecialiseerde kleine bibliotheken.

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.

Tutorials, voorbeelden

(Onderafdeling van JavaScript, DOM en CSSOM)

JavaScript of CSS gebruiken voor animaties staat bij CSSAnimation, transform, transition en Motion Path.

Shadow DOM zie Web Components (Custom elements, Shadow DOM, <template> en <slot>, en de bijbehorende pseudo-classes en -elementen).

Specifiek voor API's en dergelijke voor HTML5 zie bij HTML.

Tutorials en dergelijke voor specifiek DOM en events zie JavaScript, DOM en CSSOM.

code.tutsplus.com/courses/javascript-fundamentals
Basiscursus JavaScript in de vorm van video's (met ondertiteling).

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.

educba.com/software-development/software-development-tutorials/javascript-tutorial
Cursus JavaScript.

eloquentjavascript.net
Uitgebreid online lesboek over JavaScript. Met oefeningen (en oplossingen).

exploringjs.com/impatient-js
Online boek over JavaScript, inclusief ECMAScript 2022.
Op exploringjs.com/deep-js staat het vervolg voor gevorderden.
Van beide boeken kan ook een betaalde, iets uitgebreidere, versie worden besteld.

freecodecamp.org/learn
Interactieve cursus CSS, HTML en JavaScript.

freecodecamp.org/news/the-complete-javascript-handbook
Korte cursus 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.

geeksforgeeks.org/javascript
Korte interactieve handleidingen, gesorteerd op onderwerp. (Voor het interactieve deel moet je je wel registreren.)

github.com/leonardomso/33-js-concepts
Enorme lijst met links naar artikelen, tutorials, enzovoort, ingedeeld naar onderwerp.

htmldom.dev
Kant-en-klare stukjes code voor veel voorkomende bewerkingen.

javascript.info
Waanzinnig goede, zeer uitgebreide en duidelijke tutorial in de vorm van een boek. Overzichtelijk ingedeeld in hoofdstukken. Met opgaven (en oplossingen). En een uitstekende zoekfunctie.

kirupa.com/html5/learn_javascript
Uiterst duidelijke online cursus JavaScript.

michael-karen.medium.com/learning-modern-javascript-with-tetris
Cursus JavaScript in de vorm van het maken van het spelletje Tetris. (Mogelijk mis je hierdoor wel wat dingen, maar het is wel heel erg leuk. En je kunt later altijd een wat schoolsere cursus volgen.)

o7planning.org/12171/ecmascript-javascript
Duidelijke, uitgebreide tutorials over allerlei onderdelen van JavaScript.

sherpa.guide/paths/javascript
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om JavaScript. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

tutorialrepublic.com/javascript-tutorial
Interactieve cursus JavaScript.

udacity.com/courses/all
Aantal kwalitatief goede cursussen, waaronder een aantal gratis. Bovenaan de pagina kun je zoeken op onderwerp, prijs, en dergelijke. Je moet je wel registreren.

udemy.com/course/javascript-essentials
Basiscursus JavaScript in videovorm. Met automatische ondertiteling. De cursus is gratis, maar je moet je wel registreren.
Een iets dieper gaande vervolgcursus: udemy.com/course/advanced-and-object-oriented-javascript.

v8.dev/blog/cost-of-javascript-2019
Uitgebreid artikel over de vertragende werking van JavaScript en hoe dat zoveel mogelijk te voorkomen.

w3schools.com/js
Interactieve JavaScript-tutorial en overzicht van de taal.

wesbos.com/javascript
Uitgebreide online cursus.

Validators, debuggers, formatteren, online uitproberen, generators, en dergelijke

(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.

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

Onleesbaar (bijvoorbeeld gecomprimeerd) JavaScript leesbaar maken zie Gereedschap → Code leesbaar maken.

Reguliere expressies uitproberen zie Gereedschap → Reguliere rexpressies ('Regular Expressions').

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.

omatsuri.app/events-keycode
Online code generen voor eventlistener keydown. Geeft ook de codes voor event.key, event.code, en event.which.

toptal.com/developers/keycode/for/alt
Online waardes vinden bij het indrukken van een toets voor event.key, event.location, event.which en event.code.

w3schools.com/js/ (JavaScript Examples)
Online wijzigingen in JavaScript uitproberen.

JSON

Online code formatteren en leesbaarder maken zie Gereedschap → Code leesbaar maken.

345tool.com/minifier/json-minifier
Online JSON comprimeren.

developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON
Tutorial met interactieve voorbeelden.

freeformatter.com/json-validator
Online JSON-validator.

jsoneditoronline.org
Online editor en validator voor JSON.

jsonformatter.curiousconcept.com
JSON-validator.

onlinejsontools.com
Hele reeks online hulpmiddelen voor JSON, onder andere bewerken en converteren.

planetcalc.com
Online CSV-tabel omzetten naar JSON.

planetcalc.com
Online HTML-tabel omzetten naar JSON.

tutorialspoint.com/json
Tutorial over JSON.

w3schools.com/js/js_json_intro
Interactieve 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.

blog.iusmentis.com
Blog van ICT-jurist Arnoud Engelfriet, met elke dag een nieuw onderwerp met reacties. Nederlandstalig en uiterst leesbaar geschreven.

ictrecht.nl/juridisch-advies/documenten
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.)

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.

netkwesties.nl/1464/actie-tegen-overdreven-fotoclaims
Nederlandstalig artikel met veel links over (wat te doen tegen) claims voor het gebruik van foto's.

tldrlegal.com
Overzicht van software-licenties (volledige tekst en een korte samenvatting).

Mailinglists

laposta.nl
Nieuwsbrieven versturen. Nederlandstalig. De gratis versie gaat tot maximaal 2.000 contacten en maximaal 12.000 nieuwsbrieven per maand.

listmonk.app
Privacyvriendelijke open source software voor mailinglists en nieuwsbrieven.

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

github.com/decalage2/awesome-security-hardening
Enorme lijst met links naar tutorials, gidsen, en dergelijke over alle denkbare beveiligingsonderwerpen.

hcaptcha.com
Privacy-vriendelijk alternatief voor reCaptcha.

nearcyan.com/you-probably-dont-need-recaptcha
Artikel dat helpt besluiten of je reCaptcha wel nodig hebt. Als dat zo is, komt het met een overzicht van meer pricavy-vriendelijke alternatieven (reCaptcha is een dataverzamelaar voor Google, zie bijvoorbeeld Google's new reCaptcha has a dark side).

phpcaptcha.org
Open source spionagevrije captcha.

projecthoneypot.org
Project gericht op de bestrijding van spammers. Iedereen kan eraan deelnemen. Er kan gezocht worden op 'foute' IP-adressen.

stopforumspam.com
Grote database met forumspammers. Er kan op IP-adress worden gezocht.

web.dev/hacked
Stap-voor-stap-handleiding hoe een gehackte site op te schonen.

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.

w3.org/TR/mathml-core
Ontwerp-specificatie MathML.

Milieu

Hieronder wordt groen vaak geschreven als 'groen'. Dat is omdat er enorm veel wordt gerotzooid met de term 'groen'. Dat zal bij hosters en dergelijke niet anders zijn dan bij Shell. En de enige écht groene site is geen site. Vandaar.

aremythirdpartiesgreen.com
Online kijken of externe bronnen van een site ('third parties') 'groen' worden gehost.

blog.webpagetest.org/posts/website-performance-and-the-planet
Aritkel met tips om een site zo weinig mogelijk energie te laten verbruiken.

digitalbeacon.co
Online meten hoeveel (een in te stellen aantal bezoekers) van een pagina bijdraagt aan de koolstofuitstoot. Met tips om dit te verbeteren.

smashingmagazine.com/2021/09/reducing-carbon-emissions-on-web
Artikel over de invloed van websites op de CO2-uitstoot, met tips om die te verminderen.

smashingmagazine.com/2022/02/reducing-web-carbon-footprint-optimizing-social-media-embeds
Artikel over de invloed van 'sociale' (brrrr, als er iets anti-sociaal blijkt te zijn...) media, video's, en dergelijke op de koolstofuitstoot. Met tips om die te verminderen.

thegreenwebfoundation.org/directory
Lijst met 'groene' hosters.

thoughtbot.com/blog/so-you-wanna-create-an-eco-friendly-website
Tips om een site zo milieuvriendelijk mogelijk te maken.

websitecarbon.com
Online meten hoeveel een pagina bijdraagt aan de koolstofuitstoot.

Mobiele apparatuur

Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen

(Onderafdeling van Mobiele apparatuur)

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...

Alleen de resolutie testen zie Gereedschap → Weergave en dergelijke testen.

Algemeen

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

github.com/liriliri/eruda
Script om broncode te kunnen zien. Werkt in alle browsers op alle systemen. Meest handige: kan de volledige 'computed style' laten zien.
Een demo is te zien op eruda.liriliri.io.

neatnik.net/view-source
Broncode van opgegeven URL tonen.

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 (het niet gratis) wurfl.sourceforge.net.

Android

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

developer.android.com/studio
Android SDK.

developer.chrome.com/docs/devtools/remote-debugging
Handleiding om Android-toestellen remote te debuggen via een USB-verbinding.

/e/

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

e.foundation
Startpagina van /e/: een versie van Android zonder alles wat Google er in stopt.

Firefox for Android

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

firefox-source-docs.mozilla.org/devtools-user/remote_debugging
Links naar artikelen en dergelijke om Firefox op Android remote te debuggen op de desktop.

HarmonyOS

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

harmonyos.com/en/develop
Ingangspagina voor ontwikkelaars op HarmonyOS.

iOS en iPadOS

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

Dit superieure besturingssysteem met z'n superieure prijs verdient ook superieure aandacht in een tekst met een superieure lengte. Bij deze.

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.

Goed, voor de doorzetter:

Je kunt bij Apple XCode downloaden, en daarin kun je allerlei versies van iOS en iPadOS simuleren. XCode kan alleen op OS X worden geïnstalleerd. Maar lees vooral even de aanvulling hieronder, voordat je hier luchthartig aan begint.

Aanvulling (alleen te lezen door masochisten die het staatsexamen Gevorderd Masochist met succes hebben afgelegd): je kunt, als je OS X hebt, XCode downloaden. Daarin kun je vervolgens simulators voor tal van versies van iOS en iPadOS installeren, waarin je 'n site kunt testen. Dit ontwikkelgereedschap is werkelijk met stip het grootste stuk bagger op het gebied van ontwikkelprogramma's dat ik in meer dan 35 jaar heb gezien. Maar goed, uiteindelijk werkt het, en je kunt heerlijk koffiedrinken, uitgebreid poepen en ook nog de krant lezen tijdens het opstarten van deze ellendepukkel. En dat niet gelijktijdig, maar lekker rustig achter elkaar.

In Big Sur is dit martelwerktuig kennelijk verbeterd, waardoor je gewoon helemaal geen simulators meer kunt installeren. Alleen testen op de laatste versies van iOS, tvOS en watchOS kan nog. In theorie kun je nog simulators voor andere versies downloaden, maar dat duurt zo'n vijf uur. Per simulator. Helaas valt tijdens het downloaden na een aantal uren de verbinding weg en kun je opnieuw beginnen (en dat ligt dus niet aan deze kant van de verbinding). Wie weet, de machine staat gewoon aan, misschien is er volgende week wel één van de simulators volledig gedownload...

Het regent hier klachten over op internet (zoek even op 'xcode simulator download failed' of zoiets). Uiteraard reageert Apple nergens op een klacht, want dat doen ze gewoon nooit. Stel je voor, communiceren met het plebs. Brrr. Voorlopig blijft hier dus het stuk ellende op Mojave gebruikt worden. Dat werkt in ieder geval, met de kanttekening dat een wedstrijd hardlopen door slakken opwindender is.

Zo, dat lucht op, na weer ruim drie uur downloaden en de melding dat de verbinding is verbroken...

Aanvulling twee: na zo'n zeventig uur (!) van mislukte downloads zijn de drie simulators eindelijk gedownload en geïnstalleerd op Big Sur. Het gaat dus om 'n download die normaal genomen ongeveer één minuut duurt...

Aanvulling drie (na enkele weken): eerlijk is eerlijk, als het installeren eindelijk is gelukt, werkt het verder prima.

Had je gedacht dus. Bij een nieuwe versie van iOS of iPadOS moet je namelijk ook een nieuwe simulator installeren. En dat duurt dus weer zo'n vijf uur, met tig mislukkingen. Apple is een weerzinwekkend onsympathiek bedrijf dat alleen in geld is geïnteresseerd (net als andere internetgiganten trouwens). Maar wat kan het financiële voordeel zijn van het frustreren van mensen die de moeite nemen op jouw apparaten te testen? Want dit is natuurlijk geen toeval: alleen het downloaden van simulators heeft dit probleem.

Dat blijft dus onbekend, want Apple heeft op geen enkele van de vele honderden klachten hierover ooit gereageerd.

KaiOS

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

developer.kaiostech.com
Ingangspagina voor ontwikkelaars op KaiOS.

paul.kinlan.me/debugging-web-pages-on-the-nokia-8110-with-kaios
Korte uitleg hoe een website op KaiOS te debuggen op een gewone desktopcomputer .

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)

docs.sailfishos.org
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)

mobile-frameworks-comparison-chart.com
Online een framework zoeken aan de hand van allerlei criteria.

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, Container 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/Web/HTML/Viewport_meta_tag
Uitleg hoe de viewport-tag wordt gebruikt om de lay-out aan te passen aan mobiele browsers.

mobiforge.com
Site met handleidingen, artikelen, enzovoort.

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 (de verschillen tussen) dpi, ppi, CSS-pixels, device-pixels, en dergelijke.

Validators, browser sniffing, en dergelijke

(Onderafdeling van Mobiele apparatuur)

Theoretische artikelen, zoals uitleg over een waterfall, online tests met praktische tips voor verbeteringen, testen van de snelheid van de pagina, 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.

whatismybrowser.com/detect/what-is-my-user-agent
Geeft de User Agent String van de gebruikte browser weer. Met desgewenst gedetailleerde analyse.

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. Omdat (vrijwel) alle nieuwsbrieven soms ook over onderwerpen buiten hun eigen specialisme schrijven, is ook een indeling in categorieën niet echt goed mogelijk.

a11yproject.com/newsletter
The A11Y Project: wekelijkse nieuwsbrief met links naar artikelen over toegankelijkheid en dergelijke.

a11yweekly.com
A11yWeekly: wekelijkse nieuwsbrief over toegankelijkheid.

asthon.codes/subscribe-to-frequent11y
day11y, week11y, fortnight11y, month11y: naar wens dagelijkse, wekelijkse, tweewekelijkse of maandelijkse nieuwsbrief over toegankelijkheid.

babbage.com/nieuwsbrief-socials
Babbage: maandelijkse nieuwsbrief over toegankelijkheid. Van een commercieel bedrijf, maar er staan allerlei algemene ontwikkelingen in, en het bedrijf maakt bovendien een uiterst sympathieke indruk.

bitsoffreedom.nl/volg-ons
Tweewekelijkse nieuwsbrief van Bits of Freedom over (de volledige sloop van) privacy en dergelijke. Nederlandstalig.

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.

bytes.dev
Bytes: wekelijkse nieuwsbrief over JavaScript.

css-weekly.com
CSS Weekly: wekelijkse nieuwsbrief over CSS.

csslayout.news
CSS Layout News: wekelijkse nieuwsbrief over lay-out en CSS.

dailydevlinks.com
dailydevlinks newsletter: wekelijkse nieuwsbrief met links naar van alles over het maken van sites.

edri.org/take-action/edri-gram
EDRi-gram: tweewekelijkse nieuwsbrief van European Digital Rights, een overkoepelende Europese organisatie voor privacy en dergelijke.

equalentry.com/newsletter
Equal Entry: maandelijkse nieuwsbrief over toegankelijkheid.

esnextnews.com
ES.Next News: wekelijkse nieuwsbrief met links naar artikelen over JavaScript.

freedom.nl/over-freedom/nieuws
Nieuwsbrief: onregelmatig verschijnende nieuwsbrief van internetprovider Freedom. In deze nieuwsbrief staan ook regelmatig artikelen over privacy en dergelijke, vandaar de opname hier.

frontendfoc.us
Frontend Focus: wekelijkse nieuwsbrief over HTML5, CSS, WebGL, en dergelijke.

heydesigner.com/newsletter
HeyDesigner: wekelijkse nieuwsbrief over van alles wat met het maken van sites te maken heeft.

javascriptkicks.com
JSK Weekly: wekelijkse nieuwsbrief over JavaScript

javascriptweekly.com
JavaScript Weekly: wekelijkse nieuwsbrief over JavaScript.

learnbyexample.gumroad.com/p/learnbyexample-weekly-sample-issue
learnbyexample weekly: wekelijkse nieuwsbrief over allerlei dingen die met programmeren te maken hebben.

js.libhunt.com/newsletter
Awesome JavaScript Newsletter: wekelijkse nieuwsbrief over JavaScript.

jster.net
JSter: tweewekelijkse nieuwsbrief over JavaScript.

netkwesties.nl/abonneren
Netkwesties: onregelmatig verschijnende Nederlandstalige nieuwsbrief over van alles met betrekking tot internet.

nodeweekly.com
Node Weekly: wekelijkse nieuwsbrief over Node.js.

perf.email
Performance Newsletter: tweewekelijkse nieuwsbrief over optimaliseren, snelheid, en dergelijke.

perlweekly.com
Perl Weekly: wekelijkse nieuwsbrief over Perl.

php.libhunt.com/newsletter
Awesome PHP Newsletter: wekelijkse nieuwsbrief over PHP.

phpweekly.com
PHP Weekly News: wekelijkse nieuwsbrief over PHP.

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.

smashingmagazine.com/the-smashing-newsletter/
Smashing Newsletter: tweewekelijkse nieuwsbrief met voornamelijk (links naar) artikelen over CSS, HTML, en dergelijke..

t12t.se/accessibility-newsletter
The Accessibility Newsletter: onregelmatig verschijnende nieuwsbrief over toegankelijkheid.

themarkup.org/newsletter
Hello World en Klaxon: twee nieuwsbrieven over internet en daarmee samenhangende zaken, vooral over privacy, trackers, en dergelijke. Op de Verenigde Staten gericht, maar vaak ook interessant voor de rest van de wereld.

twitter.us18.list-manage.com
~this week in security~: wekelijkse nieuwsbrief over beveiliging, datalekken, en dergelijke.

tympanus.net/codrops/collective
Collective: overzicht van interessante artikelen met betrekking tot internet, het maken van sites, (nieuwe) fonts, (nieuwe) lay-outs, enzovoort.

vscode.email
vscode.email: wekelijkse nieuwsbrief over IDE's, met de nadruk op Visual Studio Code.

w3.org/News/Public
Weekly newsletter: wekelijkse nieuwsbrief van w3c, de organisatie die de standaarden voor CSS, HTML, enzovoort beheert.

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.

webtoolsweekly.com
Web Tools Weekly: wekelijkse nieuwsbrief met de nadruk op handige hulpmiddelen voor het maken van sites.

weekly.cssanimation.rocks
CSS Animation Weekly: wekelijkse nieuwsbrief over alles wat met CSS-animaties te maken heeft.

Perl

cpan.org/ (Comprehensive Perl Archive Network)
Scripts en modules.

educba.com/software-development/software-development-tutorials/perl-tutorial
Cursus perl.

geeksforgeeks.org/perl-programming-language
Interactieve cursus Perl. (Voor het interactieve deel moet je je wel registreren.)

guru99.com/perl-tutorial
Cursus Perl voor beginners.

learn-perl.org
Interactieve cursus Perl.

perl.org
De grote Perl site.

perl-tutorial.org
Links naar tutorials over Perl.

perlmaven.com/perl-tutorial
Zeer uitgebreide tutorial.

perlmonks.org
Community rondom Perl met onder andere veel handleidingen.

riju.codes/perl

Simpele editor om online snel even iets uit te proberen.

PHP

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.

riju.codes/php
Simpele editor om online snel even iets uit te proberen.

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)

code.tutsplus.com/courses/php-fundamentals
Cursus PHP in de vorm van video's.

css-voorbeelden.nl/tekst/invoegen/tekst-052
Tekst invoegen met behulp van PHP. Nederlandstalig.

devdocs.io
Uitgebreide overzichten van elementen, attributen, enzovoort. Met browser support, ook voor mobiele browsers, voorbeelden, links naar meer info, enzovoort.

educba.com/software-development/software-development-tutorials/php-tutorial
Cursus PHP.

geeksforgeeks.org/php-tutorials
Interactieve cursus PHP. (Voor het interactieve deel moet je je wel registreren.)

guru99.com/php-tutorials
Cursus PHP voor beginners.

https://modernways.be/myap/it/school/course/Programmeren 4
Vlaamstalige cursus PHP. (De cursus is voor een school, maar ook prima daarbuiten te volgen.)

php.net
Officiële site van PHP met veel documentatie.

phpboek.net
Nederlandstalig uiterst leesbaar boek over PHP. Feitelijk een cursusboek.

phphulp.nl/php/tutorials
Tutorials. Nederlandstalig.

phptherightway.com
Site met tutorials, links naar tools, enzovoort, waarbij geprobeerd wordt verouderde informatie te vermijden.

tutorialrepublic.com/php-tutorial
Interactieve cursus PHP.

tutorialspoint.com/php
Uitgebreide tutorial.

w3schools.com/php/default
Interactieve PHP-tutorial en overzicht van de taal.

Privacy, loskomen van datadieven, en dergelijke

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Privacy specifiek rondom het gebruik van elders gehoste fonts (zoals Google fonts) zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Webfonts (om te downloaden).

Privacyvriendelijke captcha-systemen zie Malware, spam, beveiliging, en dergelijke.

Privacyvriendelijke statistieken zie Statistieken, browsergebruik, besturingssysteem, bezoekersteller, 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!

chromium.woolyss.com/f/HTML-Google-Tag-Manager-the-new-anti-adblock-weapon
Artikel over hoe Google Tag Manager misbruikt kan worden om mensen te volgen.

contrachrome.com/comic/page01
Uitstekende strip over wat Google allemaal aan informatie over je verzamelt. En niet alleen via hun browser.

coveryourtracks.eff.org
Laat zien hoe je computer (vrijwel) uniek is te identificeren alleen aan de hand van gegevens die je browser doorstuurt.

dasprive.be
Vlaamstalige pagina over privacy, met onder andere overzicht van privacyvriendelijke programma's en dergelijke. (Als die programma's en dergelijke binnen een categorie op deze pagina met links vallen, staan die ook hier op deze pagina.)

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.
pdf met tips om ethisch verantwoorde sites te bouwen (pdf). Met alternatieven voor veel gebruikte spionage-software.

edri.org/our-work/floc-googles-new-means-of-following-you-across-the-web
Uitleg over wat FLoC (Google's nieuwste poging je te volgen) is, en waarom dat je privacy schendt. (Door de storm van kritiek heeft Google inmiddels van deze specifieke vorm van privaschending afgezien.)

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.

kylepiira.com/2020/01/09/why-i-quit-google
Artikel over het risico van alles via één bedrijf regelen. Inclusief hele reeks alternatieven.

lucble.com/randomprojects/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. (Inmiddels verstuurt je browser nog veel meer gegevens, maar het blijft 'n aardig overzicht.)

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.

privacy.net/analyzer
Online testen of je browser je privacy (enigszins) beschermt.

removephodata.com
Exif-gegevens verwijderen van foto's en dergelijke.

themarkup.org/blacklight
Online kijken of een site trackers, Third-party cookies, en dergelijke gebruikt.

themarkup.org/citizen-browser/2021/09/21/facebook-rools-out-news-feed-change-that-blocks-watchdogs-from-gathering-data
Dit artikel hoort hier eigenlijk niet, maar deze truc van Facebook om onderzoek te bemoeilijken ten koste van toegankelijkheid is van zo'n uitzonderlijk smerig niveau dat er 'n uitzondering voor wordt gemaakt.

tosdr.org/en/frontpage (Terms of Service; Didn't Read)
Beoordeling door gebruikers van Algemene voorwaarden van veel (grote) sites, softwarebedrijven, enzovoort, waaronder Facebook, Google, Apple en Microsoft.

violating-gdpr.com
Online (oppervlakkig) controleren of een site de AVG schendt.

vpngids.nl/privacy/social-media/wat-weet-instagram-over-mij
Goed overzicht van wat Instagram allemaal over je opslaat. (Op deze site staan trouwens met regelmaat zeer goede artikelen over privacy.)

Python

codecademy.com/learn/learn-python
Interactieve cursussen Python. De cursus is gratis, maar je moet je wel registreren.

educba.com/software-development/software-development-tutorials/python-tutorial
Cursus Python.

freecodecamp.org/learn
Interactieve cursus Python.

geeksforgeeks.org/python-programming-language
Interactieve cursus Python. (Voor het interactieve deel moet je je wel registreren.)

github.com/pamoroso/free-python-books
Lijst met gratis boeken over Python.

guru99.com/python-tutorials
Cursus Python voor beginners.

jobtensor.com/Tutorial/Python/en/Introduction
Interactieve online cursus Python.

pymbook.readthedocs.io/en/latest
Online boek met cursus Python.

python-course.eu/python-tutorial
Cursus python.

python.org
Officiële python website. Veel handleidingen en dergelijke.
Complete cursus.

pythonspot.com
Cursus Python.

tutorialspoint.com/python
Cursus Python.

udacity.com/course/introduction-to-python
Online cursus python. De cursus is gratis, maar je moet je wel registreren.

w3schools.com/python
Interactieve Python-tutorial en overzicht van de taal.

SQL, NoSQL, databases, en dergelijke

geeksforgeeks.org/sql-tutorial
Cursus SQL.

guru99.com/sql
Cursus SQL voor beginners.

learnsqlonline.org
Interactieve cursus SQL.

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 is veranderd in een melkkoe die nooit meer het weiland in mag.

phphulp.nl/php/forum/databases-en-sql
Nederlandstalig forum over databes en SQL.

postgresql.org/docs/current/tutorial
Officiële handleiding voor PostgresSQL.

selectstarsql.com
Interactieve cursus SQL. Als lesmateriaal wordt de doodstraf in Texas in de Verenigde Staten gebruikt. Hopelijk ben je na deze cursus ook tegenstander van de doodstraf.

sqlbolt.com
Interactieve cursus SQL.

sqlite.org
Centrale site van SQLite.

tutorialrepublic.com/sql-tutorial
Interactieve cursus SQL.

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-referentie en interactieve tutorial.

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-087
Menu invoegen met behulp van SSI. Nederlandstalig.

homepage-maken.nl/ssi/overssi
SSI-cursus. Nederlandstalig.

Statistieken, browsergebruik, besturings­systeem, bezoekersteller, 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 simpele gratis bezoekerstellers, omdat er geen simpele betrouwbare tellers bekend zijn. De tellers die hier ooit stonden, bleken vroeger of later toch ellende op te leveren, zoals pop-ups met links naar malware. 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.

Tenzij er na opname hier dingen zijn veranderd, is alle hieronder staande statistieken-software privacy-vriendelijk en gratis, of met minstens een gratis versie. De meeste zijn open source en kunnen op een eigen server worden geïnstalleerd, een enkele kan (ook) via internet worden gebruikt. Wie nu nog durft te beweren dat er geen alternatieven zijn voor Google Analytics, mag z'n mond met zand en zeep gaan spoelen.

awstats.org
Open source software voor privacy-vriendelijke statistieken.

blog.iusmentis.com/2022/02/02/ik-zou-maar-vast-een-alternatief-voor-google-analytics-gaan-zoeken-als-ik-jou-was
Nederlandstalig artikel over de mogelijke juridische gevolgen van het gebruik van Google Analytics.

books.theinternetacademy.nl/handboek-matomo
Nederlandstalige handleiding voor het iets hieronder staande Matomo. Ook te downloaden als pdf en ePub.

clicky.com/marketshare
Statistieken over browser, besturingssysteem, en dergelijke (voor internet in het algemeen).

counter.dev
Open source software voor privacy-vriendelijke statistieken.

developer.apple.com/support/app-store
Overzicht van gebruikte versies van iOS en iPadOS (in de kolom rechts).

en.wikipedia.org/wiki
Oude en (min of meer) actuele statistieken over browsers uit 'n hele serie bronnen.

github.com/electerious/Ackee
Open source software voor privacy-vriendelijke statistieken.

github.com/milesmcc/shynet
Open source software voor privacy-vriendelijke statistieken.

goatcounter.com
Open source software voor privacy-vriendelijke statistieken.

gs.statcounter.com
Statistieken over resolutie, browser, besturingssysteem, en dergelijke (voor internet in het algemeen).
Omdat deze moeilijk is te vinden rechtstreekse link naar overzicht van gebruikte versies van Android.

jouwstats.nl
Nederlandstalige statistieken. Enigszins beperkt en je moet een icoontje onderaan elke pagina zetten, maar wel privacy-vriendelijk. (Een betaalde versie heeft meer mogelijkheden, zoals het verbergen van het icoontje.)

matomo.org
Open source software voor privacy-vriendelijke statistieken.

openwebanalytics.com
Open source software voor privacy-vriendelijke statistieken.

piwik.pro
Professionele zusje van het iets hierboven staande matomo.org. Heeft ook een (ietwat beperkte) gratis versie.

plausible.io/blog/remove/google-analytics
Artikel met redenen om Google Analytics niet te gebruiken. Geschreven door een open source-concurrent, maar dat maakt de redenen niet minder geldig.

posthog.com
Open source software voor privacy-vriendelijke statistieken. Gratis voor één project.

umami.is
Open source software voor privacy-vriendelijke statistieken.

w3schools.com/browsers
Statistieken over resolutie, browser, besturingssysteem, en dergelijke (van bezoekers van w3schools).

SVG

Browser support zie CSS → Browser support.

Kant-en-klare iconen en dergelijke in SVG-formaat zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Online optimaliseren, code genereren en converteren voor en van SVG-afbeelding zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren. Hieronder staan alleen links naar meer theoretische artikelen en dergelijke.

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.

developer.mozilla.org/en-US/docs/Web/SVG
Ingangspagina over SVG. Met referentie, tutorial, 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.

inkscape.org
Open source editor om SVG mee te schrijven en bewerken. De site is Engelstalig, in het programma is ook een Nederlandse vertaling te installeren.

jenkov.com/tutorials/svg
Uitgebreide cursus met veel voorbeelden.

svg-path-visualizer.netlify.app
Enkele voorbeelden van SVG met een uitleg van de bijbehorende code. Als je de code verandert, zie je gelijk het effect daarvan.

svgontheweb.com
Inleiding in het gebruik van SVG. Met links naar andere sites.

unimelb.edu.au/accessibility/techniques/accessible-svg
Artikel met tips voor een toegankelijke SVG.

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 voor 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.

Toegankelijk­heid

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Nieuwsbrieven en dergelijke zie Nieuwsbrieven, nieuwssites, en dergelijke.

Algemene tests

(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.

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.

Hier staan tests die min of meer 'n hele pagina testen. Tests voor afzonderlijke elementen en dergelijke zijn te vinden bij Toegankelijkheid → Artikelen, tutorials, links, en dergelijke → Specifieke elementen, attributen, en dergelijke. (Bij veel van dit soort gespecialiseerde tests staan ook tutorials en zo, vandaar.)

Firefox, Google Chrome en veel andere browsers hebben tal van extensies op het gebied van toegankelijkheid (zoek op het trefwoord accessibility).

a11ygator.chialab.io
Online de pagina testen op toegankelijkheid.

a11yproject.com/posts/using-firefox-for-accessibility-testing
Handleiding hoe in Firefox te testen op toegankelijkheid. Zowel de ingebouwde ontwikkeltools al sextensies worden behandeld.

digitala11y.com/accessibility-plug-ins-ie-chrome-firefox-browsers
Lijst met extensies voor browsers op het gebied van toegankelijkheid.

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.)

firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector
Handleiding voor de in de ontwikkeltools van Firefox ingebouwde accessibility inspector.

lighthouse-metrics.com
Online testen op een hele serie onderdelen, waaronder snelheid en toegankelijkheid.

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.

qualweb.di.fc.ul.pt/evaluator
Online een pagina testen op toegankelijkheid. Met uitgebreide omschrijving van (mogelijk) fouten.

w3.org/WAI/ER/tools
Links naar elke bekende toegankelijkheidstest, met uitgebreide toelichting bij elke link. Onderaan elke test staat de datum, waarop de informatie voor die test is bijgewerkt.

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.
Uitgebreide uitleg over icoontjes en dergelijke is te vinden in de evalutionguide.

web.dev/measure
Test online op snelheid, toegankelijkheid, geschiktheid voor zoekmachines, en dergelijke. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

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)

Sectioning elements en landmarks zie Toegankelijkheid → WCAG en WAI-ARIA.

Voor- en nadelen van eenheden als em en px specifiek voor fonts staan bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Typografie.

24days.in/umbraco-cms/2020/semantics-in-web-development
Uitleg waarom semantisch juist gebruik van html, bestandsnamen, enzovoort belangijk is.

a11yproject.com/checklist
Af te vinken controlelijst met links naar meer info.

a11yproject.com/resources
Pagina met links naar van alles over toegankelijkheid, ingedeeld in hoofdstukken.

accessguide.io
Lijst met dingen om op te letten en uitleg hoe dat te doen. De uitleg is uiterst duidelijk en leesbaar geschreven. Mat voorbeelden en links naar meer info.

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. Vlaamstalig.

benmyers.dev/blog/accessibility-tree
Heldere uitleg over wat de accessibility tree is.

css-tricks.com/accessible-web-animation-the-wcag-on-animation-explained
Artikel over waarop te letten voor toegankelijke animaties.

de.ryerson.ca/wa/audit
Cursus in boekvorm over hoe te testen op toegankelijkheid. Het boek is ook te downloaden.

dev.to/addyosmani/accessibility-tips-for-web-developers
Beknopte maar redelijk volledige tutorial waar op te letten bij het maken van een site. Met tal van links naar plaatsen met meer info.

dev.to/grahamthedev/101-digital-accessibility-tips-and-tricks-4728
Zeer uitgebreid overzicht met dingen die belangrijk zijn voor toegankelijkheid.

developer.mozilla.org/en-US/docs/Learn/Accessibility
Overzicht van artikelen, tutorials, en dergelijke op mozilla.org op het gebied van toegankelijkheid.

devyarns.com/logical-focus-order
Artikel over het belang van een logische tab-volgorde, met tips om fouten te voorkomen.

engineering.khanacademy.org/posts/windows-high-contrast-mode
Uitleg over Windows High Contrast Mode.

getstark.co/library
Grote verzameling links over toegankelijkheid, ingedeeld in rubrieken.

github.com/ediblecode/accessibility-resources
Grote verzameling links over toegankelijkheid, ingedeeld in categorieën.

iacobien.nl
Uitleg over richtlijnen, artikelen, en dergelijke. Nederlandstalig.

htmlhell.dev
Lijst met veel voorkomende fouten en oplossingen daarvoor. (In het overzicht kun je 'n onderwerp opzoeken, maar even de hele lijst bekijken kan geen kwaad.)

ishadeed.com/article/hiding-web
Artikel over het verbergen van elementen, tekst, enzovoort, en de invloed daarvan op toegankelijkheid.

kittygiraudel.com/2021/02/17/hiding-content-responsibly
Overzicht van manieren om dingen te verbergen en de invloed daarvan op toegankelijkheid.

localghost.dev/blog/the-right-tag-for-the-job-why-you-should-use-semantic-html
Artikel waarom een juist semantisch gebruik van HTML belangrijk is.

magentaa11y.com/web
Af te vinken controlelijst met links naar tips hoe te testen, meer info, en dergelijke.

matuzo.at/blog/accessible-to-some
Artikel over ontoegankelijke sites, met een voorbeeld van een ontoegankelijke pagina, maar dan ontoegankelijk gemaakt voor 'gewone' browsers.

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.

pressbooks.library.torontomu.ca/iwacc
Cursus toegankelijke websites maken aan de hand van WCAG-richtlijnen. In boekvorm, boek is ook te downloaden.

pauljadam.com/resources
Groot aantal links over toegankelijkheid, overzichtelijk ingedeeld in groepen.

romeo.elsevier.com/accessibility_checklist
Checklist voor toegankelijkheid. Er kan worden gefilterd op richtlijnen, specifieke regels voor elementen, en dergelijke.

sarasoueidan.com/blog/focus-indicators
Artikel over het belang en de vereisten van een goede focus-indicator.

scottohara.me/blog/2017/04/14/inclusively-hidden
Artikel over verschillende manieren om elementen te verbergen en de invloed daarvan op schermlezers en dergelijke.

sherpa.guide/paths/webaccessibility
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om een website toegankelijk te maken. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

shopify.com/partners/blog/keyboard-accessibility
Artikel over waarop te letten wat betreft toegankelijkheid voor gebruikers van de Tab-toets.

smashingmagazine.com/2018/09/importance-manual-accessibility-testing
Uitstekende inleiding over testen op toegankelijkheid. Met veel links.

smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components
Alfabetisch overzicht van elementen en technieken met tips voor toegankelijkheid.

smashingmagazine.com/2021/06/complete-guide-accessibility-tooling
Overzicht van hulpmiddelen om toegankelijkheid te testen.

tetralogical.com/blog/2022/01/18/quick-accessibility-tests-anyone-can-do
Lijstje met tien dingen die toegankelijkheid een heel stuk verbeteren, zonder dat ze erg veel moeite of tijd kosten.

udacity.com/course/web-accessibility
Online cursus toegankelijke sites maken. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

uxdesign.cc/accessibility-tools-for-designers-and-developers
Overzicht van hulpmiddelen om toegankelijkheid te testen.

viget.com/articles/how-to-make-your-web-content-accessible
Niet-technisch, uiterst leesbaar overzicht van dingen die belangrijk zijn voor toegankelijkhleid. Met simpele voorbeelden.

uxdesign.cc/emojis-in-accessibility-how-to-use-them-properly
Artikel met tips om emoji's op een toegankelijke manier te gebruiken.

w3.org/WAI/resources
Links van W3C naar van alles over toegankelijkheid.

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.

websitesetup.org/web/accessibility-checklist
Uitgebreide checklijst met punten die belangrijk zijn voor toegankelijkheid.

Specifieke elementen, attributen, en dergelijke

(Onderafdeling van Toegankelijkheid → Artikelen, tutorials, links, 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.

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.

Onderwerpen die specifiek met één element of één eigenschap te maken hebben, kunnen ook bij dat specifieke element of eigenschap staan.

focus:visible zie CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke.

Sectioning elements en landmarks zie Toegankelijkheid → WCAG en WAI-ARIA.

a11y-collective.com/ the-perfect-link
Tutorial over het maken van toegankelijke links (<a>).

a11yproject.com/posts/how-to-use-the-tabindex-attribute
Korte tutorial over het tabindex-attribuut.

a11yproject.com/posts/resize-text
Tutorial hoe te testen of de lettergrootte probleemloos kan worden veranderd door de bezoeker.

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.

adrianroselli.com/2022/02/column-headers-and-browser-support
Overzicht van ondersteuning van <th> door allerlei combinaties van schermlezers en browsers.

bitsofco.de/alternative-text-and-images
Duidelijke uitleg over welk soort alt-tekst je bij een afbeelding wanneer moet gebruiken.

blog.logrocket.com/why-you-should-use-focus-styles
Artikel waarom een indicatie van focus belangrijk is, en allerlei ideeën om dat beter en mooier te doen dan de standaardfocus.

craigabbott.co.uk/blog/using-the-language-attribute-to-make-your-website-accessible
Tutorial over het lang-attribuut met ook voorbeelden van meerdere talen door elkaar heen.

ericwbailey.design/writing/dont-use-custom-css-mouse-cursors
Artikel over de problemen die een zelf ontworpen cursor kan veroorzaken.

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/stuff/2022/04/03/aria-labelledby-usage-notes
Tutorial over wanneer en hoe aria-labelledby (niet) te gebruiken.

nicchan.me/blog/tips-for-focus-styles
Artikel waarom een indicatie van focus belangrijk is, en allerlei ideeën om dat beter en mooier te doen dan de standaardfocus.

powermapper.com/tests
Zeer groot aantal tests in diverse schermlezer/browser-combinaties. Onder andere wai-aria, HTML-attributen en -elementen.

webaim.org/techniques/alttext
Tutorial over alt-tekst bij afbeeldingen.

webaim.org/techniques/language
Uitgebreide tutorial over het gebruik van het lang-attribuut.

Contrast en kleurenblindheid

(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.

Firefox en Google Chrome hebben tal van extensies op het gebied van toegankelijkheid.

Het samenstellen van (toegankelijke) kleurenpaletten met meerdere kleuren is te vinden bij Gereedschap → Kleuren.

24ways.org/2012/colour/accessibility
Artikel over wat kleurenblindheid 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.

baselinehq.com/blog/colourblindness-information-ui-design-red-green-problems-tips-tricks
Artikel van een kleurenblinde ontwerper over het (gebrek aan) onderscheid tussen rood en groen, en hoe dat te voorkomen.

buttonbuddy.dev
Online kleuren bij een <button> uitzoeken en controleren op voldoende contrast, ook bij :hover en :focus.

colorhexa.com
Online veel informatie over één op te geven kleur krijgen en simuleren hoe kleurenblinden die kleur zien.

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.

getstark.co/blog/accessible-contrast-ratios-and-a-levels-explained
Artikel over de samenhang tussen contrast en de verschillende A-levels (toegankelijkheids-levels).

juicystudio.com/services/luminositycontrastratio
Online controleren of contrast tussen twee kleuren groot genoeg is. Kleuren worden ingevoerd met behulp van hex-waarden.

learnui.design/tools/accessible-color-generator
Online kleur opgeven en suggestie voor meest overeenkomende kleur met voldoende contrast voor tekst krijgen.

lowvision/support
Laat online de 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().

toptal.com/designers/colorfilter
Online veel voorkomende vormen van kleurenblindheid simuleren. De originele pagina wordt naast de gesimuleerde versie getoond.

uxmatters.com/mt/archives/2021/09/color-and-universal-design
Uitgebreid artikel over verschillende soorten kleurenblindheid en hoe je daar rekening mee kunt houden.

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)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Specifiek voor kleurenblindheid staat onder Toegankelijkheid → Contrast en kleurenblindheid.

Algemeen

(Onderafdeling van Toegankelijkheid → Schermlezers)

200ok.nl/tips.speciale-tekens-en-screenreaders
Lijst met speciale tekens en de uitspraak daarvan door een aantal schermlezers.

200ok.nl/tips/bedragen-en-screenreaders
Lijst met verschillende vormen van een geldbedrag en hoe een aantal schermlezers die voorleest (of zich er fataal in verslikt...).

adrianroselli.com/2021/10/blaming-screen-readers-red-flag
Artikel met enkele voorbeelden van voor schermlezers vrijwel ontoegankelijke creaties.

axesslab.com/what-is-a-screen-reader
Tutorial over het gebruik van verschillende schermlezers, gericht op sitebouwers.

digitala11y.com/screen-readers
Overzicht van schermlezers met onder andere licenties en op welke systemen ze draaien.

en.wikipedia.org/wiki/Comparison_of_screen_readers
Uitgebreid overzicht van schermlezers met prijzen, op welke systemen ze draaien, enzovoort.

smashingmagazine.com/2019/02/accessibility-webinar
Video over de problemen waar een gebruikster van een schermlezer tegenaan kan lopen. Absolute aanrader!

ChromeVox

(Onderafdeling van Toegankelijkheid → Schermlezers)

ChromeVox is een extensie voor Google Chrome op besturingssysteem Chrome OS. In het verleden was deze extensie ook bruikbaar in Google Chrome op andere besturingssystemen. Zo werd het ook hier (op Linux) gebruikt om op toegankelijkheid te testen.

Inmiddels werkt het echter alleen op Chrome OS nog goed, op andere systemen geeft het enorme problemen. Zo maakt het op Linux bijvoorbeeld de instellingen van Google Chrome onzichtbaar, om maar iets te noemen. Helaas is het dus niet meer mogelijk hierin te testen. Op heel veel sites wordt ChromeVox nog steeds voor alle systemen aangeraden, maar dit is dus echt verouderde informatie. Gezien de hardnekkigheid van deze verouderde info is hier de reactie van chromium zelf op de gemelde bug: bugs.chromium.org.

Mogelijk gaat hier in de toekomst weer getest worden in ChromeVox, als een verouderd systeem mogelijk door een versie van Chrome OS wordt vervangen. (Mogelijk ook niet, want om nou reclame te gaan maken voor het besturingssysteem van een gerenommeerd datadief...)

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. 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 iets hiervoor 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.
En begin maart 2021 is de link weer 'ns aangepast. Wie er lol in heeft, kan de ellenlange EULA zelf uitspitten op juridische spitsvondigheden.
Mei 2022: joechei, 't is in de mei, dus legt elke vogel een ei en Jaws een nieuwe licentie. De link is zowaar niet gewijzigd, maar de licentie weer wel. De gevorderde masochist mag het zelf gaan lezen, ik geloof het wel.

Omdat niet op Jaws wordt getest, staan hier ook geen links naar artikelen en dergelijke over Jaws. Het is onmogelijk de kwaliteit daarvan te beoordelen zonder Jaws te gebruiken.

Lynx (Windows-versie)

(Onderafdeling van Toegankelijkheid → Schermlezers)

Lynx is een tekstbrowser die de pagina ongeveer laat zien, zoals een spraakbrowser en dergelijke hem zien.

invisible-island.net/lynx
Download, uitleg, en dergelijke voor Lynx op Windows. (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)

NVDA is een gratis open source schermlezer voor Windows.

In NVDA zelf is een zeer uitgebreide Nederlandstalige handleiding aanwezig.

babbage.com/download/handleiding/handleiding-NVDA/NVDA Sneltoetskaart (word)
Word-document met de belangrijkste sneltoetsen. Opent ook prima in LibreOffice.

babbage.com/download/handleiding/handleiding-NVDA
Nederlandstalige handleiding voor NVDA.

nvaccess.org
NVDA. Gratis, uitstekende open source schermlezer. Werkt alleen op Windows.

nvaccess.org/filex/nvda/documentation/userGuide
Gebruikershand­leiding.

dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts.
Overzicht van de belangrijkste sneltoetsen. (Ook te downloaden als pdf.)

webaim.org/articles/nvda.
Beknopte handleiding hoe NVDA te gebruiken om toegankelijkheid te testen.

Orca (Linux)

(Onderafdeling van Toegankelijkheid → Schermlezers)

Orca is een schermlezer voor Linux. In de meeste distributies zal deze zijn opgenomen, en kan dus op de gebruikelijke simpele manier geïnstalleerd worden.

a11yproject.com/posts/getting-started-with-orca
Beknopte handleiding met de meest essentiële toetsen en dergelijke.

help.gnome.org/users/orca/stable
Online handleiding.

Deze site is gemaakt op een systeem met Linux, dus je zou verwachten dat ook in Orca is getest. Dat leverde echter te veel problemen op. Orca is gemaakt voor Gnome, en de site is gemaakt op een systeem met KDE. Mogelijk ligt daar het probleem.
In het verleden las Orca gewoon vrijwel helemaal niets voor. Inmiddels leest het een pagina op een website uitstekend voor, met goed werkende sneltoetsen voor kopregels, landmarks, enzovoort. Zeker zo goed als andere schermlezers. En er bestaat inmiddels ook een redelijke handleiding (zie link gelijk hierboven).
Maar helaas worden in allerlei programma's sneltoetsen volledig onbruikbaar. Ook na het stoppen en zelfs nog na het killen van Orca. Alleen een volledige herstart (mogelijk ook uit- en weer inloggen) verhelpt dit. Zelfs simpele toetsen als PgUp, PgDn en pijltjes werken niet meer, en laten zelfs regelmatig programma's crashen. Hierdoor is het helaas nog steeds onmogelijk om te testen in Orca.
(En gelieve niet de uitstekende actiegroep Wakker Dier te bellen vanwege het killen van een orca: killen is op Linux gewoon een omschrijving van het hardhandig stoppen van een programma. Bijvoorbeeld omdat het op hol is geslagen, of - zoals hier - omdat het sneltoetsen jat.)

TalkBack (Android)

(Onderafdeling van Toegankelijkheid → Schermlezers)

TalkBack is de op Android meegeleverde schermlezer.

In TalkBack zelf zijn een Nederlandstalige handleiding en oefeningen aanwezig.

appt.nl/kennisbank/hulpmiddelen/schermlezer/android
Nederlandstalige handleiding voor TalkBack.
Op appt.nl/app staat info over een app voor Android, waarin onder andere deze handleiding (inclusief oefeningen) zit ingebouwd, naast veel meer informatie over toegankelijkheid.

dequeuniversity.com/assets/pdf/screenreaders/talkback-guide.pdf (pdf)
pdf met beschrijvingen van de belangrijkste gebaren en dergelijke om TalkBack te kunnen bedienen.

dequeuniversity.com/assets/pdf/screenreaders/talkback-images-guide.pdf (pdf)
pdf met tekeningen van 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)

Verteller is de op Windows meegeleverde schermlezer. Met ingang van Windows 10 werkt deze uitstekend. (In eerdere versies van Windows was het ding volstrekt onbruikbaar.)

support.microsoft.com/nl-nl/windows/volledige-handleiding-voor-verteller
Nederlandstalige uitleg over de in Windows 10 en 11 ingebouwde schermlezer Verteller.
Niet alle sneltoetsen uit deze uitleg blijken te werken. Bovendien zijn het er zoveel dat je door de bomen het bos niet meer ziet. Een kortere Engelstalige lijst met de belangrijkste sneltoetsen is te vinden op dequeuniversity.com. Hoewel de combinaties anders zijn, lijken deze ook in de Nederlandse versie te werken.

VoiceOver (OS X, iOS en iPadOS)

(Onderafdeling van Toegankelijkheid → Schermlezers)

VoiceOver is de op OS X, iOS en iPadOs meegeleverde schermlezer.

appt.nl/kennisbank/hulpmiddelen/schermlezer/ios
Nederlandstalige handleiding voor VoiceOver op iOS en iPadOS.
Op appt.nl/app staat info over een app voor iOS en iPadOS, waarin onder andere deze handleiding (inclusief oefeningen) zit ingebouwd, naast veel meer informatie over toegankelijkheid.

dequeuniversity.com/assets/pdf/screenreaders/voiceover-ios-guide.pdf (pdf)
pdf met beschrijvingen van de belangrijkste gebaren om VoiceOver op iOS en iPadOS te kunnen bedienen.

dequeuniversity.com/assets/pdf/screenreaders/voiceover-ios-images-guide.pdf (pdf)
pdf met tekeningen van de belangrijkste gebaren om VoiceOver op iOS en iPadOS 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.

help.apple.com/voiceover/mac/10.15
Nederlandstalige handleiding voor de in OS X 10.15 (Catalina) ingebouwde schermlezer VoiceOver.

support.apple.com/nl-nl/guide/voiceover/welcome/mac
Nederlandstalige handleiding voor de in OS X 11 ('Big Sur') en OS X 12 ('Montery') ingebouwde schermlezer VoiceOver.

webaim.org/articles/voiceover
Beknopte handleiding hoe VoiceOver te gebruiken om toegankelijkheid te testen.

yakim.nl/articles/voiceover-testing
Duidelijke tutorial hoe te testen met VoiceOver op OS X.

WebbIE (Windows)

(Onderafdeling van Toegankelijkheid → Schermlezers)

WebbIE is een gratis te gebruiken tekstbrowser voor Windows. Het laat een pagina ongeveer zien, zoals een schermlezer die ziet.

webbie.org.uk
(Site is Engelstalig, programma heeft een Nederlandstalige versie.) Je hebt voor testen alleen de browser nodig.

WCAG en WAI-ARIA

(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.

Browser support, tests voor aria-attributen, en dergelijke staan bij Toegankelijkheid → Artikelen → Specifieke elementen, attributen, en dergelijke.

Speficieke onderwerpen, zoals een toegankelijk formulier of ondertiteling bij video, kunnen ook bij het betreffende onderwerp staan.

24ways.org/2017/wcag-for-people-who-havent-read-them
De 1200 pagina's van de WCAG-richtlijnen 2.0 (iets verouderd dus inmiddels) samengevat in ongeveer twaalf pagina's gewoon Engels.

appt.nl/kennisbank/richtlijnen
Nederlandstalige uirteg, richtlijnen, enzovoort voor toegankelijke apps, gebaseerd op WCAG 2.1. Hoewel dit is uitgewerkt voor apps, is het gebaseerd op precies dezelfde richtlijnen als die voor websites.
In een iets andere vorm is dit als Handboek Toegankelijkheid (pdf) ook als pdf te downloaden.

books.theinternetacademy.nl/wcag-in-de-praktijk
Nederlandstalige tutorial hoe te voldoen aan de eisen van WCAG. Ook te downloaden als pdf en ePub.

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. (Tot WCAG 2.0, dus iets verouderd.)

deque.com/blog/aria-spec-for-the-unninitiated
Tutorial over een juist gebruik van WAI-ARIA, deel 1.
deel 2    deel 3

digitala11y.com/wcag-checklist
Duidelijke checktlist WCAG 2.1, met bij elk onderwerp een link naar meer informatie.

hassellinclusion.com/blog/html5-sectioning-elements-accessible-landmarks
Tutorial over de relatie tussen 'sectioning elements' (<main>, <header>, en dergelijke) en landmarks.

html5accessibility.com/stuff/2021/05/31/the-hidden-world-of-aria-hidden
Tutorial over een juist gebruik van aria-hidden.

w3.org/TR/2021/CR-wai-aria-1.2
Ontwerp-specificatie WAI-ARIA1.2.

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/using-aria
Uitleg voor makers van sites over de toepassing van WAI-ARIA.

w3.org/TR/wcag-3.0
Ontwerp-specificatie W3C Accessibility Guidelines (WCAG) 3.0.

w3.org/TR/WCAG21
Specificatie Web Content Accessibility Guidelines versie 2.1

w3.org/TR/WCAG22
Ontwerp-specificatie Web Content Accessibility Guidelines versie 2.2.

w3.org/Translations/WCAG20-nl
Web Content Accessicibility Guidelines versie 2.0. Nederlandse vertaling.

w3.org/WAI/ARIA/apg
Uitleg in min of meer normale mensntaal over het gebruik van WAI-ARIA. Met links naar voorbeelden.

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.1-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.

xem.github.io/articles/webgl-guide
Uitgebreide tutorial.

WhoIs, traceroute, en dergelijke

ping.eu
Ping, traceroute, whois, DNS lookup, en dergelijke.

sidn.nl
Informatie over in Nederland geregistreerde sites. Nederlandstalig.

sitereport.netcraft.com
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-adress opzoeken.

whois.domaintools.com
Eigenaar, hoster, enzovoort van site opzoeken.

Zoekmachines

Dat hieronder alleen Google en Bing worden genoemd, betekent zeker niet dat er geen andere goede zoekmachines zijn. Integendeel: wat bijvoorbeeld privacy betreft zijn dit zo'n beetje de slechtste zoekmachines. Het zijn echter de enige zoekmachines die - naast de zoekmachine - uitgebreide hulpmiddelen voor webmasters hebben. Vandaar dat alleen deze twee worden genoemd.

(Baidu en Yandex hebben ook hulpmiddelen, maar die zijn voornamelijk op China en Rusland gericht. En voor je privacy hoef je die vermoedelijk ook niet te gebruiken...)

Algemene artikelen, 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.

books.theinternetacademy.nl/seo
Nederlandstalige tips om beter gevonden te worden. Ook te downloaden als pdf en ePub.

curatedseotools.com
Groot aantal op onderwerp gesorteerde links over van alles dat met zoekmachines te maken heeft.

developers.google.com/search/docs/beginner/do-i-need-seo
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'.

searchengineland.com
Achtergrondartikelen over SEO, updates van zoekmachines, en dergelijke

seoguru.nl/handleiding-seo
Handleiding over optimaliseren van 'n site voor zoekmachines. Nederlandstalig.

seroundtable.com
Achtergrondartikelen over SEO, updates van zoekmachines, en dergelijke

web.dev/measure
Test online op snelheid, toegankelijkheid, geschiktheid voor zoekmachines, en dergelijke. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

Bing

(Onderafdeling van Zoekmachines)

bing.com/webmasters/about
Microsoft hulpmiddelen voor webmasters. Nederlandstalig. Inmiddels is de kwaliteit van de hulpprogramma's van Bing vergelijkbaar met die van Google, en sommige hebben zelfs meer mogelijkheden, zoals de SEO-analyse.

bing.com/webmasters/help/webmaster-guidelines
Richtlijnen voor webmasters. Nederlandstalig.

Google

(Onderafdeling van Zoekmachines)

developers.google.com/search/blog
Blog van Google met (nog steeds wat) info over zoekmachines, maar tegenwoordig vooral veel over hoe het paradijs te bereiken met producten van Google.
Idem, maar Nederlandstalig en op Nederland gericht

developers.google.com/search/docs/advanced/crawling/special-tags
Welke metatags Google gebruikt. (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 dat geld durft te vragen voor het plaatsen van volstrekt nutteloze en vaak zelfs nadelige metatags. En voor 10 euro per maand of zo worden ze bijgehouden. Volstrekt zinloos, gewoon ordinaire oplichterij.)

developers.google.com/search/docs/advanced/guidelines/webmaster-guidelines
Richtlijnen voor webmasters.

developers.google.com/search/docs/beginner/seo-starter-guide
Googles Startersgids voor zoekmachine­optimalisatie (SEO).

search.google.com/search-console/about
Nederlandstalige'Search Console' met een hele reeks hulpmiddelen voor webmasters. Je moet je wel registreren.
Uitgebreide uitleg over Search Console.

static.googleusercontent.com/media/guidelines (pdf)
pdf met de richtlijnen van Google voor raters (mensen die voor Google handmatig sites beoordelen).

robots.txt

(Onderafdeling van Zoekmachines)

Zowel Google als Bing bieden binnen hun hulpmiddelen voor webmasters een mogelijkheid robots.txt te valideren.

developers.google.com/search/docs/advanced/robots/robotx_txt
Uitgebreid artikel hoe robots.txt te gebruiken voor zoekmachines.

en.ryte.com/free-tools/robots-txt-generator
Online robots.txt genereren aan de hand van in te vullen velden.

keysearch.co/tools/robots-txt-generator
Online robots.txt genereren aan de hand van in te vullen velden.

seoptimer.com/robotx-txt-generator
Online robots.txt genereren aan de hand van in te vullen velden.

websonic.nl/tutorials/website/website_robotstxt
Handleiding over robots.txt. Nederlandstalig.

XML-sitemap

(Onderafdeling van Zoekmachines)

cleancss.com/xml-beautify
Online XML (zoals een sitemap) valideren en formatteren.

sitemaps.org/nl
Uitgebreide Nederlandstalige uitleg over wat een sitemap is en zo.

xml-sitemaps.com
Online XML-sitemap genereren. Tot vijfhonderd pagina's is het gratis. (Om de relatieve waarde van de pagina's te bepalen, is het absoluut noodzakelijk een goede navigatiestructuur te hebben.)

xml-sitemaps.com/validate-xml-sitemap
Online XML-sitemap valideren.