sacha chua :: living an awesome life

I organized my files, weeded out blurry photos, and thought about how I want to improve my workflow for input, processing, and output.

Here’s what I want from my digital filing system:

Easy year-end backups: I’d like to be able to copy a folder onto a DVD and a separate drive, secure in the knowledge that if I really needed to get back to something, I could look it up.

Offline search: I want to be able to search the data even without the physical DVD or disk, so I don’t have to guess what year something happened or pop lots of DVDs into my drive.

Face tagging: I want to quickly retrieve all pictures with a specified combination of people. It would be awesome to get statistics off that, too.

Remove duplicates: I don’t want to wade through duplicate pictures when classifying my files, so I used VisiPics to find and delete images that were identical or of lower resolution.

Review by type: I want to review all of my presentations, drawings, blog posts, or 4×6-printable favourite photos regardless of their year. I want to be able to do this offline, too.

Search by topic: I want to find all of my resources related to a topic.

Map: I want to build a map what I know and what I want to learn. This map might contain hyperlinks to more details.

Quick visual review: I’d love to be able to quickly flip through or view slideshows of my visual book summaries, sketchnotes, and photo highlights. This is a good way to trigger memory. Maybe an “On this Day” reminder, too?

Hmm, planning…

Right now, I back up my data onto a drive weekly, and I use Dropbox for network backups too. I save my sketchnotes and summaries into a folder, and I keep small versions into another folder so that I can easily review them. I use Evernote so that I can search my hand-written notes and images. I use Picasa for images and face recognition, and Bibble 5 for tags. I don’t have offline search of backup DVDs yet, but I haven’t needed it. Besides, I can always search through my blog posts and notes.

Getting there…

I’d been looking for a wake-up alarm that was good at getting me up and out of bed. It turned out that I can solve a sequence of two-digit addition problems while half-asleep, so my previous alarm clock app still tempted me to snooze.

For the past two weeks, I’ve been trying a different alarm clock app. Morning Routine requires you to scan a barcode or a series of barcodes in order to turn off the alarm. After reading a Lifehacker post that mentioned it, I downloaded the app and set it up on my phone. I configured Morning Routine to require the barcode of a tub of cream cheese from the fridge. It turns out that the process of stumbling out of bed, stepping around the cats in the hallway, and opening the fridge is enough to wake me up and get me to start making breakfast.

The app doesn’t have a snooze button, so I can either wake up properly or shut down my phone. So far, I’ve been good at not shutting down my phone.

The developer’s blog post describes an even more fleshed out routine that involves barcodes in several rooms, with timers to get through the process. My morning wake-up-and-get-out-the-door routine typically takes an hour, but it might be interesting to set timers for the different components, or do a low-level time study of it. Hmmm.

Morning Routine is an Android app, and it’s currently available for free. Check it out in the Google Play store!

I’ve been thinking about getting an Android tablet so that I can draw more at conferences and around town. My laptop’s fantastic for drawing and writing, but it doesn’t have the battery life to get me through a day of conference sessions.

Before taking the plunge, though, I considered the different options. If the main thing I want is the assurance that I’ll be able to draw and write for a full day, there are a few ways to do that:

• Learn how to draw on paper. This is somewhat scary, but it’s useful, so I’ve bought myself another sketchbook for mindmaps, sketchnotes, and other sketches. I filled the last one over two years or so, and maybe I’ll fill this one faster!
• Get another battery for my Lenovo X220 tablet, and swap out batteries when needed.
• Get the extended battery slice for my X220 and enjoy way more battery life for some extra weight.

I decided to get the extended battery slice. More precisely, my business decided to get it, because I’m using it for sketchnotes, illustration (I do that professionally now, too!), writing, business correspondence, client meetings, and so on.

The battery slice is a large, flat battery that attaches to the bottom of the laptop. It extends my battery life by quite a bit, and is hot-pluggable so that I don’t have to interrupt my work. I haven’t tested its limits yet, but this power icon is pretty neat to see:

With this, I think I’ll be able to spend more time in libraries, cafes, parks, or conferences. Might be fun. =)

“Why is your window transparent?” a coworker asked me when she noticed my screen. I told her about how I do my CSS theming, and she pulled another coworker over and made me repeat the explanation. Since that seems like something other people might find handy, here it is.

Sass: Syntactically Awesome Sytlesheets

I rarely do CSS/front-end theming work, but when I do, I try to make it as fun and easy as back-end development. I use Sass (Syntactically Awesome Stylesheets) so that I can use nested selectors, variables, and mixins. This makes my code cleaner and easier to write. You’ll need Ruby in order to install Sass, but the tool will give you CSS that you can use on any web platform.

Browser-based tools

I prefer doing the initial tweaking in Google Chrome, because I like the way that the developer tools make it easy to modify the stylesheet. The Chrome CSS Reloader extension is handy, too. Most of the time, I make my CSS changes in the text editor, then use the CSS Reloader to reload the stylesheet without refreshing the page. This makes it easy to manually toggle the display of some elements while allowing me to refresh style rules. If I want to figure out the values for a few simple changes, I’ll sometimes make the changes directly in Chrome (you can use arrow keys to adjust values), then copy the values to my Sass source file.

Colors, sizes, and spaces

A second monitor is totally awesome and well worth it.

Designs rarely specify all the colours, sizes, and spacing needed. To quickly get the color of a pixel, I use WhatColor. This shows the hex code for colors, and allows me to quickly copy the code with the F12 shortcut key. If you want to change the shortcut key, the source is available as an AutoHotkey script.

To make it easier to match sizes and spaces, I use WinWarden to make my browser window 20% translucent. Then I carefully position it over my design reference until the important features match. Magnifixer makes it easier to line things up because it can magnify a fixed portion of the screen. By focusing Magnifixer on the part I’m working on, I can tweak CSS without straining my eyes.

When I know I’m going to be making a lot of changes, I use AutoHotkey to map a shortcut so that I can refresh the CSS with one keystroke instead of several. When I happen to have my USB foot pedal handy, I rig it up to refresh my stylesheet.

Regression testing

Sometimes my CSS changes modify other rules. Instead of laboriously checking each page after changes, I’ve figured out how to use Selenium WebDriver to write a Java program that loads the pages in Mozilla Firefox and Internet Explorer, capturing screenshots and numbering them according to the pages in my design reference. This means that I can run the program in the background or start it before taking a break, and then flip through all the screenshots when I get back.

Cross-browser testing

What’s CSS theming without the requirement of browser compatibility? Someday, when I need to deal with more browsers, I might look into Selenium RC. In the meantime, I develop in Chrome, my Selenium-based program makes it easier to test in Firefox and IE, and it’s easy enough to try the URLs in Safari as well. Virtual machines handle the rest of the requirements. 

So that’s how I’ve been doing CSS theming on this project. What are your favourite tips?

W- picked up the LEGO Indiana Jones game to round out our collection, and we’ve all been enjoying it. The puzzles sometimes take a while to figure out, but like all LEGO games we’ve played so far, they’re never frustrating and the little touches of humour make us laugh.

We started with the episodes for Indiana Jones and the Kingdom of the Crystal Skull. It hadn’t stuck in our memory as much as the previous films, so the game episodes were a little mystifying (although still lots of fun). To help clear things up, I requested the movie from the library. It was a lot more fun than I’d remembered it to be, possibly because of all the jokes we’d remembered from the game. The movie by itself, I don’t know… The movie and the game, yay. =)

We like the LEGO games. The puzzles are easy to solve, but still contain plenty of jokes. Looking forward to getting LEGO Batman 2 when it comes out (and rewatching the movies!).

I spent most of the holiday weekend organizing and backing up my files. I used VisiPics to delete duplicates and lower-resolution copies. I went through the rest to get rid of blurry pictures, and rated the pictures so that I could easily find highlights.

Although hard drive storage is relatively inexpensive, attention costs more, so I was more ruthless when it came to weeding things out. I figured that since we’ve survived thus far without a complete pictorial record of our lives, I’ll be okay even if decades down the line, I wish I’d kept this or that blurry picture of Neko sleeping under the blanket on the couch. No sense in stressing out over storage, or in overloading my ability to organize by insisting on keeping everything.

I burned my archives for 2011 and 2010 onto DVDs so that I could restore the data even if something happened to my hard disk. I also backed up my data to network storage.

With the basics out of the way, it’s time to think about what I want from my archives and how to structure things to make it even easier to work. I care the most about the following categories:

• Blog posts and notes: I want to be able to review my experiences, decisions, and lessons learned.
• Pictures: I want to trigger memories, particularly as I help write family stories. I want to index the pictures by person, so that I can search for combinations of people.
• Drawings, sketchnotes, and mindmaps: I want to trigger memories and lessons learned using sketches. I also want to track my progress, which means chronologically ordering my sketches as well.
• Book notes: I want to be able to review my book notes by topic and annotate them with questions, actions, and follow-up items. I want to slow down and take more notes while reading books, translating them into ways I can improve my life.

Archives are good for recovering data, but I wonder how I can structure things so that I can use the past to make the future even better.

Some ideas for what usefulness might look like:

• A photograph encourages me to write a story, fleshing out the memory more; it might also get me to write that person
• A blog post prompts me to revisit an idea and build on it.
• A decision review leads to better decisions
• Book notes nudge me to follow up on how I’m applying what I’ve learned, and I might reach out to people and tell them about the book

We use Bibble 5 to organize our photos. Bibble has a mode slideshow that can go through more than one slide a second, which is great for rapid review. That might be good for reviewing photographs and drawings to see if any of them trigger a quick memory or feeling. Rotating my desktop background through chosen highlights can also give me a peripheral awareness of faraway family and friends.

For blog posts and decision reviews, my monthly-ish and annual reviews are good for revisiting recent posts. Now that I’ve loaded my archives onto the Kindle, I can also flip through them while waiting.

My scanned mindmaps aren’t as useful for quick recall/addition as I’d hope. This could be because my paper-drawn mindmaps sometimes have text written sideways or upside down (yay for rotating), which is harder to read when I’m flipping through everything in the same orientation. If I stick to writing horizontally and I use bigger, more visual concepts, I can get more of an impression during a quick review. I’ve also used computer-based mindmaps like Freemind. They feel a little different, and I still have to figure out a better way to build mindmapping into my workflow.

Sketchnote-wise, I’ve learned that although OneNote’s infinite scroll of paper is nifty, I like the limits and easy review of a single screen with layers. That’s why I’ve switched to using Autodesk Sketchbook Pro for most of my sketchnotes. They’re much easier to flip through, and I can add them to presentations and yearly reviews easily.

For book notes, slowing down and using a template will help me take better notes from books. It’s not about quantity, it’s about quality. It’s not how much I read, it’s how much I keep (and act on!).

It looks like the key things I can do are:

• Export picture highlights and set them as my desktop background. Print them for extra backup/flipping fun.
• Import my sketchnotes into Bibble and organize them using keywords. Figure out how to set up a slideshow shortcut to review them. I’ll organize them by year, then use metadata to pull different topics together.
• Use Picasa to tag faces in all of my pictures.
• Slow down and take more book notes. Translate books into actions.

How do you get more out of your archives?

I’m working on the stylesheets for a site, which means lots of fiddly little changes.

I decided to make all of my styling changes to my Sass source files instead of editing the attributes in Google Chrome because I found myself forgetting to copy attribute values back from Chrome. Editing the source files directly meant that the changes would be persistent – a slightly slower workflow, but a more reliable one.

I used Chrome to set selected divs to show up with display: block. This meant that I didn’t have to keep triggering hover behaviours myself. Then I used CSS Reloader to reload the stylesheet. Chrome kept my manual attribute changes, like display: block, while applying the new styles. Awesome!

I wanted a quick way to update my browser windows after I saved the file. Saving would automatically trigger Compass’ conversion of the Sass files into CSS, but the browser still used the old stylesheet until I trigged CSS Reloader with F9 or the context menu. I didn’t want to refresh the entire page because that would lose the display: block I’d manually set.

AutoHotkey to the rescue! I wrote a function that saved the current file, waited for Compass to convert the Sass file into CSS, and then used the CSS Reloader shortcut key on all open Chrome windows. This meant that I could have a translucent browser window superimposed on the design PDF for easy comparison (thanks, WinWarden), and an opaque browser window for inspection and navigation.

RefreshStylesheets() {
  Send, ^x^s
  Sleep, 2000
  SetTitleMatchMode, 2
  WinGet, id, list, Chrome
  current := WinExist("A")
  Loop, %id%
  {
    StringTrimRight, this_id, id%a_index%, 0
    WinActivate, ahk_id %this_id%
    WinWaitActive, ahk_id %this_id%,,2
    Send {F9}
  }
  WinActivate, ahk_id %current%
}

Then I mapped it to my foot pedal, just because I could. I didn’t need to take advantage of the 3-way switch, so I mapped all 6 possible functions to RefreshStylesheets.

+F1::RefreshStylesheets()
+F2::RefreshStylesheets()
+F3::RefreshStylesheets()
+F4::Send, +F1
+F5::Send, +F2
+F6::Send, +F3

To make it even easier to fine-tune tiny differences, I installed Magnifixer. I used the “Fixed” mode to magnify the translucent portion I was working on, and I moved the display next to my code. That meant that I could avoid turning my head all the time. I could simply tweak my code, nudge the pedal with my toes, glance at the display (or use peripheral vision!), get it right, and then check the overall view.

Foot pedals are fun. More fun than mapping the shortcut to something like F9 or F12, which would involve taking my fingers off home row and finding a small key. You can literally stamp out bugs.

All this put me in such a good humour that I ended up getting the homepage almost pixel-matched to the specs, except for the limitations on letter-spacing and the adjustments I made for the inconsistencies in the spec layout.

Whee! I can’t wait to use this idea when developing backend code. I’ve played around with Autotest on a Rails project, and it should be a simple matter to write a shell script running selected tests on any project. Fun!

Foot pedal + second monitor = awesome squared.