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 […]
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 […]
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. […]
“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 […]
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 […]
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 <ion-content> component, like this: The host element, which is <ion-content> in this example, may […]
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 […]
Increasing Performance with Efficient DOM Writes in Ionic 2
I’ve touched on this point many times in the past, so I will only make it briefly now. Ionic and HTML5 mobile applications in general, make it super easy for people to build mobile applications, but it also makes it super easy to build bad applications. It’s not always easy to build good applications with […]
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 […]
Using Gestures & Uncommon Event Bindings in Ionic 2
In this video tutorial, we cover how to create event bindings other than the usual (click) event binding in Ionic 2. We will cover how to use gestures like press, swipe, pan, pinch, and rotate, as well as some more uncommon events like keydown and keydown.space. Here’s the video: Video Notes Event bindings like (click) […]
An Introduction to NgModule for Ionic 2
We all use it, it’s a critical part of our applications structure, but I think a lot of people are confused by what exactly it is and what it does. I’m talking about the @NgModule in the app.module.ts file in an Ionic 2 application. In short, using modules allows us to organise our application into […]
Implementing Google Plus Sign-In with OAuth 2.0 in Ionic 2
I had originally planned to create a tutorial on how to integrate an Ionic 2 application with a user’s Google Calendar, but then I thought it would be wise to first cover authenticating with Google. I ran into a few issues when trying to get it up and running so I wanted to provide my […]
Build a Tap to Reveal Component in Ionic 2 & 3
In this tutorial, we are going to walk through how to build a simple tap to reveal component in Ionic 2. The concept is quite straightforward, we will build a component that has two possible content area: a before, and an after. The before content will be displayed initially, and the after content will be […]
An Overview of the Ionic 2 Build Process
I was browsing through the analytics for this website when I saw that someone had arrived on one of my articles by searching for: “why does Ionic have a node modules folder?”. The answer to that is simple enough, that’s where most of the dependencies for the application are stored (like the Ionic library itself, […]
Creating a Music Player Interface in Ionic 2 & 3
In this tutorial, we will be building a custom music player interface in Ionic 2, with a focus on creating a visually pleasing design. The interface will include the following features: Track list with alternating row styles Track progress bar Information for currently playing track Styling and animation for currently playing track Next track and […]
Improve Mobile Form UX with Input Masks
An important concept when designing a user interface with user experience in mind is Cognitive Dimensions. These cognitive dimensions, which were defined in the context of academic papers in 1996, provide a set of concerns to be measured that have an impact on usability. These dimensions, when applied to interface design, include things like making […]
Adding Responsive Charts & Graphs to Ionic 2 & 3 Applications
I encourage people who are subscribed to my email list to send me suggestions for tutorials they would like to see, and one of the most frequent requests I receive is a for a tutorial on how to add charts to an Ionic 2 application. Adding charts to applications is certainly no new problem – […]
Automatic Profile Pictures with Gravatar in Ionic 2
Unless you’re completely new to the Internet, chances are that you either know what a Gravatar is or you have one but just don’t know it. It stands for Globally Recognised Avatar, and the Gravatar website allows third parties to grab an avatar that is associated with your email address. Some websites (like WordPress) use […]
Create a Stylish News Feed Layout in Ionic 2 & 3
I’ve said it many times before, but one of my favourite things about Ionic 2 is that it has sleek UI elements available out of the box, and those UI elements automatically conform to the conventions of the platform that the application is running on. However, no matter how good the default UI is if […]
Build a Simple Progress Bar Component in Ionic 2 & 3
Creating your own custom components for Ionic 2 applications is a lot easier than it might seem initially. You do it all the time already because each page you add to your application is a custom component. Take the HomePage component that the Ionic CLI generates by default as an example, that looks something like […]
Create a Menu with Active Page Highlight in Ionic 2
A sliding side menu is one of the most commonly used navigation patterns in mobile applications, and it is baked into Ionic by default. In this video tutorial we will quickly walk through the basics of how the side menu works, and then we will build some functionality that will allow us to highlight the […]
Create Marker Clusters with Google Maps in Ionic 2
I’ve created quite a few Google Maps tutorials for Ionic 2, including the basics like integrating the Google Maps JavaScript SDK and adding markers and content windows, through to creating a complex nearby places list with Google Maps. It’s easy enough to add markers to a Google Map – just a couple of lines of […]
Filtering, Mapping, and Reducing Arrays in Ionic 2
We often work with arrays of data in Ionic 2 applications – sometimes some data we have defined locally, sometimes data we may be loading in from some external source – and at some point, we may want to modify that data in some way. If you have an array of products, you may want […]
Creating an Asynchronous Login Screen in Ionic 2
If you add a login screen to your application, then there is a good chance that you will also implement some functionality that allows you to remember users who have logged in previously. It’s pretty annoying to have to enter in your credentials every time you use an application. Instead, it is preferable to send […]