Dev Notes

Format DateTime in GridView BoundField or TemplateField

2009-10-27T13:21:00.001-07:00

Eval has a second parameter which lets you specify the string format. The BoundField has a DataFormatString property:

<asp:TemplateField>
    <ItemTemplate>
        <asp:Label ID="ExampleDate" runat="server" Text='<%# Eval("ExampleDate", "{0:MM/dd/yyyy}") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ExampleDate" HeaderText="Example Date 2" DataFormatString = "{0:d}" />

LINQ to SQL

2009-10-27T13:04:00.001-07:00

Grouping in LINQ to SQL is nothing like SQL. It returns an IEnumerable of IGrouping.

Validation and Business Rules

2009-10-27T08:40:00.001-07:00

From Rocky Lhotka’s Business Objects pg 40: “A lot of business logic involves the enforcement of validation rules. The fact that one date must be later than another date is a validation rule. Some validation rules involve calculations and others are merely toggles. You can think about validation rules as being either broken or not. And when one or more rules are broken the object is invalid.

A similar concept is the idea of business rules that might alter the state of the object. The fact that a given piece of text data must be all uppercase is a business rule. The calculation of one property value based on other property values is a business rule. Most business rules involve some level of calculation… Business rules typically alter the state of the object and usually don’t enforce validation at the same time.”

A comment on Ayende Rahien’s blog article:

“Name is not empty is an invariant of the entity. Not a business rule because it is not something that can happen (yes, I know about bad data and no constraints).”

[CSSVault] Create Stunning Drop Down Calendars Quickly

2007-12-21T11:14:00.001-08:00

Need a calendar date picker for your web application? Calendar is a JavaScript class that automagically creates a graphical calendar date picker for your date fields. The sample calendars are gorgeous, complete with drop shadows and drag and drop capability. The experimental calendar even features a graphic that changes every month — much like a real-life calendar would have.
It uses the Mootols JavaScript library. It is very flexible and customizable and comes complete with documentation.

[CSSVault] Create Stunning Drop Down Calendars Quickly

[WebAppers] Flot Pure Javascript Plotting Library for jQuery

2007-12-21T11:10:00.001-08:00

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming. Although Flot is easy to use, it is also advanced enough to be suitable for Web 2.0 data mining/business intelligence purposes which is its original application. The plugin is targeting all newer browsers.

Requirements: No Requirements
Demo: http://code.google.com/p/flot/
License: MIT License

[WebAppers] Flot Pure Javascript Plotting Library for jQuery

[ALA] Never use a Warning when you Mean Undo

2007-12-21T11:05:00.001-08:00

by Aza Raskin

Have you ever had that sinking feeling when you realize—just a split second too late—that you shouldn’t have clicked “Okay” in the “Are you sure you want to quit?” dialog?

Yes? Well, you’re in good company—everybody has had a similar experience, so there’s no need to feel ashamed about it. It’s not your fault: it’s your software’s fault.

Why? Because software should “know” that we form habits. Software should know that after clicking “Okay” countless times in response to the question, we’ll probably click “Okay” this time too, even if we don’t mean to. Software should know that we won’t have a chance to think before accidentally throwing our work away.

Why should it know these things? Because software designers should know that we form habits, whether we want to or not.

Habit formation is actually good thing: it saves us the trouble of having to think when confronted with interface banalities and it lessens the probability that our train of thought will get derailed. In the case of the “Are you sure you want to quit?” dialog, our hands have memorized close-and-click as a single continuous gesture. That’s good, because most of the time we don’t want to think about the question—we just do the right thing. Unfortunately, our habits sometimes make us do the wrong thing: we don’t even have time to realize our mistake until after we’ve made it.

So, as designers we are led to a general interface principle: If an interface is to be humane, it must respect habituation.

Possible solutions

What about making the warning harder to ignore? A subtle warning will get passed by, so let’s pull out all the stops: we’ll blink the screen and play a loud stretching noise to ensure that the user is paying attention. Try as we might, it still won’t work. The more in-your-face the warning is, the faster we’ll want to get away from it (by clicking “Okay”) and the more mistakes we’ll make. The thing is, no matter how fully in-your-face the computer presents the warning, we’ll still make the same mistake—clicking “Okay” when we don’t mean to. But it’s still not our fault: as long as it’s possible to habituate to dismissing the message, we’ll habituate, and then we’ll make mistakes.

What about making the warning impossible to ignore? If it’s habituation on the human side that is causing the problem, why not design the interface such that we cannot form a habit. That way we’ll always be forced to stop and think before answering the question, so we’ll always choose the answer we mean. That’ll solve the problem, right?

This type of thinking is not new: It’s the type-the-nth-word-of-this-sentence-to-continue approach. In the game Guild Wars, for example, deleting a character requires first clicking a “delete” button and then typing the name of the character as confirmation. Unfortunately, it doesn’t always work. In particular:

It causes us to concentrate on the unhabitual-task at hand and not on whether we want to be throwing away our work. Thus, the impossible-to-ignore warning is little better than a normal warning: We end up losing our work either way. This (losing our work) is the worst software sin possible.
It is remarkably annoying, and because it always requires our attention, it necessarily distracts us from our work (which is the second worst software sin).
It is always slower and more work-intensive than a standard warning. Thus, it commits the third worst sin—requiring more work from us than is necessary.

In the Guild Wars example, points two and three aren’t particularly apropos because deleting a character is an infrequent action. However, if we had to type the name of a document before being allowed to exit it without saving, we would find it very burdensome.

What have we learned? That interfaces that don’t respect habituation are very bad. Making the warning bigger, louder, and impossible-to-ignore doesn’t seem to work; any way we look at it, warnings lead us into a big black interface pit. So let’s get rid of the warning altogether.

Undo to the rescue

Merely removing warnings doesn’t save our work from peril, but using an “undo” function does. Let me say that again: The solution to our warning woes is undo. With a robust undo, we can close our work with reckless abandon and be secure in the knowledge that we can always get it back. With undo, we can make that horrible “oops!” feeling go away by getting our work back. [1]

Because we form habits, we’ll never be able to guarantee that we won’t have an “oops!” moment. Instead, designers must accept that it will happen and design for it. Whenever we have the opportunity to throw away work, the computer must allow us to undo our actions.

This leads to one of the most basic and important mantras of interface design: Never use a warning when you mean undo.

Google Mail is a outstanding example of this mantra. When you delete an e-mail, it immediately gives you an option to undo that action. How humane! This neatly sidesteps the issue of warnings (as well as the visibility issue of undo). When we make a mistake (which we are bound to do) it isn’t very costly because we can just undo it. With undo, we spend less time worrying and more time doing work.

fig. 1. It’s not too late. Gmail gives users the option to undo their deletes.

Of course this is only one layer of undo—and Gmail goes even further. After you delete a message, it isn’t gone forever… it sits in the trash so that you can retrieve it if you decide later that you didn’t actually want to delete it.

Alas, this is a lesson that Google Calendar hasn’t learned yet. And, as predicted, I’ve deleted events that I didn’t mean to. Sometimes I’ve deleted the wrong event, which is particularly bad because then I’m not even sure what I’ve deleted. Without undo, there is no way to find out.

fig. 2. Be careful! Google Calendar does not allow users to undo accidental deletes.

Actually, even Google Mail hasn’t fully embraced the lesson. When you remove a label from Gmail, up comes one of those wretched warnings. Why is it that Google can get it so right in one place, and mere clicks away get it so wrong? Perhaps because “warn-think” is so ingrained that it takes a heroic effort to break free. Even companies which are generally bastions of good design, like 37Signals, get this one dead wrong.

fig. 3. 37Signals’ application, Highrise, provides warnings but no undos.

Using a warning instead of an undo is the path of least resistance from a programmer’s standpoint, and it doesn’t require any new thinking from a design standpoint. But that isn’t an excuse for our computers to be inhumane.

Conclusion

Warnings cause us to lose our work, to mistrust our computers, and to blame ourselves. A simple but foolproof design methodology solves the problem: “Never use a warning when you mean undo.” And when a user is deleting their work, you always mean undo.

Oh, and the next time you see a warning used instead of undo, send the designer of the application/website a nice e-mail suggesting that they implement an “undo” feature instead. Send them a link to this article. Let’s see if we can’t change the way people design on the web—and in the process make everyone’s computing life more humane and less frustrating in one little way. Let the war on warnings begin!

http://alistapart.com/articles/neveruseawarning

[PSDTuts] 9 Essential Principles for Good Web Design

2007-12-21T11:02:00.001-08:00

by Collis

Web design can be deceptively difficult. Getting a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent...

Add to this, the fact that many web designers (myself included) are self taught, that web design is still novel enough to be only a side subject in many design institutions and that the medium changes as frequently as the underlying technology does.

So today I've put together my 9 principles for good web design, it's only my opinions and I've tried to link off to more reading on subjects so you don't only hear my voice. Obviously I have lots of disclaimers, rules are made to be broken, different types of design work differently, I don’t always live up to my own advice etc etc. So please read these as they are intended, just some observations I am sharing...

Capture the Valley uses bars of colour to guide your eye through sections from top to bottom...

1. Precedence (Guiding the Eye)

Good web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence. When using a good design, the user should be led around the screen by the designer. I call this precedence and it's about how much visual weight different parts of your design have.

A simple example of precedence is that in most sites the first thing you see is the logo. This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left). This is a good thing since you probably want a user to immediately know what site they are viewing.

But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example you might want your user to go from logo/brand to a primary positioning statement to punchy image to give the site personality to main body text, with navigation and a side bar taking a secondary position in the sequence.

What your user should be looking at is up to you, the web designer, to figure out.

To achieve precedence you have many tools at your disposal:

Position - Where something is on a page clearly influences in what order the user sees it
Colour – Using bold and subtle colours is a simple way to tell your user where to look
Contrast – Being different makes things stand out, being the same makes them secondary.
Size – Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
Design Elements – if there is a gigantic arrow pointing at something, guess where the user will look?

2. Spacing

When I first started designing I wanted to fill every available space up with stuff. Empty space seemed wasteful. In fact the opposite is true.

Spacing makes things clearer. In web design there are three aspects of space that you should be considering:

