DEV Community: Boone Cabal

How to Make DigitalOcean Markdown Vim Plugin

Boone Cabal — Thu, 05 Jun 2025 22:02:45 +0000

Introduction

Welcome to the world of vim plugins. In this tutorial you will create a plugin for generating markdown–specifically, DigitalOcean markdown–by exposing a set of insert-mode mappings for efficient markdown creation. Additionally, you will create a function that uses a vim API to search and reposition the cursor.

Prerequisites

You should be comfortable using a Linux terminal. Have a look at An Introduction to the Linux Terminal.
Experience using vim and some knowledge about creating mappings. Here is a good resource for that: How To Use Vim for Advanced Editing of Plain Text or Code on a VPS.

Setting Up Plugin Files and Directories

In this section you will install vim and set up all the requisite files and directories. Let’s begin by installing vim.

Step One -- Installing Vim

Install vim using the following command:

sudo apt update
sudo apt install vim-gtk3

You can verity the vim version using the following command:

vim --version

Step Two -- Creating `.vimrc` and `.vim` Directories

You need a .vimrc file and a .vim/plugin directory structure. .vimrc is a configuration file with settings like mappings, syntax highlighting, and line numbers. Let’s create it first.

Change to your home directory using the following command:

cd

Use the ls -al command to look for .vimrc and .vim. If you don’t see one or the other, you will create them. Let’s assume you don’t see them, so you’ll create them. Use the following command to create .vimrc:

touch .vimrc

Usemkdir with a -p flag to create both the .vim and .vim/plugin folders:

mkdir -p ~/.vim/plugin

Your plugin goes in ~/.vim/plugin and can be composed of a single file or a directory with multiple files. Your plugin will have multiple files, so create a directory for it using the following command:

mkdir ~/.vim/plugin/do_markdown

Step Three –- Creating and Sourcing Plugin File

Change to your plugin directory and create your plugin file do_markdown.vim using the following commands:

cd ~/.vim/plugin/do_markdown
touch do_markdown.vim

To activate your plugin every time vim starts up, you need to modify .vimrc and source it. Edit .vimrc using the following command:

vim ~/.vimrc

Add the following line of code to the end of the file:

source ~/.vim/plugin/do_markdown/do_markdown.vim

Save and exit vim using the :x command Good job! You just created all the plugin boilerplate.

Building the Plugin

Markdown is a language used to format text documents with basic styles like headings, bold and italic, and block quotes. For instance, you can make text bold by surrounding–or bracketing–it with double asterisks as in **Alert**.

DigitalOcean (DO) has its own cool looking markdown that works well with formatting code blocks and callouts. This plugin will generate DO markdown.

Note: This plugin only generates a subset of the DO markdown. Feel free to add the rest!

This plugin creates two types of markdown: brackets and blocks. Brackets surround a string of text with symbols that apply formatting to it, and blocks are multiline sections of text enclosed in symbols. Let’s tackle brackets first.

What Are Mappings?

Your plugin exposes a collection of mappings. A mapping is a shortcut that automates some repetitive task. Working efficiently is all about reducing keystrokes, and that is exactly what mappings do for you. As you know, vim has multiple modes of operation: insert, normal, command, and visual. Well, you can create mappings for each mode: imap, nmap, cmap, and vmap. For simplicity, this article refers to all of these generically as mappings.

Step One -- Creating Bracket Mappings

It’s tedious to repeatedly type closing brackets, so your plugin will generate the closing bracket for you and move the cursor between the brackets. Change to your plugin’s directory and edit your plugin file using the following commands:

cd ~/.vim/plugin/do_markdown
vim do_markdown.vim

Enter the following code to the bottom of the file:

inoremap ** ****<left><left>

The following table shows what happens when you test the imap by entering insert-mode and typing **:

Note: The _ character represents the cursor location.

Type:	Result
**	_

As the table illustrates, when you type ** in insert-mode, the mapping inserts four * characters and places the cursor between both pairs.

A Problem With This Map

There is a problem with this imap: Once you finish typing Note: the cursor remains between the brackets as follows:

**Note:_**

Now you have to use <esc>A to move past the closing bracket. Wouldn’t it be easier if instead you could stay in insert-mode , type ;;, and achieve the same thing--moving the cursor to the end of the line in insert-mode? Fortunately, you can create an imap to do this. The problem with using <esc>A is you have to move your hand off the home row, reach up and press <esc>, reposition your hand on the home row, then do a <shift>a. With an imap all you do is move your right pinky finger over slightly and press ;;. Add the following imap to your plugin:

inoremap ;; <esc>A

The following table illustrates the result of using imap ;; in conjunction with the bracket imap **. Begin by entering insert-mode.

Step	Type:	Result
1.	**	_
2.	Note:	Note:_
3.	;;	Note:_

Observe the position of the cursor _ during each step. When you test these macros, you’ll see what I mean firsthand.

There is another problem to solve: After typing ;; you still have to tap <space> at the end. If you type ** in insert-mode, and then type "Don't forget to save", this is what will happen:

**Note:**Don't forget to save

It's somewhat hard to notice, but there is no whitespace before "Don't". We need a space after it.

**Note:** Don't forget to save

To insert a space after **Note:**, update the imap as follows:

inoremap ** ****<space><esc>2hi

Mappings

Finally, here are all of the bracket imaps in this plugin. Copy them into your plugin file.

map	Type	Result
inoremap **2hi	**	_
inoremap `\``	`	`_\`
inoremap _ __	_	__
inoremap ^ <^><^>3hi	^	<^>_<^>

Save and exit using the following vim command:

:wq

Updated `do_markdown.vim`

" UTILITIES
inoremap ;; <esc>A
nnoremap <F4> <esc>:w<cr>:so %<cr>

" BRACKETS
inoremap ** ****<space><esc>2hi
inoremap ` ``<space><left><left>
inoremap _ __<space><left><left>
inoremap ^ < ^><^><space><esc>3hi

Step Two – Creating Block Templates and Mappings

Now you’ll create your block imaps, which generate multiline blocks of text using simple parameterized templates. Consider the following DO markdown code block:

vim test.py

You will create a template that substitutes XXX in sections that you will edit. Create a template named code.txt using the following command.

vim code.txt

Enter the following text:

...XXX
XXX
...

Save and close the file using the following vim command:

:wq

Reopen your plugin file using the following command:

vim do_markup.vim

Now, you will create an imap that reads the template file into the active buffer. Add this to your plugin:

inoremap code<cr> <esc>:read code.txt<cr>kdd

Note: The normal-mode kdd command deletes the blank line that gets added when you read file contents in.

Test it by entering insert-mode and typing code<cr>. It should dump the contents of code.txt at the cursor.

Updated `do_markdown.vim`

" UTILITIES
inoremap ;; <esc>A
nnoremap <F4> <esc>:w<cr>:so %<cr>

" BRACKETS
inoremap ** ****<space><esc>2hi
inoremap ` ``<space><left><left>
inoremap _ __<space><left><left>
inoremap ^ < ^><^><space><esc>3hi

" BLOCKS
inoremap code<cr> <esc>:read code.txt<cr>kdd

Here is the most tedious part. You need to create all of the templates for all of the block imaps. Here are the download links for each file:

code.txt
out.txt
lab.txt
crp.txt
ecod.txt
elab.txt
eout.txt
ecpr.txt
nowa.txt
note.txt
warn.txt
info.txt
drft.txt
col.txt
dets.txt

You will create the rest of the block imaps later in the tutorial.

Step Three -- Making Function to Load Templates

You’re going to make a lot of these imaps, so it wouldn’t hurt to use the following function to avoid code duplication. Add this to your plugin:

function LoadTemplate(template_filename)

  silent execute 'read ' . a:template_filename
  normal kdd

endfunction

Update your imap code<cr> to invoke LoadTemplate as follows:

inoremap code<cr> <esc>:call LoadTemplate('code.txt')<cr>

This is the basic structure you will use to create all of the block imaps in this plugin.

Updated `do_markdown.vim`

" UTILITIES
inoremap ;; <esc>A
nnoremap <F4> <esc>:w<cr>:so %<cr>

function LoadTemplate(template_filename)

  silent execute 'read ' . a:template_filename
  normal kdd

endfunction

" BRACKETS
inoremap ** ****<space><esc>2hi
inoremap ` ``<space><left><left>
inoremap _ __<space><left><left>
inoremap ^ < ^><^><space><esc>3hi

" BLOCKS
inoremap code<cr> <esc>:call LoadTemplate('code.txt')<cr>

Step Four – Creating Cursor Movement Function

After inserting the template file contents into the buffer, the next step is to move the cursor to the next XXX and replace it with the cursor in insert-mode. To accomplish this, you are going to create a function named ToEndOrNext that does the job of your imap ;; plus the aforementioned functionality. Below is the pseudo code for it:

If there is no template_param in the file
  Move cursor to end of line in insert-mode
Else
  Move cursor to next template_param
Replace template_param with cursor in insert-mode

Add the following code to your plugin:

function ToEndOrNext(template_param)

  if search(a:template_param, 'n')
    execute "normal! /" . a:template_param . "\r"
    normal diw
    startinsert!
  else
    startinsert
  endif

endfunction

This uses the search VimL API to search for template_param. Using the n option allows you to search for a string without moving the cursor to the match–a look-ahead search, if you will.

Let’s test it. Save and source the plugin using the following vim commands:

:w
:so %

Create a new buffer using the following vim command:

:new

Enter insert-mode and type code<cr>. This will read in the code.txt template. Now, use the following vim command to test ToEndOrNext:

:call ToEndOrNext('XXX')

The cursor should have replaced the first XXX. Use :call ToEndOrNext('XXX') again. The next XXX should be replaced by the cursor. At this point both XXX strings should be gone. Now test ToEndOrNext by moving the cursor to the middle of a line, enter insert-mode, then use <esc>:call ToEndOrNext('XXX')<cr>. The cursor should move to the end of the line in insert-mode.

Next, update your imap ;; to invoke ToEndOrNext as follows:

inoremap ;; <esc>:call ToEndOrNext('XXX')<cr>

Almost there. After you load a template using imap code<cr>, you want it to move to the next XXX and replace it with the cursor in insert-mode. Hence, you call ToEndOrNext from within LoadTemplate.

Updated `do_markdown.vim`

" UTILITIES
inoremap ;; <esc>:call ToEndOrNext('XXX')<cr>
nnoremap <F4> <esc>:w<cr>:so %<cr>

function LoadTemplate(template_filename)

  silent execute 'read ' . a:template_filename
  normal kdd

  call ToEndOrNext('XXX')

endfunction

function ToEndOrNext(template_param)

  if search(a:template_param, 'n')
    execute "normal! /" . a:template_param . "\r"
    normal diw
    startinsert!
  else
    startinsert
  endif

endfunction

" BRACKETS
inoremap ** ****<space><esc>2hi
inoremap ` ``<space><left><left>
inoremap _ __<space><left><left>
inoremap ^ < ^><^><space><esc>3hi

" BLOCKS
inoremap code<cr> <esc>:call LoadTemplate('code.txt')<cr>

Tying It All Together

The final step is to create the rest of your block imaps. Remember when you downloaded all of the template files earlier? Now it is only a matter of calling your LoadTemplate function, passing the name of the template file. Here is your complete plugin with the block imaps and everything else:

Blocks

inoremap code<cr> <esc>:call LoadTemplate('code.txt')<cr>

code.txt

..._
XXX
...

inoremap out<cr> <esc>:call LoadTemplate('out.txt')<cr>

out.txt

...
[secondary_label Output]
_
...

inoremap lab<cr> <esc>:call LoadTemplate('lab.txt')<cr>

lab.txt

...
[label _]
XXX
...

inoremap cpr<cr> <esc>:call LoadTemplate('crp.txt')<cr>

crp.txt

...custom_prefix(_)
XXX
...

Environment Variations

inoremap ecod<cr> <esc>:call LoadTemplate('ecod.txt')<cr>

ecod.txt

..._
[environment XXX]
XXX
...

inoremap elab<cr> <esc>:call LoadTemplate('elab.txt')<cr>

elab.txt

...
[environment _]
[label XXX]
XXX
...

inoremap eout<cr> <esc>:call LoadTemplate('eout.txt')<cr>

eout.txt

...
[environment _]
[secondary_label Output] XXX
...

inoremap ecpr<cr> <esc>:call LoadTemplate('ecpr.txt')<cr>

ecpr.txt

...custom_prefix(XXX)
[environment XXX]
XXX
...

Callouts

inoremap nowa<cr> <esc>:call LoadTemplate('nowa.txt')<cr>

nowa.txt

<$>[_]
**XXX:** XXX
<$>

inoremap note<cr> <esc>:call LoadTemplate('note.txt')<cr>

note.txt

<$>[note]
**Note:** _
<$>

inoremap warn<cr> <esc>:call LoadTemplate('warn.txt')<cr>

warn.txt

<$>[warning]
**Warning:** _
<$>

inoremap info<cr> <esc>:call LoadTemplate('info.txt')<cr>

info.txt

<$>[info]
**Info:** _
<$>

inoremap drft<cr> <esc>:call LoadTemplate('drft.txt')<cr>

drft.txt

<$>[draft]
**Draft:** _
<$>

Formatting

inoremap col<cr> <esc>:call LoadTemplate('col.txt')<cr>

col.txt

[column
_
]
[column
XXX
]

inoremap dets<cr> <esc>:call LoadTemplate('dets.txt')<cr>

dets.txt

[details _
XXX
]

Updated do_markup.vim

" UTILITIES
inoremap ;; <esc>:call ToEndOrNext('XXX')<cr>
nnoremap <F4> <esc>:w<cr>:so %<cr>

function LoadTemplate(template_filename)

  silent execute 'read ' . a:template_filename
  normal kdd

  call ToEndOrNext('XXX')

endfunction

function ToEndOrNext(template_param)

  if search(a:template_param, 'n')
    execute "normal! /" . a:template_param . "\r"
    normal diw
    startinsert!
  else
    startinsert
  endif

endfunction

" BRACKETS
inoremap ** ****<space><esc>2hi
inoremap ` ``<space><left><left>
inoremap _ __<space><left><left>
inoremap ^ < ^><^><space><esc>3hi

