Фронтенд Гайд
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
Fancy wipe

Стильный текст с анимированным появлением
Гит, предпосылки его появления и современное использование в веб-разработке

Рассказываю, как отказ от BitKeeper подтолкнул Линуса Торвальдса написать git, почему «менеджер из ада» стал стандартом де-факто и как всё это связано с болью, опенсорсом и первыми коммитами
This media is not supported in your browser
VIEW IN TELEGRAM
Firefly Button

Кнопка с анимированным эффектом при наведении
Да, этот HTML и CSS старый, но всё ещё полезный

Собрал фичи HTML и CSS, которые появились 5+ лет назад, но до сих пор почти никто не использует. Хотя зря — они реально упрощают жизнь. Не туториал, а список напоминаний
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll-Driven Dock

Настраиваемая панель инструментов
Зачем используется метод map() в JavaScript и когда его применять

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

Пример:

const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 28 }
];

const names = users.map(user => user.name);
console.log(names);
// ➜ ["Alice", "Bob", "Charlie"]


📌 В этом примере map() извлекает имена пользователей и формирует новый массив.

map() удобно использовать при трансформации данных: генерации списков для отрисовки в интерфейсе, подготовке значений для таблиц, фильтров, автозаполнения. Метод делает код лаконичным, чистым и декларативным.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Seal of gravity

Сцена с кнопкой и анимированным тюленем
Как я навайбкодил ИИ-переводчик для браузера, потому что остальные — унылый мусор

Я починил плохой перевод силами ИИ, написав расширение при помощи ИИ. И я удивлён, что до сих пор такого не сделали.
This media is not supported in your browser
VIEW IN TELEGRAM
Cube & Dots Loader

Анимированная загрузка в виде точек и куба
Простой веб-сайт

На этом сайте — не музей, а живое путешествие по памяти о старом вебе. Рассказываю, как и почему воссоздал дух начала 2000-х, где iPhone не было, а сайты писались в Блокноте
👍3👏1