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 […]
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 […]
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 […]
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 […]
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, […]
Debugging Ionic Applications When Deployed to an Android Device
In a recent tutorial, I covered how to debug iOS applications that are deployed to a device. When you’re testing through the browser it’s easy enough to use the built in browser tools for debugging, but it’s no so obvious how to do that when you’re actually running the application on your device. In this […]
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 […]
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 […]
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). […]
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 […]
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 […]
Using a Canvas to Create a Drawing App in Ionic – Part 1
The HTML5 <canvas> element provides a space on the screen that we can “draw” on through using a Javascript API. We are able to do things like defining paths and shapes, and we can then trace those with various colours or just fill in entire shapes. There’s a lot of creative uses for the canvas […]
Using a Directive to Modify the Behaviour of an Ionic Component
Ionic provides a lot of useful components right out of the box, but sometimes they might not do exactly what you want them to do. In situations like this, you mostly have two options: build a new component that does what you want, or create a directive to modify the behaviour of the existing component. […]
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, […]
Implementing Turn by Turn Navigation with Google Maps in Ionic
One of the most common questions I receive about Ionic is how to create a route between two points with Google Maps. I have quite a few tutorials on doing various things with Google Maps in Ionic, so I thought it was time to tackle this problem as well. We are going to create a […]
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 […]
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 […]
“Live” Coding a Speed Reading Application in Ionic – Part 1
Time for another “live” coding video. In these screencasts, rather than having the specifics of the video planned out, I only have a vague idea of what I want to build and then I record the process of building it – including all of the mistakes. In this video, I walk through building a speed […]
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 […]
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, 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 […]