Sofa love to create beautiful things. They worked on Aristo, the the open source theme that came from Cappuccino, but has also been picked up by jQuery UI and others.

This time around Sofa has created a simple purpose Mac application called Kaleidoscope that allows you to visualize diffs for both text docs and images.

The Website for this tool is so well done, that I feel compelled to click buy even before downloading the free 30 day demo :)

With Image Scope, you get a tool that can enable some BrowserLab-esque work, as well as diffing any old images.

With Text Scope, you get a nice looking diff viewer that integrates with your VCS workflow.

Nice work on creating something that you *want* to use guys.

This is fantastic news. A lot of people were claiming that O3D was going to beat WebGL because of performance. Then the O3D team showed that the two could be complimentary, and they have taken the next step on that journey. As of today, O3D will stop being a plugin, and will become a JS library on top of WebGL. This is fantastic, as we need a nice API on top of the OpenGL-y WebGL library.

Here are their thoughts. Congrats to the O3D team, to the WebGL folk, and to the future:

We launched the O3D API about a year ago to start a discussion within the web community about establishing a new standard for 3D graphics on the web. Since then, we’ve also helped develop WebGL, a 3D graphics API based on OpenGL ES 2.0 that has gradually emerged as a standard, and is supported by other browser and hardware vendors like Mozilla, Apple and Opera.

At Google, we’re deeply committed to implementing and advancing standards, so as of today, the O3D project is changing direction, evolving from its current plug-in implementation into a JavaScript library that runs on top of WebGL. Users and developers will still be able to download the O3D plug-in and source code for at least one year, but other than a maintenance release, we plan to stop developing O3D as a plug-in and focus on improving WebGL and O3D as a JavaScript library.

We did not take this decision lightly. In initial discussions we had about WebGL, we were concerned that JavaScript would be too slow to drive a low-level API like OpenGL and we were convinced that a higher level approach like the O3D scene graph would yield better results. We were also cognizant of the lack of installed OpenGL drivers on many Windows machines, and that this could hamper WebGL’s adoption.

Since then, JavaScript has become a lot faster. We’ve been very impressed by the demos that developers have created with WebGL, and with the ANGLE project, we believe that Chromium will be able to run WebGL content on Windows computers without having to rely on installed OpenGL drivers.

The JavaScript implementation of O3D is still in its infancy, but you can find a copy of it on the O3D project site and see it running some of the O3D samples from a WebGL enabled browser (alas, no Beach Demo yet). Because browsers lack some requisite functionality like compressed asset loading, not all the features of O3D can be implemented purely in JavaScript. We plan to work to give the browser this functionality, and all capabilities necessary for delivering high-quality 3D content.

I was really excited to be at JSConf at the weekend where Matt McNulty announced Ares going 1.0 in our session. He promptly went on to do demos that show how easy it is to create mobile Web applications in the tool. You can follow one of these tutorials and Matt kindly put together a walkthrough of how easy it is to build a GPS enabled app in a few lines of code:

(Click here to see it larger).

If you tried Ares first time around, take another look. There are a lot of new features, and you can catch up all of what’s new. Really glad to see the flushing out of components and sensors, and after enjoying CSS layout for many years, I love what the Ares crew have done with layout.

Components:

• Ares now has Components, which are widgets that provide functionality, but without any user interface. The palette now contains the service calls, sensors, etc that are in the webOS SDK.
• Components can be drag-and-dropped onto the canvas, where they will show up as icons across the bottom of the screen. They can be selected and configured in the property inspector, and then called in a single line of code.
• Inline help – When a component is selected on the canvas or view tree, the last tab of the property inspector will show jsdoc-style inline help for that component, so you can see what you can call on each component.
• For example, you can drag out a camera component, and in the ontap handler of a button, type this.$.camera1.execute(); to launch the camera in your app!
• See the 1.0 tutorial to see how easy it is to create an app that connects to phone services using components.

Designer Ergonomics

