How not to lose your mind in a world where browsers ship every two weeks

Vadim Makeev

How not to lose your mind

in a world where browsers ship every two weeks

TODO
Mozilla logo.
MDN logo.
TODO
TODO
TODO

How do you know it?

TODO
TODO

Yeah,
whatever 🙄

Yes: a trash can. But: a hand sticking a gum to the fence.
Yes: a woman working out in a gym. But: the same woman pressing calling an elevator next to the stairs.
Yes: a cup of coffee with a nice foam drawing. But: the same cup with a plastic lid.
TODO

Major browser releases

TODO
TODO

🎂 Once a year

Release per browser in old times

🚀 6–8 a year

Releases per browser in 2010s

🔥 12 a year

Releases per browser in 2020s

Every two weeks ☠️

Chrome and Edge by the end of 2026

TODO
TODO

70+

Major browser releases by the end of 2026

TODO
QR code for web-standards.dev

We need
data and tools

What’s
the pipeline?

TODO

w3c/webref

10K weekly downloads per package

collector.openwebdocs.org

Manualy runs for every beta version

GitHub logo. mdn/browser-compat-data

2M weekly downloads

unpkg.com/@mdn/browser-compat-data

GitHub logo. web-platform-dx/web-features

450K weekly downloads

unpkg.com/web-features/data.json

TODO

But…
Can I use?

TODO
TODO
TODO

Signals
for developers

TODO

Baseline

TOD TODO TODO
TOD TODO
TOD
TOD

More tools? Yes

TODO QR code for webstatus.dev
TODO
TODO QR code for web-features-explorer
TODO QR code for web-features-cli

Now enforce it

QR code for browsersl.ist

Baseline as a target

"browserslist": [
  "baseline widely available"
]

Also: baseline newly available or baseline 2024

Pin it for reproducible builds

"browserslist": [
  "baseline widely available on 2024-06-06"
]

Native since Browserslist 4.26 — no extra package needed.

Target your actual users 🇬🇪

"browserslist": [
  "cover 99.5% in GE"
]

Don’t forget, config strings can be combined!

Lint your CSS

// eslint.config.js
export default [{
	files: ["**/*.css"],
	plugins: { css },
	language: "css/css",
	rules: {
		"css/use-baseline": ["error", { available: "widely" }]
	}
}];

Same idea, everywhere

Target Package and rule
CSS @eslint/css/use-baseline
HTML @html-eslint/use-baseline
CSS (Stylelint) stylelint-plugin-use-baseline
JS APIs eslint-plugin-compat (browserslist)
TODO

But… LLMs!

TODO

The models we use were trained on the web that was, not the web that is.

aifoc.us/please-mind-the-model-gap

Fix the 🤖

TODO

Give it real docs

			claude \
				mcp add --transport http \
				mdn https://mcp.mdn.mozilla.net/
		

The MDN MCP server provides access to latest docs and compat data.

TODO

Give it modern habits

			/plugin marketplace add GoogleChrome/modern-web-guidance
			/plugin install modern-web-guidance@googlechrome
		

Modern Web Guidance inject current patterns and compat data.

Signals
from for developers

web-platform-dx/developer-signals

QR code for webcompat.dev

Anyway…

Use
new features

Build
new tools

Use the data,
speak up!

TODO TODO TODO
TODO

Thank you!

TODO
TODO QR code for pepelsbey.dev