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

Material Design - FAB Motion Animation Анимация изменения дизайна при нажатии. Написана с помощью JavaScript и CSS. #CodePen

Как дебажить код на JavaScript: примеры ошибок и советы новичкам. Эта статья предназначена для тех, кто только недавно научился писать свои первые программы на JavaScript и испытывает трудности при поиске багов. Хорошо подана информация о том, над чем стоит задуматься и куда смотреть при отладке кода. #Полезное

"The Last Duel" Movie Trailer Стильная анимация смены оформленных фотографий, реализованная с помощью React и GSAP. #CodePen

Никакие платные курсы больше не нужны — по этим 4 каналам можно освоить Frontend-разработку с нуля 👇 📌Senior Frontend — JS, HTML и CSS 📌Frontend Interview — как проходить собеседования 📌Web Craft — только Web-разработка 📌Frontender Libs — библиотеки для фронтендера

Макет Figma по организации водных путешествий 🗂 Категория: Лендинг 💵 Сложность: Простой 📱 Адаптив: ✅ 📄 Страницы макета: Главная #Макет

Content reveal cards Слайдер карточек, работающий от скролла. Реализовано с помощью CSS. #CodePen

Как в 1.5 раза повысить производительность фронтенда высоконагруженного интернет-магазина на Next.js? В этой статье — автор, на примере задачи по повышению производительности крупного сайта, показывает, каким образом его можно оптимизировать. Также приводится много полезных ссылок и инструментов, которые вы сможете использовать в своих проектах. #Полезное

Framer Motion Библиотека анимации для React, которая подходит для использования в проектах. Она использует функциональность, предоставляемую Framer - лучшим инструментом для прототипирования команд. Библиотека создана на основе открытого исходного кода. #React

CSS Variables Изменение изображения с помощью ползунков. Реализовано с помощью CSS и JS. #CodePen

Sortable.js Библиотека для создания интерактивных списков и таблиц, которые можно перетаскивать и сортировать при помощи мыши или сенсорного экрана. Sortable.js имеет широкий выбор функций и настроек: возможность блокировки элементов, анимации перетаскивания и поддержку событий drag-and-drop. #GitHub

Parallax scroll animation Эффект прокрутки параллакс #CodePen

Movie App Concept Идеальный слайдер для мобильной версии #CodePen

Алгоритмы поиска подстроки на JavaScript.

"Алгоритм грубой силы" или "Алгоритм простого поиска"
"Алгоритм Робина - Карпа"
"Алгоритм Кнута - Морриса - Пратта (КМП)"

#Полезное

iOS Notifications Анимированные оповещения в стиле iOS. Реализованы с помощью SCSS и TypeScript. #CodePen

Макет Figma лендинг покупки дома 🗂 Категория: Лендинг 💵 Сложность: Простой 📱 Адаптив: ❌ 📄 Страницы макета: Главная #Макет

Rolling Radio Buttons Прокручивающиеся radio-кнопки, выполненные с помощью CSS и JavaScript. #CodePen

Микрофронтенд: что это такое и зачем он нужен? Микрофронтенды — это деление монолитного приложения на семантически изолированные части и их независимая разработка. В статье приведены сравнения способов организации микрофронтенда, показаны их преимущества и стратегии реализации. #Полезное