Tagged: intermediate

Sound Effects in Ionic

Sound Effects using HTML5 and Native Audio in Ionic

A big part of making a mobile application feel high quality is to provide immediate and obvious feedback for a user’s actions. When a user performs some action, you will want to communicate with them in some way that whatever action they have performed has been successful. That information can be communicated visually, through sound, […]

Async/Await

Using Async/Await Syntax for Promises in Ionic

When TypeScript 2.1 was released, support for Async/Await came with it. It is not really an entirely new concept, but it does allow you to deal with asynchronous situations that Promises create using a more succinct syntax. Since Ionic is now using TypeScript 2.2.1 at the time of writing this, we are able to make […]

Speed Reader in Ionic

Building a Custom Speed Reading Component in Ionic

Recently, I released a two part screencast where I walked through building a speed reading component in Ionic. These type of videos typically revolve around me attempting to create something from scratch without anything planned out beforehand, so often the final product is close but not completely finished. After I record the video, I generally […]

Smile Rate Component in Ionic

Using HTML5 Canvas to Create a Rating Component in Ionic

I’ve seen this concept around a few times, where rather than having a typical slider or star rating system, an application will use a smiley face. The smiley face can be adjusted to represent how the user feels about whatever it is they are rating. I think it’s genius, being able to connect with the […]

Styling in Ionic

Drab to Fab: Styling an Ionic Application – Part 1

I’ve spent the past few weeks creating a series of tutorials on using CouchDB and PouchDB in Ionic and in that series we’ve managed to build out quite a lot of functionality. There was absolutely zero thought of effort put into the design though, all the work was purely functional, so I thought it would […]

CouchDB and Ionic

CouchDB, PouchDB, and Ionic 2: Adding Comments

Over the past few weeks, we have been building out a simple blogging application that is built with Ionic 2, CouchDB, and PouchDB. We have made quite a lot of progress so far, and in this tutorial, we will be adding the finishing touches on the core functionality. We already have the ability to add […]

Ionic Native Mocks

Automating Mocks in Ionic Native 3.x

With the release of Ionic Native 3.x we are now able to create mocks for Ionic Native plugins. If you are not already familiar with the concept of a mock, the basic idea is to create a “fake” class that pretends to be the real class. This is a concept typically used for creating unit […]

Ionic Native Mocks

Mocking Plugins with Ionic Native

The Ionic Native 3.x update means that we can now mock native plugin functionality in the browser. This video tutorial walks through some of the changes in Ionic Native 3.x, as well as how you can create your own mocks for plugins. Here’s the video: What to watch next…

CouchDB and Ionic

CouchDB, PouchDB, and Ionic 2: Why PouchDB?

In the last tutorial, we started a new project using CouchDB and Ionic 2. We are working towards building a simple blogging application, and so far we have our CouchDB database set up, along with a CouchDB MapReduce view to retrieve all of the posts in the database by the date they were published, and […]

CouchDB and Ionic

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

Elvis Operator in Ionic 2

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 and Ionic

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 Drag Directive

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

Listening for Host Events

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 and Ionic

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

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