Tools: Posts

via Ajaxian:

Jan Odvárko “missed two movie nights” to create cookie support in Firebug. His Firebug plugin, Firecookie, gives you access to view, search, create, remove, and manage the permissions of a cookie, all from within a Firebug tab.

Firecookie creates a log entry every time when a cookie is created, changed, deleted or rejected (an option you can change).

Jan is looking for comments.

He has also written a nice tutorial on extending Firebug. It is great to see sub-plugins for Firebug such as YSlow, Firecookie, etc. Do you know of any other good ones?

NOTE: There are, of course, separate Firefox plugins for cookie management.

I use Eclipse at home (I run Ubuntu), but I can’t say that this plugin excites me terribly. I use the debugging in firebug for a lot of different things (with our own debugging wrapper: dbug.js) and I don’t know that I want all that stuff diverted into my editor… Still, it’s cool and I’ll probably install it just to see if it’s more useful than firebug on its own. I don’t really get all the mileage out of Eclipse that I could, so maybe this is just another instance of me not getting it entirely. To you Eclipse users out there, what do you think?

Note: the comments on ajaxian imply that this plugin isn’t quite ready for prime time as of this posting.
via ajaxian, via Dean Edwards…

John J. Barton has released a new open source framework named Fireclipse that enables nice coupling of Firefox and Eclipse for debugging purposes, working on top of Firebug.

• Fireclipse routes error messages from Firefox’s
  Javascript Console to Eclipse’s console.
• Fireclipse positions an Eclipse editor on the source line reported by Firefox.
• Calls to dump() end up on the Eclipse console
• Fireclipse adds an Eclipse panel to Firebug
• Extensions to Firebug include:

• debug eval() code.
• debug event handlers
• route error messages to eclipse
• executable line numbers marked

Take a peak at the page of screenshots to see it setup in Firefox and Eclipse.

( via Dean Edwards )

via ajaxian:

John Allsopp, who authored XRAY, has a new tool for us to play with. MRI is a bookmarklet that fires up a tool allowing you to query items on the page using CSS selectors. As you put in your queries you will see the items on the page that match. You can also click on areas of the page to show some selector queries that would find that area.

via ajaxian:

VentureBeat is reporting that Google has updated their popular Google Analytics service to begin tracking Ajax and Flash-based requests:

The new additions reflect a growing feeling on the web that pageviews are a less important metric than they used to be. Google Analytics is opening a feature for beta testing that tracks user engagement with elements that have become common with Web 2.0 services, including Javascript, Ajax and Flash applications, widgets and gadgets, and downloadable pages.

With many sites reliant on selling advertising based on page views, this update will allow developers to leverage Ajax, JavaScript and/or Flash without the worry of losing valuable stats data:

While small web companies will be the primary beneficiaries of the new features, the move could also prove meaningful for online advertising. Experts have suggested for some time that advertising rates should reflect elements beyond the simple standard used so far, page views.

Full article here.

Something that’s long been on my list is to do a write up on firebug. It’s such an indispensable tool that I can’t imagine my day without it. It’s like trying to understand how people did anything before the internet. Anyway, over at Ajaxian there’s a post about one that Phil Rees wrote up. If you don’t use Firebug (and if you’re reading this blog, you probably do), or if you feel like you’re not getting everything out of it, you should dig through this.

Phil Rees has written up a nice introduction to Firebug, showing us how you can use Firebug to:

• Inspect custom stylesheets included by Google Mashup Editor
• Modify in-memory stylesheets to see the changes reflected immediately
• Place watches and breakpoints into running JavaScript
• Execute arbitrary JavaScript in the context of your running application
• Monitor Ajax calls, showing response times, posted content, and results
• Profile JavaScript functions to help you identify bottlenecks and optimize your application.

The article walks through all of these points using Phil’s DanceMaps mashup using the Google Mashup Editor.

Today on Ajaxian:

We had a great response for XRAY, the “free cross browser tool that lets you see the box model in action for any element, letting you see beneath the skin of any web page.”

The number one question was “but what about IE???” and now we have the answer. The latest release supports IE6 and above, and “displays information about an element’s borders, and allows you to move around the document with arrow keys. Use the up, down, left and right key to XRAY the currently selected element’s parent, first child, and previous and next siblings.”

Here’s a nice little bookmarklet that Mark Bult (of Webshots here at CNET) sent my way: Xray. Here’s what Ajaxian had to say about it when they posted on it last week:

John Allsopp has developed XRAY, a bookmarklet that launches a tool to visualize the web page that you are on (a little like features in Firebug and Firefox). The look and feel is great, and the margin popups look like the new Safari/Webkit search functionality (mmm orange).

What is XRAY

XRAY is the first in hopefully a suite of free cross browser tools for helping web designers and developers better visualize what their code is doing in a browser. XRAY is designed to help you get beneath the skin of your web page.

XRAY let’s you see the box model for any element on a page in action - where is the top and left of an element, how big is each margin, how big is the padding, how wide and high is the content box?

What platforms and browsers is XRAY available on?

XRAY currently has been tested on Safari 2 and 3 on Mac OS X, Webkit nightly builds, and Mozilla based browsers (Firefox, Camino and so on) on Mac OS X and Windows. At present it won’t work on Internet Explorer (XRAY uses the canvas element, but plans are afoot to adapt it for Internet Explorer), and has not been adapted for Opera. We hope to have versions for Opera shortly, and Internet Explorer on Windows in the not too distant future. XRAY works in Safari 3 on Windows, but clicking a bookmark does not fire any Javascript it contains. To use XRAY on Safari 3 for windows at present, you’ll need to paste the XRAY link into the address field and hit return.

This. Is. Brilliant.via ajaxian:

Steve Souders, performance architect at Yahoo!, announced today the public release of YSlow.

Stoyan Stefanov reviewed it briefly and gave tips for custom scoring at his blog.

What’s YSlow?

It’s an extension to Firebug (yes, correct, Firebug, not Firefox) that helps with performance optimization efforts. It scores your page on the scale A to F, based on compliance with Yahoo’s performance rules. It’s a tool that has been used internally at Yahoo and is now released to the world.

Steve is going to be speaking about YSlow at the Ajax Experience that just kicked off. I am looking forward to meeting him and check out the tool. We should give it a run on your sites and post how you did (don’t run it on Ajaxian ;).

Over on the Mootools forum digitarald (a contributor to Mootools) has posted date.js, a date parsing script that converts just about any date a user could imagine entering into a field into an actual date. I'm probably going to add this to our /mootools.extensions/Native folder and integrate it in with our own date.picker.js.

History Manager

Here's another digitarald script that I'm eyeing with a bit of interest, a state manager for ajax environments. From his site:

“Ajax History”, “Back-Button”, “Ajax Bookmarks”, call it however you like. This is an unobtrusive MooTools plugin to allow history handling for multiple modules, try it out. It can handle back/forward history actions and bookmarks with the location hash.

Features

• Allow users to bookmark your ajaxified application in the current state
• Forward/Backward history browsing for your Accordion and every other
• Save states of One-Page-Applications over sessions
• Change easily default options and customize the behaviour with Events

New Mootools Blog

The Mootools site now has a nifty blog and it's got some great stuff on it already. First up is a quick set of reference links to everything you need to learn javascript. Many of these things are stuff I've linked to in my side-bar or in various posts, but it's a nice collection for sure.

SlickSpeed

You might have seen this show up on Ajaxian, but the Mootools gang released Slickspeed, a set of browser tests for dom selector comparisons for various browsers:

IE Debugger: My DebugBar

Here's a new debugger for IE that looks promising. I haven't fooled around with it yet but if anyone has or does, post a comment with your thoughts!

Google Gears

If you've followed ajaxian in the last two weeks no doubt you've seen this already, but Google launched Google Gears a week or two ago. In their words:

Google Gears (BETA) is an open source browser extension that enables web applications to provide offline functionality using the following JavaScript APIs:

• Store and serve application resources locally
• Store data locally in a fully-searchable relational database
• Run asynchronous Javascript to improve application responsiveness

Sounds promising. Here's a nice little write up from Uriel Katz.

Fx.Morph

Was glancing through the demos at http://demos.mootools.net and stumbled on to Fx.Morph, a short little Fx class that transitions an element's properties from one css class to another. I wrote something like this a few months ago but ultimately decided I didn't really need it but now I'm giving it a second thought.

We're working on an internal build system here at CNET that is a mixture of things like Mootools download builder and Dean Edward's /packer/ so that we can quickly include just the javascript that's needed on a page.

Today's post at Ajaxian shows that we're not the only ones working on such a thing. Our solution though will likely be very specific to our application development, so I don't know if we'll be able to release it. In the comments of the post below, I also found a link to packtag, which seems to be an open source Java version of this very same functionality.

Via ajaxian:

We love to play with the plumbing don't we. jscsscomp is the latest compressor that uses Nicolas Martin PHP version of the Dean Edwards JavaScript Compressor.

With a swish of mod_rewrite:

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*\.)(js|css)$ jscsscomp/jscsscomp.php?q=$1$2 [L,NC]

you can get your JavaScript like this:

PLAIN TEXT

HTML:

<script src = "/jscsscomp/yahoo.js, dom.js, event.js, effects/dragdrop.js, slider.js"></script>