Archive for October, 2010

File Under: Programming
Oct
20
2010

Development Tips to Improve Your Code Quality

By

quality you can taste

Any good programmer can tell you writing code is an art form, and as with most art forms, the key to success is good habits and lots of practice.

The Ruby Learning blog recently posted an interesting list of ways to improve your code quality and, perhaps more importantly, develop habits that will lead to better code creation. Developer James Schorr’s tips range from the obvious, like using a good version control system, to the more subtle: “realize that just because we “can” doesn’t mean that we “should”… anything’s possible, but not everything’s advisable.”

The article is broken into the three major parts of any programming workflow: pre-development, development and post-development. There are a number of great suggestions in each, but our favorite parts are the fourth category: Enjoying Your Development. Almost any project is fun and enjoyable in the beginning, but then there seems to come that point at which the fun evaporates and we get bogged down in the grunt work of writing code. Schorr has few tips to help break you out of those boring stretches:

Give yourself time to think and rest. There are some days where I just can’t write code well; other days where it’s just flowing. This is due to how your brain functions. You need sleep and a change of pace and scenery now and then.

Walk away for a while. It’s easy to get “tunnel vision” and think that you’re close to solving a problem and to think that more effort will solve it… You would be surprised at the ideas or solutions that will spring into your mind as you are thinking about or doing other things.

Head over to the Ruby Learning blog to read some of the other helpful tips and tricks for producing quality code.

Photo: Christian Hellman/Flickr/CC

See Also:

Tags: , ,
File Under: Browsers
Oct
20
2010

Chrome 7 Arrives With Bug Fixes, Better HTML5 Support

By

chrome logoIn keeping with its recently accelerated release schedule, Google has released version 7 of its Chrome web browser for Mac, Windows and Linux. The latest release of Chrome offers hundreds of bug fixes and under-the-hood improvements like an updated HTML5 parser, but is light on the new features.

Chrome users should get the update automatically, but if you’d like to download the new version directly, you can grab the browser from the Google Chrome download page.

The big news for this release is the huge number of bug fixes — hundreds have been fixed, though hundreds are still waiting. There are a few new features, like support for the HTML5 File API, which allows sites and web apps to read the content of local files. This should be a boon to web apps that rely on that feature. Also new is the ability for Chrome 7 to upload complete folders from your PC — very handy if you’ve got a lot of files to attach to an e-mail or dozens of pictures to upload. Unfortunately, the new feature relies on the HTML5 forms, which very few sites are using at the moment.

There’s also some new AppleScript support in the Mac OS X release, which means you can script Chrome or use it with OS X’s Automator tool.

Two things you won’t find in the stable release of Chrome 7 are the Hardware Acceleration and “Tabpose” features we looked at in the developer release. Both features are currently available in the developer builds of Chrome 8, though they may not make it to the stable release category until Chrome 9.

See Also:

Tags: , , ,
File Under: Browsers, Web Apps
Oct
19
2010

Mozilla Shows Off Plans for an Open Web App Store

By

Mozilla LabsMozilla has released more details about its soon-to-arrive Open Web Applications platform.

There are two key components: a directory where users can browse available web apps, and a new dashboard that will be baked into the browser interface, where users can install and manage their favorite apps.

The company published some technical documentation for developers so they can get to work retrofitting their apps with the code necessary to make them work with the new dashboard.

We first heard mumblings from Mozilla about this “Open app store” for the web back in May, only one day after Google announced its own app store for its Chrome browser and web-based Chrome OS. Google’s store is expected to make its full debut soon. The apps in Google’s store will be optimized for Chrome and may not work in other browsers, but Mozilla’s approach will list apps that work on “any modern browser with support for basic HTML technologies” — including mobile browsers. Mozilla says it will let each browser vendor dictate how it presents the app dashboards and management features.

So, app stores for web apps?

It doesn’t make much sense when coupled with what we’ve seen of “traditional” app stores — the ones popular in the mobile world, like those for Apple, Android and BlackBerry devices. But unlike those app stores, which actually involve downloading a package and installing it for offline use, a web app store is simply a directory of apps that are hosted on web servers.

