Forem: equimancho

Usar múltiples usuarios con Git

Camilo Martinez — Wed, 19 Oct 2022 22:42:30 +0000

Idiomas: [🇺🇸] English - [🇪🇸] Español

Si estás trabajando con múltiples usuarios de Git, por ejemplo, con uno para proyectos personales y otro para los proyectos del trabajo.

Entonces no es buena idea definir un usuario global porque todos los proyectos van a usar el mismo y puede ser muy fácil terminar haciendo un commit con el usuario incorrecto.

Amend

Si ese es tu caso, no te preocupes. No es realmente un problema porque se puede enmendar (ammend) con este comando.



git commit --author="First Last <first.last@company.org>" --amend --no-edit

Pero seamos sinceros, ¿quién quiere estar ejecutando este comando frecuentemente?. Seguramente casi nadie. Es una de esas cosas que solo queremos tener en cuenta en casos de emergencia.

Configuración de Git

Lo primero que me gusta hacer es cambiar el editor por defecto de git de vim a VSCode. Aunque es algo opcional, si te sientes bien editando directamente desde la terminal.



git config --global core.editor 'code --wait'

Y lo otro es crear dos alias, para acceder y editar fácilmente las configuraciones.



alias gcg="git config --edit --global"
alias gcl="git config --edit --local"

La diferencia entre ellas es que global aplica para todos los proyectos de Git en tu máquina y local solo aplica al proyecto en la ruta actual.

Ahora vamos a aprender como usar diferentes usuarios en cada proyecto.

Remover el Global 👌

Este paso es recomendado, pero también es opcional. En mi caso prefiero no tener un usuario por defecto para todos los proyectos.

Vamos a abrir la configuración global utilizando el alias gcg o con el comando git config --edit --global y eliminar todas las configuraciones que tengan que ver con [credential] y [user].

La complicada 👎

Una forma es que después de crear o clonar un repositorio, definas manualmente la configuración con estos comandos.



git config user.name "<user>"
git config user.email "<user@mail.com>"
git config credential.username "<user>"

Puede ser buena idea si no tienes una ruta específica para crear o clonar tus proyectos, pero... toma muchísimo tiempo y es muy fácil de olvidar, créeme, además vas a necesitar repetir lo mismo con cada repositorio que clones.

La recomendada 👍

Lo primero es definir una ruta específica para diferenciar nuestros proyectos y crear un archivo .gitconfig para cada perfil de usuario, tantos como sean necesarios.



~
├── .gitconfig <-- global
└── Developer/
   ├── personal/
   │   ├── proyecto_1/
   │   ├── proyecto_2/
   │   ├── proyecto_#/
   │   └── .gitconfig <-- personal
   └── empresa/
       ├── proyecto_1/
       ├── proyecto_2/
       ├── proyecto_#/
       └── .gitconfig <-- empresa

Personal



# ~/Developer/personal/.gitconfig

[credential]
    username = <usuario-github>
[user]
    name = <usuario-github>
    email = <usuario-github>@users.noreply.github.com

Empresa



# ~/Developer/company/.gitconfig

[credential]
    username = <user>
[user]
    name = <Nombre Apellido>
    email = <usuario>@empresa.org

Global

Ahora vamos a abrir la configuración global usando el alias gcg o el comando git config --edit --global.



# ~/.gitconfig

[includeIf "gitdir/i:~/Developer/personal/"]
    path = ~/Developer/personal/.gitconfig

[includeIf "gitdir/i:~/Developer/empresa/"]
    path = ~/Developer/empresa/.gitconfig

Así, tomará la configuración del usuario de cada "perfil" dependiendo de la ruta y podrás crear o clonar proyectos dentro de cada uno de ellos sin tener que estar lidiando con configuraciones manuales y evitando tener que usar el comando amend para corregir errores.

Agradecimientos especiales a feregri_no y ChrisFt25 de Twitter por enseñarme estos trucos.

That’s All Folks!
Happy Coding 🖖

Vite: Configuración para React

Camilo Martinez — Mon, 09 May 2022 15:56:35 +0000

Idiomas: [🇺🇸] English - [🇪🇸] Español

Vite es de lejos la mejor alternativa para crear proyectos de React hoy en día.



npm create vite@latest <project-name> -- --template <react-swc|react-swc-ts>
# npm 7+, extra double guion es requerido

cd <project-name>
npm install
npm run dev

Con estos comandos creamos un proyecto muy básico y limpio que sirve como punto de inicio, pero que va a necesitar algunas herramientas extras para automatizar tareas que pueden facilitar tu vida y la de tu equipo de desarrollo.

VSCode

Se recomienda hacer estas configuraciones en los ajustes del proyecto y no en los ajustes globales.

Empezaremos creando una carpeta .vscode con un archivo settings.json dentro.



# 📄 Archivo: /.vscode/settings.json
-----------------------------------

{
    "explorer.fileNesting.patterns": {
        "*.js": "$(capture).js.map, $(capture).*.js, $(capture)_*.js, $(capture)*.snap",
        "*.jsx": "$(capture).js, $(capture).*.jsx, $(capture)_*.js, $(capture)_*.jsx, $(capture)*.snap",
        "*.ts": "$(capture).js, $(capture).d.ts.map, $(capture).*.ts, $(capture)_*.js, $(capture)_*.ts, $(capture)*.snap",
        "*.tsx": "$(capture).ts, $(capture).*.tsx, $(capture)_*.ts, $(capture)_*.tsx, $(capture)*.snap",
    },
    "emmet.excludeLanguages": [],
    "emmet.includeLanguages": {
        "markdown": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "files.exclude": {
        "**/*.js.map": {
            "when": "$(basename)"
        },
        "**/node_modules": true,
    },
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "javascript.suggest.completeFunctionCalls": true,
    "typescript.suggest.completeFunctionCalls": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
    "javascript.inlayHints.parameterNames.enabled": "all",
    "typescript.inlayHints.parameterNames.enabled": "all",
    "javascript.suggest.autoImports": true,
    "search.exclude": {
        "**/coverage": true,
        "**/node_modules": true
    },
    "typescript.autoClosingTags": true,
    "typescript.suggest.autoImports": true,
}

Existen muchas extensiones y configuraciones para VSCode por ahí. Si necesitas un toque extra, les recomiendo darle una mirada a VSCode - Essentials y VSCode - React Flavored.

Depuración

No hay necesidad de instalar una extension extra para hacer depuración de React desde VSCode.



# 📄 File: /.vscode/launch.json
-----------------------------------

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome", // o "msedge"
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Desactive la apertura automática del navegador adicionando BROWSER=none al archivo .env en tu proyecto. También hay que cambiar el script dev para que use el mismo puerto.



# 📄 Archivo: package.json
-----------------------------------

{
  "scripts": {
-   "dev": "vite",
+   "dev": "vite --port 3000",
  }
}

Ejecute el comando npm run dev e inicie el navegador desde el panel de Depuración. Ahora puedes adicionar puntos de interrupción (break points) directamente en VSCode.

Extensiones

Si quiere que VSCode muestre extensions recomendadas cuando abra el proyecto.



# 📄 File: /.vscode/extentions.json
-----------------------------------

{
    "recommendations": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "stylelint.vscode-stylelint",
        "ZixuanChen.vitest-explorer"
    ]
}

Linter

Extensión ES Lint



# 📄 Archivo: /.vscode/settings.json
-----------------------------------

{ 
+    "editor.formatOnSave": true,
+    "javascript.format.enable": false,
+    "javascript.validate.enable": true,
+    "typescript.format.enable": false,
+    "typescript.validate.enable": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    }
}

Instale este paquete en la carpeta del proyecto:



npm install -D eslint
npm init @eslint/config

Pueden elegir la configuración que deseen, pero la que recomiendo es:



Use: To check syntax, find problems, and enforce code style
Type of modules: JavaScript modules (import/export)
Framework: React
Typescript: No #o Yes si tu proyecto lo usa
Run: Browser #y Node si usa Next.js
Style guide: Popular -> Standard #JS sin punto y coma ;
Format: JSON

Excepción de los punto y coma

Debido a que la guía de estilos standard no usa puno y como debes tener presente los siguiente. Si la línea de código siguiente comienza con alguno de los siguientes operadores [, (, +, \*, /, -, ,, ., será reconocida como una expresión perteneciente a la línea anterior. Por lo tanto, vas a necesitar empezar la línea con ; si quieres que la reconozca como una nueva sentencia de código.

Al finalizar va preguntar si desea instalar uno paquetes extras. La respuesta debe ser: yes (si). Cuando finalice, actualice las configuraciones de las reglas así:



# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "rules": {
+     "no-console": "warn",
+     "react/prop-types": "off",
+     "react/self-closing-comp": "warn",
+     "react/react-in-jsx-scope": "off"
    },
+   "settings": {
+     "react": {
+       "version": "detect"
+     }
+   }
}

Si estas usando TypeScript también debes adicionar esta configuración:



# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "parserOptions": {
+     "project": ["tsconfig.json"],
+     "createDefaultProgram": true
    },
    "rules": {
      "no-console": "warn",
      "react/prop-types": "off",
      "react/self-closing-comp": "warn",
+     "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+     "@typescript-eslint/explicit-function-return-type": "off",
  },
}

Cree un archivo .eslintignore en la raíz del proyecto:



# 📄 Archivo: .eslintignore
-----------------------------------

build
coverage
dist

No es necesario adicionar los node_modules porque los ignora por defecto.

Si no quieres usar la extensión de ES Lint, adicione los comandos list (listar) y fix (corregir) al final de la lista de scripts:



# 📄 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
  }
}

Evitar error import React

Desde React 17, no es necesario usar import React cuando solo se usa JSX, pero si lo debemos hacer para usar Hooks o los otros métodos que provee React.

Para evitar que ES Lint nos alerte sobre el import React debemos adicionar el siguiente plugin a la configuración:



# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "extends": [
      "plugin:react/recommended",
      "standard-with-typescript",
+     "plugin:react/jsx-runtime",    
    ],
}

Lineas en Blanco

Si quiere preservar líneas en blanco después de las definiciones.



# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "rules": {
+       "padding-line-between-statements": [
+           "error",
+           {
+               "blankLine": "always",
+               "prev": "*",
+               "next": "return"
+           },
+           {
+               "blankLine": "always",
+               "prev": [
+                   "const",
+                   "let",
+                   "var"
+               ],
+               "next": "*"
+           },
+           {
+               "blankLine": "any",
+               "prev": [
+                   "const",
+                   "let",
+                   "var"
+               ],
+               "next": [
+                   "const",
+                   "let",
+                   "var"
+               ]
+           }
+       ]
    },
}

Auto ordenar

Si no quieres lidiar manualmente con el ordenamiento de propiedades o imports, o que cada persona en el equipo lo haga de forma diferente, adiciona estas configuraciones.



# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "rules": {
+       "import/order": [
+           "warn",
+           {
+               "pathGroups": [
+                   {
+                       "pattern": "~/**",
+                       "group": "external",
+                       "position": "after"
+                   }
+               ],
+               "newlines-between": "always-and-inside-groups"
+           }
+       ],
+       "react/jsx-sort-props": [
+           "warn",
+           {
+               "callbacksLast": true,
+               "shorthandFirst": true,
+               "noSortAlphabetically": false,
+               "reservedFirst": true
+           }
+       ]
    },
}

Formato

ES Lint podría ser suficiente y Prettier es totalmente opcional, pero recomiendo usarlo porque tiene mejor rendimiento a la hora de hacer formateo que ES Lint. El problema es que a veces se "pelean" entre ellos, así que hay que saber configurarlos para que trabajen juntos.

Si también lo quieres usar estos son los pasos.

Extensión Prettier - Code formatter



# 📄 Archivo: /.vscode/settings.json
-----------------------------------

{
-    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
-    }
+    "eslint.probe": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact"
+    ],
+    "[javascript][typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": false,
         // Corre primero Prettier y luego ESLint
+        "editor.codeActionsOnSave": [
+            "source.formatDocument",
+            "source.fixAll.eslint"
+        ],
+    }
}

Instalar Prettier:



npm install -D prettier

Y ESLint (JS) para prettier:



npm install -D eslint-config-prettier

O TSLint (TS) para prettier:



npm install -D tslint-config-prettier

Cree un archivo .prettierignore en la raíz del proyecto:



# 📄 Archivo: .prettierignore
-----------------------------------

build
coverage
dist
package-lock.json

No es necesario adicionar los node_modules porque los ignora por defecto.

Cree un archivo .prettierrc.json en la raíz del proyecto



# 📄 Archivo: .prettierrc.json
-----------------------------------

{
    "semi": false,
    "singleQuote": true
}

Adicione la siguiente configuración al final de extends:



# 📄 Archivo: .eslintrc.json
---

{
    "extends": [
        "plugin:react/recommended",
        "standard-with-typescript",
        "plugin:react/jsx-runtime",
+       "prettier", //de ultimo
    ],
}

Si no quieres usar la extensión de Prettier, adicione los comandos check (chequear) y write (escribir) al final de la lista de scripts:



# 📄 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write"
  }
}

HTML Linter

HTMLHint



npm install -D htmlhint

Si también desea que se haga revision del HTML con eslint instale este plugin:



npm install -D eslint-plugin-html

Adicione html a la lista de plugins



# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "plugins": [
        "react",
+       "html"
    ],
}

CSS Linter

Extensión Stylelint

Instale y configure en el proyecto:



npm install -D stylelint stylelint-config-standard stylelint-config-idiomatic-order

Cree un archivo de configuración llamado .stylelintrc.json en la raíz del proyecto.



# 📄 Archivo: .stylelintrc.json
-----------------------------------

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-idiomatic-order"
  ],
  "rules": {
    "declaration-colon-newline-after": "always-multi-line"
  },
  "ignoreFiles": [
    "build/**",
    "coverage/**",
    "dist/**",
    "**/*.js",
    "**/*.jsx", 
    "**/*.ts",
    "**/*.tsx" 
  ] 
}

Si planea usar styled components también instale



npm install -D stylelint-config-styled-components



# 📄 File: .stylelintrc.json
-----------------------------------

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-idiomatic-order",
+   "stylelint-config-styled-components"
  ],
  "ignoreFiles": [
    "build/**",
    "coverage/**",
    "dist/**",
    "**/*.js",
-   "**/*.jsx", 
    "**/*.ts",
-   "**/*.tsx" 
  ] 
}

Para prevenir que tanto VSCode como Stylelint reporten los mismos errores, debemos deshabilitar los que trae VSCode por defecto.



# 📄 Archivo: /.vscode/settings.json
-----------------------------------

{ 
+    "stylelint.enable": true,
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "[css][scss]": {
+        "editor.defaultFormatter": "stylelint.vscode-stylelint",
+        "editor.codeActionsOnSave": [
+            "source.fixAll.stylelint"
+        ],
+    }
}

Stylelint tiene cerca de 170 regalas. Algunas veces te va a mostrar errores que literalmente te van a causar problemas a futuro.

Git Linter

Si el proyecto aún no tiene configurado un repositorio de git, primero debe correr el comando:



git init

Lint Staged

Usa Husky por debajo y solo corre el linter contra los archivos en staged. Con esto nos aseguramos que no se suban cambios sin ser revisados antes por los linters configurados.

