All posts by RobinLayfield

About RobinLayfield

uber goober

WordPress 3.4.1 breaks Password protected pages (FIX)

I just spent a morning trying to figure out why the latest WordPress update breaks password protected pages.

It turns out that this problem is very specific to themes derived from the TwentyEleven theme. There is a custom override of the password protection form that effectively points it to the wrong page.

THE FIX

There you have it!sondajiлак за паркетикониСео услуги

Useful jQuery plugins

Useful jQuery plugins a Web Development bag by Robin Layfield on Bagcheck

Here is a collection of useful jQuery plugins that can make any developer’s life that little bit easier. Part asset, part archive, it turns out that BagCheck may well be the best place to store this info!

I’m sure this list is going to keep on growing. There’s so much good stuff out there being created every day.

Lettering.js
Radical Typography
This looks really promising – finally a way to control the output of type at the character level through jQuery + CSS. Kern with ease, style with grace. Type is the next frontier of web design and this plugin brings it one step closer.

jFormer – jQuery Form Framework
jQuery form handling
A bit more complex to use than the other plugins in this bag (in Haynes-manual speak this would be a “4 spanner job”), this plugin lets you create really clean forms with good user feedback and AJAX interactions. I think anything that gets developers closer to the goal of producing great forms and form interactions has got to be a good thing for the web in general.

Uniform – Custom cross-browser form elements
jQuery, forms
This plugin gives your form elements a consistent and clean look across multiple browsers, hence then name, Uni-form!

DontType! (Password entry replacement)
Passwords, jQuery
Passwords are so passé!! Remembering them and typing them in is such a chore. If only there was a way you could flick your mouse and send a unique code to the web site…. Oh wait! There is… it’s called Don’t Type

Fancybox (Lightbox alternative)
popup frame, lightbox, jQuery
There’s a hell of a lot of lightbox and gallery window plugins out there for jQuery. This is one of the best: Clean and simple to implement and very presentable.

tipsy (Pop-up tooltips)
Facebook-style tooltip plugin for jQuery
Very simple jQuery tooltip script. It draws the tool tip in a very classy looking bubble with a pointer to N, E, S, W.

jQuery Validation Engine (Form validation)
form validation, jQuery
This is a dynamic form field validator. It has a number of easy-to-implement comparison and validation methods. Any form field that fails validation will cause the form to scroll to its position and a prettified message to appear above the field in a red callout.

It’s neat and very visually effective.

Simple Validation (Form validation)
simple form validation, jQuery
This site combines my love of bass-playing with coding to provide help in the form of bassistance! No really, it does…

This is a very simple and effective form validator that creates and reveals a hidden message beneath any improperly formed fields. Much simpler than the Validation Engine above, it’s often a better fit for web sites that just need the validation and no messing.

jQuery UI (Widgets, transitions visual effects)
User Interface Elements
This is a bit of a no-brainer really. A collection of elements, effects and useful extensions to jQuery, all wrapped up in an easy-to-customise theme.

Widgets include: calendar datepicker, accordion and tab views, autoocomplete and dialog boxes.

jQuery Mobile (Mobile app building)
mobile, jQuery
I had to include this. Even though it is still in alpha (alpha3 at the time of inclusion) it is slick, neat and conceptually well put-together.

If you want to make cross-platform mobile enabled apps with the minimum of effort, then jQuery Mobile is the way to go.

It builds upon the work done by Sencha Touch spinoff jQTouch and the only thing that is holding it back at the moment is a lack of clear tutorials.

Modernizr (Browser capability detection)
Compatibility, jQuery
Not actually a jQuery plugin but an invaluable asset to the developer. Modernizr helps you target browser-enabled features and provide fallback solutions when those features aren’t available.

It does this by parsing the HTML and adding a css class to each element that indicates whether a certain new or desirable feature is or isn’t present.

Noise texture generator (Graphical effects)
screen noise, jQuery
In these days of textured backgrounds, it’s nice to know that a simple script is available that can do this for you.

Jcrop (Image cropper)
image cropping, jquery
Jcrop is great. Really great. I use this for making instant croppable profile pictures when people sign into personalised web sites. It’s neat, lightweight and very classy looking.

jQuery Waypoints (Page navigation)
scrolling, jquery
I haven’t used this, I just stumbled across it today but it looks really interesting; you can trigger events when a user scrolls to a specific point on the page. Very useful for one page websites!

mapkey – keypress handler
keys, jQuery
This is a really neat solution for handling keypresses on your web site. You can bind a keypress to a rel tag (eg. rel=”next”) to move the focus through a page, or even trigger a function, eg a scroll or visual effect. It has a simple syntax that builds upon jQuery so you can use it with the minimum of effort.

