Let’s say you often visit news sites or blogs.
And, let’s say you would prefer not to see certain sections (the top of the site, the sidebar, the footer).
Maybe there are sections that bother you—”see more news,” “similar articles,” “subscribe to our newsletter,” “follow us on social media.”
I have a solution that allows you to customize the content of a page highly—you can choose not to display certain sections.
Here I’ve posted some filters that can be used ».
A tool that might be useful for HTML formatting: https://www.freeformatter.com/html-formatter.html
The solution is uBlock Origin – Chrome / Firefox.
See the video below.
See the video on YouTube:
See the video on YouTube »
See the video on Vimeo:
How does a website before & after using the plugin:
See the video on YouTube »
Note: The presented solution works on mobile only with the combination of Firefox browser + uBlock Origin extension (I believe it only works on Android, not on iOS).
The solution presented is not unique – there are other methods in browsers (it depends on the browser, but there are features like “Reader View” in some browsers) and browser extensions (such as JustRead) that change the formatting and allow you to see only the title and content. However, the solution I’ve presented allows customization for any site and any element.
With the tool I presented, you can cut exactly what you want from a website.
Some browser readers leave you with the title, content, but nothing else, and maybe you want to keep the essence of the site.
Plus, if you open many tabs and have to manually switch to “reader mode” for each, you’d get tired of pressing the text formatting button.
With the presented solution, everything is instant.
General structure of a website:
- <html>
- <head>
- stuff
- </head>
- <body>
- <header>
- stuff
- </header>
- <article>
- content of article
- </article>
- <sidebar>
- elements
- </sidebar>
- <footer>
- elements
- </footer>
- <header>
- </body>
- <head>
- </html>
<div id=”one” class=”sidebar data”> </div>
For IDs, use “#” (hash). For classes, use “.” (dot).
This is what a div looks like:
<h2>text</h2>
<p>text</p>
</div>
