Tuesday, December 31, 2013

A Year with Daily Challenges

Inspired by Leo Babauta's "A Year of Living Without", I decided to create a challenge for myself.
Some of Leo's great challenges are just not really applicable for me: Not using the Internet for half a day would bring me in serious job problems. That's not what I want to happen. I want to try new things out, leave things out, get out of my comfort zone (at least a little bit). The worst thing that could happen, that I learn nothing new. The best thing that could happen, is that I change the way I live my everyday life. And I believe, it will make fun. At least in hindsight.


No calories after 5:30pm. And no eating after 5:30pm. I tried this from time to time, but failed regularly. This month shall be different. Instead of eating or drink sweetened stuff, I will drink water or unsweetened tea.


This month I will drink at least two liters of fresh water each day. This might become hard. But it could be worth it.


No alcolhol. I drink not that much. At least I think I don't. In a typical month perhaps six 0.5-liters of cola-beers and one bottle of wine. That month it will be zero.


Either working out for at least 30 minutes or being outside for one hour. I have no idea how to make it work. This is one of the most challenging items on this so far to me. The tricky part will be no to cheat on the workout, but to really work out.


No coffein. No coffee. No Latte. No Cappuchino. No Cola. I will replace it with apple juice, water and tea.


All distances less than 3 km must be done by foot or bike. This will mean to go shopping by foot or bike. Heck, almost everything I can do in my town, I have to do by foot or bike. Exceptions are allowed only if it's too heavy to transport by bike or foot.


No video entertainment. I will not watch any movie or play a video game. Not on my computer and not on my phone. Instead, I will read. Or talk to my wife. Or play boards games. (I have severeal board games, which are challenging playing single, in case no one has time to play with me.). July is a great month for not sitting inside and watching TV or movies.


Waking up before 5:00am. This one will mean, that I have to go to bed early. It will be challenging, but surely the most fun. August is the month I look forward most, because of this.


Maximum half hour usage of private internet a day. As a programmer, I rely on information gathered from the internet very heavily. You always run into some problems, you cannot solve by yourself. It's not about this kind of internet usage. It's about checking your private emails, it's about surfing amazon and updating your wishlist. It's about the sunken time on reddit. I will replace it with time for family and reading book. I got the feeling, I will read more book this year than in the ten years before.


