SVNMate – an SVN TextMate plugin
I use SVN to keep my work files synced to my portable hard drive and work iMac and for keeping some of my other projects synced up with an online SVN account. TextMate is my chosen tool for website authoring so this SVNMate plugin is really useful. To install just download the plugin and drag it’s icon onto the TextMate icon. Then open TextMates Preferences > Shell Variables and add TM_SVN and the location of your SVN install, in my case that’s /usr/local/bin/svn. I really wish I’d found this sooner.
My ideal CMS text editor
I recently read Richard Rutter’s The Elements of Typographic Style Applied to the Web after reading about it here. The essay makes several mentions of CMSes and the application of tags to help in the display of text. This got me thinking about the shortcomings of CMSes.
CMSes are a great way to empower website owners. Allowing someone to update their own site without needing to learn HTML or CSS. The use of JavaScript text editors like FCKeditor and Tiny MCE mean that people can even add styling to their content.
Since starting to work on CMS based websites some five years ago I’ve always had a nagging doubt about the code they allow a user to produce. Frequently not accessible, validatable or sometimes even readable. The problem with these editors is you are giving someone the means to completely wreck the look of their website, a website they may have paid thousands of pounds to have designed and built. I believe that part of being a web designer is setting boundaries for users looking to edit their own content. Below is my ideal text editor for a CMS.
I would let users set titles as <h2> – <h6>. I would prevent them from using <h1> as that would be retained for the page heading and generally you only have one of those. Also I would only allow <h*> tags on a maximum amount of words – say 20, to try and stop users from misusing <h*> tags as a means to make text bigger.
I would convert any use of <b> or <i> tags to <strong> and <em> as they are more symantically correct.
I would remove any <font> tags – they have no place in modern web design.
I would remove any inline CSS as this is not content. A CMS should be about editing content not making design changes. That’s my job and it’s what your paying me for, just because you can set that text colour to red and the background to yellow doesn’t mean you should.
It would be great to be able to detect when someone has typed their content all in caps and either convert it to lowercase while informing them that all caps is unreadable. Again maybe set a tolerance of 10 words to allow for any acronyms.
Tables are a difficult subject. They can be legitimately used to display product data but they can also be a source of annoyance to us web designers, they don’t always play nice with CSS. I would like to be able to switch allowance of tables on or off based on the type of website – is it a shop or a blog? A shop might need to display product data for example.
Some customers will want the freedom to change the colour of text and font faces and no amount of trying to educate them will change their minds, but for the most part setting some ground rules like the ones suggested above will help users maintain their site to the standard it was authored at. Which will also help with accessibility.
Preventing WordPress authors from editing menu buttons
You setup a WordPress based website for someone, create some pages as a part of the site structure and design a menu to accommodate those pages. Having done all of this work you ideally want to protect the client from ballsing the menu and the look of the site up.
The Plan
Setup the top level pages with the admin account. Setup an author level account then download and install the Role Manager plugin. Enable the following for the client login:
- Delete Others Posts
- Delete Pages
- Delete Posts
- Delete Private Pages
- Delete Private Posts
- Delete Published Pages
- Delete Published Posts
- Edit Others Pages
- Edit Others Posts
- Edit Pages
- Edit Posts
- Edit Private Pages
- Edit Private Posts
- Edit Published Pages
- Edit Published Posts
- Manage Categories
- Moderate Comments
- Publish Pages
- Publish Posts
- Read
- Read Private Pages
- Read Private Posts
- Upload Files
Download and install my Protect Title plugin. Now when the client edits a page created by admin they won’t be able to edit the title, keeping the menu looking nice.
Removing the 3 pixel gap in Hotmail email
Hotmail has a bug where a gap of 3 pixels appears in between images, even when the IMG tags have no spaces separating them. To fix this annoyance I’ve found that adding style="display: block;" to the IMG tag fixes this. I apply the fix as an inline style to avoid the CSS filtering of web based email services.
You should end up with the following for images that need the 3 pixel gap removing:
<img src="image.gif" width="100" height="100" alt="Image" style="display: block;" />
Google Maps with UK postcodes
Whilst checking the work website yesterday I noticed that the Google Maps powered postcode based route finder had stopped working. Back when the site was in developement I found to my delight that UK postcode searching via Google’s API was now a possibility, so we decided to have an interactive map rather than a boring static one.
I did some research and found this from a Google employee:
Earlier this week, we fixed a bug that was allowing the precise location of full UK postcodes on the Google Maps API. This is functionality that, due to data usage terms and conditions, we cannot yet offer our API users but we hope to be able to offer this service in the future.
The data usage terms and conditions refers that the fact that the Royal Mail own the copyright on postcode data and charge rather hefty fees to license their database. Not wishing to pay those fees I set about finding another way and found this page. This example uses Google’s Local search to geocode the postcode then uses that geocode to search Google Maps. I used the usePointFromPostcode function in our own map and modified some existing bits in map the page to make use of the new function. And finally it’s now back up and running.
CSS frameworks
For the last year I’ve been using a set of bare CSS templates I’d built as the basis of the websites I design. I’m thinking of updating them so I need to revisit the following:
Font sizing
Currently I’m using pixels with a conditional stylesheet for IE that contains font sizes set in the equivalent percentages. The theory was I set up the IE sizes last when the site is basically finished, all I had to do is run through the main CSS and match any pixel sizes to percentages. The main problem I had with this was the addition of elements in the site after I had designed the pages led to the IE sizes not always being set, a problem with project management really and there being too much interpretation of the spec.
Image replacement
Should I be replacing say an H1 tag in the header with a logo image? This would make setting up PDA versions of sites easier but what are the implications of this? What about those people who have images switched off but CSS switched on?
Image resize WordPress plugin
One thing I have always thought was missing from WordPress was the ability to resize images added to blog posts. Particularly for people who may not be Photoshop savvy (apparently they do exist).
The iMax plugin adds this functionality. It allows the blog admin to set various options including maximum width, height and file size. We’ve used it on the Your Tomorrow blog.
Download eMusic free track script
eMusic offers a free track of the day to download. Being a bit lazy or forgetful I wrote a script to download the track for me. To make use of this script you need a computer that runs Perl and cURL. To set up the script to run automatically you ideally need the computer to be permanently switched on and connected to the internet.
Step 1
Download the eMusic download script, unzip it and edit the following lines:
$username = "name@domain.com"; $password = "password"; $scriptpath = "/users/name/emusic/";
Then upload to your remote shell account if you are going to run it that way.
Don’t forget to make the script executable.
Step 2
Create a ‘files’ folder in the same place as the script. This is where the mp3’s will get downloaded into.
Step 3
If you want to have the script run automatically then you need to set up a cron rule.
New website design
I’ve completed the redesign for this site. It comes not long after the previous revision but I wasn’t entirely happy with the style of that version. I went with a wider design for the first time, everything has more room to breathe and as its my personal site I’m not so concerned with designing for smaller monitors. I’ve also moved the blog to WordPress rather than continue adding bits of programming to the CMS – there’s no point reinventing the wheel.