There are many moving parts when building professional web applications. These tools are here to help.
Let's split our changes into separate commits. We'll be able to check over our changes before staging them all from the terminal. Then, we'll see the positive effect it has on our commit history.
In this lesson, you will learn how to setup an Elastic Load Balancer for your nodejs servers. You will also learn how to configure the load balancer with servers in different availability zones, us...
Learn how to create AWS Lambda functions that execute on a scheduled interval, much like a cron job would. In this lesson we will create a Lambda function that checks for a string of text on a webs...
Installing the AWS CLI on your local workstation may be one of the biggest boosts to productivity you can make if you use AWS often. Almost all AWS features are available via the CLI allowing you t...
If you make a mistake with a commit and need to make changes or you'd like to update the commit message of the most recent comment, you can do this with the git commit --amend command.
In this lesson, you will learn how to improve your website performance by using the AWS CloudFront service. I show you how to setup CloudFront, properly configure the S3 settings, enable logging, a...
jq is a lightweight and flexible command-line JSON processor. It is extremely useful for processing data from APIs to better understand the data your code will be consuming, before you write the co...
You can easily share your code from WebStorm with others using the "Create Gist" feature. This lesson walks you through how to create a gist from a single or multiples files and also how to use gis...
There are two likely causes to the "Permission denied (public key)" error encountered with AWS EC2 instances: incorrect ssh keys and incorrect usernames. In this lesson, I'll address both and show ...
In this lesson, you will learn how to host a static website on Amazon S3. I will show you how to create the buckets, create the bucket policy to allow public access and point your own custom DNS na...
WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.
WebStorm has a convenient built-in terminal which you can launch with a simple keyboard shortcut and customize to your heart's content. This video shows how to set up the terminal to launch Cygwin ...
showing All 158 lessons...
In this lesson, we'll look at how to manage your history between tmux sessions, and ensure that your setup preserves your bash history between multiple windows. By adding a special PROMPT_COMMAND to your .bashrc, you can update and reload your history after every command, regardless of if you're in a different session, window, or tab.
You can modify tmux's behavior with your tmux configuration file, .tmux.conf. You can use your tmux config to change color schemes, set custom keybindings, set defaults, modify the status bar, and more. In this lesson, we'll change some of the default color options as well as modify the prefix key.
In this lesson, we'll learn how to detach from a running tmux session and leave it running in the background. Then, we can re-attach to it later.
- How to exit a session by killing all active panes
- Detaching explicitly with C-b d
- Detaching a specific session with C-b D
- Viewing all running tmux sessions using tmux ls
- Reattaching with tmux attach -t
Do you have a standard workflow that involves setting up a specific tmux layout, or running certain commands? By writing tmux scripts, you can automate your tedious daily setup, while simultaneously documenting it for yourself. We'll cover the tmux command equivalents of common key bindings and write some simple, useful scripts.
One non-obvious, but extremely useful, feature in tmux is copy-pasting text between panes. This also allows you to scroll back in a tmux sessoin. We'll cover how to use copy and paste in tmux using C-b [ and C-b ], for both emacs- and vim-style keybindings.
In tmux, a window is a collection of panes. Creating multiple windows is a great way to organize your workspace. In this lesson, we'll cover:
Learn to organize your workspace using tmux. We'll create a new tmux session and learn how to create and navigate panes within a tmux window.
It's a lot easier to manage your tmux session when they have sensible names. We'll cover:
The 5xx family of status codes are used in HTTP responses to inform the client that the server experienced an error. The status codes in this family are intended to indicate server or network errors that do not pertaining to a problem with client or the client’s request. For example, a response with a 503 Service Unavailable status code is unlikely to be resolved by resubmitting the request with different content type or additional headers. We will explore the available server error status codes, and what additional information they convey.
The HTTP PATCH method is used to make modifications to existing resources. In particular, it is designed for "partial updates", as opposed to replacing an entire resource using the HTTP PUT method. Although certain HTTP PATCH requests may behave idempotently, this is not true of all possible PATCH requests, so this request method is not idempotent, nor considered safe. The request body of a PATCH request may be simple
application/json, or a more specialized type, such as
The 4xx family of status codes are used in HTTP responses to inform the client/browser of an error relating to the user’s request. The status codes in this family are intended to indicate a problem that should be possible to fix or remedy by the user or developer. For example, a 401 Unauthorized status code lets the user/developer know they need to provide authorization information with their request; should they re-submit the request with the additional authorization header, the request may succeed. We will explore the available client error status codes, and what additional information they convey.
The HTTP OPTIONS method is used to request information about the communication options available for the target resource. The response may include an Allow header indicating allowed HTTP methods on the resource, or various Cross Origin Resource Sharing headers. The HTTP OPTIONS method is both safe and idempotent, as it is intended only for use in querying information about ways to interact with a resource.
The HTTP DELETE method is used to request that the server perform a delete operation on the specified resource with resource specific semantics. Behind the scenes, the delete operation may result in a removal of a file from the filesystem, or an update to the database to reflect the change. Because multiple requests to delete the same resource has the same effect as a single one, the DELETE method is considered ‘idempotent’, but not considered safe.
The HTTP POST method is used to request the resource process the included request message body representation according to resource specific semantics. HTTP POST is loosely defined by definition, and can be used in many different scenarios, such as creating a new resource based on the request representation, appending data to an existing representation, or generic processing of an HTML form submission. Due to the nature of POST performing arbitrary resource specific processing, it is considered neither ‘safe’, nor ‘idempotent’.
The body of an HTTP request or response can serve many functions, from including the input data to a POST request, to returning varied representations of a resource in response to a GET request. This lesson details how message bodies are handled in requests and responses, and the associated HTTP headers that provide metadata about the included message body.
The 3xx family of status codes are used in HTTP responses to inform the client/browser should look somewhere else for the requested resource. Most often, this is used to indicate a resource is temporarily or permanently found at a new URL, but it may also be used to inform the client that the client’s own cache is the other location where the requested resource can be found. We will explore the available redirection status codes, and what additional information they convey.
The 2xx family of status codes are used in HTTP responses to indicate success. Beyond the generic
200 OK status code, there are a set of more specific success status codes that provide additional context or details about the specific nature of the successful request/response. We will explore the available success status codes, and what additional information they convey.
The HTTP GET & HEAD methods are used to retrieve information about a resource. The GET method will retrieve the metadata about the resource, encoded in the HTTP headers, as well as a representation of the resource itself in the message body (e.g. a JSON document with fields that describe a user). The HEAD method behaves like GET, but only retrieves the status and headers; this can be useful when you need some metadata about a resource (e.g. the Last-Modification time), but don't want to waste time or bandwidth fetch the resource itself in the message body. Finally, we discuss the idempotent and safe natures of these HTTP methods.
Let's look at several HTTP requests to learn the basic structure of these messages, and how the various elements communicate important information from the client/browser to the API service.
Follow the instructions at HTTPie to download the CLI tool and follow along.
In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the command line, along with the
svg-sprite-generator npm packages to automate the process of compressing the SVGs and creating the sprite.
Note: This lesson assumes you have
Just like a bitmap image, you can compress an SVG by removing various pieces of code that aren’t necessary to it rendering properly. This reduces file size & download time, ultimately leading to a faster page load speed. You’ll learn how to automate the process of compressing your SVGs using
svgo in the command line.
For a full list of options and plugins available to use with
svgo, check out their documentation.
Note: This lesson assumes you have
Learn the basics of web accessibility testing using the keyboard, Web Developer Toolbar, aXe Firefox extension, and Lea Verou's Contrast Ratio tool. We'll look at how to get an overview of a webpage's accessibility, with special attention paid to solving color contrast issues.
For more on accessibility auditing, check out this article: https://marcysutton.com/how-i-audit-a-website-for-accessibility/
A technique you might use once you start having lots of npm scripts is to use a node package that allows you to define your scripts in an external package-scripts.js file. By pulling out your scripts it can help with organization, enable better comments, provide shortcuts, and more.
The need for comments in your package.json file becomes desirable the more and more npm scripts you start to define. At first glance this might seem like a show stopper since JSON does not support comments, but there are ways around this limitation that we will discuss.
In this lesson we will look at different ways you can list the available npm scripts. Whether we want to pipe
npm run through
less or install an npm package such as
ntl, we have many options to quickly execute scripts with shell tab completion.
Unfortunately not all shell commands work across various environments. Two main techniques to support cross-environment scripts is to either use cross-platform commands or to use normalized node packages. In this lesson, we will look at updating an existing set of npm scripts and make sure they work on Mac OS X, Linux, and Windows.
There are times when it is helpful for a npm script to have lots of logs when trying to debug a problem, but there are other times when you want to run a script silently. Thankfully there are a range of flags to control the log level used when running npm scripts.
In addition to package.json level variables (such as name and version), you can have custom conf settings that can be used in your npm scripts. These config values can be overridden outside of the package.json by using the npm config set command if necessary.
A lot of the power behind npm scripts is creating custom scripts that are outside the basic set that npm natively understands. In this lesson we will install the ESLint node package, create a new eslint npm script, briefly discuss about environment variables and how npm knows where to find your binary, and then execute our custom script from the command line.
In this lesson we will look at running several npm scripts in parallel. Sometimes you don’t need scripts to be run in series and switching them to run in parallel can increase performance since they are not blocking each other. At the end you need to add a wait command so they can be terminated with ^C