Line Spacing
When you lay text out the space between the lines directly affects how readable it appears. Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to find a happy medium. You can control line spacing in CSS with the 'line-height' selector. Generally I find the default value is usually too little spacing. Line Spacing is technically called leading (pronounced ledding) from the process that printers used to use to separate lines of text in ye olde days - by placing bars of lead between the lines.
Padding
Generally speaking text should never touch other elements. Images for example should not be touching text, neither should borders or tables. Padding is the space between elements and text. The simple rule here is that you should always have space there. There are exceptions of course, in particular if the text is some sort of heading/graphic or your name is David Carson :-) But as a general rule, putting space between text and the rest of the world makes it infinitely more readable and pleasant.
White Space
First of all, white space doesn't need to be white. The term simply refers to empty space on a page (or negative space as it's sometimes called). White space is used to give balance, proportion and contrast to a page. A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expensive architect site you'll almost always see a lot of space. If you want to learn to use whitespace effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot of empty space used as an element of design.

3. Navigation

One of the most frustrating experiences you can have on a website is being unable to figure out where to go or where you are. I'd like to think that for most web designers navigation is a concept we've managed to master, but I still find some pretty bad examples out there. There are two aspects of navigation to keep in mind:

Navigation - Where can you go?
There are a few common sense rules to remember here. Buttons to travel around a site should be easy to find - towards the top of the page, easy to identify - they should look like navigation buttons, and well described - the text of a button should be pretty clear as to where it's taking you. Aside from the common sense, it's also important to make navigation usable. For example if you have a rollover submenu, ensuring a person can get to the submenu items without losing the rollover is important. Similarly changing the colour or image on rollover is excellent feedback for a user.

Orientation - Where are you now?
There are lots of ways you can orient a user so there is no excuse not to. In small sites it might be just a matter of a big heading or a 'down' version of the appropriate button in your menu. In a larger site you might make use of bread crumb trails, sub headings and a sitemap for the truly lost.

4. Design to Build

Life has gotten a lot easier since web designers transitioned to CSS layouts, but even now it's still important to think about how you are going to build a site when you're still in Photoshop. Consider things like:

Can it actually be done?
You might have picked an amazing font for your body copy, but is it actually a standard HTML font? You might have a design that looks beautiful but is 1100px wide and will result in a horizontal scroller for the majority of users. It's really good to know what can and can't be done, which is why I believe all web designers should also build sites, at least sometimes.
What happens when a screen is resizes?
Do you need repeating backgrounds, how will they work? Is the design centred or left aligned?
Are you doing anything which is technically difficult?
Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided.
Could small changes in your design greatly simplify how you build it?
Sometimes moving an object around in a design can make a big difference in how you have to code your CSS later. In particular when elements of a design cross over each other it adds a little complexity to the build. So if your design has say three elements and each element is completely separate from each other, it would be really easy to build. On the other hand if all three overlap each other, it might still be easy, but will probably be a bit more complicated. You should find a balance between what looks good and small changes that can simplify your build
For large sites particularly, can you simplify things?
There was a time when I used to make image buttons for my sites. So if there was a download button for example I would make a little download image. In the last year or so I've switched to using CSS to make my buttons and have never looked back. Sure it means my buttons don't always have the flexibility I might wish for, but the savings in build time from not having to make dozens of little button images are huge.

If anyone knows good type it's iLoveTypography!

5. Typography

Text is the most common element of design, so it's not surprising that a lot of thought has gone into it. It's important to consider things like:

Font Choices - Different types of fonts say different things about a design. Some look modern, some look retro. Make sure you are using the right tool for the job.
Font sizes - Years ago it was trendy to have really small text. Happily these days people have started to realise that text is meant to be read, not just looked at. Make sure your text sizes are consistent, large enough to be read, and proportioned so that headings and sub headings stand out appropriately.
Spacing - As discussed above, spacing between lines and away from other objects is important to consider. You should also be thinking about spacing between letters, though on the web this is of less importance as you don't have that much control.
Line Length - There is no hard and fast rule, but generally your lines of text shouldn't be too long. The longer they go for, the harder they are to read. Small columns of text work much better (think about how a newspaper lays out text)
Colour - One of my worst habits if making low contrast text. It looks good, but doesn't read so well unfortunately. Still I seem to do it with every website design I've ever made, tsk tsk tsk.
Paragraphing - Before I started designing I loved to Justify everything. It made for nice edges on either side of my paragraphs. Unfortunately justified text tends to create weird gaps between words where they have been auto-spaced. This isn't nice for your eye when reading, so stick to Left-aligned unless you happen to have a magic body of text that happens to space out perfectly.

6. Usability

Web design ain't just about pretty pictures. With so much information and interaction to be effected on a website, it's important that you the designer, provide for it all. That means making your website design usable.

We've already discussed some aspects of usability - navigation, precedence, text - here are three more important ones:

Adhering to Standards
There are certain things people expect, not giving them causes confusion. For example, if text has an underline, you expect it to be a link. Doing otherwise is not good usability practice. Sure you can break some conventions, but most of your website should do exactly what people expect it to do!
Think about what users will actually do
Prototyping is a common tool used in design to actually 'try' out a design. This is done because often when you actually use a design you notice little things that make a big difference. ALA had an article a while back called Never Use a Warning When You Mean Undo which is an excellent example of a small interface design decision that can make life suck for a user.
Think about user tasks
When a user comes to your site what are they actually trying to do? List out the different types of tasks people might do on a site, how they will achieve them, and how easy you want to make it for them. This might mean having really common tasks on your homepage (e.g. 'start shopping', 'learn about what we do' etc) or it might mean ensuring something like a search box is always easily accessible. At the end of the day your web design is a tool for people to use, and people don't like using annoying tools!

7. Alignment

Keeping things lined up is as important in web design as it is in print design. That's not to say that everything should be in a straight line, but rather that you should go through and try to keep things consistently placed on a page. Aligning makes your design more ordered and digestible, as well making it seem more polished.

You may also wish to base your designs on a specific grid. I must admit I don't do this consciously - though obviously a site like PSDTUTS does in fact have a very firm grid structure. This year I've seen a few really good articles on grid design including SmashingMagazine's Designing with Grid-Based Approach & AListApart's Thinking Outside The Grid. In fact if you're interested in grid design, you should definitely pay a visit to the aptly named DesignByGrid.com home to all things griddy.

The ExpressionEngine site is the soul of clarity. Everything is sharp and clean

8. Clarity (Sharpness)

Keeping your design crisp and sharp is super important in web design. And when it comes to clarity it's all about the pixels.

In your CSS everything will be pixel perfect so there's nothing to worry about, but in Photoshop it is not so... To achieve a sharp design you have to:

Keep shape edges snapped to pixels - This might involve manually cleaning up shapes, lines and boxes if you're creating them in Photoshop.
Make sure any text is created using the appropriate anti-aliasing setting - I use 'Sharp' a lot
Ensuring contrast is high so that borders are clearly defined
Over-emphasizing borders just slightly to exaggerate the contrast.

9. Consistency

Consistency means making everything match. Heading sizes, font choices, colouring, button styles, spacing, design elements, illustration styles, photo choices... Everything should be themed to make your design coherent between pages and on the same page.

Keeping your design consistent is about being professional. Inconsistencies in a design are like spelling mistakes in an essay. They just lower the perception of quality. Whatever your design looks like, keeping it consistent will always bring it up a notch. Even if it's a bad design, at least make it a consistent, bad design.

The simplest way to maintain consistency is to make early decisions and stick to them. With a really large site however things can change in the design process. When I designed FlashDen for example, the process took months and by the end some of my ideas for buttons and images had changes so I had to go back and revise earlier pages to match later ones exactly.

Having a good set of CSS stylesheets can also go a long way to making a consistent design. Try to define core tags like <h1> and <p> in such a way as to make your defaults match properly and avoid having to remember specific class names all the time.

http://psdtuts.com/designing-tutorials/9-essential-principles-for-good-web-design/

[CssTricks] CSS list-style-position Property

2007-12-20T14:45:00.001-08:00

Keep your list items INSIDE

.box ul { }

.box li

{

list-style: square;

list-style-position: inside;

color: #2D343F;

}

[WebAppers] NicEdit Micro Inline WYSIWYG Content Editor

2007-12-20T14:17:00.001-08:00

NicEdit is a Javascript/AJAX inline content editor to allow easy editing of web site content on the fly in the browser. It integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.
NicEdit was created as an alternative for the complexity, many files and large download size (> 200KB) of popular WYSIWYG editors such as TinyMCE and FCKEditor. It implements many of the standard rich text features like these editors but is easier to integrate without impact on download size. Small file size <35KB Total, <10KB Compressed! Only 2 files (js + icons) required for operation.

Requirements: IE 5.5+, FF 2+, Opera 9+, Safari 3+
Demo: http://nicedit.com/
License: MIT License

[WebAppers] NicEdit Micro Inline WYSIWYG Content Editor

[WebAppers] fValidator Validate input data in HTML forms with iMask

2007-12-20T14:07:00.001-08:00

That’s why fValidator exists, with it form validations are many times easier. fValidator is compatible and tested in Internet Explorer, Firefox (and its mozilla friends), Opera and Safari.

*** It works perfect with iMask as it’s complement.

[WebAppers] fValidator Validate input data in HTML forms with iMask

[CssTricks] ID Your Body For Greater CSS Control and Specificity

2007-12-18T08:21:00.001-08:00

If you wanted to change the color of links on one page, you have a few options:

You could declare a separate stylesheet for your contact page.
You could give all those links a unique class on that page.
The best solution is to give your the body a unique ID.

How it’s done

Apply id to body tag:

</head> <body id="contact-page">

Now you can change the color of the links for the entire page:

a {
color: blue;
} #contact-page a { color: red;
}

How about a more practical example?

You got it. One of the most useful implementations of this technique is within navigation. Take a look at this sample navigation:

Example code of on one page:

</head> <body id="field-tips"> ... <li class="fieldtips"><a href="http://pipes.yahoo.com/fieldtips">Field tips</a></li> <li class="forums"><a href="http://pipes.yahoo.com/forums">Forums</a></li> ...

CSS looks like this. Whenever the body ID and the list item class match up, it becomes the active tab:

#field-tips li.fieldtips, #forums li.forums { background-position: bottom;
}

http://feeds.feedburner.com/~r/CssTricks/~3/201682948/

[Vandelay] 22 Resources to Easily Create CSS Layouts

