HTML-відео/аудіо ліниве завантаження тепер стандарт веб-стандартів
https://ift.tt/S9w8CxN
[таблиця зображень та тексту опублікована вище]
🚀 Frontend Focus
#736 — 8 квітня 2026 | Read on the web
Introducing view-transitions-toolkit: Utility Functions to More Easily Work with View Transitions — Bramus експериментує з View Transitions вже тривалий час. Він об’єднав свої численні кодові патерни в новий окремий пакет npm, повний утиліт, допоміжників та функцій для переходів між виглядами. Є купа демо тут, а також код на GitHub.
Bramus Van Damme (Google)
Announcing JetStream 3.0 — сім років після v2 виходить велике оновлення популярного кросбраузерного бенчмарку JS/WASM. Це спільна робота Mozilla, WebKit та Chromium, з оновленням навантажень та методології. Інструмент тут, а також більше деталей про проведений аналіз.
Free Workshop: Claude Code Deep Dive — 21 квітня — Лідія Хейллі з Anthropic проводить повноцінний одноденний майстер-клас Claude Code у Frontend Masters 21 квітня. Безкоштовно до участі. Потрібна передплата.
Як використовувати HTML-відео та аудіо: ліниве завантаження тепер є веб-стандартом. Воно з’явиться у Chrome 148, Firefox, WebKit реалізації близькі попереду. Ось як це працює.
Скотт Джіл (Squarespace)
The WebAIM Million 2026 Report — Цей аналіз доступності мільйона сайтів розчаровує: попри роки прогресу зараз спостерігаємо спад доступності в Інтернеті. Чому? Вони кажуть “підвищена залежність від сторонніх фреймворків і бібліотек та автоматизованих або штучно-асистованих практик кодування”.
WebAIM
IN BRIEF
– CSS або BS? — несподівано складна вікторина. Можете вгадати реальні властивості CSS серед підозрілих фальшивок?
– HTML у Canvas — пропозиція використати елементи canvas для налаштування відображення HTML.
– Cloudflare запустив EmDash — новий CMS на базі TypeScript для конкуру WordPress. Мати Мулленвег поділився своїми думками.
– другий щорічний опитування “Стан AI” зараз доступний — збирають відповіді щодо використання AI у веб-розробці.
– Запустіть власну ракету Artemis 2 — з трохи CSS та прокручуванням миші.
– Chrome Web Store має новий процес апеляцій для відхилених розширень.
Статті, думки та навчальні матеріали
Alternatives to the !important Keyword — Коли переглядаєте старий CSS, можете зустріти !important і забути, чому він був потрібен. Якщо хочете виправити таку заборгованість, ця публікація пропонує сучасні альтернативи.
CSS subgrid is Super Good — Макети на основі CMS часто хитрі, особливо коли намагаєшся «вийти» за встановлені ширини контейнерів. Дейв показує, як subgrid може спростити речі за допомогою ширини на всю ширину або вкладених компонентів без використання хаку для відступів чи зайвої обгортки.
What If Mobile Deploys Worked Like Web Deploys? — З OTA-поновленнями Expo вони працюють. Налаштовувати OTA оновлення можна за кілька хвилин і бачити їх у наступному запиті на підтвердження.
Email Address Obfuscation in HTML: What Works in 2026? — Тест чисельних технік, щоб побачити, які з них лякають ботів. Виявляється, більшість парсерів ліниві, але є кілька технік, варто уникати в 2026 році (використання HTML-символів та URL-кодування).
What to Know in JavaScript (2026 Edition) — Високорівневе огляд ландшафту JavaScript на сьогодні, включаючи огляд останніх доповнень мови, фреймворків, runtimes, інструментів збірки тощо.
Name-Only Containers: The Scoping We Needed — Кріс досліджує нове використання контейнерів лише за назвою як спосіб вирішити проблеми обмеження CSS природним способом. Звісно, у нашому арсеналі є @scope, але це цікава альтернативна підхід.
New CSS Multi-Column Layout Features in Chrome — Chrome 145 додає підтримку кількох нових можливостей обгортання стовпців: column-wrap та column-height. Це велике оновлення для багатоколоночних розкладень, тож ось огляд того, як їх можна використати.
👍 Making Emojis and Icons Screen Reader Accessible — Ель Слім далі обговорює доступність емодзі та піктограм екран‑читачам.
Screen Readers are Not Testing Tools — Ерик Еггерт
Tools, Code & Resources
Crashcat: A Physics Engine for JavaScript, Built for Games, Simulations, And Creative Websites — демо-сайт має багато вражаючих прикладів; бібліотека має широкий набір можливостей для ігор або фізичних симуляцій.
Add Seat-Limited Billing Plans To Your B2B App With Clerk — Clerk Billing підтримує обмеження по місцях. Визначайте ліміти за планом; Clerk забезпечує їх дотримання та автоматично пропонує оновлення.
Bearnie: Accessible Components for Astro and Tailwind CSS — Рекламований як спосіб почати власну бібліотеку компонентів, з можливістю повної настройки цих компонентів відповідно до WCAG 2.1 AA, включаючи клавіатурну навігацію, підтримку екранних читачів та управління фокусом. Docs site is here.
Dither Image: Web Tool to Add a Retro Pixel Art Effect to Images — Інструмент із перед/після, з різними налаштуваннями для визначення точного ефекту. Гарна швидка альтернатива складнішим графічним інструментам. Я випробував на знімку місії Artemis II.
SSGOI: Native App-Like Page Transitions for the Web — Обіцяє кращу підтримку браузера, ніж нативні переходи між сторінками, та доступний для React/Next, Vue/Nuxt, Svelte та Angular, з будь-якою системою маршрутизації.
Boneyard: Auto Generated Skeleton Loading Framework — Skeleton loading екрани у React та Svelte, точно під піксель UI.
SVGInject: Inject SVG Files Inline Into the DOM — Вбудовує SVG-файли безпосередньо в DOM під час виконання, стилізуйте за допомогою CSS.
Classifieds
Більшість інженерів не можуть довести, що вони AI-перші на інтерв’ю. CTO Gauntlet пояснює, що саме відрізняє тих, хто може.
Twilio SIGNAL повертається до Сан-Франциско в цьому травні. Якщо ви з місцевих, отримайте безкоштовний квиток розробника SIGNAL 2026, зараз (поки не розійшлись).
Освойте Visual Studio Code з більш ніж 150 корисними порадами в цьому посібнику з знімками екрана від Louis Lazaris.
Got some diagrams to draw? — Маєте діаграми? MonoSketch: онлайн-додаток для ASCII-скетчів та діаграм. Спробуйте тут.
Wiretext: A Unicode Wireframe Design Tool — Подібно до попереднього, але працює як типовий GUI-інструмент, результат — це Unicode, який можна копіювати/вставляти. Включено численні “компоненти”.
Ipx.
HI-FI News
via Frontend Focus
April 8, 2026 at 06:37PM
Hi-FI News перекладено з Frontend Focus.
Дата публікації: 8 квітня 2026 року, 18:37.
Примітка: Вищезазначений текст містить багато відомостей з веб-оновлень та назв. Частина назв продуктів та компаній збережена в оригінальній формі.
April 8, 2026 at 06:37PM
Залишити відповідь