Фронтенд Гайд
7.33K subscribers
601 photos
298 videos
268 links
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов!

Все представлено в виде готового кода, бери и юзай в своем проекте.

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
⚙️ Альтернатива чатам с ИИ для анализа и оптимизации SQL запросов

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


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Check Done SVG Animated — Красиво анимированная галочка

Сделан на SVG и SCSS


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
⚙️ Ваш сайт теряет пользователей прямо сейчас. Виноват один символ: '+' в email

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


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 On-Scroll Fire Transition — Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript

Сделан на CSS и JS


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
🤨2
Зачем используется метод classList в JavaScript и когда его применять?

Свойство element.classList предоставляет удобный интерфейс для управления CSS-классами элемента. Это проще и безопаснее, чем ручное управление через className.

Пример:

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

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


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

classList удобно использовать при работе с анимациями, состоянием компонентов, переключателями тем и видимостью элементов. Методы .add(), .remove(), .toggle() и .contains() делают код лаконичным и легко читаемым при управлении стилями
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Интересная анимация спирального текста.

Сделан на CSS и JS


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
1
⚙️ Дружеское знакомство с SVG

Показываю, как встроил SVG в рабочий стек, чем он крут, какие трюки уже можно юзать. Статья для тех, кто знает HTML/CSS/JS, но с SVG ещё не на «ты». Всё просто, чётко и без магии.


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Profile Card UI — Стильная карточка-портфолио с анимированными кнопками.

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


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
⚙️ Очень вероятно, что эти HTML- и CSS-ошибки есть в вашем коде

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


🔗 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
2
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Cards with inverted border-radius — Карточки товаров с интересным решением для кнопки.

Сделано на SCSS


🔗 Открыть код
Please open Telegram to view this post
VIEW IN TELEGRAM
3