Archive for August, 2011

File Under: Browsers
Aug
17
2011

Google Related Collects Relevant Content at the Foot of Chrome

By

Chrome Related shows other semi-relevant pages

Google has released a new service entitled Google Related, a "browser assistant" Chrome extension intended to direct users to webpages on the same topic as the one they’re currently viewing. While some applications of the service, like getting extra info during a restaurant search, are useful, some others produce unhelpful suggestions in a framework that should be more trainable than it is.

Once you have the Google Related extension installed, a bar will begin appearing along the bottom of certain types of pages, such as news, shopping, or restaurant websites. Various tabs allow you access to content related to that page–visiting a restaurant’s website may produce a tab with a Google map of the restaurant’s address, a second tab with reviews, and a third tab of related locations (as identified by Google Maps).

The restaurant website suggestions are the most coherent, as the previous list nails exactly what I’m looking for when I look up a restaurant. But some of the tabs are too selective and Google-centric (unsurprisingly), as when the Reviews tab produces Google Places reviews and links to the Urban Spoon page, but not to Yelp.

A Google Related tab produced from a news story concerning an HTC vs. Apple patent spat.

Visiting a page with a news story will produce a dropdown (or more accurately, a shoot-up) of culled news stories on the same topic from other sources. The displayed stories seem limited to the most recent updates you might find at the top of a Google News search, a format better for the rarer breaking stories than authoritative ones getting picked up over and over in brief by multiple news outlets. The pullquote in the HTC vs. Apple-produced tab above is a nice feature, but the content is only barely related to the story.

What the extension lacks the most is the ability to train it. Links offered from the Related bar are +1-able, but if you click the "View More Articles" link from the story above, you get a get a long list of stories from various outlets that can’t be +1′d. This strikes us as a prime opportunity to teach Google Related which sources you trust or would like to see in your related news tab when you visit a news story. Still, true to Google form, Google is collecting statistics on the project, so we may be training it more than we know.

Given Google’s recent "more wood behind fewer arrows" declaration, the only-partially-useful Related is a mystifying addition to the company’s product slate in its current state. The extension is available today for all Chrome users.

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

Tags: ,
File Under: Browsers
Aug
16
2011

Firefox 6 Arrives With New Tools for Web Developers

By

Firefox 6 is now available. This update to the popular open source web browser comes just eight weeks after Firefox 5 was unveiled. The quick turnaround time and increasing version numbers are part of Mozilla’s new rapid release cycle.

You can grab the latest version of Firefox from the Mozilla downloads site or head to the About Firefox menu and apply the update.

Firefox 6 doesn’t bring any huge changes to the table, despite what the version number bump might imply (and in fact Mozilla is planning to hide the version number so future releases will just be "Firefox"), but it is up to 20 percent faster than Firefox 5.

The most noticeable change to the look of Firefox 6 is the move to a Chrome-style URL bar where the domain name is now darker than the rest of the URL. Firefox 6 doesn’t dispense with the HTTP prefix the way Chrome does, but Firefox 7, which will soon move from the Aurora to the Beta channel, will hide the http:// portion of the URL.

Firefox 6 does include some nice new tools for web developers. Scratchpad is a new JavaScript editor that’s well worth checking out, and the Web Console panel has also been improved.

For a complete list of everything that’s new in Firefox 6, check out the extensive release notes.

See Also:

Tags:
File Under: HTML5, Web Standards
Aug
16
2011

W3C’s New ‘Community Groups’ Give Everyone a Voice in HTML5

By

The World Wide Web Consortium (W3C), the web’s governing body, has launched a new "Community Groups" plan designed to help speed the development and standardization of HTML, CSS and other web tools.

Despite the W3C’s role as overseers of web standards, the W3C has never moved at the speed of the web. Much of the HTML5 and CSS 3 that powers the web today won’t officially be a standard for several more years. For those hoping to move the web forward the pace of the W3C sometimes makes the organization seem like a joke. Ten years to standardize HTML5? But HTML5 is already here.

Well, now is your chance to do something more than whine about the slow pace of standards on your blog. The W3C’s new community groups are designed so that anyone can contribute to the development of HTML. Just head over to the site and join a group that interests you. There are eight groups at the moment, including groups dedicated to topics like semantic news, web payments and web education.

The groups also go a long way toward making the W3C more accessible for mere mortals. With the new community groups you don’t need to be a Google or Apple employee to catch the attention of the W3C’s members, you just need to sign up and post your ideas for everyone to read.

The web is changing at an ever-accelerating pace and the W3C knows that if it doesn’t keep up, it’s going to be left behind. The W3C has already been abandoned once. When the W3C decided in 2004 that it would bow out the HTML standardization process, browser makers and web developers wasted no time creating their own separate standards body known as the Web Hypertext Applications Technology Working Group (WHATWG). The WHATWG is largely responsible for creating what we now call HTML5.

Clearly the web will move forward with or without the W3C, though as those who lived through the dark days of the blink tag can attest, the web is a better place with the W3C and web standards at its back.

See Also:

Tags: ,
File Under: JavaScript, Programming
Aug
15
2011

Scratchpad Puts a JavaScript Editor Inside Firefox

By

Firefox 6 is set to make its move from beta to final release this week, and we’ll look at the latest version once it’s official, but in the mean time the Mozilla Devtools blog has posted details on a new feature for JavaScript developers: Scratchpad.

If you’re a JavaScript developer you probably use tools like web console or Firebug or some combination of both to test and debug your code. Both are handy, but both are primarily line by line tools, what do you do when you want to test massive scripts?

Firefox’s new Scratchpad is different from Firefox’s other JavaScript dev tools in that it is just, as the Mozilla Blog puts it, "a text editor that knows how to run JavaScript." Scratchpad gets its own window and makes life much easier when you’ve got a long script to debug.

To use Scratchpad, head to Tools >> Web Developer >> Scratchpad, which will bring up a new, smaller window with a rudimentary text editor in it. Write your code, select some (or all) of it and then select one of three options from the Execute menu: Run, Inspect or Display. Scratchpad can also save your scripts or even load external JavaScript files.

Scratchpad is never going to replace your favorite text editor, but it just might make it a bit easier to test long scripts in the browser. For more info on everything Scratchpad can do, head over to the Mozilla Devtools blog.

See Also:

Tags: ,
File Under: Multimedia, Web Apps
Aug
15
2011

Make Waves with WebGL Demo ‘Water’

By

WebGL Water Running in Chromium 14Web Developer Evan Wallace has released one of the more impressive WebGL demos we’ve seen.

Provided you’re using a capable browser (Firefox, Chrome or Safari), head on over to Wallace’s WebGL Water demo and be amazed.

If you stay abreast of the latest and greatest in web browsers you’ve probably heard of WebGL, an API for adding hardware-accelerated 3D rendering to the HTML5 Canvas tag. The WebGL API is based on OpenGL, a desktop graphics standard, which means WebGL will run on many different devices — your laptop, your phone, even your TV.

Firefox 6+, Google Chrome and the latest version of Apple’s Safari all support WebGL (in Safari you’ll need to enable WebGL under the developer tools menu). There’s also an experimental build of Opera with WebGL support.

If you’re stuck with Internet Explorer, Vimeo user Ivan Enderlin posted this video which shows Firefox rendering the WebGL Water demo.

WebGL water, by @evanwallace from Ivan Enderlin on Vimeo.

Also, be sure to check out rest of Wallace’s website for some other WebGL demos, games and experiments.

See Also:

Tags: ,
File Under: Software & Tools, Web Basics
Aug
12
2011

Yahoo’s YSlow Now Available for Opera

By

YSlow, Yahoo’s web development tool designed to help you speed up your site’s page load times by showing you exactly what’s slowing them down, is now available for Opera. YSlow began life as a Firefox extension but has since been ported to Google Chrome, and is also available as a JavaScript bookmarklet for mobile and other browsers.

The new YSlow Opera extension is basically the JavaScript bookmarklet wrapped in some native code so that it gets its own toolbar button and settings file. If you’d like to add it to Opera, head on over to the Opera add-ons site and download a copy.

Opera already ships with Dragonfly, an impressive set of web development tools to rival Firebug or anything you’ll find in Webkit browsers. Adding YSlow to the Opera toolkit makes the browser an even more compelling choice for web developers.

Illustration from “Physics for Entertainment” by Yakov Isidorovich Perelman from Archive.org

See Also:

Tags:
File Under: CSS
Aug
12
2011

Creating Shapes in Pure CSS

By

One of the best things about CSS 3 is that it reduces the need to use images in your designs. That means fewer HTTP requests, few bytes to download and fewer files to keep track of. Need rounded corners? That’s pure CSS now. How about drop shadows? Yes, pure CSS. The infinity symbol? Actually yes, you can draw the symbol for infinity with nothing more than a few lines of CSS.

The web developers over at CSS-Tricks have put together a page showing off the basic shapes you can create using only a single HTML element and all the CSS you can eat. Everything from the obvious, squares and circles, to the somewhat trickier five-pointed star or infinity symbol (contributed by developers Kit MacAllister and Nicolas Gallagher respectively).

If you need to add some basic shapes to your site, but don’t want the overhead of image files, the code on CSS-Tricks might fit the bill. The page has been up for some time now, but it’s periodically updated with new shapes so it’s worth adding to your bookmarks. You should, however, keep in mind that not all of the code works in every web browser.

See Also:

Tags:
File Under: Browsers, HTML5, Programming
Aug
12
2011

Chrome 14 Brings Native Code to the Web

By

Google has released Chrome 14 to the Chrome beta testing channel, which includes, among other new features, the initial beta release of Google’s "Native Client" technology, first announced in 2010.

