Tagged: video

Phaser

Anatomy of a Phaser Project

If you’re new to building HTML5 games with Phaser, like with any new language or framework, it can be quite a hurdle just to grasp the structure and the basic idea of how it all works. In this video tutorial, I will walk through the general structure of a Phaser project and the important parts […]

Using Gestures & Uncommon Event Bindings in Ionic 2

In this video tutorial, we cover how to create event bindings other than the usual (click) event binding in Ionic 2. We will cover how to use gestures like press, swipe, pan, pinch, and rotate, as well as some more uncommon events like keydown and keydown.space. Here’s the video: Video Notes Event bindings like (click) […]

Structural Directives in Ionic 2

An Introduction to Structural Directives: *ngIf & *ngFor

In this video tutorial, we cover the concept of using structural directives like *ngIf, *ngFor, and *ngSwitchCase in Ionic 2. Structural directives are an Angular concept, but we will be discussing them in the context of an Ionic application. In short, a structural directive allows us to add or remove content to our applications based […]

NgModule in Ionic 2

An Introduction to NgModule for Ionic 2

We all use it, it’s a critical part of our applications structure, but I think a lot of people are confused by what exactly it is and what it does. I’m talking about the @NgModule in the app.module.ts file in an Ionic 2 application. In short, using modules allows us to organise our application into […]

Adding libraries in Ionic 2

How to Install 3rd Party Libraries in Ionic 2

Ionic 2 allows you to do a wide range of things right out of the box, but there is likely going to come a time where you need to install some 3rd party library to add additional functionality into your applications. You may want to add Google Maps, add a charting library, add support for […]

Providers in Ionic 2

How, Why, and When to Use Providers in Ionic 2

Providers allow you to create a self-contained service that provides some kind of functionality to your application. The role of a provider might include things like fetching data from a server, performing operations on data, sharing data, providing a set of complicated mathematical operations, and so on. In general, we use providers to do the […]

Semantic CSS Styling

Using Semantic CSS Styling in Ionic 2

When creating styles with CSS it is common to attach .classes and #ids to DOM elements so that we can reference them in the CSS file. We can also just use element names directly to apply styles, and there are many more selectors we can use. In this video tutorial, I walk through a semantic […]

Cordova Plugins in Ionic 2

An Explanation of Cordova Plugins for Ionic 2

One of the downsides of creating a web based mobile application is that you don’t have access to all of the device functionality that a native application does, and you can’t submit your application to app stores. Cordova solves this problem. Cordova is commonly used to wrap a web-based mobile application inside of a native […]

Google Maps in Ionic 2

Getting Started with Google Maps in Ionic 2

Google Maps is one of the most used features in a mobile application, and my tutorials on Google Maps have consistently been the most popular on the site. My previous video on using Google Maps in Ionic 2 was created a long time ago, and is now outdated. So, I wanted to put together another […]

Pipes in Ionic 2

Custom Pipes in Ionic 2

Pipes are a convenient way to modify data before displaying it to users in templates. You can think of them as a pipe in a literal sense. You can push data through this pipe, something happens to it inside of the pipe, and when the data comes out the other end it looks different – […]

Custom Components in Ionic 2

Custom Components in Ionic 2

The Ionic 2 library provides a wide range of default components – likes lists, segments, and cards – that can easily be added to your applications, but sometimes it is useful to build your own custom components. Building your own custom component isn’t all that different from building a normal page in Ionic 2 (they […]

JSON in Ionic 2

Loading Remote JSON Data with HTTP in Ionic 2

Often, we will need to load some data into our applications. One common way to do this is to load a JSON (Javascript Object Notation) string from some source, and convert that into a Javascript Object that we can view and manipulate in our application. In this video tutorial, I walk through how to use […]

Saving Data in Ionic 2

A Simple Guide to Saving Data in Ionic 2

Many applications require the ability to save data in some manner so that a user can perform some actions in the application, close the application, and have the application remember the user’s input from the last time they opened the application. By default, anything you do within your application is just going to be lost […]

Sharing Data Between Pages in Ionic 2

Passing Data Between Pages in Ionic 2

When building an application that has more than a few pages, there’s a good chance that those pages won’t be working in isolation. You may want to send data from one page to the next, send data back to the last page, or even access some data from one page in an entirely different area […]

Grid Component in Ionic 2

An Overview of the Grid Component in Ionic 2

Ionic 2 makes it super easy to create beautiful looking layouts. Most of the time you can just drop in the component you want to use and be on your way. Sometimes, you will need to create more complicated layouts, though. Perhaps rather than a simple list, you want a list with three horizontal boxes […]

Ionic 2 Side Menu Highlighting

Create a Menu with Active Page Highlight in Ionic 2

A sliding side menu is one of the most commonly used navigation patterns in mobile applications, and it is baked into Ionic by default. In this video tutorial we will quickly walk through the basics of how the side menu works, and then we will build some functionality that will allow us to highlight the […]

Conditional Attributes, Styles, and Classes in Ionic 2

Conditional Attributes, Styles, and Classes in Ionic 2

When using Ionic 2, there are a bunch of CSS Utility Attributes that we can use to style elements in our application. We can also, of course, add normal styles and classes to elements as well. There will often be times where we want to apply this styling conditionally. Perhaps you want to add the […]

Property Binding and Event Binding in Ionic 2

Component and Template Interaction in Ionic 2

Each page in an Ionic 2 application is a component, and every component has a class definition in a TypeScript file, and an HTML template. The class and the template have a very important relationship and need to be able to communicate effectively. In this video tutorial, I introduce the concepts of Property Binding, Event […]

Hacking CSS in Ionic 2

When styling Ionic 2 applications, there are several different methods available to you. You can use Ionic’s built in utility attributes, you can overwrite SASS variables or create your own, and you can also define your own custom CSS rules. It can be hard to understand what to use and when, though. In this video […]

Map, Filter, and Reduce in Ionic 2

Filtering, Mapping, and Reducing Arrays in Ionic 2

We often work with arrays of data in Ionic 2 applications – sometimes some data we have defined locally, sometimes data we may be loading in from some external source – and at some point, we may want to modify that data in some way. If you have an array of products, you may want […]

Ionic 2 Asynchronous Login

Creating an Asynchronous Login Screen in Ionic 2

If you add a login screen to your application, then there is a good chance that you will also implement some functionality that allows you to remember users who have logged in previously. It’s pretty annoying to have to enter in your credentials every time you use an application. Instead, it is preferable to send […]

Git and Ionic 2

How to Use Git with Ionic 2 Projects

Git is an essential tool for developers, but it can be a bit intimidating at first. It has massive benefits even if you are just working by yourself, but once you start working in a team environment it becomes an absolute essential. In short, using Git will allow you to: Create an online backup of […]