1. Hi, my name is Lea, I’m a web programmer from Israel, and tonight I will talk about returning to the scene of the crime as a method for solving bugs.2. I work at the R&D center of ORT Israel, which is the largest Israeli school network, teaching 10% of all Israel’s high-school students. The Ort schools are spread all across the country. As you may know, Israeli society is varied, and consists of many sectors – Jews, Arabs, religious, non-religious people. Students from this whole range are found in our schools.3. The R&D center, among other things, develops educational sites. What I’ll be talking about tonight is a story that happened to me while developing a site. In this case it was the English version of our company site.4. One of the requirements was that in some of the inner pages, there should appear testimonials from alumni and important or well-known people. As you can see, the design of the testimonial is very precise – specific font-family, size, line-height and color. Our challenge was to enable the site-administrator to upload the content, without destroying the design. This site – as many of our other sites – is built on WordPress. In WP, the obvious way to upload content is using posts. But, the post screen gives the content uploader a visual editor – in our case it’s TinyMCE – and we were worried that might tempt the site-admin to play around with the styles, which would force us into specificity wars, something that we really wanted to avoid.5. So our solution was to use meta-boxes. Meta-boxes are a WP concept, where input-fields are programmatically added to the edit post screen. In our case we wanted to add 2 text inputs – one for the name, another for the title of the person giving the testimonial – one text-area for the testimonial itself, and an upload image button. We had found a solution, but it was a solution that had to coded – not something a WP user can use out of the box. Then the problem was that I had no idea how to begin writing the code needed to create meta-boxes. So I asked Google what good tutorial is there about meta-boxes?6. Google gave me a few choices, and the one I chose was the Smashing Magazine one. Really, I’m not saying this just because I’m here – I gave this same lecture last year in a Wordcamp conference, before I ever dreamt of going to a SmashingConf. Anyway, the reason I chose to follow the Smashing Magazine tutorial was because they used a few of WordPress’s best practices.7. So I followed the tutorial, which was perfect for people like me – programmers who have no clue how to code meta-boxes. However, being aimed at beginners, it only covered basic inputs.8. But as you recall, I also had to implement an image upload button, which would use the built-in WP upload image screen.9. Therefore, I went back to one of the other tutorials on google, and found exactly the code that I needed. I only made a few necessary adjustments, and the button was ready.10. After testing that everything worked, we deployed to production. Everything worked on production too – images were uploaded, testimonials appeared, and everything was perfect.11. So, is this the end? I think all of us sitting here know already that deployment to production usually is not the end. Sometime it’s just the beginning.12. About 2 weeks after deployment, as I’m sitting at my desk, minding my own business, I suddenly get an email from the site administrator (she’s the person uploading the testimonials), saying that when she tries to upload an image to the meta-box, there’s no response.13. Well. I assume some of you have heard of the six stages that a programmer goes through when encountering a bug – it’s been around the internet for a while – but let’s not spoil it for those who haven’t. Thus, when a programmer encounters a bug, this is the process they go through: a. First – denial: That can’t happen. Right? I mean, code that I wrote can’t possibly have a bug in it! b. Then they try to reproduce the problem on their computer, and they get to the second conclusion: That doesn’t happen on my machine. c. Well, after those 2 productive conclusions, the programmer walks over to the computer where the problem occurs, takes a look at what’s happening, and says: That shouldn’t happen. d. Then they go back to their desk and contemplate the philosophical question: Why does that happen? e. In order to answer that, they start digging in the code, and then finally, they’re like: Oh, I see. f. And the bug that they see is so obvious, and it’s so understandable why it’s creating the buggy behavior that was reported, that they inevitably ask themselves: How did that ever work?14. That’s exactly what happened to me. I’m reminding you that the code had been on a production server for 2 weeks, during which nothing had changed, so of course my first thought was: That can’t happen.15. In order to prove to the site administrator that it couldn’t be, I tried to reproduce the problem on my machine. This is the only stage, however, that didn’t happen to me: It actually did happen on my machine. What happened?16. This is what happened: A blank screen. Now, there is a concept in WordPress called the White Screen of Death (a takeoff on Microsoft’s Blue Screen of Death).17. It’s such a well-known concept that there is a whole section on it in the WordPress Codex (the official WP documentation). I tried all the methods suggested there that were relevant to my situation – I entered debug mode, but no error message popped up; I tried disabling all plugins – no change; I even tried rolling back to a previous version of WP, thinking that maybe the new version was somehow causing the problem… – but nothing helped.18. Then I got to thinking: wait a minute, I didn’t invent this code by myself – I found it on the internet. Maybe other people found it too, and ran into the same problem, and came back to the tutorial to write about it? So I decided to return to the scene of the crime, and went back to the tutorial. And I started reading the comments. After a few minutes I found the following comment: I have a problem with the image uploader. The upload area just becomes white and I get this error in the console: classes is undefined Does anyone have a clue about what’s causing this? Wow. This person has the same problem I have! But, he’s saying that he sees an error in the console. Does he mean the Web Console? Does he mean it’s a front-end bug that’s causing it? That seemed impossible to me. I’ve never encountered a situation in which a front-end error would cause a screen to become empty of content. I decided that I would go and take a look at the console on my site, just to rule out this option. Therefore, I go back to my site, open up the console in firebug, and…19. What do you know! I have exactly the same error! Unbelievable! I want to tell you: never before this, and never since, have I seen a JavaScript error causing the White Screen of Death.20. Then, I went back to the comments on the tutorial, and found that someone had answered this commenter, with a solution. It turns out that the problem was the call to the jQuery function: The first parameter was the selector – an image tag in our case – and the second parameter was the context in which to look for it (another DOM element). I ran a few tests and saw that the problem was that the second parameter passed was already the img tag, and therefore the jQuery function of course couldn’t find another img tag in it, so it returned nothing, which resulted in this error. The solution was obvious: just remove the first parameter, since it’s really not needed – the DOM element passed is already what the code needs. After a few more tests we deployed the solution to production, and I haven’t heard of this bug – or any other bug on this site – again.21. But To This Day I Don’t Know How the code ever worked in the first place…!22. Thank you!
