Forem: Aaron Guyett

The Importance of Mentoring - 5 Reasons Why You Should Find a Mentor

Aaron Guyett — Mon, 08 Mar 2021 05:17:41 +0000

One of the many things you'll hear when starting in most career fields is find a mentor. That's easier said than done. In a future post, I'll highlight some of the places you can find mentors, but first I'd like to convince you of the importance of mentoring.

Mentoring 101

So what exactly is mentoring? Mentoring is the practice of engaging in a mutually beneficial partnership between an individual who wants to grow in a field and one who has experience in the said field. This means that the mentee and the mentor are getting something out of the relationship. The mentee gets the guidance, wisdom, and knowledge the mentor shares, while the mentor earns an intrinsic reward. Now, let's highlight some of the reasons why you should get out there and hunt for your own mentor.

1. Successful Organizations Do It

Organizations at the top of their game are there because they understand the importance of mentoring. 71% of Fortune 500 companies have mentoring programs (Bolotin, 2018). That means that out of 500 of the most powerful companies ranked in the United States, 355 of them thrive with the use of mentoring programs.

These private programs are not available to each of us (unless we get hired), but they showcase the impact of mentoring. Do you think it is a coincidence that success and mentoring go hand-in-hand?

2. You'll Learn

If following the group is not your thing, then do so because you'll learn. You'll learn, and you'll learn a lot. As soon as you think you have fundamentals down, a good mentor will shake up your world (in a good way) and you'll be back at square one in a new set of fundamentals. This time you work through it, you won't be alone.

A great mentor is one that has been there before. They can teach you the things that you did not know you needed to learn. For example, did you know that when you are going to a technical interview, it is okay to say that you do not know how to solve one of the problems, as long as you explain how you would figure out to do so? Mentors will walk you through some of the complexities and nuances of your specific field (even outside of development!) and teach you things they wish they had known when they started.

3. Problem-Solver Access

Depending on your exact field, I'm sure you have spent countless hours Googling a specific problem. You may eventually solve it, but wouldn't it be easier if someone were available to point you in the right direction? For example, let's say you're working with Angular and you get an error and begin to panic. You troubleshoot the error and look at Stackoverflow to no avail.

A quick message to your mentor results in, It's a package error, Google ..., and before you know it you're on your way and you can chug along until you face the next error. When you do reach that next error, the insight the mentor gave you leads you to a solution much, much faster than before.

4. Guidance is Vital

Are you happy in your station? Where do you see yourself in 5 years? 10? How do you plan on getting there? Do you want to work hard? That's great if that's true, but a mentor can magnify your hard work by focusing it on things that yield higher professional returns.

Consider a junior software engineer. She is fresh out of college and has completed an internship and finds herself creating marketing emails for a large company. Eventually, she'll be able to begin working on the user interface for the company's SaaS offering. She begins to learn all about the languages that the organization uses.

A mentor would dissect the given scenario and provide guidance. Questions like: Do they use containers? If so, do you know enough about Docker and Kubernetes? and It's a SaaS platform? What cloud provider do they use? Do you know about DevOps?

They'll ask the tough questions so you don't have to and you can spend your time getting to the answer.

5. Companionship

This is the most important. It can be taxing to consider working after work to do better at work. Having a companion that has been through your struggles can be key. This is beneficial for both parties. You'll always have access to someone who understands what you're going through.

Plus, you can always bounce your ideas off of them and they will hopefully be brutally honest. A good mentor always is.

Conclusion

Get a mentor. A good one will make everything easier and a great one will change your life.

Aaron

References

Bolotin, T. (2018, March 02). Most Fortune 500 Companies Have Mentor Programs. Do You?- PSA. Retrieved from https://www.psafinancial.com/2018/03/most-fortune-500-companies-have-mentor-programs-do-you/#:~:text=Over 71 percent of Fortune,formal training for new hires.

AWS Certifications - 5 Reasons to Obtain Them

Aaron Guyett — Sat, 13 Feb 2021 01:26:20 +0000

