Yearly Archives: 2015

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.

CSS: How to jump to a differing anchor-position (vertical offset)

jump-anchor-offset - illustration / image by T.Bortels/cpu20.com

Leave a reply

The initial question was: how to jump to an anchor, but have a vertical offset of x pixels?

Anchors are somthing like reptiles of webdesign – they are basically dinosaurs, but they’re still here. And they are here for a good reason: anchor links are easy to use and they do their job. You just click on an anchor link, and the page jumps right to the paragraph.

With the rise of one-page-layouts anchor links are becoming even more and more popular these days. There are lots of websites built on the concept of having anchors doing the navigation. When the website consists of only one page, there are not so many options left to actually navigate the page.

But often anchors are just a bit too accurate. When placed at the very beginning of a paragraph or a section or a headline, the jump will lead right to the very beginning of that paragraph or section or headline. This can lead to the odd situation that the detail you wanted to have in focus is actually at the top border of the browser’s viewport.

With the help of a little css magic a vertical offset can be added to an anchor. The actual anchor will then be placed x pixels above its actual position. To get this working the anchor element has to be positioned on an absolute position (position: absolute;) inside the element that you want to target. Here the sample code:

<div style="position:relative;">
    <div class="anchor" id="jump123" style="position:absolute; top:-100px;"></div>
    <div class = "mein_text">I should be 100px below where I currently am!</div>
</div>

Anchor offset in jQuery Masonry

Originally I needed this anchor-jump for a good old image gallery, that was organized by the jQuery plugin Masonry. The good news is, that the above trick actually does work well with jQuery Masonry. You just have to place the anchor inside an (invisible) div-element, that is inside the actual image container. Then you can move the position of the anchor outside the container for example by 100 pixels, as it is described in the above code snippet. This will then again bring the targeted image further down towards the center of the screen – the center of attention.

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

Leave a reply

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.

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

1 Reply

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.

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

Leave a reply

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.

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.

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

CSS Hyphenation – Word Division by Syllable with ‘hyphens’

1 Reply

Web design is still a totally different thing than book or print design. The options to actually controll the look and feel are still quite limit, to say the least. But slowly online typography is becoming more and more interesting, more and more options are available. Browsers are able to display webfonts and css offers a few options to actually style the text: relative font sizes (em / rem), line-height, and kerning (letter-space) are just a few of the options that are used in everyday webdesign.

In the recent past it was still difficult to control how text or lines of text would break. One could just stand and watch what would happen when the lorem ipsum was replaced by actual content. Often clients, designers and developers were not really happy about the result: long words would jump to the next line and leave white space behind, making the layout uneven and ‘ugly’. And it was only rarely an option to use ‘justify’ since that would leave ‘rivers’ of white space behind.

Finally we have some options to make text break. The css property hyphens won’t allow you to determine where exactly to break the text, but it would at least enable hyphenation in many current browsers. This is a step forward, towards better typography online – and I’m glad we have it today. In the following code I’ll show you how I currently use the hyphens property to beautify texts:

p {
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
-webkit-hyphenate-limit-lines: 2;
        hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-chars: auto 3;
        hyphenate-limit-chars: auto 3;
}

The hyphens property is set to auto. This means web browsers that do support hyphens will actively divide words by syllable, wherever it suits ‘best’.

The following property hyphenate-limit-lines is set to 2 – this means there should be a maximum of two lines of text that do break a word in a row. By default hyphens would break every word, eventually producing rows of text that end with a hyphen. Having too many hyphens can again make the overall appearance of the text look ugly. So I prefer to limit the number of lines.

The css property hyphenate-limit-chars takes care of the length of the words that are allowed to be broken. The first number is set to auto, which means that words of any length may be broken. The second number determines how long the part of the word before and after the break have to be. Setting it to three will avoid series of word with only two letters being cut off. That would be un-wanted, un-attractive, un-cool.

Using CSS hyphenation you’ll have to rely on the browser. And the browser again needs to know, with what language it is dealing and what grammatical rules (or actually what vocabulary) to apply. So you’ll have to let the browser know, in what language you text is written:

<html lang="de" dir="ltr"

The above code should be located in the leading html-tag of your html document. In this case it tells the browser, that the text is written in German language (and that it treads from left to right).

CSS Hyphenation in WordPress Themes

Using a WordPress theme chances are that is has CSS hyphenation already built in. You should however check if your WordPress installation is set to the right language, so that the browser knows what to expect and how to break words.

If CSS hyphenation does not work or works strangely only with very few words, you’ll probably have to set the language of your WordPress installation to the language of your content. You can check what language is set by looking at the source code of your website as it is shown in the picture above. Changing the language of a WordPress installation is not really complicated – here is a quick guide on how to set the language to a different language without doing a fresh install.

browser support for CSS Hyphenation

Currently browser support is good, but not really really good. While Internet Explorer > 10 does actually support hyphens, Chrome does not. Already in 2011 David Newton has written a guide on how to apply hyphenation with a JavaScript workaround. I won’t go that way, since I hope for better CSS support in the future – but in case you can’t afford to wait here is the article:

The Current State of Hyphenation on the Web (davidnewton.ca)

manage Textarea resize options with CSS

Leave a reply

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

Leave a reply

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:

#2 24-bit PNG

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

Change WordPress language (without re-installing WP)

Leave a reply

So, you have just installed WordPress successfully – and now you realize that you would want to run WP in a different language? You basically want to change the WordPress language after install – without re-installing it? Great. I know the feeling.

WordPress is available in many different languages – as far as I know over 70 language packs are currently available – and of course there is also for example a German version of WordPress. So basically you could just download the version in the language you prefer and install it as it is. But that’s not what this article is about.

I recently need to change one WordPress installation to German language. There are many guides, tutorials and how-to’s available that describe how to change the language – or I would actually rather prefer to say they ‘claim’ to describe how to change the language. What most of the guides actually describe is how to do a complete a WordPress installation in a different language.

But sometimes you just want to change the language or add another language, without actually installing WordPress. And of course that is very well possible. All you basically will need are the corresponding language files that are usually located inside the folder languages under wp-content. When you do a standard installation these files are however most likely missing.

WordPress German Language Version

Basically you have two options. Either you download the ‘localized’ installer – there is for example a German installer available right here “WordPress in deutscher Sprache“ > http://wpde.org/download/. You can then find the language files inside the languages directory.

Or you download the language files you need directly and put them inside the folder languages manually. You can find a directory of various languages / language files over here: http://svn.automattic.com/wordpress-i18n/

After uploading the language files you can choose the language from the options page in WordPress administration section as shown in the screenshot. Previously you first had to edit wp-config.php – with newer WordPress versions that is no longer necessary. You may however still find this note: „Note: The WPLANG constant in your wp-config.php file is no longer needed.“

Centered Layout jumps for Scrollbar [CSS solution]

Leave a reply

The following scenario might sound quite familiar to the one or the other web designer / web developer: you have a nicely centered layout, but of course some pages have less content than others. For example the contact page can be quite short, if it only features a contact form and some contact details.

So – basically everything is in shape, the layout behaves well – web design by the pixel – only one or two pages don’t have a scrollbar, all the others do. Basically this would not be that dramatic – most browsers will not bother about the little difference and instead display all pages equal. But some browsers don’t. Instead the centered layout is positioned a few pixels to the right, if the scrollbar is missing – or the other way round: the layout ‘jumps’ a fex pixels to the left, if the current page has a scrollbar.

There is a simple scc-trick to solve this problem of ‘jumping’ centered layouts. You just have to force the browser to provide the space for a scrollbar – whether there is a scrollbar or not. Here is the corresponding css-code:

html {
    overflow-y: scroll;
}

Just put the above css snippet in your stylesheet and you’re basically safe. However the above code is actually not really valid css, but who cares anyways. It does solve the problem – and it’s compatible with most modern browsers. According to css-tricks.com only older versions of Opera are not cooperating.