Browse all Tools lessons.

showing All 198 lessons...

Manage terminal workspaces using session naming

P

Understand 5xx Server Error Response Codes

P

Use HTTP PATCH Method

P

Understand HTTP 4xx Client Error Response Codes

P

Use HTTP OPTIONS Method

P

Use HTTP DELETE Method

P

Use HTTP POST Method

P

Examine HTTP Message Bodies

P

Understand HTTP 3xx Redirection Response Codes

P

Understand 2xx HTTP Status Code Responses

P

Use HTTP GET & HEAD Methods

P

Understand what an HTTP Response is

Understand what an HTTP Request is

Combine Multiple SVGs into an SVG Sprite

P

Optimize SVGs for Better Performance using svgo

P

Basic accessibility testing

P

Create a bash script to replace a complex npm script

P

Pull out npm scripts into another file with p-s

P

Create a node script to replace a complex npm script

P

Run npm scripts with git hooks

P

Add comments to your npm scripts

P

List available npm scripts and support tab completion

P

Run npm scripts when files change with onchange

P

Make npm scripts cross-environment friendly

P

Use package.json variables in npm scripts

P

Change the level of console output when running npm scripts

P

Pass arguments to npm scripts

P

Pipe data from one npm script to another

P

Use custom config settings in your npm scripts

P

Use pre and post npm script lifecycle hooks

P

Run a set of similar npm scripts with a wildcard

P

Use a shorthand syntax for running multiple npm scripts with npm-run-all

P

Create a custom npm script

P

Run npm scripts in parallel

P

Run npm scripts in series

P

Run the basic npm scripts

P

Create a basic package.json file

P

Find matches excluding a pattern with grep

P

Search matching files by combining find and grep with xargs

P

Search with groups using grep

P

Match classes of characters using bracket expressions with grep

P

Specify line beginning and end in patterns using grep

P

Search for optional patterns with grep OR

P

Use grep's extended regular expressions to find complex patterns

P

Show context around matches using grep

P

Search for basic patterns using grep

P

Search the contents of a git repository with git grep

P

Use find to search for filename patterns

P

Search the contents of files using grep

Search directory contents recursively using grep

P
otherjs tutorial about Manage terminal workspaces using session naming

Manage terminal workspaces using session naming

1:33 otherjs PRO

It's a lot easier to manage your tmux session when they have sensible names. We'll cover:

  • How to create a new, named tmux session with tmux new -s
  • Rename an existing tmux session using tmux rename-session -t
  • Renaming sessions with C-b $
  • Listing sessions with C-b s
otherjs tutorial about Understand 5xx Server Error Response Codes

Understand 5xx Server Error Response Codes

1:17 otherjs PRO

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.

otherjs tutorial about Use HTTP PATCH Method

Use HTTP PATCH Method

2:23 otherjs PRO

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 application/json-patch+json.

otherjs tutorial about Understand HTTP 4xx Client Error Response Codes

Understand HTTP 4xx Client Error Response Codes

2:59 otherjs PRO

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.

otherjs tutorial about Use HTTP OPTIONS Method

Use HTTP OPTIONS Method

1:42 otherjs PRO

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.

otherjs tutorial about Use HTTP DELETE Method

Use HTTP DELETE Method

2:53 otherjs PRO

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.

otherjs tutorial about Use HTTP POST Method

Use HTTP POST Method

1:53 otherjs PRO

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’.

otherjs tutorial about Examine HTTP Message Bodies

Examine HTTP Message Bodies

4:16 otherjs PRO

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.

otherjs tutorial about Understand HTTP 3xx Redirection Response Codes

Understand HTTP 3xx Redirection Response Codes

3:34 otherjs PRO

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.

otherjs tutorial about Understand 2xx HTTP Status Code Responses

Understand 2xx HTTP Status Code Responses

3:43 otherjs PRO

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.

otherjs tutorial about Use HTTP GET & HEAD Methods

Use HTTP GET & HEAD Methods

1:56 otherjs PRO

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.

otherjs tutorial about Understand what an HTTP Response is

Understand what an HTTP Response is

2:17 otherjs

Let's look at several HTTP responses to learn the basic structure of these messages, and how the various elements communicate important information from the API service to the client/browser.

otherjs tutorial about Understand what an HTTP Request is

