DEV Community: Amjad Abujamous

The Local AI Powerhouse

Amjad Abujamous — Fri, 13 Mar 2026 18:25:54 +0000

Introduction

Keeping up with everything AI-related in the recent months has got me wondering about the magic behind it, so I started searching extensively about running it locally and eventually devised a plan to run AI models on my own hardware.
Once I did the hardware research, I settled on choosing a mini PC running AMD Strix Halo, the GMKTec EVO X2. After ordering it from Ali Express (which ships worldwide), configuring it with Linux Mint, Llama cpp, and its dependencies, I managed to run models like GPT-OSS-120b, Qwen-3-Next-80-A3b, and GLM 4.7 Flash.
This article walks you through how the whole thing was done and the reasoning behind each decision.

Motivation

The ability to run AI locally allows for ownership, control, the ability to work offline, and maximum flexibility. The idea is to be able to have a device powerful enough to accomplish the tasks needed without having to subscribe to a cloud provider and need an internet connection to function. Further, as AI technologies are rapidly advancing, such a device is considered an investment given that the research is heading towards providing the same value from smaller models.

Hardware Research

Now that the motivation is clear, it is time to choose the ideal device for the task, keeping both the cost and the benefit in mind. After following brilliant people like Alex Ziskind, Network Chuck, and many others on YouTube over several months, I eventually reached the decision of buying a Mini PC both due to its portability and its ability to provide decent performance while maintaining a reasonable temperature.
Now the question that follows, which Mini PC do I buy for this purpose? The answer to that is one of three:

Mac Mini. This is the ideal one since Apple M Chips are best in class. Only con is it is too expensive once you need enough RAM.
Nvidia GB10. This one is great, but by the time NVIDIA's GB10 became available, AMD's Strix Halo had already established itself in the market
GMKTec Evo X2 (or the Framework Desktop). This one provides nearly as good performance as the other two for a much more affordable price range, making it ideal both for the tinkerer and the small organization that wants to run AI on their own hardware. The GMKTec Evo X2 I ordered came with 128GB of RAM. What makes this device special is that up to 96GB can be allocated to the integrated GPU, giving it enough memory to run models with 80B+ parameters at reasonable speeds. With that in mind, I went for choice #3, the local AI powerhouse.

The AI runtime

There are multiple available runtimes for inference on the market. Mainly, we have both LM Studio and Ollama, and both run Llama cpp under the hood. This means that Llama cpp is ideal to run inference locally given that it is blazing fast, and it recently got its Web UI which is a massive plus. Setting up Llama.cpp on Linux Mint required installing Vulkan drivers and building from source with Vulkan support enabled, since the Radeon 8060s iGPU relies on Vulkan rather than CUDA for GPU acceleration. Once that was done, inference worked out of the box.
Another client used with this local AI runtime was OpenCode for agentic coding purposes, and its configuration to connect to a local instance was a little tricky, but it was done nonetheless. More on that can be found here. In short, configuring OpenCode to connect to a local Llama.cpp instance involved creating an opencode.json file under ~/.config/opencode/ with the provider set to @ai-sdk/openai-compatible and the base URL pointing to http://127.0.0.1:8080/v1. It took some trial and error, but once configured, OpenCode picks up the local model automatically.

The models of choice

Three models were chosen, each for a distinct reason:

Industry Standard: I went for GPT OSS 120B by OpenAI, since OpenAI currently sets the industry standard as of now.
Multilingual Capabilities: Qwen3-Next-80B-A3B is a surprisingly capable model that can do essentially anything, and you can speak to it using any language of choice.
Coding: GLM 4.7 Flash has a good reputation online for being a capable local model. I tested it and connected it to OpenCode, and built a 2d Mario Game using it. I have to say it is decent, but not as good as Opus by Anthropic or Codex by Open AI. The cloud models still rule here. After using all three for a few weeks, GPT OSS felt slow at 120B parameters for everyday use, and GLM 4.7 Flash, while great for coding, was too narrow in scope for general tasks. Qwen3-Next struck the best balance, fast inference thanks to its mixture-of-experts architecture (only 3B parameters active at a time), strong multilingual support, and solid performance across both conversation and code. Finally, I settled for Qwen 3 Next. That thing rocks!

Conclusion

