Using HTML File Input for Uploading Native iOS/Android Files

Using HTML File Input for Uploading Native iOS/Android Files

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.

Accessing Localhost Server From Ionic App Running on a Mobile Device (iOS/Android)

Accessing Localhost Server From Ionic App Running on a Mobile Device (iOS/Android)

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.

Handling File Uploads in Ionic

Handling File Uploads in Ionic

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.

Uploading Files to a NestJS Backend

Uploading Files to a NestJS Backend

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.

Is an Ionic Application Native?

Is an Ionic Application Native?

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.

Migrating Cordova Plugins to Capacitor (Android)

Migrating Cordova Plugins to Capacitor (Android)

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.

Using the CreateAnimation Wrapper Component in an Ionic/React Application

Using the CreateAnimation Wrapper Component in an Ionic/React Application

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.

High Performance Animated Accordion List in Ionic

High Performance Animated Accordion List in Ionic

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.

Performance Lessons from Writing a Book About Ionic Animations

Performance Lessons from Writing a Book About Ionic Animations

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.

Freebie: Advanced Card Transition with the Ionic Animations API

Freebie: Advanced Card Transition with the Ionic Animations API

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.

Create your Own Drag-and-Drop Functionality Using Ionic Gestures

Create your Own Drag-and-Drop Functionality Using Ionic Gestures

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.

Using the FLIP Concept for High Performance Animations in Ionic

Using the FLIP Concept for High Performance Animations in Ionic

When animating the size or position of elements in our applications, we should (generally) only use the property to achieve this. Animating anything else - like , , , , and - will result in triggering a browser “layout”. This is where the browser needs to recalculate the positions of everything on the screen, which is the most expensive step in the browser rendering process in terms of performance. If we trigger this process many times in quick succession (by animating a… continue reading.

Creating a Staggered Animation for an Ionic Infinite List (without SASS)

Creating a Staggered Animation for an Ionic Infinite List (without SASS)

There are many instances in which we can use a staggered animation in our applications, but it is perhaps most commonly used with lists or thumbnails/galleries. The idea is that we apply an animation (usually the same animation) to multiple elements, but we execute those animations with an increasing amount of delay for each element. The result is an appearance that these individual animations are linked together, creating a kind of “flow” of elements animating on to the… continue reading.

Creating a Gmail Style Swipe to Archive with the Ionic Animations API

Creating a Gmail Style Swipe to Archive with the Ionic Animations API

In my recent tutorials, I have been explaining how to build more complex UI/UX patterns into Ionic applications with the Ionic Animations API and the improved gesture support in Ionic 5. I often keep a look out for impressive gestures or animations whether they are in traditional “native” mobile applications, or just a designers concept, and see if I can implement something the same or similar in Ionic. My goal is to help dispel the perception that interesting interactions… continue reading.

Create Tinder Style Swipe Cards with Ionic Gestures

Create Tinder Style Swipe Cards with Ionic Gestures

I’ve been with my wife since around the time Tinder was created, so I’ve never had the experience of swiping left or right myself. For whatever reason, swiping caught on in a big way. The Tinder animated swipe card UI seems to have become extremely popular and something people want to implement in their own applications. Without looking too much into why this provides an effective user experience, it does seem to be a great format for prominently displaying relevant… continue reading.

Tips for Animating in Ionic Applications

Tips for Animating in Ionic Applications

Animations are one of those little extra touches in an application that can transform an average looking application into something truly impressive. When done well, we can create animations that perform well, look great, and improve the user experience of our application. There is a lot of talk around the performance of web-based or hybrid mobile applications, but it is often irrelevant as web tech is capable of smoothly running most (but not all) types of mobile… continue reading.

Create a Circle Progress Web Component with Conic Gradients in StencilJS

Create a Circle Progress Web Component with Conic Gradients in StencilJS

You know what’s way cooler than horizontal progress bars? Circle progress bars! Well, for some contexts at least. Circles are a little bit more difficult to work with in CSS that squares/rectangles where we can just define a simple width/height for the shape, but with some effort we can create something that looks like this: There are different ways to go about implementing a circle component like this, but I am going to walk through a rather simple method for achieving the… continue reading.

Using the Camera API in a PWA with Capacitor

Using the Camera API in a PWA with Capacitor

One of the key ideas behind the Capacitor project which was created by the Ionic team, is to provide access to browser/native features through a single API no matter what platform the application is running on. This philosophy makes the one codebase/multiple platforms approach to building applications much more feasible. Geolocation is a good example of where this can simplify things a great deal for us. How we implement Geolocation may depend on what platform we are running… continue reading.

HTTP Requests in StencilJS with the Fetch API

HTTP Requests in StencilJS with the Fetch API

When building applications with Ionic, we will often need to fetch some data over the network - whether that is locally to pull in data from a JSON file, or through the Internet to load data supplied by some API. If you’ve been around for a while you might recall using an to perform HTTP requests with JavaScript - this wasn’t/isn’t a particularly nice way to perform requests, and many people would use additional libraries to help simplify the process of sending HTTP requests… continue reading.

Native/Web Facebook Authentication with Firebase in Ionic

Native/Web Facebook Authentication with Firebase in Ionic

The Firebase JavaScript SDK - which we will be using in this tutorial - provides a really simple web-based method for authenticating your users in an Ionic application by using Facebook. If we are intending to launch the application as a PWA then this method will work fantastically. However, if we are using Capacitor (or Cordova) to create native builds for the iOS/Android platforms, this web-based authentication flow becomes a little bit more awkward. If you are using… continue reading.

Follow me on Twitter or subscribe to me on YouTube for more web development content.