New Blog Design + Performance Improvements
Tl;dr this blog now has a slightly new design, a dark mode, and better loading performance.
New Design
The blog now (finally) has a dark theme. It should turn on automatically if you have your browser or operating system set to dark mode. If something isn't working let me know!
Also, if you have high contrast mode enabled, the theme now meets WCAG guidelines for accessibility. That way, people with certain types of color blindness or other conditions should have an easier time reading everything.
Improved Performance
(read if you're interested in html hyperoptimizations)-
inline styles: The most important CSS styles are now inlined in the HTML. That way, the browser doesn't need to wait for a second request to apply the CSS styles.
-
content first: The content of a post now loads first, before the header and footer. The HTML looks like this:
<html> <head><!-- ... --></head> <body> <main><!-- blog post - this loads first! --></main> <header></header> <footer></footer> </body> </html>
The header and footer have
position: fixed
and the main element has top and bottom margins to make sure it's correctly positioned right away and there's no layout shift. -
no bootstrap: I've removed the
bootstrap
andbootstrap-icons
dependencies. Icons are now inline SVG and the CSS is all hand-written! -
server-side code highlighting: I've removed the
highlight.js
dependency. Code highlighting now happens on the server. That also means that code highlighting now works for users with JavaScript disabled! -
more preloading: Every blog post is now its own PHP file, which means I can set custom
link rel="preload"
headers. That way, images and other resources that appear only in one post can also be preloaded!