End-To-End (E2E) testing involves creating automated tests that will test your application as a whole, rather than testing individual chunks of code in isolation (which is the purpose of a unit test). In this video tutorial, I walk through a real-world application that has some e2e tests implemented and discuss the purpose and value of […]
The Role of Unit Tests in Ionic
Unit testing is an intimidating task to get started with, and with no prior knowledge of creating automated tests, it can be hard to understand the how and why of unit testing. In this video, I walk through some unit tests I have set up for a real-world application I am working on, and we […]
Setting Up Unit and E2E Tests in Ionic
I’ve written many tutorials on adding automated tests to Ionic applications, but one of the trickiest parts of the whole process is just getting the testing environment configured. If you want to set up unit and end-to-end tests you will need to install Jasmine, Karma, Protractor, and an array of other packages that need to […]
[VIDEO] SVG Animations in Ionic
I recently wrote a blog post that introduced the concept of the SVG (Scalable Vector Graphic) format and how you might be able to use that in an Ionic application. You can read more about that here but the basic idea is that SVGs are vector graphics (so they can be scaled to any size […]
Extracting the Source Code of any Cordova Application
A common misconception when building Cordova applications (which is what we use to create native packages when using frameworks like Ionic), is that the source code for those applications are secure because they are bundled into a single .ipa or .apk file. However, it is quite easy to download any Cordova application from the app […]
Using a Canvas to Create a Drawing App in Ionic – Part 2
The HTML5 <canvas> element provides a space on the screen that we can “draw” on through using a Javascript API. We are able to do things like defining paths and shapes, and we can then trace those with various colours or just fill in entire shapes. There’s a lot of creative uses for the canvas […]
Using a Canvas to Create a Drawing App in Ionic – Part 1
The HTML5 <canvas> element provides a space on the screen that we can “draw” on through using a Javascript API. We are able to do things like defining paths and shapes, and we can then trace those with various colours or just fill in entire shapes. There’s a lot of creative uses for the canvas […]
Asynchronous vs Synchronous: Understanding the Difference
Understanding the difference between asynchronous and synchronous code, as well as its implications, is an important topic and I have covered it a couple of times previously. Recently, I wrote an article that discussed a common asynchronous situation in Ionic that can lead to confusion. Click here to watch the video on YouTube I thought […]
“Live” Coding a Speed Reading Application in Ionic – Part 2
This is the second (and last) part of another “live” coding screencast. In this video, I walk through building a speed reading application that will flash one word on the screen at a time, allow the user to control the speed of which those words appear on the screen, and allow the user to easily […]
“Live” Coding a Speed Reading Application in Ionic – Part 1
Time for another “live” coding video. In these screencasts, rather than having the specifics of the video planned out, I only have a vague idea of what I want to build and then I record the process of building it – including all of the mistakes. In this video, I walk through building a speed […]
What’s New in Ionic 3?
You’ve probably heard by now, but the 3.0.0 release of Ionic is now officially available. If you’re not sure what exactly that means in relation to Ionic 2, I’d recommend watching my last video on the topic. In short, Ionic 3 is just a major update to Ionic 2, it’s not a totally new framework. […]
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 […]
What Does Ionic 3 Mean for Ionic 2?
If you started out on Ionic 1, maybe you’re at the point now where you feel settled and comfortable after taking on the challenge of switching over to Ionic 2. If you don’t follow the particulars of versioning trends for frameworks, you might just about fall out of your seat when learning that Ionic 3 […]
[VIDEO] @ViewChildren vs @ContentChildren in Ionic
I recently release an article that explored The Difference Between @ViewChildren and @ContentChildren in the context of Ionic, but it is a subtle difference and I wanted to make sure I hit the point home. So, I’ve recorded a video where I discuss the difference in a little more detail and also walk through some […]
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…
“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 […]
“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 […]
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 […]
[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:Follow @joshuamorony Video Notes You don’t […]
“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 […]
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 […]
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 […]
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, […]
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 <ion-list> into a reorderable one. In this video tutorial, I walk through exactly how to create a reorderable list in Ionic 2. […]