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

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

На главную

📣🚀 Capsize release alert! Minimise webfont-induced layout shift, generating metrics-based font family fallbacks by leveraging the modern CSS `size-adjust` descriptor. (Video demonstrates layout shift between Arial and custom font. Left is before Capsize, right is after) 🧵

michaeltaranto's profile picture

🛶🧁🍨 𝐌𝐢𝐜𝐡𝐚𝐞𝐥 𝐓𝐚𝐫𝐚𝐧𝐭𝐨

1,702 subscribers

25,673 просмотров • 3 лет назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

Responsive grid layout using HTML and CSS 🚀
0:11

Responsive grid layout using HTML and CSS 🚀

David Mráz

100,825 просмотров • 2 лет назад

Create this responsive flex layout using just HTML and CSS 🚀
0:10

Create this responsive flex layout using just HTML and CSS 🚀

David Mráz

38,100 просмотров • 1 год назад

i'll know cloudflare is serious about design when they get rid of these ugly layout shift causing banners
0:11

i'll know cloudflare is serious about design when they get rid of these ugly layout shift causing banners

Rhys

71,661 просмотров • 2 месяцев назад

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉
0:15

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

Devon Govett

48,052 просмотров • 2 месяцев назад

react-native-enriched-markdown 0.3.0 is out! 🚀 📝 GFM support (tables, task lists, and autolinks) 🌍 Full right-to-left (RTL) layout support ✨ New inline style properties for link, strong, and emphasis 🛠️ Many bug fixes for better stability Check 🧵for full release notes
0:15

react-native-enriched-markdown 0.3.0 is out! 🚀 📝 GFM support (tables, task lists, and autolinks) 🌍 Full right-to-left (RTL) layout support ✨ New inline style properties for link, strong, and emphasis 🛠️ Many bug fixes for better stability Check 🧵for full release notes

Software Mansion

26,342 просмотров • 3 месяцев назад

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!
0:17

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!

daniel petho

149,788 просмотров • 2 месяцев назад

Create this layout using nested css grids and media queries 💪
0:14

Create this layout using nested css grids and media queries 💪

David Mráz

14,283 просмотров • 1 год назад

🚀 Dev Challenge Alert 🚀 A quality right, left, right, left! Challenge: Pass all bridge pillars between Oahu and Mahui Goal: Take the smoothest video! Share: Tag us with the #TCMDevChallenge
0:13

🚀 Dev Challenge Alert 🚀 A quality right, left, right, left! Challenge: Pass all bridge pillars between Oahu and Mahui Goal: Take the smoothest video! Share: Tag us with the #TCMDevChallenge

The Crew Motorfest

10,585 просмотров • 1 год назад

Hank Johnson is easily the most stupid person in congress and it is not even close This is the man who was afraid the island of Guam could capsize.
0:17

Hank Johnson is easily the most stupid person in congress and it is not even close This is the man who was afraid the island of Guam could capsize.

Brick Suit

42,980 просмотров • 2 месяцев назад

🚨 cursor changelog .48 alert! 🚀major changes - custom agents! - multiple agents❗️ - sound notification 🔔 - long context alert - usage based cost transparency and so much more! ⚠️make sure you have beta on shift+cmd+ j > Beta > Early Access on
0:17

🚨 cursor changelog .48 alert! 🚀major changes - custom agents! - multiple agents❗️ - sound notification 🔔 - long context alert - usage based cost transparency and so much more! ⚠️make sure you have beta on shift+cmd+ j > Beta > Early Access on

AGIdevice

18,286 просмотров • 1 год назад

is the layout fire 🔥🔥
0:19

is the layout fire 🔥🔥

yukari 🩷's kitaro🎀 Devil Survivor SPOILERS🎧

24,607 просмотров • 2 месяцев назад

🇺🇸 American Magic making the post-capsize recovery look easy after finding the edge in Pensacola. 💪 #AC37Reocn 👉
0:16

🇺🇸 American Magic making the post-capsize recovery look easy after finding the edge in Pensacola. 💪 #AC37Reocn 👉

americascup

18,156 просмотров • 3 лет назад

惨如我，现在才知道figma的suggest auto layout （shift+ctrl+A)这么好用。提升50%auto layout效率，再也不用盖房子了。
0:13

惨如我，现在才知道figma的suggest auto layout （shift+ctrl+A)这么好用。提升50%auto layout效率，再也不用盖房子了。

尤a娜

18,420 просмотров • 10 месяцев назад

W Padre I’ve seen a lot of comments saying it’s hard to switch after getting used to other trading platforms but with Padre, you can fully customize the layout to match any platform. Font, color scheme, even the Moxia layout, it’s all there now!!! No more excuses. Use my reflink to get better rewards and faster fills than any platform out there
0:10

W Padre I’ve seen a lot of comments saying it’s hard to switch after getting used to other trading platforms but with Padre, you can fully customize the layout to match any platform. Font, color scheme, even the Moxia layout, it’s all there now!!! No more excuses. Use my reflink to get better rewards and faster fills than any platform out there

.exe

23,898 просмотров • 11 месяцев назад

Playing with the Knuth-Plass algorithm and I think it’s an interesting algorithm to visualize! Might write a complete visual article later, but here’s a quick comparison for now. It looks at the whole paragraph to find the breakpoints that produce the most uniform spacing. So unlike the greedy approach, the layout might shift when a new word is added. Note: I didn’t use pretext here; it’s a monospace font so calculating the word widths is quite easy. will try pretext and try other fonts next
0:18

Playing with the Knuth-Plass algorithm and I think it’s an interesting algorithm to visualize! Might write a complete visual article later, but here’s a quick comparison for now. It looks at the whole paragraph to find the breakpoints that produce the most uniform spacing. So unlike the greedy approach, the layout might shift when a new word is added. Note: I didn’t use pretext here; it’s a monospace font so calculating the word widths is quite easy. will try pretext and try other fonts next

Damar

169,923 просмотров • 2 месяцев назад

Explored an adaptive layout based on button position
0:19

Explored an adaptive layout based on button position

Mike Lee

67,213 просмотров • 4 месяцев назад

Say hello to the newly designed layout controls in the Style panel ✨ New flex controls. Improved grid layout. Simplified UI with a more modern and intuitive interface. Rolling out March 4th:
0:19

Say hello to the newly designed layout controls in the Style panel ✨ New flex controls. Improved grid layout. Simplified UI with a more modern and intuitive interface. Rolling out March 4th:

Webflow

101,355 просмотров • 2 лет назад

bro auto layout is amazing
0:12

bro auto layout is amazing

Praveen Juge

29,542 просмотров • 2 лет назад

Glarble's tone shift between VRChat and Fortnite is my favourite thing btw
0:17

Glarble's tone shift between VRChat and Fortnite is my favourite thing btw

Doe 🏳️‍🌈 🦌 deer drawing dogs

44,925 просмотров • 1 год назад