It’s not immediately obvious how to go about setting up custom components that you have added to your Ionic application. In this video, we discuss a few different methods we can use to make our components available to use, and some of the pros and cons of each approach. Here’s the video: What to watch […]
Launching a Progressive Web App (PWA) with Ionic
About a week ago I launched the early access for Elite Ionic. This is my latest course for Ionic, and it is focused on teaching advanced Ionic concepts (you can still grab the 40% early access discount now). Typically, when I release any paid content it is in the form of an eBook, but this […]
Safely Modifying Elements with ElementRef & Renderer in Ionic
There often comes a time where we will need to modify the properties of an element in our application: its background color, or its position, or something else. By using ElementRef we are able to easily get a reference to an element and its properties, and although we can modify the element’s properties directly through […]
Including Custom CSS Files in the Ionic Build Process
HTML has to take first place for markup languages, but Markdown is up there with my favourites. I use markdown for pretty much all the writing I do, and I’m also using it to format all of the lessons in Elite Ionic. It’s not much use displaying Markdown as is, though, if I want to […]
Integrating a Backend with Ionic
I often see questions like “How do I use PHP/MySQL in Ionic?” or “Does Ionic work with X backend?” – these are reasonable questions, but it indicates a big misconception as to how integrating a backend with Ionic works. The technology that is used on the backend is completely irrelevant, as the backend and the […]
Dealing with Timing Issues in Ionic E2E Tests
When creating End-to-End (E2E) tests, we are basically programming the browser to behave like a human. We tell the browser what pages to go to, what input to send, what buttons to click, and so on. In a typical E2E test, we will send multiple commands to the browser. We might tell it to click […]
Uploading a Production PWA with Ionic
In a recent tutorial, I covered how to create a Progressive Web application with Ionic using the “bare minimum” steps. PWAs are an in-depth topic, but that tutorial covers the minimum steps required to create something that would be considered a PWA. In this video tutorial, I wanted to cover the steps you need to […]
The Bare Necessities: Progressive Web Apps in Ionic
You’ve probably heard of Progressive Web Applications by now, but if you haven’t then you may want to give this a read. In short, they are all about giving applications made available through the web a more native-like experience. This means at a minimum that they should work offline, and can be installed onto a […]
What Does Lazy Loading Do in Ionic?
Lazy loading has been around for a while now, and it’s likely that you’ve had at least some experience with it if you have been building Ionic applications recently (the Ionic CLI page generator uses lazy loading by default). If you aren’t familiar with lazy loading, then you might be interested in checking out this […]
Bulk Delete UI with CSS Clip-Path in Ionic
I was browsing around Twitter the other day when I came across a tweet from Rachel Nabors (who you should definitely follow for cool web animation stuff) linking to this cool CSS clip-path maker. It allows you to switch between a bunch of different pre-defined clip-paths and apply them to an image. The general concept […]
Restricting Document Updates in CouchDB
CouchDB exposes a powerful REST API that allows you to interact with the database by making simple HTTP requests. The simplicity of CouchDB is one of its great features, but we might not always want to just blindly create or update documents. Perhaps we want to check that a user can only modify their own […]
Username Availability with an Asynchronous Validator in Angular
A little while ago I released an article named Advanced Forms & Validation in Ionic where we discussed the concept of using Validators that Angular provides for validating form fields. These validators come in two flavours: synchronous and asynchronous. Synchronous validators can be used to perform simple synchronous checks like whether a field is empty, […]
The Role of End-To-End (E2E) Tests in Ionic
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 […]
When to Use Providers/Services/Injectables in Ionic
A concept you will quickly come to terms with in Ionic is the concept of a page. A page is just a normal Angular component that we use to display a particular page in our application. We might have a page for displaying a list of users, and so we have a component called UserListPage […]
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 […]
Creating an Accordion List in Ionic
Earlier this week I recorded a video where I walked through building an expandable component on screen. This was a generic component that could be given a specific height, and its state could be toggled between being expanded and collapsed. Due to a dwindling battery, I didn’t get to take the component quite as far […]
Live Coding an Expandable Component in Ionic
I’ve been releasing a series of videos where I walk through building something on screen, with only a vague idea of what I want to build and no planning in advanced. The idea is that it gives a more realistic representation of what the actual development process looks like, rather than having everything pre-planned, working, […]
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 […]
Hybrid App Developers: Don’t Store Your User’s Passwords
I almost titled this post something clickbaity like ‘The one MASSIVE security mistake hybrid developers are making’. It is a big issue, and it is a mistake I see pop up on a weekly basis (and I’m sure it extends outside of the hybrid mobile app development sphere). I don’t want the tone of this […]
Designing a Landing Page with a Video Background in Ionic
The initial impression of your application on a user comes from the application’s icon, the splash screen, and then the initial page of the application. Much like judging a book by its cover, by the time the user reaches the landing page for your application they will likely have already formed some strong opinions about […]
Debugging Ionic Applications When Deployed to an Android Device
In a recent tutorial, I covered how to debug iOS applications that are deployed to a device. When you’re testing through the browser it’s easy enough to use the built in browser tools for debugging, but it’s no so obvious how to do that when you’re actually running the application on your device. In this […]
Animating a Dynamic Background with an SVG in Ionic
Recently I’ve been writing some content and filming some videos on SVGs (Scalable Vector Graphics), mainly because they are freakin’ cool. The content I have been creating is mostly pretty introductory and in the case of animations I have just been using simple CSS transitions and keyframes, so I wanted to tackle a more real-world […]
Debugging Ionic Applications When Deployed to an iOS Device
One of the most useful things about Ionic is that since the framework is web based, we can easily develop and test through the browser. However, if you do intend to build your Ionic application as a native iOS application using Cordova, you will need to test on a real device at some point. In […]
Testing Asynchronous Code with FakeAsync in Angular
When creating automated unit tests in Ionic and Angular applications we would typically follow a process like this: Set up the testing environment Run some code Make assertions as to what should have happened This process is also commonly referred to as AAA (Arrange, Act, Assert). I don’t plan to provide an introduction to unit […]