If you are not already using immutable data concepts, you might have seen all the cool kids updating their arrays like this: instead of like this: The first example creates a new array by using the values of the old array with an additional element on the end. The second example just pushes into the existing array. Apart from being a chance to show off cool JavaScript operators like the spread operator, there are practical benefits to using the first approach. The word… continue reading.

In the previous tutorial in this series, we used a Test Driven Development approach to start building a time tracking application with Ionic and StencilJS. At this point, we have created 1 E2E test and 6 unit/integration tests that cover testing just one very small part of our application: that new elements are added to the page when the add button is clicked. As you might imagine, as we build out the rest of the application we are going to have a lot of tests that contain a… continue reading.

Test Driven Development (TDD) is a process for creating applications where the tests for the code are written before the code exists. The tests are what “drive” which functionality you implement. We are going to use that process to start building a time tracking application using Ionic and StencilJS. Although we are using StencilJS which uses Jest for testing by default, most of the concepts in this tutorial could be readily applied to other frameworks as well. A Brief… continue reading.

I want to preface this article by saying that the vulnerability we will be discussing does not mean that a “hybrid” application built with Capacitor/Cordova is insecure. This vulnerability is also not limited to Capacitor/Cordova, it would apply to any native application that uses a web view that implements a Javascript interface, or “bridge”, from the web view to Native APIs. Ideally, it should not be possible to execute an XSS (Cross-Site Scripting) attack in your… continue reading.

In my earlier life, it was originally my ambition to become a graphic designer. I spent years playing around with Photoshop and eventually made a bit of money designing websites and logos for people. This path more or less ended for me when I decided to continue programming and pursue a degree in software engineering. But, there is overlap between the programming and graphic design worlds, so I’ve been able to make some use of those design skills as a developer. Because of… continue reading.

In this article we are going to explore when Angular’s XSS security model will help protect your application from XSS JavaScript injection attacks, and when it won’t. It is important to note that although the client side code can help protect against XSS vulnerabilities, it should not be the only mitigation step you take against these attacks. We will be dealing with a Stored XSS attack (one of the three main types of XSS attacks), which means that the malicious code has been… continue reading.

I have a few articles and videos that help explain the purpose of Ionic’s usage of Shadow DOM for some of their components, and how we can work with this approach to style components the way we want. If the concept of a Shadow DOM or using CSS Variables/Custom Properties to style Ionic component’s is new to you, you might want to do a bit of additional reading before tackling this article: Shadow DOM Usage in Ionic Web Components Styling a Shadow DOM in Ionic Both of these… continue reading.

In the last article I published, How to Launch Native Views in an Ionic Application, I made a point about how it is awkward to use something like a native list in an Ionic application instead of the standard : Consider that we might want to use a native list view control instead of the Ionic to display a list in our application. The web view control that we are using displays web content and it takes up the full screen. We can’t put the native list view control inside of the… continue reading.

If we are building an iOS/Android application with Ionic and Capacitor, then the primary native view that we are using inside of the native application created by Capacitor is a web view that loads our Ionic application. A lot of the time we do almost everything inside of this web view and our Ionic application, but we are working inside of a standard native application and that means we can still use whatever native views/controls that we like. This doesn’t mean we can just… continue reading.

Ever been in a situation where you want to test your Ionic application natively on an iOS or Android device, but the backend server/database you are testing against is a development server running over localhost on your computer? Eventually, you will probably want set up a live backend for your application that you could easily access from your iOS or Android device because it would be hosted publicly. However, before you get to that point you might just want to do some quick… continue reading.

In the last tutorial, we covered how to handle file uploads in Ionic using the element. This included using the file input element to grab a reference to a file and then upload that file to a Node/Express server (there is also an extension to the tutorial available where we build the backend with NestJS instead). Those tutorials focused on a desktop/web environment, but what do we do to handle file uploads when our applications are deployed natively to iOS or Android? Can we… continue reading.

In a recent tutorial, we covered how to upload files from a frontend application using to a simple Node/Express server. In this tutorial, we will be walking through how to use NestJS as the backend server instead (NestJS actually sits on top of Node/Express). I would recommend reading the previous tutorial for a lot more context on how uploading files to a server work. The previous tutorial covers what is and how it relates to the forms we need to create to upload files, as… continue reading.

Handling file uploads from a client side application (e.g. an Ionic application) to a backend server (e.g. Node/Express/NestJS) is quite different to using requests to send text data. It may look quite similar on the front end, as a input looks more or less the same as any other HTML input: You might expect that you could just this data using a standard HTTP request to a server and retrieve the file in the same way that you would retrieve any other value from a form… continue reading.

I recently published a video that demonstrates why I think saying that Ionic applications are not native is inaccurate and confusing (even though it is perhaps the most common way to describe Ionic applications). I make the case for this by building a standard native application with Xcode/Swift and then adding Ionic to it: This article is going to recap the same process of creating a native iOS application with Xcode and then getting an Ionic application running inside of it… continue reading.

Cordova has a huge ecosystem of existing plugins that have been created over the past decade. Capacitor has its own method for allowing developers to create plugins, for themselves or for the community in general, but this ecosystem is still in its infancy as Capacitor is a relatively new project. It will take some time before Capacitor plugins are as prolific as their Cordova counterparts, which is why it is fortunate that we can still use Cordova plugins in Capacitor. This… continue reading.

I’ve been working on a lot of animations with React and the Ionic Animations API as I create the React edition for Advanced Animations & Interactions with Ionic (which will be out sometime around October 2020 for those interested). I already have a bit of content on the blog and my YouTube channel covering the basics of using the Ionic Animations API, but using it in an Ionic/React application is a little different to the usual experience. So, I wanted to create this tutorial… continue reading.

A couple of years ago I published some tutorials on building an accordion style list in Ionic. The method covered in that tutorial works well enough, but in this tutorial I will be taking another look at building an accordion list, this time with a non-comprising approach to creating a high performance accordion component. You can see this in action here. The main issue with building an animated accordion component is that you would naturally animate the of the content that… continue reading.

I’ve recently finished writing a book about creating high performance animations and interactions with Ionic, which I put together over the course of around 3 months and ended up producing a chunky tome weighing in at about 500 pages. You can find out more about the book below: Check out the book: Advanced Animations & Interactions with Ionic Going into writing this book I felt that I had a good understanding of the issues facing web animations in general and how to implement… continue reading.

As part of the lead up to the launch of my next book Advanced Animations and Interactions with Ionic I am releasing the source code for one of the advanced examples in the book for free. You can grab the source code for both Ionic/StencilJS and Ionic/Angular below: StencilJS: Advanced Card Transition Animation Angular: Advanced Card Transition Animation If all goes to plan both the StencilJS and Angular editions of the book will be available at launch, with React to follow… continue reading.

In this tutorial, we will be building out two custom components in Ionic that enable us to drag and drop elements on the screen. We will be able to mark elements as “draggable” to enable the dragging functionality, and we will be able to define a “droppable” target zone for where elements can be dropped. Here is a quick example I built using the end result: You will find that there are plenty of libraries/packages available for implementing drag/drop functionality in Ionic… continue reading.