DEV Community: Gabriel Pedroza

What is the best way to enter in Backend?

Gabriel Pedroza — Mon, 20 Jun 2022 19:36:59 +0000

I'm currently a frontend developer and I'm slowly moving into making bigger projects using nextjs and typescript. I want to dabble into backend and become a fullstack js/ts dev but since there are Prisma/Supabase/Firebase, is there really any point in learning things like express/django? Does anyone have any pointers in having a great transition to being a fullstack? I've heard using tRPC is the best place to start.

P.S: sorry for the lack of blog posts; I've been really busy with school and traveling but I'm somewhat back. School is still a bit hectic but I'm working on TDD post that has great visuals so you can really understand it in almost all regards.

Useful advanced GIT commands

Gabriel Pedroza — Fri, 10 Jun 2022 13:21:19 +0000

Aliases

git config --global alias.<name of command shortcut you want> "<enter chain of commands here>"

We all know about git add . and git commit -m "" but did you know you can shorthand it to: git commit -am "". This is pretty good but we can simplify it even further by creating an alias to it. Aliases are basically just shortcuts. Personally, I've changed my add and commit command to just git ac "<my commit msg>"; the ac is the name of the command I want. In order to create this specific command I have, you will write the following:

git config --global alias.ac "add -A commit"

and if you want to remove your alias, it is as simple as:

git config --global --unset alias.<your_alias>

git log (but prettier)

Git log essentially shows us the commit history of a repo and sometimes, it can be a bit overwhelming if you have a lot of complexity in it. The following command is to show the commit history and display it in a way where it is a lot easier to see:

git log --graph --oneline --decorate

BEFORE:

AFTER:

(To exit out of the git log, press "q")(I condensed this into an alias to git lgod). In my current personal project, you can see that I've only used one branch to work on and merge it to my main branch very easily whilst having all the commit messages and it's commit ID. This can come very handy if you don't use something like git kraken.

GIT KRAKEN:

Stash

Have you ever had borderline ready code to be pushed to the remote repo but have some doubts and want to work on something else? Maybe you want to store it and pull someone's code for a PR review. You can and it is as easy as git stash. This will safely store your work and if you want to retrieve it, you can use git stash pop. Let's say that you really want to use this feature, you can; using the following code will stash your code and give it a name so you can reference it later:

git stash save <name of stash>

and to see how many stashes you have, use the following command:

git stash list

and it will return something like this:

stash@{0}: On main: <yourStashName>
stash@{1}: On branch1: <yourOtherStashName>

To retrieve the stash you want, use this:

git stash apply <corresponding index found in curly braces of git stash>

Bisect

Have you ever had a bug in your code but you don't know which commit has it initially introduced? Did you solve or try to solve it by tediously going through every single commit, one by one, hoping to see where the bug was introduced? This can genuinely happen from personal projects to big company codebases and both can come with extreme stress to try to resolve. Introducing, git bisect. This command works like binary search. Binary search is a lot better than linear search. It essentially saves you half the time searching for a bad commit using the following command:

git bisect start

and to end the process, write the following command:

git bisect reset

While you are bisecting, you need to specify the last commit that was good and bad. This will look like the following code respectively if you already wrote git bisect start:

git bisect good <commit ID>
git bisect bad <commit ID>

If you do not add a commit ID, it will start from the latest commit so if you do not include an ID on both, the binary wouldn't work. To really make sure you understand bisect, I'll give you an example:

0 --> 1 --> 2 --> 3 --> 4 --> 5* --> 6 --> 7 --> current(8)

The asterisk is the bad commit you have. To begin the bisect, write:

git bisect start
git bisect good 0
git bisect bad

