Фронтенд Гайд
Открыть в Telegram
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6
Больше7 650
Подписчики
-324 часа
-267 дней
-5030 дней
Архив постов
\n\n📌В этом примере dataset даёт доступ к атрибутам data-user-id и data-role.\n\ndataset удобно использовать для передачи параметров в JS без жёсткой привязки к классам или id: идентификаторы пользователей, статусы элементов, флаги состояния. Это делает код более гибким, читаемым и декларативным.","datePublished":"2025-08-17T09:01:49Z","dateModified":"2025-08-17T09:01:49Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":715},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3448","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3448","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3448","headline":"Фронтенд Гайд","datePublished":"2025-08-16T09:03:08Z","dateModified":"2025-08-16T09:03:08Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":704},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3447","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3447","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3447","headline":"👩💻 Fluid Simulation — Сцена с интересной симуляцией жидкости с текстом. Сделана на CSS и JavaScript 🔗 Открыт…","articleBody":"👩💻 Fluid Simulation — Сцена с интересной симуляцией жидкости с текстом.\n\nСделана на CSS и JavaScript\n\n🔗 Открыть код","datePublished":"2025-08-15T15:05:01Z","dateModified":"2025-08-15T15:05:01Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":698},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3446","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3446","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3446","headline":"Фронтенд Гайд","datePublished":"2025-08-15T06:24:48Z","dateModified":"2025-08-15T06:24:48Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":704},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3445","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3445","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3445","headline":"⚙️ Поиск на RxJS и Taiga UI Разбираем, как собрать несколько внешних поисков (люди, ссылки, исходники), скеле…","articleBody":"⚙️ Поиск на RxJS и Taiga UI\n\nРазбираем, как собрать несколько внешних поисков (люди, ссылки, исходники), скелетоны и обработку ошибок, подключать новые источники без правок UI. Операторы, профит\n\n🔗 Читать статью","datePublished":"2025-08-14T15:02:23Z","dateModified":"2025-08-14T15:02:23Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":681},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3444","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3444","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3444","headline":"Фронтенд Гайд","datePublished":"2025-08-14T07:05:03Z","dateModified":"2025-08-14T07:05:03Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":685},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3443","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3443","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3443","headline":"Фронтенд Гайд","datePublished":"2025-08-13T15:04:12Z","dateModified":"2025-08-13T15:04:12Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":680},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3442","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3442","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3442","headline":"👩💻 Idea Form — Анимированная форма для ввода с появлением при нажатии. Сделана на SCSS и TypeScript 🔗 Открыт…","articleBody":"👩💻 Idea Form — Анимированная форма для ввода с появлением при нажатии.\n\nСделана на SCSS и TypeScript\n\n🔗 Открыть код","datePublished":"2025-08-13T06:31:59Z","dateModified":"2025-08-13T06:31:59Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":730},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3441","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3441","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3441","headline":"⚙️ Как гуманитарий создал сайт с нуля при помощи DeepSeek. Примеры рабочих промптов История о том, как гумани…","articleBody":"⚙️ Как гуманитарий создал сайт с нуля при помощи DeepSeek. Примеры рабочих промптов\n\nИстория о том, как гуманитарий себе сайт навайбкодил. Внутри - примеры промптов, код и размышления на тему RLHF\n\n🔗 Читать статью","datePublished":"2025-08-12T15:01:42Z","dateModified":"2025-08-12T15:01:42Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":725},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3440","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3440","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3440","headline":"Фронтенд Гайд","datePublished":"2025-08-12T03:41:55Z","dateModified":"2025-08-12T03:41:55Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":699},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}}]}
Anonymous voting
Anonymous voting
Anonymous voting
Anonymous voting
Anonymous voting
Anonymous voting
7 655
⚙️ Понимание CSS corner-shape и сила суперэллипса
Покажу, как corner-shape приручает углы — не только округлять, а вырезать, заострять и комбинировать. Разберём примеры, нюансы поддержки и как уйти от SVG/картинок. Будут демки.🔗 Читать статью
7 655
В обработчике клика вы вызываете queueMicrotask(A), затем requestAnimationFrame(B), затем setTimeout(C, 0). В каком порядке вызовутся колбэки относительно ближайшего кадра?
7 655
Онлайн-магистратура с IT специальностями от Яндекса
Совместно с ИТМО, МИФИ, МФТИ.
Онлайн-магистратура с актуальными программами и гибким графиком обучения.
Получите высокооплачиваемую IT профессию, официальный диплом и практические знания.
Господдержка оплаты. Совмещение с работой!
Подать заявку
#реклама 16+
О рекламодателе
7 655
👩💻 Shiny call-to-action button — Анимированная кнопка с эффектом при наведении.
Сделана на чистом CSS🔗 Открыть код
7 655
⚙️ Скриншоты сайта в адаптивную Tailwind верстку
Расскажу, как я накатал Python-скрипт (~200 строк), который из трёх скринов сайта (десктоп/планшет/мобила) собирает одну адаптивную HTML-вёрстку на Tailwind; код, демо и подводные камни.🔗 Читать статью
7 655
В React-списке с контролируемыми можно удалять элементы из середины. Сейчас key — индекс массива. Пользователи жалуются, что текст «переезжает» в соседние строки после удаления. Что делать?
7 655
👩💻 Text Illumination — Сцена с анимированным появлением текста.
Сделана на SVG и CSS🔗 Открыть код
7 655
Настраиваете CSP. Нужно запретить любой инлайн-JS, но оставить один критичный инлайн-скрипт, который меняется на каждом ответе. Скрипты грузятся с вашего домена и CDN. Что выбрать?
7 655
❓ Зачем используется свойство
dataset в JavaScript и когда его применять?
Свойство dataset позволяет получать и изменять пользовательские атрибуты data-* у HTML-элементов. Это удобный способ хранить дополнительную информацию прямо в разметке, не перегружая код.
✅Пример:
<button id="btn" data-user-id="42" data-role="admin">Click me</button>
<script>
const btn = document.getElementById("btn");
console.log(btn.dataset.userId); // "42"
console.log(btn.dataset.role); // "admin"
</script>dataset удобно использовать для передачи параметров в JS без жёсткой привязки к классам или id: идентификаторы пользователей, статусы элементов, флаги состояния. Это делает код более гибким, читаемым и декларативным.
7 655
👩💻 Fluid Simulation — Сцена с интересной симуляцией жидкости с текстом.
Сделана на CSS и JavaScript🔗 Открыть код
7 655
В PWA нужен быстрый онлайновый старт, фоновое обновление и оффлайн-фоллбэк. Какую стратегию выбрать для HTML и статических ассетов (rev-hash в именах)?
7 655
⚙️ Поиск на RxJS и Taiga UI
Разбираем, как собрать несколько внешних поисков (люди, ссылки, исходники), скелетоны и обработку ошибок, подключать новые источники без правок UI. Операторы, профит🔗 Читать статью
7 655
Вы на странице A. С высокой вероятностью через пару секунд пользователь перейдёт на страницу товара B. Нужно ускорить первую отрисовку B, не мешая текущему рендеру A и не ломая кеши. Что лучше сделать?
7 655
👩💻 Idea Form — Анимированная форма для ввода с появлением при нажатии.
Сделана на SCSS и TypeScript🔗 Открыть код
7 655
⚙️ Как гуманитарий создал сайт с нуля при помощи DeepSeek. Примеры рабочих промптов
История о том, как гуманитарий себе сайт навайбкодил. Внутри - примеры промптов, код и размышления на тему RLHF🔗 Читать статью
7 655
Статический CSS отдается с Cache-Control: public, max-age=31536000, immutable. Через неделю вышло изменение. Какой подход — best practice — чтобы пользователи получили новую версию без очистки кеша у себя?
