Building a Slush Generator

Building a Slush Generator

Generators are powerful tools that help in quickly scaffolding project structures. You can use them to start off a new project or add new components to an existing project. Generally these projects are collections of best practices that a developer can consume directly. In this post, we will see how to build a simple generator that will create a boilerplate for a building static pages with auto reloading feature.

You can find the completed code here.

So, let us get started.

What is Slush?

Slush is a tool to be able to use Gulp for project scaffolding.

Slush does not contain anything “out of the box”, except the ability to locate installed slush generators and to run them with liftoff.

Continue reading

Building and Publishing your Web Component in 9 Steps

Building and Publishing your Web Component in 9 Steps

This is a quick tutorial on how to build your Web Component, push it to GitHub with a demo and finally publish it to bower (optional). We will be building an upper-case tag, which will make the text-content inside it appear in upper case.

So let us get started.

If you are new to Web Components, refer Web Components – The Future Web and Web Components, PhoneGap Build and WordPress – A Hybrid App for your Blog.

Step 1 : Create a new folder where you would like to store all your Web Components. Let us call it myWebComponents and open terminal/prompt here.

Step 2 : Install the required dependencies globally. Run

Windows Mac/*nix
npm i -g bower yo generator-polymer    sudo npm i -g bower yo generator-polymer

Continue reading

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.

Contents

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

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

Onsen UI and PhoneGap – Getting Started

Onsen UI – The Answer to PhoneGap UI Development

Onsen UI – tutorial

Onsen UI – getting started

This is a getting started post on building an Onsen UI hybrid app. We will pick a simple template add a theme and then deploy the app to PhoneGap build to generate an installer.

The below screenshots are from my Samsung Galaxy Note I

Screenshots_2014-05-09-16-44-00Screenshots_2014-05-09-16-40-32Screenshots_2014-05-09-16-40-50You can download the installer from here. And if you want to submit this app to PhoneGap build, you can fork this repo.

Contents

Continue reading

Ionic Restify MongoDB – An End to End Hybrid App

Ionic Restify MongoDB – An End to End Hybrid App

Build the same Bucket List app without worrying about server side code, check out Creating a Firebase Powered End to End Ionic Application

In this post, we are going to build an End to End Hybrid App, that has a server component and a client component. Our server will be built on top of Node js, with Restify as the server side framework and MongoDB as the data persistence layer. Our Client is a Hybrid App, built with Ionic framework. We then are going to deploy the Ionic app using PhoneGap Build service to generate a Native installer.

The App we are going to build is a Bucket List app. Here a user can register and login. Then s/he can create a few bucket list items. Which would eventually result in

2014-04-27-12-42-23 2014-04-27-12-42-32

2014-04-27-12-44-31 2014-04-27-12-46-08

  2014-04-27-12-46-37 2014-04-27-12-43-37

These images are taken from my Android Samsung Galaxy Note I device. And the performance was okay. But there is a lot of scope for improvement. If you want to dig into the app yourself, click here.

I have deployed the REST server on Heroku, DB on MongoLab and the client is the Ionic PhoneGap Native app!

List of all the REST service endpoints can be found here (needs some cleanup).

If you want to issue a PhoneGap build before diving in, you can fork this repo and submit it here. Download the installer and test it out. Or you can download the installer directly from here.

You can find the complete code here.

Contents

Continue reading

PhoneGap 3 – Contacts API Tutorial

PhoneGap 3 – Contacts API Tutorial

This is a quick start tutorial using PhoneGap 3’s contact API. I have written another post here explaining what PhoneGap 3 is, how is to set it up & what are the key differences between PhoneGap 2.x & PhoneGap 3.x. I recommend checking that out before continuing.

Approach

  • Step 1: Create a new GitHub repo (How to? – Here).
  • Step 2: Clone the repo to local
  • Step 3: Create new PhoneGap 3 project (assuming you have completed the setup from here)
  • Step 4: Update the newly created app & test in local.
  • Step 5: Commit Changes to GitHub repo
  • Step 6: Run PhoneGap Build, Install the app & validate(How to? – Here)
  • Step 7: Make changes to our project – add jQuery Mobile Framework (Must read) & Contacts API plugin.
  • Step 8: Commit changes back to the repo
  • Step 9: Issue a PhoneGap Build & BOOOOMMM!!! Install the app & validate

So lets get started!

PS:We are going to follow Mac/Windows – Android ADT based development.

Continue reading

Github Pages – Free Hosting

Github Pages – Free Hosting

Github Pages – Free Hosting Tutorial

The super awesome GitHub service allows you to host as many free static websites as you want. All you need to do is host your code on GitHub repo! In this post I will be describing two methods to host your static site for free.

If are not aware of what GitHub & Git are, how to set them up, you can refer to this post. I will be using the same myNodeApp repo for this tutorial too. You can do the below steps with any GitHub repo.

Contents

Continue reading

Git & GitHub for Beginners

Git & GitHub for Beginners

In today’s collaborative world, it is very essential that one understands the need for a Concurrent Versions System (CVS). A CVS is a simple revision system, that tracks all your changes. Imagine an ecosystem where you and a few other developers are working on a web application & updating html/css & js files asynchronously/separately. When you want to integrate the bits of code, you need to sit side by side and compare notes on what all you have done. What to add, what to remove etc. A Version control system is precisely for this purpose & Git is one such program. GitHub uses git to power itself.

Contents

Continue reading