SVG Image fallback for old browsers

In the process of updating an old site to be mobile friendly, I decided to replace the site’s logo with an SVG, so it will look better on high DPI screens. Old browsers, such as IE < 9 and Android 2.3 don’t support SVG. So we need some way of serving a bitmap image (PNG) to them while serving SVG to browsers that support it.

An excellent article on various SVG fallback techniques, and the pluses and minuses of each technique is SVG Fallbacks on CSS-Tricks. In the comments to that article it is suggested using an <object> tag for the SVG with a <img> for the PNG nested inside as the fallback.

No response for or against was given to this suggestion, so I thought I’d try it out. The code was like this:

Continue reading

Posted on by xoogu, last updated

Useful links for responsive design / mobile web development

I’ve just been in the process of modifying an existing website to work a bit better on mobiles / tablets. The site in question already had a responsive design, being based on the WordPress 2012 theme, but I wasn’t quite happy with exactly how it was displaying.

There were a few websites that proved quite helpful in helping me getting things working as I wanted. I’d like to share them here so I have a reference for similar problems in the future, and if you’re reading this, you may find them helpful too.

Continue reading

Posted on by xoogu, last updated

PHP script to fix server log file with records not in order

Okay, I doubt this post will be useful to anyone else, but I thought I might as well post it since I haven’t updated this blog in a while.

On ‘my’ web server I have some sites that are served by a shared Apache process. This stores daily logs, for one week, rotating the log numbering each day. I have a cron job that runs once a week and concatenates the past week’s logs into a single file, which is then stored elsewhere.

Today I was trying to run awstats to generate stats from the last months worth of logs (I check my sites stats once every month). However, I realised that my cron job was concatenating the daily logs into the weekly log file in the wrong order. This resulted in awstats only picking up the first day from each weekly log, as the rest of the log file had requests with earlier timestamps. It seems that awstats works through the log file chronologically.

So, to get my stats I had to re-order the log files so that the entries were listed chronologically as they should be. To do this I decided to use PHP, mostly just because that is the language I am most familiar with.

Continue reading

Posted on by xoogu, last updated

How to automatically watermark or batch watermark photos using ImageMagick

In this article I’ll share a couple of ways to use ImageMagick to add a watermark to a photo. ImageMagick is a command line program, which is perfect for this job as that means it can scripted.

How to automatically watermark or batch watermark photos using ImageMagick

I use it on my photography website so I can upload original size photos, then the images can automatically be resized and have a watermark added. I won’t go into detail on the image resizing in this article, as I have a feeling the article will already be quite long. But maybe I will cover that aspect in a future article.

Continue reading

Posted on by xoogu, last updated

Justified Horizontal Menu – CSS & Javascript Solutions

Recently I wanted to use a horizontal navigation menu on a website. I wanted the items in the menu to be evenly distributed across the width of the page, but also butting up against each other, with no space between each item. The other requirement was that the spacing between the text of each item should be equal.

Fluid width menu with justified items, each one with the same padding applied
Fluid width menu with justified items, each one with the same padding applied

Same menu on a smaller width screen, demonstrating the fluid sizing
Same menu on a smaller width screen, demonstrating the fluid sizing

Continue reading

Posted on by xoogu, last updated

Optimising MySQL queries – JOIN vs IN (subquery)

When searching for some advice relating to an SQL query I was writing recently, I read some advice that you should try to use JOINs rather than IN with a subquery. I modified the particular query I was working on to use a JOIN instead of a subquery, and lo and behold, it was much faster.

So I decided to try and rewrite some other queries I’d written using IN with a subquery. Re-written to use JOINs instead, they should be much faster. But rather than just blindly rewriting the queries, I decided to run a few tests.

Continue reading

Posted on by xoogu, last updated

Space separated rel values – HTML vs. ATOM

Just a quick note regarding an issue I came across today. HTML allows space separated rel values to indicate link types. I was using this to indicate a URL was both self and canonical, i.e.

<link rel="self canonical" href="http://www.xoogu.com/2013/space-separated-rel-values-html-vs-atom/" />

I was using the same code in both the HTML and ATOM feed versions of my site, but it turns out that ATOM does not allow space separated rel values. So for ATOM you would require two links, like:

<link rel="self" href="http://www.xoogu.com/2013/space-separated-rel-values-html-vs-atom/" />
<link rel="canonical" href="http://www.xoogu.com/2013/space-separated-rel-values-html-vs-atom/" />

Or don’t include a canonical link in your ATOM feed.

Posted on by xoogu, last updated

Differences between windows batch and linux bash shell script syntax

Carrying on from my previous post about using scripts created in Windows on Linux, here are some comparisons to show the syntax differences between Windows batch scripts and bash scripts.

Continue reading

Posted on by xoogu, last updated

Using scripts created in Windows on Linux

A few weeks ago I tried converting a Windows batch script to a Linux shell (bash) script. The syntax between windows and linux shell scripts is quite different, but I also had a problem other than syntax differences.

After modifying the script to use linux syntax (e.g. proper loops instead of labels and GOTOs), I ran the script but it returned the following message:

/bin/bash^M: bad interpreter: No such file or directory

Continue reading

Posted on by xoogu, last updated