• Undo and Redo in the interface builder!
• Cut, Copy, Paste in the interface builder!
• New shortcut buttons to swap between the designer and code assistant for a given scene
• Improved support for drag and drop between panels and at the top and bottom of the canvas

Find and Replace

• Find and replace within a file
• Find and replace within multiple projects, complete with filters for which projects

JSLint Integration

• JSLint feedback is now integrated into the code editor
• New JSLint "Monitor" feature will provide feedback on your code as you type continuously

And lots more…

• New FeedList widget for RSS feeds
• Google Maps v3 wrapper widget for including multi-touch enabled maps in your applications
• Left and right panels can be hidden/shown with a single click on their arrows
• Unified spot in the UI for Find and Replace, JSLint, Debugger, and Log Viewer
• Improved Debugger functionality, including viewing all variables in scope in a tree control, updated as you step through your code
• Code beautification in the code editor
• Lots of bug fixes

My favourite Tweet about Ares showed up yesterday:

What would you like to see in a tool that helps you build great mobile Web applications?

Ryan Stout (of BustaName fame) has created ExceptionHub, a place that holds JavaScript exceptions from your apps, for you to peruse.

In an attempt to make error tracking easier in JavaScript, we are releasing exceptionhub.com into beta. ExceptionHub lets you drop a few lines of code into your site and it will track all errors that occur on your page and provides you with a clean web interface to view the exceptions from. Similar exceptions are grouped together and you can see what browser and operating systems the errors occur on, as well as the page where it was triggered. Perhaps most useful of all, ExceptionHub gives you a full stack-trace of where the error happened and the functions leading up to the error.

ExceptionHub is designed to be run both in development and on a live site. Running ExceptionHub on a live site can keep informed of any broken features or browsers that don’t handle your JavaScript correctly. While it doesn’t replace testing, it does help bring peace of mind that your site is running correctly.

As the video above shows you, a snippet of code will trap exceptions and send them to exception hub, which can show you information on the error, as well as info on the user agent that caused it.

Great stuff, and a great beta. What else would you like to see?

Create an interactive Console to help web developers understand everything that happens during the creation of a web-page. Console entries will be time-stamped objects representing errors, network traffic, javascript events, DOM/HTML mutation and logging output. The Console will also have an interactive command line for evaluating javascript against the current webpage and an interactive Workspace window for entering and evaluating larger blocks of code.

For web-developers, the Console should include a logging API and a richer interactive environment for executing live javascript against the active webpage.

The Console should fully-replace the existing Error Console window.

Check out the milestone releases to see some of the fun stuff coming.

• HTTP traffic observation and logging
• DOM Mutation event logging
• W3C Timing Spec

Nice work!

Kevin Decker is an engineer on my team, and has worked with border image in this context, as well as on Firebug (another place that you get this luxury…. extensions). Border image is fantastic compared with the slew of images hacks that we have had to do in the past, but it can be hard to visualize what you are doing.

This is what Kevin felt too, and to solve it he hacked up a border-image generator tool that gives you a WYSIWYG editing experience that generates the cross browser CSS for you. Take an example and start to tweak the offsets and see the live image change on the fly.

You can also check out the project on GitHub.

Piotr Zalewa has created a really great playground, jsFiddle, for testing sample code and playing with the Web. With an area for the holy trinity of the Web (HTML, CSS, JS) and an output region, you can get right to hacking.

It goes beyond this though. You can also add resources, an Ajax echo backend, and auto load from a slew of JavaScript frameworks.

You can also check out the examples and see great stuff such as Processing in action.

And the finishing touch, share and embed.

Piotr wrote all of this using CodeMirror and MooTools. Nice! Having worked on Bespin, and developed a playground like this (looking forward to show a new mobile one soon!) I appreciate the work!

and it generates an HTML structure like this:

You can check out a demo or try out support in various editors (Aptana to TextMate).

Now I want to create a Bespin plugin to do this too!

Joseph Pecoraro has made some major improvements to Web Inspector.

It is now much easier to create and much around with the content. Create new CSS selectors with ease; Add content in-line with elements; see color representations of any value.

