Your favorite web design tricks?

March 16, 2006 10:44 AM

What's your favorite HTML, CSS, Javascript web design trick?

I'm working on a web design project for class and while looking through books I'm finding plenty of basic little tricks, like how to do a rollover, but is there any cool little trick that you like to use.

The one gorund rule for the project is that is has to be something that can be coded by typing into notepad, so ideally html, css, or javascript.

Also, what's your favorite sites for keeping up on web design, and css in particular?

posted by dial-tone to Computers & Internet (27 answers total)

I came across WebMonkey's live image thumbnails tutorial (demo and alternative versions) earlier today that might have the cool factor you're looking for.

Favourite sites?
Roger Johansson 's 456 Berea St;
Derek Featherstone's Box of Chocolates;
Simple Bits (oddly styleless at the moment);
Andy Clarke's All That Malarkey;
Andy Budd.

It's a good idea to keep an eye on the del.icio.us/popular page will lead you to many a good article/tutorial/website.
posted by ceri richard at 11:01 AM on March 16, 2006

Make blocks of text (or whatever, really) disappear and reappear by clicking a button.


<a href="#" onclick="el = document.getElementById('foo'); el.style.display = (el.style.display == 'none') ? 'block' : 'none';" >click</a>

<div id="foo">
stuff here
</div>

posted by rjt at 11:15 AM on March 16, 2006

No doubt quite dumb: In rjt's example, how would one set the anchor to load with the text hidden, rather than revealed?
posted by boombot at 11:31 AM on March 16, 2006

boombot:
<div id="foo" style="display: none;">
stuff here
</div>


Also, assuming you don't want unnecessary '#'s cluttering up your address bar whenever you click, add the bold code:

<a href="#" onclick="el = document.getElementById('foo'); el.style.display = (el.style.display == 'none') ? 'block' : 'none'; return false;">click</a>
posted by rjt at 11:43 AM on March 16, 2006

I think Base64 encoded images are the bees' knees. For example, if you view source on this image:

you'll see that I don't reference a URL for the image, I actually embedded it in this comment. In theory, a dedicated individual could type these into notepad.

More info at the Wikipedia and there's a tool to generate these URIs that I used for this comment.
posted by revgeorge at 11:55 AM on March 16, 2006 [3 favorites]

revgeorge, wow that is pretty cool
posted by poppo at 12:23 PM on March 16, 2006

Holy crap, I can't believe nobody's mentioned A List Apart, otherwise known as ALA. They rock.

Also, RevGeorge--cool, yes. However I'd phrase it as "a completely batshitinsane individual" myself ;)
posted by cyrusdogstar at 12:40 PM on March 16, 2006

also, the live preview on this very site is a nice trick: View Source and look for the prev() function.
posted by rjt at 12:41 PM on March 16, 2006

That live image thumbnail was pretty cool.

I did an implementation of Lightbox for an exhibition we have up now for the artist Grant Wood.
posted by Taken Outtacontext at 1:07 PM on March 16, 2006

Something simple that a lot of people miss is that you can apply multiple classes to an element.

.red {color: red;}
.right { text-align: right; }
.hand { cursor: hand; }

<input type="text" class="red right hand"/>

This little tip can dramatically improve your CSS.
posted by Leon at 1:16 PM on March 16, 2006

It is not a trick, but I ♥ Blooberry's HTML and CSS references.
Also what Leon said. Having a class attribute of "indent120 vcent widetitles" is delightful, and easy to understand at a glance.
posted by boo_radley at 1:30 PM on March 16, 2006

CSS Play by Stu Nicholls

He does amazing things with CSS. I learn something new everytime I go to his site.

I also like that fact that he's nearly 60 and still rawkin' with the CSS.
posted by potsmokinghippieoverlord at 1:55 PM on March 16, 2006

1. I like labeling both the opening and closing container tags, so that even if I get sloppy with my indentation, I know where a given DIV starts and ends.

<div id="foo">  Like so</div id="foo">

I find it really useful for managing my own disorganization, however the w3c does not agree with me, and for some stupid reason using this trick keeps pages from validating. Strictly speaking, they want you to only name the id or class for the opening tag. If somebody can explain why this is mandatory, I will be chastened, but until then I think it's dumb.

2. I'm a fan of some of the Mozilla-only css attributes like

-moz-border-radius

Which gives you nice, rounded boxes without using images or hacks. Doesn't work in IE, but it doesn't break the page, either, it just shows them as regular square boxes.

3. As mentioned above, stacking classes is really helpful, and makes your code look more elegant than that of the average bear. It will also make you think about CSS differently, and help you understand why it's so cool.

4. You can a given tag will have a set of attributes within the document as a whole, but it will have a different set of attributes if it is contained within a particular section of the page. For instance:

h1 {color:blue;}#menu {background-color:blue; color:white;}#menu h1 {color:yellow;}

This says that by default, all H1s in your document have blue text. But what if you want to have a blue menu with white text? Your H1 isn't going to be visible, because it is the same color as the background. Using the third statement there, you are declaring that even though H1s are usually blue, any H1 used inside a #menu will be yellow instead.
posted by Hildago at 2:05 PM on March 16, 2006 [1 favorite]

Whoops, I worried more about my formatting than my typos.

