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

Slowfiles. Простой сервис для проверки загрузки Гарри Робертса и Райана Таунсенда, который возвращает CSS- или JS-файл с заданной задержкой, HTTP-статусом и значением max-age, чтобы понять, насколько это ухудшает работу сайта или приложения.

https://slowfil.es/

Новинки беты Chrome 88: target=_blank теперь работает как rel=noopener, появилось свойство aspect-ratio, поддерживаются сложные селекторы :not(), значение path() заработало в свойстве clip-path, удалена поддержка FTP и веб-компонентов v0.

https://blog.chromium.org/2020/12/chrome-88-digital-goods-lighting.html

Coding Fonts. Сборник CSS-Tricks из 35 моноширинных шрифтов для редактора кода с подробностями о каждом и возможностью сравнить их как для тёмной, так и для светлой темы.

https://coding-fonts.css-tricks.com/

Новинки WebStorm 2020.3 в обзоре Екатерины Рябухи на Хабре: обновленный интерфейс, быстрое создание React-компонентов, улучшения для Markdown и Vue, поддержка Tailwind, Git-стейджинг прямо в редакторе.

Обзор на Хабре https://habr.com/p/529708/
Видеообзор https://youtu.be/CnFiT_hy6Rk

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

https://survey.stateofjs.com/survey/state-of-js/2020

WMR, новый инструмент для разработки и сборки от создателя Preact Джейсона Миллера: ES-модули в основе, импорт пакетов без установки, поддержка CSS Modules, JSX, плагинов Rollup, HTTP/2.

Тред в Твиттере https://twitter.com/_developit/status/1334233001031503873
Код на Гитхабе https://github.com/preactjs/wmr

Установка font-display для медленных соединений. Мэтт Хоббс разбирается, какое значение лучше подходит, чтобы улучшить пользовательский опыт при загрузке страницы.

https://calendar.perfplanet.com/2020/a-font-display-setting-for-slow-connections/

Стартовал «Advent of Code» Эрика Вастла: 1–25 декабря каждый день появляются головоломки, которые можно решать на любом языке программирования.

Advent of Code https://adventofcode.com/
Подробнее на Хабре https://habr.com/p/530474/
Видеоразборы задач от Контура https://www.youtube.com/playlist?list=PLc82OEDeni8RuE-PRirh1sgsfmaB4ai_q

Design is Frontend. Конференция Affinage на стыке дизайна и вёрстки пройдёт онлайн 9 декабря. В программе пять докладов и дискуссия: баги между дизайном и вёрсткой, сложные анимации, дружба дизайна и фронтенда, слаженная команда, аналитика и сроки.

https://affinage.timepad.ru/event/1489043/?utm_source=telegram&utm_medium=post&utm_campaign=promo&utm_content=webstandards_ru

Результаты опроса State of CSS 2020: демография участников опроса, фичи CSS, технологии в экосистеме, инструменты разработки, блоги и подкасты, настроения и другие.

https://2020.stateofcss.com/ru-RU/

Атрибут lang. Мануэль Матузович показывает на примерах, как неправильное значение атрибута влияет на пользовательский опыт.

https://www.matuzo.at/blog/lang-attribute/

Хранить Google-шрифты у себя. Опыт проекта Blackbird, который позволил ускорить отрисовку сайта на 1,3 секунды, и рекомендации по альтернативным решениям.

https://tryblackbird.com/blog/self-hosting-google-fonts

Пуньк! Джош Камю шаг за шагом собирает компонент для React, который анимирует элементы интерфейса при наведении с помощью React Spring.

https://www.joshwcomeau.com/react/boop/

Создание универсальных компонентов с прозрачностью. Пол Герберт предлагает комбинировать заливку компонентов с фоном контекста вставки для большей гибкости и лучшей адаптивности: как на этапе проектирования, так и разработки.

https://cloudfour.com/thinks/building-flexible-components-with-transparency/

MobX для React. Видеокурс Игоря Сидорова по системе управления состояниями приложений в четырёх частях: наблюдаемые значения, наблюдатель и действия, вычисляемые значения, действия и реакции.

https://www.youtube.com/playlist?list=PLu6MFGxDdilibXREG6en-cIh8ucbslEGz

Рекомендации от Microsoft по улучшению производительности TypeScript с объяснением особенностей его работы.

https://github.com/microsoft/TypeScript/wiki/Performance

Новая демка Юлии Музафаровой по мотивам игры Monument Valley, но только на чистом CSS. Работает в Chrome, Firefox, но не работает в Safari.

https://codepen.io/miocene/full/NWRWQpX

Нативное соотношение сторон с помощью CSS-свойства aspect-ratio. Брэм Штайн про новое свойство из черновика Box Sizing L4, которое уже работает в сборках Chromium 89 и Firefox 85 и поможет нам избавиться от привычного, но неудобного паддинг-хака.

https://www.bram.us/2020/11/30/native-aspect-ratio-boxes-in-css-thanks-to-aspect-ratio/