Привет, печатаю не глядя, очень тяжело смотреть на этот код

Тем не менее, вот воскресная загадка для самых стойких — что делает этот код?

Смотрите, какие технологии древних

Фронтенд-новости 48. Свежие статьи и новости веб-разработки за последнюю неделю.

💫 Что нового

TypeScript 5.0. Декораторы, улучшенная поддержка проектов ESM для Node и упаковщиков, const параметры типов и многое другое.

Transformers.js: запуск моделей машинного обучения в браузере.

Проекту Электрон — 10 лет. Вау. Сколько ж всего на нём понаделали.


🧬 HTML и CSS

Основы фронтенд-разработки: фреймворки, DOM-дерево, взаимодействие с бэкендом.

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

Шесть CSS-сниппетов, которые должен знать каждый фронтендер в 2023.

Выбор предыдущих родственников (ну те, которые siblings) с помощью CSS :has()

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

«Сначала дизайн, потом сборка»: давайте разберёмся с этим мифом навсегда. Не ждите, пока дизайнеры всё додизайнят — делайте.

Создание часов с новыми функциями CSS sin() и cos(). Тригонометрия (вспомнили, вздрогнули?) теперь есть в последних версиях Firefox и Safari.

Не ставьте одинаковые радиусы скругления внутри и снаружи чего угодно.

Как изменить фавиконку при переключении вкладок браузера.

Календари с учетом доступности и интернационализации.

Вложенность в CSS. Узнайте, как CSS Nesting позволяет использовать любимую функцию препроцессора в Интернете.

Все, что вам нужно знать о пробеле после маркера списка.


🏝️ JavaScript

В каком порядке перечисляются ключи в объектах: случайном или по определённым правилам? Игорь Антонов с подробным видеоразбором.

Создание и загрузка текстовых файлов с помощью JavaScript.

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

Что такое Vite и зачем его использовать вместо CRA?

Список пожеланий для компилятора React.

Как перетаскивать штуковины в React

«Пять ошибок, которые я совершил, начиная свой первый проект React»

Ленивая загрузка маршрутов в React Router 6.4+

Как отлаживать ошибки сегментации узла. Нормальные исключения — это одно, но когда вы сталкиваетесь с чем-то столь загадочным, как «ошибка сегментации (сброс ядра)», что вам делать?


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

А ну-ка

Авторизацию и аутентификацию легко спутать, но это разные вещи.

👉 Аутентификация — это проверка, что вы действительно тот человек, за которого себя выдаёте.

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

👉 Авторизация — это получение права доступа к чему-то.

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

Подробнее:
https://htmlacademy.ru/blog/js/authorization-vs-authentification

Самый важный опрос выходных:

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

Итак, правильный ответ — буква 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