Forem: Danilo Vilhena

I built a blazing-fast AI-Powered SQL editor ⚡️

Danilo Vilhena — Wed, 30 Apr 2025 00:36:51 +0000

Hello!

If you're like me, you've probably spent countless frustrating hours wrestling with clunky, slow SQL clients.

I was tired of feeling frustrated every time I had to write, organize, or manage some SQL, so I built something better.

Meet TurboSQL: a blazing-fast, AI-powered SQL editor designed specifically with developers in mind.

Why Did I Build TurboSQL?

The short answer: pain. Real, daily pain. Working with traditional SQL clients felt unnecessarily cumbersome. They were slow, bloated, and distracting, constantly interrupting my coding flow. What I wanted was something close to Cursor—fast, intuitive, and built for developers who value speed, simplicity, and efficiency.

So I created TurboSQL—a SQL desktop app designed to get out of your way and let you focus entirely on your data and queries. Here's what makes TurboSQL special:

⚡️ Lightning-Fast Performance

TurboSQL is built on Tauri, a powerful framework that offers near-native performance. Queries run instantly, making it the fastest SQL client you've likely ever used.

⌨️ Keyboard-First Design

Every action in TurboSQL is shortcut-ready. Designed to keep your hands on the keyboard, you'll never have to reach for the mouse and break your flow again.

🗂️ Smart Organization

Organize your queries neatly into folders and files, just like real code. It’s intuitive, structured, and exactly what you expect as a developer.

✨ AI-Powered Magic

TurboSQL isn’t just fast—it’s smart. The built-in AI assistant generates queries from plain English, explains complex SQL statements, and even autocompletes queries intelligently based on your database schema.

😎 Beautifully Minimal

I also believe tools should be a pleasure to use. TurboSQL comes with a sleek, dark-mode UI that's minimalistic and clean, making working with your data genuinely enjoyable.

Pricing That Makes Sense

TurboSQL offers a simple, transparent pricing structure:

Community (Free): Powerful SQL editor, unlimited connections, fully secure and local-first experience.

Professional ($15/month): Unlock the full AI-powered experience, priority support, and advanced productivity features.

Try it risk-free with our 30-day money-back guarantee.

Ready to Turbocharge Your SQL Workflow?

Stop dealing with slow, outdated SQL clients. TurboSQL is here to give you the speed, power, and developer-friendly UX you've always wanted.

https://www.turbosql.co/

JSDoc: Improve your JS code documentation

Danilo Vilhena — Thu, 01 Feb 2024 02:24:25 +0000

In the dynamic world of JavaScript, good communication is just as crucial as writing good code.

This is where JSDoc enters the scene, a tool that's essential for any JavaScript developer aiming to elevate the readability and maintainability of their code.

JSDoc helps you craft a clear, navigable guide through your code for others and for your future self.

Let's get started and see how JSDoc can make your projects more accessible and your development process more efficient! 🔥

What is JSDoc?

JSDoc is an open-source documentation generator used by developers to annotate JavaScript source code.

By using comment blocks specific to JSDoc, developers can provide rich, insightful descriptions of the code's functionality, parameters, return types, and more.

This isn't just about adding comments; it's about creating a comprehensive guide to your code.

For example, in the image below, we are able to give a short description of what a function does, what are its params and what is returned.

Why use JSDoc?

Using JSDoc can be good for your project for several reasons, let's go through a few of them:

Improve code readability: JSDoc provides a clear overview of what a function or a module does, what parameters it expects, and what it returns.
Help code maintenance: When code needs to be updated or debugged, JSDoc can help developers quickly grasp the purpose and functionality of the code, reducing the time needed for maintenance.
Support for Intellisense and Autocomplete: Many code editors and IDEs (like VS Code) use JSDoc comments to provide Intellisense and autocomplete features. This helps developers write code more efficiently by giving them quick access to function signatures and parameter information.

Setting Up JSDoc

JSDoc is available as a Node.js package, which means you can easily install it using npm, the Node package manager.

If you want to install it globally, run:

npm install -g jsdoc

If you want to install it in your project, run:

npm install --save-dev jsdoc

Once it finishes installing, the next step is to set up a basic configuration file. This file is the jsdoc.json, and it defines the rules and settings. Here's a simple setup:

{
  "source": {
    "include": ["src"],
    "includePattern": ".+\\.js(doc|x)?$",
    "excludePattern": "(^|\\/|\\\\)_"
  },
  "opts": {
    "destination": "docs"
  }
}

To generate documentation, you run JSDoc from the command line with:

jsdoc -c jsdoc.json

And... boom! There will be an index.html file with the docs. But if you are following along and you opened the index.html file, you'll see that it's EMPTY!

And why is that? Because first, we need to write the JSDoc comments and then run this command. So let's go ahead and understand how to do this!

Writing JSDoc Comments

A JSDoc comment begins with /** and ends with */. Within this, you use specific annotations, each beginning with `@, to provide structured information.

Let's start with a sum function, a simple one that takes 2 numbers and returns another number.

We will use the @param to describes a parameter passed to a function with its type and description, like this 👇

But we are missing something. This function returns a number. So let's specify that with @return or @returns, like this 👇

However your code is growing (like a real software project), and now you want to move that sum to a class. Let's define with @class like this 👇

And what if that class has a function that can throw an error, we will use JSDoc to describe it with @throws like this 👇

And last thing, what if you create a new sum function and deprecated the old one? Use @deprecated like this 👇

These are some of the annotations that can be used with JSDoc, to see all the available, check here.

Generating Documentation with JSDoc

Great, now our JSDoc comments are in place!

So simply run the command jsdoc index.js in your terminal, replacing `index.js with the path to your JavaScript file. JSDoc will process the comments and generate HTML documentation.

💡 If you created your jsdoc.json in the section above, you can run with that!

Customizing the Output

JSDoc allows customization of the output documentation through:

Templates: JSDoc supports various templates to change the layout and style of the generated documentation. You can choose a template that fits your project's needs or even create a custom one. Check them here.
Styling: The generated documentation's CSS can be modified for further customization.

Integrating JSDoc into Your Build Process

You can integrate JSDoc into build tools like Grunt, Gulp, or Webpack. This can be done by adding a task or script in your package.json file or build configuration file.

And you can even integrate it in a CI/CD pipeline, set up a step that runs JSDoc to ensure up-to-date documentation is generated with every build.

Conclusion

In this guide, we've explored the essentials of JSDoc, from setting it up and writing effective comments to generating and customizing documentation.

JSDoc is a powerful tool that enhances the readability and maintainability of JavaScript code, ensuring that every function, class, and module is clearly understood.

Thanks for reading! Follow to get more of this type of content. Have a great day, see you soon! 👋

🚀 Kickstart: the fastest way to setup your JS projects!

Danilo Vilhena — Sat, 13 Jan 2024 19:33:36 +0000

Picture this: you just had a new project idea and you are to buzzing with ideas and ready to code.

But then, before the actual good coding, you have to configure ESLint and Prettier, hook up Husky, add your testing framework, and so on.

Hours slip by, and you're still not writing the code for the project itself. Sound familiar?

Here comes 🚀 Kickstart - a CLI tool designed to turn these hours into seconds!

In less than a minute and just answering questions, you're able to setup:

✍️ Linters (ESLint or StandardJS), formatter (Prettier)
🎨 CSS frameworks (Tailwind, Sass or Material UI)
🧪 Unit testing (Jest or Jasmine)
🖥️ E2E testing (Cypress or Playwright)
🐶 Husky, lint-staged
📝 README, CHANGELOG, .gitignore

How to use it?

🚀 Kickstart is a NPM package that you run in the CLI. So to install it just run:

npm install -g kickstart-it

In a new folder, run the command:

kickstart-it

Then you just have to answer the questions and your project will be quickly set up!

After you run 🚀 Kickstart once, you're able to save a config.json file of what you picked.

That way you can skip answering questions next time, and just go straight to the setup.

Please check the README to see available flags and config options.

Can I contribute to 🚀 Kickstart?

Absolutely! It's an open source, and I greatly appreciate contributions from anyone! So report bugs, suggest new features and open pull requests to improve the current code!

I hope you give 🚀 Kickstart a chance and try it out in your next project!

If you do, please give me some feedback, so the tool can improve even further.

Thanks for reading! Have an excellent day 👋

5 great tools for React developers in 2022

Danilo Vilhena — Wed, 07 Sep 2022 20:59:15 +0000

React has become one of the most extensively used frameworks in the world in less than a decade, and according to Statista, it’s utilized by more than 40% of developers globally. One reason for this is its small cost, as well as its myriad perks and potential.

Companies’ demand for React developers has increased as a result of the tool’s popularity. These professionals are increasingly in demand — and for high salaries.

If you want to work as a React developer, keep reading to the end of this article to find out 5 great tools to learn in 2022!👇

1. Next.js

Next.js is a flexible React framework that gives you building blocks to create fast web applications.

By framework, it means Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.

Advantages of Next.js

Hybrid SSG and SSR: Render pages during build (Static Site Generation) or on each request (Server-side Rendering) in the same project.
Automatic Routing: The URLs in Next.js are mapped based on the pages folder, thus each file in this folder automatically becomes a page, with no additional setting required.
Internationalization: By default Next.js already has a framework for identifying different languages, working with unique routes and translations via locale.
Hot Code Reloading: Any changes made to the code during development will be reflected in the local application in real time.
Automatic Code Splitting: This feature allows pages to be rendered with only the packages they need. This ensures that each page has only the code required to render it, minimizing page size and boosting rendering speed.

Link to Next.js

2. GraphQL

GraphQL is a server-oriented query language and execution environment for application programming interfaces (APIs), with the goal of providing just the data that clients request.

GraphQL is intended to make APIs more responsive, adaptable, and user-friendly for developers.

What GraphQL isn’t?

GraphQL is not a database
GraphQL is not a replacement for SQL
GraphQL is not a server-side tool

Advantages of GraphQL

Requests are handled in a single round-trip transmission. Clients get exactly what they want, with no more information (overfetching). Which reduces data transfer costs, both on the server side (throughput) and on the client side (4G bandwidth)
Even on slow connections, this ensures faster response and loading times for mobile or web applications
Allows you to change the API of an application without affecting existing queries
Simplicity leads to a more stable backend

Disadvantages of GraphQL

Learning curve: you already know REST and will need to learn GraphQL
Caching is more complex with GraphQL

Link to GraphQL

3. Chakra UI

Chakra UI is a React component library that makes it simple to create the user interface of an application or website. Its purpose is to provide a simple, modular, and cost-effective set of components that allow you to get your app up and running quickly.

Chakra strives to make every component accessible. A critical part of application development that is often overlooked.

Chakra also includes a simple API that allows developers to become productive. It allows individuals and teams to create inclusive applications without having to worry about building a bunch of components.

Advantages of Chakra UI

Development speed: it includes many convenient components that can be used for common day-to-day styling jobs.
Component factory: it offers a versatile method of creating styled components. The components can be assembled similarly to LEGO.
Built with TypeScript: as a result, the library offers complete IDE support as well as type checking.

Link to Chakra UI

4. Redux

Redux is a Flux-based container for global state management and control of JavaScript applications (it is intended to solve the problem of sharing state between components by making it unidirectional).

Without Redux, an application is obliged to trigger events between numerous components, making them closely coupled. This makes the project difficult to maintain, as one component may rely on several others to function.

Advantages of Redux

Centralized state management system, i.e. store: Redux maintains state globally. The data is simply accessible to all components across the program. This centralizes all data and makes it extremely simple for a component to obtain the state it requires.
Performance optimizations: Redux improves performance by avoiding needless reprocessing and guaranteeing that a given component is rendered only when its data has changed.
Simple debugging and testing: To better understand what’s going on in your application, you can use the Redux DevTools or log the state.
Predictable outcome: Every action has a predictable result. Your state store serves as a centralized source of information.

Disadvantages of Redux

Too complex for simples applications: applications with relatively simple UI changes don’t usually require a complex pattern like Redux.
Slower to code shared state: but for a good reason to be manageable in the long run.
Increased layering complexity: in writing state manipulation logic like actions and reducers, while traditional way just setState, that’s it.

Link to Redux

5. Jest

Jest is a JavaScript testing framework that ensures the accuracy of JavaScript code. It enables you to develop tests using an easy-to-use, familiar, and feature-rich API that returns results rapidly.

Jest is fully documented, takes little configuration, and can be customized to meet your needs.

Advantages of Jest

Zero config: Jest aims to work out of the box, config free, on most JavaScript projects
Snapshots: make tests which keep track of large objects with ease. Snapshots live either alongside your tests, or embedded inline.
Isolated: tests are parallelized by running them in their own processes to maximize performance.

Link to Jest

Conclusion

There are many more excellent React tools and frameworks to explore, but in this article we met 5 of them that are in high demand by the market and are frequently utilized by many developers.

Thanks for reading! Follow me and please interact if you liked the content. Have an excellent day, see you tomorrow! 👋

What are JSON Web Tokens for and how to use with Javascript?

Danilo Vilhena — Wed, 07 Sep 2022 00:48:07 +0000

Have you ever been to an event where you had to present ID to prove that you were the person who bought the ticket? The act of asking for ID is a form of authentication so that you receive authorization to enter.

On the web, this process works in a similar way. In order to request certain services or access specific pages, you need to identify yourself in some way, and this identification needs to be secure and unique.

In this article you will understand what the JWT (acronym for “JSON Web Tokens”) standard is for authentication, which is widely used on the web.

What is a token?

Nowadays we hear the word token a lot in connection with NFTs, metaverse, cryptocurrencies, etc. But outside this universe, a token is a digital signature, a key.

When you open an account at a bank, you need to set up a password and your personal data. This data is converted into a digital signature that will uniquely identify you to that bank, and every time you access your bank and enter your password and personal data, the bank will understand and confirm that you are that logged in user, similar to how we enter the event when we present our identity document.

There are several algorithms and standards that transform your information into a token, that is, a unique authentication key that makes sense for the service or application you are currently trying to access. One such standard is JWT, which is secure in that it allows authentication between two parties via a signed token.

What is JWT?

A JWT is a standard for authentication and information exchange defined by RFC7519. Inside it, it’s possible to securely and compactly store JSON objects. This token is a Base64 code and can be signed using a secret or private/public key pair.

Signed tokens can verify the integrity of the information contained in them, unlike encrypted tokens that hide this information. If a JWT is signed by a public/private key pair, the signature certifies that the party that has the private key is the one who actually signed it.

How was JWT created?

It is part of a family of specifications: the JOSE family.

JOSE stands for JSON Object Signing and Encryption. JWT is part of this family of specifications and represents the token. Below you can see other specifications from this family:

JWT (JSON Web Tokens): represents the token itself
JWS (JSON Web Signature): represents the signature of the token
JWE (JSON Web Encryption): represents the signature for encryption of the token
JWK (JSON Web Keys): represents the keys for the signature
JWA (JSON Web Algorithms): represents the algorithms for signing the token

Now that you know what a JWT is, what it’s for, and when to use it, let’s take a deeper look at how it works and what the components of a JWT are.

Basic components of a JSON Web Token

A JWT has a basic structure consisting of the header, the payload and the signature. These three parts are separated by dots. So it would look something like this: header.payload.signature. Let’s get a better understanding of each of these parts!

Header

The header of the token is where we pass basically two pieces of information: the alg that tells which algorithm is used to create the signature and the typ that indicates what type of token.

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

The payload is the component where we can find authentication data like password and email, for example.

{
  "email": "name@example.com",
  "password": "agEastvIders"
}

Signature

The token signature is made by encoding the header and payload plus a secret key and is generated by the algorithm specified in the header.

HS256SHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret_key)

The result is three dot-separated strings that can easily be used in HTML environments and HTTP protocols.

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.
eyJlbWFpbCI6Im5hbWVAZXhhbXBsZS5jb20iLCJwYXNzd29yZCI6ImFnRWFzdHZJZGVycyJ9.
stLcZmJGIeGXw_HY9c8A28E9n-B-GLsXYZABCuNA0XA

Creating a JWT token

To get started, let’s create a folder called jwt in the directory you want. Create a javascript file with the name of your choice, I'm using index.js.

Then, install the jwt lib of your choice. There are several libs that help you generate JWTs. I’ll use jsonwebtoken which is one of the most popular, but you can feel free to explore other options.

The first step is import the lib in our file:

const jwt = require('jsonwebtoken');

Now we create our secret key. The idea is that only you know your secret key and that it is difficult for malicious attacks. But it can be literally any string of your choice. This is how mine looks like:

const secretKey = 'Oa1tz8arFmnXURkg4aJQ';

Now let’s create our token using the sign method. This method accepts as parameters the payload, the secret key and the header, in that order.

const myToken = jwt.sign(
  {
    email: "name@example.com",
    password: "agEastvIders",
  },
  secretKey,
  {
    expiresIn: "1y",
    subject: "1",
  }
);

For this JWT, I’m entering an email and password in the payload; my secret key; and in the header I am entering a subject, which in the library in this example works like an id. In addition I’m saying that our token expires in 1 year. By default the encryption algorithm is HS256.

Now if we log this token to the terminal, we should see the following:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im5hbWVAZXhhbXBsZS5jb20iLCJwYXNzd29yZCI6ImFnRWFzdHZJZGVycyIsImlhdCI6MTY2MTU0ODMwNCwiZXhwIjoxNjkzMTA1OTA0LCJzdWIiOiIxIn0.bYWpwadW8xgstrSydwpnGnQExYuFxLMBh3JQRvtEPmw

Verifying our JWT token

To verify our token we can use a method in the jsonwebtoken library itself called decode passing the generated token.

const generatedToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im5hbWVAZXhhbXBsZS5jb20iLCJwYXNzd29yZCI6ImFnRWFzdHZJZGVycyIsImlhdCI6MTY2MTU0ODMwNCwiZXhwIjoxNjkzMTA1OTA0LCJzdWIiOiIxIn0.bYWpwadW8xgstrSydwpnGnQExYuFxLMBh3JQRvtEPmw';

console.log(jwt.decode(generatedToken))

The output of the code is:

{
  email:"name@example.com",
  password:"agEastvIders",
  iat:1661548304,
  exp:1693105904,
  sub:"1"
}

Where the parameters iat, exp and sub are respectively the creation and expiration dates, in UTC format, when the token was created and when it will expire, and the subject that we passed in our code with a value of 1.

Now, you might be asking yourself, “Now that I know what a JSON Web Token is and how it works, how do I use it in my front-end applications?”

Authenticating with tokens

Imagine you are a developer and you are creating the front-end of an application for a bank. On the login page you take the users’ data and send it to an API using fetch, for example.

fetch(`${baseUrl}/auth/login`, {
  method: "POST",
  headers: {
    "Content Type": "application/json",
  },
  body: user,
})
.then((res) => {
  ...
})
.catch((err) => {
  ...
});

The server will take this data and will return a token that will identify that user. Now, every time this user logs into the platform, he will go through authentication and, if everything is right with the data, he will be authorized to access certain areas of the application, such as viewing the balance. Usually this encryption and token generation is done by the back-end, but you will need to ensure that this logged-in user can continue to access other areas of the application.

You can also save the token in session storage or *local storage *in your browser to ensure that as long as the token does not expire, the user remains logged into the application. In addition, it is important that when logging in, the user is redirected to a home page where he can see other features of the application.

When this user tries to access the page that shows his balance, for example, you can make a request, using fetch passing in the headers an “Authorization” field with the generated token. This will cause the server to check whether or not the user is allowed to access that specific page.

fetch(${baseUrl}/balance, {

  headers: {

    "Authorization": Token,

  }

})

.then((res) => {

  ...

})

.catch((err) => {

  ...

});

Conclusion

In this article, you saw what JSON Web Tokens are, what they are used for, what their components are, and how to use them in your applications. You also saw how to use tokens in a front-end application for user authentication.

Thanks for reading! Follow me and please interact if you liked the content. Have a great day, see you soon! 👋