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

Вы любите табы, пользуетесь хромом, хотите зарплату побольше, пишете на аштиэмэл, сиэсэс и джаваскрипт, слышали про май эскюэл, иногда не очень хорошо работаете в команде, почитываете спеку 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, чтобы не пропустить новые выпуски.

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

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

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

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

Фронтенд-новости 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