Technology Stack
Fresh
The framework i ended up using is called Fresh. Is is infact so fresh that, at the time of writing this, version 1.0 came out bearly a week ago. I've been delighted how easy it is to get started despite the relatively lightweight documentation and example. I managed to create the first version of the site and deploy it within a day. It is very similar to creating a website with Next.js and react. It uses Server Side Rendering (SSR) and serves minimal js bundle to the user for interactivity.
Here are some sources i used to get started with fresh:
- Offical Documentation
- Offical Site Source Code
- 1.0 Blog Post
- Chat Example Project
- Deno Discord Fresh Channel
- Luca Casonato's Freshworkshop
Deno & Deploy
It is also the first time i've used Deno as my server runtime. One of the most convenient features is native Typescript support. I've exclusively used tsx in this project.
For hosting I'm using Deno Deploy. It was mostly a one-click process. However because of some trouble with my domain provider it took some time to link up my domain saket.dk
Development
The DX of modern web development still lacks. Writing in CSS in JSX/TSX is a pain in the ass. The is no auto complete in Visual Studio by default, so I've been forced to memorize how to center a div 😱. Error messages are unfortunately still widely useless gibberish in the javascript ecosystem (Especially when coming from Rust). Many simple errors take way too much time to debug, because the only thing to go off of is the imprecise error message and a useless stack trace. Nonetheless something has to keep stackoverflow.com running.
To SEO optimize each Blog page has it's own description and title. This was simply enabled by the route changing the head via `{ Head } from "$fresh/runtime.ts"` and dynamically inserting the values.
I ran a lighthouse test on first version of this website. And I'm glad to say that it's at a score of 98 with a 1.5s time to interactive. Although this first performance test is to be taken with a grain of salt, because the page doesn't contain much yet.
Styling and Responsiveness
The styling came from a video i was trying to make explaining code. The content was aimed at beginners, so i decided to use the same color scheme as in Visual Studio so viewers would have visual consistency. I and probably many more have become familiar with the colors. I didn't stop at the color palette, I went and wrapped the entire page in some brackets {} 🤓
Responsiveness is really important and tricky to get right. A lot of things can go wrong and break the user interface on some devices or orientations. It's a game of wack-a-mole to get the all elements to fit on all sizes. The most important media query implemented is when reading a post. On mobile the images are no longer inline but instead center block displayed. This prevents the image from breaking up the text in unpredictable ways.
{ Wrapping up }
There is still some things missing from the site. In the future I would like to create an RSS feed and add a github based comment section to the blog posts
Read part 2 where i add the RSS feed.