Deploying an ember app made with Firebase Adapter

I got an Ember.js project named “hello-hamzeen” which I did to explore “Ember.js” where I chose to use Firebase as the Adapter. Here is the world’s most succinct deployment instructions ever! 🙂

 

1. If you don’t have firebase tools

$ sudo npm install -g firebase-tools

2. Otherwise, if you want to get it updated

$ sudo npm update -g firebase-tools

3. Login to your firebase account from terminal

$ sudo firebase login

Note: Upon successful login you should see something similar to the following url open up in your browser,
https://www.firebase.com/login/confirm.html?ticket=1cf04b3f-383a-4ba6-9124-71ff6f7bc9ae

 


Now to the meat of it, initialize and deploy to firebaseapp.com. Run the following from your project directory,

4. Initialize

When prompted select our project and type in the public folder you want to use. Typically this is ‘dist’ for Ember apps,
$ sudo firebase init

5. Deploy your project to firebaseapp.com

$ sudo firebase deploy

Mine can be found at, https://hello-hamzeen.firebaseapp.com
Cheers!

Advertisements

Build Watchman from Source

Watchman doesn’t need introduction if you have done Compass, Susy or Sass. Simply put it’s a node module; an observer for picking up any changes in the filesystem at a specified location to afterwards, trigger an action based on it. Typically it is sued to transpile your .scss files into .css files. For some reason I’m unable to install it via npm command. So I got around to write the instructions to build it from its source.


$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.5.0 # for the latest stable version
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

compass
Image

Compass: Painless CSS Precompilation

If you have been up to any kind of web designing in the past 6 months, you have probably heard of css precompilers. In a nutshell, they have emerged to give css the capabilities it didn’t have. But not without the cost of introducing an intermediate file which would eventually get transformed into css. So here I get down to write a beginner’s guide that might help kick-off with sass (syntactically awesome style sheets) & compass. It covers important concepts, installation & a sample project to see it in action.

 

I. Important Concepts

As mentioned above, both sass & less needs to be compiled into css but to be careful with the terms this process is more formally known as transpiling. Because compiling often involves taking a source code and transforming it into something which is runnable in a machine readable (byte code) format. However with sass & less, this whole thing is slightly different as it only involves a process where the source files in these languages are taken and transformed into another language. Here it’s css which is a stylesheet language. However making things more confusing, the same process is also widely referred to as precompiling. I’m sorry if I had already cracked your head here 😦

 

II. Installation

Focusing back on Compass, it is just another implementation of sass which comes as a ruby gem & if you’re not a rubyist a ruby gem is more like a library when you think of it from a C++ perspective. So let’s setup compass first,

  1. Being a ruby gem, compass requires ruby. If you’re on a mac/linux you should probably have it. If you want to confirm whether ruby is already there, you can do so by hitting up “ruby -v” on your terminal/command prompt. If you don’t have it, head to Ruby Lang.
  2. To install compass hit the following two commands in your terminal,
    $sudo gem update --system
    $sudo gem install compass

Note: Sometimes you might face trouble, if you don’t use sudo. Hence, I have chosen to do it in sudo mode. If you’re on windows you just need to open cmd.exe as an administrator. Above $ is nothing but a placeholder that you don’t need to type.

 

III. Sample Project

Now that we got everything setup. We can jump into our first project, a simple responsive page with a background video played from youtube. So to create our sass/compass enabled project there are two ways one is to generate project skeleton by using the following command,

$compass create compass_demo

The next approach which is mostly used by those who have been using compass over a period of time is to create it manually from an existing project. I know for certain that you are unlikely to have one especially, if you had decided to follow this post in order to try compass for the first time. Don’t worry, I got you covered! you can use the project I have worked out for this post from github.

However, I wouldn’t encourage you to follow the second approach above as it will prevent your hand getting dirty building a compass enabled app from scratch. Therefore, assuming you stick with the first mode, here comes the gist of this post, setting up the config.rb ruby file which got generated after the create command above. let’s tackle it, this file gives in our hand to define two important aspects of this whole process. The first would be to define where our css, sass, js and image files are going to reside basically, the structure of our project.

The next is to define which syntax we are going to use with our sass files. I have chosen .scss, as I prefer its syntax over .sass. Here is the content of my configurator (i.e. config.rb),

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

output_style = :expanded # After dev :compressed

