url::Encode | (andstuff)

Tumblr

2010-09-09T19:08:00.002-10:00

Moved to tumblr: http://urlencode.tumblr.com/

Restoring Browser Functions to Clickable DIVs Without Javascript

2010-08-20T06:44:00.003-10:00

Occasionally the situation comes up in web development where you have a highly styled tag such as
<div> or <li> that you want to make clickable. This often happens when you have a list of items in which you want to make the entire item clickble instead of just the title for example. The standard fare for doing so is to set { cursor: pointer; } with CSS then to bind the .click event to the tag (in jQuery as so)....

$('#myDivTag').click(function() {
    // your code here
});

Don't get me wrong -- this does work. However, in doing this what you loose is the standard functionality that most viewers are used to; things like middle clicking to open in a new tab, right-click to copy URL address, and so on. There is also the lag between when the page renders visibly to the user but the javascript hasn't downloaded and $(document).ready hasn't yet fired. In this case the tag will not be clickable but the mouse cursor will indicate that it should be.

I've been dealing with this more so lately and there are a couple of ways to solve this problem.

The first is to wrap the <div> (or li or whatever else) tag in an anchor tag <a> and set that anchor tag to { display: block; }.

<style type="text/css">
   #myDivWrapper { display: block; }
   #myDiv {  }
</style>

<a id="myDivWrapper">
    <div id="myDiv">
       ... content ...
    </div>
</a>

By wrapping the div tag in an anchor you've restored the default functionality viewers are used to with a clickable item. This works in most browsers but for the most part things like <div> and <li> are not allowed inside of an anchor tag per HTML language specifications. In a sense in doing something like this you are rolling the dice that the next version of IE9 strict mode won't render when it hits this.

It also feels kind of weird, because all of the styling that was on #myDiv, things like height, width, float, etc., now need to be applied to the anchor tag instead. And no one likes wrappers. They just clutter things up.

The 2nd way to solve this problem which I've started using lately is to have an absolutely positioned anchor overlay the area of the div. Consider the following...

<style type="text/css">
    #myDiv { position: relative; }
    a.clickable-overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        display: block;
        background-color: transparent;
    }
</style>

<div id="myDiv">
    ... content ...
    <a class="clickable-overlay" href="#wherever"></a>
</div>

