DEV Community: DowarDev

Mejora tu productividad automatizando tareas en Visual Studio Code

DowarDev — Sun, 15 Dec 2024 21:16:58 +0000

Introducción

Visual Studio Code(VSCode) cuenta con una función que nos permitirá mejorar nuestra productividad y así enfocarnos en programar.

Al configurar tu entorno de desarrollo, puedes crear comandos personalizados que ejecuten múltiples tareas de forma secuencial. Por ejemplo, puedes definir un comando que inicie automáticamente el servidor de tu proyecto al abrirlo en VSCode. Del mismo modo, puedes crear un comando que ejecute las pruebas, genere el paquete de despliegue y lo suba a producción en un solo paso.

Nota
Este tutorial te guiará a través de los conceptos básicos y te preparará para profundizar en la documentación oficial.

Preparación

Abrimos nuestro proyecto con VSCode.
En la raíz del proyecto buscamos el directorio(oculto) .vscode(si no existe lo creamos).
Dentro del mismo creamos(si no existe) un archivo bajo el nombre de tasks.json

Tipo de tarea

Existen dos tipos de tareas:

Tarea simple: Solo ejecuta una única acción, ejemplo: iniciar servidor
Tarea compuesta: Ejecuta más de una acción, ejemplo: Iniciar tests, realizar build y hacer deploy.

Estructura

{
  "version": "2.0.0",
  "tasks": [
    {
    "label": "nombre de la tarea",
    "type": "shell","typescript"
    "command": "comando a ejecutar",
    "args": ["argumento1", "argumento2"], 
    "group": {
        "kind": "build",
        "isDefault": true 
    },
    "problemMatcher": [], 
    "detail": "Descripción de la tarea",
    "presentation": {
        "echo": true, // opcional
        "reveal": "always", 
        "focus": false, 
        "panel": "shared" 
    },
    "runOptions": {
        "runOn": "folderOpen" 
    }
    }
  ]
}

label: Nombre de la tarea.
type: Tipo de tarea (shell, process, npm, gulp, grunt, typescript).
command: Comando a ejecutar.
args: Argumentos para el comando (opcional).
group: Agrupación de la tarea (opcional).
kind: Tipo de grupo (build, test, none).
isDefault: Si es la tarea predeterminada del grupo (opcional).
problemMatcher: Configuración para detectar problemas en la salida del comando (opcional).
detail: Descripción de la tarea (opcional).
presentation: Configuración de presentación de la tarea (opcional).
echo: Si se debe mostrar el comando en la salida (opcional).
reveal: Cuándo mostrar la salida (always, silent, never).
focus: Si se debe enfocar la salida (opcional).
panel: Panel de salida (shared, dedicated, new).
runOptions: Opciones de ejecución de la tarea (opcional).
runOn: Cuándo ejecutar la tarea (folderOpen, default).

Ejemplos

Tarea simple

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Ionic serve",
      "type": "shell",
      "command": "ionic serve --external",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "problemMatcher": [],
      "detail": "Tarea para iniciar el servidor de desarrollo de Ionic",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

El ejemplo anterior inicia el servidor para un proyecto de Ionic.

Tarea compuesta

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Tests",
      "type": "shell",
      "command": "npm run test",
      "problemMatcher": [],
      "detail": "Tarea para ejecutar los tests de la aplicación"
    },
    {
      "label": "Build App",
      "type": "shell",
      "command": "npm run build",
      "problemMatcher": [],
      "detail": "Tarea para construir la aplicación"
    },
    {
      "label": "Deploy via SSH",
      "type": "shell",
      "command": "scp -r ./dist/* user@remote:/path/to/deploy",
      "problemMatcher": [],
      "detail": "Tarea para mandar los archivos por SSH"
    },
    {
      "label": "Full Deploy",
      "dependsOn": ["Run Tests", "Build App", "Deploy via SSH"],
      "problemMatcher": [],
      "detail": "Tarea para ejecutar tests, construir y desplegar la aplicación"
    }
  ]
}

Con esto se logrará ejecutar los tests, el build y finalmente el deploy usando Full Deploy.

Ejecución

Tarea simple

Iniciamos la paleta de comandos(Ctrl+Shift+P)
Ingresamos Run Task
Seleccionamos la tarea de nuestra preferencia(nombre asignado en label)

Nota
Gracias a la propiedad runOn con el valor asignado folderOpen en el ejemplo de la tarea simple no sera necesario ejecutarla mediante la paleta de comandos ya que tener esta propiedad definida le indica que debe ejecutarse tan pronto se inice el proyecto.

Tarea compuesta

Si se analiza detenidamente se podrá observar que el ejemplo de la tarea simple y compuesta comparten varias similitudes en su estructura, exceptuando por lo siguiente:

{
      "label": "Full Deploy",
      "dependsOn": ["Run Tests", "Build App", "Deploy via SSH"],
      "problemMatcher": [],
      "detail": "Tarea para ejecutar tests, construir y desplegar la aplicación"
    }

Lo que nos permite este fragmento es ejecutar varias tareas usando un único comando bajo el nombre definido en label(Full Deploy), esto lo hace gracias a la propiedad dependsOn en donde se pasa como argumento el nombre de las tareas que ejecutara. De ser requerido se podrá ejecutar las tareas de forma individual usando el nombre definido en el label, en este caso: Run Tests, Build App, Deploy via SSH.

Nota
Si una tarea falla la siguiente no se ejecutara a no ser que especifiquemos la propiedad dependsOrder en sequence o parallel

Para ejecutar la tarea compuesta se hace de la misma forma que una tarea simple

Abrimos la paleta de comandos(Ctrl+Shift+P)
Ingresamos Run Task
Seleccionamos la tarea de nuestra preferencia(en esta caso Full Deploy)

Resumen

Hagamos un resumen rápido

Creamos un tasks.json en.vscode`
Definimos las tareas que usaremos en nuestro proyecto
Ejecutamos Ctrl+Shift+P y en la paleta de comandos ingresamos Run Task.
Seleccionamos la tarea deseada.

Post original: https://dowar.xyz/blog/post/55

Domina el arte de la personalización en Ionic: Crea paletas de colores únicas paso a paso

DowarDev — Tue, 03 Dec 2024 21:10:51 +0000

Ionic nos brinda la oportunidad de conferir un toque distintivo a nuestras aplicaciones mediante la creación de paletas de colores personalizadas. Gracias a una herramienta integrada, podemos adaptar nuestros componentes visuales a nuestros gustos y necesidades específicas.

Crear color

Para comenzar este proceso, dirigiremos nuestra atención a la documentación oficial de Ionic. En ella, encontraremos una utilidad diseñada específicamente para generar colores personalizados. Su uso es sumamente sencillo:

Nombre: Asigna un nombre al color que servirá como identificador en nuestro código.
Color: Especifica el tono exacto que deseamos emplear.
Resultado: Reglas CSS

Instalación

Ionic nos proporciona un archivo denominado variables.css con la finalidad de albergar las reglas de estilo que se aplicarán a toda la aplicación. En este archivo, añadiremos las propiedades CSS correspondientes al color que hemos creado.

:root {

    --ion-color-new: `#69bb7b`;

    --ion-color-new-rgb: `105,187,123`;

    --ion-color-new-contrast: `#000000`;

    --ion-color-new-contrast-rgb: `0,0,0`;

    --ion-color-new-shade: `#5ca56c`;

    --ion-color-new-tint: `#78c288`;

}

.ion-color-new {

    --ion-color-base: var(--ion-color-new);

    --ion-color-base-rgb: var(--ion-color-new-rgb);

    --ion-color-contrast: var(--ion-color-new-contrast);

    --ion-color-contrast-rgb: var(--ion-color-new-contrast-rgb);

    --ion-color-shade: var(--ion-color-new-shade);

    --ion-color-tint: var(--ion-color-new-tint);

}

Aplicar color

Una vez que hemos definido nuestros colores personalizados, podemos aplicarlos a los componentes de Ionic de manera intuitiva. El proceso es similar al utilizado para los colores predefinidos del framework.

Por ejemplo, para cambiar el color de un botón, simplemente añadiremos el atributo color con el nombre del color personalizado que hemos creado:

<ion-button color="new">Hola mundo</ion-button>

Conclusión

¡Has llegado al final de este tutorial y ahora eres un experto en personalizar los colores en Ionic! Con esta guía, podrás crear aplicaciones únicas y atractivas que reflejen tu estilo personal. Recuerda que la elección de los colores adecuados es fundamental para transmitir emociones y crear una experiencia de usuario memorable. ¡Anímate a experimentar y comparte tus creaciones con la comunidad Ionic!

Fuente: https://dowar.xyz/blog/post/54

Enviar correos electrónicos con Mailtrap y Laravel

DowarDev — Thu, 07 Nov 2024 07:15:40 +0000

Uno de los principales usos que se suele dar al backend es el de enviar correos electrónicos, ya sea para que el usuario pueda autenticar su sesión o incluso recibir notificaciones sobre nuevo contenido, entre otras muchas razones, con este tutorial aprenderás a realizar pruebas de correo electrónico empleando Mailtrap para posteriormente utilizar un servicio para enviar correos.

Requerimientos

Contar con una cuenta creada en mailtrap.io.
Proyecto de Laravel versión 7 en adelante.

Mailtrap

¿Qué es Mailtrap?

Básicamente, es un servicio que nos permite realizar pruebas de correo electrónico, además de ofrecernos otras herramientas que nos permitirán optimizar los mismos.

Credenciales y configuraciones

Cuando accedemos a nuestra cuenta por primera vez podremos observar que contamos con un inbox creado por defecto, según nuestras necesidades podremos crear más e incluso organízalos creando proyectos.

¿Qué es un inbox?

Un inbox es una bandeja de entrada donde podremos gestionar nuestros correos, además de encontrar herramientas que nos permitirán mejorar los mismos.

Si accedemos a nuestro inbox nos encontraremos del lado izquierdo una lista de los correos que hemos recibido y por el otro las configuraciones para una multitud de integraciones.

Desplegamos el dropdown y seleccionamos Laravel para posteriormente copiar la configuración.

Laravel

Credenciales y configuraciones

Ahora toca dirigirnos a nuestro proyecto de Laravel y abrir nuestro archivo de configuración .env donde sustituiremos las siguientes líneas con el contenido que copiamos en el paso anterior.

Con esto ya tendríamos aplicada la configuración necesaria para que Laravel se conecte a los servicios de Mailtrap.

Nota

Cuando ya estés por subir tu proyecto a producción deberás sustituir la configuración de Mailtrap por la de tu servicio de correo electrónico.

Ejemplo

En esta prueba crearemos un pequeño formulario de contacto el cual enviaremos por correo electrónico.

Creación de formulario

Para crear nuestro formulario nos dirigiremos a una, view en mi caso será la que ya viene incluida welcome.blade.php y agregamos el siguiente código:

<form method="post" action="{{ url('store-form') }}">
  <label for="name">Nombre</label>
  <input type="text" name="name" /> <br />

  <label for="subject">Asunto</label>
  <input type="text" name="subject" /> <br />

  <label for="message">Mensaje</label>
  <textarea name="message" rows="10" cols="50"></textarea> <br />

  <input type="submit" value="Enviar" />
</form>

Sustituimos:

store-form por la ruta deseada para enviar nuestro formulario, esta ruta la crearemos en el siguiente paso.

El siguiente código es opcional cuya única función es lograr que el formulario se vea más presentable.

<form method="post" action="{{ url('store-form') }}">
  @csrf
  <section class="margin-bottom" style="display: flex">
    <div style="display: flex; flex-basis: 70px">
      <label for="name">Nombre</label>
    </div>

    <div>
      <input type="text" name="name" />
    </div>
  </section>

  <section class="margin-bottom" style="display: flex">
    <div style="display: flex; flex-basis: 70px">
      <label for="subject">Asunto</label>
    </div>

    <div>
      <input type="text" name="subject" />
    </div>
  </section>

  <section class="margin-bottom" style="display: flex">
    <div style="display: flex; flex-basis: 70px">
      <label for="message">Mensaje</label>
    </div>

    <div>
      <input type="text" name="message" />
    </div>
  </section>

  <input type="submit" value="Enviar" />
</form>

Ruta

Una vez contemos con nuestro formulario creado, pasaremos agregar nuestra ruta, la cual será la encargada de entregar el contenido de nuestro formulario a Laravel.

Accedemos a web.php el cual se encuentra en routes y agregamos lo siguiente:

Route::post("store-form", [Controller::class, "sendMail"]);

Y sustituimos:

store-form por el nombre de nuestra ruta
Controller por el nombre de nuestro controlador
sendMail por el nombre de la función.

Crear plantilla de correo

Crearemos un directorio con el nombre emails en la siguiente ruta resources>views el cual contendrá nuestras plantillas de correo electrónico, estas plantillas son del tipo Blade lo que significa que podremos usar HTML y PHP en el mismo archivo tal cual como lo haríamos en cualquier otra view de Laravel.

Agregamos una nueva plantilla con el nombre emailTest y en ella agregamos lo siguiente:

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <h1>Este es un mensaje de prueba.<br></h1>
    <P>
        Nombre: {{ $name }} <br>
        Mensaje: {{ $messageContent }}
    </P>
</body>

</html>

Lo que se encuentra entre {{}} son variables de PHP las cuales son proveídas por la función encargada de construir nuestro correo electrónico, esta función la crearemos en el siguiente paso.

Agregar nuestra función

En nuestro controlador crearemos una función la cual contendrá el código para enviar nuestro correo electrónico.

function sendMail(Request $request)
{
  $name = $request->name;
  $subject = $request->subject;
  $messageContent = $request->message;

  $messageData = ["to" => "contacto@dowar.xyz", "subject" => $subject];

  Mail::send(
    "emails.emailTest",
    ["name" => $name, "messageContent" => $messageContent], //Parametros
    function ($message) use ($messageData) {
      //Cuerpo del correo
      $message->to($messageData["to"]);
      $message->subject($messageData["subject"]);
    }
  );
}

Sustituimos:

contacto@dowar.xyz por el correo electrónico del destinatario.
emailTest por el nombre de nuestra plantilla.

Los parámetros son opcionales y estos nos servirían para agregar información a nuestro correo, en este ejemplo se está usando como parámetros el nombre y el mensaje y para usarlos dentro de nuestra plantilla los colocaremos entre {{}} tal como se mostró en el paso anterior.

Prueba de funcionamiento

Ahora solamente bastará con llenar el formulario y darle en enviar para posteriormente dirigirnos a nuestro inbox de Mailtrap donde podremos observar nuestro correo electrónico, cuando finalicemos nuestras pruebas bastará con sustituir la configuración de mailtrap que agregamos en el archivo .env por la de nuestro proveedor de correo electrónico.

Con esto habremos finalizado este tutorial, pero antes de irme quiero agradecerles por llegar hasta el final y además recordarles que ante cualquier duda pueden contactarme sin ningún problema.

Artículo de DowarDev Blog

Instalar PNPM en Linux, macOS y Windows

DowarDev — Wed, 06 Nov 2024 04:55:00 +0000

Como programador web seguramente escuchaste hablar sobre los gestores de dependencias, especialmente sobre NPM, durante mucho tiempo he trabajado con este gestor, pero hace poco le di la oportunidad a PNPM y valla que me sorprendió.

¿Por qué elegirlo?

NPM creará un directorio en la raíz de nuestro proyecto donde estará almacenando todas sus dependencias y esto se convierte en un problema si tenemos más de un proyecto en nuestro disco, en cambio, PNPM almacena todas las dependencias en una única ubicación y cuando un proyecto requiere de una de ellas simplemente se referencia a través de un enlace, también nos permitirá ser más eficientes a la hora de crear nuevos proyectos, ya que solamente se descargarán aquellas nuevas dependencias.

Instalación

Linux

Para los siguientes comandos no es necesario tener instalado Node.js.

curl -fsSL https://get.pnpm.io/install.sh | sh -

Si no tenemos instalado curl podemos intentar usando wget.

wget -qO- https://get.pnpm.io/install.sh | sh -

Windows

El siguiente comando lo tendremos que ejecutar usando PowerShell.

iwr https://get.pnpm.io/install.ps1 -useb | iex

macOS

Al igual que en Linux podremos hacer uso de los siguientes comandos y sin requerir Node.js.

curl -fsSL https://get.pnpm.io/install.sh | sh -

Si no tenemos instalado curl podemos intentar usando wget.

wget -qO- https://get.pnpm.io/install.sh | sh -

También podremos hacer uso del gestor de paquetes Homebrew.

brew install pnpm

Linux, macOS y Windows

Si contamos con Node.js instalado en nuestro sistema entonces podremos activar PNPM usando una herramienta que este nos provee, de lo contrario te comparto un post donde detallo como instarlo.

corepack enable

corepack prepare pnpm@<version> --activate

Artículo original dowar.xyz

Instalar NodeJS en Linux y Windows

DowarDev — Tue, 05 Nov 2024 20:23:13 +0000

Para poder hacer uso de NPM tendremos que instalar Node.js preferentemente la versión LTS, esto se recomienda porque las versiones LTS contienen menos errores y minimizando así los dolores de cabeza.

Linux

Usando gestor de paquetes

Para instalarlo en Linux podremos hacerlo ya sea usando el gestor de paquetes de nuestra distribución o usando NVM(node version manager)

Gestor de paquetes

Debian y Ubuntu

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Arch Linux

sudo pacman -S nodejs npm

openSUSE

sudo zypper install nodejs16

Nota
Reemplaza 16 con la versión deseada (14, 18, etc.)

Fedora

sudo dnf install nodejs

Nota
En sistemas del tipo rolling release siempre se instalara la utlima version dispible en los repositorios

Usando un manejador de versiones

NVM es un gestor de versiones para Node.js el cual nos facilitara la instalación y manejo de las versiones de Node.js en nuestra distribución y su instalación es muy sencilla.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Nota
Los siguientes comandos dependerán del intérprete de comandos que estemos utilizando en nuestro sistema.

Bash

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Fish

curl -sL https://git.io/fisher | source && fisher install jorgebucaran/fisher

fisher install jorgebucaran/nvm.fish

El primer comando nos instalará "Fisher" el cual nos permitirá dotar de funcionalidades a "Fish" mediante el uso de plug-ins, y el segundo comando nos instalará el plug-in que permitirá a Fish ser compatible con NVM.

Una vez tengamos instalado NVM ya podremos pasar a instalar Node.js

nvm install --lts

Este comando instalará la versión LTS, si deseas instalar otra versión simplemente modificar el comando de la siguiente forma, por ejemplo:

nvm install 14.7.0

Windows

Para la instalación en Windows podemos emplear el gestor de paquetes "Chocolatey" o usar el instalador que se encuentra en su página oficial

choco install nodejs-lts

Nota
Para poder hacer uso de este comando es necesario que tengas instalado este gestor de paquetes.

Con esto ya tendremos instalado NPM y Node.js en nuestro sistema operativo, ante cualquier inconveniente no dudes en contactarme.

Artículo extraído de

https://dowar.xyz/blog/post/15

Herramientas de Vue 3

DowarDev — Mon, 26 Jun 2023 14:50:39 +0000

Esta sería la primera sección de esta serie donde compartiré aquellas Herramientas que han hecho mi vida más fácil y que espero que a ustedes también.

Diario de Vue 3

DowarDev — Mon, 26 Jun 2023 14:48:45 +0000

A lo largo de mis 5 años de experiencia he tenido la oportunidad de conocer y probar muchas herramientas que han sido de gran utilidad, por esta razón decidí empezar con esta serie donde compartiré mi conocimiento adquirido de este maravilloso framework.

Contenido

LifeLine #2 (v0.9.0)

DowarDev — Mon, 26 Jun 2023 07:56:00 +0000

Estoy emocionado porque cada vez se está más cerca de lanzar la primera versión estable, la cual incluiría lo siguiente:

Gestor de eventos y tareas
Sincronización de eventos y tareas en todos los dispositivos en donde se inicie sesión.

Para esta versión(0.9.0) ya se encuentra funcionando la sincronización de eventos, además de que se estrena un nuevo diseño minimalista y centrado en la funcionalidad.
Para la siguiente versión se espera tener lo siguiente:

Sincronización de tareas
Crear listas de tareas
Crear múltiples calendarios

Estos cambios ya se encuentran en la rama principal del repositorio, al igual que el sitio web, la aplicación ha estado disponible solamente para testers, pero desde esta versión ya estará disponible como primera versión disponible para el público general, tan pronto como sea verificada por la tienda, actualizaré el link de este post además de que será compartido por las redes sociales.

Enlaces de interés

Instalación y conceptos iniciales

DowarDev — Mon, 19 Jun 2023 13:16:43 +0000

Bienvenidos al primer capítulo de este curso con el que iniciaremos aprendiendo a como generar un proyecto, conceptos básicos y la estructura del mismo.

Requisitos

Para generar un proyecto de Vue es necesario que contentos con gestor de dependencias para javascript tales como NPM, yarn o PNPM siendo mi recomendación este último del cual dispongo un post donde explico como instalarlo.
Como recomendación personal recomiendo tener instalada alguna extensión en nuestro editor que funcione como lsp de Vue tal como volar, ya que esta nos proporcionará varias funciones tales como
- Detección de errores.
- Navegación entre componentes.

Nota
El gestor de paquetes que estare usando sera pnpm y los comandos que se indiquen a lo largo de este curso puede variar.

Creación del proyecto

Accedemos a nuestra terminal y con nuestro gestor de paquetes ejecutamos

pnpm create vue

Con esto se nos proporcionará un pequeño cuestionario que nos permitirá adaptar el proyecto a nuestras necesidades

Project name: … <your-project-name>
Add TypeScript? … No / Yes
Add JSX Support? … No / Yes
Add Vue Router for Single Page Application development? … No / Yes
Add Pinia for state management? … No / Yes
Add Vitest for Unit testing? … No / Yes
Add an End-to-End Testing Solution? … No / Cypress / Playwright
Add ESLint for code quality? … No / Yes
Add Prettier for code formatting? … No / Yes

Por el momento no te abrumes con el significado de estas, ya que lo iremos aprendiendo a lo largo del curso.

Accedemos al directorio de nuestro proyecto e instalamos las dependencias

cd <nombre del proyecto>
pnpm i

Estructura

Nota
Dependiendo de lo que respondiste en el cuestionario anterior podría variar la estructura existiendo mas o menos directorios/ficheros.

Index.html Para el que no lo sepa Vue funciona bajo la estructura de un SPA, aunque se puede trabajar de la forma tradicional, está pensado para funcionar como una SPA y es aquí donde colocaremos toda información relacionada con nuestro sitio web como el nombre, icono(el que aparece en la pestaña), lenguaje en el que está desarrollado, entre otras cosas. Este lo podremos encontrar en la raíz de nuestro proyecto.
package.json En él podremos encontrar una lista con todos los paquetes necesarios para el funcionamiento de nuestro proyecto.
public/ En él colocaremos aquellos assets que no requieran procesamiento, por ejemplo el icono del sitio web.
tsconfig Aquí colocaremos toda la configuración referente a TypeScript en el caso de que en el cuestionario seleccionemos la integración del mismo.
vite.config Los plugins y configuraciones referentes a Vite las colocaremos aquí.
src/ Este es el directorio donde pasaremos la mayor cantidad de tiempo, ya que es aquí donde colocaremos los assets, vistas, componentes, rutas, etc.
src/assets Los assets son básicamente todos los ficheros requeridos por nuestro proyecto como imágenes, videos, etc.
src/components La forma de funcionar de este tipo de frameworks es bajo el uso de componentes, los cuales son piezas de código que podremos reutilizar dentro de nuestras vistas.
src/views Las vistas es lo equivalente a las páginas que podremos encontrar en cualquier otro sitio elaborado con HTML.
src/router/index En un punto anterior mencioné que Vue puede trabajar como un SPA y esto se logra gracias al router, ya que este contiene todas las rutas de nuestro.
src/App.vue Este es el componente raíz el cual se encarga de cargar elementos como routerview que es donde se renderizan nuestras vistas.
src/main Aquí podremos encontrar la lógica de nuestro proyecto Vue porque podremos encontrar el archivo CSS, la importación del App.vue y el router, entre otras cosas.

Conceptos

SPA Una Single Page Aplication es definido como una aplicación de una sola página, como vimos anteriormente podremos encontrar un index.html y un App.vue, cuando accedemos a una ruta de nuestro router esta nos redirigirá a la vista correspondiente(view) la cual será renderizada en un el App.vue y posteriormente este mismo en el index.html, a este tipo de aplicaciones se les conoce de esta forma, ya que todo se renderiza dentro del mismo archivo html en lugar de tener varios como un sitio web convencional.
Para más información visitar el siguiente video.

ruta Las rutas son el equivalente a las direcciones web, las cuales hacen referencia a los diferentes archivos HTML de nuestro sitio web, pero en este caso referencian a nuestras vistas.
vite es herramienta de compilación que fue creada por el mismo desarrollador de Vue, antes de la existencia de este se usaba webpack, básicamente este prepara nuestro proyecto para poder ser alojado en un hosting. TypeScript básicamente es un JavaScript mejorado, ya que añade funciones como el tipado el uso de interface, entre otras cosas.

Final

Trate de ser lo más claro y conciso posible, cualquier duda o aclaración siéntete libre de contactarme, nos vemos en un siguiente post.

Curso de Vue 3

DowarDev — Mon, 19 Jun 2023 13:10:44 +0000

Vue es uno de los frameworks JavaScript más famosos de la actualidad,
este framework es recomendado para aquellos que tienen poca o nula
experiencia manejando este tipo de herramientas, ya que su curva de
aprendizaje es muy baja en comparación con React o Angular, pero no te
confundas por el hecho de que el que sea fácil no quiere decir que no
sea potente, pues todo lo contrario pues este se adapta a todo tipo de
necesidades.

Requerimientos

Conocimientos básicos en HTML, CSS y JavaScript
Conocimiento básico en TypeScript(opcional)

Dinámica

Primero empezaremos aprendiendo lo básico e iremos subiendo de nivel progresivamente para al final terminar aplicándolo en un proyecto.

Índice de contenido

Conforme se vayan creando los capítulos del curso iré actualizando este índice para que sea más fácil para ustedes el tener a mano todo lo aprendido a lo largo de este curso.

Sin más que decir me despido y los espero en el primer capítulo de este curso.

LifeLine Blog #1

DowarDev — Thu, 15 Jun 2023 15:53:28 +0000

Razón de su existencia

Siempre he sido una persona que le da bastante prioridad a su tiempo y trata en lo máximo posible usarlo en cosas productivas, por esta razón llevo ya un tiempo buscando una aplicación que me permita ser más eficiente con el mismo, pero ya me canse de esperar, fue cuando un día desperté por la mañana y me dije a mí mismo eres programador ya es hora de que plasmes eso que tienes en la mente en código y a su vez en algo funcional y quizá con esto también ayudes a otras personas que podrían tener el mismo problema que tú.

El mercado

Las aplicaciones que existen actualmente en el mercado no me cumplen en su totalidad lo que yo necesitaba, ya que simplemente se limitan a ofrecerte ya sea un calendario o un gestor de tareas y era raro aquella que te ofrecía ambas, pero yo necesitaba más, yo quería algo que me permitiera analizar mi día a día más allá de solamente organizarlo y con esto poder tomar acción sobre el mismo, sé que por el momento puede ser algo difícil entender lo que trato de explicar en esta primera entrada del blog, pero cuando puedan analizar por su cuenta la aplicación quizá entiendan mejor todo esto.

Avances

A la fecha en la que se publica esta entrada los avances no son muy significativos, por lo tanto, no sirven como ejemplo para todo lo que trato de expresar en mis anteriores palabras, lo que podrán observar si acceden al sitio web es lo siguiente:

Calendario semanal.
Gestor de tareas con dos vistas.
- Clásico(checklist).
- Kanban,
Integración con wakatime(por el momento solo mostrar total del día).

Que sigue?

Antes de continuar con nuevas funciones necesito pulir lo poco que mencione en el punto anterior, pero después de eso quiero agregar lo siguiente:

Integración con otros servicios como Todoist, Google calendar, Google fit, etc.
Un gestor de extensiones con el cual puedas tener solamente aquello que desees utilizar de la aplicación y así evitar que esta tenga un tamaño excesivo e innecesario.
Una línea de tiempo de todas las actividades que realizas, para lograr esto se usara lo siguiente:
- Extensión de navegador que analizara las páginas que visitas y el tiempo que permaneces en ellas.
- Extensión de la aplicación móvil/escritorio realizará lo mismo que la extensión del nevegador solamente que en tu dispositivo móvil y computadora.
Capacidad para guardar información(documentos) sería algo parecido a un bloc de notas pero con unos cuantos añadidos.

Esto apenas comienza

Sé que se ve como un proyecto demasiado ambicioso y más porque solamente está siendo desarrollado por una única persona, pero a pesar de eso no pasa ni un solo día en el que no esté trabajando en hacer este proyecto realidad.

Agradecimientos

Gracias por haber llegado hasta este punto y espero que este proyecto te llega a ser de utilidad.

Media queries in Vuejs

DowarDev — Fri, 16 Apr 2021 06:03:13 +0000

Vue has become my favorite JavaScript Framework for many reasons, but this time I am not talking about that but about an NPM package that allows you to render certain content from your template depending on the size of the screen.
As FrontEnd developers it is our duty to adapt our web applications to different screen resolutions to offer the best possible experience, that is why while I was developing a website I had the need to change some elements depending on the device with which it was being used accessing.

Requirements:

Vue 3
NPM

We execute the following command in the terminal
npm install vue3-mq

To finish its installation and configuration we will go to our main.ts file where we will import the package and add the screen resolutions, in the end it should look similar to the following:


import { createApp } from "vue";
import VueMq from "vue3-mq";

const app = createApp({});

app.use(VueMq, {
  breakpoints: {
    sm: 450,
    md: 1250,
    lg: Infinity,
  }
})

app.mount('#app');

We will place the content between the labels
<mq-layout mq="lg"></mq-layout>
where mq is the property where we will indicate the screen resolution for that content to be displayed.

An example of use would be the following:


<mq-layout mq="lg">
  <span> Display on lg </span>
</mq-layout>
<mq-layout mq="md+">
  <span> Display on md and larger </span>
</mq-layout>
<mq-layout :mq="['sm', 'lg']" tag="span">
  Display on sm and lg
</mq-layout>

Quite simple truth, with this we have finished and I hope that you also find it useful as it was for me, but I still cannot withdraw without first providing you with the developer repository of this NPM package https://github.com/craigrileyuk/vue3-mq.

Don't forget to program with ♥ ️.