Ralph Varjabedian

It's been a while...

Ralph Varjabedian — Tue, 13 Jan 2009 11:01:40 GMT

Hello everybody,

It's been a while since I posted here, mainly because my hardisk crashed on me on the 31st of December it could not make it till the coming year. After the crash and a new hardisk, I decided to upgrade to Windows XP, I had vista before and Life is Great again :) I had some trouble finding the drivers, but eventually I found everything I need... Some simple differences to note, VS2008 took around one hour to install on XP. SP1 of VS2008 took less than 30 minutes to install, I remember I had to wait hours to finish installing SP1 when I had Vista... Makes you wonder what is it doing?! Mind you that when I had Vista, all the graphics effects were stripped down to gain maximum performance, most unnecessary services were stopped but still it was extremely slow compared to XP. Hopefully Windows 7 will be much better. Within the near future I will be giving a presentation at Microsoft offices in Lebanon on speeding up your WebApplications. I will keep you posted.

Increase the performance of your website, manage script dependencies in ease, (Revisiting sss.aspx)

Ralph Varjabedian — Sun, 07 Dec 2008 11:50:50 GMT

I have updated sss.aspx to include a couple of more features and here is what it can do for you now.

The most important benefit is it allows you to combine several script files (CSS or js) into one file to return to your client, this helps increase performance of your website by minimizing the http requests the page requires.
The returning stream tries to use GZip compression if supported by the client browser. This further increases load speeds of your site.
You can specify default script files to include always.
Proper cashing headers and proper generation of 302 response codes (not modified) to minimize the transfer of scripts to the client browser. Script files are sent back to the client browser only if they have been modified. Two headers are processed to achieve this, "If-Modified-Since, Last-modified" and "If-None-Match, ETag".
The ability to process your script files on the server to modify them before you send them back to the client (server side scripts), for example, your css files could have two colors replaced by variables [[COLOR1]], [[COLOR2]] and these variables could be replaced with the actual colors that you want to send to the client browser when requested. Using this you could achieve things like custom css files per client account (custom colors for each client account), or it could be used to specify different strings (inside JavaScript files) depending on the current language set.
Last, but not least, a feature I am enthusiastic about. You can put special comments in your css, js files to indicate file dependencies. If for example you have two javascript files common.js and popups.js. If popups.js depends on common.js then you write a special comment in the beginning of the popups.js file to indicate that common.js is needed. sss.aspx properly parses this "dependency tree" and combines the files properly, in the proper order and serves them back to the client browser. If you have a lot of javascript files, you know you have the headache of specifying them in the correct order in the html/aspx files. If you "describe" your dependencies correctly in all your files by including these special comments, then you will not have to worry about this anymore, when you specify a javascript file that you need, the scripts it depends on are automatically added.

To use sss.aspx, it is very simple.

1. add the file sss.aspx it to your site (no need to recompile).

2. instead of including your script files like this:
<script language="javascript1.2" src="common.js" type="text/javascript"></script>
<script language="javascript1.2" src="sample.js" type="text/javascript"></script>
<script language="javascript1.2" src="engine.js" type="text/javascript"></script>

Add this now.

<script language="javascript1.2" src="sss.aspx?sample.js,engine.js" type="text/javascript"></script>

Note how the file common.js was omitted from the list, this is because the files sample.js and engine.js start with the comment:
/* <sss include="common.js"/> */

This comment will make sss.aspx combine the file common.js with sample.js and engine.js in the proper order and serve them back as one file.

If you have any comments, please let me hear about them. I tried to be straight to the point in this post, if some things are not clear enough, let me know and I will gladly explain more. You can use fiddler2 (http proxy debugger) to check the results of using sss.aspx.

Another important tip for increasing your site's load speeds is to enable "Content Expiration" in IIS.

Download the latest sss.aspx file here

Printer Friendly Pages in 5 minutes

Ralph Varjabedian — Fri, 14 Nov 2008 15:00:41 GMT

I answered a post the other day about an easy way to have printer friendly look of pages in your web application and I decided to blog it here. You just need 5 minutes to have all your pages in your web application printer ready, ok maybe a bit more, like 10 minutes :)

When you design your web application, have your pages implement a master page, let us call it MainMaster.Master. Create another master page, call it PrinterFriendlyMaster.Master and make sure it has the same content holders as your MainMaster.Master, however make it printer friendly, without a header, maybe simpler footer, no background color, maybe different CSS files, etc... anything you need to do to have it ready for printers. Create a base class for all your pages, let us call it BasePage, it is a simple class like this:

using System;
using System.Web;

namespace telephone.NOC
{
    public class BasePage : System.Web.UI.Page
    {
        protected void Page_PreInit(object sender, EventArgs e)
        {
            if (Request["print"] != null)
                Page.MasterPageFile = "~/PrinterFriendlyPage.master";
        }
    }
}

Have all your pages derive from BasePage class.