In Mozilla’s model, users browse the app listings, where everything is categorized and rated. Developers can also host their own apps. Users click “install” on the ones they want, and those apps are added to a dashboard inside their browser.

It’s been mocked up for Firefox, and it looks something like this:


In the dashboard, you can manage how apps access your personal information, or uninstall them. Users don’t have to use the dashboard. They also have the option of saving a link on their desktop or mobile home screen for a single-click launch.

Continue Reading “Mozilla Shows Off Plans for an Open Web App Store” »

Tags: , , ,
File Under: CSS, JavaScript, Visual Design
Oct
19
2010

jQuery Masonry: Play Tetris With Your CSS Floats

By

One of the things that’s always on our minds here at Webmonkey and Wired is the wired.com news stream. We produce a huge number of posts every day, and our curated front door only shows the crème de la crème. The rest gets dumped in a river, which is informative, but not that exciting to look at. So we see it as a challenge: how to keep it visually interesting and still show a good mix of stories, all with a minimal amount of fuss and busywork.

Tumblr is a good solution, and one that several other news organizations are using. I happened across the Scaffold theme, and I like how it organizes posts not on a strict grid, but on a fluid grid where elements fill in the gaps around each other. It looks like a Tetris board.

The secret sauce is jQuery Masonry, a plug-in for the popular library by David Desandro.

“Think of it as the flip side of CSS floats,” he writes. “Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.”

You can grab the code from Desandro or check out the development version on GitHub. Just like jQuery, it’s distributed under an MIT license.

A particularly nice use of it in the wild is Zander Martineau’s Rather Splendid blog.

See also:

Tags: , , ,
File Under: Business
Oct
19
2010

ALA’s Annual Survey Takes the Pulse of Web Devs

By

Attention web designers, developers and all around Webmonkeys: A List Apart once again needs your input for the 2010 edition of their Survey For People Who Make Websites. The survey, which ALA started back in 2007, attempts to track and analyze information about webmonkeys’ (curiously, ALA refers to us as “web professionals,” whatever those are) backgrounds, skills, work, salaries and more.

If you’re a web developer and want to be counted in what is one of the only research projects of its kind, head on over to take the new survey. All the data is collected anonymously and goes toward painting a more complete picture of the industry.

If you’d like to see the results of past surveys, ALA recently published its findings from the 2009 survey, which, though not radically different from 2008, do reflect the changing economic times — the number of respondents reporting a salary decrease jumped dramatically from previous years and, overall, webmonkeys are markedly less confident about the future.

But not everything is doom and gloom. Among those who said that web-related work was their primary focus, nearly 92 percent were confident about their jobs — which we attribute to the new hope fostered by HTML5′s various APIs.

As always the raw, anonymized data from the 2009 survey is available to anyone that would like to play with it.

See Also:

Tags: , , ,
File Under: UI/UX, Visual Design, Web Standards
Oct
18
2010

Is the iPad Sending Design Back to the Dark Ages?

By

Jeffrey Zeldman thinks so. In his essay, “iPad As the New Flash,” the author and standards guru argues that designers are now coding up device-centric user experiences at the expense of web standards, accessibility and the advancement of open web technologies.

Everything we’ve learned in the past decade about preferring open standards to proprietary platforms and user-focused interfaces to masturbatory ones is forgotten as designers and publishers once again scramble to create novelty interfaces no one but them cares about.

While some of this will lead to useful innovation, particularly in the area of gestural interfaces, that same innovation can just as readily be accomplished on websites built with HTML, CSS, and JavaScript—and the advantage of creating websites instead of iPad apps is that websites work for everyone, on browsers and devices at all price points. That, after all, is the point of the web. It’s the point of web standards and progressive enhancement.

He takes issue not with apps in general, but with the design choices being made by popular magazines as they rush to embrace the new shiny. His ultimate conclusion: “Masturbatory novelty is not a business strategy.”

The comments are enlightening, too. A few make the point that web standards like JavaScript and CSS can now be used to develop experiences that can be delivered both natively and through a browser. Another suggests this is just the Old World struggling to understand a new platform.

See also:

