Recently, I published a tutorial on using ThreeJS with Ionic to embed virtual reality content into a mobile application using WebVR. This tutorial is going to be somewhat similar, we will still be making use of ThreeJS and WebGL, but we will be creating an augmented reality experience in an Ionic/Angular application. If you are […]
Creating a WebVR Experience in an Ionic/Angular Application
I’ve become absolutely fascinated with WebVR recently. The fact that you can access an immersive virtual reality experience powered by a web browser on your mobile phone just blows my mind. I picked up a Google Pixel 2 XL and a Google Daydream headset to experience and develop for WebVR, which provides a nice and […]
Creating a Theme Switcher Service in Ionic Using CSS4 Variables
A couple of weeks ago I released an article about how CSS4 variables would be used in Ionic 4. In that article, I discussed how using CSS4 variables for theming allows you to modify these variables at runtime because unlike SASS variables which need to be compiled, CSS4 variables are supported natively by the browser. […]
Faster Boot Times with Lazy Loaded Web Components in Ionic 4
In this article, we are going to take a look at a feature introduced in Ionic 4 that will reduce the initial load times of our applications. Before we get into discussing that, though, I want to highlight that when it comes to performance we can’t just rely on the framework. I published an article […]
Ionic Framework Is Fast (But Your Code Might Not Be)
I don’t want this article to come across as a self-righteous rant, or that I’m attacking people who have made statements like the ones I will use as examples in this article. The last thing I want to do is sound elitist or fan the flames of framework wars. So, I will precede this article […]
Deploying Capacitor Applications to Android (Development & Distribution)
Earlier this week, I released a guide to deploying Capacitor applications to iOS. In this tutorial, we are going to be doing the exact same thing, except we will be deploying an Android application built with Capacitor to Google Play. As was the case for the last tutorial, we are going to do this starting […]
Creating a Tabs Layout with Angular Routing and Ionic 4
Recently, I published a tutorial that talked through how to use Angular routing in an Ionic/Angular application when Ionic 4.x is released. Although using Angular style routing is not required if you want to upgrade to Ionic 4, there are a lot of benefits to doing so (and some features that were available with standard […]
Publishing a Web Component Using Stencil (And Using It Anywhere)
Over the past couple of weeks we have explored creating custom components within Ionic/Angular, and creating custom web components using Stencil. Although both behave very similarly, the key difference between creating an Angular component, and a Stencil component, is that Stencil generates generic web components that can be used anywhere. Angular components can only be […]
Creating a Google Maps Web Component with Stencil
Last week, we created a custom Google Maps component for an Ionic/Angular application. Since I have also been creating a lot of Stencil content recently, I think it is fun to see how we could build the same components that we build for Ionic/Angular, except as a generic web component with Stencil. To that end, […]
Using Google Maps and Geolocation in Ionic with Capacitor
Google Maps integration is consistently one of the most popular features of mobile applications. I’ve published tutorials on how to use Google Maps with Ionic many times in the past, but I wanted to revisit the basics again now that some time has passed. Previously, I have used Ionic and Cordova to build a Google […]
Automatic Scroll to Bottom Chat Interface with Mutation Observers in Ionic
It is common in chat interfaces to have the latest messages displayed at the bottom of the screen, and for the screen to automatically scroll to the latest message when a new one is added. This is a feature I added to the chat application that is built in the last module of Elite Ionic, […]
Improving the UI/UX of an Ionic Component
In this tutorial, we are going to improve upon the flash message service that we created in the last tutorial. I offered some suggestions for improving the service at the end of that tutorial which included: Allowing for different messages styles (success, danger, warning, etc.) Displaying a bar to indicate how long the message will […]
Replicating a Cloudant Database to CouchDB
Last week, I wrote a tutorial that walked through how to set up a CouchDB database on a self-hosted Ubuntu server. I talked about some of the benefits of going for a self-hosted approach over using a service like Cloudant. One of the big benefits of the CouchDB protocol is how portable it is. With […]
Adding CAPTCHA to Ionic with NodeJS Middleware
When I built the Elite Ionic course, I built it as a PWA using Ionic. Anybody who signs up for the course can log in to the application and browse through the various modules. When people create accounts, they need passwords, and when passwords are involved they will inevitably be forgotten at some point. For […]
Creating a CouchDB Database on an Ubuntu Server (Digital Ocean)
One of the cool things about CouchDB is how portable it is. It can run just about anywhere and interact with other CouchDB style databases anywhere. Any database that speaks the CouchDB Replication Protocol will be able to interact with any other database that does the same. This is why we can use libraries like […]
Adding ES6/TypeScript Support to a NodeJS Server
In past tutorials, we have covered setting up a basic Node/Express server and even integrating a Node server with Ionic. Up until this point, we have just been using the standard ES5 JavaScript syntax when building the server. If you are used to using Ionic, and many readers of this blog would be, then you […]
Building a Time Locked Advent Calendar in Ionic
As a kid, advent calendars were one of my favourite Christmas traditions. There was something special about ripping open that perforated cardboard each day and eating chocolate first thing in the morning. As an adult, I would prefer one of those whiskey advent calendars, but 24 little bottles of bourbon work out to be quite […]
Hosting an Ionic PWA with Firebase Hosting
Part 1: Building a Cryptocurrency Price Tracker PWA in Ionic Part 2: Preparing a Progressive Web Application for Production Part 3: Hosting a Progressive Web Application with Firebase Hosting (this tutorial) In the past couple of tutorials, we have been working on building a cryptocurrency price tracking application as a progressive web application in Ionic. […]
Preparing a Progressive Web Application for Production
Part 1: Building a Cryptocurrency Price Tracker PWA in Ionic Part 2: Preparing a Progressive Web Application for Production (this tutorial) Part 3: Hosting a Progressive Web Application with Firebase Hosting In the previous tutorial, we walked through building a simple cryptocurrency tracker application using Ionic. The purpose of this tutorial series is to build […]
Building a Cryptocurrency Price Tracker PWA in Ionic
For a lot of people, buying cryptocurrency – like Bitcoin, Litecoin, and Ethereum – is a long-term game. Day trading anything that volatile is a dangerous game, so the day to day price isn’t all that important. Most people will probably buy, hold, and wait to see if it pays off years down the road. […]
Communicating Between an Ionic Application and a NodeJS Backend
In a previous tutorial, we covered how to integrate a basic NodeJS server with Ionic. This covered the very basics of setting up the NodeJS server, and how to interact with it using an HTTP request in Ionic. In this tutorial, we are going to take a deeper look at how an Ionic application and […]
Advanced Guide to the Ionic Framework
Once you’ve got the basics of Ionic down then all you have left to learn is… everything else. It’s hard to clearly define where your time would be best spent once you are past the basics – there’s not much point in slogging through tutorial after tutorial implementing different kinds of components and plugins. Once […]
High Performance Animations in Ionic
It is a common misconception that web-based mobile applications like those built with Ionic are not capable of creating performant animations. The fact that an application built with Ionic runs inside of a browser does make it harder to create performant animations, but if you are aware of some common pitfalls when it comes to […]
Animating from the Void: Enter and Exit Animations in Ionic
Last week I wrote a tutorial that covered how to create a simple add to cart animation using the Angular animations library (which is based on the Web Animations API). To quickly recap, creating animations with the Angular animations library involves creating “triggers” with “states” that define a set of styles and then defining “transitions” […]