TIPS, TRICKS & BOOKMARKSCSS Navigation Example
I've decided to try putting together a concept I had for navigation. The idea was to have navigation buttons that appeared to come out from underneath another element. I wanted to try and combine a number of the CSS tips and tricks that are available into one well-implemented example. The navigation on the site as of this writing uses the Sliding Doors technique. It works well and definitely adds ...
Sortable HTML Tables
A nice tutorial on creating sortable tables. Just by adding a class to a table. ...
Fusebox Methodology
The Fusebox Methodology is a Web application development process designed using the Fusebox Web Application Standard but can also be applied to Web application development in general. ...
Import e-mail addresses from a text file into Outlook
To import the contacts into Outlook 2000 you can do the following: Create a new folder under contacts that will store the imported contacts. With the folder selected, click on File > Import and Export and then select 'Import from another program or file'. Select 'Comma Seperated Values' or 'Tab Seperated Values'. Outlook may prompt you to install this feature before proceeding. Select the file to ...
The ReUseit winner is in!
The winners of the Reuseit contest are in! There are some really great designs and I agree with the judges decision on the winner. ...
Use of eval in Flash
Sometimes I find programming Flash so frustrating. It seems to break convention in a number of areas that it often leaves me banging my head against my desk for hours. My recent beef: the use of "eval". In programming with javascript, I've enjoyed being able to use eval to evaluate a full expression. For example, eval("myimg.height + 20") would determine the height of my image and then add 20 to i...
3 versions of IE on one machine
A link from mezzoblue got me to an article on Insert Title that documents running multiple versions of IE on the same machine. I needed to bookmark this! ...
WYSIWYG editing in Mozilla
Having developed a WYSIWYG editor for IE, I'm happy to see that Mozilla 1.3+ has similar functionality. It even works in Firebird since it's based on the Mozilla code. The interesting thing will be to test it out on a Mac. This should theoretically offer cross-platform editing. My only complaint is use of the selection and range objects is different than IE. Since neither object appears to conform...
ReUSEIT Contestants
The list of contestants are in for the ReUSEIT contest. While I put together an exhibit, I never actually put in an entry into the contest. There's definitely some great designs in the bunch! ...
Dreamweaver Extension: Metadata DC.DATE Auto-update
For Government of Canada sites (and possibly now with the 508 Accessibility in the States), metadata has become very important. One specific meta tag is the dc.date.modified which indicates when the document was last changed. With this command in place, this meta tag will automatically get updated every time you save the page. It should be easy enough to extend this to update other metadata automa...
Dreamweaver Extension: Change to French Quotes
Having worked on a number of bilingual sites, I often have to copy and paste French content from a Word document. One of the problems I've found is that the quotations don't get copied properly. This Command will change all occurrences of "some text" to «some text». It basically finds all occurrences of " and then alternates between replacing it with « and ». Download "Change to ...
Tabbed Navigation using CSS
For those who wish to push tabbed navigation to the limit, check out Sliding Doors of CSS, Part II from A List Apart. ...
semi-transparent and stuff
Just a couple URL's to bookmark: Cross-browser semi-transparent backgrounds CSS-based menus enhanced for Mozilla, Opera, and Safari ...
CDO for Windows 2000
Okay, sometimes I feel out of date. The last time I tried developing for CDO was under NT4 and to put it bluntly: it sucked. It didn't offer any flexibility and a number of ISP's that I worked with didn't support it. So I've been using custom SMTP objects like ASPMail ever since. Well, it seems there's CDO for Windows 2000 that should do the trick. There's not a lot of tutorials out on the web tha...
Send E-mail from ASP without a COM object
For those that have IIS's SMTP service running on the same machine as your Web server, you can send out e-mail's without using a COM object. The SMTP service monitors the c:\inetpub\mailroot\pickup\ folder (based on a default installation) for new messages. Simply create a new text file in this folder that meets the RFC822 e-mail format. It should be zapped into the system and an e-mail will be ...
ON DELETE CASCADE in Transact-SQL
Most of the database programming I've done is in MS SQL 2000. When working in SQL 7, though, the ON DELETE CASCADE feature of creating a table doesn't exist. I suspect you could make a trigger to handle this or you could try out a stored procedure to do the trick. I haven't tried it myself and I'd think a trigger would be more intuitive but it's there if I need it. ...
line breaks and the hyphen
Want to prevent line breaks from occurring on a particular hyphen? There used to be the handy <nobr> tag but despite support in Netscape, IE and even to this day Mozilla, it was never part of the HTML standard. The regular hypen (-) or the n-dash (–/&8211;) still cause line-breaking in IE. There's the minus sign (−/−) but while the minus sign prevents IE fro...
Mouse Gestures for ALL!
Having become an avid fan of mouse gestures in Mozilla and Opera, I decided to venture out and do a search for a generic mouse gesture application for Windows. Lo and behold I found StrokeIt - Mouse Gestures for Windows. Allows gestures for all application as well as ones tailored to specific applications. And best of all, it's free! ...
Is bloated CSS the new HTML?
Ethan Marcotte's recent rambling on the potential for bloated CSS brings up an interesting quandary: as we move to a more semantic web and HTML gets streamlined, are we simply increasing the complexity and, more importantly, the size of our CSS files to the point where it negates the value of it? Dave Shea talks of 50k CSS files but is this an issue? Ethan talks of the extra div's, span's and hac...
link checkers
I normally use Xenu to check links within a site. Also, check out the W3C Link Checker. ...
All about Fahrner
For those that are familiar with the Fahrner Image Replacement approach to creating a more semantic (and accessible) web is actually inaccessible. A recent article at A List Apart disects the issue with a little more detail. Also, check out a more accessible version of the FIR approach over at sitepoint. ...
the better 'if'
Any person who programs in JavaScript is quite familiar with the 'if...else' statement and likely aware of the 'expression ? true : false' format. While the second format is smaller, there is another key advantage over the 'if' statement: it can be embedded into another statement. This can help reduce excessive 'if' statements when the logic contained within them is repetitive. For example: if (ap...
Add Link Toolbar to Firebird
A feature of HTML since version 2 has been the link tag. It's currently used most frequently to link to a stylesheet or a shortcut icon. It can actually be useful for improving the navigability of your sites. The W3C explains the different link types. Firebird, by default, does make use of these great tags but through the link toolbar extension a toolbar will appear on the status bar whenever a ...
Firebird 0.7 is released
That's right, Mozilla Firebird is out now and there's a couple features that I particularly like such as the alternate stylesheet support and an advanced preferences panel to make it easier to configure. I didn't create a new profile when I installed the new version so I'm not sure if any extensions were included but my All-in-one Gestures extension was still hanging around. Ever since I used ges...
Use of "-moz-border-radius" CSS property in Standards Mode
In working on a project, I was using "-moz-border-radius" to add a rounded border to some tables. I added the correct doctype and then suddenly the rounded borders disappeared. It would seem that standards mode requires that "px" be specified whereas in quirks mode, it determined the value correctly. Eg: {-moz-border-radius:20} doesn't work in standards mode but {-moz-border-radius:20px;} does. ...
An argument against multicolumn web design
Michael Barrett at Abouthalf dot com argues in defense of single column web layouts. The key argument is as it always should be: develop as is appropriate for the medium. ...
The CSS Mid Pass Filter for IE5.x/Win
The Mid Pass Filter trick allows you to specify a stylesheet that will only be used in Internet Explorer 5 or 5.5 for Windows. ...
Using the Float property in CSS
When it comes to a table-less design using CSS, the float property is the one that gives you great flexibility. Check out Floatutorial: Step by step CSS float tutorial to get you started (or get new ideas). ...
Where's that cursor?
In my CMS, there's a "source view" and a "design view". This is a pretty common feature found in WYSIWYG editors. However, when switching between the two views the cursor will usually default to the very beginning or the very end of the text. The user then has to locate where they were last. There is a way around this! Using a placeholder while switching between views. The placeholder is made of...
Know your entities!
Having worked on numerous bilingual sites, I often run into accented characters and ligatures that don't work in older browsers. Entities such as ™ and œ don't work in Netscape 4. Luckily, N4's support for numerical entities is much better. ™ can be replaced with ™ and œ can be replaced with œ. Check out the W3C's list of character entit...
Colour-blindness and web development
Dave over at Mezzoblue talks about Colour Bland. It goes into a more in-depth discussion on colour-blindness issues in web development. ...
Arsenal of Tools
I think in every web developers toolbox should be a list of items that they find indispensable. Or at the very least, add some great value from time to time. Here's a few from my list: Zoom Search Engine: This is a javascript-based search engine. Now for most, this may silly but having developed a few HTML-based CD-ROM's now, this has come in quite handy. It works just like most search engines a...
Two great tools
Two great tools are available to make it easier for us web developers to create table-less designs. First is List-o-matic, a nice little app that steps you through the process of turning a list of items into sleek navigation. The second is Layout-o-matic which allows you to choose a 1, 2, or 3 column layout. ...
Logo
I really enjoy a good logo. If a company has a good logo, it really enhances the overall branding of the company and can create a sense of familiarity where mere words can't. A recent article in Wired talks about how Apple is putting some new touches to the logo. Very nice! ...
ISSN for Weblogs
"You can apply for and use an International Standard Serial Number for your Weblog. Your blog will then officially exist in the worldwide standardized encyclopedia of periodicals." Did you know you can get an ISSN for Weblogs? This courtesy of Zeldman's blog (who incidentally does have his own ISSN). ...
Firebird is hot
I've been an IE fan since version 4 came out so many years ago. Netscape 4 was extremely buggy for me and just didn't feel as comfortable as IE. I've made sure to keep my eye on other browsers since like Opera and the Mozilla bunch. But again, it just didn't feel right. There seemed to be some feature that I loved to use in IE that just wasn't available elsewhere. Then Firebird came along. Still b...
back to square one
After using blogger for a period of time, I've decided to take the plunge and switch over to MovableType. Oh, the joys of technology. ...
Fluid or Fixed?
The eternal debate! Okay, maybe not so eternal but when you work with designers that develop their sites in Photoshop and often come from a print background, the question often comes up. A survey done last year determined that it doesn't take people any longer or quicker to find information on a page. More importantly to note, however, is that "Users prefer fluid". ...
ReUseit
There's a contest on to redesign Jakob Nielsen's useit.com site. I thought it pretty interesting and I wanted to test out my skills so I added my own entry to the exhibition. ...
onpaste fired oncontextmenu
Somebody pointed out to me a rather troubling issue. Right-clicking on a page to bring up the context menu fires the onbeforepaste event. What if you want to copy text and not paste? The event shouldn't fire. The solution is not to use the default context menu. Create your own context menu to get around the issue. ...
Instant Page Validation
Favelets or Bookmarklets are little javascript-based bookmarks that can come in quite handy. My personal favorite is: javascript:void(window.open('http://validator.w3.org/check?uri='+window.location,'','')); I've added this to my Links bar and if I need to validate a page, I just click the button. ...
Don't be so shy
Ever wish a word could be conditionally split in the middle? For example, if the word application didn't have room at the end of the line, instead of moving the whole word to the next line, it just hyphenated itself like so: App-[LF]lication. Look into the HTML entity ­ (the soft hyphen). Here's the caveats. As it turns out, the only browser that seems to support this properly is Intern...
Top of Page
Top of Page links are quite common on a number of sites. In fact, most of the government sites that I do mandate that the link appear at the bottom of the page. I've seen some developers include it every few paragraphs. I've just assumed, "Yeah, that's a good idea" and then I actually stopped to think about it. The conclusion I came to was to NOT use them and I have a couple reasons why. Why dupl...
XHTML compliant Flash
A List Apart article gets into the nitty gritty of implementing Flash using XHTML code. ...
Using getBookmark and moveToBookmark
The getBookmark method doesn't do what you might initially think. It doesn't allow you to create a link to an internet shortcut or get one from the user's machine. What it does do is create a "snapshot" of a selection so you can return to it later. The information returned from the getBookmark method is opaque. This means that it is unreadable and ...
Pasting Content into the MSHTML
For those of you who have read the article on importing content from Word into the MSHTML editor have noticed that this mechanism is handled through a modal dialog box. A more common request, however, has been: "How do you parse the content using the onpaste event?" Many have tried to use the clipboardData object and the getData method to try and retrieve ...
I'm Jonathan Snook and I write about web design and development. I speak at conferences and I yammer on about what I'm having for lunch on Twitter. You can keep up to date with everything I blog here via the RSS feed.
Want to learn more?
