ShowMeDo Blogs the World » Building a Website

Site Relaunch – customizing that Twitter Widget

wizzy — Thu, 13 May 2010 15:47:00 +0000

With limited time to post any content to the Blog or Twitter micro-blog, being able to reuse/advartise that content seems like a win-win. Twitter helpfully provide a widget for just this purpose but, out of the box, it’s not quite right for my purposes. But with a little javascript, jQuery and CSS magic that can all be put right.

First a little screenshot to show what the vanilla widget looks like, after a bit of customization that you can perform on the Twitter site (you’ll find the widgets hanging off the ‘Goodies’ link at the bottom of your facebook page:

The widget shown is ok but:

I don’t like the header area, with those two Showmedos and a rather redundant Showmedo logo (this is appearing on the Showmedo site).
I’d also like to remove the padding to left and right of the tweets to align the text with the rest of the column content.
The font-used is lucida-grand but I would prefer to use Verdana, the default font for my site.
The ‘twitter’ badge on the bottom left, which is probably most likely to be clicked, takes users to the twitter home page ‘http://twitter.com’ but I would like it to direct to my twitter page ‘http://twitter.com/ShowMeDo’.

With a few a lines of css and jQuery javascript these problems are easily addressed.

First we remove the header by finding its css class, ‘twtr-hd’, and using jQuery to hide it. This is equivalent to setting its css ‘display’ attribute to ‘none’.

$('.twtr-hd').hide();

To change the padding and font-family just add some css to your style-file:

div#contentRight .twtr-widget{
    font-family:Verdana,Arial,Helvetica,"Trebuchet MS",Trebuchet,sans-serif !important;
}

.twtr-widget .twtr-tweet-wrap {
    padding:6px 0 !important;
}

Note the use of the !important flags to override existing settings and escape the css cascade. Now twitter themselves, rather frustratingly, set the widget font-style using an !important tag. This means that in order to override it we need to prioritise our !important using the identity ‘contentRight’ of the right column in which the twitter widget appears.

Lastly, in order to direct users clicking the twitter badge to ShowMeDo’s twitter site we use a little jQuert to change the ‘href’ attribute of the twitter link:

    $('.twtr-doc a').attr('href', 'http://twitter.com/ShowMeDo');

And we have the resulting, pretty satisfactory widget:

Using Python strings and dictionaries to create video embedding templates

wizzy — Sat, 27 Feb 2010 13:31:02 +0000

All Pythonistas will recognize the % operator used to format strings:

print "%s world from %s!"%('hello', 'showmedo')

This is similar to its ‘C’ antecedent but, as you would expect and probably know, Python allows containers other than tuples (in the case containing the ‘hello’ and ’showmedo’ strings) to be used in the string formatting operation.

The use of a dictionary rather than tuple to format the string provides a very handy little templating mechanism, used recently in the addition of video embedding strings to the site.

We start with our text-file template, one long string with no pesky line-breaks:

Note the variables scattered through the string starting with %(width)d. We’ll be using these, together with a Python dictionary, to create our video-specific embedding string. The method that does the legwork is shown below. It is a member of the ‘Video’ class and in this context ’self’ refers to the video instance in question:

def get_embed_string(self, width=425, height=344):
    t_dir = os.path.join(os.path.dirname(__file__),'templates/')
    embed_template = open(t_dir + 'embed_video.txt').read()
    embed_str = embed_template%dict(
                                  width=width,
                                  height=height,
                                  url=movieDirectory() + "%s"%self.get_flv_file_name()
                                  title=self.title,
                                  id='_%d'%self.id
                                  )
    return embed_str

We open the ‘embed_video.txt’ file (using a little Python os magic to establish a relative directory path) and read its contents, storing them in the ‘embed_template’ string. We then use the ‘%’ operator to assign values to the special (of the form %(foo)x) variables in the template, using a Python dictionary.

The resulting ‘embed_str’ string defines a flash

which can be used to embed Showmedo videos in blogs, articles and the like:

Python to the Rescue

wizzy — Thu, 25 Feb 2010 14:59:26 +0000

Showmedo caught some flak from the recent Westhost (our main server-provider) troubles. Catch this pretty interesting thread for the gory details. We were actually pretty lucky as the main site remained standing (not the case for many others) but did manage to lose our cron daemon. As a result some restart scripts which check on the health of, among other things, the Python Turbogears process running the site died. Now this script isn’t needed too often but if the site falls down and we’re literally asleep then it avoids more than a minute or sos downtime. The crontab line in question looks like this:

*/1 * * * * source /.bashrc && /usr/local/bin/python2.5 /home/showmedo/showmedo/cron_start_showmedo.py > /var/log/cron_log

This line tells cron to run cron_start_showmedo.py every minute and the python process will check the health of Showmedo’s main process, our memcache and mysql servers and a few other things and restart them if anything has fallen over. Having lost cron, I needed a quick hack to perform these duties and found some very cool advice here at Slashdot. For various reasons the recommended bash-scripts seemed to be dying on me, and lacking the time or will to try debugging on fairly foreign turf, I hacked a little Python substitute to do much the same:

  1 import time
  2 import subprocess
  3
  4 while 1:
  5     subprocess.Popen(['/usr/local/bin/python2.5', '/home/showmedo/showmedo/cron_start_showmedo.py'])
  6     time.sleep(60)

Not pretty, but at five lines quick and succinct. The line 4 while loop sets things running in perpetuity, line 5 uses Python’s newish (and pretty powerful) subprocess module call the cron_start_showmedo.py module and line 6 takes a 60 second break before continuing the loop.

The script sat duty while I waited for our cron-daemon to return and I slept sounder in my bed as a result.

Testing Flowplayer embedding script

wizzy — Fri, 19 Feb 2010 14:20:44 +0000

This little script, appearing below Showmedo’s video-boxes should allow easy embedding of the videos in blogs, articles and the like. As ever, avoid the WYSIWYG editors or the pristine HTML is likely to be horribly mangled.

If everything goes according to plan, you should be seeing a Showmedo video below (The first part of Chris Perkins’ rather wonderful series on Agile Development Tools in Python):

The font of knowledge

wizzy — Sun, 17 Jan 2010 22:51:09 +0000

One of the nice things about the web and coding in general is the occasional little distraction thrown up in the space of toolsets, coding-practice and the like. Today those eddies in cyberspace have brought fonts to the fore, after a while in which I really hadn’t given it too much thought. But the fact is, for someone hacking code all day a good font, while maybe not as critical as a good editor (VIM btw), is important. In the same way as buying a good bed is important, you’ll have been staring at this font for a good few life years, when time comes to cash in your programming chips. So is worth some consideration.

I generally go for a good, reliable mono-space default which is less likely to go horribly wrong (VIM sometime gets confused with widths) and is cross-platform and easy. Andale Mono tends to do the job, without feeling particularly classy. Anyway, the Consolas font crops up a lot in various programming contexts, e.g. Slashdot, Reddit, Stackoverflow.

So my curiosity has finally been piqued and I’m going to give it a try. I certainly don’t have the balls to try a proportional font, even if readability is improved by 18% or so. Here is today’s Slashdot thread, that undoubtedly gets to the heart of the issue. And a nice post from Hive-Logic about the top ten programming fonts, which suggests I should give Inconsolata a go. Which I probably will. The accompanying Reddit thread, that undoubtedly gets to the heart of the issue.

I’ll buzz back with an opinion when I’ve had time to absorb the changes. Exciting times…

Oh, and for linux bods such as myself, here’s a little hack to get them into VIM.

Taming Flowplayer Pt. 1

wizzy — Sun, 17 Jan 2010 07:43:14 +0000

Getting Flowplayer up and running on the site was not quite as smooth as the nice web-site and clean API suggested. I’ll be documenting the whole gory process in the ‘Building a Website (with Python, jquery etc..)’ series, but in the meantime I’ll mention the hideous hackery needed to get over the final hurdle that is Internet Explorer 7.

Somewhere along the line I was looking to pass a web-address, as part of an html overlay, into the flash-player. This has the standard form:

"http://showmedo.com/videotutorials/video?name=1470110&fromSeriesID=147"

Now if one tries to pass that string into a flashplayer, all hell will break loose. Some of those symbols are going to be interpreted as controls rather than nice, neutral characters. For this reason they need to be ‘escaped’, and Turbogears provides a nice little function “quote_plus”, via Python’s urllib, to do just this. The result is this rather scary looking string:

"http%3A%2F%2Fshowmedo.com%2Fvideotutorials%2Fvideo%3Fname%3D1470110%26fromSeriesID%3D147″

This string makes it through the flash-player in all the browsers we’re interested in at Showmedo and produces a clickable flash-overlay which, strangely enough, takes one through to the page in question. Er, except (and twas ever thus), IE7 (not 8 ), where, when all the escape-artistry has taken place, we find ourselves directed to this non-existent page:

"http://showmedo.com/http://showmedo.com/videotutorials/video?name=1470110&fromSeriesID=147"

which is a very poorly URL indeed.

Now I’m guessing that somewhere at the heart of this is the issue of absolute and relative web-addresses. The second ‘http://…’ should be interpreted as an absolute address, but those unicode escape-characters have confused the system, making it treat the URL as relative, thus adding another root-url.

If I had time to explore this horror I would probably spend it doing something else, but in these time-starved times I just did a little bit of playing around and added a hack-function which undoes the ‘:’ and ‘/’ escapes of “quote_plus”, producing this:

"http://showmedo.com/videotutorials/video%3Fname%3D1470110%26fromSeriesID%3D147″

Which makes it through the browser minefield, but, as seems so often the case with this messed up web-development world, at the cost of some serious inelegance.