Suckless tools and software are often not as accessible to the layman user. There are not many YouTube videos on the subject for example. This lack of hand holding is actually what attracts people to it, including me. I want to feel like I am part of a more exclusive group, where the average person I am talking to in the group is smarter than me.
I also love, and borderline crave, the feeling of being able to do something I always do, but with less dependencies, less people holding my hand, and less complication. A genius admires simplicity. What had started with me wanting to see what the suckless interpretation of a web browser would look like, and a desire to start off with a we browser without tabs for once, lead me to a journey of hand coding my own adblockers and distraction free css code. I also got more than I bargained for, and realised how addictive, fun but also possibly time wasting the endless pursuit of new and “better” tools were to my general productivity and more generally my focus, the very thing that I wanted to preserve with installing surf.
If you look at the page https://surf.suckless.org/ you will find these words describing surf. “I am now much less distracted and more focused when browsing the web.” - Simon Rozet. These are the words that separated the pre-surf Kab and the post-surf Kab. Pre-surf Kab accepted that the web is broken, and that this part of his life was never going to fit neatly into a box. In the place where YouTube drama, X f.k. Twitter “beefs” and Facebook Fake-news exists, there will never be focus. Or so pre-surf Kab thought.
Post-surf Kab, although a step above pre-surf Kab, has lost days and days of productive time to compiling, configuring, patching, editing the styles.css and script.js for the right surf experience. I currently feel a mix of accomplishment, excitement, optimism and somewhat shame from the lessons learnt (I ended up compiling webkit 3 times), the mistakes made and the doors opened.
There is also the general reason why I wanted to convert all my current tools to their suckless equivalent where possible. I want to learn C programming, and having tools that exclusively use C is very helpful. I can see how a large, well-designed project is made. Patches and changes to the program are things that I can read, and if they don’t work quite right, then I can adapt them to my needs.
Suckless tools are also just somewhat fun. It’s fun to see what you can do with them. I didn’t know exactly what surf was capable of until I started to use it. But this is what had drawn me into at least giving it a go.
suckless advises you to compile your own webkit, and I followed them. I tried to install surf on openbsd using the package managers webkit and YouTube videos did not work properly. You want to remove all possible points of failure when building webkit, so unlike the advice given in https://troubleshooters.com/linux/surf.htm I decided to compile my own webkit (However, the troubleshooters article on surf was very helpful, and a must read for anyone who wants to use surf).
You want to compile webkit2gtk. At the time of writing, the link is this https://webkitgtk.org/reference/webkit2gtk/stable/ . You want the version that is described as “deprecated”. Do not compile the current stable version of webkit, which is webkit-6. You want something packaged like webkit2gtk-4.1 . The compilation process takes a really long time if you are using a fairly low-end laptop. I never considered my computer low-end, it has 8gb of ram and a cpu of 8 cores and 3.4ghz. Compilation was very long. You don’t want to realise you have the wrong webkit too late.
Go to https://webkitgtk.org/releases/ and find the compressed file with the version corresponding to the version described at said https://webkitgtk.org/reference/webkit2gtk/stable/ . At the time of writing the latest version of webkit2gtk is https://webkitgtk.org/releases/webkitgtk-2.42.5.tar.xz
Set aside some time where you can’t use your computer. If your specs are the same as mine, this will take at least 5 hours.
I initially got the wrong version of webkit, and had to install additional dependencies, so this list may have a few additional and unnecessary packages. The general gist is that you try to compile, you get an error, and then you try to install the program that's missing and recompile.
The wiki (https://trac.webkit.org/wiki/BuildingGtk) uses
cmake -DPORT=GTK -DCMAKE_BUILD_TYPE=RelWithDebInfo -GNinjaBut what worked for me was
cmake -DPORT=GTK -DCMAKE_BUILD_TYPE=Release -DCMAKE_C_FLAGS="-Wl,--no-keep-memory -Wl,--reduce-memory-overheads -g0 -Os" -DCMAKE_CXX_FLAGS="-Wl,--no-keep-memory -Wl,--reduce-memory-overheads -g0 -Os" -DUSE_LD_GOLD=OFF -GNinjacredit: https://bugs.gentoo.org/641398
One of the libraries (possibly libbacktrace) gave me this prompt, just do what it says and you will be fine.
Libraries have been installed in:
/usr/local/lib
If you ever happen to want to link against installed libraries
in a given directory, LIBDIR, you must either use libtool, and
specify the full pathname of the library, or use the `-LLIBDIR'
flag during linking and do at least one of the following:
- add LIBDIR to the `LD_LIBRARY_PATH' environment variable
during execution
- add LIBDIR to the `LD_RUN_PATH' environment variable
during linking
- use the `-Wl,-rpath -Wl,LIBDIR' linker flag
- have your system administrator add LIBDIR to `/etc/ld.so.conf'
See any operating system documentation about shared libraries for
more information, such as the ld(1) and ld.so(8) manual pages.Again, the article on building uses just
ninjaBut I used
ninja -j1 -l1 -k0The j flag is to limit the concurrent processes completely, and only do things in series (I tried even -j2 but it would not work)
The l flag means that ninja should not start new jobs if the load average is greater than 1. According to https://github.com/ninja-build/ninja/issues/630 . This means that if the equivalent of 1 core is at 100% capacity, do not start a new job.
The k flag means that even if something fails, don’t stop, just keep trying to compile what you can. This is there so that if I run the compilation overnight (which I do not recommend doing as I spent a lot of the night wanting to check if the compilation was complete) then ninja would compile as much as it could without regard to certain errors.
The hardest part of the process is waiting and not being able to use your computer for the hours it took to compile.
If on a low spec machine like mine, I would recommend having a swap file about the same size of your ram if you do not already, if it is not needed it can be turned off later, but on a limited ram spec like mine it made a huge difference.
If all goes well you can run
ninja installas root and congratulations, you have compiled webkit2gtk from source. If you don’t feel good, honestly you should, because it might have been a long process. This is the heavy door that needs to be pushed open if you want the surf experience. It felt to me like a true rite of passage, much like I discussed earlier. Not many people would do what you have hopefully accomplished.
Change the config.mk file to match the version of the software you installed. For me, the section of the diff file looks like
#change this
-GTKINC = `pkg-config --cflags gtk+-3.0 gcr-3 webkit2gtk-4.0`
-GTKLIB = `pkg-config --libs gtk+-3.0 gcr-3 webkit2gtk-4.0`
-WEBEXTINC = `pkg-config --cflags webkit2gtk-4.0 webkit2gtk-web-extension-4.0 gio-2.0`
-WEBEXTLIBS = `pkg-config --libs webkit2gtk-4.0 webkit2gtk-web-extension-4.0 gio-2.0`
#to this
+GTKINC = `pkg-config --cflags gtk+-3.0 gcr-3 webkit2gtk-4.1`
+GTKLIB = `pkg-config --libs gtk+-3.0 gcr-3 webkit2gtk-4.1`
+WEBEXTINC = `pkg-config --cflags webkit2gtk-4.1 webkit2gtk-web-extension-4.1 gio-2.0`
+WEBEXTLIBS = `pkg-config --libs webkit2gtk-4.1 webkit2gtk-web-extension-4.1 gio-2.0`I also changed the defconfig array in config.h so that WebGl was 1, and enabled.
Then run
sudo make clean installIf all went well, you know have the basic installation of surf. Now for the really fun part
This does not work perfectly, but you may want to add this to your script.js file. The location of the script.js file should be in the config.h of your surf source directory. Please consider buying youtube premium instead of trying to add the adblock code below. It supports creators better and is not against YouTube. This is mainly to show how you could implement adblock rather than using a plugin for it. It’s a bit of a hacky solution, as the ad video may play for up to 0.5 seconds, but it works for me, and the fact that Its adblock that I've coded in, I'll allow myself some leeway.
// script.js
// if the youtube video is a youtube short convert it to a normal video
// hide shorts tab and convert short videos into regular videos
function blockShorts() {
if (/^https:\/\/www.youtube.com\/shorts\//.test(window.location.href)){
var url = window.location.href;
url = url.replace("https://www.youtube.com/shorts/","https://www.youtube.com/watch?v=");
// print(url); //debug
window.location.replace(url);
}
// remove altogether
document.querySelectorAll('[aria-label=Shorts]').forEach(el => el.closest('ytd-mini-guide-entry-renderer').remove())
}
// https://github.com/theartist007/youtube-ad-blocker/issues/5
function hideAds() {
if(document.getElementsByClassName("ytp-ad-text").length > 0) {
const video = document.getElementsByClassName("video-stream html5-main-video")[0];
video.play();
video.pause();
video.currentTime = video.duration;
const video1 = document.getElementsByClassName("video-stream html5-main-video")[1];
video1.play();
video1.pause();
video1.currentTime = video1.duration;
}
if(document.getElementsByClassName("ytp-ad-overlay-close-button").length > 0) {
document.getElementsByClassName("ytp-ad-overlay-close-button")[0].click();
document.getElementsByClassName("ytp-ad-overlay-close-button")[1].click();
}
}
window.setInterval(hideAds, 500);
window.setInterval(blockShorts, 500);You may also want to disable certain css items so that Youtube is less distracting.
/* styles.css */
/* turn off sidebar recommended in youtube */
div#related.style-scope.ytd-watch-flexy {
display:none !important;
}
/* turn off recommended in youtube homepage*/
/* div#primary.style-scope.ytd-two-column-browse-results-renderer { */
/* display:none !important; */
/* } */
/* TODO turn on recommendations on channels */
div[page-subtype="channels"]#primary.style-scope.ytd-two-column-browse-results-renderer {
display:block !important;
}
Ultimately, you may have to consider using invidious, ytfzf or another method entirely if you want a more focused youtube experience.
The main idea is to inspect element on the components of the web that you want hidden, and then use display:none to hide it. Here is what I came up with.
/* styles.css */
/* remove sidebar in stackoverflow */
div#sidebar.show-votes {
display:none !important;
}
div#hot-network-questions.module.tex2jax_ignore {
display:none !important;
}
div.left-sidebar--sticky-container.js-sticky-leftnav {
display:none !important;
}
/* whatsapp web */
div._ak8n { /* profile picture on the left inbox list */
display:none !important;
}
div._ak8j { /* preview message on the left inbox list */
display:none !important;
}
.xh8yej3.x5yr21d.x14yjl9h.xudhj91.x18nykt9.xww2gxu { /* profile picture in the right chat */
display:none !important;
}I’ve also added easy link hints that can be found on the suckless surf websites under files but I don’t always use it.
I’m really glad I used surf. It has helped me to think “how do I implement a plugin” rather than “where do I find the install of a plugin”. I still need a better understanding of js and css, but surf will facilitate that. I don’t have to worry about a website listening to my microphone or having access to my camera, as it’s blocked in my config. I can’t stress this enough, it has been so much fun, and I haven’t felt like web browsing has been fun before.
I don’t think surf can completely replace your current browser. The times when I need an audio or camera for the site for example for zoom, it doesn’t seem to want to work. Netflix didn’t want to work. It's really funny to see a browser segfault-ing with certain websites. I used ranger for most of my needs, but still had a graphical file manager in the places where it was just convenient to have one. Surf seems like a similar thing. And for focus, I think it helps to have a slightly slow web browser, so I really think to myself "Is going to this site worth it". I hope this has been of help to you.