OpenJS Foundation OpenJS World 2020, 25 Jun 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Hint, Hint! Best Practices for Web Developers with webhint - Rachel Simone Weil, Microsoft

Description

No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).

A

Hint hint best practices for web developers with web hint hi, I'm rachel, simone weil- and I was so excited to be here with you know, virtually with all of you virtually at open, jeaious world 2020, so just to introduce myself for years, I have been a passionate advocate for writing code to have fun to play and to make art. Most of my technical talks focus on stuff like this.

A

So this is an art installation, I built recently, where a glitchy television psychic asks you existential questions that you interact with using a vintage payphone I built it by actually reverse engineering. This phone connecting it to a Raspberry Pi built a custom node.js web app that cycles through videos recorded on a camcorder that are processed with a video mixer from the 90s that I circuit bent. So this is sort of typical of the kind of work I'm interested in I.

A

Think making art with code is a vitally important practice in part because of the personal and restorative power of fun, as well as the cultural and political power of art. That's a talk for another day, though, but hopefully this serves as a good introduction to me. My creative practice and my perspective on coding.

A

So one thing I think about a lot as a digital artist is how to reach people in order for our games or our art or our you know: small businesses storefronts or anything that we're working on to actually reach people and make a difference. It has to work for those we're trying to reach right so for the web, like the website has to work.

A

I, don't think that's a controversial statement, but what I mean is that whatever we're building on the web has to work with a variety of browsers devices, network conditions, assistive technologies and so on to be sure certain that we're not excluding, perhaps even unintentionally, you know excluding people who might really want to engage with what we're doing making the website work. It's hard right, like it works on my machine making web apps compatible across devices and accessible. It's it's hard, because many of the tools that we can use to ensure compatibility or accessibility security performance.

A

Things like that, there you're scattered across tabs, they're scattered across tools. They often intervene too late after we've, already made a site that isn't accessible. For example, they often take us out of our existing dev workflows, where they aren't really like tools at all.

A

There may be websites with tables and specs to read, through which you know vital information, no doubt, but no wonder it feels so overwhelming to get everything right when there's so much to know, everything's changing so quickly and there's not enough useful tooling to keep on top of it and get it done and I think that's why a lot of us end up just doing spot checks by hand and hoping for the best and just waiting for the bugs to roll in so I've definitely experienced this firsthand in my own work as a web developer, slash artist and I've also heard from hundreds and hundreds of web developers in the course of my work at Microsoft, where I'm a product manager for the new chromium based Microsoft edge, dev tools.

A

In any case, like the message is clear: making sites compatible accessible, you know, plu, a ready with all of these sort of up-to-the-minute best practices and latest features in place is a really hard work and that's why today I'm excited to be talking about web hint, which is a free and open-source suite of tools that help you address these challenging and time-intensive parts of developing and debugging for the web before your app is out in the wild, so that, instead of trying to track down bugs and spending a lot of time, collating resources to help you make sure your site is compatible.

A

You can get back to the really important stuff like remaking, Windows, 95 screen saver zin, JavaScript I, really wish you could hear the MIDI playing right now. So what is web hint, as the name suggests it gives hence to web developers, but not like this? We actually call it a customizable linter for the web because, like a linter, it analyzes your code. In this case you know: HTML CSS, JavaScript, typescript bundler configuration files templates and lets.

A

You know about things that won't work in you know Safari or Internet Explorer, or won't work for screen reader users, or you know what things pose: a security risk or will break the experience for certain users like a linter, it's customizable. So if there are rules you want to disable or warnings. You want to turn into errors.

A

You can see I'm actually doing that through a web configuration file like many good linter web hint also runs as a command-line tool, so you can incorporate it into your CI workflow I've, already installed web hint here via NPM and now I'm just running hint and the website I want to scan, and here it's actually running an instance of that it's going to spit out an HTML report along with a short summary of findings.

A

Weapon. In addition to this also is available as AVS code extension, where these insights are brought into vs code into your IDE directly. So you can get feedback while you're coding- and this is so so critical. So you can see here. I have issues both in the problems pane and then, when I mouse over an item as well. I'm getting those little squigglies to.

A

Let me know that something's amiss in addition to all this webhead also offers a dev tools, extension for Firefox, edge and chrome, and this will allow you to do runtime analysis on your page, maybe as you're debugging or maybe after you've deployed. So in this case, web hint creates a new tab in the dev tools that extension, where you can go and run on-demand scans and take a look at the results. In addition to this, there is even an online scanner for those who want a kind of more traditional audit.

A

This is great for non-technical folks. You don't have to install anything. It just runs straight on the web hint IO website, so there are a lot of different offerings as part of web hint, but instead of me just talking about all of these things, I won't actually run through a demo. Building a web apps I can show you how web hint actually works, so I am actually redoing. My personal website and I have started with a totally almost totally blank repo, no frameworks, no dependencies, just some blank, a blank index.html blank style, dot.

A

Css keeping it really really simple today, because I want to focus just on a web hint. It's the only thing I've done here is: you know, create the repo on github I've, cloned it down and I've added a github action that will run whenever I create a release and that will actually deploy my web app from github. This is just the standard default vml file that gets created when you set up a github action for deploying to Azure, obviously choose whatever hosting you want whatever pipeline. You want.

A

I just wanted to try this out today, so I'm gonna go ahead now and install the web hint extension for vs code- and this is gonna- help me get real-time feedback on my web code, while I'm coding. So let's go ahead and try this out I'm going to go back to my project here and open up my blank there's nothing scarier than a blank page, I'm gonna go ahead! I'm gonna! Do this just like very, very old-school. I, deeply apologize, but again, I want to keep this really really simple.

A

I'm, just gonna create the simplest HTML page I can think of all right, so I think the next thing I want to do is add an image so for my website, I have this great picture of me hanging out with Hello Kitty I vent. It's it's someone in a Hello Kitty suit. Okay, that's a story for another time you can see.

A

I've got a red squiggly under my image tag when I mouse over it or if I open up the problems, pane MDS code, I'm, actually seeing web hint, letting me know my image doesn't have alt text, which is really valuable for accessibility for screen readers. So now you can see as I add the alt tag here, that problem immediately went away and that red underline went away. So this is an awesome example of getting real-time feedback, while you're coding about four sample accessibility problems.

A

Of course, accessibility is just one of the things that web hint checks alright. So obviously this is a very simple demo: let's do a little bit more depth, so we can get a little bit more realistic and I'm gonna try something here. Let's see if this works, okay, ready, awesome. Okay, that is one cool thing about remote conferences. Writing that code would have taken a lot longer without a little video magic. So now you can see that I've written some more code, I've actually already gone through and addressed all of the errors.

A

So now I'm just left with warnings which are like nice to fix, but won't necessarily break my build now. I can go through these, just like I would with a linter and fix them for my first check-in, if I decide to which is super cool, you can see here. I have a lot of style issues. Those are actually related to a lot of content around CSS grid, which has compatibility issues with Internet Explorer.

A

So now it's kind of up to me as a developer I can make the decision whether I want to fix those so that I have full compatibility with Internet, Explorer or I could alter my webcam configuration to say hey in the future I. Actually, don't warn me about IE compatibility, that's not a browser that I'm targeting so yeah. This is really cool.

A

Now I mentioned that webhead has CLI as well, which can be integrated into your release pipeline, so obviously you'd love to catch as many issues as you can and development it, because as soon as I save you a lot of time and obviously it's gonna, it's gonna make your debugging a lot easier, but you might miss some. You might be inheriting legacy code. There also some hints that can't run in the BS code extension because it does just do static analysis to keep it really performant.

A

So this is a great first pass to address a ton of issues, but then it's even better to actually follow that up with a sort of runtime analysis so again for this project. I, if I want to integrate web hit into my pipeline, I can actually just add web him into my oh yeah I. Don't even actually have a package love JSON yet so let me create one first, first things: first, let me create a package that they sense.

A

I can actually add web hint as a dev dependency to this project, and then I can kind of rely on that to run in my pipeline. So I'm just gonna add keep in mind the NPM package for web hint is called hint I.

A