Now at runtime, when you add a query string to a URL with print=1 the Page_PreInit of BasePage will detect that and will switch the master page dynamically to the printer friendly one, simple, modular and fast to implement.

An expandable JavaScript popups engine

Ralph Varjabedian — Mon, 27 Oct 2008 12:25:37 GMT

Hello everybody, its been a while I haven't posted anything, I've been very busy :) But I promise you today's post will be good, or at least I hope so. Read on...

Every website needs to show alerts, popups, layers, whatever you want to call them. New Web 2.0 websites need this more as they show information with popups about the asynchronous actions the end user does. Take a look at Google Reader for example, my favorite RSS reader, when you do things like scroll down, you see a small popup (or a layer if you want) that is a simple div with a different background color that shows on the top of the page centered, displaying things like "Loading..." etc.

What I will present to you in this post is an engine for displaying such popups in a snap. Adding the engine to your site is very simple, you just have to include some JavaScript files in your pages. Please check my earlier post on Server side JavaScript because it contains a small engine that allows you to serve JavaScript files to the client browser in a more efficient manner. Let me start with a simple syntax of adding a simple popup to your site, it is as easy as this:

CommonPopupsEngine.GetHtmlPopup(0, "<div class='popup'>Loading...</div>").
   Center(CommonPopupsEngine.CenterHorizontal).
   ShowDialog();

This will show a div in the middle of the page (horizontal) saying "Loading...". The CSS class popup will customize it's color, background color and so on.

The first parameter is the channel, I will defer the explanation of this till later, for now set it always to zero. The next parameter is the actual html text of the popup you want to add, in this case it is a simple div with a CSS class. The function GetHtmlPopup at this point returns an object that is called "PopupCollection". The "PopupCollection" object is considered as one popup, visually speaking, however the name is set to collection because each visual popup you show, could be created from several html elements and not just one, for example if you want to add a shadow to your popup, then the popup will have your html code that was specified with the function call and another html element behind your element that is casting the shadow, together they form the visual popup that you see.

The PopupCollection object has several functions defined on it including ShowDialog() which will show the PopupCollection once called. The PopupCollection functions use the chaining method, which means each function returns "this" at the end of it to enable chaining the functions one after the other, this technique makes it easy to customize the PopupCollection in an easy memorable/expandable way without having to shove everything as parameters on one function.

The engine also offers you Grayouts to popups. Grayouts are when the whole page fades before showing the popup. Adding a grayout is as easy as calling AddGrayout() on your PopupCollection object, similarly for adding a shadow, you call AddShadow(). These two functions have a restriction on the order that you call them. If you want them, you have to call them in the beginning of the chain and the AddShadow() should be before the AddGrayout().

The functions that you can use in chaining are:

AddShadow: Adds a shadow to your PopupCollection.
AddGrayout: Adds a grayout to your PopupCollection.
SetDimensions: Sets the position/dimensions of your PopupCollection. It takes 4 parameters, each of the parameters is optional and you specify null if you do not want to specify it. The parameters are x, y, width and height. The parameters are self explanatory.
Center: Center the element instead of specifying dimensions using SetDimensions. You can call this method without any parameter and it will put the PopupCollection in the middle of the page. Or you can pass it one of the following parameters: CommonPopupsEngine.CenterVertical, CommonPopupsEngine.CenterHorizontal, CommonPopupsEngine.CenterBoth.
SetFadeInDelay: Usually the popups show and hide, however if you call this function passing it a delay value (in milliseconds), it will FadeIn.
SetFadeOutDelay: Same as above but for closing the dialog.
EnableUserPositioning: Enables the PopupCollection to be dragged by the end user.
AutoCloseDialogAfter:If you want to have the PopupCollection close automatically after a period of time, call this function passing it the delay in milliseconds.
ShowDialog:Usually this is the last function you call in the chain, it will display the PopupCollection.

An example on the usage of these:

CommonPopupsEngine.GetHtmlPopup(0, 
    "<div class='popup'>An error has occurred</div>")
    .AddShadow()
    .AddGrayout()
    .SetDimensions(null, 40)
    .Center(CommonPopupsEngine.CenterHorizontal)
    .SetFadeInDelay(300)
    .SetFadeOutDelay(400)
    .EnableUserPositioning()
    .ShowDialog();

This example will show a popup that says "An error has occurred" inside a div having the CSS Class 'popup', It will have a Shadow and a Grayout, it will be centered horizontally and its Y coordinates will be 40 pixels from the top. The popup will FadeIn in 300 milliseconds and will FadeOut in 400 milliseconds. The popup can be dragged by the end user.

You can also easily open an Iframe in a popup by using a call like this:

CommonPopupsEngine.GetIFramePopup(channel, "http://www.yahoo.com/",
    450, 250, 200, 100, true)
    .AddShadow(null, 10)
    .AddGrayout()
    .SetFadeInDelay(300)
    .SetFadeOutDelay(400)
    .ShowDialog();

More examples can be seen in the file commonpopup.js in the attached example project.

