Archive for the 'Programming' Category

Page 2 of 2

Custom SSH port with svnserve

I had some trouble accessing my svn repository on my server.  The people who host my website use a non-standard SSH port, and they force you to access the svn server through SSH – but without telling svnserve to use the non-standard port!

So, after much trawling through the internet, I finally found the solution, thanks to this page.  Their solution didn't quite match my needs (as they assume root access for the Linux shell, which I don't have), but it got me over the hump.  Their solution is to set the global variable $SVN_SSH, '
It seems like the environment variable is the only way to set the SSH port.'

However, this is wrong – there is another way, and it is more elegant, I think.

The subversion configuration file settings on a standard Linux setup can be found in the '.subversion' directory.  In this folder you can find the 'config' file.  Open this, and you will find the '[tunnels]' section.  Add the following code to that section:

custom_ssh = $SVN_SSH ssh -p 12345

This creates a custom ssh access protocol which is identical to the standard one, except with a different port number.  If you want to specify a different (or non-ssh) protocol you can do that too.  More details can be found here.

To access the repository now, you simply use this:

$ svn co svn+custom_ssh://username@server_ip/path/to/repos/ .

instead of this:

$ svn co svn+ssh://username@server_ip/path/to/repos/ .

Problem solved!

WordPress and WYMeditor

EDIT 22/04/08:
If you use the latest versions of WordPress, Admin SSL and Simple WYMeditor, then this workaround is no longer necessary.

I currently use WordPress to publish my blog, and I recently discovered that there is a plugin () that lets you use my favourite online text editor – WYMeditor – to write blog posts.

So far so good – but I encountered a problem.  I enabled the plugin in WordPress but nothing happened.  Then I discovered that another plugin I use – Admin-SSL, which unsurprisingly secures the WordPress admin pages – was not securing pages from the /wp-content/ directory, which is where the plugins are.  The page was trying to call the WYMeditor plugin script using an unsecured link, which was causing it to break.

So I added the following code to admin-ssl.php at line 370:

370	$content_url = get_option("siteurl") . "/wp-content";371	$secure_content_url = $secure_url . "/wp-content";372	$replace_this[] = $content_url;373	$with_this[] = $secure_content_url;

This fixed the first problem.

However I noticed that the autosave function was not working either.  Apparently some people find it annoying, but I find it extremely useful while I'm writing blog posts.  After spending ages looking through the code of the WYMeditor plugin, through the WYMeditor documentation, and the autosave() function in WordPress, I found a way to fix it.

There is an HTML textarea element called 'content' which WYMeditor replaces, and which WordPress uses to get what you are writing.  When you click the 'Save' button, WYMeditor updates that textarea element with whatever you've written, and WordPress saves it.

However, the WYMeditor plugin only updates the textarea element when you click the save button, so the autosave() function doesn't work – when it looks at the 'content' textarea element, it's empty.  What we need to do, then, is automatically update the textarea element when the autosave() function is called.  Thankfully, WYMeditor has an inbuilt function to do this, called update().