And, there is more:

DOM Storage
The DOM Storage DataGrids now displays live updates. You don’t need to manually refresh every time something changes. Also you can create, edit, and tab through the keys/values. Double click any open space to start creating a new value. Catching on to a theme with my updates? Overall this makes working with DOM Storage just a little more developer friendly.

Cookies
This was the first feature that required me really digging into WebKit’s source, including touching all platforms. With the help of WebKit developers I eventually added support for viewing all cookie information (secure, httpOnly, etc) and deleting cookies for the Mac. All other platforms were able to display basic cookie information available through document.cookie.

Event Listeners
Not having the ability to enumerate the Event Listeners via JavaScript has plagued me, and most likely plenty of other developers, for a very long time. This made viewing Event Listeners an excellent candidate for an Inspector feature.

The implementation as it stands now has some great functionality. There is a new sidebar pane when you inspect an element in the Elements Tree Hierarchy. If the current Node has registered event listeners there is a separate section for each type of event registered (click, mouseover, etc). Within each of these lists is a display of all of the event listeners in the entire event flow for that type. That means you see all the Capturing Event Listeners followed by the Bubbling Event Listeners in the exact order that they execute and on which nodes they are registered.

Natural Sorting of Properties
Who counts “1?, “11?, “12?, “2?, “3?, etc. Certainly nobody I know! So, I implemented a variant of the alphanumerical sorting algorithm for properties when they are displayed in the console. Now you get a much more natural ordering!

Syntax Highlighting

JSON and CSS syntax highlighting is now there.

These are not nearly all of the new features in the Web Inspector. These are just the ones that I worked on and contributed to. To name some other features there are Scope Bars for the Console and Resources Panel, the ability to view Request and Response HTTP Parameters for Resources (great for debugging AJAX), Resource Status Code indicators, complete Serialization between the inspected page and the inspector, and more.

Thanks Joe!

The session description is:

For many years, developing for the web left quite a bit to be desired when it came to the tools at developers disposal, particularly in comparison with the sorts of development environments available for desktop applications.

But the rise of browser native tools, in Safari, Internet Explorer and Opera, browser based add-ons like Firebug, web based tools and more mean that developers have a vast array of powerful tools to help develop, debug, profile and otherwise improve their applications. But, just what’s out there? And what can be done with them?

In this session, co-founder of Ajaxian.com, and The Ajax Experience conferences, and now head of Mozilla Foundation’s new Tools team Ben Galbraith will take us on an expedition through the developer tools landscape. Learn what’s out there, and what they can do to make you more productive, your sites and applications better and faster, and your life as a developer more enjoyable.

Listen in to the audio recording of session, and check out the other talks from the event.

Aaron Conran has published a new preview of Ext JS Designer which includes the new features:

• Duplicating Components
• Transforming Components
• Undo/Redo
• Configuration Searching
• Auto Updating
• Screenshots

It is a great time for new tools popping out with Atlas coming along nicely too.... and a couple more being hacked on. Open Web Tools FTW! :)

Our Webmonkey friends have featured Opacity, a vector image manipulation tool that has a couple of features that are interesting for Web developers wanting to do HTML5-y things:

To use the new source code feature in Opacity, simply design your vector-based graphic or animation sequence and, once you’re happy with it, head to the Inspector menu where you can use what Opacity refers to as “Factories” to export your image in various formats. To get Canvas-based source code, chose Source Code for the format and Canvas (JavaScript) as the language.

We should note that there are other tools around that can do similar things with just an image file — such as Alistair MacDonald’s Burst engine, which can take SVG animations and convert them to JavaScript objects that are rendered inside of a <canvas> tag.
Opacity is a Mac OS X application and costs $90 — not cheap, but cheaper than than Adobe Illustrator. There’s also a lighter version known as Opacity Express, which still has the code export option, but lacks some other features and retails for $40.

Nice to see tools embracing the new technology. Of course, the devil is often in the details... specifically how good the code is (We all remember the old Frontpage days!) Inkscape is another example, that embraces SVG.

FireCrystal is a Firefox extension that helps designers and programmers alike figure out how interactive behaviors on the web work. FireCrystal allows users to record and rewind their interactions with web pages while showing the relevant code.

punypng is serious about image compression -- it handles 8-bit PNGs, 24-bit PNGs, JPEGs, GIFs and animated GIFs. It also leverages dirty transparency techniques to further optimize transparent images beyond what typical compressors like pngcrush can handle.

Features

• Fully supports for PNG, .GIF, .JPG
• Clear affordances for # of bytes saved (as well as being pretty bar graphs)
• JPEG Compression — punypng doesn’t leave JPEGs out in the cold.  JPEGs are analyzed to see if a compressed PNG format is better (ex: JPEGs with heavy solid areas benefit from this).  But if not, don’t despair, punypng is backed with jpeg-tran and jpegoptim for further JPEG optimzation.
• “Fire-and-forget” batch processing: You can upload up to 50 files in a single session.  Optimized versions are clearly labeled, and if no further optimization can be made to the uploaded file, you get the original back untouched.  After you upload a batch, you can go ahead and upload another batch without having to reload the page.
• Download batch jobs as a single time-stamped ZIP.
• See the changelog for future updates

More info

• Blog post on launch
• Side-by-side comparison
• Dirty Transparency Support

Ray Cromwell had an informative note (as per usual):

Also add AdvancedCOMP's superior-than-zlib/gzip compression which they don't appear to be using.

Kangax stumbled upon a blog post by Remy Sharp on detecting global variable leaks. He took that work and updated it a little to filter out Prototype, Script.aculo.us, Google and Mozilla globals.

If you want to add sets it is easy to do so... go fork away. The bookmarklet itself is here.

Of course:

It’s worth mentioning that JSLint already allows detecting undeclared assignments, but JSLint can hurt feelings so we won’t use it. Well, actually JSLint performs so many validations, that it’s not always possible to detect undeclared assignments in huge scripts of legacy applications (like the one I wanted to examine). Running a test such as in this bookmarklet can be “applied on” any script.

Chris has more:

I looked at the work of Robert Penner, since it seems to have become the gold standard for motion curves. Nice stuff, and it inspired me. I wanted to see if I could take things a step further – ratchet it up a notch. What I ended up with is something I’m quite pleased with for a first pass at approaching this problem.

My work deviated from Robert Penner’s in a number of respects:

1. It became clear to me quite early on that I didn’t want to implemented the resolved ease-out and ease-in-out versions of the easing equations for all the different types of curves, so that got me going down the path of creating curve function modifiers, in this case to take an ease-in curve function and spit back out the ease-out and ease-in-out variations.
2. While I was at it, I decided, what the hay, let’s make an alternate version of the ease-in-out – I call it the ease-in-the-middle variation, because it swaps the ease-in and ease-out phases around so that the easing is in the middle of the curve. It was cheap, and the ease-in-the-middle curves may be compelling in some use case.
3. And then, what the hay, why should you only get quadratic, cubic, quartic, and quintic easing – why not have arbitrary power curves. So I did it! Say hi to easeInPow, easeOutPow, easeInOutPow, and powRightInTheKisser (ok, the last one’s a joke for Family Guy fans – you know who you are).
4. It became clear that I didn’t want curve functions to be value interpolators – merely 0-to-1 value remappers. You can do a lot with values in the range of 0 to 1, in terms of using them as blend ratios, or scaling factors. This alleviated the burden from every curve function to have to do the interpolation calculations. More importantly, though, it improves performance when you’re using multiple curve functions together to compose new curve functions (we’ll get to that in a moment), since they aren’t all redundantly re-performing the same interpolation many times over.
5. I wanted to be able to use curve functions as units, to be easily recombined to form new curve functions – treating them almost like simple values and involving them in operations with function operator methods. So, I introduced the concept of curve function modifiers. This got my juices flowing, and I was soon conjuring up interesting things you could do when you can operate on curve functions – like mixing two of them together in equal amounts, or bending them horizontally or vertically, or repeating them, or quantizing them, or redrawing them, or multiplying them, or just generally doing unspeakable things to them.
6. I liked a lot of what Robert Penner did, but I wasn’t thrilled with his bounce curve. I wanted more bounce. And more bounces. And crazy sh*t, like controlling the shape of individual bounces (because I can get downright insane when JavaScript inspires me). So, I started with a fresh slate and implemented a parameterized bounce curve function generator, where you can control number of bounces, bounce peak curve, bounce width ratio, and bounce curve. Needless to say, I needed plenty of coffee to stimulate my math gland.

So, back to the Curve Explorer tool. As it turns out, it’s fun to play with curves – especially if you can see them plotted as you tweak parameters, or see how they affect motion with an animation, or what they look like as a color gradient. From the tool you’ll see what I mean as you peruse the list of preset curve expressions that I threw in there. My particular favorites are some of the bounce curves, like “third time’s a charm”, “super bouncy”, “fast thud”, “jumping bean”, and then some of the complex curves that use curve modifiers, like “wobbly easeInOutPow”, “pull and release elastic”, “coin settle effect”, “bounce down the stairs”, and “shutters slamming”. But they’re all fun, really.

Over at the Mozilla Labs blog, we just launched an "Open Web Tools Directory". Running Ajaxian for the past few years, we've discussed a legion of developer tools of all shapes and sizes, but there are so many we've quickly lost track of all that's available.

With the Tools Directory, we hope to provide a central location where the community can track what's happening in the tools space. At Mozilla, we release early and often in the open-source tradition, so what we've launched is the first step in the journey. We'd love to get your feedback in this early stage as we evolve the directory.

We've got nearly 70 tools in the database so far, but that's just a small fraction of the hundreds of tools out there. Would you help us out and tell us about your favorite tool(s)? (We're still working out infrastructure, but eventually we'll have a way to own a tool and keep its metadata up-to-date. And our sincere thanks to Laura Thomson who worked very hard to help us get the infrastructure and back-end for the directory ready.)

Dion and I both have some corporate IT experience under the belt, and because of that we just couldn't bring ourselves to write yet another typical table-based database CRUD app; hence, the space theme and gratuitous canvas-based UI. So the Tools Directory is our second canvas-centric web application released this year, but we promise to use the DOM API more for the next one. ;-)

Implementation Details

We knew we wanted to do some kind of space-themed design for the directory involving images for the tools flying around, but we weren't sure how much performance we could get out of canvas. Some of our previous experiments have shown that we can repaint a large canvas many times per second, but how many individual images could we paint per frame full-screen and still get decent perf? This experiment, representative of several we whipped up, was somewhat promising: we're able to draw and scale about 700 images about 20 times per second.

Based on these results, we thought we could get away with a "warp-in" effect flying in maybe one or two hundred images and get decent frame rates. To make the effect somewhat predictable, we based the animation effect on clock time with the result that it drops frames rather than alters the speed of animation when the browser can't keep up with the requested workload.

Unfortunately, once we implemented the effect, we discovered that we started to get choppy performance with only forty or so images (all of our tests are using recent-model MacBook Pros running OS X and Firefox 3.5 or Safari 4). Our test images were 32x32, but once we switched to 128x128 images, performance suffered dramatically. We haven't looked into it further, but the degradation may be linear according to image size.

We had always planned on caching aggressively, but these results indicated just how much caching we'd have to do: lots.

So we implemented the directory in such a way that at any time, we can cache the state of the canvas animation and exclude arbitrary elements from the cache. This is how we implement various features like selecting a subset of the items and moving them to the center of the screen when you search the directory, for example:

We also added a staged introductory fly-in effect where only a subset of the tools fly in and we cache the screen state and then fly in others, keeping the overall number of items to animate low--but the effect is presently disabled. Look for it in a future release as we expand the catalog of tools further. We'll have to work something out because flying just 70 items at once produces choppy animations on the fastest hardware using the fastest browsers available.

For the time-based animations, we implemented a simple timing framework. We wanted to grab an off-the-shelf library, but of the half-dozen JS animation frameworks we analyzed, all of them assumed we were animating DOM nodes or changing single object properties, which made their use somewhat obtuse. We really just wanted a simple callback for each frame in the animation. (We also grabbed the GX framework's easy-to-grab ports of Robert Penner's easing equations.) We'd love to replace our timing framework with something more sophisticated and actively maintained; let us know if you've got something we can use. In particular, we'd like a framework that intelligently reports the minimum resolution required by all currently scheduled timing jobs.

On that note, the other interesting bit for us was working out how often to repaint the canvas. After experimentation, we settled on using setInterval to repaint the scene every 20 ms. This has the unfortunate side effect of hitting the CPU rather hard during the animations and so forth.

Future

We're really excited to add a bunch of community features to the directory. We want folks to vote on tools, comment on them, submit and maintain them, and so forth. But in addition to that, we want to enable sub-universes; e.g., we want to track plug-ins for tools like Prototype, jQuery or Firebug so you can explore those universes within the framework of the overall directory. And if there's interest, we'd love to make it even more general and release the "universe browser" framework for anyone that wants to use this interface to explore taxonomies.

On a technical note, we're really keen to see how the DOM would perform relative to canvas, and how 3D approaches (e.g., using Mozilla Firefox and Google Chrome's 3D support) work out. Oh, and we're going to release an accessible, non-graphical version of the directory soon as well.

Please tell us what you think, and we hope all of us will be able to make use of this framework to help keep track of the exploding universe of web developer tools. Thanks!

Andrea Giammarchi had his own post on encodings in a different way.... as he talked about
en-code which you can check out in action here on the page that lets you do simple encodings, especially for source code, in short order.

Over the years we are have mentioned many Firefox, and Firebug plugins to aid us Web developers. Wouldn't it be nice to subscribe to a bundle of these tools? The Firefox Add On team has now given us that ability with Add On Collections:

Today, we’re excited to introduce a new feature to our website that will expose the niche add-ons that can be hard to find, and gives users a more active role in helping outstanding add-ons bubble to the top. One thing we’ve learned as add-ons have grown in popularity over the years is that once a user finds an add-on they love, they become a fan for life. We see this all the time as people recommend add-ons to their friends and write great reviews.

You will notice the Web Developer collection that features:

• Tamper Data
• YSlow
• MeasureIt
• ColorZilla
• ShowIP
• Greasemonkey
• FireFTP
• Pixel Perfect
• Web Developer
• Firebug
• Live HTTP Headers
• FoxyProxy

What is missing? What should be on the list?

Test Drive the latest Thusnelda theora encoder with in-browser Video Encoder Firefogg.

Firefogg is an open source extension written by xiph hacker Jan Gerber that lets web developers request ogg video from their users. Since Firefogg is a Firefox extension it allows users to stay up to date with the latest and greatest theora encoder improvements. Firefogg supports a rich api for enabling web applications to drive in-browser transcoding from any source footage to ogg theora video (and possibly other free formats in the future). Firefogg supports simultaneously uploading while its transcoding via resumable one meg post chunks. It also supports fall-back to HTTP POST all-at-once. Both methods include progress indicators.

Firefogg can also encode to a local file and an example local transcoding application is on the site. The sample application builds on jQuery UI so it supports custom themes. Integration for firefogg with wikimedia commons are in testing. With Firefoxs video tag support this should be a helpful extension for converting video to ogg theora or supporting ogg theora video contributions in your website.

Firefogg can minimize the need for costly server side transocding infrastructure. It also helps avoid the extra transcode problem that plagues net video where a user saves to a compressed format locally to save time uploading; then the server re-transcodes the video so others can view it with a flash plugin. With Fireofogg we can go strait from the high quality source to the format distributed on the web site.

Here is an example of using the API yourself to convert video: