Tools

There are many moving parts when building professional web applications. These tools are here to help.

COURSES 13

WATCH Mike Hartington's COURSE

Learn to Use VIM

Learn to Use VIM

Vim is a classic text editor that saw its first incarnation in 1976. Used around the world across most platforms, the ability t...

10 lessons

WATCH Trevor Miller's COURSE

Practical Git for Everyday Professional Use

Practical Git for Everyday Professional Use

As modern web developers, we are likely to use git on a daily basis. It's a wonderful distributed version control system, and w...

22 lessons

WATCH Marcy Sutton's COURSE

Start Building Accessible Web Applications Today

Start Building Accessible Web Applications Today

Accessibility (or a11y) is an important but often neglected in the world of web development. Many developers find themselves co...

14 lessons

WATCH mykola bilokonsky's COURSE

Debug the DOM in Chrome with the Devtools Elements Panel

Debug the DOM in Chrome with the Devtools Elements Panel

In this course we’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on t...

7 lessons

WATCH mykola bilokonsky's COURSE

Debug JavaScript in Chrome with DevTool Sources

Debug JavaScript in Chrome with DevTool Sources

This course examines the Sources panel in the Chrome DevTools, which allows you to see what files are responsible for the vario...

5 lessons

WATCH mykola bilokonsky's COURSE

Debug HTTP with Chrome DevTools Network Panel

Debug HTTP with Chrome DevTools Network Panel

This course will examine the Network panel in Chrome DevTools. We’ll step through the request log, examining the various proper...

6 lessons

WATCH Trevor Miller's COURSE

Record Badass Screencasts for egghead.io

Record Badass Screencasts for egghead.io

This is the video companion to the egghead.io Instructor Guide. Screencasting is hard! There are virtually infinite ways to pr...

7 lessons

WATCH mykola bilokonsky's COURSE

Deploy Web Apps with Zeit Now

Deploy Web Apps with Zeit Now

Zeit’s mission statement is to ‘Make Cloud computing as easy and accessible as Mobile computing.’ To that end, they’ve released...

8 lessons

WATCH Bonnie Eisenman's COURSE

Use Grep for Fast Search from the Command Line

Use Grep for Fast Search from the Command Line

CMD+F in your text editor can only get you so far! In this course, we will learn to use grep and find, two powerful command-lin...

13 lessons

WATCH Elijah Manor's COURSE

How to Use npm Scripts as Your Build Tool

How to Use npm Scripts as Your Build Tool

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to buil...

21 lessons

WATCH Pete Johanson's COURSE

Understand the Basics of HTTP

Understand the Basics of HTTP

In this course, we will learn the fundamentals of the Hypertext Transport Protocol (HTTP) by exploring several popular HTTP API...

12 lessons

WATCH Bonnie Eisenman's COURSE

Wrangle your terminal with tmux

Wrangle your terminal with tmux

Learn to manage your terminal sessions and work more effectively from the command line using tmux. If you use the command line ...

11 lessons

WATCH Will Button's COURSE

Get Started with Elasticsearch

Get Started with Elasticsearch

In this course, you will learn the basics of using Elasticsearch within your application. You will learn how to store and retri...

20 lessons

Deploy a GraphQL dev playground with graphql-up

In this lesson we'll use a simple GraphQL IDL schema to deploy and explore a fully functional GraphQL service in minutes with graphql-up.

Joe Maddalone
5:51

Use git add --patch for better commit history and mitigating bugs

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.

Rory Smith
1:49

Configuring AWS Elastic Load Balancers

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

Will Button
5:47

Scheduling Events with AWS Lambda (a.k.a. Lambda cron jobs)

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

Will Button
5:35

Installing the AWS CLI on OS X and Linux

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

Will Button
4:00

Git: How to change the most recent commit with `--amend`

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.

Kent C. Dodds
1:49

Speed Up Your Website by Using AWS CloudFront

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

Will Button
4:08

Using jq to parse the Star Wars API

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

Will Button
2:57

WebStorm - Sharing a Gist

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

John Lindquist
1:28

Permission denied (publickey) when SSH Access to Amazon EC2 instance

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

Will Button
2:53

