Webmasters Gallery

Chris Borgan has revealed a quirky new Nintendo Belt Buckle, which would of course please the ones that are nerdy enough to wear something like that. Nintendo fans may find it appealing too, especially if one is heading towards a party that is filled with like-minded gamers.

Perhaps in the future we shall be able to recognize geeks by the belt buckles they wear. For instance, you would easily know the different preferences of geeks, especially in social gatherings. That way, a Nintendo fan need not unknowingly hit on a PSP fan and later realize the truth after things get really sour.

Though cool enough for addictive gamers, I somehow do not find it hip enough to be walking around with a buckle like that, with the shirt tucked in a clumsy way so as to reveal the geekiness of it all. If you are considering wearing one such belt buckle yourself, it should not be too difficult as you could make one for yourself using things that are easily available.

A highly unlikely candidate for haute couture, the Nintendo Belt Buckle certainly could be considered as a possible entrant to the geek couture collection. If you are not totally into Nintendo and still are a hardcore geek, I would suggest you either try the Pacman Belt Buckle or the Space Invaders Buckle.

As a designer, we all have experienced the hard time of finding new ideas and inspirations. That’s why Nick La from WebDesignerWall has chosen to talk about this topic in his presentation at the FOWD conference. In this post, he has done a recap of the keynotes – Finding Inspiration From Your Environment. Read on to find out how his work habits and environment influence his design.

Next time you are outside, try to pay more attention to you environment, you may find a lot of interesting things that you can incorporate into your design. Enjoy your life and design more beautiful things!

It is a good news to web application developers. Google Analytics Data Export API beta is now publicly available to all Analytics users. The Data Export API is easy to use and provides read-only access to all your Analytics data. Any data that’s available through the standard Analytics web interface is available through the API.

Developers can integrate Google Analytics into their existing products and create standalone applications that they sell. Users could see snapshots of their Analytics data in developer created dashboards and gadgets. Individuals and business owners will have opportunities to access their Google Analytics information in a variety of new ways with Google Analytics Data Export API.

For example, you can accessing Analytics from your desktop with Polaris from now on. Polaris is a cross-platform desktop widget for Google Analytics. With 8 standard reports it’s the easiest way keep your data always instantly available. The rich interface and swift navigation make it a pleasure to use.

Mark Pilgrim has a certain style, and it was in full force on his latest post on font issues that we have on the Web.

Some people are offended by tone and such, but if you ignore that, Mark is actually normally spot on!

In this case, the font world feels like the DRM world of music. They can battle up hill all they want, but if they don’t start working with their users (who are willing to pay for fonts, just like we are willing to pay for music!) they will find themselves in big trouble.

I was chatting with a GFX engineer on Firefox and after a fun time talking about how freaking fun it is to get fonts right cross platform (holy subtle-ties batman!) he pointed to a nice M+ font :

There are tons of great open source fonts out there. One day, instead of looking up to the foundries in their ivory towers in the sky, we will look down on the floor and see the gold is right there! And, then what? What will the foundries have after they push everyone to go the open source route?

Let’s enjoy font squirrel and find some nice friendly fonts and use them to make the Web more fontific, and hope that the other chaps work out how to play nicely.

About a month ago, we covered an announcement about Mozilla’s plans to basically put OpenGL ES in the browser and call it Canvas 3D and to do so working with a new working group over at the OpenGL standards body, Khronos.

This week, we covered Google’s own 3D announcement, a plug-in offering a high-level scene graph API and embedded V8 run-time.

And of course, don’t forget about Opera’s 3D work, which we covered back in November 2007.

So now there are three approaches to 3D:

• Mozilla: Low-level, OpenGL wrapper
• Opera: Mid-level proprietary scene-graph-ish API
• Google: The full COLLADA monty

Where should the web go? Mozilla’s Chris Blizzard compares the debate to Canvas vs. SVG:

Canvas is a very simple API, much like what we’ve proposed to Khronos for 3D support. It’s well-scoped, well understood and integrates very well with other web technologies. And it’s been getting a huge amount of traction on the web. People are writing all kinds of really neat technology on top of it, including useful re-usable libraries for visualization. Have a look through Google’s own promotional site for Chrome – a huge number of them use canvas. It has traction. And we’ve gone through a couple of iterations – we’ve added support for text and a couple of other odds and ends once we understood what people were trying to do with it.

Now compare this to SVG and SMIL. Each of those specs are multi-hundred page documents with very large APIs and descriptions of how to translate their retained-mode graphics into something that’s usable on the web. (SVG 1.1 is a 719 page PDF. SVG 1.2 Tiny is 449 pages. The spec for SMIL is a 2.7MB HTML file.) We’ve seen some implementation of SVG and SMIL in browsers, but it’s been slow in coming and hasn’t seen full interoperability testing nor any real pick up on the web. The model for these specs was wrong, and I think it shows.

Chris doesn’t directly say that Google’s approach is “wrong”, but he wonders if the Google proposal of a bigger and more ambitious API would represent too great a compatibility burden for browser vendors and developers.

In the comments of his post, Henry Bridge of the Google O3D team replied; here’s a lightly edited excerpt:

We agree that to keep a standards process focused, APIs should be as minimal as possible while remaining useful, and so we would likely keep things like that out of any first attempt at a standard and, as you say, let it evolve over time. But the usefulness question brings up an important, and we think, unresolved point. We’d love to build the animation and skinning system in JS, but we just couldn’t get a JS-based animation system fast enough — even on our retained-mode API. Javascript is getting faster all the time and we love that, but until someone builds some apps it’ll be hard to know what’s fast enough.

Standardizing [an Open GL-like] immediate mode API for JS makes total sense. It’s a well defined problem, lots of people know GL, and we think it will be useful. But some of the demos we wrote _already_ don’t run well without a modern JS implementation, and moving to [Open GL] won’t help that (but we’d love to be proven wrong). That’s why we think it makes sense to explore both an immediate and a retained mode 3D, and make sure they work well together.

Its imperative that you feel good about people and things you work with. Since you can’t really pick on your office colleagues, you can surely innovate by using pepped up cases for your laptop. The Notebook Case Carpet Tile Design could be the first one you consider. The name seems pretty obvious to know from what it is made. I love the vertical flap that features dedicated handle-type space.

I am just wondering the notebook shouldn’t horizontally slip when making use of this. Russell Dow designed it and calls this notebook case as LAPPYGlove.

Do check out the Cardboard Laptop Case we featured earlier which looks super-trendy and can offer substantially good levels of protection too.

Via Core??

In my day-to-day SEO work, there are many sites I use that have a bunch of checkboxes on a single page. For example, in SEO, this is usually to check the box beside websites I want to trade links with. Well this gets tidious, so I went on the hunt for some kind of Javascript, Firefox-addon or mini-program that would do this with 1 click of the mouse. Here’s what I figured out…

At the top of my Firefox, I have a Links bar. I simply created a new link, and added the following code as the URL:

javascript:(function(){ function toggle(box){ temp=box.onchange; box.onchange=null; box.checked=!box.checked; box.onchange=temp; } var x,k,f,j; x=document.forms; for (k=0; k</X.LENGTH;>

I honestly don’t recall where I found this – I’ve been using it for several weeks. But thanks to whoever I found it from. (If I find the site, or you email me, I’ll put the link here.)

Basically what that does is go through each form on a page and toggle the checkboxes on and off. It’s great as a quick-link in my Links bar – I can load the page, click that link (checking all of the check boxes on a page) and click submit. Done!

In the “it-had-to-be-done-at-some-point” category, we give you James Hall’s latest project:

I have started working on jsPDF, an entirely Javascript-based PDF generator. Currently the demo serves up the generated PDF as a Data URI, but it could be used on the server side or within browser extensions. It currently only supports simple text, but I’m working on images and font embedding at the moment.

If you’re using Safari, Opera, or Firefox 3.5 Beta, the demo is pretty cool; the client-side JavaScript code generates a data URL which the browser displays.

Neat.

myPatterns is a new library adding custom notations for data structures in JS (and also C). It’s really useful for writing elegant programs using general pattern matching.

To explain myPatterns, let’s introduce a standard JavaScript object:

PLAIN TEXT

JavaScript

Using myPattern, you can write a test to check if this object represents a person whose first child is a boy 18 years old:

PLAIN TEXT

JavaScript:

The website explains the pattern above:

In the above, the match() statement both checks whether the object has a certain form (e.g. that the children field is an array containing a first element of a given form), and returns a "substitution" object s having the following value: {l: "Smith", b: 1991, x: [ {firstname: "Deborah" , born: 1996} ]}.

Furthermore, using your own notations, you could write the same condition more concisely, and with your own personal touch, for example:

PLAIN TEXT

JavaScript:

1. s = match(x, "<%first ~ %last: [boy(18) | %rest]>")

In the above, the object is noted in a more concise way, and the age of the first son is directly specified in the pattern, as if it was stored in the object, taking advantage of active patterns to compute the age on the fly.

Neat!

Paul Rouget and Tristan Nitot are having a lot of obvious fun with Canvas and <video> these days. The latest goodness is a demo by Paul that shows real-time dynamic content injection.

Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas.

How did Paul do this? He told us:

Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a
<canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element
(position: absolute;) on the top of the main <canvas/> element.

A canvas element provides a method named drawImage which let you
inject the content of a DOM element in the canvas (like a screenshot). It works
with three kinds of elements: <img/>, <canvas/> and
<video/>.

When you click on the <svg/> button, the Javascript code launches the
main video. Then, the main javascript loop is executed each 10
milliseconds.

Here are key things that occur during the main loop:

• first, the content of the video is injected in the main canvas. That’s why
  the canvas element looks like a video element;
• second, the position of the 2 brighter areas of the canvas are computed
  (you have access to all pixels values);
• third, the required transformation is computed (rotation, scale,
  translation);
• fourth, the content of the selected pattern is injected in the main canvas
  following the transformation.

A little drawing: