All posts tagged ‘JavaScript’

Building Better HTML5 Games With Canvas

Canvas drawing speeds in Firefox 4 beta 7

The Canvas element is one of the most exciting parts of HTML5. It gives web developers a blank slate to create animations, games or even interactive video elements, all of which previously required plugins like Flash or Silverlight.

Canvas is not, however, a panacea — just because you can does not mean you should. Canvas-based animations can slow down pages, send your PC’s fan into overdrive and produce stuttering, frame-dropping ugliness. The stunning HTML5 experiment The Wilderness Downtown, was indeed very cool, but it also nearly crippled even the newest PC hardware.

As with most programming, the trick to using HTML5′s canvas element is knowing how to optimize your code so it works within the limits of today’s browsers.

We’ve looked at some tips and tricks for working with canvas in the past. At Mozilla’s recent Open Web Gaming conference, Ernesto Jiménez, lead developer at gaming company Six to Start, outlined some more handy tips for building canvas-based HTML5 games.

While a few of these tips are specific to games, in general they’re simply good ideas for anyone working with the canvas element — whether it’s games, animations or graphs.

Jiménez’s covers tips like drawing new elements offscreen and then copying them into your onscreen canvas to avoid flickering animations, and minimizing processor-intense operations like getImageData or fillText. He also talks about how to break up your animations into multiple canvas elements for smaller, faster graphics.

Jiménez’s slideshow gives a basic overview of the tips, but there’s also a video of the talk which includes a bit more detail on why these tips are helpful:

See Also:

File Under: Browsers

Chrome Gets New ‘Crankshaft’ Engine, Syncing, WebGL Support

SAN FRANCISCO, California — Google has rolled out some enhancements to its Chrome web browser, adding a new JavaScript engine, more hardware acceleration, and finalizing its system that keeps all of your copies of Chrome in sync.

The enhancements were debuted as part of a press event for Chrome OS and the Chrome Web Store here Tuesday.

The new JavaScript component is called Crankshaft, and it’s built on top of the open source V8 JavaScript engine that currently powers Chrome.

Google VP of product management Sundar Pichai says the boost makes Chrome 50 times as fast as web browsers were just two years ago when Chrome launched.

“Something that took a minute to happen in JavaScript two years ago can now happen in under a second,” he said.

We haven’t been able to verify Google’s speed claims yet (we’re still at the press event) but you can test out Crankshaft now. It’s available in the bleeding-edge Canary build of Chrome right now.

The syncing feature, which Google has had kicking around in developer and beta releases for months, offers “the same Chrome experience everywhere,” Pichai says. It syncs your bookmarks, preferences, auto-fill information and themes across all copies of Chrome, and you sync up your browsers by logging in to your Google Account. You can choose which datatypes you want to sync and which you don’t.

Also on display were the new WebGL features, which offload the most processor-intensive tasks for graphics and page rendering to the machine’s GPU. The demo featured the familiar “look at how fast the fish swim around the fish tank” method of showing off hardware acceleration, but Google added a nice touch by introducing sharks with lasers coming out of their eyes. The laser beams even refracted when they passed through the glass of the tank.

Google says Chrome 9 beta will have WebGL enabled.

Pichai also showed off some of Chrome’s other recent enhancements, like sandboxing for plug-ins.

He also said Chrome now boasts 120 million users worldwide.

See also:

File Under: Browsers

New IE9 Preview Arrives, Now With More JavaScript Power

Internet Explorer 9 Beta on the Windows 7 desktop

Microsoft pushed out another preview release of Internet Explorer 9 Wednesday. This is not a new beta release — we’re still months away from the official release of Internet Explorer 9 — but we’re definitely approaching the finish line.

Wednesday’s release, dubbed Internet Explorer 9 Platform Preview 7 (whew) includes a big performance boost with a newly revamped JavaScript engine inside of it.

