noisylime

The champion of unobtrusive canvas, Christian Effenberger, has come out with a new microformat script that enables you to add bevels to your images (and also shading, shining and glowing).

Why would you want to do this via canvas?

• Fast and easy to implement. Just add to the image and your good to go
• Don't need to spend time in an image editor creating images with corners
• Works really well with forum avatars. Doesn't require additional server work
• It's dead easy to change the attributes of the corners
• Free of charge use on non-commercial and private web sites.

The microformat

• Initialisation class "bevel"
• vary the radius by adding iradius followed by the desired radius in percent:
  Image radius class "iradius20" - min=20 max=40 default=20
• vary the masking by adding usemask:
  Image masking class "usemask"
• vary the masking by adding ibackcol followed by the color:
  Mask color class "ibackcol" - min=000000 max=ffffff default=0080ff
• vary the masking by adding ifillcol followed by the color:
  Mask color class "ifillcol" - min=000000 max=ffffff default=ibackcol
• vary the glowing by adding noglow:
  Image glowing class "noglow"
• vary the glowing by adding iglowopac followed by the desired opacity in percent:
  Glow opacity class "iglowopac" - min=1 max=100 default=33
• vary the glowcolor by adding iglowcol followed by the color:
  Glow color class "iglowcol" - min=000000 max=ffffff default=000000
• vary the shining by adding noshine:
  Image shining class "noshine"
• vary the shining by adding ishineopac followed by the desired opacity in percent:
  Shine opacity class "ishineopac" - min=1 max=100 default=40
• vary the shinecolor by adding ishinecol followed by the color:
  Shine color class "ishinecol" - min=000000 max=ffffff default=ffffff
• vary the shading by adding noshade:
  Image shading class "noshade"
• vary the shading by adding ishadeopac followed by the desired opacity in percent:
  Shade opacity class "ishadeopac" - min=1 max=100 default=50
• vary the shading by adding islinear:
  Shade gradient class "islinear"
• vary the shadecolor by adding ishadecol followed by the color:
  Shade color class "ishadecol" - min=000000 max=ffffff default=000000

[via Ajaxian]

Sick of those straight lines that your text follows? Rounded corners can only do so much? Now, a new tool is here to help you out: CSS Text Wrap.

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website

On the flip side, you get a choice of inline HTML (below), XHTML with CSS classes, or JavaScript.

[via Ajaxian]

John Dyer has created his own 3D panorama trick in JavaScript.

His code takes a large panorama, and “creates a series of div columns, and then puts copies of the image in each column. As you move your mouse across the image, it stretches the columns vertically along a sin curve to fake the 3D look.”

[via Ajaxian]

In the world of client-side development, page size definitely matters and John-David Dalton is doing his best to improve this. Awhile back, he took on the task of trying to determine how to best optimize the 120k+ Prototype and Script.aculo.us libraries and get the best compression out of the files. He’s done an absolutely fabulous job in the past and continues to pack the libraries as new versions are released. He’s just released his new version of his compressed Prototype collection and released it on Google Code.

This pack contains the following compressed versions of Prototype: 1.4, 1.5, 1.5.1.1, 1.6.0 and Scriptaculous: 1.7.1_beta3, 1.8.0. This release compresses Prototype and Scriptaculous around 10% more than regular gzipping.

Prototype’s lowest weighs in at 20.4kb.
Scriptaculous’ lowest weighs in at: 19.7kb.
Protoculous’ lowest weighs in at: 38.4kb.

Compressed forms of Scriptaculous are segmented to allow for custom builds of Protoculous/Scriptaculous.

He has included a common custom build with the pack, “Prototype+Effects”, which weighs in at around 26kb. That’s smaller than standard Prototype gzipped!

Protoculous also allows the loading of additional js files like Scriptaculous via: protoculous.js?load=one,two

You can download his collection here and included in the download is a readme file providing more details about his build.

[via Ajaxian]

Photophlow is a rich interactive communication device around Flickr, created by Neil Berkman and striatic.

Photophlow allows you to add Flickr streams to its chat rooms, so you can discuss away. It also integrates with Twitter.

A view source shows both Prototype and Dojo under the hood, and the UI itself is quite rich. Comet is used for pushing the data to the client, and although many people assume it’s Flash (Flash is used for network communication and sound if available) it is Open Web all the way.

In fact, fellow Ajaxian Michael Mahemoff actually helped build an early prototype of the app.

[via Ajaxian]

People like to moan about IE, and often don’t have anything to back it up. “IE sucks” doesn’t count.

Alex Russell, on the other hand, has written about how IE mangles the design of JavaScript libraries such as Dojo. His list both shows us the methods to the madness, informs us on the issues, and hopefully wakes up the powers that be to make sure that this items are fixed in IE 8

Array’s Can’t Be Usefully Subclassed (test case)

Arrays without a working length property are nearly useless, and JScript mangles the design of toolkits as a result.

I think it’s safe to say that both Dojo and jQuery would subclass Array directly to save code, were it a reasonable thing to do.

Where Art Thou Getters/Setters?

Instead of providing the natural property-oriented behavior, it forces class authors to write getSomeProperty/setSomeProperty method pairs on their classes should they want to do anything when values are gotten or set. The resulting code feels a lot more like Java than JavaScript, which is usually a sign that something is horribly wrong in a browser.

I have some hope that we could see getters and setters for JScript in the near future. It won’t matter much, though, unless the JScript team ships their new engine to all IE versions when they release IE 8. Not bloody likely.

Performance

Kudos are in order to the JScript team for fixing their long-b0rken GC heuristic and pushing it out to everyone…but it’s the tip of the iceberg.

Performance is one of those areas where differences in implementations can tightly circumscribe what’s possible despite exacting spec conformance. On this front, JScript’s raw VM-level execution time leaves a lot to be desired, but the true travesties really show up when you hit the DOM for computed style information or try to do anything reasonably complicated that involves string operations.

Across the board, from DOM performance to raw JScript execution speed, IE is a dog, and the odds are good that whatever toolkit you’re using spends a lot of time working around that reality.

Doctype Switching

Instead of giving devs fine-grained layout system control, IE makes it all-or-nothing. The global flag approach backs toolkit developers into doing script-based layout calculations or “just throw it in another div” solutions where we’d really rather not. Both are slow and both may be required since it’s completely impractical to dictate to users which doctype they’ll be using. While any app may be able to be disciplined enough to not care, toolkit developers must work everywhere. Hilarity ensues.

I fear this is going to get even worse with IE8 as the IE team looks to implement some of HTML 5 and hopefully many of CSS 2.1’s clarifications. The sooner they abandon the global switch, the better…but I’ll wager it’s pain they just don’t feel. Building a browser is a very different pursuit from building portable apps to run inside it.

HTC’s Can’t Be Inlined (Even With Hacks)

Modern browsers have built-in widget systems. On IE, it’s HTCs + Viewlink and on Firefox it’s XBL. Even a cursory reading through the docks for both is enough to illuminate the gigantic overlap. Alas, no one is yelling at them to standardize and the result is a terrible mess in which both sub-optimal formats limp along with nearly zero Open Web usage.

So why do I single out IE for whipping here when XBL is just as lame and similarly b0rken with regards to single-file embedding? Well, on Mozilla, you have a lot more “outs”. I strongly suspect that you can use “data:” urls to generate and evaluate component definitions for FF, which would enable compiling down from a single (more sane) format in the running page environment. IE prevents any such useful code-loading approaches.

[via Ajaxian]

Filed under: Gaming, Video, Education

The guys and gals over at our sister blog Engadget were keeping busy at the recent CES and have turned up some interesting products with a Mac angle. In the video above they're checking out a new music instruction software package called Guitar Wizard which works a lot like the Guitar Hero game (our coverage). The key difference is that Guitar Wizard uses a real guitar and actually teaches you something about playing. The kit consists of the software and a midi pickup which can be attached to your own guitar for $150, or you can get a kit that includes a guitar as well for $300. New songs will be downloadable at 99 cents each.
[via The Unofficial Apple Weblog (TUAW)]