Node Webkit powered Dashboard application

Node Webkit Powered Dashboard app

In this post, we will be building a full fledged desktop application using node webkit and web technologies. We are going to build a dashboard app called myDashboard. The app will show the Weather report, Google Map, Flickr images and a Calendar. The final product would look like

Screen Shot 2014-07-20 at 3.47.12 pmScreen Shot 2014-07-20 at 3.46.14 pmScreen Shot 2014-07-20 at 3.48.13 pmScreen Shot 2014-07-20 at 3.48.33 pmScreen Shot 2014-07-20 at 3.47.55 pmYou can get the complete code here. The final installers are around 200MB, hence did not share the installer.

So, let us see how we can build this app.

Contents

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

Web Components – The Future Web

Web Components & Polymers – The Fabric of Future

This blog post is about Web Components. What they are, why do we need them and how to go about creating a few of our own. We will also look at the browser support, make sure our Web Components work everywhere with the help of polyfills like Polymer. And finally, we will be using Yeoman to scaffold a Polymer project and using Yeoman sub-generators to scaffold new Web Components.

So, let’s get rolling.

Contents

The Examples in this tutorial can be found at GitHub. Continue reading

PhoneGap Quick Start

PhoneGap 3 Quick Start

PhoneGap Quick Start

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

This blog post is a quick start tutorial on how to develop, build & deploy a native app using HTML5, CSS3, Javascript and PhoneGap. I am not going to explain what PhoneGap can/can’t do or rules for Native app development (may be I’ll write one later).

Contents

Continue reading

SASS and Foundation

SASS and Foundation

SCSS and Foundation

SASS SCSS and Foundation

As the name suggests we are going to take a dive into the world of CSS – Cascading Style Sheets. The reusable piece of documents that are served on every page, so our pages look alike & beautiful. The way I look at CSS, they are like the “make up” artists for our performers i.e. “HTML document”.

At the end of the day, a HTML document is a simple XML(EXtensible Markup Language), that is made up of tags (head, body, div etc..) and attributes (style, id, class) and intended to  carry data, not to display data. It is the responsibility of our browser engine to take that data and make HTML into something more meaningful i.e. DOM. DOM is a complete tl;dr post altogether.

Contents

Continue reading