Using Loupedeck Live to enhance your developer experience
Tags: developer, tools, loupedeck, vscode
Published: 2021-03-07 20:34:08

---
title: Using Loupedeck Live to enhance your developer experience
published: true
description: I've tried using Loupedeck Live to enhance my development workflow. I'm having a really good experience. Let's check how can improve your speed at programming.
tags: developer, tools, loupedeck, vscode
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khqlbjhjma06bvzj1s4l.png
---

_**Disclaimer**: I don't have any commercial affiliation with Loupedeck. I just think is an awesome tool :smile:_

Recently I bought a [Loupedeck Live](https://loupedeck.com/en/products/loupedeck-live?skip=true) with aims to enhance my developer workflow. After several weeks of use I cannot recommend it enought!. It's just an amazing tool that will improve your speed and make your developer experience easier.
In this post I'll share my thougts, tips and how to use it.

## What is Loupedeck Live?
Loupedeck Live is a console made by [Loupedeck](https://loupedeck.com/en), a company based in Finland. They make hardware for creative audience, to improve workflow used by content creators, photographers and artists. 
The Live model consists on a surface with touch screen, dials and buttons that can be mapped to perform certain actions in a desired software. They have other models (CT, and +) that you can check on their official website.

[![Loupedeck Live Product Video](http://i3.ytimg.com/vi/_qeUskySBmI/maxresdefault.jpg)](http://www.youtube.com/watch?v=qeUskySBmI "Loupedeck Live Product Video")

What's lead me to use it for development? Well, I saw there's a developer program who able you to create your own plugins (more details below). I saw some videos on Youtube about custom usage with your own apps and I thought: "That's perfect! This mean I can control any software that uses hotkeys". I placed an order in Amazon and waited for the arrival of the package to my country to see how it works (I live in Chile, so it taked a while).

## How it works
Loupedeck devices are composed by three components:

* **Hardware console**: This is the physical controller to interact. Is build in very firmly plastic material. You have 6 dials that can be pressed and a touchscreen bar at each side. At the center of the device, you have three rows four touchscreen buttons. You can swipe left / right to change pages of control. At the bottom you have five buttons.
* **Software**: The Loupedeck hardware doesn't work standalone. You need to install a proxy software that will map the actions on the hardware to the target application. Loupedeck comes with predefined applications to work. You can also create your own custom profile in order to control every app you want.
* **Target application to control**: Is the targeted application you want control. You make sure your application has hotkeys combinations (ex: <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd>) or keyboard bindings.

![Loupedeck - How it works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7csqjx9yk8owikyfyijj.png)

## Using Loupedeck with VS Code
> To follow the steps below, you need a **Loupedeck Live** device and the Loupedeck software installed on your machine.

I work a lot with [Visual Studio Code](https://code.visualstudio.com/), so this is my first application I tried to map. To check the Keyboard Shortucuts you can press <kbd>Cmd</kbd> + <kbd>K</kbd> + <kbd>Cmd</kbd> + <kbd>S</kbd> (on macOS) or <kbd>Ctrl</kbd> + <kbd>K</kbd> + <kbd>Ctrl</kbd> + <kbd>S</kbd> (on Windows).

![VS Code Keyboard Bindings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c32ock8szx9kd6u5i1s5.png)

Here you can simply add a keyboard shortcut by pressing a desired command. For this example, I want to map the **Docker view** on VS Code using <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>1</kbd> (if you don't have the Docker extension installed, you can download it [here](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)).

* First go to **Keyboard Bindigs** in Visual Studio Code.
* In the search bar (1) write **"docker view"** and find the **"View: Show Docker"** row (2).

![VS Code Keybindings Docker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0vwx5vky6zm0by2e5vl.png)

* Press the plus icon (+) and press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>1</kbd> (in order)

![New key binding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxivg5c4h5z8lrr9ec1f.png)

* Open your Loupedeck software at your computer and go to **"Application"** > **"Add Application"**.

![Loupedeck application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu1di39pnf5lxiwenzyl.png)

* In the **Application** section, select "VS Code" app. Fill the other fields as you want and click **"Save"** button.

![Add new application Loupedeck](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/end2b55wtcqatloo3ljp.png)

* To add a new custom action to VS Code, you need to press the plus (+) icon at the right of **"Custom"** in the section **Press Actions** (1). Then add a new action by fill the needed fields: In the **Action name** field enter *"View docker"*. On the shortcut field, press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>1</kbd> (in order)(2), then click the OK icon. To finish, press the *"Save"* button.

![New custom action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9odxjtkwu4hdmo4kz22.png)

* To finish, drag the recently created custom action to the touchscreen panel as the image shows.

![Drag action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dx7fbtvdzmiizdqjbmmc.png)

And there you go! Every time you open VS Code, your Loupedeck Hardware will show the "View docker" action (make sure to have the **Dynamic Mode** enabled).

![Dynamic mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twacrnlwdbkyg4b4q45r.png)

## Extend Loupedeck Live usage below: Plugin development
Loupedeck have a [developer program](https://developer.loupedeck.com/) in order to develop custom plugins using their SDK (C#) to enhance the usage possibilities. However, the current documentation is outdated and they encourage not to use right now.
I was very lucky to have a meeting with the B2B manager of Loupedeck few months ago. She told me there's a plan to release a new version of the SDK this year (TBA). Meanwhile, you can create a new account and wait for the official release of the SDK. Stay tuned at their Twitter account :eyes:

## Conclusions
Loupedeck devices are great hardware to improve the workflow of a broad audience. Developers can use this consoles in order to make their work faster. You can control almost every app you want by simply map the keyboard shortcuts into the Loupedeck Software on your PC or macOS.

## Closing
Thank you for reading my post. You can follow me on [Twitter](https://twitter.com/nicoavila_a) or if you like to support me you can also [buy me a coffee](https://www.buymeacoffee.com/nicoavila) :coffee:.

## References
* [Loupedeck Live - Official website](https://loupedeck.com/en/products/loupedeck-live?skip=true)
* [Loupedeck Developer Program](https://developer.loupedeck.com)
* [Loupedeck User Group in Facebook](https://www.facebook.com/groups/288228331658986)
* [Loupedeck CT SDK in Facebook](https://www.facebook.com/groups/220851678960601)