If you’d like to try out Chrome 14 beta, head on over to the beta downloads page.

Chrome 14 has several improvements including the much better OS X Lion integration we mentioned previously, along with print-preview support for Mac OS X users. But possibly the biggest news is that Google’s Native Client technology is getting closer to prime time.

Native Client is a set of open source tools that allow Chrome to run compiled C and C++ code the same way the browser currently runs JavaScript or other common web programming languages. Native Code offers both a security sandbox and a set of interfaces that provide C and C++ bindings to the capabilities of HTML5. That means web application developers will be able to tap into desktop libraries to create faster, more powerful web apps.

For example, imagine you wanted to create a video editing web app along the lines of Final Cut Pro. You could building the user interface with HTML, CSS and JavaScript, but the actual processing of video would likely be very slow if you handed off the job to the server. You could try to use JavaScript in the browser, but again speed would be an issue. Native Client would allow you to do the video processing in the browser, but running native code. Then all you need to do is push the final changes up to the server, which makes for a much snappier web app.

How much faster Native Client will be is open to debate. Certainly JavaScript performance has improved since Google first announced Native Client in June 2010. The past year has seen huge JavaScript speed improvements in nearly all the major web browsers, which means Native Client feels less necessary than it might have when Google first began working on it. Of course there are still plenty of web apps, especially computationally intensive apps like non linear video editors, that could benefit from Native Client.

The problem for web app developers is that thus far Native Client is only available in Chrome. Google has created an API, dubbed Pepper — Native Client is abbreviated NaCl, which is also shorthand for table salt, get it? — which allows the browser to talk to Native Client and means that any web browser could, in theory, implement it. Thus far, however, none have.

For now, if you want to test out some Google’s sample code, grab the latest Chrome beta and head on over to the Native Client demo page. In my testing Native Client was indeed quite speedy, but running it for any length of time sent my laptop’s fan into overdrive.

Conway's Game of Life running in native client

While Native Client is still a beta release, if it catches on with developers and other browsers embrace it, it could open the doors for a whole new generation of faster, more powerful web apps.

See Also:

Tags:
File Under: CSS, HTML5, Web Basics
Aug
10
2011

Popular HTML5 Boilerplate Releases v2.0

By

The developers behind HTML5 Boilerplate have released version 2.0 of their boilerplate HTML, CSS and JavaScript templates for quickly prototyping HTML5 designs.

You can grab a copy of HTML5 Boilerplate v2.0 from the HTML5 Boilerplate website.

Version 2.0 of HTML5 Boilerplate has several significant changes, including ditching the traditional reset stylesheet for normalize.css. Normalize is a bit different in that it retains useful browser defaults and only resets those elements necessary to achieve cross-browser default styling consistency. It’s a minor point, but my favorite part of normalize.css is that it doesn’t litter your dev tools (Firebug, WebKit Inspector, etc) with endless reset rules.

Other new features in HTML5 Boilerplate include support for Respond.js (which helps if your site uses a "mobile first" approach), faster build times (up to 80 percent faster according to the release notes) and, with v2, your IE 6 visitors will now be prompted to install Chrome Frame.

For more details on everything that’s new in HTML5 Boilerplate v2, head on over to the official site and read through the changelog. Perhaps the most refreshing thing about this release, is this note in the FAQs:

Do I need to upgrade my sites to a new version?

Nope. So far there have been no critical bugs within our code that we’ve fixed from version to version. There are some nice changes that reduce your stress, but updating your HTML or CSS to the new stuff is probably more effort than it’s worth.

However, the .htaccess and Build Script you probably didn’t edit and therefore can be dropped into your existing sites with little hassle and likely a significant reward. So feel free to update those, and also update your Modernizr and jQuery versions to the latest versions they have.

See Also:

Tags: ,
File Under: HTML5, Web Standards
Aug
10
2011

W3C Publishes an HTML5 Spec for Web Developers

By

Chances are, despite embracing the tools therein, you’ve probably never read the HTML5 spec. We don’t blame you. Frankly the worst part of this job is when we have to translate gibberish from the actual HTML5 spec into words normal humans can understand.

The problem is that the HTML5 spec is written for browser makers, not web developers, and contains highly technical and very esoteric language.

Earlier this year the WHATWG released a much more readable "web developer edition" of the HTML5 spec. Now, not to be outdone, the W3C’s HTML Working Group has published a draft of its own more readable spec, the HTML5: Edition for Web Authors.

The W3C’s web developer version of the spec is still more technical than the WHATWG’s version, and nowhere near as nice to look at, but at least you can read the HTML5 spec without all the notes about conformance criteria and other browser maker-specific lingo. Flipping between the two web developer versions it’s actually not hard to wrap your head around when to use <section> and when to use <article>.

Now, if only we never had to explain the difference between the WHATWG and the W3C HTML Working Group again.

See Also:

Tags: ,
« OLDER POSTS