So for the next few months, all my energy will be going into getting a job and moving our household to NYC while working on crazy CSS animation projects, training under a JavaScript waterfall, fighting SVG bears and the like. It’s going to be awesome. But it’s also bittersweet.

Check out this Pen!

Goodbye Ruzuku

I’ve loved working with the Ruzuku team. Not only did I get to invent and build some UI features I’m still quite proud of, but I feel like I was definitely able to get some Ruby on Rails experience under my belt (including upgrading to the asset pipeline—no mean feat!). Abe, Rick, Miriam, Kamal, and Jackson have been great to work with, and I can say that this was the hardest I’ve ever had to think about leaving a job. But with all my mounting obligations, there wasn’t enough time to also work with the things I’m really excited about and give 100% to my day job. So I’m leaving, making room for someone who can give their all to the company. I’m sure they won’t have to wait long

Leaving Refresh

A few years back I started a web professionals books club. A year later, the local Refresh team stepped down, the entire book club decided to join forces and organize the foundling meetup. It was a powerful experience, and I loved feeling so close to the local community and working with the other organizers! But now that I have a full summer of conferences to speak at, I won’t be in the area enough to be the organizer the Triangle deserves. So I’m appointing local front-end developer and colleague Nate Hunzaker to take my place on the team. I cannot think of someone more enthusiastic about front-end development to fill my seat at the roundtable. I look forward to attending many more Refreshes—when I’m in town!

Rachel Time

I’m taking a few weeks off to catch up with friends and family, play with the technologies I’ve been dying to experiment with, launch a screencast, and test drive my new CSS animations workshop before diving headlong into selling the house and securing a new position. This period of time will be known as Rachel Time, and I will ferociously guard it!

Giving Back and Screencasting

There are a lot of things I’ve wanted to contribute to that I’ve been putting off, but no more! In the next few months, I will be pitching in more with Ladies in Tech, writing for Adobe Developer Connection, and even attempting my own screencast about emerging interactive technologies and NUI’s, digital storytelling, and technical components like web audio, SVG, canvas, and CSS animations. I will call it “Infinite Canvas” in honor of Scott McCloud, who coined the phrase to describe the storytelling potential inherent in the fluid medium of the browser. More on that soon!

Conferences and Workshops

My spring/summer conference obligations this year stacked up quickly. While I’m not making actual money from doing these, at least not enough to pay for my own health insurance, I love the travel involved, meeting new people and old Twitter friends, and teaching something I’m excited about—animations with CSS and web audio! If you’d like to come see what I’m so excited about, check out my current lineup (or recommend me for a conference near you!):

• Webvisions Portland
• Fluent
• Webvisions Barcelona
• CSS Summit

Training under a waterfall

On my monitor is a post-it of things I’d like to make and work on. The list has been growing longer and longer, and I want to spend some serious time making a few of these things come alive. You’ll see them very soon. A few days of focus is all I need. I hope I will dazzle you.

I’d like to finish taking my HTML5 Game Development course and study core programming concepts (so I can argue about functional vs. OOP with the best of them). I’m also taking some time to learn other illustration techniques and dig in deep with the web audio API. Oh, and convert most of my WordPress sites to Jekyll.

What I’m looking for in my next position

I am looking for a new position, but I don’t expect to find the perfect fit right away. In fact, given the few weeks I want to spend on my own projects, I’m banking on not finding Mr. Perfect Job immediately. I know what I want from reviewing what I’ve found lacking in previous positions, and I’m determined to take my time and try to get a better spread of these things in my next one.

I love creating, storytelling, speaking, and teaching, and I’m told that I’ve a knack for all of those. These things are fulfilling for me.

I want to learn more about JavaScript testing and programming in general, and I like working with people who create beautiful things but aren’t necessarily technical (so long as they label their Photoshop layers!).

My Expert Things, the things that I know inside and out, are CSS3 animations, sass/Compass, Susy grids, responsive design, building and maintaining large amounts of CSS, jQuery and intermediate JavaScript.

My Favorite Things, the things I am studying and improving on daily, are CSS testing, canvas, SVG, and web audio. Soon I will be adding these to my Expert Things list. I haven’t added them yet because I’m still in that phase where I’m actively learning enough that I can teach concepts as I master them, and I’m modest. I don’t claim mastery until I’ve sucked the marrow from the bones, and these bones are still juicy to me. That’s why I’m excited about them

I want to work with other developers, and at least one front-end or JavaScript developer who knows more than I do. I don’t mind if I end up in a position where I’m expected to be the expert when it comes to my Favorite Things or my Expert Things, but I want a senior JavaScript developer I can collaborate with and learn from.

So I’m looking for something like that. Got a lead? Hit me up?

Life’s full of compromise

Of course, I don’t expect everything to go exactly as I want it to. If I cannot find a position in New York City that meets my above description, either I will have to compromise on my expectations or accept a position in a different location that does meet them. It’s not the end of the world in either case. All I want is a stimulating environment and a stimulating job. I think that’s reasonable. I’m a good, hard worker with lots of curiosity and good judgement. Now to find others like me in a place I want to be.

Now, almost 18 years later, I feel like I am finally learning to program. Specifically, I’m learning JavaScript. No matter how ace your CSS is, you can’t call yourself a front-end developer without at least intermediate JavaScript skills. But, as a person without a computer science degree, I often feel JavaScript resources are made for people with a much deeper knowledge of programming, like the manual I tried to understand at 10. Now that I’ve found a learning path that works for me, I want to share it with others who might be struggling in their JavaScript education.

Although I’ve written this specifically for other designers who want to learn JavaScript, these lessons can be applied equally as well to other languages by people from other industries outside the development sphere.

(And if you just want to know what books I recommend, feel free to skip ahead.)

Yes, you can (learn to program)!

There are many different ways to go about learning. Some people just need a github account and some free time and they “get it.” I would argue that they have “got nothing.” Like a tourist who thinks they’re a translator after memorizing their phrasebook, they have no grasp of the grammar, best practices, history, or culture they’ve “picked up.” And if they do not invest in their continuing education, they can only embarrass themselves and their associates and have all sorts of misadventures for it.

When I was a little girl, I had a friend who could read to me from our favorite storybook. I went to my mother in tears because I still hadn’t learned to read. Next year, when school started, my friend had to take remedial reading lessons while I performed very well. It turns out she had only memorized the stories in the book, and the trick had hindered her learning to read. So don’t be ashamed if you haven’t “got it” like someone else seems to have. They may be worse off than you are!

Programmers are no different from you or the next person. They don’t have to ace calculus. They don’t have to be “gifted.” There are plenty of “normal” (and abnormal) people in the industry who did not pop out of their mothers’ wombs slinging code.

So how can they do all this seemingly magical stuff with a text editor? How can a seamstress make a gorgeous reproduction 18th century French courtesan’s silk jacquard ball gown with embroidery and panniers? Or how can a world-class chef make a meal so delicious you will remember it even on your deathbed? Simple: education and practice, practice, practice. The seamstress first had to learn to sew, and it was a grueling process. The chef had to work his way up from kitchen hand, also a grueling process. None of these “talented” people miraculously woke up being great at what we admire them for. Even that programmer had to start with a simple, stupid “Hello, world!” program.

The best part is that when you have truly mastered one language, you can pick up others with ease. All languages share the same principles, so after nailing the basics, you only have to learn their differences.

Opportunity, evaluation, and repetition

What separates the good, the bad, and the great programmers? Three things:

Opportunity

You need the opportunity to use code. If you learn a foreign language just for the sake of learning a language but you have no intention of ever traveling or being around people who speak the language, you’ll forget it. So if you want to retain what you’ve learned, make sure you’re going to use it at work or in your daily life.

Evaluation

Once you start coding, you need some way to evaluate what you’re producing. If you work with other developers, you can ask them to help you evaluate your work in code reviews. If you’re working on your own, there are sites like Stack Overflow where you can post code that’s not working and get responses from people who can tell you what you’re missing. Even better, if there’s an opensource project you use, love, and/or believe in, you can contribute to it on github by submitting pull requests. You’ll get plenty of feedback from community authors. Don’t feel foolish about your naivete. Every programmer everywhere has gone through what you are going through, just as all adults have been children. If anyone should be silly enough to give you grief, razz ‘em for it! Razz ‘em good!

Tip: Evaluations are only as good as the people giving them. Weigh evaluations on the expertise and reputation of the people delivering them to avoid being lead astray by know-it-all novices.

Repetition

To retain everything you’re learning, to truly master it, you have to do it over and over. The basics, the for loops, the array literals, the evaluations, these will become second nature to you, like riding a bicycle. If you went through a midlife crisis and ran off to raise parrots on an island for years then had a change of heart and wanted to return to programming, you’d open that text editor and your skills will still be there, waiting for you to put them to use.

Find your learning style(s)

Some people, like myself, learn best from reading. We can imagine most things in our mind’s eye, and we don’t need a human being nearby, answering questions. Others learn best by doing, by handling examples and tweaking code to see what breaks and what works. Yet others learn best by modeling their behavior on a mentor’s. They learn best from teachers and mentorship programs. Somewhere between reading and modeling lies watching, where the student models their behavior via a one-way communication with a teacher, like in a video.

Most of us use some combination of these to learn something new. A good course of study should incorporate equal parts of all of these. You can adapt your approach as you move forward to work with your strengths. But do not ignore any of these learning methods at the start. You may discover you are more adaptable than you thought and that one of them works for you even better than you imagined!

I learn by reading, so my advice is largely skewed in that direction. Others will have techniques that worked better for them. Which is why, if you’ve mastered programming from a code-free background, I heartily encourage you to share your learning techniques and resources in the comments.

Have a pet project

I once worked at an agency with an eager, young front-end developer. This guy had so much energy, he was bursting at the seams! He had all these projects that I, older and “wiser,” knew would never go anywhere. He was most passionate and excited about working on a Pokémon simulator. I shook my head. “One, it’s been done before. Two, you can’t monetize it. Three, it would be illegal unless you arranged (expensive) licensing with Nintendo.” It was a pipedream project to be sure, but he was so excited about it that he wanted to use every new thing he learned to further the project, like generating background tiles with canvas and serving content from a Node server. If he’d just stuck to the projects coming in from our agency, he may never have started learning these techniques, and if he’d tried to learn them outside the context of an exciting project, the ideas might not have stuck.

So come up with something exciting you want to make, even if you (or someone else!) thinks it’s a stupid idea that won’t go anywhere. Don’t expect it to! Very few hit a homerun on the first swing! But you’ll have so much more fun and so much more will stick inside your head if you think of it all within the context of something you really want to do. Every other thought as you learn will be, “How can I apply this to my big idea?”

For me, it was an animation project. Synchronizing music with CSS animations requires precise timing–something JavaScript is not so great at out of the box. In order to get the timing to work right, I had to go down a rabbit hole and learn how JavaScript events are handled on the CPU! I could have read about this over and over again, but without a clear goal, it wouldn’t have been relevant enough to retain.

Grab a study buddy

Nothing will help propel you forward more than having a friend in the trenches. Find someone at your learning level with similar goals and partner up. I’ve unofficially partnered with Paula, aka @thepandalion. We tweet back and forth at each other about the new JavaScript resources we’ve found and gotchas we’ve stumbled over. Without her, I’d be operating in a void with no one to measure myself against but the people I look up to–and you don’t want to measure yourself against them! That’s like a piano student trying to live up to Mozart!

Have people to look up to

The easiest way to keep up to date on a technology is to follow people whose lives revolve around it. Here are some of the people I keep tabs on who help inspire me to try harder:

• Rebecca Murphey @rmurphey
• Dave Herman @littlecalculist
• Garann Means @garannm
• Adam J. Sontag @ajpiano
• Cody Lindley @codylindley

I also recommend following @horse_js. You know you’re making progress when these tweets start making you laugh!

(Psst, I also made a much larger list of front-enders to follow.)

Skip “The Good Parts,” anything on jQuery, and big books

I’m going to speak front-end developer blasphemy and save you a lot of time: Don’t bother reading Javascript: the Good Parts or Eloquent JavaScript. I know these are the JavaScript books everyone will point you to, but they were written by and for programmers, not designers or people just getting their feet wet with programming. These books assume too much, and you can’t begin to understand a scripting language until you understand the basics of programming. There are better (often free) alternatives that will give you the broad foundation you need to build your JavaScript house upon.

Don’t limit yourself to jQuery.

jQuery is an abstraction of JavaScript. If you only learn about jQuery, you’ll be using tricks and techniques to achieve your ends without truly understanding why they work. This means you’ll have trouble implementing some things you dream up, and you’ll get blocked by bugs you don’t understand. If you want to learn jQuery, you can do it after or alongside learning JavaScript. But an education in jQuery alone is not a substitute for a deep understanding of JavaScript. Plus once you know JavaScript, jQuery is a snap to learn, and you won’t struggle with it.

Don’t buy big books.

A sad truth about big books is that they have a deterring effect on struggling learners. You chew your way through page after page of text to find you’ve made only a fraction of a fraction of progress through the entire book. Skip it. The fundamentals of JavaScript are simple when explained succinctly, even to programming novices. (Read the first chapter of JavaScript Enlightenment to see what I mean.) A big book indicates that the author is struggling to explain things elegantly. (Check the font-sizes before buying a slender volume, too! Small fonts can hide a mountain of text. Plus, you don’t want tired eyes while reading about these things!)

Building your programming foundation

Like I said, I’m a book person. For a long time I fiddled with big books on jQuery written by designers and little books on JavaScript written by programmers. It took me a long time to find the right books. It turned out that the best place to start wasn’t JavaScript.

Getting Started with Arduino is written for people of all ages. I wish this had been around when I was a kid! It works best when you pair it with the kit (also from Maker). I picked these up at OSCON in 2012 because Arduino looked fun–and it is! That’s the important part here. It’s fun. You won’t be building your own sentinel robot just yet, but the programming language is simple, the book introduces you to some very easy programming concepts, and you get real-world feedback as you learn: the LED blinks, or it doesn’t blink.

Learn to Program by Chris Pine (also has a free online version) is an introduction to Ruby, my favorite programming language to date. The author wrote this book for young and old, and his voice is bouncy, his examples entertaining, and his logic easy to follow. This book will help you understand more about core programming concepts, so when you run into the occasional comparisons of JavaScript to other programming languages, you’ll know what the heck people are talking about.

When I was ready to learn about JavaScript, I started with JavaScript Enlightenment by Cody Lindley, also available for free online. This is the book to start with for JavaScript. Straightforward, accessibly written, and loaded with examples you can poke at on JS Fiddle to see the concepts in action. This is the book that helped me understand that everything is an object in JavaScript. That moment felt like enlightenment indeed!

Effective JavaScript by Dave Herman is the big brother of JavaScript Enlightenment. It introduces intermediate to advanced concepts. It’s a concise volume with small code examples you can easily follow. Some of the concepts you may not get right away, but each chapter of the book will start simple, offer you something you didn’t know about JavaScript, and stretch your understanding a little bit more. You might need to read it twice, but take your time. Like a ballerina doing her stretches at the bar, you might not feel like you’re getting anywhere fast, but you’re doing your career a world of good with each stretch you take.

As a fun bonus, try out The Manga Guide to Databases, which may be one of the best introductions to databases out there. In front-end development, you’re not likely to build a database, but you’ll probably have to interface with one one day. Taking the time to understand someone else’s craft can help you better appreciate their craft–and your own.

Supplementary Education Options

If you prefer teacher-student modeling, I recommend Bocoup Training in Boston. They often send their trainers to events and conferences outside of Boston, so keep an eye out. It costs money, but the value is excellent. (They also provide some screencasts for free!)

For those who learn by doing, check out the JavaScript sessions offered by Code Academy.

Go at your own pace

Don’t try to plow your way through all these resources. Take everything in doses you can swallow. Ruminate on what you just learned. Go to codepen or JSFiddle and play with implementing the principles you’ve discovered. If something is exciting you, that’s when you want to run forward with it. If you’re uninspired, try something else, a different learning style or a different topic.

Do not make the mistake of beating your head against a wall until you “get it!” I’ve made that mistake before. It doesn’t work. Switch gears, take a different route.

Share what works for you

Have you successfully learned JavaScript from a non-programming background? What worked for you? What didn’t? Sharing is a great way to make headway in your own studies, and I’d love to hear how you’re doing!