Instale y configure en el proyecto:



npx mrm@3 lint-staged

Pruebas

Usaremos Vitest que es compatible con el API de Jest, así que no toca reaprender demasiado sobre la sintaxis.



npm install -D vitest

Con la configuración global no vas a necesitar importar las dependencias en cada archivo, adicionando automáticamente soporte a Jest.



# 📄 Archivo: vitest.config.ts
-----------------------------------

- import { defineConfig } from 'vite'
+ import { defineConfig } from 'vitest/config'

export default defineConfig({
+  test: {
+    globals: true,
+  },
})

Si estas usando typescript, también adiciona esta configuración.



# 📄 Archivo: tsconfig.json
-----------------------------------

{ 
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  }
}

El siguiente paso no es requerido, pero si quieres sacar ventaja del IntelliSense es recomendado iniciar los archivos así:



# 📄 Archivos: *.test.js
-----------------------------------

import { it, expect, describe } from "vitest";

Actualiza los scripts para poder correr las pruebas desde la terminal:



# 📄 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "test":    "vitest --run --reporter verbose",
+    "test:w":  "vitest",
+    "test:ui": "vitest --ui",
  }
}

Instantáneas

Si desea que las instantáneas (snapshots) se generen al mismo nivel que los archivos de prueba en lugar de la carpeta __snapshots__. Adicione esta propiedad.



# 📄 Archivo: vitest.config.ts
-----------------------------------

export default defineConfig({
   test: {
     globals: true,
+    resolveSnapshotPath: (testPath, snapExtension) => testPath + snapExtension,
   },
})

Cobertura

Para los reportes de cobertura, necesitaremos instalar @vitest/coverage-v8



npm install -D @vitest/coverage-v8

Actualiza los scripts con estos otros dos comandos:



# 📄 Archivo: package.json
-----------------------------------

{
  "scripts": {
+    "test:c":  "vitest run --coverage",
+    "test:cw": "vitest watch --coverage"
  }
}

Y adiciona la siguiente configuración de @vitest/coverage-v8.



# 📄 Archivo: vitest.config.ts
-----------------------------------

import { defineConfig } from 'vitest/config'

export default defineConfig({
   test: {
     globals: true,
+    reporters: ['verbose'],
+    coverage: {
+     all: true,
+      reporter: ['text', 'html', 'lcov'],
+      include: ['**/src/**/*.{js,jsx,ts,tsx}'],
+      exclude: [
+        '**/src/main.{js,jsx,ts,tsx}',
+        '**/*.types.{ts,tsx}',
+        '**/*.test.{js,jsx,ts,tsx}',
+        '**/src/vite-env*',
+      ],
+      statements: 0,
+      branches: 0,
+      functions: 0,
+      lines: 0,
+    },
  },
})

RTL (React Testing Library)

Ejecute este comando para instalar RTL.



npm install -D @testing-library/react @testing-library/dom @testing-library/user-event @testing-library/jest-dom

También se necesita instalar jsdom (o happy-dom)



npm install -D jsdom

Y adicionarlo como environment



# 📄 Archivo: vitest.config.ts
-----------------------------------

import { defineConfig } from 'vitest/config'

export default defineConfig({
   test: {
     globals: true,
+    environment: 'jsdom',
   },
})

Con el setupFiles se pueden extender los matchers de jest-dom forma global sin la necesidad importarlas en cada archivo.



# 📄 Archivo: .vitest/setup.ts
-----------------------------------

+ /* Extend Matchers */
+ import '@testing-library/jest-dom'



# 📄 Archivo: vitest.config.ts
-----------------------------------

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
+   setupFiles: '.vitest/setup.ts',
  },
})

Si elegiste user eslint es buena idea adicionar estos linters de RTL con este comando:



npm install --D eslint-plugin-testing-library eslint-plugin-jest-dom

Y adicionar estas condiciones al archivo de configuración de eslint.



# 📄 Archivo: .eslintrc.json
-----------------------------------

{
    "extends": [
        "plugin:react/recommended",
        "standard-with-typescript",
        "plugin:react/jsx-runtime",
        "prettier",
+       "plugin:testing-library/react",
+       "plugin:jest-dom/recommended"
    ],
    "plugins": [
        "react",
        "html",
+       "testing-library",
+       "jest-dom"
    ],
    "rules": {
+       "testing-library/await-async-query": "error",
+       "testing-library/no-await-sync-query": "error",
+       "testing-library/no-debugging-utils": "warn",
+       "testing-library/no-dom-import": "off",
+       "jest-dom/prefer-checked": "error",
+       "jest-dom/prefer-enabled-disabled": "error",
+       "jest-dom/prefer-required": "error",
+       "jest-dom/prefer-to-have-attribute": "error"
    },
}

Adicionar al setupFiles la configuración para que los matchers globales no colisionen con los de jest-dom.



# 📄 Archivo: .vitest/setup.ts
-----------------------------------

/* Extend Matchers */
import '@testing-library/jest-dom'
+ import '@testing-library/jest-dom/extend-expect'

Mock Service Worker

Si también vas a usar msw para probar los HTTP requests necesitas correr este comando.



npm install -D msw cross-fetch

Y adicionar esta configuración global.



# 📄 Archivo: .vitest/setup.ts
-----------------------------------

+ /* Mock Service Worker */
+ import { afterAll, afterEach, beforeAll } from 'vitest'
+ import { fetch } from 'cross-fetch'
+ import { server } from './mocks/server'

+ // Add `fetch` polyfill.
+ global.fetch = fetch

+ // Establish API mocking before all tests
+ beforeAll(() => server.listen({ onUnhandledRequest: `error` }))

+ // Reset any request handlers that we may add during the tests,
+ // so they don't affect other tests
+ afterEach(() => server.resetHandlers())

+ // Clean up after the tests are finished
+ afterAll(() => server. Close())

Depuración

Para una depuración visual de las pruebas.

Extensión Vitest - Test Explorer Adapter

Depuración

clic-to-component ⭐

Esta no es una extensión. Se trata de un paquete de npm que se debe instalar en el proyecto y que ayuda en el proceso de depuración.



npm install -S click-to-react-component

Aun cuando click-to-react-component es adicionado como dependencies, al crear el build de producción el paquete va a ser removido con la ayuda de tree-shaking.

Usando la tecla alt (u option en macOS) y con una combinación de identificadores y clicks sobre el componente en el navegador, nos vamos a poder transportar al código del componente en el editor.

Funciona con vite agregando estas configuraciones al proyecto:



# 📄 Archivo: /src/main.jsx
-----------------------------------

import React from "react"
import ReactDOM from "react-dom/client"
+import { ClickToComponent } from "click-to-react-component"

import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
+   <ClickToComponent />
  </React.StrictMode>
)

⚠ Desafortunadamente, no es compatible con WSL

Estilos

PostCSS

PostCSS

Actualmente prefiero usar PostCSS que Sass porque es muchísimo más rápido y sigue más de cerca el estándar de CSS (presente o futuro) y no necesita renombrar las extensiones de los archivos. Así que, en un futuro, inclusive podrías remover PostCSS de tu proyecto y continuaría trabajando sin la necesidad de hacer una migración.



npm install -D postcss-cli postcss

Para mi estos son los plugins esenciales:



npm install -D @csstools/postcss-nesting-experimental autoprefixer

Instale Autoprefixer solamente si necesita darles soporte a navegadores antiguos. Hay muchos plugins PostCSS, traten de no instalar demasiados o algunos que hagan cosas demasiado raras que se alejen del estándar actual o propuesto de CSS.

Cree un archivo postcss.config.cjs en la raíz del proyecto:



# 📄 Archivo: postcss.config.cjs
-----------------------------------

