The Software Engineer's Guide to Glide Browser: Keyboard-Focused Web Development
The project glide-browser/glide is an extensible and keyboard-focused web browser built on top of Firefox. It’s designed for users who prefer navigating the web primarily with the keyboard, offering advanced features for efficiency and customization.
From an engineering perspective, Glide Browser offers several appealing advantages
Keyboard-Centric Workflow
If you spend a lot of time in a command line, IDE, or code editor, you're likely fast with a keyboard. Glide adopts this paradigm for web browsing, allowing for faster navigation and reducing the need to constantly switch to your mouse. This can be a huge boost to productivity.
Deep Extensibility and Customization
It's built to be highly configurable. You can define your own modal keymaps and set up site-specific settings/keymaps. This is fantastic for automating repetitive browsing tasks, creating a highly specialized environment for development tasks, or just making your browser work exactly the way you think.
Web Extensions API Support
Since it's built on Firefox, it supports the standard Web Extensions API. This means you can often use existing Firefox extensions, or develop your own custom extensions to integrate your workflow directly into the browser.
Developer Tool Integration
Since it's a Firefox-based browser, you get access to the powerful Firefox Developer Tools, which are essential for web development and debugging.
Configuration as Code
Its configuration uses TypeScript, which allows for a programmatic, version-controllable, and type-safe approach to customizing your browser. This appeals to engineers who like to manage their tools using configuration files checked into a version control system like Git.
Since Glide is a browser application, the typical "introduction" is to download and install it, rather than adding it as a library dependency (like you would with the other popular image-loading library also named "Glide").
Download and Installation
The best starting point is usually the project's official documentation or GitHub repository.
Look for a Download link, which typically provides pre-built binaries for your operating system (like Linux, macOS, or Windows).
Initial Launch and Keyboard Focus
Once installed, launch the browser.
The key to using it effectively is to forget the mouse and start learning the keybindings. The documentation will have a list of default keymaps.
Configuration for Customization
Look for the location of the configuration file (often a TypeScript file like config.ts). This is where you'll define your custom settings and keymaps.
You'll likely use this file to configure things like modal keybindings, fuzzy tab manager settings, or site-specific rules.
Since you don't typically "code" with the browser but rather configure it, a relevant example is a snippet from its TypeScript configuration file (config.ts).
This hypothetical example shows how you might define a new keybinding to quickly open a specific project management dashboard, only when you are on a certain website.
// Sample config.ts for Glide Browser
import { config, site, Mode } from 'glide-browser/config';
// Define a custom keybinding to quickly open a specific developer dashboard.
config.modes.normal.keymaps.set('d', async (browser) => {
// 'browser' object provides access to browser APIs
await browser.tabs.open('https://dev-dashboard.mycompany.com', { background: true });
browser.notify('Opening Dev Dashboard!');
});
// Create a site-specific setting to always use "Vim mode" on GitHub.
// This is purely illustrative and depends on Glide's actual API structure.
config.sites.add(
site('https://github.com/*')
.add({
// Assuming a 'mode' setting or similar API exists
mode: Mode.Vim,
keymaps: {
// Override 'j' to do something custom only on GitHub
'J': (browser) => {
browser.tabs.goBack(); // 'J' goes back a page on GitHub
}
}
})
);
// Apply configuration
export default config;
Programmatic Configuration
The configuration is a TypeScript file, allowing you to use programming logic (if statements, functions, etc.) to define your browser's behavior.
API Access
You interact with the browser's functionality (like opening tabs, navigating, or showing notifications) through an exposed browser API.
Modes and Sites
It uses concepts like modes (like a 'normal' mode or a hypothetical 'insert' mode, similar to Vim) and site-specific settings to organize and apply rules granularly.
