Get Combres working with ASP.NET

After having some problems with getting SquishIt to work with JavaScript closures, we decided to give Combres a try. However, while SquishIt works right out of the box, Combres needs to be configured a bit. This page describes how.

In short, you need to:

• Create a custom Combres configuration file
• Add the following to web.config:
  • A Combres configSection tag
  • A Combres section tag (which you point to the Combres config file)
  • Two httpModule tags
• Add RouteTable.Routes.AddCombresRoute(“Combres Route”); to the Global.asax Application_Start method
• Add <%= WebExtensions.CombresLink(“…”) %>wherever you want to add JS or CSS tags.

With SquishIt, you only need to add a bundle tag to your page, which is way easier. Still, Combres is said to perform better compression…and handles JavaScript closures without any problems.

With Combres up and running, I noticed that it does not work with IIS7 / Integrated pipeline mode. If you run into this problem, remove all mumbo jumbo content in within the Combres section tag, so that it looks like this:

<section name=”combres” type=”Combres.ConfigSectionSetting” />

Then, instead of:

<httpModules>
        <add name="ScriptModule" type="System.Web.Handlers.ScriptModule,
	System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
	PublicKeyToken=31BF3856AD364E35"/>
        <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule,
	System.Web.Routing, Version=3.5.0.0, Culture=neutral,
	PublicKeyToken=31BF3856AD364E35"/>
</httpModules>

You also need to add the modules to the system.webServer/modules tag, since that is the one used by IIS7  (keep the ones above as well, though):

<modules>
        <add name="ScriptModule" type="System.Web.Handlers.ScriptModule,
	System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
	PublicKeyToken=31BF3856AD364E35"/>
        <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule,
	System.Web.Routing, Version=3.5.0.0, Culture=neutral,
	PublicKeyToken=31BF3856AD364E35"/>
</modules>

Combres should now work.

IE bug fixed for saidi.se/font

Yesterday, I uploaded a demo page where I tried out the awesome fonts.com Web Fonts service…

…however, Internet Explorer did not really like the page. Turns out

<button onclick="$('.comic').animate({fontSize: '3em', });">Text can be resized!</button>

was too much for Internet Explorer to handle. It should be:

<button onclick="$('.comic').animate({fontSize: '3em' });">Text can be resized!</button>

I rest my case. The bug is fixed. Feel free to check out the demo page at http://www.saidi.se/font

Bundle JavaScript and CSS files – with full file paths

I have been looking at the great PHP CSS/JavaScript bundling approach that is presented at rakaz.nl. The suggested approach is great…and works great, but has a small drawback.

The downloaded combine.php must be adjusted and all combined files must exist in the same folder.

Not a big problem, I know, but since I have a structure where css/js files may exist in sub folders, I want to be able to provide the bundle URL with full paths to the files I want to bundle.

Since the original solution is so slick, this is quite easy to achieve. I will not upload my solution for download, since I want you to grab the original code from rakaz.nl so that it receives the visitors it deserves

Well, let’s get started:

• In your project root, create a folder called bundle (or whatever you want, it is not that important)
• In the bundle folder, create an .htaccess file and add the following code:

          RewriteEngine On
          RewriteBase /
          RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
          RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1

• In the bundle folder, create a combine.php file and add this content to it.

Well, now you’re practically where the original approach tells you to adjust the PHP code a bit. Instead, do this:

In the combine.php file, replace

          $path = realpath($base . '/' . $element);

with:

          $path = "../" . $element

The code has to be replaced at two places in the PHP file.

That’s it!

The only thing you have to consider now is to use application root relative paths when calling the bundle URL. This will cause your bundle URL to become quiiiite complex, but it works

For instance, I have my main JavaScript folder in the application root folder content/js. Let’s say that I have the files a.js and b.js (great naming convention, ey?). The bundle URL would then be:

          bundle/javascript/content/js/a.js,content/js/b.js

To bundle CSS files, the corresponding code would look like:

          bundle/css/content/css/a.css,content/css/b.css

Well, you get the point

The newly added code will add a ../ to each link before attempting to parse the file, which will work great since the combine.php file is placed one level down from the application root…to which the links have to be relative, remember?

The great thing now is that I can bundle any JavaScript/CSS files (they still have to be bundled separately) regardless of their physical location (as long as they exist anywhere within the application root folder).

Another great thing is that the .htaccess file is placed inside the bundle folder, which means that you can just copy the bundle folder if you want to use it in another project.

Hope this helps!

Better blog code tool requested

I have been looking for a better way to display code at this blog, but would like to do so without having to host my blog by myself.

With this theme, as you may have noticed (and I did a while after starting to use it), the code is simply hidden if it is too long (which is reaaaaaaally bad).

Has anyone a solution for this, or will I have to setup a WordPress blog at my web site?

The CSS fix of the day

Today, my dear collegue Johan Driessen showed me a nice CSS fix.

The fix solves the problem that div elements with nested, floating divs will not resize according to the size of its nested elements, as such:

Default div behavior: The div does not adjust its size according to nested, floating elements.

Well, thanks to Johan  – although he stresses the fact that he found it on the web and did not write it himself – I have now a nice little CSS class that takes care of this:

   .fc:after{content:".";clear:both;display:block;visibility:hidden;height:0;}
   * html .fc{height:1px;}

Just add this class to the div element that contains floating elements, and the result (sorry for the poooor graphics), will be as such:

CSS fix: The div adjusts its size according to nested, floating elements.

Hope this helps. If so, thank Johan.

Trying out some CSS tools

I am currently trying out some nice CSS tools, which will simplify working with CSS in ASP.NET MVC.

First of all, Blueprint seems like a nice, basic CSS framework that provides a nice CSS foundation. I will give it a try and hope that I can use it in project after project from now on, lazy as I am

Second, I will have a look at Bundler, which can be used to bundle CSS and JavaScript in ASP.NET MVC. It looks promising and would be a nice alternative to the web form theme approach.

Finally, I will download LESS CSS, which I have been meaning to try out for a long time. Using variables, mixins etc. will hopefully be the key to avoiding some frustrating CSS issues.

http://www.blueprintcss.org/

[SOLVED] / in URL query makes CSS @import and file paths fail

I am currently implementing CSS file bundling, which uses a virtual path to a PHP file, as such:

   ~/bundle/bundle.css&cssFolders=... => ~/bundle/bundle.php&type=css&cssFolders=...

Since I provide paths to my CSS folders, a bundle URL may look like this:

   ../bundle/bundle.css&cssFolders=css/,shared/css/

My bundle file then builds the resulting CSS content by importing all files that it finds, for instance:

   @import url("../css/x.css");
   @import url("../shared/css/y.css");

Thus solution, however, did only work in some cases, while failing for other. I was confused…then I found the solution.

The / chars in the URL query makes the @import statement fail, since it seems to count all / in the URL, not just all the / in the path excluding the query. This is quite understandable, since .css files are not really meant to handle query variables.

In this case, however, we have  a virtual .css file that handles query variables, which is why we need to solve this problem.

The solution, in this case, is to count the number of / in the query variable cssFolders and add an extra ../ for each / in the import statements. I will not show any code examples here, you will find it in the next post.

Bundle CSS files

I am currently working with bundling CSS files, and have the requirement that I should be able to bundle files from many different folders, when needed.

