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

👩‍💻 Интересная анимация спирального текста.

Сделан на CSS и JS

🔗 Открыть код

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

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

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

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

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

👩‍💻 On-Scroll Fire Transition — Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript

Сделан на CSS и JS

🔗 Открыть код

⚙️ Ваш сайт теряет пользователей прямо сейчас. Виноват один символ: '+' в email

Пишу, как dev-ленивость убивает UX: зачем плюсы в email, почему их режут, и как это тупо нарушает стандарты. Спойлер: фиксим одну строку и спасаем карму.

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

👩‍💻 Check Done SVG Animated — Красиво анимированная галочка

Сделан на SVG и SCSS

🔗 Открыть код

⚙️ Альтернатива чатам с ИИ для анализа и оптимизации SQL запросов

Задолбался формулировать промты ИИ для SQL-оптимизации. Сделал тул, который сразу анализирует запрос и даёт рекомендации — никакого диалога, просто результат. Удобно и по делу.

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

👩‍💻 Hover Glyph Button — Кнопка с анимированным эффектом при наведении.

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

🔗 Открыть код

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

const users = [
  { name: "Alice" },
  { name: "Bob" },
  { name: "Charlie" }
];

users.forEach(user => {
  console.log(`Hello, ${user.name}!`);
});
// ➜ Hello, Alice!
// ➜ Hello, Bob!
// ➜ Hello, Charlie!

📌В этом примере forEach() перебирает всех пользователей и выполняет побочный эффект — выводит приветствие.

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

👩‍💻 Collapsible Timeline — Таймлайн с возможностью раскрывать пункты.

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

🔗 Открыть код

🧠 Frontend и OpenAPI: генерация клиента, мокирование API и данных с помощью MSW

Покажу, как генерировать код из OpenAPI и мокаю запросы, чтобы автоматизировать разработку и не страдать каждый раз, когда фронт и бэк снова не договорились.

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