FYI - Server Maintenance

4/29 - Server Maintenance

Blogger, time to get code friendly

Dear Blogger,

Please add some facility for entering in <code> snippets. It's 2007 and you still don't have a button I can push that allows me to easily enter in code. I have to break into the HTML editor and hand type the <pre> tags, and it sucks. What's even more frustrating is thatI can't even do that in a comment. Thus making it even more difficult to have a conversation with comment-ers regarding code.

Case in point. This post was a pain to enter, and a pain to comment on.

Regards,
Michael Sica
Founder, Ataraxis Software

Kids these days...

With their free money.... What is this, 1999? (Except it's $15,000 instead of $150,000,000.)

Rails & JavaScript tip: Disable submit button on all forms after submit

(UPDATE: SEE COMMENTS FOR CODE UPDATE)

I'm still testing this, but so far it works. Please let me know if you come across any bugs with it.

If you've ever watched non-tech savy people use a computer you've seen them double-click EVERYTHING. Including submit buttons on forms. Which leads to double-data entry.

Eew.

I didn't find anything built into Rails to deal with this (I could have missed it). I've coded a JavaScript solution that applies itself to every form in my web application, Pudding, without having to do anything to the forms. The exception to this are the Ajax forms. I'm not happy with my solution, but I've got it working. (If anyone sees a better way to do this, please let me know!)

For the code below to work you need to be using Ruby on Rails, the "submit_tag" function to generate all your submit buttons, and have the Prototype JavaScript library included in your pages. (You can adapt this to your own framework, but you've got to have a consistent name for your submit buttons. "submit_tag" gives every submit button the name, "commit". And I'm using Prototype's functions to make things easier for me.)

var FormHelper = {
disableSubmitButtonByEvent: function(event) {
  var theForm = Event.element(event);
  var submitButton = theForm.commit;  
  this.disable(submitButton);
},

disableSubmitButton: function(theForm) {
  var submitButton = theForm.commit;  
  this.disable(submitButton);
},

disable: function(submitButton) {
  submitButton.value = "Processing...";
  $(submitButton).disable();
}
};


function addFormHelperListener() {
  var formsInPage = document.forms;
  for (var i=0; i<=formsInPage.length; i++) {        
    Event.observe(formsInPage[i], 
                  'submit',
                  FormHelper.disableSubmitButtonByEvent.bindAsEventListener(FormHelper));
  }     
}    

function addListeners(e) {
  addFormHelperListener(); 
}   

Event.observe(window, 'load', addListeners); 

How does this all work?

Starting from the bottom of the code...

The Event.observe(window, 'load', addListeners); line forces your web browser to call the addListeners(e) function once the page is done loading. The addListeners(e) function is a great place to put all function calls that "setup" event listeners.

The addFormHelperListener() function is then called. It loops over all the forms on your page and ties the submission of the form to the disableSubmitButtonByEvent function up there in that FormHelper object. The disableSubmitButtonByEvent takes a look at the event that fired off (the submission of the form) and pulls out the DOM element that caused it - the form.

Since the Ruby on Rails function, "submit_tag", is used on all my forms they contain the HTML attribute, name="commit". Which allows me to grab the submit button out of the form object. Then it's easy! You just change the value of the submit button and then disable it.

Now the user can't double click the submit button!

As I mentioned earlier, the code works for all the forms on my web application except the Ajax ones. See that function, disableSubmitButton?

When you're using the "form_remote_tag" function you just add this option and you're good to go.

:before => "FormHelper.disableSubmitButton(this)"

A full example looks like this:

<% form_remote_tag(:update => [ID OF ELEMENT TO UPDATE],            
                   :before => "FormHelper.disableSubmitButton(this)",
                   :url => {:controller => 'piece',
                            :action => 'new_comment'},
                            :complete => "[I'M CALLING SOME JAVASCRIPT TO SYNC UP SOME PAGE ELEMENTS.]") do -%>

I hate tacking on that ":before" option, but I couldn't figure out why it wasn't working. I'm guessing it's got something to do with the ":complete" option....

FUN FACT:
I had originally written this:

for (var i=0; i<=formsInPage.length; i++)

like this:

for (var currentForm in formsInPage)

But it didn't work in Safari.

Safari, you're on notice.

Silverlight, Flex, Web Applications :)

I'm glad to see that Adobe will be getting a legitimate competitor in the area of Rich Internet Application platforms. (Those small companies with custom plugins don't count. Neither do Applets.) Microsoft just announced Silverlight. (Don Dodge's write up. Microsoft's Silverlight homepage.)

