Don't you have to compile TypeScript to JavaScript before you can run it?
TypeScript web framework with no build step – but how? | Mastro Blog
Don't you have to compile TypeScript to JavaScript before you can run it?
mastrojs.github.io
Mastro.{js,ts}
@mastrojs.bsky.social
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
Didn't realize this is supported even in Safari >=16 🥳 :root { --screen: "small"; @media (width > 900px) { --screen: "large"; } } body { font-size: 1rem; @container style(--screen: "large") { font-size: 1.5rem; } }
Álvaro Montoro@alvaromontoro.com · 4d agoYou can simulate something like that with container style queries, which are supported by all major browsers: codepen.io/alvaromontor...
“I will spend the rest of my career working hard so that you’ll never have to use build tools again.” – @davatron5000.bsky.social Welcome to the #nobuild movement! 🙌✊
@shoptalkshow.com · last wk.725: CodePen 2.0, Templates on the Web, The Year of HTML? CodePen 2.0 is out now and we're talking about the launch, the idea of templating on the web, and how HTML could look very interesting in the future.
I'm looking for a new role as a lead frontend/TypeScript engineer. 👋 13 years of experience and I formerly led the web team at Unsplash. My CV: drive.google.com/file/d/1Hp7w... If you know of any roles, please reach out. I'd really appreciate if you could share. Thank you!
That’s good (assuming it’s not an excuse for them to just burn more tokens 😬)
luke karrys@lukekarrys.com · last wk.npm is now scanning packages for malware at publish time before they become available for consumption
Chromium devtools is almost a web IDE/design tool. You can add folders + files to it. Make changes in the style editor that persist to disk. developer.chrome.com/docs/devtool...
Set up workspaces to save changes to source files | Chrome DevTools | Chrome for Developers
Set up a workspace to save changes made within DevTools back to your source files.
developer.chrome.com
Mastro's HTML generation is even faster now. 🚀 Our first benchmark runs in an amazing 2.0µs on my laptop (down from 6.0µs): - Benchmark: github.com/mastrojs/mas... - Implementation: github.com/mastrojs/mastro/blob/main/src/core/html.ts
@nomster.bsky.social's Two-Phase View Transitions example here shows an MPA (multi-page application) navigating between to separate pages (two full page loads), with a smooth skeletal loader animation between them. noamr.github.io/two-phase-vt...
Do We Still Need Build Tools?, by @ollie-williams.bsky.social: https://olliewilliams.xyz/blog/no-build/?ref=frontenddogma.com #css #javascript #building #tooling
Do we still need build tools?
Do we still need Rspack, SWC, PostCSS, Vite, Parcel, Webpack, Turbopack, esbuild, Rollup, Rolldown, Babel, Autoprefixer, esbuild and Lightning CSS in 2026?
olliewilliams.xyz
Think we've all known this intuitively for a long time now. embrace.io/blog/researc...
New research: The Core Web Vitals thresholds you trust might be wrong for your site
Core Web Vitals data from ten leading online retailers reveals that "good" for Google may not be good enough for your users or your business.
embrace.io
Updated hero and footer on mastrojs.github.io 🥳 Also, "Getting started" is hopefully easier to find now. Thanks @tobbe.dev for the help!
Mastro: No dependencies. No build step. Just a simple web framework and static site generator.
A minimal tool for people who care about their users and web standards.
mastrojs.github.io
@kevinpowell.co What happened to thecascade.dev/article/leas... (404)? I was linking to that from mastrojs.github.io/guide/css/ 😭
Styling with CSS | Mastro Guide
A minimal tool to build content-driven websites
mastrojs.github.io
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",](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:slxmn2ejggkwwbzlej2axmx6/bafkreibxzsjkykgxbf46w54pejkvgrp5pwnhqwm7mk4gktgpveic2ildgq)
> We can’t “go back” — we’re remembering it wrong anyway.
henry ✷@strange.website · last mo.i was thinking about what it could feel like to use a computer.
By the guy who brought you CodeMirror and ProseMirror: A new rich text editor called Wordgard! marijnhaverbeke.nl/blog/wordgar...
“i want App Router to get good!” yeah… good luck!
dan@danabra.mov · last mo.... i have joined the @nextjs.org team at @vercel.com. for a start, i'll be working part-time, so please don’t flood me with bug reports yet. however, i’ll try to keep an eye on them as i want to understand what problems Next.js users are running into every day. i want App Router to get good!
Remember when we were reluctant to add an additional <div> only for the CSS? 😅 Good times.
are you still doing the awkward atob/btoa dance to convert to and from base64? you can stop it now, it's fully supported on modern environments and it can be polyfilled in here: github.com/ungap/base64...
GitHub - ungap/base64: Uint8Array.fromBase64 and Uint8Array.prototype.toBase64 polyfill.
Uint8Array.fromBase64 and Uint8Array.prototype.toBase64 polyfill. - ungap/base64
github.com
Just got a ticket for @zurichjs.com 🥳 Looking forward to see some of you there!
Just removed the last remaining dependency from Mastro 🥳
And some things that should not have been forgotten were lost. History became legend. Legend became myth. And for a decade, CSS knowledge was all but lost.
Eric Peacock@ericpeacock.design · 2mo agoAgree wholeheartedly; Over time basics that still work everywhere were forgotten — and things that CSS now does that solve problems JS frameworks were made to solve aren't being fully utilized (flexbox, grid, calc, :has, masonry, etc.). The things we wished for we now have, but they're underused!
New version of our @standard.site publishing library just dropped! 🚀 Now with TIDs. The story, and and a call for community, in our updated blog post:
How to easily add Standard.site support to your website
mastrojs.github.io
Nice to see more and more things once only the domain of imperative JavaScript moving into declarative CSS. Soon, tho most certainly not yet, ppl might notice you don't need a bundler or associated tooling when your script payload is negligible.