Introductionlink

I have done quite a lot of remakes and complete overhauls to my website, and now it was time for another one. I scrapped the idea of "widgets"? i guess and went for a more traditional style, while keeping it fairly modern.

The redesignlink

After some days of work (and a lot of trouble), I finally published my new design to the public web. You can check it out here. Here are the components that make it up:

Homelink

The initial page you arrive at when entering my site is the homepage, which gives you some information on where you can find me, what I'm doing and what I'm posting about here. It also has some nice animations to smooth out the loading, but I'll get more into that later.

Bloglink

This page is basically a minimal version of this site, just grabbing my latest posts and redirecting users here. It's nothing special really, but I think it was pretty neat to have a quick way to see what I'm writing.

Projectslink

This overview contains all public projects I've worked on and am working on, and some links to them. I'll fill it out a bit more in the future, since I have a lot more in store 😉

Contactlink

Here you can find places to contact me, and even send me a message directly from the site! All you have to do is enter an email and a message, and I'll get back to you as soon as possible. This is using my personal API, BluDoodAPI, to send a Discord webhook which notifies me instantly. Feel free to check it out, and maybe even hit me a message!

The issueslink

The redesign didn't go completely smooth however. Some things just weren't working for me, and others eventually had a solution. Here is a quick breakdown of my issues, and how I (almost) solved them.

Animating height: auto;link

It should be a simple task, but it's written in the actual specification of CSS that it's not a bug and should not be implemented because it's an "expensive calculation". Let's see how expensive if actually is.

I was using React for my website, so here is the code I used:

useEffect(() => {
  const needsHeight = document.querySelectorAll('[data-needs-height="true"]')
  needsHeight.forEach(el => {
    el.style.setProperty("--height", el.scrollHeight + "px")
  })
}, [data, posts]) // states that are updating

From here you can just add the attribute data-needs-height="true" to an element that should animate, and it should have the height property added to it. Now you can add a bit of CSS:

transition: height 500ms ease;
height: var(--height, 0);

And once it gets the height attribute, it should animate to the correct height! 🎉 It certainly is not the best method, but it worked fine for my use case.

WebKit sucks at animationslink

Unless my Safari browser on my iPad and iPhone both hates me, it seems as Webkit freaks out when running certain transitions. Things like opacity and transform animations are very jittery or don't get animated at all, and it's been known to be a problem for years. Maybe it's a feature and not a bug 🤷‍♂️

However, it seems to increase the chance of working by adding this line of CSS:

will-change: opacity;

Could be total luck, but for me it seems to work better or work completely fine by adding this line to the same element as the animation.

Windows emojis don't have flags?link

For the decsription i used on my new site, I used an emoji to show where I'm from, 🇳🇴. Or maybe it says "NO" for you? It seems as Windows' emoji font doesn't display any flags, and rather displays the two letter code for the country. Therefore I added twemoji to my site, which are Twitter's open source emojis.

Conclusionlink

Even after the things I encountered, it's been fun trying out a new design for my website. I think this one will stick around for a while, but who knows.

Thanks for reading my post!link

Comments aren't available yet, but join my Discord Server if you have any questions or need any help with your website. Goodbye for now! 👋