ИкониПодаръциikoniИдея за подаръкикониикониПравославни икониикони на светцииконописikoniсвети георги

WordPress multi-user on PLESK (howto)

I’ve recently been tasked with setting up a WordPress Multi-User (WordPress Mu) instance running on a PLESK based web-server. For the most part this is fairly straightforward, however WordPress Multi-User likes to let users setup blogs as subdomains of the main site, for example, the blog for “RoadRunner” would be viewed by visiting

roadrunner.example.com

This presents a problem for PLESK as it manages Virtual Hosting (vhosts) very carefully and it will treat this as an entirely separate domain. The way to solve it involves 2 techniques: setting up a wildcard DNS entry and adding in a special configuration file to the PLESK domain. Here’s how to do it:

Wildcard DNS entry

  • go to your PLESK control panel
  • select your domain
  • click on the DNS settings icon
  • PLESK DNS Settings

    PLESK DNS Settings

  • Now create a new wildcard entry with the following details:
    Record Type: CNAME
    Domain name: *  (the rest of the domain is written outside the textbox eg. .example.com)
    Canonical name: example.com
  • Click OK
  • When you make a change to the DNS, PLESK won’t actually apply it until you hit the UPDATE button, this is sometimes obscured off to screen right

VHOST config
The next part involves having root access to the web server. If you control the whole PLESK domain, this is possible, however you may have to make a technical request if you don’t

  • using Terminal, logon to the server with SSH (eg ssh root@example.com) enter your password and you should be presented with a command prompt
  • cd to the correct folder for your domain (usually /var/www/vhosts/example.com/)
  • cd into the conf folder
  • create a new file, using vi
    vi vhost.conf
  • press i to go into insert mode and enter the following line:
    ServerAlias *.example.com
    (where example.com is your domain)
  • hit ESC and then tap :wq! to save the file and quit
    You may also be able to create this file using your favourite web editor – mine is Coda from Panic software – and FTPing it up into the conf folder one level up from the root of the web site, however you will still need to be able to restart the PLESK instance to get it to read the new file.
  • in the command prompt, type the following command:
    /usr/local/psa/admin/sbin/websrvmng -a -v
    this will restart PLESK

That’s it. You should find that you can now create blogs and view them in their dedicated subdomains.Православни икони

serving Microsoft Office 2007 documents from a Linux PLESK web site

Office 2007 introduced a whole host of new application extensions, most of which aren’t recognised by the Apache web server.

What happens if you link to a downloadable file can often be unpredictable; Firefox on OS X will merely download the file. Internet Explorer on the other hand – even on a system that has Office 2007 installed – will attempt to treat the file as a compressed file.

Download dialog showing incorrect file type

Download dialog showing incorrect file type

Once you choose save in Internet Explorer, it saves it as a compressed file which when you open it gives you a set of resources, similar to a Mac Bundle. It’s pretty hard to actually get the correct application to launch and run the file as it should (the example above was a PowerPoint pptx file).

Luckily, help is at hand and all you really need to do is register the new Mime types with Apache. You can either do this at the server level in the Apache configuration file, or on a per-site basis using a .htaccess file.

Apache config file
This file is called httpd.conf for Apache 1 and apache2.conf on Apache 2. There are a number of places it can be so it’s best to run a file search on the server to find it.

SSH into your server as root (if possible)
Run the command  find / -name apache2.conf or    find / -name httpd.conf
You should now see a file listing which will give you a clue as to where the file will be (most likely etc/apache2 for Apache 2 web servers).
Edit the file using the command vi /etc/apache2/apache2.conf (if that’s where the file is)
Type :10000 to jump to line 10000 (and therefore the end of the file)
Press I to insert and then newline
Paste in the following lines:

AddType application/vnd.ms-word.document.macroEnabled.12 .docm
AddType application/vnd.openxmlformats .docx .pptx .xlsx
#AddType application/vnd.openxmlformats-officedocument.presentationml.presentation .pptx
#AddType application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx
AddType application/vnd.ms-word.template.macroEnabled.12 .dotm
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.template .dotx
AddType application/vnd.ms-powerpoint.template.macroEnabled.12 .potm
AddType application/vnd.openxmlformats-officedocument.presentationml.template .potx
AddType application/vnd.ms-powerpoint.addin.macroEnabled.12 .ppam
AddType application/vnd.ms-powerpoint.slideshow.macroEnabled.12 .ppsm
AddType application/vnd.openxmlformats-officedocument.presentationml.slideshow .ppsx
AddType application/vnd.ms-powerpoint.presentation.macroEnabled.12 .pptm
AddType application/vnd.ms-excel.addin.macroEnabled.12 .xlam
AddType application/vnd.ms-excel.sheet.binary.macroEnabled.12 .xlsb
AddType application/vnd.ms-excel.sheet.macroEnabled.12 .xlsm
AddType application/vnd.ms-excel .xlt .xla
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.template .xltx
AddType application/vnd.ms-excel.template.macroEnabled.12 .xltm
AddType application/vnd.ms-xpsdocument .xps
AddType application/application/vnd.ms-powerpoint .ppt .pot .pps .ppa
AddType application/msword .doc .dot

Now hit [Esc] to leave insert mode
Type :wq! to save the file
Finally restart the apache server, most likely by using the command /etc/init.d/apache2 restart
Your entire web server should now be able to deliver the correct file types – problem no more.
Per site .htaccess configuration
Browse to your remote site and open the .htaccess file if it’s present (make sure that your web / ftp client can see hidden files as dot-prefixed files are traditionally hidden from view on the Linux / Unix platform.

Create a new file if there isn’t one present and then simply add in the following lines:

AddType application/vnd.ms-word.document.macroEnabled.12 .docm
AddType application/vnd.openxmlformats .docx .pptx .xlsx
#AddType application/vnd.openxmlformats-officedocument.presentationml.presentation .pptx
#AddType application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xlsx
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.document .docx
AddType application/vnd.ms-word.template.macroEnabled.12 .dotm
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.template .dotx
AddType application/vnd.ms-powerpoint.template.macroEnabled.12 .potm
AddType application/vnd.openxmlformats-officedocument.presentationml.template .potx
AddType application/vnd.ms-powerpoint.addin.macroEnabled.12 .ppam
AddType application/vnd.ms-powerpoint.slideshow.macroEnabled.12 .ppsm
AddType application/vnd.openxmlformats-officedocument.presentationml.slideshow .ppsx
AddType application/vnd.ms-powerpoint.presentation.macroEnabled.12 .pptm
AddType application/vnd.ms-excel.addin.macroEnabled.12 .xlam
AddType application/vnd.ms-excel.sheet.binary.macroEnabled.12 .xlsb
AddType application/vnd.ms-excel.sheet.macroEnabled.12 .xlsm
AddType application/vnd.ms-excel .xlt .xla
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.template .xltx
AddType application/vnd.ms-excel.template.macroEnabled.12 .xltm
AddType application/vnd.ms-xpsdocument .xps
AddType application/application/vnd.ms-powerpoint .ppt .pot .pps .ppa
AddType application/msword .doc .dot

save the .htaccess file and your web site should start delivering the correct file types!

Now in pptx format

Now in pptx format!

NamesCo Zeus server, 301 Redirects

Howto manage a 301 redirect on a NamesCo linux (Zeus) server

I felt I should write this up because it’s a problem that’s been puzzling me for some time and I only found out the answer today. Here’s the deal:

* it’s currently recommended that all traffic to a web site goes to one URL, to minimise dilution of the Google PageRank.

* on NamesCo servers, traffic is automatically routed to both http://www.example.com/ and http://example.com

* ordinarily I would use an Apache .htaccess script with a simple 301 redirect in it, like so:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com
RewriteRule (.*) http://www.example.com/$1 [R=301,L]

* But…. NamesCo servers don’t run on Apache, they run on Zeus

So what we need is a script that will force Zeus to do the same kind of redirect.

There’s just one other gotcha, that is specific to NamesCo. The script is only allowed to be run from one place, in the root of your web directory, a file called rewrite.script. You can edit this manually but by far the best way to manipulate it is via the control panel on the NamesCo server. There’s a module under Scripts & eCommerce called Rewrite Script.

Screen grab of NamesCo control panel

Screen grab of NamesCo control panel

This module has two key features:

1) it will take standard UrlRewrite code from an Apache .htaccess file and convert it to Zeus compliant code.

2) it will allow you to type in Zeus compliant code and validate it before writing it to the server root.

After much scrabbling around and an awful lot of trial and error, I found a post from a guy called Robert at www.emailmarketingsolution.co.uk that seemed to do the trick. The original post is up on the zeus community knowledge hub.

Zeus uses a completely different algorithm for its server control scripts and documentation is somewhat thin on the ground – most of the examples I found on the internet were just that, examples and hacks showing different approaches to solving pretty much the same problem.

I’m going to repeat Robert’s script here but add in a bit of background detail to show what it is actually doing

RULE_0_START:
# begin rule, rules are separated into blocks in the Rewrite.Script
match IN:Host into $ with ^example\.com$
# examine the hostname to see if it doesn’t begin with www (note the backslash to escape the dot before the domain suffix)

