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 30

WATCH Marius Schulz's COURSE

Understand JavaScript's this Keyword in Depth

Understand JavaScript's this Keyword in Depth

JavaScript’s this keyword is a source of confusion for many new and experienced developers alike. It can be frustrating if, for...

8 lessons

WATCH John Lindquist's COURSE

Make Webpack Easy with Poi

Make Webpack Easy with Poi

When setting up a modern JavaScript app, we find ourselves trudging through the land of infinite configuration. Poi offers us a...

10 lessons

WATCH Paul Frend's COURSE

Quickly Transform Data with Transducers

Quickly Transform Data with Transducers

In this course, we will go through the concept of transducers and build them up from basic principles. We will go over the prob...

13 lessons

WATCH Ian Hofmann-Hicks's COURSE

State Monad in JavaScript

State Monad in JavaScript

Dealing with stateful computations can be a challenge when writing purely functional JavaScript. They can result in undesired v...

9 lessons

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

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

Compose multiple functions for new behavior in JavaScript

In this lesson you will create a utility function that allows you to quickly compose behavior of multiple functions to create new behavior. By the end, you will have successfully created a tremendo...

Thomas Greco
2:33

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

FEATURED JAVASCRIPT PLAYLISTS

Browse all JavaScript lessons.

showing All 556 lessons...

Build a Vue App with Poi

Use Markdown as React Components by Adding a Webpack Loader to Poi

Build and Analyze Your JavaScript Bundles with Poi

Compile CSS or Sass with Poi

Customize Babel to Build a React App with Poi

Configure Poi for Advanced Template Control

Customize Poi's Default index.html Template

Use Poi to Build an Index.js with Modern JavaScript Features

Implement Decision Trees in Python with Scikit-learn

P

Implement a Naive Bayes Classifier in Python and Scikit-learn to Categorize Text

P

Use K-nearest Neighbors To Find Similar Datapoints with Python and Scikit-learn

P

Use Support Vector Machines To Find Complex Decision Boundaries with Scikit-learn

P

Use Linear Regression To Estimate Continuous Values with Python and Scikit-learn

Predict Categories in Python using Scikit-learn's Logistic Regression module

this in Class Bodies

P

this in Method Calls

P

Capture this with an Arrow Function

P

Hard-Bind a Function's this Value with the .bind() Method

P

Specify this using .call() or .apply()

P

this in Constructor Calls

P

this in Function Calls

this in the Global Context

Add the Transducer Protocol to Support Arbitrary Data Types as our Target Collections

P

Make an Into Helper to Remove Boilerplate and Simplify our Transduce API

P

Transduce over any Iteratable Collection

P

Improve Composition with the Compose Combinator

P

Compose multiple functions for new behavior in JavaScript

P

Create a Sequence Helper to Transduce Without Changing Collection Types

P

Transduce When the Collection Type is an Object

P

Use Transducers in Production

P

Create Map and Filter Transducers

P

Measure the Performance of our Transducers

P

Rewrite Map and Filter as Reducers

P

Understand Transformer Functions

P

Write Reducers for Different Data Types

Understand why Transducers can Improve Performance

Mocking an ajax request when testing epics

P

Use Native JavaScript Array Methods instead of Dependency Library

P

Iterate Over Items with JavaScript's for-of Loop

P

Array Includes method in ES2016 - ES7

P

Exponent operator in ES2016 - ES7

P

Use Lifecycle Events with Functional Components with Inferno

P

Use dynamic data in a GlimmerJS component

P

Use template variables in a GlimmerJS component

P

Create a new GlimmerJS component

P

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

P

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
vue tutorial about Build a Vue App with Poi

Build a Vue App with Poi

1:14 vue

Poi uses the Vue babel presets by default, so there is no additional install required to get up-and-running. You can even use the .vue file format without having to configure anything.

react tutorial about Use Markdown as React Components by Adding a Webpack Loader to Poi

Use Markdown as React Components by Adding a Webpack Loader to Poi

1:21 react

Poi ships with many webpack loaders included, but you may run into scenarios where you'll need to customize and add your own. This lesson covers adding react-markdown-loader to Poi to load Markdown files as React components.

