14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#такое дня
Продолбал вечер пятницы из-за одного довольно тупого решения почти годичной давности.
Итак, на проекте используется react-hook-form и кастомный селект на базе Downshift (useSelect). К react-hook-form, по причине контролируемой реализации виджета, он подключается через Controller.
В октябре прошлого года по причине, которую никто уже не помнит, мы закрепили react-hook-form на версии 7.47.0.
Ну и всё шло гладко, пока мне не потребовалось прокидывать disabled-состояние на те самые селекты. Казалось бы, однозначный код:
<Controller
name={name}
control={control}
disabled={disabled}
defaultValue={options[0].value}
shouldUnregister={true}
render={({ field: { onChange, value } }) => (
<Select
options={options}
defaultValue={value}
onChange={({ value }) => {
onChange(value);
}}
/>
)}
/>
disabled, значение контроллера по-умолчанию точно так же никуда не передавалось.
#ссылка дня
Когда-то мы обсуждали новость о том, что ESLint хочет перейти на новый, плоский формат конфига в своей 9 версии.
Естественно, я случайно грохнул старый чат с комментариям, но — поверьте — обсуждали.
Это, казалось бы, удобное нововведение вызвало бурю негодования. Кто-то решил остаться на восьмой версии, кто-то нашёл это идеальным поводом чтобы уйти на какой-нибудь Biome.
Но... ESLint нас услышал! И они выкатили инструмент для миграции конфигов: https://eslint.org/blog/2024/05/eslint-configuration-migrator/
Естественно, не без ограничений (основное — поддерживается только корневая директория), но всё же.
Буду пробовать и сообщу. Я тут осознал, что вообще до сих пор на седьмом...
#eslint #tool
А формула проста, и имя ей RICE-фреймворк.
Берём коэффициенты:
Reach: сколько людей будет затронуто, число
Impact: насколько сильно,0.25, 0.5, 1, 2, 3
Confidence: степень уверенности в этом, в процентах
Effort: сколько сил потребуется, любое положительное число, сторипоинты, человеко-месяцы, часы; что угодно используемое в конторе
И считаем: (R*I*C)/E. Больше число — больше уверенности в успехе. Или как минимум в целесообразности начала разработки.
А вот что такое готовность и успех можно поговорить позже.
Правда это всё не включает Developer’s Enjoyment 🥲
Подробнее тут: https://hello.ducalis.io/knowledge-base/rice-scoring-prioritization-framework
#такое дня
Олды тут?
Волновало ли вас мнение разработчиков-зумеров о вашем подходе к работе?
Спойлер: нет.
А вот Gergely Orosz (я боюсь это транслитерировать) решил собрать мнение обеих сторон, и людей старшего поколения о молодом, и наоборот.
И выпустил две огромные статьи:
GenZ глазами миллениалов и GenX
https://newsletter.pragmaticengineer.com/p/genz
Миллениалы и GenX глазами GenZ:
https://newsletter.pragmaticengineer.com/p/genz-part-2
Поскольку мне аж 36 лет, и я смотрел доклад 36 два раза, иллюстрацией к этому посту я выбрал именно выводы из второй части.
Поиграем в бинго, олды? У меня пять из шести.
По-моему, в целом, весь спор поколений немного переоценён, но некоторые общности имеют место быть. И их приходится учитывать и в бизнесе, и в общении.
Впрочем, гораздо большую роль, на мой взгляд, играет культурный бэкграунд.
#life
#заметка дня
Тут Иван Акулов из Framer поделился, как они доставляют AVIF-изображения, добиваясь ещё большей, чем WEBP, экономии трафика.
Да, я в курсе, что многие генерируют картинки при сборке, кто-то использует сервисы и так далее, но давайте не забывать, что:
1. Есть пользовательский контент
2. Облака могут встать дорого
Итак, в чём же проблема? А в том что AVIF ну очень долго кодируется, что не есть хорошо. Там, где на генерацию WEBP уйдёт 100-300 мс, на AVIF — 1-3 секунды.
В итоге, если генерировать изображения по запросу и сохранять на CDN (тем же nginx, например), будет не очень вежливо заставлять посетителя ждать.
Поэтому было решено применять подход, знакомый нам как stale-while-revalidate.
1. С первым запросом генерируем WEBP-картинку, но устанавливаем кеширующие заголовки как Cache-Control to max-age=0, stale-while-revalidate=31536000.
2. Поскольку max-age выставлен в 0, картинка моментально "протухнет", CDN с этим не согласится и отправит второй запрос, чтобы, собственно, закешировать.
3. И вот тут уже начинаем генерировать AVIF.
4. И отправляем его с max-age=31536000, ну, почти навсегда.
Ну и общая статья на тему: https://www.framer.com/help/articles/how-are-images-optimized-in-framer/
Я тут пока готовил этот обзор, хотел найти свой конфиг nginx для генерации и кропа картинок на лету, но... потерял. Кажется, пришло время потренироваться и написать обновлённый, по мотивам.
А как вы доставляете картинки, котаны?
#image #optimization
Ребят, в начале или середине своего пути вам часто нужно смотреть на примеры кода и реализацию разных возможностей
⚠️ Это повышает вашу насмотренность, понимание кода, да и вы всегда можете сохранить заготовки себе на будущие проекты
Существует множество полезных сайтов, но теперь есть специальный канал для этого: @code_ready
У вас будет все под рукой, с оформленным кодом, примерами, шпаргалками и без занудства
➡️ Так что подписываемся
#такое дня
Не, не могу молчать. Андрей Ситник снова пошёл священной претензией на сообщество фронтенда.
И снова с Линуксом.
Итак, суть подачи: «Во фронтенде бесит, что люди так много говорят про diversity и адаптивность к разным системам, а все сидят на Маках».
Начнём с того, что не все сидят на маках, но все, кто выступает на конференциях 🙂 Ошибка выжившего как она есть.
А дальше... давайте сначала ваше мнение, котаны. Выше — опрос про вашу ОС для работы.
Если вам будет интересно — напишу свой путь и выбор инструментов.
#фишка дня
Иногда встаёт задача не просто проиллюстрировать статью, но обрезать (кропнуть) исходное изображение. И желательно так, чтобы результат был адаптивен и адекватно реагировал на масштабирование.
Джейк Арчибальд предлагает решение на SVG и foreignObject: https://codepen.io/alinaki/pen/KKLXvwz
Вообще, весьма красиво. Да, можно генерировать кропы на сервере, но это, как минимум, лишние телодвижения. А тут – одна картинка, чистый и понятный код.
#svg #img #foreignObject #crop
#такое дня
Я знаю, вы любите стыдный контент.
После трёх релизов подряд, в которых не было ничего, кроме исправления z-index (не спрашивайте), проверяющий мои PRы бакендщик (остальные в отпуске), заметил:
— Я-то хотя бы жисоны перекладываю...
Давайте ваши свежие стыдные истории, котаны.
Реклама. ООО «Яндекс.Облако» ИНН 7704458262
Erid: 3apb1Qrwwr2uBg1WocnEFwJfQb4K3dy5grNscboPtJRyZ
#автор дня
Итак, я не так давно, буквально пару месяцев назад, выкладывал репозиторий Сергея Ufocoder'а, посвящённый утечкам памяти в JavaScript. Ну, вот же, положила: /channel/htmlshit/2668
Думаю, сегодня можно выложить кое-что ещё :)
Некоторое время Сергей занимается разработкой простого FPS. И пришло время показать первые результаты!
Собственно, перед нами однопользовательская игра в стиле Wolfenstein 3D.
Использует подход к отрисовке графике из 1990-х, в частности алгоритм raycasting (все графические вычисления происходят на CPU).
Написана с нуля, то есть без использования сторонних библиотек.
В игре несколько уровней и очень простой искусственный интеллект, есть возможность подбирать патроны и убегать от зомби, используя мини карту.
Если появится желание улучшить игру, то ее исходники находятся в открытом виде и автор приветствует любые улучшения и исправления.
Репозиторий: https://github.com/ufocoder/fps
Играть: https://ufocoder.github.io/fps/
Если вы, котаны, задались целью понять, как работают 3D-движки на базовом уровне — это вот самое то :)
#game #fps
#заметка дня
В чате вопрос возник: «А при каких условиях и на что нужно ставить role=“button”?»
Вопрос весьма разумный, ведь вроде как кнопка она и есть кнопка, button. Вот только не всё так просто.
Для начала давайте определимся раз и навсегда: ссылки вместо кнопок не используются никогда.
Ссылка – это или переход к якорю на этой же странице, или же переход на другую страницу и только. Никаких a[href=“#”] с onClick, забудьте.
Остаются button, input[type=“button”] и input[type=“submit”].
Последние потомков внутри не предполагают и являются замещаемыми. Это значит, псевдо-элементов у нас тоже там нет. Впрочем, они вполне себе неплохо оформляются и как вещь в себе работают сносно: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button
И вот, button. Что же с ним может быть не так, что нам потребуется нечто с role=“button”?
Давайте с очевидного: валидатор запрещает иметь div внутри button.
Выражаясь языком спецификации, button ожидает фразовый контент, а не потоковый: https://caninclude.glitch.me/can/include/?child=div&parent=button
То есть речь идёт не только о div, а ещё о десятке тегов. В итоге официально вкладывать можно практически один лишь span. Наверное, это не всем и не всегда удобно.
Впрочем, браузеры такой трюк позволяют.
Но если вам не всё равно — добавьте role=“button” и tabindex на любой удобный вам элемент, чтобы превратить его в интерактивный. Валидатор и скринридеры будут довольны. А ещё старые Safari, которые не умеют во flexbox на кнопках.
Мы у себя в дизайн-системе назвали такой компонент PlainButton, вот иногда ну надо.
Второй же случай посложнее.
Есть такой вид кнопок, toggle-кнопки. Переключатели. Это не checkbox, это не switch. Это просто что-то, что можно «зажать» сейчас и «отжать» потом. Например, кнопки в текстовом редакторе.
Они или находятся в зажатом положении (текст по центру, полужирный и т. д.), или в отжатом. Переключаем, в общем.
Почему это не чекбоксы? Потому что это не волеизъявление (согласие на что-то) как таковое, это просто некое действие, влияющее на что-то в приложении. Почему не свитчи? Потому что мы ничего не включаем физически. Кажется, об этих концептах стоит потом подробнее написать 😅
В общем, если вы подменяете логику работы кнопки с моментальной реакции на что-то иное вроде toggle, вам необходимо отдельно указать как минимум два необходимых атрибута: role=“button” и aria-pressed. Это же касается, например, кнопок открытия аккордеонов. Вот только вместо pressed нужно будет устанавливать expanded: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Да, это всё поначалу кажется ненужным усложнением, но поверьте: в большом приложении информация лишней не бывает. Особенно если она поможет кому-то вашим приложением пользоваться. А заодно легче отлаживать и хранить состояние.
#button #a11y #role #toggle #бородач
Яндекс в последнее время очень активно внедряет нейросети в свои сервисы и продукты – ещё недавно, казалось бы, набирали AI-тренеров для обучения YandexGPT, а уже выпустили облегчённую нейронку третьего поколения YandexGPT 3 Lite.
Сейчас модель может суммаризировать деловые встречи, проверять орфографию, анализировать данные, консультировать клиентов в чате и по телефону, а также создавать маркетинговые материалы или дайджесты рабочих встреч. Модель заточена сугубо под бизнес и большие данные.
Чтобы добиться таких результатов, YandexGPT 3 Lite прошла через несколько этапов обучения: претренинг и выравнивание вместе с обучением на основе вознаграждения. Здесь ребята добавили GQA и прокачали отдельную reward-модель, чтобы нейронка быстрее адаптировалась к новым условиям и принимала более точные решения. В случае таких специализированных архитектур нейронных сетей reward-модель играет ключевую роль — дообучение делает её более устойчивой к ошибкам и способной работать в различных сценариях.
#YandexGPT #AI #технологии #бизнес
🚀 Поднимите свой опыт frontend-разработки на новый уровень.
👉 Приглашаем на вебинар: "Преимущества семантической верстки"
На открытом уроке вы получите ценные знания:
- Семантические теги: изучите строительные блоки HTML5.
- Влияние на сайт: постигните, как правильное использование тегов улучшает SEO и доступность сайта.
- Применение на практике: получите навыки, которые сможете применять в реальных проектах.
👩💻 Наш спикер, Анна Русяева – опытный веб-разработчик, поделится с вами лайфхаками и секретами мастерства.
📆 4 июня, 19:00 мск - отметьте дату в своем календаре!
🔑 Специальная цена на курс «Fullstack developer» для участников - расширьте свои возможности в IT с уникальным предложением.
=======
✨ Не упустите возможность! Регистрируйтесь сейчас https://vk.cc/cxedcA?erid=LjN8Jyg72
=======
🎁 Все участники online-трансляции получат в подарок 3 бесплатных урока, и полезные материалы для начинающих.
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
#автор дня
Сегодня у моей дочки день рождения — целых три года :)
Потому сил моих хватает только познакомить вас с замечательным автором — Тиффани Чонг и её потрясающим анимешным CSS-артом: https://codepen.io/tiffachoo/pens/public
Кажется, будто можно составить из этих персонажей целую игру, милота зашкаливает.
Не кукситесь, котаны :)
#css #art
Начали свой путь в разработке на JS? Хотите продвинуться дальше?
Тогда ждём вас на открытом практическом уроке «Объектно-ориентированный JavaScript и функции конструкторов» от OTUS, где мы разберем:
🔹как наследуются свойства в объектах;
🔹объектную модель JavaScript;
🔹написание ООП-кода с экономией памяти;
🔹создание объектов при помощи функций конструкторов с наследованием свойств.
Встречаемся 18 июня в 20:00 мск в рамках курса «Специализация Fullstack Developer». Все участники вебинара получат специальную цену на обучение!
➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты с нуля сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Создашь проект на Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Сделаешь сайту адаптив;
6. Получишь проверку домашек от кураторов;
7. В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать.
А главное, ты узнаешь, что тебе делать, чтобы уже в этом году гарантировано зарабатывать от 1000$/мес. на фронтенд-разработке, не выходя из дома.
Начинаем уже завтра.
👉 Успей проскочить на интенсив бесплатно
Бонусом для портфолио тебе выдадут именной сертификат после окончания интенсива и успешной сдачи всех домашних работ.
Реклама. ИП Чернова О. А., ИНН:771399721044
#статья дня
Давай сегодня тему пошире. Если ты работаешь с проектами крупнее одного лендинга за раз, или более того — с продуктами, резко встаёт вопрос целесообразности внедрения той или иной фишки.
Просто «потому что хочется» работает на самых первых этапах, ведь проекты создаются для того, чтоб решить какую-то конкретную боль клиента. Иногда клиент — основатель стартапа.
А вот потом начинается производственный ад. Виной которому менеджеры продукта.
Ну конечно же не они, но именно они будут отвечать за ведение проекта и внедрение результатов. И за аналитику на первом этапе, конечно же. Так как же с ними договариваться и как они будут принимать это решение? Ну или, как минимум, приоритизировать задачи?
в один пост не вместилось, далее… ⏭
Осваиваешь бэкенд? Го на «Технолето» — оплачиваемую стажировку от Яндекса
«Технолето» — программа карьерных и развлекательных активностей для стажеров Яндекса. В программе: образовательные выезды в гараж роботов-доставщиков, экскурсии по ночному офису и не только.
Начинающие бэкенд-специалисты узнают о тонкостях написания кода для высоконагруженных веб-сервисов, освоят навыки эксплуатации сложных систем, а также приобретут востребованные в индустрии скиллы.
Стажировка оплачивается и длится 3, 4 или 6 месяцев в зависимости от занятости студента. Участникам из других городов Яндекс оплатит дорогу и проживание в московской «Айтиобщаге 2.0» — технологическом хостеле с девайсами умного дома.
А если отлично проявите себя на стажировке, то у вас высокий шанс получить оффер. Не упускайте возможность и оставляйте заявку на участие.
#такое дня
Теперь, когда вас попросят на собеседовании написать код, который выводит сам себя — вы знаете, что делать:
($=_=>`($=${$})()`)()
#ретро дня
В комментариях к предыдущему посту встал вопрос: "А как тестировать Safari в Windows и Linux?"
Что ж, на этот вопрос есть частичный ответ. И пару лет назад я делал серию постов, посвящённую этой проблеме.
TL;DR: Safari не единственный браузер на WebKit, есть ещё Epiphany aka GNOME Web. И если на Linux он вполне себе нативно запускается, то на Windows нужно немного плясок.
Собственно, посты из серии:
Краткая история Safari: /channel/htmlshit/704
Установка GNOME Web на Windows WSL2: /channel/htmlshit/709
Использование WebKit Demo Browser через Playwright: /channel/htmlshit/714
Просто готовая сборка WebKit: /channel/htmlshit/715
Если кто попробует и дополнит инструкцию — я буду очень рад 🥺
P. S. там же есть инфа, как получить бесплатный доступ к сервису Browserstack: /channel/htmlshit/718
Открытый курс по JavaScript запустила команда AvitoTech (а это уже гарантия качественного контента).
• Для всех уровней разработки (но с базой в программировании будет попроще)
• Доступным языком
• Про JavaScript / HTML / CSS
Первый выпуск посвящён базовым понятиям: технология веба, браузер, клиент, сервер. Лекция уже доступна на канале AvitoTech.
Смотрите, это бесплатно!
#статья дня
Я много раз начинал и забрасывал статью о том, как справляться с рутиной. Но писать статью — это не в чате «деда» включать. Всё-таки важная штука — аудитория.
Впрочем, здесь мне помогут Александр Беспоясов, Вадим Юмадилов и Андрей Романов. Фамилия Беспоясова должна быть вам знакома – он отметился в Солидбуке.
Итак, какие вопросы разбираются в их лонгриде Фронтенд — это не больно:
— Как решать задачи, а не писать код
— Как не умереть в пиксель-перфекте
— Как вести диалог с дизайнерами
Можно, конечно, просто посоветовать перестать ныть и начать вникать, но это будет слишком грубым описанием этой прекрасной работы.
И обязательно обратите внимание на прикреплённые к статье материалы. В них есть всё.
#work #frontend #psychology #бородач
Зачастую при работе с S3-хранилищем пользователи сталкиваются со сложностями, которые снижают производительность и увеличивают затраты на инфраструктуру.
Чтобы избежать типичных проблем и обеспечить быстрый доступ к вашим данным, рассказываем, что влияет на производительность на каждом этапе пути запроса от пользователя к объектному хранилищу и обратно.
➡️ О практических рекомендациях по работе с S3-хранилищем читайте в полной версии статьи.
#yacloud_articles
#инструмент дня
React Compiler, говорите...
А что если я скажу вам, что есть инструмент, конвертирующий ваши JSX-компоненты во... во все остальные?
Буквально: JSX/Svelte в: React, Svelte, Vue, Angular, Qwik, Lit, Solid, Preact...
Давайте просто сразу дам ссылку на песочницу: https://mitosis.builder.io/playground/
Если уж и не для практического применения, но если вдруг надо срочно пересесть на другой фреймворк — то понять принципы можно с лёгкостью.
Знаешь JSX или Svelte — пишешь на всех :)
#framework #tool
Чтобы быть продуктивным, разработчик должен кодить быстро.
Даниил Лихачев, Python-разработчик крупного диджитал-продакшена Далее, подготовил 5 способов? помогающих научиться кодить в 2,5 раза быстрее. Полную статью читайте на Хабре, а в этом после — краткая выжимка.
Подписывайтесь на канал Далее ). Каждую неделю мы постим проверенные советы разработчиками другим диджитал-специалистам, чек-листы и вакансии 🖖
#ссылка дня
Итак, в чатике пару дней назад поднялся срачик состоялось некоторое обсуждение.
Темой этого самого обсуждения стало автоматическое воспроизведение видео со звуком на сайтах. Насколько нам всем известно, это с некоторых пор практически невозможно: только после явного действия пользователя.
Но коллега утверждал, что можно и в доказательство приводил Reddit. Естественно, никто повторить не мог.
Пришлось — кто бы мог подумать — обратиться к документации!
Итак, смотрим: https://developer.chrome.com/blog/autoplay
И что же это мы такое видим?
— On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
Что ещё за индекс вовлечённости такой?!
Это что же получается, я смотрю недостаточно мемов на реддите?!
И таки да, внизу имеется расшифровка. Самый простой способ посмотреть её результаты — это открыть страницу about://media-engagement в Chrome.
В общем, когда очередной заказчик вашего очередного проекта возмутится тем, что музыка в его прекрасном промо-видео не играет, расскажите ему о том, что его проект просто неинтересен людям. Вот так просто.
#chrome #media #sound
#заметка дня
Рубрика "Вы не спрашивали, но я всё равно отвечу!"
На самом деле, разговор произошёл в Твиттере, и я посчитал разумным, вынести его сюда.
Итак, вопрос:
Что бы убедиться: использование testid в end-2-end тестах для выборки элементов это анти-паттерн, верно? Следует тестировать с точки зрения пользователя: искать кнопку с неким текстом, например.
Знаете ли вы статьи или доклады, которые подкрепляют эту точку зрения?
Отвечаю:
Это не то чтобы антипаттерн, это просто бестолковое использование ресурсов, потому и продвигается как антипаттерн.
1. Надо тестировать то, что видит юзер
2. Если что-то не видит, значит, всё плохо
3. Если там иконка или нужен результат — искать надо по a11y атрибутам.
Сразу поясню за "бестолковость".
Когда ты что-то тестируешь, тесты становятся твоей документацией. Значит, в тестах закрепляется текущее поведение проекта. Даже строки не стоит импортировать (если ты только не тестируешь систему перевода).
А это значит, если кто-то случайно сломает систему перевода или неправильно переведёт строку без информирования остальных — тесты упадут и это правильно.
Дальше, решая проблему через ARIA-атрибуты, ты заодно решаешь вопрос доступности. Бесплатно. Поэтому data-testid и названы бестолковым использованием ресурсов.
Это же, кстати, касается систем трекинга вроде Datadog RUM.
Смысл фронтенда в том, чтобы пользователь мог с продуктом взаимодействовать. Для этого необходима визуальная и когнитивная поддержка. Кнопка может быть и видна, но на кнопке — упс — может не быть текста. Или она будет цвета фона (потому скриншот-тесты ещё не вымерли).
Подобный подход к тестировани применяется как в E2E, так и в юнит- и интеграционном тестировании. Вот, например, поясняющая статья от Testing Library, которая нынче стандарт де-факто для тестирования в вебе.
Тестируйте, котаны!
#web #testing #e2e
#баг дня
Сегодня Chrome 125 принёс шикарное.
В погоне за поддержкой CSS Popup Anchor Positioning API они совсем позабыли о, собственно, правильном назначении этих самых якорей.
Вспоминаем, что видеоплеер работает в Shadow DOM и получаем поведение с иллюстрации.
Ссылка: https://issues.chromium.org/issues/341741271
Скоро поправят в Canary. Надеюсь, будет бэкпорт.
#css #popup
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2024, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor #бородач