Ken Snyder - Web Development

HTTP Status Codes: 302, 303, and 307

nospam@example.com (Ken Snyder) — Thu, 07 Aug 2008 20:13:41 -0600

Each browser has quirks for redirecting. Wikipedia has a quick reference of HTTP status codes. Today I was looking for a code that would instruct browsers to repost data to the new URL. It was much trickier than I thought.

Browsers implement both 302 and 303 to mean to go to the new URL including the get query string. 307 instructs the browser to repost any post data to the new URL including the get query string. Here is what I found on Windows.

IE6 and IE7

IE properly and silently reposts as you would expect.

Firefox 2/3

Firefox asks the user to click OK to execute the repost or CANCEL to do nothing. Doing nothing might mean that the page loads up blank, which is kind of silly.

Opera 9.25

Opera is similar to Firefox but provides a third option. Opera prompts with YES to repost, NO to use get only, and CANCEL to do nothing.

Safari 3

Safari treats a 307 the same as a 303 and gives no option to repost. Technical tests from the phaq blog.

My solution

My solution was to use 307 for IE and use HTML and JavaScript for the other browsers. I made a form full of hidden fields for each posted value and then submitted the form through JavaScript. To users, the redirect looks as you would expect.

The trick was that I could not use document.forms[0].submit() because sometimes one of the hidden elements is named submit. So I had to use an additional button that was positioned with top: -100px; in the style attribute.

For those with JavaScript disabled, I used noscript tags to enclose a notice that the page was moved and a button to go to the new location.

Demos + Source

Partial solution which always does a 307 but falls back to JavaScript when user cancels (Does not work in Safari 3, does not work when user chooses NO in Opera 9.25.)

Final solution which does a 307 for IE but uses JavaScript for other browsers

Thoughts

I was surprised to see different behavior in every browser. I don't see the advantage of the prompt other than a possible security exploit. This is an instance where IE got it exactly to spec!

A One-Question Job Interview

nospam@example.com (Ken Snyder) — Wed, 25 Jun 2008 12:06:21 -0600

Interesting article on the perfect interview question.

Here is the conclusion:

When reviewing somebody else's code, what is it that you usually find most disturbing?

An answer about syntax is a bad sign, and an answer about design principles is a good sign.

Definitely worth a try!

Here are some other questions I've heard in interviews that are useful to discern personality, experience and intelligence:

What are you looking for in this job that you don't have in your current job?
What interests you about this field and language of programming more than other fields and languages?
Tell me about the something that was very difficult for you to learn and why.
Do you consider yourself more of a fast programmer or more of a meticulous programmer?
On a scale of 1-10, how would you rate your interest in this position? One being "no thanks" and ten being "this is my dream job!"
What kind of work do you see yourself doing 5-7 years from now?
Which is better: client-side validation or server-side validation?
If you were to start an application from scratch, what code frameworks or approaches would you use and why?

Compiled JavaScript Templating

nospam@example.com (Ken Snyder) — Wed, 25 Jun 2008 08:20:05 -0600

I've got my old version of CompiledTemplate online in a Pastie. It's got the source and a simple example. I need to finish my new version and do some benchmarking.

It actually isn't often useful since it is usually better to generate content on the server side.

Flexible, Grid-Like Layouts in CSS

nospam@example.com (Ken Snyder) — Tue, 17 Jun 2008 11:12:11 -0600

Update: I've made some comments on cssnewbie.com talking about how this technique is useful for magazine-type layouts and is actually more semantic in that case.

I haven't yet wrapped my head around it, but Eric Sol has posted a wonderful A List Apart article about achieving flexible, grid-like layouts in CSS.

Just when you assumed that everything that could be done in CSS has already been done, the geniuses at A List Apart have really come up with a potentially revolutionary technique.

Example of Faux Absolute Positioning in action. (by Eric Sol, A List Apart)

The basic idea is to use position: relative; left: 100%; margin-left: -##% (non-percent units such as px also work). Eric calls the technique "Faux Absolute Positioning". The items generally have the same behavior as inline elements and avoid some of the fragility of floats. Eric explains the inspiration for the technique:

Our use case was even more complex: my team was developing a web-based WYSIWYG form generator that allows the user to drag items to arbitrary locations on a canvas. We needed to let our users create beautiful forms that didn’t use overly static layouts and to let them align columns as needed.
For example, let’s assume we want a form that puts the postal code and city fields on the same line because they are semantically connected. To accomplish this, we tried using floated positioning inspired by the Holy Grail technique. Using this method, we needed to adjust the width, borders, margins, and/or padding of the postal code field to pin the city field to a fixed horizontal position. That was a problem because if the width of the postal code field needed adjusting, or if we wanted to adjust the amount of whitespace between fields, the city field would need to move as well. The more elements on a page—the more cells in your grid—the more tedious this kind of adjustment becomes. Additionally, the positioning is sensitive to the slightest change in a number of parameters, which makes it nigh impossible to control in case of dynamic form items.
Next, we tried using absolute positioning. This gave us much more control over the positioning of the items and is robust. But absolutely positioned elements have no height, and that caused the containing element (the canvas) to collapse. This made it hard to position content without making everything absolutely positioned—which is impossible to achieve with dynamic content.

Easing Equations

nospam@example.com (Ken Snyder) — Thu, 12 Jun 2008 21:41:01 -0600

Robert Penner created a suite of mathematically genius actionscript functions to simulate real-life movements in Flash. The results are compelling.

A few years back, I ported Robert Penner's equations to JavaScript for use with Scriptaculous transitions. Here is a little playground I set up to test them out. They are available for download there as well. Here is Rober Penner's original demo and Easing Equations page.

We see swinging, bouncing, and elastic movements in real life, and even a lot on Flash and even TV due to the work of Rober Penner.

Thomas Fuchs uses my custom bouncePast transition on his site!