Front-end Digest № 148: агентна оптимізація сайту, UI без брейкпоінтів та ES2026 вже тут
Привіт, колеги. Мене звати Олександр, я займаюся фронтендом в компанії Zfort Group. Маю для вас свіжий дайджест з цікавими матеріалами зі світу фронтенду за останній тиждень.
Веб-розробка
• Cloudflare представляє Agent Readiness score. Чи ваш сайт готовий до роботи з агентами?
• HTMX 4.0: Гіпермедіа виходить на новий рівень
• Березневий дайджест Baseline за березень 2026 року
• Чому штучний інтелект не справляється з фронтендом
• Створення блогу в TanStack (Частина 1 з 2)
• Представляємо masonry-gridlanes-wc: веб-компонент Masonry, розроблений з орієнтацією на нативні технології
• Як зробити ваш сайт помітним для LLMs: 6 методів, що працюють, і 8, що не працюють
• Інтерфейс, створений за допомогою штучного інтелекту, за замовчуванням є недоступним
CSS
• Створення UI без брейкпоінтів
• Підтримка функцій сучасного CSS для Shadow DOM
• Ефекти пружності в CSS
• CSS: Текстовий ефект з кількома контурами (Multi-stroke)
• Сплющення й розтягнення: невеличкий секрет, що робить анімацію живою
• Ігри CSS: 4Connect
• CSS Breakpoint Units: проєктуйте в пікселях та отримайте плавний UX безкоштовно, автоматично вирішуючи дві найдавніші проблеми доступності.
JavaScript
• tanstack: React Server Components на ваш смак
• Неможливо скасувати JavaScript promise (хоча іноді це все-таки можливо)
• ES2026 вже тут: функції JavaScript, які справді змінять ваш підхід до написання коду
• Чому я більше не використовую ланцюжки в JavaScript
- React
• Як тестувати доступність у React-застосунках для різних локалей.
• Отже, ви хочете модальне вікно в React, яке використовує елемент <dialog> та анімується при появі І зникненні?
• Коли слід винести логіку API за межі Next.js
• Astro проти Next.js: коли SSG виграє у React для контентних сайтів
• Як вбудувати безпечний переглядач PDF безпосередньо в React: без завантажень та з повним контролем.
Меми
3 коментарі
Додати коментар Підписатись на коментаріВідписатись від коментарівЕх, ось би у нас був якийсь формат розмітки інформації, який би дозволяв виділити різні дані і був би машиночітабельним... ми могли б назвати його, наприклад, Hypertext Markup Language. Він міг би бутиXML-like, щоб LMM було зручно парсить його. А уявіть, якби ми могли писати сайти безпосередньо на ньому! Адже тоді AI міг би навіть взаємодіяти із нашими сайтами у форматі, який він розуміє!
Ми могли б назвати такий формат — HTML, що думаєте?
Правильніше назвати «Чому AI тяжко з CSS». Там у статті лише про CSS. З JS/TS (що зараз називається фронтендом) саме AI справляється непогано. Причини прості:
1) в js результат можна «прогнати в голові»:
функція поверне X, компонент відрендерить Y, помилка мать його такі викличе помилку — код не буде працювати.
2) для js написано багато непоганого коду
3) у js зазвичай є один правильний/кращий/рекомендований спосіб зробити щось
Для моделі це ідеально: вона вгадує патерн — він майже завжди валідний.
А css:
4) css декларативний, а не імперативний, тут описується «як має вийде», а не «ось тобі кроки, зроби їх»
5) в css результат залежить від: DOM-структури, css-архітектури, каскаду, специфічності, порядку підключення, браузера, etc.
У JS конкретна функція майже завжди поверне очікуваний результат (функція залежить від аргументів, компонент від props/state, можна ізольовано згенерувати щось), а в css — ні, тут дуже багато що може впливати, AI генерує шматок коду, але не бачить всієї системи — в резултаті — помилки. І Copilot тут мало допомагає, навіть на хорошому структурованому коді, AI все одно не має можливості «побачити», і таким чином перевірити — «а що вона робить?» Тк результат — візуальний, а не респонс.
Один і той же CSS: може працювати/може не працювати/може ламати щось в іншому місці, і модель цього не бачить.
6) Останні 10 років стало набагато менше статей про гарний та правильний css, це була дуже вузька та мало кому цікава тема. А те, що написано 15 років тому — вже дуже застаріло. LMM мало є інфи на чому вчиться.
Власне про все це і написано в статті.
Згоден, але з нюансами. По дефолту CSS генерується такий собі. Але, якщо правильно зробити промпт, надати додатковий контекст посиланнями на статті та приклади, також надати доступ до браузерного mcp, щоб модель бачила, то починається зовсім інша пісня. Зараз я зазвичай насолоджуюсь фактом, що через оці усі дайджести у мене мільйон референсів та розуміння, який контекст надати і куди модельку спрямувати.