2007-12-18T07:59:00.001-08:00

Web designers are always looking for ways to save time and simplify the design process. Well, creating a basic layout doesn’t have to take any time at all. All of the resources listed here will help you to create the structure for CSS-based designs. None of these resources are templates that attempt to replace the need for a design; rather, they all aim to simplify the process by creating a skeleton that you will build upon.

Layout Gala - 40 different CSS-based layouts including fixed and fluid widths.

BluePrintCSS - BluePrintCSS “aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.”

Intensivstation - 16 different CSS-based layouts are provided

Dynamic Drive’s CSS Library - One of the leading sources of coding and scripts provides 12 CSS-based layouts.

CSSCreator.com - Rather than providing templates, CSS Creator is a tool that allows you to enter some information about the layout that you want to create, and it produces the code. You choose things like width, columns and colors.

Layout-o-matic - Inknoise has a tool that is similar to CSS Creator. You choose a few variables and it will give you the code for a basic CSS layout.

The Layout Reservoir - BlueRobot.com provides the CSS for 3 different layouts.

Code Sucks.com - There are over 90 different layouts to choose from, including fixed width and faux columns.

CSSeasy - At CSSeasy you’ll find 8 different layouts to choose from.

Tomorrow’s Laundry - WordPress theme designers will love the blank theme layouts from Tomorrow’s Laundry. Four different layouts provide the basic building blocks for your theme designs.

WordPress Theme Generator - Another resource for WordPress designers, the theme generator will let you choose the layout you want and it generates the code.

Yahoo! Developer Network - YUI Grids CSS provide a starting point for your layouts for fluid or fixed width.

SSI Developer - At SSI Developer there are a variety of two and three column layouts. Each layout indicates the browsers in which it has been tested.

Mollio - Mollio offers several attractive layouts, but they give a disclaimer that there may be some rendering problems with IE7.

CSS Tinderbox - Here you’ll find four simple but attractive layouts.

Mitch Bryson - Mitch provides eight different CSS-based layouts to choose from.

Firdamatic - Another tool similar to CSS Creator and Layout-o-matic, Firdomatic will let you choose several items and then it will create the code for your layout.

Strictly CSS - Strictly CSS has an article that provides ten different CSS layouts based on the same HTML code.

Max Design - Twenty-three different layouts in several different categories are available from Max Design.

Glish.com - Here is an article that includes links to a number of CSS-based layouts.

mycelly.com - Twelve different layouts.

Little Boxes - Sixteen more layouts.

http://vandelaydesign.com/blog/design/css-layout-tools/

[Sitepoint] Typography Terms

2007-12-17T20:34:00.001-08:00

1) baseline

The baseline is the imaginary horizontal line on which most characters sit. The only character that hangs below the baseline in Figure 4.5 is the lowercase "q."

2) cap height

The cap height or capline is another imaginary line. This one marks the height of all capital letters in a typeface. Notice that the cap height is below the maximum height of the typeface.

3) crossbar

A stroke that connects two lines in the capital letterforms of "A" and "H" is called a crossbar. A horizontal stroke that does not connect two lines, like the one in the lower case "f" or "t," is known as a cross stroke.

4) serif

Serif is the name given to the finishing strokes at the bottoms and tops of certain typefaces. I'll talk more about serifs when we get into typeface distinctions.

5) meanline

Another imaginary horizontal line that marks the top edge of the lowercase letters is the meanline. Contrary to the way it sounds, the meanline isn't always exactly centered between the baseline and the cap height.

6) bowl

The bowl of a letter is the rounded curve that encloses negative space in a letterform. Examples of bowls can be seen in the letters "D," "o," and "g."

7) descender

The lower portion of the lowercase letters "g," "j," "p," "q," and "y" that extend below the baseline of a typeface is known as the descender. The only other characters that typically extend below the baseline are the old-style numerals in some typefaces. These types of numerals, examples of which from the Georgia typeface can be seen in Figure 4.6, were thought to blend better with lowercase roman numerals, and they look particularly good when used within a body of text.

Old-style numerals in the font Georgia (click to view image)

8) counter

The negative space within a letter is called the counter. In some letters, like "A," "o," and "P," the counter is fully enclosed. The non-closed negative spaces in letters like "G," "u," and "c" are also known as counters.

9) stem

A stem is the main vertical or diagonal stroke in a letterform. These include the vertical portions of the letters "I" and "H," as well as all of the stokes in the letter "W."

10) tittle

This is probably my favorite typeface term. Tittle is the name given to the dot above the lowercase "j" and "i."

11) terminal

The end of a stem or stroke that has no serif is known as a terminal. Even the ends of some serif typefaces have terminals, as you can see in the letter "c" in Figure 4.6.

12) ascender

The tops of most lowercase letters form an imaginary line that's known as the meanline. Some lowercase letters have an ascender, which is an extension that rises above the meanline. Those letters are "b," "d," "f," "h," "k," "l," and "t."

13) leg

The lower, angled strokes seen in the letters "K," "R," and "Q" are known as legs. These are also sometimes referred to as tails.

14) ligature

You may not have noticed in Figure 4.5, but the "f" and "i" of the word "fix" are actually combined into one character. This combination of characters is known as a ligature. Ligatures exist to give the spacing between certain characters a greater aesthetic balance, as Figure 4.7 illustrates.

Example of a ligature (click to view image)

15) x-height

The x-height is exactly what you would expect it to be: the height of the lowercase x in a typeface. Essentially the x-height is the distance between the baseline and the meanline of a typeface. Although it's not very practical, you can actually use x-height as a relative unit of measurement in CSS (ex).

http://www.sitepoint.com/article/principles-beautiful-typography/3

[Sitepoint] The 9 Web-Safe Fonts

2007-12-17T16:13:00.001-08:00

http://www.sitepoint.com/article/principles-beautiful-typography/2

Unable to login because of account restrictions

2007-12-17T15:19:00.001-08:00

Here's the error I would get when login in with any of the users on the machine. It would occur in both normal and safemode even after using a linux live distro to reset the passwords and unlock the accounts.

Unable to Log You on Because of an Account Restriction

It turns out the problem was caused because the following registry value had been deleted:
HKLM\SYSTEM\ControlSet1\Control\Lsa\Authentication Packages

Normally it is set to "msv1_0", but had been changed when the system had gotten infected with a virus. During the cleanup process, I think I must have deleted that value.... and poof... no more logging in.
NtPasswd (http://home.eunet.no/pnordahl/ntpasswd/ ) is a really slick tool that I used to fix the problems. It's a linux live distro that's really small and boots quickly and comes with a fully functional registry editor! It also lets you reset passwords and unlock accounts.

[Noupe] 47+ Excellent Ajax CSS Forms Posted in: Ajax, Javascript, CSS

2007-12-17T09:37:00.001-08:00

47+ Excellent Ajax CSS Forms from [Noupe]

Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.

Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data.

Let’s take a look, hopefully you’ll find new ideas you can develop further on your own.

Styling Forms

1) Uni Form - an attempt to standardize form markup (xhtml) and css, "modularize" it, to get nice looking, well structured, highly customizable, semantic, accessible and usable forms.

2) CSS-Only, Table-less Forms - A great example of a well designed form using modern css techniques. It works in Win/IE6, Firefox v1.0+, Win/Opera v8.0, has minor layout differences in Mac/Safari v1.0.3 and Mac/Safari v1.2, and is usable but fairly buggered in Mac/IE5.2.

3) Tableless Forms - has a great login form example, with a graphic in the input field.

Demo

4) A form with style - How to style and stop web forms from looking ugly.

Styling Form Elements

5) Niceforms 1.0 - is a script that will replace the most commonly used form elements with custom designed ones. One of these improvements would be the possibility of selecting a radio or check box by clicking its adjacent label, it also highlights the labels of the selected boxes to make the selections even clearer and more…

6) Fancy Form - FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers.

7) Styling form controls with CSS, revisited - 224 screenshots showing the effects of various CSS rules applied to form controls. The screenshots are taken from 8 browsers on 4 operating systems, for a total of 14 different browser + OS combinations.

8 ) Showing Good Form - Demo of accessible complex, grid-style (i.e. table-like) form using semantic markup (fieldset, legend, label etc…) and CSS.

Demo :

9) Styling the Button Element with Sliding Doors - A technique that demonstrates a cross-browser technique for button elements with sliding doors.

Form Usability and Accessibility

10) Prettier Accessible Forms - Nick Rigby takes a look at how to make better and accessible forms using CSS instead of old-school tables.

Demo :

11) Check it, don’t select it - An attempt to use multiple checkboxes in a scrollable list - better than using ctrl-click in a normal multi-select listbox

Fancy Demo :

12) Sensible Forms - Web Usability - Roger Hudson provides a stunningly clear tutorial on how a form that is well designed with good visual layout will benefit all sighted users

Ajax Forms Processing

13) AJAX Contact Form - Excellent example of accessible AJAX. Uses unobtrusive Javascript. By Dustin Diaz.

Demo :

14) AutoSuggest: An AJAX auto-complete text field - where it adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key.

Demo :

15) FancyUpload using Mootools - Swf meets Ajax for beautiful file uploads using Mootools.

Demo :

16) jQuery Form Plugin - allows you to easily and unobtrusively upgrade HTML forms to use AJAX to gather information from the form element to determine how to manage the submit process which allows you to have full control over how the data is submitted.

17) Cforms - An AJAX Contact form plugin for Wordpress, offering convenient deployment of multiple contact forms throughout your blog or even on the same page.

Awesome Form Validation

18 ) Really Easy Field validation with Prototype - Here’s a form validation script that is very easy to use.

Demo :

19) Live Validation - is a small open source javascript library built for giving users real-time validation information as they fill out forms.

Demo :

20) Ajax form validation - Learn how to use AJAX in order to process and validate your forms.

21) fValidator - fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation.

Form Field Hints

22) Validation Hints for your form - This article will explain one way of achieving Validation Hints effect while the user type using JavaScript and CSS.

23) Form Help without Popups - A nice technique for adding help info to forms without using pop-up windows.

Hide Form Fields

24) Trimming form fields - Wouldn’t it be a cool idea to give users the option to hide these optional fields at their own discretion, and with a clever use of Javascript, the DOM and some CSS we can.

Demo :

Great Tips for Creating Forms

