Archive for March, 2009

Web Development Bookmarklets

Tuesday, March 31st, 2009

I’m a big fan of Firebug. I believe that if you do any kind of web development, that’s the one Firefox extension you NEED to have on your computer. It is simply indispensable and I miss it greatly when I need to debug code on IE or another browser. Or at least I used to miss it, until they came out with Firebug Lite.

What is Firebug Lite? It is a bookmarklet which loads up almost fully functional copy of Firebug into the browser. It is not perfect, and definitely not as flexible as the real thing, but it has one big advantage. I can use it to debug persistent Javascript errors in IE with little hassle. It is really a life saver – what used to take a lot of guess work, and cursing under one’s breath now can be resolved in mere seconds using this bookmarklet.

While Firebug is pretty much ultimate web development tool there are quite a few other useful bookmarklets (or favelets) out there. I wanted to take this time, to discuss few of my favorites. All the links below lead to homepages, not the bookmarklets themselves so don’t drag them to your toolbar.

  1. Squarefree Bookmarklets

    Not one, not two but 23 useful bookmarklets. Most work in Firefox, some also work in Opera and IE. Few of them duplicate functionality of Firebug most some offer some interesting functionality. There is one bookmarklet that lists all the defined classes on the page, another displays all javascript variables and user defined functions, others show borders of elements, nesting levels and etc. All in all, very useful set of tools.

  2. XRAY

    Great little bookmarklet which pretty much does the same thing as the “inspect” feature of Firebug. It allows you to click on a HTML element and will display wealth of information about it. Among other things it will tell you the element type, class, id, the exact inheritance path (ie. all of it’s respective parents up to the html element) and all the most important css attributes such as border, margins, padding, height, width, float and etc.. The inheritance path is clickable so you can easily see the properties of all the parents.

  3. ReCSS

    Reloads the CSS for the page without reloading the page. That’s it! Simple, yet brilliant. Works great with pages that take a little bit of time to load, or use Ajax to dynamically load a lot of content and need to recombibulate themselves from scratch after you hit refresh.

  4. Design

    Can overlay an interactive grid or a ruler over your page to help you estimate relative measurements of HTML elements. It also has a feature that allows you to click-and-drag your mouse and displays the size of the covered area in pixels. Takes out a lot of guesswork when trying to get the margins or padding “just right” for a given layout.

  5. WTFramework

    Displays the name and version number of the Javascript framework used to create a given page. Saves you from digging in source code in order to make sure a site in question is using the newest release of jQuery. It supports most of the big frameworks out there (jQuery, YUI, MooTools, Dojo, Sciptaculous, Moochkit and etc..).

  6. Layout Grid

    Similar to the design bookmarklet, but much simpler. Instead of using an overlay to display a grid, this tool “injects” a layout grid as a background image for your page. This way all the top level elements remain clickable, and accessible. Works well with other bookmarklets such as XRAY.

  7. Slayer Office Favelet Suite

    Very comprehensive compilation of tools rolled into a single bookmarklet. It has couple of features not found in any other bookmarklets or in Firebug – for example the ability to view HTML headers of the current page. It also has some fairly standard tools such as DOM overlay, a ruler (similar to that from Design) and bunch of other stuff. Highly recommended.

That’s all I have for today. These are the things I’ve been using lately while hacking together webpages and testing them in various browsers. What are your favorite bookmarklets? Did I miss any important, life changing Favelet tools here? Let me know in the comments.

Why do we get no respect?

Monday, March 30th, 2009

Stuff like this saddens me:

axe.jpg

Apparently if you can read some sloppy, malformed pseudo-code thrown together by an idiot marketroid with no knowledge of programming you must be a total loser.This advertisement is yet another example in a very common trend of equating programming skill with social ineptitude. Unfortunately most people fail to notice the subversive nature of the advert. I’ve seen this re-posted on programming blogs and the like. Just you look at that image though. Who is this ad targeted at? Programmers? I think not.

If it was aimed at software engineers, then they would at least make it resemble a syntax of a real existing language. Also, it would be incomprehensible to regular people. Programming jokes are less funny if they do not include a layer of abstraction which makes them incomprehensible to the intellectually deficient majority. And yes, they are deficient – studies have shown that certain percentage of our species is simply not wired for handling high level of abstract thinking that is required for programming. They are simply worse than us – genetically impaired, but it’s not their fault, so we should not hold it against them. But I digress.

Anyone can read that add, there is no question about it. It was designed to be readable rather than cryptic. So it is really targeted at the mainstream population who can easily make out what the code says but they do not consider themselves to be the butt of the joke. Since they don’t write software for living (and definitely not for fun) they can pat themselves on the back for figuring it out and then have a chuckle at the silly socially undesirable nerds who write this sort of stuff on a daily basis. It exploits existing negative stigma that surrounds our profession.

