As I was scrolling through Twitter’s PWA (I assume this would be the same in their native application as well), I noticed that when you scroll down on a screen that has a “double toolbar” in the header: The top “toolbar” will animate off of the screen, leaving only the tab bar: This leaves more […]
Creating a Theme Switcher Service in Ionic Using CSS4 Variables
A couple of weeks ago I released an article about how CSS4 variables would be used in Ionic 4. In that article, I discussed how using CSS4 variables for theming allows you to modify these variables at runtime because unlike SASS variables which need to be compiled, CSS4 variables are supported natively by the browser. […]
Custom SVG Icons in Ionic with Ionicons
Like the rest of Ionic in Ionic 4, Ionicons has recently received the web components treatment. If you’ve used Ionic in the past, then you have likely used Ionicons which provides all of Ionic’s icons. Adding a range of well-designed and platform consistent icons is as simple as dropping the following into your project: Ionicons […]
A Primer on CSS 4 Variables for Ionic 4
Apparently, good things come in 4’s (sorry, that was the best I could do). Another significant addition to Ionic 4 is going to be support for CSS4 variables, which will now play the primary role in Ionic’s theming approach. In this article, we are going to take a brief look at what CSS4 variables are […]
Accessing and Adding Styles to the Host Element in Stencil
In the previous tutorial, we rebuilt a component that was originally designed with Angular. However, instead of using Angular to build it we used Stencil instead to create a generic web component that could work anywhere. Since we were no longer using a framework like Angular, we had to make a couple of changes to […]
Using Stencil to Create a Custom Web Component with a Public API Method
Last week, we built a flash message component with Angular. The purpose of this component was to allow for a way to easily make a one-line call from anywhere in the application to display a flash message like this: I think it is interesting to then consider what this same component might look like, and […]
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 […]
Creating a Flash Message Service in Ionic
You will often run into circumstances in your application where you want to send some kind of alert to the user. You might want to let them know that they have lost their Internet connection, or that a post failed to upload, or that a photo has finished successfully uploading. In terms of the built-in […]
Building a Time Locked Advent Calendar in Ionic
As a kid, advent calendars were one of my favourite Christmas traditions. There was something special about ripping open that perforated cardboard each day and eating chocolate first thing in the morning. As an adult, I would prefer one of those whiskey advent calendars, but 24 little bottles of bourbon work out to be quite […]
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 […]
Creating a Facebook Style Reaction Button in Ionic
Near the start of 2016, Facebook released “Reactions” which gave users a way to express themselves more deeply than just with a single “Like”. Rather than adding it a bunch of new buttons for the reactions, Facebook stayed with a single “Like” button that would then display more options when the button was held down: […]
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” […]
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 […]
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 […]
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, […]
Designing a Landing Page with a Video Background in Ionic
The initial impression of your application on a user comes from the application’s icon, the splash screen, and then the initial page of the application. Much like judging a book by its cover, by the time the user reaches the landing page for your application they will likely have already formed some strong opinions about […]
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 […]
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. […]
Creating a Drawing Application in Ionic
Last week I released a two part screencast where I built a simple drawing application in Ionic live on screen. Since I’m just making things up as I go along in these style of videos, the end result usually works but is lacking in polish. As such, I like to do a follow-up blog post […]
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). […]
Create a Directive to Focus Content in a List with 3D Touch
One thing that I really enjoy doing with Ionic is attempting to implement cool and useful (most of the time) UI elements that I think a lot of people assume you can’t do in Ionic or that you can’t do well. Ionic provides a basic set of components by default, but you can extend that […]
How to Create a Sliding Drawer Component for Ionic 2
Since I create a lot of content, I often ask for suggestions on tutorials I should write. If I find a suggestion is particularly interesting or I think it will benefit a lot of people, I’ll generally end up creating a tutorial at some point – so do feel free to suggest them. The other […]
Build a Tap to Reveal Component in Ionic 2 & 3
In this tutorial, we are going to walk through how to build a simple tap to reveal component in Ionic 2. The concept is quite straightforward, we will build a component that has two possible content area: a before, and an after. The before content will be displayed initially, and the after content will be […]