Making of this website

Philosophy

I write this website entirely by hand, so I have full control on all the important aspects:

performance,
accessibility,
code readability,
data collection (there is none but the server logs),
visual style,
and of course, the content!

I believe websites should be, as much as possible, accessible and lightweight.

Performance

I put some care into the performance (speed of page loading) of this website.

Everything is Static

This site is not a webapp. There is no need for dynamic stuff when the content is static, so I made it all static. This allows for some nice optimizations, both server-side and client-side:

the server just serves the file, no computation time needed,
all files can be cached by the browser: when you come back to it, it loads faster,
every bit of code is useful: there is no useless Javascript or CSS leftover that may be useful somewhere else.

File size

There is no useless code: no file contains more than 150 lines. Also, all images are scaled so that they always appear clean, but have the smallest file size: they are 2x the intended display size (to account for zooms and retina displays) and I squeezed out the unneccessary metadata. My hosting service is configured so that files are compressed with gzip, so the file transfers use a low bandwith. I do not minify my code, because using gzip makes for the most part in bandwith reduction, and minification hurts code readability.

Number of requests

Because everything is simple and static, I only need a few files:

one HTML file per page,
one CSS file for the whole website,
one file per image.

This results in very few HTTP requests. Then, since everything is hosted under the same domain, there is only 1 DNS resolution, and HTTP/2 takes care of multiplexing requests.

Tools

I use firefox's dev tool to inspect the behavior of the pages (cache, file size, transfer size, latency). I also use Google's PageSpeed, a reporting tool that focuses on performance.

Accessibility

I try to do so that the website is accessible.

Practices

My practices include:

a high contrast color theme,
structural HTML markups, such as <nav> and <section>,
alt text for all images,
explicit description of links,
a simple and flexible page layout,
ARIA tags that hide icons from screen reader softwares.

If you think something is missing, please let me know! I am only a hobbyist, but always looking to improve myself.

Readable code

I also think of accessibility in terms of code readability: if you want to see how the page is made, please look at the code! It should be easy to read if you know some HTML/CSS, and if you don't, the MDN is a decent starting point.

Tools

The dev tool of my web browser (firefox) gives informations on the accessibility properties. Of course, that is not all: I try to follow advice from MDN web docs, and I look at WAVE reports.

Other considerations

A somehow important aspect is the compliance of my code with the standard. Of course, firefox's dev tool helps, but I also rely on the W3C's Nu HTML checker. I also do some link checking, with the W3C's link checker.