At least one hour of quality time with my kids. And by quality time I mean playing, reading and taking a walk with my kids. In my normal life, I seldom take the time to really enjoy life with those loved ones. (That's a shame actually!). And when I take the time, I'm often distracted by other things I want to accomplish: Books and internet articles to read, phone calls to make, things to cook, stuff to clean up -- you name it. This month will be different.


Write a blog post something every day. I have no clue how to accomplish this without writing extremely boring stuff like "Today I ate a banana.". <irony>Photos may be helpful.</irony>


No Smartphone usage. I am way too fearsome to go completely mobile-less like Leo. But I will use my wife's feature phone this month. It will rely on pen and paper for notes, contact and calendar updates. Yes, most feature phones have a calendar and contacts, but I hate using them. GTD with no smartphone will also be hard. But I will figure it out. I will replace this habit with being alive and watching all the other people whose attentions are drawn to that little device.

2014? Let's bring it on!

Friday, September 20, 2013

Google on the way to minimalism

I just was surprised by the redesign of the the Google Pages. I'm just enjoying that they realised, that a single, long black row above all might not be the best for screens with an 16:9 ratio, where vertical space is crucial.

So they moved the top bar into a small button on the right side. I like it. Period.
But I already see the downside of this approach: If you wanted to use some rarely used searches, e.g. Videos, you'll need twice as much clicks to reach it: four instead of two. Google might reconsider it.

Need some whitespace?

Tuesday, July 16, 2013

Why I Switched to US Keyboard Layout / Using an US Keyboard Layout in Germany

As a German guy, some of my colleagues are constantly annoyed by the fact that I use the US keyboard layout instead of the German one. Even on a actually German keyboard (keys labelled the QWERTZ way). So I decided to explain why I use the US keyboard when I type.

The first glance on a real-life US keyboard, in 2006, showed me that it would be way better for programming. Like an epiphany it hit me, that some weird, arbitrary decisions like { , }  for blocks, or like [ and ] for arrays, which were really annoying to type on a German keyboard were a piece of cake on an US keyboard.

2005 I had to type some seminar stuff at college in LaTeX. After some pages, filled with backslashes, opening and closing braces, and some few square brackets my right hand hurt. Pressing Alt Gr + 7 or Alt Gr + 0 all day long was too much for me. I hated LaTeX. I don't remember I had some troublesome experience in 2007, when I wrote my diploma thesis in LaTeX.

I would recommend every programmer to use the US keyboard layout. It's so much easier to type stuff like var a = function () { return [1, 2, 3]; };. Or stuff like @twitter, just because you don't need the crappy Alt Gr.

I think you might ask yourself: Well, but how do you handle the umlaut problem? On your favorite keyboard layout, you don't have ä, Ü or even the nice ß, my dear Lorenz.

I have three solutions for you:

The first one is to configure your system that way, so that you switch with a shortcut anytime between US and German keyboard layout.

  • Advantages: You always have both keyboard layout anytime you want. You can switch any time you want.
  • Disadvantages: You will make tons of "mode" errors. You will type y instead of z, * instead of ( very often. It will annoy you. It annoyed me. But still better than Alt Gr + 7
The second one is to learn the codes for the umlauts. In Windows, you can write ü by typing Alt + 321. I think you get the idea.
  • Advantages: Once you know, it's really fast. Mode error are excluded.
  • Disadvantages: You have to learn them.
The third one I found about today: On a Windows system, you can install this pretty neat tool from Microsoft: The Microsoft Keyboard Layout Generator.  Load the US keyboard layout, modify it the way you want, so you can insert the umlauts the way you like. Give it a try.

  • Advantages: No learning. No modes.
  • Disadvantages: Works only in Windows.

Try it for yourself.

Thursday, July 11, 2013

This was my bed

This was my bed for the last three nights. If I can't hike the Rothaarsteig, I will sleep outside, though.

I guess, some people might think that this is silly. I don't care. I do what my heart tells me to do. And the last nights it was to sleep under the stars. And to be waken by the sun.

Monday, April 29, 2013

Ultra Clean Update

I've added some radio-like buttons to my "Ultra Clean" experiment. I did not decide, whther I should implement some behaviour, or just leave it as a design-study. Anyway, here is the current screen.

Monday, April 8, 2013

Some Buttons

Today, on the train, I was tired, bored, had no internet access and was not motivated to read anything. So I coded something I wanted to try long time ago:

To put this great UI photoshop comp (as seen on Dribbble) into HTML:

clean design *sight*
After hitting the Starbucks in Cologne, I had some Internet, so I could verify that my memory of this design was right and after finding the last missing tutorial (I needed it for that inner shadow on the text), i finally came up with this:

Link: http://loie.de/ultraclean/

Tradeoff: This currently works only in Webkit, due to the inner shadow of the text.

Feel free to grab the code.

Thursday, March 21, 2013

Just had to share this...

Yes, I neeeeed this piece of plastics for my spoiled kids to ruin my 700,- € iPad.

Just take a look at this video:

Tuesday, March 19, 2013

How to handle DOM updates in AngularJS Directives in "link"

AngularJS directives are great. They provide a really wonderful mechnism "to teach HTML new tricks". But apparently there is no predefined mechanism for doing your DOM manipulation after the template has been loaded, cloned and transformed and rendered. Today I found a workaround for that.

var myModule = angular.module(myModule', []);
    myModule.directive('myDirective', function () {
        return {
            templateUrl: 'partials/timeline.html',
            link: function postLink(elem, attrs, transclude) {
                    // This code will run after
                    // templateUrl has been loaded and cloned

The problem is divided in two steps, that must be handled each: The function "link" is called after the template has been cloned. This does not include any DOM manipulations that happen after this cloning, triggered by directives ng-repeat or ng-view. If you want to start your DOM manipulation after these directives have been handled by AngularJS (i.e. the DOM has been manipulated), you will need a setTimeout, or better the $timeout function from AngularJS.

So now you will get this code.
var myModule = angular.module(myModule', []);
    myModule.directive('myDirective', function ($timeout) {
        return {
            templateUrl: 'partials/timeline.html',
            link: function postLink(elem, attrs, transclude) {
                $timeout(function () {
                    // This code will run after
                    // templateUrl has been loaded, cloned
                    // and transformed by directives.
                }, 0);
Yeah, that's better. But wait, we're not done yet. What if you want you want to do transformations of the DOM based on the positions of the newly rendered elements? Getting the position, offset, height, width of the newly created elements are not guaranteed to provide the correct values, because the browser had not enough time to render and layout those elements. The hack is to further delay these operations.
var myModule = angular.module(myModule', []);
    myModule.directive('myDirective', function ($timeout) {
        return {
            templateUrl: 'partials/timeline.html',
            link: function postLink(elem, attrs, transclude) {
                $timeout(function () {
                    $timeout(function () {
                        // This code will run after
                        // templateUrl has been loaded, cloned
                        // and transformed by directives.
                        // and properly rendered by the browser
                    }, 0);
                }, 0);
If you wonder, why a timeout of 0 really helps, here's a great explanation by John Resig.

Website for "Medizinische Kosmetik Hördt" finished

Yes, it's finished. Design, HTML and stuff by me. For my cousin Ina Hördt, who runs a small saloon (she does not like this word) in Würzburg. Her previous website really needed some polishing.
Anyway, because it's businness-related stuff, I did not want to do it for free. But because moving money between cousins sucks, I had another approach. She will invite my wife and me to a fancy restaurant. Why? Because time is more valuable than money. Because people do matter most in life. Because spending money for yourself won't make you happy.

Oh, here is the new website:

Monday, March 18, 2013

My Wife Blogs

My wife started blogging. I think I will start a cooking challenge, too. That will be fun.

Saturday, March 16, 2013


A friend founded a new company, called it "sandbox interactive". He hired a team of great artists and programmers to create a new MMORPG. One of those kind they would like to play themselves. They needed a logo for their fresh, new company. He told me, that if I liked to, I could give it a try.

This was one of my tries I liked most:

In general, I like typographic logos (see BaSiC). I find logos of this kind are usually very clever and very fun (My opinion may be biased because of stuff like this). So I fell in love doing such stuff.

Oh, in the end, they didn't choose my logo. As already told, they have some really great artists. :)

Friday, March 15, 2013

Why You Should Skip Photoshop

I don't use Photoshop for designing web sites any more. See, why I believe, you should too:

  • You can flesh out the main graphical ideas faster using a pencil and paper.

    When thinking about something general like layout, placement of images, you don't need to cope with unimportant stuff like the color of the dropshadow you want to use. You don't should care about pixel-perfect placement of borders and what not. Just skip photoshop and use a good old pencil.

  • You will be doing once again anyway.

    If you design a website in photoshop, you will have to code that whole stuff in HTML, CSS and Javascript. So why spending so much time to paint pixels in photoshop?

  • You get better code.

    Since the arrival of CSS3, making good-looking website is great: dropshadows, inner shadows, gradients, semi-transparet colors, you name it. Instead of cropping photoshop effects and useing them in background-image, you will use CSS features straight. This results in better code, faster loading, better maintainance, lower overall costs.

  • You are faster at changes.

    Want to change the color theme on your mockup? Want to the navigation to left side, altough it's currently on top? Good luck using photoshop, I'll stick with my editor. Some effects are so much easier and faster to change in an simple CSS file (think "find/replace"), even waaaay faster when using some neat stuff like OOCSS or SASS, than clicking through alle those layers, moving and colorizing items.

  • You can work on one mockup with your colleague simultaneously.

    Image what it would be like, if you could work on your machine with your mockup. And a co-worker would work on the same mockup at the same time on his machine. And when you're both done, some magic would combind the work of you both to one wonderful whole piece. Thanks to version control systems, this is something very old-fashioned in code-based working. Try to do that with photoshop.

  • You'll have no frustrations transitioning from photoshop to browsers.

    Browser handle font rendering different than photoshop does. Browsers don't support all that crazy blending methods. Browsers have differences in rendering among each other. (I guess it was due to the craziness of some photoshop-idealist that people came up with the idea that websites have to look exactly the same on every browser.) You created something in a place where it will finally live. That's good.

  • "It's not just what it looks like and feels like. Design is how it works." — Steve Jobs

    You cannot simulate the behaviour of a website, or an web app, or any app at all, when you just draw pixels. When it comes to testing mockups on future users, you must have something clickable.

  • You save money.

    Well, since Adobe gives CS2 away for free, it's not that true anymore. But let's be honest: photoshop cost money. Alot. Insanely much money. Stick with your favorite text editor, and perhaps GIMP for some crazy image manipulation and everything should be alright.

Still not conviced? No problem. Don't listen to me. I'm just a regular wed dev idiot who thinks he knows something about designing web stuff. Maybe you would like hear what 37signals says about photoshop. Or why the designer at github skips photoshop.

So, maybe it's time for you to improve your design workflow?

Saturday, March 9, 2013

Can You Go With Less?

Some days ago my trousers got ripped. Since I have already decluttered my wardrobe almost to the minimum, I immediately thought: Oh, I have to buy a new one! I already planned where to buy that new jeans, what kind of jeans, was thinking about the color that new jeans should have, and so on. But then I stopped: Hey, just step back a little bit. You do still have one more pair of jeans. You actually have enough trousers. So do you really, really need that new pair of jeans? Could you without that replacement? Could you go with less?

No doubt, I wanted that pair of new jeans. I wanted to purchase something, I wanted to renew my wardrobe, I wanted something new and fancy and fashionable. Even it's just something as boring as jeans.

So I put my which on hold. First, I waited and watched, whether I could still find something to dress without buying new stuff. I gave that experiment some time to either work or fail: About one week should be sufficient. Long story short: It worked just fine. I just don't need it.

This approach also works in the development of web apps. Before rushing into thinking about new features, before starting to adding new functions to your web app, just ask yourself: Will the effort be worth it? Will this function or that feature really add value to my program? Will it be so much better?
Because, just as buying unneeded items, it's not finished after paying the price on the price tag: Clothes need washing, need some place to lay them down when they're not in use, which also costs money (rent, furniture). Software is just the same. The work is not finished after having built the feature: Every feature also must be cared for. Every feature must be debugged. And, the worst of all: every added feature adds over-linear more complexity. This slows down the addition of new, really important functions.

My credo, either in real life, or in software development: simpler is better.

Saturday, March 2, 2013

I Deactivated My Facebook Account

I deactivated my facebook account. One year after reducing my amount of so-called friends on facebook, I decided to let go of facebook. At least for one month, period.

Why? Because facebook does not add much real value to my life. When I look closely at the content which my acquaintances on facebook write, it's entertaining for short period of time, at best. And just a waste of time, at worst. And just because some clicks on a button, or writes a comment, doesn't mean he or she genuinely cares about what you write: I told somebody something he actually already knew, because I wrote something about that on facebook. We had a short conversation about that topic on facebook. But when talking face-to-face, I realized, that he already has completely forgotten about that. Probably becuase he just doesn't care. On the other hand: The things I talked to him in person about, he did still remember, more than one year later.

Facebook is also a tool of shallow, but instant gratification. They will never implement a dislike button, just to keep the experience as positive as possible. The worst thing, that can happen, after you wrote something or uploaded a picture, is that nobody replies. But it's likely that some of your "friends" will click that button, to express he likes that. And boom: there's you instant gratification. And instant gratification is how addictions work, especially the internet addiction.

It's quite noteworthy, that facebook tries very hard to stay active. So they present you this text:

Yeah, sure.
All my 67 friends will no loger be able to keep in touch with me. Oh, really? Most of these friends have my e-mail adress, my phone number, the knwo where I live. And if they don't: It's not hard to find out. I wonder, how many people actually believed that.

So, I think, I will miss nothing. And if I do, it won't be important.

And yeah, this one-month-abstinence from facebook is also to fight my mild facebook addiction: Although I also deactivated my facebook account on my phone, I wanted to check status updates on it today.

Thursday, February 21, 2013

Redesign Of A Church Youth Group Logo

We started here:

This Logo was in use on various flyers, mainly on invitation flyers. But I think, this logo has too many problems: It's motion blur effect is just cropped, The font is hard to read, even harder to remember, the explanation "Brothers and Sisters in Christ" was hard to read, too. The font was just too messy, either. So I wanted to make a new logo

That's what I came up with. In the process I had too much overthinking going. Finally came up with this Ubuntu-like C. It's symbolizes two people, which leave a open gap, just as a welcoming symbol.

Then I added some coloring. The original coloring was a good idea, to have a bright, full saturation bunch of colors, to symbolize freshness and joy. But I experimented nevertheless with some other colors. It sucked.

I had to turn to more light, vibrant colors. I ordered them like in the rainbow, to achieve more harmony. I hope they like it.

But I guess, to make it perfect, I will need to work on the C a little bit more.

Wednesday, January 2, 2013

I've built a standing desk

Yeah, I've built a standing desk from just using spare parts. Now I'm standing writing this post. I didn't want to spend any money on this. Or at least as few money as possible. Originally, I planned to to an IKEA hack. But then I found out, that my screen can be hung up. My mother told me, that she still had a spare part left, that I could use for the standing desk.

So I took a look at it. It was too low. But then the idea appeared to use some wood to give it more height. So after browsing some wood, I've found a round wood, that would, with a little bit of chopping, perfectly fit into the metal stands.

This what I've created. Not very beautiful, but hey, it works!

Tuesday, January 1, 2013

First Version of Bibel Lesen is online

Yesterday, on the last day of 2012, my web app for "BIBEL lesen" went online. More details tomorrow.

Have a great 2013!