I Am a C Programmer. Why I Love AngularJS?

The intended audience for this blog are not the people who have profound knowledge in HTML and Javascript. This is only for those who are in inertia to experiment with web development. Also, please be aware that this is not beginner’s tutorial for AngularJS.

I have this habit of trying some web related stuff rarely once in a year. Couple of years back on a fine morning started to play with jQuery and was impressed by its power. But at the end of the day thought there is so much to APIs to remember or at least be aware of. Then decided, it’s not going to work out for me and that was the last time I tried anything on the web.

Last week I had a chance to play with AngularJS and my immediate reaction was “WoW!!!”. After my first encounter with AngularJS I thought this is not going to be just one day affair and fell in love with AngularJS. During the course of this blog I’ll walk you through the features of AngularJS which impressed me.

Framework and library:

First of all, AngularJS is not library like jQuery, it is a framework. So there is no onus of remembering the APIs.

Empowering HTML:

HTML was born when the intention of web was only to display static content. As the name suggests that is only a markup language – nothing wrong, nobody to blame. The people who designed that had only scoped for that. But now, the web is not that simple. And being a C programmer I wished if there is anyway to add if condition, loop, block scope in HTML. AngularJS comes as a prosthetic limb for the handicapped HTML.

To display an element only when a condition is met (i.e.,) having a if construct. This is possible in AngularJS using ng-if or ng-show directive.

1
2
<input type="text" ng-model="customer.name" ng-if="customer.edit">
<span ng-bind="customer.name" ng-if="!customer.edit"></span>

If customer.edit is set true, customer.name will be displayed in text box, else will be displayed in span.

To iterate through a array of items and create a <ul> or <li> or even populate a <table>. ng-repeat directive does the job.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Amount</th>
            <th>ROI</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="customer in customers">
            <td ng-bind="customer.name"></td>
            <td ng-bind="customer.amount"></td>
            <td ng-bind="customer.roi"></td>
        </tr>
    </tbody>
</table>

To restrict the scope of variables and functions within a block, ng-controller can be used. Though the use of ng-controller is more than that.

1
2
3
4
5
6
7
8
9
10
11
<script>
    angular.module("bank", []).
    controller('BankController',
        function BankController($scope) {
            $scope.customers = [name:'kansamy', amount:'1000', roi:'9', edit:0}, {name:'munsamy', amount:'300', roi:'2', edit:0}];
            $scope.customer = {name:'', amount:'', roi:'', edit:0};
        });
<script>
<body ng-app="bank" ng-controller="BankController">
...
</body>

The scope of bank controller is throughout the <body>. This scope can be restricted to any <div> or any other element by setting ng-controller accordingly. $scope variable has a special meaning mapping to the scope of the controller.

There is much more talk to about AngularJS – what I have captured here is only the picture of love at first sight.

I have hosted a simple no use application exercising these features of AngularJS https://brilliant-fire-1717.firebaseapp.com/bank.html

No wonder, these features can one day become integral part of HTML.

Best Places to Learn Programming

Everyday, we hear news of acquisition of tech companies for million or billion dollars. It creates a lot of excitement among programmers and even non programmers. So everybody wanted to learn programming and even programmer from C, Java background wanted to learn iOS, Android app development. Big question: Should i need to go college to learn programming? Not anymore, we have lot of online companies offering courses to train you like Ninja. Following are few places where you can learn to code.

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. From my experience, it is one of best places to learn web and mobile application development. It costs $29 per month. But it worths it.

Codecademy

At Codecademy, you can learn to code in JavaScript, HTML and CSS, Python and Ruby. Codecademy is Free. It is one of the most famous website to teach you to code interactively,

Treehouse

Treehouse can prepare you for a developer gig, even if you’ve got no experience. A helpful iPad app also makes it easy to learn on the go. Treehouse courses are more project-oriented than language-oriented, so they are perfect for novice programmer with a planned purpose, such as building a website, or an application.

It has two pricing plan. 1. Basic($25) 2. Pro($49) per month

Udacity

Udacity aims to bring college courses online specially Computer courses. Udacity claims that online courses are rigorous and may even make you sweat. Tackling projects built by tech leaders like Google, AT&T, and Intuit, you’ll stretch yourself and learn new and relevant skills.

codehs

At this point all websites you read here are mainly dedicated to web development and computer science, but CodeHS is one with simple and fun game programming lessons that involve problem solving, JavaScript, animation, data structures, game design and puzzle challenges.

Coursera

Coursera aims to bring college courses online — but it’s specifically focused on making the “best” courses available. Here you’ll find a wealth of computer science courses from schools not participating in the OCW program.

khanacademy

One of best known learning platform Khan Academy offers variety of courses, not only computer science. It serves as an open playground for both novice and amateurs particularly interested in learning drawing, animation and user interaction with code.

Website Setup

I randomly came across this site. It is really wonderful. Website Setup is helping people to make their first web site in a simplest way as possible. The step by step guide will help you to create, set up and design your own personal website using WordPress, Joomla, Drupal and HTML5.

Be ready to code next Facebook.

Tips for Fasten Your Workflow in Terminal

Without a doubt and question, Terminal is home for all programmers. It always wonderful to have shortcuts to save our precious seconds. Here we will discuss about techniques to fasten your workflow. Place all bash function and aliases inside your .bash_profile or .bashrc.

Create and Change Directory

Generally, we create a folder and then cd to created directory. We can do it by

take ()
{
    mkdir -p $1 && cd $1
}

Type take foobar will create and change directory to foobar

Run static server

If you are a web developer, you wanted to view static files in browser. Run your static server by

server ()
{
    local port="${1:-8000}";
    open "http://localhost:${port}/";
    python -c 'import SimpleHTTPServer;
    map = SimpleHTTPServer.SimpleHTTPRequestHandler.extensions_map;
    map[""] = "text/plain";
    for key, value in map.items():
        map[key] = value + ";charset=UTF-8";
    SimpleHTTPServer.test();' "$port"
}

Type server insider any directory and visit http://localhost:8000/ in browser

Git aliases

If you are a git user, following aliases will save your time a lot.

alias gcl='git clone'
alias ga='git add .'
alias gall='git add -A'
alias gst='git status'
alias gc='git commit -v'
alias gco='git checkout'
alias gl='git pull'
alias gp='git push'
alias gpo='git push origin'

Run previous command

!! represents the previous command. Most of the time, we forgot to type sudo for some command.

sudo !!

Above will run the previous command with sudo. CAUTION: Your previous command MUST NOT BE rm -rf / :).

Go back to old directory

Sometimes we want to change directory to previous working directory which we changed from. And revert to previous working directory we can use same command. This is vary much useful cd command.

cd -

We know, there are lot of cool tips out there. Share with us what you got. Happy hacking.