Hosting a Static Website on Amazon S3

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

Will Button
4:19

WebStorm - Managing Imports

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.

John Lindquist
2:27

FEATURED TOOLS PLAYLISTS

Browse all Tools lessons.

showing All 179 lessons...

Deploy a GraphQL dev playground with graphql-up

Create an index using the Elasticsearch API

Update data in Elasticsearch

Search for data in Elasticsearch using queryDSL language

Get data from Elasticsearch by id using http

Search for data in Elasticsearch using the _search endpoint

Create an alias for an Elasticsearch index

Create a type and map in an index

Bulk import data into Elasticsearch

Monitor Elasticsearch cluster health and status with the _cat API

Close and open an Elasticsearch index

Monitor Elasticsearch cluster health and status with the _cluster and _nodes APIs

Delete an index using the Elasticsearch API

Understand the role of JVM heap in Elasticsearch performance

Reindex data from an existing Elasticsearch index

Perform analytics using Elasticsearch aggregation queries

Search for data in Elasticsearch using full text search

Paginate through search results in Elasticsearch

Search Elasticsearch using Query Parameters

Add data to Elasticsearch

Get data from Elasticsearch by id using the Elasticsearch npm client

Handle history in tmux sessions

Share a tmux session for pair programming with ssh

Customize tmux with tmux.conf

Reuse terminal workspaces using tmux sessions

Automate your workflow using tmux scripts

Copy and paste text from a tmux session

Enable mouse mode in tmux

Create collections of panes using tmux windows

Zoom and resize to view a particular pane within tmux

Organize your terminal using tmux panes

Manage terminal workspaces using session naming

Understand 5xx Server Error Response Codes

Use HTTP PATCH Method

Understand HTTP 4xx Client Error Response Codes

Use HTTP OPTIONS Method

Use HTTP DELETE Method

Use HTTP POST Method

Examine HTTP Message Bodies

Understand HTTP 3xx Redirection Response Codes

Understand 2xx HTTP Status Code Responses

Use HTTP GET & HEAD Methods

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

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
otherjs tutorial about Deploy a GraphQL dev playground with graphql-up

Deploy a GraphQL dev playground with graphql-up

5:51 otherjs

In this lesson we'll use a simple GraphQL IDL schema to deploy and explore a fully functional GraphQL service in minutes with graphql-up.

otherjs tutorial about Create an index using the Elasticsearch API

Create an index using the Elasticsearch API

4:29 otherjs

The index is the top-most schema level for your data. You will learn how to create an index in this lesson. You will be introduced to shards and replicas and how decisions about them will impact future performance, scalability and resiliency. You also learn what the elasticsearch cluster health status “green”, “yellow”, and “red” mean, not only in terms of cluster health but how it impacts your query search results.

otherjs tutorial about Update data in Elasticsearch

Update data in Elasticsearch

6:07 otherjs

Elasticsearch offers two API endpoints for updating documents. In this lesson you will learn how to use those endpoints to replace entire documents in the store and update partial information within a document.

otherjs tutorial about Search for data in Elasticsearch using queryDSL language

Search for data in Elasticsearch using queryDSL language

3:49 otherjs

Query DSL is based on JSON and allows for Leaf and Compound query clauses. The Query DSL is what you will want to use to write your production queries. It makes your queries more flexible, precise, easier to read and easier to debug.

otherjs tutorial about Get data from Elasticsearch by id using http

Get data from Elasticsearch by id using http

3:36 otherjs

Elasticsearch provides a powerful API over http for accessing its features. In this lesson, you will be introduced to the API and learn how to use it to get data from Elasticsearch using the browser and the popular command curl.
We will see how adding query stream parameters can exclude or include the properties that we desire from our data.

otherjs tutorial about Search for data in Elasticsearch using the _search endpoint

Search for data in Elasticsearch using the _search endpoint

4:15 otherjs

Elasticsearch provides several methods for using its powerful search features. In this lesson, you will be introduced to the _search endpoint, the datapoints returned in results, how to set a query timeout (and what a timeout doesn’t do), and how to search specific indices and types.

otherjs tutorial about Create an alias for an Elasticsearch index

