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

👩‍💻 Signature animation — Поле для ввода подписи с интересной анимацией.

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

🔗 Открыть код

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

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

button.addEventListener("click", () => {
  console.log("Кнопка нажата!");
});

📌В этом примере addEventListener() добавляет обработчик клика по кнопке.

addEventListener() удобно использовать для работы с кликами, вводом текста, прокруткой, ресайзом окна и любыми другими событиями. Он поддерживает множественные обработчики, удаление через removeEventListener() и захват событий, что делает его универсальным инструментом для работы с DOM.

👩‍💻 Button with tooltip hover timing feedback — Панель плеера с подсказками при наведении.

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

🔗 Открыть код

⚙️ i18n и l10n: Почему разработчикам стоит об этом знать — и как может помочь ИИ

Пока строки в шаблоне были на английском — всё шло гладко. А потом пришёл Узбекистан. Рассказываю, как i18n и l10n становятся пожаром, если не думать о них с начала проекта

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

👩‍💻 Gooey SVG Filter Button — Анимированная кнопка с эффектом при наведении.

Сделано на SVG, CSS и JavaScript

🔗 Открыть код

👩‍💻 Что такое инкрементальная гидратация в Angular

Объясняю, как инкрементальная гидратация в Angular решает парадокс SSR: страница рендерится быстро, но клики молчат. Разбираем, как оживить интерфейс без лишней задержки и сделать его реально быстрым

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

Регистрируйтесь на Yandex Ecom Open Air 8 августа Море инсайтов для бизнеса, музыкальный open-air, лекции и нетворкинг. Участие бесплатно! Зарегистрироваться #реклама 18+ ecomfest.ru О рекламодателе

👩‍💻 Dropdown Menu Effects — Анимированное выпадающее меню с переливающимся эффектом.

Сделано на SCSS и TypeScript

🔗 Открыть код

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

const title = document.querySelector(".title");
title.textContent = "Hello, World!";

📌В этом примере querySelector() находит элемент с классом title и меняет его текст.

querySelector() удобно использовать при работе с формами, кнопками, модальными окнами и любыми элементами интерфейса. Он поддерживает все CSS-селекторы (.class, #id, tag[attr=value]) и делает код лаконичным по сравнению с устаревшими методами вроде getElementById().

👩‍💻 Cards with inverted border-radius — Карточки товаров с интересным решением для кнопки.

Сделано на SCSS

🔗 Открыть код

⚙️ Очень вероятно, что эти HTML- и CSS-ошибки есть в вашем коде

Разобрал реально критичные HTML и CSS-ошибки, которые встречаю у коллег. Не вкусовщина, а баги, ломающие интерфейс. Список субъективный, но аргументированный. Готов поспорить — или согласитесь?

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