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":

<title>{$title}</title>

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.

Time

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?

No.

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.

Tl;dr

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.

http://supercode.co/s/4dc

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.

http://supercode.co/s/4d9

50 Shades of CSS3 background-size

Back in the days when CSS3 was new and really exciting I discovered the "background-size" option. It's a really greatthing and probably important to at least everyone who's builing retina-ready sites. But there are a lot of more interesting ways to use it. Here are my favorites:

background-size:cover;

As you can see in these two example pictures the whole box is covered by the background without changing the proportions. This means that you'll probably never see the whole background because there is always a part which is cut off. On devices with "land screen" orientation you probably parts of the upper and/or the lower. On "portrait" orientated devices you're more likely to see the left and/or right side being cut.

It's like a mix between "100% auto" and "auto 100%" according to which orientation is used.

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:cover;
}

 

background-size:contain;

With "contain" the whole background image is always visible. No cuts and no change of proportions. I thinks it's clear and one example image is enough.

It's like a mix between "100% auto" and "auto 100%" according to which orientation is used.

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:contain;
}

 

background-size:100%;

With "100%" it's finally getting more interesting. "100%" is the same as "100% 100%" which means 100% width of the box and 100% height of the box is covered by the image. With this set your background image will probably neither remain it's original proportions nor size. But nothing will be cut of, too. 

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:100%;
}

 

background-size:100% auto;

Now "100% auto" is really interesting - I discovered it only not that long ago. It stands for 100% width and auto height. So your background image will remain it's original resolution. But nothing will be cut of (if your screen height is not to small), too, at any size. It's great for designing responsive websites where you want to have something always in 100% at the top and height doesn't matter.

In this example it's used in combination with "background-position:top center":

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:100% auto;
}

 

background-size:auto 100%;

The opposite of "100% auto" is "auto 100%". It does the same thing but uses full height instead of full width. So it resizes you're image to always be in full height without changing proportions. Never needed this but there are probably some use cases for this, too.

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:auto 100%;
}

 

Others

Of course there are a lot of other ways to resize your background image (at least 45 others). Like using fixed width pixel sizes or not 100% but 70% or 13% or whateever. In combination witth multiple background multiple positionings, etc. it looks like there is an infinite amount of ways to use it. So have fun with it and I hope this article helped you.

P.S.: Here is something to play with: http://jsfiddle.net/e9w4y/

http://supercode.co/s/4c7

LanguageInstantInstall

There is one thing I always loved about Textpattern:
The language handeling.

You just had one list with all available languages and an "Install" link. After you clicked the link the language was downloaded, installed and ready to use.

ProcessWire handles language install a little different: There are language repos with json files containing the translated strings in it. To install a language you would have to create it manually (insert a name, add a title, etc.) and upload the language files afterwards. That's not what I would call "simple". So I made a module: LanguageInstantInstall

It adds this great Textpattern feature to Processwire and makes it a little easier to install new languages. Read more about it.

I did some bugfixes on it today and uploaded it finally to GitHub. Maybe it even becomes a core module - who knows.

What are the features you love most of your CMS? Tell me @derStadtpirat.

http://supercode.co/s/4c1

Capture Screen Casts as .gif with LICEcap

There is nothing better than a screen cast if you try to explain something. But sometimes it's just a little thing you would like demonstrate. A little interaction. Taking and cropping and uploading a video would take a unpropotional amount of time. The solution is called: LICEcap.

I know that you love .gifs. I guess we all do. These little animated images everywhere in the world wide web. But a .gif doesn't have to include a cat. Or afunny moment. A .gif can also be used as something ... productive.

Look at this video gif for example:

It took like one minute from taking to publishing it. And it was really easy.

LICEcap

The only thing you need to do is download LICEcap (it's free).

After downloading and moving it into your application folder you can launch it.

A border is going to appear - like in the gif above. Just move the border to the place you want to capure and resize it to fit your needs.

Now press "Record", choose the directory you want to save it into and wait three seconds (a counter appears on the bottom left corner of the app). Afterwards just do what you want to demonstrate and press "Stop".

That's all. Have fun with it!

http://supercode.co/s/4bc