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 26

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 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 Cameron Nokes's COURSE

Build a desktop application with Electron

Build a desktop application with Electron

Electron is a framework that makes it easy to create cross-platform desktop apps with JavaScript, HTML, and CSS. Electron and o...

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

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 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 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 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 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 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 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 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 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 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 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 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 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 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 André Staltz's COURSE

Cycle.js Fundamentals

Cycle.js Fundamentals

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an even...

21 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

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

Use Native JavaScript Array Methods instead of Dependency Library

We are so tied to libraries that we use things like underscore or JQuery whenever we want to do any simple operation, we'll see how to get rid of this practice by knowing a little better JavaScript...

Flavio Corpa
4:57

Iterate Over Items with JavaScript's for-of Loop

In this lesson we will understand the For Of loop in Javascript which was introduced in ES6. The for-of loop lets you iterate of an itterable object (array, string, set, or map) and returns each ob...

Akash Gutha
4:11

Array Includes method in ES2016 - ES7

Introduction to the new includes method included in the ES2016 specification for the Array data structure. Review of the previous methods followed, also some complicated examples to get out heads a...

Akash Gutha
2:23

Exponent operator in ES2016 - ES7

A brief introduction and review of the exponent operator in ES2016 and review previous methods being followed. We will also look at some examples that demonstrate the behaviour of the exponent oper...

Akash Gutha
2:15

Use Lifecycle Events with Functional Components with Inferno

Inferno is an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client & server. Outside of performance, Inferno also offers some nice features tha...

Josh Burgess
4:11

Use dynamic data in a GlimmerJS component

In this lesson we will create an updateContent method that sets the value of our content property to the current epoch timestamp. We need to call toString() on the Date.now() method in order to mak...

Bram Borggreve
2:08

Use template variables in a GlimmerJS component

In this lesson we will add a variable called content to our component class, initialize it as a string and display the variable in our class using the double curly braces syntax, which is the handl...

Bram Borggreve
1:22

Create a new GlimmerJS component

In this lesson we will use the ember cli to generate a new component. Running ember g glimmer-component my-component generates the template and component class. We change the content of our compone...

Bram Borggreve
0:32

Use Traverse & the Maybe Monad to Safely Process Lists of Data with Sanctuary

Sanctuary.js is a functional programming library for JavaScript. It's similar to Ramda, but more strict and includes extra features, like the error handling monads Maybe & Either. It's also sim...

Josh Burgess
8:00

Create an Observable-Based Fetch Wrapper Using Ramda & Most

Unlike RxJS, Most does not include an observable-based AJAX helper utility. However, it can be very convenient to have one, because it allows you to use streams to do things like declaratively hand...

Josh Burgess
2:56

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

FEATURED JAVASCRIPT PLAYLISTS

Browse all JavaScript lessons.

showing All 519 lessons...

Use Native JavaScript Array Methods instead of Dependency Library

Iterate Over Items with JavaScript's for-of Loop

Array Includes method in ES2016 - ES7

Exponent operator in ES2016 - ES7

Use Lifecycle Events with Functional Components with Inferno

Use dynamic data in a GlimmerJS component

Use template variables in a GlimmerJS component

Create a new GlimmerJS component

Use Traverse & the Maybe Monad to Safely Process Lists of Data with Sanctuary

Create an Observable-Based Fetch Wrapper Using Ramda & Most

P

Save/Open a file with an Electron dialog window

P

Code sign your Electron application with electron-builder

P

Load JavaScript in an Electron BrowserWindow

P

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
js tutorial about Use Native JavaScript Array Methods instead of Dependency Library

Use Native JavaScript Array Methods instead of Dependency Library

4:57 js

We are so tied to libraries that we use things like underscore or JQuery whenever we want to do any simple operation, we'll see how to get rid of this practice by knowing a little better JavaScript's native array methods and, along the way, remove those unneeded dependencies!

Iterate Over Items with JavaScript's for-of Loop

4:11 js

In this lesson we will understand the For Of loop in Javascript which was introduced in ES6. The for-of loop lets you iterate of an itterable object (array, string, set, or map) and returns each objects value in a specified variable. This excludes plain objects as we will see in the lesson.

Array Includes method in ES2016 - ES7

2:23 js

Introduction to the new includes method included in the ES2016 specification for the Array data structure.
Review of the previous methods followed, also some complicated examples to get out heads around the new functionalities provided using the includes function.

Exponent operator in ES2016 - ES7

2:15 js

A brief introduction and review of the exponent operator in ES2016 and review previous methods being followed.
We will also look at some examples that demonstrate the behaviour of the exponent operator.

Use Lifecycle Events with Functional Components with Inferno

4:11 js

Inferno is an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client & server. Outside of performance, Inferno also offers some nice features that aren't currently available in React, like the ability to use lifecycle events with stateless/pure functional components, which is great for people who prefer functions over classes. In this lesson, we demonstrate how this is accomplished.

Use dynamic data in a GlimmerJS component

2:08 js

In this lesson we will create an updateContent method that sets the value of our content property to the current epoch timestamp. We need to call toString() on the Date.now() method in order to make TypeScript happy.

updateContent() {
  this.content = Date.now().toString()
}

