Cautionary tale for Experts


Imagine a beginner (who has come from a decent front-end background) asking not-so-dumb questions to an expert in the field of Native application development. I hate the term “expert” because no one is purely expert in this field – every person is learning something new from others on a daily basis. But I’m quoting the term for the sake of the article. Here is how the conversation went:

Beginner: Is there a way to find an SDK version like we do with JS library?

Expert: What a dumb question! You do not understand native development that’s why you are asking it.

Beginner: Actually documentation does not have that details, hence asked.

Expert: Have you ever coded in Android/Java??

Beginner: Nope. Will I automatically get the new version of the SDK or have to update the manifest file each time?

Expert: Yes, automatic update!

Beginner: So I do not even have to run some sort of build command to pull in the new version like npm update does.

Expert: Please don’t over analyze the things that you don’t understand or don’t know. It wastes your as well as my time 🙂

Beginner: I’m not over analyzing, just trying to understand by comparing it with frontend development, but you can be little gentle solving such queries raised by the beginner like me.


As you can see the expert was trying to be arrogant by his knowledge and skills. To me it were acceptable if and only if he/she would have resolved my queries. Unfortunately, he/she had not answered any query in a sane way though. Una Kravets‘s recent tweet speaks about the same issue:

Through this post I just want to advice all the experts that,

Whatever high-skilled wits you’ve acquired were based on documentation, manuals, books, and articles written by someone else. You would not be the expert today if those experts had disparaged you like that. All the experts owe it to those they have learned from and the only thing to pay back the favor is by sharing your knowledge to the next generation without being cocky.

Remember, Sharing your knowledge with others does not make you less important.

Cautionary Tale for Angular Developers


Okay, now take a moment to watch this video

I’m sure after watching it, you may have realized that I’m not here to talk about why Neo falls into coma by stopping sentinels. Instead I’m going to talk about why my application got crashed the same way in Windows 8 RT webview and what I learned.

The Reality

An Application was built on top of Angular.js and Twitter Bootstrap for Desktop, Android, iOS, and Windows8. For touch devices, we’d created a Native wrapper around which loads the application in a webview. It looked fine in Android and iOS devices but was crashing in Windows8 RT upon opening a Bootstrap Modal popup. And I had no clue why Windows8 RT alone?

This is what I was using to open a modal window. I know its very bad to do the imperative DOM manipulation inside controller but as there were no directives bound to .modal I believed its safe to use it.

$('.modal').modal({backdrop: 'static'});

But I was wrong. In Windows8 RT, the above line was throwing an error “Object [object Object] has no method ‘modal'”. My guess is that I must be executing bootstrap code in middle of $digest cycle or something.

The Fix

To fix this issue I could either move that code in a custom directive and toggle modal’s state or use Angular UI Bootstrap. I decided to go with the latter. Finally I learned a very hard lesson while fixing the issue that one should spend some time to get it right than just get it done.

Follow the best practices or get ready to be bitten.

So I’ve used AngularUI Bootstrap modal directive to instead of doing DOM manipulation in the controller.

var App = angular.module('App', ['ui.bootstrap']);
App.run(function($rootScope) {
    $rootScope.opts = {
        backdrop: true,
        backdropClick: false,
    };
    
    $rootScope.modalOpen = false;
});

Finally updated the DOM as follows:

  <button class="btn btn-primary btn-large" ng-click="modalOpen = true">Open Modal</button>

  <div class="modal hide" options="opts" modal="modalOpen">
    <div class="modal-header">
      <h3>Modal Header</h3>
    </div>
    <div class="modal-body">
      Modal Body goes here...
    </div>
    <div class="modal-footer">
      <div class="btn" ng-click="modalOpen = false">Close</div>
    </div>
  </div>

Setting up github like server locally using Gitblit


After a very long research, I recently come across an awesome opensource alternative to Github Enterprise. There are many of them including GitLab, SCM-Manager, GitStack (Windows), etc. but installation was very difficult and time consuming.

Introducing GitBlit

It is an open-source, pure Java stack for managing, viewing, and serving Git repositories. Gitblit GO is an integrated, single-stack solution based on Jetty. It bundles all dependencies so that you can go from zero to Git in less than 5 mins. I’m not going to go into the installation stuff as its already given on their website. Download Gitblit Go and follow the instruction for installation.

Customizing Gitblit

A few things to check in case you want to customize the behavior of Gitblit server by modifying gitblit/data/gitblit.properties

// Base folder for repositories
git.repositoriesFolder = /var/www/github

// Use local IP to make it accessible within LAN
git.httpBindInterface = 172.18.11.178

// Listen to port
server.httpPort = 1337

You can write a small bash script, start.sh in order to avoid “java -jar gitblit.jar” every time you run the gitblit server.

