Make List Items Swipeable In Ionic Framework

It is an expectation of modern mobile applications to have a fancy UI with smooth animations and gesture controls. Users want to be able to drag things, see smooth transitions, popups and other neat UI wizardry.

A common UI feature, as found in apps like Gmail, are swipe-able list items. Whether it be swiping to show buttons or swiping to perform tasks, it adds an additional layer of coolness.

Using Ionic Framework on top of Apache Cordova gives us access to swipe-able elements in the ion-list directive.

Syncing Data With Firebase Using Ionic Framework

Lately there has been a lot of buzz about Firebase and now that it has been bought by Google, it is probably only going to get bigger. Firebase has a very thorough datastore API making it very useful for applications that can leverage JavaScript.

Now you might be asking yourself, well can’t I use the Dropbox datastore API that you mentioned in one of your previous articles? You absolutely can, however, Firebase is a far better solution when creating a service because the data isn’t sandboxed to a specific user like Dropbox.

In this example, we’re going to create a simple Apache Cordova Android and iOS application using Ionic Framework.

Accessing A Localhost Server From Genymotion

Many times when developing Android applications, you’re doing it to pair with a web server. You’re planning on creating this awesome web service / Android experience, but you aren’t quite ready to publish the web service to the internet.

The following will show you how to connect the Genymotion Android emulator to a locally hosted web application.

Create A Simple Web Application With Express.js

I’ve recently been exploring other options when it comes to web frameworks. I come from a PHP ZendFramework background, but since having upgrading to ZendFramework 2, I’ve not been impressed.

Since then I’ve been exploring more of Node.js. However, like PHP, web programming often works best with a framework. This is why I’ve been exploring Node.js with Express as the framework.

Use Grunt To Lint And Uglify Your JavaScript Project

JavaScript is a forgiving language unlike Java or C#. Because of this, we can’t always trust that our code is correct. I don’t mean that the logic may not be correct, I’m talking about syntax and structure.

Lint via Wikipedia:

…modern lint checkers are often used to find code that doesn’t correspond to certain style guidelines. They can also be used as simple debuggers for common errors, or hard to find errors such as heisenbugs

In addition to needing to lint your code for errors, you may also consider compressing and obfuscating your source code. This can be done through the process of uglification or minification.

Minification via Wikipedia:

Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code without changing its functionality.

Linting and minification are two tasks that can easily be run with a task runner such as Grunt or Gulp. In this example, I’ll be demonstrating how to use Grunt to run these tasks.

Force HTTPS On All Pages Of Your WordPress Site

Because of popular request, I decided to make my entire WordPress blog secured behind an HTTPS connection. In addition to requests, I also read that search engines such as Google reward site owners that have complete sites behind HTTPS.

In a previous post I made, I explained how to generate and install an SSL certificate to an Apache web server, but things are a little different in terms of WordPress.

Understanding Tabs In Ionic Framework

A very popular pattern on all mobile platforms is the tabbed interface. This interface is especially popular on iOS where it is encouraged by Apple’s design language over a side menu. It has the advantage that the user can see all of the options available to them whereas a side menu’s options are hidden by design.

Ionic has a very simple tabs directive allowing you to implement these kind of interfaces with lots of options for different styles (icons only, text only, text and icon). In this tutorial, we’ll take a look at the ionic-starter-tabs project on GitHub and break it down piece by piece to get a good understanding of how it works.