Jul292011

New, Improved Firebug Works with Firefox 5+

Firebug, the popular web development add-on for Firefox has released version 1.8 with a host of new features and compatibility with Firefox 5.0. More important, for those of you using the Beta and Aurora Firefox channels, the Firebug 1.9 alpha line has been released with support for Firefox 6 through Firefox 8. The alpha release will obviously be less stable, but if you want Aurora and Firebug it’s your only option.

If you’ve already got Firebug installed it should auto update shortly. If you’d like to take the latest version for a spin, head over to the Get Firebug site.

Much of the work in Firebug 1.8 went into behind the scenes optimizations and speed improvements, but there are some notable new features as well, including a revamped HTML Preview in the Net panel, some new DOM Panel options and better CSS color tooltips with rgba, hsl and hsla values.

For more details on the major new features head over to the Mozilla Hacks blog. To see a complete list of everything that’s new in Firebug 1.8, check out the release notes.

See Also:

Jul282011
File Under: Programming, Web Services

Google’s New Page Speed Service Promises to Speed Up Your Website

Google still wants to make your website load faster. The company started on its web optimization quest with the Page Speed browser extension, then it moved the Page Speed tool online with an API and now Google is offering up the Page Speed Service.

Google’s new Page Speed Service is invite-only at the moment, but if you’d like to request access, head on over to the sign up page and drop your e-mail and URL in the form.

Google’s new Page Speed Service is one part optimization tool and one part content distribution network (CDN). Google essentially grabs your website, caches it and serves it from the company’s extensive network of servers around the world. The best part about Page Speed is its simplicity — all you need to do is point your DNS to Google’s servers. After that Google handles the rest and you don’t need to worry about minifying your JavaScript, compressing images, caching, gzipping, or any other web performance best practices.

For your site’s visitors everything works just as it always has, the page load times are just shorter. At least that’s the theory. In reality, how much the Page Speed Service will speed up your site varies considerably depending on how well optimized your website is to begin with.

The Google Code blog reports that, on average, pages served from Page Speed are between twenty and sixty percent faster. If you’re curious to see how Google’s Page Speed service stacks up against your current setup, you can compare load times through WebPageTest. I ran my site through the test and the Google optimized version was roughly 40 percent faster, though judging by the screenshots it didn’t quite render properly.

The rendering problems may have been WebPageTest’s fault, though the Page Speed Service documentation seems to indicate that not every page is going to render properly. The Page Speed Service offers a tool to blacklist any specific pages you don’t want Page Speed to serve up because it doesn’t render them properly.

It’s also worth bearing in mind that, while a 40 percent speed boost did shave over half a second off my site’s page load times, most of the performance gain came from Page Speed’s heavily cached CDN. If your site is already well-optimized, but lacks a (somewhat expensive) CDN, Google Page Speed isn’t going to help you out any more than existing services like Amazon’s CloudFront or any other CDN.

The Page Speed docs explain some more in-depth methods of testing your website using various browser proxy add-ons so you can perform your own, more thorough speed tests before you commit to using the Page Speed Service.

For now the Page Speed Service is free, but don’t expect that to last. Eventually, when Page Speed opens up to everyone, Google plans to start charging for it. For now the company isn’t committing to actual prices, saying only that Page Speed will be “competitive.” Presumably that means something in the ballpark of Amazon’s S3, CloudFront and similar services.

See Also:

Jul272011
File Under: Browsers

Chrome Update Fixes Gestures in OS X Lion

Google has released a minor update to the Chrome dev channel which might be of interest to Mac OS X Lion fans. Previous releases of Chrome for Mac included support for left and right three-finger swipe gestures to navigate backward and forward in browsing history. Unfortunately those gestures conflict with gestures in Lion, which, by default, uses left or right three-finger swipes to navigate among different full-screen apps and desktops.

The latest build of the Chrome dev channel changes Chrome’s gestures for forward and backward navigation to two-finger swipes. If you’ve been frustrated by the conflicting gestures in Chrome on Lion, you can switch over to the dev channel.

One thing to keep in mind if you aren’t accustomed to the Chrome dev channel — it’s much less stable and much more buggy. For example, the Chrome release blog notes that this release, while fixing the issues with Chrome in Lion, breaks support for inline PDF viewing. A fix is reportedly in works, but in the mean time you’ll have to do without.

Along with the gesture fixes come some improvements to Chrome’s V8 JavaScript rendering engine, a better UI for Chrome’s oft over-looked multiple user profile support and some WebSockets improvements.

