A Primer on CSS 4 Variables for Ionic 4

A Primer on CSS 4 Variables for Ionic 4

Apparently, good things come in 4’s (sorry, that was the best I could do). Another significant addition to Ionic 4 is going to be support for CSS4 variables, which will now play the primary role in Ionic’s theming approach. In this article, we are going to take a brief look at what CSS4 variables are and how we will be using them in Ionic applications. In previous versions of Ionic, the theming and styling of Ionic relied mostly on using SASS , where we would define files… continue reading.

Adding Icons & Splash Screens (Launch Images) to Capacitor Projects

Adding Icons & Splash Screens (Launch Images) to Capacitor Projects

Generating icons and splash screen images ends up being a much more difficult task than you might anticipate before doing it for the first time. The difficulty stems from the fact that there are a bunch of different devices that your application could be running on, a lot of which will have different resolutions/pixel density. Both iOS and Android applications have systems in place to pull in images of the correct resolution for the particular device the application is… continue reading.

Faster Boot Times with Lazy Loaded Web Components in Ionic 4

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 earlier this week that discusses this. The main point of the article is that improvements to the performance of the framework are not all that important if you haven’t already… continue reading.

Ionic Framework Is Fast (But Your Code Might Not Be)

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 with a little disclaimer: I’m not making any claims that Ionic is the best framework, or that Ionic is better than native apps, or that you should use Ionic for everything. I’m also not… continue reading.

Deploying Capacitor Applications to Android (Development & Distribution)

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 from a completely blank slate to demonstrate how to set up the appropriate environment from scratch. For this tutorial, I created a separate profile on a new computer so… continue reading.

Deploying Capacitor Applications to iOS (Development & Distribution)

Deploying Capacitor Applications to iOS (Development & Distribution)

In this tutorial, we are going to walk through how to use Capacitor to deploy iOS applications. We will be covering how to get a Capacitor application running on an iOS device for development, all the way through to creating a build for distribution on the App Store. We are going to do this starting from a completely blank slate to demonstrate how to set up the appropriate environment from scratch. For this tutorial, I created a separate profile on a new computer so that… continue reading.

Creating a Tabs Layout with Angular Routing and Ionic 4

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 Ionic navigation in Ionic 3.x will only be available through Angular routing with Ionic 4.x). We discussed the basics of routing, and I also published… continue reading.

Using Cordova Plugins that Require Install Variables with Capacitor

Using Cordova Plugins that Require Install Variables with Capacitor

Since Cordova is such a hugely popular framework with a massive ecosystem of plugins to access various native functionality, Capacitor is aiming to have backward compatibility with existing Cordova plugins. This means that if you are using Capacitor, you should be able to use any existing Cordova plugin with it. All you need to do is: and Once you have done this, you can just use the plugin as you would in any normal Cordova project (you can also still use Ionic Native if… continue reading.

Prevent Access to Pages in Ionic with Angular Route Guards

Prevent Access to Pages in Ionic with Angular Route Guards

In a previous tutorial, I covered how we would implement Angular routing in an Ionic 4.x application . When Ionic 4 is released, there will be more of a focus on using the baked in Angular routing, rather than Ionic’s own push/pop style routing (this style of navigation will still be available, though). In this tutorial, we are going to cover how to use route guards with Angular routing to prevent access to certain routes if certain conditions have not been met. A common… continue reading.

Using the Capacitor Filesystem API to Store Photos

Using the Capacitor Filesystem API to Store Photos

When we take a photo on an iOS device, the resulting file is stored inside of a temporary folder called . If we use the Camera API to retrieve a photo, the resulting URI will look like this: If we are interested in long-term storage then this isn’t the best solution. The way you approach this will depend on what it is your application is trying to achieve. You might want to send this photo to a server, or maybe you want to store the data that is returned, in which case it… continue reading.

Implementing a Master Detail Pattern in Ionic 4 with Angular Routing

Implementing a Master Detail Pattern in Ionic 4 with Angular Routing

Earlier this week, I published an article that discussed how and why you should use Angular routing with Ionic 4.x . To summarise, the main points from that article were that: Angular routing primarily relies on defining a bunch of routes that link to specific components/pages, and then using the current URL to determine which route should be activated Push/pop navigation will still be available through Ionic’s components, but it is not recommended for Angular There are big… continue reading.

Using Angular Routing with Ionic 4

Using Angular Routing with Ionic 4

Recently, I published an article that talked through some of the expected changes for the upcoming Ionic 4.x release . Most of the changes that will be introduced are behind the scenes, and there won’t be that many changes required for updating your Ionic 3.x applications to 4.x. Perhaps the most noticeable change coming in Ionic 4, and the one that will require the biggest change in your existing applications, is the move to Angular style routing. The typical push/pop style… continue reading.

Create Native HTML5 Games with Phaser and Capacitor

Create Native HTML5 Games with Phaser and Capacitor

Building HTML5 games with Phaser has been somewhat of a hobby of mine over the past few years, and I’ve even written a few tutorials about Phaser with a focus on developing HTML5 games for mobile. However, despite having created a few mostly finished games most of them never actually see the light of day. I do love the idea of creating games with web tech (I love the idea of creating everything with web tech, really). The recent release of Phaser 3 , and of Capacitor… continue reading.

Stack Based Navigation (Push/Pop) with Ionic Web Components

Stack Based Navigation (Push/Pop) with Ionic Web Components

The introduction of Stencil and Ionic 4.x has led to a much larger focus on using routes for navigation. In the past, Ionic applications relied mostly on using a navigation stack with a push/pop style of navigation. If you are unfamiliar with how this style of navigation works, I would recommend reading one of my previous tutorials on navigation in Ionic/Angular . This push/pop style of navigation makes a lot of sense for mobile applications. However, since Ionic is… continue reading.

What to Expect When Ionic 4 Is Released

What to Expect When Ionic 4 Is Released

The Ionic team has been busy working behind the scenes to finish the release of Ionic 4.x, which we should hopefully see an alpha release of before too long. We’ve talked about the benefits of Ionic 4 in the past. In this article, I want to focus on how the release of Ionic 4 will impact the actual work you need to do in order to keep building applications with Ionic, or upgrade existing ones. Ionic 4 has not been officially released yet, so please keep in mind that this is… continue reading.

Publishing a Web Component Using Stencil (And Using It Anywhere)

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 used within Angular (unless you are using Angular Elements . Although you can use a web… continue reading.

Creating a Google Maps Web Component with Stencil

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, in this tutorial, we will be recreating the same Google Maps component in Stencil. The main benefit to building a component as a web component with Stencil is that… continue reading.

Using Google Maps and Geolocation in Ionic with Capacitor

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 Maps service, but now I want to look into building a more robust Google Maps component for Ionic/Angular using Capacitor . The Google Maps component that we are… continue reading.

Automatic Scroll to Bottom Chat Interface with Mutation Observers in Ionic

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 , but there is a bit of a trick to it. It’s easy enough to scroll to the bottom of a list in Ionic, in fact, all you need to do is use this method: So, in order to trigger this behaviour, you… continue reading.

Publishing a Custom iOS Capacitor Plugin on NPM

Publishing a Custom iOS Capacitor Plugin on NPM

Earlier this week, I published a tutorial that described how to use Capacitor to run custom iOS native code in Ionic . We built a Capacitor plugin that allowed us to automatically retrieve the latest photo on the user’s camera roll, resulting in an application that looked like this: In order to achieve this, we just made modifications to the local Capacitor project. This is fine, but we may also want to make the plugin a little more modular/portable so that we can reuse it… continue reading.