Фронтенд-новости 41. Дайджест новостей и полезных статей о фронтенде.

💫 Что нового

Safari 16.3. Ну Сафари и Сафари.

Astro 2.0 — в новой версии добавили гибридный рендеринг позволяющий смешивать входные данные SSR и SSG.

Nut.js 3.0: используйте Node.js для автоматизации рабочего стола. Управляйте средой своего рабочего стола (Windows, macOS или Linux) из кода с управлением клавиатурой и указателем.

Первая бета-версия Eleventy v2.0. Eleventy — это популярный генератор статических сайтов на базе Node.js.

TypeScript 5.0 Beta. Совсем взросленький стал.

🖌️ HTML и CSS

Ещё больше про использование :has(). Рассмотрите как и с какими селекторами можно комбинировать :has()

Список желаний на 2023 год для CSS от Дэйва Руперта.

И от Пола Амстронга, который составил список на 2023 для фронтенда.

Два способа разделить длинное слово в HTML.

Статус SVG-движка в Webkit.

Доступные гамбургер-меню без JavaScript.

🏗️ JavaScript

Глубокое клонирование объектов в JavaScript, современный способ. Если вы полагались на что-то вроде Lodash для глубокого клонирования, возможно, вам это больше не нужно.

scrollend — новое JavaScript-событие и новый способ определения завершения операции прокрутки в браузере.

Лекарство от useState ада — useReducer.

Сделайте жесты в React Native более естественными.

Начните работать со SvelteKIT — маршрутизация, данные, пропсы и другое.

🦦 Всякое ещё

Как перейти на Manifest V3 для расширений Chrome.

Оптимизация времени до первого байта. Это базовая и основная метрика производительности.

Копирование дизайна вам не поможет, так как это не работает. За дизайном стоит огромная работа, которая привела к получившемуся дизайну. Вам же этот опыт не доступен, но узнайте как можно попробовать узнать, что стоит за итоговым дизайном.

Мы тут провели одно исследование, но сначала проголосуйте:

Так вот, исследование.

Наш прекрасный Коля Шабалин собрал в кучу 55 тысяч сайтов и такой ррррраз их и все распарсил. Оказалось, что <div> везде и всюду, а вот самый непопулярный тег, например, <wbr>. Помните, был такой?

И вот первая часть про 15 популярных тегов.

👉 https://tml.io/tags

Кстати, Коля Шабалин очень любит спецификацию HTML и даже где-то говорил, что читает её каждый день.

В связи с этим аж два самых важных вопроса выходных:

Фронтенд-новости 43. Дайджест новостей и полезных статей о фронтенде.

💫 Что нового

Google Chrome 110, DevTools 110, Lighthouse 10, Chrome 111 beta

Safari Technology Preview 163

Node.js v19.6.0 (Current) с npm 9.4.


🧬 HTML и CSS

Руководство по адаптивному дизайну в 2023 году.

Как создать «макет журнала» с помощью областей CSS Grid.

Стратегия color-contrast() для дополнительных полупрозрачных фонов.

Как сделать фавикон в 2023 году: шесть файлов от Андрея Ситника.

Тестирование доступности цвета с помощью Dev Tools.

🏝️ JavaScript

Десять тенденций веб-разработки в 2023 году.

Создание стильного макета Masonry с использованием CSS и JavaScript.

Особенности Page Visibility API.

Интригующая прогулка по воспоминаниям о критике против React на протяжении многих лет.

Эффективные компоненты высшего порядка (HOC). Скорее всего, вы уже заменили ХОКи на хоки, но тем неменее всё ещё можно создать производительные компоненты на основе ХОКов.

Если вам нужны причины почему Реакт не умирает, то вот они.

Эван Ю рассказывает, чего ожидать в 2023 году от Vue.js.

Ada 1.0: новый анализатор URL-адресов Node.

Puppeteer в Node: типичные ошибки, которых следует избегать.

Будущее (и прошлое) Интернета — это рендеринг на стороне сервера.

Об использовании Playwright в GitHub Actions

🦭 Всякое ещё

WebHID + контроллер. Узнайте, как получить доступ к дополнительным кнопкам вашего контроллера с помощью WebHID.

Возможен ли Blink и Gecko в iOS? Mozilla продолжает работу над движком Gecko для iOS, а Google их в этом поддерживает.

Bing и Edge добавляют ИИ в поиск.


Подпишитесь на @html_blog, чтобы не пропустить следующие выпуски.

Как попасть в компанию мечты, если там нет вакансий. Собрали список вещей, о которых все постоянно забывают при поиске работы.

👉 https://tml.io/no-way

Перешлите знакомым, которые сейчас в поиске.