Amazon Web Services (AWS) is a cloud provider that offers many, MANY services to consumers so that they can move away from on-prem environments and into the cloud. The cloud is the present and the foreseeable future. Organizations have begun to realize this and although they may resist, many have at least adopted a hybrid model that has moved some services that were once on-prem to the cloud. I mention AWS because it is the largest cloud provider in the world that proudly hosts cloud services for organizations like Netflix, Twitch, LinkedIn, dev.to (yes, this blog post utilizes S3 buckets anytime you see an image I've added), and Facebook.

So why should you learn about AWS? Here are some reasons (and resources) that may help you come to the same conclusion I made. P.S. I am currently studying for my next AWS certification. Feel free to connect with me to discuss the certification exams!

1. Improve Your Credentials

The certifications area of early software engineer resumes is often lacking. Any AWS certification bolsters that space by showcasing that you have the ability to learn theory and are interested in the cloud. Adding a single certification from a reliable source instantly pushes a candidate to the next tier. If you get multiple AWS certifications, you build on your credentials even further because each subsequent certification is more specialized.

2. AWS Certifications are Affordable

The Certified Cloud Practitioner exam is $100. It lasts three years. If you pass on your first try, you pay $33/year. YOu may counter this argument by claiming that study materials are expensive. Here are some free resources:

Udemy Course - A free Udemy course from a reputable source
aws.training - Tons of courses available through AWS' platform
Practice Exam - An okay practice exam
Qwiklabs - Free/paid cloud labs available with a real AWS environment

Paid Resources:

College - many college courses are available that cover AWS content, provide you with hands-on learning, and will fund your attempts at the exams
MOOCs - There are tons of Udemy/Coursera/EDX courses available for $13 and under
Practice Exams - AWS and other providers offer practice exams usually around $20 or less

The best approach to studying for the exam is dependent on the individual. I prefer getting into labs and taking the time to read as much as I can while others like courses and working through labs with an instructor. Take the time to identify your learning strategy and make a plan to study to earn the certification.

3. Learn

After looking at the number of services AWS has to offer (over 275), learning them all can appear daunting. Good news: you don't have to know every service. Depending on the exam you are taking, you only need to know specific services. Studying for the exams provide you with a mountain of knowledge that translates into the workplace effectively. If you want to be a software engineer or developer, begin studying for the DevOps track. You'll find that the content on the exam covers AWS AND DevOps. Learning this material enables you to present yourself to potential employers, bosses, and colleagues while having the knowledge to back up claims that they may have seen on your resume or LinkedIn.

An example would be a study of AWS Lambda. Lambda is a serverless function service. If you do not know what serverless functions are while studying Lambda you would uncover that knowledge as well as the knowledge that will help you discuss serverless functions on a specific platform that is used by hundreds of organizations around the world. Remember, we are all lifelong learners but we choose to do it in different fields.

4. Join Communities

As soon as you pass your first certification exam, you get to join LinkedIn groups and other communities on AWS and on other platforms. You can market yourself there, connect with other individuals that are as driven as you are, and maybe even find a study-buddy for the next exam you plan on taking. Additionally, as a certification-holder, you get access to an exclusive shop that gets more and more items the further along you get in the certification track. Plus, you can print out and hang up your certification on your wall and people will be very impressed to see anything from Amazon.

5. Intrinsic Reward

There are many difficulties that we all face every day. Working towards something, especially during COVID, can help motivate you. Earning a certification is an accomplishment that you set out to do, take the time to study for, and work to pass the exam. It is something you can be proud of once you have accomplished it. At this point, don't we all need a reward for being inside for so long?

So, get out there and pick an exam track, get studying, and earn those certifications.

Aaron

The Differences Between a Headless CMS & A Static Site Generator

Aaron Guyett — Mon, 16 Nov 2020 05:34:54 +0000

As I dive further into the wormhole that is software engineering, I have thankfully run into many different tools (frameworks, libraries, packages, etc.) that make developing a lot easier. Plug: Gatsby Review A couple of these tools always seemed similar to me, enough for me to decide to do a deep-dive to understand them better. I'd like to share what I learned, which includes the benefits and drawbacks of each, definitions of both of them, their use cases, and some examples.

Headless CMS Definition and Examples

A headless CMS is a content management system that sends content to the frontend as an API. Without a head, this means that you get to pick and choose which outputs the content is sent to (Melvær, 2020). They are specific to the backend and focuses on storing and delivering structured content. They are often customizable to an extent but offer limited true flexibility. They also require additional server resources than a static page.

The image below showcases how a headless CMS interacts works.

Headless CMS

A headless CMS is able to send and receive data via an API. Integrations can be injected into the API and send out to various apps.

Regular CMS

A regular CMS requires the admin interface to connect to integration, then the database, then integration, and finally to the view layer. This is much more convoluted and less efficient.

Examples

Traditional CMS Examples:

WordPress
Joomla
Drupal - Also offers a Headless CMS
Weebly

Headless CMS Examples:

Static Site Generator Definition and Examples

A static site generator (SSG) allows a developer to create a static web page from different code or markdown prior to users viewing it. For example, you may write markdown and then use Jekyll to convert it to HTML before the user views the page. The premise is simple: create input files and then utilize a static site generator to present HTML to a user. They make the transition from code to view simple and efficient. Many of the SSGs are optimized for search engines and include some features that provide users with an efficient experience.

The problem with SSGs is that they are exactly that: static. They aren't dynamic, so something like a social media app may not be an ideal candidate for an SSG. They also relegate to simple HTML so they may strip some of the things that developers want to integrate into a project. The research that is necessary to use an SSG is crucial and can be tedious.

Examples

Example

I recently started Wes Bos' course on Gatsby that can be found here. The project created in the course utilizes Gatsby and Sanity, and you can see the outcome on my Github.

You can see the final outcome of the course below.

Remember, a headless CMS is used to manage content between what the user sees and a database, while a static site generator is used to serve static pages to a user from a template engine recognized by the SSG.

Hopefully, this helps you understand both these concepts a bit better! Cheers!

Aaron

References
Melvær, K. (2020, August 18). Headless CMS explained in 5 minutes. Retrieved from https://www.sanity.io/blog/headless-cms-explained

CMS Diagrams from https://www.storyblok.com/tp/headless-cms-explained

The Power of Gatsby (5 Reasons Why You Should Use It)

Aaron Guyett — Tue, 27 Oct 2020 05:32:58 +0000

Gatsby(.js) is more powerful than a content management system (CMS). It can be used to create web applications with ease. Think of it as a more advanced WordPress with many more optimization features built-in. By definition, it is a static site generator but can do much more. It has plug-ins, provides scalable code, and utilizes easy-to-integrate security features. Gatsby's homepage uses the phrase:

The modern way to build the web.

And it is. Gatsby has no catch, it is useful and can be used to set up an optimized single-page-app (SPA) in a matter of minutes. There are plenty of other features, and I'd like to highlight some of them and discuss some resources you can use to better understand and utilize Gatsby.

What is Gatsby?

Gatsby is a static site generator that allows users to create an application using the command line in a matter of minutes. Gatsby requires Git and Node.js. You then need to install the Gatsby CLI to utilize the commands available. An excellent tutorial can be found on the Gatsby website here. If you're ever lost you can always use gatsby --help once you have it installed.

Gatsby acts as a way to quickly set up web apps from templates, install or build plugins and utilize or create themes (among many other things). As the best management system I've seen, you can expect Gatsby to provide delivery and payload optimization (meaning that performance will impact users as little as possible because of features like progressive image loading and static content), offer an ecosystem and environment that you can use to develop your app in, and provide governance that can be used to secure your product.

It also helps that Gatsby has some of the best documentation I've ever worked with. (And a Twitch channel).

How do I Learn to use Gatsby?

As mentioned earlier, Gatsby has a spectacular tutorial. There are also many resources available (or if you want to take a coding boot camp, you can ask about that in class.)

There are also some amazing courses available. One of my favorites gives you video access for life, covers some additional topics, and is taught by a knowledgeable and inspiring individual. The [Master Gatsby] course can be bought here.

FreeCodeCamp has a couple of great YouTube courses available:
The Great Gatsby Bootcamp & Strapi & GatsbyJS Course. If you have not utilized FreeCodeCamp and you are early in your software engineer career, I recommend hopping on there immediately!

Udemy has a cool course available to build a Gatsby & Firebase app. Udemy, Coursera, EDX, and other MOOCs are great resources for learning all things code.

I'm Not Convinced

If you have checked out the Gatsby website and don't feel like there is a point in using Gatsby yet, I'll present you with some facts:

1. Gatsby creates a dev environment on your machine to test your project within minutes.

You can use a starter template and begin working on your project and check it in real-time within minutes.

2. Gatsby's plugin library is massive and is updated often.

The plugins available optimize performance, include components and themes, and allow you to maintain a scalable environment with ease.

3. Gatsby has a great community.

They have a Twitch channel, sponsored events, and a swag store. The team puts a lot of effort into community outreach and it shows because the community is very involved.

4. Gatsby has great documentation.

It's awesome. Like everything else supplied by the Gatsby team, it's regularly updated and maintained better than the White House.

5. Gatsby has a page that shows how much better it is than its' competitors.

This page can be found here. Gatsby excels in most categories and outranks all the competition so effectively that it offers comparisons and includes explanations.

Closing Thoughts

Gatsby is the future and the present. I used it for my portfolio and I love some of the plugins available (styled-components anyone?). As the community grows, more features will be added and Gatsby will continue to become more efficient. If you need more convincing drop me a line!

Until next time! - Aaron

General Assembly (and other) Coding Bootcamp Review

Aaron Guyett — Mon, 05 Oct 2020 02:49:12 +0000

There are a few of these summaries of coding boot camps available on the Internet, so I'll try to offer something a little different. I compared a lot of self-proclaimed coding boot camps, spoke with a lot of admissions teams, and asked alumni from various boot camps.

I went to General Assembly and completed their Software Engineering Immersive (SEI) Flex boot camp. I won't be discussing prices but will give some insight into what goes on and what to expect coming out and going into a boot camp. One thing that I noticed that was consistent about many software engineering boot camps is that there is no discussion about testing. If it works, it works and that is that.

Admissions

I spoke with many different admissions counselors and their main objective was the same: to add a feeling of exclusivity to prospective students.

I spoke to SpringBoard, UCSD Extension, General Assembly, and a few others. They asked incredibly similar questions, including:

Explain how this would benefit you. Do you want to get a job immediately after?
If you are selected, would you be able to make it to all the sessions?
What motivates you to want to code?
Which payment plan would you use?

If I connected with an admissions counselor, I received an unlimited amount (to this day if I don't unsubscribe) of emails from E V E R Y coding boot camp and many phone calls if I showed a semblance of interest. These emails and calls always included dates asking me to register by a certain time to make a cohort. That being said, all the admissions counselors are awesome but remember that it is your decision. I ended up choosing General Assembly because of the genuineness portrayed by the admissions team and each of the people I spoke with.

Curriculum

General Assembly specifically focuses on two stacks, but the stacks depend on the instructor. They always incorporate the MERN stack (MongoDB, Express, React, Node) but they may include Ruby on Rails or Django/PostgreSQL. I happened to learn Django and Postgres and am pleased because research tells me many companies are moving away from Rails, but it still has plenty of opportunity available if you do happen to learn it. The SEI Flex boot camp is part-time and has two weekly 4-hour sessions, one weekly 8-hour session, and a bi-weekly 2.5-hour outcomes session.

The content was broken down into four modules, and each model used the same formula. We would have a discussion about the content, do a code-along with an instructor, then be assigned an assignment. Some of the assignments were graded and others were not but it is in your best interest to do them all.

There are 4 modules and each module has a project.

The projects differ from the labs because we were given large amounts of class time to work on them and we were allowed to choose (if approved) whatever we wanted to work on as long as it utilized the stack. Three of them are individual projects and the final one is a group project.

HackReactor utilizes three projects and they are all group projects. They require you to build upon projects that your classmates or others have built instead of starting from scratch. FlatIron asks students to create a group project every four weeks and a solo project every three weeks, alternating. SpringBoard has a self-paced curriculum with little interaction with instructors. Remember this: all coding boot camps are project-oriented but it is up to you how much you get out of them.

Another thing to consider is the fact that what they are teaching is universal. You learn how to learn a programming language(s) quickly and it becomes VERY easy to learn other languages because of that. (Although that "very easy" portion is relative to how easy it was before the boot camp.)

Instructors

Our instructors were awesome. Most classes at GA were larger than ours (I believe) as by the time graduation rolled around there were 6 of us. Most classes get a TA, and have 1+ instructors. We were so small that we lost our TA one of our instructors by the time we reached month 5.

They are awesome. They help debug and all had tons of energy all the time. They inadvertently teach you the most important thing about software engineering: the ability to use Google effectively. When presented with an issue, if they didn't know the answer, the way that they Googled things was on a higher level. That is a huge skill among developers.

The feedback on homework was excellent and each project completed motivated me to get better because of how they discussed it. The TA was knowledgeable (and graded the HW) and pointed out areas of improvement.

SpringBoard was the only unique boot camp I saw because of how limited the interactions with instructors are.

Outcomes

Every boot camp has an outcomes department. This department is the one that helps you get a job. There are some things you have to do to maintain outcomes status. Some of the boot camps come with a job guarantee, GA does not. Maintaining outcomes status after the classes are over requires a part-time to full-time effort on your part. You are asked to submit x amount of job applications a day, need a portfolio, cover letter, resume, brand statement, and LinkedIn, and have to meet regularly.

The outcomes sessions were interesting and provided a lot of content that help people even if they are not looking for a job. You can always opt-out of the outcomes component of the boot camp. The outcomes sessions had homework if you chose to opt-in that helped build on the final requirements after the class was over.

Words of warning: offering to let you attend a boot camp for a percentage of your pay for two years is a lot, but it does provide you with a chance to attend. Please think about that payment plan choice carefully.

Expectations

These may not be universal, but this is how my experience was. Everyone learns differently and will have a different experience, but I think there are some common misconceptions that I'd like to touch on.

Learning

I learned a lot but some content was a review. It's up to you to actually learn in the class and afterward. This is something that not everyone can do easily, but the instructors are excellent at supporting you.

Time

One of my biggest pet peeves is the term "I didn't have time." I get it if you have obligations that are meaningful (family, multiple jobs, etc.) but even then most of those can be mitigated if this is something you want. A student in my cohort had a full-time job, a part-time job, a full-time master's student, and did a summer internship all while attending and completing the boot camp. It's a time investment, yes, but if you are able to manage your time you can accomplish this.

Difficulty

It is difficult when doing a lab alone but that is part of the process. Try not to ask for help unless you absolutely need it and even then see if you can troubleshoot just a little longer. Your peers are there for a reason as well.

Final Verdict

You'll learn a lot, make some cool friends, network a ton, and learn how to learn. I'd do it again despite the new debt.

As with anything, it's up to you what you get out of it. I'm going to go back and polish some of my projects and continue to work on things I'm passionate about. Make sure you know what to expect going into it and set goals for yourself and you'll do great.

👨‍💻 React from a Bootcamper's Perspective | Part 5 - 🎨 Styling Methods

Aaron Guyett — Thu, 10 Sep 2020 22:23:00 +0000

Styling in React can be confusing. It isn't hard to do, but there are a bunch of different ways to do it that are all acceptable. Working with static web pages taught me that inline styling was "frowned upon". A quick style.css file later, and I was moving along. React offers many different ways to style your single-page app (SPA), and I'll break them down with examples.

🖌️ Styling Overview 🖌️

I can think of five(ish) ways to style components in React:

Stylesheets - Classic stylesheets in a .css, .scss, etc. format
CSS Modules - A separate stylesheet with limited scope
CSS Framework - Classes/Components that are used in-line
JSS - JavaScript styles
styled-components - CSS in JS

Stylesheets

Hopefully, you've worked with stylesheets by now. On CodePen, a stylesheet is provided with all pens. In react, the stylesheet is often placed in the same folder that the component or page is. For example:

Project
|
+-- src
| |
| +-- components
|   |
|   +-- Nav
|     |
|     +-- index.jsx
|         style.css

The nav in our example would then import the style.css file by using import './style.css'. This approach allows the software engineer to work with stylesheets in classic fashion. Example below:

body {
  margin: 0;
}

.nav-button {
  color: blue;
}

Stylesheets are easily optimizable by the browser and can be redone quickly, however, they can become long hard to maintain.

CSS Modules

CSS modules are similar to stylesheets because they are in the same location (see above file structure). They are imported differently and are scoped locally so are much better at separating styling code. The stylesheets are typically named different as well. Example: module.style.css. They are imported in a different manner in index.jsx: import styles from './module.style.css'.

They are accessed by using the styles object that is created from the stylesheet. The following example highlights how they are used.

import React from 'react';
import styles from './module.style.css';

const Nav = () => (
  <nav className={styles.navbar}>
    <span className={styles.link}>Home</span>
  </nav>
);

export default Nav;

Each of the classes we created inside the modules can be accessed using dot notation. They are incredibly beneficial because there will no longer be styling conflicts due to the way the styles are scoped (locally), the CSS is exposed to JavaScript, and they are reusable. In turn, they are hard to mix with global CSS, lowerCamelCase must be used, and webpack is required.

CSS Frameworks

There are a lot of CSS frameworks available. Each has documentation and some certain feature that it's known for. For example, Bootstrap is known for being a requirement among web developers on the Internet (search Bootstrap memes). There are tons of them available. Some of my favorite CSS frameworks are Bulma, Semantic, & Material UI. They are easy to use because they can be installed with a package manager and then imported globally or added to a file as needed.

import React from 'react';
import {
  Button,
  Container
} from 'react-bulma-components/full';

const Nav = () => (
  <Container>
    <Button color='danger' size='large' rounded outlined>Home</Button>
  </Container>
);

export default Nav;

The above example shows how importing a component from a CSS framework allows you to use it as a component right in line. It comes pre-styled, but can be changed by adding modifier classes or updating the theme. We added some attributes to the Button component to make it rounded, large, red, and outlined.

CSS frameworks are easy to use, created with accessibility in mind, and quick to implement. They can be hard to optimize efficiently, may look unoriginal, and can increase the size of the app.

JSS

Similar to styled-components, JSS is created in the JS/JSX file. They are slightly more advanced than the other concepts we've covered but can be done. The example below showcases how JSS is used in React (as seen on the homepage of JSS found here).

import React from 'react'
import {render} from 'react-dom'
import {createUseStyles} from 'react-jss'

// Create your Styles. Remember, since React-JSS uses the default preset,
// most plugins are available without further configuration needed.
const useStyles = createUseStyles({
  myButton: {
    color: 'green',
    margin: {
      // jss-plugin-expand gives more readable syntax
      top: 5, // jss-plugin-default-unit makes this 5px
      right: 0,
      bottom: 0,
      left: '1rem'
    },
    '& span': {
      // jss-plugin-nested applies this to a child span
      fontWeight: 'bold' // jss-plugin-camel-case turns this into 'font-weight'
    }
  },
  myLabel: {
    fontStyle: 'italic'
  }
})

// Define the component using these styles and pass it the 'classes' prop.
// Use this to assign scoped class names.
const Button = ({children}) => {
  const classes = useStyles()
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</span>
    </button>
  )
}

const App = () => <Button>Submit</Button>

render(<App />, document.getElementById('root'))

This approach allows easy theming and global styles that are only used when a component is mounted. The lazy stylesheets exist only as needed. The static elements of a stylesheet are shared between all elements. They offer local scoping but can be tough to learn and hard to read.

styled-components

I recently just finished (but never done) my new portfolio here: shameless plug. I utilized styled-components to create most of the components. The styled-components library can be installed with a package manager and then imported. The components are then built in the index.js(x) files using the library. An example from my portfolio is below.

import styled from 'styled-components';

export const Container = styled.div`
  max-width: 1280px;
  margin: 0 auto;
  width: 90%;
  @media (min-width: 601px) {
    width: 90%;
  }
  @media (min-width: 993px) {
    width: 80%;
  }
`;

The above component is exported as Container and can be used as a component. It is rendered as a div. It is very easy to theme styled-components and SASS is accessible after installing. I used npm i styled-components and then began to work. There is a bit of a learning curve and performance may be impacted negatively but they were really cool to work with.

Bonus: In-Line Styling

<h1 style={{color: 'blue'}}>Hellow World</h1>

Conclusion

There are a lot of options available when choosing how to style your React SPA. It is important to understand each of the available styling methods in case you work on a project with one of them. Find one you like and get really good at it so you can become a styling snob. As always, see you next week. ~Aaron

👨‍💻 React from a Bootcamper's Perspective | Part 4 - 📍 A Detour to Discuss Resources

Aaron Guyett — Fri, 14 Aug 2020 22:18:30 +0000

I've thrown some concepts at you now and, although they are at the beginner-level (nothing is truly "beginner" when using React), we need to discuss some resources that you can use to further your learning, host your applications, download resources, and just be a generally cool person.

We'll get back into React-specific content in my next post. Promise.

I hope you find this list useful and it helps you the way it helped me. I'll try to regularly update this as I move along.

I won't mention any of the obvious ones (obvious to me at least) like StackOverflow, etc. They are large enough that you'll stumble across them one day.

Here we go.

💽 Hosting 💽

So you have a project and you want to host it. Here are some of the free providers I like to use and their purpose:

Heroku - Continuous deployment with their own CLI
Vercel - Continuous deployment and Git integrations
Netlify - Integrated with many common frameworks and libraries - easy-to-use
GitHub Pages - Good for static web-pages
AWS Lambda - Free tier available
Firebase - Backend hosting with easy-to-integrate authentication offerings
Atlas - MongoDB hosting from the creators of MongoDB
Back4App - Relational and NoSQL hosting provider

📖 Learner Resources 📖

I'll be the next person to share my selection of the millions of resources available. A simple Google search will help find a lot of them but there are some sneaky resources here that will hopefully help you reach that next level.

FreeCodeCamp - One of the best resources available. Sign up for the newsletter, complete the courses, and share your achievements.
GameDev Academy - Hosted by Zenva, a good website for resources on game development in all forms.
/r/LearnProgramming - Reddit has a lot of places you can post and dig but this subreddit allows you to get answers to many of the questions you'll have when starting.
CodeChef - Learning, challenges, and more.
CodeSchool - Now on Pluralsight, this is a free trial only but provides a lot of interactivity in many of the common coding aspects.
SoloLearn - Originally a phone app, SoloLearn offers many language courses, a scoring system so you can challenge others, project sharing, and a development sandbox.
Learning GitHub - Learn git quickly with this plethora of resources.

💻 VSCode Extensions 💻

I use VSCode for many of my projects and there are some very useful extensions available. Some of the very popular ones like Live Server & Quokka you will find on your own. These are some of the more "obscure" ones.

Git Lens - See changes made to code in-line and more!
Bracket Pair Colorizer 2 - Makes it easier to identify the start and end brackets in your code.
TODO Highlight - Highlights TODO & FIXME items in your code.
Regex Preview - Displays the results of your regex.
Open in Browser - Allows you to open your project in browser with a couple of buttons.

🖼️ Templates, Libraries, Tools, etc. 🖼️

Templates for applications that can be used to kickstart a project.

Bit.dev - A cloud library to create, use, and store components rather than hosting them all locally.
JSON Lint - Tidies up JSON.
Trello - Track your progress and share with others.
Color Templates - Generate color templates. I'm horrible at this but now I look great thanks to this website.
React Templates - A collection of React templates that can be used to find even more templates.

🏧 Challenges/Extras 🏧

Some extra resources for coding challenges, updates, and more.

Codewars - Specifically, these 99 problems are great coding challenges. Codewars is useful in general.
HackerRank - Provides coding challenges, annoying email reminders, and a job board. They offer free certifications and an awesome environment.
NetflixTechBlog - For advanced developers, this blog highlights some of the new changes at Netflix.
Five Difficult Challenges - Five tough challenges for beginners.
Gatsby.js Twitch - Gatsby.js's twitch channel that streams pretty cool stuff.

💯 Tips 💯

Free of charge:

Work on something you're passionate about. Yes, go through the process and create a To-Do app but then try to make a small project you'd like.
Unless you're a savant, this takes time. There are coding boot camps available and tons of resources that I haven't listed. These resources may not address your needs, but they will help you being to identify them.
Never stop learning. The development space is one that is always changing. None of the technologies I mentioned were even thoughts 10+ years ago.
Start now. It's easy to push this off and continue to do so until the thing you wanted to learn isn't even prevalent anymore. The faster you learn this stuff and apply it, the easier it is to learn the next big thing.
Find a mentor. Everyone always says this. It's really hard to find a mentor when you're stuck at home because of COVID, don't work in the field, don't have money to take a boot camp, etc. If you need help, reach out to me, or someone like me, and we'd be more than happy to help. 😀
Stay positive. You're going to run into a lot of errors, make tons of mistakes, and find a problem that no one else in the world has had. Keep pushing forward and you'll see it isn't so bad (and someone else has already had that error).

Bonus

Here's a list of some honorable/non-free resources:
Codecademy
Udemy
Coursera
Educative.io
JavaScript 30
SQL Zoo
Command Line Basics
Grid Garden
I didn't mention these: Hugo, Next, Jekyll, Gatsby, Create React App. You should take the time to explore each of those to learn how to deploy apps quickly.

I hope this helps!

Until next week, when I get back to React ~💠Aaron💠

👨‍💻 React from a Bootcamper's Perspective | Part 3 - ☂️ Hooks

Aaron Guyett — Thu, 16 Jul 2020 20:28:27 +0000

Another motivational quote to get things started:

"No masterpiece was ever created by a lazy artist." — Anonymous

In earlier posts, I discussed the importance of converting different aspects of your React app to Class components. This was necessary for a variety of reasons (allowing updates to state from child components, etc.) until February 2019. We haven't specifically covered these in my Bootcamp and will not be, so I've taken the time to learn them on my own and will be showcasing how they work below.

We'll get back to creating a project next week but this will still follow the common code-along format.

Hooks in Practice - 🏖️ Code Sandbox 🏖️

Earlier, we worked with code that showcased the use of a class in React. You can find that code here: Farm Code

We are now going to convert that code to a function that utilizes hooks by changing the class back and utilizing the import statement for hooks. To begin let's convert our import statement that includes big React and little react.

import React, { useState } from "react";

I removed the Component important and instead imported useState.

We can then convert our class back to a function and remove the constructor and render methods (which are lifecycle methods, which I'll touch on in a later post). The final code for App.js should look like this:

import React, { useState } from "react";
import "./styles.css";
import Farm from "./Farm/Farm";

function App() {

  return (
    <div className="App">
      <h1>Welcome to My Farm</h1>
      <h2>We have the following:</h2>
      <Farm />
    </div>
  );
}

export default App;

Currently, we are not taking advantage of state. State is an object that controls the behavior of a component. We are not manipulating our app currently but let's try to showcase something we can do with state within React.

🐛 Count Bugs 🐛

Let's assume we're a farmer and we want to have a way to count the number of bugs that are on our farm (work with me, please).

So we want to add a button to our farm component to allow the farmer to count all the bugs he sees. To do this, we need to utilize state to render our bug count to the screen. Instead of using a constructor or one of the other methods that I have yet to discuss with you (setState() among others), let's take advantage of hooks.

To do so, we can create variables that will allow us to store the count of the bugs.

const [count, setCount] = useState(0);

This definition goes before the return statement in our App function. We utilize useState() and set count to 0 by passing in 0 as our argument. We can then pass down these variables that are in our state to our Farm component by using the following code:

<Farm count={count} setCount={setCount} />

We have made setCount and count available to use as props in our Farm component. Inside Farm, we can use props.count and props.setCount to update the count every time the farmer clicks on the "Add Bug" button.

The code would look something like this:

<button onClick={() => props.setCount(props.count + 1)}>Add Bug</button>
<p>
    <strong>Current bugs: {props.count}</strong>
</p>

We are able to update the state of our count by incrementing it by 1 every time the button is clicked. A refresh will remove that count because it is only stored in state. We then can render the count by calling {props.count}.

The Code Sandbox that utilizes hooks to update state in child components can be found here:

This was a very, very high-level overview of state and Hooks. I recommend reading further and practicing on your own! As an added challenge, see if you can make the count reset once it gets to a certain number!

This has been me, sharing React from a Bootcamper's perspective.

Til next week, when we focus a little more on styling and developing our farm project. ~💠Aaron💠

👨‍💻 React from a Bootcamper's Perspective | Part 2 - 👊 Starting a Project

Aaron Guyett — Sat, 04 Jul 2020 08:07:43 +0000

Let's make a habit of starting with a quote in order to get in the right headspace for development.

“Don’t let anything stop you. There will be times when you’ll be disappointed, but you can’t stop.” — Sadie T. M. Alexander

Creating a React app is a tedious process. There are tools that make it quicker to do so and it is possible to look up many of them online. For the purpose of this series, I will perform most of the work (most likely all, but covering my bases) on Code Sandbox. They offer an easy-to-use React IDE that we can utilize to create a simple app.

We'll eventually get into what we'll be making but this week I'd like to walk you through the setup.

🏖️ Code Sandbox 🏖️

Last week, I linked you to a Code Sandbox. The website you want to use is exactly that: Code Sandbox

You should go through the standard process of creating an account that is linking to your GitHub. After that, you're presented with a dashboard. You're likely to want to click on Create React Sandbox. Don't do that.

Click the Create Sandbox button:

If you do it this way, you'll be able to rename your sandboxes in the future. From there, you can select React to create a React app.

Once created, you'll be faced with a screen that looks like this:

You can edit the name by clicking where the red box is. You now have a running React app. Let's make some changes to make things easier for next week.

📋 Changes 📋

Inside App.js you'll see the following code:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Let's convert that to a class. Why? A class was the old way of initializing the container that renders the App's components. I say old because recently (February 16, 2019, to be exact) React 16.8 came out with something called Hooks. Hooks allow us not to use classes anymore, and I will cover them later, but for now, let's introduce you to classes so you'll be familiar with them.

We need to convert the function to a class. To do so, we need to make it look like this:

import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

export default App;

There's a lot of changes we made there, so we can break it down line by line. The first line has changed because we need to label that we are importing Component from React in Code Sandbox. So we import, as I've heard many times:

Import big React from little react

We do that and import Component. The second line imports the stylesheet.

We convert the function to a class that extends Component and create a constructor inside it to manage state. We'll talk about state later as well.

We then need to call the render function and return what we want to be rendered. Finally, we export the App. After you make these changes, you should see the same screen in the preview section. I recommend playing around with the stylesheet and making changes in React after this but to get you started, we are going to create our own custom component.

To do so, let's follow standard practice and make a new folder by clicking on the circled button below.

We want to make a new folder called src/Farm. After creating the Farm directory, create a file called Farm.js. In this file, we need to set up the component so we can use it in the app. This is done by importing big React from little react, importing the stylesheet, creating a function, and then exporting it. So let's create the framework.

import React from "react";
import "../styles.css";

const Farm = props => (
   <div></div>
);

export default Farm;

We imported React and the stylesheet, we created a function called Farm and we exported it. There is something unique here: props. Props are properties that are passed between components. They can only be passed down and they must be passed to parents before children. That means that if there is another Component inside Farm, we would have to pass properties to Farm before that child component. Finally, each Component must only present one element. The element can have many children elements but it must resolve to a singular <div>, <article>, etc.

We can now add some code to our Farm. Let's add four <p> elements for things on the farm. Your code should now look something like this.

import React from "react";
import "../styles.css";

const Farm = props => (
  <div>
    <p>Barn</p>
    <p>House</p>
    <p>Granary</p>
    <p>Field</p>
  </div>
);

export default Farm;

If it does, then great! We can use this export inside App.js to render our new Component. Let's go back to App.js and import our new Farm component by adding import Farm from "./Farm/Farm"; right below our styles import.

We then need to do something really cool. We have to add the component to our return statement inside our App class. All components inside React are self-closing if you want them to be. For instance, we can write a div as <div />. So we can add our Farm inside our div as <Farm />. Your App.js should look like this when you are done.

import React, { Component } from "react";
import "./styles.css";
import Farm from "./Farm/Farm";

class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
  render() {
    return (
      <div className="App">
        <h1>Welcome to My Farm</h1>
        <h2>We have the following:</h2>
        <Farm />
      </div>
    );
  }
}

export default App;

You should then see the four <p> elements you added inside the preview. Congrats! Feel free to tweak it or add more components. A link to the code is below. Next week we will begin to pass props down to other components.

This has been me, sharing React from a Bootcamper's perspective.

Til next week. ~💠Aaron💠

👨‍💻 React from a Bootcamper's Perspective | Part 1 - 🍬 Syntatic Sugar

Aaron Guyett — Thu, 25 Jun 2020 04:16:30 +0000

"Syntatic Sugar."

This concept defines what JSX does. It is a common coding concept for something that isn't necessary but makes coding easier. This term was the first thing I heard about React.

Hi, I'm Aaron. I'll be going over the things I've learned as I learn them in my coding Bootcamp. I have experience as a Computer Science/Information Technology Tutor, work in the field of programming part-time, and will be done my coding Bootcamp at the end of September. Additionally, I finish my Master's degree in IT (with a concentration in Web Design/Development) in August. I am also a freelance web developer.

That said, I'm no expert. I don't think anyone is an expert until they have reached a certain level of failure. If I could track stats on how many errors I've been faced with and how many I get per hour of coding, there is some number there that would label me as an expert at some point. Let's say it's 100,000 errors and/or 60 errors/hour. I'm not at our 100k/60e/h yet. I just want to share my experience with React to help you learn it or reflect on what you already know.

This series will act as a "guide" to those who are attempting to dive into the world of React and want to know how to get started.

So, let's get started.

🍬 Syntatic Sugar 🍬

Syntatic Sugar is commonly defined as:

A coding convention that enables developers to create clearer and/or more concise code.

How does this apply to React? Well, let's identify what React is. One quick Google search identifies that React is a framework that was created by Facebook. It uses JavaScript to facilitate the development of single-page web apps (SPAs) to improve the user experience. This is done by accomplishing the following:

Removing the need to reload a page after a form is submitted, etc. (Any time the DOM is updated)
Increasing the functionality presented to the user by removing the complexity knowledge required by the developers.

Consider the following code:

<form method="POST" action="/" role="form" id="login">
   <input type="text" placeholder="email">
   <input type="text" placeholder="password">
   <button type="submit">Submit</button>
</form>

If a user were to log in, the page would refresh and frustrate the user who has come to expect that she should not have her time wasted by these ridiculous < 1s load times.

So how do we use React?

🎆 Babel 🎆

Babel is transpiler that converts JavaScript to JavaScript. It takes source code and makes it source code that is more difficult to read. This is where the term Syntatic Sugar comes into play. The way that elements are formally created in React using React.createElement('div', null, 'Hello World');.

That's not that fun to work with. Instead, we can create elements using JSX: <div>Hello World</div>;. There's a little more to it to get it to work in browser but this is much more familiar. Babel will take JavaScript that looks eerily similar to HTML. That is because JSX is JavaScript XML. XML is similar to HTML because they are both markup languages.

The rest of this series will cover React utilizing the JSX syntax. There is a lot more that goes into developing a React app like WebPack but there is much to cover with regard to actual syntax and development and I'd rather spend my time talking about setup and syntax.

There is a lot that goes into React, so before we even begin working on something, I think it's best that we cover what is to be expected in the development of a React app.

🔳 Components 🔳

A component a piece of reusable code that can be implemented into an app. I like to think of components as mY pUzZlE...they are the cogs that move the machine that you're building. A component commonly looks like a function:

function Welcome(props) {
    return <h1>Hello, Aaron</h1>;
}

This component can be reused to render an h1 element that says Hello, Aaron to the screen. Components are important to understand because they are relatively confusing. Anything confusing is always worth understanding.

If you look above, you can see that the Welcome function has a parameter of props. Props are properties that can be used to change the attributes of the component that is being rendered. This can be something like a data point or a number or more. They allow a developer to create a component and change something about it "on the fly" when utilizing it.

How about another example? Our code above has been modified to include a prop we would like to utilize when we render our Welcome component:

function Welcome(props) {
    return <h1>Hello, {props.firstName}</h1>
}

When we decide to render our h1 element it would look like this:

<Welcome firstName="Aaron" />

Take a look at this example here:

The component is created in its own JavaScript file and imported by the App.js file in order to be used there. The web page renders the App.js file, which has our Welcome component in it to present

Hello, Aaron

In order to set up a space to work and develop your own React app, you'll need 125MB plus or can work with me next week as I go through the process of creating a React app from scratch on Code Sandbox.

This has been me, sharing React from a Bootcamper's perspective.

Til next week. ~💠Aaron💠