TLDR? I gave my talk on CSS animations. Everyone loved it. And then the ocean tried (unsuccessfully) to drown me. I want to go again!

Aloha, Hawaii!

The conference was held at a hotel on Waikiki Beach in Honolulu, Hawaii. It was my first time ever visiting a tropical island, and I was filled with wonder and joy to explore a city where everything was written in both Japanese and English.

I think I’d pick up Japanese faster if I lived in Honolulu.

And I came into my room to find a goodie bag filled with sunscreen and shortbread cookies, exactly what pale Germanic stock like myself needs in a sun drenched tropical location! Best conference ever!

Everything in Honolulu was terribly posh, from the hotel to the eateries even down to the shopping. When I needed to buy a swimming bottom (having left mine at home on the drying rack), I had to struggle to find one under $40. Fashionable retailers like Gucci and Chanel lined the streets and were often air conditioned to the max to allow the sales clerks to wear the heavier, winter style clothing on display.

Behold, the only designer bag I have ever lusted after. Weighing in at $500 from Coach, I think I’ll save my money for a Modbook. (But so, so pretty!)

Eating in Hawaii

On my first night I grabbed sushi at Doraku Sushi with Kristofer Layon and James Williamson.

I had butterfish–which turns out to be cod.

I didn’t have to eat out often because the conference fed us generous lunch buffets of Hawaiian favorites while nibbles and drinks were served in the evening. But on my last day, I grabbed Korean barbecue with Jina and her brother, Ben Callahan, Scott Kellum and Simon Madine. Scott turned out to be a crazy awesome Sass-er like myself. He gave me a lead on a good animation plugin for Compass, which I will be sure to use.

Notes

• I am now addicted to Mauna Loa dry-roasted and sea salted macadamia nuts now. They sold them everywhere in these “ABC Stores” which were like Hawaiian-themed general stores with walls of booze. This was the only touristy thing I bought for myself.
• Sadly, there are mangoes everywhere in Hawaii. I’m allergic to them.

My talk on CSS Animations

It went great. You can find my slides here. I was up against some other very attractive talks, but people I respect like Estelle Weyl and Tab Atkins still came to my talk. Tab even published a working example of steps() in action during my talk to try to help explain its confusing behavior. I still don’t entirely understand why steps behave the way they do. I think it’s one of those things that makes sense to its creators but not the layman. He was very interested in rectifying the issue, which was refreshing. It would have been easy to brush me off as “just that one person who doesn’t understand the beauty of this code.” But Tab genuinely wanted to make this clearer for people like me.

Afterward, when I joined “the big kids” at a lunch table and pressed them for feedback on my talk and its deliver, they had none to give. I did a good job.

Well hot diggity!

Epic Drink and Draw

The conference organizers had asked Kyle and I if we’d be interested in doing some sort of arty/cartoony event at the conference. I suggested a “drink and draw,” an event that is exactly what it sounds like. But it quickly started to grow in concept. When he arrived in Honolulu, one of the first things I asked my co-host when he arrived at the hotel the night before was, “What are the rules going to be?” (And then I put a lei on him, and we grabbed beers from an ABC Store with Pam Selle and Simon Madine.)

We ended up drafting artists from the afterparty crowd into Team Squirrel and Team Crow. Both teams had a few minutes to draw the announced topic, like, “What is Tab Atkins not allowed to talk about?” The audience provided Judges. The winning team got mini comics by yours truly. Team Crow won, of course, but it was only by a single vote! Tough competition! We took victory photos in the photo booth.

Team Crow consisted of: Ben Callahan, Simon Madine, Pam Selle, Charles Silbernagle, and Shotaro Sato (and me!) I’m proud of these guys. *salute*

Party Crashing

Paul Irish is one of those developers I found out about because of Rebecca Murphey. For years I’d been trailing him like a lone, injured wolf trails a herd of hardy bison in a cold winter, or like a lurker silently follows a heated political debate on a message board. So I was caught completely by surprise when I heard him call out to me by my name from behind on my way to the ladies room. (Worst timing ever, Paul.)

That was the only interaction we had. And he gave a talk about “jank” and JS timing that I want to watch every morning of every day until it’s burned into my mind. 

I did get to meet his fiancee at lunch, and then I accidentally crashed their engagement party (no one told me it was an engagement party! We were supposedly meeting up with another group of people–who turned out to be at the engagement party!). Verdict: That could have gone better. I demand a do-over in the future, with no engagement parties or bathrooms.

Everyone was very drunk and I was very near sober and tired and awkward.

Then I ended up going out to dinner with Tab Atkins, Jenn Lukas, Chris Coyier, and Phillip Walton. Jenn got us a decent seat with the waitstaff by virtue of her gorgeous ink. Chris Coyier, who always seemed so straight-laced on CSS Tricks turned out to be a double for Kevin Smith, providing excellent laughs and commentary throughout. Phillip Walton turned out to be that Phil who wrote my favorite article on CSS Architecture.

Catching Waves, Drinking the Ocean

These were the most modest swimming bottoms available in a 5 mile radius of the hotel. I should know. I went on a quest for them!

Sadly, the bay everyone had gone snorkeling in prior to my arrival was down for repairs, but Ben Callahan convinced me to take a group surfing lesson with him, Jina, and her brother the morning after the conference. We had an extremely laid back instructor. The most upset he got was when he shouted at us that we all just needed to “calm down, man.” There were five of us, and we paddled after him into the waves. The trick is to approach the waves head on. If you try to paddle your board parallel to them, they will wash you into the water.

At first I was having a great time, splishing and splashing and flying off the backs of waves. But then I got knocked into the water, flailed about, and drank a lot of sea water in the process. I felt very sick when I got back on my board and my energy started draining faster than Macbook Pro with 100 Chrome tabs open.

We were supposed to hold onto a line, but it broke! We drifted into the white water. Ben made his way back to the safety of the channel while Jina took her lesson, but my arms were nearing exhaustion, and I was unable to keep up. I was almost parallel to a big, white wave coming my way. I did not relish the idea of drinking more sea water and further skinning my knees, so I turned my board as quickly as I could to be perpendicular to the wave and ended up facing the beach with a gigantic wave at my feet. I felt the wave try to dislodge me from the board, and I gripped it with white knuckles. “Fuck you, wave,” I muttered before it shot me across the ocean like a bullet.

I was going so fast I was too stunned to stand up! By the time the ride was over, I was closer to the beach than my group. With my wet noodle arms, I began to weakly paddle my way to shore, taking breaks to rest up. The teacher wailed at me not to abandon the group without telling him again. (He sounded very un-calm.) I waved him off with a noodle.

I nearly collided with a tourist boat. Several dozen people watching as I flailed about in the water trying to get back onto my board. It was then that I realized my greatest fear: I was The Stupid Tourist. I consoled myself that I would never see any of them again.

I have never been so happy to see wet sand before… and never more determined to give surfing another shot!

Eco Tourism with CSSquirrel

On the last day, Kyle, Simon, and I were catching late flights, so we took a trip together to the Waikiki Aquarium. Poor Simon had to put up with Kyle and my bickering over jellyfish and other aquatic things.

Taking a photo of Simon, taking a photo.

I took lots of photos of my trip and the aquarium if you want to see them!

Simon’s from Scotland, traveling out of Germany, and his wife is a museologist (how cool is that? I hope I get to meet her one day!). He gave a very interesting talk about testing CSS which I missed, sadly.

Simon had to catch his plane, but Kyle and I soldiered onward to the Honolulu Zoo in search of their three species of Birds of Paradise, a group of birds I’ve only seen in National Geographic specials and have always wanted to see in person. We only found two, but then we ran into a group of super chill Nene geese!

Then I broke out in hives. I can only assume I’m allergic to tropical islands and can never stay on one for an extended period.

Conclusion

The organizers Christopher and Ari put together a great conference and were really sweet people. I got to meet so many of the people I look up to and respect in person and got to meet many more I’d never have found otherwise. Tab Atkins went from “barely on my radar” to “tag this guy with a radio collar and release him back into the wild.” I feel like I found a long lost brother in Kyle Weems. I definitely want to see more of Pam Selle and Simon Madine at future conferences.

Diversity