module.exports = {
    "plugins": {
        "@csstools/postcss-nesting-experimental": true,
        "autoprefixer": true
    }
}

El orden de los plugin es importante porque se requiere que el nesting corra antes del autoprefixer

Si también estas usando Stylelint. Agrega este paquete:



npm install --D postcss-syntax

Agrégalo como customSyntax en el archivo .stylelintrc.json



# 📄 Archivo: .stylelintrc.json
-----------------------------------

{
  "extends": [
    "stylelint-config-standard"
  ],
+ "customSyntax": "postcss-syntax"
}

Sass

Sass
Extension Sass

Si en vez de PostCSS quieres seguir usando Sass. Vite tiene soporte de SCSS incorporado, pero necesita que se instale este paquete:



npm install -D sass

Tener cuidado de usar el paquete sass y no node-sass porque ya está obsoleto.

Si decidiste usar Stylelint. Reemplaza estos paquetes:



npm remove stylelint-config-standard
npm install --D stylelint-config-standard-scss

Reemplázalos como extends en el archivo .stylelintrc.json



# 📄 Archivo: .stylelintrc.json
-----------------------------------

{
  "extends": [
-    "stylelint-config-standard",
+    "stylelint-config-standard-scss"
  ]
}

Luego renombra manualmente todos los archivos con extensión .css a .scss y actualiza src/App.js para que importe src/App.scss.

Despliegue

Si va a publicar el proyecto en GitHub pages sin usar un dominio personalizado se deben cambiar algunas rutas.



# 📄 Archivo: vite.config.js
-----------------------------------

export default defineConfig({
  plugins: [react()],
+ base: "./",
+ build: {
+   outDir: './docs'
+ }
})

That’s All Folks!
Happy Coding 🖖

Fuentes:

Stylelint: Linter CSS

Mover el Sistema de Archivos de WSL a otro disco

Camilo Martinez — Mon, 29 Nov 2021 16:25:54 +0000

Idiomas: [🇺🇸] English - [🇪🇸] Español

Si tu disco C: se está quedando sin espacio o prefieres tener tus archivos en un lugar diferente a tu Sistema operativo, es posible mover el Sistema de Archivos de WSL2 a otro disco en unos cuantos pasos.

Prerrequisitos

Si estamos usando un usuario diferente a root, necesitamos saber cuál es corriendo el siguiente comando (al lado de WSL):



# Linux Terminal
whoami

También necesitamos conocer el nombre de la distribución y la versión de WSL, ejecutando el siguiente comando en PowerShell (al lado de Windows):



# PowerShell
wsl --list --verbose

Conociendo el usuario: equiman, la distribución: Ubuntu y confirmando que estamos usando la versión WSL 2, estaríamos listos para la...

Mudanza

Todos los pasos que se describen a continuación se deben ejecutar en PowerShell (al lado de Windows).

Primero necesitamos cerrar todas la terminales que estén usando WSL y luego apagarlo para evitar cualquier corrupción de datos usando el comando.



# PowerShell
wsl --shutdown

Luego procedemos a crear una copia de seguridad (backup) de la distribución Ubuntu.



# PowerShell 
mkdir D:\backup
wsl --export Ubuntu D:\backup\ubuntu.tar

No te preocupes si no ves algún indicador de progreso. Esto va a tomar un buen tiempo dependiendo de la cantidad de datos que tengas. Tal vez sea buena idea que vayas a tomar un descanso mientras tanto.

Cuando termine, nececitamos asegurarnos de que el archivo D:\backup\ubuntu.tar fue creado. Luego podemos dar de baja la distribución linux del disco C:. Esto va a liberar el espacio tomado por WSL.

⚠️ Tenga presente que todo lo que tenga almacenado en el disco virtual de WSL será eliminado, el siguiente comando no solicita ninguna confirmación, así que asegúrese de hacer una copia de respaldo con todo lo que necesite antes!



# Power Shell
wsl --unregister Ubuntu

Ahora, vamos a importarla en un nuevo disco. Yo voy a usar el disco D: como ejemplo.



# Power Shell
mkdir D:\WSL
wsl --import Ubuntu D:\WSL\ D:\backup\ubuntu.tar

Por defecto Ubuntu va a usar por defecto el usuario root, para cambiarlo a nuestro usuario necesitamos correr este comando.



# Power Shell
cd $env:USERPROFILE\AppData\Local\Microsoft\WindowsApps
ubuntu config --default-user equiman

Asegúrese de reemplazar equiman con el suyo.

Reinicie WSL ejecutando el siguiente comando wsl.



# PowerShell

wsl --distribution Ubuntu

Recuperación

Si algo sale mal en el proceso, no te preocupes, podemos restaurar nuestro disco WSL desde la copia de seguridad (bakcup).

¿No te saltaste este paso? ¿cierto?

Solo repite los pasos después de la copia de seguridad.

That’s All Folks!
Happy Coding 🖖

VSCode - Crear Archivos y Directorios sin usar el ratón

Camilo Martinez — Sun, 31 Oct 2021 02:51:40 +0000

Idiomas: [🇺🇸] English - [🇪🇸] Español

¡Mira má, sin ~~manos~~ ratón!

Si estás intentando reducir la interacción con el ratón durante el desarrollo para aumentar la productividad, estás en el lugar correcto.

Hace un tiempo cuando trabajaba haciendo reportes y macros en Excel me convertí en una especie de maniático por los atajos de teclado porque prácticamente las fechas límite que me daba mi jefe era: "Necesito ese reporte para ayer".

Cuando alguien me pedía ayuda para aprender Excel orientado a negocios, la primera lección que les daba era desconectar el mouse. Obviamente al principio les daba muy duro, pero era necesario si en realidad querían aprender a moverse rápido.

⚠️ Yo uso VSCode en inglés y la distribución de teclado en-US, algo que les recomiendo hacer. Los atajos de este artículo están diseñados para ese idioma, pero fácilmente los puedes acomodar al lenguaje que uses.

Migrando a teclado en Inglés para desarrollo

Camilo Martinez for equimancho ・ Jun 25 '21

#spanish #productividad #teclado #tutorial

En VSCode la opción por defecto para crear archivos y directorios requiere un montón de interacción con el ratón, y yo sinceramente lo odio. Así que te voy a compartir una forma que encontré de hacerlo a toda velocidad, obviamente, sin usar el ratón.

Aprender

Primero que todo necesitamos aprender este útil atajo. Se usa para intercambiar el foco entre la ventana de código y el explorador de archivos.

OS	Atajo
mac	`Command + Shift + E`
win/linux	`Ctrl + Shift + E`

Adicionando esta configuración puedes hacer que automáticamente el explorador de archivos seleccione en el árbol el archivo en el que estás trabajando.



{
    "explorer.autoReveal": true
}

settings.json

A mi me gusta esta opción porque así no tengo la necesidad de estar usando tanto las teclas de navegación dentro del explorador de archivos. Algunas veces es bueno, otras no tanto, así que lo mejor es que lo pruebes para saber si te gusta o no.

Crear

El próximo paso es adicionar mis atajos de teclado secretos a la configuración.



[
    {
        "key": "ctrl+n",
        "command": "explorer.newFile",
        "when": "explorerViewletFocus"
    },
    {
        "key": "ctrl+shift+n",
        "command": "explorer.newFolder",
        "when": "explorerViewletFocus"
    }
]

En Windows y Linux, adicionalmente necesitas esta configuración para desactivar la creación de una nueva ventana option when it's focused on file explorer.



[
    {
        "key": "ctrl+shift+n",
        "command": "workbench.action.newWindow",
        "when": "!explorerViewletFocus"
    }
]

Usar

Eso fue todo. Ahora desconecta tu ratón y disfruta!

Alternativa

