Lullabot's Senior Front End Developer, Helena McCabe talks React, working for The Grammy's, Accessibility, and what the heck happened to the Brontosaurus?
Florida DrupalCamp Session:
- LIVING PERSONAS: A HANDS-ON ACCESSIBILITY EXPERIENCE
Episode Guests
Helena McCabe
Helena is Lullabot's friendly Technical Account Executive. She's based out of Orlando, Florida. She loves dogs, web accessibility, and unusual flavors of ice cream.
More about HelenaMentioned in this Episode
Transcript
Transcript
- Chris:
- Today we're going behind the screens with Helena ... oh, I almost called you Helena Zubkow ... with Helena McCabe. You started at Lullabot as Helena Zubkow. You also started as a front-end developer, and now you're a senior developer. So what sorts of projects are you working on? Senior front-end developer, I should say, and accessibility advocate. What projects are you working on currently?
- Helena:
- Well, the project that we just finished was for the Grammys, and because the Grammys were just the other day, the project's all wrapped up. It went really well. Really fun project. It was a short timeline, and we got to play with React for that, so it was really an exciting challenge.
- Chris:
- Was this your first React project?
- Helena:
- No, Lullabot.com is also on React, and I've worked on that as well.
- Chris:
- What was something really challenging about the Grammy project that you had to overcome that was different from other projects you've worked on?
- Helena:
- I think the really tricky part about the Grammy project was that we were developing it independently from the Drupal site that we were setting it into, so we had it finished and it was looking really nice, and then when we actually placed the widget into the Drupal site, a lot of things were broken, because their code had things that were overriding. So we had to go back and smooth all those crinkles out once we set it in its place.
- Chris:
- Interesting. I haven't worked with any sort of React frameworks yet, integrated into a site. I'm assuming it was a Drupal 8 site. Or was it Drupal 7?
- Helena:
- I think they're running on D7, but I'm not positive.
- Chris:
- Interesting how separated these disciplines have gotten now. When you're using React, you might not even know. All you know, you've got an API that's coming in, feeding you data. When that all came together, some of the data that was being fed through the API didn't match up with the React templates? Is that a fair way to say it?
- Helena:
- I'm not sure. From what we were doing, it was almost like a stand-alone widget. We weren't interacting with Drupal as much as you'd think, especially on my side. I know Mark was building a lot of the functionality, and Matt Kleve and Nate were working on feeding the data from Drupal into that JSON file that we were pulling in for the React component.
- Chris:
- Ah, I see. Interesting. So are you excited about React? Do you want to do more of that work, or how does that fit in with your career so far as a front-end developer?
- Helena:
- Yeah, I think React is really exciting. It has a lot of great applications. I do sometimes worry that people want to use it where it shouldn't be used, just for the fun of using React. It definitely has perfect applications, but I think it's best to use it when it's a good fit, like it was for this project.
- Chris:
- What's a good example of a place where ... Give some advice for somebody who wants to really React. What's a good example of something they should steer away from? What is one of those using it for the sake of using it scenarios?
- Helena:
- If you're on a site where your content is very simple and doesn't have a lot of things that would be updated very frequently. React is really strong when you have something like a social media site or something with a lot of interaction, where there's a lot of states that are going to change or properties that are going to change as you're using it. If you just have a simple blog, you really don't need React for something like that.
- Chris:
- I see. That makes sense. Along with the React work that you've done recently, you're also a very big accessibility advocate. We've heard you on the Lullabot podcast many times, and you and I started the Accessibots, Lullabot's internal sort of unofficial accessibility working group. And you've got something planned for DrupalCon with a few other people, so I want to hear about some of the things you've done with accessibility lately and this panel that you've got set up.
- Helena:
- The panel is going to be really exciting. We're talking about accessibility in core, and that was Carie's idea, so it's going to be Carie and Dan and Mike Gifford, which I'm sure everybody in the Drupal accessibility world knows. Yeah, we're really excited to do it.
- Chris:
- So it's an open panel, the four of you, and you'll have topics to talk about, or should we bring questions to it?
- Helena:
- I'm not sure.
- Chris:
- Ooh, so it's probably a good idea, bring your questions anyway. I'm sure you guys have plenty to talk about.
- Helena:
- Yeah. Oh, we'll take questions, I'm sure. Yeah.
- Chris:
- What other accessibility work have you done lately? Was there anything particularly tricky with accessibility on Grammys?
- Helena:
- As far as the Grammys, no, there wasn't that much that was tricky, accessibility-wise, because the whole widget was really pretty straightforward. We did have to make some considerations for things like the gallery, to make sure that people could page through the arrows without actually having to click on them. Oh yeah, that part was a little tricky accessibility-wise. The initial pace that the slides auto-advance through to keep that content moving was so quick that there was some concern that if someone were using a screen reader or using an assistive mobility device that they wouldn't be able to page back to those interactive buttons in time before it would just page through again. So we slowed that down just a little bit.
- Chris:
- Ah, those details, a lot of people would probably miss. It's very slight things, but important things.
- Helena:
- That's the real challenge of accessibility, and what I love about it is that you're not just considering one set of needs. I mean, disabilities are very diverse, so you need to look at each component from quite a few different angles of ability.
- Chris:
- What do you think is the simplest piece that people most commonly overlook? Or maybe just the most commonly overlooked piece of accessibility that people could be fixing very simply?
- Helena:
- I think keyboard is the most important thing, because if you can nail keyboard, then you're serving people who are blind, low-vision, and have limited mobility all at once. So that's your hardest-hitting and easiest thing to do.
- Chris:
- So that would be navigating the site just using the keyboard by itself?
- Helena:
- Yep.
- Chris:
- You know, Drupal, especially Drupal 8 now, has taken a lot more of that into consideration. What's your advice for someone who needs to do that for their site, or they're hearing this and thinking, "Oh, I should really get in there"? What's the right approach or how to test that?
- Helena:
- Your best bet is to, you know, when in Rome. Try going through your site without using your mouse. Just use the tab key to try to tab through things, and use the enter key to try to click on things, and make sure that you're able to access everything by a tab, including your interactive states. When you're tabbing through, you don't want to turn off that blue fuzzy box without replacing it with any other kind of interaction that would visually indicate where you are, because it's not always blind users who are keyboard navigating. And a sighted user who's doing that needs to be able to see where they are on your site, so that they're not just lost while they're tabbing.
- Chris:
- So that would be, in CSS, hover states along with focus states, the pseudo classes, right?
- Helena:
- Exactly. So whenever you do a hover state, just add a focus state as well.
- Chris:
- Nice. That's a very good one. And you can create some really nice designs that way too, by having the tab through the focus states.
- Helena:
- Yeah, that was something that Syfy was really enthusiastic about. Once we talked to them about accessibility and why that's important, they were really, really jazzed about it, to the point where they had their design team draft up some different hover and focus states for our team to implement. So they got involved, and it was a great collaboration.
- Chris:
- Excellent. If you had a pet project that you could work on, and had, let's say, unlimited time, what's your pet project, the one thing you really want to be working on right now?
- Helena:
- A client project or a fun project?
- Chris:
- Fun project.
- Helena:
- Well, I'd want to build the new Accessibots site.
- Chris:
- Ah, nice. Yeah, we've been neglecting that a bit.
- Helena:
- Yeah, there's some cobwebs. I know you started spinning up something new.
- Chris:
- I did, when I had a break. I started putting some pieces together in a Drupal 8 site, and then I got pulled back onto a project and have not gotten back to it yet. I also started a podcast in the process and overloaded myself a bit.
- Helena:
- Well, as these things go.
- Chris:
- Admittedly. Yeah.
- Helena:
- But now I have a break coming up, so maybe I can pick up where you left off, and we can get this show on the road.
- Chris:
- That would be great.
- Helena:
- Strap a rocket to it, as we say.
- Chris:
- Yes, and we need to get Wes back involved too. So make sure everyone yell at Wes Ruvalcaba on Twitter and tell him to get the site up-to-date.
- Helena:
- Wes, Wes, Wes.
- Chris:
- All right. I love this question. If the internet was gone tomorrow, we didn't have to worry about accessibility on web pages, what would you do?
- Helena:
- Ooh. I guess I'd go dig up dinosaurs.
- Chris:
- That is the first I've heard of that answer. Tell me more about this dinosaur thing.
- Helena:
- Well, I minored in paleontology before I switched over to tech. That was my first career goal. Turns out I didn't have enough money to be a paleontologist, because you have to be pretty rich or get someone to give you a grant. But if there was no internet, that's what I would go do next.
- Chris:
- Any particular place in the world, or any dig that you're particularly excited about?
- Helena:
- I'd probably go to Morocco or Egypt, because that used to be the most lush rainforest on the planet, back when we had dinosaurs, so they have some really exciting species over there. Go dig in the desert.
- Chris:
- Interesting. And you're the one who brought it up at a presentation that the brontosaurus is a myth?
- Helena:
- Not anymore. The brontosaurus's status has been restored, so we have the brontosaurus again.
- Chris:
- What was with that? What happened there?
- Helena:
- Well, initially it was a big fight between Cope and Marsh. They were two paleontologists a really long time ago, and in their haste to compete with each other, we got the apatosaurus, and then we had an apatosaurus with its head installed on the tail, and that's what we called the brontosaurus. That was a whoopsie, but it turns out there was actually another species that was very similar that is now the brontosaurus.
- Chris:
- Aha. So it's back.
- Helena:
- It's back.
- Chris:
- Not like Pluto, still hanging out there as a pseudo-planet. It's a full dinosaur again.
- Helena:
- Yeah, don't buy that viral rumor that Pluto's back, because it's not.
- Chris:
- Okay. You are familiar with the Drupal module space.
- Helena:
- Yeah.
- Chris:
- Okay. I haven't asked this question in a while. What is your spirit module?
- Helena:
- Ooh, my spirit module?
- Chris:
- Yeah. I should have given you a heads-up on this one.
- Helena:
- Yeah. I guess Views, because it can anything, and so can I.
- Chris:
- Aha. Excellent. I love that answer. That is great. All right, finally, is there somebody you'd like to share some gratitude or some thanks with, who gave you a little push along the way when you needed it?
- Helena:
- Oh my gosh, so many people. I mean, really everyone at Lullabot is ... it's just such an amazing place. But I guess I have to send a big shout-out to Carrie Fisher too, because she is my partner for the next talk at Florida DrupalCamp, and she is amazing, and she created the accessibility style guide on Github, so if you haven't checked that out, it's a ton of wonderful accessibility resources and widgets and code you can pull from freely and customize.
- Chris:
- Oh, that's excellent. I'll make sure I put links to that in the show notes. But promote that link. Where do they find that on Github? Or do you have that handy?
- Helena:
- I don't have it handy.
- Chris:
- Okay. I'll make sure we put that into the show notes, then, for anyone who's interested in finding that. You said Florida DrupalCamp as well. Are you speaking anywhere else? We've got Florida DrupalCamp, we have the panel at DrupalCon Nashville.
- Helena:
- I don't have anything else on the roster yet, but we'll see how that goes.
- Chris:
- But you're open to being solicited freely?
- Helena:
- Very much so.
- Chris:
- Excellent. All right. Helena, thanks for taking a few minutes. This has been great.
- Helena:
- Thanks, Chris, I appreciate it.