Pierwsze kroki z przewodnikiem po nowoczesnych technologiach internetowych

Przewodnik po współczesnych technologiach internetowych to zestaw umiejętności, które pozwalają na bezpośrednie osadzanie w agentach kodujących wiedzy o platformie internetowej, sprawdzonych metod i danych dotyczących zgodności z przeglądarkami. Pomaga to odciągnąć agentów kodujących od starszych wzorców i skierować ich w stronę rozwiązań, które wykorzystują możliwości nowoczesnej platformy internetowej.

Instalacja

Przewodnik po współczesnych technologiach internetowych można zainstalować i używać z dowolnym agentem kodowania, który obsługuje umiejętności.

Zalecaną metodą instalacji jest użycie interfejsu wiersza poleceń modern-web-guidance utworzonego przez zespół Chrome. Zainstalowanie Przewodnika po współczesnych technologiach internetowych za pomocą interfejsu wiersza poleceń modern-web-guidance umożliwi automatyczne aktualizacje. Możesz zainstalować go z interfejsu wiersza poleceń modern-web-guidance w ten sposób:

npx modern-web-guidance@latest install

Jeśli tworzysz rozszerzenia do Chrome, zalecamy użycie tego polecenia:

npx modern-web-guidance@latest install --choose

Uruchomi się interaktywny kreator, który pomoże Ci zainstalować umiejętności zgodnie z Twoimi preferencjami.

Jeśli chcesz zainstalować Przewodnik po współczesnych technologiach internetowych bez użycia interfejsu wiersza poleceń modern-web-guidance, zapoznaj się z poniższymi instrukcjami dotyczącymi konkretnego agenta. Pamiętaj, że większość z tych opcji nie obsługuje automatycznych aktualizacji.

Antigravity

Pobierz Antigravity i włącz „modern-web-guidance” podczas instalacji lub na stronie Ustawienia w sekcji Dostosowania, a następnie Wtyczki Build with Google.

Antigravity CLI

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Interfejs wiersza poleceń Gemini

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

JetBrains WebStorm

Przewodnik po współczesnych technologiach internetowych znajdziesz w Menedżerze umiejętności, który jest dostępny w sekcji Ustawienia > Asystent AI > Umiejętności. Wybierz umiejętność, aby otworzyć stronę z informacjami o niej. Aby zainstalować umiejętność, kliknij przycisk Zainstaluj, aby zastosować ją do bieżącej instancji IDE.

interfejs wiersza poleceń GitHub,

gh skill install GoogleChrome/modern-web-guidance

npx skills

npx skills add GoogleChrome/modern-web-guidance

Claude Code

claude plugin install modern-web-guidance@claude-plugins-official

Interfejs wiersza poleceń Claude Code

Instalacja Przewodnika po współczesnych technologiach internetowych do użytku z interfejsem wiersza poleceń Claude Code obejmuje 3 kroki:

1. Dodaj platformę handlową:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Zainstaluj wtyczkę z Marketplace:

/plugin install modern-web-guidance@googlechrome

3. Ponownie załaduj wtyczki:

/reload-plugins

Codex

codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome

Interfejs wiersza poleceń Copilot

Instalacja Przewodnika po współczesnych technologiach internetowych do użytku z Copilotem wymaga wykonania 2 czynności:

1. Dodaj platformę handlową:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Zainstaluj wtyczkę z Marketplace:

/plugin install modern-web-guidance@googlechrome

Gęś

goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update

Grok

grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust

Kimi Code

/plugins install https://github.com/GoogleChrome/modern-web-guidance

Przeglądanie przed instalacją

Przed instalacją zapoznaj się z biblioteką przewodników po współczesnych technologiach internetowych, wyszukując je za pomocą zapytania lub pobierając według identyfikatora. Aby to zrobić, użyj polecenia search interfejsu wiersza poleceń, aby znaleźć identyfikator zgłoszenia za pomocą prompta:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

W terminalu pojawi się obiekt JSON:

[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]

Odczytując wartości description, możesz wybrać id, który najlepiej odzwierciedla Twój cel, i użyć polecenia retrieve:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

