# Monday, February 16, 2009

Web developer or designers don’t only need to check their creations in Firefox but they mostly also love the browser for the simple fact that there are a ton of handy plugins available for that particular browser that makes their effort easier. The last half year I also discovered quite some interesting plugins so I thought it would be nice to share those.

Web developer toolbar. Adds a menu and a toolbar with various web developer tools.

webdevelopertoolbar

Firebug. Must have plugin which I already used a lot during my current project. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...

firebug

YSlow. Integrates into Firebug. YSlow analyzes web pages and tells you why they're slow based on Yahoo's rules for high performance web sites.

1185259966 

Firescope. FireScope is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. This is a nice tool that can help you out to search the html and css archive from the known site sitepoint.com.

1231217605 

Colorzilla. Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies...

943948800

Measureit. Draw out a ruler to get the pixel width and height of any elements on a webpage.

943948800 

jsview. All browsers include a "View Source" option, but none of them offer the ability to view the source code of external files. This tool makes it possible to show the external javascript and css files.

9439488001 

IE Tab. Switch to IE from within Firefox. Very handy to see how your page will be displayed in IE.

9439488002 

Greasemonkey. Allows you to customize the way a webpage displays using small bits of JavaScript.

9439488003 

Cacheviewer. This extenion is GUI Front-end of "about:cache". Allows searching and sorting memory and disk cache files.

1208074126

 

There are a myriad of other plugins and addons to be found for Firefox. These are the ones I used during the last half year. Especially Firebug and YSlow have become some of my favorite tools during web development. Firebug is the allround tool in which you can debug javascript, see the box model of an element, drill down, play with css settings like disabling or changing settings. I really recommend people checking it out. YSlow gives you a good indication where and what you can improve when performance becomes a concern to you.

Grz, Kris.

Monday, February 16, 2009 9:58:26 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [1]  | 
# Thursday, February 12, 2009

Aaaah, something to look forward to. The yearly Microsoft local techdays will be in Antwerp this year. Good for me as that city’s way nearer than all the other locations where they did it during the last year (Ghent & Louvain laneuve). If you should attend it I’ll be there too so just come over and say hi.

Take a look at the official site: http://www.microsoft.com/belux/techdays/about.aspx.

Grz, Kris.

Thursday, February 12, 2009 6:49:18 AM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Wednesday, February 11, 2009

A while ago someone from the testing came asking that a certain feature really didn’t look good in IE6. Since I’m on Vista with IE7 myself and didn’t want to go through the hassle of trying to install IE6 or start working with vpcs I decided to look around for something that could help me out. The tool I ended up with is IETester. It’s handy to use and free so I suggest you give it a try.

Btw, I was able to solve the problem quite quickly since I could now test on my own development machine and see the instant results.

Grz, Kris.

IE | Testing | Tools
Wednesday, February 11, 2009 3:08:03 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Saturday, February 07, 2009

During my years as a software engineer I encountered on several occasions during a presentation of mockups that the client thought it was the real deal already even if it only consists of something created with Visio. Try to explain afterwards, especially when you have slides on which you can click to get another slide that shows a follow up screen of something that’s expected, that this isn’t the real application, not even a demo.

Why is this? Because the screens are mostly already fully detailed with a certain look & feel or whatever the analyst cooked up. Though it may look cool during a presentation it actually creates some expectations. Mostly you don’t want this as it deprives creativity. Better is to sketch a mockup on paper and afterwards scan it and put it into the analysis document. A nice article that I enjoyed reading is how Microsoft dealt with this while creating the oxite sample program: Web Design from the Gut.

Personally I like to keep some printed papers around on my desk, especially prints that have been printed by mistake by someone or didn’t produce the wanted result but single side printed so I can still use the back, just for the purpose of sketching small things or to make small todo lists for things I’m working on (or not to forget when I’m busy doing something else).

Another program that can help you out is something that I recently got to know thanks to a colleague: Balsamiq. It’s written in flash and can host it on your desktop through AIR. Here’s a little video sample of what you can do with it:

balsamiq

Grz, Kris.

Saturday, February 07, 2009 2:42:51 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Friday, February 06, 2009

In 2006 I put on my blog a diagram about the ASP.NET Page Life Cycle which I found once on the internet, saved a copy of it but later on couldn’t find anywhere else.

It seems that Justin created a new diagram which you can download as a pdf document. Be sure to check it out.

Grz, Kris.

Friday, February 06, 2009 11:22:00 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [1]  | 
# Thursday, February 05, 2009

