Tagged: intermediate

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:

ElementRef & Renderer

Safely Modifying Elements with ElementRef & Renderer in Ionic

There often comes a time where we will need to modify the properties of an element in our application: its background color, or its position, or something else. By using ElementRef we are able to easily get a reference to an element and its properties, and although we can modify the element’s properties directly through […]

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

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