DEV Community: Hamza

I built SketchStash — a small tool to store terminal commands and dev snippets

Hamza — Sun, 15 Mar 2026 04:52:27 +0000

Hi devs 👋

I built a small tool called SketchStash to store terminal commands, snippets and technical notes in one clean workspace.

Instead of losing commands in terminal history, the idea is to keep everything searchable and organized.

Current features:
• Code snippet editor
• Command search
• Tag system
• Pagination
• Focus audio player
• Dark / light theme
• Responsive UI

Stack:
React + TypeScript
Symfony API
Docker
MySQL

Coming soon:
Auth (register/login)
Tag management
Bulk delete

Would love your feedback 🙌

Live demo:
https://sketchstash.online

I built a tiny Linux tool that shouts “FAHH” when I type the wrong command

Hamza — Thu, 05 Mar 2026 13:53:48 +0000

I built a tiny Linux tool that shouts “FAHH” when I type the wrong command

A few weeks ago I noticed something about the way I work in the terminal.

When I’m focused and typing commands fast, I tend to make a lot of small mistakes.

Wrong command.

Misspelled command.

Sometimes I just type something that doesn't exist.

And the terminal just replies with the usual:

command not found

That message is… boring.

And also very easy to ignore.

So I started thinking:

What if the terminal could actually react when I type something wrong?

Not visually.

Not with an error popup.

But with sound.

Something dramatic.

Something like:

FAHH.

The idea

I wanted something very simple:

Whenever I type a command that doesn't exist in the terminal, play a sound.

Nothing fancy.

Just a tiny reaction that reminds me:

"Hey… that command doesn't exist."

I initially looked for something like this inside VSCode extensions.

There were some interesting ones, but they only worked inside the editor terminal.

I wanted something that works everywhere:

WSL
Debian
normal Linux terminals
zsh
bash

Basically anything I run in the shell.

So I decided to build a tiny CLI tool for it.

The result

I ended up creating a small tool called:

fahhctl

What it does is very simple.

When you type a command that doesn't exist:

fakecommand

You still see the normal error message:

command not found: fakecommand

But you also hear:

FAHH 🔊

How it works

The tool installs a small hook into your shell configuration.

When the shell detects a command that doesn't exist, it simply runs:

fahhctl play

Which plays a sound file.

That’s it.

No background process.

No daemon.

Just a tiny hook and a sound.

Installation

If you're curious and want to try it:

curl -fsSL https://raw.githubusercontent.com/hamza-topo/fahhctl/main/install.sh | bash

Then reload your shell:

source ~/.zshrc

Now try typing something wrong.

Customize the sound

The default sound is a dramatic FAHH, but you can replace it with anything.

The sound file lives here:

~/.local/share/fahh/fahh.mp3

So you can replace it with:

a meme sound
a warning beep
a voice saying "wrong command"
whatever you want

Why I actually like this

It sounds silly, but it’s surprisingly useful.

The sound acts like a tiny feedback loop.

Instead of silently ignoring mistakes, the terminal gives a quick reaction.

It helps me stay a bit more focused when I’m typing commands fast.

Also… it's just fun.

The project

If you're curious about the code or want to try it:

https://github.com/hamza-topo/fahhctl

It's a very small project, but it was fun to build.

And sometimes the smallest tools are the most satisfying ones.

React js & Github actions

Hamza — Thu, 05 Sep 2024 08:57:44 +0000

Introduction

Hey there, fellow developers! 🎉 Let's get your React app out into the world! 🚀 Today, we're going to deploy it to GitHub Pages, a super easy way to share your creations with everyone.

Step 1: Create Your GitHub Repository: (skipp this if you alread have done this)