W tym przypadku w terminalu wyświetli się przewodnik Markdown dotyczący przypadku użycia animate-to-from-top-layer. W przypadku innych przewodników zastąp animate-to-from-top-layer dowolnym prawidłowym identyfikatorem przewodnika.

Dlaczego warto korzystać z Przewodnika po współczesnych technologiach internetowych?

Przewodnik po współczesnych technologiach internetowych zapewnia twórcom stron internetowych korzyści w porównaniu z modelami AI bez pomocy z 3 powodów:

  1. Agenty AI do kodowania zwykle domyślnie wybierają starsze, nieaktualne rozwiązania problemów związanych z nowoczesnym tworzeniem stron internetowych. Te rozwiązania często zawierają kod JavaScript, który zapewnia funkcje rozwiązujące problemy, które można lepiej rozwiązać za pomocą nowoczesnych interfejsów API CSS i HTML.
  2. Modele AI zwykle nie mają informacji o najnowszych funkcjach platformy internetowej lub mają nieprawidłowe informacje na ich temat.
  3. Modele AI mają też tendencję do generowania nieaktualnych rekomendacji, które nie uwzględniają wymagań projektu ani kryteriów obsługi przeglądarki, zamiast dostosowywać wskazówki do wymagań Baseline danego projektu.

Przewodnik po współczesnych technologiach internetowych rozwiązuje te problemy i zapewnia, że przepływ pracy związany z kodowaniem wspomaganym przez AI ma narzędzia, które pozwalają na wdrażanie nowszych funkcji platformy internetowej w pierwszej kolejności – z uwzględnieniem rozwiązań zastępczych.

Co zawiera Przewodnik po współczesnych technologiach internetowych?

Przewodnik po współczesnych technologiach internetowych zawiera sprawdzone metody dotyczące ponad 100 przypadków użycia w kilku podstawowych obszarach tworzenia stron internetowych. W tle działa umiejętność agenta, która instruuje agenta kodowania, jak wywołać interfejs wiersza poleceń modern-web-guidance, aby znaleźć i pobrać najlepsze wskazówki dotyczące Twojego przypadku użycia.

  • Wrażenia użytkownika: przejścia widoku, style CSS scrollbar-color oraz animacje wejścia i wyjścia.
  • CSS: zapytania o kontenery, nowoczesne przestrzenie barw, takie jak oklch, układ podsiatki CSS, text-wrap i przycinanie wysokości linii typografii.
  • Wydajność: diagnostyka interakcji do kolejnego wyrenderowania (INP), scheduler.yield do dzielenia długich zadań, planowanie zadań w tle i priorytetyzacja wczytywania obrazów.
  • Formularze: pola do wprowadzania danych z automatycznym dopasowywaniem rozmiaru (field-sizing: content) i dokładne style sprawdzania poprawności za pomocą :user-invalid.
  • Wbudowane komponenty interfejsu: bezpośrednia kontrola nad oknami, pozycjonowanie kotwicy CSS w przypadku etykietek i popover.
  • Ułatwienia dostępu: dostępne komunikaty o błędach i zarządzanie zaznaczeniem klawiatury.
  • Wbudowana AI: korzystaj z lokalnych modeli klienta na urządzeniu (natywne interfejsy API do wykrywania języka, podsumowywania i tłumaczenia).
  • Klucze dostępu: rejestracja, uwierzytelnianie i zarządzanie kluczami dostępu.

Oto kilka przewodników z każdej kategorii. Aby zobaczyć wszystkie przewodniki, możesz wyświetlić pełną listę przewodników.

Punkt odniesienia

Baseline zapewnia deweloperom przejrzystość w zakresie tego, które funkcje internetowe są interoperacyjne w głównych silnikach przeglądarek. Jeśli funkcja internetowa jest w Baseline, możesz mieć pewność, że jest zgodna z przeglądarkami. Funkcje internetowe dzielą się na 3 kategorie zdefiniowane przez Baseline:

  • Ograniczona dostępność oznacza, że funkcja nie jest interoperacyjna.
  • Nowo dostępne oznacza, że funkcja stała się interoperacyjna w ciągu ostatnich 30 miesięcy.
  • Szeroko dostępne oznacza, że funkcja jest interoperacyjna od co najmniej 30 miesięcy.

