// Anleitung: cooles QR-Code-T-Shirt oder -Sweatshirt erstellen

QR-Codes sind cool. Und sie sind noch cooler, wenn man sie auf ein Shirt druckt :-). Stell dir z.B.

  • die eigene Website oder das Twitter/Facebook-Profil
  • deine vCard oder Kontaktdaten
  • eine Nachricht, die man normalerweise nicht direkt abdrucken würde, “versteckt” in einem QR-Code ;-)

auf einem T-Shirt vor.

An hochwertige QR-Code-Klamotten zu kommen ist einfach:

  1. Öffne http://goQR.me um einen QR-Code zu erstellen (Ich benutze hier beispielhaft meine Blog-Adresse). Klicke anschließend auf das T-Shirt-Symbol um den Onlineshop zu öffnen.
    Screenshot: 1. Daten eingeben 2. Klicke auf das T-Shirt-Symbol um den Klamotten-Shop zu öffnen.
  2. Wähle das Produkt aus, welches dir am besten gefällt (es gibt Sweatshirts, Pullover etc.). Dein QR-Code wurde automatisch in einer hohen Auflösung übernommen.
  3. Gestalten. Du kannst zusätzliche Bilder oder Text hinzufügen, nutze dazu einfach die angebotenen Online-Werkzeuge.
    Screenshot: customizing-Werkzeuge
  4. Bestellen. Einfach, oder? :-)

Tipps und Tricks

Disclosure: goQR.me wird von meiner Firma betrieben. Ich mag QR-Code-Shirts und du magst sie vielleicht auch. Und falls du welche kaufst, machst du mich reich und ich kann mir noch mehr QR-Code-Shirts kaufen… LOL

1) , 2)
Bitte beachte dabei, dass du jeweiligen Nutzungsrichtlinien einzuhalten hast

// How to create a cool QR Code T-shirt or Sweatshirt

QR Codes are cool. And they are even cooler if you put them on a shirt :-). Think about wearing:

  • your Website/Twitter/Facebook profile
  • your vCard or contact data
  • a message you normally wouldn't print on a T-shirt, using a QR Code to “hide” it. ;-)

Getting high quality QR Code apparel is really easy:

  1. Open http://goQR.me to create the QR Code (I use the address of my Blog as example). Click on the T-shirt symbol afterwards to open the shop.
    Screenshot: 1. Enter the data 2. Click on the T-shirt symbol to open the apparel shop.
  2. Choose the product you like (there are hoodies, Sweater, shirts etc.). Your QR Code is automatically applied on them in a high resolution.
  3. Customize it. You can add additional pictures and text as you like, simply use the provided tools if you wish.
    Screenshot: customizing tools
  4. Order it. Quiet simple, isn't it? :-)

Tips and tricks

Disclosure: goQR.me is a service of my company. I like QR Code T-shirts and maybe you like them as well. And when you do and buy them, you will make me rich and I can go and buy even more shirts… LOL

3) , 4)
Please note that you have to respect the corresponding usage guidelines

// Ubuntu: remove the envelope icon (messages indicator) from the indicator applet

If you want to get rid of the envelope/message indicator on Ubuntu 9.10 Karmic or 10.04 Lucid, you can't do this by removing the applet from the panel – at least not without loosing tray icons and sound control. This is because the icon is embedded within the indicator applet5) which fulfills more than a single function, including the graphical volume control.

To remove only the envelope, open a terminal and uninstall the indicator-messages package:6)

sudo apt-get remove indicator-messages

After logging out and in, the envelope is gone:
Screenshot - before and after the removal of the indicator-messages package

As you can see, the envelope icon is provided by the indicator-messages package. It should display information from various applications. But I currently don't use any program which works with it so it is useless for me right now. IMHO separate applets or a way for the user to configure the indicator applet would be preferable to the need for removing packages with superuser privileges. Hope this changes in the future.

5)
“Benachrichtigungsanzeige” in German

// Ubuntu: Failed to parse existing X config file '/etc/X11/xorg.conf'

If you are using the proprietary NVIDIA graphic driver on Ubuntu 9.10 Karmic or 10.04 Lucid, you may get an error when trying to save your display configuration (especially on a freshly installed system):

Failed to parse existing X config file '/etc/X11/xorg.conf'

This happens because nvidia-settings7) tries to parse the existing configuration file before storing a new version of it. And it is not able to handle the xorg.conf shipped with Ubuntu by default. Open a terminal and use the following command to fix this:

sudo nvidia-xconfig

The command creates a basic /etc/X11/xorg.conf suitable for your graphic card. The NVIDIA X Server Settings tool should be able to store your display settings the now.

Update 2010-11-03: It is still the same on Ubuntu 10.10 Maverick…

7)
listed as “NVIDIA X Server Settings” in the GUI menu

// What GDK_NATIVE_WINDOWS=1 does

GDK_NATIVE_WINDOWS is an environment variable to influence GTK+'s window management layer GDK. GTK+ is a toolkit used by many applications8) to render their graphical interfaces.

GTK+ 2.18.0 introduced so called “client-side windows”, offering new possibilities for application developers. Some applications may have problems with this because they are mixing X and GDK calls. GDK_NATIVE_WINDOWS=1 simply makes sure that every GDK window gets its native X window, making problematic applications work better.

So if you have problems like not working buttons (nothing happens after a click etc.) when using a GTK+ application, there is a good chance to fix the issues by setting GDK_NATIVE_WINDOWS=1 until the application developers clean up their code and release a new version of the program.

8)
e.g. GIMP or Eclipse

// Links: Content-Mafia, Abmahnwahn

// What the hell? WP's new default theme "Twenty Ten" feels so familiar to me...

WordPress 3.0 is out. Normally, nothing important to me because I never used WP for blogging or something else (I don't trust its security). But now, I'm puzzled: The new default theme “Twenty Ten” got a very similar look and feel compared to my “mnml-blog” DokuWiki template I created for this blog.

Don't get me wrong: No one copied something from someone. I saw “Twenty Ten” the first time today after reading the article about WP 3.0. Additionally, I'm pretty sure no WordPress developer ever visited my small blog and “Twenty Ten” was started far before I began to develop “mnml-blog”. But it is frustrating to me that thousands of blogs will now look similar to mine. Argh. :-/

However, I have to live with it. It took a few days to create “mnml-blog” and I'm still very happy with it's look, therefore I will keep it. Shit happens. ;-)

// PHP: Happy 15th Birthday!

Fifteen successful years are gone since Rasmus Lerdorf released PHP 1.0 – a long time for a software, especially for a language generally grown and maintained as an open source project. Here's to the next 15 years!

I did my first steps regarding web development with PHP3, first serious projects with PHP4.1 (back then, MSIE 6 was brand new and innovative as hell LOL).

Some links, containing more background information:

// Microsoft Internet Explorer 8: Fix the weird textarea scrolling bug

MSIE 8 brings some new, weird bugs. One of the most annoying one targets <textarea>s with a percentage value for the width CSS property (ironically in standards mode only, the problem disappears in IE7 compatibility view or quirks mode). When a textarea has got enough content to offer scrollbars and the user already scrolled a little bit, every keystroke will because a disturbing auto-scroll effect (even with flickering scrollbars under certain conditions like onkeyup/down events or border CSS property values). This is a real show-stopper which makes editing longer texts very uncomfortable for IE8 users.

The following file shows the problem. Simply download and open it with IE8.9)

msie8-textarea-bug.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MSIE8 textarea scroll bug/fail demo</title>
</head>
<script type="text/javascript">/*<![CDATA[*/
function checkMode() {
    var standard = false;
    if (document.compatMode) {
        if (document.compatMode === "BackCompat") {
            m = "Quirks";
        } else if (document.compatMode === "CSS1Compat") {
            m = "Standards Compliance";
            standard = true;
        } else {
            m = "Almost Standards Compliance";
        }
        if (standard === false) {
           alert("ATTENTION: The document is being rendered in "+m+" Mode - there will be NO bug!");
        }
        //alert("The document is being rendered in "+m+" Mode.");
    }
}
checkMode();
/*]]>*/</script>
<style type="text/css">
textarea {
    height: 180px;
    width: 50%; /* this will trigger the bug */
}
</style>
<body>
  <form name="foobar" method="post" action="">
    <textarea>
