00:00:00 Начало
00:01:05 Конец фронтенда — действительно конец?
00:14:45 Самые популярные фреймворки node.js на 2023 год
00:25:28 Почему логические свойства не берут верх над всем?
00:37:57 Как поправить цветовой контраст
00:45:58 Новинки TypeScript 5.0
00:58:13 Как :focus-visible в четыре этапа принимает решение отображаться или нет

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

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

Safari 16.4. 135 новых функций и более [280 обновлений]().

Новый элемент <search>. В спецификации HTML с 24 марта.

visually-hidden — это хак, который нужно устранять, а не закреплять. Вспомните, для чего именно нужен visually-hidden, когда его применяют и как правильно от него отказаться.

Половина новых пакетов npm — просто мусор? Более половины всех новых пакетов, которые отправляются в npm, являются SEO-спамом. То есть это пустые пакеты, всего с одним README-файлом, содержащим ссылки на вредоносные сайты.


🧬 HTML и CSS

Новое на веб-платформе в марте

CSS Display Module Level 3 обновился и уже почти готов. Модуль описывает, как создаётся дерево форматирования CSS из дерева элементов, и определяет свойство display.

Как делать таблицы. Вспомните классику — добавьте строки и столбцы, стилизуйте их, добавьте подписи.

Нативная вложенность в Sass. В CSS появилась собственная вложенность, которая впервые появится в Хроме 112. В долгосрочной перспективе Sass перейдёт на генерацию :is(), это заставит вести себя Sass как CSS.

Полное руководство по оптимизации изображений. Узнайте, что такое оптимизация изображения, почему она важна, какими инструментами воспользоваться и как оптимизировать изображения.

CSS маски. Дизайнеры часто используют маскирование при работе. Верстальщики тоже с удовольствием бы использовали, но не могут из-за плохой браузерной совместимости. Но маскирование в CSS стало частью Interop 2023, а это значит, что браузерная поддержка в этом выровняется.

Десять советов по улучшению CSS-переходов и анимации.

Вложенность в CSS. Если вы использовали вложенность в препроцессорах, то почти, то же самое можно будет делать в CSS.

До
.nesting {
color: hotpink;
}

.nesting > .is {
color: rebeccapurple;
}

.nesting > .is > .awesome {
color: deeppink;
}


После
.nesting {
color: hotpink;

> .is {
color: rebeccapurple;

> .awesome {
color: deeppink;
}
}
}


Изменение размера с помощью resize. Как создавать элементы с изменяемым размером с помощью resize.

Скрытие пустых элементов с помощью CSS :empty и :has(). Как-то так:

.container:has(.results:empty) {
display: none;
}

Виджеты только на CSS недоступны.

Роль x-height в шрифтах и почему одни статьи читаются сложнее других.


🏝️ JavaScript

Что умеет консоль в Chrome DevTools. Игорь Антонов с обзором возможностей Console в Chrome DevTools.

importmap уже во всех браузерах. Узнайте, что такое карты импорта и как их использовать.

<script type="importmap">
{
"imports": {
"browser-fs-access": "https://..."
}
}
</script>

Сравнение switch/case и if/else и когда лучше использовать switch, а когда if/else, а также про подводные камни и распространённые проблемы.

Чистые и нечистые функции. Чистая функция при одинаковых значениях возвращает одинаковый результат. А вот нечистая функция при одних и тех же входных данных может давать разные выходные данные в разное время.

Лучшие способы проверить, является ли значение числом. Для этого используйте: isNaN(), typeof и Number.isInteger().

3 способа перевернуть строку: с помощью split(), reverse() и join(), другой способ - for(), последний самый затратный — рекурсия.

Как нейронные сети помогают в работе с кодом — можно обновить старый код (ES5) до более современного (ES2022), при этом сохраняя ваш стиль кода

🚀 React

React Labs в марте 2023. React Server Components, Suspense, работа с метаданными страницы, оптимизация компилятора, внеэкранный рендеринг, API Transition Tracing.

Современное руководство по отладке React, особенно, если что-то идёт не так :)

Как реализовать отображение при прокрутке в React с помощью Intersection Observer API.

Node.js

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

Node.js 16.20.0. Небольшой выпуск. Обновились npm до 8.19.4 и undici.

—

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

Второй выпуск подкаста «Про код» уже на всех площадках.

00:00:00 Начало
00:01:00 Кандидат ES2023
00:16:50 О важности новинок, которые можно использовать прямо сейчас
00:28:18 JavaScript import maps
00:35:42 Пять советов для более доступных веб-сайтов
00:50:01 Как eBay создал свой новый инструмент доступности
00:53:01 Как учить React

Тут такое дело. Мы строили-строили и построили целый справочник по HTML-тегам — туда вошли все актуальные теги на март 2023 и некоторые старые (исключительно в исторических целях).

Будем поддерживать и дополнять — например, скоро расскажем про новый тег <search>.

Добавляйте страницу в закладки, сохраняйте пост в «Избранное», пользуйтесь в работе и обучении. Всё-таки HTML — это база.

👉 https://tml.io/html

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

🔥 Что обсудить на этой неделе

Современная электронная почта в формате HTML — новый движок рендеринга в Outlook поможет отказаться от вёрстки на таблицах.

React — это новый Wordpress?

Балансировка текста с помощью text-wrap:balance. В Chrome Canary появилась экспериментальная поддержка функции text-wrap: balance, которая подсчитывает количество слов и делит их поровну между двумя строками, устраняя странный вид единственного слова на своей строке.

💫 Релизы

Что нового в DevTools Chrome 113

htmx 1.9.0

Node v19.9.0 (Current)

🧬 HTML и CSS

В каком порядке читать контент? Порядок чтения HTML-документа следует порядку исходного текста, но в CSS могут быть макеты с другим визуальным порядком элементов. Рабочая группа CSS предлагает решение этой проблемы путем введения новых свойств, таких как read-order и read-order-items, которые позволят порядку чтения следовать порядку расположения в определенных ситуациях.

3 метода для изоляции стилей в веб-компонентах — теневой DOM, WebC и будущий бонусный метод CSS @scope.

Не переопределяйте произношение программы чтения с экрана

Прошло время изучить oklch().
Сравнение HSL с OKLCH, новой цветовой нотацией в CSS.

Липкая тень заголовка страницы при прокрутке. CSS позволяет легко создавать липкие заголовки с position: sticky; top: 0; А API Intersection Observer позволит проявлять эффект в нужный момент.


🏝 JavaScript

Поверхностное и глубокое копирование в JS

10 лучших алгоритмов сортировки.

Настольная игра о равенстве в JavaScript.

Неочевидная работа регулярных выражений в JS. Пустые символьные классы в регулярных выражениях JavaScript по-разному обрабатываются в различных языках программирования, что иногда приводит к странным результатам.

Как объединить объекты в JavaScript.
В JavaScript объединение или копирование объектов — обычная задача для разработчиков. Оператор spread и метод Object.assign() являются необходимыми инструментами для решения этих задач.

Небольшой шаблон JavaScript, который может улучшить читабельность кода.
Он предполагает использование методов Array.includes() и Array.some() для получения более чистого и читабельного кода при проверке нескольких условий.

🚀 React

forwardRef(): Как передать ссылки дочерним компонентам.

Как вывести UI на React на новый уровень.

Open Graph с помощью Remix, Vercel OG и Satori, а также как оформить их с помощью Tailwind CSS и Google Fonts.

Поразительное наглядное введение в React.

Node.js

Прекращается поддержка node.js v14.
Текущий LTS-релиз - Node.js v16 (Maintenance LTS), а текущий Active LTS-релиз - Node.js v18 (hydrogen).

Встроенный в node.js модуль для тестирования. Модуль node:test добавляет две вещи: новую функцию test для написания ваших тестов и флаг командной строки --test. Тесты используют современный синтаксис async/await, и вы можете вложить тесты в другие тесты и даже создавать новые тесты динамически.

—

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

Обсуждаем эти новости в третьем выпуске подкаста «Про код»

0:00:00 — Начало
0:00:45 — Электронная почта без таблиц
0:09:41 — Реакт — новый Вордпресс?
0:22:45 — Равное количество слов в строках и text-wrap:balance.
0:34:00 — Отличия глубокого и поверхностного копирования в JS
0:45:30 — В вёрстке заголовок стоит под параграфом. В каком порядке их читать?
0:59:13 — Почему экспорт по умолчанию плохой.
1:05:08 — Релиз Node 18.16.0 (LTS)

Новые выпуски — в журнале «Доктайп».

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


🔥 Главное

Что нового в WCAG 2.2? Обновления критериев, которые по-разному повлияют на веб. Подробнее — в четвёртом выпуске подкаста «Про код».

Node.js v20. Повышение производительности, совместимости с другими средами JavaScript и безопасности.

V8 11.3 (который, наконец, включает поддержку флага Regexp /v)

Что будет дальше с SSR в Ангуляре


💫 Релизы

Firefox 112 с поддержкой атрибута inert.

Chrome 113 beta с поддержкой image-set() — это тип CSS для указания ряда параметров изображения, таких как разные изображения для разной плотности экрана, и предоставление браузеру возможности выбрать лучшее из них.

Safari Technology Preview 168 — вместе с ним обновления и исправления для Web Inspector, CSS, Rendering, Web Animations, JavaScript, Lockdown Mode, Media, Popover, Web API и Accessibility.

В Vite 4.3 увеличилась скорость по сравнению с Vite 4.2, а ещё появились инструменты профилирования, которые помогут пользователям определить узкие места в производительности приложений.


🧬 HTML и CSS

Дизайн для дальтоников. Узнайте, с какими проблемами сталкиваются дальтоники в повседневной жизни, и оцените важность включения функций доступности в дизайн.

Оптимизация загрузки ресурсов с помощью Fetch Priority API. Это API позволяет разработчикам сообщать браузерам относительный приоритет ресурсов, оптимизируя загрузку и улучшая показатели Core Web Vitals. ОН может использоваться с тегами <link>, <img> и <script>.

Взаимодействие с Next Paint (INP): что это такое и как его улучшить. INP заменит собой Google First Input Delay (FID) и будет влиять на позиции в поисковой выдаче.

Улучшите Largest Contentful Paint (LCP), удалив переходы изображений. У нас два пути — либо полностью убрать переходы, либо предотвратить их блокировку рендеринга.

Про :has(), снова.

Использование color-mix() для создания интересных вариантов непрозрачности.

Цветовая механика в UI Kit.

Кастомные свойства за пределами :root

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


🏝️ JavaScript

Web Workers обеспечивают многопоточность в веб-приложениях, повышая производительность и отзывчивость за счет выполнения кода JavaScript в фоновом режиме без блокировки основного потока.

4 способа создать ENUM в JavaScript. Перечисления делают код более читабельным и явным, позволяя избежать использования магических чисел и строк.

Сигналы в Solid. Сигналы — это наблюдаемые значения, которые при изменении вызывают событие, запускающее реакцию или эффект, что позволяет обновлять компоненты без повторного рендеринга всей страницы.

Как обезопасить свои npm-пакеты. Подробная шпаргалка по всем базовым принципам безопасности.

Кратко о нововведениях в ES2023. Самое интересное — поиск в массиве с конца.

Как работать с датами в JavaScript с помощью объекта Date, включая создание новых объектов Date, понимание Unix Timestamps и работу с различными форматами дат.


🦭 Ещё о разработке

Эволюция автоматизации тестирования. Различия между WebDriver Classic и Chrome DevTools Protocol (CDP), а также WebDriver BiDi как новый стандарт автоматизации браузера.

Passkeys: что это вообще и зачем. Passkeys, созданные на базе API WebAuthn, набирают популярность как более безопасная альтернатива традиционным паролям.

—

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

Жадные алгоритмы

Что это: заметка об алгоритмах с загребущими ручонками.

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

Где пригодится фронтендеру: при оптимизации загрузки сайта или при плохом планировании спринта.

👉 https://tml.io/greedy

Крайне важный опрос о браузере Firefox:

Свойство filter

Что это: потрясающей красоты заметка об одном CSS-свойстве, в которой больше картинок, чем текста.

Коротко: наглядно показываем девять способов накрутить графона на фотографии с помощью CSS и рассказываем, как всё это счастье настроить.

Где пригодится фронтендеру: в очередном аналоге соцсети с фоточками.

👉️️️ https://tml.io/filter

Подкаст «Про код», выпуск 4 — неторопливые беседы о фронтенде для длинных выходных.

00:00:00 Начало
00:00:43 Долгожданная Node.js 20
00:21:25 Что нового во WCAG 2.2
00:42:31 Бетка TypeScript 5.1
00:51:51 Чем хорош Fetch Priority API
01:00:39 Шпаргалка по безопасности в npm

Слушайте здесь или на любимой площадке — выпуски выходят везде.

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

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

Новое медиавыражение update. У вашего ноута и смартфона высокая частота обновления экрана, а у читалок — низкая. update поможет не грузить читалку с 1fps тяжелыми анимациями.

Обман с константой. В JS переменные объявляют ключевыми словами const и let. Переменную с const, нельзя переназначить, но можно подменить данные, на которые она ссылается. Это называется мутацией.

Create-react-app (CRA) раньше был на коне, а теперь разработчикам он кажется медленным и не очень гибким. Есть варианты быстрее и гибче, например, Vite, Next.js, Astro, Remix и Gatsby. Посмотрим, как пойдёт.


💫 Релизы

DevTools Chrome 113. Вовсю переопределяем заголовки сетевых ответов, включая заголовки CORS и удобнее отлаживаем Nuxt, Vite и Rollup.

Краткий обзор Angular 16.

Chrome объявил, что первая версия WebGPU теперь доступна по умолчанию в ChromeOS, macOS и Windows.


🧬 HTML и CSS

Потенциально опасная недоступность уведомлений о файлах cookie. С человеческой, визуальной и юридической стороны.

Очень полезный справочник по созданию инклюзивных веб-сайтов.

Памятка по доступным размерам элементов. Чтобы было, куда кликать.


🏝️ JavaScript

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

🚀 React

Как писать комментарии в React: хороший, плохой и ужасный способы. То есть синтаксис комментариев JSX, комментарии JavaScript вокруг JSX и комментарии JavaScript внутри тега JSX.

Node.js

Ускоряем обработку CSV-файла в Node в пять раз с помощью Rust и NAPI-RS

Создание современного микросервиса gRPC.

Пошаговое руководство по созданию приложения Node.js без статических данных и его докеризации.

Как установить Node.js 20 на Ubuntu 20.04 LTS.

—

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

Ну вы чего, поднажмите на третий вариант ответа, дедлайны горят, 20% недостача, релиз вчера, возможно, нужно будет остаться ненадолго после работы, главное, общее дело делаем

Подкаст «Про код», эпизод 5. В этот раз больше говорили о разработке и почти уложились в час. Вот темы и таймкоды:

00:00:00 Начало
00:00:45 Зачем джуну новый отладчик в Chrome DevTools
00:20:42 Vite 4.3 и немного о судьбе Create React App
00:34:00 Rust быстрее Node.js обрабатывает CSV и другие невероятные открытия
00:46:31 Почему мы ничего не запоминаем из книг о разработке

—

💫️️️️Слушайте «Про код» на любимой площадке и подписывайтесь на «Доктайп»

Прямо сейчас в канале «Фронтенд-новости» в прямом эфире выходит 55 выпуск нашего легендарного еженедельного дайджеста. Формат новый и очень экспериментальный, так что подпишитесь на «Фронтенд-новости», но отключите там уведомления.

💫️️️️Как этим пользоваться. Читайте, голосуйте за статьи — так мы поймём, полезны ли они для вас, отключайте уведомления и добавляйте статьи в закладки в удобном поштучном формате.

Короткий дайджест из этого канала пока никуда не денется.
Попробуем распробовать 🐈

Всё про деструктуризацию в JavaScript / от объектов до Map

Что это: новое большое видео про деструктуризацию в JavaScript от Игоря Антонова, автора курсов в Академии.

Где пригодится фронтендеру: Игорь объяснит

👉 https://youtu.be/x4isDxxHzCU

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

🔥 Главное за неделю
:root не является глобальным
Как сделать размытый фон камеры
Серверные компоненты против SSR в Next.js

💫 Релизы
Angular 16, Chrome 113, Chrome 114 beta, Chrome DevTools 114 Canary, Safari Technology Preview 169, NodeBB v3.0 (это система ф о р у м о в на Node.js), Axios 1.4.

🧬 HTML и CSS
Новое на web-платформе в апреле
Тестирование поддержки функций для современного CSS

🏝️ JavaScript
Интерактивное руководство по рендерингу в React
Bulletproof React: масштабируемая архитектура для приложений.
Типобезопасный Tailwind с помощью Vanilla Extract
Как создать карусель изображений с использованием WebGL, React Three Fiber и GSAP

Node.js
Теперь Node.js может работать во всех основных браузерных движках
Сравнение менеджеров версий Node: nvm, Volta и asdf
Написание модульных тестов в Node.js с использованием Jest

Общее
Обновление значка блокировки в Google Chrome

---
Полный выпуск с комментариями — в канале «Фронтенд-новости». Оставайтесь с нами, подписывайтесь на «Доктайп» и изучайте новое вместе с Академией.

🔎 Новый HTML-элемент <search>

Что это: перевод статьи Альваро Монторо о новом HTML-элементе для поиска, которого пока даже нет на caniuse.

Коротко: вместо role="search" можно будет использовать тег <search> и тратить три лишних символа. Зато семантика!

А ещё search была последней aria-ролью, у которой не было своего семантического тега. А теперь есть. Ура.

👉 https://tml.io/search