DEV Community: Open Sauce Projects

Tech bits 1 - Cypress screenshot errors in headless mode

Open Sauce Projects — Sun, 08 Jun 2025 18:14:48 +0000

In this series, I share key lessons I’ve learned—one concept per post—for future me and anyone it might help.

In Cypress headless mode, when a test encounters an error, you can see the result of the test as a screenshot. However, the screenshot doesn’t show the cause of the error—it only shows where the error occurred (e.g., the failing selector or the function like then where it happened).

You can work around this limitation by creating a separate screenshot that displays the error message directly on the page.

Cypress.on("fail", (error, runnable) => {
   // Append the error message to the body
   cy.document().then((doc) => {
      const errorDiv = doc.createElement("div");
      errorDiv.innerText = `Error: ${error.message}`;
      errorDiv.style.position = "fixed";
      errorDiv.style.top = "0";
      errorDiv.style.left = "0";
      errorDiv.style.backgroundColor = "red";
      errorDiv.style.color = "white";
      errorDiv.style.padding = "10px";
      errorDiv.style.zIndex = "9999";
      doc.body.appendChild(errorDiv);
   });

   // Wait a moment so it renders
   cy.wait(500);

   // Take the screenshot
   cy.screenshot("errors/error_screenshot_with_message");

   // Rethrow the error to fail the test
   throw error;
});

