Luckily, we have modern web browsers and tools to help us tackle these challenges. Chrome provides developer tools that allow us to easily test, debug, and fix our frontend code.

This article will introduce the basic tools that you should have in your toolbox. Later I will write an article going in-depth about how to use these tools and other advanced tactics to help you squash any bug you encounter.

To get started with learning how to use the Chrome developer tools hit F12 if you're on a Windows computer or Option + Command + i if you're on a Mac.

Element Inspector

When your developer tools first open up you should be on the elements tab. This shows you all the HTML elements that are currently on your page. This allows you to easily inspect and change things on the page.

One of the most useful tools in this tab is the magnifying glass. Once you click on this you can hover over any element on the page and the dev tools will bring its HTML code into focus in the inspector window.

Once you are looking at an element, on the right you will see the style section. This will tell you all the styles currently affecting that HTML element. You can edit these CSS styles and they will be reflected on the page. You can also uncheck styles to deactivate them.

An easy way to preview CSS is to edit the styles of your HTML elements directly in this section. You can easily test out new styles without having to leave the page. Just remember that if you refresh the page you will lose all your progress.

Chrome has a great showcase and guide showing you everything you can do with this tool here.

Console

Within your developer tools, you should have a console. This allows you to run code in your chrome window and allows you to interact with elements on the page.

Many times you will see errors (displayed in red) pop up in this console allowing you to pinpoint exactly where something went wrong. You can also put console.log() in your code and see your logs in the console. This is useful because it can tell you if the code is getting to that point in your code. It can also tell you what is in a variable at that time.

This is great when paired with debugger which sets a breakpoint in your code. Wherever you put your debugger will stop the execution of JavaScript in your browser if you have your development tools open. Then you can do whatever you want, like viewing the contents of objects or running functions.

You can see specific examples and read more about this on the chrome developer documentation site here

Network

The network tab in the dev tools is useful for inspecting requests made to your backend. You can see the specific payloads made to your browser on page load or specific requests such as Ajax requests that are made from your browser.

You can glean tons of information from these requests. Most importantly you should look for the HTTP method, status code, and payload.

The HTTP methods will tell you what you are attempting to do with your request. The most commonly used methods are POST, GET, PUT, PATCH, and DELETE.

A GET is used for getting data from your server, the server will usually respond with a 200 OK back with the data you requested.

A POST is used to add data to the server. This causes a change in the state or causes a side effect on the server. Once the data is added the most common response is a 201 Created.

A PUT and PATCH are both used to update existing data on the server. PATCH is different from PUT because it is used to partially update a resource on the server. The usual response is a 204.

Last DELETE is used to delete data on the server. The usual response from the server for DELETE is 204.

When using the Network tab, you can click on any request to see the request and response body of any requests which will be extremely helpful during development.

Cookies

When developing you may need to use cookies for logins, managing personalization preferences, and tracking user behavior.

You can find your cookies in the application tab in the Chrome developer tools. There you will find a table with fields for the values of a cookie.

Here you can also edit cookies by double clicking them and changing the value to anything you need for testing. You can also delete them by selecting a cookie and clicking delete selected.

Conclusion

You can never experiment and truly learn how to code without failing. Learning how to debug code is one of the best ways to fully grok what you are doing and learn.

This article about frontend debugging tools is part of a series where I try to teach you everything you need to know as a software engineer to complete beginners. If you're interested in learning more check out my series here. I go over everything from setup to writing your first program and pushing it to Git!

Before writing a line of code every developer needs to first set up their dev environment. This article is to help non-devs dip their toes into the world of software development by providing an easy to follow step by step guide to set up every tool you need to start coding.

I guarantee this will be the simplest introduction to development on the internet and that anyone will be able to follow this guide.

Developer environment setup for Windows

To code on a windows device, you will need to download a Linux subsystem. This sounds much more daunting than it actually is. This is completely free and easy to set up.

You must have at least Windows 10 or higher to be able to set this up.

Microsoft has a really great guide here that you can follow. I will provide the same guide with pictures so you can follow along.

Setting up Windows Subsystem for Linux (WSL)

1. In your application bar search for "PowerShell" and run this application as an administrator.
2. There should be a blue PowerShell terminal that opens up. Copy and paste this into the terminal and press enter:

   Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
   

   
3. After this command finishes running restart your computer.
4. In your application bar search for "Microsoft Store" and open the application.
5. Find "Ubuntu" in the Microsoft Store and click "Get" then "Install"
6. It will install some files and then prompt you to "Enter new UNIX username", enter a username, and then it will prompt you for a password for your new user.
7. Once you have your user, this command which should update all your packages:

   sudo apt update
   

8. Once that is done upgrade your packages by running:

   sudo apt upgrade
   

9. Next you have to configure Git by setting your git user name by running:

   git config --global user.name "Your Name"
   

   You should replace "Your Name" with your name.
10. Next configure Git to use your email, you should use the email associated with your GitHub account:

    git config --global user.email "YourEmail@email.com"
    

    Replace "YourEmail@email.com" with your email.

Installing and configuring Visual Studio Code (VSCode)

1. You will need to install Visual Studio Code, you can do that by going to the VSCode website and clicking download for Windows.
2. Once VSCode is done installing open it and it should prompt you to install "Remote - WSL" since you have Window Linux Subsystem installed on your system. Click install.
3. After it is done downloading close VSCode.
4. Open Ubuntu and run this to open VSCode from the command line:

   code .
   

   This will install VSCode Server and open VSCode.
5. You can use this method to open your VSCode or just search for the application in your application bar and run it.
6. That's it! You're all set up to start coding on your new code editor on a Window Subsystem for Linux.

Developer environment setup for Macs

To start coding on a Mac you have to download a few things. Instead of setting up a Linux subsystem like what we had to do on Windows, we will have to use Homebrew to use the command line to install software and tools.

Installing Homebrew

Homebrew allows you to download applications and tools. It is a package manager for Macs that simplifies installing software on macOS. You can check their website out here. It is open-source and 100% safe as long as you know what you're downloading.

