Simian Design

Theresa Neil has an excellent article up on 12 standard design patterns.  These concepts are central to enterprise application and web productivity application design.

The image shown here is just a high-level overview of what those patterns are, and she delves into what each of these patterns are and what encompasses them.

Quick quote in regards to the Master/Detail pattern:

Master/Detail screen pattern can be vertical or horizontal. Ideal for creating an efficient user experience by allowing the user to stay in the same screen while navigating between items. Horizontal layout is a good choice when the user needs to see more information in the master list than just a few identifiers- or when the master view is comprised of a set of items that each have additional details.

A very useful article.    Lots of really good info.

Dan Wellman has written an excellent article, The Definitive Guide to Creating a Practical jQuery Plugin. He takes you step-by-step through the entire process.

In this article we’re going to be building our very own jQuery plugin step-by-step from scratch; jQuery makes this task exceptionally easy for us, giving us a simple method of packaging up our scripts and exposing their functionality, and encouraging the use of scalable and reusable object-oriented techniques.

Writing a jQuery plugin makes sense if you have code you reuse a great deal. You can drop code into your site and have it work right away with little or no tweaking of the code.

He takes you through the Adding Configurable Properties, building Constructor Methods, and adding to the plugin’s API.

It’s a very well written tutorial, easy to follow, easy to help you along.

I found this post from Instructables (via Make) about all the different types of screws.  I had NO IDEA there were this many different types. The Phillips II and the Pozidriv are probably my favorite.  But then again, there are so many.  

“Pozidriv is similar in appearance to the classic Phillips crosshead, but in fact is substantially different. On close examination you will notice a second set of cross-blades at the root of the large cross-blades. These added blades are for identification and match the additional makings on the head of Pozidriv screws, known as “tick” marks, single lines at 45 degrees to the cross recess. So, the marks are for identification purpose. Pozidriv also does not have the rounded corners that the Phillips screw drive has. The tip or the driver is blunt which also helps it to seat better into the recess in the screw, unlike the Phillips which comes to a sharper point.”

Jon Hobbs-Smith has written an excellent article on 25 ways to improve your jQuery.  It’s a quite well-written list of tips and tricks.  

It’s not written for super-advanced users, nor beginners, rather intermediate users. So you won’t find entry-level tips here, nor will you find advanced explanations on why you should enclose items, or the fastest way to render something to the DOM.  It’s a series of real-life, useful, in-the-trenches-kind of tips.

My favorite tip so far is tip #23: Add a JS class to your HTML attribute.  By adding a class to your HTML attribute on the javascript load, you get a CSS declarator that is valid only if JS is turned on, which allows you a very easy way to hide things if JS is turned off.

Very slick.

The entire article is worth reading, and worth bookmarking.  Nicely done.

Flickr recently released a Flickr site custom tailored for the iPhone.  They wrote about some of the rules they learnt doing this site, which I find fascinating.  I’m pulling out the main points, but you really need to go read the detailed description of why they’re doing things the way they are.

1. Don’t Use a JavaScript Library or CSS Framework
2. Load Page Fragments Instead of Full Pages
3. Don’t Build for Just One Device
4. Optimize Everything
5. Tell the User What is Happening

Now they’ve put together a library just for the iPhone that handles many of these items. The iUI framework seems to be a iPhone version of the YUI framework, but it’s a good start.

Crayola crayons currently come in 120 colors including 23 reds, 20 greens, 19 blues, 16 purples, 14 oranges, 11 browns, 8 yellows, 2 grays, 2 coppers, 2 blacks, 1 white, 1 gold and 1 silver.

Aaron at ColorSchemer.com created a fun list of all 120 Crayon Colors with their hex codes and RGB values.  COLOURlovers reproduced this list along with several fun facts.

“the scent of Crayola crayons is among the 20 most recognizable to American adults. Coffee and peanut butter are 1 and 2.”

“Crayola crayon colour names rarely change. However, there are exceptions. In 1958, Prussian blue was changed to midnight blue in response to teacher recommendations that children could no longer relate to Prussian history. In 1962, the colour flesh was changed to peach recognizing that not everyone’s flesh is the same shade.”

But the real gem of this article is the color and hex listing.  Midnight blue (formerly Prussian blue) is the hex code of: #1A4876.   Peach (formerly flesh) is #FFCFAB.

What a great list.

A very useful Stain Removal Chart.  Has a ton of information.

For example to get rid of Blood, you soak in cold salted water 1 teaspoonful to 1 pint for at least an hour. Wash in warm soapy water.

38 things that Ogilvy & Mather have found that helps when creating Advertising that just flat-out SELLS.  Ogilvy & Mather have been giants in the advertising world for a while, and they know what they are talking about.  David Ogilvy has written us this gem of an article that articulates these 38 things.  It’s a great read if you’re at all interested in advertising.  Highlights are listed below.

1. How should you position your product?  This is by far the most important decision.
2. Create a large promise, a benefit for the customer.
3. Brand image.
4. Big Ideas.  Big ideas are usually simple ideas.  “THe problem, when solved, will be simple”.
5. First-class Ticket.
6. Don’t be a bore.
7. Innovate.
8. Be suspicious of awards.
9. Psychological segmentation.
10. Don’t bury news.
11. Go the whole hog.  This is a great point.  Don’t attempt too many things, you’ll achieve nothing.  Boil your strategy down to one simple promise, and go the whole hog in delivering that promise.

They also have 12 points in what works well in television, and 13 for print. It’s a great list, and I’m just loving digging through this genius.

32. Yes, people read long copy.  Readership falls off rapidly up to fifty words, but drops very little between fifty and five hundred words.(!)  “The more your tell, the more you sell”.  This is fascinating.  That’s a HUGE number, fifty and five hundred with a minor drop-off.

A really great chart to determine the Pixels to Ems Conversion Table for CSS. Thank you Jon Tan.  A quick over-view/sampling below.

What this chart allows you to do is determine the em width of something. Say you have something that is 770px wide, and using a font-size of 1em. You know then that the em-width of the layout is: 1 ÷ 16 × 770 = 48.125em.

I’m working on a project that requires some vertical text.  But I was unsure as to the “correct” way for the vertical text to be set, 90 degrees clockwise or counter-clockwise.  Luckily, I didn’t have to do a lot of research, as it’s been done for me. Robust Vertical Text Layout outlines the basic rules for vertical text for me.

In a purely physical layout scheme, each of these text layout properties would be given as an absolute: The inline progression of this run of English is top to bottom, its glyph orientation is 90 degrees clockwise, its block progression is from right to left.

But absolutes don’t hold much water.

For scripts in a non-native orientation, the natural inline text flow depends on the direction of line stacking: the text is most comfortably laid out as if the whole text block were merely rotated from the horizontal. For example, English text in vertical lines that stack from left to right will face with the glyphs’ tops towards the left and the text direction running from bottom to top. The same text, by the same logic, would in a right-to-left line stacking context face right and flow within each line from top to bottom.

Basically it boils down to this from what I can determine: Have the bottom of the text point in the direction of the block progression.