Seree Woradechjamroen » web development

In research of a javascript library to be used with ASP.NET on my next project…

Seree — Thu, 16 Oct 2008 06:26:49 +0000

Hi fellow readers,

Today I come to share with you how I choose a javascript library to be used on my new project.

I’m not talk about choosing just an AJAX library but I want some ‘full’ set of library which including both AJAX core and user interface core.

Here are my choices before consideration…

jQuery
YUI (Yahoo User Interface)
ExtJs

Sorry that I didn’t included other libraries because I’m not impressed with any other at all.

First, jQuery, this is by far the best AJAX + effect library for me personally. I really love it because it produces a ‘short’ script. Especially when compared to YUI.

However, what jQuery lack of is UI components. You have to find out 3rd party for yourself.

So, I decide to move on YUI which currently have a bunch of UI components included.

What I can say about YUI is I really impressed with it. It has a BUNCH of UI included in the library which you can select to use or bypass.

However, most of the script produced by YUI is so ‘long’ when compared to jQuery.

So, now, I hold on both YUI and jQuery and finding for a better library in the market.

I finally found ExtJs.

Try yourself and let me know how you feel about it.

I feel the ‘MOST’ impress with ExtJs.

Cool UI and effect and I decided to use it in combination with jQuery.

This will help me reduce much time to develop my project.

Technical details will be continued in the next part while I’m developing my project.

Talk soon,

Seree W.

Why you need validation in your web application?

Seree — Tue, 18 Mar 2008 08:08:14 +0000

Hi folks,

Did you ever use ASP.NET validation controls?

If you never heard or never use it before, see on the toolbox at the “validation” group.

Those are all validation controls.

- RequiredFieldValidator

- RangeValidator

- CompareValidator

- RegularExpressionValidator

- CustomValidator

- ValidationSummary

The main point of this control group is to be used to validate the input form entered by user before doing any postback.

But why?

As we can implement validation easily in code-behind.

Right?

It had to say Yes and No.

Yes, because validation coding in server-side (code-behind) is easier to code.

No, because while you know at the client that the data is invalid. Why you will let user postback to server?

Waste of bandwidth.

Totally waste!

This is the main reason why you have to use validation controls in your web forms.

Because it’ll help to reduce the unnecessary roundtrip between client and web server.

This will not affect much on the application that consumes less resource.

But it will be a big pain on the application that consumes much resource.

So, when you are dealing with input form.

Always use validation controls!

I know it will help you much.

Why my .style.left doesn”t work with FireFox?

Seree — Tue, 13 Nov 2007 07:50:20 +0000

This is a simple & stupid knowledge that I taken about 2 days to solve it.

I have a project that have to use this code….

var con = document.getElementById(“menu”);

con.style.left = “10″;

con.style.top = “20″;

When I run this code in Internet Explorer 6, 7.

I got it working like I want!

But when I try with Mozilla FireFox.

It never works!

Man! I hate DOM, if I have enough money. I’ll buy Microsoft and stop Internet Explorer project to reduce browser compatibility issues.

I try to use FireBug to change the css real-time, it does work very well.

The key point of this issue is that YOU MUST APPEND the property with UNIT!

I changed the code to…

con.style.left = “10px”;

con.style.top = “20px”;

And now it works!

Gotcha!

Simple & Stupid, right?

Use JavaScript to change “float” style

Seree — Thu, 08 Nov 2007 07:47:59 +0000

Hey friends,

In a few days ago, I’ve just stuck with how to change “float” style in JavaScript and very confuse why it doesn’t work at all!

I’m using …

var obj = document.getElementById(“some1”);

obj.style.float = “left”;

No luck at all. I tried both on Internet Explorer and Firefox. Even I use Internet Explorer Toolbar and Firebug. I can change the style via that tools but no luck with JavaScript.

Silly?

I’m fool with DOM. I try to find a solution and suddenly found that.

In DOM, there are no “float” property but “cssFloat”.

Just change my code to …

var obj = document.getElementById(“some1”);

obj.style.cssFloat = “left”;

Really silly huh?

