DEV Community: ffex

DotTranscriber 🐰

ffex — Tue, 31 Mar 2026 09:34:50 +0000

TL;DR

Talk about dot-transcriber, a side-(side-project) to be able to catch up on the travel time for my work. The ability to process voice messages and rewrite them as notes and get an AI second-brain.

Github: https://github.com/ffex/dot-transcriber

My needs

I was late preparing my talk for Rustboy (if you like gameboy check it!) at Fosdem, so I wanted to dedicate all my available time to finishing it. Can I also use the travel time to go to work? Was it possible to make that work?

I definitely did not invent anything. I created an agent that turns an audio message (with the typical pauses or divergences of a creative mind process!) into structured notes (Obsidian style, which I love).

The goal is also to run it locally using Whisper and Ollama. Here’s the current status:

Whisper for transcription
Ollama (I need to find a model I’m satisfied with) for correction
Corrected text is fed back into Ollama, which checks for relevance to previous notes so they can be linked.
Communication via Telegram

Clearly, this is all vibecoded because if I didn’t even have time for Rustboy, I certainly didn’t have time for this other project!

What I got

A Telegram bot where I can send audio and receive linked notes as output, and also updated in case an update is needed. It works well, although the transcriptions are imprecise and the summaries are sometimes not very accurate.

What I learned

I learned that with precise, bulleted prompts, the vibe coding is incredible and the output far exceeds the code I could have written.
Sometimes the code, on the other hand, is underperforming or wrong!
Reading all this code is mentally destructive.
I learned that this is what the future is, even if some of our work is ripped away from us.

What scared me.

What am I needed for? Only to orchestrate?
How do I intervene in the code if I haven’t read it?
When I have so much code to read, how could I be in it without having read it?
When getting down to the details, how can I become relevant to not just do prompt try-catching?

What needs to be improved

Things to improve:

Inaccurate local transcription
Update of notes to keep more track of updates
Logical confusion about how notes are connected
In some notes, there is sometimes extreme syntax
Better integrate my view of Claude Code’s work. How to do that? How to simplify reading the generated code?

The future?

The idea is just to make it a useful tool for marking notes via audio message for all those times when you can’t do anything but use your voice (driving, walking, or while playing sports?).

It should be part of a much larger personal assistant, but for now, let’s stick to its task:

transcribing audio and getting various types of processing:
writing notes / wikis
- writing tasks or structured projects
- writing articles
- other…
The initial idea actually originated also as “D&D Master Solo,” but that is another story.

Other consideration

It is a project born before OpenClaw 🙃.

Conclusion

I write this article to search a dialogue about coding agent, how do you use it? how to learn about the code that it writes? idk!

Appwrite x Angular - Act 0 - Authentication

ffex — Wed, 22 Jan 2025 15:34:42 +0000

📒 Introduction

In recent years, it has been difficult for me to participate in Hacktoberfest. There are so many people, so I'm having trouble finding tasks!

But I want help! So, I participated in the Appwrite Hackathon 2024 at october, and it was amazing to see the news on the Appwrite product ( I have been a fan for a few years! ).

I love Appwrite because it permits me to speed-coding some projects that I have in mind! I love that the idea can be real in a short time!