También amo la terminal. Si aún no usas ZSH, te recomiendo que le des una oportunidad y creeme nunca más vas a querer regresar.

iTerm2 + Oh My Zsh! + Powerlevel10K best terminal combination for Geeks!

Camilo Martinez ・ Sep 25 '18

#productivity #terminal #macos #zsh

Este artículo está en inglés (espero traducirlo pronto) y dirigido a usuario de macOS, pero ZSH también se puede usar en Linux y ahora en Windows a través de WSL.

En ZSH tenemos dos comando mágicos:

take crea un directorio y se cambia de ruta automáticamente. En vez de correr los comandos mkdir y luego cd.
touch crea un archivo o múltiples archivos al tiempo.

El truco para crear un componente en una sola línea es:



take Name && touch name{.css,.js,.test.js}

Explicación:

take Name este comando crea un directorio llamando Name y cambia la ruta automáticamente.
Luego dentro de ese directorio el comando touch name{.css,.js,.test.js} usa el mismo prefijo name y crea 3 archivos name.css, name.js y name.test.js con los valores indicados entre las llaves.

That’s All Folks!
Happy Coding 🖖

CodeSignal: el reto de calcular el área de una figura

Camilo Martinez — Wed, 11 Aug 2021 13:55:11 +0000

Idiomas: [🇺🇸] English - [🇪🇸] Español

Desde la universidad, no me había metido en retos se programación hasta que recibí una invitación a CodeSignal una pagina donde puedes "competir" contra tus amigos resolviendo algoritmos.

Lo que más me ha gustado de esta plataforma con respecto a las otras de retos como CodeWars es que esta muy bien segmentadas y los retos van subiendo progresivamente de nivel.

El problema

Cuando alcancé el segundo nivel del modo arcade, me encontré con un ejercicio sobre el cálculo del área de una figura geométrica y como es debido antes de sentarme a tirar código, había que pensar antes una solución. Trate de hacer memoria de lo que vi en la universidad y me di cuenta de que habían al menos 3 formas de resolverlo: ciclos, recursión y matemáticamente.

Abajo vamos a definir un polígono de tamaño n. Tu misión es encontrar el área del polígono dada una n.

Un polígono de tamaño 1 es solo un cuadro con una longitud lateral de 1. Un polígono de tamaño n se obtiene tomando el tamaño n - 1 y adicionando 1 hasta el borde en cada uno de los lados. En la siguiente imágen vas a encontrar polígonos de tamaño 1, 2, 3 y 4.

Image taken from CodeSignal

Ejemplo:

Para n = 2, la respuesta debería ser: shapeArea(n) = 5.
Para n = 3, la respuesta debería ser: shapeArea(n) = 13.

Solución

Como reto personal decidí resolverlo por las 3 formas que se me ocurrieron y adicionalmente ver entre ellos cual era el mas eficiente.

Pude resolver en el mismo día hacerlo con ciclos y usando recursividad, pero la solución matemática me tomó más de un día y hasta tuve que ir a mirar los apuntes de la materia de Métodos Numéricos, que ya había visto varios años atrás.

Ciclos



loopShapeArea = (n) => {
  let area = 1;
  for (let i = 1; i <= n; i++) {
    area += i * 4 - 4;
  }
  return area;
};

Recursividad



recursionShapeArea = (n) => {
  if (n === 1) {
    return 1;
  } else {
    return n * 4 - 4 + recursionShapeArea(n - 1);
  }
}

Matemática



mathShapeArea = (n) => {
  return Math.pow(n, 2) + Math.pow(n - 1, 2);
}

Ésta es la más corta pero también la más críptica y para no dejar la intriga, trataré de explicar el proceso de cómo encontré la formula.

Use una técnica de métodos numéricos que consiste en solucionar paso a paso cada iteración y luego tratar de encontrar algo común o familiar.

Un cuadrado tiene 4 lados, por eso es que necesitamos multiplicar el valor por n * 4. A partir de la tercera interaction se hace visible que cada lado tiene un punto de intersección donde se unen (color rojo) por eso no podemos contar esos puntos y es el motivo por el cual debemos restar 4 al resultado total, 1 por cada esquinas.

Así fue como encontré la formula: n * 4 - 4 que para mi sorpresa se parecía a la de solución recursiva. Le aplique un poco de álgebra de secundaria y terminó en un bonito n^2 + (n - 1)^2.

Midiendo el rendimiento

Todo muy bonito, ya tenemos 3 soluciones al mismo problema, pero entonces ¿cuál de ellos usar?.

Al mejor estilo de los Juegos Olímpicos, vamos a poner en una carrera los 3 métodos y descubrir cuál se lleva la medalla de oro.



const x = {};
x.loopShapeArea = (n) => {
  let area = 1;
  for (let i = 1; i <= n; i++) {
    area += i * 4 - 4;
  }
  return area;
};

x.recursionShapeArea = (n) => {
  if (n === 1) {
    return 1;
  } else {
    return n * 4 - 4 + x.recursionShapeArea(n - 1);
  }
};

x.mathShapeArea = (n) => {
  return Math.pow(n, 2) + Math.pow(n - 1, 2);
};

const shapeArea = (n) => {
  let solution = {};
  if (0 < n && n <= Math.pow(n, 4)) {
    let obj = {
      0: "loopShapeArea",
      1: "recursionShapeArea",
      2: "mathShapeArea"
    };
    for (let item in obj) {
      let fx = obj[item];
      solution[fx] = {};
      solution[fx].result = {};
      let hrstart = process.hrtime();
      for (let i = 1; i <= n; i++) {
        let result = x[fx](i);
        solution[fx].result[i] = result;
      }
      let hrend = process.hrtime(hrstart);
      solution[fx].execution = {};
      solution[fx].execution.s = hrend[0];
      solution[fx].execution.ms = hrend[1] / 1000000;
    }
    return solution;
  } else {
    return Error("Not a valid number");
  }
};

Resultado

En CodeSignal van a encontrar que varios de los ejercicios no solo te piden resolverlos, sino que adicionalmente también lo hagas en un límite de tiempo, para este caso nos dan 4000ms, asi que despues de todo es buena idea medir su ejecución.

¿Cuál crees que va ganar la medalla de oro? para descubrirlo solo debes ejecutar esta solución.



let n = 9; //Cambia este valor
const result = shapeArea(n);
for (let item in result) {
  console.log(`${item} -> Execution time (hr): ${result[item].execution.s}s ${result[item].execution.ms}ms.`
  );
}
console.log(result);

Conclusión

Me di cuenta que si uno no repasa las habilidades aprendidas fácilmente se van olvidando y por eso me costó más resolver la opción matemática. Por eso es que trato de resolver al menos un reto cada semana para así mantenerme en forma.

Lo mejor de CodeSignal es que una vez resuelves el problema tienes acceso a la lista de todas las respuestas ordenadas por las más votadas. Te vas a dar cuenta que a veces elaboramos soluciones demasiado complicadas y ellxs lo hacen de una forma tan estúpidamente sencilla.

¿maldita sea porque no pensé en eso antes?

Vas a decir eso una y otra vez, pero no tiene nada de malo, al contrario va expandir tu capacidad para resolver problemas y aprender de cómo los resuelven los otros.

Pero además CodeSignal no está limitado a un solo lenguaje de programación, nos reta a lxs de habla hispana a enfrentarnos al inglés, nos hace una acercamiento al tema de pruebas unitarias y también a tener en cuenta que el rendimiento es una métrica importante. Hasta tiene retos creados por las empresas top de desarrollo como preparación para las entrevistas de trabajo.

A mi este ejercicio en especial, me regresó a la época de los retos con mis compañerxs de la universidad y me picó de nuevo el gusto por resolver retos de programación que no fueran los del trabajo.

