Blog de Diseño Web Vida MRR

Tutorial de useState() en React.js

noreply@blogger.com (Marcos Rivas Rojas) — Thu, 23 Apr 2020 16:16:00 -0500

Una de las funcionalidades que a muchos les causa confusión es la de usar hooks en React. Los hooks son una característica que nos ayuda a seguir implementando componentes en React.js usando la misma estructura de función. Uno de los hooks más conocidos es el hook de estado useState().
En este tutorial vamos a ver dónde y cuándo debemos utilizar el hook de estado en nuestras aplicaciones con React.

1. Para qué sirve useState()

useState() es la forma de utilizar el estado en componentes basados en funciones. Si nosotros estamos desarrollando nuestros componentes con clases tenemos algo como lo siguiente:

class MiComponente extends React.Component{

    constructor(props){
        super(props);
        this.state = {nombre: ''};
    }

    handleChange = e =>{
        this.setState({nombre: e.target.value});
    }

    render(){
        return(
            <input onChange={this.handleChange()} value={this.state.nombre} />
        );
    }
}

Cuando usamos clases tenemos que usar this.state y this.setState() para poder manipular los datos en nuestro componente. Si lo queremos ver así es un getter y un setter. Sin embargo, para hacer lo mismo en un componente basado en función necesitamos hacer uso de el hook de estado.

2. ¿Cómo funciona el hook de estado?

El mismo ejemplo anterior hecho con clase podemos hacerlo con funciones de la siguiente forma:

import {React, useState} from 'react';

function MiComponente(props){
    const [nombre, setNombre] = useState('');

    function handleChange(e){
        setNombre(e.target.value);
    }

    return(
        <input onChange={handleChange()} value={nombre} />
    );
}

useState() lo que nos permite hacer es hacer una desestructuración de una variable y una función. en nuestro caso la variable o estado que definimos es nombre y por lo tanto el siguiente parámetro es una función setNombre() para poder cambiar el valor de nombre. De la misma forma que cuando usamos clases tenemos que usar la función setState() para poder modificar el valor de nuestro estado, cuando usamos funciones usamos la función que definimos en la desestructuración para hacer dicho cambio.

3. ¿Se pueden declarar más variables usando useState()?

La respuesta es que sí. A diferencia de cuando usamos state y setState() para almacenar todos los estados de nuestos datos, usando useState() nos permite definir variables de forma independiente, lo cual puede ocasionar una forma más ágil de manipular los estados de los datos al tener una referencia mucho más visual de qué dato estás modificando con el nombre de la función.

Conclusiones

Así funciona el hook de estado. Si ven la diferencia en realidad no hay ninguna, más que el mismo hecho de tener una variable y función para sustituir el state y setState que ocupamos cuando lo hacemos con componentes basados en clases.

Bonus

También pueden ver en este video la explicación del hook de estado en React.js y aprovechar para suscribirse a mi canal si no lo han hecho 😊

32 consejos para web developers

noreply@blogger.com (Marcos Rivas Rojas) — Tue, 14 Jan 2020 09:00:00 -0600

¿Qué consejo le darías a un desarrollador web? seguramente si tienes ya un poco de experiencia sabrás que hoy en día un developer no solo debe centrarse en el tema del código como tal, hay varias habilidades adicionales que se necesitan para tener en cuenta que un desarrollador web tiene un perfil más completo.

En este video les comparto 32 consejos para web developers, consejos muy rápidos y sencillos de seguir si tu ruta de carrera conlleva tener un puesto de este tipo, pues temas de colaboración, de apoyo a la comunidad, de tener presencia en internet y de estar constantemente actualizándose con las nuevas tecnologías son temas importantes que necesitas cumplir para tener un perfil completo.

10 ejemplos de diseños web enfocados a la música

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 13 Jan 2020 12:34:00 -0600

Hace tiempo que no comparto diseños de sitios web. En esta ocasión les comparto una galería de diseños de sitios web con estilo enfocado a la música. Muchos de estos sitios obviamente tienen que ver con artistas o la fuente hace referencia mucho al tipo de música que vas a encontrar. Sitios que se enfocan en colecciones de música o servicios de streaming están enfocados en dar a conocer los éxitos más populares alrededor del mundo, por lo que son varios los tips que pueden tomar como referencia si su próximo proyecto va a ir enfocado a la música.

1. Snakepit:

2. Slide:

3. Mixtape:

4. Milando:

5. BeatsWave:

6. SoundFlare:

7. Bepop:

8. Mousiqua:

9. Bridge:

10. Kentha:

Qué es CORS y cómo usarlo en Node.js

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 6 Jan 2020 09:00:00 -0600

CORS significa Cross-Origin Resource Sharing, y es una política a nivel de navegador web que se aplica para prevenir que el dominio A evite acceder a recursos del dominio B usando solicitudes del tipo AJAX como cuando usamos fetch() o XMLHttpRequest.
Un ejemplo básico de este comportamiento es cuando creas un archivo html y tratas de hacer una llamada AJAX a cualquier sitio en internet o servidor en tu equipo o red local. Vas a obtener un error como el siguiente:

Puedes encontrar toda la información detallada en el sitio de Mozilla pero en este tutorial vamos a ver cómo manejar este comportamiento con Node.js

Lo primero que necesitamos saber es que si tenemos dos dominios: posco.com y contaro.com en principio no pueden comunicarse. Si nosotros queremos que por ejemplo contaro.com pueda permitir a otros dominios acceder a sus recursos, podemos hacerlo a través del módulo de cors. Lo primero es instalarlo

$ npm install cors

Después, vamos a incluirlo en nuestro archivo de Node.js

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

Con esto ya estamos permitiendo a nuestro dominio recibir solicitudes de otros dominios. Pero si queremos limitar solo a ciertos dominios de acceder a nuestros recursos podemos igual hacerlo a través de una lista blanca, en donde definimos los dominios y validamos que cada que haya una solicitud a una ruta específica se ejecute ese procedimiento de confirmación para aprobar o descargar el dominio.

var whitelist = ['http://example1.com', 'http://example2.com']
var corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

...

app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a whitelisted domain.'})
})

De esa forma podemos controlar de forma más granular quién puede o no acceder a nuestros recursos como una API sin tener que hacer otro esfuerzo adicional al momento de configurar nuestras aplicaciones web.

Ideas para crear aplicaciones en 2020

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 18 Nov 2019 09:00:00 -0600

Se acerca el fin del año 2019 y con ello la oportunidad de planear la próxima aplicación móvil para tu empresa, para tu negocio propio, o como parte de iniciativas para seguir aprendiendo. En este post les comparto algunas ideas de apps móviles que de acuerdo a las últimas tendencias en torno a desarrollo deberías aprender y/o implementar en 2020.

Apps móviles enfocas a VR

Las aplicaciones con virtual reality o realidad virtual son aquellas en donde con el uso de gafas o dispositivos inmersivos puedes ofrecer una experiencia 360 grados. Hoy en día para dispositivos Android hay muchas gafas de realidad virtual que no son necesariamente caras y que puedes usarlas para probar tus aplicaciones. Principalmente esta tecnología se ha usado para construir juegos que permitan tener esa nueva experiencia interactiva donde recreas un entorno virtual completo.

Apps con bots

Los bots se volvieron un boom el año pasado y su uso se empezó a expandir desde entonces. Los bots como una herramienta de comunicación pueden ayudar mucho si por ejemplo, eres un negocio que desea tener para sus usuarios un apoyo constante de comunicación, sin necesariamente tener a una persona escribiendo los mensajes.
Lo que me gusta de los bots es que puedes hacerlo tan inteligente como tu lo necesites, desde que solo tengas que seguir un flujo de comunicación seleccionando opciones, hasta que puedas entablar diálogos más complejos en voz o texto.

Apps para el cuidado de la salud

Las aplicaciones para medir el pulso, los pasos y distancia son hoy en día muy fáciles de construir. La mayoría de los smartphones modernos ya tienen incluidos algunos sensores que pueden ayudarte a monitorear diferentes aspectos del cuerpo, y si lo añades con las funcionalidades de un smartwatch el resultado puede ser mucho más interesante.
Todas las apps enfocadas a salud tienen como objetivo que puedas activarte físicamente con recordatorios, juegos o metas para incentivarte de una forma divertida, por lo que para tener un diferenciador es necesario hacerlo lo más amigable y llamativo posible.

Apps con blockchain

