DEV Community: CodeCadim by Brahim Hamdouni

Displaying Images in lf with Kitty and Tmux

CodeCadim by Brahim Hamdouni — Sat, 03 Jan 2026 15:45:59 +0000

The Problem

When using lf (the terminal file manager) with Kitty and Tmux, image preview display often causes issues: graphical artifacts remain on screen when switching from one preview to another, making the interface unreadable.

After several attempts, I found a solution that seems to work well. It relies on three elements:

The redraw command in lf
No cleaner script
The on-select event in lf

lf Configuration

Here's the configuration to add to your lfrc file:

set previewer ~/.local/bin/lfpreview
cmd on-select &{{
  exec lf -remote 'send redraw'
}}

The preview script (previewer) will be detailed later. The key element here is using on-select to ask lf to redraw itself on each selection. This command performs the terminal cleanup and ensures clean preview display.

The Preview Script

Create the file ~/.local/bin/lfpreview with the following content:

#!/bin/sh
draw() {
  kitten icat --stdin no --transfer-mode memory \
  --place "${w}x${h}@${x}x${y}" "$1" </dev/null >/dev/tty
}

file="$1"
w="$2"
h="$3"
x="$4"
y="$5"

case "$(file -Lb --mime-type "$file")" in
  image/*)
    draw "$file"
  ;;
  application/pdf)
    pdftoppm -f 1 -singlefile "$file" "/tmp/lfoutput"
    draw "/tmp/lfoutput.ppm"
  ;;
  *)
    less "$1"
  ;;
esac

exit 1 # do not cache

Don't forget to make it executable:

chmod +x ~/.local/bin/lfpreview

This simplified version handles:

Images (via kitten icat)
PDFs (converting the first page to an image)
Other files (display via less)

Important Points

The exit 1 at the end of the script is crucial: it tells lf not to cache the previews. Without it, the refresh mechanism wouldn't work properly, as lf would reuse cached previews instead of redisplaying the image on each selection.

Conclusion

This configuration works well for my use case, but it may require adjustments depending on your environment. Feel free to adapt the preview script to handle other file types according to your needs.

CSS Hack: Let Code Blocks Break Free From Container Width

CodeCadim by Brahim Hamdouni — Wed, 25 Jun 2025 13:29:03 +0000

Text prose and code have fundamentally different width requirements.

Prose benefits from restricted width because lines of 50-75 characters are the fastest to read, reduce eye strain and movement, and let you track easily from line end to next line start.

But code blocks suffer from width restrictions. They force horizontal scrolling for long lines, break code structure and indentation, hide relationships in function calls and data structures, and make copying and understanding difficult.

Here is an example of one of my previous articles with my old Hugo style:

I need to horizontally scroll to read the rest of the parameters passed to the load_extension function.

The Solution

Use Hugo's wrapperClass and CSS negative margin to let code blocks extend beyond text width while keeping prose properly wrapped.

Step 1: Configure Hugo

Add a CSS class to all code blocks in your config.yaml:

markup:
  highlight:
    wrapperclass: highlight full-width-content

Step 2: Add the CSS Magic

The CSS uses negative margin to break out of the parent container:

.full-width-content {
    margin-right: -50vw;
    max-width: fit-content;
    position: relative;
}

How it works: The -50vw (50% of viewport width) assumes your content is roughly centered and we target only the right margin because we want to stay left aligned and expand on the right. The fit-content ensures the code block only expands as needed, and position: relative keeps it in the document flow.

The Result

Perfect! Text stays readable while code gets the space it needs.

Considerations

fit-content is supported in all modern browsers
On very narrow screens, you might want to add a media query to disable this behavior
Ensure your main content is centered for the -50vw trick to work effectively

References

Understanding Svelte Component Lifecycle and Reactivity

CodeCadim by Brahim Hamdouni — Sat, 01 Mar 2025 21:50:19 +0000

Svelte's component system features a specific approach to reactivity and component initialization. This article explores a common misconception about how props, variables, and component initialization work in Svelte.

The Misconception

Developers new to Svelte might assume that when a prop changes, the entire component script runs again, like if the component was a function and the prop a parameter: if the prop changes, the function will give another result, right?
This isn't how Svelte operates, and understanding this distinction is important for building functional applications.

Analyzing the Example

The example demonstrates this concept with two components:

app.svelte: A parent component with buttons to select different names
name.svelte: A child component that receives a name prop and tracks modifications

The Parent Component (app.svelte)

<script>
    // This shows that changing the prop does not rerun the component
    // script.

    import InputName from "./name.svelte";
    let names = ["John", "Mila", "Ali"];    
    let selected = $state();
</script>

<!-- This selector trigger the prop change in child component -->
{#each names as name}
    <button onclick={() => selected=name}>{name}</button>
{/each}

<!-- This section call the child component with the prop -->
{#if selected}
    <InputName name={selected}/>
{/if}

The parent component:

Maintains a list of names and a selected name state
Renders buttons for each name that update the selected variable
Also renders the InputName component with the selected name

The Child Component (name.svelte)

<script>
    // This is a simple component that implements change detection

    let { name } = $props();

    // this is executed only once at component mount
    let original = name;

    let changed = $derived(original != name);
</script>

Name : <input type="text" bind:value={name}>

{#if changed}
    modified
{/if}

The child component:

Receives a name prop using $props()
Stores the initial value in an original variable
Uses $derived to create a reactive changed variable that compares current and original values
Displays "modified" when the input value differs from the original

The Problem

When we click on a name and start updating the field, it shows the 'modified' indicator. This appears to work correctly.

However, when we click on another name, the indicator remains visible. We can also trigger this issue by clicking on the first name without modifying it, then clicking a second name: the 'modified' indicator appears despite not updating anything.

The key insight is that the component's script block runs only once when the component is initially mounted. When props change, Svelte updates the reactive dependencies without re-running the entire script.

This means that let original = name; is executed only once during component initialization. When the name prop changes later:

The name value updates
The changed derived value recalculates
But the variable original still holds the first value it received

The Solution

To force the child component to re-execute its script when the name prop changes, we use a {#key} block in the parent component.

The {#key var} block triggers at var updates by destroying and recreating the components it surrounds.

For our example, we need to modify our code like this:

<!-- This section call the child component with the prop -->
{#if selected}
    {#key selected}
        <InputName name={selected}/>
    {/key}
{/if}

When selected changes:

Without {#key}, the same component instance would remain and the variable original would never update
With {#key}, Svelte destroys and recreates the InputName component, causing the script to run again and the variable original to be reset

Conclusion

Be aware of one-time initialization: Variables assigned directly in the script block are initialized only once.
Use reactive declarations: Leverage $derived for values that need to react to prop changes.
Understand when to use {#key}: Use it when you need to completely reset a component state, like in our example for change detection patterns.

Dynamic Svelte Components

CodeCadim by Brahim Hamdouni — Mon, 16 Dec 2024 05:00:00 +0000

Svelte offers remarkable flexibility for creating dynamic components.
In this tutorial, we'll explore how to instantiate components on the fly
and pass properties to them in an elegant and efficient manner.

Basics of Dynamic Components

<script>
  import Foo from "./Foo.svelte";
  import Bar from "./Bar.svelte";
  let actual = Foo;
</script>

<svelte:component this={actual} on:click={()=>actual=Bar} />

In this simple example, we import two components: Foo and Bar.

We create a variable actual where we'll place the current component, in this case Foo.

Svelte offers a special <svelte:component> tag that allows creating components on the fly.

We specify in the this property which component to display, in our example, actual.

For demonstration, we add an on:click event to change the component to Bar by simply modifying the actual variable.

Svelte takes care of displaying the component by substituting Bar for Foo.

Passing Parameters (props)

A key point is the ability to pass parameters to dynamic components. For a classic component, you can write:

<Foo age=22 />

We assign the value 22 to the age property.

For a dynamic component, it's the same:

<svelte:component this={Foo} age=22 />

But let's imagine our second component Bar accepts 2 parameters:

<Bar age=572 name="Da Vinci" />

Our dynamic component should be written as:

<svelte:component this={Bar} age=572 name="Da Vinci" />

And there, we have a problem. How to manage them in the dynamic component while passing the right number of parameters?

My technique involves encapsulating the component with its properties in an object and using the spread operator {...props}.

For example, for the Foo component, I would write an object FooCmp:

<script>
    let FooCmp = {
        cmp: Foo,
        props: {
            age: 42
        }
    }
    let actual = FooCmp;
</script>

<svelte:component
    this={actual.cmp}
    {...actual.props}
/>

Here's the complete example, using the 2 components and a
flip function to interchange them.

App.svelte

<script>
  import Foo from "./Foo.svelte";
  import Bar from "./Bar.svelte";
  let FooCmp = {
    cmp: Foo,
    props: {
      age: 42
    }
  };
  let BarCmp = {
    cmp: Bar,
    props: {
      age: 572,
      name: "Da Vinci"
    }
  };
  let actual = FooCmp;
  let flip = () => actual = actual.cmp == Foo ? BarCmp : FooCmp;
</script>

<svelte:component
    this={actual.cmp}
    on:click={flip}
    {...actual.props}
/>

Each imported component will display its properties in a button and activate the on:click event.

Foo.svelte

<script>
    export let age = 0;
</script>

<button on:click>Foo {age}</button>

Bar.svelte

<script>
    export let name = "";
    export let age = 0;
</script>

<button on:click>Bar {name} {age}</button>

Note that we only pass through the on:click event as it is not processed here, but at the level of the parent, the dynamic component.

Conclusion

You can easily instantiate and manipulate components on the fly with <svelte:component>. Svelte offers a simple and powerful approach to creating dynamic components.

And JavaScript provides us with all the tools to work around the problem of different numbers of props per component.

Don't hesitate to experiment and adapt this approach to your own needs!

Change screen input programatically on Linux

CodeCadim by Brahim Hamdouni — Tue, 20 Feb 2024 17:09:34 +0000

I have a keyboard/mouse/screen switch to connect 2 PCs: one running Linux and one running Windows.

When I connect all the ports, it works, but every time I switch to the Windows laptop, the screen reconfigures, my windows are moved, and it annoys me. The switch behaves as if I had physically unplugged/replugged the screen, and Windows feels compelled to adjust the entire layout!

To fix this issue, I removed the screen connection from the switch and connected both computers to the screen's 2 sources (HDMI 1 and 2): okay, Windows doesn't rearrange all my windows when I switch to it, but now I have to switch both on the switch to get my keyboard and mouse, and I also have to manually change the screen source from HDMI 1 to 2. And vice versa when I go back to my Linux!

I needed a way to switch the screen source at the same time as I switched the switch. Like, something that detects that I'm switching and voila, changes the screen source for me.

Is that possible on Linux?

Well yes, it is.

Under Linux, we have a utility called ddcutil which allows us to "talk" to the screen and send it commands (like changing the source).

Here's the command to change the source:

sudo ddcutil setvcp 60 x

where x corresponds to the hexadecimal value of the source, and 60 corresponds to the source change functionality.

According to the results of ddcutil capabilities, I was supposed to use values 11 for HDMI 1, 12 for HDMI 2, and 0F for the display port.

sudo ddcutil capabilities
...
   Feature: 60 (Input Source)
      Values:
         11: HDMI-1
         12: HDMI-2
         0f: DisplayPort-1
...

(I omitted other information provided by the command to focus only on the screen source)

In reality, values 11 and 12 didn't do anything. I tested all the x0f values and down, until I got a reaction from the screen.

And for me, it was respectively 5 and 6 for HDMI 1 and HDMI 2.

So, to switch to HDMI 1, I had to do

sudo ddcutil setvcp 60 x5

and for HDMI 2:

sudo ddcutil setvcp 60 x6

To prepare for the next steps, I create 2 script files with these commands.

The first one, which I name set-hdmi1.sh, is the script that changes the screen source to HDMI 1:

#!/bin/sh
# set input source to HDMI 1
sudo ddcutil setvcp 60 x5 --display 2

I don't forget to make this script executable:

chmod a+x /usr/local/bin/set-hdmi1.sh

The second one, set-hdmi2.sh, is the script that changes the screen source to HDMI 2:

#!/bin/sh
# set input source to HDMI 2
sudo ddcutil setvcp 60 x6 --display 2

And I make it executable:

chmod a+x /usr/local/bin/set-hdmi2.sh

Okay, now that it works, I need to detect the keyboard switch.

Linux allows reacting to hardware changes and launching its own actions, thanks to udev. For example, we can take action if we plug or unplug a keyboard.

For this, we need to target the right hardware, and that involves finding its identifiers. The command lsusb lists all devices connected via USB to my Linux, but I'm only interested in keyboards, hence the filter by the grep command.

lsusb | grep -i key
Bus 001 Device 039: ID 04d9:0295 Holtek Semiconductor, Inc. USB-HID Keyboard

The important values are right after the ID:

04d9 identifies the vendor
0295 the product

Then, I create a new udev rules file, for example, 99-kvm.rules in the folder /etc/udev/rules.d with the following content:

ACTION=="remove", ATTRS{idVendor}=="04d9", ATTRS{idProduct}=="0295", RUN+="/usr/local/bin/set-hdmi2.sh"
ACTION=="add", ATTRS{idVendor}=="04d9", ATTRS{idProduct}=="0295", RUN+="/usr/local/bin/set-hdmi1.sh"

ACTION allows me to react, either to the removal of the keyboard (action 'remove', I switch to HDMI 2), or to its insertion (action 'add', I switch to HDMI 1).
Then, I identify my hardware using the values noted above, for the attributes idVendor and idProduct.
Finally, I execute the right script.

It's almost done: if we want these rules to take effect immediately (rather than at the next reboot), we can run the following commands:

sudo udevadm control --reload-rules && sudo udevadm trigger

And there you go! Now, I press the keyboard switch to change the screen source, and Windows stays calm! Thank you, Linux!

Note: Next time I change the KVM, I'll get a basic one that only handles keyboard and mouse :-)

Create tabs in Svelte

CodeCadim by Brahim Hamdouni — Sun, 05 Nov 2023 22:21:59 +0000

I often need to code some way to have multiple pages rendered in the same location : think about a configuration panel with several sub panels. The natural way to code this is using tabs.

In this tutorial, I'll use Svelte to code a simple application showing two tabs that can be easily extended to manage more tabs.

As usual, let's start a new Svelte project using Esbuild, by following my previous post Setup a Svelte project using ESBuild

You can also follow along on my Github page or on this Svelte Repl.

The app.svelte will have all the logic to manage the tabs.

We will add 2 more files to showcase the tabs :

t_identity.svelte : the main tab (showed by default)
t_password.svelte : another tab that will reuse our password chooser from my last post Tuto: Password Creation in Svelte

The content of this two files is not relevant for this tutorial. Our main focus will be on the app.svelte file :

<script>
    import Identity from "./t_identity.svelte";
    import Password from "./t_password.svelte";

    let tabs = [
        { name: "Identity", comp: Identity },
        { name: "Password", comp: Password },
    ];

    let cur = tabs[0];
</script>

We begin the script section by importing our two tabs : Identity and Password.

Then we add them to an array tabs. We use a simple object with one field for the name and one field for storing the component. So if we want to add more tabs, we only need to import the component and add it to the array tabs.

Lastly, we declare a cur variable to store the current tab selected : by default, we'll use the first one in the array. So cur will contain an object with the name of tab and the component to show.

OK, that's all for the javascript part, let's see the HTML part :

{#each tabs as tab}
    <button class:selected={cur === tab} on:click={() => (cur = tab)}>
        {tab.name}
    </button>
{/each}

<main>
    <svelte:component this={cur.comp} />
</main>

We construct the tabs as buttons with a #each loop, iterating on the array tabs declared above :

class:selected={cur === tab} will affect the class selected to this button if it is the current tab (cur), so we can stylize the selected tab.
on:click={() => (cur = tab)} will react to a click on the button by changing the current selected tab.
{tab.name} will be the name inside the button.

The important code is in the main section with the svelte:component directive.

This Svelte directive can render any component we give it. We use the fact that we stored the current tab in the cur variable, precisely, the component is in the comp field of our simple object.

So <svelte:component this={cur.comp} /> will render the tab at this location.

And that's it ! We have now a way to manage tabs with Svelte, the rest is just some css styling. All source code is available on Github.

Password Creation in Svelte

CodeCadim by Brahim Hamdouni — Sat, 07 Oct 2023 16:49:10 +0000

So, a few days ago, I saw a video showing a password creation form.

Each time the user types anything, there is an instant validation with icons indicating which constraint is fulfilled.

I thought it was a nice way to give instant feedback to the user. But can I reproduce this behaviour using Svelte ? Let's see !

First, let's setup a new Svelte project using esbuild. You can follow instructions in my post Setup a Svelte project using ESBuild

We'll start with one rule : the password length is 8 characters minimum. This way, we can "feel" how we can solve the problem for all the controls, setup all needed elements, without having too much in our plate. Change the app.svelte file as below :

<svelte:options customElement="app-input" />

<script>
let pass = "";
let validLength = false;

function check() {
   validLength = (pass.length >= 8);
}
$: check(pass);
</script>

<input bind:value={pass} type="password">
<span class:valid={validLength}> 8+ </span>

<style>
.valid {background-color: green;}
</style>

If we try this, we can see that nothing happens if we type a password until it reaches 8 characters length : then the 8+ background changes to green !

Let's review the code to understand what is happening here.

In the script section, we start by declaring two variables :

pass will contain the user input

validLength will indicate if the length rule is respected or not

Then, we define the check function : a straight forward validation of the password length.

The next line is more interesting. We use the $: directive to monitor any change to the password and check its validity.

$: check(pass);

So now, every time the variable pass is changed, Svelte will invoke the check function.

Below the script section, we define the html part by declaring the input field.
It will be automatically bound to the pass variable.

<input bind:value={pass} type="password">

So, when the user enters characters in the input field, Svelte takes care of updating the pass variable.

In Svelte, we can also bind a css class to an element. Here, the span tag will be assigned the css class valid only if the validLengh variable is true.

<span class:valid={validLength}> 8+ </span>

The valid class is defined in the style section : just a green background.

.valid {background-color: green;}

This is roughly all we need : the mechanism to live check the password for every keystroke and changing dynamically the style. So for the other controls, we'll apply the same logic.

To check if the password contains lower and upper case characters, we'll declare a new variable validCase :

let validCase = false;

Then we'll add the html part :

<span class:valid={validCase}> a..Z </span>

Finally, we'll complete our check function to add the control :

validCase = pass.toUpperCase() != pass && pass.toLowerCase() != pass;

The trick here is to compare the password to its upper and lower case versions.
The control fails if it is the same as one of them.

OK, for the last control, the presence of a special character, we'll add this html :

<span class:valid={validSpecial}>~&#</span>

And we'll apply a regular expression in the check function :

validSpecial = pass.replaceAll(/\w/g, "").length > 0;

This will remove all non-special characters and if it remains something, then there is at least one special character.

That is all, folks ! We have now a complete password creation form with live checking controls and instant feedback, with Svelte in one web component !

You can find the complete code in my repo Tuto Svelte Password.

Setup a Svelte project using esbuild

CodeCadim by Brahim Hamdouni — Fri, 29 Sep 2023 20:11:59 +0000

This article will show you how to setup a new Svelte project to develop a custom tag, using esbuild, with live reloading.

Fisrt, why use esbuild ? Well, it's a very fast bundler that's easy to setup and I did not find a lot of tutorial about Svelte and esbuild.

Next, what is a custom tag ? It's an HTML tag, like <pre> or <input> but we are in charge to define its behavior and its look, thanks to some JavaScript code. In fact, thanks to Svelte, we can define both in a single component.

So, to do just that, in a new directory, we will create 4 files :

package.json : defines all javascript dependencies
esbuild.js : script to launch the local server, watch files and reload Svelte
index.html : our main web page
app.svelte : the Svelte custom tag component

package.json

This is where we declare our dependencies. We need esbuild and its svelte plugin. Obviously, we also need Svelte.

{
  "type": "module",
  "dependencies": {
    "esbuild": "^0.19.4",
    "esbuild-svelte": "^0.8.0",
    "svelte": "^4.2.1"
  }
}

To install all of them, execute the npm install command:

npm i

If you don't want to create the package.json by hand, you can use this npm command :

npm i esbuild esbuild-svelte svelte

But do not forget to add the line "type": "module" or you'll get an error at build time.

esbuild.js

The esbuild script builds, watches and reloads the Svelte application.

import * as esbuild from 'esbuild';
import sveltePlugin from 'esbuild-svelte';

let ctx = await esbuild.context({
    entryPoints: ['app.svelte'],
    bundle: true,
    format: 'esm',
    outdir: './build',
    plugins: [
        sveltePlugin({
            compilerOptions: { customElement: true}
        })
    ],
    banner: {
        js: "new EventSource('http://127.0.0.1:8888/esbuild').addEventListener('change', () => location.reload())"
    },
    logLevel: 'info'
});
await ctx.watch();
await ctx.serve({
    servedir: './',
    port: 8888,
    host: '127.0.0.1'
});

The entryPoints lists Svelte component main files : in this example, we only have app.svelte.

We want to create a custom tag (web component) so we need to force the format to esm and also activate the option customElement in the Svelte plugin.

This script will start a local server from the local directory (see servedir path) on port 8888 and watch for any changes and reload the page if any, by injecting a javascript code inside the rendered html, thanks to the banner esbuild directive.

index.html

Create an index.html file :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script defer src="build/app.js" type="module"></script>
    </head>
    <body>
        <app-input/>
    </body>
</html>

You can see that we use our web component app-input as any html tag. It is that easy with Svelte. Just use a two words tag with a dash separation, so the browser knows it is a custom tag.

app.svelte

And lastly, add a file 'app.svelte' that will define our web component :

<svelte:options customElement="app-input" />

Hello world

Now, launch your local server with :

node esbuild.js

If all is ok, you can connect your browser to http://localhost:8888/ and get the greeting message.

You can update your code and see the live refresh. Happy coding !

This article was cross-posted from my blog.

Tags in Svelte

CodeCadim by Brahim Hamdouni — Wed, 26 Jul 2023 16:14:23 +0000

I want to code a simple tags input component in Svelte like the animation above.

An input text where I can type words.
As soon as I type a comma or Enter, the input turns into a "tag".
The tag appears next to the input text with a small cross to delete it.

I can retrieve the list of tags in an easy-to-use data structure: for example, an array of string.

I'll use the Svelte Repl for this tutorial.

Exploring possibilities

In Svelte, on:keydown triggers a function on every keypress. So I create a small piece of code to highlight this behavior:

<script>
function pressed(ev){
    console.info(ev.key);
};
</script>
<input on:keydown={pressed}/>

keydown call pressed function passing an event object as parameter. I'm only interested in the key information inside this object as it contains the key pressed by the user.

Each press on the keyboard, with the cursor in the text field, will cause a display in the console.

So, I can monitor the input waiting for a comma by doing a test on key:

<script>
function pressed(ev){
    if(ev.key === ',') {
        console.info("VIRGULE!!!")
    }
};
</script>
<input on:keydown={pressed}/>

We've got something, now let's use that.

Into the heart of the matter

When you press comma, that's when you have a tag to add: so I take the content of the input field and I add it to my list.

To see what I'm doing, I add a line with '{tags}' which will display the list of saved tags:

<script>
let tags = [];                      // save tags here
let value = "";                     // input value
function pressed(ev){
    if(ev.key === ',') {            // comma ?
        tags = [...tags, value];    // add to the list
        value = "";                 // and clean input
    }
};
</script>
{tags}
<input on:keydown={pressed} bind:value/>

Small problem: the comma remains in the field despite the cleaning.

The keydown intercepts the event before the key is taken into account by the input field. So our processing is fired before the comma is added in the value variable.

Instead of keydown, we will rather use keyup, which will trigger our function after input is taken care. So the comma will be embedded in the value of the field.

<script>
let tags = [];
let value = "";
function pressed(ev){
    if(ev.key === ',') {
        tags = [...tags, value];
        value = "";
    }
};
</script>
{tags}
<input on:keyup={pressed} bind:value/> <!-- keyup instead of keydown -->

Now the comma no longer stays in the field, but is part of the 'value'.

I can easily remove it before adding to the list:

value = value.replace(',','');

So now my code looks like :

<script>
let tags = [];
let value = "";
function pressed(ev){
    if(ev.key === ',') {
        value = value.replace(',',''); // <-- here we remove comma
        tags = [...tags, value];
        value = "";
    }
};
</script>
{tags}
<input on:keyup={pressed} bind:value/>

Before continuing, I make sure that the user does not enter anything wrong in the field. For example, a single comma or an Enter with no value should have no effect, which is not the case with the current code.

So, once I remove the comma, if I have nothing left, it means I have nothing to do:

<script>
let tags = [];
let value = "";
function pressed(ev){
    if(ev.key === ',') {
        value = value.replace(',','');
        if(value !== "") {              // <-- not empty ?
            tags = [...tags, value];    // <-- let's work...
            value = "";
        }
    }
};
</script>
{tags}
<input on:keyup={pressed} bind:value/>

I don't like this multi-nested level. I rather reverse the tests and exit immediately if the conditions are not met. Thus, I end up with the "good code" aligned to the left.

Demonstration:

<script>
let tags = [];
let value = "";
function pressed(ev){
    if(ev.key !== ',') return;
    value = value.replace(',','');
    if(value === "") return;
    tags = [...tags, value];
    value = "";
};
</script>
{tags}
<input on:keyup={pressed} bind:value/>

Oh, I forgot I wanted to use also Enter as a tag separator :

<script>
let tags = [];
let value = "";
function pressed(ev){
    if(ev.key !== ',' && ev.key !== 'Enter') return; // <-- Enter too
    value = value.replace(',','');
    tags = [...tags, value];
    value = "";
};
</script>
{tags}
<input on:keyup={pressed} bind:value/>

Time to take care of the tags visualization : I iterate on every saved tags with the #each command:

{#each tags as t,i}
...
{/each}

#each takes every item inside the tags array and makes it available in the t variable with its index in i.

Let's use this to display each tag with an X next to it. The X is used to remove the tag.

It's not a real X, it's an utf8 code that looks way more stylish 😎.

{#each tags as t,i}
    {t} ⨉
{/each}

Ok, the X is not actionable yet, so I add an anchor around it with a call to a del function with the index of the tag to remove.

{#each tags as t,i}
    {t} <a href="#del" on:click={()=>del(i)}>⨉</a>
{/each}

The del function just call Splice.

function del(idx){
    tags.splice(idx,1); // <-- remove the element at index `idx`
    tags = tags;        // <-- force Svelte reactivity
}

The line with tags = tags is used to force Svelte to refresh. This is one of the rare cases where I need to explicitly indicate to Svelte that de data model has changed.

I surround each tag with a 'span' element and add a little touch of css to make it look more taggy:

{#each tags as t,i}
    <span class="tag">
    {t} <a href="#del" on:click={()=>del(i)}>⨉</a>
    </span>
{/each}
<input on:keyup={pressed} bind:value/>

<style>
.tag {font-size: 0.8rem; margin-right:0.33rem; padding:0.15rem 0.25rem; border-radius:1rem; background-color: #5AD; color: white;}
.tag a {text-decoration: none; color: inherit;}
</style>

Icing on the cake: suggestions!

It will be nice if I can have suggestions as I type the first characters.

HTML let us the possibility to add suggestions in a input field, from a predefined list: datalist contains the suggestions list and we use it with the list property inside the input field.

I define a new tagsugg variable with all my suggestions:

let tagsugg = ["tag1", "tag2", "tag3"];

In a real project, this list can be generated from all previously saved tags in the system.

From this list, I construct the HTML datalist:

<datalist id="tag_suggestion">
    {#each tagsugg as ts}
        <option>{ts}</option>
    {/each}
</datalist>

Then I can reference it inside the input field with the list property:

<input list="tag_suggestion" on:keyup={pressed} bind:value/>

That's it (for the moment) !

I now have an input text field that generates tags with a suggestion list !

A very useful evolution is to transform this code to a web component so it can be used like a HTML tag (no pun intended 😎).

You can get the complete code with comments on this Repl Svelte page

This article was cross-posted from my blog

Experiment Nebula Mesh - Part 2

CodeCadim by Brahim Hamdouni — Sun, 06 Nov 2022 16:47:51 +0000

In my previous post, I used Nebula to setup a secured network between 2 virtual machines.

This time, I'll try to make a MySQL client and server communicate through a Nebula tunnel. And to make it a little bit more difficult, I'll use podman to run the client and the server in containers.

I begin by restarting the virtual machines :

vagrant up

To restart Nebula automatically, I'm using systemd. I generate the config file for Nebula service :

cat <<EOF > nebula.service
echo 
[Unit]
Description=Nebula service
[Service]
Type=simple
ExecStart=/opt/nebula/nebula -config /etc/nebula/config.yml
Restart=on-failure
[Install]
WantedBy=multi-user.target
EOF

Then I push this file in the boxA temporary folder. I wish I could place it directly at his place at /etc/systemd/system but, to do that, I would need more privilege :

vagrant upload nebula.service /tmp/ boxA

Now, inside boxA, I can "sudo" to place the config file in the apropriate folder :

vagrant ssh boxA -c "sudo mv /tmp/nebula.service /etc/systemd/system/"

And, I activate this service so it starts at boot time.

vagrant ssh boxA -c "sudo systemctl enable nebula"

I do the same for boxA, beginning by copying the config file :

vagrant upload nebula.service /tmp/ boxB

Then I move it to the right place :

vagrant ssh boxB -c "sudo mv /tmp/nebula.service /etc/systemd/system/"

Finaly I activate the service :

vagrant ssh boxB -c "sudo systemctl enable nebula"

Now, it is Podman turn to be installed, first on boxA :

vagrant ssh boxA -c "sudo apt install -y podman && sudo reboot"

Then on boxB :

vagrant ssh boxB -c "sudo apt install -y podman && sudo reboot"

Just after Podman installation, I need to reboot the virtual machines, so podman can be launched as rootless (in the user session).

And because I configured Nebula as a systemd service, the tunnel will start as well.

I just need to wait that the 2 virtual machines finish to boot. I can see their status with vagrant status :

> vagrant status

Current machine states: 

boxA                      running (virtualbox)
boxB                      running (virtualbox)

I install the MySQL image and start the server onboxA :

vagrant ssh boxA -c "podman run -p 192.168.168.100:3306:3306 --name=db --env MYSQL_ALLOW_EMPTY_PASSWORD='true' -dt docker.io/library/mysql"

podman run : I use Podman without sudo (it's one big advantage on Docker) to start the container with MySQL.

-p 192.168.168.100:3306:3306 : I publish the MySQL port on the Nebula IP so I can access the server from another machine on this network.

--name=db : I name this container db so I can easily manipulate it later.

--env MYSQL_ALLOW_EMPTY_PASSWORD='true' : I choose an empty password for this test. Of course, I would not do that in production.

-dt docker.io/library/mysql": at last I specify the MySQL image to use.

To check if the server is correctly started, I can use podman ps :

> vagrant ssh boxA -c "podman ps"

CONTAINER ID  IMAGE                    COMMAND  CREATED         STATUS             PORTS                           NAMES
d6c2625aafb4  docker.io/library/mysql  mysqld   30 seconds ago  Up 30 seconds ago  192.168.168.100:3306->3306/tcp  db

It is working !

So now, I try to access this server from boxB. I use nearly the same podman command as before, but this time I run the MySQL client :

If all is ok I will be prompted by MySQL :

> vagrant ssh boxB -c "podman run -ti --rm docker.io/library/mysql mysql -h192.168.168.100 -uroot"
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 9
Server version: 8.0.29 MySQL Community Server - GPL

Copyright (c) 2000, 2022, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.01 sec)

mysql>

Hourra!

Experiment Nebula Mesh - part 1

CodeCadim by Brahim Hamdouni — Fri, 07 Oct 2022 16:23:05 +0000

Is it possible to use the public network, namely Internet, to make 2 machines communicate securely ? And if possible something easier to install and configure than OpenVpn ?

A few months ago, I heard about Nebula from Defined and wanted to test it : one single binary, some certificates and as secure as it can be, that sounded promising !

So here we are trying to simulate a mesh network between 2 virtual machines using Vagrant on my Ubuntu Linux distribution 20.04 with Virtualbox already installed.

Vagrant

Vagrant from Hashicorp is the tool I use to manage virtual machines.

sudo apt install -y vagrant

I configure Vagrant to have 2 virtual machines with Debian 11, named respectively boxA and boxB.

To make it simple, I use my host network interface to link the 2 virtual machines (so eth0 in my case) and use the available DHCP of my local network.

cat <<EOF > Vagrantfile
Vagrant.configure("2") do |config|
    config.vm.define "boxA" do |boxA|
        boxA.vm.box = "generic/debian11"
        boxA.vm.network "public_network", bridge: "eth0"
    end
    config.vm.define "boxB" do |boxB|
        boxB.vm.box = "generic/debian11"
        boxB.vm.network "public_network", bridge: "eth0"
    end
end
EOF

Now I can launch the 2 machines with a single command :

vagrant up

Nebula

Installing nebula is as simple as downloading the binaries from github. I choose nebula-linux-amd64.tar.gz to comply to my configuration.

wget https://github.com/slackhq/nebula/releases/download/v1.6.0/nebula-linux-amd64.tar.gz

After downloading, I uncompress the archive :

tar xf nebula-linux-amd64.tar.gz

I now have 2 binaries : nebula and nebula-cert.

nebula will be copied on the 2 virtual machines. This is the main binary who will establish the bridge between the machines.
nebula-cert will be used to generate all needed certificates :

./nebula-cert ca -name "ACME, Inc"
./nebula-cert sign -name "boxA" -ip "192.168.168.100/24"
./nebula-cert sign -name "boxB" -ip "192.168.168.200/24"

I choose 192.168.168.* as my mesh network IP addresses : .100 for boxA and .200 for boxB.

The results of the commands are this list of files :

ca.crt
ca.key
boxA.crt
boxA.key
boxB.crt
boxB.key

To make it more simple to copy the files to the virtual machines, I create a folder per machine and copy the needed files :

mkdir boxA boxB
mv boxA.* boxA && mv boxB.* boxB

Now I want to generate a Nebula configuration file, that will be common for the 2 machines. I need to get their IP addresses on my local network (those assigned by my DHCP server). I know that vagrant will use the eth1 interface inside the machines, so I use some magic shell script :

First on boxA :

boxAip=$(vagrant ssh boxA --no-tty -c "ip address show eth1| grep 'inet ' | sed -e 's/^.*inet //' -e 's/\/.*$//'" | tr -d '\r')

Then on boxB :

boxBip=$(vagrant ssh boxB --no-tty -c "ip address show eth1| grep 'inet ' | sed -e 's/^.*inet //' -e 's/\/.*$//'" | tr -d '\r')

The magic is that $boxAip and $boxBip variables now contain the wanted IPs. Let use them inside the Nebula config in the static_host_map section :

cat <<EOF > config.yml
pki:
  ca: /etc/nebula/ca.crt
  cert: /etc/nebula/host.crt
  key: /etc/nebula/host.key
static_host_map:
    "192.168.168.100": ["$boxAip:4242"]
    "192.168.168.200": ["$boxBip:4242"]
lighthouse:
  am_lighthouse: false
listen:
  host: 0.0.0.0
  port: 4242
punchy:
  punch: true
tun:
  disabled: false
  dev: nebula1
  drop_local_broadcast: false
  drop_multicast: false
  tx_queue: 500
  mtu: 1300
  routes:
  unsafe_routes:
logging:
  level: info
  format: text
firewall:
  conntrack:
    tcp_timeout: 12m
    udp_timeout: 3m
    default_timeout: 10m
    max_connections: 100000
  outbound:
    - port: any
      proto: any
      host: any
  inbound:
    - port: any
      proto: any
      host: any
EOF

It's time to configure the machines. First, let send all the files to each machine :

vagrant upload ./boxA /tmp/ boxA
vagrant upload ./boxB /tmp/ boxB
vagrant upload ca.crt /tmp/ boxA
vagrant upload ca.crt /tmp/ boxB
vagrant upload config.yml /tmp/ boxA
vagrant upload config.yml /tmp/ boxB
vagrant upload nebula /tmp/ boxA
vagrant upload nebula /tmp/ boxB

Now I ssh in each machine and continue the configuration :

First, boxA :

vagrant ssh boxA

Inside boxA, I move the files in their respective location and finally launch Nebula in the background before quitting boxA :

sudo mkdir /etc/nebula
sudo mv /tmp/config.yml /etc/nebula/config.yml
sudo mv /tmp/ca.crt /etc/nebula/ca.crt
sudo mv /tmp/boxA.crt /etc/nebula/host.crt
sudo mv /tmp/boxA.key /etc/nebula/host.key
sudo mkdir /opt/nebula 
sudo mv /tmp/nebula /opt/nebula/
chmod +x /opt/nebula/nebula
cd /opt/nebula
sudo ./nebula -config /etc/nebula/config.yml &
exit

Let's configure boxB,

vagrant ssh boxB

Then I move all files and launch Nebula :

sudo mkdir /etc/nebula
sudo mv /tmp/config.yml /etc/nebula/config.yml
sudo mv /tmp/ca.crt /etc/nebula/ca.crt
sudo mv /tmp/boxB.crt /etc/nebula/host.crt
sudo mv /tmp/boxB.key /etc/nebula/host.key
sudo mkdir /opt/nebula 
sudo mv /tmp/nebula /opt/nebula/
chmod +x /opt/nebula/nebula
cd /opt/nebula
sudo ./nebula -config /etc/nebula/config.yml &
exit

Ok, at this moment, I have 2 virtual machines, with a Nebula network between them. How am I going to verify that it is really working ?

Well if I can ping boxB from boxA, it will mean that all is ok, so let's found out :

vagrant ssh boxA -c "ping 192.168.168.200"

Hourra ! It is working. Of course, I can do it on the other side :

vagrant ssh boxB -c "ping 192.168.168.100"

And that's all folks for part 1 !

Next, I'll try to use this configuration to execute a MySQL server on one machine, and access it from a MySQL client on the other machine. And to make it a little more difficult, I'll use Podman as the container engine to execute this client and server.

See Part 2