Hacker News Reader

Comment by bdg | Hacker News Reader

Websites are growing in their nuisance of DOM-level UI breaking. I'm increasingly using the Inspector dev tool just to delete entire chunks of elements on websites.

"Oh, you need me to click LIKE on your page? ... Deleted!"

"Oh, your news article is 25% of the width of the page and the other 75% is navigation, ads, and other unrelated articles? Deleted!"

"Oh, you have the annoying chat box that hovers in the bottom corner and hides things I actually wanted to see? Baleted!"

I keep telling myself that eventually I'll add a deletion option to the right-click context menu but I never actually bother with it.

View on HN

I wrote a bookmarklet to delete stuff like this without opening the inspector:

  javascript:(function(){document.styleSheets[0].addRule(".highlighted_to_remove","background:red !important");var e=function(e){if(e.keyCode==27){i()}};document.addEventListener("keydown",e);var t=function(e){e.stopPropagation();this.classList.add("highlighted_to_remove");return false};var n=function(e){e.stopPropagation();this.classList.remove("highlighted_to_remove");return false};var r=function(e){this.parentNode.removeChild(this);i();e.preventDefault();e.stopPropagation();return false};var i=function(){var i=0;var s=document;while(s=document.body.getElementsByTagName("*").item(i++)){s.removeEventListener("mouseover",t);s.removeEventListener("mouseout",n);s.removeEventListener("click",r);s.classList.remove("highlighted_to_remove")}document.removeEventListener("keydown",e)};var s=0;var o=document;while(o=document.body.getElementsByTagName("*").item(s++)){o.addEventListener("mouseover",t);o.addEventListener("mouseout",n);o.addEventListener("click",r)}})()

Post about it: https://plus.google.com/114437281866675781856/posts/hkp9F9Wr...

Nice. I think your bookmarklet stretched the hacker news comments page.

Deleted!

Thank you for this! It looks pretty awesome.

Works like a charm in Chrome. Not so in Firefox. I'm on a Mac.

So did I!

    javascript:var cursor = document.body.style.cursor; document.body.style.cursor = "crosshair"; var killer = function (event) { document.body.style.cursor = cursor; if (event.target.parentNode) event.target.parentNode.removeChild(event.target); window.removeEventListener('click', killer, false); event.stopPropagation(); event.preventDefault(); }; window.addEventListener('click', killer, false);void(0)

Improved version:

    javascript:(function(){var e=document.body.style.cursor;document.body.style.cursor="crosshair";var t=document.createElement("div");var n="border:1px solid #3280FF;background-color:rgba(50,128,255,0.5);position:absolute;z-index:999999999999999;display:none;";var r="pointer-events:none;";var i="transition:width 60ms,height 60ms,left 60ms,top 60ms;";n+=r+"-webkit-"+r+"-moz-"+r;n+=i+"-webkit-"+i+"-moz-"+i;t.setAttribute("style",n);document.body.appendChild(t);var s=null;var o=function(e){var n=e.target;if(n!==s&&n.parentNode){var r=n.getBoundingClientRect();var i=document.documentElement;var o=document.body;var u=i.clientTop||o.clientTop||0;var a=i.clientLeft||o.clientLeft||0;var f=window.pageYOffset||i.scrollTop||o.scrollTop;var l=window.pageXOffset||i.scrollLeft||o.scrollLeft;var c=l-a+r.left-1;var h=f-u+r.top-1;t.style.display="block";t.style.left=c+"px";t.style.top=h+"px";t.style.width=r.width+"px";t.style.height=r.height+"px";s=n}};var u=function(n){document.body.style.cursor=e;if(n.target.parentNode)n.target.parentNode.removeChild(n.target);if(t.parentNode)t.parentNode.removeChild(t);window.removeEventListener("click",u,false);window.removeEventListener("mouseover",o,false);n.stopPropagation();n.preventDefault()};window.addEventListener("mouseover",o,false);window.addEventListener("click",u,false)})();void(0)

"Source": http://jsfiddle.net/udzP3/

Readability is your friend! http://www.readability.com/apps

I've never been able to get Readability-the-app to work on most sites. It seems far less useful than the original bookmarklet. I also don't want to send things to my "Reading List" or my imaginary Kindle.

