Browse all JavaScript lessons.

showing All 445 lessons...

Ensure failsafe combination using monoids

Delay Evaluation with LazyBox

Use chain for composable error handling with nested Eithers

Semigroup examples

Create types with Semigroups

A collection of Either examples compared to imperative code

Enforce a null check with composable code branching using Either

Refactor imperative code to a single composed expression using Box

Create linear data flow with container style types (Box)

Create a directional light source in WebGL

P

Draw a multicolored cube with WebGL drawElements

P

Fix clipping and aspect ratio by implementing perspective in WebGL

P

Use an image to texture a WebGL object

P

Draw a complex 3D Model with WebGL Triangle Strips

P

Draw more complex 3D Models using Triangle Fans in WebGL

P

Consolidate data into a single WebGL vertex array

P

Apply varying colors per-vertex to WebGL triangles

Produce a single value from an Array with reduce

Handle Branching Logic with Ramda's Conditional Functions

Break up language strings into parts using Natural

Updating nested values with ImmutableJS

Validate Data with the Every() Method

Partial Application with Function.bind

Dot Product in JavaScript

Calculate a sum using reduce in ImmutableJS

Pick and Omit Properties from Objects Using Ramda

Yarn: A JavaScript Package Manager

Use DOM Break Points

Understand the Event Listeners Panel

Declaratively Map Predicates to Object Properties Using Ramda where

Get JSON data from an API using fetch

Safer property access with Lodash's 'get' method

Change Object Properties with Ramda Lenses

Ember.js Templates

Add and Remove Items in Arrays using Filter, Reject and Partition in Ramda

Manipulate the DOM with the classList API

Use Jest's Snapshot Testing Feature

Use Jest's Interactive Watch Mode

Track project code coverage with Jest

Add Babel Integration with Jest

Test JavaScript with Jest

Build a Functional Pipeline with Ramda.js

3D Transformation Matrices in WebGL

P

Using a Matrix Library for WebGL

P

User Interaction in WebGL

P

Animating WebGL Vertices

P

Loading in WebGL Shaders

P

Drawing Arrays in WebGL

P

WebGL Vertex Buffers

P

Passing Data to WebGL Shaders

P
js tutorial about Ensure failsafe combination using monoids

Ensure failsafe combination using monoids

4:33 js

In this video we define monoids and promote our semigroups

js tutorial about Delay Evaluation with LazyBox

Delay Evaluation with LazyBox

1:26 js

We rewrite the Box example using lazy evaulation

js tutorial about Use chain for composable error handling with nested Eithers

Use chain for composable error handling with nested Eithers

3:57 js

We refactor a function that uses try/catch to a single composed expression using Either. We then introduce the chain function to deal with nested Eithers resulting from two try/catch calls.

js tutorial about Semigroup examples

Semigroup examples

2:01 js

A few examples of Semigroup definitions

js tutorial about Create types with Semigroups

Create types with Semigroups

5:52 js

An introduction to concatting items via the formal Semi-group interface. Semi-groups are simply a type with a concat method that are associative. We define three semigroup instances and see them in action.

js tutorial about A collection of Either examples compared to imperative code

A collection of Either examples compared to imperative code

2:05 js

A tour of simple functions rewritten as composed expressions using Either set to 8 byte music and colorful flying blocks

js tutorial about Enforce a null check with composable code branching using Either

Enforce a null check with composable code branching using Either

5:58 js

We define the Either type and see how it works. Then try it out to enforce a null check and branch our code.

js tutorial about Refactor imperative code to a single composed expression using Box

Refactor imperative code to a single composed expression using Box

4:44 js

We refactor 3 functions, taking line by line imperative code to a single composed expression using Box container type.

js tutorial about Create linear data flow with container style types (Box)

Create linear data flow with container style types (Box)

5:04 js

We'll examine how to unnest function calls, capture assignment, and create a linear data flow with a type we call Box. This is our introduction to working with the various container-style types.

js tutorial about Create a directional light source in WebGL

Create a directional light source in WebGL

8:16 js PRO

An introduction to light sources in WebGL. We will start with an overview the different types of lighting in WebGL. This lesson will cover creating a directional light source of a certain color, setting normals on vertices, and use these two things to calculate the color of a surface at any point.

js tutorial about Draw a multicolored cube with WebGL drawElements

Draw a multicolored cube with WebGL drawElements

6:08 js PRO

In this lesson, we look at how to draw more complex shape by building a list of indices that define different shapes to draw. This lets us re-use vertices to draw different parts of the shape.

js tutorial about Fix clipping and aspect ratio by implementing perspective in WebGL

Fix clipping and aspect ratio by implementing perspective in WebGL

8:20 js PRO

In this lesson we actually handle several issues - perspective, clipping and aspect ratio. The perspective method that is used handles all of these issues.

js tutorial about Use an image to texture a WebGL object

Use an image to texture a WebGL object

11:21 js PRO

This video will cover how to load and apply textures to 3d forms in WebGL. This video scratches the surface of textures in WebGL. For more information on textures, check out the MDN docs on WebGL.

js tutorial about Draw a complex 3D Model with WebGL Triangle Strips

Draw a complex 3D Model with WebGL Triangle Strips

5:42 js PRO

In this lesson we start doing some more advanced modeling by connecting multiple triangles into a single surface with a simple for-loop. We will review the different modes WebGL has for drawing arrays. After reviewing, triangle strip will be used to create a complex mathematical 3D form.

js tutorial about Draw more complex 3D Models using Triangle Fans in WebGL

Draw more complex 3D Models using Triangle Fans in WebGL

3:49 js PRO

This time we look at the last drawing mode, triangle fan, which can be useful for drawing different types of 3d forms. Combine this mode with triangle strip to creating complex models.

js tutorial about Consolidate data into a single WebGL vertex array

Consolidate data into a single WebGL vertex array

5:44 js PRO

In this lesson, we look at how to consolidate different data, such as position and color, into a single vertex array. This becomes more important as we keep adding attributes such as per-vertex data for lighting and textures. We will update the stride value in the vertexAttribPointer method to accommodate these changes.

js tutorial about Apply varying colors per-vertex to WebGL triangles

Apply varying colors per-vertex to WebGL triangles

4:55 js

In this lesson we will apply a single color per vertex and see how those colors are interpolated across an entire triangle, making use of a new kind of shader variable. We will also see how enabling gl.DEPTH_TEST will give our model proper depth by having webGL pay attention to z-values.
This lesson assumes prior knowledge in WebGL. Check out Create 3D Graphics in JavaScript Using WebGL for an in depth introduction to WebGL if some of these concepts are feeling unfamiliar.

js tutorial about Produce a single value from an Array with reduce

Produce a single value from an Array with reduce

8:32 js

Array reduce is used to accumulate a new value by applying a function that you provide to each item in your source array. Reduce behaves differently based on whether or not you provide an initial value - we cover this in depth in this lesson and provide some practical use cases.

js tutorial about Handle Branching  Logic with Ramda's Conditional Functions

Handle Branching Logic with Ramda's Conditional Functions

5:30 js

When you want to build your logic with small, composable functions you need a functional way to handle conditional logic. You could wrap ternary expressions and if/else statements in functions, handling all of the concerns around data mutation yourself, or you could leverage the conditional functions supplied by Ramda. In this lesson, we'll cover several of Ramda's conditional functions: ifElse, unless, when and cond

js tutorial about Break up language strings into parts using Natural

Break up language strings into parts using Natural

1:25 js

A part of Natural Language Processing (NLP) is processing text by “tokenizing” language strings. This means we can break up a string of text into parts by word, sentence, etc. In this lesson, we will use the natural library to tokenize a string. First, we will break the string into words using WordTokenizer, WordPunctTokenizer, and TreebankWordTokenizer. Then we will break the string into sentences using RegexpTokenizer.

js tutorial about Updating nested values with ImmutableJS

Updating nested values with ImmutableJS

