The same things annoy me, too! I also hate it when (usually auto-generated) pages have about 5,000 lines of whitespace between elements. Ugh.

Oh man, I could write volumes on this.

One of my top pet peeves is people using "XHTML" (sometimes even with an xml declaration) and still using:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Why, oh why, oh WHY? Why are you setting your content type to text/html if (you claim) you're using xhtml?

Fake XHTML bugs me so much, and its so widespread. Why do people use it? Why? I can't ask that enough.

As far as <br /> being used in forum posts, I could actually see an argument being made that this is potentially proper use of the <br /> element. Sure, it's not specified, but when a person writes a single line in a forum post and then adds a few new lines, do they really think of it as a separate grouping of text? a separate element? Probably not. I'm guessing most people certainly don't think of it as a separate "paragraph" (although I know the specification's definition of "paragraph" differs from the more common and colloquial definition of "paragraph").

One thing that bugs me about CSS is that the general consensus says that absolute positioning is bad to use. Why is it bad? Because it has a few bugs in IE7? Float has bugs in IE7 as well (float: right; is profoundly screwed up). Absolute positioning is specified, as long as you're using it properly, you have nothing to worry about. Float wasn't even meant to be used for positioning layouts (!) and people say that absolute positioning is the bad guy?

While I'm talking about CSS, another thing that bugs me is people who put a newline after *every* property in their css. Why? It makes it so unreadable and so unorganized when you end up having thousands of lines when it could be reduced down to less than 500 lines. I get the worst feeling when I open up a css file to take a look at it, and my scrollbar shrinks down to a single pixel in height.

"I also hate anybody who puts the opening brace on the next line :P [..] What is the point of that!"

Actually that was the one "peeve" I was going to post... I *need* to have opening and closing curly braces to match up! Mostly so I don't get lost in the rather, uhh, unelegant code I write hehe.

For example:

if (some_condition || some_other_condition || yet_another_condition || i_hope_you_get_the_idea_by_now)
{
do stuff;
if (some_condition || some_other_condition || yet_another_condition || i_hope_you_get_the_idea_by_now)
{
do stuff;
}
}

is *much* easier on the brain, at least on mine, because wether you have wordwrap on or off, at least the curly braces will always match up, and that makes navigating code much easier for me. With complicated MYSQL queries I will do something similar (at least until I figured them out, then I might compact them again).

WHERE
column1 = blah
AND
column2 = bleh
AND
(
column3 = bluh
OR
column4 = bluh
)

Sure, that's not exactly a complicated query, but you get the idea? Generally I tend to "waste text editor screen estate" instead of commenting a lot.

oops, sorry. for the above post to make any sense, you have to imagine the appropriate indentation :/

Ah, Kroc, the javascript thing. Oh man, I almost wish you hadn't brought this up. Rant time...

I've seen some sites, and I won't name names (IMDB), that use javascript to accomplish something as simple a link. I mean, they do want to open the link in a new window, but they don't provide any fallback (the link does nothing except link to the current page). Why not just use the @href attribute?? Too much to ask? Out of spite, I refused to enable javascript and opened up firebug to examine the script, just to find and manually go to whatever url it was trying to open.

I'm not sure if it's still like this, but I'm just going to use this as an example. When the new IMDb design came out, an actor's filmography page *only* worked with javascript enabled. The effect they were going for could've been achieved through CSS, but everyone is to scared to break IE that they instead decide to screw over everyone who chooses to browse without JS enabled. It's not just IMDb though. There are a lot of major websites that do this. Parts of the website literally don't work at all unless JS is enabled, and in the end it's not even worth it! What they're trying to do with JS is so unnecessary in the first place. It would look better and work better if no JS were involved at all. They should be ashamed.

Johann, I know where you're coming from. I used to code like that when I started using PHP, but after I used another language without curly braces for a while, I realized there is no way to replicate the "curly brace on the next line" habit: e.g.

if a == 1 then
print("hello world")
end

So when I started coding with PHP again, in an effort to keep a consistent coding habit, I started putting the curly brace right next to the function declaration.