For fans of the original bookmarklet: [http://readable.tastefulwords.com/]

Remove It Permanently

https://addons.mozilla.org/en-US/firefox/addon/remove-it-per...

Based on Aardvark; fixes the web.

Eventually, this will become a crime and we, programmers, will support it. Because, legislating our way to money is easier. Locking down is easier.

AdBlock's pretty good at handling this stuff too.

You might enjoy this "position:fixed fixer" bookmarklet I wrote, it just sets all elements with position:fixed to position:static. In 99% of the cases this does exactly what is needed to improve the page, without even having to manually click or select the elements.

    javascript:for(var a=document.querySelectorAll('*'),i=0,e; e=a[i]; i++) if (e.currentStyle.position == 'fixed') e.style.position = 'static'; void(0)

I have it named "fix", so I can just type "fix" in the address bar and it applies to the current page. It's lovely, all those floating fixed elements just disappear (possibly somewhere to the bottom of the page) and you get your screen estate back.

edit: I just see a bunch of others also made bookmarklets to remove elements, so I added a bit more description as to why mine is different. Setting all position:fixed elements to position:static really does seem to do exactly what you want in one fell swoop, in 99% of the cases.

There should be an adblocker list for popups, survey requests, etc

Just disable Javascript by default, it will protect your sanity.

But also nearly cripple a site's functionality aside from static content pages.

As you can easily re-enable it with any decent browser (Opera 12 is great) that is no issue since if you actually want to have a site to have interactive features on its pages, just enable it. Otherwise, you get soothing, plain, static content. Most sites to not require Javascript for reading text or looking at images.

It is pretty refreshing to load a page and have it usable within fractions of a second, instead of it having to go and fetch an untold number of external scripts, initialize and create the widgets and objects, etc. Not to mention that sites with auto-play A/V are prevented from blaring at you without your permission.

"Easy" is in the eye of the beholder. "Close tab" is even easier to do; and very little of Internet's content is actually unique (as in "cannot be obtained from a non-scummy site").

"But also nearly cripple a site's functionality aside from static content pages.

Even plain text pages aren't immune from the Javascript curse. I've said this before, but Google's blogger/blogspot service is one of the worst offenders. For example, here is the official Android blog from Google

http://officialandroid.blogspot.co.uk/

With Javascript disabled, nothing loads at all. When Javascript is enabled, you get a mostly text page that could easily be served without Javascript.

That's why we have add-ons like NoScript for Firefox (or the similar NotScripts for Chrome) that let you selectively white-list JavaScript from just the sites you need. Even if some site requires JavaScript to load, it almost surely doesn't require JavaScript hosted from Facebook or Twitter or Google Analytics to be functional.

Wouldn't it be ironic if the list were hosted by a company who's revenue largely comes from ads. Like most internet companies today.

Maybe some kind of balance would be better than a block list. Effective ads that don't annoy.

Ads can't be effective, if you'd made a product that was better than what I use, and specifically targeted at me, via magic(?), I'd already know about it because I would have read a review. Ads are just lies. But the question was about popups asking you to sign up, do a survey, etc. I already block ads.

I think websites in general are getting away with bloat overall. Ever since I started using noscript I've gotten increasingly annoyed by how every site seems to wanna run scripts from at least 3-4 sources that I know aren't essential to my experience on the actual site. Some sites have upwards of 15 sources and I have to wade through them to allow the content servers, etc..

There must be a market for a chrome plugin that lets one ctrl+click to delete a DOM element, I wonder how hard that would be?

I built this extension a while ago for precisely that reason. https://chrome.google.com/webstore/detail/hide-elements/omjo...

Might as well just use a Readability-type plugin to pull out the text.

I thought Nuke Anything Enhanced was meant to do exactly that?

Links:

https://addons.mozilla.org/en-US/firefox/addon/nuke-anything...

Extensions like Readability and Clearly let you read just the main content on the page. It would be nice if they had an option to automatically load pages like in that mode. Besides avoiding all the clutter websites put, the pages would also load faster that way.

I'm pretty sure readability routes web pages through their service to strip them down to the main content, and restyle them. Since this processing isn't done on your machine, it would probably be slower than loading the original page. Also, a company would never invite the amount of traffic such a feature would incur.

OK so it would make more sense to use an alternative that does it in the browser, e.g. http://www.notforest.com/.

Update: There is an extension like this, called permanent readability: https://chrome.google.com/webstore/detail/permanent-readabil...

(though I think it strips out the junk after the whole page loads.)

Reply on news.ycombinator.com