Добавление Vite в веб-приложение. Адам Ракис показывает, как мигрировать существующий Webpack-проект на сборку при помощи Vite.

https://css-tricks.com/adding-vite-to-your-existing-web-app/

Место для таблиц. Мартин Дауден показывает, когда полезно использовать таблицы в вёрстке и как сделать их доступными и адаптивными.

https://andromedagalactic.com/blog/tables-have-their-place

Коробка-переключатель на чистом CSS. Джей Томпкинс создаёт настраиваемую 3D-анимацию упаковки и распаковки картонной коробки по клику.

https://css-tricks.com/how-to-make-a-pure-css-3d-package-toggle/

Стартовал опрос State of JavaScript 2021, который поможет разобраться в интересах, предпочтениях, инструментах и самом устройстве JS-сообщества.

https://app.stateofjs.com/survey/state-of-js/2021

Булевые атрибуты в HTML и ARIA. Хидде де Врис сравнивает, как обрабатываются значения true и false в HTML и ARIA, и объясняет разницу.

https://hiddedevries.nl/en/blog/2022-01-12-boolean-attributes-in-html-and-aria-whats-the-difference

Новинки Firefox 96: поддержка CSS-свойства color-scheme для элементов, значение reversed() свойства counter-reset для обратных CSS-счётчиков, поддержка Web Locks API, экспорт содержимого канваса в формате WebP и другие.

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96

Выпуск №317: Никита Дубко, Андрей Мелихов, Юля Миоцен, Вадим Макеев про Firefox 96, State of JS, вариативные шрифты и Figma, CSS Tools, CodePen, CSS-парсер на Rust, Eleventy 1.0 и Metho.

Слушайте на Ютубе https://youtu.be/bTUsv5X_hYk
Ссылки на сайте https://web-standards.ru/podcast/317/
Обложка на CSS https://codepen.io/miocene/full/ed97acb82ea44d93bf13a68371c74bbe

00:01:04 События
00:02:35 Firefox 96
00:12:31 Лисичка, не кашляй
00:18:16 State of JS
00:22:08 Утечка из опроса
00:27:12 Вариативные шрифты и Figma
00:35:37 CSS Tools
00:42:40 Топ CodePen
00:50:45 CSS-парсер на Rust
00:57:02 Eleventy 1.0
01:07:31 Metho?

Минорное обновление библиотеки mini-css-extract-plugin до версии 2.5.0 привело к поломке множества приложений. В том числе затронут Create React App. Временное решение — откатить библиотеку на версию 2.4.5.

https://www.bleepingcomputer.com/news/security/npm-dependency-is-breaking-some-react-apps-today-heres-the-fix/

Самые любимые из 2021. Топ-100 демок с сервиса Codepen, которые получили наибольшее количество лайков в 2021 году.

https://codepen.io/2021/popular/pens/

Публикация и использование ES-модулей через пакеты. Аксель Раушмайер объясняет, как поставлять и использовать пакеты с помощью спецификаторов модулей в Node.js, Deno и браузерах.

https://2ality.com/2022/01/esm-specifiers.html

Онлайн-курс про цифровую доступность для разработчиков, исследователей и дизайнеров пройдёт 12 февраля—20 марта В программе: теория доступной разработки, применение знаний на практике и тестирование работ вместе с незрячими людьми.

https://accessibilityunity.com/

Компания FingerprintJS рассказала про ошибку WebKit в реализации IndexedDB, которая позволяет отслеживать поведение пользователей между сайтами. Ошибка известна с 25 ноября и затрагивает не только Safari, но и все браузеры на iOS, даже в приватном режиме.

https://fingerprintjs.com/blog/indexeddb-api-browser-vulnerability-safari-15/

Каскадные слои в CSS за 5 минут. Юна Кравец рассказывает о новых CSS-примитивах @​layer и layer(), которые появятся в Chromium 99+, Firefox 97+ и уже доступны в Safari TP.

https://youtu.be/ilrPpSQJb3U

Лабиринт доступности. Игра, показывающая возможные барьеры, с которыми сталкиваются некоторые люди, когда пытаются получить контент в вебе.

https://de.ryerson.ca/games/accessibility/

Выходим за рамки и взрываем звёзды с border-image и градиентами. Илья Стрельцын показывает, как при помощи свойства border-image создавать сложные фигуры, выходящие за границы элемента.

https://css-live.ru/tricks/border-image-gradients-sorcery.html

Создание UI-компонентов на CSS и SVG. Ахмад Шадид делится примерами, когда одновременное использование SVG вместе с HTML и CSS позволяет создавать интересные UI-компоненты.

https://ishadeed.com/article/building-components-svg-css/

Современная гибкая типографика. Адриан Бис исследует принципы и лучшие практики адаптивной типографики и реализует их при помощи CSS-функции clamp().

https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/

Vue 3 станет версией по умолчанию с 7 февраля 2022. Эван Ю с подробностями о переключении версии и возможных необходимых действиях.

https://blog.vuejs.org/posts/vue-3-as-the-new-default.html

Валидация форм при помощи Constraint Validation API. Крэйг Баклер показывает способы валидировать пользовательский ввод в HTML, CSS и JavaScript.

https://blog.openreplay.com/form-validation-using-javascript-s-constraint-validation-api