Senior Frontend - javascript, html, css
رفتن به کانال در Telegram
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
نمایش بیشتر
📈 تحلیل کانال تلگرام Senior Frontend - javascript, html, css
کانال Senior Frontend - javascript, html, css (@seniorfront) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 23 446 مشترک است و جایگاه 5 670 را در دسته فناوری و برنامه‌ها و رتبه 27 878 را در منطقه روسيا دارد.
📊 شاخص‌های مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 23 446 مشترک جذب کرده است.
بر اساس آخرین داده‌ها در تاریخ 12 نوامبر, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر -336 و در ۲۴ ساعت گذشته برابر -8 بوده و همچنان دسترسی گسترده‌ای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 5.38% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 2.88% واکنش نسبت به کل مشترکان کسب می‌کند.
- دسترسی پست‌ها: هر پست به طور میانگین 1 262 بازدید دریافت می‌کند. در اولین روز معمولاً 675 بازدید جمع‌آوری می‌شود.
- واکنش‌ها و تعامل: مخاطبان به‌طور فعال حمایت می‌کنند؛ میانگین واکنش به هر پست 2 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند css, node.js, api, архитектура, html تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاه‌های شخصی توصیف می‌کند:
“Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU”
به لطف به‌روزرسانی‌های پرتکرار (آخرین داده در تاریخ 13 نوامبر, 2026)، کانال همواره به‌روز و دارای دسترسی بالاست. تحلیل‌ها نشان می‌دهد مخاطبان به‌طور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامه‌ها تبدیل کرده‌اند.
23 446
مشترکین
-824 ساعت
-737 روز
-33630 روز
آرشیو پست ها
📍 Как вернуть геолокацию, от которой пользователь однажды отказался
Обычный сценарий: сайт запрашивает координаты через
navigator.geolocation.getCurrentPosition(), человек жмёт «Блокировать» и просит браузер запомнить выбор. С этого момента кнопка на сайте просто молча не работает. Чтобы передумать, надо искать сайт в настройках браузера.
В HTML появился элемент-кнопка <geolocation>. Нажатие на него либо сразу срабатывает, либо снова показывает запрос. Пунктов там два: «разрешить всегда» и «разрешить один раз». Отказ теперь означает просто закрыть окно, поэтому сайт не застревает в вечном запрете.
В анонсе Chrome приводят данные ZapImóveis: 54,4% пользователей, ранее заблокировавших доступ, разрешили его, увидев элемент.
Оговорка: пока элемент работает только в Chrome и родственных браузерах. В остальных срабатывает запасной вызов старого API, и там проблема остаётся.
Автор предполагает, что для камеры и микрофона с похожим <usermedia> это ещё важнее.
👍 - если было полезно
👉 @seniorFront
🎢 Галерея, где правая колонка фото обгоняет левую, и без JavaScript
Сам скролл никто не трогает, это иллюзия. Правой колонке дают обычную CSS-анимацию сдвига по вертикали. Только её прогресс зависит не от времени, а от прокрутки:
animation-timeline: scroll(root block) привязывает его ко всей странице.
@keyframes drift-up {
from {
transform: translateY(12vh);
}
to {
transform: translateY(-20vh);
}
}@supports. Без поддержки останется обычная галерея из двух колонок.
В статье ещё лёгкий зум каждого фото при прокрутке и вариант, где колонка едет навстречу скроллу.
👍 - если было полезно
👉 @seniorFront
Яндекс Музыка до 360 дней бесплатно
Яндекс Музыка для вас и 3-х ваших близких.
Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс.
Попробуйте бесплатно❤️
Слушать
#реклама 18+
music.yandex.ru
О рекламодателе
Пишешь на JavaScript, но до Angular руки так и не дошли?
Слышал про Angular, но всё никак не находилось времени разобраться? Или просто не знал, с чего начать?🤔
Есть возможность попробовать его сразу на практике, без долгих поисков туториалов. На бесплатном 7-дневном интенсиве ты будешь шаг за шагом создавать веб-сервис доставки: с главной страницей, оформлением заказа и его отслеживанием.
Заодно поработаешь с
HTML, CSS, JavaScript, попробуешь TypeScript и Angular и увидишь, как всё это объединяется в одном проекте.
Никаких вложений — просто приходи, пробуй и разбирайся, твоё это или нет.
↗️ Попробовать бесплатно
Реклама. ИП Чернова О.А., ИНН:771399721044
🎨 Контурная фигура с градиентом в три строки CSS
Нужна звезда или стрелка, у которой виден только контур, да ещё и залитый градиентом? Автор сайта css-tip.com показывает, как обойтись без хаков и сложного кода: хватает связки border-shape и border-area.
Рамка делается прозрачной. border-shape задаёт её форму: она идёт не по прямоугольнику, а по фигуре из shape(), polygon() и подобных функций. Градиент кладётся в background с ключевым словом border-area и закрашивает только саму рамку.
.shape-gradient { border: 10px solid #0000; /* a transparent border */ border-shape: shape() | polygon() | etc; /* the shape */ background: linear-gradient(#0077b6,#f4a261) border-area; /* gradient + border-area */}shape() | polygon() | etc подставляете одну свою фигуру.
Есть важная оговорка: пока это работает только в браузерах на Chromium.
В демо на CodePen к заметке собраны сложные фигуры, нарисованные этим приёмом.
👍 - если было полезно
👉 @seniorFront
🧱 Плитка как в Pinterest на чистом CSS, без JS и подсчёта высот
Masonry — раскладка, где карточки разной высоты плотно стоят в колонках без дыр. Раньше для неё брали Masonry.js или хак на Grid с заранее известными высотами.
Теперь в CSS есть display: grid-lanes: колонки задаются как в Grid, а раскладку делает браузер.
.masonry {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}
Максимальная скидка года на английский: –22% до 11.11
70% обучения — разговорная практика. Заговорите с первого урока вне зависимости от уровня
Записаться онлайн
#реклама 16+
practicum.yandex.ru
О рекламодателе
✅ В CSS есть true и false, и на них можно строить логику
Слова true и false в CSS уже есть, например в
inherits у @property. Их можно положить в кастомное свойство и проверять в style-запросах контейнера.
Пример из статьи: фильтр сумок на двух чекбоксах. Свойства --isBackpack и --isDuffel регистрируют через @property с syntax: "true | false" и false по умолчанию. На :root правило :has(#isBackpack:checked) ставит свойству true.
Дальше вместо горы селекторов с :checked и :not(:checked) пишем одно понятное условие:
@container root style(--isBackpack: true) and style(--isDuffel: false)
Внутри прячем всё, кроме рюкзаков.
Свойства сделаны ненаследуемыми. Поэтому :root нужно дать container-name: root, иначе запросу в глубоком потомке не на кого сослаться.
Весь фильтр со всеми комбинациями чекбоксов разобран в статье.
👍 - если было полезно
👉 @seniorFront
Зарабатывайте на установках Яндекс Браузера
Рекомендуйте Яндекс Браузер и поиск Яндекса и зарабатывайте до 600 ₽ за каждого привлечённого пользователя.
Партнёрская программа для каждого: от мастера по ремонту ПК до блогера — это возможность получать дополнительный доход от того, что вы уже делаете.
– Бонусы для ваших пользователей и клиентов
– Удобные инструменты для работы офлайн и онлайн
– Наглядная статистика и стабильные выплаты
Предлагайте приложения Яндекса своим читателям и клиентам в вашем блоге, сервисном центре или на сайте — и получайте вознаграждения.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе
🎲 В CSS появился random(), и вёрстка может стать чуть живее
Функция random() выдаёт случайное значение прямо в CSS. Раньше для такого брали JS-библиотеку или Sass-цикл, который генерировал сотни строк статичного CSS.
Вы задаёте границы, а браузер сам выбирает значение. Третий аргумент задаёт шаг:
/* Only produces 0px, 15px, 30px, 45px, or 60px */
top: random(0px, 60px, 15px);
+4Телеграм канал AI для бизнеса
AI - не будущее. Это настоящее вашего бизнеса.
Телеграм-канал "AI для бизнеса" знает все о внедрении и использовании искусственного интеллекта в бизнесе в России и мира. Только со своими подписчиками канал делится:
- как внедрить искусственный интеллект в реальные бизнес-процессы,
- разборами кейсов: как компании сократили затраты на 30-50% с помощью AI,
- лайфхаками по автоматизации рутинных задач,
- новостями мира AI и разборами трендов.
Сами давно читаем и вам советуем подписаться.
Подписаться
#реклама 16+
О рекламодателе
FrontendOffer поможет пройти техсобесы
Вы сейчас готовитесь к собеседованиям или уже проходите? Не чувствуете себя уверенно со всеми этими километровыми задачами на «что выведет консоль»? Давно не практиковались в лайвкодинге и боитесь налажать?
Поиск работы - дело одинокое и неприятное, но мы справимся вместе.
⚡ FrontendOffer - это:
⚫️бот со 100+ вопросами, консольными задачами и лайвкодингами с реальных собеседований от джуновского до сеньорного уровня;
⚫️эталонные ответы, подробные объяснения и дополнительные ресурсы для всех задач - можно выучить, что от тебя ждут или понять тему вглубь ;
⚫️коммьюнити, в котором проводят воркшопы и созвоны 3-4 раза в месяц, вместе тренируют решения задач, прожаривают резюме и помогают проходить собесы уверенно;
📍Ближайшие ивенты коммьюнити:
12 ноября - Web Vitals: как измерять и прокачивать. Разберемся, кто такие эти ваши LCP, FCP, INP, CLS. На практике, на демке, научимся, как измерять веб вайтлсы и улучшать
19 ноября - React: решаем лайвкодинги с собесов. Будем разбирать 2 типа задач, с которыми вы можете столкнуться на собесе, посмотрим, какие типичные ловушки вам будут подстраивать и что надо прям зазубрить, чтобы хорошо прошло
26 ноября - AI-разработка фронтенда: реально работающие практики. Покажем концепты и подходы, которые реально спасут вам время, кукуху и не выжрут всю подписку за полчаса.
🖤Почему мы:
Автор проекта, Наташа Давыдова, фронтенд-разработчик с 6+ годами коммерческого опыта, включая бигтехи.
Я расскажу и покажу, как расщелкивать хардовые и софтовые собесы, чтобы получать офферы с максимальным КПД.
➡️ Приходи к нам, решай задачи, вступай в коммьюнити. Тебе больше не придется бороться с рынком в одиночку.
Реклама. ИП Райгородский Д.В. ИНН 645395014681 erid: CQH36pWzJqVKkJFHLr1VnRncmUJmC9f2BaG3sM44ZPuMMt
🧮 Элемент CSS-сетки может сам узнать, в какой он строке и колонке
Возьмём адаптивную сетку с
repeat(auto-fill, ...): колонок в ней ровно столько, сколько влезает по ширине. Темани Афиф показывает, как каждый элемент вычисляет свои координаты на чистом CSS, без JavaScript.
Число колонок считается из ширины контейнера (100cqw), ширины колонки и отступа, с округлением вниз. Порядковый номер элемента даёт sibling-index(). Делим номер на число колонок: целая часть станет номером строки --x, остаток номером колонки --y.
При ресайзе всё пересчитывается само. А с новой функцией if() по этим значениям можно красить, например, четвёртую строку (счёт идёт с нуля):
.container > * { background: if(style(--x = 3): red;)}
✂️ Лишний зазор над колонками убирается одним свойством
В CSS-раскладке на несколько колонок (multicol) часто возникает вопрос: откуда над первой колонкой лишнее пустое место? Это верхний margin первого абзаца. Внутри multicol-контейнера он не схлопывается.
Раньше выход был один: вообще не давать абзацам верхний отступ. Теперь есть свойство
margin-trim. Пишем margin-trim: block-start на сам контейнер с колонками, и браузер обрезает верхний отступ у элемента, который стоит в его начале. В Chrome это работает с версии 155.
Подвох в Safari. Он понимает margin-trim с версии 16.4, но только для обычных блоков, а для колонок нет. Поэтому проверка через @supports там проходит, а отступ над колонками всё равно остаётся.
А в обычной блочной раскладке у margin-trim есть и другие полезные применения, и их уже можно пробовать.
👍 - если было полезно
👉 @seniorFront
🎨 Рваный акварельный край на чистом SVG
Представьте открытку, где рисунок по тапу заливается акварелью. Обычная SVG-маска с градиентом, которая едет снизу вверх, даёт лишь ровную шторку, как в презентации.
Неровный край дают два SVG-фильтра.
feTurbulence рисует облачный шум, похожий на разводы. feDisplacementMap сдвигает каждый пиксель маски на величину из этого шума, и прямая кромка становится изрезанной, как береговая линия.
Хитрость в том, что шум стоит на месте, а маска едет сквозь него. Поэтому край меняет форму на ходу: краска то забегает вперёд, то отстаёт, будто впитывается в бумагу.
Есть одна ловушка. Область фильтра по умолчанию всего на 10% больше элемента. Сдвинутые пиксели вылезают за неё, край обрезается по линейке, и эффект пропадает. Область нужно расширить: x="-35%" y="-35%" width="170%" height="170%".
А ещё в статье карандашные линии, которые рисуются сами, золотые искры и звук кисти без единого аудиофайла, и всё без библиотек.
👍 - если было полезно
👉 @seniorFront
👩💻 Всем программистам посвящается!
Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования:
Выбирай своё направление:
👩💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
👩💻 IT Новости — t.me/it_ready
🤖 AI & ML — t.me/neuro_ready
👩💻 Frontend — t.me/frontend_ready
👩💻 C/C++ — https://t.me/cpp_ready
👩💻 C# & Unity — t.me/csharp_ready
👩💻 Linux — t.me/linux_ready
👩💻 Java — t.me/java_ready
📖 IT Книги — t.me/books_ready
📱 JavaScript — t.me/javascript_ready
🖼️ DevOps — t.me/devops_ready
🖥 Design — t.me/design_ready
📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!
⚡ React Context без лишних ререндеров
В контексте лежат
name и age. Меняется age, и заодно перерисовывается компонент, которому нужен только name. React сравнивает value провайдера целиком, а это каждый раз новый объект. useMemo и React.memo тут не спасают.
Выход в статье простой. Через Context передают не данные, а объект доступа к ним: { get, set, subscribe }. Он создаётся один раз, ссылка не меняется, и сам контекст никого не ререндерит.
Данные живут в useRef. Каждый компонент через useSyncExternalStore подписывается только на своё поле. Ввели возраст, и перерисовался один инпут возраста.
Есть цена: обновление такого стора внутри startTransition всё равно станет блокирующим, в фон его не увести.
В статье объяснено, зачем здесь именно useSyncExternalStore и почему store нельзя заворачивать в useMemo.
👍 - если было полезно
👉 @seniorFront
Зарабатывайте на установках Яндекс Браузера
Партнёрская программа для сервисных центров, магазинов компьютерной техники, сайтов для скачивания файлов и авторов статей.
Вы можете предлагать его своим клиентам и аудитории — и зарабатывать на новых установках.
Выплаты до 500₽ за каждую установку Яндекс Браузера.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе
🔑 Один key, и редактор не путает заметки
Quill, WYSIWYG-редактор для браузера, хранит часть состояния внутри себя: выделение и историю undo. React об этом состоянии ничего не знает.
Когда один редактор по очереди показывает разные заметки, React переиспользует его экземпляр. Меняется только value, а выделение и история прошлой заметки остаются внутри Quill.
Решение простое: передать в key id заметки.
<NoteEditorClient
key={note.id}
value={note.contentHtml}
onChange={(nextHtml) =>
updateNoteContent(note.id, nextHtml)
}
/>
🐶 Как пустить элемент гулять по краю блока на чистом CSS
Свойство
offset-path задаёт путь, а offset-distance ставит элемент в точку на нём. Путь не обязательно рисовать вручную: подойдёт рамка родителя, offset-path: border-box.
Например, с offset-distance: 20% кружок встаёт на рамку, пройдя пятую часть периметра. Пикселей нет, поэтому при смене размера блока всё подстраивается.
Дальше автор анимирует offset-distance через @keyframes, а значения берёт из CSS-функции random(). Кружок бегает по краю в случайные точки. Сработало, только когда у каждого вызова появился свой ключ вроде --k1.
Главная загвоздка в поддержке: на момент статьи random() есть в Safari, а в Chrome только за флагом. В других браузерах элемент просто стоит на месте, так что пригодится запасной вариант через @supports.
В статье из этого вырастают светящийся шар и собачка, гуляющая по краю блока.
👍 - если было полезно
👉 @seniorFront