Podcast appearances and mentions of jen luker

If you’re someone that suffers from Imposter Syndrome, tune into this episode. Host Adam Cuppy chats with Jen Luker about dealing with Imposter Syndrome and using it to incite change.Featured Links:Find Jen on Twitter at: https://twitter.com/knitcodemonkeyCheck out Jen online at: https://www.jenluker.com/#/Other Opportunities to Connect:Weekly streams at Zeal's Twitch StreamWeekly front-end tips at Amy's Selfteach.me Youtube ChannelReach out at Our Website

Jen took us to the beginning of her STEM journey, with the goal to walk the footsteps of Ayanna Howard, but life wanted otherwise. Nevertheless, she found her way to coding. We nostalgically talked about dev-jobs in the 90s and early 2000s. We spoke about web development, accessibility and advocacy.Here are the links of the show:https://www.twitter.com/knitcodemonkeyhttps://www.deque.com/axe/axe-for-webTalk from Marcy Sutton - Where in the Stack is Carmen Sanfrancisco?https://www.youtube.com/watch?v=zxsUsgBYCIcAyanna Howard: https://howard.ece.gatech.eduCreditsMusic Aye by Yung Kartz is licensed CC BY-NC-ND 4.0.Your hostSoftware Developer‘s Journey is hosted and produced by Timothée (Tim) Bourguignon, a crazy frenchman living in Germany, who dedicated his life to helping others learn & grow. More about him at timbourguignon.fr.Gift the podcast a ratingPlease do me and your fellow listeners a favor by spreading the word about this podcast. And please leave a rating on the podcasting platforms. This is the best way to increase the visibility of the podcast. Find all the links here: https://devjourney.info/subscribe.htmlPatreonFinally, if you want to help produce the podcast, support us on Patreon. Every cent you pledge will help pay the hosting billsSupport the show (http://bit.ly/2yBfySB)

In this episode, Jen Luker and I discuss what it means to code accessible careers and making sure that your organization is building accessible applications for EVERYONE, including employees.Transcript can be found at the link below:Coding Accessible Careers TranscriptFollow Jen on twitter @knitcodemonkeyCoding Accessible CareersA11y and React, Why is it important?Johnny Bell - React Rally 2019Spectrum Chrome ExtensionReact SummitDeque aXe Core

Homework: Watch at least one of the talks linked below!Jen puts knitting before the fact that she is a senior software engineer when she defines who she is; this doesn't make her a worse engineer than someone who eats, sleeps, and breathes code. With each new thing you learn, whether you're good or bad at it, you'll tend to discover something about it that teaches you something new. With everything Jen learns, she tries to bring it back into the ways she interacts with the world, whether that's through some art medium or programming. Technological progress has been an evolving process of standing on the shoulders of giants, one after another, learning how to take something they'd seen before and applied it to some new technology or new problem they were working on at the moment.The short version is that you can find inspiration virtually anywhere, and not to close off those points of inspiration just because you're focusing on a computing problem.Transcript"Jen Luker Chats With Kent About Finding Inspiration From Anywhere" TranscriptResourcesTEDxBeaconStreet: Knitting is Coding; Lindiwe MatlaliTEDxRiga: Crocheting Hyperbolic Planes; Daina TaiminaTED: A delightful way to teach kids about computers; Linda LiukasJen LukerTwitterGithubWebsiteStrongish FiberLinkedInKent C. DoddsWebsiteTwitterGithubYoutubeTesting JavaScript

Jen tells us to start accessibility today, to start with one thing. Then to do one more thing, and then one more. Thanks to Twilio for sponsoring the transcript for this episode. Make sure you have a look at: Their blog: https://www.twilio.com/blog Their channel on Youtube: https://www.youtube.com/twilio Diversity event tickets: https://go.twilio.com/margaret/ Transcript Nic:    Welcome to… Continue Reading E73 – Interview with Jen Luker – Part 2

Jen Luker tells us, among other things, that with thoroughness comes confusion – if you’re trying to learn all of WCAG and ARIA at once, you’ll get overwhelmed Thanks to Twilio for sponsoring the transcript for this episode. Make sure you have a look at: Their blog: https://www.twilio.com/blog Their channel on Youtube: https://www.youtube.com/twilio Diversity event… Continue Reading E72 – Interview with Jen Luker – Part 1

Jen Luker is a lead software engineer at Formidable Labs, keynote speaker, host of @BookBytesFM, and expert knitter. Chantastic asks her about the Fiber Arts Corner at React Conf, the history that textiles and programming share, and how we can make our apps more accessible.

Jen Luker is a JavaScript developer turned manager. She is an expert on tech accessibility. During our talk, we touch on topics ranging from semantic HTML to sexism, Jen has had an incredible journey and I'm humbled to have had the opportunity to record it. Jen's internet home: https://www.jenluker.com

