My client had been bringing me a constant stream of little technical challenges to solve. I pulled together different tools to make things happen: AutoHotkey, NodeJS, shared files, optical mark recognition, and so on. He said it was fun watching me figuring things out. It got me thinking about how programming can involve many different types of creativity. If you can tell the different types apart, you might be able to focus on improving some of those aspects.

2014-09-10 Programming – What does it mean to be creative?

Here's a rough first pass:

• Design: Probably the most obvious form of creativity in development, whether we're talking about interfaces or architecture.
• Imagining or anticipating needs: When people don't even know what they're missing
• Imagining practical applications: Starting from the solution or from an available tool
• Seeing gaps and being curious about possibilities: Maybe related to anticipating needs? More like, “Hmm, what if?”
• Collecting components/capabilities and combining them: API functions, tools, etc. Like collecting puzzle pieces and then being able to dig up the right combination later on.
• Making adapters: Smooshing different systems together.
• Generating variants and other ideas: Coming up with different approaches, or coming up with variations on a theme.
• Incorporating feedback and iterating effectively: Probably related to generating variants or shaping requirements, but also related to getting beyond vague requirements or too-concrete requirements.
• Breaking things down and building a plan: Seeing the components and figuring out a good order.
• Shaping requirements: Translating vague requirements/feedback or seeing past what people think they want.

Hmm…

One of the best things about programming is that as you learn more, the possibilities increase dramatically. Each new thing you learn can be combined with so many other things for even more awesomeness. I’m getting ready for my idea-of-the-month experiment, and I’m thinking about the kinds of building blocks I’d like to learn more about and use.

Android development – I can build small apps for myself
Data visualization library like D3 – web-based graphs
Some kind of Javascript/CSS/Rails front-end toolkit that makes it easier for me to prototype rich user interfaces
Evernote API, so that I can improve my workflow
AutoHotkey – finely-tuned timesavers
Rails 4 – prototyping
WordPress backend – building things
WordPress theming – design
Twitter API, for analysis
Meetup API, for analysis
Google Contacts, Google Calendar, IMAP headers – for analysis
OCR, speech recognition – so I can convert, even at 80% accuracy
Arduino, sensors, and motors – for interfacing with the physical world
Emacs LISP – for personal productivity
PhoneGap – cross-platform mobile apps?
Dropbox API – tools, analysis
Twilio or some other text API – communication

For March, I’d love to dig into Emacs, D3, and maybe Evernote. That way, I can prepare for the Emacs conference, visualize my Quantified Self stuff, and dig into my new brain backup system. :)

Helping people learn is so much fun. I loved teaching introductory computer science. Even though sometimes it was frustrating, it was such a thrill getting people to those "aha!" moments. I speed-read, so it’s easier for me to skim through Google results and documentation to spot just the right function. I’ve made lots of mistakes, so it’s easier for me to debug things than it is for people who are starting out. Sometimes all people need is a nudge in the right direction, a snippet of sample code, and then they’re off. I get such a kick out of it. It’s high-leverage – a little help can go a long way.

Problem decomposition is a key skill: breaking a challenge down into small, motivating steps, identifying the things you need to figure out first so that you can build on top of them. It’s hard when you’re new, and easier when you’ve solved lots of similar problems. I want to get super-good at this, which probably means doing this with more breadth and depth so that we have more building blocks to play with.

I’m figuring out what I like. I like one-on-one sessions and co-working chats more than group tutoring or teaching a class. I don’t mind looking at someone’s screen using Skype. I’m not an expert, but we can learn together, and I’ve been told that my enthusiasm is infectious.

What could this look like, if I folded this into my experimental life? Maybe it starts with informal coworking in a shared space, helping people while hanging out and doing my own work. (I might have a "Do Not Disturb" / "Open for Helping with …" sort of sign on my laptop.) I’m planning to join HackLab.to in March, after my current consulting gig winds up. (I hope the weather will be nicer by then!) More formally, people might book hour-long sessions in a cafe, coworking space, or library, like the way tutors meet with students. I’d get paid in cash (pay-what-you-can) and/or barter. I could offer virtual help, too – e-mail? Skype?

So there’s this idea of code coaching, for those questions that you can’t ask on Stack Overflow or on mailing lists, and for learning not just a specific thing but also the process of learning it. Shall we give it a try? I’m open to inquiries about Emacs Lisp, PHP, Ruby, Rails, JQuery, Excel functions and reporting tools, AutoHotkey, Bash scripting, and other things people might want to learn.

I’m a little anxious about the impostor syndrome, but I should just get over that. I confess up front: I’m not an expert in any of these frameworks, especially since most of them move faster than I can learn. <laugh> (You won’t believe the kinds of things people are building with Emacs Lisp these days!) I’m always going to be looking things up, because I switch between languages and don’t have all the syntax in my brain. I sometimes have to look up how to do basic control structures like a for loop. And I’ll tell you if I don’t have the foggiest idea how to solve something, but at least I can show you how I’d look for it.

This sort of mentoring is an expected part of teamwork. Who’s done this as an independent? Are there things I should watch out for? Will it hopelessly fragment my brain?

Who’s interested in exploring this with me? How would you value it, and how do we test whether it’s worth it for you and me? Jan/Feb’s busy with consulting, but maybe we’ll see what this looks like in March, or we’ll do low-key coaching for starters…

Related: http://news.ycombinator.com/item?id=4857854

“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?

I’ve been fiddling with Quantified Awesome, this personal dashboard that I’m building so that I can keep track of what’s going on in my life and use that data to make it even more awesome. For example:

• Tracking my time helps me make sure work doesn’t tempt me too much, and that I make time for both personal projects as well as connecting with other people. It also helps me improve my time estimates: How much time does it really take to walk to the subway station? How instant are instant noodles?
• Tracking library books reminds me before they’re overdue, helps me collect my reading history, and gives me a greater appreciation for where my tax dollars go.
• Tracking my clothes helps me remember to wear different types of clothes more often, makes it easier to donate items I don’t typically wear, and encourages me to try new combinations.
• Tracking the produce we get from community-supported agriculture helps us avoid waste.
• Tracking stuff helps me remember where infrequently-accessed items are.

It turns out that other people are interested in this too. 21 people have signed up through my “I’ll e-mail you when I figure out how to get this ready for other people” page, and my mom wants to use it too. That’s awesome!

Now I have to go ahead and actually build it so that other people can use it. That’s scary.

And like the way I deal with other scary, intimidating, procrastination-inducing things, I’m going to list my excuses here, so that I can shine a light on those assumptions and watch them scurry away like the cockroaches they are and, if necessary, squishing them with a well-applied flipflop.

• Excuse #1: Idiosyncrasy. The way I work might be really weird, and other people may not be able to figure out what to do.
  • What’s the worst-case scenario? “I have no idea how this works!” I end up with lots of crufty special cases because I can’t figure out how to reconcile different ways of working.
  • What’s the best case? I adapt the system to the way other people work, and I get inspired by what they do. I build a lovely, flexible web app and API.
• Excuse #2: Risk. I’m fine with loading my own data into an experimental system, but if I mess up and delete other people’s data, I’ll feel terrible. Also, they might trigger bugs.
  • What’s the worst-case scenario? Catastrophic data failure, nothing saved.
  • What’s the best case? Regular backups help me recover from any major mishaps, and careful coding avoids more common mistakes.
• Excuse #3: Support. I’m going to spend more time handling bug reports and feature requests, and less time building little things that might be useful only for me.
  • What’s the worst-case scenario? People get annoyed and frustrated because I’m currently focused on other things, like my work.
  • What’s the best case? I get the system to become mostly usable for people, and I use my discretionary time to build more features. People’s requests inspire me to build more stuff and create more value.
• Excuse #4: Documentation. I’ll need to write documentation, or at the very least online help. This means confronting the less-than-intuitive parts of the system. ;)
  • What’s the worst-case scenario? I describe what currently exists, get frustrated because I want to improve it, and end up cycling between updating documentation and improving the system.
  • What’s the best case? I describe what currently exists, and end up improving it along the way. I build online help into the system so that it’s easy to change. There’s a blog that helps people learn about updates, too.
• Excuse #5: Offline access. A web-based time tracker might be of limited use if you don’t have web access often. I’ve been working on an offline HTML5 interface, but it’s still buggy.
  • What’s the worst-case scenario? Early testers try it out, but get frustrated because of the lack of offline access.
  • What’s the best case? I figure out the HTML5 offline thing. Someone else might be interested in building a native app, and we work together on fleshing out an API.
• Excuse #6: Impatience. If I bring people on too early, they might get annoyed with a buggy system, and lose interest.
  • What’s the worst-case scenario? People give it a cursory try, and give up in annoyance.
  • What’s the best case? Early users are extraordinarily patient. We figure out a minimal viable product for each of them – the simplest thing that could possibly support what they want to do. Over time, things keep getting better and better. Also, I build a decent export interface, so even if people move on to a different system, they’ll still have their data.
• Excuse #7: Privacy and control. A bug might accidentally expose people’s information, which is not fun. I also don’t want to have to police the system for objectionable content, considering the thumbnail uploads.
  • What’s the worst-case scenario? Someone’s private notes get accidentally published.
  • What’s the best case? People sign on knowing that I might have bugs, and don’t save any super-secret or inappropriate information on the system.

Okay. I think I can deal with that. So, what are the smallest, least-intimidating steps I need to take in order to get closer to opening up?

• Write a quick test to make sure that people’s data will stay private. We’ll make people’s accounts private by default, although mine will stay mostly-public.
• Make a list of things that people should be able to do right now. (Not including new functionality!) Gradually write tests to nail down that behaviour.
• Make a list of things that people may want to do some day. Eventually set up an issue tracker.
• Enable Devise’s invitable feature so that I can set up accounts for people easily.
• Doublecheck backups.
• Bring one person on. Then the next, then the next…

It will still be better than nothing, it will be a good learning experience, and participation is purely voluntary anyway.

One step at a time.

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!