In this trying (I didn't win) I saw only a few detailed tutorials on Appwrite so I decided to make one (using Angular as front-end)!

Let's start!

💡 The project idea

I recently started again to play D&D, I always loved to play a smart character, an inventor, or a mage so I had an idea: In the AI era I can record the session and transform it into a journal handmade by my character.

🤓 Nerd note: I like the idea that my gnome Artificier can create ( in automatic) a journal

💾 Tech stack

Angular v18
Appwrite Cloud v1.6.0
Primeng v18 as front-end framework

🌃 Appwrite

Create the project

Click on "Create project"
Insert name and click "Next"
Select the region
Select the platform with you use the appwrite. In our case "Web".
Compile all the information (Skip or compile all the optional step)
The project is ready!

Setup Authentication

Go on Auth page
Click on "Create User"
Fill the data
Ok! Done!

🏙️ Angular app

Create app

Ok, now we have to create a new Angular App!

Install if you don't have the Angular CLI:

$ npm install -g @angular/cli

And create a new project

$ ng new <project-name>

Start the project

$ npm start

and a framework for the UI, I like Primeng but you can install whatever you want

$ npm install primeng @primeng/themes

configure primeng: check app.config.ts and app.component.ts

Create menu and Routing

For my project, I set routing, an app page with the <router-outlet> and with the PrimeNg menu, and a home page. Maybe you set your project in a different way so you can jump to the next section!

AppComponent

app.component.ts

app.component.html

Routing

app.routes.ts

app.config.ts

Create pages

ok, now we have to do some pages.

$ ng g component pages/home-page

$ ng g component pages/login-page

check next session for the code.

HomePage

home-page.component.ts

home-page.component.html

LoginPage

login-page.component.ts

login-page.component.html

Angular: setup service

Now we have to prepare a service that contact the appwrite server and prepare a method to do the login:

REMEMBER TO SETUP THE ENVIRONMENT VARIABLES!
It's important to set the environment.PROJECT_ID with the appwrite project Id (you can found it in the console near the project name)

Angular: call authentication

Now we rewrite the login function in the login-page.component.ts to call the service method.

💫 Try it!

Land in home page at localhost:4200
select login
insert username and password
You are logged in!

🌟 Github Repository

ffex / adventure-log-journal

Small app to help with journaling and transcription of audio for tabletop roleplaying games.

This project was generated with Angular CLI version 18.2.9.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check…

View on GitHub

JourneyLog

ffex — Sun, 19 Mar 2023 13:39:16 +0000

Everything you need to plan your journeys

🤨 What is it?

Journeylog is a webapp trip planner to simplify every task or annoying thing for a free traveler!
I develop it recently to participate in a hackathon and I win one of the prizes giving me the enthusiasm to move on and continue to develop it! 😁

💭 Inspiration

In September I went on a journey with my wife, we visited Spain. We rent a car and start the adventure! It was like an awesome movie, but in movies don't see what happened between the scenes...

Buy plane tickets, search on a few apps where to sleep the first night, search where and who is the best rental car service, check the first stop (which museum can we visit? where to eat? etc...), and go on, every day think the next day: search a b&b, where can we go, etc...

So the idea! Nothing special or futuristic but simple and very helpful: a trip planner.

This is the first part of a bigger project:

🗺️ This is the admin panel of the trip, where you can plan!
📱 Another part will be an app to live the travel and update easy your current trip.
👥 Last part is a social feature where you can share your experiences and trips.

💡 Ideas and functionality

The main goal for this project is to create a trip in the easiest way possible! So:

Create a new trip: travel dates, which vehicle used to first and last stops, etc...
Pick up the map e place your stops
Generate a list of stops with some information about every stop: how many nights in it, if you already booked, list of b&bs/hotels, list of museums, check-ins, etc...
Generate a list of the route between every stop, which vehicle is used in it, how many hours and km for the route, etc...
Generate a list of todos or add it manually (book the hotel, buy tickets, etc...)
Write your logs and share them!
Share the entire journey!
Download in your phone your journeys and maps to use offline (maybe in a mountain? 🤔)

💾 Tecnology Stack

- For the back-end, I choose Appwrite because it is simple like the data to manage. 😉
For the front-end of the admin panel I choose React with Refine framework that speeds up the development of an admin panel and it works well with app write

🔓 Why open-source?

Travel is a common activity of people and developers, so it would be interesting if everyone can put some useful ideas into the planner!
So if you are interested in this project comment on this post with ideas!
I never start an open-source project so if you have some tips and tricks to do well! 😉 (we need a community? how to collect ideas and suggestions? etc etc...

👣 Next steps

Right now the project is in an early early early stage! I develop it fast for the Refine Hackathon, I need to optimize the code, write a better README.md file and try to put some goals!

ffex / JourneyLog

Everithing you need to plan your journeys!

About

Description

It is a simple webapp, SIMPLE must be the key! It have to help fast to plan a trip. Insert the name of the journey, some general informations (from and to dates, what vehicle use etc...).

Second step is to choose stops with the help of Google maps API. It generate in automatic a list of the routes with distance and duration, to check it rapid.

A useful dashboard resume all this things and get a simple autogenerate ToDo-list:

buy plane ticket rent a car reserve an hotel or bnb every stops etc Every stop come with others helpfull informations (if you have done yet reservations, if you have complete yet!)

You can also write a log! for your thoughts during the travel.

Partecipants

Me! Twitter Github

Preview

Set up Project

Backend with Appwrite

Install Appwrite by following the installation guide.
Open the Appwrite console and create…

View on GitHub

For now, it's all folks! 😁
Stay tuned!

Monday Sticker Monday

ffex — Mon, 13 Feb 2023 08:53:58 +0000

In two years about contributing to opensource, hackaton, hacktoberfest... how much stickers! how to do with them?

Sticker bombing the laptop, this is the awesome (in my opinion! 😁) result:

It's monday, we are at work, we are a little bit bored. Share your stikerized laptop, or how do you use stickers that you won!😁

Event OnDrop for PrimeNG Table

ffex — Mon, 06 Feb 2023 18:28:42 +0000

Introduction

Hei there!
I was working in a transport and logistic management system, in particular on a form to manage the delivery: which truck has to do delivery, which driver, when, which deliveries, etc.
I used for it a PrimeNG table with the reorder property to assign deliveries to the trip but there are a few conditions that the PrimeNg table does not handle: some deliveries cannot be reordered.
The order is important in a delivery trip and I cannot put a delivery not yet delivered before a delivered one.
So I had to control the onDrop event of the table and can set up conditions, reject the reorder or accept it. The default PrimeNG table does not have this possibility and after a little research on the internet the only thing useful that I found was a comment in a PrimeNG forum: "play with the source code". So I play with that and I found a way!

PrimeNG Table

<p-table [value]="products" [columns]="cols" [reorderableColumns]="true" [tableStyle]="{'min-width': '50rem'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width:3rem"></th>
            <th *ngFor="let col of columns" pReorderableColumn>
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
        <tr [pReorderableRow]="index">
            <td>
                <span class="pi pi-bars" pReorderableRowHandle></span>
            </td>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

This is a p-table with the reorder row drag&drop property active.
The [pReorderableRow]="index" turn on the order ability of the table.
The<span class="pi pi-bars" pReorderableRowHandle></span> put a handle icon to perform the drag and drop.

So I started to search in PrimeNG code and I found a directive that implements this function on the table: ReorderableRow.

How to use it

Ok, ok too long story, but how to use it?
It's here! It's enough to copy this directive that extends the ReorderableRow.

import { ElementRef, EventEmitter, Input, NgZone, Output } from '@angular/core';
import { Directive, HostListener } from '@angular/core';
import { ReorderableRow, Table } from 'primeng/table';


@Directive({
  selector: '[pReordableRowDrop]'
})
export class ReordableRowDrop extends ReorderableRow {
  @Input() set pReordableRowDrop(value: number) {
    this.index = value;
  }

  @Output() dropRow = new EventEmitter<any>();
  override index = 0;
  tmsEventDrop: any;
  dtDraggedRowIndex?: number;
  dtDroppedRowIndex?: number;

  constructor(public override dt: Table, public override el: ElementRef, public override zone: NgZone) {
    super(dt, el, zone);
  }

  override onDrop(event: any): void {

    if (this.isEnabled() && this.dt.rowDragging) {
      this.dtDraggedRowIndex = this.dt.draggedRowIndex;
      this.dtDroppedRowIndex = this.dt.droppedRowIndex;
      const dropIndex = this.dt.draggedRowIndex > this.dt.droppedRowIndex ? this.dt.droppedRowIndex : this.dt.droppedRowIndex === 0 ? 0 : this.dt.droppedRowIndex - 1;

      this.tmsEventDrop = event;

      const eventArgs = {
        sender: this,
        draggedRowIndex: this.dt.draggedRowIndex,
        droppedRowIndex: dropIndex
      }

      this.dropRow.emit(eventArgs);


    }

    event.preventDefault();

  }

  public acceptDrop(): void {
    this.dt.draggedRowIndex = this.dtDraggedRowIndex!;
    this.dt.droppedRowIndex = this.dtDroppedRowIndex!;
    this.dt.onRowDrop(this.tmsEventDrop, this.el.nativeElement);
  }

  public rejectDrop(): void {
    //cleanup
    this.tmsEventDrop = null;
    this.dtDraggedRowIndex = undefined;
    this.dtDroppedRowIndex = undefined;
    this.dt.onRowDragLeave(this.tmsEventDrop, this.el.nativeElement);
    this.dt.onRowDragEnd(this.tmsEventDrop);
  }

}

This directive intercepts the OnDrop event of the table and implements an EventEmitter that raises an event at the exterior.
acceptDrop() and rejectDrop() are methods that continue the normal flow of a reorder, the first one is to accept the reorder, and the second one is to reject because there are some mandatory operations to do.

Copy this directive into your projects and add it to the declarations in the module.

Now overwrite the p-table, in particulary replace [pReorderableRow]="index" with [pReordableRowDrop]="index" (dropRow)="onDropRow($event)".

 <p-table [value]="products" [columns]="cols" [reorderableColumns]="true" [tableStyle]="{'min-width': '50rem'}">
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th style="width:3rem"></th>
        <th style="width:3rem">#</th>
        <th *ngFor="let col of columns" pReorderableColumn>
          {{col.header}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
      <tr [pReordableRowDrop]="index" (dropRow)="onDropRow($event)">
        <td>
          <span class="pi pi-bars" pReorderableRowHandle></span>
        </td>
        <td>
          {{index}}
        </td>
        <td *ngFor="let col of columns">
          {{rowData[col.field]}}
        </td>
      </tr>
    </ng-template>
  </p-table>

and finally manage the onDropRow($event):

  onDropRow(e: any): void {
    if (this.products[e.draggedRowIndex].deliveryStatusCode! < 50 && this.products[e.droppedRowIndex].deliveryStatusCode! < 50) {
      e.sender.acceptDrop();
      this.logs.push(`SUCCESS: Reordered ${this.products[e.draggedRowIndex].name!} in position ${e.droppedRowIndex}.`);
    } else {
      e.sender.rejectDrop();
      this.logs.push(`FAILED: Impossibile move ${this.products[e.draggedRowIndex].name!} in position ${e.droppedRowIndex}. One of those items was delivered yet. :(`);
    }
  }

IMPORTANT: it is very mandatory to add an e.sender.acceptDrop(); or e.sender.rejectDrop(); otherwise the table have some bugs.

Conclusion

This is a reference of a complete example project to use this directive:

ffex / prime-ng-table-drop-event

PrimeNg Table Drop Event Example

This project is an example of how to override the OnDrop function in a PrimeNg table; the new onDrop raises an event so you can, in every component you want, put conditions to accept or reject the reorder.

This project was generated with Angular CLI version 15.1.3 and PrimeNG version 15.1.1.

How to use in your Project

You can use this in a Angular with PrimeNg project.
The only file you need is reordable-row-drop.directive.ts, copy that in your angular project
- NOTE: Add it in the module declarations
replace the PrimeNg default [pReorderableRow]="index" with the custom one [pReordableRowDrop]="index" (dropRow)="onDropRow($event)". Example:

  <p-table [value]="products" [columns]="cols" [reorderableColumns]="true" [tableStyle]="{'min-width': '50rem'}"&gt
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th style="width:3rem"></th>
        <th style="width:3rem">#</th>
        <th *ngFor="let col of columns" pReorderableColumn>
          {{col.header}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
      <tr [pReordableRowDrop]="index" (dropRow)="onDropRow($event)">
        <td>
          <span class="pi pi-bars" pReorderableRowHandle></span>
        </td>
        <td>
          {{index}}
        </td>
        <td *ngFor="let col

…

View on GitHub

It's all folks! Bye!

CookOverflow - a place where share your recipe

ffex — Thu, 12 May 2022 23:50:40 +0000

Overview of My Submission

Very often I use websites to find some new recipe to try (cook and eat!) and very often I don't have in my fridge the ingredients 🤔

Here the idea! A Stackoverflow like website where the people can ask recipes to other people! No perfect "Chef recipe", but something personal, something that is write in a old grandma recipes book!

The project is in a very very early stage, it something like a pre-demo. It's awesome work with appwrite and see the project grow really really fast (To do this I work on it something like only 20 hours!!)

It is very funny work with appwrite and learn to use this powerful backend environment for side project (I have a lot of side projets idea!🤪).

The base feature right now are: login, write a post with the choose of ingredients, write recipes easy to answer the post.
The complete idea is to do a system of ranking (for user, for recipe, for post) to do monthly challenge and maybe gain some prizes! Maybe an app ("Grandma Recipes Book" for example) with the bests recipes ordered by month, year, all time.

It is developed with AppWrite for the backend using:

Log with OAuth2 by Google
Database functions: List, Query, Create, Update...

For the frontend I used Angular and PrimeNg, and it perfect to fast the work!

In the repo there is (under directory "util") a little script in python to do massive insert of the ingredients.

Submission Category:

Web2 Wizards

Link to Code

ffex / cook-overflow

CookOverflow

This project was generated with Angular CLI version 13.3.4.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

View on GitHub

Additional Resources / Info

FoodDB, for the ingredients list.
PrimeNG for the amazing angular components.

Screenshots/demo videos are encouraged!

Homepage

Login!

Create a post!

Choose ingredients

Check the post with recipes list by other users

Create a recipe!!!

Check recipes

Day 3-4-5-6: DB, create, list,query...

ffex — Wed, 11 May 2022 10:45:26 +0000

In this days I studied a little bit the NoSql DB logics, I ever work with relationship DB and this open my mind! 😁

I redo the new DB schema in appwrite with nosql logics, And I started to implement something!

The main idea for the project was to create a mini-recipes-social where the people can post the ingredients that have and other people share his recipes with this ingredients.

You can vote the post-question you can vote the recipe, you can chose the best recipes, any user have a ranking, etc...

Do you know Stackoverflow? 😁 the idea is the same but with recipes!

this is the home page:

and this the creation of the post:

And now? answer the question with recipes!

Day 1-2: Authentication!

ffex — Fri, 06 May 2022 18:06:14 +0000

It's amazing the semplicity to do this part with google OAuth2... Here it is:

Home Page

Login Page

Authenticated Page

I follow this tutorial et voilà!
Lerndemy Tutorial

I had a few diffulty with the promise call and organize angular code, but it is ok for now!
In the next post I reveal the theme of my project...

Day 0: Brainstorming!

ffex — Mon, 02 May 2022 07:32:42 +0000

Maybe I'm a little bit too late but I want to partecipate at the Hackaton! 🙂

The day 0 was brainstorming, find a good idea, start to write the DB and the webpages!

I'll hope to complete the project! I have a very low freetime but it's ok! 🙂

Can I be a 90's developer in 2022?

ffex — Mon, 25 Apr 2022 14:22:09 +0000

This morning I found this Amiga 500+ in my uncle loft, my first thought was "Wow! I have to try it"

Since I was a child I ever a passion of computers (specially old!), videogames and development and I have a very creative mind (sometimes too much!!). Today don't have much time to spend on the amiga (I have to do some boring job stuff for tomorrow!) but an idea growth in my mind...

Can be interesting develop a 90's videogame for the amiga in 2022? Maybe copy some videogame of this era. How about GTAV for amiga? Or maybe Farming simulator for amiga? Or Terraria maybe?

I don't know the answer so I decided to write a post here, and ask you developers if it is a good idea!

I don't know if it is interesting or maybe someone do that yet, please share your thought, maybe I can do a series of videos of this adventure, maybe there is someone 90's game developer that read this post and can share advise for this.

It's a crazy idea maybe, but I like to learn somethings new!