Browse all JavaScript lessons.

showing All 556 lessons...

Display native desktop dialog windows with Electron

P

Package your Electron application into a executable file with electron-builder

P

Create an icon for your Electron app

P

Create a native desktop system menu with the Electron Menu module

P

Understand Electron’s main and renderer process architecture

P

Communicate between Electron processes using the remote module

P

Ship updates to your Electron app with `autoUpdater` (Mac)

P

Communicate between Electron processes using IPC

P

Ship updates to your Electron app with `autoUpdater` (Windows)

P

Load CSS in a Electron BrowserWindow

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

P

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

P

Use ASTExplorer.net

P

Introduction to Abstract Syntax Trees

P

Use Test Driven Development

P

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
electron tutorial about Display native desktop dialog windows with Electron

Display native desktop dialog windows with Electron

4:51 electron PRO

In this lesson we'll learn about dialog.showMessageBox . This is the most basic Electron dialog but it offers lots of customization options, such as type, icon, title, and buttons. Some of these options vary by platform, so we'll also look at how things differ between Windows and Mac.

electron tutorial about Package your Electron application into a executable file with electron-builder

Package your Electron application into a executable file with electron-builder

3:38 electron PRO

We’ve been running our app in a development environment using the Electron executable. Now let’s learn how to package our app into a .app or .exe file so that we can distribute it to other users. Electron doesn't provide this functionality out of the box, so we'll use a popular and easy-to-use npm package called electron-builder to handle the details. electron-builder will automatically grab our .ico or .icns file and use that as our app's icon.

electron tutorial about Create an icon for your Electron app

Create an icon for your Electron app

0:57 electron PRO

Every Electron application needs a custom icon. Mac needs an icns file and Windows needs an ico file. We'll learn how to use a npm module, electron-icon-maker, that takes a 1024x1024 PNG and then outputs all the files we need.

electron tutorial about Create a native desktop system menu with the Electron Menu module

Create a native desktop system menu with the Electron Menu module

7:10 electron PRO

A main menu is a hallmark of native desktop applications. Electron makes it easy to create native menus and menu items in JavaScript.

We’ll go over creating a menu template using Menu.buildFromTemplate and then setting it as the main application menu via Menu.setApplicationMenu.

electron tutorial about Understand Electron’s main and renderer process architecture

Understand Electron’s main and renderer process architecture

3:28 electron PRO

Dealing with multiple processes in an application is new for many JavaScript developers. We’ll go over what exactly a process is and what the primary responsibilities of the main and renderer processes are. The main process is primarily responsible for creating native UI elements and managing the application lifecycle, while the renderer process runs the HTML based UI. Accordingly, different APIs are available in each process.

electron tutorial about Communicate between Electron processes using the remote module

Communicate between Electron processes using the remote module

4:50 electron PRO

remote allows you to seamlessly interact with main process modules as if they were in the renderer process. It’s a super useful abstraction over IPC. We’ll learn how to use it and how to avoid some potential gotchas it has.

Devtron is a devtools extension that the Electron team has made. We’ll be using it to view all of the IPC that happens in our application. In this lesson we’ll learn how to include and use it in our code.

electron tutorial about Ship updates to your Electron app with `autoUpdater` (Mac)

Ship updates to your Electron app with `autoUpdater` (Mac)

7:47 electron PRO

Once users are using your app, you need a way to ship new features and fixes to them. In this lesson, we’ll learn how to implement auto-updates in your app, which allows you to distribute updates to your application seamlessly. We'll go over how to integrate with Electron's autoUpdater module to check for an update and display a prompt to update once it's been downloaded. For our server side implementation we'll just use a plain file server to keep things simple.

electron tutorial about Communicate between Electron processes using IPC

Communicate between Electron processes using IPC

4:40 electron PRO

In Electron, we often need to coordinate actions between multiple processes. For example, if a user clicks a button in a renderer process that makes a new browserWindow open, we need to be able to send a message to the main process that triggers this action. We’ll look at how to do just that using the ipcRenderer and ipcMain modules.

electron tutorial about Ship updates to your Electron app with `autoUpdater` (Windows)

Ship updates to your Electron app with `autoUpdater` (Windows)

3:30 electron PRO

In this lesson, we'll go over a few differences in implementing auto-updates on Windows like handling Squirrel.Windows startup events and configuring electron-builder to build for a Squirrel.Windows target.

electron tutorial about Load CSS in a Electron BrowserWindow

Load CSS in a Electron BrowserWindow

2:18 electron

In this lesson we'll learn how to load CSS in an Electron BrowserWindow, which is just like loading CSS into the browser. We’ll also use the ready-to-show event to only display our BrowserWindow when its rendering is complete.

