Poking with ajax

I have played with Ajax before and even used it in a few projects, but never in a way that it was obvious.  With the next round of CADY site updates I have finally had a chance to put ajax to some real use. For the upcoming parent network, which is more or less a very simplified forum I am coding from scratch, I needed a simple and easy to use registration page for parents. Setting up a page is easy, making it point out peoples mistakes in a dynamic non refresh ways is not.

It is good HCI practice to limit any screen refreshes to just when locations are actually changing, it is what people expect. Where as if a user submit a form only to have it return and to say you missed something is not as intuitive, because the user has already moved on in their thought process.  This is where javascript and ajax usually come in.  By allowing the page to call remote content you can check form fields on changes and then update the user to missed fields or issues before they submit. You could extend the process and prevent even the submit if things are not correct, however this falls outside my current beliefs on how applications should handle user control.  If the user wants to submit the page with missing items even after being notified, let them, however have it fail the submit on the server side and then bring them back to the restored page with a notice of what they missed.  This forces the user to learn that finishing a form properly the first time is worth not having to remember what they where filling out.

You can check out the CADY Parent Network Registration Page to see my progress and fancy ajax trimmings, however please do not sign up unless you are actually a parent who is interested.

HTML 5 Canvas

I was almost giddy when I discovered the canvas tag to be included in HTML 5. With this javascript joins the ranks of C, JAVA and VB in the fact that I can quickly and easily draw straight to the window with a few basic APIs. So to have a little fun and to keep my javascript knowledge fresh, I sat down over the last few days and read up on the canvas APIs and played around a little.

(NOTE: IE does not work with canvas by default, use another newer browser!)

First off I started with the basic balls bouncing around program that I did in every other language that can draw. You can check it out here and see the code here.

I had to do a little research on classes in javascript, and while not exactly perfect, they do work as expected. After getting the bouncing shape test working I moved on to make a simple platform game. The hard thing with javascript is that it is slower and far more processor hungry then even java, so I had to be somewhat careful of sloppy waste, however I did not put too much effort into it as this was nothing more then a way to try out the canvas with javascript. You can see the result here and the code here.

All in all I am excited to see javascript starting to show signs of maturing into a really powerful and useful scripting language.

If interested, you can also read more on the canvas tag here.

Crunchyland bot

Quite a while back I was having fun working on a javascript exploit bot for an online game called crunchyland, the game itself was rather simple you create a character give it weapons and fight silly monsters that you encounter. The entire game engine was based on flash files that where embedded in html and where linked through javascript. The problem was that I quickly got bored with the game, you click, that is it, not very entertaining past a level or two. However before I moved on, I decided to try to write a bot for it so I could at least get on the leader board. Because there was no way I was going to sit for weeks of clicking, like some of the obsessive kids on the site apparently do. (Get a job!)

It was not too hard a task and gave me a good refresher in javascript dom manipulation. The bot uses an open window and url testing to change and click elements in the window triggered by timers. I also went a step further and had it watch the size of the health bar to heal the player after a certain point. After a week of testing I quickly had my character self level up on my testing server while I did other more productive things, and after a few more days I was on the leader board, with little effort, past the coding, on my part.

I have been waiting a while before releasing it, one to not get kicked of while I was still on the leader board, and to to prevent hoards of script kiddies from also quickly leveling up with no work. Now it looks like the game it not being worked on, and my script does not work completely anymore, so here it is CL Bot (For Safari 3 maybe 4 only). Anyone with some javascript experience could take it further and fix the parts that do not work with the game updates, however I have better things to be doing. Enjoy...

Javascript Injection

Did you know you can edit the contents of sites with javascript? Yes you can, however browser security will limit what you can do, so a little ingenuity is needed. Also the Safari web browser seems to be most lenient about javascript injection, where as FireFox is the most preventive. So you might want to use Safari for this type of hacking, no Idea on IE yet.

Try typing in the address bar...

javascript: alert('Hello World');

This not just doing a javascript call, it is actually using the page to call the alert function.

As a more advanced example...

javascript: alert(document.body.childNodes[0].innerHtml);

This will actually display what text is in the first element on the page, hopefully a div, as if there is no text in it it will be blank.

I have been working on a small project which uses javascript injection to play a simple html game for you. Yep, it is a very simple bot. Although it is rather stupid in point, it was fun to get working, as I needed a good refresher in Javascript before I go back to school. Expect to see the finished version posted in a week or two after I finish tweaking it, and leveling up my character.

Rounded Corners

A big trend with web design right now is rounded corners on most rectangles. This is understandable, because when I am doing woodwork I smooth the edges, it just gives it a much more finished look, compared to rough or pointy edges. Not to mention in an artistic sense it both keeps the users eye path from moving around as much and helps the page as a whole blend. Corners tend to point in a direction or cause a UI element to stand out. Of course this is all contingent on how the page is designed.

Still I have done rounded corners for other sites with a brute force method, with separate positioning for both Firefox/Safari & IE7 because they rarely are the same. It looked good, but was annoying to implement, and that was only two corners, four would be much worse. Luckily there are now some options that make the job much easier. However there seems to be a big debate on what is the better method to use. One is raw css positioning like I had done, more work, but the benefit is low load times, just what the corner images need. The other way is with javascript I found Nifty Cube, a very simple and easy to use javascript engine that does all the work for you. The problem is that it loads after the page, and takes a small chuck of the users processing to run. This was not that big a lose so I was happy with the results.

Check it out if you need round corners, still not perfect, in the fact that it only does solid colors, however the only issue I have had is that it draws the corners across the top and bottom, so you need to pad divs by about 10px for it to work out.