Another thing...this is going to be a preemptive defense of myself because I know someone is going to call it out as one of their annoyances. So I'm just going to say it: I prefer using character entities over actual unicode characters in my markup. Why? I don't know. I have no logical argument in favor of it. I just feel cleaner using all ascii in my markup. I've always been this way.

My pet peeve with HTML is that I cannot settle on a formatting style: what to indent and what to not; what to separate with empty lines and what to group together, &c. Strange, I know.

For CSS, I’ve recently grown to like a formatting style as such:

element { property-name: values; }

element {

<indent>property-name: values;
<indent>property-name: values;
<indent>property-name: values; }

As for pet peeves, I haven't got many, but no space between a property name and the values pisses me right off. I’ll make sure to add them in before anything.

As for other logical languages, curly braces should be on the same line as what's before it and there should be empty lines after and before them. Whitespace between parenthesis on both sides, always. I like whitespace, it makes it airy and easy to read. I rely on the editor to let me know the start and end of code blocks.

function ( parameters ) {

<indent>i = ( 1 + 1 );

}

"...what I usually do is open notepad, type a tab in there, and paste it like crazy in the textarea when I want it."

Glad I'm not the only one, haha.

Ooh, I hate the use of spaces instead of tabs, too. And particularly hate it when people don't close their img and br tags with a </> !!

On a personal note, I get so frustrated when people don't add commented-out detail to their CSS! Especially when more than one person writes the code!

God... on that note, I'm endlessly frustrated with people that add a new line contradicting a class or id attribute stated above... like let's say line 20 states .class {margin: 4em} and then someone adds .class {margin: 0} on line 300! Oh, that makes me so frustrated...

Here's my quirk, though... Always writing in the default attributes (like padding, margin, and z-index). I'm sure that extra code bothers people I work with, but in my mind, it's important to be thorough....

When I look at the code of a website, I tend to expect a clean-looking sheet of html-tags and css-styles. Instead you mostly see unreadable code that is so hard to dive in that I give up almost instantly. Any example would be most of the sites fabricated by dreamweaver as Kroc pointed out. When looking at Kroc and theraje's code, you can almost immediately see the structure of the website through the html. Looking further into the css-sheets, you don't have to sift through one-line dreamweaver-creations but well-ordered and commented code.

And that is for me the most important part: I don't have any quirks against how you exactly order your code, if it's with the brackets on the next line, with many tabs, etc. As long as you can find the specific elements in a whip, it really doesn't matter to me.

I agree with Johann to match up the brackets, or with Jose Pedro Arvela, JJ and Glenn Friesen for the space-instead-of-tab quirk, but it does make the code easier to read. As I am learning myself html with Kroc's writing and w3schools, doing it old-school in notepad, my progress is much quicker when web-developers live to the thought of 'code is art', than 'if it works it's fine'.

I'm working on a website for a relative of mine, and I will probably share my experiences and the result with you all when it's ready, or when I'm completely stuck and need help from experts :)

A little edit: I meant Kroc and JJ's site (epsilon-not.net).

Nice Wannes, I'm always willing to talk about web dev if you need help or want to share you work with us.

"Instead you mostly see unreadable code that is so hard to dive in that I give up almost instantly."

Totally agree, but most of the time it's not even dreamweaver. It bugs me when someone makes an extremely JS-heavy site that uses myriads of wrapper divs, so much so that you have absolutely no chance of deciphering whats going on. You would literally have to study it for days to get an idea of how it works. Youtube is a fairly good example of this.

When you think about it, Youtube, in theory, could work perfectly well without javascript. How nice would that be?

Hmmm, I've never made a Firefox or Chrome addon, nor do I know how, but if I did, I would try making an addon called Youtube Lite, that changes the DOM of each page and makes it completely functional without JS. It would be amazing to get the horrible comment system working without JS and get rid of the horrible new channel design. You know your site fails when it would actually be *more* convenient and user-friendly to use a plain html version.

It would be interesting to see how difficult it would be to make Youtube as simple as possible. How much javascript can be left out? How many div-elements can be replaced with proper html-5 tags? A very nice experiment to see how far html5 already is.

