Stop optimising your code!

[mvaneijgen]

Stop optimising your code before it is even working! I have to preface this with I do this all the time, but knowing helps me get out of this thought process. 

 

I see so many questions on this forum “how do I do this in a for loop, but then not for the third item in the loop…”, you're making it way to complex. I know we all have learned Don’t Repeat Yourself (DRY), but there is nothing wrong with a little repeating if you know you're going to optimise it later. 

 

When I feel I’m banging my head against the wall and can’t see how the get something to loop the way I want, I take a step back and just manually write it out by hand. Literally writing out what each element should do, this of course can be insane if you need to have more then a hundred elements  to do something, but then I just pick the first few, eg .item:nth-child(1), .item:nth-child(2), … .item:nth-child(5),ect. If you do this a few times you’ll probably see a pattern emerging, but try to resist the urge to start optimising, just keep writing out the animation until you have a solid base that represents the animation you want to have. 

 

That is why I love working in Codepen, first I don't have to worry about my real projects dependancies, or my framework throwing weird errors, I can just worry about the demo I’m building and making it the best I can and when I think I’m ready for the next step I fork my pen and start moving the code around. Get some of the repeating code and try adding it to a for loop, then test if it is still doing what it was doing when it was written out by hand. 

 

Below some code examples from a real world project of mine, where I was “I don't even know how this would work!” and you can see my first demo was no where finished, I had over a hundred lines of animation code!

 

See the Pen YzgVKRo by mvaneijgen (@mvaneijgen) on CodePen

 

Then I forked the first version and started to optimise a few things, swapping out fixed values for dynamic once, but still going on writing each tween out by hand, there even more lines of code now!  

 

See the Pen gOEWYZp by mvaneijgen (@mvaneijgen) on CodePen

 

In version 3 I finally found that I had the animation down like I want it, it could still use some fine tuning, but all the logic was there. Two hundred lines of code!

 

See the Pen dyrRrvL by mvaneijgen (@mvaneijgen) on CodePen

 

And finally reducing that amount of code to just fifty lines by optimising what was already working and removing the duplicated code and adding it to a for loop.

 

This is just an example, it might not even be the final code, but it is working! So now I can worry about accessibility making it responsive and making it fancy. But it's to illustrate that I could never come to the same conclusion that I’ve come to now if I had started with trying to optimise the code from the start. Personally I need to get a feel for what the code needs to do. Working in Codepen and forking your work is such a life saver, because you can fall back at earlier versions when you inevitably brake something, not to talk about GSDevTools what an awesome tool to debug an animation (🫢 did you know you could just use that paid plugin, even if you’re not a member on Codepen for free!)

 

If you can do this at your first go writing out a project, why are you even reading this?! And we love to have you helping around here on the forum, it is great to have such a keen eye help out!

See the Pen abMwMYP by mvaneijgen (@mvaneijgen) on CodePen