2022-09-23.01
It's the Friday, "Weekend Project" edition! Today, there are three resources designed to get you building something fun on the intertubes. Doesn't have to be yuge, either! Let's dive in.
Mithril
Mithril.js [GH] is a "modern client-side JavaScript framework for building Single Page Applications. It's small (< 10kb gzip), fast and provides routing and XHR utilities out of the box."
Now, if you're thinking: "yet-another javascript framework…we've got React…away with you!", just hear me out.
(Almost) Gone are the days of dumb HTML pages firing off requests to CGI backends, and doing arcane work to manage state and respond to your inputs. Reactive coding tightly couples data, logic, and presentation, ostensibly making coding easier, and user experiences more fluid and engaging. You really want to design any new web pages/apps/experiences within a reactive context. That likely means picking a framework. If you already know React, Vue, or other popular ones, I'm unlikely truly going to convince you to toss away that investment, but Mithril is way smaller, much less cumbersome to code, provably faster, and can scale from small to giant projects. You can dig into the comparisons yourself.
It takes about ten minutes to get familiar with the framework, and it's super simple to get started with a "hello, world" example:
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
var root = document.body
m.mount(root, {
view: function() {
return m("h1",
{ style: "font-family: monospace;" },
"hello, world"
)
}
})
</script>
</body>Yes, you write HTML in javascript, but you have the option to go the other way 'round. The m() function is just super shorthand for creating an HTML element. I've hardcoded a CSS style (don't do that IRL), but you could also set a class just as easily.
I've got a small, working example, based on their "button counter" that uses Tailwind CSS to support light/dark mode + center everything in the middle of your browser, and REM (see the second section) to help maintain state.
This very trivial example doesn't need any local Node/NPM setup (see the last section for that, if you want to go all-in), but actually does something reactively. You should be able to use it as a template for the other Mithril examples on the Mithril site. It’s especially worth learning if you’ve never worked with Vue, React, Svelte, or other reactive environments as I think it does a much better job explaining the concepts than they all do.
REM
REM [GH] is a "starting point for big dreams".
For any modern HTML app, you're going to need to store and retrieve data. This can be paralyzing when you're prototyping, as it usually means "infrastructure of some sort. HTML/CSS/JavaScript coding is one thing. Infrastructure management is another.
What REM technically is, is a REST API for prototyping. You feed it JSON, it gives back JSON, and persists data between requests like a real API. But your test data is only visible to you since it's stored in your browser's local storage. It's really quite clever!
If you look at the source to the example in the first section, you'll see I've made my own "endpoint" on the REST API, and all the site is doing is manipulating the:
hrbrmstr-daily-drops=count,id\n3,1; Path=/;browser cookie.
This can be a great way to, ahem, test out new javascript frameworks, or learn how to make HTTP API requests in new programming languages/libraries. It also comes with a pre-populated "users" "database" as well. Just remember cookie storage tops out at ~4K in most browsers.
Wright
NOTE: You don't need to read this section to create something fun in Mithril + REM!
In most cases, no one starts up a new web project with just their fav editor and a plain HTML canvas. After a learning curve, it's much, much easier to use some managed project environment that makes it easier to add-in resources, maintain their versions, and "bundles" up all your components.
Lucky for you, there's a create-mithril-app action for NPM that will set up a Mithril project for you, with webpack (see the 🔗 in the previous ❡). You could just use this alone and ignore the remainder of this section, but then you wouldn't learn about Wright!
Webpack has a built-in server that will monitor for source changes and auto-reload as you iterate through a project. That's neat, but Wright does so much more.
When you point it at your project root, it reads the source, does some funky patching of your assets, hooks itself into the Chrome Debugger Protocol (so, yeah, it requires a compatible browser), and supports hot module-level reloading by directly manipulating the browser tab's virtual machine (yes your browser tabs have javascript VMs), and maintains application state for you. I'm pretty sure you can ask it for a pony too.
And, seriously, after your build job runs, you just do:
$ wright index.htmlIf you've not headed down the path of using NPM to manage web projects before, perhaps just stick with Mithril & REM, but keep Wright in your bookmarks when you're ready to level up!
FIN
Go build something awesome! ☮