Quick Left Blog

Geek Field Day

Wed, 16 May 2012 00:00:00 +0000

Hey Boulder Startup Week attendees, only 3 more days until Geek Field Day. Ef was kind enough to let us throw the closing party, so we decided to use this chance to celebrate our geekiness in full force.

With the help of Silicon Valley Bank, we’ve got an incredible night planned complete with challenges, prizes, commemorative t-shirts, hot dogs, chaco tacos, and booze. The party starts at 6 and runs till 10, be sure to register here to join in on the fun.

A “Quick” Preview of the Challenges

SnapJoy is running a photobooth complete with props and run by Boulder's favorite photographer, Dustin. Make sure to sport your startup’s swag so that it can be captured on the internetz forever. Rumor has it that Bing’s game for a shirt swap, so bring your most enticing tradeable material.
SocialEngine is bringing you all the fun of Angry Birds IRL. Contestants will launch real birds (okay, maybe they’re peeps) at several carefully crafted targets. Winner gets all the glory.
Simple Energy will be shooting down the house with a Nerf gun challenge.
Occipital’s running a 360 challenge with a delightfully mountainy/sunny prize.
SendGrid is bringing the heat with a world class rock/paper/scissors challenge.
Sphero will test your gaming skills with a special race track just for Sphero.

In addition to all this awesomeness, we’ve rented out the hot dog man, stuffed our freezer full of Choco Tacos and Klondike bars, and ordered two kegs. Don’t let us down.

We #DigOmaha!

Mon, 14 May 2012 00:00:00 +0000

Ingrid and I had an awesome time attending #BigOmaha! The event was impressive & well organized by Silicon Prairie News. We were stoked to walk away having met a collection of inspiring entrepreneurs, and feeling inspired ourselves. There was a lot of meat to this conference, not to mention our 4 steak dinners in 3 days.

There is an excellent article about the conference that was written by Brad Mccarty on The Next Web. Best part is, my face made the headline, check it out!

Representin' Boulder in the Big Apple at Likeable U

Thu, 10 May 2012 00:00:00 +0000

The Quick Left team is all over the map these days. Literally. Rachel and Ingrid are in Nebraska for Big Omaha, and by the time they get back on Monday, I'll be in New York City during Internet Week to sit on a panel at Likeable U with our friends from TechStars - both old and new.

I'll be joining Kelly Rice, Kinvey, Lauren Appelwick, Shelby.tv, Dan Herman, ChatID, and our moderator Clare Tischer, TechStars. Clare plans to make our event the best of the conference. I'll be doing my best to keep up with the rest of the panel.

I'm in NYC Monday the 14th and for the conference Tuesday the 15th - drop me a line if you'd like to grab a cup of coffee.

Most importantly, I'm looking for recommendations for eateries in the Chelsea-ish area - the cheaper, dirtier, and sketchier, the better. Seriously - this is the most important thing aside from the conference itself - recommendations in the comments would be hugely appreciated.

Command Line Tutorials - IRB & Bash

Thu, 10 May 2012 00:00:00 +0000

And we're back! This week we're going to cover some more scripting. Make sure you refer to this post if you're lost, since this week we're going a little bit deeper. If you haven't read any of these, make sure to check out some previous posts to catch up.

We're going to mix up Ruby and bash this week and see if we can do something cool along the way. If you don't know Ruby, don't worry: we won't do anything super complicated. You should have Ruby installed by default if you're using OSX. If not, check out this site to download it.

First, type:

irb

This brings up the "interactive Ruby shell", which gives you a back-and-forth session with Ruby inside your Terminal. This is a great way to immerse yourself with Ruby. Being able to type pure Ruby into the console is invaluable. Also, don't tell anyone, but sometimes I use it as a calculator.

Okay, you should have a Ruby prompt. We're going to tell Ruby to do something 10 times:

10.times do |i| `touch ~/#{i}.txt` end

Make sure you press enter after each line. If you haven't written Ruby before this may look complicated, but there's not too much going on here. The first line just says that we want to do something 10 times, which makes sense when you read it out loud. The |i| part might make less sense, but it enables us to use the number of times we've repeated so far inside the loop.

Here's where we come to the most interesting part: Ruby lets us type in bash commands, where it executes them. This works not just in irb, but in any full length script you might want to write. Anything encased in backticks (`) will be processed as a bash command. Inside, you should recognize our old friend, the touch command. The file name might look like gibberish right now, so let's break that down too.

We want to create a file inside our home directory (~/). Ruby will interpret the next part (#{i}) as something different each time the loop gets processed. The first time through, #{i} will be replaced by 0, then the next time it'll be replaced by 1, etc., all the way up through 9.

Make sure you type in end, to let Ruby know the loop is being ended; that's all we wanted to do. After you press end and enter, you'll see some feedback from irb. Go check out your home directory - you should see 10 shiny new text files.

Let's do a little cleanup on those files.

10.times do |i| `rm ~/#{i}.txt` end

This pretty closely resembles the commands above; we want to make sure we delete exactly the same files that we created (otherwise you could just do something like `rm ~/*.txt`, which would delete all .txt files in your home directory).

Playing around with the command line and irb a little more, you can do things like:

puts `cat ~/temp/test.html`.split.first

This grabs the contents of temp/test.html, splits it into chunks based on white space, then prints ("puts") the first one out to the command line.

That's all for this week! If you're a Ruby enthusiast, play around with all of the different bash skills we've acquired and see what cool things you can do!

Looking Awe.sm!

Wed, 09 May 2012 00:00:00 +0000

You know what's really awesome about Quick Left? We get to build awe.sm projects! We currently have the pleasure of working on development with the awe.sm team!

Awe.sm does conversion tracking for social media. It helps you track how sharing on Twitter, Facebook, and elsewhere increases revenue and engagement with your app or website. A shout out and a special thanks to the guys at awe.sm for sending us our new awe.sm tees! We definitely got a kick out of them!

Training 6/16: Intro to Backbone.js

Tue, 08 May 2012 00:00:00 +0000

Quick Left's love affair with the Backbone.js library has culminated in our very first training event, Intro to Backbone.js. We've implemented Backbone in a variety of different web applications both internally and for our customers, so it was only natural to share some of that experience in the form of a hands-on workshop.

We've put several Backbone apps into production, including OpDemand, Raise Your Voice, and MobileMSSNGR. Additionally, Sam is a contributor to both the Backbone and Backbone Boilerplate projects. Our developers love using the library and jump on just about every opportunity to use it in our projects. Backbone.js is a natural choice for our first training topic.

It'll be a full day workshop on Saturday, June 16 with plenty of time to code and get questions answered away from the usual weekday interruptions. We've capped the attendance at 18 to be sure that everybody has plenty of time to interact with Sam, Nico, and David throughout the day. To get details and to register, visit the Intro to Backbone.js page.

We'll be announcing more classes and hands-on workshops in the coming weeks as we continue to ramp up training at Quick Left. If you've got something you'd like to see on the schedule, let us know in the comments or at workshops@quickleft.com - thanks!

BigOmaha, Here We Come!

Tue, 08 May 2012 00:00:00 +0000

Our bags are packed and we're ready to roll! Finally it's time for #BigOmaha, we've been looking forward to this conference for months. Silicon Prairie News brings together a gathering of inspired people that focuses on innovation & entrepreneurship. We can't wait to meet new friends & get inspired by all the entrepreneurs who will be there. It's always exciting to see what projects are brewing outside of the Boulder bubble.

The coolest part is, I had the pleasure of working with mqVibe.com to sketch the city map of Omaha for this event. This will be located on the back of the name badges for all #BigOmaha attendees! From coffee shops to bars, here's a sneak peak of places to go while you're in Omaha...

If you're attending look for Ingrid and yours truly, we'll be handing out free Rocky Mountain High-fives. Additionally, I will be tweeting any & all jokes that I make during the conference and posting them under the hashtag #BigOmahaha :)

“Crud is served!”

Tue, 08 May 2012 00:00:00 +0000

cru·di·tés [kroo-di-tey; Fr. kry-dee-tey]

noun ( used with a singular or plural verb ) French Cookery .
an appetizer consisting of a variety of raw vegetables, usually cut into strips or bite-size pieces, and served with a dip.

The best kept secret at QL.

Many afternoons each week, our real food chef, whips of a batch of a homemade dip and a platter of fresh chopped pesticide-free veggies. This afternoon “Crud” (it rhymes with mud, but tastes a whole lot better) gets us through the day. It’s the afternoon pick-me-up (ranking close to Propane gifts that keep on giving) that feeds our brains and our bodies. Crud helps us figure it out!

Make Crud at home.

It is super easy, healthy, and delicious - so go for it and get creative! Slice up any veggies you like. Some QL favorites include carrots, celery, cucumbers, jicama and bell peppers. Then make your favorite dip. Here is a base recipe for our delicious humus.

Ingredients
* 1/2 pound of dry garbanzo beans
* 3 T of tahini or 5 T of sesame seeds
* 1/2 a lemon, juiced
* 1 t of real salt
* 2 cloves of garlic
* 1/4 of an onion
* 2 T of cold pressed olive oil

Instructions
Soak the garbanzo beans in water, covered on the counter for 24 hours, changing the water once or twice. When the garbanzos are ready to cook, change the water again, bring to a boil, then reduce to a simmer and cook on low for an hour or more until they are cooked through but not mushy. Drain, rinse and allow to cool. Then put all the ingredients into your food processor and blend until smooth. Adding extra lemon or olive oil will make your humus creamier, adding tahini or sesame seeds will make it nuttier.

Variations on the Basic Humus, add any of these to the food processor for a new flavor
* Pesto Humus: a packed handful of basil leaves, another 2T of olive oil, and a small handful of walnuts
* Pickle Humus: a whole cucumber and a teaspoon of dill
* Roasted Red Pepper Humus: broil a red pepper, peel off skin, remove seeds, use the meat
* Black Bean & Avocado Humus: soaked and cooked black beans and a chopped avocado

Quick Left Supports Ride For Reading

Tue, 01 May 2012 00:00:00 +0000

Those of you who follow me on Twitter know that I talk about cycling a lot. It's a sport I grew up participating and one that I truly love. Competition also has the added benefit of allowing me to truly disconnect from work (you can't really think about work issues when you're at your maximum capacity trying to stay with the lead pack in a race).

At the same time, I also do a lot of mentoring in the sport, from real-time live mentoring in Category 4 women's races, or teaching women to ride at Boulder's indoor velodrome (which sadly just closed), or sponsoring the Category 4 women's prize list at the North Boulder Park Classic Criterium, giving back and showing folks how much fun they can have being fit and healthy is not only fun, but very important to me.

The cycling team I ride for, Denver-based Naked Women's Racing, powered by Tribella also has a strong ethic to giving back. In addition to our race mentoring and overall focus on promoting women in the sport of cycling, we also put on our annual Ride for Reading event, which coincides with National Ride for Reading Week.

On May 11th, we'll be hand delivering the books by bicycle to Barrett Elementary school in north east Denver. Quick Left will be a drop off location for this year's event. In the next couple weeks, please bring used and new age-appropriate books for children. Don't be shy, just ring our bell during business hours. Or, if we're not there, you can try to fit your donations through our mail slot.

We are hoping the books will stack up high and you can see the progress through our window.

Also, If you'd like to join in the ride and help deliver books (starts and finishes in Denver), you can register on Prerace.com.

We look forward to your support!

Quick Left + Orbotix Hackfest Recap

Fri, 27 Apr 2012 00:00:00 +0000

Wednesday marked the momentous Quick Left + Orbotix Hackfest. With the help of Quick Left, Orbotix released their web SDK the night of the event, which opened up the mobile playing field to web developers.

We kicked off the competition at 6:30, which gave developers 3 hours to build their apps.

In the interim, Sphero got lots of loving from the younger crowd,

we watched President Obama drive Sphero,

and we oogled over our new banner.

Final submissions were in at 9:15 and they were they awesome! The judges had to choose between a Sphero night light, a motion detector app, a twitter alert Sphero, and several others. After some tense debate, Forrest Heller (from Occipital) was declared the winner; he skipped away with not one, but two Spheros.

Thank you to everyone who attended!

In lieu of a May Hackfest, we’ll be hosting the Boulder Startup Week closing party on May 19th. Get your geek on with us at the Geek Field Day extravaganza.

Introduction to Database Design (on Rails): Part II

Thu, 26 Apr 2012 00:00:00 +0000

In a previous post, I explained the fundamentals of database design. This guide will cover the second half of that topic: how to make the database work with Rails. Before reading this you should have a good understanding of what a database is and how to organize one.

Rails is a framework that sits on top of the programming language Ruby. The framework speeds up web development by filling in code that you'd otherwise write from scratch on every new project. A component of this is ActiveRecord, a subset of Rails that acts as the bridge between your database and your Ruby code.

Here are two examples of a Ruby class:

A class is a just a blueprint for a given object. Just like a house is made from blueprints, an author object is made from an author class. And just like a database table describes one thing, so does a class.

We represent relationships between tables like this:

The top diagram should be familiar to you; it' s a simple foreign key/primary key database relationship. The Ruby classes at the bottom show how we represent this diagram in code. Here, we're saying that an author object will be the parent of many books, while a book object will have only one parent author.

Hint: it's often difficult to decide which class gets the :has_many and which gets the :belongs_to. The way you decide is by finding where the foreign key lives (in this example, the foreign key is author_id). The table with the foreign key will always be the :belongs_to.

This works for all types of relationships. You can add multiple foreign keys to a table and simply add another :belongs_to on your Ruby class:

You can relate tables that don't have a direct connection (like authors and stores) through a third table:

So, what's the point of defining these relationships? The main benefit is that Rails gives you a number of helpful methods to grab records quickly and efficiently. With these simple class definitions…

…I can do the following:

# find an author and see books by her
rowling = Author.find_by_last_name("Rowling")
rowling.books # ["Harry Potter", "Harry Potter 2"] (return values here are simplified for clarity)

# find a book and see who the author is
harry_potter = Book.find_by_title("Harry Potter")
harry_potter.author # "J.K. Rowling"

# add a book to an author
harry_potter_3 = Book.new(title: "Harry Potter 3")
rowling.books << harry_potter_3 # Ruby array push syntax 
rowling.books # ["Harry Potter", "Harry Potter 2", "Harry Potter 3"]

These simple methods will take care of querying the database, matching the foreign keys, and returning the correct records. Without the help of ActiveRecord, I would be responsible for writing this implementation code myself. Take the following example:

harry_potter = Book.find_by_title("Harry Potter")
harry_potter.author # "J.K. Rowling"

If I didn't define my relationships, I would have to find the ID of the book "Harry Potter" in my database, find its author_id attribute, go to the authors table, find the author with that ID, then return that object. But since we've defined our Rails relationships, Active Record can select the right table and match the foreign keys automatically.

That about covers the basics. There are of course many different relationships I didn't cover here. You can read the full RailsGuide to get a handle on more advanced concepts, or feel free to leave a comment saying what you'd like me to expand on in a future post.

Command Line Tutorials - SSH

Wed, 25 Apr 2012 00:00:00 +0000

Hey everybody! Welcome back to our continuing exploration of the command line. As always, make sure you read the other posts if you haven't already.

Today, we're going to talk about two commands related to accessing other servers or computers. If you've ever plan on deploying your software to a server, then remote computing is an important skill to have. Luckily, it's not too hard.

First, you're going to want to master the "ssh" command. "ssh" stands for Secure SHell, and it's included on most Unix systems. This kind of command has been around as long as Unix, but this one is important because it encrypts your session, meaning nobody can steal your login credentials, or see what kind of things you're doing on the server. Unfortunately, I can only show you what the commands look like, but if you know a remote host you can connect to (and you have credentials, those are important too), then feel free to follow along.

ssh username@hostname

It's that easy! Technically the only argument "ssh" needs is the host name. If that's all you supply, then "ssh" assumes your user name on the remote server is the same as your local name. The next thing you'll see, if it's your first time on the server as that user, is a confirmation of the host name.

The authenticity of host 'hostname (123.4.567.890)' can't be established. RSA key fingerprint is 00:11:22:33:44:55:66:77:88:99:aa:bb:cc:dd:ee:ff. Are you sure you want to continue connecting (yes/no)?

"ssh" wants to protect you, so it makes sure that that's the computer you're really trying to connect to. Make sure you carefully read this description, since someone could be trying to pull one over on you. If you know you have the right one, then type "yes".

After that, you'll be prompted for your password. Assuming you have one, go ahead and type it in. Further assuming you're successful, then you'll have a command prompt on the remote host. Celebrate!

Now that you're here, you'll be able to run most commands that you normally could at your own command prompt. Obviously, the file directory will be different, since you're on a different machine. Depending on the system's configuration, you might have your own home directory, separate from all the other users who could access that machine, but more likely is that you share the same home as everyone else. As a result, it's important to be thoughtful whenever your move/remove/create files on the system; you don't want to accidentally delete someone else's stuff (or maybe you do, but just know that I'm always judging you if that's the case).

Okay, that's neat. When you're done, type:

exit

"exit" finishes your session on the remote server and returns you to wherever you were when you originally typed the "ssh" command. Let's go a little bit deeper now: assume you have a file on your system that you want to put on a remote server. How could you do that?

scp test.txt username@hostname:

The "scp" command stands for "Secure CoPy"; it always takes two arguments: the file you want to copy, and the destination for that file. Here you see the same "username@hostname" as above (swap that with your real name and server name, just like last time). That signifies the machine that you want to port your file over to. After you enter the command, you'll be prompted for your password, just like the "ssh" command.

Take note of the colon at the end, because it's pretty important. If you leave it just like that, then your file will have the same name it does locally, and it'll be placed in your home directory on the remote machine.

scp ~/test.txt username@hostname:~/temp/party_time.txt

Here we're taking a file from your local home directory and putting it up on the remote server under the subdirectory "temp". At the same time, we're changing the name to party_time.txt.

Let's take it in reverse. What if you want to get a file from the server and put it on your local machine?

scp username@hostname:~/.ssh/authorized_keys ~/keys.txt

This command rips the list of authorized keys from the server and puts it in a text file in your home directory. All we had to do was flip the order of the from/to files. Basically, you're taking the file pointed at by the first argument and putting it in the second argument.

If you have two computers, try taking "scp" and "ssh" for a test drive! All you need to do is figure out your IP address for your target computer, which you can find in your connection settings.

That's all for this week!

Hackfest Update: Web Developers Rejoice

Mon, 23 Apr 2012 00:00:00 +0000

This Wednesday from 6 - 10 pm, we’ll be throwing a Sphero-themed Hackfest with Orbotix. Developers will compete against one another for a chance to win a free Sphero (5 chances, in fact).

THE BIG NEWS:
Our developers teamed up with Orbotix to work on a version of their SDK that is compatible with PhoneGap. This means that anyone who knows HTML and Javascript can hack on Sphero! Web developers, consider this your call out. You’re not going to let all the Android and iOS folks win all the glory, are you? As for the rest of us non-devs, we can still spend the evening drinking beer, eating pizza, and playing with robots.

Learnin' the Youth

Wed, 18 Apr 2012 00:00:00 +0000

CU Boulder has a well-respected Computer Science program, as well as degrees in design, marketing, and business. What was missing, and what our industry has been demanding, was a way to train students in the intersection of those fields. BDW seeks to fill that gap with a year long post-graduate program targeted squarely at the startup and agency world.

The students run their own startup. They consult with real, paying clients. And more and more, they solve hard technical problems using cutting edge technology. When they realized that industry experts would better fulfill the role of transferring real-world experience than any staff they had in-house, they turned to Quick Left.

Our own Collin and Alex have been teaching the program's Advanced Tech course this semester, preaching the gospel of open source tools and frameworks like git, Ruby, and Rails. The students are also getting a front row seat to the Agile process, learning how to effectively estimate and manage a complex software development cycle.

No matter their role in a company beyond graduation, having experience in HTML, CSS, Ruby, source control, and the Agile process will give them a leg up on getting into the career of their choice, and we've been happy to help them along the way.

Thanks C4ers!

OpDemand Launch

Mon, 16 Apr 2012 00:00:00 +0000

In addition to Raise Your Voice, we’re excited to announce that another awesome client of ours, OpDemand, just came out of Beta. You can read the full press release here and check out their new real-time status updates and fully-featured javascript framework here.

OpDemand is a deployment and cloud infrastructure management tool that makes deployments simple, customizable, and affordable. They came to us almost a year ago looking to build a down-to-earth cloud management tool, while still providing advanced configurations for their users. We were able to implement real-time status updates, build a super complex configuration tool, and use our Backbone.js know-how to get them where they are today.

Congrats OpDemand!

Command Line Tutorials - Why I Write These

Wed, 11 Apr 2012 00:00:00 +0000

Hey everybody! Today we're going to take a break from learning new commands, because I'd like to take a second to talk about writing these posts. If you haven't seen any of this series before, hopefully reading today's blog will pique your interest in the subject.

When I started interning at Quick Left, I didn't have a lot of experience programming. The key to learning, I've found, is just doing. Moreover, what I learn builds on itself. Having a solid foundation to build on is key on your quest to become an expert in any field, especially programming.

To that end, I truly believe that the power to work at the command line is crucial to being a proficient programmer. In your toolbox of abilities, you'll find yourself reaching for the command line again and again, probably more than any other tool. When I started coding, I didn't realize how useful and powerful it would be; I did a lot of things the hard way. When one of my coworkers pointed out a simpler way to accomplish the same feat at the command line, I was in awe. What other command line wonders was I missing out on?

I started learning as much as I could. There are several good resources out there for learning how to use your terminal and bash; however, a few were too technical and a few were too basic and just plain boring. I wished there was a tutorial that laid things out in a way that I understood and that would provide for me a solid foundation to build on.

So I wrote one. The act of writing reinforces what you know by challenging you to explain it in the simplest way possible. I have a stronger grasp on the commands I already knew, and in the course of writing this series, I've learned a few things along the way too. Compiling information and writing it down gives you the opportunity to find out what you know and what you don't know.

If you found these posts and didn't know anything about your shell, I hope that you now have a firm understanding of what it is and what it's capable of. If you already knew your way around the command line, I hope you've learned some new tricks. I know I have.

April Hackfest: Quick Left + Orbotix Hack Contest

Wed, 11 Apr 2012 00:00:00 +0000

Quick Left and Sphero are teaming up to bring you one of the best Hackfests EVAR. Local start up Orbotix will be sharing their Sphero SDK with the opportunity for 5 crafty individuals to win their own Sphero.

On Wednesday, April 25th, from 6 - 10 pm, the Quick Left offices will be turned into a developer battleground: iOS vs. Android, mobile vs. web, gamers vs. the rest of the free world. As a plus, Orbotix will bring extra Spheros for you to test your app on. In order to get a jump on the competition, take a look at Sphero's SDKs.

TL;dr
When: April 25th, 6 - 10 pm
Where: Quick Left Headquarters @ 902 Pearl St.
What: 4 hours of intensive hacking to make the best use of Sphero’s iOS and Android SDK's.
Who: Any and all developers interested in hacking on Sphero's iOS and Android SDK. And anyone else who likes to eat pizza and drink beer at the Quick Left office.
How: Sign up here

*Please help us make sure we buy enough beer by registering ahead of time

Quick Left makes WorldBlu’s 2012 List of Most Democratic Workplaces

Tue, 10 Apr 2012 00:00:00 +0000

Running a business that is not only profitable but that also enriches lives is extremely important to me. Throughout my career as a software engineer I’ve sometimes felt like I was just another “resource” making sure that “deliverables” were delivered. I knew that there must be another way. What would the world be like if people were treated with dignity in their jobs, and given the freedom to grow and thrive? I’ve always tried to stick to these ideals in the growth of Quick Left, and it was truly a treat to see that there were others who shared our vision.

Last May, Becca and I attended WorldBlu LIVE, where we met and shared ideas with top democratic leaders and organizations such as DaVita, Zappos, and WD-40. You can check out some of what we learned at the conference, as well as general gotchas for running a democratic organization here.

We identified with the goals and principles of WorldBlu's democratic workplaces. Quick Left had been democratic since inception, but with these companies as guides, we solidified more practices of a democratic workplace and applied to be considered on the 2012 WorldBlu list.

We’re excited to announce that we’ve made the 2012 WorldBlu List of Most Democratic Workplaces! You can read the full press release here.

We’ve also learned a ton about what it takes to truly run a democratic company. So stay tuned! Because in the following weeks, I’ll share some tips on how to run your own democratic organization the Quick Left way.

As a side note, there must be something in the water. Quite a few Colorado companies also made the list so a big shout out goes to the following companies:

DaVita
Explore Communications
Namaste Solar
New Belgium Brewing Company
The Link School

Awesome zsh prompts can be yours

Fri, 06 Apr 2012 00:00:00 +0000

The adoption of FOSS tools for development has meant that a lot of my time is spent at my trusty terminal prompt. I took some time today to make mine a bit more awesome. Quick Left has killer couches, beanbags, spare rooms, and standing desks. This means I'm mobile a lot, and that my battery level is a concern, so I decided to add this to my prompt:

I'm using iTerm2, zsh, and oh-my-zsh, as you all should be. The code is posted here as a gist, but I'll go ahead and show the fun stuff here:

A quick walkthrough: The battery.rb needs to be in a directory that's in your path. I chose usr/local/lib

The encoding is necessary because of the fancy arrow characters. Skip that if you're fine with hyphens. The first two lines backtick to the PowerManagementSETtings tools, and asks for the battery status. This output is typically like

Currently drawing from 'AC Power' -InternalBattery-0 85%; charging; 0:23 remaining

A quick one-liner strips out the percentage value, and a color is chosen based on how full the battery is. This is joined into an output string, and that's what gets displayed in the prompt.

Now, like a Roomba, I'll always know when to go back home and charge up. Awesome!

Making Tooltips with CSS3

Tue, 03 Apr 2012 00:00:00 +0000

Recently we wanted to add some tooltips to the Quick Left Method page and I decided I wanted to avoid adding a Javascript plugin into the site's JS to accomplish this. One of our many focuses at Quick Left is performance and decreasing page load time/size is essential to that goal. So, I thought I'd explore the CSS3 route as it seemed quite achievable and even backwards compatible.

Quick points for those who scan:
Support: Tested in Safari, Chrome, Firefox and it works as expected. Works back to IE8 (with bottom arrow, without transitions), IE7 (w/o arrow or transitions). Graceful Degradation (or Progressive Enhancement?) for the winnings! If its worth the trade-off for you, I highly recommend this method!

So, without further ado, CSS3 Tooltips - How-to and trip-me-ups (see 'em in action here: http://quickleft.com/method).

The a tag code:

The relevant CSS:

.tooltip .tip-text {
  color: #FFF;
  height: auto;
  margin-left: -54px;
  margin-top: -25px;
  opacity: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  white-space: nowrap;
  width: 120px;

-webkit-backface-visibility: hidden;

-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
}

.ie8 .tooltip .tip-text, .ie7 .tooltip .tip-text {
  text-indent: -999em;
}

.tooltip:hover .tip-text {
  border: 1px solid #161616;
  margin-top: -45px;
  opacity: 1;
  text-indent: 0em;

-moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;

background-color: #343434;
}

.tooltip:hover .tip-text:after {
  border: 8px solid transparent;
  border-top-color: #1b1b1b;
  content: ' ';
  left: 45%;
  height: 0;
  position: absolute;
  top: 35px;
  width: 0;
  z-index: 105;
}

.tooltip:hover .tip-text:before {
  border: 9px solid transparent;
  border-top-color: #161616;
  content: ' ';
  left: 44.3%;
  height: 0;
  position: absolute;
  top: 36px;
  width: 0;
  z-index: 100;
}

You could select/copy/paste and roll out with lightweight tooltips from here and call it a day. But I have a couple of caveats to bring to your attention!

You can't apply CSS3 transitions to :before and :after pseudo elements, even though I feel like it should work fine, all browsers haven't implemented it. I ran down that road for awhile and Firefox and Chrome both stymied my hopes and dreams. In my experience they would just show/hide without any nice CSS3 transitions. I won't pretend this didn't make me sad because I wanted to use a title attribute on the anchor tag and call it a day instead of adding text inside the tag. I hope support for pseudo-element transitions comes through in all browsers soon!

Text elements after the tooltip element may flicker in Webkit (Safari only) on CSS transitioned elements.
So, make sure to note that for Safari you need to add this style:

-webkit-backface-visibility: hidden;

on the element that has the transition in to prevent a flicker on elements following the hovered tooltips. Solution via Stack Overflow.

Let us know in the comments if this is useful to you or if you ran into any issues with this approach!