10 Comments

What's the address of your website? www.domain.com or domain.com?

There are two camps on the subject of the www subdomain. One believe it should be enforced (www.yes-www.org) and the other (no-www.org) that it should be removed. They are both right.

What's important is that there is only a single canonical address to your website – with or without www.

The web.config makes it easy for us to either enforce or remove the www subdomain using URL rewrites. There are many examples online on how to do this, but they all share 2 fundamental flaws. The rules have a direct dependency to the domain name and they don't work with both HTTP and HTTPS.

So let's see if we can create generic URL rewrite rules that can be used on any website without modifications.

Your server needs to have the URL Rewrite module installed. Chances are that it does already. Azure Websites does and so does all of my other hosting providers.

Rewrite rules need to be placed inside the <rewrite> element in web.config:

<system.webServer>
  <rewrite>
    <rules>
      <!-- My rules -->
    </rules>
  </rewrite>
</system.webServer>

So here are 2 rules that works on all domains and on both HTTP and HTTPS.

Remove WWW

This rule redirects any incoming request to www.domain.com to domain.com while preserving the HTTP(S) protocol:

<rule name="Remove WWW" patternSyntax="Wildcard" stopProcessing="true">
  <match url="*" />
  <conditions>
    <add input="{CACHE_URL}" pattern="*://www.*" />
  </conditions>
  <action type="Redirect" url="{C:1}://{C:2}" redirectType="Permanent" />
</rule>

Enforce WWW

This rule redirects any incoming request to domain.com to www.domain.com while preserving the HTTP(S) protocol:

<rule name="Enforce WWW" stopProcessing="true">
  <match url=".*" />
  <conditions>
    <add input="{CACHE_URL}" pattern="^(.+)://(?!www)(.*)" />
  </conditions>
  <action type="Redirect" url="{C:1}://www.{C:2}" redirectType="Permanent" />
</rule>

So there you have it. It's easy once you now how.

For more info on the URL Rewrite Module, see the Configuration Reference.

1 Comments

URL rewrites ing web.configI recently upgraded MiniBlog from using WebPages/Razor 2 to version 3. The upgrade was completely painless. I just upgraded the NuGet package and it didn't even touch my web.config. Thumbs up to the Razor team for that!

Everything seemed to work fine, but then I noticed that my root-relative links such as <a href="~/category/web-essentials"> didn't work correctly anymore. The ~/ no longer pointed to the root of my web application, but instead to the first path segment of my URL. So, when the browser was at /post/my-post, then the ~/ in my link would resolve to <a href="/post/category/web-essentials">. This was wrong.

The reason is that I use URL rewrites in my web.config to map /post/whatever to /index.cshtml?slug=whatever and that was the reason for this strange behavior. Here's my rewrite rule:

<rule name="slug" stopProcessing="true">
  <match url="^post/(.*)" ignoreCase="true"/>
  <action type="Rewrite" url="/index.cshtml?slug={R:1}"/>
< /rule>

So in order to use WebPages/Razor 3 with URL rewrites like mine, I had to tell Razor to ignore the <rewrite> segment in my web.config. That's easily done in global.asax like so:

public void Application_BeginRequest(object sender, EventArgs e)
{
     Context.Items["IIS_WasUrlRewritten"] = "false";
}

Now Razor correctly maps to the root of the website when using ~/.  

Not all cases

This little workaround is only needed if your URL rewrites happen in the path of the URL, but not if you use sub-domain rewrites. For instance, if you use URL rewrites to map sub.domain.com into domain.com/sub then it all works fine and you don't need this workaround.

8 Comments

Due to the brand new HTML editor in Visual Studio 2013, static HTML files no longer has the Design|Split|Source options enabled by default.

Design, Split and Source view

That’s because the new HTML editor is the default editor for all HTML files with the exception of ASP.NET Web Forms files (.aspx, .ascx, .master). However, it is only the Web Forms editor that has support for the designer and split view.

So all we have to do is to map our .html or .htm files to use the Web Forms editor instead of the new HTML editor.

Simply right-click any .html/.htm file in Solution Explorer and select Open With…

Open With context menu

Now select HTML (Web Forms) Editor,click Set as Defaultand then hit OK.

Visual Studio's Open With dialog

All files with the same extension will now always open in the Web Forms editor and you get both Design- and Split view.

I also recorded a short video showing a different way to accomplish the same thing.

5 Comments

Earlier this year, Sayed and I released Web Developer Checklist to help web developer adhere to best practices. Checklists like these can be really helpful to make sure we don’t forget anything before releasing new or updated websites.

imageNow we’re introducing Web Developer Checklist as a Chrome extension that can automate a big portion of the checklist. The extension let’s you run checks for various best practices on any website - including your own running from localhost.

It performs a serious of checks by analyzing the DOM as well as integrating with 3rd-party services like Google PageSpeed.

Next steps

This first version of the Web Developer Checklist Chrome extension does a serious of really valuable checks. The next releases will have even more.

Specifically, we’re looking at adding:

  • HTML validation
  • CSS validation
  • Accessibility validation
  • JSHint
  • CssLint
  • Guidance for each item Done v.1.4.4

We think these checks would be hugely beneficial. If you have ideas for other checks that can be automated, please let us know in the comments below.

Open source

The Web Developer Checklist Chrome extension is open source and hosted on our GitHub org. As always, pull requests are more than welcome.

7 Comments

imageSo you just built a website and are about to make it public to the world. You go through a few checks to make sure that everything works as expected. Perhaps run HTML validation and other similar services.

But are you sure you remembered to implement all the best practices? Does it look good on mobile devices, in Windows 8 snapped view and what about basic accessibility?

Enter Web Developer Checklist

We’ve tried to come up with the complete list of tasks and checks that every web developer should go through when developing any kind of website. The Web Developer Checklist is structured in a way that makes it really easy to follow the progress as well as getting help to perform all the checks.

Give it a try and let me know what you think.