A Beginner's Guide to Web Dev Work Part 1: An Overview
Published 10 Mar 2021
This is Part 1 of a series I'm writing for a dear friend who's been teaching herself how to code. It's intentionally aimed at folks who are new to this industry. I'm trying to write down and clarify a lot of the knowledge that's just assumed when you start a job or look to contribute to an existing project.
Quick heads up: You won't be writing any code from this post, this is just setting the stage. If you want to jump straight into code, head to Part 2.
End Goal #
At the end of this series, you should have a solid understanding of how to set up your machine to run a project with a Node.js development server, pull down that project from Github, make changes, and push them up to make a pull request. You'll also gain some experience working on the command line.
You can expect to learn a bit about:
- What Sass & Node.js are
- How to work with git and GitHub (the basics of version control)
- pull down a proejct
- commit changes
- push them up
- make a pull request
- How to setup Node.js on your machine
- How to work on a project with others
- A computer (Instructions presume MacOS. This should all be possible on Windows, it would just require a little more initial setup.)
- Github account
- Code editor (I recommend VS Code)
The Project #
Why is this so complicated? #
There are countless tools and frameworks to abstract away some complexity, or formalize particular patterns, and/or save time by doing a bunch of setup for you. These tools can be powerful, but they also make for a steeper learning curve.
The project we're digging into is somewhat simple, but there are two complicated things happening in it's current state:
First, it uses a CSS preprocessor, Sass. A preprocessor is a program that takes some input, transforms it, and then outputs that data to be used as an input for something else. We'll be working with Sass files when writing our styles, but in order to see something in the browser, our Sass needs to get converted into plain CSS.
At the time I started building this site, a preprocessor was the only way to use variables for styling. Using a preprocessor adds initial setup complexity, but it also provides useful features that helps you write and maintain styles more efficiently. It's not as crucial these days as CSS continues to add new features like custom properties, but preprocessors are still very commonly used.
Local development #
When you go to a website, you're typically viewing the results of running a bunch of code, not the exact code that was written. (Remember, we can't maintain apps and websites easily writing just vanilla HTML). We want to mimic that scenario so you can test the website on your computer (often referred to as testing "locally") and get immediate feedback after making changes. If you change a background color in your CSS and have to manually refresh the browser to see them, you'll get tired of that real quick. So what if the project could just handle that automatically?
The good news is, it's very possible. There are many different ways to achieve this outcome, but I'm using a couple Node.js packages to accomplish this, purely because that's what I'm familiar with.
What you will need to run this this project #
The first thing you'll need is Git. Git is a version control system, and makes it easy to save a history of your project over time. Really, anything could be put in version control. Photoshop files, photos, pdfs... if it exists as a file on your computer, git can store an exact snapshot of that file and keep adding new snapshots over time as you commit changes. But it's particularly handy for any sort of basic text file (like code files), as there are numerous applications that will show you the contents of those files, and a diff of the changes.
This is how most software projects are managed. Git isn't the only version control system out there, but it is by far the most popular, so that's what we'll be using.
To add an additional complication to this, we're working with a project hosted on GitHub. Github is a cloud service that provides useful visualizations of git data and mechanisms for adding, reviewing, and saving or rejecting changes to project. This makes it much easier to to collaborate with others on projects. So you'll need Git on your machine to make changes and create data that will then get pushed up to GitHub, where you'll create a pull request to show the changes you want to add to the project.
So, now that we've covered exactly why this is so complicated and what you'll need, let's get started. In the next post, I'll cover how to get your computer ready to pull down and run this project.
On to Part 2: Git & Github
Back to Thoughts