#!/bin/bash
java -jar gitblit.jar
$ ./start.sh
INFO  ***********************************************************
INFO              _____  _  _    _      _  _  _
INFO             |  __ \(_)| |  | |    | |(_)| |
INFO             | |  \/ _ | |_ | |__  | | _ | |_
INFO             | | __ | || __|| '_ \ | || || __|
INFO             | |_\ \| || |_ | |_) || || || |_
INFO              \____/|_| \__||_.__/ |_||_| \__|
INFO                        Gitblit v1.3.0
INFO  
INFO  ***********************************************************
INFO  Running on Linux (3.11.0-15-generic)

Open your browser to http://172.18.11.178:1337 depending on your chosen configuration and log in with admin/admin.

Creating Bare Repositories

Once logged in with admin, go to repositories and click new repository link. Enter repository name and description under General tab as shown below:

Creating Bare Repository
Creating Bare Repository

Then go to Access Permissions tab, add owners of the repository, change access restriction to “authenticated clone & push”, and tick allow authorized users to fork option – that means only authorized user can view/clone the repository and play with it. Finally give permission how users can interact with the repository. In this case, we give admin the RW+ (God) rights by clicking Add button. Lastly click Save to save the configuration. This will take you to a list of repositories screen where you’ll see our repo is listed showing admin as a owner.

Provide access to repository
Provide access to repository

