32: Rebecca Murphey on Scoutfiles, Hardware Hacking, and Chickens
Published 4/3/2015
Today I interview Rebecca Murphey, one of the JavaScript community's most memorable voices and a genuine, kind person. Rebecca has been doing JavaScript for quite a few years, and you might know her from yayQuery and other jQuery-related things, her work at Bocoup, or her writing on rmurphey.com. Rebecca now works at BazaarVoice. In this interview, we discuss a myriad of things, including the difficulties of writing third-party JavaScript, working with hardware, and her open source efforts on Scoutfile.
Thank you for listening! Remember, you can support the show by going to https://developertea.com/donate
Mentioned on the show:
- BazaarVoice.com has some career opportunities
- Alex Sexton - @slexaxton
- Deploying JavaScript Applications
- yayQuery
- Paul Irish
- Dojo Toolkit
- socket.io
- Scoutfile
- Discussion about 14kb first round trip request
- NodeJS
- Johnny5
- Bocoup
- bo-coop
- Arduino
Transcript (Generated by OpenAI Whisper)
Hey everyone and welcome to Developer Tea. My name is Jonathan Cutrell and today I am interviewing Rebecca Murphey. This is the second part of my interview with Rebecca. And if you missed the first part make sure you go back and check it out. We talk about third party JavaScript and that part of the interview. In this part of the interview we're going to talk about Scout file, which is a open source project. The Rebecca has been working on with some of her colleagues at Bizarre Voice. We also talk about some hardware hacking stuff that Rebecca has been doing. And we discussed Jonny 5 and the joy of making something in the physical space. Make sure you check out both parts of the interview and also subscribe if you don't want to miss any future episodes of Developer Tea. Thanks so much for listening and here we go with the interview. All right so we've talked about Bizarre Voice and all of the awesome stuff that's going on there and all the challenges of third party JavaScript etc. But you guys are also doing work in open source and you specifically have been leading the charge on Scout right? Yeah me and my colleague Lon Ingram worked on this repo, this project together. And really like Bizarre Voice has a pretty good history of supporting open source on the JavaScript and Web dev side of things. The person who recruited me to Bizarre Voice was Alex Sexton and a lot of the things that he has put out. He put out while he was working at Bizarre Voice and so it's something that we try to do. We've gotten a little bit bad about releasing anything JavaScripty though. So you know I talked in in the last bit about how I'm working on this team now that is working across applications and trying to solve things once rather than for one time for every single application. And so one of the first things that we targeted was what we call the scout file. That was that was something that we wanted to solve once and for all and make in a way that we could share across applications. And the whole point of a scout file Alex actually has a really great post about this deploying JavaScript applications and you should read it if this is interesting to you. The whole point of a scout file and this gets a little bit will in the weeds here so bear with me. The point is that it is a file that whose URL never changes that a customer or or you can put on a page in order to load the resources to support an application. So it's URL never changes it has a very short TTL so it's cashed for a very short period of time and it is necessarily very small. It should always be less than 14 and a half K, jik minified and gz in order to fit in the first TCP window. So what this means like once you have you create this scout file with a very short TTL and in the scout file you put information about how to actually load the version resources of the application. So your scout file is not versioned it's always at the same URL like you know customer name locale site name and then scout.js let's say. So it never changes customers when they make a new when they make a change to their site they don't have to change the role of the scout file. It changes the scout file is short TTL you can put configuration information in it when there's new configuration information you push a new scout file and because the TTL is short the old one goes away the new one takes effect. And then scout file loads the real application resources so the real JavaScript which might be tens of K rather than 14 K the real CSS which is also probably tens of K not can't fit in 14 and a half K. So and this is a strategy that is imperative for third party JavaScript where we need to give customers a straightforward one time integration that they can do no matter what we change you know if we decide to start shipping our application in two JavaScript files instead of one. Or if we decide to embed our CSS in our JavaScript and we no longer need to download CSS all that has to be transparent to the customer. And so the scout file is is the thing that lets us bootstrap ourselves onto the page. What we've done and what we're talking about this is we open sourced an NPM module that you can use to generate a scout file for your application. So we've been simple right now. There's there's not a whole lot to it because there's not a whole lot to a scout file a scout file needs to be able to have configuration in it. It needs to be able to load CSS and needs to be able to load JavaScript. And that's like a minimal a minimal a scout file might just do those three things. Host configuration load CSS based on that configuration load JavaScript based on the configuration. It might not even do all three of those things. Maybe it just loads JavaScript and the JavaScript has the CSS embedded like who knows. It's got great tests around it. So like we can prove that it works. And that's a nice thing to have all of that kind of boilerplate loading code tested so you don't have to write it yourself and test it yourself. That's a cool thing. And like I said, this is something that even it's it's imperative for third party apps, but even if you're just building a single page app like remember that time that you had to tell your customer like, oh, just clear your cash. That's not actually a legitimate answer to that. That's not good. And so fundamentally the scout file means you don't have to clear your cash. Yeah. And so the net effect of this is that stuff. First of all, it loads asynchronous. So it's super fast. So you're you're rendering the page really quickly without blocking by going and grabbing some huge script file. Because it loads in in the first TCP window, right, which I think I've talked about this on the show before. But if if if you're listening and you haven't heard the episode where we talked about that, I can't remember which one it was. But 14k is like the budget for that first load in. And so if you're if you're I think that's the budget. Is that still true? I think it's 14 and a half. So which is not very big, by the way, for those of you who are putting images in that first in that first load, it's probably that one image is probably going over that 14k. So it's not an easy task necessarily. But with things like a scout file or specifically with a scout file, then you have this option of loading and things fast, which is the point of a script loader anyway. But this isn't just like a regular script loader because it allows you as Rebecca was saying the the caching problem is is the big problem that a lot of people face with these with asset loading in the first place. And if you have this first 14k that basically isn't cashed essentially right like it's cashed for the second load. But it's not cashed in terms of like realistically the next time somebody comes to the site like maybe the next day or whatever. Because that TTL is so low basically that means that browser doesn't hold on to that file. The browser isn't going to go to its local version. It's going to go and fetch that file again. So any updates that you've added to it. Those are going to be live pretty quickly in 10 minutes is what you're saying is the best the best setting right. That's this kind of a setting that we have settled in on. You know, you could probably do it depends on how fast you want to be able to see changes. And I think effectively because there's a CDN layer in here. What we actually see is that if we don't actively purge the CDN purge the URL from the CDN, then the time ends up being two times the TTL because the browser will hold on to it plus the CDN will hold on to it. So even if the and so I think it comes out to be like two times the TTL minus like one unit of time, whatever that I think that like minus one second to ish or so is probably bad. That would work out. But anyway, we put our TTL at 10 minutes by just setting a max age cash control header on that resource. And we could play with that, but that number seems to work pretty well for us. And then we put our real resources like the big payload at a URL that has a version number in it. So every time there's a new deployment, we bump that version number. And so that yeah essentially the bus the cash is just like you're looking for a whole new resource. Yeah, like it's it's not even a bus so much as it's like this is a whole new resource compared to what you're asking for before you know before you're asking for like version one two three slash main.js and now you're asking for version one two four slash main.js like it's just a totally different path totally different file. Yeah, and we put a TTL in those files of like a year because the browser can hold on to them effectively indefinitely because we know that when we want to change them, we will do so by just putting a new version on the world. Right. And then any old version of that is going to be stuck in the browser, but who cares because it's not being loaded. Yeah, right. Like the browser has it in its cash until the browser decides to clean out its cash, but it's not going to use it. Right. And it's like it doesn't matter. It's like old versions of Jake, where you are probably somewhere in my in my browser. They're probably gone by now. You never know. But yes, the scout file is just a it's a it's a thing that I'm glad is open source because like I'm glad that it exists because I don't want to solve this problem again at bizarre voice. I'm glad it's open source because there's no secret sauce and this at all. The VP of R&D was like reviewing the blog post about open sourcing this right before right before it was about to be open sourced. And I had not done a sufficient job of explaining to him ahead of time that this there was no secret sauce here. And so he freaked out a little bit, but I explained to him that you know this is this is like a function for loading JavaScript. This has been written a million times before. All we've done is packaged it up for this particular use case. Uh-huh. That's funny. And you could say I guess like no JavaScript that we ever write can be secret sauce. That's that's that is also very, very true. JavaScript client side JavaScript is not that's not where you want any secret sauce for sure. But this is definitely not secret sauce. So it's pretty exciting to be able to put it out in the world and be able to talk about it and mostly to be able to have something that I can point to and say this is what I mean. Yeah. Yeah. That's cool too because in the past when I talk about it, I could show them our actual scout file, but now I can show like this distilled version of like this is what I mean. Right. Yeah. And it's I mean, I'm sure a lot of people are going to get good use, especially out of just the just concept, right? Like that it's the magic here is in the concept that you're portraying not necessarily in the code. And so, uh, although there's some good stuff here, right? Like you're doing a script loader without relying on jQuery, for example, right. Yeah. I think a lot of people currently are relying on jQuery for loading scripts and asynchronously. Yeah. And you couldn't use jQuery if you wanted to meet that 14 and a half K budget. Right. Yeah. Cause jQuery is what 40. I think even if you just stripped down to like just Ajax, um, minified in gzip is still in the 20s. Yeah. Even if you dispose of all the other functionality, you're still in the 20s. So that's true for two point. Well, you know, I think I was doing that on the one dot branch. And so I, I don't know. Well, you guys have to for your scale. I'm sure that you are still having to go back to IE eight. Yeah, we go back to IE eight. I think we have some I hope we aren't sporting IE seven anymore. But for a while, like for way too long, we were. Now we support IE eight. I'm hoping that will stop soon, but not yet. Right. So, but like we're working on a product right now where we aren't using jQuery, although that's rapidly becoming silly. Like we just wrote this whole complicated method for adding and removing styles from elements and like once you deal with all the edge cases of that. Just load jQuery. Just like at least have a have a conversation with yourself about whether you should. So, yeah, I think like that's a fine line. Where you say like, all right, we're just going to pull in jQuery. I don't think we're there yet. I think it's a really neat. We're going to see how far can we get without jQuery, especially if you allow yourself to have a degraded IE eight experience. Like, you're not going to get those cool transitions. They would have sucked anyway, honestly. And so, yeah, it's interesting to see how far we get without jQuery on this project and when, when, or whether we just bite the bullet and say, all right, we'll pay the jQuery tax. Yeah. I'm going to take a quick sponsor break and then we're going to talk about what is possibly the most different thing that we've ever talked about on the show. It's going to be a lot of fun. What if you could learn to build anything in one month? Well, with one month.com, you can. One month students learn to code by building real rails and iOS apps. You know how I feel about education and learning. And let me tell you something. One month is a fantastic place to start. And that's because one month provides focused, accelerated learning courses entirely online, which means you don't have to ask your boss to give you off days to go learn. For example, in the one month rails course, you'll learn Ruby and how to build applications with the rails framework. You learn how to write HTML and CSS and how to use Git and the command line. You learn about S3 from Amazon Web Services. You learn how to add user registration support to your application and launch it on Heroku. In addition, one month has a bunch of other classes like HTML and iOS programming. And the best part is if you get stuck, there's a real person ready to guide you while you learn. That's a real person, not an automated machine. So go now to one month.com front slash Developer Tea. Now, it's a special URL for Developer Tealisteners that gives you a one time 25% off discount enrollment is typically $99. But if you use one month.com front slash Developer Tea, you'll get 25% off. That means that you'll be paying less than $3 a day and learning how to build a real rails application in just one month. One month.com front slash Developer Tea. When I asked you to come on the show, you responded and said, yes, and then we started talking about what we're going to talk about on the show. And you let me know that you're doing a fun project with JavaScript tracking of a chicken coop. Can you tell me more about what you're doing there? Yes. So I've always wanted chickens. And so we got some chickens a few weeks ago. And when you get chickens, you have to get a coop. So we also got a coop. And while the chickens were like growing up from baby chicks into grown up chicks in our garage, I built the coop. And then just this weekend, actually, it was finally thank God time to move the chickens from the garage out to the coop in the yard. What's wrong with chickens in your garage? Is there something wrong? They're like just smelly and it's just not fun. They're like, it's not fun to have them in an enclosed space like that for them or for you. They're like no one's happy and they were jumping up on the edge of the bog. I got come out in the garage and they would be like, hey, getting bored of this box. So I thought I'd jump up here instead. So yeah, so we moved them outside this weekend. And one of the cool things about moving them outside is that rather than feeding and watering them out of these like tiny containers, you can feed and water them out of these really big containers. That like can feed them for days and water them for days and like isn't this exciting. One of the buffers of moving them outside is that it's still like a little bit cooler and so I'm a little bit worried that they might be cold, especially after being in the garage for so long, especially because they're young. And so I have a heat lamp going on in there. And then once they start laying eggs, you're really supposed to like have light on longer than the sun is out. But like you don't want to run the light or the heat lamp when you don't need to because like you could end up cooking your chickens in your yard. And that would suck. And also just the energy of that like it's just dumb to have a light on in the middle of the day and the summer. And so I have had four like coming up on two years now, a box of goodies for playing with our dinos. And I actually have I think four or five Arduino boards plus a raspberry pi board. And so I have sensors for temperature and sensors for light and I have distance sensors. I have a relay that can turn things on and off. I have all these things that I've never had like a real project that I wanted to build and now I did. And so there's this awesome library called Jonny five. I don't know if you've heard of it. I actually was going to ask you. I thought I remembered you talking about this a while back. Yeah. Yeah. So like two years ago, I was messing around with Jonny five a bunch and actually contributed some code to it. I contributed code for working with LCD displays and contributed some code for some lower level components to. And then I just kind of like all that stuff we had a kid and all that stuff went into box and I have messed it. And so Jonny five is this really easy to use. Like hopefully I didn't insult my partner when I told her last night like you could totally read this. You could totally write this. So she's not a coder. So like hopefully she wasn't insulted. It's so easy. It's a very jQuery like syntax for getting a machine to do a thing. And so you can say like LED turn on LED turn off LCD. Please display these this word and it just does it. And there's very little like there's comically little programming involved. It's really easy. But what's cool about it because it's JavaScript is you can really easily now hook this board up to a web server that you wrote in, I don't know, express, let's say. And then you hook up socket IO and next thing you know you have a real time interface for seeing the data that's being collected by this board. You connect this board to a raspberry pi. So now you have like 50 whole dollars invested in the computing hardware. So you connect this Arduino to a raspberry pi, put it in a container and throw up the chicken coop. And now it can connect wirelessly with your home or system. And so you can have like a home network way for monitoring and controlling the chicken coop. That's fantastic. Yeah. And my partner is like, you're just really lazy. Like you just don't want to walk out there. It's like it's not even far. Just don't want to walk. And like, yep, totally don't want to. Exactly what it is. That's exactly what it is. That reminds me of the quote that hackers are fundamentally we rely on being lazy to do our job well. Yes, yes, that is intrinsic in our character. No, it's it's fun. I really I really just started on it. I started thinking about it Saturday and bought some stuff and this build out like the desk prototype. Turns out it's really easy to build this stuff on your desk. The much harder part is figuring out like, how am I going to build this in the physical world? Like on my desk, I can have these six sensors all sitting right next to each other. But in the real world, there's going to be like six feet between these sensors. And so now I have to run wire and now I have to protect the stuff outside. That's the thing I really like about the intersection of JavaScript and hardware is that because I can write it in JavaScript, the the like making it work is really easy, but the making it is actually hard. So it's not about the code anymore. It's about whatever it is that you're accomplishing with the code and all of the like real life constraints around it. Yeah, like the real world physical constraints. Yeah, because like I can whip up an express server right now that has a button that will get a message to the Arduino on my desk to turn an LED on like that's not that is not even remotely difficult with Jonny five. Which is awesome, which is amazing. Right. And there are people are building robots with this stuff and like, you know, controlling them from their iPhones because it's just JavaScript. So easy. So yeah, like making the interface that lets me turn a light on and off from my computer in the comfort of my home, that's easy. And wiring that light to like work in the physical world when it's raining when it's raining and like chicken is my chew on it. Do they chew? I don't know. I don't know. I'm like I said, not a chicken expert. So I don't have to show it I'm in for here. But anyway, yeah, that's my that's my current project. And I'm I'm developing this on GitHub. The so one of the big backers of Jonny five is Boku. It's pretty awesome open web consulting company up in Boston that I worked with for a while a couple of years ago. And their mascot is a chicken. And so I emailed the founder of Boku. And I said, I'm going to make this thing and I'd really like to call it Boku. Would that be okay with you? And he was like, that's amazing. So it's it's on GitHub under my GitHub. And I'm like, there's not much to see yet. But if you want to follow along, that's awesome. That's happening. Yeah. Yeah. I actually recently put together not nearly as cool. And nothing to do with chickens. But a raspberry pie project at my house. All it does is pull Spotify music down and play it. But what was what was so fun for me was that I actually like I made things work that normally don't work together. I got a Python East on my phone and wrote like enough Python to send a get request or post request, which by the way, there's like no app that just does post requests on from your phone. It's really frustrating. But anyway. And I put this thing together. And it was so like satisfying. Even though I could already stream Spotify through my Apple TV, I've actually talked about this on the show a few times. So sorry if you're hearing this and you're like, we get it. We know that you have. I have heard it. But it was just so satisfying, you know, because you're making something that previously just didn't it didn't exist. And you're like physical space. And it actually is useful. You know. I mean, as you know, what I do is, what I do, what I do is, what I do is, what I do, my job is with art, you know, stuff, and the Jonny five stuff like that. That was what Rick Waldron is when he created Jonny five. And that's what he kept saying. And like what I kept saying after I experienced it. is like making a light turn on in the real world. Like that's with code. It's crazy. And the things that you start to understand in the way that you like suddenly start to look at that, like the light switch or the keypad on the printer or like all of the LCD on the printer that says like out of paper. Like all of these things suddenly, you just say, it's magical. Well, they become less than it. Like they become more and less magical. Right, right. Yeah. They're less magical because like now you've kind of seen behind the curtain. Oh, yeah. Oh, that's how those buttons actually do what they do. Right. Do what they do. And then you also come to appreciate that someone had to write the code to actually process the input from those buttons and they weren't doing it on a MacBook retino with 16 gigs of RAM. But they're doing it on some tiny chip that fits on the tip of your finger. And then deploying it in production. Yeah. And it's just like, oh, it's crazy. It's really, it's a neat thing to experience. You know what's really interesting? By the time this episode airs, I will have released an episode about the importance of play and how a play actually helps us learn. And we talk about how children, they learn by playing and children learn so much more efficiently than adults do. And so often we forget the importance of it as adults. We forget like you can still learn by just having fun with something, you know? And I think this is a great way, especially for developers who already are like familiar with JavaScript, but you've lost some of the, I don't know, some of the love for it. Right. Because I mean, I've been there, right? And I think all of us probably have where you're writing code and it's like, man, honestly, I used to love writing code, but today I don't, because I'm writing something that honestly, I just don't feel like writing, you know? Yeah, no, this is the doing hardware stuff is really, it's fun. It's a lot of fun. It is, it is just discovery through play and you will learn things, you will learn things that at the time when you learn them, you'll be like, this will never be relevant. It's pretty cool, but it'll never actually be relevant to my job. And then it will be relevant to your job or to your next job, like that's the other neat thing is you learn, you learn stuff, you don't see how it's applicable, it will be applicable later. Just wait. I can prove that right now, actually. You wrote a post about bit shifting. I believe that was, that was when you first started working with Jonny Five stuff and you wrote about bit shifting to turn on LEDs in a sequence or something like that. And I was like, this is interesting. And also I've never seen it. And it's like frustrating that I have no idea what's going on. And so I consumed it as much as I could and I learned about the way our number system is built and all these things. I wrote a post about it for Touch Plus Network. And then I came across bit shifting in role masks in, it was a Ryan Bates Ruby method that used bit shifting. And I was like, there it is. There it is. I never knew this existed in my world. I thought it was just for Jonny Five stuff. And it wasn't. It was right there. So. Yeah, it's a, it's a fun post too. I, that is a post where I genuinely, wow. Like I didn't know any of the content in that post probably a month before I wrote that post. Wow. I just didn't know any of it. And once I did know it, I wanted to write it down. So I would always have it to go back to. Yeah, well, and I can say that it was valuable for at least one other person who read it. So. Sorry. Rebecca, thank you so much. Is there any, so I like to do this with guests as well. If you had just 30 seconds to talk to a beginner, beginner developer or an experienced developer and tell them, just give them some advice about becoming a better developer both in just as a person, but also in their career. What would that 30 seconds look like? Oh, I mean, I always try and think about what do I wish I knew a year ago or when I started my career doing this thing that I do. And I mean, there's two things. One, it takes time and sometimes there is just no substitute for time and experience. And you have to make mistakes and things have to be hard. And you just like that's, that's just part of this thing that we do. And that's what's never goes away. It's certain things get easier, but new problems that you never even conceived of become your new problem that's no hard. And that's what's fun and that's what's terrifying. But it's definitely what is constant about working in this industry. I think the other thing that I would say, and this is advice that I would really like to give to myself five years ago, six years ago, is if you think you know most of what there is to know, you don't begin to know anything. Like, measure yourself by how much you think you don't know. Like, the more I learn, the longer I do this, the more I have to kind of make a piece of the fact that there's this universe of stuff that I don't know. And the more that, like, the more I realize that what I do know is just this tiny, tiny slice of the universe. But I know it well. It turns out I can make a good living knowing it. Like, what I don't know is fast. And if I stop thinking of it, I think, like, yeah, I pretty much got this whole software thing figured out. Like, I am a bad person and be far, far away from me. Oh, yeah. That's great. And no shortcuts, basically, is what you're saying. Basically. Yeah. And that's good. It's good. It's good that there's no shortcuts. You know why? Because I think that it makes what we do very valuable. It makes what we do as developers. When you struggle with something, that means for somebody else to replicate it, for somebody else to create whatever it is that you created, they have to also struggle. And there's something good and human about that, I think. You know, I think that, like, the flip side of that or the compliment to that maybe is that, as experienced developers, you have to have great respect and great patience and great understanding of people who have not, like, people can't just be at your level. Tomorrow, they can't be there because they want to be. Like tomorrow, they can be there eventually because they want to be. But they can't be there tomorrow. Like, some stuff really does just take experience and you made those same mistakes that you're watching them make and thinking, like, oh my God, like, how could he screw that up? Well, he's through that because he's new at this and he hasn't screwed it up before. And you have, and the only reason that you know not to is because you did. Yeah, wow, yeah. That's great advice for me and for anybody else who is in charge of a team of developers. But really, it's great advice for anybody who's in charge of anybody. Anybody in charge of anybody. Pretty good. Yeah. Well, that's awesome. Thank you so much for being on the show, Rebecca. Jonathan, it's been great. Thank you. Thank you so much for listening to Developer Tea today. I really enjoyed interviewing Rebecca. If you have any suggestions for the show, perhaps you have an idea of someone you would like to hear interviewed, for example, you can get at me on Twitter at at Developer Tea or you can email me at Developer Tea at gmail.com. If you'd like to support the show, check out developertea.com, front slash donate. I recently added one-time donations and any kind of donation is a big help to the show. Of course, if you haven't left a review and iTunes, that is also a big way that you can help other developers just like you find Developer Tea. Don't forget that show notes for this episode and past episodes can be found on developertea.com. Thanks so much for listening and until next time, enjoy your tea.