FireFox Advanced Eyedropper, ColorPicker, Page Zoomer

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

New in ColorZilla 2:

• Webpage DOM Color Analyzer
  • Analyze DOM element colors on any Web page and create a corresponding palette
  • Locate elements on the page that correspond to a given color
  • Find out what CSS rules specify a given color
  • Save, bookmark and share the palettes
• Online Palette Viewer
  • Click here for an example
  • Allows viewing, bookmarking and sharing any color palette
  • Provides a permalink URL that represents any set of colors
  • Online Eyedropper shows colors in RGB, HSV and additional formats
• Use Full Page Zoom introduced in Firefox 3
• Firebug support – allows opening the selected element in Firebug
• New languages – Indonesian, Korean, Norwegian. Thanks to the BabelZilla team!
• Firefox 3 support
• Ubuntu support (gcc4 based build included)
• Minor tweaks and bug fixes
• Read more about ColorZilla v2 on this blog post

Install ColorZilla 2 Beta

Excellent Dynamic Chart API by Google

Google is trying to get rid of a lot of an ancient programming problem: generating charts. Mostly you have to install GD or ImageMagick or something similar and all kinds of libaries just to get to one chart! Their API got rid of the overhead and you can start creating your own charts just by providing the metadata required to visualize it.

Parameters are separated with the ampersand (&) character. You can specify as many parameters as you like, in any order. For example, the Chart API returns the following chart in response to the URL below:

http://chart.apis.google.com/chart?
chs=250x100
&chd=t:60,40
&cht=p3
&chl=Hello|World

Where:

• http://chart.apis.google.com/chart? is the Chart API’s location.
• & separates parameters.
• chs=250x100 is the chart’s size in pixels.
• chd=t:60,40 is the chart’s data.
• cht=p3 is the chart’s type.
• chl=Hello|World is the chart’s label.

You can include a Chart API image in an HTML document by embedding a URL within an <img> tag. For example, the following img tag results in the same image as above:

<img src="http://chart.apis.google.com/chart?
chs=250x100
&chd=t:60,40
&cht=p3
&chl=Hello|World
&alt=Sample chart/>

Maxcode by night…

The following types of charts are available:

• Line chart
• Sparkline
• Bar chart
• Pie chart
• Venn diagram
• Scatter plot
• Radar chart
• Map

Click here for the API.

New Server purchased!

Maxcode ‘just’ found her (yes, it’s a she ) home on its her server. I’ll be giving more specifics on how to help test a new maxcode later on this blog.

Well finally, after hours of configuring and editing host files and installing necessary dependencies I got Ruby on Rails working. I’m thinking about using this fairly new technology (v2.0.2) as a basis for the new Maxcode.

What are your thoughts?

Web Developer toolbars of my choice

Since it is hell to make sure your website looks the best in all browsers (from IE5.5 -Opera – FF), I usually use a couple of easy to use but highly effective toolbars.

Web Developer – Firefox extension

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

Download here.

Microsoft’s Internet Explorer Developer’s toolbar

Quite a mouth full, but very useful! Real-time edit the CSS active on your website. Very handy for getting those last pixels on the right spot (don’t forget to make the change in the actual script as well), but this gives you a good WYSIWYG idea of the website. Of course it has lots of other features, just check it out! Click the image below to download the setup.

Which toolbars are the ones to use according to you?

Download here.

Text2PNG Converts Text to PNG with Javascript

Text2PNG provide webmasters with the ability to convert their website headlines and navigations to PNG images automaticlly. The process is very simple and automated, it works by adding a small JavaScript file and selecting which tags to replace. The purpose of their script is to ease editing graphical headlines and navigations. For example, you can change the headline in Photoshop, optimize and save the image and upload it to the server to update a graphical headline, or just change the headline text in your HTML file and the image will automaticlly update.

Some ugly examples from their website are below:

In order to speed up the process of the script, they cache all the image on the browser cache and on the server. Each PNG image expiration is set to ten years from the day it’s created. However, you can always update the images on your site when the content is changed. The new images will be generated and cached again.

You can have a look at the fonts they support. If you would like to use the script in your blog or other content management system, you can use the Font Selection Tool, which allows you to select the font you need for your website easily. You can have a look at the screenshot below.

Requirements: -
Demo: http://www.text2png.com
License: License Free

Layouts based on ‘em’ vertical rythm calculator

Typography on the web has become a point of focus for standards based developers recently. One of the key concepts that we can use within our sites is consistent line-height in CSS terms. If you think of a ruled notebook, the lines are all equal heights.

The concept is fairly straight forward but in practice can be confusing especially for a CSS newcomer. All sizing needs to be relative to the base size. This allows for easy scaling up or down while keeping the required spacing and layout consistent, this can be refereed to as an elastic layout. To allow this we need to specify measurements in percent or em. Em calculator save you the hassle of all of those calculations.

Requirements: -
Demo: http://www.jameswhittaker.com/blog/article/em-based…
License: License Free

Taking screenshots the ScreenHunter way

Click here to get the setup of my favorite screen capture program. The free version works like a charm! It supports GIF, JPG, and BMP as output to both your clipboard and a file.

Microsoft’s Surface PC

Ever thought of this? A PC with intelligent multi-touch screen in your table, the possibilities are endless! Great innovation done by Microsoft, hopefully these will be available to the consumer soon. The surface PC is already being used in casino’s.

Really easy field validation using AJAX

Really easy field validation from Dexagogo has implemented a solid form validation API. The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.

The validator also avoids validating fields that are hidden or children of elements hidden by the CSS property display:none. This way you can give a field the class of ‘required’ but it’s only validated if it is visible on the form. The demo illustrates this.

Requirements: Any Modern Browsers with Javascript Enabled
Demo: http://tetlaw.id.au/upload/dev/validation
License: MIT License

Uni-Form for Standard Form Markup

Uniform is trying to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.

Plug and play style. Download the uni-form.zip and you’re pretty much all set! It is encouraged to edit css properties only in the uni-form.css file, so you can easily upgrade to the newer versions as they come along by copying over the old copy of the uni-form-generic.css.

Requirements: IE6+, Firefox 1.5.x+, Opera9.x+, Safari, Konqueror
Demo: http://dnevnikeklektika.com/uni-form/
License: Creative Commons License