Esta tecnología si bien empezó como una forma inteligente y segura para poder usar cripto monedas, hoy en día muchos proveedores hacen uso de esta tecnología para que tu puedas crear servicios y aplicaciones en donde la integridad de la información se mantenga a pesar de los cambios futuros que tenga. Si necesitas que los datos no se modifiquen o que no haya duplicidad en los mismos, la tecnología de blockchain puede ayudar perfecto a cumplir con esa premisa, y hoy ya es relativamente más fácil construir desarrollos sobre ella.

Apps Realidad aumentada

Una simple aplicación de realidad aumentada que puedes ir haciendo es la del metro como instrumento de medida. Este ejemplo hace referencia a cómo integras elementos a un entorno físico para realizar alguna actividad. Muchos utilizan la realidad aumentada para juegos, pero así como el ejemplo del metro, podrías constuir apps enfocadas a brindar una herramienta que te ayude a combinar objetos físicos con virtuales.

Conclusión

Estas son 5 tendencias que esperamos ver en 2020 enfocadas al desarrollo de aplicaciones móviles. Cada una representa sus retos y oportunidades, pero lo cierto es que hace un año que algunas de ellas apenas estaban siendo presentadas, era muy difícil poder construir aplicaciones reales, ya que teníamos falta de hardware o software en forma de SDKs que nos permitieran explotar estas tecnologías. En estos momentos que estamos por concluir el 2019 podemos confirmar que ya mucha de la tecnología para hacer estas apps no solo existe en tu teléfono, sino que ya hay muchísimas formas de aplicarlas para tener una app diferente con una interacción y tecnología moderna.

10 principios básicos de diseño

noreply@blogger.com (Marcos Rivas Rojas) — Tue, 8 Oct 2019 09:00:00 -0500

Hace tiempo que no hablamos de diseño. En este post les voy a platicar sobre 10 principios básicos que todo diseño debe tener, independientemente de donde lo veamos, creemos o imprimamos, estos 10 principios deben estar siempre visibles y saber representarse en una obra como dibujo, interfaz web, diseño web, etc. Así que comencemos 👍🏼

1. Balance

El balance se entiende como la armonía de elementos, tanto gráficos como de fuentes, colores, ilustraciones, etc. Incluso un diseño super saturado puede tener balance. Incluso el diseño más minimalista y sobrio puede tener balance, y eso depende de qué tan bien acomodamos los elementos, para que exista armonía y estructura.
No significa que todos los elementos deban estar alineados o milimétricamente separados por la misma distancia, sino que a simple vista no piensen que a un diseño le faltó color, o algún elemento para rellenar, o que hay un espacio de más que no encaja.

2. Proximidad

La proximidad ayuda a crear relación entre elementos de un diseño. No se vería bien tener un campo de búsqueda en un extremo de la pantalla y el botón para buscar al otro lado, porque no tendrían proximidad.
Ese ejemplo básico sirve para ejemplificar que los elementos en un diseño deben estar juntos y separados dependiendo del significado y la intención que queremos dar. Ni todo super junto, ni todo separado si no existe un significado que explique por qué tiene que ser así.

3. Alineación

Muchos diseñadores que empiezan creen que por alineación tiene que ser todo al centro o distribuido, como si pusieras tus elementos en una caja donde no pueden salir, y no hay nada más erróneo que eso. Alineación significa orden y se combina con proximidad. Hay elementos que en conjunto dan un significado y necesitan una alineación, y hay otros que no.
Un ejemplo de esto es cuando en una aplicación tenemos un menú lateral. Los elementos que están relacionados estarán alineados y agrupados; aquellos que no tendrán otra alineación, posición y distribución, y no necesariamente tienen que estar desalineados.

4. Jerarquía visual

Este es uno de los elementos más importantes, ya que permite a los usuarios dirigir la mirada en lo más importante primero, y en lo secundario al final. La jerarquía implica que usen fuentes más grandes en los textos que quieres resaltar, imágenes más llamativas en donde la imagen es la principal, y todos los demás elementos como secundarios, pequeños, no tan llamativos y que aún así complemente tu diseño.

5. Repetición

¿Alguna vez han visto que empiezan a definir estilos CSS para ciertos campos y al final terminando aplicando otros? este es un problema de repetición, ya que sin un estilo de colores a lo largo de un proyecto se pierde el sentido de marca.
Usar la misma paleta de colores en todo el diseño, o en un sitio web es primordial para mantener consistencia, de tal forma que ese botón azul con borde redondeado lo identifiques en todas las páginas de tu sitio, y no te confundas con otro que tiene otra forma y color.

6. Contraste

Hemos hablado mucho del contraste en el blog. Sin contraste no sabríamos diferenciar elementos del fondo, texto como cabecera de texto de párrafo, o de ilustraciones entre sí. Siempre recuerda tener contraste, no solo a nivel de blanco-negro, sino de diferentes colores, formas y fuentes que permita que no exista un resalte, una duda o una interpretación que implique gastar la vista.

7. Color

En colores hay toda una ciencia de cómo escoger una gama de colores. No es tema de este post pero los puntos importantes son:

no uses más de dos o tres colores para un diseño
usa tonos de grises
usa una paleta de colores usando alguna aplicación de combinación de colores
trata de ver combinaciones nuevas, no uses siempre las mismas

8. Espacio negativo

El espacio negativo se usa cuando jugamos con las siluetas de otros elementos para crear más elementos. No es un recurso que deberíamos explotar demasiado pero sí lo suficiente para que el usuario se sorprenda al identificar por sí mismo la figura escondida

9. Tipografía

La tipografía es super importante para cada diseño, y por lo tanto necesita una tipografía específica para ello. Evitemos usar las que vienen por defecto en nuestra computadora. Las fuentes que puedes encontrar en internet de forma gratuita son ideales para crear textos llamativos pero no muy originales, y las que tienes que pagar son las que son perfectas para crear toda una colección e identidad para el diseño.

10. Estilo propio

Ya que conoces todos estos principios, entonces ya puedes buscar tu propio estilo, combinando, creando y ajustando todos los principios anteriores a algo que siga manteniendo un diseño bueno. El estilo propio es lo que eventualmente muchos lanzan como lenguaje de diseño, estilos, temas, y todo lo que puedas relacionar a nivel de diseño para un sitio, aplicación, campaña de publicidad, y muchas cosas más.

Consejos para ser un mejor desarrollador

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 16 Sep 2019 09:00:00 -0500

Cuando se trata de programación no hay una forma o estándar a seguir para poder desarrollarse y madurar. Solo la experiencia te da más herramientas dentro de este mundo de programación, pero también hay actividades que puedes realizar para poder ir ganando más experiencia y seguir mejorando como desarrollador, y en este post te los voy a compartir.

Experimentar en varios proyectos

Puede sonar lógico que para poder ser un mejor desarrollador lo primero que tienes que ahcer s practicar, desarrollar proyectos, estar involucrado en varios, de tal forma que en cada uno aprendas algo diferente. Sin embargo aquí hay algunos puntos que deberías estar teniendo en cuenta al momento de tener proyectos para poder ser un mejor desarrollador

Tienes que fallar para aprender: el terminar un proyecto sencillo no te da ningún aprendizaje. Aprende con el error y sabiendo tus capacidades técnicas
Aprender significa tener creatividad: programar de la misma forma y haciendo las mismas aplicaciones no te dejan ninguna experiencia. Juega a hacer las cosas de diferentes formas para saber si lo que actualmente haces es la forma más adecuada o hay alguna mejor.
Aplica los métodos paso a paso: ¿cuándo fue la última vez que seguiste todo un ciclo de desarrollo para una aplicación? cosas tan sencillas como esas las obviamos y nos vamos directo a programar y ver en el camino qué nos falta. Intenta ir lento, siguiendo la teoría, y verás que de la misma forma que buscas soluciones a tu código, vas a querer soluciones a situiaciones en las etapas.

Planea antes de programar

Como lo mencionaba anteriormente, solemos emepezar a programar sin siqueira estar seguros de lo que queremos lograr. La planeación es una etapa en la que tienes que poner bien los alcances de lo que vas a hacer, y el resultado que quieres obtener. Si solo empiezas a programar no vas a saber cuándo terminar, o al final no vas a recordar por qué empezaste ese prioyecto.

Sé duro con tu código

