Browse all JavaScript lessons.

showing All 556 lessons...

You've been using Functors

List comprehensions with Applicative Functors

Applicative Functors for multiple arguments

Apply multiple functors as arguments to a function (Applicatives)

Build curried functions

Lift into a Pointed Functor with of

You've been using Monads

Capture Side Effects in a Task

A curated collection of Monoids and their uses

Use Task for Asynchronous Actions

Unbox types with foldMap

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

P

Handle Branching Logic with Ramda's Conditional Functions

P

Break up language strings into parts using Natural

P

Updating nested values with ImmutableJS

P

Validate Data with the Every() Method

P

Partial Application with Function.bind

P

Dot Product in JavaScript

P

Calculate a sum using reduce in ImmutableJS

P

Pick and Omit Properties from Objects Using Ramda

P

Yarn: A JavaScript Package Manager

P

Use DOM Break Points

P

Understand the Event Listeners Panel

P

Declaratively Map Predicates to Object Properties Using Ramda where

P

Get JSON data from an API using fetch

P

Safer property access with Lodash's 'get' method

P

Change Object Properties with Ramda Lenses

P

Ember Templating with HTMLBars

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

P

Manipulate the DOM with the classList API

P

Use Jest's Snapshot Testing Feature

P

Use Jest's Interactive Watch Mode

P

Track project code coverage with Jest

P
javascript tutorial about You've been using Functors

You've been using Functors

3:19 javascript

We learn the formal definition of a functor and look at the laws they obey.

javascript tutorial about List comprehensions with Applicative Functors

List comprehensions with Applicative Functors

2:14 javascript

We annihilate the need for the ol' nested for loop using Applicatives.

javascript tutorial about Applicative Functors for multiple arguments

Applicative Functors for multiple arguments

4:42 javascript

Working our way backwards from solution to problem, we define an applicative functor, then use it to apply a function of multiple arguments.

javascript tutorial about  Apply multiple functors as arguments to a function (Applicatives)

Apply multiple functors as arguments to a function (Applicatives)

2:18 javascript

We find a couple of DOM nodes that may or may not exist and run a calculation on the page height using applicatives.

javascript tutorial about Build curried functions

Build curried functions

4:50 javascript

We see what it means to curry a function, then walk through several examples of curried functions and their use cases.

javascript tutorial about Lift into a Pointed Functor with of

Lift into a Pointed Functor with of

1:21 javascript

We examine the of function we've seen on a few types and discover it's the Pointed interface.

javascript tutorial about You've been using Monads

You've been using Monads

5:43 javascript

We discover, we've been using monads! We look a little further into the chain method and see laws that ensure the monadic structure works correctly.

javascript tutorial about Capture Side Effects in a Task

Capture Side Effects in a Task

2:58 javascript

We examine the data structure Task, see some constructors, familiar methods, and finally how it captures side effects through laziness.

javascript tutorial about A curated collection of Monoids and their uses

A curated collection of Monoids and their uses

1:12 javascript

A gallery of monoid definitions and some use cases

javascript tutorial about Use Task for Asynchronous Actions

Use Task for Asynchronous Actions

3:46 javascript

We refactor a standard node callback style workflow into a composed task-based workflow.

javascript tutorial about Unbox types with foldMap

Unbox types with foldMap

2:50 javascript

We get a clearer definition of what it means to fold a type, then we look at the foldMap function

javascript tutorial about Ensure failsafe combination using monoids

Ensure failsafe combination using monoids

4:33 javascript

In this video we define monoids and promote our semigroups

javascript tutorial about Delay Evaluation with LazyBox

Delay Evaluation with LazyBox

1:26 javascript

We rewrite the Box example using lazy evaulation

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

Use chain for composable error handling with nested Eithers

3:57 javascript

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.

javascript tutorial about Semigroup examples

Semigroup examples

2:01 javascript

A few examples of Semigroup definitions

javascript tutorial about Create types with Semigroups

Create types with Semigroups