25) Tips For Creating Great Web Forms - so truly important CSS tips for all form builders out there.

26) Simple Tricks for More Usable Forms - A number of simple tricks for improving the usability of forms, and hopefully inspire you to improve on them and create your own.

A Must See Examples

27) DOM Javascript Slider Bar

28) Masked Input Plugin

29) Ajax Contact Form + YUI

Demo:

30) A CSS-based Form Template

31) Pretty Forms

32) AJAX CAPTCHA

33) Anchor Layout with Forms

34) Ext File Upload Form Widget Example

35) Control.TextArea- Prototype

36) Instant Edit

37) AJAX Check Username

38) AJAX chained select

Demo :

Tutorials

39) Password strength meter for your register form - A small tutorial on how to build a password strength meter like the one on Google’s new account form.

Demo :

40) AJAX Form POST/GET - HTML Form Submit with AJAX/Javascript Example/Tutorial

41) Degradable Ajax Form Validation - Learn how to provide real-time feedback to the user using server-side validation scripts.

42) STYLING FILE INPUTS WITH CSS AND THE DOM - Shaun Inman shows us a guide to achieving consistent, stylish file upload inputs via clever use of js and css.

43) Form Styling with CSS

Online Form Builder

44) Wufoo Form Builder - Free HTML Form Builder - Create Forms, Surveys and Invitations and more…

45 ) Web Form Factory - is an open source web form generator which automatically generates the necessary backend code to tie your form to a database.

46) Jot Form - is a great Web based WYSIWYG form builder. You can select a form type(Contact Us, Satisfaction Survey, Job Application, Suggest Website , Membership Registration, Party RSVP , Wedding Attendance, Reservation, Submit Product, and others).

47) Form Assembly - A Beautiful Collection of CSS Stylesheets For Web Forms

[Lifehacker] Speed Up Your Startup Time with BootVis

2007-12-17T08:55:00.001-08:00

Windows only: Freeware application BootVis analyzes your Windows startup, tracking the programs that automatically run and the drivers Windows loads, to show you what processes are slowing down your startup.
BootVis [Major Geeks via Inspect My Gadget]

[Lifehacker] Speed Up Your Startup Time with BootVis

“Checkmark” Your Visited Links with Pure CSS

2007-12-13T11:07:00.001-08:00

Web browsers know which links on a page have been visited by a user (until the cache is cleared out, that is). It is up to you the designer to take advantage of that web browser’s knowledge, if you choose to do so. I’m sure you don’t need to guess, this all happens with CSS. If you choose to not apply any styling to links (<a> elements or “anchor” elements), most browsers have default styling that applies. Typically, blue with underline. In Firefox, visited links become purple with underline.
You can take control of the styling of these anchor elements in your CSS by targeting them with pseudo classes. The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator. You can see an example of this live on Mike Davidson’s blog. We will be targeting the a:visited pseudo class, but I will include information on the other anchor pseudo classes later in this article.
The perfect scenario for a pseudo-pseudo class

Since the goal here is to add the check mark to the links, this is a perfect scenario for the “before” or “after” pseudo classes in CSS. These classes allow you to literally specify page elements and add content to them, right from the CSS. Here is an example:
blockquote:before {
    content: "From the article: ";
}
This will literally put the text “From the article: ” before every single blockquote on your page. Does this muddy the waters between the separation of design and content? Well… maybe a little. But not really. Just don’t think of these content additions as content, think of them as flair, a little something extra for your web design. Because this exists solely in your CSS, this isn’t content that screen readers are going to see or that will make it into your RSS feed.
Do you see where I am going with this pseudo-pseudo thing?
a:visited:before {
   content:  "";
}
We can target visited links and then add content before this with this CSS statement. Now all we need to do is get a check mark in that content. This isn’t quite as intuitive. You can’t use regular glyphs here like you can in HTML. For example, putting ® will not work in most browsers. You will actually see that string of characters instead of the registration glyph. Instead you use a forward slash and the ASCII code for the character. 2713 is the code for a check mark. So we have:
a:visited:before {
   content:  "\2713 ";
}
Tada! Done! This works perfectly in Firefox, Opera, Safari and.. Oh, wait…
Internet Explorer 6 doesn’t support non-anchor pseudo classes

