OSLUG Planet
Javascript debugging, weird yoga poses, and more
Firefox 3.5 Released
Productive Week
Der SPD laufen nicht nur die Wähler weg
Am vergangenen Donnerstag hat die SPD in den Augen vieler ihre selbst gewählte Verantwortung gegenüber der Gesellschaft und der Verfassung zutiefst verletzt. Und obwohl niemand das Ergebnis der Bundestagswahl vorhersagen kann, drängt sich der Eindruck auf, als würde dieser eindrucksvolle Beweis eines fehlenden Rückgrats die Talfahrt der SPD weiter fortsetzen.
Und nicht nur auf Wählerseite geht es bergab: So treten auch Mitglieder aus der SPD aus, weil sie es für unerträglich halten, dass die eigene Partei, möglicherweise unbewusst, zumindest aber grob fahrlässig und ignorant, der erst jüngst sechzig gewordenen deutschen Verfassung den Krieg erklärt. So schreibt die Sozialdemokratin Julia Reda in Ihrer Austrittserklärung:
Mein Verständnis für die derzeitige Politik der SPD hört spätestens da auf, wo selbst Verfassungsmäßigkeit und Menschenrechte hinter Populismus und Wahlkampfgetöse zurücktreten müssen.
[…]
Die SPD, der ich seit meinem 16. Lebensjahr angehörte, hat sich spätestens heute gegen die universellen Menschenrechte und gegen das Grundgesetz gewandt. Meine Loyalität zur Verfassung ist größer als die zur Partei.
(Hervorhebung von mir)
Mit etwas mehr Getöse hat sich der Bundestagsabgeordnete Jörg Tauss nach fast 40 Jahren aus den Reihen der SPD verabschiedet und ist der Piratenpartei beigetreten. Aufgrund der gegen ihn laufenden Ermittlungen wegen des Besitzes kinderpornographischen Materials ist er wahrlich kein unkritischer neuer “Pirat”, aber es wäre ein fataler Fehler seitens der jungen Partei gewesen, “Wasser zu predigen aber Wein zu trinken”, hätten Sie Tauss die Unschuldsvermutung abgesprochen — ist dieser rechtsstaatliche Grundsatz doch einer der zentralen Punkte, für die sich die “Piraten” einsetzen.
Auch das Argument einiger, Tauss mache die “Piraten” zu einer zu große Zielscheibe für die “Bild”-Zeitung, hat zwar seine Berechtigung, vergisst aber möglicherweise, dass das Revolverblatt seine Missbilligung gegenüber den Zensurgegnern bereits geäußert hatte, bevor Tauss seinen Austritt andeutete. Denn schon am 12. Juni hatte das Blatt den SPD-Parteilinken Böhning zum “Verlierer des Tages” erklärt, und den Lesern suggeriert, dieser wolle die Bekämpfung von Kinderpornographie im Internet verhindern. Böhning hatte zuvor einen Antrag mit dem Titel “Löschen statt Sperren: Kinderpornographie wirksam bekämpfen, Internetzensur verhindern!” für den SPD-Parteitag eingereicht, um die Parteilinie von unwirksamen Internetsperren hin zu aktiver Bekämpfung von KiPo im Internet zu bewegen. Und so ist kaum zu erwarten, dass — mit oder ohne Tauss — die “Bild”-Zeitung sich den Argumenten der Zensurgegner sachlich nähert, oder gar (eine fast undenkbare Vorstellung?) ihren gesellschaftlichen Einfluss nutzt, um KiPo aktiv entgegenzutreten.
Update, 22.6.: Die Piratenpartei twittert gerade die ihre Position zur Unschuldsvermutung:
Um es mal ganz klar und deutlich zu sagen: Die Unschuldsvermutung ist ein Menschenrecht. Das Mittelalter ist vorbei #Tauss
Das Mittelalter ist vorbei — ob man das im Reichstag schon weiß?
Bildquellen: “Stop”-Box Creative-Commons-lizensiert von Spreeblick; Tauss mit Piratenflagge: CC-by lizensiert von Matthias Bauer auf Wikimedia Commons
Zensi, Zensa, Zensursula
Nach der Verabschiedung des so genannten “Zugangserschwerungsgesetzes” wenden sich immer mehr Menschen gegen die Errichtung einer digitalen Zensurinfrastruktur in Deutschland, teils mit bitterem Zynismus, wie etwa dieser Zensursula-Sommerhit:
Die Zensurkritiker geben indes den Kampf gegen das unsägliche Gesetz nicht auf: Am heutigen Samstag fanden vielerorts in Deutschland Demonstrationen statt. In Karlsruhe wurde der Artikel 5 Grundgesetz symbolisch zu Grabe getragen. Sogar im Gästebuch des Bundespräsidenten wenden sich besorgte Bürger an das Staatsoberhaupt, mit der Bitte, das in ihren (und auch meinen) Augen offenkundig verfassungswidrige Gesetz nicht zu unterschreiben.
Wäre da nicht die massive Kritik ihres leichtfertigen Ausverkaufs der Grundrechte, müsste die Regierung in Berlin sich über so viel Basisdemokratie eigentlich freuen.
Day 1 of Open Source Bridge Conference
Exams are over, it’s time to get moodling
OSWALD Launch and May Issue of Open Sources
The May issue of Open Sources is now available. This issue is almost exclusively about the OSWALD (Oregon State Wireless Active Learning Device).
On Monday (4/27) the LUG, CPATH, and EECS jointly celebrated the release of the OSWALD. Not only did we get to see how many people can fit into the new LUG room, we also enjoyed an afternoon of cake, pizza, mingling, and hacking.
For those who haven’t been introduction to the OSWALD, it is a hand-held device originally designed by OSU student Kevin Kemper as his senior design project. Now the OSWALD plays an active role in the undergraduate computer science program by demonstrating concepts in a hands-on setting. Since it’s launch, first year students have written an MP3 player for the OSWALD in Java. Read Open Sources for more.
shadow boxing with -moz-box-shadow
This is another 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 -moz-box-shadow feature that will be released as part of Firefox 3.5.
Another fun CSS3 feature that’s been implemented in Firefox 3.5 is box shadows. This feature allows the casting of a drop “shadow” from the frame of almost any arbitrary element.
As the CSS3 box shadow property is still a work in progress, however, it’s been implemented as -moz-box-shadow in Firefox. This is how Mozilla tests experimental properties in CSS, with property names prefaced with “-moz-”. When the specification is finalized, the property will be named “box-shadow.”
How it works
Applying a box shadow to an element is straightforward. The CSS3 standard allows as its value:
none | <shadow> [ <shadow> ]*where <shadow> is:
<shadow> = inset? && [ <length>{2,4} && <color>? ]The first two lengths are the horizontal and vertical offset of the shadow, respectively. The third length is the blur radius (compare that to the blur radius in in the text-shadow property). Finally the fourth length is the spread radius, allowing the shadow to grow (positive values) or shrink (negative values) compared to the size of the parent element.
The inset keyword is pretty well explained by the standard itself:
if present, [it] changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).
But talk is cheap, let’s look at some examples.
To draw a simple shadow, just define an offset and a color, and off you go:
-moz-box-shadow: 1px 1px 10px #00f;
(Each of the examples in this article are live examples first, followed by a screen shot from Firefox 3.5 on OSX).
Similarly, you can draw an in-set shadow with the aforementioned keyword.
-moz-box-shadow: inset 1px 1px 10px #888;
With the help of a spread radius, you can define smaller (or bigger) shadows than the element it is applied to:
-moz-box-shadow: 0px 20px 10px -10px #888;
If you want, you can also define multiple shadows by defining several shadows, separated by commas (courtesy of Markus Stange):
-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
The different shadows blend into each other very smoothly, and as you may have noticed, the order in which they are defined does make a difference. As box-shadow is a CSS3 feature, Firefox 3.5 adheres to the CSS3 painting order. That means, the first specified shadow shows up on top, so keep that in mind when designing multiple shadows.
As a final example, I want to show you the combination of -moz-box-shadow with an RGBA color definition. RGBA is the same as RGB, but it adds an alpha-channel transparency to change the opacity of the color. Let’s make a black, un-blurred box shadow with an opacity of 50 percent, on a yellow background:
-moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);
As you can see, the yellow background is visible though the half-transparent shadow without further ado. This feature becomes particularly interesting when background images are involved, as you’ll be able to see them shining through the box shadow.
Cross-Browser Compatibility
As a newer, work-in-progress CSS3 property, box-shadow has not yet been widely adopted by browser makers.
- Firefox 3.5 supports the feature as -moz-box-shadow, as well as multiple shadows, the inset keyword and a spread radius.
- Safari/WebKit has gone down a similar route as Firefox by implementing the feature as -webkit-box-shadow. Multiple shadows are supported since version 4.0, while neither inset shadows nor the spread radius feature are supported yet in WebKit.
- Finally, Opera and Microsoft Internet Explorer have not yet implemented the box shadow property, though in MSIE you may want to check out their proprietary DropShadow filter.
To achieve the biggest possible coverage, it is advisable to define all three, the -moz, -webkit, and standard CSS3 syntax in parallel. Applicable browsers will then pick and adhere to the ones they support. For example:
-moz-box-shadow: 1px 1px 10px #00f; -webkit-box-shadow: 1px 1px 10px #00f; box-shadow: 1px 1px 10px #00f;The good news is that the box-shadow property degrades gracefully on unsupported browsers. For example, all the examples above will look like plain and boring boxes with no shadow in MSIE.
Conclusions
The CSS3 box-shadow property is not yet as widely available in browsers (and therefore, to users) as, for example, the text-shadow property, but with the limited box shadow support of WebKit as well as the full support provided by Firefox 3.5 (as far as the current status of the feature draft is concerned), more and more users will be able to see some level of CSS box shadows.
As a web developer, you can therefore use the feature, confident that you are giving users with modern browsers an improved experience while not turning away users with older browsers.
Further resources
Documentation
- https://developer.mozilla.org/en/CSS/-moz-box-shadow
- http://dev.w3.org/csswg/css3-background/#the-box-shadow
Examples
stylish text with the CSS text-shadow property
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; A simple shadow
(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; I don’t like blurs
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; Glowing text
or a simple, fuzzy blur:
text-shadow: 0px 0px 5px #000; Blurry text
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 Multiple shadows are hot
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:
Animated shadows with JavaScriptStart/stop animation
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:
- Opera supports text-shadow since version 9.5. According to the Mozilla Developer Center, Opera 9.x supports up to 6 shadows on the same element.
- Safari has had the feature since version 1.1 (and other WebKit-based browsers along with it).
- Internet Explorer does not support the text-shadow property, but the feature degrades gracefully to regular text. In addition, if you want to emulate some of the text-shadow functionality in MSIE, you can use Microsoft’s proprietary ”Shadow” and ”DropShadow” filters.
- Similarly to MSIE, when other, older browsers do not support the feature (including Firefox 3 and older), they will just show the regular text without any shadows.
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
- https://developer.mozilla.org/en/CSS/text-shadow
- http://www.quirksmode.org/css/textshadow.html
- http://www.w3.org/TR/css3-text/#text-shadow
Examples
World’s Fastest Cup Stacker
This kid is awesome:
Fastest Firefox: World’s Fastest Cup Stacker
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!
Photos of the New Mozilla Headquarters
Today, Mozilla Corporation moved into new headquarters, across town, in Mountain View, California. The new place, which I have only seen as a building site so far, is bound to be awesome, judging by the photos that are slowly showing up on the web.
These and more photos are available on Deb Richardson’s flickr feed (thanks, Deb!):
I can’t wait to go visit!
Update: There are more photos of the new Mozilla office on osunick’s flickr page.
“Kumulieren” and “Panaschieren”: Local Elections in Baden-Württemberg
photo credit: daklebtwasTomorrow, June 7, 2009, the people of Europe elect the next European Parliament. Perhaps less well-known, this date also coincides with the local elections in the state of Baden-Württemberg, so besides the European ballot, I will also get to vote for
- the local town council
- the city council of the city my home town belongs to
- and the district council.
While possibly not the most influential councils of all, the number of elections at once is quite impressive. What makes these elections the most fun of all though, are the concepts of “Kumulieren” and “Panaschieren” that I’ll shortly explain to you here.
Let’s assume there are three active parties in this election: A light blue one, a pink one, and an orange one. For each of these, you’ll receive a ballot containing their designated votees, along with the instructions telling you that you have, for example, 10 votes at your disposal.
Imagine you like the pink party the most. The easiest way to handle this is to take the pink ballot, fold it, and drop it into the ballot box. You’ll automatically have given each of the people on the ballot 1 vote. But we are in Germany, and we find “simple” boring, so let’s spice that up a bit.
It just happens that you like one guy in the Pink party, Paul Olitician, more than the others. After all, whenever you meet him at the bars, he buys you a beer, and to return the favor, you listen to him explain his political visions in detail. The perfect symbiosis, if you will.
In that case, you can go ahead and “accumulate” up to three votes on Paul, and then spread the remaining seven votes across the other candidates on the ballot. You may end up not having enough votes for each of the party members on there, but that’s fine, as one of them is your former high school teacher whom you didn’t like very much anyway. The process of giving a person on the ballot more than one vote is called “Kumulieren” in German.
But then, just before and you are done giving away all your votes, you realize there are empty lines left on each of the ballots. Also, you notice your neighbor John is a candidate for the light blue party. You don’t want to vote for them as a whole, because you still like the pink party better, but you would like to vote for John. After all, you are still grateful for that one time when he heroically kept you from falling off the ladder when he caught you stealing from his cherry tree.
Luckily, the second concept called “Panaschieren” comes in handy. You manually write John’s name onto the pink ballot, allowing you to give your remaining votes to him.
After you’re done, you fold the ballot, stuff it into the envelope and drop it into the ballot box. With a strong feeling of accomplishment, you head to the bars. To discuss your successful voting with Paul, and to get rid of that horrific taste the envelope glue left in your mouth. You secretly promise yourself, next time you’ll vote for the party to introduce self-adhesive envelopes to the German election system.
Moodle gsoc update
Elgg Development
“Green” E-Mailing in Corsica
photo credit: *manci*For our upcoming honeymoon, I am currently reserving a number of hotel rooms on the beautiful island of Corsica.
Intriguingly, so far, under the emails two of these hotels sent me, I found a sentence like the following, asking you not to print out the email:
Afin de contribuer au respect de l’environnement, merci de n’imprimer ce courriel que si nécessaire – please consider the environment before printing this e-mail.
I wonder if this is a “Corse thing”, or if it’s just a coincidence. Pretty cool, nonetheless.
Fußball-Länderspiel als Livestream
photo credit: BaffsIch bin nicht sicher, ob es das schon einmal gegeben hat, aber dass man ein Fußball-Länderspiel live im Internet sehen kann, finde ich prima.
Das Länderspiel zwischen China und Deutschland wird heute live im Ersten und bei sport.ARD.de zu sehen sein.
Der Videostream startet um 14 Uhr und ist aus rechtlichen Gründen nur von Rechnern in Deutschland zu empfangen.
Nach dem Spiel stellt sport.ARD.de die Höhepunkte als Video on demand zur Verfügung. Diese Videos sind territorial nicht eingeschränkt.
Die Einschränkung auf “nur Deutschland” ist natürlich ein wenig bedauerlich, vor allem für fußballinteressierte Auslandsdeutsche, aber das ist ja international keine Seltenheit.
Trotzdem: Fußball-Länderspiel als Livestream, die in Büros arbeitende Bevölkerung wird es Ihnen danken, liebe ARD.
Lufthansa “Mexiko-Grippe” Flugblatt
Am Wochenende flog ich von den USA nach Deutschland und bekam am Gate von den Lufthansa-Mitarbeitern ein Flugblatt des Robert-Koch-Instituts in die Hand gedrückt, in dem sie vor einem “neuartigen Grippevirus” warnt. Aus dem Inhalt:
Sehr geehrte Fluggäste,
in dem Land, in dem Sie zu diesem Flug eingestiegen sind, ist es kürzlich zu Grippe-Erkrankungen gekommen, die durch ein neuartiges Grippevirus hervorgerufen wurden.
Auf der Rückseite wird der möglicherweise behandelnde Arzt über die “Schweinegrippe” informiert und spezifische Anweisungen gegeben, mit welchen Grippemitteln der Patient behandelt werden sollte.
Die Ausgangsfassung des Robert-Koch-Instituts (erhältlich auf dessen Webseite) enthält hingegen keine spezifischen Dosisanweisungen, und empfiehlt den Medizinern lediglich die “Gabe von Neuraminidasehemmern in therapeutischer Dosierung gemäß Fachinformation in Erwägung [zu] ziehen”.
Mit einem Klick auf das Bild könnt ihr das ganze Dokument als PDF-Datei ansehen.
Multiple Time Zones in Google Calendar
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.
Blog Style Course Format Progress
