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

📂 Напоминалка для работы с 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 блокирует загрузку сайта. В статье вы узнаете, как с ними бороться.

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

👩‍💻 Profile Card UI — Стильная карточка-портфолио с анимированными кнопками.

Сделан на SVG, SCSS и JS

🔗 Открыть код

🔄 Ребята из Яндекса уволились и открыли свой новый канал! 🔥 Всё в одном архиве для твоего роста и результата: 👩‍💻 Python 👩‍💻 Java 👩‍💻 JavaScript 👩‍💻 C# & Unity 👩‍💻 Node.js 👩‍💻 C & C++ 👩‍💻 SQL & Базы данных 👩‍💻 Git & GitHub 🤟 DevOps БЕСПЛАТНЫЕ КУРСЫ по всем ключевым направлениям только для наших сабов! ❤️ ➡️ Наша миссия — твой рост

⚡️ Бесплатное обучение фронтенд-разработке с нуля до React — с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 24 по 28 декабря проводит бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать самый популярный фреймворк — React 💡Всё объясняет на примере проекта — доски объявлений Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способами поиcка клиентов с поомщью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать, осталось 33 места Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду ➡️Участвовать бесплатно + среди участников разыграет годовую подписку на полезный ИИ