Two things need to be done.  First, open simple-wymeditor.php, which is the main file for the WYMeditor plugin (it's probably in /wp-content/plugins/simple-wymeditor/).  Comment out lines 143 and 168, to look like this:

143	//jQuery( function() {...168	//});

This allows us to access the WYMeditor functions through jQuery.  Save the file and close it.  Now open the WordPress autosave.js file (in /wp-includes/js/).  At line 98 insert the following:

98	if(wym = jQuery.wymeditors(0)) wym.update();

This updates the 'content' textarea element if it can find a WYMeditor object, so the code won't break if you disable the WYMeditor plugin.

So there you have it – my WordPress now works with the WYMeditor plugin, and I'm very happy, and very tired after a couple of hours reading other people's code!

Addendum

In writing this post I used <pre></pre> tags to display the code.  Due to a bizarre filter, WordPress doesn't let you do things like have <br/> tags inside <pre></pre> tags (and many more such combinations).  So the code above, although one block of it is on four lines, WordPress was displaying it all on one long line, having stripped out the <br/> tags.

Cue much more learning of WordPress and code-reading – I now have two plugins.  The first removes the 'wpautop' filter from the 'the_content' and 'the_excerpt' tags.  This stops WordPress stripping tags that it shouldn't – now I'm using WYMeditor it is unnecessary anyway, because it creates XHTML.

The second plugin replaces all the curly quotation marks that WordPress 'helpfully' adds in with straight ones.  Sigh – at least I'm much more aware of how WordPress works than I was!  It's an absolute beast – functions and classes all over the place.  I'm sure it isn't necessary for it to be so complicated.

Top Web Development Tools (Pt. 2)

Part 1: Applications
Part 2: Code Libraries/Resources

6. Smarty

Separating form from content is a holy grail in web design – it allows you to update the user interface of a website without altering how it works. You can even have different colour schemes or skins. Smarty is a template engine for PHP which forces you to separate form and content. It is easy to use, quick to master, and has good documentation.

7. jQuery (not Prototype)

Writing JavaScript can be frustrating at best. Using a JavaScript framework (there are many available) makes things quicker and easier, and they often include simple to use Ajax funcionality. The most common (thanks to Scriptaculous) is Prototype, but I prefer jQuery. It is much smaller, and has similar effects to Scriptaculous (although, admittedly, not as many). It also (I think) has a more logical structure.

8. WYMeditor

WYSIWYG text editors are the scourge of web developers. They often create hideous code and don't work properly, no matter what they claim, and allow users to define what their text looks like, rather than your template. Cue WYMeditor, an What-You-See-Is-What-You-MEAN editor, which creates perfectly structured XHTML code. It allows the user basic formatting tools (bold, italic etc) but not font, size, colour etc. Instead, the user chooses a style type (heading, paragraph, list etc), which can fit into your template easily.

Added to that, it works extremely well, and uses jQuery. It's brilliant!

9. Behaviour

Adding JavaScript events to HTML is as simple as CSS with the Behaviour framework. It is faster than any full JavaScript framework, and works like a charm. I use it in all my projects, and highly recommend it. The script file is small as well, especially if you pack it.

10. JavaScript Packer

If you include JavaScript files in your websites, you'll want to reduce their size as much as possible. Enter Dean Edwards' JavaScript Packer. It hugely reduces the size of JavaScript files, without losing any functionality. I love it.

That's it for now – there may be a part 3, in which I will add any new tools. I hope that someone at least has found these two useful!

Eclipse and Subversion over SSH

I use subversion for my version control – and I have recently had to set up Eclipse to access the subversion repository on my new server. This proved trickier than expected, largely because of bad instructions all over the internet!

Many of them provide instructions for setting up a tunnel in putty, or through TortoiseSVN. Both are unnecessary with the right Eclipse setup.

These instructions assume you have setup a repository on your SVN server, and have imported files into it. For instructions on how to do this, please go here:

SVN QuickStart

First, you need to install WebTools (WTP) and Subclipse in Eclipse. I use the PHP Development Tools (PDT) plugin to edit PHP scripts – the PDT 'all-in-one' package comes with WTP pre-installed. Instructions for installing Subclipse can be found here:

Subclipse Update

Once you have everything installed, open Eclipse and go to the Window... Preferences.

Navigate to Team > SVN and set 'SVN interface' to 'SVNKit (Pure Java)'. Click OK.

Now go to Window...Open Perspective...Other... Select 'SVN Repository Exploring' and click OK.

In the 'SVN Repository' window, right-click and select New... Repository Location.

The URL is in the format:

svn+ssh://username@server_ip_address/path/to/repos/username is the username you use to log onto your server over SSH
server_ip_address is pretty obvious.. I find IP addresses work better than domain names
/path/to/repos/ is the full filesystem path to the repository (e.g. /home/ben/svn/)

Click 'Finish' and you will be taken to the 'Enter SSH Credentials' page.

Your username will be pre-filled. Select 'Use password authentication', and enter your password. Ensure that the port information is correct. The default is 22, but if your server is behind a firewall it is likely to be something different. Check 'Save Information' if you want to, and click OK.

Eclipse will now load your repository in the 'SVN Repository' window. For instructions after this point, check out the SVN QuickStart (the link is earlier in the post).

Top Web Development Tools (Pt. 1)

Part 1: ApplicationsPart 2: Code Libraries/Resources

There are various tools that are indispensable to me, and I thought I'd share them with the world! A lot of them are fairly standard, but this is my blog, so these are my thoughts on them!

1. Eclipse with PDT

I write my code using the Eclipse open source IDE. I settled on this after many years of using a simple text editor, Textpad. I decided I needed a text editor with real syntax highlighting, autocompletion, variable recognition – features found in Zend Studio, a hideous and slow program.

However, for a long time Zend was the best PHP syntax highlighter I could find – until I discovered PHPEclipse, and later Zend's own PHP IDE (now PDT) plugin for Eclipse. I have never looked back. Eclipse is one of the few Java programs that actually works well, and fast. PDT is still in development, but 0.7 RC3 has just been released, is very stable (it has never crashed on me), and works well.

If you want Smarty syntax highlighting, that's a bit tricker. PDT doesn't support it, but PHPEclipse has some basic Smarty syntax highlighting, so I have two Eclipse workspaces – one with PDT, the other with PHPEclipse.

2. XAMPP

XAMPP is amazing. If you are a web developer using IIS or some other web server, stop immediately and download XAMPP. It is far easier to set up and use than IIS. And, it is contained entirely within a folder. That means, if you move around from computer to computer, you can stick your Eclipse, website and XAMPP files on a memory stick and have your website anywhere. All you need to ensure is that the memory stick is given the same drive letter everywhere you plug it in.

3. Firefox with Firebug

Javascript and Ajax debugging is revolutionised with Firebug. You can even use it to optimize the objects on your pages, as it details each page request, how large it is and how long it takes to load. You can use it in design, inspecting DOM elements and displaying their style information, even the layout, with margins/padding etc. It is simply amazing.

4. Colour Scheme Picker

If, like me, you find colour scheme inspiration difficult, you'll love this tool. Simply pick a random colour that you like, and it will give all kinds of suggestions for a colour scheme. I highly recommend it. Colour Scheme Generator 2.

5. Font Picker

Similar to the previous tool, but this one allows you to compare different fonts side-by-side. It also groups the fonts by operating system, so you can choose fonts that are included in all major operating systems. Typetester.

Categories

Twitter

Recent Comments

Archives