Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

3 Yorum

Algoworks profil fotoğrafı
Algoworks1 yıl önce

@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 profil fotoğrafı
Chrome for Developers1 yıl önce

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

MrLogistics profil fotoğrafı
MrLogistics2 yıl önce

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

Benzer Videolar

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 görüntüleme • 7 ay önce

✨ 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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

Something worth pinning is coming. Anitta Pinterest
0:24

Something worth pinning is coming. Anitta Pinterest

COLORS

78,636 görüntüleme • 7 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 13 gün önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 7 ay önce