Tagged: intermediate

Ionic Logo White

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 […]

Stencil to Web Component to NPM

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 […]

Google Maps 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, […]

Time Bar

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 […]

CouchDB Replication

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 […]

TypeScript vs ES6

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 […]

Firebase

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. […]

cryptoPWA logo

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 […]

Book image

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 […]

Web Animation API with Ionic

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 […]

Web Animation API with Ionic

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” […]