2014, My Year of Workflows

Workflow and Process are two rapidly growing subjects in the past year as tools like Grunt became more powerful and GitHub grew to the max.

I wanted to write about efficient workflows for my first post of 2014, because I’ve been reading JavaScript Application Design¹ in its early stages. It discusses the use of Grunt and other techniques to create a more streamlined workflow of developing modern web applications with JavaScript. Even Chris Coyier has done screencast covering this topic on CSS-Tricks².

After giving some thought to what I wanted to accomplish this year, I decided to go fairly general and say I want to improve the workflows of all the tasks and chores I handle day-to-day, I want to streamline my daily tasks the same way I would streamline my various web projects.

Even as I write this post, I am thinking about how I could efficiently place links for greater reader retention and easier comments for later editing in Byword.

Photo and Data Management

This is a huge area of concern for me because I tend to download so many things and forget which folder/directory/backup I placed them in, or, worse, I leave it all in my Downloads folder like the junk drawer in my kitchen.

So when I bought a new computer last month, I made a conscious effort to create a better directory structure with clear names for easy eye-scans through Finder.

I also have to thank Dan Denney for showing me the awesome power of Alfred³ for quick-launching applications, opening files, and solving simple math bits. I know there are more hardcore users who take advantage of Alfred's workflows, but I've yet to dive that deep into the tool.

I was storing a lot of this data so I could access it anywhere, and was quickly running out of space, using all the free options in the various popular cloud solutions like Dropbox, SkyDrive, and Google Drive. But, being the cheap bastard that I am, I didn't really want to dish out the monthly cash to access only a fraction of what I needed.

Luckily, my slight Kickstarter addiction saved the day, as I discovered a project that seemed to solve my problem perfectly. Space Monkey⁴ aims to simplify cloud storage and make it more affordable for the common man by spreading the servers to the people as nifty little desktop devices. After purchasing the device, for the price equivalent of 20 months of 100GB of Dropbox storage, I have 1TB (that's 1000GB for those counting at home) for $5/month after the first year. Even though the software behind the device is still in its basic stages, it's improving all the time and super convenient. That's just my little unofficial plug for them, I look forward to seeing how this product improves over the next year.

Design and Development

Since my livelihood is dependent on how well I create for the web and beyond^TM, I'm always thinking about how I can streamline my work processes.

Entering 2014, there are a ton of great tools and services across the internet to help simplify and automate all the menial tasks we do as designers and developers. Whether you're compiling, concatinating, compressing, linting, or even deploying code, tools like Grunt & Gulp make life so much easier and allow web workers to spend more time focusing on writing code.

side note

I was fortunate enough to start a new job⁵ that dumped me into the Grunt pool at the beginning of the year, so I learned by doing on a full project (which is really the best way to truly learn anything in my opinion), but you don't have to take the plunge that way. My favorite resource so far has been Chris Coyier's 24ways article⁶—plus the Grunt community is growing so fast that there is bound to be some friendly dev out there willing to anwer any questions.

Along with Grunt, I have made an effort to conquer my fear of the command line and the great tools, like git, that come with mastering it. Starting slow with a few basic bits of version control like starting a local git repository for a personal project and moving on to pushing my work to a remote repo on GitHub. Now if the past sentence sounded like a Geek to you, check out Try Git⁷ from the good people at Code School. Leveling up from there would involve checking out git hooks for simple deployment to a staging server before pushing to production, all the stuff of an efficient Front-End Operations Engineer⁸. It may seem like a lot to do right away but remember it's just the beginning of 2014, so take a deep breath and take your time.

As for my design workflow, I continue to be satisfied by my experience with Sketch⁹ for mocking up various designs or creating icons and other design assets. Anyone who has ever spoken to me about my static design creation knows that I have been enamored by Sketch since I started using it about a year ago. It's extremely cheap compared to industry standard applications (cough Creative Cloud cough) and it's developed with the modern web worker in mind—it has the ability to export CSS stylings and awesome font rendering (looking at you Photoshop). The best part is the fact that it's continually being improved upon by the small team at Bohemian Coding, so if there is a problem, just ask and there is a good chance they'll work on it. But I digress—so my only wish in this area of my workflow is to get better at using Sketch for illustration purposes and organizing my files once they're exported, and that mostly relies on my personal discipline (more on that in a bit).

Task Management

This is another huge area for improvement because I'm finishing up my final semester of college while working a full-time remote job and finding time for personal projects too. I've used several iOS apps in attempt to solve my tasking needs but nothing seemed to be the right fit, until I tried out Trello¹⁰. Trello has the convenience of editing my boards of tasks from anywhere via the web or mobile apps and allows me to collaborate on boards with my team for our client work. Best of all, it's completely free to use. I've even started using it to store an inventory of my groceries to plan my meals for the week and keep track of what needs to be picked up from the store.

But even with all the reminder notifications, it's ultimately up to me to follow these personal deadlines with extreme discipline. There is so much to distract me from completing a school assignment, blog post, or work design—especially since it's all done online. The latest design/development/tech article is constantly streaming through my Twitter Timeline, Netflix is just a few clicks away with a whole slew of new titles for 2014, and Steam sits on my dock begging to be opened for a couple rounds of Team Fortress 2—such is the wonder and the danger for anyone who spends the brunt of their time online. So keeping myself focused on the task at hand will be the greatest test of my commitment to the Year of Workflows.

Money Management

As a young adult preparing to leave his last college apartment for the real world come in May, money management is vital. Not that I spend my weekly wage and student loans willy-nilly on extravagant nights out or weekend trips, but there is still quite a bit I can do to keep control of my spending habits. I've attempted this mission a few times in my college career by trying out tools like Mint and BillGuard. Mint just had too much going on for a person with zero credit cards, investments, and monthly bills besides rent, and BillGuard had a fine iOS interface but the web side was sorely lacking. Thanks to the open thought process of Marco Arment doing his taxes, I stumbled upon the free accounting apps of Wave¹¹ that were just right. They also have things like invoicing and payroll, but all I needed was something simple for my personal finances, so Wave seemed perfect at first glance. So far, it's been a pretty enjoyable experience from the web app and mobile receipt tracking app for when I use cash instead of my debit card. It helped me set up a straight-forward budget and lets me verify each transaction before they are added to the monthly total. I've enjoyed it so much, I'll probably end up using their invoicing app should I ever take on any freelance work.

Site and Musing Management

This has been a topic sitting in the back of my mind since I finished re-building my site last spring (a common curse of a web designer to always be improving). At the moment, my site is mostly static with minimal PHP for templating and the blog is powered by the super lightweight AnchorCMS¹². But I've gotten tired of PHP for personal projects, especialy once I was caught up in the KickStarter campaign for Ghost¹³ and saw the awesome conveniece of Jekyll¹⁴ for super simple static site generation. So as soon as I find the free time, I will working on rebuilding the static side of my site using Jekyll templates. A primary driving force behind this decision is to manage my portfolio a bit easier. At the moment, the items in my portfolio link to an external resource, but I would rather have a more in-depth explaination within my site, thus Jekyll is my chosen solution. My decision to use Ghost for my blogging efforts lies in its JavaScript DNA, lightweight nature, and consistent development. I've really enjoyed following the Ghost team and look forward to the plans they have to make Ghost the best blogging platform out there.

I will attempt to make the transition to these new frameworks/platforms as smooth as possible for the millions/tens of visitors that enjoy my Hip Musings^TM every week but things will certainly be bumpy at some point. I plan to write about my experience nearly every step of the way. Stat Tuned!

Wrap Up TL;DR

As I continue to charge confidently through 2014, I am making my vow here and now to stick to the life of workflows to streamline my management of money, data, photos, projects, and time. If you have some awesome workflow tools or unique strategies to stay focused, please reach out to me on Twitter @HipsterBrown or email me from my contact page.

Links for Days:

¹ JavaScript Application Design ² A Modern Web Designer's Workflow on CSS-Tricks ³ Alfred ⁴ Space Monkey ⁵ It's All Who You Know ⁶ Grunt for People Who Think Things Like Grunt are Weird and Hard ⁷ Try Git ⁸ Front-End Ops ⁹ Sketch by Bohemian Coding ¹⁰ Trello ¹¹ Wave ¹² AnchorCMS ¹³ Ghost - Just a blogging platform ¹⁴ Jekyll