Chociaż Baseline to definicja interoperacyjności funkcji internetowych, jest to też konfigurowalny aspekt projektu. Możesz wybrać cel Baseline, a następnie skonfigurować projekt tak, aby go używał, dodając go do pliku AGENTS.md lub CLAUDE.md, na przykład:

This project's Baseline target is Baseline 2024.

<other project info...>

Przewodnik po współczesnych technologiach internetowych i funkcje zastępcze

Przewodnik po współczesnych technologiach internetowych korzysta z szerokiej gamy nowoczesnych funkcji internetowych. Niektóre z nich mogą być dostępne w ramach funkcji Baseline Newly lub Widely, ale niektóre mogą mieć ograniczoną dostępność. W przypadkach, gdy funkcja nie jest powszechnie dostępna, przewodniki po przypadkach użycia zawierają szczegółowe instrukcje, jak zapewnić szerszą zgodność w przeglądarkach, które nie obsługują tej funkcji. W wielu przypadkach kreacje zastępcze są wdrażane jako progresywne ulepszenia, dzięki czemu nowoczesne funkcje mogą być używane wszędzie tam, gdzie są obsługiwane. Jeśli w nieobsługiwanych przeglądarkach potrzebne są polyfille, agenci zawsze otrzymują instrukcje, aby wczytywać je warunkowo, tak aby koszty były ponoszone tylko wtedy, gdy jest to konieczne.

Jak zapewniana jest dokładność?

Każdy przypadek użycia w Przewodniku po współczesnych technologiach internetowych zawiera zestaw ocen, które są stale kalibrowane, aby zapewnić wysoką jakość wyników.

Oceny przypadków użycia uruchamiają automatyczny zestaw kontroli jakości, aby sprawdzić, czy agent działa prawidłowo. Kluczową rolę odgrywa w tym Playwright:

  1. W przypadku każdego przewodnika opracowywany jest skrypt Playwright, który sprawdza, czy zostały zastosowane szczegóły implementacji przewodnika, np. czy użyto @media (prefers-reduced-motion: reduce), gdy jest to wymagane.
  2. Te skrypty Playwright są stale kalibrowane pod kątem „prawidłowej” referencyjnej implementacji demonstracyjnej, która oczekuje 100% skuteczności. Z drugiej strony skrypty sprawdzają celowo wadliwą implementację, która powinna mieć 0% skuteczności.
  3. Jeśli „prawidłowa” lub celowo błędna implementacja nie osiągnie odpowiednio 100% i 0% wskaźnika powodzenia, generator automatycznie ponawia próbę, używając kontekstu, aż do osiągnięcia 100% kalibracji.
  4. Na koniec stosowane są kompleksowe oceny aplikacji podstawowej. Jedna z tych ocen jest niekierowana i stanowi grupę kontrolną. Wykorzystuje domyślne dane treningowe bez wywoływania Przewodnika po współczesnych technologiach internetowych do wykonania zadania. Inna ocena (eksperyment) dotyczy tego samego zadania, ale z wykorzystaniem Przewodnika po współczesnych technologiach internetowych.

Nasze oceny są przeprowadzane kilka razy w tygodniu przy użyciu najnowocześniejszych modeli i agentów kodujących, co daje nam jasny obraz tego, jak dobrze agenci radzą sobie z naszymi wskazówkami i bez nich. Wstępne wyniki pokazują, że gdy agenty są wyposażone w Przewodnik po współczesnych technologiach internetowych, przestrzeganie nowoczesnych sprawdzonych metod poprawia się średnio o 37 punktów procentowych. Wyniki mogą się jednak różnić w zależności od wymagań projektu, modelu, napisanych promptów i preferowanych narzędzi do kodowania agentowego.

Dalsze kroki

Teraz masz ogólny przegląd przewodnika po współczesnych technologiach internetowych i jego potencjału w zakresie ułatwiania wdrażania nowoczesnych sprawdzonych metod internetowych w przepływie pracy związanym z kodowaniem AI. Możesz teraz zapoznać się z przewodnikami dostępnymi w ramach Przewodnika po współczesnych technologiach internetowych.