webpack tutorial about Build and Analyze Your JavaScript Bundles with Poi

Build and Analyze Your JavaScript Bundles with Poi

1:37 webpack

Ever wonder where those extra KB in your bundle are coming from? This lesson walks you through running Poi's build process. Then we'll add a bundle analyzer to find where you may be able to trim down on your file size.

webpack tutorial about Compile CSS or Sass with Poi

Compile CSS or Sass with Poi

1:14 webpack

Poi uses sensible defaults for importing .css files. Sass isn't included by default, but simply installing the required packages gets you up-and-running. This lesson walks you through importing css and scss files into your project.

react tutorial about Customize Babel to Build a React App with Poi

Customize Babel to Build a React App with Poi

1:04 react

Developing React with Poi is as easy as adding the babel-preset-react-app to a .babelrc and installing React. This lesson will walk you through that quick process and get your React app up-and-running.

webpack tutorial about Configure Poi for Advanced Template Control

Configure Poi for Advanced Template Control

2:43 webpack

Poi uses the ejs templating language for the main template. When you create a poi.config.js, you can customize how to render the main template using configuration settings.

webpack tutorial about Customize Poi's Default index.html Template

Customize Poi's Default index.html Template

1:00 webpack

Poi ships with a sensible default for an index.html template, but it’s easy to override to customize and provide whatever you may need. You can change the title, update links, and even use the underscore templating system.

webpack tutorial about Use Poi to Build an Index.js with Modern JavaScript Features

Use Poi to Build an Index.js with Modern JavaScript Features

1:47 webpack

Poi can easily launch an index.js file simply by running the poi command. This will launch a dev-server and automatically reload whenever you make changes. You can also npm install any package you need and import it right away.

scikit-learn tutorial about Implement Decision Trees in Python with Scikit-learn

Implement Decision Trees in Python with Scikit-learn

5:38 scikit-learn PRO

We’ll learn about decision trees, also known as CART (classification and regression trees), and use them to explore a dataset of breast cancer tumors.

We'll also see how to visualize a decision tree using graphviz.

scikit-learn tutorial about Implement a Naive Bayes Classifier in Python and Scikit-learn to Categorize Text

Implement a Naive Bayes Classifier in Python and Scikit-learn to Categorize Text

5:32 scikit-learn PRO

We’ll use this probabilistic classifier to classify text into different news groups.

There are several types of Naive Bayes classifiers in scikit-learn. We will be using the Multinomial Naive Bayes model, which is appropriate for text classification. More can be found at Scikit-learn.

We'll also look at how to visualize the confusion matrix using pandas_ml.

To install pandas_ml, type:

$ pip install pandas_ml

into your terminal, or install it with your installer of choice.

scikit-learn tutorial about Use K-nearest Neighbors To Find Similar Datapoints with Python and Scikit-learn

Use K-nearest Neighbors To Find Similar Datapoints with Python and Scikit-learn

4:37 scikit-learn PRO

We’ll continue with the iris dataset to implement k-nearest neighbors (KNN), which makes predictions about data based on similarity to other data instances. We'll visualize how the KNN algorithm works by making its predictions based on its neighbors' labels. We'll also examine the confusion matrix a bit further.

KNN can be used for both classification and regression problems.

KNN is good for low dimensional data (data without too many input variables). It is not good for unbalanced data sets, and it can be computationally expensive.

scikit-learn tutorial about Use Support Vector Machines To Find Complex Decision Boundaries with Scikit-learn

Use Support Vector Machines To Find Complex Decision Boundaries with Scikit-learn

3:23 scikit-learn PRO

We’ll continue with the iris dataset to implement support vector machines, which can be used to find more complex boundaries for classification or regression problems.

More about Support Vector Machines can be found at scikit-learn.

There are several types of kernel function that can be used with SVMs. Scikit-learn supports these kernels:

-linear

-polynomial ('poly')

-rbf (radial basis function)

-sigmoid

Custom kernels are also supported. Rbf is the default kernel type.

A good overview of kernels can be found here, or at the scikit-learn page.

scikit-learn tutorial about Use Linear Regression To Estimate Continuous Values with Python and Scikit-learn

Use Linear Regression To Estimate Continuous Values with Python and Scikit-learn

5:47 scikit-learn

Linear regression is a linear model that is used for regression problems, or problems where the goal is to predict a value on a continuous spectrum (as opposed to a discrete category).

We’ll use linear regression to estimate continuous values. In this case, we’ll predict house prices in Boston. We'll also look at how to visualize our results with matplotlib, and how to evaluate our models with different metrics for regression problems.

scikit-learn tutorial about Predict Categories in Python using Scikit-learn's Logistic Regression module

Predict Categories in Python using Scikit-learn's Logistic Regression module

4:49 scikit-learn

Despite its often confusing name, logistic regression is a linear model that is used for classification, or estimating discrete values.

We'll use an inbuilt scikit-learn dataset of iris data to classify irises into three categories. We'll also look at metrics and tools to evaluate our classification models, including the accuracy score, classification report, and confusion matrix.

javascript tutorial about this in Class Bodies

this in Class Bodies

2:10 javascript PRO

Within the constructor of a class, this refers to the newly created object. Within a method, however, this might refer to another value if the method is called as an ordinary function. Just like any other object method, class methods can lose their intended receiver this way.

This lesson shows different approaches to solving this problem either by binding class methods or by using class fields with arrow functions instead.

javascript tutorial about this in Method Calls

this in Method Calls

2:33 javascript PRO

When a function is called as a method of an object, that function's this argument is set to the object the method is called on. That object is called the receiver of the function call.

Oftentimes, the receiver gets lost when we invoke a method as a function. This happens particularly often when passing a method as a callback to another function.

In this lesson we'll see how the receiver mechanism works, what problems it creates, and how to work around these problems using wrapper functions or the bind method.

javascript tutorial about Capture this with an Arrow Function

Capture this with an Arrow Function

2:22 javascript PRO

Arrow functions are not only syntactically different from other JavaScript functions, but they also have special this behavior. An arrow function doesn't have its own this. Instead, it uses the this value from its enclosing execution context.

When an arrow function is created, it permanently captures the surrounding this value. Neither call() nor apply() can change the this value later. Additionally, arrow functions cannot be used as constructors.

This lesson demonstrates that arrow functions are this-transparent and illustrates how they can solve the problem of incorrect this values within callback functions.

javascript tutorial about Hard-Bind a Function's this Value with the .bind() Method

Hard-Bind a Function's this Value with the .bind() Method

2:31 javascript PRO

The Function.prototype.bind() method lets us permanently tie a function's this argument to a specific value. It creates a new bound function that calls the original function with the provided this argument, no matter how that bound function is called.

In this lesson we'll see how to use the bind() method. To better understand how it works, we'll implement a naive version of bind() ourselves.

javascript tutorial about Specify this using .call() or .apply()

Specify this using .call() or .apply()

2:52 javascript PRO

A function's this argument is usually set implicitly, depending on how the function is called. Ordinary function calls, method calls, and constructor calls all lead to a different this value.

We can also call a function with an explicit this argument using Function.prototype.call() or Function.prototype.apply(). Both methods accept a thisArg as their first parameter and a variable number of additional arguments.

This lesson shows how to use call() and apply() and explains how they differ.

javascript tutorial about this in Constructor Calls

this in Constructor Calls

2:06 javascript PRO

In JavaScript, there are no special constructor functions. Instead, a function call can turn into a constructor call when that function is called with the new operator in front of it.

When a function is called as a constructor, a new object is created and set as the function's this argument. This object is then returned implicitly from the function if no other object is returned explicitly.

In this lesson, we'll play around with constructor calls and see why it might make sense to return a different object from the function.

javascript tutorial about this in Function Calls

this in Function Calls

2:18 javascript

In most cases, the value of a function's this argument is determined by how the function is called. This lesson explains what this refers to when we call plain function. Marius points out how functions behave differently in strict and non-strict mode. "use strict" mode defaults this to undefined and prevents us from assigning values to undefined. We must call functions as a constructor to assign their this value correctly.

javascript tutorial about this in the Global Context

this in the Global Context

1:31 javascript

JavaScript's this mechanism behaves a little differently compared to other languages. When used in the global context (outside of any function), this refers to the global object. This lesson highlights the different behavior between Node and the browser.

egghead tutorial about Add the Transducer Protocol to Support Arbitrary Data Types as our Target Collections

Add the Transducer Protocol to Support Arbitrary Data Types as our Target Collections

4:33 egghead PRO

Our helpers are now powerful enough to work with any data type as the source, but they can only build up arrays or objects as the target. For an arbitrary collection type, we thus have to fall back to our transduce function and manually specify the inner reducer behavior based on the API of our target collection.

In this lesson, we'll add support for the transducer protocol, and see how it enables us to transduce into any collection type without having to fall back to using transduce. We'll use the List type from Immutable.JS as our example.

egghead tutorial about Make an Into Helper to Remove Boilerplate and Simplify our Transduce API

Make an Into Helper to Remove Boilerplate and Simplify our Transduce API

4:13 egghead PRO

Our transduce function is powerful but requires a lot of boilerplate.
It would be nice if we had a way to transduce into arrays and objects without having to specify the inner reducer behaviour, i.e. how to build up values, since a given collection type will almost always have the same inner reducer.

In this lesson we'll being doing just that with an into() helper function that will know if an array or object collection is passed in and handle each case accordingly.

javascript tutorial about Transduce over any Iteratable Collection

Transduce over any Iteratable Collection

5:32 javascript PRO

So far we've been transducing by manually calling .reduce() on arrays, but we want to be able to transduce over other collection types as well.

In this lesson we'll create a transduce function to support transducing over any data structure that implements the es2015 iterable protocol. We’ll put it to the test by transducing over strings and maps, as well as going from one collection type as input to another as output.

javascript tutorial about Improve Composition with the Compose Combinator

Improve Composition with the Compose Combinator

4:17 javascript PRO

To make our composition more readable and easier to name we are going to ceate a compose function we can use to avoid having to manually nest our transducer calls.

We'll also go over semantically naming your compose functions for extra readability.

javascript tutorial about Compose multiple functions for new behavior in JavaScript

Compose multiple functions for new behavior in JavaScript

2:33 javascript PRO

In this lesson you will create a utility function that allows you to quickly compose behavior of multiple functions to create new behavior. By the end, you will have successfully created a tremendously popular helper function that is used in JavaScript libraries ranging from Redux to Ramda.

egghead tutorial about Create a Sequence Helper to Transduce Without Changing Collection Types

Create a Sequence Helper to Transduce Without Changing Collection Types

1:46 egghead PRO

A frequent use case when transducing is to apply a transformation to items without changing the type of the collection.

In this lesson, we'll create a helper to do just that. seq will be similar to into, except the target type will be inferred from the source collection. For example, if transducing from an array, seq will create an array as the output collection as well.

seq is thus more restrictive and easier to consume than into.

egghead tutorial about Transduce When the Collection Type is an Object

Transduce When the Collection Type is an Object

2:09 egghead PRO

We've seen how we can transduce from arrays or other iterables, but plain objects aren't iterable in Javascript.
In this lesson we'll modify our transduce() function so that it supports iterating from plain objects as well, treating each key value pair as an entry in the collection.

To do this we'll be using a lodash function called entries.

egghead tutorial about Use Transducers in Production

Use Transducers in Production

4:44 egghead PRO

While it’s possible to use our transducers in production (after writing some tests!), I would recommend using a proven transducer library instead.

In this lesson, we’ll go through how to use transducers.js from James Long instead of our functions. We’ll also cover some more advanced features which we didn't add support for ourselves, like short-circuiting iterations with the take transform as well as transducing lazily over iterables.

The aim is that you’ll be able to use these libraries with more confidence and better understanding since we’ve been through how things are working under the hood.

You can also check out transducers-js by cognitect labs, which is very similar in its feature set to transducers.js.
And remember, you don’t have to rely solely on the transforms in the library, you can write your own as well, as long as you support the transducer protocol.

javascript tutorial about Create Map and Filter Transducers

Create Map and Filter Transducers

7:32 javascript PRO

In our previous lesson, we created map() and filter() functions based on reduce, but we still couldn’t compose them together.

In this lesson, we’ll solve this by making these functions into transducers. This will let us compose the reducing behavior of map() and filter(), without coupling this composed transform to a data type.

egghead tutorial about Measure the Performance of our Transducers

Measure the Performance of our Transducers

2:32 egghead PRO

Now that our transducer functions are functioning as expected, it’s time for another round of performance testing.
We’ll use the same timeIt() function from Lesson One to see how our transducers compare to the Array built-in methods, an imperative solution, as well as the external transducer library transducers.js.

javascript tutorial about Rewrite Map and Filter as Reducers

Rewrite Map and Filter as Reducers

5:13 javascript PRO

Two of the most useful operators when working with collections are .map() and .filter(). We want our transducers to be able to combine these operations in a single pass when iterating through our collections. To do this we need to find a commonality between the two, so we can treat them the same. To achieve this common ground, we'll create map() and filter() functions which use the built in .reduce() function under the hood instead, and we’ll start to combine the concepts of transforming and reducing.

javascript tutorial about Understand Transformer Functions

Understand Transformer Functions

2:09 javascript PRO

The next transducer building block we need to explore is a transformer. A transformer is a function that takes a value and returns a transformed version of it.

In this lesson, we cover some examples of transformer functions and use them with some basic composition. We'll follow the functional style of creating new values, avoiding mutations. Even though they're trivial functions, it's important to understand how they work, as soon we’ll be combining them with reducers to create transducers.

javascript tutorial about Write Reducers for Different Data Types

Write Reducers for Different Data Types

3:43 javascript

Now that we understand the problem transducers can help us with, it's time to define what they actually are.
A Transducer is a combination of two concepts, a transform, and a reducer. Trans-Ducer.
In this lesson we'll give a general overview of the reducer part of the puzzle.

javascript tutorial about Understand why Transducers can Improve Performance

Understand why Transducers can Improve Performance

5:02 javascript

Chaining operations like map and filter on an array can have performance issues as we have to iterate through the whole array for every operation.

In this lesson we explore this problem by doing some basic array transformations and measuring their performance.

We’ve got two utility function to help us with this:
* arrayOfRandoms is a higher order function which helps us create a range of random numbers
* timeIt will help us measure how long functions take to execute

It's important to understand this problem and why it occurs before we move on to how transducers handle it differently.

egghead tutorial about Mocking an ajax request when testing epics

Mocking an ajax request when testing epics

8:02 egghead PRO

Often in unit tests we are focussing on the logic involved in crafting a network request, & how we respond to the result. The external service is unlikely to be under our control, so we need a way to ‘mock’ the Ajax request in a way that allows us to focus on the logic. In this lesson we’ll see how we can pass in dependencies into epics to make testing things Ajax requests easier.

javascript tutorial about Use Native JavaScript Array Methods instead of Dependency Library

Use Native JavaScript Array Methods instead of Dependency Library

4:57 javascript PRO

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!

node tutorial about Iterate Over Items with JavaScript's for-of Loop

Iterate Over Items with JavaScript's for-of Loop

4:11 node PRO

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.

javascript tutorial about Array Includes method in ES2016 - ES7

Array Includes method in ES2016 - ES7

2:23 javascript PRO

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.

javascript tutorial about Exponent operator in ES2016 - ES7

Exponent operator in ES2016 - ES7

2:15 javascript PRO

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.

react tutorial about Use Lifecycle Events with Functional Components with Inferno

Use Lifecycle Events with Functional Components with Inferno

4:11 react PRO

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.

ember tutorial about Use dynamic data in a GlimmerJS component

Use dynamic data in a GlimmerJS component

2:08 ember PRO

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]
ember tutorial about Use template variables in a GlimmerJS component

Use template variables in a GlimmerJS component

1:22 ember PRO

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>
ember tutorial about Create a new GlimmerJS component

Create a new GlimmerJS component

0:32 ember PRO

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.

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

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

8:00 javascript PRO

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.

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

Create an Observable-Based Fetch Wrapper Using Ramda & Most

2:56 most 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.

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

Save/Open a file with an Electron dialog window

7:16 electron 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.

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

Code sign your Electron application with electron-builder

4:00 electron 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.

electron tutorial about Load JavaScript in an Electron BrowserWindow

Load JavaScript in an Electron BrowserWindow

2:17 electron 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.

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