How do you do when dealing with cross-browser web development?

Seree — Sun, 04 Nov 2007 23:46:19 +0000

Hi friends,

I just want to know that how do you do when you’re dealing with cross-browser web development.

Which tools you are using?

How do you handle those all buggies browser?

What experiences you faced?

As I’m dealing with cross-browser web development project where I generally strict with XHTML 1.0 standard. (As I’m using Microsoft Visual Studio 2005 and there is built-in XHTML 1.0 validator. Also, it has a built-in CSS validator too.)

I generally focus to most popular browsers including Internet Explorer 6.x, 7.x and Mozilla Firefox 2.x.

Below is my experiences and how I handle the project after I failed one. Yes, I failed one! Don’t get wrong like me! It waste your valuable time.

Internet Explorer 7.x, I love this one as it’s easiest to work with while I’m using Visual Studio 2005. For me, it’s not that hard to make Internet Explorer 7.x render HTML as I want.

Next, Firefox is ok but need some care to make it render HTML as you want.

Last, Internet Explorer 6.x is sucks for me as it made me headache over a few nights to get pass its rendering issues. Did you believe that if your pages crash. It might cause you’re using some standard CSS the wrong way (IE6 wrong way) such as float:left; Yes, it can crash most of IE6. Just try to googling for “IE6 float:left crash” and you gonna see the weird thing.

So, If you gonna begin on cross-browser web development. I suggests to go this way…

1. Open up your Visual Studio 2005, for your all pages (.aspx, .html). Set the HTML validator to “XHTML 1.0 Transitional”. This will let Visual Studio 2005 warn you when you not follow the XHTML 1.0 standard. Which is a good way to go. (Don’t go with later version of XHTML as It seems IE6 didn’t fully support it)

2. When working with CSS files. Set your CSS validator to “Internet Explorer 6.0″ or “CSS 1.0″. Don’t go later version for safety. Believe me, less version = less pain.

3. Using your targeted browsers to test your page layout in step-by-step. Do it strictly or you will entering the impossible to solve state after your hard work. I’m using IE7 as the main one. Then using Firefox in the same machine. For IE6, I go with Virtual PC. Yes, I’m working like this actually!

If you follow these 3 steps strictly. You will never get wrong with cross-browser issue like me. When I got this pain, I’ve to waste my time to re-architecture all pages layout.

More tips…

- If you’re using “float:left;” just follow with “display:inline;” to avoid the silly bug of IE6.

- If you’re in design state. Don’t go with table layout. Force yourself to go with table-less layout. Yes, I means using

instead of . Googling “tableless layout css” for more information. Strictly follow this! or you gonna hate IE later. Forget all about

, it’s history now.

Conclusions

I’m very appreciated to receive all comments. Maybe your experiences or tips or …

Thanks you

Best tools when you are dealing with advanced web development

Seree — Tue, 30 Oct 2007 07:44:38 +0000

Hi friends,

Are you facing with the hell experiences when dealing with advanced web development?

First of all, We gonna clarify about what did I means for “advanced web development”.

For the sentence, I means that your web project are mostly dealing with client technologies. Such as those JavaScript, CSS, DOM, Ajax or even cross-browser compatibility issue. Those all are hard to track bugs and solve it.

After my bad experiences regards on this issue, I actually found that there are many useful tools that will help you much reduce the time to deal with them. Best lucks, most of all are FREE! Yes, right! It’s FREE! Don’t get me wrong.

Let’s see what I gonna suggests you to grab and use it on all of your web development project.

Internet Explorer Developer Toolbar

This tool will let you track all HTML element in your desired web page. Best of all, you can modify any CSS in real-time. Just as easy as you change CSS, the page get changed immediately. This tool is an add-on for Microsoft Internet Explorer 6.x, 7.x.

Let’s say it’s nearly a FireBug clone for Internet Explorer.

You can grab it here.

Fiddler

Don’t tell me you never heard about it! This tool will tell you how browser gonna load for your page. How many resources loaded? How about page’s size including their size. For my experiences, this is a cool tool but sometime it affect my IE to working in low stability.