You will be presented with few instructions after selecting our repository (http://172.18.11.178:1337/summary/coolapp.git) from the list. Do not worry about whats shown on the page as we only care about the repo URL.

Empty Repo
Empty Repo

Importing the Project

If you are using git locally for your project then feel free to skip below steps. Fire up the terminal and run given commands:

  1. Create an application folder
  2. Add project files
  3. Create an empty git repository to watch over the project
  4. Stage all files
  5. Commit all staged files
$ mkdir coolapp && cd coolapp
$ touch index.html
$ git init
$ git add index.html
$ git commit -m "First Commit"

As we have set up a git repository on a local machine, we need to link it up with the remote repository we’d created previously.

  1. Add remote
  2. Check the remote added (you should see what you’d added here)
  3. Push local commits on the server (you’ve to enter the password for admin)
  4. Go back to our web interface and refresh the page
$ git remote add origin http://admin@172.18.11.178:1337/git/coolapp.git
$ git remote -v
$ git push -u origin master

You should see the commit message we just pushed.

First Commit
First Commit

Expanding the Team

Its very rare that only one person works on a project and we often have to give access of the repository to other developers so that they can contribute.

As you know, admin can create new users so lets have a look at how we can assign new member to the project.
Go to users link on the top and click new user. Enter username and password. Allow him to fork the authorized repository. Finally select access permissions tab and provide appropriate repository permission. In this case, rockstar is only allowed to clone the coolapp repository which means he has to fork it in order to contribute. The single most benefit of the forking is that all the changes have to be scrutinized and validated before being landed into the main repository. Mostly a good option for Jr/Sr. developers.

New User
New User

New User Permissions
New User Permissions

Forking the repository

Once rockstar logs in, he will see all projects assigned to him. He can now choose the project and click “fork” button on the right.

Fork a Repo
Fork a Repo

Post fork, you can see the url has been changed to `http://rockstar@172.18.11.178:1337/git/~rockstar/coolapp.git` that means a new forked repository has been created on the server for rockstar user.

Cloning the forked repository

We just have created fork of the coolapp for rockstar user but in order to work on the project, he has to clone it as coolapp-rockstar on his workstation. Run the following command in terminal:

Post Forking
Post Forking

$ git clone http://rockstar@172.18.11.178:1337/git/~rockstar/coolapp.git coolapp-rockstar
$ cd coolapp-rockstar
$ git remote -v
origin  http://rockstar@172.18.11.178:1337/git/~rockstar/coolapp.git (fetch)
origin  http://rockstar@172.18.11.178:1337/git/~rockstar/coolapp.git (push)

As you can see remote points to the forked repository on the server but there is no way to fetch updates from the main repository. So lets add and we’ll call it upstream. For that you have to go to repositories interface and select the main coolapp repository.

Clone Repo
Clone Repo

10-main-repo-rockstar

$ git remote add upstream http://rockstar@172.18.11.178:1337/git/coolapp.git
$ git remote -v
origin  http://rockstar@172.18.11.178:1337/git/~rockstar/coolapp.git (fetch)
origin  http://rockstar@172.18.11.178:1337/git/~rockstar/coolapp.git (push)
upstream        http://rockstar@172.18.11.178:1337/git/coolapp.git (fetch)
upstream        http://rockstar@172.18.11.178:1337/git/coolapp.git (push)

Now your local branch has been linked to the forked and the main repositories on the server. You can fetch and merge the updates from the main repository into your forked (local) repository using below commands.

$ git fetch upstream
$ git merge upstream/master

Its a best practice not to work on master branch directly, instead create a new branch for each task. This is how rockstar can contribute to coolapp:

$ git checkout -b feature1
$ git commit -m "rockstar calls it a day"
$ git push -u origin feature1

The last command is extremely important as he did not merge his changes into local master but has pushed the new branch on the server (into forked repository).

Rockstar Pushed
Rockstar Pushed

Sigh, Pull Request

Unfortunately, the github like pull request feature is not landed in Gitblit yet so meanwhile rockstar has to email the link of feature1 branch to the owner for code review and further validation. You can right click the highlighted feature1 branch and copy the URL to email.

If an admin/owner has any suggestions on the commit then he can revert on the email for the same and rockstar has to make necessary changes and update the branch. Provide -uf option to force push in case you amend the changes into the last commit.

$ git push -uf origin feature1

This way admin or owner can pull the feature1 branch and merge into the main repository for release.

Merging Pull Requests

Now admin/owner on the other hand have to pull the branch and merge it into the main repository if everything is okay. First thing you need to create a new branch (use the same name to avoid confusion) and pull the changes into it. In case rockstar’s feature1 branch is old than the main master branch then you can make it uptodate by rebasing so that his commit will appear on top.

$ git checkout -b feature1
$ git pull http://admin@172.18.11.178:1337/git/~rockstar/coolapp.git feature1
$ git rebase master
$ git checkout master
$ git merge feature1
$ git push origin master

Once rockstar’s commit is landed into the main repository, you can copy the URL of the commit and revert back on the same email thread to notify him about it.
Rockstar's commit lands

Cleaning up the branches

Rockstar can delete both local/remote branches feature1 as soon as he received the acknowledgement from admin/owner about the merge. He can pull the updates in master branch and then get rid of feature1 local/remote branch.

$ git checkout master
$ git fetch upstream
$ git merge upstream/master
$ git branch -D feature1
$ git push -u origin :feature1

Good Night!

Do not let your reading habit die with Google Reader! Introducing After Reader!!


After Reader – Do not let your reading habit die with Google Reader!

This chrome extension points the reader link (top black bar on all google products) to your choice of feed reader. You can either choose from some existing readers or add your own.

small
crop

I and many more people have been using Google Reader and love it since years but unfortunately, Google has decided to shut it down. Luckily, we have some of the good alternatives available that we can use. But again, we can not access that from Google’s black top bar. And hence my effort goes not to break that habit.

Even after Google removes the reader link on 1st July onward, this extension will keep the link there but point to your choice of feed reader. Enjoy!

Installation

Just install the extension from the Chrome Web Store.

Source code available on Github

https://github.com/codef0rmer/after-reader

AngularJS module for jQueryUI draggable and droppable


Last year, I played a lot with jQueryUI and mostly draggable/droppable along with AngularJS and it was a bit of a pain so I decided to write a directive for it which should make it easy for others to implement such functionalities.

Demos and much more

http://codef0rmer.github.com/angular-dragdrop/#/

Fork it on Github

https://github.com/codef0rmer/angular-dragdrop

and written test cases also 🙂
https://github.com/codef0rmer/angular-dragdrop/blob/master/test/index.html

Good Night!

55th Neat thing built with AngularJS


I’m extremely glad to announce today that an application I’d built over months in AngularJS has now been listed on builtwith.angularjs.org

What’s in a name?

y’know like all the funky names, I named it eShell. Oh, wait, its not another terminal emulator. Rather, its an eLearning player – a building block for eLearning courses to be run on created with authoring tools. FYI, An eLearning player is a building block for more conventional eLearning courses. Its pretty basic though I’d a different vision when I decided to write it. You can learn more about it here and here.

I’ve covered:

  • jQueryUi Drag & Drop
  • Form Validation in AngularJS
  • Ordering/Sorting images
  • jPlayer integration to play audios


Working Demo

Update:

I’d decided to rewrite the application from the scratch and also written the steps how I did it.

2012 in review


2012 was the year when I made my foray into Frontend Development and 
along the way I learned Advanced Javascript, sharpened my HTML5/CSS3
skills, contributed (minor) to about a dozen of O.S. projects, grew my blog 
views from 3,000 (in 2011) to 13,000 and also learned Backbone.js & 
Angular.js MVC frameworks. 

All in all it was a fantastic year and hoping to achieve a lot more 
in 2013.

Happy New Year to all my viewers!!!

The WordPress.com stats helper monkeys prepared a 2012 annual report for this blog.

Here’s an excerpt:

4,329 films were submitted to the 2012 Cannes Film Festival. This blog had 13,000 views in 2012. If each view were a film, this blog would power 3 Film Festivals

Click here to see the complete report.