Philipp Bosch. Web & Mobile Development

West || Ost – on which side are you?

2011-11-27T00:00:00+01:00

For a long time I’ve been wanting to do this. Now I finally found the time.

I’ve been living in Berlin for exactly five years now. As you probably know this city was divided into two parts by the Berlin Wall from 1961 until 1989. Nowadays there are almost no relics of the wall anymore. For I live only a few hundred meters from the former inner-city border, often times when I wander around here I ask myself on which side of the wall I would be if it still existed.

For that reason I created West || Ost. It’s a simple web app for your mobile phone, and it will tell you if you are in the former Western or Eastern part of Berlin (or that you are not in Berlin at all) – nothing more, nothing less. I hope it is of use for someone else.

iOS users: add the app to your homescreen to see it in all its minimalistic glory.

Major upgrade to haz.io

2011-11-27T00:00:00+01:00

It’s been over four months that I launched haz.io back in July. Four months is a long time in web development nowadays, and quite a lot has changed in the browser space. To catch up with that I gave haz.io an overhaul today. haz.io has made use of all available tests in the default Modernizr build. And Modernizr did not have an official release for a while. But a whole bunch of community add-ons have been contributed, and we are adding most of them to haz.io today.

That means that you can now use haz.io to check your browser for support of:

CSS

background-repeat: round
background-repeat: space
background-size: cover
box-sizing
cubic-bezier() values > 1.0
display: table
overflow-scrolling: touch (momentum scrolling introduced with iOS 5)
pointer-events
user-select

HTML5

<details> element
Device Motion Event
Device Orientation Event
File API
<meter> element
<progress> element
Shared Workers

Miscellaneous

Cookies
Custom Protocol Handlers
data URIs
Emoji
Fullscreen API
WebP

Also a minor styling issue introduced with iOS 5 has been resolved.

Check out the updated haz.io.

Some Alfred extensions

2011-08-10T00:00:00+02:00

For a few months now I have been a huge fan of Alfred, the super smart application launcher (and more) for Mac OS X. After having used Quicksilver, Butler and LaunchBar before, I now feel at home with Alfred.

With the latest release (0.9.9) came a long-awaited feature: extensions! Before you were already able to create custom queries – something like jq foo being translated into a URL like http://docs.jquery.com/Special:Search?search=foo that is then opened in your browser. And that was already cool. But now you can create custom extensions that trigger Shell Scripts, AppleScripts, Automator Workflows, etc. And it could not be easier. What’s even cooler is that you can easily import others’ extensions or export yours and share them with others.

I have recently created a few extensions for myself which I want to share with you here. Maybe there’s something useful in it for you.

Generate Password

Generate a random password (12 characters long) and copy it to the clipboard.

Keyword: password
Download: stuff.pb.io/9C2V

Free Space

Calculate the free space on your hard disk and display it in a Growl notification.

Keyword: space
Download: stuff.pb.io/9BWL

URL Encode

Replace special characters in the given string using the %xx escape suitable for using in a URL and copy the resulting string to the clipboard.

Keyword: urlencode
Example: urlencode some text with sp€ciäl çhåráctêrs
Output: some+text+with+sp%E2%82%ACcia%CC%88l+c%CC%A7ha%CC%8Ara%CC%81cte%CC%82rs
Download: stuff.pb.io/9BvD

Say

Read the given string out loud.

Keyword: say
Example: say Hello world
Download: stuff.pb.io/9BaK

Work On

This one is probably a bit specific to my workflow but may give you some ideas on how to create a similar extension for your needs.

Open a new terminal, activate virtual environment (Python), start development server, start compass watch, open the corresponding folder in TextMate and open the local website in the browser. This extensions makes some assumptions that probably do not hold true for you:

I’m using iTerm2 instead of the OSX Terminal.app
I’m developing in Python and using virtualenv and virtualenvwrapper
I’m making use of virtualenvwrapper’s postactivate hook to initiate a screen/byobu session that in turn opens virtual terminals with the development server, compass watch, etc.
I have my project sources in ~/Sites/projectname
I have my development server running at http://projectname:8000/ (doing this using ghost).

Keyword: workon
Example: workon myproject
Download: stuff.pb.io/9D88
Source: gist.github.com/1139327

I will try to update this post when I create new extensions. Many more helpful extensions can be found on the Alfred blog.

Update 1 (2011-08-11):
«Work On» extension added.

haz.io – what does my browser support?

2011-07-08T00:00:00+02:00

Quite often I find myself looking at a browser I’m not 100% familiar with and wondering which of the fancy new HTML5 oder CSS3 features does it support. Does IE9 support SVG – or do I need to use a polyfill? Can I use the Geolocation API in Opera?

Until recently what I did was simply go to the Modernizr website because on the frontpage they had this table of features they are able to detect with their awesome library, and next to each a green checkmark if the browser you were using supports this feature.

Well, with the relase of Modernizr 2 came a new website and sadly the feature table disappeared completely. I don’t know why they did that or if it will ever come back.

Update 1: Read this tweet from the Modernizr team.