Think if you try web hint, it's not gonna work or a little readwrite to you, but but just remember it is called hint when you bring it in from NPM and then I'm just going to go ahead and create a script in this package, so JSON to run hint, and here you can choose to run it against one or more local files. Of course you can run it for folders.

A

You could maybe have like a staging staging server, or maybe you push files to staging first and then run the scan is totally up to you totally customizable. So now, I have this script. I'm actually go back to my llamo file for my github action.

A

Again, you don't use github or either I'm just doing it, because that's what I'm familiar with and I'm gonna add that script, the NPM run hint right after the npm install. So now you know when I run that github action, it's going to run that script, and that is pretty much it.

A

So, let's go ahead and check this in and push it up to github again, you know if you use github I'm, just using it, because it's what I'm most familiar with in terms of like pipeline integrations, we have on the web hedione website some other examples of getting set up with travis circle, they're all really similar, just because this is a command-line tool.

A

So it's all pretty much the same underlying concept, which is like run the script please so now, I'm gonna go ahead and queue up a release in github and that will actually eventually trigger my github action. So I'm actually getting a little bit new to all of this, but it seems pretty easy. I started trying it out yesterday. I think it just works. So that's pretty cool. So what's gonna happen here is that I'm gonna create this release.

A

The github action is actually going to run web hint against my repo or my file or whatever I've selected in that script. In my case, I just chose that index.html and if it passes the checks, its going to deploy a web app and if it doesn't pass the checks, it's going to break the build and that's actually what we want right like we want to know. If there are problems before we release our app, not just after so in this case, breaking the bill to be a good thing.

A

So you can see here it's actually running this pipeline. It's pretty cool you can. You can see every step. This is just running through those steps in the yellow file that I showed earlier, and then we can drill in here and actually watch this step running. This is the thrilling part where we see whether the build passes or not. Yes, it did okay cool, so we scroll down here, you can see it's actually reporting out that it did find.

A

It found one warning, but it didn't find any errors, and so it's it's actually pasta build, and from this part you know all that's left to do is that it's going to deploy the site because the the web hint checks passed, which is really cool, I'm sure some of you wanted to see the build break in the live demo. You know there's still time, though, who knows so. This is really awesome as a proof of concept. Obviously it's just like a first pass. Very simple.

A

Very, very you know bare-bones, but you can see that in a couple of minutes, I was actually able to get this work. Working, get it set up in the IDE, get those checks straight into vs code and then actually integrate it into my deployment process as well, but where this can get really powerful is when you start customizing web hint. So maybe, for example, you think about my my website, where I had all of those warnings about grid and Internet Explorer.

A

Maybe I would actually like my build astray that fail if my features aren't compatible with all browsers. Maybe I want my bill to fail. If I have any accessibility problem whatsoever, and so that's where the hint RC file comes in so if you've used other linters like es lint, has the es lint RC file, it's a really similar concept. We have a hint RC file and take a look at the web hand, I/o website you'll find a lot of documentation about what you can configure in the hint RC file.

A

You can choose your parser, you can choose which hints you want to run. You can change how the results are output. You know if you want them in an HTML file. If you want the console, you can change the severity of a hint so that things get flagged or don't get flagged by your testing pipeline. Keep in mind, you don't actually need a hint RC file for using the S code or the CLI I didn't have one in my demo. We do have defaults in place, but that option is there.

A

If you want to get more customized results, another cool thing is, you can actually use. You know the same hint RC files and feeis code in CLI. So you have these sort of predictable checks throughout your pipeline and it's pretty easy to create a hint RC file using the command NPM create in tar, see we have some Doc's on our website about that as well. So you might be wondering like hey. What are all these hints exactly?

A

Why should I trust web hint to be the arbiter of best practices for the web and that's totally fair question? The reality is we think web developers are in the best position to know what web developers need and what best practices are so on the web hat team. You know we we think about it. This way we aggregate information from up-to-date, open source sources.

A

Like you know, MD ins, compatibility api's, we use axe core for surfacing, accessibility, information, sneak and, and other things like that, and so we are not in charge of keeping these up to date, we've rely on really I, think sort of industry-leading open source communities to to surface us up and then, in addition to that, many of our hunts are hints come from the community as well like they come from you.

A

So it's as simple, as you know, creating an issue or a PR against web hint and saying, like hey, I, think this is a check that would be really valuable to web developers. You know that being said, you can also create bespoke hints that are just for you or just for your team.

A

You don't have to contribute them back up, so we have a tool for creating hints it's just NPM and it hit and you'll get watched through, creating your own set of hints, which you can import into your own projects, without necessarily contributing them back up to web hints. So this is again really cool for developing new hints. That might be specific to your team or your organization.

A

So another thing I wanted to mention that's pretty exciting. Is that just a few days ago, actually the edge dev tools team that I'm part of released an experimental feature in the dev tools, where we actually bring in web hint directly into the dev tools to surface real time.

A

Runtime analysis directly in schedules in a new panel called issues, so you can see I've just enabled that experiment here- and this is kind of like the web browser extension experience, but it's better because it streams in and live updates, and so it's not just like an on-demand audit. It's kind of continuously updating as you navigate between pages and of course, it's right there in the developer tools. You're already using you, don't have to install anything. But what's even cooler is that when you actually go through and click, you know click through these affected resources.

A

You get links to documentation to let you know how to fix things, and you also get the ability to actually see what resources effect are affected and when you click on those, as you can see here, they're actually taking me to those relevant places in the network tab or in the sources tab. So I have this really great, like contextual tooling, so you might be surprised to see how many issues the web hint website has right. It's kind of ironic like don't we run web hint against webhead.

A

We do, but, as you look through these issues, you'll see that these are largely issues with third-party code that we import. So you can see there's like stuff from CBN's, it's like Google, Analytics stuff. In the browser extension, we actually give the user the ability to filter those out because we realize that you're not necessarily always in charge of third-party code and so in a future release of this web cam experiment, dev tools, we're also planning to give the users the ability to filter out third party.

A

Because again you can't always control what you get CDN. You can't necessarily go and fix something. So if you want to try this, it is an edge 85 and up and edge dev tools. It's in just canary right now, depending on when you're watching this I'm, not sure what what version of edge will be latest but edge. 85 and up. You should be able to just go to dev tools, go to dev tools, settings and enable the web hint experiment, restart dev tools, and it should pop up for you.

A

This is a really cool example of a case where you know you know I'm excited about this, because obviously I work on edge, dev tools and web hint I've heard a lot of dev tools. Users say you know: please help me with cross-browser testing. It's so challenging help me with accessibility and then to be able to like go out and leverage an open-source tool like web hint. To do that. That's so like community oriented I think is really super. Super cool, so I think in terms of what's next for the web hint project.

A

You know: we've released our official v1 of the browser, extensions, the vs Co exceptions late last year. This dev tools, integration, is super new, there's a lot of new stuff and so I think what the team is really focus on. Now is just getting this in front of web developers spreading the word hearing from users. So we can understand how to make these tools even better, so if you're already using web hint or you think you might like to start now- that you've seen some of what it can do.

A

I really encourage you to reach out to us. Let us know what you like: what's confusing, what could be better? You can find us on github at web hint io twitter at web hint io and online at web hit io I'm, pretty easy to remember. huh I've also encouraged. You like definitely feel free to reach out to me. Personally, you can find me on Twitter at Party Time excellent I'm. There way too much github, HX, l, NT I would love to personally email with you a schedule.

A

Video call if you're a user of webhead I would love to hear more about your experiences. I did want to say too I know I didn't get a chance to finish my website. I didn't even show it well I should that was systole.

A

I'm gonna continue working on my personal website and I'm actually planning to a livestream it on Twitch. So you can find me on if you're interested in watching live coding, I'm seeing some of the dev tools that I use in my own development process, I'm on twitch also HX, l NT.

A

I would love for you to come, hang out with me and watch me build a website, so I know I'm getting really close to the end of my time and I understand we're gonna pause here for some live Q&A for folks who are tuning in to open Jay s world in real time. So I will see you there. Otherwise I really appreciate your time. Thank you. So much to the open, Jay s foundation. Webmin is an open, Jay's foundation project. So we really appreciate their support. Thanks to all of you and happy coding.