Once upon a time, I came across a web animation that was so massively cool, I wanted to recreate it. At the time, I was only coding for fun and had no knowledge of any front end tools to build such a masterpiece.

Just for background, I worked with html and css a lot in my 20s, only I didn't know they were called "html" and "css". I just knew that everything I saw on the browser could be accessed through the magical tool of "view source", where I'd painstakingly go through html to find what I was looking for. It took up a lot of my time, and reverse engineering the code took even more. But it was my fun, albeit odd, hobby.

So I came across this animation and took the code to play with as my own little project. I should also mention that this was the time I discovered the wonderful world of Codepen, as it's where I found the code and its convenience of having everything accessible on the web page, instead of me going through the html like a psychopath, which I slightly am, probably. Well, I took the code and placed it into my editor to hack. What happened next was me getting lost in the land of Spaghetti Code.

You know when you don't want to be in a cave anymore because too many zubats keep attacking you, so you use an escape rope to transport yourself back out to Route 13? My little project was overwhelmingly frustrating. I used the escape rope and never revisited it again.

Well, years later, I went back to school for web development and learned the front end tools to build all the cool things. I’ve also learned that it wasn't exactly spaghetti code I was looking at years back - it was SVG. Knowing what I know now and having the ability to create animations/illustrations on my own, I can't help but question its practicality as the code can get pretty big.

I'm currently working on a project that is pretty bloated and while there are tools to optimize the code, I’m not sure if something like SVGOMG, a minifying tool, is exactly the solution I’m looking for. In other words, should I be using a different method to build my project? Perhaps using something that lets javascript dynamically create the images and having my HTML completely clean? Or should I just build it through pure CSS instead?

SVG is definitely powerful, but seeing the code after letting my creativity go wild, things can look ugly. Sometimes my editor hates me for it and gives me the spinning wheel of death.

Is this normal? I’m all about optimization and if something isn’t practical, I rather not build it. Not even for funsies!


371 0 2