“Live” Coding an Expandable Header Component in Ionic 2 – Part 2

“Live” Coding an Expandable Header Component in Ionic 2 – Part 2

In this two part screencast, I walk through building this user interface in Ionic 2. The end result is a custom header component that expands and shrinks as the user controls, and any elements that no longer fit in the header as it shrinks will fade out. Here’s what it will look like when it’s done: There will also be a follow-up blog post for these videos, which will add a few final touches to the application. Here’s the video : continue reading.

“Live” Coding an Expandable Header Component in Ionic 2 – Part 1

“Live” Coding an Expandable Header Component in Ionic 2 – Part 1

In this two part screencast, I walk through building this user interface in Ionic 2. The end result is a custom header component that expands and shrinks as the user controls, and any elements that no longer fit in the header as it shrinks will fade out. Here’s what it will look like when it’s done: There will also be a follow-up blog post for these videos, which will add a few final touches to the application. Here’s the video : continue reading.

Getting Familiar with CouchDB and Futon

Getting Familiar with CouchDB and Futon

Over the past few weeks, I’ve been working on writing a series of tutorials on how to use CouchDB and PouchDB in Ionic 2. This video tutorial is sort of an aside to that – I wanted to create a demonstration of creating CouchDB databases and playing around with the data a bit, just to help paint a picture of what working with CouchDB actually looks like. Here’s the video : Video Notes Once you have CouchDB installed, you can access Futon which provides an interface to… continue reading.

Safely Displaying Data with the Elvis Operator

Safely Displaying Data with the Elvis Operator

When building Ionic 2 applications, our classes and templates work hand in hand to render the view that the user sees. Our classes are able to define data that we can display in templates through property bindings, and our templates can trigger functions in our classes through event bindings. If you’re unfamiliar with the concept of interpolation, that is displaying stuff in your templates using , I’d recommend watching this video tutorial first: Component and Template… continue reading.

E2E (End-to-End) Testing in Ionic 2: Test Driven Development

E2E (End-to-End) Testing in Ionic 2: Test Driven Development

In the past two tutorials on E2E testing in Ionic, I’ve introduced the concept of End-to-End testing and some ways that you can better structure your E2E tests. If you are new to E2E testing you will likely understand at this point that an End-to-End test can test your application in a way that the user will actually use it. This might be things like: The user can select a product and add it to their cart The user can log in and change their account information The user can… continue reading.

CouchDB, PouchDB, and Ionic 2: Starting a New Project

CouchDB, PouchDB, and Ionic 2: Starting a New Project

Over the past couple of weeks, I’ve been introducing some of the theory behind creating applications powered by CouchDB . As promised, this week we will finally start actually building something with it. Over the next few tutorials, we will be building a blogging application in Ionic 2 that uses CouchDB as its database and backend. We will start off simple, and cover more complex concepts as we progress. I’ve mentioned previously that when using CouchDB in an Ionic… continue reading.

[VIDEO] Basic Security for Ionic & Cordova Applications

[VIDEO] Basic Security for Ionic & Cordova Applications

I recently wrote an article with some basic security advice for Ionic and Cordova applications , but I thought it would be worthwhile discussing those concepts in a little more depth. In this video tutorial, I talk through the concepts that I brought up in the security article. Here’s the video : Video Notes You don’t need to understand everything about security before building an application, but you should know enough to know when you need to seek help Treat your… continue reading.

“Live” Coding a Custom Directive in Ionic 2

“Live” Coding a Custom Directive in Ionic 2

I’m trying something a little bit different with this video. Most of the videos I create aren’t scripted, but I do have a general plan of attack before recording and, more or less, know what I am going to say and do. I’ve created multiple custom components and directives in the past, and have done tutorials for a lot of those. I think those tutorials may give off the impression that somehow I just know right out of the gate how to go about implementing these – sometimes… continue reading.

Phaser Fundamentals: Handling Collisions

Phaser Fundamentals: Handling Collisions

When building a game with Phaser you will likely have various objects on the screen. You might have the players character, a floor or some walls, some enemies, items, and so on. These entities are going to need to interact with one another in some way to make the game playable. If a player touches a powerup then the powerup should be destroyed and the player should gain its effects, if the player hits an enemies bullet they should probably be hurt or killed, if a player jumps… continue reading.

E2E (End-to-End) Testing in Ionic 2: Structuring Tests with Page Objects

E2E (End-to-End) Testing in Ionic 2: Structuring Tests with Page Objects

In the first post in this series I wrote about how to create E2E (End-to-End) tests for Ionic 2 applications . This was a very basic introduction that focused on the general concept and getting a bare bones example up and running. I intend to create a few more tutorials that will go a little more in-depth into E2E testing and discuss how to better integrate them into your testing strategy. In this tutorial, I will be discussing how you can use page objects in your E2E… continue reading.

