One Dev Job

There are times when you check Facebook to just fill a free minute or post something and then you find you’ve been pulled into the vortex of links worth clicking. You can unfollow everyone and everything until your timeline slows down, but then they give you trending topics, suggested pages, ads etc. Well, today you can switch your Facebook from looking like this:

To this:

You can still see that there’s more than your timeline if you look for it, but it’s not in your face and it will still become opaque when you hover your mouse cursor.

How do I get there?

1. Install Tampermonkey plugin into your browser. I tested in Chrome, but there’s a version for some other browsers and the original Greasemonkey might work if you’re on Firefox. It seems like the Internet Explorer flavor is called Trixie.
2. Add the following script to your monkey, go to Facebook and you’re done!

// ==UserScript==
// @name         Hide FB distractionpane
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Hide distraction panel on Facebook
// @author       Filip Skakun
// @match        *.facebook.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
  var timeout;

  var styleElement = document.createElement('style');
  var declarations = document.createTextNode(
`#leftCol, #rightCol, #pagelet_ticker, #pagelet_canvas_nav_content {
  opacity: 0.1;
  transition: opacity 0.5s;
}

#leftCol:hover, #rightCol:hover, #pagelet_ticker:hover, #pagelet_canvas_nav_content:hover {
  opacity: 1;
  -webkit-transition-timing-function: ease-out;
  transition: opacity 0.1s;
}` );

  styleElement.type = 'text/css';

  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = declarations.nodeValue;
  } else {
    styleElement.appendChild(declarations);
  }

  var headElement = document.getElementsByTagName('head')[0];
  headElement.appendChild(styleElement);
})();

The script adds a little bit of CSS to Facebook to hide the left and right panels that have ads, news and infrequently used parts, leaving only the timeline and Messenger contacts visible. These panels reappear once you move your mouse cursor over them, which still keeps them readily available, but stops your gaze from wandering around the screen, so you can quickly scan the timeline and get back to what you were doing before.