Class names should not be semantically relevant. Typically, class names aren't announced by screen reader technology. In this particular case, I think better developer tooling is the solution. An option to hide the class attribute would dramatically simplify that DOM view. It's also possible those class names could be mapped to some pre-minified, human-readable values.
That’s true, but well-named semantic classes aid with other accessibility purposes. Making elements easy to target means screen scrapers and user themes can be maximally effective in targeting the right elements.
Some user themes are for visual nicety, sure, but they might be essential aids to some. Making it easier to data-grab with BeautifulSoup etc means any data shown is more portable, too. Data scraping is all sorts of useful, and having classes that aren’t minified garble makes it a considerable amount easier to target.
Even with the best of intentions, DOM structures can change without advanced notice. Instead of scraping via DOM structure, why not screenshot a webpage and use OCR? I think the solution to the scraping problem is being viewed narrowly.
It didn't fail. People don't want others scraping to protect their businesses. And that's how we've ended up with highly obfuscated HTML. If it failed, it wouldn't work at all. HTML was designed to display documents, not for scraping purposes. You know what is designed to be scraped? An actual application programming interface.
As somebody who has only dabbled in web programming, I thought the entire purpose of having CSS class names was to have them be semantically relevant. That way, your HTML could read class="appendix-reference" instead of class="light-blue-4 green-background-2 underline apply-hovertext".
Another issue, is that it is more and more difficult to create a web crawler as you need to render js to be sure to really see all content and you can't know beforehand if the pages needs Javascript rendering. As it cost much more to render js than parsing a html, only Google and a few other big Corps can afford it
Is it? we just have multiple instances of puppeteer that makes screenshots and dumps rendered HTML for parsing. Very simple service with autoscaling it is very affordable.
Definitely more difficult than a single curl/wget request. You now need to parse the results, run a Turing-complete language, launch other requests based on output from that language, then wait for all results to be compiled into the final HTML, which may not even be possible for a continuously updated page.
I think one of the strongest arguments against view source has got to be advertising. For example, I like to hide distracting elements of web pages so I can focus on the text. Here is the (current) uBlock rule to block the sticky clappy hands thing that only logged-in Medium users can use anyway:
> ##.iq.n.ip
Those class names will change next week when they push an update, breaking the rule and making me dig out the eyedropper again. This isn't that effective against ads of course; any page with an obnoxious ad that defeats my filter gets closed, and the community-run filters pick up the new rule changes basically same day. All it really does is harm the usability of the site for those users who need the accessibility tweaks.
Amen. I wish more developers realized that without deliberate effort, minification == obfuscation.
I've written small custom scripts to reformat and enhance redfin's data when I was househunting, to declutter (read: adblock) pinterest, etc etc.
Navigating markup is a nightmare when each node has 10 minified classes with no obvious meaning, and such frequent overlap that it's difficult to infer from usage alone. And that's before the weekly rotation.
---
aside: I wonder if there's appetite for a tool that takes snapshots of markups/css and tries to automatically update old -> new classes.
You get around this by shaming them into adding aria tags for the accessibility. The tags have to be meaningful to be useful which you can then use as your selector
View Source is how I taught myself HTML/CSS at 14 in 1996 making a website for my Quake clan. I would not be a software architect now without View Source and pirated photoshop.
EDIT: I can't actually remember if CSS even existed yet back then.
CSS technically came out near the end of 1996, but I don't think it was widely used for layouts until the early 2000s when sites like A List Apart and the CSS Zen Garden were advocating against using tables for layout and separating content from presentation. A lot of web sites back then were made by mocking up a design in Photoshop and then splicing it up into a bunch of image files that you meticulously recreated in a grid using tables and spacer GIFs, so transitioning to fluid CSS layouts required rethinking the whole design approach for a lot of people. (I initially only used CSS to add hover color to my links, since that was one thing you could do in CSS that you couldn't do with plain HTML attributes.)
"View Source" was definitely the thing that got me into web development and eventually programming in general. That and reading books at Waldenbooks at the mall while my mom and sister were shopping was pretty much how I learned everything back then (since we didn't nearly the wealth of online resources we do today, and the ones we did have weren't as comprehensive as something like MDN). I remember Microsoft's web sites all used VBScript instead of JavaScript back then. I remember seeing Flash for the first time and thinking it was incredible but then being disappointed that it was a binary file format that I couldn't recreate.
Like the article author, I've oft lamented how byzantine and opaque modern web sites are to tinkerers thanks to things like CSS preprocessors (which can often lead to complex class webs like the excerpt in the article) and JavaScript minimizers (which, even if you "unminimize" it, strips meaningful symbol names and comments). Granted, there are a whole ton of new ways to learn these things, but there's something to be said for just diving in and seeing how somebody else did it.
(Edit: I should note that the CSS inspector and JavaScript debuggers in modern browsers do help bridge this gap.)
Well said. In 1996, you had things like 'cellpadding' and 'cellspacing' that were the precursors to CSS. After reading your post, I do remember that CSS was an event when it was released and thinking I needed to learn it. Flash was the technology that made me start thinking like a programmer and Flex essentially launched my programming career. You and I probably could have a nice time over a beer haha.
Once webassembly becomes a thing, we can leave the web to the documents and migrate all the apps to the bytecode. That should bring peace to many HTML designers.
As another addendum, making it readable also helps in contributing to open source libraries. There was a webcomic that I was reading that had JS to have the left/right arrow keys go to the chronologically previous and next comic. This worked, but had a bug where it disabled the alt-left/alt-right shortcuts to go to the previous/next in the browser history. Since the source was easily visible, I could find the JS library used and submit a pull request to keep the usual behavior of alt-left/alt-right.
25 comments
[ 5.6 ms ] story [ 79.1 ms ] threadYou need better developer tooling that would show the pre-compiled class name when viewing the DOM. Feeds into the "better developer tooling" concept.
Some user themes are for visual nicety, sure, but they might be essential aids to some. Making it easier to data-grab with BeautifulSoup etc means any data shown is more portable, too. Data scraping is all sorts of useful, and having classes that aren’t minified garble makes it a considerable amount easier to target.
Puppeteer can wait for final HTML.
> ##.iq.n.ip
Those class names will change next week when they push an update, breaking the rule and making me dig out the eyedropper again. This isn't that effective against ads of course; any page with an obnoxious ad that defeats my filter gets closed, and the community-run filters pick up the new rule changes basically same day. All it really does is harm the usability of the site for those users who need the accessibility tweaks.
I've written small custom scripts to reformat and enhance redfin's data when I was househunting, to declutter (read: adblock) pinterest, etc etc.
Navigating markup is a nightmare when each node has 10 minified classes with no obvious meaning, and such frequent overlap that it's difficult to infer from usage alone. And that's before the weekly rotation.
---
aside: I wonder if there's appetite for a tool that takes snapshots of markups/css and tries to automatically update old -> new classes.
EDIT: I can't actually remember if CSS even existed yet back then.
"View Source" was definitely the thing that got me into web development and eventually programming in general. That and reading books at Waldenbooks at the mall while my mom and sister were shopping was pretty much how I learned everything back then (since we didn't nearly the wealth of online resources we do today, and the ones we did have weren't as comprehensive as something like MDN). I remember Microsoft's web sites all used VBScript instead of JavaScript back then. I remember seeing Flash for the first time and thinking it was incredible but then being disappointed that it was a binary file format that I couldn't recreate.
Like the article author, I've oft lamented how byzantine and opaque modern web sites are to tinkerers thanks to things like CSS preprocessors (which can often lead to complex class webs like the excerpt in the article) and JavaScript minimizers (which, even if you "unminimize" it, strips meaningful symbol names and comments). Granted, there are a whole ton of new ways to learn these things, but there's something to be said for just diving in and seeing how somebody else did it.
(Edit: I should note that the CSS inspector and JavaScript debuggers in modern browsers do help bridge this gap.)
There was an attempt to get people to release the unprocessed files as .max.css|js (as opposed to min). I don’t think it ever gained much popularity.