You make a project, you are able to stick to it till it is done, it is working now and everything seems to be fine. But then you notice the parts that can be changed. And so it begins.
In the previous week’s story I wrote about making a clock with React and CSS (in a way, this is some sort of a continuation of that story). It is a small thing to play around with React and JavaScript that I used just to start the day with a bit of coding. I was planning to switch to another small thing to code once this one had been done, but then looked through the code and functionality and kept adding or changing parts of it.
Apart from minor things that might be considered personal preferences (changing classes and variables names, arranging functions and CSS properties, etc.), I noticed that upon component loading the clock hands twitch and jump to their initial position (instead of instantly showing current time). Upon some thinking (and not willing to dive too deep into it), I have added animation for the clock to appear. It is a simple delay when opacity changes from 0 to 1 within first 1.5 seconds of the component loading. Technically, the jumping issue is still there, but it’s not visible anymore.
Another thing was that upon reaching 0 (or 12) hours each clock hand jumped back and forth for an instant. Upon some pondering, I have added if/else statements for seconds, minutes and hours calculation (see code from the previous story linked above for comparison). It simply checks if any of them === 0. If yes, the transition property is being set to “none”, otherwise it is set to its proper definition (current seconds/minutes/hours). Once this had been done, another thing came up: now clock hands moving animation stopped working, so I needed to set transition-timing-function in the component (or JavaScript part of the code if React is not being used) instead of CSS-file (because it was affected by the if/else statements).
Now the clock hands stopped jumping back and forth upon reaching 0 and upon loading and animation was shown correctly.
Then I took a loot at the styling and did not like that clock hands overlapped in the middle of the clock and you can see the “tangle” of them. Thus, I have added a dot in the center of the clock that now hides that “tangle” and make it look like all clock hands are attached to that dot. Also, to make it look more readable and resemble a real clock, I have added four small lines at the top, right, bottom and left sides (12/00, 3, 6, 9 hours).
Overall, it looks like this now (here is a live version and repo, if needed):
After this, I took another look at the code and thought it might be a good idea to also write a separate function for the previously mentioned if/else statements, so there are not three of them, but then you can also write a function to handle the mechanic of seconds, minutes and hours instead of writing it for each one of them. Same goes for the HTML-part of the code: using map to create clock hands and clock face and so on.
I guess, this is a part where you might consider stopping, otherwise the adjustment part never ends. This is just a simple example, using a small exercise from a coding course, but personally I keep doing it with pretty much everything I code, regardless of how small it is (Medium stories included).
Probably, the answer to the initially stated question is no. No project is ever really finished, you either keep polishing and updating it, or you reach a certain point when it is no longer valuable/reasonable for you to adjust it, and you need to move on. For a thousandth time, coding is like real life, sometimes you stick to things, sometimes you let go. And that is fine.
Thank you for reading.
