Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 25 сентября—2 октября.

🔥 Три главные статьи

  • Web Almanac 2022: CSS и JavaScript. Люди проанализировали 44 Tb данных и вот что они поняли...
  • Узнайте, как заменить gif на вашем сайте. Если нужно автоматически воспроизводить видео без звука, то это точно должен быть не GIF, так как это устаревший громоздкий формат. Один из вариантов — переводить GIF в видеоформат, а другой в анимированный WebP или AVIF.
  • Основы TypeScript: уровень типов.
  • «Не волнуйтесь, Node.js никто не заменит». Смелое утверждение, построенное на том, что даже если вы перейдёте на Deno или Bun, вы всё равно будете работать как с Node.js, так как Deno и Bun стараются повторять применяемые навыки в Node.js.

🚶 Доступность

Как тестировать цветовую констрастность текста к фону. Заодно выяснилось, что у DevTools есть как минимум 7 полезных панелей для инспектирования проблем с цветовой доступностью — пора узнать обо всех.

Какие есть проблемы у WCAG 2.1 с определением контрастности цветов и как WCAG 3.0 APCA их решает. Узнайте почему на размытом фоне плохо определяет коэффицент контрастности.

🧬 HTML

Как [не] делать кнопку. Автор пытается с помощью JS сделать полностью рабочую кнопку. него получается, но зачем, когда есть <button> вместо десятков строк JS-кода и CSS-стилей.

Скринридеры перехватывают события нажатия на кнопку для того, чтобы не сойти с ума.

Что такое WebP и чем он полезен. Средний вес изображений увеличился с 523 Kb в 2011 году до 2196 Kb в 2021. WebP уменьшает вес изображения, что позволяет быстрее загрузить сайт. Это очень полезное свойство для устройств с мобильным интернетом.

Кнопка или ссылка? Обновление от 29 августа 2022. Узнайте, когда точно использовать <a>, а когда <button>. Чем <a> отличается от <a href="">.

Как контролировать строку заголовка в PWA-приложении в десктопном варианте, начинания с Microsoft Edge 105.

🖌 CSS

4 способа наложения элементов друг на друга. Узнайте плюсы и минусы подхода: отрицательный маржин, трансформация, абсолютное позиционирование и грид.

Почему кастомные свойства не работают в функции url()? Всё из-за старой нотации url(http://htmlacademy.ru/keks.jpg) без кавычек. Теперь ждём, когда srcсможет заменить url().

Чем отличается CSS Rules от CSS Rulesets. W3C — «Style rule».

Попробуйте новый синтаксис SVG с помощью css-doodle. Описание всех элементов, атрибутов и их значений происходит прямо в CSS.

Пофантазируйте вместе с автором о медиавыражении на праворукость и леворукость, а также о покрываемых проблемах.

Узнайте про новые единицы измеренияsv-юниты, lv-юниты, dv*-юниты. Спецификация CSS Values 4.

🏗 JavaScript

8 полезных методов:

  • Скопировать что-то в буфер обмена,
  • Сравнить версии x.x.x,
  • Получить параметр из урла ?firstName=nikolai&lastName=shabalin,
  • Плавная прокрутка,
  • Текущая позиция полосы прокрутки,
  • Определение iOS и Android,
  • Два способа локализовать деньги,
  • Вход и выход из полноэкранного режима.

Веб Альманах 2022 про JavaScript.

🚀 React

Основы TypeScript: уровень типов.

Создайте канбан-доску с помощью Node.js, React и вебсокетов.

useEvent не умер, но точно отложен для более лучшей реализации.

Как тестировать React-приложение с помощью Cypress.

Как управлять состоянием формы с помощью библиотеки React-Form.

Пошаговое руководство о том, как создать доступный select-компонент.

Начните работать с хуками лучше, узнав, как они работают под капотом.

💽 Node.js

«Не волнуйтесь, Node.js никто не заменит». Смелое утверждение построенное на том, что даже если вы перейдёте на Deno или Bun, вы всё равно будете работать как с Node.js, так как Deno и Bun стараются повторять применяемые навыки в Node.js.

Node v18.10.0 (Current):

  • http-модуль теперь может настаивать на том, чтобы Content-length соответствовал длине ответа;
  • В stream добавили ReadableByteStream.tee ();
  • libnode для встраивания приложения ios.

Как написать компонуемый SQL с помощью JavaScript.

Обновите свой LTS до 16.17.1, чтобы повысить безопасность приложения.

Минимизируйте выделение кучи в Node.js, а также прочитайте дополнительные комментарии по статье, так как в ней есть базовые неточности.

Создайте простой UDP клиент и сервер с помощью Node.js.

⚡ Производительность

5 шаблонов повышения производительности:

  • Рендеринг на стороне клиента и сервера,
  • Кеширование в памяти,
  • Вебсокеты,
  • Ленивая, предварительная и отложенная загрузки,
  • Возобновляемость.

🎓 Общее

Новая волна JavaScript-фреймворков. История о том, как мы начинали создавать веб с помощью PERL и PHP, а потом в нашей жизни произошёл JavaScript.

На его основе мы создали jQuery, UI, Dojo, Mootools, но нам этого не хватило и мы сделали JavaScript-фреймворки: Backbone и Knockout. После наступил Angular и убийца всех фреймворков React. Дальше мы придумали JAMStack и начали борьбу с виртуальным DOM. А в самом конце создали SPA и MPA, а потом стёрли границы между ними.

postcss-media-minmax 5.0.0 — плагин, чтобы писать медиавыражения в современном синтаксисе width >= 500px.

Как читать статьи на английском языке

В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.