Recording date: 2018-11-13 John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/danwahlin Jen Luker https://twitter.com/knitcodemonkey Resources: section 508 https://webaim.org/standards/508/checklist The a11y project https://a11yproject.com/ Jaws https://www.freedomscientific.com/Products/Blindness/JAWS ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA The https://www.starbucks.com/careers/ Starbucks career site WCAG https://www.w3.org/TR/WCAG20/ Jen helped author https://www.npmjs.com/package/eslint-plugin-jsx-a11y Husky https://www.npmjs.com/package/husky Google A11y https://developers.google.com/web/fundamentals/accessibility/ Lighthouse https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en Azure text to speech https://azure.microsoft.com/en-us/services/cognitive-services/text-to-speech/ amazon polly https://aws.amazon.com/polly/ Amazon Polly on Dan's blog: https://blog.codewithdan.com/8-tips-for-maximizing-your-productivity/ *Someone to follow * Gleb Bahmutov https://twitter.com/bahmutov Tejas Kumar https://twitter.com/TejasKumar_ Rick Strahl https://twitter.com/RickStrahl Transcript { credit to Jen Luker } (Intro Music) 0:00:06.6 Voiceover Welcome to Real Talk JavaScript, the weekly talk show with advice and insight into the technologies and practices currently being used to build web applications in the real world. Each week John Papa and Ward Bell talk to industry experts about their experiences writing, deploying and maintaining web applications in HTML, CSS and JavaScript. And now, here are your hosts, John and Ward. 0:00:40.0 John Papa Welcome back to Real Talk JavaScript, this is Episode 11: Accessibility in JavaScript Apps and this week I’ve got my co-host, Dan Wahlin. How’s it going, Dan? 0:00:48.8 Dan Wahlin Going great, John. 0:00:49.9 John Papa And Dan, today we have a special guest of Jen Luker. How’re you doing, Jen? 0:00:54.6 Jen Luker Doing pretty well today. How are you? 0:00:56.0 John Papa We’re doing pretty good, thank you very much. Jen is a Senior Software Engineer at Formidable, BookBytes Podcast co-host, RxJS Learning Team member, and eslint-plugin-react-native-a11y core contributor. Jen has spent a majority of her career as a full stack developer but has a particular fondness for frontend technologies, thus why she’s here today. And she trains others in ReactJS and Accessibility, and enjoys removing obstacles that slow down productivity and loves optimizing webpack builds. When she’s not finding solutions or mentoring others, her spare time is spent spinning yarn from raw wool and knitting. She’s even better known to 3D print her own tools for the job. 0:01:33.3 Dan Wahlin Nice! 0:01:34.0 John Papa Welcome to the show, Jen. 0:01:35.2 Jen Luker Thank you! 0:01:36.0 John Papa There’s a lot in there. I mean, you’re not- 0:01:37.9 Jen Luker Yeah… 0:01:37.9 John Papa Just a JavaScript coder with ReactJS. It looks like you do a lot of teaching, and knitting! That’s pretty cool. 0:01:44.1 Jen Luker Haha, it’s… I like to say that I’m a knitter first and then a programmer second. So, it’s definitely a large part of my life. 0:01:53.3 John Papa You mean you do something besides coding all day? 0:01:56.1 Jen Luker It happens. 0:01:56.9 John Papa & Dan Wahlin (laughing) 0:01:58.9 Dan Wahlin You know, I have heard more and more people with knitting now. I, like, I hear that, I also do a lot of training, and I hear that all the time now, so it must be a big upcoming... trend I guess, I don’t know. 0:02:11.5 Jen Luker I think it has a little more to do with the fact that what we do as developers is often fleeting. It’s something that exists online, it’s not something tangible. Knitting is a programming language that sticks around long enough for you to wear it. So it’s- 0:02:28.9 John Papa I see. 0:02:30.4 Jen Luker Definitely caters to those that need that tangible aspect in their lives. But one of the coolest things I’ve seen knitting be used for, not just, you know, cryptography World War II, but also things like using it as a programming simulator for people that don’t have access to computers, such as people in Third World countries. So it’s definitely something that caters to the mind of programmers. 0:02:56.6 Dan Wahlin Interesting. Yeah, I’ve… Some of the people, too, have also mentioned it just helps them, it’s very relaxing they said. I don’t know how to knit, I haven’t tried it, but it looks fun. 0:03:04.3 John Papa So now, when we see Dan at his next conference, right before his talk, with a ball of yarn and some needles, we’ll know exactly why that happened. 0:03:10.7 Dan Wahlin Yeah. I’ll say, “Jen inspired me!” 0:03:13.0 John Papa & Dan Wahlin (laughing) 0:03:14.1 Jen Luker Well, you do know that at React Conf they actually had a fiberarts circle that I ran, so I ended up teaching quite a few people to knit, and crochet, and spin at that conference. So- 0:03:24.2 Dan Wahlin That’s so cool! 0:03:25.2 Jen Luker It is a possibility. 0:03:26.3 John Papa Huh! 0:03:26.8 Dan Wahlin There you go. 0:03:27.4 John Papa That is so cool. Yeah, I think we all have different ways of dealing with non programming mindsets. Like, what do you do when you’re not coding? And some people exercise, some people meditate, some people draw, some people play music, some people knit! So, I think it’s great to have something to kind of work different parts of your brain. 0:03:47.0 Jen Luker Definitely. 0:03:47.7 John Papa Hey, Dan! You had a question for us to kick things off about accessibility. 0:03:50.7 Dan Wahlin Yeah! So, I think we hear a lot… I used to work, one of my first jobs out of college was at a government agency and so there it was kind of required to learn about section 508 and things. But with corporations and with a lot of the developers I work with, I’ll have to admit I think we’re a little more in the dark on… 0:04:11.2 What are some of the ways, like, if I were to say, “Hey Jen, what are the key ways from a high level that I could add some accessibility things and like, who can I help with that?” Because I think a lot of us, we think, “Oh, well I just add a title to an image and call it a day.” 0:04:28.0 Jen Luker Mm-hmm (affirmative). 0:04:28.5 Dan Wahlin And I suspect there’s a lot more to it than that. 0:04:30.6 Jen Luker There is a lot more to it but there’s different ways of approaching accessibility on the web. One of the ways is technologically, which is oftentimes what developers deal with, but that’s only 30-50% of the problems you’re going to find in accessibility issues. The other half is going to be content and context and verbiage and language and ways that you say things that make it easier for people that have different disabilities, like neurological issues, or language barriers from interacting with the content on the site. 0:05:08.5 To deal with the technological side though, I tend to point people towards the aXe, Chrome, and Firefox extensions to begin with because it not only runs like, a technological audit on your site, but it also gives you more information. There’s always links that explain why there’s a problem, why the types of people that you’re focusing when you fix an issue, and different ways that you can fix an issue. So it’s a really great educational tool for just getting started. 0:05:43.6 John Papa Excellent. 0:05:44.2 Dan Wahlin Yeah, see, you already hit on a couple things like, you mentioned neurologically how maybe people interpret or have the context for different text. And I actually have a son with some disabilities so I’m very sensitive to this whole, you know, concept. It’s amazing how when you’re not around it, you just don’t think about it. But when you’re around it, it becomes, you know, your whole world. A big deal. So, you know, that’s when I hadn’t ever heard of- Can you tell me a little bit more about that? Is that related to the context you put into, like, the site, then, that helps them understand it better? Or how’s that work? 0:06:18.5 Jen Luker It is. Something that they recommend, or things that I’ve seen regarding recommendations for the level of content does vary depending on who your audience is. If you are a technical journal then chances are you’re going to be catering to a much more technical audience. However, if you’re a generic website you may want to keep your verbiage as low-level as possible, like anything between a third grade level to a high school level education, to allow for people to better understand the words that you’re actually putting on a page, and what the words are trying to tell you. 0:07:00.0 Like, you’ve got one side where you have people with ADHD that is not going to make it to the end of a 6-paragraph description of what it is you’re supposed to do. And then you have people on the other side of the spectrum that really need step-by-step instructions of what it is they need to do to get through your form. So trying to find that happy medium, or trying to find a way of giving a TLDR and then a longer context for different sides of that issue, is also something you may want to look at. 0:07:31.1 Dan Wahlin Interesting, yeah. I’ll have to admit that’s something that I haven’t really, you know, you mentioned third grade through, maybe, high school level and I think, as developers, we, especially if we’re in charge of putting some of the content, you know, out there ourselves, that’s something that I don’t think I’ve really thought through as to, you know, who’s my target that’s going to be reading this? As far as, you know, you think of, “I know these words and I’m sure everyone else will know these words.” But it sounds like you’re a lot better off if you can kind of reign that in a little bit, make it more focused. 0:08:02.3 Jen Luker Something that I’ve found that’s extremely different for even a dev when they’re onboarding into a new company is learning the names of things, and learning the acronyms for things. So if you’re using customized names for your products or your processes or you’re using acronyms, then you’re already losing part of your audience who just doesn’t understand what those things mean. 0:08:28.6 John Papa So, I think that’s a great point. This isn’t just for accessibility for, even for people like, let’s just say vision-impaired on one side. This is for anybody who doesn’t necessarily know your vernacular. 0:08:38.8 Jen Luker Exactly. 0:08:39.8 John Papa You go to a new company, what’s the first thing they do? “Hey, today we’re going to use the TLC with the EBY and then we’re going to talk with the XJ Bots.” And you’re like, “...What does any of that actually mean?” 0:08:49.4 Jen Luker I recently onboarded with a company and someone was very nice enough to put together a cheat sheet of acronyms for me and it was five pages long. 0:08:57.5 John Papa (laughs) 0:08:58.0 Dan Wahlin Wow! (laughs) 0:08:59.0 John Papa When I went to Disney one of my first things they did, like my first week there, was I got a book like that, too. 0:09:05.3 Jen Luker Mm-hmm (affirmative). 0:09:05.8 John Papa And the funny thing at Disney was the every TLA, which is a three-letter acronym which is kind of funny, the first letter of all of them begin with D for "Disney". Which really- 0:09:14.3 Jen Luker Yeah. 0:09:13.8 John Papa Only left two letters for all the rest. (laughs) 0:09:16.8 ALL (laughing) 0:09:17.9 John Papa I don't know if it's changed since then though. (laughs) But let's, let's start back. So on that same note, there's something I've seen a lot of over the years, and when I first encountered this, it's not an acronym but it's an abbreviation, I didn't know what the heck it meant. But, and maybe there's other people in the same boat so I wanted to talk about it with you. A-11-Y. 0:09:39.1 Jen Luker Yes. 0:09:40.0 John Papa Can you explain what that is and why people see that? 0:09:42.6 Jen Luker So back in the days of Twitter when there were only 140 characters, writing out a really long word like "accessibility" which is 13 letter long, took up a lot of space. So due to Twitter and their awesome audience, they shortened it to A11Y which is A-, the first letter in "accessibility", 11 letters, and then Y-, the last letter in "accessibility." You see the same thing with "Kubernetes" with K8S, or "internationalization" which is I18N. So any of those really long words end up getting shortened to first letter, number of characters in between first and last letter, and last letter. 0:10:26.0 John Papa Yeah, that's... that's kind of funny, you know? Once I realized that, I started going, "You know, I've been using I18N for years and I didn't know why it was called that." 0:10:33.1 Jen Luker Mm-hmm (affirmative). 0:10:33.2 John Papa Until I discovered it through A11Y, 'cause we, our nickname for it when we were talking about it was "ally". 0:10:39.0 Jen Luker Which I think is highly appropriate. 0:10:40.7 John Papa Yeah, yep. It kind of is a... 0:10:42.8 Dan Wahlin It fits it. 0:10:43.6 John Papa It kinda worked for us, too. 0:10:44.8 Dan Wahlin Yeah. 0:10:45.3 John Papa So, Dan, you're really D1N and Jen, you're J1n. It doesn't really work for our short first names, does it? 0:10:50.8 Dan Wahlin & Jen Luker (laughing) 0:10:52.0 Jen Luker Well, Jen is already shortened. 0:10:53.9 John Papa Yeah, yeah. It doesn't really help. What if your name is Al? What do you do? You only have two letters. 0:10:58.4 Dan Wahlin Yeah, there you're out of luck. 0:10:59.3 Jen Luker First and last. 0:11:01.0 John Papa A0L I guess? AOL! There you go! That's what AOL stood for. 0:11:05.4 Dan Wahlin Al. 0:11:06.4 John Papa The secret has been revealed, right here. 0:11:07.5 Dan Wahlin Who knew? 0:11:08.3 Jen Luker (laughs) 0:11:09.0 John Papa (laughs) So accessibility. One of the things I think that was really eye-opening to me was understanding how many people this actually affects. When I first started getting into it many years ago on some large projects the things that were introduced to me were,"Well, we're doing this because there are, you know, millions of people who are affected by this and we're really trying to make the web more accessible." You know, it sounds like a grandiose thing, but that was true. We were trying to make our websites more accessible to all these people who either couldn't use our websites, or they could but with much difficulty. 0:11:43.0 Jen Luker Right. 0:11:43.6 John Papa Now, what kind of scale is this really at? Is it just one guy down the street? Or is it, you know? How big is this? 0:11:48.8 Jen Luker Well the World Health Organization estimates that about 15% of the entire world has some sort of disability. This is a highly conservative number. Not everyone wants to identify with the fact that they have a disability. There's definitely a level of taboo that comes with the word "disability." So- 0:12:13.3 Dan Wahlin Yep, I can vouch for that. 0:12:15.6 Jen Luker Right? So there's a lot of people that will not identify with that label and therefore the 15% is, in fact, a very limited number. You know, if you're looking just in the U.S. they estimate, as of the 2012 census so it's been a while, 19% of people, so almost 1 in 5. If you're looking at other numbers we're looking at 8% of you men who are colorblind of some fashion, and it's not an on and off switch, there's a varying degree. There's also people with multiple versions of color blindness. There are people with very slight color blindness so it's almost unnoticeable. The range is quite large and about 1% of women also are colorblind. So you're looking at about 4.5% of the population as a whole just for one type of disability. 0:13:10.8 John Papa That's fascinating, and it hits, at part for me, that's at home, too. 'Cause I also identify as being partially colorblind, I guess you could say. I'm on that scale. 0:13:19.8 Jen Luker Mm-hmm (affirmative). 0:13:20.4 John Papa I don't have full blown color blindness because I can still determine some colors but others I have struggles with. 0:13:25.8 Jen Luker Mm-hmm (affirmative). 0:13:26.4 John Papa But I've also found that when I identify with this I get a lot of backlash from people of, "Well you're not really colorblind." Or, you know, there's a lot of disbelief. It's almost like it's become, "Oh, I'm sorry." So I can totally empathize with you on why people wouldn't want to identify with any of these things ‘cause it's almost like they put them in a category of, "Oh, well... the pity category." 0:13:48.0 Jen Luker Right? And there's differences in color blindness. It's not just grayscale in everything. There's the red/green, there's blue/green, there's you know, the trichotomy side, there's... there's a lot of different variations, and then there's some people that can see the differences between but the colors are all still muted. The more muted they are the less likely you're going to be able to tell the difference between them which really starts to rear its ugly head when you're looking at images or text color changes. So, it gets complicated fast. 0:14:25.8 John Papa Is this the real answer to what color that dress is on the internet streams? 0:14:29.6 ALL (laughing) 0:14:31.5 Dan Wahlin Oh my gosh. 0:14:32.5 Jen Luker That's a whole other fascinating concept- 0:14:34.6 John Papa (laughs) 0:14:34.9 Jen Luker When it comes to how each person perceives color- 0:14:39.2 Dan Wahlin Yeah. That was- 0:14:39.1 Jen Luker And how no one actually perceives them the same way. 0:14:41.5 Dan Wahlin That was pretty freaky, actually. 0:14:42.9 John Papa Yeah, I know. (laughs) Yeah, I get that a lot from folks on, themes for example. I like to create themes for VS Code or for other tools and when you create a theme people get very personal over what theme they choose. And the reason I created my own is because I like mine to look the way I look and it makes me feel good, it makes me more productive, but not everybody likes one theme. There's probably, you know, 100 great themes out there. It's because everybody looks at things differently and they have varying degrees of sensitivity to the colors, too. 0:15:14.0 Jen Luker Mm-hmm (affirmative). 0:15:14.4 John Papa So, you're building an app and you have to pull accessibility in. What kind of apps should use accessibility? 0:15:21.1 Jen Luker All of them. 0:15:22.0 John Papa Good answer. (laughs) 0:15:23.5 Dan Wahlin Yeah, it's a good one. I was gonna say, "Great answer." 0:15:24.3 Jen Luker (laughs) 0:15:25.0 John Papa What does it cost for money? I mean, I a business manager now. Does it cost more money? How much more time is it going to take? Do I need to teach my people how to build web apps for accessibility? What kind of things are affected by it? I don't have time for this, no, let's not do it. I bet you've heard all these things? 0:15:40.3 Jen Luker Oh yeah! Absolutely. 0:15:41.7 John Papa How do you answer those? 0:15:42.9 Jen Luker Well, there's a couple different ways. The not so passive-aggressive way is to find the person closest to them that's colorblind and then sit them down and say, "Can you explain to them why we're not going to write the website in a way that they can use it? This person in that company that works for you." That tends to drop, you know, that tends to pull up some people's shorts. 0:16:06.6 But the other ways is you can start talking about those financials. If you're looking at the return on investment take those 15% of the population. If you are, you know, a $10 million company, by making your website accessible it's an $11.5 million company, and that's just your slice of the 15%. Only 1 in 10 websites is accessible, which means you still have the opportunity to corner the market in your region, your demographic. That means that that 15% could very well be larger than the rest of the people that use your website. 0:16:53.4 Dan Wahlin That's an interesting concept from a, you know, purely financial standpoint. I’d never even thought about that, even cornering your own market. 0:17:00.1 John Papa And that's what a lot of people make decisions on, right? If you're gonna make more money, it's still making- Think like a business manager. You're telling me my $10 million app I can pull in $11.5 million instead; an extra 1.5 million a year, which is, pick some fake numbers for a minute. 0:17:13.9 Jen Luker Mm-hmm (affirmative). 0:17:14.5John Papa What's the cost though? Of building that app, what's the additional cost? 0:17:18.7 Jen Luker If you're designing it from the ground up it's very little additional cost. So a lot of the major issues have to do with color contrasts. Other ones have to do with making sure, you know, as you've said before, title tags on HTML or hrefs or ALT tags on images. A lot of it has to do with the fact that the platform, HTML, is inherently accessible and we, as JavaScript developers, go ahead and run through and override it and make it inaccessible. So, sticking closer to the platform is usually enough to cover the majority of accessibility issues. 0:18:03.4 John Papa Let's take a quick break for a word from our sponsors. 0:18:05.8 Voiceover Looking to learn more about the state of software security? Check out VeraCode’s recently released report, "State of Software Security Volume 9." This year's report highlights the more important open source vulnerabilities and the latest dev sec-ops trends. Dev sec-ops, by the way, is kind of like "devops" plus "security". This is VeraCode’s most developer-focused volume ever. So don't miss out. Get your copy today by visiting www.VeraCode.com/SOSS for State of Software Security. That's www. v-e-r-a- code.com slash S-O-S-S-. 0:18:47.0 John Papa And we're back. Jen, you were just talking about how you can stick to the platform and that might help you build accessible apps. Can you kind of explain what you mean by that? 0:18:55.4 Jen Luker I usually mean by using semantic HTML as much as possible for the reasons it's made. For instance there's a lot of... A lot of developers that still would rather use a div over a button, but the complexities inmaking a div accessible like a button go deeper than you'd expect. So it's not just adding a highlight, adding text or a keyboard interaction. It's also weird things like, in some versions of ios, if you don't add a cursor pointer in the CSS, ios won't detect that it's a link, even if you tell it that it is. 0:19:39.0 John Papa Hmm. That's interesting. 0:19:40.0 Dan Wahlin Yeah, I don't think I've run into that, myself. 0:19:42.5 John Papa Oh, we hear about semantic HTML a lot, right Dan? About, "Don't use divs everywhere!" But yet, I don't know about you, but a lot of apps I get called in to look at it's like, div craziness. 0:19:52.5 Jen Luker Mm-hmm (affirmative). 0:19:53.2 Dan Wahlin I call it div soup. 0:19:54.7 John Papa (laughs) Div soup! 0:19:55.0 Jen Luker (laughs) 0:19:56.4 Dan Wahlin Yeah. How much, so Jen, are there numbers out there, and I'm sure there are, for people- 'cause I know probably the only program I've heard of would be for people with vision, you know, various issues from they're completely blind to partially. How many different apps are out there? What, is there a number one app that you use to actually read these pages to them? Like, I've heard "JAWS", is that still a thing these days? 0:20:21.1 Jen Luker JAWS is definitely a huge things, particularly for windows systems. Other screen readers would be just the default screen reader that Mac uses. Chrome has its own that you can implement, too. There's a dozen major, major players. 0:20:44.0 Dan Wahlin Okay. 0:20:46.1 Jen Luker So, and not all of them, just like the browsers, read the text or the website in the same way. Even ios and android devices have different readers of their own. So, each one kind of reads things a little bit differently. It's important to be aware of those differences once you start really digging deep into accessibility, especially if you're trying to customize something away from semantic HTML. 0:21:13.5 Dan Wahlin Now does, you mentioned, I mean, the thing that I think most developers probably have heard of are title attributes, and like you mentioned, the ALT on images, things like that. One that probably most people have come across, and you're going to have to correct me if I say this wrong, I've already said "ARIA?" [pronounced are-ee-uh] 0:21:30.7 Jen Luker Mm-hmm (affirmative). 0:21:31.3 Dan Wahlin Is it ARIA [pronounced are-ee-uh] or ARIA [pronounced air-ee-uh?] Is it ARIA [pronounced are-ee-uh]? 0:21:32.6 Jen Luker I call it ARIA [pronounced are-ee-uh]. It's WAI-ARIA [pronounced why-are-ee-uh]. 0:21:34.2 Dan Wahlin Okay then. I'm going with you then. So, okay. See, I'm right, everyone! 0:21:38.6 John Papa & Jen Luker (laughing) 0:21:39.3 Dan Wahlin 'Cause Jen says! 0:21:40.8 Jen Luker Ha! 0:21:42.1 Dan Wahlin Now that's one I've only seen a few of the, I guess you could say core attributes that you can do with ARIA, but do those play a, I would assume, a pretty big role then? With some of the screen readers out there? 0:21:54.3 Jen Luker Yes and no. Going back to semantic HTML, if you're using just HTML then there's really no need for the ARIA roles. The roles themselves are built in to the platform-specific HTML; however, if you are deviating from that plan or you are using something a little closer to HTML5 then ARIA can play a role in making sure that exactly what you want read to a screen reader is defined. So, usually the first rule of ARIA is "Don't use ARIA." But there's definitely a place for it. 0:22:40.9 Dan Wahlin Okay, good to know. Yeah. I think that's one area that, you know, I'm comfortable with the semantic tags and it's good to hear that those are still the, kind of, I guess, goal. 0:22:51.3 Jen Luker Mm-hmm (affirmative). 0:22:52.1 Dan Wahlin But I'm not as familiar with the ARIA stuff. You know, you'll see it, for instance, even in some of the, if you use Bootstrap all, the CSS. 0:22:59.2 Jen Luker Mm-hmm (affirmative). 0:22:59.5 Dan Wahlin I've noticed they'll add it here and there. If you use Font Awesome I've noticed there'll even be some ARIA-type stuff. But kind of one of those where you copy and paste it and don't really know what it does, you know, without looking it up more. 0:23:10.5John Papa You bring up a great point there with Font Awesome, Dan. Font Awesome, if my memory serves me right, you take a icon tag, right? The i and then you almost always have to stick in an ARIA attribute into there because you're effectively making a button, sometimes, out of that. So you're making a button out of an icon, which isn't really a button, and maybe you don't want it to be inside of a button control. Which almost always leads to end up using the ARIA attributes on there. Is that a bad thing, Jen? Or is that, I mean, 'cause that's what I see a lot out there. I mean, just 'cause I see it doesn't mean that it's right. 0:23:45.7 Jen Luker For the most part what you want in a button is text; however, we often use icons for those buttons. If you can possibly wrap it in a button control that would be better than just trying to add ARIA items to the icon itself. However, that is a way to get around that. Ideally you'd add a button, you'd tell the button its title and its value and that's what ends up getting read instead of just an empty icon. 0:24:20.0 John Papa Yeah, I hear you. Ideally, I try to do that as well, and I'm actually trying to pull up some code of where I've done this before to kind of get sense for, you know, "Why did I do that as opposed to actually using a button, in that case?” And I think sometimes it's more about styling and maybe it's just about effort. Like, you could put it inside of a button. If you didn't really want it to look like a button you could then restyle the button so it didn't look that way. 0:24:44.7 Jen Luker It is so easy to restyle a button- 0:24:48.1 John Papa Mm-hmm (affirmative). 0:24:47.8 Jen Luker So that it doesn't actually look like a button. 0:24:49.4 John Papa Yeah. 0:24:49.9 Jen Luker It is so easy. It's like three lines of CSS and suddenly it's just your icon. 0:24:55.9 John Papa I think you're right on that. I mean, and that's actually gets back to a thing of, Daniel you'll laugh at this, it makes me think of Silverlight. (laughs) The old Silverlight days. 0:25:04.2 Jen Luker (laughs) Mm-hmm (affirmative). 0:25:05.3 John Papa Where everything was described as a lookless control. And I kind of wish, in some ways, HTML was like that. 0:25:11.8 Dan Wahlin Yeah. 0:25:12.4 John Papa Whereas, out of the box, a button has a certain look and a feel. I wish it didn't. Like, you had to add those things because I feel like because there already is a standard way these things are represented... Like, you stick a button on a page you get a certain look, and it's almost never exactly what you want it to look like anyway. So maybe if there was a lookless feel to these HTML elements- 0:25:32.6 Dan Wahlin Or at least an option for that, right? 0:25:34.7 John Papa Yeah! 0:25:35.0 Dan Wahlin Where if you want it out of the box, great. But if you don't, here's how you can start from scratch and just add your own CSS in. Which wouldn't be too bad because we typically use, especially for public facing, you know, reset-type CSS, stylesheets anyway. So you could just kind of say, "Nope. Start from scratch and here's what I'm using." 0:25:52.3 John Papa Yeah. 0:25:52.8 Jen Luker Mm-hmm (affirmative). 0:25:53.1 Dan Wahlin But on that topic, Jen. Is, you know, for your... You obviously specialize in this and I saw in some of the info John was sharing with me that you worked on a website that implemented some automated accessibility testing to meet, is it WCAG? Is that how you say the standard there? 0:26:10.5 Jen Luker Yeah. 0:26:11.1 Dan Wahlin WCAG 2.0? Okay. 0:26:12.5 Jen Luker Mm-hmm (affirmative). 0:26:13.4 Dan Wahlin Can you tell us more about, kind of that process? And what you need to do there? 0:26:17.6 Jen Luker I actually worked on the Starbucks Careers Site project that was recently released. The benefit of that project is that when they started with a rewrite they started from design up with the intention to comply with WCAG 2.0 AA accessibility. So it was literally baked in from the design up and everybody was on board with engineering it to be as accessible as possible. So it was very much a collaborative effort between the design team, the different developers that worked on it, and even the engineering managers and the product owners. It was a really great process. 0:27:05.2 As far as the testing goes, we actually went through a few different layers of testing. The very first one is we implemented the eslint-jsx... or the eslint-plugin-jsx-a11y ... ESLint plugin. That (laughs)- 0:27:24.8 John Papa Oh, sorry, wait. Just let me make sure I got that one right. It's the eslint-plugin-jsx-a11y, right? 0:27:30.9 Jen Luker Yes! 0:27:31.8 John Papa Okay. Perfect. (laughs) 0:27:32.8 Dan Wahlin Say that 10 times fast. 0:27:33.7 Jen Luker I know. 0:27:34.0 John Papa Exactly. 0:27:34.9 Jen Luker It's really long. Especially when you start talking about the fact that I wrote another one for React Native. So... 0:27:39.4 John Papa (laughs) 0:27:40.0 Jen Luker It's even longer. That was kind of the first line of defense. It was utilized right there with Prettier, which was great. We used husky to run Prettier and the accessibility linter at the same time before someone could push code to the repo. In addition to that, we moved on to using axe-core as implemented into Jest for unit testing. And then we also use axe-core in Enzyme for end-to-end testing once the content was compiled down to static pages. 0:28:26.4 So this allowed us to hit the developers before they even pushed, hit the unit test of each one to make sure that they would comply if given the ideal data, and then made sure that it was still compliant once the data from the APIs was inserted into the page on a real time level. 0:28:52.2 That essentially meant that at every step of the process we made sure that everything was compliant before it made it to live. 0:29:02.1 Dan Wahlin Excellent. This would be public, I guess, right? Is this where people would go to look for a job? Or... is that what it was? It says the careers website, it looks like. 0:29:10.0 Jen Luker Yes, it was actually the... Yeah, it's just Starbucks.com/Careers. 0:29:14.8 John Papa Okay. 0:29:15.5 Jen Luker It was multiple pages, it had its own menu navigation. Once you actually go to look for a job by submitting your resume and stuff, you're transported out to the portal that they use, which we didn't get to go over, but the careers section of the Starbucks.com website is, in fact, accessible. And they're using those to expand that project. 0:29:43.4Dan Wahlin For people that want to learn more about it learn more about it, obviously I guess you could go right click view source on, you know, the careers site, but is there a recommended site that it out there that's considered a really good, almost like cheat sheet of how to get started adding stuff into your site? 0:29:59.5 Jen Luker There is. WCAG 2.0 website. 0:30:03.1Dan Wahlin Okay. 0:30:03.0 Jen Luker Which we will add to the show notes for this. It is on W3's website. That's usually a great place to go dig in and find out what's kind of covered in compliance. If you dig in deep enough you can find examples of how to implement code in an accessible way. They give different formats of how you could implement a menu, different ways of, you know, drop downs, so they do give you examples that would comply with accessibility compliance that I've found isn't always exactly going to suit your needs but gives you a very good idea of what's going to be necessary. 0:30:46.5 Dan Wahlin Okay. And is there, when it comes to, you know, if I'm vision-impaired, as a, from developer standpoint is there a way to really test that? Short of using like JAWS or maybe one of the built in readers you mentioned? Or is there an actual tool out there than can help you, you know, make sure that what you wanted them to hear is actually what gets heard? 0:31:08.0 Jen Luker It's literally manually testing at that point. 0:31:10.8 Dan Wahlin Okay, I kinda figured. But, yeah I'm wondering if there's anything out there. 0:31:14.4 Jen Luker Something I do want to mention about that is when you are dealing with testing screen readers, among other different types of ... you know, accessibility technologies, assistive technologies that help you. Being cold, not knowing them, and going in and trying to test them actually develops a huge amount of frustration. That can actually develop enough frustration that you decide that it's not even worth it for someone else to have to try to deal with this pain even with something is ideal. 0:31:52.0 What you should do is find someone who uses that technology day in and day out. You'll be amazed at how much faster and much easier they navigate through tools. And something that I have found extremely interesting is how they've learned to adapt their interactivity with your site based on how it's already broken. So it can be very fascinating to see how people that interact with it have their actual pain points, which things aren't, and those aren't things that you're going to be able to identify as just a casual user. 0:32:28.8 John Papa Let's take a quick break for a word from our sponsors. 0:32:32.0 Voiceover Are you building a web application? Need to deliver it soon and don’t have the people to do it? Maybe you’re not sure your company has the skillset or experience to do it. Then maybe we can help. 0:32:42.4 I’m your host, Ward Bell, and my day job is building applications for companies like yours. I don’t do it alone, I’m president of IdeaBlade, a consultancy that specializes in enterprise web application development. We’re particularly strong in Angular, RxJS, NgRx Redux on the frontend, and .Net Microsoft technologies on the server. 0:33:03.2 We’re a small tight knit group of people, hand picked by me, for their expertise, experience,integrity, and team spirit. Maybe we can help you with architectural guidance and hands-on development. And if there’s something we don’t know (and in our field, really, there’s too much to know), we can draw on our personal connections in the Microsoft RD, MVP, and Google GDE Networks as well as our international circle of really great developers, people we know and trust personally. 0:33:29.8 If you’ve got a project that’s keeping you up at night shoot us an email at info@ideablade.com. That’s info@IdeaBlade.com. And now back to the show! 0:33:42.0 John Papa And we’re back. Jen, Dan brought up a good question ‘cause I had this same thought, and I know it’s changed throughout the years, too; it’s how do you test for your site being accessible, and I realize, you know, the manual test is the best one. But there’s, and you do some automating as well for this. I noticed you mentioned the eslint plugin that you had. 0:34:01.5 Years ago there was, well it still exists, a Chrome plugin for screen reader which is now labeled as deprecated, and I notice they always link you over to the Lighthouse tools now, the Chrome plugin for that, which does an accessibility audit. I don’t know how you feel but I’m curious, like on, I see for example, the Starbucks Careers site has a, right now, 100 out of 100 score for accessibility. That doesn’t make me feel like it’s done, but it does make me feel like at least, like if there were something missing in that list of what wasn’t 100, I’d know I have some work to do. But when it’s 100 I’m then stuck with the, “What’s my next step?” Like, running Lighthouse step one: make sure those things aren’t barking at you. 0:34:44.9 Jen Luker Mm-hmm (affirmative). 0:34:45.6 John Papa But what do you do after that? 0:34:47.2 Jen Luker After that is when you starting bringing in actually user testers. So previously we were talking about return on investments of adding accessibility features from the viewpoint of someone who wants to add the accessibility demographic, right? The addition of adding those accessibility features actually expands far beyond those with accessibility issues, but also everybody. So, for instance, say that you’re sitting in a really noisy bar and you want to share a video with your friends. You can’t just sit there and play the video and expect them to get everything that’s being said. It’s too loud in the area that you’re in. With either a transcript or subtitles you can actually understand everything that’s going on in the video without having sound. 0:35:39.9 John Papa I’m so glad you brought that up ‘cause that’s something that is near and dear to me on videos. Not just for people who have issues, but it’s also… Just think about the financial side of this, too, and the marketing side. If you want somebody to watch your video and it’s scrolling past them on a screen in a Twitter feed, or Linkedin, or Instagram, or any kind of social media even, or even on the TV. If there’s no sound, if they can see the words sometimes that grabs their attention. 0:36:08.0 And I’ll, gonna share something about myself here, when I watch TV shows, and I love science fiction, things like Game of Thrones for example- 0:36:17.1 Jen Luker (laughs) 0:36:17.5 John Papa I actually put the closed captions on because I can’t tell what the heck name they’re saying. 0:36:21.7 Dan Wahlin I do the same thing. 0:36:23.0 John Papa You know? (laughs) 0:36:23.4 Dan Wahlin Not with Game of Thrones but with other stuff, yeah. 0:36:25.8 John Papa Yeah, I mean if their name was “Dan” I could get it. But when some of these names comes on I’m like, “...” So I love the fact that we… It’s not just for people who can’t understand names like me, but it’s a great thing for videos ‘cause now you’re reading an audience who maybe they don’t understand the slang you’re using, maybe English isn’t their first language. If you’re recording in English. 0:36:46.3 Jen Luker Mm-hmm (affirmative). 0:36:47.9 John Papa So when I talk with other countries they use the closed captions a lot for trying to figure out, “What did John say?” There’s just so many good ways and good reasons to do it and it’s not hard. 0:36:58.4 Jen Luker Unh-unh (negative). It’s not necessarily hard but it is time consuming. And it can be a little bit costly, depending on whether you do it yourself or whether you’re hiring someone to- 0:37:08.6 John Papa Yes. 0:37:09.2 Jen Luker Provide those transcriptions for you. 0:37:11.3 John Papa There are some free ones. Like if you go to YouTube and you upload it they give you one free translation, but then you run the risk of something like, my good buddy, Asim Hussain, his name is spelled A-S-I-M. 0:37:22.9 Jen Luker Mm-hmm (affirmative). 0:37:23.4 John Papa And when he recorded one of the videos it came out on the closed captioning as “Hello, everyone. My name is Awesome Hussein.” 0:37:29.3 Jen Luker (laughs) 0:37:30.2 ALL (laughing) 0:37:31.1 Dan Wahlin We should call him that now, when I see him. 0:37:32.6 John Papa Yes! So that’s now his nickname. (laughs) 0:37:34.6 Jen Luker That’s awesome. Ha ha! 0:37:35.9 John Papa Literally! 0:37:38.2 Jen Luker Oh, goodness. Yeah, YouTube is… I’m so proud of YouTube for at least trying to add like, automated transcriptions to all of the videos that are available. So there is a button you can click on that will show just a real time transcription as it’s developed. Unfortunately our ability to write machine learning that can fully understand different accents, different dialects, different contexts is still lagging behind how quickly communication and language evolves. So it’s not the best. It’s like trying to use Google Translate and it can be difficult. 0:38:23.3 Dan Wahlin Yeah, it’s- I started playing with, so Azure has it, and Amazon has had it though, for quite a while, has a few more voices at this point on AWS, but they have a service on some of my, I guess you could say wordier posts, meaning that there’s not as much code ‘cause it’s hard to convert. 0:38:43.0 This is kinda opposite of what we’re talking about, this is text-to-speech, and I said, you know, it doesn’t really cost me. I mean, it’s negligible, almost free it’s so minimally used by people and looking at the stats, but it’s you know, Amazon Polly and then Azure… I don’t remember what it’s called. what’s it called, John? They have their text-to-speech service. Do you know off the top of your head? I don’t think I remember the name. It’s probably part of the cognitive speech APIs I’m guessing. 0:39:12.9 But anyway it'll, you know, take your text and convert it into like, an mp3. So I’ve been doing that recently on just some of my more text based posts. ‘Case like I said, it’s hard to get context out of code, of course. But, you know, I like having it. I look at the stats. There’s not a ton of usage, per se. Although somebody could download it, almost like a podcast, but what I like about it is somebody that, you know, was vision impaired in some way, and I swear the older I get I’m starting to fall into that category anyway where I’d almost rather listen to it, you know, than read it. 0:39:49.4 But there’s a lot of different things out there like that that I think as technology progresses, you know, hopefully as you’ve mentioned, Jen, the YouTube closed captioning-type thing just keeps getting better and better. Text to speech is definitely getting pretty awesome. The voice I picked I’m just amazed with how high the quality is. So, a lot of cool stuff out there for this. 0:40:08.2 John Papa Yeah, that is called Azure’s text-to-speech cognitive services is the piece of it. You’re right it’s Amazon Polly. I put both those links in the show notes for everybody. 0:40:16.3 Jen Luker I think the biggest take away from all of this is that accessibility isn’t just for the people with disabilities. It literally is for everyone and it’s not just for old people or young people or people suffering from a specific disability. It’s also for people that have temporary or circumstantial disabilities. It’s for people that have you know, issues today, but no issues tomorrow. Or maybe they’re watching a TV show that has really loud explosions and really quiet text and your baby’s sleeping- 0:40:52.9 John Papa Yeah, what’s up with that anyway? 0:40:53.8 Jen Luker (laughs) Right? That’s why I use a screen… You know, that’s why I use subtitles. But, you know, it’s just the more you step back and look at it the more you realize that accessibility isn’t just keyboard tabbing and it’s not just a screen reader. It’s being able to allow people to interact with your content no matter who they are, or where they are, or what they are; and that has a real power. 0:41:22.9 That has the ability to take people that, I mean, arguably needs to be the ones that have the work flexibility in order to support themselves, and to be able to have the insurance to take care of their medical issues, and give them a job that gives them that freedom. I mean we, as devs, have a huge amount of freedom. We can work from anywhere as long as we’ve got an internet connection and a laptop. And as long as we’re working towards making the entire web accessible, whether that’s Game of Thrones, or that’s our technological documentation it really opens up the world to people that would not have otherwise had the opportunity to be able to make the best of it. 0:42:10.9 Dan Wahlin Absolutely. I think that’s, you know, that’s just a win all around for everyone. To kind of tag on that again, real quick… So I was at Dick’s Sporting Goods, which if you’re in the United States listening to this you’ll probably know who that is, they’re a pretty big sporting goods company. But I was out there doing some angular training and we were talking briefly- Jen, that’s why I asked more about the ARIA labels ‘cause that’s came up. And they actually have a full-time, at least one person maybe more but at least one I know full-time for accessibility. 0:42:41.0 So I think kind of challenge we might be able to issue all of us as devs is, if your company’s currently not doing that, there are companies that are. Now, you know, some of them I think are doing it purely out of what you just said, Jen. They just want to make it more accessible to everybody. Some of them probably it’s financial and okay, I think it’s a win either way, whatever they choose. 0:43:02.6 John Papa Sure. 0:43:03.1 Dan Wahlin But I think that’s a challenge we could all probably take on to try to be a little more educated on that and use it more. 0:43:09.6 John Papa there’s even little things you can do that may not fall under the exact category but how many times have you been to a website where there’s so much text jammed onto a screen you can’t actually discern what you’re supposed to be looking at? You know, so just making sites easier to read and having a better user experience. I find user experience and accessibility really flow together, personally. And when you’ve got one and the other together it’s like the beauty of the web. When you have neither of those that’s like when you go back to one of those 1996 websites where you can't figure out what’s going on. 0:43:42.2 Jen Luker (laughs) It’s absolutely true. It’s definitely a situation where making it fantastic for one group of people ends up helping everyone. So I mean, even if you do one thing today, if you add one more ALT tag, or you convert one more div to a button, or one button to a link, you know? That’s one more thing that’s going to be useable. You don’t have to flip the switch and have your entire website accessible tomorrow, but you can make one step today. 0:44:13.9 John Papa Awesome. Jen, we would like to wrap up this show with a section we call “Someone to Follow” where we talk about somebody who may be well known, or may not in the industry who we just want people to take a closer look at. And I’ll kick things off. Today, and I seem to be picking names that I can’t pronounce recently, so I apologize Gleb, but the person I want to point out is Gleb Bahmutov, and it’s… I’ll put his Twitter link up here on the page. He is one of the JavaScript ninjas behind the tool called cyprus.io which, Dan you did a show with us on that a couple of weeks or months ago. 0:44:47.6 Dan Wahlin I love it. Yeah. 0:44:49.1 John Papa Gleb is amazing. I’ve talked with him a few times on, he’s another Twitter friend, and the reason I wanted to call him out was I was working with cyprus.io, ‘cause I switched, Dan convinced me to switch. And I absolutely loved it and I was trying to solve some problems with it and I resent it to him on Twitter and he helped me get over those issues right away. And I just really love how open and friendly he was and he’s just done some amazing technology products that he’s had on the web over the years and cyprus io is just the recent one of those. Dan, do you have somebody to follow? 0:45:20.4 Dan Wahlin Yeah. So I had the chance to have dinner recently with one of my buddies, Rick Strahl. You know Rick, John. 0:45:27.6 John Papa Oh, yeah. 0:45:28.3 Dan Wahlin And for those that don’t know Rick he’s like, world champion I think. He windsurfs a lot (laughs). But Rick’s just a all-around very cool guy and very knowledgeable about frontend and backend type technologies, so he’s @Rick- We’ll put it in the show notes, but @RickStrahl on Twitter. 0:45:51.7 John Papa And Jen, do you have someone to follow? 0:45:53.1 Jen Luker I do. So there’s someone that I’ve been seeing a lot in the conference circuit this year. His name is Tejas Kumar. He is one of the nicest, most upbeat, most enthusiastic, and kindest, and most patient people you will ever meet in your entire life. He has more energy than my child and he’s basically the person who touts love and tolerance and kindness throughout Twitter. It’s a definite highlight in my feed. So I will definitely include his link in the show notes as well. But he’s my person to follow. 0:46:34.2 John Papa Actually I think I met Tejas last week at dotJS in Paris. Super nice guy. I hadn’t met him before but he was just a Twitter friend, so. It’s so nice when you actually meet people in person who you meet on the internet. (laughs) 0:46:46.0Jen Luker Absolutely. 0:46:47.1John Papa Well hey, Jen, it was great having you on here and thank you for coming on and talking to us about accessibility and for everybody who’s listening, thanks for listening to this show. We’re putting a bunch of links in the show notes so go check those out and please listen to us every Tuesday morning. 0:47:03.3 Jen Luker Thank you. (Exit Music) 0:47:08.4 Voiceover Thanks for listening to Real Talk JavaScript. This show and all of our shows are available at www.RealTalkJS.com with links and notes. John and Ward would love to hear what you think, especially about potential guests and topics for future shows. Follow and send them a message on Twitter @RealTalkJS.

