Oct 08 2009

Fresh Web Development Goodies Bag

Advertisement

Web development is time consuming and quite challenging. There are many ways to help combat that challenge, helpful applications from security to traffic analysis as well as CSS-concepts to give us clean, condensed code and faster load times, reducing time efforts and assisting designers and developers with critical improvements to workflows.

Below, we present 30 extremely useful development tools, templates, generators, and security suggestions, hoping you are inspired to utilize these handy tools to make your life easier. Enjoy this fresh Web development goodies bag.

1. CSS and Development Tools

Scaffold
CSScaffold is a CSS framework written in PHP. Rather than try and create a static framework that uses the standard abilities of CSS, like Blueprint, it uses PHP to extend CSS. The syntax looks and feels exactly like CSS, except that you have some new, powerful abilities.

CSScaffold

Compass
Compass is a stylesheet authoring tool that uses the Sass stylesheet language to make your stylesheets smaller and your web site easier to maintain.

Compass

css_doc
css_doc is a Ruby library and command line tool to extract documentation from CSS files. The format of the documentation is very similar to JavaDoc.

CSSHttpRequest
Like JavaScript includes, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. CSSHttpRequest functions similarly to JSONP, and is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.

CSS Sandbox
Say goodbye to trial and error, but say hello to a tool and a toy to test CSS in real time. It’s a fast and simple alternative to reloading a page and viewing the latest tweaks to your code. Roll the mouse over the CODE button and the formatting for the CSS code necessary will be ready for your site.

CSS Sandbox

codeburner
This is a handy tool for Web developers to check CSS properties or HTML elements. After installation, you can run a search or click an item on the page to view browser compatibility information, syntax and code samples. It provides a quick reference available in your browser.

codeburner

Markup Validator S.A.C.
This stand-alone version of the W3C’s HTML/XHTML Markup Validator requires no installation. Just put the Validator where you need it, like a flash drive, CD or hard drive. It can validate local files, websites, or be setup as a Web service to allow users to validate over the local network. Simply drag and drop files and URLs onto the application icon, or use the File>Open command.

Markup Validator

CodeRun
This helpful tool allows us to search and upload runnable code projects, modify or create code with coloring completion, debug client/server code, as well as publish code links. For the cloud, we can deploy with a click, manage cloud resources, and track versions with SVN. It supports numerous languages.

CodeRun

Google Code Playground
Online script development tools let us implement rich, dynamic sites in less time. With this AJAX API playground, we can experiment with new functions like JavaScript or maps or even download feeds. Then these functions can be exported, fully ready to implement. New tools continue to be added, so this is a good place to revisit for language, blogger, charts, and other visualization codes.

Google Code Playground

Boks
Boks is an AIR application, meaning it works on Windows, Mac and Linux. It provides a user interface for Blueprint CSS framework and can handle grid and baseline rhythm configuration, before exporting grid.png and compressed CSS.

Boks

Bluefish
This Open Source editor is geared towards programmers and web designers and will run on most operating systems including Linux, FreeBSD, MacOS-X, OpenBSD and Solaris. Bluefish focuses on editing dynamic and interactive websites and scripts, and supports many programming and markup languages. It will not at this time run on Windows, but a native Bluefish 1.0.7 binary will.

Bluefish

FireCrystal
FireCrystal is a Firefox extension to help programmers and designers figure out how interactive behaviors on the web work. It allows users to “rewind” their interactions with web pages while showing the relevant code. However, it is currently an alpha release and can suffer from long load times or crash on Javascript-intensive pages.

FireCrystal

Adobe BrowserLab
This tool is currently available as a free preview, so web professionals should try it while they can. Adobe BrowserLab provides web designers with an exact rendering of their pages in multiple browsers and operating systems. It is a solution for cross-browser compatibility testing and can be customized with preferences, as well as being an online service that can be accessed from virtually any computer connected to the web.

Adobe BrowserLab

checkmycolors
This tool is for checking foreground and background color combinations of all DOM elements to determine if they provide sufficient contrast when viewed by someone having color deficits. You enter a web address and checkmycolors returns test results based on the algorithms suggested by the W3C.

checkmycolors

2. Typography

Typography Keyboard Layout
A simple, yet useful tool that lets you enter characters that are usually unavailable on a keyboard with ease. This thing is a regular keyboard layout, except that with Alt key on Mac or Alt Gr key on Windows it lets you type all these nice characters seamlessly. The layout also supports many kinds of diacritics, so you can type words like naïve or café and have fun.

Typography Keyboard Layout

Typedia
A shared encyclopedia of typefaces, a resource to classify, categorize, and connect typefaces.

Typedia

fontbook
This web based font viewer lets you look at all your fonts with your sample text by using HTML5’s font embedding. You can view the metrics, glyphs or the font body text. Support should soon be available for tagging, rating and favoriting.

fontbook

3. Reference tools

Regex Widget
This interactive widget is handy for testing JavaScript, Sed, Ruby, or Perl expressions. The user interface is simple, case insensitive, has global switch, and match index array view for coders to implement tests easily and effectively.

Regex Widget

HTML Entity Character Lookup
Using HTML entities is the right way to ensure all the characters on your page are validated. However, often finding the right entity code requires scanning through 250 rows of characters. This lookup allows you to quickly find the entity based on how it looks, e.g. like an < or the letter c.

HTML Entity Character Lookup

PHPQuickReference (Mac Dashboard Widget)
PHPQuickReference gives you a handy PHP reference right on Dashboard. Search with autocompletion and hints and copy and paste sample code to your project. You can find more useful Mac Dashboard Widgets for web designers and developers here and here.

PHP Quick Reference

4. Image Editing and Optimization

punypng
Punypng is a free tool that dramatically reduces page load times by reducing the file size of an image without any loss of quality.

punypng

Smush.it
Smush.it is an image editing optimization tool that takes most types of image formats and converts to smaller PNGs without changing their look or visual quality. It will provide data on how many bytes would be saved by optimizing as well as outputting a downloadable zip file with the minimized image files.

Smush.it

PNG8
Most of us use Photoshop, but Fireworks allows us to use an alpha transparency with PNG8 for a smaller file size while maintaining edges that blend smoothly and look great. Select the number of colors needed or setup a color matte and save a PNG8 image with alpha transparency. In the Optimize pallet, select PNG8 format with alpha transparency selected, and then click “Rebuild” in the lower right corner. Smaller file sizes equal faster page loads and this works the best for logos, shadows and gradients to be fully optimized.

PNG8

Finetuna
Finetuna image editor can be used for fun or for more serious sites. You can either upload an image or select one from a web page, before quickly adding your comments to any image. The only thing left to do is to share.

Finetuna

iConvert
This tool makes converting images to icons fast and simple. It is a one step process to creating icons for Windows, Mac and Linux.

iConvert

5. Security

consoleFISH
Security is a concern for us all, but server and system administrators who want to have a backup remote access to their systems without setting up their own SSL certificates can use this free AJAX SSH client to bypass firewalls and proxies on a secure connection. This tool makes it possible to anonymously open secure shell server connections while not revealing the IP address of the connection web client.

consoleFISH

PhpSecInfo
Wise security includes a multilayered approach. PhpSecInfo provides an equivalent to the phpinfo() function that reports security information about the PHP environment. Although it’s not a replacement for secure development technique, it does offer suggestions for improvement and is a useful tool in a multilayered security approach.

phpsecinfo

Lockdown: Secure Your Mac
Lockdown is a security application built from the popular iAlertU and makes securing any Mac with OS X Leopard 10.5 easy. Before you step away from your computer, you can customize its detection features by activating your computer’s motion-sensors, keyboard-sensors, external device sensors, MagSafe sensors, and more to ensure that not even the slightest tap goes unnoticed. Once your alarm has been set off, your computer will sound a loud alarm and prevent the system from being muted or put to sleep. Lockdown will take a snapshot of the offender using your computer’s built in iSight and, if you’ve entered your e-mail address, e-mail the snapshot to the account of your choice.

Mac Lockdown

6. Freelancing

Astuteo
Web designers and site developers can use this simple tool to quickly estimate the time and materials required for a proposed web project. Enter the title of the project and your default hourly rate, then adjust your anticipated hours to generate your total project estimate. The results can be printed or saved to a PDF.

Astuteo

redmark
Redmark is a handy tool for designers and their clients to communicate visually in three simple steps. Upload your design, automatically email to clients who can make comments, make revisions and repeat, before automatically publishing.

redmark

7. Improving your workflow

Web Form Factory
Web Form Factory is an open source web form generator which automatically generates the necessary backend code to tie your form to a database.

Web Form Factory

The Printliminator
The Printliminator is a bookmarklet with some simple tools you can use to makes websites print better. One click to activate, and then click to remove elements from the page, remove graphics, and apply better print styling.

The Printliminator

Split browser
Multitasking is mandatory. Depending upon RAM and screen size, this tool allows the FireFox browser to be split infinitely. The split window can be setup in columns or however is needed to compare multiple webpages. Choose the “Split Browser to” menu, and then drag and drop links, bookmarks, calendar, schedules or tabs in split windows.

Split browser

LiberKey
LiberKey free software is the “Swiss army knife” equivalent to 250 software programs that offer local and/or portable use. The best Open Source or Freeware programs were selected to match most practical needs while maintaining 100% portability.

LiberKey

Would you like to see more similar posts on Noupe?

Your feedback is very important to us. Please let us know how we can improve the quality of Noupe and what kind of articles you would like to see on Noupe.

Would you like to see more similar posts on Noupe in the future?(polling)

About the Author

Comments and Discussions
  • bogdan, 08 October 2009

    pfff ! you just made my day !!! … omg I feel like I’ve been on another planet ! … another atomic information bomb dropped on me ! thank you very much !

    … and yes, I want more articles like this one !

  • NICEOUTPUT, 08 October 2009

    Fantastic tools, thanks in advance..

  • Charlie, 08 October 2009

    Superb selection of tools! Thanks!

  • dotty, 08 October 2009

    I use phpfr as my widget for PHP reference.

    http://code.google.com/p/phpfr/

  • @riquecosta, 08 October 2009

    Very cool tips

  • Yasser, 08 October 2009

    Thanks alot

    Very helpfull goodies bag :)

  • Maxime, 08 October 2009

    Some tools could be of a use…

    On a humorous note, I especially like the split browser picture, it seems so useful the way it is showed in the picture!

  • Tony, 08 October 2009

    Just used Printliminator its great!!!…..especially with reducing images/clutter to paste to ‘Evernote’

  • Tracy, 08 October 2009

    Excellent selection! I installed LiberKey on my Sandisk USB drive as I prefer it to the U3 software.

  • Jef, 08 October 2009

    Wow, great set… Thanks!

  • Rumford Qwallify, 08 October 2009

    Punypng does not work. Dead in the water. Broken.

  • carl, 08 October 2009

    Great post! Very useful.

  • davidouz, 08 October 2009

    not only this topic about web development but all your site is good whenever i visit it , i learn a lot :) thanks

  • joyoge bookmark, 08 October 2009

    useful tools, thanks for bag:)

  • Logo Bliss, 08 October 2009

    Fantasic post, I have taken I few sites from the list that will be useful.

    Thanks.

  • Cameron Baney, 08 October 2009

    This is an incredible list of tools to use. I will definitely check them out. Split Browser scares me though. I think I would have a panic attack if I used it lol.

  • Rahul - Web Guru, 09 October 2009

    An ultimate Goodie bag for web designers indeed. Bookmarked!!!

  • Amazing. Simply Amazing. This is such a comprehensive list I can’t even believe it. I know I am DEFINITELY going to be checking out the Adobe Browser Lab. That looks like it might be able to solve many many headaches. Especially if it syncs up with Dreamweaver in some way.

    Thank you so much for the list!

  • Thiago Cangussu, 09 October 2009

    Thanks. These tools will be really helpfull.

  • Joseph, 09 October 2009

    very useful article.. thanks!

  • Cory Smith, 09 October 2009

    Great article. Love you, Noupe!

  • Jhay, 09 October 2009

    Cool post! Thanks

  • Qtorrents, 09 October 2009

    Sweet!

  • Ahmed, 09 October 2009

    Thanks very helpful

  • Harrison, 09 October 2009

    Wow,what a vast bundle of information

  • Ben Weller, 09 October 2009

    Excellent stuff! I’m always looking for tools to make my day-to-day work a bit more efficient. Thanks!

    -Ben

  • Sklep w?dkarski, 11 October 2009

    Redmark is just outstanding tool, very very helpful.

  • Kate Payton, 12 October 2009

    Thank you for this list – what a great roundup of useful applications and tools!

  • redsonic, 12 October 2009

    Thanks, I tried “code burner” : a very nice extension for firefox. I really like it.

  • Paul Samuel, 12 October 2009

    A good list of software except for LiberKey. That’s an illegal package of software made by one guy in France that’s stolen a lot of work from PortableApps.com but stripped of the GPL and copyright, at least in past versions. There’s an illegally modified copy of Firefox in it. Most of the freeware is done without permission, too. And it leaves stuff behind on most PCs.

  • Diego, 14 October 2009

    Excelent post

  • Moto Liege, 18 October 2009

    Thanks alot

    Very helpfull goodies bag :)

    Very cool tips

  • Austin, 29 October 2009

    I recently inherited a customer’s site and had many conflicting browser views. After using Adobe’s BrowserLab for a couple of hours, I decided that this is the easiest way to fix browser views instead of having to install multiple browsers. The one feature that allows the designer to view the way the browser looks on multiple OS’s is worth its weight in gold.

  • hassle free websites, 03 November 2009

    Wow! This whole site is an amazing resource! Using iConvert immediately.

  • Bono, 05 November 2009

    Wow very interesting. Just downloaded the markup validator.

    Thanks a lot.

  • Thiago Alves, 24 October 2010

    Nice stuff on, i’ll be visiting more often!

  • Amelia Neblett, 07 November 2010

    Wow! I have already been browsing google for hours in this and that i finally found it right here!

  • Orlando, 11 October 2011

    These are deff some good “goodies” thanks for posting!

search form
 
image description image description