Фронтенд Гайд

💼Можно ли управлять отображением цифр в тексте без подмены шрифта? Свойство font-variant-numeric позволяет управлять начертаниями цифр и связанных с ними символов. Принимает одно или несколько значений: • normal — отключает альтернативное начертание; • ordinal — добавляет дополнительные глифы для порядковых числительных; • slashed-zero — ноль будет с чертой внутри; • lining-nums — каждая цифра лежит на базовой линии текста; • oldstyle-nums — набор строчных цифр, в котором 3, 4, 7, 9 свешиваются с базовой линии; • proportional-nums — допустима разная ширина цифр; • tabular-nums — одинаковая ширина каждой цифры; • diagonal-fractions — числитель и знаменатель в дроби уменьшены и разделены косой чертой; • stacked-fractions — числитель и знаменатель в дроби уменьшены и разделены горизонтальной линией. Это свойство работает только со шрифтами, в которых заложены OpenType фичи.

❌ Когда useMemo и useCallback делают только хуже Все любят useMemo и useCallback. А точнее, все любят думать, что они ускоряют приложение. Но проблема в том, что в реальных проектах они часто могут ухудшить производительность, а не улучшить. Давайте разберёмся, когда эти хуки на самом деле становятся более вредными, чем полезными. 🗳 Оптимизация, где её нет Начнём с того, что если компонент и так рендерится быстро, то использовать useMemo не имеет смысла. Эти хуки добавляют ненужную работу: React всё равно должен хранить зависимости, сравнивать их и поддерживать ссылки в памяти. А для чего? Чтобы оптимизировать то, что и так работает нормально? Это самый популярный антипаттерн, с которым сталкиваются почти все фронтендеры. ⬅️ «useCallback ради useCallback» Очень частая ситуация: оборачиваем колбэк в useCallback, думая, что это спасёт нас от лишних рендеров. Но на самом деле, если эта функция не передаётся в memo-компонент и не участвует в зависимостях эффектов, то useCallback просто создаёт лишний шум в коде, не давая ни улучшений в производительности, ни каких-то других плюсов. ❗️ Ломается читаемость Забудьте про чистоту кода. Когда вы обвешиваете всё хуками, как ёлку игрушками, код становится сложнее для восприятия и поддержки. Особенно это важно для новых людей в команде: приходится разбираться в логике, а зависимости в коде ломаются быстрее, чем вы успеваете заметить. 🔫 Иллюзия оптимизации Самая опасная ошибка — это когда вы начинаете думать, что «всё оптимизировано», потому что начали использовать useMemo и useCallback везде. Но настоящие проблемы обычно кроются в лишних рендерах из-за стейта, тяжёлых эффектах, layout thrashing и, конечно же, неправильной архитектуре компонентов. Эти проблемы не решаются хуками. 📌 Помните, что оптимизация не всегда требует использования дополнительных хуков. Прежде чем применять эти инструменты, важно понять, действительно ли это необходимо. Оптимизация должна быть направлена на уменьшение лишней работы, а не на усложнение кода.

👩‍💻 Настраиваем иерархию стилей в проекте! Когда проект растёт, стили начинают перебиваться и путаться. CSS дал решение - каскадные слои. Создайте слои с приоритетом: @layer reset, base, components, utilities; Теперь порядок каскада становится управляемым: слои идут строго в указанной последовательности, а внутри слоя продолжают работать обычные правила (специфичность и порядок объявления). Например, базовые стили: @layer base { button { font-size: 1rem; }} Компоненты идут выше по приоритету: @layer components { .btn-primary { font-size: 1.1rem; }} И утилиты завершают каскад: @layer utilities { .fs-lg { font-size: 1.25rem; }} 🔥 Так исчезают конфликты слоёв, приоритеты всегда предсказуемы, проще мигрировать и рефакторить большие проекты.

Обрати внимание, что в корректном примере чипы мгновенно перемещаются на новую позицию, когда один из чипов удаляется. Это происходит из-за режима popLayout в AnimatePresence из motion/react, который обеспечивает более плавную и быструю анимацию при удалении элемента