6:27 js

The key to being productive with Immutable JS is understanding how to update values that are nested. Using setIn you can place a new value directly into an existing or new path. If you need access to the previous value before setting the new one, you can use updateIn instead. updateIn accepts the same path lookups as setIn, but gives you a callback function instead so that you can use the previous value however you wish and return an updated version.

js tutorial about Validate Data with the Every() Method

Validate Data with the Every() Method

6:04 js

The every method returns true or false based on whether or not every item in the array passes the condition you provide in a callback function. In this lesson we look at some practical examples for simple validation, inferring state from data and for re-using the logic in our callbacks with array filters.

js tutorial about Partial Application with Function.bind

Partial Application with Function.bind

3:24 js

Function.bind is useful for more than locking down the this context when calling a function. This lesson shows how Function.bind can be used to make a new function with pre-specified initial arguments. This is a simple example of a functional programming technique called partial application which allows the remaining arguments to be specified when the new function is called.

js tutorial about Dot Product in JavaScript

Dot Product in JavaScript

11:12 js

This lesson explores the dot product method, two ways to calculate it and some useful examples.

js tutorial about Calculate a sum using reduce in ImmutableJS

Calculate a sum using reduce in ImmutableJS

1:22 js

The reduce function in ImmutableJS allows you to transform and create new data from an existing data structure. In this example, we will do some math and calculate a sum based on data in an ImmutableJS Map.

js tutorial about Pick and Omit Properties from Objects Using Ramda

Pick and Omit Properties from Objects Using Ramda

5:39 js

Sometimes you just need a subset of an object. In this lesson, we'll cover how you can accomplish this using Ramda's pick and omit functions, as well as the pickAll and pickBy variants of pick.

js tutorial about Yarn: A JavaScript Package Manager

Yarn: A JavaScript Package Manager

1:57 js

Yarn is a new JavaScript package manager that aims to be speedy, deterministic, and secure. See how easy it is to drop yarn in where you were using npm before, and get faster, more reliable installs.

js tutorial about Use DOM Break Points

Use DOM Break Points

7:00 js

There are a variety of ways to trigger the javascript debugger. Use the elements panel to set breakpoints on DOM elements so that you can hit the debugger whenever an element’s children or attributes change, or when it’s removed.

js tutorial about Understand the Event Listeners Panel

Understand the Event Listeners Panel

5:46 js

Use the Event Listeners tab within the Elements panel to list all DOM Event listeners. This is useful to understand how and why your site is reacting to various forms of input.

js tutorial about Declaratively Map Predicates to Object Properties Using Ramda where

Declaratively Map Predicates to Object Properties Using Ramda where

2:34 js

Sometimes you need to filter an array of objects or perform other conditional logic based on a combination of factors. Ramda's where function gives you a concise way to declaratively map individual predicates to object properties, that when combined, cover the various facets of your conditions. In this lesson, we'll look at how this powerful function can be used for scenarios requiring a complex predicate function.

js tutorial about Get JSON data from an API using fetch

Get JSON data from an API using fetch

1:19 js

We will use fetch to get JSON data from an API. fetch is available globally on the window object in the browser or via libraries in other JS environments.

js tutorial about Safer property access with Lodash's 'get' method

Safer property access with Lodash's 'get' method

8:36 js

Property access in Javascript can be problematic - especially when dealing with nested Objects and Arrays. Doing it manually and in a safe manner requires tons of boilerplate inside conditionals and results in a defensive style of coding. In this lesson we look at why this is a problem & how to overcome it using the get method from the popular utility library Lodash

js tutorial about Change Object Properties with Ramda Lenses

Change Object Properties with Ramda Lenses

4:46 js

In this lesson we'll learn the basics of using lenses in Ramda and see how they enable you to focus changes on specific properties of an object while keeping your data immutable.

js tutorial about Ember.js Templates

Ember.js Templates

3:42 js

In this lesson, we'll go over some of the basics of Ember.js templates and how they work with controllers.

js tutorial about Add and Remove Items in Arrays using Filter, Reject and Partition in Ramda

Add and Remove Items in Arrays using Filter, Reject and Partition in Ramda

2:09 js

We'll learn how to get a subset of an array by specifying items to include with filter, or items to exclude using reject. We'll also look at how to get the results from both filter and reject, neatly separated with partition.

js tutorial about Manipulate the DOM with the classList API

Manipulate the DOM with the classList API

3:26 js

Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than using className and doesn't require any dependencies.

js tutorial about Use Jest's Snapshot Testing Feature

Use Jest's Snapshot Testing Feature

3:41 js

Often when testing, you use the actual result to create your assertion and have to manually update it as you make changes to the feature. With Jest snapshot testing, you can let Jest do this part for you and write more tests and features faster and with more confidence. Let's learn about how you can use Jest snapshot testing to improve your own workflow.

js tutorial about Use Jest's Interactive Watch Mode

Use Jest's Interactive Watch Mode

3:17 js

Jest ships with a pretty amazing interactive watch mode which you can initiate with jest --watch. Let's learn about the bits of interactivity and how this can really improve your workflow.

js tutorial about Track project code coverage with Jest

Track project code coverage with Jest

3:07 js

Jest comes pre-packaged with the ability to track code coverage for the modules you're testing, but it takes a little extra work to make it track untested files as well. Let's look at what Jest can do for you, what you have to do yourself, and how to setup code coverage thresholds so you can work to improving the code coverage numbers for your projects.

js tutorial about Add Babel Integration with Jest

Add Babel Integration with Jest

1:42 js

Jest will default to utilize babel when your node_modules contains babel-jest. Depending on your environment this may already be the case! In this quick lesson, find out why that is and how to ensure that continues to work.

js tutorial about Test JavaScript with Jest

Test JavaScript with Jest

4:04 js

Let's learn how to unit test your JavaScript with Jest, a JavaScript unit testing framework from Facebook. We'll install and optimize Jest for this project and see how quick and easy it is to get things going with Jest.

js tutorial about Build a Functional Pipeline with Ramda.js

Build a Functional Pipeline with Ramda.js

5:37 js

We'll learn how to take advantage of Ramda's automatic function currying and data-last argument order to combine a series of pure functions into a left-to-right composition, or pipeline, with Ramda's pipe function.

js tutorial about 3D Transformation Matrices in WebGL

3D Transformation Matrices in WebGL

6:36 js PRO

In this lesson, we look at how to create and apply 3D transformation matrices to rotate and perform other transformations on 3D shapes created in WebgL.

js tutorial about Using a Matrix Library for WebGL

Using a Matrix Library for WebGL

3:57 js PRO

In this lesson, we see the benefits of using a 3rd party 3D matrix library for performing 3D matrix transformations.

js tutorial about User Interaction in WebGL

User Interaction in WebGL

3:10 js PRO

In this lesson we accomplish some simple user interaction with animated 3D vertices.

js tutorial about Animating WebGL Vertices

Animating WebGL Vertices

6:03 js PRO

In this lesson, we take a look at a simple way of animating vertices in WebGL by simply changing the values of vertices.

js tutorial about Loading in WebGL Shaders

Loading in WebGL Shaders

2:28 js PRO

In this lesson we look at a better way of writing WebGL shaders - loading them in from script tags rather than concatenating JavaScript strings.

js tutorial about Drawing Arrays in WebGL

Drawing Arrays in WebGL

3:52 js PRO

In this lesson, we look at the different drawing modes you can use in gl.drawArrays and how to selectively draw subsets of a full vertex array.

js tutorial about WebGL Vertex Buffers

WebGL Vertex Buffers

5:56 js PRO

In this lesson we cover how to pass an entire array of 3d points to a vertex shader, allowing you to render multiple points at once.

js tutorial about Passing Data to WebGL Shaders

Passing Data to WebGL Shaders

5:22 js PRO

In this lesson we cover how to pass data into a WebGL shader from the main JavaScript program.

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