" BLOCKS
inoremap code<cr> <esc>:call LoadTemplate('code.txt')<cr>
inoremap out<cr> <esc>:call LoadTemplate('out.txt')<cr>
inoremap lab<cr> <esc>:call LoadTemplate('lab.txt')<cr>
inoremap cpr<cr> <esc>:call LoadTemplate('crp.txt')<cr>
inoremap ecod<cr> <esc>:call LoadTemplate('ecod.txt')<cr>
inoremap elab<cr> <esc>:call LoadTemplate('elab.txt')<cr>
inoremap eout<cr> <esc>:call LoadTemplate('eout.txt')<cr>
inoremap ecpr<cr> <esc>:call LoadTemplate('ecpr.txt')<cr>
inoremap nowa<cr> <esc>:call LoadTemplate('nowa.txt')<cr>
inoremap note<cr> <esc>:call LoadTemplate('note.txt')<cr>
inoremap warn<cr> <esc>:call LoadTemplate('warn.txt')<cr>
inoremap info<cr> <esc>:call LoadTemplate('info.txt')<cr>
inoremap drft<cr> <esc>:call LoadTemplate('drft.txt')<cr>
inoremap col<cr> <esc>:call LoadTemplate('col.txt')<cr>
inoremap dets<cr> <esc>:call LoadTemplate('dets.txt')<cr>

How I Use This Plugin

I use this plugin from VS Code. Using an extension called Markdown Preview, I preview a markdown file. Files dock to the top by default. Next, I open the markdown file in vim from a terminal, which docks to the bottom by default. Now, any time I change and save the markdown file in vim, the preview updates to reflect the change.

I typically use the following normal- and insert-mode mappings to quickly save the file.

nnoremap ;s :w<cr>
inoremap ;s <esc>:w:<cr>

Conclusion

You’ve learned a little bit about mappings and VimL. I hope you use this knowledge to experiment with your own vim plugins. Have fun, friend.

Changing Keyboard Layouts - Let's Build a Browser Extension

Boone Cabal — Thu, 05 Jun 2025 18:36:33 +0000

Introduction

Imagine sitting at a shared computer, your fingers poised to type in Colemak, only to realize the system is locked to QWERTY. Frustrating, right? For Colemak users, who enjoy its ergonomic benefits, this is a common hurdle in environments with strict IT policies. Enter "To-Colemak," a browser extension I'm developing to let you switch from QWERTY or Dvorak to Colemak directly in your browser, no system changes needed.

In this article, I'll guide you through building "To-Colemak," from its core functionality to its Model-View-Controller (MVC) architecture, testing setup, and installation. The repository is available here. Whether you're a Colemak enthusiast or a curious developer, let's create a tool to make typing a breeze!

Prerequisites

This article assumes a basic understanding of HTML, CSS, and JavaScript, along with a general idea of how browser extensions work. If you're new to these, check out these resources:

HTML & CSS: Your Gateway to Building Stunning Websites
Browser Extension - Extension Architecture
How to Rapidly Build Browser Extensions With AI (An article I wrote that you might find helpful!)

How It Works

The core idea is simple: activate the extension via its popup menu (by clicking the extension icon) or the Ctrl+L shortcut. Once active, text typed into input fields or textareas on a webpage converts to the Colemak layout.

Here's a typical use case:

First, click the extension icon to open the popup, and then check the "Enable Key Conversion" checkbox.

Last, click any text input field on a webpage.

Notice the red border around the active input field; when you type, you're using the Colemak layout!

Note: This extension is a work in progress. Earlier versions may not fully support elements like contenteditable divs, iframes, or inputs in shadow DOM. Future versions may use MutationObservers or postMessage to address these challenges.

Project Structure

Here's the directory structure for the project:

📂 doc
  📄 article.md
  📄 README.md
📂 icons
  📄 keyboard128.png
  📄 keyboard16.png
  📄 keyboard24.png
  📄 keyboard32.png
  📄 keyboard64.png
📂 src
  📄 background.js
  📄 content.js
  📄 controller.js
  📄 model.js
  📄 popup.html
  📄 popup.js
  📄 view.js
📂 tests
  📄 model.test.js
  📄 view.test.js
📄 .gitignore
📄 .hintrc
📄 manifest.json
📄 package-lock.json
📄 package.json

Note: The 11.4.1, jest, and test entries in the original structure were removed as they seemed to be placeholders or unrelated to the project.

Using the Model-View-Controller (MVC) Architecture

The extension uses the Model-View-Controller (MVC) pattern for a clean separation of concerns, making the code modular and testable:

Model (model.js): Manages the extension's state (e.g., whether conversion is active, the source layout like QWERTY or Dvorak) and stores keyboard layout mappings.
View (view.js): Handles DOM manipulations, such as highlighting active input fields with a red border or displaying overlay messages for state changes.
Controller (controller.js, content.js): Acts as the intermediary, listening for user interactions (e.g., key presses) or browser events, processing them with Model data, and updating the View.

For example, when the user toggles the extension via the popup (View), the Controller updates the Model's isActive state and saves it to storage. The View then listens for this change and adds a red border to the active input field.

The key conversion logic lies in the convertToColemak function in the Controller:

function convertToColemak(event) {
  // Skip conversion if extension is inactive or modifier keys are pressed
  if (!Model.isActive || event.ctrlKey || event.altKey || event.metaKey) return;

  // Map the pressed key to its Colemak equivalent
  const colemakKey = Model.keyboardLayout[event.key];
  if (!colemakKey) return; // Exit if no mapping exists

  event.preventDefault(); // Prevent default keypress behavior
  let inputElement = event.target;
  let handled = false;

  // Traverse DOM to find input or contentEditable element
  while (inputElement) {
    if (inputElement.isContentEditable) {
      // Insert text into contentEditable elements
      document.execCommand("insertText", false, colemakKey);
      handled = true;
      break;
    } else if (inputElement.tagName === "INPUT" || inputElement.tagName === "TEXTAREA") {
      // Insert text into standard input or textarea
      const start = inputElement.selectionStart;
      const end = inputElement.selectionEnd;
      inputElement.value = inputElement.value.slice(0, start) + colemakKey + inputElement.value.slice(end);
      inputElement.setSelectionRange(start + colemakKey.length, start + colemakKey.length);
      handled = true;
      break;
    }
    inputElement = inputElement.parentNode;
  }

  // Fallback: insert text if no specific input was found
  if (!handled) {
    document.execCommand("insertText", false, colemakKey);
  }
}

This function:

Checks if the extension is active and no modifier keys (Ctrl, Alt, Meta) are pressed.
Maps the pressed key to its Colemak equivalent using the Model's keyboard layout.
Prevents the original keypress and inserts the Colemak key into the active input field or contenteditable element.
Updates the cursor position for smooth typing.

Note: document.execCommand is deprecated. Future versions may explore the Clipboard API or InputEvent for better compatibility. For more details, check the repository.

Building and Running Unit Tests

Unit testing ensures the extension's reliability. I chose Jest for its simplicity, built-in mocking, and widespread use in JavaScript projects.

Setting Up the Development Environment

To set up the testing environment (example for Windows using Conda):

Install Miniconda (or Anaconda) if not already present.
Open the Anaconda Prompt (or a Conda-configured terminal).
Create a new Conda environment with Node.js:

conda create -n to-colemak-env nodejs
conda activate to-colemak-env

Navigate to the project directory and install Jest:

npm install --save-dev jest

Note: Non-Windows users can use nvm or a direct Node.js installation instead of Conda.

Writing and Running Tests

Tests are organized by component:

tests/model.test.js: Verifies state management and layout settings in the Model.
tests/view.test.js: Tests UI updates, such as border styling, by simulating DOM interactions with mock elements (e.g., document.createElement("input")).

Here's an example test from view.test.js:

test("handleFocus does not set borderColor if Model is inactive", () => {
  Model.isActive = false; // Set the model to inactive
  const input = document.createElement("input"); // Create a mock input element
  View.handleFocus({ target: input }); // Call the function under test
  expect(input.style.borderColor).toBe(""); // Assert that the border color was not changed
});

This test ensures View.handleFocus only applies a border color when Model.isActive is true.

To run the tests (from the project root with the Conda environment activated):

npm test

For detailed output:

npx jest --verbose

Expected output:

(to-colemak-env) C:\Users\unity1\dev\To-Colemak>npx jest --verbose
 PASS  tests/model.test.js
  Model
    √ setLayout sets QWERTY mapping (6 ms)
    √ setLayout sets Dvorak mapping
    √ setActive updates isActive and persists (2 ms)
    √ load sets state from storage (1 ms)

 PASS  tests/view.test.js
  View
    √ handleFocus sets borderColor to red if active (10 ms)
    √ handleBlur resets borderColor if active (1 ms)
    √ updateHighlight highlights active input (3 ms)
    √ showToggleMessage creates and removes overlay (22 ms)
    √ handleFocus does not set borderColor if Model is inactive (1 ms)
    √ typing in textbox converts keys to Colemak when Model.isActive is true (5 ms)

Test Suites: 2 passed, 2 total
Tests:       10 passed, 10 total
Snapshots:   0 total
Time:        1.035 s, estimated 4 s
Ran all test suites.

Note: The test suite provides basic coverage. Future tests could cover edge cases like special characters or complex DOM structures.

Installing the Extension for Development

To test "To-Colemak" during development, load it as an unpacked extension in a Chromium-based browser (e.g., Chrome, Brave, Edge):

Open your browser.
Navigate to the extensions page:
- Chrome/Brave: chrome://extensions
- Edge: edge://extensions
Enable "Developer mode" (top-right toggle).
Click "Load unpacked" and select the project folder ( Hawkins the manifest.json file).
Pin the extension to the toolbar for easy access (via the puzzle piece icon).

Note: This extension is designed for Chromium-based browsers. Firefox support is planned for a future release.

Testing the Extension Manually

After installation, verify:

The overlay message ("Colemak Conversion Enabled/Disabled") appears when toggling the extension via the popup or Ctrl+L.
The focused textbox border is highlighted red when active and resets when inactive or focus is lost.
Typing in QWERTY (or Dvorak, if selected) converts to Colemak in text fields when active.

Conclusion

We've explored "To-Colemak," a browser extension that brings the Colemak keyboard layout to environments where system-level changes are restricted. By leveraging the MVC architecture, robust unit tests, and browser capabilities, it empowers users to type comfortably in challenging settings. Whether you're a Colemak enthusiast or a budding developer, I hope this guide inspires you to build your own extensions.

Explore the repository, try the extension, or contribute by tackling tasks like improving shadow DOM support or adding new layouts in the GitHub issues. Happy typing!

How to Rapidly Build Browser Extensions With AI

Boone Cabal — Sun, 25 May 2025 14:14:43 +0000

Introduction

In this tutorial, let's create a browser extension that highlights text on a webpage using AI code generation technologies. We’ll leverage the Google Gemini Coding Partner gem and DeepSeek to streamline code generation for our browser extension. When you are done reading this article, you will understand how massive a paradigm shift AI code generators are.

Step 1 — Generating Project Code Using `README.MD`

Much of our code generation revolves around creating and updating a README.MD file, serving as a dynamic features document that guides your extension’s development.

Let's begin by executing the following README.MD features in Gemini:

# Browser Extension - Simple Page Text Highlighter  

## Features  
- Custom bullseye Browser-Action icon  
- Highlights any text you have selected on the webpage

Running this as a prompt generated a lot of output. We are only going to focus on a couple of excerpts--the first recommends organizing your project with the structure:

HighlighterExtension/  
├── manifest.json  
├── background.js  
├── content.js  
└── icons/  
    ├── icon16.png  
    ├── icon64.png  
    └── icon128.png

For the Browser-Action extension icon, I downloaded PNG files from Flaticon.

Additionally, Gemini generated the core extension files; copy the code over to your project.

manifest.json

{
  "manifest_version": 3,
  "name": "Simple Page Text Highlighter",
  "version": "1.0",
  "description": "Highlights any text you have selected on the webpage.",
  "permissions": ["activeTab", "scripting"],
  "background": { "service_worker": "background.js" },
  "action": {
    "default_icon": "icons/icon128.png",
    "default_title": "Highlight Selected Text"
  },
  "icons": { "128": "icons/icon128.png" }
}

background.js

chrome.action.onClicked.addListener((tab) => {
  // Execute the content.js script on the current active tab
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content.js']
  })
    .then(() => {
      console.log('Content script injected successfully!');
    })
    .catch(err => {
      console.error('Failed to inject content script:', err);
    });
});

content.js

(function() {
  function highlightSelectedText() {
    const selection = window.getSelection();

    if (selection && selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow'; // You can change this color
      span.style.fontWeight = 'bold'; // Add some styling, if you like

      // Wrap the selected content with the span
      range.surroundContents(span);

      // Clear the selection after highlighting
      selection.removeAllRanges();
    } else {
      alert('Please select some text to highlight!');
    }
  }

  // Execute the highlight function
  highlightSelectedText();
})();

Step 2 — Installing and Testing Your Extension

Follow these steps to test your extension in Chrome:

Open Chrome Extensions Page
Navigate to chrome://extensions.
Enable Developer Mode
Toggle Developer Mode on (top right).
Load Unpacked Extension
Click Load Unpacked and select your HighlighterExtension folder.
Test It Out
- Open any webpage (e.g., Google).
- Select text with your mouse.
- Click the extension icon in your toolbar.
- The selected text should now be highlighted in yellow!

Step 3 — Adding a Toggle Feature

Now, let’s refine the extension by making highlighted text toggleable. When I was building this extension, Gemini failed to implement this feature, so I switched to DeepSeek, which successfully generated a functional solution.

First, I updated my README.MD, adding the toggling feature just described:

Updated README.MD:

# Browser Extension - Simple Page Text Highlighter  

