Learn These Modern Web Development Tools

Browse Lessons by Technology

Browse all lessons.

showing All 825 lessons...

Updating Babel 5 to 6

Getting a Pull Request Merged and Wrapping up

How to squash multiple git commits

How to rebase a git Pull Request branch

How to update a Pull Request on GitHub

How to Collaborate on a Pull Request on GitHub

How to create a Pull Request on GitHub

Setting up the project locally

How to Fork and Clone a GitHub Repository

Identifying How to Contribute to an Open Source Project on GitHub

How to authenticate with GitHub using SSH

How to install Git SCM

Exploring a Repository

Exploring GitHub

Introduction to GitHub

Using Observable.create for fine-grained control

CSS :not Selector

P

Create Modals with Ionic

P

Build a Powerful List with Ionic

P

Convert a UI Route into an Angular Directive

P

Build a Sidebar Layout with Ionic

P

Device Interaction in an Ionic App with Cordova Plugins

P

Prepare an Ionic App for Ionic Components and Styling

P

Build, Emulate, and Debug an Ionic App

P

Convert a Web Application into an Ionic App

P

Build and Run an Ionic App from Scratch

Redirect the browser using JavaScript

Reacting to multiple inputs using RxJS's combineLatest

Elm in 5 minutes

Overview of Cycle.js

Exporting values from components through sinks

Isolating component instances

Multiple independent instances of a component

Using the component in the main() function

Our first component: a labeled slider

Model-View-Intent pattern for separation of concerns

Body-Mass Index calculator built in Cycle.js

Using the HTTP Driver

An interactive counter in Cycle.js

Hello World in Cycle.js

From toy DOM Driver to real DOM Driver

Hyperscript as our alternative to template languages

Fine-grained control over the DOM Source

Making our toy DOM Driver more flexible

Generalizing run() function for more types of sources

Read effects from the DOM: click events

Introducing run() and driver functions

Customizing effects from the main function

Main function and effects functions

The Cycle.js principle: separating logic from effects

AngularJS tutorial about Updating Babel 5 to 6

Updating Babel 5 to 6

5:00 AngularJS

Babel 6 was a major change in how Babel works and is configured. In this lesson, find out how to update this Angular application built with Webpack to use Babel 6.

For more information about how modules have changed in Babel 6, see this blogpost by Kent.

JavaScript tutorial about Getting a Pull Request Merged and Wrapping up

Getting a Pull Request Merged and Wrapping up

1:13 JavaScript

Let’s look at the GitHub commits and list of contributors now that our pull request has been merged. And we’ll wrap this series up with a few tips. Feel free to practice on stack-overflow-copy-paste, and see the Pull Request demonstrated in this lesson here.

JavaScript tutorial about How to squash multiple git commits

How to squash multiple git commits

2:53 JavaScript

Often, project maintainers prefer that a single pull request be represented by a single commit. It makes the git history cleaner and easier to understand. So before your pull request is merged you’ll want to do an interactive git rebase to squash all of your commits and fix your commit message.

JavaScript tutorial about How to rebase a git Pull Request branch

How to rebase a git Pull Request branch

3:39 JavaScript

Sometimes your Pull Request can fall behind master in a repository and occasionally that will result in merge conflicts which you have to manage yourself. In this lesson we’ll learn how to use git rebase to update our pull request branch to the latest version of master and resolve merge conflicts with git.

JavaScript tutorial about How to update a Pull Request on GitHub

How to update a Pull Request on GitHub

2:57 JavaScript

Once you’ve made your code updates locally, all you need to do is commit those changes and push that commit to your Pull Request branch. In this lesson we’ll also talk about how to skip git hooks that may be included in the project when you just need help.

JavaScript tutorial about How to Collaborate on a Pull Request on GitHub

How to Collaborate on a Pull Request on GitHub

2:21 JavaScript

It’s not often that you’ll get a Pull Request on GitHub just right the first time you try. You generally will iterate with the project maintainer on your solution before your PR gets merged. In this lesson, we’ll explore some of the tools that projects use to manage contributions to open source projects on GitHub.

JavaScript tutorial about How to create a Pull Request on GitHub

How to create a Pull Request on GitHub

6:19 JavaScript

Often when making a change, you want to verify your approach with the maintainer or ask them for help. In this lesson we’ll make a change and commit that WIP change. Then we’ll create a pull request requesting help from the project maintainer.

JavaScript tutorial about Setting up the project locally

Setting up the project locally

1:18 JavaScript

Before you start making your change, you often need to set up your environment for the changes. This is where the repositories contributing instructions come in really handy. In this lesson we’ll get our environment setup and ready for changes.

JavaScript tutorial about How to Fork and Clone a GitHub Repository

How to Fork and Clone a GitHub Repository

2:41 JavaScript

You cannot push code to repositories that you don’t own or have sufficient permission to. So instead, you make your own copy of the repository by “forking” it. You are then free to make any changes you wish to your repository.

JavaScript tutorial about Identifying How to Contribute to an Open Source Project on GitHub

Identifying How to Contribute to an Open Source Project on GitHub

2:15 JavaScript

When you find a bug in an open source project, you know exactly the change you want to make. Other times you just want to find a way to contribute. Either way, you’ll need to know how to the project maintainers want to run the project and work with them to come up with an implementation for the fix/feature. And if you don't even know what project to start contributing to, check out this blogpost for inspiration on how to identify a good project to contribute to.

JavaScript tutorial about How to authenticate with GitHub using SSH

How to authenticate with GitHub using SSH

3:34 JavaScript

Anytime you push code to GitHub, you must be authenticated so GitHub knows you are authorized to make changes. In this lesson we’ll learn how to authenticate with GitHub using SSH so we don’t have to enter our username and password each time we push code to GitHub.

JavaScript tutorial about How to install Git SCM

How to install Git SCM

2:15 JavaScript

Let’s install the Git Source Control Management software so we can interact with repositories hosted on GitHub.

JavaScript tutorial about Exploring a Repository

Exploring a Repository

4:07 JavaScript

The basic unit of GitHub is a repository. This is where you code is stored and GitHub allows you to interact with others and with the code in great ways. In this lesson we talk about Watching, Staring, and Forking a repository. We also cover GitHub issues and pull requests and various other stats about a GitHub repository.

JavaScript tutorial about Exploring GitHub

Exploring GitHub

1:47 JavaScript

GitHub adds a lot of great features on top of git repository hosting. We’ll take a look at some of these features including:

  • How to creating a repository and organization on GitHub
  • How to explore and find projects on GitHub
  • About GitHub gists
  • Searching pull requests and issues on GitHub
JavaScript tutorial about Introduction to GitHub

Introduction to GitHub

0:47 JavaScript

In this lesson we’ll talk about what GitHub is and how to sign up for a GitHub account so you can contribute to an open source project on GitHub.

RxJS tutorial about Using Observable.create for fine-grained control

Using Observable.create for fine-grained control

3:55 RxJS

Sometimes, the helper methods that RxJS ships with such as fromEvent, fromPromise etc don't always provide the exact values you want & you end up having to do extra work to force them into the shape you require. For more fine-grained control you can use Observable.create which allows you to project only the values which matter to you.

CSS tutorial about CSS :not Selector

CSS :not Selector

0:53 CSS PRO

The CSS :not() selector allows us to exclude a subset of elements matched by our selector. In this example we refactor two selectors down to one using the CSS :not() selector.

AngularJS tutorial about Create Modals with Ionic

Create Modals with Ionic

14:11 AngularJS PRO

In this lesson, we learn how to build modals in Ionic. We use the ion-modal-view directive to wrap our “create” and “edit” forms with modal goodness, as well as use the ion-header-bar directive to put a nice bar at the top of our forms. Finally, we use the $ionicModal service to give life to our modals by integrating them with our controllers.

AngularJS tutorial about Build a Powerful List with Ionic

Build a Powerful List with Ionic

12:38 AngularJS PRO

In this lesson, we are going to dig into Ionic lists and make use of some awesome list features that Ionic gives us for free. We are going to learn how to use the following Ionic directives:

  • ion-nav-buttons - Use nav buttons to set the buttons on your ionNavBar.
  • ion-list - The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
  • ion-item- Used to create items inside of an ionList.
  • ion-delete-button - A child of ionItem, this element allows a developer to show/hide a delete button within an ionItem with ease.
  • ion-reorder-button - A child of ionItem, this element allows a developer to reorder an ionItem within a list easily.
AngularJS tutorial about Convert a UI Route into an Angular Directive

Convert a UI Route into an Angular Directive

2:49 AngularJS PRO

In this lesson, we are going to turn two forms into Angular directives in preparation for turning them into Ionic modals. This isn’t a complicated step, but it puts us in a better place for creating the modals.

AngularJS tutorial about Build a Sidebar Layout with Ionic

Build a Sidebar Layout with Ionic

8:49 AngularJS PRO

In this lesson, we learn how to build a sidebar layout using only Ionic directives. Ionic provides some powerful functionality with very few semantics. Here are all the directives we will learn about:
- ion-side-menus - A container element for side menu(s) and the main visible content.
- ion-side-menu-content - A container for the main visible content, sibling to one or more ionSideMenu directives.
- ion-side-menu - A container for a side menu, sibling to an ionSideMenuContent directive.
- ion-nav-view - Used to render templates in your application. Each template
is part of a state. States are usually mapped to a url, and are defined programatically
using angular-ui-router (see their docs for reference).
- ion-view - A container for view content and any navigational and header bar information. Used as a child of ionNavView.
- ion-nav-bar - If we have an ionNavView directive, we can also create an
ionNavBar, which will create a topbar that updates as the application state changes.
- ion-nav-buttons - Use nav buttons to set the buttons on your ionNavBar
from within an ionView.
- ion-content- Provides an easy to use content area that can be configured
to use Ionic’s custom Scroll View, or the built in overflow scrolling of the browser.
- ion-list - The List is a widely used interface element in almost any mobile app, and can include
content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
- ion-item - Used to create items inside of an ionList.

AngularJS tutorial about Device Interaction in an Ionic App with Cordova Plugins

Device Interaction in an Ionic App with Cordova Plugins

4:59 AngularJS PRO

In this lesson, we are going to learn how to interact with native components through Cordova plugins. We will walk through how to add a Cordova plugin to our application and use it to interact with our native device. In this case, we are going to install a plugin that will allow us to open URLs in a mobile browser from within our Ionic app.

  • item
  • item
AngularJS tutorial about Prepare an Ionic App for Ionic Components and Styling

Prepare an Ionic App for Ionic Components and Styling

2:12 AngularJS PRO

In this lesson, we are going to include the necessary assets for the functionality and styles of the Ionic directives we will include in our app.

AngularJS tutorial about Build, Emulate, and Debug an Ionic App

Build, Emulate, and Debug an Ionic App

2:53 AngularJS PRO

In this lesson, we are going to build an Ionic app for the iOS platform, and then emulate iOS on our computer. We are going to cover some important command-line options when emulating an Ionic application. We will then see how these options play a critical role in debugging our applications.

AngularJS tutorial about Convert a Web Application into an Ionic App

Convert a Web Application into an Ionic App

2:24 AngularJS PRO

In this lesson, we are going to demonstrate how easy it is to copy existing Angular code into an Ionic app. It is literally as simple as removing unnecessary code from the Ionic app and pasting in the guts of our Angular application. Along the way, we will update some dependencies and discover a gotcha for including assets from a CDN.

AngularJS tutorial about Build and Run an Ionic App from Scratch

Build and Run an Ionic App from Scratch

1:49 AngularJS

In this lesson, we learn how to install Ionic and Cordova. We then build an app from scratch using the Ionic CLI and a blank starter template.

JavaScript tutorial about Redirect the browser using JavaScript

Redirect the browser using JavaScript

2:13 JavaScript

There are two common ways to redirect the browser in JavaScript. Both use window.location but they differ in how they interact with Session History (and hence, the browser's back button). In this lesson, you'll learn how they're different and how to use each of them.

RxJS tutorial about Reacting to multiple inputs using RxJS's combineLatest

Reacting to multiple inputs using RxJS's combineLatest

7:36 RxJS

There are certain situations in which you’ll want access to the latest values from multiple Observables whenever any one of them produces a value. This is exactly what combineLatest was designed for, and in this lesson we’ll use it to build up an image url that requires values from 3 different inputs - triggered every time any one of them change.

Elm tutorial about Elm in 5 minutes

Elm in 5 minutes

5:21 Elm

We are going to take a high-level look at what an Elm application looks like? We show how to structure apps, as well as, Elm’s elegant syntax by building a small app.

RxJS tutorial about Overview of Cycle.js

Overview of Cycle.js

2:28 RxJS

This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.

RxJS tutorial about Exporting values from components through sinks

Exporting values from components through sinks

3:30 RxJS

Our app is not yet a BMI calculator, because it only has two sliders, but doesn't show the calculated BMI number. In this lesson we will learn how to export any stream from a child component and use it in the parent component, in order to display the BMI calculation on the DOM.

RxJS tutorial about Isolating component instances

Isolating component instances

3:39 RxJS

We added classNames to pre-processing and post-processing steps when calling the LabeledSlider, in order to instances independent of each other. It would be better if we could hide these steps away. This lesson introduces the isolate() helper function to achieve that.

RxJS tutorial about Multiple independent instances of a component

Multiple independent instances of a component

4:31 RxJS

Once we have a labeled slider component inside the main function, we should be able to create another labeled slider. This lesson teaches how to accomplish that, and make sure those two instances work independently of each other.

RxJS tutorial about Using the component in the main() function

Using the component in the main() function

1:57 RxJS

We have made a Cycle.js app for generic labeled slider which can be configured through props, but how can we reuse it in other Cycle.js apps? This lesson shows how we can embed any Cycle program inside a larger Cycle program in a very simple manner.

RxJS tutorial about Our first component: a labeled slider

Our first component: a labeled slider

8:05 RxJS

We are starting to get a better architecture for these UI apps. But we still have a problem of repeating code for the sliders, since they share so much in common in looks and functionality. This lessons shows how we can create a generic labeled slider as a main() function receiving properties as sources.

RxJS tutorial about Model-View-Intent pattern for separation of concerns

Model-View-Intent pattern for separation of concerns

3:17 RxJS

We built the BMI calculator all inside one function: main(). As apps scale, we don't want main() to grow. We need an organized pattern where each function focuses on doing one thing. This lesson shows how we can easily refactor the main() function into three parts: Intent, Model, and View.

RxJS tutorial about Body-Mass Index calculator built in Cycle.js

Body-Mass Index calculator built in Cycle.js

6:40 RxJS

So far we have been writing very small apps in Cycle.js. Let's start growing the size of the apps we build. This time, we will see how to build a simple Body-Mass Index Calculator.

RxJS tutorial about Using the HTTP Driver

Using the HTTP Driver

12:19 RxJS

Let's see next how to use the HTTP driver to generate requests and capture responses. We will build a small app to fetch a single piece of data from a REST server and display that on the DOM.

RxJS tutorial about An interactive counter in Cycle.js

An interactive counter in Cycle.js

8:08 RxJS

This lesson shows how we can create a more interactive app: a counter display with buttons to increment and decrement it. This reveals how we can use the RxJS scan() operator to remember past values and keep state.

RxJS tutorial about Hello World in Cycle.js

Hello World in Cycle.js

4:44 RxJS

Now you should have a good idea what Cycle.run does, and what the DOM Driver is. In this lesson, we will not build a toy version of Cycle.js anymore. Instead, we will learn how to use Cycle.js to solve problems. We will start by making a simple Hello world application.

RxJS tutorial about From toy DOM Driver to real DOM Driver

From toy DOM Driver to real DOM Driver

4:52 RxJS

This lessons shows how we are able to easily swap our toy DOM Driver with the actual Cycle.js DOM Driver, a more solid, more flexible, more efficient implementation.

RxJS tutorial about Hyperscript as our alternative to template languages

Hyperscript as our alternative to template languages

2:53 RxJS

Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can create our own template language is to write a function that returns these objects for us. This lessons shows how we can use these functions as a DSL to create our DOM description objects.

RxJS tutorial about Fine-grained control over the DOM Source

Fine-grained control over the DOM Source

2:58 RxJS

What if wanted to change the behavior of our app reset the timer every time the mouse hovers over it? Currently we only support clicks, and they are hard coded in the DOM Driver. This lesson will introduce DOMSource.selectEvents(), a way of making the DOM Source rich and allowing the main() function to determine which read effects it needs.

RxJS tutorial about Making our toy DOM Driver more flexible

Making our toy DOM Driver more flexible

5:22 RxJS

Our previous toy DOM Driver is still primitive. We are only able to sends strings as the textContent of the container element. We cannot yet create headers and inputs and all sorts of fancy DOM elements. In this lesson we will see how to send objects that describe what elements should exist, instead of strings as the DOM sink.

RxJS tutorial about Generalizing run() function for more types of sources

Generalizing run() function for more types of sources

4:23 RxJS

Our application was able to produce write effects, through sinks, and was able to receive read effects, through the DOM sources. However, the main function only gets the DOMSource as input. This lessons shows how we can generalize main to receive an object of sources, containing all kinds of read effects that we can use.

RxJS tutorial about Read effects from the DOM: click events

Read effects from the DOM: click events

6:00 RxJS

So far we only had effects that write something to the external world, we are not yet reading anything from the external world into our app. This lesson shows how we can change the DOM Driver to return a "DOM Source" representing read effects, such as click events. We will leverage that to create an interactive application.

RxJS tutorial about Introducing run() and driver functions

Introducing run() and driver functions

4:06 RxJS

The last part of the code we wrote is neither logic nor effects. It is code which ties together logic (main) with effects. We can encapsulate that in a run() function. This lesson shows how we can structure these pieces together, and generalize effect handling with "drivers".

RxJS tutorial about Customizing effects from the main function

Customizing effects from the main function

2:05 RxJS

How can we show one string on the DOM, and a completely different string on Console log? This lesson shows how we can make our main function return multiple Observables, each one targeted at a different type of effect.

RxJS tutorial about Main function and effects functions

Main function and effects functions

2:10 RxJS

We need to give structure to our application with logic and effects. This lessons shows how we can organize our code into two parts: main() function for logic, and effects functions for effects.

RxJS tutorial about The Cycle.js principle: separating logic from effects

The Cycle.js principle: separating logic from effects

3:30 RxJS

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.