*
Zootool V1
I had a look at all the old pictures on the Zootool Flickr account and felt pretty nostalgic when I saw screenshots of the first version from three years ago. It’s crazy how time goes by and though three years do not seem like a very long time in “real life” it feels like ages on the web.
new website/portfolio
Man, this took me ages! I finally uploaded a new version of my website, with new work and projects and a complete new design. The old website really embarrassed me with all the old stuff, but I was too lazy to update it.
The great thing is that I finally got a playground to experiment with some new stuff like media queries, random colors through php and I also built a new logo with html and css. Make sure to check it out: http://bastian-allgeier.de
Singapore-Bali-Nerd-Vacations
Nadine and I had some great holidays and time to relax in Singapore and Bali this summer and here are my favorite nerd-sights:
1. Not sure if we paid the right price for our food in that chinese restaurant in Singapore…
2. The Singapore Airlines entertainment system runs on Red Hat. Good to know that it is not Windows.
3. The Bali Apple Store
Webkit Magic
After finding the solution to one of the most annoying iPad MobileSafari bugs/features some weeks ago, I found a solution for an even worse Safari CSS nightmare today:
Border-Radius-Artefacts
(All credits for this screenshot go to Mike Harding)
This is such a crap. You want to make use of the awesome
-webkit-border-radius attribute and unfortunately picked the wrong border/background color combination. Safari can be such a sucker, but here’s Mike’s fix:
-webkit-background-clip: padding-box;Zootool Default Avatars
When I started working on the new version of Zootool I was so fed up of having boring default avatars. They ruin every design, they are super anonymous and they just suck even if you come up with some crazy creative default avatar design.
I’d been working with Arno Richter on a wiki project for our faculty in University years ago and we generated random pixelated header images out of all the user uploaded pictures. It worked like a charm and looked pretty stylish.
So one day the idea came up to adapt that concept for the Zootool default avatars. It took me about one hour to implement and the result was really cool. After half a year the whole thing still works great, so here’s a little insight on how it is done:
When I started this Zootool had about 200,000 entries in the database – most of them with decent previews. So all I have to do when a new user signs up, is to get a random entry and make sure it has a thumbnail. Here’s a simplified version of the query I’m using for this:
SELECT thumb FROM entries WHERE thumb_exists = ‘y’ ORDER BY RAND() LIMIT 1
You actually shouldn’t do the ORDER BY RAND() stuff on large tables and I use a different approach for that, but that’s another story :)
All I got to do next is to crop and scale that thumbnail down to 4x4 pixels and scale it up again, using the nearest neighbor algorithm and – tadaa – there’s a nice random default avatar for the new user.
The following code is again a simplified version. You can customize it for your own needs however you like.
20,000
Zootool just reached 20,000 users! This is far beyond anything I expected when I started this thing over 2 years ago as my bachelor project and I can’t tell you how happy I am at the moment :)
Disable inner shadows on iPad inputs
Shaun Inman found out that you can disable the default inner shadow on search inputs on the iPad with
-webkit-appearance: caret;
This is something I’ve been searching for a while. Don’t know why Apple added this at all!!
Download Google Webfonts as TTF
Google Webfonts is an awesome service – it’s free, it has some great fonts (though there are only a few fonts available) and the implementation is super easy. They also offer a great preview of all fonts, which is pretty helpful to select the right one, but there’s no official way to download the font file to be able to test it in Photoshop or whatever. IMO it is really essential to design with the final typeface and not a placeholder, so here’s a short instruction how to get the TTF files in Safari:
If you don’t have the Web Inspector activated go to “Safari” > “Preferences” > “Advanced” and make sure “Show Develop menu in menu bar” is activated. Once you got this the “Develop” menu will appear next to the “Bookmarks” menu.
1. Go to the Webfonts Directory and click on one of the fonts.
2. Click on the “Specimen” tab or if available on “Variants”
3. Hit CMD+Alt+I or go to “Develop” > “Show Web Inspector”
4. Select the “Resources” tab and activate the “Fonts” filter.
5. Select the font/variant you are looking for from the menu.
6. Switch to the “Headers” tab and copy the “Request URL”.
7. Open that URL in Safari. The download of the TTF file will start instantly.
8. Go to your “Download” folder and install the font.
Disclaimer: This little tutorial is not meant to help you steal those fonts!!! Please stick to the Google Webfonts Terms of Service and just use the font files to test your design before you implement that stuff with the provided code in your website.
Cross-browser kerning
I just found a new css wizardry thingy, which actually looks like there’s at least a cross browser solution to have better kerning for the web. Very interesting indeed.
body { text-rendering: optimizeLegibility; }
Cross-browser kerning-pairs & ligatures
Update: just added it to this blog and Zootool.
Noticed any difference? :)
Gity Icon Replacement
I discovered Gity – an awesome Git app for OS X – some weeks ago and couldn’t use it because I was still running Leopard and Gity needs the snowy version. At least I’ve upgraded and so I downloaded Gity yesterday and gave it a try. All I can say so far is that I really love it. I use the command line every day, but I’m still one of those design nerds who feels more comfortable when I actually see what I do and Gity is just perfect for handling all that freaky git stuff with a nice and shiny UI.
The only thing I’ve been missing so far was a decent icon. (Yeah, I understand that three xxx thing and the Terminal icon stuff, but it just looks ugly.)
I’m in love with the Octocat from Github, so I decided to make a replacement icon out of it. Tadaa here it is:
All credits for the amazing icon illustration go to Simon Oxley. My god, this man is so talented. Too bad he got a flash site :)
