JavaScript

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

COURSES 24

WATCH John Lindquist's COURSE

Learn ES6 (ECMAScript 2015)

Learn ES6 (ECMAScript 2015)

This course takes a look at some of the new features that JavaScript has available with ES6 (ECMAScript 2015). It is a "montage...

16 lessons

WATCH Kent C. Dodds's COURSE

Using Webpack for Production JavaScript Applications

Using Webpack for Production JavaScript Applications

Webpack is one of the most popular tools for bundling JavaScript applications and libraries, and it's growing more popular ever...

16 lessons

WATCH Keith Peters's COURSE

GIF Loop Coder for Creating Animation

GIF Loop Coder for Creating Animation

GIF Loop Coder is a desktop tool for creating looping animations using JavaScript code. It is hours of fun to be had, and the r...

11 lessons

WATCH mykola bilokonsky's COURSE

Reduce Data with Javascript Array#reduce

Reduce Data with Javascript Array#reduce

Most examples for reduce show you how to take an array of numbers and reduce them to a simple sum. Reduce is a great tool for t...

8 lessons

WATCH Jafar Husain's COURSE

Asynchronous Programming: The End of The Loop

Asynchronous Programming: The End of The Loop

Learning how to build and manage asynchronous programs is perhaps the most important part of becoming an effective JavaScript p...

9 lessons

WATCH Joe Maddalone's COURSE

Regex in Javascript

Regex in Javascript

Regular expressions are a useful tool for dealing with text data. They allow us to slice and dice strings, and useful extract i...

10 lessons

WATCH Keith Peters's COURSE

Learn HTML5 Graphics and Animation

Learn HTML5 Graphics and Animation

HTML5 includes powerful drawing APIs that allow you to use the canvas element and JavaScript to draw whatever you want, directl...

12 lessons

WATCH mykola bilokonsky's COURSE

Advanced Logging with the JavaScript Console

Advanced Logging with the JavaScript Console

If you are developing JavaScript applications you are likely using logging as an integral part of your development process. Did...

7 lessons

WATCH Shane Osbourne's COURSE

Understand JavaScript Arrays

Understand JavaScript Arrays

Arrays of data is one of the first things we learn about as programmers. Collections of information are a fundamental building ...

11 lessons

WATCH Kent C. Dodds's COURSE

How to Contribute to an Open Source Project on GitHub

How to Contribute to an Open Source Project on GitHub

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with...

14 lessons

WATCH Kent C. Dodds's COURSE

How to Write an Open Source JavaScript Library

How to Write an Open Source JavaScript Library

Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the libra...

24 lessons

WATCH J.S. Leonard's COURSE

Learn how to use Immutable.js

Learn how to use Immutable.js

im·mu·ta·ble i(m)ˈmyo͞odəb(ə)l/ adjective - unchanging over time or unable to be changed. Mutating data is the source of never...

16 lessons

WATCH Joe Maddalone's COURSE

Creating Custom Web Elements with Polymer

Creating Custom Web Elements with Polymer

Polymer is a framework created at Google for building reusable web components. We use HTML elements every day such as div, a, ...

10 lessons

WATCH Keith Peters's COURSE

Create 3D Graphics in JavaScript Using WebGL

Create 3D Graphics in JavaScript Using WebGL

In this course, we’ll get started creating content with WebGL without any frameworks. You’ll write raw JavaScript code and shad...

10 lessons

WATCH Brian Lonsdorf's COURSE

Professor Frisby Introduces Composable Functional JavaScript

Professor Frisby Introduces Composable Functional JavaScript

This course teaches the ubiquitous abstractions for modeling pure functional programs. Functional languages have adopted these ...

29 lessons

WATCH Keith Peters's COURSE

Build Complex 3D models with WebGL

Build Complex 3D models with WebGL

We’ll cover per-vertex coloring, advanced use of vertex arrays, more drawing modes for building 3D models, perspective, texture...

8 lessons

WATCH Josh Black's COURSE

Build a GraphQL Server

Build a GraphQL Server

In this course we take a look at a new data query language and runtime called GraphQL. GraphQL was designed and built at Facebo...

15 lessons

WATCH Hannah Davis's COURSE

Natural Language Processing in JavaScript with Natural

Natural Language Processing in JavaScript with Natural

