Chronoshift - (Rebuilt) Binary Clock
Tags: webdev, writing, motivation, beginners
Published: 2021-12-26 18:38:48

#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](https://www.youtube.com/watch?v=VkTj1U_exwA) 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

<p align="center">
  <img src="https://i.imgur.com/O75jcHb.png" width="100%">
</p>

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.

<p align="center">
  <img src="https://i.imgur.com/wXgz92B.png" width="100%">
</p>

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

<p align="center">
  <img src="https://media.giphy.com/media/zOvBKUUEERdNm/giphy.gif" width="100%">
</p>

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

<p align="center">
  <img src="https://i.imgur.com/XOvkNHb.png" width="100%">
</p>

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](https://mozetsu.github.io/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 👋.