Home > Chapter Review and Exercises > Chapter 20 - Modern Web Dev Tools
Chapter 20 introduces a number of tools that are central to the web developer toolkit. They help make development work more efficient, code more robust, and teamwork easier. Because many developer tools work only via the command line, the chapter begins with an introduction to the command-line interface.
From there we look at CSS preprocessors and postprocessors for writing CSS efficiently and accurately. We’ll also see tools like Grunt and Gulp that automate common repetitive tasks in the production and publishing process. Finally, no discussion of the modern developer workflow would be complete without an introduction to Git, a tool for version control that enables a team to collaborate on a code project.
In Chapter 20, you will learn the following:
Command-line interface
The fundamentals of the command-line interface (CLI), including identifying the prompt and basic commands for navigating the file system.
Pre- and postprocessors for CSS
Preprocessing languages (such as Sass, LESS, and Stylus) that provide a programming-like syntax (such as using variables and “mixins”) to make writing styles more efficient. Files written in a preprocessor language must be compiled into standard CSS before being sent to a browser.
Postprocessor tools take standard CSS files and perform optimization functions such as checking for errors, improving cross-browser consistency, reducing file size, and more.
Over time, pre- and postprocessors have begun handling a lot of the same tasks, so their roles may overlap.
Build tools/task runners
Most professional web developers use some sort of build tool or task runner (like Grunt or Gulp) to automate the many repetitive tasks associated with creating web sites.
Common tasks for automation include concatenation, compression, checking for errors, optimizing images, pushing to Git, and more.
Many sites are created with templates for each page type and content data that gets poured in on the fly.
Git
Version control systems (VCS) keep track of versions of work and allow creators to go back to earlier versions and share code source. with a team.
The most popular VCS in the web world is Git.
GitHub is a service that hosts Git repositories and provides a helpful user interface to the Git command line functions.
Basic Git terminology such as: repository (repo), commit, working directory, staging, branch, master, fork, merging, remotes, cloning, pushing, and pulling.
command-line interface (CLI)
A way to interact with programs on the computer by typing commands into a terminal application.
shell
The program that interprets the commands you type into a CLI. There are many shell programs, including bash, the shell that comes on Mac and Linux computers.
terminal
The program you use to type commands into. Terminal (with a capital T) is the name of the command-line tool on macOS.
prompt
A series of characters indicating the computer is ready to receive a command.
flag
When added to a command, it changes how the utility operates, like an option or a preference.
argument
Provides specific information required for a function to run.
dotfile
Files (beginning with a dot or period character) that are part of an operating system and are kept hidden from view.
preprocessor
A programming-like syntax for writing CSS such as Sass, LESS, and Stylus. Files in preprocessor languages must be converted (compiled) into standard CSS for the browser.
postprocessor
A CSS optimization tool that takes a standard CSS file and optimizes it. Postprocessor tools are available for reducing file size, supporting old browsers, checking for errors, and much more.
compile
In preprocessors, compiling is the translation process that converts specialized syntax to standard CSS rules.
variable
A value you can define once, then use multiple times throughout a document.
mixin
In the Sass preprocessor, a set of styles that are saved and named as a group so they can be used throughout the style sheet.
build tool/task runner
A tool that automates repetitive production and publishing tasks, such as Grunt and Gulp. Build tools are used through a command-line interface.
version control system (VCS)
Software that keeps track of versions of work, allowing you to go back to earlier iterations and also share files.
Git
A distributed version control system commonly used in web production.
repository
Where past versions and a change history of the project are stored in Git.
commit
A change to a file that is logged in with a unique ID number in Git.
distributed version control system
A system that allows users to make copies of files to their own computers and work on or offline.
working directory
The directory of files on your computer where you do your actual work.
staging
Adding a file to Git so it can be tracked. Staged files are stored in a local index of files that will eventually be committed to the repository.
branch
A sequential series of commits (also called a stack of commits) that represents a thread of development.
master
The primary or default branch, which may represent the official version of the project.
merge
Combining commits from one branch into another or from different versions of the same branch.
conflict
Two different changes in the same line of code typically uncovered when branches are merged.
remote
A repository on a computer other than your own.
clone
An exact replica of a repository and everything it contains. It is common to clone a repo from a remote computer to your own before working on it.
push
The process of moving data from your local repository to a remote repository.
pull
Moving data from the remote repository to your local computer in order to update it.
fork
Making a copy of a GitHub repository to your GitHub account so you have your own copy to edit.
pull request
Asking an owner of a repository to pull your changes into the master.
None.
1. In the computer world, what is a shell?
2. Why might you want to learn to use the command line?
a. It is a good way to manipulate files and folders on your own computer.
b. It is a good way to manipulate files and folders on a remote server.
c. It is required for many useful web development tools.
d. All of the above.
3. What is a prompt?
4. What would you expect to happen if you type mkdir newsite after a command-line prompt?
5. Name the two primary functions of CSS processors.
6. Name one advantage of learning Sass.
7. Name two features you might use a CSS postprocessor for.
8. What is a task (in relation to a build tool/task runner)?
9. What does “Grunt is watching this file” mean?
10. What makes Git a distributed version control system?
11. In Git, what does it mean if a file is staged?
12. What is the difference between a branch and a fork?
13. Why should you pull before you push?
14. What is a pull request?