# To enable relative paths to assets via compass helper functions.
# relative_assets = true

line_comments = true

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
preferred_syntax = :scss

That was neat isn’t it? However for 2 reasons I’m not going to walkthrough the sass file

  1. it’s very simple that it only uses few mixins & exactly 3 variables!
  2. it would make this post a very lengthy one

So here is my style.scss, simple as it can get!

@import 'compass/css3';

$bg_color: #3b3531;
$text_color: #ffffff;
$header_color: #B7AE74;

@mixin height($min, $max) {
    min-height: $min;
    max-height: $max;
}

@mixin min_height($min) {
    min-height: $min;
}

body {
    background: $bg_color;
    color: $text_color;
}

.video-section .pattern-overlay {
    background-color: rgba(71, 71, 71, 0.59);
    padding: 110px 0 32px;
    @include min_height(496px);
}

#footer {
    @include height(250px, 300px);
}

.dark-overlay {
    padding: 20px;
    @include min_height(206px);
}

.dark, .video-section h1, .video-section h3 {
    text-align: center;
}

.dark h1, .video-section h1 {
    font-size: 110px;
    font-family: 'Buenard', serif;
    font-weight: bold;
    text-transform: uppercase;
    margin: 40px auto 0px;
    text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    -moz-text-shadow: 1px 1px 1px #000;
}

h3 {
    font-size: 25px;
    font-weight: lighter;
    margin: 0px auto 15px;
}

.dark h3 {
    margin: 10px auto 2px;
    color: $header_color;
    font-size: 22px;
}

.dark h4 {
    margin: 16px auto 2px;
    color: $header_color;
    font-size: 12px;
    font-weight: lighter;
}

#credits {
    margin-top: 90px;
}

.video-section .buttonBar {
    display: none;
}

.player {
    font-size: 1px;
}

So where is my css? Let me get there! once we properly setup our config.rb, all what we need to do is open up a terminal window, browse to our project directory and hit the following command,

$compass watch

If you trust me, here on you never need to worry about your css file as far as you can write your sass file correct. Because the watch command above is constantly on the lookout for any change(s) or modification(s) you make to your sass file. As soon as you save it, it will pick it/them up, transform it into css (i.e transpiling) & then will place it in the designated directory which is defined in the configuration file. So let alone the watch process to look after the css file(s).

 

IV. Tl;dr

You can view the completed demo here & obtain its code too! One will always have the doubt what happens to those css files which don’t require pre-compilation like the bootstrap.css. Well, that too is handled well by the watch process that it doesn’t over-write or remove any css files(s) that do not have a corresponding sass file. You can actually observe it if you happen to work with the above repository. Hope it helps you take the dive into the sass world with confidence, thanks.

Chronicles

It ‘s been a while since I last blogged. I wish everyone a happy new year 2010 as this happens to be the first post for this year. Lot has happened and importantly, a semester has gone past as I once again got busy doing a bundle of course works.

One of the first things to explore in the new year was gaming engines as I have been looking to create virtual 3D environments. And it became really serious after watching AVATAR, one of the first engines that impressed me was UNITY.

Being a desktop enhancement freak, yesterday after getting bored doing another coursework, thought of trying circle dock inspired by some of the concept videos. An open source version of circle dock from, Sourceforge was the one for me. It was really cool and below shared is a video of it.

However the immediate reason to write this post was QR Code. I knew there is a bar code scanner in ma phone but I have never used it or else I was never required to use it. However, today while I was going through few blogs I found it could be a great way to share urls and even contact details. You can read more on QR Code on, Nokia Mobilecodes. One of ma first attempt was to create a code carrying the blog url. It works tremendously well and I was able to visit the blog soon after scanning it on the phone which earlier I had to either type or to use a bookmark. Below I share the QR Code if you have a phone with bar code scanner you should be able to scan it with the camera.

Lonely Coder

Anticipating a release of fennac which is the Symbian version of Firefox. Browsing with Firefox on cellphone should be cool. Thank you. 🙂

Exploring a street of Kyoto with Engage.

Well the title might sound a little strange and confusing. Never the less, as most of us know Kyoto is a city in japan should have said a beautiful one at that and Engage is the project which I work these days. Things are really getting heated both with the project and rest of the stuffs that I’m up to these days causing me to go quite for sometime.