1. Open your terminal.
2. Run this command to install Homebrew:

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   

   You will be prompted to continue or abort. Press RETURN to continue.

Using Homebrew to install Git

1. Install git using Homebrew by running:

   brew install git
   

2. Configure your git by setting your username:

   git config --global user.name "Your Name"
   

   You should replace "Your Name" with your name.
3. Next configure Git to use your email, you should use the email associated with your GitHub account:

   git config --global user.email "YourEmail@email.com"
   

   Replace "YourEmail@email.com" with your email.

Install Visual Studio Code

You can go to Visual Studio Code's website and click download for Mac. You should be able to unzip it and drag it into your applications. That's it, now you can start coding!

Conclusion

Once you have these basic tools set up on your computer you will be ready to start coding whatever you like. You can always download more tools and software. For example, if you wanted to start doing Ruby development you could install rbenv and Ruby using Homebrew or WSL.

If you are a complete beginner starting to learn how to code I would recommend checking out my beginner developer series. The next article you should read is the How to use Git and GitHub article now that you have set up your development environment and are ready to start committing code.

In this article, I will try to teach you everything I know about functional programming. It is a powerful tool to have in your belt that is used in many different languages.

One of my favorite things about functional programming is its ability to prevent side effects. Side effects happen when there is a modification of some kind of state.

Often in object-oriented programming objects have a state which is mutated causing side effects. The reason we don't want side effects is they can cause unpredictable results depending on the state when a function is run. We want to limit side effects and only use them when necessary.

Pure functions

This is where pure functions come in with functional programming. These are functions that only rely on the input to the function to generate a predictable output. This means that if you pass in the same input one hundred times you will get the same result every time.

Pure functions are the basic building blocks of functional programming because of their simplicity.

They are easier to debug than object-oriented programming because you do not have to use methods that interact with states which can change.

Here is the simplest example of a pure function:

const double = (a) => a * 2

Now that you have a pure function which is a basic building block you can use them with other functions. This is because they have an input that will always return the same output.

Higher order functions

These are functions that can accept another function as an argument. You can use these functions to operate with other functions.

Common examples of these kinds of functions in javascript are array methods like map or filter. This is where functional programming is the most useful. When working with data which is a collection of objects in an array you can use pure functions to easily manipulate the results with fewer bugs because there are no side effects.

A simple example of a higher order function using the pure function double we created above would look like this:

const numbers = [1,2,3,4,5];

const doubledNumbers = numbers.map(double);

console.log(doubledNumbers); // [2,4,6,8,10]

First class functions

The next concept I want to go over is the first class function which will be used in the next section of this article.

First class functions are important since functions are treated like variables in functional programming. In functional programming, functions are often passed around and not always invoked.

They are called first class functions since they are treated as "first class" elements and act the same way as any other normal elements.

• Functions can be assigned to variables
• Functions can be passed to other functions
• Functions can be returned from functions
• Functions can be included in data structures e.g. array

The example above treats the double function as first class because it is being passed into the map function.

Currying

Last we have currying which is a way of creating functions that will return functions until it has all the parameters before doing something.

It will be easier to understand with an example.

We can use our double function from earlier and change it into a curried function.

The easiest way of doing this would be changing it from double to multiply and taking in two parameters:

const multiply = (a) => (b) => a*b

const multiplied = multiply(1)(2) // 2

However, now that we have this multiply curried function we can now easily recreate our double function by calling it with a two:

const double = multiply(2) // double = (b) => 2 * (b)

I hope this demonstrates the power that currying will have on your code. With currying you can:

• Clean up functions
• Have less repetitive code
• Have more reusable code

Conclusion

I hope this intro article to functional programming opens your eyes to the possibilities of using a new coding paradigm and inspires you to learn functional programming.

In future articles, I hope to expand on functional programming and write about an open-source library called CooperTS which was developed by the talented programmers at my current job.

If you didn't know I am a real estate broker turned software engineer and I hope to teach you everything I know about programming. Please follow me if you found this helpful to get more content like this.

With that, filler.ai was born. This was my first attempt trying to create a SAAS product and I definitely learned a lot of things when building the project that I want to revisit in the future.

Currently, it is functional but there are many improvements that need to be made. You can put in a topic and generate blog subheadings, full blog articles, article ideas, and video scripts. It does this using OpenAI's GPT-3.

GPT-3 is a language generator that can produce human-like text with different parameters to fine-tune the results. My goal was to have it generate human-readable blog articles targeting specific SEO keywords in articles that were 1000 - 2000 words long.

I did this by first allowing the user to generate multiple headlines using a topic which GPT-3 would then generate an outline for targeting specific SEO keywords based on the inputted topic. Next GPT-3 would make an article based on the headline generated and then combine it all into a single article. This would be displayed to the user in an editable rich text editor so users can customize and change the article.

Once the users were happy with the article they could download it as a PDF to send it to an editor or copy and paste it onto their blog. There is a possibility I could add an export as a markdown button in the future.

Where it all went wrong

When I launched it and a few people used it. I immediately got feedback about the quality of the articles. It also was not getting indexed by Google which was very concerning. These two issues were valuable learning experiences that I will share with you to take into your next project.

Problems with Articles

While the articles may look "readable" the content would be questionable. A lot of the time the AI could generate an article about a topic and state random incorrect statements as facts. The AI had no knowledge of whether it was right or wrong, and a lot of time it looked very authoritative until you tried fact-checking the article. Then you would realize that the AI had no idea what it was talking about.

The AI would also repeat patterns and make very similar articles. This is because it was trained on a set of examples and it would reuse patterns in the training data. As a result, different articles would end up looking very similar and may have repeated patterns or phrases.

GPT-3 also does not have any memory of previous articles that it has created. Suppose you want to generate two different articles about the same topic. The problem is that if you use the same topic with the same headings there is a very high possibility the article that is generated would look very similar to the previous article that was created.

