Dave Gamache - Designer and Developer

Hosted on Github

Sun Jul 15 00:00:00 -0700 2012

Last week I popped open an outdated version of Filezilla, looked up FTP credentials for my ancient 1&1 hosting in a Google spreadsheet, then proceeded to overwrite every remote file on my site because I couldn't remember what was up-to-date. Then I cried. Deeply.

Fixing my hosting and deploy process has been on my todo list for months, but somehow consistently took a backseat to sexier projects. I'm happy to announce I finally addressed it and am now 100% hosted on Github.

Why it's awesome

The deploy process is fantastically simple. I just push to a gh-pages branch and it's live in seconds.
My version control and hosting are the same platform. This makes handling changes a snap.
Easy deploys mean I'm more likely to address bugs/issues in a timely manner.
It's free (unless you want private repositories).

The limitation

Github pages only serve vanilla HTML/CSS/JS, meaning if your project requires server-side scripting or a traditional database, you're out of luck. That said, greater numbers of projects and libraries are adopting compiled static assets and heavy client-side logic, so hopefully this isn't a crippling contrainst for most.

Get up and running with Github hosting

Create a branch off an existing github repo, name it "gh-pages", and push
Visit yourGithubUsername.github.com/reponame and voila!
To use a custom domain follow Github's instructions, but it basically requires placing a CNAME file in the root of the repo that points to a custom URL, then setting the matching domain's A-record to Github's IP address. (204.232.175.78)

Deploying in style

If your site is raw HTML/CSS/JS, deploying is as simple as merging any new changes from a working branch into the gh-pages branch and pushing. You're done. Changes to your site will be reflected almost immediately.

There are some more complicated situations though. For example, the blog you're reading has Ruby source files that are compiled to create static HTML/CSS¹. Since Github hosting doesn't support running Ruby, my gh-pages branch must be only the static HTML/CSS. Thus, my master branch is the Ruby source, while the gh-pages branch is only the compiled HTML/CSS.

The challenge then becomes how to merge newer, compiled files from the source branch into the gh-pages branch to be published? The brute force option would be for me to check out 2 instances of the "davegamache.com" repo, one on the master branch and the other on the gh-pages branch. I could work exclusively in the master branch and then drag-and-drop the updated, compiled site into the gh-pages instance when I was ready to publish.

While the copy-pasta approach absolutely works, I wanted something a bit less kludgy that didn't require me to check out multiple instances of a repo. My solution was to write a bash script² that did the work for me. Here's what it does:

Copies the compiled HTML/CSS from master into a temp directory outside the repo
Switches to the gh-pages branch and replaces old files with new ones
Does a 'git add -A' to add any new files
Runs a 'git status' so I know exactly what's changed before I push live

Here's the alias in full:

I have a similar alias for my Skeleton project. I keep source files in the master branch, while the documentation code lives in the gh-pages branch. Since the docs are built on the source (with some additional custom CSS), I use an alias to keep the docs up-to-date with the true Skeleton source from the master branch.

I love my new workflow

Using Github as a hosting provider is amazing. If you have projects built with vanilla HTML/CSS/JS (or that compile to static code), I strongly suggest giving Github pages a chance. Combining version control with hosting seems like a no brainer in retrospect. Since version control already means pushing files to a remote server, why not use that same system to deploy the whole site to a remote server?

Faster, simpler, semi-automated deploys means I get to focus on the fun stuff like designing, writing and coding.

My blog is actually built on Jekyll, which is what Github pages is built on. If I didn't have custom Ruby plugins, Github would magically parse my repo.
Not familiar with your bash alias? It's basically a file that allows you to save terminal commands to shorthand aliases.

Cinderblock

Sun Jun 24 00:00:00 -0700 2012

I always start personal projects from scratch. Well, almost from scratch. I made a super tiny boilerplate called Cinderblock that is the starting point for all my projects. I found myself constantly downloading Skeleton, stripping out the grid, the favicons, extra JS and then getting started. After doing that 10 times, I created Cinderblock.

The whole project is:

index.html: Base HTML5 page with links to the local CSS, a handful of meta tags, the HTML5 shim and jQuery from a CDN, and the local app.js file.
css: There are 2 files in here. Base.css has a basic reset and typography, while main.css is a blank document waiting for custom CSS.
js: Contains only app.js which is only an empty self-executing jQuery wrapper (a "document ready" basically).
img: An empty directory for future assets

If you're interested, check out the source on Github or download it straight from the landing page for Cinderblock.

Chase happiness

Wed Feb 22 00:00:00 -0800 2012

Below is an unedited stream of my thoughts on happiness. I usually enjoy writing and publishing well-articulated thoughts, but my usual process felt wrong for the subject. Instead of outlining, drafting, writing, editing and proofreading an article about being happy and adventurous, I hammered away in a text document for a half-hour and straight-up pasted the resulting stream of conscious (with a couple line breaks and some bolding of course).

