Browse all JavaScript lessons.

showing All 520 lessons...

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

P

Get items in an ImmutableJS List

P

Create an immutable List using Immutable.js

P

Access Webpack Dev Server from Mobile Safari on an iPhone

P

Understand Function Composition By Building Compose and ComposeAll Utility Functions

P

Create scrollable DOM elements with Greensock

P

Add a Google OAuth 2.0 Login Button to Your Site

P

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

Add version control to npm packages using git init

Create Flex Based Containers Using FlexboxLayout

P

Create an Absolute Positioned Layout Using AbsoluteLayout

P

Position Views in a Dock Using DockLayout

P

Add Responsive Wrapping Using WrapLayout

P

Make a Grid Layout Using GridLayouts

P

Create Vertical/Horizontal Layouts with StackLayout

P

Use a Javascript Array to Construct a Maybe

P

Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

P

Create a Reusable Mapping Function with Ramda's Map

P

Capture Drawings and Signatures in a NativeScript app

P

Composing emails in a NativeScript app

P

Using the device Phone and SMS with NativeScript

P

Use Speech Recognition with NativeScript

P

Convert a Promise.all Result to an Object with Ramda's zip and zipObj

P

Delegate JavaScript (ES6) generator iteration control

P

Iterate over JavaScript (ES6) generators

P

Use JavaScript (ES6) generators with Promises to handle async flows

P

Error handling in JavaScript (ES6) generators

P

Send messages to and from JavaScript (ES6) generators

P

Use JavaScript (ES6) generators to pause function execution

P

Create a Query String from an Object using Ramda's toPairs function

P

Filter an Array Based on Multiple Predicates with Ramda's allPass Function

P

Using Text to Speech with NativeScript

P

Convert Object Methods into Composable Functions with Ramda

P

Sort an Array of Objects by Multiple Fields with Ramda's sortWith

P
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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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.

js tutorial about Add version control to npm packages using git init

Add version control to npm packages using git init

0:57 js

npm packages almost always have a git repo tied to them for version control. We will start our package by initializing a git repository.

js tutorial about Create Flex Based Containers Using FlexboxLayout

Create Flex Based Containers Using FlexboxLayout

5:15 js PRO

Use the FlexboxLayout component to create a layout container that is based on the CSS flexbox-layout in modern browsers. We will examine several of the properties, behaviors, and benefits that the FlexboxLayout provides with native mobile UI layouts in a NativeScript app.

js tutorial about Create an Absolute Positioned Layout Using AbsoluteLayout

Create an Absolute Positioned Layout Using AbsoluteLayout

1:31 js PRO

We will use the AbsoluteLayout component to create a layout container which uses left-top coordinates to position its child components in a NativeScript app.

js tutorial about Position Views in a Dock Using DockLayout

Position Views in a Dock Using DockLayout

1:42 js PRO

We will use the DockLayout component to create a layout container which allows us to specify sides (top, bottom, left, right) to dock child components to in a NativeScript app.

js tutorial about Add Responsive Wrapping Using WrapLayout

Add Responsive Wrapping Using WrapLayout

2:16 js PRO

We will use the WrapLayout component to create a layout that wraps UI widgets to a new row or column if no space is left in a NativeScript app.

js tutorial about Make a Grid Layout Using GridLayouts

Make a Grid Layout Using GridLayouts

3:40 js PRO

We will use the GridLayout component to create a layout container that can span any number of rows and columns. This allows us to create very complex UIs in a NativeScript app.

js tutorial about Create Vertical/Horizontal Layouts with StackLayout

Create Vertical/Horizontal Layouts with StackLayout

1:02 js PRO

The StackLayout component is one of the many layout containers for your UI. We will use the StackLayout to create a vertical and horizontal layout container in a NativeScript app.

js tutorial about Use a Javascript Array to Construct a Maybe

Use a Javascript Array to Construct a Maybe

7:19 js PRO

Much of our code in real life is full of if statements that check the validity of a given input to see if a given computation should be performed. Using the ever popular Maybe construction allows us capture this disjunction in one place, keeping our functions free of similar if statements that can pollute the intention of the function. You do not even need a fancy library to get this benefit, as Javascript ships with everything you need with it's build in Array.

js tutorial about Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

4:03 js PRO

In this lesson we'll see how Ramda's path and pathOr functions can be used to safely access a deeply nested property from an object while avoiding the dreaded checks for undefined at each new property in the desired path.

js tutorial about Create a Reusable Mapping Function with Ramda's Map

Create a Reusable Mapping Function with Ramda's Map

3:52 js PRO

Using the map method of an array is a great way to create new data from an existing array in an immutable way and without writing any loops. The problem is that you need to call it on an existing array instance. In the lesson we'll see how to build our own reusable map utility function using manual currying and then we'll replace it with Ramda's map.

js tutorial about Capture Drawings and Signatures in a NativeScript app

