DEV Community: Enmanuel Jarquín

What Technologies Should I Use in My Application?

Enmanuel Jarquín — Sun, 16 Mar 2025 00:27:26 +0000

One of the most challenging things at the start of a project is deciding which technologies to use.
For that reason, I want to share my experience, hoping it will be useful to others.

Stack

Here's the stack in case you don't want to read the full post or don't have much time.

Supabase: To manage my Postgres DB and avoid creating a backend server with APIs (CRUD), it has a client library that simplifies database interactions; it can be used from a server or a client app (browser, mobile devices, etc).
NextJS: Using the new versions of NextJS and now with the new ways to deal with routers and service side components made it much easier to build the app using ReactJS components that connect directly to the database with Supabase. For instance, use the native HTML method to send form actions. When I integrated it, I was really surprised at how fast the development was.
Turborepo: The setup was really simple. I had been using NX in enterprise projects, but I wanted to give it a chance. NX offers more options to configure, but in my case Turborepo was more than enough.
TailwindCSS: To be honest, I don't like CSS, and I didn't want to manually style everything. Since it is time-consuming, I opted for TailwindCSS
Shadcn: One of the best decisions!. It combines reusable components with the flexibility of creating them from scratch. This tool generates the component in your code base, allowing you to customize it and it is fully compatible with TailwindCSS.
Clerk: To avoid building authentication from scratch. It manages users, provides different authentication methods, an account management panel, buttons, etc. You just configure the provider and that's it. However, it's price is 20$/month, while Supabase also supports authentication but requires more custom coding. So, depending on your budget, you could also use Supabase.

Vercel: For setting up environments. It was so easy to associate my domain and configure subdomains with just a few clicks. If I had done it manually, I would have needed to configure HTTPS and set up certificates, wildcards, etc, to support subdomains.
Namecheap: I already have some experience configuring the basics of domains, subdomains, and emails with Google.
Google: I configured Google services with Namecheap for emails. It's relatively cheap for starting out and having a professional email.
Docker: Not optional- required by Supabase for local development.

Motivation

I wanted to try out new technologies.
I wanted to build an MVP.
"Suddenly" I found myself without a project, and now the idea of an MVP was not optional anymore- but I'll talk about that in another post.

Application

The app is a web app. The initial idea was (or is) an app for digitizing restaurant menus. Restaurants could configure their products, prices, and branches and associate products with specific locations.
Initially, the idea was that consumers could place orders from the app, but that added a layer of complexity that would have delayed the MVP launch. So, that feature was moved to a second iteration.

Backoffice for restaurants

Menu app for consumers

Decision criteria

I wanted to speed up basic or repetitive tasks/processes so I could focus on learning new things or areas I rarely work on in my regular job.

Everything revolved around the idea of the MVP, so I needed technologies that allowed me to iterate quickly.
I wanted technologies that pushed me to improve in areas I wasn't very familiar with, like real-time apps, monorepositories, Github Actions, etc, while still leveraging technologies I already knew to avoid wasting time.
I didn't want to waste time on repetitive setups like authentication, APIs (CRUDs), DB configurations, etc.
The stack had to offer good performance by default.
I didn't want to spend time on CSS and writing styles from scratch, nor did I want to build basic components like buttons, form fields, etc..

Conclusion

If someone asked me what technologies I would suggest for an MVP nowadays, I would highlight two: Supabase and NestJS; the rest could vary.

🎥 Video Demo of the App: https://youtu.be/fyOKg2mjpTo
🔗 Domain & Subdomain Setup with Namecheap and Vercel: https://youtu.be/IY05UEV6DJY

Qué tecnologías usar en mi aplicación?

Enmanuel Jarquín — Sat, 15 Mar 2025 19:31:05 +0000

English version

Una de las cosas mas complicadas al inicio de un proyecto es decidir que tecnologías usar. Por tal motivo quiero compartir mi experiencia esperando sea de utilidad.

Stack

Aquí el stack en caso de que no quieras leer el post entero o no tienes mucho tiempo:

