Tag Archives: Programming

Django Upgraded

I finally took the time to upgrade to Django 1.0.2 and migrate my blog to the new release this weekend. Django 1.0 has a lot of improved features, including an upgraded comment system which has allowed me to re-enable comments on my blog.

There was a few speedbumps while upgrading, but everything is well documented at djangoproject.org so it wasn’t too bad.

Instance Arrays in Flash

One thing that I thought wasn’t planned very well in Flash 9 and AS3 is having a bunch of instances on your stage, and then having to declare each one in your ActionScript files. Up until now, I have been naming all my objects something like “obj0”, “obj1”, “obj2”, etc and then in my constructor, adding each of those objects manually to an array one at a time. The problem with this, obviously, as it doesn’t cater well to expansion or large numbers of objects. If I added more objects to the stage, I’d have to update the code.

Here’s code I came up with today:

public class RollingNumberDisplay extends MovieClip {

    protected var digits:Array;

    /**
      * Constructor
     */
    public function RollingNumberDisplay() {
        super();
        var counter:uint;

        digits = new Array();

        counter = 0;
        while(this.hasOwnProperty("digit" + counter)) {
            digits.push(this["digit" + counter]);
            counter++;
        }

        trace("length=" + digits.length);
    }

}

Creating CSS layouts with the 960 Grid System

Put up your hand if you like spending hours creating CSS layouts. Or not…

There are not many aspects of web design that take more time and involve so many frustratingly small calculations than getting everything pixel-perfect in a CSS-based layout. Starting right at the sketches of a design on paper or in Photoshop, there are decisions that have to be made that can affect the CSS code you’ll have to write later. A new system called the 960 Grid System is here to help.

I just stumbled upon the 960 site while looking through del.icio.us/popular one day, and noticed something that jumped out at me right away:

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

I recently started a couple designs, including this blog, which were designed for 1024 x 768 resolution, however at the time, I arbitrarily chose to have a width of 900 for my design. I wish now, that I had read about the 960 Grid System beforehand. Tonight I downloaded the zip file and opened it up to see what it was all about.

There are 2 variants of the 960 Grid System: A 12-column layout and a 16-column layout. Each variant starts by dividing 960 pixels into either 12 or 16 columns with exactly 10 pixels of padding in between each column. After dividing into small columns, you can then arrange boxes that are multiples of the column widths. It’s sort of hard to explain in words so take a look at the demo page that is set up at 960.gs.

The 960 package includes everything you need to get you started. Begin with a printable PDF that you can use to sketch out your design by hand, divided into either 12 or 16 columns. Once you’ve sketched out your design on paper, you can use a template designed for Photoshop, Fireworks, OmniGraffle or Visio to create your digital design. Finally, once you’ve sliced up your image, you can use the pre-made CSS styles to create your layouts. In your HTML, all you have to do is create a container div and assign a class of either “container_12” or “container_16”. Then you simply use the numbered grid elements along with clearing divs to make layouts. The whole system is pretty simple, and it makes a lot of sense.

Note: I’m not a big fan of the underscores used in the class names, however these days, it’ll be a rare occurrence if a browser chokes on the underscores. For me, it’s just a matter of good code.

I’m very glad to have found this system. I will definitely be using it in the future. I believe that it will be a huge aid for designing layouts and then converting to CSS. No more arbitrary column widths or painful margin, padding and width calculations in CSS. Hoorah!

From nothing to something with Django

Recently I published a new version of my site, including this blog. The entire site is now powered by Django. For those who don’t know, Django is a web framework written in Python and I have been toying with it for a few months. Feeling fairly comfortable with most aspects of Django, I set out to rewrite my blog… again… from scratch. As I worked on the redesign, I monitored how long each task took me. Here are my results:

  • ~45mins: Getting my rough models set up. I started with only articles and tags
  • ~45mins: Setting up rough views for articles. Listing all articles, displaying article details
  • ~20mins: Adding Django’s basic comment system to the articles
  • ~15mins: Integrating a JavaScript Markdown implementation into the admin site for writing articles
  • ~15mins: A few touch-ups to allow inactive articles and comment filtering
  • ~30mins: Adding pagination to the article list
  • ~30mins: Setting up Context Processors to display information in the sidebar on every page (tags, latest post, etc)
  • ~15mins: Going through and tagging all my articles (I hadn’t previously done so)
  • ~40mins: Setting up my RSS feeds. I now have feeds for latest posts, and latest comments
  • ~2hours 20 mins: Moving my entire project to my production server and configuring apache.

Total Time: ~6.5 hours

I’m not sure whether you would consider that good or bad. I feel like it went pretty well, however some tasks took longer than I’d hoped, mostly because of something tiny and stupid or because I would have to refer to documentation. For example, I used subversion for version control and when I deployed my blog, I had to install subversion on my production server. This added some unexpected time to deployment. I also hadn’t used some of the features such as comments and RSS in Django previous to this little project.

Overall I’m pleased with how clean Django is. It really emphasizes clean object-oriented design. There are lots of built-in features that can be really helpful, however it takes a while to learn them all or even discover them. The documentation for Django is alright, however I’ve found that the DjangoBook is a very good learning resource. I even ordered the hard copy to have at my side while I code.

Anyway, enjoy the new blog. I finally got tags working properly and added a new feed for comments. Let me know what you think.

Unblocking backgrounds in Flash

A long while ago I wrote an article describing how to block background elements in Flash. The problem I used to encounter was that my background elements were clickable through other movie clips on the stage.

Recently, I’ve had the opportunity to use Flash CS3 and ActionScript 3.0 and my problems with click handling have been flipped upside-down. The annoyance I encounter now, is that I cannot click through movie clips, even if their alpha is set to be completely transparent. For example, if I have a series of clickable movie clips positioned under another clip acting as a glare.

Read More →

Flash addXMLPath example

I was recently working on an application in Flash which required the use of Flash’s Locale class. It didn’t take long before I was consulting the documentation for some of the methods and I ran across the addXMLPath method. Adobe (Macromedia at the time) was nice enough to include an example of how to use Locale.addXMLPath, however the example provided doesn’t even use addXMLPath()! The example provides no extra help whatsoever. I’ve created this small article to give an example on how to use Locale.addXMLPath().

Read More →

Pre-approved accounts using OpenID

I recently read Simon Willison’s article called Six cool things you can build with OpenID and became very interested in the concept of “pre-approving” user accounts by using OpenID.

For those not familiar with OpenID, I will give a short introduction, although it’s explained in slightly more detail on the OpenID How-it-works page. OpenID is a way of indentifying yourself by using a unique URI, similar to how web sites have unique URIs that you can visit. As an example, I could make my OpenID “www.chrisinch.com”. Then, if your blog was OpenID-enabled, and I wanted to leave a comment for you, I would simply enter my OpenID URI “www.chrisinch.com” into your form. I would then go through some steps to confirm that I was the owner of my OpenID, and once I had done so, I would be allowed to post comments on your blog, without having to register with you. I can use my OpenID on any OpenID-enabled site in exactly the same way.

Traditionally, web applications require you to register for an account before you can begin performing actions using your account. When you create a new account, you typically have to validate your account by email, and once approved, a database entry is created and your account can be used. An example will make this concept clearer:

Let’s say I own a photo gallery, where I like to upload photos from events I attend. Recently I travelled with some friends to somewhere hot (wouldn’t that be nice?) and lots of people were taking photos while on vacation. Now that I’m back at home, I would like to allow the people I travelled with to upload photos to my photo gallery. Prior to OpenID, the best I could do was ask each of them to register for an account at my site and once registered (and a user row created in my database) I could then give each user permission to upload their photos to my gallery. Even if I know that Bob usually chooses the username “bob” when registering at web sites, there are several reasons why I can’t create that account for him ahead of time. What if there is someone already registered with that name, or what if Bob doesn’t want people to know his real name?

If my site is OpenID-enabled, and I happen to know Bob’s OpenID, “openid.bob.com”, then I am able to create and preapprove his user account before he even visits my gallery site giving him permission to upload photos right away. I can do this because I know that no one else can log in as “openid.bob.com”. I can pre-approve Bob for an account on my site and begin performing actions on his account all before he logs in for the first time. Perhaps I want to write him a custom welcome message or tag him in photos I’ve uploaded. It’s all possible thanks to pre-approval using OpenID.

This concept of creating user accounts before the users actually visit your site has plenty of uses. It has obvious uses for social networking. I believe that viral marketing will thrive with this concept. My friends will feel more pressure to start using a web site if I have already added information to their account. Is this a good thing or bad?

Another idea that I will present in closing: If more sites embrace OpenID, then perhaps we will also start seeing data shared between sites. Two sites that I frequent are Amazon.ca and HomeDepot.ca. Maybe one day, the two sites will share information about me (with my permission of course) and Amazon will suggest books on the subject of my recent purchase at Home Depot.