Browse all JavaScript lessons.

showing All 496 lessons...

Add version control to npm packages using git init

Create Flex Based Containers Using FlexboxLayout

P

Create an Absolute Positioned Layout Using AbsoluteLayout

P

Position Views in a Dock Using DockLayout

P

Add Responsive Wrapping Using WrapLayout

P

Make a Grid Layout Using GridLayouts

P

Create Vertical/Horizontal Layouts with StackLayout

P

Use a Javascript Array to Construct a Maybe

Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

Create a Reusable Mapping Function with Ramda's Map

Capture Drawings and Signatures in a NativeScript app

Composing emails in a NativeScript app

Using the device Phone and SMS with NativeScript

Use Speech Recognition with NativeScript

Convert a Promise.all Result to an Object with Ramda's zip and zipObj

Delegate JavaScript (ES6) generator iteration control

P

Iterate over JavaScript (ES6) generators

P

Use JavaScript (ES6) generators with Promises to handle async flows

P

Error handling in JavaScript (ES6) generators

P

Send messages to and from JavaScript (ES6) generators

P

Use JavaScript (ES6) generators to pause function execution

P

Create a Query String from an Object using Ramda's toPairs function

Filter an Array Based on Multiple Predicates with Ramda's allPass Function

Using Text to Speech with NativeScript

Convert Object Methods into Composable Functions with Ramda

Sort an Array of Objects by Multiple Fields with Ramda's sortWith

Refactor a Promise Chain to Function Composition using Ramda

Refactor to a Point Free Function with Ramda's useWith Function

Debug Function Compositions with Ramda's Tap Function

Get a List of Unique Values From Nested Arrays with Ramda

Create an Array From a Seed Value with Ramda's unfold

Create a "Hello World" app using Electron

Handle Errors in Ramda Pipelines with tryCatch

Use the Exponentiation Operator in JavaScript

Check if an array contains an item using Array.prototype.includes

Convert a callback to a promise

Refactor to Point Free Functions with Ramda using compose and converge

Eliminate Function Arguments (Point-Free Style) with Ramda's Converge

Count Words in a String with Ramda's countBy and invert

Identify and Deal with NaN in JavaScript

Format console.log with CSS and String Template Tags

Convert a QueryString to an Object using Function Composition in Ramda

Create Streams From Iterables With Most.js

Declaratively Map Data Transformations to Object Properties Using Ramda evolve

Public Class Fields with React Components

Select a Subset of Properties from a Collection of Objects in Ramda

Use ES6 Proxies

Curry and Uncurry Functions with Ramda

Create Streams From Single Values With Most.js

Combine Objects with Object.assign and Lodash merge

js tutorial about Add version control to npm packages using git init

Add version control to npm packages using git init

0:57 js

npm packages almost always have a git repo tied to them for version control. We will start our package by initializing a git repository.

js tutorial about Create Flex Based Containers Using FlexboxLayout

Create Flex Based Containers Using FlexboxLayout

5:15 js PRO

Use the FlexboxLayout component to create a layout container that is based on the CSS flexbox-layout in modern browsers. We will examine several of the properties, behaviors, and benefits that the FlexboxLayout provides with native mobile UI layouts in a NativeScript app.

js tutorial about Create an Absolute Positioned Layout Using AbsoluteLayout

Create an Absolute Positioned Layout Using AbsoluteLayout

1:31 js PRO

We will use the AbsoluteLayout component to create a layout container which uses left-top coordinates to position its child components in a NativeScript app.

js tutorial about Position Views in a Dock Using DockLayout

Position Views in a Dock Using DockLayout

1:42 js PRO

We will use the DockLayout component to create a layout container which allows us to specify sides (top, bottom, left, right) to dock child components to in a NativeScript app.

js tutorial about Add Responsive Wrapping Using WrapLayout

Add Responsive Wrapping Using WrapLayout

2:16 js PRO

We will use the WrapLayout component to create a layout that wraps UI widgets to a new row or column if no space is left in a NativeScript app.

js tutorial about Make a Grid Layout Using GridLayouts

Make a Grid Layout Using GridLayouts

3:40 js PRO

We will use the GridLayout component to create a layout container that can span any number of rows and columns. This allows us to create very complex UIs in a NativeScript app.

js tutorial about Create Vertical/Horizontal Layouts with StackLayout

Create Vertical/Horizontal Layouts with StackLayout

1:02 js PRO

The StackLayout component is one of the many layout containers for your UI. We will use the StackLayout to create a vertical and horizontal layout container in a NativeScript app.

js tutorial about Use a Javascript Array to Construct a Maybe

Use a Javascript Array to Construct a Maybe

7:19 js

Much of our code in real life is full of if statements that check the validity of a given input to see if a given computation should be performed. Using the ever popular Maybe construction allows us capture this disjunction in one place, keeping our functions free of similar if statements that can pollute the intention of the function. You do not even need a fancy library to get this benefit, as Javascript ships with everything you need with it's build in Array.

js tutorial about Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

4:03 js

In this lesson we'll see how Ramda's path and pathOr functions can be used to safely access a deeply nested property from an object while avoiding the dreaded checks for undefined at each new property in the desired path.

js tutorial about Create a Reusable Mapping Function with Ramda's Map

Create a Reusable Mapping Function with Ramda's Map

3:52 js

Using the map method of an array is a great way to create new data from an existing array in an immutable way and without writing any loops. The problem is that you need to call it on an existing array instance. In the lesson we'll see how to build our own reusable map utility function using manual currying and then we'll replace it with Ramda's map.

js tutorial about Capture Drawings and Signatures in a NativeScript app

Capture Drawings and Signatures in a NativeScript app

4:19 js

Using the NativeScript-DrawingPad plugin in a NativeScript app you can create a drawing pad. This is great for capturing signatures or any touch drawing on the device.

js tutorial about Composing emails in a NativeScript app

Composing emails in a NativeScript app

3:19 js

We will use the NativeScript-Email plugin from Eddy Verbruggen to compose email messages from our app that the user can send out.

js tutorial about Using the device Phone and SMS with NativeScript

Using the device Phone and SMS with NativeScript

3:08 js

We will use the nativescript-phone plugin which provides a simple API to access the device's default phone and SMS applications. This allows us to dial phone numbers from our app using the device's phone capabilities as well as pre filling SMS messages for your app's users.

js tutorial about Use Speech Recognition with NativeScript

Use Speech Recognition with NativeScript

4:24 js

We will use the NativeScript Speech Recognition plugin by Eddy Verbruggen to convert speech to text. The plugin provides a clean abstraction over the Android SpeechRecognizer and the iOS SFSpeechRecognizer.

js tutorial about Convert a Promise.all Result to an Object with Ramda's zip and zipObj

Convert a Promise.all Result to an Object with Ramda's zip and zipObj

3:11 js

In this lesson, we'll use Promise.all to get an array that contains the resolved values from multiple promises. Then we'll see how we can use Ramda to convert that array of values into a single object using zip with fromPairs. Then we'll refactor to use zipObj.

js tutorial about Delegate JavaScript (ES6) generator iteration control

Delegate JavaScript (ES6) generator iteration control

1:48 js PRO

We can execute generators from generators, and delegate the iteration control with the yield* keyword.

Yo dawg, I heard you like generators, so I put generators inside your generators.

js tutorial about Iterate over JavaScript (ES6) generators

Iterate over JavaScript (ES6) generators

1:01 js PRO

Generators are iterables, meaning we can easily iterate over the yielded values with a for-of loop. This video demonstrates this based on a simple counter example.

js tutorial about Use JavaScript (ES6) generators with Promises to handle async flows

Use JavaScript (ES6) generators with Promises to handle async flows

6:52 js PRO

With one tiny utility function we’ll unlock the full power of generators to make them work well with Promises and thus be the perfect weapon for asynchronous flows in our apps.

js tutorial about Error handling in JavaScript (ES6) generators

Error handling in JavaScript (ES6) generators

2:16 js PRO

One can throw an error in a generator from the outside with it.throw(). Since all the code inside of a generator is synchronous, we can use the standard try/catch method of handling errors!

js tutorial about Send messages to and from JavaScript (ES6) generators

Send messages to and from JavaScript (ES6) generators

1:48 js PRO

We can communicate between generators and their instances with strategically placed yield keywords. This video will show you how to make it happen based on a simple example.

js tutorial about Use JavaScript (ES6) generators to pause function execution

Use JavaScript (ES6) generators to pause function execution

1:47 js PRO

ES6 generators make it possible to pause and resume function execution at arbitrary points. This video will introduce you to the basics of generators with the yield keyword.

js tutorial about Create a Query String from an Object using Ramda's toPairs function

Create a Query String from an Object using Ramda's toPairs function

2:24 js

In this lesson, we'll use Ramda's toPairs function, along with map, join, concat and compose to create a reusable function that will convert an object to a querystring.

js tutorial about Filter an Array Based on Multiple Predicates with Ramda's allPass Function

Filter an Array Based on Multiple Predicates with Ramda's allPass Function

2:24 js

In this lesson, we'll filter a list of objects based on multiple conditions and we'll use Ramda's allPass function to create a joint predicate from multiple, individual predicate functions.

js tutorial about Using Text to Speech with NativeScript

Using Text to Speech with NativeScript

3:16 js

We will use the NativeScript Text-to-Speech plugin to have the iOS and Android speech synthesizers speak a provided text.

js tutorial about Convert Object Methods into Composable Functions with Ramda

Convert Object Methods into Composable Functions with Ramda

4:44 js

In this lesson, we'll look at how we can use Ramda's invoker and constructN functions to take methods of an object and turn them into reusable utility functions that are curried and accept their object as the last argument. We'll convert a dot-chained string of jQuery methods and create a composed function that can be applied to multiple elements.

js tutorial about Sort an Array of Objects by Multiple Fields with Ramda's sortWith

Sort an Array of Objects by Multiple Fields with Ramda's sortWith

1:58 js

Sorting an array of objects by multiple fields can be tricky. Even worse, the code can be tough to follow and making changes in the future is complicated by conditional logic in the sorting function. In this lesson we'll see how to simplify this using Ramda's sortWith along with ascending and descending. We'll sort an array of objects by multiple fields and the code will be readable and dead simple to change.

js tutorial about Refactor a Promise Chain to Function Composition using Ramda

Refactor a Promise Chain to Function Composition using Ramda

8:37 js

Promise chains can be a powerful way to handle a series of transformations to the results of an async call. In some cases, additional promises are required along the way. In cases where there are no new promises, function composition can reduce the number of dot chained thens you need. In this lesson, we'll look at how to take a promise chain, and reduce it down with function composition.

js tutorial about Refactor to a Point Free Function with Ramda's useWith Function

Refactor to a Point Free Function with Ramda's useWith Function

3:41 js

Naming things is hard and arguments in generic utility functions are no exception. Making functions "tacit" or "point free" removes the need for the extra parameter names and can make your code cleaner and more succinct. In this lesson, we'll create a normal, "pointed" function and then use ramda's useWith function to refactor our way to point-free bliss.

js tutorial about Debug Function Compositions with Ramda's Tap Function

Debug Function Compositions with Ramda's Tap Function

2:48 js

Functional composition is a great way to write declarative code that reads well. But sometimes, you need to get insight into what's happening at different steps in your composition. This is where tap comes in. With tap, we can run code that generates side-effects, like logging to the console, and our data will continue to be passed along, untouched.

js tutorial about Get a List of Unique Values From Nested Arrays with Ramda

Get a List of Unique Values From Nested Arrays with Ramda

5:55 js

In this lesson, we'll grab arrays of values from other arrays, resulting in a nested array. From there, we'll look at multiple ways to flatten the array structure using composition with map and unnest and then refactoring to use chain, AKA flatMap. Finally, we'll add Ramda's uniq function to remove duplicate values.

js tutorial about Create an Array From a Seed Value with Ramda's unfold

Create an Array From a Seed Value with Ramda's unfold

3:05 js

In this lesson we'll look at how you can use Ramda's unfold function to generate a list of values based on an initial seed.

js tutorial about Create a "Hello World" app using Electron

Create a "Hello World" app using Electron

2:18 js

Take the first step in learning how to create native desktop applications with Electron. We'll set up a package.json, create an npm start script to launch our app in development, and create a browser window and load a local HTML file into it.

An important concept to understand about Electron is it's multi-process architecture. The main process creates web pages by creating BrowserWindow instances, manages application lifecycle events, and more. Each BrowserWindow instance runs the web page in its own renderer process.

js tutorial about Handle Errors in Ramda Pipelines with tryCatch

Handle Errors in Ramda Pipelines with tryCatch

2:32 js

Handling your logic with composable functions makes your code declarative, leading to code that's easy to read and easy to test. Breaking that up to wrap some risky function in a try/catch block introduces imperative code and makes it harder to maintain that declarative approach. With Ramda's tryCatch function, you can handle errors right in the middle of a composition and leave your code clean and functional. We'll also see how you can use propOr to avoid common "cannot find X of undefined" errors.

js tutorial about Use the Exponentiation Operator in JavaScript

Use the Exponentiation Operator in JavaScript

3:30 js

ES2016 introduced the exponentiation operator ** to JavaScript. This lesson shows how it works and how you can use it as a replacement for the Math.pow function.

js tutorial about Check if an array contains an item using Array.prototype.includes

Check if an array contains an item using Array.prototype.includes

1:35 js

We often want to check if an array includes a specific item. It's been common to do this with the Array.prototype.indexOf method, but now we have a simpler way: We can use the Array.prototype.includes method, which is available starting with ES2016.

js tutorial about Convert a callback to a promise

Convert a callback to a promise

4:45 js

Promises are rapidly overtaking callbacks in popularity. In this lesson, I show you how to rewrite a callback using ES6 Promises. After getting a handle on the basics, we'll convert an error-first style callback to use the Resolve and Reject handlers built into Promises. If you aren't familiar with Promises, this lesson can be a great starting point by learning how to duplicate the behavior of a callback with ES6 Promises.

js tutorial about Refactor to Point Free Functions with Ramda using compose and converge

Refactor to Point Free Functions with Ramda using compose and converge

3:33 js

