I couldn’t figure out why my HTML5/JS Akihabara game was not loading and thought the error in the Firefox JavaScript Error Console “Not well formed” had something to do with it. Turns out that if Akihabara cannot find the audio files for your game, it hangs on loading and there is no error in the console to that effect.
I threw the OGGs and MP3s in the directory and we’re off to the races. Still get “Not well formed” but the game runs. Who knows?
You might be a web developer. You might need to know what HTML element is under your cursor at any given time. You might need to know the hexadecimal value of a pixel is under your cursor at any time. You might have a mile-long CSS file inherited from multiple projects and wonder: “Which styles still apply and which are no longer used?”
Fear not my fellow web developers, web designers, programmers, whateverrers! These 5 Firefox Extensions will help you chop the time spent on any web development task so you can get back to reading blogs during the day. Or work. You choose.
Without further ado, here they are:
I don’t think I’ve ever used a web browser-based tool as much as I have this one. It’s saved me so much time and helped me solve so many problems over the past year. It does practically everything. With tools like “Resize Window” which lets you resize your window to a certain pixel width and height and “View Generated Source” which lets you see the source code used in the website AFTER Javascript runs — Instead of showing function(var 1, var 2) it will actually show the variables that went into that function e.g., function(“john”, “rockefeller”). Cool huh?
Cool features:
Sample Screenshots:
I’m sure we’ve all seen a cool color on a page, whether it’s an image or cell background, and said “Oh man I love that color. I could eat it. I wonder what the hex value is so I can use it on my site. Or in case I get hungry.” Well, you could always take a screenshot, load up The Gimp, use the Color Picker tool to determine the hex color value, but who needs to do that when you’ve got ColorZilla installed?
ColorZilla will display the hex color and RGB value of any color under your cursor. Very, very handy.
This handy little extension will show you the Google PageRank of whatever site you are on as well as the less-important-but-for-some-reason-still-used Alexa Ranking.
This handy little Firefox Extension will tell you which CSS styles are not found on your pages. It works per domain, so surf all of the pages of your site and a comprehensive collection of unused styles will be shown which you can then promptly delete from your stylesheet, thereby increasing the performance of your site.
Very very, cool.
No Web Developer’s tool-belt would be complete without the illustrious Firebug. The list of features here is incredibly long, but so is the list of Web Developers who have saved hours of work using it. Their own website explains it better than I would but you’ve got to ask yourself one question: What kind of web developer are you if you aren’t already using this??
I hope you’ve enjoyed this list and found some of the links useful. If you’ve got something to say about these tools or even have a list of handy tools you use that might think others would find useful, please post a comment with a few links. Thanks!
Sometimes while developing a web application, you need to hide or display certain elements dynamically based on circumstance. For instance, if you’re filling in your personal information and you in the dropdown box you select “other” as your country, the website may be required to display a previously hidden textbox allowing you to type in your country name.
This post contains two links, written by the same person at two different times. Which one you choose to use is completely up to your skill and the scope of the project you’re working on. The first, is a simple, easy-to-understand Javascript code snippet: http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/
The second link is a reprise by the same author almost three years later with a much cleaner implementation of the same functionality in JavaScript. Unfortunately, it requires more knowledge about JavaScript and events, and for a beginner in programming, the first link may be easier to swallow. For the site, click this link: http://www.dustindiaz.com/add-remove-elements-reprise/
Pick your poison :)