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