How would you like to listen to dot net rocks with no ads? Easy? Become a patron For just five dollars a month. You get access to a private RSS feed where all the shows have no ads. Twenty dollars a month will get you that and a special dot net rocks patron mug. Sign up now at Patreon dot dot net rocks dot com. Hey guess what, it's dot in rocks. This is Carl Franklin and this is Richard Campbell and we're back from Sweden. Yeah. That was good. It was really good,
especially the Italian place. We had dinner on the last night. Italian places Sweden, but it's very nice. There's lots of great ethnic restaurants all over Sweden. Oh yeah, Stockholm is where we were. Yea, yeah, somebody ordered a bottle, AMARNI who was that? And your night is not going to get worse because you have a bottle about a room, which I know it's amazing, amazing stuff. All right. Well, anyway, we had a good time. We're back and Amy is here and we'll be
talking to her in just a minute. But first we had this little matter of better no framework awesome, all right, man, what do you got all right. So this is a blog post from a very prolific blogger about Blazer, Gerald Daret, and it's using dot Net code from JavaScript using web assembly. Now, okay, it sounds like it's no big deal, but here's here's the opening paragraph. Blazer web assembly allows you to run a dot
Net web application in a browser. Right starting with dot Net seven, you can easily run any dot Net method from JavaScript without needing the whole Blazer framework. This is interesting. Let's see how to run a dot Net method from JavaScript. So he tells you how to install the workload, create a new console lapp, and then he adds the properties in the project file, shows you how to call it, create a c sharp class, and then invoke
it from JavaScript. And he's literally giving instructions like you're doing a notepad or at least vs code, but no dependency on studio or anything like no studio. Yeah, yeah, it's pretty awesome. And so when you compile it, it turns into eight hundred and nineteen kilobytes. Okay, I mean it's not minuscule, but it's small. You've got images bigger than that on your
web I do. Yeah, yeah, and I think you know it's like what two and a half megabytes for the whole Blazer library to come down, but which feels way bigger than eight hundred k. Yeah, because it is, because it is so there you go and it's fun. And this guy Gerald has lots and lots of good blog posts and I've referenced them and Blazer trained before. Just a very smart guy. Maybe we should get him on here. Yeah, we could probably arrange that. Yeah, that's what I
got. What do you got? I grabbed a comment off of show eighteen fifteen, which we did back in October last year, when I think we were in person. Was that at the NDC Oslo conference. I think it was y O'Brien about Playwright the testing web apps, because yeah, we're going to talk about web apps today, so I thought you talked about testing WebOps too, And Dave Parvin says, I have not used Playwright yet, but I have done the older UI testing and it was painful. Just getting into
consistently find controls was a pain. I'm glad to hear that Playwright might be doing the job better. I don't know when I'll be using Playwright with my current projects, because I'm working on desktop applications. Written in C plus plus the C sharp, and I can say that I have a lot of unit tests that are fairly good, and with the help of Verify, they're getting
better. Simon Kropp Yeah, yeah, the project I'm working on is a huge project, and unit tests were not getting made until halfway through the project. Stop me if you've heard this one right, Yeah, sounds very familiar. At this point, we have over thirty three thousand tests. Good lord, and it is amazing how often we make a change and a unit test fails because of it. Finding that problem that is in the code we change is so much more helpful than waiting for a customer to find that problem.
It is more fun when we find the failure was in the code that we did not change, what was depending on code we did change, and with the change we made, it broke. The other thing, A certain quote from Billy Hollis is coming to mind right now. I don't know if you
know what I'm talking about. I could probably guess. It is amazing how many times the unit tests have pointed to problems that we did not know we had, right, because you gotta imagine this as an old codebase that Yeah, so he does understand all of these side effect right you're going on, and sometimes it pointed out errors in our assumptions about how a piece of code would be used. And that's good testing, man, Like, that's how you own a code base when you've got to take it over and really get
get comfortable with it. Is picking up on all of those things. Testing helps you with that, you know. I can I don't know if this has ever happened on any teams that you manage, Richard, but I haven't seen it, but I can envision, you know, when somebody comes in and says, we got to tear all this out and refactor all this and everything's going to change, and the testers go, you can't do that to
me. I've got on this beautiful tests. What are you doing? But you know, well, I know we talked about this on the show back in the day, which admittedly is the better part of ten years ago now, but it's when every time with Strange Loop, at least twice when we did a major update, it trashed the tests and it's literally easier to start
over, and we did each time. But and it wasn't until like the third iteration that we finally knew how to write tests that would be more resilient for subsequent revisions, Like it took a while to really write resilient testing for the system as a whole. It's not trivial to do so, Dave, thank you so much for your comment. A copy of music Cobi is on its way to you. And if you'd like a copy of music copy, write a comment on the website at dot net rocks dot com or on the
facebooks. If you publish every show there, and if you comment there and I read on the show, we'll send you a copy music copy. And you should definitely follow us on Mastodon. I'm at Carl Franklin at tech up dot social, and I'm Rich Campbell at mastodon dot social. Send us a two ruy too too. No matter how funny it is. We love Toots, it's a good I love Macedon. It's cool. There's a lot of cool people there. Yeah, it's it's got it's got that small community feel
still in it. It really does. Yeah, and it's not polluted by advertising, which I like. Yeah. I mean, I still worry about
its sustainability, but that's always a concern. Well, at least it's not centralized, you know, no, And I saw a great conversation on it the other day where a major Masterton server with fifteen thousand users was shutting down, like for whatever reason that the guy had to get out or it was just you know, he had stut it inappropriately, and it was trivial for those fifteen thousand users to migrate to to they spread out to a bunch of
different servers and all their history stuff was capped. And so one person was saying, this is why massadon will never succeeded. Other guys saying, this is exactly why Mastadon will succeed. It's like raid for messaging. Yeah, it was very interesting. Yeah, it's cool. All right, let's let's bring Amy on. Amy Kaepernick wears many hats as a business owner, senior
engineer, mentor, and conference addict. She regularly shares her knowledge with her peers and the next generation of developers by mentoring, speaking at, and organizing events, as well as mentoring up and coming developers within her business. She's been recognized as a Twilio Champion and a Microsoft MVP since twenty nineteen and knows how to write a bio with years and dates instead of this many years that many years. Welcome Amy, welcome back. Thanks thanks for having me.
Yeah, every time I hear my bio read out as an introduction, that always always makes me go, wow, well I actually sound like I know what I'm talking about. You've done some stuff. I've done some stuff. Yeah, certainly have Yeah, yeah, yeah, no question and obviously been busy. We saw each other at NDC London, Yes, which was good fun. Yes, I'm hoping this year will be a little bit less busy than last year. Last year just got very busy, very quickly. Yeah.
I had this intend to say everything yes to everything last year and did a lot of things, and this year I wouldn't say yes quite as often, and I am failing. Last year My intent was to just ease back into things a little bit, just just a practice run. And yeah it was there was. There's not much of an ease. It was about as easy as an exponential curve can get, not ease, not ease. Yeah,
all right. Yeah. You did a talk and I certain and I paid close attention to it about this sort of the modern web front end development because we've gone through a lot of different ways to build web pages over the year. I would argue that just a few years ago, modern front end development meant angular and SPA. I think it still means SPA. Yeah, yeah, it definitely does in a lot of circles. There's a lot of conversations about it. But yeah, it's because we know this tech changes so
quickly. But often when people are talking about what the modern front end is, as you've already identified, they're talking what freeworks were using, and they're talking it's often what shiny flavor of JavaScript are we're using today, which we all know changes. I mean, I'm pretty sure there's been two new frameworks already so far in this recording. I mean, I did feel like it's like it cooled off, like it's been Angular, view and React for a
while. Yeah, so there's there's still but I think there's less. There's there's less coming, but there's more coming within those sections. So like, for example, in the React world, the shiny new thing is remix, I think unless I've missed the one that's come after that. So there's still a lot of new things coming out, but the problem is people are they're
struggling to keep up with that. And so what my talk and the workshop I run on the same topic is we're actually looking at the fundamentals behind it. So, yeah, okay, what you're using React, using Angular, what flavor itever you're using. But underneath, it's still HTML that you're actually writing it. You've still got HTML as the structure. Whether you write it as j SAX or start at HTML, it's still going to appear as HTML
on a web page. And so making sure that we're spending the time with those fundamentals because although they haven't changed quite as quickly, there's still a lot of things changing that some people don't realize. There's browsers are still bringing out new HTML elements and new features to the browser. So keeping up to date with those things because the way we can do things now is just so much
easier. So it's part of a Yeah, it's part of my talk and as part of my workshop we actually go through it's like, okay, well, what are all the things that you would like to do, Like if you want to have a date picker on your website, how do you do that? And everyone always goes, well, we use a library has one, or we find a package jaw My favorite, which is the answer I'm looking for, which is we use a JavaScript package, which that's then different
depending on what you're doing. But there's actually a native HTML date picker. Yeah it's pretty good too. Yeah, it's it's pretty good. There's a little bit of validation that you can do as well, and it works across multiple devices, so if people are on their phones, it will pin up a mobile friendly date picker compared to if they're on a desktop. Now, if we can just get select to work on a phone, that would be great, but select select works, but yeah, it's it's not spectacular.
However, there is also a not quite an autocomplete, but there is another feature. There's another element called a data list, which gives you some features of an autocomplete, so that people can type in and it will select from pre filled options. It reminds me of a Windows cambo box, which is in the day, Yeah, back in the day. It's sort of a dropdown, but it's also a tax box, so you can start typing and
then then listeners. Yeah. Yeah, And so for a lot of that, for a lot of what people are doing that that serves the requirements and it means we've got a whole lot less dependencies. So that's what my current passion in trying to trying to get the message out about those those fundamentals and reminding people that there are other things that are still changing, and looking up and just working out what they don't know and keeping an eye on what's actually
still happening in that area. I'm grabbing some links like to the Native Dick Bicker and so forth, and I'm going to W three schools by reflex just because I find them. Love W three schools. Yeah, they're old school, it's kind of relatable, it's tough, totally up to date. And just realizing it's active server pages, I mean it's it's not even APAX, it's ASP. Wow, that's cool. This a moment I have this sort
of thought like the Cobbler's children have no shoes. Yeah, but it works, it does right, And and I bring up that point to say exactly that it's like, hey, I've got the teleric Uh set of HTML five controls right that the Kendle controls, and it's got a pretty good date picker in it. It's got a selector in it, like what's my incentive to change? Because it depends. So you've had access to that. But if
people if people are using plane react that doesn't come with it. They've got to they've got to have something in there, So that's when people are often reaching for a library or another third party package. The advantage of the net eative controls as well is there are a lot more accessible so browsers don't just
chuck this in there. There has been a lot of consultation that's happened with a lot of very smart people, and so accessibility has had a lot of thought already gone into it, whereas when you grab third party package it may not have had that thought go into it. So when you bring in a native HTML control, people can use it using their keyboards. People can't using screen readers know what's going on. There's a whole lot more of that that's
just built in natively. So when people are used to putting a whole lot of ARIA labels and roles and things on there for screen readers to announce, it's just that you don't have to. It just happens. Yeah, that's a good point, but it's it reduces the barrier to entry, right, I mean, you don't have to be you know, I downloaded the repair and climb the RepA, but oh I need this license for this tool and that tool and this tool on that tool. Now I got to go buy
developer licenses for those things. Oh, your license needs to be renewed, etc. Yeah. I'm just an accessibility perspective that maybe that control supports accessibility, maybe it doesn't. Maybe it supports multi lingual, maybe it doesn't. But anything that's needed to the browser almost certainly does. Yeah. And usually it's the controls or the properties and the you know, the interfaces are so fundamental that you can modify them with standard HTMLCSS, CHIVASCRIPT without too much fanfare.
Yeah, so all of that stuff just makes it so much easier. Part of my fundamentals is we then spend time going back to the CSS fundamentals, so not doing all of the bright and shiny things, but just the
overall layouts and stuff. So doing a lot of CSS, which I know we talked about last time I was on the show, so I'm not gonna I'm not going to go through that again, but looking at all of the other changes that we've had to see assess that actually make things so much easier to build out overall layouts these days, Like even things we've got aspect ratio is coming out to browsers. So that that means that we can actually if we want a picture to be square, we can just how the browser that
look this picture should be this wide and it should be square. So those kinds of things. Hey, that's a good idea that twenty years ago. Yeah, so a lot of this stuff for anybody. I get a lot of people in my workshop when I run them that they they they have been working on the web for much longer than I have, and so the last time they looked at HTML and CSS, it was so hard to do all of these things. Yeah, so that's why they reached all the third party
stuff. That's why people are using things like bootstrap and tailwind because they go, well, I tried to do it in CSS and I couldn't get it to work. But the fact that it's changed, and so reminding them or just letting them know that it's changed and these are all the new things, it means they're able to go back. The fundamentals are something that I'm very passionate about in pretty much all areas. If people go, I'm a complete beginner, do I want to learn React? I go, well, you
want to learn JavaScript first and then learn React? Because the fundamentals are the backbones of everything that we build. So if you've got good fundamentals, it makes it so much easier when you move up, and it means we're building much higher quality applications. But aren't the latest versions of Tailwind and Bootstrap also implementing the leaders features of CSS. They are, but it comes down to
reducing dependencies and keeping things nice and light. So my goal with teaching more people the fundamentals is not to make everyone front end developers and to not do
front end developers out of the job. So I've worked with quite a few teams where they have one or two front end developers, but there's so much stuff that they've got to do. So the rest of the developers they're able to go through and do stuff with CSS, and so without having to introduce another dependency like Bootstrap or Tailwind. They can have the layout, they can get things kind of sitting on the page where they need to be, so
that then when the front end developers come in, they don't have to go through and clean everything up that structure that's already in there, the foundations of what they're building that's good to go, so they can go through and do their stuff on top and just make it looking that much nice so they can add the wow on top of it without having to go through and redo those
fundamentals. Yeah, so you're less likely to make a mess with the new versions of CSS, even though, and allow those front end specialists then to just amp things up a bit. Yeah, so I'm not saying it less likely to make a mess. There's still likely messes, but there's just a lot less to go through. So I've worked in projects where the structure has been built out in something else, and I've then got to go through and clean up a whole bunch of classes. And because everything's using that often the
hmail elements haven't been thought out. So I'm going through and replacing a whole bunch of divs with something better. And so there's done a whole lot of cleanup work that I have to do before I can get started. So whereas yeah, going with just the foundations, there's a lot less cleanup that has to happen. So one of the things that's always bugged me about JavaScript in CSS is the global nature of objects, classes, functions, whatever, variables.
And um, I know Blazer has got scoping right, so you've got scope CSS in Blazer that's sort of built right into the framework. If I have a component named you know whenever my grid dot razor, I can have a file called my grid dot razor dot css, and all the CSS classes and there only apply to that, and they do some magic behind the scenes to rename things by prepending the names of the classes with you know, my my grid whenever. Um do other frameworks and even the fundamental CSS and JavaScript
is it Is this happening in other places besides Blazer? Yes, absolutely so. The CSS and JavaScript has had scoping for as long as I've been aware of it. That was one of the big that was one of the big selling factors was hey, this is scoped, which means if you change this thing in this massive application that you've got hundreds of developers working on, you're not likely it's not likely to bleed out elsewhere. However, there are plenty
of other things. So my go to is typically CSS modules, which still integrates nicely with JavaScript applications, and it sounds a little bit like how a Blazer does it in that you can create so I have for each component, I have a component in whatever it is that I'm using, and then I have typically our styles dot module, dot CSS file and that will then go through and yeah and magic the classes so that everything is scoped to that component.
So for me, that's what I've found works really well because the scoping is fantastic. When you're working with a lot of other developers, or if you're working if you're working on design libraries, you don't know where these things
are going to be pulled in, scoping makes things a lot easier. I've even been doing a whole lot of work the project I've worked on last year WordPress website, I've got CSS modules and scoping working in that, and this was a yeah, like this is fairly easy to be able to integrate in
a whole lot of different places. It feels a lot more natural. So some of the CSS in JS libraries that I came across, the problem is they've tried to reimplement CSS, and so there's a whole lot of things that you can't do or don't work the way they do in CSS, whereas CSS modules is just doing the scoping with CSS, so it's just doing that magic
with the class names. So that works really well. It also works really well with things like post CSS, which is really good or I do a fair bit of work with SCSS or sas because they do a whole lot of magic behind the scenes that makes my job easier. And so that integrates really nicely with that too. Amy you a fan of type script. I actually only learned type scripts last year. A whole lot of JavaScript developers I know were very happy when I finally had to turn around and learn type script.
Well, what do you think. I definitely see the advantage of it. So again, similar to scoping in CSS, when you're working with a whole lot of developers and you're working on really big code basis, it definitely makes things easier. And they have absolutely been times when I've been working in code bases and I need to I need to pass a value into a component, but I can't remember exactly what the name of the property is. But rather than me having to go and look at up, my computer's gone up you
want to it's property X that you're trying to define. Yeah, So that there's definitely make things easier. So for those kinds of codebases and for part of my work, that's definitely made things much easier. Which this is a whole lot of people are going to be so excited about me saying. But for a lot of my work as well, I build websites for small to medium businesses, so I'm I'm dealing in the word press side of things, and there's not going to be too many developments. You Look, that's a
whole other discussion that we can have, which I won't have. But that's another talk that I have. That's actually a brand new talk that I'm going to be giving word Press. Yes, and there's a reason why they love it, um so, but it's the largest web platform in the world. Yeah, yes, but for yeah, so for a lot of what I do, type script either isn't really I'm I'm sure I could add type script to WordPress. I'm not going to go down that rabbit hole. That is
not something I want to work out how to do. Yeah, but for a lot of my stuff when I'm building small static websites, so they they don't they're not going to change. So building in type script is often just adding another dependency that I don't need. I liked where you think. Yeah, and when building from scratch, it does often make things a little bit
harder because from the start I don't necessarily know everything. I don't know what type everything's going to be, I don't know what properties everything is going to be. So when when I'm building from scratch on things, that does make things a little bit harder. So I use it in half of my work, but not so much in the other half. At least you don't have
that one right way scenario, like different solutions for different problems. Yeah, yeah, So I've I've worked with companies that do a one size fits all solution, and in my experience, that never works. Like if you're trying to please everybody, you're going to end up pleasing nobody. So instead, I'm regularly I put a tweeter out the other day. So in the past couple of weeks, I've worked on remix project, a view project, a
word press project, and an asteroid project. I'm regularly working across a whole lot of different things. And because not everything everything fits, the different situations different right, right, But do you see some common metaphors, like you know your multi lingual so you know what's the same between all those different stacks, Well, between all those different stacks. For me, it was getting into the component mindset, and so particularly the React and few space components is
how everything was built out. And that mindset was actually really great to bring across to WordPress because WordPress it's really easy to have parts of things and pull it in PHP. So I actually found that that got a lot easier and my code got a lot cleaner when I started working in those components to be able to pull that stuff in fast up. Interesting. One thing that I'm starting to see coming across which I which I'm now wishing we had in React,
was slots. So View and Astro and Felt and a few others they've got slots. So rather than everything just going into this one spot on the page, you can go, well, everything goes into this one spot. But I'm probably explaining slots really badly, but you can go, okay, well, this is also the stuff that goes in the head out and this is the stuff that goes in the foot up. So that has just been
really useful for a whole lot of times. And yeah, it's it's a it's an extension of a component model that just yeah, everything goes in the right place. I like that. Yeah, And so I had a bit of a look and I think there are a couple of people going, oh, actually, we'd like to see this and react somehow interesting. Yeah, because fundamentally it is a web component thing, which is relatively agnostic, right, like that web components is not nothing to do with any particular browser or
any particular platform. Yeah. But there's a whole lot of stuff that I'm not delving deep into. So I spend a lot of time working on the front end. I'm sure some of the backend developers that I work with would find a whole lot of other similarities and differences, and they'd find a whole lot of other stuff that they really love about working in each particular flavor of whatever we're using. Sure, and I'm we interrupt for one moment for this
very important message. Hey, Carlin Richard Here. As you may have heard, NDC is back offering their incredible in person conferences around the world, and we'd like to tell you about them. NDC Osle will be me twenty first through the twenty fifth. Go to NDC Oslo dot com to register. NDC Copenhagen is happening August twenty seventh through the thirty first. Go to NDC Copenhagen dot com for more information. NDC Porto is happening October sixteenth through the twentieth.
The early bird discount for ADC Porto ends July twenty First go to dcporto dot com to register and check out the full lineup of conferences at NDC Conferences dot com. And we're back. It's Don Rocks, Richard Campbell. That's Carl Franklin Hey talking to her friend Amy Kaepernick way over in Perth, other side of the world. Time is literally lunchtime. W So she's looking at me drinking wine for breakfast? What's wrong with me? That is no that
I was actually just admiring. This is the global world that we live in. Although I've actually I've stopped clarifying. I'm the Perth in Western Australia, not the Perth in Tasmania, not the Perth in Canada, and not the Perth in Scotland, the Perth Perth, the big one, the way out west Perth. Yeah we are, I mean we are the Perth Perth. But I just keep discovering more of them, like to just clarify, right, especially when I'm in the UK where they do know about the Scotland Path.
So there was an old time comedian in World War Two time, Bob Hope he probably know I've heard of him, but he always used to do GI tours and stuff, and he would say, this is Bob here in city and then some joke that rhymes with the city Hope. So I remember him. I'm saying, this is Bob here in Perth to bring you mirth, Hope. It's not really funny, but it reminded me of Bob. Yeah, I'm old ye. So anyway, Yeah, you'd probably run out
of rhymes for things at some point, right. Yeah. I love the way Ossie's they'll have put the you know, everything ends with E. Let's have Breckie. You know what's that breakfast? Oh breakfast? Yeah, brecky, Yeah that is breakfast. However, that is a whole discussion. Um,
some summer ends in I E and summer ends. Yeah, it's double k y hey, which I only discovered because I've always spelt it double k y and I discovered that my sister actually spells it double k I E. So I'm not entirely sure how we've come up with different spellings despite growing up in the same Households overlap into the tech world. Do you say I'm going to get on a ZOOMI No, but none of this explains how they call McDonald's mackers, Like where did that? Oh, yeah, yeah, I
heard that. It's because we like to shorten everything, so we don't have time to say McDonald's, it's macas, or actually it's come out to be Mackie D's. Now macas was too long. I think there may be a Scottish thing the right, remember uneps and daddies. Yeah, in Scotland, turnips and potatoes, nips and daddies. All of the sling is good fun. Yeah, let's let's dive back into the topic. I did mention play right at the top of the show. How are you approaching web testing?
So I spend a lot of time focusing on testing from a front end in case people haven't already worked out that. I always bring things back to the front end. Not that testing the back end isn't important, but there's a whole lot of people very passionate and talking a lot about that, so I like to make sure that the front end gets talk a little bit about as well. So probably, seeing as you've mentioned Playwright, I do use I
have been switching over to using Playwright. I was previously using Cyprus, but I switched to using Playwright. Actually, after speaking with Debbie in Oslo last year. She has been a great evangelist for it. Yes, well she told me it would be easier and she did not like that was that was basically the only the only I think. I think the reason why she's a good evangelist is because it's it's a really easy sell. You just say it's easier to use and we go, yeah, okay, I'm on board.
So that is what I've been using. So I use Playwright for UI testing, so checking does the menu exist? Can you click on things? Can you go here? Do these things? Are these things on the page and visible where I expect them to be? Can this form be filled out? Can I do this? So making sure that people can still use the interface
the way that the way that you expect them too. They're expecting to Yeah, and how I mean always the question is all testing has this problem, but I found web testing has it worse that any change to a site break a lot of tests. Yeah, so UINE testing is fairly relaxed. We're not actually caring too much about where things are. It's just that they are visible on the page and that they can be interacted with, so that look,
if you're breaking that, then you've probably broken something. So those kinds of things are a bit more relaxed. Some of the other testing I do, though, is visual regression testing, which is kind of it's kind of like a GIT dip, but for visual So they take a screenshot of what it looks like and then you make a code change, and they take a screenshot and they compare pixel for pixel, and that one is a lot more likely to fail tests whenever you make a code change, because there's because they're
comparing pixel for pixel. There's so many things like sometimes an image might not have loaded in as well, if content has changed, it will fail. There's so many other things, and so that one is a lot fussier about what has actually happened then then UINE testing. So they both serve different purposes. So when I teach it, I sort of go, we've got visual regression testing. And for a lot of big companies, this is what they're
doing because they need to know that everything is pixel perfect. They need to know that everything still sits where where it should do. Whereas then UIN testing suits a lot more people. They go, I don't actually really need to know that the header is still exactly fifty five pixels high. I just need to know that it's there and people can click on the stuff in it great, that it's changed or changed or not. Yeah, you know there's two
things that come to mind. Weren't because I've used to verify a bit Snapchat testing Simon Crab's great tool Verify. Yeah. The thing that I quickly earned is, you know, it's not the end of the world when the test breaks. It's just another it's just another way to develop. It's reactive rather
than proactive. And developers don't like reacting because the reactions that things we react to are exceptions, you know, bugs, and so the natural predilection is for us to think, oh that that test broke, Oh I did something wrong, or something's wrong right, But it's just another way to develop. You just change the test, you figure out what you need to exclude, and you're done and you just move on. Yeah, and so I for
doing things like visual regression testing that those tests. Those tests fail a lot because you go through and you make a change to the CSS and it fails, and it will fail, and you go through and have a look and you go, yes, this is what I expected. I change that I know it should look that way sorry, so that one is definitely getting used
to doing that. But I've also found that the visual regression testing is really great for times when i'd be doing code cleanups and just going through and refactoring things. I am able to be so much more ruthless in going through and clearing a whole lot of things up because then I run the visual regression tests regularly, and if it fails, if it tells me that something has changed,
then I know that I've deleted code that I was actually using. That's really useful for being able to go through and do that, but at the minimum, these failed tests are telling you where to look to see that these changes that have been made were intended right. Yes, and for a lot of these, so like for visual regression tests, if you're integrating this with your codebase, you've probably got tens, if not hundreds of screenshots being taken,
so you're not having to go through and tech everywhere. We look. We took two hundred screenshots and we compared them, and these three are ones that have changed, So that definitely makes it much easier. On top of UI testing and visual regression testing, my other thing that I focus on which I talk about my talks and my workshop is accessibility testing. Yeah. Yes, this is one of the other things that I'm very passionate about and just
going through and making sure that we're testing things. And the thing is a lot of we talk a bit about manual and automated accessibility testing, and a lot of it does have to be done manually, and there is a fair bite of accessibility testing where if you're doing it properly, we still recommend hiring
somebody who knows what they're doing. Like screen reader testing, we can go through and play around with screen readers, and I think it's really important for developers to play around with screen readers and to actually understand what people are hearing when they're navigating through an application. But if you've ever seen somebody using a screen reader who uses it every day, they use it very differently to how
we use it occasionally, so it's really important to do that properly. However, a lot of people take that with well, I can't do it properly, therefore I'm not going to do it at all, which is not the case. Every little thing that they do makes a huge difference, and so like running automated tests. There's only so much that they can catch, but a lot of that is literally just linting and validating the college, making sure that you've actually done things, and so that makes a huge difference, and
then going through and manually testing things, going through and using it. Can you use it with a keyboard? How does it sound with a screen reader? That kind of thing. That kind of thing is actually really useful for us as developers to understand a little bit more about how people are using what
it is that we build. We know how we use it. A lot of us are likely using a mouse the keyboard to navigate through things, but it just helps to understand how people are actually navigating around things and what the effects of how we're building on other people. Because there's also there's Microsoft has a really great graphic where they go through and talk about the various different types
of people that are affected by whether or not our stuff is accessible. Because we often think of permanent impairments, so somebody who's missing a limb, somebody who's blind, somebody who's death, but there are permanent, temporary, and situational impairments. So if you ever tried to join a zoom call or listen to a video and you're in a really loud place and you can't hear what's
going on. That's a situational hearing impairment. Parent who's holding a child, they only have access to one hand, which is a situational motion impairment. Yeah. So there's a whole lot of other people that are affected, and it's often not until we become one of those people, whether permanent, temporary, or situational impairment, that we realized how much we benefit from it.
So I had a friend who had a really bad ear infection and she couldn't hear anything out of one ear for a week or so, and so having captions on things made a huge difference. Yeah. Yeah, and just no substitute for once in a while using captions or using any of those things that seeing how well they work and don't work. Yeah. We did a show last year it was Courtney Hitman and specifically got into screen readers extensively with her
and a found out several different flavors. You know, it depends on the hardware, and there's only there's sort of a standard set of things you can do, and it's it's in the W three. The W three standards show pretty clearly this is the reliable part of it, and there are good testing tools will just tell you this will work with a screen reader, this won't.
Yeah, And there's a lot of great tables that people are putting together now which go through various different various different approaches to building things or various different
pat CML tags. They compare them to all the screen readers and will then do a transcript of what so if you don't have access to because I can test on a couple of different screen readers, but then there's a bunch of Mac ones that I can't test on right, and testing on mobile, and so being able to get these tables where you can actually see okay, this is how it gets read out in every different screen reader is really useful. You know, I noticed a mass done that at least the client that I'm
using it on the web client too. When you post an image, a little thing pumps over the image that says, describe this image for people who can't see it. And even though that you might describe what's going on in the picture a little bit in your text, oftentimes I find that, no, it's not descriptive enough. You have to be pretty explicit about it. But that got me thinking about some of the AI tools and tools that exist out there that can read images in real time and sort of explain them.
And I wonder if screen readers are that sophisticated these days, so that you know, when you're browsing a site and it comes across a picture, it could explain in English what is in that picture. I'm not an expert on this point, so I would I don't think it can. However, I could be wrong. A lot of it comes down to though, because there's been a lot of times that I've gone I'd be really great if I could just auto generate a text alternative for this image so that I don't have to
go through and write it. But a lot of the time what those technologies are missing is it's not actually what's in the picture? What is the intent behind why I've added this picture? And a lot of blog posts talk about describing also the emotion behind the picture. Now they're probably different, like if you if you've included a graphic of like a chart or something, there's probably not too much emotion behind a profit and lost chart from the last twelve months.
I mean, well, actually there might be, but actually the intent and why it's there. So it's not just what's in the picture, it's what's in the picture that you've put it in there for. And so I think until until we've got ais that are able to understand why we've put it there and to interpret the emotion behind the image as well, which I think
we all know what happens when computers learn emotion. Were that much closer to the robot uprising, the automated tools definitely help, but for now, nothing yet, nothing can really beat actually sitting down and doing abruptly. And so it's one of the things that I do in my workshop is getting people to go through and write alternative text for images and what's the intent behind it? Describe this, how would you describe this image to somebody over the phone,
and so actually sitting down and going through and writing writing that description. What is it that they're seeing? And a lot of it comes down to as well. There's been a lot of people that have said that, you know, they come across images where there's no text because people go, well,
they're decorative. And I've had to chat with a few people and they've said that they'd actually like to know, like if people have logos and headers, a lot of people will not add alt text if they just all they just say this is the logo for X company. They actually want to know what this is. People have spent a whole lot of time. Yeah, people have spent time building their logos and how it reflects their company. They actually want to know what it looks like and and describe it to somebody. So
it really does make it. And I'm a little bit but I don't always do this myself. I'm trying to get better, but I do often have things flagging at me because I haven't given a text alternative. But yeah, it's it really does make a difference to go through and actually describe because if an image, if you don't bother to describe an image for someone who can't
see it, then image probably shouldn't be there in the first place. Yeah, it's an interesting point, right that this is all part and parcel of making a real usable website is recognizing data image may not helping anyone. Yeah, it's an interesting add to all of that that diversity gives a sort of better spectrum for building something something effective. Yeah, what else do we need to think about for the modern front end. We've talked about testing, we've
talked about accessibility, we've talked about keeping code as simple as possible. So probably the last thing, which is mainly tying the testing altogether and automating it, because as we've established, if something isn't automated, there's a decent chance that we're not going to do it. So going through and running automated testing pipelines, which a lot of people already have in the application, and he briefly talked about unit testing at the start of the episode, and a lot
of them are automated in the ci CD tools. You've got GitHub actions or as a debops or all of the other flavors of things. Are going through and running unit testing. But I've worked on projects where the only way that I could check I submit a PR for some front end changes, and the only way that I can actually see what that looks like is to verge it into the main branch and see how that builds out on the front end.
So we basically have to go, yes, I'm sure this code is good, let's merge it in and then just hope that I haven't broken anything when it comes through. Yeah, a lot of it involves actually adding in that automated testing pipeline as well, which a lot of the problem behind that is you need a live URL that you can run these tests on, so you actually need to have a deployed version near the website that you can go through
and run these tests on. So part of when I teach this is going through and setting up a automated testing pipeline for front end tests with a live version of the website on Gutharb action. So we go through, we run when you submit a PR, it triggers to build what that would look like, and you can get a staging RL, and then going through and running those tests against that staging r and setting it all up so that only if
those tests pass are you allowed to merge the changes in. So the same as a lot of pipelines are already doing for their unit testing, but actually making sure that we're going through and running that and that staging r L is often the sticker for a lot of projects is if people's depending on where people are hosting it and how it's set up, whether or not they're able to build a staging version of it. Which there's a lot of products I use
Netlifi, which is really amazing. They do what's called a deploy preview, and so yeah, I can get a unique I think I can pretty much get a unique UIL for every single commit I have on my website. Every single code commit has its own version of this is exactly how the website looked at that right time, and so making sure that we're actually setting that up
so that people can test things properly before the codes getting merged down. Yeah, I mean, isn't this something that's just built into Azure two with the different slots for app service and things. Do you need a separate tool to really do this? Well, not necessarily so Yeah, it's definitely the features definitely there in a whole lot of places. It's just whether people have actually set that up and so learning to use it. Yeah, people are learning
to use it and setting it up. They're just often not thinking about that. People are just used to running things locally on their computer or their focus. And again a lot of this comes back to people are thinking about the back end tests, but not so much the front end test, so they haven't sort of had a thought about doing that. So it's it's just about having a look at how things can be done and getting through and setting them up. And there are a lot of There are a lot of different features
where you can go through. No as your static web apps has got some really great setting up different versions. There's an AWS forget the name of it now. AWS has a really great app hosting product that does a lot of this as well. There's a lot of great options out there. I just learned that you can deploy a static website in an AWS bucket and get an HTTPS linked to it and serve it right out of the bucket, which is probably the cheapest way to serve outside on the planet. I would about that
with. You can do that on netlify and it's free. Okay, so yeah, you can't get much unless you can find something cheaper than Yeah, unless you can find someone that will pay you for then to host your website. Sure for testing purposes. Yeah, okay, that's something. Yeah, but I mean you make the point, right, Look, spend a little time, look at a few of these tools and create you create this equivalent to production environment. It's not production, so production is still running while you're
really exercising the update to the site. Yeah, and like it may not even be looking at these tools, just looking at the tool you've got, and is there a way that you can do things like you've probably currently got Um, I know I've I've worked with teams where they've got a production and
a WRL, So it's just about setting up other staging rls. So in between those two, Yeah, something in between, or if you've got automated DNAs, whether or not you can set up or whether you just have a couple of staging domains that you can just flick through which one you're using. Brief you've got a couple of prs open, so just going through and probably first looking at the tool you've got, how can you do it there?
And yeah, the then setting it up and you've already got the build working in that tool as well, so it's just about adding an initial step to there. We were building sites that were high enough load that performance profiling was
important. Yeah, not so much that you had to have the same performance as the last version, but that we had to know yeah, because if it was going to any more resources, we could allocate them, but we need to know, yeah, and so that's why it's really important to make sure that we're running these things on the same service where we're running the production
website. Because yeah, okay, it's great you can run the website locally on your computer, but that's not the same as running it on the website. And we've we've all heard you know, well, you know it works on Dave's computer. Why isn't it working in production Dave? Yeah, it's always Dave's Dave. It's yeah, Dave. I don't know. I don't know why Dave always gets called out in my examples such a benign Yeah, we could be angry, you know, it's just the dude. Yeah.
I've got a blog post as well on how I set up the automated build tests process and then build only if her passes. So if anyone wanted to find a little bit more so, that's running on gid have actions too, if any Um, speaking of links you mentioned, was it Netify or net left fi because they're two different things. Net leff I n E T l I F Y got it? Yeah, okay, good, So what's next
for you? Amy? What's in your inbox? Um? A whole bunch of emails because I haven't got to them, literally literally in my inbox, although I'm pretty sure ninety percent of them is spam. I think there's at least three saying I won the lottery or someone died and left me million dollars. Okay, and who's the doggs? They just walked in behind you. That's that's my dog remy short for Ramus. I think he's decided. It's the point in the morning where he wants to go outside, but he can
very a little bit longer. Well, we're just about done, so yeah, thank you so much. He can wait. Yeah, So, thank you so much for spending this time with us, and it's always good to talk to you. Thanks was it was good to chat with you both as well. And I'm I'm sure I will see you in person at some point this year at the various events all over the world. Probably one of those events. Yeah, all right, thanks, yeah, and we'll talk to
you next time on dot net rocks. Dot net Rocks is brought to you by Franklin's Net and produced by Pop Studios, a full service audio, video and post production facility located physically in New London, Connecticut, and of course in the cloud online at pwop dot com. Visit our website at dt n et r ocks dot com for RSS feeds, downloads, mobile apps, comments, and access to the full archives going back to show number one, recorded
in September two thousand and two. And make sure you check out our sponsors. They keep us in business. Now go write some code CE next time. Recorded b