In this lesson we'll take some existing code and refactor it using some functions from the Ramda library, most notably, compose and converge. When we're done, we'll have taken a function with a couple of local variables and parameter references and converted it into more streamlined "point-free" or "tacit" functions.

js tutorial about Eliminate Function Arguments (Point-Free Style) with Ramda's Converge

Eliminate Function Arguments (Point-Free Style) with Ramda's Converge

3:47 js

When doing comparisons inside of functions, you end of relying heavily on the argument passed into the function. Ramda's converge allows you to do comparisons in a Point-Free style allowing you more flexibility with composing and constructing functions. This lesson walks through refactoring a function to Point-Free style using Ramda's Converge.

js tutorial about Count Words in a String with Ramda's countBy and invert

Count Words in a String with Ramda's countBy and invert

4:10 js

You can really unlock the power of ramda (and functional programming in general) when you combine functions. Counting words in a string may seem like a relatively difficult task, but ramda makes it easy by providing a countBy function. This lesson walks through using the countBy to count words in a string.

js tutorial about Identify and Deal with NaN in JavaScript

Identify and Deal with NaN in JavaScript

2:12 js

Dealing with the special NaN value can be tricky in JavaScript. It behaves like a number and not a number at the same time. This lesson explains how to identify it using the isNaN function or the Number.isNaN method.

js tutorial about Format console.log with CSS and String Template Tags

Format console.log with CSS and String Template Tags

4:36 js

The Chrome console allows you to format messages using CSS properties. This lesson walks you through the syntax of formatting your logs with css then refactoring into a template tag function to make formatting more reusable.

js tutorial about Convert a QueryString to an Object using Function Composition in Ramda

Convert a QueryString to an Object using Function Composition in Ramda

2:13 js

In this lesson we'll use a handful of Ramda's utility functions to take a queryString full of name/value pairs and covert it into a JavaScript object so we can access those properties in a more useful way. Along the way, we'll build up a composition and look at the tail, split, map and fromPairs functions, along with the crucial compose function.

js tutorial about Create Streams From Iterables With Most.js

Create Streams From Iterables With Most.js

3:59 js

One of the more powerful functions for creating streams in MostJS is the from function.

In this lesson, we use from to create streams from various Javascript Iterables, take a look at how to throw generator functions into the mix and, for good measure, take a sneak peek at how we can limit our streams using a function called take.

As a bonus, we see what it looks like to use Function.prototype.bind for a quick and dirty way to partially apply arguments to a function.

js tutorial about Declaratively Map Data Transformations to Object Properties Using Ramda evolve

Declaratively Map Data Transformations to Object Properties Using Ramda evolve

2:44 js

We don't always control the data we need in our applications, and that means we often find ourselves massaging and transforming our data. In this lesson, we'll learn how to transform objects in a declarative way using ramda's evolve function.

js tutorial about Public Class Fields with React Components

Public Class Fields with React Components

4:52 js

Public Class Fields allow you to add instance properties to the class definition with the assignment operator (=). In this lesson, we'll look at their use case for simplifying event callbacks and state initialization with a React component.

js tutorial about Select a Subset of Properties from a Collection of Objects in Ramda

Select a Subset of Properties from a Collection of Objects in Ramda

2:59 js

In this lesson we'll take an array of objects and map it to a new array where each object is a subset of the original. We'll look at multiple ways to accomplish this, refactoring our code into a simple and easy to read function using Ramda's map, pick and project functions.

js tutorial about Use ES6 Proxies

Use ES6 Proxies

1:32 js

A JavaScript Proxy allows you to intercept operations performed on objects, arrays, or functions like property lookup, assignment, invocation, property deletion, and more to add custom behavior. In this lesson we look at how to intercept property lookup with the get "trap" that will allow us to get items starting from the end of the array with ease.

js tutorial about Curry and Uncurry Functions with Ramda

Curry and Uncurry Functions with Ramda

3:39 js

Most of the functions offered by the ramda library are curried by default. Functions you've created or that you've pulled in from another library may not be curried. Ramda's curry and curryN functions allow you to take a non-curried function and use it as a curried functions. In the case where you have a manually curried function and you want to just call it like a normal function, you can use uncurryN to get back a function that accepts all of the arguments at once.

js tutorial about Create Streams From Single Values With Most.js

Create Streams From Single Values With Most.js

2:01 js

Most provides many means for creating streams, the simplest of which is the of function. In this lesson, we demonstrate the use of of to lift a single value into a stream. We also show off the just alias of of, as well as, a common method for currying a function.

js tutorial about Combine Objects with Object.assign and Lodash merge

Combine Objects with Object.assign and Lodash merge

2:28 js

Learn how to use Object.assign to combine multiple objects together. This pattern is helpful when writing libraries that have a set of default options where you want to allow a user to override specific options. You'll also learn how to use a third party library to recursively merge nested objects together.

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