This kid is awesome:
He's 11 years old, and the world's fastest cup stacker. He made this "Fastest Firefox" video for the upcoming Firefox 3.5 launch. Of course Firefox can't stack cups, but its new TraceMonkey JavaScript engine is also one of the fastest in the world!
This is a cross-post of an article I wrote for the hacks.mozilla.org blog. It shows off some of the fun stuff web developers can do with the text-shadow feature that will be released as part of Firefox 3.5.
The text-shadow CSS property does what the name implies: It lets you create a slightly blurred, slightly moved copy of text, which ends up looking somewhat like a real-world shadow.
The text-shadow property was first introduced in CSS2, but as it was improperly defined at the time, its support was dropped again in CSS2.1. The feature was re-introduced with CSS3 and has now made it into Firefox 3.5.
How it Works
According to the CSS3 specification, the text-shadow property can have the following values:
none | [<shadow>, ] * <shadow>,
<shadow> is defined as:
[ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ],
where the first two lengths represent the horizontal and vertical offset and the third an optional blur radius. The best way to describe it is with examples.
We can make a simple shadow like this, for example:
text-shadow: 2px 2px 3px #000;
(All of the examples are a live example first, then a picture of the working feature — so you can compare your browser’s behavior with the one of Firefox 3.5 on OSX)
If you are a fan of hard edges, you can just refrain from using a blur radius altogether:
text-shadow: 2px 2px 0 #888;
Glowing text, and multiple shadows
But due to the flexibility of the feature, the fun does not stop here. By varying the text offset, blur radius, and of course the color, you can achieve various effects, a mysterious glow for example:
text-shadow: 1px 1px 5px #fff;
or a simple, fuzzy blur:
text-shadow: 0px 0px 5px #000;
Finally, you can add ”more than one shadow”, allowing you to create pretty “hot” effects (courtesy of http://www.css3.info/preview/text-shadow/ css3.info):
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200
The number of text-shadows you can apply at the same time in Firefox 3.5 is — in theory — unlimited, though you may want to stick with a reasonable amount.
Like all CSS properties, you can modify text-shadow on the fly using JavaScript:
Performance, Accessibility and Cross-Browser Compatibility
The times of using pictures (or even worse, Flash) for text shadows on the web are numbered for two reasons:
First, there are significant advantages to using text instead of pictures. Not using pictures saves on bandwidth and HTTP connection overhead. Accessibility, both for people who use screen readers and search engines, is greatly improved. And page zoom will work better because the text can be scaled instead of using pixel interpolation to scale up an image.
Second this feature is largely cross-browser compatible:
A caveat worth mentioning is the ”drawing order”: While Opera 9.x adheres to the CSS2 painting order (i.e., the first specified shadow is drawn at the bottom), Firefox 3.5 adheres to the CSS3 painting order (the first specified shadow is on top). Keep this in mind when drawing multiple shadows.
Conclusions
text-shadow is a subtle but powerful CSS feature that is — now that it is supported by Firefox 3.5 — likely to be widely adopted across the web in the foreseeable future. Due to its graceful degradation in older browsers, it can safely be used by developers and will, over time, be seen by more and more users.
Finally, some words of wisdom: Like any eye candy, use it like salt in a soup — with moderation, not by the bucket. If the web developers of the world overdo it, text-shadow may die a short, yet painful death. It would be sad if we make users flinch at the sight of text shadows like typography geeks at the sight of “Papyrus”, and thus needed to bury the feature deeply in our treasure chest.
That being said: Go try it out!
Further resources
Documentation
Examples
Google Calendar has a new feature that many international Mozillians may like: It can now display more than one time zone at a time. In my case, lining up the Central European and Pacific time zones next to each other comes in quite handy:
Of course, when entering a new event, it does not seem to allow selecting the time zone this refers to quite yet, let's hope that'll be fixed in a future iteration.
photo credit: confusedvisionHulu.com, the on-demand streaming video website established some 18 months ago by the US media companies as a platform for professionally produced content such as documentaries and TV shows, has signed a few contracts for the international market. For the international customers, that would be a good start, but it wouldn't go far enough. Why is that, you might ask?
What the consumer cares about When it comes to digital media, there are three major aspects the consumer cares about. They want to have:
The content they like... What sounds trivial at first has long been a major problem, both nationally and internationally. As an international consumer, content is often not available at all, available later, or not available in the preferred language. For example, all American TV shows that reach Germany at all (and that's much fewer than there are on the US market every year) are dubbed to German. This may be pleasant to some, but it also makes it insanely hard to acquire the original language versions, as the original sound track is not broadcast even on digital TV. Buying the DVD is an option, but that can sometimes take several years after the original air date. Some shows don't make it to DVD at all, either because the media companies don't deem it profitable, or because the content licensing takes forever (e.g., the first season of Crossing Jordan took over 6 years to be released, the other five are still MIA).
Hulu can help with this. Where it has been impossible for customers to get the TV shows legally that they would like to watch, people started file sharing on the Internet. With projects like hulu.com, the media companies can do what they should have done all along: Offer a legal way for the customers to watch what they like, without being forced to download it elsewhere, with questionable legality.
At the place and time they prefer... This is another issue that's long been "built" into TV broadcasts: When a show is gone, it's gone. And despite the fact that "on demand" has become somewhat of a buzz word lately, it's been been more pay-per-view movie related and even PVRs aren't quite the breakthrough yet in this respect: If you forget to plan ahead, your show won't be recorded, and you are out of luck. Tivo is helpful there, but once again, unavailable internationally.
When it comes to the place, things get even worse: If you want to watch your favorite TV shows on the train or in the car, you are as of yet completely out of luck: I don't know of a PVR that allows you to easily take its content with you, say, on your iPod. Hulu itself is isn't very helpful there either: Even with the growing availability of 3G phone networks, the Flash-based hulu player won't work on the iPhone, for example, leaving you stranded right there and then.
... in the format they require. ... which leads to the last and most severe problem: Even with Hulu offering content more widely than before, customers are still bound to a very limited distribution channel. So far, this means it's browser-only. For mobile devices without Flash, that's a bummer, and furthermore there's no offline viewing, so you are equally left out as before while on the road outside major metropolitan areas. At last, hulu has not made content available any easier even in the living room, by most recently prohibiting its content from being shown through boxee, a free media center software.
It's long been some sort of crazy "competition" between different content providers to control formats rather than content as strongly as possible, and in effect, they have lobbied many parliaments in the world (including the US and Germany) into laws prohibiting format conversions on grounds of "circumventing encryption". While audio content is more freely available now (in the DRM-free iTunes, Amazon, and Wal-Mart music stores, for example), video content is still greatly restricted and virtually not convertible to other formats legally. And there is no indication that the video industry makes any effort not to repeat the same mistakes the audio industry already went through.
Long story short Long story short, the push for international availability of hulu.com is a good start for the consumer. It may soon get the content consumers want to them, almost when and where they want it. Still, the content remains highly restricted and it is not in sight if and when that will change. Until the consumers are able to achieve format transparency through legal channels though, many may keep employing file sharing or DVD copying as their only viable alternatives.
photo credit: digitalbearIn the light of Sunday's free SMS frenzy at German phone company T-Mobile, I tried to set up Twitter so it sends messages to my cell phone -- considering receiving SMS is free in Germany in general, that looked like a good idea. Here is what Twitter told me after I sent the confirmation code by SMS:
Of course, they couldn't have figured out that they don't like my cell phone number before I had to send a for-pay message to their German message service.
The same thing happened to me with Twitter in the US already as well. I am a "pre-paid" customer there, and I was similarly told that I am unable to use Twitter on the phone in the US.
I seriously wonder what I've done wrong to be excluded from Twitter's phone service in two countries. What's going on?
Soon, I'll fly to the US on a business trip, so I checked into my flight with Lufthansa earlier today. As most airlines nowadays, they let you choose where you'd like to sit, which looks something like this:
Sadly, this is hardly accessible for people with "disabilities": Not only is it a Flash application (which is a pretty bad idea accessibility-wise anyway), but also for people with red-green colorblindness (like myself), it is extremely hard to distinguish occupied seats from empty ones, as they only differ in color, and do not have any additional distinguishing features.
When you look at other airlines' seat selectors, you'll notice that Lufthansa has, in comparison, made a particularly bad choice. Northwest Airlines' seat selector, for instance, looks like this:
The difference is obvious: When a seat is occupied, instead of bothering only with a different color, NWA just puts a little person into the spot. In addition, other meaningful symbols are employed to display other options, such as accessible seating (wheelchair symbol) or seats that can be purchased for an additional fee (the dollar sign).
What's so bad about Lufthansa's design choice is that the most central difference in this UI is no different at all when you find yourself among the approx. 6 % of males with deuteranomaly.
What does this mean for developers? It may sound trivial, but: Make similar things similar, and different things different. If you have a very limited set of UI elements for the task at hand, make them sufficiently different for the user to distinguish without guesswork -- this won't only help the "challenged" users, but all of them will need less time and thinking, and thus have a better user experience. There's more to UI design than color, as Alex Faaborg outlined in this an older blog article about quantitative design.
This a video of an excellent lecture from Professor James Boyle on the Public Domain: enclosing the commons of the mind. He points out how today's automatic copyright system ("death plus 70") is a "cultural disaster of incredible proportions".
It's not only highly relevant and insightful even for people slightly less geeky than me, it is also highly entertaining due to his references to Internet realities ("hundreds of thousands of bloggers -- several of them sane! -- could use it!"), and therefore all of you should watch it -- especially if it's been awhile since you last listened to an interesting lecture ;) .
(via BB)
When I was working with User Agent strings today, I made the unfortunate discovery that Opera claims to be MSIE (according to their knowledge base site, this is the default -- or used to be, until version 8 according to this website and a friendly commenter here).
That is, of course, unpleasant, if a developer wants to display content to specific users based on their user agent. Unlike the current, ugly GeoIP epidemic (which I shall blog about another time), there are fairly good reasons for doing this -- all of which are negatively impacted by claiming to be a specific browser if you are not. Let me just name three of these reasons, off the top of my head:
I am not only convinced some Opera users would be outraged to be served Internet-Explorer-only content. I also assume that through Opera's claiming to be MSIE, Opera users can report numerous cases when the false user agent triggered some quirks on websites that were installed by the website author only to handle MSIE's abundant bugs at the time. Why anyone would want this setting to be the default, I cannot understand: Claiming to "be somebody else" should be the exception, not the rule.
People have blogged before about the near-uselessness of the User Agent string (in connection with Google Chrome's football-field-long UA string), and they have probably done a much better job than I would. From a developer perspective though, this is frustrating. So I twittered:
Uhm, why does Opera claim to be MSIE in its User Agent string?
To be fair, only old versions of Opera do that.
and soon thereafter, I got this interesting answer from a friend:
... they were hoping to be accidentally bundled with Windows.
I must say, in the light of Opera being the initiator of the ongoing antitrust investigation of the European Commission against Microsoft, this answer does not fail to convey a faint notion of irony.
Update: Commenter Eric points out that Opera's knowledge base article that I am citing on the top is outdated and the default user agent string used by Opera is much simpler. Well, excellent.
Update 2: Another commenter points out that Opera's impersonating MSIE has historic reasons dating back to the pre-Firefox era. -- Now that these reasons are not present anymore, the UA has been adapted.
Just in time to get you all ready and prepared for the Super Bowl XLIII, here is a little video on the "mystery of the yellow line".
The yellow line denoting the current 10-yard "target" is one of the most impressive things for me about football coverage on television. In fact, it gives viewers at home an interesting advantage over both the fans in the stadium and the referees. Even in situations where the distance needs to be measured exactly on the field, the people at home already know if it was or was not enough to make the 10 yards---so they can relax and enjoy the refs' effort to confirm it. In addition to these little moments of superiority, the sheer awesomeness of mashing up live video with a smooth overlay---while not painting over players' legs etc.---is some seerious geekness I find deeply fascinating.
Now of course, just to be fair, European television channels do similar things in the mean time. For example in soccer, they show the distance to the goal line for free kicks. Still, due to the different objective of American Football, the advantage is much more striking there than in the European sports I know.
Have a fun Super Bowl with your friends and---of course---root for the Steelers!
Leaving my wi-fi router in the house when moving out, I am about to put it in a central place and wanted to make sure the reception is decent enough for everybody to enjoy. So I read up on the topic a little bit and found a nice little explanation why 200 milliwatt TX power will not make your access point better, faster, or more awesome than your friend's. No matter how much the average script kiddie wishes it did...
Is a 200 mW access point a good thing? The answer is normally, "No." A notebook computer or PDA using a standard PCMCIA (or built-in Wi-Fi) adapter transmits with a power level of 100 mW (or less). If an access point puts out a 200 mW signal then the access point will be capable of transmitting to a distance from which the notebook computer can't transmit back. The Wi-Fi client (the notebook computer) "hears" the access point. Unfortunately, the access point has no way to "hear" the client. The client connection fails, even though the signal level seen from the access point may be stronger than other, lower power, access points. The advantage of a 200 mW access point is that they can be used with a 50-foot length of low-loss antenna cable to attach a remote external antenna. The cable attenuates the 200 mW signal down to a 100 mW level at the point where the signal enters the antenna. Now the access point antenna and the client are both operating with a 100 mW signal, and they can hear each other properly. The output power from an access point should never exceed the output power from the clients that are attaching to it.