Please scroll down a little bit and try to edit text. E.g.
change the line by clicking into the text, type "asdf",
go to another line, type "asdf" and so on.
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua.
    </textarea>
</body>
</html>

I don't know how to get rid of the flickering scroll bars,10) but there is a workaround for the automatic scroll effect:

  • The bug is triggered by a percentage value of the CSS width property.
  • To get rid of it, you need to define a fixed px width.
  • If you do not want to loose the possibility to use flexible widths for <textarea>, you can get the needed percentage value through the back-door by using min-width and max-width with the same value afterwards. You may use browser specific hacks to hide/overwrite the fixed width from IE6 which is not affected by this bug but does not understand min/max-width.

Example:

textarea {
    /* width for non-IE browsers */
    width: 50%; 
 
    /* width for IE
       NOTE: - "\9" at the end is a CSS hack to address only IE (all versions).
             - "#" in front is a CSS hack to address IE6/7 */
    width: 500px\9; /* fix the bug */
    /* get the needed percentage value in IE7 and IE8 */
    min-width: 50%\9;
    max-width: 50%\9;
    /* get the needed percentage value in IE6 */
    #width: 50%;
}

Hope that helps. :-)

9)
tested on WinXP SP3 32bit
10)
this is thankfully just a minor, “cosmetic” problem

// goQR.me relaunch - new look and more translations for our QR Code generator

My company is proud to present a new, polished version of goQR.me (a QR Code Generator built around our QR Code API):

We already started to implement the new layout and some new features11) two weeks ago, but the most important point – additional languages – was still missing. However: now it is done. goQR.me is available in German, French and English since yesterday. And I am confident we will see more translations soon. Have fun with it… :-)

BTW: The language is also used to guess to “best” target office of the integrated shopping feature. That is why there are so many flavors of English/German.12) Combined with some browser language detection, it is simply a small shop-optimization to provide faster shipping and known currencies in the shop interface.

11)
e.g. the possibility to buy QR Code Business Cards.
12)
e.g. en-gb – why should we offer an UK user to buy something in a US shop when there is also an UK office?

// Google's Webfont Directory and Font API

Right now, you can't use many fonts for common text if you are running a website. The shared font-set available on most operating systems and devices is small and well known: Arial/Helvetica, Times New Roman, and Courier (New). You even should investigate13) good fallback fonts if you are using Georgia, Verdana or Lucida.

But there is light at the end of the tunnel: modern browsers are supporting font loading techniques. The pitfall is that there is no simple way to serve your font-file. Operating systems are using other file formats than browsers and as bonus, even the major browsers are using two different ones:

Additionally, you have to be alerted to legal issues because you are not only using but distributing the fonts. This means even if you buy a license to use a font for doing webgraphics, you may not be allowed to offer it as .eot/.woff file.

This is where the Google Font API comes into play. It offers an easy way to use some new fonts on your website by including only one CSS file served by Google. The API takes care of browser issues and is serving only open source fonts.14) Just read the instructions and start using it.

But let us talk about the downsides:

  • Your visitors will download data from Google, offering usage statistics to them (e.g. via HTTP referrer). It is another jigsaw puzzle piece for Google to know everything about you, your visitors and your website.
  • No matter how smart the API is, your page rendering speed will get slower.
  • Your visitors have to download more data (→ the font file).

But even if the mentioned downsides are show-stoppers for you, you can learn how to use the new opportunities by investigating how the API is doing its job, e.g. to build an own solution without privacy issues.

13)
there is more than MS Windows. Think about *ix, Mac OS, Android, iPhone etc.
14)
since they're open source, they can be used even for print. However, read the license agreement carefully!
I'm no native speaker (English)
Please let me know if you find any errors (I want to improve my English skills). Thank you!
QR Code: URL of current page
QR Code: URL of current page start (generated for current page)