To close the popups, there is one easy function to call CommonPopupsEngine.CloseTopmostPopupCollection. This function can be called without any parameter, in this case, it will close the last PopupCollection that was showed on the page. You can also pass it a specific channel to indicate to close the top most popup of a specific channel, I will explain the channels next.

When you show several popups, the engine stacks them on top of each other. And when you close the popups, it will close the topmost and shows the ones under it. If you want to have a different stack on the page, then this is what the channel is for, a channel is a stack of popups, specifying a different channel instructs the engine to use a different stack for the popups internally.

The engine takes care of the z-index of the popups that it shows transparently for you. It also makes sure that each individual html element in a PopupCollection has the proper z-index set for it (usually this is dictated by the order of the elements in the PopupCollection, this is why the AddShadow() and AddGrayout() has an order restriction when you call them in the chain).

The popup engine is written in the file commonpopupsengine.js, in the top of the file, there are few customizable parameters that affect how the engine works, they are put between two comments called configuration.

CommonPopupsEngine_startupZIndex:

This is the startup z-index that the engine uses to manage the z-indexes of the PopupCollections you show. You might need to raise this value if you have your own popups or your own elements that have higher z-indexes.

CommonPopupsEngine_maxPopupCollectionElements:

As described in the paragraph above, the engine takes care of the z-index of the individual elements of the PopupCollection, to do so correctly, it needs to know the maximum number of html elements that may exist in one single PopupCollection, this is this value. Usually you will not need to change this value however if you want to expand this code you will need to understand this more. On a later post, I will go into more details to explain how you can expand the code here.

CommonPopupsEngine_useGlobalZIndex:

If this value is set to true, then even if you have multiple channels, the last popup will be shown on top of all including all channels. If you have this set to false, if you open two popups in two different channels then they will have the same z-index and they will be shown both as on top and not just one.

CommonPopupsEngine_onlyShowToplevelPopup:

When this is set to true, if you open more than one popup, then only the last popup will be seen. When you show a new popup, the current one will be hidden and when you close the topmost popup, then if there is a popup below it, it will be shown again.

Here are some snapshots:

Let me know if you have any comments or if you need further help.

Hope this helps you.

Here is the sample project with the source code to download.

Server side CSS? Server side JavaScript?

Ralph Varjabedian — Sun, 31 Aug 2008 11:22:58 GMT

The other day we were restructuring some CSS files in a project I am working on. And we were thinking of the best way to specify one CSS file differently for each end user account in the project since each end user has the ability to control some aspects of the way the site looks when he/she logs in. Specifically each end user can control two main colors in the site's design. After some thoughts we ended up feeling we wanted somehow server side CSS in which we can write our CSS but instead of hardcoding two colors in the file, we want them as variables that we can inject from the server side from some code behind.

Initially I tried out some experiments with aspx files to serve CSS but there were some issues and the solution was not complete. I ended up writing one aspx file, that I called sss.aspx (server side script) which is used to read the CSS files locally, process them (replace variables in them) and then serve them back. The code was also written to support JavaScript files as well and not just CSS files.

To use this file, instead of specifying your CSS file like this:

<link rel="stylesheet" type="text/css" href="sample.css" />

You specify your CSS like this now:

<link rel="stylesheet" type="text/css" href="sss.aspx?sample.css" />

You can also specify several files beside each other, comma separated and the script file will combine them all together into one file and return them to the client, the order of the files on the query string is the order of combing the files. This has the benefit of speeding things since you are now sending all your files as one file in one connection instead of sending several files and waiting in queue due to the 2 connections per domain limitation of the browser. There is a part of the code in sss.aspx file where you can add some default files there that you would always want to serve by default without needing to add the files to the query string. You can also use this file to do the same exact thing with .js files (JavaScript files). The sss.aspx file can be easily modified to include your own script types as well, if you have something other than .css or .js.

The script also supports returning the result as GZIP or DEFLATE compressed, if the client browser supports it. And finally it provides proper cashing handling and proper Last-Modified headers handling. Once the file combined is served to the client, it will not be served again as long as you do not modify the source CSS or JS files. I have written the C# code inline to make it very easy to add to your own projects, just add the sss.aspx file.

Here is a recap of the benefits:

Server side script files (CSS and JavaScript) where you can replace server side variables with their appropriate values (method: ReplaceScriptVariables)
Combine several script files into one file to speed things up.
The returned stream will be compressed if the client browser supports it.
Automatically add common script files that you need in all your site without having to specify them each time.
Proper cashe handling and proper Last-Modified headers handling.
Add your script file types easily.

Here is a very small sample project that includes the sss.aspx file.

Wordle !

Ralph Varjabedian — Fri, 22 Aug 2008 10:23:35 GMT

I stumbled across a very nice site with a nice idea. Basically you add a bunch of words or even simpler, you provide an RSS URL and then the site will create for you an image of the most common words (the more popular the word, the bigger the size) in a nice layout. Go ahead, check it out.