In this course we’ll work through Natural’s API for natural language processing in JavaScript. We’ll look at how to process tex...

14 lessons

WATCH Max Stoiber's COURSE

Write simple asynchronous code with JavaScript generators

Write simple asynchronous code with JavaScript generators

Generators are a useful tool for handling asynchrony in your JavaScript applications. They were added to JavaScript with ES2015...

6 lessons

WATCH Brad Martin's COURSE

Build Basic NativeScript App Templates

Build Basic NativeScript App Templates

In this course, we will learn how to use the core layouts for NativeScript apps. We will start with the basic principles of Nat...

6 lessons

WATCH Trevor Miller's COURSE

Publish JavaScript packages on npm

Publish JavaScript packages on npm

npm is like a giant library of code building blocks. There are tons of these “blocks”, aka “packages” that we can compose toget...

10 lessons

WATCH Marius Schulz's COURSE

Asynchronous JavaScript with async/await

Asynchronous JavaScript with async/await

In this course we will learn how to use the ES2017 async and await keywords to write asynchronous code that is more readable an...

8 lessons

WATCH Iheanyi Ekechukwu's COURSE

Ember 2 Fundamentals

Ember 2 Fundamentals

Ember is a javascript framework that provides a rich set of tools for building modern web applications. Unlike many frameworks,...

9 lessons

WATCH Guy Bedford's COURSE

Get Started Using WebAssembly (wasm)

Get Started Using WebAssembly (wasm)

This course begins with some small steps for working with WebAssembly straight away using online tools wasm Explorer and wasm F...

15 lessons

Convert CommonJS Requires to ES6 Imports

In this lesson we'll use cjs-to-es6 to convert CommonJS requires to ES6 imports. We'll also show how to convert over a exported default object to take advantage of named exports.

Jason Brown
4:16

Refactor Business Logic to Composable Functions with Lodash

Imagine if looking at your business logic read as simple as a story from a children's book. That's exactly what we'll cover by learning how to compose small pieces of business logic and also set th...

Paul Frend
4:45

Use ASTExplorer.net

In this lesson we’ll look at the amazing open source tool ASTExplorer.net. We’ll learn how we can use it to learn about ASTs generated by different tools. We’ll also see how it can be used to help ...

Kent C. Dodds
1:34

Introduction to Abstract Syntax Trees

