Rhys Powell's Waste of Space

HackAGong

2012-11-26T00:00:00-08:00

So I’m going to tell you all today about how spending 30 hours in a hot room, hunched over a laptop is one of the best things I’ve ever done from a learning perspective.

For the uninformed and uninitiated, HackAGong is Wollongong’s first ever Hackathon, an event where teams of coders, designers and the occasional business types form teams to hack out a cool project over a weekend. I was pretty green going into it and not entirely sure what to expect, but in the end I teamed up with a super talented designer who I’d never met before the morning of the event and went on to win desks at the StartPad over the summer.

So with that in mind, I’d like to think I can offer up a few pieces of advice to anyone looking to compete in the future.

Design is everything – I can’t overstate this enough, while our idea was good and well executed, it was design that put us in the lead. Simply adding some animation to the page made for a much better demo and definitely got people interested. For all intents and purposes, your app is just an interface, make sure it’s a well designed one.
Don’t be too ambitious – This applied even more to our two person team. What you really want is a simple idea that you can get working quickly and then put a ton of polish into. We initially toyed around with some more complicated ideas but decided to go for something simpler and were better off for it.
Experiment – Our entire project was built in Ember.js, a framework that I’d only briefly toyed around with before the event. I used HackAGong as an excuse to play around with new tools, try things I wouldn’t do in a larger project, and as a result I learnt a ton.
Don’t take it too seriously – Hackathons should be about fun first and foremost. My favourite projects of the night—Melon.im and The Towers—weren’t the ones that made for viable businesses or were the most technically impressive, they weren’t trying to be, that’s what I love about the hacker culture.

So that’s what I’ve learnt from HackAGong, I had a ton of fun at the event and really urge everyone to participate next time around.

Asking Questions

2012-10-30T00:00:00-07:00

If you ever spend much time around kids you’ll notice that they ask a lot of questions, like a non-stop barrage of them. They’re not overly concerned with seeming more intelligent than they are, just curious. Contrast that to most adults you’ll meet: they’re reserved, quite, and frankly afraid to ask questions.

What’s the deal with that? It’s like at some point we decide we’ve learnt everything there is to know and simply ignore any evidence to the contrary. When confronted with something that we don’t know, our instinct is to feign intelligence, to act like we know what we’re talking about. That’s incredibly harmful.

Honestly, that’s an untenable position for a software developer. Every day new platforms, frameworks and ideas come along that threaten to undermine all that we’ve learnt so far. Without the ability to keep asking questions—to keep learning—we’re likely to get left behind.

So start asking questions, like a non-stop barrage of them. Because that’s how we learn.

Rethinking the CSS Grid

2012-08-02T00:00:00-07:00

I’m a big fan of the Sass stylesheet languge. The addition of mixins, variables, inheritence, and flow control to CSS coupled with its simplified syntax make tasks that would have been difficult or impossible with regular CSS much simpler. I’m also a fan of CSS grids, from the complicated 16-column variety to the simple two column responsive grid I use on this site. Recently I’ve been thinking about how these two technologies fit together, how Sass can make CSS grids work better, and in doing the responsive redesign of this site I think I’ve come up with a pretty good solution.

Ideally when you’re building a site you want clear separation of duties between your HTML and CSS; the HTML handles the content and the CSS styles it. But with most CSS grids this line is blurred, HTML is littered with classes like span6 and container, classes that deal with styling rather than content. Of course, when you’re writing straight CSS this is done to ensure reusability of grid styles across a project. But if you’re like me, you rarely work with straight CSS nowadays so it’s time to rethink this approach to grids.

My new approach takes advantage of Sass’s mixins to add grid properties to HTML elements straight in the CSS. Here’s what my site’s grid.sass file looks like right now:

// Grid styles, heavily derived from Grater
// https://github.com/samsoffes/grater

body
  width: $large-container-width
  margin: auto

  @media #{$small-media-query}
    width: $small-container-width

=split
  > div, > header, > section, > footer, > nav
    width: $column-width
    margin: 0 0 2em

    &:first-child
      float: left

    &:last-child
      float: right

  // Clearfix
  zoom: 1

  &:before, &:after
    content: ""
    display: table

  &:after
    clear: both

  @media #{$small-media-query}
    margin-bottom: 1em

    > div, > header, > section, > footer, > nav
      float: none !important
      margin: 0 auto 2em


.split
  +split

As you can see, the grid styles are implemented as a Sass mixin, I also define a .split class for purposes such as displaying images side by side in a post but this is rarely used.

Now when I want to apply grid properties to a part of my site, I can simply use code like the following:

body > header
    +split

This allows me to keep ugly grid classes out of my HTML and still get all the benefit of reusable grid styles. I really liked how easy this was to implement on my site’s redesign and I think I’ll use this technique in all my personal projects going forward.

Digg's Braindead Redesign

2012-08-01T00:00:00-07:00

Digg relaunched today amidst some fanfare with a completely rebuilt site, brand new iPhone app and complete repositioning of their brand. Overall it’s a pretty nice upgrade and I wish them all the best in the future—Reddit and its ilk have gotten pretty bad over the past few years for actually finding interesting content. But there’s one aspect of the relaunch that bugs me a bit, something that’s by no means unique to Digg; the layout of its homepage.

Digg, like many other recent websites, has chosen to make its homepage layout some bizarre hybrid between Flipboard and Pinterest resulting in a jumbled mess of content that’s hard to sensibly navigate. There’s no clear discernible order to anything on the page, just a bunch of haphazard columns. The difference is best illustrated with a diagram:

As you can see on a regular web page the reading order is clear, your eyes read through one article and then move down to the next. But in this new Pinterest-inpsired design there’s no obvious order to the post, your eyes dart around, trying to comprehend the clustercuss that is this design and the website’s functionality suffers for it.

I don’t mean to damn anything that isn’t a simple top to bottom layout, Flipboard for example does a wonderful job of presenting well laid out content. It just doesn’t work as well with a scrolling webpage as it does with a paginated app. It’s a symptom of people blindly taking inspiration from sites they find aesthetically appealing without considering how appropriate said designs are for their own software.

My First App

2012-06-30T00:00:00-07:00

I’ve historically not been the best at shipping things; I get partway through a project and my mind wanders to something else. But as we all know real artists ship and as I fell victim to my own procrastination I realised I hadn’t shipped anything substantial in far too long. So I got my stuff together and learnt how to make iPhone apps.

Over the past month or so I’ve scoured docs, bugged people on IRC channels and fought my own desire to simply sit around playing SimCity to actually ship something. With that in mind I’d like to announce my first app: Parked for iPhone. You can learn more about the app over at its project page but the short version is that it helps you find your car and remember to do so before your parking ticket runs out.

There’s a lot I still want to do with the app but I feel I’ve produced a fairly solid 1.0 and I hope you’ll agree. For something like a week I’ve been telling myself this app isn’t good enough to release, but in that week I took a break from development and just allowed myself to relax and—upon looking at the app with fresh eyes—I’m now pretty happy with it.

I think this is something we run into a lot with the things we make, we get to close to our projects, approaching them with a magnifying glass and critiquing every little detail, we lose sight of the bigger picture. So many times I’ve gotten stuck in this mindset, seeing every bit of messy code and every imperfect asset; it demotivates me and it’s why a lot of my projects fail. These things that I work on end up gathering dust on my hard drive and never reaching their users simply because I’m unhappy with the codebase or unsure about the UX design.

But for this project I did away with that perfectionist mindset, I looked at my project from the outside and realised that despite its imperfections it was worth shipping. Maybe the next time you’re changing some code because it isn’t DRY enough you should step back, take a look at your project and ask if you can ship it anyway. Code can be refactored later, UIs rearranged, but shipping comes first.

The New Site

2011-11-21T00:00:00-08:00

I’ve been thinking for a while that I should probably set up a personal site, somewhere where I could post things I’ve written, things I’ve worked on, you get the picture. So here we are, a brand spanking new site with a clean, no-fuss design, I’m really happy with it.

Now, I’m no designer, but thanks to some great open source projects and useful, free services I’ve managed to knock together something respectable. What you’re looking at is a static HTML page generated by Jekyll and served up by GitHub Pages. In fact, the whole thing is open source, just take a look.

I thought I’d share the process of designing and building this site in the hope that others may find it useful, so that’s what I’m doing here.

The Starting Point

Now the first thing I had to do was come up with some basic idea of how I wanted the site to look, feel and function.

I’d been experimenting with Twitter’s Bootstrap framework and decided to use that as the base for my site. Bootstrap gave me a rigid grid to work with and really let me prototype freely during the early stages of designing the site. It also provides some nice default typography styles which I’m using pretty much as-is to make my articles look great.

I did make a few changes however, I dropped the grid column count down to 12 resulting in a site that’s only 700 pixels wide. I also set the base font size to 16 pixels with a line height of 24 pixels. The result of all this is a design which is much more pleasant to read off.

Now early design looked quite different but I’m quite happy with what I settled on in the end. With a rough idea of the design in my head, I began to think about how I was going to build it.

Derailed

Now, my initial idea for this site’s implementation was to build a CMS in Ruby on Rails, simply put this was a bad idea for several reasons.

Firstly, this was my first big project in Rails and I was in no way experienced enough to build something as complex as I was imagining. The more I worked on the project, the more its scope expanded and the more I came up against my own limitations and lack of experience. In the end, I had a hard to maintain, buggy piece of software that really wasn’t all that useful.

I was adding features upon features upon features, the feature creep was spiralling out of control. The app was growing more and more complex, what I really needed to do was step back and look at what I really needed, what I couldn’t do without and just build that. But that’s not what I did, and I ended up with a piece of software that was unfocused and poorly thought out as a result.

Lastly, it really didn’t fit in that well with my writing workflow. When I get an idea for a post I’ll usually throw it into an “ideas” note in NValt, eventually getting it’s own note where I start fleshing out the idea. Finally I’ll start a new Markdown document in my ‘writing’ folder where I’ll write the full article. With my Rails app, I could copy this Markdown source into the app, but if I made any edits, I’d have to manually keep my local copy in sync. I tend to do a lot of editing after I put a post up so this was going to be a massive pain.

So for those reasons, I had to drop the Rails app and look for something else, something simpler and more attuned to my personal needs.

Jekyll & GitHub Pages

I’d heard about Jekyll before, a Ruby gem that generates static sites based on template data and a directory of Markdown files, but never really payed much attention to it. But I’d been learning more and more about GitHub Pages and seriously considering it for hosting my site. My initial plan was to use Heroku but as a student I don’t make a lot of money and I couldn’t justify another monthly expense.

So I started playing around with GitHub pages and this involved learning Jekyll. I really quite liked what I saw of Jekyll and, after only a few hours of playing with it, decided to use it for my site. I really like the way Jekyll lets me simply symlink my site’s _posts directory within my ‘writing’ folder, it makes it a lot easier to keep my posts up to date and fits in great with my writing workflow.

All in all, it’s just way easier to do most things with Jekyll than it would have been to implement those features into my own Rails based CMS.

The Logo

I knew from the start that I wanted to call my site A Waste of Space, and I wanted a cool logo to go with it. It seemed only fitting that the logo would have something to do with space, so I found an image of Saturn, converted it to grayscale and played with the levels a bit. The result was alright but not great, and it needed to be great.

I tried to make a vector logo based off of that image, but as I said before I’m no designer and the results were less than great. In the end, a friend of mine offered to draw it up for me, and the end result was just perfect.

I went to embed it in the page, and it all looked pretty good, I made a point of scaling down a large image for the logo so it would look good if readers zoomed in, but this caused a problem. iOS devices, as it turns out, do little to no antialiasing on scaled images. So I had a problem, it was looking like I’d have to scale the image down and just deal with pixellation when users zoomed.

But I came up with a better solution, that little logo you see at the top left of this page isn’t actually an image. What you’re seeing is SVG data embedded directly into the site’s HTML, this forces iOS devices to draw an antialiased image at every zoom level and looks great no matter how much you zoom in, just give it a try.

This comes with its own set of problems that I’m currently working on fixing, for instance, the Opera browser and Android 2.x devices currently don’t render it, but I’m looking into providing an image fallback for those cases.

No Comment

I’ve neglected to add any sort of commenting features to this site, and that’s been done very deliberately. I feel that every comment section I’ve ever seen devolves into inane arguments or self promotion and I don’t want any of that on my site.

Of course, if anyone likes my articles, they’re free to contact me, my email is featured prominently on this site’s home page and links to my Google+ and Twitter accounts are in the footer. I feel that if someone really wanted to give me feedback, sending me an email wouldn’t be much of a barrier.

There’s also sites like Hacker News and Reddit that people can post my articles to if they want a more public forum for their thoughts and a way to read the thoughts of others. I feel that both of these solutions are preferable to having a list of comments at the bottom of each of my posts.

Finishing Up

I’m really happy with how the new site turned out, the design isn’t particularly memorable, but I’m totally fine with that. The blend of simplicity and minimalism, clarity and utility is exactly what I was aiming for when I started this project.

I wanted a content focused design and that’s what I feel I’ve achieved here, I couldn’t be happier.

If you have any comments, feel free to contact me via email or on Twitter.

The Joy of Text

2011-11-11T00:00:00-08:00

There’s something to be said for the simple plain text file, over the past 40 years or so computing has changed immensely, yet the plain text file has stood still. This simple, enduring means of conveying information is one of the most flexible tools in computing.

A Little Background

Let me tell you a story about a program called Microsoft OneNote, a note taking tool from Microsoft that’s been bundled with new copies of Office for the past few years. Now, I’m not going to beat on OneNote, in fact I think it’s a pretty good program from a utility and usability format, but it has one major flaw which I’ll get to in a minute.

Now I really liked OneNote back when I used to use it, it was a great note taking tool and I used it for a lot of my subject notes in high school. It allowed me to easily organise notes, diagrams and other clippings into freeform ‘notebooks’ and served as a pretty good organisational tool, it was a really neat piece of software. To achieve all this cool functionality, it stored all the user’s data in a proprietary .one format. A weird mix of XML and image files globbed together into a single binary file.

Now, this worked fine for a while, I was the only one editing these files and I didn’t have to worry about using them on other platforms because I only used Windows. Everything worked fine for a long time, but then a big change happened.

Changing Platforms

I’d been getting really into web development with Ruby on Rails, which really doesn’t work that well on Windows. I’d been dual booting Windows 7 and Ubuntu Linux (eventually switching to Arch Linux). I coded in Linux and did pretty much everything else in Windows, it worked okay, but it was hardly ideal.

Also around this time I participated in a local university’s programming competition, we made it into the finals and had to bring our own computer along. The only laptop our team had between us was my friend’s MacBook Pro, so we used that. I like it, I mean I really liked it, so much so that I started saving for my own and later that year picked up the MacBook Pro that I’m writing this post on.

Which brings us back to OneNote. As it turns out, there’s no version of OneNote for OS X, so I had no way of reading all those notes I’d spent untold hours compiling. Needless to say I was a little pissed off, I’d been burned for the first time by proprietary formats and I wasn’t going to let it happen again.

Plain Text

That brings us back to my original point about, pretty much every computer on earth can read plain text. It’s also a really flexible format, you can express a lot in plain text. But you’re probably shaking your head at this point thinking “you must be joking, plain text can’t be formatted at all, it’s utterly primitive!” Hopefully this post will change your mind about that.

Why Use Plain Text?

Plain text files have a lot of benefits over other formats, chiefly:

They’re portable, with few exceptions every computer on earth is capable of reading plain text files.
They’re tiny, the size of most text files can be measured in bytes, there’s no bloated headers or storage formats here.
You can probably already edit them, every computer I’ve ever had has built in tools for working with text files, no software to install and pay for.
They’re durable, 40 years from now, you’ll still be able to open and edit your text files with ease, which is more than can be said for the latest incarnation of the .doc format.

So now you know why using plain text is a good idea, let’s look at the how.

Tools for Working With Plain Text

Now plain text is only as useful as the tools you use with it. On it’s own plain text can be fairly primitive, but there’s a lot you can do to really make the most of this format.

Markdown

Markdown is the plain text formatting syntax invented by John Gruber of Daring Fireball. What’s that mean exactly? Well the basic idea is that you use a certain formatting style when writing your text files which allows you to apply formatting to otherwise unformatted text files. Here’s an example of some of the stuff you can do with Markdown

# This is a heading #

You can format text with *italics* and make it **bold**.

You can do bulleted list:

+ One
+ Two
+ Three

As you can see, even without converting this text to HTML, a Word document or some other format, it’s already pretty readable as-is. That’s one of the great things about Markdown, it takes conventions that people already used in plain text emails and bulletin board systems and makes them convention.

NValt

NValt is a super fast note taking tool for Mac OS X with built in support for Markdown. I have literally hundreds of notes managed by NValt, all of which are stored as plain text files on my computer. It allows me to show a Markdown preview for any of my notes and offers a metric ton of other features like fullscreen support, full text search and custom colour schemes and fonts.

Simplenote

Simplenote is an iOS app and website that allows you to store plain text notes in the cloud. It has a some very cool features including the ability to reverse changes to notes. It also integrates effortlessly with NValt allowing me to access notes made on my Mac from my iOS devices and vice versa.

Limits

2011-10-09T00:00:00-07:00

In writing The Cat in the Hat, Dr. Seuss was tasked with creating a book composed solely of the 348 words that his friend William Ellsworth Spaulding believed they should developmentally know. Out of these he made use of 223 words on the list and only 13 that were not. Soon following this, Seuss was challenged by Random House, his publisher, to create a book using a vocabulary of only 50 words, betting hime $50 that he couldn’t do it. Seuss won the bet, publishing the bizarre, delightful and somewhat repetitve Green Eggs and Ham.

Lego has long touted that with six standard two-by-four stud Lego bricks, you can create somewhere in the vicinity of ten-million different combinations, quite an impressive number to say the least. But this is an understatement, in his academic paper entitled A LEGO Counting problem, it’s author Søren Eilers proves mathematically that the number of possible combinations is closer to ninety-five-million.

In both of these cases, tools which were considered limiting were taken far beyond their perceived capabilities. Perhaps clearly defined boundaries and limitations were what allowed this to happen?

I recently picked up the iPad, it’s a curiously limited device. One app a time, full screen, no way to check twitter while I write, no way to switch rapidly between twenty chats and web pages, no distractions. The iPad, more than any device I’ve used, is defined more by what’s missing than what isn’t. Yet these missing features are no problem, for many they make the device desirable.

I’m sitting here, typing on glass, music softly playing, nothing else to distract and detract from the simple act of putting words on a screen, and you know what? It’s bliss.

Limitation breeds creativity.