Django » athe.la blog

Dynamic CSS Sprites

May 232009

Hi, ok if you don’t know what a sprite is then this post might get confusing quite quickly. I’d suggest having a quick read up and find out what they are. Simply put, the technique of using a CSS Sprite is so that you can reduce the number of HTTP requests browsers make to your server by only showing a portion of a larger image by changing the background-position (so that only the bit you want to see is showing through the object). Another use for them (and this is the one we’ll be using here) is for convenience.

A pie chart of increasing values 0-100% could be stored as 20 separate independent images, named pie-[00-100].gif. This however is inefficient for both the browser, the server, and the user. The user will have to wait for the image to download if they haven’t already seen it (and hence cached it). In my example I have 20 pie charts of increasing values in one image. The background-position css property will dynamically change via server-side code to show only one of the 20 available pie charts.

Here’s the finished article:

Here’s how it was done…

My implementation of a twitter clone in django (Take 2)

Uncategorized No Responses »

Apr 282009

Ok, so I promised this a long time ago but I’ve hardly had the time to work on it and now it’s finally here. A beta version of my twitter clone.

http://www.speedyshare.com/635861674.html

There is a setting you can add to your settings.py to change the number of chirps that show on a single page (default 15): NUMBER_OF_CHIRPS_PER_PAGE

Lots of things have changed! Please look through the code, I’ve commented it so it should be easy to follow (please note as of yet there is no user recognition when @someone is typed in the content of a chirp- That’ll come later)

TimeToggle django custom filter

Uncategorized No Responses »

Apr 212009

It’s always good to keep web pages clean and free of clutter to focus the user experience on what really is important. For this matter, it’s nice to be shown the difference between the time now and the time something was posted in a informal way such as below:

So if you still wanted this uncluttered view but still desired to allow the user to see the exact moment that was, then maybe you’d have to let the user check a checkbox in their user settings are show an exact time when the view of that object is more detailed. However I’ve come up with the idea that on mouseover the nice and informal ‘time since’ can be replaced with an exact time of the post in an easy custom filter.

Here’s the same chirp as shown above but with the mouse hovering over the time.

When the mouse is rolled back out, the informal time since is displayed again.

Seamless user experience showing more detail when the user wants it

from django.utils import timesince, dateformat

@register.filter
def timetoggle(time, id):
link = "<span id=\""+str(id) + "timesince\"> about <a href=\"#\" onmouseover=\"document.getElementById('"+str(id)+"timeactual').style.display=''; document.getElementById('"+str(id)+"timesince').style.display='none';return false;\">"
link += timesince.timesince(time)
link += " ago</a> </span><span id=\""+str(id)+"timeactual\" style='display:none'> at <a href=\"#\" onmouseout=\"document.getElementById('"+str(id)+"timeactual').style.display='none'; document.getElementById('"+str(id)+"timesince').style.display='';return false;\">"
link += dateformat.DateFormat(time).format("g:ia o\\n l jS N Y")
link += "</a></span>"
return mark_safe(link)

Use in the following way: {{ time_object|timetoggle:unique_identifier }} Here’s an example: {{ post.pub_date|timetoggle:post.id }}

wordbreak filter

Uncategorized 1 Response »

Apr 162009

I wrote my own wordbreak filter for django

I realised quickly that when I wrote a long unbroken piece of text in one of my chirps, the div would expand (not good). I did experiment with the overflow:auto CSS property to make the div scrollable horizontally when required but wanted a different method. Facebook uses a <wbr> tag in long words to break them up but in my research I found that  was the most commonly supported amongst most browsers.

The filter works at the template level and uses a single int to determine the number of spaces to insert the break lines. Here’s an example: {{ object.content|wordbreak:”10″ }}

At every nth character of a word that is more than n characters long, a string of the datetime now plus a custom string plus the datetime again is placed. The string is then conditionally escaped to make the string safe to render and then the custom string is replaced with .

from django.utils.html import conditional_escape
from django.utils.safestring import mark_safe
from datetime import datetime
import re

from django import template
register = template.Library()

@register.filter
def wordbreak (string, arg):
    search = '([^ ]{' + arg + '})'
    t = datetime.now()
    wbr = t.strftime("%A%d%B%Y%f") + 'wbr_here' + t.strftime("%A%d%B%Y%f")
    saferesult = conditional_escape(re.sub( search, '\\1' + wbr, string ))
    result = saferesult.replace(wbr,'&shy;')
    return mark_safe(result)

source code also available at http://www.djangosnippets.org/snippets/1432/

My implementation of a twitter clone in django

Uncategorized 6 Responses »

Mar 292009

Updated! This post is now old and out-of-date, I’ve updated the sourcecode and it can be seen at my-implementation-of-a-twitter-clone-in-django-take-2

This is my first ever django app so any feedback would be greatly appreciated. I worked on something simple like this so I can learn the ins and outs of django nice and quickly while still producing something that is of some use in the actual site itself.

As athe.la will be very community-based, I thought it would only be appropriate to have my own kind of twitter so people can post their thoughts and reply to each other.

Further Reading:
A simple ‘Twitter’ clone in Django
s-o-l sourcecode

Specifications

On the homepage people can see the posts written by their friends (including their own).
Another page should allow the user to see posts written by their friends’ friends.
Friendships are one-way. [a] can be a friend of [b] but the vice-versa isn’t necessary.
Posts will have a required content and an optional title.
People can reply to posts. (The posts are called Chirps, the replies Whistles)
These whistles are not themselves chirps and are only seen when the chirp is viewed in detail.

Suffusion theme by Sayontan Sinha

athe.la blog

Dynamic CSS Sprites

TimeToggle django custom filter

wordbreak filter

Twitter

Comments

User Actions

Subscribe to Blog via Email

athe.la blog

Dynamic CSS Sprites

My implementation of a twitter clone in django (Take 2)

TimeToggle django custom filter

wordbreak filter

My implementation of a twitter clone in django

Specifications

Twitter

Tagasaurus

Comments

User Actions

Subscribe to Blog via Email