My thoughts on happiness & life

The best advice I've ever received was "do what makes you happy." The simple adage has become my manifesto. The things you do on a daily basis are going to be what matters in the long run, so enjoy every day.

Complacency is the enemy of adventure, innovation, progress, and fun. Chase your passion and your dreams. If you love what you do, others will love appreciating what you do. Learn new things. Explore.

Reflect on yourself. Feedback is one of the most important processes in creating anything great, and your life is no different. Take time to reflect on yourself, what you're doing and what you want to be doing. We inundate our days with menial (but often necessary) tasks like emails, laundry, calls, cleaning, etc. Stop focusing on the immediate problems and give the bigger picture some thought. Schedule time alone to think about yourself and if what you're doing is exactly what you want to be doing. Think about the things that make you happy and do them more often. Make changes in your own life. They don't have to be drastic (although they sometimes should be), but at least reflect and work towards what you want to be.

Take a moment and realize you're in control of your own life. Odds are, no one is stopping you from doing what you want. Stop going through the motions every day and take control of your life. Waking up at 8AM, going to work, coming home at 6PM, watching TV for 2 hours and going to bed is fine routine, but shake it up and get out of your comfort zone more often.

Don't ever settle. If you don't wake up most mornings pumped to be alive, you're doing it wrong.

Chase the girl you're secretly in love with, or if you already have her, stop letting other things take priority and let her know how you feel. Take her out, treat her right and travel the world.¹

Stop saving all your money for retirement. By the time you retire you won't be able to do half the things you want and everything will ache - do it today, just don't be reckless.

Learn to care less about what other's think. You wanna wear that blazer because you think you look like a boss - do it. You quietly enamored with the girl from finance - ask her to get coffee. Tired at 7PM - go to sleep. Not tired - get in your car and enjoy the night. I'm not suggesting you live by impulsive action, but be confident and fearless. Nobody laughs at someone who does exactly what they want, and if they do, it's to hide their jealousy. Stop striving to please others. Don't stress out about pleasing your parents, friends, family, teachers, or coworkers. Learn to make yourself proud and your success will be organic. You'll find you have high expectations of yourself for things you care about.

Find happiness every day

Focus on what makes you happy on a daily basis. Life is short, so enjoy it and never regret anything that makes you smile.² What you did yesterday, determines what you're doing today, which defines who you are tomorrow.

This is also true for you ladies. Chase the man of your dreams and treat him right.
An adapted Mark Twain quote

Minimalist Video Game Posters

Wed Jan 25 00:00:00 -0800 2012

Leaving Tumblr for Wordpress

Thu Jan 12 00:00:00 -0800 2012

A year and some months ago I launched the first version of davegamache.com on Tumblr. At the time, it was the ideal publishing tool for me and has served me well, but I opted to move to Wordpress for my recent refresh. My original site was designed specifically for Tumblr, but this time around I had no CMS in mind. Deciding how to implement a design before starting a project will unavoidably result in artificial, creative limitations. This isn't always bad - limitations are an inherent and necessary part of design, but for my personal site I wanted to start with as much freedom as possible.

Fast forward a couple months, a few dozen discarded designs and a handful of late-night, doughnut-fueled coding sessions; I was ready to decide on a publishing tool and integrate my local, static prototype. I eventually settled on Wordpress - which I'll likely write about in the future - but I want to share the pros/cons of Tumblr I've experienced over the past year.

Tumblr Pros & Cons

Pro: Active, engaged community with an easy "follow" system
Pro: Simple, approachable publishing on both desktop and mobile devices
Pro: Dead simple templating syntax
Pro: Hosted solution meant I didn't have to worry about managing databases or version updates
Con: Forced to publish code through the web interface, meaning no simple way to directly manage HTML/CSS in my preferred code editor
Con: No way to implement custom, server-side functions
Con: No control over mobile display of site (standard Tumblr theme gets served)
Con: Creating/managing additional pages (outside the standard blog) is painful
Con: Tumblr downtime has always been an issue (although it does seem to be getting better)

Ultimately, the inability to easily write, manage, and update code with Tumblr is what caused me to defect to the more robust and customizable Wordpress. My redesign required the ability to set a number of parameters depending on the post type, which just isn't possible with Tumblr. I was also tired of fumbling around in Tumblr's in-browser code editor - it's so much easier to launch Sublime Text 2, make edits and push to my server.

Tumblr is a solid blogging tool for those who want to get up and running quickly and don't feel the need to completely control the design and implementation of their site. Coding for Tumblr was rough at times, but writing and publishing were dead simple. Wordpress has proved to be more flexible thus far, but I'll report on how it fares over the coming months.

Craftsmanship

Sun Nov 27 00:00:00 -0800 2011

