Qutebrowser: El navegador de la productividad
Introducción
Para nada es un secreto que en La Cueva del Neandertech somos adictos a Neovim, desde su ligereza, su personalización y por su puesto, sus atajos de teclado que si bien suponen una curva de aprendizaje alta, una vez dominados notarás la gran diferencia.
Con esto en mente quiero presentarles lo que para mí es un fuerte candidato a convertirse en mi navegador por defecto: Qutebrowser.
Las computadoras no siempre tuvieron una interfaz gráfica como la que podemos observar hoy en día; en sus inicios las interacciones se realizaban mediante comandos en una terminal, lo que requería de un conocimiento más técnico para poder utilizarlas. Mi postura la pueden conocer en el artículo GUI vs CLI: Una batalla silenciosa
Con la aparición de las interfaces gráficas, el mouse fue diseñado para poder navegar y seleccionar los elementos en pantalla de una manera mucho más simple. De hecho una de las razones principales por la que en los sistemas operativos de microsoft se incluían juegos en sus inicios era para que las personas se familiarizaran con el uso del mouse.
En este contexto QuteBrowser es un navegador minimalista que encaja a la perfección con la filosofía "Mouse-Less" que como su nombre lo indica, invita a utilizar el mouse lo menos posible y en su lugar utilizar atajos de teclado.
¿Porque usarlo?
Si, soy consciente que no a todos les va a llamar la atención usarlo, puesto que la curva de aprendizaje sería increíblemente abrumadora. En mi caso tengo la ventaja de que tengo ya experiencia con Neovim por lo cual no me es para nada difícil acostumbrarme a los atajos que se manejan.
Hasta hace nada estaba usando la extensión Vimium la cual intenta emular (y de buena manera) los bindings que tiene dicho editor, y debo de ser completamente sincero y decir que es excelente en lo que hace.
Pero se lo que muchos están pensando, y de seguro es lo mismo que piensan en mi trabajo cuando me ven ejecutar ;hfld;hfka para navegar por un simple menú y submenú: "¿Qué le pasa a este loco?" Muy probablemente crean que es una pérdida de tiempo, y lo digo porque al principio también lo creía. Cuando comencé a profundizar en Vim me sentí bastante superado e incluso varias veces pensé en simplemente dejarlo e irme a VSCode, o en su defecto regresar a mis orígenes con Sublime Text pero 2 años después les puedo asegurar que ha sido lo mejor que he podido hacer, y espero que con QuteBrowser sea igual.
Características
Por si la perfecta integración de los atajos de Vim fuera poco, Qutebrowser nos ofrece una personalización bastante extensa. Al estar basado en Python, cualquier usuario con conocimientos básicos del lenguaje puede ajustar su configuración con bastante facilidad. Además, la comunidad ha desarrollado una gran cantidad de plugins y scripts que potencian aún más las funcionalidades de este navegador. Desde scripts para realizar automatizaciones hasta ajustes en el comportamiento del navegador, la personalización es un aspecto clave en Qutebrowser.
Configuración personalizable
Con Qutebrowser, no solo tienes el control sobre el aspecto visual, como los temas y el esquema de colores, sino también sobre el funcionamiento interno. La configuración está estructurada en un archivo --config.py--, donde puedes personalizar prácticamente todo lo que se te ocurra, desde las fuentes hasta los métodos de navegación, y mucho más. Además, puedes incorporar scripts de tampermonkey, lo cual lo hace extremadamente flexible.
Por ejemplo, si como yo, eres fanático de automatizar tareas, puedes configurar atajos específicos para abrir tus sitios web más visitados o realizar búsquedas en tus motores de búsqueda favoritos directamente desde la barra de direcciones, sin necesidad de scripts adicionales.
Si me siguen desde hace tiempo sabrán que me encanta la personalización, y en especial que la computadora se adapte a mi flujo de trabajo y no al revés. Y como saben hace un par de meses subí este artículo Cómo Transformé mi ChatGPT: Estilos y Scripts Personalizados
Teniendo en cuenta eso, ¿Como no me iba a enamorar de QuteBrowser? Si me permite cambiar los colores de absolutamente todo, y no solo eso, sino que también me permite cambiar la fuente, el tamaño, y hasta la forma en la que se comporta el navegador.
¿A que se ve bonito? Es un tema Synthwave, por que en ese momento tenía el tema en Neovim y quería que ambos se vieran igual.
¿Perdón? ¿Quieres saber cómo lo hice? Pues aquí tienes el código:
synthwave = {
# Dark background with synthwave vibe
'synth0': '#1a1a40',
'synth1': '#1a1a40',
'synth2': '#1a1a40',
'synth3': '#52057b',
# Bright neons for accents
'synth4': '#ff00ff', # Neon pink
'synth5': '#00ffff', # Neon cyan
'synth6': '#ff1493', # Deep pink
# Soft purple and blue tones
'synth7': '#8a2be2',
'synth8': '#1a1a40', # Same dark background
'synth9': '#4682b4', # Steel blue
'synth10': '#483d8b', # Dark slate blue
# Errors and warnings with a synthwave twist
'synth11': '#ff4500', # Orange red
'synth12': '#ffa07a', # Light salmon for warnings
'synth13': '#ffff00', # Bright yellow for highlights
'synth14': '#00ffff', # Neon cyan for status
'synth15': '#ff6347', # Tomato red for emphasis
}
# Replace the matrix colors with synthwave colors as follows:
c.colors.completion.category.bg = synthwave['synth0']
c.colors.completion.category.border.bottom = synthwave['synth0']
c.colors.completion.category.border.top = synthwave['synth0']
c.colors.completion.category.fg = synthwave['synth5']
c.colors.completion.even.bg = synthwave['synth1']
c.colors.completion.odd.bg = synthwave['synth1']
c.colors.completion.fg = synthwave['synth4']
c.colors.completion.item.selected.bg = synthwave['synth3']
c.colors.completion.item.selected.border.bottom = synthwave['synth3']
c.colors.completion.item.selected.border.top = synthwave['synth3']
c.colors.completion.item.selected.fg = synthwave['synth6']
c.colors.completion.match.fg = synthwave['synth13']
c.colors.completion.scrollbar.bg = synthwave['synth1']
c.colors.completion.scrollbar.fg = synthwave['synth5']
c.colors.downloads.bar.bg = synthwave['synth0']
c.colors.downloads.error.bg = synthwave['synth11']
c.colors.downloads.error.fg = synthwave['synth5']
c.colors.downloads.stop.bg = synthwave['synth15']
c.colors.downloads.system.bg = 'none'
c.colors.hints.bg = synthwave['synth13']
c.colors.hints.fg = synthwave['synth0']
c.colors.hints.match.fg = synthwave['synth10']
c.colors.keyhint.bg = synthwave['synth1']
c.colors.keyhint.fg = synthwave['synth5']
c.colors.keyhint.suffix.fg = synthwave['synth13']
c.colors.messages.error.bg = synthwave['synth11']
c.colors.messages.error.border = synthwave['synth11']
c.colors.messages.error.fg = synthwave['synth5']
c.colors.messages.info.bg = synthwave['synth8']
c.colors.messages.info.border = synthwave['synth8']
c.colors.messages.info.fg = synthwave['synth5']
c.colors.messages.warning.bg = synthwave['synth12']
c.colors.messages.warning.border = synthwave['synth12']
c.colors.messages.warning.fg = synthwave['synth5']
c.colors.prompts.bg = synthwave['synth2']
c.colors.prompts.border = '1px solid ' + synthwave['synth0']
c.colors.prompts.fg = synthwave['synth5']
c.colors.prompts.selected.bg = synthwave['synth3']
c.colors.statusbar.caret.bg = synthwave['synth15']
c.colors.statusbar.caret.fg = synthwave['synth5']
c.colors.statusbar.caret.selection.bg = synthwave['synth15']
c.colors.statusbar.caret.selection.fg = synthwave['synth5']
c.colors.statusbar.command.bg = synthwave['synth2']
c.colors.statusbar.command.fg = synthwave['synth5']
c.colors.statusbar.command.private.bg = synthwave['synth2']
c.colors.statusbar.command.private.fg = synthwave['synth5']
c.colors.statusbar.insert.bg = synthwave['synth14']
c.colors.statusbar.insert.fg = synthwave['synth1']
c.colors.statusbar.normal.bg = synthwave['synth0']
c.colors.statusbar.normal.fg = synthwave['synth5']
c.colors.statusbar.passthrough.bg = synthwave['synth10']
c.colors.statusbar.passthrough.fg = synthwave['synth5']
c.colors.statusbar.private.bg = synthwave['synth3']
c.colors.statusbar.private.fg = synthwave['synth5']
c.colors.statusbar.progress.bg = synthwave['synth5']
c.colors.statusbar.url.error.fg = synthwave['synth11']
c.colors.statusbar.url.fg = synthwave['synth5']
c.colors.statusbar.url.hover.fg = synthwave['synth8']
c.colors.statusbar.url.success.http.fg = synthwave['synth5']
c.colors.statusbar.url.success.https.fg = synthwave['synth14']
c.colors.statusbar.url.warn.fg = synthwave['synth12']
c.colors.tabs.bar.bg = synthwave['synth3']
c.colors.tabs.even.bg = synthwave['synth3']
c.colors.tabs.even.fg = synthwave['synth5']
c.colors.tabs.indicator.error = synthwave['synth11']
c.colors.tabs.odd.bg = synthwave['synth3']
c.colors.tabs.odd.fg = synthwave['synth5']
c.colors.tabs.selected.even.bg = synthwave['synth0']
c.colors.tabs.selected.even.fg = synthwave['synth5']
c.colors.tabs.selected.odd.bg = synthwave['synth0']
c.colors.tabs.selected.odd.fg = synthwave['synth5']
c.colors.webpage.bg = 'black'
Gruvbox:
Matrix:
Ntech:
Lo puedes usar perfectamente como una plantilla para crear tu propio tema. O si quieres ver más te comparto mi repositorio de Dotfiles
Más adelante subiré un artículo sobre mis Dotfiles y como los tengo configurados.
Integración
Qutebrowser también se integra con herramientas externas, algo que para los que trabajamos en entornos de desarrollo es clave. ¿Necesitas abrir rápidamente un enlace en tu editor de código o hacer una búsqueda específica en tu terminal? Con Qutebrowser puedes hacerlo sin esfuerzo. Su filosofía de "menos mouse, más teclado" no solo ahorra tiempo, sino que mejora considerablemente el flujo de trabajo.
Hace un par de días publique un artículo sobre Bitwarden y en el mismo mencionaba que una de las cosas que más me gustaba era la integración que tenía con el navegador, y QuteBrowser no se queda atrás. Puedes configurar atajos para abrir tus contraseñas, o incluso para copiarlas al portapapeles, lo cual es una maravilla.
Debo de admitir que por cuestiones laborales me encuentro usando Windows y no Linux como me gustaría, aún así no es impedimento para usar el navegador, aunque sí, la experiencia se ve mermada debido a las limitaciones que ofrece el S.O. sobretodo cuando se trata de ejecutar scripts.
Soporte para Extensiones
Aunque Qutebrowser es minimalista y evita el peso innecesario de algunas características que otros navegadores llevan de serie, cuenta con soporte para muchas extensiones básicas a través de userscripts y configuraciones avanzadas. Esto significa que no necesitas renunciar completamente a tus funciones favoritas de otros navegadores. Puedes encontrar userscripts de código abierto en línea que replican funcionalidades de bloqueadores de anuncios, gestores de contraseñas e incluso herramientas para la productividad.
Es importante mencionar que las extensiones de Qutebrowser son complemente distintas a las de los navegadores convencionales, ya que en lugar de ser complementos que están en una tienda de aplicaciones, son scripts que se ejecutan en el navegador usando TamperMonkey y GreaseMonkey. Esto puede ser un poco más complicado de instalar, pero una vez que te acostumbras, verás que es una forma muy eficiente de personalizar tu experiencia de navegación.
Configurando Qutebrowser para Desarrollo
Si te has decidido a probar Qutebrowser, te recomiendo configurar los atajos de teclado básicos. Para ello, puedes abrir el archivo de configuración config.py y definir tus propias combinaciones de teclas. Un buen inicio sería personalizar los atajos que usas más a menudo. Por ejemplo, si prefieres utilizar una combinación de teclas distinta para abrir una nueva pestaña o cerrar una ventana, puedes cambiarlo en este archivo con facilidad.
Otro consejo útil es ajustar el motor de búsqueda predeterminado. Por defecto, Qutebrowser usa DuckDuckGo, pero puedes cambiarlo a cualquier otro motor simplemente editando el archivo config.py.
En el artículo anterior hablé sobre Github Search: Domina Las Búsquedas de Código, y si eres un desarrollador que utiliza mucho esta plataforma, te recomiendo que lo pongas como motor de búsqueda predeterminado.
Les proporciono un ejemplo de mi configuración, que si bien no es la más avanzada, es un buen punto de partida para aquellos que quieran personalizar su experiencia de navegación:
config.load_autoconfig(False)
# Binding para abrir la configuración
config.bind(';e', 'config-edit')
# Configuración de la barra de estado
config.set('statusbar.widgets', ['url', 'scroll', 'history', 'tabs', 'progress' , 'text:NeanderTech','clock'])
# Configuración del editor para abrir archivos
c.editor.command = ['nvim', '-f', '{file}', '-c', 'normal {line}G{column0}l']
# Página de inicio (puerto localhost para el servidor PHP)
c.url.start_pages = ['https://neanderpruebas.com','https://phind.com', 'https://app.daily.dev']
# Motor de búsqueda predeterminado
c.url.searchengines = {'DEFAULT': 'https://www.duckduckgo.com/search?q={}',
'g': 'https://www.google.com/search?q={}',
'yt': 'https://www.youtube.com/results?search_query={}',
'b': 'https://www.bing.com/search?q={}',
'gs': 'https://github.com/search?q={}',
'p': 'https://www.phind.com/search?q={}'}
# Bloqueo de anuncios activado
c.content.blocking.enabled = True
# Habilitar el uso de la consola de desarrollo (DevTools)
c.content.default_encoding = 'utf-8'
# Configurar el User-Agent para evitar problemas de compatibilidad
c.content.headers.user_agent = 'cloudflare 503 workaround'
# Habilitar JavaScript en todas las páginas para que los console.log funcionen
c.content.javascript.enabled = True
# Atajo para cambiar a la siguiente pestana
config.bind('<Ctrl-p>', 'tab-next', mode='normal')
# Atajo para cambiar a la siguiente pestana
config.bind('<Ctrl-o>', 'tab-prev', mode='normal')
# Atajo para ir hacia atrás en el historial
config.bind('<backspace>', 'back', mode='normal')
# Habilitar la carga de imágenes
c.content.images = True
# Habilitar el almacenamiento de cookies
c.content.cookies.accept = 'all'
# Habilitar la apertura de los enlaces en pestañas nuevas en segundo plano
c.tabs.background = True
c.content.tls.certificate_errors = 'ask-block-thirdparty'
config.set('content.tls.certificate_errors', 'load-insecurely', '*://*.neanderpruebas.com/*')
config.source('qutebrowser-synthwave.py')
¿Para quién es Qutebrowser?
Me encantaría que todos probaran Qutebrowser por lo menos una vez en su vida, pero la realidad es que puede que no sea para todos. Si eres un usuario que disfruta de la navegación con mouse, o si prefieres la simplicidad de los navegadores convencionales, Qutebrowser puede no ser la mejor opción para ti, y eso está bien.
Su enfoque en la navegación sin mouse, su curva de aprendizaje y la necesidad de configurar manualmente ciertos aspectos pueden resultar desalentadores para usuarios novatos o para quienes no les interese invertir tiempo en aprender a utilizarlo. Sin embargo, para aquellos que, como yo, disfrutan personalizar su entorno de trabajo y buscan maximizar su productividad, Qutebrowser puede ser una verdadera joya.
Para quienes pasan largas horas navegando, realizando búsquedas constantes y saltando entre pestañas, Qutebrowser permite mantener una fluidez en la interacción que otros navegadores no ofrecen. Su rendimiento es ágil, incluso en sistemas modestos, y su naturaleza ligera permite que funciones sin consumir grandes cantidades de RAM.
Conclusión
Usar Qutebrowser ha sido para mí como redescubrir la navegación web. Esa sensación de control, la agilidad que ofrece y, por supuesto, la integración con Vim, lo convierten en una herramienta que encaja perfectamente con mi flujo de trabajo. Sé que no es para todos, pero si eres como yo, un Cibernícola que busca formas de mejorar su productividad, ¿por qué no darle una oportunidad?
Aunque es cierto que puede parecer una herramienta poco convencional, la realidad es que, una vez que te sumerges en su filosofía, descubrirás que hay un mundo de potencial en Qutebrowser. Es una herramienta que te obliga a abandonar el mouse y a adoptar un enfoque de navegación más eficiente, y para aquellos de nosotros que disfrutamos de un flujo de trabajo rápido y sin interrupciones, es una de las mejores opciones que existen.
Así que, Cibernícolas, ¿qué esperan? Denle una oportunidad a Qutebrowser y descubran cómo puede cambiar su manera de navegar en la web. Como siempre, dejen sus comentarios, ¡y no olviden comprarme un café si les gustó este artículo!
Referencias
"La privacidad no se trata de tener algo que ocultar. Se trata de tener el derecho a controlar lo que otros saben de ti."
— Edward Snowden