Тут такое дело. Подошёл Коля Шабалин и попросил опубликовать правильный ответ

Итак, правильный ответ — буква j. Две шкатулки в студию!

⚡Молния. CSS проведёт масштабный ребрендинг. Наверное. Когда-нибудь. Мы не проверяли

Блог Академии → Журнал «Доктайп»

Мы в HTML Academy почти 10 лет писали важные статьи о веб-разработке в своём блоге, а потом поняли, что блог компании уже не блог компании, а вполне себе что-то большее.

Поэтому теперь у нас вот так — целый журнал!

Мы продолжим рассказывать о фронтенде, разбирать новости, помогать вам разобраться в айтишечке и будем отвлекать вас опросами во время выходных. Потому что а как ещё поступать с такими прекрасными вами?

Совсем скоро расскажем и покажем много интересного. А пока продолжайте не отписываться так долго, как можете :)

Ну и читайте журнал «Доктайп»:
👉 https://tml.io/doctype

Пройдите фронтендерский психологический тест.

Перед вами фигура с толщиной линии 14 пикселей:

Вы в порядке

Если фигура показалась вам странной, то вам не показалось.

Свойство border-radius позволяет скруглять углы у элементов на странице, причём для каждого угла задаётся свой радиус. У этой почти окружности border-radius такой:

border-radius: 179px 185px 181px 189px;

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

Искажения могут стать более очевидными при масштабировании страницы или просмотре на разных устройствах.

👉 Лучше задавайте одинаковые значения для border-radius, если у вас нет особой дизайнерской задумки — так и ваше чувство прекрасного, и ваши пользователи целее будут.

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


🎙 Стоит обсудить

Конец фронтенда. Как GPT-4 может помогает в обучении новчикам. Не переживайте, что вас заменит ИИ, так как веб-интерфейсы — это сложно.

Почему логические свойства не вытеснили всё остальное? Потому что нужно привыкнуть, старые проекты никуда не делись, а некоторые свойства ещё не поддерживают логичечность.

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

React обновил документацию. Отношения к обновлению неоднозначные.


🧬 HTML и CSS

Постепенное улучшение таблицы с помощью веб-компонента.

Как :focus-visible в 4 этапа принимает решение, отображаться ему или нет.

Что нового в Eleventy 2: прекрасный инструмент для простых статичных сайтов теперь весит меньше и собирается быстрее.

Как сделать круговой текст с помощью CSS?

Как сделать книгу с помощью HTML и CSS. Главная сложность — понадобится Linux, Python и программа weasyprint.

🏝️ JavaScript

▶️ Почему результатом ['1', '2', '3'].map(parseInt) стал [1, NaN, NaN]? Игорь Антонов с детальным разбором задачи с собеседований.

На 95 собрании ТС39 анонсировали явное управление ресурсами, атрибут импорта, асинхронный контекст, Float16Array, Iterator.range, Await Dictionary, декораторы параметров метода класса, Promise.withResolvers и канонизация часовых поясов.

А так ли нужны JS-фреймворки? Ответ на статью о конце фронтенда

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

Как загружать файлы с помощью JavaScript.

Каким будет Svelte 4?

Пошаговое руководство по Astro.

Полное руководство по мутациям в JavaScript.


🚀 React

У документации новый домен react.dev, а старый официально устарел. А ещё новая документация React игнорирует SPA.

Как сделать SPA исключительно на стороне клиента с помощью Next.js

Интернационализация в Next.js 13 с React Server компонентами.

Откуда и для чего появились хуки в React.

Как остановить визуализацию компонента React. Вы можете вернуть null из компонента, чтобы указать, что он не должен ничего отображать.

Как тестирование доступности помогло понять useRef.

Очистка useEffect и два последствия, которые она вызывает.


💫 Node.js

Гранулярные токены в npm для хитрого ограничения доступа к определённым пакетам.

Автоматическая публикация с помощью Github Actions и гранулярных токенов.

Вышел deno 1.32 с поддержкой TS 5.0.

Почему в Deno добавили поддержку package.json.

Миграция с ts-node на Bun.

Как использовать Postman для тестирования API сервера.


🦭 Общее

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

Статья-ностальгия о том, как блоги сформировали интернет.

Маленькие советы по дизайну: несколько простых способов сделать контент красивым.

Никогда не было так просто подобрать шрифтовые пары, как с этим проектом.

DOCX 8.0. Создайте .docx-файлы с помощью Node.js.

Как эффективно читать код. Разберитесь в задаче, используйте комментарии и документации, разбейте код на части и не стесняйтесь использовать отладчик.

—

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

🔥 Подкаст «Про код»

Весь прошлый год мы выпускали текстовую версию фронтенд-новостей, а вы её читали и узнавали гору нового. Но теперь новости можно не только читать, но и слушать в подкасте «Про код».

Раз в неделю Коля Шабалин (автор курсов по вёрстке и «Фронтенд-новостей»), Игорь Антонов (автор курсов по JS), Лёша Симоненко (вы его знаете) и Женя Шкляр (который не очень любит писать о себе в третьем лице) будут обсуждать свежие новости и объяснять, зачем, все эти новые фронтендерские штучки использовать в работе.

Короче, поговорим про код. Первый выпуск уже ждёт вас ⬇️

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

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