We create a constructor that takes the options parameter, call super(options) and call into our this.updateContent() method.

constructor(options) {
  super(options)
  this.updateContent()
}

When we refresh our page we can see that the value of content is set to the epoch timestamp.

To make the content really dynamic we use setInterval() to call into updateContent each second: setInterval(() => this.updateContent(), 1000).

When we save our file we see that our content does not get updated anymore and when we check the console we see that we get an error telling us that: The 'content' property on the my-component component was changed after it had been rendered. The error also informs us that we should Use the @tracked decorator to mark this as a tracked property.

We add the @tracked decorator to our property, we import tracked from @glimmer/component and we refresh the page. We verify that content gets updated each second.

We change our updateContent to add our the timestamp to the array. When we use this.items.push(this.content) to achieve this we see that the list does not get updated. This is because the @tracked decorator only tracks the re-assignment of properties.

The way to get this working is by re-assigning our items array inside updateContent. We assign a new array, de-structure the current items array and add the new content.

this.items = [...this.items, this.content]

Use template variables in a GlimmerJS component

1:22 js

In this lesson we will add a variable called content to our component class, initialize it as a string and display the variable in our class using the double curly braces syntax, which is the handlebars expression for expressions, { {content }}.

After this we create a new class variable called items, initialize it as an array with strings. To display this list in our template we add a <ul></ul> and inside this unordered list we use the handlebars each helper to display the list items.

And inside our each statement we will print a <li> tag and render {{ item}} inside it.

<ul>
  {{#each items key="@index" as |item| }}
    <li>{{item}}</li> 
  {{/each}}
</ul>

Create a new GlimmerJS component

0:32 js

In this lesson we will use the ember cli to generate a new component. Running ember g glimmer-component my-component generates the template and component class. We change the content of our component and add it to the main template in order to show it on the page.

Use Traverse & the Maybe Monad to Safely Process Lists of Data with Sanctuary

8:00 js

Sanctuary.js is a functional programming library for JavaScript. It's similar to Ramda, but more strict and includes extra features, like the error handling monads Maybe & Either. It's also similar to Folktale, but primarily takes influence from Haskell & PureScript instead of Scala. In this lesson, we use Sanctuary's Traverse and the Maybe monad to safely process lists of data while gaining insight into the relationship between Traverse & Sequence.

js tutorial about Create an Observable-Based Fetch Wrapper Using Ramda & Most

Create an Observable-Based Fetch Wrapper Using Ramda & Most

2:56 js PRO

Unlike RxJS, Most does not include an observable-based AJAX helper utility. However, it can be very convenient to have one, because it allows you to use streams to do things like declaratively handling errors & setting up cancellation. In this lesson, we use currying & functional composition to create an Observable-based wrapper around the fetch API with Ramda & Most.

js tutorial about Save/Open a file with an Electron dialog window

Save/Open a file with an Electron dialog window

7:16 js PRO

In this video, we'll learn how to save and open a file using native dialogs in Electron. First, we'll use dialog.showSaveDialog to display a native save dialog and use dialog.showErrorBox to display an error message if the save failed. Then, we'll open the file we saved using dialog.showOpenDialog. Finally, we'll look at how these dialogs look on Windows vs Mac.

js tutorial about Code sign your Electron application with electron-builder

Code sign your Electron application with electron-builder

4:00 js PRO

Code signing ensures that your app was created and distributed by you or your company and has not been modified since it was built. It is done via a special code signing certificate issued by a trusted authority. While you can distribute your Electron app without signing it; code signing is a security best practice and is a prerequisite to implementing auto-updates in your app. We’ll walkthrough how to integrate code signing into your electron-builder build process, what happens when you don't sign your application, and how to verify it's been signed correctly.

This lesson assumes that you have already purchased code signing certificates from Apple and one of Microsoft's trusted vendors and have exported the certificate as a p12 or pfx file.

js tutorial about Load JavaScript in an Electron BrowserWindow

Load JavaScript in an Electron BrowserWindow

2:17 js PRO

In this lesson we’ll load javascript into the BrowserWindow and display the Electron version on the page. Loading javascript into Electron is almost exactly the same as loading it into the browser, however it is a best practice to use the require syntax.

js tutorial about Display native desktop dialog windows with Electron

Display native desktop dialog windows with Electron

4:51 js 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.

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

js tutorial about Create an icon for your Electron app

Create an icon for your Electron app

0:57 js 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.

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

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

Understand Electron’s main and renderer process architecture

3:28 js 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.

js tutorial about Communicate between Electron processes using the remote module

Communicate between Electron processes using the remote module

4:50 js 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.

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

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

7:47 js 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.

js tutorial about Communicate between Electron processes using IPC

Communicate between Electron processes using IPC

4:40 js 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.

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

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

3:30 js 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.

js tutorial about Load CSS in a Electron BrowserWindow

Load CSS in a Electron BrowserWindow

2:18 js

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.

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

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

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

js tutorial about Use ASTExplorer.net

Use ASTExplorer.net

1:34 js 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.

js tutorial about Introduction to Abstract Syntax Trees

Introduction to Abstract Syntax Trees

1:54 js 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.

js tutorial about Use Test Driven Development

Use Test Driven Development

3:19 js 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.

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.

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