Senior Frontend - javascript, html, css
Kanalga Telegram’da o‘tish
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
Ko'proq ko'rsatish
📈 Telegram kanali Senior Frontend - javascript, html, css analitikasi
Senior Frontend - javascript, html, css (@seniorfront) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 23 446 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 5 670-o'rinni va Rossiya mintaqasida 27 878-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 23 446 obunachiga ega bo‘ldi.
12 Noyabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -336 ga, so‘nggi 24 soatda esa -8 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 5.38% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 2.88% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 262 marta ko‘riladi; birinchi sutkada odatda 675 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 2 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent css, node.js, api, архитектура, html kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 13 Noyabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
23 446
Obunachilar
-824 soatlar
-737 kun
-33630 kun
Postlar arxiv
📍 Как вернуть геолокацию, от которой пользователь однажды отказался
Обычный сценарий: сайт запрашивает координаты через
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