If you don’t want to run pre-release software fear not, all these features will be making their way to final release status in the next few weeks.

See Also:

Jul272011
File Under: Browsers

Clear Firefox Tab Clutter with ‘Snaporama’

Mozilla Labs has released another experimental add-on that tweaks the Panorama, the grouped tab feature in Firefox 4+. Snaporama, as the new add-on is known, takes a “snapshot” of all the tabs you have open, and later lets you open up that snapshot as a new tab group. Think of Snaporama as a kind of temporary batch tab bookmark feature.

To try it out, head over to the Firefox add-ons page and download the Snaporama extension. The add-on requires Firefox 4b7 and works up through Firefox 8.

Once Snaporama is installed all you need to do is click the camera icon in the add-ons bar to create a snapshot. Give your snapshot a name and Snaporama will save it for later access. Handy if you’re developing several websites and want to group and save your open tabs for each.

If you’ve got suggestions or features requests for Snaporama be sure to let Mozilla know your ideas.

See Also:

Jul262011
File Under: Programming, Web Services

Google Code Finally Adds Git Support

It’s been a long time coming, but Google Code has finally added support for the wildly popular Git version control system. Git is a distributed version control system used by many popular projects including the Linux kernel, Ruby on Rails and Android.

Google Code, which offers free public hosting for collaborative software projects, started life as an SVN-based host and later added support for Mercurial. Google Code’s lack of Git support helped drive the meteoric rise of GitHub, one of the most popular places to host Git-based projects on the web today.

Now Google Code can compete with GitHub. But, thanks to GitHub’s slick interface and well-thought out features, Google Code seems unlikely to lure many away from their existing GitHub hosting. Still, if you’re a Google Code fan, but want to use Git, well, now you can.

To get started with the new Git features, head over to Google Code and create a new project. Under the Administration >> Source tab, you’ll see a new option to use Git as your version control system. One thing you won’t find with the new Git support on Google code is a way to migrate existing SVN projects over to Git. There are of course some very handy tools like git-svn, which makes transitioning from SVN to Git relatively easy. Once you’ve converted your project with git-svn, you can upload it back to Google Code using the new Git tools.

See Also:

Jul262011

Mozilla Eyes Mobile OS Landscape With New Boot to Gecko Project

Mozilla has announced a new experimental project called Boot to Gecko (B2G) with the aim of developing an operating system that emphasizes standards-based Web technologies. The initial focus will be on delivering a software environment for handheld devices such as smartphones.

The current mobile landscape is heavily fragmented by the lack of interoperability between each of the siloed platforms. Mozilla says that B2G is motivated by a desire to demonstrate that the standards-based open Web has the potential to be a competitive alternative to the existing single-vendor application development stacks offered by the dominant mobile operating systems.

The project is still at the earliest stages of planning. Mozilla has some ideas about how it wants to proceed, but seemingly few concrete decisions have been made about where to start and what existing technologies to use. The project was announced now despite the lack of clarity so that contributors will be able to participate in the planning process.

Mozilla also intends to publish the source code as it is developed rather than waiting until it can release a mature product. These characteristics could make the development process a lot more open and inclusive than the practices that Google uses for its Android operating system.

Mozilla’s current tentative plan is to adopt a slim layer of existing code from the lower levels of the Android operating system for hardware enablement purposes and then build a completely custom user interface and application stack around Gecko, the Firefox HTML rendering engine. Android was chosen because it will theoretically offer compatibility with existing hardware, but Mozilla ultimately intends to use “as little of Android as possible.” It will not use Android’s Java-based environment and it will not support programming in native code.

A foundational goal of the B2G project is to explore and remedy areas where current Web standards are insufficient for building modern mobile applications. Instead of haphazardly grafting vendor-specific markup or extensions into the application runtime, Mozilla will seek to propose new standards to address the challenges that emerge during development. It wants the applications developed for B2G to eventually be able to run normally in any conventional standards-compliant Web browser (yes, that presumably rules out XUL).

Building an operating system seems like an excessive approach to fulfilling the stated goals of the B2G project. It would be simpler and much more straightforward to focus on building a standalone Web application runtime—like an open alternative to Adobe AIR—rather than building a complete operating system from the bottom up.

There are a lot of fundamental issues that make developing software with Web technologies less practical than using conventional user interface toolkits. HTML’s document-centric approach to layout and the lack of standardized mechanisms for binding programmatic data models to user interface views pose many challenges. It’s not really clear if Mozilla is interested in addressing those issues or will continue to leave that as an exercise for third-party JavaScript toolkits.

