Posts

First Look at AngularJS 2.0

Image
AngularJS 2.0 developer preview has been released! This blog post is to experience the new features in the framework with a simple angular2 application. Heads Up : AngularJS 2.0 is written in TypeScript. TypeScript is a super-set of ES6 which is a super-set of ES5 which is currently the browsers fully supported version of JavaScript.  So when writing angular2 components, we can use choose among TypeScript, ES6, ES5 or Dart if you will. For this blog post I use TypeScript. Please refer  5 Min Quick Start Guide  to setup angular2 development environment. Once you have setup the environment and followed the guide, you will be able to see a similar result as follows. Now let's add few more features to this. We will create a shopping list where a user can view the list, add a new item or remove a item from the list. So to begin, let's create the listItems array. Change the app.ts file as follows. Let's create the list.html file which is the view for this c

PDF direct download with jQuery

Hi guys, There was a requirement in my project that needs to download a pdf out of html content. After some research we found that princeXML would be a good candidate for html to pdf conversion process as it provides a good api for pdf designing as we want.(Although we had to purchase a license). This blog post isn't about the princeXML but the front-end and back-end implementation of pdf direct download. Challenges The HTML content that we wanted to covert to a pdf was quite big. Due to various browser limitations on GET request's length, we couldn't just use  a simple GET request. Even though we have set up the correct response headers for our POST request browser seems to have not downloading the content as a pdf. (Ajax is not suitable). So the options we had were, either to use a hidden iframe submission or build a dynamic form and submit it on the fly. We chose form submission method  as it's the best option. Step 01 This is the client side JavaS

Real-time web with Node.js & Socket.io

Image
If you are a .net developer, you may be familiar with ASP.net SignalR for real-time web development. It's one of the coolest libraries for ASP.net that allows bi-directional communication between a server and a client. For more details refer  http://www.asp.net/signalr .  This blog post is an intro to use Node.js and Socket.io to achieve real-time web communication with pure JavaScript using a simple chat program example. Socket.io is a library that makes our lives easy to work with web sockets. Of course, in the Javascript world, there are hundred other libraries available to implement web sockets,  examples .  But i like the simplicity of Socket.io.  Step 01 : Setting up Node.js Depending on the operating system you are using, download Node.js from the official site  here . Installation process of both Windows and OSX is pretty much the same. Double click the setup file and follow the straightforward instruction. For Linux, either you can do

Parallel Computing with MPICH2

Image
MPI is a library of routines that can be used to create parallel programs in C or Fortran77.   MPI is designed to allow users to create programs that can run efficiently on most parallel architectures. MPI can also support distributed program execution on heterogeneous hardware. Such that we can start processes in multiple computer systems to work on the same problem. In this report, we will explain the power of parallel programming using a simple program that utilizes MPI. About this program  This program calculates sum and mean of random numbers between 0 and 1. It generates 1000 random numbers in each process and computes the sum and the mean at each process. Then it integrates the sums and means across the processes and calculates the overall sum and overall mean. This result is output to the user.   The parallel program executes on several different machines. Here we have used several virtual machines. Software Used   MPICH2 MPICH is a freely available,

Dependency Injection in ASP.NET MVC 5 with StructureMap

Dependency Injection(DI) is a design pattern that let you write loosely coupled testable code. Typically your classes depend on other classes. Take a look at the following example. The above example shows the " HomeController " of an asp.net mvc application. Within the index method, you can see that it requires to create an instance of " Student " class to get the full name of a student. It is very clear that the Index method is tightly coupled with the Student class.  This is a disadvantage when it comes to testing HomeController . Suppose that you have other methods, with similar types of class dependencies. So, each time when you test the code, you have to pass an actual instance Student class. This is tedious. You don't have the luxury of passing a fake student class to easily test your controllers.  So how do we decouple the Student class from HomeController? This is where DI comes in handy. You can inject dependencies in several ways. Today i will sho

Bootstrap Code Samples

Image
Twitter Bootstrap makes life easy. If you are not much into designing layouts from pure CSS, twitter-bootstrap is ideal for you. Following shows some code samples that you might often need. Setting up bootstrap is trivial. Setting-Up - Download Bootstrap from  http://getbootstrap.com/ - Unzip the folder. You may find following folders in it. - Include these three folders in your Project folder. - Add link to your index.html to bootstrap.css within in <head> tag as follows <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> - Add bootstrap script tags just above the </body> tag. Make sure you have jquery.js file <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> - That's it. To check if you have properly setup bootstrap, Write this line of code within the body section

Laravel-4 Routes Not Working? Here is the solution

It's frustrating when your routes aren't working as expected and returns 404 error instead. It was really irritating and wasted couple of my precious hours. After a while i came up with the solution. The error comes up because the .htaccess file is lack of permission.  Follow these steps to get it right.  Step - 01 If you are using wamp/xampp open  "httpd.conf" file. Search for " LoadModule rewrite_module modules/mod_rewrite.so". Remove the '# 'in front of it and enable it by uncommenting.     Step - 02 Again search for " <Directory /> " in httpd.conf file. Change " AllowOverride None"  to " AllowOverride All" under Directory tag. Save Changes.  Step - 03 Restart Apache Server.  The default .htaccess file that Laravel provides in the public folder specified some mod_rewrite rules. These rules were not getting applied because AllowOverride was set to none. Be sure and restart