Browse all JavaScript lessons.

showing All 515 lessons...

Find the intersection of sets with Semigroups

Retrieve and use data from an api with pure functional constructs

Build a data flow for a real world app

Isomorphisms and round trip data transformations

Maintaining structure whilst asyncing

Principled type conversions with Natural Transformations

Apply Natural Transformations in everyday work

Write applicatives for concurrent actions

Leapfrogging types with Traversable

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

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

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
js tutorial about Find the intersection of sets with Semigroups

Find the intersection of sets with Semigroups

5:57 js

We use semigroups to find the intersection of sets, then expand that to work on as many artists as we'd like. Finally, we use foldable to show a pair of intersection and sum to shed more light on the final result set.

js tutorial about Retrieve and use data from an api with pure functional constructs

Retrieve and use data from an api with pure functional constructs

7:07 js

We flesh out the Spotify api with pure functional constructs to retrieve two sets of related artists.

js tutorial about Build a data flow for a real world app

Build a data flow for a real world app

6:12 js

We form a plan to find the common ground between two artists from the spotify api. Then we sketch out a data flow to ensure we have what we need, when we need it.

js tutorial about Isomorphisms and round trip data transformations

Isomorphisms and round trip data transformations

4:30 js

We formally define isomorphisms, make a few, then use them to accomplish normal programming tasks

js tutorial about Maintaining structure whilst asyncing

Maintaining structure whilst asyncing

2:35 js

We take our Promise.all() analogy further by using traversable on a Map(). Then we use two traversals in the same workflow.

js tutorial about Principled type conversions with Natural Transformations

Principled type conversions with Natural Transformations

4:03 js

We learn what a natural transformation is and see the laws it must obey. We will see how a natural transformation must uphold the law of nt(x).map(f) == nt(x.map(f)).

js tutorial about Apply Natural Transformations in everyday work

Apply Natural Transformations in everyday work

4:24 js

We see three varied examples of where natural transformations come in handy.

js tutorial about Write applicatives for concurrent actions

Write applicatives for concurrent actions

1:37 js

We start with two sequential finds using monads, then rewrite our code to achieve two concurrent finds.

js tutorial about Leapfrogging types with Traversable

Leapfrogging types with Traversable

2:52 js

We use the traversable instance on List to reimplement Promise.all() type functionality.

js tutorial about You've been using Functors

You've been using Functors

3:19 js

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

js tutorial about List comprehensions with Applicative Functors

List comprehensions with Applicative Functors

2:14 js

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

js tutorial about Applicative Functors for multiple arguments

Applicative Functors for multiple arguments

4:42 js

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

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

Apply multiple functors as arguments to a function (Applicatives)

2:18 js

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

js tutorial about Build curried functions

Build curried functions

4:50 js

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

js tutorial about Lift into a Pointed Functor with of

Lift into a Pointed Functor with of

1:21 js

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

js tutorial about You've been using Monads

You've been using Monads

5:43 js

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.

js tutorial about Capture Side Effects in a Task

Capture Side Effects in a Task

2:58 js

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

js tutorial about A curated collection of Monoids and their uses

A curated collection of Monoids and their uses

1:12 js

A gallery of monoid definitions and some use cases

js tutorial about Use Task for Asynchronous Actions

Use Task for Asynchronous Actions

3:46 js

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

js tutorial about Unbox types with foldMap

Unbox types with foldMap

2:50 js

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

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

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

js tutorial about Break up language strings into parts using Natural

Break up language strings into parts using Natural

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

js tutorial about Updating nested values with ImmutableJS

Updating nested values with ImmutableJS

6:27 js 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.

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

js tutorial about Dot Product in JavaScript

Dot Product in JavaScript

11:12 js PRO

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

js tutorial about Pick and Omit Properties from Objects Using Ramda

Pick and Omit Properties from Objects Using Ramda

5:39 js 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.

js tutorial about Yarn: A JavaScript Package Manager

Yarn: A JavaScript Package Manager

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

js tutorial about Use DOM Break Points

Use DOM Break Points

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

js tutorial about Understand the Event Listeners Panel

Understand the Event Listeners Panel

5:46 js 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.

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

Declaratively Map Predicates to Object Properties Using Ramda where

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

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