Tags: , , ,
File Under: Frameworks, JavaScript
Oct
18
2010

New JQuery Release Adds JSLint Support

By

The popular jQuery JavaScript library has released an update to its current 1.4 release. The latest version, jQuery 1.4.3, is relatively minor update, but includes some speed improvements and several welcome new features including support for JSLint, HTML 5 data- attributes and a major rewrite of the css() module.

If you’d like to update to the latest release and test your code against jQuery 1.4.3, you can download it here (or here, minified). As always you can also load the code directly from Google’s CDN.

Perhaps the most important part of this release is the JSLint support. While Douglas Crockford’s JSLint tool — which is designed to find a multitude of JavaScript problems in your code — proudly proclaims it will “hurt your feelings” (and it will), it’s also a great way to debug your code.

According to a blog post announcing jQuery 1.4.3, the jQuery team will be using JSLint to prevent regressions in future releases. Of course, it also means that you can use JSLint in your own jQuery-based scripts without having to wade through jQuery errors.

One thing we should note though is that the jQuery team has made a few minor changes to JSLint to suit the “particular development style” of jQuery code. Most of the changes are minor, and you can read the full details in the jQuery style guide.

Here’s a video of jQuery creator John Resig showing off the power of the library, including an overview the latest enhancements (and those still to come) at the Future of Web Apps conference earlier this month in London. The video comes courtesy of the conference’s producers at Carsonified. Check out their Future of Web Design conference in New York next month.

John Resig – The Future Of JavaScript & jQuery 2010 from legacye on Vimeo.

See Also:

Tags: ,
File Under: Browsers
Oct
14
2010

Opera’s Next Act: Add-ons, Hardware Acceleration, Android

By

Opera Software has announced that the next version of its desktop web browser, Opera 11, will include support for hardware acceleration and browser extensions. The company also has plans to port its popular Opera Mobile browser to Android phones.

It’s the next version of Opera for the desktop that will see the most enhancements. The first Opera 11 alpha will be available soon, but the company already showcased the new extensions framework in a demo at its Up North Web event in Oslo, Norway. Opera’s new extensions framework is much like those pioneered by Chrome and Firefox, and later by Safari — using HTML, CSS and JavaScript to create lightweight add-ons.

When Safari jumped on the bandwagon and offered extensions earlier this year, Opera was the last browser that did not have a system in place for third-party add-ons. While Opera has long been a major source of browser innovation — it was the first browser to offer tabbed browsing, visual tab navigation, mouse gestures, SVG graphics and page zooming, all since copied by other browsers — add-ons were one place Opera trailed the browser pack. But not any more.

Opera’s extensions will be based on the W3C Widget specification (which defines a “widget” as a downloadable and locally stored web application) and, according to the company, it should be relatively easy to port existing Chrome and Safari extensions to Opera’s platform.

Also coming in Opera 11 is hardware acceleration. Hardware acceleration allows the browser to offload intensive tasks like image scaling, rendering complex text or displaying scripted animations to your PC’s graphics card. It has the benefit of freeing up the PC’s main processor and speeding up page load times.

Firefox, Internet Explorer and Google Chrome will all add varying degrees of hardware acceleration to their next versions, and with Opera joining in, that means only Apple’s Safari will be missing GPU capabilities.

Opera’s hardware acceleration won’t be limited to the desktop version of Opera either. The company has announced plans to build Opera Mobile for Android. The mobile version of Opera is a full-fledged web browser (unlike Opera Mini, which is available for the iPhone and countless other mobile devices) and will feature hardware acceleration and pinch-to-zoom support for Android.

Opera hasn’t set a date for the release of either Opera 11 or Opera Mobile for Android, though the company did say the latter will available within a month.

See Also:

Tags: , ,
File Under: HTML5, Software
Oct
13
2010

Export Adobe Illustrator Drawings and Animations to HTML5

By

There’s a new conversion tool for fans of Adobe’s popular Illustrator desktop publishing app that lets developers export their vector drawings and animations as HTML5 code that runs natively in the latest web browsers.

The new tool is called Ai>Canvas, and it does exactly what the name implies. You can take any vector illustrations you’ve made in Adobe Illustrator and export them as 2D graphics that can be drawn on web pages using the HTML5 Canvas element. It can even animate your drawings.