if matched then
match URL into $ with ^/(.*)$
# if there is a match, extract the rest of the path into a temporary variable ($1)

set OUT:Location = http://www.example.com/$1
# now re-construct the header location, this time prefixing it with ‘www’

set OUT:Content-Type = text/html
set RESPONSE = 301
# tell Google (& others) that this page has been permanently moved, so they update their records

set BODY = Permanently Moved
# human readable version of ’301′ message

goto END
endif

# end rule
RULE_0_END:

OK, so there you have it. That’s how to do some basic Zeus wrangling. There’s more documentation on the Zeus server at the Zeus Knowledge Hub web site. I think the key documentation is the TrafficScript Guide but I’m not entirely convinced.

Additional: DRUPAL users
There’s also a complete Rewrite.script for Drupal users. Get it from the main Drupal web site.

Fun with icons in OS X

OK, I’ll fess up – lately I’ve become a bit bored with the icons that appear in my OS X dock. I mean, they’re cute and all but they barely even drink. Look at the them. They’re a bit tired, eh? And I’ve always hated that Safari icon. I mean look at them
Leopard dock icons

Leopard dock icons

So I thought I’d have a play around and see how easy it was to change them. Turns out it’s really simple…

Getting the image
I decided to replace my icons with pictures of letters – just so I had a clue as to what applications they represented, so I trawled through Flickr, searching for ‘letter a’, ‘letter t’ and the like. When I found a suitable image, I used Command-Shift-4 to do a cheeky screen grab. Replacement icons can come from anywhere.
Changing the application icon
This is really easy. Open Applications in Finder and click on the application you want to change the icon for. Hit the Command-I or right-click and choose Get Info on the file to view its details.
Get Info

Get Info

double-click on your saved screen grab to open it in Preview then Command-A to select all and then Command-C to copy the image. Back in the Get Info pane, clicking on the icon itself will highlight it with a blue glow. Clicking Command-V will paste your new icon in its place. Careful though, it can be pretty addictive!
Finder

Finder

And here’s the end result. My graphitti dock! OK, it’s a bit more rough and ready than Apple’s work of art, but it’s all mine and I like it!
my dock!

my dock!

Internet Explorer 7/Opera 9 form button gotcha

Well I thought I’d kick off the New Year by documenting an annoying and frustrating “undocumented feature” of IE and Opera.
This one is pretty simple and I guess it’s fairly obvious when you think about it but it’s not consistent with other platforms or this web developer’s expectations of browser behaviour.

Internet Explorer 7 and Opera 9, as far as I can tell do not send the form element details correctly when the form is submitted. Instead of posting the input element name and value, they post the input name with the x and y co-ordinates of the mouse pointer at the time of clicking. This information is also sent by Firefox and other browsers but they do send it together with the actual element name and value as well.

Important information e.g. the Value of the button could be missed by these browsers

The real gotcha is if you are processing a form and performing alternate actions when a button is clicked on (eg you may have an ‘Upload Image’ button and a ‘Finish’ button). Testing that the button has been clicked by looking for a POST or GET value of the button name will not give you the correct result when the button was clicked in IE.

To replicate this behaviour:

Create a form and add a graphical submit button to it, with a name of “submit”

Form with graphical input button

Form with graphical input button

you would expect that as it’s an input source that the submit value will be transmitted as part of the form.

Here is the output displayed when the form is submitted to this simple script

this is what you see when you View Source in Firefox and Safari

Output from Firefox

Output from Firefox

output from Safari

output from Safari

see the final value – submit (the button) has a value of “submit”

now lets View Source in Internet Explorer 7 and Opera 9

output from Internet Explorer 7

output from Internet Explorer 7

output from Opera

output from Opera

nada – zip, zilch, nothing

As far as I know, when you create an input element in a form that element has to pass its value by name, eg. last_name=layfield otherwise it is not behaving correctly.

MySQL Tip of the day (GUI Tools, Remote access, Complex Passwords)

MySQL TIP OF THE DAY #1:

If you can’t remotely connect to your MySQL server using Query Analyser / Administrator GUI Tools, try replacing your password with a simpler one, as the GUI Tools just ain’t that clever.

details:
It’s taken me around 20 minutes to realise that MySQL GUI Tools running Mac OS X do not appear to like complex passwords, such as this one

932_h5@@d-p23iuf

I honestly thought I was being more security aware by using this rather than my usual fairly memorable passwords but it appears that the GUI tools trip up over some of the characters (probably the ‘@’ signs), so that even though I can access the server using these credentials in an SSH session, the same login information will generate the ubiquitous MySQL “can’t connect” error.

Cannot connect to MySQL instance

Cannot connect to MySQL instance

икони