Accessibility in Component Libraries with Maya Shavin - JSJ 601
Accessibility in Component Libraries with Maya Shavin - JSJ 601
Guests :
Hosts :
Published :
Oct 03, 2023
Duration :
1 Hours, 16 Minutes
Show Notes
Maya Shavin is a Senior Software Engineer at Microsoft. She joins the show to talk about accessibility in component libraries for developers. They talk about choosing component libraries when creating projects, the current state of component libraries, determining good accessibility levels, and many more!
On YouTube
Sponsors
- Chuck's Resume Template
- Raygun - Application Monitoring For Web & Mobile Apps
- Become a Top 1% Dev with a Top End Devs Membership
Socials
Picks
- Charles - Risk Legacy | Board Game
Transcript
Charles Max Wood (00:02.225)
Hey folks, welcome back to another episode of JavaScript Jabber. This week on our panel, we have vacation Dan, Dan Shapir.
Maya Shavin (00:11.67)
Hahaha!
Dan (00:12.555)
I wish I'm actually at, well, not at work right now. It's pretty late here in Israel, but no, not on vacation, unfortunately, that's for sure. I'm working in hot and muggy Tel Aviv.
Charles Max Wood (00:27.597)
I'm Charles Maxwood from Top Endevs. I guess not cool, hot and buggy. Anyway, we have a special guest this week and it is Maya Chavan. Maya, do you want to introduce yourself for my people who you are and why we like having you back?
Maya Shavin (00:42.994)
Oh, hi, hi there. So first of all, thank you for having me. And yeah, so I'm Maya. And I'm from the same place like them, literally in the same country, but we're kind of away from each other. So I'm also from Israel, but I believe in a bit in the north. So like he said, I believe in the edge.
Charles Max Wood (01:06.324)
hahahaha
Dan (01:07.132)
Like edge computing type of a thing. You're doing edge computing.
Maya Shavin (01:10.092)
Yeah, yeah, so you know, I thought that's why. That's also, that's... I'm going to do X version and I'm fixing Windows. Wow, that sounds like a good deal of work right now. Oh, well, talking about Windows, I'm working for Microsoft. That's in case you were wondering why I'm fixing Windows. Yeah, so that's me. I've been working in front-end.
Charles Max Wood (01:14.013)
Right, she's running the edge version of Israel.
Maya Shavin (01:37.488)
web for about almost 10 years.
Dan (01:42.214)
So my son is having a lot of problems with his OneDrive account today. Can you fix it?
Charles Max Wood (01:48.801)
Yeah, get right on that.
Maya Shavin (01:51.102)
Oh, God, it's just so hard. You don't know how many messages on Facebook, well, like, Facebook Messenger I got from my friends since I started working at Microsoft, asking about subscription conditions for OneDrive. And I was like, excuse me, I work for Microsoft, I have no idea what OneDrive subscription is about, what time you have. And I'm still myself, I have myself to have no idea what subscription I have on OneDrive.
Charles Max Wood (02:05.263)
Alright.
Charles Max Wood (02:16.806)
Right.
Maya Shavin (02:22.516)
And one funny story, it's a real story happened for me. In the area where we live, we live in a small community. So one day there was a guy that we were, me and my husband were driving and we were stopping there just doing something. And then there was a car passing by and the car stopped in front of my husband, like our car. And he just opened his window and asked my husband, so listen, who's looking for Microsoft?
Because my car has a Microsoft logo on it. And my husband was like, um, she, not me, she, he. And then I was like, okay, yeah, it's me. So what's up? Why, why, why can't I help you? And they said, listen, I have a problem with my computer. My printer doesn't work. Maybe you can help me. And I...
Maya Shavin (03:12.471)
Ehhhhh...
Dan (03:12.53)
What? Yeah, what you should do in those kinds of situations, there's a simple solution. Say, sure, it's a thousand dollars an hour. Where, when do you want to start?
Charles Max Wood (03:24.425)
See, I'm a smart aleck, so I would have looked at him and said, neither of us, the car runs on windows.
Maya Shavin (03:32.01)
Actually, you know who knows, maybe the cast does run on the window.
Charles Max Wood (03:36.377)
Maybe. Good deal.
Dan (03:39.914)
Before we started, I also mentioned that I invited Maya over and I invited her when we met on a conference. And it was, I think, the first time we met physically at the same conference. Because prior to that, every time that I wanted to participate in a certain conference and didn't get accepted, I would check to see who did. And I would always see Maya's smiling face. So I'm.
sure she was like, you know, hogging all the good conferences and never leaving me any ones to attend, but fortunately I finally was successful and, you know, consequently here she is.
Maya Shavin (04:20.995)
Oh, well, I have nothing to say about that. Thank you. Now I feel really guilty.
Charles Max Wood (04:28.797)
Right, the email screeners failed.
Maya Shavin (04:31.71)
Yeah, yeah.
Dan (04:33.07)
Yeah, you do speak at a lot of conferences though, right?
Maya Shavin (04:36.454)
Yeah, kind of. I try to limit it though. I will try to limit it once a month, but there's some break. But somehow I still end up with like average about once a month. So it's like 12 a year. That's considered a lot, right?
Charles Max Wood (04:50.485)
That's a lot. Yeah.
Dan (04:52.174)
Yeah, that's a lot. That's a lot. I'm breaking my own personal record this year, and that will be around five or six. So yeah, so 12 sounds like a lot.
Maya Shavin (05:01.07)
Maybe I should reduce it. Yeah. I just... Yeah, I mean, I try to limit it. And I told myself I probably will try to do at less than possible this year. And then somehow I end up with average like every month. I mean, I do have July and August not doing any talk. And then in the middle about March, I think, didn't do any talk. But somehow when I calculate the whole year, like 12, I would... Oh, God.
Charles Max Wood (05:03.593)
Yeah.
Maya Shavin (05:30.931)
Hahaha.
Dan (05:31.436)
I think your husband is the real hero here.
Charles Max Wood (05:34.897)
Ha ha ha!
Maya Shavin (05:35.972)
Yeah, I'll make sure that he knows that. He's like, I'm not a girlfriend, really?
Charles Max Wood (05:43.805)
Yeah, let him know he's the hero. He'll look at you and go, well, took you long enough.
Maya Shavin (05:50.054)
Mm-hmm. Yeah.
Charles Max Wood (05:51.569)
Yeah, I went to, I think 15 in 2019. That was crazy. I mean, some of them were local, so that helped, but yeah.
Dan (06:01.734)
The record holder that I know, I think is Tages. I see he told me that he's doing, yeah, he's doing like 30 something conferences a year, which is not.
Charles Max Wood (06:05.67)
Oh yeah.
Maya Shavin (06:10.583)
He's already like, he's already the next level of being a speaker.
Charles Max Wood (06:14.502)
Right?
Dan (06:16.46)
Yeah, yeah, I get if I also Kyle also used to do a ton, as I recall.
Charles Max Wood (06:20.573)
Yeah, he used to do a lot too. It's hard, at least for me with my kids in school. I'm assuming it's the same for you, Maya.
Maya Shavin (06:22.593)
Yeah.
Maya Shavin (06:28.19)
Yeah, same thing. It's pretty hard. Also, every time I go, we have to definitely abuse the babysitter to be with them a bit so my husband can walk.
Charles Max Wood (06:41.302)
right?
Dan (06:41.43)
Well, while there's a simple solution, you know, the one that I use, I make sure my kids are old enough to stay on their own.
Charles Max Wood (06:49.312)
Right?
Maya Shavin (06:51.23)
Well, that's what that I think I need to wait for another couple years again. My young, my kid is still very small now. My is like only four. So I'm still know how to trick, you know, the best trick is that everywhere you go, you make sure that they have a gift. It's a very cost. Yeah, a very costly solution.
Dan (06:55.303)
Ha!
Charles Max Wood (06:55.794)
Right.
My oldest is 17 and I'm not ready for him to move out or whatever yet.
Charles Max Wood (07:10.357)
That's right.
Charles Max Wood (07:14.665)
I used to do that.
Maya Shavin (07:19.186)
In a way it works.
Dan (07:19.522)
Why? Don't they love the swag?
Charles Max Wood (07:20.018)
Yeah.
Maya Shavin (07:22.782)
Oh yeah, actually they do. I did print the duck, you know, in every conference so I chose to, I always chose the debugging duck and I bring it home and say, hey, I brought you this duck, take it out. And so they...
Charles Max Wood (07:28.102)
Uh-huh.
Charles Max Wood (07:34.397)
Yeah, my kids passed down Microsoft jackets that I got at Microsoft Build. They had teenager sizes. And so I got them and yeah, they wore them for years.
Maya Shavin (07:40.574)
Oh nice!
Maya Shavin (07:46.326)
I work for Microsoft and have zero swag. Oh, except this one. And I had to buy it. Ha ha ha. I have. Ha ha ha. Yeah.
Charles Max Wood (07:50.153)
Oh, my favorite are my purple Visual Studio socks. Those are fun.
Dan (07:52.473)
Mmm
Dan (07:58.506)
I have enough, I have, I don't know, something like 50 Wix t-shirts that I don't really know what to do with anymore.
Maya Shavin (08:05.147)
Who are you? I have so many!
Dan (08:07.406)
because then the
Charles Max Wood (08:07.493)
It's gonna take you a lot of yard work to get through all those t-shirts.
Dan (08:10.566)
Yeah, because, you know, if, if you want to guarantee a success of a project at the larger company, then you have to like put out a t-shirt for that project. Because then everybody who has that project's t-shirt has an incentive for the project, not to get canceled.
Maya Shavin (08:10.76)
I'm sorry.
Charles Max Wood (08:30.162)
Alright.
Maya Shavin (08:31.133)
Oh, right.
Dan (08:34.693)
Yeah.
Maya Shavin (08:34.946)
way but then i don't see any azure
Charles Max Wood (08:35.241)
So what are we talking about today?
Dan (08:41.214)
I don't know we're having a good time right?
Charles Max Wood (08:43.207)
Yeah we are.
Maya Shavin (08:43.781)
Yeah, well the channel is going cheaper, right? So we can just talk. Yep.
Charles Max Wood (08:49.893)
Yeah, yep, plenty of jabber, yep.
Dan (08:53.858)
Yeah, so you suggested a topic that I thought was excellent, Maya. Can you tell us what it is?
Maya Shavin (09:00.514)
So yeah, so yeah, well, I was thinking we can talk about accessibility in component library for developers from the developer aspect. Oh, it's more relevant to me because I mean, in Microsoft is safe. We are crazy about accessibility and I actually was in charge of the driven, the effort of making sure that our product is compliant for my group for accessibility. So yeah, I've been there, done that, done a lot of headaches. So happy.
put it in a talk. So I think that would be a great idea to, yeah.
Charles Max Wood (09:32.329)
Hahaha!
Dan (09:36.006)
So when you say compliant, what do you mean?
Maya Shavin (09:41.218)
Like it has to mimic every single, like we have a documentation of all the requirements that come from, it matches the accessibility compliance, like the wide aerial compliance. We call it Microsoft Accessibility something, MAS. So it's based on that. And they have like a
Dan (09:58.883)
Hmm, so it's...
Maya Shavin (10:07.958)
a lot of like a whole bunch of things like what you need to do according in if your product is web-based what you need to do of your product is desktop based or have voice have video and have a ui not without ui and so on
Dan (10:26.902)
So it's a Microsoft thing, but it's based on industry standards. That's what I understand you're saying.
Maya Shavin (10:32.118)
Yeah, exactly.
Dan (10:35.87)
And of course, also legal requirements, because we know that at least in some places, accessibility is a legal requirement, something that a lot of companies, you know, try to forget to their detriment.
Maya Shavin (10:51.351)
Well, they can try, but they will hunt them down or cut one another. Unless you're so small that literally no customer will even bear to sue you. But in fact, you do, at one point.
Dan (11:14.118)
So and the second question is component systems. Can you elaborate on what exactly, sorry, can you elaborate exactly on what you mean by that? Are you talking about specific libraries of components, just haphazard collections of components, something that teams do or companies do internally or open source libraries? What are you mostly talking about?
Maya Shavin (11:22.612)
Yeah.
Maya Shavin (11:44.868)
I would talk mostly about the high-level component library. So it can be also a component library that we did internally in a team, like in a company, or it's like an open source product like Bootstrap. It can be anything, but it's more about how you make sure that
when you bureau component library, it has to be accessible in that component library in order for people to use it. There's a lot of, let's say, a lot of maintainer or creator or developer that when you create a component library on your net, the thing is, okay, how we're going to make it reusable, how we're going to make it, let's say, responsive and customizable, all of these aspects to make other people use it or choose it to use in the project.
But they forgot one thing, very important, that when people use the component, they need to make sure that this component, when they make together, it has to be accessible at some point. And we have so many problems when we use external library in our project, and then we have to fix accessibility because they don't have accessibility compliance or they don't support it.
Charles Max Wood (12:56.637)
Right. It also makes sense to me just from the standpoint of if I'm building something that per some legal requirement or even just because I feel like I want my thing to be accessible. If it's already built in, if it already works that way or makes it easy enough for me to just add an extra parameter or something to it, I'm much more likely to make my app accessible. Right. Because then I don't have to think about it either.
Maya Shavin (13:08.174)
Mm-hmm.
Dan (13:26.05)
I would go a step further. Ideally, if you're using a good component library as a component library's user, I'm guessing, then you should preferably not need to think about accessibility that much, right? I mean, things should be accessible out of the box.
Maya Shavin (13:42.67)
Mm-hmm. Yeah, that's true. That's true. You will only like, you will still have to think it at the very minimal F level. Like you most likely would have to think about the connection, the flow, the user flow on the page or something. But you don't have to think about whether this table is accessible or not. So.
Charles Max Wood (13:43.132)
I agree.
I agree. But
Charles Max Wood (14:01.18)
Mm-hmm.
Charles Max Wood (14:08.337)
Yeah, and that's kind of what I was saying was, yeah, as much as possible, make it so that I, you know, I use the component, it just automatically or magically, or however you want to define that does the right thing. But sometimes I may have to add some element to it some way. And so when you do that, just make that as easy as possible.
Dan (14:30.466)
Now, we've had several episodes where we've talked about this. For example, a great one from, I think, more than three years ago is one that we had with Bruce Lawson. We should probably bring him on the show again. And yeah, everybody loves Bruce Lawson.
Maya Shavin (14:44.774)
Oh I love Bruce Larson, he's so cute. I met him in JS Nation, and my talk was also about accessibility in JS Nation. And so he went on stage and he actually answered some questions for me, which is so cool.
Charles Max Wood (14:45.097)
Oh yeah.
Dan (15:03.522)
Yeah, Bruce himself is an accessibility expert. And we actually had him speaking about the fact that the platform itself, the browser, HTML, is effectively, you might even say inherently accessible. And it's mostly us web developers, JavaScript developers, DOM users, framework users, who are...
you know, seemingly doing our best to kind of break that. So.
Maya Shavin (15:34.743)
We kind of break everything, no?
Charles Max Wood (15:35.433)
hahahaha
Dan (15:37.491)
Yeah.
Charles Max Wood (15:38.842)
Not me, it's my coworkers.
Dan (15:41.25)
And yeah, exactly. And so the question that I have in that context is what is the current state of component libraries that you see? Uh, like if, if I go out and get some open source component library that looks good, like what are the, what's the chances, what's the probability that, that it'll have good accessibility or conversely, if I decide to build it internally,
Maya Shavin (15:41.412)
Yeah.
Dan (16:10.246)
How likely am I to produce one that has proper accessibility?
Maya Shavin (16:15.926)
Oh well, that's a very tough question to be honest. What exactly a good accessibility level coverage? That's the first thing we need to define.
Maya Shavin (16:31.866)
matching on the Y standard, like providing on the component, having a label or descriptive enough or something like that. Was it considered accessibility good enough? Or is the pattern itself is focusable? It's also, it's really hard depending on what are you seeking for when you...
talk about component, like what specific use case. I saw, let's say, like check Chakra UI. You guys probably know Chakra UI, right? So Chakra UI is one of the library that they claim to be accessible, or at least the last time I checked them, they say they aim to be accessible. And what I mean by accessible is meaning that it's have an ARIA label when you need to ARIA have ARIA label.
using semantic HTML when it's supposed to use semantic HTML and probably have some focus or tool tips on keyboard navigation and so on. Though, again, it's still not considered accessible enough in the standard of the person who use it, at least in our standard. Because when we use it, we put it in our case, that can break.
Basically, we also need to check the case, whether when you zoom in of a page or component, whether the component is break or the whole flow is breaking. So it's very hard for me to give you a very accuracy and accurate answer whether component library here now is accessible at the good standard. But I saw, I did saw a trend that
Most modern component libraries start to put a lot of effort into making it at some certain level accessible, like accessibility standards. So it's like with WiredArea and Symantec HTML, they do try their best to provide you all these options, and then it's up to the user to move on from there.
Dan (18:46.254)
So I'll kind of flip the question. Pardon me, Chuck. I jumped ahead of you. I'll kind of flip the question then. Let's say I'm doing a project and I found a component library that I like. It seems to have APIs that make sense to me. I like the examples that I see from what I've checked. I can actually implement our brand using that component library and so forth.
Charles Max Wood (18:50.293)
Hmm. No, you're fine, go.
Maya Shavin (19:00.581)
Mm-hmm.
Dan (19:15.066)
How do and I want to verify that it has proper accessibility. How do I go about it then?
Maya Shavin (19:23.882)
Then you need to ask the library maintainer. Usually in the documentation they have to claim what level of accessibility compliance they have.
Charles Max Wood (19:28.801)
Hahaha!
Maya Shavin (19:39.014)
a or a plus or something. I mean at least I have to have some disclaimer about accessibility or a section in the documentation say that we provide accessibility support on this and this. That's the only way you know because otherwise or otherwise you need to check every single component that you use from their component library whether it's accessible or not for you. I mean so yeah.
Charles Max Wood (20:04.949)
So, yeah, I mean, this is the question I was gonna ask that Dan preempted and it's kind of the backwards way of asking his question is, is there a standard, right? So you're saying there are A or AA plus, it sounds like there's a way to rate these, right? It does all these things and it doesn't do those things. And so it's, you know, it's this good, but not that good.
Maya Shavin (20:07.629)
Yes, sir.
Charles Max Wood (20:30.177)
where is that standard? Like if I was gonna build a library, where's the list? Right, so I can say, yeah, we're this compliant.
Maya Shavin (20:37.864)
Well, the compliance is actually on the website, I think, on the internet. Even chat-shippity would know how to answer that. I mean, you can go to the website, Warrior Review.
Dan (20:55.022)
You're at Microsoft, you're required to trust ChatGPT.
Maya Shavin (21:02.213)
No. I can tell you no. We do everything with. Sorry, I'll just post it on the chat.
Charles Max Wood (21:02.269)
No.
Yeah, so, so.
And so my question is like for, so if it's an A rating or yeah, AA plus or whatever. Oh, here we go. Well, you sent a link over. Yeah, we'll make sure this gets in the show notes because yeah, I mean, I can imagine, okay, I'm going to build myself my own library, right? For whatever reason, none of the rest of them are good enough or it's not quite what I want or I don't know. So yeah, this is what I was looking for is okay, I can go and I can review it according to these standards.
Maya Shavin (21:30.798)
Thank you.
Charles Max Wood (21:38.11)
Um,
Maya Shavin (21:38.558)
disclaimer that pay is pretty hard to read. Ah well it's the same thing if you I don't know if the one in Microsoft is open it's also publicly but in Microsoft we have the same thing and even harder like they actually display that what's in which let's say in this case landmark what exactly is the landmark except and so on and so forth.
Charles Max Wood (21:42.941)
Yeah it is.
Maya Shavin (22:05.606)
If you started building a component library, this is the link I sent. It's the starter. So it's the starter that you can go there and take a look. And usually there are a lot of things there, but it's only a few applied to the web. Say content, landmark, keyboard navigations. These are the three. I would say these are the three things that should be paid attention the most from the beginning.
And then after that will be contrast. Contrast that the browser will screen as you'll be using Lighthouse. So you can take care of it later. It's more about the color and stuff.
Dan (22:42.706)
But is contrast really part of the component library? Isn't it something that's usually a style that's applied over a component library?
Maya Shavin (22:47.604)
Mm.
Maya Shavin (22:54.002)
Well, when we build a component library, it's actually we're building some sort of design system in it and component library is just the part where you implement like a Exposed to user to user. So every time when we build component library, it's not just about building a button. It's about Design how the button look and then you have to have your own style guide, the own design approach
in order from there based on that you build the component library. So every component library will have a set of style guys and which means have a set of palette, color palette, a contrast button, for example, notifications, toast notifications. So usually now we have warning info.
OK status and error status. So this is a four state. So in every component library, you have to provide a component toast notification, which can have these four states. And these four states usually will come with different colors. That has to come from your own style guide. And your style guide, first of all, needs to be accessible so the color really belongs to the accessibility.
compliance for your component library which contains the style guide. But then it's again up to the user whether they want to use your style guide or they want to use their own style guide.
Charles Max Wood (24:26.441)
Right, so what you're saying is maybe the defaults for border width and the color and that kind of a thing. I'm thinking of bootstrap and I don't know why because I've used like six other ones that I like better. So you have your primary button and your whatever. And so those are all colors that meet the accessibility standard. But as Dan said, I can override them, right? I can go in and I can say, my primary button is now yellow. And so if it's a faint yellow on a,
white background, then my styling isn't accessible, but the component library's default one is, and it encourages me down that road a little bit, maybe to have a darker, better looking button.
Maya Shavin (25:09.082)
Right. So that's why I say that we come back to the things that by default, the browser can be accessible. I mean, the browser is accessible for us, developers who break it. So same goal with component library. You can provide a perfect accessible component library, but you still have a loophole there that somewhere the developer will still break it.
Charles Max Wood (25:20.679)
Hahaha!
Charles Max Wood (25:31.347)
Right?
Dan (25:31.658)
I guess that another loophole that people might use or unintentionally, hopefully, to accidentally break accessibility is the order of components on the page. Each component internally can have good keyboard support, but if I order them in a weird sort of a way, then the tab order becomes all funky.
Maya Shavin (25:58.626)
Yep. That's the next level. Usually it's not under the component library control. It's the next level more about the designer control. So when we build a website or something, we at the developer cannot control the tap order. The one who controls the tap order, which is the right tap order, is the designer. But again, the designer controller...
but it ends up on us because then the user uses it and says, okay, but this tab holder doesn't make sense to them. Like, one time we got some bugs that a tester test our product and he played with the keyboard and he goes, if I do tab, I need to land on this specific button, not the other one, but our, by design, our product have to land on the other one, it doesn't make sense, but yeah, this is the design. And yeah, so.
This part is the tricky part. Who is right?
Dan (26:59.118)
One thing that I'll just use this opportunity to rant a bit. One thing that drives me nuts is that so many websites, web pages, or apps, not even web, use various sorts of two factor authentication where they send you a code and they don't put the focus on the code field. So I start typing in the code and I'm typing nothing.
Maya Shavin (27:26.714)
I'm sorry.
Dan (27:28.794)
And then I look up because I'm looking at my phone and typing the code and I'm happy and I press enter and I don't even look up, I press enter, I press enter or nothing. And I'm super annoyed with it. And I'm like, it's just, why didn't you just put the focus there? It's so annoying. That and setting the default year of birth in various forms as 2023.
Maya Shavin (27:33.035)
Okay.
Maya Shavin (27:49.471)
I really like this.
Dan (27:58.586)
Like I'm one year old and I'm filling your form.
Charles Max Wood (28:02.61)
Yeah.
Maya Shavin (28:03.99)
Oh god, well, that stuff remind me of the other day when I fill up the form for the for checking and then they They start my year with 2000. I think it's 1990 and I told my husband that oh I'm old enough. I finally can scroll down only 10 years I don't have to scroll down a lot but if Like they put the no not 99. I think it was 2001 or something
I feel really, really old every time I have to scroll. Because I feel like I'm very old now, I have to scroll the way back. Ha ha ha.
Charles Max Wood (28:36.297)
Yeah. I think my favorite is, and this is on the iPhone, it's the date picker. So if there's a validation on it that says you can't pick dates in the future, well, if I have to enter my date of birth, my birthday's in December. And so what happens is I'll set December and then it'll flick back to the current month because December of whatever of this year is not a valid date. And I'm just going.
Maya Shavin (28:44.162)
Oh.
Charles Max Wood (29:02.537)
Yeah, but it's the first one and so it's the one that I want to change first.
Dan (29:08.502)
Yeah, but that to be fair though, those aren't accessibility problems. Those are just UI annoyances. It's a user. Yeah.
Maya Shavin (29:09.389)
I got you.
Charles Max Wood (29:12.581)
No, it's a usability problem. It's a different thing, but yeah.
Maya Shavin (29:15.094)
Yeah, but the Fogwood one is annoying now. I know how you feel. We have so many buffs about the Fogwood disappearing after we open some Modal or something. You know what? I would like to say I blame React for that. But I just...
Charles Max Wood (29:20.446)
Yeah.
Dan (29:34.62)
Ha!
Charles Max Wood (29:36.245)
Are you listening guys? Dan Abramov, it's his fault, no.
Maya Shavin (29:39.504)
It's true! It's true!
Dan (29:41.018)
No, actually, Dan Abramov is no longer with React, just so you know. He actually left Meta.
Charles Max Wood (29:45.269)
I know. That's why we can blame him now.
Maya Shavin (29:45.406)
Yeah, I think he moved to Next, right? He moved to Next, so now I think he moved to Next. Next.js? Yeah? I don't know. But then we're always going to...
Dan (29:50.588)
Sorry?
to Versailles? Did he also join Versailles? I don't know. I know that Adam Clark I know joined Versailles. I don't know about Dan. I don't know. It's interesting.
Charles Max Wood (29:58.033)
I don't know where he went.
Maya Shavin (30:04.598)
So who are we going to plan for anything in React now? No one there!
Charles Max Wood (30:08.293)
Right? Yeah, but your point's well made with focus because if you can't see the screen, right? If it is, because a lot of times there's a border around it, right? Because I'm not visibly impaired or vision impaired. And so I can see the border and I, you know, it's not there and so I can click on it. Or if I have a pointer device and I, you know, if I can't use a mouse and I don't have a pointer device that I can use to hit it.
then yeah, that becomes harder because I effectively have to scroll or find it some other way.
Maya Shavin (30:42.029)
and then also think about it like we used to have a design in couple years ago the design it was one of the design pattern was that you remove the outline you know the default outline of the button so it's like it's like everything every component library
I think they come, they were shipped with CSS that override the outline of the browser. Like, they would just remove them out like entirely, thinking that is something makes the button looks nicer. And then everyone like, no, it doesn't make it better, it makes it not accessible. Yeah. Oh.
Charles Max Wood (31:16.793)
Yeah, I can't figure out where I'm at. Yeah.
Dan (31:22.602)
By the way, that reminds me about, I think I want to mention it before I forget, that I think, you know, Microsoft itself, you guys have this great browser extension, which can be used to track the movement throughout the form. So you can see, like, you know, when you start tabbing or using the arrow keys, like where you go, and it kind of draws it in as lines on the page.
Which, which... Yes.
Maya Shavin (31:51.911)
You're talking about accessibility inside, right? This one. Yeah, I sent it in the chat also. Yeah, that was great. We used it at work to test our tap water and I must say it's a great tool. We have three different kind of testing modes. One of them is similar to Lifehouse that it scan the page and then it highlight for you that...
what is the error and they actually group with you group into a section and then they give you the description how to fix what was the problem how to fix and how you can actually lock it into JIRA or ADO and for your black bug tracking and then the and then of course the whole flow with the tab yeah so are we i really love it it's like it's one of the great
I said, subreddit.
Charles Max Wood (32:48.293)
Yeah, that's awesome. I love the ones that tell me, this is what you have to fix, right? Not just, hey, this is bad, right? It's, this is bad and this usually solves it.
Dan (32:56.61)
Yeah, for sure.
for sure. And thinking about that, is there a difference between working on accessibility for component libraries versus working on accessibility for apps or web apps, websites?
Maya Shavin (33:00.543)
Yeah.
Maya Shavin (33:19.531)
I mean, in a way, I think accessibility for component is the smaller scale of accessibility for the app. So it's much easier in a way if we compare it with these two. Because the app, when we're working with the app, we need a lot of these to talk about. I also have to involve with the app a lot of different testing.
Testing for component is much more simple. Testing for the app is also, it's like, you need to do a lot manual test. For component, if the lowest level of component, then it's easy, you have only one for different kind of accessibility to pay attention. And then moving on, you can do divided conquer and moving from the bottom to the top. And you can make sure that every page or whatever component be accessible.
But for the app itself, it's more about user experience already. So it's more complex.
Dan (34:21.563)
And, oh, go for it.
Charles Max Wood (34:21.629)
I'm also wondering with the application, if I upgrade my component library, right? I don't have any guarantees at that point, right? I'm assuming that the stuff they got right is still mostly right, but is there a good way to, you know, when you run that upgrade and you change a whole bunch of things at once maybe to make sure that all of this stuff is still doing what it's supposed to?
Maya Shavin (34:38.506)
Mm-hmm.
Maya Shavin (34:49.101)
You can do automation, I think. For automations, let's say Playwright, if you do end-to-end automation. So Playwright also you can use accessibility test with Playwright. So we have, we use something called an accessibility insight for package. Let me just look for it.
Charles Max Wood (34:56.861)
Mm-hmm.
Maya Shavin (35:11.378)
I think it's this one... Um...
Dan (35:14.418)
So you actually, you did to me what I did to you before in that you stole my question because that's exactly what I wanted to ask about was how you actually test, how you automate the process of testing for accessibility problems. Because it's not just about...
you know, upgrading your component library. I mean, anytime you make any change in the user interface, you might introduce accessibility issues. So it's really a question of how you, you test for that.
Charles Max Wood (35:41.599)
Right.
Maya Shavin (35:49.02)
Okay.
Maya Shavin (35:55.106)
So you have to define certain tests for like what is acceptable test for your component and for your app. And then I guess it also requires time and effort.
Dan (36:15.234)
Yeah, building tests is always effort and hardly ever fun. I know a few people who enjoy it. But like we had Shia Lean as a guest on our show. I think he somehow enjoys writing tests. But other than that rare minority, most people don't. And yet, you're always so happy when there are tests. And
Charles Max Wood (36:38.545)
Oh yeah.
Maya Shavin (36:41.285)
You always feel like, okay, if you have some test, it probably means that you have recovered, right?
Dan (36:49.19)
Yeah.
Charles Max Wood (36:51.249)
Yeah, I've worked with people that wrote those tests and no.
Maya Shavin (36:54.262)
and
Maya Shavin (36:57.867)
I wrote it myself and sometimes I just wrote it because I have to write it. That's the best way. I think everybody will have that in their heads.
Dan (37:12.71)
So you use Playwright for tests and you're saying that there is something on top of Playwright that can be used for end-to-end testing that revolves around accessibility. Am I understanding correctly?
Maya Shavin (37:27.938)
So there's something that you can use together with Playwright. So you probably know about Deque Lab. So Deque Lab, they build a lot of tools regarding the accessibility. So the package is actually used for LifeHow. LifeHow uses the package to build the DevTool, like the LifeHow check of accessibility. So.
Dan (37:32.376)
Hmm.
Maya Shavin (37:54.838)
They make a lot of, they make a really good series about teaching about accessibility and also do a lot of pattern on it. And this package, this NPM package have also support for Playwright. So you can, you can, um, plug it into your end-to-end testing system that be on top of Playwright and then can enable the accessibility cover for your app. Of course, it's not the perfect one, but this cover, the basic case.
for the applications, just like any scanning of live house or accessibility inside for the web, the extension one.
Dan (38:32.726)
Yeah, another thing that you might do, and I'm wondering if you think it might be a good idea or not, is when you build your end-to-end tests, then use quote-unquote simulated keyboard navigation to try to get between things and see that it works. Now, it can make the thing a bit more fragile, because if somebody adds a field in the middle, then you might, you know, everything might be correct. You're just not arriving at the field that you want to get to.
Maya Shavin (38:49.086)
Right.
Dan (39:03.051)
But on the other hand, it verifies that things like tabbing still actually works. Or you might search for something and then tab from that to the next thing or stuff like that in order to verify and not just go directly to the one that you want to click or something like that.
Maya Shavin (39:23.687)
Well, that is something that I would say I'd prefer. I hope that one day we can use AI to help us with that.
Maya Shavin (39:37.838)
I mean, even if we build a very good automation system, there's a lot of things that we cannot do automation. We still need manual testing and keyboard navigation is one of the things that is very, very fragile in automation, it requires a human to do it. But also it's the level of developer. Like if you build a complex component, usually what I say to the team is that
If you build complex and have more than three components in the component, then you have to turn off your mouse and start navigating through it using the keyboard and see whether it works for you.
Dan (40:22.414)
Yeah, for sure. It's amazing how many developers are proud of the fact that they can use their favorite IDE just with the keyboard, but then don't bother to actually test the web app or website that they built using just the keyboard.
Charles Max Wood (40:34.089)
Ha ha ha!
Maya Shavin (40:36.078)
I'm sorry.
Charles Max Wood (40:37.427)
Right?
Maya Shavin (40:39.686)
Yeah, yeah, I mean I don't know how to use the keyboard with my visual studio. That's my problem with the opposite.
Charles Max Wood (40:50.445)
I do, but I installed an Emacs binding, so...
Dan (40:57.026)
You're old school.
Maya Shavin (40:59.135)
Oh my god. Yup.
Charles Max Wood (40:59.346)
Yes.
Dan (41:01.478)
Well, it could have been worse, it could have been Vim.
Maya Shavin (41:05.494)
No, please don't go there. Don't go there.
Charles Max Wood (41:06.708)
You just hurt some people's feelings.
Dan (41:11.014)
By the way, I think the guy that created Vim recently passed away.
Maya Shavin (41:17.358)
No, really?
Charles Max Wood (41:19.796)
I don't know.
Maya Shavin (41:20.246)
Let's see. Let's.
Dan (41:22.639)
I hope I'm not misleading anybody and you know, we'll get angry emails saying that I literally killed someone. But I think I read it.
Maya Shavin (41:33.414)
Oh, he did! He did! He just passed away on the third of August this year.
Charles Max Wood (41:40.817)
It's like when you see a celebrity name trending on Twitter and you're like, did they die?
Maya Shavin (41:41.686)
So you were right.
Dan (41:47.19)
Yeah, I'm laughing, but it isn't funny.
Maya Shavin (41:51.038)
Oh wow, it's for real, really. I like.
Dan (41:54.294)
Yeah, yeah, well, that should be one of my picks then. Yeah, to commemorate him.
Maya Shavin (41:56.287)
Love.
Charles Max Wood (42:01.309)
VimGuy, whatever his name is.
Dan (42:04.358)
Uh...
Maya Shavin (42:04.599)
Sprem, Mulena? How do you pronounce it? Sprem?
Charles Max Wood (42:10.449)
Oh, it looks like a Dutch name.
Maya Shavin (42:13.01)
He's a Dutch programmer.
Dan (42:13.638)
Bram, yeah, Bram Mulanar, something like that.
Maya Shavin (42:21.454)
Yeah, yeah, it's him, it's him.
Dan (42:23.902)
Okay, so back to happier topics of accessibility. So I know that watching some of your presentations on the topic, you talked about, and you kind of mentioned it when we were talking about the different levels that you work at, and it really, how it kind of falls into this whole concept of atomic design. Can you elaborate about that a bit?
Maya Shavin (42:51.984)
Let's say, okay, so atomic design, yeah, it means the whole concept is that you break the component to a layer. I'm sorry.
Level and level and that talk into atom so atom is still like this super small cell the basic one so it's like a button or an input or an icon these items and then is and then it's like a Lego block is more like a Lego and then you can build other component on top of this to make it into molecule and oh I hate that word Again, I'll get these on
Dan (43:32.854)
Organism, yes. I think the one above, above molecule is organism.
Maya Shavin (43:34.79)
Okay, okay. It's only very hard for me to pronounce that word without stopping a minute. I think that am I not doing anything wrong here? So, so I do organism and from there, have template and then page. So page is more like a page, this is the full concept. So, so for accessibility, there's also a lot of things, a lot of aspects to talk about. And we try when we talk about
And matching into Atomity's life, I mean, in the Atom, there's a component like a button. The button itself does have accessibility, but we don't need to really care about a lot of aspects of it. Let's say the tab order. The tab order doesn't matter on the button because the button itself is a single component. So in this component, what we can care is just the color contrast.
It's just the content, whether you have enough descriptive content, and maybe a focus if we have a focus. So make sure that the component's focus itself is focused. So with this and of course semantic HTML and layout, and for this small component, if itself is accessible with these criteria we set for the component,
When you plug it together with another component, for example, if I plug an input and a button together to build some kind of an input form, then if the input itself is accessible and the component is accessible regarding the descriptive, semantic, ARIA, and so on, these two put it together should we don't need to care about this aspect of accessibility.
we don't need to care whether this is semantic correctly, whether line mark is correctly, or whether the focus state of these two components is set correctly or not, because they should be focusable and they should already be covered from that. So what now what we can now check on this level of two components is navigation. So we move from the input to the button, you click something, you move back, it's still working, you type something on the input.
Maya Shavin (45:57.194)
what the button will behave. This is like the level that you don't need to care about other things based on company. And then you can check more important things that only apply to this level. And we'll move on and on. Another example is like building a gallery, a product gallery. So if the product card is so accessible, so when you land on the product card,
you kind of know that the product card is already accessible and it can be announced so you don't need to care to check again whether inside the product card is accessible or we need to check the flow inside. Now what you need to check is check the flow from one card to another card and whether you click on the card and if you have a modem from the product gallery
So, open, then when you close the modem, the fog will return to that protocol. And this is more like, it's more like a divide and conquer concept.
Dan (47:02.406)
So yeah, it's divide and conquer. It's about leveraging reusability, it seems, for the purpose of accessibility. Because once you've got the button, like you said, you've got the button atom working correctly, you can use that same atom in various quote unquote molecules. And you're guaranteed a certain amount of accessibility just by reusing that atom. And it's also about, you know,
Charles Max Wood (47:22.025)
Mm-hmm.
Dan (47:31.738)
properly thinking about the problem by, like you said, dividing and conquering according to the levels at which you're currently operating.
Maya Shavin (47:40.265)
Yeah. It's also, sorry. Sorry, go ahead.
Dan (47:41.902)
By the way, oh sorry, go on. No, I was saying that, by the way, I recently spoke at a conference called Front Zurich, and the keynote speaker was Brad Frost, who actually wrote the book, Atomic Design.
Maya Shavin (47:59.659)
Oh yeah, he's also of the whole concept.
Dan (48:04.258)
Yeah, he's the creator of the whole concept. Yeah. And he's a great speaker and a really nice guy. So.
Maya Shavin (48:07.124)
Yeah.
Maya Shavin (48:11.009)
I also want to meet him one day. Hopefully we will meet each other in one of the conferences.
Dan (48:16.698)
So yeah, I got you on that one. I beat you on that one. Ha ha ha.
Maya Shavin (48:21.067)
Yeah, okay, next year when is the FB? I mean, on the other hand, Atomic Design is really great. Like if you build a template like this part, when you build a template and then you build a page on top of template, if you build a template, they sell it accessible. So if you make it build in a page, form the template will be much easier.
Charles Max Wood (48:25.705)
hahahaha
Charles Max Wood (48:31.189)
Cool.
Maya Shavin (48:47.106)
This is also another aspect of reusable for accessibility.
Dan (48:58.272)
So far, is there any other important aspect of component system for accessibility that we've not touched on that you want to mention?
Maya Shavin (49:10.734)
I think we talk about the focus, we talk about the compliance from the bottom. We also talk about testing, but I think we need to talk about the developer mindset.
Charles Max Wood (49:25.557)
Mmm.
Dan (49:25.926)
Go for it.
Maya Shavin (49:28.274)
Yeah, so I mean, here, it's also for my own story, until the last couple of years. I honestly, I didn't care much about accessibility. And I know that a lot of people, so a lot of developers, still, we know about accessibility. It's there, but we don't really care about it. Or we don't think like, when you develop, let's say we develop component, the most thing I heard, even now, is that...
Who cares about accessibility? It's only 1% of the people, of the user in the world, right? So I can just make something fast, faster, POC much faster, deploy much faster if I don't care about accessibility because it took a week, two weeks or a month to fix anything regarding that. So, I mean, I don't know, what do you think about it? Like what do you think that it would be a good idea to make developer more...
Involving to accessibility?
Dan (50:26.422)
My take on it is as follows. Um, like we kind of discussed when we mentioned Bruce before, uh, the underlying system is effectively inherently accessible. So it's not about developers having to implement accessibility. It's about developers not breaking or ruining accessibility. And it seems to me that it's much easier.
Maya Shavin (50:50.126)
You know what?
Dan (50:56.242)
to make sure that developers don't get in the way of accessibility from the get-go, then trying to fix a lot of accessibility issues later on in the process. On top of that, I also think that, like we kind of mentioned before, it's also a legal issue. And these days, you can get sued if you're not...
properly accessible and it's not just Microsoft if you're a Microsoft or a Google anymore there are literally companies out there that are checking websites and are suing companies intentionally for being not you know not being accessible it's actually happening
So, and also think about, let's say, you're a company that, you know, you're a startup, you might think I don't have resources for that, but, you know, you might need to undergo due diligence for raising additional investments or M&A or thinking about going public. And if you're not accessible, that can get in the way of that process, and it will likely happen at the worst possible time. So.
My take on it is that accessibility needs to be one of those things that's front and center effectively from the get go. And then if you, you know, you have the proper mindset, it shouldn't be that hard. If, if you do it from the get go, that's at least my take.
Charles Max Wood (52:37.098)
Yeah, I mean, there are two different things to talk about here. And I think, Dan, you made the case for why you should have a mindset that includes accessibility, especially from kind of the liability end of things. Um, you know, I've, I've had people try and, you know, explain things and kind of give you a guilt trip for not doing it because it's just not fair to people who have disabilities, but the reality, at least at that point, and it's becoming less and less this way.
But the reality at that point was it was an extra thing you had to do. And a lot of folks didn't want to invest in it. Um, but what I found is that until, you know, your, your startup company that's next, you know, next door to my startup company gets sued for website accessibility. It's just not going to be on my radar. Right. And, and I think most people operate that way. And so from where I, where I'm coming from.
Typically the way I've seen some of these things come in, like TDD is, it's not as much a big thing, but it used to be a big thing in the Ruby on Rails community. And the reason was, was because there were a handful of people out there that were doing the work to evangelize it, right? And a lot of people in those communities were joining things like software craftsmanship movements and stuff like that. And so what I think you have to do to get people to adopt the mindset, because I don't think you can scare people into it.
Maya Shavin (53:53.735)
And I think that's a great way to start a business.
Charles Max Wood (54:00.701)
But I think if you can make it kind of the regular MO for a person who's doing React, or the normal way of doing things if you're writing Vue, or if you can make it this regular thing where when you run your tests, it also says, hey, we've got these automations for accessibility. Do you want to add them in? And then it raises stuff, right? You bring it to the forefront in another way and you market it to people in a way that it's like, hey, look.
this is just the way we do things. This is the React way. This is the next JS way. This is the Redwood JS way, right? Then it becomes a different conversation because then the question isn't why, it's not why should I do it? The question becomes why aren't you doing it? Because everybody else is. And it's tricky to create that kind of a movement, but that's the only way I see it really getting wide adoption is if it's at that point.
Maya Shavin (54:50.482)
I think that's a great way to start a conversation. But I think that's a great way to start a conversation. And I think that's a great way to start a conversation. Thank you.
Dan (54:56.498)
I think it kind of also depends at the level of the person that you're talking or speaking with. I mean, you're unlikely to scare a developer about the legal issues, but you might scare your CFO or CEO into enabling you to invest the extra effort or to allocate the required resources to do it properly.
Charles Max Wood (55:12.939)
Maybe.
Dan (55:25.61)
I also think that it's also a question about, you know, missing out on a large potential customer base. I mean, thinking about myself, you know, my eyesight, unfortunately, is not what it used to be like 15 years, 10, 15 years ago. And I often find myself zooming in web pages. And I every time.
Charles Max Wood (55:49.833)
Mm-hmm.
Dan (55:53.626)
I encounter a web page that prevents zooming in, then that page is dead to me. That website is dead to me. I won't do anything. And, you know, I'm probably in the category of people that you want to target when you're trying to sell things online. So, you know.
Charles Max Wood (56:06.29)
No, it makes sense.
Maya Shavin (56:22.751)
You know what, that's the thing actually, that's the one very good, all of your insights is very good because I... I mean, I personally...
Dan (56:30.182)
Thank you!
Charles Max Wood (56:31.797)
haha dan will just buy his vacation somewhere else that's what's gonna happen
Dan (56:37.102)
Exactly. By the way, by the way, exactly true.
Maya Shavin (56:39.186)
Ah!
Yeah, that's actually, you know, when I started Microsoft and I got the, they gave me the task to be, to take care of the accessibility. And one time we have a book on 200% and 400% zoom. So this is actually in the compliance level. And we were like, who? Zoom in, who ever zoom in, who would care about 400%? Okay, so like, it's really, literally too large. But then it's
you actually can see the use case when your parents or even someone with classes have to zoom in. And this is valid because I also abandoned a lot of things like that. It was a very valuable lesson for me when I started working with accessibility regarding this.
Charles Max Wood (57:22.049)
Mm-hmm.
Charles Max Wood (57:30.322)
Yeah, I think you can make the case in some cases. It's probably easier in some cases than others. Just to make the point, right? If you can tie the people that aren't coming back to your accessibility, that's a lot easier case to make than the people who just bounce off and you just never really know, or people who don't come in the first place. The other thing is that if you're...
Dan (57:51.887)
Yeah...
Dan (57:56.114)
But that's really hard to do unfortunately by the way. You know people...
Charles Max Wood (57:58.477)
It is, it's really hard to do. And that's, that's why I'm saying, you know, I, I understand you're talking about the incentives, but the reality is, is that, um, the experiment is, do I, when I allow zooming, do I sell more stuff? And, you know, I don't know how much work that is to make that work, but, you know, that's, that's how I would make the case to my boss, cause, cause they want to see the numbers.
Dan (58:23.892)
That's the funny thing though. If you check many, most of the sites from my experience that prevent zooming, do it for, they need to actively disable it. And so, you know, the web by default enables zooming. In fact, one of the reasons where I often prefer websites to various native apps is the fact that you can actually zoom.
Charles Max Wood (58:32.152)
They actively did, yeah.
Charles Max Wood (58:36.669)
You're right!
Dan (58:48.078)
without changing some system configuration. You just pinch and zoom and it works. And it's so annoying when websites actively disable that for big, for, I'm mostly sorry, for layout issues because they decided that the website doesn't look nice when it's zoomed. By the way, the thing that I probably hate the most is on the PC or the Mac.
Maya Shavin (59:03.747)
Yep.
Charles Max Wood (59:05.148)
Mm-hmm.
Maya Shavin (59:08.086)
Yeah, exactly.
Dan (59:14.69)
when you do like the command plus in order to zoom in. And then with some websites, they actively make the tests smaller as you zoom in. So you're actually trying to zoom in and the text instead of getting bigger, gets smaller.
Charles Max Wood (59:31.753)
I've run into that. And then I've run into it where you try and zoom it the other way and it'll come back to zero zoom. And then you start going the other way and it gets smaller that way too. Yeah, it's crazy. I'm gonna push us toward wrapping up just cause I have, I'm actually gonna be interviewed by Tracy Lee if y'all remember who she is in 20 minutes. So yeah. So.
Dan (59:41.334)
Yeah, so it always gets smaller. It can never get bigger.
Dan (59:55.881)
Oh yeah, for sure.
Maya Shavin (59:56.158)
Yeah, she's very nice. Say hi, say hi.
Charles Max Wood (01:00:01.157)
Yeah, they're putting out a show called Just Ship It. So yeah, she invited me on. So we're gonna be talking. So yeah, I have to wrap up and be ready to go for her. So yeah, but this has been really, really fascinating. And you've given us some good resources, I think, Maya, as far as like where to look and how to approach some of this stuff. But if people wanna know more or reach out to you, are there good ways to do that?
Dan (01:00:01.646)
Yeah, say hi for me too.
Maya Shavin (01:00:33.519)
Yeah, I mean, I'm on Twitter. I think we still call it Twitter. I mean, it's hard to say that. When I say X, I feel like I'm saying X file or something. So you're like, okay, it just doesn't come natural. I like the word Twitter better. So yeah, I'm on Twitter. Just on my name, Maya Chauvin on Twitter. On LinkedIn. Nowadays, everyone ships to LinkedIn. So you can also find me on LinkedIn.
Dan (01:00:37.713)
X. Ha ha ha.
Charles Max Wood (01:00:49.181)
Right. I still just call it Twitter.
Dan (01:01:00.978)
Microsoft owns LinkedIn!
Maya Shavin (01:01:04.395)
Let's not just dig into that and the fact that it's also on github and the fact that it's also on npm and a bunch of other things. I'm just kidding. But yeah.
Charles Max Wood (01:01:12.901)
Yep. Hey, Maya, I've been having trouble with my LinkedIn. You think you can do me a solid? Ha ha ha. Ha ha. All right, well.
Maya Shavin (01:01:20.127)
Excuse me. I have no idea how, you know what, the other day, I had to ask someone to help me how to find my QR code in Lincoln. And I walk away and the person say, but you work for Microsoft, why don't you know how to use Lincoln? Okay. That's that rest of my face.
Charles Max Wood (01:01:38.867)
Right?
Yeah. All right. Well, I'm going to push us toward PICS. Dan, do you want to start us with PICS?
Dan (01:01:47.35)
Okay, I'll go for it. So there've been a couple of interesting things going on X, Twitter, whatever we decide to call it. Um, so one, yeah, one. Yeah, exactly. So one interesting thing, uh, so there was this whole Twitter storm that, uh, started when DHH from Rails infamy, uh, posted about the fact that they're dropping a TypeScript.
Charles Max Wood (01:01:56.085)
We'll call it Twix. Are you a right Twix or a left Twix?
Dan (01:02:17.418)
And by the way, TypeScript also comes from Microsoft. Yeah, exactly. So he doesn't like TypeScript anymore and effectively they had TypeScript, they were using TypeScript in a project and then effectively just in Turbo. And by the way, I'm not really familiar with it. Turbo 8, something like that. And they just remove all the type information.
Charles Max Wood (01:02:21.609)
That's true, Anders Heilsberg.
Maya Shavin (01:02:26.004)
Yeah.
Charles Max Wood (01:02:35.494)
in turbo.
Dan (01:02:48.506)
And it started this whole Twitter storm with people like Theo responding and also and many others. And it got really, you know, like on Twitter everybody's so relaxed and so chill. And nobody ever says anything offending. Everybody's super professional about it.
Charles Max Wood (01:03:00.945)
Mm-hmm.
Maya Shavin (01:03:03.325)
I'm going to turn it over to you. So, I'm going to turn it over to you.
Wait, wait, can I stop you for a moment? Can I stop you for a moment? Are you talking about Twitter or are you talking about Twitter?
Charles Max Wood (01:03:10.298)
All right.
Charles Max Wood (01:03:14.598)
Ever. Never ever.
Wait, does Microsoft own Twitter?
Dan (01:03:25.762)
Exactly. So it got really personal really quickly. And anyway, I would love to have some of the people involved on our podcast if we can somehow swing it, because I think that there are a lot of good takes being made on a technical level. And it's really unfortunate.
Charles Max Wood (01:03:30.147)
Oh yeah.
Dan (01:03:52.678)
that it got so personal. Let's put it this way. I guess it's kind of unavoidable, at least on Twitter, but it's still unfortunate. So that in...
Charles Max Wood (01:04:04.221)
Yep. I invited David to come on the show, so we'll see if he bites.
Maya Shavin (01:04:08.626)
But I can't. Oh wait, I just, I just wanted to ask, is there any day, any week that we don't have a Twitter storm? It's like a quick list Twitter storm as far as I know.
Charles Max Wood (01:04:19.655)
Right?
Dan (01:04:20.99)
Yeah, what you know, it helps to relieve the boredom.
Maya Shavin (01:04:26.302)
Good, yes, stress release! Stress release!
Dan (01:04:30.226)
Yeah. Uh, anyway, so by the way, just as a quick note, I, I kind of, you know, because I could, I kind of shit tweeted, but it's only, it's kind of tongue in cheek, but it's also has some truth in it. The fact that I'm most productive when I use JavaScript instead of TypeScript, but everybody else uses TypeScript. So that way I get all the, all the proper types in my code, but I don't have to worry about it.
And it's kind of like, you know, with tests, I'm most productive when I don't have to write tests, but everybody else does and you know, and, and so forth. Anyway, so that's, that's my first pick. I don't know how to even. Yeah, exactly. Um, I don't, by the way, I'm no longer a COVID virgin. Uh, I got, uh, I, you know,
Charles Max Wood (01:05:11.733)
Is that like herd immunity?
Dan (01:05:23.206)
Probably, I probably had COVID before, but it's the first time that I actually tested positive about a few weeks ago. Happily for me, I had it very easy. So I was like, you know, I wasn't even coughing. I just had, and even hardly any fever. I was just tired for three days, which I guess makes me really lucky. But yeah. So that's...
Charles Max Wood (01:05:31.173)
Okay.
Dan (01:05:52.874)
Another thing that happened. It's not exactly a pick though. No, is it? Oh one thing that actually Yeah Unfortunately, it's not something that you can really pick you get what you get But and I know some you know, and there's no judgment here. I know some great people who've Suffered or suffered a lot from covered and are still even suffering from it from effects of long covered. So yeah
Charles Max Wood (01:05:58.169)
Easy COVID, that's your pick.
Maya Shavin (01:06:00.879)
Thanks. Yeah.
Dan (01:06:21.386)
So, and another interesting thing that I saw on Twitter is Maximilian, that's how Fertman, we've actually had him on the show as I recall. So he actually put out an interesting thing. He used some AI to have to translate one of the video into Portuguese. And the funny thing is he doesn't speak Portuguese.
Maya Shavin (01:06:47.042)
Wow!
Dan (01:06:50.01)
But in the video he does. It's kind of mind blowing. Yeah. I'll, I'll post a link to that.
Charles Max Wood (01:06:53.081)
Oh, interesting.
Maya Shavin (01:07:01.23)
What do you think? Wow
Dan (01:07:03.094)
Yeah, exactly. You press it's he's literally you lose it looks as if he's speaking Portuguese Now he says that it's still expensive So he just did a small clip So I guess it's something that you pay by the minute or something But he says that this will likely change a lot of things for teachers and content Creators and whatnot and I'm guessing that it will
Maya Shavin (01:07:31.162)
So, I'm going to go ahead and start the presentation.
Dan (01:07:32.366)
So that that's my second pick for today. I'll post the link for that um, and other than that The ongoing war in ukraine helped the people of ukraine and the ongoing struggle in israel for israel to remain a democracy So support us in that Uh, and for unfortunate from my perspective unfortunately probably not soon enough
Maya Shavin (01:07:51.48)
We probably have another election soon, huh?
Maya Shavin (01:08:02.966)
Well, poor in the comments though.
Dan (01:08:04.36)
But that's my own personal take and our listeners are free to have their own. And that's actually the thing that I'm fighting for, is for that freedom to have your own opinion. And yeah, so anyway, those would be my picks for today.
Charles Max Wood (01:08:07.001)
Oh, politics.
Maya Shavin (01:08:09.351)
Yeah.
Charles Max Wood (01:08:25.237)
All right, I'm gonna throw out my picks here real quick. I'm gonna go fast that way. Maya has time before I have to run away. I usually do a board game pick, but lately the thing I've been playing, I picked it before, is Risk Legacy. I've been playing it with my friends. I have a couple of really good friends. Funny enough, the three of us get together on Wednesday nights and so do our wives. And so, anyway.
Maya Shavin (01:08:29.678)
I'm going to go ahead and turn it over to you. So, I'm going to turn it over to you.
Dan (01:08:41.12)
Mmm.
Charles Max Wood (01:08:53.99)
Three of us at one house, three of us the other. So anyway, it's pretty fun. We've played two rounds now. I don't have to tell you who won. It was the smartest player both times.
Dan (01:09:06.362)
It's really difficult though to play risk all the way through now, isn't it? It takes a long time. It can take a long time.
Charles Max Wood (01:09:12.293)
It can take a long time. This is Risk Legacy. And so Risk itself, like the original game, you're usually trying to play for World Conquest and you can win a round of Risk Legacy that way, right? You eliminate all the other players. But effectively you have these bases and the bases are worth a star. And so you have to have control four stars in order to win.
Maya Shavin (01:09:28.071)
I think that's a great way to start. So I think we're going to have to be very careful in our way of doing this. And I think that's a great way to start. I think that's a great way to start. So I think that's a great way to start.
Charles Max Wood (01:09:40.165)
And so the round often gets over before anybody has world conquest. And since I had won the first round, I was at a disadvantage to win, but they dragged the game out long enough for me to actually, I was at disadvantage cause I didn't start with a star cause I had won a game and they did, both of them did. And so they had dragged the game out long enough for me to actually acquire a star and then take the other bases. And that's how I got four. So.
Dan (01:09:56.415)
Mmm.
Dan (01:10:05.642)
I remember playing a long time ago in the university when I was in university We would sometimes meet and play risk and but we were usually something like six people and did play for world domination And it will take hours
Charles Max Wood (01:10:18.413)
Yeah, it takes a long time. Yeah. Yeah, if you wanna... No, go ahead. Go ahead.
Maya Shavin (01:10:21.026)
Oh yeah, I didn't play Riz, but I... sorry, go ahead. No, I just say I didn't play... I think I played Riz Juan, but I played Catan more, and it also take very long time. Yeah.
Charles Max Wood (01:10:32.693)
Tan. That's a fun one too. Yeah, the risk that I really like, maybe I'll pick it. If you want a game that has a time element to it, it's the Lord of the Rings risk. And the time box element is that the ring moves towards Mount Doom. And so when the ring gets there, the game's over. And so...
Dan (01:10:45.691)
Mmm.
Maya Shavin (01:10:46.071)
Oh, nice.
Dan (01:10:53.553)
Hmm.
Dan (01:10:56.966)
So who has the most before the ring is destroyed or something like that?
Charles Max Wood (01:11:00.637)
Yeah, I don't remember exactly what the scoring was, but it was something like that. And there's a certain element of cooperation too, because I think certain things have to happen before the ring gets to Mountain Doom or nobody wins.
Dan (01:11:05.187)
And w-
Dan (01:11:12.511)
And why don't the eagles just take the ring and drop it directly into Mount Doom and be done with it?
Charles Max Wood (01:11:18.002)
RIGHT?
Maya Shavin (01:11:20.647)
Now you just found a way to put up a game.
Charles Max Wood (01:11:20.654)
Anyway...
Right? Anyway, so yeah, so a few other picks. So if you're watching the video, you can see that I actually have my green screen up. I've got some code behind me. It's showing it mirror image reversed on mine. I don't know if it's doing that on yours too. It's not backwards? Okay. So yeah, so I'm, yeah.
Dan (01:11:41.998)
No, it's no ours. No, it's not it's proper
Maya Shavin (01:11:46.078)
No. Yeah, I can read it.
Dan (01:11:50.082)
By the way, you have a bug on line 4.
Charles Max Wood (01:11:55.141)
I didn't write the code, it's clip art.
Maya Shavin (01:11:55.717)
Are you sure?
Dan (01:11:57.803)
No, I'm just joking. I have no idea what the code says, but I'm pretty sure there's a bug there somewhere. I mean, you know it's code, there has to be.
Charles Max Wood (01:11:59.396)
Yeah.
Maya Shavin (01:11:59.678)
Are you sure it's your live four and not live five? It's...
Charles Max Wood (01:12:02.61)
Yeah, but.
Charles Max Wood (01:12:07.073)
Oh, I'm sure it's code. The only code with no bugs is no code. So, yeah. So, yeah, I think it does. But yeah, so I've been pretty happy with the setup here. Right?
Maya Shavin (01:12:10.436)
It lied 212.
Dan (01:12:13.636)
It does look like jQuery or something.
Maya Shavin (01:12:22.448)
A jQuery.
Charles Max Wood (01:12:24.829)
So yeah, so I'm gonna pick the green screen. I'll put links to all the stuff that I've got in here. The real trick to a green screen is the lighting. And then I'm using the Blackmagic Design ATEM Mini. And so Jack Harrington actually mentioned it in one of our episodes. And so I went and got it cause I'm liking it. And it's done a really great job for me. Yeah, I do too. And then...
Dan (01:12:50.102)
I like Jack.
Charles Max Wood (01:12:54.769)
Yeah, getting into politics. I'm actually gonna be running for state legislature. We had a seat open up and so they're having a special election. It's within the party because we're replacing a Republican with Republican. So I'll be running and I have to.
Dan (01:13:00.964)
Wow.
Maya Shavin (01:13:01.383)
Wow.
Dan (01:13:13.729)
So, Congressman Chuck?
Charles Max Wood (01:13:16.377)
No, it's Utah State Senate.
Dan (01:13:21.362)
So, sen är det törr.
Charles Max Wood (01:13:22.897)
Yeah, so we'll see how that goes. I will know how that goes probably by the middle of November. So anyway, just kind of fun stuff. All right, Maya, do you have some picks?
Dan (01:13:25.01)
Cool.
Dan (01:13:31.4)
Good luck!
Maya Shavin (01:13:32.418)
Good luck!
Maya Shavin (01:13:37.258)
Yeah, I mean that took me by surprise, but anyway, I have one pig so Three weeks ago. We got hit by a pig. No, it's the normal thing in this world by the way Yeah, we got hit by a wild pig. It's huge pig It's a wild pig. I don't know it was called. It's like
Dan (01:13:52.675)
A bore.
Charles Max Wood (01:13:53.991)
Oh wow.
Dan (01:13:58.004)
It's wild pigs are called boars, right?
Charles Max Wood (01:14:01.426)
Uh, I think the males are. I don't remember how that all works.
Maya Shavin (01:14:01.786)
Probably... Anyway, so I got hit and it's only on the side of the car. I said so the side of the car. So my pig is my car, the Skoda. We have a Skoda... I forgot about that car. Korea, yeah. The Skoda Korea. It's like the heat was really...
Charles Max Wood (01:14:12.186)
Oh wow.
Maya Shavin (01:14:30.006)
strong but somehow nothing happened. Everyone is safe. The whole family is safe in the car. And the only thing is they bend a bit on the other side and the car continued moving all the way home. It took about I think it's from two, three kilometers from home. So it was pretty dark and it got the in the front the only thing got broken I think is the water and the light.
Charles Max Wood (01:14:47.593)
Oh wow.
Maya Shavin (01:14:56.834)
the sensor so it always thought that I'm trying to I'm trying to reverse something but other than that everything is safe and yeah I mean I cannot imagine how it would happen if the that the whole car would come crashing with all five of us were stuck in the middle nowhere in the north yes
Charles Max Wood (01:15:16.742)
Oh wow. Yeah.
Dan (01:15:18.638)
Yeah, you've got some interesting roads up there, like...
Maya Shavin (01:15:23.858)
Yeah, like you go in the middle of the road, you saw the whole, the whole line of the whole family. Yeah, you saw the whole family of pigs. Yeah, family of pigs.
Dan (01:15:24.318)
Yeah, living on a mountaintop in the Golan Heights. Yeah, some empty roads.
Charles Max Wood (01:15:32.777)
Yeah. The worst we get around here is the deer come down off the mountain. People run into them.
Dan (01:15:38.722)
It's like when we were touring in New Zealand, and not New Zealand, sorry, in Tasmania a while back, and I rented a car with roadside assistance, which means you can call them and they will come and fix your flat or something. But then I realized that as soon as you leave whatever town you're in, you immediately have no reception. And you drive for like...
Maya Shavin (01:15:52.043)
Mm-hmm.
Charles Max Wood (01:16:00.219)
Ha! Oh wow.
Maya Shavin (01:16:01.851)
Oh my god!
Dan (01:16:04.498)
two hours with zero reception. So yeah, it's great that I have roadside assistance. So I think you do have like cell coverage in all places there, right? Wow, you've got, I only got five.
Maya Shavin (01:16:10.057)
Hmm.
Maya Shavin (01:16:13.726)
Yeah, we have we have fiber, you know fiber. Yeah.
Charles Max Wood (01:16:17.845)
They're putting fiber in here.
Maya Shavin (01:16:20.694)
I have fiber and it does work sometimes, it doesn't work sometimes but it's... I mean, so I cannot pick it because it's still like sometimes it works, sometimes it doesn't.
Charles Max Wood (01:16:23.505)
I'm jealous.
Dan (01:16:29.446)
Well, I live in Tel Aviv and I only got fiber like about a month ago. So, you know, two months ago.
Maya Shavin (01:16:34.846)
Oh, I got five for like a year ago. I got ya. I got it.
Dan (01:16:39.158)
Yeah, so yeah.
Charles Max Wood (01:16:39.689)
All right, well, I need to wrap this up. Thanks for coming, Maya. This was a lot of fun.
Dan (01:16:44.983)
Yeah, for sure.
Maya Shavin (01:16:45.439)
Yeah, me too.
Charles Max Wood (01:16:47.345)
All right, folks, we're gonna wrap it here. Till next time, Max out.
Dan (01:16:51.502)
Bye!
Maya Shavin (01:16:52.366)
Bye!