## Features  
- Custom bullseye Browser-Action icon  
- Highlights any text you have selected on the webpage  
- Clicking the icon will:  
  1. Highlight the selected text if it isn’t already highlighted.  
  2. Unhighlight selected text if it’s already highlighted.

Executing this prompt in DeepSeek generated a new content.js, which (partially) unhighlighted text:

content.js

(function() {
  const HIGHLIGHT_CLASS = 'simple-page-text-highlighter-highlight';

  function highlightSelectedText() {
    const selection = window.getSelection();

    if (selection && selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      const selectedText = selection.toString().trim();

      if (!selectedText) {
        alert('Please select some text to highlight or unhighlight!');
        return;
      }

      // Check if selection is already highlighted
      let isAlreadyHighlighted = false;
      const parentElement = range.commonAncestorContainer;

      // Function to check if node or its parents have our highlight class
      const hasHighlight = (node) => {
        if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains(HIGHLIGHT_CLASS)) {
          return true;
        }
        if (node.parentNode) {
          return hasHighlight(node.parentNode);
        }
        return false;
      };

      // Check start and end containers
      isAlreadyHighlighted = hasHighlight(range.startContainer) || hasHighlight(range.endContainer);

      if (isAlreadyHighlighted) {
        // Unhighlight the selected text
        const spans = document.querySelectorAll(`.${HIGHLIGHT_CLASS}`);

        spans.forEach(span => {
          // Check if this span is within our selection
          const spanRange = document.createRange();
          spanRange.selectNodeContents(span);

          if (range.intersectsNode(span)) {
            // Unwrap the span
            const parent = span.parentNode;
            while (span.firstChild) {
              parent.insertBefore(span.firstChild, span);
            }
            parent.removeChild(span);
          }
        });
      } else {
        // Highlight the selected text
        const span = document.createElement('span');
        span.style.backgroundColor = 'yellow';
        span.style.fontWeight = 'bold';
        span.classList.add(HIGHLIGHT_CLASS);

        try {
          // First, try the simple approach
          if (range.collapsed) {
            return;
          }

          range.surroundContents(span);
        } catch (e) {
          // If surroundContents fails, try a more robust approach
          console.warn("Could not surround contents directly. Trying alternative method:", e);

          // Extract the selected text nodes
          const textNodes = [];
          const walker = document.createTreeWalker(
            range.commonAncestorContainer,
            NodeFilter.SHOW_TEXT,
            {
              acceptNode: node => {
                return range.intersectsNode(node) ? 
                  NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
              }
            }
          );

          let node;
          while (node = walker.nextNode()) {
            textNodes.push(node);
          }

          // Process each text node
          textNodes.forEach(textNode => {
            const parent = textNode.parentNode;
            if (parent.classList && parent.classList.contains(HIGHLIGHT_CLASS)) {
              return; // Skip already highlighted nodes
            }

            const newNode = document.createElement('span');
            newNode.style.backgroundColor = 'yellow';
            newNode.style.fontWeight = 'bold';
            newNode.classList.add(HIGHLIGHT_CLASS);

            parent.replaceChild(newNode, textNode);
            newNode.appendChild(textNode);
          });
        }
      }

      // Clear the selection after highlighting/unhighlighting
      selection.removeAllRanges();
    } else {
      alert('Please select some text to highlight or unhighlight!');
    }
  }

  highlightSelectedText();
})();

Step 4 — Fixing the Unhighlighting Bug

Our implementation fails when unhighlighting one word within multiple highlighted words. Unhighlighting one word in a highlighted range of three erroneously unhighlights all three words.

To solve this, I gave Gemini the last README.MD prompt and had it generate a much better, more detailed revision:

README.MD

Browser Extension: Simple Page Text Highlighter

This extension will enable users to highlight and unhighlight selected text on a webpage.

Functionality Details

Browser-Action Icon: The extension will have a custom "bullseye" icon displayed in the browser's toolbar.

Interaction Trigger: The core functionality activates when a user performs two sequential actions:

Selects text on a webpage.

Clicks the custom browser-action icon.

Highlighting Logic (On Icon Click): Upon clicking the browser-action icon with text selected, the extension will evaluate the selected text and perform one of two actions:

Action 1 (Highlight): If the currently selected text is not highlighted, apply a highlight to that specific text.

Action 2 (Unhighlight): If the currently selected text is highlighted, remove the highlight from only that specific selected text.

Granularity of Action: The highlighting or unhighlighting action applies exclusively to the text currently selected by the user. For example, if a user selects one word within a previously highlighted phrase of three words, only the selected word will be unhighlighted, leaving the other two words in the phrase highlighted.

I find this approach to be a novel solution because instead of writing a prompt that generates code, we are writing a prompt that generates an improved prompt.

Now, executing this improved prompt in DeepSeek generates the following content.js, which correctly unhighlights ranges of highlighted words:

content.js

(function () {
  const HIGHLIGHT_CLASS = "simple-page-text-highlighter-highlight";

  // Helper function to get the intersection between two ranges
  function getIntersection(range1, range2) {
    const start =
      range1.compareBoundaryPoints(Range.START_TO_START, range2) < 0
        ? range2.startContainer
        : range1.startContainer;
    const startOffset =
      range1.compareBoundaryPoints(Range.START_TO_START, range2) < 0
        ? range2.startOffset
        : range1.startOffset;

    const end =
      range1.compareBoundaryPoints(Range.END_TO_END, range2) < 0
        ? range1.endContainer
        : range2.endContainer;
    const endOffset =
      range1.compareBoundaryPoints(Range.END_TO_END, range2) < 0
        ? range1.endOffset
        : range2.endOffset;

    if (
      range1.compareBoundaryPoints(Range.START_TO_END, range2) < 0 ||
      range1.compareBoundaryPoints(Range.END_TO_START, range2) > 0
    ) {
      return null; // No intersection
    }

    const intersection = document.createRange();
    intersection.setStart(start, startOffset);
    intersection.setEnd(end, endOffset);
    return intersection;
  }

  function highlightSelectedText() {
    const selection = window.getSelection();

    if (selection && selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      const selectedText = selection.toString().trim();

      if (!selectedText) {
        alert("Please select some text to highlight or unhighlight!");
        return;
      }

      // Check if selection is already highlighted
      let isAlreadyHighlighted = false;
      const parentElement = range.commonAncestorContainer;

      const hasHighlight = (node) => {
        if (
          node.nodeType === Node.ELEMENT_NODE &&
          node.classList.contains(HIGHLIGHT_CLASS)
        ) {
          return true;
        }
        if (node.parentNode) {
          return hasHighlight(node.parentNode);
        }
        return false;
      };

      isAlreadyHighlighted =
        hasHighlight(range.startContainer) || hasHighlight(range.endContainer);

      if (isAlreadyHighlighted) {
        const spans = document.querySelectorAll(`.${HIGHLIGHT_CLASS}`);

        spans.forEach((span) => {
          const spanRange = document.createRange();
          spanRange.selectNodeContents(span);

          const intersection = getIntersection(range, spanRange);
          if (!intersection) return;

          const selectedContent = intersection.cloneContents();
          const parent = span.parentNode;

          // Split the span into three parts: before, selected, and after
          const beforeRange = document.createRange();
          beforeRange.setStart(span, 0);
          beforeRange.setEnd(
            intersection.startContainer,
            intersection.startOffset
          );
          const beforeContent = beforeRange.cloneContents();

          const afterRange = document.createRange();
          afterRange.setStart(
            intersection.endContainer,
            intersection.endOffset
          );
          afterRange.setEnd(span, span.childNodes.length);
          const afterContent = afterRange.cloneContents();

          // Replace the original span with the split parts
          const fragment = document.createDocumentFragment();

          if (beforeRange.toString().trim()) {
            const beforeSpan = document.createElement("span");
            beforeSpan.className = HIGHLIGHT_CLASS;
            beforeSpan.style.backgroundColor = "yellow";
            beforeSpan.style.fontWeight = "bold";
            beforeSpan.appendChild(beforeContent);
            fragment.appendChild(beforeSpan);
          }

          fragment.appendChild(selectedContent);

          if (afterRange.toString().trim()) {
            const afterSpan = document.createElement("span");
            afterSpan.className = HIGHLIGHT_CLASS;
            afterSpan.style.backgroundColor = "yellow";
            afterSpan.style.fontWeight = "bold";
            afterSpan.appendChild(afterContent);
            fragment.appendChild(afterSpan);
          }

          parent.replaceChild(fragment, span);
        });
      } else {
        // Highlight the selected text (original code)
        const span = document.createElement("span");
        span.style.backgroundColor = "yellow";
        span.style.fontWeight = "bold";
        span.classList.add(HIGHLIGHT_CLASS);

        try {
          if (range.collapsed) {
            return;
          }

          range.surroundContents(span);
        } catch (e) {
          console.warn(
            "Could not surround contents directly. Trying alternative method:",
            e
          );

          const textNodes = [];
          const walker = document.createTreeWalker(
            range.commonAncestorContainer,
            NodeFilter.SHOW_TEXT,
            {
              acceptNode: (node) => {
                return range.intersectsNode(node)
                  ? NodeFilter.FILTER_ACCEPT
                  : NodeFilter.FILTER_REJECT;
              },
            }
          );

          let node;
          while ((node = walker.nextNode())) {
            textNodes.push(node);
          }

          textNodes.forEach((textNode) => {
            const parent = textNode.parentNode;
            if (
              parent.classList &&
              parent.classList.contains(HIGHLIGHT_CLASS)
            ) {
              return;
            }

            const newNode = document.createElement("span");
            newNode.style.backgroundColor = "yellow";
            newNode.style.fontWeight = "bold";
            newNode.classList.add(HIGHLIGHT_CLASS);

            parent.replaceChild(newNode, textNode);
            newNode.appendChild(textNode);
          });
        }
      }

      selection.removeAllRanges();
    } else {
      alert("Please select some text to highlight or unhighlight!");
    }
  }

  highlightSelectedText();
})();

Go ahead and test it, fiend. Highlight two words, and then unhighlight one of them.

Bro Tips

💡 Tip 1: Write Clear AI Prompts

Keep your README.MD updated, adding one feature at a time.
Use AI-generated code to implement specific features incrementally.

🛠️ Tip 2: Undo AI Code Mistakes

If AI assistance fails:

Revert files to the last Git commit.
Start a new chat session with an AI assistant.
Upload project files and paste your README.MD for fresh results.

🔄 Tip 3: Use Multiple AI Assistants

If one fails, try another! DeepSeek often delivers better code than Gemini or Grok.

Conclusion

If you made it this far, congratulations—you’re highly irregular. Nevertheless, thanks for reading, friend. Now leave, please. 🚀

Mastering Vim: Buffers, Windows, and Your Text Editing Arsenal

Boone Cabal — Thu, 22 May 2025 23:04:37 +0000

Introduction

In this tutorial, we will cover the basics of working with buffers and windows (called panes) in Vim using an example-driven approach. To get the most out of it, I strongly recommend that you keep Vim open and follow each step. Do not skip any steps. Just be patient and do each step, one at a time. Actively doing it will reinforce the concepts, making it easier to learn.

Buffers: Your Textual Workspaces

A buffer is an area in memory that stores text. Every time you open a file, its contents are read into a buffer, allowing you to make changes to that buffer without affecting the original file.

Viewing Buffers

Let's begin by opening Vim. By default, you will have one unnamed buffer. You can view all your buffers using :ls or :buffers.

Use :ls.

:ls
  1 %a   "[No Name]"                    line 1

The buffer list produced by :ls uses the following format:

Number Indicator    Name                          Line

     1        %a   "[No Name]"                    line 1

All of these fields are self-explanatory except for Indicator. Here is an excerpt from the Vim help for :ls:

u    an unlisted buffer (only displayed when [!] is used)
        |unlisted-buffer|
 %   the buffer in the current window
 #   the alternate buffer for ":e #" and CTRL-^
 a   an active buffer: it is loaded and visible
 h   a hidden buffer: It is loaded, but currently not
        displayed in a window |hidden-buffer|
  -  a buffer with 'modifiable' off
  =  a readonly buffer
  R  a terminal buffer with a running job
  F  a terminal buffer with a finished job
  ?  a terminal buffer without a job: `:terminal NONE`
  +  a modified buffer
  x  a buffer with read errors

The Indicator in the above :ls output is %a, which specifies that the buffer is active (a) and in the current window or pane (%). + is useful; it tells you if a buffer is modified. We'll cover another useful one, #, later.

`:ls` Helper Function

Throughout this article, we will be issuing command-line commands followed by the :ls command, like :bd | ls. As a convenience, I recommend adding the following function to your .vimrc:

" You must specify 'normal' for all normal-mode commands to work.
function! ExeCmdLs(cmd)
  if a:cmd =~ '^normal'
    exe a:cmd
    ls
  elseif empty(a:cmd)
    ls
  else
    exe a:cmd .. ' | ls'
  endif
endfunction

nnoremap <space>c :call ExeCmdLs('')<left><left>

The above code includes a useful normal-mode mapping, <space>c, which places you in command-line mode, types :call ExeCmdLs('_'), and places your cursor at the _.

For the rest of the article, wherever you see :[command] | ls, this translates to using the <space>c[command] macro.

Saving Buffers to Files

Before we can create a new buffer, we need to save the active buffer to a file, You can do this using :w. Add the text File a.txt to the buffer, and then use :w a.txt | ls.

"a.txt" [New] 1L, 11B written
  1 %a   "a.txt"                        line 1

Now it has a name of a.txt, a number of 1, and an indicator of %a, telling you it is the active buffer in the current window.

In addition to :w, you can save all open buffers using :wa, which stands for "write all."

Creating Buffers

:enew creates a new, unnamed buffer. Use :enew | ls:

:call ExeCmdLs('enew')
  1 #    "a.txt"                        line 1
  3 %a   "[No Name]"                    line 1

We have named buffer a.txt (1) and an unnamed buffer (3); buffer 3 is the active buffer. Enter the text File b.txt, then use :w b.txt | ls.