This code block listens for the fail event. When triggered, it creates a red banner at the top of the page displaying the error message. The code should be placed inside the cypress/support/e2e.ts file (or e2e.js if you're using JavaScript).

Happy coding!

Transitioning from Win to Mac 2- Managing ARM and x86 nodeJS and Python versions

Open Sauce Projects — Sat, 02 Nov 2024 15:57:00 +0000

Lot of python and NodeJS packages are compatible with ARM but not all, from a performance perspective you better of using an ARM native software.
So you might run into scenarios where you need a certain version of Python or NodeJS in both it's ARM and x86 version, i will attempt to give a solution for these problems in this article without costing ARM or a leg.

Launching a "x86 terminal"

It is possible to launch a terminal session where all commands will go through rosetta 2 here are the steps to achieve that:
1. Edit the terminal user profile with nano or any other terminal file editor: nano ~/.zshrc
2. Add the following lines to the file:

alias arm="env /usr/bin/arch -arm64 /bin/zsh --login"
alias x86="env /usr/bin/arch -x86_64 /bin/zsh --login"

In this way if you type the "intel" command into the terminal you will get an x86 session, if you write the "arm" command you will get and a native not emulated ARM session.
This will be needed when installing the x86 version of NodeJS.

Managing Python versions

Creating and managing python environments is made easier using miniconda, which can be installed like this: brew install miniconda
conda is like a python virtual environment you can install packages into it using the conda install command or use pip
Here are steps to create a python environment with miniconda:
1. Create the environment with following command: conda create -n my_x86_env -y
2. You can active the environment with the command like this: conda activate my_x86_env
3. You need to set which architecture you want to use for x86: conda config --env --set subdir osx-64 for arm: replace osx-64 with osx-arm64 but if you don't specify the architecture it will use ARM as a default
4. Then you can install python conda install python=3.9 you can search for available python version with conda search python
5. Now your env is ready for installing packages

Managing NodeJS versions

For this we gonna use nvm which is version manager for node, this can be installed with brew: brew install nvm
Here is list of useful nvm commands
Steps to get you going:
1. The architecture will depend on what terminal you in, so if you want x86 use the "x86" command we discussed earlier
2. Install node: nvm install VERSION you can't install the exact same version in both architectures but you can install slightly older or newer one
3. To check the current version of node use: node -v
4. For switching between the versions: nvm use VERSION command. Fun fact when switching versions you don't need to specify the version number exactly for example if i want to switch to 20.16.0, I just have to type nvm use 20

Happy coding!

Sources

Transitioning from Win to Mac 1-Downloading software

Open Sauce Projects — Sat, 02 Nov 2024 15:56:01 +0000

In this series of articles I want to document my experience of switching from windows to a mac machine in a work environment and highlight the differences between them to hopefully help other people who are also making this transition.
These articles are applicable for the mac's that have an ARM processor, so from the M1 mac mini and upwards.

Rosetta 2

Here i'm not talking about the rosseta stone, so don't worry you wont have to carry a stone with you to work, no this is a translation layer.
These new mac's processors are based on the ARM architecture, the old macs were based on the x86 (sometimes called x64 for 64bit hardware) architecture because of this software written for the x86 won't run on ARM without a translation layer.
Also this kind of emulation can have a 20-30% performance (older benchmark link below) impact and it is not guaranteed that all software will run.
If you try to open a x86 app the OS will prompt you to install Rosetta but you can manually install it with the following command: softwareupdate --install-rosetta

Getting the software

For getting software the safest and easiest way is to get it from the Appstore but for lots of apps you need the brew package manager.
You can install it with the folowing command: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
In brew there are two types of software you can download, a cask or a formula, formula is usually a refers to a non gui app.
Most apps can be found on the official brew site but some can be installed from a github repo using the "Tap" feature which adds that github repo as a new "repository" for packages.
When you found your package you just run brew install package_name and that is it.

My software is installed but I can't seem to launch it

Sometimes a software can't be found in the Launchpad and can't be started from the terminal either.
Don't worry, get a well brewed beer and we gonna fix that, here are the steps to fix a terminal app not working:
1. Run brew info package_name to find out where the program is saved
2. Try to find the executable in the folder and try to run in from there
3. If it works, add the folder to PATH variable on startup so the program can be launched from anywhere by editing your terminal profile using a terminal file editor like nano:
  - After installing nano from brew like: brew install nano, edit the terminal profile: nano ~/.zshrc
  - Here you can add the folder where your program resides to the PATH by adding this line to the end of the file: export PATH=$PATH:executable_location
Now if a gui app not in the Launchpad you just drag the executable's icon to the Launchpad's icon on your dock, that will add it.

Happy coding!

Sources

Access Nvidia gpu inside docker container in Arch linux

Open Sauce Projects — Sat, 24 Aug 2024 00:19:03 +0000

Why

If you need gpu acceleration in a container or just have too much free time on your hands, you can run all kinds of things. For example Large Language Models or GUI apps.
You can even create your own gpu accelerated docker image by using Nvidia ubuntu images

How

We have to install the NVIDIA Container Toolkit
The package can be installed from the Extras repository
```
sudo pacman -S nvidia-container-toolkit
```

Configure the container runtime by using the nvidia-ctk command. The nvidia-ctk command modifies the /etc/docker/daemon.json file on the host. The file is updated so that Docker can use the NVIDIA Container Runtime.
```
sudo nvidia-ctk runtime configure --runtime=docker
```
For the change to take effect we have to restart the docker daemon.
```
sudo systemctl restart docker
```

You can add the gpu using docker compose:

service_name:
  image: ....
  deploy:
    resources:
      reservations:
        devices:
          - driver: nvidia
            count: 1
            capabilities: [gpu]

If you use the docker run command, you can do:

sudo docker run --runtime=nvidia --gpus all ....

Resources

Exposing your services using subdomains with a dynamic ip

Open Sauce Projects — Sat, 13 Jan 2024 23:32:30 +0000

Prerequisites

This guide assumes that you using Docker and Docker compose to manage your self hosted services, Caddy can be installed without Docker but ddns-updater have to be replaced with another service.

How will this work?

I'm glad you asked, we will use two containerized tools. The first is ddns-updater which will update your A records (subdomains) when your ip has changed, so your domains will always point to your server.
The second is Caddy a reverse proxy which will forward a request for a subdomain to a port on your machine and it will give you automatic HTTPS.

Why do i need a reverse proxy?

You may ask why do you need a reverse proxy if you know the port of your service and have a domain from which you can access it?
Due to the automatic HTTPS your traffic will be encrypted, without SSL (HTTPS) everyone on your WIFI network and your ISP can read your traffic.
You only need to open two ports on your router 443 (HTTPS), 80 (HTTP).
You can do a lot of additional things between the client sending a requests for a site and and sending a response using a middleware for example, you can do additional authentication for an unprotected site with a caddy plugin.

Setting up the domain and subdomains

First you have to get a domain, you can get a free domain on Freenom but I don't recommend it. Many people reported on Reddit that they domain's were removed.
You can get a free sub domain with DuckDNS, in this case you can setup your sub domains in a form of "sub sub domain", for example if you clam the mydomain.duckdns.org subdomain, your service would be located at service.mydomain.duckdns.org, but i haven't tried this option but people on Reddit reported success with it.

Manage domain with Dynamic DNS service

This service can manage your domain, your domain provider will provide you with an API key or token which ddns-updater can use to update the domain.
Please check if your provider is on the supported list for ddns-updater.
It also provides a web UI from you can see the status of you domains.

Setting up ddns-updater

Docker compose setup:

Dynamic-dns:  
   image: qmcgaw/ddns-updater  
   container_name: dynamic-dns  
   restart: unless-stopped  
   privileged: true  
   volumes:  
     - /your/path/:/updater/data  
   ports:  
     - 8000:8000

The configuration stored in the config.json in the specified data folder.
Every subdomain has an entry in the settings list with the domain provider, the domain, the sub domain and the api key.

{
"settings":[
      {
         "provider":"namecheap",
         "domain":"domain.cc",
         "host":"sub",
         "password":"apikey",
         "provider_ip":true
      }
    ]
}

SAetting up Caddy

Docker compose setup:

caddy:  
   container_name: caddy  
   image: caddy:latest  
   restart: always  
   ports:  
     - 443:443/tcp  
     - 80:80/tcp  
   volumes:  
     - /your/path/caddy_config:/config:rw  
     - /your/path/site:/srv:rw  
     - /your/path/caddy_data:/data:rw  
     - /your/path/Caddyfile:/etc/caddy/Caddyfile:rw

Configuration stored in the Caddyfile, for every subdomain you need to define a reverse_proxy ip:port, you can write comments with hashtags:

sub.example.cc {  
       encode gzip  # forward header
               log {  
                   output file /data/monitor.log {  
                       roll true # Rotate logs, enabled by default  
                       roll_size_mb 5 # Set max size 5 MB  
                       roll_gzip true# Whether to compress rolled files  
                       roll_local_time true # Use localhost time  
                       roll_keep 2 # Keep at most 2 log files  
                       roll_keep_days 7 # Keep log files for 7 days  
                       }  
               }  
   reverse_proxy ip:port  
}

Example with Namecheap domain provider

if you want to create a self hosted netflix with the Jellyfin thats on the 8096 port with a domain from Namecheap
Create an A record for the subdomain for the service, for example jellyfin.mydomain.com on your domain providers dashboard, in Namecheap navigate to Account->Dashboard->Domain List->Manage->Advanced DNS. The "Type" enter 'A + Dynamic DNS Record' for "Host" enter the sub domain-> 'jellyfin', and Value is the your ip, set the TTL (update interval for the record) to Automatic
Add an entry to the settings list in the config.json for the ddns updater:

      {
         "provider":"namecheap",
         "domain":"mydomain.com",
         "host":"jellyfin",
         "password":"apikey",
         "provider_ip":true
      }

Add an entry in the Caddyfile:

jellyfin.mydomain.com {  
       encode gzip  # forward header
               log {  
                   output file /data/jellyfin.log {  
                       roll true # Rotate logs, enabled by default  
                       roll_size_mb 5 # Set max size 5 MB  
                       roll_gzip true# Whether to compress rolled files  
                       roll_local_time true # Use localhost time  
                       roll_keep 2 # Keep at most 2 log files  
                       roll_keep_days 7 # Keep log files for 7 days  
                       }  
               }  
   reverse_proxy 192.168.0.101:8096
}

Enjoy!

Store images/files for API, using MySQL/MariaDB, Express and Sequelize

Open Sauce Projects — Wed, 01 Nov 2023 13:04:32 +0000

Co-authored with @dezsicsaba

This guide is focused on storing and serving images, but you can store any kind of data in MySQL/MariaDB in this manner
We also need to install the multer extension to Express to easily deal with file uploads
- multer is an npm plugin. Here is the complete multer documentation

DB side of the story

First we have to define what datatype we're going to use in our db. In our project we used the BLOB datatype, because it can store raw binary data.
It has four sub-types:
- TINYBLOB: Maximum length of 255 bytes
- BLOB: Maximum length of 65535 bytes
- MEDIUMBLOB: Maximum length of 16777215 bytes, or 16MB in storage
- LONGBLOB: Maximum length of 4294967295 bytes or 4GB in storage
You thought this is that easy, weell you are mistaken. We have to specify how much data we want to transfer between database and the API, since the default values are too small.
- We can do this by setting the following two variables.
- (Variables can be set by editing the mysqld config file):

  [mysqld]
  ......
  net_buffer_length = 1000000
  max_allowed_packet=256M
  ......

Another way is to use the MySQL command line using these commands

  set global net_buffer_length=1000000; 
  set global max_allowed_packet=256M;

Don't forget to change these variables based on data size

So what code do we need to write?

Sequelize supports all four types of BLOBs. This can be adjusted when you are defining your model.

  DataTypes.BLOB                // BLOB (bytea for PostgreSQL)
  DataTypes.BLOB('tiny')        // TINYBLOB (bytea for PostgreSQL)
  DataTypes.BLOB('medium')      // MEDIUMBLOB (bytea for PostgreSQL)
  DataTypes.BLOB('long')        // LONGBLOB (bytea for PostgreSQL)

First we need to define the field and datatype in our model

  const sequelize = require('sequelize')
  const {Model} = require('sequelize')
  class pictures extends Model {}


  pictures.init(
  {
      Picture: {
        type: sequelize.BLOB('long'),
        allowNull: false
    },
      ItemId: { //suppose we have an item where the image belongs to
        type: sequelize.INTEGER,
        allowNull: false
      }
    },
    {
      sequelize: _db, //data connection object: new Sequelize(....
      tableName: 'pictures',
      modelName: 'Pictures'
    }
  )
  module.exports = pictures

Receive and store image/file

In this example, we send the file with a form using the multipart/form-data MIME type and an item id to describe which item this image belongs to, server handles the request with the multer extension
From the received image we need the buffer property. It has the type of Buffer, it is a stream of binary data

router.post("/img/:itemId", upload.single('file'), async (req, res) => {
  let {itemId} = req.params
  let img = req.file
  if (!img) {
    console.error('>>>>> [ERROR] no img!!!')
    res.sendStatus(406)
    return
  }
  await connector() //function that lets us connect the sequelize to the dataBase

  //You are highly advised to have the build and save part of the code inside a picture-controller, outside the router
  //We have it here for the sake of clarity
  let picture = Pictures.build({
    Picture: img.buffer,
    ItemId: itemId
  })
  let saved = await picture.save()
          .catch((err) => {
            console.error('>>>>> [ERROR] could not save image')
            throw err //presuming you are handling your errors at the highest level of the api(api.listen...),
                      // in the index.js with a middleware
            return
          })
  res.json({
    modelInstance: saved
  })
})

Send image back to the client

To send images to the client we first get the buffer from the image after that we can convert it to the Base64 format so we can included in a JSON response.
- SIDENOTE: If you are working with lets say VueJs, the base64 conversion is not at all needed. We needed to convert the buffer to base64 in our project for many different reasons
The drawback is that the base64 conversion takes a lot of processing power.
Suppose we want to get the images that belong to an item, based on the item id in the URL:

const Pictures = require('../models/Pictures') //obviously the path for the Picture model may differ
router.get("/img/:itemId", async (req, res) => {
  const {itemId} = req.params
  await connector() //function that lets us connect the sequelize to the dataBase

  //You are highly advised to have the findAll part of the code inside a picture-controller, outside the router
  //We have it here for the sake of clarity
  const images= await Pictures.findAll({
    include: Items,
    where: {
      ItemId: itemId
    }
  })
  if (images.length === 0){
    res.sendStatus(406)
    return
  }

  //The conversion part is obviously only needed if you need to return base64 as part of your response
  let imgs = convertToBase64(images)

  res.setHeader("Content-Type", "application/json") //!!IMPORTANT!!
  res.json({
    images: imgs,    //if you wannt to return the base64 encoded image array
    pictures: images //if you want to return the images received from the db without converting them to base64
  })
})

function convertToBase64(images){
    outputArray = [] //this will contain the base64 strings
    images.forEach((img) => {
      let arraybuffer= Buffer.from(img.Picture)
      let ret = {
        array: arraybuffer.toString('base64'),
        item: img.Item
      }
      outputArray.push(ret)
    })
    return outputArray
}

The definition of our Item model:

const sequelize = require('sequelize')
const {Model} = require('sequelize')
const Pictures = require('./pictures') //the Picture model

class items extends Model {}

items.init(
    {
        ProductName: {
        type: sequelize.STRING,
        allowNull: false
    }},
    {
        sequelize: _db,
        tableName: 'items',
        modelName: 'items'
    }
)
//if you are using MariaDb you can define the connection by:
//for example while using XAMPP's MySql that technically uses MariaDb
items.hasMany(Pictures, {foreignKey: 'ItemId'})
Pictures.belongsTo(items)

//if you are directly using MySql:
items.hasMany(Pictures, {foreignKey: 'ItemId'})
Pictures.belongsTo(items,{foreignKey: 'ItemId'})
module.exports = items

Sources

Easily check if web service available outside the local network

Open Sauce Projects — Thu, 15 Sep 2022 15:35:54 +0000

When is this relevant?

If you have a web service on your local network you want check if its accessible publicly on the internet.

What do i need?

It's a bit of a hack, but you can use google translate as a proxy. From here in google translate you can get a url from which you can access your site's translated version. The site might not render properly but the important thing is that this url will always point to your website. So if this site is available so is yours and vice versa.
You can do a GET request and test for site availability in two ways.
- Do a keyword search if you know a word that should always appear on the site
- Another way is to check the request's status code, if it's not 200 the site is most likely down.
- You can monitor this with a scheduled script that would notify you if the site is down, here's a simple python example:
```
import requests  
url="'translated' url"  
keyword=""  
r=requests.get(url)  
if keyword not in r.text:  
    print("send notification")  
# or  
if r.status_code!= 200:  
    print("send notification")
```
For less headaches instead of a script i would suggest downloading Uptime kuma which is specifically made for checking website status, it supports status code and keyword checking and a lot more. It has a lot of options for notifications, not limited to but including Telegram, Discord, Gotify, Slack, Pushover, Email (SMTP) and it has a nice web ui.

Soo

I hope it was helpful in some way, if you have an alternative idea be sure to comment it below.

Build a media center from almost anything

Open Sauce Projects — Sun, 21 Aug 2022 12:53:00 +0000

Waaait what is a media center, and why should i care?
- It's software that's basically a smart tv equivalent where you can view all your media/subscriptions in one place.
- In some ways it's better than a smart tv because it has generally more software than a cheap tv and you can repurpose your existing device.
- The one drawback is that it will require some setting up.

Hardware

You can use any 64bit intel/amd processor equipped laptop/pc from tha last 10 years if you are sticking to hd content.
You can use an android box or phone with hdmi out or a cheap Single Board Computer like the raspberry pi.

Software

The star of the show is kodi, which is a dedicated media center app with an extensive addon ecosystem.
It can be installed directly on windows, android or on linux, macos.
On the other hand if you are using dedicated hardware for this purpose i would advise to install a Just Enough Operating System which is a stripped down linux system with kodi acting as the systems "desktop", they have dedicated controls for wifi and bluetooth inside the kodi interface.
JEOS are:
- for amd/intel and some Single Board Computers you can install libreelec.
- In case of the raspberry pi you can use libreelec or OSMC.

Addons

Sooo inside kodi, software is distributed as addons they can be installed from repositories and user repositories can be installed via zip files.
You can basically watch every streaming service with right addon, most of it can be found in the slyguy repository, but you can find every kind of content under the sun.
Kodi comes included with a base repository with a lot of addons, also libreelec has its own repo with useful addons like a chrome browser.

Connectivity

You can remote control it with android apps like yatse, kore, the Official Kodi Remote ios app or with the built in web interface.
Kodi includes a SMB file server, and you can cast to it using airplay, or you can share videos with kodi through the remote app.

Sooo

I hoped i managed to spark some interest in you. Stay curious!

DIY low power NAS 2022: 1 - The hardware

Open Sauce Projects — Sat, 13 Aug 2022 21:35:45 +0000

This is the beginning of a series of articles where I go over my choices and what other options I found for building a low power nas, as concisely as possible and hopefully help you along the way.

CPU and motherboard

If you want to build a 24/7 nas, a very important benchmark to look at, is idle power usage because chances are you're not going to be accessing your nas most of the day. You can look at CPU's TDP but almost always idle usage will be lower.
Unfortunately most desktop CPUs are not good options. If you're aiming for 10-20w idle, you can try undervolting them but usually you need a very specific combination of motherboard and CPU to achieve a good result. Here is a list of good combinations with benchmarks.
That leaves mobile chips, you have 4 options here.
- You can use an arm Single Board Computer like the raspberry pi. They mostly idle under 5w, but they have limited sata ports without extension boards.
- You can use a laptop or a mini pc, but you're limited to 1 or 2 sata ports but you can convert NVME, mini pcie slots to sata or you can use usb enclosures, but you may need an external PSU to power those new sata ports.
- Another option is to buy a mini itx motherboard with an integrated mobile chip.
- Right now good quad core options are the biostar/asus/asrock branded boards with j4125, j5005, j5040 chips they idle at 8-10w (I'm using the asrock j5040).

GPU

If you choose an arm solution most likely the gpu will be pretty weak and hardware acceleration will be limited.
If it's an intel/amd CPU from the last 5 years it will probably have decent support for hardware acceleration.
You can try to add a low end gpu like the gt 1030 but it adds about 9w to the idle power consumption and if your media server is only used by few people you might not need it.

Ram

I would advise 8gb to be on the safe side but if you are using linux you can get away with 4gb too.

Storage

If you don't need much storage go with an ssd, they mostly idle below 3w.
On the other hand if you have a lot of *cough* legitly downloaded media *cough* hdd's are much cheaper, also 5400rpm drives are slower but they consume little bit less power than 7200rpm drives.

PSU

If you went with the mini Itx option you will need an efficient PSU.
Atx PSU's start at 300w and mostly the advertised efficiency does not apply to less than 50% load. Instead you can use a 60-160w pico PSU which uses an external ac to dc adapter like a laptop, it's slightly more efficient but they are harder to find.

Sooo

Hopefully i managed to help you, if you found an error or i missed something, please comment below. Happy Building!