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

Firefox и Яндекс.Браузер запретят использование куки-файлов для сторонних сайтов в свежих релизах браузеров, что усложнит трекинг пользователей. Firefox сделает ограниченное исключение для авторизации.

Mozilla https://blog.mozilla.org/security/2021/02/23/total-cookie-protection/
Яндекс https://zen.yandex.ru/media/yandexbrowser/60361f63084cc34524b766d0

Максимальная оптимизация загрузки изображений для веба в 2021 году. Мальте Убл разбирается с современными возможностями браузеров и техниками вставки изображений для максимальной скорости. В переводе на Хабре.

https://habr.com/p/543434/

Новинки Firefox 86 в обзоре Криса Миллса в блоге Mozilla Hacks: удобный испектор для фреймов, псевдокласс :autofill для полей форм, картинки в list-style-image, Intl.DisplayNames для локализации и экспериментальный image-set() в CSS.

https://hacks.mozilla.org/2021/02/a-fabulous-february-firefox-86/

До memo(). Дэн Абрамов показывает, как можно улучшить производительность React-компонентов, изолировав изменения состояний или переместив их ближе к отрисовке.

https://overreacted.io/before-you-memo/

Настройки качества кодирования AVIF и WebP. Мальте Убл подбирает такие настройки, чтобы изображения в форматах AVIF и WebP выглядели визуально не хуже, чем их фолбек на JPEG.

https://www.industrialempathy.com/posts/avif-webp-quality-settings/

Оптимизация видео по размеру и качеству. Дуг Силларс делится советами, как работать с видео на странице производительно и эффективно без заметного ухудшения его качества.

https://www.smashingmagazine.com/2021/02/optimizing-video-size-quality/

Tailwind CSS с нуля до продакшена. Скринкаст Саймона Врахлиотиса про TailwindCSS: настройка, подход utility-first, адаптивность, состояния компонентов, композиция, переиспользуемость, кастомизация и оптимизации для продакшена.

https://youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0

00:02:45 События
00:07:34 Инспектор флексов
00:09:32 Vite 2.0
00:16:36 SVGO 2.0
00:24:11 Wakamai Fondue
00:26:00 Зачем TypeScript
00:34:48 Аутсорс: Лёша
00:47:55 Аутсорс: Андрей
01:05:32 Аутсорс: Вадим
01:14:23 Новички в аутсорсе

Выпуск №270. Андрей Мелихов, Вадим Макеев, Алексей Симоненко и Роман Магдаленко про инспектор флексов, Vite 2.0, SVGO 2.0, Wakamai Fondue, TypeScript, RedLab и стороны аутсорса.

Слушайте на Ютубе https://youtu.be/6M7kE5pEnWY
Читайте на Медиуме https://medium.com/p/43cc66a07311

Consta — дизайн-система от Газпром нефти. Доступна в виде библиотеки в Figma и npm-пакета с библиотекой на React, TypeScript и PostCSS.

http://consta.gazprom-neft.ru/

Вышел оптимизатор SVGO 2.0. Новый мейнтейнер проекта Богдан Чадкин представил новинки: JSON для конфигов, обновлённый CLI, изменения в Node API и официальный ES-бандл для использования в браузере инструментами, вроде SVGOMG.

https://github.com/svg/svgo/releases/tag/v2.0.0

Веб-анимация для фронтендеров. Что выбрать: CSS, JavaScript или SVG? Лайв 24 февраля в 16:00 (GMT+3). Наталья Габитова и Алексей Симоненко обсудят инструменты для создания анимации, особенности CSS-анимаций, возможности JS-анимаций и ответят на вопросы.

CSS Basics. Видеокурс Евгения Ковальчука из 24 видео по основам CSS: синтаксис, блочная модель, декоративные свойства, позиционирование, текст, трансформации и анимация, медиавыражения.

https://www.youtube.com/playlist?list=PLNkWIWHIRwMHUawuIEpPI_tOG7Mfhs_sA

11ty рулит! Стефани Эклз собирает сниппеты и идеи, как эффективнее работать с генератором статических сайтов Eleventy.

https://11ty.rocks/tips/

Берёмся за TypeScript. Книга Акселя Раушмайера в двух частях: часть 1 покрывает основы для быстрого старта, часть 2 погружается глубже. HTML-версия доступна бесплатно, электронные форматы за 34 $.

https://exploringjs.com/tackling-ts/

Полезные советы по DevTools. Виталий Фридман делится советами, спрятанными инструментами и приёмами, позволяющими получить максимум от возможностей девтулзов в браузере.

https://www.smashingmagazine.com/2021/02/useful-chrome-firefox-devtools-tips-shortcuts/

Вышел Vite 2.0, быстрый сервер для разработки и сборки на ES-модулях. В новой версии: независимое ядро (остальное в плагинах), esbuild для предсборки, поддержка CSS и SSR, опциональная поддержка старых браузеров.

Анонс https://dev.to/yyx990803/announcing-vite-2-0-2f0a
Сайт проекта https://vitejs.dev/

Разбираемся с z-index в CSS. Визуальное руководство Ахмада Шадида по контекстам наложения и способам ими управлять.

https://ishadeed.com/article/understanding-z-index/