Prasanna Kumar Pattam: September 2014

Sunday, September 28, 2014

AngularJS Splash Page

As you know splash page is one you show when Angular is loading. If you have too many pages in your site or depend on several heavy weight javascript libraries you page may take a while for initial loading. In those scenarios a splash page would be a good way to engage the user. A typical splash page is show a loading image to the user while AngularJS is loading.

For typical single page applications developed in Angular we use views with routing. In these scenarios it is very easy to implement the splash page. All you need is to keep your splash page inside the ng-view. When Angular loads, it replaces the ng-view with the corresponding template. Here is the html (ASP.NET MVC) code implementing the splash page.

<head>

<title>AngularJS Styleguide</title>

@Styles.Render("~/Content/css")

</head>

<body>

Loading ...

</div>

@Scripts.Render("~/scripts/libraries")

@Scripts.Render("~/scripts/app")

</body>

</html>

In the above code, I am using ASP.NET to include the script files and css files.

In most scenarios we will be having more content than the just the ng-view directive. We will have the headers, menus etc. In those scenarios we need to hide these until Angular loads. For this Angular provides ng-cloak directive. This directive along with the css hides the content on the page till Angular loads. Here is the html with ng-cloak hiding the additional elements of the page and just showing the splash page.

<head>

<title>AngularJS Styleguide</title>

@Styles.Render("~/Content/css")

</head>

<body>

<h2>AngularJS Styleguide</h2>

<a href="/home">Home</a> <a href="/contact">Contact</a>

</div>

Loading ...

</div>

@Scripts.Render("~/scripts/libraries")

@Scripts.Render("~/scripts/app")

</body>

</html>

Using ng-cloak and ng-view we can show the splash page while Angular is loading.

Please go to my GitHub project for a style guide project using Visual studio
https://github.com/prasannapattam/ng-demos/tree/master/ng-demos/ng-styleguide

Top 5 Daily Habits

Our habits run our life. We all have hundreds of habits or routines which we perform daily without thinking. These habits include brushing teeth, checking emails etc. We can do wonders if we consciously add some habits to our daily list. In this blog I will mention the top 5 daily routing which I made a habit out of it. These routines helped me a lot to reach my goals.

Daily Health management – Health is wealth. Without proper health we cannot achieve everything we want. If we want to reach our goals or do bigger we need better health. Health should be our first priority. We need to keep or develop good health habits such as exercising daily, eating healthy foods and avoiding junk food. We all know about this but somehow gets skipped out of our routines. Why not make this a habit so that we will always follow this important habit.
Daily goal Setting – We all know how important goals are. These goals lead our life in the direction we want. All most all of us set goals at some point. But the problem is we tend to forget our goals. We need to continuously review it and adjust these goals. Lot of people review their goals yearly, quarterly or monthly. The more we remember about our goals the more close we are achieving them. Our subconscious do wonders if we constantly remember our goals. Our subconscious knowing our goals will make decisions (without our intent) which will put us in right direction. What is the best way to remember our goals? Review them daily. Every morning take a paper or computer and write down your top 10 goals. This hardly takes 5 minutes. Doing in the morning help you think and plan your day on how to achieve your goals
Daily Learning – The world is constantly changing and it is going at a rapid pace. It is very hard to keep up with it. Imagine how we can keep this rapid pace without knowing what’s happening in the field we belong or what’s happening around us. So we must make learning as a part of our daily routine. Every day we need to strive to learn something new. Plan for a routine where you will learn every day. For example while driving to work listen to the podcasts or audio books. Or spend some time every morning reading stuff in your area of expertise.
Daily Time management – Without proper time management we cannot accomplish all the tasks or goals we want. As you know there is a saying that “Only busy man can find the time”. As the busy man plans and executes his work properly, he can always find time for important tasks. So we all should strive to plan our work every day and execute them as planned. I use the Muhurtam time management technique for my daily planning. I split my tasks on an hourly basis and follow this technique. Sometimes I just follow this technique to get focus and work for a stretch of time uninterrupted. Further doing the time management keeps us motivated as it gives us the satisfaction of doing more in a day.
Daily Reflection – At the end of the day we need to reflect on how we completed our day and what we accomplished today. The best way is to maintain a journal and write down what I accomplished today towards my goals. This helps us to see where we spent most of our day and accordingly plan it for next day. Sometimes it is better to do the daily time management routine after the daily reflection routine.

Above are some of the daily routines or habits that help us to keep ourselves focused and go a track we laid out. These daily habits along with our good habits make us to reach or go beyond our goals.

Wednesday, September 24, 2014

Muhurtham Time Management for developers

As per Hindu clock, a Muhurtham means 48 minutes. Similar to hour clock, Hinduism uses Muhurtham clock. 24 hours in a day will transpose to 30 muhurthams in a day.

As you know, now-a-days agile is getting very popular and is being used in most software application development. One of the important techniques of this agile development is time boxing. This enables the team to focus on a set of tasks for a short duration without any distractions.