The concept of craftsmanship fascinates and drives me. There are many definitions of craftsmanship. Some silo the term to physical trades like carpentry, while others pigeonhole it to artistic endeavors. My understanding of craftsmanship is much more fundamental.

Craftsmanship is doing what you love and doing it right.

No matter what you do — designer, baker, electrician, architect, author — your job is your craft. Learn to think of your work as practice towards becoming an absolute expert at what you do. Craftsmanship is not a destination; it’s a life-long discipline.

What makes a craftsman

It’s near impossible to capture all the nuances “craftsmanship” carries, but when you see it, feel it, experience it — you know it. My dad loves to fix and rebuild homes, so it was unsurprising when he demolished the bathroom in our family home 2 months ago. His entire life is about making things better. I visited home a few weeks ago for Thanksgiving and saw the new bathroom. It’s beautiful. A tangible testament to my dad’s incredible skill as a builder. What about the bathroom made it remarkable though? What about it stirred a newfound respect for the man who made it?

It’s the quality of the work. Not only is the tile flooring a tasteful slate, absolutely level and evenly spaced, but underneath it there are meticulously coiled heating elements to keep the icy stone heated for my mom at night. Those electrically heated coils are wired into a breaker box hidden from sight, but easily accesible for future use. I know, without question, that the plywood that sits below those heated coils has been protected from the threat of combustion and is probably a 150% thicker than is “code” in our county.

It’s a passion for betterment. Our previous bathroom was acceptable by all standards. It had a functional sink, toilet, shower and plenty of storage, but it wasn’t exceptional or delightful. He wanted to make it better. To date, he’s built a deck around the house, laid hundreds of square feet of concrete, rebuilt the roof, rewired the electrical, installed a car lift in the garage, and assembled a hot tub on the patio (I’d say I’m covering about 25% of his home improvements).

It’s experience. He knows everything there is to know about that bathroom, whether it’s about the 1.25″ diameter pipes that channel water to the shower or the acrylic, semi-gloss “Swiss Coffee” paint that’s 3 coats thick on the walls. Even more importantly though, he knows why to use those from years of doing.

That’s a whole lot about a single bathroom, but it illustrates a point. Craftsmanship is about quality, passion and experience. Make things that you want to show to others. Build things that will make you proud 10 years from now. Sweat the details and the final product will be something to be admired.

Craftsmanship in design

Craftsmanship is universal. Designing a product (or site) shares the same core values as any other craft. Quality, passion and experience are still the ingredients, the difference is the outcome. Instead of painstakingly positioning a few dozen tiles, we arrange thousands of pixels. Rather than double-check that floors are level and that walls are square, we double-check a design’s alignment against a grid.

Craftsmanship on the web presents an interesting challenge. How we build for the web is changing every day, so the practice of perfecting it is never ending — but that’s what I love about it. Designing for the web requires a passion for learning and the measure of quality is in constant flux. Three years ago, most mobile web experiences were afterthoughts, but today they are rapidly becoming the focus (and with good reason). Thinking mobile first and responsive design have changed the craft of designing for the web.

Love your craft everyday. Design the simplest, most delightful product you can. Write organized, performant and readable code. Watch people use your product and make it better for them. Improve your work by learning from others and from your own experiences. Help create a better web for its 2 billion users.

Skeleton CSS

Mon May 23 00:00:00 -0700 2011

Responsive design is not a silver bullet, but it is the strongest solution to the rapidly growing set of devices web designers and developers have to account for. It would be impossible to design for individual devices and screen sizes these days - instead let's be smart and essentially "bucket" devices into categorical sizes and design appropriately. Skeleton does just this.

About a week ago I pushed the launch button on www.getskeleton.com and just wanted to share a short bit about why I made it and what the experience has been like.

The elevator pitch for Skeleton is "A Beautiful Boilerplate for Responsive, Mobile-Friendly Development."

My hope is that is becomes the easiest, most awesome way to develop responsive designs that easily scale to mobile sizes (but it is only one solution of hundreds). Skeleton makes responsive design easy by using a grid that starts at 960px, but scales through tablet and mobile sizes through the magic of media queries. In addition, Skeleton rocks a small set of extremely lightweight styles and functions like beautiful typography, buttons, tabs and forms.

Here are the Skeleton resources:

www.getskeleton.com: The marketing/documentation site for the project
Skeleton on Github: For those of you who want to check out the code before downloading it or follow the project
hi@getskeleton.com: Hit me up with feedback, questions, comments or anything Skeleton related. I would love to hear from you :)

If you haven't played with a responsive design, here are a few examples I've been enjoying (resize browser to see their glory):

Also, a great resource for finding more responsive design inspiration is mediaqueri.es.

If you have the chance to try out Skeleton, please hit me up (hi@getskeleton.com) and let me know how it went! I love feedback!

HTML Includes

Mon May 16 00:00:00 -0700 2011

I love working in front-end code and even love the organization of code. Keeping my CSS and JS modular and separated from my markup makes me happy. One of the huge advantages of keeping CSS files separate from a page's markup is that if there are shared elements across pages (i.e. navigation) it's easy to restyle those elements across all of them. For this same reason, I love to use PHP includes to logically split up page markup, but wouldn't it be beautiful if I didn't have to use a backend language for includes?

Imagine a world where HTML5 would support a modular splitting of markup, just like it supports the splitting of CSS and JS. It would be fantastic.

I will often have shared "doc-head.php" and "doc-foot.php" includes that I can use across the site that serve to house my doctype, meta tags, attach my CSS, JS and favicon, as well as respectively open and close my body and HTML tags. Really, any piece of code being re-used across a number of pages should only have to exist in one place, so I put them in PHP includes. A great example is a site's nav - I always put global navigation into my "doc-head.php." I should be able to do this without being required to use a backend language.

The advantages seem great to me, but personally the two biggest wins would be:

Following the DRY principle: Keeping code in one place makes it much easier to edit and maintain. As projects get larger in size, this only becomes more important.
Projects stay backend agnostic: If I'm working on markup of more than one page, I would like to organize that code with includes, but I also want to avoid forcing PHP on anyone who might need to work with my code.

It's not as if this is entirely different from the notion of "including" CSS and JS. It's essentially the same functionality, but for HTML instead. There is no notion of this in the HTML5 spec (to my knowledge), but I sure wish there was. For now, I will settle to continue to use PHP includes, but I dream that the future holds a better solution for me.

Three-Month Goals

Wed Apr 13 00:00:00 -0700 2011

I love to do stuff. So much stuff in fact, I often find myself overwhelmed by my own unorganized ambition, but luckily, I found my fix. I wrote a while back about my brain drain technique, which is fantastic for relieving stress and nailing short term tasks, but I was still trying to figure out how to manage longer term goals. While it might not be the perfect fix for everything, I've settled on 3-month goals.

I outline 2-4 objectives in 5 categories, resulting in around 15 objectives for every 3 months. My 5 categories for the past 6 months have been:

Personal Growth
Career Growth
Financial
Travel
Fitness

I make sure my goals are measurable and attainable. A few examples for the next couple months for me are:

Go on a 2-day backpacking trip with my best friend Parker
Learn how to use AJAX to create stateless micro apps
Payoff 50% of my school loans from senior year

I always work to follow through on these and set dates or milestones for myself, just like I would for a client. Without committing to a date, it's not often you'll realize your goals.

Stop thinking and talking about the things you're "going to do" and write it down. Make the commitment to yourself concrete and set yourself up for success. I do it with 3-month goals, but it doesn't really matter.

Having trouble starting your categories or goals? Take an hour to sit down, think about the near future and answer these questions...What are:

3 things I want to do
3 things I want to be
3 things I want to have

It works for me and I'm sure it can work for you too. It feels great to have objectives set and feel like I'm working towards goals and dreams.

Verdict on Dribbble

Mon Mar 28 00:00:00 -0700 2011

Dribbble has been out long enough that designers have started taking sides. Some sing the praises of the talent and quality of work that are on Dribbble, but others condemn it as a group of elitist designers. The two most common criticisms I've heard about Dribbble are that most of the shots are icons or typography and that most of the popular work is done in a similar style (quasi-retro, textured, typographically driven...oh yeah, and with noise). I would make the assertion that the criticisms do hold some weight, but Dribbble still is enormously valuable to me.

First, it is a great resource for browsing design inspiration. The "popular" filter surfaces some fairly homogenous results, but why not try the "everybody" filter? Honestly, the general quality of work is so high on Dribbble, you're bound to find some treasures anywhere you dig in. Some of the best work I've seen has been from designers with just a handful of followers and less than a hundred views.

Secondly, if you're a fan of sites like PatternTap that organize collections of UI elements (breadcrumbs, tabtips, etc), Dribbble could be your next best friend. When I am struggling with a specific UI challenge and can't seem to find the right solution, I'll check out others' answers to similar challenges. Dribbble users have been great about tagging their shots, so search the well-organized database of high quality UI elements if you're feeling stuck.

Finally, while Dribbble never realized its full potential as a platform for soliciting feedback from a community, it has become a great place to showcase your work. Designers are starting to use their Dribbble accounts as loose portfolios (much like a more niche Carbonmade), which has resulted in even higher quality of work (rather than quick, unrefined shots meant for feedback).

Overall, I still wish Dribbble had matured into becoming the community platform for feedback is was originally intended to be, but that aside, it is still an awesome site with a great community.

So go forth and browse Dribbble...and don't forget to try the "everyone" filter. I promise you will find quality and variety there :)