DEV Community: Kiril Delovski

I Built a Local-First Terminal Dashboard with Floating Shell Windows

Kiril Delovski — Tue, 25 Aug 2026 13:39:15 +0000

Most terminal tools make you adapt to their layout. I wanted the opposite: a workspace that adapts to how you work.

So I built Termdeck — a local-first terminal dashboard that runs in your browser and turns real shells on your machine into a flexible visual workspace.

Create terminals, group them into projects, move them freely, tile them when you need focus, and keep long-running commands alive when the page refreshes.

Why I built it

Terminal multiplexers are powerful, but they can require memorizing layouts and shortcuts. Standard terminal apps offer tabs and splits, but I wanted a more visual workspace without Electron, cloud accounts, or a separate desktop app.

Termdeck is built for local development workflows where you may need several shells at once: a frontend server, backend server, logs, tests, SSH connections, and one-off scripts.

Every terminal is backed by a real shell on your own machine. Termdeck does not simulate a terminal or send your commands to a hosted service.

What makes it useful

Termdeck is more than a terminal emulator in a browser. It is a local workspace designed to keep multi-terminal work organized and persistent.

Floating terminal windows — drag, resize, minimize, maximize, and tile terminals into a grid. Each window can contain multiple shell tabs.
Project workspaces — group related terminals by repository or task, so separate projects do not become one unmanageable collection of tabs.
Real filesystem tools — browse folders from the active project, open and edit text files, reveal files in your system file manager, and spawn terminals directly in a selected directory.
Durable shell sessions — refreshing the page or briefly losing the connection does not immediately kill your work. Termdeck reconnects to live shells and replays recent output.
tmux persistence — when tmux is available on macOS or Linux, sessions can survive a Termdeck server restart as well.
Safe paste behavior — bracketed paste prevents pasted multi-line commands from executing unexpectedly, with confirmation for potentially risky multi-command input.
Command snippets and SSH hosts — save repeatable commands, configure SSH connections, and launch terminals with startup commands instead of typing the same setup repeatedly.
Command palette — quickly find commands, projects, terminals, and snippets without navigating through the interface manually.
Broadcast input — intentionally send the same command to all live shells in a project, useful when working across multiple environments.
Notifications and activity indicators — background terminals can signal when they need attention, and completed commands can notify you when you are focused elsewhere.
Terminal quality-of-life features — terminal search, clickable links, configurable scrollback, downloadable logs, read-only log panels, per-terminal themes, and font-size controls.
Cross-platform shortcuts — keyboard controls adapt to macOS, Windows, and Linux conventions.

Built to stay local

Termdeck runs on 127.0.0.1 by default. Your commands, shell output, project files, and filesystem activity remain on your own machine.

There are no accounts, cloud sync, telemetry, API keys, or remote terminal infrastructure required.

The app also keeps its architecture deliberately lightweight:

Express server
WebSocket bridge to real PTYs
Browser-based frontend
Local terminal dependencies
No Electron
No build step

A typical workflow

For a single project, you might keep:

A frontend dev server
A backend API server
A test watcher
A terminal following application logs
An SSH session to a staging machine
A shell for Git commands and quick scripts

Instead of constantly switching tabs or rebuilding a terminal layout, you can keep that workspace visible, rearrange it as the task changes, and return to it later.

Try it

You need Node.js 18+.

npx github:kiril6/termdeck

Then open:

http://localhost:3000

Or clone the repository:

git clone https://github.com/kiril6/termdeck.git
cd termdeck
node install.js
npm start

Links

If Termdeck is useful for your local development workflow, a GitHub star, issue report, or contribution would be appreciated.

Creating a Custom Console Logger in JavaScript

Kiril Delovski — Tue, 16 Apr 2024 13:24:53 +0000

In the following tutorial, you will learn how to make a "custom console logging in a html page" instead of accessing the browser native developer tools "console section".

Let's Start 👀

1) First we Start with the HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <script>
        // add your console.log() here
        setTimeout(()=> {
            console.log('...this is console.log');
        }, 100);
        // add your console.info() here
        setTimeout(()=> {
            console.info('...this is console.info');
        }, 110);
        // add your console.warn() here
        setTimeout(()=> {
            console.warn('...this is console.warn');
        }, 120);
        // add your console.debug() here
        setTimeout(()=> {
            console.debug('...this is console.debug');
        }, 130);
        // add your console.error() here
        setTimeout(()=> {
            console.error('...this is console.error');
        }, 140);
    </script>
    <script src="console-script.js"></script>
</body>
</html>

The scripts block is your place where u want to write your js and your js logic with the needed console keyword.
The following script tag is for importing our custom js for overriding the default console methods and to display their output in the custom console container as well as the browser's console.

2) Secondly we Start with the JS file

(function() {
    // Dynamically import CSS file
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'console-style.css';
    document.head.appendChild(link);

    // Create toggle button
    const toggleConsoleBtn = document.createElement('div');
    toggleConsoleBtn.id = 'toggleConsoleBtn';
    toggleConsoleBtn.className = 'toggle-console-btn';
    toggleConsoleBtn.textContent = 'Show Console';
    document.body.appendChild(toggleConsoleBtn);

    // Create console container
    const consoleContainer = document.createElement('div');
    consoleContainer.id = 'consoleContainer';
    consoleContainer.className = 'console-container';
    document.body.appendChild(consoleContainer);

    let consoleVisible = false;

    // Toggle console visibility
    toggleConsoleBtn.addEventListener('click', function() {
        consoleVisible = !consoleVisible;
        if (consoleVisible) {
            consoleContainer.classList.add('show');
            toggleConsoleBtn.textContent = 'Hide Console';
            toggleConsoleBtn.style.bottom = 'calc(200px + 20px)'; // Adjust based on console window height
        } else {
            consoleContainer.classList.remove('show');
            toggleConsoleBtn.textContent = 'Show Console';
            toggleConsoleBtn.style.bottom = '10px'; // Set back to bottom of the screen
        }
    });

    // Save reference to original console methods
    const originalConsoleLog = console.log;
    const originalConsoleInfo = console.info;
    const originalConsoleDebug = console.debug;
    const originalConsoleWarn = console.warn;
    const originalConsoleError = console.error;

    // Override console.log method
    console.log = function() {
        // Call original console.log with the arguments
        originalConsoleLog.apply(console, arguments);

        // Output message to UI with color (limegreen)
        appendToConsole(arguments, 'log', 'limegreen');
    };

    // Override console.info method
    console.info = function() {
        // Call original console.info with the arguments
        originalConsoleInfo.apply(console, arguments);

        // Output message to UI with color (cornflowerblue)
        appendToConsole(arguments, 'info', 'cornflowerblue');
    };

    // Override console.debug method
    console.debug = function() {
        // Call original console.debug with the arguments
        originalConsoleDebug.apply(console, arguments);

        // Output message to UI with color (darkgray)
        appendToConsole(arguments, 'debug', 'darkgray');
    };

    // Override console.warn method
    console.warn = function() {
        // Call original console.warn with the arguments
        originalConsoleWarn.apply(console, arguments);

        // Output message to UI with color (orange)
        appendToConsole(arguments, 'warn', 'orange');
    };

    // Override console.error method
    console.error = function() {
        // Call original console.error with the arguments
        originalConsoleError.apply(console, arguments);

        // Output message to UI with color (orangered)
        appendToConsole(arguments, 'error', 'orangered');
    };

    // Function to append message to UI
    function appendToConsole(args, messageType, color) {
        const message = Array.prototype.slice.call(args).join(' '); // Convert arguments to a string
        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        if (color) {
            messageElement.style.color = color;
        }
        if (messageType) {
            messageElement.classList.add(messageType);
        }
        const consoleContainer = document.getElementById('consoleContainer');
        consoleContainer.appendChild(messageElement);
        // Scroll to bottom (assuming console-output is the ID of your console container)
        consoleContainer.scrollTop = consoleContainer.scrollHeight;
    }

})();

3) Thirdly we Start with the CSS file

body {
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100vh; /* Ensure the body takes up the entire viewport height */
}

.console-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Set desired height */
    background-color: rgba(0,0,0,0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: white;
    overflow-y: auto; /* Enable scrolling if content exceeds height */
    padding: 10px;
    box-sizing: border-box;
    font-family: monospace;
    display: none; /* Initially hidden */
    z-index: 1; /* Ensure the console window is behind the button */
    border-top: 5px solid silver;
}

.console-container.show {
    display: block; /* Show when toggled */
}

.console-container p {
    margin: 0;
    white-space: pre-wrap;
}

.console-container .warn {
    color: yellow;
}

.console-container .error {
    color: red;
}

.toggle-console-btn {
    position: fixed;
    bottom: 10px; /* Initially set to bottom of the screen */
    left: 10px;
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    z-index: 2; /* Ensure the button is on top of the console window */
}

Final notes:

Feel free to use it or contribute to the project to improve it or make additional functionalities.

To see the working example or visit the github repo .

For any questions or information about me you can reach out by scanning or clicking on the following qr code:

Running a postman collection with newman alongside plugins (newman-reporter-htmlextra | pdf-export | pdf-parse)

Kiril Delovski — Tue, 14 Jun 2022 09:52:44 +0000

This guide is for running a collection of api tests, generating html report of results and generating pdf file from the API body response (the pdfData) from base64 encoded string.

What is covered with this tutorial:
1) Running postman collection with newman.
2) Custom environment location with newman.
3) Reporter-htmlextra with custom template location to export the test result report.
4) PDF Export - get the response object search for binary encoded pdf string, generate decoded pdf file and place it with the report.html file in a newly created folder by current date.
5) PDF Parse - the generated pdf file - access it and search for specific metadata or custom text content or string from that pdf.

We may start now: 👀
Let's assume you already have a postman collection of requests and the next step is to export that collection.json file in the specific directory where the following steps are needed.

Requirements:
1) Postman application installed (for exporting the collection)
2) NodeJs installed (https://nodejs.org/en/download/)

Setup:
1) Setup a local path on your pc and inside project directory open terminal/cmd and do command npm init

this will generate the package.json file.

2) Install newman npm i newman --save-dev
3) Install newman-reporter-htmlextra npm i newman-reporter-htmlextra --save-dev
4) Install pdf-parse npm i pdf-parse --save-dev
5) Install date formatter npm i dateformat@1.0.2-1.2.3 --save-dev
6) Create index.js file in the root project and let's start filling it with code.



const dateFormat = require('./node_modules/dateformat/lib/dateformat.js');
const fs = require('fs');
const now = new Date();
const currentData = dateFormat(now, "dd.mm.yyyy HH.MM");
const newman = require('newman');
// add the path to your exported postman collection
const collection = require('./Newman.postman_collection.json');
const reportName = 'report.html';

newman.run({
    collection,
    // if you use environments from different json file excluded from the postman collection, otherwise comment it
    environment: `./environment/dev.json`,
    reporters: ['cli', 'htmlextra'],
    iterationCount: 1,
    reporter: {
        htmlextra: {
            // commented lines are the all possibilities available to be set for the report document
            export: `./${currentData}/${reportName}`,
            /*
            this is the original location of the template but can be copied modified, moved and linked to it
            if you don't specify template path will use the default one ./node_modules/newman-reporter-htmlextra/lib/dashboard-template.hbs
            */
            template: './node_modules/newman-reporter-htmlextra/lib/dashboard-template.hbs',
            // logs: true,
            // showOnlyFails: true,
            // noSyntaxHighlighting: true,
            // testPaging: true,
            browserTitle: "Newman report",
            title: 'Report - ' + currentData,
            titleSize: 5,
            // omitHeaders: true,
            // skipHeaders: "Authorization",
            // omitRequestBodies: true,
            // omitResponseBodies: true,
            // hideRequestBody: ["Login"],
            // hideResponseBody: ["Auth Request"],
            showEnvironmentData: true,
            // skipEnvironmentVars: ["API_KEY"],
            // showGlobalData: true,
            // skipGlobalVars: ["API_TOKEN"],
            // skipSensitiveData: true,
            // showMarkdownLinks: true,
            showFolderDescription: true,
            // timezone: "Australia/Sydney",
            // skipFolders: "folder name with space,folderWithoutSpace",
            // skipRequests: "request name with space,requestNameWithoutSpace",
            // displayProgressBar: true
        }
    }
}).on('request', (error, data) => {
    const requestName = data.item.name;
    const fileName = `${requestName}.pdf`;
    let content = data.response.stream.toString();

    /* You need to modify this in order to get the specific
 data of encoded string from your API response */
    let pdfEncodedString = JSON.parse(content).pdfData;

    if (error) {
        console.log(error);
        return;
    }

    if (JSON.parse(content).message === 'Forbidden') {
        console.log('There has been error. Get renewed access token!');
        return;
    }

    if (pdfEncodedString !== undefined) {

        if (!fs.existsSync(currentData)) fs.mkdirSync(currentData, { recursive: true });

        fs.writeFile(currentData + '/' + fileName, pdfEncodedString, 'base64', function (error) {
            if (error) {
                console.error(error);
            } else {
                const pdf = require('pdf-parse');
                let dataBuffer = fs.readFileSync(currentData + '/' + fileName);
                pdf(dataBuffer).then(function (data) {
                    /*  number of pages    
                    console.log(data.numpages);     
                    //number of rendered pages    
                    console.log(data.numrender);     
                    //PDF info    
                    console.log(data.info);     
                    //PDF metadata    
                    console.log(data.metadata);      
                    //PDF.js version     
                    check https://mozilla.github.io/pdf.js/getting_started/    
                    console.log(data.version);     PDF text    console.log(data.text);
                    */
                    console.log('Content: ', data.text);
                    console.log('Specific word: ', data.text.includes('some_text_you_want_to_find'));  // you can use any js logic here or regex
                    console.log('number of pages:', data.numpages);
                    console.log('number of rendered pages:', data.numrender);
                    console.log(data.info);
                });
            }
        });
    } else {
        console.log('Pdf encoded string not found in the body response')
    }
});

7) Running the script with the command node . inside the terminal window of the project root

After command finishes the tests will be generated in a new folder by current date and time inside the root of project:
- If some test fails then will be no visible pdf file in the folder.

For any questions or information about me you can reach out by scanning or clicking on the following qr code:

How to Capture an HTML Element

Kiril Delovski — Mon, 28 Sep 2020 13:39:45 +0000

In the following tutorial, you will learn how to make a "capturing 📸 of an HTML element by clicking on a button" and the 🎴 will be downloaded.

Let's Start 👀

To make this work we will use the open-source html2canvas library.

First, we need to include the library for capturing the element in the <head> tag of our html document

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js">
</script>

(see the following code example)

<!DOCTYPE html>
<html>
 <head>
  <title>Capture an html element and save it as image</title>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"> 
  </script>
 </head>
 <body>
 </body>
</html>

Now, we will include the following <style> in our <head> tag, which is just styling for our example element that we are capturing

body {
    margin-top: 40px;
    font-family: Arial, Helvetica, sans-serif;
}

a:link:hover {
    text-decoration: none;
}

#capture-frame {
    width: 500px;
    margin: auto auto;
    display: flex;
    color: black;
    font-size: 16px;
    font-weight: bold;
    height: 300px;
    border: 4px solid black;
}

.screen-1 {
    background: red;
    width: 100%;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid yellow;
}

.screen-1:hover, .screen-2:hover  {
    color: white;
}

.screen-2 {
    background: green;
    width: 100%;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

h3 {
    text-align: center;
    font-weight: bold;
    padding-bottom: 100px;
    text-transform: uppercase;
}

.button {
    margin: 0 auto;
    text-align: center;
    padding: 50px 0;
}

.button button {
    border: 1px solid black;
    padding: 6px;
    font-weight: bold;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

.button button:hover {
    background-color: lightblue;
}

Next we are adding the html structure for the element inside body tag

<h3>Capturing html element example
    <br />by using the 
    <a href="https://html2canvas.hertzen.com/">
     html2canvas 
    </a>
    library
</h3>

<div class="button">
    <button type="button" 
     onclick="saveAsImage()">Capture
    </button>
</div>

<div id="capture-frame">
    <div class="screen-1"><span>Element 1 </span></div>
    <div class="screen-2"><span>Element 2 </span></div>
</div>

At last, you will need to add the following script above the closing of <body/> tag

function saveAsImage() {
    const findEl = document.getElementById('capture-frame')
    html2canvas(findEl).then((canvas) => {
        const link = document.createElement('a')
        document.body.appendChild(link)
        link.download = "cmp-image.jpg"
        link.href = canvas.toDataURL()
        link.click()
        link.remove()
    })
}

Final notes:

The current example is showing capturing of an HTML element by a button click but this can be customized by your needs for example (as event listener, based on some action, or interval).

To see the working example or visit the github repo .

For any questions or information about me you can reach out by scanning or clicking on the following qr code:

The post was published first on Delovski.net Blog

How to Pass a JavaScript Interview

Kiril Delovski — Fri, 18 Sep 2020 16:51:44 +0000

Have you ever had the struggle of being overwhelmed from the plenty amount of resources reachable online and besides that being confused from where to begin when preparing yourself for a javascript interview, well good news, this post changes all of that, and that's why you should continue reading...

LET'S START 👀

I am a frontend developer with more than 10 years of experience. During my professional experience, I have had been to more than 50 frontend interviews so far. By having these interviews the interviewers their main focus had on questions related to javascript.

After each interview, I have been noting down these questions with provided answers and kept them for myself until this moment.
This document (knowledge library) which I have of javascript questions and answers helped me a lot for my further interviews as preparation material.

This knowledge and written material gave me an idea, why don't I help the developer community providing this material too.

Considering this, that was the main reason why I have created this booklet "JAVASCRIPT INTERVIEW CHEAT SHEET MANUAL" which is a .pdf document and you can get it by downloading it from here.

By having this material it will shorten your time for search and learn, considering that it's containing the specific asked criteria at the javascript technical interviews.

You might have noticed that this is a First Edition of this booklet, meaning that based on your feedback (which you will provide) from getting this material and filling out the survey located on the last page of this manual or by joining the discord channel, I will be able to make a summary and get an additional input which will be a perfect reason and motivation for preparing and publishing the Second Edition as an extended version of this booklet.

FINAL NOTE

This manual will be sufficient to help you learn and prepare yourself for an upcoming frontend / javascript interview you might encounter.

For any questions or information about me you can reach out by scanning or clicking on the following qr code:

You can request a discount version of this "booklet" by completing this survey 🙂

☛ https://forms.gle/8va29R7TmedWhMteA

feel free to join the discussion on Discord Community
you can also follow the Facebook Page

Bonus: get this fancy website template for free from here

Test your javascript knowledge with this quick quiz

The post was published first on Delovski.net Blog