Guidelines for keeping pages clean with in ASP.Net

This is aimed at those who edit websites but are not primarily front-end developers.

Visual Studio Guidelines

• Don't Use the Design Editor
• If you are just displaying a piece of data use <asp:literal> rather than label or other constructs
• Use agnostic ids for containers. #td_books is going to look pretty stupid when it's applied to a >ul>
  
• Learn How to use <asp:repeater>
• If you set a label to a form element set the associatedControlId. This will keep them associated semantically and will force the label to render as <label> rather than <span>
  

HTML Guidelines

• Don't use Tables unless you are displaying tabular data
• If you can click on it make it a link
• If you can't click on it it's not a link

CSS Guidelines

• Terminology (brief)
• Get familiar with and use the site's default stylesheets. Check the site's default stylesheets for applicable rules before declaring your own
• Class names and ids
  • Unique rules use id, instance rules use class.
  • Should describe the data not the presentation
    Bad: "sideNav", "topNav", "blue", "bold", "orangeBox" (Yeah, I'm guilty of this)
    Good: "subNav", "help", "disabled", "itemList"
  • I've stuck to camel-case-drop-first, for my naming conventions.
    
  • You can set multiple classes on the same element but IE6 doesn't like attaching rules where they are combined for the selector.
    e.g.: .help.disabled{/*IE6 says "what?"*/}
  • Rather than applying a class to a bunch of elements that are siblings, like in a list, add an id to the parent and reference the children using descendant selectors.
• Good CSS Requires a good understanding of the semantics of HTML.
• If you are uncomfortable with CSS ask someone who is.

Text editor pet peves

1. Copying whitespace - I do this all the time and every time it's by accident. I go to hit Ctrl+V and hit Ctrl+C instead so rather than pasting I overwrite the copy from before. It's frustrating. I know some people may want to copy empty whitespace, but never once have I wanted to.

I know this isn't really a list yet, I'm sure I'll think of something to add in the future.

Paging - Ordered List (ol), Unordered List (ul), or what?

Does anyone have a stance on this?

It's pretty clear that there isn't a standard for this. Go to Google, Yahoo!, Ask, eBay, or Amazon, and you are going to see vastly different markup.

It's crazy how different it is. Some are ul, some are links, some are spans, some are h4s. What the H-E-(double-hockey-stick)?

I think it should be a list, but which one? It definitely is an ordered list as pages are in order but if the content is numbered it's kind of stupid. Particularly if the Previous/Next links are in the list. Then you'd get:
1. Prev
2. 1
3. 2
4. 3
5. Next

I'm going to use an unordered list for now. But I'd like to know what you think.

Andy Rutledge's Design View considered harmful

Recent independent studies show that Andy Rutledge's Design View has caused widespread fires in populated design communities. As flaming and hostile debate rage on, we wonder, is there an end in sight?

Before you jump down my neck I'd like to say that I'm not bashing Andy's knowledge or design chops. Actually what I'm on about is his inflammatory tone.

A conversation I had recently with a coworker:

jethro: http://www.andyrutledge.com/bad-layout-conventions.php
Andy's an opinionated prick. But he's often right

Brad: :)
Sounds like someone I know.

jethro: Yeah, I thought you'd either respect or else raise arms

Brad: Eh.. He's about half right..

jethro: He says it loud though

Brad: Yes.

jethro: I hate that he doesn't have comments

Brad: When you say it loud sometimes it's best not to..

So is this an insult, or a compliment?

Whatever you want. I respect Andy, and the frankness with which he tackles design topics is refreshing. I couldn't quote him like scripture as his arguments are rarely solid enough to stand alone, especially including the context. Before I pass the link as an argument I have to ask if I want Andy's bias attached to my opinions. Usually I choose a different tactic, searching some of my other reading material, like Max Design, 456 Berea St., or A List Apart.

He lets himself show in many ways. A lot of times that's good, he connects to the reader more than a lot of bloggers. Other times too much, and he risks alienating his viewers. I guess I'm not gonna argue philosophy, as it's pretty darn unlikely that you're here for that, but it's equally unlikely that his users are there for that either.

Should you read? Most certainly. Just take a couple gains of salt with you, you're gonna need it.

http://www.andyrutledge.com

I'll probably edit this post as I come up with more to add.

Rails Steals Brain, Police are Apathetic

I started working with Rails at home and have finally got a chance to try out haml, a ruby templating language that replaces Rhtml. I'm really excited about using it and SASS to create some really clean source.

Plus since I'm learning RoR I'll be able to create sites of much greater complexity on my own then I could being just a front-end developer. I have taken programming classes before so I should be okay.

I cool site that teaches the basics of ruby. It helped me understand some of the peculiarities of ruby. After working with C++ and JavaScript I had a little unlearning to do.

Link: Sexy Stylesheets

Cool post on Vitamin: Creating Sexy Stylesheets

I've thought about this stuff a lot in the creation of my own stylesheets, but it's cool to see it explicitly written.

I started organizing my css properties a couple weeks ago. Here's what I was doing:
#subNav{

1. Display props
2. Dimentions
3. Margins
4. Padding
5. Border
6. Background
7. Typography

}

Basic logic being that I'm putting properties that affect layout first. You could argue that font-size impacts layout more than background, but I wanted to keep font properties together. And it makes sense to keep background near border.

I've been using inheritance-based tabbing to keep my CSS source readable after looking at SASS. It's working pretty well, and I don't have to make nearly as many comments to keep it all straight.

A <p> is a [expletive deleted] paragraph

I like elegant HTML. I love what CSS does for documents in allowing us to to keep it as such. WYSIWYG editors seem to be staying in the dark ages unfortunately, generating <font> tags and throwing all kinds of tag soup. It's really time for us to move up. I understand that users are used to the way that these editors work--the terrible MS Word way--but it's time to train them in the use of a standards based editor. Where the only styles that are controlled by the editor are the ones that add meaning to the text, rather than styling the text to fit the situation.

I'm not saying that users shouldn't have control of the styles of their writing, but it should be controlled in a standards-based way. Let them edit the stylesheet of the document.

HTML is actually pretty well suited for writing if we just use the standards correctly.

I've seen the WYSIWYM Editor. It's interesting as a proof of concept but a better implementation is necessary if there's going to be any kind of broad adoption.

There have been some text formating languages that are pretty cool. I like markdown, but it's not quite usable enough to drop on users and expect them to figure out. Maybe some kind of hybrid markdown/wysiwyg editor would work. I had an idea for a HTML Editor a while back that would allow you to see and drag around the tags in the source while in preview mode. I called it X-Ray Editor, because you could see into the HTML without having to see _only_ HTML. I'd still like to see the project come to fruition, but it seems like a daunting task as a side project.