Reading codes in websites can be challenging if no syntax highlighter is used (check 11 Syntax Highlighters To Beautify Code Presentation).

Language specific tags, functions, etc. will be hard to recognize specially in long pieces of codes.

Syntaclet is a bookmarklet which can automatically highlight codes on web pages that are not already highlighted.

The bookmarklet auto-detects the language used and applies syntax coloring with line numbers to all the code on the page.

Simply drag it to your bookmarks bar and press it whenever you see any hard-to-read codes on any web page.

For a productive development process, every web designer/developer needs tools that are functional and make you feel comfortable. 

An IDE (integrated development environment) is possibly the most frequently used tool as it is your touch to the code whether you're building something from scratch or applying just a small update.

And, you don't have to use only a single IDE, maybe something complicated with a debugger, built-in FTP, etc. as the main code editor and something simpler for quickly making updates + viewing source codes.

Here are 16 free IDEs for designers/developers that are used widely and proven to be stable:

Aptana Studio (Windows, Mac, Linux)

Aptana Studio is a very impressive and open source development tool that supports HTML5, CSS3, JavaScript and Ruby, Rails, PHP & Python on the server side.

It has a "code assist" feature where you can find out details about functions, elements, etc.

You can stay synchronized with the server via FTP, SFTP and control your code with the help of an integrated debugger.

There are many other features that will ease the development process including Git integration or a built-in terminal.

Komodo Edit (Windows, Mac, Linux)

Komodo Edit is an open source application that has support for PHP, Python, Ruby, JavaScript, Perl, Tcl, XML, HTML 5 and CSS 3.

It has syntax coloring, folding, background syntax checking,  auto-complete and calltips.

There are lots of extensions created by the community that will help you customize it more.

Read the rest of this entry »

Google is so decisive on making the web faster with the tools and resources it creates. Also remember that they had announced "speed being a factor in Google's search rankings".

Google is now sharing an open source Apache module named mod_pagespeed that automatically optimizes web pages.

It works with Apache 2.2 and includes several filters that optimize JavaScript, HTML, CSS stylesheets, JPEG and PNG images.

For the other members of the Page Speed family like the Page Speed extension, check this.

Google Chrome Frame is an open source Internet Explorer plugin that enables IE to use the open web technologies and speedy JavaScript engine of Google Chrome.

It is actually not so fresh and around for a while, however, the stable version of the plugin is released lately and it is ready-to-use.

The plugin requires 2 steps to work:

• The user with IE 6, 7 or 8 should install it
• The website must add a tag to the web pages (detecting IE users and inserting the tag only for them is a good idea)

After that, any user with those IE versions will have a browser with better capabilities like support for HTML5, CSS3, better JS performance and more.

Google Chrome Frame is already used by many popular websites including DeviantArt, github or HootSuite.

It is definitely not a perfect solution as "a step from end users are required" but at least a step forward and almost doesn't add an extra effort for web designers/developers.

Cloud9 IDE is an open source application that aims to provide a powerful and focused IDE for JavaScript developers.

It is powered by the Ajax.org platform + makes use of HTML5, node.js, socket.io and many other projects.

The application has a pretty fast text editor with bundled syntax highlighting support for JS, HTML, CSS and mixed modes.

Cloud9 IDE has integrated debuggers for node.js and Google Chrome which can be started, paused and stopped from the IDE.

Using WebDAV, it can connect to remote workspaces too and has a plugin system for improving it further (already has several bundled plugins).

P.S. The application is still in early development stages, can be a little buggy but improved continiously.

Unify is a software, powered by Deutsche Telekom, which provides a common API developing cross-platform applications that will look and feel like native ones.

It makes use of HTML5, CSS3, JavaScript and other resources like qooxdoo, PhoneGap, Adobe AIR and Sass.

The code can be re-used between platforms and supported ones are iOS, Android, WebOS, Windows and Mac OS.

Unify also eliminates the traditional limitations of the web browser and can detect the current geo location, access the file system, etc.

Data URIs, which is a way of using data in-line in web pages, is a great method for minimizing HTTP requests and speeding up websites.

The common usage is simply encoding data (mostly background-images) in Base 64 and including it to the stylesheets.

Spritebaker is a free web application which automates this process for you.

Just mention the URL of the CSS file, it will search for the background-images + fonts (non-local ones) and create a new stylesheet with these stuff converted to Data URIs.

However, don't forget that Data URIs usage isn't perfect yet like the CSS file will grow (you must turn on gzip-compression) or <IE8 browsers will be incompatible. It'll be a good idea to check the suggestions by Spritebaker.

Bazaar is a free version control system for tracking project history over time and collaborating easily with other team members.

Whether you are a single developer or a group of developers (at the same location or working remotely) Bazaar does the job well.

It is an easy to learn and use system which can work on all major OSs. Also, compared to Git and Mercurial, it supports bound branches (an easier and safer way of implementing a centralized workflow).

There are many applications that can work with Bazaar like Loggerhead, a web interface for it or several IDE integrations.

Selectivizr is a JavaScript library that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.

Once included in web pages, rest is done automatically.

The library requires a JavaScript framework to run and many popular ones are supported like Query, MooTools, YUI, Dojo, Prototype and more.

And, if there are multiple JS frameworks inserted in the web page, Selectivizr chooses the most suitable one for the job.

Cached Commons is a repository of many JavaScript libraries that are cached, optimized and hosted on Github's CDN.

It is free for everyone and works by simply using the URLs mentioned (original or the minimized versions) as the script tag URLs.

Compared to the popular Google Libraries API, it hosts a much more number of libraries including many jQuery plugins, visualization or the ones for markup.

The only downside for now is that, there is only jQuery as a JS framework and hopefully, it'll start hosting others soon.