📂 Напоминалка для работы с React.js! Например, useState помогает хранить состояние компонента, а useEffect — работать с побочными эффектами и запросами к API. На картинке — основные темы и приёмы, которые чаще всего используются в React-разработке: хуки, рендеринг, формы, роутинг, стилизация и оптимизация. Сохрани, чтобы не забыть!

Держите полезную CLI-утилиту — npkill, предназначенную для удаления всех папок node_modules в проектах. Позволяет освободить значительное количество места на диске Запускаешь команду: npx npkill Дальше, просто нажимаешь [Пробел], чтобы удалить те папки, которые больше не используешь Удобно ещё и то, что она показывает, сколько дней назад была последняя модификация

🤓 Напоминалка для работы с Git. Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками. На картинке — 12 самых нужных команд, которые стоит держать под рукой. Сохрани, чтобы не забыть!

👩‍💻 Растягивай абсолютные элементы в одну строку — через inset! Многие задают абсолютным элементам растяжение вручную: .block::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; } Но то же самое можно записать короче — одной строкой: .block { position: relative; } .block::before { position: absolute; inset: 0; content: ""; } inset: 0 означает сразу: top: 0; right: 0; bottom: 0; left: 0; — элемент растянется по родителю. 🔥 Полезно для оверлеев, эффектов, декоративных слоёв и background-паттернов.

Возможно, вы не знали, что можно напрямую получить значение числового input-поля как число с помощью valueAsNumber. Ручное преобразование не требуется Свойство value у HTMLInputElement всегда возвращает строку. Поэтому для числовых полей нам приходится вручную преобразовывать значение в число с помощью parseInt(), parseFloat(), Number() или оператора +. Мы можем упростить это, используя valueAsNumber. Оно напрямую возвращает значение как число.

📂 Напоминалка для работы с DOM! DOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые узлы, вешает события и реагирует на действия пользователя. На картинке — базовые методы document и node, а также самые часто используемые события мыши, клавиатуры и форм. Сохрани, чтобы не забыть!

Жесть: вот, что видит ваш iPhone, когда вы используете разблокировку по Face ID ночью. Бедный телефончик. 😅

🐈‍⬛ Робособаками в США управляют индийцы. В Атланте полицейская подошла к робопсу на патруле, а тот внезапно заговорил с отчетливым индийским акцентом. Оказалось, сам робот — просто корпус. Реальное управление ведут операторы из Индии, которых нанимают частные охранные компании для дистанционного патрулирования районов.

⚡️ Искусственный интеллект превратил GTA в реалистичные фильмы с актёрами. Нейросети создали живые сцены из GTA: Vice City и San Andreas – так правдоподобно, что многие могут принять ролики за настоящие съёмки. Особенно впечатляет Уилл Смит в роли Си Джея.

🎧 Самый хардкорный геймерский сетап. Китаец показал своё рабочее место с 15 мониторами, 8 клавиатурами и 4 мышками. Среди них – ноутбуки, планшеты и даже Steam Deck. Комната как центр управления АЭС.

😂 «Дело Долиной» будет включено в учебники для юристов. Ведущие вузы страны решили добавить эффект «Долиной» в программу для студентов юрфаков. Обсуждение уже идет на семинарах по гражданскому праву. Теперь это не просто мем.

❓ Зачем используется метод classList в JavaScript и когда его применять? Свойство element.classList предоставляет удобный интерфейс для управления CSS-классами элемента. Это проще и безопаснее, чем ручное управление через className. ✅Пример:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  button.classList.toggle("active");
});

📌В этом примере при каждом клике класс active добавляется или удаляется, в зависимости от текущего состояния.

classList удобно использовать при работе с анимациями, состоянием компонентов, переключателями тем и видимостью элементов. Методы .add(), .remove(), .toggle() и .contains() делают код лаконичным и легко читаемым при управлении стилями