Наконец-то кто-то мне объяснил, зачем нужен npm i (и почему он так странно запускается без остальных аргументов). И сделал это, кстати, студент Академии.

👉 https://tml.io/automation

🖊 Кодпен дня — демка Color Fonts. Свежая фича для тех, кто особенно любит поиграться со шрифтами

👉 https://codepen.io/robinrendle/pen/YpxXLx

🔥 Знакомьтесь, это Сергей Левин. Он получил один из трёх грантов на прокачку в Академии в этом году — и вот история его становления.

Теперь ждём сиквел и третью часть от Сэма Рэйми (только не как в прошлый раз)

👉 https://tml.io/grant

Фронтенд-новости #28. 10—16 октября

Очередная пачка полезностей для фронтендеров. Например, штучка на видео — кликаете в элемент на сайте и переходите в нужный JS-компонент в редакторе кода.

И внутри ещё много такого.

👉 https://tml.io/frontend-28

Недавно один из студентов спросил

Когда использовать type predicates в TypeScript? Например, когда к одному обработчику можно применить union type и в нем задать TouchEvent | MouseEvent? Для чего использовать in?

Ответили подробно и с примерами.

👉 https://tml.io/type-predicates

Привет. Самый важный опрос выходных:

Пока мы голосовали про браузеры, вышли Firefox 106, Node.js 19.0.0 и два десятка статей о фронтенде. Так что всем новости!

На гифке анимация Box Shadow — кто бы вообще подумал, что и так можно?

👉 https://tml.io/frontend-29

Привет. Мы ностальгически расчехлили Word 95 и написали статью о том, зачем фронтендерам разбираться в дизайне.

И там гора нюансиков, которые постоянно выпадают из головы.

👉 https://tml.io/design

В 2009 году мы могли зарегистрировать почти любую почту, но все были как минимум superhotmaster666, а то и deff40nka_iz_torzhka или dota.king.9000.

Теперь кому-то это аукается при поиске работы и приходится заводить новые почты и удалять школьные фотки из «Моего мира», чтобы выглядеть серьёзнее.

Узнайте, что еще сделать, чтобы ваше резюме как минимум дочитали до конца.

👉 https://tml.io/good-cv

🔥Главные фронтенд-новости последней недели

Node.js 18 становится LTS, как все и ожидали. Будьте аккуратны — переход с 16 версии может пройти не гладко. Некоторые пакеты ещё не успели обновиться и падают при переходе на новую версию.

Не слишком ли много сейчас CSS? Сейчас нам доступны 559 CSS-свойств, а сколько из них изучить, чтобы сделать вообще все сайты?

CSS Color Module 4 и новый OKLCH. Как работает oklch() и почему его важно использовать вместо RGB и HSL. Сейчас поддержка ограничена — буквально всё работает только в Safari.

Все остальные статьи и новости за неделю — в юбилейном выпуске фронтенд-новостей.

А на картинке — анимированные гриды. Прикиньте.

👉 https://tml.io/frontend-30

Привет. На прошлой неделе вышла Node.js 19.0.0. Игорь Антонов, автор курсов по JavaScript в Академии, подготовил небольшой обзор обновлений для тех, кто ещё не определился, обновляться или нет.

Вдруг поможет :)

👉 https://tml.io/node19

Дженерики — мощь, если их правильно использовать. Вот простая аналогия, которая поможет понять их суть.

Подробнее — в блоге.

👉 https://tml.io/generic

Очередной крайне важный опрос. Голосуйте сердцем:

🔥 Главные фронтенд-новости прошлой недели

👉 Теперь всем, кто поддерживает npm-пакеты с миллионом загрузок в неделю или с более, чем 500 зависимостями, придётся включить двухфакторную аутентификацию. Это всё ещё не идеальная защита от неприятных казусов с подменой кода в популярных пакетах, но уже лучше, чем ничего.

👉 Опубликован новый синтаксис диапазонов для медиавыражений. Прикольно, удобно (см. картинку), но пока без поддержки Safari.

👉 Вышли практические советы по цветовому соответствию и контрасту WCAG 2.1. Прочитайте и используйте, потому что доступность всё ещё важна, даже если вы просто собираете лендосы на Тильде для ста пользователей.

Хорошей недели!

Мы тут постоянно пишем про Node.js 19.0.0, WCAG 2.1 и другие штуки с номерами версий из трёх чисел.

Смотрите, как правильно менять номера версий по спецификации SEMVER:

И вот что важно — соблюдение SEMVER помогает избежать проблем при обновлении пакетов в npm.

Объясняем, почему при установке пакетов появляется ^ перед номером версии и как это помогает всему не сломаться.

👉 https://tml.io/package-update

Кодпен дня — демка селектора :has()

В примере — два списка ul. С помощью has выделяем рамкой тот, в котором есть элемент с классом demo.

👉 https://codepen.io/tomhodgins/pen/pQGMOz