Загрузка видео...

Не удалось загрузить видео

На главную

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 месяцев назад