downstyler
downstyler copied to clipboard
mention other style simplification tools in the README
Something like this:
Readability and Instapaper are similar tools to clean up blog posts and cluttered websites for a cleaner reading experience, but they are more than just a stylesheet — they incorporate a large library of rules for cleaning up news websites and blogs that are known to have a certain structure (so they can hide everything that isn’t the main content).
It's worth mentioning that at least one of them had (have?) a bookmarklet, but it didn't work on the client-side -- it replaced the current page with a version parsed in their servers.
Just as a footnote, there was a "service" (script) called NotForest (archive, marklets.com entry) which did much of the same thing.
Unfortunately the javascript bookmarklet didn't contain the actual javascript code, but instead injected a script tag whose source was http://www.notforest.com/notforest3.js, which I can't find archived anywhere (there are some js files archived here, and a stylesheet which apparently came from the Typominima Wordpress theme, but seemingly was used for the notfrest.com website itself, not for the bookmarklet).
That said, here's what one commenter said on hacker news:
Looking at the source code, that's exactly what it does. It removes forms, objects, scripts, images, blank links, divs, etc. Then it goes through paragraphs and tables and finds the longest content. This algorithm seems pretty good for long-form article content, but not for the marketing homepage I tried it on. Overall, pretty cool.
It was created by Steve Claridge (rhubarbcustard@HN, steveify@twitter).
There's also the iReader extension for Firefox and Chrome (archived website, source code), which seems pretty much abandoned.
Another note: Readability has been retired, and its functionality is now available via the Mercury reader (which only provides an extension for Chrome).
More relevant stuff:
- Mozilla's fathom (blog post)
- Chromium's DOM Distiller (announcement on G+)
- the Just Read Chrome extension
As a useful reference, https://github.com/flattr/flattr-extension/issues/27 lists the reading modes implemented by Firefox, Chrome, Edge and Safari.
Also related: the notion of classless CSS stylesheets:
-
HTML5/CSS3 classless framework - Stack Overflow
- Lists several of the ones listed below.
- dbohdan/classless-css: List of classless and classlight CSS themes.
- troxler/awesome-css-frameworks § class-less
-
W3C Core Styles
- "an ongoing project to explore shared style sheets over the Web"
- None of the 8 available styles are minimal, though; they are all sort of opinionated.
- Live demo home page. Direct links to the styles:
Some examples:
- longsien/BareCSS "A classless CSS framework." http://barecss.com (forked at ericclemmons/bare-css)
- fiatjaf/classless "The same HTML, multiple CSS themes." https://classless.alhur.es (formerly fiatjaf/unitemplate)
- websitesfortrello/classless "Bringing DRY to the HTML theme world -- without classes." https://websitesfortrello.github.io/classless
- mblode/marx "The classless CSS reset (perfect for Communists)." https://mblode.github.io/marx
- oxalorg/sakura "a minimal css framework/theme." https://oxal.org/projects/sakura
- krasimir/Classless "A CSS world without (almost) classes. Experimental micro-framework using contextual styling." https://rawgit.com/krasimir/Classless/master/index.html
- tylershuster/Semantic-CSS-Framework "allows you to write semantic HTML and produce a usable website." http://semanticcssframework.com
See also:
- Mozilla's readability.js (unrelated to readability.com?), which has been ported to Go
- DOM Distiller (mentioned above) also has been ported to Go.
Here are some notes comparing the two.
See also: A look at CSS Resets in 2018, which has a nice overview, including links to the most popular browsers' default stylesheets.
See also: https://github.com/jensimmons/cssremedy
Interactive demo pages that allow comparing various minimal/reset styles:
- Drop-in Minimal CSS (source: https://github.com/dohliam/dropin-minimal-css)
- CSSresetr (no source repository)
- HTML5 Kitchen-sink (source: https://github.com/dbox/html5-kitchen-sink)
Test pages containing multiple HTML elements:
- MDN: HTML elements reference (source: mdn/content)
- HTML5 test page (source: https://github.com/cbracco/html5-test-page)