"b.txt" [New] 1L, 11B written
  1      "a.txt"                        line 1
  3 %a   "b.txt"                        line 1

Now we have two files to work with.

Deleting Buffers

:bd deletes the active buffer. Delete buffer b.txt (3) using :bd | ls.

"a.txt" 1L, 11B
  1 %a   "a.txt"                        line 1

Now we're back to buffer a.txt.

Opening Files Into Buffers

:e opens a file in the active buffer. Open b.txt using :e b.txt | ls.

"b.txt" 1L, 11B
  1 #    "a.txt"                        line 1
  3 %a   "b.txt"                        line 1

The # Indicator

Notice that buffer a.txt (1) has an indicator of #. This is the
last edited buffer. You can use :e # to toggle between the current
and last edited buffers. Use :e # | ls a few times and notice how
the indicators change.

Navigating Between Buffers

The following commands allow you to navigate between buffers:

:[N]bnext [N] or :[N]bn [N]: move to next buffer, where N is the buffer number.
:[N]bprev [N] or :[N]bp [N]: move to the previous buffer, where N is the buffer number.
:[N]buffer [N] or :[N]b [N]: move to specified buffer N, where N is the buffer number.
:bf[irst]: move first buffer in buffer list.
:bl[ast]: move to last buffer in buffer list.
:buffer [N] or :b [N]: move to buffer [N].

From the previous :ls command, we have buffers a .txt (1) and b.txt (3) open, with b.txt (3) being the active buffer. Use :bp | ls to navigate to buffer a.txt (1).

"a.txt" 1L, 10B
  1 %a   "a.txt"                        line 1
  3 #    "b.txt"                        line 1

The %a indicator tells you that buffer a.txt (1) is the active buffer. Now use :bp | ls.

"b.txt" 1L, 11B
  1 #    "a.txt"                        line 1
  3 %a   "b.txt"                        line 1

Buffer b.txt (3) is now active.

You can navigate to a specific buffer using :buffer or :b. Use :b 1 | ls to navigate to buffer a.txt (1).

"a.txt" 1L, 10B
  1 %a   "a.txt"                        line 1
  3 #    "b.txt"                        line 1

Iterating Over Buffers

:bufdo [command] allows you to perform a command over each buffer. Use :bufdo bd to delete all buffers.

:ls
  3 %a   "[No Name]"                    line 1

One use of :bufdo s/File/&:/ | update is to perform search-and-replace across multiple buffers. Open a.txt and b.txt using :e a.txt | e b.txt | ls.

"b.txt" 1L, 11B
  1 #    "a.txt"                        line 1
  2 %a   "b.txt"                        line 1

The contents of a.txt and b.txt are File a.txt and File b.txt, respectively. Let's search-and-replace File with File:. Use :bufdo! s/File/&:/ | update. Now, if you navigate between buffers using :bn and :bp, you will see that both files have been changed.

Using :bufdo! prevents the No write since last change error.

:update is a smarter version of :w in that it only saves the file if changes have been made.

Exiting Vim

You can exit Vim using the following commands:

:q: Quit the current window, which can be either the pane or the Vim window. Fails when changes have been made.
:wq: Write current file and close window. Quit after the last edit. Writing fails when the buffer is unnamed.
:x: Like :wq, except write only when changes have been made.

Let's look at a caveat of using quit commands. Save the active buffer and quit Vim using :wq. Now reopen a.txt and b.txt in Vim using the following command:

vim a.txt b.txt

Using :ls shows both files are open.

:ls
  1 %a   "a.txt"                        line 1
  2      "b.txt"                        line 0

Try to quit Vim using :q. It will say E173: 1 more file to edit. It turns out you have to activate every buffer before you can quit. Use :bn | q to navigate to the next buffer b.txt (2) and then quit. Now you shouldn't have this problem.

I noticed this problem when I tried to save all buffers and quit Vim using :wa | q, which failed.

Buffer States

Buffer states are complex. It took me a while to understand them. Let's cover each of the six buffer states.

Unlisted

An unlisted buffer does not appear in the buffer list. You can utilize an unlisted buffer whenever you want a temporary area in which to edit text. Once you're done, you can delete the buffer and discard the changes. The following code creates an unlisted buffer:

" Create a listed buffer
:enew 
" Make active buffer unlisted
:setlocal nobuflisted

:ls! and :ls u display all buffers, both listed and unlisted. Using :ls! produces the following output:

:ls!
  1 #    "a.txt"                        line 1
  2      "b.txt"                        line 1
  3u%a   "[No Name]"                    line 1

The u portion of buffer 3's indicator means unlisted.

Inactive

An inactive buffer is not displayed in any pane. For example, using :new creates a new pane and buffer, making the previously active buffer inactive.

Active

An active buffer is any buffer currently displayed in any pane. Therefore, you can have multiple active buffers opened in multiple panes.

Hidden

You can have multiple buffers loaded in memory, but you can only display one buffer per pane. In other words, any buffer not displayed in any pane is hidden. You can make a buffer hidden using :hide.

Loaded

A loaded buffer contains the contents of a file. For instance, if you open a file using :edit a.txt, that buffer is loaded.

Unloaded

:bunload N unloads a buffer and its contents from memory, but it still appears in the buffer list.

Windows (Panes): Viewing and Editing in Parallel

While buffers store your text in memory, windows (panes) are sections within the Vim window that display it. Splitting the Vim window into multiple panes lets you simultaneously view and edit different buffers, streamlining your workflow without constantly switching between files.

Splitting and Navigating

You can create panes using the following commands, each of which splits the Vim window into a new pane.

:new: create a new pane and start editing an unnamed buffer.
:split {file} sp: create a new pane and start editing file {file} in it. Works almost like :split | edit {file} when {file} is supplied.
:vsplit vs: works like :split but split vertically.
:vnew:

:q closes the active pane but leaves the buffer in memory. If you want to close both the pane and its buffer, use :bd.

Demonstrating `:new`

Close and reopen Vim, and then use :new | ls to create a bottom-docked pane. Observe how both panes contain the same buffer.

:call ExeCmdLs('new')
  1 #a   "[No Name]"                    line 1
  2 %a   "[No Name]"                    line 1

Whichever pane contains the cursor is the active pane.

Demonstrating `:vsplit`

Use :vs to create a top-docked pane. This divides the bottom pane vertically into two sub-panes. Pretty cool, isn't it?

Demonstrating `:split`

Let's create a different layout. Reset the buffers using :bd | ls.

:ls
  1 %a   "[No Name]"                    line 1

Use :vs to split Vim vertically into left- and right-docked panes. Next, use :sp to split the right-docked pane horizontally into two sub-panes.

Settings for `:new`, `:sp`, and `:vs`

The following options control the behavior of :split and :vsplit.

splitbelow or sb: When on, splitting a pane will put the new pane below the current one.
splitright or spr: When on, splitting a pane will put the new pane right the current one.

You can unset a Vim option by prepending the setting with no. For example, unset splitbelow using :set nosplitbelow.

Navigating Between Panes

You can navigate between panes using :wincmd {arg}, with {arg} being a normal-mode movement command like k (up), j (down), l (right), and h (left). Alternatively, you can use the hotkeys :Ctrl-w h/j/k/l.

It's important to understand that both buffers and windows have numbers that identify them, and you can supply them as arguments to various Vim functions. Furthermore, understanding the difference between navigating between panes versus buffers will help you avoid getting lost when you have lots of open panes.

Iterating Over Panes

Similar to :bufdo, :windo lets you invoke a command for each buffer. For instance,, use :windo echo winnr() to display the pane number of each pane.

Deleting Panes

:x, :bd, :q, and :wq close windows. Understand that you can delete a buffer or a buffer and a pane, but you can't delete a pane without deleting a buffer.

Close and then reopen Vim with a.txt. Next, use :vs b.txt | ls to open b.txt into a right-docked pane.

"b.txt" 1L, 11B
  1 #a   "a.txt"                        line 0
  2 %a   "b.txt"                        line 1

Now the Vim window is vertically divided between left- and right-docked panes. Each pane now has an active buffer, with buffer b.txt in the current window (%).

Recall that the % indicator defines the active window.

:close closes the active pane without deleting its buffer. Use :close | ls and notice how closing a pane doesn't delete a buffer.

As a final example, use :vs b.txt to open b.txt into a right-docked pane and then :bd | ls to delete it.

:call ExeCmdLs('bd')
  1 %a   "a.txt"                        line 1

Notice how this deletes buffer b.txt and its pane. Again, it is important the distinguish between deleting panes and buffers.

Example Using Buffers and Panes

Let's walk through a comprehensive example using everything we've learned thus far. Begin by opening a.txt, b.txt, and c.txt in Vim using the bash command vim a.txt b.txt c.txt, and then use :ls. Observe the indicators as you use the following commands.

:ls
  1 %a   "a.txt"                        line 1
  2      "b.txt"                        line 0
  3      "c.txt"                        line 0

Use :vnew | new | ls to vertically split the Vim window into left- and right-docked panes, with the right-docked pane split horizontally between bottom- and top-docked sub-panes.

:vnew
:new
:ls
  1  a   "a.txt"                        line 0
  2      "b.txt"                        line 0
  3      "c.txt"                        line 0
  4 #a   "[No Name]"                    line 0
  5 %a   "[No Name]"                    line 1

Use :b c.txt | ls to navigate to buffer c.txt and notice how this deletes buffer 5.

:b c.txt
:ls
  1  a   "a.txt"                        line 0
  2      "b.txt"                        line 0
  3 %a   "c.txt"                        line 1
  4  a   "[No Name]"                    line 0

Use :winc k | ls to move the cursor to the top-right pane.

:winc k
:ls
  1 #a   "a.txt"                        line 0
  2      "b.txt"                        line 0
  3  a   "c.txt"                        line 1
  4 %a   "[No Name]"                    line 1

Use b b.txt | ls to navigate to buffer b.txt.

:b b.txt
:ls
"b.txt" 1L, 11B
  1  a   "a.txt"                        line 0
  2 %a   "b.txt"                        line 1
  3  a   "c.txt"                        line 1

Simplifying Commands

Let's consolidate some commands. Using :vs b.txt | sp c.txt | ls achieves the same result as the previous example.

:ls
  1  a   "a.txt"                        line 0
  2 #a   "b.txt"                        line 1 <== Alternate buffer
  3 %a   "c.txt"                        line 1 <== Active buffer

Notice that buffer b.txt (2) has the # indicator, which represents the alternate toggle buffer. Use :e # | ls to toggle to it.

"b.txt" 1 line --100%-- ((1) of 3)
  1  a   "a.txt"                        line 0
  2 %a   "b.txt"                        line 1 <== Active buffer
  3 #    "c.txt"                        line 1 <== Alternate buffer

Now buffer c.txt (3) is the alternate buffer.

Use :e # | ls to toggle back to buffer b.txt (2), and then use :bd | bd | ls to delete buffers b.txt (2) and c.txt (3). Notice how deleting each buffer closes its associated panes.

:bd
:bd
:ls
  1 %a   "a.txt"                        line 1

Customizing and Optimizing

Beyond the fundamental commands, Vim offers many options to tailor your editing environment. By mastering buffer states (active, inactive, hidden, and unloaded), you gain a deeper understanding of Vim's text management and unlock further customization possibilities. Additionally, delve into creating and saving personalized window layouts, enabling you to craft a workspace perfectly suited to your specific tasks and preferences.

The vibrant Vim community also offers a wealth of plugins that can further enhance your buffer and window management experience. Explore these plugins to discover tools that streamline navigation, improve organization, and add more powerful features to your arsenal.

Embrace the Journey of Mastery

You made it! Hopefully, this tutorial has demystified using buffers and panes in Vim. This barely scratches the surface of Vim's capabilities. I strongly recommend that you experiment and descend rabbit holes using :help.

Well done, friend. Now leave, please.

How to Build Custom Filters with awk and sed Pipelines on Ubuntu 20.04

Boone Cabal — Thu, 22 May 2025 22:57:13 +0000

Introduction

This article is written for Linux administrators. It teaches you how to create pipelines on a terminal using sed and awk commands. Combining these commands allows you to filter and analyze data, troubleshoot log files, and streamline your day-to-day workflow.

sed and awk are essential for filtering and transforming text data. awk works well with columns, and sed excels at search-and-replace. The power of these tools lies in combining them into a pipeline. That will be the focus of this tutorial.

Prerequisites

To complete this tutorial, you will need:

Experience operating a Linux terminal. DigitalOcean's A Linux Command Line Primer is a great place to start.
Knowledge about regular expressions; how to interpret and create them. Read An Introduction to Regular Expressions to learn more.
Experience using common command line tools like cut, head, and so on. Check out Sed Stream Editor to Manipulate Text in Linux and How To Use the AWK language to Manipulate Text in Linux.

Your First Pipe and Filter using `sed` and `awk`

Let us walk through a basic example of filtering specific data from a file with awk and then formatting it for display with sed. You will use a pipeline to extract and then print the product names and prices for products with a price greater than ten dollars.

First, create a products.text file in Vim using the following command:

vim products.txt

Note: You don't have to use Vim; you can use whichever editor works best for you.

Fill the file with the following contents:

123:T-Shirt:19.99
456:Coffee Mug:8.50
789:Headphones:49.95

Here is the full pipeline you are going to construct:

awk -F: '$3 > 10 {print $2 "\t" $3}' products.txt | sed '1iName\tPrice'

Primer: awk

Let's brush up on awk. awk uses the syntax of condition { action }. Here is an example of an awk script:

/^int/ { print "Found an integer." }

condition: /^int/

{ action }: print "Found an integer."

This is how it works: For every line beginning with "int", awk prints the message, "Found an integer."

Now, let's break down each part of this pipeline. Here is the awk portion:

awk -F: '$3 > 10 {print $2 "\t" $3}'

Here is how it works:

awk matches lines where the condition that the price ($3) is greater than 10; the action prints the product name ($2), followed by a tab, followed by the price.
The -F: argument sets the delimiter to ‘,’

Let's look at the sed portion of our pipeline:

sed '1iName\tPrice'

Here is how it works:

The 1i inserts "Name"--before the first line of the output--followed by a tab, "Price", and a newline.

Below is the full pipeline. Run it:

awk -F: '$3 > 10 {print $2 "\t" $3}' products.txt | sed '1iName\tPrice'

Here is the resulting output:

Name    Price
T-Shirt 19.99
Headphones      49.95

Straightforward enough, right?

More Complex Filters and Transformations

In this section, we will create some more complex filters and transformations using sed, awk, and some other commands. As we walk through each example pipeline, go slow, be patient, run every command, observe the output, and grasp what's happening.

Filtering System Resource Usage by User

Let's create a pipeline that analyzes process information generated by the ps command. As a system administrator, it behooves you to monitor resource usage per user, allowing you to discover users who consuming excessive memory, CPU usage, and so on.

Here is the full pipeline you will construct, which filters resource usage by user:

# Get process information
ps -eo pid,user,rss |

# Filter by specific user and format output
awk '$2 == "root" {print $1, "RSS:", $3/1024, "MB"}' |

# Sort by memory usage
sed '1iPID RSS(MB)' | sort -nrk 2

Step One -- Outputting Process Info With `ps`

Begin this pipeline by generating process information using ps. Here is the first part of the pipeline:

ps -eo pid,user,rss

Here is how it works:

Displays all processes using the -e argument.
Using the -o argument, displays the pid, user, and rss columns.

Running this command line produces the following output:

    PID USER       RSS
      1 codespa+   640
      7 codespa+  1792
     42 root      3480
    322 codespa+  1408
    355 root      1664
    509 codespa+  1536
    518 codespa+ 131588
    560 codespa+ 54792
    981 codespa+ 62928

Now you have our fields of interest: PID, USER, and RSS.

Step Two -- Filtering User Process Info With `awk`

Let's move on to the next portion of our pipeline, which uses awk to filter lines containing the “root” user and calculate memory usage in megabytes.

awk '$2 == "root" {print $1, "RSS:", $3/1024, "MB"}'

Here is how it works:

The condition $2 == "root" selects lines where the NAME is equal to "root".
The action { print $1, "RSS:", $3/1024, "MB" } displays output using the following format:

[value of pid] RSS: [file-size] MB

Note: Dividing the RSS value by 1024 demonstrates how awk can perform calculations.

Below is our updated pipeline. Run it.

ps -eo pid,user,rss | awk '$2 == "root" {print $1, "RSS:", $3/1024, "MB"}'

You should see the following output:

1 RSS: 0.191406 MB
7 RSS: 0.148438 MB
8 RSS: 94.7695 MB
212 RSS: 7.16406 MB
821 RSS: 5.85938 MB
1883 RSS: 1.55469 MB
1884 RSS: 2.91016 MB

Step Three -- Sorting by Memory Usage

Let's add some commands to our pipeline to sort the output by memory usage. Here is the sed portion of the pipeline:

sed '1iPID RSS(MB)' | sort -nrk 2

Here is how it works:

'1iPID RSS(MB)' uses the 'i' to insert the column heading "PID RSS(MB)" followed by a newline.

PID RSS(MB)
sort -nrk sorts the text numerically (-n), reverses the result (-r), and sorts by the second column (-k 2), which effectively sorts the output based on memory usage.

Note: Sorting by memory usage (column 2) in descending order helps identify resource-intensive processes efficiently.

Here is the pipeline thus far. Go ahead and run it:

ps -eo pid,user,rss | awk '$2 == "root" {print $1, $3/1024, "MB"}' | sed '1iPID RSS(MB)' | sort -nrk 2

This should produce the following output:

PID RSS(MB)
821 5.88672 MB
8 95.1914 MB
7 0.148438 MB
212 7.16406 MB
2009 1.09375 MB
2008 1.08594 MB
2007 2.92969 MB
2006 3.14453 MB
1 0.191406 MB

Failed Login Counter

Let's create a pipeline that analyzes an authentication log, searches for, and then counts failed login attempts. Attention to events like this allows you to protect your system and respond to potential threats. Here is the full pipeline we'll build:

grep "Failed password" auth.log | sed 's/invalid user //' | awk '{print $9}' | sort | uniq -c | sort -nr

Here is how it works:

grep "Failed password": Filters the lines that contain “Failed password” from the authentication log.
sed 's/invalid user //': Removes the “invalid user” part from the lines, if present.
awk '{print $9}': Prints the ninth field, which is typically the username.
sort: Sorts the usernames alphabetically.
uniq -c: Counts the occurrences of each username.
sort -nr: Sorts the counts in descending order.

Let's walk through it.

Step One -- Creating a Log File

Create a file named auth.log using the following command:

vim auth.log

Fill the file with the following contents:

Feb 10 15:45:09 ubuntu-lts sshd[47341]: Failed password for tedbell from 103.106.189.143 port 60824 ssh2
Feb 10 15:45:11 ubuntu-lts sshd[47341]: Connection closed by authenticating user root 103.106.189.143 port 60824 [preauth]
Feb 10 15:45:11 ubuntu-lts sshd[47339]: Failed password for root from 180.101.88.228 port 11349 ssh2
Feb 10 15:45:12 ubuntu-lts sshd[47343]: pam_unix(sshd:auth): authentication failure; logname= uid=0 euid=0 tty=ssh user= rhost=103.106.189.143  user=root
Feb 10 15:45:14 ubuntu-lts sshd[47339]: Failed password for rhomboidgoatcabin from 180.101.88.228 port 11349 ssh2
Feb 10 15:45:14 ubuntu-lts sshd[47343]: Failed password for root from 103.106.189.143 port 33990 ssh2
Feb 10 15:45:16 ubuntu-lts sshd[47343]: Connection closed by authenticating user root 103.106.189.143 port 33990 [preauth]
Feb 10 15:45:16 ubuntu-lts sshd[47339]: Received disconnect from 180.101.88.228 port 11349:11:  [preauth]
Feb 10 15:45:16 ubuntu-lts sshd[47339]: Disconnected from authenticating user root 180.101.88.228 port 11349 [preauth]
Feb 10 15:45:16 ubuntu-lts sshd[47339]: PAM 2 more authentication failures; logname= uid=0 euid=0 tty=ssh ruser= rhost=180.101.88.228

Step Two -- Finding Failed Passwords

Below is the first part of the pipeline, which uses grep to filter lines containing “Failed password". Run it.

grep "Failed password" auth.log

You should see the following output:

Feb 10 15:45:09 ubuntu-lts sshd[47341]: Failed password for tedbell from 103.106.189.143 port 60824 ssh2
Feb 10 15:45:11 ubuntu-lts sshd[47339]: Failed password for root from 180.101.88.228 port 11349 ssh2
Feb 10 15:45:14 ubuntu-lts sshd[47339]: Failed password for rhomboidgoatcabin from 180.101.88.228 port 11349 ssh2
Feb 10 15:45:14 ubuntu-lts sshd[47343]: Failed password for root from 103.106.189.143 port 33990 ssh2

You now have all the failed password entries.

Step Three -- Removing Invalid Users

Update the pipeline by adding a sed command, which removes any “invalid user” parts:

grep "Failed password" auth.log | sed 's/invalid user //'

Running this pipeline should produce the following output:

Feb 10 15:45:09 ubuntu-lts sshd[47341]: Failed password for tedbell from 103.106.189.143 port 60824 ssh2
Feb 10 15:45:11 ubuntu-lts sshd[47339]: Failed password for root from 180.101.88.228 port 11349 ssh2
Feb 10 15:45:14 ubuntu-lts sshd[47339]: Failed password for rhomboidgoatcabin from 180.101.88.228 port 11349 ssh2
Feb 10 15:45:14 ubuntu-lts sshd[47343]: Failed password for root from 103.106.189.143 port 33990 ssh2

Step Four -- Extracting Username

Update the pipeline by adding an awk command to print the username field ($9).

grep "Failed password" auth.log | sed 's/invalid user //' | awk '{print $9}'

Running this pipeline should produce the following output:

tedbell
root
rhomboidgoatcabin
root

You are making progress! Now you have all the usernames.

Step Five -- Sorting Usernames

Update the pipeline by adding the following sort command to sort the usernames alphabetically:

grep "Failed password" auth.log | sed 's/invalid user //' | awk '{print $9}' | sort

Running this pipeline should produce the following output:

rhomboidgoatcabin
root
root
tedbell

Now you have an alphabetical list of usernames.

Step Six -- Counting Usernames

Update the pipeline by adding sort and uniq commands. Using uniq with the -c argument counts the occurrences of each username, and sort sorts the usernames alphabetically.

grep "Failed password" auth.log | sed 's/invalid user //' | awk '{print $9}' | sort | uniq -c

Running this pipeline should produce the following output:

1 rhomboidgoatcabin
2 root
1 tedbell

Now you have a user count.

Step Seven -- Sorting Output Again

Finally, update the pipeline by adding another sort command. Using the-nr argument of sort sorts the output by username count in descending order.

grep "Failed password" auth.log | sed 's/invalid user //' | awk '{print $9}' | sort | uniq -c | sort -nr

Running the full pipeline should produce the following output:

2 root
1 rhomboidgoatcabin
1 tedbell

All done!

Disk Consumption Report

Let's construct a pipeline that finds the top disk space-consuming directories and sorts them in descending order. It's important to be able to monitor disk usage, ensuring a smoother experience for users. Here is the complete pipeline you will construct:

cat disk_usage.log | awk '{print $2, $1}' | sed 's/G/ GB/' | sort -k2 -nr

Here's how it works:

cat disk_usage.log: Outputs the content of disk_usage.log.
awk '{print $2, $1}': Swaps the columns so that the directory path comes first.
sed 's/G/ GB/': Adds a space before the unit ‘G’ to standardize it to ‘GB’.
sort -k2 -nr: Sorts the output based on the second column (disk space) in descending numerical order.

Step One -- Creating Disk Usage File

Begin by creating an input file called disk_usage.txt, and fill it with the following content:

2.4G    /usr/local/bin
5.7G    /home/user
1.2G    /tmp
9.8G    /var/log

Step Two -- Outputting Contents of File

Begin the pipeline by using the cat command to send the contents of the disk usage file to standard output (screen).

cat disk_usage.log

Step Three -- Swapping Columns

Update the pipeline by adding an awk command to rearrange the order of the columns, displaying the directory path first:

cat disk_usage.log | awk '{print $2, $}'

Running this pipeline should produce the following output:

/usr/local/bin 2.4G
/home/user 5.7G
/tmp 1.2G
/var/log 9.8G

Step Four -- Changing File Size Column Format

Update the pipeline by adding a sed command to add a space before the unit ‘G’ to standardize it to ‘GB’:

cat disk_usage.log | awk '{print $2, $1}' | sed 's/G/ GB/'

Running this pipeline should produce the following output:

/usr/local/bin 2.4 GB
/home/user 5.7 GB
/tmp 1.2 GB
/var/log 9.8 GB

Step Five -- Sorting Output on Second Column

Update the pipeline by adding a sort command to sort the output based on the second column (disk space) in descending numerical order.

cat disk_usage.log | awk '{print $2, $1}' | sed 's/G/ GB/' | sort -k2 -nr

Here is an explanation of the sort options used above:

-k2: This flag specifies the column (field) for sorting. In this case, 2 indicates the second column.
-nr:
- -n: This flag tells sort to perform a numeric sort on the specified column (second column in this case).
- -r: This flag reverses the sorting order, so it sorts in descending order instead of the default ascending order.

Running this pipeline produces output sorted by disk space:

/var/log 9.8 GB
/home/user 5.7 GB
/usr/local/bin 2.4 GB
/tmp 1.2 GB

Nice work, friend!

Conclusion

In this tutorial, you have learned how to create sophisticated pipelines using sed, awk, and other commands. Now you are ready to start experimenting and creating your own pipelines and solving day-to-day system administration problems.

I hope this tutorial helped. Thanks for reading!

How to Create a Lightweight Dotfiles Repository

Boone Cabal — Thu, 22 May 2025 22:54:14 +0000

Introduction

Configuring your customizations can be tedious and repetitive. This tutorial will show you how to consolidate all your customizations in a dotfiles GitHub repository. Along the way, you will learn some handy Linux and Vim techniques.

The goal is to create a minimalist, well-structured, boilerplate repository that you can augment as you see fit. Most of the tutorial entails building the repository one file at a time with commentary describing key points. When you're done, you will have created a generic repository with the following:

Good generic .bashrc settings
Small but powerful set of bash functions and aliases for navigation
Good generic settings for Vim

Prerequisites

This is a fairly advanced tutorial. You should consider yourself an intermediate-level user of Linux and Vim.

Be comfortable working in a Linux terminal. Start with the article A Linux Command Line Primer. It wouldn't hurt to check out the article Top 50+ Linux Commands You MUST Know either.
Have a decent understanding of the Vim text editor. Check out the article How To Use Vim for Advanced Editing of Plain Text or Code on a VPS.
The article How To Use Git to Manage your User Configuration Files on a Linux VPS by Justin Ellingwood presents another solution to this problem using GitLab. I recommend reading it.

Dotfiles

I conferred with my AI assistant, Google Gemini, about how to create a GitHub repository for my customizations. It recommended using a "dotfiles" repository. A dotfile refers to any hidden configuration file beginning with a . character, like .bashrc. This led me to research dotfiles, and I learned that this is a known issue with many solutions. The dotfiles solution you will create in this tutorial is the result of that research.

The Dotfiles Directory Structure

It is essential to have a logically organized directory structure for your repository. For this tutorial, you will use the following directory structure, which divides the configuration files between bash and vim:

dotfiles
  shell
    .vars
    .prompt
    .aliases
    .functions

  .vim
    plugin
    set.vim
    maps.vim
    autoload.vim

  backups

  .bashrc
  .vimrc

  install.sh