Somehow our society came to a conclusion that mastering a difficult skill such as programming, and using it to make a living is wrong. It makes you a loser, and outcast and social reject. (Unless of course you don’t enjoy it, but that just makes you a horrible programmer. If you are writing code without being passionate about it, if you do not read technical blogs, or do any hacking on your free time then you need to get the fuck out of our field. You are the horrible cancer that is killing good software projects, and you need to die a horrible painful death! Seriously, if you don’t like programming, GTFO – we will both be better off!) Apparently all programmers have no lives, look like characters from Revenge of the Nerds and can barely function in the society without help of their cooler friends or co-workers. At least that’s how we are represented in the media. You hardly ever see successful, well adjusted and normal looking people from out field on TV. All computer experts of significance are gross caricatures, that are the butt of nerd jokes.

But it’s not just the media. This anti-programmer sentiment is prevalent in our society and I personally encountered it IRL. I used to know a guy whose girlfriend would get visibly flustered when we would start to “talk shop”. She would start to roll her eyes, sigh loudly and if it went for to long she would butt in and try to “shame us” into ending the conversation by calling us geeks, losers and etc. She could not stand the thought that her boyfriend could be interested in something so socially reprehensible as programming and technology in general.

How the hell did we get to this point? Why do we allow this social stigma to continue? I mean, in most cases we are smarter, more educated than the people who perpetuate these stereotypes. We have real college degrees (BS, MS often a PHD) rather than the fake diplomas given out by business schools. Not only that, but we create and control the technology they depend on. We maintain their machines, and facilitate their communication. Without us, they would have no Facebook, no iPhone and no Youtube. And yet, somehow we are considered inferior and undesirable.

Seriously, who is more of a valuable member of society? Someone who develops innovative free software on their free time? Or someone who spends all their free time watching reality TV, can’t figure out how to set time on their VCR, owns a computer which is part of at least 3 different botnets? Apparently the former is a freak that needs to be shunned, while the later is an upstanding pillar of society. WTF?

You may say that these stereotypes are silly, and that we shouldn’t even bother. I usually don’t get offended at that type of stuff. I mean, I’m Polish so I do get to hear a good deal of really bad Polish jokes here and there. Then again, most people think twice before they tell an ethnic joke. Making fun of IT and Software people is in a different category though – it is acceptable. But maybe it shouldn’t be. Maybe we should start getting offended – or at least pretend we are, until people figure out it’s probably not cool to make stupid jokes about computer geeks.

The Path

Friday, March 27th, 2009

You know how we always argue whether or not video games are art? No? Really? Never heard that one? Well, there exists this argument that video games as a medium can be used not only for entertainment and blowing off steam, but also to convey some deeper meanings. You know – artsy stuff. So some games can be considered art, and some art can be expressed in a form of video game. The Path is one of these products that sort of straddles that divide and tries to coexist in that odd place where game and art intersect.

On one hand, it has classic game elements such as collecting items and being awarded some sort of completion score upon finishing the game. On the other hand, those elements are kept to bare bones minimum and the essence of the game is really telling stories using visuals, sound, music and short written passages (the game has no voice acting).

the-path1.jpg

The plot is simple, you start in a red room and you can pick one of 6 sisters. They are all different age, and exhibit different personalities. You then are plopped at the start of a forest path with a single directive: go to the grandmother’s house and do not stray from the path. If you follow that direction though, you will be done with the game in 5 minutes after which you will be told that you have failed and will be returned to the red room to pick another sister (or to try again with the same one). So the point of the game is really not to follow the instructions, but to disregard them and go off wandering into the forest.

What is in the forest? Well, bunch of things. Mostly items you can collect. Each of these items usually gives you a short note or reflection that reveals something about the girl you are playing. These notes are usually the girls musings on life and range from “Men are like motorcycles – you drive them to where you want to go and then let someone else take care of them” to “Oooh! I can keep my marbles in this”. Each item also unlocks a room at grandma’s house.

the-path2.jpg

You can also collect little shiny coin flowers which are scattered throughout the forest. I think there are around 147 of them, but I have no clue what happens if you collect all of them. There is also an odd girl in white who runs through the forest. If you follow her, she will lead you to interesting places. If you get completely lost, you can take her hand and she will lead you back to the path.

Oh, and a wolf. Somewhere in the forest there is a wolf that will hurt the girl somehow. It takes different shape and for for each sister, and it plays out some scenario that ties into her personality and worldview. But each time, the encounter with the wolf is dangerous and usually ends very, very badly. The wolf won’t chase you though – you will need to seek it out yourself and bring the unpleasant experience upon yourself. Or not, the game won’t push you. It is really set up as a sandbox where you can do whatever you want. The whole point of it though seems to be finding the wolf and going through the dark and cathartic experience. It is never shown what exactly happens to the girls – but you can usually figure it out.

