DEV Community: Francisco Zapata

How to get ESLint 9.11.1 to run in Vue 3

Francisco Zapata — Fri, 27 Sep 2024 05:03:09 +0000

Last September 23rd the ESLint team released the new version, 9.11.1.

As we grow as developers and try to take care of good practices and, in my case, trying to follow the recommendations of the Vue Core Team to develop Vue.js projects, we create habits that lead us to do some things automatically.

My routine when creating a new Vue project is to choose the configuration that you can see in the following image:

Once I finish creating the project, I access the directory, run npm install, run ncu -u to update all the dependencies to their latest versions, and run npm install again.

As of today (September 27, 2024), when you create the scaffold of a new project in Vue, the package.json file looks like this:

{
  "name": "new-vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "jsdom": "^24.1.0",
    "npm-run-all2": "^6.2.0",
    "prettier": "^3.2.5",
    "typescript": "~5.4.0",
    "vite": "^5.3.1",
    "vite-plugin-vue-devtools": "^7.3.1",
    "vitest": "^1.6.0",
    "vue-tsc": "^2.0.21"
  }
}

If you run 'npm-check-updates' (ncu, without the '-u' flag) it gives you a report similar to the following:

Checking /home/drfcozapata/vue.js/new-vue-project/package.json
[====================] 22/22 100%

 @rushstack/eslint-patch     ^1.8.0  →  ^1.10.4
 @types/node               ^20.14.5  →  ^22.7.3
 @vitejs/plugin-vue          ^5.0.5  →   ^5.1.4
 eslint                     ^8.57.0  →  ^9.11.1
 eslint-plugin-vue          ^9.23.0  →  ^9.28.0
 jsdom                      ^24.1.0  →  ^25.0.1
 npm-run-all2                ^6.2.0  →   ^6.2.3
 pinia                       ^2.1.7  →   ^2.2.2
 prettier                    ^3.2.5  →   ^3.3.3
 typescript                  ~5.4.0  →   ~5.6.2
 vite                        ^5.3.1  →   ^5.4.8
 vite-plugin-vue-devtools    ^7.3.1  →   ^7.4.6
 vitest                      ^1.6.0  →   ^2.1.1
 vue                        ^3.4.29  →   ^3.5.9
 vue-router                  ^4.3.3  →   ^4.4.5
 vue-tsc                    ^2.0.21  →   ^2.1.6

Run ncu -u to upgrade package.json

Where it is clearly seen that you can update Vue.js from version 3.4.29 (default still) to 3.5.9 (the latest at the time of writing this post) and you can update eslint from version 8.57.0 to 9.11.1 (also the latest at the time of writing this post), among other possible updates.

In this opportunity, as is my habit, I ran ncu -u and this updated everything automatically, not considering the surprise of the radical changes that brings the new version of the powerful ESLint.

But before we get to that point, we have to answer an important question...

Why should you use ESLint in your Vue.js projects?

ESLint is a linter, and a linter is a “static analysis” tool used to identify and point out errors, style issues and possible bugs in source code, among which we can mention:

Error detection: linters can find common errors in the code, such as unused variables, syntax errors and logic problems, among others.
Code styling: linters help maintain a consistent coding style by pointing out deviations from established conventions, such as indentation, use of quotation marks and/or semicolons, function formatting, etc.
Improve code quality: linters help improve overall software quality and facilitate maintenance by identifying potential problems before the code is executed.
Integrate workflows: linters are often integrated into code editors and build systems, allowing instant feedback while writing code.

What are these radical changes brought by the new version of ESLint?

ESLint version 9.0.0 brings some radical changes compared to previous versions. Two of the most important changes we can mention are the following:

Versions lower than 18.18 and 19 of Node.js are not supported by this new version.

The new version of ESLint supports the following versions of Node.js:

Node.js v18.18.0 and above.
Node.js v20.9.0 and higher
Node.js v21 and higher

So, we must take into consideration the version of Node we are running. I still recommend the use of the NVM (Node Version Manager) tool and the subsequent installation of Node through it if you work with legacy code and you need to run a specific version of Node, as in my case.

New default configuration format

As of ESLint v9.0.0, 'eslint.config.js' is the new default configuration format; the previous format (.eslintrc.js) is no longer used and will not automatically be searched for.

And this was the point that I was unaware of and that had me quite a while trying to fix the problem, which was no problem at all in the end.

In addition, many other important changes were incorporated:

Several formatters that were used internally by ESLint were removed.
The require-jsdoc and valid-jsdoc rules were removed.
Enabled 4 new rules (no-constant-binary-expression, no-empty-static-block, no-new-native-nonconstructor and no-unused-private-class-members) and removed 4 others (no-extra-semi, no-inner-declarations, no-mixed-spaces-and-tabs and no-new-symbol) in eslint:recommended.
When using the --output-file flag the file is written to disk, even if the output is empty.
Changed the way of writing rules related to '/*exported */'.
Made the schemas of some rules stricter.
And many other changes.

If you remember the package.json file I posted earlier, it contains a line with the following code:

    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",

Well, surprise! Because of all the changes, that line no longer works if you upgrade to the new version.

Similarly, the '.eslintrc.cjs' file containing the following code doesn't work either!

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

What to do if you want to continue using ESLint in your Vue 3 projects with the latest versions of all dependencies?

The answer is extremely simple, although I had to read quite a bit to get to it:

Create the new project using npm create vue@latest.
Access the project directory and run npm install.
Run ncu -u to update the dependencies.
Run npm install again.
Open your code editor and delete the '.eslintrc.cjs' file.
Run the following command: npm init @eslint/config@latest. This command runs a script that allows you to create the new configuration for ESLint and create the necessary new files. In my case, I select:
- How would you like to use ESLint? To check syntax and find problems,
- What type of modules does your project use? CommonJS (require/exports),
- Which framework does your project use? Vue.js,
- Does your project use TypeScript? Yes,
- Where does your code run? Browser,
- The config that you've selected requires the following dependencies: eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-vue. Would you like to install them now? Yes,
- Which package manager do you want to use? npm
Modify the line in the 'package.json' file so that it looks like this: “lint”: “eslint . --fix".

All of the above led to create the new 'eslint.config.js' file with the following code:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];

From here you can run npm run lint with confidence, without getting a bunch of warnings and errors in the console.

I hope the above information will be useful for you and avoid wasting the time I wasted trying to solve this breacking-change.

Much success and blessings from Venezuela.

Cómo hacer que ESLint 9.11.1 funcione en Vue 3

Francisco Zapata — Fri, 27 Sep 2024 04:09:59 +0000

El pasado 23 de septiembre el equipo de ESLint liberó la nueva versión, la 9.11.1.

En la medida en la que vamos creciendo como desarrolladores y procuramos cuidar las buenas prácticas y, en mi caso, tratando de seguir las recomendaciones del Vue Core Team para desarrollar proyectos de Vue.js, vamos creando hábitos que nos llevan a hacer algunas cosas automáticamente.

Mi rutina al crear un nuevo proyecto de Vue es elegir la configuración que se puede ver en la siguiente imagen:

Una vez termino de crear el proyecto, accedo al directorio, ejecuto npm install, ejecuto ncu -u para actualizar todas las dependencias a sus últimas versiones, y vuelvo a ejecutar npm install.

Al día de hoy (27 de septiembre de 2024), cuando creas el scaffold de un nuevo proyecto en Vue, el archivo 'package.json' luce de la siguiente manera:

{
  "name": "new-vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "jsdom": "^24.1.0",
    "npm-run-all2": "^6.2.0",
    "prettier": "^3.2.5",
    "typescript": "~5.4.0",
    "vite": "^5.3.1",
    "vite-plugin-vue-devtools": "^7.3.1",
    "vitest": "^1.6.0",
    "vue-tsc": "^2.0.21"
  }
}

Si ejecutas 'npm-check-updates' (ncu, sin la bandera '-u') te entrega un reporte similar al siguiente:

Checking /home/drfcozapata/vue.js/new-vue-project/package.json
[====================] 22/22 100%

 @rushstack/eslint-patch     ^1.8.0  →  ^1.10.4
 @types/node               ^20.14.5  →  ^22.7.3
 @vitejs/plugin-vue          ^5.0.5  →   ^5.1.4
 eslint                     ^8.57.0  →  ^9.11.1
 eslint-plugin-vue          ^9.23.0  →  ^9.28.0
 jsdom                      ^24.1.0  →  ^25.0.1
 npm-run-all2                ^6.2.0  →   ^6.2.3
 pinia                       ^2.1.7  →   ^2.2.2
 prettier                    ^3.2.5  →   ^3.3.3
 typescript                  ~5.4.0  →   ~5.6.2
 vite                        ^5.3.1  →   ^5.4.8
 vite-plugin-vue-devtools    ^7.3.1  →   ^7.4.6
 vitest                      ^1.6.0  →   ^2.1.1
 vue                        ^3.4.29  →   ^3.5.9
 vue-router                  ^4.3.3  →   ^4.4.5
 vue-tsc                    ^2.0.21  →   ^2.1.6

Run ncu -u to upgrade package.json

Donde se ve claramente que puedes actualizar Vue.js de la versión 3.4.29 (por defecto aún) a la 3.5.9 (la última al momento de escribir este post) y puedes actualizar eslint de la versión 8.57.0 a la 9.11.1 (también la última al momento de escribir este post), entre otras actualizaciones posibles.

En esta oportunidad, como es mi costumbre, ejecuté ncu -u y esto actualizó todo de forma automática, no contando con la sorpresa de los cambios radicales que trae la nueva versión del potente ESLint.

Pero antes de entrar a ese punto, tenemos que dar respuesta a una pregunta importante...

¿Por qué deberías usar ESLint en tus proyectos de Vue.js?

ESLint es un linter, y un linter es una herramienta de "análisis estático" que se usa para identificar y señalar errores, problemas de estilo y posibles bugs en el código fuente, entre los cuales podemos mencionar:

Detección de errores: los linters pueden encontrar errores comunes en el código, como variables no utilizadas, errores de sintaxis y problemas de lógica, entre otros.
Estilar el código: los linters ayudan a mantener un estilo de codificación consistente al señalar desviaciones de las convenciones establecidas, como la indentación, el uso de comillas y/o punto y coma, el formato de funciones, etc.
Mejorar la calidad del código: los linters contribuyen a mejorar la calidad general del software y facilitan el mantenimiento al identificar problemas potenciales antes de que el código se ejecute.
Integrar los flujos de trabajo: a menudo los linters se integran en editores de código y sistemas de construcción, lo que permite recibir retroalimentación instantánea mientras se escribe el código.

¿Cuáles son esos cambios radicales que trae la nueva versión de ESLint?

La versión 9.0.0 de ESLint presenta algunos cambios radicales en relación a las versiones anteriores. Dos de los cambios más importantes que podemos mencionar son los siguientes:

Las versiones inferiores a la 18.18 y la 19 de Node.js no son soportadas por esta nueva versión.

La nueva versión de ESLint soporta las siguientes versiones de Node.js:

Node.js v18.18.0 y superior
Node.js v20.9.0 y superior
Node.js v21 y superior

Por lo cual, debemos tener en cuenta la versión de Node que estamos ejecutando. Yo sigo recomendando el uso de la herramienta NVM (Node Version Manager) y la instalación posterior de Node a través de éste si trabajas con código legado y te ves en la necesidad de ejecutar alguna versión específica de Node, como es mi caso.

Nuevo formato de configuración por defecto

A partir de ESLint v9.0.0, 'eslint.config.js' es el nuevo formato de configuración predeterminado; el formato anterior (.eslintrc.js) ya no se utiliza y no se buscará automáticamente.

Y este era el punto que yo desconocía y que me tuvo un buen rato tratando de solucionar el problema, que no era ningún problema al final.

Adicionalmente, se incorporaron muchos otros cambios importantes:

Se eliminaron varios formateadores que eran usados internamente por ESLint.
Se eliminaron las reglas require-jsdoc y valid-jsdoc.
Se habilitaron 4 nuevas reglas (no-constant-binary-expression, no-empty-static-block, no-new-native-nonconstructor y no-unused-private-class-members) y se eliminaron otras 4 (no-extra-semi, no-inner-declarations, no-mixed-spaces-and-tabs y no-new-symbol) en eslint:recommended.
Cuando se usa la bandera --output-file se escribe el archivo en el disco, incluso si la salida está vacía.
Se cambió la manera de escribir las reglas relacionadas con '/* exported */'.
Se hicieron más estrictos los esquemas de algunas reglas.
Y muchos otros cambios más.

Si recuerdas el archivo 'package.json que publiqué antes,éste contiene una línea con el siguiente código:

    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",

Pues, ¡sorpresa! A raíz de todos los cambios, esa línea ya no funciona si actualizas a la nueva versión.

De igual manera, el archivo '.eslintrc.cjs' que contiene el siguiente código ¡tampoco funciona!:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

¿Qué hacer si deseas seguir usando ESLint en tus proyectos de Vue 3 con las últimas versiones de todas las dependencias?

La respuesta es sumamente sencilla, aunque tuve que leer bastante para llegar hasta ella:

Crea el nuevo proyecto usando npm create vue@latest
Accede al directorio del proyecto y ejecuta npm install
Ejecuta ncu -u para actualizar las dependencias
Vuelve a ejecutar npm install
Abre tu editor de código y elimina el archivo '.eslintrc.cjs'
Ejecuta el siguiente comando: npm init @eslint/config@latest. Este comando ejecuta un script que te permite crear la nueva configuración para ESLint y crear los nuevos archivos necesarios. En mi caso, yo selecciono:
- ¿Cómo te gustaría usar ESLint? To check syntax and find problems,
- ¿Qué tipo de módulos usa tu proyecto? CommonJS (require/exports),
- ¿Qué tipo de framework usa tu proyecto? Vue.js,
- ¿Tu proyecto usa TypeScript? Yes,
- ¿Dónde se ejecuta tu código? Browser,
- La configuración que has seleccionado requiere las siguientes dependencias: eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-vue. ¿Quieres instalarlas ahora? Yes,
- ¿Cuál manejador de paquetes quieres usar? npm
Modifica la línea en el archivo 'package.json' de forma que quede así: "lint": "eslint . --fix".

Todo lo anterior condujo a crear el nuevo archivo 'eslint.config.js' con el siguiente código:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];

A partir de aquí puedes ejecutar npm run lint con toda confianza, sin que te salten un montón de advertencias y errores en la consola.

Espero que la información anterior te sea útil y te evite perder el tiempo que yo perdí tratando de solucionar este breacking-change.

Mucho éxito y bendiciones desde Venezuela.

Everything about CSS

Francisco Zapata — Fri, 10 Feb 2023 01:21:36 +0000

A few minutes ago I logged into the Slack of my community (Academlo) and I came across a question that immediately caught my attention:

"Can you recommend me a CSS book, that has all the commands, to learn them".

The question is evidently asked by one of the new students. At the time it was also my concern and I am sure it was that of many who will read me.

And it didn't only happen to me with CSS; it applies to any technology we learn when we take our first steps in this wonderful world of web development.

I wanted to know EVERYTHING, and to know it NOW, because I thought that way I would be a better developer.

A couple of years have passed since then. I have walked the path of web development at a professional level, and understood some details of our profession that allowed me to give an answer to this friend and that I will also share here with you.

My answer

I transcribe my response verbatim because I think it encompasses what any developer with some road walked would tell you when faced with a similar question:

"Hello XXXXXXXX!

Bro, it is impossible (literally speaking) to learn ALL the "commands" of any technology, and there is no point in doing so either. Let me explain...

CSS has a specific structure and syntax that you must know just because, and that is easy to understand and learn.

Within that structure, there is a group of PROPERTIES that are the ones you are going to use in 80% of the cases and another 20% that are going to be of occasional use (to make animations, transitions, etc.).

The first group (80%) comprise, at most, 30-40% of the total CSS properties. Those are the ones you learn by practicing day by day and become a regular part of your lexicon as a developer (margin, padding, text-align, etc.).

The second group (the other 20%) comprise the remaining 60-70%; obviously, the majority of CSS properties. Those are the ones we know exist, but we don't spend brain cells storing them in memory.

And how do I do when I need them? What all developers do in our daily work: when we don't know something, we google or go to specific sources where we know the information is. That is the greatest talent you will have to develop as a Web Developer: look for the right information and learn to read the official documentation of the different technologies.

In the case of CSS, the information is mainly found in 3 sources (although, of course, there are many others):

CSS documentation on MDN

CSS documentation on W3School

CSS Tricks

There you get EVERYTHING you need to know about CSS. However, there are specific things that you will want to do and you will have to google, because there is only the generality of CSS there.

Just as it happens with CSS, it will happen with the programming languages themselves: JavaScript, PHP, Node.js, Python, etc. There are general sites where the official documentation is condensed, but the details, tricks, examples of how to do something specific, you have to look for them.

Your best friends on this road will be Google, YouTube and Stack Overflow.

I hope I have helped you, I wish you success!

I conclude

Being a developer is not just about writing code and memorizing commands; it is much more.

Being a developer involves learning to generate mental processes that lead you to achieve an end: that "perfect" web site you designed in your mind.

Some things are written. The rest, most of it really, you will have to create it yourself. That's why we are DEVELOPERS and not just CODE TRANSCRIPTORS.

The developer imagines, thinks, analyzes and creates. Hence the motto I have on my wallpaper: "Think twice, Code once".

In that process, some things we do in "automatic", like writing some code segments that will be common to many things.

But... the wonder of this world and of our profession is that THE DEFINITIVE IS NOT WRITTEN. It is written by each of us when we open our favorite IDE, and it is built anew day after day.

Being a web developer means being part of a too dynamic profession.

For example, a couple of weeks ago I felt satisfied with my level of knowledge and command of Vue.js. I thought: "I already know one of the most modern, powerful and revolutionary JavaScript frameworks".

To my surprise, that same week I learned about the launch (and dizzying rise) of a new JavaScript framework: Qwik. So the road starts all over again - it never ends!

I think that's precisely the beauty of this profession. That the only constant thing is change.

Until the next publication. Blessings.

Todo sobre CSS

Francisco Zapata — Fri, 10 Feb 2023 01:05:20 +0000

Hace unos minutos ingresé en el Slack de mi comunidad (Academlo) y me encontré con una pregunta que captó de inmediato mi atención:

"Me pueden recomendar un libro de CSS, que tenga todos los comandos, para aprendérmelos".

La pregunta es realizada, evidentemente, por uno de los nuevos estudiantes. En su momento fue también mi inquietud y estoy seguro que fue la de muchos que me leerán.

Y no solo me pasó con CSS; se aplica a cualquier tecnología que aprendemos cuando damos nuestros primeros pasos en este maravilloso mundo del desarrollo web.

Yo quería saberlo TODO, y saberlo YA, porque pensaba que de esa forma sería mejor desarrollador.

Han pasado un par de años desde entonces. He transitado el camino del desarrollo web a nivel profesional, y entendido algunos detalles de nuestra profesión que me permitieron dar respuesta a este amigo y que voy a compartir también aquí con ustedes.

Mi Respuesta

Transcribo mi respuesta literal porque creo que abarca lo que cualquier desarrollador con algo de camino andado te diría ante una pregunta similar:

"¡Hola XXXXXX!

Bro, es imposible (literalmente hablando) aprender TODOS los "comandos" de cualquier tecnología, y no tiene sentido hacerlo tampoco. Me explico...

CSS tiene una estructura y una sintaxis específicas que debes conocer porque sí, y que es fácil de entender y aprender.

Dentro de esa estructura, hay un grupo de PROPIEDADES que son las que vas a utilizar en el 80% de los casos y otro 20% que van a ser de uso ocasional (para hacer animaciones, transiciones, etc.).

El primer grupo (el 80%) abarcan, como mucho el 30-40% de las propiedades totales de CSS. Esas son las que aprendes practicando día con día y llegan a hacerse parte regular de tu léxico como desarrollador (margin, padding, text-align, etc.).

El segundo grupo (el otro 20%) abarcan el 60-70% restante; evidentemente, la mayoría de las propiedades de CSS. Esas son las que sabemos que existen, pero no gastamos neuronas guardándolas en memoria.

¿Y cómo hago cuando las necesite? Lo que hacemos todos los desarrolladores en nuestro trabajo diario: cuando no sabemos algo, googleamos o vamos a fuentes específicas donde sabemos que está la información. Ese es el mayor talento que deberás desarrollar como Web Developer: buscar la información correcta y aprender a leer las documentaciones oficiales de las diferentes tecnologías.

En el caso de CSS, la información de encuentra fundamentalmente en 3 fuentes (aunque, evidentemente, hay muchas otras):

