Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate the 2020 http2 chapter to Dutch #2112

Merged
merged 11 commits into from
Apr 2, 2021
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/content/nl/2020/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ De top 5 bestandsextensies die expliciet zijn opgenomen in de `alt`-tekstwaarde
<thead>
<tr>
<th scope="col">Bestandsextensie</th>
<th scope="col">Bureaublad</th>
<th scope="col">Desktop</th>
<th scope="col">Mobiel</th>
</tr>
</thead>
Expand Down Expand Up @@ -284,7 +284,7 @@ Tabellen zijn een efficiënte manier om gegevens weer te geven met twee assen va
<thead>
<tr>
<th scope="col">Meting</th>
<th scope="col">Bureaublad</th>
<th scope="col">Desktop</th>
<th scope="col">Mobiel</th>
</tr>
</thead>
Expand Down Expand Up @@ -322,7 +322,7 @@ Als er een absolute behoefte is om naar deze techniek te reiken, moet de rol van

### Documenttitels

Beschrijvende paginatitels zijn handig voor de context wanneer u met ondersteunende technologie tussen pagina's, tabbladen en vensters wisselt, omdat de wijziging in de context zal worden aangekondigd. Uit onze gegevens blijkt dat 98,98% van de sites een titel heeft, wat een hoopvolle statistiek is. Het spreekt echter vanzelf dat homepagina's een hoger aantal paginatitels kunnen hebben dan minder belangrijke routes.
Beschrijvende paginatitels zijn handig voor de context wanneer u met ondersteunende technologie tussen pagina's, tabbladen en vensters wisselt, omdat de wijziging in de context zal worden aangekondigd. Uit onze gegevens blijkt dat 98,98% van de sites een titel heeft, wat een hoopvolle statistiek is. Het spreekt echter vanzelf dat startpagina's een hoger aantal paginatitels kunnen hebben dan minder belangrijke routes.

### Tabindex

Expand Down Expand Up @@ -379,7 +379,7 @@ HTML5 introduceerde veel nieuwe native elementen, die allemaal <a hreflang="en"

#### Gebruik gewoon een knop!

We ontdekten dat 25,20% van de desktopsites en 24,50% van de mobiele sites homepagina's had met ten minste één element met een expliciet toegewezen `role="button"`. Dit suggereert dat ongeveer een kwart van de websites de functie `button` op elementen gebruikt om hun semantiek te wijzigen, met uitzondering van knoppen waaraan expliciet de `button`-rol is toegewezen, die overbodig maar ongevaarlijk is.
We ontdekten dat 25,20% van de desktopsites en 24,50% van de mobiele sites startpagina's had met ten minste één element met een expliciet toegewezen `role="button"`. Dit suggereert dat ongeveer een kwart van de websites de functie `button` op elementen gebruikt om hun semantiek te wijzigen, met uitzondering van knoppen waaraan expliciet de `button`-rol is toegewezen, die overbodig maar ongevaarlijk is.

Als niet-interactieve elementen zoals `<div>`s en `<span>`s deze rol hebben gekregen, is de kans groot dat een of meer van de 5 regels van ARIA zijn overtreden.