Once you meet your wolf, you have to visit grandmas house and it will look strikingly different for each girl. The decor of the house and the rooms she visits will mirror her encounter, and give you additional hints as to what has happened to her. The more items you managed to collect, the more hints you get along your way. So it is usually a good idea to thoroughly explore the forest and try to find all of the items before interacting with the wolf.

the-path-robin.png

The visit itself is sort of a psychedelic roller coaster ride (eg, you are on rails and can only move forward) which looks strikingly different each time. The images you see there are usually symbolic and often take shape of vivid hallucinations and or memories from the girls past. For example why would grandma have a hallways full of school lockers, room full industrial machinery or a wall made entirely out of fire at her place. It is sort of like walking through one of those bizarre music videos that make no sense at all. Only that grandma’s house sometimes does make sense.

But mostly, The Path is a game about exploring the forest and while there are several very picturesque and striking locations to visit there, they are separated by vast expanses of boring forest foliage. Don’t get me wrong, the game looks stunning and the environment subtly changes as you walk around in it. There is a very strong art direction here that makes everything look surreal. The light, shadow and colors are used amazingly well. The path for example, is basked in light, surrounded by luscious green grass and flowers. There is a bird soaring in the sky above your head, you can see insects milling around, leaves floating in the wind and etc. When you leave the path you find yourself in a shadowy, murky place with spectacular shafts of light falling from between the canopies. Special places in the forest all have their own mood and color. There is a meadow with a scarecrow there which is bright, covered with flowers of brilliant colors. The cemetery is gloomy, and illuminated in creepy reddish light. Also as you progress towards the grandma’s house, the time of day changes and the forest becomes darker.

The art direction is very strong, and everything is designed to look a bit surreal – from slightly odd character designs to the inventory and HUD elements. In fact the HUD blends in with the style so well, I initially had no clue that the scribbles at the edges of my screen were supposed to mean something. But they do. Initially you have only one – a squiggle of some sort and it shows you where the Girl in White is with respect to you. It makes following her much, much easier once you figure it out. Once you have encounter with a wolf, you will also see the location where it happened on your HUD as you play with the next sister. This makes it easier to revisit these places to see if they have interesting items left.

Same can be said for the background music. It’s essentially a single song, but it changes as you walk around in the forest. It has slightly more cheerful tempo on the path, and becomes more unsettling with added sound effects. Whenever you run, the music alters drastically and you can hear your rising heartbeat. But it is pretty much always the same song. The sound effects are done very well too, and they contribute the the surreal and strange feeling of the forest.

So the game really has a lot going for it. It is an interesting concept (retelling of the Red Riding Hood story), very strong visuals, great art direction and some innovative ideas such as using a sandbox model. Where it lacks are game mechanics.

The controls are pretty intuitive – you can either use just the mouse or combination of mouse and keyboard. In most cases mouse is sufficient. You press RMB to walk and move your mouse to face the direction where you want to go. You can also use LMB to look around in place, and if you press both buttons at the same time you will run. The game also supports WASD for movement (shift to run). To interact with items, you just park your character next do them and wait. If they play dumb you can remind them they are supposed to do something with the scroll wheel – up makes them start an action. Down cancels an action.

Unfortunately the simplicity of controls is sort of overshadowed by their clumsiness and unresponsiveness. Sometimes your input doesn’t seem to register at all. In certain locations where the camera becomes fixed the controls get a bit finicky and turning around with the mouse becomes a chore. There are locations in the game which will prevent you from running, but you are never told that you are in a no-run zone. Your character just won’t run and you just don’t know if it’s a buggy event listener or location induced limitation. Also, if you walk out of no-run zone, the running wont work until you come to a full stop. Sometimes it takes few tries since the borders of these special areas are not very clearly defined.

Interacting with items and/or characters is a bit buggy too. Sometimes triggering the right event takes a bit of work and maneuvering. The game boasts that it uses an innovative Drama Princess™ system which will detect nearby objects and have your character automatically initiate interaction. In practice, it works half the time at best. Usually when you stop near an item and wait your character will just look around and do their idle animation. Each time you nudge them, they disengage whatever action they were just pondering. Eventually they get the message and walk up to the other item in the area rather than the one you wanted them to use. This tended to happen a lot in the 2-3 places that had items/characters close to each other.

One could argue that since the game has no reflex based puzzles, sluggish controls can be forgiven. It doesn’t change the fact they can be annoying at times. The authors recognize this issue and apologize for it in the manual claiming the game was made by artists and not seasoned game designers. So I guess we are supposed to cut them some slack because of this. I don’t know.

