tail -f findings.out

Navigation menus on websites most often consist of a list of links. When looking through a menu, it’s not unreasonable for a visitor to have their mouse cursor over some of the menu item links for a few moments as they read through the options. Using an unadorned anchor tag in this situation has a troublesome side effect:

The title attribute of the anchor tag will appear as a tooltip, potentially obscuring menu items and minimally being a useless distraction. But removing titles from navigation links isn’t a good option, since this attribute is helpful for SEO and accessibility purposes.

When discussing this problem with friend Google, I ran across many examples of how to change the display of anchor tooltips, as well as how to hide them altogether. But what I wanted was removal of the title attribute on navigation links only when the mouse cursor hovered over them, adding it back when the cursor left. The solution I settled on consisted of jQuery’s handy hover function and some basic JavaScript. hover() allows you to specify a function to call when the cursor hovers onto an object and another to call when the cursor hovers off. Perfect! Here’s a simple example:

You can verify the functionality by inspecting one of the MenuItem links with Firebug and watching the title attribute as you move the cursor on and off the same link.

After the page is finished loading, when a cursor hovers onto any links within the div of id “main-menu” the title attribute is stored and set to an empty string (so no tooltip). When the cursor leaves, the title attribute is set back to its original value. Simple but effective!

When I’m writing HTML and CSS, being forced to type out repetitive and fixed syntax, as well as remembering the particularities of the syntax and its formatting, makes me rather unhappy. Not to mention less productive. Let’s fix that.

HTML highlighting and snippets

Place html.vim in ~/.vim/syntax. Then in a file ending in .html, start a tag, e.g. <script, and press <Tab>:

Now the skeleton of the tag will be added for you, and your cursor placed in the first place you will likely need to edit. You navigate through these editable areas with <Tab>, adding your particulars. When at the last one, simply tab again to be placed after the tag. This makes properly adding tags much easier, especially for less familiar tags that are only occasionally needed. Here’s another example with a tag that is often needed and quite tedious:

The <{}> indicate places you can navigate to with tab. Once you are in one and tab past, those characters are removed. You can also add javascript.vim in ~/.vim/syntax, and the previous script will load this in appropriately.

This script also provides color highlighting for matching filetypes. When in a file ending in .html, type “:help html.vim” to see more information.

Closing tags

It’s also useful to be able to trigger close tags, if you started typing them manually. I find this most troublesome when editing HTML and XML. To add this capability, download the latest version of this script in ~/.vim/ftplugin/html.vim.

Then when you have started a tag and wish to close it (in files ending in .html), press <Ctrl> + <_> (that’s an underscore, so Shift + -). This will insert the close tag matching the closest previous open tag under the cursor:

Formatting

The following directives in your ~/.vimrc will make proper formatting automatic for CSS and HTML files:

Watch your sppellinng

While writing HTML code involves plenty of code, you also end up writing text that others might just see. Don’t let mistakes in spelling slip by any more than you would let syntax errors. Add this to your ~/.vimrc to be able to toggle display of spelling errors with <F7>:

This post explains more advanced commands, such as bringing up suggestions, as well as customizing the formatting.

Tidy up

Being able to clean up your HTML code with a single command, making it more standards compliant and easier to read, is a great boon. To get this working for vim, first install tidy, an HTML syntax checker and reformatted. On Ubuntu, it’s available in the repository as “tidy”.

After that’s installed, add the following lines to your ~/.vimrc:

Now when in files ending in .html, type “:make”. All the errors Tidy found will be shown a list. Then press Enter to be taken back into the file, with the cursor on the first error, which is described at the bottom of the window:

Press “:cn” to move to the next error found, and “:cp” for the previous. As you encounter each error, you can fix it and move on. Once done, save the file, and run “:make” again to verify everything is fixed.

For most of my web page reconnoitering, Firebug fits the bill quite nicely. There are occasions, however, when I simply need to view larger swaths of HTML code, without all of Firebug’s features in the way. The well-used View Source can work well:

But when the structure of a page is fairly complicated, seeking to the section of code desired can be time-consuming.

And so we can do better by selecting the part of the page that is of interest, right-clicking, and selecting “View Selection Source”:

This brings up the entire page’s source, but centered on the selected part, with that part of the code highlighted. Perfect!

Except for a small oversight: The code browser used with View Selection Source detects and corrects malformed HTML! When one is trying to correct bugs on a web page, this behavior can wreak havoc. I’ll provide a real example. I needed to scrape a table from a webpage. I then needed to pull certain rows from this table for recording, ignoring others. This was created and worked well, until one day it suddenly broke. I suspected the structure of the page holding the table had changed, causing issues for parsing. So I went to the page, selected the end of the desired part of the table, and chose View Selection Source. Strangely, there was no malformedness to be found! After a lot more debugging, I happened to do the same check again, but by using View Source and looking for the section of interest. Lo, and behold! A malformed tag. Now I knew what I needed to fix, way after I needed to.