Sometimes I make games. Sometimes I make websites. This is my blog.
I know it seems I’m like 15 hours late to the party, but really I’m not. I’ve been trying to come up with a good idea for my game this Ludum Dare. In the mean-time I’ve been playing other people’s games and chit chatting/lurking on their IRC channel.
Now that I’ve finally got my idea, I’m ready to get down to work.
If you’re looking for a web-based flipbook that works great on iOS (and other Flash-less devices), take a look at treesaver.js. It’s an open source script that automatically builds properly formatted pages that swipe great on the iPad and look great, too. Since it’s stock HTML5 and JavaScript, it works great almost everywhere.
Lightweight and fast, the Treesaver.js app doesn’t add any crazy overhead to your content but putting your content into the system and making it look nice still requires quite a large bit of elbow grease. This is due, in large part, to the unfinished documentation on the Wiki.
But, the software is only at version 0.9.2 currently, so there’s plenty of time for the community to help out. I love open source software.
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, by Dustin Diaz, 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 :)