DEV Community: Dennis Quesada Cruz

Changing AntD locale dynamically

Dennis Quesada Cruz — Mon, 17 Jan 2022 21:08:53 +0000

Hello devs, it's new year and here i'm struggling with React and AntD.
I'm trying to change AntD locale dynamically. As documentation refers, AntD has a context that wraps , its receives 'lang' as a prop.
So here i'm doing this dumb thing:

import i18n from './i18n'

ReactDOM.render(
  <React.StrictMode>
    <ConfigProvider locale={i18n.languages[0]}>
      <App />
    </ConfigProvider>
  </React.StrictMode>,
  document.getElementById('root'),
)

And of course, when i change the language nothing happens, the docs says that we have to set up a local state or so, but i'm really lost there. Any idea?

Creando un sencillo sistema de notificaciones en Vue3 con TailwindCSS (MerakiUI)

Dennis Quesada Cruz — Mon, 25 Oct 2021 20:42:15 +0000

Hola a todos, dicen por ahí que es bueno escribir artículos técnicos porque así reafirmas lo aprendido, pues, en esta ocasión, voy a seguir con Vue3 y hoy particularmente con TailwindCSS y MerakiUI, creando un sencillo sistema de notificaciones para tu app.

TailwindCSS

Es una potente librería de utilidades para CSS, te ahorrará mucho tiempo a la hora de escribir tus estilos, aunque, NO reemplaza al CSS puro.

MerakiUI

Una librería de componentes responsivos y limpios, basada en Flexbox y Grid, completamente responsiva.

Motivación

En mi tiempo libre por las noches, he estado ¨rehaciendo¨ una app que tengo online y en producción desde principios de año, he querido hacerla lo mas ligera posible y por eso la estoy rediseñando y reescribiendo desde 0 con Vue3 y TailwindCSS, actualmente esta con Vue2 y Vuetify + otras deps, y no por hecharle tierra a Vuetify, pero está bastante pesadita.

Notificar o no notificar?

Una de las cosas mas importantes en tu app y UX es la interacción con el usuario, las buenas prácticas dictan de informar al usuario qué esta pasando con sus acciones, si se completaron o si terminaron en un error, aquí entran las alertas, hay N+1 librerías open source que te permiten gestionarlas, pero quiero depender lo menos de 3ros, asi que me puse a intentar construir mi propio sistema.

Manos a la obra

Lo primero que tuve en mente fue armar un composable que gestionara todo lo de las alertas

Archivo: useToast.ts



import { ref } from 'vue';

// Este arreglo contendrá las notificaciones
const messages = ref<ToastOptions[]>([]);

const useToast = () => {
    // Empuja una nueva alerta al arreglo
    const addAlert = (options: ToastOptions) => {
        messages.value.push({
            id: options.id,
            message: options.message,
            type: options.type || 'success',
        });
       // A los 3 segundos, que se disipe.
        setTimeout(() => {
            messages.value.length > 0 ? removeAlert(messages.value.findIndex((item) => item.id === options.id)) : null;
        }, 3000);
    };
    // Remueve el elemento del arreglo de mensajes
    const removeAlert = (index: number) => {
        if (index > -1) {
            messages.value.splice(index, 1);
        }
    };

    return {
        messages,
        addAlert,
        removeAlert,
    };
};

export default useToast;

De esa forma podemos traernos useToast() a cualquier parte de nuestra app.

Continuamos con el componente:
Archivo: alert.vue



<template>
  <div
    v-for="alert, index in messages"
    :key="index"
    ref="item"
    class="absolute right-5 top-5 flex w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 animate-fadeIn"
  >
    <div
      :class="`flex items-center justify-center w-12  ${alert.type === 'error' ? 'bg-red-500' : 'bg-green-500'}`"
    >
      <svg
        class="w-6 h-6 text-white fill-current"
        viewBox="0 0 40 40"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"
        />
      </svg>
    </div>

    <div class="px-4 py-2 -mx-3">
      <div class="mx-3 w-11/12">
        <span
          :class="`font-semibold ${alert.type === 'error' ? 'text-red-500' : 'text-green-500'} dark:text-red-400`"
        >{{ alert.type === 'error' ? 'Error' : 'Completado' }}</span>
        <p class="text-sm text-gray-600 dark:text-gray-200 w-full">{{ alert.message }}</p>
      </div>
    </div>
  </div>
</template>


<script lang="ts">
import { defineComponent, PropType } from "vue"; export default defineComponent({
  props: {

    messages: {
      type: [] as PropType<ToastOptions[] | null>,
      default: []
    }
  },
})
</script>

El componente recibirá como props el arreglo de mensajes que habíamos definido en useToast(), ya luego solo queda usarlo en App.vue

Archivo: App.vue



<template>
  <Alert :messages="messages" />
  <default-vue />
</template>

<script lang="ts">
import DefaultVue from "./layouts/Default.vue";
import Alert from "./components/common/alert.vue"
import { defineComponent } from "vue";
import useToast from "./utils/useToast";

export default defineComponent({
  components: {
    DefaultVue, Alert
  },
  name: "App",
  setup() {
    const { messages } = useToast()
    return {
      messages,
    }
  }
})
</script>

Para llamar a la alerta desde cualquier lado:



import useToast from './useToast';
const { addAlert } = useToast();

addAlert({id: generateGuid(),
message: error.message,
type: 'error',
});

Resultando en:

Y hasta aquí este sencillo artículo, espero les haya servido de algo

¿Para mejorarlo?:

Hacer que una alerta este por debajo de la otra y se acumulen
Adicionar un boton de cerrar la alerta.

Cualquier comentario y/o crítica es bienvenida!

Modularizando el store de Vuex

Dennis Quesada Cruz — Sun, 08 Aug 2021 22:07:16 +0000

Hola amigos, en este post voy a estar compartiendo con ustedes cómo modularizar el store de Vuex. Vuex nos permite tener un store en nuestra app, un lugar donde se va a centralizar información necesaria que sea usable por múltiples componentes.

Como refiere su documentación, hay veces que tu store va a crecer mucho debido al alcance que tenga tu app, es por eso que hay que recurrir a la modularización para que todo quede mas organizado y legible. Quizás tengas manejo de autenticación, manejo de perfiles y modelos etc.

Creando el módulo

El primer paso que debemos hacer es crear un nuevo archivo dentro del directorio /store con el nombre representativo de lo que estamos modularizando, en mi caso es User, así que voy a terminar con un archivo user.js dentro del directorio store.

Seguidamente lo vamos a popular con un objeto que contiene las mismas propiedades que el store.

export const UserModule = {
  state: () => ({
    userPets: [],
    user: user,
    token: null,
    isAuthenticated: userService.checkAuth(),
 }),
mutations: {
    // Tus mutations aquí
 },
actions: {
    // Tus actions aquí.
 },
// Demás propiedades del Store de Vuex
}

Y bien, ya así tenemos hecho nuestro módulo, pero, como lo conectamos con el store principal?

Sencillo, basta con traernos el módulo a nuestro index.js dentro del directorio store.

import { UserModule } from './user' // Importar el módulo recién creado

export default new Vuex.Store({
  (...)
  modules: {
    user: UserModule // Especificamos que usaremos el módulo
  },
  state: {
    // Tu estado general 
  },
  mutations: {
   // Tus mutations generales
 }
// Demás propiedades del store. ej: Getters..
}

Y listo, ya Vuex sabe que debe importar nuestro recién creado UserModule en el store. Es válido aclarar que los módulos pueden acceder al estado general en sus actions, pasando a rootState como parámetro. Veamos un ejemplo:

// Un action cualquiera, pasamos rootState dentro del objeto deconstruido
isAdopted( { dispatch, commit, rootState }, petid) {
      petService.adoptPet(rootState.user.token, petid).
        then(response => { (...) }
}

Otra cosa que podemos destacar, es que los actions dentro de tus módulos van todos a un solo arreglo. Por eso debes cuidar de no escribir 2 actions con el mismo nombre en varios módulos, a no ser que establezcas la opción de namespaces, lo cual si permitiría varios actions con el mismo nombre.

Accediendo al estado modularizado

Como refiere su documentación, desde nuestros componentes podemos acceder al estado de la forma:

store.state.user // -> El estado de `UserModule`
store.state.x // -> El estado de `x` módulo que tengamos

Resumiendo

Bien, y esto ha sido todo, como ven es muy sencillo y por su puesto, hay más opciónes que tenemos a disposición para mejorar nuestros módulos.

Repaso:

Crear un archivo JS y dentro exportar un objeto con un estado, actions, mutations, getters que deseemos aislar.
Importar en el store index dicho módulo y pasarlo en la propiedad de modules
Consumirlo en los componentes con store.state.modulox

What's the proper way to run a DotNet ef migrations when deploying with Docker

Dennis Quesada Cruz — Wed, 27 Jan 2021 02:23:01 +0000

Hello Devs, im looking for the best aproach to update the app database (DotNet WebApi) when deploying to a Docker Container. This is what i have so far:
1 - Tried to run a migration inside the startup class using context.Database.Migrate(), for some reason didnt work.
2 - Compose build and up, then manually 😅 run bash inside the aspnet container, install ef tool, add the migration and update database.
3 - Get the SQL script runing DotNet ef migrations script and putting it inside a seed. SQL on the Postgres container.

Im wondering if there is a automatic way to do that?

2020. Mi jornada hasta hoy.

Dennis Quesada Cruz — Wed, 23 Dec 2020 16:50:45 +0000

Si, ya lo sé, este año ha sido todo un problema, aunque siempre algo bueno se le pudo sacar. En este post, mi primero de hecho, voy a contarles un poco sobre lo que ha sido mi experiencia con la programación.

Nunca estuve más cerca de la programación antes, a pesar de que me gradué como IT en 2008, no había visto/considerado programar seriamente. Tal vez porque uno no encuentra trabajo como desarrollador tan fácil. Luego de salir del instituto, siempre trabajé dando soporte técnico hasta que cambié de trabajo para una empresa en donde me tuve que involucrar un poco más con programar.

Como muchos, comencé con Python, y un libro muy bueno de la serie Head First. Fue la recomendación de un amigo, que dominara primero el lenguaje antes de saltar de lleno a un Framework y así lo hice.

Django fue mi primera experiencia, y aquí tiene tremenda popularidad, así que estuve haciendo el tutorial oficial y sintiéndome cómodo con el framework. Ah claro, ya tenía algo de experiencia con HTML y CSS muy básico. Aprender el ciclo de vida de los requests y el modelo vista plantilla fue muy interesante y enriquecedor.

Luego tuve la oportunidad de crear, con la ayuda de la comunidad de Django Cuba en Telegram (y la de Dev.To también), un pequeño sistema para el departamento comercial, usando Django

dcruz1990 / django-misclientes

A simple django app to manage clients

django-misclientes

A simple django app to manage clients

Thanks to all Django Cuba Telegram Group!!!!!

Luis Miguel Pozo Gonzalez
@codeshard
@felix Pupo
@guillermo Roig

Create virtual environment and install requirements

Clone this repository

git clone https://github.com/dcruz1990/django-misclientes

Define virtualenv environment

virtualenv -p python .venv

Install requirements

pip install -r requirements

Install WeasyPrint

Please follow this official guide.

If you are using Debian like distributions you need to install these packages:

sudo apt-get install build-essential python3-dev python3-pip python3-setuptools python3-wheel python3-cffi libcairo2 libpango-1.0-0 libpangocairo-1.0-0 libgdk-pixbuf2.0-0 libffi-dev shared-mime-info

Run server in local environment

Run makemigrations

python manage.py makemigrations

Run migrations

python manage.py migrate

Compile .po to .mo

python manage.py compilemessages

Update assets

python manage.py collectstatic --noinput

Run server for development

python manage.py runserver

Visit you application

http://localhost:8000/

Run with Docker

Requirements

Docker
docker-compose
Docker image for python >= 3.6 (https://hub.docker.com/_/python)
Docker image for nginx:alpine (https://hub.docker.com/_/nginx)

Build and run containers

…

View on GitHub

, ya ahí me despegué un poco de los tutoriales y ya tuve que incorporar un poco de CSS con MaterializeCSS. A pesar de que hay miles de soluciones open source al problema de llevar los clientes y contratos de una empresa, fue toda una experiencia. Eso fue aproximadamente en abril del 2019.

También tuve la oportunidad de colaborar con un amigo en su blog personal, usando Asp Net Core y Angular. Y ayudar en su despliegue usando Docker y Nginx como proxy reverso. Otra maravillosa experiencia.

Si has leído hasta aquí, pues esta es mi jornada bien resumida con la programación, muchas horas de desvelo debido a que en donde vivo el Internet era muy lento

What would be the best night time to code?

Dennis Quesada Cruz ・ Feb 7 '20 ・ 1 min read

#discuss

-recientemente pusieron celdas LTE-, estados de ánimo cambiantes, altas/bajas en fin. La programación requiere mucho esfuerzo y dedicación, no es cosa de un día, aun así personalmente siento que he crecido mucho en este año 2020.

Espero que tú también hayas tenido buenas experiencias en este, casi finalizado año 2020. ¿Podrías compartir algunas?

I have a infinite loading Dev.To index on my Android app.. why?

Dennis Quesada Cruz — Mon, 09 Mar 2020 16:00:25 +0000

A few days ago I began to notice that the Dev.To Index in my Android app does not fully load, it stays there forever. I even checked that I had internet at a good speed. If I leave my account everything goes normal, I already uninstalled it several times and it does the same. Does anyone have any idea?

What would be the best night time to code?

Dennis Quesada Cruz — Fri, 07 Feb 2020 02:55:32 +0000

I have this situation, my full time job consumes most of the morning, so I have availability at night to work remotely, also at that time (much better at dawn) is when I have a better 3G connection.

In your experience as developers, what would be the best practice, getting up at 2 am or going to bed a little later?

Can't change Kestrel default listening port when publishing.

Dennis Quesada Cruz — Wed, 29 Jan 2020 20:30:21 +0000

Hello community, it turns out that I have an app with Netcore3.0 which I want to publish on a linux server. In my development environment, Kestrel works perfectly listening on port 5050, when it runs in the (local) production environment, it also listens on 5050.
The problem is when it is published, which somehow does not preserve the value of the established port, and starts listening to the default port.

This is the command I use to publish:

dotnet publish --configuration Release

Apparently my environment variables are fine.
I have checked the json file launchSettings and ensured that it is fine.
I tried copying the appsettings jsons for the / bin / Release / netcoreapp3 / directory and it doesn't work.
Tried adding

Could you guide me in what other way I can change the default port of Kestrel or where else should I check again?

Can't make a search on Dev.To :(

Dennis Quesada Cruz — Tue, 07 Jan 2020 18:36:14 +0000

Every time I try to do a search here I get a blank screen, with the normal styles and menus of Dev.To but with nothing in the result .. same with the app on Android.
Will it have something to do that I access from Cuba?

Getting duplicated objetcs in ArrayList

Dennis Quesada Cruz — Thu, 06 Jun 2019 20:10:00 +0000

Greetings community, it turns out that I have a job for the university, it's something very simple but I find it complex to achieve since I do not have much experience with Java.

I have a list of objects in an ArrayList, I can add, delete and do other operations with that list using a "for each" loop. But I do not know how to count the objects on the list that are repeated. I have looked at some articles but they are with lists of integers as an example, where one can create another Array and iterate over both and compare the values of the positions.

How would you proceed with an ArrayList of objects?

WeasyPrint impossible to install via PIP3

Dennis Quesada Cruz — Mon, 22 Apr 2019 16:04:41 +0000

These days I was asking for help to deploy an ultra simple Django app, in the end I could not solve any of the paths that some friends suggested, so I decided to install the same OS that I have on the laptop in a virtual machine on the server waiting so that WeasyPrint did not give me problems.
But the sad reality was again I could not install it, pip3 remains freezed although I executed the command with administrative permissions.
This is a new package VM, just install python3-pip and all its dependencies (which are many).
I find it curious that same thing happened to me with the Debian 9 container.
What am I not doing? This already has me very badly the truth, it is something very simple that I have not been able to do. And the last thing I have left is to remove the functionality to my app to be able to export to PDF but that makes no sense. :(
can anybody help me?

I know it's something very basic and absurd but I do not know how to do it, sorry ...

Here is the verbose:
https://thepracticaldev.s3.amazonaws.com/i/uzpbxcvarp7odvajqoyt.png

Help on Django Deployment

Dennis Quesada Cruz — Sat, 20 Apr 2019 11:34:39 +0000

For a little more than a month, I have been writing a simple app with Django to manage the client files in my company, I have Deepin operating system 15.9.
As I am new I made the mistake of not creating a virtual env, so now when I try to deploy the app in a Debian 9 container, I have errors with WeasyPrint, cairocffi seems not to install at all ... despite getting the message of pip satisfactory when installing WeasyPrint.
Then, tired and disappointed, I changed 2 views to the xhtml2pdf library, I also did not succeed because it showed an encoding error when using Latin-1, I tried to try UTf-8 and it get Unsuported Type error.
On Monday I will try to install Deepin on the server and try with WeasyPrint again ...
Any ideas to solve this ????