This website has changed a lot. Today I want to show you which techniques and programs I used to create it. I also want to introduce you to some people, who really inspired me very much during creation.
Software
Of cause, this website is fully based on Python, which I use in combination with the best website framework out there: Django.
External Apps
Django provides the ability to use plugable applications. Hence, this website uses some third party applications. Some third party applications are so common that I just want to shortly name them: typogrify, comment_utils (latest version by jezdez), django_evolution, extensions and tagging. Besides these applications, others are not that common.
- rstify: Enables you to use the full power of reStructuredText. As I wanted to use some advanced mark-up in my posts, I did not want to write my posts a in Markdown any more.1
- friendly: It is a weak argument, but I wanted a life strem, because everybody else have. There are very different approaches2 out there to implement this. I like the idea of letting friendfeed do most of the work best. And friendly implemented that idea very greatly. I just added some logic to the Entry.get_abolsute_url-method, so that locally available data, such as photos and bookmarks are linked within martin-geber.com and do not send the visitor to the original services (flickr and del.icio.us).
I use some other third party applications, which I customized very much. Following, I want to explain what I changed and why.
coltrane
James Bennett's coltrane-blog (I guess named after John Coltrane) is the core of this weblog. I do not use the original version, because it does not work with Django 1.0, but jezdez' update. I did the following changes to the code:
- I have an own application (syncr.delicious) for bookmarks. Hence, I removed the model Link completely, I really do not know why this is part of a weblog.
- As said above I am using reStructuredText in this weblog, so I changes the Entry.save()-method. I also cleaned up some HTML in this method, to serve valid XHTML 1.1 wherever possible (rstify is not creating valid HTML all the time...). Finally, I added two method calls to the save() method: django.contrib.sitemaps.ping_google() and pingomatic.
- After reading jezdez' entry on autocomplete fields for the tagging application, I just had to add this too.
syncr.delicious
I love all these new services. Obviously, I am not the only one, since there is an application out there focusing on most services: syncr. I use two services form this package syncr.delicious and syncr.flickr.
syncr.delicious met my needs nearly completely. There was one pitfall, I had to customize. This applications synchronizes all bookmarks, and I mean all! So even the bookmarks I marked as private. And there are some boring bookmarks (such as things for IELTS-test) and some I just do not want to be shown publicly.
So I had to add the following few lines to syncr.app.delicious.DeliciousSyncr._syncPost (at line 100):
try:
is_shared = post_elem.attrib['shared']
except KeyError:
obj, created = Bookmark.objects.get_or_create(
post_hash=post_hash, defaults=default_dict)
return obj
return None
syncr.flickr
My very favourite Web 2.0 service is without a doubt flickr. It is so easy to add and organize your photos there. Which is why I wanted to have all my photos there. Beforehand, I uploaded every photo separately to this website -- way too much work.
Well, after I decided to host all photos at flickr, I had to find a way to actually get the photos over to this website. syncr.flickr offered most of the things I wanted. As it 'just' offered most things I had to customize this application very much. It turned out that this application consumed most time. Here are the main changes I made:
syncr.flickr.models.Photo need a lot of changes. I wanted to have additionally to the geo_latitude and geo_longitude attributes, information on the location in human-readable form, so I added geo_locality, geo_county, geo_region and geo_country.
Saving the entire URL for each size is not very normalized, which is why I recalculate the URLs to the images based on the new attributes farm, server, secret and original_secret.
As I hate, when pictures are embedded in HTML without appropriate width and height information, I added these information bits for all sizes (except of cause the square, which is always 75 × 75px of size) to the model.
Moreover, having the dimensions of each size, you know which sizes are set at flickr. So I added methods to check if a size is given, based on this pattern:
@property def has_original_photo(self): if self.original_width is not None: return True return False
Finally, syncr.flickr does not provide a view to show a photo within an album.3 So I added a view called flickr_photo_detail_in_set. Which uses additional methods in the Photo-model to select the next and previous photo of the selected album.
syncr.flickr.models.PhotoSet really needed an attribute to store the photo set order in, so I added order (very original name, I know). As I did not want the template to check if a photo set has a primary photo, I added a tiny method called highlight which returned either the primary or the first photo of the set. Finally, I added a method called get_time_period, which returns the date of the first and last photo in the set.
syncr.flickr.models.PhotoComment is a new model I created. I just wanted to see the (few) comments my photos received so far.
Adding attributes to models is a pointless thing, when you don't also synchronize them. Therefore, I changed syncr.app.flickr heavily. But this is far beyond this entry.
Jukebox
The only non-third party application is my so called jukebox. It is my last.fm synchronization. But to be honest, I got help even here... Martin Mahner provided me his synchronization script, on whose base I created this application. I added more information to my model as well as a YouTube search, to provide a video for each title (if possible). Which is inspired by Martin again, who is doing it on the fly via AJAX.
blueprintcss
blueprintcss is a very easy to use CSS framework, which I use to beautify this website. I really need to thank these guys, who run this project! It really reduced my headache, I usually have while doing CSS, to a bearable level.
Inspiration
This website is inspired by very great people. The following paragraphs are dedicated to them.
Jon Tan's inspiration is the most obvious one: I use the basic ideas of his layout for this page. When I came across his page, I just wasn't able to forget that layout... Hence, I had to use it here -- hope you don't hate me Jon. To be honest, this page is not using the real greatness of Jon's design. His layout is 100% elastic, this one here is not. His layout is based on POSH, this one here is not -- again. I tried to also use typography as Jon does on his page, and there is at least one, who noticed it already. Check out Jon's weblog, he is writing incredible stuff about things like typography.
Martin Mahner really is one of the most creative guys I've ever met (although I 'met' him only in the net). His XING profile is as funny as his About page. But the inspiration for this website really is his Sturmfrei application, which I called Headbanging. (And I still like his name better, which means something like 'home alone'.) My Rummaging section is also inspired by his Bookmarks
URLs
This topic does not really belong somewhere else. So here in an own section. I totally rebuilt my page's URLs. I wanted that my URLs represent a sentience, wherever possible. I leaned of this idea in Jon Tan's blog. Chris Shiflett wrote an entry about it. And I learned from a friend that his company is using this technique as well: Kernpunkt.
IELTS-test
I will take the IELTS-test on 29 Nov '08. And I really need to improve my English. I guess it would help me, if you point out some mistakes I did in this post. This would help me in the writing part. Thanks!
If you see an Error 500 on form submission, your comment was detected as spam. (Try to rewrite it a bit.)
| [1] | Additionally, I wanted to improve my reStructuredText skills, since it is the mark-up you usually use in Python Docstrings. |
| [2] | Eric Florenzano uses the document-oriented database CouchDB, whereas Horst Gutmann uses combined multiple RSS and Atom feeds. |
| [3] | You can reach a photo detail view through a click in the photo stream or through a click in an album. I wanted the detail view to differ based on the click-way the user took. For example the Daw can be displayed like this or that. The second view also shows the next and previous photo within the selected album (here Photography). |
Comments
Anonymous coward commented, on November 25, 2008 at 2:17 p.m.:
[Inspiration can be found in the craziest places!](http://jontangerine.com/ "Jon Tan")
maYO commented, on November 25, 2008 at 2:21 p.m.:
Imitation is the sincerest form of flattery: http://jontangerine.com/>
Piotr commented, on November 25, 2008 at 2:21 p.m.:
I respect all the hard work you’ve put into the new design. However—and I feel very strongly about it—this is an unfortunate rip-off. Period.
David Simmer commented, on November 25, 2008 at 2:21 p.m.:
This "new design,' I believe, counts as quite a bit more than merely "inspired" by [Mr. Tan's design](http://jontangerine.com/). With this many identical details, exactly duplicated icons, double rules, &c. most designers would be justifiably upset on his behalf.
Big Frown commented, on November 25, 2008 at 2:30 p.m.:
"Jon Tan‘s inspiration is the most obvious one: I use the basic ideas of his layout for this page"
Not really what i would called 'inspired by' more an exact copy with a few minor modifications.
Cat-frown
Anonymous commented, on November 25, 2008 at 2:45 p.m.:
"Welcome to a Jon Tan rip off" more like... Grrr!
Martin Geber commented, on November 25, 2008 at 3:03 p.m.:
Wow, that's harsh feedback. I have to admit, I was tempted to hide some of these comments (guess which), I'd do on my [Emma Watson](http://www.emmaempire.net/) website. But this here is web 2.0 -- I just have no right, only the ability, to censor.
First things first, thanks for your feedback. I guess this (very young) post received more comments than all my other posts... I'm very new to this blogging. (Which is why I was tempted to hide some comments, I guess.)
I didn't want to take over Jon Tan's layout. I started modifying it. But every change I did, made it less attractive. I came to a point realizing that this layout is just perfect as it was. Hence, I left it as it was -- as you see it today. Since, I thought naming the original creator would be a good thing. I didn't hurt someone. I think of it like maYO:
> Imitation is the sincerest form of flattery.
But I see that I have to change thing around here, although, I love this layout *so* much.
Cheers.
Hamish M commented, on November 25, 2008 at 3:53 p.m.:
I'm afraid the <em>imitation as flattery</em> mantra just doesn't cut it in the design world. Jon Tan spent a lot of time and effort working on his design. To take that without permission, for profit or not, is wrong. Plain and simple.
There are a lot of designs I love too, but that doesn't mean I'm going to use them as my own.
You've done some cool coding on your site, so don't tarnish it with a ripped design. You may have the best of intentions, but that's not how most see it.
If you don't think you can come up with a design yourself, look around! There are plenty of very nice looking themes, often free, available to you. Find one you like and make it your own.
Best of luck,
Hamish
Steve Firth commented, on November 25, 2008 at 3:59 p.m.:
I think its the little things that are pissing people off the most, e.g the footer "You hopefully see valid..." which is a definate reflection of the original author.
I've had a whole design ripped off me before but the guy was good enough to state it was mine clearly and backlinked in the footer ...
we all stand on the shoulders of giants but when you clone others styles as well as crib ideas you're only stopping yourself of your own style.
Wez Maynard commented, on November 25, 2008 at 4:02 p.m.:
Its the right thing to do Martin. You can also say your site - is YOUR site.
We all have sites we love - but by imitating others work you are cheapening what they have done, and the effort the designer has gone into making their little piece of the internet unique.
Jason Robb commented, on November 25, 2008 at 4:18 p.m.:
> we all stand on the shoulders of giants but when you clone others styles as well as crib ideas you're only stopping yourself of your own style.
That's a good lesson to learn. If you're mocking (copying) someone else's style[sheets], you're not giving yourself a chance to create.
That feeling of "every change I made to it made it less attractive" is true, because they weren't changes to your design. It's more difficult to improve something you didn't create.
You can jump start your designs by grabbing a free theme for Django, and modifying the hell out of that. That's what I did. It doesn't resemble the original theme any more, and I got my feet wet with the CMS underbelly.
Best,
Jason
Jon Tan commented, on November 25, 2008 at 5:09 p.m.:
Hi Martin,
Hamish, Wez and Jason make good points, and they are well-meant. I'd urge you to take them in the spirit they are offered.
I'm honoured that anyone would consider my work to be inspirational so thank you. I don't question your intentions, just your methods and execution. When people have contacted me in the past and asked if I'd mind them reproducing the design, I've always given my permission, freely, and been grateful that they asked. I definitely consider what you've done to be a compliment, albeit a misguided one. This is why:
We all take inspiration from others work, and as Steve says we all "stand on the shoulders of Giants". However, for me, this means starting from fresh with a concept in mind, often inspired by other people. Inevitably the work to refine or reproduce the concept into actual HTML and CSS takes me down paths of learning and exploration that lead to new ideas or improvements. I try to iterate the idea and add my own style to it, thereby making something new.
It seems to me that you've made two mistakes in this instance: Firstly, to copy the code rather than try and reproduce it yourself in your own way. By doing this you've cheated yourself out of all the learning you would have done. Furthermore, you seem to assume that a single paragraph, nobly worded, and well-intentioned is enough to compensate for your first mistake. Thank you for the citation, but to make that assumption is a mistake. With the best of intentions, I’ve deliberately used the word mistake, not to chastise you, but to illustrate something: I think you need to refine your sensibility of what is and is not inspired-by, plagiarised, or stolen, and how to cite our inspirations. Where we draw the line is a personal choice, but reflecting on where to draw the line is something we’ve all had to do at one point or another. I encourage you to do so.
inspirationbit commented, on November 25, 2008 at 5:30 p.m.:
There's not much to add to what has been said before me here, this new design indeed looks more like a rip-off than a mere 'Jon Tan‘s inspiration is the most obvious one'.
I do see you've changed quite a few things on the site, but not enough to eliminate that obvious first reaction of any visitor to your site who's previously seen Jon Tan's site: what a rip-off.
You've obviously have a talent in coding sites, don't let your reputation down by blatantly copying someone's great work. If Jon Tan released his design as a free theme, nobody would question and chastise you, but until then you should do a better job producing a design that was truly inspired by someone else rather than copying it and changing a few minor things.
I know what you mean saying that Jon's design is so beautiful. I myself consider his site as my source of inspiration. I've recently designed a new theme for my own site, and Jon Tan's site also served as an inspiration. But take a look at how it affected my design, and hopefully you'll realize how it is possible to be inspired without copying the design that inspires you.