javascript tutorial about Allocate Dynamic Memory in WebAssembly with Malloc

Allocate Dynamic Memory in WebAssembly with Malloc

5:44 javascript 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

javascript tutorial about Create and Import a WebAssembly Memory

Create and Import a WebAssembly Memory

2:55 javascript 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

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

javascript tutorial about Optimize Collision Detection in JS with a Grid

Optimize Collision Detection in JS with a Grid

4:56 javascript 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.

javascript tutorial about Compile C Code into WebAssembly

Compile C Code into WebAssembly

2:36 javascript 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

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

Step-by-Step JS to WebAssembly Conversion

6:38 javascript 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.

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

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

3:23 javascript 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.

javascript tutorial about Typed Arrays in High Performance JavaScript

Typed Arrays in High Performance JavaScript

4:56 javascript 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.

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

A First Comparison of the Performance between JS and WebAssembly

2:34 javascript 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.

javascript tutorial about Write to WebAssembly Memory from JavaScript

Write to WebAssembly Memory from JavaScript

3:33 javascript 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

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

Install Binaryen and the WebAssembly Binary Toolkit (WABT)

0:58 javascript 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.

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

Clone and Build LLVM with the Experimental WebAssembly Target

2:10 javascript PRO

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

javascript tutorial about Read WebAssembly Memory from JavaScript

Read WebAssembly Memory from JavaScript

3:03 javascript 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

javascript tutorial about Call a JavaScript Function from WebAssembly

Call a JavaScript Function from WebAssembly

2:46 javascript 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

javascript tutorial about Create and Run a Native WebAssembly Function

Create and Run a Native WebAssembly Function

3:12 javascript 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

javascript tutorial about Convert CommonJS Requires to ES6 Imports

Convert CommonJS Requires to ES6 Imports

4:16 javascript PRO

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.

ember tutorial about Use Closure Actions with Ember Components

Use Closure Actions with Ember Components

4:21 ember

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.

ember tutorial about Define Models for Routes in Ember

Define Models for Routes in Ember

5:30 ember

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

ember tutorial about Debug Ember Applications using Ember Inspector

Debug Ember Applications using Ember Inspector

5:06 ember

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.

ember tutorial about Create Simple Components in Ember

Create Simple Components in Ember

4:33 ember

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.

ember tutorial about Creating nested routes in Ember.js

Creating nested routes in Ember.js

3:03 ember

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.

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

Define Routes in Ember 2.0 using Ember-CLI

3:27 ember

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.

lodash tutorial about Refactor Business Logic to Composable Functions with Lodash

Refactor Business Logic to Composable Functions with Lodash

4:45 lodash PRO

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

javascript tutorial about Use ASTExplorer.net

Use ASTExplorer.net

1:34 javascript PRO

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.

javascript tutorial about Introduction to Abstract Syntax Trees

Introduction to Abstract Syntax Trees

1:54 javascript PRO

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.

javascript tutorial about Use Test Driven Development

Use Test Driven Development

3:19 javascript PRO

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.

javascript tutorial about Await Multiple Promises Sequentially or Concurrently

Await Multiple Promises Sequentially or Concurrently

2:13 javascript 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.

javascript tutorial about Handle Errors in Asynchronous Functions

Handle Errors in Asynchronous Functions

2:39 javascript 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.

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

Iterate Asynchronously with the for-await-of Loop

3:01 javascript 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.

javascript tutorial about Use the await Operator with Any Thenable

Use the await Operator with Any Thenable

1:38 javascript 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.

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

Await Multiple Promises Concurrently with Promise.all()

2:33 javascript 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.

javascript tutorial about Convert Any Function into an Asynchronous Function

Convert Any Function into an Asynchronous Function

2:31 javascript 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.

javascript tutorial about Call an Asynchronous Function in a Promise Chain

Call an Asynchronous Function in a Promise Chain

1:36 javascript 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.

javascript tutorial about Write an Asynchronous Function with async/await

Write an Asynchronous Function with async/await

2:01 javascript 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.

ember tutorial about Initialize a project using Glimmer.js

Initialize a project using Glimmer.js

0:37 ember 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.

immutable tutorial about Get items in an ImmutableJS List

Get items in an ImmutableJS List

1:09 immutable 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.

immutable tutorial about Create an immutable List using Immutable.js

Create an immutable List using Immutable.js

0:59 immutable 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.

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

Access Webpack Dev Server from Mobile Safari on an iPhone

1:36 webpack 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.

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

Understand Function Composition By Building Compose and ComposeAll Utility Functions

6:14 javascript 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.

greensock tutorial about Create scrollable DOM elements with Greensock

Create scrollable DOM elements with Greensock

4:19 greensock PRO

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

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