Staydecent

Comparing Responsive Image Proposals

Adrian Unger — Fri, 11 May 2012 00:00:00 -0700

Responsive Web Design has gained in usage and ease of use. But one, rather large, missing piece is responsive images.

The W3 Responsive Images Community Group and WHATWG have been coming up with some ideas.

I should preface this post as such: I very well may have a lack of understanding or even misunderstanding regarding HTML spec proposals. Also, If you're not aware of Responsive Web Design, this post won't be very interesting.

Two Proposals

As it stands there are two (popular) proposals for responsive images:

<img src="face-600-200@1.jpeg" alt=""
   set="face-600-200@1.jpeg  600w 200h 1x,
         face-600-200@2.jpeg 600w 200h 2x,
         face-icon.png       200w 200h">

And:

<picture alt="">
    <source src="mobile.jpg" />
    <source src="large.jpg" media="min-width: 600px" />
    <source src="large_1.5x-res.jpg" media="min-width: 600px, min-device-pixel-ratio: 1.5" />
    <img src="mobile.jpg" />
</picture>

With many voicing their preference for the latter. Mainly because:

It's easier to read
It's familiar (see the <video> and <source> tags)

And, I agree. But, Simon Pieters brings up some points on the complexity of implementation. In brief, the srcset attribute is easier to implement in the spec, and would avoid some pitfalls that the <picture> element would create for JavaScript developers. Read the above link for details.

Pick one

So, besides smaller semantic grievances, the main argument for each proposal is:

<picture> is easier to read and write as a developer
The srcset attribute is easier to implement and would have less pitfalls for JavaScript developers

This is no easy decision. And, in getting a little more familiar with the community discussions regarding new HTML specs, I have gained much respect for those involved.

In the end, I still feel the <picture> element fits better along the existing HTML spec and elements. If srcset were to be implemented it would really be crossing a new boundary in terms of power given to an attribute—which I don't currently support. <picture> would take longer to implement, and JavaScript developers would have to be wary of creating bugs. But, I think friendly and familiar syntax outweighs both of those issues.

jQuery Multiline Text Input

Adrian Unger — Fri, 20 Apr 2012 00:00:00 -0700

A jQuery plugin that replaces a textarea with multiple text inputs, automatically appending a new input when the last is filled with content.

I created this plugin as part of a provisionary coding task for an unnamed startup. The idea is to simplify server-side processing while having more control of the user input—And, hopefully, a better experience for the user.

The Concept

Instead of asking a user to enter each item (Ex. Places lived) on a new line or comma separating them within a textarea, each item is entered in an individual text input. But, we want to allow an indefinite amount of items and asking the user to click a button (to add another input) would be annoying. So, the plugin intelligently appends an empty text input as soon as the user starts typing the last input.

But, how do you know how many inputs need to be processed on the server-side?

Good question! This is handled by the plugin on the client-side; the plugin combines all of the single line inputs back into a single textarea, with each item on a newline, before submitting the data.

Demonstration

Select the "Result" tab in the below JSFiddle frame to test-drive a basic example.

Usage

$('textarea.multiline').multilineText();

Check out the GitHub Repo for more information and to grab the code.

The Essence of Blogging

Adrian Unger — Fri, 23 Mar 2012 00:00:00 -0700

Inspired by Dustin Curtis' Svbtle and the subsequent open-source project Obtvse, I took a shot at simplifying the blogging interface.

Actually, even before Dustin unveiled the interface for Svbtle, the concept had inspired me—with the three words essence of blogging I began to think about what that meant to me. I took it to mean two types of posts, those which are ones purely written word, and those that are commentary on some link. The main difference being that the latter would have its' title link to the external source.

So, I started dreaming up an interface that began with a single text field.

A demo of sorts

To catch the wave of this fiasco, I tested out that interface concept today. So, the demo is limited to only the writing interface, though it can save the post data to localStorage.

View the demo here.

Some notes:

I've only tested it on Chrome.
Try pressing 'tab' or 'enter' ;)
Try pasting a URL
'DRAFT' and 'PUBLIC' do nothing
type clearPost() in console to clear localStorage data

A bit of an explanation

Like I said, the goal is to accommodate two types of posts, purely written word, and link posts. The type of post is determined based on what you enter in the initial field (which is actually the title field). If a URL, we'll fetch the title from that page, and populate the title field with it (moving the URL to the link field). If the initial field is just text, we wait until you press enter or tab and generate a local permalink for the post.

In both cases, once the initial field is dealt with, we move the focus to the body field.

A note about the name

You may notice that the Demo comes with the title Gumblog. It will eventually be working blog software, made purely to allow me to experiment with PHP 5.4, PJAX and this interface concept. You can view the base framework, Gum, here.

I would love to hear your thoughts about this interface concept. Feel free to reach out via email or Twitter.

Moving Off App Engine

Adrian Unger — Fri, 24 Feb 2012 00:00:00 -0800

Google App Engine provided a slew of learning, and allowed me to rapidly build my side-projects. But, it's time to move on.

Google App Engine was exciting, and gave me an easy to run environment to learn Python. I built my portfolio and blog on GAE, as well as the original Fullio App and the current Cook It Local. But, each of those projects, for their own reasons, has outgrown (or no longer feels at home) on Google App Engine. Let's go over the migration of each project!

Staydecent.ca

The GAE version of my website is pretty awesome. It's flexible, fast and allows me to update everything by email. But, I also have a few static mini-sites for clients, fun projects and tests that I like to keep under the staydecent.ca domain. Uploading a folder of HTML and CSS isn't so simple on GAE compared to Apache. I also want to have my entire site backed up with Git. After finding Jekyll inflexible (at least with my lack of Ruby knowledge) I spent a day building a ridiculous build script for a static website. It seems to be working—you're looking at it!

Fullio App

This was the most painful. Trying to get this idea out fast, while battling with actual client work, I hit a major roadblock with GAE. Fullio processes emails with large, full-sized image file attachments and uploads them to Amazon S3. GAE has (had?) a limit that prevented me from sending requests larger than 10 mb to S3. This just would not fly, as I wanted to allow people to host their mega-images. Failing to get Flask or Django (or Python for that matter) running smoothly on my Windows based laptop wasted days! So, I wrote a framework inspired by GAE's webapp, so even though I had to rewrite all the code, at least the concepts were the exact same. I also used MongoDB to keep my data structures relatively the same. Fullio has seem some huge delays, but it's super close to a beta-launch. If you're interested, please bug me to get it out.

Cook It Local

Holy neglected project, Batman! Food, nature and sustainability seem to be my passions, so it's saddening to see this project sit idly by. Cook It Local, is an ever adapting idea, web app, resource, tool etc. to inspire people to eat and cook with local, seasonal ingredients. So, many mini-apps and components will end up existing. I don't feel GAE allows for rapid, frequent iterations. So, I am creating a set of libraries for rapid prototyping. The base of this endeavor starts with my HTTP router, Gum. I'll soon have a post on rapid prototyping with PHP.

Closed platforms never win

Is that the lesson? Google App Engine is quite an amazing platform. The cost was basically zero to get my ideas up and running—I've been hosting staydecent.ca for zero cost for over a year now. But, my current emphasis is on flexibility and so I'll continue to move away from App Engine.

Responsive Web Design

Adrian Unger — Sun, 12 Jun 2011 00:00:00 -0700

The implementation and advocacy of responsive web design is increasing, and possibly fully manifested in the web design community. Are you taking part?

What Is Responsive Design?

Responsive web design, basically means your website responds to different screen sizes. So, people browsing your site on a Smartphone, Tablet, Netbook or Desktop all get a usable (and hopefully similar, but not exact) experience.

Types of Responses

There are two main ways to respond to various screen sizes and devices, with: responsive designs or adaptive designs. Responsive design usually means a fluid grid, using percentages. See: Stephen Caver's Portfolio and Maykel Loomans' Blog. And, adaptive design usually means you have fixed grid, that adapts (changes) depending on the screen size. See: Mr. Simon Collison and Authentic Jobs. You could also use a combination of both, sort of like my Blog that you’re reading now.

Media Queries

CSS3 media queries, quite literally, let you query different media types, screen, print and handheld as well as other helpful properties such as min-width, max-width, orientation and others. Media queries easily let you define your CSS for any screen size by querying the min-width and max-width. So, all you really need to know are the common screen widths. According to Bryan Rieger the “major breakpoints are 0-320, 320-720, 720+ with minor breakpoints dependent on content and key devices (ie: 360, 480, 768, etc).”

What Does This Mean?

In the below snippet, I have included the exact media queries that I use, as well as a few (one, for now) examples from popular CSS frameworks and authors.

So, if you’re like me and usually develop a new grid for each website you design (which, I highly recommend) those media queries are really helpful in adjusting your design for specific devices and screen widths. And, if you like using boilerplates/frameworks and often design a 960px grid, Skeleton is great.

But How Should I Adjust My Design For Each Query

Obviously, you can’t just continuously shrink your column widths—eventually you’d have content trying to fit into 20px columns! So, commonly, you'll end up dropping the number of columns. If you’re full-width design has 6 blocks floating together, you might have to drop that for each query: 4 blocks a row; 3 blocks a row; 2 blocks a row; everything in a single column.

That’s It!

Really. Responsive web design is not much work. I would say, for the bare minimum, design your full width site, Ipad width of 768px and mobile width of 320px.

For corrections, comments and questions message me @staydecent.

Omtask, A Simpler Task List

Adrian Unger — Wed, 04 May 2011 00:00:00 -0700

Omtask is an omnibox task manager for people that want to finish tasks, not organize them.

Why Omtask?

When I came across Steve Losh's t, I loved the idea of it. But, I also realised the extent of my bashing was updating git and svn repositories. Being mostly, a front-end web developer—and addicted to the internet—I spend a huge amount of time in my Web Browser, which happens to be Chrome. Hey, wait a minute! Aren't I able to run commands from Chrome's address bar? Yes! So, I set out to implement the exact same feature set as t in a Google Chrome Extension.

Not Quite There

There is no marking tasks as complete and editing still needs to be added. But, you can add tasks, view them, and delete them. All from the Omnibar (this is what Chrome calls its address bar)! But, this is enough functionality for me to already begin using it. I stopped using Task Thing awhile ago.

It's So Easy!

t Blog about omtask.

There is no package yet, as I think it needs some more testing and editing of tasks implemented. But, you can check out the source on GitHub. If you'd like to try it out right away, clone the repo, then on Chrome's Extension page click Developer Mode and Load unpacked extension.

Managing Coworking

Adrian Unger — Sat, 29 Jan 2011 00:00:00 -0800

When I was working in a team of about ~15 at an Advertising Agency, we were commonly trying to perfect how we all interacted with each other.

Building off of 37Signals concept that work doesn't get done at work, we wanted to prevent intrusive chit-chatting and undelivered IMs. The main problems were: Is this person currently in the office? What is the person currently working on? Is this person available to talk about current projects, new projects or other matters? I recently saw a TechCrunch post about Yammer which was a potential solution to those problems that never really worked. It's very hard to integrate yet another app into a teams workflow. We already had Basecamp, Jira, Google Docs, IM, etc. so adding Yammer, which needed to be consciously updated every time someone switch gears (left the office, started a project, switched to another project, had a meeting), had a high barrier for most people.

Every team has a suite of apps they use to manage all of their internal workings; the problem of perfecting internal interactions shouldn't be handled by another app to add to the suite. Instead, we should refine the way we access that suite of apps.

The Internal Start Page

Lots of you already use a start page for your web browsing and if you're like me you probably have your business apps (time tracking, invoicing etc.) pinned to your start page for easy access. This has always helped me in remembering to sign into Basecamp and log my hours, or check out the bug tracking app to see what should be resolved today. But, it's not a perfect fit. This is where the internal start page comes in.

The above is a very simple prototype, that could potentially solve this inter-office interaction problem. Like the suite offered from 37Signals for accounts using more than one product, there is an area containing unique icons for each app used by a team. This provides the basis of an internal start page. Where it becomes useful in improving interactions with coworker is the team list on the right (this layout would only suffice for small < 25 person teams) where it shows all members of the team, and their current status.

Where's The Magic?

On it's own, this is just the same nuisance as when we tried to use Yammer—each person is required to update their status every time the are busy, available, in office, on the phone, etc. The magic idea is in the portal. Each linked app would have API access (most web based apps for teams have API's). When a person accesses an app and does some kind of unique activity, the start page would know, automatically adjusting that person's status.

Why Am I Sharing This Idea?

This internal start page idea would require a decent barrier to setup each app and team member's account. It would also require a decent amount of programming to make this work. And, could it really work? Let me know what you think @staydecent!

Being Self Taught Revisted

Adrian Unger — Wed, 05 Jan 2011 00:00:00 -0800

A few weeks ago I posted about possible drawbacks of being a self-taught web developer and I got some really good feedback.

The two main problems I illustrated were: How to your asses your own ability and properly convey it and after assessing your ability how to properly determine the next step of progression. I now think both problems are futile. I'm self-taught because I didn't agree with the requirements and structure of schools and assessments are inherently part of schooling—So, why am I trying to assess myself?

You can't just tell people you are an expert; that's for them to determine. Rather, show them what you do, and how it's helped people in the past.

“I’ve never been asked for proof of my qualifications — my work speaks for itself and the majority of my new work comes from current, happy clients telling others about me.” — webecho

How to properly progress without assessment

Being a self-taught web developer, I already know how to keep up with a radically evolving industry. Where as, graduating from a rigid web design program, you may assume you have reached a certain level of knowledge and skill that will maintain your elligibility in getting work. But, Regardless of a formal or informal educational background in this field, the technology will permeate anyones’ experience and knowledge if they don't constantly learn. Being self-taught, I've become a proactive learner: When I wanted to know how to create a webpage I scoured the internet for tutorials, guides, blog posts and spec sheets.

“An earnest personal motivation to learn is not something you pick up in a structured learning environment, and this skill will help you stay on top of trends and developments in the field.“ — eggNrice

However, being solely self-taught may not work for every field related to web design and develoment. When it comes to designers benek argues:

“[…] having formal education in design is huge if you’re a designer. Most self-taught designers I see with little experience are just copying trendy tutorials online and they have no foundation in the principles of design.”

Though, it's very possible one could also teach themselves the fundamentals. I suppose it's just more common place that purely self-taught designers often miss the foundation of good design.

In the end, the educational background of someone shouldn't be the primary tell for their perceived ability. Your passion and hunger within your respective field guarantees much more. It's actually pretty prevalant in the design and web industry that a your work outweighs your educational experience.

The Unforeseen Consequence of Being Self-Taught

Adrian Unger — Sun, 12 Dec 2010 00:00:00 -0800

I had yet to notice any drawbacks of working in a field where I have either taught myself what I need to know or learned through work experience. Until now.

Hopefully you have realized, that I am a Web Designer & Developer. And, I'll now let you know, that I learned nearly everything for this career with trial & error and the internet. And, perhaps more surprising, I can honestly say that my gateway into this career was playing a popular computer game nearly nine years ago.

Becoming A Self-Teacher

Sure, Counter-Strike itself was rather addicting but what really got my attention was all those files (just left there for me to explore!) inside the install directory. There were graphics, sounds, levels and even a unique scripting language! So, through the power of the internet, I taught myself how to write Counter-Strike scripts. But, after finding or reading about most of the exploits, scripting became dull—I wasn't actually playing the game that much at this point, so there was no utility left. Soon after, I discovered hacking. Naturally, I taught myself how to create multiplayer hacks. Actually, I even worked on some of most popular public cheats of a rather limited time. From the amazing scripting community to the even more amazing hacking communities, I found a viable way to learn whatever I was interested in. And, I continue this approach even today.

Relevant Lessons

My foray into creating websites was Geocities. Thankfully, I desired more control and eventually learned HTML; my resource was the HTML Goodies Primers. Which, looking back on it now, seems like a well structured lesson plan that could resemble what's taught in school. Sadly, I can't recall what my main resource was for learning CSS, but for PHP Tizag covers the basics pretty well. From that point, I had developed a strong enough base, that the rest of my learning could be achieved by reading the docs and spec sheets for the technologies I was interested in.

The Problems

Recently, I was reading a bunch of the latest articles on A List Apart and I noticed something I didn't have an answer too. Which was, half the articles seemed useful and applicable while the other half seemed obvious. My opinion is that A List Apart offers the highest level of HTML (and similar technologies) understanding. Which lead to my confusion: are only some of the articles aimed for professionals while others are well-suited for beginners? Or, since after following the HTML Goodies Primers I learned much of everything else as it came up in actual work experience, that my knowledge is scattered? Perhaps, I have an understanding of some seemingly expert-level front-end development concepts, while missing other, intermediate or even beginner-level concepts? At the moment, I can't answer those questions. And, that brings up two problems: Even though I spend almost every hour living inside Web Development, can I claim expertise? I don't have any physical or widely-accepted certification—just experience. This is a problem, because I don't want to lie and I don't want to claim more than I mean. Another problem is, where do I go from here? How do I determine what level of knowledge I have of Web Development, and how do I properly determine the next step of progression?

Is anyone else self-taught? Have you found any problems associated with being self-taught? I'd love to hear from you either via [email](mailto: comments@staydecent.ca) or Twitter.

My First Visit To Seattle

Adrian Unger — Sun, 28 Nov 2010 00:00:00 -0800

Since I missed the chance to see one of my all-time favourite people live, in Vancouver, I had an all-too-good reason to visit Seattle for the first time.

Grinderman, the newest project of Nick Cave and most of the Bad Seeds, is finishing up their North American tour. It seems the show in Vancouver sold out too fast for me and, without hesitation, caused me to buy tickets to the Seattle show. Incredibly excited to see Nick Cave in the flesh—I just can't help but enjoy almost everything he produces—I was also excited to visit Seattle for the first time. Which is a strange thing as I have, thanks mostly in part by my Dad, seen more American soil than Canadian.

Belltown

My girlfriend and I decided to stay at the Belltown Inn(in Belltown!), which I booked through Hotels.ca. The process was easy enough, and it landed us right in between the concert Venue and Pike Place Market. The Hotel itself isn't much to talk about: it's clean; friendly staff; free bicycles; whatever. Thanks to Hotels.ca we stayed one night at half price, but I can't see myself going back at full price.

Now, the neighbourhood of Belltown is pretty interesting. Though I haven't seen much of Seattle(stayed within Belltown, West Edge and the Seattle Centre) I came to like it immediately. Maybe because it's like Gastown but not dark, dirty & depressing. Belltown is interesting because there is no apparent sign of generic and duplicated business. Actually, from what I saw, Seattle has far less fast-food joints and chain restaurants than Vancouver(I'm probably thinking of Downtown and Gastown). I was really surprised that I only came across two Starbucks, and yet both of them had unique and rather interesting storefronts.

Eating

It was rather easy to find online restaurant recommendations for Seattle and perhaps through instinct shortlisted about 6-8 for my Girlfriend and I to choose from once there. Le Pichet easily got both of us excited and we went for our first meal(brunch/lunch thing) there. Le Pichet serves traditional and regional French food. We shared a plate of charcuterie and a Black Cod, Orange & watercress salad. Awesome. It may not have been the best plate of prepared meats I've had, but it was damn tasty, as was the bread and salad. What I really enjoyed was the atmosphere: totally relaxed, subtle decor, really attentive service and Massive Attack on the playlist.

As a snack while browsing the Pike Place Market, I grabbed a BLT from Three Sisters Cafe. Perhaps a bit pricey, but good ingredients and just made simply. No fluff.

For dinner, we went to the frequently recommended Zig Zag Cafe. First impressions are tough, and it didn't go too well for this Cafe: a mentally distant hostess, red lighting and purple velvet. Not my vibe. I think the high-mark of this place is the drinks—the beverage menu is massive—but we don't care much for this as we're more interested in food. Oh well, we ordered the Boar Bacon Risotto and Full Quail. The food is well prepared and mostly flavourful. The risotto came with big cubes of Boar, which was great! But, Istill prefer a simple Mushroom risotto. The quail was good…just a bit boring. Maybe, if the skin was crispy, or there was more fat, or a tasty sauce all over it. But it was basically just a seasoned bird on top of some seasoned vegetables. Well made, but not exciting.

Grinderman

We caught Grinderman at the King Cat Theatre, a movie-theatre-turned-venue which works quite well. I'm never really sure how to describe Grinderman. I've heard the term, Garage Rock, thrown around. But it's not exactly the sound I think of when I hear that term. Basically, they're a bunch of bearded baddasses(and Nick) who've been playing music for at least 30 years. Nick Cave's writings and lyrics are usually pretty dark and disturbing, but Grinderman really pushes the dirt. The show was loud, dirty and full of energy—they are just amazing to watch.

I'll be back

I really enjoyed Seattle. I couldn't help but compare it to Vancouver and, though my experience is limited, Seattle is a golden city to me right now. It was just so relaxed: big sidewalks, much less inner city traffic, and just so many unique restaurants, cafe's, bars and shops. Walking aimlessly, we never were far from yet another local food spot.

Seattle is just easy.

Logicalism Over Minimalism

Adrian Unger — Wed, 08 Sep 2010 00:00:00 -0700

I don't subscribe to any sort of minimalist way of life. But, that word seems to have a meaning that I can often attest to my life. The funny thing about words and their meaning is that they aren't consistent across all means.

In my very limited scope of minimalist inspiration, the word often is attributed to Apple—or the other way around. I mention this, firstly, because labeling and brands are things I attempt to avoid. Secondly, when I said often I meant blindly and always. If anyone shares this limited scope with me, I would like to let them know: Minimalism is a jaded word with lost meaning, and is more keen to be a fad or popular tag. And, on the reverse, Windows is hailed as the anti-christ of minimalism. Don't be fooled.

In all senses and progressions of my life, I tend to believe I think about things logically. And especially when I started freelancing. I think logically about the way I work, and the devices used for work and communication; about food, where it comes from and how it's prepared; material items I own, like my clothing, furniture and other equipment; and, basically anything else I deal with on a day-to-day basis.

I'm going to split up each one of these things into separate posts. And, because Apple, computers and gadgets seemed to spark my definition debacle(maybe not quite that serious), I will start there:

The End Of The Branded, Labeled Minimalism In The Office

These blogs and semi-popular internet figures will have you believe that you need to own 2 to 4 Apple made products to complete your minimalist lifestyle. Now, they may not make this statement outright, but in their act of sharing their all-too-similar ways of life a very pretty, brushed-steel picture is painted. Actually, this picture. And, this one.

In multiple, thousand-word essays these authors have shown that you need an Ikea tabletop, some kind of fancy desk chair, the prominent desk lamp, a mac computer, a mighty mouse(such garbage), a cinema display, an iphone, a sleek dock, an ipod, an ipad, and no one cares anymore.

In absolute, hellish contrast I am able to Design(even for print!), write markup, code(in multiple languages!), record, produce, take notes(GASP without Word! And, without awesomely, cult loved "minimal" note taking apps exclusive for some other OS!) all with my…Windows 7 based laptop. Now, I'm not going to go into great detail about how you can work on windows just as minimally and simply as on a mac. Because you're a grown-up, and you know that you can have a happy computing life without selling your soul to some corporation or brand. You don't have to do any one thing any one way, for the rest of your life and never fell that way of life. You can adapt. You can stop caring. You can still be efficient.

Now, I'd like to believe that people will agree with me that this is a rather unimpressive yet beautiful space to work in:

And now, you may argue "it would look even better with a macpro." And I retort "Suckas! I don't have an office—I just put my computer away in its hiding place, when I'm finished working."

And even now, you may think that I, the author, has gone astray, and lost his original point. But, I will emphasize that my point is to stop caring. This is so silly. If you honestly believe that you cannot share the same minimalist lifestyle of simplicity and happiness and zen and organization and flowing water and grooveshark and starbucks and meetups with a Windows based machine in place of a Macintosh, then you should add the following disclaimer to your blog and every accompanying brand hugging post:

I am unwilling to be adaptable. I am unwilling to take matters into my own hand and consider all possibilities. I believe minimalism is always the easiest most obvious solution, and let the past dictate the future. I am set in stone. I am a minimalist without logic.

Minor Update to Task Thing

Adrian Unger — Wed, 01 Sep 2010 00:00:00 -0700

While remaining rather minimal, Task Thing has a new feature—more specifically a helpful piece of data is now displayed on completed tasks.

For anyone who is unaware, I created a little app called Task Thing a few months ago. It hasn't gained much traction, but a couple people seem to be using it(Woo-ee!).

With the hope that I will be more efficient and precise at tracking my time, Task Thing now tells you how long it took for you to complete a task. This functionality was already implemented as Task Thing logs the creation date and last modified date for each task. Using this data, when a task is marked as completed(which logs the time of this action) Task Thing displays that time relative to the time since creation.

Because I use Task Thing at a very micro scale—I only add tasks that I am tackling that day, and usually as I begin working on them—I can actually reference this time to complete when logging my hours for the day. Obviously, if I create a task one day, ignore it for a few days, then work on it, and mark it complete, it's not an accurate measure of actual time committed to that task. But, still an interesting piece of data. Maybe I should start logging average time to complete tasks?

Try Task Thing today

Publishing By Email With Google App Engine

Adrian Unger — Sat, 03 Jul 2010 00:00:00 -0700

I really like the Posterous approach to publishing online—I often write my ideas down in GMail. So I decided to enable posting by email on my blog.

The concept needs some work, but could very easily be adapted to a multi-user environment. In that case, some serious security work would be required. But for my personal blog, it should suffice.

How It Works

Google App Engine has amazing Email handling built in. Just check the docs. Because of this, not much code is required. Anyway, here's what I've accomplished:

Write posts in email
Process those emails for YAML Front Matter
Continue using Markdown

Pretty basic. I haven't got into checking attachments, but I don't think it would be too much more work. As for the YAML Front Matter, a concept taken from Jekyll, I follow Rasmus Andersson's formatting exactly as it appears in Gitblog

How I Did It

I just read through those docs I mentioned above and wrote an Email Handler. My blog has a very simple Entry handler, so saving new entries is pretty easy.

If you have any questions or input, message me on [Twitter]( http://twitter.com Staydecent on Twitter).

Installing App Engine On Windows

Adrian Unger — Wed, 30 Jun 2010 00:00:00 -0700

The most difficult part of installing Google App Engine on Windows is the SSL module. But I've decided to compile a very simple guide for the whole process.

I am not going to cover any sort of usage guides. This is just a list to installing everything required(on Windows) to deploy an App to the GAE cloud.

Download & Install Python25)
Download & Install App Engine
Download & Install Python25 SSL Installer

The hardest part: Installing the SSL Module. Python25, unlike 26 and newer, does not come with the SSL Module and must be installed. The normal route of python setup.py install will produce errors. Something about wrong compilers. There are tutorials out there for installing all the dependencies manually. Luckily, someone has created an installer exe. I have tested this on WindowsXP and Windows7 and it works.

32bit Versus 64bit

Do not install the 64 bit version of Python on Windows. If you do you will have to compile everything yourself. Including that installer, that installer is 32bit only. I really don't know any benefit to installing the 64bit version of Python.

Unless I am forgetting something, that is all you need.

Wordpress Featured Post Slider

Adrian Unger — Thu, 24 Jun 2010 00:00:00 -0700

WordPress 3 is out: And it makes developing feature rich, user maintainable websites possible with the just the core.

WordPress is already known for its ease of development, deployment & maintainability. Well, maybe not always the last one due to unmaintained plugins. This is addressed in WordPress 3.0 by adding to the expansive core. Anyway, here's an example of how to build a common blog feature with just core functions and some jQuery.

Featured Image Slider

Note: Featured Image—as it's called within the admin UI—is synonymous with Post Thumbnail—as it's called in the function references.

What is it? It's a way of showcasing all of the posts with a featured image in a simple slider (or other jQuery animation). All we have to do, is add support for post thumbnails and display them within the loop, and jQuery will handle the animation.

The WordPress Code

For a deeper explanation of post thumbnails, read Mark Jaquith's Post. For now, here is the code to add support and define the sizes of our post thumbnails:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 300, 100, true ); // Normal thumb size
add_image_size( 'featured-image', 900, 300, true ); // Slider size

I displayed the slider on the homepage only, but pick a theme file and add the following within the loop:

<?php if (in_category('10') && has_post_thumbnail()) : // Category 10 is my 'Featured' category ?>
<a href="<?php the_permalink() ?>" title="Permalink to <?php the_title() ?>" rel="bookmark">
    <?php the_post_thumbnail('featured-image'); // Make sure you call the image size you defined in functions.php ?>
</a>
<?php endif; ?>

The jQuery Code

This is covered everywhere. You can use jCarousel or any other jQuery(or other framework) plugin. Otherwise, check out my live implementation and feel free to view the source.

Staying Productive With Task Thing

Adrian Unger — Tue, 25 May 2010 00:00:00 -0700

I have recently jumped back into the freelance world. And I need ways to stay productive.

Why I am freelancing

Growing sick of the office & meetings & commuting & packed lunches & disagreements, I decided to get back into freelancing—effectively taking control of my life. The first day I sat down at my desk, I asked “What the fuck am I supposed to do today?” I needed a list of things(tasks) to keep me in check.

Available tools

Of course, the first thing I did was consider all of the to-do lists and task lists I have used in the past or just heard of(there are lots): Todoist, too much; Ta-da List, I may as well used pen & paper; Teux Deux, this was a close winner, but I don't like the multiple lists concept, or the small font-size. Naturally, if I wanted something I wouldn't complain about and could use every day, I needed to create my own.

Introducing Task Thing

This brings us to Task Thing! I would say this is very similar to Ta-da List, but with actual benefits over using just pen & paper. I say so because of drag & drop, inline editing and an understandable interface. Maybe I'm wrong, but feel free to give it a try yourself!

Building Task Thing

I built Task Thing over the better part of a day. This was possible because I was using a bunch of code I had written for another concept of mine(Hint: Panic Status Board). I won't go into too much detail, but Task Things' functionality is broken up into two models: list & task. The list model represents the page which gets one owner and any amount of tasks(owned by the same owner). A task has two editable fields, title & description as well as some other internal data(dates, priority, etc). Linking the tasks to the proper list is rather simple: the list attributes a unique slug and owner. When you view that list, you must login as the owner(logging in, you are redirected to your list). The tasks also have an owner field, which is matched with the list. Learning how to link different values in the App Engine datastore has been a lot of fun and so much lighter than MySQL joins. Also, I Ajaxed the shit out of it.

Staying Productive

Creating a task list was the first step I took in helping myself stay productive, and I am sure there will be more. So, if you care, check this blog often as I post more things.

jQuery Random Each() Function

Adrian Unger — Fri, 19 Mar 2010 00:00:00 -0700

Fading in elements incrementally in order of the dom tree is cool, but so is fading in elements in random order.

The former is pretty simple, you iterate through each element while setting a timeout for fading in:

$("div").each(function(i) {
    var e = $(this);
    e.fadeTo(0, 0.05);
    setTimeout(function(){
        e.fadeTo(250, 1);
    }, i*25);
});

i is the index of each found element in order of the dom tree. As we get further down the tree the timeout is longer and longer—since the animation lasts longer than a couple timeouts the animations will overlap.

To make it random, we still follow the dom tree in order, but we set the timeouts at differentiating lengths(randomly). Say we have 10 elements total, we can assume the indices are 0,1,2,3,4,5,6,7,8,9, We just need to sort those numbers randomly. Enter randsort():

function randsort(c) {
    var o = new Array();
    for (var i = 0; i < c; i++) {
        var n = Math.floor(Math.random()*c);
        if( jQuery.inArray(n, o) > 0 ) --i;
        else o.push(n);
    }
    return o;
}

We pass the function the number of found elements and it loops through them creating new numbers(within the range of c). To avoid duplicated numbers we use jQuery's inArray and “skip” it if true. In the end, you have those indices in a random order. Moving along:

var e = $('div') // The elements we're searching
var c = e.size() // Total number of those elements
var r = randsort(c) // an array of the element indices in random order

Now an ever so slight variance on that original each function:

// the jQuery selector could be replaced with e
$("div").each(function(i) {
    var e = $(this);
    e.fadeTo(0, 0.05);
    setTimeout(function(){
        e.fadeTo(250, 1);
    }, r[i]*10);
});

So what's different? r[i]*10. We are using the i index to call the r array in order, but since the values are a random representation of the element indices the timeouts differentiate. Boom!

Check out a demo here.

An Introduction

Adrian Unger — Thu, 18 Mar 2010 00:00:00 -0700

I have relaunched my website and launched my blog as a separate website. Here's how and why.

In The Old Days

A few(or several) years back I had an account at a host named FreePGS, they offered PHP and MySQL at no cost! It housed numerous iterations of my homepage even up until Staydecent. FreePGS' offered service changed numerous times while I was there: From completely free, to $3 a year, to no longer accepting new accounts. Even when they started charging, I won a design contest and got to remain there for free, surviving through the death of FreePGS. In the end, I was plopped onto some reject GoDaddy reseller server that barely had enough power to load Plesk, while they asked me for $3 a year. Eventually, I stopped paying for that account.

The Hiatus

I spent too much time researching hosts. Web Faction, Linode, Slicehost, PRGMR, all promising and none were a clear winner for me. So, I ended up with a static landing page for maybe a year? Anyway, I was serving this static page up on Nearly Free Speech, a pay for what you get service. Simple and cheap. Going back to those other hosts: the main reason I was considering them was because I wanted to learn the ins and outs of a VPS(or similarly free[as in freedom] service). But, VPS is dated and The Cloud is in. So, I started playing around with Google App Engine.

In The Cloud

Here's lookin’ at you, kid! What's that mean? Who cares, Rejoice! I built a Blog in Python on GAE.

This blog is hosted on App Engine, but what about the portfolio? It's still on Nearly Free Speech, serving up static files. Why not? And, this is the first time I've split my blog away from the main site. Now, I have two sites to mess around with, constantly!

If you haven't noticed, or realized from this post: I change my website all the time. It constantly evolves as I learn new things and try new things with it. And so will this blog! I will try and be more consistent and make sure permalinks live on and keep downtime to a minimum. And, at least for now, the current Staydecent Blog and Staydecent Portfolio are not going to change much.

An Interview With Chris Allen

Adrian Unger — Wed, 04 Feb 2009 00:00:00 -0800

Chris Allen is a Vancouver based freelance Graphic Designer and Art Director, an Emily Carr Institute of Art and Design graduate and has strong roots in the Skateboarding industry.

Check out this interview I conducted with him to find out more!

Hey Chris, could you tell me a bit about your background(live, born, age, work, school, whatever!)?

Age 31; Work and live in Vancouver, BC Canada; Studied graphic design at ECIAD; Freelance designer currently working with Studio: Blackwell.

What do you think of Vancouver, in terms of graphic design work and whatever else stands out?

Vancouver is a beautiful city and [has] recently been rated as one of the worlds move livable cities. In regards to graphic design, I feel opportunity is a little lacking and as a result Vancouver has an over abundance of interactive studios and advertising agencies. Vancouver is not on the international radar of design hotspots by any means, but I feel confident in saying that good work is good work and can be produced anywhere. At the moment Vancouver seems to be working for me but [I] would love to experience living and working in a large city like London or New York.

Do you remember working for your first client? Anything to tell?

My fist client was a friend who required help in branding a small clothing line he was developing. With no formal training, technically or theoretically the intent was there and at the level we were operating it that was the most important thing. We knew what we wanted to do and how things should look it was just a matter of making it happen. No rationale, no theory—just make it look good. We photographed and produced a brand book/catalogue and developed a logo. It was all very simple but proved to be effective and as a result landing him the Urban Outfitters account.

We knew what we wanted to do and how things should look it was just a matter of making it happen. No rationale, no theory—just make it look good.

I noticed your older work is largely based around the skateboarding and street cultures, how did that come about?

As a freelance designer I try and pursue projects that compliment and reflect my interest. Much like the work I did with Transworld Skateboarding. At that point of my life I was was heavily involved in skateboarding industry and also being a skateboarder myself it was only natural that I pursued work in which I was knowledgeable and had a love for. A Canadian friend of mine was the art director at Transworld in San Diego while I was attending Emily Carr. He contacted me to design an editorial feature figuring I could use the break, not to mention the cash. This proved to be a great way to get my feet wet in editorial design and also achieve a childhood dream of working at a skateboard magazine.

And now, your new work shows some great strategic branding, was this a natural progression moving to that kind of work? Which type of work do you prefer?

I think this is a natural progression for most designers. The more experience a designer gains the more knowledge they can apply to larger more complex projects. Honestly I prefer whatever project allows for the greatest opportunity for a new experience and a chance to create something I have not done before allowing me to constantly progress as a designer. My fear is doing the same thing over and over again, I think that is why I have been so reluctant to work in advertising, I am scared of the formula, the punch lines.

Are you able to tell us about any current or recent projects you are working on?

Currently I am working with Studio: Blackwell designing exhibition catalogues and artist monographs for the Gagosian Gallery and Rizzoli. Kelsey Blackwell is amazing and has taught me so many valuable lessons, not just with regards to design but theory and life itself. I feel honored to have such an incredible mentor.

What would be your ultimate dream project?

At this point I can't really give you a specific answer to that question. I guess my dream project would be to start a small publishing company and work remotely from a detached home studio with floor to ceiling glass in the middle of a forest.

What tracks, artists or albums are you listening to right now?

This is an interview in itself. The following are what I pulled off the records shelf in no particular order:

Led Zeppelin - II
Booker T & The M.G.'s - Melting Pot
Bob Dylan - Blood On The Tracks
Black Sabbath - Sabbath Bloody Sabbath
The Doors - Strange Days
David Bowie - The Rise And Fall OF Ziggy Stardust And The Spiders From Mars
Bill Withers - Still Bill
Pink Floyd - Dark Side Of The Moon
Heart - Little Queen
Jane Birkin, Serge Gainsbourg - Self Titled
Santana - Abraxas
Unicorn - Tyrannosaurus Rex

Some Artists, designers, companies your into right now?

There are too many to list but I do find the following people although contemporary very interesting and influential: Storm Thorgerson (Hipgnosis), Bruce Mau Design, Spin, Build, Underline Studio, 2x4, Made Thought, Browns, Pentagram, Experimental Jetset, Non Format, Graphic Thought Facility, NB: Studio........

The essentials of every day life?

Family, my lovely girlfriend, friends, my animals, nature, food, music, photography, art and design.

Many thanks to Chris Allen for being my first interviewee! Please check out his website for more work and info.