I think there is still a lot of potential for AI-generated articles, but there would need to be a human touch. The article cannot be fully created by AI and would at least need to be edited by someone.

In my opinion, the best use for GPT-3 for blogging at the moment would be creating short sentences about topics to insert into your articles so you don't have to write every single line. This could help you improve the word count while still looking like a human wrote the article.

Not using server-side rendering

Another thing that I didn't account for was the lack of server-side rendering because I am using React. If I could go back and restart the project I would probably use Next.js to have server-side rendering.

Because React does not have server-side rendering Google does not rank it highly since it is responding with JavaScript instead of HTML. JavaScript is slower than HTML and as a result, a slower page will lower the ranking on Google Search.

I think server-side rendering would help grow the website by allowing Google to index the pages better. I could automatically generate articles that would be posted into the blog article route which would automatically create new blog posts with a press of a button.

The code is very similar and there doesn't seem to be a very big difference between the two. You will still have components, but your pages will be located in a pages folder which would represent a resource and a page for your website. To convert from a simple React app to Next.js app all you would have to do is do a few simple steps:

1. Convert React router links to Next.js links

   import { Link } from "react-router-dom";
   

   to:

   import Link from 'next/link'
   

2. Convert CSS to the Next.js styled-components

3. Convert code to take advantage of Next.js, for example, this would be using getStaticProps or getServerSideProps

Conclusion

It was a learning process and it was my first attempt at a commercial product, and the journey definitely isn't over. The next step would be converting the site over to Next.js and trying to improve the article generation. I'm not giving up and I hope you all follow me on my journey!

If you don't know my story I am a software engineer who used to be a commercial real estate broker in NYC. I quit my job to follow my passions and now I am 2 years into my career as a software engineer and loving it! If you want to know how I became a software engineer in only 3 months you can read that article here.

I'm sure that most programmers have used w3 school or stack overflow to quickly find the answers to any programming question.

I want to show you an extension I use in addition to w3 school and stack overflow that allows me to quickly find the answer to any technical problem I encounter.

Grepper

Grepper is a Google Chrome extension that shows the top-rated answer by thousands of developers every time you put a question into Google.

It is a community-driven platform so you can contribute as well as see answers from other developers.

For example, if you are wondering how to center a div, this is what comes up in your Google search above any links to pages or blogs.

This allows you to easily browse multiple alternatives and answers by other developers without having to browse multiple different stack overflow pages to find the same exact answer.

How to use Grepper

All you have to do to get started with Grepper is make an account and install the Google Chrome extension.Here is a link to the chrome web store download page.

Once you have your account all you have to do is use Google as you normally would and answers from developers will show up at the top of the Google search results.

If you want to contribute you can go to the answer page and answer questions that other developers have searched in google, but do not have any submissions yet. By doing this you can help the community and earn points while doing so!

There are belts that you can earn as you answer questions. You can improve your belt by writing answers that are read by other people. Currently, I am a brown belt at the time of writing this post and I have helped 66004 Developers find answers to 117464 problems.

Why you should use Grepper

By using Grepper there have been multiple times that I found answers to my questions without having to dig through different pages. I think that alone is enough for developers to at least give it a shot. I am not affiliated at all with Grepper. I think it is a great tool that developers should have in their pockets.

You can also earn points that you can redeem for NFTs. I am not very into crypto, but it is another gamification of the coding process that can make it enjoyable to use.

Grepper can also help progress your career. It's possible that a recruiter or software engineer sees your answer and connects with you. Having more reach is always beneficial. You never know who sees your answers and the power of serendipity.

Conclusion

This is my submission for Week 2 of 4 Articles in 4 Weeks I hope this post helps you! Please follow me on Grepper if you decide to try it out. Thank you for reading!

It takes a mindset switch from growth and learning to sales and marketing. Once you feel like you are ready to start applying I recommend applying to as many jobs as you can and trying to get to that 600 number as quickly as possible.

When I was applying to jobs, I completely stopped learning new things and focused on honing my interview skills through leetcode and applying to as many jobs as possible. I did something called creative outreach which is basically the same as networking. I connected to as many people on LinkedIn as I could and tried to get meetings and referrals.

Make sure you keep your Linkedin headline and links up to date with projects so when recruiters see your profile it is immediately obvious you are a software engineer. Since you don't have prior experience it will be very easy to screen out your profile. Your profile headline should say "Software Engineer" even if you don't have any experience yet. Link any projects you have done and include a link to your portfolio site and Github profile on your projects. Check this out to learn how to build a quick portfolio site for the job application process.

The most important advice I can give is to stay focused and schedule your time. You have to work efficiently. You want to get your first developer job as quickly as you can. If you slow down and take a vacation, it is very easy to fall off the wagon. If you stop practicing and coding it is very easy to fall into old routines and forget things.

Staying Organized

When I was in the job hunting phase, I used a technique called time boxing. This is a time management technique that made sure I used every day effectively during the job search. According to Parkinson's Law, "Work expands so as to fill the time available for its completion".

The concept was first introduced by James Martin, the author of the book Rapid Application Development, as a part of agile software development. To do it, allot blocks of time for a specific activity and do as much as you can during that time. Once that time is over you can stop working on it.

You will surprise yourself with how much work you can do in such a short amount of time. For example, if you allot 1 hour for leet code questions, you may be able to finish 2 or 3 questions. This is much better than planning on doing 1 leetcode question then switching gears and doing something else.

Creative Outreach

My strategy for creative outreach was to connect with people on LinkedIn and attempt to get a meeting to learn about their company and grow my network. I actually got my first job through a LinkedIn connection!

This also helps you in the future as well because if you expand your network you'll see posts from other developers when their companies are hiring.

I used a tool called PhantomBuster. It is an automated lead generation tool. What I did was scrape my 2nd and 3rd degree network for any recruiters or software engineers. Then I used PhantomBuster to connect with them with a message template asking for a meeting to learn about their companies. I did not ask them for a job immediately.

