Gepubliceerd: 21 oktober 2024
Vorige week hebben we een geheel nieuw paneel in DevTools geïntroduceerd: AI-assistentie kan u helpen stijlproblemen met Gemini rechtstreeks in DevTools op te lossen.
Benieuwd wat het kan doen? Bekijk deze 5 geweldige manieren waarop deze nieuwe functie het opmaken van uw pagina eenvoudiger kan maken: van het begrijpen van lay-outs tot het repareren van vliegtuigen .
1. Begrijp lay-outs
Bij het bouwen van websites begin je niet altijd vanaf nul. Vaak genoeg moet je voortbouwen op bestaande code waar je geen voorkennis van hebt - en in het ergste geval heeft niemand om je heen dat ook.
Vraag AI naar de lay-out van een element en begrijp waarom het wordt weergegeven zoals het is, tot aan het laatste knooppunt - en waarom deze overflow: hidden; op een element is er eigenlijk met een reden. 👀
Prompt om te proberen
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Paarprogrammering
CSS is inmiddels echt krachtig geworden. Met zoveel mogelijkheden is het geen probleem om soms in de war te raken: zijn het align-items die ik nodig heb? Of justify-items ? Of liever: justify-self of align-content ?
Soms weet u echt wat u wilt doen, maar kunt u gewoon niet de juiste set CSS-eigenschappen krijgen. De volgende keer dat u zich in deze situatie bevindt, legt u uw probleem uit aan AI, zodat deze de zaken voor u kan uitzoeken.
AI-assistentie onderzoekt uw bestaande code en vergelijkt deze met wat u probeert te bereiken, waarbij de vereiste oplossingen worden voorgesteld die u kunt beoordelen, toepassen en kopiëren naar uw codebase.
3. Adviseur bereikbaarheid
Het is belangrijk om uw website toegankelijk en gebruiksvriendelijk te maken met ondersteunende technologie. Overweeg toegankelijkheid vanaf het begin van de ontwikkeling, in plaats van als een bijzaak, en probeer de Web Content Accessibility Guidelines (WCAG) tijdens uw ontwikkelingsproces te volgen.
Gebruik AI-hulp om tips te krijgen over waar een <div> kan worden vervangen door een meer semantisch HTML-element, hoe een extra aria-* attribuut nuttig kan zijn, of hoe het kleurcontrast kan worden verbeterd.
Prompt om te proberen
What about color contrast in this element?
4. Maak het van jou
Trends komen en gaan: er waren kleurverlopen, schaduwen en harde randen, gevolgd door platte ontwerpen, die het huidige designtijdperk binnengingen met felle neonkleuren op donkere achtergronden.
Maar is het soms niet vermoeiend hoe uniform dingen er op internet uit kunnen zien? Als het zo'n dag voor je is, vraag dan misschien AI-hulp om de boel een beetje te veranderen en het internet weer wat leuker te maken, zoals tijdens een ritje in een pretpark!
Prompt om te proberen
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Word vliegtuigmonteur
Stylingproblemen uitleggen, helpen deze op te lossen, adviseren over toegankelijkheid en het veranderen van bestaande stijlen - er is al een heleboel waarmee AI-hulp je kan ondersteunen - en er is nog meer! Kun je geloven dat AI-hulp je zelfs helpt vliegtuigen te repareren? Geen eerdere ervaring vereist, trek je overall aan en maak je handen vuil in de Chrome DevTools Hangar !
En zorg ervoor dat u ons uw eigen ervaringen laat weten in onze publieke issue tracker !