Tim Visée

List & export your subreddits

Mon, 01 Mar 2021 00:00:00 +0000

The last few years I've been wanting to export the list of subreddits I joined. It's fun to share with friends having a similar interest, as I've collected many gems throughout the years.

To achieve this I've set-up a simple script. It exports your subreddits to a plain text list.

How to export </a> </h2>

Visit old.reddit.com/subreddits/mine</a> in a desktop browser, make sure you're logged in.</li>
On that page, open</a> your browser developer tools (Keybind: Ctrl+Shift+I).</li>
In the developer tools panel, open the Console tab.</li>

Copy-and-paste the following snippet into the console, press Enter to run it:$('body').replaceWith('<body>'+$('.subscription-box').find('li').find('a.title').map((_, d) => $(d).text()).get().join(" ")+'</body>');javascript.void() </code></pre> </li>
Your full list of subreddits will appear on the webpage.</li> </ol>
Here</a> is mine.

Tap here if you're a nerd.</summary>
For nerds </a> </h2>
Here is the above snippet, expanded:
// Pluck list of subreddits from page, build plain text list var subs = $('.subscription-box') .find('li') .find('a.title') .map((_, d) => $(d).text()) .get() .join(" "); // Put list of subreddits on page $('body').replaceWith('<body>' + subs +'</body>'); javascript.void() </code></pre>
Your complete list of subreddits is located in the sidebar on that</a> page. The script plucks your list of reddits from this sidebar and puts it in an array. Then the array is imploded in a string to show on the page. Super simple. </details>

Reconnect to broken tmux session

Sun, 28 Feb 2021 00:00:00 +0000