5:52 javascript

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.

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

A collection of Either examples compared to imperative code

2:05 javascript

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

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

Enforce a null check with composable code branching using Either

5:58 javascript

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

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

Refactor imperative code to a single composed expression using Box

4:44 javascript

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

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

Create linear data flow with container style types (Box)

5:04 javascript

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.

webgl tutorial about Create a directional light source in WebGL

Create a directional light source in WebGL

8:16 webgl 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.

webgl tutorial about Draw a multicolored cube with WebGL drawElements

Draw a multicolored cube with WebGL drawElements

6:08 webgl 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.

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

Fix clipping and aspect ratio by implementing perspective in WebGL

8:20 webgl 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.

webgl tutorial about Use an image to texture a WebGL object

Use an image to texture a WebGL object

11:21 webgl 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.

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

Draw a complex 3D Model with WebGL Triangle Strips

5:42 webgl 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.

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

Draw more complex 3D Models using Triangle Fans in WebGL

3:49 webgl 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.

webgl tutorial about Consolidate data into a single WebGL vertex array

Consolidate data into a single WebGL vertex array

5:44 webgl 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.

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

Apply varying colors per-vertex to WebGL triangles

4:55 webgl

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

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

Produce a single value from an Array with reduce

8:32 javascript PRO

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.

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

Handle Branching Logic with Ramda's Conditional Functions

5:30 ramda PRO

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

natural tutorial about Break up language strings into parts using Natural

Break up language strings into parts using Natural

1:25 natural PRO

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.

immutable tutorial about Updating nested values with ImmutableJS

Updating nested values with ImmutableJS

6:27 immutable PRO

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.

javascript tutorial about Validate Data with the Every() Method

Validate Data with the Every() Method

6:04 javascript PRO

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.

javascript tutorial about Partial Application with Function.bind

Partial Application with Function.bind

3:24 javascript PRO

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.

javascript tutorial about Dot Product in JavaScript

Dot Product in JavaScript

11:12 javascript PRO

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

immutable tutorial about Calculate a sum using reduce in ImmutableJS

Calculate a sum using reduce in ImmutableJS

1:22 immutable PRO

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.

ramda tutorial about Pick and Omit Properties from Objects Using Ramda

Pick and Omit Properties from Objects Using Ramda

5:39 ramda PRO

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.

yarn tutorial about Yarn: A JavaScript Package Manager

Yarn: A JavaScript Package Manager

1:57 yarn PRO

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.

chrome-devtools tutorial about Use DOM Break Points

Use DOM Break Points

7:00 chrome-devtools PRO

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.

chrome-devtools tutorial about Understand the Event Listeners Panel

Understand the Event Listeners Panel

5:46 chrome-devtools PRO

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.

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

Declaratively Map Predicates to Object Properties Using Ramda where

2:34 ramda PRO

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.

javascript tutorial about Get JSON data from an API using fetch

Get JSON data from an API using fetch

1:19 javascript PRO

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.

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

Safer property access with Lodash's 'get' method

8:36 lodash PRO

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

ramda tutorial about Change Object Properties with Ramda Lenses

Change Object Properties with Ramda Lenses

4:46 ramda PRO

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.

ember tutorial about Ember Templating with HTMLBars

Ember Templating with HTMLBars

3:42 ember

In this lesson, we will learn how templates work within Ember and how to use HTMLBars. This lesson will cover the connection between controllers and templates and how to use actions within templates as well.

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

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.

javascript tutorial about Manipulate the DOM with the classList API

Manipulate the DOM with the classList API

3:26 javascript PRO

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.

jest tutorial about Use Jest's Snapshot Testing Feature

Use Jest's Snapshot Testing Feature

3:41 jest PRO

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.

jest tutorial about Use Jest's Interactive Watch Mode

Use Jest's Interactive Watch Mode

3:17 jest PRO

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.

jest tutorial about Track project code coverage with Jest

Track project code coverage with Jest

3:07 jest PRO

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.

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