La mejor forma para mejorar como programador o desarrollador es siempre ser auto críticos con nuestro código. Si le presentaras tu código a algún desarrollador experto o con muchos años de experiencia, reconocido entre una comunidad ¿qué crees que diría de él? ¿qué es código de calidad? ¿o que es código de principiantes?
Siempre debemos buscar los patrones o mejores prácticas para nuestro código. Hay muchas metodologías y dependiendo del lenguaje irás aprendiendo si la técnica de programación que tienes es buena o mala, y a partir de ahí ver cómo la puedes mejorar.

Lee código de desarrolladores respetados

Es un punto adicional a lo que comentaba anteriormente. No hay nada mejor que ponerte al tú por tú contra un desarrollador que sea realmente bueno. Basta incluso con ver las librerías de organizaciones o comunidades Open Source y ver si entendemos el código que muestran, y después, validar si nuestro código es de la misma calidad.
En Github puedes encontrar desarrolladores que postean sus proyectos personales o de colaboración con otros, y medirte para ver qué tan bueno eres comparado con ellos.

Aprende a 'debuggear' código que no es tuyo

Si trabajas para una empresa que desarrolla proyectos a clientes esta es una de las situaciones más comunes que vas a vivir, y es la de heredar proyectos que alguien más hizo. Los más novatos dirán que ahorras tiempo si vuelves a hacer todo desde cero, pero lo cierto es que es al revés. Aprender a leer, debuggear y probar código de alguien más es una de las mejores experiencias (dolorosas, lo sé) que te puede ayudar para ser un mejor desarrollador, porque ahí pones en práctica qué tan bien lo harías tu, o qué tan mal dejaron ese código heredado.

Siempre trata de romper tu código

Los que empezamos a programar nos preocupamos más porque nuestro código funcione en el escenario ideal, a probar los escenarios donde no. Un código de calidad no es el que cumple su funcionamiento, sino que también responde ante entradas de datos erróneas, ante desbordamientos, ante escenarios extremos o nulos de datos, etc.

Conclusiones

Estos son algunos tips que puedes poner en práctica en tu día a día sin tener que invertir tiempo en cosas que no sean tareas comunes de cualquier desarrollador, solo necesitas la actitud y disposición para poder ejercerlas.

Tutorial conexión de MongoDB en Docker con Express y NodeJS

noreply@blogger.com (Marcos Rivas Rojas) — Wed, 11 Sep 2019 10:17:00 -0500

He estado jugando con Docker para crear algunos servicios, y sobre todo, evitar tener que descargar e instalar plataformas que solo quiero usar de prueba. En mi último demo estuve jugando con MongoDB y se me ocurrió hacer un tutorial para enseñarles a configurar MondoDB en Docker para crear una conexión con NodeJS y ExpressJS.

Prerequisitos

Para poder seguir este tutorial se necesitan tener bases de cómo funciona NodeJS y ExpressJS, así como algo muy introductorio a Docker y Dockerfile, pero ya lo iré explicando.

1. Creación de Dockerfile

Una de las maravillas que ofrece Docker es la posibilidad de preparar todos los componentes que necesitas para tu desarrollo en un editor de texto y de ahí ejecutarlo. Yo para poder montar MongoDB voy a necesitar dos servicios:

El motor de bases de datos de MongoDB
Una interfaz web para administrar visualmente mis bases de datos. En este caso uso Mongo Express

Para empezar hay que crear nuestro documento (docker-compose.yaml). Yo tengo uno similar a este:

version: '3.1'
services:
  mongo:
    image: mongo
    container_name: mongodb
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: example
      MONGO_INITDB_DATABASE: ejemplodb
    ports:
      - 27017:27017

  mongo-express: 
    image: mongo-express
    restart: always
    container_name: mongodb-ui
    ports:
      - 8081:8081
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: example

En este Dockerfile estoy configurando las imagenes de MongoDB y Mongo Express, el nombre de los contenedores para identificarlos al momento de detenerlos o eliminarlos, y las configuraciones como el username y password del usuario root. Los puertos están siendo los de default: 27017 para la base de datos y 8081 para la interfaz web.
Una vez hecho eso procedemos a correr el comando

docker-compose up

En este momento se aprovisionan nuestros servicios, y una vez que hayan terminado de inicializarse y construido el contenedor podemos acceder a la interfaz web de Mongo Express

2. Configurar aplicación de NodeJS y ExpressJS

Ahora vamos a crear nuestra conexión desde nuestra aplicación de NodeJS usando Express. Lo primero es installar Express

npm install express

adicional instalamos Mongoose, que es un módulo que nos permite de forma más amigable hacer la conexión y operaciones a nuestras bases de datos de Mongo

npm install mongoose

Ahora sí, a crear nuestra aplicación. (app.js)

const express       = require('express');
const bodyParser    = require('body-parser');
const cors          = require('cors'); 
const mongoose      = require('mongoose');

const PORT = 3000;
const app = express();
app.use(cors());
app.use(bodyParser.json());

app.get('/', (req, res) =>{
    res.send('Index');
});

app.listen(PORT, () =>{
    console.log('Servidor backend listo...');
});

Lo que tenemos en esta app es simplemente:

Incluir los módulos que vamos a ocupar
Inicializar nuestro middleware, el cual puedes o no ocupar para tu aplicación
inicializar un ruteo para cargar nuestro index
configurar el puerto para escuchar peticiones

Teniendo eso ya podemos configurar la conexión a MongoDB en nuestro contenedor en Docker.

3. Conexión a MongoDB

Vamos a empezar con la conexión a nuestra base de datos:

mongoose.connect('mongodb://localhost/basededatos', {useNewUrlParser: true, useUnifiedTopology: true});

Aquí está lo importante para poder conectarnos a nuestra base de datos. Lo primero es que siempre usemos el usuario:password para conectarnos a nuestra base de datos, y lo segundo es que mencionemos a qué base de datos queremos conectarnos.

const connection = mongoose.connection;

connection.once('open', () =>{
    console.log('Conectado a la BD');
});

Lo siguiente es la conexión con el evento de 'open', y una vez que conecte vamos a poder ver en nuestra consola el mensaje de que tuvimos éxito.

Algunos errores comunes

Al menos a mi en un principio traté de usar la conexión de este forma

mongoose.connect('mongodb://user:pass@localhost/db', {useNewUrlParser: true, useUnifiedTopology: true});

poniendo las credenciales de root no me dejaba autenticarme, me salía el siguiente error:

UnhandledPromiseRejectionWarning: MongoError: Authentication failed

Lo que podemos es crear un nuevo usuario para poder autenticarnos sin tener que ser root.
Para ello nos conectamos a nuestra consola de mongo en Docker

docker exec -it mongodb mongo -u root

Usamos el comando exec para poder ejecutar un servicio dentro de nuestro contenedor, el cual es mongo. Hay que notar que pongo la bandera de usuario para poder loguearnos como root y me pidan la contraseña. Añadir un nuevo usuario con permisos require que seas administrador para hacerlo, si solo te logueas no va a ser posible.
Ya dentro de nuestra consola de Mongo, vamos a ir a ejecutar la siguiente función para crear un nuevo usuario

use tu-base-de-datos
db.createUser({
    user: 'user',
    pwd: 'pass',
    roles: [
        { role: 'readWrite', db: 'tu-base-de-datos' }
    ]
})

con eso ya puedes autenticarte con esta forma

mongoose.connect('mongodb://user:pass@localhost/db', {useNewUrlParser: true, useUnifiedTopology: true});

Introducción a promesas en Javascript

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 2 Sep 2019 15:34:00 -0500

Hoy en día manejar promesas es una de las actividades que necesitas hacer para poder programar aplicaciones mucho más robustas y limpias visualmente. En este tutorial vamos a ver una introducción a las promesas, para qué sirven y cómo nos ayudan en nuestro día a día como programadores.

¿Qué son las promesas?

Las promesas son una forma de poder implementar código, el cual se ejecute después de evaluar si una condición esperada es verdadera o salió algo mal. Muchas de las operaciones donde vamos a implementar promesas es en operaciones asíncronas, donde no sabemos cuando va a terminar una actividad, y por eso las promesas nos ayudan a evaluar si dicha operación asíncrona fue exitosa o falló.

¿Cómo se implementan?

En Javascript vamos a usar la siguiente notación para crear una nueva promesa:

Al definir una promesa debemos tomar en cuenta los dos parámetros que aparecen ahí, ya que son los que vamos a usar posteriormente en la implementación para mandar a llamarlos. Esos dos parámetros actúan como placeholders que van a invocarse cuando nosotros programemos que nuestra promesa tuvo éxito al ejecutar su actividad, o cuando hubo algún error.

