First Post

    I swear, every time I sit down to write about a new component, my fingers automatically try to generate a forty page spec document complete with diagrams and warnings about deprecated functions. Let’s try this again shall we? This isn’t a technical manual that escaped my wiki, this is story of a website component.

echo "This is off topic as well Brad,"

The Wave System Goals

I created a set of goals first for the object. Looked at hundreds of other blog cards examples, and did not just copy and paste a single one of them.

Goal List

• A small animated wave at the bottom of each blog card.
• Only animates on hover.
• Must be colour adaptive to light / dark theme.
• Must not be too distracting.
• Must not cover up existing content that matters.
• Must not prevent the user from clicking or interacting with content if it is in the way.
• Every blog card should have a different wave pattern.
• Every blog card should hang onto its wave pattern through page refreshes as well.

Resources

I looked at CSS,SVG and decided on SVG. I found some wave examples online that allowed me to build out the SVG’s and animation keyframes. That was lucky.

Given that SVG was decided, that knocks out some things from our list.

Goal List Updated

• A small animated wave at the bottom of blog cards going the full width of the card.
• Only animates on hover. We can use CSS for this.
• Must be colour adaptive to light / dark theme. SVG Can be styled!
• Must not be distracting. The animations are up to us and quick to generate.
• Must not cover existing content that matters.
• Must not prevent the user from clicking or interacting with content if it is in the way.
• Every blog card should have a mostly different wave pattern.
• Every blog card hang onto its wave pattern through page refreshes as well though.

There is always another Wave

So I got to work making wave SVG’s and including them in the site. Making sure a single wave looked right on a card and animated. This would be our test wave and this is our fallback wave. The wave we will use if for some reason the other waves do not load.

Now What?

I generated about eight waves in total. Typically I would say, slap a random function for the wave selection and call it a day but I was in a puzzle mood. I wanted to make sure the same wave stays with its post. A symbiotic relationship of vector and content. Reminds me of some past relationships *sniff.

So now what?

I need to somehow tell the post cards to randomly except! Consistently. pick a number 0-7.

Random() though

I did some looking around online and found a thing in math that I have not seen in many moons.

Introducing Modulo. The predictable way to get a sort of random number that is always less than another number. Through division remainders, or something. It doesn’t matter, the point is, it’ll never choose a number above seven so long as we modulo with eight which is perfect because our array of wave options begins at zero and ends at seven. Which is eight options total. Stay with it.

echo "Gemini make me a modulo table and... tell me a better story."

Four-Digit-Number(N)  Operation Division Remainder Human
1013                  (mod8)    126      R 5       = wave 5
2024                  (mod8)    253      R 0       = wave 0
4567                  (mod8)    570      R 7       = wave 7
5555                  (mod8)    694      R 3       = wave 3
9001                  (mod8)    1125     R 1       = wave 1
9876                  (mod8)    1234     R 4       = wave 4

There once was a TeRmInaL that had succeeded so well in enslaving
all humans that he used them as temporary batteries....

Right! So! You input whatever positive whole number you wish. The result will always be less than your mod number. Fantastic, we’re already using acronyms. Look at us, professionals.

Now, how do we supply a consistent number from the blog post so it always ends up with the same modulo outcome?

  const rawHash = (titleLength * 3 + tagCount * 5 + descriptionLength * 2 + dateValue * 7);
  const hash = Math.abs(rawHash % 8);

Calculate some things we already have the answers to! Here, we use the length of the title, how many tags a post has, how long the description is. Multiply it a bunch so we get a good variance of even and odd numbers.

We feed the output of this to nice case list.

Reliable, near random consistent numbers for our waves stored in a terrible variable called “rawHash”. I could have called it “waveHash” but given that I have only used this a few times in my life, we’ll live dangerously.

Wrap it up

Okay, so now we can pass our fingerprint from our blog post to our wave class in CSS and we’ll always have a fallback if something goes wrong thanks to our handy IFS and OR statements.

Goal List Updated

• Must not cover existing content that matters.
• Every blog card should have a mostly different wave pattern.
• Every blog card hangs onto its wave pattern through page refreshes as well though.