How to copy text from one pane – MacOS/Tmux/Alacritty


My problem? I only want to copy text from one tmux pane, not across two.

But I was finding that my mouse was failing me, and I knew there had to be a better way than just closing out my panes and only having one open. My journey on understanding terminals, shells, editors, and how to use them correctly has been rocky, but I have been feeling in a good place lately. The current setup that I am using is bash shell (starship shell prompt for that added sparkle), Alacritty terminal, Neovim editor, and Tmux for running multiple terminals. I had gotten this all configured, which probably took too much time. Debugging your developer setup is a considerable learning experience, but developers (meaning me) sometimes (all the time) make it more complicated than it needs to be. I probably didn’t need to throw in attempting to theme everything too, but I like my consistent look.

In my search to figure out how to copy the text on one pane, some Linux solutions were close to what I needed but not 100% the way there. This setup got me all the way there with a solution that should fit nicely in my vim workflow.

The suggested Linux setup is a good start but does not work great for MacOS

 bind-key -T copy-mode-vi v send-keys -X begin-selection
 bind-key -T copy-mode-vi y send-keys -X copy-selection
 bind-key -T copy-mode-vi r send-keys -X rectangle-toggle

For MacOS, add the following onto your tmux configuration (for ex. at ~/.tmux.conf). This solution came from a superuser post from user jeremysprofile.

setw -g mode-keys vi
set -g set-clipboard off
bind-key -T copy-mode-vi v send-keys -X begin-selection
# bind y key in copy mode to select and copy to system clipboard
bind-key -T copy-mode-vi y send-keys -X copy-pipe-and-cancel "pbcopy"
bind-key -T copy-mode-vi MouseDragEnd1Pane send-keys -X copy-pipe-and-cancel "pbcopy"

The configuration will add some vi key bindings, and then to supercharge tmux copy mode. For copying and pasting, reach for typical vim keybindings. Start with v to select the text, then y to copy/yank the text. Then the text is in your copy buffer and ready for pasting.

Let’s see our new bindings in action.

Hit your terminal, start up tmux (tmux source ~/.tmux.conf ) and make sure to refresh your config if you already have tmux open.

Split your pane (tmux default keys C-b ")

Untitled

Load up some text on either side. I am looking at two readme files, one that I loaded up in vim and one that is just cat on the terminal.

Untitled

Now attempt to use your mouse to highlight some text. You will notice that both sides will highlight.

Untitled

Frustrating if you want the output from just the right side! Let’s use the new keybindings we added to the tmux configuration instead.

Switch over to tmux scroll mode (C-b [), use your arrow keys to move around, and when you are on the text that you want to copy, use v to make your selection.

Untitled

What’s this? Only text selected on one side? Perfect! Copy the text using y , and it is ready to put where you need it. In my case, moving to my left pane (C-b then left arrow ), and then pasted (vim p) into my other readme.

Untitled

Now we have a reusable, memorable solution for grabbing text in a single tmux pane!

How to: Mastodon Profile Verification for WordPress Website

Are you part of the twitter migration? Me too! I chose Mastodon as my social app of choice, and ruby.social as my community of choice.

Learning Mastodon takes time, and I am right there with you. There is one thing that I can be assistance with, helping you figure out how to verify your website link in your profile. I am on WordPress, because it is a cool content management system, allows me as a non-frontend dev to have something that looks halfway decent with a minimal amount of work, and well I believe in dogfooding.

Head on over to your Mastodon profile, and click edit profile

Author’s picture with the option to click “Edit profile”

In your Mastodon Profile metadata section, add in your personal website, then Save changes. Notice the Verification section off to the right of the metadata options? Copy your customized verification link.

You can verify yourself as the owner of the links in your profile metadata. For that, the linked website must contain a link back to your Mastodon profile. The link back must have a rel="me" attribute. The text content of the link does not matter. 

Mastodon settings/profile
Mastodon Verification section

Next head to your website and add the link on your site anywhere. For example in a footer/header section where you might have other social links. For my WordPress site, I added a Custom HTML block in my sidebar widget section with my Mastodon profile link.

Screengrab of my default Sidebar section, with the Custom HTML block

To check that everything is correct for verification, check out your page source. As with many things front end, checking on the raw HTML (for us the div tag) is the best way to see what the link actually is using in its metadata. The important part for Mastodon verification is the rel="me" attribute. When I look at my page source, I see that it is there

Page source of christine-seeman.com view in Chrome Developer Tools

That’s it! It might take a bit for your verification to show up on your profile (caching/propagation take time) but you should see that sweet green highlighting eventually to let everyone know that you really do control access to that link.

Oh, hello again Vim

aka How to Install vim-plug in Neovim


Me and Vim have a love/hate relationship.

I love using it… until I remember I remember zero keybindings annnnd then I have to search multiple articles every time I want to do anything in it. Especially leave it.

But here I am again, trying to do development in Vim.. again… for reasons. Mostly it is because sometimes you just want something more lightweight for coding. Maybe you find yourself in a different language then your normal one, or you just want to bust out a tutorial but you don’t want to have to make a brand new project. Or maybe you just want to see what all the fuss is about. Whatever the reason, it feels like there is a certain amount of knowledge you need even to get started. Even to install the darn thing.

So, there I was attempting to push some React into my backend loving brain, when I started down a rabbit hole.

I opened the code examples in Neovim (which is Vim, but with some spice) but then I realized I probably would want to be able to do some searching through the code examples. To do that you need Plugins. Then if you want those, you probably want a Plugin Manager... and that there was where my rabbit hole took me. What manager? How do I install the manager? Wait, I need Python? And I am out of date?!? Oof and all I was trying to do was attempt a React tutorial 🤷.

So upon attempting to open my Neovim editor today with multiple errors from my ill-fated and aborted plugin manager journey from yesterday, I was able to get straightened out with some help from Christian. He was able to get me straightened out AND I was even able to get Plugins, and a Plugin Manager installed with much less fuss.

My main problem was installing vim-plug, but into Neovim, not plain old Vim. Whenever you do something custom or slightly different (I’m looking at you bash instead of zsh) it always seems like that exponentially adds to the amount of articles you are going to have to wade through to find the answer.

What I needed to do was create an init.vim file (a configuration file just for Neovim).

touch ~/.config/nvim/init.vim

And then install vim-plug

curl -fLo ~/.config/nvim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

But the important part was where I was putting it, in the .config folder where my configuration file (init.vim) is at, and into the autoload directory.

Then you are all ready to install plugins to your heart content in Neovim.

Create yourself a new nifty ~/.config/nvim/vim-plug/plugins.vim file. For ex. start with adding a different default file explorer plugin NERDTree

call plug#begin('~/.config/nvim/autoload/plugged')

    " File Explorer
    Plug 'scrooloose/NERDTree'

call plug#end()

With your separate plugins file ~/.config/nvim/vim-plug/plugins.vim you need to tell your init.vim file to use (or source) this file. You can do that by adding the following into init.vim

source $HOME/.config/nvim/vim-plug/plugins.vim

Now let’s install and use this plugin.

Open up Neovim, in your terminal type in nvim. Check on your plugins status, one plugin was added into your plugins file but we haven’t actually installed it yet.

So with Neovim open, hit Esc to go into Command mode. Now this may not be needed but if you are in any other state this like Visual mode this gets you back so you can actually put in commands. From there you run

:PlugStatus

Let’s get that plugin installed now, go back into Command mode (hit Esc) and then run

:PlugInstall
View of vim-plug installing plugins

That’s it. The plugin is installed 🙌🏼. You can now update :PlugUpdate your plugins when you like, and go wild and install some more too.

I wanted to check on how NERDTress was working, so I went back to my React tutorial directory and low and behold I have files! To use my newly installed plugin, I opened up one of my html files, then typed out :NERDTree

Now back to my React learning…phew.