DEV Community: Tiago S. P Rodrigues

Vemto (the Laravel code generator) is now Open Source

Tiago S. P Rodrigues — Wed, 24 Sep 2025 17:48:25 +0000

Vemto is a desktop application focused on generating Laravel code, with several important features such as: editing and synchronizing the data schema (tables and models), generating migrations, models, factories, seeders, CRUD, API, and much more.

I'm delighted to announce that Vemto (version 2) is now a fully open-source project, published under the MIT license.

A few months ago, I wrote a blog post explaining in detail why Vemto would become open-source.

At the time, I wasn't sure which license to use, but after consulting with numerous users and customers, I ultimately opted for the MIT license.

It took me a while to prepare this repository due to personal reasons.

Still, I finally managed to increase the number of tests to over 400, covering at least the most critical parts of the application. I will continue adding more tests over time.

I also managed to finish writing much of the internal development documentation.

You can access the GitHub repository here:

https://github.com/VemtoOrg/vemto2

I hope you enjoy it.

Converting audio to MP3 in the browser - Javascript tutorial

Tiago S. P Rodrigues — Fri, 05 Sep 2025 16:23:49 +0000

This week is my son's first birthday. My wife downloaded over 60 children's songs for the party and asked me to convert them to MP3, as her speaker didn't support the m4a format she was using.

My first thought was to open any online conversion site, upload the songs, and wait for the conversion. But most sites only allow you to convert a maximum of 2 to 5 files on their free plans.

Of course, I could simply pay for one of these sites. But like any good programmer who likes to reinvent the wheel, I decided to create the converter myself.

As a web developer, I was curious if this would be possible directly in the browser. After some research, I found the Lame.js library, which allows you to encode MP3 files.

In just under a morning, I had created a simple page that converted all the files to MP3 in a matter of minutes. I liked the result so much that I even bought a domain, did some improvements and put it online: https://mp3converter.cloud

In this short tutorial, I'd like to show you how simple it is to take an audio file and convert it to MP3 using this small library.

Firstly, download the lame.all.js file from the repository and put it inside your project's folder.

Then, create a simple HTML page with a file input and a button to start the conversion:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio to MP3 Converter</title>
    <script src="lame.all.js"></script>
</head>
<body>
    <h1>Convert Audio to MP3</h1>
    <input type="file" id="audioFile" accept="audio/*">
    <button onclick="convertToMP3()">Convert</button>
</body>

Now lets implement the *convertToMP3 * method. Firstly, we read the audio file from the input:

async function convertToMP3() {
    const fileInput = document.getElementById('audioFile');
    if (!fileInput.files[0]) return alert('Select a file first.');

    const file = fileInput.files[0];
    // ... rest of the code
}

Then we decode the file to a Buffer using the AudioContext api:

const buffer = await file.arrayBuffer();
const audioCtx = new AudioContext();
const audioBuffer = await audioCtx.decodeAudioData(buffer);

Now we convert the data to the Lame.js accepted format (from Float to Int16):

const channels = Math.min(audioBuffer.numberOfChannels, 2);
const sampleRate = audioBuffer.sampleRate;
const int16Data = [];

for (let ch = 0; ch < channels; ch++) {
    const floatData = audioBuffer.getChannelData(ch);
    const intData = new Int16Array(floatData.length);
    for (let i = 0; i < floatData.length; i++) {
        intData[i] = Math.max(-32768, Math.min(32767, floatData[i] * 32767));
    }
    int16Data.push(intData);
}

With that, it is now possible to generate the final mp3 file using Lame:

const encoder = new lamejs.Mp3Encoder(channels, sampleRate, 96);
const mp3Data = [];
const blockSize = 1152; // Better to use multiples of 576
const length = int16Data[0].length;

for (let i = 0; i < length; i += blockSize) {
    const leftChunk = int16Data[0].subarray(i, i + blockSize);
    let mp3buf;
    if (channels === 2) {
        const rightChunk = int16Data[1].subarray(i, i + blockSize);
        mp3buf = encoder.encodeBuffer(leftChunk, rightChunk);
    } else {
        mp3buf = encoder.encodeBuffer(leftChunk);
    }
    if (mp3buf.length > 0) {
        mp3Data.push(mp3buf);
    }
}

const finalMp3 = encoder.flush();
if (finalMp3.length > 0) {
    mp3Data.push(finalMp3);
}

And finally, download the generated file:

const blob = new Blob(mp3Data, { type: 'audio/mp3' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = file.name.replace(/\.[^/.]+$/, '') + '.mp3';
a.click();
URL.revokeObjectURL(url);

If you are interested in the full code, here it is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio to MP3 Converter</title>
    <script src="lame.all.js"></script>
</head>
<body>
    <h1>Convert Audio to MP3</h1>
    <input type="file" id="audioFile" accept="audio/*">
    <button onclick="convertToMP3()">Convert</button>
    <script>
        async function convertToMP3() {
            const fileInput = document.getElementById('audioFile');
            if (!fileInput.files[0]) return alert('Select a file first.');

            const file = fileInput.files[0];
            const buffer = await file.arrayBuffer();
            const audioCtx = new AudioContext();
            const audioBuffer = await audioCtx.decodeAudioData(buffer);

            const channels = Math.min(audioBuffer.numberOfChannels, 2);
            const sampleRate = audioBuffer.sampleRate;
            const int16Data = [];

            for (let ch = 0; ch < channels; ch++) {
                const floatData = audioBuffer.getChannelData(ch);
                const intData = new Int16Array(floatData.length);
                for (let i = 0; i < floatData.length; i++) {
                    intData[i] = Math.max(-32768, Math.min(32767, floatData[i] * 32767));
                }
                int16Data.push(intData);
            }

            const encoder = new lamejs.Mp3Encoder(channels, sampleRate, 96);
            const mp3Data = [];
            const blockSize = 1152;
            const length = int16Data[0].length;

            for (let i = 0; i < length; i += blockSize) {
                const leftChunk = int16Data[0].subarray(i, i + blockSize);
                let mp3buf;
                if (channels === 2) {
                    const rightChunk = int16Data[1].subarray(i, i + blockSize);
                    mp3buf = encoder.encodeBuffer(leftChunk, rightChunk);
                } else {
                    mp3buf = encoder.encodeBuffer(leftChunk);
                }
                if (mp3buf.length > 0) {
                    mp3Data.push(mp3buf);
                }
            }

            const finalMp3 = encoder.flush();
            if (finalMp3.length > 0) {
                mp3Data.push(finalMp3);
            }

            const blob = new Blob(mp3Data, { type: 'audio/mp3' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = file.name.replace(/\.[^/.]+$/, '') + '.mp3';
            a.click();
            URL.revokeObjectURL(url);
        }
    </script>
</body>

And that's basically it. In my case, I implemented some improvements, such as using web workers to perform the conversion faster (which increases the conversion speed at least 5x on my machine).

I hope this short article was helpful. Cheers!

Freesurvey.app: Simple Browser-Based Surveys

Tiago S. P Rodrigues — Fri, 25 Oct 2024 13:31:39 +0000

Hi everyone,

I built freesurvey.app as an easy way to create and embed surveys right from the browser, no login needed.

You just customize a survey, copy the generated JavaScript, and it’s ready to add to any website.

You can connect responses to Google Sheets or your own backend, and if you want, you can even host it yourself. It’s free, flexible, and built to keep things simple.

I hope you like it!

How to create an Image Upload Viewer with Alpine.js

Tiago S. P Rodrigues — Sun, 14 Feb 2021 10:07:43 +0000

Sometimes, when we create a form with image upload, it may be a good idea to preview the image before sending it to the backend or to preview the image that is already uploaded when opening the form to edition.

In this tutorial, I’ll teach you how to create a simple and reusable Alpine.js component to preview uploadable images.

This post assumes you have a basic knowledge of Alpine.js.

To facilitate the process I’ll use the TailwindCSS framework to style the component, but don’t worry, I’ll only use some simple styling and I’ll explain the relevant CSS I’m using when necessary.

Starting the component

Assuming we already have an HTML page with Alpine.js installed, we can start declaring the component code:

function imageViewer(){
  return{
    imageUrl: '',
  }
}

Now we can add the component template to our HTML:

<div x-data="imageViewer()">
  <div class="mb-2">
    <!-- Show the image -->
    <template x-if="imageUrl">
      <img :src="imageUrl" 
           class="object-cover rounded border border-gray-200" 
           style="width: 100px; height: 100px;"
      >
    </template>

    <!-- Show the gray box when image is not available -->
    <template x-if="!imageUrl">
      <div 
           class="border rounded border-gray-200 bg-gray-100" 
           style="width: 100px; height: 100px;"
      ></div>
    </template>

    <!-- Image file selector -->
    <input class="mt-2" type="file" accept="image/*">

  </div>
</div>

The code above checks if the imageUrl property is filled. If so, it will show the image tag. Otherwise, it will show a small gray box in the place of the image.

Notice that we used the object-cover class from TailwindCSS on our image tag. It adds an “object-fit: cover;” CSS property to avoid the image losing aspect ratio and centering it on the preview.

After that, we can see something like it when running our code:

Previewing the image

Now, let’s add the code to preview the image when choosing a new file to upload.

Firstly, we’ll update the file input to call the fileChosen method when a file is chosen:

<input class="mt-2" type="file" accept="image/*" @change="fileChosen">

Then we can implement this method on our component:

function imageViewer() {
  return {
    imageUrl: '',

    fileChosen(event) {
      this.fileToDataUrl(event, src => this.imageUrl = src)
    },

    fileToDataUrl(event, callback) {
      if (! event.target.files.length) return

      let file = event.target.files[0],
          reader = new FileReader()

      reader.readAsDataURL(file)
      reader.onload = e => callback(e.target.result)
    },
  }
}

The most important method here is fileDataToUrl. It is responsible for reading the file data and convert it to a data URL (a base64 representation of the image file).

So, inside the fileChosen method, we can get this data URL result and store it on the imageUrl property.

As image tags accept both: image addresses and base64 data representations, we can use this trick to display our image before uploading it.

Adding a default image address

Now let’s do a small change to our component to allow defining a default image path/address. It will help us showing already uploaded images when opening an Edit Form.

To do it, we’ll add the following changes to the component:

function imageViewer(src = '') {
  return {
    imageUrl: src,
    ...
  }
}

Now we can pass an image address to your component to init with a preloaded image:

<div x-data="imageViewer('heart.png')">
  ...
</div>

Conclusion

With this simple and reusable Alpine.js component, you can add an image preview to your form uploads.

I hope this tutorial is util for you. Cheers!

This tutorial was originally posted here.

Please consider following me on Twitter for more tips and tutorials: @Tiago_Ferat

Announcing Vemto - A Laravel Studio and Code Generator

Tiago S. P Rodrigues — Thu, 29 Oct 2020 13:10:52 +0000

Vemto is a desktop application that will optimize and speed up the way you start new projects with Laravel.

The tool can generate code for:

Models, Migrations, Policies, Factories, and Seeders
Controllers and Form Requests
CRUD Applications
Tests
And much more coming soon… (see the Roadmap)

Also, there are smart features that help your productivity. For example, when adding a common field to your Model, such as the "gender" field, the field type, options, and the faker code will automatically be suggested (in fact it automatically adds the faker code for all types of fields):

The library of fields is extensive and is being constantly updated, making it increasingly simple to create entities (models and tables).

Another interesting feature is that, when adding a relationship, the foreign keys, tables (in case you need a pivot table), and the inverse relationship in the related model will be automatically generated.

It is also possible to generate "CRUD forms" related to the Models. The generation of forms is simple and automatic, but it is possible to visually edit the layout of the inputs, responsiveness, validation rules, application titles, etc.

Also besides several other features. For example, you can choose how to generate different pieces of code:

Change the Mass Assignment strategy to Guarded instead of Fillable
Choose to use Controllers with singular or plural names
Choose to generate routes as resources or individually etc…

Finally, it is possible to generate complete applications, with clean, simple, and reusable code, reducing all those repetitive tasks common to new projects.

Concluding…

With a few months of existence, Vemto has evolved in several aspects and already has many interesting resources, and many other features are being developed at this very moment.

If you like the features and believe in the future of this tool, you can download it here: https://vemto.app

You can also sign up for the draw for Three One-Year Developer licenses by RT this Tweet. The draw will be on November 6, 2020.

Cheers and any questions or suggestions you can leave here in the comments!

Vemto - Laravel Code Generator and Studio

Tiago S. P Rodrigues — Mon, 13 Jul 2020 20:08:54 +0000

Vemto

Vemto is an upcoming Desktop Application that is being created to make starting new Laravel Projects easy. It brings plenty of awesome features to help you start your next project, and generates the code for:

Models, Migrations, Policies, Factories, and Seeders
Controllers, Tests and Form Requests
CRUD applications views (Under Development)
Authentication and Permissions modules (Under Development)

The projects are modular, allowing you to choose what sections of code to generate.

You can subscribe to the app launch here: https://vemto.app

How does the “new” versioning of Laravel work?

Tiago S. P Rodrigues — Mon, 20 Apr 2020 14:20:42 +0000

Although version 6 of Laravel was released in September 2019, there is still some confusion in the community about the new versioning standard and the feeling that things are going too fast.

Since I have been using Laravel for some time, I am used to the release cycle, and I would like to explain here what has changed, and why you should not be concerned.

Well, first, I will leave here the official statement of the change:

The Laravel framework (laravel/framework) package now follows the semantic versioning standard. This makes the framework consistent with the other first-party Laravel packages which already followed this versioning standard. The Laravel release cycle will remain unchanged.

As I highlighted in bold, the versioning cycle has not been changed. New versions with potential breaking changes have always been released every six months and will continue to be released in that period. In practice, nothing has changed.

That is, changing from 5.5 to 5.6, or from 5.7 to 5.8, is comparable to changing from 5.8 to 6.x, or from 6.x to 7.x, and so on.

The only thing that has changed is the way the numbers are presented. Before, the “major” number (The first number) of the version was not changed even with “Breaking Changes”, as you can see in the image below:

So, even if they had high impact changes, Laravel was still in version 5. See how many high-impact changes were made in the Upgrade from 5.7 to 5.8:

As seen in the official statement, the decision was taken to adopt semantic versioning so that there is consistency between Laravel and many of the packages used. In addition, semantic versioning demarcates version cycles well. With the previous model, you always seemed to be on Laravel 5, even if there were high impact changes.

That's basically it ... if you get the feeling that things are going too fast, just remember:

It is going at the same speed as always, with new versions being released every six months.

I hope I helped to clarify the matter. Cheers!

Did you like this post? Consider following me on Twitter to stay on top: @Tiago_Ferat (I will be writing constantly now, and I will also be launching tools for the community regularly)

Keep your code stupidly simple!

Tiago S. P Rodrigues — Thu, 02 Apr 2020 19:53:38 +0000

Simplifying (and keeping) the structure of all parts of your software can save a lot of work time (a precious resource).

When I say simple, however, I am not talking about something unfinished or badly done. It is often even more difficult to do things in a simple way (that is why it is common to see workarounds that make things so complex over time). It requires a little more planning and experience.

Thinking “simple” but planned is something that improves day after day, refactoring after refactoring, but which ends up bringing benefits in the short and long term.

Let's take as an example, a software that has a “Labels” module: labels that can be assigned to certain entities (let's assume that such entities are Posts, Products, etc.).

Due to several decisions that left simplicity aside, over time the structure of these "Labels" became more and more complex, and whenever a change was necessary, many hours or even days of work were lost.

See this example of an old code existing in this software, responsible for obtaining the labels of a given entity:

<?php

// Complex code caused by lack of simplicity
$labels = DB::table('labelables')
    ->select(['labelables.*', 'labels.id as label_id', 'labels.slug', 'labels.title'])
    ->join('labels', 'labels.id', 'labelables.label_id')
    ->where('labels.title', 'like', '%'.$search.'%')
    ->where('labelables.labelable_type', $request->labelable_type)
    ->whereRaw('(SELECT count(id) 
        FROM labelables AS count_labelables 
        WHERE count_labelables.labelable_type = labelables.labelable_type
            AND count_labelables.project_id = labelables.project_id
            AND count_labelables.labelable_id = ?
            AND count_labelables.label_id = labelables.label_id
            AND count_labelables.color = labelables.color
            AND count_labelables.deleted_at IS NULL) = 0', $request->labelable_id)
    ->groupBy(['labels.title', 'labelables.color'])
    ->orderBy('labelables.updated_at', 'ASC')
    ->limit($limit);

And this was one of the most subtle parts (the problem, in this case, was in the root/structure of the data, which ended up generating the famous “workarounds”, to solve the problems).

Over time, the different solutions to the structural problems were piling up and turning the module into a large “spaghetti code”.

At that moment, it was almost impossible to read the code without "driving crazy".

That is why a complete reformulation of the structure of this module was made, from the database to the code, always with the concept of simplicity and objectivity in mind.

In the end, the software had the following code to perform the same task:

<?php

$currentLabels = $this->getCurrentLabels();

$labels = Label::where('company_id', $company->id)
    ->whereNotIn('labels.id', $currentLabels);

Just by looking at the code, you can see that the simplification of the structure has already generated improvements in readability.

To achieve this result, several steps were necessary:

Review the current structure (time-consuming and complex, but necessary)
Decide what goes on and what comes out of the business rules (some rules added over time were unnecessary) - This is the stage of talking and really understanding what is expected, and what can be left out
Reformulate the structure, from the database to the code
Implement the code (testing during the process) - It is common, at this stage, to have to create code to adapt the data to the new structure, renaming and creating new tables in the database, etc. It is also common, sometimes, to return to the previous step (3) since developing is a process of discovery and some incongruities may go unnoticed.

The curious thing is that the structure was very simple at the beginning of the system, and many of the rules added later, which ended up generating this complexity, were discarded.

The famous KISS principle (keep it simple, stupid) is a great concept to be applied to any project, being software development or not.

According to this principle, making and keeping things simple makes them work much better than if they are complicated.

In accordance with this principle and with what we saw here, we can conclude that it is important to question everything that can add layers of complexity without bringing real benefits.

Perhaps, having kept everything simple, really analyzing the need for certain rules and features, would have avoided so many headaches in this software module.

And finally:

Even the complex can be approached in a simple way. Keep it simple!

If you liked this post, please consider following me on Twitter to be notified when I post others.

An Open Source system to create Estimates and Quotes

Tiago S. P Rodrigues — Wed, 01 Apr 2020 21:02:08 +0000

An Open Source system to create Estimates and Quotes

Some days ago, I found me extremely tired of doing long and static estimates/quotes to send to my customers. Sometimes, I needed to put sections to explain things like optional items, open scope, the total price, the price without optional items, etc

So, I decided to make a Web Application to help me with:

Adding fixed and optional items
Putting the total price and the total selected items price in any place of the estimate/quote
Sending it directly to the customer e-mail
Allowing to change currency
Rapidly duplicating estimates

Then I started to write LaraEstimate, a Laravel 7 (PHP) and VueJs system to solve these problems.

Now, the system is ready, and I'm sharing it with you all. I hope it would be helpful for you.

Github Link

Live Preview - LaraEstimate

Cheers!

DEV Community: Tiago S. P Rodrigues

Vemto (the Laravel code generator) is now Open Source

Converting audio to MP3 in the browser - Javascript tutorial

Freesurvey.app: Simple Browser-Based Surveys

How to create an Image Upload Viewer with Alpine.js

Starting the component

Previewing the image

Conclusion

Announcing Vemto - A Laravel Studio and Code Generator

Concluding…

Vemto - Laravel Code Generator and Studio

Vemto

How does the “new” versioning of Laravel work?

Keep your code stupidly simple!

An Open Source system to create Estimates and Quotes

An Open Source system to create Estimates and Quotes

System Images