2026-02-09 04:25:38
holpxay n. [hol.ˈp’aj] number.
A notepad calculator where math just works. Type expressions, see results instantly.
Arithmetic & Numbers
+, -, *, /, ^, !, mod, and parentheses×, ·, ÷
50%, 200 * 15%), scientific notation, underscore separators0xFF), binary (0b1010), octal (0o777), arbitrary bases (ABC base 16)pi, e, phi) and functions (sin, cos, sqrt, log, round, abs, random, …)Units & Conversions
5 km + 500 m, 100 ft^2 + 5 m^2
60 km/h, 9.8 m/s^2, 50 watts per square meter
5 ft 7 in, 2 hr 30 min 15 sec
to, in, as, ->, →
171 cm to ft in
150 apples / 30 apples/day
Date & Time
today, 3 days ago, 2 weeks from now)now + 100 days, 2038 Jan 19 - today
18:30 Tokyo, now in London, UTC offsets1700000000 unix
today to weekday, now to hour
Currency
100 USD + 50 EUR, 100 USD to JPY
150 USD/person * 4 person
Variables & Conditionals
price = 49.99
&&, ||, !
if 5 > 3 then 100 else 200
&, |, xor, ~, <<, >>
Output Formats
to hex, to binary), fractions, scientific notation, percentages, ordinalspi to 2 decimals, 12345 to 3 sig figs
Editor
#)Holpxay Calculator appeared first on 1A23 Studio.
2026-01-13 00:25:58
A web tool to check codepoint / glyph coverages of a font. Capable of checking coverage of the following collections:
Font coverage analyzer appeared first on 1A23 Studio.
2026-01-01 08:00:00
Photo by Pascal Debrunner on Unsplash
Typefaces: Birthstone Bounce, The Nautigal
Have a wonderful 2026! appeared first on 1A23 Studio.
2025-11-29 12:38:40
Here’s a small but fun use case for CSS Anchor Positioning, using it to keep multiple labels around a progress bar readable, without touching JavaScript.
The goal is simple: we have a horizontal progress bar with three labels: one on the left, one on the right, and one that should follow the progress “tip”. We want that center label to sit as close as possible to the current progress, but never overlap with either side label.
To make things easier, we’ll assume:
Instead of hard-coding coordinates, it helps to think in terms of a small set of layout rules the browser can try in order.
For the center label, the logic can be written as:
CSS Anchor Positioning is very good at this style of “try a few positions until one fits” layout. The @position-try at-rules let us declare those strategies explicitly and let the browser pick whichever one does not collide with the container or other constraints.
In this example, I use three named anchors:
--prog-bar: the progress bar itself (specifically, its right edge as the “tip”)--left-label: the fixed label on the left--right-label: the fixed label on the right.The moving center label is then positioned relative to these anchors.
@position-try strategiesHere are the two position-try rules that implement the logic above:
@position-try --bar-left {
position-area: none;
right: max(
calc(anchor(--prog-bar right) + var(--container-padding)),
calc(anchor(--right-label left) + var(--label-gap))
);
margin-left: calc(
var(--container-padding) + anchor-size(--left-label width) +
var(--label-gap)
);
}
@position-try --bar-right {
position-area: none;
left: max(
calc(anchor(--prog-bar right) + var(--container-padding)),
calc(anchor(--left-label right) + var(--label-gap))
);
margin-right: calc(
var(--label-gap) + anchor-size(--right-label width) +
var(--container-padding)
);
}
Conceptually:
--bar-left corresponds to “try to sit just to the left of the progress tip”.--bar-right corresponds to “otherwise, sit just to the right of the progress tip”.The “third rule” (move next to whichever label is closer) is effectively folded into the max() expressions:
right / left we take the maximum of:
This means:
var(--label-gap) of space.anchor-size()
The margins are where the overlap-avoidance really happens.
Take this line as an example:
margin-left: calc(
var(--container-padding) + anchor-size(--left-label width) +
var(--label-gap)
);
Here we:
anchor-size(--left-label width).In other words, instead of guessing spacing with hard-coded numbers, we attach the spacing directly to the real measured size of the anchors. That’s exactly the kind of thing anchor-size() is designed for.
The same idea is used for margin-right with the right label.
Once the @position-try rules are defined, the center label simply opts in to them, for example:
.label.center {
position: absolute;
top: var(--container-padding);
position-try: --bar-left, --bar-right;
position-anchor: --prog-bar;
position-area: left;
}
The browser will then:
--bar-left.--bar-right.Combined with the max() insets and anchor-size()-based margins, that’s enough to:
The full implementation – including the anchors and layout container – is in the CodePen embed above.
CSS Anchor Positioning is still relatively new, and support is rolling out across browsers. Before using this technique in production, it’s worth checking current support status or adding a progressive enhancement fallback.
You can use the Baseline widget below to see the latest support details for anchor positioning across engines, and upvote the feature you want to see become interoperable across major browsers:
Progress Bar Labels with CSS Anchor Positioning appeared first on 1A23 Blog.
2025-10-19 05:52:50
A bundle of recipes I wrote for TRMNL, an e-ink dashboard display.
A TRMNL plugin that fetches and displays the Wikipedia article of the day in multiple languages.
A digital world clock shows up to 7 time zones. Inspired by World Time Buddy and Windows 11 World Clock.
A random CJKV ideograph with pronunciations, definitions, and regional glyphs on each refresh. Data powered by zi.tools 字統网.
Shows connection statistics of public recipes. You can choose to show the latest, search for keywords, show your own recipes, or show selected recipe IDs. Data powered by TRMNL Recipes API.
Slickdeals Frontpage and Popular deals. Data from Slickdeals RSS feed.
Word clock in Japanese. Supports 24-hour and 12-hour formats, with a maximum display precision of 5 minutes (depending on recipe and device update frequency).
Word Clock in Chinese. Supports 24-hour and 12-hour formats, as well as Simplified and Traditional Chinese. The highest precision is 5 minutes (determined by the plugin and device refresh rate).
Sunrise and sunset time with a daily and yearly chart.
TRMNL recipies appeared first on 1A23 Studio.
