Description: HTML Formatter can instantly format unstructured, messy code into an indented, cleaned-up logical structure. It can process a wide range of code types including HTML, ASP, PHP, Smarty templates, XML, and Coldfusion.

If you write code you already know how important it is to have a clean, organized layout. This can not only make your code more intuitively readable (by you or someone else), but can also have an esthetic, pleasing angle as well. The problem, of course, is that formatting and cleaning up code can consume a lot of time; wouldn’t be simply perfect if there was a tool that could simply read your code, figure out its logical structure, and format and clean it up for you? HTML Formatter is precisely such a tool.

I’d previously written about GUI Tidy, a frontend for the very well known HTML Tidy. A quick comparison between the results obtained after running a snippet of messy code through that tool and through HTML Formatter showed the latter clearly superior. While GUI Tidy’s output had broken links and the occasional unformatted clutter strewn about, “HTML Formatter” re-structured the code almost perfectly. And although I only occasionally write code you do not have to be a programmer to see, at a glance, the improvement that this program can lend to messy code.

Here are more notes on this program:

• How it works: you can drag and drop a single file, multiple files, or entire folders on the program icon for processing. HTML formatter will then save re-structured versions of your files with “_Indented” added to the file name. This program has no GUI (or user interface of any kind, for that matter).
• Customizable: you can edit a config file in the HTML Formatter folder in order to manipulate some of the program settings (e.g. what part of the code and which tags gets processed).
• Structure: indents code, supports nested divs/nested tables, adds missing tags, formats your code and gives it a logical structure.
  Read more »

Description: PicLens is a free browser extension for Internet Explorer, Firefox, and Safari that interacts with a number of the most popular image sharing sites to provide a seamless, full-screen "immersive slideshow" experience. Sites supported include Google Images, Yahoo Images, Facebook, Friendster, Flickr and Picasa Web Albums. It is also possible to embed PicLens immersive slideshows within your own site or blog.

This program is a little bit hard to describe: imagine that you’re browsing, say, Flickr, and that you are looking at a page full of thumbnails. Normally what you would do is click on the thumbnail and view the image, go back to the page with the thumbnail and click on the next image and so on. What PicLens offers is an alternate way of viewing the images that literally "takes over" and overlays itself on top of your browser window; your images will be displayed full screen and all thumbnails presented in a horizontal sequence that is quickly browsable on the bottom of the screen.

• How it works: whenever you are surfing on a site that supports PicLens, a little distinct arrow will appear on the image thumbnail when you mouse over it which signals that the images are browsable with PicLens. Clicking on the arrow will activate the PicLens image browser, while clicking on the thumbnail anywhere around it will open/display the image as normal. (See second screenshot).
• Browsing with PicLens: you can use the mouse or arrow keys to scroll through the images, as well as the navigation arrows to move/jump back and forth.
  Read more »

Description: ’Starred Items’ are a feature of Gmail and Google Reader designed to give you quick access to these items. What you might not know, however, is that it is possible to broadcast your Google Reader starred items into their own RSS feed that you can share with friends or display locally on your desktop, or even use them in a Widget within your site or blog. This posting is a step-by-step guide on how to do this.

The screenshot above shows the starred items from one of my Google Reader accounts displayed in an RSS widget on the desktop (using Klipfolio). It also shows what the widget will look like when you publish it on your site.

To begin with I will assume that you (a) have a Google login and (b) that you are using Google Reader to read your RSS feeds and using the ’starring’ feature to denote those RSS articles/posts that you are interested in broadcasting).

First you have to make your ’Starred Items’ list public; the steps to do this are as follows:

1. Click on the ’Settings’ link in Google Reader
2. Click on the ’Tags’ tab
3. Check the box next to “Your Starred Items”
4. In the ’Change Sharing’ dropdown, select “public” to make the Starred items public.
5. Click on the ’view public page’ to view your very own webpage where your starred items can be viewed.
   Read more »

Rating: 5

Version tested: the site as of 9/18/2007

Description: Feng GUI Viewfinder Heatmap is a free web service that uses an artificial intelligence algorithm to emulate human eye movements and generate heatmaps for websites and images. It allows you to define a URL or upload an image and then superimposes a heatmap on it which displays the ’hot spots’ on the image or URL that the human eye will gravitate to.

This service can generate heatmaps that web designers, designers, or visual artists of all kinds can use to get an insight as to the areas and/or design elements in their images or websites that the human eye automatically gravitates to. Here are some notes on this:

• What is a heatmap: colored, semi-transparent areas superimposed on an image or snapshot of a website that identify the areas where the eyes gravitate to or tend to linger using warm/reddish colors and other areas less likely to attract attention using cooler bluish colors (with green as the middle).
• Usage: enter a URL address in the designated box or click the upload button to upload an image. After that all you have to do is click the ’Heatmap’ button to see the result.
• The Technology: the service employs the neuroscience concept of “saliency” and claims to “simulate human visual attention and create an attention heatmap”. From reading the site and blog you get the feeling that there is a high degree of confidence in the validity of generated results (i.e. that the modeling and the concepts are well established and accepted). There isn’t much information with respect to verifying the generated results or comparing with heatmaps made through actually observing the eye movements of human subjects. Face and text detection is promised but not employed yet. Read more »

Rating: 5 pick

Version tested: 4.1

Description: ColorPic is a free app that allows you to pick any color from the screen and displays its code in HEX and decmial. It features a versatile color mixer and the ability to create and save color palettes. It also offers a number of others functions such as a customizable magnification area and the ability to snap to the nearest websafe color.

Most people working with websites and/or with design will invariably need a “color picker” program that can identify the color code of any pixel on screen. There are many such free programs, but of all that I have tried ColorPic is by far the best. Here’s what I like about it:

• Allows you to store captured colors inside pallets which you can come back to later (to the tune of 16 colors per pallet). You can create as many of these as you like.
• Snap to nearest websafe color: once you grab your color a little “websnap” button will appear close to its code on the ColorPic interface. Clicking on this will snap to the nearest websafe color. Very cool.
• Magnifier: this is available as part of the ColorPic interface. You can increase/decrease magnification or overlay a grid.
  Read more »

Rating: 5

Version tested: 1.0

Description: View Source Editor is a tiny program that allows you to change Notepad from being the default editor when using IE’s “view source” function, and to replace it with the editor of your choice.

If you build, work with, program, or design websites then you’ve likely used IE’s “view source” function dozens of times to look at the code that is generating a web page. IE will typically open Notepad as the default text editor when you do this, which in many cases will prompt you to launch your preferred text editor then copy-and-paste the code into it before honing in on what you are looking for or working with the code.

View Source Editor will help you circumvent this unnecessary step. You will likely run this no-install program just once (or every time you decide to switch text editors), point it to your text editor, and be on your way. Its just a small thing but, as they say, the devil is in the detail!
Read more »

Rating: 5

Version tested: 3.0

Description: Post2blog is a WSIWYG (what you see is what you get) blog editing and publishing software with advanced features such as a full featured word-processor-style editor, advanced image and table handling options, and live spelling checker and thesaurus. It supports a few dozen platforms including WordPress, Blogger, Typepad, Movable Type, and LiveJournal.

I first started using this program about 3 months ago when it was featured on the ’Giveaway of the day’ site. Since then I’ve used it to publish my Freewaregenius postings as my program of choice. I was therefore delighted to find out that Post2Blog was just released as freeware.

But let me back up a little bit: I’ve tried out around 5 or 6 freeware WSIWYG blog editing programs, and the two that stand out significantly from the rest (and the only two programs that handled Wordpress’ split post correctly) are Post2blog and Microsoft’s slick Windows Live Writer. Here are some noteworthy features that Post2Blog offers:

• Advanced WSIWYG editing: the full featured editor includes comprehensive editing options as well as support for tables and emoticons. I might mention the ’remove formatting’ option (Shift-Alt-R) which I use frequently. Note that all functions are hotkeyed for easy access. Edit offline and post whenever you are ready.
• Advanced image support: upload and format images (including creating thumbnails to custom resolution, adding captions, resizing the image itself, and adding shadows). Also supports uploads into Flickr and other online image resources (imageshack.us, picturelli.com, as well as FTP).
  Read more »

Rating: 5

Version tested: 2.4

Description: Namu6 is a WYSIWYG (what you see is what you get) website creation and editing tool that can be used by anyone without any HTML or coding knowledge required.

I will start by saying that this is a beautifully designed program. Whenever I review programs like this I expect to spend a few days working with the program, reading instructions and going through tutorials before I can come to grips with it and/or get to a point where I can start generating results; Namu6 was so intuitive and so simple to use that I was a bit taken aback. As an added bonus it does a very competent job creating websites too.

Here are some notes on this program:

• The user interface: simple and uncluttered. There are a number of controls on the toolbar but you will not use these much; 90% of your interactions with this program will consist of selecting an element on the page and right-clicking to prompt a context menu that is relevant to the element you are working with. These menus are very well organized and somewhat sparse, but they manage to deliver most of the functionality that you need.
• The website theme: Namu6 will have you design a theme for your website (i.e. what the top banner will look like and how it will be formatted, what the text headers and different borders will look like, etc.) Once this is in place it applies to your website as a whole; i.e. the look and feel you create will be preserved across all pages. On the one hand, this makes your website consistent throughout, and the site will not be a mess of different colors and fonts. On the other, though, it also makes it very difficult to create different pages with custom looks and/or styles. Note that the program comes with a number of built-in themes and a you can download more from the website.
  Read more »

Rating: 5

Version tested: 1.05

Description: HTML GUI Tidy is a graphical user interface for HTML Tidy, a program that automatically optimizes HTML/PHP source code and fixes a number of common problems. It also arranges code so as to give it a reasonable indent-style layout.

I am not a programmer nor a developer, but ever since starting Freewaregenius I have learned a bit of HTML and occasionally found myself having to change, modify, and/or add countless parts of code. At times I would need to do something that was over my head or would have a problems with my site that would lead me to seek the help of our hotshot programmers at work. Typically, the first things these guys would go is dump my code into their favorite text editor then proceed to fix the visual layout; separating chunks of code, inserting and maintaining a hierarchy of indents and margins that just made the code look good and comprehensible. They then will go down the code removing unneeded code and checking for beginning and end tags to make sure all of these are present and correctly placed. In most cases, this exercise alone would either solve the problem or at least make it apparent what it was.

What GUI Tidy/HTML Tidy promises to do is essentially the exercise above. It will allow you to dump your code into the ’originial code’ tab, process it, then generate a new code inside the ’optimized html’ tab with the implemented corrections and optimizations. This tab also contains a third window that contains errors and information on where in the code they were found.
Read more »

Rating: 5

Version tested: 2.2.15.31

Description: Free Monitor for Google is a small app that checks the natural search rankings of a URL (or multiple URLs) in Google for a list of user-defined keywords. For each keyword it can show a reference list of the top Google site results.

Here’s what you need to know about this program:

• This program will try to find your URL in the top result rankings for each of your keywords. The number of results it will search and display is user defined (i.e. you can tell it to look in the top 10, 20, 30 results etc).
• It will allow you to work with an unlimited number of keywords.
• For each of your keywords, Free Monitor for Google will remember the best ranking attained. It will also display a little up arrow, down arrow, or neutral arrow to show movement in ranking from the last time the search was conducted.
  Read more »