HTML syntax highlighting for Silverstripe .ss template files in vim

Posted on August 4, 2009

By default vim opens .ss files with some other file format syntax highlighting.

To enable HTML (actually XHTML) syntax highlighting on your .SS Silverstripe template files, create (or edit) your ~/.vim/filetype.vim file. Then enter this:

au BufNewFile,BufRead *.ss      setf xhtml

Then open a .ss file and it’ll give you nice HTML syntax highlighting. And because it’s in your home directory, it’ll keep working even after you upgrade vim.

Pixel Perfect Firefox Extension

Posted on June 30, 2009

When I write HTML and CSS I’ll usually create a mockup – I take a high quality JPG of the design and put it into a very simple page that shows the JPG, centered on the screen. Then in Firefox I switch back and forth between the page I’m working on and the mockup so that I can get the design pixel-perfect.

Well today all that will change. I’ve discovered the Pixel Perfect Firefox Extension which allows me to overlay the mockup over what I’m designing.  You can set the opacity and quickly toggle the overlay on and off.

I’m not sure about centering – it doesn’t seem to do that automatically. But I think I could use the MeasureIt extension to get the width of the main column, set it in CSS with ‘margin: 0 auto’ to centre it, and then drag the overlay to match and base everything off that.

My job just got slightly easier again.

Awesome!

Remove empty LEGEND tags in Silverstripe search form

Posted on May 1, 2009

I’m pretty obsessive about my HTML validating with no errors and no warnings. It bugs me that when I use Silverstripe’s incredibly convenient $Searchform in the template that it outputs an empty legend tag inside the fieldset.

There’s an easy way to fix this:

1. Create a templates directory inside mysite.
2. Copy sapphire/templates/SearchForm.ss to mysite/templates/SearchForm.ss
3. Edit your copy of the file and remove that pesky <legend></legend> line
4. Refresh your page that uses the searchform and bathe in the warm glow of a error and warning free page!

Thanks to Maksfeltrin in the Silverstripe forums for pointing this out.

Strip <span> tags from HTML in vim

Posted on April 6, 2009

When upgrading a website you might see source code like this:

<span style="font-family: Arial; color: #0000ff; font-size: small;">Some text goes here</span>

You’re using CSS now and all those <span> tags are ruining it. In gvim, do this search and substitute:

%s/<span.\{-}>//g

Then to get rid of the </span> tags, do this:

:%s/<\/span>//g

1px high DIV in IE6

Posted on February 23, 2009

Very occasionally I’ll use an empty DIV for decoration, and in CSS use height: 1px.

In IE6 to make this work you need to put comments inside the DIV, otherwise it’ll display at the height of the font you’re using.

<div class=”line”></div>

becomes

<div class=”line”><!– –></div>

You don’t need any line-height fixes in the CSS. Yes, it’ll add to your markup a bit, but you should probably be explaining why you’re using meaningless, empty DIVs anyway.

Assorted Handy vim Commands, Part 1

Posted on January 28, 2009

To reverse the order of lines, eg 1-5
: 1,5 g/^/m0
For example,

one
two
three
four
five

becomes

five
four
three
two
one

To remove blank lines
: %g/^$/d

Delete all lines that don’t contain “string”
: %v/string/d

Turn all links in an HTML file into ‘#’

Posted on January 24, 2009

Replace all in the current file instances of:

<a href=”link_to_somewhere.html”>link</a>

with:

<a href=”#”>link</a>

:%s/\(a href="\)\(\S\+\)\("\)/\1#\3/g

This is great if you’ve got a big HTML file that you want to demo to a client where you don’t want the links to do anything when clicked.

You could also use javascript to do the same thing – just “return false” for all <a> elements on the page.