Previously, all CSS files within the selected CSS folder (if any), as well as within a mandatory system css folder, were added to the virtual bundle file. The theme engine parsed all files and added them to the virtual file output as one mega string (or quite small if not that much CSS was defined, like this:

   .validation-error{border: solid 1px #bb4444;background: #ffdddd;}.RatingBar .images a{display: inline-block; width: 20px;height: 20px;}.RatingBar .unrated { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_unrated.gif); }.RatingBar .rated { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_rated.gif); }.RatingBar .half { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_half.gif); }.RatingBar .createdBy { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_createdBy.gif); }.RatingBar .hover { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_createdBy.gif); }@import url(../../../box.css);@import url(../../../classes.css);@import url(../../../controls.css);@import url(../../../design.css);@import url(../../../elements.css);@import url(../../../grid.css);@import url(../../../lists.css);html, body{margin: 0px;background-color: #FFFFFF;background-image: none;}.box{border: solid 1px #bbbbbb;}.box .body{padding: 5px;border: solid 2px white;background: #f6f6f6;}.w100 { width: 100%; }.w95 { width: 95%; }.w90 { width: 90%; }.w85 { width: 85%; }.w80 { width: 80%; }.w75 { width: 75%; }.w70 { width: 70%; }.w65 { width: 65%; }.w60 { width: 60%; }.w55 { width: 55%; }.w50 { width: 50%; }.w45 { width: 45%; }.w40 { width: 40%; }.w35 { width: 35%; }.w30 { width: 30%; }.w25 { width: 25%; }.w20 { width: 20%; }.w15 { width: 15%; }.w10 { width: 10%; }.w5 { width: 5%; }.align-center { text-align: center; }.align-left { text-align: left; }.align-right { text-align: right; }.valign-middle { vertical-align: middle; }.valign-top { vertical-align: top; }.float-left { float: left; }.float-right { float: right; }.bold { font-weight: bold; }.bold-italic { font-weight: bold; font-style: italic; }.italic { font-style: italic; }.invisible { display: none; }.clear { clear: both; }span.large { font-size: 1.3em; }span.yellow { color: #ff9900; }img.border{padding: 3px;border: solid 1px #cccccc;}#main-content-middle img.top{padding-bottom: 15px;}div.separator{margin-top: 10px;margin-bottom: 10px; font-size: 1px;height: 5px;border-bottom: solid 1px #dddddd;background-image: url(../../../img/themes/pro/bg_lines.gif);}#main-content-right div.section-title{height: 25px;padding: 3px;background: #f6f6f6;border-top: solid 1px #cccccc;border-bottom: solid 1px #cccccc;}#main-content-right img.section-icon{float: left;margin-right: 8px;}#main-content-right div.section-text{font-weight: bold;margin-top: 7px;margin-bottom: 15px;}.control input[type="text"],.control input[type="password"]{width: 98%;}.control textarea{width: 99%;}.control-body div{margin-bottom: 10px;}.control-footer{margin-top: 10px;text-align: right;}.NewsletterSubscribeForm .email { margin-bottom: 0px; }.NewsletterSubscribeForm .unsubscribe { text-align: right; }html, body{background: #222222;margin: 0px;margin-top: 50px;margin-bottom: 100px;}#main-top, #main-bottom{color: #c4c4c4;}#main-top{padding-bottom: 50px;background-position: bottom;background-repeat: repeat-x;background-image: url(../../../img/themes/pro/bg_top.jpg);}#main-logo{padding: 0px;padding-left: 150px;padding-top: 30px;background-image: url(../../../img/themes/pro/logo.gif);background-repeat: no-repeat;}.main-width{width: 900px;margin: 0 auto;}#main-content { background: white; }#main-content-left { width: 210px; }#main-content-middle { width: 412px; }#main-content-right { width: 220px; }#main-content-left,#main-content-middle,#main-content-right{padding-left: 10px;padding-right: 10px;}#main-content-left, #main-content-right {border-left: solid 1px #cccccc;border-right: solid 1px #cccccc;}#main-bottom{padding-top: 60px;background-position: top;background-repeat: repeat-x;background-image: url(../../../img/themes/pro/bg_bottom.jpg);}#main-bottom-left, #main-bottom-right{color: white;font-size: 0.82em;}#main-bottom-left{padding-right: 10px;border-right: solid 1px #000000;}#main-bottom-right{padding-left: 10px;border-left: solid 1px #333333;}html, body{color: #333333;font-family: Helvetica, Tahoma, Arial, sans-serif, Verdana, Geneva;font-size: 0.9em;}a{color: #ff9900;font-weight: bold;text-decoration: none;}a:hover { color: #ffbb00; }a, ul a { outline: none; }form{padding: 0px;margin: 0px;}h1{font-size: 1.65em;}h2{font-size: 1.4em;margin-top: 25px;border-bottom: solid 1px #cccccc;}h3{margin-top: 25px;margin-bottom: 10px;}h1, h2, h3 { color: #444444; }h1, h2.first, h3.first { margin-top: 0px; }h1.nospace, h2.nospace, h3.nospace { margin-bottom: 0px; }img, a img{border: none}table{border-collapse: collapse;}table td{padding-right: 5px;vertical-align: top;}.grid {}.grid .row {}.grid .row .cell { float:left; width: 100%; }.grid .row.one .cell { float:none; width: 100%; }.grid .row.two .cell { width:50%; }.grid .row.three .cell { width:33.2%; }.grid .row.four .cell { width:25%; }.grid .row.five .cell { width:20%; }.grid .row.six .cell { width:16.6%; }.grid .row.seven .cell { width:14.2%; }.grid .row.eight .cell { width:12.5%; }.grid .row.nine .cell { width:11.1%; }.grid .row.ten .cell { width:10%; }.grid .row, .grid .row .cell.last { overflow: hidden; }.grid .row .cell.last { float:none; width:auto; }.grid.border .row { border-top: solid 1px black; }.grid.border .row.last { border-bottom: solid 1px black; }.grid.border .row .cell { border: none; border-left: solid 1px black; }.grid.border .row .cell.last, .grid.border .row.one .cell { border-right: solid 1px black; }ul.horizontal,#main-menu ul, #main-bottom ul,#main-content-middle ul.titleMenu,#main-content-middle ul.images{margin: 0px;padding: 0px;list-style: none;}ul.horizontal li,#main-menu ul li, #main-bottom ul li,#main-content-middle ul.titleMenu li,#main-content-middle ul.images li{display:inline;}ul.vertical-list,#main-subMenu ul, #main-content-middle ul{border-top: solid 1px #cccccc;margin: 0px;padding: 0px;list-style: none;}ul.vertical-list li,#main-subMenu ul li, #main-content-middle ul li{border-bottom: solid 1px #cccccc;margin: 0px;padding: 5px;}ul.vertical-list li.even,#main-subMenu ul li.even, #main-content-middle ul li.even{background-color: #f3f3f3;}ul.vertical-list li.selected,#main-content-middle ul li.selected{border-bottom: solid 1px #bbbbbb;background-color: #eaeaea;}ul.vertical-list li.separator,#main-subMenu ul li.separator, #main-content-middle ul li.separator{font-size: 0.1em;background: url(../../../img/themes/pro/bg_lines.gif);}ul.vertical-list li:hover,#main-subMenu ul li:hover, #main-content-middle ul li:hover{background-color: #f9f9f9;}#main-menu li{font-size: 1.5em;font-weight: bold;}#main-menu li { margin-right: 10px; }#main-menu li a { margin-right: 5px; }#main-bottom li { margin-right: 5px; }#main-bottom li a { margin-right: 3px; }#main-menu li a, #main-subMenu li a, #main-bottom li a { text-decoration: none; }#main-menu li a, #main-bottom li a { color: white; }#main-subMenu li a { color: black; }#main-subMenu li a, #main-bottom li a { font-weight: normal; }#main-menu li.selected a, #main-subMenu li.selected a, #main-menu li a:hover, #main-subMenu li a:hover, #main-bottom li a:hover, #main-bottom li.section, #main-bottom li a.more{color: #ff9900; }#main-subMenu li.selected{background-image: url(../../../img/themes/pro/bg_subMenu_selected.gif);background-repeat: no-repeat;}#main-subMenu li.selected a{font-weight: bold;padding-left: 5px;}#main-bottom li.section { width: 90px; }#main-bottom li.section, #main-bottom li a.more { font-weight: bold; }#main-content-middle ul.titleMenu{padding:5px;padding-top:7px;margin:0px;margin-top: 10px;text-align: center;background-color: #f8f8f8;border-bottom: solid 1px #cccccc;}#main-content-middle ul.titleMenu li,#main-content-middle ul.titleMenu li:hover{background: none;padding: 10px;border-bottom: none;}#main-content-middle ul.titleMenu li a{color: #505050;}#main-content-middle ul.titleMenu li a:hover{color: #ff9900;}#main-content-middle ul.images{border: none;text-align: center;}#main-content-middle ul.images li,#main-content-middle ul.images li:hover{padding: 5px;border-bottom: none;}#main-content-middle ul.images img{padding: 3px;border: solid 1px #cccccc;}#main-content-middle ul.images img { margin-bottom: 8px; }#main-content-middle ul.songs, ul.songs{margin-top: 10px;}ul.songs li,ul.songs li:hover{line-height: 23px;padding: 0px;padding-top: 4px;}ul.songs li span { float: right; }#lbOverlay {position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;background-color: #000;cursor: pointer;}#lbCenter, #lbBottomContainer {position: absolute;z-index: 9999;overflow: hidden;background-color: #fff;}.lbLoading {background: #fff url(../../../img/slimbox/loading.gif) no-repeat center;}#lbImage {position: absolute;left: 0;top: 0;border: 10px solid #fff;background-repeat: no-repeat;}#lbPrevLink, #lbNextLink {display: block;position: absolute;top: 0;width: 50%;outline: none;}#lbPrevLink {left: 0;}#lbPrevLink:hover {background: transparent url(../../../img/slimbox/prevlabel.gif) no-repeat 0 15%;}#lbNextLink {right: 0;}#lbNextLink:hover {background: transparent url(../../../img/slimbox/nextlabel.gif) no-repeat 100% 15%;}#lbBottom {font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;font-size: 10px;color: #666;line-height: 1.4em;text-align: left;border: 10px solid #fff;border-top-style: none;}#lbCloseLink {display: block;float: right;width: 66px;height: 22px;background: transparent url(../../../img/slimbox/closelabel.gif) no-repeat center;margin: 5px 0;outline: none;}#lbCaption, #lbNumber {margin-right: 71px;}#lbCaption {font-weight: bold;}

This is great, right? Nice, clean and compact.

However, this approach – which can be found in various CSS bundle solutions around the web – suffers from a major flaw…file paths. Since the virtual file does not exist at the same folder level in the file system as the parsed files (or most likely does not), all url paths in the bundle file will be invalid. This especially is the case when parsing files from many different folders.

The approach above requires you to either use absolute paths in your css files or have the css files at the same folder level in the file system as the bundle file. This is not always applicable, especially since I want to allow developers to point out any folder as css folder.

It is possible, though, by providing the bundle file with various file system information, to acount for the path differences and change the file paths so that they work within the bundle file. This, however, involves way too much work and testing for me to be interested in implementing such a solution…at least now.

So, I have now taken a step back. The bundle file still remains, but instead of adding all file content to the output as above, I simply import all files of interest into it. The virtual file output will thus look something like this:

   @import url("../css/default.css");@import url("../../wigbi/css2/x.css");@import url("../../wigbi/css2/y.css");

This is not as fast as the compact first option, since I have no possibility of compressing the CSS code. However, but by linking to the CSS files like this, I do not have to account for file paths within each file. It works automatically…like a charm

New design for my personal web site…

When I first created it, I thought that the design I came up with for my personal web site – saidi.se – was great…

…sadly, I was mistaken. The color scheme makes it hard to display the generic content I want it to be a place holder for, and the dark background makes textual content a pain in the a** to read.

So, yesterday, I spent a couple of evening hours to create a new design, which I hope to apply to the site tonight, or tomorrow, or…when I manage to find the time

Using themes in ASP.NET MVC

Ok, so now, I have rolled up my sleeves and created my first ASP.NET MVC (from now on, I will refer to this as MVC, since it is in .NET context) 1.0.

After looking around a bit in the slick template you first get, I notice that .css files are manually included in the master page. I, however, prefer to use themes, so I decided to adjust the application a bit.

To create a theme, simply do the following:

• Right-click on your web project and choose Add/Add ASP.NET Folder/Theme, which will add the theme master folder App_Themes
• Create a theme-specific folder within App_Themes, for instance Default
• Add .skin or .css files to the folder – they will be included automatically
• The theme can be applied in two ways:
  • Default theme (used by all project pages) – add Theme=”Default” to the pages tag in web.config
  • Page-specific theme (applied to a page) – add Theme=”Default” to the Page tag in each .aspx file
• The theme will now be applied, which means that all its skin and style files will be loaded automatically

I prefer to use default themes and apply themes only to the pages that are to use another one. This makes it easier to switch the design of an entire application by changing one config parameter.

So, I created a Default theme and moved the Content/Site.css to the Default theme folder, modified web.config to use the theme and removed the manually applied .css file from the master page. However, when I tried to run the page, it crashed with this info:

Using themed css files requires a header control on the page. (e.g. <head runat=”server” />).

Turns out that the Default.aspx file in the project root is completely blank and only used to redirect the user.

To make the application able to use a default theme, simply add this dummy code to the page:

<html>
 <head runat="server"></head>
</html>

This will neverbe displayed and does not disturb the app in any way, but lets you use default themes, which at least I think is nice