Фронтенд-новости 44. Дайджест новостей и полезных статей о фронтенде.

🔥 Самое важное

CSS Snapshot 2023. Основная задача — сформировать текущее состояние CSS на 2023 год.

Выражения от контейнеров теперь есть во всех основных браузерных движках.

Документальный фильм про React.

💫 Что нового

У WCAG 2.1 появился перевод на каталонский, а мы напомним, что есть и русский перевод для WCAG 2.0.

Декларативный Shadow DOM в Safari TP 162

Что нового в Lighthouse 10

Firefox 110 (и ещё для разработчиков)

Chrome 111 DevTools

🧬 HTML и CSS

Как с помощью size-adjust, ascent-override, descent-override и line-gap-override уменьшить сдвиг интерфейса.

Как отслеживать изменения в DOM-дереве.

С какими проблема вы столкнётесь при создании фавиконки для тёмной и светлой темы.

Как создать разноцветные полупрозрачные градиентные тени.

Как работает box-sizing.

🏝️ JavaScript

10 ошибок, которых следует избегать при работе с Vue 3.

State of React Native 2023

Рефакторинг компонентов TypeScript React в VS Code.

А что если не использовать системы сборки для JS?

Использование RxDB в качестве базы данных в Node.js.

▶️ Игорь Антонов про протокол node:. История возникновения и как пользоваться.

Используйте MutationObserver для обработки узлов DOM, которых еще не существует.

Полное руководство по тайм-аутам в Node.js.

Представьте, что Node.js работает прямо в вашем браузере. Узнайте о веб-контейнерах.

🦭 Общее

Пять способов оптимизации скорости веб-сайта для начинающих и как сделать их правильно — несколько удобных стратегий повышения производительности вашего сайта.

SPA нужен не всегда.

Git Notes: самая крутая и самая нелюбимая функция Git? Знаете ли вы, что вы можете добавлять примечания к коммитам (помимо обычных сообщений коммитов) с помощью git из командной строки?

Последняя бета-версия iOS и iPadOS 16.4 поддерживает API Web Push для веб-приложений на главном экране.


Подпишитесь на @html_blog, чтобы не пропустить следующие выпуски.

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

Фронтенд-новости 45. Дайджест новостей и полезных статей о фронтенде.


🔥 Самое важное

▶️ Может ли ChatGPT писать хороший CSS? Автор видео считает, что да.

Основные команды для работы с Git. Обновили важную инструкцию для всех, кто терпеть не может index_release_копия(2)_3_final.html.


💫 Что нового

Safari 16.4 beta

Node.js v19.7.0: npm v9.5.0 и новый анализатор URL-адресов, совместимый с Ada WHATWG


🧬 HTML и CSS

Новое выравнивание по базовой линии с помощью first и last.

Фокусные точки и соотношение сторон - интересный способ обрезки изображений с учётом их фокуса.

Вращающаяся галерея с анимацией на основе CSS-прокрутки.

Доступное использование текстовых символов в псевдоэлементах.

А так ли нам нужно обнаружение переноса строки в флексах? Кажется, что очень пригодилось бы.

Пошаговое руководство по созданию доступных каруселей.

(255 255 255) — это наивысшая специфичность. Исследование того, как движки браузеров хранят специфичность и каковы ее ограничения, если таковые имеются. С этим вы вряд ли стокнётесь в реальной работе, но почитать интересно.

Как найти проблемы в CSS с помощью DevTools.

Как работать с выражениями от стилей контейнера.

Типы инпутов. Просто типы инпутов.


🏝️ JavaScript

MutationObserver для обработки узлов DOM, которых ещё не существует.

React-библиотеки на 2023.

Как предотвратить проблемы при использовании асинхронных диспетчеров состояний в React и избежать нарушения UI, анимации и повреждения UX.

Создание простого инструмента командной строки с помощью современного Node.js. Начинаем с нуля, без шаблонов.


Подпишитесь на @html_blog, чтобы не пропустить следующие выпуски.

С октября мы проводим тут всякие опросы и вот что оказалось.

Вы любите табы, пользуетесь хромом, хотите зарплату побольше, пишете на аштиэмэл, сиэсэс и джаваскрипт, слышали про май эскюэл, иногда не очень хорошо работаете в команде, почитываете спеку HTML, не особо любите оливье, пользуетесь стандартной темой VS Code и хотите быть как Коля Шабалин.

Спасибо, что остаётесь с Академией и участвуете во всём этом безумии 🧡

Библиотека дня — CSShake 😠

Библиотека, чтобы что-нибудь потрясти на странице. Не знаю как вы, но я прям начинаю нервничать, когда вижу это.

👉 https://elrumordelaluz.github.io/csshake/

Фронтенд-новости 46. Дайджест новостей и полезных статей о фронтенде с 27 февраля по 5 марта.

🔥 Самое важное

W3C делают новый сайт и приглашают поучаствовать в его создании.

💫 Что нового

Safari Technology Preview 164 и Next.js 13.2

🧬 HTML и CSS

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

Руководство по CSS object-view-box.

Руководство по цветовым функциям CSS.

Узнайте от Рэйчел Эндрю, что было нового в феврале в веб-платформе:
- выражения от контейнера для размеров
- initial-letter — для работы с буквицей
- ReadableStream — в асинхронном формате
- AudioContext.setSinkId() — чтобы AudioContext мог направлять звук в нужное устройство
- IFrame без учетных данных
- и многое другое.

Теория. Теперь можно запрашивать у контейнера не только размеры, но и стили, и даже кастомные свойства.
Практика. Как сделать тёмную тему с помощью выражений от стилей контейнера.

О выражения от контейнера, адаптивных изображениях и JPEG-XL.

Изменение размера с помощью CSS-свойства resize, которое создает в документе область с изменяемым размером.

font-display: swap решает проблему с FOIT, но не решает всех проблем. Всё-таки если шрифт, даже с font-display: swap, загрузился не сразу, то сначала отображается дефолтный шрифт, а потом он меняется на указанный в font-family. В этот момент происходит микро, а иногда и макро, смещение макета, которое негативно влияет на метрику CLS. С помощью size-adjust, ascent-override, descent-override`и `line-gap-override можно нивелировать смещение и улучшить метрику.

Заголовки составных таблиц плохо поддерживаются средствами чтения с экрана — избегайте их (ну, в смысле, составных таблиц :)

Шесть распространенных ошибок SVG (и как их исправить)

Используйте позиционирование к якорю для расположения элементов рядом с другим

Проблема добавления пробела после псевдоэлемента ::marker.

🏝️ JavaScript

▶️ Перезапуск процессов в Node.js / Новый параметр —watch. Разбираемся на практике с новым экспериментальным параметром для CLI ‘—watch’.

▶️ Как вызвать функцию в JavaScript / 5 способов. Разбираем вопрос с собеседований.

Миграция с Enzyme на React Testing Library.

«React держит меня в заложниках» — несколько преувеличенное название, но автор под псевдонимом считает, что пришло время: «Под защитой этого нового тренда в недовольстве React я хотел бы, наконец, высказать своё» и тратит много слов и примеров кода, выражая неудовольство, признавая, что React никуда не денется.

Создание анимации в React с помощью React Spring.

Sandworm Audit: новый инструмент аудита JS для сканирования проекта и зависимостей на наличие уязвимостей, проблем с лицензией и связанных с этим проблем.

Декомпозиция и интерфейс vue-компонентов.


🦭 Общее

Chrome долгое время считался ресурсоемким на современных компьютерах Mac, но последняя версия Chrome значительно улучшила ситуацию, говорят разработчики Chrome.

WebPush в iOS изменил мир? Получается, что да.

Разрабатываем браузерное расширение легким движением руки


Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.

Фронтенд-новости 47. Совершенно точно настоящий, а не отправленный случайно нажатием enter в неподходящий момент времени, пока ещё не всё оформлено, дайджест новостей и полезных статей о фронтенде с 6 по 16 марта, хотя обычно он выходит по понедельникам, а сегодня пятница, но что уж теперь.

💫 Что нового

Chrome 111
- View Transitions API
- Поддержка CSS Color Level 4
- Новые инструменты на панели стилей

Chrome 112 beta и в нём Chrome DevTools

Отчет о производительности Astro, Gatsby, Next.js, Nuxt, Remix, и SvelteKit в 2023.

В Chrome появился headless mode. Узнайте, как его использовать.

🧬 HTML и CSS

Типографить станет чуть легче с новым CSS-свойством text-wrap: balance

Нам нужен нативный .visually-hidden

Полное руководство по медиавыражениям

ARIA против HTML. <div role="heading" aria-level="1">— это то же самое, что <h1> , но что использовать лучше?

Руководство для начинающих по ручному тестированию доступности. Узнайте, как проводить ручное тестирование с клавиатурой, программой чтения с экрана и масштабированием.

Пять ошибок при написании альтернативного текста?

🏝️ JavaScript

🎥 Что почитать по JavaScript / Игорь Антонов с большим обзором книг по JavaScript

Распространенные ошибки новичков в React.

Были ли React Hooks ошибкой?

Как создать панель администратора React с помощью Mantine, Strapi и Refine

Vue 3.2 и прирост скорости.

12 самых популярных фреймворков Node.js в 2023 году


Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.