It seems like the areas where Mozilla is interested in pursuing new standards are basic platform integration and access to hardware. It wants to have uniform and predictable ways for Web applications to access a platform’s contact and messaging capabilities, geolocation functionality, cameras, and dialer.

Of course, Mozilla is also interested in tackling some the issues relating to security and privilege management that are implied by giving Web applications such deep access to underlying platform components. Those areas are, perhaps, where building the whole operating system becomes advantageous.

There are a number of existing products and open source software projects like Titanium, PhoneGap, Webian, Chrome OS, and webOS that cover some of the same ground. None, however, really have the same scope and focus as B2G. It’s possible that there are some opportunities for collaboration.

A code repository is hosted on GitHub, but doesn’t have anything yet besides a README file. For some additional information about the project (there aren’t many details yet) you can refer to the B2G wiki page.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

Jul252011
File Under: CSS, HTML5, Software & Tools

Screenfly: The Easy Way to Test Responsive Web Designs

Testing websites with Screenfly

If you’ve embraced responsive web design — and we sincerely hope you have — you know that fluid layouts, helpful as they are, can be tricky. Combine them with @media queries to re-size and re-position elements on the fly and you’ll quickly find that testing your site is much more complex. Not only do you need to test across browsers for rendering differences, now you need to test across screen sizes as well.

Unless you’ve got a giant horde of cash stashed under your desk, you probably don’t have every tablet and phone out there. Even if you did have every mobile device and screen size on the market, would you really want to test a website in every single one?

That would be incredibly inefficient when there’s nice web-based tools like Screenfly that can handle it all for you. Head over to Screenfly, plug in the URL you’d like to test and then start flipping through the various tablet and mobile device screen sizes to see how your @media queries are handling smaller screens.

Screenfly doesn’t account for rendering differences between devices (which should be minimal given that most mobile web browsers are based on the same WebKit rendering engine), but it does do a good job of showing you what your shiny new design looks like on the latest tablets.

There are of course other web-based tools out there that can help in similar ways, but we like Screenfly for its clean, simple interface and nicely done transitions. If you’ve got a favorite, drop a link in the comments and we’ll check it out. If you like Screenfly, you might want to keep an eye on Quirktools, the makers of Screenfly. The developers claim to have a wireframe app (no flash) and some other tools in the works.

See Also:

Jul222011

Add a Little 3D ‘Tilt’ to Your Website

Webmonkey.com Tilted

Tilt is a great new Firefox extension that uses a 3D model to visualize any web page DOM.

Tilt is a Firefox add-on, but it’s in the very early stages of development so you’ll need to manually install it. Head over to GitHub to download a copy, and then drag the downloaded file into Firefox to install it.

A webpage’s Document Object Model, better known as the DOM, is typically visualized as a tree, with nested HTML nodes arrayed like leaves around the trunk of the page (the <body> tag). Tilt uses the same idea, but maps the DOM into a 3D object, so that nodes are stacked on top of each other. You can then interact with the resulting visual model, tilting, rotating, flipping, panning, zooming and otherwise exploring the page structure within the browser window.

If you want more info about a particular DOM node, just double-click it and a small editor window will pop up, showing more useful information about the node and the inner HTML.

Mozilla has put together a short video showing off what Tilt can do:

Tilt started out as a Google Summer of Code project by developers Victor Porof, Cedric Vivier and Rob Campbell, but it’s since morphed into a Mozilla Developer Tools project.

Tilt isn’t for everyone, but if the typical DOM tree metaphor has never really made sense to you, perhaps Tilt’s 3D visualization will help.

See Also:

Jul212011
File Under: Browsers, Web Basics

Bad Browser, No Donut

The Monkey is back from an extended vacation spent surveying the state of the internet around the world. I’m happy to report that things are, well, things are good, but far from perfect. Having spent the last eight weeks with unreliable, often very slow, internet connections we’d like to tell you about something we now consider evil — rapid release cycles for web browsers.

Why? What’s wrong with getting the latest and greatest out to users as fast as possible? When it comes to security, nothing. When it comes to so-called features there are two annoying things about the release cycle that both Google and Mozilla have adopted for the Chrome and Firefox web browsers.