Adobe needs this threat to their Flash platform. Nothing breeds better products than competition.

I really don't know much about Silverlight (just what I read in that press release). The obvious problem is, how much will developers, who aren't already drinking the MS Kool-aid, trust a "cross-platform" plugin from Microsoft? Not to mention, what about the tools to build the content? If the tools only run on Windows, you can forget about the people at the cutting edge.

Browsers are fun!

The Modern Web Development Process, Alex King.

True, dat.

Round 2 of Beta

The beta invites for the second round of testing just went out!

Thanks to the bug reports and feedback I received from the first round I was able to make approximately 26 bug fixes and improvements. I also got a couple ideas for some post 1.0 launch features!

I won't be able to launch off of the Round 2 code base. I still have to integrate the site with my credit card gateway. (I finally got everything setup with the bank and the payment processor.)

If I keep progressing at my present clip, I could have that stuff implemented by the end of next week!

Thanks again to everyone who is participating in the beta!

If you'd like to get involved, please feel free to sign up via the form on the main Ataraxis Software web site. (I'll contact you via email within 24 hours of you signing up.)

(Did I hit my exclamation point quota for the day? ;) )

IE Bug under control

Background post

Reading this made me understand what the problem was/is, and what a fix looks like.

Reading this made me understand why it's affecting me.

Reading this let me make it only appear to IE browsers.

