Creating 301 redirects in web.config

20 November 2013

For various reasons at times you may need to create a 301 redirect to another URL. This could be as a result of a page moving or you just need to create some friendly URLS.

As a developer you may be tempted to do something like this in code...

1private void Page_Load(object sender, System.EventArgs e)
2{
3    Response.Status = "301 Moved Permanently";
4    Response.AddHeader("Location","http://www.new-url.com");
5}

But do you really want your project cluttered up with files who's only purpose is to redirect to another page!

You may also be tempted to try doing something with .NET's RouteCollection. This would certainly solve an issue on creating a redirect for anything without a file extension, but there is a better way.

In your web.config file under the configuration node create something like this

1<location path="twitter">
2  <system.webServer>
3    <httpRedirect enabled="true" destination="http://twitter.com/TwitterName" httpResponseStatus="Permanent" />
4  </system.webServer>
5</location>

The location path specifies that path on your site that this redirect will apply to. The destination value in the httpRedirect is where the redirect will go to. As well as setting Permanent for the httpResponseStatus you can also specify Found or Temporary depending on your needs.

HTML5 Series - Semantic Tags

5 December 2012

Before HTML5 the HTML for your page's layout was probably primarily made up of a lot of div tags with id's a class's to give them a visual structure and layout. It might look something like this...

1<div id="header">My Site Name</div>
2<div id="content">Bla bla bla site content......</div>
3<div id="footer">Privacy policy, copywrite info etc</div>

This though has 2 problems. Firstly it's not great for computers like search engines or screen readers to understand as everything is a div. There is extra code you can add to improve on this (have a look at Scheme.org). Secondly your code isn't very, again because everything is a div.

HTML5 however introduces new semantic tags like <header>and
<footer> to make your data more structured. So the above example would become...

1<header>My Site Name</header>
2<article>Bla bla bla site content......</article>
3<footer>Privacy policy, copywrite info etc</footer>

Other tags are as follows:

Tag Description

<article> For external content, like text from a news-article, blog, forum, or any other content from an external source

<aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content

<details> For describing details about a document, or parts of a document

<summary> A caption, or summary, inside the details element

<figure> For grouping a section of stand-alone content, could be a video

<figcaption> The caption of the figure section

<footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information

<header> For an introduction of a document or section, could include navigation

<hgroup> For a section of headings, using

<h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings

<mark> For text that should be highlighted

<meter> For a measurement, used only if the maximum and minimum values are known

<nav> For a section of navigation

<progress> The state of a work in progress

<section> For a section in a document. Such as chapters, headers, footers, or any other sections of the document

<time> For defining a time or a date, or both

Image resizing

21 August 2012

Using 3rd party components while essential, can also be a headache. All to often you can find yourself spending hours following the setup instructions to the letter only for it to not work. Other times you know it's the exact component you want to use but it seems while the guys may have spent a huge effort in writing to component they seemingly never got round to writing anything to tell you how to use it.

Every so often though I come across a component that works first time and does exactly what you want. One such component that I've found this with recently ImageResizer.

I needed a simple way for images to be resized for a product listing on an eCommerce platform written in Classic ASP. Image resizing can be a real pain, there's the decision of do you do it when the images are uploaded or on the fly, if you do it on the fly there's a a huge number of mistakes you can make and nearly every example of how to do image resizing includes a couple of them. Then lastly in either scenario you need to make sure the end result is actually decent quality.

With image resizer I was done in 5 minutes! It's actually a .NET component rather than Classic ASP but that wasn't an issue. You create a bin folder, add a couple of simple lines to your web.config file then put an extra extension on the image path plus parameters for the size you want and that's it!

If your doing a .NET project it's also available on NuGet making it even easier to get up and running.