New Blog Design + Performance Improvements
Tl;dr this blog now has a slightly new design, a dark mode, and better loading performance.
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: fixedand 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-iconsdependencies. Icons are now inline SVG and the CSS is all hand-written!
server-side code highlighting: I've removed the
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!