.bashrc is a configuration file for bash that can grow large and convoluted over time. We are going to solve this problem using a divide-and-conquer strategy by breaking .bashrc into the smaller modules (files) .vars, .prompt, .aliases, and .functions; .bashrc then loads each of these modules. We will use the same approach with .vimrc, the primary configuration file for the text editor Vim, breaking it into the modules set.vim, maps.vim, and autoload.vim.

Note: Your setup might require you to use different configuration files like .bash_profile. Make whatever changes you need to this repository.

Test Everything

As you create each file, test it. Confirm it is doing exactly what you expect it to do, and do not proceed any further in the tutorial until you have. Making too many changes without testing them can be tedious. Be patient and take it one step at a time, friend.

Complete Code Listings

Including the full code listings for each file simplifies copying and pasting code as you proceed.

Step One -- Creating the Files and Directories

Let's start building your dotfiles repository. Log in to your GitHub account and create a new Codespace. Once VS Code finishes loading, open a terminal and use the following command to create all of your dotfiles directories:

mkdir -p .vim/plugin shell backups

Use the following command to create the files:

touch .bashrc .vimrc install.sh shell/.{functions,vars,aliases,prompt} .vim/{set,maps,autoload}.vim

It's pretty cool to create all these files in one command. The shell uses brace expansions to create every possible combination of the expressions in the braces.

Confirm that all the directories and files have been created.

Step Two -- Creating `install.sh`

Let's create an installation script that creates symbolic links from your dotfiles in your dotfiles/ directory to your home directory. Open the script using the following command:

vim install.sh

Add the following code to your install.sh:

CS_HOME="$(pwd)"
DATE="$(date +%Y%m%d%H%M%S)"

if [ -f ~/.bashrc ]; then
  cp ~/.bashrc "$CS_HOME/backups/.bashrc.bak.$DATE"
  mv –-no-clobber ~/.bashrc "$CS_HOME/.bashrc" 2>/dev/null
  rm ~/.bashrc
fi
ln -s "$CS_HOME/.bashrc" ~/.bashrc

if [ -f ~/.vimrc ]; then
  cp ~/.vimrc "$CS_HOME/backups/.vimrc.bak.$DATE"
  mv –-no-clobber ~/.vimrc "$CS_HOME/.vimrc" 2>/dev/null
  rm ~/.vimrc
fi
ln -s "$CS_HOME/.vimrc" ~/.vimrc

rm -r ~/shell 2>/dev/null
ln -s "$CS_HOME/shell" ~/shell

rm -r ~/.vim 2>/dev/null
ln -s "$CS_HOME/.vim" ~/.vim

This script adds symbolic links to your home directory pointing to your dotfiles directory. Much of this code suppresses error messages. The --no-clobber option for mv prevents it from overwriting, and 2>/dev/null suppresses error messages by redirecting them to the trash can of /dev/null.

Every time you run install.sh, it creates backups of .bashrc and .vimrc in the backups/ directory.

Before you run this script, you need to give it execute permissions using the following command:

chmod +x install.sh

Now run it using the following command:

./install.sh

Take a moment to confirm that all your directories and files exist.

Now would be a good time to add your project to source control. Add all your changes, commit them with a meaningful message, and then push.

Step Three -- Creating `.bashrc`

Change to the dotfiles directory and edit your .bashrc file using the following command:

vim .bashrc

Add the following code to .bashrc:

# Loop through files starting with a dot in the current directory
for file in $(find -L ~/shell -type f -name ".*"); do

  # Source the file using the dot (.) operator
  . "$file"
  echo "Sourced file: $file"

done

This streamlined script loads every dotfile it finds in your dotfiles/ directory tree. Now, you can add more dotfiles without changing your .bashrc.

In the next steps, you will create each of the other .bashrc modules.

Before Continuing

It's a good idea to use the following command every time you modify one of your shell/ dotfiles:

. ~/.bashrc

This is how you can activate your changes and test them.

Step Four -- Creating `.functions`

Define all of your custom bash functions in .functions. Open it using the following command:

vim shell/.functions

I have included some functions I have found useful. Add these to your .functions:

dir ()
{
  ls -alF --color=auto --color=always "$@" | less -rEF
  echo
}

cl() {
  if [ -n "$1" ]; then
    cd "$1" 2>/dev/null

    # check if cd was successful
    if [ $? -ne 0 ]; then
      echo -e "Error: Could not change directory to '$1'.\n"
      return 0
    fi
  fi

  clear
  dir
}

hgrep() {
  history | grep "$@"
}

setenv()
{ 
  if [ -z "$1" ] || [ -z "$2" ]; then
    echo -e "Usage: setenv VAR VALUE\n"
    return 1
  fi

  eval $1=\$2;
  export $1;
}

`dir`

The dir function generates a colored listing and pipes the output to less, allowing you to scroll through a long listing. To preserve the color in less, use the --color=always option for ls and the -r option for less.

`cl`

The cl combines ls, clear, cd, and less. It changes to the argument directory--if one is provided--clears the screen, and then produces a detailed, colored listing. Additionally, if the listing is larger than the viewport, the less command takes over, allowing you to navigate the listing.

`setenv`

setenv is a quick way to create an environment variable. Here is how you would use it:

setenv X 'thine dork lord'

`hgrep`

The hgrep function allows you to search your command history using grep. Here is an example of using the it:

hgrep 'ls'

Here is some possible output:

85  cd dotfiles/
86  ll
87  cd ..
88  rm -r dotfiles/
89  ll

Then you can execute the command rm -r dotfiles/ using !88.

Note: The hgrep function makes use of $@, which when evaluated in double quotes, represents all of the arguments passed in.

I strongly recommend acquainting yourself with bash's command history.

Step Five -- Creating `.vars` File

You will include your environment variables and miscellaneous settings in .vars. Open it using the following command:

vim shell/.vars

Include whichever settings you find amusing. Here are some boilerplate settings:

# make less not clear screen at end
export LESS="-X"

# restrict write permissions for others
umask 0002

export LS_OPTIONS='--color=auto'
eval "$(dircolors -b)"

HISTCONTROL=ignoreboth
HISTSIZE=999
HISTFILESIZE=1999

# append to the history file, don't overwrite it
shopt -s histappend

Let’s look at the first three settings:

export LESS="-X" alters the behavior of the less command by preventing it from clearing the terminal once you reach the end of its output. Recall that we use less in our dir function.
export LS_OPTIONS='--color=auto' and eval "$(dircolors -b)" change the color of the output of the ls command.
unmask 0002 is a security setting that gives the owner (you) full permissions and restricts write permissions for others.

The other settings affect your command history. By default bash adds your executed commands to a file called .bash_history. Here are some settings affecting your command history:

HISTCONTROL=ignoreboth combines two other settings: ignorespace, which ignores leading whitespace on commands, and ignoredups, which prevents duplicate commands from being added to command history.
shopt -s histappend makes bash write all your current session's commands to .bash_history, making them available in future sessions.

Step Six -- Creating `.prompt`

Open .prompt using the following command:

vim shell/.prompt

This .prompt file produces a nice, colored prompt that also shows the current git branch if there is one. I like how it defines a variable for each color.

# Define colors
RED="\[\033[0;31m\]"
GREEN="\[\033[0;32m\]"
BLUE="\[\033[0;34m\]"
PURPLE="\[\033[0;35m\]"
CYAN="\[\033[0;36m\]"
YELLOW="\[\033[0;33m\]"
RESET="\[\033[0m\]"

# Function to get the current Git branch
parse_git_branch() {
    git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ \(\1\)/'
}

# Function to set the colored prompt
set_prompt() {
    # Get the current Git branch
    BRANCH=$(parse_git_branch)

    # Set the prompt
    PS1="${GREEN}\u${RESET}@${BLUE}\h${RESET}\n : ${YELLOW}\w${RESET}${PURPLE}${BRANCH}${RESET} $ "
}

# Call the set_prompt function whenever a new prompt is needed
PROMPT_COMMAND=set_prompt

Note: Credit goes to the Claude 3 A.I. for generating this prompt.

This prompt appears as follows:

(green)  username
(blue)   hostname
(orange) current-directory
(purple) git-branch

 username:hostname
 : current-directory (git-branch) $

Step Seven -- Creating `.aliases`

Your aliases go here. Open .aliases using the following command:

vim shell/.aliases

Here are some aliases I use:

alias sup='sudo apt-get update && sudo apt-get upgrade -y'
alias bs=". ~/.bashrc"

alias b="cd ~-"
alias l='cl'
alias ..='l ..'
alias ...='l ../..'

A couple of interesting things here.

alias b="cd ~-" uses the ~- expression, which represents the previous directory. This is a very nice back function.
the l, .., and ... aliases invoke our previously defined cl function in .functions.

Step Eight -- Creating the Vim Files

In this section, we will create .vimrc and all its constituent files.

.vimrc

Open .vimrc using the following command:

vim .vimrc

Add the following to your .vimrc:

" Global
source ~/.vim/set.vim
source ~/.vim/maps.vim
source ~/.vim/autoload.vim

" Plugins

" My plugins
" This is a plugin I wrote
"source ~/.vim/plugin/run_command.vim

" Other
" I use the following third-party plugin
"source ~/.vim/plugin/auto-pairs.vim

The commented-out lines show how to include your custom plugins and third-party plugins.

Note: I strongly recommend browsing vim.org for plugins, which has a large database of plugins that do all sorts of great things for you: intellisense-like completion menus, a file explorer, custom color schemes, syntax files, and more. The tutorial How To Use Vundle to Manage Vim Plugins on a Linux VPS by Justin Ellingwood teaches you how to use the Vundle vim plugin manager to install plugins.

.vim/autoload.vi

Open autoload.vim using the following command:

vim .vim/autoload.vim

This is a very bare bones file:

" Basic indentation for comments (optional)
autocmd FileType html xml setlocal commentstring=autoload FileType css setlocal commentstring=/* %s */

.vim/maps.vim

Open maps.vim using the following command:

vim .vim/maps.vim

Maps are specific to each user. These happen to be useful to me.

" Miscellaneous
"
nnoremap <leader>O mpO<esc>`p
nnoremap <leader>o mpo<esc>`p

" Moving around
"
inoremap <leader><leader> <esc>A

" Buffers and windows
"
nnoremap <leader>wu :wincmd p<CR>
nnoremap <leader>wd :wincmd j<CR>

nnoremap Bd :bd!<cr>

" Saving Files
"
nnoremap <F4> :w<cr>:so %<cr>

nnoremap <leader>s :w<cr>a
inoremap <leader>s <esc>:w<cr>a

.vim/set.vim

Open set.vim using the following command:

vim .vim/set.vim

Here is a good collection of Vim settings.

syntax on
set number

" Disable swap files
set noswapfile

" Enable spell checking
set spelllang=en_us
autocmd FileType text, markdown setlocal spell

" Enable wildmenu
set wildmenu
set wildmode=longest,list

" Display cursor position
set ruler

" Highlight current line
set cursorline

set expandtab
set tabstop=2
set shiftwidth=2

"set relativenumber
"set foldmethod=indent
"set foldnestmax=3

set splitbelow
set splitright

set mouse=a

colorscheme delek
set background=dark

set wrap
set linebreak

set showmatch

set incsearch
set nohlsearch

set autoindent
set smartindent

let mapleader=';'

Here are some key takeaways:

set expandtab
set tabstop=2
set shiftwidth=2

These settings make Vim use tabs--two spaces in size--whenever possible.

"set relativenumber
"set foldmethod=indent
"set foldnestmax=3

I commented this out because I haven't been writing too much code lately. If you write a lot of code, I recommend trying these settings out. They enable folding for indented blocks of code and show line numbers relative to the cursor position.

" Disable swap files
set noswapfile

Those vim .swp swap files are ignored. This shuts them off.

set mouse=a

This lets you use the mouse. I didn't know this one existed until I talked to Claude 3.

set splitbelow
set splitright

By default, :sp splits above and :vs splits right. These settings change the directions to below and left, respectively.

" Highlight current line
set cursorline

This is an interesting setting. It shows a horizontal line below the cursor, making it easier to see where you are.

Step Nine -- Updating Your Repository

Congratulations on making it this far. You have successfully built your dotfiles project. The last step is to update your remote repository.

You're done! Your dotfiles repository is ready to use!

Using Your Dotfiles Repository

Let's consume our dotfiles repository. Create a new Codespace and launch a terminal once VS Code finishes loading. Next, change to your home directory and clone the dotfiles repository using the following commands:

# Clone the repo in the home directory
cd
git clone https://github.com/username/dotfiles.git

Note: Replace username above with your GitHub username.

Change to the dotfiles directory and run the installation script using the following commands:

cd dotfiles

# Run the installation script
chmod +x ./install.sh
./install.sh

# Reload the terminal
source ~/.bashrc

Note: !$ represents the last argument passed to the last command.

Now all your customizations are in place. Don't forget to test everything.

Conclusion

Congratulations on making it through this tutorial! Now, when you create a new Codespace, you have all of your customizations set up and you're ready to start working. Thanks for reading. Now leave, please.

Creating Beautiful User Interfaces With Material Design for Bootstrap 4 & 5 (MDB)

Boone Cabal — Thu, 22 May 2025 22:51:02 +0000

Combining multiple front-end technologies can be challenging due to limited documentation. We’ll solve such a problem by creating a small web application that combines Svelte–a small but powerful front-end technology akin to React and Vue–with the elegant Material Design for Bootstrap 4 & 5 (MDB) framework. It will feature a navigation bar with an embedded dropdown menu that facilitates switching between three different content panes, each populated with stylish MDB components, resulting in an aesthetically appealing and responsive User Interface (UI).

Prerequisites

This article is for the intermediate-to-advanced level web developer who’s conversant in CSS and Bootstrap 5. If you’re not well-versed in either, don’t worry, as this article provides links to useful documentation.

We're going to build our Svelte application using the Svelte REPL sandbox (or just REPL) at svelte.dev. I recommend checking out all the great documentation at svelte.dev, like its Examples section showcasing Svelte's many features, as well as the cool interactive tutorial at learn.svelte.dev.

Here are resources to consider looking at:

