Markup category archive

Release: About This Site Firefox add-on, v. 1.2

January 30th, 2007 | Filed under Open source, Extensions, Release, XUL

I got all fancy-pants with XUL and Firefox preferences in the latest release of About This Site, a Firefox add-on that hooks you up with all sorts of meta-services when you’re researching a web site (like Alexa graphs, del.icio.us bookmarks, a WhoIs query, etc.)

The new release is only a minor point upgrade but feature-wise it’s major: now you can configure whatever meta-lookups your heart desires in the menu all by yourself. (This will also head off all that email I get from folks requesting that I add their new webapp to the menu.)

Current About This Site users can upgrade just using the auto-update feature; go to your Add-ons in Firefox, right click on About This Site and hit “Find Update.”

What’s more, the fine folks at Lifehacker are funding some of my whimsical open source development efforts, so the extension and some more little utilities I’ve got in the works will be hosted there, under the new Lifehacker Code tag.

A girl cannot subsist on blogging alone. Meep.

Lifehacker Code: About This Site add-on (Firefox)

July 27th, 2006 | Filed under Startup dot com, RSS, Web 2.0

Talk about the the paradox of choice: A list of over 100 RSS readers. Oy.

Clearbits - CSS based icons

February 9th, 2006 | Filed under CSS, Icons

The Clearbits icon set can be styled and colored using CSS. Very cool… and what looks like a very extensive range of icons. I only wish the rounded corners didn’t look so pixelated in Firefox on WinXP.

Clearbits [Some Random Dude]

Lifeblog (mostly Atom) Posting Protocol Example

December 4th, 2005 | Filed under PHP, XML, API, Atom

I’ve been using Nokia’s Lifeblog software on both the PC and my phone to post to my cameraphone blog for months now and having a ball with it. (See my review of Lifeblogging with the Nokia 7610 for more info.)

Right now I’m using TypePad to host the web part of it, but if I ever want to build the capability into Scribblish (and I will) Robert Price has a nice walkthrough on how he did it for his homegrown PERL-based CMS. Also of interest alongside this - an Atom PHP implementation.

Robert Price - Lifeblog Posting Protocol Example [Robert Price]
PHP AtomAPI Implementation [Isolani]

SilverStripe Tree Control

November 7th, 2005 | Filed under Javascript, CSS, DHTML

Here’s a really neat DHTML expand and collapse tree view for list items. Simply include a javascript and CSS file into your page, then apply the appropriate ID’s to your list. Check out my quick and dirty demo.

Thanks, Su!

SilverStripe Tree Control

Ten CSS tricks you may not know

September 8th, 2005 | Filed under CSS, Reference

I didn’t know about 4 of these. The vertical alignment with CSS and image replacement seem particularly useful.

Ten CSS tricks you may not know [Webcredible]

Email address obfuscator

September 4th, 2005 | Filed under Code snippets, HTML, Javascript, Essential Tools

Every time I have to publish a clickable email address on a web page I wind up Googling Javascript tools that obscure the mailto: link and telltale user@example.com format so that spam bots can’t easily pick up the address and tsunami the user with junk.

There are plenty of tools out there, but none that do all that I wanted: namely, encode the ‘mailto’ bit and display a live preview of the link. So I’ve gone ahead and thrown one together of my own.

Go ahead and give it a whirl, it’s got exciting iframe cross-scripting going on for the preview. *

* For now it’s Firefox-only while I work out the IE and Safari compatibility issues. Tested and works now on Internet Explorer 6 with SP 2 on Windows, Safari on Panther and Firefox Windows and Mac.

Javascript Email Address Obfuscator by Gina Trapani

Create a favicon.ico from any photo

September 3rd, 2005 | Filed under Code snippets, HTML, Design, Essential Tools, Browsers

FaviconThe makers of one of my favorite markup/text/code editors on Windows, HTML Kit, have made a web service available which creates favicons out of images.

Favicons are the small images just before the URL in the address bar of many web browsers.* The images are in the .ico file format, so this web service takes any graphic (like a jpg or gif), resizes it and converts it to the .ico format which includes both a 16×16 and a 32×32 pixel version embedded within it.

It’s a tough challenge finding an image that is recognizable at that size, but totally worth it for the visual branding it brings to your site on readers’ and users’ tab bars and bookmark lists.

