Tom Leo 's Blog

April 2022 Round-Up

Published on

Things I came across in April that I feel like sharing

Cool Projects

Rent Free Media

rentfreemedia/rentfreemedia

RentFree Media is a media distribution framework built on Django and Wagtail. With it you can publish either public or premium / subscription-based content similar to the features provided in services such as Patreon, Apple Podcasts, and Substack.

What I love about this tool is markdown support, private RSS feeds, hooks for email-marketing, based on established projects (django and wagtail), and most importantly it's licensed under the AGPL with a commitment to autonomy over your own content.

They also breakdown the costs of hosting on DigitalOcean. While I suspect they might have some bias towards DigitalOcean, making the project AGPL means the control is completely in the hands of the consumer / content creator.

I enjoy their breakdown of the math:

Let's consider the math in terms of a Digital Ocean deployment:

Presume that you have 20,000 paying customers who download your weekly (4 times a month) premium-user podcast which weighs in at 100mb for a one hour long MP3 file. Presume also that on average, each of your 20,000 paying customers downloads the episodes on three different devices. 20,000 x 3 x 4 = 240,000 downloads a month

240,000 x 100mb = 24,000,000 megabytes per month downloaded

24,000,000 mb / 1024 = 23,437 gigabytes

23,437 x $0.01 per gigabyte = $234.38

Even if we don't manage to convert the world with this project, we would hope to impress upon people that serving media is not worth 10% or 18% or 25% or 30% of your gross receipts, as other media distribution "services" seem to think by virtue of their pricing. The cloud service seems to think that it's worth $0.01 per gigabyte, and you should be looking to pay accordingly for this sort of thing.

Lunar Vim

Lunar Vim seems to be heavily influenced by spacemacs and is a batteries included distribution / framework for VIM.

It seems really promising. I admittedly have been out of the loop. ctags is the most advanced thing I've added to vim. This suite seems to create a full VIM based distribution.

Really looking forward to digging more into it.

Yadde

yadde describes itself as:

an open-source, self-hosted, collaborative API development environment... a self-hosted Postman alternative

An alternative to postman that could potentially integrate better within your companies SSO configuration is very appealing. I'll likely dig more into this in the future.

Kola

Kola is an APM tool tailor made for django, and focused on Understanding

The Owen Wilson Wow API

The Owen Wilson Wow API

amamenko/owen-wilson-wow-api

Rust replacements

Over the past few years there's been a renaissance in command-line unix tools written in Go & Rust. Most famous is probably the re-write of GNU coreutils, uutils/coreutils.

TaKO8Ki/awesome-alternatives-in-rust provides a fairly big (awesome?) list of useful rust-based tools.

I personally love fd, fzf, and exa

Some projects from the list that look especially cool are:

  • zellij A terminal workspace with batteries included (alternative to screen)
  • amp
  • drill a Rust alternative to jMeter
  • entr basically a command-line watcher (I wish I had this in the dark-days of Grunt.js)

Learning The Web Platform

CSS Tint

CSS now has a tint function, discovered via @shadeed9. This will be a cool alternative to node.js plugins to handle the same thing.

number inputs valueAsNumber method

PSA: number inputs have a .valueAsNumber property that you may find handy -- https://mobile.twitter.com/Steve8708/status/1509653389453324299

<input type="number" />
const num = input.valueAsNumber

// Instead of
const num = parseInt(input.value, 10)

Bonus! For date inputs you can also use .valueAsDate! https://mobile.twitter.com/Steve8708/status/1509696332474191888/photo/1

<input type="date" />
const date = input.valueAsDate

⚡ and they are setters too ⚡ https://mobile.twitter.com/Steve8708/status/1509697626781880344

numberInput.valueAsNumber = 10;
dateInput.valueAsDate = new Date();

Front-end

Nuxt v3

Some exciting features coming in Nuxt v3, Hybrid and Suspense in particular. Incremental Static (Re)Generation in particular is something really exciting, and probably the final piece of the JAMStack puzzle for large websites.

pnpm

Deno get's lots of hype, and rightfully so, it's an exciting project. A more conservative package manager I came across the other day that seems like an easy drop-in replacement for npm is pnpm. Something I'm definatly going to look play around with more in the coming months.

Web components cool again?

AgnosticUI

I haven't dug to far into the code, but I love the idea there three selling points on their homepage:

  1. UI components you can use across multiple projects!
  2. Brand your UI components once, then watch them work in all your projects!
  3. Semantic and accessible HTML. Unprocessed CSS. Code on the platform and towards upcoming web standards.

I particularly love point number tree. They also give examples of component usage in a number of frameworks and vanilla JS.

It's interesting the way web frameworks have evolved over the years. jQuery was amazing in it's ability to manipulate the DOM and make ajax requests cross-browser. Soon projects grew beyond plugins to full-SPA experiences. And with SPAs came a lot more code that needed organizing into front-end frameworks. Built on-top of jQuery came projects like backbone.js.

Eventually the webpack ecosystem brought with it a toolchain of autoprefixer and babel, eliminating the need for compatibility layers. Where yupnope & modernizer were once standard, now we could write for the modern web platform and the webpack toolchain w/ runtime pollyfills handled the hard parts.

Ironically as frontend code required less complexity to make work cross-browser, the complexity on the frontend exploded with a new era of single-page client-side rendered applications.

Now complexity & state was being handled more & more on the front-ends, and rich user-interfaces were becoming more coupled to the frontend frameworks. Bootstrap-vue for example rewrote the UI framework using vue components.

Other projects like quasar were built from the ground-up around the vue ecosystem.

As front-ends began to bloat, a revolt and call for simplicity gave rise. Amongst the endless react tutorials and plugins, a growing popularity in static-site generators began. Projects like Jekyll were common for blogging, but didn't quite encroach on the corporate-wordpress-dominated market.

One issue with static-site generation was time to compile as the number of pages grew too large. And with that solutions like incremental-static-regeneration was born.

Then there's projects like gatsby, nuxt, and next.js with a different flavor of static-site generation. These frameworks allow for fast TTFB by pre-rendering all the pages, as well as JSON payloads for the data that would normally be fetched if rendered client-side. Then the JS & data are merged client-side in a static-page-to-SPA-transformation known as hydration.

What's amazing about these projects is that pages became "curl-able" again! You could have your react & SEO too!

But hydration is still sometimes an issue with performance.

So then interest in old-school techniques to intercept link-clicks, and asynchronously call the backend to render a sub-set of a page / partial is growing in interest again. Back in the day we called this "unobtrusive JavaScript".

Projects like hotwired/stimulus / hotwired/turbo for example or even phoenix LiveView take this to a whole-notha-levol.

And with all these changes and ever-growing complexity, companies inevitably have are accumulated technical debt, likely in the form of many frameworks.

So projects like AgnosticUI or Stencil.js are pragmatic and ready to address real challenges at companies that came-up in the past decade of rapid web innovation.

Dev-ops & Scaling

There's a lot of cool things in this space. I found some interesting articles in resource per one of the many mailing lists I follow:

There's a growing amount of tooling in the serverless space. It's a attractive solution when you can write logic and not worry about the underlining server orchestrion and scaling.

One project I came across that looks promising is SenseDeep serverless developer studio. It looks like a really nice interface for building and managing micro-services.