RSS

Additions to combine control

Ok, I’ve slightly changed some of the behaviour of the script combining control. In addition it now combines, compresses, minifies and caches CSS files! The CSS can also be used to target certain browsers and versions. It can be used like this:

<cc:CSSCombine ID="CSSCombiner" runat="server" CSSHandler="~/Handlers/CSSCombine.ashx">
<CSSReferences>
<cc:CSSReference TargetBrowser="All" Path="~/Styles/admin.css" /> <%--Will target all versions of all browsers--%>
<cc:CSSReference Path="~/Styles/webTV.css" /> <%-- Will target all versions of all browsers --%>
<cc:CSSReference TargetBrowser="IE" TargetVersion="8" Path="~/Styles/admin_old.css" /> <%-- Will target version 8 of IE --%>
<cc:CSSReference TargetBrowser="FF" TargetVersion="2" Path="~/Styles/screen.css" /> <%-- Will target versions 2 of FireFox --%>
<cc:CSSReference TargetBrowser="Chrome" Path="~/Styles/main.css" /> <%-- Will target all versions of Chrome --%>
<cc:CSSReference TargetBrowser="Safari" Path="~/Styles/sifr.css" /> <%-- Will target all versions of Safari --%>
</CSSReferences>
</cc:CSSCombine>

<cc:CSSCombine ID="CSSCombiner" runat="server" CSSHandler="~/Handlers/CSSCombine.ashx">

<CSSReferences>

<cc:CSSReference TargetBrowser="All" Path="~/Styles/admin.css" /> <%--Will target all versions of all browsers--%>

<cc:CSSReference Path="~/Styles/webTV.css" /> <%-- Will target all versions of all browsers --%>

<cc:CSSReference TargetBrowser="IE" TargetVersion="8" Path="~/Styles/admin_old.css" /> <%-- Will target version 8 of IE --%>

<cc:CSSReference TargetBrowser="FF" TargetVersion="2" Path="~/Styles/screen.css" /> <%-- Will target versions 2 of FireFox --%>

<cc:CSSReference TargetBrowser="Chrome" Path="~/Styles/main.css" /> <%-- Will target all versions of Chrome --%>

<cc:CSSReference TargetBrowser="Safari" Path="~/Styles/sifr.css" /> <%-- Will target all versions of Safari --%>

</CSSReferences>

</cc:CSSCombine>

Download it download

Advertisements
 
Leave a comment

Posted by on June 5, 2009 in C# Development, HTML / CSS, JavaScript

 

Tags: , , , , , ,

Script Combining Control

Combining JavaScript files. Why is this important? If you have for example 10 JavaScript files included on your website, that means the browser will make a separate request for each one of these files. Latency can be seen as an issue here. We aren’t maximising throughput.

This analogy can be compared to for example, a set of Traffic Lights. You may have seen it sometimes when traffic lights are not functioning correctly, or sometimes you’re in a queue and you’re saying “for god sake, the lights don’t stay green long enough.” So it may stay green for about 5 seconds, which is just enough time for you to pull down the hand brake, accelerate and go. In that time you may get about 5 cars though for example. Now lets say the lights go green for 10 seconds. Now you may expect to get 10 cars through, but you may get 15 through. The time to negotiate the hand brake, accelerating and stopping is less frequent, so we are maximizing throughput. Read on: http://sumo.sourceforge.net/docs/dkrajzew_TRAF9_AgentbasedTLS.pdf

This is the same for negotiating each request in our case. I have seen a lot of different ways of people achieving script combining. Most commonly and a good way is to use a Handler, that returns the combined result. I have a handler that works in a similar way, but it can be implemented in a more friendly manor using a Custom Server Control.

The control has other configurable properties, such as caching, minifying and compressing. They are all switched on by default. The code below will look familiar to the ASP.NET AJAX Script Manager, script combining, but the control I wrote gives you more control over caching, minifying and compressing (using GZip).

It can be implimented like so.

<cc:ScriptCombine ScriptHandler="~/ScriptCombine.ashx" ID="ScriptCombiner" runat="server">
<Scripts>
<cc:ScriptPath Path="~/Scripts/jquery-1.3.2.min.js" />
<cc:ScriptPath Path="~/Scripts/ui.core.js" />
<cc:ScriptPath Path="~/Scripts/ui.accordion.js" />
<cc:ScriptPath Path="~/Scripts/ui.datepicker.js" />
<cc:ScriptPath Path="~/Scripts/ui.progressbar.js" />
<cc:ScriptPath Path="~/Scripts/ui.draggable.js" />
<cc:ScriptPath Path="~/Scripts/ui.sortable.js" />
<cc:ScriptPath Path="~/Scripts/ui.slider.js" />
<cc:ScriptPath Path="~/Scripts/ui.resizable.js" />
<cc:ScriptPath Path="~/Scripts/ui.draggable.js" />
<cc:ScriptPath Path="~/Scripts/ui.selectable.js" />
<cc:ScriptPath Path="~/Scripts/ui.droppable.js" />
</Scripts>
</cc:ScriptCombine>

<cc:ScriptCombine ScriptHandler="~/ScriptCombine.ashx" ID="ScriptCombiner" runat="server">

<Scripts>

<cc:ScriptPath Path="~/Scripts/jquery-1.3.2.min.js" />

<cc:ScriptPath Path="~/Scripts/ui.core.js" />

<cc:ScriptPath Path="~/Scripts/ui.accordion.js" />

</Scripts>

</cc:ScriptCombine>

You can download an example project with the source code: Download

You can script combine in your project by taking the ScriptCombine.ashx and the CustomControls.dll and reference accordingly like the example.

 
Leave a comment

Posted by on May 27, 2009 in C# Development, JavaScript

 

Tags: , , , , , ,

Web Services in IE6 with Silverlight 2

I had an issue with calling web services from a Silverlight 2 application within Internet Explorer 6. I was a bit confused to why this was happening. After a quick browse on the web, I found this was quite a known problem. Unfortunately, still a lot of people use Internet Explorer 6, so it had to be supported! There are a few ways to fix the issue, but I found this way to work pretty well.

Switch off dynamic compression within IIS. Fortunately, there is a way to enable/disable dynamic compression for certain directories and pages. You can add the below to the <system.webServer> section in the web.config.

<urlCompression doStaticCompression=”true” doDynamicCompression=”true” />

This will enable compression for the entire application. To switch it off just for the web service you can add a location section like so…

  <location path=”FAService.asmx”>
    <system.webServer>
      <urlCompression doStaticCompression=”true” doDynamicCompression=”false” />
    </system.webServer>
  </location>

  <location path=”MyService.asmx”>

    <system.webServer>

      <urlCompression doStaticCompression=”true” doDynamicCompression=”false” />

    </system.webServer>

  </location>

 
Leave a comment

Posted by on May 11, 2009 in Silverlight

 

Tags: , , , , ,

The FA

This was rolled out a couple of Months a go! The video centre and the Silverlight 2 player is what I have built. http://www.thefa.com and http://www.thefa.com/VideoCentre.aspx

 
Leave a comment

Posted by on April 26, 2009 in Websites

 

Tags: ,

Internet Explorer 8

I am just going to keep this short. Pretty impressed with how Internet Explorer 8 interprets CSS, which follows a lot closer to Firefox 3! This has made it easier when trying to tweak layouts!

On a side note, see

 http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

I would strongly advise against using this!

 
Leave a comment

Posted by on April 25, 2009 in HTML / CSS

 

Tags: