DEV Community: Kosa Matyas

hyprKCS - Hyprland keybind manager

Kosa Matyas — Wed, 14 Jan 2026 14:42:09 +0000

Ever forget your own keybinds? Tired of grepping through 5 different config files just to change a workspace shortcut?

Meet hyprKCS - a native, fast GUI written in Rust & GTK4. It parses your config (and recursively sourced files!) to give you a searchable, interactive dashboard for your system.

Key Features

Fuzzy Search: Find actions instantly (e.g., type "resize" or "volume").
Add, Edit & Delete: Full CRUD support for your keybinds directly from the UI.
Key Recorder: Don't type out SUPER + SHIFT + Q. Just click "Record" and press the keys.
Deep Parsing: Reads source = ... directives recursively across your entire setup.
Native UI: Built with Libadwaita to match your system theme (Dark/Light mode) seamlessly.
Direct Control: Execute and test binds directly from the UI via hyprctl.
Conflict Wizard: Automatically detects duplicate binds and walks you through resolving them interactively. No more hunting for that one duplicate SUPER + Q.
Massive Optimization: Refactored the parser logic and switched to the jemalloc allocator. It's now lighter and faster than ever.
Smart Backups: One-click backup that recursively saves your main config and all sourced files into a timestamped directory.

Installation

Arch Linux (AUR):

yay -S hyprkcs-git

Nix:

nix run github:kosa12/hyprKCS

Technical Highlights:

Recursive Parser: Custom Regex-based parser that handles variable resolution ($mainMod) and recursive file sourcing.
Memory Optimization: Recently switched to tikv-jemallocator on Linux and optimized the parsing algorithm (removed O(n²) sorting), resulting in a negligible memory footprint (~20-30MB RSS in release mode).
Layer Shell: Uses gtk4-layer-shell to render as a proper overlay application that respects Hyprland's window rules.

GitHub: https://github.com/kosa12/hyprKCS

Image Dithering made fast and free

Kosa Matyas — Sun, 16 Nov 2025 09:47:14 +0000

Turbo Dither: High-Performance Browser-Based Image Dithering with Retro Flair

-> turbodither.com

In the world of digital imaging, dithering remains a timeless technique for simulating colors and gradients in limited palettes.
Turbo Dither is a cutting-edge tool that brings professional-grade dithering to your browser. Built with Next.js 15 and React 19, this free application transforms ordinary images into retro masterpieces using authentic algorithms and color schemes from computing history; all without servers, accounts, or compromises on privacy.

Core Features That Set It Apart

Turbo Dither prioritizes speed, usability, and authenticity. Key highlights include:

Blazing-Fast (even though it's not in Rust) Processing: Leveraging Web Workers, image transformations occur in a background thread, ensuring a buttery-smooth UI even on mobile devices.
Diverse Dithering Algorithms:
- Floyd-Steinberg: Error diffusion for natural details.
- Atkinson: Macintosh-inspired brightness and contrast.
- Ordered (Bayer): Pattern-based for classic crosshatch effects.
- Jarvis-Judice-Ninke: Wide-area diffusion for ultra-smooth gradients.
14 Retro Palettes: From CGA's 4 colors to NES's 64, including Game Boy, Commodore 64, Pico-8, and grayscale variants.
Fine-Tuned Controls: Adjust brightness, contrast, saturation, diffusion factor (0.0–2.0), and dither scale for pixel-perfect results.
Privacy and Freedom: 100% client-side—no uploads, account creation, or watermarks.
Interactive Tools: Real-time side-by-side comparisons, progress indicators, and PNG exports with custom names.

Technical Stack and Architecture

Next.js 15.
React 19 (with useReducer for state, useTransition for concurrency).
TypeScript 5.
Bun 1.3.1.
Web Workers & Canvas API (core processing).
CSS Modules.

Performance and Optimizations

Optimizations include typed arrays, progress streaming, and React 19 concurrency. All in-browser; no latency from servers.

Small images (<500KB): 4–20ms.
Medium (500KB–2MB): 20–100ms.
Large (>2MB): 100–500ms.

Performance demo:

1920x1080, 10.3MB image compressed to 1920x1080, 498KB in 211ms.

Roadmap Ahead

Future enhancements:

More algorithms (Sierra, Burkes).
Additional palettes (Amstrad, MSX2).
Batch processing, custom palettes, multi-format exports.
PWA offline support, drag-and-drop.

Final Thoughts

Check the live demo at turbodither.com and leave comment or DM me on X/Twitter (@kosa12) for your thought and reviews about Turbo Dither❤️

Docker on Linux: A Quick Guide for Debian and Arch-Based Systems

Kosa Matyas — Sat, 23 Nov 2024 09:17:15 +0000

Docker is an essential tool for modern software development. It simplifies deploying applications by isolating them in lightweight, portable containers. This guide will walk you through installing Docker on Debian and Arch-based systems, verifying the installation, and running your first container.

Installing Docker on Debian-Based Systems

1.Update the Package Index

Open a terminal and run:

   sudo apt update

2.Install Required Dependencies

Install packages required to add Docker's official GPG key and repository:

       sudo apt install -y apt-transport-https ca-certificates curl software-properties-common

3.Add Docker's GPG Key and Repository

curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/debian $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

4.Install Docker

sudo apt update
sudo apt install -y docker-ce docker-ce-cli containerd.io

5.Verify Installation

docker --version

Installing Docker on Arch-Based Systems

1.Update the System
Run the following command to ensure your system is up-to-date:

sudo pacman -Syu

2.Install Docker

sudo pacman -S docker

3.Start and Enable Docker
Start the Docker service and enable it to run at boot:

sudo systemctl start docker
sudo systemctl enable docker

4.Verify Installation

docker --version

Testing Docker Installation

To ensure Docker is properly installed and running:

1.Check the Docker Service

sudo systemctl status docker

You should see a status like Active: active (running).

2.Run the Hello World Container
Test your Docker setup by running a test container:

sudo docker run hello-world

If Docker is correctly installed, you'll see a message like:

Hello from Docker! This message shows that your installation appears to be working correctly.

Conclusion

Congratulations! You’ve installed Docker, tested its setup, and run your first container. Whether you’re on Debian or Arch-based Linux, Docker simplifies application deployment and development. Dive deeper into Docker’s capabilities, and start containerizing your applications today!

Creating and Securing JWT Authentication in a Web App

Kosa Matyas — Fri, 08 Nov 2024 18:43:02 +0000

Introduction

JSON Web Tokens (JWT) are a compact and self-contained way of securely transmitting information between parties as a JSON object. JWTs are widely used for authenticating users in web applications. In this tutorial, we’ll build a Node.js and Express backend with JWT authentication.

What is JWT?

JWT (JSON Web Token) is an open standard for securely transmitting information between parties as a JSON object. Each token consists of three parts:

Header: Contains information about the token's type and hashing algorithm.
Payload: Contains user information and claims.
Signature: Verifies the integrity of the token.

Example JWT

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0IiwidXNlcm5hbWUiOiJqb2huZG9lIn0.H6BBiB1y5eXKXvW9bbjT2Rg8Jp4oE4Y5Kxf_sDF7Kzg

Setting Up the Project

Create a new project directory:
```
mkdir jwt-auth-app
cd jwt-auth-app
```
Initialize a new Node.js project:
```
npm init -y
```

Installing Dependencies

Install the necessary dependencies:

npm install express jsonwebtoken bcryptjs dotenv express-validator

express: Web framework for Node.js.
jsonwebtoken: Library for generating and verifying JWTs.
bcryptjs: Library for hashing passwords.
dotenv: For environment variables.
express-validator: For validating input data.

Configuring the Server

Create a basic server setup in server.js:

// server.js
require('dotenv').config();
const express = require('express');
const app = express();
app.use(express.json());

// Import Routes
const authRoutes = require('./routes/auth');
app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Create a .env file for storing environment variables:

PORT=5000
JWT_SECRET=your_jwt_secret_key

Creating User Authentication Routes

Create the routes/auth.js file for authentication routes:

// routes/auth.js
const express = require('express');
const { body, validationResult } = require('express-validator');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const router = express.Router();

const users = []; // In-memory user storage

// Signup Route
router.post(
  '/signup',
  [
    body('username').isLength({ min: 3 }),
    body('password').isLength({ min: 5 })
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

    const { username, password } = req.body;
    const hashedPassword = await bcrypt.hash(password, 10);

    users.push({ username, password: hashedPassword });
    res.status(201).json({ message: 'User registered successfully' });
  }
);

// Login Route
router.post(
  '/login',
  [
    body('username').notEmpty(),
    body('password').notEmpty()
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

    const { username, password } = req.body;
    const user = users.find(u => u.username === username);

    if (!user) return res.status(400).json({ message: 'Invalid credentials' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });

    const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.json({ token });
  }
);

module.exports = router;

Explanation of Routes

Signup Route: Validates and hashes the password before storing the user.
Login Route: Validates credentials, checks password, and issues a JWT token.

Generating JWT Tokens

The jwt.sign method generates a token containing the user’s information.
The JWT_SECRET is used to sign the token, which should be kept secure and private.

const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });

Securing Routes with JWT

To protect routes, create a middleware to verify tokens.

Create middleware/auth.js:

// middleware/auth.js
const jwt = require('jsonwebtoken');

module.exports = function (req, res, next) {
  const token = req.header('Authorization')?.split(' ')[1];
  if (!token) return res.status(401).json({ message: 'Access denied' });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (ex) {
    res.status(400).json({ message: 'Invalid token' });
  }
};

Protect Routes in server.js:

Create a protected route that requires a valid token:

// In server.js
const authMiddleware = require('./middleware/auth');

app.get('/api/protected', authMiddleware, (req, res) => {
  res.json({ message: 'This is a protected route', user: req.user });
});

Explanation of Middleware

The middleware checks for the presence of the token in the Authorization header.
If the token is valid, the user’s information is added to the req object, allowing access to the protected route.

Conclusion

In this tutorial, we’ve covered the basics of setting up JWT authentication in a Node.js and Express backend. This guide demonstrated:

Setting up authentication routes for signup and login.
Creating and verifying JWT tokens.
Securing routes with a JWT-based middleware.

JWTs are a powerful way to handle authentication, making your web applications both secure and scalable.

📈 Making Your GitHub Repository Stand Out With 12 Easy Steps!

Kosa Matyas — Wed, 06 Nov 2024 12:49:27 +0000

Creating an eye-catching GitHub repository is key to attracting users, potential contributors, and recruiters. This guide will help you optimize your repository to make it appealing and increase its visibility.

1. Craft an Attractive README.md 🚀

The README is often the first thing users see, so make it engaging and informative.

Key Elements to Include:

Project Name and Description: Clearly state the purpose and key features.
Visuals: Add screenshots, GIFs, or videos to showcase your project.
Installation Instructions: Provide step-by-step instructions.
Usage Examples: Help users understand how to use your project.
Features: List the features and functionality.
Contributing Guidelines: Encourage contributions by including clear guidelines.
License Information: Make the license clear.

Use websites that help with the markdown:

2. Use an Eye-Catching Repository Banner 📸

You can add a banner image at the top of your repository. Create a custom banner that highlights your project's name and key features. You can add it directly to your README or as a repository social media preview.

Steps to Add:

Create a 1200 x 600px image with your project name, logo, and tagline.
Go to the "Settings" of your repository.
Under "Social preview," upload the banner image.

3. Organize with Folders and Labels 📂

Use well-organized folders and file names to make your project easy to navigate. Use labels effectively for issues, such as:

good first issue
help wanted
documentation

These labels make it easier for others to find tasks they can help with.

4. Add a Contributing Guide 🤝

Having a CONTRIBUTING.md file encourages contributions by providing guidelines on how people can get involved. Include:

Code of Conduct
How to submit a pull request
Coding style guidelines

5. Leverage GitHub Actions for Automation 🛠️

Automate repetitive tasks to improve user experience. Some examples:

Run tests on each pull request.
Deploy your project automatically (if applicable).
Check code style using linters.

Example: Set up a workflow file .github/workflows/ci.yml to run tests on each PR.

6. Use Shields.io Badges 🛡

Badges add visual cues to the README, providing quick insights into your repository's status.

Common Badges to Add:

Build Status: Shows if the build is passing.
License Type: Displays the project's license.
Downloads Count: How many times it’s been downloaded.
Last Commit Date: Shows activity recency.

Example Badge Code:

![Build Status](https://img.shields.io/github/workflow/status/username/repo/Build)
![License](https://img.shields.io/github/license/username/repo)

7. Include a License 📋

Add a license file (e.g., LICENSE.md) to clarify how your project can be used, shared, and modified. Popular licenses:

MIT License: Very permissive, allows for free reuse.
GPL License: Ensures modifications are open-source.

GitHub provides templates to add a license. Go to your repository's "Settings" > "Add License".

8. Add a Project Board 🧮

GitHub Project Boards help organize tasks and features. Create cards for:

To Do
In Progress
Completed

This gives potential contributors an overview of the project's current state and what's needed.

9. Pin Your Best Repositories 📌

To highlight your project, pin it on your GitHub profile.

Go to your GitHub profile.
Click "Customize your pins."
Choose your project and save.

Pinned repositories will appear on your profile, making them easily discoverable.

10. Promote on Social Media and Communities 🧭

Share your repository on:

Twitter (use hashtags like #OpenSource, #GitHub)
Reddit (subreddits like r/opensource, r/programming)
LinkedIn
GitHub Discussions: Engage with others and ask for feedback.
Here on Dev.to
Mastodon

11. Add a GitHub Pages Site 🌐

Create a website for your repository with GitHub Pages. This is especially useful for documentation or live demos.

Go to "Settings" > "Pages."
Choose the branch and folder for your site.
Use Markdown, Jekyll, or HTML for a quick website.

12. Regularly Update and Engage ⏳

Stay active by updating your README, fixing issues, and responding to pull requests. A regularly updated repository signals to others that the project is active and maintained.

By following these steps, your GitHub repository will become more attractive, accessible, and engaging for users and contributors. Keep improving and spreading the word❗

Update Cursor AI on Linux

Kosa Matyas — Mon, 04 Nov 2024 19:56:57 +0000

Cursor Update Script for Arch Linux

This script automates the installation and updating of the Cursor application on your Arch Linux system. It downloads the latest version of the Cursor AppImage, makes it executable, and creates a desktop entry for easy access from your application menu.

Link to the code:

cursor_update.sh

Features

Automatically fetches the latest version of Cursor.
Checks for existing installations and updates if a new version is available.
Creates a desktop entry for easy access.
Downloads the application icon if not already present.

Prerequisites

Arch Linux: This script is designed for Arch Linux systems.
Curl: The script requires curl to download files. If you don't have curl installed, you can install it using the following command:

  sudo pacman -S curl

Installation Instructions

Follow these steps to install or update the Cursor application on your Arch Linux system:

Clone the Repository (if applicable) or download the script directly:

   git clone https://github.com/kosa12/cursor_update
   cd https://github.com/kosa12/cursor_update

Make the Script Executable: Open a terminal and run the following command to make the installation script executable:
```
chmod +x cursor_update.sh
```
Run the script: Execute the script to install or update Cursor:
```
./cursor_update.sh
```
Launch Cursor: In the application menu on your computer should be the Cursor program now

How to install Cursor IDE on Arch linux

Kosa Matyas — Sun, 03 Nov 2024 15:19:15 +0000

How to install Cursor AI on Arch linux? Simple, follow these steps:

1. Go to Cursor's website

2. Press Download for free (it should download an .Appimage file)

3. Navigate to the file and run chmod +x cursor-<version_number>.Appimage to make it executable

4. Run ./cursor-<version_number>.Appimage to make sure it starts

5. If yes, add it to the application list with sudo mv cursor-<version_number>.AppImage ~/opt/cursor.appimage

6. Make a desktop entry for the app

sudo nano /usr/share/applications/cursor.desktop
CTRL + V this into the file:

  [Desktop Entry]
  Name=Cursor
  Exec=/opt/cursor.appimage
  Icon=/opt/cursor.png
  Type=Application
  Categories=Development;

7. Save the file, move the icon cursor.png of your choice to ~/opt/

8. You are done!

Java Chess with server and client

Kosa Matyas — Mon, 12 Feb 2024 15:06:33 +0000

Hi guys, today I finished my Chess game in Java with server and client features! Let me know what you think, and what should I implement or correct. Or any general tip would be good :)

And if you like it, give it a star on GitHub :3

https://github.com/kosa12/MultiplayerChess

Java Slot Machine

Kosa Matyas — Fri, 05 Jan 2024 18:29:14 +0000

I built a cyberpunk-themed slot machine game using Java:
https://github.com/kosa12/SlotMachine

Feel free to comment on anything, correct me if I've made a mistake.
I am new to this, this is my first big project ever.