¿Qué esperas? unete a CodeSignal y disfruta haciendo lo que nos encanta... tirar código!

Extra

La primera vez que ejecute estas pruebas, inyecte sin querer un error al incluir unos console.log entre hrstart y hrstart lo que causaba que la impresión en consola fuera contabilizada. El resultado era tan dudoso que daba como ganador el método de recursión sobre el matemático.

Una vez elimine los console.log pude ver el verdadero resultado. Asi que, eviten adiciona cualquier operación que interactúe con la pantalla cuando vayan a realizar mediciones de rendimiento.

That’s All Folks!
Happy Coding 🖖

Como probar media queries con Chrome (o Edge)

Camilo Martinez — Mon, 02 Aug 2021 21:42:48 +0000

Idiomas: [🇺🇸] English - [🇪🇸] Español

Lo quieras o no, el desarrollo web moderno está directamente relacionado al diseño responsivo (responsive design).

Tenemos media queries en todos lados inclusive Bootstrap y Tailwind tienen un sistema de rejillas para poder adaptar con mayor facilidad el contenido según la pantalla o dispositivo.

Visor de Media Query

Algunas veces pensamos que los Media Query son difíciles de probar, pero las Herramientas de Desarrollo (DevTools) de Chrome/Edge tiene escondida una gema para lidiar y probar fácilmente esos puntos de inflexión (breakpoints).

Para activar ese superpoder debemos realizar los siguientes pasos.

Abrir las Herramientas de Desarrollo (DevTools) de Chrome/Edge
Activar la vista Mobile
Asegurarse de seleccionar "Responsive" en la lista de dispositivos.
Mostrar media queries (show media queries)

Barras de Consulta (Query Bars)

Dependiendo de la cantidad de media queries definidos en los estilos de la página vas a poder ver 4 barras de diferentes colores.

Tamaño preestablecido (Gris):

Ancho máximo (Azul):

Ancho máximo y mínimo (Verde):

Ancho mínimo (Naranja)

Ejemplo

La página de Bootstrap nos da una excelente oportunidad para ver esta utilidad en acción porque tiene definidos múltiples tipos de de media queries.

Código Fuente

Además también puedes sobre el media query seleccionado hacer click con el botón secundario y ver el código fuente.

Extra

Si también quieres ver todos los media query en acción al mismo tiempo te recomiendo darle una mirada a Responsively.

Es un increíble proyecto código abierto (open source) que nos puede hacer el trabajo más fácil en el desarrollo.

That’s All Folks!
Happy Coding 🖖

Truco con console.log para hacer Debug

Camilo Martinez — Mon, 28 Jun 2021 22:09:00 +0000

Idiomas: [🇺🇸] English - [🇪🇸] Español

Algunas veces necesitamos mostrar en la consola múltiples valores de las variables con console.log y para poderlos identificar adicionamos algún texto inicial el cual indica la salida a la que corresponde cada variable.



console.log("name: ", name);
console.log("age: ", age);
console.log("language: ", language);
console.log("isDev: ", isDev);

Truco

Una forma de hacer lo mismo sin tener que escribir esos textos de identificación es meter todas esas variables dentro de un {}.



   console.log( {name, age, language, isDev} );

Pero espera un momento, si cambiamos una sola palabra puede ser aún mejor.

Super truco

Cambia .log por .table y ya está. Vamos a poder ver el resultado tanto de nombres como de valores de forma más legible.



   console.table( {name, age, language, isDev} );

VS Code

Existe una extension llamada Debug Snippets que se dedica al tema de depuración e incluye varias opciones para usar console.log.

Dos de los snippets están relacionados con los trucos mencionados anteriormente.

Trigger	Description	Result JS/TS
`cld→`	log with destructuring	`console.log({$name})█`
`ctd→`	table with destructuring	`console.table({$name})█`

That’s All Folks!
Happy Coding 🖖

Indicadores de Estado con AutoHotKey

Camilo Martinez — Fri, 25 Jun 2021 23:31:09 +0000

Idiomas: [🇺🇸] English - [🇪🇸] Español

Si tu teclado o computadora no cuenta con indicadores luminosos AutoHotKey puede venir al rescate y con un simple script podremos conocer el estado de esas teclas modificadoras.

Crea un archivo llamado key-indicator.ahk con este script:



~*CapsLock::
~*NumLock::
~*ScrollLock::
~*Insert::
Sleep, 10   ; drastically improves reliability on slower systems

msg := ""
msg := msg "Caps: " (GetKeyState("CapsLock", "T") ? "ON" : "OFF") "`n"
msg := msg "Num: " (GetKeyState("NumLock", "T") ? "ON" : "OFF") "`n"
msg := msg "Scroll: " (GetKeyState("ScrollLock", "T") ? "ON" : "OFF") "`n"
msg := msg "Insert: " (GetKeyState("Insert", "T") ? "ON" : "OFF")

ToolTip, %msg%
Sleep, 750  ; SPECIFY DISPLAY TIME (ms)
ToolTip     ; remove
return
```

Guarda el archivo y abrelo con AutoHotkey. Cada vez que cambies el estado de alguna de estas teclas vas a visualizar cerca del puntero del mouse un indicador.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ls81ne640b7hoeoij276.png)

---

Si estás usando la variante de `CapsLock` (Bloq Mayús) reemplázandola con `Backspace` (retorno) y des/activas el `CapsLock` con la tecla `Alt`.

```cpp
CapsLock::Backspace
!CapsLock::CapsLock ; Alt+CapsLock -> Enable/Disable Caps Lock
```

Debes cambiar la primera línea del script de `~*CapsLock::` a `~*!CapsLock::`.

---

**Fuentes:**

- [AHK Board - Another on screen caps lock indicator](https://autohotkey.com/board/topic/100990-another-on-screen-caps-lock-indicator/)

---

**That’s All Folks!**
**Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinsoftware)

Operadores de Javascript con AutoHotKey

Camilo Martinez — Fri, 25 Jun 2021 22:52:04 +0000

Idiomas: [🇺🇸] English - [🇪🇸] Español

Si trabajas en desarrollo de software y la mayor parte del tiempo la pasas escribiendo código en JavaScript (o TypeScript) este artículo te puede ser de utilidad.

Con AutoHotKey puedes re-mapear el comportamiento de algunas teclas para escribir de forma fácil y rápida todos esos operadores que usamos en el día a día.

Debes tener instalado AutoHotKey y crear un archivo llamado js-remapkeys.ahk con este script.

#NoEnv ; Recommended for performance and compatibility with future AutoHotkey releases.
; #Warn  ; Enable warnings to assist with detecting common errors.
SendMode Input ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir% ; Ensures a consistent starting directory.

!7::Send {&}{&}                             ; Alt+7         &&          Logical AND
!+7::Send {&}{&}{=}                         ; Shift+Alt+7   &&=         AND Assignment
!8::Send {*}{*}                             ; Alt+8         **          Math Power
!9::Send {=}{>}                             ; Alt+9         =>          Arrow
!+9:: Send {(}{)}{space}{=}{>}              ; Shift+Alt+9   () =>       Arrow Function, implicit return
!^9:: Send {(}{)}{space}{=}{>}{space}{{}{}} ; Ctrl+Alt+9    () => {}    Arrow Function, explicit return
!\::Send {|}{|}                             ; Alt+\         ||          Logical OR
!+\::Send {|}{|}{=}                         ; Shift+Alt+\   ||=         OR Assignment
!=:: Send {=}{=}{=}                         ; Alt+=         ===         Strict Equality
!+=:: Send {!}{=}{=}                        ; Shift+Alt+=   !==         Strict Inequality
!,:: Send {<}{/}{>}{left 1}                 ; Alt+,         </>         HTML Close Tag
!^,:: Send {<}{/}{>}{left 2}                ; Ctrl+Alt+,    </>         React Component Tag
!.:: Send {?}{.}                            ; Alt+.         ?.          Optional Chaining
!+,:: Send {<}{=}                           ; Shift+Alt+,   <=          Less than or equal to
!+.:: Send {>}{=}                           ; Shift+Alt+.   >=          Greater than or equal to
!+;:: Send {?}{:}{left 1}                   ; Shift+Alt+;   ?:          Ternary Operator
!/:: Send {?}{?}                            ; Alt+/         ??          Nullish Coalescing
!+/:: Send {?}{?}{=}                        ; Shift+Alt+/   ??=         Nullish Coalescing Assignment

Guarde el archivo y ábralo con AutoHotkey.

Así de fácil, puedes tener un teclado vitaminado para escribir código JS/TS a toda velocidad.

That’s All Folks!
Happy Coding 🖖

Migrando a teclado en Inglés para desarrollo

Camilo Martinez — Fri, 25 Jun 2021 22:26:47 +0000

Idiomas: [🇪🇸] Español - [🇺🇸] English

Cuando empecé a trabajar en desarrollo de software, recuerdo que uno de los desarrolladores senior me dio uno de los mejores consejos que me han dado:

Instale y use todo en Inglés, acostumbrese de una vez porque todo el ecosistema de desarrollo se enfoca en ese idioma. Todo sale primero en inglés, las nuevas versiones, la documentación y hasta las noticias. Si se queda esperando a que salga en español va vivir con lag, desactualizado y atrasado.

Además su vida va ser muchísimo más fácil porque cuando le salga un error de programación solo va tener que copiar y pegarlo en un buscador y seguro va encontrar la respuesta de una, si la busca en español o la traduce se va demorar horas.



catch(error){
   console.log(`https://stackoverflow.com/search?q={error.message}`)
}

Y asi, la primera vez que vi ese chiste, de repente todas sus palabras cobraron sentido. 😎

Hace unos días, empecé a ver a varios desarrolladores no americanos (Latam, España, Francia, Alemania, India, y Hungria) que recomendaban usar el teclado con la distribución en inglés, especificamente la de en-US.

Y una nueva revelación se plasmó ante mis ojos:

Si estamos usando software en inglés y escribiendo código en inglés ¿por qué no usar también hardware en inglés?

Los lenguajes de programación, IDEs y editores de código fueron diseñados y desarrollados para usarse en inglés como idioma principal; y si no me equivoco estoy casi seguro que fueron creados usando un teclado en inglés.

Todos estas personas que cambiaron a esta distribución de teclado decían que ahora sentían todo más fluido, natural, cómodo y hasta les ayudaba con la productividad. Creo que esto es debido a que los símbolos y atajos de teclado fueron creados usando un teclado con distribución en-US. La verdad, no se si es correcto o no asumir eso, pero para mi tiene mucho sentido.

¿Alguna vez han tratado de comprar un teclado mecánico con distribución en español y peor aun con distribución español de latinoamérica?, es prácticamente imposible. Por eso hacer el cambio a un distribución en-US viene beneficios adicionales porque ya vas a comprar el teclado que quieras y no el que te toca.

Si si, eso suena muy bueno pero... ¿qué hago con las tildes y con la letra Ñ?

Solución Rápida

Todxs los que necesiten cualquier clase de acentos o marcas diacríticas pueden usar la distribucíon US International en vez de la en-US.