You can grab it here.

For me. With these 2 tools, I can make my life much easier when doing general web development. But it’s not the same case if it’s an advanced web development!

Now I’ll face with cross-browser compatibility issue. Yes, if my web has a complex interface. They might not display the same in Internet Explorer or FireFox or even Safari.

So now, we gonna find some tools to deal with FireFox. (Sorry but I don’t mention to Safari)

FireBug

Ooh, If you play with FireFox long time enough. You should heard about FireBug. It just the same as Internet Explorer Developer Toolbar. But it’s definitely better by far.

Just grab it here and try out yourself.

Conclusion

There are many more tools available for your advanced web development today. But I select a few tools as to reduce your brain-conflict by too many tools. Believe me that you can stick with these tools and produce a high quality web site.

Bye

7 Tips made rendering HTML faster (Do it lately!)

Seree — Tue, 02 Oct 2007 16:57:26 +0000

Any serious web developers should experience a too long rendering time for his/her web pages. Here is the list that I usually do it before release my web application to production stage. I call it my “Optimization check-list”. Please note that, some of tip should be used on ASP.NET specifically and any other may not.

Please keep in mind that, these tips can be effectively used after you’ve completed develop your web application too. As it doesn’t required much effort to re-design or re-programming. I’ll release another tips series that can be done before development begin too as It’s very effective than these tips.

Let’s roll out your hand now.

Tip 1 : Turn off debugging (Very effective)

This tip is for ASP.NET only, just go to your web.config and finding then change debug=”false”

This will increase your web application performance dramatically!

What’s behind the scene?

When you change debug flag to false. All web resources (WebResource.axd?xyz) will be cached by browser while not when debug flag is true. Also, any script related with ASP.NET will be decreased in size. The output assembly will reduce on size too.

Don’t thinks much, when you go to production stage. Just turn it off!

Tip 2 : Turn off un-necessary ViewStates (Very effective)

This be able to do with ASP.NET only and will dramatically decrease your output HTML size! and you can do it just like turn off debug flag at the above.

Find out your ASP.NET standard control tags and check to see whether its state needed to be kept on every page lifecycle? If not, change the attribute “EnableViewState” to “false”. Do it all for every ASP.NET controls in your pages.

What’s behind the scene?

ViewState was used to keep the state on every page lifecycle. They implement by adding some characters into your output HTML. You can see it by view source at the browser and finding for ViewState keyword. You then see the unreadable characters in the output HTML. There is where the control’s state be kept. This tip can reduce much size on the output HTML!

Tip 3 : Re-organize objects in the page

Re-organize, I means revise the order of objects in your pages. Move your unnecessary objects (objects in my meaning is everything that reside on HTML including HTML tags, script, CSS, …) to the bottom of the page. Such as move your big script into the bottom of the page. This will let browser render the layout first then load big scripts later. In some case, very effective!. In one of my project, I can use this method to reduce around 12-15 seconds by re-organize objects in the page.

Tip 4 : Wrap up your inline/external script into a big external file

This means if you have write your javascript inline in the page. You may consider to wrap it up into one single external file. (assume myscripts.js)

Also, If you have many external files. (many .js) You may consider to combine all of them in to one big file instead of.

What’s behind the scene?

Browser can cache the external script file. (.js) and combine them into one single file will benefits on reducing the number of roundtrip when browser need to do cache validation.

Tip 5 : Change your HTML formatting style into CSS style

Throw away the old HTML formatting style such as ,, etc…

Replace with CSS formatting style that use class based. Define the formatting class then apply it to any tag you want.

eg.

.hilight
{
font-family:tahoma;
font-size:small;
color:white;
}

When any tags want to use this format, just apply to it.

eg.

…

Then combine your all classes into one big CSS file. (.css) This will gain the benefits like what Tip 6 did. Browser will cache it and reduce the number of roundtrip when browser do some cache validation.

Tip 6 : Use progressive rendering on your

