Simian Design, by Tony Stephens

Spruce up your search box

d’bug has a nice writeup on recreating the search field using CSS.

Normally I wouldn’t be a giant fan of changing the default input/form fields in a browser.  I think having those standards that everyone recognizes and know how to use is a powerful tool. Deviating too much from them is a risky proposition at times.   At least in my opinion it is.
But that being said, his end result is nice.  It seems to work.  And as a concept piece it’s cool. Go check it out.

Two web-related links today. Forms and jQuery.

Ok, two quick links today of useful pages that I ran across.

One is a LONG list of links that deal with building better forms. Web form basics, usability, accessibility, form design, form processing, validation, and generators are all covered.

The other is a useful page on 5 JavaScript Tricks Made Easy with jQuery. Swapping form fields, character countdowns in textareas, centering a div popup, collapsing table columns, and reading RSS are the tricks.

Handling Keyboard Shortcuts in JavaScript

Making Keyboard Shortcuts in JavaScript is brilliant.  It’s a simple function that allows you to extend keyboard shortcuts easily.  And by easy, I mean easy.

shortcut(”Ctrl+Shift+X”,function() {
alert(”Hi there!”);
});
That’s an example.  And I like it.  Now to see this easily made into a jQuery plugin….

Peter’s Blog - The window.onload problem (still)

Peter writes about the still present window.onload problem. It’s a most excellent article, and you should go read it.

The base problem is that if you truly do seperate presentation, structure and interaction (HTML, CSS or Javascript), then you can be presented with a situation where a large image is trying to load, preventing from the window.onload from firing, which is preventing the Javascript from attaching the functions needed. If that Javascript doesn’t fire, the user can then easily break the page.

Luckily Peter outlines several solutions, all very easily explained.

JSLog - a Lightweight Ajax logger

JSLog is a JavaScript logger. It looks a little different than the Yahoo! Logger, but covers much of the same type of functionality.
I’m still playing with both of these tools, but they look nice.

Fancy Searching for your site.

Get Google Ajax Search. A nice and easy post, well written with code examples that will give you a nice google search of your site in a fancy Ajax box.

I haven’t implemented this yet, so I can’t comment as to how easy it is, or how well it works.  But it looks nice, the implementation on his site is nice, and looks well worth checking out.

Tabs within a textarea

Tabs within textareas. The real secret is if (event.keyCode == 9) which checks for the tab within the textarea.

The script is even extra smart and checks for backspaces, deletes, cursort movement, etc.  It’s really quite smart.   Go check it out.

Firebug

Firebug is a Firefox extension that lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including an error console, command line, and a variety of fun inspectors.

Design Links

A bunch of design and development links for you today. The majority (90%?) of these links came from [etc][via] the past couple of months.

* [Create really cool new windows][1] using [prototype][1a]. You can then use [script.aculo.us][1b] to have the sexy effects on the window. You _must_ try the demos.
* [24ways][2] really deserves it’s own post. It’s got [24 great tutorials/posts][2] on how to do things. Things such as:
* [Swooshy Curly Quotes without Images][2a] is great for pullout quotes.
* [Improving Form accessibility with DOM Scripting][2b].
* [An explanation of ems][2c].
* Russ Weakley shows us how to create [simple, accessible external links][3]. He uses a class in this example, but I’ve seen the same thing done using a Regex parser to loop through all the links. But that’s probably a bit much.
* [Tagcloud lets you create and manage clouds][4] with content you are interested in, and lets you publish them on your own website.

[1]: http://blogus.xilinus.com/pages/javawin
[1a]: http://prototype.conio.net/
[1b]: http://script.aculo.us/
[2]: http://www.24ways.org/
[2a]: http://24ways.org/advent/swooshy-curly-quotes-without-images
[2b]: http://24ways.org/advent/improving-form-accessibility-with-dom-scripting
[2c]: http://24ways.org/advent/an-explanation-of-ems
[3]: http://www.maxdesign.com.au/presentation/external/
[4]: http://www.tagcloud.com/
[5]: http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
[5a]: http://www.gr0w.com/articles/code/php_5_star_rating_system_using_hreview/
[6]: http://www.formarchitect.com/index.php
[7]: http://www.dragon-labs.com/articles/octopus/
[8]: http://www.skimcss.com/skimlist
[9]: http://www.smileycat.com/miaow/archives/comment-showcase.html
[10]: http://paularmstrongdesigns.com/weblog/css/navigation-magnification
[10a]: http://www.asktog.com/columns/044top10docksucks.html
[11]: http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
[12]: http://alltheheroesaredead.com/weblog/archives/2006/02/external-related-links-on-mt-blog
[13]: http://www.cssplay.co.uk/menus/dd_valid.html
[14]: http://www.mapsurface.com/
[15]: http://www.cssplay.co.uk/menu/one_page.html
[16]: http://pro.html.it/niftycube/
[16a]: http://www.cssplay.co.uk/boxes/snazzy.html
[16b]: http://www.spiffycorners.com/

[via]: http://www.fortysomething.ca/mt/etc/
(more…)

Assigning Defaults in JavaScript

Dave ran across [this article about assigning function arguments default values][2]. It’s a pretty neat idea. The script they came up with is not bad.

Dave, not being one to leave well enough alone, wanted to “improve” on this idea by [creating a function to simplify the assigning of these defaults][1].

[1]: http://web-graphics.com/mtarchive/001709.php
[2]: http://www.vivabit.com/bollocks/2006/01/09/cheeky-tip-default-function-arguments-in-javascript