Веб-стандарты. Страница 24

Что можно положить в CSS-переменную. Уилл Бойд показывает, какие различные значения может принимать кастомное свойство и для чего их можно применять.

https://codersblock.com/blog/what-can-you-put-in-a-css-variable/

Как в Discord реализовали клавиатурную навигацию по приложению. Джон Эгеланн делится опытом команды и рассказывает о сложностях и нюансах, возникающих при работе с фокусом.

https://blog.discord.com/how-discord-implemented-app-wide-keyboard-navigation-abf073fd71de

00:00:52 События
00:03:13 Отдельные трансформации
00:09:16 Firefox 84
00:16:16 Боль разработчиков
00:27:26 MDN на Гитхабе
00:37:04 Удивительные черновики CSS
00:50:15 Переполнение и недополнение
00:56:44 Способы центрирования
01:02:09 Залоченный вьюпорт

Выпуск №261. Ольга Алексашенко, Вадим Макеев и Никита Дубко про Трансформации, Firefox 84, боль, MDN, черновики CSS, переполнение, центрирование и вьюпорт.

Слушайте на Ютубе https://youtu.be/ZRWhAWQH7L8
Читайте на Медиуме https://medium.com/p/748b61d7b796

Команда React представила Zero-Bundle-Size Server Components и обёртки для удобного получения данных. Эти компоненты могут быть целиком отрендерены в HTML, что уменьшает размер бандлов, ускоряет загрузку и потребление ресурсов на клиенте.

https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

Индивидуальные свойства для CSS-трансформаций. Команда WebKit рассказала о свойствах translate, rotate и scale, которые появились в Safari TP 117 (а также в Firefox и Chrome Canary) и позволят удобнее менять или анимировать отдельные трансформации.

https://webkit.org/blog/11420/css-individual-transform-properties/

Опубликован первый рабочий черновик Screen Fold API, который позволит определять состояние новых устройств со сгибаемыми экранами. Добавится интерфейс ScreenFold и новые медиафичи screen-fold-posture и screen-fold-angle.

https://www.w3.org/TR/screen-fold/

MDN закончил переезд на Гитхаб. Главный редактор MDN Крис Миллс рассказал о новой платформе с кодовым именем Yari, которая позволит главному хранилищу знаний по веб-технологиям стать ближе к сообществу: маркдаун, пулреквесты, ишью и знакомый интерфейс.

https://hacks.mozilla.org/2020/12/welcome-yari-mdn-web-docs-has-a-new-platform/

GUI Challenges: центрирование в CSS. Второй эпизод серии Адама Аргайла про способы центрирования и их особенности.

Статья https://web.dev/centering-in-css/
Видео https://youtu.be/ncYzTvEMCyE
Код-лаб https://web.dev/codelab-centering-in-css/

Слайдер «До и После». Джозеф Вонг пошагово реализует на JS и CSS слайдер для сравнения изображений.

https://levelup.gitconnected.com/how-to-create-a-before-after-image-slider-with-css-and-js-a609d9ba77bf

Как переехать с Wordpress на Eleventy. Скотт Доусон показывает, как перевезти блог на статический генератор сайтов минимальными усилиями.

https://www.smashingmagazine.com/2020/12/wordpress-eleventy-static-site-generator/

Фронтенд-2021: тенденции, как мы их видим. Филипп Нехаев располагает тренды и технологии фронтенда на технологическом радаре в блоге Tinkoff на Хабре: JS, TS, Vue, Svelte, ML, BFF, DI и другие.

https://habr.com/p/533462/

Справляемся с коротким и длинным контентом в CSS. Ахмад Шадид предлагает способы решения ситуаций переполнения и недополнения элементов интерфейса.

https://ishadeed.com/article/css-short-long-content/

Новинки Firefox 84 в обзоре Криса Миллса: инспектор порядка фокуса на странице, поддержка сложных селекторов в :not, новый интерфейс PerformancePaintTiming, удаление AppCache, адреса localhost теперь считаются безопасными для удобства тестирования.

https://hacks.mozilla.org/2020/12/and-now-for-firefox-84/

00:02:32 События
00:09:07 Веб-альманах 2020
00:20:09 Safari TP и списки
00:28:23 Новинки PWA
00:42:42 EStimate лишний JS
00:53:23 Загрузка по заявке
01:01:41 Демки для Houdini
01:11:24 Squoosh 2 и CLI

Выпуск №260. Вадим Макеев, Никита Дубко и Максим Сальников про Веб-альманах 2020, Safari TP, PWA, EStimate, загрузка по заявке, Houdini, Squoosh 2 и CLI.

Слушайте на Ютубе https://youtu.be/3MFBaIwvLXI
Читайте на Медиуме https://medium.com/p/c8078d2a5545

Доступные ссылки-иконки. Хьюго Жирадель пишет React-компонент, позволяющий пользователям скринридеров комфортно пользоваться ссылками, которые визуально выглядят как иконки.

https://hugogiraudel.com/2020/12/10/accessible-icon-links/

Differential Serving — делаем свой код чище и производительнее. Елена Жукова показывает, как отдавать устаревшим и современным браузерам разные версии JS-бандлов для оптимизации производительности.

https://habr.com/p/531404/