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!
Normally we use CSS selectors to find and tear apart HTML. Sergey Chikuyonok's jujitsu move is to do the opposite. With Zen Coding you take a CSS selector like this:
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.
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.
Our Webmonkey friends have featuredOpacity, 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.
Conrad Chu, Design Director at Ask.com, thought he needed an image compression tool better suited for designers and front-end developers (compared to smush.it) and scratched the itch with punypng.
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.
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 Vanrensburg has created a curve explorer that gives you a nice visualization of curve functions which are used for animations (easing and the like).
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:
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.
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.
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).
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.
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.
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.
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!
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.
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:
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:
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:
Not only will the tool note that images can be optimized, but it will do the work for you!
It automatically minifies your JavaScript for you and outputs it so you can use that
An enhanced net panel with a better into cache hits and misses. I believe this is written in C++, so it gets around the "in process" limitations of Firebug's Net Panel.
Many different rules and checks
A must see performance tool to add to your belt. You can check out all of the rules and enjoy the tool!