Create an alias for an Elasticsearch index

2:17 otherjs

Creating an alias can make searching easier by providing a friendlier name for the index. It can also be useful to create a filtered subset of the data, providing a better search experience for the client. You will learn how to do both in this lesson.

otherjs tutorial about Create a type and map in an index

Create a type and map in an index

9:43 otherjs

Types can probably be best thought of as a Class for your index and a map is the definition for that type. In this lesson, you will learn how to create a mapping type for an index based on sample data, verify it, then store data in the index using that type. You will also learn how Elasticsearch can automatically create them for you (known as Dynamic Mapping), and you’ll learn what mapping explosion is and how to avoid it.

otherjs tutorial about Bulk import data into Elasticsearch

Bulk import data into Elasticsearch

8:13 otherjs

Elasticsearch has a rich set of APIs for adding data to an index but for loading massive amounts of data, you’ll find the bulk interface much more efficient and performant. In this lesson you will learn how to format your data for bulk loading, add data via the bulk endpoint with curl, and add data via the bulk endpoint using the elasticsearch npm client.

otherjs tutorial about Monitor Elasticsearch cluster health and status with the _cat API

Monitor Elasticsearch cluster health and status with the _cat API

7:49 otherjs

Elasticsearch has an in-depth set of APIs for accessing the health and performance of the cluster. In this lesson, you will learn how to access them using the _cat API endpoint, designed for console use. You will also learn some of the key metrics to monitor to identify issues and performance problems with your Elasticsearch cluster before it impacts your application and clients, including how to tell if your Elasticsearch cluster isn’t returning results based on all of your data.

otherjs tutorial about Close and open an Elasticsearch index

Close and open an Elasticsearch index

1:19 otherjs

Closing and opening indices on Elasticsearch allow you to free up resources in your cluster when they aren’t needed, preventing you from scaling or growing your cluster to support unused indices. In this lesson, you will see how easy it is to do both and learn to do so on your own indices.

otherjs tutorial about Monitor Elasticsearch cluster health and status with the _cluster and _nodes APIs

Monitor Elasticsearch cluster health and status with the _cluster and _nodes APIs

2:40 otherjs

Using the _cat API is great for console based, adhoc queries of your cluster. To get even more detailed info on the health and performance of your cluster, or for programmatic access, the _cluster and _nodes endpoints may be your new best friends. There is a tremendous amount of information available about your elasticsearch cluster via these APIs. This lesson doesn’t cover all of them exhaustively, but instead introduces you to the endpoints and the data returned, arming you with the skills you need to go deeper as needed using the Elasticsearch docs found here.

otherjs tutorial about Delete an index using the Elasticsearch API

Delete an index using the Elasticsearch API

1:22 otherjs

In this lesson, you will learn how to delete a single index, multiple indices, or all indices on your Elasticsearch cluster. We’ll see how a simple DELETE request can delete any index you like.

otherjs tutorial about Understand the role of JVM heap in Elasticsearch performance

Understand the role of JVM heap in Elasticsearch performance

2:34 otherjs

This is more of an analysis of how the jvm heap will kill your Elasticsearch cluster than a “how-to” lesson. If you aren’t familiar with Java apps and the jvm, this 2 1/2 minutes can save you much pain, suffering, and self-loathing by showing you how Elasticsearch utilizes the jvm heap for performance and what to monitor so you know when it’s affecting you.

otherjs tutorial about Reindex data from an existing Elasticsearch index

Reindex data from an existing Elasticsearch index

4:20 otherjs

Business requirements change, new information is discovered, or usage patterns differ from the expected use. In any case, sooner or later you will find the need to reindex your data to accommodate these changes. In this lesson you will learn how to leverage the information stored in Elasticsearch and the bulk API to reindex data from one index to another.

otherjs tutorial about Perform analytics using Elasticsearch aggregation queries

Perform analytics using Elasticsearch aggregation queries

12:29 otherjs

Aggregation queries can be thought of as similar to GROUP BY in SQL or the Aggregation Framework in MongoDB, but much more powerful. In this lesson you will learn how to create aggregation queries to group documents and perform rollups and calculations based on the results. Aggregation documentation can be found here