With all the web 2.0 buzz that started a couple of years ago javascript gets used more and more in modern websites and –applications. Most of the time everyone wants to plug in some cool flashy effect but forgets completely about performance or download size of all that goodness. Also correct placement of certain file types can make your application more performing. I recently found a very interesting article: Best Practices for Speeding Up Your Web Site.

Making css and javascript files external so that they can get cached by the browser is something known to a lot of (web)developers. However placing css as high as possible in the page and the scripts as low as possible is mostly something new. ASP.NET AJAX introduced the scriptmanager control in which one can add scriptreferences. Seen in the light of placing script files at the bottom one can also make benefit of the property LoadScriptsBeforeUI which got introduced with ASP.NET 3.5. It defaults to true, so the scripts will still render at the top. However I suggest that you don’t just switch it to false that lightly but carefully test everything before going to acceptance/production.

Other interesting articles are 10 ASP.NET Performance and Scalability Secrets and 10 Tips for Writing High-Performance Web Applications.

Grz, Kris.

Thursday, February 05, 2009 10:46:00 AM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [1]  | 
# Wednesday, February 04, 2009

Though external javascript and css files can be cached by a browser the initial download can still be quite large. For example the minified jQuery library compared with the uncompressed one, or even the visual studio documented one is considerable. A while ago, for my current project, I also faced the problem of lots of script files in the project either created by the team or provided by a design company. This however hurt performance so I took some time to dig into the matter and try out several compression tools. The best one I found so far is YUICompressor from Yahoo!. It’s written in java but that shouldn’t stop you from giving it a try. The nice thing about it is that one can provide arguments to the command line tool to get a different outcome like for example the switch --nomunge which tells the tool to only minify the javascript and not to obfuscate local symbols. According to Wikipedia obfuscation means:

Obfuscation is the concealment of meaning in communication, making communication confusing, intentionally ambiguous, and more difficult to interpret.

It also has a side effect benefit that mostly the file even becomes a little bit smaller.

Because as a .NET developer I mainly work with Visual Studio and I like to stay in that environment instead of going to a command prompt, typing in the commands to run the tool. Luckily Visual Studio provides the needed mechanism to automate this process without leaving the IDE itself.

In the menu select Tools > External Tools…
There you can add a new entry like in the image by clicking the Add button.

YUICompressor

I added the YUICompression entry. The command is the executable file, in this case java.exe which is needed to run the jar file. The arguments section is the most interesting one though as this provides us the way to tweak the arguments of the command line tool. Also note that I put the compression tool in my c:\ root directly.

The whole line reads as:

-jar C:\yuicompressor-2.4.2.jar $(ItemPath) -o $(ItemDir)$(ItemFileName).min$(ItemExt) –v

For the CSS file compression I added another entry but with this in the Arguments section:

-jar C:\yuicompressor-2.4.2.jar $(ItemPath) -o $(ItemPath) –v

The reason for this is because I like the javascript, when minified, get the filename that indicates that it was minified so I add the .min in between. The added benefit for this is that you can still keep the original .js file for changes, and then minify it again of course. I don’t do this for the css files as they don’t get obfuscated and it’s easy to reformat the document again with the default keyboard combination ctrl + k, ctrl + d (Menu > Edit > Advanced > Format document).

Now that we’ve got this into place it’s quite easy. In the Solution explorer you just select a .js or .css file and from the menu Tools > YUICompression you can let the tool do its magic.

Grz, Kris.

Wednesday, February 04, 2009 11:19:01 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, January 27, 2009

Just read the news on Scott Guthrie's blog that ASP.NET MVC RC got released today. That’s good news as this means that the final version will probably ship soon as well. Being a fan of jQuery since a couple of months, and already using it in production code, it’s great to see that it MVC ships with this great javascript library as well. Today still with version 1.2.6 but the 1.0 final release of MVC will have 1.3.1 included which is way more performing when you take a look at the graphs.

Grz, Kris.

Tuesday, January 27, 2009 11:45:44 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Friday, January 23, 2009

Today I got to hear that my grandfather passed away. He almost made it to the age of 92, a very respectable age, especially if you know that he still drove with his car up until he became 90. He has always been interested in technology and I really enjoyed our talks during the years I had the pleasure to know him. During the last months of his life my family and myself tried to spend as much time as possible with him, helping him out, trying to cheer him up during tough periods. I’s always painful to have to let go of someone you liked a lot and had a place in your personal education to become a decent person.

Grz, Kris.

Friday, January 23, 2009 4:19:00 AM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [2]  | 
# Thursday, October 30, 2008

Cool! In the past Microsoft already released similar posters but this time you can also Deepzoom to view it. Looks great.

Grz, Kris.

Thursday, October 30, 2008 2:40:00 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [1]  |