Head over to GitHub and click the "New" button.
Name your repository (let's call it react-awesome-app).
(Optional) Add a description.
Choose "Public" visibility.
Click "Create repository".

Step 2: Set Up Your Local React Project

Open your terminal and run

npx create-react-app react-awesome-app

Navigate to your project:

cd react-awesome-app

Step 3: Connect Your Local Project to GitHub

Initialize Git:

git init.

Add all files:

git add .

Commit changes:

git commit -m 'Initial commit'

Create a main branch:

git branch -M main

Add the remote:

git remote add origin https://github.com/{your-github-username}/react-awesome-app.git

Push to GitHub:

git push -u origin main

Step 4: Build for Deployment

Run npm start to check everything works.
Create a production build: npm run build
Step 5: Configure GitHub Pages

Open package.json.
Add homepage:

"homepage": "https://{your-github-username}.github.io/react-awesome-app"
Step 6: Deploy Your App

Install gh-pages:

npm install gh-pages --save-dev
Add scripts to package.json:
"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }

Deploy:

npm run deploy
That's it! 🎉 Your app is now live on GitHub Pages. Share the link with the world!

The public link for your application will be :

react-awesome-app to be replaced by your github repo name https://{username}.github.io/{repository-name}/

Laravel : DESIGN PATTERN REPOSITORY

Hamza — Tue, 06 Feb 2024 11:54:06 +0000

🏠 Short Story:

I vividly recall my initial encounter with the term "Design Pattern" – a moment of profound confusion as I grappled with whether it was a mere philosophical concept or a collection of abstract theories. The burning question in my mind was: how could such a concept be practically applied to something as tangible as my to-do list project 😅?

As it turns out, design patterns are not elusive philosophies; instead, they are a set of solutions crafted to address recurring problems encountered during the software design process. These solutions present a structured approach to overcome common challenges, equipping developers with established and efficient methods to handle issues that frequently arise during coding.

One of the most renowned examples of a design pattern is the Singleton pattern. Imagine creating a new instance of a MySQL database connection for every single request – not only is it inefficient, but it's also downright impractical. Enter the Singleton pattern, which ensures that only one instance of an object (such as a database connection) is created, streamlining operations and optimizing resource usage.

Certainly! Today, let's delve into one of the essential design patterns within the context of the Laravel framework: the Repository Design Pattern.

Repository Design Pattern:

The Repository Design Pattern, a structural pattern, serves to separate the logic responsible for retrieving data from the underlying storage (such as a database) from the rest of the application. In Laravel, this pattern is frequently employed to interact with database models.

In simpler terms, we introduce an intermediary layer between my UserController and UserModel, which I'll refer to as UserRepository. Familiar with CRUD methods, right? Well, let's consolidate them within UserRepository.

In my projects, I typically initiate the development process by establishing a dedicated folder named "Repositories" within the "app" directory. The next step is to create a PHP interface; I can name it RepositoryInterface.php:

namespace App\Repositories;

use Illuminate\Database\Eloquent\Collection;

interface RepositoryInterface {
    /**
     * create method
     * 
     * @author Topo <topo@test.com>
     * @param  mixed $model
     */
    public function create(array $model);
}

This interface serves as a blueprint containing prototypes for essential CRUD (Create, Read, Update, Delete) methods. These methods act as the foundation for implementing the repository design pattern, and for now, we will just use the create method.

Next, let's define our UserRepository class. To do so, let's create this class and implement the RepositoryInterface:

namespace App\Repositories;

use App\Models\User;

class UserRepository implements RepositoryInterface {

    public function create(array $user)
    {
        return User::create($user);
    }
}

Isn't that easy? Can you see how much your code looks well-separated, readable, and easy to maintain?

The question now is, how can I call this repository in my controller? Well, it's not a big deal. This is where we can use Dependency Injection (DI). In the code below:

namespace App\Http\Controllers;

use App\Repositories\UserRepository;

class UserController extends Controller {

//since im using php 8.x im allowed to use this syntax 😅
    public function __construct(protected UserRepository $userRepository)
    {
    }

    public function store(Request $request){
        // Validate your request 
        return $this->userRepository->create($request->all());
    }
}

Conclusion 👋
In conclusion, the Repository Design Pattern proves to be a powerful and indispensable tool for enhancing the readability of your code and adhering to the Single Responsibility Principle. By adopting this pattern, you can achieve a clean and modular architecture, keeping the logic responsible for data retrieval neatly separated from the rest of your application.

The introduction of the intermediary layer, such as the UserRepository, not only streamlines CRUD operations but also contributes to the overall maintainability of your codebase. No longer do you find User::create() directly in your controller 🤢, but rather, the creation logic is encapsulated within the dedicated repository. This separation of concerns not only enhances the clarity of your code but also ensures that each component has a specific and well-defined responsibility.

Embracing the Repository Design Pattern is not just about organizing code; it's a strategic move towards creating robust and scalable applications. It empowers developers with a systematic approach to handling data access, making your codebase more maintainable, readable, and aligned with best practices in software design.