Capture Drawings and Signatures in a NativeScript app

4:19 js PRO

Using the NativeScript-DrawingPad plugin in a NativeScript app you can create a drawing pad. This is great for capturing signatures or any touch drawing on the device.

js tutorial about Composing emails in a NativeScript app

Composing emails in a NativeScript app

3:19 js PRO

We will use the NativeScript-Email plugin from Eddy Verbruggen to compose email messages from our app that the user can send out.

js tutorial about Using the device Phone and SMS with NativeScript

Using the device Phone and SMS with NativeScript

3:08 js PRO

We will use the nativescript-phone plugin which provides a simple API to access the device's default phone and SMS applications. This allows us to dial phone numbers from our app using the device's phone capabilities as well as pre filling SMS messages for your app's users.

js tutorial about Use Speech Recognition with NativeScript

Use Speech Recognition with NativeScript

4:24 js PRO

We will use the NativeScript Speech Recognition plugin by Eddy Verbruggen to convert speech to text. The plugin provides a clean abstraction over the Android SpeechRecognizer and the iOS SFSpeechRecognizer.

js tutorial about Convert a Promise.all Result to an Object with Ramda's zip and zipObj

Convert a Promise.all Result to an Object with Ramda's zip and zipObj

3:11 js PRO

In this lesson, we'll use Promise.all to get an array that contains the resolved values from multiple promises. Then we'll see how we can use Ramda to convert that array of values into a single object using zip with fromPairs. Then we'll refactor to use zipObj.

js tutorial about Delegate JavaScript (ES6) generator iteration control

Delegate JavaScript (ES6) generator iteration control

1:48 js PRO

We can execute generators from generators, and delegate the iteration control with the yield* keyword.

Yo dawg, I heard you like generators, so I put generators inside your generators.

js tutorial about Iterate over JavaScript (ES6) generators

Iterate over JavaScript (ES6) generators

1:01 js PRO

Generators are iterables, meaning we can easily iterate over the yielded values with a for-of loop. This video demonstrates this based on a simple counter example.

js tutorial about Use JavaScript (ES6) generators with Promises to handle async flows

Use JavaScript (ES6) generators with Promises to handle async flows

6:52 js PRO

With one tiny utility function we’ll unlock the full power of generators to make them work well with Promises and thus be the perfect weapon for asynchronous flows in our apps.

js tutorial about Error handling in JavaScript (ES6) generators

Error handling in JavaScript (ES6) generators

2:16 js PRO

One can throw an error in a generator from the outside with it.throw(). Since all the code inside of a generator is synchronous, we can use the standard try/catch method of handling errors!

js tutorial about Send messages to and from JavaScript (ES6) generators

Send messages to and from JavaScript (ES6) generators

1:48 js PRO

We can communicate between generators and their instances with strategically placed yield keywords. This video will show you how to make it happen based on a simple example.

js tutorial about Use JavaScript (ES6) generators to pause function execution

Use JavaScript (ES6) generators to pause function execution

1:47 js PRO

ES6 generators make it possible to pause and resume function execution at arbitrary points. This video will introduce you to the basics of generators with the yield keyword.

js tutorial about Create a Query String from an Object using Ramda's toPairs function

Create a Query String from an Object using Ramda's toPairs function

2:24 js PRO

In this lesson, we'll use Ramda's toPairs function, along with map, join, concat and compose to create a reusable function that will convert an object to a querystring.

js tutorial about Filter an Array Based on Multiple Predicates with Ramda's allPass Function

Filter an Array Based on Multiple Predicates with Ramda's allPass Function

2:24 js PRO

In this lesson, we'll filter a list of objects based on multiple conditions and we'll use Ramda's allPass function to create a joint predicate from multiple, individual predicate functions.

js tutorial about Using Text to Speech with NativeScript

Using Text to Speech with NativeScript

3:16 js PRO

We will use the NativeScript Text-to-Speech plugin to have the iOS and Android speech synthesizers speak a provided text.

js tutorial about Convert Object Methods into Composable Functions with Ramda

Convert Object Methods into Composable Functions with Ramda

4:44 js PRO

In this lesson, we'll look at how we can use Ramda's invoker and constructN functions to take methods of an object and turn them into reusable utility functions that are curried and accept their object as the last argument. We'll convert a dot-chained string of jQuery methods and create a composed function that can be applied to multiple elements.

js tutorial about Sort an Array of Objects by Multiple Fields with Ramda's sortWith

Sort an Array of Objects by Multiple Fields with Ramda's sortWith

1:58 js PRO

Sorting an array of objects by multiple fields can be tricky. Even worse, the code can be tough to follow and making changes in the future is complicated by conditional logic in the sorting function. In this lesson we'll see how to simplify this using Ramda's sortWith along with ascending and descending. We'll sort an array of objects by multiple fields and the code will be readable and dead simple to change.

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