On Backup Strategies – World Day for Audiovisual Heritage

On 27 October the World Day for Audiovisual Heritage is celebrated. The UNESCO originally chose that special day to raise of awareness of the importance of preserving recorded sound and audiovisual documents such as films, sound and video recordings, radio and television programs as a part of the cultural heritage.

Why you need a Backup Strategy

Today many much of human kind’s audiovisual heritage is digital – and instead of calling it ‘preservation’ probably the more common term would be ‘backup’. So today the world does actually need working Backup Strategies for it’s cultural heritage. And somehow everybody know, that basically today everybody needs a working Backup Strategy to keep all those files safe we are gathering and producing today.

The loss of data can be a dreadful experience. The work of weeks and months just disappears, memories are suddenly gone, be it digital music collections or family photos – nobody really wants to lose those files. But installing a working backup strategy can be dreadful too.

If it’s ‘just’ a hard drive crashing, chances are, you find somebody who can actually recover those precious files. But dealing with theft, fire and flooding is a totally different game – then the data is most likely just gone.

Of course sooner or later also every web-designer and every web-developer has to develop his/her own strategy, how to deal with the problem. Depending on how you’re working you’ll have a copy of the most important project files online / on the webserver anyways – but still: having a working backup strategy is a must. In this post I’ll tr to draw a picture of my backup strategy – hoping that others my get inspired to start thinking of theirs.

USB-Sticks and CD-Roms

I once had to learn it the hard way, that keeping a backup on one (ONE!) CD-Rom is actually not a good idea. Since then I do consider CD-Roms and USB-Sticks not to be an option for keeping files safe. The risk of data loss is just too high – and there is also the risk that the data may fall into the wrong hands. So for quite some years I haven’t been using CD-Roms any more – and USB-Sticks are only used to actually get files from A to B.

Backups through Time Machine

Mac users are probably well aware of Apple’s backup tool Time Machine. A neat application that keeps an updated copy / backup of your computer for the rainy day. Or actually not for the rainy day – but in case your hard drive crashes, you most likely still have a bootable backup of your machine. Which is great. But it won’t help you in case of theft, fire or flooding. Chances are, the thief, the fire or the flood would just also take the backup drive.

Local Backups: keeping it simple

We are currently working with a rather large backup disk that is basically capable of storing all different the directories of the different computers that we really want to keep: work directories, photos, music etc. We do work on Apple computers – however but for backups we don’t use Time Machine. Instead we (still) use the good old work horse Carbon Copy Cloner. We have set up various scheduled backup tasks – and on a regular basis all the important files are copied to the backup disk.

The backup disk is dedicated to do just that – backups. No other files are stored on that drive, but backup files. This is an important detail since once you star mixing things up, chances are, that in the end you don’t have a full backup. Anyways.

However, having just one backup disk is (of course) just slightly better than having no backup at all – so we do have a backup of the backup disk. On a regular basis the backup disk is connected to an identical hard drive and we do a full backup of that backup disk. The second backup is then kept in a physically (and geographically) different place – the only way to avoid data loss in case of theft, fire and flooding.

Backups of websites and web-databases (mysql)

When looking for a web hosting service, one should also always consider looking at the potential web host’s backup strategy. Many hosting providers work with redundant systems – which means that basically once the webserver goes down, there is a second system jumping in.

Redundant systems are a good idea – but of course you should not rely on redundant systems as part of your backup strategy. The larger, the more complex, the more popular a website gets, the more important it is to have an actual working backup strategy in place.

So the least you can do is to download a database dump along with all the files on your webserver either manually, or automatically. This may sound a bit ‘cumbersome, but it is probably still the most reliable method. Making a manual backup you know exactly what you saved and when you saved it. In the long run however you will probably want to automatize this process.

Automatic Backups Solutions for WordPress, Drupal, mySQL

For content management systems built with either WordPress or Drupal there are various tools you can use to run automatic backups of your website. Actually there is a sea of different options, and it would be just too much for this article to start comparing the different options. Instead I’ll just list two different tools – the two tools I currently use on a regular basis. In the end everybody has to find his/her own backup tools and develop his/her own backup strategy.

  • Drupal: Backup and Migrate
    The Drupal module Backup and Migrate is probably the most popular backup tool for any website that runs on a drupal powered CMS. Already the name suggests its power: you can backup complex websites and even migrate them to a different server. The module offers ‘everything’ from a simple point-and-click instant backup option to complex scheduled backup tasks.
  • WordPress: WP-DM-Backup
    The WordPress-Plugin WP-DM-Backup or actually “WordPress Database Backup” is a rather rudimentary backup tool. You can look at the plugin as a comfortable wordpress interface for making database dumps – with a functionality similar to what phpmyAdmin has to offer. You can then either download the database dump manually, or set up a scheduled task for making dumps and sending them to you by email. You will however still have to download all files through FTP manually, to have a complete backup of your website – but at least with smaller websites that should not be too complicated anyways.

Basically a backup can only be as good as the method, the tool that you used to generate the backup. An easy to use solution is absolutely worthless, if the backup is not working. Or to put it this way: what do you need a backup for, if everything is lost anyways? So whatever approach you decide for – you should also check, if the backup is actually working.

On the fly website backups

Last but not least I’ll point out a backup toll, that is actually not a backup tool. But it recently helped me saving a client’s website from getting lost forever. One evening a client called me and told me, that he had a major misunderstanding with his previous webhost – and that one of his websites was on the brink of getting deleted. The ‘domain termination procedure’ had already started and within the next couple of hours the webspace / the website would be deleted.

I wasn’t at my desk – but I actually had my computer and a mobile internet connection with me. With no FTP access and no access to the the CMS my options were limited. I started the little helper app SiteSucker and simply downloaded a ‘static’ copy of the website to my computer.

About an hour later the webspace was deleted – and everything was gone. Already the next day we could actually reclaim the domain name, set up the webspace on our server and upload everything. To the public the website looked as before – the only thing missing was the content management system – but the client wanted to renew the website and the CMS anyways. Happy End.

PHP array_multisort – sorting a multi-dimensional array as you like

I successfully avoided this subject for quite a while – but now I finally wanted to know: how do I sort a multi-dimensional array in PHP to my personal preferences? The quick answer is: with the nady little PHP function called array_multisort.

Why / When do I need to sort a multi-dimensional array?

Good question. Simple database queries are often just one-dimensional. For example you want to query a list of clients from a CRM System in alphabetical order – and a simple mySQL query can of course do that for you. In another context you might want to re-use the query – but this time order the list of clients by date of birth. You could just run another query – or instead you could re-arrange or actually sort the array you already have differently.

I actually have to deal with multi-dimensional arrays quite often – but in most cases it’s enough to sort them while I do the mySQL query. But in the long run it’s of course not the most elegant way to have extra mySQL queries just because you want your array to be sorted differently. While it may first look convenient, this approach sure is not very practical in the long run.

PHP array_multisort to the rescue!

As the name suggests the little PHP function array_multisort can elegantly do the job. No ‘expensive’ extra queries needed – your scrips will run faster and will be easier to maintain. So whenever you can re-use a db-query, go ahead and re-use it. You might want to thank yourself when looking at your own scripts moths or years from when you originally coded them.

One example for PHP array_multisort, just to get started: a database query gives me the following output:

Array
(
    [0] => Array
        (
            [id] => 369
            [name] => Peter
            [year] => 1969 
        )

    [1] => Array
        (
            [id] => 368
            [name] => Paul
            [year] => 1975
        )

    [2] => Array
        (
            [id] => 367
            [name] => Mary
            [year] => 1977
        )

)

As you can see the array contains some three records that consist of three fields: IDs, names and years. The array is ordered by the year. Now I would like to use the very same array, but order it by name. I just have to ‘pull the array apart’ and rearrange it according to my preferences, using array_multisort. The following little function will just do that:

$sortArray = array();

        foreach($entryArray as $entry){
            foreach($entry as $key=>$value){
                if(!isset($sortArray[$key])){
                    $sortArray[$key] = array();
                }
                $sortArray[$key][] = $value;
            }
        } 
    $orderby = "name";
    array_multisort($sortArray[$orderby],SORT_ASC,$entryArray); 
    
return $entryArray;

In this case $entryArray is my original array, containing the results of my original mySQL query. It may look a bit cryptic at first glance, but once implemented it actually works like a charm. After the reordering the array looks like this:

Array
(
    [0] => Array
        (
            [id] => 367
            [name] => Mary
            [year] => 1977 
        )

    [1] => Array
        (
            [id] => 368
            [name] => Paul
            [year] => 1975
        )

    [2] => Array
        (
            [id] => 369
            [name] => Peter
            [year] => 1969
        )

)

Very handy indeed.

See also:

  • PHP-Manual > Function Reference > … > Array Functions > array_multisort

Umlaut-Dots Ä too close to the letter (Mac-Firefox)

The problem only seems to occur in Mac-Firefox: the Umlaut-dots of the letter “Ä” are too close to the actual letter, so the letter looks wonky. The problem seems to be not arising in Mac Chrome nor in Mac Safari – the Umlaut-dots are separated from the letter / the letter has enough space between the “A” and the dots.