CouchDB, PouchDB, and Ionic 2: Querying Data with MapReduce

CouchDB, PouchDB, and Ionic 2: Querying Data with MapReduce

In the first tutorial of this series I introduced CouchDB at a high level and touched on why you might want to use CouchDB over some other options, and why I think it makes a great companion for Ionic 2 applications. We mostly talked about CouchDB at a conceptual level, but in this tutorial, I will be covering how to actually do things with CouchDB more specifically. As I mentioned in the last article, CouchDB can be a little hard to understand especially if you are… continue reading.

How to Send Data with POST Requests in Ionic 2

How to Send Data with POST Requests in Ionic 2

In the past, we have covered how to make a simple GET request to load data from a server, and for the most part, making a POST request is pretty much the same. There are a few key differences, though, including the fact that a POST request also includes a body , and there’s also a feature that is built into observables that may trip you up when attempting to make a POST request. In this video tutorial, we walk through a basic example of sending a POST request to a server in… continue reading.

Listening to Events on a Host Element in Ionic 2

Listening to Events on a Host Element in Ionic 2

When creating a custom directive (and in other circumstances) you may be interested in listening for events that are happening on the host element. Let’s say for example that I created a custom directive that I wanted to attach to the component, like this: The host element, which is in this example, may emit events that we want to make use of in our directive. In this video tutorial, we will walk through how you can listen for events on a host element in Ionic 2 (which is… continue reading.

E2E (End-to-End) Testing in Ionic 2: An Introduction

E2E (End-to-End) Testing in Ionic 2: An Introduction

Over the past few weeks, I have been releasing a series of tutorials on creating automated tests for Ionic 2 applications. The tutorials so far have focused on how to apply the Test Driven Development (TDD) methodology to unit test an Ionic 2 application. If the concept of automated tests is new to you, or if you don’t understand why you would want to create automated tests for an application, I would recommend reading through my Test Driven Development series of… continue reading.

CouchDB, PouchDB, and Ionic 2: An Introduction

CouchDB, PouchDB, and Ionic 2: An Introduction

Databases. The creatures that often live somewhere in the cloud and hoard all of the data for your application. Although they can be troublesome to work with, they allow you to turn your isolated application into one that can share and communicate with the world. There are many different options available, and different options are going to make sense for different people and different scenarios, but I’ve spent a long time looking for the one that “felt right” – the one… continue reading.

Increasing Performance with Efficient DOM Writes in Ionic

Increasing Performance with Efficient DOM Writes in Ionic

I’ve touched on this point many times in the past, so I will try to keep this brief. Ionic makes it super easy for people to build mobile applications, but that low barrier to entry (which is a good thing in general) means that it also makes it super easy to build bad applications . You will need in-depth knowledge of web performance concepts and how Ionic works if you want top notch performance for more complex applications. This is the case with any framework or even if… continue reading.

An Introduction to Observables for Ionic 2

An Introduction to Observables for Ionic 2

Observables are one of those new tricky things you will almost certainly run into at some point when building an application with Ionic 2. They can seem a little weird and overwhelming at first, and you might wonder ” why can’t we just stick to promises? ”, but they are quite beautifully implemented. At a basic level, you don’t need to worry about all of the advanced things observables can do or what “reactive programming” is, you will mostly just need to know a few basics… continue reading.

Building an Absolute Drag Directive in Ionic 2

Building an Absolute Drag Directive in Ionic 2

Recently I sat down to record a screencast of myself building out a new directive in Ionic 2. It was quite a simplistic directive, but the intent was to build it from start to finish with no prior planning involved so that I could show people the types of roadblocks I run into and the problem-solving approach I take when building something. Although most of the videos I create are unscripted, there is at least some level of planning involved and I know more or less what I’m… continue reading.

Reordering a List in Ionic 2

Reordering a List in Ionic 2

It’s super easy to create lists in Ionic 2, and it’s also super easy to allow a user to reorder them. With the addition of a simple attribute, you can turn your normal into a reorderable one. In this video tutorial, I walk through exactly how to create a reorderable list in Ionic 2. Here’s the video : Video Notes Reordering can be added to a standard by adding the attribute and setting it to The list will not automatically remember the position of items after… continue reading.

How to Fix Common TypeScript Errors in Ionic 2

How to Fix Common TypeScript Errors in Ionic 2

Early on in the development of Ionic 2, the team decided to fully embrace TypeScript over plain ES6 JavaScript. All Ionic 2 projects use TypeScript by default, and it’s quite difficult to modify the project to be rid of TypeScript. TypeScript is really just JavaScript with some added bonuses , though, so there are not really many good reasons to not want to use it. TypeScript can be kind of like a tough parental figure or teacher. In the beginning, it may seem like it’s… continue reading.