·
6 min read

FE Dev Job Speedrun - Part 1: Starter Kit

Table of Contents

This series is a guide for aspiring front-end developers to get and keep a job as quickly as possible.

A degree is not required to be a frontend developer.

It is highly skilled work, but there’s no degree (not even Computer Science) with a strong overlap with frontend development.

As a result, many hiring managers will not typically insist on a “relevant” degree. In general, a frontend developer with 1.5 years of relevant professional experience is a better hire than a Computer Science graduate with no relevant experience.

Step 1: Acquire an Apple Silicon Macbook

Web dev is simply a lot easier, more convenient and faster on a Mac, because:

  • a lot of webdev tools are Mac-only
  • a lot of tutorials/guides assume Mac or Linux
  • Macs are Unix-based, so you can use the same commands as on a server
  • Macs are more stable and less prone to issues during development
  • Macs have more predictable hardware and software, so tutorials, installers and guides are easier and less likely to run into trouble
  • an interviewer will take you more seriously when you share your screen in your technical interview
ℹ️

This is obviously an inconvenient prereq - but remember: this is a speedrun.

If money is an issue, please note that:

  • you’d get a job way faster by working minimum wage until you can buy it than by trying to learn on a Windows laptop
  • while Linux is adequate, you’ll lose so much time and energy on setup and troubleshooting that you would still be better off selling your laptop, earning the difference and buying a Mac
  • these days, a secondhand MacBook is actually more affordable than an equivalently powered Windows/Linux laptop

Other types of software engineer may not need a Mac, but in frontend it’s a much bigger advantage.

Best value for money options (at time of writing):

  • ÂŁ500 the 2020 M1 MacBook Air is the best value for money
    • earlier M1 MacBooks are good, but the keyboards break often and Apple repairs are pricy
  • ÂŁ300 for a secondhand Mac Mini M1

Step 2: Set up your Mac

  1. Install Homebrew - the package manager for macOS. It’s the easiest way to install software on macOS. Open Terminal and run:

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

    You will soon be wondering why we’re using the command line so much.

    The reason is that the command line is the most powerful tool in a developer’s arsenal.

    It’s the most efficient way to interact with your computer, and it’s the most common way to interact with servers and other computers.

    If nothing else, knowing the basics will help you look like you know what you’re doing.

    This also automatically installs Git - a version control system that 99% of software engineering jobs use.

  2. Install VSCode (or a derivative, like VSCodium). For a long time, there was no consensus on the best web development code editor. But VSCode has won. It’s the most popular, has the most plugins, and has excellent power features built-in.

    brew install --cask visual-studio-code
  3. Install Node.js. This allows you to run JavaScript outside of the browser, on your computer. Most frontend development tools are built on Node.js.

    brew install node
  4. Install a better development browser. Safari does not have excellent devtools. Chrome is well known as a privacy nightmare, so may represent a red flag to your technical interviewer.

    Good options:

    • Firefox Developer Edition. Firefox has a good track record of following web standards accurately. It has excellent devtools.
      brew install --cask firefox-developer-edition
    • Brave is a privacy-respecting browser that blocks ads and trackers by default. Brave is built on the same base as Chrome, and has good devtools.
      brew install --cask brave-browser
  5. (Optional) Install a better terminal. The default terminal on macOS does the basics well, but is limited in features.

    Good options:

    • Kitty - a terminal emulator that is very fast and lightweight, with a reusable config file.
      brew install --cask kitty
    • Alacritty - a terminal emulator that is very fast and lightweight.
      brew install --cask alacritty
    • iTerm2 - the most popular terminal emulator for macOS. It has a lot of power features.
      brew install --cask iterm2
  6. Take some time to learn your new tools. At a minimum:

    • A video tutorial of VSCode’s many features
    • Introduction to terminal commands
      • a general command line tutorial (it will demystify a lot of things you’ll see in the future)
        • including basic commands like cd, ls, pwd, mv, cp, rm, mkdir, rmdir
      • learn the basic Git commands like git clone, git add, git commit, git push, git pull
      • learn how to survive nano (or vi/vim) - text editors that run inside the terminal (you’ll end up using them one way or another)
      • a UNIX filesystem tutorial (it will help you understand how your computer stores files)
    • A video tutorial of your new browser’s devtools
  7. Give your terminal user-friendly superpowers.

    Install and configure one of the following (they all do the same kind of thing):

    At a minimum, they should:

    • show you the current directory

    • show you the current git branch, e.g.

      cd ~/Documents
      mkdir example-repo
      cd example-repo
      git init

      Your prompt should look something like this (you should see main or master displayed):

      cli prompt showing main

    • they should give you contextual suggestions when you press the Tab key

      cli prompt showing suggestions

      ℹ️
      In particular, getting git contextual suggestions to work will save hours and takes a minute to set up.
    • they should at minimum provide a suggestion for a command to autocomplete with

      cli prompt showing autocomplete

    • they should give contextual text highlighting your commands as you type them

      cli prompt showing command highlighting

Step 3: Profit

Right - you’re all set up. You have the tools you need to become a professional web developer.

In the next part, we’ll suggest a learning path (with tried and tested tutorials and games) that will get you job-ready as quickly as possible.