DEV LOG: Kingdom Hearts Portfolio

Absolute Rule, Anime Wins the Day, Audio Schmuadio

Preface

This dev log was inspired by Write Useful Books by Rob Fitzpatrick, specifically:

To review the options of what you might post:

• Share your writing, drafts, and excerpts

• Share your research and references

• Share your process and progress

Of course, you also need to force yourself to put it out there, which requires a system and a schedule.

So, let’s get to posting.

Absolution

CSS has never been my favorite technology to work with. I find it clunky, specific, and requiring way too much fiddling to get something “just right”.

Back in the day when I was a Computer Science major, I was taught to avoid absolute positioning at all costs due to the fact that screens come in so many shapes and sizes (this was more true in 2013 than 2022, as smartphones were still in their adolescence).

But now we have media queries.

Media Queries allow one to specify how an app acts at different screen sizes, returning control to the developer and allowing the client to apply the correct rules.

// small screens 
@media (min-width: 1px) and (max-width: 400px) {
    #big-title {
        top: 0px;
        left: 0px;
        color: red;
        font-family: KHTitle;
    }
}

// larger screens
@media (min-width: 401px) and (max-width: 8000px) {
    #big-title {
        position: absolute;
        top: 50px;
        left: 50px;
        font-family: KHTitle;
        font-size: 5em;
    }
}

Animations

anime.js is an amazing technology. Highly interoperable, while staying highly intuitive, it is everything that CSS is not.

I used anime.js to create these animations, look how smooth they are!

// the code used to animate the content

var tl = anime.timeline({
     easing: 'easeOutExpo',
}); // create a timeline of multiple animations

tl
     .add({
         targets: '#big-title',
         opacity: ['0%', '100%'],
         duration: 1100,
         easing: 'linear'
      }) // fade in the big title with linear easing
      .add({
         targets: '.game-line',
         translateX: 50,
         opacity: ['0%', '100%'],
         duration: 4000,
         delay: anime.stagger(100)
      }) // introduce each menu item one after another with 'stagger'
\

Audio

*NB: My Macbook for some reason refuses screen recording with audio without bending over backwards because the world is shitty. Anyway.*

I knew I wanted the audio from the Kingdom Hearts menu. So I found this video, trimmed out the menu sounds, and then make them play on hover with a `mouseenter` event listener:

I know you can’t hear anything, but you’ll just have to take my word for it until final product is up (or if I find a good way to do in-progress deployments).

        var audio = document.getElementsByTagName("audio")[0];

        for (const element of document.getElementsByClassName("select-box")) {
            console.log(element);
            element.addEventListener("mouseenter", function () {
                play();
            });
        }


        function play() {
            var audio = document.getElementsByTagName("audio")[0];
            if (audio.paused) {
                audio.play();
            } else {
                audio.currentTime = 0
            }
        }

Other News

• Whiteboard desktops are amazing

• Substack code blocks still bad, and GitHub Gists require a lot more work. Just support MD already!

• Did you know that Henry Cavill dehydrated for 3 days to get his physique 'Bathtub Geralt' ready in The Witcher?

• A great video that shows that Django can be fast development like Flask

ars longa, vita brevis

Bram