Mastro.{js,ts}

@mastrojs

No dependencies, #nobuild step. Just a simple web framework and site generator for people who care about their users and web standards. Implemented in ~800 lines of TypeScript. 🧑‍🍳 mastrojs.github.io Account run by Mauro Bieg @mb21.bsky.social

371 Folgt409 Follower2.336 Posts

Bluesky

alt

Ist das dein Profil?Übernimm es — dann gehört dir mastrojs.dirty.social.Profil übernehmen

Mastro.{js,ts}@mastrojs· 11d

Mastro.{js,ts}@mastrojs· 12d

Maybe I need a larger phone than my iPhone SE 😅

Mastro.{js,ts}@mastrojs· 22d

All I can think of:

Mastro.{js,ts}@mastrojs· 26d

Oh look! source: stackoverflow.com/questions/62...

Mastro.{js,ts}@mastrojs· Jul 11

Tempelhof airport is certainly a storied place, now open to the public. en.wikivoyage.org/wiki/Berlin/...

Mastro.{js,ts}@mastrojs· Jul 8

The good news is that I managed to replace a Radix select with a customizable select. The bad news? Tailwind. Truly cursed codebase 😱

${/* Native customizable <select> (Chrome 133+, Safari >=27) instead of Radix: the <selectedcontent> mirrors whichever <option> is selected directly off the DOM, so an auto-picked value (see the effect above) displays correctly without ever having to open the dropdown first — which the Radix Select couldn't do. Browsers that don't yet implement this part of the spec, fall back to a plain mostly unstyled <select> */} <select value={value ?? ""} onChange={(e) => onChange(e.target.value || null)} className={cn( "border-input focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 flex h-8 w-full items-center rounded-lg border bg-transparent px-2.5 py-1 text-sm transition-colors outline-none focus-visible:ring-[3px]", // @tailwindcss/forms puts its own arrow on every <select> via // background-image — clear it so it doesn't double up with the // browser's own ::picker-icon arrow for the customizable select. "bg-none", "[appearance:base-select]", "[&::picker(select)]:border-border [&::picker(select)]:bg-popover [&::picker(select)]:text-popover-foreground [&::picker(select)]:mt-1 [&::picker(select)]:[appearance:base-select] [&::picker(select)]:rounded-[var(--radius)] [&::picker(select)]:border [&::picker(select)]:p-1 [&::picker(select)]:shadow-[0_4px_12px_oklch(0_0_0/10%)]", "[&_option]:rounded-[calc(var(--radius)-4px)] [&_option]:px-1.5 [&_option]:py-2", "[&_option:hover]:bg-accent [&_option:hover]:text-accent-foreground [&_option:focus-visible]:bg-accent [&_option:focus-visible]:text-accent-foreground", "[&_option:disabled]:pointer-events-none [&_option:disabled]:opacity-50",$

Mastro.{js,ts}@mastrojs· Jul 6

"JSX is just like HTML", they said 😭

return (
<Sidebar collapsible="icon">
<SidebarContent className="gap-0">
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton onClick={() => setCommandOpen(true)}>
<SearchIcon />
<span>Search</span>

Mastro.{js,ts}@mastrojs· Jun 25

Spending way too much time shaping the flow of the text on mastrojs.github.io – on desktop 😅

Mastro.{js,ts}@mastrojs· Jun 1

nope, peaked here :)

Mastro.{js,ts}@mastrojs· May 30

“nope.”

Mastro.{js,ts}@mastrojs· May 25

Mastro.{js,ts}@mastrojs· Apr 23

No, THAT is him!

Sean Connery on a balcony in the film The Rock

Mastro.{js,ts}@mastrojs· Apr 20

😱

screenshot of my timeline with parent post and another one that has an image of a horse labelled Claude

Mastro.{js,ts}@mastrojs· Mar 27

Diagram wih Java compiler saying “Write Once Run Anywhere”

Mastro.{js,ts}@mastrojs· Mar 22

not really: arstechnica.com/newsletters/

Mastro.{js,ts}@mastrojs· Mar 20

Mostly happens when you have short paragraphs. Generally I find it a tad too aggressive. It does reduce runts, but some lines tend to be too short and therefore the paragraph looks less like a block. E.g. if I were to apply it on mastrojs.github.io/docs/html-co... it would look like on the right.

Mastro.{js,ts}@mastrojs· Feb 27

Oh, cool! The Docs tab in @jsr.io now defaults to the default export (previously it was "all symbols", which got sometimes cluttered). jsr.io/@mastrojs/ma...

Screenshot of https://jsr.io/@mastrojs/mastro/doc

Mastro.{js,ts}@mastrojs· Feb 9

Awesome! Especially:

90s-style website sticker reading "bluesky"

Mastro.{js,ts}@mastrojs· Feb 4

Came here to say the same!

Mastro.{js,ts}@mastrojs· Jan 20

I’m telling you, phones these days are too big!

screenshot of cut off GUI on small iPhone

Mastro.{js,ts}@mastrojs· Jan 14

Like this?

old Mac OS X version with Safari in brushed metal look

Mastro.{js,ts}@mastrojs· Jan 2

it says “experimentation” here 😅

Mastro.{js,ts}@mastrojs· Dec 4

Nice! Although the way I learnt it was more like:

three layers:
- html/structural at the bottom,
- css/presentational at the middle
- javascript/behavioral at the top

Mastro.{js,ts}@mastrojs· Dec 1

Congrats! btw. you might want to fix the max-width on some breakpoints on the docs page

Mastro.{js,ts}@mastrojs· Nov 26

Mine is definitely conscious.

Mac Pro that looks like a cheese grater.

Mastro.{js,ts}@mastrojs· Nov 18

for the range attribute, you could also set “u1234-u5678, u9ABC-uDEF” for other unicode ranges, like all kinds of hyphens and dashes, or whatever you’d like your users to be able to insert easily.

Mastro.{js,ts}@mastrojs· Nov 1

It’s been like that in macOS for a while? But indeed, in iOS they simplified/dumbed it down to: