Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

3 Kommentare

Profilbild von Algoworks
Algoworksvor 1 Jahr

@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

Profilbild von Chrome for Developers
Chrome for Developersvor 1 Jahr

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

Profilbild von MrLogistics
MrLogisticsvor 2 Jahren

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

Ähnliche 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
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 Aufrufe • vor 7 Monaten

✨ 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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

Something worth pinning is coming. Anitta Pinterest
0:24

Something worth pinning is coming. Anitta Pinterest

COLORS

78,636 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 13 Tagen

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 7 Monaten