Browse all JavaScript lessons.

showing All 520 lessons...

Use GraphQLNonNull for Required Fields

P

Write a GraphQL Schema in JavaScript

P

Serve a GraphQL Schema as Middleware in Express

P

Use GraphQL's List Type for Collections

P

Use GraphQL Primitive Types

P

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

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
js tutorial about Use GraphQLNonNull for Required Fields

Use GraphQLNonNull for Required Fields

2:05 js PRO

While certain fields in a GraphQL Schema can be optional, there are some fields or arguments that are necessary in order to either fulfill a query, or to provide a guarantee to people using the Schema that some field exists. In this video, we'll take a look at turning an argument in a NonNull argument by applying the GraphQLNonNull type in order to guarantee that the given argument is supplied in the query.

js tutorial about Write a GraphQL Schema in JavaScript

Write a GraphQL Schema in JavaScript

5:38 js PRO

Writing out a GraphQL Schema in the common GraphQL Language can work for simple GraphQL Schemas, but as our application grows, or when we start using more complex types like interfaces or unions, we find that we can’t use a GraphQL Language file in the same way as before. In this video, we’ll learn how to translate a GraphQL Schema written in GraphQL into a GraphQL Schema written in JavaScript.

js tutorial about Serve a GraphQL Schema as Middleware in Express

Serve a GraphQL Schema as Middleware in Express

4:03 js PRO

If we have a GraphQL Schema expressed in terms of JavaScript, then we have a convenient package available to us that let’s us easily serve up our schema on any endpoint in an Express Server. In this video, we’ll use the express-graphql package to serve up our GraphQL Schema as middleware, and also learn how to enable the GraphiQL tool in order to query our GraphQL Schema.

js tutorial about Use GraphQL's List Type for Collections

Use GraphQL's List Type for Collections

2:25 js PRO

In order to handle collections of items in a GraphQL Schema, GraphQL has a List Type. In this video, we’ll learn the syntax for specifying a List of items in a GraphQL Schema.

js tutorial about Use GraphQL Primitive Types

Use GraphQL Primitive Types

1:57 js PRO

GraphQL’s Type System has support for a number of Primitive Types that we can use in our GraphQL Schema definitions. In this video, we’ll take a look at String, Boolean, Int, Float, and ID and how to incorporate them into a GraphQL Schema Definition.

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

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

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.

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