"div" tags do not "have layout" by default. (It's an IE thang.) Thus they freak out under certain circumstances. This is how you fix them...

Put this in a file called, "ieisincrediblyghetto.css":
div { height: 0.01%; }

Then put this in your HTML right after all your other style sheets:
<!--[if lte IE 7]>
<link href="/stylesheets/ieisincrediblyghetto.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->

Since this is actually applying a specific height to all div's, make sure you check your web site throughly for any side affects.

Flex 2

While still throwing a mental hissy-fit, I decided to finally download and play with Flex 2 and the Flex 2 Builder. The compiler for Flex 2 is free, but Flex 2 Builder only gives you a 30 day trial.

Flex 2 Builder seems to be really nice. I went through a small tutorial (took about 20 minutes), and built an RSS reader. Macromedia - and now Adobe - has always been good regarding giving you tutorials with their software.

Once Pudding is at 1.0 I'm going to invest some more time in coming up to speed with Flex 2. Flex plays very nice with web services, so this ought to be fun.

IE is the devil's work

I spent the whole night messing around with my HTML tags and CSS in an attempt to get this under control.

NOTHING is working. It's happening consistently to about 3 pages.

So I started doing some googling, and came across this page on Channel which lists a ton of IE bugs. Check out this one,

Sometimes IE fails to draw some actual text correctly, but selecting the text shows it. Clicking outside the selection sometimes then shows the text properly, but sometimes text that had been displayed correctly before selection and was included in the selection also disappears when clicking outside the selection. I've often seen this on blogs.msdn.com.

WHAT?!?!?!

I found a few links that may give me a chance at fixing this problem:
http://www.positioniseverything.net/explorer/peekaboo.html
http://www.positioniseverything.net/articles/ie7-dehacker.html
http://www.satzansatz.de/cssd/onhavinglayout.html

I'm going to read them tomorrow and hopefully get past this stupid bug.

I JUST WANT TO REMIND THE IE TEAM THAT THIS IS HAPPENING IN VERSION 7 OF YOUR BROWSER.

Yes, version 7! It took you (Microsoft) 5 years to go from version 6 to 7, and these are the kinds of bugs I'm dealing with?!?!? Paul Graham is right. You've been a joke for years, and you've just put the last nail in your coffin. Vista + IE7 is a total train wreck.

....deep breath....

This may very well be the last HTML application I ever build. The Flex compiler is (finally) free. I think this guy was right when he said,

I'm done with it.

(UPDATE! IT'S WORKING NOW.)

HTML5?

I'm missing something here. Why on earth would they go with HTML5 over XHTML 2 (or whatever version hasn't been spec'd yet.)

Crazy IE Rendering Bug

I was about to push out a new version of Pudding last night, but then I came across this bizarre rendering bug in IE. I've been spot checking Pudding in IE during it's development, but I don't think I've ever hit this screen before.

Does anyone have a clue as to why IE would act like this? (Other than the fact that's a POS. :) )

The bug appears in IE6 & 7. Here is a little comparison between Safari and IE. (It looks as-expected in Firefox.) I've got the doctype tag set to XHTML Strict.

Feature Question - Comments?

I'm stuck on feature. 2 of my beta testers have asked for it, and 2 products that play in the same "space" as Pudding have it.

The feature is....

Commenting on the uploaded image.

There seems to be some open source code that will give me a huge head start in trying to implement it. But I'm not sure if it's "what's best" for designers.

Here is my sticking point.

You're a designer. You've made a creative piece for your client. You've uploaded it to Pudding, and sent an invite to your client to review it.

As Pudding works now, there is an intentionally small comment box (hidden behind a link). My hope would be that the client would leave only short comments, and not long drawn out explanations about how and where they want every pixel of the piece to be. (That's what they hired you for, right?)

If the client has the ability to comment on the piece, they'll do just that, and they'll do a lot of it.

They'll do all the things a client shouldn't!

On the other hand. Am I trying to fight a flood with single sandbag? I mean, my tool won't stop clients from demanding that this green dot NEEDS TO BE RED!!!

:)

Please let me know your thoughts. Comment below, or join me in the Pudding Discussion Group.

Butov on the Business of Software

True dat.

Pudding Discussion Group

John Topley suggested that I add a forum to my online presence to encourge a community around Pudding. I considered Beast, a Rails forum app. It's really nice looking. Simple and un-cluttered. (The 37Signals guys use it.) But I decided to try a Google Group first.

So here it is, the Ataraxis Pudding Discussion Group.

I like it because it took about 3 seconds to setup, and won't cost me anything in server resources. The Google Group software is nice. It's a mailing list behind the scences (I think), but you can use it like forum software. (Take a look.)

I'll be using it as my beta-feedback area for the second round of testing.

There are 2 downsides with using a Google Group.

1) It shows ads on the side.
2) Users have to create a Google Account.

I'll see how it goes. Feel free to get involved in the discussion!

Return of the bloat, The Coop?

The Firefox web browser project (AKA Phoenix, Firebird [or whatever it used to be called]) has spent the last few years tearing out all of the bloat the Mozilla browser had built up. Things like a full email client, chat program, and a HTML composer.

After all that work, they're going to build in social networking features???

I hope I missed the fact that this is a plugin or an April fool's joke.

What a horrid lack of direction for the project.

Great First Round

I want to thank everyone who's been involved with the first round of beta testing for Pudding. 2 extra special thanks to Brian LeGros and Maxim Porges. These guys came through with some HUGE feedback.

Max wrote a total of 29 Microsoft Word pages of bugs and feedback. He included screen shots and some hilarious suggestions for upgrade/downgrade offers. (Pudding's tiers are named after flavors, so he was playing up on that angle. I'm so using them!)

I hope to be ready for the second round sometime next week. Stay tuned!