Another tool I used was called MixMax. They are an email tracking extension that connects with your Gmail. I liked making templates to help me quickly send emails. It also tracks when people open your emails so you can know they are seeing your emails.

This is where my previous experience doing commercial real estate sales came in handy. Just like in sales and brokerage, getting a job is a numbers game. Keep working hard and eventually, your funnel will land you multiple offers!

Conclusion

Thank you for reading my article. This was my submission to the 4 articles in 4 weeks challenge. Please leave me a comment if you're interested in learning more about automated lead generation or creative outreach. I gave a Q&A about how I landed a job in under 1 month at App Academy before I graduated. It goes over a lot of the same topics as this article. You can watch that here. The passcode is 2s=Pea3=. The recording starts 6 minutes in, but I think it will help you if you're trying to break into tech.

If you don't know my story, I am a bootcamp graduate who quit my job to become a software engineer.

There is often a lot of anxiety with Git, but if you understand Git and everything you can do with it, there is no reason to fear.

I will do my best to explain Git, how to use it, and provide a list of all the most common commands that you may need to use. Bookmark this page for easy access to the most useful Git commands.

What is Git?

Git is a version control system. It tracks any changes made to files in a directory and keeps a record of previous versions of these files. This allows you to easily revert code changes with bugs. It also enables collaboration. Multiple people can work on the same code and use Git to merge their code into one branch once they are finished.

It is extremely important to learn how to use Git if you want to land a job in the tech industry. In any professional setting, you will probably be using some form of Git to collaborate with other members of your team. In my personal experience, both the companies I worked at used GitHub.

Usually, Git stores your files locally, but with GitHub, you can have an online location where your files and version history are stored. When working with multiple people this is a godsend, although merge conflicts make me sad.

Conventional Commits and other Git best practices

When using Git it is important to realize that you aren't doing it for yourself. Git best practices are important because you will be working with other people and they need to be able to understand and follow what you are doing.

Make sure you are committing often. Having a history of your code is helpful for testing and bailing you out if something happens to any unsaved files. It's like saving at a checkpoint in a video game, you can always just go back to a save point if you reach a dead end.

Create multiple branches and don't always directly push onto master or main. This is important once you start collaborating with others. It prevents you from pushing up buggy code which gives a clear distinction between what is a work in progress and what is tested and merged into the main branch.

I like following Conventional Commits which is a convention to name which helps you create an explicit commit history. This makes it easier to read and allows you to use automated tools such as automating CHANGELOGs. You should check out the website and read about how it works. If you think it fits your coding style feel free to adopt it into your toolbox!

Working with others

I mentioned previously that you will need to work with others when using Git. This is where Git really shines because of how easily it lets you asynchronously work on the same code someone else is.

Pull requests are the preferred way of reviewing and merging code. Usually once you are finished with a feature on your local branch you will push up the code to the remote repository (Github). Then you will open up a pull request/merge request. This notifies others that your code needs to be reviewed. Usually, collaborators will leave comments that you will need to fix. Once approved you can merge your code onto the main branch.

Resolving merge conflicts is not as big of a deal as it may seem. It will happen all the time because multiple people will be touching the same files. This only happens with Git cannot automatically merge 2 branches. Usually, what you have to do is check with the other developer that made the change and collaborate to make a solution that works for both of you.

Branching strategies are the last part of working with others. There will usually be an already established strategy when you are joining a company. The most common strategies are single branch, feature branching, and git flow. Single branch strategies are usually for when you are not working with others and pushing all changes to a single branch. Feature branching strategies create new branches for each new feature or bug, then merge them into the main branch. Git flow has 2 ongoing branches, usually main and develop. Features are developed on the develop branch and then merged into the main branch as a release.

My most useful Git commands

git init

This command creates a new git repository and it is usually one of the first things you do when starting a new project.

git remote add remote-name repository-name or url

This is usually the second command you would run when creating a new project. Adds a remote tracking branch and remote-name is usually origin. You usually put the repository url after the remote-name.

Example: git remote add origin https://github.com/user/repo.git

git status

Checks your current changes in your directory and shows you what has been staged, what hasn't, and any new files.

git add directory

Adds the files in the specified directory to be staged for the next commit. You can specify files to add through the directory. You can do this command as many times as you like and add as many files as you like to be staged before you commit.

Example: git add . or git add ./folder

git commit -m "commit-message"

This command commits to staging with a message. Commits are saved changes and explain to others what you have done in the project. Good commit messages are an important way to provide useful information in case you did something wrong and need to look back to previous changes to revert code.

Below this list, you will find a short guide to conventional commits.

Example:

Bad commit git commit -m "do the thing"

Good commit git commit -m "BREAKING CHANGE: 'extends' key in config file is now used for extending other config files"

git commit -am "commit-message"

Combines the top 2 commands and allows you to add and commit to staging at once. This only works on files that Git is already tracking. If you added new files to your repository you will still have to do git add directory

Example: git commit -am "feat: Zhu Li, do the thing!"

git branch branch-name

Creates a new branch with your branch name. This doesn't switch you to your new branch, it just creates it. Branching is great because it allows you to create a branch from the main source code to work on code in an isolated location.

Example: git branch new-feature

git checkout branch-name

Updates your files in your local repository to match the files on the branch in the tree. Any changes on you make to your code will bet kept on this branch and can be commited to the branch.

Example: git checkout old-feature

git checkout -b branch-name

This combines the top 2 commands by creating a new branch and then switching to it. Equivalent to using git branch branch-name then git checkout branch-name.

Example: git checkout -b feature

git branch -D branch-name

Deletes a branch in your local Git. You should typically do this after you merge in your code on your branch to the main branch. You can always recreate your branch in the future if you need to. Git will also tell you if there are unmerged changes on your branch so you should not be afraid to delete old branches with merged code.

Example: git branch -D merged-branch

git reset --hard commit-hash

Resets your local files to the specific commit-hash. This is a potentially dangerous command if you have uncommitted changes. Any untracked files or directories will be discarded and you will not be able to recover them

Example: git branch -D 4c85240745b8ae1fe405ad5893ad66cd2a8afee3 or git branch -D HEAD (resets your files to HEAD)

git push

Pushes your code from your local repository to the remote repository. If you are using GitHub the files in the repository will reflect the same files as your local repository after pushing.

git push --force

This is the same command as above but it allows you to rewrite the history on the remote repository with your local history. When doing this you must be careful because it may be easy to delete history and code accidentally, especially if you are working with other people.

git push --set-upstream remote-name branch-name repository-name

Upstream branches are the remote repository's way of tracking your local branch. They are also called the remote tracking branch. You have to set up an upstream branch before you start pushing your code to the remote repository.

Example: git push --set-upstream origin new-feature

git push -u remote-name branch-name repository-name

This does the exact same thing as the above command

Example: git push -u origin new-feature

git fetch

Fetch downloads commits, files, and refs from a remote repository on your local repo. It allows you to see what others have been working on and lets you test their code on your local repository.

git pull

Incorporates changes from a remote repository into the current branch. If your current branch is behind the remote, then by default it will fast-forward the current branch to match the remote.

git diff commit-hash-source commit-hash-destination

Diff shows the difference between a commit and one of the commit's ancestors. You use the commit hash in the command to specify which commits to compare.

Example: git diff 0da94be 59ff30c

git merge branch-name

Incorporates any changes from a different branch into your current branch. Git will attempt to automatically merge any commits for you. However, if there are files that are changed by both branches you will need to manually resolve any conflicts.

git cherry-pick commit-hash

Takes the changes from a specific commit and adds them to your current branch. You specify the commit by the commit hash. This is great in a team setting where you can cherry-pick specific pieces of code to test or use in your own local repository.

Example: git cherry-pick 59ff30c

Conclusion

Before you can collaborate with other developers knowing how to use Git is a prerequisite. That means if you're trying to break into the tech industry learning how to use Git is imperative.

Now that you know how to use Git the next thing you should do is create a developer portfolio showcasing all your projects. You can read my guide on that here.

Even if the recruiter or hiring manager doesn't read everything on your website, a quick scan is enough to set you apart from everyone else who doesn't have a portfolio site.

If you are a beginner developer there is no reason why you shouldn't have your own site. It's free, simple, and quick to set up with Github pages. You can even add a custom domain for around $15 a year with no monthly hosting fees for some extra pizazz.

Here is a step-by-step guide on how to make your own portfolio website. This tutorial will be for complete beginners or people who do not know how to code who want to create their own portfolio websites. This will be extremely easy to follow, and I would encourage experienced developers to skip steps you already know how to do. You will not need to have any coding skills to follow most of this tutorial.

Setting up your Github repo for your page

First, you have to set up your Github repository which is where we will push all of our code.

My next article is a complete guide for git best practices and using git professionally. You can read my Git and Github tutorial here.

1. Click the "+" button on the top right of the page on Github. There should be a dropdown that shows up, then press "New Repository".
2. Use the "Select an owner" dropdown to choose which account will own the repository.
3. Name your repository using this naming scheme<user>.github.io. So since my user name is edmondthui I will name my repository edmondthui.github.io.
4. Make your repository visibility public, check whether you want a read me, and then create your repository.

Setting up Git locally

Now that we're past the boring part we can open up our IDE. I like using VS Code but you can use any editor you like.

1. First we have to set up our Github repository locally. In a new directory type git init into the terminal to start tracking your current directory with git.
2. Copy the quick setup link from Github and run git remote add origin <your link here>
3. Optional - you can rename your branch to "main" by running git branch -M main. GitHub uses "main" as the name of your primary branch. Git still defaults your branch to be called "master".

Choosing a template for your portfolio website

We will be using a template to make our website. I believe that most developers should use a template when building their personal portfolios.

The amount of time it takes to make a beautiful website is not worth it, especially since this guide is targeting developers who are trying to break into the industry to get their first tech job. There are more important things to do, such as portfolio projects and improving your interviewing skills.

What we are looking for is a template that has the following things:

• An easy-to-customize setup
• Eye-catching responsive design
• A contact form

You can browse different free themes here and choose what you think would work the best for yourself. I will be using this theme called Profile for this example.

1. Download your theme and unzip the files into the folder where you created your git repository.
2. You should see a file called index.html. This will be the file we will be editing and customizing with all your information. Click on it and you should be able to edit the contents of that file.
3. You can view your progress by opening the index.html file in chrome by double-clicking it. You will want to inspect your changes ever so often to make sure you aren't breaking anything.
4. We will only be editing the information between opening and closing HTML tags. The vast majority of tags must be opened <tag> and closed </tag> with the element information such as a title or text resting between the tags. You can change the information between the tags to whatever text you want to display. Replace all the information on the index page template with your information. Make sure you do not accidentally delete any tags or change the structure of the file.
5. Update any links with your personal links. You can do this by replacing wherever it has href="<your link here>"
6. If you need to delete any elements find them in your editor and delete both the tags containing all the information you want to delete.
7. Replace any images in your image folder with new files making sure you keep the names of the files the same.

Once you are happy with how your page looks you're ready for the next step.

Pushing your code to Github

The next step is getting all your code to Github so we can use Github pages to create a static site so people can see your website.

1. Run git status, this should show all the changes you have made. Confirm there are changes before continuing.
2. Run git add . to add all the changes from your directory to be staged for the next commit. You can rerun git status to make sure your files have been added.
3. Now that you have staged your changes you have to commit them by running git commit -m "<any message here>"
4. Push your code to Github by running git push origin main if you changed your branch name to main or git push origin master if you haven't changed your branch name.
5. You should now see the code in your Github repository!

Creating a Github page for your repository

The last step is to make a Github page. Your repository needs to be public if you want to have a Github page with a free account.

1. Go to settings for your repository on Github on the top right of the page.
2. Click pages on the left side of the settings page.
3. Select the main or master branch as the branch for your page, then click save.
4. Click the checkbox to enforce https.
5. Thats it! Your site should be live. Here is a link to the demo site that I made in this tutorial.

