
## Introduction

As developers, we often find ourselves switching between operating systems, facing compatibility issues, or longing for a more flexible development environment. In this post, I'll share my journey of setting up a remote development environment using a home lab, and how it has transformed my workflow.

## The Challenge: Architecture Limitations

While using MacOS with Apple Silicon (ARM-based CPU), I frequently encountered limitations when debugging Python libraries or building OCI images incompatible with ARM architecture. Despite the existence of Rosetta for x86 simulation, the terminal environment quickly became messy and difficult to manage.
## The Solution: A Home Lab Server

To overcome these challenges, I decided to build a home lab with carefully selected PC components running Ubuntu Server 24.04 LTS. This server serves multiple purposes:

1. Hosting my favorite movies and TV shows
2. Running a VaultWarden instance for personal password management
3. Providing a versatile development environment
## Remote Development with VS Code

My typical development workflow involves:

- Writing and modifying code
- Compiling or building projects
- Deploying work for testing
- Opening web projects in a browser (for web development)

Visual Studio Code makes remote development via SSH remarkably smooth, offering:

- One-click port forwarding
- Easy file transfers between local and remote machines
- Seamless development experience with supported extensions
## Ensuring Safety: Isolated Dev Environments

To protect against potentially harmful code execution and to facilitate experimentation, isolated development environments are crucial. While there are multiple options available, I chose LXD containers for their balance of isolation and resource efficiency.

### Comparison of Isolation Solutions

QEMU virtual machines offer the strongest isolation by emulating entire systems, but they come with higher resource overhead and slower startup times. Both Docker and LXD containers use the same Linux kernel features for isolation, making them more lightweight and efficient compared to full VMs.

The key difference between Docker and LXD lies in their intended use cases. Docker containers are designed primarily for running single applications, whereas LXD containers provide a system container-like experience, allowing multiple applications to run within a single container. This makes LXD feel more like a full OS environment.

After considering these factors, I chose LXD containers for my setup due to their balance of isolation and flexibility, particularly their ability to easily run multiple applications in a system-like environment. To start an LXD container:
```bash
lxc launch ubuntu:24.04 test-container
lxc exec test-container -- sudo --login --user ubuntu
```
This setup allows me to create isolated environments that feel like full systems, making it easy to experiment with different configurations and run multiple services without the overhead of full virtual machines.
## Secure Remote Access with Tailscale

Tailscale provides secure remote access to the home lab server without exposing ports on the home's public IP. It's the Swiss Army knife of networking.

### What is Tailscale?

Tailscale creates a private cloud (tailnet) connecting:

- PCs (Linux, MacOS & Windows)
- Smartphones (iOS & Android)
- VMs and containers (Linux)

### Key Features
#### Tailscale SSH
- Handles networking between source and target machines
- Sets up SSH keys and security mechanisms
- Enables secure SSH access without manual key management
#### Tailscale Funnel
- Allows secure public access to specific services
- Eliminates the need for port forwarding or complex firewall rules
- Provides HTTPS endpoints with automatic certificate management
### Setup Process

Setting up Tailscale on a new LXD container:
```bash
# install Tailscale
curl -fsSL https://tailscale.com/install.sh | sh

# Login and Run 
tailscale up --ssh
```
### Benefits

Tailscale provides:

1. Accessibility from anywhere
2. Secure and stable connections
3. No need for complex firewall rules or VPN configurations
4. Seamless operation across different platforms and network environments

## Additional Setup Tips

### Quick GitHub Access

For seamless GitHub access:

1. Install the GitHub CLI tool:  [Official installation instructions for Ubuntu](https://github.com/cli/cli/blob/trunk/docs/install_linux.md#debian-ubuntu-linux-raspberry-pi-os-apt)
2. Set up credentials using 
	1. `gh auth login -p https --skip-ssh-key -w`
	2. Go to: https://github.com/login/device/select_account

### Share an HTTP server

```console
$ sudo tailscale funnel --bg PORT
Available on the internet:

https://test-container.tailc123.ts.net/
|-- proxy http://127.0.0.1:3000

$ curl https://test-container.tailc123.ts.net
hello, world
```
### Physical Server Access

In case of SSH issues, consider setting up a PiKVM for remote physical access to your server. This blog post from Tailscale explain how to setup a remotely accessible PiKVM: [Access PiKVM from anywhere](https://tailscale.com/kb/1292/pikvm).

### Docker Support in LXD Containers

To enable Docker within LXD containers:

1. Create a Docker storage pool:
```bash
lxc storage create docker btrfs
```
2. Use this function to create Docker-ready containers:
```bash
# create lxd container with docker support
function create-dev-container {
  container_name=$1
  setup_script="https://gist.githubusercontent.com/goulinkh/ec7cad52772cc869bcf8802c656a1abf/raw/2d9ac50de6143844274e599d7b24238345ba3c50/setup-dev.sh"
  lxc launch ubuntu:24.04 $container_name
  lxc config device add $container_name docker disk pool=docker source=$container_name path=/var/lib/docker
  lxc config set $container_name security.nesting=true \
    security.syscalls.intercept.mknod=true \
    security.syscalls.intercept.setxattr=true
  lxc restart $container_name
  lxc exec $container_name -- bash -c "curl -fsSL $setup_script | bash"
}
```
## Conclusion

Setting up a remote development environment with a home lab has significantly improved my workflow, offering flexibility, security, and efficiency. By leveraging tools like VS Code, LXD containers, and Tailscale, you can create a powerful, versatile development setup that adapts to your needs.

Whether you're dealing with architecture incompatibilities, seeking a more isolated development environment, or simply want the freedom to work from any device, this setup provides a robust solution. Give it a try, and experience the benefits of remote development for yourself!


Dive into my journey of creating the ultimate remote development environment using a home lab. This comprehensive guide covers everything from overcoming ARM architecture limitations to setting up LXD containers and securing remote access with Tailscale. Learn how I transformed my workflow, increased productivity, and gained the flexibility to code from anywhere. Whether you're a seasoned developer or just starting out, discover how to build a powerful, secure, and efficient home lab that adapts to your needs.

Optimizing My Development Workflow: A Guide to Remote Setup with Home Lab


## Context

I discovered by chance a view in LinkedIn that shows the list of people who are following you, you can find it in: My profile -> Activity -> N followers, or by going to www.linkedin.com/feed/followers:

<Image
  image="image4-1.png"
  alt="An example of followers page"
  width={1534}
  height={1438}
  small
  legend
/>

I also know that there is a page where you can see your connections, so I noticed that the people who are following me are fewer than the people that I'm connected with (2)!

<Image
  image="image4-2.png"
  alt="A screenshot of my profile"
  width={395}
  height={474}
  small
/>

## Getting the list of connections and followers in JSON

Having only 2 people who gave me an "unfollow" probably means that I'm not that pushy in terms of sharing and resharing content! However, I'm still curious to know who these people are 🥸

I wrote a script that I run when viewing [my profile](https://www.linkedin.com/search/results/people/?network=%5B%22F%22%5D&origin=MEMBER_PROFILE_CANNED_SEARCH&sid=y!_), which gives me the list of people that I'm connected with:

```js
const connections = [];
const wait = (t) => new Promise((s) => setTimeout(s, t));
const queryConnections = () =>
  [
    ...document.querySelectorAll(
      ".entity-result__content span > a > span > span:nth-child(1)"
    ),
  ].map((e) => e.textContent.trim());
const getMyConnections = async () => {
  for (let i = 0; i < 11; i++) {
    window.scrollTo(0, document.body.scrollHeight);
    connections.push(...queryConnections());
    await wait(500);
    document.querySelector(".ember-view button[aria-label='Next']").click();
    await wait(1500 + Math.floor(Math.random() * 2000));
  }
  connections.push(...queryConnections());
};
getMyConnections().then(console.log(connections));
```

The next step is to get the other list, using the same strategy. I wrote another script that I run in [the followers' view](https://www.linkedin.com/feed/followers) of the current working URL, which gives me the list of people that are following me:

```js
const wait = (t) => new Promise((s) => setTimeout(s, t));
const gotoEndOfPage = async () => {
  while (document.querySelector(".scaffold-finite-scroll__load-button")) {
    window.scrollTo(0, document.body.scrollHeight);
    await wait(2000);
  }
};
const getMyFollowers = async () => {
  await gotoEndOfPage();
  return [
    ...document.querySelectorAll(
      ".feed-following-list .follows-recommendation-card__name"
    ),
  ].map((e) => e.textContent.trim());
};
let followers;
getMyFollowers().then((r) => {
  followers = r;
  console.log(followers);
});
```

Now let's see which of our colleagues aren't interested in what we say 🤯

```js
// const connections = [...]
// const followers = [...]
followersSet = new Set(followers);
loosers = connections.filter((person) => !followersSet.has(person));
console.log(
  "connections to remove:\n",
  loosers.map((e) => `\t- john doe`).join("\n")
);
```

<br />

<Image
  image="image4-3.png"
  alt="Final results"
  width={649}
  height={137}
  small
  legend
/>

## Final thoughts

Jokes aside, there are a lot of reasons a person may unfollow you on LinkedIn. Don't take it too personally.


A good way to see whether you are sharing too much content on LinkendIn that is not relevant.

See people who gave me unfollow on LinkendIn


## ⚠️ Disclaimer

This solution worked for me on Ubuntu 22.04. Follow this guide carefully as it could break the Bluetooth on your system.

## Solution

1. Edit the following file as root:

```
/etc/bluetooth/main.conf
```

2. Add `Experimental=true` at the beginning of the file. It should look like this:

```conf
[General]
Experimental=true
```

3. Save the file and quit the editor
4. Reload the Bluetooth service:

```bash
sudo systemctl restart bluetooth.service
```

5. Install this GNOME extension: https://extensions.gnome.org//extension/3991/bluetooth-battery/
6. Edit the settings so they look like this, especially the `% Source` column: ![](/assets/blogs/images/image3-1.png)


Showing the remaining battery of my Bluetooth headset in the status bar on Ubuntu 22.04

Add bluetooth headset battery's percentage in Ubuntu


## Why?

Wikipedia's page previews are so useful, instead of openings tons of new tabs while researching something, you can find a summary of the topic by simply hovering over the link, in this blog post we will be trying to achieve something similar but on our own website.

<Image
  image="image2-1.png"
  alt="An example of the Wikipedia page preview"
  width={1169}
  height={608}
  legend
/>

## How?

This project consists of two parts:

- **The frontend**: a javascript library that will be loaded in our website
- **Crawler service**: a REST API that will navigate to the requested website and send back some useful metadata as well as a screenshot

<p>
  <TLDR /> Here is an amazing draw that illustrates the project idea:
</p>

<Image
  image="image2-2.png"
  alt="Architecture illustration"
  width={1084}
  height={1065}
  small
/>

## Demo

This is an example of what the final project will look like:

<LinkPreview />

## Implementation

### The links preview SDK (frontend)

#### Preparing the testing data

As we don't have the backend service yet, we can mock the data that we need while working on the frontend side.

Let's take as an example the website ubuntu.com, this is what the backend will return later:

```javascript
const mockData = {
  screenshot:
    "http://localhost:3000/assets/projects/images/ubuntu-screenshot.png",
  metadata: {
    title: "Enterprise Open Source and Linux | Ubuntu",
    description:
      "Ubuntu is the modern, open source operating system on Linux for the enterprise server, desktop, cloud, and IoT.",
    icon: "https://assets.ubuntu.com/v1/49a1a858-favicon-32x32.png",
    url: "https://www.ubuntu.com",
    hostname: "ubuntu.com",
  },
};
```

#### Preparing a testing website

We also need a dummy website where we can test our frontend script, we can simply create an HTML file that look like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test links preview</title>
  </head>
  <body>
    <a href="https://www.ubuntu.com">Ubuntu Linux distribution</a>
    <script src="/links-preview.js"></script>
  </body>
</html>
```

Then serve it from a basic HTTP server with something like this:

```bash
npx serve .
```

#### The Javascript script

Now we are ready to get into the business! we have everything we need to develop the script: `links-preview.js`.

The main tasks of the frontend script are:

1. Scan all the anchor tags in the website (`<a href="..."></a>`)
2. For each scanned element:
   - Get the preview from the backend service (the crawler): we will look into this step in more details later in part 2
   - Setup a listener when the user hover over the element and show the preview UI element on trigger
   - Setup the opposite listenner where it hides the preview popup when the user move the mouse out of the element

For the sake of simplicity we will be looking for all the anchor tag elements without advanced filtering:

```javascript
function selectQueryLinks() {
  return Array.from(document.querySelectorAll("a"));
}
```

We will ask the crawler service (backend) for the data (metadata + screenshot) for each element:

```javascript
const previews = new Map();

async function fetchPreview(url) {
  // skip if already fetched
  if (previews.get(url)) return previews.get(url);
  const response = await fetch("https://localhost:3001/?url=" + url);
  if (!response.ok) {
    throw new Error("Received an error from the server");
  }
  const payload = await response.json();
  previews.set(url, payload);
  return payload;
}
```

Now that we have the necessary tools let's finish the step 2:

```javascript
const elements = selectQueryLinks();

// prefetch all the previews
elements.forEach((element) => {
  const url = element.getAttribute("href");
  fetchPreview(url);
});

// setup listeners
elements.forEach((element) => {
  element.addEventListener("mouseenter", () => showPreview(element));
  element.addEventListener("focus", () => showPreview(element));
  element.addEventListener("mouseleave", () => hidePreview(element));
  element.addEventListener("focusout", () => hidePreview(element));
});
```

As mentioned previously, we need a basic mock data to test the script for the moment, we can set the previews manually:

```javascript
elements.forEach((element) => {
  const url = element.getAttribute("href");

  // temporarily add this line
  previews.set(url, mockData);

  fetchPreview(url);
});
```

The final step on the frontend side is the preview popup, in other words the actual preview that the user will see, to keep it simple and avoid sharing a lot of code in this blog, I've added the final frontend script code along with preview popup in <a href={`${githubLink}/blob/main/demo/link-previews.js`}>this repo</a>.

<TLDR />: You can see the final result live at this <a href="https://link-previews-drab.vercel.app/">
  demo website
</a>.

And voilà, the frontend side is done, in part 2 will look into building a REST service that does some web scrapping to get the metadata along with taking a screenshot of the requested website.


Wikipedia's page previews are awesome, it helps to avoid "open in a new tab" nightmare, let's implement it.

Goulin Khoge

Side projects

Twitter To Mastodon

Vanilla CSS Intellisense extension

Podcast CLI player

My latest blogs

Optimizing My Development Workflow: A Guide to Remote Setup with Home Lab

See people who gave me unfollow on LinkendIn

Add bluetooth headset battery's percentage in Ubuntu

Bring Wikipedia page previews to the web: part 1 - implementing the frontend

Latest Bike tours