As a software developer you know how importance is flow. When our flow while coding is interrupted we need lot of time to come back to this flow. Because of this we tend to work late nights so that we can focus without interruptions. Wouldn’t it be good we can have our focus while coding and also don’t do the late nights. We can achieve this.

The scrum methodology teaches us to timebox tasks so that we can focus. Let’s extend the same for our coding. Let’s time box our coding time into smaller chunks so that we can focus. This timeboxing should not be too short and not to be too long. I feel that close to one hour should give us enough time to focus on a single task without any distraction.

Hindu Muhurtham (48 minutes) seemed to be an idle time boxing for a developer. This should provide enough time we can avoid or postpone distractions. After this Muhurtham we can take a break and perform all the items we postponed.

Here is a scenario where I use this Muhurtham time management. Let’s say I am working on a code module. First I carve out a small task out of this module which I can complete with in a muhurtham. Before the start of the muhurtham I will ensure that I will not be distracted by completing or planning all the possible distractions. During the muhurtham I will not check emails, try avoiding phone calls, avoid social sites etc. I will put full focus on the task at hand and get into the flow and be in that flow till the end of the muhurtham. Once I complete the muhurtham, I take a break during where I attend all the items, such as checking emails etc, I put off during the muhurtham. After that I embark on another muhurtham.

This time management improves our productivity by getting maximum out of the available time and reduces the need to work late hours. This also enables us to get into the flow. As the duration is short enough we will be motivated to stay focus in a particular muhurtam. In this technique we will be rewarded by a break after the muhurtham. Finally this Muhurtham time management is an extension of Pomodoro Technique which is a popular technique for time management.

Following the Muhurtham time management improved my productivity and believe it will help every developer to complete their tasks on time.

Monday, September 22, 2014

Typical AngularJS routing

Here is the typical routing I use for my AngularJS apps.

$routeProvider

.when("/app/customer/:customerid/:departmentid", {

templateUrl: "/app/customer/customer.html",

controller: "customer",

controllerAs: "vm",

caseInsensitiveMatch: true,

resolve: ['customerService', function (customerService) {

return customerService.resolve();

}]

})

As you see in addition to the regular routing attributes, I also used additional attributes such as controllerAs, resolve etc. Here is the step by step dissection of my routing configuration

.when("/app/customer/:customerid/:departmentid", {

As all of you know, with the above statement I am defining a routing which takes customerid and departmentid as query parameters

templateUrl: "/app/customer/customer.html",

controller: "customer",

With these above two statements I am defining the templateUrl and controller for my routing.

controllerAs: "vm",

I like the controllerAs feature. It eliminates the need of using $scope in my code and make my code clean.

caseInsensitiveMatch: true,

As the name suggests, Angular performs a case insensitive matching while looking at the url for routing. This is important if are using a combination of server (like asp.net) and client routing

resolve: ['customerService', function (customerService) {

return customerService.resolve();

}]

This is one of the important features of my routing. I don’t want to burden my compiler with fetching the data from server and activities other than rendering. As these are model or domain specific, I create a service for each controller to handle these activities. As you know in most scenarios you need to fetch data from the server before rendering the page, “resolve” is designed for that activity. Until resolve returns (fetches the data or any other activity) Angular waits and will not render the page. Resolve option also helps avoiding the FOUC. Please see my blog on this for further details

As you see with my routing configuration, I am able to handle the preprocessing and also reduce the dependency of global $scope variable.

Tuesday, September 2, 2014

Book review of Kendo UI Cookbook

Last week I did a review of the Kendo UI Cookbook and here are my review comments:

Url: https://www.packtpub.com/web-development/kendo-ui-cookbook

Rating: 4 / 5

Review comments:

If you go over to the Kendo UI site, you can see their awesome demos. But if you want to implement those controls in your project, then there is little help on the Kendo site. They just dump the code with no explanation and you need to be an expert to understand their documentation. There is a huge gap on the Kendo site. This book nicely address that gap. Actually you get more benefit if you use this book in tandem with KendoUI.com. In addition this book goes beyond the typical demos on the Kendo site and provides much more information. It alerts the common gotchas and goes in depth. I believe that the goal of this book is to provide easy to use recipes for complex controls. If this is correct then it did a good justification.

The good:

This book provides wealthy of details for each receipe with its "How to do it" and "How it works" sections
This book even goes one step ahead and provides advance use of the controls with the "There's more" section. Some of these tips are not found on the Kendo site
This book is a must read if you are building mobile web applications.

Nice to Have:

I would have liked this book more if they used the same demos as on the Kendo site. This helps reader to get a feel of the controls while reading the recipes.
As AngularJS is gaining popularity, this book should have provide some recipes using Kendo's angular directives

The bad:

In my opinion this book fell short of covering the most widely used KendoUI form controls such as DatePickers, textboxes etc.
This book starts with the complex framework chapter which may scare beginners. If you a beginner, just skip the first chapter
Sometimes I feel that this book is not properly organized. It does not provide me a story. I believe this is due to the book's goal to cover the complex controls

Bottom line:

If you are a UI developer or designer who wants to build web sites with awesome Kendo controls then this book is for you.
If you are a backend developer and looking to use Kendo form controls then look elsewhere.