umlaut-dots too close to the letter

I was roginally using the webfont “MuseoSans” – but the problem does also occur when using “Equip-Light”. However when using “Helvetica” instead, everything seems to look ok.

The problem does not really occur with Umlaut-Letters “Ö” and “Ü” and it also does not occur with the small letter “ä” – it actually only occurs when the small letter “ä” is set uppercase using CSS text-transform: uppercase;. If I instead enter the ‘real’ uppercase letter “Ä” the problem does also not occur.

The problem seems to arise from a (mal-formated) PDF document. When the text is copy-pasted into the CMS the display error occurs. When the letter is rewritten ‘by hand’, the error does not occur. I had similar strange effects already some time ago – and obviously also other people are suffering from this strange behavior. At the moment I just don’t bother enough to do research on this subject – replacing the letters is good enough for me.

Of course I would love to know the actual problem – or the actual reason for this problem. So if you happen to know, what causes this, then please feel free to add you suggestion in the comments below…

WordPress: change image size, re-render all images

Another classic: the image size preset is set to 1024 pixel. At first everything is alright, while the project is evolving the CMS structure built, the website filled with content – images are uploaded. Then occasionally somebody involved with the project wants to add an image gallery or something similar, that makes you reconsider the image sizes. Maybe 1200 pixel width would look better in a lightbox slideshow – or you want to switch to retina ready images? But at that moment all previously uploaded images are of 1024 pixel width.

In Settings > Media you can easily change the image sizes for the three main presets Thumbnail Size, Medium Size and Large Size. All you have to do is change the size to the intended new size and save the settings.

Wordpress image size settings

While the new sizes will be applied to all new images, they won’t be applied to already uploaded images. Even is you open and edit an image, you’ll find the old presets.

Wordpress image details

When you’re first confronted with this, you’ll probably ask yourself, why are my new image sizes not available in the image settings? The reason for this is quite simple: the image sizes displayed in ‘image details’ are the ones that were already applied to the image. Once you upload a new image in WordPress, the current settings are applied to the image – the image is resized on the fly – and so you’ll actually have the image in these sizes on your server. The Display Settings Selector only reflects the sizes that are actually available.

You could now choose ‘Custom Size’ and re-insert the image. But that won’t actually resize the image – it would only scale it according to the custom size you chose.

Instead you better re-render all images in the new dimensions. This might sound a bit scary at first, but (of course) there is a (free) plugin available that does just that: Regenerate Thumbnails.

After re-rendering all images, the new image size settings should be available for all images.

Re-render / resize large number of thumbnails on the fly

Using the above solution to resize images / thumbnails can be a bit problematic when you have lots of images to re-render, since the plugin basically re-renders all images at once. That probably works fine with most websites – but when you have to resize hundreds or even thousands of images, the process may cause problems: depending on your server settings you may face time-outs – or the re-rendering process just never re-renders all images.

AJAX to the rescue!

The handy plugin  AJAX Thumbnail Rebuild also re-renders all images at all sizes – but using AJAX the images are re-rendered one by one, avoiding heavy server load and/or time outs etc.

Once installed you’ll find the interface right here: Tools -> Rebuild Thumbnails

manage Textarea resize options with CSS

Usually a textarea (inside an HTML form) is resizable – and that’s a good thing. But often that is just bit too much and a resizable textarea is likely to screw with your precious design. So every now and then you would probably want to control, in what way a textarea can be resized – or maybe you want to turn off the resize-option altogether. With CSS that is easily possible:

disable all resize-options:

textarea { resize: none; }

only vertical resize possible:

textarea { resize:vertical ; }

only horizontal resize possible:

textarea { resize:horizontal; } 

disable vertical resize but keep horizontal resize with a minimum and maximum width limit:

textarea { resize:horizontal; max-width:480px; min-width:240px; }

disable horizontal resize but keep vertical resize with a minimum and maximum height limit:

textarea { resize:vertical; max-height:480px; min-height:240px; )

Test: WordPress / GD Library rendering transparency of PNG images

The following is just a test to see if my WordPress installation / Web Server setup / PHP Version / GD Library are actually rendering transparent PNG images correctly (both 8 bit and 24 bit) or if the transparency gets lost.

And the test result is: yes they do render correctly – transparency is preserved:

#1 8-bit PNG

this is a gray box with a transparent 8-bit PNG inside:
transparency-8-bit-png

 

#2 24-bit PNG

this is another gray box with a transparent 24-bit PNG inside:
transparency-24-bit-png