Learn These Modern Web Development Tools

Browse Lessons by Technology

Browse all lessons.

showing All 542 lessons...

Set up a killer React dev environment quickly with hjs-webpack

PRO

Scraping Dynamic JavaScript Websites with Nightmare

Array.prototype.reduce in JavaScript by example

PRO

WebStorm - Installing Custom Color Schemes (dayleress/colour-schemes)

Linting React JSX with ESLint (in ES6)

PRO

Linting JavaScript with ESLint

Creating a Node.js module

PRO

React Native: Create a Swipe Panel

PRO

How to Write a JavaScript Library - Unit Testing with Mocha and Chai

How to Write a JavaScript Library - Setting up Unit Testing with Mocha and Chai

How to Write a JavaScript Library - Publishing a beta version

How to Write a JavaScript Library - Releasing a new version to npm

React tutorial about Set up a killer React dev environment quickly with hjs-webpack

Set up a killer React dev environment quickly with hjs-webpack

6:17 React PRO

You can easily spend hours configuring the perfect dev environment with all the latest hotness like ES6 (and beyond) support, hot reloading, and a myriad of other features. This lesson shows how to use hjs-webpack to get the same thing in a matter of minutes.

Node.js tutorial about Scraping Dynamic JavaScript Websites with Nightmare

Scraping Dynamic JavaScript Websites with Nightmare

2:43 Node.js

Many websites have more than just simple static content. Dynamic content which is rendered by JavaScript requires browser to be able to scrape data. This video demonstrates how to use Nightmare (which is a wrapper around PhantomJS) to launch a url and scrape dynamic data.

JavaScript tutorial about Array.prototype.reduce in JavaScript by example

Array.prototype.reduce in JavaScript by example

4:49 JavaScript PRO

Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might use Array.prototype.reduce to:

  • Sum an array of numbers
  • Reduce an array of objects to a sum of a given property
  • Group an array of objects by key or a set of given criteria
  • Count the number of objects in an array by key or a given set of criteria
Misc tutorial about WebStorm - Installing Custom Color Schemes (dayleress/colour-schemes)

WebStorm - Installing Custom Color Schemes (dayleress/colour-schemes)

2:12 Misc

In this lesson, we'll walk through installing a custom color scheme into our WebStorm IDE. Dayle Rees's daylerees/colour-schemes has a great collection of themes ready to install in different formats for various editors.

For this example, we will install the Peacocks In Space theme into an OS X WebStorm 11 EAP installation. Note: This process will be very similar (or identical) for previous versions of WebStorm and other editors in the JetBrain's family of editors.

React tutorial about Linting React JSX with ESLint (in ES6)

Linting React JSX with ESLint (in ES6)

4:55 React PRO

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins. We walk through setting up ESLint in a project, using the eslint --init CLI tool with the JSX and ES6 options, writing a React component in JSX, and adding some extra react linting rules with a plugin. ESLint is built to be "pluggable" with simple, extendable, modular rules and an API for writing and using plugins. ESLint has many rules which are all turned off by default; you can extend the core "recommended" rules which will catch common JavaScript errors, and you can also turn on stylistic rules for code consistency. You can also use plugin rules which we do in this lesson with the eslint-plugin-react package.

JavaScript tutorial about Linting JavaScript with ESLint

Linting JavaScript with ESLint

3:08 JavaScript

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins. We walk through setting up ESLint in a project, using the "init" CLI tool, configuring warnings/errors for rules, and adding editor plugins and build integrations. ESLint is built to be "pluggable" with simple, extendable, modular rules and an API for writing and using plugins. ESLint has many rules which are all turned off by default; you can extend the core "recommended" rules which will catch common JavaScript errors, and you can also turn on stylistic rules for code consistency.

Node.js tutorial about Creating a Node.js module

Creating a Node.js module

4:30 Node.js PRO

Sharing code and extending functionality in node.js is often done with modules. In this lesson, you will learn how to use npm init to scaffold a new module, verify proper installation, and identify the components needed to publish your module to public and private registries.

React tutorial about React Native: Create a Swipe Panel

React Native: Create a Swipe Panel

7:03 React PRO

In this lesson we'll use PanResponder and LayoutAnimation to create a smoothly animated Swipe Panel commonly implemented in iOS and Android applications.

JavaScript tutorial about How to Write a JavaScript Library - Unit Testing with Mocha and Chai

How to Write a JavaScript Library - Unit Testing with Mocha and Chai

3:01 JavaScript

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use describe and it to outline your tests and make sure you don't break your library in the future.

JavaScript tutorial about How to Write a JavaScript Library - Setting up Unit Testing with Mocha and Chai

How to Write a JavaScript Library - Setting up Unit Testing with Mocha and Chai

2:44 JavaScript

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

JavaScript tutorial about How to Write a JavaScript Library - Publishing a beta version

How to Write a JavaScript Library - Publishing a beta version

3:37 JavaScript

Sometimes you're not quite ready to release a full on version of your open source library to npm. In this lesson, learn how to publish a beta version so people can try it out without tampering with anyone else using your library.

JavaScript tutorial about How to Write a JavaScript Library - Releasing a new version to npm

How to Write a JavaScript Library - Releasing a new version to npm

3:24 JavaScript

When you want to add a new feature, fix a bug, or push out a breaking API change, you need to take Semantic Versioning into account. In this lesson, learn what each number means as well as how to push out a new version of your library.