Last week I installed Seas0nPass on my AppleTV2. And with it comes a Webkit-based browser app. Me being the curious fellow I wanted to know how decent the support for the recent browser technologies is in that app in order to get an idea what I could do with that device.

That’s when I decided to put together a small website I could go to from any browser on any device, and that would tell me what this browser is capable of. The result of about two hours of hackery is this: haz.io.

It’s very simple. I have a JSON file with a list of features that should be tested for. I’m looping through that with jQuery and building the HTML from it. Each item representing one feature gets a class attribute with the feature name. Utilizing the fact that Modernizr adds the same class names to the <html> element and using some nice Sass trickery I’m able to put either a green «Yep» or a red «Nope» next to each item.

I also threw in a bit of responsiveness in there in order to make the feature tables look nice on mobile devices.

Update 2: I added support for Jdrop because I wanted to be able to save the data from a mobile device and review it on my computer. But unfortunately Steve Souders has not yet picked it up so for now you’ll get an error message when you press the «Jdrop» button at the bottom of the page.

Update 3: I recently removed Jdrop support again because I was unable to find the time to implement it properly. And maybe it wasn’t such a good idea to begin with. Thanks, Steve, for your support anyways.

What do you think about haz.io? Let me know in the comments.

The source is on GitHub.

django-geoposition – a tiny app to store geopositions in Django models

2011-04-04T00:00:00+02:00

Yesterday I was looking for a simple way to add a geoposition (latitude and longitude) field to a Django model without the whole GeoDjango aka django.contrib.gis hassle but unfortunately was not successful. The approaches I found were either too minimal, overloaded or outdated. So I came up with a simple solution myself.

May I present to you: django-geoposition.

Installation

Say you want to store a geoposition in one of your models. It’s three simple steps:

Step #1
Add geoposition to your INSTALLED_APPS.

Step #2
Add a GeopositionField to one of your models.

from django.db import models
from geoposition.fields import GeopositionField

class PointOfInterest(models.Model):
    name = models.CharField(max_length=100)
    position = GeopositionField()

Step #3
There is no step #3.

Usage

Also very simple:

>>> from myapp.models import PointOfInterest
>>> poi = PointOfInterest.objects.get(id=1)
>>> poi.position
Geoposition(52.522906,13.41156)
>>> poi.position.latitude
52.522906
>>> poi.position.longitude
13.41156

If used in a form (e.g. in the admin) the field is displayed together with a Google Maps widget looking like this:

… and that’s basically it.

The source is on GitHub and PyPI. Basic documentation is available on Read the docs.

Consume iCalendar data as JSON

2011-02-05T00:00:00+01:00

While building this website I wanted to incorporate an overview of conferences that I’m going to. The data is already out there at Lanyrd but unfortunately there is no API yet. There are badges available to embed in your site but that didn’t cut it for me.

I then saw that they are offering iCalendar files on the calendar page (in the end it turned out not to be what I want because this data also includes conferences that I’m tracking and not only those I’m attending, but that’s another story). Maybe I could take advantage of this somehow using YQL. Turns out you can consume Atom, RSS, CSV, and tons of other formats, but no luck with iCalendar data.

So I sat down and put together a tiny web service that pulls in iCalendar data from a URL and converts it to JSON. Here’s how to use it:

http://ical2json.pb.io/the-website.com/path/to/file.ics

So for example let’s take some events from Last.fm. They provide iCalendar data at URLs like this: http://ws.audioscrobbler.com/1.0/artist/Shout+Out+Louds/events.ics.

To get this data in JSON format use a URL like this: http://ical2json.pb.io/ws.audioscrobbler.com/1.0/artist/Shout+Out+Louds/events.ics

The response will look like this:

{
  'VCALENDAR': {
    'VEVENT': [
      {
        'DTSTAMP': "20110328T203000", 
        'UID': "LFMEVENT-1748422", 
        'URL': "http://www.last.fm/event/1748422+Shout+Out+Louds+at+La+Machine+du+Moulin+Rouge+on+28+March+2011", 
        'SUMMARY': "Shout Out Louds at La Machine du Moulin Rouge", 
        'LOCATION': "La Machine du Moulin Rouge, Paris, France", 
        'DTEND': "20110328T235900", 
        'DTSTART': "20110328T203000", 
        'GEO': "2.332258;48.884008", 
        'DESCRIPTION': "Shout Out Louds\n\nhttp://www.last.fm/event/1748422+Shout+Out+Louds+at+La+Machine+du+Moulin+Rouge+on+28+March+2011"
      }, 
      {
        'DTSTAMP': "20110329T203000", 
        'UID': "LFMEVENT-1755031", 
        'URL': "http://www.last.fm/event/1755031+Shout+Out+Louds+at+La+Nef+on+29+March+2011", 
        'SUMMARY': "Shout Out Louds + Hello Bye Bye at La Nef", 
        'LOCATION': "La Nef, Angoul\u00eame, France", 
        'DTEND': "20110329T235900", 
        'DTSTART': "20110329T203000", 
        'GEO': "0.130579;45.640423", 
        'DESCRIPTION': "Shout Out Louds, Hello Bye Bye\n\nhttp://www.last.fm/event/1755031+Shout+Out+Louds+at+La+Nef+on+29+March+2011"
      }
      // …
    ], 
    'VERSION': "2.0", 
    'X-WR-CALNAME': "Last.fm Events", 
    'PRODID': "-//Last.fm Limited Event Feeds//NONSGML//EN", 
    'X-WR-CALDESC': "Event listing - supplied by http://www.Last.fm"
  }
}