Optional - Adding a custom domain and sitemap for SEO

Custom domains are a great way to build a brand around yourself. It is another factor that can help set you apart from other developers. I do the exact same thing with my blog at https://www.blog.edmondhui.com/.

Using a custom domain with a Github page

1. On the same page in the repository settings there is a field called custom domain. If you own a domain you can input it there. You can buy a domain on Godaddy or Google Domains for around $15. Then, click save.
2. Next go to your PROFILE settings and click pages.
3. Click "add domain" and then input your domain.
4. Now go to manage DNS wherever you purchased your domain and add the A records you got from Github. You can copy and paste them here:

   185.199.108.153
   185.199.109.153
   185.199.110.153
   185.199.111.153
   

   

Using Github actions to automatically create a sitemap

If you want to try to rank your portfolio site you will need to submit a sitemap to Google to index your website. To do this you will need to use a Github action.

1. In your repository click "Actions"
2. Click "New workflow" to create an automated action
3. Then click set up a workflow yourself

4. In the workflow editor paste this code. Change the branch name in the code to match whatever is your primary branch. Currently, it is set to [main]. You will also have to change the base-url-path to point to your url.

   name: Generate xml sitemap
   on:
   push:
    branches: [main]
   jobs:
   sitemap_job:
    runs-on: ubuntu-latest
    name: Generate a sitemap
   
    steps:
      - name: Checkout the repo
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
   
      - name: Generate the sitemap
        id: sitemap
        uses: cicirello/generate-sitemap@v1.8.4
        with:
          base-url-path: https://edmondhui.com/
          include-pdf: false
   
      - name: Output stats
        run: |
          echo "sitemap-path = ${{ steps.sitemap.outputs.sitemap-path }}"
          echo "url-count = ${{ steps.sitemap.outputs.url-count }}"
          echo "excluded-count = ${{ steps.sitemap.outputs.excluded-count }}"
   
      - name: Create Pull Request
        uses: peter-evans/create-pull-request@v3.12.0
        with:
          title: "Automated sitemap update"
          body: >
            Automated changes. Sitemap updated by 
            the [generate-sitemap](https://github.com/cicirello/generate-sitemap) 
            GitHub action.
          commit-message: "Automated sitemap update."
          author: Edmond Hui <edmond.t.hui@gmail.com>
          committer: Edmond Hui <edmond.t.hui@gmail.com>
          branch: create-pull-request/sitemap
          delete-branch: true
   

5. Click "Start commit" and "Create new file" to create this Github action. This will run every time you push to either "main" or "master".
6. Now you can go to Google Search Console and add your sitemap to your property.

Conclusion

Congratulations on making it to the end of the article! Hopefully, you will have your very own portfolio site that you can proudly share.

Even if you are not on the job hunt, having a personal portfolio website is extremely useful. Portfolios can help you professionally or help build your brand. For entrepreneurs, this can unlock opportunities and help you find business partners or investors.

I hope you enjoyed this beginner's guide to creating a personal portfolio. If you are a beginner developer I recommend reading my article about whether you should join a bootcamp or self study.

As someone who recently abandoned his career to become a software engineer, I want to share my first-hand experience transitioning into tech to inspire new developers and help them make informed decisions.

If you are thinking about becoming a software engineer you probably have many questions. I'll try to answer the most common ones with my personal perspective and a modern lens as someone who attended and graduated from a coding bootcamp during the Covid-19 pandemic.

The most important step for success, making a plan

You may have heard that becoming a software engineer is an easy way to increase your income. Many of my friends told me, "just learn how to code" as an easy way to secure the bag. When I started my coding journey, I was not prepared for the amount of work that was required to make the transition into tech.

Becoming a software engineer through coding bootcamps may not even be possible depending on your current situation. Some people may not be able to dedicate the time required to succeed and may need to take a different route. It definitely isn't as easy as everyone makes it out to seem. If it were that easy, then it wouldn't be valuable.

Basic programming skills are easy to pick up. I learned some code at a young age and was always interested in tech. I even took multiple intro programming courses and an advanced placement computer science course in high school.

When you get into the job market, companies aren't looking for warm bodies that know how to code. They are looking for a specific person with a niche skillset who can help solve problems they are facing. This comes with experience and niche knowledge about coding languages and their relationships with other libraries and frameworks.

This is where many bootcamps fall short. Bootcamps have a hard time teaching the idiosyncrasies of software engineering. You can only learn this through making mistakes and coding without guard rails.

This is why it is extremely important to continuously learn as a software engineer.

Do extensive research before pulling the trigger because once you start learning how to code, you have to be fully committed. People who think it will be enough to code part-time WILL NOT SUCCEED. You will have to sacrifice to make this switch. Whether this is quitting your job, not going out on weekends, etc. You will have to be prepared to make changes in your lifestyle to put aside some time to study or join a bootcamp.

You have to put in the time.

Should you do a bootcamp?

According to the Career Karma 2021 State of the Bootcamp Market Report, the average coding bootcamp cost is $11,272. Many bootcamps have payment plans that can help you stomach this cost. At App Academy, I did not have to pay for my tuition until I landed a job. App Academy also offers a discount for students that want to pay upfront.

According to the Council on Integrity in Results Reporting (CIRR), 79 percent of bootcamp grads find a job within 180 days of completing the program. This data is based on reports from 46 different coding bootcamps. Keep in mind that many bootcamps hire their own graduates as teachers so this number may be inflated. You can also google the Lambda School lawsuit as well. "Scambda School" inflated its outcome metrics and used other deceptive marketing practices to swindle students hand over fist.

In the context of the U.S., Course Report (which analyzes the bootcamp market) reported in 2021 that the average bootcamp graduate earns a starting salary of $69,000.

These statistics sound great, but will a bootcamp work for you? I'm here to give you my thoughts on whether you should do a bootcamp because they definitely work if the conditions are right (see me for example).

The biggest hurdles to doing a bootcamp are the time commitment and the high costs of tuition. You will have to dedicate 9 - 12 weeks with large blocks of time where you cannot be interrupted to successfully complete a coding bootcamp.

When going into App Academy, I fully expected to be able to continue working while I did the coursework. I quickly realized that this was not going to be possible. There are large opportunity costs when going the bootcamp route and I want to explain the full picture so readers will be able to make an informed decision.

Sigma coding bootcamp student grindset 📖🕖🕛🕟🕗

Take a look at a normal day at a bootcamp.

There were 51 minutes of materials we had to go through, 34 minutes of additional resources we had to read, 1 hour 30 minutes of homework, and 7 hours of projects. This is also on top of the lectures and questions we had to go through every day. Let's say we had a 1 hour lecture, that would mean we have committed 10 hours and 55 minutes to the bootcamp, JUST TODAY.

Students are expected to spend 80 - 100 hours per week coding and learning throughout the duration of the course. There is no sugar coating it. If you are in a reputable program you will be expected to meet minimum coding standards. App Academy had tests every few weeks and if failed, you would be moved to a later cohort. If failed again you would be removed from the program and your deposit refunded.

Luckily, I had my parents who were there to support me throughout my journey. I would not have been able to survive without them. Having the comfort of home-cooked meals helped my mental health and allowed me to persevere. A support system you can turn to if things are becoming too much to handle is extremely helpful.

I also moved in with my parents at the time so I didn't have to worry about rent, utilities, or other expenses. My only concern at the time was learning how to code.

Selling the shovels to the next gold rush

"The people that made the most money in the gold rush were selling shovels, not digging gold"

In the modern era, there is nothing that a bootcamp or school can teach you that you cannot teach yourself for free. Bootcamps package this free info into a neat package and then charge you an arm and a leg.

Many bootcamps require payment upfront and don't guarantee a job. Others like App Academy offer ISAs or income share agreements that require you to pay a large percentage of your income after you land a job. These often cost more than paying upfront, and it's possible you'll net less than your previous job after paying tuition payments!

In my opinion, bootcamps only make sense in situations where you can give up the next 1 - 2 years to dedicate to transitioning into the tech industry. If you change your mind or cannot continue you will lose a lot of time and money with NOTHING to show for it.

Should you self study?

At my first job out of bootcamp I met a dev named Brodie. He was self taught and is still the most talented programmer I have met. It goes to show you can become an amazing developer without any formal technical education.

Previously, he was a banker at Wells Fargo and taught himself HTML, CSS, Javascript, and PHP. I would say his ability to learn and pick things up quickly was what impressed me the most. When I asked him his thoughts on self studying this is what he said.

I'm happy that I went into tech but I'm not sure I would necessarily recommend it unless you can go all in for the first couple years. It just seems like there are so many concepts to learn and things to study for interviews that it's much harder to break in now than a few years ago.

There are so many more CS and bootcamp grads that you are competing with that you have to somehow stand out amongst them which the only way is just endless hours of work.

It seems that self taught developers have the same problems bootcamp graduates do, but they have even more competition. The only perks of self studying are that you can do it on your own schedule and it's free. Graduating from a bootcamp does not give you any inherent advantage in the job search. It all comes down to your projects, portfolio, and interviewing skills. Bootcamps help you prepare for your first job quickly and efficiently while learning on your own may take a lot more time as you figure things out.

You should self study If you are someone who can keep yourself accountable. You have to be confident that you can persevere and succeed. Motivation will get you started, good habits will keep you going. Before you know it you will be coding every day, just like how you brush your teeth every day.

Another thing that Brodie said piqued my interest. There were so many things to study. You may not know what to start on. It's so easy to get analysis paralysis. Bootcamps help because they guide you and basically hold your hand through the whole process. When self studying, you have to identify what you are deficient in, and what you need to improve on, then create your own curriculum.

Free resources for self taught developers

My suggestion to people thinking about self studying would be to just start. Code as much as you can, as often as you can.

Listed below are some of my favorite resources that may help a self taught developer:

• freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications and local organizations that intend to make learning web development accessible to anyone.
• The Odin Project (TOP) is an open-source curriculum for learning full-stack web development. We help users learn the skills and build the impressive portfolio of projects they need to get hired as a web developer.
• With App Academy Open you’ll get free access to App Academy’s entire 24 Week Online Software Engineering Program curriculum (that's over 500 hours of material!), which has placed thousands of people in software development jobs. This is exactly the same course that I took and paid ~$30,000 for.
• 100 days of code is a challenge that will help you become a better programmer. It helps you build momentum and makes coding a habit you look forward to. You will also meet like-minded individuals with similar goals to help motivate you to succeed.
• Javascript 30 is a free challenge that helps you become more comfortable with javascript by walking you through simple projects. This is for beginners who already know the basics of javascript.
• Lastly, this is a GitHub repository called Project Based Learning that compiles some of the best free coding tutorials available online. I believe that the easiest way to learn is to do a project. With project based learning you can do projects in any language of your choice. I highly recommend checking the repo out and giving it a star ⭐ (I am not affiliated with them).

Conclusion

If you are still determined to become a software engineer after reading this article, it shows you are seriously committed. I believe if you try to get into the tech industry with the wrong intentions you will not have a good time. It is not as easy as going to class for a few months and then coming out with a 6 figure job.

Even after you land your first job as a software engineer or developer that is just the start of your journey. You cannot know everything about best practices and code standards after 3 months of learning. I have gotten hate saying I was not a "software engineer" because I only had 3 months of experience.

I have been doing this for 2 years now and I am constantly learning and growing. I think that is what truly makes you a "software engineer". Having the courage to continue writing code and improving is what will set you on your path to achieving your goal.

I am currently a software engineer working full-time in the New York Metropolitan Area.

Two years ago during the advent of COVID-19, I was an Associate Director at a real estate startup called Squarefoot in NYC. This was similar to being a real estate broker and was a lot of sales. At the time, the future looked bleak for commercial real estate. Nobody knew how long lockdowns were going to last and what the industry would look like on the other side of the pandemic.

So, I thought "YOLO" and dove into learning how to code. Within a few months, I started as a junior software engineer at a tech startup. A lot of my friends were interested in my journey, so I will share my story of how I became a software engineer with you. I hope this inspires you to learn how to code. If I could do it, you can too.

Background

I am 24 years old and I'm ashamed to say my goal used to be to make as much money as possible. The early years of my professional life were always a grind towards the next goal. I graduated college one year early and went straight into commercial real estate brokerage thinking this was my ticket to wealth and early retirement.

I did this for 3 years before I realized I wasn't happy. It only took a global pandemic and stringent lockdowns for me to slow down enough to realize that 😅.

Around this time I was working from home and I started my first blog called Coffee Informer. I started off by learning basic CSS and HTML and teaching myself through Google. This website that I made from nothing started getting thousands of readers. I was immediately hooked.

Creating a website and attracting readers was the most rewarding feeling in my 24 years of existence.

That's when I knew I had to quit my job and pursue web development.

How I transitioned

There are so many resources available online to help you learn computer science principles. I believe everyone can be a developer if they put in the time and effort.

Reading resources online was how I started out learning how to code, but I felt like there was too much to learn at one time and needed some guidance to prioritize my learning. That is why I decided to join a coding bootcamp.

I applied to App Academy and studied for the entrance exams which were in Ruby. They provided about 20 hours of material and I self-studied for about a week before my technical interview.

According to App Academy, they have a 5% acceptance rate, but that seems overly exaggerated. As long as you know your coding basics such as array and string manipulation you'll get into a bootcamp and start your journey to becoming a software engineer.

During all of this, I was still working my full-time real estate position. This was a few months into the pandemic. I created a plan to obtain new clients and exclusives. I read leases to find ways business owners could get out of their lease, and offered to sublease their offices and move them into smaller spaces. This plan was very successful and helped me generate a lot of business due to the uncertainty in the commercial real estate industry at the time.

I had a hard decision to make. There is a saying "a bird in the hand is worth two in the bush", but is it worth it if the bird is biting your hand and causing you pain? Ultimately, I chose to let go of the bird and pursue my passion for tech.

By the time I had left, I was the top broker in Q3 of 2020, and I asked for a recommendation to immortalize either the best or worst decision of my life. Below is a copy of the recommendation I received (💪 flex but ok).

To Whom it May Concern,

I write to provide the strongest recommendation I can for Edmond Hui’s acceptance into your program.

Edmond was a member of my brokerage team at SquareFoot, a technology-enabled real estate company, and he distinguished himself in multiple ways. These include:

His work ethic was simply exemplary. Top 5% I have ever worked with. Edmond’s curiosity and his capacity to retain information allowed him to on-board and become a productive member of our team in a very short timeframe.

He is one of the most open-to-feedback team members I have ever worked with; he takes feedback constructively and immediately makes adjustments where necessary.

Edmond was also generous with his knowledge across our team; one of the things I remember most about him was him taking his personal time to educate our team members on the dynamics of investing in public markets, which is a passion of his. He got nothing out of this himself except the satisfaction of being able to share knowledge about a topic he is extremely well versed in with others who were interested to learn. He has a generosity of spirit that is rare in my experience.

He is an excellent problem solver, and approaches problems in a constructive way as challenges that need to be overcome. The NY real estate market has been greatly affected during the pandemic, and our team’s production suffered. Edmond, through a combination of persistence, creativity and humility was able to become our top broker during Q3 of 2020, outpacing individuals that have been in the industry for years longer than he had been.

Again, I believe Edmond would be a great asset to your program. If you have any questions about his candidacy you can reach me at ****@**********.com or ***-***-****.

All the best,

Phil Sofia

Now that I know how this story ends, I do not regret my decision one bit.

Out of the frying pan into the fire

Once I was accepted into App Academy, there was no turning back. We covered topics at blistering speeds and I was spending all my time dedicated to learning how to code.

I was breaking out of my comfort zone and I could feel myself inching toward my goal.

During my time in bootcamp, I didn't do anything special. I showed up. It's like they say 80% of success is showing up. I did all the homework, followed the lectures, did the readings, and completed the projects.

The process of breaking down complex concepts into smaller pieces made it easier for me to wrap my head around them. I broke down my goals into bite-sized pieces so I could keep track of my progress day by day.

The biggest obstacle I encountered was becoming a better communicator and explaining technical concepts. We did a lot of pair programming when working on projects at App Academy. I thought I understood everything, but I had a hard time articulating what I had learned.

Looking back, it was because I didn't fully grok the concepts. I needed to break them down into simpler blocks and understand them on a deeper level.

I plan on sharing my thoughts on coding bootcamps in another article so I can go more in-depth about the pros and cons.

What I learned

The 3 months at the boot camp were over in a flash. It was hard work, but definitely worth the effort. Completing the bootcamp taught me people are much more capable than I realized.

In 3 short months, we learned everything necessary to become software engineers. I felt like I could achieve anything I put my mind to.

What the bootcamp taught me wasn't just Ruby, Javascript, or PHP, but a way of thinking. How to persevere and find answers, even when it isn't obvious.

Imposters syndrome is a real thing that many fresh graduates deal with. Imposters syndrome is very common in tech, and according to a report 58 percent of employees at Amazon, Facebook, Microsoft, and Google report feeling like they don't deserve their jobs.

You have to remember this is a natural part of learning and you will gain confidence as you continue to learn and use your new abilities.

In conclusion

My advice to anyone thinking about going into tech is, just do it. Believe in yourself and believe in the process.

You do not need formal education. Find a group of techies and ask them questions. Dive into the tech community and find people who are excited to help. All you need is a laptop and an internet connection to get started, so what's stopping you?

Feel free to reach out to me and I'd love to answer any questions or mentor you in your transition into tech!

“All our dreams can come true, if we have the courage to pursue them”, Walt Disney