Tips and Tricks

[Johnno]

Here's a little topic that might liven things up and provide some helpful hints.

The concept is simple - post a tip, trick or hint related to Web Development and Programming.

 

I'll begin:

Field: CSS

Using attribute selectors is easy, and helps clean up code.

 

<input type="submit" name="submit" value="submit" />

 

 

input[type=submit] {margin: 2em;}

 

That code will give any input element with the attribute type set to "submit" a 2em margin.

I've seen many people use classes especially for giving the submit button a top margin. This solves the problem without the need for cluttering classes.

 

W3C page on CSS2 selectors.

 

[tehhunter]

News to me. Good work, as I've never really ever been able to get CSS before despite knowing just about every other web language.

[BenMillard]

I'm pretty sure that attribute selectors don't work in IE, so there's not much point in using them. D'oh!

 

(EDIT) Oh, I should probably post some tips, lol. Well, I find that Firefox makes for a great web development environment (although you should always test in lots of other browsers and not use any proprietary elements!) because of the brilliant extensions you can get for it:-

• Web Developer Toolbar - I think any web designer worth their salt knows about this and has it already.
• HTML Validator - based on W3C's "HTML Tidy" project, this adds a validator engine to Firefox. It automatically displays the number of errors and warnings in the statusbar, so you can see at a glance whether there are things which need attention instead of sitting around waiting for an online validator to response.

   

  It also adds a pair of panels in the "View Source" window at the bottom. On the left is a list of all the errors, so you can jump straight between them. On the right is a detailed explanation of the error selected in the left panel. All the errors and warnings are highlighted in the code, so you can just scroll through to see which parts aren't quite right.

   

  As segosa said when I linked him to it: "wow this rocks"

• DOM Inspector - this is an optional extra you can get by selecting it from the "Custom" installation next time you upgrade. You may already have it, check your Tools menu in Firefox. Shows the elements of the page in a nested treelist with endless details in the right hand panel. Useful for checking the nesting of your elements and how the CSS is being inherited by objects.

Not many people seem to know about that second one, but it's amazingly useful for serious coders or anyone who takes pride in thier Webby work. Edited September 16, 2005 by Cerbera