Program & Design Tips, tricks, tutorials, and tools on programming & web design

Django, Flatpages, Markdown, and Syntax Highlighting

For what should have been an easy task, this turned out to be extraordinarily difficult.

I assume you have Django already installed. If not, the tutorials on djangoproject.com aren’t too terrible, provided you’re not on a shared server (that’s another story!). I’m using Flatpages, but you can use whatever you want to follow along with this tutorial.

1. Install Markdown and Pygments for Python if you haven’t already. If you’re on Ubuntu, you can `sudo apt-get install python-markdown` or `easy_install Markdown` and `sudo apt-get install python-pygments`.

2. Go into your Django app and `mkdir templatetags`. This should be at the same level as `manage.py`, `settings.py` and `urls.py`. Then `cd` into that directory, and `touch __init__.py` (so that it becomes a module) and then add another file called something like `tags.py` (don’t name it “markdown.py” — that’ll bite you later). Paste this code in there:

Yes, I’m leaving the link in there; I didn’t write that code.

3. Go into `settings.py` and add your app to the `INSTALLED_APPS`. You actually have to `import` your own app too; this baffled me for about an hour. My app is called `tech_eval` so my `INSTALLED_APPS` looks like this:

4. Like I said, I’m using Flatpages, so my template looks like this (I saved it to djangoproject/app/templates/flatpages/default.html).

Notice how we filter the content with markdown, make sure the codehilite extension is used, and flag it as `safe` afterwords (otherwise Django will automatically character-encode everything).

5. Hopefully this is already working for you at this point, but you probably want to add some color to your code. You can generate the appropriate css file with this:

Some different styles you can use (at least on my system) are:

(stolen from here).

Or just copy and paste this CSS file if you’re lazy:

And that should pretty much be it. Let me know if I missed anything or this was too difficult to follow along.

All I want is a drag-and-drop CD burner

I know I’ve mostly been posting code snippets here, but I originally started this site to post more in-depth tutorials. This isn’t going to be one of those. I’m taking a spin and would like to say a few words on the design of good software — the second half of this site that’s been neglected.

My brother’s girlfriend asked me to burn some files for her using her laptop the other day, so I tried. I didn’t think it would be so difficult.

So I popped in the blank disc, and iTunes came up, exclaiming that it could burn stuff for me. Fine, I’ll try that. It told me I had to create a new playlist (Why? I’m just going to delete it in 5 seconds). So I did. And then I tried to drag and drop my videos onto the playlist. Nothing. Okay. Let’s dig through the menus: “Add to playlist”? No. “Import files”? No. It looks to me like I have to add the files to my library, then search for those files that I just added, figure out how to add them to my newly created playlist, burn them, and then delete the playlist I didn’t want in the first place. Brilliant. Except I couldn’t figure that out, and I still haven’t the faintest idea how to use iTunes. Call me idiot, iTune-lovers, but software really shouldn’t take more than about 3 minutes to figure out how to do what you want with it.

Next I tried ImgBurn, something a friend recommended to me, which was indeed great for burning images, as the name suggests, but pretty horrid at burning a list of files. Fail.

I eventually just went into “My Computer” and dragged some files on it. Windows told me I had to format the CD (it was rewriteable) first. Fine. That took an extraordinarily long time, and then finally when it started burning it told me it would be finished in 0 seconds, but it literally took between thirty minutes and an hour. I know her drive isn’t that slow, it’s a new computer.

CDBurnerXP has worked great in the past for me, but apparently it’s a failure on Windows 7. The “used space” bar was just plain wrong, and when I tried telling it that it was an idiot, it threw a fit and crashed.

Nero was good, back in the day, until they figured out they were getting popular and thought they could get away with adding whatever crapware they wanted. Now I just refuse to support their bullshit.

All I wanted to do was to drag-and-drop some files onto a program window, list them for me, and tell me how much space I’ve got left. Click burn, and that’s it. Don’t touch my files, don’t convert them, don’t move, copy, sort, cache or archive them. Don’t install useless crap on my computer, and don’t have me six thousand features I don’t need.

Give me what I want. Make it big, bold, obvious, easy to find. And make it do what it’s supposed to do when I click it. No more, no less. Is that so hard? Why can’t people develop nice, clean, simple, intuitive UIs? We’re not asking you to invent anything new, just take what’s already been done, and works, and use that. There’s frameworks for it. Use them!

Insert into MySQL datetime column from PHP

You can use this simple function to convert a unix timestamp (like the one obtained from time()) to MySQL datetime format:

I’m using this instead of MySQL’s NOW() function because my MySQL server isn’t localized to my timezone, but my PHP is by usage of date_default_timezone_set.

Edit: And you can use this function to convert back the other way (you can do this directly in the SQL too, but just in case)

Simple Rounded Corners with CSS

I know there are umpteen billion tutorials on rounded corners out there, but here’s an easy way that I like to do it. Requires only one image, and allows you to nudge your text as close to the corners are you like.

If you want a 3px radius corner, have a black background, and white foreground, you need to create a 6×6 (i.e. radius*2) image of a white circle on a black background. This method won’t support transparency unfortunately.

The HTML:

The CSS:

Adjust all the “3px”s to match your radius, and modify the background attribute to meet your needs, and style content however you want. You probably want to put some padding on there. The important thing is that #content has position:relative so that the corners are aligned to the content box rather than the page.

I used this technique on my personal site, mnbayazit.com.

Easy Current Page Tab

So, you have a bunch of links along the top of your page, and you want to highlight the current one when you click on it. Easy enough to do if you copy and paste the entire navbar onto every page and add some CSS to the current tab, but that’s just bad practice! You want to throw the navbar in a layout, and still have it work.

Well, here’s an easy solution! Just drop this in your layout:

And make sure you set $currentPage properly. You could use $_SERVER['REQUEST_URI'] if your URLs are in the same format (leading and trailing slashes if necessary).

Update: Made a little wrapper function out of this too.

This one adds a class to each <li> too so you can style it in your CSS.