M.E.A.N. Stack Development with Vagrant

If you are new to MEAN, I would recommend checking out my MEAN Workshop.

Also checkout my tutorial MEAN stack – A Hands on Tutorial

Recently I started using Vagrant for one of my clients. The requirement was to have a unified working environment for all the developers, so that they can focus more on code and less on the onboarding and setup. So, I built a Vagrant box that is ready to be used for M.E.A.N. Stack development.

If you are new to Vagrant take a look at

In this post, I will show how to consume the mean-box I have created as is and get started with M.E.A.N. development. Later in the post, I will also show how you can build a customized version of your own Vagrant box and then share it with your team.

So, let us get started.

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

Journey of a FireFox OS App

FireFox OS App Development

In this post, we will see how to create a Firefox OS app using a Yeoman generator, build a simple app using Firefox OS’s native Building Blocks. Then we will publish the app to the Firefox Marketplace. To make the app a bit more interesting, we will use GeoNames Weather API and show the details to the user. The end product will look like

Screen Shot 2014-04-11 at 10.26.33 am

Screen Shot 2014-04-11 at 7.04.02 pm

Disclaimer: I was not able to get through the review process for publishing this App on the Firefox MarketPlace, as this app is working fine on the simulator and not on the actual device. And I do not have an actual device to test this. But this post can give you an idea as how to get started with Firefox OS apps development.

Contents

The code for this project can be found at GitHub & a Live demo here.
Continue reading

ECMAScript 6 – Playing around in Harmony

ECMAScript 6 – Playing around in Harmony

ECMAScript 6 is the next version of our favorite scripting language ECMAScript 5. The code name is “Harmony” or “ES.next”. The current version of Javascript is 1.8.5, which was upgraded around July 2010 to be compliant with ECMAScript 5 features.

You can learn more ECMAScript 5 and below versions here.

ECMAScript 6 draft specification can be found here.

ECMAScript 6 compatibility can be found here.

The tentative release date is December 2014. So, if you want to train yourself for the next major change in the world of Javascript, you need a training arena & that is what we are going to build today!

To hone your ES6 skills, lets create a playground, where you can write code in ES6 and transpile the same to ES5 to run in today’s browsers.

There are 2 ways you can get started

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

Rotten Tomatoes jQuery Rest Client

Rotten Tomatoes jQuery Rest Client

Recently Rotten Tomatoes has exposed a REST API to access the Movies, DVD & Releases from their database. I have searched for a Javascript/jQuery REST client for this API, but couldn’t find one. So wrote one myself. I have used a Grunt jQuery template & built it. You can find a tutorial here.

Screen Shot 2014-02-26 at 9.32.30 AM

You can find a demo here, the code base here & documentation here.

You can log issues here.

Tested On

  • Mac Safari
  • Mac Chrome
  • Mac Firefox
  • Win7 IE8
  • Win7 IE9
  • Win7 IE10
  • Win7 Chrome
  • Win7 Firefox
  • Win7 Safari

Legal

Important Notes about API Usage

  • Each user key is granted a limited number of calls per second and per day. If increased call limits are needed, you can email [email protected] with a request that includes your username/key, detailed description and screen grabs of your desired implementation, and current/expected calls per second and day. Emails without all of this informaton may not get a response.
  • The API is intended for use in the U.S. only. Deploying content outside of this territory must be approved by the Rotten Tomatoes team.
  • The API may NOT be sub-licensed to any third parties.
  • Rotten Tomatoes reserves the right to request links and/or screen grabs of your usage of Rotten Tomatoes content. If you do not comply, Rotten Tomatoes reserves the right to terminate your API license.

More info here.


Thanks for reading! Do comment.
@arvindr21

Responsive Web Design Test Automation

Responsive Web Design Test Automation

Responsive Web Design (RWD) has been around for quite some time. Today, startups would rather invest their time in a RWD website than build a native app. Why? Here is a presentation about RWD. You can take a quick look and come back.

Contents

The present day solution for testing Responsive sites is sort of manual. You would either use tools like screenfly to resize & check the layout of the pages. Or, you would get a lot of actual devices and test your website on each of them, to see if everything is aligned properly. Or the next gen solution is to take an account from products like Browser Stack, which would take a URL and spit out images from all the devices and browsers. Nevertheless, its a manual task again to verify all the images. 
Continue reading

Grunt js Tutorial – Setup & More

Grunt js Tutorial – Setup & More

This is quick tutorial on Grunt. What it is, how to set it up & utilize its basic features. This tutorial also covers developing a jQuery plugin using Grunt’s scaffolding template.

Contents

Continue reading