A Better Way

Finding a better way to get things done, a technical journey

Archive for January, 2010

Neflaria V2: HTML 5, jQuery 1.4.1

Jan 26

Posted by Jack Lawson in Development, JQuery, Javascript, Neflaria, PHP, User Interface Design, Web Design, Web Standards, css | 8 Comments

Yay! I love jQuery! I love HTML html 5! I love CSS 3!

And, I’ve decided that Neflaria, Version 2, will be my playground.

Neflaria, for the unacquainted, is the online game that my friend and I inherited a couple years ago. You make a character, you log in, and you fight monsters and chat with other players; while there’s not a whole lot to the game, it has been around for about 10 years, and as such, has a lot of character. And a lot of characters. I mean that endearingly. (Hi, Chris)

However, to a lot of the players, and definitely to me, its 2001-era look is a little stale. Its 12px Times New Roman on 100×100 pixel repeating background. Another word might be “dated.” The server-side database and file structure is a little crazy and unorganized, and it is time for an upgrade. So, here’s where Neflaria version 2 comes in.

One of the decisions we made was to move forward and to use jQuery 1.4.1, which niftily came out just as we were restarting development, to use html 5 (by including the wonderful html 5 shiv [blog post, javascript] for backwards compatibility), and do as much as we can to bring Neflaria into 2010 while at the same time making sure that the people playing the game- who are probably still on IE6- aren’t left out in the dark. Now, I’ve always railed against IE6, and I hate IE6 support more than anything… but by building on a solid base of well-structured html, css, and javascript, we can bend the styles later on to suit IE6′s needs, while maintaining future compatibility. “Graceful Degredation” is the term of the day.

We’re developing Neflaria V2 looking for the future. We’re building our javascript more like a framework and less like a loose collection of methods called “x2″ and “j5″. We’re restructuring the database (aka normalizing the heck out of it) and using JSON served piping hot via short but precise PHP pagelets. It’ll be very client-heavy, assuring server-side performance, and it’ll be extensible for future features. We’re even working on multilingual support, using jQuery to query a language-based XML file by key.

I’m pretty excited. Get a preview here (only the home, terms of service, privacy policy, and “create” and “login” buttons do anything, and it isn’t wired up to the database): http://labs.crimsondeviations.com/NeflariaV2Preview/

Tags: , , , ,

A Switch to Chrome (Mostly): A Followup

Jan 21

Posted by Jack Lawson in General, Google | 1 Comment

performance-google
Image by nDevilTV via Flickr

A follow-up to my original post from July, a mere 6 months ago.

I have, now, totally switched to Chrome. And yes, it was exactly for the reason I fully expected to: extensions came out. Sort of like Google’s this big Overmind that watches all…

Then again, I guess it is, isn’t it.

Anyway, the performance difference between FireFox and Chrome is clear. In direct contrast to one comment left on my original post, I have as many extensions in Chrome as I do in FireFox, performing the same activities (with one caveat)- and it is noticeably faster. I load up FF when I do IE: to test the differences in rendering engines across browsers, so that I can fix the CSS and Javascript bugs. To be fair, FF has the best debugging (that version of FireBug is far superior to anything I’ve seen yet), which makes testing so much easier. But, FF is on my machine only for that. For debugging. Not for browsing.

Honestly, I see absolutely no compelling reasons to use anything but Chrome; it’s what I install on all of my relative’s computers, and it’s what I use every day at work and home.

All hail the Overmind!

Reblog this post [with Zemanta]

Tags: ,

Don’t Make Me Think: Book Review Part 2

Jan 19

Posted by Jack Lawson in Book Review, User Interface Design | No Comments

Nice example from the Don Norman school of tho...

Image by padday via Flickr

The first section of the book, called “Guiding Principles”, lays the foundation to begin thinking about usability. It explains the thought process that the end user takes; it’s never what you plan, but with proper design, you can help guide and funnel them in the right direction.

I’ve explained it in another post before: developers often think exactly like their application: we think, “if the user clicks X, they’ll see a menu for Y, which they can click to get to Z. Wire it up!” but in reality, the user isn’t a developer and doesn’t know the application end-to end. They have to muddle their way through the website, and if they’re lucky, they’ll manage to follow your carefully laid track. The only way we can have a hope to get them from X->Y->Z is by making each link, button, or step as clear as possible by developing controls that are self-explanatory in use. Buttons should look clickable, links should stand out from the text, headers should be obvious, and navigation should be clear. The user shouldn’t have to look up help text, experiment, or even pause to think in their quest to get to Z.

In other words, if you think, “we’ll just add explanatory text right here,” You’re Doing It Wrong.
Stay tuned for Part 3!
Part 1

Tags: , ,

jQuery 1.4 Released! (Let’s have an end-to-end testing party)

Jan 16

Posted by Jack Lawson in Development, JQuery, Javascript | 2 Comments

Query 1.4 was released as final on January 14, 2010, at 1pm (or so) EST.  The day it came out, I went to my boss and said “let’s update! Woohoo! I’ll order some cake” and he (yeah, yeah, rightfully) said “we need to discuss implications.” Which was a good thing, because- well, why should we even bother with the days of testing that it’ll require to switch out our framework?

I did some research, and there are some very, very compelling reasons. Here’s what I wrote to our team:

We may want to look at updating, or at least putting it in and testing, soon.

Benefits of upgrading:

  • Performance updates
  • IE fixes, including some fixes to IE event bubbling
  • Includes extra API calls and additions to existing functions
  • Maintaining possibility to use new plugins as they are created for the latest version of jQuery
  • Better handling for events (outside of just IE)- we can (should) refactor and reduce a lot of our jQuery code using events
  • Better support for multiple simultaneous animations
  • More granular “does my browser support X” checks

The downside is that we’re going to have to do pretty thorough testing in all browsers to make sure that the update hasn’t broken anything. The main areas to hit will be places that plugins are used:

  • Autocomplete for country/state
  • Loading screen in DE / Admin
  • Media plugin that sets up flash for Audio Guest Book in display
  • Simple Uploader
  • Help boxes in DE

We’ll need to spot-check around other areas of the site for javascript errors as well. jQuery still supports the same browsers- FF 2+, IE 6+, Safari 3+, Opera 9+, Chrome 1+ (http://docs.jquery.com/Browser_Compatibility) so we shouldn’t expect any new weirdness in archaic browsers like IE6.

More information about the update can be found at:

Also: “15 new features you must know”: http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

(Lower is better):

Performance of .html()Performance of .remove() and .empty()

Performance of .css()

Performance of DOM Insertion

# of Function Calls for Popular jQuery Methods

Tags: , ,

Cleanup

Jan 15

Posted by Jack Lawson in meta | No Comments

I’m going through and cleaning up some of my old posts- especially some of the ones with code examples. They’re pretty ugly at times, and it just so happens that two of the worst are the two most popular posts here (the one about DataPagers and Listviews desynching, and the one about Flex External Stylesheets.) Things may be rocky as I find a good syntax highlighter. It’s already proven to be much more difficult than it should be.