Documentación sobre CSS en MDN

Documentación sobre CSS en W3School

CSS Tricks

Allí consigues TODO lo que necesitas saber de CSS. Y sin embargo, hay cosas puntuales que vas a querer hacer y te va a tocar googlear, porque allí solo está la generalidad de CSS.

Así como sucede con CSS, te va a pasar con los lenguajes de programación propiamente dichos: JavaScript, PHP, Node.js, Python, etc. Hay sitios generales donde se condensa la documentación oficial, pero los detalles, trucos, ejemplos de cómo hacer algo específico toca buscarlos.

Tus mejores amigos en este camino van a ser Google, YouTube y Stack Overflow.

Espero haberte ayudado. ¡Mucho éxito!"

Concluyo

Ser desarrollador no es solo escribir código y memorizar comandos; es mucho más.

Ser desarrollador implica aprender a generar procesos mentales que te conduzcan a lograr un fin: ese sitio web "perfecto" que diseñaste en tu mente.

Algunas cosas están escritas. El resto, la mayoría realmente, deberás crearlas tú. Por esos somos DESARROLLADORES y no solo TRANSCRIPTORES DE CÓDIGO.

El desarrollador imagina, piensa, analiza y crea. De allí el lema que tengo en mi wallpaper: "Think twice, Code once".

En ese proceso, algunas cosas las hacemos en "automático", como el escribir algunos segmentos de código que serán comunes a muchas cosas.

Pero... la maravilla de este mundo y de nuestra profesión es que LO DEFINITIVO NO ESTÁ ESCRITO. Lo escribe cada uno de nosotros cuando abre su IDE preferido, y se vuelve a construir nuevamente día tras día.

Ser desarrollador web conlleva ser parte de una profesión demasiado dinámica.

Por ejemplo, hace un par de semanas me sentí satisfecho con mi nivel de conocimiento y manejo de Vue.js. Pensé: "Ya sé uno de los más modernos, poderosos y revolucionarios frameworks de JavaScript".

Para mi sorpresa, esa misma semana me enteré del lanzamiento (y vertiginoso ascenso) de un nuevo framework de JavaScript: Qwik. Así que el camino vuelve a empezar. ¡Nunca acaba!

Creo que eso es precisamente lo más hermoso de esta profesión. Que lo único constante es el cambio.

Hasta la próxima publicación. Bendiciones.

New features of VScode v1.75

Francisco Zapata — Mon, 06 Feb 2023 19:41:02 +0000

Versión en Español

Today I received the notification of the new version of VScode, v1.75, and I immediately (as I always do) installed it.

VScode never ceases to amaze and definitely tends to position itself as the gold standard of the word processors that programmers use, although it almost looks like an IDE.

Let's quickly review the most outstanding (because there are too many for a single post) of these new features.

Profiles

What caught my attention the most in this new version is the possibility to create different PROFILES.

Now we can create profiles for different development scenarios, and have "different VScode configurations based on workflow" and we can "open multiple workspaces (folders) with different profiles applied simultaneously".

Integrated Live Preview

As they did at the time when they incorporated the bracket colorizer, this new version brings the new directive livePreview.customExternalBrowser which means the incorporation of an integrated way to the IDE of the Live Preview, for those who are used to the "Go live" of the Live server extension and similar, also allowing to select the browser to use by default or at any time.

Workbench (Workbench)

This new version allows to resize several views at the same time by dragging the common corners:
Example video here

New Preferences Menu

Version 1.75 brings a completely reorganized and more logically presented preferences menu.

Confirmation to open large files remotely

For those of us who work remotely (via SSH tunnels or others) it is important to "not open" large files when we stand on them, because of the resource consumption that this causes.

This new version limits the accidental opening of such files and allows to configure this feature through the new workbench.editorLargeFileConfirmation directive.

Keyboards shortcut editor improvements

The shortcut editor now displays the extension that contributes to each shortcut, allowing you to edit and produce changes to the extensions themselves, in addition to other improvements.

Configuring the shell environment resolution timeout

Many of us have encountered when opening the program the warning that the shell environment resolution timeout has expired, and we are left not knowing what to do, other than restarting it.

The new application.shellEnvironmentResolutionTimeout directive (macOS and Linux only, for now) allows you to increase the shell environment resolution timeout when necessary.

Editor selection mode suggestion

The new editor.suggest.selectionMode directive now allows to configure whether intellisense suggestions are selected automatically (Enter or Tab) or by trigger characters.
Example video here

Redesigned inline suggestions toolbar

More compact and intuitive, the inline suggestions toolbar now has buttons that allow you to scroll through alternative suggestions.

New terminal shorcuts

The integrated terminal features new keyboard shortcuts that allow more actions without having to use the mouse, saving time when programming.

Terminal links are detected and presented as alternatives to access them using the Ctrl/Cmd + Shift + O command.

We can re-execute a recent command in the terminal without using the up or down arrows, but by searching for it with the command Ctrl/Cmd + Alt + R or searching the recent working directory with the command Ctrl/Cmd + G.

Another new feature is that accessing the three dots (...) of the terminal presents new options that can be made accessible from the right mouse button.

Continue Working On

Another super interesting improvement is the so-called "Continue working on", a new feature that allows you to start in a Git repository in a local window and continue in a remote window as if it were a GitHub Codespace.

Similarly, you can work on a Git repository in a remote window and continue working on a new local clone using the "Continue working on new local clone" command.
Example video here

These are, among many others, some of the new features brought by VScode version 1.75 that contribute to continue positioning it as the browser of choice for most programmers of any language, in addition to the fact that it is still the best free and open source "IDE" available.

Explore in detail other new features (New commands, GitHub Repository management, Disabling commands, User Interface, Debugging, ESLint upgrade to version 2.4.0, GitHub Copilot default for business accounts, TypeScript 5.0 support, etc.) at the VScode site.

Until the next publication. Blessings.

Las nuevas características de VScode v1.75

Francisco Zapata — Mon, 06 Feb 2023 18:27:31 +0000

English version

Hoy recibí la notificación de la nueva versión de VScode, la v1.75, y de inmediato (como hago siempre) la instalé.

VScode no deja de sorprender y definitivamente tiende a posicionarse como el gold standard de los procesadores de texto que usamos los programadores, aunque ya casi parece un IDE.

Revisemos rápidamente las más resaltantes (porque son demasiadas para un único post) de estas nuevas características.

Perfiles

Lo que más me llamó la atención de esta nueva versión es la posibilidad de crear diferentes PERFILES.

Ahora podemos crear perfiles para diferentes escenarios de desarrollo, y tener «diferentes configuraciones de VScode basadas en el flujo de trabajo» y podemos «abrir múltiples espacios de trabajo (carpetas) con diferentes perfiles aplicados simultáneamente».

Vista Previa Integrada (Live Preview)

Como lo hicieron en su momento cuando incorporaron de forma integrada el bracket colorizer, esta nueva versión trae la nueva directiva livePreview.customExternalBrowser que supone la incorporación de manera integrada al IDE del Live Preview, para aquellos que estamos habituados al "Go live" de la extensión Live server y similares, permitiendo además seleccionar el navegador a usar por defecto o en cada momento.

Banco de Trabajo (Workbench)

Esta nueva versión permite cambiar el tamaño a varias vistas al mismo tiempo, arrastrando las esquinas comunes:
Video de ejemplo aquí

Nuevo Menú de Preferencias

La versión 1.75 trae un menú de preferencias completamente reorganizado y más lógicamente presentado.

Confirmación para apertura de archivos grandes en remoto

Para quienes trabajamos en remoto (a través de túneles SSH u otros) es importante la "no apertura" de archivos grandes cuando nos paramos sobre ellos, por el consumo de recursos que ello ocasiona.

Esta nueva versión limita la apertura accidental de tales archivos y permite configurar esta características a través de la nueva directiva workbench.editorLargeFileConfirmation.

Mejora del editor de accesos directos (Shorcuts)

El editor de shortcuts ahora muestra la extensión que contribuye con cada uno de ellos, lo que permite editar y producir cambios en las extensiones propiamente dichas, además de otras mejoras.

Configuración del tiempo de espera de resolución del entorno del shell

Muchos nos hemos encontrado al abrir el programa con el aviso de que se acabó el tiempo de espera de resolución del entorno del shell, y nos quedamos sin saber qué hacer, más que reiniciarlo.

La nueva directiva application.shellEnvironmentResolutionTimeout (macOS y Linux solamente, por ahora) permite aumentar el tiempo de espera para resolver el entorno de shell cuando sea necesario.

Sugerencia del modo de selección en el Editor

La nueva directiva editor.suggest.selectionMode permite ahora configurar si las sugerencias de los intellisense se seleccionan de forma automática (Enter o Tab) o mediante caracteres de activación.
Video de ejemplo aquí

Rediseño de la barra de herramientas de las sugerencias en línea

Más compacta e intuitiva, ahora la barra de herramientas de las sugerencias en línea cuenta con botones que permiten recorrer las sugerencias alternativas.

Nuevos shorcuts en la terminal

La terminal integrada presenta nuevos atajos de teclado que permiten más acciones sin tener que usar el ratón, lo que permite ahorrar tiempo al programar.

Los enlaces de la terminal son detectados y presentados como alternativas para acceder a ellos utilizando el comando Ctrl/Cmd + Shift + O.

Podemos volver a ejecutar algún comando reciente en la terminal sin hacer uso de las flechas arriba o abajo, sino haciendo búsqueda del mismo por medio del comando Ctrl/Cmd + Alt + R o buscar el directorio de trabajo reciente con el comando Ctrl/Cmd + G.

Otra nueva característica es que accediendo a los tres puntos (...) de la terminal se presentan nuevas opciones que se pueden hacer accesibles desde el botón derecho del ratón.

Continue Working On

Otra mejora super interesante es el denominado "Continue working on", o "Continuar trabajando en", una nueva característica que permite comenzar en un repositorio Git en una ventana local y continuar en una ventana remota como si se tratara de un GitHub Codespace.

De igual forma, puedes trabajar en un repositorio de Git en una ventana remota y continuar trabajando en un nuevo clon local usando el comando "Continuar trabajando en nuevo clon local".
Video de ejemplo aquí

Estas son, entre muchísimas otras, algunas de las nuevas características que nos aporta la versión 1.75 de VScode que contribuyen a seguirlo posicionando como el navegador preferido de la mayoría de los programadores de cualquier lenguaje, adicional al hecho de seguir siendo el mejor "IDE" gratuito y de código abierto existente.

Explora en detalle otras nuevas características (Nuevos comandos, manejo de Repositorios de GitHub, Desactivación de comandos, Interfaz de usuarios, Debugging, Actualización de ESLint a la versión 2.4.0, GitHub Copilot por defecto para cuentas business, Soporte para TypeScript 5.0, etc.) en el sitio de VScode.

Hasta la próxima publicación. Bendiciones.

Dejé la Pediatría y ahora soy Desarrollador Web Freelance (parte 2 de 2)

Francisco Zapata — Tue, 22 Mar 2022 19:27:02 +0000

Esta es la continuación y culminación de mi post anterior, el cual puedes leer aquí: Dejé la Pediatría y ahora soy Desarrollador Web Freelance (parte 1 de 2)

En mi post previo culminé con 3 preguntas: ¿Cómo lo hice? ¿Cuánto tiempo duró? ¿Qué sucedió luego?

Primeros Pasos: Udemy

En el proceso de crecer como freelancer, y procurando una mejor manera de generar más ingresos, en noviembre de 2019 compré mi primer curso para iniciar la formación como desarrollador web.

Hace ya muchos años que internalicé que el dinero que sale de tu bolsillo para poner conocimiento en tu cabeza es una verdadera inversión.

Sin embargo, la misma dinámica del trabajo que ya desarrollaba no me permitió iniciar esa formación hasta mayo 2020, y lo hice dando pininos en el poco tiempo libre.

Ese primer curso (de Juan de la Torre, uno de los más extraordinarios profesores de Udemy) me abrió las puertas a un universo totalmente desconocido para mí (ahora sé que solo había dado un muy pequeño vistazo) y pude comprender que es mucho más grande y hermoso de lo que imaginaba.

Juan tiene una pedagogía que pocas veces encuentras; si no logras aprender algo con él, estás en un verdadero problema. 😉

Adicionalmente, se mantiene actualizando permanentemente sus cursos, por lo que siempre puedes estudiar los últimos cambios de las diferentes tecnologías con él.

En conclusión, comprar uno de los cursos de Juan es una verdadera valiosa inversión. Me lo agradecerás cuando lo compruebes.

Nuevamente YouTube

Mientras aprendía, mi tío YouTube fue un soporte invaluable. Es impresionante la cantidad de desarrolladores que imparten excelentes enseñanzas gratuitas allí.

Así me encontré con Jonathan MirCha, Miguel Durán, Jordan Alexander, Luis Cabrera, Carlos Arturo Esparza (FalconMaster), Fazt Code y Óscar Uh (Develoteca), entre muchos otros, que no solo me ayudaron a comprender las diferentes tecnologías que aprendía, sino además a visualizar la inmensa potencialidad real del desarrollo web.

Conocí luego a Fernando Herrera, otro increíble profesor full stack de Udemy, y a Xavier Reyes (Programador X), quienes me brindaron una perspectiva más para ratificar que había escogido acertadamente el área donde definitivamente quería desarrollarme profesionalmente. Ambos son fuente permanente de inspiración.

Mencionar a todos de los que ha aprendido algo en YouTube implicaría un post solo para eso. Son muchos lo que quedan por fuera, pero no por eso les agradezco menos.

Estudios Formales

Sin embargo, quizá por mi antecedente como profesional, sentía que necesitaba realizar estudios algo más formales que solo diversos cursos en muchas plataformas (sin que eso signifique menospreciar los cursos, ¡Para nada! Ellos han sido mi principal fuente de formación).

A estas alturas ya conocía bien y había tomado diversos cursos en Udemy, Coursera, FreeCodeCamp, Platzi y EDteam.

En Workana comencé a hacer mis primeros trabajos web; la mayoría de ellos usando WordPress. Sin embargo, cuando comienzas a codificar, quieres hacerlo todo usando código pues entiendes el inmenso potencial de hacerlo de esa forma.

Los pocos trabajos que encontré allí en ese sentido eran para realizar maquetado de websites usando HTML y CSS, cosa que me encanta (y que realmente hago muy bien), pero era consciente que no me permitía desplegar al completo mi potencialidad en el desarrollo web, ni generar los ingresos que quería.

Y fue allí cuando apareció ACADEMLO. Un proverbio de la sabiduría zen dice que: "cuando el alumno está listo, el maestro aparece". Ninguna otra expresión se adapta de forma más precisa a mi experiencia.

Academlo reúne precisamente las condiciones que necesitaba:

Capacitación formal con profesores altamente capacitados.
Horarios que se adaptan a mi necesidad de seguir trabajando mientras estudio.
Flexibilidad para los pagos (solo $25 dólares mensuales y pagas el bootcamp por cuotas cuando consigues trabajo, una vez finalizada tu formación).
Ayuda para conseguir un trabajo.

Como anillo al dedo. Pedir más sería ser egoísta. 😆

Así que mi formación iniciada de manera autodidacta ha sido finalmente canalizada y ratificada.

Entiendo que me falta mucho por aprender. Es un camino que no tiene fin, pero que es demasiado sabroso para dejarlo.

Este próximo mes de abril (al culminar el módulo de React) debería recibir mi certificación como Desarrollador Web Frontend e iniciar mi búsqueda formal de empleo con la ayuda de Academlo, mientras sigo el camino hacia full stack.

