another good example of `tabular-nums` in action. must have for columns of right-aligned numbers (tables, invoices, dashboards).
normal table's columns have ragged left edges as digits swap between narrow ("1") and wide ("0", "8") glyphs.
where tabular stays perfectly flush ~
`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ).
you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`.
.tabular-nums {
font-variant-numeric: tabular-nums;
}
another good example of `tabular-nums` in action. must have for columns of right-aligned numbers (tables, invoices, dashboards).
normal table's columns have ragged left edges as digits swap between narrow ("1") and wide ("0", "8") glyphs.
where tabular stays perfectly flush ~
`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ).
you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`.
.tabular-nums {
font-variant-numeric: tabular-nums;
}
do you click on `mailto` links? maybe some of you do. but i’ve seen many ( me included ) prefer to just copy the email address instead.
this impl satisfies both groups:
– click the email address for the `mailto` link
– or click the icon to copy to clipboard
do you click on `mailto` links? maybe some of you do. but i’ve seen many ( me included ) prefer to just copy the email address instead.
this impl satisfies both groups:
– click the email address for the `mailto` link
– or click the icon to copy to clipboard
"w/o prediction cone" VS "w/ prediction cone"
prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs.
but it's not the same for most web-based dropdown menus. it took me a while to implement this here.
Amazon, macOS, Windows all implement some version of this.
prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs.
but it's not the same for most web-based dropdown menus. it took me a while to implement this here.
Amazon, macOS, Windows all implement some version of this.
a "Table of Contents" component inspired from devouringdetails.com .
tho this is a bit simpler version for my blogs ( you can see them here sorenblank.com/writing ).
you can try it from here: sorenblank.com/writing/scroll-tracking-table-of-contents
ever seen these small dead zones in a list of closely stacked elements? im seeing this more often.
this can be easily fixed using css `::before` pseudo element on each element:
::before {
content: "";
position: absolute;
inset: -10px 0; /* extends 10px vertically */
}
SVG is really fun! here my recent exploration of svg dashed animations for tryarchitect.
`stroke-dashoffset` being used here to animate the offset effect. can be bit tricky.
@keyframe {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: ${-dashCycle}; }
}
SVG dashed animation on buttons ~
i've been experimenting how i can use this effect in different ui components. it goes well with buttons i think.
looks pretty seamless when you are using it along some transform movements of the component.
ever seen these small dead zones in a list of closely stacked elements? im seeing this more often.
this can be easily fixed using css `::before` pseudo element on each element:
::before {
content: "";
position: absolute;
inset: -10px 0; /* extends 10px vertically */
}
a "Table of Contents" component inspired from devouringdetails.com .
tho this is a bit simpler version for my blogs ( you can see them here sorenblank.com/writing ).
you can try it from here: sorenblank.com/writing/scroll-tracking-table-of-contents
How I optimized video assets & perceived performance:
- Added tiny ~30px base64 blurred inline <img> placeholders (instant load!)
- Moved videos from @nextjs /public to @Cloudflare CDN
- Served .webm with .mp4 fallback via <source>
SVG dashed animation on buttons ~
i've been experimenting how i can use this effect in different ui components. it goes well with buttons i think.
looks pretty seamless when you are using it along some transform movements of the component.
SVG is really fun! here my recent exploration of svg dashed animations for tryarchitect.
`stroke-dashoffset` being used here to animate the offset effect. can be bit tricky.
@keyframe {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: ${-dashCycle}; }
}
my post is a bit misleading. i am using 1 useState to save the state whether the sidebar is open or not. tho i could have done it even without any state ngl.
my rule is, if something can be done in css, i do it in css. period. just keep in mind about the browser support.
yeah. it's only supported on chromium for now. generally if something can be done in css, it should be done in css. i think that's the most performant approach.
so much you can do in css using pseudo classes. used `:has` pseudo class to make the full hover animation here.
for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover`
made only using css. no js listener used. took me longer than i thought it would.
the sidebar icon now matches the state or the state it will go to :33 css is nice ngl.
smooth radius transform accordion component using css. no framer motion used here.
for auto height transition using css `grid` inspired by @jhey.dev. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`.
and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~
3d book component. the static hover book is a pure css approach. no javascript used here. each page has a fixed rotation defined to it.
each page has a fixed rotation defined. pages are stacked with absolute positioning and all rotate from `origin-left` (the spine).
for such case where the request is almost instant ( <100ms ), jumping directly to a `success state` is much more cleaner than adding artificial delay imo.
imo loading states are generally ambiguous and means nothing without a proper `success state`.
squircles feels nice. it's my first time trying the experimental css `corner-shape` property.
you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component.
note: this is only supported on "chromium" for now.
ever wonder what makes `squircle` different? its the mechanics behind it.
css `corner-shape` maps to superellipse (Lamé curve) exponents.
superellipse(n): n=1 → round, n=2 → squircle, n=0 → bevel
higher n = flatter sides (squareish but smooth). squircle is the sweet spot.
made a CSS `corner-shape` playground. you can try all the weird shapes like squircle, bevel, notch etc.
also a nice way to visualize how the css `superellipse` function actually works.
made a CSS `corner-shape` playground. you can try all the weird shapes like squircle, bevel, notch etc.
also a nice way to visualize how the css `superellipse` function actually works.
ever wonder what makes `squircle` different? its the mechanics behind it.
css `corner-shape` maps to superellipse (Lamé curve) exponents.
superellipse(n): n=1 → round, n=2 → squircle, n=0 → bevel
higher n = flatter sides (squareish but smooth). squircle is the sweet spot.
