Whats this rant all about then?

First of all let me start by saying that this problem is something that I’ve noticed a lot recently. While I work with various ecommerce and content management platforms, I find myself with my fingers in the templates. When you first install a blog, shopping cart or anything else where the software is off the shelf and you need to create a design for it there are always crap templates.

Very rarely is the initial template of such a good quality that I would consider putting it into use, and even then, pride over my work prohibits me from letting my client’s store or homepage look like thousands of other shops and blogs out there.

A good ecommerce one is Interspire. It has a great initial template. Wordpress has a nice starting theme too.

So, we make our own templates?

Yes, and I make templates for various things, and you wouldn’t believe the crazy template engines I’ve used. Some of them are so simple they take minutes to learn, give no real control over the flow and are purely visual and some are so fiendish and contrived that they take months to truly master and let you control all aspects of the output of the page.

Some examples?

Actinic:
This offline Ecommerce cart has a very clever PHP based template system, with nested iterating elements and a very capable editor. It lets you edit in dreamweaver (which i don’t really use) and creates html as an output for online consumption. The templates have their own built in ‘what if’ known as ‘blocks’ that are easy to understand (for a programmer that is) and you can use PHP inline if you want to. This, I like. Its strong, but not too complicated. Everything is controllable, I control all aspects of the template.

Interspire:
Interspire has a good template engine too. Its dynamically compiled as you save, since its online, and its also based off PHP. The editor you get in the package is actually not so good. In fact, its broken with Safari (I’m a Mac user). It uses neat placeholders to represent deeper nested blocks, that build parts of the page. Some of the things that it puts in the templates are hard to locate in the settings, and i’m pretty sure some of them are hardcoded. This means i’m not totally in control of the output. This can be frustrating if you cant find a stray <br> thats screwing up your design.

Aspdotnet store:
from what I have been working with this week, I’ve found this template engine to probably be the most difficult. It’s written in asp.net and uses some complex xml to draw the various elements. Not for the feint of heart. It also has lots of hardcoded junk in there that I have to root around to remove. Which brings me to the final point…

Separating Content from Design (and why we need to do it)

When I write this markup in a page:

<font size=”16px”><i><strong>Hello world</strong></i></font>

Doesn’t it just make you cringe? No? well, perhaps we should look at why its a very bad idea, so you can understand more.

Lets just look at the *BEST* way to do this and then we’ll talk about why we need to.

<style>
.test
{
font-size: 16px;
font-style: italic;
font-weight: bold;
}
</style>
^ This part is written by the designer

<span class=”test”>[!title!]</span>
^ This part is initially written by the programmer responsible for the CMS.

“Hello World”
^ This part is written by the end user.

Hello World

Really, its not about changing a single style and having the luxury of this reflecting across your entire site. Our CMS will probably handle that. This is about making sure that as an application designer, you don’t force any aspects of what you feel is right and works well onto the designer of your skins, or even worse, the end user. Because I know that the designer will pull out all the wires and make his own template, and the end user will not understand why he cannot make a certain passage of text a certain colour or size.

This isn’t a lesson in css. I know you know how that works. This is about designers of software and templates today, insisting on using things like breaks, paragraphs, horizontal rules and other content related markup in template engines, denying you the freedom to make your own choices about what goes into the templates and how it should be arranged. ALL content should be inside layout-less containers (most likely divs) that can be visually styled and shaped how you want it. There are very few excuses with respect to web software nowadays that mean design must be included in the structure. Tabular data is one of them.

If you are in the position where you are designing an online application, be it a simple blog, or anything else where you are generating content that can be themed or styled, please, never confuse the difference between content and design. Don’t include any fluff that the designer cant edit, and make it easy to theme.

I still find some templates in very modern applications that break these rules, and the upshot is a sad one. I need to delve around in the source code until i find that arrant <br> or the badly thought out tables with too much cellpadding.

Luckily, web standards are forcing the web into a very neat space where most people follow these rules, but there are some perfectly good programmers, that are rotten designers, and some awesome designers are the worst programmers ever. So, lets not tread on each others feet shal we?

First of all, I suggest you watch this video.

http://www.webhooks.org/

It’ll explain a lot why webhooks are pretty fabulous. I’ve been trying to implement them recently in one of my own projects. I want a way to take a subscription payment for a web-service. The payment provider I have chosen is Recurly. This service has a payment page, very much like PayPal and special tools focused on management of subscriptions. Its pretty slick stuff. This was the first time that i’d encountered webhooks. After they subscribe to my service, their server sends a _POST request back to a my server, loaded full of xml related to the actions performed.

The one I’m looking for is ‘They paid and its all gravy’. This means i can activate their subscription.

At some point they might stop paying. At this point (any point in the future) the Recurly service will fire off another webhook at my server, letting me know that its not gravy. Behind the scenes, their account is automagically canceled.

The idea behind webhooks as explained in the video is a nice and simple one. So simple in fact that people have trouble understanding it. It allows the web to plug into other parts of the web. It allows completely seperate services and ideas to talk to each other, in a timely and smart manner.