What surprised me most was how capable local models have become, for most day-to-day tasks, the experience is comparable to cloud providers. If I were to do it differently, I would have gone with Linux Mint from day one rather than experimenting with other distros first. As for what is next, I am keeping an eye on smaller, more efficient models as they continue to improve, and I plan to integrate this setup into my development workflow more deeply using tools like OpenCode and n8n. If you are considering running AI locally and deliberating whether it is a good choice, I hope this article was of help to you. Good luck.

"Just use AI"

Amjad Abujamous — Mon, 24 Mar 2025 12:10:13 +0000

Introduction

Many people nowadays are saying "Just use AI" when it comes to doing pretty much any task. This reminds me of the time our Math professor referenced an article with the title "Is Google making us stupid" by Nicholas Carr on the Atlantic to differentiate the completion of the task from the knowledge of the individual executing that task.

This article takes a different approach in elaborating as to why the individual should only use AI as an assistant as opposed to totally depending on it.

The human knowledge

In his 2008 essay Is Google Making Us Stupid?, Nicholas Carr reflects on how the internet is reshaping our cognitive abilities, noting, "Once I was a scuba diver in the sea of words. Now I zip along the surface like a guy on a Jet Ski." (Goodreads). This shows the difference between someone who is an intellectual and someone else who can only get the job done and forget the details of what it was shortly afterwards.

Studies

Studies have shown that when used appropriately, AI can significantly boost productivity. For instance, research from MIT Sloan indicates that generative AI can enhance the performance of highly skilled workers by nearly 40% compared to those who don't use it. However, over-reliance on AI can lead to diminished critical thinking and decision-making skills.

Another study by MIT Media Lab and OpenAI found that excessive use of AI tools such as Chat GPT may result in emotional dependence and problematic behaviors, such as reduced autonomy and confidence in personal decision-making. (Business Insider)

Conclusion

Striking the right balance in AI dependence can be visualized as a normal distribution curve, where the "sweet spot" lies at the peak—representing optimal integration of AI assistance without compromising human agency. This equilibrium ensures that AI serves as a tool to augment human capabilities rather than supplant them. After all, AI should be in the passenger seat, assisting the driver rather than taking the wheel.

Image credit: Generated by Claude AI

Final Words

Ironically, this exploration of AI’s role was conducted with the assistance of both Chat GPT and Claude AI. Yet, the verification and organization of information were carefully managed to maintain the integrity of the information presented in this article.

Cheers!

Six useful tools for corporate tasks

Amjad Abujamous — Sat, 08 Mar 2025 10:09:39 +0000

Introduction

This article discusses underrated useful tools that can help accomplish a lot more in their corporate job in tasks that are around development and not development itself.

PDF X-Change Editor
Microsoft Paint
Xournal
Excalidraw.com
SVG Trace
Google Slides

The first three tools are Desktop-based, while the last three are Web-based. Let's go over these tools one by one.

PDF X-Change Editor

PDF X-Change Editor is the first tool among the desktop-based ones in this article. It is a powerful PDF tool that allows users to edit, annotate, and manipulate PDF files with ease. Unlike basic PDF readers, it provides advanced markup features, including adding comments, highlighting text, and inserting images or shapes. You can use it to merge or split PDF documents, and you can type, annotate, draw, and use its OCR feature all in its free edition. This makes it a reliable and accessible alternative to expensive software like Adobe Acrobat.

Website

Microsoft Paint

Microsoft Paint is a simple yet powerful tool for quick image editing, annotation, and diagram creation. If you don't have access to a powerful program such as PowerPoint, Paint is the perfect alternative for quick markups, cropping images, and adding basic shapes or text. For professionals who occasionally need to edit screenshots or create simple visuals, Paint is a handy built-in tool that requires no extra setup.

Website

Xournal (or Xournal++)

If you're not on Windows or do not like Paint, Xournal and its enhanced version, Xournal++, serve as a strong alternative, offering more flexibility, especially for handwriting and PDF annotation. It is open-source and it a solid tool for note-taking, sketching ideas, and marking up on PDF documents. With stylus support, it is particularly useful to you if you prefer writing by hand, making it a great choice for digital notebooks or collaborative brainstorming, or drawing diagrams. It is available on Windows, Mac, and Linux.

Website
Github

Excalidraw.com

Starting with Web-based tools, Excalidraw.io is an open-source, web-based drawing tool that allows teams to create hand-drawn-style diagrams and flowcharts as quickly as in minutes. Unlike rigid diagramming software, it offers a more natural and informal way to visualize ideas, making it ideal for brainstorming sessions, UI mockups, and technical explanations. Also, note that it has a Library which gives you templates that are ready to be filled and shared.

Excaldrawio

Library

Website
Library
Github

SVG Trace

SVG Trace is a web-based tool that converts raster images (like PNGs or JPGs) into scalable vector graphics (SVGs). This is particularly useful for designers, marketers, or engineers who need to create high-quality logos, icons, or diagrams that scale without losing resolution. If you're in a situation where you're only met with a logo or an illustration as an image and you'd like to have a vector instead, this tool is the one you're looking for. Note that the image can be enhanced if you used their paid version.

Website

Google Slides

While not used as much as other presentation tools, Google Slides is a versatile web-based platform for collaboration, storytelling, and creating presentations right in the browser. You could work on presentations with your team in real time, add comments to slides for others to see or follow up, and work on the same presentation using your PCs at the same time. You could also edit PowerPoint presentations in it, which allows you edit presentations and sending them back to your team in case you don't have PowerPoint on your PC.

Website

Conclusion

This article presented a few useful tools that can increase your productivity concerning tasks around Development and not development itself. Hope it was useful for you.

Cheers!

Image Credit

SFTP Client using .NET

Amjad Abujamous — Sat, 18 Jan 2025 15:56:43 +0000

Introduction

You'd like to add, fetch, and possibly delete files on a locally available or remote server, and you're looking for the best way to do it.

Well, SFTP is the solution you're looking for since it is, secure, offers authentication, easy to use, needs a single connection, offers resumable transfers, and is very well documented.

Creating an SFTP server

Once can create an SFTP server by following the instructions for their operating system. For instance, here is how to do it on Ubuntu/Debian. Also, one can use a readily available sftp server such as FileZilla's.

Methods of usage

Similar to hosting a server, one can either use an SFTP client or write a script to automate a process using SFTP. This article illustrates how to write an SFTP client using modern .NET.

The Client

The client is self explanatory and pretty easy to use by another service. One can also turn it into a library. Without further ado, let us start creating it.

Dependency - SSH.NET

SSH.NET is the dependency we would use in order to communicate with the SFTP server.

Code

The code works as follows:

Connect to the SFTP server when the application starts.
Be ready to do any SFTP-related operation using that connection.
Close the connection upon program termination
The service supports dependency injection out of the box

The appsettings.json configuration file:


// Configuration before...

"Sftp": {
    "IsConnected": false,
    "Host": "192.168.XXX.YYY",
    "Username": "sftpUserHere",
    "Password": "sftpPasswordHere",
    "BasePath": "/Server/MyApp/Files"
  },

// Configuration after...

Note that IsConnected is needed in cases where one needs to use dependency injection for their service/API while the sftp server is unavailable at the moment.

The ISftpUtility interface

public interface ISftpUtillity
{
    Task<(byte[] Content, string ContentType)> DownloadFileBytesAsync(string remotePath);
    Task<(string Base64Content, string ContentType)> DownloadFileBase64Async(string remotePath);
    void DisposeConnection();
}

And below is the SftpUtility

using System;
using Microsoft.Extensions.Configuration;
using Renci.SshNet;

public class SftpUtility : ISftpUtillity
{
    private readonly SftpClient _sftpClient;
    public SftpUtility(IConfiguration configuration)
    {
        var isSftp   = configuration.GetSection("Sftp:IsConnected").Get<bool>();
        if(isSftp)
        {
            var host     = configuration.GetSection("Sftp:Host").Get<string>();
            var username = configuration.GetSection("Sftp:Username").Get<string>();
            var password = configuration.GetSection("Sftp:Password").Get<string>();
            _sftpClient  = new SftpClient(host ?? "", username ?? "", password ?? "");
            _sftpClient.Connect();
        }
    }

