Welkom bij de tweede aflevering van Chrome Dev Insider, waarin we updates delen over wat er nieuw en interessant is in de community en hier bij Chrome. Dit is een nieuwe aflevering met insiderverhalen over hoe we te werk gaan, en een korte blik op enkele van de belangrijkste updates waar je zeker even bij moet zijn.
Ik ben Rachel Andrew, Content Lead voor web.dev en developer.chrome.com , en werk binnen het Chrome Developer Relations-team. Ik werk al meer dan twintig jaar in de webwereld, met een focus op open webstandaarden en CSS, en ben lid van de CSS Working Group.
Twee maanden geleden sloten we Google I/O af, waar we enkele van de belangrijkste updates deelden over hoe we ontwikkelaars ondersteunen bij het sneller en krachtiger maken van het web, terwijl we de gegevens van gebruikers veilig en privé houden.
Een van de dingen die opviel (en we zijn blij dat de community dat ook heeft opgemerkt !) is de enorme hoeveelheid werk die het team verricht om meer CSS- en UI-functies op het web te ondersteunen. In deze editie van Chrome Dev Insider nemen we je mee achter de schermen en laten we zien wie er achter dit werk zit, hoe we CSS- en UI-ontwikkelaars ondersteunen en wat de toekomst brengt. Daarom ben ik zo blij dat ik deze editie van de Insider mag presenteren.
In het nieuws
In de eerste Chrome Dev Insider deelden we enkele updates over de initiatieven Compat 2021 en Interop 2022 , waarbij browserleveranciers en spelers in het ecosysteem samenwerken om meer webfuncties te ontwikkelen die door alle browsers worden ondersteund. Het initiatief richt zich sterk op CSS, omdat browserincompatibiliteit een van de grootste uitdagingen is voor CSS-ontwikkelaars .
Hoewel dit voor de meesten misschien geen nieuws is, is het spannend om te zien welke vooruitgang we al hebben geboekt in verschillende browsers.
Begin vorige maand kondigde Safari een uitgebreide release aan met Safari 16.0 Beta, die spannende nieuwe functies bevat zoals Container Queries , subgrid en een flexbox-inspector . Recente releases van Firefox en Chrome bevatten ook een aantal interessante nieuwe functies en bugfixes. Ik behandel de belangrijkste ontwikkelingen in zowel de stabiele als de bètaversies van deze browsers elke maand in mijn serie artikelen over nieuwe webplatformen .
Exclusieve tip: ondersteuning voor CSS- en UI-ontwikkelaars
Aangezien 2022 een spannend jaar is voor CSS-functies, vonden we het een goed moment om jullie een kijkje achter de schermen te geven. Ik sprak met Una Kravets, DevRel-leider voor Web UI en Devtools, en Nicole Sullivan , onze productmanager voor Web UI die zich richt op CSS- en HTML-API's, over Chrome's traject om UI-ontwikkelaars te ondersteunen.
Laten we met jullie beiden beginnen. Kun je ons wat meer over jezelf vertellen?
Nicole: Ik ben productmanager voor Web UI in Chrome. Ik focus me specifiek op nieuwe CSS- en HTML-API's en op ontwikkelaars en ontwerpers die UI bouwen. Het is een spannend vakgebied met een aantal echt belangrijke API's die eraan komen, zoals Container Queries , Scope en (hopelijk!) Vertical Rhythm .
Una: Ik leid de DevRel-teams voor Web UI en DevTools. We richten ons op het ondersteunen van UI-engineers op het webplatform en zorgen ervoor dat ze over de tools beschikken die ze nodig hebben om succesvol te zijn. Dit omvat CSS API's en HTML-componenten, samen met DevTools-functies om actuele wijzigingen en feedback te bekijken.
De ondersteuning van Chrome voor UI-ontwikkelaars is de afgelopen jaren flink toegenomen. Waarom denk je dat het zo lang heeft geduurd? Wat waren de grootste uitdagingen?
Una: We moesten een aantal stappen zetten om aan te tonen hoe belangrijk dit werk was en waarom het prioriteit moest krijgen. We begonnen met de MDN DNA-enquête in 2019 , die de gebruikersinterface (UI) identificeerde als een van de grootste pijnpunten op het platform. Sindsdien zijn we data blijven gebruiken als leidraad, zowel via de MDN-enquête als via onze eigen interne enquêtes naar de tevredenheid van ontwikkelaars. Het resultaat hiervan is dat we meer draagvlak binnen het management hebben gekregen en prioriteit hebben kunnen geven aan de ontwikkeling van enkele van de meest gevraagde functies voor ontwikkelaars op het gebied van de gebruikersinterface. Deze functies vormen ook de kern van initiatieven zoals Compat 2021 en Interop 2022 .
Nicole: Naast het verkrijgen van steun van het management, moesten we ook de juiste manier vinden om deze API's bij de ontwikkelaars te krijgen. Toen ik net bij Chrome kwam werken, ging dat mis in een project genaamd Layered APIs (of LAPIs). LAPIs was bedoeld om ontwikkelaars een kant-en-klare componentervaring te bieden. Ik vind nog steeds dat dit een geweldig doel was, maar we hebben veel fouten gemaakt! We richtten ons eerst op Toast Notifications en een Virtual List . Toasts zijn bijna onmogelijk toegankelijk te maken en een Virtual List is een van de moeilijkste componenten om goed te implementeren. Onze intenties waren goed, maar het hielp de ontwikkelaars niet, dus hebben we het project stopgezet. Het is moeilijk om op de harde manier te leren, maar elke fout draagt bij aan de heropleving van CSS en HTML die nu gaande is.
Laten we het eens wat uitgebreider hebben over LAPI's. Wat is daar gebeurd?
Nicole: Voor LAPI's wisten we dat het web een kant-en-klare componentontwikkelaarservaring nodig had die dichter bij het bouwen van native UI lag. En het was duidelijk dat het opnieuw uitvinden van het wiel ontwikkelaars tegenhield. Ik kan niet tellen hoeveel tabbladen ik in mijn carrière heb gebouwd! We probeerden dat op te lossen door JavaScript met de browser mee te leveren, wat erg moeilijk was. Niemand had ooit eerder JavaScript in de browser meegeleverd, en het was niet duidelijk hoe het moest samenwerken met de C++-code die de rendering-engine van de browser aandrijft. We hebben geluisterd naar andere browserleveranciers (bedankt, Mozilla!) en zijn van die aanpak afgestapt, waardoor we met Open UI iets veel beters hebben kunnen vinden. Door ons te richten op HTML en CSS krijgen we flexibele, declaratieve oplossingen. Omdat het declaratief is, kunnen we toegankelijkheid inbouwen op een manier die met JavaScript niet zo gemakkelijk zou zijn geweest. Ik ben erg enthousiast over de richting die dit opgaat. We werken aan de ondersteuning van selectmenu's, pop-ups, tooltips, navigatie, accordions, tabbladen, carrousels en toggles, die essentiële UI-ontwerppatronen zijn.
We hebben dus veel geleerd. En ik weet dat er ook andere initiatieven op dit gebied waren, zoals CSS Houdini . Wat is het verhaal daarachter?
Una: Ja, CSS Houdini is ook een gebied waar we veel van de community hebben geleerd. Houdini heeft enorm veel nuttige functies , maar veel daarvan waren te laag niveau om breder geaccepteerd en ondersteund te worden. We realiseerden ons dat het implementeren van API's op laag niveau de frictie voor ontwikkelaars niet per se verminderde. In plaats daarvan heeft de focus op oplossingen en behoeften op een hoger niveau ons geholpen om cross-browserondersteuning te krijgen en de nodige stappen te zetten om vooruitgang te boeken in het ecosysteem. We volgen de voortgang momenteel op https://ishoudinireadyyet.com/ .
Over cross-browserondersteuning gesproken: initiatieven zoals Interop 2022 en Open UI lijken aanzienlijke positieve resultaten op te leveren voor de community. Wat hoor je hierover van ontwikkelaars?
Una: Een van de grootste pijnpunten die we van ontwikkelaars horen, is "ervoor zorgen dat het ontwerp in alle browsers hetzelfde werkt". We hebben dit aangepakt door samen te werken met andere browserleveranciers om prioriteit te geven aan en een aantal van de meest gevraagde ontwikkelaarsfuncties te implementeren. En de feedback die we van de community hebben ontvangen, is overweldigend positief. Bovendien is het dankzij een grote herstructurering genaamd RenderingNG mogelijk geworden om sommige van deze functies veel beter te implementeren. Ontwikkelaars zijn enthousiast dat er eindelijk aan deze langverwachte functies, waar ze al jaren om vragen, wordt gewerkt en dat ze nu in alle browsers beschikbaar komen.
Nicole: De opwinding in de gemeenschap is voelbaar. Je kunt het zien op Twitter . :)
Samenwerking met het ecosysteem is cruciaal gebleken voor al het succes dat we hebben geboekt om het leven van ontwikkelaars gemakkelijker te maken. Ik weet dat uw team daar veel werk in heeft gestoken. Kunt u daar wat meer over vertellen?
Nicole: Ten eerste ben ik voortdurend onder de indruk van de projecten die ontwikkelaars op het web bouwen. Van de kleinste bibliotheek tot complete frameworks, ontwikkelaars creëren fantastische dingen. Het is een geweldige gemeenschap van makers. En Chrome neemt een aantal stappen om beter verbonden te zijn met deze projecten.
Een paar jaar geleden zijn we bijvoorbeeld begonnen met JavaScript-frameworks zoals React en Angular. En metaframeworks, zoals Next, Nuxt en Gatsby. Vorig jaar zijn we hetzelfde gaan doen met UI-tools en frameworks zoals Sass, Bootstrap en Material. Ik hoop dat we volgend jaar kunnen samenwerken met GreenSock en andere tools die het leven van ontwikkelaars makkelijker maken. Ik zag Cassie Evans van GreenSock spreken op de Smashing Conference en dat heeft me erg enthousiast gemaakt om met mensen in de animatiesector samen te werken.
Waar zien we dan de grootste kansen voor het ecosysteem van web-UI's?
Una: Wat grote kansen betreft, heb ik het gevoel dat we nog maar aan het begin staan van wat er mogelijk is op het gebied van aanpasbare webervaringen. Nieuwe API's zoals containerqueries en de CSS- mediafuncties voor gebruikersvoorkeuren herdefiniëren de manier waarop ontwikkelaars naar responsief design kijken. Ik ben ook enthousiast over de samenwerkingsmogelijkheden die ontwikkelaars en ontwerpers in staat stellen om in harmonie te werken met de gebruikers die hun websites bezoeken.
En Nicole, wat zijn de volgende stappen voor jouw team?
Nicole: Niet alle ontdekkingen leiden tot iets waar je een relatie mee kunt beginnen, maar er zijn momenteel wel veel dingen waar ik erg enthousiast over ben:
Una raakte het eerste punt aan: we maken responsief, componentgebaseerd ontwerp mogelijk. Dit omvat tools voor het ontwerpen van kleursystemen, zodat ontwerpers kunnen inspelen op gebruikersvoorkeuren zoals de donkere modus. De OKLCH- kleurruimte zorgt er bijvoorbeeld voor dat de helderheid consistent blijft over alle tinten. Ontwerpers kunnen zich niet langer beperken tot het kiezen van kleuren, maar direct de relaties tussen kleuren ontwerpen, zonder dat de kleurenpaletten er rommelig uitzien!
We werken ook aan een aantal van de meest gevraagde API's, zoals containerquery's , cascade-lagen , parent-selectors ( :has ), scoped styles en nesting . Ontwikkelaars hebben deze nodig om flexibele ontwerpsystemen te kunnen bouwen vol herbruikbare componenten.
Scroll-geactiveerde animaties zijn ook een leuk gebied. Ik vind de demo van Steve Gardner erg mooi. Hij heeft supervloeiend scrollen en coole vliegtuiganimaties die geactiveerd worden bij het scrollen. Hoewel dit leuk is, kan het lastig zijn om het goed te krijgen, vooral met het oog op toegankelijkheid. Daarom voeren we momenteel gebruikerstests uit om de toegankelijkheid van deze functie te testen.
Waar ik persoonlijk het meest enthousiast over ben, zijn ingebouwde web-UI-elementen. Ontwikkelaars bouwen steeds dezelfde tabset opnieuw, en ik denk dat de browser hierbij kan helpen. Bij Open UI werken we aan componenten zoals selectmenu, popup, tooltip, tabs, nav, accordion en toggle. We onderzoeken hoe we toegankelijkheid in deze browserprimitieven kunnen integreren, zodat het web na verloop van tijd standaard toegankelijk wordt. Ontwikkelaars kunnen zich dan richten op de complexere en meer genuanceerde problemen, terwijl de browser de basisfunctionaliteiten, zoals hoe tabs werken, kan afhandelen. Dit verdient waarschijnlijk een eigen blogpost, dus ik stop hier voor nu!
Tot slot blijven we investeren in interoperabiliteit tussen browsers. Het was fantastisch om met de mensen van WebKit en Gecko samen te werken om de ontwikkelaarservaring consistent te maken. We hebben de ontwikkelaars duidelijk gehoord: ze willen dit!
Oh, en mocht je het nog niet gezien hebben: de Shared Element Transitions API van het Seamless Web-team gaat de manier waarop mensen ontwerpen voor het web veranderen. Al die subtiele overgangen waarmee ontwerpers hun ontwerpen in de fysieke ruimte kunnen oriënteren, worden niet alleen mogelijk, maar ook eenvoudig. Jake Archibald heeft een geweldige demo .
Als de standaarden goed uitpakken, zouden we dit jaar zelfs verticale ritmes kunnen overwegen! We kunnen voortbouwen op LayoutNG, wat zoveel nieuwe mogelijkheden biedt.
Dank jullie wel. Ik weet zeker dat de hele community, net als wij, enthousiast is over het hernieuwde tempo van verbeteringen en nieuwe functies voor de webinterface. Er valt nog veel te leren, dus waar zou je aanraden om te beginnen?
Una: Onze sessie 'Wat is er nieuw voor het webplatform' op I/O behandelt de hoogtepunten van veel van de functies die dit jaar worden uitgebracht. Adam Argyle heeft ook een geweldig artikel geschreven over alle nieuwe en aankomende CSS-releases. Ik zou me voorlopig richten op stabiele releases en de andere werkzaamheden die eraan komen in de gaten houden. Jullie fantastische serie 'Nieuw op het webplatform' is daarvoor een aanrader. Door je te abonneren op de web.dev-nieuwsbrief ontvang je deze content ook in de inbox van ontwikkelaars. En voor ontwikkelaars die willen meedoen en helpen met dit alles, is lid worden van Open UI een van de beste manieren om dit werk te ondersteunen.
Belangrijke aankomende updates
We zetten onze traditie voort om u tijdig te informeren over een aanstaande wijziging waarmee u rekening moet houden bij het ontwikkelen van uw webapplicaties.
Beperk de maximale leeftijd van cookies tot 400 dagen.
- De update: Wanneer cookies worden ingesteld met een expliciet
Expires/Max-Age-attribuut, wordt de waarde nu beperkt tot maximaal 400 dagen in de toekomst. Voorheen was er geen limiet en konden cookies duizenden jaren in de toekomst verlopen. Het doel van deze limiet is om een balans te vinden tussen gangbare gebruikspatronen en respect voor de privacy van gebruikers. Elke site die vaker dan eens per 400 dagen wordt bezocht, kan cookies vernieuwen om de continuïteit van de dienstverlening te waarborgen en gebruikers kunnen erop vertrouwen dat cookies niet duizenden jaren ongebruikt in hun browser blijven staan. - Geschatte tijdlijn: Beschikbaar in Chrome 104 (stabiel op 2 augustus 2022).
- Oproep aan ontwikkelaars: Ontwikkelaars moeten mogelijk vaker dan voorheen cookies proactief vernieuwen wanneer gebruikers hun websites bezoeken. Anders kunnen gebruikers 400 dagen nadat de cookie voor het eerst is ingesteld, worden uitgelogd.
Ik hoop dat je deze editie van de Chrome Dev Insider met plezier hebt gelezen. Mocht je hem gemist hebben, dan vind je hier de eerste . We kijken ernaar uit om je in het volgende kwartaal meer te bieden.
Laat ons tot die tijd weten wat je van deze editie van de Chrome Dev Insider vindt en wat we kunnen doen om deze te verbeteren.
Wat vond je van deze editie van The Chrome Dev Insider? Deel je feedback .