Ionic Package

Building Ionic 2 Applications for iOS without a Mac

When it comes to building iOS applications on a Windows machine, it’s not an easy process. It feels like Apple is fighting you every step of the way, but it is possible. In fact, when I first got into mobile development I did this for about 2 years. An Ionic 2 application is built with […]

Custom Components in Ionic 2

Custom Components in Ionic 2

The Ionic 2 library provides a wide range of default components – likes lists, segments, and cards – that can easily be added to your applications, but sometimes it is useful to build your own custom components. Building your own custom component isn’t all that different from building a normal page in Ionic 2 (they […]

Input Masking in Ionic 2

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 […]

Creating a Time Tracking App in 3 Hours and 57 Minutes

I’m starting a big new project that will span several months, and I want to track exactly how much time I spend working on it. It’s the type of work that gets done in bits and pieces, fitting around other obligations I have, late at night and early in the morning. I’ve done several projects […]

JSON in Ionic 2

Loading Remote JSON Data with HTTP in Ionic 2

Often, we will need to load some data into our applications. One common way to do this is to load a JSON (Javascript Object Notation) string from some source, and convert that into a Javascript Object that we can view and manipulate in our application. In this video tutorial, I walk through how to use […]

Panorama Feed in Ionic 2

Create a News Feed with 360-Degree Photo Viewing in Ionic 2

If you’ve been on Facebook recently, you will probably have seen interactive photos uploaded by your friends that you can drag around to view more of the photo. This is done in one of two ways, either the user uploaded a panorama photo, or a “true” 360-degree photo using something like Photo Sphere. Before we […]

Saving Data in Ionic 2

A Simple Guide to Saving Data in Ionic 2

Many applications require the ability to save data in some manner so that a user can perform some actions in the application, close the application, and have the application remember the user’s input from the last time they opened the application. By default, anything you do within your application is just going to be lost […]

Photo Tilt in Ionic 2

Create an Advanced Photo Tilt Component in Ionic 2

Anybody remember Facebook Paper? It was somewhat of a re-imagining of the current Facebook experience into a more news focused format. Despite being quite well-received, it failed to gain traction and eventually shut down. When Facebook Paper was announced, they introduced this new UI concept that was built into the application: Changing the orientation of […]

Sharing Data Between Pages in Ionic 2

Passing Data Between Pages in Ionic 2

When building an application that has more than a few pages, there’s a good chance that those pages won’t be working in isolation. You may want to send data from one page to the next, send data back to the last page, or even access some data from one page in an entirely different area […]

Gravatar in Ionic 2

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 […]

Ionic 2 News Feed Layout

Create a Stylish News Feed Layout in Ionic 2

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 […]

Grid Component in Ionic 2

An Overview of the Grid Component in Ionic 2

Ionic 2 makes it super easy to create beautiful looking layouts. Most of the time you can just drop in the component you want to use and be on your way. Sometimes, you will need to create more complicated layouts, though. Perhaps rather than a simple list, you want a list with three horizontal boxes […]

Build a Simple Progress Bar Component in Ionic 2

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 […]

Ionic 2 Side Menu Highlighting

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 […]

Marker Clusters in Ionic 2

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 […]

Conditional Attributes, Styles, and Classes in Ionic 2

Conditional Attributes, Styles, and Classes in Ionic 2

When using Ionic 2, there are a bunch of CSS Utility Attributes that we can use to style elements in our application. We can also, of course, add normal styles and classes to elements as well. There will often be times where we want to apply this styling conditionally. Perhaps you want to add the […]

States in Phaser

Phaser Fundamentals: Using States in Phaser

One of the core concepts in Phaser is States. States split your game code up into logical chunks, and you progress through these states one at a time. Typically, you would have individual states for a level in your game, a title screen, a game over screen, a bonus round game, and so on. You […]

Property Binding and Event Binding in Ionic 2

Component and Template Interaction in Ionic 2

Each page in an Ionic 2 application is a component, and every component has a class definition in a TypeScript file, and an HTML template. The class and the template have a very important relationship and need to be able to communicate effectively. In this video tutorial, I introduce the concepts of Property Binding, Event […]

Ionic 2 Utility Attributes

A List of Common CSS Utility Attributes in Ionic 2

There are a number of ways to go about styling your Ionic 2 applications, and I have created content around these methods in the past. You can find that content below: A Guide to Styling an Ionic 2 Application Tips & Tricks for Styling Ionic 2 Applications Screencast: Hacking CSS in Ionic 2 One particular […]

Parallax in Ionic 2

High Performance Parallax Animation in Ionic 2

A little while ago, I recreated a parallax header directive that was originally created by Ola Christensson for Ionic 1. It was updated to use the Ionic 2 syntax and structure, but the general approach was basically the same. A listener was set up for the scroll event, and as the content area was scrolled […]

Hacking CSS in Ionic 2

When styling Ionic 2 applications, there are several different methods available to you. You can use Ionic’s built in utility attributes, you can overwrite SASS variables or create your own, and you can also define your own custom CSS rules. It can be hard to understand what to use and when, though. In this video […]

Map, Filter, and Reduce in Ionic 2

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 […]