The last preview release of IE9, which only arrived a few weeks ago, saw increased support for web standards. But Microsoft made it clear to us during a phone briefing that Wednesday’s release is all about speed and performance.

To that point, PP7 contains an updated version of the Chakra JavaScript engine. This new engine for IE9 was first introduced at Microsoft’s PDC developer event in November 2009. During the last year, the company has been improving Chakra to the point where it’s now scoring over 300 percent higher on the WebKit SunSpider benchmark than it was at launch.

Microsoft’s Ryan Gavin from the IE team says the new release scores 234.6 ms on SunSpider’s JavaScript execution performance test. Read more about the testing stuff on the IE Blog.

While some browsers are certainly faster than others, the major browser vendors continue to tweak their internal workings and make small improvements to speed. JavaScript performance is particularly important, since modern web applications like Gmail, Facebook and Twitter rely heavily on scripted actions. A faster browser means a snappier web app. Just last week, Mozilla released a new beta of Firefox 4 that included revamped code for its JägerMonkey and TraceMonkey JavaScript engines.

You can download this early version of the next IE browser directly from Microsoft. It’s available for PCs running Windows 7 and Vista. Also, this platform preview can be installed alongside IE9 Beta or IE8 with no problems.

Once you grab it, head over to the company’s demo playground and put the new browser through the paces. Be sure to report your results in the comments.

Continue Reading “New IE9 Preview Arrives, Now With More JavaScript Power” »

File Under: CSS, Visual Design

Lettering.js Makes Complex Typography Easy

CSS 3 adds some awesome new tools to web designers’ toolkit — the ability to rotate, transform and tweak elements means complex layouts can be done with nothing more than some style sheet rules.

Combine that with some of the fancy new fonts available through web services like Typekit and and you’re well on your way to replicating the kind of fine-tuned typography control print designers have long enjoyed. However, targeting individual letters and words can still be tricky.

That’s where Lettering.js comes in. The JQuery plugin can wrap your text with span tags, allowing you to target CSS rules to individual letters, words or sentences.

If you wondered how the designers behind the Lost World’s Fairs CSS experiment did it, well, look no further than Lettering.js. The other showcase examples on the Lettering.js website are no less impressive.

The library, which requires JQuery, can be downloaded from Github. Using it is as simple as selecting the element you want to target and applying the appropriate function — basically, whether to wrap the letters, words or lines of your target element.

One thing to note, the developers recommend putting Lettering.js in your head tags to avoid the unsightly flash of unstyled content that can occur if you include it at the bottom of your page.

See Also:

File Under: CSS, HTML5, JavaScript, Web Apps

Chat With Other Tadpoles in Rumpetroll

This may be the most bizarre chatroom ever created.

It’s called Rumpetroll. In Norwegian, the word means “tadpole,” but the literal translation is “ass troll.” It’s a very clever name, as Rumpetroll is a chat room.

Enter, and you’re dropped into a color-shifting primordial soup with a bunch of other tadpoles (that also happen to look like sperm). Click around with your mouse to swim around and join up with other groups. Type to chat, and enter “name: Mike” to give your tadpole/sperm a display name.

The visual environment is powered by Canvas, JavaScript and CSS 3. It also uses WebSockets, a technology which allows persistent client-server connections. It exemplifies how web standards can be used to write a front-end that turns the most banal and simple web app into something unique and interesting.

Because of these leading-edge technologies, you’ll need a modern browser like Chrome, Firefox 4 or Safari 5.

I’ve been hanging out in Rumpetroll all morning. I’ve gone on some fruitless adventures into the abyss. I also met some Russians. I’ve even encountered a few users who have learned how to hack the site’s JavaScript to increase the size of their tadpole, or speed it up so they can fly around at amazing speeds.

The creators are four hackers from Oslo, Norway: Daniel Mahal, Hans Petter Eikemo, Hugo Ahlberg and Simen Brekken. Kudos!

See also: