Scalable and Modular Architecture for CSS

Scalable and Modular Architecture for CSS:

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There’s no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It’s an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?!

Creating a Stacked Paper Effect in CSS3

Replicating a stack of paper is a common design found on the web; it’s an easy way to make a design a little less harsh and digital by giving it an “analog” look. For a quick example, take a look at the “Chapters” WooThemes WordPress theme.

screenshot of the chapters theme, showing the stack of paper effect done using images

In the past I would have used a couple of wrapper divs in HTML, and some background-image CSS to get a vertically expandable (but probably fixed-width without a lot more work) content box. However, with the improvements in CSS3, along with rapidly improving browser support, I wondered if it would be possible to make a similar – and more flexible – effect without images. Continue reading

Official Google Webmaster Central Blog: Pagination with rel=“next” and rel=“prev”

Much like rel=”canonical” acts a strong hint for duplicate content, you can now use the HTML link elements rel=”next” and rel=”prev” to indicate the relationship between component URLs in a paginated series. Throughout the web, a paginated series of content may take many shapes—it can be an article divided into several component pages, or a product category with items spread across several pages, or a forum thread divided into a sequence of URLs.


I’ve been wondering why they haven’t been doing this for the last 4-5 years…

The Joy of HTML

The beauty of web development is that, ultimately, the code behind it is simple. Yes, web apps have taken leaps and bounds over the last few years, and are capable of so much more than ever before, but lets face it – we’re not exactly writing DNA sequencers. Yet.

It frustrates me when I find someone has made life difficult for themselves or the person who will inherit their code, by using the wrong tool for the job. I’m not claiming to be a saint here either – I often look back at some of my own code and shudder (it helps keep me right in the future!).

Consider the following snippet, from the View (presentation) file of an MVC app I inherited:

	echo "<h1>$category</h1>";
	echo "<h3>$company ($name)</h3>";
	echo "<p>";
	echo "$address<br />";
	echo "$town<br />";
	echo "$city<br />";
	echo "$post_code<br />";
	echo "$phone<br />";
	echo "$email<br />";
	echo "</p>";
	echo "<br />";
	echo "<br />";

PHP needs to be used to output the data passed from the Controller, yes, but there’s no need for it to be outputting the HTML too. Let HTML itself worry about that!

	<h1><?= $category ?></h1>
  		<h3><?= $company ?> (<span><?= $name ?></span>)</h3>
			<span><?= $address ?></span>
			<span><?= $town ?></span>
			<span><?= $city ?></span>
			<span><?= $post_code ?></span>
			<span><?= $phone ?> </span>
			<span><?= $email ?></span>

I don’t know about you, but the HTML-based version above is easier to follow and spot coding errors. No doubt someone will point out there’s more HTML tags/bytes in this example than the first, but that is because I coded it with semantics and microformats in mind; add in the right classes and you suddenly have a hCard.

Possibly more importantly in my mind, the HTML example is easier to follow for someone who isn’t PHP literate, like many front-end designers I know.

I’m picking on this example as it’s the most recent I’ve come across, and the first to come hand. It’s not the first example I’ve come across, it won’t be the last, and it’s certainly not the worst!

Pure, simple HTML can be a wondrous thing. Lets try not to spoil it by abusing it with our fancy server-side languages. K.I.S.S!

Accessible, Unobtrusive New Windows with jQuery

I loves me some jQuery – without it I probably wouldn’t write any JavaScript at all (seriously, I hate the stuff). Anyway, today I needed to add some “open in new window” links to an internal application using jQuery. Being the Standardista I am, I wanted to make it a)Accessible, and b) Unobtrusive . If the user has JavaScript disabled (it happens, even on “controlled”, intranet environments), the link should just go to the new page anyway — new window be damned.

My first attempt (below) didn’t work as expected. The following code takes all <a> tags with a class of “newwindow” and applies an onclick event to open a new window.

            var w =$(this).href(), 'newWindow', '');
            return false;

Nothing would happen with the above, because of the return false;. Removing return false; would open a new window, but also send the opening window to the new page. In the end, the following worked the way I wanted:

            var w = newWindow($(this).href(), 'newWindow', '');
            return false;
    function newWindow(url, wName, opts){
        w =, wName, opts);
        return true;

Basically the “heavy lifting” was moved to a seperate function. It’s slightly longer to type, but not exactly finger-breaking stuff. No doubt some bright-spark could tell me an even betterway (feel free!), but this’ll do for now.

In the Grasp of the Beast

I’ve finally taken my first steps with ASP.NET. I’ve only done some basic research and examples and all I can say, is that it’s one f*cking powerful choice for developing web applications… It’s so far ahead of vanilla ASP that it’s terrifying. It’s great being able to use another computationally complete language. ASP.NET is so much faster as well.

Shame that it costs a lot to actually roll out anywhere. Your average Windows Server license doesn’t come cheap and IIS is pretty much the only way web server that works. Neither are most of the tools cheap. Naturally, the ideal way to develop with .NET is with Visual .NET Studio (megabucks) and use SQL Server (again, megabucks) as the backend.

However, there is an alternative. Actually, there’s 2 – but I can’t get Dreamweaver MX to connect to any databases when coding .NET pages, so I’m discounting that. Besides, the code it generates looks a bit bloated. So ignoring DW MX, the alternative is The Web Matrix Project.

Web Matrix is free. Despite this, it comes from Microsoft. Despite coming from Microsoft, it’s actually a well thought out and rather good program. It’s sorta like FrontPage for .NET (don’t let that put you off!!). It features WYSIWYG design view – which I must say that I’ve never used – that allows you to drag and drop server controls into your page. It also offers code views so you can type everything in directly. What’s really nifty, is that it has 2 code views – one for coding the (X)HTML and the other that displays only the server side code. It also comes with a compact personal web server so that you can test stuff locally without shelling out for a Win Server. All in all, it’s a dream for those of us that are cheapskates!

So that’s the coding environment sorted out, but what about the backend? Well, you could use XML, which is treated exactly like any other database. However, I dunno anything about using XML with .NET at the moment, so I’ll skip that. So what’s left? Well, Access is the one that most will tell you to use. But I hate using Access. It comes from having to use it at work. So I went down a route that some said was impossible, and others said was difficult. I say pfft to them, cos it was a piece of pish. So what am I using for my .NET backend? MySQL over OLEDB.

Putting a Microsoft programming technology alongside an open source database solution doesn’t quite sit right in the brain. But it works, and works really well I might add. What’s more, because of the nature of OLEDB in .NET, I can pretty much use any database by only changing the connection string.

So now that I have my development environment, I guess it’s time to actually delve deeper into the murky depths… I guess that’s my project for the holidays sorted then.