Bootstrap 5
- Getting Started with Bootstrap
MDB
- MDBootstrap 5 documentation
Svelte

Step One – Creating a Svelte/MDB Boilerplate in REPL

When you navigate to the Svelte REPL sandbox and click the REPL link, it takes you to a Hello World application with the following code:

(In App.svelte)

<script>

  let name = 'world';

</script>

<h1>Hello {name}!</h1>

Let's link Bootstrap 5, FontAwesome, a Google font, and MDB stylesheets using a special <svelte:head> element and the Popper and MDB JavaScripts. Replace this markup with the following:

<script>

  // Component initialization code goes here.

</script>

<svelte:head>

  <!-- Bootstrap CSS -->
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous"
    />

  <!-- Font Awesome -->
  <link
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    rel="stylesheet"
    />

  <!-- Google Fonts -->
  <link
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    rel="stylesheet"
    />

  <!-- MDB -->
  <link
    href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.3.2/mdb.min.css"
    rel="stylesheet"
    />

</svelte:head>

<body>

  <header class="mb-5">

    <!-- navbar -->

  </header>
  <!-- header -->

  <!-- main -->
  <main class="container py-3">

    <!-- pane content -->

  </main>
  <!-- main -->

  <!--  Bootstrap Bundle with Popper -->
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

  <!-- MDB -->
  <script
    type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.3.2/mdb.umd.min.js"
    ></script>

</body>

<style>

  /* Scripts */

</style>

When you paste code blocks from this article into REPL, it won’t be formatted with the proper whitespace, so you might want to fold the pasted code block, select it, and then tab it in. I hope they consider adding a “format HTML” button.

It’s important to understand that the above-linked files might be obsolete when you read this. I recommend replacing the above <link> and <script> elements with the markup from the MDB installation page. It provides detailed instructions about how to do this.

It’s wise to save this REPL with a meaningful name like Svelte Boilerplate, fork it, and then rename the forked copy to the name of this project. This is akin to creating a commit.

Here is the REPL for this step.

Step Two – Adding Navigation Bar and Cards

Now we'll flesh out our application by adding an MDB navbar, and an accordion as our content for pane 1–the default pane. We'll start with the navigation bar (navbar).

MDB Navigation Bar

Our navbar will have a left-aligned brand logo and a right-aligned dropdown menu. Clicking a menu item switches between panes, and the active pane will be displayed in the dropdown's display text.

We'll build our navbar over several steps, starting with a static navbar containing dummy menu items. Let's start by replacing our  block with the following code:

<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">

  <div class="container-fluid">

    <a class="navbar-brand" href="navbar_Click">Branding</a>

    <!-- Dropdown Menu -->
    <ul class="navbar-nav">

      <div class="nav-item dropdown pe-3">

      <a
        data-mdb-dropdown-init
        class="nav-link dropdown-toggle"
        id="navbarDropdownMenuLink"
        role="button"
        aria-expanded="false"
        >Selected Pane</a>
      <!-- nav-link (dropdown button) -->

      <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

        <li class="dropdown-item">
          <button
            type="button"
            class="btn btn-link"
            data-mdb-ripple-init
            value="Pane 1"
            >Pane 1</button>
        </li>
        <!-- dropdown-item -->

        <li class="dropdown-item">
          <button
            type="button"
            class="btn btn-link"
            data-mdb-ripple-init
            value="Pane 2"
            >Pane 2</button>
        </li>
        <!-- dropdown-item -->

        <li class="dropdown-item">
          <button
            type="button"
            class="btn btn-link"
            data-mdb-ripple-init
            value="Pane 3"
            >Pane 3</button>
        </li>
        <!-- dropdown-item -->

      </ul>
      <!-- dropdown-menu -->

    </ul>
    <!-- Dropdown Menu -->

  </div>
  <!-- container-fluid -->

</nav>
<!-- navbar -->

MDB Accordion

Let’s add an MDB accordion as filler content to pane 1. Replace the  block with the following code, copied from the MDB accordion documentation.

<!-- pane 1 -->
<div class="accordion" id="accordionExampleY">

  <div class="accordion-item">

    <h2 class="accordion-header" id="headingOneY">
      <button data-mdb-collapse-init class="accordion-button" type="button" data-mdb-toggle="collapse"
        data-mdb-target="#collapseOneY" aria-expanded="true" aria-controls="collapseOneY">
      <i class="fas fa-question-circle fa-sm me-2 opacity-70"></i>Accordion Item #1
      </button>
    </h2>
    <!-- accordion-header -->

    <div id="collapseOneY" class="accordion-collapse collapse show" aria-labelledby="headingOneY"
      data-mdb-parent="#accordionExampleY">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is hidden by
        default, until the collapse plugin adds the appropriate classes we use to
        style each element. These classes control the overall appearance and
        the visibility via CSS transitions. You can modify any of this with
        custom CSS or overriding our default variables. It's also worth noting that
        nearly any HTML can go within the <code>.accordion-body</code>, though the
        transition does limit overflow.
      </div>
    </div>
    <!-- accordion-collapse -->

  </div>
  <!-- accordion-item -->

  <div class="accordion-item">

    <h2 class="accordion-header" id="headingTwoY">
      <button data-mdb-collapse-init class="accordion-button collapsed" type="button" data-mdb-toggle="collapse"
        data-mdb-target="#collapseTwoY" aria-expanded="false" aria-controls="collapseTwoY">
      <i class="fas fa-question-circle fa-sm me-2 opacity-70"></i>Accordion Item #2
      </button>
    </h2>
    <!-- accordion-header -->

    <div id="collapseTwoY" class="accordion-collapse collapse" aria-labelledby="headingTwoY"
      data-mdb-parent="#accordionExampleY">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by
        default, until the collapse plugin adds the appropriate classes we use to
        style each element. These classes control the overall appearance and
        the visibility via CSS transitions. You can modify any of this with
        custom CSS or overriding our default variables. It's also worth noting that
        nearly any HTML can go within the <code>.accordion-body</code>, though the
        transition does limit overflow.
      </div>
    </div>
    <!-- accordion-collapse -->

  </div>
  <!-- accordion-item -->

  <div class="accordion-item">

    <h2 class="accordion-header" id="headingThreeY">
      <button data-mdb-collapse-init class="accordion-button collapsed" type="button" data-mdb-toggle="collapse"
        data-mdb-target="#collapseThreeY" aria-expanded="false" aria-controls="collapseThreeY">
      <i class="fas fa-question-circle fa-sm me-2 opacity-70"></i>Accordion Item #3
      </button>
    </h2>
    <!-- accordion-heading -->

    <div id="collapseThreeY" class="accordion-collapse collapse" aria-labelledby="headingThreeY"
      data-mdb-parent="#accordionExampleY">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by
        default, until the collapse plugin adds the appropriate classes we use to
        style each element. These classes control the overall appearance and
        the visibility via CSS transitions. You can modify any of this with
        custom CSS or overriding our default variables. It's also worth noting that
        nearly any HTML can go within the <code>.accordion-body</code>, though the
        transition does limit overflow.
      </div>
    </div>
    <!-- accordion-collapse -->

  </div>
  <!-- accordion-item -->

</div>
<!-- accordion -->
<!-- pane 1 -->

Here is the REPL for this step.

Step Three – Populating Navbar Dropdown Menu

Now, we'll use some Svelte template code to dynamically populate the navbar’s dropdown menu and synchronize its display text with the name of the active pane.

First, let's create a ButtonTypes enumerated type, which represents the currently active pane, and a mode variable of type ButtonTypes. Replace your <script> block with the following code:

<script>
  const ButtonTypes = {
    PANEL_1: 'Panel 1',
    PANEL_2: 'Panel 2',
    PANEL_3: 'Panel 3'
  };
  let mode = ButtonTypes.PANEL_1;
</script>

I use the term “makeshift” because a true enumerated type is only available in TypeScript. Unfortunately, svelte.dev doesn't support TypeScript as of this writing.

Next, let’s dynamically create our dropdown menu items and set the menu's display text to the name of the active pane. Replace the  comment block with the following code:

<!-- Dropdown Menu -->
<ul class="navbar-nav">

  <div class="nav-item dropdown pe-3">

    <a
      data-mdb-dropdown-init
      class="nav-link dropdown-toggle"
      id="navbarDropdownMenuLink"
      role="button"
      aria-expanded="false"
      >{mode}</a>

    <!-- nav-link (dropdown button) -->
    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

      {#each Object.keys(ButtonTypes) as buttonTypeKey}

        <li class="dropdown-item">

          <button
            type="button" 
            class="btn btn-link" 
            data-mdb-ripple-init
            value={ButtonTypes[buttonTypeKey]}
          >{ButtonTypes[buttonTypeKey]}</button>

        </li>
        <!-- dropdown-item -->

      {/each}

    </ul>
    <!-- dropdown-menu -->

  </div>

</ul>
<!-- Dropdown Menu -->

Because ButtonTypes is an object and not a true enumerated type, we iterate over its properties, assigning each menu item's display text.

Here is the REPL for this step.

Step Four – Switching Between Panes

Now we're going to augment our dropdown menu with functionality to switch between panes. For now we’ll create filler content for panes 2 and 3 with <h2> elements. (We already have an accordion in pane 1.) Additionally, we’ll add an if statement to our <main> element that uses our mode enum to decide which pane to display.

First, let’s create a click event-handler function named navbar_Click and attach it to each menu item. navbar_Click changes the active pane by assigning a new value to mode. Replace your <script> element with the following code:

<script>
  const ButtonTypes = {
    PANEL_1: 'Panel 1',
    PANEL_2: 'Panel 2',
    PANEL_3: 'Panel 3'
  };
  let mode = ButtonTypes.PANEL_1;

  const navbar_Click = function(e) {
    console.log(`e.target.value = ${e.target.value}`);
    mode = e.target.value;
  }
</script>

Next, let’s attach navbar_Click to each dropdown menu item <button> as it is created. Replace your  block with the following code.

<!-- Dropdown Menu -->
<ul class="navbar-nav">

  <div class="nav-item dropdown pe-3">

    <a
      data-mdb-dropdown-init
      class="nav-link dropdown-toggle"
      id="navbarDropdownMenuLink"
      role="button"
      aria-expanded="false"
      >{mode}</a>
    <!-- nav-link (dropdown button) -->

    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

      {#each Object.keys(ButtonTypes) as buttonTypeKey}

      <li class="dropdown-item">

        <button 
          on:click={navbar_Click}
          type="button" 
          class="btn btn-link" 
          data-mdb-ripple-init
          value={ButtonTypes[buttonTypeKey]}
        >{ButtonTypes[buttonTypeKey]}</button>

      </li>
      <!-- dropdown-item -->

      {/each}

    </ul>
    <!-- dropdown-menu -->

  </div>
  <!-- nav-item -->

</ul>
<!-- Dropdown Menu -->

Finally, let’s add an if statement to <main> that uses mode to determine which pane to display. Update your <main> element with the following if statement:

<!-- main -->
<main class="container py-3">

  {#if mode === ButtonTypes.PANEL_1}

    <!-- pane 1 -->

    <!-- accordion ... -->

    <!-- pane 1 -->

  {:else if mode === ButtonTypes.PANEL_2}

    <!-- pane 2 -->
    <h2>Panel 2</h2>
    <!-- pane 2 -->

  {:else if mode === ButtonTypes.PANEL_3}

    <!-- pane 3 -->
    <h2>Panel 3</h2>
    <!-- pane 3 -->

  {/if} 

</main>
<!-- main -->

You’ll want to replace the above  block with either the accordion markup you used earlier in this article, or, preferably, that found in the MDB accordion documentation.

Test the UI and make sure the dropdown menu properly switches between panes.

Here is the REPL for this step.

Step Five – Disabling the Active Panel’s Menu Item

Sometimes it’s useful to disable or hide elements in a UI to prevent invalid actions or give the user hints about how the user interface works. We’ll disable the dropdown menu item representing the active pane, thus helping the user understand which pane is active.

First, let’s add a disableMenuItem boolean variable to our <script>. Replace your <script> with the following code:

<script>
  const ButtonTypes = {
    PANEL_1: 'Panel 1',
    PANEL_2: 'Panel 2',
    PANEL_3: 'Panel 3'
  };
  let mode = ButtonTypes.PANEL_1;

  let disableMenuItem = false;

  const navbar_Click = function(e) {
    console.log(`e.target.value = ${e.target.value}`);
    mode = e.target.value;
  }
</script>

Next, let's add a disabled attribute to the <button> menu item, assigning it to disableMenuItem. Replace the  block with the following code:

<!-- Dropdown Menu -->
<ul class="navbar-nav">

  <div class="nav-item dropdown pe-3">

    <a
      data-mdb-dropdown-init
      class="nav-link dropdown-toggle"
      id="navbarDropdownMenuLink"
      role="button"
      aria-expanded="false"
      >{mode}</a>
    <!-- nav-link (dropdown button) -->

    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

      {#each Object.keys(ButtonTypes) as buttonTypeKey}

      <li class="dropdown-item">

        <button 
          on:click={navbar_Click}
          disabled={disableMenuItem = ButtonTypes[buttonTypeKey] === mode}
          type="button" 
          class="btn btn-link" 
          data-mdb-ripple-init
          value={ButtonTypes[buttonTypeKey]}
          >{ButtonTypes[buttonTypeKey]}</button>

      </li>
      <!-- dropdown-item -->

      {/each}

    </ul>
    <!-- dropdown-menu -->

  </div>
  <!-- nav-item dropdown -->

</ul>
<!-- Dropdown Menu -->

Here is the REPL for this step.

Step Six – Fleshing Out Panels With MDB Components

Now we'll flesh out our UI by adding MDB components, taken directly from the MDB website documentation–to panes 2 and 3. Let's add a card gallery to pane 2 and feature badges to pane 3. (We’ve already added an MDB accordion to pane 1, so we only need content for panes 2 and 3.)

Panel 2 – MDB Cards

Replace your  block with the following card gallery markup.

I’ve added whitespace and comments to the following code.

<!-- pane 2 -->
<div class="row row-cols-1 row-cols-md-3 g-4">

  <div class="col">

    <div class="card">

      <img 
        src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
        class="card-img-top" 
        alt="Hollywood Sign on The Hill"/>

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to
          additional content. This content is a little bit longer.
        </p>

      </div>
      <!-- card-body -->

    </div>
    <!-- card -->

  </div>
  <!-- col -->

  <div class="col">

    <div class="card">

      <img 
        src="https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp" 
        class="card-img-top" 
        alt="Palm Springs Road"/>

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to
          additional content. This content is a little bit longer.
        </p>

      </div>
      <!-- card-body -->

    </div>
    <!-- card -->

  </div>
  <!-- col -->

<div class="col">

    <div class="card">

      <img 
        src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp" 
        class="card-img-top" 
        alt="Los Angeles Skyscrapers"/>

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>

      </div>
      <!-- card-body -->

    </div>
    <!-- card -->

  </div>
  <!-- col -->

  <div class="col">

    <div class="card">

      <img 
        src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp" 
        class="card-img-top" 
        alt="Skyscrapers"/>

      <div class="card-body">

        <h5 class="card-title">Card title</h5>

        <p class="card-text">
          This is a longer card with supporting text below as a natural lead-in to
          additional content. This content is a little bit longer.
        </p>

      </div>

    </div>
    <!-- card -->

  </div>
  <!-- col -->

</div>
<!-- row -->
<!-- pane 2 -->

Panel 3 – MDB Feature Badges

Replace your  block with the following feature badges markup:

<!-- pane 3 -->
<section class="mb-5">

  <div class="row gx-lg-5">

    <div class="col-lg-6 mb-5">
      <div class="d-flex align-items-start">
        <div class="flex-shrink-0">
          <div class="p-3 badge-primary rounded-4">
            <i class="fas fa-cloud-upload-alt fa-lg text-primary fa-fw"></i>
          </div>
        </div>
        <div class="flex-grow-1 ms-4">
          <p class="fw-bold mb-1">Tutorials</p>
          <p class="text-muted mb-1">
            Dozens of free tutorials to help you discover the full potential of MDB.
          </p>
          <small><a href="google.com">Learn more</a></small>
        </div>
      </div>

    </div>
    <!-- col -->

    <div class="col-lg-6 mb-5">
      <div class="d-flex align-items-start">
        <div class="flex-shrink-0">
          <div class="p-3 badge-primary rounded-4">
            <i class="fas fa-database fa-lg text-primary fa-fw"></i>
          </div>
        </div>
        <div class="flex-grow-1 ms-4">
          <p class="fw-bold mb-1">Integrations</p>
          <p class="text-muted mb-1">
            MDB is integrated with all major technologies and tools.
          </p>
          <small><a href="google.com">Learn more</a></small>
        </div>
      </div>
    </div>
    <!-- col -->

    <div class="col-lg-6 mb-5">
      <div class="d-flex align-items-start">
        <div class="flex-shrink-0">
          <div class="p-3 badge-primary rounded-4">
            <i class="fas fa-stream fa-lg text-primary fa-fw"></i>
          </div>
        </div>
        <div class="flex-grow-1 ms-4">
          <p class="fw-bold mb-1">Backend friendly</p>
          <p class="text-muted mb-1">
            MDB is designed to be seamlessly integrated and used with the backend.
          </p>
          <small><a href="google.com">Learn more</a></small>
        </div>
      </div>
    </div>
    <!-- col -->

    <div class="col-lg-6 mb-5">
      <div class="d-flex align-items-start">
        <div class="flex-shrink-0">
          <div class="p-3 badge-primary rounded-4">
            <i class="fas fa-copy fa-lg text-primary fa-fw"></i>
          </div>
        </div>
        <div class="flex-grow-1 ms-4">
          <p class="fw-bold mb-1">Support and community</p>
          <p class="text-muted mb-1">
            The MDB team and our global community are there to support you.
          </p>
          <small><a href="google.com">Learn more</a></small>
        </div>
      </div>
    </div>
    <!-- col -->

  </div>
  <!-- row-->

</section>
<!-- pane 3 -->

Another great benefit of MDB is the relative ease with which you can create responsive web pages. Try horizontally resizing the sandbox Result window and notice how the components resize and reposition as breakpoints are crossed.

Here is the REPL for this step.

Cleaning Up Our Code

Now that we’ve finished creating a winsome UI, we’ll clean up and refactor our code. First, we’ll divide our code into multiple files by using <svelte:component>.

Step One – Using svelte:component

Svelte offers a very useful <svelte:component> element that lets us pass a component to display using the this directive.

Check out this great example of using svelte:component and Working with DOM nodes using the bind:this={dom_node} directive for more about <svelte:component> and the this directive, respectively.

First, let’s create three new components representing each of our panes, Move your  code block into a new Panel1.svelte,  into Panel2.svelte, and  into Panel3.svelte.

Next, let’s import the new panel components into App.svelte. Replace your <script> block with the following code:

(In App.svelte)

<script>
  import Panel1 from './Panel1.svelte';
  import Panel2 from './Panel2.svelte';
  import Panel3 from './Panel3.svelte';

  const ButtonTypes = {
    PANEL_1: 'Panel 1',
    PANEL_2: 'Panel 2',
    PANEL_3: 'Panel 3'
  };
  let mode = ButtonTypes.PANEL_1;

  const navbar_Click = function(e) {
    console.log(`e.target.value = ${e.target.value}`);
    mode = e.target.value;
  }
</script>

Finally, let’s update App.svelte to use <svelte:component> elements to display our new pane components. Replace your <main> with the following code:

(In App.svelte)

<!-- main -->
<main class="container py-3">

  {#if mode === ButtonTypes.PANEL_1}

  <!-- pane 1 -->
  <svelte:component this={Panel1} />
  <!-- pane 1 -->

  {:else if mode === ButtonTypes.PANEL_2}

  <!-- pane 2 -->
  <svelte:component this={Panel2} />
  <!-- pane 2 -->

  {:else if mode === ButtonTypes.PANEL_3}
  <!-- pane 3 -->
  <svelte:component this={Panel3} />
  <!-- pane 3 -->

  {/if}

</main>
<!-- main -->

Here is the REPL for this step.

Step Two – Creating Store For `mode` Variable

Sometimes it’s more convenient to use some application-wide state (a global) instead of propagating it from a parent component to a child. Stores are the Svelte equivalent of readable and writable global variables. To use a store, simply import writable from svelte/store, and then create a store variable using writable. Furthermore, you must prefix a store variable with $ when using it.

This is all you need to know about stores for this article. The MDB article Working with Svelte stores provides a thorough explanation of stores.

We need to move some code around. First, let’s create a stores.js file that contains ButtonTypes, imports writable, and redefines mode as a writable store. Create stores.js and add the following code:

(In stores.js)

import { writable } from 'svelte/store';

export let ButtonTypes = {
  PANEL_1: 'Panel 1',
  PANEL_2: 'Panel 2', 
  PANEL_3: 'Panel 3' 
};

export const mode = writable(ButtonTypes.PANEL_1);

Next, let’s update our App.svelte by importing mode and ButtonTypes from stores.js.

(In App.svelte)

<script>
  import { mode, ButtonTypes } from './stores.js'
  import Panel1 from './Panel1.svelte';
  import Panel2 from './Panel2.svelte';
  import Panel3 from './Panel3.svelte';

  let disableMenuItem = false; 

  const navbar_Click = function(e) { 
    console.log(`e.target.value = ${e.target.value}`);
    mode = e.target.value;
  }
</script>

This will result in a syntax error. To fix it, type CTRL+f, and then search-and-replace all instances of mode with $mode. However, you do not want to apply this change to the mode in the import statement.

Here is the REPL for this step.

Step Three – Creating a Layout Component

Now we'll learn how to create generic templates using the <slot> element.

An Example of Using `<slot>`

Unlike template processors like Python Flask, Svelte doesn't use template inheritance; instead, it uses composition. Therefore, we don’t inherit from a parent template; instead, any component needing some shared layout will contain a reference to a layout component.

We'll digress and walk through an example using <slot>. First, let's create a BaseLayout component with some shared structure. It will use <slot> (or <slot />) elements as placeholders wherein a Page component will inject code.

(In BaseLayout.svelte)

<script>
  export title;
</script>

<div class="layout">

  <header>
    <h1>{title}</h1>
  </header>

  <main>
    <slot />
  </main>

  <footer>
    <!-- footer content ... -->
  </footer>

</div>

This BaseLayout component defines a header, content area, and footer, and an exported title property.

Now let’s create a Page component that contains BaseLayout component instance and injects code into it.

(In Page.svelte)

<script>
  import BaseLayout from './BaseLayout.svelte';
  let title = "Home Page";
</script>

<BaseLayout {title}>
  <p>This is the home page content.</p>
</BaseLayout>

Even the most casual observer will notice how we bind Page's title variable to Layout's title property using the {title} directive, illustrating passing state from a parent (Page) component to a child (BaseLayout).

You can find a thorough explanation of passing state between parent and child components in the article Sharing State Between Components.

Using `<slot>` in Our Application

Let's use <slot> in our application. First, create a new Layout.svelte file and move all the code from App.svelte into it. Replace the  block with the following code.

(In Layout.svelte)

<!-- main -->
<main class="container py-3">

  <slot />

</main>
<!-- main -->

Next, replace the <script> element with the following code:

(In Layout.svelte)

<script>
  import { mode, ButtonTypes } from './stores.js';

  // Variables 
  let disableMenuItem = false;

  // DOM event-handlers
  const navbar_Click = function(e) {
    console.log(`e.target.value = ${e.target.value}`); 
    $mode = e.target.value;  
  }
</script>

Great! You refactored a base layout into its own component.

Finally, let’s update App.svelte. Import Layout, and use it as an element to inject an if statement into its inner HTML. Replace all your App.svelte code with the following code:

(In App.svelte)

<script>
  import { mode, ButtonTypes } from './stores.js';
  import Panel1 from './Panel1.svelte';
  import Panel2 from './Panel2.svelte';
  import Panel3 from './Panel3.svelte';
  import Layout from './Layout.svelte';

</script>

<Layout>

  {#if $mode === ButtonTypes.PANEL_1}

    <!-- pane 1 -->
    <svelte:component this={Panel1} />
    <!-- pane 1 -->


  {:else if $mode === ButtonTypes.PANEL_2}

    <!-- pane 2 -->
    <svelte:component this={Panel2} />
    <!-- pane 2 -->


  {:else if $mode === ButtonTypes.PANEL_3}

    <!-- pane 3 -->
    <svelte:component this={Panel3} />
    <!-- pane 3 -->

  {/if}

</Layout>

Check out slot fallbacks and named slots for great examples of using <slot>.

Here is the REPL for this step.

Nested components let you compose more complex components, making it easier to understand and maintain your codebase.

Conclusion

We covered a lot in this article. Now you have the tools to create dainty, pleasurable UIs with MDB and compose nested components. Have fun using Svelte, friend. Now leave, please.

DEV Community: Boone Cabal

How to Make DigitalOcean Markdown Vim Plugin

Introduction

Prerequisites

Setting Up Plugin Files and Directories

Step One -- Installing Vim

Step Two -- Creating .vimrc and .vim Directories

Step Three –- Creating and Sourcing Plugin File

Building the Plugin

What Are Mappings?

Step One -- Creating Bracket Mappings

A Problem With This Map

Mappings

Updated do_markdown.vim

Step Two – Creating Block Templates and Mappings

Updated do_markdown.vim

Step Three -- Making Function to Load Templates

Updated do_markdown.vim

Step Four – Creating Cursor Movement Function

Updated do_markdown.vim

Tying It All Together

Blocks

code.txt

out.txt

lab.txt

crp.txt

Environment Variations

ecod.txt

elab.txt

eout.txt

ecpr.txt

Callouts

nowa.txt

note.txt

warn.txt

info.txt

drft.txt

col.txt

dets.txt

Updated do_markup.vim

How I Use This Plugin

Conclusion

Changing Keyboard Layouts - Let's Build a Browser Extension

Introduction

Prerequisites

How It Works

Project Structure

Using the Model-View-Controller (MVC) Architecture

Building and Running Unit Tests

Setting Up the Development Environment

Writing and Running Tests

Installing the Extension for Development

Testing the Extension Manually

Conclusion

How to Rapidly Build Browser Extensions With AI

Introduction

Step 1 — Generating Project Code Using README.MD

Step 2 — Installing and Testing Your Extension

Step 3 — Adding a Toggle Feature

Step 4 — Fixing the Unhighlighting Bug

Browser Extension: Simple Page Text Highlighter

Functionality Details

Bro Tips

Conclusion

Mastering Vim: Buffers, Windows, and Your Text Editing Arsenal

Introduction

Buffers: Your Textual Workspaces

Viewing Buffers

:ls Helper Function

Saving Buffers to Files

Creating Buffers

Deleting Buffers

Opening Files Into Buffers

The # Indicator

Navigating Between Buffers

Iterating Over Buffers

Exiting Vim

Buffer States

Unlisted

Inactive

Step Two -- Creating `.vimrc` and `.vim` Directories

Updated `do_markdown.vim`

Updated `do_markdown.vim`

Updated `do_markdown.vim`

Updated `do_markdown.vim`

Step 1 — Generating Project Code Using `README.MD`

`:ls` Helper Function

The `#` Indicator

Demonstrating `:new`

Demonstrating `:vsplit`

Demonstrating `:split`

Settings for `:new`, `:sp`, and `:vs`

Your First Pipe and Filter using `sed` and `awk`

Step One -- Outputting Process Info With `ps`

Step Two -- Filtering User Process Info With `awk`

Step Two -- Creating `install.sh`

Step Three -- Creating `.bashrc`

Step Four -- Creating `.functions`

`dir`

`cl`

`setenv`

`hgrep`

Step Five -- Creating `.vars` File

Step Six -- Creating `.prompt`

Step Seven -- Creating `.aliases`