The best template engine is no template engine.

Another love letter to Processwire. <3

Do you know what a template engine is? Then you can jump directly some paragraphs ahead. For those of you who don't know it I'll try to explain it as simple as possible.

A template eninge is kind of a custom trimmed programming language only containing those stuff you need for frontend development. Here is a quick example  using the popular PHP template engine "smarty":


In this case {$title} would return the page's title. Same with WordPress - more or less - template engine:

 <title><?php wp_title(); ?></title>

In case of WordPress the template engine only contains PHP functions you can use for frontend development. So it's not a really real template engine but it tries to be.

Of course returning the title is an easy example. But what if it comes to conditions? Like: Only show this image if this is a single page?

In Smarty you would have special syntax again. In WordPress you would use regular PHP conditions-syntax.


You probably know the saying "Time is money". It's true. So it's worth to take a look at time in ths case: How long does it take to learn a template engine language?

I think it's like with every programming language: You'll never going to know each command. But after a time you will understand how it works. Even things which seems really strange like WordPress' "The Loop".

In case of smarty you probably would really "only" have to learn it's syntax - but I don't know a popular CMS using Smarty as main templte language. As for WordPress you'd probably have to learn some PHP stuff, too. At least for loops and conditions. Double effort. Great.

Do I really need a template language?


I never understood why CMS' are using template engines which needs to be rendered as the page loads, too. So it costs time to learn the language. It costs time to render the language. And there is no real advantage of it.

What do you suggest?

Well why not just returning PHP variables containing the whole data? Sounds great? Well, it's exactly what ProcessWire is doing. You don't need to learn a new language if you already know PHP. Otherwise you just have to learn it's basics because the ProcessWire way is really easy.

Returning the title would be like:

 <title><?php echo $page->title; ?></title> 

Much more logical, cleaner and flexible. Exactly how I want it to be.


Go download ProcessWire and lt it speak for itself.


Do you disagree with me and know a reason why I should like template engines (or WordPress itself)? Go ahead and tell me @derStadtpirat.

ProcessWire: Best Practice Meta Tags

There are dozens of ways of adding meta tags like title, keywords and description to your website and probaby even more using a CMS. As you may know my favorite CMS is Processwire. So here is the way I'm using it with more or less dynamic SEO meta tags:

Create fields

There are some fields needed for this. The required fields are:

  • meta_title (Text)
  • meta_keywords (Text)
  • meta_description (Text)

Optional fields for a better order are:

  • _meta (FieldsetTabOpen)
  • _meta_END (FieldsetClose, will be created automatically after creating _meta)

Of course you can call them however you want but I'm continuing using this names in this article.

Add them to the template (e.g. basic-page)

As with any field in ProcessWire you have to add them to your template afterwards. I recommend to add them to your "home" template to. Why? I'm going to explain this later.

Added to the end of the template's fields it should look like this:

Insert the Meta Data

If you're now editing a page you should recognize a new tab at the top called "Meta" (or if you didn't add a title "_meta"):

Here you can insert specific meta tags for every page. But what happens if you leave it empty? That's why I recommended to add the meta fields to your "home" template to. Because we're going to use the "home" meta tags as default.

That's everything we have to setup in the backend. Now we need to add some code to the frontend (your template files) to display them:

Display the meta tags

Here is the code you have to add. I think it's self explaining (at least if you're knowing PHP shorthand conditions):

<title><?php echo (($page->meta_title) ? $page->meta_title : $pages->get('/')->meta_title); ?></title>

<meta name="keywords" content="<?php echo (($page->meta_keywords) ? $page->meta_keywords : $pages->get('/')->meta_keywords); ?>" />
<meta name="description" content="<?php echo (($page->meta_description) ? $page->meta_description : $pages->get('/')->meta_description); ?>" /> 

Sorry for the bad redability. Should be more clear after copying it into a text editor.

Weekly Recap

It's sunday again. Time to recap the last week: Of course one of the main topics this week was the WWDC. So the first link is about a new feature of iOS8 and OS X 10.10:

Use your iPhone as webcam
Sounds like a great new addition to me - probably enhanced through the fact that my "old" 2011 Mac's camera is really ... old. And has a extremly poor resolution.

Kick Google Glass from Network
A link Lenny posted on Twitter. Sounds like a lot of fun if you know someone who owns a Google Glass.

Brazil Fourteen
Of course football is another important topic this time because the WM is coming closer. This link contains a beautifully designed play-day overview.

I'm a huge fan of "instant cameras" so this kickstarter project sounds really great to me. You should support it!

Krautreporter (7 days to go!)
A topic I wrote about some days ago is a crowdfunding project, too. The current numbers doesn't look that good. Please support this, too!
Great site to spend some spare time on. I found it today and it's lovely. Unfortunately only american Amazon links :(

CIA on Twitter
The CIA joined Twitter recently with probably the best tweet they could have made.

Kerning on the Web


After kerning is going to be turned on by default in new browser's versions Bram Stein wrote an article in the Typekit blog about what kerning is and how to use it already today with some simple CSS3 commands:

Imagine each character in a string of text has a box drawn around its outer edges. Without kerning, characters would line up at the edges of these boxes. Kerning enables these edges to overlap so the space between each character can be adjusted to be tighter or looser.

CSS: Automatically Add Spaces Between Boxes

If you are a front end designer you probably know this problem: You have to add spaces between every html element like between <p> and <img> or <pre> and <figure> or whatever. It's a lot of code which can be simplified into one line:

.content > * + * {
/* perfect if your line-height is 20px */

What does it do?

It's no magic hidden here. The > means that the following stuff is only for direct childs of .content. The * means every element and the + stand for "following". So in spoken language it would be:
Every element which follows another element (so it's not the first child) whose are both childs of .content should have a space of 20px at it's top.

It's probably not the best way to do it but it works really well for me. You can see it in real life over here: