Fresh Web Development Goodies Bag

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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)