#4 should say "You can declare that a given tag will have a set of attributes..."
posted by Hildago at 2:07 PM on March 16, 2006

(Since you asked Hildago, it is "mandatory" because that is simply the syntax for XML/HTML. Attributes go in start tags. Web browsers are very permissive of syntax errors, which is why you can get away with that, but the whole point of the W3C validator is to identify those very errors that web browsers ignore.)
posted by Khalad at 2:12 PM on March 16, 2006

I do the same thing as Hildago's #1, but I do it like this:
</div><!-- /foo -->
posted by kirkaracha at 2:33 PM on March 16, 2006

Khalad, thanks for answering my question. Your point is taken. I guess my issue is that it's hard for them to convince me of the necessity of 100% valid code when they split hairs like that without any obvious benefit to complying in this particular case (and indeed, an obvious drawback of having less readable code). Ahh well.
posted by Hildago at 2:52 PM on March 16, 2006

most pages do not validate according to the w3c's standard. the w3c is still at war. still a club--not quite a claw.
posted by Satapher at 3:26 PM on March 16, 2006

I like digital media minute's XHTML character reference.
posted by letitrain at 3:32 PM on March 16, 2006

My favourite Javascript thing is under the hood: Compression.

My Javascript packer

Example (view source)
posted by krisjohn at 4:40 PM on March 16, 2006

however the w3c does not agree with me, and for some stupid reason using this trick keeps pages from validating

Yeah, because it breaks all kinds of shit. One of the single most useful methods is getElementById. That's element--singular. Element ID's are unique. That way when you want to manipulate a specific element, you can jump right to it. For example:


<span id="hidetext">HERE IS SOME TEXT.</span><br />
<select onchange="document.getElementById('hidetext').style.display=this.options[this.selectedIndex].value">
<option value="block">Show the text.</option>
<option value="none">Hide the text.</option>
</select>


Personally, I like manipulating DOM objects on the fly. AJAXifying stuff is fun. Here's a really useful function for DOM manipulation:


function getElementsByClassName(oElm, strTagName, strClassName) {
  var arrElements = (strTagName == "*" && document.all) ? document.all : oElm.getElementsByTagName(strTagName);
  var arrReturnElements = new Array();
  strClassName = strClassName.replace(/\-/g, "\\-");
  var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
  var oElement;
  for(var i=0; i<arrElements.length; i++) {
    oElement = arrElements[i];
    if(oRegExp.test(oElement.className)) {
      arrReturnElements.push(oElement);
    }
  }
  return (arrReturnElements)
}

posted by Civil_Disobedient at 5:01 PM on March 16, 2006

Sort any table by clicking on its headers with unobtrusive JavaScript.
posted by mbrubeck at 5:02 PM on March 16, 2006

Still getting over that weird data: trick. Never seen that before.

My favourite trick is to have the CSS link tag:

<link rel="stylesheet" href="foo.css">

inside a server-side include. The bad thing about style sheets being cached is that you can't un-cache them if something turns out to cause huge problems in some browser.

If you have the line above inside an SSI, then you can instantly have all your pages refer to

<link rel="stylesheet" href="foo2.css">

and be certain that everyone's CSS has reloaded. You get the best of client-side and the best of server-side.
posted by AmbroseChapel at 5:28 PM on March 16, 2006

Yeah, because it breaks all kinds of shit. One of the single most useful methods is getElementById. That's element--singular. Element ID's are unique. That way when you want to manipulate a specific element, you can jump right to it.

It doesn't actually break it. Even in your example, if you change the closing span tag to read </span id="hidetext"> the javascript still works. There may be examples where this kind of thing would cause confusion, but I can't think of any. I do freely admit that my knowledge of xpath and the DOM is pretty shallow, though.. I don't claim expertise in this area, only curiousity.
posted by Hildago at 5:51 PM on March 16, 2006

Hmm, I suppose it could just depend on how the browser handles id attributes applied to close element tags. My guess is that most simply ignore it, which is why the JS will normally work. It's better programming practice to wrap your long code with the following:

<!-- start block -->
<html goes here>
<!-- end block -->
posted by Civil_Disobedient at 7:39 PM on March 16, 2006

.

me too

< !-- name of code: start -->
<xhtml goes here />
< !-- name of code: end -->
posted by juiceCake at 8:41 PM on March 16, 2006

Programming languages (and I include XML in this) are designed for language parsers to read, not humans. When you start throwing in bits of code that might or might not be comments, you're adding ambiguity and making the task of writing a parser considerably more complex. Consider:

while (x == 3)
{
[...]
} (x == 3)

You're asking the parser to "know" that the 2nd "(x==3)" is intended to be a human-readable comment, even though it looks like regular code. So we have a situation where each statement could be (a) code to be acted upon, (b) a comment, (c) a syntax error.

To remove this ambiguity, we wrap the human-readable bits in magic "ignore me" characters: /**/, //\n, #\n, < !---->, etc.

The fact that your construct doesn't just throw an error is a testament to the browser writers who have bent over backwards to render everything that's thrown at them. This is both a blessing (it lowers the bar to coding HTML) and a curse (each browser might treat invalid code differently, writing code that interacts with the web is harder, and browsers are more likely to have rendering bugs).
posted by Leon at 3:49 AM on March 17, 2006