If your targeted browser is Mozilla FireFox, just skip this tip as FireFox will do it naturally. But for Internet Explorer? No luck today. We’ve to do it ourselves to let Internet Explorer do progressive rendering. Before we go,

What’s progressive rendering?

In nature, when Internet Explorer found

tag that generally be used to arrange the page’s layout. Internet Explorer will need to …

- Determine the table’s size by determine every cell’s size first

- Rendering entire table

This means, when Internet Explorer can’t determine the cell’s size then it will slow on rendering. Such as the case that you have a complex content in some cells that can’t be determine the content’s size. So, Internet Explorer should wait until all content be loaded and it’ll be able to determine the cell’s size now then it will render table later.

So, this will generate a very slow rendering for Internet Explorer when it found many complex content within the table.

Now, we should known the key that made Internet Explorer so slow rendering on table. Because it needs to know every cell’s size first!

So, what will happen if we can fix the size of cell?

Absolutely, it’ll render much faster and this is what we call “Progressive Rendering”. So now, how can I do it?

Here are the steps…

1. Apply CSS attribute called “table-layout:fixed” to

2. Enter the

’s width in style-sheet.

Here is what we’ll get…

…

3. Enter each column’s width by using

tag and style-sheet class.

For style-sheet,

.col1 {width: 31px;}
.col2 {width: 118px;}
.col3 {width: 109px;}
.col4 {width: 140px;}
.col5 {width: 376px;}
.col6 {width: 9px;}
.col7 {width: 200px;}
.col8 {width: 17px;}
.col9 {width: 1px;}

For

tag,

…
…

4. That’s all!

Tip 7 : Don’t slice your image too many!

Wow, go to the previous time. Web developer try to do their page to response faster by slicing a large image into many small images and use table to lay it out. It’s good for the pass, but in my opinion. It’s bad for now if you slice the images too much.

Why?

You may know that the browser such as Internet Explorer has a main thread to load for main page and 2 children threads to load related resources from the main page. So, what will happen If you have too much resources in the page? Even all of the resources are small. It loads very fast, but how about the roundtrip occurred? I seen many cases that too many small files will be loaded much slower than a few medium files.

So, just try and prove yourself that too many resource files can be pain to your page than a less but larger in size.

Conclusion

In the next time, I’ll write the optimization check-list that you can do it in design stage and can gain much benefits than these methods. I’ll include how-to do things like what PageFlake, NetVibes did. Highly interactive with fast response time. Ajax!

Great 3rd party Ajax control suite

Seree — Fri, 22 Jun 2007 06:47:10 +0000

Have you ever tried Ajaxify your ASP.NET application? Have you tried and tired?

I’m one of those guys who already tried and tired on ajaxify the application to fully working in Ajax basis. Until the day I found one of a great Ajax control suite named Telerik RadControls for ASP.NET. It was combined by various ASP.NET UI controls. Most of the controls, I can say nearly 100% already ajaxified for your instant using without deep knowledge on Javascript writing.

I found that my productivity was much increased by this suite and their support are great as I never seen this support anywhere even the more famous controls suite like Infragistics NetAdvantage, ComponentArt, ComponentOne or any other else. You can get quick response back within 24 hours with many samples on your desired case. So, for me It doesn’t a hard decision to afford it for 1 year subscription. After I’ve purchased, I found the bonus are very impressive as Telerik give us many interesting things than I thought. In my case, I purchase Telerik RadControls for ASP.NET with subscription for 1 year. I got Telerik RadControls for WinForms too. After purchase date around three months, Telerik releases new version of Telerik RadControls for WinForms with WPF. (Windows Presentation Foundation) and they give me too! What’s a kindly guy! In next six months, I found that the product was continuously updated around 4 times with many new features. Again, when they release their Telerik Reporting product. I also got it from current subscription and I thinks this reporting product are compact, fast and very easy on deployment. (I kicked out Crystal Reports, Microsoft Reporting Services and even DevExpress’ one – Every products I listed here are required to install some special executables into web server but Telerik’s just use XCOPY method)

If you are finding for a great Ajax controls suite. I can say that you will got the point when working with Telerik’s suite. Very very impressive!