Amadiere.com

Fourteen and a half crazy frog burpers

1st March 2010

4 Top Tips for portable ASP.NET MVC Apps

Filed under: ASP.NET, CSS, HTML, MVC — Tags: , , , — Alex Holt @ 10:22 pm

Loooong cat! :O

ASP.NET MVC is awesome (find out how awesome it is over dinner) and allows for some great applications to be made, quickly, while at the same time offering a high degree of maintainability over the code that is written. The danger with being able to do things too fast is that simple mistakes are sometimes made. These hopefully are nothing major, but can become an irritation at various points down the line. One of the things that occasionally gets left behind is the portability of code – and this can be a bit of a ‘damn I wish I’d done it like that to start with’ moment.

Below are a few hints that may (or may not) help you as you develop the next great slice of awesomeness.

Disclaimer: These tips are displayed as ASP.NET MVC tips, but in reality, some of them progress to general ASP.NET Websites and Applications – or just websites in general.

  1. Don’t Assume You Know Your Root
    Before I get started, let me give some background on this point. I have recently been doing some final tweaks to an otherwise great MVC application. However, one of the tweaks I did was to make sure that part of the system was securely done via HTTPS. When looking around the net, this appeared to be a lot trickier than I thought. After all, could all these people be wrong?:

    Basically, yes they can, but only because their articles are dated, not because they are fools (it should also be noted that although their articles may be dated, there are some good techniques and ideas in them, so worth a nosey). :) Bart Wullems does a good job of explaining the amazing simplicity of this new attribute that was added in MVC 2 Preview 2. I’m a little surprised as to how this maybe wasn’t given a little bit more publicity – its a useful tool that was sorely missing before. Behold, ye [RequiresHttps] attribute!

     [RequireHttps]
     public ActionResult Login()
     {
     return View();
     }

    This addition of SSL feather to my MVC Application’s bow was to prove too much for Visual Studio’s Cassini and I was forced onto my local IIS. This in itself wasn’t a great issue, but it highlighted some issues with the way the application had been developed. It had been assumed from the start that the application would live at the root of its own domain. This is true for the production version of the system and was for the large part true of the development system. When moving to IIS however, the project was set to run as a Virtual Directory – meaning the website root was no longer the same as the application root. Which lead me to trawl through the entire application tweaking things here and there, just to make it work no matter where it lived. Don’t assume you know were your application will live! It might be any number of little requirement changes that could cause you to have to rethink how you are building your application.

  2. Use ActionLinks for linking within your application
    Doing this will save you a bunch of time and is one of the core supported features of ASP.NET MVC, so why not use it when it’s so simple? There are so many good articles and posts on this, a great starting point is (as always) ScottGu’s, which part way down talks about Constructing Outgoing URLs from the Routing System

    <%=Html.ActionLink("View more details", new { Controller = "Products", Action = "Details", Id=42 })%>

  3. Url.Content for content that is URLs.
    Url.Content is to static content, what ActionLink is to your dynamic pages. If you have any Images, CSS, Script files or basically anything else that isn’t an MVC page, then this little beaut’ is for you! This allows you to negate any issues with website roots and application roots changing – without having to monitor and check any links!

    Before, you may simply have done:

    <img src="/lolcats/longcat.png" alt="To scale" />

    This would have worked until your application was moved from the webroot (Cassini) to a virtual directory (e.g. “/MVCApp” in IIS). If you do the following however, all is solved as it works out the URL and writes that out accordingly:

    <img src="<%=Url.Content("~/lolcats/longcat.png")%>" alt="To scale" />

    Would appear as the below, automagically:

    <img src="/MVCApp/lolcats/longcat.png" alt="To scale" />

  4. Relative links within your CSS
    This is something that isn’t specifically unique to MVC applications or ASP.NET in general. It’s more a good practice / make sure you are aware of guideline.
    When coding stylesheets, you’re often faced with wanted to add background-image’s to them. Without the server-side jiggery pokery that ASP.NET (and the like) allows, you are left with limited choices how to do this. But in reality, the solution is fairly simple. You need to fix two things: The location of your Images and the location of your CSS. It doesn’t really matter where they are, but just that they are fixed (or you have the patience to correct your links should you wish to restructure).

    Images from a CSS can be HTTP, absolute to the web-root or, as is awesome, relative to the CSS itself. This means that as long as all your styles are entirely located within your stylesheet’s and not intermingled with your code, you’re on to a winner. It doesn’t matter which page calls the CSS, whether it be your homepage or one that is 42 levels deep – the links are only ever relative to the CSS page (which you included via Url.Content, right, eh? yeah!?).

    In the following example, the CSS is located within a ‘Styles’ directory directly at the project root.

    .longCat
    {
     background-image: url('../lolcats/longcat.png');
    }

Hopefully these pointers will help someone else, if not, they will hopefully protect against my own stupidity and making similar mistakes again. Feel free to comment below if there are any more thoughts and portability ideas you think I could do with including.

12th February 2010

The Biggest Bits Are The Little Bits

Filed under: Human Factors, Usability — Tags: , , — Alex Holt @ 9:56 pm

There is the excellently accurate sentence attributed to Tom Cargill that goes:

The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.

This (fairly humorous) statement is a dig at all those projects that are developed and that overrun, but with a more than significant amount of truth in it. There can be a number of reasons why the project may not appear on time. Often, it’s because someone is trying really hard to avoid accepting the fact that the Project Triangle exists for their solution. The triangle states that there are always three options: Do it Fast, Do it Cheap & Do it Good – but of the three options, you can only have two. You as project manager have to negotiate with your stakeholders, which of the three are the two most important ones – because there is flying-pig chance that you’ll be able to get all three of them. They aren’t mutually exclusive – but achieving all three is certainly something that is seldom heard of for a project.

I believe these two things are linked. I think that projects overrun because the project early on was “Do it fast & do it cheap”, but near the end and as people start to inspect the system, people (whether it be the Stakeholders, End users or development team) decide that they need to do it well at the sacrifice of doing it fast. This could be argued as bad project management – but in reality, it’s bad Stakeholders. I believe they were correct to concentrate on quality However, they were grossly wrong to have considered leaving it as the third priority in the first place – it should have always been first! Take your pick as to which of the other two is important to you, but unless your project is technically fantastic and the attention to detail is there – then you might not have bothered doing it at all!

Jeff Atwood has eluded to this in the past in response to comments that Stack Overflow would be an easy system to build. He implies that yes, while the functionality would be really simple to replicate, all the little details would be missing, all the little improvements for both technical speed boosts / efficiency savings and for ascetics and intuitiveness for the user. You can spend your time doing 90% of Stack Overflow in 1 week, but then you’ll spend the remaining 90% of time faffing with the little details that will make your site stand out.

These little things can totally ruin your project / website / company, if you do not spend the time bowing before them in homage. There are plenty of website’s out there which don’t do justice to their potential. Websites that for some reason, got to the 90% of the way into their project and implement 90% of the features and functions – but then were put off by the long hard slog of the home straight which is the last 90%. The details beat them into submission! I’m not saying you have to be a designer to produce a good looking site, (it helps and I’d recommend that people get someone on board who specialises in functional website UI design), but if you don’t set your sights too high, then patience and an understanding of CSS will normally do. If you spend this time sorting out all the little things (the font size, the position of your error messages, your link positioning etc), your project will find its bounce-rate significantly reduced (a good thing!) and the general happiness of frequent users will be improved as they don’t have to work as hard to get the same amount of work done as your system is more intuitive.

Strive for perfection, excellence will be tolerated. If you are passionate about your project and you feel that you want to produce the best “whatever” in the world – then make sure you spend your time on the details! It’s sometimes a long hard slog, but it is invariably worth it in the end.

5th November 2009

Quick Start Guide to Theming WordPress

