Leave that comfort zone
Tags: motivation, learning, 100daysofcode, beginners
Published: 2021-11-15 08:43:37

## Complacency

You know it, I know it, we know it: **that **feeling. 

You're in the gym, staring at those plates you've just added to the barbell. It all only comes to a couple pounds heavier than last week.<br> 
"*Increase the resistance if you want to get stronger*", they said - and you listened.
<br>But there's a murmur creeping in...

- That's going to feel heavy
- It'll be uncomfortable
- Just a few pounds lighter?
- You'll do it next time, c'mon!

We're built to avoid pain and seek pleasure. Avoid discomfort and seek comfort. <br>
Avoid "bad", chase "good" - it's engrained in us.<br>
It only takes a moment, we falter, aaaaaand... that's it: we gave in.<br>

Exit murmur, enter __Mr. Guilt__ - eternal, malignant regent of Comfortzone D.C.

![jafar.gif](https://64.media.tumblr.com/tumblr_mapms62yDe1rut3y7o1_400.gifv)


What happens next is, you're going to spend the following minutes, hours, possibly days, wondering __what if... ?__ 

__What if I had pushed through instead of caving in?__

That guilt is the echoing lament of all your unrealised potential, all the "gains" you missed (don't know why, but this sounds like a good title for a rock ballad). 

Why's this on Dev.to, anyway? What's this got to do with tech or code?

Well, as it turns out, I just had a glaring example of the above a couple weeks ago, which turned out to be very productive one. 
Lots of growth... and lots of discomfort. 
***
## Stepping out


![sarahs-scribbles-sarah-anderson.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1636895120656/Ph2HPR17f.gif)

When working through my Data Structures and Algorithms certification on [Freecodecamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/), I really enjoyed completing the [Roman Numeral Converter project](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter) and wanted to build it as a static web page, rather than just a JavaScript file.

Nothing complex, it was just a matter of adding the HTML and CSS parts, and linking it all together... and I would have learned nothing, had I done it that way. I decided to "complicate" things. 

I had [Node.JS](https://nodejs.org/en/) and [NPM](https://www.npmjs.com/) installed but never quite used them, and also wanted to see what the fuss about [TailwindCSS ](https://tailwindcss.com/) was about, so I threw all of them in the mix - I was in for a treat! 

What followed was a week of __intense learning__, as I kept coming across things and workings I had no clue about. 

I won't go through the whole story, as it would probably be tedious, but I can list all the important bits and pieces that I took away.

***
## Some of the things I learned


- When importing other JavaScript scripts into my main one, I'm dealing with _modules_ and they have their own syntax (which I had to learn).
- I had to download and install all my _dependencies_ (what I wanted to use in my project), some of which required other dependencies to be installed
- When building a simple HTML/CSS/JS static page, I only deal with one folder, which I push to my Github repo. 
- Packages come with default settings, not all of which will suit you. They also come with a JSON config file that can be modified according to the framework specifications.
- I can't just include TailwindCSS in my CSS file, because it's made of plenty of classes that I won't use. I can, instead, run a script that tells it to _build_ the final file in my __dist__ folder and _purge_ out all unutilised classes. This script can be set in your "package.JSON".
Not running __purge__ will result in a huge CSS file that's mostly pointless.
- More generally speaking, I learned how to use Tailwind classes in my HTML and how to modify them, if required.
- Learned to use other packages I didn't plan on using ([gh-pages](https://www.npmjs.com/package/gh-pages), [autoprefixer](https://www.npmjs.com/package/autoprefixer))
- Ultimately, as long as you're using a version control system like [Git](https://git-scm.com/) to track your project, nothing is __really__ broken. You can always revert back to a previous stage. 

I had to stare at my screen several times, thinking "why does this NOT work?", before finding out about many of the things I listed - you don't know what you don't know.

You __need__ to make mistakes, so that you can learn. And you will learn __incredibly__ fast when you start making those mistakes and fixing them.

There would be even more things to list, but it would get too long and you would get... _comfortable_ (see what I did there?).

I didn't spend more than 30 minutes, sometimes an hour, over the course of four or five days, with varying levels of attention due to my full-time job. That's a lot of learning for such a little time dedicated to it. 

What's better is that these new bits of knowledge are now embedded in my mind and I will carry them with me in future projects. Knowledge builds up!
***
## To conclude

Am I saying complicating things is good? Far from it, but in this case it served a specific purpose: forcing me to become acquainted with things I hadn't learned yet. 
The point was not whether TailwindCSS or another technology were necessary (they weren't), but to implement them and learn to use them. 

In a real-world situation, you would go with whatever option best matches your needs (or with whatever your boss or company says you're going to use), but in your personal projects, and especially if your main goal is **learning** you can go wild (and you probably should). Your IDE is your playground. 

Will using one of these technologies in one project be enough to master them? Of course not. But you will have learned the basics, and next time you'll be able to build upon them, and expand further. 

So...

...Why are you still here? Excuse me reader, I'm going to have to ask you to move along.<br>

__THIS COMFORT AREA IS NOW OFFICIALLY OFF-LIMITS__
<a href="https://imgflip.com/i/5qnqna"><img src="https://i.imgflip.com/5qnqna.jpg" title="made at imgflip.com"/></a><div><a href="https://imgflip.com/memegenerator"></a></div>