Overall, its gravy.

Well, I guess it worked then

Download FMenu for Mac – Menubar item provides Growl notifications of Facebook events. MacUpdate Mac Software Downloads.

I’m always frustrated that growl does not notify me when I get facebook things happening.

Well, if you’ve got OSX, then you can use this combo of apps, Growl, and FMenu.

Super useful.

Why cache content?

Sometimes, when you are creating custom solutions in PHP, you don’t have the luxury of speedup caches in Ecommerce and CMS frameworks. The problem is that people arent always experts in database design, and SQL, so pages with messy queries in them tend to load slowly. This can lose visitors interest, and if its ecommerce related, sales.

The idea is simple. Only query the databases when the content changes. If the same content is going to be fed out all the time, then why would you waste your time re-building that content, every time something hit your page?

It’ll save you money if your page gets hit a lot, and it’ll make people happier when they get your page quicker.

So, we keep a copy of the generated page first time its looked at. Using the full url as a reference, we keep them, and when someone asks for the same page again, we give them the cached copy. It’s much faster to do this.

So, lets get stuck in

Create a file called “cache_header.php” containing this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<?php
 
$starttime = microtime();
$startarray = explode(" ", $starttime);
$starttime = $startarray[1] + $startarray[0];
 
// Settings
$cachedir = 'cache/'; // Directory to cache files in (keep outside web root)
$cachetime = 600; // Seconds to cache files for
$cacheext = 'cache'; // Extension to give cached files (usually cache, htm, txt)
 
// Ignore List
$ignore_list = array(
'domainname.co.uk/ignorethis.php',
'domainname.co.uk/ignorethisaswell.php'
);
 
// Script
$page = 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; // Requested page
$cachefile = $cachedir . md5($page) . '.' . $cacheext; // Cache file to either load or create
 
$ignore_page = false;
for ($i = 0; $i < count($ignore_list); $i++) {
$ignore_page = (strpos($page, $ignore_list[$i]) !== false) ? true : $ignore_page;
}
 
$cachefile_created = ((@file_exists($cachefile)) and ($ignore_page === false)) ? @filemtime($cachefile) : 0;
@clearstatcache();
 
// Show file from cache if still valid
if (time() - $cachetime < $cachefile_created) {
ob_start('ob_gzhandler');
@readfile($cachefile);
ob_end_flush();
exit();
 
}
 
// If we're still here, we need to generate a cache file
 
ob_start();
?>

Then create a file called “cache_footer.php” containing:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
 
$endtime = microtime();
$endarray = explode(" ", $endtime);
$endtime = $endarray[1] + $endarray[0];
$totaltime = $endtime - $starttime;
$totaltime = round($totaltime,5);
 
echo "<!-- This page took $totaltime seconds to generate -->";
 
// Now the script has run, generate a new cache file
$fp = @fopen($cachefile, 'w');
 
// save the contents of output buffer to the file
@fwrite($fp, ob_get_contents());
@fclose($fp);
 
ob_end_flush();
 
?>

in the same folder, create a folder called ‘cache’ and set it to writable by the php, using an FTP client:

Screenshot of permissions

Finally, implement the cache on your dynamic page:

1
2
3
4
5
6
7

<? require('cache_header.php'); ?>
 
<?
//this is dynamic php
?>
 
<? require('cache_footer.php'); ?>

This effectively creates static html of a dynamic file and saves it to the cache. The cache is used if the same url is requested within a certain timeframe. This means that database intensive popular pages load instantly.

Good eh?

The real problem with this system is that it does not pay any attention to pages that are dynamically different due to logins and sessions.

Don’t randomly implement this on any old php software. this is a bare bones example. In order for this to work in a complex example where individuals with different credentials are likely to see different pages, you’d need to have the system aware of their credentials, and display a fresh version of the page, based on the presence of an individual. This is NOT covered in the example, and it assumes that every user gets the same page.

What I tend to do, is leave the main page uncached, and any elements that are custom to the user and experience uncached.

The included elements i will cache. For example, my popular products block, i will cache. When they are pulled into the page by the server, the server merely includes a file, instead of drawing from a database.

Overall this hybrid approach isnt as speedy as caching the entire page, but its very close and as a performance versus benefit tradeoff, it works very well indeed.

Conversations About The Internet #5: Anonymous Facebook Employee – The Rumpus.net.

Fascinating interview with a Facebook employee outlining some of the more interesting practices behind the scenes in Facebook HQ.

I’m jealous really. I’d love to go for a drink and be interviewed in the middle of the day and talk all about my clients.

I promised I’d never start a blog.

Its funny really, the way things turn out. I never really thought i’d ever start one, I always thought that its a very sad thing to do. Chattering on about you’re exploits and adventures. Recently, I’v been doing a lot of interesting things, with my job, my skills and just in general. So, here on this blog, i’ll be mostly talking tech, posting interesting code, talking about gadgets and just letting it all out, before I explode.

Wouldn’t want to explode.

That would be bad.