Awww, that sucks. This is where you need to ask yourself if you care or not. I popped open Mike’s blog to see if he dealt with the IE6 problem. Nope, his links just go grey and underline when visited, but forgo the check mark thing. This is a completely acceptable form of forward-enhancement in design. You use a good browser? Good for you, you get extra nice features. You use an old crappy browser? That’s OK, the page will still look and read fine.
But I have my heart set on this now, let’s get this done! We can do this without the use of the :before or :after selectors, let’s just use the plain a:visited (which IE6 understands just fine), and style that to include the check mark. It’s not going to be text, but we’ll just make that check mark into a graphic and include it that way, check it out:
a:visited {
     padding-left: 14px;
     background: url("http://feeds.feedburner.com/images/checkmark.gif)" left no-repeat;
}
Now we can celebrate for real. Hooray! This works well in all browsers. Check out the example page.
The other anchor pseudo selectors

a:link - This one isn’t used a whole heck of a lot because it’s sort of redundant. If it’s an anchor element it’s a link already. The reason it exists is for specificity. You can declare styling here that will not cascade to other anchor styling like it would if you just styled the a element alone.
a:visited - You know this one by now. This is what you use to style links that have been visited, as decided by your browser.
a:hover - This is the most common. Use this to style the rollover state of your links
a:active - I have to admit I was confused by this one for a long time. This is the best way for me to explain it. The active state is what you see if you were to click and hold on a link. You typically will not see the active state for very long, as the page is likely whisking you away to another page. I think it can be fun for a little flair though. Sometimes just a color change on the active state is a nice little touch.

Here is a nice way to remember what the anchor pseudo classes are.

“Checkmark” Your Visited Links with Pure CSS

Min-width and Max-width template

2007-12-13T10:59:00.001-08:00

Some problems seem to appear again and again, and one of them is page width. How wide should a site be? Should you adapt to 800px resolution? 1024px? Fully fluid with percentages? Perhaps elastic using em-units? There are lots to choose from. What I’ve found is that there’s one solution that almost always works. You most probably already know it, but I thought it might be helpful for some to have a template you just copy and use.
The idea is to use a fluid width but limit it by using min-width and max-width. As with almost all CSS tricks, we do a little bit of hacking for Internet Explorer 6 (IE6). Link to the working min/max template is available, and an explanation follows.
I’m picking 760px as the minimum width. It fits within a maximized browser window on 800×600 resolution, accounting for scrollbars. Next we need some kind of max-width, and for this I’m going to pick 960px. I could probably go a bit higher but 960 is nicely divisible with a lot of numbers, 3, 4, 5, 6, 8, 10, 12, 15, and 16, making for nice columns (see Gridding the 960). Lastly we need some way to tell the browser to follow the width of the browser window when resizing, and width: 100% does that.
#wrapper {
   min-width: 760px;
   max-width: 960px;
   width: 100%;
}
This assumes that you have a div with id wrapper around all your content.
The above works perfectly in both Firefox, IE7, Opera, and Safari. But (as usual) there’s one culprit: IE6. To solve this I’m going to use the fact that IE allows for javascript execution inside CSS files. Have a look at the code below:
#wrapper {
   width: 960px;
   width: expression(
      (document.documentElement.clientWidth > 962)? "960px" :
         (document.documentElement.clientWidth < 762)? "760px" :
            "auto"
   );
   height: 1%;
}
First, the element gets a width by means of a IE expression(). The expression looks at the window width and if it’s too wide it sets it to 960. It also limits it downwards to 760 pixels. At last we need to set trigger hasLayout on the element, and I usually use height: 1% for that (zoom: 1 works aswell).
[Update: Martin suggests we add a default width when IE have javascript turned off. Excellent, added it to the example. The default width will be applied in IE if javascript is turned off.]
[Update: Matthjis notes that there is a bug in IE6 that causes it to freeze sometimes when using the same number for the conditional as for the max or min-value. Updated the code to reflect this. ]
(The expression is built up with two tertiary operators, so (condition)? "true value": "false value";, with a couple of numbers in it. Check it, it makes sense.)
The IE6-stuff above will of course not validate (and doesn’t work in other browsers), so what we do is enclose it inside a conditional comment. The final min-/max-width example has all the code you need (I’ve added centering too), but you should of course move the code to an external file.
Happy hacking!

Min-width and Max-width template

Dev Notes

Format DateTime in GridView BoundField or TemplateField

LINQ to SQL

Validation and Business Rules

[CSSVault] Create Stunning Drop Down Calendars Quickly

[WebAppers] Flot Pure Javascript Plotting Library for jQuery

[ALA] Never use a Warning when you Mean Undo

by Aza Raskin

Possible solutions

Undo to the rescue

Conclusion

[PSDTuts] 9 Essential Principles for Good Web Design

1. Precedence (Guiding the Eye)

Further Reading:

2. Spacing

Further Reading:

3. Navigation

Further Reading:

4. Design to Build

5. Typography

Further Reading:

6. Usability

Further Reading:

7. Alignment

8. Clarity (Sharpness)

Further Reading:

9. Consistency

[CssTricks] CSS list-style-position Property

Keep your list items INSIDE

[WebAppers] NicEdit Micro Inline WYSIWYG Content Editor

[WebAppers] fValidator Validate input data in HTML forms with iMask

[CssTricks] ID Your Body For Greater CSS Control and Specificity

How it’s done

How about a more practical example?

[Vandelay] 22 Resources to Easily Create CSS Layouts

[Sitepoint] Typography Terms

[Sitepoint] The 9 Web-Safe Fonts

Unable to login because of account restrictions

[Noupe] 47+ Excellent Ajax CSS Forms Posted in: Ajax, Javascript, CSS

Styling Forms

Styling Form Elements

Form Usability and Accessibility

Ajax Forms Processing

Awesome Form Validation

Form Field Hints

Hide Form Fields

Great Tips for Creating Forms

A Must See Examples

Tutorials

Online Form Builder

[Lifehacker] Speed Up Your Startup Time with BootVis

“Checkmark” Your Visited Links with Pure CSS

The perfect scenario for a pseudo-pseudo class

Internet Explorer 6 doesn’t support non-anchor pseudo classes

The other anchor pseudo selectors

Min-width and Max-width template