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 👋.
Top comments (0)