# New Website, New Technology
If you come here occasionally, you may have noticed that the style of my website
has changed completely. I've built a new website using [Go](https://go.dev/).
The old website was a bloated custom [Node.js](https://nodejs.org/) app that was
probably [full of keyloggers and bitcoin
stealers](https://gitlab.com/grepular/safernode). It was also difficult to work
on, and stored blog posts in [MongoDB](https://www.mongodb.com/) .
This one keeps all of my blog posts in markdown files, making it much easier to
write and edit. You will even see a "[View as raw
markdown](New_Website_New_Technology.md)" link at the top of each blog post.
Hopefully this will give me a little more impetus to post on a regular basis.
Here are some new things that I learnt in the process and some things that I've
done which are a little novel:
## SVG Sprites
You can stick several distinct images inside a single
[SVG](https://developer.mozilla.org/docs/Web/SVG "Scalable Vector Graphics")
file, and then reference them individually when displaying them from HTML. For
example, if you were to stick the following SVG content at `/img/icons.svg`:
```html
```
That SVG has a "blog" and "gitlab" image inside it. See the `id` attribute of
the `symbol` tags. If you want to show the "blog" image in your html, instead of
using an `` tag, do this:
```html
```
The fragment value is used to select the correct symbol.
## [Early Hints](https://developer.mozilla.org/docs/Web/HTTP/Reference/Status/103)
You can basically respond to an HTTP request with two responses instead of one.
The first response is a 103, which tells the client to start fetching some
resources that it will need later (unless it already has it in it's cache). The
second one is the actual response you requested. This is useful because you
might want to tell the browser to start fetching a CSS file immediately, even
though it's going to take another 200ms or whatever to render the HTML that
you've asked for:
```text
HTTP/2 103
Link: ; rel=preload; as=style; crossorigin=anonymous
HTTP/2 200
...headers
...body
```
My framework dynamically scans the templates at build time to find content that
could be pre-loaded using this method, and makes sure it is. It probably has
little impact here as my responses are so quick anyway, but it's interesting to
know about.
## [Speculation Rules](https://developer.mozilla.org/docs/Web/API/Speculation_Rules_API)
I have a minified version of the following in the head of each page on this
website:
```html
```
The above makes it so that when your mouse hovers over an anchor tag pointing to
local content, it is pre-fetched over the network. And also, at the point of a
mousedown event triggering, it starts pre-rendering that content. No JavaScript
required.
## Browser Tests
I created a set of Headless Browser tests. If I run `make test`, it fires up a
local copy of the website and visits each page in turn, searching for any errors
in the browser console and 404 or 5xx codes etc. I also have tests which will
visit all external links to see if any are broken. I've cleaned up quite a few,
but there are still some left to do after ~17 years of blogging. I have further
tests to check if external links can be upgraded from http to https.
## Single Compiled Binary
The whole website is a single executable, containing all of the code, the
webserver, the HTML, templates, CSS, images and so on. I use
[aprice/embed](https://github.com/aprice/embed) to embed the content inside the
binary. Content is even gzip compressed before being embedded where appropriate.
It's a 4.6MB binary ([UPX](https://upx.github.io/) compressed). I simply run it,
and it listens on port 8080 and serves up all content.
## Caching
In my templates, rather than using `` I put ``. My framework has a `static` template function, which
calculates a SHA256 of the content of example.png, and adds a prefix of that as
a query string parameter. E.g it might change it to ``. My framework then identifies a request
for some static content, with a `v` parameter in the query string, and makes
sure to send a `Cache-Control: public, max-age=2592000, immutable` header with
it. This tells the browser (and my nginx proxy) that this content will not
change, and to cache it for 30 days in case it is needed again. If I decide to
change the content of that file, the hash will change, and therefore your
browser will immediately receive the next version of it, ignoring the previously
cached version. The hashes are pre-calculated at build time.
## Privacy
Privacy policies are usually not very interesting, but I put some effort into
using the web technologies that are available, to secure my visitors privacy.
You might learn something interesting from it. For example I send a HTTP
response header which stops your browser from reporting to external websites
that you came from www.grepular.com when you click one of my external links. See
the full policy [here](/privacy).
` I put `
`. My framework then identifies a request
for some static content, with a `v` parameter in the query string, and makes
sure to send a `Cache-Control: public, max-age=2592000, immutable` header with
it. This tells the browser (and my nginx proxy) that this content will not
change, and to cache it for 30 days in case it is needed again. If I decide to
change the content of that file, the hash will change, and therefore your
browser will immediately receive the next version of it, ignoring the previously
cached version. The hashes are pre-calculated at build time.
## Privacy
Privacy policies are usually not very interesting, but I put some effort into
using the web technologies that are available, to secure my visitors privacy.
You might learn something interesting from it. For example I send a HTTP
response header which stops your browser from reporting to external websites
that you came from www.grepular.com when you click one of my external links. See
the full policy [here](/privacy).