scriptNode

Web development with a focus on JavaScript RSS

Simple Loading Bar

Novice Matt Hackett Published August 2nd, 2009 by Matt Hackett

Haven't had a Script Sunday for a while, so here's a quick, simple script for you. Ever see those Loading … overlay images and wonder if JavaScript can handle it? Turns out it's extremely simple:

You can view this by itself in the lab.

Read other articles tagged: , ,

JSQL: JavaScript Query Language

Advanced Matt Hackett Published March 22nd, 2009 by Matt Hackett

About JSQL

When I started my new job, I had to make the transition from YUI to jQuery. I'd seen some jQuery code before (in fact, its terseness and use of $ as both an object and a function were easy to spot), but I wasn't familiar with it. I actually thought that the query part of jQuery meant there was some kind of Standard Query Language interface. There isn't, but there is a really cool CSS3 selector instead.

Turns out, I was a little disappointed; I wanted to use something query-based. So, I started to throw this script together. I call it JSQL. Below are some quick examples of what it looks like in action:

JSQL always returns an object with an error property that's either Boolean false or a String stating what error occurred (for example, "Unknown command UPDAT3"). If it successfully retrieves or operates on elements, it returns a count:Number property with the number of elements and an elements:Array property with those elements.

Here are some interactive examples:

Example 1: Checkboxes

Option number 1
Option number 2
Option number 3

Example 2: Form Validation

First name:

Last name:

Email:

Example 3: Removing Elements

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

In the spirit of jQuery, I also stuck in a quick each method which you can use to iterate through the returned elements immediately instead of setting up your own loop. The context is the current element (like jQuery) and the return value is still the same:

Example 4: Selecting Elements

Give him that gun. Give him ALL the guns.

I started coding this several months ago, and just recently decided to revisit it. I found the code hard to read myself when making some modifications before publishing it here. That typically means it's poorly written. And I'm admittedly lousy at writing parsing code... so there's that. I also doubt it's realistic for any real-world websites (other libraries handle those jobs quite well), but I thought it would be fun to play with.

Some noticeable features lacking are equivalents to ALTER and INSERT INTO. I've also got it up on GitHub, so feel free to fork it, and maybe add those methods yourself!

Read other articles tagged: , , , ,

Spacius! Source Code

Advanced Matt Hackett Published March 9th, 2009 by Matt Hackett

I've been meaning to "release" this for quite some time now, but I wanted to do it in small doses, with in-depth explanations of the code. Making a game can be somewhat overwhelming, but it's just like any other large task: if you break it up into smaller pieces, it becomes much easier to manage.

But time is a commodity nowadays. I've got way less time to write, and when I do, I'd rather be writing code than tutorials (or honestly, playing video games). Sorry about that, but I hope the (well-commented!) source will help those of you out there who'd like to contribute to the slowly growing world of DHTML games.

You'll notice that this code is over 6 months old. And I'm the kind of developer who constantly updates his style, methods and patterns. Given that, there may very well be many mistakes or bad practices in here, some of which I may have improved upon by now, but others maybe not. Either way, feel free to comment on them, and I'll answer any questions as well.

Thanks for checking it out, and please be good to it. I'd love to know about any projects created with this source as a basis, and would appreciate links back here. Also please don't claim it as your own, that's not cool.

For now I am hosting the source code with GitHub.

Enjoy!

Read other articles tagged: , , , , ,
© 2010 scriptNode