Micro templates for rapid web design prototyping and development in PHP

Posted 09/08/2012 by khromov
Categories: Computers, Programming, Technical solutions

Tags: , , , , , ,

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

Common use snippets for Widget Logic

Posted 17/07/2012 by khromov
Categories: Computers, Development, Programming, Technical solutions

Tags: , ,

Widget Logic is a WordPress plugin that that gives every widget an extra control field called “Widget logic” that lets you control the pages that the widget will appear on. The text field lets you use WP’s Conditional Tags, or any general PHP code.

I’ve been using Widget Logic in my WordPress projects for a while now – it’s clean, versatile and I highly recommend it.

Below are some snippets that you will likely find useful when you are building a new site.

Show widget only on specific pages or posts

This example displays the widget only on the page that has the slug example-page

is_page('example-slug')

This is my favourite way of specifying widgets for certain pages, as it works in a similar fashion to how you configure blocks for specific paths in Drupal.

This example displays the widget on pages with ID 1 and 5.

is_page(array(1,5))

is_page() is very flexible and can take id’s, page names, slugs and even arrays with multiple values – see the documentation.

But what about blog posts and attachments?

Use is_single()  instead – see the documentation.

Here is an example that display the widget when the user is visiting a post with the title “About this blog”

is_single('About this blog')

Show widget everywhere except a specific page or post.

This is the inverse of the previous examples, so the first example would be:

!is_page('example-slug')

Note the exclamation point, which inverts the logic.

The second example would be:

!is_page(array(1,5))

Show widget only on front page

Handy for front page-specific summary widgets, calendars, introductions etc.

is_front_page()

Show widget only for a specific post type

An easy way to display widgets for certain post types.

get_post_type()=='post'

Some common post types

  • page
  • post
  • attachment

Show widget based on a WPML language

If you are running a site using the WordPress Multilingual Plugin (WPML) you can use this snippet to only show a widget when the user is viewing the page in a certain language (English in this case)

(ICL_LANGUAGE_CODE == 'en')

There are more useful constants and functions available in the WPML manual.

Combining multiple rules

It’s easy to combine multiple rules with regular PHP logic. This example will display the widget only when the user is viewing a site in Swedish (WPML) and is on the pages with ID 1 or 5:

(ICL_LANGUAGE_CODE == 'sv') && is_page(array(1,5))

Don’t forget you can also use the || (or) operator!

More useful tags

I recommend reading the WordPress documentation on Conditional Tags to customize Widget Logic for your exact needs.

Feedback!

Do you have a useful snippets for Widget Logic? Feel free to post it in the comments!

Using CodeIgniter 2 with SQLite 3 databases

Posted 22/06/2012 by khromov
Categories: Computers, Development, Technical solutions

Tags: , , ,

Note: If you haven’t updated to CodeIgniter 2.1.1 – do so. There is a bug in 2.1 preventing it from working with SQLite databases properly, see the changelog.

The process of connecting to a SQLite 3 database with CodeIgniter isn’t straightforward. You have to use the (built-in) PDO driver and put the path to the database, with protocol prefix, in the hostname parameter, here’s an example:

/application/config/database.php

...
$db['default']['hostname'] = 'sqlite:'.APPPATH.'db/your_database.sqlite';
$db['default']['username'] = '';
$db['default']['password'] = '';
$db['default']['database'] = '';
$db['default']['dbdriver'] = 'pdo';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;
...

This assumes you have your database under:

/application/db/your_database.sqlite

If the file does not exist, an empty database will be created at that location.

After you have connected, you can use the Active Record class normally to query the db, for example:

$query = $this->db->get('users');
foreach ($query->result() as $row)
{
    echo $row->id . '<br/>';
}

Remember that you need to build your table structures first with a tool such as phpLiteAdmin.


Why does the syntax differ when conecting to a SQLite 3 database?

The reason you have to put the database path in the hostname field is the way CI instantiates the PDO object:

system/database/drivers/pdo/pdo_driver.php

...
function db_connect()
{
    $this->options['PDO::ATTR_ERRMODE'] = PDO::ERRMODE_SILENT;
    return new PDO($this->hostname, $this->username, $this->password, $this->options);
}
...

Twenty Eleven Sidebar WordPress theme announcement

Posted 17/06/2012 by khromov
Categories: Computers, Development, Programming

Tags: , , , , , ,

Just put up the project page for my Twenty Eleven Sidebar WordPress theme!

Twentyeleven Sidebar is a Twenty Eleven child theme with a persistent sidebar, which means you will see the sidebar on individual posts, pages as well as media pages, such as for images.

Check out the project page, or get the code from Bitbucket!

DynDNS now aggressively removes active domains from their system

Posted 17/06/2012 by khromov
Categories: Computers, Life

Tags: , , , , , ,

A couple of days ago I noticed that some of my domains stopped working. A bit befuddled at first, I found that all of them were actually CNAME:s for a DynDNS domain I had set up back in 2006. It had always been a “set it and forget it” solution – until now. Still confused, I logged onto my account and found that the domains were gone. Checked the mail and confirmed my suspicion – the domains had been deleted due to inactivity:

What I found really poor about this email was how little warning you got – it’s five days, and then your domains are gone.

“But it’s not a problem”, I thought – I could just register the domains again!

Nope:

Apparently, at some point DynDNS decided that subdomains are a premium. (Unless you like really clunky domain names that start with dyndns.)

I want to clarify that I do not in any way feel entitled to the domains or DNS service I received from DynDNS. However, I do feel their business practice has become shadier and shadier over the years – starting off with limiting the number of domains per free account, cutting off access to domains and now apparently deleting active domains with just a few days notice.

The whole oredeal reminded me of an article which debated that people who do not own their domains are “second-class citizens” of the web. That is, if you rely on domains purchased by other companies or even other people (as with the free DNS service offered by afraid.org) you never know if these domains will be around tomorrow.

Galaxy Nexus video performance tests – does it play 1080p?

Posted 23/04/2012 by khromov
Categories: Computers, Filming, Reviews

Tags: , , , , , , , , ,


If you are a long-time reader you might remember the Samsung Galaxy S / Vibrant Video Performance Tests from a couple of years ago.

Now it’s time for a new phone, and new tests! The Samsung Galaxy Nexus sports a gorgeous 4.65 inch AMOLED with 1280x720p resolution. The Galaxy S had amazing playback capabilities for its time, will the Nexus top it?

Stock player woes

The stock player on the Nexus is very poor, much worse than the one on the Galaxy S. It does show promise by playing h.264 in both 720p and 1080p in MKV container (albeit without sound) but there is no support at all for SD content (divx/xvid).

Video below:

Without sound, there’s not much functionality here, let’smove on!


MX Player to the rescue!

MX Player is a free (ad-supported) video player available on the Android market. It allows you to harness the power of the included hardware decoder and use the CPU (a.k.a “software”) decoding for codecs that are not available natively.

Check the video below for playback tests:

Using this player, almost all formats that are available today can be played back – even 1080p content works great, as long as it doesn’t have a DTS audio track. I could never make DTS work properly, not even in 720p mode. If anyone has gotten this kind of container configuration running, let me know in the comments!

The showdown in table form (MX Player):

Video Container Audio Resolution Result
xvid avi mp3 SD OK
xvid avi ac3 SD OK
h264 mp4 AAC 720p OK
h264 mkv AC3 720p OK
h264 mkv DTS 720p Only plays in S/W
h264 mkv AC3 1080p OK
h264 mkv DTS 1080p Crashes
H264 (High bitrate) mkv AC3 1080p Crashes

Conclusion

While the stock player is a step down from the Galaxy S, the playback capabilities with third party software, especially the ability to play back 1080p h.264 files is a step up from the last generation. HD content simply looks great on the Nexus!

Further reading

If you speak Swedish you are in for a real treat – Swedroid has an amazing in-depth review of the Nexus. Highly recommended reading!

Minimal server online status checker (HTML/JavaScript)

Posted 07/02/2012 by khromov
Categories: Computers, Development, Programming, Technical solutions, Tutorials

Tags: , , , , , , , , , , , ,

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!