otherjs tutorial about Search for data in Elasticsearch using full text search

Search for data in Elasticsearch using full text search

6:26 otherjs

Using Full Text Search is where the search capabilities of Elasticsearch start to really set it apart from databases. In this lesson, you will learn how to perform full text searches against your data, interpret the results, and understand how the relevance score is impacts your search results. If you are following the examples in this course, be sure to import the Simpsons episode scripts for this lesson by running node utils/episode_scripts.js from the git repo directory.

otherjs tutorial about Paginate through search results in Elasticsearch

Paginate through search results in Elasticsearch

2:01 otherjs

By default, search results are limited to the top 10 results. In this lesson, you will learn how to change the pagination size, paginate through results, and you will learn about the performance implications of pagination on Elasticsearch.

otherjs tutorial about Search Elasticsearch using Query Parameters

Search Elasticsearch using Query Parameters

4:20 otherjs

Simple searches can be done using query parameters, also known as “Search Lite” by Elasticsearch. You will learn how to perform query parameter searches in this lesson and also discover the upper limits of its usability in this lesson.

otherjs tutorial about Add data to Elasticsearch

Add data to Elasticsearch

4:48 otherjs

In this lesson, you will learn how to add new documents to the Elasticsearch data store using HTTP methods and the Elasticsearch API. You will also learn how Elasticsearch uniquely identifies each document and what happens when you attempt to create a document that already exists.

otherjs tutorial about Get data from Elasticsearch by id using the Elasticsearch npm client

Get data from Elasticsearch by id using the Elasticsearch npm client

5:10 otherjs

Elasticsearch provides a full featured client for nodejs available via npm. In this lesson, you will learn to how install the client and use it to retrieve data from your Elasticsearch server.
We will walk through retrieving data through callbacks as well as using promises.

otherjs tutorial about Handle history in tmux sessions

Handle history in tmux sessions

3:11 otherjs

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.

otherjs tutorial about Share a tmux session for pair programming with ssh

Share a tmux session for pair programming with ssh

1:52 otherjs

By using ssh, you can share a tmux session, making pair programming much easier. We'll learn how to share a tmux session with another user.

otherjs tutorial about Customize tmux with tmux.conf

Customize tmux with tmux.conf

3:52 otherjs

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.

otherjs tutorial about Reuse terminal workspaces using tmux sessions

Reuse terminal workspaces using tmux sessions

1:54 otherjs

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.

We'll cover:
- 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

otherjs tutorial about Automate your workflow using tmux scripts

Automate your workflow using tmux scripts

3:53 otherjs

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.

otherjs tutorial about Copy and paste text from a tmux session

Copy and paste text from a tmux session

3:13 otherjs

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.

otherjs tutorial about Enable mouse mode in tmux

Enable mouse mode in tmux

2:22 otherjs

We'll learn how to use mouse mode in tmux, including enable mouse control for resizing, scrolling and selecting panes. We'll also set keybindings in our tmux configuration to control mouse mode.

otherjs tutorial about Create collections of panes using tmux windows

Create collections of panes using tmux windows

1:19 otherjs

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:

  • How to create a new window within a tmux session, using C-b c
  • Navigating between windows with C-b n and C-b p
otherjs tutorial about Zoom and resize to view a particular pane within tmux

Zoom and resize to view a particular pane within tmux

1:39 otherjs

Sometimes you'll want to zoom in on a specific pane within a tmux window. We'll learn to use C-b z to temporarily zoom in on one pane, as well as how to resize your panes with C-b -L, -R, -U, and -D.

otherjs tutorial about Organize your terminal using tmux panes

Organize your terminal using tmux panes

2:14 otherjs

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.

We'll cover:

  • How to create new panes via vertical splits with C-b %
  • How to create new panes via horizontal splits with C-b "
  • Navigating between panes with C-b and arrow keys
  • Closing panes with exit or Ctrl-d
  • Viewing available commands with C-b ?
otherjs tutorial about Manage terminal workspaces using session naming

Manage terminal workspaces using session naming

1:33 otherjs

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

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

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

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

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

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

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

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

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

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

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

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.

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