Filed under: Web Design, Wordpress — Tags: , , — Alex Holt @ 8:01 pm

It’s taken a while, but I finally revamped the look of my site. Part of the problem, as always, is coming up with a design I can put up with for a while. I think that this red attempt should be OK for a while.

There a number of good WordPress theming guides out there (the one at WPDesigner.com is especially excellent) , so I don’t intend to replace them and their great detail. This post is merely some simple pointers for those that already know how to create HTML and understand enough about PHP to get by.

Create yourself a design! I’m totally gonna gloss over this part, despite being the major time consuming bit. I’m a big advocate of the multiple stage design process (Image -> HTML -> System Template). Basically – once you have a HTML / CSS version of what you want to achieve, its then time to work on how to get that into your WordPress Blog.

Create yourself a theme directory – this is within your /wp-content/themes directory and should make your theme sound totally awesome. Something like “Totally Rockin’ Monkey Burgers” should be sufficient.

Create your CSS file – Just copy your CSS file to your theme directory and make sure its named stylesheet.css You should also make sure you have something like the following in the top of it:

1
2
3
4
5
6
7
8
9
/*
Theme Name: Totally Rockin' Monkey Burgers
Theme URI: http://www.amadiere.com/blog/2009/11/quick-start-guide-to-theming-wordpress/
Description: Theme creation example.
Author: Alex Holt
Author URI: http://www.amadiere.com
Version: 1.0
Tags: red,white,fluid-fixed-width,two-columns
*/

Copy the PHP files from the Default theme – these act as a great starting point for your adaptations. You can now adapt these to pull together to create your style. They are split into 5 easy to comprehend areas by default. You don’t need to follow this however, you can simply put everything in one big file – though I find code becomes a lot more manageable when split over a few pages:

Index – the glue of the page, it calls the other templates where required. The key lines are:

<?php
get_header();
get_sidebar();
comments_template();
get_footer();
?>

Header – has the top part of your blog that is repeated throughout your site.

Footer – similar to the header, the code that appears at the foot of every page.

Sidebar – your navigation bar. For this, you effectively only need a small bit of code. The ‘dynamic_sidebar’ function calls all the Widgets that are enabled. This then basically generates a load of <li>’s, one for each Widget (these sometimes have nested UL’s and LI’s themselves):

1
2
3
4
5
6
7
<div id="navigation">
  <ul>
    <?php 	/* Widgetized sidebar, if you have the plugin installed. */
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) {}
    ?>
  </ul>
</div>

It is however worth mentioning that in circumstances that there are no Widgets – the above would output nothing but an empty unordered list.

Comments – Just displays the comments (if set to show), below each post. While there are a lot of bits in here, the main bit can be a touch hidden and is signified by a foreach loop within an Ordered List “commentlist”.

19
20
21
22
23
24
25
26
27
28
29
30
31
32
<ol id="commentlist">
  <?php foreach ($comments as $comment) : ?>
    <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
      <?php echo get_avatar( $comment, 80 ); ?>
      <div class="commentmeta">
        <?php comment_type(_x('Comment', 'noun'), __('Trackback'), __('Pingback')); ?>
        <?php _e('by'); ?> <?php comment_author_link() ?><?php comment_date() ?>
        @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a>
        <?php edit_comment_link(__("Edit This"), ' |'); ?>
      </div>
      <?php comment_text() ?>
    </li>
  <?php endforeach; ?>
</ol>

Create yourself a screenshot – it’ll make you feel good and will help you recognise the awesomeness that is your style when you are browsing through the hundreds you downloaded that are all tosh when compared with yours!

And that’s your lot.

As I mentioned, I don’t want to replace what is already out there on the web with this guide. In fact, I don’t the word ‘guide’ as it gets me quite excited and I expect something more dramatic than I’ve delivered. I think maybe prefixed with ‘Quick Start’ however, it might become acceptable… Yes. Yes, that seems not to have got my blood pumping!

Theme designed & built for Amadiere.com by Alex Holt. Powered by WordPress