Supabase: Para gestionar mi base de datos en postgres, me evita crear un backend para las APIs ya que te un cliente el cual facilita la interación con la base de datos, puede usarse desde el server o desde app clientes que corren en el browser o móbiles.
NextJS: Usando las nuevas versiones de NextJS y ahora con las nuevas formas de gestionar routers y server side components fue mucho mas sencillo crear una app usando componentes de ReactJS que se conectan a la DB directamente junto con supabase, por ejemplo usando la forma nativa de HTML para enviar los actions de un form, cuando lo hize realmente me soprendió lo rápido que es desarrollar.
TurboRepo: La configuración es realmente sencilla, venia usando NX en proyectos empresariales y queria darle una oportunidad a esta otra herramienta, consigues lo mismo que NX pero realmente es muy sencillo.
Tailwindcss: Para iniciar, no me gusta el CSS, y para enviar crear estilos por mi propia cuenta, me incliné por css.
Shadcn: Esta fue una de las mejores decisiones, porque combina la parte de reutilizar componentes, y el crearlos desde cero, esta herramienta te genera el componente desde cero, permitiendote ver todo el código, aprender, y personalizar fácilmente y es totalmente compatible con tailwindcss.
Clerk: Para evitar crear la pate de autenticación de cero, te permite gestionar los usuarios, brinda diferentes formas de autenticar, te proporciona una panel para gestion de cuenta, los botones, etc. Tu solo configuras el provider y listo, el problema es que su precio es de 20$ y Supabase ya te permite configurar la autenticación pero tienes que escribir más código, así que basado en tu presupuesto puedes usar supabase tambien.

Vercel: Para configurar environments, fue muy sencillo poder asociar mi dominio con vercel y configurar subdominios con unos pocos clicks, si hubiera hecho esto desde cero por mi cuenta tendría que configurar https y agregar certificados validos con wildcards para soportar subdominios, aquí te permite crear subdominios con un certificado básico pero funciona para la version inicial de tu app.
Namecheap: Ya tengo experiencia configurando las partes de básicas del dominio, subdomini, correo con google, etc.
Google
Para usar los servicios de correo de google, ya lo he configurado con namecheap, y es relativamente barato para iniciar y tener un correo profesional.
Docker:
No fue opcional, ya que es requerida por supabase para poder usarlo localmente.

Motivación

Quería probar nuevas tecnologías.
Quería crear un MVP.
"Repentinamente" me quedé sin proyecto y ahora la idea del MVP no era opcional, pero es lo contaré en otro post.

Aplicación

La aplicación es una web app, la idea inicial seria o es una app para digitalizar los menús en los restaurantes, los restaurantes podrían configurar los productos, sus precios, etc, agregar sucursales y asociar productos a sucursales. Parte de la idea inicial era que los consumidores pudieran ordenar desde la app, pero eso añadía una capa de complejidad que iba a demorar el lanzamiento del MVP, así que eso pasa a una segunda iteración

Backoffice para restaurantes

Aplicación de meńu para consumidores

Criterios de decisión

Queria que lo básico o repetitivo estuviera casi que por defecto, y asi poder practicar y aprender cosas nuevas o que casi no hago en mi trabajo regular.

Todo parte de la idea del MVP, lo cual de base necesitaba tecnologías que me permitieran iterar rápido.
Tecnologías que me exigieran un poco más de conocimiento, en areas que no estoy familiarizado, como real-time, monorepositorios, Github actions, etc y a la vez usar las que ya conozco para no perder tiempo en eso.
No queria perder tiempo en configuraciones repetitivas como autenticación, configuración de base de datos, APIs para un CRUD, etc.
Necesitaba que el stack me permitiera tener buen performance por defecto.
No quería perder tiempo en CSS y escribiendo estilos desde cero, ni crear componentes básicos desde cero, como botones, formularios, etc.

Conclusión

Si hoy alguien me preguntara que tecnologías recomiendo para inciar un MVP, destacaría 2: Supabase y NextJS, el resto puede variar.

He grabado un video en el cual muestro un poco la aplicación: https://youtu.be/fyOKg2mjpTo
Configuración de dominios y subdominios con Namecheap y Vercel: https://youtu.be/IY05UEV6DJY

Introduction to Kubernetes (notes 1).

Enmanuel Jarquín — Thu, 12 Sep 2024 00:45:02 +0000

Course:
https://cloudacademy.com/course/introduction-to-kubernetes/introduction/?context_id=92&context_resource=lp

Kubernetes is a container orchestration tool.

Clusters: refers to all of the machines collectively and can be thought of as the entire running system.
Nodes are the machines in the cluster.
Nodes are categorized as workers or masters
Worker nodes include software to run containers managed by the Kubernetes control plane.
Master nodes run the control plane
The control plane is a set of APIs and software that Kubernetes users interact with.
The APIs and software are referred to as master components

Scheduling:

Control plane schedules containers onto nodes.
Scheduling decisions consider required CPU and other factors.
Scheduling refers to the decision process of placing containers onto nodes.

Kubernets Pods:
**- Containers are grouped onto pods.

Pods can include one or more containers.
All containers in a pod run on the same node.
Pods are the smallest building block in Kubernetes

Services:

Services define networking rules for exposing groups of Pods
- To other pods
- To the public Internet
Use labels to select a group of Pods.
Service has a fixed IP address.
Distribute requests across Pods in the group.

Kubernetes Deployments:
Manage deploying configuration changes to running Pods.

Pods:

Pods are Kubernetes' basic building block
Declare Pods and other resources in manifest files
metadata includes name and labels
Pod spec include container names, images
Containers communicate over localhost within a Pod
kubectl logs
logs record what's written to standard output and standard error
Horizontal scaling.

Introduction to Kubernetes (notes 2)

Enmanuel Jarquín — Thu, 12 Sep 2024 00:44:33 +0000

Interacting with Kubernetes:

Method 1:

It is possible but not common to work directly with the API server
You might need to if there is no Kubernetes client library for your programming language.

Method 2: Client libraries

Handles authenticating and managing individual REST API requests and responses.
Maintains official client libraries

Method 3: kubectl

Issue high-level commands that are translated into REST API calls.
Wors with local and remote clusters
Manages all different type of Kubernetes resources, and provides debugging and introspection features.

Method 4: Web Dashboard

Pods

What are Pods?

Basic building block in Kubernetes
One or more containers in a Pod
Pod containers all share a container network
One IP address per Pod

Because Pods include containers, the declaration of a Pod includes all the properties that you would expect for example with Docker run.

Manifest Files

Declare desired properties.
Manifests can describe all kinds of resource
The spec contains resource-specific properties.

Probes:

Used to check when a pod is ready to serve traffic/handle requests
Userful after startup to check external dependencies.
Readiness Probes set the Pods's ready condition. Services only send traffic to ready Pods.
Can be declared in a Pod's containers
All cotainer probes must pass for the Pod to pass
Probe actions can be a comand that runs in the container, an HTTP GET request, or opening a TCP socket.

Liveness Probes:

Detect when a Pod enters a broken state.
Kubernetes will restart the pod for you.

Init Containers:
Motivation for Init Contianers:

Sometimes you need to wait for a service, downaloads , dynamic or decisions before starting a Pods's containers.
Prefer to separate initialization logic from the container image.
Initialization is tightly coupled to the main application (belongs in the Pod)
Kubernetes provides us with Init Containers that allow you to run initialization tasks before starting the main container(s)

Init Containers:

Pods can declare any number of init containers
Init Containers run in order and to completion

User their own images
Easy way to blcok or delay startring an application.
Run every time a Pod is created
They have the same fields as regular containers, except for readinessProbe.

In short, Init Contianers allow you to perform tasks before main application containers have an opportunity to st art.
They are useful for checking preconditions and preparing dependencies.

Volumes:

Volumenes are tied to a pod and their lifecycle.
Share data between containers and tolerate container restarts
Use for non-durable storage that is deleted with the Pod.
Default Volumen type is emptyDir
Data is lost if Pod is rescheduled on a different node.

ConfigMaps and Secrets:
ConfigMaps and secrets separte configuration data from pod specs or what would otherwise be stored in container images.

Both store data as key-value pairs.
Secrets are for sensitive data.

Vagrant and VMWare Fusion in Mac M1

Enmanuel Jarquín — Sat, 20 Jul 2024 04:51:05 +0000

Notes about installing Vagrant and VMWare Fusion on my Mac M1 with Sonoma.

I tried to install Vagrant along with Virtual Box on my Mac M1, but I got several errors. So I decided to use VMWare leveraging I already use it with Windows 11.

Install VMWare, this is my current version:

Download Vagrant and install it, I saw that you can install it via the command line using brew. I just used the package that I downloaded from here: https://developer.hashicorp.com/vagrant/install
My current version is: 1.0.22
Install Vagrant utility for VMWare:
Vagrant Utility
At the minute of writing down these notes the version I installed and that worked for is: 1.0.22
Install the vagrant plugin, just open the terminal and execute this command: vagrant plugin install vagrant-vmware-desktop
I restarted my system just in case.
Verify vagrant was installed: vagrant --version
Open VMWare and keep it open, just in case.
Create a new directory, and create a new Vagrant file: Vagrantfile.
Copy and paste this code:

Vagrant.configure("2") do |config|
config.vm.box = "spox/ubuntu-arm"
config.vm.box_version = "1.0.0"
end


10. Run: `vagrant up` on the directory of the newly file.
11. Add network configuration:

Vagrant.configure("2") do |config|
config.vm.box = "spox/ubuntu-arm"
config.vm.box_version = "1.0.0"
config.vm.hostname = "testbox01"
config.vm.network "private_network", ip: "10.9.8.7"
end

12. I got an error saying something like: `Failed to create new device`
13. I found out that the error was that initialy I was using an old version of the vagrant utility for vmware: `1.0.21`, so I read this post:
https://github.com/hashicorp/vagrant/issues/12052
and there I saw that I needed to install the new version, in my case `1.0.22` which I mentioned on the point #3.

Kudos to this post: https://medium.com/@iamzamartech/create-and-manage-vms-with-vagrant-on-mac-m1-chip-d8b85eed082e, since most of the fixes or steps were taken from there.

Internationalization with Svelte and SvelteKit - Part 2

Enmanuel Jarquín — Tue, 04 Jul 2023 04:02:08 +0000

This is the second part of our previous article, you could find it here if you haven't seen it, yet.

Well, we have the locale variable with a hardcoded value, now we'll add a new file at the same level of the +layout.ts called +.layout.server.ts , here we will write the following content:

// +layout.server.ts
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = () => {
    return { locale: 'en' };
};

Then, we will change the content of the file +layout.ts to read the value that we are returning from +layout.server.ts

// +layout.ts
import type { LayoutLoad } from './$types';
import { loadLocaleAsync } from '../i18n/i18n-util.async';
import { setLocale } from '../i18n/i18n-svelte';

export const load: LayoutLoad = async (event) => {
- const locale = 'es';    
+ const locale = event.data.locale;
    await loadLocaleAsync(locale);
    setLocale(locale);

    return event.data;
};

Our app should work as always, but we are still using a hardcoded value, but the difference is that it comes from our second file.

What we want now is to read a locale from the URL or from the browser directly, then pass it to the file +layout.server.ts and this in turn will pass it to the +.layout.ts .

To accomplish the mentioned above, we need to add another file called hooks.server.ts but in this case in the src directory: src/hooks.server.ts

We are going to do something quite similar to what we did when we created the file +layout.server.ts, we are going to hardcode the lang but now in the file hooks.server.ts and within a function called handle that we should return.

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
    event.locals.locale = 'es';
    return resolve(event);
};

And in the file +layout.server.ts we need to read the object locals and its property locale:

// src/routes/+layout.server.ts
export const load: LayoutServerLoad = ({ locals }) => {
    return { locale: locals.locale };
};

If we change from es to en and vice-versa, everything should work as always.

Now to remove the hardcoded lang, we will make use of the params in the URL, one more time, go ahead to our file hooks.server.ts

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
- event.locals.locale = 'es';
+ const lang = event.url.searchParams.get('lang');
+ event.locals.locale = lang || 'en';
    return resolve(event);
};

To test it, we should modify the URL in the browser: http://localhost:5173/?lang=es, if any lang is passed, then it will show the default language, in this case english .

Perfect, now we can pass what language we want to use by specifying it in the URL

Reading the browser language

Now, we want to do is remove the default hardcoded language set as english and replace it with the default language from the browser, we should use the function initAcceptLanguageHeaderDetector in the file hooks.server.ts, so, let's do it:

// src/hooks.server.ts
const getPreferredLocale = ({ request }: RequestEvent) => {
  const acceptLanguageDetector = initAcceptLanguageHeaderDetector(request);
  return detectLocale(acceptLanguageDetector);
};

We must add some imports as well:

// src/hooks.server.ts
// import type { Handle } from '@sveltejs/kit';
+ import type { Handle, RequestEvent } from '@sveltejs/kit';
+ import { detectLocale, i18n, isLocale } from './i18n/i18n-util';
+ import { initAcceptLanguageHeaderDetector } from 'typesafe-i18n/detectors';

Then, we need to update the function handle:

// src/hooks.server.ts
export const handle: Handle = async ({ event, resolve }) => {
    const lang = event.url.searchParams.get('lang');

// event.locals.locale = lang || 'en';
+ event.locals.locale = lang || getPreferredLocale(event);

    return resolve(event);
}

Now in my case, I have Spanish as my default language in Chrome:Settings/Languages

If I don't pass any language in the URL, it will read this default language from the browser directly.

Cool!, We are almost done, but there is still an improvement that we could do, for example, if I pass the lang param via the URL but it doesn't exist in my configuration, it won't read the default browser language because the param lang in the URL was set, but it is an invalid lang, if we leave it as it is so right now we will get a pretty 500 error:

http://localhost:5173/?lang=ed

Well to fix that we could add validation for the lang that was provided to us:

// src/hooks.server.ts
import type { Locales } from './i18n/i18n-types';

export const handle: Handle = async ({ event, resolve }) => {
    ...    
    const locale = isLocale(lang as Locales) ? (lang as Locales) : getPreferredLocale(event);
    event.locales.locale = locale;
    ....
}

And that's how we fixed it, we use isLocale to validate the lang, if it is a valid lang, then we use it as a value of locale if not, then we read it from the default browser lang.

In our next post, we are going to add a button or link to switch the language, that will be our third option to use this feature. See you there and happy coding!

Internationalization with Svelte and SvelteKit - Part 1

Enmanuel Jarquín — Tue, 27 Jun 2023 03:25:59 +0000

Internationalization support could be an easy task, you can easily create objects and then get the proper language by a key, but if you want to create a solid project in the long run, sooner or later you are going to have to face some challenges.

There are some options to set the proper language of a site, it could be by reading a query param from the URL or getting the browser lang config, or by selecting it from a select or dropdown component.

I played with two different libraries:

The one I liked was the second one, typesafe-i18n, it includes a lot of features out-the-box, so on this occasion, I would like to walk you through the installation of this tool to create a multi-language app.

First and foremost, create a svelte-kit project:

npm create svelte@latest i18n-sveltekit

Some of the options that I selected are shown in the image below:

Installing and configuring typesafe-i18n

npm install -D typesafe-i18n

Next, we need to run the setup process, we can do it by a manual process by answering questions or generating the configuration automatically, so we are going for the automatic setup:

npx typesafe-i18n --setup-auto

That command will generate the file .typesafe-i18n.json, we will ensure that we have the key adapter=svelte, like so:

{
   "adapter": "svelte",
   "$schema": "https://unpkg.com/typesafe-i18n@5.24.3/schema/typesafe-i18n.json"
}

and our package.json file was updated with a new script:

"scripts" {
  ...,
  "typesafe-i18n": "typesafe-i18n"
}

Let's run it and see what happens:

npm run typesafe-i18n

If we open the project structure again, we are going to find out that we have new folders and files inside of them:

That command/script generated all the configuration we need to support the internationalization feature in our app, but there are still some steps that we need to do to customize how we are going to switch between languages.

Running the app and typesafe-i18n

typesafe-i18n needs to update the files seen above, so it will work in real-time since it generates types, configurations, etc, at the same time we are running our development server, that being said, let's install another package to accomplish that.

npm install npm-run-all -D

Then, we will update our package.json

- "dev": "vite dev",
+ "dev": "npm-run-all --parallel typesafe-i18n vite:dev",
+ "vite:dev": "vite dev",

Now, if we run the script npm run dev , you will see that our script runs the typesafe-i18n configuration and our development server.

Let's get down to the nitty-gritty

Now we can start adding support for english by default:

Head to the file src/i18n/en/index.ts and add a new key that says welcome:
```
{
  ...,
  welcome: 'to your new SvelteKit app'
}
```
When you save it, you will immediately see a change in the file src/i18n/i18n-types.ts where our welcome key was added, so, that will help us a lot to autocomplete our objects in real-time thanks to typesafe-i18n and typescript.
Let's create a +layout.ts file inside of src/routes/ with the following content:

import type { LayoutLoad } from './$types';
import { loadLocaleAsync } from '../i18n/i18n-util.async';
import { setLocale } from '../i18n/i18n-svelte';

export const load: LayoutLoad = async (event) => {
    const locale = 'en';
    await loadLocaleAsync(locale);
    setLocale(locale);

    return event.data;
};

We set locale to en manually, but we are going to change it in a few minutes, for now, what we are interested in is being able to load our basic configuration and test if it is working.

In our src/routes/+page.svelte let's locale the line that says to your new SvelteKit app , and we will change with this new line:

First, add this import:

import { LL } from '../i18n/i18n-svelte';

Then, change the line and add this content instead:

{$LL.welcome()}

With that change placed, you should be able to see the text in a single line in your app:

Before:

After:

You will notice that the text now is occupying a single line instead of two, we need to fix that, but what matters here is the fact that our internationalization config is working and we can add a new language, let's add support for spanish .

Adding support for Spanish

Remove the unused directory src/i18n/de '
Add this folder and its index file: src/i18n/es/index.ts
Add the following content:

import type { Translation } from '../i18n-types';

const es = {
    welcome: 'a tu nueva aplicacion en SvelteKit'
} satisfies Translation;

export default es;

Let's change the locale variable of our src/routes/+layout.ts file:
```
- const locale = 'en';
+ const locale = 'es';
```

Now, you will see that text in our app is shown in Spanish:

Our multi-language app is almost ready, but we still need to add a way to change the language dynamically and allow users to change it manually, since what we have to do to accomplish it is by changing the locale variable to switch between english and spanish , so let's do it in the second part.

Tools for my web development env

Enmanuel Jarquín — Tue, 20 Jun 2023 02:34:46 +0000

Original Post: https://enmanueljarquin.com/tools-for-my-web-development-env

I enjoy working using my terminal on Mac, so I would like to write down and share some tools I use daily.

I don't pretend to explain how to install and/or configure them since there are lots of steps that I would need to share, so the easiest way for me to share it is via the GitHub repo.

Basic configuration with default configuration for React support:

https://github.com/TheEnmanuel23/development-config/tree/master

Extra configuration with Svelte support:

https://github.com/TheEnmanuel23/development-config/pull/1

Iterm2 along with Tmux

To manage terminal sessions, tabs, panels, etc. I use it with tmux-theme pack plugin to add some plugins and configure them, for example, I use the theme powerline/default/cyan via jimeh/tmux-themepack.

NVIM

Here some basic plugins help us to pave the way for the rest of the plugins that I am going to mention below.

Lua
Packer
LSP
Mason

1 Basic NVIM plugins