Perhaps we can even inspire Kroc to make video.camendesign.com :)

Ah feather. The moment I read it, it came back to my memory, totally forgotten about it. It does the job of simplifying youtube quite good, less clutter. But this is just visually.

When I look at [<a href="youtube.com/…">...youtube.com/watch...</a>] it does seem simpler, but when I decided to check the source, I got a view of 2 lines. Only 2 lines. The sidebar (on the bottom, because it was only 2 lines) couldn't be selected, for it was so cramped, the bar itself wasn't completely visible [<a href="img192.imageshack.us/…">...imageshack.us/...</a>]

It's a horror for me, even trying to grasp any of the code, to learn from it. After all, I'm only learning about html a few weeks. In this topic it was about your quirks. And when you look at the code, whether from the regular youtube or the feather-skinned one , it is as readable to me as chinese, which I can't tell apart from Japanese.

Yes it's server-made, but surely there must be a more elegant way to code those pages? To use more sensible tags than <div id="..."> If I wanted to learn html and saw that, I would crawl back to my safe, ignorant, surfing-only-self, and let web-development be done by programming-genies. It is only by looking at your site Kroc, and JJ's, that web-development becomes something reachable.

And silentube, that's a bit extreme. I only meant simple in coding-manner, not viewing-manner.

"It's a horror for me, even trying to grasp any of the code, to learn from it."

Then don't try to learn it from pages that are reduced to the bare minimum :)

The google search pages aren't any better, and that is because they get called a gazillion times a day. No, you simply can not use name="search_query", you have to use name="q". In some cases that is still understandable for an outsider, in most cases it isn't. And it doesn't need to be, it needs to be as small and compatible as possible, period.

The CMS thingy I'm currently coding doesn't output any line breaks either, not even one, as view them as a waste of bandwidth. Though when I find a way to "beautify" the HTML automatically, I'll surely add such an option to the cookie preferences. But to serve a "pretty" page with 20% of the data just being indentation, the source of which 99% of the visitors never get to see...? Nahh. I'd rather be the bad guy than do that ^^

While my CSS is somewhat "normal" (#header instead of #h) some class names are short bordering on obfuscated, too. Instead of, say, "perm_admin" (to color stuff only the admin can see), I have "padm". Or "pown" for stuff only the owner can see. Just because those get repeated a lot on a page, so I try to find the shortest name that still means something to *me*. Stuff that has beveled borders and children has is of class ".c", which in my mind stands for "container" (which doesn't even make sense haha, but ultimately that doesn't matter, I use that way to often for that class to have a long name, so any letter would be fine with me really).

Sure, the CSS is commented, but the comments get stripped and each definition put on one line before it gets sent out :P Here too I will add an option to not compress it, but compressed output will always be the default.

But hey, my CSS is kinda hackish anyway, so you wouldn't wanna learn that from me of all people :) And prolly not from Google either ;)

Sure, and it's good for someone to say that out loud :D

I don't even use Chrome anymore because I just can't stand how it pees on every single convention of installing apps and having control over them. I'm not a good coder myself by ANY stretch, but yeah, Google doesn't really impress either.

But I really do think ultracompressed output is excusable sometimes, in itself, and definately in the case of Google/Youtube, they just have that much traffic... but of course it's much better if you compress elegant code a lot ^^

A bit offtopic, but I ended up writing a simple GreaseMonkey script that allows watching of YouTube videos without any javascript enabled (aside from GreaseMonkey of course):

var elements = document.getElementsByTagName('script');
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.match(/var swfHTML/)) {
elements[i].parentNode.innerHTML = elements[i].innerHTML
.replace(/\"/g, '__DQUOTE__')
.match(/(isIE) ? ".+" : "(.+)";/)[1]
.replace(/__DQUOTE__/g, '"')
.replace(/"s+s"/g, '').replace(/\n/g, '').replace(/\//g, '/');
break;
}
}

Comments won't work. This is unfortunate because youtube is full of many enlightening comments pertaining to justin beiber.

Hmmm, half of the backslashes got stripped.