Archive for August, 2010

File Under: Browsers, Mobile

Firefox Mobile Alpha Lands on Android

The first official pre-release version of Mozilla’s mobile Firefox browser for Android devices has arrived, the company announced Friday.

Curious users with phones running Android 2.0 and above, or with Nokia N900 devices, can download and install it right now.

Codenamed Fennec, Firefox mobile is based on the same code as the big daddy desktop version of Firefox. It supports the same web standards and it even accepts add-ons. It also syncs up with your other versions of Firefox, so your history, Awesomebar searches, auto-fill form data and passwords will be the same as you move from desktop to mobile and back again throughout your day.

One of the strokes of genius design in the Fennec browser is the unique side-to-side swipe action, which brings up menus for things like tabs, bookmarks and settings. It minimizes the browser chrome and leaves more screen real estate for web pages. This new version has the sync features as well as pinch-to-zoom browsing.

We’ve seen pre-release versions of Fennec running on Android in the past, but they were patchy and bare bones. This is a real-deal alpha release. It may not be entirely stable yet, but it’s come a long way since its meager beginnings.

Continue Reading “Firefox Mobile Alpha Lands on Android” »

File Under: Visual Design

Find Design Inspiration in Pattern Tap’s Minutiae

The web is littered with design galleries showcasing beautiful websites, but most such galleries focus on the site as a whole — where do you turn if you just want some inspiration for a navigation menu or a really slick sign-up form?*

We stumbled across Pattern Tap, which is a design gallery of sorts. But it breaks the showcased site down into specifics, like sites with awesome navigation menus, great looking web forms or really eye-catching typography.

In some cases, the overall designs of the featured sites are great. In other cases, not so much. But that’s bound to happen with you start breaking a design down into tiny components like great-looking code snippets or often neglected aspects of web design like sites with really good copy.

Pattern Tap also emphasizes the social stuff by offering “user sets” — if you find something you love, you can easily see who posted it to the site and what else they’ve contributed.

If you’re looking for some inspiration for that weekend web project, head to Pattern Tap and narrow your search. Just remember, Pattern Tap is a site for design inspiration, not your ticket to wholesale design theft.

* Yes, such a thing exists. Like pornography, you’ll know it when you see it.

See Also:

File Under: Programming

Write Your README Before Your Code

Every programmer wants to write better software, whether that means writing cleaner, faster code, sticking to best practices or documenting your work for long-term upkeep. But if your code doesn’t serve the needs of your users then it’s worthless, no matter how great it may be. So how do you make sure your beautiful code isn’t just an abstract work of art, but actually serves the end goal of making your users happy?

Tom Preston-Werner, the co-founder of Github, has some advice: write your README first.

That is, sit down and write out exactly what you want your software to do before you start writing any code. “Until you’ve written about your software, you have no idea what you’ll be coding,” Preston-Werner says.

Some developers may recall the days of the Waterfall model, a design and coding practice that advocated detailing all the minutiae of, well, everything. Today’s buzzword- systems like Agile Development are in many ways a deliberate attempt to move away from the complexities of the Waterfall Model.

Preston-Werner isn’t advocating a return to it. He carefully points out that the Waterfall model is overly complex, but “there must be some middle ground between reams of technical specifications and no specifications at all.”

That the middle ground is the good old README.TXT file. It’s typically much shorter than full-blown documentation driven development, but still forces you to go through an abbreviated, but very helpful part of development — making sure everyone, including you, is clear on what you’re trying to do.

Treat it like a mission statement: “[The README] document should stand on its own as a testament to your creativity and expressiveness. The README should be the single most important document in your codebase; writing it first is the proper thing to do,” writes Preston-Werner.

Continue Reading “Write Your README Before Your Code” »

File Under: HTML5, JavaScript

Trick Out Your Images With PaintbrushJS

HTML5′s canvas tag is a blank slate that allows you to manipulate all sorts things with JavaScript — everything from complex animations to interactive infographics to videos.

For those that want to trick out their images — including background images set in CSS — developer Dave Shea has released PaintbrushJS, a lightweight image processing library that can apply various visual filters to images on your page.

Behind the scenes, PaintbrushJS uses the HTML5 canvas tag to apply its effects, automatically inserting canvas tags based on class names. You can set effects and control the amount by adding attributes to your tags.

PaintbrushJS works in any modern browser — so, of course, IE 8 and below won’t see the effects.

PaintbrushJS can blur images, add a sepia tone, overlay colors or add noise. For a full list of the effects available, check out the documentation or head over to the demo page to see it in action. If you’d like to experiment with the effects, you can grab PaintbrushJS from its home on Github.

See Also:

File Under: APIs, Browsers

Jetpack Edges Closer to a Starring Role in Firefox

Mozilla Labs has announced an update to its Jetpack extensions system that makes it easier for developers to write browser add-ons that more closely interact with a person’s computer desktop.

The new Jetpack SDK is version 0.7. It is quickly reaching the level of maturity required for it to become a standard feature in Firefox.

Jetpack is a new extensions framework for Mozilla’s browser designed to offer developers an easier, faster way to build browser add-ons using common web development tools like HTML, CSS and JavaScript. The Jetpack extension framework will not replace Firefox’s existing framework, which uses heavier code. But Mozilla expects to see many developers switch to the new framework once it’s complete.

While Jetpack was innovative when Mozilla first announced it, Google has since added an extension system to its Chrome browser that works on the same principles as Jetpack — using web-based tools like HTML and CSS. More recently Apple joined the fray by adding a similar extensions system to Safari 5.

Firefox’s lightweight extension framework has spent a long time in development. Jetpack graduated from Mozilla Labs (though the project is still hosted there) in March of 2010, but, while there was some speculation that Jetpack might end up in Firefox 4, that appears unlikely.

Still, the developer SDK is now at version 0.7 which brings three new APIs for developers to test. The panel API creates floating modal popups that appear on top of web content and browser chrome and persist until dismissed by users or programs. There’s also a clipboard API for interacting with the OSes clipboard and a notifications API which mimics the look of Growl to display messages to the user.

The Jetpack roadmap calls for another SDK release near the end of September and then Jetpack should hit 1.0 sometime in the fourth quarter of 2010. Once Jetpack 1.0 is stable look for it to begin working its way into Firefox.

In the mean time, if you’d like to test out Jetpack and see what the fuss is about just install the Jetpack add-on, which allows Jetpack to work within current version of Firefox. Yes, it’s a little weird, but for now Jetpack is an add-on that you use to install add-ons.

See Also: