Miss Fish: 80-20 Web Development

Searchable Weblog!

Sat, 08 Feb 2003 21:48:17 GMT

Cool!

While surfing the Radio top 100 list, I notice that The Cartoonist has a simple search box just below the calendar. I didn't think I could find a free service (such as Google) until I got my own domain. I thought wrong.

So I added a search box using Pico's free search service. Now I am compliant with Day 29's recommendations for a more accessible website.

Hyperlink Histograms

Fri, 01 Nov 2002 03:44:20 GMT

A survey of the A element and attributes in the field. Bob DuCharme did one of those wacky things one does when presented with a big data set. He took Google's sample from their programming contest, and a sample of pulls from Yahoo's random URL, and surveyed how the A element was used. Yes, this is geeky, yet strangely cool.
[More Like This WebLog]

This is cool. Not sure what to do with the data. A good resource for culling the best link styles.

The Coolest Radio Trick Yet

Thu, 24 Oct 2002 06:57:29 GMT

This is the coolest Radio trick I've seen yet:

Click here to add this event to your Outlook or Netscape calendar.

Actually, it's not just a Radio trick, it's a web trick. I love it. See Blue Sky Radio for vCalendar and Radio, Part 1 and 2.

Wed, 23 Oct 2002 07:33:30 GMT

Another great, practical tip from CityDesk News:

Paul Adams explains how to provide a custom 404 error page that's more useful than the default. Here at Fog Creek, we use CityDesk to generate our 404 error page; there's no reason your 404 page can use CityScript and templates. With some creativity you can do really cool stuff. For example, set a keyword “(404)” on the most popular pages of your site, then use CityScript with the condition (keyword_contains "(404)") so that anybody mistyping a URL at your site gets an index of popular pages.

[CityDesk News]

Tricks of the Print Trade

Wed, 09 Oct 2002 07:36:24 GMT

I always enjoy Joel on Software. One of the reasons I enjoy it has nothing to do with content - I love the layout. It requires very little eye strain. The serif fonts allow the eye to recognize shapes of familiar words. More importantly, the article text forms a column that is narrow. The narrow column of text surrounded by blocks of whitespace keep the eye from being overwhelmed, and the reader is able to stay focused.

Since Nick Fink was recently quoted in CityDesk News, we learn that Joel's format is a trade secret of the Print profession:

Nick Finck: “There is an unspoken rule in print which states that text should not exceed four inches in width on a page. Any text less than four inches is more readable than any text over four inches — the reader's whiplash will speak for itself.”

[CityDesk News]

How to do it: (well, one way to do it, there are many):

<div style="width: 4in;">There is an unspoken rule in print which states that text should not exceed four inches in width on a page. Any text less than four inches is more readable than any text over four inches — the reader's whiplash will speak for itself.</div>

Javascript [1] to create DHTML [2] that looks like Flash [3]

Thu, 03 Oct 2002 06:34:17 GMT

A tiny Javascript library from Poland called Alladyn lets you create spectacular animation effects in DHTML that look like Flash, but without... Flash! And they work on almost any modern browser using very clever techniques to achieve compatibility. Check out their gallery, you'll be amazed at what's possible.
[CityDesk News]

Sun, 29 Sep 2002 10:25:29 GMT

Style-O-Mattic is a pretty cool applet. I cannot provide a direct link to it, but if you go to Builder.com's section on Style Sheets you can launch it in a separate window.

Update [9/30/2002, 2:08 AM]: there is a direct link to the Style-O-Mattic: http://builder.cnet.com/webbuilding/pages/Authoring/CSS/CssMaker/index.html.

Thanks Bubba (if that is your real name).

Found it: the dictionary hyperlink

Tue, 24 Sep 2002 05:25:23 GMT

<A href="http://www.dictionary.com/cgi-bin/dict.pl?term=rapport">rapport</A>

XSLT

Sun, 22 Sep 2002 03:58:59 GMT

20% of the techniques do 80% of the work. XSLT must be one of them.

Resources:

Using XSLT to Transform XML by J. David Eisenberg at A List Apart
XHTML and CSS StyleGuide from the New York Public Library
One-click XHTML Validator Bookmarklet one of Tantek's Favelets
Date-Time Processing Module in XSLT via [Sanjay's Journal of Coding Tips] via [AFrogInTheValley]

(All Links via [Zeldman])

Correction to post on Anchors [HTML 1A].

Sun, 22 Sep 2002 00:28:18 GMT

The sample code given in the original post HTML 1-A Lesson: Anchors was incorrect.

The pound signs # should be used in the links to the anchors instead of the anchors themselves:

Before, Incorrect:

Link to the anchor: <A href=enablingCategories>How do we enable categories?<A>

The Anchor: <A name=#enablingCategories>How do we enable Categories?<A>

After, Correct:

Link to the anchor:
~~<A href=enablingCategories>How do we enable categories?<A>~~

<A href="#enablingCategories">How do we enable categories?<A>

The Anchor:
~~<A name=#enablingCategories>How do we enable Categories?<A>~~

<A name="enablingCategories">How do we enable Categories?<A>

Before, Incorrect:
Link to the anchor:	`<A href=enablingCategories>How do we enable categories?<A>`
The Anchor:	`<A name=#enablingCategories>How do we enable Categories?<A>`

After, Correct:
Link to the anchor:	~~`<A href=enablingCategories>How do we enable categories?<A>`~~ `<A href="#enablingCategories">How do we enable categories?<A>`
The Anchor:	~~`<A name=#enablingCategories>How do we enable Categories?<A>`~~ `<A name="enablingCategories">How do we enable Categories?<A>`

HTML 1-A Lesson: Anchors

Sat, 21 Sep 2002 07:50:32 GMT

Al Macintyre has been adding so many great sources to his article Understanding Radio Categories, the page has grown into nine (yes, I counted) screen lengths of information. One of his eRadio ideas is to accomodate the multitude of information by updating the presentation:

"It would be really nice if each of the summary questions up top was a link to the detail answer down below." "Down the road I hope to learn Radio Outlining..."

I can't help out with the outlining, but I do know how to make anchors. Imagine a hyperlink that does not jump to another webpage, but jumps to another heading on the same webpage. Here is the code:

<A href="#enablingCategories">How do we enable Categories?<A>
<A href="#categoryGotchas">What are some gotchas, to avoid, that can get us into trouble?<A>
<A href="#postingToCategories">How do we post stuff to Categories?<A>

<A name=enablingCategories>How do we enable Categories?<A>
Aug 3 I talked about this.
Russ Lipton has several documents of relevance.

<A name=categoryGotchas>What are some gotchas, to avoid, that can get us into trouble?<A>
Russ Lipton has several documents of relevance. Check out...

Here is how it will look:

How do we enable Categories?

What are some gotchas, to avoid, that can get us into trouble?

How do we post stuff to Categories?

How do we enable Categories?

Aug 3 I talked about this.

Russ Lipton has several documents of relevance.

What are some gotchas, to avoid, that can get us into trouble?

Russ Lipton has several documents of relevance. Check out...

Ok, Al - when you learn of Outlining, will you explain it to the rest of us? :)

Mark Writes Great Teasers. Nicely done. You too, Mark.

Wed, 18 Sep 2002 03:50:37 GMT

MarkPasc courteously provides this option for subscribers: Content or Headline.

Top left: the Headline markpasc.org feed conserves vertical space in my aggregator . The words are small in number but well chosen.

Below left: the Content markpasc.org uses the more traditional structure: title plus body.

I prefer the Headline version. The item titles usually provide a good hint. "Wee Winget" is an update on his Winget program; he's been at it for about a month now.

Nicely done, Mark.

DiveIntoMark's brevity provokes intrigue. Read this teaser from today's news:

"Heather did it well. Michael does it. Leslie does it every day. (Dean does it with his dog, but never mind that.) As of today, I'm doing it too. (474 words)"

I just had to follow the link. Nicely done, Mark.

Top Style: lets you build standards-based Web sites

Tue, 17 Sep 2002 02:20:13 GMT

I had dinner with Chris and Gretchen on Saturday night and Chris showed me[snip]... a tool called "Top Style" which lets you build standards-based Web sites.
[Scobleizer Radio Weblog]

Looks interesting, and the price is right.

Spell Check for Web Forms

Thu, 29 Aug 2002 10:43:03 GMT

This is a bookmarklet. Can be used to check a multiline text field before pressing "submit". Could prevent some embarrassing usergroup postings. Works with IE. I found this gem while meandering Blogarithms.

I got this from the 9/3/02 issue of PC Magazine. (Can't find it on line.) Here's some JavaScript that works with IE:
oShell=new ActiveXObject ("WScript.Shell"); oShell.SendKeys ("^c"); //copy oWord = new ActiveXObject ("Word.Application"); oWord.Visible = true; oWord.Documents.Add(); oWord.Selection.Paste(); oWord.ActiveDocument.CheckSpelling(); oWord.Selection.WholeStory(); oWord.Selection.Copy(); oWord.ActiveDocument.Close(0); oWord.Quit(); var nRet = oShell.Popup ("Apply changes?\nClick OK to replace all selected text.", 0, "Spell Check Complete", 33); if (nRet==1) {oShell.SendKeys ("^v");}
Paste the above into a file such as spellcheck.js. Drag the icon for this file to IE's "Links" toolbar and rename the link. Select text in any browser text box and click on the button. It launches Word, runs the spell checker, and replaces the text. Not ideal, but better than nothing.
[Noise]

Very Cool: Hyperlink Tooltips let Surfers Hover before they Leap

Sat, 24 Aug 2002 22:23:44 GMT

I had seen this before: I am on a webpage, I position the mouse over a hyperlink but I don't click. If I hover long enough, a tooltip pops up giving a description of that link's target. (I would put a screenshot here but no images seem to upstream to the cloud, sorry :)

Before, no tooltip: Blogfish
After, with tooltip: Blogfish

So today I was admiring the photos on photomatt.net. I jumped to his faq page which listed this poignant inquiry: does his website have any hidden tricks? His reply:

"Tons of them! There are a lot of hidden subtleties you might pick up, like the alt tag on some of the pictures or the title tag on some links. Let your mouse linger!"

And it clicked (ok, think of a better word for clicked, to mean epiphany, sudden clarity). The HTML Link tags (<A HREF="www.scripting.com>Scripting</A>) supports a title attribute. The title attribute value, it turns out, is the text that appears in the tooltip. Very cool!

Before, no tooltip:

<A HREF="http://radio.weblogs.com/0111198/">Blogfish</A>

After, with tooltip:

<A HREF="http://radio.weblogs.com/0111198/" title= "Knowledge Repository. Idea outlet.">Blogfish</A>

Niceley Done: Rebecca Blood Provides Link Previews with no Extra Words

Fri, 23 Aug 2002 16:42:04 GMT

Even Textism and diveintomark were impressed:

Link Differentiation.
Like Mark Pilgrim I was impressed by Rebecca Blood’s clever decision to differentiate outgoing and internal links with colour using CSS.
[Textism]

She reduced necessary user clicks by one. Even with high bandwidth, one less click makes a big difference.

Current WebDevelopment Question: Dreamweaver

Fri, 23 Aug 2002 07:10:25 GMT

I changed a template in Dreamweaver, then saved it to my java project's html folder. Dreamweaver notified me that I was not saving the template to a "site" and changes to the template would not be applied.

In a nutshell: Can I re-create a Dreamweaver "site" with existing templates, style sheets, and html docs?

Phe-ew! I Don't have to Redo all Font Tags :)

Tue, 20 Aug 2002 05:16:19 GMT

Ian Rowan writes: "You can force websites to respect your text size settings in Internet Explorer with this bit of mumbo-jumbo: Tools, Options, General, Accessibility, and check "Ignore font sizes specified on web pages." Screen shot.
[Scripting News]

Wed, 14 Aug 2002 03:38:31 GMT

Text formatting rules sampler:

To make text smaller, surround it with two apostrophes.

 To make it larger, surround it with three:
 ''smaller''  '''larger'''

by HectorPlasmic.

Nicely Done: Poalo's Format Clearly Distinguishes Quote from Annotation

Tue, 13 Aug 2002 20:10:01 GMT

Do to templates, the look may change but Poalo accomplishes quote and annotation with elegance. This blockquote is both indented and italicezed. It's further set off by a vertical dotted line as its left alignment boundary. This style removes the need for quotation marks.

His annotation is outdented and non-italicized. Very clear, nicely done.

I Love the Way He Links

Tue, 13 Aug 2002 19:35:59 GMT

http://phonezilla.net/designgeek/

Unvisited links are underlined with dashes (which I still have not figured out).

Visited links have a solid underline.

No Excuses

Tue, 13 Aug 2002 18:34:04 GMT

Clagnut could make the rest of us look bad. When I stumbled upon him I subscribed right away because of his simple presentation that used color to accomplish subtle emphasis. Turns out he's color blind!

Thoughtful dialogue.
"I love the new version of TopStyle (Pro 3). Its colour picker is a piece of genius, packed with so many features (all of them useful in their own way), particularly to colour ‘blind’ users such as yours truly."
[Clagnut]

Weblog Refactoring - New Category: 80-20 Web Development

Tue, 13 Aug 2002 02:15:12 GMT

[dive into mark]: CSS archive.
"The css-discuss mailing list now has browseable, searchable web-based archives."
(19 words)

Tue, 13 Aug 2002 02:04:36 GMT

[dive into mark]: Accessibility tools.
"Ian Lloyd's tools for building accessible tables and forms, plus some other useful bookmarklets."
(40 words)

Mon, 12 Aug 2002 09:12:57 GMT

[Al Macintyre's Radio Weblog]:
"Here's Jim Frazier's minimum requirements for good web design". They have to do with speed of access by people with legacy PC standards; knowing about some stuff behind the scenes where so far I am but an infant; good links to everything on our site; eye friendly; no obvious spelling or grammar errors (I have not yet downloaded the spell checker for this thing so doubtless I have quite a few).

"Essays on Using e-mail professionally and efficiently; Internet and Search Engine Marketing; Technology Procurement; Web Design.

"All these links are to resources at the Gadwall Group."

Headlines 08.11.2002

Sun, 11 Aug 2002 20:53:25 GMT

[Better Living Through Software]: RTF in XML?.

"Apparently Jeni Tennison is presenting a way to do overlapping markup. Jeni wrote what I think is the best pragmatic, real-world XSLT book of all time, but the idea of overlapping markup hurts my brain. It can't possibly be a good idea, can it?"