What is this?

this is a very common word in the world of Javascript if you are used to Object-Oriented Programming or old-school front-end development. In the first case, it refers to the Instance of a class that is currently being used. The second, it's about the window or document objects.

In the current context, this refers to this website and this page will be used to talk about the tech stack used to create it. This is quite a bit technical and if you are not a developer, it's okay if it goes over your head.

Ok, so what is this?

This website is meant to be an outlet for my thoughts and creative expression. It was built using Deno, Fresh, Preact and Typescript.

Deno is a secure Javascript/Typescript runtime, forcing developers to opt-in when using any potentially harmful behavior (like making network connections or reading/writing to the disk). The reason I chose to use Deno, however, is for enabling me able to write Typescript code without needing to transpile it back to Javascript before deployment. For reference, Bun also allows developers to run Typescript natively since that also has built-in support for Typescript right out-of-the-box.

Fresh is the default Full-Stack framework for building Web Apps with Deno. It uses File System Routing, no build step (really!), out-of-the-box Typescript support (are you seeing a pattern here?), zero-configuration, and ships static HTML pages to the client with 0 JS unless you explicitly want to ship it using the Islands architecture.

Preact is the UI library of choice for Fresh since it can be JIT-compiled with 0 build-time. It's also Typescript compatible (another one!) and can do nearly anything that normal React could.

Twind v0 is a tailwind-in-js solution, it claims to do everything that Tailwind can do, using the same syntax (but essentially has a ton of bugs, which v1 addresses). It also requires no building/bundling step, hence why it's the tech of choice for Fresh apps. v0 claims to serve as a drop-in replacement for its original library, just like Preact+React, but lacks many of the features that real tailwind has. I initially used twind to get my foot on the door with styling, but wrote real CSS instead. This approach ended up being bad because I was having to micromanage which files get sent to each route which is some really boring process, so I've defined my custom classes as twind v0 plugins and allow it to handle shipping the correct CSS to specific pages for me instead.