Here's what's happening: At the end of the <div> (or li or whatever) we're adding an anchor tag. The parent div is set to { position: relative }, and the anchor tag to { position: absolute; }. If you're not familiar with position absolute you're missing out. The way it is designed to work is that any element positioned absolutely is done so in relation to it's parent (or any parent's parent) that is positioned either relatively or absolutely. What this means is that in setting our <div> tag to position: relative the anchor tag with position absolute will be positioned relative to the div. Top 0 and left 0 will be the top left of the div, and height 100%, width 100% will cause the anchor to fill out the area of the div.

The result is that we are left with a transparent anchor tag that completely overlays the area of the div, providing the default clickable behavior users expect. The last CSS trick to making this work is to set z-index to 1, forcing the browser to always render the anchor tag over whatever content is in the div.

The positives to this method are that 1. we restore the expected clickable behavior without javascript (meaning it also works as soon as that markup is rendered and not when $(document).ready is fired) and 2. we're using correct HTML syntax.

I should point out there is a downside to this method, in that because the anchor overlays the div, the contents of the div are no longer selectable or clickable. Depending on your application this may be negligible.

Top 10 Programming T-Shirts That Don't Make Sense

2010-08-12T17:27:00.000-10:00

mind.location = unknown
http://www.zazzle.com/javascript_mind_tshirt-235892961444457742
I wonder what the value of the variable unknown is?

import_soul
http://www.zazzle.com/import_soul_tshirt-235715645595867505

What is import_soul? It's written as a keyword. If it were a function it should be import_soul(), however the keywords for this shirt include "python" which makes me thinking they meant import soul.

Function Check_Drunk()

http://www.zazzle.com/function_check_drunk_tshirt-235954739548677347

Where do I begin with this one... drink is treated as a global variable but never declared globally. Then there's the awesome conditional if "bra = true" which will always return true because a single = is assignment not evaluation. Lastly, none of the functions are ever called, they're just declarations of.

Programmers Cool Club

http://www.zazzle.com/cool_programmers_club_tshirt-235068746346060145

No comment needed.

.ninja { color: black; }

http://www.zazzle.com/css_ninja_style_class_tshirt-235091799113607617

This one's amusing and almost worth getting, but the behavior of visibility: hidden; is such that it keeps screen space allocated for the element and simply does not render it. I personally believe a true ninja would { display: none; }.

Geek Power

http://www.zazzle.com/geek_power_tshirt-235232870665206831

No geek would ever intentionally rip the cord to their keyboard like that

Computers are Only Human

http://www.zazzle.com/computers_are_only_human_tshirt-235670270460766159

Apparently I didn't get that memo.

SELECT TOP 25

http://www.zazzle.com/the_best_sql_query_ever_tshirt-235031072069340726

Aside from using the vendor-specific "TOP 25" (MS SQL), the comment at the bottom brings to light the poor execution of this SQL: It should be sorted DESCENDING

Do You Speak Code

http://www.zazzle.com/do_you_speak_code_tshirt-235290525576102199

There's No Crying in Programming

http://www.zazzle.com/no_crying_in_programming_card-137314447034339159

Python Templating For the Web (Random Ideas)

2010-08-06T20:20:00.001-10:00

Well it's past midnight and I'm musing about web templating in Python for Tornado or AppEngine. The thing about most Python templating engines that I notice is...

There's kind of an obsession with being agnostic about everything. You can render JSON and XML and whatever else you want with our engine! When is someone just going to make a really awesome templating engine for the web and not try to be everything to everyone?
The value in a template engine to me is how easy it is to allow the template to include logic that's independent of the controller that's generating it. For example, you might want a server-side ad manager on every page, but you don't necessarily want to put the code for that in every controller. Solution? Some engines call it modules, some call it template tags, but whatever the name there is some type of logic that's independent of the controller. The problem is that most of these pieces of independent logic are needlessly complicated. (side note: Django has gotten a bit better about this since I first used it two years ago).
Maybe some better support for lazy-loaded values which are available for all templates... things like static URL, etc.

So it's late and I'm thinking, what if there was a template engine, and I mean one specifically for the web, which represented an HTML document more so as a Python class. Every root element or element with an ID is a property of the document. Tags can interact with each other... Maybe this is turning out to be too much of a DOM implementation in Python. Maybe this is a bad idea. Or maybe I should try coding up a prototype just to see what it's like.

But it's not quite a DOM. The DOM is concerned with specific structure, where as we're only concerned with a loose abstract structure. It doesn't matter of the area where scripts are printed too is in the or right above , what's important is that there is a scripts area which sub-modules can access.

Instead of {% extends "some_html_file.html %}, it could be {% extends templates.master %} where templates.master is a python module.

(15 minutes later)... you know it kind of sounds like I'm trying to re-invent ASP.NET WebForms...

Komodo Edit

2010-07-27T19:34:00.002-10:00

I like Komodo Edit. It's simple but at the same time functional enough to be useful. It also does code completion, supports Python, and is cross-platform. (Side note: If only it supported Scala, then it would be like the **aaaaahhh** perfect editor).

I've had this idea kicking around for a while of starting a Komodo color themes/schemes website. The idea is simple. You create a theme, then share it on the site. Other people can download it or Vote/"Like" it. Most-liked themes bubble to the top. I'm thinking of a simple architecture using Google App Engine (python) + Tornado. We'll see.

In the mean time I sure did waste like 2 hours of what should have been productive programming time putting together a bunch of themes for Komodo Edit. Here are some previews of them...

"Heart Dry"

"Fancy Terminal"

"Happy Day" (currently used)

"Monokai"

"Phoenix"

"Transformers"

"Work Scheme"

Formatting Console Output in Scala

2010-06-04T23:58:00.001-10:00

So it's midnight and I'm programming Scala (heh). I'm actually starting to be able to write little scripts in Scala. Here's a quick one that I put together, inspired by Chapter 3 of "Programming Scala" which reads a source code file and formats the file to the screen with line numbers.

I tried to be as functional as possible. The "formatSourceLine" I felt was getting close to the concept, using recursion, immutable values, and always returning a value (avoiding the side effect of printing from within the function).

The actual output from this script is:

D:\Development\Scala>scala file.scala file.scala

    1 | import scala.io.Source
    2 |
    3 | if (args.length > 0) {
    4 |
    5 |     def formatSourcePrefix(line: Int, suffix: String, max: Int = 5):
    6 |         var prefix: String = ""
    7 |         for (i <- 1 to (max - line.toString.length))
    8 |             prefix += " "
    9 |         prefix + line.toString + suffix
   10 |     }
   11 |
   12 |     def formatSourceLine(lines: List[String], line: Int = 1, 
   13 |         val out = output + formatSourcePrefix(line, " | ")
   14 |         if (lines.length > 1)
   15 |             formatSourceLine(lines.tail, line + 1, out)
   16 |         else
   17 |             out
   18 |     }
   19 |
   20 |     // Read file from disk
   21 |     val lines = Source.fromPath(args(0)).getLines().toList
   22 |
   23 |     // Print results to screen
   24 |     println
   25 |     print(formatSourceLine(lines))
   26 |
   27 | }
   28 | else {
   29 |     // Print out proper syntax
   30 |     Console.err.println
   31 |     Console.err.println("scala file.scala [filename]")
   32 | }

The Difference a Space Can Make

2010-05-29T11:05:00.002-10:00

How can you print the string value of a floating point value of 5 in Scala?

scala> 5.toString  // Wrong!
res16: java.lang.String = 5

scala> 5. toString
res17: java.lang.String = 5.0

In the first line scala counts the "." as syntax for "toString method of Integer 5". The second line uses the "toString" method in infix notation, applying the toString method against the floating point value of 5.0.

Here's another example where a space can make a big difference in type:

scala> 4.+(1)
res20: Double = 5.0

scala> 4 .+(1)
res21: Int = 5

Abstract Types in Scala

2010-05-29T09:07:00.000-10:00

Whenever I learn new programming languages, there is invariably features of the language that will surprise me. One of those in Scala (one of many actually) is abstract types. When I first read the textual description of an abstract type, I wondered what use it would ever entail. However, the authors of Programming Scala gave a very clear example of proper use.

This code snippet comes from Chapter 2 of the book.

Starting with an abstract class, we can declare an abstract type. In this case, type "In" on our class "BulkReader" is abstract. It's there, but it does not have a concrete type associated with it. Yet, our value "Source" is typed as type "In". How can this be?

abstract class BulkReader {
  type In
  val source: In
  def read: String
}

The magic comes when we declare a concrete version of "BulkReader" and can assign a concrete type to "In":

class StringBulkReader(val source: String) extends BulkReader {
  type In = String
  def read = source
}

class FileBulkReader(val source: File) extends BulkReader {
  type In = File
  def read = {
    val in = new BufferedInputStream(new FileInputStream(source))
    val numBytes = in.available()
    val bytes = new Array[Byte](numBytes)
    in.read(bytes, 0, numBytes)
    new String(bytes)
  }
}

Very cool! In our two concrete instances of "BulkReader" we assigned two different types to our abstract type "In". Note that the value typed as In, "source" is actually part of the concrete class's constructor which is, at this point for me, completely mind bending in terms of flexibility towards class design.

I have a feeling it will take me some time to get used to this notion and power before I really start to design code that makes use of it.

Language of the Summer: Scala?

2010-05-26T08:40:00.000-10:00

I've been quite fascinated with Haskell as a language. It's purely functional, ridiculously strict typing, and algebraic syntax were completely foreign to me before I began learning about it. I wouldn't say that I learned Haskell, but I did learn about it. I learned enough to know that it's a bit over my head at this point and that I need a better theoretical foundation before I attempt to tackle it again.

So in the mean time I wanted to take on something more transitional. I had considered F#. It seems like a great choice, especially since I already know C# and am familiar with the .NET platform. But it's a Microsoft language and I was hoping for something more portable (actually, I'm harboring a secret desire to use a functional programming language to one day code for Lego Mindstorms NXT with).

I happened to stumble upon Lift again yesterday. I had heard about it before when I was looking at other web frameworks after watching a keynote from the author of Seaside at Djangocon.

However, I realized something important about Lift and Scala which I had never caught before: Scala compiles to java bytecode. Java can be run on Google App Engine. I can use Scala/Lift to write for App Engine.

Suddenly I'm hooked. Oh, awesome, and the book "Programming Scala" is available freely online. Mmmm... looks like I have my reading for my traveling this summer.

Getting a Python/Django Job

2010-05-25T16:05:00.000-10:00

Getting a job doesn't seem like a fun activity to many people. I'm in the thick of it right now. The problem is when you have a skill set that you really like and that you feel confident with that no company wants. I feel like I'm in that place with Python/Django.

Sure, I've worked on the "corporaty" systems, ASP.NET, MVC, C#, etc., but what I'd really prefer to work on is python/Django on the web. It doesn't seem like there are any companies hiring for that in Denver (or maybe I need to come up with a better way to find them?). So I end up in an odd place where I wonder if it would be worth a.) going back to the corporaty things that get jobs (MSSQL, ASP, etc.) or b.) learning a newer but similar technology (RoR), and gamble that someone will hire me because I have previous experience in Django.

No one in Colorado needs Django work done?

I Bought It at Ross!

2010-05-11T12:57:00.001-10:00

I was waiting on the wife at Ross Dress for Less the other day, when I happened to notice something: They sell laptop bags! Since when did Ross start carrying those? Surprisingly they had a selection of name brands at, you guessed it, discount prices.

I ended up buying a Targus Messenger Fusion in dark gray/green for the Toshiba 13.3" I got a few months ago. It was marked down to $18.99 (compared to $26.50 online). It's a pretty nice looking laptop bag with built-in padding and tons of pockets/storage. It has an interesting feature in that it comes with multiple straps so you can keep the green one out for a young/hip look, or put the dark one one for a more serious professional look.

Accessing Inherited Models from the Parent in Django

2010-01-14T15:15:00.009-10:00

One of the neat features of Django's ORM is Model inheritance (table-level). It allows several neat data design patterns to occur. Here's an example. Let's say we're developing a website for a game company. The company sells two types of products: board games and video games. All of the products will share some data in common, name and product_id for example, but we also need to store specific details about each. Using model inheritance we can do something as follows.

class Product(models.Model):
 name = models.CharField(max_length=75)
 product_id = models.SmallIntegerField()
 price = models.DecimalField()

class BoardGame(Product):
 num_of_players = models.SmallIntegerField()
    game_type = models.CharField(max_length=50)

class VideoGame(Product):
 PLATFORM_CHOICES = (
   ('wii', 'Wii),
   ('xb3', 'Xbox 360'),
   ('ps3', 'Playstation 3'),
 )
 platform = models.CharField(max_length=3, choices=PLATFORM_CHOICES)

In a real use-case scenario you'd most likely have more than 1 field per, but for this example I wanted to keep things simple.

The way Django implements this, if you were to query one of the child models, you'd be able to access the methods from the parent models...

b = BoardGame.objects.all()[1]
print b.name

>>> 'Djangopoly'

Another thing that's cool is child instances have a parent instance record. Using the "Djangopoloy" game from above, which is technically type BoardGame, one could still query Product and retrieve it.

p = Product.objects.get(name='Djangopoly')

This is really useful, but sometimes you need to go the opposite direction, and this is where Django's implementation stops. The link can't go from a Product model instance to a BoardGame. It can't retrieve state as if it was of type BoardGame.

print p.platform

>>> CAN'T DO THAT!

Because the need for this seems to be arising more often than not lately for me, I put together a re-usbale bit of code to overcome this limitation. I'll post the code below (a GitHub gist), but using it is actually quite simple.

It works by providing an abstract model that the parent model inherits from instead of models.Model:

from inheritance.models import ChildAwareModel

class Product(ChildAwareModel):
...

  pass

Then, an inner class "Inheritance" is supplied to describe children of the model.

class Product(ChildAwareModel):
 ...

 class Inheritance:
     children = (
         'myapp.models.BoardGame',
         'myapp.mdoels.VideoGame',
     )

Only children that need to be reversed to should be set. Once that is configured, a method "get_child_model()" will become available, and can be used like so:

p = Product.objects.get(name='Djangopoly')
b = p.get_child_model()
print b.num_of_players

>>> 4

I'm finding this particularly useful when I've created an aggregate type page -- that is a page that shows a summary of all the generic types (Product) -- but need to on user-click show them some type of product-specific detail.

The implementation for ChildAwareModel is below. Save it somewhere on your python path and enjoy. :)

ChildAwareModel Gist

Version Control Commit Messages

2010-01-12T08:11:00.002-10:00

Soooooo... I think I'm going to put in a proposal at work. All commit messages for our Mercurial DVCS need to be in 16-year-old girl language....

"Like, the JSON api is totally updated"
"fixed the buggies kk thx bai <3"
"this import module is sooooo cuties!!!!!11`1"

Meh @reading (but Yay to reading on the iPod)

2010-01-10T23:55:00.005-10:00

I can't be the only programmer who finds reading a chore? And what about those 5-billion page programming tomes? Am I the only one who never finishes those?

It happens to be that I just found something about reading that totally rocks: Reading on the iPhone/iPod Touch is totally different (better different). HA! I bet you didn't know I was going to say that (well if you read the title of this post you probably did.. that was totally a spoiler).

Now it seems that I am finding I actually enjoy reading again (did I just write that?). I ended up landing a very fetching iPod touch for Christmas which has been having it's battery drained near non-stop since the package was opened. As a curiosity of sorts, I threw a lot of the big name apps onto it, including Kindle for Ipod, and purchased a book I had been eying for a while, Javascript: The Good Parts (Douglas Crockford), to try out the experience of reading on the iPod.

It seems so wrong but I found I actually prefer reading on the iPod. I've read a number of paper books, and I've tried reading eBook/PDFs on the computer, but neither of them really jump out at me. But the iPod... the iPod I like.

The reason for this, I suspect, is that reading on the iPod is not intimidating. The screen only shows 2 paragraphs at a time. I don't need to be worried about the rest of the book, I'm only looking at these 2 paragraphs. What I think this does for me is it allows me to read the book without feeling like I have to rush to get to the end.

My wife thinks it's silly, but whatever -- I'm already on my 2nd book.... Real World Haskell (Donald Stewart). Oooooh yes, it's Haskell time! Expect some really weirded out blog posts from me in the future about functional programming.

Where Have All The Good DatePickers Gone?

2009-12-18T16:16:00.010-10:00

Is it just me, or is it hard to find a good jQuery-based date picker? Or maybe I'm just picky.

The widget needs to support selecting a date range (there goes most of them). And it needs to be able to support configuring a starting and ending time. And it has to support Themeroller (there goes whatever few remained).

So as it seems is starting to become a norm for me, I'm working on a custom jQuery widget. It's been provisionally named "LoneRangeSelector". It's for a custom web-app-calendar sort of thing.

Provisionally, here's my progress thus far...

The main goal is to make an interface that's quick and easy to setup the date-related parameters of an event, without having to enter 4 different fields (start date, start time, end date, end time).

The secondary goal is that as a byproduct of having a single widget, there is quite a bit less error checking that needs to be done (ie. it's impossible to type in an ending date that occurs before the starting date).

I actually re-created the calendar code instead of trying to modify jQuery UI's datepicker, though it does implement identical css classes so the Themeroller appearance is the same.

The lower portion has been one of the more challenging. I think the time slider needs to have some type of time indication on it, because just at first glance there's no way you konw that it spans midnight to midnight.

Concept:

Using Google's jQuery CDN with Django when not in development

2009-12-11T09:31:00.003-10:00

I wanted to transition the Django site I work with primarily to use Google's jQuery CDN. However, when developing locally, it's often faster to just use a local copy. What I wanted was a way to toggle which copy of jQuery was being used based on the environment.

Environment Detection
Before we can toggle the jQuery location, we need to have a way to detect which environment we're running in.I previously blogged about how I have my settings.py configured. There are different ways to do this. One is to use local_settings.py, the other is to have conditional code in your main settings.py which determines values. Either way works.

As for my setting, on the webserver is a folder structure that resembles...

    \webroot
       \django_devel
       \django_prod

My webserver pulls double duty, hosting both a production version ("prod") and a staging/testing version ("devel"). In my settings.py file I'm using this to determine which environment Django is running in...

import os
DJANGO_ROOT = os.path.abspath(os.path.dirname(__file__))

#
# Globals for determining settings
#
STAGING = PRODUCTION = DEVELOPMENT = False

if 'django_devel' in DJANGO_ROOT:
STAGING = True
elif 'django_prod' in DJANGO_ROOT:
PRODUCTION = True
else:
DEVELOPMENT = True

Most likely, you'll have some other what you're determining your environment. In that case just substitute that.

{% jquery template tag %}
Now that we have the required support code to detect what environment we're running in, putting together the actual implementation is simple.

I decided to go with a template tag. It's simple and easy.

import settings
from django import template
from django.conf import settings

register = template.Library()


# -----------------------------------------------------------------------------
#   jQuery
# -----------------------------------------------------------------------------
@register.tag
def jquery(parser, token):
 return JQueryNode()

class JQueryNode(template.Node):
 def render(self, context):
     jquery = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'
     jquery_ui = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'
     if getattr(settings, 'DEVELOPMENT', True):
         media_url = getattr(settings, 'MEDIA_URL', '/media/')
         jquery = '%sjs/jquery-1.3.2.min.js' % media_url
         jquery_ui = '%sjs/jquery-ui-1.7.2.custom.min.js' % media_url
     return '<script type="text/javascript" src="%s"></script><script type="text/javascript" src="%s"></script>' % (jquery, jquery_ui)

There are a couple of things to note here.

First, there's a hard-coded path in this code. Because I plan to always use this template tag every time I need jQuery, I felt confident doing so as it leaves only one place to edit. However, if you won't be following that rigid of an implementation pulling the locations of jQuery out and into a settings.py file would probably be a smart idea.

Second, I'm implementing my type of detection for the environment. This probably differs from the majority of Django users.

When all is said and done, all that needs to remain is to simply drop the tag into base.html and we're good to go.

{% load jquery %}{% jquery %}

How can I create a page that regularly updates itself with Django?

2009-12-10T09:20:00.007-10:00

It seems this question has been coming up a lot on Stack Overflow, and I wrote a pretty lengthy response which I'll include here. The original question is #1883266.

Q: I'm building a web application that needs to have content on the page updated in real time without a page refresh (like a chat or messaging application). How do I do this with Django? In other words, how do I use AJAX with Django?

A: There's a lot going on in order to make this process work...

The client regularly polls the server for new chat entries
The server checks for and only replies with the newest
The client receives the newest entries and appends them to the DOM

This can be confusing when you're first starting because it's not always clear what the client does and what the server does, but if the large problem is broken down I think you'll find it's a simple process.

If the client is going to regularly poll the server for new chat entries, then the server (django) needs to have some type of API to do so. Your biggest decision will be what data type the server returns. You can choose from: rendered HTML, XML, YAML, or JSON. The lightest weight is JSON, and it's supported by most of the major javascript frameworks (and django includes a JSON serializer since it's that awesome).

# (models.py)
# Your model I'm assuming is something to the effect of...
class ChatLine(models.Model):
  screenname = model.CharField(max_length=40)
  value = models.CharField(max_length=100)
  created = models.DateTimeField(default=datetime.now())

# (urls.py)
# A url pattern to match our API...
url(r'^api/latest-chat/(?P<seconds_old>\d+)/$',get_latest_chat),

# (views.py)
# A view to answer that URL
def get_latest_chat(request, seconds_old):
    # Query comments since the past X seconds
  chat_since = datetime.datetime.now() - datetime.timedelta(seconds=seconds_old)
  chat = Chat.objects.filter(created__gte=comments_since)

   # Return serialized data or whatever you're doing with it
   return HttpResponse(simplejson.dumps(chat),mimetype='application/json')

So whenever we poll our API, we should get back something like this (JSON format)...

[
 {
     'value':'Hello World',
     'created':'2009-12-10 14:56:11',
     'screenname':'tstone'
 },
 {
     'value':'And more cool Django-ness',
     'created':'2009-12-10 14:58:49',
     'screenname':'leethax0r1337'
 },
]

On our actual page, we have a <div> tag which we'll call <div id="chatbox"> which will hold whatever the incoming chat messages are. Our javascript simple needs to poll the server API that we created, check if there is a response, and then if there are items, append them to the chat box.

<!-- I'm assuming you're using jQuery -->
<script type="text/javascript">

  LATEST_CHAT_URL = '{% url get_latest_chat 5 %}';

  // On page start...
    $(function() {
      // Start a timer that will call our API at regular intervals
        // The 2nd value is the time in milliseconds, so 5000 = 5 seconds
        setTimeout(updateChat, 5000)
  });

  function updateChat() {
      $.getJSON(LATEST_CHAT_URL, function(data){
          // Enumerate JSON objects
            $.each(data.items, function(i,item){
              var newChatLine = $('<span class="chat"></span>');
              newChatLine.append('<span class="user">' + item.screenname + '</span>');
              newChatLine.append('<span class="text">' + item.text + '</span>');
              $('#chatbox').append(newChatLine);
          });
      });
  }

</script>

<div id="chatbox">
</div>

Efficiently View Apache Log Files on Windows

2009-12-08T11:02:00.005-10:00

One of the annoying things about using multiple platforms is when one platform has a useful utility (no matter how small) and the other platform doesn't. Have you ever needed to regularly check an Apache log file on your Windows development machine? The shell user inside me says "just tail it"... but this is Windows.

However, I just found a really amazing tool called BareTail.

BareTail "connects" to a log file, and shows you an automatically updated (live) tail of that file. It basically allows this situation to happen:

I have a window up on my developer machine (in the 2nd monitor) which is the tail of the Apache error log. Every time something is written to that log, BareTail pushes it into the window on my screen. I see log entries in real time.

Let me tell you, it makes debugging Apache error log issues much more efficient.

Time for Python Neenjah!

2009-12-08T08:42:00.003-10:00

I happened upon an administrative assistant today who was renaming files using Windows Explorer. She had a folder with about 50 or so sub-folders, many of which contained sub-folders of their own. Every file needed to be renamed with the company name prefixing it. So for example, the file "january-charts.pdf" needed to be renamed to "Company - january-charts.pdf".

"You know", I said, "I could help that go a little faster if you're interested." I happened to know that these files needed to be sent as of yesterday, so I figured she wouldn't mind me helping to trim an hour or two off them getting out. That must mean it's time for Python Neenjah! (In case you missed it, that was a somewhat veiled reference to xkcd 'Regular Expressions')

A month or two ago I had put together a re-usable python module to allow easy recursively searching a directory. I know, I know, python already includes similar functionality. But it was weird to me, and I wanted a simpler and more flexible format. The module I built, inspire by some ideas I found around the internet, allows a callback to be specified whenever a file is found. It means you can do virtually anything from that directory search, and never really be concerned about how it does it.

from dirsearch import DirSearch

def search_callback(file):
 print file

dir = DirSearch('C:\Path\Whatever', show_output=True)
dir.search(search_callback)

The source for dirsearch.py is included below.

Well with my module it only took a few lines of code to put together a command to complete the task at hand.

DirSearch.py

rrename.py

MarkEdit in Django

2009-12-04T09:10:00.002-10:00

Being primarily a Django developer, it was only a matter of time until MarkEdit came with Django integration.

I added to the GitHub repo today a simple app which provides a widget that renders MarkEdit through Django. It's probably a bit more difficult to use than the jQuery plugin because it makes some assumptions about your Django configuration and usage (as do many Django apps). In any case, an initiated Django developer should be able to figure it out just fine.

In addition to the source update, the wiki has also been updated with documentation for the Django integration.

An of course, here's a screenshot of MarkEdit in the admin (running under Grappelli):

MarkEdit Moved to GitHub

2009-12-03T13:19:00.004-10:00

I have relocated the MarkEdit repository to GitHub to give it more community accessibility. The GitHub repo now also includes an improved wiki.

MarkEdit now has it's own project page, also hosted by GitHub: http://tstone.github.com/jquery-markedit/

The project page finally puts a working demo online (along with 4 other advanced demos, showing some of MarkEdit's flexibility).

IE TextRanges, Selections, and Carriage Returns

2009-12-02T23:02:00.003-10:00

I spent several hours this week trying to track down a bug with programmatically selecting text via javascript.

if (textarea.setSelectionRange) {
 // Set selection for Mozilla-ish browsers
    textarea.setSelectionRange(start, end);
 }
 else {
 // Set selection for IE
    var range = textarea.createTextRange();
 range.collapse(true);
 range.moveEnd('character', start);
 range.moveStart('character', end);
 range.select();
}

Assuming that 'textarea' is the element of the textarea, and 'start' and 'end' are Number values that indicate the start and end of the selection, respectively.

I was managing this in MarkEdit by keeping a state object that recorded the "Before Select" (everything before the selection), the selection text, and the "After Select" (everything after the selection).

So it seems easy to implement right?

start = beforeSelect.length;
end = start + select.length;

That doesn't always work!

It works sometimes, but occasionally the selection will be the proper length, but randomly offset by 3-7 characters. It took quite a bit to figure out (that's an understatement). Here's what a lot of debugging and experimentation came up with:

When Internet Explorer creates a Range or a TextRange object, it converts all line returns to Carriage Return/Line Feed format; basically [0A] -> [0D 0A]. Easy to counter? Just determine all the instances of [0D] and [0A], subtract the two, then you have the offset? That's what I thought too, but even with the offset, the discrepancy persisted.

So it was time for a new approach. What if we converted all of the [0A] characters in the textarea to [0D 0A]'s ? Again, the offset of the selection persisted.

Here's what I finally narrowed it down to be: When you create a TextRange, IE doesn't actually re-render the text internally, converting all [0A]'s. However, when you request the text (TextRange.text) it converts it at that time. This means if you were to get the length of the selected text, TextRange.text.length, it would be longer than what the TextRange is seeing internally! When using .moveEnd on the TextRange, the value counts the position from the internal text, not from the text it gives you.

That is reeeeeeediculously wrong. The final solution is to "sanitize" the text TextRange gives you by removing all [0D] characters from it. From there you can accurately calculate the selection position and give the TextRange the proper coordinates.

Whew... that was several hours needlessly wasted by IE (again).

MarkEdit Documentation

2009-11-30T08:57:00.002-10:00

For those interested, I finished the preliminary documentation and sample code for MarkEdit. It can be viewed via the Bitbucket Wiki.

The documentation includes...

Installation
Sample code
Complete API reference
Complete configuration option reference

Developer Blog Entries

2009-11-28T09:38:00.002-10:00

I haven't done any development in the past few days thanks to this holiday weekend, however I did have a chance to catch up on my blog subscriptions (which were really beginning to pile up). My wife just peeked over my should and said I was also spending quality time with her.

Ryan Tomayko on Unicorn (ruby), "because it's Unix." A neat post on using some of the unixy functionalities of ruby to develop a network service. I'd really like to try it, but I don't have a POSIX computer up and running. Hmmm... I should fix that.
Simon Willison talks about Node.js, a server-side javascript framework which looks ridiculously cool. Having been spending a lot of time working on MarkEdit, I can certainly appreciate some of the non-blocking/callback ideas that it implements. However, again with the lack of POSIX. It doesn't yet run on Windows. I really need to remedy that.
Again from Simon Willison he mentions flXHR -- A replacement for XmlHttpRequest, but implemented by an invisible flash (.swf) wrapper layer. It's a really interesting concept, though completely hacky. Why bother with this? 1.) get around cross-browser issues, and 2.) get around browser security issues (like making an AJAX request to API on another domain for example).

WMD Editor & jQuery

2009-11-23T16:55:00.008-10:00

I've been using Dana Robinson's WMD Editor fork for a couple of months now. It was a great place to start. The problem is, it's becoming a real pain to customize. Small things were taking huge amounts of time to accomplish so I had a tough decision to make: Continue to use WMD Editor and have to spend hours for customization that should only take a minute or two -OR- re-write the UI myself on top of the existing Markdown rendering component?

Introducing: MarkEdit -- the Javascript MarkDown editor built on jQuery (to replace WMD Editor). It's currently being hosted on BitBucket.

Built On jQuery/UI -- Lighter weight code and less cross-browser issues
Themeroller Support -- Use existing or custom jQuery UI Themeroller themes
International -- Supports the loading of an alternate language
Sensible Defaults -- You should be able to get up and running with 1 line of javascript
Configurable -- Almost all defaults can be overridden very easily upon initialization
Public API -- Interact with whatever part you're interested in
Documented

Since everybody loves screenshots, here's the editor running under a jQuery theme and using the Chinese language translation.

And again here's a translated popup asking for the URL to insert an image...

And here's preview mode using a different theme but still in Chinese...

So far I've invested about 15 hours into the project with it being probably around 95% complete for initial coding. There is still a TON of testing to be done. I haven't even tried to fire it up in any of the fussy browsers yet.

I actually wrote a whole lot about it so far -- it's all up on the Wiki. There is still lots more documentation to come.

Using jQuery's Dialog Function to Get User Input

2009-11-20T11:12:00.012-10:00

The jQuery UI library provides a really useful method: dialog. It allows any tag to be rendered as a fake "window" in the browser in either a modal or non-modal way. It's easily a natural choice for any time we need a dialog to fetch input from a user.

What makes it somewhat difficult for some programmers to use is that it's an asynchronous function. It opens the dialog then keeps on executing code. Here's why this can be confusing.

Let's say for example we're building a web-based instant messaging client. A feature of this client would be the ability for the user to change their nickname, even after they've already logged in (similar to how MSN works). We've decided to implement this functionality by adding a button on the IM toolbar "Change Nickname". When the user clicks it, the dialog should popup, ask them for their new nickname, and then perform whatever action should be taken to update the nickname.

The Natural-But-Doesn't-Work Method
The natural way (using synchronous code) to achieve this would be something like the following:

(Javascript code is included above. I'm not sure if this renders via RSS)

But as you can see from the code, this won't work. Why? Dialog is an asynchronous method. It's easy to get comfortable with synchronous dialogs, after all, Javascript has a built in one: input(); However in this case we need to develop a new strategy for working with an asynchronous dialog.

Now lest you be tempted to do something like while(!closed) { // do nothing }; let me just ask you now: stop!. That's fighting the system. That will most likely lock up the browser, and it's an absolute waste of resources.

Using Callbacks to Trigger Behavior
Stepping back from the problem, what we really want is that we have some code, and we want it to run only when the user has finished using the dialog boxes. Being asynchronous, the dialog function actually provides a measure for doing so: Callbacks. When we defined the OK and Cancel buttons, we specified an anonymous function() that would be called whenever that button was clicked. This is a call back. We can use this exact same mechanic to signal our other code when it should run.

But how? Here's some updated code...

(Javascript code is included above. I'm not sure if this renders via RSS)

To accomplish this would could create a "gating" function -- a function which be responsible for dispatching either a call to our dialog, or a call to the code which should be run when we have a value. This is implemented in the example code as getAndSetNewNickname. In addition to the new method we've also added a parameter to the getNewNick method: callback. This parameter will allow us to pass a function that will be called whenever the "Ok" button is clicked. In our implementation, this function happens to be the same function that's calling it. The situation we end up with is a recursive callback which will call our function a 2nd time when it has a value.

The end result? Our setNewNickname method only gets called when we actually have a value. You've successfully gotten user input, and didn't have to restore to timeouts or a weird while loop solution.

Happy jQuery'ing!

A Truly Modular Web Framework

2009-11-17T18:22:00.007-10:00

Web development is weird. It's weird because the rendering of the UI (in HTML) feels so incredibly disconnected from the logic and objects that are represented by the UI. It's weird because the UI is usually rendered by a server-side template facility, but is occasionally rendered by cilent-side javascript.

Here's an example. I find the decorator pattern really cool. Let's say I'm writing a blog. Actually, everyone writes blogs. Let's say I'm writing a Stack Overflow clone. In Stack Overflow users can ask questions. Other users can answer them. Users can also comment on a question (different from an answer), or comment on an answer made by another user. The shared functionality is placing comments on an object.

The mechanics of a comment aren't particularly unique that they need to be bound to a specific object. A UI is presented for a user to type in a message. The server should store the messages and associate them with a specific object.

So let's say in this example the comment functionality is implemented as a decorator generically which can be applied to any object. So we have the question functionality, implemented perhaps as a class, and we can decorate it with the comment functionality. If later we decided to implement a "News" section, and need each news post to also have comments, we could also decorate the news posts using the same decorator as well. The comment functionality at this point is a self-contained decorator.

Programatically this doesn't seem like a difficult suggestion (maybe), but what happens when we need to render this out to HTML? Even worse, let's say the comment functionality requires javascript to fetch comments via AJAX -- then what?

I think the problem here is that whatever is doing the rendering doesn't know what the object Question or Answer looks like. It also doesn't know what the decorator Comments looks like either. If it did, it could render them intelligently. I'm thinking of decorated rendering here.

Functionality similar to what I'm describing can be achieved in current web frameworks, but usually through things like template tags, framework widgets, or partially rendered views. But that's not quite what I'm talking about. It still requires a lot of repetition and isn't really modular. Template tags still need to be coded very specifically.

Part of the issue is that in web development frameworks we are using HTML to describe too many things. Take Django's template system, which despite many people's complaints, is quite functional and I actually kind of like. Django templates provide the facilities of context (passing variable data to the template), template tags (custom bits of code that can be arbitrarily executed) and filters (helpers to modify data to conform to a particular output).

But for each page template that is created, the following things are being handled in that one template:

How a given object should be rendered
How the page is layed out
What media files need to be linked/included in order for this page to rendered properly (js/css/etc.)'

I'm thinking out loud here, but what would a rendering system (and supporting framework) look like which separated what the template system did into separate pieces?

Each object has it's own multiple HTML "interpretations", outfits if you will for the class. Decorators can call the decorated class's outfits if needed.
Page templates become more semantic and less about display -- they're interested in where pieces go on the page, not necessarily the markup to render it to appear a certain way. More of an outline than a sea of div tags. It seems very often the task of laying out what goes on a page, and implementing the UI are two completely separate tasks, and yet most template systems I've used force you to do them together.
Media files are handled programatically in code, somewhere, somehow. An object outfit can for example say "I need this javascript file" and the template engine will react accordingly. This prevents <script> tags and @import statements being strewn all over, and allows the framework to pass those media files off to a handler that decide if something should be done with them (ie automatically put <script> at bottom and <link> at the top, compress the JS, etc.). Disclaimer: This is probably a harder problem than I'm thinking it is, especially when AJAX gets involved.

More to come on this. I might have to do some experimental code. Should template engines help you by handling some pieces of the Javascript on the client? Hmm...

Django South Fork

2009-11-06T13:41:00.006-10:00

I really like South (the database migration app for Django). I even wrote about it a little bit on Stack Overflow (#1590944). In short, South lets you create python-based migrations to change the database schema. The translation is that you can have a Django model, make a change to it, and then have south change the database schema for you. It's generally awesome.

But there's this one catch to it: It doesn't seem to be able to order migrations on a project-wide basis. This is a biggie for me.

Consider this scenario:
app1.model has a foreign key to app2.model. App2 is a 3rd party app and you decide to extend it. So you create app3.model which inherits from app2.model. Then, you update the foreign key on app1.model to point to app3.model. In order for the app1 migration to run successfully, the app3 migration that creates the table app3_model needs to have run first. How do you control this?

So I forked South. Yeah, bitbucket and all.

My fork works by creating a manifest file (in JSON format for easy human and VCS editing). Each time a 'startmigration' is created, a new entry is added to the manifest. The manifest entries can be re-ordered whenever without any real consequence. When a 'manage.py migrate' is run, if no app or migration number are given, the migrate command will default to running the migrations in the order of the manifest. If an app or a migration number are given, 'migrate' will run as it normally does.

I also added another command 'manage.py create_manifest' if, for whatever reason, you need to manually create a new manifest file.

For the most part my fork is a drop-in replacement. You can use it, gaining the manifest functionality, and not have to modify any of the way you work.

The only caveat I've found so far is in creating a new manifest file. When a few manifest is created, it generates its list from the applied manifests in the south_migrationhistory table. What it doesn't do is add manifests that are waiting to be applied to the new list. It's a limitation. At some point I'll probably develop a fix for it, but in the mean time you can add entries to the manifest file manually if they need to be applied (but have already been generated by 'startmigration').

Happy migrating.

Komodo Edit Theme: Candybar Ver 1

2009-11-05T16:39:00.007-10:00

Well what's the fun of a new editor without a new color scheme to go along with it? Here's my latest Komodo Edit color scheme. The colors were inspired by Mozilla Bespin, but I've certainly taken things in my own direction.

Python

HTML

Instead of uploading the file somewhere (which would create a broken link a year from now), I'm going to insert the text right here.

To use this theme copy all of the text and save it as "Candybar ver 1.ksf". Save the file to C:\Documents and Settings\[username]\Application Data\ActiveState\KomodoEdit\[version]\schemes. Under Windows Vista and 7 Save to the "Users" folder instead of "Documents and Settings".

This is my first release of this theme. Expect minor tweaks in the future.


Version = 4

Booleans = {'caretLineVisible': False, 'preferFixed': True, 'useSelFore': False}

CommonStyles = {'attribute name': {'fore': 8904824},
'attribute value': {'fore': 13676752},
'bracebad': {'back': 2501686, 'bold': 1, 'fore': 128},
'bracehighlight': {'back': 2501686, 'bold': 1, 'fore': 2721475},
'classes': {'back': 2501686, 'bold': True, 'fore': 5546676},
'comments': {'back': 2501686, 'fore': 9411235, 'italic': 1},
'control characters': {'back': 2501686, 'fore': 7897997},
'default_fixed': {'back': 2501686,
                'bold': False,
                'eolfilled': 0,
                'face': 'Monaco',
                'fore': 11581373,
                'hotspot': 0,
                'italic': 0,
                'size': 10,
                'useFixed': 1},
'default_proportional': {'back': 2501686,
                       'bold': 0,
                       'eolfilled': 0,
                       'face': 'Verdana',
                       'fore': 11581373,
                       'hotspot': 0,
                       'italic': 0,
                       'size': 10,
                       'useFixed': 0},
'fold markers': {'back': 2501686, 'fore': 7897997},
'functions': {'fore': 7897997},
'identifiers': {'fore': 7897997},
'indent guides': {'back': 6710886, 'fore': 7897997},
'keywords': {'fore': 5546676},
'keywords2': {'fore': 8904824},
'linenumbers': {'fore': 7897997},
'numbers': {'fore': 12688752},
'operators': {'fore': 4222857},
'preprocessor': {'fore': 7897997},
'regex': {'fore': 16751415},
'stderr': {'fore': 7897997, 'italic': 1},
'stdin': {'fore': 7897997},
'stdout': {'fore': 7897997},
'stringeol': {'back': 6697728, 'eolfilled': 1, 'fore': 7897997},
'strings': {'fore': 12688752},
'tags': {'fore': 52735},
'variables': {'fore': 0}}

LanguageStyles = {'C#': {'UUIDs': {'fore': 0},
     'commentdockeyword': {'fore': 0},
     'commentdockeyworderror': {'fore': 2293759},
     'globalclass': {'fore': 7632127},
     'verbatim': {'fore': 0}},
'C++': {'UUIDs': {'fore': 0},
      'commentdockeyword': {'fore': 0},
      'commentdockeyworderror': {'fore': 2293759},
      'globalclass': {'fore': 7632127},
      'verbatim': {'fore': 0}},
'CSS': {'classes': {'fore': 12629703},
      'identifiers': {'fore': 16634024},
      'ids': {'fore': 7986943},
      'operators': {'fore': 11599871},
      'tags': {'fore': 3977471},
      'values': {'fore': 14155775}},
'Diff': {'additionline': {'fore': 7667711},
       'chunkheader': {'fore': 7632127},
       'deletionline': {'fore': 16777076},
       'diffline': {'fore': 9868950, 'italic': 1},
       'fileline': {'fore': 8904824, 'italic': 1}},
'Errors': {'Error lines': {'fore': 16777113, 'hotspot': 1, 'italic': 1}},
'HTML': {'attribute name': {'fore': 16428914},
       'attributes': {'fore': 13369361},
       'cdata': {'fore': 7667711},
       'default': {'fore': 11581373},
       'entity references': {'fore': 11581373},
       'keywords': {'fore': 10091996},
       'numbers': {'fore': 13625852},
       'operators': {'fore': 7897997},
       'strings': {'fore': 5546676},
       'tags': {'fore': 7897997},
       'variables': {'fore': 2721475}},
'IDL': {'UUIDs': {'fore': 0},
      'commentdockeyword': {'fore': 0},
      'commentdockeyworderror': {'fore': 2293759},
      'globalclass': {'fore': 7632127},
      'verbatim': {'fore': 0}},
'Java': {'UUIDs': {'fore': 0},
       'commentdockeyword': {'fore': 0},
       'commentdockeyworderror': {'fore': 2293759},
       'globalclass': {'fore': 7632127},
       'verbatim': {'fore': 0}},
'JavaScript': {'UUIDs': {'fore': 0},
             'commentdockeyword': {'fore': 0},
             'commentdockeyworderror': {'fore': 2293759},
             'globalclass': {'fore': 7632127},
             'verbatim': {'fore': 0}},
'PHP': {'attribute name': {'fore': 16428914},
      'attribute value': {'fore': 13676752},
      'bracehighlight': {'back': 5197568},
      'identifiers': {'fore': 10091996},
      'keywords': {'fore': 11140834},
      'operators': {'fore': 39423},
      'strings': {'fore': 15523820},
      'tags': {'fore': 39423},
      'variables': {'fore': 15838576}},
'Perl': {'here documents': {'bold': 1, 'fore': 8183004}},
'Python': {'identifiers': {'fore': 7897997}, 'keywords2': {'fore': 11581373}},
'Regex': {'charclass': {'fore': 10092543, 'italic': 1},
        'charescape': {'fore': 12303104, 'italic': 1},
        'charset_operator': {'fore': 8372175, 'size': 12},
        'comment': {'fore': 12303291, 'italic': 1},
        'default': {},
        'eol': {},
        'groupref': {'fore': 10092543, 'italic': 1},
        'grouptag': {'fore': 8372175, 'size': 8},
        'match_highlight': {'back': 6908265},
        'operator': {'fore': 8372175, 'size': 12},
        'quantifier': {'bold': 1, 'fore': 10092543, 'size': 12},
        'special': {'bold': 1, 'fore': 10092543},
        'text': {}},
'XML': {'cdata': {'fore': 7667711},
      'cdata content': {'fore': 7632127},
      'cdata tags': {'fore': 7667711},
      'data': {'fore': 14474353},
      'declarations': {'fore': 13418403},
      'entity references': {'fore': 14474353},
      'pi content': {'fore': 7632127},
      'pi tags': {'fore': 7667711},
      'prolog': {'fore': 0},
      'xpath attributes': {'fore': 7667711},
      'xpath content': {'fore': 16741120},
      'xpath tags': {'fore': 16777204}}}

MiscLanguageSettings = {}

Colors = {'activeBreakpointColor': 526573,
'bookmarkColor': 13434879,
'callingLineColor': 16776960,
'caretFore': 16777215,
'caretLineBack': 3355443,
'currentLineColor': 16777011,
'edgeColor': 3355443,
'foldMarginColor': None,
'pendingBreakpointColor': 569096,
'selBack': 6238471,
'selFore': 65535,
'whitespaceColor': 16777215}

Indicators = {'find_highlighting': {'alpha': 100,
                    'color': 1110271,
                    'draw_underneath': True,
                    'style': 7},
'linter_error': {'alpha': 100,
               'color': 255,
               'draw_underneath': True,
               'style': 1},
'linter_warning': {'alpha': 100,
                 'color': 32768,
                 'draw_underneath': True,
                 'style': 1},
'soft_characters': {'alpha': 100,
                  'color': 13209,
                  'draw_underneath': False,
                  'style': 6},
'tabstop_current': {'alpha': 100,
                  'color': 3355647,
                  'draw_underneath': True,
                  'style': 7},
'tabstop_pending': {'alpha': 100,
                  'color': 16751001,
                  'draw_underneath': True,
                  'style': 6},
'tag_matching': {'alpha': 100,
               'color': 33023,
               'draw_underneath': True,
               'style': 7}}

Komodo Edit

2009-11-05T16:22:00.011-10:00

I've been using Netbeans for Python for several releases now. Don't get me wrong, it's not a bad editor. The problem is that I've used Visual Studio which includes Intellisense. In Episode 50 of the Stack Overflow podcast Joel refereed to Intellisense as "crack" -- once developers try it they're hooked. After coding in Visual Basic, VB.NET, and then C# I can say it's a very nice feature.

But I'm writing python now (and playing house with Ruby). Python is a dynamic language. I threw all hope of code completion and automatically displaying method tooltips away.

Then I found Komodo Edit.

It isn't perfect, but it's good enough™, perhaps even the best there is for Python at the moment (though what's the rumor I hear about Visual Studio 2010 supporting python?).

Aside from the code completion support, Komodo Edit has some neat features...

The Toolbox
That's cool! Komodo Edit (KE from this point on) offers a Toolbox running vertically on the right part of the interface. IT allows you to create items in a tree-view format which can do things. Lots of things. Execute a shell script: Check! Open a URL: Check! Insert a custom code snippet: Check! I guarantee you'll find like 10 things to stick there the first time you use it.

For Django development for example I've added items to open...
http://localhost:8000
http://localhost:8000/admin
The project issue tracker
The mercurial repository page

And code snippets to...
Skeleton Admin model
mode_save method
Skeleton Model

Ctrl+R
I know this is available in other places, but it's amazing to see it as a default in KE. Ctrl+R will launch the command line. I probably find this particularly notable since back in 2001 I released a Windows utility "CmdHotKey" which did pretty much the exact same thing (except it was Windows-wide).

Project File Tree View
I was really surprised to see that KE shows a tree view of the folder structure of your project. I assumed that would only be available in the paid-for version (Komodo IDE).

Color Schemes
What's an editor that forces you to look at a white background and black text?

KE also supports other neat stuff that I didn't mention like recordable macros.

All-in-all it's a very feature-packed editor and for free.

But it has some quirks...

Sadly, it's not perfect.

If one is using the tree view showing the project folders, right-clicking and choosing "Add >" gives several options including:

New Folder...
New Live Folder...

This is really stupid. New Folder creates a project-only organizational unit which from what I can tell serves no actual purpose. New Live Folder creates an actual disk directory like you'd expect.

Another thing -- If you move or delete a file, perhaps with mercurial so the move changes are in the repository, KE will show the old and new file, but the old file will be marked read and you'll need to remove it form the project manually. It would be nicer if since it detected the change it would just remove it from the project.

Mercurial hgwebdir under Apache using WSGI

2009-11-02T14:29:00.029-10:00

The doc for setting up HgWebDirStepByStep sure make it seem harder than it really is. Maybe it is hard. Maybe it's just that I spent so much time trying to understand the doc, that when I actually just tried it myself it wasn't that bad.

I've been thinking of moving over from SVN to Mercurial (hg) but wasn't sure if it was worth the fuss. I moved. It seems nice. Here's a guide, including tutorials for both the server and client, to switch to hgwebdir (server) /TortoiseHg (client).

Let's get started.

Setting up Mercurial (Part 1)
Before we configure the server, the following must already be installed and running:

I'm going to be demonstrating the setup on Windows 2000 Server as the host for hgwebdir/apache, and Windows Xp as the developer machine.

1. Setup the Directory Structure
Create the following structure:

C:\Mercurial
\src
\hgwebdir
\repositories

We'll be putting files into these folders shortly.

2. Download mercurial source
Whatever you do, don't install TortoiseHg on the server. To run hgwebdir you're going to want to have compiled mercurial yourself.

Download Mercuria sourcel (Be sure to not get the binary)

After download, extract the contents to C:\Mercurial\src, or wherever you created your 'src' folder in the directory structure from above.

3. Build Mercurial
(Instructions taken mostly from WindowsInstall wiki page)
Open up the command prompt...

C:\>
C:\> cd mercurial\src
C:\Mercurial\src> python setup.py --pure build_py -c -d . build_ext -i build_mo --force
C:\Mercurial\src> python setup.py --pure install --force--force

Mercurial will now be built and installed into your python site-packages folder.

4. Setup a 3-way Diff tool
Download KDiff3 from SourceForge. Install using the included windows setup binary.

5. Configure Environment Variables

Add "C:\Python26\Scripts" and "C:\Program Files\KDiff3" to your PATH environment variable.

You will need to be logged into an account that has admin right on the machine to setup this next part. Right-click on "My Computer" and choose "Properties". Choose "Advanced", then click the button "Environment Variables." In the list at the bottom, "System variables", scroll down and find PATH. Click "Edit". At the end of the textbox add a semi-colon, then type in the path from above. Your PATH variable should then resemble...

...;C:\Program Files\KDiff3;C:\Program Files\KDiff3;

6. Create a local Mercurial configuration file
Windows Explorer has a limitation that won't let you create a new file that starts with a period. The way around this is to use notepad on the command line to type in the name of a file with a period.

Mercurial uses a local file named ".hgrc" to configure itself about which 3-way merge tool it should use and similar things to that nature.

Follow these commands to create the .hgrc file for the server:

C:\>
C:\> cd Python26\Scripts
C:\Python26\Scripts> notepad .hgrc

This will cause notepad to pop up and ask if you want to create a new file named .hgrc. You do. Here's the basic configuration file for mercurial. Edit these settings to whatever you need to be.

[ui]
editor = Notepad
username = hgadmin <webmaster@yourdomain.com>

[merge-tools]
kdiff3.priority=-1
kdiff3.args=-L1 base --L2 local --L3 other $base $local $other -o $output
kdiff3.regkey=Software\KDiff3
kdiff3.regappend=\kdiff3.exe
kdiff3.fixeol=True
kdiff3.gui=True

You've got Mercurial installed now! If you open a command prompt and type 'hg' it should print out the command's help.

Setting up Apache/hgwebdir
Hmmm... ok maybe that is a lot of work. It didn't seem like it at the time.

Going into this, I'm assuming you've already got Apache with mod_wsgi up and running. I should point out that you can technically run hgwebdir under CGI or mod_python, but as WSGI is the hotness now days probably a lot of people have already started using that.

Good news is, I think this part is a lot easier.

On my setup I've only got 1 server, and so I tend to run things as Virtual Hosts. If you're already running Apache I'm assuming you've got the smarts to change this config if you like a different setup, but for the example httpd.conf below, I'll be doing a virtual host.

1. Create our WSGI handler file
The WSGI file is really simple. We basically need to 1.) import the necessary modules, then 2.) pass a new instance of hgwebdir with the configuration file path back to WSGI handler.

Create this script and save it as "hgwebdir.wsgi" into the C:\Mercurial\hgwebdir folder.

2. WSGI app config file
You probably noticed in the code above that we're referencing a config file that doesn't yet exist. Let's go ahead and create that.

[web]
style = coal

[paths]
/ = C:/Mercurial/repositories/**

Save this file as "hgweb.config" into the C:\Mercurial\hgwebdir folder.

3. Configure Apache
So we've got our WSGI script and config file setup. All that's left now is to configure Apache.

We need to have a few things in our Apache conf in order to get everything working: 1.) A new virtual host to hold all of our Mercurial settings, 2.) a WSGIScriptAlias to make sure our hgwebdir.wsgi file handles web request, 3.) authentication (skip this if you want a public repository), and 4.) SSL.

All of the above goes in httpd.conf.

There's lots of stuff going on in there. Let's look at a bit of it.

Even though we've configured hg.yourdomain.com, unless you have actually setup an A record of "hg" for yourdomain.com, that address won't actually resolve (ie. it won't work).

The WSGIScriptAliasMatch is actually what routes our incoming Mercurial requests to the hgwebdir.wsgi file for handling. In order for this directive to work, you'll need to have mod_wsgi enabled in your httpd.conf file. (this is outside the scope of this post)

Just copy and paste the SSL configuration from elsewhere in your config file if you're already using it. If you don't have a cert or don't want to use SSL then delete all of that section and change the ports at the top back to 80.

Lastly, did you notice the auth part of the configuration? We're using AuthType Basic and we have a user file "C:\Mercurial\accounts". We haven't created that yet, so let's go ahead and do so.

In Part 2 when we look at setting up the client, I'll show you how to configure TortoiseHg to save the user/pass that will be authenticated here by Apache.

4. Setting up Mercurial Users
It's important to note at this point that the authentication is being handled by Apache and not Mercurial. In my setup we're just using HTTP Basic, however if your Apache install is already using something better (LDAP, DBM, whatever), then by all means use that instead.

If you've never made an Apache passwd file, it's an easy process. Apache gives you a tool "htpasswd" which allows you to create a new passwd file or to add new users to an existing file.

* Important: I don't know where your Apache is installed, so you'll need to interpret some of these paths for your specific machine.

htpasswd is located in the Apache bin folder. We're talking something to the effect of C:\Apache2.2\bin\htpasswd.exe. Figure that out, and then use the command line as indicated below to create our accounts file for Mercurial.

C:\>
C:\> cd Apache2.2\bin
C:\Apache2.2\bin> htpasswd "C:\Mercurial\accounts" testuser

This will create the file "accounts" in C:\Mercurial, add a new user "testuser" and then prompt you for a password for the new user. You can repeat this command later on to add new users.

5. Bask in how fashionable you are using Mercurial
If everything went well up to this point, you should be able to start Apache and try out your new hgwebdir install.

But upon arrival you'll probably notice that... it's empty. Let's create a new repository.

6. Adding repositories
Remember the folder we made C:\Mercurial\repositories? That's where all the repos will be living. Create a new repository like you would locally...

C:\>
C:\> cd Mercurial\repositories
C:\Mercurial\repositories\> mkdir testrepo
C:\Mercurial\repositories\> cd testrepo
C:\Mercurial\repositories\testrepo\> hg init

Refreshing your the URL of your hgwebdir install should now show a new read-only repository. By default new repositories are not push-able.

7. Create a repository configuration file
We can enable features and also fill out the details about repository by create a configuration file. Assuming the repository you created was "testrepo", create a new file named "hgrc" in C:\Mecurial\repositories\testrepo\.hg\ folder.

[web]
contact = Your Name
name  = Test Repository
description = A repository that I can show how cool I am using hg
allow_push = *
allow_archive = gz zip

Most of this is self-explanatory. The "allow_push" directive enables files to be synchronized from the client's repository up to the repository on the server. The "allow_archives" will enable a snapshot of a given revision to be downloaded in those formats.

Save this file, refresh and there you go.

Next, we'll look at setting up TortoiseHg on a Windows XP developer box to connect to our new hgwebdir instance.

Javascript: The Good Parts (the Video)

2009-11-01T20:11:00.003-10:00

Kudos to Google and MIT for uploading such great quality stuff to YouTube (if you've been scared off by the drones of webcam-yourself-complaining-about-current-events then give it another try).

I stumbled upon Doug Crockford at google speaking on "Javascript: The Good Parts". He has a book by the same title as well. In his presentation he also mentions JSLint, a tool he wrote to parse Javascript and act as a syntax checker. I'm wondering if it could be rolled into my Django workflow or automated testing.

Here's the video:

FizzBuzz Ruby

2009-11-01T15:17:00.003-10:00

Well since I was in the mood writing FizzBuzz and since I've been working on learning Ruby, I figured, why not do recursive fizzbuzz in ruby?

Ruby is quite an expressive language. It feels like it comes with more built-in keywords and default methods than python, so I'm sensing it is a bit more complex to learn. However, it has some neat stuff. I'm thinking of writing FizzBuzz using some of the different methods it has, like .net and the '..' range. I've also seen a built in function something to the effect of '.upto' which might be fun to play with as well.

Toshiba T135-1309 13.3" Laptop Review

2009-11-01T14:59:00.003-10:00

It's funny how times changes. 9 years ago I purchased a Toshiba laptop for college. It set me back $1800 and came "loaded" with a Pentium 3 @ 600Mhz and 64MB RAM. I promptly maxed out the RAM to 192MB. I ended up hating it and vowed never to buy a laptop again.

Fast forward now a decade into the future. Things have changed. I'm married, have a full time job, and laptop hardware doesn't suck now. Neither does battery life. Windows 7 comes out. A netbook looks tempting. But do I really want a machine with such a tiny keyboard and screen? The shopping begins.

My search end when I decided on a Toshiba T135-1309 laptop. For the price, the specs are quite impressive:

Intel Pentium SU4100
3GB RAM (DDR3 1066)
13.3" LCD (16:9)
3.88 lbs.
Windows 7, 32-bit Premium
320 GB Hard Drive
~8hrs battery life
Built in ethernet/wifi-N
Built in webcam
Built in memory card reader

Cost at Best Buy: $549

So far there are some things I really like about this laptop:

Affordable
Small and lightweight
Seems to get really good battery life
Comes with windows 7 premium

Overall I've been rather happy with this machine. There are 2 small things I'm not so pleased with, but they're very minor and defiantly not deal breakers.

The speakers are quiet; a lot more quiet than you'd expect. There's no external sound control either.
The whole laptop is rather glossy. I wish they had toned that down a bit.

At the time of purchase, I also picked up a Logitech M305 wireless mouse. Let me tell you -- it's worth the money. The mouse comes with a dongle that is ridiculously small. You plug it in and basically leave it there. There isn't a huge thumb-drive sized thing hanging out the side of your laptop. It's smaller in size, but not uncomfortably so.

The M305 actually comes in 3 'fashionable' designs and of course boring gray. I went with a designed model that was a bit more subtle than the other 2. It fits with the laptop.'

Structure and Interpretation, LISP and Python

2009-10-28T21:06:00.015-10:00

I'm a "city boy" when it comes to programming languages. 90% of my experience in programming is in ridiculously high level languages like VB.NET, C#, and Python. I haven't "roughed it out" much in the wilderness of some low level language.

I had heard talk about MIT's Open Courseware, but wasn't sure what the hoopla was all about. Based on a reference in someone's blog post, I happened upon a 1986 recording of Structure and Interpretation of Computer Programs (YouTube). I watched the whole thing. I am thoroughly blown away.

I'll admit, the first 20 minutes were dizzyingly abstract, but once some code samples started to show up, it began to make sense. What I was floored the most about was seeing how much an influence LISP had over the language I've been working in the most lately -- Python. All of the "funky things" that I wasn't used too from C#, inner methods, using "def" instead of "function", etc. etc. were all elements of LISP.

So having FizzBuzz on the mind, I decided to give it a shot.... in LISP (and then after recursively in Python). The course professor noted that LISP had no for loops. "A challenge" I thought to myself. (Long Side Tangent: I feel at the moment as if I'm creating a programmer's Fight Club where I mentally abuse the comfortable high-level language life I once knew to get down and dirty fighting with the bare essentials of computational logic. [end sensationalistic, metaphoric movie reference])

In case you're not familiar with FizzBuzz, here's the problem:

Write a program that prints the numbers from 1 to 100. But for multiples of three print "Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both three and five print "FizzBuzz".

I "made up" a function definition for print since the details of printing to the screen weren't really my concern.

The odd part for me was after working through the mental process of how the solution would work recursively in LISP, writing it again in Python felt ridiculously easy...

Look mom, no loops!

Notating Environment in Django's settings.py

2009-10-26T09:03:00.007-10:00

I answered a question (#1626326) on Stack Overflow recently about Django setttings.py files which reminded me I'm still undecided on what the best way to handle this issue.

The issue is -- How do you handle Django settings which change based on which environment the web app is running in? The Django documentation recommends using something to this effect.

if DEBUG:
VALUE = 'something'
else:
VALUE = 'something else'

I used this approach for a while, but found that it was becoming limiting. The reason why is that it doesn't actually address the issue of environment. Where the "if DEBUG" trick is used, we're really only looking to see if we're in DEBUG mode, not if we're running in a development or production environment.

When I was first setting up django-compressor (which by the way is teh hotness) I wanted to sets the setup in a development environment with DEBUG=False. The "if DEBUG" failed miserably here.

settings.py Version 2
So my next attempt was to attempt to determine the machine the settings.py was being evaluated on, and from there set what the environment was.

PRODUCTION_SERVERS = ['WEBSERVER1','WEBSERVER2',]
if os.environ['COMPUTERNAME'] in PRODUCTION_SERVERS:
 PRODUCTION = True
else:
 PRODUCTION = False

DEBUG = not PRODUCTION
TEMPLATE_DEBUG = DEBUG

# ...

if PRODUCTION:
 VALUE = 'something'
else:
 VALUE = 'something else'

This is easily an improvement over "if DEBUG". At least now we have some control over values based on environment. I used this for a while and then realized...

What if I have two installations of Django running on the same physical machine but which should be running in different environments?

This is a conceivable situation. Let's say in a smaller company like the one I work in we only have 1 webserver. Departments request features from the web team, which then get implemented by developer(s). However the features need to be tested by the web team and evaluated by the department before deployed to the production site.

So, the webserver gets configured to run 2 virtual hosts: One for "testing.domain.com" and another for "www.domain.com." BAM! The "if PRODUCTION" method just failed. Why? Because we technically now have 3 environments (development, testing, production), 2 of which run on the same physical server.

Imagine this bit of settings.py...

if PRODUCTION:
  DATABASE_HOST = '192.168.1.1' # Production MySQL
else:
  DATABASE_HOST = 'localhost'

Bad things would follow. The testing copy of the web app (testing.domain.com) would load up, and mark PRODUCTION=True as it is technically on the production server. It then uses the production MySQL database. Fail.

To overcome this, our settings.py file really needs a way to distinguish what environment it is regardless of which physical machine it's located on.

settings.py Version 3
Some ideas I've had to address this would to set the environment based on...

The folder path the app is currently located in
The code for this could get ugly easily.
The complete hostname the server is running under
This might be win.
Something else?

I'll post some code when I find something that works well that I like.

On a related note, I was reading the Sinatra (ruby) documentation this week, and I noticed that it automatically sets the environment based on the values set by the RACK_ENV variable. This would be the equivalent of adjusting the settings.py based on the presence of a WSGI or FCGI (or whatever) variable. It seems like a really neat idea, however it's somewhat dependent on the way Django is being loaded, and given that there are so many possibilities, I'm not sure if it'd work out as well for Django as it does for Sinatra.

Neat Django Admin Tricks (Part 1)

2009-10-16T16:16:00.012-10:00

About django admin in a sec. First a bit of setup:

As I've been organizing our office into using an issue tracker for keeping track of our Django app, I haven't really found one that 'fit' yet. The issue trackers I looked at had 1 of 2 problems:

They were massive, huge, enterprise-level monsters. I need something for 3-4 people.
They required a bunch of extra setup. I already have a Django app running, why load the server with extra software?

So I spent a few hours after work putting a simple issue tracker together. To really improve the usability and get what I wanted out of the app, I needed to control how the django admin was presenting things. Some neat django admin tricks were in order.

Making An Admin list_display Field Show In Color
By default, all values in the Django admin model list view are in black.

Boring black. If you have an issue tracker it should show in color, right? Here's what my issue admin was looking like:

class IssueAdmin(admin.ModelAdmin):
list_display = ('title', 'priority', 'completed', 'assigned_to', 'last_modified')

The easiest way to get the 'priority' column in color would be to render it as HTML. If you were to try this, you'd find that the Django admin does not escape that value, and you'd end up with < >'s showing. However, there is an API to get around that. In Python all functions are objects. Because of this, we can add a property '.allow_tags' at runtime to signal to Django that the value contains tags.

# models.py
def priority_html(self):
return u'<span >%s</span>' % self.get_priority_display()
priority_html.allow_tags = True

Our value now shows in color, but the column header renders as "Priority html". We can add one more property 'short_description' which would allow us to specify the equivalent of 'verbose_name' for a field.

Here's the (almost) complete code to achieve a custom HTML value in a list_display entry:

# models.py
class Issue(models.Model):

PRIORITY_CHOICES = (
 (1, 'Low'),
 (2, 'Normal'),
 (3, 'High'),
)

priority = models.IntegerField(choices=PRIORITY_CHOICES, help_text='Default:  Normal Priority', default=2)

def priority_html(self):
 if self.priority == 3:
     color = "652D90"
 elif self.priority == 2:
     color = "37B34A"
 else:
     color = "26A9E0"
 return u'<span style="color:#%s">%s</span>' % (color, self.get_priority_display())
priority_html.allow_tags = True
priority_html.short_description = 'priority'

# admin.py
class IssueAdmin(admin.ModelAdmin):
list_display = ('title', 'priority_html', 'completed', 'assigned_to', 'last_modified')

Given the code above, I bet you can guess how the (Email) link was achieved.

Managing Django Dependencies via SVN

2009-10-02T18:22:00.009-10:00

One of the things that's been somewhat of a small hassle in working with Django/Python is managing dependencies across multiple developer machines, especially through an SVN managed project. Whenever a new dependency is needed, we've ended up doing 1 of 2 things:

Adding the name of the package to a text file which can be "easy_install "
Copying the zip/bz/exe to a folder "dependencies"

In both cases, what normally happens is Developer X will add a dependency to the repo. Developer Y at some point does an SVN update, and pulls down the code Developer X committed. Developer Y runs his runserver and BAM! not found! So then Developer Y has to go and look in the "dependencies" folder and try and figure out if he needs to run an easy_install or run an exe or whatever.

Obviously a rather inefficient task. I had heard about systems that will do automatic dependency installing, but the problem I had with that is that sometimes you have dependencies that are just a single file, and other times a whole package, others are in Pypi, etc.. The packages come in a huge crazy mess of ways. I wanted something consistent.

My (somewhat hacky) Soultion
Create a 'dependencies' folder that lives inside the project root (mine is named "_dependencies"). This folder will hold everything needed by Django (except Django itself) that would normally go in 'site-packages'.

When the Django app starts, have this path added to the Python path, so that libraries can be installed to it, instead of ..\Python26\Lib\site-packages. This allows dependencies to be setup in a folder that everyone pulls down via SVN. Bingo!

There are mainly 2 times when we need to make sure that dependency path is available:

When we're doing a management task (including runserver)
When the production site actually handles a task via Apache or whatever

To accomplish both, I came up with the following code:

# manage.py (before Django loads itself)

import os
import sys

def set_dependency_path():
dep_root = os.path.join(os.path.abspath(os.path.dirname(__file__)), '_dependencies')
if not dep_root in sys.path:
 sys.path.append(dep_root)

set_dependency_path()


# __init__.py (the main, root init)

from manage import set_dependency_path
set_dependency_path()

Hacking wmd-editor into using a custom image gallery

2009-10-01T16:27:00.017-10:00

Oh man, I feel accomplished. I just finished hacking wmd editor to use a custom image gallery being generated server-side.

If you don't know, WMD editor is a WYSIWYG editor written in Javascript.

By default, when you click on the 'Insert Image' button you get a prompt allowing you to enter a URL.

Insert Image Screen

The functionality I was looking for was instead of showing you a text box where you could paste in the URL, I wanted to see more of a gallery type interface, that showed media that both you and others had uploaded. I also wanted to have a system where multiple files could be uploaded at once, and multiple files could be inserted at once.

There were primarily two challenges in attempting to accomplish that plan:

The WMD editor code doesn't really come with documentation. There are a handful of in-line comments and that's all you get. For the most part, I ignored them and read the code instead.
The WMD editor code is a little strange in areas.

Modifying WMD Editor
For the most part, I ended up not needing to change really all that much code. WMD editor is odd, yes, but workable.

The first task was to replace the default prompt function, with my own....

command.doLinkOrImage = function(chunk, postProcessing, isImage){

// ...

if (isImage) {
// OLD: util.prompt(imageDialogText, imageDefaultText, makeLinkMarkdown);
        // WMD_IMAGE_GALLERY_URL loaded from a global settings elsewhere
        util.imageGallery(WMD_IMAGE_GALLERY_URL, makeLinkMarkdown);
}
else {
util.prompt(linkDialogText, linkDefaultText, makeLinkMarkdown);
}
}

This was an easy change, and allowed to to write a pretty much drop-in replacement for util.promt().

This particular bit of code is jQuery-specific. It uses a div already existing on the page, #wmd-media-gallery, and applies jQuery UI's $.dialog() method to it, converted it into a popup modal dialog. The contents of the dialog is then loaded by AJAX. The URL that is loads is being specified in a global variable that is passed to it (WMD_IMAGE_GALLERY_URL).

util.imageGallery = function(gallery_url, makeLinkFunction){
gallery = $('#wmd-media-gallery');

if (gallery.html()) {
gallery.dialog('open');
}
else {
gallery.css('visibility', 'visible');
gallery.load(gallery_url, function(){
  gallery.dialog({
      title: 'Media Gallery',
      bgiframe: true,
      height: 550,
      width: 900,
      modal: true,
      buttons: {
          'Insert': function(){
              // Enumerate images; insert those checked.
                        $('#wmd-media-gallery .media-insert').each(function(){
                  if ($(this).is(':checked')) {                              
                      img_path = $(this).attr('rel');
                      console.log(img_path);
                      makeLinkFunction(img_path);
                  }
                });
              $(this).dialog('close');
          },
          'Cancel': function() {$(this).dialog('close'); }
      }
  });
});
}
};

Pretty simple so far, right?

Well, here's the tricky part. If you notice what happens when the 'Insert' button is clicked, the code will scan the HTML of the dialog, and look for any input:checked element that has class "media-insert". For those elements which are found, it searches for ones which are checked. If a checked item is found, it will grab the Image URL out of the rel="" attribute, and pass that back to WMD editor for insertion into the edit box.

Ah, but not so fast. The problem comes in that WMD editor was not originally written to insert multiple images in such a way. With the stock code, what happens is it will inset one image inside another, thus only rendering 1 image properly, and leaving a mish-mash of code around it.

It should render this:

![alt text][1]
![alt text][2]

   [1]: /some/url.jpg
   [2]: /some/image.jpg

What it was rendering was this:

![alt text![alt text][1]][1]

The particular code in question lies int he command.addLinkDef() function. What needs to happen is that before that function processes the 'chunk', it must first clear the settings from the previous image out of it.

var getLink = function(wholeMatch, link, id, end){
// ...
};

// This goes after the getLink function

if (chunk.after.substring(0,2) == "][") {
chunk.before += chunk.selection + chunk.after.substring(0,2);
chunk.after = chunk.after.substring(2);
var linkEnd = chunk.after.indexOf(']');
linkEnd++;

chunk.before += chunk.after.substring(0, linkEnd);
chunk.selection = "";
chunk.after = chunk.after.substring(linkEnd + 1);
}

// ...and before the chunk.before [...] code

chunk.before = chunk.before.replace(regex, getLink);

And there you have it, you can now run custom image galleries from WMD editor. I'll leave it up to your imagination as to what you can do with that, but here's what mine ended up looking like:

Editor Window

Inserted Image

If you noticed, the django-uploadify app is being used in the gallery (hence why I began working on it).

MS SQL Data Analysis Server

2009-09-30T21:52:00.002-10:00

I was doing some investigation on the Stack Overflow data dump, and ran across a rather interesting blog posts: Data Mining the StackOverflow Database. He uses a tool called 'SQL Analysis Server' (or something like that) to automatically create fuzzy comparisons between records in a database. The software ends up spitting out trend categories. Neat stuff.

django-uploadify Released

2009-09-30T14:44:00.004-10:00

So I finally joined the rest of the Django community in releasing a re-usable app on GitHub. Announcing... django-uploadify!

Uploadify is a great flash-based jQuery plugin which allows users to upload an un-fixed quantity of files through a single interface. It looks and works great.

Django-uploadify is a django app that serves as a wrapper for the functionality, allowing it to interface with Django. The app works by firing a signal whenever a file is received from Uploadify, allowing developers to tie uploadify into their existing apps rather easily.

Microsoft Marketing and Kylie age 4.5

2009-09-29T17:28:00.004-10:00

I recall reading 6-8 months ago that Microsoft had recently hired a marketing firm to re-make the company's image after continuous negativity surrounding Windows Vista (the same firm incidentally which was behind 'The King' in Burger King's marketing strategy). Their work began to show up a few months ago, first in the form of the "we'll give you $800 to buy any computer you want" type of ads.

However, with Winodws 7 on the horizon, it seems that a new campaign has been launched: Kylie, age 4.5

When I saw the first of this ad series, I didn't think much of it. It's a 4 year old plugging in a camera to USB and downloading the pictures. Ok. Exciting. As with most of my TV watching experience, half of the fun is analyzing the commercials for intent. I couldn't figure out who Microsoft's target was at that point. The message seemed to be "Windows 7: so easy a preschooler can use it." But at the same time, I wondered why they would be targeting the sub-section of society that was looking for an OS that was that easy to use.

And then came the "happy words" commercial...

I saw that and went "wow that was awesome!" Odd thing is, all of my computer tech/programmer friends that I sent that video too also thought it was amazing. So I told myself, "Hey, Microsoft is doing their homework and trying to make cool commercials to target to techies who have long since stopped believing in them." It was exciting. Momentarily. (Ok, I'll admit to looking up what song that was a buying it on Amazon MP3 downloads, which if you're still buying stuff from iTunes quit messing with the DRM already and get it from amazon!)

I felt on several levels that this commercial worked because it...

The music. The epic conquer the world music makes the commercial. Hands down.
The juxtaposition of elements works -- ponies, and pink, and rats with hats have nothing to do with Windows, but what it does is push the concept of Windows out of the "boring" category -- effective!
The very last words on the ad are perfect: "I'm a PC!! ...and more happy is coming!" They're short and choppy like a kid would actually say it (well an ornery kid, but it fits rather well with not being in the "boring" category)

And then just a day or so ago I saw what is apparently the next 'episode' in the campaign:

So they're playing A-Team music... meh. I'm wondering if the "happy words" ad was just by luck that it was cool, and we won't be seeing much like that for the rest of the campaign.

By the way, if you didn't catch it, there is a pig in a bonnet in the first commercial. Watch it again!

Token Testing Slides

2009-09-20T23:07:00.007-10:00

OH-MAN. This has to be some of the coolest TDD stuff I've ever seen, and it's in the web platform I'm already using. Django 1.1 introduces some super-awesome new features for testing. I'll probably spend some time this week trying them out. So far the coolest is easily the...

django-admin.py test --coverage --report

...to generate a %-based coverage report of all your web app's code. Man that's sweet.

Here's where I'm seeing all these new features:

Token Testing Slides

View more documents from ericholscher.

Extending Django's Built-In Template Filters

2009-09-14T09:53:00.011-10:00

Django provides quite a few built-in template filters right out of the box. However, eventually you might need them to work in a specific way that isn't quite the default behavior. In my case, the django date filter worked great, but I needed something specific:

By default, the date filter takes a value, along with a formatting argument, and returns a "rendered" string:

{{ value|date:"F d, Y P" }}

This would render as:

January 18, 2009 1:30 p.m.

However, what happens if time information is entered for some datetime's and not for others? We end up with stuff like "January 18, 2009 midnight". Not what I wanted.

Turns out it's quite easy to not only implement your own custom filters, but also to tap the power of the built-in filters as well. To achieve the functionality I was looking for, my custom filter needed to...

Work just like the default date filter, taking an argument of format
Check if there was no time information on the datetime
Remove the time formatting if so

Starting out, here's the base custom filter, along with the code to remove time arguments from the formatting argument:

import re

@register.filter
def smart_date(value, arg):
   if value.hour == 0 and value.minute == 0 and value.second == 0:
       arg = re.sub(r'[aAfgGhHijlLPOsTZ]', '', arg)

What I did not want to do was re-implement the functionality of the date filter. However, it's easy to bring that functionality into your custom filter by simply importing it (yeah, it's really that easy).

Here's my completed "smart_date" tag:

import re
from django.template.defaultfilters import date as date_filter

@register.filter
def smart_date(value, arg):
   if not value.time():
       # remove all time-related formatting
       arg = re.sub(r'[aAfgGhHijlLPOsTZ]', '', arg)

   return date_filter(value, arg)

Jquery and Effect.ScrollTo

2009-07-10T10:18:00.003-10:00

It was beginning to become a bane: missing scriptaculou's Effect.ScrollTo. And then I found this gem.

Improved Animated Scroll Script For Same-Page Links

And all is well again.

Lenovo S10e Netbook Review (vs. Asus Wind vs. Acer Aspire One)

2009-06-26T12:55:00.000-10:00

Before I continue on with the Apache/Django series, I thought I'd post a review of the Lenovo S10e netbook. Netbooks still seem in their infancy that it's hard to pick the right one without wondering what smashing new feature is just around the corner.

Just to be clear this entire review is being typed on the netbook.

Initially upon seeing the Lenovo S10e I dismissed it. At a glance it didn't seem special, and compared to all the netbooks around it, it wasn't shiny and eye-catching. However, there were a few things that brought me back for a second look, and why I decided on this book for my Philly '09 trip:

It was the lightest (compared against an Asus Wind-120U and Acer Aspire One)
It had a 10.2" screen, again the largest of the comparasion models
It was black/dark so I didn't need to worry about the dirty-factor

In addition to that, I have discovered that...

Initially I was worried the right-shift key (which is moved to the right of the up arrow) would be problematic for typing. It's not. I haven't even noticed it.
I was also worried the keyboard would be way too small and would get in the way. Again, it doesn't. It's a comfortable size.

I've been using it now for a week, and there are definatly some factors that I do not care for...

The fan. Oh my gosh. It sounds like this "brrrr... (wait 2 seconds) brrrr... (wait 2 seconds) brrrr.... (wait 2 seconds) brrr...." On-off-on-off-on-off. It gets annoying.
When you close the lid the laptop just kinda, I'm not sure what it does. But when you re-open the lid hours later tapping the power button or hitting the space bar does... nothing! Maybe it's Windows or maybe I just don't use it right, but I end up having to hold the power button down, let it go completely off, and then reboot again. I wish it was more mac-like where I can just close the lid when I'm done, the netbook turns off in power-save, and then when I re-open it it powers up again.
The battery has two rear rubber feet, which when on a desk are nice, but when on your lap while sitting tend to jab into your thighs.
I miss having a "home" and "end" key, but I suppose that's the price you pay for a netbook. To be fair, there are home and end, but you have to press Fn+PgUp or Down to get them. It kinda defeats the quick home/end purpose of those keys.

Overall this netbook is a viable contender in the $400 market.

Django, Apache 2.2, mod_ssl, and mod_wsgi (Part 3)

2009-06-18T07:54:00.000-10:00

Part 1 | Part 2 | Part 3

Serving up Django
Following the completion of Part 2, we have an install of Django and Apache, and 2 virtual hosts running on it. What we need to do is connect those virtual hosts up to the content we need to serve.

Before we can do that, we need to add our Django app to the server. Create a folder on your webserver (anywhere really) that isn't in your document root (don't use htdocs). In my case I just made a folder off of the drive "Root_Django". Copy your django app folder into there. You should end up with something like...

C:\Root_Django\{nameofyourwebapp}

To connect Django up to Apache, we need to create a python file that will initialize WSGI and pass that information on to Django. In your {nameofwebapp} folder, create a sub folder named "apache", and then create a new file in that folder named "django.wsgi".

Paste this script into that file:

import os, sys
sys.path.append('C:\\Root_Django')
sys.path.append('C:\\Root_Django\\{nameofwebapp}')
os.environ['DJANGO_SETTINGS_MODULE'] = '{nameofwebapp}.settings'

# Remap stdout to err
sys.stdout = sys.stderr

import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler()

Be sure of course to change "{nameofwebapp}" to the actual name of your django application. This short script will take care of a few things...

the sys.path.append portion needs to point to your actual Django root. Adjust that if it's not C:\Root_Django
sys.stdout = sys.stderrd will redirect all "print" statements to the Apache error log. If you don't have any print statements in your code you can drop this, but I prefer to keep it "just in case"

This script will take care of initializing Django. All we need to do is connect up the requests to our apache virtual host to this script. Edit httpd.confi, and inside of the virtual host for your "www" host, add these lines:

WSGIScriptAlias / C:\Root_Django\{nameofwebapp}\apache\django.wsgi

<Directory "C:\Root_Django\{nameofwebapp}">
Order deny,allow
Allow from all
</Directory>

This tells Apache that all requests coming in from / and up should be handled through the django.wsgi script. Save your httpd.conf file and restart Apache. You should see your Django app being served up now, minus the media (images, css, etc.).

Serving up Static Media
So you're serving python now, but your web app without images and css is pretty limp right?

Here's what we need to do:

Configure an Apache virtual host to serve our static media
Configure Django to know the correct place for our media
Make sure we're also serving the grappelli media instead of the default admin media

Open up your httpd.conf file again, and find the Virtual host for your media.example.com (or whatever your static host name is). Since this will just be basic serving without WSGI, we simply need to configur the document root to the proper location...

DocumentRoot "C:\Root_Django\{nameofwebapp}\media"
<Directory "C:\Root_Django\{nameofwebapp}\media">
Order deny,allow
Allow from all
</Directory>

Tada! If you were to save and restart apache, then navigation to media.example.com/some/css/file.css it should work. What we still need is to serve up the grappelli media. To do this we'll add another alias so that media.example.com/admin will serve the grappelli content.

Alias /admin "C:\Root_Django\{nameofwebapp}\grappelli\media"

<Directory "C:\Root_Django\{nameofwebapp}\grappelli\media">
Order deny,allow
Allow from all
</Directory>

This will make sure that all requests to /admin on your media host will serve the grappelli media files. If you installed grappelli into your Python site-packages folder, be sure to set the path to that folder instead of the django root like shown above.

Configure Django With Media Prefixes
Lastly for this section, we need to do some configuration in Django.

In Part 1 we installed grappelli but we haven't configured it, so we'll do that now. Also, we're using a static media virtual host, so we need to make sure that Django is prefixing our media files correctly. All of this takes place in the settings.py file.

Configure grappelli
If you'd rather see the officiall grappelli installation instructions, they are available on the grappelli google code wiki.

First, add grappelli to the content processors:


TEMPLATE_CONTEXT_PROCESSORS = (
 "django.core.context_processors.auth",
 "django.core.context_processors.request",
    "grappelli.context_processors.admin_url",
)

Next, add the grappelli template directory:


import os
here = lambda x: os.path.join(os.path.abspath(os.path.dirname(__file__)), x)
TEMPLATE_DIRS = (
 # ...
 here('grappelli/templates/'),
)

Lastly, of course, add grappelli to your list of installed apps:


INSTALLED_APPS = (
 # ...
 'grappelli',
)

Configure Media Prefixes
We want to configure Django to automatically insert "http://media.example.com/" in front of all of our media files. The setting in the settings.py to do this is:


MEDIA_URL = 'http://media.example.com/'

But this could easily become problematic when we're testing django with runserver. A better result would be to conditionally test if we're in DEBUG mode, and to change the value based on that.

if DEBUG:
 MEDIA_URL = '/media/'
else:
 MEDIA_URL = 'http://media.example.com/'

We'll also want to make sure the admin media files from grappelli are being served. The code is almost identical, expect the setting is ADMIN_MEDIA_PREFIX:

if DEBUG:
 ADMIN_MEDIA_PREFIX = '/grappelli/media/'
else:
 ADMIN_MEDIA_PREFIX = 'http://media.example.com/admin/'

At this point Django should be running, and serving media files.

Still to come:

Configuring HTTPS
Forcing HTTPS for django admin

Django, Apache 2.2, mod_ssl, and mod_wsgi (Part 2)

2009-06-17T16:05:00.000-10:00

Part 1 | Part 2 | Part 3

DNS
I'm going to make an assumption. You have 1 domain and can create hosts under that domain. Fr example, say you own example.com. I'm assuming you have the ability to create "media.example.com" with whomever hosts your DNS.

You'll want to setup 2 domains:
www.example.com
media.example.com

Since this process is virtually different for everyone I won't cover it. Contact your DNS provider for assistance here.

Setting up Apache
If you've never used Apache, you can pretty much control the entire webserver from 1 file: httpd.conf. By default it's located in {apache install direcotory}\conf\httpd.conf. I like to edit it in Wordpad becuase I'm a lightweight, but you're welcome to edit it in whatever hacker-rific editor you prefer.

Installing mod_wsgi
mod_wsgi is a module addon for Apache which is responsible for accepting the incoming HTTP connection, turning that connection into a python object, and then passing it to Django. In other words, it's really important.

Copy the .so file you downloaded into {apache install directory}\modules.
Open the httpd.conf file and find the section that has all the "LoadModule"s in it
Add this line:
LoadModule wsgi_module modules/mod_wsgi.so
This will load the wgi module whenever Apache runs

Configuring Virtual Hosts
Let's recall what our objectives for this project are:

Serve up Django with mod_wsgi by default from the site root
Serve up static media (images, css, js, etc.) from a separate virtual host
Offer the Django app in both HTTP and HTTPS

To achieve this, we'll need to setup at least 2 virtual hosts:

to hold the Django application
to hold all of our static media

We'll also need a way to configure Django to know where our static virtual host is.

In case you're wondering, there are a few reasons why this is an ideal setup:

We want our Django application to worry about 1 thing: serving up python
It would probably be a performance hit if python had to process all of our media files. It makes more sense to have them directly served by apache
We can enable caching for everything on our static media virtual host, also improving performance
It's uber leet cool (no, not really)

You can create virtual hosts in apache with the directive. Here's a sample of 2 virtual hosts:

NameVirtualHost *:80

<VirtualHost *:80>
ServerName www.example.com:80
ServerAdmin you@example.com
</virtualhost>

<VirtualHost *:80>
ServerName media.example.com:80
ServerAdmin you@example.com
</VirtualHost>

This will give us 2 domains to serve from.

Still to come....

Configuring wsgi and django
Configuring django settings to use our virtual hosts
Adding https support
Forcing /admin to use https only

Django, Apache 2.2, mod_ssl, and mod_wsgi (Part 1)

2009-06-17T15:45:00.000-10:00

Part 1 | Part 2 | Part 3

It's funny how experience changes your perspective on things. 5 years ago I tried apache and thought it was too hard. "Why can't I just have a GUI to click the settings I want?!?" I would think in frustration. Now that I'm making the transition to Django, I thought I'd give Apache another try. Wow -- What a luxury it is to be able to just write a config file to do exactly what you want to do and not have to monkey around with where some stupid settings is in an extensive maze of windows and tabs. Hah... how times change indeed.

Anyways, here's a bit about setting up Django with Apache. Here's what will be achieved:

Serve up Django with mod_wsgi by default from the site root
Serve up static media (images, css, js, etc.) from a separate virtual host
Offer the Django app in both HTTP and HTTPS
Force the Django admin to always use HTTPS
Use django-grappelli for a slicker looking Django admin, as well as some other goodies
And lastly... do all this on a Windows Server (hah)

Installing Software
If you're following along at home, here's the list of things you'll need to download for a complete deployment:

The latest Apache Web Server Win32 binary package (get the installer)
The lastest mod_wsgi binary package (pre-compiled *.so)
TortoiseSVN (to get Django and grappelli with)
Python 2.6 Windows installer

Install all of the above, accepting the defaults (unless you otherwise know what you're doing). For mod_wsgi I'll cover installation in the next part, so hang onto it for now.

Now we'll need to do 2 SVN checkouts of code...

Installing the latest Django trunk from SVN
(note: this method will have the Django development trunk as your production copy of Django. If you don't like that, then just use the installer or the tar/zip from the Django site).

In your python install directory (default: C:\Python26) open Lib and then site-packages
Create a new folder named "django"
Right-click on that folder and choose "SVN Checkout" (this will launch TortoiseSVN)
Paste this URL into that window:http://code.djangoproject.com/svn/django/trunk/django

You've now got a fresh copy of Django, but we need to configure Windows to be able to find Python and the Django tools.

Right-click "My Computer" and choose Properties (this might be slightly different for Vista+)
"Advanced" tab
"Environment Variables" at the bottom
In the "System variables" list, find "Path"
Highlight it, and hit "Edit"
Add this value to the end of it (change the path to your python path if it's not default):
C:\Python26;C:\Python26\Lib\site-packages\django\bin;

Now you'll want to test to make sure this works.

Open a command prompt and type "python" and hit enter. Python should run. Ctrl+Z out of that, and type "django-admin.py help" and hit enter. It also should run.

Django and python are good to go.

Installing grappelli
This next part uses my preferences. You can do this different if you want, but keep in mind you'll need to adjust paths later on to account for your differences.

I like to install my django re-usable apps into my project directory. This adds them to the SVN trunk and I don't have to worry about if others in the office have the app installed on their local machine or not.

Anyways, open your Django project (the site you've made), and create a new folder called "grappelli". Right-click that folder and choose "SVN Checkout". Paste this URL and hit ok:

http://django-grappelli.googlecode.com/svn/trunk/grappelli
It should download a copy of grappelli. We'll look at adding it to Django in the next part.

Desktop :: June

2009-06-10T06:48:00.001-10:00

Vista Desktop, June 09, originally uploaded by wastingtape.

My desktop for June

OS: Windows XP
Wallpaper: Watercolor Emico
Dock: RKLauncher
Dock Skin: AluCurved3D
Desktop Info: Samurize

Determine Model Change v2

2009-06-06T10:11:00.001-10:00

Well I got around to doing a 2nd revision on my model change code (being the weekend I was wondering if it would come to pass). Per a suggestion by "thepointer" (#django IRC on freenode), I switched the code from using Python's generic vars() to Django's interal _meta. Using an internal API is probably not the ultimate best, but _meta has been stable and unchanged for quite a while.

I also added a "human_friendly" mode, which will take the model change and attempt to turn it into an understandable statement (string) about what exactly has changed. It still returns it in a dictionary with the field name as the key.

from django.db import models

def determine_model_change(old_model, new_model, human_friendly=False, ignore_fields={}):
    """
    Compares the two models against each other, returning a dictionary of
    values that have changed (new value only).

    Setting human_friendly=True will cause ignore internal fields like
    SlugField.  It will also attempt to parse a meaningful statement for
    the model change. ie 'Event date is now 5/7/2009'
    """
    not_human_fields = (
        models.fields.SlugField,

        models.fields.FilePathField,
        models.IPAddressField,
        models.FileField,
        models.ImageField,
        models.XMLField,
    )
    changed = {}
    
    if isinstance(old_model, models.Model) and isinstance(new_model, models.Model):
        for f in new_model._meta.fields:
            if not f.name in ignore_fields:
                new_value = getattr(new_model, f.name, '')
                old_value = getattr(old_model, f.name, '')
                if cmp(new_value, old_value) != 0:
                    if human_friendly:
                        if not type(f) in not_human_fields:
                            changed[f.name] = __verbose_field_change(old_model, new_model, f)
                    else:
                        changed[f.name] = new_value
    
    return changed

def __verbose_field_change(old_model, new_model, field):
    """
    Returns the human-friendly text for a field change
    """
    value = getattr(new_model, field.name)
    if isinstance(field, models.fields.DateField) or \
        isinstance(field, models.fields.TimeField) or \
        isinstance(field, models.fields.DateTimeField):
            
        value = value.strftime('%b %d, %Y %I:%M %p')    
    return '%s %s has changed to %s' % (
            old_model,
            field.verbose_name,
            value
        )


# -------------
# Sample usage:
# -------------

>>>
>>> from happenings.models import *
>>> import copy, datetime
>>>
>>> event = Event.objects.get(pk=1)
>>> event.name = "My Birthday"
>>> event.start_time = datetime.datetime(2009, 7, 5, 0, 0)
>>>
>>> newevent = copy.copy(event)
>>> newevent.start_time = datetime.datetime(2009, 7, 15, 0, 0)
>>>
>>> determine_model_change(event, newevent)
{'start_time': datetime.datetime(2009, 7, 15, 0, 0)}
>>>
>>> determine_model_change(event, newevent, human_friendly=True)
{'start_time': 'My Birthday start time has changed to Jul 15, 2009 12:00 AM'}

Easier, Faster Property Enumeration in Python

2009-06-06T08:43:00.000-10:00

I just discovered a really neat trick in Python to take a collection of objects, and turn one of their properties into a list. It's not terribly difficult to perform this the old way...

subscribers = []
for subscription in self.subscriptions.all():
 subscribers.append(subscription.user)
return subscribers

This would return something like [(User:bob),(User:jerry),(User:tim)] and so on. However, this can be done in just a single line...

return [s.user for s in self.subscriptions.all()]

+1 for Python coolness.

Django Model Comparison

2009-06-05T21:01:00.000-10:00

I started working more with django-notification today. However, my implementation (outside of Pynax) is to create a subscription app, particularly for subscribing to event or calendar updates. Using Django's signals, I've got most of it setup. What I needed was a way to tell the difference between the old and new event, so that the notification could actually tell you "The start time for Event X has changed to Y:ZX" instead of "An event you're watching has been updated!".

So to do that I needed some model comparision code. Here's version 1.


def determine_model_change(old_model, new_model):
  """
    Compares the two models against each other, returning a dictionary of

    values that have changed (new value only).
    """
  new_values = vars(new_model)
  old_values = vars(old_model)

  changed = {}

  for key in new_values:

      # Skip internal and 'magical' properties
      if not key.startswith('_'):
          if key in old_values:

              if cmp(new_values[key], old_values[key])!= 0:

                  changed[key] = new_values[key]
          else:

              # Save the new value if it is not in the old values
              changed[key] = new_values[key]
  return changed

# Sample run:
# >>> class SomeModel(models.Model):
# >>>    name = models.CharField()
# >>>    age = models.IntegerField()

# >>>
# >>> foo1 = SomeModel()
# >>> foo1.name = "Some Model Name"
# >>> foo1.age = 14
# >>>
# >>> foo2 = SomeModel()

# >>> foo2.name = "Foo Model 2"
# >>> foo2.age = 14
# >>>
# >>> determine_model_change(foo1, foo2)
# {'name': 'Foo Model 2'}

Ignoring .pyc files in NetBeans

2009-06-05T10:25:00.000-10:00

I started using the Netbeans 6.5 Python (Early Access) IDE a couple of weeks ago, and while all seemed to be going well, one thing that bugged me was seeing all the .pyc (python compiled file) in the treeviews. Turns out NetBeans has a simple way to fix this:

On the menu go to Tools > Options
Then "Miscellaneous"
Then "Files" tab
And find the section "Files Ignored by the IDE"

This value is a regular expression which makes it easy to add the functionality we're looking for.

Change this:
^(CVS|SCCS|vssver.?\.scc|#.*#|%.*%|_svn)$|~$|^\.(?!htaccess$).*$

To this:
^(CVS|SCCS|vssver.?\.scc|#.*#|%.*%|_svn)$|~$|^\.(?!htaccess$)|pyc.*$

You could easily use this method for any other file type you'd like to ignore. Just add "|extension" before the .*$.

Django is awesomeness (for serious web apps)

2009-05-25T23:00:00.000-10:00

Django is awesome.

I shouldn't say that since I haven't built anything substantial in it. But having created 3 or 4 test apps and having read half of the documentation, I'm rather (more or less) confident in that statement.

And they have ponies. Serious ponies. (but where are the pony shirts guys?)

Features I'm already all up in arms about:

Self-contained, reusable apps
Automatic admin interface
"Classed" forms
Unicode support through and through
Multiple authentication backends (including user-created)
A great community, with documentation, free online books, and DjangoCon
And of course the ponies.

Customizing the ASP.NET Issue Tracker

2009-05-15T10:33:00.001-10:00

Microsoft's Issue Tracker (part of the ASP.NET Starter Kit package) is old code. But it's free, it works, it runs on IIS6, and it's open source. I probably could have gone with something fancier.

Anyways, right away I noticed that there were a number of usability tweaks that could be made to make the application quite a bit easier to use. Here's a good example...

When you create a new event, by default, the "Owned By" combo box is empty. To me, that doesn't make sense. The majority of the time the owner will also be the... creator! So why not just set the value to the current user automatically when a new event is being created?

If you look inside ~/Issues/IssueDetail.aspx you'll see that the type of control for choosing the Owner is . All of the data bound controls within Issue Tracker are regular Web Forms controls, wrapped in a custom UserControl. By default not all of the properties are exposed, so we'll need to first expose the list items collection by adding this code to ~/UserControls/PickSingleUser.aspx.cs

public ListItemCollection Items
{
get { return dropUsers.Items; }
}

Now that we can access the list items, let's write the code to actually find and select the user.

The most logical place to handle this is on the Page_Load event of ~/Issues/IssueDetail.aspx.cs There's already an if/then handler for if the item is new or not.

if (IssueId == 0)
{
BindOptions();
ctlCustomFields.DataSource = CustomField.GetCustomFieldsByProjectId(ProjectId);
}
else
{
BindValues();
ctlCustomFields.DataSource = CustomField.GetCustomFieldsByIssueId(IssueId);
}

Here's what we need to do: Get the current user's full name, find that name in the databound dropOwned list items, and then select that item.

Issue Tracker already includes a user manager type object built in, ITUser. We can pass it the current page's identity and get the user from the user database.

ITUser user = ITUser.GetUserByUsername(Page.User.Identity.Name);

From there, all we need to do is identify that user in the list item collection, and select it.

foreach (ListItem li in dropOwned.Items)
if (li.Text == user.DisplayName)
{
li.Selected = true;
break;
}

The current user should not automatically be selected as the Owner default when a new issue is created.

The complete code listing should look like this:

// Initialize for Adding or Editing
if (IssueId == 0)
{
BindOptions();
ctlCustomFields.DataSource = CustomField.GetCustomFieldsByProjectId(ProjectId);

// Choose defaults
ITUser user = ITUser.GetUserByUsername(Page.User.Identity.Name);
foreach (ListItem li in dropOwned.Items)
if (li.Text == user.DisplayName)
{
li.Selected = true;
break;
}

}
else
{
BindValues();
ctlCustomFields.DataSource = CustomField.GetCustomFieldsByIssueId(IssueId);
}

HttpModule for easier Master Pages

2009-05-04T00:19:00.000-10:00

You know, I just don't like ASP.NET's Master Page feature. The thing is, I've always felt they create more hassle in the long run. Typically, I end up with way too many content place holders. I also really dislike looking at HTML pages which are only a series of <asp:Content> tag blocks.

So here's my workaround: a custom HttpModule that emulates the effect of Master Page without having to actually create and use a Master Page.

How It Works

A custom HttpModule is registered in the Web.config file
This module catches every request that is of Content-Type text/html (this includes aspx and such) and inserts pre-defined HTML into the outgoing HTML.

Sounds easy right? Yeah it is. I call my creation "Page Master"! (Aren't I a clever one)

Specifics of What It Makes Easier
Generally, I found the only thing I was using master pages for was...

Common CSS files
Common Javascript files
Page header
Page footer

Page Master supports all 3 of these, all user-definable in the Web.config file:

<!-- Config for PageMaster Http Module -->
<pagemaster>
 <headtag file="~/PageMaster/headtag.html" />
 <header file="~/PageMaster/header.html" />
 <footer file="~/PageMaster/footer.html" >
</pagemaster>

So, let's say you have a basic HTML page...

<-- HTML page unmodified -->
<html>
<head>
<title>My Page</title>
<body>
 <p>Body Text</p>
</body>
</html>

The contents of your "headtag.html" is...

<script src="/js/fake.js" />

With Page Master, the resulting page will be returned to the client instead as...

<-- HTML page after Page Master -->
<html>
<head>
<script src="/js/fake.js"></script>
<title>My Page</title>
<body>
 <p>Body Text</p>
</body>
</html>

...without ever having to use Master Pages.

Limitations
Since this was a quick project I whipped up in a couple hours, it's rather limited.

Right now this module only supports static HTML files, but I'd like to expand it to also be able to execute ASPX files, or to fetch a file from another server with HTTP. In case you're worried about performance, the data which is inserted is cached to the whole application, so it's only loaded once, and not every page request.

Another limitation is that it will insert the values for all pages of Content-Type "text/html", and not just the ones you've specified. Perhaps a feature that allows one to configure pages to ignore or not to do that on.

Download Page Master Http Module Source + Test Project
(Hit the 'click here' link next to "Save file to your PC:")

References
Producing XHTML Compliant Pages with Response Filters
Customizing SectionGroups and Sections
configSection Element (MSDN)

Webservices, MS Ajax, and Safari

2008-03-19T23:31:00.000-10:00

.NET Webservice

I finally wrote a webservice that will go into production usage when the beta site launches: AddressLookup. It reads ZIP code/city/state information from an Access database and returns it. This webservice will get implemented in various areas of the site to do things like auto-populate the city and state when you enter in your zip. Expect to see it on the Application Packet Request page and the like.

ASP.NET AJAX

Embrace, extend, extinguish mmm? Microsoft apparently released an update for .NET Framework 2.0 (included with 3.0 and above) which adds AJAX support (returning JSON for Javascript) for .NET Webservices. Since I was mainly looking at utilizing my newly minted webservice on the client-side this was something I was all ears for. After some fiddling with the web.config I had "MS AJAX" running on the webserver. I don't know why Microsoft feels the need to make everything their own. The oddest part is how it appears that MS attempted to set it up so that one could program an AJAX (client-side javascript partial page updates) completely from Visual Studio or Visual Web Developer without ever writing a line of Javascript. :/

I like:

That the AJAX addition on the webservice takes care of serializing to JSON for me in the same way the normal webservice automatically serializes to XML
That the service auto-generates a client-side proxy class which handles the JSON and returns it in the custom formatted type that I specified in the .NET webservice
That MS isn't ignoring client-side development in their web development system
That it doesn't use vbscript

I don't like:

Anything that starts with "asp:Script"
Why can't I just access the JSON webservice straight, using my own Javascript framework instead of important a redundant ".NET client side framework"? I don't need Sys.Whatever on my pages. Really.

[[ I had typed up a review of initial thoughts regarding Safari for Windows, but apparently when you use the less than or greater than signs in a blogger post, the auto-draft save totally drops out half of your post, thinking it's HTML of some sort... ]]