The plug-in can handle gradients and transparencies, complex pattern fills, drop shadows, complex line styles and text, exporting everything as HTML5 Canvas code. In cases where your illustration contains something that can’t be done in Canvas (like an opacity mask) the plug-in rasterizes that bit and positions it properly.

The plug-in also supports commands for animation. You can add rotation, object scaling, fades, and movement along a path. All of your parameters are defined inside Illustrator, but when you export to HTML5, you can tweak the resulting web code to fine-tune the results. You can also add interactions, like sounds, or click events.

The plug-in works in Illustrator for Creative Suite versions 5, 4 and 3. There are versions for Windows and Mac OS X.

Oddly, it doesn’t come directly from Adobe. It’s a product of Microsoft’s Mix Labs, an initiative the company has set up to experiment with open web technologies. Microsoft has taken a larger interest in open web standards ever since work began on building in support for HTML5 and advanced web technologies into Internet Explorer. The next version, IE9, is already in beta, with the final version due some time next year.

The creator of the plug-in, Microsoft developer and platform evangelist Mike Swanson, is also the author of the XAML exporter for Illustrator. He got interested in HTML5 and Canvas after a passionate conversation about the technology with his co-worker, Thomas Lewis. You can read the whole story — and see some of his working examples and test files — on Swanson’s blog. Lewis has written his own post, as well.

Adobe Labs recently released an SVG pack for Illustrator which can export drawings as SVG that run in browsers that support the format. But this new Ai>Canvas exporter uses HTML5 Canvas, which is quickly becoming widely adopted by developers working on games and virtual worlds that run in the browser. Check out the Asteroids and Rumpetroll experiments for some cool Canvas work.

See also:

Tags: , , ,
File Under: Browsers
Oct
13
2010

Chrome 8 Adds Google Instant to the URL Bar

By

Google’s Chrome development team has pushed a pre-release version of Chrome 8 into the dev channel for those that would like an early look at the next version of the Chrome web browser. While far from complete, Chrome 8 adds some welcome new features, including more hardware acceleration and the arrival Google’s new “Instant search” right inside the URL bar of Chrome.

Chrome has several “channels” — the Canary and Developer channels are where you get the earliest pre-release versions of Chrome, the beta channel releases are a little more stable, and the regular channel (which the majority of Chrome users run) is where fully-baked code ships. There’s also a build called Chromium, the open source, non-Google version of Chrome which has almost all of the same features of Google’s browser.

You can grab Chrome 8 by subscribing to the dev channel. Mac users will need to download a Chromium nightly build, as Chrome 8 for Mac hasn’t made it to the dev channel yet.

Once Chrome 8 is installed, head to the Labs page (just type about:labs in the URL bar) to see all of the experimental options. Turn on the Instant feature to get the search-as-you-type functionality in the Chrome URL bar.

You’ll also notice a couple other new options on the Labs page, including an early form of GPU acceleration for HTML5 Canvas elements. The hardware acceleration feature was also in the Chrome 7 dev build, but turning it on required starting Chrome from the command line. The Chrome 8 update makes it much easier to turn on hardware acceleration. For now the acceleration is limited to 2D animations that use the HTML5 canvas tag, but, provided you have a capable graphics card, Chrome should be able to offload that rendering to your GPU, speeding up page load times.

Also new in Chrome 8 is partial support for Google’s Cloud Printing effort. Designed to let you to print to your home PC from anywhere, Google’s Cloud Printing project is little more than an idea at this point. But we can see the beginnings of Chrome integration in this release with a new sign-in option in Chrome’s settings page (at the bottom of the Under the Hood tab). Unfortunately, signing in is about all you can do at this stage.

This early build of Chrome 8 also contains a number of bug fixes and smaller changes, which you can browse through on the Chromium project’s SVN page.

Keep in mind that Chrome 8 is very much an experimental build and there may be some bugs lurking in this early build, but if you’d like to give it a try, you can head over the Chrome channel page and grab a copy today.

See Also:

Tags: ,
« OLDER POSTS