Empieza a practicar los conceptos básicos de la programación (parte I)

Entorno de Desarrollo

Lo primero que necesitamos es un entorno de desarrollo. Si ya cuentas con uno, úsalo. Este artículo no se centrará en cómo instalar o configurar uno, pero te proporcionaré el enlace a un entorno en línea para que puedas practicar usando Java mientras lees este artículo.

Enlace al entorno de desarrollo en línea: https://www.mycompiler.io/es/new/java

1. Conceptos a Trabajar: Salida de Datos, Variables y Condicional "if"

   Salida de Datos:

   Nuestro programa nos ofrece una estructura predefinida. Buscaremos nuestra área de trabajo. En este caso, he utilizado "//" para comentar una línea ,y que puedas identificar fácilmente el área en la que trabajaremos.

Escribiremos nuestra primera línea, la cual hará que nuestro programa nos devuelva un texto (en nuestro ejemplo, hacemos clic en el botón verde de ejecutar):

System.out.println("texto a mostrar");

En nuestro entorno, por el momento, solo nos importan estas tres partes: el texto que escribiremos, el texto que nos devuelve el programa ,y el botón para ejecutar o correr el programa.

Hagamos un ejemplo propio. Cambia el texto por lo que tú quieras imprimir en el mensaje. **Por favor, escribe algo propio para que no solo sigas mis pasos, sino que empieces a soltarte y experimentar con el programa**.

Aquí está el mío:

2. Variables:

En programación, las variables son como cajas imaginarias donde puedes guardar cosas.

Escribiremos este código en nuestra área de trabajo y notaremos que el resultado del programa es el mismo.

** Trata de seguirme; ahora explicaré algunos detalles**

yo lo comentare un poco para ir ayudándote a entender lo que hicimos.

Has tus propias pruebas cambiando el nombre de la variable y el texto que guardara.

aquí mi ejemplo;

Nosotros podemos guardar en las variables más tipos de datos, no solo texto; también podemos almacenar números y otros tipos que no tocaremos ni profundizaremos en este artículo.

Escribiremos más artículos sobre el tema en el futuro; aquí tendrás su enlace.

2. Condicionales:

Los utilizaremos para ejecutar uno u otro código dependiendo de la situación (una bifurcación). Pero vayamos construyendo un ejemplo sencillo

esta es la estructura mas básica que podemos tener

Escribamos algo dentro del "if" y veamos que sucede .

La línea que agregamos debería imprimir nuestro mensaje en pantalla, pero falló... (no entres en pánico). Nuestro "if" necesita un estado "true" o "false" (verdadero o falso, encendido o apagado) para funcionar. Agregaré una imagen con ambos estados y veremos qué sucede.

Los condicionales sirven para ejecutar o no algo dependiendo de una evaluación (por ejemplo, el "if" evalúa "true" o "false", si algo es cierto o falso). Hasta aquí entendemos un poco cómo funciona. Compliquémoslo un poco más.

En lugar de "true" o "false", directamente vamos a enviarle información a evaluar.

**Aquí vemos un detalle curioso: el uso de == en programación es utilizado para comparar. Esto se explicará con más detalle en un artículo sobre signos de comparación**.

Si la comparación que estructuramos resulta verdadera ("true"), permitirá la ejecución del código que hemos escrito dentro; de lo contrario, lo ignorará. Voy a dejarte algunos ejemplos más.

hagamos un ejemplo incluyendo variables.

un ejemplo mas , pero evaluando variables dentro del "if".

"Tarea: con esta estructura 'if' tan simple, crea tus propias modificaciones y ejemplos, tan complicados o sencillos como puedas. Atrévete a explorar hasta qué punto puedes complicar el programa, ya sea con tu propia lógica o investigando un poco en internet. Puedes tomar capturas de pantalla y enviármelas para obtener retroalimentación, o simplemente seguir celebrando tu progreso."

**Si quieres tomar una clase para un lenguaje o tema en especifico puedes dejarme un mensaje **

Conclusiones:

En este artículo, trabajamos exclusivamente con el tipo de dato String (texto) ,y algunos números. El objetivo era introducirnos en estos tres conceptos fundamentales de la programación y comenzar a practicar. Es importante tener en cuenta que estos conceptos requieren una mayor profundización, pero queríamos proporcionarte suficiente material para que pudieras practicar y empezar a modificar lo aprendido. La práctica constante es esencial para prepararte para el siguiente artículo. Si encuentras algún problema, no dudes en enviarme un mensaje. Recuerda que este artículo es una guía de un curso gratuito de programación.

Agregando Campos Timestamp en un Entity de NestJS

Los campos timestamp son cruciales para rastrear la creación y actualización de registros en una base de datos. En entornos NestJS con TypeORM, simplificar la implementación de estos campos en un entity es clave. Este artículo presenta una guía concisa sobre cómo agregar campos timestamp en un entity de NestJS.

**Aqui tomamos en cuenta que ya has trabado un poco con Entity NestJs y TypeORM**

@Entity()

export class TuEntity {

  @PrimaryGeneratedColumn()

  id: number;

  // Otros campos del entity

//decorador e implementación para dar la fecha de creación de la columna

  @CreateDateColumn()

  createdAt: Date;

//decorador e implementación para dar la fecha de actualización de la columna

  @UpdateDateColumn()

  updatedAt: Date;

}

Como aprender ingles gratis (Mi sugerencia).

Debemos ir adquiriendo el idioma no aprenderlo. 

para adquirir el idioma hay que vivirlo y sobre todo disfrutarlo, para esto puedo darte estos tips o sugerencias que yo aplico a diario , si diario, si no metes el idioma poco a poco en tu vida y lo haces tu día a día nunca lo vas a adquirir.

Primer paso (considero obligatorio), de 5min a lo que te entretenga. 

Debemos escoger una serie que nos agrade mucho, que tenga la capacidad de audio en ingles con subtítulos en ingles , y si la hemos visto cientos de veces sin cansarnos pues mucho mejor.

por ejemplo;  yo empecé con malcom el de enmedio (ya que es una serie que puedo disfrutar y entender incluso sin escuchar el audio)

Debemos intentar verla diario , ¿Cuánto tiempo? , de 5min a todo un capitulo completo , (no te fuerces, si son 5min nadamas , son 5min y ya ,  si estas entretenido sigue viéndola, todo puede depender de tu capacidad en ese día).

Al inicio va a parecer difícil , pero iremos haciendo una relacion mental ; texto-imagen-situación (recuerda lo mas difícil esta al iniciar y tu ya lo estas logrando).

**para el paso 2 hay varias opciones o puedes hacer todas juntas , revisa alguna y pasa al paso 3**

Paso 2.1 (opcional) , dedícale de 5min a 10min.

Consíguete una guía de ingles , por ejemplo si eres super principiante inicias en el nivel A1.

(post con los niveles)

-Sacas un temario de ese nivel , por ejemplo yo saque uno de chat gpt.

Link (aqui ira el link).

Tomamos un tema de la guía y buscamos en YouTube (videos habrá miles para escoger de todos los sabores y colores) ,  lo importante no es el video si no aplicar el aprendizaje en el paso 1.

Por ejemplo.  

Saludos y Presentaciones:

En ingles seria Greetings, si puedes encontrar el video en el idioma que quieres aprender pues mejor.

por ejemplo yo escogí este

https://www.youtube.com/watch?v=X2gvuL6ZZXQ

Al ser videos tan básicos vas a poder entenderlos aunque no estén en tu idioma natal, si después de repetirlo 2 o 3 veces y no alcanzas a captar nada , cámbialo o busca uno en tu idioma natal (pero eso lo recomiendo menos).

Puedes tener un cuaderno de apuntes , tomar apunte del video , pero todo en el cuaderno debe ser en el idioma que quieres aprender (repito en tu idioma natal), si no encuentras las palabras adecuadas intenta dibujarlo o hacer un diagrama.

Paso 2.2 (opcional) , dedícale de 5min.

baja una app para aprender ingles y dedícale 5min max.

yo te sugiero , si eres muy básico Duolingo no esta mal, pero yo uso una app llamada cake , esta tiene 1 conversación al día gratuita (no necesitas mas)

Escucha la conversación , practícala y toma apuntes (no tomes mas de 5min) , lo importante será aplicarlo en el punto 1 y entre menos información puede ser menos agobiante para ti.

(aquí anexare en el futuro una guía mas completa de como entrar)

Paso 2.3 (opcional), dedícale 5min max. (ve paginas relacionadas con memes en el idioma que quieres aprender y relaciona frases con imágenes)

por ejemplo yo encontré esta , sin saber su significado literal ya puedes deducir lo que quiere dar a entender.

Puedes tener un cuaderno de apuntes , pero todo en el cuaderno debe ser en el idioma que quieres aprender , si no encuentras las palabras intenta dibujarlo o hacer un diagrama.

Paso 3. Juntar el paso 1 y cualquiera en los pasos numero 2, tomas tu cuaderno o tienes en mente lo que aprendiste y tratas de encontrar esas palabras-frases-relaciones en la serie que estas viendo, incluso te vas a dar cuenta que hay mas palabras o frases en ingles que conoces de las que creías.

Conclusión

-Lo importante es ir aprendiendo el idioma en el mismo idioma poco a poco , adquirir un idioma toma tiempo , no hay caminos rápidos , solo se logra con dedicación y puedes iniciar con 10min diarios y sin sufrir tanto con esta guía, si te surgen mas problemas no olvides dejarnos en los comentarios.

**este post tiene modificaciones por hacer para hacer un mejor entendimiento, recuerda que puedes aportar para ello***

HSL vs RGB in web design: Which one to choose?

 

Color is an essential part of web design. The colors you choose can have a big impact on how users perceive your website.

In this blog post, we'll discuss the HSL and RGB color models, and how to choose the right one for your web design.

What is HSL?

HSL stands for hue, saturation, and lightness. It is a color model that describes a color in terms of three properties:

• Hue: Hue is the color itself. It is measured in degrees from 0 to 360 on the color wheel.
• Saturation: Saturation is the intensity of the color. A saturated color is very bright and pure, while a desaturated color is more muted.
• Lightness: Lightness is the brightness of the color. A light color is brighter, while a dark color is darker.

What is RGB?

RGB stands for red, green, and blue. It is an additive color model that describes a color in terms of the amount of red, green, and blue that are combined to create it.

What is the difference between HSL and RGB?

The main difference between HSL and RGB is that HSL is based on the color wheel, while RGB is not. This makes HSL more intuitive and easier to understand for web designers.

Another important difference is that HSL allows for a wider range of colors than RGB. This is because HSL is not limited by the amount of red, green, and blue that are available.

When to use HSL?

HSL is a good choice for web designers who want to:

• Create intuitive and easy-to-understand colors.
• Create a wide range of colors.
• Create precise color variations.

When to use RGB?

RGB is a good choice for web designers who want to:

• Control color accuracy.
• Create colors for digital devices.
• Export colors to other formats.

Conclusion

HSL and RGB are both valid color models that can be used in web design. The best choice for you will depend on your specific needs and preferences.

Suggestions for your blog post:

• Add images or screenshots to illustrate your points.
• Provide concrete examples of how to use HSL and RGB in web design.
• Include links to additional resources so readers can learn more about HSL and RGB.

I hope this helps you write an informative and helpful blog post about HSL and RGB in web design.

Handling 404 Errors in Express.js

 Introduction:

Handling 404 errors is an essential part of building web applications with Express.js. When a requested resource is not found, it's important to provide a meaningful response to the client. In this blog post, we'll explore how to handle 404 errors and return JSON responses using Express.js.

Setting up the Express Application:

Before we dive into error handling, let's set up a basic Express.js application:

const express = require('express');

const app = express();

// Your existing routes here...

// Middleware for handling 404 errors

app.use(function(req, res, next) {

  res.status(404).json({ error: 'Page not found' });

});

// Start the server

app.listen(3000, function() {

  console.log('Server started on port 3000');

});

Handling 404 Errors:

To handle 404 errors, we can use the built-in middleware app.use to capture all requests that do not match any existing routes. Here's an example of how we can achieve this:

app.use(function(req, res, next) {

    res.status(404).json({ error: 'Page not found' });

  });

In this example, the middleware is added after defining all your existing routes. When none of those routes match a request, the middleware will execute and return a JSON response with a 404 status code and an error message indicating that the page was not found.

Customizing the Error Response:

You can customize the JSON response according to your needs. Feel free to add additional properties to the JSON object, such as an error code or a more detailed description of the error.

Conclusion:

Handling 404 errors is crucial for providing a good user experience in web applications. With Express.js, it's straightforward to handle these errors and return JSON responses. By following the steps outlined in this blog post, you'll be able to ensure that your application gracefully handles 404 errors and communicates them effectively to the client.

Remember to place the 404 error handling middleware after all your existing routes in your Express application.

Daily Tasks .- Mastering Text Sizes in React Native: A Comprehensive Guide

 Introduction:

In the realm of React Native, crafting visually appealing and user-friendly interfaces is crucial. One essential aspect is controlling the size of text elements, which plays a vital role in enhancing readability and overall design aesthetics. In this blog post, we will explore various techniques to master text sizes in React Native, ensuring your app's typography is spot-on. Let's dive in!

Fixed Text Size:

With React Native's fontSize property, setting a fixed text size is a breeze. Simply assign a numeric value to it, and your text will be displayed consistently across different devices and screen densities. Here's an example:

const styles = StyleSheet.create({

  text: {

    fontSize: 16, // Fixed text size of 16 points

  },

});

Responsive Text Size:

To make your text size responsive, you can leverage the device's screen dimensions and adjust the font accordingly. React Native provides the PixelRatio.getFontScale() function to account for different pixel densities. Here's an example:

import { PixelRatio } from 'react-native';

const styles = StyleSheet.create({

  text: {

    fontSize: 16 * PixelRatio.getFontScale(),

  },

});

Dynamic Text Size based on Screen Dimensions:

Tailoring text size to fit the screen dimensions ensures optimal readability on various devices. By utilizing the Dimensions module, you can obtain the window dimensions and calculate the font size accordingly. Here's an example:

import { Dimensions, PixelRatio } from 'react-native';

const { width, height } = Dimensions.get('window');

const fontSize = PixelRatio.getFontScale() * Math.min(width, height) * 0.04;

const styles = StyleSheet.create({

  text: {

    fontSize: fontSize,

  },

});

Conclusion:

Effectively managing text sizes in React Native is fundamental to creating visually appealing and user-friendly interfaces. By leveraging fixed sizes, responsive scaling, and dynamic adjustments based on screen dimensions, you can fine-tune the typography in your app to perfection. So go ahead and apply these techniques to craft captivating and legible text elements in your React Native projects.

Remember, in the world of mobile app design, the devil is in the details, and text size is a crucial component that can make a significant impact on the overall user experience. Happy coding!

Stay tuned for more React Native tips and tricks on our blog.

Disclaimer: The code snippets provided in this blog post are for illustrative purposes only and may require additional customization and adjustments based on your specific project requirements and design preferences.