5 ciekawych rzeczy, które możesz zrobić z pomocą AI w Narzędziach deweloperskich

Matthias Rohmer
Matthias Rohmer

Data publikacji: 21 października 2024 r.

W zeszłym tygodniu wprowadziliśmy w Narzędziach deweloperskich zupełnie nowy panel: pomoc AI, która może pomóc Ci w rozwiązywaniu problemów ze stylami za pomocą Gemini bezpośrednio w Narzędziach deweloperskich.

Chcesz się dowiedzieć, co potrafi? Poznaj 5 sposobów, w jakie nowa funkcja może ułatwić stylizację strony – od rozumienia układów po poprawianie błędów.

Nagranie ekranu pokazujące, jak pomoc AI pomaga we wdrożeniu efektu zaznaczenia za pomocą animacji CSS

1. Informacje o układach

Tworząc witryny, nie zawsze zaczynasz od zera. Często trzeba oprzeć się na istniejącym kodzie, którego nie znasz. W najgorszym przypadku nikt wokół Ciebie też go nie zna.

Zapytaj AI o rozmieszczenie elementu i dowiedz się, dlaczego jest on wyświetlany w taki sposób aż do ostatniego węzła – oraz dlaczego ten element overflow: hidden; jest tam widoczny. 👀

Prompt to try

Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.

2. Programowanie par

Usługi porównywania cen zyskały już ogromną popularność. Jest tak wiele możliwości, że można się czasem pomylić. Czyżby to align-items było mi potrzebne? A może justify-items? A może justify-self lub align-content?

Czasem naprawdę wiesz, co chcesz zrobić, ale nie masz odpowiedniego zestawu właściwości CSS. Gdy następnym razem znajdziesz się w takiej sytuacji, wyjaśnij problem AI i pozwól jej rozwiązać problem.

Pomoc AI sprawdzi istniejący kod i porówna go z tym, co próbujesz osiągnąć. Zaproponuje niezbędne poprawki, które możesz sprawdzić, zastosować i skopiować do kodu źródłowego.

3. Doradca ds. ułatwień dostępu

Zadbaj o to, by Twoja witryna była dostępna i łatwa w obsłudze dzięki technologii wspomagających osoby z niepełnosprawnością. Zadbaj o dostępność już na początku procesu tworzenia, a nie dopiero na końcu. Pamiętaj też, aby w trakcie całego procesu tworzenia stosować wytyczne dotyczące dostępności treści internetowych (WCAG).

Korzystając z pomocy AI, możesz uzyskać wskazówki dotyczące tego, gdzie element <div> można zastąpić bardziej semantycznym elementem HTML, jak może być pomocny dodatkowy atrybut aria-* lub jak można poprawić kontrast kolorów.

Prompt to try

What about color contrast in this element?

4. Dodaj coś od siebie

Trendy przychodzą i odchodzą: były gradienty, cienie i ostre krawędzie, a potem płaski design, aż wreszcie nadszedł czas na współczesny design z jasnymi, neonowymi kolorami na ciemnym tle.

Przyciski zgodne z zaprojektowanymi w narzędziu Bootstrap w wersjach od 1 do 5.
Styl przycisku Bootstrap na przestrzeni lat, od wersji 1 do 5, od góry do dołu.

Czy nie jest czasem męczące, że wszystko w internecie wygląda tak samo? Jeśli masz jeden z takich dni, poproś o pomoc asystenta AI, aby urozmaicić sobie internet – tak jak w parku rozrywki.

Prompt to try

This element looks a little boring. Can you make it look like a pirates theme park ride?

5. Zostań mechanikiem statków powietrznych

Wyjaśnianie problemów ze stylem, pomoc w ich rozwiązywaniu, doradztwo w zakresie ułatwień dostępu i zmiana dotychczasowych stylów – jest już wiele, w czym może Ci pomóc AI, a nie tylko. Czy wiesz, że asystent AI pomaga nawet naprawiać samoloty? Nie wymagamy żadnego wcześniejszego doświadczenia. Zakładaj kombinezon i zacznij majsterkować w hangarze Narzędzi deweloperskich Chrome.

Hangar Narzędzi deweloperskich w Chrome – interaktywna przestrzeń do testowania funkcji AI Assistance.

Podziel się z nami swoimi wrażeniami w naszym publicznym narzędziu do zgłaszania błędów.