Tagged: intermediate

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

Web Animation API with Ionic

Add to Cart with the Web Animations API in Ionic

As well as looking cool, animations are best used in applications when they serve a purpose. Animations are great for conveying a range of concepts (direction, anticipation, emotions) and one particularly useful feature of animations is that they draw the attention of the user. Our eyes are naturally drawn to movement, and so animations are […]

Custom Components in Ionic 2

Setting up Custom Components in Ionic

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

Clip Paths in Ionic

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

CouchDB and Ionic

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

Testing Ionic

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

Accordion in Ionic

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

Expandable Component

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

[VIDEO] SVG Animations in Ionic

I recently wrote a blog post that introduced the concept of the SVG (Scalable Vector Graphic) format and how you might be able to use that in an Ionic application. You can read more about that here but the basic idea is that SVGs are vector graphics (so they can be scaled to any size […]