Thursday, July 2nd, 2009
Paul Baukaus linked to jsescape, a little form that shows escaping and unescaping across a number of encodings.
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.
Wednesday, June 10th, 2009
Category: Debugging
, Firefox, Utility
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:
What is missing? What should be on the list?
Monday, June 8th, 2009
Test Drive the latest Thusnelda theora encoder with in-browser Video Encoder Firefogg.
Firefogg
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:
Friday, June 5th, 2009
Category: Google, Performance, Utility
Richard Rabbat and Bryan McQuade have introduced a new tool called Page Speed that is a fully open source (e.g. it has a public bug database, process for accepting code contributions, roadmap, etc) performance Firebug plugin:
Page Speed is a tool we've been using internally to improve the performance of our web pages -- it's a Firefox Add-on integrated with Firebug. When you run Page Speed, you get immediate suggestions on how you can change your web pages to improve their speed. For example, Page Speed automatically optimizes images for you, giving you a compressed image that you can use immediately on your web site. It also identifies issues such as JavaScript and CSS loaded by your page that wasn't actually used to display the page, which can help reduce time your users spend waiting for the page to download and display.
People will obviously compare it to YSlow (I wish they called it GFast ;) but there are some differences beyond the fact that it is Open Source which will hopefully allow a community to grow:
A must see performance tool to add to your belt. You can check out all of the rules and enjoy the tool!
Wednesday, June 3rd, 2009
Jan Odvarko of the Firebug team has created a new plugin and site that allows you to export data from Firebug in the HTTP Archive Format and then also view the JSON data via a HTTP Archive Viewer.
The format will look a little like this:
Hopefully we will see other tools sharing the same format so we can go in between!
Tuesday, June 2nd, 2009
John Allsop has created a very cool CSS gradient exploration tool that lets you get the gradient you need, with the resulting sample and code right there.
You could use it to do what he did, and recreate the Apple navigation bar in pure CSS instead of using images.
John didn't stop there, and has already created tools for Box Shadows Shadows and Radial Gradients.
Friday, May 22nd, 2009
Category: Debugging, Firefox, Utility
Robert Nyman has a new Firebug extension called Firefinder.
The idea is to quickly text CSS selectors/XPath in a document to see what will match, or how many instances of a certain element there are (thinking certain type of heading, for instance).
It offers:
Thursday, May 14th, 2009
Category: JavaScript, Utility
Jens Schmidt pointed us to an interesting project by "Mu Dynamics Research Labs" called p4js:
p4js is a monadic parser library that provides the basic monadic operators return and bind
The announcement blog post explains some of the motivations behind the project:
After exploring Haskell for some time, I find myself often adopting functional concepts in my daily work. The exposure to functional programming has even affected the set of tools and frameworks I use. For example, having to parse a custom data format I first tend to search for a Parsec clone implemented in the currently used language. This time it was for JavaScript, but a quick Google search did not reveal any relevant projects. Therefore following is the initial attempt to a probably first general purpose parser library for JavaScript, 'p4js'.
For the uninitiated to monadic styles and syntax, the introduction blog post has a short tutorial explaining the basics; the key bits to understand are that:
p.register(’nat’) and use it from now on as $P().nat()The current library provides only a dozen combinators, but it is enough to have quite some fun already. Following are few examples:
* a CSV parser,
* a small calculator and
* the tiny math processor that uses the parser not only to parse the input into expression tree, but also to perform expression evaluation and function derivation on the tree, and to draw function graphs (on browsers that support the canvas tag).
In the comments of the announcement post, a couple of people also point at Chris Double's implementation of the same concept.
Thursday, April 30th, 2009
Category: CSS, Design, Utility
Andrée Hansson has created 960 Gridder, a grid layout tool for web developers that you can either use as an integrated component to layout your websites or use it as a bookmarklet. The grid is fully customizable but it defaults to the "960px grid standard".
960 Gridder will automatically identify if jQuery is present at the website and if it is not, it will include it.
It injects your website of choice and you can then work with this tool to help you out with whichever layout/design task you find it useful for.
By default, it is set to work with 12 columns, 60 pixel wide columns with a 10 pixel spacer left and right of the column, making it a 20 pixel wide gutter (which actually is the ones this gridder renders).
You can see and read about the "960 standard" at http://960.gs.
Tuesday, April 21st, 2009
Category: Performance, Utility
There are many tools that can track HTTP at various levels, but they each have their own format. What if we lived in a world where there was a common format which would enable the following:
Steve Souders: "Hey Dion, Facebook is doing something wacky on their category pages. Take a look at the waterfall that you see in this data that I exported from AOL PageTest"
Dion Almaer: "Interesting. I just imported it into Firebug, and I see what you mean."
Well, Jan Odvarko of the Firebug team is working on just that:
There is currently several existing tools that can be used for HTTP tracking. To name a few:
- Firebug (in browser)
- HTTPWatch (in browser)
- Fiddler (proxy based)
- Netmon (network level)
- Wireshark (network level)
They have various advantages over each other. For example, in-browser tools can easily group requests by page and analyze browser-cache usage while network-level tools can easily gather low level detailed info (e.g. HTTP compression). But in general, they all can be used to track HTTP traffic.
It would be obviously very beneficial to have a common export/import format that is used across all HTTP tracing tools and perhaps other projects. This would allow effective processing and analyzing data coming from various sources.
I have put together a document (fist draft) that represents a proposal for HTTP Trace Data export/import format (based on HTTPWatch's structure, but designed for JSON). Any comments and suggestions are greatly appreciated!
I hope this happens.
Wednesday, April 8th, 2009
Chris Brainard wrote in to tell us about his new CSS Sprite Creator:
Cool!
Tuesday, March 24th, 2009
Category: Utility
Over at the Mozilla Developer Tools Lab, we're starting work on a new tool to help web developers understand what's going on with the memory management of their application:
So how does a developer troubleshoot memory problems? There’s only one way good way to do it: use the operating system’s tools. Unfortunately, this option doesn’t provide the right level of detail; you can either see how much memory the browser is consuming in aggregate (which is fine to let you know that your memory use is increasing, but doesn’t tell you why) or you can see which data structures in the browser itself are consuming the memory (which is fine if you understand the guts of the browser, but it’s pretty hard for anyone else to understand how this maps into the web application they’ve developed).
What’s missing is a tool targeted at web developers that makes it easy to understand what’s happening with their application’s memory usage. We propose to create such a tool.
Check out the full entry over at my blog for more on the motivations inspiring us to tackling this problem and for details on the first phase of this approach. Let us know what you think!
Thursday, March 19th, 2009
Category: Bookmarklets, Dojo, Utility
Speaking of bookmarklets, in a recent blog post Nathan Kurtyka discusses a scenario familiar to many Ajax developers:
However, I can’t even begin to think about how much time I’ve wasted hunting through source code hoping there might be some event I can subscribe to (e.g. “What event is published when someone clicks on a Tree widget node?”).
So naturally, he created a little something to scratch that itch:
I created a Dojo bookmarklet that can be used to log all events to the console.
So to not only see how rich Dojo is with event publishing (you probably haven’t been leveraging either), but to also see the bookmarklet in action, head on over Dojo Campus. Just enable Firebug, give the bookmarklet a click, browse the demos.. and behold — events everywhere!!
Check out the blog for the bookmarklet.
Wednesday, March 18th, 2009
MIX '09 has kicked in and "The Gu" just had someone show SuperPreview something that does what we saw with Meer Meer.
SuperPreview let's you do the same onion peel overlays to see differences across browsers, and you can have everything run in the server (same as Meer Meer). This means that you don't need to run VMs with various browsers to get your testing in. On Windows and want to see what your app looks like in Safari Mac? No problem.
The demo also showed the nice visualization of seeing where DOM nodes actually are, allowing you to see how the CSS is different. Promising!
Category: JavaScript, Library, Utility
Allan Jardine is up to his old tricks again (his tricks are: creating helpful small tools!). This time he has created KeyTable, a library that adds the ability to use the keyboard to navigate around an HTML table.
Events can be bound (and unbound) to cells as required by the developer, allowing increased accessibility to Javascript enhanced tables. This library is somewhat similar to QFocuser that was posted on Ajaxian back at the start of the month, but specialises in table navigation. KeyTable also integrates nicely with DataTables, such that paging and sorting is taken into account.
To get started you just need to var keys = new KeyTable(); and then you can add init params for fine grained work, and you can also add events:
The front page has an example that uses jEditable allowing you to mouse around, hit enter, change a field, and go back:
Friday, March 13th, 2009
The uxebu folks have put together a really nice JavaScript API viewer that is entirely written in JavaScript a la Code Illuminated.
The docs are very impressive, and it is indeed cool to do this all on the client, so it works offline just as easily as online. The team talked about the various documentation formats and how they came to the conclusion on what they were going to use. Nice stuff!
In Episode 25, we chat about IE 8, standards, Acid3, server side JavaScript, and more.
Who are the ajaxians? Find out.
Please contact us at . We would love to hear about any news that we could put up here.
We have individual blogs too:
