The importance of not using ‘Magic Numbers’ when creating web pages.

When I was working through my first couple of web development projects, I would run in to situations where I would use arbitrary functions/values in order to emulate the provided website template. While I would end up getting the look I was hoping for, I didn’t truly understand the ‘why’ of what I was doing and didn’t do my due diligence on the matter.

Truth is, what I did was a Band-Aid solution and I set up my project for future issues if I needed to make changes. For example, when I wanted to have some text centered within an image, I would use ‘padding-top’ to push the text down to the subjective ‘center’ of the image. The issue here is obvious as the text was truly not in the center of the image, and if we were to go back and change the image size, then we would have to come up with another random amount of padding to make it appear centered again.

Thankfully, I have discovered the solution to this specific issue that I can share with you!

HTML: 
<header><h1>I am a header!</h1><header>

CSS: 
h1 {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}

In this case, the background-image is set to the <header> tag in CSS, and we are adding CSS styles to the <h1> tag in order to get that true centering in the middle. Using ‘text-align: center’ helps to get the text centered on the x-axis, but the y-axis is the tricky part. After setting the position to ‘relative’, it allows us to set a 50% ‘top’ value to push the header down to what seems like the middle. In reality, the top of the text in the header is at the 50% mark, so it isn’t truly centered. Adding ‘transform: translateY(-50%)’ helps us accomplish this feat, as the middle of the text in the header is now at the 50% mark. Now if we change our image size, we will be okay!

The main takeaway here isn’t the solution per se, but to avoid the use of ‘Magic Numbers’ that seemingly solve your web design issues. Coming up with arbitrary numbers/values may solve your problem optically, but you are setting up your webpage for future issues as well as not fulfilling what the original designer had in mind.

We wouldn’t want contractors renovating our kitchen to use numbers that ‘seem to work’ that will lead to future problems. We are paying them to do the job correctly and as we designed them. Same goes for designing websites for customers, so figure out the right way of doing things and avoid using ‘Magic Numbers’!

Show your support

Clapping shows how much you appreciated Kevin Park’s story.