logon2 Blog

It’s possible that you’re thinking, “Processing PHP in CSS? That’s plain stinks.,” just from reading the heading. It does stink, but so does maintaining two CSS files, updating your colour scheme manually (or even by sed), changing common dimensions, and all the other crap that goes with static files. Think about it this way - would you build a site out of many HTML files or would you use some kind of template system (like Pretty Smarties)? By now I hope you’re less sceptical. If you’re interested, please read on. (more…)

Now that logon2 hosts quite a few sites that are dynamic and make use of MySQL databases, I decided to implement automatic daily database backup tool. Such a tool gives me peace of mind as well as advantage over any competitors who don’t perform automatic backups. Lomadaba (logon2 Mass Database Backup) is my solution. (more…)

A common website design feature is the inclusion of navigation links (top level or otherwise) in the footer. Often, links are separated by a hyphen ( - ) or a pipe ( | ). It’s very easy to enter these separators in the markup, like so:

<a href="/">Home</a> |
<a href="/about/">About</a> |
<a href="/contact/">Contact</a>

I guess it’s OK to do that, but it’s not really great practice because the pipes ( | ) are not actually part of the content and are only meant for presentation, so they shouldn’t really be part of the HTML. Another problem with this is that it’s inflexible. What if we want more space between the pipes and the links? Do we enter a bunch of “ ”s? That’s ugly^.

We can use the CSS border property to add the separators for us by adding a left-border to each of the links.

“But what about the first link?“

The answer is the :first-child CSS pseudo-selector. It allows us to define CSS properties to the first element of its kind within a container. So in this instance, we can apply no border to the first child. Here’s how the lot would look:

<ul id="footer">
	<li><a href="/">Home</a></li>
	<li><a href="/about/">About</a></li>
	<li><a href="/contact/">Contact</a></li>
</ul>

ul#footer li {
    display:inline; /* so they display horizontally */
    border-left:1px solid #000000; /* our 'pipe' */
    padding-left:1em;
    padding-right:1em;
}
 
/* here it is, the first-child pseudo-selector */
ul#footer li:first-child {
    border:none; /* no 'pipe' before the first element */
}

It requires a bit more coding initially but it’s more elegant because it separates concerns and it’s also more accessible for screen readers and our friendly neighbourhood search engines*.

^ I know, this very site doesn’t follow this site doesn’t follow these practices. I’m a hypocrite!
* FACT

Ran XAMPP, tried to access the development virtual host for Kids On The Rise ( http://localhost:99 ) and got this:

Warning: Unknown([PATH HERE]): failed to open stream: No such file or directory in Unknown on line 0

Some other Fatal error came up but I forgot to copy it, sorry.

The error message is unhelpful but it was pretty easy to fix. I just deleted the .htaccess file from the root and tested. It worked! After restoring a backup of the .htaccess file everything worked. Hooray!

Most PHP programmers would have come across this old chestnut before:
Cannot modify header information – headers already sent by page.php line 42

This can happen when you try doing a HTTP redirect or send HTTP 404, as it can happen whenever you try to send headers once they’ve already been sent. When a user sees this, they are basically left high and dry, often on a blank page. The solution is simple:
(more…)

Pretty Smarties

Lovely Caption Maker

This is the simple PHP template system which integrates Pretty URLs and Smarty Templates. The release is only two months later than I said, but I’ve made the release fairly decent. Here’s a rundown on the system: (more…)

Inconsistent PNGs

Lovely Caption Maker

Have you ever been working on a website and noticed that in certain browsers a background image isn’t blending properly with one of your background colours or another image? This phenomenon occurs in Internet Explorer and it’s caused by metadata in the PNG file itself. There’s a great program that solves this problem without any hacks. (more…)

A recent trend I’ve noticed on some Australian media websites has been evoking my interest for a few months now. Sites like The Age and Fox FM have started overlaying a lovely coloured banner with a caption over feature images. The great thing is, they’re not rendered but glorious SEO-friendly and accessible HTML and CSS. I’m not surprised, however, since The Age and Fox FM have always been trend early adopters. The ABC still beats them, though.

Unfortunately, this effect can’t be achieved without knowing and entering the width and height of an image - making it kind of tedious to implement. After deciding that I’d like to use it with wordpress posts, it was decided that a tool should be built. And then The Lovely Caption Maker was born. Here’s an example of Lovely Caption Maker’s glory: (more…)

In technology, there’s always the goal of making complex and difficult things more simple - this goal has brought about ‘clean URLs’. Clean URLs are website addresses that are easy for people (and also search engines) to read and understand. For example: An interesting article about the Bermuda Triangle might be at www.articles.com/article.php?id=23452 - That address tells us (and search engines) nothing about the article. Using a clean URL, the same article might be at www.articles.com/articles/bermuda-triangle - much easier, right? Well, here is how you can implement this on your website… (more…)

The Problem

While working on an update for Once Upon a Bride’s handmade jewellery website, I had to overcome a certain bug or problem in Internet Explorer that caused images loaded into Loader Components to render incorrectly and scale incorrectly, usually with incorrect width and height. This was occurring after loading about 12 - 15 images.

So instead of loading them all at once, I made it load only eight images, and let the users view a page of eight at a time. The only problem I had was clearing the old thumbnails before loading the new ones. (more…)