    public async Task<(byte[] Content, string ContentType)> DownloadFileBytesAsync(string remotePath)
    {
        try
        {
            using (var memoryStream = new MemoryStream())
            {
                await Task.Run(() => _sftpClient.DownloadFile(remotePath, memoryStream));
                return (memoryStream.ToArray(), GetContentTypeFromPath(remotePath));
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error downloading file: {ex.Message}");
            return (null, null);
        }
    }

    public async Task<(string Base64Content, string ContentType)> DownloadFileBase64Async(string remotePath)
    {
        var (content, contentType) = await DownloadFileBytesAsync(remotePath);
        if (content != null)
            return (Convert.ToBase64String(content), contentType);
        return (null, null);
    }

    public void DisposeConnection()
    {
        _sftpClient?.Disconnect();
        _sftpClient?.Dispose();
    }

    private string GetContentTypeFromPath(string path)
    {
        string extension = Path.GetExtension(path).ToLowerInvariant();
        switch (extension)
        {
            case ".pdf": return "application/pdf";
            case ".jpg":
            case ".jpeg": return "image/jpeg";
            case ".png": return "image/png";
            case ".txt": return "text/plain";
            case ".xlsx": return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
            // Add more content types as needed
            default: return "application/octet-stream"; // Default for unknown types
        }
    }
}

Disposing the connection

In ASP.NET, the connection can be disposed by tapping in the ApplicationStopping lifetime method, like so

Program.cs

app.Lifetime.ApplicationStopping.Register(() =>
{
    Console.WriteLine("Application is stopping...");
    using (var scope = app.Services.CreateScope())
    {
        var serviceProvider = scope.ServiceProvider;
        var sftpUtility = serviceProvider.GetRequiredService<ISftpUtillity>();
        sftpUtility.DisposeConnection();
    }
});

Room for improvement

One can easily use the same library to upload or delete files on the remote server.

Conclusion

This was a short tutorial illustrating the usage and benefits of using SFTP in the case of writing an API or a service when file management is needed.

Photo Credit.

Install a NATS server on Debian/Ubuntu

Amjad Abujamous — Mon, 04 Nov 2024 15:08:08 +0000

Introduction

This tutorial teaches you how to install a NATS server directly on Debian-based linux (not via Docker).

Overview

The installation consists of multiple steps each of which will be explained in detail. Those steps are as follows:

Create a user with name nats who belongs to the group nats.
Download the latest NATS release build.
Unzip the folder and copy it to /usr/bin.
Add NATS to systemd.
Run the NATS server and confirm it is working.
Enable it, so it can run at startup.

Step 1: Create the user nats

In order to add a user, we will use the useradd command, like so.

sudo useradd -s /bin/bash -d /home/nats/ -m -G sudo nats

To add a password for the user (not really needed, just a standard practice):

sudo passwd nats

Step 2: Download NATS

As per the documentation, one can download NATS by using the following shell command.

curl -L https://github.com/nats-io/nats-server/releases/download/v2.10.22/nats-server-v2.10.22-linux-amd64.zip -o nats-server.zip

Note that you may want to change the version of NATS if there are newer releases.

Step 3: Add NATS to /usr/bin

This step is straightforward. First, open the file explorer and unzip NATS.

Now copy the unzipped folder to /usr/bin

sudo cp nats-server/nats-server-v2.10.22-linux-amd64/nats-server /usr/bin

Step 4: Add NATS to systemd

This one is a little tricky, but this guide simplifies it for you.

Create /etc/nats-server.conf. No need to add content to it, since it is only there for customization and overriding the default behavior.
Create /etc/systemd/system/nats.service and add the following content to it.

[Unit]
Description=NATS Server
After=network-online.target ntp.service

[Service]
PrivateTmp=true
Type=simple
ExecStart=/usr/bin/nats-server -c /etc/nats-server.conf
ExecReload=/bin/kill -s HUP $MAINPID
ExecStop=/bin/kill -s SIGINT $MAINPID
User=nats
Group=nats
# The nats-server uses SIGUSR2 to trigger using Lame Duck Mode (LDM) shutdown
KillSignal=SIGUSR2
# You might want to adjust TimeoutStopSec too.

[Install]
WantedBy=multi-user.target

Save and exit.

Windows Subsystem for Linux

For WSL users, please make sure the user nats has the access permission on /usr/bin/nats-server. Here is how:
Change the user to nats.

su - nats

Then add read and execute permissions to that folder.

sudo chmod +rx /usr/bin/nats-server

Step 5: Run the NATS server

This one is easy. We reload the daemon and then run NATS.

sudo systemctl daemon-reload

sudo systemctl start nats

To confirm that it is running, run systemctl status nats, and you should get that it is active.

Step 6: Enable NATS

To enable NATS which would run it at startup, simply run the command below:

sudo systemctl enable nats

Conclusion

This simple tutorial ensures that the installation of NATS on Debian-based linux is smooth and easy. Let me know below if you have any questions or inquiries about it.

Happy building!

JSON.parse without errors

Amjad Abujamous — Sat, 12 Oct 2024 15:28:56 +0000

Introduction

We've all been in the situation where we simply want to call JSON.parse and not get an error if the value we're trying to parse is null or undefined.

JSON.tryParse to the rescue

What we can do to fix it is simply introduce the method JSON.tryParse instead.

Implementation

Simply define this function in your application at the beginning and make it globally available.

JSON.tryParse = function (value) {
  try {
    return JSON.parse(value);
  } catch (error) {
    return null;
  }
};

Usage

Let's say you want to retreive a cached user without having to try/cacth. This is how:

const user = JSON.tryParse(localStorage.getItem("user"));
// returns "null" instead of throwing an error in case there is no entry

Conclusion

This tutorial has helped us work with parsing JSON objects without having to worry about catchig errors every single time.

Happy developing!

Synchronize Files between your servers

Amjad Abujamous — Sun, 08 Sep 2024 18:17:47 +0000

Introduction

This tutorial teaches you how to automate the synchronization of two or more folders on different PCs or servers on the same network.

Buckle up!

1. Static IP Address

The first step is to set a static IP address on each of the devices in the network.

2. Setup ssh keys on both devices

Open up a terminal or WSL on windows and type in the following:

ssh-keygen -t rsa

ssh-copy-id 192.168.1.15

where 192.168.1.15 is the IP address of the secondary (or replica) server.

3. Install Unison

The file synchronization tool

Unison is a reliable file synchronization tool designed to be cross platform, fast, and efficient. One can install it via the releases page in their github repository.

Note that the tool must exist on all PCs that need to synchronize their folders.

4. Configure Unison

Folders and parameters

Configuring Unison is quite easy since it has a built-in GUI. Also, the configuration only needs to be done on the "primary" machine, and the others will periodically (or almost instantly) receive replicas of the files in a specific folder.

4.1 Extract Unison Archive

Extract the archive which has unison in it to your desired folder. In my case, it is ~/Tools/Unison.

4.2 Launch Unison GUI

Navigate to the bin folder and execute the file unison-gui.

4.3 Create a profile

A Unison profile specifies how the synchronization process will take place and which folders on which machines will be synchronized. To create one, click on "Add" and follow the Profile creation wizard.

Profile Description:

Profile name: default
Description: Default profile

Connection Setup:

Synchronization kind: using ssh
Host: 192.168.1.15
User: remote_user (replaced by your username on the secondary device)
Enable compression: true

Directory selection:

Local Directory: Documents
Remote Directory: /home/remote_user/Documents

Specific Options:

[Unchecked] Synchronization invloving a FAT partition.

Done.

4.4 Configure the profile

Select default and click on "Edit" in the GUI.

Add the following options by click on "Add", selecting the option, and then applying the value.

auto: true
batch: true
sshcmd: /home/remote_user/Tools/Unison/bin/unison (replace with the executable location on the remote/secondary machine)

4.5 Run unison

You can either run unison using the UI by selecting the profile and click on Open which will run the tool or by navigating to the executable location and typing

./unison default.prf

That's it! Now the contents of the folder on the first machine should be mirrored on the second one. Note that the profile name would be different in case you'd want to run another.

5. Automate Unison

On the Linux bash, Mac Terminal, and WSL, one can automate the command and run it at a certain interval. On Ubuntu, for instance, the command below after navigting to the unison executables folder will do the trick.

while true; do ./unison default.prf; sleep 10; done

Where 10 is the number of seconds.

More on bash automation and sh files here.

Conclusion

Congratulations! You made it to the end of this tutorial. Hope this tutorial enabled you to do file synchronization seamlessly.

Cover image credit.

Easy Postgresql 16 Replication on Ubuntu

Amjad Abujamous — Sat, 31 Aug 2024 22:11:17 +0000

Introduction

Db Administration tasks can be a little intimidating to developers. Particularly, setting up database replication in this case. This article links two other articles which have been the only ones to work smoothly and easily for setting up replication for postgresql 16.

1. Static IP

Setting up static IPs on the primary and secondary servers can be done by following the steps in this video.

Note: If DNS switch is greyed out on your system, just set the DNS values separarted by a comma without switching it off, it should still work.

2. Replication Steps

The video [and article] by cherry servers was the one to work best with no issues whatsoever. It has the secondary server stream every single change from the primary server in realtime without issues at all (my addition was synchronous commits to ensure that standbby has the same data).

Also set these on the primary server

max_wal_senders = 5     # max number of walsender processes
                # (change requires restart)
max_replication_slots = 10  # max number of replication slots


synchronous_commit = on     # synchronization level;

synchronous_standby_names = '*'

Notes:

When the secondary server is turned off, the primary server stops accepting changes because it loses the ability to [synchronously] replicate. Only use this when the secondary server is always present, or disable replication when done with it.
Although the wal-level is set to logical, the replication type between primary and secondary is in fact streaming, since streaming < logical.

Disabling Replication

Primary server

To disable, restore the settings on the primary server to the initial ones:

On /etc/postgresql/16/main/postgresql.conf
- wal_level = logical --> wal_level = replica
- max_wal_senders = 5 --> # max_wal_senders = 5
- max_replication_slots = 10 --> # max_replication_slots = 10
- wal_log_hints = on --> #wal_log_hints = on
- ensure #archive_mode = on
- synchronous_commit = on --> #synchronous_commit = on
- synchronous_standby_names = '*' --> #synchronous_standby_names = '*'
On /etc/postgresql/16/main/pg_hba.conf Change this line

host    replication     replica_user        192.168.1.1/24          md5

192.168.1.1/24 is the IP address of the replica server.
Back to this line

host    replication     all         0.0.0.0/0           md5

Secondary server

Remove the file standby.signal from the data directory which is located at /var/lib/postgresql/16/main. (according to this. to be tested.)

Final Notes

This article is more of a diary as to how this process went so I can get back to it in the future if needed, and it can also be helpful to you.
Cover Image Credit:
https://cdn.prod.website-files.com/665de628e01a0041a62ecd14/665de628e01a0041a62ed338_logical_replication_1-p-1080.jpg

DbGate - a fast database client

Amjad Abujamous — Wed, 14 Aug 2024 08:29:55 +0000

Introduction

While Dbeaver and Dbvis are quite good cross-database clients, they an consume a lot of memeory and sometimes "think" before executing an operation. I recently found a post on reddit where someone recommended DbGate, and I am not looking back.

Features

Ability to connect to multiple databases including, Postgres, MongoDb, SqlServer, and many others.
Cross patform: Windows, Mac, and Linux.
Ability to generate clear ER diagrams with the option of choosing which tables to be included and which ones to be discarded.
Export data to any of the popular formats including CSV, Excel, XML, JSON, and others.

Try it out!

https://dbgate.org/

Final Notes

This is a good product that increased the productivity of our team and I highly recommend it.

Modern Dropdown component HTML

Amjad Abujamous — Wed, 31 Jul 2024 08:18:17 +0000

TL;DR

I wanted to challenge myself to build a custom dropdown component that works with HTML forms and looks the same on all platforms and browsers. I finally managed to make one, and here is how...

Code

The code can be found on this Code Pen.

How it's done

Create a native web component that extends HTML Element.
Give it the ability to have multiple themes (using pre-defined colors in CSS).
Allow to set its items either using setAttribute or by firing an event which has the items in it.
Listen to a custom event indicating when an item is selected.
Give it the ability to be a part of any HTML form. Note that element-internals-polyfill is needed for this to work on some browsers such as Safari at the time of writing this article.

UI of the dropdown component

It is composed of three elements.

a read-only input element which displays the currently selected item.
a (initially hidden) div which contains the items in the dropdown menu.
an icon to indicate the state of the dropdown (open or closed). Note that the svg used is adapted from Bootstrap icons.

Business logic

When connected, display the component in its selected theme. Choose the default one if none is selected.
Register the dropdown and item selected events passed when declaratively creating the component.
Once the dropdown event is fired, capture the items and add them to the list.
Give the ability to set the selected item programatically. This is particularly useful when the currently selected item is pre-known for the service provider. For instance, a list of locations in a booking site and it should ideally display the current city at which the user resides.

How it looks

Conclusion

We created a modern customizable dropdown component using the tools available to the browser and it looks the same everywhere. Feel free to let me know if you have any additions or questions.

Happy developing!

Cloudflare Tunnels VS ngrok

Amjad Abujamous — Sat, 18 May 2024 18:48:22 +0000

TL;DR

Reverse proxy solutions are a great and straightforward method to expose your dev (and possibly production) server to the internet. The two prominent ones are ngrok and Cloudflare tunnels. This article recommends both of them and compares and contrasts them on a high level.

Introduction

As mentioned in my previous article, one can monitor their server using one of many solutions, and in order to expose your web or home server without opening a port on your firewall and possibly having to configure a static public IP, you need to use a reverse proxy solution to solve that problem. The two most reliable ones in the market at the time of writing this article are ngrok and Cloudflare Tunnels.

ngrok

Ngrok is the one that pops up the most in YouTube videos and online articles since it quite easy to setup and get up and running. The steps can be found here which include running a simple web server, installing ngrok, configuring the auth token, and running the reverse proxy agent.

Cloudflare tunnels

To run the cloudflared tunnel agent and have one up and running, you need to follow these steps:

Create an account with Cloudflare by going to their website here and choosing the free plan.
Fill up the information needed, which are an email address and a password at the time of writing this article.
It will then take you to their dashboard where you need to do two things, register, link, or transfer a domain, and then create a tunnel in their Zero Trust dashboard. The screenshots below explain the steps.

3.1 Cloudflare domain

3.2 Cloudflare dashboard w/ ZeroTrust tab

3.3 Cloudflare tunnel creation steps
Note: The cloudflared client is easy to install yet its installation steps are different based on your operating system.

3.4 Cloudflare active tunnel

My biased thoughts on the two solutions

As stated earlier, both solutions are reliable and they work well.

My preference is to use ngrok for dev servers, homelabs, and staging environments. Also, the nice thing about ngrok it is the fact that it offers subdomains and can work instantly. Also, subdomains are available so you don't have to purchase and maintain one if it's not a requirement.

Cloudflare, on the other hand, is more useful in production since it has more servers around the world and has more security configurations. But you need a domain name to use it (though easily offered by them).

Final Note

No matter whether you need to expose a server, use ssh or RDP, or if you have any other use case, those reverse proxy solutions can certainly be of benefit to you. Choose the one that best suits your needs and proceed with it.

Happy building!

Easily monitor your server's stats

Amjad Abujamous — Tue, 16 Apr 2024 00:55:46 +0000

TL;DR

One can use Glances along with a reverse proxy to easily monitor the health of their Server/PC from any location by simply accessing a link. This tutorial walks you through exactly that.

Introduction

Many of us want a straightforward solution to monitoring the health of their Home server, Web server, or essentially any PC. While Grafana and Metabase are good realtime dashboard solutions, their setup can be difficult, which is why we will explore and setup Glances.

Steps to set it up

Install Glances (cross-platform) on your system.
Enable its monitoring feature via a web browser.
Run a reverse proxy on the server.
Access the link from anywhere.

Prerequisites

As is from their github repository.

python>=3.8 (use Glances 3.4.x for lower Python version)
psutil (better with latest version)
defusedxml (in order to monkey patch xmlrpc)
packaging (for the version comparison)
ujson (an optimized alternative to the standard json module)
pytz (for the timezone support)
pydantic (for the data validation support)

Step 1: Install Glances

Can be done via the pip package manager for python.

pip install --user 'glances[all]'

Note that you may need to type pip3 instead of pip, depending on your Python installation.

Step 2: Run glances and monitor the system

To run it in the terminal, run the command:
glances

In our case, we want to run it in a browser, so we type:
glances -w

which gives us the following.

Step 3: Access from anywhere

Many good reverse proxy solutions currently exist on the market such as ngrok and Cloudflare tunnels. They give one the ability to reliably run a tunnel and ensure it does not go down. They also offer the ability to securely access their links using whitelisted IP addresses or by using HTTP Basic Authentication.

For this tutorial, however, we will go with the simpler solution serveo.net for demonstration purposes.

Voila! That link can now allow us to monitor the system from anywhere with very minimal setup and installation.

Final Thoughts

I hope you found this tutorial useful, and please feel free to comment below if you have questions, additions, modifications, or criticism of this method. All the best!