Of course there’s also support for JSON-P callbacks (?callback=foo).

The source and some documentation can be found on GitHub.

My first app on PyPI: django-tellafriend

2010-08-06T00:00:00+02:00

I should have done this much earlier, but a few minutes ago I uploaded my first Django app to PyPI, the Python Package Index a.k.a. «The Cheese Shop». The app itself is nothing more than a simple tell-a-friend functionality that I extracted from some client project.

While writing the setup.py file (which was really easy in the end) I found this tutorial to be very helpful. The most exciting and surprising part was that python setup.py register is all you need to do to register the package with PyPI, and python setup.py sdist upload to create a source distribution and upload it. After that it’s only a matter of pip install django-tellafriend for anyone to install the app.

And as if that was not already enough new insights for today, I even created some basic documenation using Sphinx. Woohoo!

The app does not (yet) have its own page on this site, but the source is available on GitHub and on PyPI.

Cross-browser RGBA background colors

2010-07-26T00:00:00+02:00

For a website I’m currently working on I needed a way to have an image and on top of that a text box with a partly transparent background color. I didn’t want to use any hacks with AlphaImageLoader and stuff but preferred a pure CSS solution. And I found a nice one, I think.

First, this is what the designer wanted it to look like:

The problem is the partly-transparent background of the tabs and the darker section with the inactive tab titles. For modern Browsers that’s just a matter of background-color: rgba(134,161,11,0.6);. But of course Internet Explorer is a bit late to the party and does not support this.

So I stumpled upon an article by Erig Eggert (sorry, German only) where he describes an approach using a gradient filter. The thing is that this filter allows not only opaque but also partly-transparent colors to be used. Use the same non-opaque color twice for start and end color and you effectively have a partly-transparent area. The syntax is as follows:

filter:progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#9986A10B,endColorstr=#9986A10B);

The values for startColorstr and endColorstr consist of two parts (after the #): the first – 99 – is the alpha transparency (0.6 * 255 = 153, in hexadecimal: 99), the second – 86A10B – is the hexadecimal representation of the color’s RGB values (161, 161, 11). That’s it.

Combine this with the RGBA version and maybe an opaque fallback, and you get this:

background-color: #86A10B;
background-color: rgba(134,161,11,0.6);
background-color: transparent\9; /* reset the background color in IE only */
filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#9986A10B,endColorstr=#9986A10B);
zoom: 1; /* trigger hasLayout in IE6 */

As I’m using Compass in this project I put this in a small mixin:

@mixin rgba-background($color, $opacity) {
    background-color: $color;
    background-color: rgba($color, $opacity);
    background-color: transparent\9;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{'#'+hex(round($opacity*255)) + '' + hex(red($color)) + '' + hex(green($color)) + '' + hex(blue($color))},endColorstr=#{'#'+hex(round($opacity*255)) + '' + hex(red($color)) + '' + hex(green($color)) + '' + hex(blue($color))});
    zoom: 1;
}

In order to make this work we need to add a hex() function to SASS which you can for example put inside of your config.rb. The code is this:

module Sass::Script::Functions
  def hex(decimal)
    Sass::Script::String.new("%02x" % decimal)
  end
end

Update: The site is online now and you can see this technique in action at Universum Group.

2010-05-21T00:00:00+02:00

Tonight will be the opening reception of a group exhibition called «Locate Me» at the Kunstraum Kreuzberg inside the Künstlerhaus Bethanien. My dear office mates Patrick and Dennis will show their project «Leave a Comment» there.

The main intention of this project is to cast an invisible layer of subjective, unauthored information on public space.

To achieve this, we hand out prepared «toolkits», comprised of an ultraviolet-fluorescent pen (UV-pen), a speech-bubble-shaped stencil, and an ultraviolet-torch (UV-torch). The UV-pen and the stencil function as the «authoring tool» while the UV-torch plays the role of the «imaging device». The UV-pen works in a way that allows for leaving a message on a surface, invisible to the human eye, until the message is illuminated with the UV-torch, revealing it fluorescing, temporarily visible to the human eye.

Equipped with the toolkit participants now tag, flag, or comment on things, spaces and places by invisibly but physically writing or drawing on them. Eventually the invisible layer grows into a secret parallel world, with messages potentially lurking in corners, comments unknowingly on display right in front of one’s face, subversively augmenting public space.

Also part of this project is an iPhone app that helps people find tagged spots around the city and also file spots that they tagged themselves making it easier for others to find those. I built this app based on HTML5 technology and a CouchDB server component for storing the spots.