Browse Lessons by Technology
showing All 810 lessons...
Sometimes, the helper methods that RxJS ships with such as
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.
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.
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.
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:
ionItem, this element allows a developer to show/hide a delete button within an
ionItem, this element allows a developer to reorder an
ionItemwithin a list easily.
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.
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
- ion-side-menu - A container for a side menu, sibling to an
- 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
- 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
from within an
- 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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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".
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.
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.
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.
WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.
JSON string. This API allows you to customize the serialization very specifically as well.
We can identify the start and end of a line using Line Anchors. When dealing with multiple line matches we can utilize the multiline regular expression flag.
Regular Expression Backreferences provide us a method to match a previously captured pattern a second time.
Regular Expression Word Boundaries allow to perform "whole word only" searches within our source string.
Lookaheads allow us to match a pattern followed by another pattern without including the second pattern in our match.
In this lesson we'll capture groups of characters we wish to match, use quantifiers with those groups, and use references to those groups in String.prototype.replace.
In this lesson we'll learn shorthands for common character classes as well as their negated forms.
Regular Expression Character Classes define a group of characters we can use in conjunction with quantifiers.
Regular Expression Quantifiers allow us to identify a repeating sequence of characters of minimum and maximum lengths. In this lesson we'll use Regular Expression Quantifiers to match repeated patterns, common Quantifier patterns, and using shorthand for those common Quantifier patterns.
The simplest use of Regular Expressions is to find a plain text pattern. In this lesson we'll look at at finding plain text patterns as well as using the metacharacter "." and how to escape a metacharacter.
A common problem when dealing with some kinds of data is that not every object has the same nested structure. lukeskywalker.parents.father.isjedi works, but anakinskywalker.parents.father.isjedi throws an exception, because anakin_skywalker.parents.father is undefined. But we can reduce a path to provide safe default values and avoid exceptions when walking the same path on non-homogenous objects - watch to learn how! :)