(If you do not add any commit ID, it'll default to the most recent commit). Let's write the worst-case scenario if you have no idea where the good or bad commit is. The search will start at the commit ID 4. If the bug does not exist (which it doesn't because it is in commit ID 5), we write git bisect good. This will eliminate all the commits on the left side because the bug does not exist there and now we are dealing with 5, 6, 7 and 8. Let's say it cuts at 7. Is the bug in commit ID 7? Yes it is, we write git bisect bad and we eliminate 7 and 8. Now we are dealing with 5 and 6. You should sort of understand how it is working now but let's say it goes to 6. The bug is still there so we write git bisect bad and now there is only one commit and that commit is the origin of the bug. The total number of operations was 3 and we said we have no idea where the bug is so, this was the absolute worst case possible. This is definitely better than searching linearly, 9 operations. If we doubled the amount of commits to 18, we would only have one more operation in comparison to if we were searching linearly which is why binary search is amazing.

Why is CSS Hated On?

Gabriel Pedroza — Tue, 31 May 2022 18:25:23 +0000

I've seen a lot of posts about people despising css but I don't truly understand why. Is it the lack of foundation? Is it the specificity or the abundance of properties? If you guys want, I can create a multi-part series of CSS starting from the absolute basics to the advanced properties of CSS or I can create a huge cheat sheet on it for an easy bookmark. Let me know what you think of CSS in the comments and should I create an in-depth post or cheat sheet about it?

Terminal Website in Minutes!

Gabriel Pedroza — Tue, 31 May 2022 02:16:19 +0000

Secret Terminal

After surfing through the internet, I've found this very cool GH Repo on a Terminal Credit. Very easy to add commands and configure it yourself using the config.json. Use credit link or my repo to clone it. I also used this to get cool symbols. Feel free to clone it and overall have fun with it and message me if you have or need any help ❤️

Learn this before jumping into React

Gabriel Pedroza — Mon, 30 May 2022 18:01:47 +0000

Jumping into react pre-maturely can be a mistake and would hurt you in the long run. In this post, I will list out 5 of the most important things you should have down so you can feel confident that your foundation is strong and you can glide through learning react.

This one should be a must-have because React is a library that was built on JavaScript. Syntax includes but is not limited to the following: declaring functions and variables, for loops, if statements, arrays, objects, operators and more. I would highly recommend to build at least one project, (Project ideas), to see how all these things come together.

DOM Manipulation & Events

Learning to manipulate the DOM (Document Object Model) can be a great way to start "connecting" different languages together and change it accordingly. The following are common DOM that you will doing about 90-95% of the time:

Creating elements
Adding elements
Modifying data attributes
Removing elements

This video by Web Dev Simplified is a great start to understanding what the DOM really is and how to use it properly in certain scenarios. Event listeners are also important and can correlate with the DOM because you are essentially listening to any events that occur. For example, if I have a form and I want to receive the information that was written by someone, I can implement a submit button and have an event listener to it so once the person clicks on the button, I can get and store this information in an object or in localStorage. This video is also by Web Dev Simplified and he explains perfectly conceptually and practically about event listeners.

Asynchronicity

This is a big word that might scare some people but all it really does is wait until a certain action is completed before completing another action so basically one thing at a time. You will commonly use callbacks, promises or the async await keyword to fetch data from a RESTFUL API and parse it into JSON (JavaScript Object Notation) because API's are usually stored in a stringified manner. A great introduction to this is this video by Traverse Media which goes into depth of callbacks, promises and async await.

The this keyword

There is a ton of backlash regarding the this keyword but all it really does is the following:

This keyword belongs to the object it belongs to

Alone, this refers to the global object.
In a regular function, this refers to the global object.
In a method, this refers to the owner object.

You can also explicitly bind it with a function using the following methods:

Call() | [c]all takes (c for comma separated arguments). Invoked the function
Bind() | returns a new function that can be called, it just allows you to bind whatever object you want
Apply() | [a]pply takes (a for array of arguments). Invokes the function

It basically references the context in which the code is currently running. This might be a bit overwhelming to understand and this video by techsith covers the this keyword well in almost all scenarios. The reason I am not going in-depth about this specifically is because I think watching a video with code examples is a better way to truly understand it.

Call Stack

For some reason, this does not get mentioned a lot but I think understanding how the call stack works will let you be more aware of the order that functions are called in. Just having a very basic fundamental knowledge on how the JavaScript Engine and JavaScript Runtime Environment will set you apart from other developers and carries over very well when you jump into react. Also, having some knowledge on the overall Event Loop (task queue, microtask queue and maybe chunking) will really level you up as a developer. There are a ton of videos on this so feel free to choose which one you like.

Next vs React

Gabriel Pedroza — Sat, 28 May 2022 16:40:32 +0000

This post was aimed mainly for novice programmers who haven't grokked on the frontend frameworks and libraries; I tried to make this post as easy to understand as a I could while making it very informative. My next post will be aimed more for experienced frontend devs: I will be diving more into Nextjs in my next post and by explaining in-depth some difficult things people struggle with, showing you step-by-step on how to not only create a nextjs app to but having a headless content management system (CMS) connected so the information that you show (products, blogs, etc...) can be changed dynamically using Sanity.io and have it Server Side Rendered (SSR) or Incremental Static Regenerated (ISR). I will also explain all of this if you are not concrete about what was said 👨🏻‍🏫

What you will learn:

Understand what Next & React are and what they are used for
What are the similarity & differences between them
Which one to choose on a project

What is React
What is Next
Comparing and Contrasting React & Next
Which one to choose for a project
TL;DR

What is React

If you are familiar to web developing or programming in general, you have heard the term, React.js, being thrown around. React is a library that makes declarative UI easier to accomplish using hooks and components. Essentially, you can write a chunk of code (mainly using jsx which is like html's sibling but cooler) into a one-liner(). It is declarative because the outcome of said component is predictable and easier to debug than imperative code. You also have these things called hooks that are built-in functions that make handling state, behavior and other logic easier to do in React in comparison to vanilla JavaScript. Also, you can write it anywhere in your project, (hence why React is a library and not a framework although people call it framework because it competes well to Angular and Vue) so you have more flexibility. It also has this thing called Redux which is a library that handles complex state management but we won't get into that 🤒 because there are better and easier ways to manage state in React like using the Context api. I will go more into when to start learning React in a future post soon.

What is Next

Next is a React framework that was created by Vercel in October 25, 2016. Many big companies like Hulu even use it for their websites. It is a very very good choice in building bigger applications that have a lot more functionality and more complex state. Also, it comes with a lot of features out of the box and I've linked the official Next website and talked about some of the features in the TL;DR section but besides those features it brings, it has a structure to it. React is a library so you might feel like you do not know where to start (most frontend devs haven't used a framework if you went the tradition way of html, css, js and react) but Next solves that by having all the things React has, having little to no config with a shit ton of great features that will take you a while to make in React and having a structure built-in by default. This can be a pro or a con to some but if you are planning to make your first big project, I think Next would be a great decision and you would learn a ton about larger websites and how they work under the hood.

Comparing and Contrasting React & Next

I don't think they should be compared this way because both are extremely good at what they do. It really does depend on what you are building and I will dive a bit deeper in what questions you should be asking to yourself or others about what to choose when building your project so you can get not only the most out of it, but as fast and easy as possible.

What should I choose for my upcoming project?

Firstly, you should understand what you want to build out first. Have a rough draft, like an essay, and see what libraries you might want to use; A good start to understand your project is to ask these following questions: Will your project have multiple pages with/without modular css for styling? Will it include state management? How complex will the state be for your website? Will it be a fullstack application? Are you planning to grow this project (CI/CD)? How important is it to have fast load times and do you care about SEO? Once you answered all these questions truthfully, it will give you a good indication on how big/small your upcoming project will be.

TL;DR

React is a library based around Component reusability and uses hooks that have functionality like setting and updating state, having certain callback functions run at runtime and much more. I will make a React hooks post in the future covering all of the most used ones if you guys want me to.

Next is a framework that is built on top of React and makes creating larger projects with more complex state easier to accomplish and maintain. Since it has built-in file-system routing, code-splitting, modular css, image optimization, etc... It is ideal for you if you truly care about how the data is fetched (SSR, ISR), care about SEO, and want to overall add a lot more functionality. It can be a bit overwhelming to conceptualize at first so I will go more into Next very very soon.

The best way to pick which would be better for your upcoming project is understand what you want to build. Is your project going to be a relatively lightweight project? Do you want the best load times possible if you are going to have information changing in short times? Am I going to CI/CD into a SaaS? These and a couple more questions would give you a good basis to decide which would be the best option for you.

What would you like me to cover

Gabriel Pedroza — Fri, 27 May 2022 13:45:02 +0000

I'm currently working on a post that covers the similarities and differences of react and next. Apart from that, let me know in the comments what you would like to see or learn more about in an easy and conceptual way with examples <3

"Tell me and I forget. Teach me and I remember. Involve me and I learn." –Benjamin Franklin

All Higher Order Functions Under the Hood in JavaScript

Gabriel Pedroza — Fri, 20 May 2022 19:42:03 +0000

forEach - (executes a function once per array element)

const forEach = (cb, array) => {
  for (let i = 0; i < array.length; i++) {
    cb(array[i], i, array)
  }
}

array.forEach(function(currentValue, index, arr), thisValue)

Iterating through an array declaratively using a callback function to manipulate the array respectively. Second param is undefined by default and when a value is passed to the function, it gets the this value. This is usually never used though.

map - (returns a new array from calling a function for every array element)

const map = (cb, array) => {
  const newArray = []
  for (let i = 0; i < array.length; i++) {
    newArray.push(cb(array[i], i, array))
  }
  return newArray
}

array.map(function(currentValue, index, arr), thisValue)

The key difference between map and forEach is map returns a new array and forEach returns undefined

filter (returns a new array filled with elements that pass a test provided by a function)

const filter = (cb, array) => {
  const newArray = []
  for (let i = 0; i < array.length; i++) {
    const element = array[i]
    if (cb(element, i, array)) newArray.push(element)
  }
  return newArray
}

array.filter(function(currentValue, index, arr), thisValue)

some (returns true on the first element that meets requirements; else, it will return false)

const some = (cb, array) => {
  for (let i = 0; i < array.length; i++) {
    if (cb(element, index, array)) return true
  }
  return false
}

array.some(function(currentValue, index, arr), thisValue)

every (returns false on the first element that fails to meet requirements; else, it will return true)

const every = (cb, array) => {
  for (let i = 0; i < array.length; i++) {
    if (!cb(element, index, array)) return false
  }
  return true
}

array.every(function(currentValue, index, arr), thisValue)

reduce (method returns a single value: the function's accumulated result)

function reduce(array, cb, initialValue) {
  let i = 1
  let currentValue = array[0]

  if (arguments.length > 2) {
    currentValue = initialValue
    i = 0
  }
  for (; i < array.length; i++) { // i has already been created, hence the lonely semi colon
    currentValue = cb(currentValue, array[i], i, array)
  }
  return currentValue
}

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Very weird-looking under the hood but all it really does is it reduces what was passed into one value. It can be a number, array, object, etc... If the second argument is not passed, it will begin at the first index of the array; else, it will start at whatever you passed it. For example:


let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) {
  return previousValue + currentValue
}, 0)
// sum is 6

It takes the initial value that was passed, 0, and adds the first index. In this case, you would not need to pass the initialValue since you are just adding numbers and it will save you one operation. Another example using an object would be:


const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

let countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++
  }
  else {
    allNames[name] = 1
  }
  return allNames
}, {})
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

This example will iterate through the array and check if the name already exists as a key in the object (the initial value is an empty object where you will store the result). If it already has created the name, it will add one more to it. One last example to truly make sure this is understood is:


const numbers = [-5, 6, 2, 0,];

const doubledPositiveNumbers = numbers.reduce((previousValue, currentValue) => {
  if (currentValue > 0) {
    const doubled = currentValue * 2;
    previousValue.push(doubled);
  }
  return previousValue;
}, []);

console.log(doubledPositiveNumbers); // [12, 4]

This combines filter and map higher-order functions into a single reduce method which is a lot more efficient than traversing through the array twice. There is another hof called reduceRight and it does the exact same thing but traverses from right to left instead.

There are a lot of examples that go into reduce in the mdn so I'd recommend you check it out if you want to see the more complex examples. I hope this was helpful because not only this took time but also makes me appreciate the built-in methods by JavaScript. Don't forget to bookmark this because I know I will😎

Hi

Gabriel Pedroza — Sun, 15 May 2022 01:46:49 +0000

hi <3

Breaking Down Imposter Syndrome 🐣

Gabriel Pedroza — Wed, 06 Apr 2022 23:05:40 +0000

Hey hey! How are ya? No... how really are you👂 I feel like posting this is genuinely important and I hope this post can spread like wild-fire because it should be heard amongst everyone, including programmers🥸 Let's start to absolutely break down imposter syndrome together‼️

**What the f¢# is Imposter Syndrome*?**

By definition, imposter syndrome is described by the following: Doubting your abilities and feeling like a fraud. It disproportionately affects high-achieving people, who find it difficult to accept their accomplishments. Many question whether they're deserving of accolades. credit Basically, it just makes you feel like you're not enough.

**Who and When was the term, Imposter Syndrome, created?**

The term was first used by psychologists Suzanna Imes and Pauline Rose Clance in the 1970s. When the concept of IS was introduced, it was originally thought to apply mostly to high-achieving women. Since then, it has been recognized as more widely experienced. credit Hmmmm, it was originally thought that it started from high-achieving women. But wait... isn't that sort of oxymoronic? High-achieving people feeling phony? Does 🍀 or something uncontrollable really play the entirety of your career?

How can we avoid this stupid thing?

Well let's be honest, we can do some exercises and try to think differently in ourselves but that likely won't get rid of it long-term. Why change the way you are? I personally don't believe that we should avoid it but actually embrace it. Before you report me, let me explain😆 It's a wonderful and horrible feeling but we are human. We want to achieve the most and have to-die-for accomplishments so having that feeling in the back of our mind is ensuring us that our dreams and aspirations are gargantuan. Some days, it can get very melancholic and statistically speaking, 7-10 people have this feeling once or multiple times throughout their lives so having an off day is okay. Take breaks, enjoy yourself, and one day, I'll ask for your autograph😊

“I have written 11 books, but each time I think, ‘uh oh, they’re going to find out now. I’ve run a game on everybody, and they’re going to find me out.” Civil rights activist, author, poet and Nobel Laureate - Maya Angelou

“There are an awful lot of people out there who think I’m an expert. How do these people believe all this about me? I’m so much aware of all the things I don’t know.” Forbes ranked Dr. Chan as 2013’s thirtieth most powerful woman in the world - Dr. Margaret Chan

“The greatest obstacle for me has been the voice in my head that I call my obnoxious roommate. I wish someone would invent a tape recorder that we could attach to our brains to record everything we tell ourselves. We would realize how important it is to stop this negative self-talk. It means pushing back against our obnoxious roommate with a dose of wisdom.” Author, syndicated columnist, co-founder of The Huffington Post, the founder and CEO of Thrive Global, and the author of fifteen books - Arianna Huffington

Misconceptions in Software Engineering😅

Gabriel Pedroza — Mon, 13 Dec 2021 20:45:48 +0000

Before I even conceptualized the thought of genuinely pursuing a Software Engineering career, I reckon I wasn't intelligent enough to become one. It seemed that you needed to become extremely well-versed in complex Mathematics and you needed to be programming as early as in the womb. The truth is, I was completely and utterly wrong. In this post, I'll talk about those misconceptions in depth and why these misconceptions are mainstream in the first place🙃

1. You need to be brilliant to be a Software Engineer🤓

This is a strong NO. In the core of a Software Engineer's job, it undoubtably revolves around the same objective no matter what field you are interested in. Solving problems. Most, if not all engineers solve those problems in code or at least need to be well-versed in code to efficiently communicate with other programmers. Learning code requires practice and consistency, not being smart. While being a natural problem-solver can be beneficial in programming, that doesn't mean that your characteristic will give you the golden ticket to the Polar Express🚂(old movie reference👴).

