DEV Community

Ivan Tinoco
Ivan Tinoco

Posted on

Another 10 things I learned from working on a project (WebDev)

After 2 more weeks of working on projects trying to build up my portfolio, some mistakes were made, some lessons were learnt. You can find part one of this series here

  1. "I know how to center any div should be a superpower.

  2. There are more Javascript libraries and frameworks that are stars in the sky.

  3. Forget about Alien vs. Predator. Class vs. Functional Components is where the true horror lies.

  4. Do you have a minute to talk about our lord and savior " IDE extensions"?

  5. Copy-paste is a double edge sword.

  6. API's are a rabbit hole into the dark lands of back-end development.

  7. Do not fear (too much) the MDN documentation.

  8. Joining an Online Dev community is like getting a +1 Shield.

  9. Have you tried turning it off and on again?

10 There is such a thing as resource overload.

ONE - "I know how to center any " should be a superpower.

I remember doing the online module about CSS grids and flexboxes. It all seemed so straightforward; I even completed the Flexi-frog thingy!. I mean, how HARD could it be to center this text? This button? This navbar?... What's the difference between justify-content justify-items justify-self, who is centering whom? Inside of what? What happens if I load this on a mobile... "OMG, what have I done?".

One day I had enough of StackOverflow answers telling me the different 6 ways of centering an element, so I created a blank page with a few elements and started playing around with all the positioning properties for an hour or two, or until 2 am. Just when I think I have mastered the art of centering anything inside of anything, I would add something else and things will start falling out of line, literally.

TLRD: A simple concept like centering an element can take a lot to master. I have read The complete guide to Grid more times than I care to admit.

TWO - There are more Javascript libraries and frameworks that are stars in the sky.

I will be honest. I thought picking Javascript was specific enough. I wanted to specialize.

That went well. Here are some of the things I have considered learning or specializing over the past month:

Vue JS, AngularJS, or ReactJS Svelte JS? Wait, what about Next JS
Bootstrap or MaterialUI? Jquery? React Redux? No, no, no, let's learn Webpack and Typescript. Ajax Sass. Jest, GraphQL, and what the hell is Laravel?

TLDR: The real lesson here is, there are many tools for the job, focus on understanding what the job is and not so much on all the tools available to do it.

THREE - Forget about Alien vs. Predator. Class vs. Functional Components is where the true horror lies.

AAARRRGHHHHHHHH

FOUR -Do you have a minute to talk about our lord and savior " IDE extensions"?

I use VSCode, but I am going to assume that atom, IntelliJ IDEA also has extensions, and let me tell you, having a tool that types all the things for you (I am looking at you snippets!) saves so much time. Prettier code formatter has helped me countless times finding where did I leave those elusive brackets. Live Server has also been a lifesaver.

Ok fine I confess. The best thing about IDE extensions is Dark Themes!

FIVE- Copy-paste is a double edge sword.

Time for some serious talk. In my previous post, I mentioned how I had become good at Googling and Copy Pasting. And as much as this is incredibly helpful, I have learned that there is a certain moment when you have to stop and see what is it that you are copy-pasting, it is not enough that ' it works ', sometimes you need to dig deeper and REALLY understand WHY does it work.

I am not saying this to promote self-learning -insert self-motivational quote + link to career advice website -. What I have found is that a lot of times those quick solutions will create other problems. Just because it worked for a person in a particular case doesn't make it a universal answer.

I have now become good at rewriting copy-pasting code that I find.

TLDR: Sorry, I wrote that from the bottom of my heart, go read the whole thing this one time.

SIX- API's are a rabbit hole into the dark lands of back-end development.

I have been working on my front-end / Junior Web Developer portfolio, and I read that connecting your page to an API is a good skill to show potential employees, which I agree with, but I did not want to just put a Pokedex on my page, or a weather notice... So I head to this public API list and, well, I am STILL going through it.

I feel like I have opened a pandora box and the next thing I know I will be learning Firebase MongoDB and PHP etc... The list goes on. I guess the lesson here is that I am not ready to dip into the back-end just now and that may be a Pokedex is not a bad idea, for now.

SEVEN- Do not fear (too much) the MDN documentation.

This point has to do with my quest to center a

and the copy-paste dilemma.

When trying to understand concepts, the safest and most up-to-date method is to reach for the official documentation, however, there is usually so much information about what you thought was a simple thing, that it can be very discouraging to keep on reading. But seeing all the options available for a command can sometimes bring surprising results.

"I didn't know it could do that" Is a phrase I have found myself saying more and more often, and even if it is not the answer to the problem that brought you to the documentation in the first place, it is still great to try things out and save it on a sticky note, or on some mysterious corner of the brain where all those project ideas go. For example the 'cell' mouse pointer and how it will be great for the healing button of that RPG that you have been thinking about.

EIGHT - Joining an Online Dev community is like getting a +1 Shield.

This one is pretty obvious, but the Dev.to community is AMAZING. You are probably reading this article there, if not on my LinkedIn. But there are also meetup groups, slack groups, discord groups, forums, etc.. And I have found them very useful for 3 main reasons:
*You realize there are lots of people asking the same questions you have, so, yes, WE ARE NOT ALONE!
*Helping others not only feels good but it's a great way to learn.
They have cookies.
*And yeah, that human interaction thing everyone keeps talking about that sometimes after hours of coding we start to crave. And cookies.

NINE - Have you tried turning it off and on again?

It works! I Swear!. Well, a lot of the time is just refreshing the browser. Because turning it off and on again is just magical. Do it. And if you didn't get the reference, watch The IT Crowd!

There is such a thing as resource overload.

Resources, we all love resources. There is just something about the feeling that somewhere behind those links there will be THE ANSWER, the holy grail, That course or tutorial or article that will make everything better.

I have a notepad, sticky notes (online and offline), a google doc, a bookmark, a discord channel with resources, I collect links to articles and websites that I think will be useful. A Free course of -insert popular tech-? YES PLEASE. I lost track of how many courses I have signed up for, and websites. There is just too much content out there, the good, the bad, and the ugly. The problem is collecting resources and not really using them or finishing them, it is a form of procrastination. I think there should be some sore of "FOMO" but related to tech information.

But sometimes, like at the end of this article, I just need to disconnect, there are too many things I want to learn, too many projects I want to start, and not enough time and energy to do them all. I cannot be watching a video of CSS tricks while trying to learn MaterialUI while doing a code wars kata while studying for a scrum master certification.

Thank you all for reading, I'll keep sharing my journey of lessons learned from Junior Web Developer to (hopefully) Full Stack Dev :).

Most of these lessons come from working on my portfolio (still working on it!) but if you want to have a look at how things are going, you can visit it here https://notevenagoat.github.io/portfolio/

Discussion (0)