There were many women of all types and colors, attendees and speakers (6 out of 20!). At no time did I feel like I was interrupting a boys’ club, and everyone was exceedingly respectful of one another. Japanese and local Hawaiian attendees also brought diversity. On the East Coast, I am only exposed to European web developers and designers. I had a fascinating discussion with the team from Rakuten about the progress of Japanese web design. I will save that discourse for a post about the state of the Japanese web, though! I did feel very sorry that I had not practiced my Japanese more before coming.

Ameen was with a Japanese company. There were many Japanese and Hawaiian interests represented, perspectives I never see on the East Coast!

Verdict

It was the crémé de la crémé of CSS geeks, and I’m honored to have been among those speaking. Most front-end development conferences revolve around JavaScript. It was a relief to attend a conference where my favorite thing–CSS–took center stage. I can’t wait for the next one!

Quick Links

• My Slides
• My Animation
• Photos

• Twitter list of the speakers

• 24 Ways posted my article about Flashless Animation
• Check out my slides from my CSS Dev Conf talk “Animated Music Videos with CSS Animations and HTML5 Audio”

Additionally, you can check out some of the live demos I’ve done directly:

• The Black Brick Road #11
• NyanTuna
• Final “Candy Candy” animation
• “Coming Soon” animation
• “Cat in Byakkoya” parallax animation

Hope you get inspired. Please, show me what you come up with!

(If you want to get right to the demo page animation, here you go. And yes, there’s more to it than that. Click some stuff!)

“I could do that with jQuery.”

When I first got started in web design back in 2008, if you wanted to make something move, you had to turn to jQuery’s animate() function or install a special JS library. My initial aspiration as soon as I started learning JavaScript was to animate a music video. I made several weak attempts before giving up on the idea, including an animated parallax of Hueco Mundo, a setting from the Bleach manga. It should have been easy. How many anime openings have you watched and thought to yourself, “I could do that with jQuery?” (If you don’t watch much anime, the correct answer is most of them.)

But animating with JS is clunky to implement and more memory intensive. I could recreate my Hueco Mundo example using just CSS with a fraction of the code and dependencies of the original. So when your boss asks for some “razzle dazzle,” before you reach for your trusty script tags, consider cracking open your stylesheet first.

Just a sweet Transition…

Use transitions when you want to change a CSS property with a little pizzaz, like fading a new color into a button when a user hovers over it.

Transitions are limited. You can only use them on CSS properties, and you can only use them with:

• The pseudo classes :hover, :active, :focus
• If you use JS to change CSS properties on the transitionable element, be it directly through the addition of inline styles to said element or indirectly through the addition of a class that changes its CSS through the cascade.

Transitions go on the element you want to animate like so:

.transitionable {
  color: red;
  transition: color 2s linear;
}

That syntax is basically transition: $property $time $easing;

You can use delays and chain transitions for some very nice effects. The curious can learn more about CSS transitions over at A List Apart.

To kick the transition off, just change the CSS property you set in the above. Like so:

.transitionable:hover, .js-added-class .transitionable {
  color: blue;
}

Gotchas

• You must explicitly declare the property you want to change in order to target it with a transition. If we didn’t declare that .transitionable { color: red; ...} above, nothing would happen when you hover over it.
• Transitions can’t be run on page load, though. CSS3 animation keyframes will help you there. But transitions need a kick off event to do something.
• Only works with certain properties.

Even Sweeter Transformations

CSS3 can transform an element on the page, rotating it, scaling it, doing something with it, whereas transitions just smooth what would otherwise be a jarring jump between CSS property values. Since transform is a CSS property, you can use transitions to apply transformations. Transformations can be 2D and 3D. I haven’t done much with 3D yet. (I kinda detest 3D animation with the exception of Coraline, which was a hybrid of stop-motion and 3D.)

You can translate, scale, rotate and translate (move) an element.

CSS transformations are special in that they need two properties to work:

1. transform (the transformation settings you wish to apply)
2. transform-origin (the location from which you want to orient those settings–should you fail to provide it, the default value is 50% 50% i.e. “center”)

.transformable {
  transform: rotate(0deg);
  transform-origin: 30px bottom; // works just like positioning background images.
}

Transforming with CSS is handier than using SVG if only because you can set transform-origin: center, whereas with SVG, you’d have to calculate the element’s center and give its coordinates from the top left corner of the element. (Responsive? I think not.)

Gotchas

Transforms don’t effect the flow of a document. The original location is occupied, and elements “in the way of” the new location do not budge.

Animations & Keyframes

Animations are a lot like transitions except they don’t require a state change like a :hover to kick off. They can happen after a set amount of time, on page load, whatever really. While transitions only transition on set properties. Animations can do what they want with any kind of properties, whether or not you’ve declared them.

Animations can use both transitions and transforms inside their syntax. First you declare keyframes:

@keyframes spin {
  from { 
    transform: rotate(0deg); // A CSS transform!
    opacity: 1; // A property to transition!
  }
  to { 
    transform: rotate(360deg);
    opacity: 0;
  }
}

Then you attach them to a selector by name:

.spinner {
  animation-name: spin; // use the name of the keyframes you defined above
  animation-duration: 3s; // required or nothing happens
}

Or shorthanded with all the options:

animation: $name $easing $duration $iteration-count;

There’s an interesting option for $easing called steps. Steps give you a jumpy abrupt lack-of-transition, and their syntax is a little odd. But you can use them to replace animated gifs with sprites.

Animations are actually quite straightforward and DRY. You can define one once and use it many times. More of CSS should work like this, in my opinion. There are many wonderful things you can stuff inside keyframes and do with animations. I’d just be copying this article verbatim if I tried to explain it all here: dev.opera’s Making a Move with CSS3 Animations

Gotchas

• If you don’t specify the duration, nothing happens.
• CSS3 animations work in pretty much everything but IE if you use prefixes.

In demonstration

I used all of the above to make a lovely interactive animation (psst, give the tassel a tug). Please enjoy the surprise, and have a poke at the code! I made all these notes while working on this piece. While these may be covered in the opening of my talk, I’ll actually be going into more detail about the HTML5 audio API than the minutiae of CSS3 easing options. There’s just so much to cover on timing and events!

Check out this demo! 100% gif-free.

Go out there and make something cool!

“I’m sorry,” I said, “but I thought this was for a design-oriented position?”

“Oh, it is. We want a Ruby programmer who can design.”

This has happened more times than I care to admit. I’ve gotten to the point where even if it is a position I want, I don’t take it seriously because I’ve had so many bad experiences like the above. I don’t bother replying to most recruiters, but sometimes one drifts over from one of those shiny companies I would like to be a part of.

But it always goes awry. And afterward, I always blame myself. I blame myself for buying into the the bullshit of the recruiting system.

This has got to stop. Either I need to stop paying attention to recruiters entirely, even when they dangle a seemingly choice bit of opportunity under my nose, or recruiters need to get their act together. I’m going to bestow the benefit of a doubt and assume recruiters fail so much because no one has ever sat them down and told them what they’re doing wrong when it comes to recruiting in the web development industry. Listen up, recruiters. I’m not going to sugar coat.

Don’t tell me you think I’d be a perfect fit. Tell me why you think I’d be a perfect fit.

This is like when a guy is asking you out. He says, “I think you and I would be great together.” Some girls will go for that. But with others, your chance of securing that first date increases if you’ve done your homework and know a thing or two about her. “I think we’d be great together because we both have dogs,” is good. “I think we’d have a lot to talk about because you love Shiba Inu and I used to breed them,” is even better.
When you bother explain your reasoning behind contacting me, I know three things:

1. You know the position. You’ve done more than glanced at a spec sheet. You know what the company needs.
2. You know what I can offer. You’ve done your research on my skills and experience, and it aligns with the above.
3. You’re not a sleazy pick up artist, hitting on every girl in the room. Recruiters have a reputation for throwing everything against a wall to see what sticks. If you show that you’ve taken the time to properly evaluate me for a position, I’ll feel like I have a better chance of getting it, and I might reply to your letter of introduction.

It’s not a “great opportunity!” until I say it is.

“Great opportunity with up and coming Fortune 500 startup in Las Vegas!” Everyone has a different definition of “golden opportunity.” Mine requires working from home, Portland or Brooklyn, and comic books. It doesn’t matter how much money you offer me, unless you can top the hand of cards I’m currently holding, I’m not going to trade in. Instead of blathering on about the company’s funding or work environment, ask me what my ideal job is and then see if you can make it work. Maybe it’s in Las Vegas, but they share a workspace with a comics publishing company or you can arrange to let me work from home two days a week. Or maybe you have another position coming up that’s distributed, and you should prime me for that.

