g

gridlocdev's blog

I'm a software developer by trade, which means I run into issues with various small and tricky issues quite a bit. Here is where I post short-form guides for those things that I can't easily find anywhere else on the internet. Hopefully you may find some of these useful!

How to gather Zenity output in Lua

Zenity is a library that allows you to spawn standard linux GUI controls in GNOME using GTK. It's not a Lua library, but rather a Linux package that you can interop with using your Lua logic for more easier and effective user input in GNOME desktop environments.

It is incredibly powerful for spawning small and simple GUI controls, such as file selectors, calendar date pickers, informational boxes, system notifications, etc.

To call this from Lua, you might think of using os.execute(), however that function isn't intended for you to capture the output of the operation past a simple true or false code signifying that it spawned and closed it correctly.

Instead, use io.popen(), which is another standard library function intended for capturing output. Essentially, it spawns a new process, runs the command in that process, and returns the result.

Here is an example that spawns a simple textbox control, gets the user input, then prints the result:

local proc = io.popen("zenity --entry --text='What is your favorite color?'")
local result = proc:read("l")
proc:close()

print(result)

In the :read() function, a clean way to gather the Zenity output is to use l for line when the output is only one line, and use a for all when your GUI's user input spans multiple lines.

How to install Joycond on Fedora 35 Workstation for gaming on Steam

Joycond is a library that assists the hid-nintendo linux kernel driver that allows for support of Nintendo Switch joy-con / Switch Pro controllers for Linux.

TLDR: The process is relatively standard but with one exception before the standard installation instructions is to install the C++ compiler sudo dnf install g++ before going through the usual installation. The joycond library is primarily built with C++, so in order to compile it your machine will need to know how to read and process the code.

So, the commands would be:

  1. sudo dnf install g++
  2. Complete the installation instructions provided in https://github.com/DanielOgorchock/joycond#installation
  3. Reboot your computer

Now, Steam should recognize your controller. To use it, on your Switch Pro or Joy-con controller(s) press the - and + buttons simultaneously. This should sync your controller as a virtual controller, and allow it to work as a regular controller would!

Entering and exiting full-screen in YouTube with Vimium

Vimium is a browser extension that lets you browse the internet in web browsers with the keyboard, and provides a number of keyboard shortcuts to do so.

But, in the odd chance the web page supplies its own set of keyboard shortcuts, the extension and the page's shortcuts can conflict if using the same keys. One of these cases is the YouTube player, so if you'd like to enter/exit full-screen on YouTube while keeping the extension enabled, this article is for you!

YouTube and Vimium share two keybinds, f and esc, which has unintentional side-effects when you try to enter full-screen with f and exiting out of full-screen with esc.

To do default YouTube commands with Vimium, the extension features an insert mode (using the i key); which lets you use the page's keybinds instead. So, to open the YouTube full-screen player the command would be i, then f. But, a UI label still appears overlaying in the corner in front of the full-screen content, which I found distracting.

To be able to close this "Insert" overlay without also exiting out of full-screen, I created a custom key binding to alt + i in Options -> Custom key mappings:

mapkey <a-i> <c-[>

After adding this to your key bindings, make sure to hit Save to apply those to the extension!

Also: See https://github.com/philc/vimium#keyboard-bindings if you're curious on what these keybindings mean.

So basically, to enter full screen, you would do use these three key commands in order:

  1. i

  2. f

  3. alt+i

I chose alt + i as it's pretty ergonomic, as the thumb is pretty close to the alt key already when hitting the f key.

Markdown Renderer using Svelte, TailwindCSS, and Marked

Markdown Renderer using Svelte, TailwindCSS, and Marked

Here's an example of a simple markdown renderer using Svelte, TailwindCSS, and Marked

Step 1 - Create a Svelte project

The two easiest options are either using Vite or using Rich Harris's default Svelte template

  1. npm init vite@latest -- --template svelte-js
  2. npx degit sveltejs/template

Step 2 - Install Marked

Install Marked, a popular JavaScript package that converts markdown strings to HTML

npm install marked

Step 3 - Install Tailwind

There are two options here as well, you can run through the Tailwind official guide or use the svelte-add npm package

  1. Install Tailwind into Svelte: https://tailwindcss.com/docs/guides/sveltekit
  2. npx svelte-add tailwindcss

Step 4 - Install and configure @tailwindcss/typography

Install the Typography package which has built-in support for styling Markdown

npm install @tailwindcss/typography

Inside your tailwind.config.js file, add the following line into the plugins block

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Step 5 - Load all of the packages from package.json

Run a npm install to load all of the missing Svelte and/or Tailwind packages from package.json into the node_modules folder.

Step 6 - Render some content!

In the @tailwindcss/typography library, the class prose is a wrapper class that applies styles to your markdown content.

In the example below, note a few things:

  • Create a wrapper element around your html render with this class on it to enable automatic default styles.
  • If you'd like to see some content, create an element with markup text in it in the form of a string, and feed it to {@html} in the marked library's parse() function.
<script>
  import { marked } from "marked";

  const content = 
  `
  # Welcome to my Markdown site! 

  _Here's a list of my favorite fruits:_

    | Fruit | Rating |
    | --- | --- |
    | Banana | 10 |
    | Apple | 10 |
    | Cherry | 10 |
    `;
</script>

<main class="m-5">
  <article class="prose">
    {@html marked.parse(content)}
  </article>
</main>