Senior Frontend - javascript, html, css

📍 Как вернуть геолокацию, от которой пользователь однажды отказался Обычный сценарий: сайт запрашивает координаты через 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);
  }
}

Пока страница прокручивается до конца, колонка дополнительно уезжает вверх. Поэтому кажется, что она движется быстрее соседней. Scroll-Driven Animations есть не во всех браузерах, так что правило обёрнуто в @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;
}

Колонок столько, сколько влезет, каждая не уже 14rem. Следующая карточка обычно идёт в самую короткую колонку, общих рядов нет. В прод пока рано: grid-lanes работает в Safari 26.4 и новее, в остальных браузерах поддержка ещё в пути, а спецификация остаётся черновиком. Автор советует держать запасную раскладку попроще. 👍 - если было полезно 👉 @seniorFront

Максимальная скидка года на английский: –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);

В статье на Smashing Magazine слово разбито на отдельные буквы, и каждая получает свой лёгкий наклон и сдвиг. Заголовок выглядит как старая типографская печать, а при наведении буквы выпрямляются. Поддержка пока не везде. Safari уже умеет, в Chrome функция приходит с версией 156, от Firefox пока только положительные сигналы. Поэтому ровный вариант пишем по умолчанию, а случайность прячем внутрь @supports. В статье ещё прыгающие буквы, веер карт на скролле и боке из размытых слов. 👍 - если было полезно 👉 @seniorFront

Телеграм канал 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;)}

Условие у трюка одно: колонки должны быть одинаковой ширины. Строки при этом могут быть разной высоты. В статье есть и выборки посложнее: последняя строка, конец первой строки и даже диагональ. 👍 - если было полезно 👉 @seniorFront

✂️ Лишний зазор над колонками убирается одним свойством В 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)
  }
/>

Новый key заставляет React размонтировать старый редактор и создать чистый. Состояние предыдущей заметки в следующую не переходит. Обратная сторона: при каждом переключении история undo начинается с нуля. В статье этот редактор ещё получает автосохранение после паузы во вводе и режим чтения с подсветкой кода. 👍 - если было полезно 👉 @seniorFront

🐶 Как пустить элемент гулять по краю блока на чистом CSS Свойство offset-path задаёт путь, а offset-distance ставит элемент в точку на нём. Путь не обязательно рисовать вручную: подойдёт рамка родителя, offset-path: border-box. Например, с offset-distance: 20% кружок встаёт на рамку, пройдя пятую часть периметра. Пикселей нет, поэтому при смене размера блока всё подстраивается. Дальше автор анимирует offset-distance через @keyframes, а значения берёт из CSS-функции random(). Кружок бегает по краю в случайные точки. Сработало, только когда у каждого вызова появился свой ключ вроде --k1. Главная загвоздка в поддержке: на момент статьи random() есть в Safari, а в Chrome только за флагом. В других браузерах элемент просто стоит на месте, так что пригодится запасной вариант через @supports. В статье из этого вырастают светящийся шар и собачка, гуляющая по краю блока. 👍 - если было полезно 👉 @seniorFront