Web Lab - HTML linting

Hello!

In Web Lab, the HTML linting is pretty permissive, and doesn’t catch a bunch of different kinds of mistakes that some MS students have made, in ways that we expected it would. Here’s an example project: https://codeprojects.org/I-OThVzEzpv1eIwizxKMHSlGF92UFlmbfDSbJvxQDCc. (FWIW, I added in links and images, but Discourse won’t let me post something that has more than one image in it).

Browsers still render text in these other places within the document, so there’s no visual feedback for students in the preview that would indicate this isn’t a good idea. This has come up in a few classes, and seems like it’d be great to update the linter settings to help students with this.

To try to help, I poked around in Web Inspector, and in the code on GitHub, but couldn’t piece together what I seeing. Here’s what I saw:

Web Inspector, HTML

There’s some CSS classes named CodeMirror, so I figured it was using that project, and looked at https://codemirror.net/doc/manual.html#addon_lint and found info about its support for linters. Trying out their demo with default config, I could different results from Code Studio (see https://htmlhint.io/ which also doesn’t catch everything in that example project). So I figured something else was doing the linting.

Web inspector, JS

This looks like there’s a file within Bramble in HTMLCodeHints/main.js that is registering two kinds of handlers doing HTML linting:

GitHub searches

I found that there’s a code-dot-org repo, and a brambles repo, so I searched for HTMLCodeHints and TagHints in each, but didn’t find anything.

Any suggestions on how to improve the editor so it helps students with catching these kinds of mistakes?

Thanks!
-Kevin

Hi Kevin,

Because HTML lets you get away with so much, sometimes the lines between “functioning code” and “syntactically correct code” and “clean code” are not always clear. We haven’t gone into the linter for Web Lab as much as we’ve thought about the permissiveness of Game Lab, but it is something that has been on our minds, especially when it comes to ways that Web Lab is more strict than the native browser.

I don’t think that there is an easy way for you to modify the linter for yourself. For most classrooms I’ve seen, this is where peer and teacher review come in. It also might be a good place for classroom conversations around clear communication and using good coding conventions is important, even if the page appears to render correctly. You can also send students to web pages like https://www.freeformatter.com/html-validator.html to check their pages against a stricter set of rules. It might also be interesting to get an ELA’s teacher’s opinion, since they are used to dealing with similar issues around writing.

Regards,
Elizabeth

Hi @elizabeth_admin, thanks for reaching out!

Bummer there’s no way to address. I just went through a bunch of middle school CSD projects, and there’s several project with things like missing tags that I would have expected a linter to flag. I know Unit 2 has a lesson on “clean code” but this seems a bummer to expose students to a tedious part of programming, one that professional engineers don’t do anymore because there are tools that can do it for them :slight_smile:

If you were open to a pull request, and could point me in a direction, I might be able to look at this. Alternately, is allowing third-party IDEs on the roadmap (eg, glitch, repl.it), or are you all committed to continuing development and investment on the IDEs for CS Discoveries over the next three years?

Thanks!
-Kevin

Hi Kevin,

Can I ask you to fill out a “bug report” with this explanation of the problem and request? If you ask for the report to pass to me, then I can pass you on the the team that works on Web Lab. Web Lab is still supported, but it hasn’t seen the kind of attention some of our other tools have. This is the first time that I know of that we’ve gotten requests around the linter, but I think that work on the linter would help with some other issues that we’ve been seeing, so it’d be great to get your perspective into our formal feedback process, where the product team can ask for some clarification.

Thanks,
Elizabeth