TIPS, TRICKS & BOOKMARKSRetrospection, Introspection and Future-spection
There are quite a few people with their Best of lists and their predictions of the year to come. I had originally intended to do the same and browsed my archive to find a personal list of what I liked but was somewhat surprised. I had expected to find a large collection of well-thought and delightful articles ala 456 Berea Street. Instead I found mostly stuff I encountered during development; o...
Quick Link: Lightbox JS
Lokesh Dhakar sent me his unobtrusive JavaScript-based image popup, called Lightbox JS. I like the feel of the result although the execution feels a little jumpy in Firefox. A smoother transition and a way to cancel the image (or at least hide the overlay) before it has loaded would be nice features. ...
Quick Link: Make Internal Links Scroll Smoothly with JavaScript
Just wanted to bookmark this little script: Make Internal Links Scroll Smoothly with JavaScript. If a user clicks a link to an on-page anchor, it'll scroll the page instead of jumping directly to the spot. ...
Merry Christmas
With only two days left before Christmas, I'm thinking I should start my shopping. And maybe wrap a few of the presents. In any case, I just wanted to take this moment to wish you a Merry Christmas (or Happy <celebratory event> if you're not into the whole Christmas thing). I hope Santa (or other gift-giving entity) brings you plenty of gifts! Hmmm, what are the chances he's going to bring m...
Quick Links: Around 9rules
A few interesting things from fellow 9rulers and I thought it easier to bundle them up into one quick post. Matt Brett creates PSD and AI files for the feed icon used in Firefox and the Internet Explorer 7. Matthew Cahill, recently inducted into 9rules, has a nice site—love the topics in the sidebar. And Roger of 456 Berea Street links to a few of his favourites for the year (might have been...
Web Developer Needed
I’ll be working full time on a new project in January with a great team of people and we need a backend guru to put this thing together (I’d do it myself but there’s only so many hours in a day!). Background We’re building a very cool Web 2.0 (yes, I know, but really, we are) web app. It’s an ambitious undertaking with a global audience and the potential to re-defi...
Going Solo
After working at Fuel Industries for almost two years and working with some really great clients on some very cool projects, I have made the decision to go solo. It's funny though because "going solo" isn't a very accurate description of things. There are some really supportive people, especially within 9rules, that have been there to lend a helping hand or to let me know of possible work opport...
Tables with Style
If you haven't heard of 24ways, I highly recommend you hop over there right now. An idea hatched by Drew McLellan of all in the <head>, 24ways is an advent calendar for web geeks. It features an idea a day from the December 1st until Christmas Eve. I have the pleasure of having today's spot on the calendar with my article, Tables with Style. I cover a few quick tips on adding some funk to y...
Quick Link: Z-index and Positioning
In Andy Clarke's entry at 24 ways, "Z's not dead baby, Z's not dead""Z's not dead baby, Z's not dead", he describes using z-index and absolutely position elements within a relative container. I've used this on projects in the past (with alpha PNG's) and it works well. Older versions of Safari and Netscape have issues under certain edge cases. ...
Rounding Integers Proves Troublesome
Here's the situation: I have something that is 149.95 and I want it to be represented as 14995. So, using VBScript, I take the number and multiply it by 100. On the off chance I got a number that included more than two decimal places, I wanted to lose any decimal points that might exist. VBScript has a function Int that can do just this. Every now and then, though, that whole number ends up being ...
Know JavaScript and need a job?
If you consider yourself a JavaScript master and live close to Palo Alto (that's in California!), Facebook is looking for you. Check out Avalonstar for more info. ...
Quick Link: Ruby on Rails hits 1.0
What's that? A Web 2.0 project that ISN'T in beta? That's right, Ruby on Rails is officially 1.0. ...
Quick Link: Unobtrusive and Persistent Script.aculo.us Effects
A quick little tutorial on creating unobtrusive and persistent script.aculo.us effects. ...
The YourTotalSite Redesign that never was
In helping out with YourTotalSite, Garrett had asked all of us to put together a design for a site. Alas, with the demise of the site, the redesign never saw the light of day. However, I'd like to take the time to show the designs that I was working with and some of the thought process behind it. View Comp One The first layout was a standard two column blog layout. Some key design elements inclu...
Quick Link: How to: Embedded Google Maps
Paul Stamatiou puts together a decent how-to on embedding Google Maps on your page. Is a Yahoo Maps How-to on its way? ...
Quick Link: Worn Type
Get that wicked worn look using CSS. It uses an empty span to achieve it's magic -- you decide if that's acceptable. ...
Quick Link: Quick Guide to Prototype
Particletree offer a decent overview of some of the features of Prototype, the JavaScript library with some great utilities built into it. It's important to mention that at +30k, it's best to take out anything you don't need. ...
Quick Link: Firefox 1.5 Released
Firefox 1.5 has been officially released. Lots of new stuff. Things I find interesting: better application update feature and better CSS support. Now, when will IE7 make an appearance? ...
E-mail Makes You Smarter
Purely observation but I believe that e-mail has made people think I am smarter than I am. Somebody asks me a question and I have the time to formulate my response. Reread and rewrite it until it's grammatically and argumentatively correct. I can research possible options. It gives me the flexibility to answer on my own time. In person, I'd end up stumbling over the right word or misphrase things...
CSSVista, you done me wrong!
So, I'm working on this page. I've spent about four or five hours on it. Lots of fun layout hurdles. I start getting close to the end and I'm just about to fix a couple things in Internet Explorer. I remember hearing about CSSVista and it's fantastic capabilities to live edit CSS and preview it in IE and Firefox. "Perfect," I thought. It'll save me the time of fixing it in IE only for it to break ...
Move over AJAX, welcome AHAH
I jest. I just think it's interesting that people have taken the time to create an acronym and development process for something that everybody has been calling AJAX anyways. AHAH is Asychronous HTML and HTTP. HTML gets pregenerated on the server and then spit into the DOM via innerHTML. This is how I've always approached it. It just seemed so much easier and faster on the client side. As the team...
Interview at mcville
Marko of mcville.net has something pretty interesting going on. The site is becoming the Stylegala of the interview world with interviews of web personalities from around the world. And he's smart in asking each interviewee what they like or don't like about the site. What a perfect way to illicitelicit feedback from quality designers (myself excluded). In fact, if you could change one thing about...
Google Ads to target content. What about Google search?
You can now target specific content on your site to be labelled as valuable, rich content to make the Google Ads more targetted and thus hopefully increasing your clickthroughs and leaving you with a big pile of cash. What I haven't figured out is why Google Search hasn't decided to come up with a search-agnostic way to weight the importance of content in a similar way. In doing so, Google searche...
Hidden Rewards
You see them everywhere. Links to hosting providers, Amazon, and other referral programs. Ads, like Google or Yahoo, are clearly indicated as ads but Amazon links often aren't. Referral programs, especially for hosting companies, almost never are. My question to you is whether there should an obligation from the site owner to disclose these types of things? Does it matter whether the site owner r...
Why Frameworks Suck
Development frameworks are supposed to be our friends. Instead, they often just get in the way. Frameworks suck. What’s a framework? A framework is a set of libraries that attempt to make certain tasks easier. For example, instead of parsing an XML file character by character each and every time you need to work with XML, you might have a set of functions to help you do that. $elements...
Quick Link: Google Analytics
Google has web analytics for free. Similar service coming soon from Adaptive Path is Measure Map. And if you like hosting your own stats (and paying to do so) check out Mint. ...
Feeling nostalgic
After reading an interesting post about Another World (a great game from a few years back) on Binary Bonsai, I took a look at his about page. What caught my eye was his first "logged" entry on the Internet going back to 1996. So, being curious, I checked to see my earliest record and it goes all the way back to January 1994. Wow, two more months it will have been 12 years since that post. Don't I ...
Quick Link: How Big Companies Can Innovate
Kareem Mayan talks of Mike Davidson's departure from Disney and the innovation that can and should exist in big companies (and I would add, should exist in small companies, too!) ...
The Solution to Getting Things Done
The solution to Getting Things Done: "Stop reading this and get back to work!" And it's counterpart, "Stop writing this and get back to work!" ...
Building Traffic through Networking
This post is a little aside from my usual development topics but it's something I've found very interesting. I've often wondered how people like Jeffrey Zeldman, Dave Shea, Molly Holzschlag and (insert your favourite web professional here) have achieved success. I believe it comes down to passion. You must be passionate at what you do. Jeffrey Zeldman wasn't the first person to use web standards...
Quick Link: The Ultimate getElementsByClassName
Robert Nyman adds his version into the fray with his own getElementsByClassName function but accounts for that pesky hyphen (which is a special character in Regular Expression world). ...
YourTotalSite defunct
That's right folks. Garrett Dimon has decided to pull the plug on YourTotalSite. Having had the opportunity to contribute a little, it will be a little sad to see it go. Garrett put a lot of effort and care into the site but with multiple things on the go, he made the decision to close the doors and invest the time more wisely on other projects that will hopefully have a greater impact on the web ...
Snook's Resizable Underlines
Simon Collison (who's name I find way too close to Simon Willison), had come up with a challenge: create scalable underlines that go from edge to edge of the box without using justified text. Using some inspiration, I put together a solution which Colly has so generously named after me. Somehow, I don't think it'll have the same household ring as Fahrner (of FIR) or Inman (of IFR and subsequently ...
Server Issues
Sorry folks. My site was down from Saturday afternoon until Monday afternoon. At the moment, I can say that I'm none too happy with 1and1 hosting. It's hard to really complain when the hosting is free (I signed up during their big "3 years free" plan) but it's frustrating when you get no help in getting things back up to speed. Why would I spend money on the service after my service is done? Noti...
JavaScript Effect Libraries
They're becoming all the rage: easy-to-use libraries that can make your application look sexy. Here's a short list to help you out: moo.fx Moo.fx is the newest one on the block and boasts a small 3KB footprint. Ignore for a minute that you need the 27KB footprint of Prototype to go along with that. All snarkiness aside, Prototype actually has a number of classes built into it that aren't required...
The Expectations of Links
When developing a web page, the user's expectation of what a link does is well understood. Clicking on a link will take you to another page. Within a web application, like Google Mail or Basecamp, links have much more power. They can perform changes, log you out of the application or even delete records. On one hand, should links even have this kind of power? Links are easily acted upon by search...
IE7 and the use of CSS Hacks
When I first read of Microsoft's call to remove CSS hacks, I wasn't too concerned. As Eric Meyer mentions, if they've fixed the rendering bugs and they've fixed the CSS parsing bugs then the hacks will continue to work on their own. The point that a lot of people seem to have missed, and what really seemed to be the point of the IEBlog post, is that gray area where Internet Explorer will render s...
Variable Scope
I've often found new programmers have trouble with variable scope. It happens no matter what language you work in and every environment has its own slightly different rules. So, be sure to check out my recent article on Digital Web, aptly titled Variable Scope for New Programmers. A couple examples: C#: variables declared inside an if or while statement aren't available outside the statement. Ac...
Quick Link: Cross-browser Image Transitions
brothercake's Image Transitions. Yeah, they've been out for awhile but they're still interesting. Especially in this Web 2.0 day and age. Ugh, I just said "Web 2.0". Shoot me now. ...
Quick Link: MAX Awards Finalists
Macromedia MAX 2005 Awards Finalists Fuel Industries (with CP+B) is in there with Watch Me Change. ...
How do you sign an email
From an actual conversation with my wife: You received my, “We’ve chatted before and you’re cool with a nonprofessional signature” as opposed to my “You’re my wife and get the cutesy inside joke signature”. I also have the “This is strictly business so heres my salutation and full name signature.” What’s your email signature? ...
Now added: Quick Links
My apologies to anybody who's been come across any oddities with both the feeds and the site in the past little while. I've added a new category/feature to the site called Quick Links. Quick Links are just that. They're a link with maybe a quick blurb of text. They don't deserve a full page with comments but they do deserve space on the home page and they do deserve to be in the feed. I've been ...
Full Feeds are back
Noone really put up much of a fuss but after a month, it has really been hard to tell whether it has made a difference either way. With that in mind, I've reinstated full-text feeds. ("Reinstated"...like my feed was being punished or something). Hope it wasn't too much of an inconvenience. ...
Treehouse - A Web Development Magazine
Treehouse has released its first issue! Treehouse is a PDF-based web development magazine put together by the fantastic team at Particletree. There are interviews with Jason Santa Maria, Shaun Inman, and Paul Scrivens along with content from Jeremy Keith, John Zeratsky, yours truly, and the members of Particletree. This first issue is free so be sure to check it out. ...
Writeboard from 37signals
Although just a soft-launch for now, I decided to take a look at the application; especially after a thorough review by Solution Watch. Writeboard is a web-based collaborative writing tool allowing multiple authors to go in and edit a single document. Based on that description alone, I thought of Writely but the two don't really compare. As Brian of Solution Watch mentions, 37signals has really ...
Rollyo: Roll your own search engine
Rollyo is still in beta but has now been released to the general public. The idea behind it is that you can select a number of sites that you can search at once. This way, you can create customized topical searches that are of interest to you. Fellow 9ruler, Erik of Kartooner, has set up a searchroll to search all the 9rules sites that cover web development. One of the things that I've really fou...
Stopping Animated GIFs from Animating in Firefox
In Internet Explorer, you've always been able to stop animated GIFs from animating by hitting stop. In Firefox, though, the stop button is no longer available once a page loads. Hitting ESC will stop those annoying graphics from animating. Now, is it just me or did they just add this in as of 1.0.7? Can anyone confirm this? ...
New companies: clear:left and Blue Flavor
Two new companies have made their way into the market, being headed up by some fabulous individuals within the web development community. Over in the UK, Andy Budd, Jeremy Keith and Richard Rutter have started clear:left. Then, over in Seattle, D. Keith Robinson, Nick Finck, Matt May and Brian Fling have started Blue Flavor. Best of luck fellas! ...
Veerle reviews Dreamweaver 8
Over on Veerle's blog, she takes the time to review a number of features of Dreamweaver 8. Some of the features have been staples of previous versions of Dreamweaver, like the built in site management features. New features like the Style Rendering toolbar are definitely targeted at CSS-based layout developers and will no doubt make it easier for developers to create and review their projects from...
Quick Tagging in Dreamweaver
I touched on the Find and Replace dialog but I wanted to touch on a feature more specifically related to the design view. The Quick Tag Editor is one of those features that I use often when formatting content. The editor let’s you quickly add or edit a tag from design view. Need to quickly superscript some text or add a hyperlink but don’t want to switch to the properties panel? Select...
Find and Replace using Dreamweaver
After seeing Dreamweaver pulled through the mud by people who deem it a poor tool for development, I’ve decided to shed some light on features that I feel have saved me countless time and may help you in your quest to produce better web sites faster. One specific feature that stands out for me is the Find and Replace tool. For all you PC users, a CTRL-F will bring the Find dialog right up....
Upgrading to MovableType 3.2
While I've mentioned the possibility of switching blog software, it hasn't happened yet. In the meantime, I've upgraded to the latest version of MovableType. If anything seems broken, be sure to send me a quick note. ...
SOAP Request Parameter Order Can Make a Difference
I built a SOAP request that wasn't working. It took about an hour or so to discover that it wasn't working due to parameter order. It's best to put the parameters in the same order that's in the WSDL. What was also interesting was that the element names that I used in the SOAP request actually didn't make a difference. It was specifically checking the order. A third party built the web service in...
Writely, so.
I've had numerous ideas for web-based applications and the folks behind Writely have come pretty close to reading my mind. Writely is an online document editor. It's primary purpose is to facilitate document sharing between multiple authors. That in itself is interesting. With Word support, it can replace the need to purchase Word by allowing document editing via the browser. Another feature the...
Bookmark: JavaScript Logging
David F. Miller's recent article on A List Apart describes the use of a cross-browser logging tool called fvlogger that can assist in debugging JavaScripts. No more alerts! ...
The Modulo Operator for Alternating Rows
One common design feature is to have different visual treatments for alternating rows. As you iterate through a collection, you can use the modulo operator to determine if you're in an even or odd row. In most languages, the modulo operator is the percent sign: %. Here's a quick example in PHP: for($i=0;$i...
snook.ca on WebJillion
I can't believe I hadn't seen this before now: snook.ca on WebJillion. ...
FeedBurner Konfabulator Widget
Update: I've just added a quick addition. There's now a new icon next to the change id (aka search) icon. A click of the arrow icon should send you to the FeedBurner home page. Also, I've created a permanent page for the widget. All updates will be available there. On a request, I put together a really quick Konfabulator widget that displays your circulation number. This is v0.1 material, that's ...
Opera 8 for Free (Ad-free that is)
Opera is offering an ad-free version of their software for one day only! That would be today! You can download it from download.com and while the site says you have to send an e-mail to get your registration code, you can also go to the Opera site to get your code (I'm currently experiencing timeouts so e-mail may just be easier). (via ForeverGeek) ...
Show FeedBurner Circulation using PHP
As it turns out, I'm not a fan of the Feedburner chicklet (as they call it) that gives you your total subscriber list. In fact, what if you wanted something a little more unique? Borrowing heavily from this code example, I put together this quick script that pulls in your total circulation: <? // define parameters $feedid = 'snookca'; $cache_time = '43200'; // in seconds (43200 = 24 hr...
CSS Star Ratings Selector
Just a quickie that I found interesting: CSS-based Star Ratings Selector. I swear star ratings are the new yellow-fade. ...
footerStickAlt
Having the footer stick to the bottom of the viewport is a common client request. Cameron, of The Man in Blue fame, has what should be a useful and flexible CSS solution: footerStickAlt. It's a variation on footerStick by solarDreamStudio. Just one more nail in the coffin of table-based layouts. ...
FeedBurner and excerpt feeds
I just enabled FeedBurner and set up a redirect on my main feed URL. This should be completely transparent and you should not have to update your feed subscriptions. In doing so and since no-one seemed to object, I've also switched to excerpt feeds. If something seems wonky, let me know. ...
SxSW 2006
The south by southwest festival is back for 2006. Held in Austin, Texas, there is three main components to the festival: music, movies, and interactive. This has been turning into one of the major festivals for the blogging world and while I haven't been before, I hope to make it out this year. Will I see you there? ...
Design Tweaks
I've made a small promise to myself not to redesign this site. At least not for a while. Seeing all the wicked designs out there truly is inspiring. Instead, I've resolved to incremental touches. The Sidebar One thing I was never truly happy with was the sidebar. It originally was dark gray text over a dotted border (like the comments header) but it seemed dull. I tried doing a nice rounded bord...
Database Joins
As somewhat of a follow-up to my previous post, Introduction to Developing a Relational Database, I’ll touch on the exciting subject of joining tables together. This should help tie in some of the “relational” aspects of the relational database. Let’s start off with a quick example using the blog I used in the previous article. In this example, you need to display a list o...
When XPath does not return a node or nodeset
When using an aggregate XPath function like sum or avg, you can't use the methods SelectSingleNode or SelectNodes of the XmlDocument object. The aggregate functions return a scalar value and not a node or node-set (hence the reason the methods can't be used). A simple way around this is to use the XPathNavigator object. XmlDocument doc = new XmlDocument(); doc.LoadXml(xml); XPathNavigator exp = ...
Proof that companies do listen to me.
Blinksale adds custom notes feature for invoices. There's a reason small companies like Firewheel design and 37signals do well; they listen to their customers. ...
Introduction to Developing a Relational Database
Creating database tables and fields can be a fairly straightforward process and even intuitive with a few key steps. Technical database developers tend to use terms like entities (of which come acronyms like ERD which is an Entity Relationship Diagram). I prefer using tables and fields. A table is your entity or your object and a field is a property of that object. When first thinking of what t...
What We Wanted: IE7 Beta 2
Looks like I was right, beta 2 is the browser we've all been waiting for. Microsoft has released a list of fixes that will appear in the second beta of Internet Explorer 7. I suspect the backlash after beta 1 was released pushed them to release the list. Peekaboo bug Guillotine bug Duplicate Character bug Border Chaos No Scroll bug 3 Pixel Text Jog Magic Creeping Text bu...
Blinksale - Invoicing Great for Freelancers
Based on a lot of the buzz, I've been anxiously awaiting for Firewheel to open Blinksale to the public. Blinksale allows for web-based creation and management of invoices including reminders and thank-you e-mails. Having been using a combination of Excel and Acrobat, I was intrigued to see what the service had to offer. It has a clean interface that I found easy to use but also some caveats due t...
Internet Explorer 7 Beta 1 Released
Microsoft has released IE7 beta 1 to MSDN subscribers and a number of beta testers (of which I'm neither). There's been some outlash that Microsoft should have released it to a larger group but I'm doubtful that would have made any difference in the success of this release. It is clearly not aimed at us web developers looking for CSS support rivalling that of Firefox or Safari. Whether it will ge...
How I Added a Weighting to My Tags
In an extension to How I Added Tagging Using PHP and MySQL, I'll cover how I added a weighted tag list to FONTSMACK. Again, the process is fairly straightforward except with a little math this time. There are essentially two steps to this process. Step 1: Determine the number of steps while($ftypes = mysql_fetch_array($rs)) { $types = array_merge($types, explode(" ", trim($ftypes[0]) )); } $...
Learning Web Development
This post is actually in response to the book meme passed on to me by Nathan at SonSpring. As it turns out, I'm not much of a fiction reader; pushed aside by an almost obsessive desire to read every blog post out there. Blogs, however, are the embodiment of why I got into web development. Learn by Example Back in 1995 when I first started to learn HTML, I'd learn by example. Scouring the web for...
All on my own
For those who have been following along with the Building a Web Application series may have thought that GainCMS was just another dead project with few (read: none) updates over the past few months. This wasn't far from the truth with Work and Life preventing me from investing any time into the project. No man is an island I must have been delusional to think I would ever have enough time to get...
Joining 9rules
Everybody else is doing it and I wouldn't want to be left out. (Yes, I would jump off a bridge if everyone else did.) For those unfamiliar with 9rules, it is essentially a collection of well-written blogs (and yet they still let me in). The value I hope this brings to the site is the increased audience that can foster greater, more thought-out discussion on the various web development topics tha...
How I Added Tagging Using PHP and MySQL
On FONTSMACK, I just enabled the ability to view fonts by tag. The tags, I suppose, are more like keywords as there is currently no user intervention to tag fonts with their own keywords. In any case, my implementation is fairly straightforward and I hope this will help others looking at implementing something similar. The Database The database for FONTSMACK is straightforward. All fonts are stor...
Bookmark: Accessible Data Tables
Some fantastic research has been done by Roger Hudson. He and a number of participants tested different techniques for creating accessible data tables. ...
FONTSMACK Blog is Live
FONTSMACK now has a blog. I used WordPress, which I've come to appreciate for its ease of use when it comes to templating. Some may be confused by it but having some previous knowledge of PHP certainly comes in handy. Since FONTSMACK is in PHP as well, it was easy enough to tie in most of the template fairly quickly (those ubiquitous header and footer files). Upload and templating took about an ho...
FontSmack Update
I've started uploading fonts and will continue to do so when I have a chance. In the meantime, I do have the font RSS feed in place. Any new fonts uploaded to the site will appear in the feed. I'll be setting up the official blog for FONTSMACK soon and along with that will be the RSS feed to stay on top of all site activity. I do have the search capabilities developed, it just hasn't been made av...
Launching FONTSMACK, Part 2
Lesson learned, I hope. Jeff Croft put it best when he said: The bottom line is that this may not break the letter of their law, but it certainly breaks the spirit of it. With that, I won't bother waiting to hear back from the foundries. No commercial fonts will be available on the site (unless I get a really nice e-mail back that says, "Sure!" But how likely is that?). As a result, I'll be revi...
Launching FONTSMACK
FONTSMACK is a repository of Macromedia Flash files (SWFs) that you can easily drop into your sIFR-enabled site. After registering the domain name on Monday night, doing the design on Tuesday, and the programming on Wednesday, it's live. FONTSMACK is an idea I had to offer an easy way to add sIFR to your site. It's a little sparse at the moment as I just wanted to get everything up but over th...
Ode to Keyboard
I want to go Home; I keep Shifting. I turn the Page Up, I turn the Page Down. It's time for a Break! Where have I gone wrong? Like an F4, I want to <fly>. I just want to Escape. Where do I Start? Have I reached the End? I've lost Control. Insert, Delete, Return. Insert, Delete, Return. Insert, Delete, Ret-- ...
New Column at Digital Web
To help spread the gospel, I've started writing a new column for Digital Web Magazine called Behind the Curtain. The column is geared towards those just getting into web programming and to help introduce basic concepts and offer tips to avoid common pitfalls. I hope to keep the articles language-agnostic to make them more universal. In my first article, I touch on how HTTP works. Knowing how HTT...
What is AJAX?
After seeing a couple of my recent experiments mislabeled as AJAX-enabled, I think some explanation is in order. What is AJAX? AJAX is a new term coined just four short months ago by the folks over at Adaptive Path. I suggest you give it a read if you haven’t already. As they explain, AJAX stands for Asynchronous JavaScript And XML. At the core of all this is XMLHttpRequest. It allows a c...
Bookmark: CSS Rollovers Image Preload
Marko over at Maratz.com explains a quick trick to preload images used in CSS-based rollovers. ...
Bookmark: Fix back button and enable bookmarking in AJAX applications
Based on a technique used to fix a similar issue in Flash, Mike Stenhouse over at Content with Style put together a solution for Fixing the Back Button and Enabling Bookmarking for AJAX Apps. ...
Month Validator
Niggle’s recent entry on good design, bad design touches on the usability of drop down date selection. Now, as any web developer who has had to put together a form with date selection will know, it is one of the most difficult things to achieve. Some (and I do this, too) simply have three inputs — one for year, one for day, and one for month. They might be text boxes or they might be ...
Fuel Games: Managing SEO
The company I work for, Fuel Industries, just launched a new site: Fuel Games. It is a subdivision focused specifically on gaming as a brand-building experience, also known as advergaming. One of the main goals of the site was to jam-pack it full of content; to make it interesting to read and to draw in repeat visitors. An extension of that was to improve search engine results. I did a couple key...
Writing at YourTotalSite
Garrett Dimon was kind enough to ask me to become a regular contributor to YourTotalSite and I graciously accepted! What does this mean for snook.ca? Absolutely nothing. While it may not have been obvious, I tend not to create opinion pieces or touch on beginner tutorials on web development. Instead, I've tried to keep true to my tagline: tips, tricks, and bookmarks on web development. So, what ...
Your Favourite getElementsByClassName
There's a variety of scripts out there for getElementsByClassName. Oddly though, the first 20 or so results from Google are confusing or completely inaccurate. So, what's your favourite getElementsByClassName script? Here's something I threw together based on an unusable script I just saw on Digital Media Minute. function getElementsByClassName(node, classname) { var a = []; var re = new...
Potable Quotables
One of the recurring requests out of the fixed commenting system was the ability to point to a comment and quote from that post. While I haven't had the time to get that functionality together for my own blog, I had been asked by Jacob G. (of recent CSSVault fame) to put together a new design for a series of blogs that he had or wanted to put together [See Fun Money Blog, CPVault, and Filmsy]. O...
Comments: Behind the Scenes
Wow. My comments system has been extremely well received. As a result, a few people have asked how I did it. Position fixed The system was originally intended to be CSS only using position:fixed on the div that contains Post a Comment. This is great for browsers that support it and pretty much useless for any browser that doesn't. There's one caveat on using fixed positioning that I'll get to la...
Arriving Late to the Meme Party: Musical Baton
After Derek, Garrett and Dan passed a baton my way, I felt it only fair to oblige them. Total volume of music on my computer 2 GB. Seriously folks. That's not a typo. There's no missing zeros. The last CD I bought Gwen Stefani: Love. Angel. Music. Baby. Too bad I've already grown tired of it. Song playing right now The Darkness: Friday Night I still love this song. Five songs I listen to a lo...
Stepping it up: Live Preview
As many of you have seen with the redesign and the fixed comments, I've really tried to increase the usability of the comments. Why so much focus on the comments? Because your interaction is a critical part of why I run this site. Your insights and assistance are an asset to me and to anybody else who happens to come across these pages. In my next step in building a better experience and upon th...
I'm an addict.
A redesign addict, that is. What else would explain me being up at two in the morning hacking away at yet another redesign of snook.ca? Once again, I was able to pull off the redesign without having to touch the original files[1]. Ala the CSS Zen Garden, I just dropped in the new stylesheet and I was off to the races. [1] Okay, that's a small lie. I took out a hyphen and added a line break in th...
Bookmark: Browser Filtering by DOM
A decent breakdown of which DOM features are available in which browsers. More reliable than user agent string matching. ...
Global Variables in JavaScript
Every tutorial that I've seen describes that to create a global variable you have to declare it outside the function. var myvar = 5; function myFunction() alert(myvar); // 5 } And this is the way I've been doing it for years. The problem is, I've never been particularly happy about this. It never felt self contained. Then I thought, "Hey, why not just attach it to the window object?" I almost...
An experiment with INS and DEL
In what, lately, is almost becoming a regular series, I've put together an experiment. This time in presenting INS and DEL. If you've taken a look at the example, you'll notice that there are two shiny buttons that allow you to show and hide the insert and delete information embedded in the page. For those who aren't aware of the INS and DEL tags, they are used to indicate that changes have been ...
Applying a background image to a table row
Applying CSS to a table can certainly be one of the more frustrating exercises out there. Applying a background image to a table row is one of those. Consider this an addendum to my previous post Designing Data. In reviewing the CSS spec for tables, it seems to indicate that one should be able to apply a background image to a table row much like applying a background to any specific cell or to th...
Bookmark: domFunction
brothercake puts together a great script for detecting the availability of objects while the page loads. This way, you don't have to wait until the window.onload event to access elements on the page. ...
Onscroll isn't always onscroll
In continuation of my experimentation with position:fixed from yesterday, I decided to try and enhance the form slightly by having it check to see how close the comment form was to the top of the page. If it got too high, I'd change from position:absolute to position:fixed like I did yesterday. This should certainly resolve the issue for those at a resolution of 1024 by 768 that weren't able to f...
Experiment with position:fixed
UPDATE: I've added some javascript to adjust the position onscroll. Note: This article was originally posted under the Long Way Down theme. I've had this idea in my head for awhile and haven't had the time to implement it exactly how I wanted to. However, I did want to ask for some feedback on this idea that I had. For those of you reading this via your newsreader, come take a visit to the sit...
Explosion of design
With the recent mention that IE7 will have proper alpha-PNG support, I predict that we will see an explosion of creativity in web site designs. I've been pondering this in some of the recent design work that I've seen come out of the company that I work for. Imagine changing an entire colour scheme of a site without having to change a single image; even ones with feathered edges. On one of these...
CSS Debugging
Awhile back, Dave Shea offered his CSS debugging tips. The one that I use most often has to be setting the border around the elements I happen to be working on. border:1px solid blue; is practically hotkeyed I use it so much. I've started to expand on the concept and it's already proving quite useful. The first was to switch from solid borders to dashed borders. They actually make it easier to se...
Determining Database Field Lengths
Here's the scenario: You've set up your database and now you're building your web page to display the information. You have a text field that stores a city name. In the database you've specified the maximum length to 50 characters. In HTML, you add on your maxlength attribute and specify it as 50. An easier way would be to have it automatically "know" what the length was. In ASP, you can do this ...
Problems using white-space:nowrap in Internet Explorer
Let's jump right into it with some sample code: #example1 { width:300px; border:1px solid #666; background-color:#FEE; } #example1 a { white-space:nowrap; padding:0 10px; } <div id="example1"> <a href="#">Link One</a> | <a href="#">Link Two</a> | <a href="#">Another test</a> | <a href="#">Yet another test</a> </div> I also put t...
Unused Design Giveaway!
Okay, I hope I didn't get your hopes up too high. I felt (un)inspired and put together a redesign of good ol' snook.ca. In the end, though, I don't think I'll ever use it so I've decided to make it available to anyone who feels they can make some good of it. Download the zip and use to your hearts content. I admit that it's still somewhat unpolished -- the comments area needs some style and ther...
Encoding Accented Characters in E-mail Subjects
To send an e-mail where the subject contains accented characters, encode the string like so: Bonne id?e ...becomes... =?iso-8859-1?q?Bonne id=E9e?= The string starts with =?iso-8859-1?q? and ends with ?=. Then every character to be encoded starts with the = and the hex value for that character. I don't recall ever having run into this problem before but this solution works. If you know of anothe...
:first-line bug in Firefox
Today I submitted my first bug report into Bugzilla. I couldn't find another bug report on the matter but a quick test while trying to duplicate a feature I saw on a site uncovered this little pest. The style applied to the block element gets applied to the entirety of the child element if it starts on the first line and continues onto subsequent lines. It'll be interesting to see how things g...
ASP.NET links
This is just a to-do list of reading for myself. Walkthrough on basics: http://www.ondotnet.com/pub/a/dotnet/excerpt/progaspdotnet_14/index2.html Control Samples: http://www.denisbauer.com/ASPNETControls.aspx Resources: http://www.codeproject.com/aspnet/ http://www.codeproject.com/aspnet/#Custom+Controls Support Groups http://www.dotnetmonster.com/ http://www.dotnetmonster.com/Uwe/Forums.asp...
Using Images as Labels in Internet Explorer
Internet Explorer has a bug where wrapping a label around an image doesn't work the same as if you wrap it around text. Example: <input type="checkbox" id="a"><label for="a"><img src="..."></label> What the label does is create an association between its contents and a control on the page. In most browsers, clicking on text or an image within the label will give focus to ...
Optimized True/False Assignments in JavaScript
Ever write some javascript and find typing =true or =false just way too time consuming? Why not rely on some boolean assignment operators to do the trick? To make something true, use |=1. To make something false, use &=0. How and why does this work? Let's take a look at each one seperately. In the true example, we have |=1. What this basically means is take the value on the left of operator and p...
Dynamically showing and hiding table rows
This is really just a reminder for myself. When using the DOM to dynamically hide and show table elements (like a table row), you can't use display = "block" to bring a table row back to life in Firefox; although, it works okay in IE. It's best to simply use display = "" so that Firefox correctly resets it to table-row and IE can still do what it does. I imagine other browsers behave similarly to...
Safari bug? Float, float, relative, absolute.
I got this working in every single browser except Safari. I have a div positioned absolutely within a div positioned relatively and floated within a floated div. I've nicknamed it the "Safari Float-Float Bug" but only because it sounds cool. I've put together an example that demonstrates the wierd behaviour (you'll need Safari to see the effects). I don't have a solution as of yet except to avoi...
Site Updates
Just a heads up that I've updated the site a little so if anything is askew, be sure to let me know. Updates include: Updated the styles on the comments Added an intro paragraph to the home page E-mail notification checkbox state is maintained in preview (that should make you happy, Mark) You can now use <code> in comments Moved MovableType database from Berkeley to MySQL (which went fairl...
Variables declared even if unused
Javascript "uses" the variable, even if it's declared in an if statement. Most people probably won't run into this. I only did by accident in trying to get some cross-browser stuff working. Here's an example: var i=5; function test(){ var a; if(a==0){var i=5;} alert(i); } Would you expect it to alert 5? In fact, it alerts as undefined. Even though the code within the if statement never get...
Bookmark: CMS Do's and Dont's
Alt tags has some Do's and Don't about implementing a CMS within an organization. The article is introductory and geared towards executive types. A good read. ...
Bookmark: Tips for a Successful Wiki
I've never used a wiki but the concept intrigues me. Lost Boy describes Bootstapping a Corporate Wiki. Some of the concepts mentioned, such as Building a Community, are also important in ensuring any CMS project is a success. ...
CDOSYS The Different SendUsing Options
There are two different ways that you can send e-mails using CDOSYS (aka CDO for Windows 2000): Using an SMTP server Using a pickup folder Using an SMTP server Using an SMTP server is probably the most common approach that people use to send out e-mails. Each time you send an e-mail it communicates with the server and sends out your e-mail. This is great for just a few e-mails but if you have...
Goal Reached!
As you might recall, I set a goal to receive 10 e-mails from the GainCMS site by the end of January. It may not seem like much but considering the project is truly in its infancy, I didn't expect much more. I was pleasantly surprised to hit the 10 e-mail mark back in early January. In total, I received 24 subscriptions to the GainCMS newsletter. The next step will be to increase the content that...
Peculiar Cross-Browser Regular Expression performance
I just tried a quick test to see which of two regular expression techniques would perform better. I was quite surprised to find that different browsers gave me different results for different techniques. Now, this is in no way a truly scientific result and I'd be interested to see how it plays out on multiple systems and on multiple browsers. I put together the following code to test my two metho...
Empty Location header can cause unpredictable behaviour
If you specify a blank location HTTP header then you can expect different behaviour between browsers. Take the following PHP code for example: header( "Location: " ); In Internet Explorer, a blank location will redirect the user to the root of the current folder ("./"). In Firefox, the user is not redirected at all. ASP is a little smarter in that Response.Redirect("") will give you an error m...
Setting TITLE using text from H1 header in Dreamweaver
Here's a little code snippet that might make your life easier. If you wanted to set your page title to include the text from your header (in my case, the H1 element) you can use this search and replace. Pop open the Find dialog and select Source Code from the Search drop down. Enter the following into the Find field: <title>(.)*</title>((.|\n)*)<h1>(.)+</h1> Luckily, Drea...
Bookmark: SQL Server DBCC Commands
A thorough list of DBCC commands including some undocumented ones. (via Windows IT Pro) ...
Bookmark: Guidelines for Accessible and Usable Web Sites
Great insight from actual accessibility testing: Guidelines for Accessible and Usable Web Sites (via Mike Davidson) ...
Getting to know you
I wanted to get a sense of the people who are interested in the Building a Web Application series. Why is it that you are following along? Do you want to build your own application? Or are you interested in content management systems? I'd love to hear what you have to say. ...
Colour (Color) Contrast Check
I had put together a JavaScript-based colour contrast checker a while back but I thought I'd revisit the code and hopefully improve on it. And that I have. Check out the Colour Contrast Checker. I've improved it by adding some nice HTML sliders and revising the interface. I had also noticed a small bug in detecting my thresholds which has now (hopefully) been fixed. For those not familiar, what...
Setting Disk Quotas for User Profiles on Windows Server
Windows 2000 Server, and I imagine other versions of it, allow you to set disk quotas on an entire drive. You can even set different limits for different users. Unfortunately, you can't set limits on just one folder of a drive. To create monitoring on a specific folder, I put together a Windows Scripting Host file which will scan each folder and find out the size. If it's larger than the quota a...
Instant Messenger Timezone Detection
Hey Scoble, tell Microsoft to put in some sort of timezone detection in Messenger. That'd get me to use it. You'd be able to see what timezone the user you're chatting to happens to be in. Maybe even show a graphic to help highlight where there are in the world. Heck, pop out a map of the world with dots showing where all your contacts happen to be. THAT would be cool. ...
New PostgreSQL and Rubyonrails web sites
A little while ago, I criticized both the PostgreSQL and Ruby on Rails sites as being ineffective and confusing. How quickly things have changed. I suspect the redesigns were already in development when I wrote that post. I have no delusions of granduer that they redesigned simply because of my post. In any event, both sites are now much cleaner and less confusing. Expect both technologies to gain...
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?
