DEV Community

loading...
Cover image for Using Loupedeck Live to enhance your developer experience

Using Loupedeck Live to enhance your developer experience

nicoavila profile image Nicolás Avila Updated on ・5 min read

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

Recently I bought a Loupedeck Live 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, 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

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: Cmd + Shift + D) or keyboard bindings.

Loupedeck - How it works

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, so this is my first application I tried to map. To check the Keyboard Shortucuts you can press Cmd + K + Cmd + S (on macOS) or Ctrl + K + Ctrl + S (on Windows).

VS Code Keyboard Bindings

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 Ctrl + Shift + Alt + 1 (if you don't have the Docker extension installed, you can download it here).

  • 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

  • Press the plus icon (+) and press Ctrl + Shift + Alt + 1 (in order)

New key binding

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

Loupedeck application

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

Add new application Loupedeck

  • 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 Ctrl + Shift + Alt + 1 (in order)(2), then click the OK icon. To finish, press the "Save" button.

New custom action

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

Drag action

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

Extend Loupedeck Live usage below: Plugin development

Loupedeck have a developer program 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 👀

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 or if you like to support me you can also buy me a coffee ☕.

References

Discussion (0)

pic
Editor guide