From Challenge to Scrpttag

2nd April, 2021 Gabor Molnar

At some point we need to step out from the usual and challenge ourselves. You must have heard about different kind of code challenges like #100DaysofCode, #30DaysofCode or #100DaysofHacking.

This is a similar one I made up and I call it 28 Components Of February. The idea came from the symmetrical February of this year. It contains exactly 4 weeks and starts with Monday and ends with Sunday so it is the perfect month for this kind of coding.

February comes and goes

This challenge’s goal to let me push my limits, try out new methods, practices and learn new stuffs from the front-end world. There is only one rule: I have to implement just one front-end component every single day using HTML, CSS and JavaScript.

What kind of components do I implement? There is no limitation. There is not a list of it. I can say it is a bit ad-hoc. I let my everyday inspire me to find that actual day’s coding problem.

It begins

What could be the best start of this challenge then implementing my own version of the most common component, the button:

It was really a basic one so I had to think about in what way it could challenge me. And the idea just came up. I would implement more version of it with hover, active, focus and disabled state. And a bonus one with the loading state. And this was complex enough to be a great start.

However, usually we don't implement buttons from scratch. Most of the time we use different libraries/helpers and we build our design top of those.

Day's gone

On the following days I was a bit bold and I tried to implement bigger components examining big, well-known applications like Google Keep or Instagram. Here is my version of the Google Keep called Scrpttag Hold. What is Scrpttag? I'll tell you a bit later.

And those were too huge to be a one-day project for sure. Even so I had never told anyone that the component should have been fully implemented. Anyway, is anything implemented fully ever?

On my way

Codepen seemed to be a great place for my code base. No fuss on IDE configuration, committing code, testing it locally or even publish it on some server or serverless hosting. And I have never imagined that one of my component would be selected and be on front page of the site. But this one is:

It's my habit to add a touch of personality to the things I create in a not so common way they should be interpreted. Easter eggs. Yes, I hide some in several components like in this one. If you find them (and I am sure you will), I hope you'll enjoy them as much as I do.

Everything leads somewhere

On the 4th day of the component challenge I introduced you the logo of the one and only professional blog of mine, the Scrpttag. This was the first place and time where you could get to know about Scrpttag. And I am satisfied with the result of this darkish, animated introduction:

The actual implementation of the blog seemed so far away at that time. Be consistent and even with small steps you can reach your destination. Or at least these were what I said to myself. And here we are.

Scrpttag is now

Regarding to my personality I always try to frame my projects. What has a beginning there should have an end too. Except I could not finish this challenge with the same complexity and difficulty level as I started it. Final exam time. The last component was actually the Scrpttag itself, not fully functioning, instead the prototype of the blog. And you could get an insight.

Every path led me here and it just a beginning of an other journey.

To Be Concluded

There were several struggle with me/for me/in me during this programatic adventure. Some days I did not know what I should have implemented. Other days were too busy to create complex components and there were days when I almost ran out of time. Yes, I published the component 3 minutes before midnight.

However the challenge was successful. I learnt a lot about CSS animations, SVG handling. I got an ever better knowledge of JavaScript's event handling. It was fun. It has value it for me and maybe for you as well.

Of course I have not written about the other 23 components in this article. But here is a link where you can find all of the 28 creations.

Thank you for reading this. Which one is your favourite? Shall I write in depth tutorial post about one or an other?