First and foremost the web browser has turned into a version of Windows XP — constant updates continually sap your bandwidth. In Chrome’s case that means surreptitiously downloading new versions in the background. For most that’s no big deal, but when you’re on a tiny island in Indonesia, and have waited hours for the clouds to clear so the line of sight wifi link to the larger island works, it’s annoying to have your limited bandwidth choked further by an updating browser. You might even curse the local internet some more before you realize, oh, it’s just my browser choking my internet connection so it can update itself. Isn’t that helpful. I mean why would I want to access the web when I have this awesome web browser to play with?

So I ditched Chrome and moved on to Firefox. Firefox is slightly better behaved, at least asking if I wanted to download the latest update. But Mozilla plans to do away with that in future updates. And frankly they might as well, it gets annoying to have dialog boxes flying open every time you start up your web browser.

For most people the bandwidth concerns might not be a big deal, but I can assure you that outside the bandwidth-rich countries most of us call home, bandwidth constraints remain a very real problem. There’s nothing quite so annoying as waiting for your web browser to update so you can load a website, which is really the only reason you have a web browser.

The second major annoyance about the constant update model is that — particularly in the case of Firefox — it means constantly breaking add-ons. What’s doubly galling about this problem is that often the add-ons work just fine, they just haven’t updated the version string to match the latest Firefox release. The user is left with a choice — don’t update, don’t get whatever security fixes might accompany the flavor of the month UI redesign; or, update, but be left with a browser that can no longer do the things it did moments before (thanks to now disabled add-ons).

Imagine trying to build a house and your hammer decided to re-invent itself every couple of weeks, sometimes disabling your screw driver in the process and other times adding a pair of pliers you don’t need. That’s pretty much where web browsers are at today.

I was somewhat heartened to find, on my return to the States, that I’m not the only one to have grown thoroughly disenchanted with the new “let’s update every day” approach of browser makers.

Software development veteran Dave Winer calls Firefox’s new approach a form of corporate suicide, and neatly sums up what a web browser used to be, should be:

Browsers should be like the lens in my glasses. If you’re thinking about it, your attention is in the wrong place. You use a browser to look through, at other things.

Can I get an amen? Web browsers have, as Winer points out elsewhere in his post, approached where text editors were 10 years ago, namely, feature complete. Done. Nothing more to add.

What’s interesting on the web these days is not the browser, but the web. The browser is just a window into the web. It’s already feature complete — you can see the web. The browser doesn’t need new features, it needs to be faster and support new standards. What most of us want to do is look through the window at the web and interact with people inside the web. Unless you’re really into productivity porn you probably don’t care about yet another way to order and sort your tabs.

With decent HTML5 and CSS 3 support available in all the latest releases from the major browser makers, the browser is, at least for now, done. Will browser makers one day create some feature that blows us all away? Perhaps, but in the mean time could you please stop screwing with our window, we just want to see the web.

For the curious, I must report that somewhere in my travels I became a huge fan of Opera. Opera doesn’t want to update every time I open it, it has all the features I use regularly and, perhaps more importantly, Opera Turbo really does vastly improve browsing on a slow connection.

[No donut image by kabelphoto/Flickr/CC]

See Also:

Jun302011
File Under: Blog Publishing

WordPress 3.2: Write More, IE Less

WordPress has released an upgrade for the popular, self-hosted blogging platform. Unlike the last few WordPress upgrades, which focused on improving developer tools, WordPress 3.2 is primarily about changes ordinary users will appreciate. The revamped admin section, for instance, offers a new “distraction-free,” full screen editor, and, as we noted earlier, this version finally drops support for Internet Explorer 6.

If you’d like to upgrade, head over to the WordPress site and download a copy of WordPress 3.2.

The theme for WordPress’ latest incarnation is “faster and lighter.” That’s reflected in new tools like the simplified admin interface, which offers a fullscreen editor mode. The fullscreen mode is modeled on the interface found in writing apps like WriteRoom or OmmWriter, where the focus is primarily the text, and not the bells and whistles on the main new post page.

Another aspect of the faster and lighter motto for WordPress 3.2 means eliminating the cruft, also known as dropping support for IE 6. That won’t of course affect your site’s visitors (unless your theme has dropped IE 6), but it does mean that the WordPress 3.2 admin won’t work in IE 6, something to keep in mind if you’re upgrading a site that has numerous admin users.

For now WordPress hasn’t dropped support for IE 7, though an early outline of what to expect in WordPress 3.2 did say that this release will also start the end-of-life cycle for Internet Explorer 7.

For a full list of the new features found in WordPress 3.2, head over to the release notes page.

See Also: