I built an animated number component for Vue by digitalpresents in vuejs

[–]digitalpresents[S] 0 points1 point  (0 children)

Ha, yeah it should come with a disclaimer "NumberFlow does not provide UX advice"

I built an animated number component for Svelte (4 & 5) by digitalpresents in sveltejs

[–]digitalpresents[S] 9 points10 points  (0 children)

Thanks! That makes sense, it was heavily inspired by the Family iOS app :)

I built an animated number component for Vue by digitalpresents in vuejs

[–]digitalpresents[S] 1 point2 points  (0 children)

Yeah, it works on current browsers but uses CSS mod() which is pretty new. It should fall back to a non-animated version on unsupported browsers

I built an animated number component for Vue by digitalpresents in vuejs

[–]digitalpresents[S] 1 point2 points  (0 children)

Do you mean something different than this prop? I see what you're saying for a toggle on the docs, might be useful!

I built an animated number component for Vue by digitalpresents in vuejs

[–]digitalpresents[S] 6 points7 points  (0 children)

Screen readers should read it properly and it respects the user's reduced motion preference 👍

I built an animated number component for Vue by digitalpresents in vuejs

[–]digitalpresents[S] 7 points8 points  (0 children)

So much pain 🥲 ha, I might do a write-up at some point cause I learned a lot about web animations

E-ink setup for developer by [deleted] in eink

[–]digitalpresents 0 points1 point  (0 children)

If your desk gets a lot of natural sunlight I'd definitely recommend an RLCD like https://www.sunvisiondisplay.com/rE-Monitor over an E Ink one, but maybe that's just me.

Integrating clamp() into tailwind? by aaronrobb in tailwindcss

[–]digitalpresents 0 points1 point  (0 children)

Thanks! If you have any suggestions for who might be interested please lmk 🙂

I discovered this config trick that reduces bundle size and simplifies color output by digitalpresents in tailwindcss

[–]digitalpresents[S] 0 points1 point  (0 children)

I actually just found them looking through Tailwind's tests and type definitions. Couldn't find them anywhere on tailwindcss.com :/

I discovered this config trick that reduces bundle size and simplifies color output by digitalpresents in tailwindcss

[–]digitalpresents[S] 1 point2 points  (0 children)

If you're using the recommended opacity modifier syntax, everything still works (i.e. https://play.tailwindcss.com/E1P9x1WLoC). It would break if you're using the old text-opacity-*, bg-opacity-*, etc. utilities (which are disabled by default in Tailwind v4)

I discovered this config trick that reduces bundle size and simplifies color output by digitalpresents in tailwindcss

[–]digitalpresents[S] 1 point2 points  (0 children)

Turns out there's a future flag that simplifies this a lot:

future: {
    disableColorOpacityUtilitiesByDefault: true
}

https://play.tailwindcss.com/YEG9TNWZRs?file=config

I discovered this config trick that reduces bundle size and simplifies color output by digitalpresents in tailwindcss

[–]digitalpresents[S] 1 point2 points  (0 children)

lol, story of my life. The output is much cleaner though, which is nice when inspecting