Esta distribución US International también usa el modificador AltGr (Alt+Ctrl) para ingresar caracteres especiales y convierte los caracteres ` (acento grave), ~ (virgulilla), ^ (circunflejo), " (comilla doble, para hacer diéresis), y ' (apóstrofe , para hacer acentos agudos) en teclas muertas para producir caracteres con acento.

Los de habla hispana ya estamos acostumbrados a usar el ´ (acento agudo) que es una teclas muerta para tildar las vocales, pero en esta distribución por ejemplo se debe presionar el apóstrofe ' (liberarla) y después presionar la letra a para producir la á con acento.

Pero esta distribución tiene un problema crítico (al menos en Windows) para los que nos dedicamos al desarrollo de software debido a estas teclas muertas. Vamos a perder velocidad porque para producir algunos caracteres que usamos frecuentemente como " (comilla doble) o ' (comilla sencilla) vamos a tener que presionar dos teclas: primero la tecla muerta y luego un carácter de finalización como (espacio, tabulador o enter).

¿Entonces como que hacemos ahí?

No hay de otra que regresar a la distribución en-US y crear un script personalizado para los acentos.

Solución Personalizada

Si no está interesado en el conocer toda la parte divertida y explicación, puede ir directamente al Resumen

Voy a detallar el proceso para crear un script de AutoHotKey para crear acentos en español. Ustedes lo pueden usar como ejemplo para crear el suyo y personalizarlo a gusto.

Primero, necesitamos reconocer los acentos como áéíóúñ y símbolos como ¡¿ que queremos re-mapear para así buscar su correspondiente valor decimal en la tabla ASCII.

Caracter	Decimal	Caracter	Decimal
á	0225	Á	0193
é	0233	É	0201
í	0237	Í	0205
ó	0243	Ó	0211
ú	0250	Ú	0218
ñ	0241	Ñ	0209
¿	0191	?	63
¡	0161	!	33

Luego, vamos a re-mapear cada tecla con el destino deseado siguiendo este formato OriginKey::DestinationKey prestando especial atención en las teclas modificadoras.

Caracter	Modificador
^	Ctrl
!	Alt
+	Shift
#	Win
<	Izquierda
>	Derecha

Crear un archivo con el nombre en-US_accents.ahk y adicionar la siguiente configuración.



!a::Send {Asc 0225}    ; Alt+a -> á
!+a::Send {Asc 0193}   ; Shift+Alt+a -> Á
!d::Send {Asc 0233}    ; Alt+e -> é
!+d::Send {Asc 0201}   ; Shift+Alt+e -> É
!g::Send {Asc 0237}    ; Alt+i -> í
!+g::Send {Asc 0205}   ; Shift+Alt+i -> Í
!s::Send {Asc 0243}    ; Alt+o -> ó
!+s::Send {Asc 0211}   ; Shift+Alt+o -> Ó
!f::Send {Asc 0250}    ; Alt+u -> ú
!+f::Send {Asc 0218}   ; Shift+Alt+u -> Ú
!l::Send {Asc 0241}    ; Alt+n -> ñ
!+l::Send {Asc 0209}   ; Shift+Alt+n -> Ñ

Pero que fácil!

No tan rápido mi amigx. Acabamos de crear el acceso rápido Alt+Shift+A, pero por ejemplo VSCode también usar el mismo acceso rápido para alternar la opción de activar y desactivar commentarios.

Así que lo mejor es cambiar nuestro script para que los Alt+Shift+ solo funcione con el Alt de la derecha (Der)Alt+Shift+. Para ello debemos cambiar los modificadores !+ por >!+.

Con esa pequeña corrección VScode podrá seguir funcionando con el (Izq)Alt+Shift+a y nosotros podremos usar el (Der)Alt+Shift+a para escribir la Á (con acento). Yo prefiero cambiar de una vez todas las letras para conservar el estándar, pero vos podes decidir si cambias únicamente las teclas que generen conflictos.



!a:: Send {Asc 0225}    ; Alt+a -> á
>!+a:: Send {Asc 0193}  ; Shift+(Right)Alt+a -> Á
!e:: Send {Asc 0233}    ; Alt+e -> é
>!+e:: Send {Asc 0201}  ; Shift+(Right)Alt+e -> É
!i:: Send {Asc 0237}    ; Alt+i -> í
>!+i:: Send {Asc 0205}  ; Shift+(RightAlt+i -> Í
!o:: Send {Asc 0243}    ; Alt+o -> ó
>!+o:: Send {Asc 0211}  ; Shift+(Right)Alt+o -> Ó
!u:: Send {Asc 0250}    ; Alt+u -> ú
>!+u:: Send {Asc 0218}  ; Shift+(Right)Alt+u -> Ú
!n:: Send {Asc 0241}    ; Alt+n -> ñ
>!+n:: Send {Asc 0209}  ; Shift+(Right)Alt+n -> Ñ

¡Oh si! ¡Excelente!

Adicionalmente en español usamos los símbolos de exclamación y apertura de forma emparejada, es decir, siempre deben tener símbolo de apertura y de cierre.



!/:: Send {Asc 0191}{Asc 63}{left 1}    ; Alt+/ -> ¿?
!1:: Send {Asc 0161}{Asc 33}{left 1}    ; Alt+1 -> ¡!

Lo buenos de usar scripts de este tipo, es que podemos sobre cargarlos con más trucos. En este caso podemos hacer que escriba la pareja de símbolos y con el comando {left 1} mueva el cursor entre ellos.

Extra

Aún conservo unos cuantos trucos más bajo las mangas, pero los considero opcionales.

Si tienes un teclado numérico a la derecha ¿por qué no usar la fila superior de números directamente con los símbolos cuando el Num Lock se encuentre activo?

Les debo confesar que fue uno de los cambios a los que mas me costó acostumbrarme, pero una vez la mente lo asimila es una dicha poder codear sin tener que estar presionando constantemente el modificador Shift (Mayús).



#if GetKeyState("NumLock", "T")
    *1::!
    *2::@
    *3::#
    *4::$
    *5::Send `%
    *6::^
    *7::&
    *8::Send `*
    *9::(
    *0::)
    $+1::Send 1
    $+2::Send 2
    $+3::Send 3
    $+4::Send 4
    $+5::Send 5
    $+6::Send 6
    $+7::Send 7
    $+8::Send 8
    $+9::Send 9
    $+0::Send 0
#if

Si tienes un laptop o un teclado TKL (Ten Key Less) puedes usar la tecla Insert en vez de NumLock para activar o desactivar esta opción.

Y ahora hágase esta pregunta ¿cuántas veces usan la tecla Caps Lock (Bloq Mayús)? ne mi caso casi nunca. Cuando estuve probando otras distribuciones como Dvorak y especificamente Workman descubrí las maravillas de intercambiarla por el Backspace (retroceso) y poder hacer correcciones sin salir de la Fila Guía (Home Row) del teclado.



CapsLock::Backspace
!CapsLock::CapsLock

Pero en todo caso, si en algún momento necesitan activar el Caps Lock (Bloq Mayús), por ejemplo para escribir SQL lo pueden activar y desactivar usando Alt+CapsLock.

Resumen

Finalmente, tenemos una distribución de teclado en-US para desarrollo completamente compatible, rápida, confiable y que puede ser usada por los Hispanohablantes sin dejar de usar Qwerty.

Todo con un simple script de AutoHotkey:



#NoEnv  ; Recommended for performance and compatibility with future AutoHotkey releases.
; #Warn  ; Enable warnings to assist with detecting common errors.
SendMode Input  ; Recommended for new scripts due to its superior speed and reliability.
SetWorkingDir %A_ScriptDir%  ; Ensures a consistent starting directory.

; Modifiers
; ^ Ctrl
; ! Alt
; + Shift
; # Win
; < Left
; > Right

; Action
CapsLock::Backspace
!CapsLock::CapsLock     ; Alt+CapsLock -> Enable/Disable Caps Lock
PrintScreen::Send #+s

; Accents
!a:: Send {Asc 0225}    ; Alt+a -> á
>!+a:: Send {Asc 0193}  ; Shift+(Right)Alt+a -> Á
!e:: Send {Asc 0233}    ; Alt+e -> é
>!+e:: Send {Asc 0201}  ; Shift+(Right)Alt+e -> É
!i:: Send {Asc 0237}    ; Alt+i -> í
>!+i:: Send {Asc 0205}  ; Shift+(RightAlt+i -> Í
!o:: Send {Asc 0243}    ; Alt+o -> ó
>!+o:: Send {Asc 0211}  ; Shift+(Right)Alt+o -> Ó
!u:: Send {Asc 0250}    ; Alt+u -> ú
>!+u:: Send {Asc 0218}  ; Shift+(Right)Alt+u -> Ú
!n:: Send {Asc 0241}    ; Alt+n -> ñ
>!+n:: Send {Asc 0209}  ; Shift+(Right)Alt+n -> Ñ

; Symbols
!/:: Send {Asc 0191}{Asc 63}{left 1}    ; Alt+/ -> ¿?
!1:: Send {Asc 0161}{Asc 33}{left 1}    ; Alt+1 -> ¡!

; Swap Numbers Row
#if GetKeyState("NumLock", "T")
    *1::!
    *2::@
    *3::#
    *4::$
    *5::Send `%
    *6::^
    *7::&
    *8::Send `*
    *9::(
    *0::)
    $+1::Send 1
    $+2::Send 2
    $+3::Send 3
    $+4::Send 4
    $+5::Send 5
    $+6::Send 6
    $+7::Send 7
    $+8::Send 8
    $+9::Send 9
    $+0::Send 0
#if

Como les mencioné mas arriba, se que existen otras distribuciones de teclado como Dvorak, Colemak, Workman, Norman y otro montón más. He probado varias de ellas y termine por convencerme que no hay una distribución perfecta para todo. Si eres escritor podría ser un factor clave par aumentar la velocidad, pero en desarrollo no es un aspecto tan importante.

Por eso creo que con los cambio que estamos introduciendo con AutoHotkey, puedes seguir usando Qwerty y no vas a tener que enfrentar demasiados problemas en caso de que necesites usar el computador de alguien más o alguien necesite usar el tuyo.

Lo bueno de todo esto es que tenemos múltiples opciones y podemos elegir la que más nos guste acorde a las necesidades y gustos. Escoge con sabiduría lo que creas que es mejor para tí y concédete el permiso de probar cosas nuevas, te puedes llegar a sorprender.

Una última recomendación. Si trabajas en desarrollo de software, también podrías darle superpoderes a tu teclado para que escriba los operadores de JS/TS por ti.

Operadores de Javascript con AutoHotKey

Camilo Martinez for equimancho ・ Jun 25 '21

#spanish #javascript #typescript #teclado

Fuentes:

That’s All Folks!
Happy Coding 🖖

Curso JSON - 8. Finalización

Camilo Martinez — Tue, 28 Apr 2020 15:47:00 +0000

Curso sobre JSON de novato a experto (versión GRATIS)
Presentación: https://slides.com/equimancho/json/#/8

Evaluación: https://forms.gle/WtPKfEMgTffm9KrQ6
Encuesta: https://forms.gle/mA3SgMXZ9BY8dUsA9 🙏

Redes Sociales:
Twitter: https://twitter.com/equiman/
Dev.to: https://dev.to/equiman
YouTube: https://www.youtube.com/c/equimancho
LinkedIn: https://www.linkedin.com/in/equiman/

That's All Folks!
Happy Coding 🖖

Curso JSON - 7. Reto

Camilo Martinez — Tue, 28 Apr 2020 15:43:53 +0000

Curso sobre JSON de novato a experto (versión GRATIS)
Presentación: https://slides.com/equimancho/json/#/7

Repositorio:
https://github.com/equiman/playground-json

API de Game of Thrones:
https://api.got.show/doc/

Descargas:
Postman: https://www.postman.com/

That's All Folks!
Happy Coding 🖖