No ha sido fácil. Sobre todo cuando tienes responsabilidades como papá y como pareja. Pero también ha sido muy "sabroso" recorrerlo.

Y es en este punto donde no puedo dejar pasar la oportunidad destacar el papel fundamental de Ana Karyna (mi pareja) en este andar.

Tener a una persona que no solo te apoya, sino que además te impulsa y cree en ti creo que ha sido lo mejor de todo el proceso. Y no podía dejar culminar sin agradecerle.

Es solo el principio

Estoy claro en que es solo el principio de un nuevo derrotero profesional. Queda muchísimo camino por delante. Con apenas 54 años, estoy iniciando una ruta que estoy disfrutando inmensamente.

Y es realmente emocionante saber que lo que mejor está aún por venir.

Dejé la Pediatría y ahora soy Desarrollador Web Freelance (parte 1 de 2)

Francisco Zapata — Wed, 23 Feb 2022 06:28:55 +0000

Parte 1: De Pediatra a Freelancer

Es mi primera publicación en DEV; así que comienzo contándote cómo un médico pediatra llegó a ser desarrollador web y cómo llegó hasta aquí.

Desde que estudiaba medicina me atrajo la programación.

Por circunstancias de la vida, mientras cursaba el 5to semestre de la carrera, tuve mi primer contacto con una computadora y aprendí a programar (de forma rudimentaria) en Visual Basic.

No obstante, la dinámica y exigencia de mis estudios no me permitieron profundizar más en ese camino.

Cursando el último año de medicina, nuevamente, tuve el acercamiento con la programación gracias a un nuevo compañero de residencia que estudiaba Ingeniería de Sistemas; pero nuevamente la alta exigencia de mi carrera a ese nivel no me permitió ir más allá de dar pequeños pasos.

Terminé mis estudios, comencé a ejercer como médico y luego inicié los estudios para mi especialización como Pediatra, por lo que durante 5 años no tuve ningún acercamiento con la programación.

Sin embargo, mi tesis final de postgrado fue el diseño del sistema informático (y el software para implementarlo) en el Hospital de Niños donde estudié, para lo que conté con la ayuda de mi ex-compañero de residencia (ya ingeniero).

Era el año 2000 y esta vez el inicio en el ejercicio de la pediatría me obligó a olvidar el tema y me sumergí de lleno en mi profesión durante casi... ¡18 años!

De octubre 2017 a junio 2018 ejercí como Director del Hospital central de la ciudad donde vivía en ese entonces y al entregar el cargo me encontré con una desagradable sorpresa: ya no tenía pacientes.

Mis pacientes se habían cambiado de médico durante los 8 meses de mi ejercicio como Director (porque el cargo exigía dedicación más que exclusiva) y entré en pánico... literalmente.

¿Qué comenzar a hacer para generar ingresos a los 51 años?

De junio a septiembre de ese año, mientras trataba de recuperar mi consulta privada, me sumergí en una frenética búsqueda de una ocupación que me permitiera generar ingresos.

Un buen día encontré un sitio llamado Workana (una plataforma de origen argentino que pone en contacto a freelancers con empleadores para diversas tareas) y me registré.

Estudié la plataforma, entendí que se trataba de algo serio, e inicié la exploración de mis posibilidades en mi siempre sabelotodo tío YouTube... ¿Qué puedo aprender para ser freelancer y trabajar desde casa?

A medida que profundizaba, entendí que el campo era enorme, y mi foco en ese momento se centró en la redacción de contenidos pues siempre tuve habilidad para redactar.

Así inicié una carrera que durante 2 años y medio me llevó de la redacción de post a la redacción de libros como ghostwriter, y luego a la redacción de tesis y ensayos, y a desempeñarme como revisor, corrector y editor de textos.

En YouTube aprendí que como freelancer debes decir "SÍ" a cualquier ofrecimiento de trabajo y luego salir corriendo a aprender el oficio.

Fue así como un día me vi obligado a aprender a manejar Adobe Illustrator e InDesign y me hice diseñador editorial y diagramador, sin dejar la redacción.

Finalmente, en mayo de 2020 tomé la decisión que cambió mi vida profesional de forma definitiva: colgué mi estetoscopio, cerré el que era mi consultorio y me volqué de lleno al trabajo freelance.

En junio surgió el ofrecimiento de actualizar un sitio web hecho en WordPress y Divi; dije que sí y corrí a aprender esas tecnologías. Después tuve que aprender Elementor y muchos otros plugins.

Cuando entregué ese primer trabajo comprendí que me apasionaba esa área del desarrollo de páginas web. Desarrollar una web se convierte en una especie de juego y el tiempo se te va volando sin apenas darte cuenta. Además, los pagos en esa área superan en mucho los de los trabajos de redacción y/o diseño.

Así que exploré más el tema y capté que tenía delante de mí un campo de acción que, además de gustarme muchísimo, está en plena expansión. Entendí así mismo que lo único que debía hacer era prepararme para hacerlo profesionalmente, generando con esta nueva carrera los ingresos que deseaba obtener.

¿Cómo lo hice? ¿Cuánto tiempo duró? ¿Qué sucedió luego?

Eso te lo relato en la segunda parte de este mismo artículo... ;)

(Foto de banner de portada por PIXNIO)