Built to last; Build with Ember

#01. Wildcard Route for 404

// app/router.js
Router.map(function() {
  // other routes
  this.route('page-not-found', { path: '/*wildcard' });
});
// app/templates/page-not-found.hbs
Page Not Found
{{outlet}}

#02. Helper Method

// app/helpers/increment.js
import Ember from "ember";

export function increment(integer){
  return ++integer;
}

export default Ember.Helper.helper(increment);
// app/templates/index.hbs
{{#each model as |contact index|}}
    #{{increment index}}. {{contact.title}}
{{/each}}

Port an Ember App to Cordova

1. Pre-Requisites

1.1. Ember Cli
$sudo npm install -g ember-cli

1.2. Cordova
$sudo npm install -g cordova

1.3. Also consider
Git, Node.js (with NPM), Bower, Ember CLI, PhantomJS

2. create ember project

$ember new labs

3. include ember-cordova-cli in package.json

DevDependencies
“ember-cli-cordova”: “0.0.15”,

4. alter config/environment.js

modulePrefix: ‘hello’,
environment: environment,
baseURL: ‘/’,
locationType: ‘hash’,
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. ‘with-controller’: true
}
},

APP: {
// Here you can pass flags/options to your application instance
// when it is created
},

cordova: {
rebuildOnChange: false,
emulate: false
}

5. Generate Cordova Proj (reverse domain name)

sudo ember generate cordova-init com.hamzeen.hello –platform=android

6. Open Existing Proj

ember cordova:prepare

7. Open iOS Porject in Xcode

ember cordova:open

8. Build for target platform

$sudo ember cordova:build –environment=production –platform=android

9. Additional

9.1. full access
$chmod 777 -R /dir

9.2. To modify npmrc for proxies and npm registry
$vi ~/.npmrc

10. Live debug

visit this url on chrome
chrome://inspect/#devices

Reference:

introduction:

ember-cli-cordova
https://github.com/poetic/ember-cli-cordova

for iOS
http://dreamingin.codes/article/merging-ember-cli-cordova-and-make-it-emulate-ios-live/

http://lelandbatey.com/posts/2015/02/ember-and-cordova

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!

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