I’m not desperate. I’m not going to roll over in joy just because someone wants to dance with me. Maybe I’m perfectly happy with my current dance partner, or maybe I like sitting next to the punch bowl. Don’t act like I should be overjoyed over your paycheck, ‘cuz I’m not.

You do the work. (I know you’re getting paid.)

As far as I’m concerned, a recruiter is a person who slogs through LinkedIn accounts, firing off form letters for a living. As a person who makes things for a living and grew up with people who labored for wages, I don’t feel pecking at a keyboard entitles you to a meal. So when you send me a little form letter about a “great opportunity!”–or worse yet, “I know you’re not looking, but do you know anyone?” (answer: No, I’m not a dating service.)–I immediately know what kind of person you are. You’re the kind of office plankton that sits idly by, feeling “busy” for having talked on the phone with some candidates you barely know before shunting them off to interviews they’re unprepared for because you didn’t bother to research them or the position. If you’re lucky–and it’s all about luck here, because you surely haven’t applied any skill–the sucker company involved will hire one of them and you’ll get your money. Hooray!

I’m not going to do your work for you, and no self-respecting, hard-working, genuinely busy person has the time or energy to do it for you, either. Research the position and my background before you go in. Spend your time on me. If you think I’m such a great fit, coach me before the interview. If you think I’ll be awkward during the interview, see if you can come in and prompt me to highlight the things I might forget in my nervousness. We’re developers and designers, not marketers. This isn’t the shit we’ve been trained and bred for. The reason teams groan every time a position is filled via a recruiter is because almost invariably the person filling it is all talk and no game. The recruiting process favors people with lots of time and who talk big–losers in our world. You are bringing us losers because you are lazy. (And you still get paid!) Of course we hate you.

Don’t waste my time.

I’m a pretty fuckin’ princess. Everyone wants my time. I have people asking me who they should hire and if I can vouch for others. I have meetups to organize and conferences to attend. I have presentations to prepare, comics to draw, code to write, and interfaces to design. I get generic emails from recruiters like you every week. You all look and sound the same. You come to my inbox with your “great opportunity,” and all I see is hours of my life spent on someone else’s paycheck that won’t get me anywhere further than where I’m at today. Those are hours I could spend making presentations, strengthening my community, drawing comics, writing code, or even just having a lovely evening with my husband and a bottle of cider. When you’re hitting up so many other people and my chances are so low, why should I waste my time on you? Why should anyone?

Don’t look at my LinkedIn.

I’m so busy. I’m so damn busy. My LinkedIn is out of date. I couldn’t find the time to update it unless I was unhappy with my current employment situation (which I’m not, because I’m awesome). And how could I possibly convey the depth of my community involvement, what I’m working on this weekend, or the many connections I have who simply don’t play the LinkedIn game? And why should I play the LinkedIn game myself? Since I’ve been on LinkedIn, not one good thing, not one job, project or connection, has come of it.

If I removed my LinkedIn account, I’d get far fewer contacts from recruiters. The only reason I haven’t removed it already is because I have two a few very nice recommendations on it. But those were from a long time ago, and now I operate in a sphere of people who do not use LinkedIn. We judge each other by portfolios, works in progress, and community recognition and involvement. This is stuff you need to learn to seek out, weigh, and understand, because HR won’t and I don’t have the time to lay it all out for you since I’m so busy and so happy.

To cut down on the amount of trash connections and recruiter emails I get, I’m thinking about shutting down my account. Then recruiters would have to visit my site and send me an email through my contact form. Then I could rest assured they’d at least seen my handiwork.

You shouldn’t need my résumé.

As I alluded to above, the best people are often happy at their jobs because their employers try hard to keep them happy. If you want to hire the best people, chances are they’re not preoccupied with keeping their résumé and LinkedIn up to date. They’re probably all blissed out on some code and company-provided beer. The only people who are going to make your job easy on you are the green horns and the fuck ups and the happy accidents. You’ll have a hard time getting anything current out of a happy, hard worker. So do your own sleuth work first.

Bypass HR and office managers

Some companies and/or recruiters think they can “sort the wheat from the chaff” by sending candidates through HR or an office manager to make sure they have a pulse and tick off the right number of boxes on the “skills chart.” Don’t do this. You’re wasting my time (see above). I know how to talk to developers and artists, not normal office people. I’ve heard of team leads going out on a limb to retrieve excellent candidates HR rejected. These people are not qualified to judge the talent you’re looking for, nor are they an appropriate middleman between the department and talent. Stop being lazy and sort the sheep from the goats yourself. When you have a winner, do everything you can to bypass the office plankton and get them to the people they’re going to work with.

Your reputation precedes you.

You guys need to stop making each other look bad. Every time a recruiter messes up any of the above, it makes the prospective employee much less likely to respond to any recruiter’s advances. You’re all the same to us, be you corporate monkeys or guns for hire. You’re remoras, attaching yourselves to the Great White Shark of our skills and availability, hoping for scraps. You need us. So stop dicking us around and be professionals. Do your research. Do the work.

Afterthoughts

Rachel, you should be happy anyone is approaching you about a job in this economic climate! I can’t get a job

I worked at a place where we had CSRs and a development team working on the same floor. They’d drag us into the same room to give us the bad news after a bunch of layoffs and tell us how lucky lucky lucky we all were to still have our jobs in “this economic state.” Afterward, my teammates would complain of having wasted their time, which was costing the company a small fortune to use for a one hour pity party aimed at guilting everyone into working longer hours.

Our jobs are safe. There is no job crisis for us. If you’re having an employment crisis, you’re either in a different industry or doing something wrong (see also attitude and/or aptitude). Recruiters need to remember that not everyone is fresh out of college or caught up in a wave of economic despair. You have to handle happy, well-employed people differently from the desperate and disconsolate. Otherwise, you’re wasting our time. Which, last I checked, is worth a lot more than a recruiter’s.

Hey, I’ve had great experience with recruiters! You’re off the mark!

Do tell! But first, consider that usually companies turn to recruiters when they:

1. Have shit where they eat so much that anyone who knows they’re hiring stays away.
2. The job is so terrible/menial/cursed no one internally wants to fill it.
3. They’ve not bothered to ask their employees to find someone or
4. Their employees know better than to drag one of their colleagues into point 1 or 2 (and are probably considering leaving as well).

There is a fifth:
The company is growing so fast that they’ve exhausted local talent and have to start pulling in people from other tech communities. If, on your first day of work, your coworkers don’t look at you like a broken racehorse being lead to the glue factory, you’ve probably fallen into this category. Congratulations!

Otherwise, I suspect, I deeply suspect, You’re Not All That. Recruiters are notorious for misleading managers who have no idea what their teams actually need, thus providing under-experienced or socially unstable coworkers. There’s a longer period of adjustment for you to be accepted by the herd, and if you’re a Total Wreck, you will feel alone and outcast until you finally return to that recruiter and beg for a “change of pace.”

I am a recruiter, and this sounds awful. What can I do to get better?

Specialize. Don’t place marketers and tech people. Go to the meetups. Buy us a beer or a round of nachos. Take a few classes. Learn to talk the talk, and crack open a text editor from time to time and make something. Don’t saunter off into a corner to be with Those Marketing Guys and giggle about the nerds. (If you want to work with those people, specialize in those people and leave us alone. We can smell your disdain and ignorance. It smells like bacon.) Be like the cheetah, walking casually through the herd of ambivalent gazelles. They know you aren’t one of them, but they respect you (and know they can’t get rid of you).

But above all, do your research.

When I was a teenager, I had a litmus test for suitors. I had a successful web comic, business cards with my comics on them, mini comics in local bookstores–comics were a big part of who I was, and I was actively flaunting it. If, on the first date, said suitor failed to ask me about my comics or take an active interest when it came up, there was no second date. My reasoning was that anyone who wasn’t into me enough to do his homework wasn’t worth bothering with when I could spend my time on my next graphic novel. You’re that guy. Don’t screw it up.

(“That squirrel guy” is Kyle Weems of CSSquirrel notoriety.) Now, I’m trying not to squee too much here, but look at those speakers: Chris Coyier, Paul Irish, Estelle Weyl, Dan Cederholm, Jonathan Snook… I have read books by these people. I have two words for you: performance anxiety.

I’ll be showing people how to make a Music Videos with CSS3 and HTML5. You might have seen my messing around with various assets over at dribbble. That’s the hard part. The assets. I know what I can do. I have it storyboarded. It’s making and getting all the graphics in one place–and then showing people how I’m manipulating them in the browser. I’ve never given a talk like that before, so I’ve been studying Lea Verou very closely.

I have three four questions for you:

1. What should I know about Hawaii before visiting? I’ve never been there before. I’m not staying long.
2. If Kyle and I did a joint session/project/something, what would you like to see us do? A cartoonist duel? Rapping battle?
3. What ways have you seen people show intense in-browser graphics alongside code?
4. The CSS I’ll be writing live will have a lot of vendor prefixes. But I want people to see the CSS3, not the browsers! Should I use Compass mixins or -prefix-free? Compass would be more interesting for people learning about CSS precompilers and would help me demonstrate just how many vendor prefixes this sort of thing takes. But -prefix-free would help keep people focused on the structure of the CSS–and how it should look in upcoming years.

I have to go finish that walk cycle now… and start building the stage.

Note: These pictures were taken with my Nintendo DSi XL because whenever I take pictures with my camera, its battery runs out in a few hours. I figured low resolution pictures were better than no pictures, given my need for visual memory aids.

World Domination Summit

WDS was something I and my Ruzuku teamies were looking forward to taking on together. I went to Portland a week ahead of time to set up my apartment and prepare. Unfortunately, two days before the conference, I got sick. Really sick. I did my best to fight off the summer cold and protect others by obsessively washing and disinfecting my hands. I even refused to shake hands, because haven’t we all gotten the con crud from that one guy who swears it’s just allergies before clasping your hand in his moist mitts? I did not want to be that guy.

WDS kicked off with a huge street fair. These people are crazy!

Chris Brogan, a sort of Super Geek Motivational Speaker who I should probably have heard of already, gave a talk about drawing power from our super heroes. He dropped so many super hero in-jokes, I think only about 10% of the audience got them all. But that 10% was tickled pink, and I was proud to be among them.