Understand what an HTTP Request is

3:28 otherjs

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.

otherjs tutorial about Combine Multiple SVGs into an SVG Sprite

Combine Multiple SVGs into an SVG Sprite

1:31 otherjs PRO

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 svgo and svg-sprite-generator npm packages to automate the process of compressing the SVGs and creating the sprite.

Note: This lesson assumes you have npm installed.

otherjs tutorial about Optimize SVGs for Better Performance using svgo

Optimize SVGs for Better Performance using svgo

2:03 otherjs PRO

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 npm installed.

otherjs tutorial about Basic accessibility testing

Basic accessibility testing

5:44 otherjs PRO

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/

otherjs tutorial about Create a bash script to replace a complex npm script

Create a bash script to replace a complex npm script

2:55 otherjs PRO

In this lesson we will look at pulling out complex npm scripts into their own external bash scripts. This ends up simplifying your package.json file and abstracts the complexity into another file.

otherjs tutorial about Pull out npm scripts into another file with p-s

Pull out npm scripts into another file with p-s

5:52 otherjs PRO

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.

otherjs tutorial about Create a node script to replace a complex npm script

Create a node script to replace a complex npm script

7:04 otherjs PRO

In this lesson we will look at pulling out complex npm script logic into an external JavaScript file. Instead of writing bash scripts you can leverage your JavaScript abilities to automate your build process. We’ll use some helper node modules such as shelljs, opn-cli, and babel-cli.

otherjs tutorial about Run npm scripts with git hooks

Run npm scripts with git hooks

1:56 otherjs PRO

In this lesson we will look about how we can integrate with git hooks to help enforce a certain level of quality before you either commit your code or push to a remote repository.

otherjs tutorial about Add comments to your npm scripts

Add comments to your npm scripts

2:10 otherjs PRO

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.

otherjs tutorial about List available npm scripts and support tab completion

List available npm scripts and support tab completion

1:52 otherjs PRO

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 completion or ntl, we have many options to quickly execute scripts with shell tab completion.

otherjs tutorial about Run npm scripts when files change with onchange

Run npm scripts when files change with onchange

2:06 otherjs PRO

In this lesson we will look at how we can setup our npm scripts to execute when the file system has changed. Some common examples of this are automatically linting your code, running unit tests, or using a pre-processor for your CSS.

otherjs tutorial about Make npm scripts cross-environment friendly

Make npm scripts cross-environment friendly

5:41 otherjs PRO

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.

otherjs tutorial about Use package.json variables in npm scripts

Use package.json variables in npm scripts

1:22 otherjs PRO

In this lesson we will show that you can leverage values that you already have provided in your package.json file such as the name and version keys. You may want to use these in your npm scripts as you create folders and file names.

otherjs tutorial about Change the level of console output when running npm scripts

Change the level of console output when running npm scripts

0:48 otherjs PRO

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.

otherjs tutorial about Pass arguments to npm scripts

Pass arguments to npm scripts

1:03 otherjs PRO

Often times you’ll have variations that you’ll want to make to your npm scripts and repeating yourself is inefficient and verbose. Instead you can create a base script and pass arguments into it from another script.

otherjs tutorial about Pipe data from one npm script to another

Pipe data from one npm script to another

4:31 otherjs PRO

In an effort to bypass saving temporary build files you can leverage piping and output redirection to streamline your build process. In addition using these technique can speed up your build process.

otherjs tutorial about Use custom config settings in your npm scripts

Use custom config settings in your npm scripts

3:00 otherjs PRO

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.

otherjs tutorial about Use pre and post npm script lifecycle hooks

Use pre and post npm script lifecycle hooks

1:23 otherjs PRO

For each npm script there is a pre and post version of the script that will be called if defined. This can be helpful when you want to enforce a validation check before running a script or inject a specific behavior when a script is executed.

otherjs tutorial about Run a set of similar npm scripts with a wildcard

Run a set of similar npm scripts with a wildcard

1:58 otherjs PRO

In this lesson we will run a set of scripts that are grouped together with a wildcard using the npm-run-all node package. Using this technique can help you simplify and organize your scripts.

otherjs tutorial about Use a shorthand syntax for running multiple npm scripts with npm-run-all

Use a shorthand syntax for running multiple npm scripts with npm-run-all

1:38 otherjs PRO

Running multiple scripts in series or in parallel can become very verbose. Using a tool such as npm-run-all can help reduce the amount of overhead you have to type in order to get the same behavior.

otherjs tutorial about Create a custom npm script

Create a custom npm script

1:17 otherjs PRO

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.

otherjs tutorial about Run npm scripts in parallel

Run npm scripts in parallel

2:05 otherjs PRO

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

otherjs tutorial about Run npm scripts in series

Run npm scripts in series

0:59 otherjs PRO

After creating several npm script it becomes useful to run multiple scripts back-to-back in series. This is a nice feature because you can enforce that one script needs to complete before starting another one.

otherjs tutorial about Run the basic npm scripts

Run the basic npm scripts

0:56 otherjs PRO

In this lesson we will examine two common scripts (start and test) that npm natively understands. We’ll define these scripts for our existing repository and show how you can run the scripts from the terminal.

otherjs tutorial about Create a basic package.json file

Create a basic package.json file

1:56 otherjs PRO

We will walk through how to create a simple package.json file manually as well as create a default package.json file through npm with npm init -f. Then we will look at where the npm scripts live and how to run the default script that was created.

otherjs tutorial about Find matches excluding a pattern with grep

Find matches excluding a pattern with grep

0:59 otherjs PRO

What happens when you want to find things that don't contain a pattern? The -v flag lets you use grep in inverse mode. We'll use grep -v against find's output to exclude files in node_modules.

otherjs tutorial about Search matching files by combining find and grep with xargs

Search matching files by combining find and grep with xargs

2:20 otherjs PRO

Learn to use the xargs Unix command to combine find and grep. First we can use find to identify which files we want to search; then we can use xargs to tell grep which files to search through.

otherjs tutorial about Search with groups using grep

Search with groups using grep

2:12 otherjs PRO

By grouping your searches with parentheses, you can create even more complex searches. Grouping lets you separate out different parts of your regular expression, and apply special characters like +, ?, and * to groups of search terms.

otherjs tutorial about Match classes of characters using bracket expressions with grep

Match classes of characters using bracket expressions with grep

2:21 otherjs PRO

You can describe classes of characters using bracket expressions. We'll use expressions such as [a-zA-Z] and [0-9] to search for alphabetic and numeric characters with grep.

otherjs tutorial about Specify line beginning and end in patterns using grep

Specify line beginning and end in patterns using grep

1:18 otherjs PRO

Learn to use the special anchor characters ^ and $ 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.

otherjs tutorial about Search for optional patterns with grep OR

Search for optional patterns with grep OR

1:07 otherjs PRO

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 + and ? 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.

otherjs tutorial about Use grep's extended regular expressions to find complex patterns

Use grep's extended regular expressions to find complex patterns

2:35 otherjs PRO

Learn to use grep's extended regular expressions to describe more complex patterns. The ? and + 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 -E flag.

otherjs tutorial about Show context around matches using grep

Show context around matches using grep

1:59 otherjs PRO

By default, grep displays the file path and the line where a match is found. Learn to use the flags -A, -B, -C, and -n to get more context, and view line numbers as well as the lines surrounding a pattern match.

otherjs tutorial about Search for basic patterns using grep

Search for basic patterns using grep

2:09 otherjs PRO

By using wildcards and glob patterns with the special characters . and *, you can create regular expressions that describe what kind of text you're looking for, instead of just plaintext strings.

otherjs tutorial about Search the contents of a git repository with git grep

Search the contents of a git repository with git grep

1:46 otherjs PRO

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.

otherjs tutorial about Use find to search for filename patterns

Use find to search for filename patterns

1:33 otherjs PRO

Learn how to use find to identify filenames matching specified patterns. We'll use find to identify all .jsx files in a directory, or all test files in a directory.

otherjs tutorial about Search the contents of files using grep

Search the contents of files using grep

2:15 otherjs

Learn the basic syntax for using grep to search the contents of a single file or files. It's like CMD+F, but better! You'll be able to quickly see all matching results in a file.

otherjs tutorial about Search directory contents recursively using grep

Search directory contents recursively using grep

1:41 otherjs PRO

Sometimes you'll be looking for a string, but won't know which file it's in; or you'll want to find all usages of it within a directory. Learn how to use grep -r to recursively search all the files in a directory.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?