Para un ejemplo muy sencillo podemos evaluar el valor de una variable. Si la variable cumple nuestra condición vamos a invocar a resolve() como función. Dentro de ella podemos colocar valores que queramos pasar para cuando se invoque nuestra promesa.

Por último, para mandar a llamar a nuestra promesa basta con ejecutar el método .then(), una vez hecho esto dentro podemos hacer referencia al valor que pasamos en la función de resolve() y con ello implementar una función. Si llegase a fallar nuestra promesa podemos usar el método .catch() para poder implementar una función de error

Al final, nuestro código completo se vería así:

Conclusiones

Las promesas en su mínima expresión son una forma muy poderosa de sustitución a los callbacks, además de que nos permiten definir la promesa y luego implementarla de forma muy ordenada sintácticamente. Más adelante vamos a ver otros usos más completos y avanzados ya poniendo en práctica otros temas de Javascript

7 consejos para diseño de tablas comparativas

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 12 Aug 2019 09:00:00 -0500

Las tablas comparativas las vamos a ver muy frecuentemente en sitios como Amazon, donde podemos ver la comparación de características de un conjunto de productos para saber las diferencias de cada una de ellas. Otro uso muy común es cuando vamos a adquirir algún producto o suscripción, y hay varios niveles, desde el básico hasta el customizado. En este tipo de escenarios lo importante de poner una tabla comparativa es que el usuario pueda ver de forma visual las diferencias entre ese producto o servicio, para que de una u otra forma también se pueda inducir la elección a un tipo específico. En este video vamos a ver algunos consejos para el diseño de tablas comparativas.

1. Resalta atributos importantes

Este es el primer consejo. Cuando construimos sitios interactivos es fundamental saber qué atributos debemos resaltar como por ejemplo el precio de la opción que más recomendamos a los usuarios, o características que no tienen las demás opciones. Esto es para que el usuario tenga presente esas cualidades y que al momento de tomar su decisión siempre recuerde las características resaltadas.

2. El problema del contenido

Las tablas comparativas no deberían tener mucho contenido por celda, pero tampoco debería haber celdas sin contenido, ya que esto hace ver a la tabla vacía. Lo importante es siempre acotar el contenido con características puntuales, y si es posible poner un link a otra sección para explicar mejor. Las opciones donde no haya contenido que poner, ya sea porque esa opción o columna no tiene características de los demás niveles, siempre es preferible poner que no existe, no aplica, o alguna marca que indique que ese campo es vacío. Este tema afecta mucho al usuario ya que si no ve nada en la celda pensará que faltó ponerle contenido o lo dejará con la duda de si aplica o no.

3. Agrupa atributos

Una forma visual de poder navegar en una tabla comparativa es con el uso de grupos, o cabeceras, para que si tu tabla va a tener muchas filas de contenido, mejor las agrupes y el usuario pueda consultar aquellos atributos que le son más interesantes en ese momento.

4. Resalta de acuerdo a la necesidad

Una forma más dinámica para una tabla comparativa puede ser resaltar atributos que busque el cliente, por ejemplo, el producto más barato, o el que tiene más beneficios, o el más popular. No hagamos solo estático el resaltado de atributos, sino que también démosle al usuario la oportunidad de tener varios resaltados.

5. Mantén un balance en el diseño

Lo más simple siempre va a ser mejor. Las tablas comparativas no deberían tener simbologías complejas, detalles o links adicionales, solo los atributos importantes, las imágenes y resaltados fundamentales para que haya un balance entre la tabla y el contenido. Recuerda que al final el usuario solo quiere comparar de un vistazo dos productos o servicios, no hace falta complicar mucho el diseño.

6. Haz tu tabla fácil de compartir

Sobre todo en productos donde el precio es considerable siempre ten en mente que alguien va a sacar un screenshot en su computadora o pantalla, por lo que trata de mantener una tabla libre de scrolls, de paneles colapsables o de tablas muy grandes que no permitan tener en una pantalla mediana o pequeña la comparación. Si es posible trata de tener esa misma tabla en formato de imagen para que peuda ser compartida en las redes sociales.

7. No uses muchos colores para resaltar

Basta con tener un solo color para resaltar los puntos importantes de una tabla comparativa. El uso exagerado de colores para resaltar, o un esquema complejo para identificar similitudes y diferencias solo hará que el usuario busque comparar en otro sitio o simplemente la decisión de comparar tus productos y servicios se extinga.

Vía line25

30 cosas que me gustaría haber sabido cuando empecé a programar

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 29 Jul 2019 18:36:00 -0500

Entrar al mundo de la programación puede ser sencillo o muy difícil dependiendo del contexto de la persona. De hecho, creo que aunque hoy hay muchísma más información que hace cinco años, la dificultad todavía es un poco elevada para alguien que nunca ha estado en contacto con el mundo de la programación, especialmente si se adentra directo en ella. En este post les voy a compartir algunas ideas de lo que me hubiera gustado conocer cuando empecé con la programación, que tal vez a ti si te sirvan y con eso puedas tener una curva de aprendizaje mucho más rápida en menos tiempo.

No necesitas un grado universitario para ser desarrollador, pero sí necesitas tener conocimientos de ingeniería
La programación no solo es resolver problemas, sino también usar la creatividad para poder encontrar diferentes formas de resolver problemas
No puedes aprender todo sobre programación, es imposible, pero sí puedes aprender cosas básicas que te pueden servir en cualquier momento, todas las áreas de la programación comparten cosas similares, y cada una ofrece algo más específico.
Date un descanso en la programación, no es cierto que tengas que estar horas en la computadora para ser mejor, requiere esfuerzo pero no dejar tu vida personal
Programar es acerca de entender conceptos y aplicarlos, no de memorizar código, nadie que intente memorizar código puede ser considerado un programador
Siempre habrá alguien que sepa más que tu, y es normal, pasa con todas las áreas de estudio, lo importante es que tu sepas lo que necesitas aprender y lo aprendas.
No seas adicto a la programación, sal, juega, ten una relación; que ser programador no sea lo primero, sino lo que te complementa después de tener una vida propia
Aprenderás a programar si te pones retos contigo mismo, es decir, si te pones objetivos de programas, funciones, o ciertas cosas que necesitas hacer en un determinado tiempo (y que sea técnicamente realista)
Al contrario de lo que dicen, no es 100% cierto que necesites saber matemáticas para ser buen programador, como lo dije antes, hay diferentes áreas de aplicación, y no todas requieren que seas bueno, pero sí que conozcas las operaciones básicas de suma, resta, multiplicación y división.
No necesitas ponerte un estereotipo de novato en programación, hay mucha gente que puede saber otros lenguajes y no uno específico, y no por eso se considera novato, simplemente estás aprendiendo.
Trata de terminar tus proyectos, porque de esa forma podrás llegar a un objetivo inicial, que es terminar algo.
Te traumarás eventualmente por encontrar el error que evita que funcione tu programa correctamente, y es algo normal
Es normal que busques en internet cómo se hace determinada cosa para tu programa, como dije, no es buen programador el que memoriza, sino el que usa lo sabe para programar mejor, y buscar es una buena habilidad
Necesitas no solo programar sino también guiarte en prácticas recomendadas, inicia tu vida de programador también aprendiendo los consejos de patrones de diseño de programación
Una obsesión más será el poner nombres correctos a tus variables y funciones, es totalmente normal y siempre pensarás que pueden llamarse de otra forma
Un trauma común es programar con nombres en inglés o español, o si es deEstaForma o de_esta_otra_forma, cualquiera de las opciones es válida, lo importante es que tu código sea entendible
Es bueno darse por vencido, porque en algún proyecto puede que veas que necesitas otros conocimientos para terminar esa parte que te faltaba. De aquí en adelante si lo que deseas es seguir aprendiendo, hazlo y vuelve a interntarlo
Si ves que un programa ya se hizo muy elaborado o complicado vuelve a empezar desde cero, eso te dará la oportunidad de volverlo a hacer de otra forma, y no tratar de arreglar algo que quizá ya no tiene solución
Cuando estés programando te empezarás a preguntar si lo que haces es la mejor forma de hacerlo, no pierdas esa curiosidad
Programar por gusto no es lo mismo que trabajar en programar. Lo primero te va a encantar, y lo segundo no, pero es algo que tienes que identificar para no odiar la programación
Es completamente normal no pasar una entrevista técnica de programación, mas si nunca has practicado problemas de lógica realmente difíciles
Siempre creete que eres bueno, pero no lo suficiente para perder el piso y creer que nadie puede contra ti
Habrá quien te diga que lo que haces está mal, pero si no te ayuda a mejorar puedes hacer caso omiso de esos comentarios
Trata de buscar programadores que admires, porque de esa forma querrás tener una visión de ti mismo en un futuro
Siempre es difícil trabajar en equipo para un proyecto, porque no es la misma técnica para todos, pero trata siempre de demostrar por qué deberían hacer las cosas de cierta forma
Si revisas después de un año el código de algún proyecto, te vas a dar cuenta que pudo haber sido mejor, toma ese feedback y aplícalo en el siguiente proyecto que hagas
Siempre tenemos un momentum, ese instante donde a pesar de que ya quieres terminar algo no te deja descansar. Si te pasa eso es que realmente te gusta la programación, pero evita que pase seguido
Odiarás y amarás los hackatones porque te permite ponerte a prueba contra el tiempo, pero te dolerá si lo tuyo no es la presión
No todo va a ser copiar código de páginas como Stack overflow, también necesitas entender el por qué de una solución que buscas
La programación con música es mucho mejor, inténtalo