2. You need to be well-versed in complex Mathematics🤯

Math is involved with programming but that does not mean you need to be a Mathematician of any sort. If you are comfortable with using the elementary operations in math (addition, subtraction, multiplication, and division), that suffices to about 99% of what you will be using whenever you'll face a problem that requires some Math. Certain fields require slightly more Math knowledge like becoming a Data Scientist or a Machine Learning Engineer but if you are a person who enjoys Math and problem-solving, you can possibly thrive in those fields with consistent practice. Overall, the foundation of Math is important to many fields but you should do more research on what you are interested in.

3. You need to start young to become a Software Engineer👶

This is absolutely incorrect in all fields of Software Engineering. There are gargantuan amounts of people becoming Engineers everyday and a good percentage did not start when they were 7 years old. It comes as an interest or as a curiosity to try it out. For example, if a child enjoys building legos and creating houses, towers, etc; that child would probably grow up to enjoy being an architect or to at least try it out. Many people try things out like music, sports, and more but do not see themselves being involved long-term. That is completely fine but you are gaining the experience of all these things and finding your passion will eventually come.

All in all, these misconceptions are exactly what they are. Misconceptions. You do not know everything about everything. That is simply unrealistic. When you makes assumptions, it is often that these assumptions are converted to false reality since you do not really dive into certain fields and understand in a slightly deeper level. You tell another person your reality and that person will tell another. This happened to me and many others like me before I pursued my career. To wrap everything up, if you are interested in a topic, disregard all previous beliefs that you've heard and do some research on it. If you genuinely find interest and see yourself being involved in that field, then go for it. The worst thing that can happen is you now have gained the experience of that field and you can spread the unbiased truth about it to others while knowing that you've tried it yourself and it wasn't for you. I wish everyone the absolute best❤️

“Do not fear failure but rather fear not trying.”
― Roy T. Bennett, The Light in the Heart

“Maybe the hardest part of life is just having the courage to try.”
― Rachel Hollis, Party Girl

“Great things happen to those who don't stop believing, trying, learning, and being grateful.”
― Roy T. Bennett, The Light in the Heart

“Don't waste your energy trying to change opinions ... Do your thing, and don't care if they like it.”
― Tina Fey, Bossypants

“It will get easier each time, I think. I hope. I just have to keep trying.”
― jenny han, To All the Boys I've Loved Before

Software Engineering 💻What I've learned in one year!

Gabriel Pedroza — Tue, 07 Dec 2021 19:23:02 +0000

I decided to give this (making my first blog) a try when I realized how close I was to reaching my first year of being a Frontend Engineer. This will also improve my Markdown skills which will also improve my README.md in my repositories. If you see any errors, please let me know because I always want to reach perfection... and because of my slight OCD in anything related to software😅

TLDR/Specifics
My background
When I decided to become a Front End Developer
What I have learned from one year of coding
Any advice or things I would've done differently
What I plan to do accomplish in the future

TLDR/Specifics

Over the course of becoming a Frontend Engineer, I wrote down my progress:

7th grade (2014) - Used blocks of written code from made scratch.mit.edu to create basic games and animations.

11th grade (2018) - Wrote my first HTML code in Advanced Placement Computer Science and had no interest or remembered anything whatsoever.

December 18th 2020 - Switched my major from Accounting to Computer Science because I wanted to be involved with technology and saw incredible and interactive websites.

Late December 2020 - Wrote my first line of code (Python). I chose Backend first because after researching, I’ve read that you get more income and it’s more logic-based. (Chose for the wrong reasons).

