TOTW: Modernizr
Modernizr is a JavaScript library that you include on your page that executes itself and adds a series of classes to your HTML tag. This allows to implement modern CSS functionality without worrying about writing conditionals in JavaScript or anything complicated like that. You simply write one (or at most two) style definitions around the functionality you want, like this:
.functionalityYouWant #myElement{
css3thing: blah;
}
.no-functionalityYouWant #myElement{
oldSchoolWay: blah;
}
So, real world example:
.cssgradients .sideNavTitleBox{
background: -moz-linear-gradient(center bottom, #000 13%, #353535 84%);
background: -webkit-gradient(linear, center bottom, center top, color-stop(0.13, #000), color-stop(0.84, #353535));
}
.no-cssgradients .sideNavTitleBox{
background-color: #000;
background-image: url(/media/images/backgrounds/left_nav_box_header.gif);
background-repeat: repeat-x;
background-position: left top;
}
Again, you don't have to write any javascript at all, you just include the library on the page and it runs all on it's own and enables this awesomeness!
EDIT: Oh look, ALA just posted a great article on modernizr.
TOTW: Freenode IRC Webchat Client
This week's Tool of the Week is The Freenode IRC Webchat Client.
What it does:
Allows you to chat on Freenode IRC through your browser, even if your corporate proxy blocks IRC (IRC is the third biggest security hole for corporate networks).
When you need it:
- When you don't have an IRC Client installed
- When IRC is blocked
How to use it:
TOTW: Dynamic Dummy Image Generator
This week's Tool of the Week is Dynamic Dummy Image Generator.
What it does:
Allows you to display custom sized dynamic images on any webpage using nothing but a normal image tag and a special URL.
When you need it:
- Mockups
- Prototypes
- Place Holder Images
How to use it:
The Example:
TOTW: Subversion & Subversion Clients for Mac
I did a little research a few months back about Subversion Clients for Mac. I ended up switching to GIT, but since I already had this post mostly finished, here's what I found. This is going to break a little from the traditional TOTW format since it's more of a sampling of a lot of different tools. I've already posted about two of these before...
What it is:
Subversion is a semi-modern version control system. As I said, Git is quickly replacing it as the "next big thing". But if you are going to do version control, and you're not doing Git, you should at least consider Subversion (and I'd stay away from CVS, it's old and borked). It allows you to "save states" of your program. So, instead of "save as" > "myProject1", then "save as" > "myProject1working" and then "myProject1tryNewThing" etc, you would just have one copy of your project/file that you "commit" to your version control. Each commit lives as it's own snapshot so that if you need to go back to another version, you just browse your history and restore that version. You can even "diff" your current version with any other older version to see what you changed if you're trying to figure out how you broke something.
When you need it:
Anytime you do any software project at all, big or small, I'd say you need version control. But here's the bullet list:
Working on a software project:
- In a group
- By yourself on one machine
- By yourself across multiple machines
- Working on an open source project to help distribute the source code
- Joining an open source project (if they don't have version control, they aren't worth joining, unless you are joining to set them up with version control
)
There's a few options out there, but no clear winner. On Windows, TortoiseSVN seems to be the clear winner, and is a great tool. Nothing stands out this way on Mac. At least nothing free. So here you'll find a list of several Subversion clients for Mac. My favorite as of this writing is Versions, but it costs $60 (there's a free 30 day trial). I recommend setting up a subversion server (either on your local machine, or corsair) and using it. Any job worth having is going to require you to use a version control system, so it's best you become familiar with one now.
Here's a question on StackOverflow discussing these plugins if you're interested in learning a little more.
Using Subversion from command line
Martin Ott's Binaries
Free Subversion Book
Versions provides a pleasant way to work with Subversion on your Mac. Whether you're a hardcore Subversion user or new to version control systems, Versions will help streamline your workflow. Versions is here now, so say hello to the fresh new look of your repository and start saying less to that command-line interface. Download the free demo to take it for a spin.
ZigVersion is an easy to use interface for Subversion, a popular open source version control system. Instead of simply reproducing the command line concepts as a graphical interface, we looked at the typical workflows of professional programmers and designed an interface around them.
TOTW: Google Closure JavaScript Compiler Web Interface
This week's Tool of the Week is Google Closure JavaScript Compiler. I know everyone has probably heard of it, but if you haven't gotten around to checking it out, this post is great for you.
What it does:
Allows you to compile JavaScript down to a compressed form. It reads in your JavaScript, parses it, and re-writes it to be much smaller. This is good for you because it will make your site load faster, much faster in some cases.
When you need it:
- To compress your JavaScript
- To combine multiple JavaScript Files
How to use it:
The Example:
Additional Notes:
Notice in the compile directions there is an @output_file_name parameter. You can change this to something other than "default.js" (you can name it anything you want. Then you can actually access the results by clicking on the link on the right hand pane that says "The code may also be accessed at default.js" (if you rename it it will put the name you put instead of default.js). Here's the file generated by my example.
TOTW:Online JSON Parser
This week's Tool of the Week is Online JSON Parser.
What it does:
Allows you to paste in a JSON string and have it validated. It will immediately allow you to see pesky subtle errors in your JSON syntax. Just edit your JSON string right there in the box and it will auto update the preview below live so you can immediately see the effects your changes have on the outcome.
When you need it:
- When trying to debug or write JSON
How to use it:
The Example:
TOTW: Etherpad.com
This week's Tool of the Week is Etherpad.com.
What it does:
Allows you to edit a text file collaboratively in real time with others. Each person's changes are highlighted in a unique color. The file gets saved to their server at a unique URL that you can share and reference. You can view past versions of the file using a "Time Slider". It's kind of like Google Wave, but easier to use... There is even a chat feature on the side of the page for off-document conversation that persists from session to session.
When you need it:
- When walking through or collaborating on some code with another developer
- When collaborating on a text document (like a list or something)
How to use it:
In case you blinked at the end, I had Firefox and Chrome both open and was editing the same pad from within the two browsers. It kept the edits in sync live between the two browsers. This would have been more apparent had I actually had them both showing, which I should have done, but didn't think about it until just now...
TOTW: Firebug Console
This is a special Tool of the Week, because it focuses on a sub-set of a larger tool. This week's Tool of the Week is the console feature of the Firefox extension Firebug by Joe Hewitt, Rob Campbell, FirebugWorkingGroup.
What it does:
Allows you to run commands and play with the JavaScript on a web page, as well as output information from a webpage through a dos/shell style console; all from within the browser window. It's as if you "opened the hood" of the browser and started running diagnostics/talking to the robot that controls the page display.
When you need it:
- prototyping JavaScript
- debugging JavaScript
- writing JavaScript
How to use it:
Please note that this doesn't even BEGIN to scratch the surface of the power of this little tool. Check out the documentation, here and here.
The Example:
TOTW: Pastebin.me
This week's Tool of the Week is Pastebin by Dale Harvey.
What it does:
Allows for quick, IN BROWSER PROTOTYPING.
When you need it:
- Quick testing of a bit of HTML/JS code
- Demonstrating/Teaching HTML/JS in front of a group
- IMing/Linking/Emailing editable code
How to use it:
The Example:
Pages
- Projects
- Refactor 2.0
- The History of the World (as relevant to Christopher McCulloh)
- Themes and Plugins
- WordPress Themes
Categories
- autobiographical
- flash games
- hardware
- history
- iPhone App Development
- Java
- Javascript
- math & physics
- movies
- n342
- plugin
- programming concepts
- project management
- prototyping
- screencast
- Software
- Theming
- Tools
- TOTW
- tutorial
- Uncategorized
- Usability
- video games
- web sites
- Wordpress
Blogroll
Archive
- February 2013
- September 2012
- July 2012
- May 2012
- April 2012
- December 2011
- November 2011
- October 2011
- May 2011
- January 2011
- November 2010
- October 2010
- September 2010
- August 2010
- June 2010
- May 2010
- April 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- August 2009
- July 2009
- June 2009
- February 2009
- October 2008
- September 2008
- July 2008
- June 2008
- May 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- June 2007
- November 2006