Hacking on https://mastrojs.github.io – a static site generator that runs in your browser, and accompanying web dev intro course. https://github.com/mb21/
53 followers 95 following 394 posts
view profile on Bluesky
I didn’t mean iframes but old 90s frames. But more seriously: “a more MPA/cross-document manner. However, it is unclear what that’s going to look like, and would potentially lead to an IFrame-based architecture.” I would love to explore how something building on view transitions would look like.
True, but the use-cases where an SPA make sense really seem to shrink every year. Has there been an HTML attribute or similar proposed that would keep an element’s scroll bar position or an input’s text and cursor position across page transitions, if it has the same id? Similar to view transitions?
Multiple segments… that’s also one way to look at it… like frames, anyone remember those? 😅
True, but the use-cases where an SPA make sense really seem to shrink every year. Has there been an HTML attribute or similar proposed that would keep an element’s scroll bar position or an input’s text and cursor position across page transitions, if it has the same id? Similar to view transitions?
It seems to me we already have that: it’s called an MPA. Perhaps we should instead try to address the few remaining use-cases that currently cannot be done with an MPA?
There’s hate for JS on the server? Because people say there are better programming langs?
modern CSS is so good. need to take a color from your design system, desaturate it and lower the opacity? oh and you want different values for light mode and dark mode, too? boom, easy:
i should explain why i'm so excited about this. i have a love/hate relationship with javascript. it's the most brittle part of the web stack. all else being equal, if you can do something without javascript you probably should.
Probably jibes with the personalities of Ryan and Rich :-)
I associate that phrase with headless CMS…
does it break if you use it twice on the same page?
Thanks, really interesting.
Congrats! I’m curious how you guys do this. Employers agreed you can spend some time on solid, or it’s all volunteer based?
Like mastrojs.github.io ?
Nope, it just crashed one final time and I pulled the plug.
ah, I see. well, ideally any atproto change would trigger a rebuild of the static site in CI/CD. Then you wouldn’t need any slow client-side JavaScript. That’s how you’d do it with a CMS and a static site as well.
btw. one more option, if you would React-like devex without a build step / bundler is my mastrojs.github.io/reactive/
btw. on my iPhone the page with the blog post loads extremely slowly. Seems it’s using React or something to load the text after the initial HTML? why?! this is a content-only site! (Text then flashed on and off a couple of times before finally staying there.)
Counter argument: arstechnica.com/information-...
Fair point. It’s just that there are way too many bloated (often React) websites out there and users on low-powered Android phones on slow mobile networks suffer for it.
I rarely link to the orange site, but this is a really good comment: news.ycombinator.com/item?id=4387... Feels like that's the same kind of reasoning like "Nobody was ever fired for choosing React".
On GitHub Actions?
That’s why you need to learn HTML and CSS if you’re serious about web design.
Brand is external perception, culture is internal.
I feel like we’re just relearning all the painful lessons RPCs have taught previous generations of programmers. It’s a veeery leaky abstraction.
Forget SPAs, choose MPAs. We interview @mb21.bsky.social, the creator of @mastrojs.bsky.social, a modern JavaScript meta-framework designed to build multipage apps (MPAs). By @lorainelawson.bsky.social
Well, they have these things they call webviews ;-)
While that’s cool, I’m still hoping Dan will get into multi-page-apps (vs SPAs) at some point.
I was interviewed! Please share to get the word out. I’d love to get a conversation going where Mastro (and web dev in general) should be heading for.
Very exciting news. With these changes, you can more easily build accordions such as seen in this recording. developer.chrome.com/blog/styling... Currently supported in Chrome and Safari, and soon Firefox!
Nice! I’d have another one that might fit into 200 lines, but it would depend on the signals lib so it’s not completely self-contained. github.com/mastrojs/mas...
Cool demo for Rust! But surely in real-world projects, the performance bottleneck is in the user’s browser, not on the server where you can always rent more VMs?
I wonder whether anybody will do a talk similar to this one in a decade, but instead about React and/or bundlers: www.youtube.com/watch?v=wo84...
Nice! A lot of people having similar ideas :-) e.g. Mini JS looks very similar to mastrojs.github.io/reactive/ ?
Uh, I loved the idea of AirTable. What happened? Just lost to Notion, or? The idea of db-first instead of wiki-first always appealed to me.
Probably the reason is “Implementations may use a pre-generated set of files served as static web resources”. Statically generated websites don’t support query parameters.
Thanks! That’s kind of what I was looking for. But would really prefer query parameters with optional key-value pairs instead of an opaque slash-separated list 😅
Does any somewhat standardized url query parameter format exist for image resizings and transforms? I could have sworn I saw a spec on GitHub a while ago, but absolutely cannot find it anymore! Did I hallucinate it? Something like imgproxy or Cloudflare images but they all use different formats.
If it’s a new project, have you considered going with one of the newer and more performant React alternatives like Svelte or Solid?
I see, makes sense if you use shadom dom etc. Instead, I mostly follow www.smashingmagazine.com/2016/11/css-...
Perhaps what you should do is a survey with questions like here’s some code and a screenshot, what would you do to add feature x, or what would you expect this or that code to look like? Could even commission an independent UX researcher to do that and agree with the Chrome team on the questions? 🤷🏾♂️
I feel bad for not being able to give you any feedback. But to be homest, even though I use grid and flexbox once every other month, I never read the spec, and basically every time need to look in the cheat sheets on csstricks.
Related: bsky.app/profile/did:...
Very cool! I thought bundling also helps with cold start times? What’s the plan for that? Not sure how Deno Deploy accounts for that either.
I think one version is implemented in Chrome behind a flag. developer.chrome.com/blog/masonry...
Why do you need to import them to specific components? Only if you intend to do different chunks for different pages, right? That’s certainly good if you inline your CSS into the HTML. But if you use the same stylesheet for all pages, you can cache it.
Why not just concatenate all CSS files into one? (like github.com/mastrojs/mas...) Technically, it’s a build step but very easy to do.
It’s cool that this works for Node.js as well.
I assume you’ve seen the arstechnica.com review?
Agreed. But had to laugh that this came from Dan, because one thing I don’t like about React is that it’s this almost impenetrable layer of indirection that’s hard to reason about (especially performance-wise).
Uh, I thought with scroll-snap working so nicely with touch, surely there must be a way to do the same with view transitions? But perhaps you’re right 🫤
Just curious: why not GitHub Pages? What Netlify features do you need for a blog?
Do you find this helps? mb21.github.io/blog/2023/12...
Really liking CSS Relative colours paired with CSS variables combo 👌 developer.mozilla.org/en-US/docs/W... My variable names could probably do with some work, but it's nice to drop a colour in and have a set of variables ready to go. (I know I'm late to learning OKLCH - soon!)
happy html day ❇️
Transcode them, just like we do for images?
but Maybe? null is an okayish Maybe, as long as the compiler checks for it (like Kotlin or TypeScript), right?
Saying Astro is “HTML first, framework second” seems to me a bit weird. It is a JS framework after all, just server-first. Wondering what the right framing/messanging here is for Mastro. mas.to/@frontenddog...
feels like you just have to have seen a lot of different code bases. once you’ve seen two or three Ruby on Rails projects, you’ve mostly seen them all? And you’ll “get” any similarity architected app, regardless of the programming language.
yeah, for me the reason to reinvent was that I needed it to run as a VSCode extension in the browser where you don’t have a real file system.
The idea here is to radically reduce the amount of client-side js so you don’t have to chunk. It’s still sharing code between client and server though. Granted, might not work for the most complex of apps. But I was surprised to see how far you can take it.
Yes you do? Even if you just put html files in a folder you’re using apache or a cdn for routing. But more generally, a static site generator will usually have a file-based router.
Yeah, looks like it 🙈 I really wanted to just use browser apis, but that’s what I still had to write. So I published it as yet another framework 😅 Or how do you do routing?
Yeah, I’m not the type to subscribe to newsletters either. But unfortunately not everyone still has an RSS feed reader. Or is on mastodon, or bluesky. But everone has email!
To be fair, there are simpler ways to build “apps that span both client and server”. e.g. renderTodo in github.com/mastrojs/mas... is used on both.
On Saturday, August 2nd, 2025, we'll be gathering in places around the world to write and celebrate HTML. Join us ❇️ html.energy/html-day/202...
Fixed, along with yet another overhaul on the wording of the landing page 😅
Need to work on that SEO for mastrojs.github.io
It's time for modern CSS to kill the SPA | Native CSS transitions have quietly killed the strongest argument for client-side routing. Yet people keep building terrible apps instead of performant websites. | www.jonoalderson.com/conjecture/i...
Always good to factor out logic (like protocol) to pure functions without side-effects that can be unit tested.
While this is true, you still want: 1. routing (even if it’s just apache and some folders) 2. html includes/components (even if just PHP) In JavaScript-land I don’t think you can get much more minimal than this: github.com/mastrojs/mas...
How did we ever get from 6-day workweek to 5?! Can we do that process again?
Between Deno and Bun having yet another variation, you think we’ll just all settle on Node’s fs module? Or is this still being worked on in WinterCG?
Agreed. I feel like we need map/filter etc for them to make a breakthrough! github.com/tc39/proposa...
The only annoying thing is that deploying a pre-built docs folder to GitHub Pages still takes 15s and is thus not significantly faster than building the whole Starlight site in GitHub Actions (30s). This used to be instant in the old pages before they Actionized it 🙄 Like: what is it doing?!
Also got rid of 230MB of node_modules 😅 For home page, uncompressed before -> after: - HTML: 26kB -> 6kB - CSS: 83kB -> 7kB - Lighthouse: 97 -> 100 github.com/mastrojs/mas...
The Astro-based Starlight framework was already very good. But by moving the docs to Mastro itself, I could declutter things even further.
Predictably, getting the syntax highlighting (incl html in tagged templates and diff markers) to work was the most challenging. But I finally got something working now.
Eat your own dog food, they say. That’s why I’m redoing the docs and guide website using Mastro itself: mastrojs.github.io
In an immutable world, you’re not supposed to use reference identity anyway. Seems easy to lint against? (As long as mutability is constrained to the setStore callback somehow)
@jensimmons.bsky.social might know?
Hey, I thought PanWriter.com was fine?!
Every time, I see @heydonworks.com using custom properties to "hide" usage notes and error messages in CSS, I can only stand up and say "Chapeau, my friend!". 🎩 👏 Love this approach to self-document CSS code. piccalil.li/blog/a-revis...
I love CSS folks. They are soldiers of joy and delight. The world is burning and AI debates have people at each others throats and CSS peeps keep being like “check out this dancing turtle I made out of divs 🥰”
“Many SVG attributes, like the circle’s color (fill) and radius (r), moonlight as CSS properties. This means I can change them in CSS, and even use CSS transitions to animate them! 🤯 This is what makes SVG so powerful.”
I’m sure Joel would enjoy Mastro. joeldare.com/why-im-writi...
Maybe. Then again, perhaps RSC (with its custom over-the-wire protocol) and compiler are just solutions to problems caused by a fundamentally flawed design? I mean, good for them giving it a go! But it’s a fair take to remain skeptical, especially considering every other framework has signals now.
It’s called leapfrogging.
I agree that good/bad is not specific enough. But could we say React greatly moved the field forward when it was invented more than a decade ago, but nowadays there are more efficient and more lightweight solutions, which of course don’t have the same mass of an ecosystem behind them?
That’s what the cheese in my fridge tells me as well after it grew legs.
haha, I just looked it up myself: en.m.wikipedia.org/wiki/Gasolin...
Does it just evaporate or what?
That’s the obvious case, right? But there you’d like to at least the active menu icon. So it’s not a dump include anymore, but more a dynamic component….
I kinda embraced having less to read 😅 And use the OpenSocial app to combine mastodon and bluesky feeds.
Thanks again! Happy to receive more constructive criticism 😀
I finally decided to focus Mastro on the “static site generator in your browser” use-case, because nobody else is doing that. Hope the page is clearer now? (link in parent post)
It’s funny how I usually tell people to focus on one clear audience, and ruthlessly cut the text on their landing page. But when it comes to my own project, I had such a hard time doing just that. Just too many things I’d love to talk about. Thanks @asmartbear.com for reminding me!
In hindsight: was it worth it?
Yeah, although everything is terrible, we just might add some more isn’t all that great. Especially if it’s the sum of all JS that’s the problem.