Jens shares what accessibility is, why it's important for everyone, and how it can increase your business revenue.

Jen Luker is a software engineer at Formidable Labs Inc. She has worked as a full-stack developer using PHP, Javascript, and CSS, but has a particular fondness for frontend technologies.Today, we discuss the issue of accessibility and how focusing on making websites and software more accessible should be a constant consideration, particularly since it taps into an underserved market. Tune in to hear on discussion on this vital and fascinating topic.Transcript"Jen Luker, a11y champion" TranscriptTopics:The Internet and accessibilityHow loading times affect accessibilityHow accessibility helps everyoneMissing out on business by not being accessibleThe importance of making accessibility a regular part of the conversationQuotes:“One of the benefits of incorporating a lot of these accessibility features is that they end up helping everyone.” -Jen Luker“Only about one in ten websites, according to an audit that DQ did, is accessible.” -Jen LukerResources:Formidable Labs Inc.Deque aXeJen Luker:WebsiteTwitterGithubJoel Hooks:TwitterWebsite

In this Modern Web podcast Necoline Hubner discusses the web accessibility with Jen Luker.   Topics covered: -What is accessibility -How to write more accessible code Follow Necoline and Jen on Twitter @necolinesan and @knitcodemonkey Listen to more podcasts at http://moderndotweb.com   ESPN a11y guide: http://www.espn.com/core/toolkit/page/webAccessibilityGuide checklist: https://a11yproject.com/checklist.html a11y es-lint plugin: https://www.npmjs.com/package/eslint-plugin-jsx-a11y http://styling-react-for-reuse.surge.sh/#/8 gov specs: https://www.usability.gov/what-and-why/accessibility.html  

Tracy Lee: @ladyleet | ladyleet.com Ben Lesh: @benlesh | medium.com/@benlesh Show Notes: 00:50 - What is This Dot? 03:26 - The RxJS 5.5.4 Release and Characterizing RxJS 05:14 - Observable 07:06 - Operators 09:52 - Learning RxJS 11:10 - Making RxJS Functional Programming Friendly 12:52 - Lettable Operators 15:14 - Pipeline Operators 21:33 - The Concept of Mappable 23:58 - Struggles While Learning RxJS 33:09 - Documentation 36:52 - Surprising Uses of Observables 40:27 - Weird Uses of RxJS 45:25 - Announcements: WHATWG to Include Observables and RxJS 6 Resources: this.media RxJS RX Workshop Ben Lesh: Hot vs Cold Observables learnrxjs.io RxMarbles Jewelbots Transcript: CHARLES: Hello everybody and welcome to The Frontside Podcast, Episode 91. My name is Charles Lowell, a developer here at The Frontside and your podcast host-in-training. Joining me today on the podcast is Elrick Ryan. Hello, Elrick. ELRICK: Hey, what's up? CHARLES: Not much. How are you doing? ELRICK: I'm great. Very excited to have these two folks on the podcast today. I feel like I know them… CHARLES: [Laughs] ELRICK: Very well, from Twitter. CHARLES: I feel like I know them well from Twitter, too. ELRICK: [Laughs] CHARLES: But I also feel like this is a fantastic company that is doing a lot of great stuff. ELRICK: Yup. CHARLES: Also not in Twitter. It should be pointed out. We have with us Tracy Lee and Ben Lesh from This Dot company. TRACY: Hey. CHARLES: So first of all, why don't we start, for those who don't know, what exactly is This Dot? What is it that you all do and what are you hoping to accomplish? TRACY: This Dot was created about a year ago. And it was founded by myself and Taras who work on it full-time. And we have amazing people like Ben, who's also one of our co-founders, and really amazing mentors. A lot of our friends, when they refer to what we actually do, they like to call it celebrity consulting. [Laughter] TRACY: Which I think is hilarious. But it's basically core contributors of different frameworks and libraries who work with us and lend their time to mentor and consult with different companies. So, I think the beautiful part about what we're trying to do is bring together the web. And we sort of do that as well not only through consulting and trying to help people succeed, but also through This Dot Media where it's basically a big playground of JavaScripting all the things. Ben and I do Modern Web podcast together. We do RX Workshop which is RxJS training together. And Ben also has a full-time job at Google. CHARLES: What do they got you doing over there at Google? BEN: Well, I work on a project called Alkali which is an internal platform as a service built on top of Angular. That's my day job. CHARLES: So, you've been actually involved in all the major front-end frameworks, right, at some point? BEN: Yeah, yes. I got my start with Angular 1 or AngularJS now, when I was working as a web developer in Pittsburgh, Pennsylvania at a company called Aesynt which was formerly McKesson Automation. And then I was noticed by Netflix who was starting to do some Angular 1 work and they hired me to come help them. And then they decided to do Ember which is fine. And I worked on a large Ember app there. Then I worked on a couple of large React apps at Netflix. And now I'm at Google building Angular apps. CHARLES: Alright. BEN: Which is Angular 5 now, I believe. CHARLES: So, you've come the full circle. BEN: Yeah. Yeah, definitely. CHARLES: [Chuckles] I have to imagine Angular's changed a lot since you were working on it the first time. BEN: Yeah. It was completely rewritten. TRACY: I feel like Angular's the new Ember. CHARLES: Angular is the new Ember? TRACY: [Laughs] BEN: You think? TRACY: Angular is the new Ember and Vue is the new AngularJS, is basically. [Laughs] CHARLES: Okay. [Laughter] CHARLES: What's the new React then? BEN: Preact would be the React. CHARLES: Preact? Okay, or is Glimmer… BEN: [Laughs] I'm just… CHARLES: Is Glimmer the new React? BEN: Oh, sure. [Laughs] CHARLES: It's important to keep these things straight in your head. BEN: Yeah, yeah. CHARLES: Saves on confusion. TRACY: Which came first? [Chuckles] BEN: Too late. I'm already confused. CHARLES: So now, before the show you were saying that you had just, literally just released RxJS, was it 5.5.4? BEN: That's right. That's right. The patch release, yeah. CHARLES: Okay. Am I also correct in understanding that RxJS has kind of come to very front and center position in Angular? Like they've built large portions of framework around it? BEN: Yeah, it's the only dependency for Angular. It is being used in a lot of official space for Angular. For example, Angular Material's Data Table uses observables which are coming from RxJS. They've got reactive forms. The router makes use of Observable. So, the integration started kind of small which HTTPClient being written around Observable. And it's grown from there as people seem to be grabbing on and enjoying more the React programming side of things. So, it's definitely the one framework that's really embraced reactive programming outside of say, Cycle.js or something like that. CHARLES: Mmhmm. So, just to give a general background, how would you characterize RxJS? BEN: It's a library built around Observable. And Observable is a push-based primitive that gives you sets of events, really. CHARLES: Mmhmm. BEN: So, that's like Lodash for events would be a good way to put it. You can take anything that you can get pushed at you, which is pretty much value type you can imagine, and wrap it in an observable and have it pushed out of the observable. And from there, you have a set of things that you can combine. And you can concatenate them, you can filter them, you can transform them, you can combine them with other sets, and so on. So, you've got this ability to query and manipulate in a declarative way, events. CHARLES: Now, Observable is also… So, when Jay was on the podcast we were talking about Redux observable. But there was outside of the context of RxJS, it was just observables were this standalone entity. But I understand that they actually came from the RxJS project. That was the progenitor of observables even though there's talk of maybe making them part of the JavaScript spec. BEN: Yeah, that's right. That's right. So, RxJS as it stands is a reference implementation for what could land in JavaScript or what could even land in the DOM as far as an observable type. Observable itself is very primitive but RxJS has a lot of operators and optimizations and things written around Observable. That's the entire purpose of the library. CHARLES: Mmhmm. So, what kind of value-adds does it provide on top of Observable? If Observable was the primitive, what are the combinators, so to speak? BEN: Oh, right. So, similar to what Lodash would add on top of say, an iterable or arrays, you would have the same sorts of things and more inside of RxJS. So, you've got zip which you would maybe have seen in Lodash or different means of combines. Of course, map and ‘merge map' which is like a flattening sort of operation. You can concatenate them together. But you also have these time-based things. You can do debouncing or throttling of events as they're coming over in observable and you create a new observable of that. So, the value-add is the ability to compose these primitive actions. You can take on an observable and make a new observable. We call it operators. And you can use those operators to build pretty much anything you can imagine as far as an app would go. CHARLES: So, do you find that most of the time all of the operators are contained right there inside RxJS? Or if you're going to be doing reactive programming, one of your tasks is going to be defining your own operators? BEN: No, pretty much everything you'd need will be defined within RxJS. There's 60 operators or so. CHARLES: Whoa, that's a lot. BEN: It's unlikely that someone's going to come up with one. And in fact, I would say the majority of those, probably 75% of those, you can create from the other 25%. So, some of the much more primitive operators could be used… TRACY: Which is sort of what Ben did in this last release, RxJS 5…. I don't know remember when you introduced the lettable operators but you… BEN: Yeah, 5.5. TRACY: Implemented [inaudible] operators. BEN: Yeah, so a good portion of them I started implementing in terms of other operators. CHARLES: Right. So, what was that? I didn't quite catch that, Tracy. You said that, what was the operator that was introduced? TRACY: So, in one of the latest releases of RxJS, one of the more significant releases where pipeable operators were introduced, what Ben did was he went ahead and implemented a lot of operators that were currently in the library in terms of other operators, which was able to give way to reduce the size of the library from, I think it was what, 30KB bundled, gzipped, and minified, to about 30KB, which was about 60 to 70% of the operators. Right, Ben? BEN: Yeah. So, the size reduction was in part that there's a lot of factors that went into the size reduction. It would be kind of hard to pin it down to a specific operator. But I know that some of the operators like the individual operators themselves, by reimplementing reduce which is the same as doing as scan and then take last, implementing it in terms of that is going to reduce the size of it probably 90% of that one particular file. So, there's a variety of things like that that have already started and that we're going to continue to do. We didn't do it with every operator that we could have. Some operators are very, very common and consequently we want them to be as optimized as possible. For example, map. You can implement map in terms of ‘merge map' but it would be very slow to do so. It might be smaller but it would be slower. We don't want that. So, there are certain areas we're always going to try to keep fairly a hot path to optimize them as much as possible. But in other spots like reduce which is less common and isn't usually considered to be a performance bottleneck, we can cut some corners. Or ‘to array' or other things like that. CHARLES: Mmhmm. TRACY: And I think another really interesting thing is a lot of people when learning RxJS, they… it's funny because we just gave an RX Workshop course this past weekend and the people that were there just were like, “Oh, we've heard of RxJS. We think it's a cool new thing. We have no plans to implement it in real life but let's just play around with it and let me learn it.” I think as people are starting to learn RxJS, one of the things that gets them really overwhelmed is this whole idea that they're having to learn a completely new language on top of JavaScript or what operators to use. And one of our friends, Brian Troncone who is on the Learning Team, the RxJS Learning Team, he pulled up the top 15 operators that were most commonly searched on his site. And some of them were ‘switch map', ‘merge map', ‘fork join', merge, et cetera. So, you can sort of tell that even though the library has quite a few… it's funny because Ben, I think the last RX Workshop you were using pairs and you had never used it before. BEN: Yeah. TRACY: So, it's always amusing for me how many people can be on the core team but have never implemented RxJS… CHARLES: [Laughs] TRACY: A certain way. BEN: Right. Right, right, right. CHARLES: You had said one of the recent releases was about making it more friendly for functional programming. Is that a subject that we can explore? Because using observables is already pretty FP-like. BEN: What it was before is we had dot chaining. So, you would do ‘dot map' and then call a method and then you get an observable back. And then you'd say ‘dot merge' and then you'd call a method on that, and so on and so forth. Now what you have is kind of a Ramda JS style pipe function that just takes a comma-separated list of other functions that are going to act upon the observable. So, it reads pretty much the same with a little more ceremony around it I guess. But the upside is that you can develop your operators as just higher-order functions. CHARLES: Right. And you don't have to do any monkey-patching of prototypes. BEN: Exactly, exactly. CHARLES: Because actually, okay, I see. This is actually pretty exciting, I think. Because we actually ran into this problem when we were using Redux Observable where we wanted to use some operators that were used by some library but we had to basically make a pull request upstream, or fork the upstream library to include the operators so that we could use them in our application. It was really weird. BEN: Yeah. CHARLES: The reason was because it was extending the observable prototype. BEN: Yeah. And there's so many… and that's one way to add that, is you extend the observable prototype and then you override lift so you return the same type of observable everywhere. And there are so many things that lettable operators solved for us. For example… CHARLES: So, lettable operators. So, that's the word that Tracy used and you just used it. What are lettable operators? BEN: Well, I've been trying to say pipeable and get that going instead of lettable. But basically there's an operator on RxJS that's been there forever called let. And let is an operator and what you do is you give it a function. And the function gives you the source observable and you're expected to return a new observable. And the idea is that you can then write a function elsewhere that you can then compose in as though it were an operator, anywhere you want, along with your other dot-chained operators. And the realization I had a few months ago was, “Well, why don't we just make all operators like this?” And then we can use functional programming to compose them with like a reduce or whatever. And that's exactly what the lettable operators are. And that's why I started calling them lettable operators. And I kind of regret it now, because so many people are saying it and it confuses new people. Because what in the world does lettable even mean? CHARLES: Right. [Laughs] BEN: So, they are pipeable operators or functional operators. But the point is that you have a higher-order function that returns a function of a specific shape. And that function shape is, it's a function that receives an observable and returns an observable, and that's it. So, basically it's a function that transforms an observable into a new observable. That's all an operator. That's all an operator's ever been. It's just this is in a different flavor. CHARLES: Now, I'm curious. Why does it do an observable into an observable and not a stream item into an observable? Because when you're actually chaining these things together, like with a map or with a ‘flat map' or all these things, you're actually getting an individual item and then returning an observable. Well, I guess in this case of a map you're getting an item and returning an item. But like… BEN: Right, but that's not what the entire operation is. So, you've got an operation you're performing whenever you say, if you're to just even dot-chain it, you'd say ‘observable dot map'. And when you say ‘dot map', it returns a new observable. And then you say ‘dot filter' and it returns another new observable. CHARLES: Oh, gotcha, gotcha, gotcha. Okay, yeah, yeah, yeah. Yeah, yeah. BEN: So, this function just embodies that step. CHARLES: I see, I see. And isn't there some special… I feel like there's some proposal for some special JavaScript syntax to make this type of chaining? BEN: Yeah, yeah, the pipeline operator. CHARLES: Okay. BEN: I don't know. I think that's still at stage one. I don't know that it's got a lot of headway. My sources and friends that are in the TC39 seem to think that it doesn't have a lot of headway. But I really think it's important. Because if you look at… the problem is we're using a language where the most common use case is you have to build it, get the size as small as possible because you need to send it over the wire to the browser. And understandably, browsers don't want to implement every possible method they could on say, Array, right? CHARLES: Mmhmm, right. BEN: There's a proposal in for ‘flat map'. They could add zip to Array. They could add all sorts of interesting things to Array just by itself. And that's why Lodash exists, right? CHARLES: Right. BEN: Is because not everything is on Array. And then so, the onus is then put on the community to come up with these solutions and the community has to build libraries that have these constraints in size. And what stinks about that is then you have say, an older version of Lodash where you'd be like, “Okay, well it has 36 different functions in it and I'm only using 3 of them. And I have to ship them all to the browser.” CHARLES: Mmhmm. BEN: And that's not what you want. So, then we have these other solutions around tree-shaking and this and that. And the real thing is what you want is you want to be able to compose things left to right and you want to be able to have these functions that you can use on a particular type in an ad hoc way. And there's been two proposals to try to address this. One was the ‘function bind' operator, CHARLES: Mmhmm. BEN: Which is colon colon. And what that did is it said, “You can use this function as a method, as though it were a method on an object. And we'll make sure that the ‘this' inside that function comes from the instance that's on the left-hand side of colon colon.” CHARLES: Right. BEN: That had a bunch of other problems. Like there's some real debate I guess on how they would tie that down to a specific type. So, that kind of fell dead in the water even though it had made some traction. And then the pipeline operator is different. And then what it says is, “Okay, whatever is on the…” And what it looks like is a pipe and a greater than right next to each other. And whatever's on the left-hand side of that operand gets passed as the first argument to the function on the right-hand side of that operand. CHARLES: Mmhmm. BEN: And so, what that means is for the pipeable operators, instead of having to use a pipe method on observable, you can just say, “instance of observable, pipeline operator and an operator, and then pipeline operator, and then the Rx operator, and then pipeline operator and the Rx operator, and so on.” And it would just be built-in. And the reason I think that JavaScript really needs it is that means that libraries like Lodash can be written in terms of simple functions and shipped piece-meal to the browser exactly as you need them. And people would just use the pipeline operator to use them, instead of having to wrap something in a big object so you can dot-chain things together or come up with your own functional pipe thing like RxJS had to. CHARLES: Right. Because it seems it happens again and again, right? Lodash, RxJS, jQuery. You just see this pattern of chaining, which is, you know… BEN: Yeah, yeah. People want chaining. People want left to right composition. CHARLES: Mmhmm. BEN: And it's problematic in a world where you want to shake off as much unused garbage as possible. And the only way to get dot chaining is by augmenting a prototype. There's all sorts of weird problems that can come with that. And so, the functional programming approach is one method. But then people look at it and they say, “Ooh, yuck. I've got to wrap things in a function named pipe. Wouldn't it be nicer if there was just some syntax to do this?” And yeah, it would be nicer. But I have less control over that. CHARLES: Right. But the other alternative is to have right to left function composition. BEN: Right, yeah. CHARLES: But there's not any special syntax for that, either. BEN: Not very readable. CHARLES: Yeah. BEN: So, you just wrap everything. And the innermost call is the first one and then you wrap it in another function and you wrap that in another function, and so on. Yeah, that's not [inaudible]. But I will say that the pipe function itself is pretty simple. It's basically a function that takes a rest of arguments that are all functions. CHARLES: Mmhmm. BEN: And so, you have this array of functions and you just reduce over it and call them. Well, you return a function. So, it's a higher function. You return a function that takes an argument then you reduce over the functions that came in as arguments and you call each one of them with whatever result was from the previous. CHARLES: Right. Like Tracy mentioned in the pre-show, I'm an aspiring student of functional programming. So, would this be kind of like a monoid here where you're mashing all these functions together? Is your empty value? I'm just going to throw it out there. I don't know if it's true or not, but that's my conjecture. BEN: Yes. Technically, it's a monoid because it wouldn't work unless it was a monoid. Because monoids, I believe the category theory I think for monoid is that monoids can be concatenated because they definitely have an end. CHARLES: Right. BEN: So, you would not be able to reduce over all those functions and build something with that, like that, unless it was a monoid. So yeah, the fact that there's reduction involved is a cue that it's a monoid. CHARLES: Woohoo! Alright. [Laughter] CHARLES: Have you found yourself wanting to apply some of these more “rigorous” formalisms that you find out there in the development of RxJS or is that just really a secondary concern? BEN: It's a secondary concern. It's not something that I like. It's something I think about from time to time, when really, debating any kind of heavy issue, sometimes it's helpful. But when it comes to teaching anybody anything, honestly the Haskell-isms and category theory names, all they do is just confuse people. And if you tell somebody something is a functor, they're like, “What?” And if you just say it's mappable, they're like, “Oh, okay. I can map that.” CHARLES: [Laughs] Right, right. BEN: And then the purists would be like, “But they're not the same thing.” And I would be like, “But the world doesn't care. I'm sorry.” CHARLES: Yeah, yeah. I'm kind of experiencing this debate myself. I'm not quite sure which side I fall on, because on the one hand it is arbitrary. Functor is a weird name. But I wish the concept of mappable existed. It does, but I feel like it would be handy if people… because there's literally five things that are super handy, right? Like mappable, if we could have a name for monoid. But it's like, really, you just need to think in terms of these five constructs for 99% of the stuff that you do. And so, I always wonder, where does that line lie? And how… mappable, is that really more accessible than functor? Or is that only because I was exposed to the concept of mapping for 10 years before I ever heard the F word. BEN: Yes, and yes. I mean, that's… CHARLES: [Laughs] BEN: Things that are more accessible are usually more accessible because of some pre-given knowledge, right? What works in JavaScript probably isn't going to work in Haskell or Scala or something, right? CHARLES: Mmhmm. BEN: If someone's a Java developer, certain idioms might not make sense to them that come from the JavaScript world. CHARLES: Right. But if I was learning like a student, I would think mappable, I'd be thinking like, I would literally be thinking like Google Maps or something like that. I don't know. BEN: Right, right. I mean, look at C#. C#, a mapping function is always going to be called select, right, because that's C#. That's their idiom for the same thing. CHARLES: Select? BEN: Yeah. CHARLES: Really? BEN: Yeah, select. So, they'll… CHARLES: Which in Ruby is like find. BEN: Yeah. there's select and then, what's the other one, ‘select many' or something like that. [Chuckles] BEN: So, that's C#. CHARLES: Oh, like it's select from SQL. Okay. BEN: Yeah, I think that's kind of where it came from because people had link and then they had link to SQL and then they're like, well I want to do this with regular code, with just using some more… less nuanced expressions. So, I want to be able to do method calls and chain those together. And so, you end up with select functions. And I think that that exists even in Rx.NET, although I haven't used Rx.NET. CHARLES: Hmm, okay. ELRICK: So, I know you do a lot of training with Rx. What are some of the concepts that people struggle with initially? TRACY: I think when we're teaching RX Workshop, a lot of the people sort of… I'll even see senior level people struggle with explaining it, is the difference between observables and observers and then wrapping their head around the idea that, “Hey, observables are just functions in JavaScript.” So, they're always thinking observables are going to do something for you. Actually, it's not just in Angular but also in React, but whenever someone's having issues with their Rx applications, it's usually something that they're like nesting observables or they're not subscribing to something or they've sort of hot-messed themselves into a tangle. And I'm sure you've debugged a bunch of this stuff before. The first thing I always ask people is, “Have you subscribed?” Or maybe they're using an Angular… they're using pipes async but they're also calling ‘dot subscribe' on their observable. BEN: Yeah. So, like in Angular they'll do both. Yeah. There's that. I think that, yeah, that relates to the problem of people not understanding that observables are really just functions. I keep saying that over and over again and people really don't seem to take it to heart for whatever reason. [Chuckles] BEN: But you get an observable and when you're chaining all those operators together, you're making another observable or whatever, observables don't do anything until you subscribe to them. They do nothing. CHARLES: Shouldn't they be called like subscribable? BEN: Yes. [Chuckles] BEN: They probably should. But we do hand them an observer. So, you are observing something. But the point being is that they don't do anything at all until you subscribe to them. And in that regard, they're like functions, where functions don't do anything unless you call them. So, what ends up happening with an observable is you subscribe to it. You give it an observer, three callbacks which are then coerced into an observer. And it takes that observer and it hands it to the body of this observable definition and literally has an observer inside of there. And then you basically execute that function synchronously and do things, whatever those things are, to set up some sort of observation. Maybe you spin up a WebSocket and tie into some events on it and call next on the observer to get values out of your observable. The point being that if you subscribe to an observable twice, it's the same thing as calling a function twice. And for some reason, people have a hard time with that. They think, if I subscribe to the observable twice, I've only called the function once. CHARLES: I experienced this confusion. And I remember the first time that that… like, I was playing with observables and the first time I actually discovered that, that it was actually calling my… now what do you call the function that you pass to the constructor that actually does, that calls next or that gets passed the observer? TRACY: [Inaudible] BEN: I like to call it an initialization function or something. But the official name from the TC39 proposal is subscriber function. CHARLES: Subscriber function. So, like… BEN: Yeah. CHARLES: I definitely remember it was one of those [makes explosion sound] mind-blowing moments when I realized when I call my subscribe method, the entire observable got run from the very beginning. But my intuition was that this is an object. It's got some shared state, like it's this quasar that I'm now observing and I'm seeing the flashes of light coming off of it. But it's still the same object. You think of it as having yeah, not as a function. Okay. No one ever described it to me as just a function. But I think I can see it now. ELRICK: Yeah, me neither. CHARLES: But yeah, you think of it in the same way that most people think of objects, as like, “I have this object. I have a reference to it.” Let observable equal new observable. It's a single thing. It's a single identity. And so, that's the thing that I'm observing. It's not that I'm invoking this observable to observe things. And I think that's, yeah, that's a subtle nuance there. I wish I had taken y'all's course, I guess is what I'm saying. ELRICK: Yeah. BEN: Yeah. Well, I've done a few talks on it. CHARLES: [Laughs] BEN: I always try to tell people, “It's just a function. It's just a function.” I think what happens to a lot of people too is there's the fact that it's an object. But I think what it is, is people's familiarity with promises does this. Because promises are always multicast. They are always “hot”. And the reason for this is because they're eager. So, by the time you have a promise, whatever is producing value to the promise has already started. And that means that they're inherently a multicast. CHARLES: Right. BEN: So, people are used to that behavior of, I can ‘then' off of this promise and it always means one thing. And it's like, yeah, because the one thing has nothing to do with the promise. It wasn't [Chuckles] CHARLES: Right. BEN: This promise is just an interface for you to view something that happened in the past, where an observable is more low-level than that and more simple than that. It just states, “I'm a function that you call. I'm going to be able to do anything a function can do. And by the way, you're giving me an observer and I'm going to do some stuff with that too and notify you via this observer that you handed me.” Because of that you could take an observable and close over something that had already started. Say you had a WebSocket that was already running. You could create a new observable and just like any function, close over that, externally create a WebSocket. And then everyone that subscribes to that observable is tying an observer to that same WebSocket. Then you're multicast. Then you're “hot”. ELRICK: [Inaudible] CHARLES: Right. So, I was going to say that's the distinction that Jay was talking about. He was talking about we're going to just talk about… he said at the very beginning, “We're just going to talk about hot observable.” ELRICK: Yup. CHARLES: But even a hot observable is still theoretically evaluating every single time you subscribe. You're getting a new observable. You're evaluating that observable afresh each time. It just so happens that in the lexical scope of that observable subscriber function, there is this WebSocket? BEN: Yeah. So, it's the same thing. Imagine you wrote a function that when you called it created a new WebSocket and then… say, you wrote a new function that you gave an observer object to, right? An observer object has next, error, and complete. And in that function, when you called it, it created a new WebSocket and then it tied the ‘on message' and ‘on close' and whatever to your observer's next method and your observer's error message and so on. When you call that function, you would expect a new WebSocket to be created every single time. Now, let's just say alternately you create a WebSocket and then you write a new function that that function closes over that WebSocket. So, you reference the WebSocket that you externally created inside of your function. When you call that function, it's not going to create a new WebSocket every time. It's just closing over it, right? So, even though they both are basically doing the same thing, now the latter one of those two things is basically a hot observable and the former is a cold observable. Because one is multicast which is, “I'm sharing this one WebSocket with everybody,” and the other one is unicast which is, “I am going to create a new WebSocket for each person that calls me.” And that's the [inaudible] people have a hard time with. CHARLES: Right. But really, it's just a matter of scope. BEN: Yeah. The thing people have a hard time with, with observables, is not realizing that they're actually just functions. CHARLES: Yeah. I just think that maybe… see, when I hear things like multicast and unicast, that makes me think of shared state, whereas when you say it's just a matter of scope, well then I'm thinking more in terms of it being just a function. It just happens that this WebSocket was already [scoped]. BEN: Well, shared state is a matter of scope, right? CHARLES: Yes, it is. It is. Oh, sorry. Shared state associated with some object identity, right? BEN: Right. CHARLES: But again, again, it's just preconceptions, really. It's just me thinking that I've had to manage lists of listeners and have multicast observers and single-cast observers and having to manage those lists and call notify on all of them. And that's really not what's happening at all. BEN: Yeah. Well, I guess the real point is observables can have shared state or they could not have shared state. I think the most common version and the most composable version of them, they do not have any shared state. It's just one of those things where just like a function can have shared state or it could be pure, right? There's nothing wrong with either one of those two uses of a function. And there's nothing wrong with either one of those two uses of Observable. So, honest to god, that is the biggest stumbling block I think that I see people have. That and if I had to characterize it I would say fear and loathing over the number of operators. People are like… CHARLES: [Chuckles] BEN: And they really think because everyone's used to dealing with these frameworks where there's an idiomatic way to do everything, they think there's going to be an RxJS idiomatic way to do things. And that's just patently false. That's like saying there's an idiomatic way to use functions. There's not. Use it however it works. The end. It's not… CHARLES: Mmhmm, mmhmm. BEN: You don't have to use every operator in a specific way. You can use it however works for you and it's fine. ELRICK: I see that you guys are doing some fantastic work with your documentation. Was that part of RxJS 2.0 docs? TRACY: I was trying to inspire people to take on the docs initiative because I think when I was starting to learn RxJS I would get really frustrated with the docs. BEN: Yeah. TRACY: I think the docs are greatly documented but at the same time if you're not a senior developer who understands Rx already, then it's not really helpful. Because it provides more of a reference point that the guys can go back and look at, or girls. So anyways, after many attempts of trying to get somebody to lead the project I just decided to lead the project myself. [Laughter] TRACY: And try to get… the community is interesting because I think because the docs can be sometimes confusing… Brian Troncone created LearnRxJS.io. There's these other visualization projects like RxMarbles, RxViz, et cetera. And we just needed to stick everybody together. So, it's been a project that I think has been going on for the past two months or so. We have… it's just an Angular app so it's probably one of the most easiest projects to contribute to. I remember the first time I tried to contribute to the Ember docs. It literally took me an hour to sit there with a learning team, Ember Learning Team member and… actually, maybe it was two hours, just to figure out how the heck… like all the things I had to download to get my environment set up so that I could actually even contribute to the darn documentation. But with the Rx, the current RxJS docs right now is just an Angular app. You can pull it down. It's really easy. We even have people who are just working on accessibility, which is super cool, right? So, it's a very friendly place for beginners. BEN: I'm super pleased with all the people that have been working on that. Brian and everybody, especially on the accessibility front. Jen Luker [inaudible] came in and voluntarily… she's like the stopgap for all accessibility to make sure everything is accessible before we release. So, that's pretty exciting. TRACY: Yeah. ELRICK: Mmhmm. TRACY: So funny because when me and Jen started talking, she was talking about something and then I was like, “Oh my god, I'm so excited about the docs.” She's like, “I'm so excited, too! But I don't really know why I'm excited. But you're excited, so I'm excited. Why are you excited?” [Laughter] TRACY: I was like, “I don't know. But I'm excited, too!” [Chuckles] TRACY: And then all of a sudden we have accessibility. [Laughs] ELRICK: Mmhmm. Yeah, I saw some amazing screenshots. Has the new docs, have they been pushed up to the URL yet? TRACY: Nah, they are about to. We were… we want to do one more accessibility run-through before we publish it. And then we're going to document. We want to document the top 15 most viewed operators. But we should probably see that in the next two weeks or so, that the new docs will be… I mean, it'll say “Beta, beta, beta” all over everything. But actually also, some of our friends, [Dmitri] from [Valas] Software, he is working on the translation portion to make it really easy for people to translate the docs. CHARLES: Ah. TRACY: So, a lot of that came from the inspiration from the Vue.js docs. we're taking the versioning examples that Ember has done with their docs as inspiration to make sure that our versioning is really great. So, it's great that we can lend upon all the other amazing ideas in the industry. ELRICK: Oh, yeah. CHARLES: Yeah, it's fantastic. I can't wait to see them. ELRICK: Yeah, me neither. The screenshots look amazing. I was like, “Wow. These are some fabulous documentation that's going to be coming out.” I can't wait. TRACY: Yeah. Thank you. CHARLES: Setting the bar. ELRICK: Really high. [Laughter] CHARLES: Actually, I'm curious. Because observables are so low-level, is there some use of them that… what's the use of them that you found most surprising? Or, “Whoa, this was a crazy hack.” BEN: The weirdest use of observables, there's been quite a few odd ones. One of the ones that I did one time that is maybe in RxJS's wheelhouse, it was just that RxJS already existed. So, I didn't want to pull in another transducer library, was using RxJS as a transducer. Basically… in Netflix we had a situation where we had these huge, huge arrays of very large objects. And if you try to take something like that and then map it and then filter it and then map it and then filter it, we're using Array map and filter, what ends up happening is you create all sorts of intermediary arrays in-memory. And then garbage collection has to come through and clean that up. And that locks your thread. And over time, we were experiencing slowness with this app. And it would just build up until eventually it ground to a halt. And I used RxJS because it was an available tool there to wrap these arrays in an observable and then perform operations on them step-by-step, the same map, filter, and so on. But when you do that, it doesn't create intermediary arrays because it passes each value along step to step instead of producing an entire array and then doing another step and producing an entire array, and so on. So… CHARLES: So, will you just… BEN: It saved garbage collection and it increased the performance of the app. But that's just in an extreme case. I would never do that with just regular arrays. If anything, it was because it was huge, huge arrays of very large objects. CHARLES: So, you would create an observable our of the array and then just feed each element into the observable one at a time? BEN: Well, no. If you say ‘observable from' and you give it an array, that's basically what it does. CHARLES: Okay. BEN: It loops over the array and nexts those values out of the array synchronously. CHARLES: I see, I see. BEN: So, it's like having a for loop and then inside of that for loop saying, “Apply the map. Apply the filter,” whatever, to each value as they're going through. But when you look at it, if you had array map, filter, reduce, it's literally just taking the first step and saying ‘observable from' and wrapping that array and then the rest of it's still the same. CHARLES: Right. Yeah. No, that's really cool. BEN: That was a weirder use of it. I've heard tell of other things where people used observables to do audio synchronization, which is pretty interesting. Because you have to be very precise with audio synchronization. So, hooking into some of the Web Audio APIs and that sort of thing. That's pretty interesting. The WebSocket multiplexing is something I did at Netflix that's a little bit avant-garde for observable use because you essentially have an observable that is your WebSocket. And then you create another observable that closes over that observable and sends messages over the WebSocket for what you're subscribed to and not subscribed to. And it enables you to very easily retry connections and these sorts of things. I did a whole talk on that. That one's pretty weird. CHARLES: Yeah. Man, I [inaudible] to see that. BEN: But in the general use case, you click a button, you make an AJAX request, and then you get that back and maybe you make another AJAX request. Or like drag and drop and these sorts of things where you're coordinating multiple events together, is the general use case. The non-weird use case for RxJS. Tracy does weird stuff with RxJS though. [Laughter] CHARLES: Yeah, what's some weird uses of RxJS? TRACY: I think my favorite thing to do right now is to figure out how many different IoT-related things I can make work with RxJS. So, how many random things can I connect to an application using that? BEN: Tracy's projects are the best. They're so good. [Laughter] TRACY: Well, Ben and I created an application where you can take pictures of things using the Google Image API and it'll spit back a set of puns for you. So, you take a picture of a banana, it'll give you banana puns. Or you can talk to it using the speech recognition API. My latest thing is I really want to figure out how to… I haven't figured out if Bluetooth Low Energy is actually enabled on Google Home Minis. But I want to get my Google Home Mini to say ‘booty'. [Inaudible] [Laughter] CHARLES: RxJS to the rescue. [Laughter] BEN: Oh, there was, you remember Ng-Cruise. We did Ng-Cruise and on there, Alex Castillo brought… TRACY: Oh, that was so cool. BEN: All sorts of interesting… you could read your brain waves. Or there was another one that was, what is it, the Microsoft, that band put around your wrist that would sense what direction your arm was in and whether or not your hand was flexed. And people… TRACY: Yeah, so you could flip through things. BEN: Yeah. And people were using reactive programming with that to do things like grab a ball on the screen. Or you could concentrate on an image and see if it went blurry or not. ELRICK: Well, for like, Minority Report. BEN: Oh, yeah, yeah. Literally, watching a machine read your mind with observables. That was pretty cool. That's got to be the weirdest. TRACY: Yeah, or we had somebody play the piano while they were wearing one of the brainwave… it's called the OpenBCI project is what it is. And what you can do is you can actually get the instructions to 3D print out your own headset and then buy the technology that allows you to read brain waves. And so with that, it's like… I mean, it was really awesome to watch her play the piano and just see how her brain waves were going super crazy. But there's also these really cool… I don't know if you guys have heard of Jewelbots, but they're these programmable friendship bracelets that are just little Arduino devices that light up. I have two of them. I haven't even opened them. CHARLES: [Laughs] TRACY: I've been waiting to play with them with you. I don't know what we're going to do, but I just want to send you lights. Flashing lights. [Laughter] TRACY: Morse code ask you questions about RxJS while you're working. [Laughter] CHARLES: Yeah. Critical bug. Toot-toot-toot-too-too-too-too-toot-toot. [Laughter] CHARLES: RxJS Justice League. TRACY: That would actually be really fun. [Laughter] TRACY: That would be really fun. I actually really want to do that. But… CHARLES: I'm sure the next time we talk, you will have. TRACY: [Laughs] Yes. Yes, yes, yes, I know. I know. we'll do it soon. We just need to find some time while we're not going crazy with conferences and stuff like that. CHARLES: So, before we head out, is there any upcoming events, talks, releases, anything that we ought to be, we or the listeners, ought to be aware of? TRACY: Yeah, so one of the things is that Ben and I this weekend actually just recorded the latest version of RX Workshop. So, if you want to learn all about the latest, latest, newest new, you can go ahead and take that course. We go through a lot of different things like multiplex WebSockets, building an application. Everywhere from the fundamentals to the more real world implementations of RxJS. BEN: Yeah. Even in the fundamentals area, we've had friends of ours that are definitely seasoned Rx veterans come to the workshop. And most of them ask the most questions while talking about the fundamentals. Because I tend to dig into, either deep into the internals or into the why's and how's thing. Why and how things work. Even when it comes to how to subscribe to an observable. Deep detailed information about what happens if you don't provide an error handler and certain cases and how that's going to change in upcoming versions, and why that's changing in upcoming versions, and what the TC39's thoughts are on that, and so on and so forth. So, I try to get into some deeper stuff and we have a lot of fun. And we tend to be a little goofier at the workshops from time to time than we were in this podcast. Tracy and I get silly when we're together. TRACY: It's very true. [Laughter] TRACY: But I think also, soon I think there are people that are going to be championing an Observable proposal on what [inaudible]. So, aside from the TC39 Observable proposal that's currently still at stage one, I don't know Ben if you want to talk a little bit about that. BEN: Oh, yeah. So, I've been involved in conversations with folks from Netflix and Google as well, Chrome team and TC39 members, about getting the WHATWG, the ‘what wig', they're a standards body similar to W3C, to include observables as part of the DOM. The post has not been made yet. But the post is going to be made soon as long as everybody's okay with it. And what it boils down to is the idea of using observables as part of event targets. An event target is the API we're all familiar with for ‘add event listener', ‘remove event listener'. So, pretty much anywhere you'd see those methods, there might also someday be an on method that would return an observable of events. So, it's really, really interesting thing because it would bring at least the primitives of reactive programming to the browser. And at the very least it would provide maybe a nicer API for people to subscribe to events coming from different DOM elements. Because ‘add event listener' and ‘remove event listener' are a little unergonomic at times, right? CHARLES: Yeah. They're the worst. BEN: Yeah. CHARLES: That's a very polite way of putting it. BEN: [Chuckles] So, that's one thing that's coming down the pipe. Other things, RxJS 6 is in the works. We recently tied off 5.5 in a stable branch. And master is now our alpha that we're working on. So, there's going to be a lot of refactoring and changes there, trying to make the library smaller and smaller. And trying to eliminate some of the footprints that maybe people had in previous versions. So, moving things around so people aren't importing stuff that were meant to be implementation details, reducing the size of the library, trying to eliminate some bloat, that sort of thing. I'm pretty excited about that. But that's going to be in alpha ongoing for a while. And then hopefully we'll be able to move into beta mid first quarter next year. And then when that'll be out of beta, who knows? It all depends on how well people like the beta and the alpha, right? CHARLES: Alright. Well, so if folks do want to follow up with y'all either in regards to the course or to upcoming releases or any of the other great stuff that's coming along, how would they get in touch with y'all? TRACY: You can find me on Twitter @ladyleet. But Ben is @BenLesh. RX Workshop is RXWorkshop.com. I think in January we're going to be doing state of JavaScript under This Dot Media again. So, that's where all the core contributors of different frameworks and libraries come together. So, we'll definitely be giving a state of RxJS at that time. And next year also Contributor Days will be happening. So, if you go to ContributorDays.com you can see the previous RxJS Contributor Days and figure out how to get involved. So, we're always open and happy and willing to teach everybody. And again, if you want to get involved it doesn't matter whether you have little experience or lots of experience. We are always willing to show you how you can play. BEN: Yeah. You can always find us on Twitter. And don't forget that if you don't find Tracy or I on Twitter, you can always message Jay Phelps on Twitter. That's important. @_JayPhelps. Really. TRACY: Yeah. [Laughter] BEN: You'll find us. CHARLES: [Chuckles] Look for Jay in the show notes. [Laughter] CHARLES: Alright. Well, thank you so much for all the stuff that y'all do, code and otherwise. And thank you so much Ben, thank you so much Tracy, for coming on the show. BEN: Thank you. CHARLES: Bye Elrick and bye everybody. If you want to reach out to us, you can always get in touch with us at @TheFrontside or send us an email at contact@frontside.io. Alright everybody, we'll see you next week.