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

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

الذهاب إلى القناة على Telegram

Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6

إظهار المزيد
روسيا78 685التكنولوجيات والتطبيقات14 099
7 744
المشتركون
-224 ساعات
-107 أيام
لا توجد بيانات30 أيام
أرشيف المشاركات
\n\n📌В этом примере кнопка Отправить становится активной только тогда, когда пользователь ввёл текст.\n\ndisabled удобно использовать при валидации форм, управлении состоянием UI и предотвращении повторных действий (например, двойного клика по кнопке). Это делает интерфейс более надёжным и дружелюбным","datePublished":"2025-09-28T09:00:53Z","dateModified":"2025-09-28T09:00:53Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":705},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3524","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3524","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3524","headline":"Фронтенд Гайд","datePublished":"2025-09-27T09:04:29Z","dateModified":"2025-09-27T09:04:29Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":651},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3523","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3523","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3523","headline":"👩‍💻 Smooth Pulse Button — Пульсирующая кнопка для воспроизведения видео Сделано на CSS 🔗 Открыть код","articleBody":"👩‍💻 Smooth Pulse Button — Пульсирующая кнопка для воспроизведения видео\n\nСделано на CSS\n\n🔗 Открыть код","datePublished":"2025-09-26T15:04:40Z","dateModified":"2025-09-26T15:04:40Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":699},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3522","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3522","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3522","headline":"Фронтенд Гайд","datePublished":"2025-09-26T07:02:00Z","dateModified":"2025-09-26T07:02:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":691},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3521","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3521","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3521","headline":"⚙️ CSS, который все ненавидят: sin() и cos() Мы разберёмся, что делают sin() и cos(), и посмотрим на практиче…","articleBody":"⚙️ CSS, который все ненавидят: sin() и cos()\n\nМы разберёмся, что делают sin() и cos(), и посмотрим на практические примеры: от круговых раскладок до затухающих анимаций.\n\n🔗 Читать статью","datePublished":"2025-09-25T15:01:25Z","dateModified":"2025-09-25T15:01:25Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":670},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3520","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3520","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3520","headline":"Фронтенд Гайд","datePublished":"2025-09-25T07:01:47Z","dateModified":"2025-09-25T07:01:47Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":664},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3519","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3519","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3519","headline":"Фронтенд Гайд","datePublished":"2025-09-24T15:04:58Z","dateModified":"2025-09-24T15:04:58Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":628},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3518","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3518","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3518","headline":"👩‍💻 button animation — Эффект наведения на ссылку с появлением указательной стрелки Сделано на CSS 🔗 Открыть…","articleBody":"👩‍💻 button animation — Эффект наведения на ссылку с появлением указательной стрелки\n\nСделано на CSS\n\n🔗 Открыть код","datePublished":"2025-09-24T07:03:08Z","dateModified":"2025-09-24T07:03:08Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":660},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3517","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3517","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3517","headline":"⚙️ Отправиться на тот цвет: CSS Color 4. Как добавить яркие краски в серые веб-будни Поведаю о цветовых прост…","articleBody":"⚙️ Отправиться на тот цвет: CSS Color 4. Как добавить яркие краски в серые веб-будни\n\nПоведаю о цветовых пространствах спецификации CSS Color 4, объясню их уникальность и специфику, расскажу о сценариях применения и плюсах, которые можно от этого получить.\n\n🔗 Читать статью","datePublished":"2025-09-23T15:03:07Z","dateModified":"2025-09-23T15:03:07Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":646},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3516","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3516","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3516","headline":"Фронтенд Гайд","datePublished":"2025-09-23T07:03:01Z","dateModified":"2025-09-23T07:03:01Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":635},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3515","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3515","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3515","headline":"👩‍💻 Card UI Design — Появление кнопки со смещением остальных элементов при наведении на карточку Сделано на C…","articleBody":"👩‍💻 Card UI Design — Появление кнопки со смещением остальных элементов при наведении на карточку\n\nСделано на CSS\n\n🔗 Открыть код","datePublished":"2025-09-22T15:01:33Z","dateModified":"2025-09-22T15:01:33Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":673},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3514","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3514","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3514","headline":"Фронтенд Гайд","datePublished":"2025-09-22T07:04:00Z","dateModified":"2025-09-22T07:04:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":672},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3513","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3513","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3513","headline":"❓ Зачем используется свойство placeholder в HTML и когда его применять? Атрибут placeholder задаёт текст-подс…","articleBody":"❓ Зачем используется свойство placeholder в HTML и когда его применять?\n\nАтрибут placeholder задаёт текст-подсказку внутри поля ввода, которая исчезает, когда пользователь начинает вводить данные. Это удобно для улучшения UX и пояснения назначения поля.\n\n✅Пример:\n\n\n\n\n📌В этом примере подсказки помогают пользователю понять, что нужно ввести в каждое поле.\n\nplaceholder удобно использовать в формах, когда нужно кратко показать формат или пример данных. Однако он не заменяет полноценные