14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
4 дня, 3 языка, 1 цель!
Создайте свой аналог YouTube вместе с нами на бесплатном 4-дневном интенсиве. Старт 17 октября.
Мы вместе с тобой напишем фронтенд-часть аналога приложения YouTube. Наше приложение будет адаптивным под все устройства, поработаем с YouTube API и выложим результат на GitHub.
Даем только выжимку теории и много-много практики, чтобы получить на выходе готовый проект в портфолио.
Регистрируйтесь прямо сейчас: https://in.methed.ru/md/2a3cd3d9e5a9214a4219cb19186fa01d?utm_source=telegram&utm_medium=october_youtube&utm_campaign=htmlshit
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024. erid: LjN8K2Kxx
Rolldown: a rust port of Rollup
У вебпака есть rspack, а у ролапа будет Rolldown.
Сейчас проходит ViteConf (я, кстати, не рекомендую смотреть такие штуки в лайве, лучше потом в 1.5× промотать на ютубе) и Эван Ю анонсировал Rolldown — порт ролапа на расте.
Основная цель — заменить esbuild и Rollup в Vite незаметно для конечных юзеров.
Интересно, что в разработке участвуют ex-rspack разработчики, а Лукас Таегерт-Акинсон, мэйнтэйнер ролапа, выступает в роли консультанта. Обещают в открытом доступе до конца года.
Меня долгое время смущало, что в JS-тулинге появилась двойственность: го и раст. Проектов на расте, конечно, больше, но esbuild очень успешный проект. Ну что ж, посмотрим как это повлияет на расстановку сил, но кажется раст начинает побеждать.
Слайды доклада вот тут.
А вот сам доклад.
P.S. За новость спасибо @Safort
#фишка дня
Так, котаны мои хорошие, чтобы начать процедуру отладки, например, по клику на элементе, вам вообще не надо идти в Elements 👉 Event listeners, искать там click, искать нужный файл, или, ещё хуже, сразу начинать ковыряться в коде... Сейчас всё расскажу.
Открываем девтулзы, ползём в Sources, открываем в сайдбаре справа раздел Event Listener Breakpoints и выбираем событие click в ветке Mouse. Всё, вы прекрасны, все довольны.
Пользуемся 💝️️️️️️
#devtools #debug #бородач
#инструмент дня
Кто слышал о Modernizr? Поднимите руки 🙋
В общем, этот инструмент тестирует возможности браузеров на поддержку каких-либо фишек HTML5/CSS3 и далее и позволяет, например, условно подключать полифиллы или применять какие-нибудь иные методы обхода. Особенно удобно когда `@supports`-правила могут не работать или — сюрприз — не поддерживаться вообще.
Ну и одной из фишек является добавление классов со списком поддерживаемых фич. Вроде js flexbox flexboxlegacy canvas canvastext webgl и так далее.
На рынке он давно, потому интересно, какие же есть альтернативы.
И вот свежий проект SupportsCSS. Сфера его работы в целом такая же, как у модернайзера, но ориентирован уже на современные селекторы CSS. Так сказать, стряхнуть лишнее.
Как всегда, следует помнить, что оба инструмента не полифиллы, но подсказка.
#css #supports #modernizr #бородач
▫️ Code Ready дает возможность узнать много интересной информации в мире Web разработки. 😉
▫️ Каждый день мы публикуем полезные ссылки или посты сразу с готовым кодом и примером их использования.
▫️ Различные анимации, эффекты и многое другое, что поможет сделать ваш сайт уникальным и интересным.
▫️ Стань частью сообщества!! Подпишись на наш телеграмм канал! 🎯
#фишка дня
А давайте немного заглянем в будущее.
Наверняка же кто-то из вас делал различные выпадающие списки на замену убогому select. То, почему select такой убогий — это тема для отдельной большой статьи, я ещё пытаюсь собрать материалы. Там не только про него, впрочем... Но не суть.
Так вот, если у вас есть Chrome Canary aka 120, можно пройти в chrome://flags, включить Experimental Web Features и увидеть возможности будущего элемента selectlist.
Уна Кравец собирает различные примеры использования в своей коллекции на Codepen: https://codepen.io/collection/QWeLGB?cursor=eyJwYWdlIjoyfQ==
Вот, например, меню из Airbnb с видеоиллюстрации: https://codepen.io/una/pen/PoXbgVW
А вот GitHub: https://codepen.io/una/pen/KKbNYbo
Там много разных. Повторю: только на Canary и только с Experimental Web Features.
Впрочем, естественно, давно имеется веб-компонент, ведущий себя ровно так же: https://github.com/luwes/selectlist-polyfill
Так что пробовать можно уже сейчас. Пора начинать!
P. S. я тут сделал sortable multiselect combobox на React Downshift. Надо кому инструкцию?
#select #html #future
#статья дня
Ох, что тут принесло!
Вот вы все, наверняка, знаете о том, что существуют приложения, позволяющие редактировать документы нескольким людям сразу. И что любой современный проект не может без этого обойтись.
Далеко ходить не надо: Google Sheets, Google Docs, Miro, да даже Microsoft в онлайн и не очень офисных пакетах это позволяет. И, кстати, онлайн игры это тоже самое что ни на есть приложение для совместной работы. Особенно это интересно в файтингах, но об этом потом.
Общее название структур данных для организации подобного это CRDT. Conflict-free Replicated Data Type, или, по-русски, бесконфликтная репликация данных.
Там на самом деле довольно сложная алгебра, можно хотя бы глянуть программу обучения в ВШЭ, чтобы сойти с ума. Но гораздо интереснее посмотреть на примерах, как это работает. И сегодняшняя статья дня это позволяет.
Встречайте: https://jakelazaroff.com/words/an-interactive-intro-to-crdts/
Статью не назвать простой, а реализацию — промышленной, но оно работает и очень впечатляет! Всем рекомендую, котаны.
#crdt #algorithm
Белый хакер , пентестер, разработчик , программист , только начинаешь разбираться в азах защиты , обхода уязвимости - если это о тебе , то добро пожаловать 🧑🏻💻
- Полезный софт
- Проверка систем на уязвимость
- Как узнать пароль от Wi-Fi
- Как обезопасить свои личные данные
- Подборки бесплатных и полезных сервисов
Канал с взрослой аудиторией
интересующейся информационной безопасностью и в частности языками C++,SQL,Java,Python,JavaScript,C#, Html
Подписывайся и обучайся вместе с нами
👉 /channel/soft_bezopasno
#инструмент дня
Вот как ты, котан, ищешь недавний баг в проекте?
Выкатываешься куда-нибудь, тестируешь, откатываешь последний коммит, да?
А что если баг оказался хитрее, обошел тесты и уже сидит на проде, ножками качает?
Тут в дело вступает встроенный в git инструмент бинарного поиска: git bisect. Принцип прост: помечаем заведомо плохой коммит или тег (последний) и заведомо хороший (ну, за сутки до бага):$ git bisect startПосле чего
$ git bisect bad # Current is bad
$ git bisect good v2.6.13-rc2 bisect выберет средний коммит из этих двух. Теперь нужно собрать проект и протестировать.
Если эта версия работает хорошо, сообщаем bisect об этом: git bisect good. Ну или bad, если нет. И продолжаем; снова случится checkout коммита посередине.
Можно искать не только баги, но и любое изменение в коде. Так что вместо меток good и bad есть ещё old и new.
Не так давно я не знал об этом инструменте и буквально повторил тот же алгоритм поиска сам. Ну, бывает.
#git #bisect #бородач
#такое дня
Вы, наверное, уже слышали, что Adobe выпустила Photoshop for Web: https://photoshop.adobe.com/
Работает только в Chrome, потому что — кто бы мог подумать — Google активно участвовал в создании и подгонке кода. По этому поводу даже выпустили статью о процессе создания и об используемых технологиях: https://web.dev/ps-on-the-web/
Впрочем, со времён порта Quake 3 мало что поменялось, разве что, используя всё тот же Emscripten, код на C++ стали собирать в WebAssembly, а не чистый JavaScript 🙂
Кстати, по этому поводу они в процессе добавили отладку WebAssembly в девтулзы.
Собственно, вот и статья: https://web.dev/ps-on-the-web/
А теперь здоровая такая ложка дёгтя.
Не секрет, что я нахожусь в Финляндии. Но я не могу потестировать! Мне пишет, что продукт заблокирован в моей стране.
И всё бы ничего, GPDR и прочее, вот только нюанс: не открывается лишь с личного профиля. С рабочего и дублёра — открывается.
И единственное отличие, что я нашёл — это второй язык в профиле браузера. Русский.
И есть у меня дикое предположение, что Adobe использует сложный фингерпринтинг и блокирует по языку, предполагая, что я в РФ. Даже если это не связано конкретно с языком — причина очевидна.
Не очень приятно. Поэтому, используйте https://www.photopea.com/ для ваших мелких задач. Меня не подводила, дизайны сайтов и превьюшек открываются отлично 🙂
#webassembly #chrome #photoshop
#статья дня
Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?
Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:
transform: translateX(20px) rotate(40deg) scale(1.5);
может быть записано как:
translate: 20px;
rotate: 40deg;
scale: 1.5;
Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate👉rotate👉scale. И, естественно, повторяющиеся правила будут схлопнуты.
Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.
#css #transform #бородач
#статья дня
Глупо считать, что сложные системы это привилегия айти, пусть даже айти зачастую пронизывает их с ног до головы. Хотя, конечно, стоит признать, что даже кажущиеся простыми системы на самом деле далеко не такие (на иллюстрации — система уведомлений в Slack).
Поэтому ровно так же глупо считать, что отладка сложных систем и разбор инцидентов должны происходить только по айтишным принципам и правилам. Например, тот же самый «подход «пяти почему?», широко разрекламированный книгой и движением «Бережливый стартап», слишком часто применяется чтобы найти виноватого, но никак не чтобы улучшить систему.
Сегодняшняя статья имеет простое и понятное название: «How Complex Systems Fail», имеется перевод на русский: «Как ломаются сложные системы». Автор — доктор Ричард Кук. В смысле медицины доктор.
В чём суть? Всё просто: опасность – неотъемлемый атрибут сложных систем. На этом можно было бы и закончить, но там ещё 17 пунктов. Кому-то они помогут расслабиться, очень надеюсь.
Забавно, что некоторые из пунктов отлично вписываются в рефакторинг. Например:
10. Все действия специалистов – авантюры
14. Изменения создают новые виды сбоев
18. Работа без сбоев требует опыта работы со сбоями
Прописные истины? Возможно. Но их стоило собрать в одном месте. И собрали — аж в 1998 году.
В общем, всем рекомендую, котаны.
#system #testing
#ссылка дня
В сентябре прошла Practical ML Conf от Яндекса и вот, наконец, стали доступны записи.
Наиболее интересные доклады:
1. Zero-cost fault tolerance в распределённом глубоком обучении
Руководитель группы модернизации нейронных сетей Яндекса, Алексей Морозов о том, что делать чтобы избавить специалистов от необходимости постоянно проверять работоспособность системы и вообще не думать об инфраструктурных вопросах
2. Multi-view pathology detection on medical images
Евгений Сидоров, Head of AI, Third Opinion, рассказал о методе анализа медицинских снимков на основе множественных проекций – он позволяет восполнить недостаток трехмерной визуальной информации. Интересно, что здесь применили опыт из самоуправляемых автомобилей.
Я в университете максимум такие изображения воссоздавал по данным, но уж никак не анализировал...
3. Геоэмбеддинги: векторное представление контекста в пространственной аналитике
Юлий Шамаев из ВТБ рассказал как его команда использует ИИ, чтобы определить лучшее расположение для банкоматов и банковских отделений.
Записи докладов доступны здесь
💉 SQL Injection Master - самый полный курс по SQL инъекциям
Старт: 9 октября
Продолжительность: 3 месяца
На курсе подробно разберём эксплуатацию SQL-инъекций, одного из наиболее распространенных и опасных видов атак на веб-приложения. Вы узнаете не только о том, как обнаруживать и эксплуатировать SQL-инъекции, но и как защитить свои веб-приложения от подобных атак.
Курс будет полезен как новичкам в сфере информационной безопасности, так и продвинутым специалистам.
🎓 В ходе обучения вы научитесь:
- Базовым навыкам работы с SQL
- Поиску уязвимостей в базах данных
- Внедрению произвольного SQL-кода в уязвимые приложения
У данного курса нет аналогов в СНГ и англоязычном пространстве.
🏆 Выдаём УПК/сертификат при успешной сдаче экзамена. Возможна оплата в рассрочку
📌 Узнать подробнее о курсе
Реклама. ООО "АКАДЕМИЯ КОДЕБАЙ". ИНН 9706020333. erid: LjN8KXzRw
📣 Как не провалить свой проект после релиза?!
Наверно, каждый из вас слышал что-то про custdev, бережливый стартап и т.д
Так вот, СРО MasterTMS на практике показывает, как этим пользоваться в своем новом канале!
Советую подписаться тем, кто хочет чтобы проект реально полетел!
Ссылка
#библиотека дня
Соскучились по хорошим дейтпикерам? Да по ним невозможно не соскучиться.
Итак, сегодня на обзоре https://easepick.com/
Чем хорош?
- Нет зависимостей
- Легковесный
- Написан на TypeScript
- Есть удобный конфигуратор
- Поддержка плагинов, изначально поставляется с прицелом на их использование
Стандартный набор любой библиотеки в 2023 году, в общем.
Чем плох?
- Мне не понравился выбор года. Ну его вообще нет, если на то пошло. В этом отношении bootstrap-datepicker непобедим.
Но это ерунда, на самом деле. Если посмотреть на примеры, становится ясно, куда ребята целились: в создание удобного отельного дейтпикера. И им определённо удалось!
API очень простой, несколько официальных плагинов как раз реализуют всё то, что необходимо для выделения диапазонов.
Конфигуратор песня, конечно: https://easepick.com/configurator/
В общем, моя рекомендация.
#datepicker #js #ts
У Вали шикарный канал, а rspack мы используем в продакшене и посматриваем на Rollup для бакенд-части проекта. Теперь будем посматривать и на Rolldown.
Читать полностью…
7 дней бесплатного обучения frontend-разработке!
Организовали для тебя бесплатный интенсив по frontend-разработке с практикой и куратором.
Что будет:
1️⃣ Создание веб-сайта на HTML и CSS
Мы научим тебя создавать стильные и функциональные веб-страницы с использованием современных технологий.
2️⃣ Оживление страницы с помощью JavaScript
Узнаешь, как добавить интерактивность и динамичность в свои проекты.
3️⃣ Использование фронтенд-фреймворка Angular
Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений.
4️⃣ Подключение Backend и загрузка сайта на хостинг
Мы научим тебя основам работы с Backend'ом и покажем, как развернуть проект на хостинге.
5️⃣ Советы по доработке проекта
Получишь советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества.
🔥 А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Участвуй бесплатно
Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8KGA8j
#фишка дня
Я, конечно, топлю за максимальную простоту стилей и срезание углов, потому редко использую тег picture для работы с srcset в смысле размеров изображение под разные устройства и экраны. Но есть у него особенности, которые иначе повторить довольно неудобно.
И я говорю о поддержке медиа-запросов в, буквально, атрибуте media.
Одно из них — адаптация изображений для, например, тёмной или светлой темы или для людей, предпочитающих ограничение анимаций на экране.
В первом случае мы заменим картинку дня на картинку ночи, а во втором — гифку на фотографию.
В общем, смотрим иллюстрацию и кодпен: https://codepen.io/alinaki/pen/wvROeaR
И на закуску, универсальный компонент для отзывчивых изображений, Unpic: https://unpic.pics/img/learn/
#picture #media #theme
#такое дня
Дежурное напоминание о том, что перфекционизм убивает мотивацию и не боги горшки обжигают.
Откуда скриншот? Да из типов для React: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1258
Не то чтобы я вам предлагал везде писать any, но уж тормозить разработку и быть party pooper-ом TypeScript не должен.
P. S. обновил ссылку до React 18. До сих пор там.
#ts #react #бородач
Важная часть процесса трудоустройства в IT — обсуждение вашей будущей зарплаты. И тут многие IT-шники сталкиваются с проблемами:
— страх просить много
— разочарование, что согласился на меньшее
— отсутствие гибкости в процессе переговоров
Решению этих проблем за счёт навыков переговоров о зарплате посвящён канал "Выше вилки". Его авторы: Илья Шишков, Паша Филонов и Настя Авдонина.
У Ильи и Паши на двоих более 20 лет опыта работы в таких компаниях как Яндекс, Лаборатория Касперского и Positive Technologies. На протяжении своей карьеры они прошли и провели десятки собеседований, поэтому знают процесс обсуждения оффера с обеих сторон.
Настя — HR, 7 лет занимается подбором и развитием команд в IT и только за 2022 год провела более 100 переговоров о зарплате.
В своём канале ребята
— делятся своим опытом переговоров об оффере
— показывают примеры эффективных переговоров
— дают инструменты, которые помогают уверенно вести переговоры о зарплате и получать офферы выше вилки 😉
#статья дня
Каким-то образом View Transition API ещё ни разу не освещался на канале. Пришло время это исправить! Особенно учитывая, что соответствующая статья разработчиков Chrome как раз недавно обновилась: https://developer.chrome.com/docs/web-platform/view-transitions/
Итак, что такое View Transitions API?
Это, собственно, то, что раньше называли page transition: анимации перехода между страницами сайта. Реализовывалось по разному в разных системах, помните PJAX? Хорошая была штука.
Ну да ладно, в общем, суть в том, что теперь можно браузеру объяснить, как конкретно применять изменения к DOM, какой элемент за каким закреплять и что делать с остальными.
В статье огромное число примеров, от простейших патчей дерева до анимирования нескольких элементов разом.
Бебебе анимации замедляют работу! Да, но замедляют, отвлекая пользователя. Об этом, впрочем, будет выложен видосик.
Ну и ещё пример анимации грида: https://codepen.io/bramus/pen/VwEXmqd
Никаких плагинов! Будущее здесь 🙂
#css #view #transition #бородач
#фишка дня
Понадобилось мне тут создать список полей для функции watch (обозреватель введенных значений) в react-hook-form.
Но дело в том, что поля в форме сгруппированы по одному из параметров. Ну, условно: feature1[goods], feature1[variants], feature2[goods], feature2[variants].
А watch на вход принимает одномерный массив строк. Так что же делать?
А тут нам поможет flatMap! Это как map, но любой возвращённый массив развернёт и включит в состав возвращаемого.
Удобно? Удобно.
#js #map #flatMap
Как делать релизы простыми и безболезненными? Поговорим об этом на бесплатном вебинаре 10 октября в 18:00.
На встрече Java-разработчик СИБУР Диджитал с 12-летним опытом Анатолий Саблин:
— поделится опытом, как правильно разрабатывать и обновлять программные продукты;
— расскажет, чем отличаются методы управления проектами (SCRUM, kanban);
— проведет Q&A-сессию.
Регистрируйтесь здесь, чтобы узнать секрет, как легко перейти от разработки к эксплуатации.
Реклама, ПАО «СИБУР Холдинг», ИНН 7727547261, Erid 2VtzqvnrLrw
#фишка дня
Как предотвратить взаимодействие пользователя с элементом?pointer-events: none — скажете вы.
Да. Но нет. А что насчёт клавиатурного фокуса? А скринридеры? Так не пойдёт.
Благо, есть решение!
Начиная с Firefox 112 и Safari 15.5 у нас наконец-то есть поддержка атрибута inert. Что это такое?
Ну, исходя из названия inert (инертный) он ни с чем не должен взаимодействовать. Как инертные газы (как вам отсылочка, пахнуло школьной химией, да?).
То есть, если вы зададите элементу атрибут inert, то:
1. Будет предотвращена обработка события click.
2. Элемент перестанет получать фокус и...
3. ...станет недоступен для скринридеров (исключён из a11y tree).
Поддержка уже давно есть в Chrome, начиная со 102 версии, и теперь, с вводом в строй Firefox 112 — есть во всех современных движках.
Ну и, естественно, присущие атрибуту свойства можно повторить ручками, вот пример: https://codepen.io/alinaki/pen/ZEqJepB
#inert #attribute #html #a11y #бородач
5 и 6 декабря ждём разработчиков на главной конференции Яндекса YaTalks 2023
Более 100 экспертов, управленцев и учёных выступят на мероприятии и поделятся опытом известных российских и международных компаний.
Впервые за три года мероприятие пройдёт офлайн в Москве и Белграде. В первый день обсудят хардовые технологии и последние тренды в IT, а во второй — командную работу и научные явления.
Кроме докладов, участников ждут:
👉 Встречи и индивидуальные консультации с топовыми экспертами из российских и международных IT-компаний
👉 Лайвкодинг, воркшопы и нетворкинг
Регистрируйтесь и приходите. Если не сможете быть офлайн, всё равно регистрируйтесь — мы пришлём вам доступ ко всем записям выступлений, которых не будет в трансляции.
Онлайн-трансляцию, как и всегда, можно будет посмотреть из любой точки мира.
Зарегистрироваться
#фишка дня
Я не знаю, зачем вам эта информация, но в CSS в числе типов есть Infinity.
Ах, вы не знали, что CSS давно уже типизированный язык? Ну я напомню: /channel/htmlshit/1971
Скоро вернусь с постом, котаны, не переключайтесь.
#codepen дня
Гори всё синим пламенем!
Эх, жаль, в своё время на проекте, где подобное было уместно, я не шибко много знал о шейдерах.
Впрочем Awwwards получили :)
Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.
Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa
Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂
Спасибо Ксении Кондрашёвой.
#webgl #shader #бородач
#видео дня
Тут Андрей Ситник (PostCSS и Logux) выложил видео с митапа Злых Марсиан в Лиссабоне. Мне кажется, ни Андрея ни Марсиан отдельно представлять не надо 🙂
Продублирую выложеные видео здесь и, заодно, напомню об одном предстоящем событии, уже не Марсиан 🙂
1. Роман Шамин о том, как делать динамическую тему приложения: https://www.youtube.com/watch?v=K6ksuVzTz5U
2. Ольга Русакова о том, как продвигать опенсорс-проекты: https://www.youtube.com/watch?v=9Xg__hgL8zg
3. Глеб Строганов об адаптации иконок к особенностям шрифтаа: https://www.youtube.com/watch?v=0fQhhEM1AMw
4. Александр Байгельдин о Cloudflare Workers: https://www.youtube.com/watch?v=mjCMW8MpP30
5. И рэп про разработку, а заодно как сделать рабочую кассету на React и SVG, от Элизабет Оливейры: https://www.youtube.com/watch?v=bcbnkm2IZjk
А отдельное событие, о котором я хотел вам напомнить, это ViteConf, уже завтра: https://viteconf.org/23/
Сгенерируйте себе билетик и добавьте в календарь, котаны!
#events #vite
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
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 #бородач