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 135 lessons...
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
Learn to use the special anchor characters
$ to indicate the beginning and end of lines when writing regular expressions for grep. These line anchors are part of basic regular expressions in grep, so you don't need to escape them.
Describe optional patterns with grep OR using the vertical bar character
|. By using the
| special character, you can write either-or style patterns. In this lesson we'll look for matches on "grey" or "gray". Like the
? characters, the
| character is part of extended regular expressions with grep, so you'll either need to escape it with a backslash, or use the -E flag.
Learn to use grep's extended regular expressions to describe more complex patterns. The
+ special characters describe optional patterns. The
? character matches zero or one instance of the preceding term, and the
+ character matches one or more instances of the preceding term. To use these characters, you'll need to either escape them with backslashes or turn on extended regular expressions with the
Learn to use git grep to only search through the tracked files in a git repo. This is especially useful when you want to exclude build artifacts or locally installed dependencies, such as webpack bundles or the node_modules directory. You'll also note that git grep is automatically colorized - we'll see how to get the same coloring effect with grep --color.
Good audio starts with quality gear. You can definitely record screencasts using the built-in microphone on your laptop, but we've found that our users want to have consistent high-quality audio.
We want you to sound amazing! Because you are.
To make this happen, we send each instructor professional grade audio recording equipment.
Once you've created a draft lesson that is almost ready to be published, we will ship you a case stuffed full of audio recording toys that will have you sounding awesome in no time.
NVDA is a popular open source screen reader on Windows that works well with Firefox. It's similar to JAWS, another popular Windows screen reader that works best with IE. But NVDA has no licensing fee plus an open bug tracker, making it great for users as well as developer testing.
In this lesson, you'll learn how to browse a webpage using NVDA's keyboard shortcuts, including headings navigation, skip links, and the Elements List. You'll also learn a bit about Forms Mode and how it impacts screen reader navigation. For more tips, check out the resources below.
If you're on a Windows machine, you can install NVDA directly. If you're on a Mac or Linux, you could install a Windows virtual machine:
If you need to persist data using
now, it’s recommended that you use a hosted database service. In this lesson we'll create a new, free MongoDB database on http://mlab.com and wire it up to use with our node.js app running on Zeit's
now hosting service.
Often your project will require some secret keys or tokens - for instance, API keys or database authentication information. Learn how to safely and easily deploy secrets to now, and how to expose them as environment variables that your applications can load without making them public to the world.
now deploys are immutable, you can’t push changes to a running instance - you just push a new instance, which means you get a new URL. But doesn’t that mean your URL is always changing? How do you share a link to your application? By using
now alias to point a custom name to a specific deployment.
Use Zeit’s now to deploy a docker container to the cloud quickly and easily. We will see that the process is exactly the same as deploying a Node project. This lesson will also show how log information is displayed on the generated url by
Now while the app is being deployed.
“We’ll just do it in post!”
This is always a phrase to be uttered with caution, but armed with just a couple of handy tools, we can to a lot of magic in post production even if we aren’t Hollywood editors. We will learn about the screencast editors best friend Ripple Delete. Then we will fine tune the recording removing any ummmm's or long running processes like installs or builds. Finally, we will make sure everything looks and sounds good and save it for publication!