Playground Blues feed

Playground Blues feedhttp://playgroundblues.com/posts/Playground Blues posts feed.en-usSun, 25 Oct 2009 22:31:29 -0600 Interface harmony http://nathanborror.com/posts/2009/oct/25/interface-harmony/ <p>Interface consistency is one of those things that, if done correctly, should go unnoticed. I’ve slowly been working on a new interface for a <a href="http://readernaut.com" title="Readernaut">side project</a> and thought it’d be a treat to share my approach. </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/4044799031/sizes/o/"><img src="http://farm3.static.flickr.com/2727/4044799031_7e01c461d0_m.jpg" title="Readernaut UI" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>Interfaces evolve based on the needs of people using them. Each task may require a different element. Common elements include buttons, dialogs, drop-downs, select boxes, checkboxes, input fields, etc. These elements are like notes in a composition seeking harmony. </p> <p>To ensure harmony I’ll arrange my elements on a single canvas and show the different levels of interaction. By doing this I can easily spot inconstancies. This also helps build a style guide for future elements and interaction. </p> <p>This is not groundbreaking by any means. Just thought I’d share and help promote the practice :) </p> <p><a href="http://nathanborror.com/posts/2009/oct/25/interface-harmony/">Comment</a></p> Sun, 25 Oct 2009 22:31:29 -0600http://nathanborror.com/posts/2009/oct/25/interface-harmony/ Working with Python and RabbitMQ http://playgroundblues.com/posts/2009/may/20/working-django-and-rabbitmq/ <p>I recently installed <a href="http://www.rabbitmq.com/">RabbitMQ</a> to handle some message queuing needs at <a href="http://readernaut.com">Readernaut</a> and thought I’d share how everything came together. If you’d like to learn more about RabbitMQ please read the excellent <a href="http://blogs.digitar.com/jjww/2009/01/rabbits-and-warrens/">Rabbits and Warrens</a>. </p> <p>To use RabbitMQ with python you need <a href="http://barryp.org/software/py-amqplib/">amqplib</a> because Rabbit uses the <a href="http://en.wikipedia.org/wiki/Advanced_Message_Queuing_Protocol">AMQP</a> standard. To make amqplib a little easier to use I needed a simple script that did three things: </p> <ul> <li> Easy way to connect to RabbitMQ. </li> <li> Easy way to pull stuff out of the queue. </li> <li> Easy way to throw stuff into the queue. </li> </ul> <p>There’s a project called <a href="http://github.com/ask/carrot/tree/master">Carrot</a> which handles all this and much more but it’s a little too complex for what I’m doing. All I needed was something very small, straightforward, and EASY. </p> <p>After staring at Carrot for a few days I decided to distill down what I needed into a single script I’m calling Flopsy (this is what happens when you’re coding and watching a movie about <a href="http://en.wikipedia.org/wiki/Beatrix_Potter">Beatrix Potter</a>, right?). So here we go: </p> <p>Step 1: Set global variables: </p> <pre><code>AMQP_SERVER = 'localhost' AMQP_PORT = 5672 AMQP_USER = 'guest' AMQP_PASSWORD = 'guest' AMQP_VHOST = '/' </code></pre><p>Step 2: Create a consumer (a script that consumes messages from the queue): </p> <pre><code>>>> from flopsy import Connection, Consumer >>> consumer = Consumer(connection=Connection()) >>> consumer.declare(queue='books', exchange='readernaut', routing_key='importer', auto_delete=False) >>> def message_callback(message): ... print 'Recieved: ' + message.body ... consumer.channel.basic_ack(message.delivery_tag) >>> >>> consumer.register(message_callback) >>> consumer.wait() </code></pre><p>Step 3: Create a publisher (a script that publishes messages to the queue): </p> <pre><code>>>> from flopsy import Connection, Publisher >>> publisher = Publisher(connection=Connection(), exchange='readernaut', routing_key='importer') >>> publisher.publish('Test message!') >>> publisher.close() </code></pre><p>And there we go! Flopsy weighs in at under 80 lines of code and it can be found on <a href="http://github.com/nathanborror/flopsy">Github</a>. Most of the above will make a lot more sense after reading the <a href="http://blogs.digitar.com/jjww/2009/01/rabbits-and-warrens/">Rabbits and Warrens</a> article and investigating <a href="http://www.rabbitmq.com/">RabbitMQ</a>. </p> <p><strong>Update:</strong> I just realized, this isn’t at all Django specific so my title is a little misleading (changing). That said, you could most certainly use Flopsy with straight up Python :) </p> <p><a href="/posts/2009/may/20/working-django-and-rabbitmq/">Comment</a></p> Wed, 20 May 2009 18:00:00 -0600http://playgroundblues.com/posts/2009/may/20/working-django-and-rabbitmq/ Capturing content in Django templates http://playgroundblues.com/posts/2009/feb/28/capturing-content-django-templates/ <p>As a template designer there are times when you have structural code surrounding a block which is waiting on content from a child template. It may look something like: </p> <pre><code><div class="content_title"> {% block content_title %}{% endblock %} </div> </code></pre><p>Sometimes this block is never filled so ideally I want the <code>DIV</code> element in this case gone. This isn’t easy because there’s no way to know whether content is headed towards the block so one solution that I’ve used is: </p> <pre><code>{% block content_title_wrapper %} <div class="content_title"> {% block content_title %}{% endblock %} </div> {% endblock %} </code></pre><p>This requires me to make an empty call to a wrapper block in a child template to clear out the div element. It’s obviously gross because I end up with empty block calls all over child templates. Yuk! </p> <p>Django community to the rescue! After asking around and some help from <a href="http://lazypython.blogspot.com/" title="Alex Gaynor">Alex</a>, <a href="http://ericholscher.com/" title="Eric Holscher">Eric</a>, and <a href="http://traviscline.com/blog/" title="Travis Cline">Travis</a> we stumbled upon <a href="http://www.djangosnippets.org/snippets/545/" title="Django Capture">Django Capture</a>, a django snippet created by kcarnold (Kenneth Arnold). Capture essentially takes a blob of content and makes it into a variable for you like so: </p> <pre><code>{% capture as content_title %} {% block content_title %}{% endblock %} {% endcapture %} {% if content_title %} <div class="content_title">{{ content_title }}</div> {% endif %} </code></pre><p>This eliminates the need for all those crufty wrappers in child templates. I’m sure there are other uses for this too, one being the ability to print content multiple times on the page like pagination before and after lists. Kenneth originally used the example of capturing content for translations. </p> <p>There’s a <a href="http://code.djangoproject.com/ticket/6378">ticket open</a> with some thoughts on adding this functionality to the existing <code>with</code> tag which makes perfect sense. It’d be great if we could hash this out and get it into Django proper because I’m sure others would find it useful. </p> <p><a href="/posts/2009/feb/28/capturing-content-django-templates/">Comment</a></p> Sat, 28 Feb 2009 09:00:00 -0600http://playgroundblues.com/posts/2009/feb/28/capturing-content-django-templates/ What's next http://playgroundblues.com/posts/2008/dec/13/whats-next/ <p>Does it make sense to reinvent the wheel every time we sit down to a new project? No. My work echoes my past and I stand by it. Some say, “that looks like Readernaut” or “that looks like Playground Blues” and I say yes, they are me. </p> <p>If it worked there it will work here. When a problem is solved I move on because each project has its fair amount of new problems and I’d rather spend time on new, more interesting problems. This doesn’t mean I don’t improve on past solutions. Everything evolves with me. </p> <p>We all bring our individual design style and solutions to the table. Projects are a collection of problems and if you quickly eliminate the solved problems you can dig your heals into the unsolved. </p> <p><a href="/posts/2008/dec/13/whats-next/">Comment</a></p> Sat, 13 Dec 2008 09:16:02 -0600http://playgroundblues.com/posts/2008/dec/13/whats-next/ Save RAM with mobile middleware http://playgroundblues.com/posts/2008/oct/7/save-ram-mobile-middleware/ <p>A while back I wrote an article on how to <a href="/posts/2008/feb/18/going-mobile/" title="Going mobile">set up a mobile site with Django</a>. Currently I have a <a href="http://www.slicehost.com" title="Slicehost">Slicehost</a> account which includes 256MB of RAM. My resources are tight and I really dislike having another set of unnecessary Apache processes for a mobile site that, aside from different templates, is using the same code base. The solution is quite simple, write a middleware. </p> <p>The following code checks the incoming request for ‘m’ or ‘mobile’ in the domain name. If it exists the <code>TEMPLATE_DIRS</code> is replaced by a <code>MOBILE_TEMPLATE_DIRS</code> setting: </p> <pre><code>class MobileMiddleware(object): def process_request(self, request): domain = request.META.get('HTTP_HOST', '').split('.') if 'm' in domain or 'mobile' in domain: settings.TEMPLATE_DIRS = settings.MOBILE_TEMPLATE_DIRS else: settings.TEMPLATE_DIRS = settings.DESKTOP_TEMPLATE_DIRS </code></pre><p>You’ll notice this requires you to also have a <code>DESKTOP_TEMPLATE_DIRS</code> (or whatever you want to call it) so you can switch back to the desktop version. </p> <p>If you’re using any sort of caching you’ll want be sure and change <code>CACHE_MIDDLEWARE_KEY_PREFIX</code> when you change to mobile templates and back again. </p> <p>You’ll probably want to place this middleware after Session and Authentication Middleware and before the Cache Middleware like so: </p> <pre><code>MIDDLEWARE_CLASSES = ( 'django.contrib.sessions.middleware.SessionMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'playgroundblues.middleware.MobileMiddleware', 'django.middleware.cache.UpdateCacheMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.cache.FetchFromCacheMiddleware', ) </code></pre><p>Go Green! Save RAM! (kidding) </p> <p><a href="/posts/2008/oct/7/save-ram-mobile-middleware/">Comment</a></p> Tue, 07 Oct 2008 18:00:00 -0600http://playgroundblues.com/posts/2008/oct/7/save-ram-mobile-middleware/ Message Queuing imports http://playgroundblues.com/posts/2008/sep/5/message-queuing-imports/ <p>Last week I ran into some problems dealing with large book imports on <a href="http://readernaut.com">Readernaut</a>. I tested the system for around 50-100 books but had no idea people would upload lists of 900+ books. This begged the question, how do you handle importing very large sets of data before the browser times out? </p> <h3>Brief example</h3> <p>User uploads a list of 1000 ISBNs to be imported into their library. Each book, if not already in the system, needs to be imported via another service like Amazon. </p> <h3>Solution 1: Threading</h3> <p>Use threading to push off the long running process to another thread while directing the browser to a status page. You could setup an Ajax request to periodically check on the status of the import and update a progress bar. </p> <p>This solution is generally a bad idea. It’s super easy to do and tests well in a development environment, but has scary consequences down the road, especially if you don’t have a lot of server resources. </p> <h3>Solution 2: Message Queuing</h3> <p><a href="http://en.wikipedia.org/wiki/Message_queue">Message queuing</a> is a very basic asynchronous method of storing items in a queue to be processed later. </p> <p>So for this instance I created a model called Message that has three fields: </p> <pre><code>class Message(models.Model): user = models.ForeignKey(User) subject = models.CharField(max_length=100) message = models.TextField() </code></pre><p>This allowed me to slurp in the list of ISBNs and break them out into 20 book chunks. Each chunk gets related to a user and a subject of “book_import.” Once it’s finished I can send the user to a progress page where each chunk is processed one by one until they’re gone. Here’s a simple example of a progress view: </p> <pre><code>def book_import_progress(request): message_list = Message.objects.filter(user=request.user, subject='book_import') handle_message(message_list[0]) if len(message_list) > 0: return render_to_response('books/progress.html', {}, context_instance=RequestContext(request)) else: return HttpResponseRedirect('/user/books') </code></pre><p>First we get a list of messages, then we process the first 20 books. If there are more messages to be processed we refresh the page otherwise we send the user to their books page. </p> <p>Additionally it’s super simple to Ajaxify the progress page by using Django’s handy <code>request.is_ajax()</code> and returning a JSON object with info on the progress of the import. Message Queuing is pretty handy for a lot of situations and Amazon even has a service for it called <a href="http://www.amazon.com/Simple-Queue-Service-home-page/b?ie=UTF8&node=13584001">Simple Queuing Service</a> (SQS). </p> <p><a href="/posts/2008/sep/5/message-queuing-imports/">Comment</a></p> Fri, 05 Sep 2008 09:00:00 -0600http://playgroundblues.com/posts/2008/sep/5/message-queuing-imports/ Creating a basic API with Django http://playgroundblues.com/posts/2008/aug/11/creating-basic-api-django/ <p>Creating a simple public API for your site is a lot easier than you may think with Django. You’re basically just creating another view and serving it as XML or JSON instead of HTML. </p> <h3>Step 1) What’s public?</h3> <p>Decide what you want to be public. The best answer is the stuff you’re already displaying in your HTML templates. Then you need to create an entry in your url conf. </p> <pre><code>url(r'^api/v1/(?P<username>[-\w]+)/notes/?$', 'readernaut.api.views.user_notes'), </code></pre> <h3>Step 2) Create the view.</h3> <p>In the case for <a href="http://readernaut.com">Readernaut</a> I wanted to provide an XML feed for users notes. Here is what the view looks like: </p> <pre><code>def user_notes(request, username): reader = get_object_or_404(User, username__iexact=username) note_list = Note.objects.filter(user=reader) context = { 'reader': reader, 'note_list': note_list } return render_to_response('api/note_list.html', context, context_instance=RequestContext(request), mimetype='application/xml') </code></pre><p>This is a simplified version of the view but, as you can see, you could easily add pagination and other hooks to handle ordering and such. </p> <h3>Step 3) Create the template.</h3> <p>The view is pointing to the template <code>api/note_list.html</code> so all we need to do is create that file and build out our XML schema. </p> <pre><code><?xml version="1.0" encoding="utf-8"?> <notes version="1.0"> {% for note in note_list %} <note> <note_id>{{ note.id }}</note_id> <user> <username>{{ note.user }}</username> </user> <book_edtion> <title>{{ note.book_edition }}</title> <isbn>{{ note.book_edition.isbn }}</isbn> </book_edtion> <body><![CDATA[{{ note.note }}]]></body> <page_reference>{{ note.page_reference }}</page_reference> <created>{{ note.created|date:"Y-m-d G:i T" }}</created> <modified>{{ note.modified|date:"Y-m-d G:i T" }}</modified> </note> {% endfor %} </notes> </code></pre><p>How you define your XML templates is up to you. I name my templates with the <code>.html</code> extention simply because my text editor highlights the syntax better than if it were XML. It doesn’t matter because the mimetype dictates how the file is served up. Good luck! </p> <p><a href="/posts/2008/aug/11/creating-basic-api-django/">Comment</a></p> Mon, 11 Aug 2008 23:31:49 -0600http://playgroundblues.com/posts/2008/aug/11/creating-basic-api-django/ Give me one column http://playgroundblues.com/posts/2008/may/13/give-me-one-column/ <p>Think about the top five sites you actually go to on a daily basis and count how many of them display their content down a single column, excluding a side rail for ads or navigation. </p> <p>On a regular basis I visit Twitter, Flickr, Google Reader, Boing Boing, and Digg. All five have a single content column. I also regularly visit Wired, NYTimes, Pownce, FFFFound and Monoscope. Three out of five are single column with Wired a distant fourth because eventually it becomes a single column. </p> <p>The trouble I have with multi-column sites like Washington Post, New York Times, or LJWorld (a site I designed) is I can’t remember where I left off. When I open up Boing Boing or Gizmodo I scroll until I reach the last thing I saw a few hours ago. If I noticed an interesting story at 9:00am and I decide to go read it at noon on the Times, it’s vanished. </p> <p>I blame the pastiche of newspapers and the recent evangelizing of grids. Don’t get me wrong, I love grids but grids do not equal column bloat. The web is no place for this, especially if you’re a content heavy beast like a newspaper. It’s hard enough to grab someone’s attention why present them with columns worth of information when you can promote scrolling to take in one piece of content at a time. </p> <p>Blogs have conditioned us to zipping down the page and hardware enhancements like the scroll wheel, two finger touchpad gesture, and multi-touch devices have made it even easier (and fun). People want to scroll when given a single column. I don’t have the data but I would bet people scroll less when the amount of columns are increased. </p> <p><a href="/posts/2008/may/13/give-me-one-column/">Comment</a></p> Tue, 13 May 2008 15:47:45 -0600http://playgroundblues.com/posts/2008/may/13/give-me-one-column/ Gadget fast http://playgroundblues.com/posts/2008/apr/18/gadget-fast/ <p>My iPhone and laptop will be unplugged starting Friday evening for two days. I’ve let the fog of distractions generated by these two devices grow too thick so for the next few days (<a href="http://www.nytimes.com/2008/04/15/world/asia/15beijing.html?ex=1365998400&en=dcf809d03fc3958e&ei=5124&partner=permalink&exprod=permalink">much like China</a>) they’ll be turned off. </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/2423256635/sizes/o/"><img src="http://farm3.static.flickr.com/2052/2423256635_42a9945bc6_m.jpg" title="Gadget fast" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>It doesn’t stop there. The following week Twitter, Flickr, an my feed reader will be muted. I have nothing against these services, but it’s time to step back and take the pulse of things around me and see if I’m missing something. </p> <p>I used to do more gadget/service fasting and I’m well over due. My plan is to do some brainstorming for a few projects currently on my plate and catch up on some reading, but more importantly, spend time with my girlfriend. </p> <p>See you all next week! </p> <p><a href="/posts/2008/apr/18/gadget-fast/">Comment</a></p> Fri, 18 Apr 2008 15:49:50 -0600http://playgroundblues.com/posts/2008/apr/18/gadget-fast/ Capistrano rules http://playgroundblues.com/posts/2008/mar/17/capistrano-rules/ <p>I’ve grown tired of committing changes to my subversion repository, logging into my server, updating my live checkout, and restarting python processes. I finally decided to implement <a href="http://www.capify.org/">Capistrano</a> and eliminate this repetition. </p> <p>Here are my repetitive set of commands: </p> <pre><code>$ ssh playgroundblues.com $ cd ~/projects/playgroundblues $ svn up $ cd ~/www/playgroundblues.com/www $ touch django.fcgi </code></pre><p>Now, with the help of Capistrano, I just type: </p> <pre><code>$ cap deploy </code></pre><p>You’ll first need to <a href="http://www.capify.org/install">install Capistrano</a> which is as simple as <code>gem install -y capistrano</code>. Once that’s complete you need to create a “capfile” which is where you’ll define your tasks: </p> <pre><code>task :deploy, :hosts => "username@playgroundblues.com" do run "cd ~/projects/playgroundblues; svn up; cd ~/www/playgroundblues.com/www/; touch django.fcgi" end </code></pre><p>The above will vary depending on your host and directory setup. After you save the above file and as long as you’re in the directory where the capfile resides you can, in the terminal, type <code>cap deploy</code> and Capistrano does the rest. Bliss. </p> <p><a href="/posts/2008/mar/17/capistrano-rules/">Comment</a></p> Mon, 17 Mar 2008 23:03:55 -0600http://playgroundblues.com/posts/2008/mar/17/capistrano-rules/ Aspen Simulator http://playgroundblues.com/posts/2008/mar/13/aspen-simulator/ <p>As much as I’d like to blog about my trip to Austin and SXSW last week I’m just too excited over the <a href="http://developer.apple.com/iphone/program/">iPhone SDK</a> goodies that dropped last Thursday. </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/2332111168/sizes/o/"><img src="http://farm3.static.flickr.com/2273/2332111168_c7811d1e0e_m.jpg" title="Aspen Simulator" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>You may be asking yourself, “he’s a web guy, why does he care?” Well, there happens to be a beautiful gem tucked away called the Aspen Simulator. </p> <p>This is a complete pixel and functionally perfect replica of the iPhone and it’s fantastic for testing web apps. Before I was spending a lot of time back and forth between my iPhone and my desktop but since this thing is so identical I really don’t have to own an iPhone (but I will anyway). </p> <p>It’s a little hard to find, but after installing the <a href="http://developer.apple.com/iphone/devcenter/">developer tools</a> look under / Developer / Platforms / AspenSimulator.platform / Developer / Applications. </p> <h3>A few tricks</h3> <p>If you want to do a two finger zoom just hold down the option key while click dragging. You can also rotate the the phone by using the command key and right left arrows. To lock the phone press command L. Still try to figure out how to do a two finger scroll. </p> <p><a href="/posts/2008/mar/13/aspen-simulator/">Comment</a></p> Thu, 13 Mar 2008 17:50:30 -0600http://playgroundblues.com/posts/2008/mar/13/aspen-simulator/ Ah-ha Event Delegation http://playgroundblues.com/posts/2008/mar/5/ah-ha-event-delegation/ <p>Wrapping my head around things like OOP took months. It’s not because I’m an idiot (I don’t think) - it’s just because I needed all the explanations to marinate before having an ah-ha! moment. </p> <p>I had an ah-ha today, with regards to Event Delegation. I’ve never seemed to completely understand events, yet I use them all the time. They’re an essential aspect of Actionscript and Javascript and there are two basic ways of capturing events, Event Handling and Event Delegation. </p> <p>Most of us, whether we realize it or not, are familiar with Event Handling. Imagine we have an unordered list with a class name <code>.nav</code> and each item has a link. For this example, I’m going to use jQuery, so if you wanted to call a javascript function when the user clicks a link in the list, you’d do the following: </p> <pre><code>$('.nav a').each(function() { $(this).click(handleClick); }); function handleClick(event) { // fun stuff goes here } </code></pre><p>If you’re jQuery savvy, the above code should be familiar. We’re looping over all the anchor tags within the unordered list and assigning the function “handleClick” to the click event. Each time someone clicks a link, “handleClick” is called and the anchor tag is in the function scope. This is Event Handling. </p> <p>Event Delegation makes things a little simpler by eliminating the need to loop over every anchor tag. We simply apply the click event to the unordered list like so: </p> <pre><code>$('.nav').click(handleClick); </code></pre><p>Since the click event is registered with the unordered list, it gets fired off when anything inside the list is clicked. The scope of the handleClick function is set to the <code><ul></code> but if you want to target the anchor tag below the mouse click, you use <a href="http://docs.jquery.com/Events_%28Guide%29#event.target">event.target</a>. This is Event Delegation. </p> <p>Both are very powerful but in most instances Event Delegation is going to require less code while boosting performance. Many thanks to <a href="http://www.jacobian.org">Jacob</a> for making this ah-ha moment possible. </p> <p><a href="/posts/2008/mar/5/ah-ha-event-delegation/">Comment</a></p> Wed, 05 Mar 2008 00:24:56 -0600http://playgroundblues.com/posts/2008/mar/5/ah-ha-event-delegation/ Going mobile http://playgroundblues.com/posts/2008/feb/18/going-mobile/ <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/2276634164/sizes/o/"><img src="http://farm3.static.flickr.com/2291/2276634164_cc599ccc10_m.jpg" title="Mobile Playground" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>Over the weekend, I decided to whip up a mobile (iPhone) version of Playground Blues. I walked into Broadway Cafe around 3pm on Saturday, and by 5:30, I had <a href="http://m.playgroundblues.com" title="Mobile playground">m.playgroundblues.com</a>. Here’s how it went down. </p> <h3>Step 1</h3> <p>Since I’m still using Dreamhost and FastCGI, I created my .htaccess file along with my dispatch.fcgi file for my new sub-domain as usual. Made one little change to my dispatch file: instead of having <code>DJANGO_SETTINGS_MODULE</code> pointing to playgroundblues.settings, I pointed it to playgroundblues.settings_mobile. </p> <p>Then, in my project folder, I made a duplicate of my settings file and renamed it to settings_mobile.py. Let me emphasize again, this is a duplicate. </p> <h3>Step 2</h3> <p>Created a new templates folder and named it “templates_mobile.” Opened up my settings_mobile.py file and added a new line to the top of my <code>TEMPLATE_DIRS</code> tuple. This tells Django to first look in mobile templates, and if the template doesn’t exist, fall back on regular site templates. (Remember, this is only for my mobile site.) </p> <pre><code>TEMPLATE_DIRS = ( "/home/playgroundblues/templates_mobile/", "/home/playgroundblues/templates/", ) </code></pre> <h3>Step 3</h3> <p>In my new templates_mobile folder, I created a new base template called “base_mobile.html” which I’ll use to extend in all my child templates instead of the main sites base.html. Then I went through the sites pages and recreated mirrored templates in the mobile folder. So /templates/blog/post_detail.html was overwritten by /templates_mobile/blog/post_detail.html. I stripped out extraneous content that was unnecessary for someone on the go, leaving core content and functionality. </p> <p>The nice thing is if someone happens to creep into a section that you haven’t gotten to (as long as you didn’t override base.html), your site will display as it would on a computer proper. If there’s a more succinct way of doing this, please let me know. </p> <p><a href="/posts/2008/feb/18/going-mobile/">Comment</a></p> Mon, 18 Feb 2008 23:17:58 -0600http://playgroundblues.com/posts/2008/feb/18/going-mobile/ iPhone bookmark iconage http://playgroundblues.com/posts/2008/jan/15/iphone-bookmark-iconage/ <p>If you’re wondering how to control the icon that gets generated for your webpage with the new 1.1.3 iPhone release, look no further than <a href="http://developer.apple.com/iphone/devcenter/designingcontent.html">Apple’s iPhone Dev Center</a>. </p> <p>Apple has added a section called “Create a WebClip Bookmark Icon” and it calls for a 57x57 pixel icon. After some testing today I’ve concluded this recommended sizing results in a fuzzy icon, largely due to the iPhone being a 163 ppi display. </p> <p>Instead of sticking with the recommended sizing I bumped it up to 158x158. When this gets scaled you’ll be left with a crisp icon that sits nicely amongst Apples crisp icons. Onward. </p> <p><a href="/posts/2008/jan/15/iphone-bookmark-iconage/">Comment</a></p> Tue, 15 Jan 2008 16:09:40 -0600http://playgroundblues.com/posts/2008/jan/15/iphone-bookmark-iconage/ Flash, meet H.264 http://playgroundblues.com/posts/2007/dec/4/flash-meet-h264/ <p>Adobe just <a href="http://www.adobe.com/aboutadobe/pressroom/pressreleases/200712/120407adobemoviestar.html" title="Update 3 Flash Player">released</a> Update 3 of Flash Player 9. This is HUGE. Streaming video is no longer a laughing matter. Streaming High Definition video will become common place and it starts today. </p> <p>Everyone talks about BlueRay and HD-DVD, but what they don’t realize is they’ve already been obsolesced before catching stride. VHS is dead, brick and mortar video rental is on life support, and DVD just checked in with chest pains. </p> <h3>How long will it take?</h3> <p>I give Adobe four months to capture 80% of the market share. It usually takes about a year to cover 90% of the web with a new Flash version, but once YouTube and MySpace deliver, the game’s over. </p> <h3>What does this mean?</h3> <p>It means you can cancel your cable. I recently did because I’m getting most of my content from iTunes and YouTube. I paid around $100 a month for cable and watched nothing worthwhile. Now I could <strong>own</strong> around fifty shows a month for the same price — not to mention most of the stuff I like is free. Let’s also not forget the portability factor :) </p> <p>This is a huge step forward in providing tools to people who need them. Now go <a href="http://www.adobe.com/go/getflashplayer" title="Upgrade Flash">upgrade</a>. </p> <p><a href="/posts/2007/dec/4/flash-meet-h264/">Comment</a></p> Tue, 04 Dec 2007 22:58:06 -0600http://playgroundblues.com/posts/2007/dec/4/flash-meet-h264/ Django Basic Apps http://playgroundblues.com/posts/2007/dec/2/django-basic-apps/ <p>I’ve been working on abstracting some Django applications from past projects so they can effortlessly be plugged into future projects. I hate writing the same blog application repeatedly, so this is an attempt to make life easier. I think this will be a fun, little suite of plug-n-play Django apps that everyone can benefit from. </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/2082654505/sizes/o/"><img src="http://farm3.static.flickr.com/2212/2082654505_fc62bd9732_m.jpg" title="Django Basic App Colors" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>I’m calling this suite Basic Apps with the hopes they’ll live up to their name. They’re freely distributed under the <a href="http://www.opensource.org/licenses/bsd-license.php" title="New BSD License">New BSD License</a> and hosted at Google Code. The goal is to use the month of December to get feedback from everyone and finalize the models, so <strong>beware of model changes.</strong> </p> <p>The apps I’ll be introducing today include Basic Blog, Basic Places, Basic People, Basic Library, and Basic Profiles. Before you run off keep in mind these are <em>basic</em> apps. You won’t see anything earth shattering. The idea is to be simple and pluggable so when it comes time to add a blog or user profiles to your project you’ve got a jumping off point. That said, I’d like to provide a brief description of each app: </p> <h3><a href="http://code.google.com/p/django-basic-blog/" title="Basic Blog">Basic Blog</a></h3> <p>This is a blog, nothing more nothing less. There is a Post model and a Category model. The dependancies include Django Comments and <a href="http://code.google.com/p/django-tagging/" title="Django Tagging">Django Tagging</a>. </p> <h3><a href="http://code.google.com/p/django-basic-places/" title="Basic Places">Basic Places</a></h3> <p>This app stores place information, (gasp!) The models include Place Type, City, Point, and Place. Django Tagging is the only dependancy. </p> <h3><a href="http://code.google.com/p/django-basic-people/" title="Basic People">Basic People</a></h3> <p>This app stores people information. (you’re kidding!) This app has nothing to do with Users. The people that go here are individuals that will never have access to your project. It is used heavily with the library app. The models include Person Type and Person. </p> <h3><a href="http://code.google.com/p/django-basic-library/" title="Basic Library">Basic Library</a></h3> <p>This actually contains three apps: Music, Movies, and Books. All three are independent and should be placed independently in your PYTHONPATH. Movies has one model, Movie. Books has two, Book and Publisher. Music has Label, Band, Album, and Song. All three depend on the Basic People app. They all have a Genre model to boot! </p> <h3><a href="http://code.google.com/p/django-basic-profiles/" title="Basic Profiles">Basic Profiles</a></h3> <p>This app extends the Django User app, providing added user information. The models include Profile, Mobile Service, Link, Service, and Service Type. </p> <p>All of these apps need Python 2.4 or higher and Django 0.97 or higher. If you have any feature requests or notice any issues please create a ticket on the corresponding Google Code site using the Issues tab. I’ve also started a <a href="http://groups.google.com/group/django-basic-apps" title="Django Basic Apps Google Groups">Django Basic Apps</a> discussion over at Google Groups. Now, let’s build some shit. </p> <p><a href="/posts/2007/dec/2/django-basic-apps/">Comment</a></p> Sun, 02 Dec 2007 21:24:40 -0600http://playgroundblues.com/posts/2007/dec/2/django-basic-apps/ Django Sprint http://playgroundblues.com/posts/2007/dec/1/django-sprint/ <p> </p> <p>Armed with high levels of legally addictive stimulants, silver laptops, and brilliant minds, Django will get even closer to 1.0 <a href="http://www.djangoproject.com/weblog/2007/nov/07/sprint/" title="Worldwide Django Sprint">today</a>. If you have any interest in being apart of today’s event, scurry over to the Django site and scan for tickets that catch your eye and expertise. Join us in IRC (irc.freenode.net) in the #django-sprint room or if you’re lucky enough to live near Lawrence, Kansas come join us! </p> <p><a href="/posts/2007/dec/1/django-sprint/">Comment</a></p> Sat, 01 Dec 2007 11:15:44 -0600http://playgroundblues.com/posts/2007/dec/1/django-sprint/ Juggling Django settings modules http://playgroundblues.com/posts/2007/nov/6/juggling-django-settings-modules/ <p>If you find yourself juggling multiple Django projects and constantly changing the DJANGO_SETTINGS_MODULE variable, try this simple shortcut. </p> <p>Upon diving into a particular project I define an alias in my .bash_profile that gets me to the project directory in as few keystrokes as possible. For example, to get to my playgroundblues directory I simply type ‘pb’ and I’m in the root of playgroundblues.com. Here is the line of code in my .bash_profile: </p> <pre><code>alias pb="cd /Working/www/playgroundblues.com/" </code></pre><p>Pretty straight forward, however, since I’m going to that project I might as well set the DJANGO_SETTINGS_MODULE at the same time so I’ve altered the line above to: </p> <pre><code>alias pb="cd /Working/www/playgroundblues.com/; export DJANGO_SETTINGS_MODULE=playgroundblues.settings" </code></pre><p>Now I’m in the proper directory with the proper settings file is in focus. Bliss. </p> <p><a href="/posts/2007/nov/6/juggling-django-settings-modules/">Comment</a></p> Tue, 06 Nov 2007 14:23:23 -0600http://playgroundblues.com/posts/2007/nov/6/juggling-django-settings-modules/ Care to scrum? http://playgroundblues.com/posts/2007/oct/17/care-scrum/ <p>We need more scrums and less meetings. A <a href="http://en.wikipedia.org/wiki/Stand-up_meeting" title="Stand-up meeting">scrum</a> is a 5-10 minute stand-up meeting. About 80% of the meetings I’ve ever attended have included at least five people. Any meeting over three becomes a presentation while one bloviates and others wander. </p> <p>It’s been a while since my last scrum. It included seven people, complete participation, no dominance, one referee, and was contained within a 10 minute package. Rather than walking away in a typical post-meeting cloud of confusion, I left the scrum feeling clear and informed. It was the best mode of collaborative communication I’ve been a part of. Again, I say more scrums, less meetings. </p> <p><a href="/posts/2007/oct/17/care-scrum/">Comment</a></p> Wed, 17 Oct 2007 10:59:30 -0600http://playgroundblues.com/posts/2007/oct/17/care-scrum/ Trials of the I-70 commute http://playgroundblues.com/posts/2007/oct/15/trials-i-70-commute/ <p>A while ago I began working back in the big city while remaining in modest Lawrence. This required a 40 min. x 2 drive into the sun five days a week. It wasn’t so bad at first, but the race through traffic and mass of incandescent gas started taking its toll. </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/425974197/sizes/o/"><img src="http://farm1.static.flickr.com/171/425974197_3c62310db1_m.jpg" title="Sunset" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>I decided to evaluate what was wearing me out. The sun, for one, was melting my retinas and giving me headaches. This stress could easily be eliminated with the right shades, polarized to be exact. They immediately reduced eye strain and lowered my stress level. I was still experiencing anxiety that led to being drained at work and home. This had to be stemming from my colleagues on the road. </p> <p>Driving I-70 during rush hour is like threading a needle. You’re constantly struggling to out-pace traffic so you can relax and cruise the rest of the way home. Only problem is your cruising doesn’t happen until the last 10-15 miles. I averaged 80 to 85 mph and decided one day just go the speed limit, 70 mph. </p> <p>The results were immediate. I didn’t have to pass anyone! That alone leveled my stress. Then I realized I wasn’t getting into any traffic jams because they were all hurdling past me. I could hold a steady cruising speed without having to touch my brake. This also upped my miles per gallon giving me an extra trip on a full tank. </p> <p>The irony was seeing everyone who passed me at the toll booth or the first stoplight, so I knew I wasn’t losing any time. </p> <p>After spreading the word about this revelation, a coworker was telling me about some research comparing fluid dynamics and <a href="http://en.wikipedia.org/wiki/Traffic_wave" title="Traffic waves">traffic waves</a>. The Wikipedia page describes it best: </p> <blockquote><p>A deeper understanding of traffic waves is a goal of the physical study of traffic flow. When looking at traffic waves, the traffic itself can often be looked at in a manner of fluid dynamics. It has been said that by knowing how traffic waves are created, drivers can sometimes reduce their effects by increasing vehicle headways and reducing the use of brakes, ultimately alleviating traffic congestion for everyone in the area. </p> </blockquote><p>So to my dear fellow I-70 commuters, you don’t have to thank me; but just remember who’s making your life easier. See you at the toll booth! </p> <p><a href="/posts/2007/oct/15/trials-i-70-commute/">Comment</a></p> Mon, 15 Oct 2007 11:39:24 -0600http://playgroundblues.com/posts/2007/oct/15/trials-i-70-commute/ Subliminal Culture http://playgroundblues.com/posts/2007/sep/21/subliminal-culture/ <p>Lately I’ve been reading more of <a href="http://www.manovich.com" title="Lev Manovich">Lev Manovich’s</a> Language of New Media. Manovich discusses the methods in which we access new media. He mentions some research done by Paul Virilio on the collapsing effect technology has on the distances between people and content. Before, if a person wanted to see the works of Da Vinci they’d have to travel to a book store or an art museum. With the advent of new media it’s as simple as pulling up a browser. </p> <p> </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/1417693311/sizes/o/"><img src="http://farm2.static.flickr.com/1097/1417693311_44605a7a5a_m.jpg" title="Ginevra de' Benci" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>The consequences of this immediacy are somewhat evident. The moment of seeing a work like <a href="http://en.wikipedia.org/wiki/Ginevra_de'_Benci" title="Ginevra de' Benci">Ginevra de Benci</a> on a screen is most likely followed up with going to Digg or checking email but seeing this 15th century master work at the <a href="http://en.wikipedia.org/wiki/National_Gallery_of_Art" title="National Gallery of Art">National Gallery</a> is followed with indescribable emotions. The immediacy of content to some degree robs us of these experiences, but we’re still absorbing content on a subliminal level. </p> <p>These fleeting moments of content absorption can heighten the experience of standing in front of the real thing. By skimming da Vinci’s Wikipedia entry I’ll have seen Ginevra and maybe even read a few lines about her so upon seeing the piece in person I may have a slight familiarity which leads to a better appreciation of the work thus heightening the experience. In advertising we call this subliminal advertising and judging by <a href="http://youtube.com/watch?v=ZyQjr1YL0zg" title="Subliminal Advertising experiment">this little experiment</a>, it proves to be very effective. </p> <p>Virilio seems to think the immediacy of the web will stunt peoples physical interactions with content thus stunting reflection and critical thinking. I see his point but I think it has the potential to heighten and increase our experiences. </p> <p><a href="/posts/2007/sep/21/subliminal-culture/">Comment</a></p> Fri, 21 Sep 2007 11:33:17 -0600http://playgroundblues.com/posts/2007/sep/21/subliminal-culture/ Manually Compressing PNGs http://playgroundblues.com/posts/2007/sep/18/manually-compressing-pngs/ <p>With the advent of some very clean hacks to make PNGs work in IE I’ve found myself working them into my designs more. Using them has allowed me to achieve some effects that were next to impossible with JPEGs and GIFs. The biggest hurdle in using PNGs is their file size. The export tools in Photoshop tie your hands behind your back, not allowing you to tweak anything that may lead to a more compact file. Until Photoshop adds some functionality I think I may have a handy solution. </p> <p>To understand the solution we need to understand the composition of a PNG. The most popular use case for PNG is it’s levels of transparency (or alpha channel), 256 to be exact. Along with this it has a 24bit color palate. In photoshop there are two settings in Save for Web, 8bit PNG and 24bit PNG. The 24bit is most desirable because it enables the alpha channel. The PNG format has many many other features but I’m only going to focus on these few to move this post along. </p> <p>So we can deduce from the above that we have an image with two qualities, 24bit color and 256 alpha channel. Both are being compressed somewhat independently. The only problem is, Photoshop doesn’t let us change the compression on the 24bit part or on the alpha channel part. If we focus on compressing the 24bit part we can potentially shave off a lot of the fat. </p> <p>For this example I’m going to use a box that has a lot of texture and a drop shadow. To compress the inside part that doesn’t have a drop shadow I’m simply going to select it, copy it, create a new document and paste it in. Then I’m going to use Save for Web to export it as a JPEG and use the photoshop compression tools to make it an acceptable file size. Then I’m going to open my compressed JPEG that I just saved and copy it into my original document. After lining things up with the compressed JPEG on top I’m now ready to Save for Web and use the PNG 24bit compression. The results are pretty dramatic. What normally would be a 68k image is now a 48k. In some cases I’ve cut files size in half! </p> <p><img src="http://playgroundblues.com/media/source/png_compress_tutorial.jpg" alt="visual" /> </p> <p>I’d love to hear other techniques. </p> <p><a href="/posts/2007/sep/18/manually-compressing-pngs/">Comment</a></p> Tue, 18 Sep 2007 12:27:41 -0600http://playgroundblues.com/posts/2007/sep/18/manually-compressing-pngs/ iPhone dead; $30 rental? http://playgroundblues.com/posts/2007/aug/15/iphone-dead-30-rental/ <p>This morning I woke up on my own. Normally I hear little crickets chirping around 7am which is my <a href="http://www.apple.com/iphone" title="Apple iPhone">iPhone</a> letting me know it’s time to face the coming day. This morning, no crickets. At first I thought maybe the battery was flat, but that’s not possible. I charged it the day before and didn’t put it through any rigorous usage. So <a href="http://docs.info.apple.com/article.html?artnum=305743" title="Resetting iPhone">iPhone CPR</a> commences. </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/1127556671/sizes/o/"><img src="http://farm2.static.flickr.com/1410/1127556671_4faa5f3568_m.jpg" title="iPhone Dead" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>First I try a hard restart, holding down the home and on/off button for a few seconds. No dice. Then I plug it in, nothing, another hard restart, nothing. Let it sit for a while plugged in, restart, nothing. She’s flat-lined and any amount of resuscitation is not getting her little heart pumping again. By this point it’s time for work. </p> <p>I roll into work around 9am with a cold iPhone in my pocket. She still feels good but her soul is lost. 10am rolls around, I can’t wait. I head to Apple Store on the Plaza hoping they can shock her back into existence. The Genius looks it over, does exactly what I did earlier that morning. Realizes he can’t do much so offers to send it back to Apple for repair. This sucks, two days sans phone is not acceptable. I’ve never had to send a phone in for repairs, I’ve never had a phone just break. I <em>need</em> a phone at all times. I can’t say for sure if this is Apple’s fault but I know for a fact that I have not done anything out of the ordinary to cause my iPhone to die. So I’m forced to pay $30 to rent a phone while mine is being repaired. This is lame. </p> <p>Apple shouldn’t be charging it’s loyal $30 to rent an iPhone while theirs is being repaired, especially if the error is on Apple. This doesn’t seem like good customer service to me. I would gladly put down a deposit for the rental but I should get that deposit back. </p> <p>While my phone travels in her temporary sarcophagus to the bowels of Cupertino I’m left with the sting of loosing $30 for an error that is undoubtedly Apples. <strong>grumble</strong> </p> <p>I would like to thank the guys at the <a href="http://www.apple.com/retail/countryclubplaza/" title="Apple Store, Country Club Plaza">Apple Store</a>, they were very cordial and accommodating. </p> <h3>Update: August 28, 2007</h3> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/1254161063/sizes/o/"><img src="http://farm2.static.flickr.com/1416/1254161063_f8ddfe63b9_m.jpg" title="iPhone Aurora Borealis" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>I recieved my “fixed” phone in the mail via Apple. Only problem was the little guy refused to recognize my SIM card. I tried all sorts of things, even other SIM cards, nothing. Apple was kind enough to replace the phone. What a relief. After about two weeks of usage things were back to normal until this evening while browsing the web I was greeted with a colorful half streaked screen. I don’t know about anyone else but the Aurora Borealis belongs in the sky, not on the lower half of my iPhone screen. My luck just gets better by the iPhone. </p> <p><a href="/posts/2007/aug/15/iphone-dead-30-rental/">Comment</a></p> Wed, 15 Aug 2007 11:07:41 -0600http://playgroundblues.com/posts/2007/aug/15/iphone-dead-30-rental/ Blueprints are not final http://playgroundblues.com/posts/2007/aug/10/blueprints-are-not-final/ <p>So apparently a little framework called <a href="http://bjorkoy.com/blueprint/" title="Blueprint, a CSS Framework">Blueprint</a> has reared it’s head, born from a few stylesheets that look very familiar. I’m somewhat conflicted with its release because I don’t think it should be used. Don’t get me wrong, it’s great, but don’t use it. </p> <p>About five or so months ago I was working on the <a href="http://www.ljworld.com" title="Lawrence Journal-World">Journal-World</a> redesign. News sites tend to be very column heavy and I was getting tired of writing the same code over and over to accommodate for my design iterations. One day <a href="http://www.jeffcroft.com" title="Jeff Croft">Jeff</a> and I discussed some ways to maximized code reuse and speed up this process of going from Photoshop to markup. Later that night I sketched out a method for easily defining grid structures and columns. My attempt was pretty crude and over the next week or so it become a lot more solid with the help of Jeff and <a href="http://mintchaos.com/" title="Christian Metts">Christian</a>. After adding styles for type and common lists we had formed a pretty powerful time saving solution. I could quickly prototype mockups in hours. The only problem was it wasn’t semantic. Things like span-4, unit, and block polluted the HTML and CSS. </p> <p>At first I was okay with this because my focus was getting the redesign on the right track, however, looking back it was the wrong decision. Un-semantic code goes against everything the Standards movement has fought for. </p> <p>Do I shed a tear? No. I’m not an elitist in this area anymore and I don’t go sniffing for validation errors because I value usability, style and harmony more. But, the blatant un-semantic-ness of this framework still disgusts me. </p> <p>So I was quite surprised and sickened to find out Olav launched this almost identical framework, Blueprint. Don’t get me wrong, it’s great for prototyping but don’t settle for it. Good semantic names are worth every penny. Also, frameworks don’t belong in markup languages. They just don’t. </p> <p><a href="/posts/2007/aug/10/blueprints-are-not-final/">Comment</a></p> Fri, 10 Aug 2007 11:22:15 -0600http://playgroundblues.com/posts/2007/aug/10/blueprints-are-not-final/ First impressions http://playgroundblues.com/posts/2007/jul/1/first-impressions/ <p>How does a machine have soul? We could try and answer by throwing around terms like usefulness, elegance and grace but all our attempts would sound prosaic next to the device I recently became acquainted with. Run and hide Crackberry, the iPhone is here. </p> <p>For people to be drooling over a 4.8 ounce device is not unfathomable especially coming from Apple. This is different. During my first hours with the iPhone I literally felt nervous. I felt like I didn’t deserve this, it seemed unreal. </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/710146769/sizes/o/"><img src="http://farm2.static.flickr.com/1290/710146769_348f18222e_m.jpg" title="Mr. Wilson on iPhone" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>11:00am Saturday: Headed to the coffee house. Do I need my laptop or my notebook, or magazine? Was I really walking down the street listening to my phone? Wait… Whoa… phone call. <em>Pinch</em> Hello… <em>conversation</em> goodbye. Music!!! </p> <p>Some of my friends think I’m crazy but for a UI designer this is as close to nirvana as I’ve ever experienced. </p> <p>9:00pm Saturday: Driving to the liquor store. Wait, are they open? iPhone eight ball returns: <a href="http://www2.ljworld.com/marketplace/businesses/mass-beverage/" title="Mass Beverage">decidedly so</a>. Again… I’m not worthy. </p> <p>It’s like those little knowledge cracks in your life are slowly getting sealed. Anything you wanted or needed to know is now within a few gestures. Why remember? Leave it up to the cloud, let your iPhone be your Receiver. </p> <p>This device represents a new bar for <a href="http://en.wikipedia.org/wiki/Human-computer_interaction" title="Human-computer interaction">HCI</a>. It also poses many exciting questions and possibilities. My only hope is that Apple will offer an SDK in the coming months so the collective can contribute. I have confidence the will. Need we be reminded where cover-flow came from? We definitely can’t rely on the browser sandbox. It doesn’t offer the same grace and fluidity applications garner. </p> <p><a href="/posts/2007/jul/1/first-impressions/">Comment</a></p> Sun, 01 Jul 2007 16:43:10 -0600http://playgroundblues.com/posts/2007/jul/1/first-impressions/ The waves of creativity http://playgroundblues.com/posts/2007/may/17/waves-creativity/ <p>There are a lot of environmental factors that go into fostering a creative environment. As creative persons mature, we become more in-tune with what works best for us when it’s time to dream up new ideas and solutions. Some of us trek to coffeehouses while others listen to Bach, Satie or Mogwai. Whatever we do we’re all essentially trying to achieve a certain state of mind. </p> <p>Before I go any further here is a quick explanation of the human brain by neuronal scientist, <a href="/people/richard-m-restak/" title="Richard M. Restak">Richard Restak</a>: </p> <p> </p> <p>My very basic understanding is that synapses are essentially electrochemical connections that vibrate at varying frequencies. These frequencies can be <a href="http://en.wikipedia.org/wiki/Brainwaves" title="Brainwaves">measured</a> and grouped into four different categories: Beta, Alpha, Theta and Delta. </p> <p>By now you’re probably wondering what the hell does this have to do with creativity. Well let me quickly explain these four “states of mind.” Beta is the frequency we find ourselves in all too often. It’s associated with being tense, alert, or afraid. Alpha is a state of relaxation without the loss of awareness. Theta is a day dream state and Delta is a state of unconsciousness, a sleep state. </p> <p>When we seek out our ideal creative environments we are essentially trying to lower our brainwaves from Beta to Alpha. This takes time and cannot be done instantaneously. We can immediately go from Delta to Beta but not vise versa. We have to be someplace familiar where we feel safe and secure. A place were we can let our guard down. </p> <p>Certain types of people exist in a constant state of Beta, some job types require it. When you intermingle Beta’s with Alpha’s and Theta’s you undoubtedly create a source of tension. This is because the Beta’s set the tone for the room and raise everyone to their frequency. This is why you rarely see sales and account management mixed with designers and illustrators. </p> <p>Environment is worth more than any salary. I think most designers would agree when I say I’d much rather be making peanuts at a Googleplex than six figures at Joe’s Banner Ad Emporium. </p> <p>More info can be found here: </p> <ul> <li> <a href="http://www.doctorhugo.org/brainwaves/brainwaves.html" title="What are Brainwaves?">What are Brainwaves?</a> </li> <li> <a href="http://www.amazon.com/exec/obidos/ASIN/0609604457" title="Mozart's Brain and the Fighter Pilot">Mozart’s Brain and the Fighter Pilot</a> </li> <li> <a href="http://brain.web-us.com/brainwavesfunction.htm" title="Brainwave functions">Brainwave functions</a> </li> </ul> <p><em>Disclaimer: I’m no scientist. I just think this stuff is interesting and worth spreading. Correct me in the comments if necessary.</em> </p> <p><a href="/posts/2007/may/17/waves-creativity/">Comment</a></p> Thu, 17 May 2007 00:47:45 -0600http://playgroundblues.com/posts/2007/may/17/waves-creativity/ Transmedia newspapers http://playgroundblues.com/posts/2007/may/6/transmedia-newspapers/ <p>I just finished reading chapter three of <a href="/library/books/convergence-culture/" title="Convergence Culture">Convergence Culture</a> where <a href="/people/henry-jenkins/" title="Henry Jenkins">Jenkins</a> discusses transmedia storytelling. He focuses on the Matrix franchise and how it basically rewrote the rules for Hollywoods future. It got me thinking on my walk home from the coffeehouse, why aren’t newspapers doing this? </p> <p>We’re all familiar with the Matrix and have varying depths of involvement with it. Most of us have seen the first film, some the second and third but have any of us played the video game, or seen the Animatrix, or been to <a href="http://www.matrixonline.com" title="Matrix Online">Matrix Online</a>? It all represents facets of transmedia storytelling, the very essence of convergence. Danny Bilson explains the transmedia relationship between the Matrix film and its game: </p> <p> </p> <p>The news is delivered in a parallel fashion which isn’t going to last, in fact, it’s what’s killing the old product. I can get the same Washington Post online as I can from the printed version and it’s obvious which one I choose. A transmedia approach needs to replace the parallel delivery model. Give people up-to-the-minute details online, then print in-depth coverage. Show me how it relates to current culture with lessons and anecdotes, make it enjoyable and interesting and if the package is pretty I’ll proudly display it on my shelves. </p> <p>Why don’t newspapers live up to their medium? Print isn’t bad, it’s fantastic with huge staying power but you’ve gotta produce something I’m gonna want to keep around. I buy books because I want to savor them and I like the way they look on my shelves. Stop being so throwaway. The print medium isn’t dead but delivering up-to-the-minute news with ink is on life support. The industry really needs to rethink what gets inked and how their readers will savor it. </p> <p> </p> <p>I’m not suggesting in-depth storytelling should be relegated to print but it kinda makes sense as a starting point. I flat out won’t stare at a light-bulb and read pages of a story even if it is interesting. There are things you can do in print that you simply cannot do online and of you don’t believe me get your hands on a Cranbrook Academy of Art academic catalog. </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/487675148/sizes/o/"><img src="http://farm1.static.flickr.com/219/487675148_1b971e7710_m.jpg" title="Power of Green" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>A perfect example of news transmedia storytelling is the New York Times Magazine. It’s the only time I buy a newspaper and all I really want is the magazine. It’s kind of like a fortune cookie, I don’t really enjoy the cookie but I savor the fortune. The publication provides select stories that are well thought out and insightful which usually draw from the previous weeks worth of news bites. It features great illustrations and photographs. I could get it online through their Times Select but I’d rather not. </p> <p><a href="/posts/2007/may/6/transmedia-newspapers/">Comment</a></p> Sun, 06 May 2007 23:37:47 -0600http://playgroundblues.com/posts/2007/may/6/transmedia-newspapers/ LJWorld redesign http://playgroundblues.com/posts/2007/may/2/ljworld-redesign/ <p>So for the past five months or so we’ve been working on a redesign for the <a href="http://ljworld.com" title="Lawrence Journal-World">Lawrence Journal-World</a>. For those of you that don’t know, it’s a daily newspaper that circulates the town of Lawrence, Kansas. It’s quite small compared to surrounding markets which makes it very agile and free from shareholders and their evil agendas. </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/481899040/sizes/o/"><img src="http://farm1.static.flickr.com/232/481899040_733365067a_m.jpg" title="LJ Redesign" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>I had a feeling this project would be special and challenging but I had no idea of the scale. Turns out, around the same time I was tasked with designing <a href="http://ljworld.com/marketplace" title="Lawrence Marketplace">Marketplace</a>, a directory of 4000+ local businesses. I must also mention, news doesn’t stop for redesigns. It’s definitely a juggling act when your trying to complete a site thats constantly having to push out news features and various timely events like <a href="http://www2.ljworld.com/elections/2007/apr/03/races/lawrence_city_commission/">local elections</a>. There were, shall I say, growing pains. </p> <p>Details aside, the design is <a href="http://www2.ljworld.com/news/politics/kansas_legislature/" title="Kansas Legislature">simple</a>. In fact the design is designed to disappear. Content is what really matters so I decided to take an approach that would make the overall design feel supportive rather than overbearing. This isn’t easy for anyone and requires extreme discipline. Discipline I never thought I had. </p> <p> <div class="jellyroll_photo"> <a href="http://www.flickr.com/photos/sketch22/481899036/sizes/o/"><img src="http://farm1.static.flickr.com/220/481899036_8b3faacd14_m.jpg" title="Kansas Legislautre page" alt="Flickr photo"></a> </div> <script type="text/javascript" src="javascript/swfobject.js"></script> <script type="text/javascript"> var photo_gallery = new SWFObject("flash/photo_gallery.swf", "photo_gallery_swf", "240", "220", "9", "#FFFFFF"); photo_gallery.addParam('allowFullScreen', 'true'); photo_gallery.addVariable('gallery_xml', '/photos/xml/?photos=') photo_gallery.write("photo_gallery"); </script> </p> <p>The site will continue to take shape over time. We’re hoping that redesigns are a thing of the past and constant iterations are a thing of the future. We’ll see how long that lasts ;-) </p> <p>This project wouldn’t have been possible without the involvement of <a href="http://www.b-list.org/">James Bennett</a>, Dan Cox, <a href="http://www.jeffcroft.com/">Jeff Croft</a>, <a href="http://postneo.com/">Matt Croydon</a>, <a href="http://www.jacobian.org/">Jacob Kaplan-Moss</a>, Joel Mathis, <a href="http://www.mintchaos.com/">Christian Metts</a>, David Ryan, Tom Tobin, all the web producers and all the editors and reporters that allow us to do what we do. </p> <p><a href="/posts/2007/may/2/ljworld-redesign/">Comment</a></p> Wed, 02 May 2007 17:24:03 -0600http://playgroundblues.com/posts/2007/may/2/ljworld-redesign/ InspectDB to the rescue http://playgroundblues.com/posts/2007/apr/19/inspectdb-rescue/ <p>In a past life I used to build admin tools using <a href="http://www.rubyonrails.com" title="Ruby on Rails">Ruby on Rails</a>. I thoroughly enjoyed spending weekends improving my little tools and libraries but I eventually realized I was spending more time on back-end stuff than front-end. Enter Django. For the past nine months I’ve touched nothing but Django so you can imagine how easy it was for me to hop on the Rails bicycle when Dreamhost decided to upgrade Rails. </p> <p>You see, I failed to Freeze my Rails releases so they would be impervious to backwards incompatible changes. This presented a problem and I needed a solution like Don Imus needs a job. </p> <p>I decided it wasn’t worth investigating why my code broke between Rails version 1.2 to 1.2.3. My solution was to just rewrite the damn things in Django. While ranting at work about my situation my good friend <a href="http://www.b-list.org" title="James Bennett">James</a> pointed out a nice little tool called <a href="http://www.djangoproject.com/documentation/django-admin/#inspectdb" title="Django Inspect DB">inspectdb</a> part of django-admin.py. All I had to do was create a new Django project, point it to my old Rails database and inspectdb spits out all the necessary model code so Django can start using that database. </p> <p>I simplified my overly complex Rails admin tool (my fault again) and migrated the new data by setting up a template to print out SQL inserts to match the new simplified database schema. I literally did this in less than two hours on a tool that previously took over two days to build. Not to mention I got better authentication, caching, and peace of mind. </p> <p>I must point out this is not a failure of Rails, merely a lack of time and commitment on my part. It would, however, be nice if Rails would be more mindful of backwards compatibility :) </p> <p><a href="/posts/2007/apr/19/inspectdb-rescue/">Comment</a></p> Thu, 19 Apr 2007 23:11:30 -0600http://playgroundblues.com/posts/2007/apr/19/inspectdb-rescue/ Bringing back the personal http://playgroundblues.com/posts/2007/apr/11/bringing-back-personal/ <p>I’ve heard wisperings about the death of blogs lately. More and more we see our favorite writters fading into the ether. This begs the question, what next? What do we do with the barren ghost towns that once thrived on eager readers making sure their cache was cleared before stalking their favorites. </p> <p>Personal sites should be cornucopias which chronicle our lives. They should be open sketchbooks crammed with a maze of twists and turns. We should be able to post without shame or regret things that later on demonstrate our progress. I want to browse sites like <a href="http://www.chrisglass.com/" title="Chris Glass">Chris Glass</a> which feels like a time capsule where I can rummage around and get a sense of someone’s life. It’s incredibly motivating to see his travel logs, journal entries, photos and favorites. All neatly packaged with thought and purpose. You can tell this site not only serves his audience, but seems to play an important role for him. </p> <p>I think it’s obvious that 2007 is a turning point for blogging but it’s also a chance to question what we should strive for in a personal site. Social networking seems to have decentralized our lives and allowed us to stray farther away from our personal sites, but thanks to API’s we’re beginning to gain back some centralization. We really shouldn’t shackle ourselves to the output of an API, nor should we restrict ourselves to “dynamic content” that comes from a CMS. Most of us are highly skilled in HTML/CSS and we shouldn’t fear one off pages and designs. I remember the days of updating my blog via HTML, when I had something to show I didn’t ask how it was going to live in a CMS, I just threw it up. </p> <p>With this in mind I don’t exactly know where Playground Blues is headed. There is a lot of data that I’m collecting that I haven’t figured out how to share or even if it makes sense to share. I am, however, eager to explore the Art of maintaining a personal site and in the coming weeks I’d like to discuss this more along with some of my concerns regarding digital preservation. Stay tuned. </p> <p><a href="/posts/2007/apr/11/bringing-back-personal/">Comment</a></p> Wed, 11 Apr 2007 00:35:00 -0600http://playgroundblues.com/posts/2007/apr/11/bringing-back-personal/