Preface

After a few months away from coding I have finally recovered the energy and motivation to code after what seemed like the roughest months of my life 💀. This past year has been a mix of really unlucky events for me and I just had to take some time for myself. As of now I can say I'm feeling pretty good and ready to get back to work 🔥.

Unfortunately, the lack of practice made me forget quite a lot. Looking through my repos I wondered how I could get to remember the basics and go back to the pace I was on when I stopped. Concluded I should rebuild an old app since I'm already familiar with it and would also get to improve some things I think could've been done differently 👌.

That being said, I chose to rebuild a binary clock I made following this tutorial back in the day. After completing the tutorial I took my time designing my own version of the clock and building it on my own so I could put the knowledge in practice 🛠️.

Bitclock - Old project

This was the old version and although I was happy with the overall
design I still had the feeling it could be better 🤔.

For a basic clock that converts each number of the time into a four-digit binary sequence I assumed there were not many features I could implement other than a dark-theme and some links to Twitter and GitHub. This app was just a small project I did to get my hands around CSS grid and responsive design.

Design

If I was going to rebuild this app I would like to make a design that was not only clean but also visually appealing ✨.

As a developer, designing was never my strongest skill so I had to do some decent amount of research and gather some concepts that could hopefully point me in the right direction 🥲.

After many shots saved on Dribble I hopped on Figma and put everything together.

HTML

Used semantic HTML elements whenever possible as opposed to make everything out of divs as I had previously done. Still have to dive deeper in this area but this was quite easy to accomplish as the given layout was quite simple ✏️.

CSS

Declared all the colors in the :root pseudo class as variables so I could define light and dark themes with them.

Went with the CSS BEM (Block, Element, Modifier) architecture when applying classes in the HTML as this is a best practice I want to implement in my future projects. It's similar to object-oriented programming but directed to CSS.

The harder part was making the clock component responsive between different window-sizes but managed to get it done with the use of media-queries.

JavaScript

Almost the same as the old version but with a few tweaks here and there. The core idea was:

• Get the current time (17:20:32).
• Split each section into an array ([1,7], [2,0], [3,2]).
• Iterate through each item of each array and get the corresponding four-digit binary sequence returned as an array (1 = [0, 0, 0, 1]).
• Iterate through each binary sequence and whenever a "1" is found, add the class ".on" to the corresponding bit in the clock HTML markup turning it on. If it is a "0", remove the class turning the bit off.
• Repeat the process every 200ms.

Reborn as Chronoshift

Kept the same features as before but arranged them differently this time with all the navigation placed down at the footer. Again, I still think a designer would do a better job with the UI but this time I was extremely satisfied with the result 😊.

You can check the live version here: Chronoshift

Conclusion

There's still a lot to cover but I think I will progress much faster now. Have lots of new ideas in the design phase and cannot wait to bring them to life. Hope you enjoyed the redesign, until next time 👋.