The game has no map screen (which should be a criminal offense) and the landmarks in the forest are far away from each other so it is extremely easy to get lost. Every 100 yards you will see a dotted path overlaid on the screen – it represents your movement in the forest so far. It is a poor excuse for a map, and it disappears so that I found it useless. Not only that, but it also doesn’t show you any landmarks. So you can only use it to judge your position in reference to where you have been before which again is not as useful as a map would be. Then again, having a functional map in a game about getting lost in the forest probably wouldn’t make much sense.

On my first play through I spent most of my time in the forest being hopelessly lost, and stumbling upon random items and locations. I guess this was by design, but I didn’t fully enjoy the game until I figured out that you can somewhat reliably navigate the game world by using the existing, rather spartan mechanics and visual.

The HUD elements definitely help, and once you learn how to use them to follow the Girl in White you will get much better at navigation. Once you get better at navigation, you will be able to find the interesting locations in the forest quicker. Here is a tip: if the Girl in White leads you to your wolf right away, just run out deep into the forest. She will follow you and will eventually pick a different location of interest.

Speaking of running – it sucks in this game. Whenever you run, the camera zooms out to this bird’s eye view position, the screen darkens and visual clues that you would normally use for orientation fade out of view. You can’t see locations, you can’t see other characters and you can’t see the flower coins. Sometimes you can’t even see your character because she is obscured by the tree canopies. You are literally running blind. This is clearly a “feature” added to prevent you from finishing game to quickly. Fortunately the funky HUD remains visible while running so this limitation did not stop me. I spent most of the game staring at a nearly blank screen following the swirly symbols on the edges of my screen, and stopping every once in a while to see if I have reached my desired location or not.

Searching for items usually gets tedious after a while, and the Girl in White has a tendency to either lead you straight to the wolf or run in circles between locations you already visited and used up. Collecting a full set of items may take some patience and determination which is once again by design. I guess it is supposed to artificially extend the game length and increase replayability.

If you forgo searching for missing items and go straight for the wolf, the game becomes surprisingly short. I was able to knock out 4 out of the 6 girls this way in one evening. I finished with 3 of them at grade C and one at B. Granted, I got most out of the Gradma’s House experience with by B grade girl (Carmen, I think). If you are committed and get good at blindly following the HUD swirls you can complete this game 100% in a single evening or two.

I sort of wish there was more to do in the forest. And I don’t mean more stuff to collect – some other activities or achievements that you could be graded on. For example, it would be nice if you could “unlock” locations and make them appear on your HUD just by visiting them with any girl and if this would factor into your score. There could be some other mini/meta games – or more explicit story elements. I don’t know – a lot of stuff could have been done. As it is right now, just walking around is not all that rewarding. Sure, the forest looks very pretty but sight seeing gets old 10 minutes into the game. After that, you tend to focus more on game play, and that’s where the game seems to be lacking.

Meeting wolfs is a bit anti-climactic. I imagined there would be some excitement involved there – like running away from them or trying to find shelter before they get you. But no – you just need to walk up to them and then watch a cut scene which always cuts to black before anything interesting happens. Guessing what happens is part of the game I guess, but I sort of wished there was more to this.

All in all, The Path is rather interesting gaming experiment. It focuses on simplicity of game play and creating just the right mood and atmosphere through visuals and sound effects and telling ambiguous stories. For the most part it succeeds, though there are still rough spots. The controls are a bit stiff and unresponsive, and some design choices (like sucky running) may help to diminish the experience the game aims to provide. It is also a little short and repetitive – you will find yourself visiting the same locations with different systems over and over. The replay value is limited – once you unlock all the secret rooms for a given girl, there is little or not incentive to go back and find the rest of the items. This makes the game a bit short. According to Steam I have played the game for slightly over 4 hours and I can easily say I’m mostly done with it.

You need to give it to the creators – it is certainly unusual and offbeat game. It’s not for everyone though. Some people will hate it instantly. Others may love it. I personally found it intriguing, but it did not blow me away. I read some glowing reviews and browsed the games home page and I guess I was expecting something more.

The game can be purchased on Steam for $9 which seems reasonable. If they were asking for more, I’d probably tell you not to bother. The $9 price point is still a bit high considering the length of the game and the replay value. But you don’t usually see video games sold commercially for less than this.

The path is an intriguing game that is off the beaten path, and has a unique and very stylish way of telling marginally creepy stories. I’d highly recommend it if it was a free download. But since it is a $9 purchase, I will say that might be worth a glance but only don’t care about throwing away $9. Chances are you may get few good hours of enjoyment out of it like I did. Or you may totally hate it due to the funky controls, very slow pace and a complete lack of adrenaline pumping action scenes. It’s one of these games that attempts to scare you via very slow cooking tension building and thought provoking ambiguity. As such, it is definitely not for everyone.