Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Pinterest switched from custom JavaScript to CSS carousels, achieving a 90% code reduction (~2,000 to ~200 lines) and a 15% faster Pin load time. Now that’s a use case worth pinning. 📌

Chrome for Developers

423,981 subscribers

11,886 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

3 Comments

Algoworks1 year ago

@Pinterest Brilliant move by @Pinterest cleaner code and faster performance? Swapping JS for CSS carousels is a perfect example of elegant engineering. #pinterest #javascript #css #code #Software

Chrome for Developers1 year ago

@Pinterest Inspired by @Pinterest’s elegant engineering 📌 Cleaner code + faster performance = a winning combo.

MrLogistics2 years ago

I talk a big game about saving ecom clients on shipping rates. Well, I've saved: • $50M between clients in 2 years • @luxurywatchguy $200k in 4 hours • Dozens of clients 10-50% (for a decade now!) Want to learn how? Follow me @MisterLogistic

Related Videos

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Chrome for Developers

220,279 views • 7 months ago

✨ Tailwind CSS Tip ✨ You can use peer/{name} to create a beautiful "Pill Menu Animation" like this. × No javascript × No custom styles Comment 👋 and I'll share the code.

✨ Tailwind CSS Tip ✨ You can use peer/{name} to create a beautiful "Pill Menu Animation" like this. × No javascript × No custom styles Comment 👋 and I'll share the code.

Surjith S M ✪

123,239 views • 3 years ago

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

jhey ʕ•ᴥ•ʔ

196,882 views • 1 year ago

Make your web UI roar-some 🦖 Swap complex JS for just a few lines of CSS to build carousels and bring animations to life. Now available in Chrome and coming soon to other browsers →

Make your web UI roar-some 🦖 Swap complex JS for just a few lines of CSS to build carousels and bring animations to life. Now available in Chrome and coming soon to other browsers →

Chrome for Developers

43,498 views • 10 months ago

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Surjith S M ✪

169,299 views • 3 years ago

Tailwind CSS Tip ✨ You can create a multi-level dropdown menu using Tailwind CSS without javascript. Live demo / copy code ↓ (15/30) follow for 15 more tips 🔔

Tailwind CSS Tip ✨ You can create a multi-level dropdown menu using Tailwind CSS without javascript. Live demo / copy code ↓ (15/30) follow for 15 more tips 🔔

Surjith S M ✪

222,528 views • 3 years ago

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Sensitive content

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Wes Bos

305,522 views • 1 year ago

Something worth pinning is coming. Anitta Pinterest

Something worth pinning is coming. Anitta Pinterest

COLORS

78,636 views • 7 months ago

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

128,988 views • 1 year ago

I ported Matt Shumer Claude of Duty game from Three.js to Kaigen. > FPS got ~6x faster > load time got ~5x faster > 21k *less* lines of code > runs on every platform, including mobile

I ported Matt Shumer Claude of Duty game from Three.js to Kaigen. > FPS got ~6x faster > load time got ~5x faster > 21k less lines of code > runs on every platform, including mobile

Gabriel Dechichi

73,055 views • 13 days ago

Since 2019, California has had a 59% increase in the number of homes constructed and a 56% reduction in permitting time. It’s time to build more, faster!

Since 2019, California has had a 59% increase in the number of homes constructed and a 56% reduction in permitting time. It’s time to build more, faster!

Governor Newsom Press Office

35,110 views • 4 months ago

A short enough tutorial that this sucker is being uploaded straight to Twitter. ENJOY!! #css #javascript

A short enough tutorial that this sucker is being uploaded straight to Twitter. ENJOY!! #css #javascript

Gary Simon

81,719 views • 3 years ago

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS

i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS

Rebane

1,077,051 views • 8 months ago

Carousels just got a major glow up 💅 New CSS primitives let you build carousels that are interactive at first paint. Easily add native scroll buttons, scroll markers, & scroll snap effects to turn a simple layout into a full story →

Carousels just got a major glow up 💅 New CSS primitives let you build carousels that are interactive at first paint. Easily add native scroll buttons, scroll markers, & scroll snap effects to turn a simple layout into a full story →

Chrome for Developers

46,504 views • 10 months ago

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself

Wes Bos

222,832 views • 2 years ago

Sorry, guys from other stacks!!! 🥲 Everything is server-side rendered, high-performing, and written in a few lines of code. It's not a new component. It's just a table, some buttons, and some inputs placed with some CSS utility classes. ✨CSS Zero Datatable✨

Sorry, guys from other stacks!!! 🥲 Everything is server-side rendered, high-performing, and written in a few lines of code. It's not a new component. It's just a table, some buttons, and some inputs placed with some CSS utility classes. ✨CSS Zero Datatable✨

Lázaro Nixon

10,408 views • 1 year ago

Pinning Anitta's (Anitta) performance of ‘Pinterest’ to the top of our playlist 📌 Created in partnership with Pinterest, this COLORS performance brings the platform’s spirit of creativity and discovery to life. Watch the full show:

Pinning Anitta's (Anitta) performance of ‘Pinterest’ to the top of our playlist 📌 Created in partnership with Pinterest, this COLORS performance brings the platform’s spirit of creativity and discovery to life. Watch the full show:

COLORS

78,984 views • 7 months ago