Ever tried to attach to a running tmux session, only to find that that fails?
tmux attach # no sessions tmux ls # error connecting to /tmp/tmux-1000/default (No such file or directory) </code></pre> Even though you're sure tmux is running fine, it shows up as running in your task manager after all. So, where are your precious tmux sessions? 
Socket file </a> </h2>
All your tmux sessions are hosted by a single tmux process. This is persistent and keeps running until you quit all sessions again.
The process creates a socket file, other processes use this to talk to it. When you invoke tmux attach</code>, the program finds this socket and attaches to it through the socket.
Now, what happens when you delete this file? Exactly, your tmux</code> command doesn't know how to connect to the running server. That's what we're seeing here.
Recreate socket</a> </h2> Because others had the same issue, tmux provides a feature to fix this. When you send the SIGUSR1</code> signal to the host process, it creates a fresh socket file for you. For this, you need to find the PID of the running tmux server. Find it through your task manager, or invoke the following command to find the PID of the oldest running tmux process: pgrep --oldest tmux # 5612 </code></pre> For me it was 5612</code>, so I invoke the following and attach it again (be sure to use your own PID): sudo kill -SIGUSR1 5612 tmux attach </code></pre> Happy hacking!
Dark mode toggle on your static website Tue, 16 Jul 2019 00:00:00 +0000 Developers like</a> dark themes. When looking at a screen all day (or rather, night) long, a pale white background with black text is an eyesore. Many software engineers prefer to use a dark theme with lower contrast colors in their code editors, and many tools started shipping dark visuals as default in the last few years. </a> I fall into that group as well and have been using these themes for so long that I can't even recall when I joined the dark side. I started to like these dark themes a lot and find them more visually pleasing, appearing more... Professional. To reflect this, I wanted to give my website – this website – dark visuals as well. This isn't always a success. On some screens or in some light conditions the dark theme can be difficult to read, and some just prefer a paper-like background color anyway. I decided to create a dark/light mode toggle to please everyone. 🌓 </a> — Tap the moon icon, and see the magic happen. What we're building </a> </h2> Alright. In this post I'll explain how to implement a light/dark mode toggle for your website, it's super simple and adaptable. There are a million tutorials for this on the Internet already, but here is my take on it in some detail with a few tips. This will use and support: toggle theme using a button with smooth transitions</li> remember chosen theme on a device, no flickering on page load</li> simple & effective to implement, works on static HTML pages</li> style sheet per color theme, keep it maintainable with SCSS variables</li> </ul> Continue to the next section for the implementation, or skip to The result</a> just for the result. Build a theme toggle </a> </h2> "How is this be implemented?" I hear you ask. Well, it's quite simple. Because we're working with a static HTML website, theme selection must be done on the client. We'll use two style sheets (each for a different color scheme), and some simple JavaScript to toggle between these. The user preference will be remembered across visits. Load two style sheets </a> </h3> First off, load two style sheets inside the <head></code> block of your website which replaces the existing style sheet you might have in your template. Just link both to your existing sheet for now. Assign an id</code> to easily reference them from JavaScript, choose style-light</code> and style-dark</code>. The latter of the two links gets the disabled</code> attribute to disable it by default. They won't do anything yet, but this is to prepare for the toggle we'll build next. I'm using /site.css</code>, which makes the imports look like this: <link id="style-light" rel="stylesheet" href="/site.css" /> <link id="style-dark" disabled rel="stylesheet" href="/site.css" /> </code></pre> Add a toggle </a> </h3> Now we'll create the toggle. After that, we can finalize and iteratively experiment with a new color scheme. Put an element that will act as toggle somewhere on your website where it's easily accessible. It should invoke the theme_toggle()</code> function when clicked which we'll set up next. On my website it's a contrast icon located next to the page title, check it out. Though it can be anything, I recommend to use an anchor, like this: <a href="#" onclick="theme_toggle(); return false;">&#127763;</a> </code></pre> Toggle with JavaScript </a> </h3> Create a new JavaScript file, let's call it theme.js</code>. We need a function theme_set</code> to set the theme to light/dark, and theme_toggle</code> which toggles the theme. This will toggle the disabled</code> state for both style sheets depending on a truthy parameter, and stores the preference as well in the persistent localStorage</code> JavaScript store on the client. The toggle function queries the current state and sets the theme by negating it. It looks like this: function theme_set(toggled) { document.getElementById('style-light').disabled = toggled; document.getElementById('style-dark').disabled = !toggled; localStorage.setItem('theme-toggled', toggled ? '1' : ''); } function theme_toggle() { theme_set(!document.getElementById('style-light').disabled); } </code></pre> To restore the user preference we need to set the theme on page load, based on the stored value. Append the following line for this: theme_set(localStorage.getItem('theme-toggled')); </code></pre> To use this, load the script in the <head></code> block of your template after the style sheets, like this: <script src="/theme.js" type="text/javascript"></script> </code></pre> Theme style sheets </a> </h3> The toggle button is functional now, but you won't see anything change yet. We'll look at creating a second style sheet with alternative colors now. Generally speaking, the only thing that differs between these sheets will be colors. I highly recommend using SCSS</code></a> as a CSS preprocessor</a> for this to allow the usage of color variables, for easy theme variant creation. This guide won't cover installation</a> or usage</a> of SCSS</a>, though some static site generators such as Zola</a> have built-in support for this. I'll show how I've configured my colors for my template, but you can skip this section and use two raw CSS files as well. Create a _colors_light.scss</code> and _colors_dark.scss</code> file. (This</a> site uses Zola</a>, so I plase these in /sass/</code> for automatic processing.) Both should look similar to this, but having configured colors you choose for your respective themes: /* File: _colors_light.scss */ $color-text: #282828; $color-background: #fcfbf7; $color-border: darken($color-background, 50%); </code></pre> Moved all styles (used in any color variant) to _site.scss</code>, and used the color variables from above to adapt to the selected theme: /* File: _site.scss */ body { color: $color-text; background-color: $color-background; } </code></pre> Then create a site_light.scss</code> and site_dark.scss</code> sheet as the base, importing their respective color configuration and the shared site styles. /* File: site_light.scss */ @import "_colors_light"; @import "_site"; </code></pre> After processing these, you've created both a site_light.css</code> and site_dark.css</code> sheet. And yeah, it was that simple to keep it maintainable. Be sure to adapt the style sheet links in your template to the paths these new sheets are located at. Awesome! Your toggle should now work, and the preference should be remembered across page reloads. Now take the time to tweak the color variants. Smooth transitions </a> </h3> Once you're settled with a second color scheme and everything works, you can enable smooth transitioning between the two themes. We'll use CSS transitions</a> for this, which are awesome because they're simple and performant. In your shared styles, you need to configure what CSS properties will smoothly transition when changed. Imagine our _site.scss</code> sheet from before, to transition all properties that use variables we'll modify it to add the transition</code> property like this: /* File: _site.scss */ body { color: $color-text; background-color: $color-background; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; } </code></pre> It will take some work to transition every dynamic property on your site, but the result is great. Be sure to read the CSS transition documentation on MDN</a>, because there's a lot you can tweak and configure. Hurray! That's it, yes it was that simple. CSS is awesome for this as it doesn't require changes to the body of your website except for some imports. Now you can publish your freshened website and profit. Tips & Tricks </a> </h2> You can modify the style sheet imports and script to use dark colors by default, like on this website. Set the light scheme to be disabled</code> by default, and tweak</a> the script. You might want to leave your existing style sheet as-is, and just use a second sheet to override colors in the main sheet. Simply modify the script to only toggle the disabled</code> state for the overriding sheet, and query the overriding sheet instead in the theme_toggle</code> function. This isn't necessarily for light/dark themes and works perfectly fine for other color combinations as well. If desired, you could implement even more themes with a more advanced theme toggling script implementation. For additional inspiration you can take a look at styles for this</a> website. The result </a> </h2> To recap, here is an overview of what the changes should look like. Your templates <head></code> should contain something like: <head>  <link id="style-light" rel="stylesheet" href="/site_light.css" /> <link id="style-dark" disabled rel="stylesheet" href="/site_dark.css" /> <script src="/theme.js"></script>  </head> </code></pre> And your theme.js</code> file will look like: // File: theme.js /** * Set and apply the normal or toggled theme. * * @param toggled Truthy value to show toggled, normal otherwise. */ function theme_set(toggled) { document.getElementById('style-light').disabled = toggled; document.getElementById('style-dark').disabled = !toggled; localStorage.setItem('theme-toggled', toggled ? '1' : ''); } /** * Toggle the current theme. */ function theme_toggle() { theme_set(!document.getElementById('style-light').disabled); } // Apply selected theme, stored in localStorage item theme_set(localStorage.getItem('theme-toggled')); </code></pre> Along with your custom site_{light,dark}.css</code> sheets, this is all you need. As always: Hope this helps! _{:wq} Fix Windows 10 terminals, use a Linux terminal Mon, 08 Jul 2019 00:00:00 +0000 I feel handicapped in Windows terminals, here is why, and how I fixed it. </blockquote> </a> As a seasoned developer, I live in the terminal on Linux machines. Using a custom shell, vim</code> as text/code editor, git</code> through its CLI, dotfiles</code></a> to sync settings across devices. Everything is customized to my likings and styled with a nice color scheme. All of it in a dark, text-based window on my screen. Once you get used to your command-line tools, it's a serious joy to work with. It's a way to interface with your machine in a super-efficient and expressive manner. As you can probably imagine, it can be pretty frustrating when you don't have access to the tools you know and love. I sometimes use a Windows machine, for work or for building Windows-supported software. Sadly, I feel pretty handicapped on this operating system, to be frank. I can't get comfortable (and I'm super OCD for that matter). The overall experience always appears to be subpar to what I'm used to. Through some testing, I've located this to be a problem with the terminals on Windows. Though before the WSL</a> era, running Linux tooling on Windows was literally unthinkable, the situation has already improved a lot. Almost every Linux tool works somewhat out of the box. Installing and configuring your software using dotfiles</a> became a much better experience as well. The terminals on Windows still feel mediocre, it just isn't there yet. I should note that this isn't a problem for light terminal usage in Windows 10 these days. When invoking simple commands through SSH, everything works beautifully. This is about using heavily personalized tooling, and as you can probably tell, I'm somewhat of a power user in this regard. Though, this might become useful in the future. </blockquote> The problems </a> </h3> Throughout the past year, I've tried using a lot of different terminals after giving up on the terminal included with bash</code> on Windows. Some of them include: ConEmu, hyper, Cmder, Terminus & PuTTY, with various troublesome configuration attempts. I was never able to achieve the same experience as I've had on Linux or macOS, have always encountered weird shenanigans and was never really satisfied. Personally, I can generalize the usual problems to the following: color schemes are problematic, and usually, look different than its Linux counterpart</li> terminals on Windows appear sloooow, as a vim</code> user you expect things to be instant</li> garbled output, no proper ANSI</a> support</li> some bindings don't work</li> </ul> With some more specific examples throughout the different terminals: weird lines between characters, random underlined text</li> everything looks darker than it should be</li> color channels are flipped</li> some special characters are not rendered at all</li> no support for xterm-256color</code></a> at all</li> </ul> Simple solution </a> </h3> The solution to these problems honestly was quite simple, much more so than I initially thought: Just run a Linux terminal you're familiar with, on Windows. </blockquote> Yes, seriously. Why not use a Linux terminal, if you can't get Windows terminals to behave? Because this is Windows, not Linux? Nope! Some effort is required to get this up and running, which is what I'll guide you through in the following section. Don't worry, this won't be hard and shouldn't take more than 15 minutes. Linux terminal on Windows 10 </a> </h2> Before we start, make sure you're running an up-to-date Windows 10 instance, and you need to have administrator rights. That's all, and you're good to go. We'll be going through the following five easy steps: Enable WSL, install Ubuntu</a></li> Install XFCE terminal</a></li> Install X server</a></li> Run XFCE terminal</a></li> Create useful shortcuts</a></li> </ol> 1. Enable WSL, install Ubuntu </a> </h3> Alright. The first big part is to get Linux software running on Windows in the first place. Lucky for us, Windows has WSL</a> these days, making this a breeze. To start, you must enable WSL on your installation. Microsoft's own guide perfectly describes how this is done: docs.microsoft.com/en-us/windows/wsl/install-win10</a> Once that is finished, you should install a Linux distribution that provides Linux tooling we need. We'll be using the Ubuntu distribution for this, which is most commonly used. (You may choose a different distro, although some of the following commands will be different.) Ubuntu is installed through the Microsoft Store, also described in this</a> guide. WSL & Linux: check ☑️ Let's continue. 2. Install XFCE terminal </a> </h3> Now you can pick a Linux terminal you want to use. We'll be using the terminal included with the XFCE</a> desktop in this guide. It's a excellent versatile terminal, that is efficient, has superb color scheme support, and has all the options you need. Choosing some different you have experience with is fine as well, of course. To install XFCE terminal, we'll use the Ubuntu package manager. Open the start menu, and search for bash</code>. This should bring up a terminal window running Linux through WSL with a bash</code> shell. Invoke the following two commands: sudo apt update sudo apt install xfce4-terminal </code></pre> </a> You won't be able to use the installed terminal just yet, because Linux in WSL has no way to draw a window on your screen at this time. We'll fix that in the next step. A proper terminal: check ☑️ 3. Install X server </a> </h3> Graphical Linux systems commonly use the X</a> Window System (a.k.a. X11), used to manage and draw application windows on the screen. This system is very flexible & modular, which comes to good use in our case. X has various server implementations, not just for Linux but also for Windows, acting as a system for rendering windows. Random fun fact: you can even draw windows over the network with X, to an external machine. </blockquote> We need to install an X server on our Windows system and tell Linux in WSL to draw application windows to it. Guess what, this is the last installation step required for showing the terminal window! In this guide, we'll be using VcXsrv</a>, but other implementations should work similarly. Visit its project page, download and install it: sourceforge.net/projects/vcxsrv</a> Ability to render the terminal window on the screen: check ☑️ 4. Run XFCE terminal </a> </h3> Now comes the fun part: actually starting and using the terminal. You must start the X server we installed, tell applications in Linux to draw to it, and the terminal is ready to start. Note that this is required after each login. Start VcXsrv </a> </h4> First, start the VcXsrv server we have installed. An icon should have appeared on your desktop, or you might find it through the start menu (named 'Xlaunch'). It will then ask us for some settings through a wizard: Pick 'Multiple windows' for now, you can experiment with other options later. Leave the 'Display number' value at -1</code>. </a> Just 'Start no client' for now, which allows us to show any number of Linux application windows. You can always start the terminal directly through here at a later time. </a> We want to sync the clipboard to make life easier. </a> Click 'Next' one more time and start the server. Start the X server: check ☑️ Configure X server address </a> </h4> After that, the X server starts and a taskbar tray icon should appear. This is useful because it tells us the address the server is running at. Right-clicking allows you to kill the server as well. </a> Our X server is running at 0.0</code>, chosen by the server because we set the display number to -1</code>. We need the number before the .</code>, being 0</code> in this case, and have to configure this in the Linux environment. Open a bash</code> shell again through the Windows start menu to access the Linux environment. And set the DISPLAY</code> environment variable to :0</code>, for our X server address: export DISPLAY=:0 </code></pre> Configured the X server address: check ☑️ Start the terminal </a> </h4> This finally makes your system ready to actually start the terminal. Invoke the following command and see the magic happen: xfce4-terminal </code></pre> </a> Oh yes! There it is, the XFCE Linux terminal on your Windows system in all its glory. The terminal has sane defaults, but I recommend to take a quick look through its settings anyway to pick the desired color scheme. </a> Your terminal is now ready to use to its full potential. Happy hacking! 5. Create useful shortcuts </a> </h3> Okay, we're not quite done yet. As you might have noticed, these last few steps are required after each login, which is cumbersome. The X server must be started, and you need to set the DISPLAY</code> variable for each bash</code> shell you open from Windows. Though the following steps are not required, it is highly recommended you follow them. VcXsrv configuration file shortcut </a> </h4> It is possible to create a configuration file for VcXsrv, to instantly start the server without going through the wizard again and again. To do this, go through the wizard one last time. You might want to use 0</code> as 'Display number' (instead of -1</code>) to ensure you're always starting the server on a consistent address. On the final wizard screen, a 'Save configuration' button appears, click it and save it in an easy-to-access place such as your desktop as it will act as shortcut. </a> Double-clicking the created configuration file/shortcut should start the server, and a tray icon should appear. XFCE terminal shortcut </a> </h4> We can make starting the terminal easier by creating a custom shortcut. Right-click on your desktop or an Explorer window to create a new shortcut: </a> We'll start bash</code>, and automatically invoke the commands we ran before</a>. Fill in the following command in the 'Location' field for this shortcut: bash -c 'export DISPLAY=:0; xfce4-terminal -e bash' </code></pre> </a> Hit 'Next', pick a fun name and you're done. Double-clicking the shortcut you've created should automatically open a new proper terminal window. Hurray! Windows automatically spawns a window for the bash</code> command we're running through the shortcut, causing two windows to show up. This is annoying. Luckily we can minimize this unused window by default. Right-click on the shortcut, and hit 'Properties'. Set the 'Run' option to 'Minimized': </a> Not showing the bash</code> window at all is also possible with a workaround, but won't be covered in this guide. </blockquote> Tips & Tricks </a> </h2> Here are some tips, tricks, and notices you might find useful. You can extend the command used for the shortcut to automatically open a specific Linux program or to start an ssh</code> session. You can create multiple different shortcuts as well. Here's an example to immediately start a ssh</code> session I commonly use: bash -c 'export DISPLAY=:0; xfce4-terminal -e "bash -c \"ssh root@work.lan\""' </code></pre> You can set the DISPLAY</code> environment variable by default, by appending the export DISPLAY=:0</code> line to the ~/.bashrc</code> file through your bash</code> shell. You can use other graphical Linux software as well after setting the DISPLAY</code> environment variable. If Linux applications don't show up, and the shortcut immediately quits, you have probably configured an incorrect X server address or did not configure it at all. Review the Configure X server address</a> section. Here's a simple final checklist for all the steps to get a Linux terminal working: enable WSL, install Ubuntu</a></li> install XFCE terminal</a></li> install X server</a></li> for each login: start VcXsrv</a></li> for each bash</code> shell: configure X server address</a></li> for each bash</code> shell: start the terminal</a></li> </ul> Final thoughts </a> </h2> This solution isn't ideal. It takes effort to get up and running, and opening a new terminal isn't as easy as with other terminals. But for me, this is a solution that gives me the best terminal experience I've had on Windows. It works like a charm, and it feels super comfy. That is important. </a> Honestly, I find it kind of interesting, that almost every terminal on a Linux or macOS based system works flawlessly for any tooling with no configuration. However, on Windows, I don't see this quality, for something that seems so simple: rendering monospaced text on a screen. Let's hope the terminal situation on Windows improves. A lot has been getting better lately since WSL was introduced, and many more people started experiencing these itches than before since Linux on Windows became a viable thing. I wonder what the upcoming</a> Windows terminal will bring to the table. I won't be going back to Windows anytime soon myself, but at least this provides a terminal I'm happy with when I need to use a Windows machine. As always: Hope this helps! _{:wq}