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

👩‍💻 Настраиваем иерархию стилей в проекте! Когда проект растёт, стили начинают перебиваться и путаться. 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() делают код лаконичным и легко читаемым при управлении стилями

❓ Зачем используется метод focus() в JavaScript и когда его применять? Метод focus() устанавливает курсор ввода в элемент формы, делая его активным для пользователя. Это удобно для улучшения UX — например, при автоматическом фокусе на первом поле формы или после действий пользователя. ✅Пример:

<input type="text" id="username" placeholder="Введите имя">

<script>
  const input = document.getElementById("username");
  window.addEventListener("load", () => input.focus());
</script>

📌В этом примере focus() автоматически активирует поле ввода при загрузке страницы

focus() удобно использовать для навигации по формам, активации поиска, подсветки ошибок или управления клавиатурным вводом. Это помогает сделать интерфейс более интуитивным и доступным

⚙️ Топ 5 причин, когда JavaScript блокирует загрузку вашего сайта

На основе наблюдений я выделил 5 самых проблемных случая, когда JavaScript блокирует загрузку сайта. В статье вы узнаете, как с ними бороться.

🔗 Читать статью