IE9, JQuery/JavaScript, and broken select boxes

I hope nobody else has this problem, but just in case, here’s the thing I had to diagnose this afternoon: a few select boxes (those things that drop down a list of options and you choose one) were immediately closing themselves in IE9, which prevented changing their options. It only happened in IE, but I noticed the same elements were causing strange behavior in the Chrome developer tools—computed styles couldn’t be expanded, the attribute checkboxes were flickering, and the JS console was slow and stuttery when opening it with ESC). That behavior tipped me off that there was probably something strange happening in our code, not just in IE. Turns out that to automatically check a text input for matching content in our database, someone had implemented a jQuery function to run every 250ms, and that’s somehow interfering with the select elements. It’s not solved yet, so look forward to an update after I find a solution that (hopefully!) keeps all the functionality intact.

Update: I was unable to find the real cause of this problem. I worked around it by checking for a text match only on blur (when the text input loses focus, i.e., you click or tab away from the input field). This solved the problem, and had the side benefit of reducing the calls to the server, particularly because using JavaScript’s setInterval meant the function kept being called, even after the modal dialog had closed!

Berlin Geekettes: Women in Tech panel, part 2

Oops! I was in such a hurry to post the video yesterday that I didn’t realize it was only the first half of the talk! Here’s part two.

Berlin Geekettes: Women in Tech panel from Campus Party Europe

Here’s the video for the Berlin Geekettes panel I spoke on last Thursday at Campus Party. I hope the sound is ok; the acoustics of the space left something to be desired.

Topics of discussion include stereotype threat, “having it all” and what success means, and how to get more women involved in tech.

EDIT: There’s a second part to this video, which can be seen in my next post.

I Am Rails (And So Can You!) at RuLu 2012

I don’t know if the video from Campus Party Europe is up yet, but this from when I gave the same talk at RuLu in June.

Ordering CSS pseudo-elements (and pseudo-classes)

Look out for the order you use CSS pseudo-elements in, or you may not get the results you want. Today, I found that using li:before:first-child doesn’t work to style the :before pseudo-element on my first li, but li:first-child:before does.

Rather than chaining together the way something like .title.example (which would select element with both classes “title” and “example”, regardless of order), the pseudo-element order matters. So li:before:first-child is styling the first child of the li:before element, while li:first-child:before is styling the :before pseudo-element on the first li.

In fact, in looking up the documentation to link below, I realized that :first-child is actually a pseudo-class, rather than a pseudo-element. The docs below don’t state it, but it’s possible that in order to get correct behavior, the pseudo-class should always come before the pseudo-element.

References:
pseudo-class
pseudo-element
:before
:first-child

I’m amazed

Wow! I had no idea my talk would generate so much interest, and so much traffic to my blog! It’s really strengthened my resolve to write here regularly. I want to continue being a resource for budding programmers, and (dare I hope?) an inspiration to people who want to become programmers. Thank you all!

How I taught myself to code and got a programming job in under a year

I gave a talk at Rails Girls Berlin today about how I learned to code all on my own and turned it into a job. There have been several requests already to see the slides, so I wanted to get them up right away. I hope to add all the links in the talk as links on this article soon, as well as additional resources that I didn’t have time for in the talk. For now, enjoy the slides!

[update (5 May 2013)] I gave a slightly revised version of the talk at the Rails Girls Berlin 1st Anniversary workshop. The revised slide deck can be found here. [end update]

My projects

• Yo Dawg
• JK Swimwear
• Cobot App Directory

Rails, Git, Heroku, and Stack Overflow

• Ruby on Rails Tutorial by Michael Hartl (book)
• GitHub
• git-scm.com
• Pro Git
• Stack Overflow
• Search Stack Overflow with Google
• Heroku
• Heroku Dev Center
• Search Heroku Dev Center with Google
• Rails Guides
• Rails API
• api.rubyonrails.org
• apidock.com/rails
• railsapi.com

Development Tools

• Rubular (experiment with regular expressions, a.k.a. ‘regexes’)
• Markdown (simple formatting used by Github and Stack Overflow for user comments; can also be used for user input from your projects!)
• Pow (Mac-only local server tool; you can use this instead of firing up rails s)

Design Tools

• Twitter Bootstrap
• HSL Picker (play with colors and get 3 different ways of writing each color)
• Visual Mess (guide to design basics)