Expand Down Expand Up @@ -473,7 +473,7 @@ De toegankelijke naam kan worden afgeleid van de inhoud van een element (zoals k

We kunnen ARIA ook gebruiken om toegankelijke namen voor elementen op te geven. Er zijn twee ARIA-attributen die dit bewerkstelligen, <a hreflang="en" href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14.html">`aria-label`</a>, <a hreflang="en" href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16.html">`aria-labelledby`</a>. Elk van deze kenmerken zal de berekening van de toegankelijke naam "winnen" en de native afgeleide toegankelijke naam overschrijven, dus gebruik ze met de nodige voorzichtigheid en zorg ervoor dat u test met een schermlezer of bekijk de toegankelijkheidsboom om te bevestigen dat de toegankelijke naam is wat werd verwacht. Wanneer u ARIA gebruikt om een element een naam te geven, is het belangrijk om ervoor te zorgen dat de <a hreflang="en" href="https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html">WCAG 2.5.3, <span lang="en">Label in Name</span></a> criterium niet geschonden is, dat verwacht dat zichtbare labels ten minste een deel van de toegankelijke naam zijn.

Met het `aria-label`-element kan een ontwikkelaar een tekenreekswaarde opgeven en deze wordt gebruikt voor de toegankelijke naam voor het element. We ontdekten dat 40,44% van de desktoppagina's en 38,72% van de mobiele homepagina's ten minste één element had met het kenmerk `aria-label`, waardoor dit het meest populaire ARIA-kenmerk is voor het verstrekken van toegankelijke namen.
Met het `aria-label`-element kan een ontwikkelaar een tekenreekswaarde opgeven en deze wordt gebruikt voor de toegankelijke naam voor het element. We ontdekten dat 40,44% van de desktoppagina's en 38,72% van de mobiele startpagina's ten minste één element had met het kenmerk `aria-label`, waardoor dit het meest populaire ARIA-kenmerk is voor het verstrekken van toegankelijke namen.

Het `aria-labelledby` attribuut accepteert een `id` referentie als zijn waarde, die het associeert met een ander element in de interface om zijn toegankelijke naam te geven. Het element wordt "gelabeld door" dit andere element dat zijn toegankelijke naam geeft. We ontdekten dat 17,73% van de desktoppagina's en 16,21% van de mobiele pagina's ten minste één element had met het kenmerk `aria-labelledby`.

Expand Down
8 changes: 4 additions & 4 deletions src/content/nl/2020/capabilities.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ editors: [rviscomi]
translators: [noah-vdv]
discuss: 2049
results: https://docs.google.com/spreadsheets/d/1N6j1qKv7vc51p1W9z_RrbJX9Se3Pmb-Uersfz4gWqqs/
christianliebel_bio: Christian Liebel is consultant bij <a hreflang="en" href="https://thinktecture.com">Thinktecture</a> en ondersteunt klanten uit verschillende bedrijfsgebieden bij het implementeren van eersteklas webapplicaties. Hij is een Microsoft MVP voor Developer Technologies, Google GDE voor Web/Capabilities en Angular, en neemt deel aan de W3C Web Applications Working Group.
christianliebel_bio: Christian Liebel is consultant bij <a hreflang="en" href="https://thinktecture.com">Thinktecture</a> en ondersteunt cliënten uit verschillende bedrijfsgebieden bij het implementeren van eersteklas webapplicaties. Hij is een Microsoft MVP voor Developer Technologies, Google GDE voor Web/Capabilities en Angular, en neemt deel aan de W3C Web Applications Working Group.
featured_quote: De staat van de webmogelijkheden in 2020 is gezond, aangezien nieuwe krachtige API's regelmatig worden geleverd met nieuwe releases van op Chromium gebaseerde browsers. De eerste API's zijn ook al in andere browsers terechtgekomen.
featured_stat_1: 0,0006%
featured_stat_label_1: (Chrome) Pagina laden met de Async Clipboard API
Expand Down Expand Up @@ -111,7 +111,7 @@ Met behulp van de Push- en Notifications-API's kunnen webapplicaties al lang pus

### <span lang="en">Badging API</span> {badging-api}

Op verschillende platforms is het gebruikelijk dat applicaties een badge presenteren op het pictogram van de applicatie die het aantal openstaande acties aangeeft. De badge kan bijvoorbeeld het aantal ongelezen e-mails, meldingen of taken weergeven dat moet worden voltooid. Met de <a hreflang="en" href="https://web.dev/badging-api/">Badging API</a> (<a hreflang="en" href="https://w3c.github.io/badging/">W3C Unofficial Draft</a>) kunnen geïnstalleerde webapplicaties een dergelijke badge weergeven op het icoon. Door `navigator.setAppBadge()` aan te roepen, kunnen ontwikkelaars de badge instellen. Voor deze methode is een nummer nodig om op de badge van de applicatie te worden weergegeven. De browser zorgt er vervolgens voor dat de weergave zo goed mogelijk wordt weergegeven op het apparaat van de gebruiker. Als er geen nummer is opgegeven, wordt een algemene badge weergegeven (bijvoorbeeld een witte stip op macOS). Door `navigator.clearAppBadge()` aan te roepen, wordt de badge weer verwijderd. De Badging-API is een uitstekende keuze voor e-mailklanten, apps voor sociale media of messengers. De Twitter PWA maakt gebruik van de Badging API om het aantal ongelezen meldingen op de badge van de applicatie weer te geven.
Op verschillende platforms is het gebruikelijk dat applicaties een badge presenteren op het pictogram van de applicatie die het aantal openstaande acties aangeeft. De badge kan bijvoorbeeld het aantal ongelezen e-mails, meldingen of taken weergeven dat moet worden voltooid. Met de <a hreflang="en" href="https://web.dev/badging-api/">Badging API</a> (<a hreflang="en" href="https://w3c.github.io/badging/">W3C Unofficial Draft</a>) kunnen geïnstalleerde webapplicaties een dergelijke badge weergeven op het icoon. Door `navigator.setAppBadge()` aan te roepen, kunnen ontwikkelaars de badge instellen. Voor deze methode is een nummer nodig om op de badge van de applicatie te worden weergegeven. De browser zorgt er vervolgens voor dat de weergave zo goed mogelijk wordt weergegeven op het apparaat van de gebruiker. Als er geen nummer is opgegeven, wordt een algemene badge weergegeven (bijvoorbeeld een witte stip op macOS). Door `navigator.clearAppBadge()` aan te roepen, wordt de badge weer verwijderd. De Badging-API is een uitstekende keuze voor e-mailcliënten, apps voor sociale media of messengers. De Twitter PWA maakt gebruik van de Badging API om het aantal ongelezen meldingen op de badge van de applicatie weer te geven.

{{ figure_markup(
image="badging_api.png",
Expand Down Expand Up @@ -211,7 +211,7 @@ self.addEventListener('periodicsync', (event) => {
});
```

Op het moment van schrijven implementeren alleen op Chromium gebaseerde browsers deze API. Op deze browsers moet de applicatie eerst worden geïnstalleerd (d.w.z. toegevoegd aan het home scherm) voordat de API kan worden gebruikt. De <a hreflang="en" href="https://www.chromium.org/developers/design-documents/site-engagement">site engagement score</a> van de website bepaalt of en hoe vaak periodieke synchronisatiegebeurtenissen kunnen worden aangeroepen. In de huidige conservatieve implementatie kunnen websites inhoud één keer per dag synchroniseren.
Op het moment van schrijven implementeren alleen op Chromium gebaseerde browsers deze API. Op deze browsers moet de applicatie eerst worden geïnstalleerd (d.w.z. toegevoegd aan het start scherm) voordat de API kan worden gebruikt. De <a hreflang="en" href="https://www.chromium.org/developers/design-documents/site-engagement">site engagement score</a> van de website bepaalt of en hoe vaak periodieke synchronisatiegebeurtenissen kunnen worden aangeroepen. In de huidige conservatieve implementatie kunnen websites inhoud één keer per dag synchroniseren.

{{ figure_markup(
image="periodic_background_sync_api.png",
Expand Down Expand Up @@ -255,7 +255,7 @@ In de loop van 2020 vertoont de `getInstalledRelatedApps()` API een gestage groe

Webapps kunnen inhoud offline opslaan op verschillende manieren, zoals Cache Storage of IndexedDB. Voor gebruikers is het echter moeilijk om te ontdekken welke inhoud offline beschikbaar is. Met de <a hreflang="en" href="https://web.dev/content-indexing-api/">Content Indexing API</a> (<a hreflang="en" href="https://wicg.github.io/content-index/spec/">WICG Editor's Draft</a>) kunnen ontwikkelaars inhoud prominenter weergeven. Momenteel is Chrome op Android de enige browser die deze API ondersteunt. Deze browser toont een lijst met "Artikelen voor jou" in het menu Downloads. Inhoud die is geïndexeerd via de Content Indexing API, wordt daar weergegeven.

De Content Indexing API breidt de Service Worker API uit met een nieuwe `ContentIndex` interface. Deze interface is beschikbaar via de eigenschap `index` van de registratie van de Service Worker. Met de `add()` methode kunnen ontwikkelaars inhoud aan de index toevoegen: elk stukje inhoud moet een ID, een URL, een start-URL, titel, beschrijving en een reeks pictogrammen hebben. Optioneel kan de inhoud worden gegroepeerd in verschillende categorieën, zoals artikelen, homepagina's of video's. De `delete()` methode maakt het mogelijk om weer inhoud uit de index te verwijderen, en de `getAll()` methode geeft een lijst met alle geïndexeerde items terug.
De Content Indexing API breidt de Service Worker API uit met een nieuwe `ContentIndex` interface. Deze interface is beschikbaar via de eigenschap `index` van de registratie van de Service Worker. Met de `add()` methode kunnen ontwikkelaars inhoud aan de index toevoegen: elk stukje inhoud moet een ID, een URL, een start-URL, titel, beschrijving en een reeks pictogrammen hebben. Optioneel kan de inhoud worden gegroepeerd in verschillende categorieën, zoals artikelen, startpagina's of video's. De `delete()` methode maakt het mogelijk om weer inhoud uit de index te verwijderen, en de `getAll()` methode geeft een lijst met alle geïndexeerde items terug.

{{ figure_markup(
image="content_indexing_api.png",
Expand Down
2 changes: 1 addition & 1 deletion src/content/nl/2020/cms.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ Deze cijfers zijn in grote lijnen consistent wanneer ze worden verdeeld over des

{{ figure_markup(
image="cms-top-5-cms-by-client.png",
caption="Top 5 CMS'en per klant.",
caption="Top 5 CMS'en per cliënt.",
description="Staafdiagram dat laat zien dat WordPress domineert met een aandeel van 31,37% op desktop en 31,39% op mobiel vergeleken met minder dan 2,5% voor de andere CMS'en: Drupal heeft 2,32% op desktop en 1,99% op mobiel, Joomla heeft 1,96% op desktop en 2,12% op mobiel, Squarespace heeft 1,08% op desktop en 0,85% op mobiel, en Wiz heeft 1,05% op desktop en 1,24% op mobiel.",
chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTkUxfuK-FCn3_IYDJiEsKDmdmyKb0TSEhG8dFc0XBIXej1NO2uUOmd-9NCbWuh-MZ3xzMhK_kNT-4u/pubchart?oid=2098327336&format=interactive",
sheets_gid="908727245",
Expand Down
4 changes: 2 additions & 2 deletions src/content/nl/2020/fonts.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ Het was interessant om de verschillen in snelheid op te merken voor sites die de
)
}}

Bij het bekijken van commerciële services zoals Adobe (`use.typekit.net`) of Monotype (`fast.fonts.com`) is het interessant om op te merken dat ze op desktop net zo snel of iets sneller zijn dan Google Fonts, maar merkbaar langzamer op mobiel. De conventionele wijsheid heeft over het algemeen aangenomen dat de trackingscripts die door die services worden gebruikt, ze aanzienlijk vertragen, maar dat is blijkbaar tegenwoordig minder een probleem dan in de afgelopen jaren. Hoewel het waar is dat we de prestaties van de site meten en niet noodzakelijk de prestaties van de font-host, hebben deze trackingscripts invloed op het laden van lettertypen op de client, dus het lijkt relevant om deze observaties op te nemen.
Bij het bekijken van commerciële services zoals Adobe (`use.typekit.net`) of Monotype (`fast.fonts.com`) is het interessant om op te merken dat ze op desktop net zo snel of iets sneller zijn dan Google Fonts, maar merkbaar langzamer op mobiel. De conventionele wijsheid heeft over het algemeen aangenomen dat de trackingscripts die door die services worden gebruikt, ze aanzienlijk vertragen, maar dat is blijkbaar tegenwoordig minder een probleem dan in de afgelopen jaren. Hoewel het waar is dat we de prestaties van de site meten en niet noodzakelijk de prestaties van de font-host, hebben deze trackingscripts invloed op het laden van lettertypen op de cliënt, dus het lijkt relevant om deze observaties op te nemen.

#### Zelfhosting is niet altijd beter

Expand Down Expand Up @@ -130,7 +130,7 @@ Het zou niet logisch zijn om een causaliteit tussen de hostingstrategie af te le

#### Lokaal is niet altijd beter

Een andere optie van self-hosting fonts op de server van de site, is om de door het systeem geïnstalleerde fonts op de client te gebruiken waar ze bestaan door het gebruik van `local` in de `font-face` declaratie. Het gebruik van `local` is <a hreflang="en" href="https://bramstein.com/writing/web-font-anti-patterns-local-fonts.html">controversieel</a>, omdat het bytes kan besparen, maar het kan ook slechte resultaten opleveren als de lokaal geïnstalleerde versie van het lettertype is verouderd. Vanaf [november 2020](https://twitter.com/googlefonts/status/1328761547041148929?s=19) is Google Fonts overgeschakeld op het gebruik van `local` alleen voor Roboto op mobiele platforms, anders wordt het lettertype altijd opgehaald via de netwerk.
Een andere optie van self-hosting fonts op de server van de site, is om de door het systeem geïnstalleerde fonts op de cliënt te gebruiken waar ze bestaan door het gebruik van `local` in de `font-face` declaratie. Het gebruik van `local` is <a hreflang="en" href="https://bramstein.com/writing/web-font-anti-patterns-local-fonts.html">controversieel</a>, omdat het bytes kan besparen, maar het kan ook slechte resultaten opleveren als de lokaal geïnstalleerde versie van het lettertype is verouderd. Vanaf [november 2020](https://twitter.com/googlefonts/status/1328761547041148929?s=19) is Google Fonts overgeschakeld op het gebruik van `local` alleen voor Roboto op mobiele platforms, anders wordt het lettertype altijd opgehaald via de netwerk.

## Racen naar eerste lak

Expand Down
Loading