Realiza videos rápidos y profesionales con Flexclip

noreply@blogger.com (Marcos Rivas Rojas) — Fri, 5 Jul 2019 00:20:00 -0500

Flexclip es un servicio que encontré y me pareció de lo más interesante para realizar videos rápidos pero bonitos. Uno de los problemas más grandes que a veces tengo es que si quiero hacer un video rápido, sin necesidad de tener mucha edición, opciones como Adobe Premiere no cumplen su cometido, porque añaden muchísima complejidad a una cinemática con imágenes y texto.
Encontré a Flexclip y creo que de cualquier opción que hayas visto en internet, diría que es la más sencilla de usar con grandes resultados.

Para empezar podemos elegir una temática de un template para no partir desde cero. La ventaja de usar estas opciones es que ya no necesitas nada más que cambiar el texto y las imágenes, por lo que ya te ahorras al menos la mitad del trabajo.

Cuando llegamos a la interfaz no pude estar más impresionado de lo minimalista y funcional que puede ser tener dos o tres herramientas para trabajar. Como les digo, esto es para cuando necesitamos algo rápido, tenemos videos, imágenes y música, y no queremos perder el tiempo en acomodarlos pixel por pixel a ver si queda bien.

Los cuadros de control son muy rápidos de editar, no hace falta gran complejidad para poder meter un texto en un formato ya definido para que puedas ver luego luego el resultado.

Si al contrario, no tenemos ningún contenido para empezar a trabajar, podemos agregar de la galería de Flexclip imágenes y música que sorpresivamente tienen una calidad muy buena.
Al final tu video se presenta como la composición de varias escenas, donde si quieres acomodarlas solo necesitas moverlas de lugar y ya, a previsualizar el video y si te gustó lo puedes exportar.

Conclusiones

Este servicio en línea me recordó mucho a cuando usaba Windows Movie Maker para hacer videos cortos o que por la urgencia necesitaba tener en unos cuantos minutos. No ha vuelto a existir un programa igual, pero me sorprende que los servicios web ahora estén tomando esa responsabilidad de seguir ofreciendo hacer videos como lo hace Flexclip, sin la necesidad de ser un experto en edición para crear un contenido de calidad de forma muy rápida.

7 hábitos de programadores altamente efectivos

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 24 Jun 2019 09:00:00 -0500

Los programadores de calidad son los que van avanzando, crean mejores proyectos y colaboran en equipo. Hay ciertos hábitos que los developers necesitan estar ejecutando de forma regular para poder ofrecer código de calidad, y en este post les voy a mostrar algunos de ellos.

1. Aprende a leer el código de los demás

Poder leer código escrito de alguien más te dará más visión sobre si el código que haces es bueno o malo. También es bueno de vez en cuando aprender a entender el código de alguien más porque podrías adoptar técnicas y formas de programar que quizá ni sabías que existían, y de la misma forma hacer que los demás aprendan.

2. La sensación de malos proyectos

¿Les ha pasado que antes de empezar un proyecto pueden empezar a estructurar el futuro del mismo? eso se aprende con la experiencia, con los retrasos o la dificultad de los proyectos cuando no se planean bien. Este punto de aprender a identificar buenos y malos proyectos ayuda mucho porque al final un desarrollador debería ser capaz de determinar la viabilidad de un proyecto, y más cuando no tiene futuro.

3. Evitar las reuniones

Todos odiamos las reuniones largas en un proyecto. Dar estatus, explicaciones y en general, invertir tiempo en explicarle a los demás qué es lo que pasa con un proyecto es algo que siempre deberíamos evitar. No es estar en contra de tener reuniones, pero para dar avances no es necesario tener una reunión diario, con una a la semana, con correos, y con herramientas como Github se puede reemplazar el tener que invertir tiempo innecesario.

4. Uso de Github

Github y Git son de las herramientas indispensables hoy en día para cualquier desarrollador. Ya sea que trabajes de forma local o colaborativa tener un sistema de versionamiento permite tener eficiencia en los cambios que se hacen a un proyecto, especialmente si es grande. El otro plus es que tener un sistema como Github permite que otros vean tu código sin tener que perder tiempo tratando de mostrarles avances a los líderes del proyecto.

5. Escribir código que pueda ser mantenido

Para ser efectivo como programador, uno de los primeros pasos es programar correctamente. De nada sirve tener los puntos anteriores, si cuando inicia otro proyecto no puedas reusar código que podría servirte de nuevo. Hay que aprender a crear código que pueda ser extendido y mantenido, es decir, que puedas quitar, adaptar y volver a usar en n número de proyectos. Cuando logres hacer lo anterior, habrás ahorrado muchísimo tiempo de programación.

6. Aprende a decir no y prioriza

No todo vas a poder hacer, por eso tienes que priorizar las actividades que sí puedes hacer excelente. La parte del éxito de los programadores es poder ejecutar lo que está en su alcance, compartir responsabilidad con un equipo cuando así se necesita, y decir que no cuando no agrega valor la actividad al proyecto. Si sigues ese mismo principio de desechar lo que te puede hacer perder tiempo y no agregar valor a un proyecto de programación puedes entonces priorizar de forma correcta.

7. Pensamiento de diseño operacional

Siempre que trabajamos en un proyecto de programación creemos que con probar los escenarios más obvios, nuestro proyecto ya va a funcionar correctamente. Desde la modificación del código hasta el lanzamiento hay muchísimas variables que podrían afectar el funcionamiento del producto final, por eso un hábito muy identificado en programadores efectivos es que prueban y prueban de todas las formas posibles el software para poder identificar cualquier error posible durante la programación y la liberación. La simple modificación de una línea de código podría afectar otras partes del sistema que probablemente no estemos notando.

Conclusiones

Estos son algunos consejos de programadores que no solo programan bien, sino que tienen un panorama mucho más amplio de cómo contribuir a un proyecto con calidad y acertividad cuando se colabora con otros.

23 consejos para dar presentaciones técnicas efectivas

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 3 Jun 2019 09:00:00 -0500

¿Has asistido a presentaciones técnicas en público? muchas de ellas aunque por los temas suenas interesantes, la forma en que son expuestas hacen que en ocasiones aburran, se hagan tediosas o largas, o simplemente no aprendas lo que en un principio te están vendiendo que vas a conocer. Estos son algunos tips si vas a hacer una presentación de este tipo, donde debemos cuidar ciertos puntos específicos para atraer al público y que una plática técnica sea una buena experiencia de aprendizaje.

