lowtechguys VS caniuse

I use something very similar on https://lunar.fyi and https://lowtechguys.com but I wouldn’t call this “simple” anymore.

They use Jinja templating, I prefer Slim (https://github.com/slim-template/slim#syntax-example) which has a more Pythonic syntax (there is plim [0] in Python for that)

I use Tailwind as well for terse styling and fast experimentation (allows me to write a darkMode-aware and responsive 100 line CSS in a single line with about 10 classes)

For interaction I can write CoffeeScript directly in the page [1] and have it compiled by plim.

I run a Caddy static server [2] and use Syncthing [3] to have every file save deployed instantly to my Hetzner server.

I use entr [4] and livereloadx [5] to rebuild the pages and do hot reload on file save. All the commands are managed in a simple Makefile [6]

———

You can already see how the footnotes take up a large chunk of this comment, this is not my idea of simple. Sure, the end result is readable static HTML and I never have to fight obscure React errors, but it’s a high effort setup for starters.

Simple for me would be: write markdown files for pages, a simple CSS for general styling (should be optional), click to deploy on my domain. Images should automatically be resized to multiple sizes and optimized, videos re-encoded for smaller filesize etc.

I have mostly implemented that for myself (https://notes.alinpanaitiu.com/How%20I%20write%20this%20blog...) but it feels fragile. I’d rather pay for a professional solution.

[0] https://plim.readthedocs.io/en/latest/

[1] https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...

[2] https://caddyserver.com/docs/command-line#caddy-file-server

[3] https://syncthing.net

[4] https://github.com/eradman/entr

[5] https://nitoyon.github.io/livereloadx/

[6] https://github.com/FuzzyIdeas/lowtechguys/blob/main/Makefile

One less known use case for this is creating animated UI demos, which as a dev I find harder to do using video editing software.

I used it to create the simple demo on the rcmd frontpage: https://lowtechguys.com/rcmd

This is the code, where I'm just animating elements of an SVG I previously created with Sketch: https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...

I'm also doing the same thing for the Lunar frontpage: https://lunar.fyi/

But because Lunar's demo is a lot more resource intensive, I pre-rendered it into a video, and heavily optimized it for each screen size, in H.265, WEBM and H.264.

Can I X, is a question about the readiness/compliance of a certain thing at time = now. Can I use CSS version X was the iconic early meme.

https://caniuse.com/?search=css3

For a generalized example, if you wanted to know if the basketball courts were ready for you to “ball it up” in a certain city, it’d be caniball.com

If you want to know if you can use a certain frontend technology, the idea is like: canwefigma?

It’s a glorified feature matrix, and usually a project of a passionate community. I approve, even if some of the memes are a bit dank.

https://caniuse.com/ is a popular tool to check what web features are working across different browsers - "can you use this and assume that it will work for others".

The article uses custom css @properties which are awesome and have 88% browser support [1].

One thing to watch out for is differences in how browsers handle setting the fallback initial-value. Chrome will use initial-value if CSS variable is undefined OR set to an invalid value. Firefox will only use initial-value if the variable is undefined. For most projects, this won't be an issue, but for a recent project, I ended up needing to use javascript to set default values in Firefox to iron out the inconsistency between browser implementations.

[1] https://caniuse.com/?search=%40property

Safari is the only browser that doesn't support extending HTML element

https://caniuse.com/?search=Custom%20Elements

You forgot to mention (Web)Workers. This is explicit creation, management, and communication with additional threads within JavaScript. What's more, they've been around in JavaScript longer than the V8 engine has even existed!

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers...

https://caniuse.com/?search=webworkers

Do you happen to know where can I check out the cutoff version for each browser? https://caniuse.com/?search=wasm doesn't have it (or other things like WasmGC for that matter)

(https://caniuse.com/) A handy tool for checking the browser compatibility of HTML, CSS, and JavaScript features. Can I Use provides up-to-date support tables for various web technologies across different browsers.

Caniuse