I met Yoshiko, a game designer from Japan working in LA. She was possibly the coolest person I connected with at this conference. I knew she was awesome when I saw she’d drawn Mami (from 魔法少女まどか☆マギカ (Mahō Shōjo Madoka Magika) fanart on her iPad. We attended one after party together, but I was so sick and sniffly, I’m afraid I was a poor social partner. Had I been of my right mind, I would no doubt have stuck to Yoshiko like glue and had many adventures. I can only hope that our paths cross again! (And given how things in my life always repeat themselves, that is not unlikely.) Yoshiko was truly kind to stick with me so much while I was under the weather.

This was me for the entire conference.

I craved both steak and cookies all the time. I blame the cold.

It wasn’t until the last night in the Crystal Ballroom when everyone started wearing their “geek shirts” that I was able to pick out fellow web developers. One of the first shirts I recognized had a big microformats logo on it–and it belonged to none other than Tantek Çelik! Of course, the music was far too loud and I was far too sick to squee and ask him all the questions I had. So I shuffled away and felt bad that I finally got to meet a celebrity in my world but was unable to do more than get his moo card. But it is a moo card I will treasure!

The ballroom was an utter mad house. The floors would bounce and pop. I thought we were breaking the floor, but it turns out it had been built for competitive dancing, and ball bearings had been placed under the boards on purpose.

OSCON

I thought I would have to skip expensive OSCon until I realized I could get free access to their expo hall. I got there just before everyone started shutting down and was able to get some neat books and meet some new people. I even ran into one of my favorite coworkers from my first big job at BBH Media!

OSCON’s expo hall was a lot of fun, and I enjoyed going through the books at the O’Reilly kiosks. But, as a front-ender/UI engineer (I come up with interfaces to help users do things and then I code them to life), I felt like there wasn’t a whole lot there for me. Most of the booths and kiosks were oriented toward server and operating system technology. For instance, I would have expected to see a presence from WordPress, jQuery, GIMP or Inkscape even–but the technologies were definitely skewed toward Big Backend Software (and databases). I did my best to rustle up something interesting–and I sure did! (Aside from the bottomless Ben and Jerry’s freezers they kept in the middle of the hall.)

Tyler Ortman is an editor at No Starch Press, the publisher that translates and publishes the “Manga Guide to…” series of books. Here he is holding my copy of “The Manga Guide to Databases,” which I got him to sign. It was a good book and a bouncy introduction to databases. He told me that one college teacher of databasery has replaced his textbook with this book. I can believe it!

There was a strong women’s presence at the conference. There were even tables marked off for women to get together at. I wondered what exactly such tables would achieve, but I met a number of neat women while sitting at one, so I suppose it was a wise decision on the organizers’ parts!

Oh yes, I bought these. Call it an impulse buy. This was the sort of thing I just yearned for as a kid. Sometimes, I like to pretend I’m a kid again and buy myself toys. This Arduino kit is one of them.

I met O’Reilly’s Karen Montgomery and Edie Freedman. They were at a big display about what we can do, as developers, to help endangered animals. You can learn more at oreilly.com/animals

They brought the Maleo to my attention and encouraged me to seek out the Bronx Zoo’s Maleo project directors.

There was at least one kiosk with a front-ender spin: Temboo. Temboo is a collection of out-of-the-box API’s you can snap into place. I rarely use API’s, though–not that I’m avoiding them, there’s just not much call for them with the sort of things I implement at Ruzuku. I should probably work on that. So maybe I’ll find something useful or inspiring there, too?

Portland’s Web Development Scene

While in Portland, I wanted to check out the area’s native wildlife and web dev scene. My husband and I are serious about moving here some day, and I wanted to make sure that there was a community for me to leech off of give back to. I had a blast going to meetups of WordPress developers, UXers, Rubyists, and feminists. But I noticed a lack of strong front-end development leadership. Are there no fronties in Portland? If not, mayhaps the is a void I can fill!

I finally got to meet some people I’ve known on the Internet for some time, like Michael Fields (my favorite WordPress developer) and Eric Mann.

Robert Pitts with illustrator girlfriend Lindsey Morris at Pix, grabbing a late night bite!

I had a huge breakfast at Jam with Nicole Ramsey! She’s one of those super women who codes, has kids, rides a motorcycle, and still finds time to scarf hashbrowns with a complete stranger from Twitter. Mad respect.

I also had tea with Teri Solow at the Tao of Tea, and she gave me this great advice about recursion which one of her professors gave her (it was so great that I wrote it down in my moleskine right then and there!):

1. Make progress (it needs to do something)
2. Stop the madness (it needs to have an out, a way of stopping)
3. You gotta believe (that it just works–Parappa style)

Amy Farrell and others eating Mexican and grabbing beers after Code-n-Splode. Code-n-splode is like “stitch-n-bitch” but for women developers.

I used calagator to find where all the cool events were happening. I attended the “PDX Women in Information Technology Happy Hour” which was swarming with recruiters but also had a number of DBA’s and fresh, entrepreneurial faces. But Code-n-Splode was my favorite women-oriented event. Being there made my eyes sparkle with “I want to be as cool as you are!” I am attempting to maintain contact with the group over IRC. (EVEN JQUERY COULD NOT GET ME TO USE IRC. But that’s for another post…)

The Verdict

Portland is awesome on so many levels, from the Japanese book store and taiko classes to the abundance of high quality tea to the bustling comics and zine community. It has a strong development scene with a great number of active, strong female developers and engineers. I could see myself wedging in there quite nicely. Coming back to Raleigh, I realized just how lonely and bored I’ve been here. And now I have a better idea of why. The husband agrees. Portland is in our future.

What is BlogHer?

BlogHer is the largest conference for bloggers in the world, and the vast majority of the attendees are women, although recently token men have been spotted. BlogHer was founded by three women in 2005, and with each year it grows larger and larger.

When I visited BlogHer, it felt otherworldly. I was adrift in a sea of women who write online for fun or profit. They all use blogging software yet few of them know HTML or CSS. Surrounding us were businesses and interests thrusting bags of swag and free cocktails at us, hoping we would put a good word in to our readership.

I imagine this is how a politician feels being courted by lobbyists.

BlogHer Demographics

More than half of the participants weren’t white. Looking across the room, you could literally see that it was true. It was a good feeling, especially after attending so many development conferences where the overwhelming majority of faces are white and male. However, that says a lot about who builds the Internet and who writes the Internet.

Attendees ran blogs focused mostly on family, thrift, or food, (aka mommy bloggers, coupon clippers, and foodies) with a smattering of other topics. My blog is one of those “other topics.” The common ice breaker, “What do you blog about?” was hard to answer without risking boring my companion, so often I’d say something like, “I write about crafting sites with HTML and CSS, and I used to make comics for a living.”

My Panel

One of the slides showing all three panelists’ artwork.

I headed a panel called “Telling Stories with Pictures: Incorporating Graphics, Cartoons, and Iconography.” You can find a live-blogged transcript at the BlogHer site. My co-panelists were Shalini (said like “colony”) Miskelly and Jessie Oleson. Shalini runs a blog where she uses stick figure cartoons to illustrate points and Jessie runs a blog (turned book!) about baking where she uses illustrations to stand out from the crowd.

Thanks to @cadmium_red for taking this picture of the three of us.

This was probably the best panel I’ve done yet. The BlogHer organizers did a great job of choosing my co-panelists. We nailed down what we wanted to cover ahead of time, and I tossed together some slides using our illustrations, a new slide for each topic. We didn’t have the attendance of some of the other panels at the conference where attendees had to sit in the aisles, but we were up against some class acts. In fact, I was disappointed when I realized all the panels I was circling on my schedule were opposite mine! But we had a full room, and those who attended brought excellent questions and were quick to laugh at our jokes.

JC Little did this cartoon of us on her iPad while we talked. She was doing all kinds of neat cartoons of panelists at BlogHer.

I heard from three people that it was the best panel they’d seen at the conference, and one person even said it beat out the panels she’d seen at SXSW and Geek Girl Con. High praise indeed!

• Jessie’s recap of the panel
• J. C. Little’s take on the panel (the attendee who drew that cartoon!)

Other Speakers

President Barack Obama opened for us over Skype (watch Barack’s address on BlogHer) and basically recapped all the things he’s done for women during his term: Fair Pay Act, free birth control (so wish we had this when I was single and struggling to start my career), repealing Don’t Ask Don’t Tell. We stomped and cheered. For about two hours afterward I was still giddy. BlogHer tried to get Mitt Romney to come, but he declined.

Martha Stewart and Katy Couric also gave keynotes. Both were inspiring, and I especially enjoyed hearing Martha’s description of cobbling together and ruling her empire. And then she gave us all subscriptions to all her publications on the iPad. A show of hands revealed that half the audience had iPads. (Since I do not, I gave my subscription to a friend who did.)

Martha Stewart is also launching a new line of home office supplies (sadly, not in colors I use!)

The Tech Scene

I met very few tech bloggers, designers or developers, but I did meet one web designer from Brazil, Ludmilla or @juicysantos. On Saturday night we went out for drinks at the Warwick, a hotel I stayed at as a child. I had a great time meeting her, talking shop, and learning how small businesses survive in Brazil.

The Expo Hall was also a source of many tech demos, and I managed to find a number of exciting things such as…

This television from Samsung can recognize motion via a sensor on top. You can play games and change channels just by waving your hands. Truly I felt like I was watching the future as an old woman played Angry Birds without a controller.

A bath tub that massages you by amping up the bass. No, seriously. I wish they had live demos.

Neato, a Roomba-esque floor-cleaning robot. This little robot looks a little clunky, but it seemed effective. It uses a laser to scan the room and chart a course. The variety that cleans up pet hair looked very interesting, but alas, their giveaway ended that weekend, and I was too late to enter. Could definitely use one, ha!

Even more Samsung goodies. I came back to this area a lot. I really like Samsung products.

I came back to the Samsung booth so often I eventually won a Samsung Galaxy S III! It’s my dream phone! But I promptly had to sell it online because it doesn’t work with Virgin Mobile’s pay-as-you-go plan. I’ll just use the proceeds to buy their iPhone 4S. It’s a pity that the carrier limits the model in this country. In Russia, I’m told, you buy your phone and your chip separately.

It wouldn’t be a geek fest without caffeinated candy, now would it? I was free to help myself, and I did so with gusto.

I enjoyed many of the tech demos and kiosks, although I wished the booth suits had more technical knowledge. (How does that Samsung motion sensor work? What platform is it? Dude didn’t know, but was sure my kids would love it! (I have no kids and will never have kids. End comment nesting.))

Marketing to Women

Although I was excited about the connectivity Samsung was showcasing and interested in what Verizon and Logitech had to show for themselves, I was disappointed to see so much “shrink it and pink it” going on. What’s more, I was surprised how well some of it seemed to work–at least at gathering a crowd.

The Logitech booth was giving away manicures…

…which somehow related to their pretty new line of keyboards and mice?

Almost all of the charities appealed to mothers with phrases like “the power of motherhood.” As a child-free woman, I felt left out.

At least there were events for singles and LGBTQ women, but I was reminded of this comic by Erika Moen (whom I just met in Portland):

Are we, as people, solely identified by our genitals, who we use them with, and how many offspring we’ve had? Does it eclipse all other interests and accomplishments?

I’ve been to many conferences where white men were the majority, but never have I been made to feel more like a walking uterus than in the Expo Hall at BlogHer. I don’t blame the conference so much as the companies sending representatives and advertising firms designing booths. The BlogHer organizers did a great job promoting diversity on many different levels, from reaching out to niche bloggers to organizing swanky mixer events. But if you were to judge the conference solely on the contents of the Expo Hall, you’d be hard pressed to imagine it wasn’t the mommy blogger’s version of Dragon Con.

In Conclusion

Even if I was somewhat bewildered about how to interact with so many women, freshly loosed from their domestic and professional obligations and given a heavy dose of free alcohol, food, swag and glowsticks, I was able to find my groove and meet many wonderful people. I got to room with an old fan of my comics, have Harley Davidson and pedicab adventures with one particularly tenacious mommy blogger, discuss political action in line next to both a liberal and a conservative political organizer on two separate occasions, watch a fashion show of all different shapes and sizes (which led to a lost phone adventure which further proved the Inherent Decency of Humanity). I did a lot of things and met many kinds of people I never would have before, and that’s what made this a great experience.

Me posing with the most awesome geek ever, Twilight Sparkle, at the Hasbro party. Is there a better picture to leave on?

Women in UX Panel

The panelists were Jessica Ivins (pronounced EYE-vans), Jen Myers, Gemma Petrie, and Alaina Kraus. I was very excited to be working with these women. On Thursday I had lunch with the panelists to review topics and get to know each other. On Friday we had the panel during a lunch session. It was a very exciting talk with the panelists and audience eagerly engaged in conversation. Much of the audience was curious to know how the panelists got started in UX, with one member of the audience wanting to know if a degree was worth the investment. (Answer: Not necessarily.) On the topic of salaries so many hands popped up in the crowd that we couldn’t get to them all before moving on to work life balance, where Jen took the lead. Turns out that balancing children with work is a complex task, one which afflicts both men and women. Interestingly, from these discussions with the audience, panelists, and one or two men at the conference, it seemed to me that women seem more likely to leave the workforce when they have children, especially if their husbands earn substantially more than they do. Sometimes it makes more financial sense for the mother to take care of the child than for her to maintain a job while paying others to care for her baby. I think of these women as the canaries in the coal mines–representatives of family life under assault from established–and often unhealthy–American work habits and outlooks. We did not have the time to go much further, but an older woman in the crowd, one Ms. Susan Shapiro, Associate Professor of Psychology at Indiana University East, took the mic and said in a voice soon choked with emotion how lucky our generation is to be able to make choices. In her day, women could be fired for getting pregnant. That was it, the end of the line. Certain jobs were for “men only.” Talking to her could only inspire one to fight to maintain (and in some states expand) the freedoms which women in this country have so rightfully earned. The audience was moved. I truly wish I had been able to spend more time with this woman. She was a wellspring of knowledge and a great personality. We only had the smaller part of an hour, and afterward, much of the audience lamented that they wish we had had two or three hours to fill.

The Women in UX panel in progress. From left to right, Jen Myers, Jessica Ivins, Rachel Nabors, Alaina Kraus and Gemma Petrie. Photo kindly provided by Erin Faulkner.

Resources for women in UX and technology

• Girl Develop It A great organization for teaching women how to code. I wish there were a chapter here (hint hint)!
• High Visibility Project Post a video and share your story.

Wabi-sabi lightning talk

There were lightning talks in the evening, of which I gave one on wabi-sabi, the Japanese concept of “imperfect beauty.” It got some great tweets, so I suppose people liked it!

@crowchick Great presentation. I felt truly small and yet freed. Simply perfect.

— Jessi Sparks (@jessisparks) June 1, 2012

You guys, @crowchick's talk on wabi sabi just gave me chills #MWUX12

— Denise Philipsen (@theguigirl) June 1, 2012

word. RT @laurentgc: You can't buy wabi-sabi at pottery barn @crowchick #mwux12

— Adam Schweigert (@aschweig) June 1, 2012

People, Talks and Events

Responsive design was a major theme at this year’s Midwest UX. Many of the talks I went to were sure to factor it in to any discussion of process. Generally, I think everyone is still uncertain how to make the best of this new tool, but I expect the dust to settle by next year. Responsive images were not brought up once, thankfully.

One of the reasons I was so excited to come to MWUX is that so many people I know on Twitter were going to be there, people I’d never met before in person.

Brad Colbow, my official rival and fellow comicker/designer/developer person thing, gave a talk on “Building a Design Culture.” I was happy to hang out with him on Thursday and Friday nights at the event mixers. I was disappointed how few random people had heard of him before, but happily, most could recognize his comics! Brad’s a cool dude, and I am pleased to acknowledge him.

I got to see Jessica Ivins’s excellent “Shrink It and Pink It” talk about common follies in designing for women, a talk I had heard on the SXSW podcast but wanted to see in person (which you can listen to here).

Samuel Bowles talked about pair programming/designing , “Extreme Design,” made me wistful. Our developer often does not have time to pair with me, which can be frustrating for both of us. I’ve always enjoyed one-on-one time with developers. It’s sad to be without one for most of the time, and I would say it’s my one major complaint at my current workplace. I make up for it by learning UX from our founders and aggressively attending local Ruby on Rails and JavaScript meetups.

Day 2 I slept in a bit because I got up at 5am the day before, not realizing that “sign in starts at 7:30″ doesn’t mean “arrive at 7.” (I was probably running on fumes from having worked through the weekend to push a branding feature to Ruzuku before pitch day.) But to my chagrin, if I had come in earlier on Saturday, I would have been able to help myself to some free Rosenfeld books. It was a facepalm moment when I found out.

I was soon soothed when Joe Sokohl gave me a book at the end of his session on “Mitigating Loss in the Ethersphere,” which was set to a Pretenders soundtrack and a welcome break from wireframes and flowcharts.

A spontaneous trip to the art fair with Jen, Jessica and Lindsay Moore (who recognized my boots as Fluevogs on the way in) meant that I missed Brian Yeung’s lunch session about multiscreen interactions. This was a painful miss as he covered the Nintendo DS, which you must know is my pet mobile device.

Giles Phillips, Director of UX at Brightcove, showed how he uses a post-it system to map the evolution of user needs in “A Lifetime of User Engagement.” I found his technique extremely applicable to my user interface design workflow and made sure to tell him so at the end of his talk.

The last talk I distinctly remember was Boon Sheridan’s “Designing for Disagreement,” which was a hoot and a half. I was looking forward to meeting Boon in person after many years of Twitter fellowship, but he kept getting washed away by hordes of raving fans. Boon has a great sense of humor and strikes me as the “Kevin Smith of UX” (whereas Nick Finck is the “Warren Ellis of UX”). Luckily, I did manage to go out to dinner with him and Jen Matson, who is the new force behind Amazon’s Seller Central (which I have been using to liquidate my old gothic CD collection). I look forward to seeing her work in action! (She also had a hilarious trip-down-memory-road talk about how most of the design “challenges” we face today are not that different from the ones we faced 10 years ago! Woman has experience.)

Other cool people I met and general wish I had spent more time with.

• Elias from UX Mag who I only got to eat lunch with once
• Jacki who was fabulous on many, many levels
• Ben Callahan and Drew Clemens from Spark Box, who Brad introduced to me.
• Charlene McBride, coauthor of Sketchnotes Fieldguide
• Christian Manzella, UXer with Lowe’s

UX vs. UI

This conference drove home the difference between user experience design and user interface design for me. I have definitely been doing more of the latter than the former these days. I do not engage in the kind of prototyping, wireframing and testing that UXers do, but I do employ many of their techniques–but just as often as I’m digging around inside Rails or optimizing a tooltip function to get a fade in just right.

UI design is where front-end development meets UX. The more UX techniques you employ when designing a user interface, the fewer dead ends you’ll hit during implementation. Once you’ve triangulated the interaction that best servers your users, you can dial it in with polished JS and design instead of feeling it out as you go. Currently, I am no UXer. I do not spend my days surrounded by prototypes and post-its. I participate in user testing, I guide prototype mockups, I even provide sketches of how I see some things working, but most of my time is spent in the trenches with JavaScript and CSS. Soon I will be taking up more of the UX work at Ruzuku, so I’m glad I had the chance to see what techniques other UXers are using.

Fashion

So many people complimented me on my blue dress after the panel and talk on Friday. It’s the Monique from Heartbreaker in peacock dimensions.

I was poorly prepared for an unexpected cold snap, but made do for day 2, pulling together some jeans, a scarf, my sister’s hoodie, and my Fluevog “Earl of Warwick” boots. I looked a bit like a pirate, arr!

Me in pirate gear with Jen Myers and her daughter Elizabeth. Photo kindly provided by Erin Faulkner.

I’m not used to seeing so many well dressed people at conferences! I wish I could have taken some pictures of them, but alas, my phone’s batteries prevented me from capturing any UX haute couture.

Lessons learned

It was a great trip, but not perfect. But they say mistakes are worth making so long as you learn enough not to make them again.

Panels

This was my first time moderating a panel. Given that, it went very well. But there were a few things that could have made it go better.

• Have a panel backdrop. I didn’t realize that there would be a projection behind us that I could use to show, say, a title card listing each of the panelists and their Twitter ids.
• Spend less time on intros. I wanted the audience to get a feel for who the panelists were, but we really didn’t have the time to spend on such things.
• Give a mic to the crowd. Having an extra mic made taking questions from the audience a lot easier. There was a lot of mic passing as there were only two mics in the room. We made it work, though.

Talks

People kept telling me how much they liked my wabi-sabi talk, so I assumed it was a smash hit. However…

• Ask how you did. I didn’t think about this one until after I was in the car, heading home. When someone says, “I loved your talk!” you should ask them what they liked and didn’t like about it. I was just relieved to hear it was well-received, but I should have been more attentive to gathering feedback.
• Don’t rely on cards. What feedback I did get suggested that I was at my best when I let go of my cards and spoke offhand about the slides as they were presented. I seemed “intense” and “very passionate.” I have a habit of over-structuring things. I will try to practice future talks without cards.

Travel

I did many things right on this road trip. Iced tea was plentiful, Sense and Sensibility was loaded into the CD player, and I even had six dollars in ones for toll fees tucked into the passenger’s seat. But two major complications did mar what would have otherwise been a pitch-perfect travel adventure.

Midwest UX was put together very well. The location, the Center of Science and Industry (COSI), was professional and spacious. Many attendees brought their spouses and children, who would spend the day exploring the exhibits. The catering was delicious, high quality, and well-timed. (Bonus points for providing hot water and tea bags.) The conference badges and goodie bags were carefully planned. There was always a panel I wanted to see or a lunch event or afterparty I wanted to attend. In short, the organizing committee did a fantastic job, and Midwest UX is the best conference I have been to yet. I cannot recommend it enough to UX designers and even to non-UXers: Seeing real UX at work will invigorate your process and inspire you to build better things. And isn’t that what we’re here to do?

If I have gotten any names or events wrong, please do correct me. Although my notes were copious, I am faceblind and was without a camera and sleep deprived. If I’ve made a mistake, please do point it out!