Once you’ve created an unzipped your favicon.ico to the web server, include the following inside your pages <head> tag to activate the icon:

<link rel="shortcut icon" href="/path/to/your/favicon.ico" type="image/x-icon" />

* Firefox’s support is probably the best, displaying favicon’s on bookmarks, tabs and in the address bar. Internet Explorer’s support for favicons is pretty much nonexistent.

FavIcon from Pics — how to create a favicon.ico for your website [Chami]

Remove default padding and margins

September 3rd, 2005 | Filed under Code snippets, CSS

Most web browsers add default padding and/or margins to certain HTML elements; for example, and unstyled <body> or <p> will have space around it, depending on the browser. To start with no padding or margins, begin your CSS stylesheet with the following:

* { margin:0; padding:0; }

From there explicitly add padding and margins to elements in your stylesheet by declaring CSS classes as usual. See an unstyled page with default padding. Compare it to a page with unpadded elements including the CSS bit above.

Update: Kevin Hale’s quick start CSS templates include the * element above with font-family and font-size, too.

How to use the robots META tag

September 1st, 2005 | Filed under PHP, Code snippets, HTML, Search Engine Optimization

The robots <meta> tag in the <head> of your web page tells well-behaved robots (like the Googlebot) whether or not to index a page and whether or not to follow links on a page. For bloggers and zine publishers, robots should only index the permanent locations of posts, not the ever-changing front page or archive pages.

To use meta tags to direct the Googlebot to your permalinked post locations, insert the following in the <head> on your front page and archive pages:

<meta name="robots" content="noindex,follow" />

That says, “Hey bot, don’t index this page, but follow the links.” You don’t want these pages indexed because they will change every time you post to your site. The posts’ permanent locations, which should be linked on your front page, will never change however, and so the robot should follow the links and index them. Those permanent locations of your posts should have the following in the document:

<meta name="robots" content="index,follow" />

Alternately, if you don’t want the links in your posts followed but you do want your posts added to the search engines’ indices, use:

<meta name="robots" content="index,nofollow" />

To achieve this in a WordPress template or any PHP page where $single is set if you’re viewing a single post’s permalinked location, insert the following into the templates that include <head> tags:

<meta name="robots" content="<?php echo (!$single?'no':''); ?>index,follow" />

HTML Author’s Guide to the Robots META tag [robotstxt.org]

iTunes Library reports

August 31st, 2005 | Filed under PHP, Code snippets, XML, MySQL

Developer Alex King’s released a PHP/MySQL app that imports your iTunes library and displays reports like your top rated artists based on number of songs.

The code imports iTunes’ Library.xml into 3 MySQL tables using PHP 5’s XML libraries, like this:

Even Alex says that’s “an ugly hack.” What’s the better way to handle it without the output buffering?

Either way, I’ve posted my iTunes library reports using Alex’s app.

alexking.org: Blog > iTunes Stats [Alex King]

XHTML and CSS quick start templates

August 30th, 2005 | Filed under HTML, CSS

Designer Kevin Hale publishes the set of templates he uses to start coding up XHTML and CSS documents. Being a non-WYSIWYG editor user myself (go plain text!) these will help. (Not to mention there are CSS properties listed there I don’t recognize, so using these will be a good learning experience, too.)

Quick Start Your Design with XHTML Templates [Particle Tree]

Drag and drop sortable lists

August 30th, 2005 | Filed under Javascript, CSS, DHTML

Tim Taylor’s drag and drop sortable lists with Javascript and CSS could be a useful dynamic control on a web page. I use it in the not-yet released Scribblish for authors to reorder custom fields on the article edit page. It would also work well to reorder photos in a gallery app. Here’s a few examples of the drag and drop lists in action.

Drag and drop sortable lists [Tim Taylor Consulting]

Highlight PHP source in HTML

August 30th, 2005 | Filed under PHP, Code snippets, HTML

PHP’s highlight_string function formats and colorcodes PHP source in HTML, which will come in very handy for publishing code snippets on this site.

For example, a simple class called Greeter echoes “Hello, $x” to the screen. It’s source code is formatted with colors and indentation for HTML like this using highlight_string:

Here’s Greeter’s output, and here’s the source view.

highlight_string [PHP manual via Beginner’s PHP]