Browse all JavaScript lessons.

showing All 556 lessons...

Add a Google OAuth 2.0 Login Button to Your Site

P

Update published npm packages using np

Set up testing of source code using jest with npm scripts

Publish npm packages using npm publish

Test npm packages locally in another project using npm link

Document npm packages using README files

Add package functionality using npm scripts

Run builds on file changes using watch with npm scripts

Set up compilation of source code using babel with npm scripts

Add manifest files to npm packages using npm init

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

P

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

P

Create a Reusable Mapping Function with Ramda's Map

P

Capture Drawings and Signatures in a NativeScript app

P

Composing emails in a NativeScript app

P

Using the device Phone and SMS with NativeScript

P

Use Speech Recognition with NativeScript

P

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

P

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

P

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

P

Using Text to Speech with NativeScript

P

Convert Object Methods into Composable Functions with Ramda

P

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

P

Refactor a Promise Chain to Function Composition using Ramda

P

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

P

Debug Function Compositions with Ramda's Tap Function

P

Get a List of Unique Values From Nested Arrays with Ramda

P

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

P

Create a "Hello World" app using Electron

Handle Errors in Ramda Pipelines with tryCatch

P

Use the Exponentiation Operator in JavaScript

P

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

P

Convert a callback to a promise

P

Refactor to Point Free Functions with Ramda using compose and converge

P

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

P

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

P

Identify and Deal with NaN in JavaScript

P
javascript tutorial about Add a Google OAuth 2.0 Login Button to Your Site

Add a Google OAuth 2.0 Login Button to Your Site

7:12 javascript PRO

Many sites rely on Google's login functionality for creating accounts. This lesson walks you through using the Google OAuth 2.0 api to login to Google and access the basic profile information for your own site.

npm tutorial about Update published npm packages using np

Update published npm packages using np

1:38 npm

When we want to update our package we need to do a few things: pull latest from our git remote, bump the npm version and git tag, push to our remote, push tags to our remote, and then run npm publish. Phew, that’s a lot. In this lesson, we will set up a release script using the np package to simplify this process.

npm tutorial about Set up testing of source code using jest with npm scripts

Set up testing of source code using jest with npm scripts

2:42 npm

Adding tests to our package can ensure it works as expected. We will install a test framework jest. We will then create a test script to run our tests. Then we will create a test:watch script to keep tests running while we develop.

npm tutorial about Publish npm packages using npm publish

Publish npm packages using npm publish

1:29 npm

In this lesson we will publish our package. We will first add a prepublish script that runs our build script; this will ensure the built folder gets added to npm when published. We will also add a .npmignore so that only our built files get installed. We need to run npm adduser to log in to an npm account. We can then run npm publish to publish our package and view it on npm.

Note: if you want to actually publish the package from this course, you'll need to rename it since sensitive-words is already taken. You can use a scoped package name for this as well.

npm tutorial about Test npm packages locally in another project using npm link

Test npm packages locally in another project using npm link

4:01 npm

We will import our newly published package into a new project locally to make sure everything is working as expected. We can do this locally before publishing with npm link. This creates a symbolic link in our node_modules folder, so our unpublished local package is used like an installed published package. This is important because it lets us test making changes to our package and using them immediately without publishing and updating a package with each change we want to test. This is good practice to do before publishing a new version of a package.

npm tutorial about Document npm packages using README files

Document npm packages using README files

2:01 npm

Users need to know how to use our package. We can make this easy for them with a README.md file containing information about our project. We will put a simple example at the top for easy use.

npm tutorial about Add package functionality using npm scripts

Add package functionality using npm scripts

3:18 npm

We will run our dev and test:watch scripts to develop; we will create some tests for the expected functionality of our package; it should conceal any words in a string that are in a blacklist of words. Then we will write the logic to make those tests pass.

npm tutorial about Run builds on file changes using watch with npm scripts

Run builds on file changes using watch with npm scripts

0:55 npm

We can set up a file watcher to compile automatically while we develop. In this lesson we wire up a new dev script to run the build script when source files change.

babel tutorial about Set up compilation of source code using babel with npm scripts

Set up compilation of source code using babel with npm scripts

2:27 babel

We can write our package using the latest JavaScript syntax with a compilation step. In this lesson we will install babel-cli and babel-preset-latest and wire up a build script to compile our code using the babel “latest” preset when source files change. This means those using our package can use it in any version of JavaScript even though we are using the latest syntax for our source code.

npm tutorial about Add manifest files to npm packages using npm init

Add manifest files to npm packages using npm init

2:00 npm

We can create a package.json automatically by running npm init and answering the questions it gives. This becomes the “manifest” file for our package; it is used to populate the published npm page as well as to help the package manager to know how to install the package in consuming projects.

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

Add version control to npm packages using git init

0:57 npm

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

angular tutorial about Create Flex Based Containers Using FlexboxLayout

Create Flex Based Containers Using FlexboxLayout

5:15 angular 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.

angular tutorial about Create an Absolute Positioned Layout Using AbsoluteLayout

Create an Absolute Positioned Layout Using AbsoluteLayout

1:31 angular 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.

angular tutorial about Position Views in a Dock Using DockLayout

Position Views in a Dock Using DockLayout

1:42 angular 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.

angular tutorial about Add Responsive Wrapping Using WrapLayout

Add Responsive Wrapping Using WrapLayout

2:16 angular 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.

angular tutorial about Make a Grid Layout Using GridLayouts

Make a Grid Layout Using GridLayouts

3:40 angular 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.

angular tutorial about Create Vertical/Horizontal Layouts with StackLayout

Create Vertical/Horizontal Layouts with StackLayout

1:02 angular 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.

javascript tutorial about Use a Javascript Array to Construct a Maybe

Use a Javascript Array to Construct a Maybe

7:19 javascript PRO

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.

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

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.

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

Create a Reusable Mapping Function with Ramda's Map

3:52 ramda PRO

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.

angular tutorial about Capture Drawings and Signatures in a NativeScript app

Capture Drawings and Signatures in a NativeScript app

4:19 angular PRO

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.

nativescript tutorial about Composing emails in a NativeScript app

Composing emails in a NativeScript app

3:19 nativescript PRO

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

nativescript tutorial about Using the device Phone and SMS with NativeScript

Using the device Phone and SMS with NativeScript

3:08 nativescript PRO

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.

nativescript tutorial about Use Speech Recognition with NativeScript

Use Speech Recognition with NativeScript

4:24 nativescript PRO

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.

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

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.

javascript tutorial about Delegate JavaScript (ES6) generator iteration control

Delegate JavaScript (ES6) generator iteration control

1:48 javascript 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.

javascript tutorial about Iterate over JavaScript (ES6) generators

Iterate over JavaScript (ES6) generators

1:01 javascript 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.

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

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

6:52 javascript 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.

javascript tutorial about Error handling in JavaScript (ES6) generators

Error handling in JavaScript (ES6) generators

2:16 javascript 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!

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

Send messages to and from JavaScript (ES6) generators

1:48 javascript 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.

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

Use JavaScript (ES6) generators to pause function execution

1:47 javascript 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.

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

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.

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

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.

nativescript tutorial about Using Text to Speech with NativeScript

Using Text to Speech with NativeScript

3:16 nativescript PRO

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

ramda tutorial about Convert Object Methods into Composable Functions with Ramda

Convert Object Methods into Composable Functions with Ramda

4:44 ramda PRO

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.

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

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.

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

Refactor a Promise Chain to Function Composition using Ramda

8:37 ramda PRO

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.

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

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.

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

Debug Function Compositions with Ramda's Tap Function

2:48 ramda PRO

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.

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

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.

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

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.

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

Create a "Hello World" app using Electron

2:18 electron

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.

ramda tutorial about Handle Errors in Ramda Pipelines with tryCatch

Handle Errors in Ramda Pipelines with tryCatch

2:32 ramda PRO

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.

javascript tutorial about Use the Exponentiation Operator in JavaScript

Use the Exponentiation Operator in JavaScript

3:30 javascript PRO

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.

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

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.

javascript tutorial about Convert a callback to a promise

Convert a callback to a promise

4:45 javascript PRO

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.

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

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.

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

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

3:47 ramda PRO

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.

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

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.

javascript tutorial about Identify and Deal with NaN in JavaScript

Identify and Deal with NaN in JavaScript

2:12 javascript PRO

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.

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