Web Components, PhoneGap Build and WordPress – A Hybrid App for your Blog

Web Components, PhoneGap Build and WordPress

What started of as a “small experiment” ended up with me sleepless for 2 days straight.

It all started with this video

Pretty pumped up, I started off exploring the New Polymer. I used Polymer a couple of months ago and wrote a tutorial on Web Components and Polymer . Now, a lot has changed. So, super excited about the new way of developing Web Components, I quickly whipped out 3 new components (<upper-case><lower-case> and <capital-case>). Pretty basic, but gave me a decent hands on.

Then I started digging into their tutorial (a must read) and loved the way how components go hand in hand in building an actual application, yet the smaller pieces remain reusable. This got me thinking to make a Hybrid app for my blog using Web Components, PhoneGap and WordPress and this post is the on-going journey.

As of today I was not able to get the Hybrid app working on most of the devices. I was able to get it working only on an iOS emulator (did not test on iPhone/iPad device) and Android 4.4.2 (Android emulator).  but I have raised this issue with the Polymer folks.

The final app will look like

Screen Shot 2014-06-28 at 1.55.17 pm

You can take a digg at the demo here.

You can find the complete code here, the Installer source repo here and the PhoneGap installer here.

Note : I will be updating this post from time to time as things progress.


Continue reading

Loving Google’s Web Starter Kit

For the past few days I have been totally digging Google’s Web Starter Kit. Yes, I have used Yeoman, Slush and other “One Stop – Best Practice” tools, but there is something about WSK that makes you want to use it as a Starter template kit for all your projects.

I have been going through the resources and I would recommend the following way to build a new app. Please feel free to share the way you develop too.

Phase I : What’s out there?

  • First, navigate to Google’s Web Fundamentals. You can find a list of resources on how to build a multi-device web site with a lot of awesome best practices.
  • Next Discover Multi-Device Tools and Install them as needed.

Continue reading

Your Portfolio Website with GitHub Pages

Your Portfolio with GitHub Pages

In this quick and dirty post, we will see how you can build a static Portfolio website for yourself. We will be leveraging the power of GitHub pages and the default sub-domain that you get when you create an account with GitHub.

First off, you need to be aware of what GitHub is. If you don’t, I recommend going through Git & GitHub for Beginners and if you not aware of GitHub pages, please go through Github Pages – Free Hosting as well.

A live demo of what we are going to build : http://arvindr21.github.io

Continue reading

Getting started with Firebase

Getting started with Firebase

In this post, we will see how to integrate Firebase with a “Pure” Javascript application, an Angularjs application and a Backbonejs application. We will start off by setting up Firebase account and then we will take a quick look at the Firebase Authentication API. I have also written a Hybrid app using Firebase and IonicFramework, you can find the details below.

We are going a MovieFire app, that will store all your favorite movies. And to persist this data, we will integrate the app with Firebase. We will be implementing the traditional CRUD operations on the movies collection.

You can take a quick peek at the demo here

Screen Shot 2014-06-27 at 10.26.25 am

and the complete code here.

So, Let’s get started.


Continue reading

Understanding UI Performance

Understanding UI Performance

Let’s say that you have built a shiny new website and launched it for the world to use. With in the first few days, you keep hearing that the application is slow, and it takes forever to load simple pop-ups, yada yada yada. How do you go about analysing and fixing them?

In this post, we will look at multiple ways how we can dissect a performance issue related to user interface and understand what things you could have done better during your development and testing phase to avoid a situation like this.

As a baseline, we are going to take the example of my blog’s home page. If people reported that my blog is loading slowly, the first thing I would do is go to Pingdom and run a page load test. And the results would reflect as

Screen Shot 2014-06-09 at 11.35.24 pmThis seems kind of okay, with a load time of 2 seconds and page size just about an MB for the home page of my blog.

Continue reading

Custom build jQuery

Did you know that you can generate your custom build of jQuery? I did a few days ago and I am totally digging it.

The final jQuery file which you download from the website consists of the following modules

  • ajax
  • css
  • deprecated
  • dimensions
  • effects
  • event
  • offset
  • wrap
  • core/ready
  • deferred
  • exports/global
  • exports/amd
  • sizzle

There would be projects, where you are not using all the modules. But, you are including the entire jQuery source file, which does not really justify the 248kb un-minified or 84kb minified download.

Screen Shot 2014-06-08 at 6.41.30 pmSo, the folks at jQuery made things easy for us, they provided a build script where we can specify the modules we do not want to use and a custom jQuery source will be generated for us.

Sounds simple and easy right? Let us give that a try.

Continue reading