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 precompilersIn 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.

writing
Image

Javadoc from Eclipse

  1. Project > Generate Javadoc
  2. For Javadoc command field: browse & point javadoc.exe (found in \\JDK_dir\bin)
  3. In the next split pane check the project/package/class you need to generate the doc for
  4. Browse & point the Destination directory to which you would like to get the javadoc
  5. Click Finish
  6. Open the index.html (from your destination folder which you pointed in 4.)

 

Kudos You are done with your documentation, now it’s a code with its manual :)

Singleton Explained

There are handful of ways to define a Singleton class in Java. They aren’t that difficult yet, doing it the correct way matters. Here I have listed 3 ways of doing it. However, only the 3rd which uses on-demand holder acronym is preferred as the singleton instance created here is thread-safe & is unique.

Trivia 1: Why we don’t import classes like System, Integer and String?
Ans: The package java.lang.*; is implicitly imported.

Trivia 2: Can main method of a java program reside in an abstract class?
Ans: Yes it can! See the Driver class below.

1. Eager Singleton

package design.com.hamzeen;

public class EagerSingleton {
	private static EagerSingleton ins = new EagerSingleton();

	public static EagerSingleton getInstance() {
		return ins;
	}

	private EagerSingleton() {
	}
}

2. Lazy Singleton

package design.com.hamzeen;

public class LazySingleton {
	private static LazySingleton ins;

	public static LazySingleton getInstance() {
		if (ins == null) {
			ins = new LazySingleton();
		}
		return ins;
	}

	private LazySingleton() {
	}
}

3. Singleton Holder

package design.com.hamzeen;

public class SingletonHolder {
	public static SingletonHolder getInstance() {
		return Holder.ins;
	}

	private static final class Holder {
	  private static final SingletonHolder ins = 
				new SingletonHolder();
	}

	private SingletonHolder() {
	}
}

The Driver and Output

package design.com.hamzeen;

public abstract class Driver {

	public static void main(String[] args) {
	  EagerSingleton a1 = EagerSingleton.getInstance();
	  EagerSingleton a2 = EagerSingleton.getInstance();
	  System.out.println(a1.toString());
	  System.out.println(a2.toString());

	  LazySingleton b1 = LazySingleton.getInstance();
	  LazySingleton b2 = LazySingleton.getInstance();
	  System.out.println(b1.toString());
	  System.out.println(b2.toString());

	  SingletonHolder c1 = SingletonHolder.getInstance();
	  SingletonHolder c2 = SingletonHolder.getInstance();
	  System.out.println(c1.toString());
	  System.out.println(c2.toString());
	}
}

design.com.hamzeen.EagerSingleton@15db9742
design.com.hamzeen.EagerSingleton@15db9742
design.com.hamzeen.LazySingleton@6d06d69c
design.com.hamzeen.LazySingleton@6d06d69c
design.com.hamzeen.SingletonHolder@7852e922
design.com.hamzeen.SingletonHolder@7852e922

An insight into observer pattern

One of the things which I often encounter these days is design patterns. If I’m to give a head first to design patterns, they articulate solutions to some of the commonly occurring design problems with related to software development. Hence, it promotes design reusability just as Object-Oriented Programming (OOP) encourages code reusability. The Observer, which is classified as a behavioral pattern can become quite handy in case of handling events (event-driven) specially, if your project adopts Model View Control (MVC) architecture.

At the heart of Observer pattern are Source and its Observers. The idea behind the pattern is to allow multiple observers (which can be views such as windows, web pages or any other simple UI element like a label) to be able to listen to its Model, known as the Source by registering to it. The relationship between the source and the observers is hence, known as publish-subscribe relationship.

An apt situation to employ Observer would be, modifying a certain field on a window while couple of more windows which also utilize the same field are kept opened. One would expect this modification to instantaneously take effect on all of the windows which utilize the particular field. This characteristic can easily be ensured with Observer. A simplified implementation of the pattern in java can be found below.

View1.java

import java.util.Observable;
import java.util.Observer;

public class View1 implements Observer
{
  public void update(Observable o, Object arg)
  {
    System.out.println("View 1: " + arg.toString());
  }
}

View2.java

import java.util.Observable;
import java.util.Observer;

public class View2 implements Observer
{
  public void update(Observable o, Object arg)
  {
    System.out.println("View 2: " + arg.toString());
  }
}

UserData.java

import java.util.Observable;

public class UserData extends MyObservable{
  private String name;
  private Long id;

  public UserData(){
    this.name = "";
    this.id = (long)0;
  }

  public String getName()
  {
    return name;
  }

  public void setName(String name)
  {
    this.name = name;
    setChanged();
    notifyObservers(name);
  }

  public Long getId()
  {
    return id;
  }

  public void setId(int id)
  {
    this.id = (long)id;
    setChanged();
    notifyObservers(id);
  }
}

TestMain.java

public class TestMain
{
  public static void main(String[] args)
  {
    UserData data = new UserData();
    View1 view1 = new View1();
    View2 view2 = new View2();
    data.addObserver(view1);
    data.addObserver(view2);

    data.setName("Lenard");
  }
}

Lumar – A new dimension to reality browsing.

After being in labs for couple of decades, Augmented Reality has become a highly popular phenomenon in recent times. Specially, Mobile Augmented Reality platforms promise to transform geographical information systems to give them a new look that will make such applications more meaningful and entertaining to use.

One of the finest examples of this would be Reality Browsing where geo-tagged data from various sources such as Wikipedia, Panoramio, Twitter, Flickr and etc are overlayed real-time over a video. Along with the inclusion of compass, GPS receiver, accelerometer and video camera which have become common features on most modern smart phones, reality browsing has already entered mainstream and continues to grow.

Explorer View

Explorer View


Ground View

Ground View

Lumar, a reality browser for android smart phones will become the world’s first speech powered browser of its kind. Now it is available for public downloads via Android Market. The first release candidate contains layers such as Wikipedia, Twitter and Buzz. It also features a unique stations layer where it can show all major bus and railway stations around you. The video below gives a glimpse of how Lumar operates. Enjoy!

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.