Anyhow, one of the things which impressed a lot at the start of this project was Augmented Reality (AR) where virtuality and reality come together. Normally, a virtual object or an animation is augmented on a real video or an image (content) using a marker where the virtual object always shown on top of the real content. But my interest, ever since I first happen to see this was on using it for computer interaction besides there are many possibilities that exists with AR specially when it is combined with holography which can surely bring to light an unseen dimension to our lives and produce great results.

Getting back to the post, this shows an example panorama which can be explored using a marker. It was intentional here to refrain from augmenting specially, to show the possibility of using marker for interaction and even for wearable computing. Enjoy 🙂

Acknowledgments:

I have adapted an image of a street in Kyoto for the example which is available at, http://wallpaper.free-photograph.net/en/photobase/yp5745.html

And the background music for this video was taken from,
http://ccmixter.org/files/Ihaveriffs/22440 which was released under creative commons license.

Firefox Party at IIT

Well it was the first day of lectures for us after the completion of placement. No doubt it’s going to be a hectic year ahead of us. But there was a huge surprise and sudden fun surrounded us during our short break of half an hour between the first two lectures.

It was not more than one and a half month since I joined spread firefox as a campus rep. And ma first opportunity to grab a swags pack came just few weeks back and for ma amazement I received the pack within three weeks. After discussing with some of the other firefox freaks at IIT, we decided to through the party on the very first day itself.

So unexpectedly, the break between the first two lectures turned out be the time for Firefox Party. I should thank CJ for helping me immensely to get it underway in no-time.

There was great curiosity to know how to get swags pack on their own hence, we gave a glimpse of Spread Firefox and Campus Reps Initiative and also some materials related to getting started with Firefox Add-ons development for those who were interested on it. So hope to see some new reps in action from IIT very shortly. The event was thoroughly entertaining and was a tremendous experience. Everyone seem to have enjoyed it to the utmost. Expecting more of these FF Parties at IIT in the near future.

Getting wired for the final year Project.

I’m back after a long break. Ever since, I finished ma placement I was quote up with some projects and never had time to make post. Anyway this marks the start of another huge project in ma undergraduate studies. Yes, this is all bout getting wired for ma final year project.

The Project falls into the main stream of HCI (Human Computer Interaction) which will also involve a fair bit of wireless communication and motion sensing. But the first part of the project is to control a PC with hand and to provide support for all desktop applications.

The idea is to use a web cam and track hand movements and then define various methods for simulating all possible mouse events with a set of hand gestures. And going a step further, it is also planned to provide a drawing pad kind of an application where the user can draw various symbols and directly execute keyboard shortcuts without having to press any key (or key combination) on the keyboard.

So for the first part it will involve a lot of image processing and I’ll be using OpenCV for it. I chose OpenCV because it is open source and provides ample support for motion tracking. And since it’s C/C++ based it’s easy for me to get started with it as well.

I initially wanted to setup Visual Studio (2008) and configure OpenCV on it. But I failed badly on my Vista. Though it got installed alright, I couldn’t initiate a c++ project owing to a problem in launching the wizard for it. Anyway this was a known issue and was caused due to a permission issue with one of the registry keys associated with Visual Studio.

After a bit of digging I found a nice light weight open source IDE which also supports C/C++ development. After mapping it with the compiler(MinGW) and pointing OpenCV libraries I was able to code ma hello world in a flash.

The IDE now I’m using is Dev C++ and works wonderfully well with MinGW. If you are interested you can follow this tutorial which I also followed,
http://www.cypax.net/tutorials/opencv/index?language=en

And if you are using the latest version of OpenCV make sure you don’t include -lcvcam to the linker command line. And the tutorial assumes that you have already setup MinGW if that’s not the case you may visit,
http://mingw.org/

Once you finish installing MinGW, you will also require to add MinGW bin to your path variable. Hope this will be useful if you are a windows vista user wanting to kick start with OpenCV image processing library.

After playing around with some tutorials and samples code I was able detect a moving object and bind the mouse pointer to the moving object but this looks very unstable at the moment. 🙂

Above I have used color space conversion, Contours finding and Edge Detection. And now I’m working on template matching. Hope when it’s combined with Template Matching it can produce better results. And make it a lot stable. Below I also share a screen shot of template matching (performed on an image). I’m yet to apply it on a video. 🙂

Template Matching via OpenCV

Template Matching with OpenCV