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

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

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Hover Glyph Button

Кнопка с анимированным эффектом при наведении
Перенаправления в Angie: return, rewrite и примеры их применения

В этой статье мы разберём все основные методы перенаправлений: от простых до сложных. Начнём с общего принципа обработки директив в модуле rewrite.
This media is not supported in your browser
VIEW IN TELEGRAM
Collapsible Timeline

Таймлайн с возможностью раскрывать пункты
Где хибара деревянная, а где град каменный: сказ о сайтах простых и сложных

Когда стоит задача «нужен сайт», то есть три пути: шаблон, конструктор и разработка с нуля. Разбираемся, когда не стоит экономить, а когда лучше вообще не начинать.
This media is not supported in your browser
VIEW IN TELEGRAM
Playbook CSS scroll animation w/ subgrid

Сцена с интересной реализацией анимированного скролла
Зачем используется метод every() в JavaScript и когда его применять?

Метод every() проверяет, удовлетворяют ли все элементы массива заданному условию. Это удобно, когда нужно убедиться, что каждый элемент соответствует критерию, без написания явного цикла.

Пример:

const scores = [92, 85, 88, 95, 90];
const allPassed = scores.every(score => score >= 80);
console.log(allPassed); // true


📌 В этом примере every() вернёт true, потому что все оценки больше или равны 80.

every() удобно использовать при валидации форм, проверке соответствия данных, или при условной логике в UI — например, когда нужно убедиться, что все чекбоксы отмечены. Делает код чище, понятнее и избавляет от громоздких циклов.
👍51
This media is not supported in your browser
VIEW IN TELEGRAM
Product Filtering UI

Интерфейс фильтрации товаров
👍1
Как разработчики убивают бизнес

Рассказываю, как программисты с опытом в проектах всех мастей сливают деньги компании — не багами, а поведением. Прагматично, жёстко, с прицелом на деньги. PM-ам читать дважды
This media is not supported in your browser
VIEW IN TELEGRAM
Fancy Fading Footer

Подвал с анимированным размытием при скролле
Практическое руководство по иконкам в веб-проектах — Часть 1

Все ставят иконки, но мало кто думает, как. В этой статье разбираюсь, где, зачем и почему иконки работают (или не очень) в интерфейсе. Без теории — только практическое применение
This media is not supported in your browser
VIEW IN TELEGRAM
Infinitely drawing icons

Интерактивный фон с эффектом при перемещении курсора