Explicar antes de empezar de qué va a tratar la presentación
Asegúrate de entender el lenguaje que maneja tu audiencia
Explica los acrónimos que uses para poner contexto
Si necesitas que el público aprenda un concepto específico, repítelo 3 veces de diferentes maneras
Usa imágenes en tu presentación, evita texto que haga que la gente lo lea primero antes de ponerte atención
Preséntate y di tu nombre con claridad
Hila las recomendaciones con historias que argumenten el por qué de la recomendación
No te limites a un slide
Si vas a colocar código en una presentación, asegúrate de que tenga el tamaño adecuado para ser leído a la distancia
Recuerda que tu público es inteligente, pero no es especialista en el tema que tu hablas, procura explicar todos tus puntos claramente
Pon un resumen al final de tu charla, para volver a recordar los puntos más importantes
Usa ejemplos y metáforas para explicar conceptos difíciles
Trata de explicar a tu audiencia por qué a nivel técnico hay mejoras o no, por qué se están haciendo las cosas de otra forma y el beneficio que ellos obtendrán de hacerlo.
Practica para tener el tiempo suficiente de dar tu plática y tener espacio de preguntas y respuestas
Haz pausas entre cada explicación de puntos importantes, para que la audiencia pueda entenderlas.
Haz bromas para llamar la atención de las personas que están distrayéndose, solo si puedes hacerlo.
Trata de orientar al público no solo en lo que está pasando ahora, sino lo que vendrá en el futuro.
Usa un tono de voz dinámico, para evitar que la gente se canse o se duerma por un tono de voz bajo y lento.
Evita dar contexto muy largo del tema que hablas, usa 10 o menos minutos para darle y a continuación entra de lleno en lo más importante que vienes a platicar.
Crea suspenso y curiosidad desde el inicio de tu plática
Pon información adicional a videos, posts o lecturas sugeridas para que la gente pueda encontrar más información relacionada.
Al final de la presentación da las gracias y espera que la gente aplauda. Cuando el presentador no planea espacios para que el público aplauda se crea un momento muy incómodo.
Practica con alguien que confíes y te pueda dar retroalimentación para que puedas mejorarlo.

Java no es gratuito

noreply@blogger.com (Marcos Rivas Rojas) — Tue, 14 May 2019 09:00:00 -0500

Java ha evolucionado a un paso siempre desigual con cada versión, lo que hace que sea odiado y amado por la comunidad de desarrolladores. El otro tema que tiene Java es que Oracle es el dueño del lenguaje, y aunque sigue siendo Open Source, tiene sus propias restricciones para poder usarlo. En este video les explico por qué Java no es gratuito en una parte importante de sus componentes, ya que es importante saberlo para poder crear aplicaciones con otras necesidades y aplicaciones.

¿Cómo elegir cuál lenguaje de programación aprender ?

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 13 May 2019 09:00:00 -0500

Si estás buscando razones para poder empezar con un lenguaje de programación, este post te va a interesar. Te voy a comentar algunas razones por las cuales es mejor empezar en el mundo del desarrollo con algunos lenguajes y después con otros.

Lenguajes de propósito común

Los lenguajes de propósito común son aquellos que no están orientados a un tema específico. Los puedes usar para hacer aplicaciones web, sistemas, aplicaciones con interfaz gráfica, etc, por lo que aprender uno de estos facilita la aplicación a varias utilidades.

Python: es uno de los lenguajes más fáciles para empezar con programación. Su sintaxis también es muy simple, por lo que puedes entender bien cómo va funcionando el código y las estructuras, además de que Python poco a poco se convierte en el lenguaje preferido para la gente que empieza con programación.

Javascript: es un real competidor a sentarse en el trono de los lenguajes favoritos para empezar. Javascript ha evolucionado de forma impresionante en unos pocos años para poder ser utilizado en cualquier plataforma y ecosistema presente hoy en día. No hay nada que no se pueda hacer con Javscript, y como menciono, su evolución va avanzando de forma increíblemente rápida, pero obviamente si lo que quieres es tener un enfoque un poco más web, este lenguaje te puede ayudar mucho.

Ruby: es un lenguaje con la característica de que tiene soporte de muchos paradigmas de programación, como la lineal, la orientada a objetos y funcional. Su sintaxis es más parecido a una estructura de conversación que los anteriores, y te dejará compilar el código aunque tenga errores, por lo que es bastante amigable para poder empezar.

Java: es el lenguaje que más gustos divide a los programadores. Para muchos ya es un lenguaje que no ha evolucionado de la misma forma que los demás, pero otros creen que es de los lenguajes más maduros. La realidad es que si quieres iniciar con un lenguaje que te explique de forma muy visual la programación orientada a objetos este es el mejor. Aprender Java es fácil, quizá verás que tiene mucho código para hacer cosas sencillas, pero también hay una razón para ello, y si logras entender ese concepto prácticamente Java lo dominas en unas cuentas semanas.

Lenguajes de propósito específico

Si queremos aprender algo específico podemos usar de referencia algunos de los siguientes lenguajes para empezar por ese camino:

Machine Learning: los dos más populares son Python y R, lenguajes que por su simpleza en el código son más eficientes para realizar cálculos estadísticos.

Desarrollo móvil: para desarrollar aplicaciones móviles nativas tenemos Swift para iOS y Java y Kotlin para Android. Kotlin especialmente toma mucha referencia de Java y le quita el código que no es necesario, por lo que también es buen candidato para hacer apps sin siquiera saber programar.

Startups: si tu enfoque es construir algo rápido y funcional Ruby tiene esa ventaja. Ruby es muy usado en empresas que empiezan por la flexibilidad de construir aplicaciones de forma muy rápida y que pueden seguir programando sobre la marcha.

Lenguajes que tienes que evitar al empezar

Si bien hay lenguajes muy populares hoy en día, mi recomendación es evitarlos ya que o cumplen un propósito demasiado específico, que quizá ni siquiera te interese usar, o tienen una complejidad más elevada para aprender, por lo que puede que te desilusionen si decides elegir uno de ellos.

Entre los ejemplos está Go, Scala, Perl, Typescript, C++. Typescript especialmente le agrega complejidad a Javascript, y se entiende que para llegar ahí, entiendes cómo funciona Javascript y las deficiencias que tiene por las que tienes que cubrir con Typescript. C++ es en definitiva la opción si lo que quieres es administrar memoria y objetos de forma detallada y completa en un lenguaje de programación.

10 principios de diseño para POO

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 6 May 2019 09:00:00 -0500

Empezando a programar con el paradigma de Objetos es un tema muy particular. Mucha gente cree que con el hecho de crear objetos y clases ya está aplicando el paradigma, pero en realidad no. El paradigma consiste no en un aspecto técnico, sino en un aspecto funcional, que puedas adaptarte a una forma de programar, en vez de utilizar formas de programación que cualquier lenguaje puede incluir.

En este post les comparto los 10 principios de diseño para la programación orientada a objetos, esperando que les sirva para mejorar la forma en que hacen código y lo usan.

1. DRY (Don't repeat yourself)

El principio de la POO es la de no repetir el código, hacer código reusable y abstracto, para que puedas usarlo de nuevo sin necesidad de volver a escribir desde cero. Si tu código es imposible de reusarlo en otra aplicación, o tienes que programar ciertas partes de nuevo porque no se puede adecuar, es un síntoma de que necesitas hacer funciones más abstractas, más genéricas para que puedan ser extendidas con requerimientos más puntuales.

2. Encapusla

No hay mucha gente que entienda la importancia de la encapsulación, pero es muy simple. Aprende a encapsular el alcance de tus clases. La forma más fácil de hacerlo es poniendo privadas las variables y métodos que son exclusivos de tu clase, y poniendo públicos los métodos que pueden ser usados por otros objetos. Hay más formas de encapsular el código, pero esos dos son los básicos.

3. Principio de diseño abierto-cerrado

Este principio dice que las clases, métodos y funciones deben estar abiertos para extender su funcionalidad, pero cerrados para ser modificados. Esto significa que tu código debería ser modificado casi nunca pero sí debería servir como base para extenderlo, es decir, para usar herencia, para usar interfaces, para ser la base de nuevas clases, a fin de que nunca llegues a modificar tu código existente para crear nuevo, sino crear código sobre la base que ya tienes.

Esto podemos verlo como si fuera una caja negra, donde tu debes hacer que tu código sea imposible de modificar y solo pueda ser usado desde sus métodos públicos para poder ser extendido.

4. Principio de responsabilidad única

Este principio hace referencia a que nuestras clases y métodos deben tener una sola tarea o actividad. Una clase que se encarga de operar datos no debería administrar componentes gráficos, ni un método que tiene que mandar un correo electrónico debería manejar funciones adicionales. Esto hace que tus funciones cumplan un solo propósito y hace más fácil que las puedas utilizar más adelante.

5. Inyección de dependencias

Las dependencias es cuando en una clase necesitas otra para poder trabajar. Piensa en una clase que toma como base otra para mandar un mensaje de texto. La clase original tiene una dependencia y si quisieras usar esa clase pero no quisieras mandar un mensaje de texto hace que tengas que modificar el código para ello. La mejor forma de resolver un problema así es a través de la inyección de dependencias en donde en vez que que la clase original mande a llamar a la segunda clase, se le inyecte a través del uso de frameworks o interfaces para mandar a llamar a algo que después tiene que ser completado, y de esa forma no dependa de otras clases.

6. Composición sobre herencia

La composición es justamente lo opuesto a la herencia, que es mandar a llamar objetos en vez de heredarlos. Esto es bueno en la medida en que a partir de una misma relación en vez de estar heredando clases y hacer una jerarquía grande, muchas veces para simplificar trabajar con objetos de una misma base en mejor hacerlo a través de la composición o creación de objetos. Para saber más sobre composición y asociación pueden leer este artículo.

7. Principio de sustitución Liskov

Este principio dice que si tienes un objeto de subtipo S que deriva de un tipo T deberías tener la posibilidad de usar el objeto de tipo T de la misma forma que uses al subtipo S. Como ejemplo, tenemos que un objeto de tipo Perro deriva de un objeto de tipo Animal, y si tienes una función que necesita un tipo Perro como parámetro, si colocas un objeto de tipo Animal debería funcionar la clase de la misma forma, sin errores.

8. Principio de segregación de interfaces

Este principio refiere a que no incluyamos métodos que no va a utilizar el programador en una interfaz. Cuando creamos interfaces podemos colorcar métodos que queremos que el programador use para extender su código, pero si metemos funciones que no va a usar o no siempre va a usar, estamos cayendo en este error de POO.

9. Programación de interfaces no implementaciones

Tu código siempre debe estar enfocado a definir interfaces, no implementación de las mismas. Las interfaces ya nos dan una forma abstracta de poder hacer funciones genéricas que puedan ser usadas en muchos escenarios. Hay que mantener esa estrategia para crear código que puedas reusar.

10. Principios de delegación

Este último principio dice que no hay que hacer todo el código nosotros, ya hay clases a las que le podemos delegar esa tarea, como por ejemplo comparar dos objetos. Todos los objetos tienen la clase equals() por lo cual es innecesario implementar un nuevo método para esa funcionalidad. Es un ejemplo básico pero nos dice que hay que conocer los métodos de los objetos para saber qué ya hay código hecho que podemos usar y no todo a fuerza lo tenemos que implementar desde cero.

7 consejos para crear logotipos en 2019

noreply@blogger.com (Marcos Rivas Rojas) — Tue, 16 Apr 2019 09:00:00 -0500

Encontré este artículo de Logo Design Guide:7 Tips Moving into 2019, donde nos platican de tips para crear logotipos en 2019. Es interesante ver como muchas de las tendencias de logotipos consisten en hacer muy sencillos los logos, o no ponerle mucha creatividad. El hecho de que sean así las tendencias no significa que tu próximo diseño tenga que ser igual. Es por eso que les comparto de esos 7 tips lo más importante que debes notar cuando empiezas con un diseño de logotipo.

Parte 1: No olvides los fundamentos

Conoce tu marca: siempre recuerda que el logotipo debe representar a tu marca, identificarse y ser único. Al final tu marca y logotipo deben transmitir el mismo mensaje
Obten inspiración: busca nuevas formas, colores y mensajes, no te bases solo en las tendencias o en lo que todos están implementando justo ahora. Crea algo que sea moderno sin tener que ser repetitivo o parecido a algo que ya se ha visto antes.
Inicia un tablero de humor: usa servicios como Pinterest para empezar a ver imágenes de diferentes logotipos, tratando de identificar lo que te gusta de cada uno de ellos, y de ahí partir para crear algo adecuado para ti.
Investiga tu audiencia: identifica para quién es ese logotipo. No todos los logotipos funcionan para todas las personas, así que identifica qué tipo de personas verían tu logo y sentirían lo mismo que tu, y que otras a lo mejor pueden interpretar otro mensaje que quizá necesites corregir.

Parte 2: 7 tips para crear logotipos excelente

Identifica el tipo de logo: los hay desde solo poner tipografía, hasta colocar mascotas o formas identificables
Escoge una esquema de colores: usa colores que coincidan con tu marca y las sensaciones que transmite. No todos deben ser colores vivos, también puedes usar esquema de grises o blanco y negro.
Identifica un tipo de fuente: tanto las serifas o sin serifas o las personalizadas son importantes para dar más elegancia o más soltura al mensaje que das en el logo
Haz un logo único: es imposible crear un logo que no se base en algo ya existente, pero trata que incluso tomando elementos que ya se han visto antes parezca nuevo.
¿Cómo están desempeñándose otros diseños?: hay logotipos con doble mensaje en el diseño, o que tienen un toque característico que los diferencia muy claramente. Aprende a identificar qué es lo que caracteriza a un buen logo existente y de ahí parte para darle autenticidad al tuyo.
Manténlo simple y flexible: no te enredes tanto, siempre lo más simple va a ser lo mejor, pero trata de que se pueda adaptar a nuevos formatos y se vea fresco con el paso de los años.
Publica tu trabajo pero no esperes un éxito instantáneo: el éxito de un logo no depende de que sea admirado al instante, sino que empiece a ser reconocido a lo largo del tiempo, así que no te limites en medir el éxito de tu logo al instante.

Comparando frameworks para front-end

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 15 Apr 2019 09:00:00 -0500

Me encuentro este interesantísimo artículo de FreeCodeCamp, en el cual comparan la velocidad y tamaño de algunos de los frameworks más famosos que hay para front-end. Si bien cada uno de ellos está enfocado en dar un resultado más o menos parecido, creo que muchos se han preguntado si estos frameworks son realmente un alivio para la gente que diseña aplicaciones web, o solo es un sobre costo que se añade por el hecho de tener un código más ordenado y con posibilidades de mantenerlo mejor.

El análisis que les presento muestra algunas estadísticas que el autor tomó para medir el impacto de cada framework. En primer lugar el construyó la misma aplicación para los siguientes frameworks:

Después de eso empezó con sus métricas.

Rendimiento

Es quizá el punto más importante para todos. De nada sirve tener un framework si el rendimiento del mismo se ve afectado. Siempre hay que tener en cuenta que el rendimiento más óptimo debería ser el poder crear nuestras aplicaciones sin necesidad de un framework. Si acudimos a ellos es porque deberíamos suponer que mucho del tunning de ese rendimiento ya lo trabaja ese framework. El resultado es como sigue:

La mayoría de los frameworks corren por arriba de los 90 puntos, eso quiere decir que prácticamente en cuanto carga tu sitio o aplicación web, también lo hace el framework y sus componentes, a excepción de AngularJS que tiene el desempeño más bajo.

Tamaño

El tamaño es la cantidad de kb que tiene que transferirse para poder cargar tu aplicación web. Entre más grande sea mayor va a ser el tiempo de carga.

Mientras que hay frameworks que solo tienen 9kb de transferencia, hay otros como AngularJS que transfieren hasta 300kb. Esto en perspectiva podría parecer muchísimo, pero también dependiendo de la calidad de la conexión a internet es que se afecta mucho más esa transferencia.

Líneas de código

Las líneas de código es de los parámetros más importantes para un desarrollador. No tiene sentido que tengas que tener más líneas de código solo por usar un framework, si el objetivo inicial es justo simplificar ese proceso de creación con menos líneas.

En la imagen podemos ver que mientras para re-frame un proyecto requirió de 968 líneas de código, el mismo en Angular con ngrx y nx requirió 4,210 líneas de código, es decir, poco más de 4 veces, entonces aunque mucho código lo podrías generar y otro hacerlo tu, la realidad es que se entiende que más líneas de código podría aumentar el tamaño de tu proyecto, y en consecuencia hacerlo un poco más pesado.

Conclusión

Como mencionan en el artículo, no es muy fácil hacer comparaciones de peras con peras y manzanas con manzanas. Es importante notar que podría haber un sesgo pero los datos nos revelan mucha información. Lo que más me sorprende de esas gráficas es que por ejemplo, Vue, React y Angular, a pesar de que son los frameworks más usados, no son ni los más rápidos ni los más pequeños. Hay frameworks que son más ligeros, y si te interesa usar uno pero te interesa cuidar estas tres métricas la respuesta es que puedes optar por utilizar uno diferente a los 3 más populares.

11 Trucos para la consola de Javascript de Google Chrome

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 8 Apr 2019 09:00:00 -0500

La consola de Google Chrome tiene muchas funcionalidades que nos pueden ayudar de forma muy interesante en nuestro debugging. En este post les presento algunos de los trucos más interesantes que seguramente les van a servir la próxima vez que tengan que desarrollar una aplicación con Javascript.

Estilizar mensajes de consola

Por defecto en la consola de Chrome los mensajes aparecen sin formato, pero si lo que necesitas es tener estilos para diferenciar ciertos mensajes basta con ingresar '%c' al inicio del mensaje de un console.log y colocar como un parámetro adicional los estilos CSS que quieres poner.

Mostrar JSON como tabla

De forma sencilla podemos mostrar un JSON en formato de tabla con el siguiente script:

Obtener las llaves de un arreglo

Dado un arreglo se pueden extraer las llaves o claves de la siguiente forma:

Obtener el elemento seleccionado

Podemos hacer referencia al elemento HTML seleccionado con el símbolo $0, y poder navegar por el historico de elementos seleccionados con $1, $2,etc

Referenciar objetos HTML

Tradicionalmente usamos document.getElementById() o querySelector() para hacer referencia a objetos. En la consola de Chrome podemos hacer referencia usando la simbología de $('selector'), muy parecido a como se hace con jQuery, pero esta es una forma nativa de hacerlo en la consola de Chrome.

Obtener eventos configurados en elemento HTML

Se pueden ver de forma sencilla los eventos configurados en un elemento HTML así:

Monitorear todos los eventos sobre un elemento HTML

Se pueden monitorear todos los eventos sobre un elemento específico, usando dos comandos: monitorEvents() y unmonitorEvents()

Medir tiempo de ejecución de un procedimiento

Puedes calcular el tiempo que tarda un procedimiento en ejecutarse usando dos funciones: console.time() y console.timeEnd()

Mostrar todas las propiedades de un elemento HTML

Usando la función dir(selector) se puede mostrar todo lo que contiene un elemento HTML

Hacer referencia a la última expresión resultante

La última expresión en la consola también puede asignarse a una variable $_ la cual siempre tendrá el valor más reciente calculado dentro de la misma.

11 ejemplos de sitios web con degradados

noreply@blogger.com (Marcos Rivas Rojas) — Wed, 3 Apr 2019 09:00:00 -0600

En esta ocasión les presento 11 ejemplos de degradados en sitios web que pueden usar como referencia para sus proyectos. Los degradados, a pesar de lo que pudiéramos pensar, se expresan de varias formas, desde degradados tenues hasta con los colores muy definidos. No existe una regla específica para usarlos, y como vemos en cada uno de los sitios web, tampoco hay un límite siempre y cuando se combine adecuadamente con los demás elementos que componen el sitio.

Gradient Banner

The HR Manifesto

Grabient Landing Page

D25/Video Production

Centexus Landing Page

Ninety Nine Seconds Game Prototype

DIY Course Landing Page

Natoni Landing Page

Bitframemedia Logo

TinyMind Landing Page

Mindfulness App Onboarding Screens

Cómo vender proyctos como freelancer

noreply@blogger.com (Marcos Rivas Rojas) — Tue, 2 Apr 2019 09:00:00 -0600

Para aquellos que empiezan su carrera de freelancer y no saben cómo iniciar su proceso de venta de proyectos, este es el video perfecto para ustedes. No es que sea un arte, pero sí se necesita cierta habilidad para poder vender nuestros proyectos, empezando con buscar a clientes potenciales.
Una vez que sepas a qué tipo de clientes les vas a vender, necesitas saber tu modelo de negocios. En este video les comparto uno de ellos, que es de los más populares actualmente, que es el modelo de servicios. Si te quieres iniciar a vender proyectos la mejor forma es con un esquema de servicios, en donde distribuyes tus costos a lo largo de suscripciones con tus clientes, de tal forma que en vez de que te paguen una sola vez, te paguen constantemente para que tu les sigas ayudando de forma indefinida, o al menos hasta que ya no necesite tus servicios.
El modelo de suscripciones es usado por muchísimos servicios como Netflix o Spotify, y te permite a ti como desarrollador tener presencia con tus clientes de forma constante, a través de seguimiento de proyectos, de soporte o de otros beneficios que harán que te paguen también una cantidad pequeña mensualmente, y que al final para ti es un ingreso que solamente se distribuye a lo largo del tiempo.

3 habilidades importantes que necesitas como desarrollador

noreply@blogger.com (Marcos Rivas Rojas) — Mon, 1 Apr 2019 09:00:00 -0600

La escuela nos enseña ciertas habilidades y tecnologías que nos deben servir en nuestra vida, sin embargo, queda en nosotros seguir el aprendizaje necesario para seguir conociendo lo más nuevo en nuestro entorno. Para un estudiante de ingeniería que desea tener un trabajo como desarrollador o ingeniero en sistemas la cosa no es diferente. Hay habilidades y tecnologías que no aprenderá en la escuela, y es importante desarrollarlas y aprenderlas, porque van a servir de una forma u otra.

Vamos a aprender cuáles son esas habilidades que no nos enseñan en la escuela, pero de todas formas necesitamos aprender.

Git

Git es una de las tecnologías que deberías conocer sin importar si te la enseñan o no en la escuela. Desarrollar la habilidad de versionar tu código, hacer modificaciones y darle un mantenimiento adecuado por medio de branches es una habilidad que, aunque pareciera sorprendente, no todos los desarrolladores saber hacer. Conocer Git te va a dar no una ventaja, sino te va a dar lo indispensable que se necesita en cualquier rol de desarrollo y que no te dicen que lo necesitas hasta que lo tienes que ocupar.

Comunicación

Aprender a comunicarse es una habilidad que no nos enseñan en ningún lado. Cada persona, organización y yo diría que hasta región donde estemos tiene su propia forma de comunicarse, pero es indispensable saber hacerlo para poder obtener resultados. Un problema común de comunicación es saber pedir las cosas, quizá que algún colaborador nos ayude con nuestro código. Algo tan simple como eso puede ser interpretado como que no tienes los conocimientos, o tienes flojera, o quieres que alguien más haga tu trabajo.

Un ejemplo de comunicación efectiva para pedir apoyo en el ejemplo anterior es que se maneje un mensaje de contexto. Si en vez de ir directo a pedir apoyo, se explica todo lo que ya hiciste para llegar al punto donde no puedes avanzar, quizá la otra persona en vez de negarte el apoyo pueda entender que no estás pidiendo ayuda por flojo, sino porque ya recorriste una serie de pasos y nada funcionó. Esto le da un incentivo de poder serte útil y a la vez no crea que está haciendo tu trabajo.

Escribir

Para muchos escribir es plasmar sus pensamientos en un correo o una carta, y la realidad es que no. Escribir correctamente tiene que ver con saber transmitir un mensaje a un grupo de personas, y que esas personas tengan el mismo significado al leer tu mensaje. No todos podemos tener las estructuras gramaticales para elaborar textos complejos, pero sí deberíamos tener la capacidad de redactar un mensaje de tal forma que la intención que tenga se pueda transmitir, y nosotros obtengamos una respuesta.

A nivel de código es importante saber documentar nuestros proyectos, saber documentar errores y poder pedir apoyo usando la técnica de comunicación que mencioné en el punto anterior. Dar mensajes claros en pocas palabras siempre va a ser el objetivo al momento de escribir, ya que la gente no perderá tiempo leyendo un texto sin saber qué es lo que estás queriendo decir o pedir.

Github deja de dar soporte a jQuery

noreply@blogger.com (Marcos Rivas Rojas) — Wed, 6 Mar 2019 09:00:00 -0600

Github deja de dar soporte a jQuery, con lo que pasa a ser otro servicio que empezó a usar jQuery para poder dar servicio a todos sus usuarios y repositorios, pero ahora ya está dejando de lado la librería para poder usar frameworks modernos que no dependan tanto de una sola implementación.

En este video les explico las ventajas de migrar de jQuery, y los retos a los que se está enfrentando el equipo de desarrollo de Github al querer modernizar su sitio.

No olviden suscribirse a mi canal de Youtube para ver todo el contenido adicional que se genera para los desarrolladores y diseñadores web

10 sitios web con animaciones impresionantes

noreply@blogger.com (Marcos Rivas Rojas) — Tue, 5 Mar 2019 09:00:00 -0600

Se pueden hacer diferentes tipos de animaciones en un sitio web, desde las básicas con CSS, las complejas usando Javascript, pero los sitios web que les presento llevan a otro nivel este tema. Les presento 10 sitios web con animaciones impresionantes, donde combinan CSS, SVG, WebGL y otras técnicas de animación para crear estos increíbles efectos de navegación en los sitios web

Les Animals

The Hunt for the Cheshire Cat

Active Theory

Teatr Lalka

Dean Bradshaw Photography

Next Level Fairs