Powrót do strony głównej

Przegląd frontendu: AI, CSS, bezpieczeństwo 2026

Przegląd obejmuje zagrożenia GlassWorm w npm, poglądy ekspertów na orkiestrację AI, CSS Anchor Positioning i aktualizacje przeglądarek. Szczegółowo o reaktywności, a11y i narzędziach dla React/Vue/Angular. Przydatny dla middle/senior deweloperów.

Cotygodniowy frontend: od GlassWorm do orkiestr AI
Advertisement 728x90

Frontend i AI: kluczowe aktualizacje, zagrożenia i narzędzia z tygodnia

Deweloperzy Next.js skorzystają z playlisty do debugowania z Sentry: zestaw lekcji obejmuje wyszukiwanie i naprawę błędów w czasie rzeczywistym. Rachel Andrew, z doświadczeniem w tworzeniu stron od 1996 roku, podkreśla: LLM to narzędzie do drobnych poprawek dokumentacji lub wstępnego przetwarzania dużych zbiorów danych, ale wymaga weryfikacji przez człowieka. Eddie Osmani analizuje ewolucję od synchronicznych agentów AI do asynchronicznych zespołów: subagenci z równoległym uruchamianiem, Agent Teams z wymianą peer-to-peer oraz narzędzia takie jak Conductor czy Claude Code Web. Wąskim gardłem jest weryfikacja — bez bramek i przeglądów ryzyko rośnie.

Testowanie Nemotron-Cascade-2-30B na NUC z RTX 3090 przez vLLM (kwantyzacja AWQ, FP8 dla pamięci podręcznej KV) pokazuje zalety Mamba + MoE: prędkość z MoE, długi kontekst bez kwadratowego wzrostu pamięci. Qwen 3.5-35B nie przeszła testów prędkości/jakości.

Zagrożenia bezpieczeństwa w ekosystemie

Kampania GlassWorm dotknęła 151 repozytoriów GitHub, pakietów npm i rozszerzeń VS Code. Ładunek ukryty w selektorach wariacji Unicode (0xFE00–0xFE0F) — niewidoczny w edytorach, wykonywany przez eval() do kradzieży tokenów. Atak ewoluował: nadużycie extensionPack i extensionDependencies. Zalecenia:

Google AdInline article slot
  • Sprawdź lockfile pod kątem skompromitowanych pakietów.
  • Usuń nieużywane zależności.
  • Zaostrz wersje w package.json.
  • Przejrzyj ponownie rozszerzenia VS Code.
  • Ogranicz sekrety w CI/CD.

Nowości CSS i ekosystemu React

CSS Anchor Positioning od Temani Afif: łączenie elementów strzałką bez JS. Sztuczka — inset: min(anchor(--c1 inside), anchor(--c2 inside)) dla prostokąta, clip-path, round() i atan2() dla kąta, @container dla kolizji.

W React: Storybook MCP daje AI dostęp do props i stories do generowania kodu/testów. React Joyride — biblioteka oparta na hookach do tworzenia przewodników: podświetlanie, kroki, wyjaśnienia. data-testid krytykowany jako oznaka słabej dostępności — przejdź na selektory oparte na rolach.

Sygnaty w Solid/Vue: algorytm push-pull zapewnia reaktywność bez zbędnych aktualizacji.

Google AdInline article slot

Vue, Angular i aktualizacje przeglądarek

Dla Vue w produkcji bez Devtools: niestandardowe rozszerzenie przeglądarki. Odczyt/zmiana props, Pinia store (actions/getters), mockowanie żądań sieciowych.

Angular: Signality rozszerza Signals o narzędzia oparte na reaktywności pull-based i DI.

Chrome 147: Element.startViewTransition() dla przejść w zakresie — równoległość, zagnieżdżanie, poprawka dla position: fixed. Safari TP 240: revert-rule w CSS, układ subpikselowy, szerokie atrybuty DOM. Podsumowanie marca: animacje wyzwalane przewijaniem w Chrome 146 (wątek roboczy), zapytania kontenerowe bez warunków w Firefox/Safari.

Google AdInline article slot

A11y, UX i wskazówki kariery

ARIA dla projektantów: button vs link, dialog z pułapką fokusu, alert vs alertdialog, zakładki na strzałkach, landmarki. Test czcionek w Figma: zmienne dla skali 100–200% (WCAG 2.2 AA), auto layout obowiązkowy.

Dostępność bez budżetu: role (doradca, przemytnik), przepychanie pod SEO/refaktoryzacja. SEO w erze AI: potok semantyki i architektury.

Wywiad: mów na głos o architekturze kodu — odróżnia seniora od middle.

Co jest ważne

  • GlassWorm: ataki Unicode w npm/VS Code — pilny audyt zależności.
  • Agenci AI: od pojedynczych do orkiestracji, skupienie na weryfikacji.
  • CSS Anchor: natywne łączenie elementów bez JS.
  • Scoped view transitions w Chrome 147: elastyczność animacji.
  • Selektory oparte na rolach zamiast data-testid dla dostępności.

— Editorial Team

Advertisement 728x90

Czytaj dalej