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

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

Ir al canal en Telegram

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

Mostrar más
Rusia78 586Tecnologías y Aplicaciones14 041
7 713
Suscriptores
-624 horas
-187 días
-4230 días

Carga de datos en curso...

Canales Similares
Сайтодел | GitHub, Верстка, Сайты, Вайбкодинг
25.8K
Сайтодел | GitHub, Верстка, Сайты, Вайбкодинг
xCode Journal
14.0K
xCode Journal
Frontender Libs - обзор библиотек JS / CSS
7.5K
Frontender Libs - обзор библиотек JS / CSS
Библиотека верстальщика
2.9K
Библиотека верстальщика
Макеты для HTML вёрстки сайтов || Assedo Studio
2.1K
Макеты для HTML вёрстки сайтов || Assedo Studio
avatar
1
Más canales
Nube de Etiquetas
javascript26
css22
html13
flow12
api11
архитектура9
загрузка9
интерфейс9
preventdefault8
frontend7
script7
usecallback7
ввод7
строка7
программирование6
хук6
based5
dom5
фича5
фичи5
Menciones Entrantes y Salientes
---
---
---
---
---
---
Atraer Suscriptores
septiembre '26
septiembre '26
+17
en 0 canales
agosto '26
+88
en 0 canales
Get PRO
julio '26
+51
en 1 canales
Get PRO
junio '26
+1 646
en 4 canales
Get PRO
mayo '260
en 0 canales
Get PRO
abril '26
+4
en 0 canales
Get PRO
marzo '26
+6
en 1 canales
Get PRO
febrero '26
+6
en 3 canales
Get PRO
enero '26
+10
en 1 canales
Get PRO
diciembre '25
+72
en 9 canales
Get PRO
noviembre '25
+55
en 0 canales
Get PRO
octubre '25
+56
en 0 canales
Get PRO
septiembre '25
+51
en 0 canales
Get PRO
agosto '25
+65
en 0 canales
Get PRO
julio '25
+44
en 0 canales
Get PRO
junio '25
+44
en 0 canales
Get PRO
mayo '25
+71
en 0 canales
Get PRO
abril '25
+82
en 0 canales
Get PRO
marzo '25
+56
en 0 canales
Get PRO
febrero '25
+114
en 0 canales
Get PRO
enero '25
+102
en 0 canales
Get PRO
diciembre '24
+189
en 0 canales
Get PRO
noviembre '24
+166
en 1 canales
Get PRO
octubre '24
+201
en 0 canales
Get PRO
septiembre '24
+156
en 0 canales
Get PRO
agosto '24
+227
en 0 canales
Get PRO
julio '24
+217
en 0 canales
Get PRO
junio '24
+254
en 0 canales
Get PRO
mayo '24
+301
en 0 canales
Get PRO
abril '24
+332
en 0 canales
Get PRO
marzo '24
+388
en 0 canales
Get PRO
febrero '24
+282
en 0 canales
Get PRO
enero '24
+162
en 0 canales
Get PRO
diciembre '23
+263
en 6 canales
Get PRO
noviembre '23
+951
en 31 canales
Get PRO
octubre '23
+38
en 1 canales
Get PRO
septiembre '23
+356
en 0 canales
Get PRO
agosto '23
+542
en 0 canales
Get PRO
julio '23
+13
en 0 canales
Get PRO
junio '23
+15
en 0 canales
Get PRO
mayo '23
+27
en 0 canales
Get PRO
abril '23
+81
en 0 canales
Get PRO
marzo '23
+309
en 0 canales
Get PRO
febrero '23
+15
en 0 canales
Get PRO
enero '23
+33
en 0 canales
Get PRO
diciembre '22
+354
en 0 canales
Get PRO
noviembre '22
+1 251
en 0 canales
Get PRO
octubre '22
+35
en 0 canales
Get PRO
septiembre '22
+11
en 0 canales
Get PRO
agosto '22
+22
en 0 canales
Get PRO
julio '22
+69
en 0 canales
Get PRO
junio '22
+30
en 0 canales
Get PRO
mayo '22
+75
en 0 canales
Get PRO
abril '22
+60
en 0 canales
Get PRO
marzo '22
+630
en 0 canales
Get PRO
febrero '22
+470
en 0 canales
Get PRO
enero '22
+1 403
en 0 canales
Get PRO
diciembre '21
+3 816
en 0 canales
Fecha
Crecimiento de Suscriptores
Menciones
Canales
16 septiembre+3
15 septiembre0
14 septiembre+1
13 septiembre+1
12 septiembre0
11 septiembre+3
10 septiembre+1
09 septiembre+1
08 septiembre+1
07 septiembre+1
06 septiembre+1
05 septiembre0
04 septiembre+1
03 septiembre+1
02 septiembre+2
01 septiembre0
\n\n📌В этом примере append() добавляет новый элемент
  • в конец списка\n\nappend() удобно использовать при генерации списков, карточек, уведомлений и других динамических компонентов. В отличие от appendChild(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким","datePublished":"2026-09-10T11:54:19Z","dateModified":"2026-09-10T11:54:19Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":639},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4005","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4005","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4005","headline":"Различие между Object.freeze() и const const и Object.freeze – две разные фичи JavaScript. const применяется…","articleBody":"Различие между Object.freeze() и const\n\nconst и Object.freeze – две разные фичи JavaScript. const применяется только для неизменяемой ссылки на ячейку памяти со значением, что означает невозможность задать новое значение для переменной.\n\nObject.freeze работает со значениями объектов. Делает объект неизменяемым, то есть изменить его свойства невозможно.","datePublished":"2026-09-09T14:06:17Z","dateModified":"2026-09-09T14:06:17Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"image":["https://n1.tlmtr.cc/p/5233692734701376971?ty=l"],"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":699},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4004","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4004","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4004","headline":"OpenAI потеряли $38,5 млрд в 2025 году — это почти втрое больше их выручки. Отчет о финансовом положении комп…","articleBody":"OpenAI потеряли $38,5 млрд в 2025 году — это почти втрое больше их выручки. Отчет о финансовом положении компании оказался в сети.\n\nНадежность данных подтвердили в Financial Times. Всего за год чистый убыток создателей ChatGPT вырос почти в 8 раз. При этом они активно готовятся к выходу на биржу.\n\nДействительно некоммерческая компания.","datePublished":"2026-09-08T10:04:54Z","dateModified":"2026-09-08T10:04:54Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"image":["https://n3.tlmtr.cc/p/_y58rydzW1P9i4jW12kgklSjWaqRUX4c6xttYCAqH68E?ty=l"],"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":770},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4003","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4003","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4003","headline":"Claude Cowork теперь в браузере и на телефоне, работа не останавливается когда вы закрываете ноутбук Cowork э…","articleBody":"Claude Cowork теперь в браузере и на телефоне, работа не останавливается когда вы закрываете ноутбук\n\nCowork это режим, где вы даете Claude задачу целиком, а он сам ковыряется в файлах, календаре, почте и вебе, пока не доведет до конца. Раньше он жил только на компьютере, поэтому все замирало как только вы закрывали ноутбук.\n\nТеперь задача идет за вами по устройствам, продолжается в фоне даже с выключенным ноутбуком, а когда нужен ваш выбор, вопрос прилетает уведомлением на телефон.\n\nНапример, ставите подготовку к встрече на 6 утра понедельника, Claude читает переписку, транскрипты созвонов и свежие новости по клиенту, собирает бриф и накидывает черновик письма. Утром просто открываете готовое.\n\nПо данным самой Anthropic больше 90% задач в Cowork это не код, а офисная рутина, сведение расходов, трекеры договоров, сборка презентаций из транскриптов встреч.\n\nБета раскатывается волнами, первыми получают пользователи тарифа Max. Лимиты Cowork удвоены до 5 августа.","datePublished":"2026-09-07T14:20:31Z","dateModified":"2026-09-07T14:20:31Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":772},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4002","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4002","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4002","headline":"Настраиваем иерархию стилей в проекте! Когда проект растёт, стили начинают перебиваться и путаться. CSS дал р…","articleBody":"Настраиваем иерархию стилей в проекте!\n\nКогда проект растёт, стили начинают перебиваться и путаться. CSS дал решение - каскадные слои.\n\nСоздайте слои с приоритетом:\n@lаyer reset, base, components, utilities;\n\nТеперь порядок каскада становится управляемым: слои идут строго в указанной последовательности, а внутри слоя продолжают работать обычные правила (специфичность и порядок объявления).\n\nНапример, базовые стили:\n@lаyer base {\nbutton {\nfont-size: 1rem;\n}}\n\nКомпоненты идут выше по приоритету:\n@lаyer components {\n.btn-primary {\nfont-size: 1.1rem;\n}}\n\nИ утилиты завершают каскад:\n@lаyer utilities {\n.fs-lg {\nfont-size: 1.25rem;\n}}\n\n🔥 Так исчезают конфликты слоёв, приоритеты всегда предсказуемы, проще мигрировать и рефакторить большие проекты.","datePublished":"2026-09-06T10:55:52Z","dateModified":"2026-09-06T10:55:52Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":719},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4001","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4001","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4001","headline":"HTML-совет Не используй input type=\"number\" для важных числовых полей — типа почтового индекса, номера карты…","articleBody":"HTML-совет\n\nНе используй input type=\"number\" для важных числовых полей — типа почтового индекса, номера карты и т.п.\n\nПочему?\n- На десктопе появляется ненужный спиннер.\n- Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз.\n\nВместо этого — используй inputmode=\"numeric\" + pattern\n\n✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX.\n✅ Добавляет валидацию на цифры.","datePublished":"2026-09-06T10:52:30Z","dateModified":"2026-09-06T10:52:30Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":622},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4000","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4000","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/4000","headline":"📂 Напоминалка для работы с React.js! Например, useState помогает хранить состояние компонента, а useEffect —…","articleBody":"📂 Напоминалка для работы с React.js!\n\nНапример, useState помогает хранить состояние компонента, а useEffect — работать с побочными эффектами и запросами к API.\n\nНа картинке — основные темы и приёмы, которые чаще всего используются в React-разработке: хуки, рендеринг, формы, роутинг, стилизация и оптимизация.\n\nСохрани, чтобы не забыть!","datePublished":"2026-09-05T10:54:52Z","dateModified":"2026-09-05T10:54:52Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":654},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3999","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3999","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3999","headline":"CEO Y Combinator выкатил свой сетап для Claude Code Это целая виртуальная команда из 10+ ролей, которая живёт…","articleBody":"CEO Y Combinator выкатил свой сетап для Claude Code\n\nЭто целая виртуальная команда из 10+ ролей, которая живёт внутри CLI. Теперь мы живем в реальности, где один человек гоняет 5–10 агентов параллельно: они пишут код, тесты, сами находят баги и фиксят их. У самого Гарри получается до 10–20к строк кода в день при работе «параллельно с CEO».\n\nПо факту это превращает Claude в управляемый софтверный завод с ролями, процессами и гейтами.","datePublished":"2026-09-05T09:36:24Z","dateModified":"2026-09-05T09:36:24Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":732},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3998","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3998","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3998","headline":"Напоминалка для работы с Git. Например, git push отправляет твои изменения на сервер, а git checkout позволяе…","articleBody":"Напоминалка для работы с Git.\n\nНапример, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками.\n\nНа картинке — 12 самых нужных команд, которые стоит держать под рукой.\n\nСохрани, чтобы не забыть!","datePublished":"2026-09-04T10:54:52Z","dateModified":"2026-09-04T10:54:52Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":740},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3997","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3997","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3997","headline":"Растягивай абсолютные элементы в одну строку — через inset! Многие задают абсолютным элементам растяжение вру…","articleBody":"Растягивай абсолютные элементы в одну строку — через inset!\n\nМногие задают абсолютным элементам растяжение вручную:\n.block::before {\n position: absolute;\n top: 0; right: 0; bottom: 0; left: 0;\n content: \"\";\n}\n\nНо то же самое можно записать короче — одной строкой:\n.block {\n position: relative;\n}\n.block::before {\n position: absolute;\n inset: 0;\n content: \"\";\n}\n\ninset: 0 означает сразу: top: 0; right: 0; bottom: 0; left: 0; — элемент растянется по родителю.\n\n🔥 Полезно для оверлеев, эффектов, декоративных слоёв и background-паттернов.","datePublished":"2026-09-03T10:54:52Z","dateModified":"2026-09-03T10:54:52Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":729},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3996","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3996","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3996","headline":"😂👍","articleBody":"😂👍","datePublished":"2026-09-02T10:53:52Z","dateModified":"2026-09-02T10:53:52Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":762},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3995","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3995","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3995","headline":"Возможно, вы не знали, что можно напрямую получить значение числового input-поля как число с помощью valueAsN…","articleBody":"Возможно, вы не знали, что можно напрямую получить значение числового input-поля как число с помощью valueAsNumber. Ручное преобразование не требуется\n\nСвойство value у HTMLInputElement всегда возвращает строку.\n\nПоэтому для числовых полей нам приходится вручную преобразовывать значение в число с помощью parseInt(), parseFloat(), Number() или оператора +.\n\nМы можем упростить это, используя valueAsNumber. Оно напрямую возвращает значение как число.","datePublished":"2026-09-01T10:53:52Z","dateModified":"2026-09-01T10:53:52Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":820},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3994","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3994","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3994","headline":"Фронтенд Гайд","datePublished":"2026-08-31T10:55:52Z","dateModified":"2026-08-31T10:55:52Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":799},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3993","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3993","mainEntityOfPage":"https://telemetr.io/es/channels/1681900587-frontend_dev5/posts/3993","headline":"Напоминалка для работы с DOM! DOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые…","articleBody":"Напоминалка для работы с DOM!\n\nDOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые узлы, вешает события и реагирует на действия пользователя.\n\nНа картинке — базовые методы document и node, а также самые часто используемые события мыши, клавиатуры и форм.\n\nСохрани, чтобы не забыть!","datePublished":"2026-08-30T10:53:52Z","dateModified":"2026-08-30T10:53:52Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/es/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":817},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}}]}
    Publicaciones del Canal
    Фронтенд Гайд
    🎠 Карусель с CSS без JavaScript CSS Scroll Snap позволяет автоматически фиксировать прокрутку на ближайшей карточке. Настраи
    🎠 Карусель с CSS без JavaScript CSS Scroll Snap позволяет автоматически фиксировать прокрутку на ближайшей карточке. Настраиваем горизонтальный контейнер: 
    .slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
    Затем указываем точку фиксации для каждой карточки: 
    .slide {
  flex: 0 0 80%;
  scroll-snap-align: start;
}
    Теперь после прокрутки ближайшая карточка сама выровняется по началу контейнера. Для более плавного поведения можно добавить: 
    .slider {
  scroll-behavior: smooth;
}
    Подходит для мобильных подборок, галерей, отзывов и карточек товаров. #css #frontend #вебразработка

    2
    💬 Всплывающее окно без JavaScript Нативный Popover API позволяет создавать меню, подсказки и небольшие всплывающие панели ср
    💬 Всплывающее окно без JavaScript Нативный Popover API позволяет создавать меню, подсказки и небольшие всплывающие панели средствами HTML. Добавляем кнопку: <button popovertarget="menu"> Открыть </button> Создаём всплывающий элемент: <div id="menu" popover> Содержимое </div> После нажатия браузер самостоятельно откроет элемент. Повторное нажатие, клик снаружи или клавиша Escape закроют его. При необходимости окно можно оформить через CSS: [popover] { padding: 20px; border: 0; border-radius: 12px; box-shadow: 0 12px 40px #0004; } Меньше JavaScript — проще управление состоянием и базовой доступностью интерфейса. #html #frontend #webdev
    540
    3
    ⛔️ Как отменить fetch-запрос Если пользователь изменил поисковый запрос, покинул страницу или закрыл компонент, предыдущий за
    ⛔️ Как отменить fetch-запрос Если пользователь изменил поисковый запрос, покинул страницу или закрыл компонент, предыдущий запрос может стать ненужным. Отменить его можно через AbortController. Создаём контроллер: const controller = new AbortController(); Передаём его сигнал в fetch: fetch(url, { signal: controller.signal }); Когда запрос больше не нужен — отменяем: controller.abort(); При отмене fetch завершится с ошибкой AbortError, которую можно обработать отдельно: try { await fetch(url, { signal: controller.signal }); } catch (error) { if (error.name !== 'AbortError') { throw error; } } Особенно полезно для поиска, фильтров, переходов между страницами и размонтирования компонентов. #javascript #frontend #fetch
    614
    4
    📐 Адаптивный размер текста с CSS clamp() Чтобы текст плавно менялся вместе с шириной экрана, необязательно создавать несколь
    📐 Адаптивный размер текста с CSS clamp() Чтобы текст плавно менялся вместе с шириной экрана, необязательно создавать несколько media-запросов. Функция clamp() принимает три значения: .title { font-size: clamp(24px, 5vw, 64px); } Здесь: • 24px — минимальный размер; • 5vw — гибкое значение; • 64px — максимальный размер. На маленьком экране заголовок не станет меньше 24px, а на большом — не превысит 64px. clamp() подходит не только для текста: .card { padding: clamp(16px, 4vw, 40px); gap: clamp(8px, 2vw, 24px); } Удобный способ создавать адаптивные интерфейсы с меньшим количеством media-запросов. Сохраняйте, чтобы не потерять 📎 #css #frontend #вебразработка
    636
    5
    Как менять стиль родителя с помощью CSS :has() Раньше CSS умел выбирать только сам элемент или его потомков. Чтобы изменить р
    Как менять стиль родителя с помощью CSS :has() Раньше CSS умел выбирать только сам элемент или его потомков. Чтобы изменить родителя в зависимости от содержимого, часто приходилось использовать JavaScript. Теперь это можно сделать через псевдокласс :has(). Например, подсветим поле, внутри которого есть невалидный input: .field:has(input:invalid) { border-color: #ff4d4f; background: #fff2f2; } Можно изменить карточку при наведении на кнопку: .card:has(.card__button:hover) { transform: translateY(-4px); box-shadow: 0 12px 30px #0002; } Или убрать нижний отступ у блока, если внутри нет описания: .card:not(:has(.card__description)) { padding-bottom: 16px; } Также :has() удобно использовать для форм, меню, карточек и переключателей: .form:has(input:focus) { outline: 2px solid #2684ff; } Главное преимущество — интерфейс реагирует на состояние вложенных элементов без дополнительных классов и JavaScript. Сохраняйте, чтобы не потерять 📎 #css #frontend #вебразработка
    601
    6
    Как адаптировать компонент по ширине контейнера, а не экрана Обычные media-запросы ориентируются на ширину окна браузера. Но
    Как адаптировать компонент по ширине контейнера, а не экрана Обычные media-запросы ориентируются на ширину окна браузера. Но один и тот же компонент может находиться в широкой секции, узком сайдбаре или сетке карточек. Для таких случаев в CSS есть контейнерные запросы. Сначала нужно объявить родительский элемент контейнером: .card-wrapper { container-type: inline-size; } После этого стили компонента можно менять в зависимости от ширины именно этого контейнера: .card { display: grid; grid-template-columns: 1fr; } @container (min-width: 560px) { .card { grid-template-columns: 160px 1fr; } } Теперь карточка сама переключит компоновку, когда для неё появится достаточно места — независимо от ширины всего экрана. Контейнерные запросы особенно удобны для карточек, виджетов, сайдбаров и переиспользуемых компонентов в больших интерфейсах.
    608
    7
    ❓ Зачем используется метод append() в JavaScript и когда его применять? Метод append() добавляет один или несколько элементов или текст в конец указанного DOM-элемента. Это современный и удобный способ динамически изменять содержимое страницы. ✅Пример: <ul id="list"></ul> <script> const list = document.getElementById("list"); const newItem = document.createElement("li"); newItem.textContent = "Новый элемент"; list.append(newItem); </script> 📌В этом примере append() добавляет новый элемент <li> в конец списка append() удобно использовать при генерации списков, карточек, уведомлений и других динамических компонентов. В отличие от appendChild(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким
    639
    8
    Различие между Object.freeze() и const const и Object.freeze – две разные фичи JavaScript. const применяется только для неизм
    Различие между Object.freeze() и const const и Object.freeze – две разные фичи JavaScript. const применяется только для неизменяемой ссылки на ячейку памяти со значением, что означает невозможность задать новое значение для переменной. Object.freeze работает со значениями объектов. Делает объект неизменяемым, то есть изменить его свойства невозможно.
    699
    9
    OpenAI потеряли $38,5 млрд в 2025 году — это почти втрое больше их выручки. Отчет о финансовом положении компании оказался в
    OpenAI потеряли $38,5 млрд в 2025 году — это почти втрое больше их выручки. Отчет о финансовом положении компании оказался в сети. Надежность данных подтвердили в Financial Times. Всего за год чистый убыток создателей ChatGPT вырос почти в 8 раз. При этом они активно готовятся к выходу на биржу. Действительно некоммерческая компания.
    770
    10
    Claude Cowork теперь в браузере и на телефоне, работа не останавливается когда вы закрываете ноутбук Cowork это режим, где вы
    Claude Cowork теперь в браузере и на телефоне, работа не останавливается когда вы закрываете ноутбук Cowork это режим, где вы даете Claude задачу целиком, а он сам ковыряется в файлах, календаре, почте и вебе, пока не доведет до конца. Раньше он жил только на компьютере, поэтому все замирало как только вы закрывали ноутбук. Теперь задача идет за вами по устройствам, продолжается в фоне даже с выключенным ноутбуком, а когда нужен ваш выбор, вопрос прилетает уведомлением на телефон. Например, ставите подготовку к встрече на 6 утра понедельника, Claude читает переписку, транскрипты созвонов и свежие новости по клиенту, собирает бриф и накидывает черновик письма. Утром просто открываете готовое. По данным самой Anthropic больше 90% задач в Cowork это не код, а офисная рутина, сведение расходов, трекеры договоров, сборка презентаций из транскриптов встреч. Бета раскатывается волнами, первыми получают пользователи тарифа Max. Лимиты Cowork удвоены до 5 августа.
    772
    11
    Настраиваем иерархию стилей в проекте! Когда проект растёт, стили начинают перебиваться и путаться. CSS дал решение - каскадн
    Настраиваем иерархию стилей в проекте! Когда проект растёт, стили начинают перебиваться и путаться. CSS дал решение - каскадные слои. Создайте слои с приоритетом: @lаyer reset, base, components, utilities; Теперь порядок каскада становится управляемым: слои идут строго в указанной последовательности, а внутри слоя продолжают работать обычные правила (специфичность и порядок объявления). Например, базовые стили: @lаyer base { button { font-size: 1rem; }} Компоненты идут выше по приоритету: @lаyer components { .btn-primary { font-size: 1.1rem; }} И утилиты завершают каскад: @lаyer utilities { .fs-lg { font-size: 1.25rem; }} 🔥 Так исчезают конфликты слоёв, приоритеты всегда предсказуемы, проще мигрировать и рефакторить большие проекты.
    719
    12
    HTML-совет Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п. Почему? -
    HTML-совет Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п. Почему? - На десктопе появляется ненужный спиннер. - Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз. Вместо этого — используй inputmode="numeric" + pattern ✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX. ✅ Добавляет валидацию на цифры.
    622
    13
    📂 Напоминалка для работы с React.js! Например, useState помогает хранить состояние компонента, а useEffect — работать с побо
    📂 Напоминалка для работы с React.js! Например, useState помогает хранить состояние компонента, а useEffect — работать с побочными эффектами и запросами к API. На картинке — основные темы и приёмы, которые чаще всего используются в React-разработке: хуки, рендеринг, формы, роутинг, стилизация и оптимизация. Сохрани, чтобы не забыть!
    654
    14
    CEO Y Combinator выкатил свой сетап для Claude Code Это целая виртуальная команда из 10+ ролей, которая живёт внутри CLI. Теп
    CEO Y Combinator выкатил свой сетап для Claude Code Это целая виртуальная команда из 10+ ролей, которая живёт внутри CLI. Теперь мы живем в реальности, где один человек гоняет 5–10 агентов параллельно: они пишут код, тесты, сами находят баги и фиксят их. У самого Гарри получается до 10–20к строк кода в день при работе «параллельно с CEO». По факту это превращает Claude в управляемый софтверный завод с ролями, процессами и гейтами.
    732
    15
    Напоминалка для работы с Git. Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переклю
    Напоминалка для работы с Git. Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками. На картинке — 12 самых нужных команд, которые стоит держать под рукой. Сохрани, чтобы не забыть!
    740
    16
    Растягивай абсолютные элементы в одну строку — через inset! Многие задают абсолютным элементам растяжение вручную: .block::be
    Растягивай абсолютные элементы в одну строку — через inset! Многие задают абсолютным элементам растяжение вручную: .block::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; } Но то же самое можно записать короче — одной строкой: .block { position: relative; } .block::before { position: absolute; inset: 0; content: ""; } inset: 0 означает сразу: top: 0; right: 0; bottom: 0; left: 0; — элемент растянется по родителю. 🔥 Полезно для оверлеев, эффектов, декоративных слоёв и background-паттернов.
    729
    17
    😂👍
    😂👍
    762
    18
    Возможно, вы не знали, что можно напрямую получить значение числового input-поля как число с помощью valueAsNumber. Ручное пр
    Возможно, вы не знали, что можно напрямую получить значение числового input-поля как число с помощью valueAsNumber. Ручное преобразование не требуется Свойство value у HTMLInputElement всегда возвращает строку. Поэтому для числовых полей нам приходится вручную преобразовывать значение в число с помощью parseInt(), parseFloat(), Number() или оператора +. Мы можем упростить это, используя valueAsNumber. Оно напрямую возвращает значение как число.
    820
    19
    Sin texto...
    799
    20
    Напоминалка для работы с DOM! DOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые узлы, вешает со
    Напоминалка для работы с DOM! DOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые узлы, вешает события и реагирует на действия пользователя. На картинке — базовые методы document и node, а также самые часто используемые события мыши, клавиатуры и форм. Сохрани, чтобы не забыть!
    817
    Ver todas las publicaciones