In this lesson, we’ll learn about the key technology used by JavaScript engines and tools like ESLint and Babel to run, lint, and modify your source code. The JavaScript Abstract Syntax Tree (or AS...

Kent C. Dodds
1:54

Use Test Driven Development

In this lesson, we'll write a brand new function called arrayify using the Test Driven Development workflow of red-green-refactor. Test Driven Development (aka TDD) is great because it helps you fo...

Kent C. Dodds
3:19

Initialize a project using Glimmer.js

GlimmerJS is a UI component library built by the Ember.js team. It is fast and lightweight and uses a combination of TypeScript and Handlebars to build the components. In this lesson we will us...

Bram Borggreve
0:37

Get items in an ImmutableJS List

There are lots of techniques for accessing data kept in your Lists. In this lesson, we will compare how data stored in collections can be accessed directly in both standard Arrays and ImmutableJS L...

Taylor Bell
1:09

Create an immutable List using Immutable.js

In this lesson we'll look at some of the differences between standard JavaScript Arrays and Immutable Lists. We'll create Immutable.JS Lists from scratch, as well as by converting regular Arrays. W...

Taylor Bell
0:59

Access Webpack Dev Server from Mobile Safari on an iPhone

Testing your sites on mobile devices is a critical part of the development process. Webpack dev server enables you to visit the server from any device using the host option. This lesson walks you t...

John Lindquist
1:36

Understand Function Composition By Building Compose and ComposeAll Utility Functions

Function composition allows us to build up powerful functions from smaller, more focused functions. In this lesson we'll demystify how function composition works by building our own compose and co...

Andrew Van Slaars
6:14

Create scrollable DOM elements with Greensock

In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable <div> container and explore some options available.

Rory Smith
4:19

Add a Google OAuth 2.0 Login Button to Your Site

Many sites rely on Google's login functionality for creating accounts. This lesson walks you through using the Google OAuth 2.0 api to login to Google and access the basic profile information for y...

John Lindquist
7:12

FEATURED JAVASCRIPT PLAYLISTS

Browse all JavaScript lessons.

showing All 496 lessons...

Allocate Dynamic Memory in WebAssembly with Malloc

P

Create and Import a WebAssembly Memory

P

Surpass JS Performance with Optimized Collision Detection in WASM using a Linked List Grid

P

Optimize Collision Detection in JS with a Grid

P

Compile C Code into WebAssembly

P

Step-by-Step JS to WebAssembly Conversion

P

Compiling C/C++ to WebAssembly using LLVM, Binaryen and WABT

P

Typed Arrays in High Performance JavaScript

P

A First Comparison of the Performance between JS and WebAssembly

P

Write to WebAssembly Memory from JavaScript

P

Install Binaryen and the WebAssembly Binary Toolkit (WABT)

P

Clone and Build LLVM with the Experimental WebAssembly Target

P

Read WebAssembly Memory from JavaScript

P

Call a JavaScript Function from WebAssembly

P

Create and Run a Native WebAssembly Function

P

Convert CommonJS Requires to ES6 Imports

Use Closure Actions with Ember Components

Define Models for Routes in Ember

Debug Ember Applications using Ember Inspector

Create Simple Components in Ember

Creating nested routes in Ember.js

Define Routes in Ember 2.0 using Ember-CLI

Refactor Business Logic to Composable Functions with Lodash

Use ASTExplorer.net

Introduction to Abstract Syntax Trees

Use Test Driven Development

Await Multiple Promises Sequentially or Concurrently

P

Handle Errors in Asynchronous Functions

P

Iterate Asynchronously with the for-await-of Loop

P

Use the await Operator with Any Thenable

P

Await Multiple Promises Concurrently with Promise.all()

P

Convert Any Function into an Asynchronous Function

P

Call an Asynchronous Function in a Promise Chain

P

Write an Asynchronous Function with async/await

P

Initialize a project using Glimmer.js

Get items in an ImmutableJS List

Create an immutable List using Immutable.js

Access Webpack Dev Server from Mobile Safari on an iPhone

Understand Function Composition By Building Compose and ComposeAll Utility Functions

Create scrollable DOM elements with Greensock

Add a Google OAuth 2.0 Login Button to Your Site

Update published npm packages using np

Set up testing of source code using jest with npm scripts

Publish npm packages using npm publish

Test npm packages locally in another project using npm link

Document npm packages using README files

Add package functionality using npm scripts

Run builds on file changes using watch with npm scripts

Set up compilation of source code using babel with npm scripts

Add manifest files to npm packages using npm init

js tutorial about Allocate Dynamic Memory in WebAssembly with Malloc

Allocate Dynamic Memory in WebAssembly with Malloc

5:44 js PRO

We demonstrate how to build a WebAssembly module that depends on malloc, linking in a pre-built malloc implementation at runtime, using a JS binding trick to handle the circular reference between the two WebAssembly modules. We then optimize the load process to ensure we are fetching these modules in parallel.

Malloc implementation: https://github.com/guybedford/wasm-stdlib-hack/blob/master/dist/memory.wasm

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?1feerp

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Create and Import a WebAssembly Memory

Create and Import a WebAssembly Memory

2:55 js PRO

Starting from the previous example, we rebuild the program code to import its memory instead of exporting it. We then use this to simplify the application loading code.

Emscripten: https://kripken.github.io/emscripten-site/

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Surpass JS Performance with Optimized Collision Detection in WASM using a Linked List Grid

Surpass JS Performance with Optimized Collision Detection in WASM using a Linked List Grid

6:43 js PRO

To write a grid collision detection optimization in C requires thinking about the data structure of the grid more than in JS. In C we can represent this with a linked list and show how to convert the JS optimization code into this structure. When we compare the final performance, the WebAssembly code is now faster than the JS code - being able to write a low-level, more efficient data structure in memory is what gives WebAssembly its best advantage over JS. For those new to the principles, a good introduction to data structures and algorithms is the CLRS Introduction to Algorithms book.

Demo repo: https://github.com/guybedford/wasm-demo

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.

js tutorial about Optimize Collision Detection in JS with a Grid

Optimize Collision Detection in JS with a Grid

4:56 js PRO

To improve the performance of collision detection, we need to dive into the internals of the algorithm. Here we update the JS collision detection code to use a grid for collision detection, which brings a big performance boost at the end.

Demo repo: https://github.com/guybedford/wasm-demo

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.

js tutorial about Compile C Code into WebAssembly

Compile C Code into WebAssembly

2:36 js PRO

We use the C language instead of pure WAST to create a square root function using WASM Fiddle (https://wasdk.github.io/WasmFiddle//). We show how to run the WebAssembly in WASM Fiddle, then download and run it in the browser using a helper function to load the WebAssembly.

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?t96rp

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Step-by-Step JS to WebAssembly Conversion

Step-by-Step JS to WebAssembly Conversion

6:38 js PRO

Using the previous JS example (with some polishing), we start the conversion by copying the JS code into a C file. Step-by-step we run through the principles of converting this JS code into valid C code that we can compile into Web Assembly, based on the same principles we learnt in the initial lessons. We paste the C code into WASM Fiddle to get the resulting WebAssembly binary, and wire it into the application.

Demo repo: https://github.com/guybedford/wasm-demo

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.

js tutorial about Compiling C/C++ to WebAssembly using LLVM, Binaryen and WABT

Compiling C/C++ to WebAssembly using LLVM, Binaryen and WABT

3:23 js PRO

We go through the command-line steps to compile C/C++ via LLVM into an intermediate S file, then use Binaryen to compile that S file into a WAST file and finally WABT to get the WASM binary. We then show an approach to clone and configure a custom std library headers for Web Assembly to build includes to the standard library.

js tutorial about Typed Arrays in High Performance JavaScript

Typed Arrays in High Performance JavaScript

4:56 js PRO

We introduce a black-box render function which draws circles to the screen, explaining how the position information is represented in the memory for the renderer (a typed array of [x1, y1, r1, x2, y2, r2, …]). We draw a simple circle (at [0, 0, 100]), then many random circles to get a feel for passing rendering data by directly setting Typed Array memory. The details of the renderer are not discussed at all. We set up some simple dynamics and wall bounds, and then push the circle count up over 1,000,000 renders to demonstrate the performance of dealing with raw memory and WebGL.

Demo repo: https://github.com/guybedford/wasm-demo

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.

js tutorial about A First Comparison of the Performance between JS and WebAssembly

A First Comparison of the Performance between JS and WebAssembly

2:34 js PRO

To compare the performance between JS and WebAssembly, we use an example that calculates the collisions between circles on the screen. This quickly slows down the rendering performance making the performance comparison visible. We briefly go over the same steps of converting JS into C code, and find that the JS version of the code is actually faster than the WASM version - WebAssembly improving performance is not such a simple argument.

Demo repo: https://github.com/guybedford/wasm-demo

Note the demo is currently only supported in Chrome Canary with the Experimental Web Platform flag (chrome://flags/#enable-experimental-web-platform-feature) enabled due to the use of ES modules and WebGL 2.0.

js tutorial about Write to WebAssembly Memory from JavaScript

Write to WebAssembly Memory from JavaScript

3:33 js PRO

We write a function that converts a string to lowercase in WebAssembly, demonstrating how to set the input string from JavaScript.

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?h1s69

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Install Binaryen and the WebAssembly Binary Toolkit (WABT)

Install Binaryen and the WebAssembly Binary Toolkit (WABT)

0:58 js PRO

In this lesson we cover the install process for Binaryen (http://github.com/WebAssembly/binaryen) to get the s2wasm binary and WABT (https://github.com/WebAssembly/wabt) to get the wast2wasm binary.

Prerequisites are cmake (https://cmake.org/download/), XCode CLI tools on Mac, or Visual Studio on Windows.

js tutorial about Clone and Build LLVM with the Experimental WebAssembly Target

Clone and Build LLVM with the Experimental WebAssembly Target

2:10 js PRO

This lesson demonstrates a full build of LLVM roughly following the steps in http://llvm.org/docs/GettingStarted.html (or http://llvm.org/docs/GettingStartedVS.html for Windows), but with the experimental WebAssembly target build option. Prerequisites include cmake (which can be downloaded from https://cmake.org/download/), Visual Studio on windows, or Xcode command line tools on mac.

js tutorial about Read WebAssembly Memory from JavaScript

Read WebAssembly Memory from JavaScript

3:03 js PRO

We use an offset exporting function to get the address of a string in WebAssembly memory. We then create a typed array on top of the WebAssembly memory representing the raw string data, and decode that into a JavaScript string.

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?6wzgh

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Call a JavaScript Function from WebAssembly

Call a JavaScript Function from WebAssembly

2:46 js PRO

Using WASM Fiddle, we show how to write a simple number logger function that calls a consoleLog function defined in JavaScript. We then download and run the same function in a local project.

WASM Fiddle: https://wasdk.github.io/WasmFiddle/?cvrmt

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Create and Run a Native WebAssembly Function

Create and Run a Native WebAssembly Function

3:12 js PRO

In this introduction, we show a simple WebAssembly function that returns the square root of a number. To create this function we load up WebAssembly Explorer (https://mbebenita.github.io/WasmExplorer/), writing the native WAST code to create and export the function. We compile and download the resulting WebAssembly binary, loading this with the Fetch API and WebAssembly JavaScript API to call the function in the browser.

Demo Repo: https://github.com/guybedford/wasm-intro

js tutorial about Convert CommonJS Requires to ES6 Imports

Convert CommonJS Requires to ES6 Imports

4:16 js

In this lesson we'll use cjs-to-es6 to convert CommonJS requires to ES6 imports. We'll also show how to convert over a exported default object to take advantage of named exports.

js tutorial about Use Closure Actions with Ember Components

Use Closure Actions with Ember Components

4:21 js

Closure actions are useful for extending application code such as modifying a property on a controller while also sending up information from a component.
In this lesson, we learn how to use closure actions with Ember.js components.

js tutorial about Define Models for Routes in Ember

Define Models for Routes in Ember

5:30 js

In this lesson, we show how to specify a model for an Ember Route so its data can be displayed.

js tutorial about Debug Ember Applications using Ember Inspector

Debug Ember Applications using Ember Inspector

5:06 js

In this lesson, we will learn how to install Ember Inspector and use it to see the state of our application and debug it.

The Ember Inspector can be installed from the Chrome Web Store. We will see how the inspector gives us access to information such as the routes available to us, the components used in a particular view, and data that is exposed to us etc.

js tutorial about Create Simple Components in Ember

Create Simple Components in Ember

4:33 js

Components in Ember are great for reusing code throughout our application. We’ll see how each instance of an Ember component has isolated state and we can over ride as well as set default values.

In this lesson, we will learn how to make a simple, reusable component within an Ember application.

js tutorial about Creating nested routes in Ember.js

Creating nested routes in Ember.js

3:03 js

In this lesson, we learn how to create nested routes and templates in an Ember.js application, in addition to how to create nested routes and isolated templates.

js tutorial about Define Routes in Ember 2.0 using Ember-CLI

Define Routes in Ember 2.0 using Ember-CLI

3:27 js

In this lesson, we will learn how to define routes within an Ember application and how to use them to navigate around your application. This lesson will cover the basics of routes and how we can use nested routes to display multiple templates at the same time. We can also cover redirect routes and manually forcing transitions through actions.

js tutorial about Refactor Business Logic to Composable Functions with Lodash

Refactor Business Logic to Composable Functions with Lodash

4:45 js

Imagine if looking at your business logic read as simple as a story from a children's book. That's exactly what we'll cover by learning how to compose small pieces of business logic and also set them up for further composition in the future.

We're showing a list of fictional tweets in a trivial React component created with create-react-app, however the example is not React specific and can be applied to any framework/environment.

Our example will refactor out business logic from a non-composable function to small composable pieces. To accomplish this we'll be using flow, filter and map from lodash/fp, which is included in the regular lodash npm package.

This approach works well in any environment where you're not relying on object references to your original data, as our functional approach creates new collection objects instead of mutating them.

Guide to lodash/fp: https://github.com/lodash/lodash/wiki/FP-Guide

js tutorial about Use ASTExplorer.net

Use ASTExplorer.net

1:34 js

In this lesson we’ll look at the amazing open source tool ASTExplorer.net. We’ll learn how we can use it to learn about ASTs generated by different tools. We’ll also see how it can be used to help us write plugins for ESLint, Babel, and other tools. The noted ESTree specification can be found on GitHub.

js tutorial about Introduction to Abstract Syntax Trees

Introduction to Abstract Syntax Trees

1:54 js

In this lesson, we’ll learn about the key technology used by JavaScript engines and tools like ESLint and Babel to run, lint, and modify your source code. The JavaScript Abstract Syntax Tree (or AST for short) is a JSON representation of your code that is represented by a tree structure. In this lesson we’ll explore that tree structure to get a feel for how code translates to an AST.

js tutorial about Use Test Driven Development

Use Test Driven Development

3:19 js

In this lesson, we'll write a brand new function called arrayify using the Test Driven Development workflow of red-green-refactor. Test Driven Development (aka TDD) is great because it helps you focus on one task at a time and when you're all finished, you can refactor or add features with confidence because the test suite acts as a safety net. In this lesson we're using the amazing Jest testing framework.

js tutorial about Await Multiple Promises Sequentially or Concurrently

Await Multiple Promises Sequentially or Concurrently

2:13 js PRO

You can await multiple promises either sequentially or concurrently, depending on where you put the await operators. This lesson shows both approaches and compares the performance characteristics.

js tutorial about Handle Errors in Asynchronous Functions

Handle Errors in Asynchronous Functions

2:39 js PRO

This lesson shows how regular control flow statements such as try/catch blocks can be used to properly handle errors in asynchronous functions. Oftentimes, the resulting code is easier to read than complex promise chains with .catch() methods.

js tutorial about Iterate Asynchronously with the for-await-of Loop

Iterate Asynchronously with the for-await-of Loop

3:01 js PRO

We finish the course by looking at asynchronous iterators, a generic data access protocol for asynchronous data sources. This asynchronous iteration scheme is built on top of a new for-await-of loop and async generator functions.

js tutorial about Use the await Operator with Any Thenable

Use the await Operator with Any Thenable

1:38 js PRO

The await operator is not restricted to ES2015 promises. It can be used to await any thenable — that is, any object with a .then() method. This lesson illustrates how to await promises that have been created using a promise library.

js tutorial about Await Multiple Promises Concurrently with Promise.all()

Await Multiple Promises Concurrently with Promise.all()

2:33 js PRO

Oftentimes, you want to kick off multiple promises in parallel rather than awaiting them in sequence. This lesson explains how that can be achieved in a readable manner using await, the Promise.all() method, and destructuring assignment.

js tutorial about Convert Any Function into an Asynchronous Function

Convert Any Function into an Asynchronous Function

2:31 js PRO

Any function can be made asynchronous, including function expressions, arrow functions, and methods. This lesson shows the syntax for each of the function types.

js tutorial about Call an Asynchronous Function in a Promise Chain

Call an Asynchronous Function in a Promise Chain

1:36 js PRO

In this lesson, we’re exploring how asynchronous functions can be seamlessly called within a promise chain — just like any other function that returns a promise.

js tutorial about Write an Asynchronous Function with async/await

Write an Asynchronous Function with async/await

2:01 js PRO

This lesson introduces the ES2017 async and await keywords. It shows how to write a short asynchronous function that makes an HTTP request and parses the response.

js tutorial about Initialize a project using Glimmer.js

Initialize a project using Glimmer.js

0:37 js

GlimmerJS is a UI component library built by the Ember.js team. It is fast and lightweight and uses a combination of TypeScript and Handlebars to build the components.

In this lesson we will use the Ember CLI to initialize a new GlimmerJS project.

We will start by installing Ember CLI globally by running npm install -g ember-cli/ember-cli.

Next we will use the ember command to create our new project by running ember new egghead-glimmer -b @glimmer/blueprint .

When our project is created we cd into the project directory and start the development server. We will view the page in the browser and change the base template.

Get items in an ImmutableJS List

1:09 js

There are lots of techniques for accessing data kept in your Lists. In this lesson, we will compare how data stored in collections can be accessed directly in both standard Arrays and ImmutableJS Lists. We will also look at how to find data inside an Immutable List using the findEntry and findIndex methods.

Create an immutable List using Immutable.js

0:59 js

In this lesson we'll look at some of the differences between standard JavaScript Arrays and Immutable Lists. We'll create Immutable.JS Lists from scratch, as well as by converting regular Arrays. We will also compare and contrast the push and concat methods between both types of collection.

js tutorial about Access Webpack Dev Server from Mobile Safari on an iPhone

Access Webpack Dev Server from Mobile Safari on an iPhone

1:36 js

Testing your sites on mobile devices is a critical part of the development process. Webpack dev server enables you to visit the server from any device using the host option. This lesson walks you through accessing webpack dev server using an iPhone.

js tutorial about Understand Function Composition By Building Compose and ComposeAll Utility Functions

Understand Function Composition By Building Compose and ComposeAll Utility Functions

6:14 js

Function composition allows us to build up powerful functions from smaller, more focused functions. In this lesson we'll demystify how function composition works by building our own compose and composeAll functions.

js tutorial about Create scrollable DOM elements with Greensock

Create scrollable DOM elements with Greensock

4:19 js

In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable <div> container and explore some options available.

js tutorial about Add a Google OAuth 2.0 Login Button to Your Site

Add a Google OAuth 2.0 Login Button to Your Site

7:12 js

Many sites rely on Google's login functionality for creating accounts. This lesson walks you through using the Google OAuth 2.0 api to login to Google and access the basic profile information for your own site.

js tutorial about Update published npm packages using np

Update published npm packages using np

1:38 js

When we want to update our package we need to do a few things: pull latest from our git remote, bump the npm version and git tag, push to our remote, push tags to our remote, and then run npm publish. Phew, that’s a lot. In this lesson, we will set up a release script using the np package to simplify this process.

js tutorial about Set up testing of source code using jest with npm scripts

Set up testing of source code using jest with npm scripts

2:42 js

Adding tests to our package can ensure it works as expected. We will install a test framework jest. We will then create a test script to run our tests. Then we will create a test:watch script to keep tests running while we develop.

js tutorial about Publish npm packages using npm publish

Publish npm packages using npm publish

1:29 js

In this lesson we will publish our package. We will first add a prepublish script that runs our build script; this will ensure the built folder gets added to npm when published. We will also add a .npmignore so that only our built files get installed. We need to run npm adduser to log in to an npm account. We can then run npm publish to publish our package and view it on npm.

Note: if you want to actually publish the package from this course, you'll need to rename it since sensitive-words is already taken. You can use a scoped package name for this as well.

js tutorial about Test npm packages locally in another project using npm link

Test npm packages locally in another project using npm link

4:01 js

We will import our newly published package into a new project locally to make sure everything is working as expected. We can do this locally before publishing with npm link. This creates a symbolic link in our node_modules folder, so our unpublished local package is used like an installed published package. This is important because it lets us test making changes to our package and using them immediately without publishing and updating a package with each change we want to test. This is good practice to do before publishing a new version of a package.

js tutorial about Document npm packages using README files

Document npm packages using README files

2:01 js

Users need to know how to use our package. We can make this easy for them with a README.md file containing information about our project. We will put a simple example at the top for easy use.

js tutorial about Add package functionality using npm scripts

Add package functionality using npm scripts

3:18 js

We will run our dev and test:watch scripts to develop; we will create some tests for the expected functionality of our package; it should conceal any words in a string that are in a blacklist of words. Then we will write the logic to make those tests pass.

js tutorial about Run builds on file changes using watch with npm scripts

Run builds on file changes using watch with npm scripts

0:55 js

We can set up a file watcher to compile automatically while we develop. In this lesson we wire up a new dev script to run the build script when source files change.

js tutorial about Set up compilation of source code using babel with npm scripts

Set up compilation of source code using babel with npm scripts

2:27 js

We can write our package using the latest JavaScript syntax with a compilation step. In this lesson we will install babel-cli and babel-preset-latest and wire up a build script to compile our code using the babel “latest” preset when source files change. This means those using our package can use it in any version of JavaScript even though we are using the latest syntax for our source code.

js tutorial about Add manifest files to npm packages using npm init

Add manifest files to npm packages using npm init

2:00 js

We can create a package.json automatically by running npm init and answering the questions it gives. This becomes the “manifest” file for our package; it is used to populate the published npm page as well as to help the package manager to know how to install the package in consuming projects.

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