00:00:01.290
So we have two talks left in our afternoon on the first day of RubyConf AU. The next talk features two speakers: Selina Small and Michael Milewski. Selina and Michael met through work at Fresho! and soon realized they are the kind of friends who would rather talk tech at a party. They turned those party conversations into numerous hackathons, coding camps, duo talks, and workshops focused on test driving software and pair programming. Selina is originally from New Zealand. She is a self-taught coder passionate about learning new skills and test-driven development (TDD), and she is also a professional Muay Thai kickboxer who fights around Australia and internationally. Michael was born in Poland and has four kids as well as a German Shorthaired Pointer named Coriander, who seems to outrun him in many aspects of life, but he loves it. Occasionally, he dresses up in Polish national costume to do some folkloric dancing just for fun. They are both obviously super passionate about pair programming, so please welcome Selina and Michael to talk to us about that.
00:01:35.490
Hi! Oh hey, do you work here? I was just looking for the tech area. This here is the tech area, secretaries, and reception down the hall on the left. Well, I actually am looking for this tech area you’re talking about. I’m Selina. Oh, Selina! Yeah, they did mention a new hire coming in today; you must be a designer. Look, I’m Michael Milewski, senior developer here at Aviato.
00:01:58.200
Nice to meet you. I’m really excited to get started. Could you fill me in on how things work around here? Well, I’m not sure about you designers, but us developers have important stand-ups to go to. I walk in here wearing a dress and heels and people think I’m a secretary. There's nothing wrong with being a secretary, but then if I happen to be part of the tech department, the only possibility is that I must be a designer. Senior developer Michael Mansplainski over there can’t even take me seriously. Can anyone in this industry take me seriously? Oh yeah, my task for today: the to-do list and delete item. With what? Are you a Dev? Oh, I don’t think you guys look progressive enough to have someone this good-looking as a CTO, so I might as well cut some code while I’m here.
00:02:59.400
Well, come and join us for the stand-up! Whoa, well do you want to fill me in on what the story is about? Yeah, it’s not gonna be just some CSS, honey. Good point. Well, I didn’t say anything precisely. Let’s keep it that way. Look, I may even need to reach out to Stack Overflow to sort this one out. Anyone feels the need to throw things? Be my guest. Really? Are you sure? Hey, you guys use React, right? Yeah, kind of, but it sounds like you’re gonna need a pretty simple callback function to respond to your delete action. But maybe we could start with a kickoff?
00:03:57.120
Kickoff? You know, when Sam started, he wanted to make us all mix things up a bit with story points, but someone like you wouldn’t need a kickoff. Come on! So basically, we have a to-do list, and we need delete functionality. But why do we need it? To delete? For news kicked off, let's go! Yeah, but why do we need it? Like, who’s the user? Why do we even want to delete to-dos? Well, going a bit above your paygrade... okay, all you need to know is that this is a React app and we have a list item. The list item renders a list of items, and those items need to talk back up to the app to tell the state that the item has been deleted.
00:05:21.990
You know, we’ll probably use a callback function. I’m not sure if you’re across those; back in the old days, they used to be called call-after functions. There are two kinds of call-after functions: synchronous ones and asynchronous ones. So, you just love a good explanation, right? Too much of a history lesson. Listen, let’s jump over to my computer and get started. Alright, let’s see what we’ve got here. You can see we have the terminal here with the test running. Let me just run all those tests—there you go! You can see we’ve got a broken test; let’s fix that first.
00:06:50.480
Okay, go on, have a go. Okay, cool, so if we jump into the editor, then open app.test.js. Can I just have a quick look at the structure of the car advance, see the second tab, app test, row six? Just to start on that one? Okay, yeah, good, good. Now if you just jump down to the bottom, um, line 41... Hold on! Yeah, I’m pretty sure in there we need a debugger statement. What, a debugger? Why? A debugger, D-I-E-B- debugger? Okay, but what are we trying to do? Yeah, right, I got it. Do you bug out? It's not gonna run in the browser! Let’s get rid of that. I think this setup is in the wrong order. Right, I think these one, two, threes have to be before the ABCs. You do know your ABCs, right? Let’s have a look at that and… boom, all green! That’s awesome!
00:08:25.600
We’ll commit, right? Yeah! Cool, that was good. Hey, let’s go get a coffee! Oh, where’s this camera on? Can you believe he was recording me? What a creep! I had no idea! You know, actually, I feel a little bit uncomfortable now. How do you take your coffee? Oh, black please, no sugar. You know when people ask me how I take my coffee? It’s very, very serious! Tiny joke, Wow. So, okay, how long have you been here at Aviato? Oh, I was one of the first developers hired on this project! Oh, so you’re really across most of the codebase? Yeah, basically, I wrote it all myself apart from John, the CTO—he’s the one who hired you. He was originally from the consultancy that started, but he moved from the dark side of consulting to join me on the team and became our CTO.
00:09:49.849
Oh, and Cathy? Yeah, Kath was one of the ones that was here from the start, just in time for Series A funding. I saw her speak last year at the RubyConf; she was really knowledgeable about food bars. Yeah, talking food bars is much better when it’s this bunch of designers; I don't think they’re getting it. No, alright, anyway, this card—I wanted to ask before—why was it that we started with a broken test? Shouldn’t we have had CI passing with everything green already? Wow, maybe when we get back, you should jump on the keys. Hey, didn’t I try that already? Okay, yeah, let’s give it a go.
00:11:28.260
Alright, let’s go! Beauty! Right, so let me just unlock here… and I’ll just… okay, cool! So, app.test.js up here—yep. So, right here in the empty spot—I think line 39. Yes, yeah, that’s the one that was failing before, that’s right! We’ve just fixed that one. So, do we want to try a new test now? Yeah, yeah, we want to write to delete items, yes. I’ve got remove; there’s a remove item function, right?
00:12:24.820
Right, okay! So I think what we want to do is? No, okay, well, I’m going to try putting in a new describe lock. Yeah, we know I wouldn’t do that. Oh, really? Yeah, okay, what do you think? I think what we’re trying to do is actually going to be really similar to this assertion we’ve got here already. Let me just get my thought out. Yeah, okay! So it’s going to be really similar to this except we’re going to have a different expectation. Instead of marking the item as completed, we’re actually going to delete it!
00:13:40.400
Let me just—interrupt; I mean this is a great idea, right? I think what you’re actually wanting to do here is start a new test. Right, we want to delete the item when we call remove item, is that right? And then we could just pass in a function? If that’s distracting you, we can just come back to this now! Right, right! Yeah, so in here we're going to have to call this function; I’ll just borrow that. Is that still distracting to you? Look, let's just delete that altogether. Right, so that’s kind of what you want to do, and then you know that’s how you write a function.
00:15:16.890
Oh, yeah, right! I need a greater than item remove item function, right? Yeah, yeah, that’s right! Okay, but what does it do? What, you can see right there; it removes an item. How does it work? It’s right there! You get it. Right? You get that, like it’s clear right there. We move on; and that is how it works. Look, Michael, I’m not getting it, but I think if we move on, maybe it’ll become clearer. Maybe it would be easier to see in a different font. You know, I still work with a guy called Brad; he was right into his fonts—different color font for every day of the week.
00:16:30.600
Let me see if I can find this right. What have we got here? Oh, yeah, what the hell is that?! Could you imagine the screen right there, trying to read that? Be careful, don’t save that! Oh, yeah! Yeah! Yeah, look, I think a better one is look—a safe one, Helvetica! Doesn’t that sound awesome? That’s a good one, right? Actually, back in the day, Minako—Minako, I think that was really big in 2005 or higher. Well, maybe let’s go with that one. Can we just run the test in? Yeah, sure!
00:18:02.539
Yeah! Okay, um, where is our test over here? I got a failure. Okay, cool! So... wrap it up. Find a prop is not a function check out this photo. Who is that? Is that Barley? Have you ever been to Barley? Uh, no, I haven’t been. Hey, the camera is unlocked! Let’s take a selfie! What? Michael, it is distracting! Well, Jane’s not going to be happy! What? It’s so birthday, and that’s her phone! Yeah, look, it’s about time for me to go for a run. I’m outta here! I’ll catch y’all; I might grab a burger and come coding soon.
00:19:40.260
Okay, let me just, you know, lock the screen. See ya! Finally, a minute of peace. Oh, but why did I lose it with him on the first day? You know, something’s not right here. I took this job because this company was known to have a strong pairing culture, but you know the pairing is just not working for us. He’s got so much experience, but you know what it’s like; he doesn’t get the social cues or something. He can completely mess up how to get on pairing with someone who maybe hasn’t worked with a new person for a while. You know, it might be just me, but slipping on drinks in my ears is kind of gross, and he got so distracted changing all the fonts and what’s the deal with all the notifications?
00:21:32.679
You know, I thought pairing was meant to be about collaboration, but he won’t let me see the screen and keeps jumping through all the windows at lightning speed. I can’t see what’s going on, and you know, I don’t think he even knows what’s going on and won’t let me touch the keyboard. Either tells me what to type character for character or pushes me right out of the way, and then, ah! The social media—trying to take a selfie with me? How inappropriate! And on someone else’s phone? I don’t know how this guy gets anything done! Speaking of getting things done, where is he? This is turning out to be our bloody long lunch.
00:25:19.870
Look, look! Why don’t we take a longer lunch break? Godspeed! No! No, you can go finish your lunch, get cleaned up! Good! You got bosses! You know I like that! No, no look, to be honest, you eating is very distracting, and you’re dripping sweat all over me! What? Right, yeah, I’ll be back! Ketchup? Yeah! Oh hi, Jodi! Happy, yeah, yeah! No, it’s my first day. Yeah, it’s great! Wow! Oh actually, oh my god! The guy that I have to work with—you wouldn’t believe him, like a +4 mansplainer! And get this, I had to cope with this guy!
00:27:17.620
And his—hey, no, no! No, he’s not my type. Look, no, he came back from his run, and I’ve got sweat and grease all over me, and you know what? I think Mr. Knodel is on his way back now! He’s probably gonna tell me how to hang up the phone next! Hey, you know what? I’d better go. Oh, by the way, would you mind just double-checking to see if my old job’s open? You know, just in case? Alright, alright, thanks so much! Alright, see ya! Catch you later! Bye!
00:29:07.170
Hey! You know I have to think about me, Raph! You’re rocking out here in all my own lycra and running gear, sweaty and probably after burgers for my beard. Yeah, that must have made you feel really comfortable? Wow, thanks for acknowledging that! So should we write that test now? Yeah, sure! If you wanna keep going, yeah, okay, alright! So let's just run that test and make sure it’s still failing!
00:30:12.430
Yeah, it’s failing. So, I think we should have a look at the implementation. Are you gonna cut your toes as well? Now I gotta save them for React Constant! Thanks, sweetie! Ah, okay, so that test is failing! Hey, you see that pic time? What notification? Up on Slack! Oh, well, can we just quickly finish Jenny’s Ripper of a banana cake? Could have been there for the first… well can we just finish this bit? I think we're almost done! No, no! Come on with the cake! Let’s go! Oh my god, this guy is so hard to work with!
00:31:51.350
I can’t get the transitions right! He’s serious; there’s a new distraction every two minutes. And you know what? He is disgusting, like cutting his nails at the desk! Who even does that? And he was, you know, if we didn’t have React Conf last week, he was legit gonna do his toes! But still, you know he did apologize for spitting on me; I guess that’s something, right? He’s not very good at sharing, though! You know, he doesn’t just want to let me see the screen, and he won’t let me touch the keyboard or have me put on the code!
00:32:58.990
And you know what? I bet he’s one of those guys that moved back into his mother’s house to take care of her, but actually sits down in the basement playing computer games all night, then out watching girl fights on the weekend. Listen to me! I’m turning into such a judging him. Ha! This girl got lucky since I paired up with me today! I know more than anyone about this codebase, but why am I trying to have this pissing contest with her? I mean, I’ve got over 20 years of experience! I should be much more confident enough to give her a go at doing something! I mean, after all, John did hire her, and I don’t even know if he’d hire me these days!
00:34:43.850
And you know he hired her to 10x the teams, to get some really good developers on there. I’m sure I could learn something from her, and I should just be better at sharing more than I have been so far. Hey, here’s the cake! Oh, thanks! Yeah, actually, you know, this reminds me of the cake I had on Saturday when I picked up my son from his friend’s birthday party. Oh, you have a son? How is he? Yeah, I’ve got four kids: six, four, three, and a newborn. Oh, pretty busy man, you must—I guess you don’t have much time to put in any coding outside of work, eh?
00:36:39.850
Yeah, I’m pretty busy, you know. I spent the better part of four hours last night taking my son to the hospital after he fell out of the cubby and needed stitches. But I still get to fit in, you know, hobby projects here and there. Oh, really? Are you working on anything interesting at the moment? Yeah, doing some work on a BAA. It’s a framework; no, BAA is the Australian Breastfeeding Association. I’m doing some volunteer work for the website; it’s very rewarding work. Oh wow, that sounds great! I didn’t expect that of you! Yeah, well, how’s your first day going?
00:38:33.279
I mean it’s been pretty cruisy so far. Yeah, it’s been a little bit harder to get started than I thought it would be. The architects around this project are very involved. No, it’s not that! That’s just, you know, even at a high level, no one seems to be able to explain the purpose of what we’re doing here. Oh! Maybe I haven’t been as clear as I thought. Look, why don’t we go over to the whiteboard and maybe I can give you a better understanding with a run-through there?
00:40:46.839
Oh, okay! Let’s get back into the car! Do you know, I’m lucky? Oh! What? He’s got girl fights on his computer! I knew it! Look! It’s not what you're thinking! A really good friend of mine, she’s a professional athlete, and she’s a kickboxer. I went to watch her last week, and I was putting together the footage. Wow, you know, that’s pretty cool; she sounds like a bit of a badass! Did she win?
00:42:07.290
Oh! Talk about it later! Let’s get back to whiteboarding! So, at a high level, we have an app, right? And we probably should have started with this right from the beginning. In this app, we have a new item form which renders an item list, and within that list, we render the individual item components. Oh, right! And on that item, we want to be able to delete it! So there’s probably going to be a button on the item component to do that!
00:43:49.960
However, it’s the app component’s responsibility to tell the items list which items to render. Oh! So we need to add a function to the app component that gets triggered when we click the delete item. Precisely! Right, and in order to call it, we’re going to have to pass a reference to that function down to the item. I think you’re getting it! Do you want to give it a crack at implementing it?
00:45:04.390
Oh, I do! I’m just having a little bit of trouble working out which order to do things in. Well, back in my coding career, we used to do what’s known as ping-pong pairing, which you should maybe give that a try. Ping-pong pairing? What’s that all about? Well, it’s a particular style of pair programming where one person writes the tests and the other one writes the implementation. Then that person writes the implementation and the other one writes the tests, a bit like ping pong.
00:47:56.869
Okay, let’s give it a go! But do you think we can start by going back over that test we wrote earlier because I wasn’t quite following? Yeah, you know what, maybe we just start from the beginning and do a git reset? Start from there!
00:49:57.330
There we go! Alright, so hang on a sec! There’s a bit of an issue here; I can’t even see the screen! Look at the ergonomics! See, look, I’ve got a second keyboard. What are you doing? Okay, and then maybe I’ll stand a bit over here; that way, both of us have a keyboard and can both contribute more equally, right?
00:51:16.390
Yeah! I mean, it’s much better! Could we just up the font a little bit as well? Yeah, sure! Do you want me to change the font as well? Not that! Okay, yeah, good call! Right? So as we had started, maybe I can write the first test. So we said we needed this remove item, so it’s going to be really similar to the test that we have already, right? Oh, yeah, good pickup! So you’re saying I could just copy it, right?
00:52:58.400
That’s cool! Saves me a lot of typing! So in this case, it’s not going to be marks, but it will be delete item when… and this is going to be the removed item and we will be removing only one, two, three. So I can take that out of the list, and then we’ll be inspecting the list. Looks good to me! Jump in here! This is the test running; we have a failure.
00:55:18.200
Right, so in this case, there’s no prop! Well, it’s not finding the remove item function! But, yeah, okay, cool! So if I jump back into the code now, we have this app.jsx, and we are rendering a list of items. We’ve got up here a function—oh, that’s what remove item does! Alright, we have the actual implementation that helps! Yeah, yeah! Maybe if we pass that function remove item down to our list, then I think we should probably see a passing test now!
00:58:40.890
Yeah, but the job’s not over yet! We should probably jump in the browser for an acceptance test to make sure it actually does what we think it does! Yeah! Before I didn’t even think of doing that! So if I add an item here to our items list— you can see we add an item, but there’s no way to delete it!
01:01:00.100
Yes! We’re not finished yet! On the single item, if I go back here, we have an item test somewhere in here. Probably we’re gonna call a—hey, you can do that same trick you taught me! Why don’t you just copy that block above? It’s gonna be very similar to checking the checkbox. Oh, you’re right! It is gonna be very similar, much the same!
01:02:49.950
So what it’s gonna do is it’s gonna call remove item once you get that one for a while! We’re going to click this time. We’re not looking for a checkbox anymore; we’re looking for a button! I’m gonna click that with mock remove item? Yeah, cool! And we should probably have a new failing test.
01:04:20.820
So what we've got here—methods simulators need to be run on one node found zero—and it couldn’t actually find the button! So do you want to have a crack at implementing? Yeah, so there’s no button! I suppose jumping from the test to the actual item? The easiest thing would be to throw in a button, and if I say that, it should not fail on the same spot—and it hasn’t because that simulator was up there! But now it has complained that it hasn’t called mock remove item when it’s clicked! So in here, I need to actually do an onClick!
01:06:55.640
Oh yeah! Yeah! Good pickup! An onClick, and I want to call a function which is remove my son with the ID! Okay, I can jump back in here and it should be a green test—that’s really good! Oh! Do you want to just make sure it does what we think it does? Right, good one! Let's jump in here about what our refresh—not fresh; I turn one and two and there is a button!
01:12:50.360
I agree! And stepping back to draw it up all on the whiteboard really helped to get both of us on the same page! There are a few things that didn’t go so well, though! Yeah, we’re on the wrong slide! Sorry! Yeah, well actually now that I think of it, they were a distraction! Also, one or two… oh! I can recall a lot more than one or two! You were playing on your phone, switching out my pants every two minutes! Ah! And not to mention you clipping your nails at the desk.
01:14:03.270
Yeah, maybe I should’ve left that one for him. But you know! You also seemed a little bit unfocused when I came back from my run because you were dropping burger and sweat all over me! I definitely think it was more productive to take that longer lunch break in that case! Well, look! In the end, it did work out, but maybe next time we pair, if we had some basic guidelines to get started, we could make it work more effectively sooner!
01:16:37.577
That's right! And the first thing on the slide there already is probably to sort out some ergonomics! Once we both had equal access to the machine it was much easier for us to both contribute! Look! That’s a great starting point! Another one might be to eliminate all distractions right from the beginning! Also, if we take regular breaks!
01:18:06.599
Well, there’s still plenty of opportunity for things like social media, tea breaks, snacks, and personal hygiene! Outside of caring! Focused on rice! And lastly, regardless of how small or simple the work seems to be, talking through it and coming up with a plan early on means we can focus sooner.
01:19:53.551
And most importantly, we both have an opportunity to contribute our ideas to pair programming! Precisely! You don’t need much to get started; just a few simple guidelines and an open mind! I hope you’ve enjoyed my presentation!
