#design

Just fixed the flickering issue by inlining the required JavaScript, which is a really small snippet. If you’re curious about the code I’m using to toggle between the dark and light themes, following the user’s choice and falling back to the OS settings, here it is:

const mql = window.matchMedia('(prefers-color-scheme: dark)');

function toggleT (to) {
  localStorage.setItem('t', to);
  theme(mql);
}

function theme (query) {
  const userOption = localStorage.getItem('t');

  document.body.id = userOption === null
    ? (query.matches ? 'dark' : '')
    : (userOption === 'd' ? 'dark' : '');
}

mql.addListener(theme);
theme(mql);

Just made a few updates to my website:

  • Removed Tachyons.
  • New roomy header: took some inspiration from @jlelse’s and from a previous version of my website.
  • Added two new pages that have no information yet: now and use. You can find them on the header.
  • I now have a blogroll that you can find here.
  • If you look at the bottom of the page, you now have links for all the categories too.

This seems to be a small update. Maybe some won’t like the new design as much as the previous one, but I assure you: it’s at least 70 KB smaller! At least! I didn’t actually measure it πŸ˜‹

I may make some updates in the future, but for now I have some interesting plans for the now page!

I also noticed my CSS is giant (~77KB). I was using Tachyons to make it faster to develop the website. I’m thinking about removing it, reducing the CSS size. I also want to remove the image lazy loading that I’m using and use an approach like Tom’s.

I wanted to have a cleaner look on this website and make an about page instead of dumping that on the frontpage. However, I don’t feel like the current All page looks that good so… I don’t know.

In addition, I’d like to refactor my header to have more room to add more links instead of having them in the footer. Some of them may stay there, but I’d like to bring Bookmarks to the top and two other future pages I want to make (Now and Uses).