Micro templates for rapid web design prototyping and development in PHP

When you are developing a new web site, it’s common to start by writing a static HTML version that will later be converted to a theme in the CMS of your choice. It takes away the mental overhead of adhering to theming standards and lets you focus on the client-side technologies (HTML, CSS and JavaScript) unhindered.

When working on an early static version of a site, I often find that I do miss simple templating, especially for listings (be it news posts, sidebar banners or anything that needs to be “filled up” to make the page look as it would in production) – So I set out to look for a clean, simple and minimal way to introduce templating into static projects, using PHP.

I found this post on micro templates by Brad Touesnard that perfectly suited my needs, but felt that it was missing some polish and examples for people to fully utilize it. I wrote a couple of examples for common tasks such as displaying lists and nesting templates, and released it as a library that you can use in your projects to enable faster prototyping and development.

Live demo

Click to see a live running demo.

Download

Click to download the latest version, with examples.

Bitbucket

Click to see the Bitbucket repository

Usage

Download php-microtemplate and put it on a php-enabled server, navigate to the php-microtemplate folder in your browser and look at the examples.

If you want to use it from scratch, just include microtemplate.php at the top of any php file:

<?php
include_once('microtemplate.php');
?>

Add an empty templates folder, so the directory structure looks like this:

Now you can use the t() function to display templates (which are just PHP files) from your templates/ folder, for example this snipped will display the content of  templates/header.php:

<?=t('header')?>

You may optionally pass a second parameter that will send a variable or array to the template (to be used as $v inside the template), and a third optional variable that can set the folder path where the function will look for templates, which is useful if you prefer a nested directory structure for your templates.

Prequisites

Short tags (short_open_tag) need to be enabled in your php.ini

Minimal server online status checker (HTML/JavaScript)

Starbuck, noooooo!

Above is an example of a nifty server status script I have been using in a recent project.

Here is the base code for monitoring a web server:

<img src="http://site-to-check.com/online.png" alt="status" onerror="this.src='files/offline.png'" />

The setup is:

• An online icon (online.png) on the remote server you want to see the status of.
• An offline icon (offline.png) on the server that is going to show the status page.

If the image on the remote server fails to load, the onerror event is triggered and the javascript rewrites the image tag to show the offline image. You can use relative or absolute paths for the offline image. This snippet is fully compatible with all major browsers, including Internet Explorer down to version 5.5!

Demo
Click here for a demo.

Resources
Below are the images I use, found on Clker, an excellent online clipart resource.

Online
Offline

Participate
If you find this useful or have any suggestions for improving it, feel free to write in the comments!

PHP function for obfuscating e-mail addresses and phone numbers using Javascript.

Update 2012-12-23

The technique below is now available as a WordPress plugin. Check out the Email Obfuscate Shortcode plugin!

Here’s a short snippet that I have been using in various PHP projects to protect e-mail addresses and phone numbers against being harvested for spam purposes. It uses Javascript to scramble some text and output it as a self-contained piece of Javascript. It’s compatible with all major browsers (and IE5.5 and up). The idea is based on this ruby snippet, so head over there if you want to read more about the way it works!

safe_text() snippet

function safe_text($text)
{
    if(mb_detect_encoding($text, 'UTF-8', true))
        $text = utf8_decode($text);

    $ret = '
<script type="text/javascript">// <![CDATA[
                    var t=[
                ';
    $chars = str_split($text);

    $enc[] = rand(0,255);

    foreach($chars as $char)
    {
        $enc[] = ord($char)-$enc[sizeof($enc)-1];
    }

    $ret .= join(',',$enc);
    $ret .= '
                ]; for (var i=1; i<t.length; i++) { document.write(String.fromCharCode(t[i]+t[i-1])); }
// ]]></script>';

    return $ret;
}

To output the Javascript anywhere (it’s entirely self-contained), simply run:

echo safe_text('bob@examplecorp.com');

Update: Thanks to Fredrik for a fix that makes this function multibyte safe! It now also works with special characters like å,ä,ö and similar.

Tinfoil Tom Series – Episode 1: Securing your web browser

“What’cha lookin’ at?!”
(Thanks to Sarah for this beautiful depiction of paranoia!)

Hi and welcome to the “Tinfoil Tom” series that I intend on running on this very blog. This series of post will be dedicated to end-user computer security – for the slightly paranoid. So it seemed appropriate to start with what you’re doing at this very moment – that is, surfing the web! (Whatever else you were doing is but your own business, in the spirit of tinfoil hats, paranoia and all.)

This guide is first and foremost directed at power-users, but it is written in a way so that (hopefully) anyone can follow it without problems.

The web browser
Try asking someone about their web browser preference and you’ll notice that many people would rather bite your head off than consider an alternative one. That being said, according to me – the power-user browser is Firefox. Opera is not far behind and may very well excel in some categories, but with the grand focus on security, the enormous community and the perpetually growing add-on library that all Firefox users can enjoy, it’s simply unbeatable, and so it will be a prerequisite for this tutorial.

With its out-of-the-box configuration Firefox is one of the most secure browsers, but we won’t stop there! To make your experience even safer – read on for some useful add-ons.

Added security
Here are some great add-ons that will help in tightening your browsers security.

Adblock Plus

Before and after shot. Unfortunately, some of that heavily
appealing “bling-bling” disappears together with the ads.

Whilst not technically a security add-on, Adblock plus make practically all ads on pages disappear, and in such way makes you less targetable to third-party exploits such as XSS attacks, not to mention those bastard animated smileys. *shivers*

Using Ad blocking software has come under heavy fire lately, with many ad-financed sites expressing heavy criticism towards the users, some sites have even started to reject users with ad-blocking software. Luckily, the number of these sites so far is very small, and let us hope it doesn’t spread. One could probably spend a whole series of posts just discussing the moral aspects of ad blocking (Which according to me has heavy parallels to downloading or TiVo‘ing TV shows, effectively skipping the commercials.) but I’ll leave it for another day.

Get Adblock for Firefox here.

NoScript

Evil script is evil.

Before you install this add-on, you should be aware of the fact that breaks almost all modern websites because it interferes (or rather completely shuts off) JavaScript support unless you specifically enable it on a per-site basis. But it also stops a lot of third-party homepages from running scripts and makes a lot of other security improvements under the hood. Although I don’t recommend this add-on for normal users, power users who often visit the same set of homepages may benefit greatly in terms of increased security – this add-on will truly make your browser an impenetrable fortress.

Get NoScript for Firefox here.

TorButton

Just watching that onion makes my eyes tear up… with laughter!

TorButton is actually a quick proxy gateway to Tor, an online darknet-like anonymization effort, but because the Tor software acts as a standard HTTP proxy, we can use any proxy server in its place, and because the TorButton add-on features many security tweaks, some similar to NoScript, even running it through a transparent server on your own computers adds security, and as far as I have noticed, TorButton breaks much fewer websites and barely requires any user attention. The only problem might be the cumbersome task of properly setting up a proxy server, but for Windows I can recommend CCProxy which I use myself. (Demo version with some non-timebased restrictions, although works fine for our intentions.)

Get TorButton for Firefox here.

Coming up!
In the next episode of the Tinfoil Tom series we will be discussing laptop security, secure file deletion through wiping and file recovery.

In other news…

Randomly speaking of video game soundtracks – the classical Unreal Tournament Score is really such a pearl. Fantastic and surprisingly mellow soundscapes with a hint of almost organic roughness. I’m pretty certain it isn’t being sold anymore (I think it was only included in the special editions to begin with.) but I found a mirror, let’s hope it stays up!