May 28th, 2007 Luke
With the rising popularity of Ajax, more and more people are starting to build webapps that rely heavily on Javascript. In a lot of cases, the HTML form element is also being used (or at least seems to be), in order to show a user where they are supposed to input data. It is not uncommon to see Ajax-enabled register/login pages that look exactly like regular register/login pages: Parakeet’s “Register” page is a good example of this.
However, a problem with this style is that, at least in some cases, the new javascript controls mean that the form no longer works as the user expects. This is bad for usability, and I’ve managed to figure out that the whole problem can be resolved (and unobtrusively, no less) by making use of the onsubmit parameter of the form tag.
If a user submits a form and there is a value for its onsubmit parameter, the web browser knows to call that function when the form is submitted. It then transmits the form data to the URL specified by the form’s action attribute. If there is no action specified, it sends the data to the page that it is currently on, subsequently refreshing the page.
When we write return false; inside an HTML attribute, we instruct the browser to run the code before it, and then return false. The action of returning false means that the browser will stop processing; whatever actions follow after the return false; statement will be ignored. The great part of this is that in a browser that doesn’t support Javascript or has it disabled, the parameter with the return false; statement inside of it will just be silently ignored. This allows us to make websites that work flawlessly for users with Javascript either enabled or disabled, with a minimal amount of extra effort.
By combining the onsubmit attribute of a form and the return false; statement of Javascript, we can make our forms react the way that a user would expect them to, whether Javascript is enabled or disabled. Take a look:
<script>
var d = document; // shorthand variable
function handleFormSubmission() {
var inputValue = d.getElementsByTagName('input')[0].value;
alert('The Value of the input is: ' + inputValue);
}
</script>
<form onsubmit='handleFormSubmission(); return false;' action='http://girasquid.com/sample_code/jsdisabled.shtml'>
<input type='text' />
<input type='submit' />
</form>
If you want to see how it turns out in an actual page, take a look at the Hardcoded onsubmit sample code I’ve put up.
This method involves painstakingly hard-coding the onsubmit attribute for each form element, though. Wouldn’t it be easier to just use a window.onload event?
The answer is yes. Here’s the new code:
<script>
var d = document; // shorthand variable
function handleFormSubmission() {
var inputValue = d.getElementsByTagName('input')[0].value;
alert('The Value of the input is: ' + inputValue);
}
// This anonymous function will attach our 'onsubmit' action for us, so that we don't add anything to our HTML markup.
window.onload = function() {
d.getElementsByTagName('form')[0].setAttribute('onsubmit','handleFormSubmission();return false;');
}
</script>
<form action='http://girasquid.com/sample_code/jsdisabled.shtml'>
<input type='text' />
<input type='submit' />
</form>
To see it in action, check out my window.onload onsubmit sample code.
Posted in Ajax, forms, javascript, snippet, usability, webapps | No Comments »
May 17th, 2007 Luke
In the 2 days since my last post, Militarism’s user base has swelled from a meagre 13 to a surprising 33. That’s without any extra effort on my part, past e-mailing a single link out to a couple friends.
That’s 33 people banging on Militarism and how it’s balanced out. That’s 32 more people banging on Militarism than when I’m working on it alone. It’s quickly helped me realize that there are some…glaring balance issues.
For example, if a player has a “Phalanx” unit, they’re virtually unkillable until a player has built about twice as many phalanxes as the player they’re about to attack has. I needed to tweak that.
Earlier, Militarism players were ranked based on their army sizes; this was a good indicator of who a player might be safe attacking, but felt like a bad way to rank users. What if a user just built a whole pile of the cheapest unit? They would skyrocket to the top of the standings list, even if a user had sat and waited and built tons of the very best unit available. So I implemented a different rankings system, based on a players ’score’; their score is made up of their current gold, available recruits, new recruits that they haven’t heard about yet, and their army. It’s a much better way of ranking users as a whole; and for players who still need to see how many units an enemy has, I’ve left that on the standings page. I’m not sure if it will be there indefinitely.
I needed to nerf all of the units in Militarism because, originally, some were very overpowered, and some were very underpowered. Now, I believe, I’ve achieved some semblance of balance between all of them. I’ll find out soon if I haven’t.
Posted in Militarism, design, nerf | No Comments »
May 15th, 2007 Luke
Militarism’s finished. It’s been finished for two days, and I’m pretty glad with how it’s turned out and how quickly it’s being picked up; as I type this, we have 13 users. My advance invite only went out to about 5 people, and I’ve only personally recruited maybe 6.
However, this leaves me with another finished project, and that gnawing question: what now?
I need to build something else. Something else that’s really cool. I know Parakeet 2.0 is next on the list, but I’m still doing some ‘relaxing’(read: working on other things) before I really get started on that.
This is a problem that I always have when I’m working on my own projects. I’ll finish one, and then pause for a while to try and figure out what to do next.
I guess it’s not so bad, though; it does keep me a little more relaxed than some other people I know.
Well, back to hacking.
Posted in Project, life, productivity | No Comments »
May 13th, 2007 Luke
Well, after a month and a half(or so) of work, Militarism is finally finished and ready to go.
You can check it out at http://girasquid.com/militarism.
I’ve stayed true to the linking game gameplay style, but added a few elements(like actually using those clicks for something). Overall I’m pretty happy with how it turned out, although I’m planning on adding a few more features in the future.
I learned a lot while I was working on it, along with doing a little bit of crazy insaneo math to figure out the casualty calculations. There are probably a few tweaks left to be made, but I’m happy to put it out there right now for everyone to play while I tweak it.
For the moment, I think that I’m going to be starting work on Parakeet 2.0.
Posted in Militarism, Project, postmortem | No Comments »
May 1st, 2007 Luke
The month of April has been a good one.
I tweaked Path a little bit, to make it easier for me as the administrator to keep everything running smoothly. I’ve also been steadily progressing on Militarism; you can see the screenshots I’ve been taking by visiting my Flickr page.
A quick check at dnScoop shows me that girasquid.com is now valued at $309(an increase of $188)! I’m pretty happy about that; my Google PageRank has also increased from 0 to 2.
I didn’t bring in a much larger number of hits than march, but I did manage to at least bring in more. My average was 18, up 2 from 16 for march. My total unique hits was 251, up 24 from 227 for march.
I’ve now made $0.61 with AdSense, and I also signed up for AdBrite on the main page. That’s made me $0.20 so far.
The sketching for Parakeet 2.0 is finished; once Militarism is done(hopefully this or next week), I’ll start working on that.
My April was a good month. How was yours?
Posted in monthinreview, postmortem, site | No Comments »