David Nash

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.

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!

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.

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

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.

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

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.