正在加载视频...

视频加载失败

返回首页

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. 📌

ChromiumDev's profile picture

Chrome for Developers

423,981 subscribers

11,886 次观看 • 1 年前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

3 条评论

Algoworks 的头像
Algoworks1 年前

@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 Developers 的头像
Chrome for Developers1 年前

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

MrLogistics 的头像
MrLogistics2 年前

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

相关视频

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
1:00

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 次观看 • 7 个月前

✨ 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.
0:26

✨ 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 次观看 • 3 年前

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 💀
0:25

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 次观看 • 1 年前

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 →
0:22

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 次观看 • 10 个月前

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 😊
0:24

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 次观看 • 3 年前

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 🔔
0:25

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 次观看 • 3 年前

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
2:35

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 次观看 • 1 年前

Something worth pinning is coming. Anitta Pinterest
0:24

Something worth pinning is coming. Anitta Pinterest

COLORS

78,636 次观看 • 7 个月前

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!
0:20

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 次观看 • 1 年前

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
0:35

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 次观看 • 13 天前

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!
2:52

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 次观看 • 4 个月前

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

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

Gary Simon

81,719 次观看 • 3 年前

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
0:59

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 次观看 • 8 个月前

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 →
1:26

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 次观看 • 10 个月前

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
6:51

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 次观看 • 2 年前

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✨
0:54

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 次观看 • 1 年前

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:
0:56

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 次观看 • 7 个月前