Packer: Packer manager written in Lua
Neosolarized: Optional nvim theme, I sometimes change it to use nightfly theme, I am not using it for now, since I use nightfly .
Vim-tmux-navigator: Consistent way to navigate between tmux and vim panels.
Maximize: Toggle maximizing the current neovim window without any of the ugly borders that other.
Surround: To surround selection by using some extremely useful keys.
Comment: To comment snippets.
Plenary: Common utilities, some plugins require it.
Hop: To jump anywhere in the current buffer by highlighting words, lines, etc.
Web-devicons: Help to add icons to various plugins, like nvim tree, telescope, file browsers, etc.
Lualine: Statusline for nvim written in Lua.
Telescope: It is an awesome finder over lists.
Telescope file browser: It is telescope extension that acts as a file browser, it allows us shortcuts to create, delete, rename and move files or folders. It could be used as a nvim-tree alternative.
nvim-colorizer: To highlight colors of css files for example.
gitsigns: Git decorations on the vertical bar of the left section of a nvim panel that shows indicators based on the git status.
Toggleterm: To show floating terminals or multiple orientations during an editing session.
vim-nightfly-colors: Dark nvim theme, as an alternative for neosolarized theme. I am using it right now.
startup: A customizable startup window.

2 Autocompletion nvim plugins:

3 Snippets nvim plugins:

LuaSnip
[cmp_luasnip]https://github.com/saadparwaiz1/cmp_luasnip)
[friendly-snippets (https://github.com/rafamadriz/friendly-snippets)

4 Auto closing nvim plugins:

5 Lsp servers to support typescript, react, tailwindcss and svelte:

neovim/nvim-lspconfig
hrsh7th/cmp-nvim-lsp: nvim-cmp source for neovim's built-in LSP
glepnir/lspsaga.nvim: With an enhanced UI, this helps us to configure shortcuts and popups to navigate our code by jumping to functions or variable definitions, renaming variables, fixing imports, among other benefits.
onsails/lspkind-nvim: Used to show icons to autocompletion windows or popups.
jose-elias-alvarez/typescript.nvim: Add further functionalities for typescript server like renaming a file or updating imports, etc.
nvim-treesitter/nvim-treesitter: It provides us a better interface for neovim with some basic functionalities such as highlighting.

6 To install LSP plugins using Mason: It helps to map, and install lsp-servers, linters and formatters, besides it helps us to register setup hooks with lspconfig, it is a complement for LSP, it acts as a bridge, closing some gaps between mason and lspconfig.

7 Formatting and linting:

jose-elias-alvarez/null-ls.nvim: To have code diagnostics, code actions, etc.
jay-babu/mason-null-ls.nvim: A better way to interact with mason and null-ls.

Other tools

Yabai: Yabai is a window management utility for mac.

Min: As my default browser for things that have nothing to do with development, to develop I use Chrome for its dev-tools.

I have it configured to use vim shortcuts to facilitate the navigation as the same way I would do with a vim buffer or file.

https://github.com/PalmerAL/min-vim-mode

Ratcast: My default spotlight option, it is an awesome tools, since you can configure basically whatever you want, e.g.

I configured it to check my JIRA's ticket's status without opening a new chrome tab.
To pick a color from anywhere in the screen
With google translate, I am not a native english speaker, so sometimes I need to figure out the meaning of the word, so with tool I don't need to open chrome or anther browser to open google translate.
To create floating notes
To check my github repositories
To check my agenda based on my default calendar.
To install packages with brew
To interact with spotify
etc, etc, etc

Those are some tools I use for my development environment and that I use daily.

I would like to thank Josean Martinez, I learned a lot watching his videos, and I strongly recommend following him, he has an awesome youtube channel. https://www.youtube.com/@joseanmartinez

Autosuggestions with oh-my-zsh

Enmanuel Jarquín — Mon, 20 Dec 2021 06:29:16 +0000

New Macs already include zsh by default, so what we only need is to run the following command:

Install oh-my-zsh

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

The first step created us the following the /.oh-my-zsh directory

echo $ZSH_CUSTOM
>> /Users/<your home directory>/.oh-my-zsh/custom

Install autosuggestions plugin

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

That command will copy the zsh-autosuggestions repo into /Users/<your home directory>/.oh-my-zsh/custom/plugins

Now we are going to add new plugin by opening the file ~/.zshrc and add the zsh-autosuggestions plugin without commas

plugins=( 
    # other plugins...
    zsh-autosuggestions
)

Restart your terminal and now when you type a command that you used previously you will see that now it will auto suggest you using a gray text.