Category Archives: Web Development

Anything to do with my day job (web development)

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!

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.

Subversion for web design – how we do it @ Karyx

Update: Dreamweaver CS4

The latest version of Dreamweaver (CS4 currently) now has integrated Subversion support, thankfully, which means that cloaking the .svn files is no longer necessary as DW will ignore them by default. You can configure the site to connect directly to your subversion server but in our experience unless that is a repository on the local network, it adds a painfully long pause every time you try to open a file whilst it’s checking it out from the repository. Better to use Tortoise or Versions, methinks but plus points for Adobe for incorporating this feature.

Subversion using Versions, Tortoise, Beanstalk & Dreamweaver

You can set up your own local subversion server but we find it’s easier to have our Subversion repositories hosted on the net – that way we can access them at any time. Here at Karyx we use a service called Beanstalk ( http://www.beanstalkapp.com/ ) – it lets you have a number of repositories for free and shows in a very pleasant and picturesque way all the changes that have recently taken place on the repository. You can even use it to compare different versions of files, to see where a change may have been made.

SUBVERSION CLIENTS
We recommend TORTOISESVN for pc (it integrates directly with Explorer in a context menu) or VERSIONS for mac (Versions is a brilliant piece of easy-to-use and well-engineered software). Get them here:

TORTOISE SVN (pc)
http://tortoisesvn.tigris.org/

VERSIONS (mac)
http://versionsapp.com/

SUBVERSION SET UP
Setting up a local repository can be a bit of a faff but once it’s in place, it’s pretty painless to use. Our recommended method is:

1. create an empty repository on the server (beanstalk)
2. check it out locally to a new folder on your development machine
3. copy your project files into the new folder
4. highlight the files, right-click and choose “add” to add them into your repository
5. “Commit” the files

Note that when you check out the repository, it will ask you for a destination folder. Bear in mind that both TortoiseSVN and Versions will create a subfolder with the name of your repository in it, in whichever destination folder you choose, so you can nominate your root ‘Projects’ or ‘Sites’ folders as a destination. I know this sounds a bit arcane but if you create a dedicated folder to put the repository in, you will very likely end up with a path like

c:\Projects\MyNewProject\MyNewProject\

Now you will find you have a local subversion repository that is connected to the subversion server. Any file changes within this folder will now be tracked, although you will have to “Commit” any changed files to the subversion server to make the changes official.

BASIC USE OF SUBVERSION
Subversion maintains a repository – it keeps a collection of hidden folders on your local machine that contain hashes of all the files. Whenever a file is changed from the most recent version, it makes a note of this and then when you do a “Commit” – to post changes up, it pre-selects all the affected files. You can write a comment by each commit and this is recommended as it helps when you are reviewing changes to find out what exactly you did three months ago. You can also choose to “Ignore” files and folders (3rd party applications or javascript frameworks, etc).

When other users make changes to the files, you should highlight your local folder (in Explorer | Windows), or choose the working directory (in Versions | Mac) and then choose “Update” to go and grab the latest version of the changed files. Versions helpfully indicates remote file changes in it’s file list.

DREAMWEAVER GOTCHA
Dreamweaver works pretty well with Subversion and Subversion wipes the floor with Dreamweaver’s Check-in/Check-out features. There’s a 3rd party extension you can install to do Commits and Updates but our preferred method is to use the software described above.

One thing though – if you are testing your code by deploying to a remote server and you select a folder to upload, Dreamweaver will also upload the hidden version control folders (.svn files) – not good. A work around is to download and install this extension:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1018603

This works by cloaking the subversion folders, so you need to have cloaking enabled in Dreamweaver. Also it’s not automatic, so when you have your basic site checked in to Subversion, you need to go to the Commands menu and then choose Cloak SCM Directories option. You will need to do this whenever you create a new directory. Alternatively, just make sure you upload selected files and not folders.

MORE ON SUBVERSION

There’s a definitive guide to subversion here:
http://betterexplained.com/articles/a-visual-guide-to-version-control/

or a “designers” guide here:
http://www.thinkvitamin.com/features/design/subversion-for-designers

and here’s some advice on commenting your commits:
http://www.wildbit.com/blog/2008/11/11/the-importance-of-commit-messages/

I hope this all helps. Subversion is definitely worth getting into if you want to stay confident in your code!

JQuery 1.2.6 quirk in Internet Explorer 7

I’ve been doing a lot of work lately with JQuery and I love it… I really do, it’s a great piece of code, nay, framework, that strips out all the pain of working with JavaScript and provides a launchpad for great code and interface adventures.

Nonetheless, it’s not without its headaches and recently I lost a few hours to trying to figure out why my JQuery functionality refuses to work on Internet Explorer 7. It’s very frustrating, as everything works perfectly in Safari and Firefox and then as soon as IE comes up the site goes suddenly two-dimensional with none of the interesting UI customisations that JQuery makes so much fun to build.

After a bout of head scratching, coupled with the realisation that JQuery 1.2.3 works fine I started to experiment with the way the script was invoked, fearing that IE had some kind of issue with it.

Sure enough, that was the source of the problem and as soon as I changed my JQuery initialiser to run the “old-fashioned” way, the scripts came magically back to life. So here it is:

If you’re having problems running JQuery in IE, open your html and look for the following lines

and change them to this. Be sure to check the closing part of the script too, as that is different

hopefully the JQuery developers will sort out that problem in time for the next version…

JavaScript forms submit gotcha!

I’ve just lost about an hour and a half of my life to a cheeky little JavaScript gotcha. I thought I’d document it here in the vain hope that it didn’t get anyone else.

If you have a button on your form that is named “Submit” then beware! As soon as this button goes into the DOM, it will over-ride the form’s Submit() method, meaning that you can no longer call that from JavaScript or JQuery or whatever you are using.

Make sure you give the button a different name, or even no name at all, for your own peace of mind!икони

Parallels Plesk 8.4 Ubuntu speeding up SMTP

If you’ve used PLESK for any great length of time, you’ll know that whilst it is a great bit of software, for some reason it defaults to doing Reverse DNS lookups whenever a client connects to it to send mail.

Yeah rDNS is a useful tool for stopping spam and the like… but it also means that every single email sent takes 26-30 seconds to go out. That’s frankly unacceptable when you are trying to operate a commercial service and vastly undermines any possible benefits from it.

The good news is that it is (fairly) easily resolved. All you have to do is put in a command-line flag to tell the mail server not to perform an rDNS lookup. The hard part is figuring out exactly where to stick it.

Up to version 8, I used to refer to this handy guide, which resolved the problem though in ways I couldn’t quite understand! see here at

http://tyrannical.org/page-14

PLESK 8.4 introduces some major under-the-hood improvements, one of which is a subtle reorganisation of where the commands are stored. After some handy support from our ISP CWCS, we found that the command had moved to here:

/etc/inetd.conf

and all you have to do to switch off rDNS is to insert the following flag after the second occurrence of the phrase “tcp-env” in your inetd.conf.

-Rt0

More info and some other useful tips here

Anatomy of -Rt0
What does -Rt0 mean exactly? Well it’s a command that’s issued to the TCP server and it tells it to

R – Do not attempt to obtain $TCPREMOTEINFO from the remote host.
tn – Give up on the $TCPREMOTEINFO connection attempt after n seconds. (default is 26 seconds ho, hum)

The complete howto

  1. Login to your PLESK server using SSH
  2. type the command vi /etc/inetd.conf
  3. type the letter I (to insert)
  4. find the two lines that begin with smtp stream and smtps stream
  5. look for the second occurrence of tcp-env
  6. type -Rt0 into the line (note zero, not ‘o’)
  7. hit [esc]
  8. type : (shift-colon)
  9. type wq! (meaning write the file and quit from vi)
  10. hit [return]

now all you have to do is restart inetd, which is done on Ubuntu by entering the command

/etc/init.d/xinetd restart

You should now find that SMTP mail sending is lovely and quick. Phew!

Caveat
Please note that making some changes in the PLESK domain control panel will reset this command line, so you may need to edit it again if you start to notice delayed SMTP sends

Host spoofing in Mac OS X

This is a handy way to test sites that are in the process of being moved from one domain to another, or even to create your own “invisible” internet.
Normally when a user requests something from a web-based domain, their computer will connect to a Domain Name Server (DNS) and request the correct IP address for that domain. As you can see for everything that is requested on a web site you will have at least one and possibly two net requests (one for the domain translation to ip and one for the asset itself) taking place. This can slow the whole process down.

What you can do is log a set of special domains (frequently used, personal, etc) in your /etc/hosts file. This is a kind of static file DNS server if you like. This is always consulted first and you can in fact use this technique to override any web address. By creating a web site that responds to requests on a certain domain (even if it’s not registered to that server) and by “spoofing the host,” you can create extremely secret / secure web servers as they have no visible presence on the internet, except to those users who have manually set their host files up.

We’ll be using vim which is a slightly nicer version of vi the linux/unix text editor. It’s a little unwieldy at first – all keyboard commands and odd-shortcuts but it’s a doddle to use once you’re comfortable with it.

Anyway, here’s how to do it:

1. open Terminal

2. type

sudo vim /private/etc/hosts

3. press I (for Insert)

4. scroll to the bottom

5. hit return to enter a space

6. type the following line

# TEMPORARY SPOOFED IP FOR TESTING

7. hit return to enter a space

8. type the following line

123.456.789.101 www.example_domain.com

where the ip address and the example domain are those that you wish to use

9. hit return to enter another blank line

it should look like this

# SPOOFED HOST
123.456.789.101 www.example_domain.com

10. hit escape

11. type

!wq

to save the file

¡IMPORTANT! You will have to re-start your mac to refresh it’s internal dns

Windows Users: It’s pretty much the same process, with the hosts file living in c:\windows\system32\etc\ (on WinXP) usually and you can edit the file notepad.

How to configure Dreamweaver CS3 (OS X) to render non-standard file extensions in Design View

If you do a lot of work with template based systems, as I sometimes do, you may find that Dreamweaver refuses to allow you to render some of the files in the Design view. This makes it incredibly difficult to find the correct template by loading it and viewing it.

The Dreamweaver documentation is not terribly clear on how to make the program recognise these files as HTML, or PHP type files. It seems to hint that you can go into your personal Library settings and edit a file called Extensions.txt - this will not work.

So here’s how to do it:

1) Browse to your ‘Applications’ folder

2) Open Adobe Dreamweaver CS3
3) Open Configuration / DocumentTypes

4) Edit the file MMDocumentTypes.xml

5) Find the section you wish to update – in my case it’s the PHP section

6) Edit this line:

documenttype id=”PHP_MySQL” servermodel=”PHP MySQL” internaltype=”Dynamic” winfileextension=”php,php3,php4,php5″ macfileextension=”php,php3,php4,php5,ihtml,pml” file=”Default.php” writebyteordermark=”false”

and add the other extensions that you wish Dreamweaver to interpret as displayable PHP files into the macfileextension section. I think it’s safe to assume that updating winfileextension will do the same for Windows Dreamweaver users.

7) Save the file

8) Restart Dreamweaver and voila!

How to customise the Unit Converter Widget in Mac OS X Dashboard

Dashboard! What a cool app – there when you need it, gone when you don’t. That’s my idea of usefulness.

Now one of the Widgets I use the most is the Unit Converter widget. It’s very handy indeed and saves me having to browse through half a dozen Google results to find the conversion that I need.

However, for one reason or another, I was brought up to measure my weight in Stones – these don’t seem to relate to anything real except bodyweight and unfortunately I can only appreciate my weight in these terms (Kg mean nothing to me, though suffice it to say I have a lot of them!).

Unit Converter doesn’t have a facility for converting between Stones and Kilograms at present but actually adding one is very simple – all the information is contained in one script file that’s part of the widget and in fact the hardest part of the operation is changing the permissions on the file. This should work for any other type of conversion you wish to add as well.

Here’s how to do it:

This operation will require you to restart Dashboard (I think), which could mean you having to restart your mac. Ideally the best time to make this change is after you’ve booted up and before you start Dashboard up. That way, you can save your change, hit F12 and see it working straight away.

1) Launch Finder and browse to the Library folder on your hard disk

2) Browse to the Widgets folder

3) Ctrl-click the Unit Converter widget and choose Show Package Contents from the options

4) Now make a copy of Conversions.js to be on the safe side (you will need to enter your password to do this)

5) Highlight Conversions.js and Get Info on it

6) Here you will need to change the Ownership & Permissions on the file so that you can Read & Write it. You will need to enter your password again

OK, here’s the fun bit

7) Open up Conversions.js in a text editor.
You will see it’s made up of blocks for each of the conversion types, which look something like this

so you can see, all we need to do is add another line in there with our conversion in it. Now the way that the Unit Converter appears to work is that for each set of units, it has a base unit – in this case it is Kilograms and you can see that the conversion ratio for Kilograms is 1.0. Whenever a conversion is made, the unit is first converted to the base unit, and then converted to the required unit.

Looking at an entry, for example

{name: ‘Gram’, toBase:invLinForm(1000), fromBase:linearForm(1000)}

you can see that the key information we need to put in to create a new entry is a name and a single figure, that being the amount of the new unit (Gram) per one of the base unit (Kilogram), that is, 1000.

To create a new conversion, we need to get that ratio. I went here and retrieved the following information:

1 kilogram is equal to 0.15747304441777 stones.

so all we have to do now, is go to the bottom of the weights block and:

1) Add a comma, after the final conversion (Grams), so the end of the line looks like this

… fromBase:linearFrom(1000)},

2) Put in the following line after the last entry but before the closing square bracket
{name:’Stones’, toBase:invLinForm(0.15747304441777), fromBase:linearForm(0.15747304441777)}

3) Save the file and fire up Dashboard

Here’s a copy of the complete and working file:

Conversions script updated to include Stones

Troubleshooting

You will know if it has worked because Unit Converter will run the way it always does and Stones will now be an option to choose from. If you find that you can’t select any units and the image across the top does not look right, then there’s something wrong with your update to the script: you’ve missed a comma, a quote or a bracket or brace or square bracket. Go back and look at it. In the worst case scenario, you can copy your original backup of conversions.js over the new one but you will need to restart Dashboard and possibly your Mac for it to work again.