Expa 

Сейчас передо мной стоит задача разобраться с CSS-спецификациями посвещённые работе скролов.

Оказалось, что Scroll-driven Animations достаточно простая спека, но сейчас не об этом

🦊 Привет, это Фронти!

Я принёс свежий выпуск #38 и собрал главное за неделю ✨

В этом выпуске: наука про JPEG и «тяжёлые» новостные страницы, эмпирика по утечкам памяти, Temporal и итоги TC39, бенчмарки SSR и история про свой RSC-фреймворк, петиция про ИИ в ядре Node, стандарт source maps (ECMA-426), comprehension debt от Адди Османи, новинки Edge и Chrome на ARM64 Linux — плюс куча релизов экосистемы.

🧪 HTML и платформа  

Две недели читал спецификацию CSS Scroll Snap Module Level 1 и пытался из неё сделать статью. Потом ещё полнедели читал Level 2. Ох. 
Это всё было трудно для меня, но я доволен, что сам стал разбираться в Scroll Snap. Так теперь ещё этими знаниями могу поделиться с другими. 
Уже появились мысли как только добью всё про скролы можно будет рассказать на митапе.

Почитать талмут - https://shabalin.online/blog/css/scroll-snap/

Друг сделал проект по созданию скриншотов для кода - https://snapcode.me/.
Я тут же решил его проверить боем. Добавил самые современные CSS-фичи, чтобы проверить подсветку синтаксиса и итоговый скриншок:
- Anchor API
- CSS Nesting

- @property
- :has()

- Container queries

- Custom properties

- Logical properties

- Scope
И получилось очень хорошо

Короткий совет: берёшь и участвуешь. Никто тебе не мешает.
Вот например мне немного мешало одно описание в mdn-compat-data.
Я зашёл в репозиторий, нажал редактировать файл. Заменил описание "description": "[counter-increment](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/counter-increment), [counter-reset](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/counter-reset), and [counter-set](https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/counter-set) support"
на человеческое "Support for CSS counter properties (`counter-increment`, `counter-reset`, and `counter-set`) on `::marker`", тако, которое во всем проекте соблюдается, то есть без ссылок на спецификации прям в описании.
Дело в том, что чуть ниже есть отдельное поле "spec_url" с этими же ссылками.
Дальше я попросил ChatGPT сделать описание коммита и PR на техническом английском. Пять минут и вуаля PR https://github.com/mdn/browser-compat-data/pull/29294/changes готов
Если PR не примут, то и ладно =)

Продолжаем продолжать разбирать спецификации относящиеся к скролу.

Если вы когда-либо читали длинную статью и внезапно теряли место, где остановились, потому что страница «подпрыгнула» из-за загрузившейся рекламы, изображений или видео, то вы сталкивались с проблемой, которую призван решать CSS Scroll Anchoring.

Спецификация CSS Scroll Anchoring Module Level 1 — это документ W3C, описывающий механизм, который браузеры используют для предотвращения неожиданных сдвигов содержимого страницы.

Статья: https://shabalin.online/blog/css/scroll-anchoring/

Сейчас передо мной стоит задача разобраться с пятью CSS-спецификациями. Все на тему работы скролов. На самом деле про скролы чуть больше спецификаций(scroll-driven animation), но я решил, что пока с этими пятью товарищами разберусь

Overscroll Behavior Module Level 1 - я уже рассмотрел. А вот с CSS Scrollbars Styling Module Level 1 только-только разобрался.

Честно сказать перед тем как открыть спецификацию я думал, что там будет гораздо сложнее. В итоге оказалось всего два простеньких CSS-свойства. А казалось мне так из-за моего опыта, который говорит, что там такая каша раньше была, что наверняка спека большущая и пытается все старые проблемы решить. Например, раньше была возможность даже кнопку и даже стрелочку перекрасить.
Спецификация оказалась умнее и в отдельной секции описали почему она не будет переусложнена =)

Всё-таки решил, что делать с блогом. Скромно, но его почитывают.
Что же я решил? Буду писать туда про спецификации: обзоры, разборы и прочее.

Очень уж мне понравилось, как я рассмотрел overscroll-behavior
https://shabalin.online/blog/css/overscroll-behavior/ — да так хорошо, что даже коллегам скидываю.

Для плана решил спарсить вообще все CSS-спецификации и сгруппировать их по темам: https://shabalin.online/blog/css/all-css-specs/
Вот по этим темам и буду идти. Хочу для начала закрыть гештальт со скроллами, особенно с overflow.

Временами попадаются статьи как какая-нибудь компания увольняет сотрудников "заменив" их на ИИ. Например 1, 2. Конкретики всегда мало. Где-то качество сервиса упало, где профсоюз поднял бунт.

У меня же всегда в голове вопрос: "Ну ок, вы уволили Пети, а кто теперь конретно выполняет его работу? Кто запускает нейронку и выполяет его задачи? А все ли задачи Пети делает нейронка, или часть задач делает нейронка, а часть задач перешла Васе? А что есть Петя был хорош в код-ревью, но плох в коде. На самом деле лучше оставить мидла Петю, чем сеньора Васю". 
Ответов я никогда не получу, но всё равно интересно. Сам я не бизнессмен, но бизнем понять могу. Надо сокращать расходы, а ИИ действительно это может сделать. Но кто конкретно и что конкретно. Эх, ладно, долой лирику.

Сегодня наткнулся на вакансию "Frontend Developer (AI-Driven / Vibecoding / Rapid Prototyping)" от комании MarfaTech. 

"В этой роли ты станешь не просто разработчиком, а AI-оркестратором". 

Рыночек-то меняется. Пока на нормальных условиях. В целом, в вакансии адекватные требования "ты и без ИИ должен знать базу, а ИИ твой помошник". Запраплата при этом в рынке. То есть нет такого "ну раз уж ИИ делает работу за тебя, то часть зарплаты мы тебе срежем".
Продолжаю наблюдение за изменениями рынка...

В 2008 года у меня появился первый собственный компьютер. Это огромная гробина таким весом, что можно мосты поднимать. Плоский монитор, хотя в детстве был ЭЛТ-пузан. Стандартные клавиатура и мышь с кабелем. Я был самым счастливым человеком с абсолютно бюджетным компьютером с медленным HDD. Я делал на нём буквально всё: от игр до монтажа видео.