Tagged: intermediate

Dynamic Backgrounds

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

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

Creating an Animated Splash Screen in Ionic

One question I often get asked is how one could create an animated splash screen for their Ionic applications – the bad news is it’s not possible to animate a splash screen (and that’s not just an Ionic thing, it’s not possible in general). A splash screen is a static PNG image with no transparency. […]

Using an SVG for Animation in Ionic

I’ve spent the last week reading through Sarah Drasner‘s new book SVG Animations, which has pretty much changed my line of thinking from SVGs seem pretty cool to… via GIPHY If you want a good introduction to SVGs you should go read her book, but in this tutorial, I’ll just be running through a basic […]

CSS Transitions

Simple Animations with CSS Transitions in Ionic

When used correctly, animations can do a great deal to make your application look more polished. There are a variety of ways you can add animations to an application, but one of the most simple ways is to use the transition CSS property. This property allows you to animate the change of CSS properties, like […]

Shrinking Header in Ionic

Creating a Shrinking Header for Segments in Ionic

I was browsing the Ionic Forums earlier this week, and came across a post asking if it was possible to create a layout in Ionic where a header would be initially displayed above a segment, that would shrink away as the user scrolled (leaving the segment selections now sitting at the top of the screen). […]

Viewing Cordova Source Code

Extracting the Source Code of any Cordova Application

A common misconception when building Cordova applications (which is what we use to create native packages when using frameworks like Ionic), is that the source code for those applications are secure because they are bundled into a single .ipa or .apk file. However, it is quite easy to download any Cordova application from the app […]

TouchID in Ionic

Creating a Fingerprint Lockscreen with TouchID in Ionic

If you own an iOS device then you will have likely come across the TouchID feature at some point – it allows you to easily unlock your phone with your fingerprint rather than a passcode. We can also make use of this feature in our iOS applications, and thanks to a plugin designed by EddyVerbruggen […]

Sound Effects in Ionic

Sound Effects using HTML5 and Native Audio in Ionic

A big part of making a mobile application feel high quality is to provide immediate and obvious feedback for a user’s actions. When a user performs some action, you will want to communicate with them in some way that whatever action they have performed has been successful. That information can be communicated visually, through sound, […]

Async/Await

Using Async/Await Syntax for Promises in Ionic

When TypeScript 2.1 was released, support for Async/Await came with it. It is not really an entirely new concept, but it does allow you to deal with asynchronous situations that Promises create using a more succinct syntax. Since Ionic is now using TypeScript 2.2.1 at the time of writing this, we are able to make […]

Speed Reader in Ionic

Building a Custom Speed Reading Component in Ionic

Recently, I released a two part screencast where I walked through building a speed reading component in Ionic. These type of videos typically revolve around me attempting to create something from scratch without anything planned out beforehand, so often the final product is close but not completely finished. After I record the video, I generally […]

Smile Rate Component in Ionic

Using HTML5 Canvas to Create a Rating Component in Ionic

I’ve seen this concept around a few times, where rather than having a typical slider or star rating system, an application will use a smiley face. The smiley face can be adjusted to represent how the user feels about whatever it is they are rating. I think it’s genius, being able to connect with the […]

Styling in Ionic

Drab to Fab: Styling an Ionic Application – Part 1

I’ve spent the past few weeks creating a series of tutorials on using CouchDB and PouchDB in Ionic and in that series we’ve managed to build out quite a lot of functionality. There was absolutely zero thought of effort put into the design though, all the work was purely functional, so I thought it would […]

CouchDB and Ionic

CouchDB, PouchDB, and Ionic 2: Adding Comments

Over the past few weeks, we have been building out a simple blogging application that is built with Ionic 2, CouchDB, and PouchDB. We have made quite a lot of progress so far, and in this tutorial, we will be adding the finishing touches on the core functionality. We already have the ability to add […]

Ionic Native Mocks

Automating Mocks in Ionic Native 3.x

With the release of Ionic Native 3.x we are now able to create mocks for Ionic Native plugins. If you are not already familiar with the concept of a mock, the basic idea is to create a “fake” class that pretends to be the real class. This is a concept typically used for creating unit […]

Ionic Native Mocks

Mocking Plugins with Ionic Native

The Ionic Native 3.x update means that we can now mock native plugin functionality in the browser. This video tutorial walks through some of the changes in Ionic Native 3.x, as well as how you can create your own mocks for plugins. Here’s the video: What to watch next…

CouchDB and Ionic

CouchDB, PouchDB, and Ionic 2: Why PouchDB?

In the last tutorial, we started a new project using CouchDB and Ionic 2. We are working towards building a simple blogging application, and so far we have our CouchDB database set up, along with a CouchDB MapReduce view to retrieve all of the posts in the database by the date they were published, and […]

CouchDB and Ionic

Getting Familiar with CouchDB and Futon

Over the past few weeks, I’ve been working on writing a series of tutorials on how to use CouchDB and PouchDB in Ionic 2. This video tutorial is sort of an aside to that – I wanted to create a demonstration of creating CouchDB databases and playing around with the data a bit, just to […]