sacha chua :: living an awesome life

We’re settling into a routine of making pizza from scratch almost every week. It’s relatively quick and easy to make. I use the basic bread dough recipe from Jamie Oliver’s cookbook, "jamie’s kitchen". W- prefers it when we make a double batch of dough with just one batch worth of yeast, and let the dough rise overnight. This results in these really puffy, bread-like pizza crusts.

After the dough rises, it takes me just an hour to prepare four pizzas. I divide the dough into four parts, forming them into rectangles by stretching and rolling them out. I use practically all of the baking sheets in the house. While the pizza crusts rise again, I chop and grate the rest of the ingredients. Assembly is quick and fun, although I still tend to err on the side of loading the pizza up with too much food. Baking takes twenty minutes per batch of two pizzas, and then we have plenty of pizza to eat through the week.

We’re always looking for kid-friendly recipes that we can cook in bulk. Pizza is a great way to use up bits and pieces from the fridge: pepperoni, chicken, peppers, tomatoes, and so on. Other family go-to recipes include pasta and curry. Good to be able to make things ahead!

I moved the calendar to the fridge so that we can use it to plan the meals during the week. Another step towards even smoother everyday routines!

Joel wanted to know if I could share any tips on kickstarting and continuing sketching practice, so I thought about my process for getting better at drawing. Here it is!

Collect inspiration: With the growing popularity of sketchnotes and visual communication, there are plenty of great examples on the Net. I like checking out Sketchnote Army and Ogilvy Notes for inspiration. I often search for sketchnotes using Google Blog Search or Google Image search. I use Evernote to clip the ones I like so that I can search for them using text.

I look for inspiration elsewhere, too. Shop displays sometimes have interesting colour combinations, and paintings and photos are also great for colour and composition. Cartoons and comics give me visual metaphors and humour. I pick up ideas from books and presentations, looking for good things to share and interesting ways to share them.

Compile a notebook: I use Microsoft OneNote to collect parts of the different images that inspire me: title treatments, visual metaphors, colour combinations, techniques, and so on. I like using OneNote for this because the keyboard shortcut (Win+S) is an easy way to capture part of the screen, and because OneNote makes it easy to organize elements on pages within sections of a notebook. Text labels make it easy for me to search the notebook for the keywords I’ve added to each of the images. Organizing the elements like this means that I can quickly find a specific element or browse around for quick inspiration.

Build a library: Background templates, reference photos, and reusable elements (parts of  past drawings, for example) help me work more quickly. I can paste them in from my OneNote notebook, image searches, or my photos and files. I can also use Add Image to add a file as a new layer. I can then adjust the opacity, scale and rotate things a little, and trace the image or use it as the basis for a different drawing. I sometimes use a light grid as the background when I draw, as my lines and text tend to skew upwards if I don’t. I’m planning to collect stick figure and cartoon poses so that I can draw people with more detail and flair.

Because Autodesk Sketchbook Pro is a raster program, I lose some detail when I scale images up and down. Still, the library is great to use for guides or templates, and it’ll grow in usefulness as I draw and save more.

Colour combinations are good to save, too. I like seeing how other people use colour to highlight their work, and I’m gradually getting the hang of it. Autodesk makes it easy to save the colours I like, and there are some colours I find myself returning to often.

I’m also working on creating my own brushes for certain effects. For example, I liked the way some sketchnotes used dotted lines to connect ideas, so I experimented with Autodesk to see if I could make my own. My brush is somewhat translucent instead of fully opaque, but it will do for now. =)

Experiment: There’s so much to experiment with and learn. I’m trying out different ways of hand-lettering, playing around with the letter forms and what feel they evoke. I’m experimenting with colour, line widths, layouts, whitespace, and flourishes. I’m playing around with different ways to learn and summarize information.

I’m a long way off from settling into one style. Who knows, I may end up experimenting with this throughout my life. This is a good thing.

Learn how to use your tools: I also invest time into learning and experimenting with tools. Over the past few days, I’ve been going through the trial versions of Autodesk Sketchbook Designer, Adobe Illustrator, and Manga Studio EX. In terms of pen-friendly computing, I still prefer Autodesk Sketchbook Pro, although I wish I had some of the capabilities I saw in the other tools! I like reading the documentation and watching other people’s videos because I often learn how to work more effectively.

Practice deliberately: And of course, there’s practice. The more I draw, the more comfortable I’ll be at drawing, and (probably) the better I’ll be, too. It’s not just about drawing new things. Deliberate practice – going over and over small things – helps a lot, too. For example, I often fill a page with freehand circles. Then I add eyes, nose, and mouth to each of the faces, playing around with different expressions or trying to get the same expression each time. I also draw lines, as I find those hard to do (my hands are a little shaky). Tracing helps me learn more about drawing, too.

Those are six ways I’m working on learning how to draw better. How are you learning?

The urge to check things off can be a great way to start a new habit. On our recent trip to the Philippines, we found out that packing our vitamin supplements into pill organizers made it much easier to remember to take them daily. I get this compulsion to tick things off in order, to open each box on the right day, to see the chain of empty boxes grow.

It’s a well-known trick, this idea of making habits visible. Jerry Seinfeld says don’t break that chain, and that works wonders. It’s part anticipation and part loss aversion. People use it to pick up all sorts of habits. Mel Chua uses it to get the hang of flossing her teeth, for example. Visible progress is wonderful.

We’re back home now, but I’m going to keep using the pill organizers to keep track of supplements. Let’s see what else might benefit from this idea…

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.

Yesterday’s coding session with CSS was fantastic. I used WinWarden to make my browser translucent, and I overlaid it on my reference documents. This made it a breeze to check alignment, because I didn’t have to use any measuring tools. I used Chrome’s developer tools to manually adjust the stylesheets until things looked right, adding display: block to the parts I was working with. Then I copied the numbers into my SASS file so that it could generate the CSS.

I also found a GIMP script for exporting all layers as separate images. I had to rename a few layers, but the results made it much easier to flip through images instead of toggling visibility trying to find the logos I needed. (It turned out that the logos were not included, so I’ve asked the design firm to send them to me.)

I converted the complex front page into a Drupal panel layout, getting rid of thirteen regions that were cluttering up the main block management screen. This also makes it much easier to update the content, yay! I’m looking forward to converting other pages. The previous developer used multiple regions instead of controlling visibility through configuration, so there are a lot of templates and regions.

Dual-screen worked out great, too, although I still need to fiddle a little with my ergonomics to make sure everything works out.

I’m looking forward to making this even better. I’ve only got a few more weeks on this project, but I might take on more styling in the future if it turns out I can deal with the headaches associated with cross-browser styling.

After I get the rest of the basic requirements in place, I want to automate testing and screenshots, particularly for regression-checking and for cross-browser compatibility. Selenium and WebDriver look like the way to go if I want to simulate hover events. If I can’t figure out how to use WebDriver within the time I’ll set aside for learning this, I can use JQuery to fake toggling the classes. Automated screenshots + PDF Split and Merge + ImageMagick for compositing (maybe 50% opacity?) will make it easy to spot glaring errors.

That will have to wait for next week. In the meantime, there’s a three-day weekend ahead, so I’m going to make lots of progress on Quantified Awesome. Yay!

My current project is so different from the others I’ve worked on. Instead of building logic, I’m doing front-end HTML/CSS/Javascript, working from Photoshop layers and design PDFs. I installed SASS so that I could gradually untangle the long strings of selectors my predecessor left me. Reading the code, I have a lot of sympathy for him. I imagine he felt like a fish out of water with both CSS and Drupal. I’m doing reasonably well. I’m not as fast as I am when working on Rails or Drupal back-ends, but I get stuff done. I don’t feel like I’m floundering in the land of “I don’t even know what I don’t know,” like it was when I was working with Microsoft SQL Server 2000 and IIS 5. This one I can handle. Who knows, we might even turn the project around.

I’m learning more about refactoring code, adding CSS3 styles, using Cufon for typography, and dealing with a large number of small changes. AutoHotkey scripts and Emacs macros have been amazing time-savers. On the AutoHotkey side, I’ve been taking advantage of tools like SmallMeasure and WhatColor.

Emacs makes editing lots of PHP files easy. The previous developer used dozens and dozens of node templates instead of using panels or block visibility, and there was a lot of copy-and-paste code. I started moving common parts to files that I could include, but I wanted to make sure that I didn’t accidentally overwrite something he had customized. I grepped the directory for the strings I was interested in. Then I used a keyboard macro to interactively go through each of the files and replace the common text. Win!

I’m looking forward to making my workflow even better. I’ve got a couple of weeks more in this project, and I might work on other CSS theming things in the future. (Good to encompass more of the development pipeline!) Here’s what I’m thinking of trying:

• Use the monitor downstairs. Keep code on my laptop, and the browser/reference documents on the big screen.
• Make my browser window translucent with WinWarden, and position it so that the browser window overlaps the reference. If I undock the Chrome developer console, that will make it even easier to work.
• Deal with IE sooner rather than later, although IE 8 should be reasonably okay.

Looking forward to it. =)