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

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

🔁 Стикерпак «Обнови»

Что это: известно, что все программисты очень любят помогать своим родственникам и друзьям с компьютерами, а знакомым джунам — с кодом.

Стикерпак «Обнови» ускоряет решение проблем и выводит жизнь программистов на новый уровень. Например, освободившееся время можно потратить на книги о тайм-менеджменте, которые вы всегда откладывали.

Где пригодится:
— Слушай, всё не работает, меня тут вообще не было, оно само
—

🎙 Подкаст «Про код», эпизод 6. Отказ от паролей, апдейт VS Code и менеджер версий Node.js

Коротко: обсудили длинный список обновлений в VS Code, поговорили про любимые темы оформления и поругались из-за C#. Поняли, почему :root — не глобальный и зачем переключаться между версиями Node.js. Бонус-трек — история о том, как Лёша собирал проект с Node.js 0.12 в 2023.

00:00:00 Начало
00:00:35 Обновки VS Code
00:21:30 Passcode в Гугл-аккаунтах
00:29:35 :root не является глобальным
00:36:51 Медиавыражение update
00:43:45 Менеджер версий Node.js
00:58:28 Памятка по доступным размерам элементов

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

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

💫 Релизы

jQuery 3.7.0 (что? да!). Добавлен метод .uniqueSort(), поддержка большего количества безблочных свойств CSS, исправление отрицательных полей в outerHeight(true) и изменились нативные события фокуса в IE. Срочно обновляйтесь!

Legend-State 1.0 — супербыстрая библиотека состояний React, основанная на Observables.

Safari Technology Preview 170. Обновления в CSS, макете, JavaScript, Media, Popover и Accessibility.


🧬 HTML и CSS

Что нового в CSS и UI: Google I/O 2023 Edition — обзор 20 самых классных штучек в веб-интерфейсах, которые недавно появились или будут доступны уже скоро.

Условный CSS с :has и :nth-last-child. :nth-last-child позволяет выбирать элементы, считая с конца, а селектор :has проверяет, имеет ли родительский элемент определенное количество элементов.

Семантика и атрибут popover: что и когда использовать? В HTML5 появился новый атрибут popover, который добавляет поведение, но не меняет семантику элементов.


🏝️ JavaScript

Нужна полная поддержка типов без TypeScript? Используйте аннотации JSDoc — они предлагают те же возможности статического анализа, что и TypeScript.

Предложение Promise.withResolvers stage 2 направлено на упрощение создания промисов с помощью статического метода в конструкторе Promise.

Ваши тесты Jest могут быть неправильными, а настройки clearMocks, resetMocks, restoreMocks и resetModules могут усложнить вам жизнь.

Учебник по React с TypeScript поможет вам освоить все необходимые навыки, включая типизацию компонентов, работу с хуками и многое другое.

Как разработчики Node.js снизили затраты на сериализацию строк при парсинге URL в Node.js, благодаря оптимизациям, которые привели к выпуску Ada v2.0.0.

В Chromium появился новый подход к headless.

Новый Bundler от Bun: в 220 раз быстрее, чем webpack? Новый бандлер отличается слаженностью, скоростью и предоставляет унифицированный API плагинов.


🦭 Общее

Как превратить Android-смартфон в веб-сервер, к которому можно получить доступ по общедоступному URL-адресу. Для этого понадобится Termux.

Как Google пытался исправить Интернет захватив его. AMP-страницы должны были помочь Google в развитии мобильного интернета. Сейчас AMP уже толком не работает, и Google ищет свой следующий шаг.

Если используете Web SQL, то уже начинайте планировать его замену. В Chromium 97 была удалена поддержка Web SQL для сторонних контекстов, а в следующих версиях функция будет удалена для всех контекстов.

—

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

📚 9 книг по JavaScript для начинающих

Что это: обновлённая подборка книг, с которых стоит начать изучение фронтенда, если вам заблокировали Ютуб, Тикток и htmlacademy.ru

Коротко: Морган, Флэнаган, Хавербеке, Бхаргава, Маркис, Мартин, Симпсон, Фримен, Крокфорд, раунд!

👉 https://tml.io/9books