Mid-way January 2021 - Realized after some on and off time of Backend, it wasn’t suited for me at the time and only chose it for the money so I decided to try front end and almost instantly feel in love (Inspired by Bruno Simon’s Portfolio.

February 2021 - Watched an 11 and half hour video (willingly😅) on the basics of HTML and CSS.

March 4th 2021 - Bought my first Frontend course (Html5, Css3, Js(es5+), and React (class and functional components)) on Scrimba.

Midway March 2021 - Wrote my first line of JavaScript code.

End of April 2021 - Registered in another course The JavaScript Bootcamp to enhance my JavaScript.

May 27th 2021 - Made a LinkedIn account to network and meet new people that have similar interests as me.

June 13th 2021 - Finished JavaScript bootcamp.

July 12th 2021 - Bought a Three.js course with GLSL and Blender included by Bruno Simon.

July 15th 2021 - Wrote my first line of React code.

Mid September - Learned about Git (commands) and currently using it to push code, pull code, and make open source contributions from and to local repositories on my Github account after learning how to use GitHub.

September 25th 2021 - Wrote my first line of custom shaders in GLSL (Shading Language).

October 23 2021 - Finished Three.js course while balancing Scrimba’s courses and school.

October 24 2021 - Using React Three Fiber and its helpers to start creating 3D projects.

October 28 2021 - Bought AlgoExpert to learn DSA and also deepen my knowledge using JavaScript while preparing for coding interviews.

October 30 2021 - Learned how to calculate time and space complexity using Big O notation.

November 1 2021 - Used SCSS modules for the first time.

November 21 2021 - Used Material UI for the first time.

December 7 2021 - Learned Yarn. Will use in future projects.

My Background

Long story short, I was majoring in Accounting as a freshman in college and I was not enjoying it at all. I later found out about Computer Science (specifically Full-Stack (Frontend and Backend)) and it caught my attention. I decided to switch when my semester finished at December 18, 2020. I have minimal exposure to coding. Checkout the beginning of TLDR/Specifics to understand specifically what I knew.

When I Decided to Become a Front End Developer

Mid-way through January, I decided to switch from Backend to Frontend. I was inspired by Bruno Simon's portfolio and all the other projects on the official page of Three.js. It changed my perspective on websites completely and with a combination of being inspired and experiencing a shit-ton of "bad" websites over the years, I decided to become a Frontend Engineer without looking at its salary, the hard work it would take to feel "ready", and everything else that comes with being a developer that I've probably haven't experienced yet. It was a turning point in my life and I didn't even know how much it would consume me. I can definitely say after a year of programming, I am so happy I chose it because of the right reasons. I got lucky that it pays well and it is a great career path.

My Advice to Future Programmers

JUST START ALREADY! When I started programming, I never saw it as boring or as a job in any way; Frontend for me was just so exciting because of what you can create and be able to give that experience to others that come across your website/projects. Personally, for the first 6-8 months, I learned about code or watch anything that was code-related for a good 8-10 hours every single day (you do NOT need to do this🤦🏻‍♂️). This definitely caused a huge burnout for me. My social life and health were struggling immensely and I wasn't retaining any of the information anymore. I decided to take a break and slowly and focus on my social and health more. It was the best decision for me in every way possible and I would recommend anyone who starts to become a programmer to understand that there is a lot of information to learn and your comfort zone will be eviscerated. You will feel that overwhelming sensation of not being good enough but after that stage of feeling "useless", your mental strength will be calloced from the adversity and your success it will overshadow that stage. I promise😊

My Future Goals as a Frontend Engineer

There are so many goals that I want to accomplish as a Frontend Engineer. The main one is to land a job and become a paid full-time engineer. Currently, I am making projects to include on my curriculum vitae, learning DSA, and filling any holes I have currently since I am a self-taught engineer.

“Believe you can and you’re halfway there.” —Theodore Roosevelt

“It is our attitude at the beginning of a difficult task which, more than anything else, will affect its successful outcome.” —William James

“I think I can. I think I can. I think I can. I know I can.” —Watty Piper, The Little Engine That Could

“Life isn’t finding shelter in the storm. It’s about learning to dance in the rain.” ―Sherrilyn Kenyon

“Whether you think you can or think you can’t you’re right.” —Henry Ford

I wish everyone the best of luck on your journey!