Asp.net Template based emails with image embedding

on 13.01.2010, by Hemanshu Bhojak
There are many instances where I wanted to send emails from my web application. The emails are generated from templates which can be changed later to accommodate changes and also to separate the markup from the data. There is a good article on achieving this in a Asp.net. It also embeds images inside your markup so that the recipient does not need to have a live internet connection to view the email properly.


Give it a try.

Wrap long lines using CSS and JavaScript

on 11.01.2010, by Hemanshu Bhojak
I had this annoying problem of long unwrap-able lines breaking my website layout. After experimenting many fixes I finally settled on the following fix.

<script type="text/javascript">
$(function(){
$(".wrap").each(function(){
$(this).html( 
$(this)
.text()
.replace(/([^\s-]{5})/g, "$&&shy;") 
);
});
});
 </script>

The above code uses jQuery and Regular Expression to wrap text in tags which have the class "wrap" by adding &shy; after every 5 characters in a long word. For more information on &shy; refer the references section below.

References:

HTML Encode Text in JavaScript

on 27.11.2009, by Hemanshu Bhojak
There are many ways of HTML encoding text in JavaScript. You may use string replacement using RegEx or simply hardcode replacements. These approaches help solve the purpose but make the code bloated and difficult to maintain. There is one clean way of achieving this.

function HTMLEncode(value){
var div = document.createElement(“DIV”);
var textNode = document.createTextNode(value);

div.appendChild(textNode);

return div.innerHTML;
}

The above code will html encode your text in a cleaner and faster way.

Integrating google wave

on 19.11.2009, by Hemanshu Bhojak
Google wave is seemingly the next generation of online collaboration. If you are looking forward to integrating google wave in your applications the following resources are helpful. 


I am currently researching on ways to integrate google wave in one of my ASP.net application. I will be posting some tutorials when I have some tangible success.

P.S.: It uses XMPP to send messages.

HTML 5 Intellisense in Visual Studio 2008

on 19.11.2009, by Hemanshu Bhojak
HTML 5 is about to come in the near future and Microsoft has provided the intellisense and markup validation support for the same in Visual Studio 2008 and VIsual Web Developer. The following link provides the way for adding HTML 5 support in VIsual Studio 2008.


Check it out ;)

Iterators in C# - The yield return statement and deferred loading

on 13.11.2009, by Hemanshu Bhojak
Delayed loading or lazy loading or deferred loading is a very good technique to delay the loading of a set of data till the time we actually use it. It may happen sometimes that we actually don't use it and system is spared from the burden of loading that resource as it is loaded when actually used. There are many patterns which helps us in achieving deferred loading. LINQ also defers the loading or execution till the time it is actually used.

There is a very useful feature built in C# which helps in achieving deferred loading without using any complex design pattern. This is the magical "yield" operator (Iterators in C#). The usage of the yield operator is straight forward. 

MSDN,

  • An iterator is a section of code that returns an ordered sequence of values of the same type.

  • An iterator can be used as the body of a method, an operator, or a get accessor.

  • The iterator code uses the yield return statement to return each element in turn. yield break ends the iteration.

  • Multiple iterators can be implemented on a class. Each iterator must have a unique name just like any class member, and can be invoked by client code in a foreach statement as follows: foreach(int x in SampleClass.Iterator2){}.

  • The return type of an iterator must be IEnumerable, IEnumerator, IEnumerable(Of T), or IEnumerator(Of T).

  • Iterators are the basis for the deferred execution behavior in LINQ queries.


A sample usage is illustrated below.

public class SomeClass {
    public IEnumerable<int> YieldSomeNumbers(){
        for(int i=0; i<100; i++){
            yield return i;
        }
    }
}

public class MainClass{
    public static void Main(){
        IEnumerable<int> numbers = new SomeClass().YieldSomeNumbers();

        foreach(int number in numbers){
            Console.WriteLine(number);
        }
    }
}

As you notice the keyword yield is used before the return statement. Also no other return statement can be used when using yield. You can use yield break to break from the iterations.

Behind the scenes the compiler generates a class which implements the IEnumerable interface. On debugging we can observe that the method "YieldSomeNumbers" does not execute when we call it. It simple returns an instance of the class that the compiler generates. When we actually loop through the Enumerator the method is called once for each value. This is an efficient way of returning a set of values with the lazy load behavior.

References:

Separation of concerns in web applications

on 12.11.2009, by Hemanshu Bhojak
Separation of concerns is one of the design principle which helps in creating components that are not interdependent and are more maintainable. The same principle can also be applied to the Html that we generate in web applications. As per Wikipedia (Separation of Concerns)

"The goal is to design systems so that functions can be optimized independently of other functions, so that failure of one function does not cause other functions to fail, and in general to make it easier to understand, design and manage complex interdependent systems."

There are three concerns in a web application
  1. Content - This consists of the HTML markup
  2. Presentation - This is the CSS (Inline as well as external)
  3. Behavior - This is defined by the JavaScript

In order to have the separation of the above concerns, we should,

Avoid using inline CSS styling. Generate the markup with the appropriate tags, e.g. use h1 to h6 tags to specify a heading, use a fieldset tag to enclose a form, use a label tag for control labels. This also makes the page semantically correct. Specify all the styling in an external CSS file. This will also help in easily changing the look and feel of the application.

Wrong
<div style="font-size: 18px; font-weight: bold; color: Black; margin: 5px 0;">This is a top level heading</div>
<div style="font-size: 12px; font-weight: bold; color: Black; margin: 5px 0;">This is a sub heading</div>

Right
Markup
<h1>This is a top level heading</h1>
<h2>This is a sub heading</h2>

CSS
h1{font-size: 18px; font-weight: bold; color: Black; margin: 5px 0;}
h2{font-size: 12px; font-weight: bold; color: Black; margin: 5px 0;}

Likewise, Instead of specifying JavaScript inline in the tags, bind scripts dynamically to the HTML elements. JavaScript frameworks like jQuery are very useful in writing unobtrusive scripts.

Wrong
<input type="text" id="yourName" />
<a onclick="alert('Welcome!' + getElementById('yourName').value);">Click Me!</a>

Right
<input type="text" id="yourName" />
<a id="aClickMe">Click Me!</a>

<script type="text/javascript">
    $("#aClickMe").click(function(){
        alert("Welcome!" + $("#yourName").val());
    });
</script>
The points discussed above are some pointers in having a maintainable and loose coupled components in our web sites. The following are the general advantages in having loose coupled components in web or in that case any application.

  1. Easy to debug
  2. Customizable
  3. Reusable
  4. Easy to expand

In my future articles I will discuss some client side design patterns including patterns for AJAX and how can a JavaScript framework like jQuery be used with Asp.net to create interactive applications.  

My first post

on 08.11.2009, by Hemanshu Bhojak

Finally I have started with my own blog, where I can share my adventures in coding and also my spiritual quest. Writing is a form of expression with which I am most comfortable.

I have been a keen coder since my school days. I have worked on technologies like visual basic, java and now .net. The journey so far has been enriching. I see this platform as an opportunity where I can share the knowledge that I have accumulated. I am sure it will also help me in sharpening my knowledge further.

I am looking forward for your response to make the journey ahead a great learning experience.

P.S.: To all my friends who were regularly pinging my domain with a hope that I might have finally found sometime to setup this website. Sorry folks for the delay but I have finally setup my home in the second world. ;)