max131 / notes Goto Github PK

0.0 0.0 0.0 0 B

My own notes about everything

notes's Introduction

Hi, I'm Mario Abreu 😃

I'm an eternal enthusiast of the web techs, especially layout design and front end development. I'm constantly learning about tech topics.

There is a lot of techs that a love like: HTML, CSS, Javascript, Ract, Bulma, Jekyll, Linux, etc...

My portfolio

By the way, I love Markdown 💚, write 📖, flowers 🌻, abseiling 🧗, camping 🏕️, animals 🐶 and of course, the all mighty nature 🌳 🍃 ☁️ 🌕

notes's People

Contributors

Watchers

notes's Issues

Intercambiar valores en dos variables

Las variables intercambian valores con desestrucuración.

let x=4, y=6;
[x, y] = [y, x];

// x = 6
// y = 4

Fetch, estructura básica para API's

async function myFunc(url){
  try{
    let res = await fetch(url);
    let data = await res.json();
    if(!res.ok) throw{status: res.status, statusText: res.statusText || "Unknow error"};
    ...
    ...
  }
  catch(err){
    console.log(err);
  }
}

Personalizar símbolo de listas (ul)

Personalizar símbolo en listas (ul)

Para poder personalizar el símbolo en los elementos de una lista podemos hacerlo de la siguiente forma:

@counter-style check { /*Define el nombre del estilo personalizado (check)*/
  system: cyclic; /* Repite los símbolos cuando estos terminan*/
  symbols: "✔️ "; /*Lista de símbolos a usar*/
}

li::marker { /*Estilos para el símbolo*/
  font-size: 0.75rem;
}

ul {
  list-style-type: check; /*Estilo personalizado a usar*/
}

Referencias:
Contadores CSS
@counter-style: MDN
system rules for @counter-style

`useContext` hook en React.

Con useContext podemos definir un "proveedor" de información para nuestra aplicación de React. Este proveedor tiene la función de poder hacer accesible cualquier dato, estado o función que deseemos (y que estén de definidos en el "provider"), a todos aquellos componentes de nuestra aplicación que se encuentren dentro de un componente contenedor del "context". Al hacer esto, no importa si los componentes son hijos, hermanos o nietos entre ellos, haciendo así la tarea más sencilla de compartir información y métodos sin tener que heredarlos de un componente a otro.

Paso 1: Crear el context y el provider.

Aquí es donde se definen los datos y métodos que se desea que accesen los componentes.

src/context/MainContext.jsx

import React, { createContext } from "react"; //Importamos el creador de contexto

const MainContext = createContext(); //Creamos un nuevo contexto

const MainProvider = ({ children }) => { //Definimos el componente contenedor y usamos la prop children
	const user = { //Se define una constante a usar. Puede ser un "state" información de una API, etc
		id: 1313,
		name: "John",
	};

	const print = () => console.log("Hello"); //Creamos un método de prueba

	const data = { user, print }; //Asignamos a una constante los datos o métodos que queremos hacer accesibles

        //Retornamos nuestro componente provider
        //Importante {children} para que pueda renderizar los componentes internos
	return <MainContext.Provider value={data}>{children}</MainContext.Provider>; 
};

export { MainProvider }; //Exportación del componente provider
export default MainContext; //Exportación del contexto

Paso 2: Importar el provider en nuestra aplicación

En este paso hay que envolver los componentes que deseamos que tengan acceso a la información de nustro "provider".

src/App.jsx

import React from "react";
import Father from "./components/Father"; //Componente padre
import Son from "./components/Son";  //Componente hijo
import GrandSon from "./components/GrandSon";  //Componente nieto
import { MainProvider } from "./context/MainContext";  //Importamos el provider de nuestro componente de context

const App = () => {
	return (
<>
	<h1>Hello World!</h1>
	<MainProvider>  //Componente padre
		<Father>
			<Son>  //Componente hijo que accederá a la información del provider. 
				<GrandSon>
					<p>Lorem ipsum dolor sit amet.</p>
				</GrandSon>
			</Son>
		</Father>
	</MainProvider>
</>
);
};

export default App;

Paso 3: Usar `useContext` para acceder al provider

En este paso es donde nosotros podemos acceder a la información que está contenida en nuestro provider definidor en el primero punto. Los cambios a esa información se verán reflejados en toda nuestra aplicación o componentes contenidos dentro del provider.

src/components/Son.jsx

import React, { useContext } from "react"; //Importamos el hook de useContext
import MainProvider from "../context/MainContext"; //Importamos nuestro provider

const style = {
	padding: "1rem",
	border: "2px solid crimson",
	borderRadius: "0.25rem",
};

const Son = ({ children }) => { //Nuestro componente ({children} aquí es para propósitos diferentes al provider, no es necesario. 
	const { user, print } = useContext(MainProvider); //desestructurámos los datos/métodos que queremos usar del provider
	return (
		<div style={style}>
			<h3 onClick={print}>I'm your Son: {user.name}</h3> //Usamos esos datos/métodos
			{children}
		</div>
	);
};

export default Son;

Como sucede a menudo en React, los hooks u otras funciones son en esencia de funcionamiento simple, aunque un tanto complicadas de implementar.

Document visibility

Visibility

El objeto document tiene una propiedad visibilityState y el objeto window la propiedad visibilityChange que sirven para determinar si la ventana actual es vista o no:

window.addEventListener('visibilitychange', e => {
  console.log( document.visibilityState === "visible" ? true : false  );
})

Validación formularios

Validar formularios con el atributo `pattern`

<input type="text" name="name" pattern="^[A-Za-zÑñÁáÉéÍíÓóÚúÜü\s]+$">
<input type="mail" name="email" pattern="^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$">

Diseño de interfaces UI

Principios Gestalt

Principio de semejanza
Principio de proximidad
Principio de continuidad
Principio de experiencia
Principio de figura-fondo
Principio de igualdad
Principio de cierre

Atomic design

Átomos
Moléculas
Organismos
Plantillas
Páginas

Tipos de diseños

Flat design

Colores vivos
Sencillez
Figuras geométricas
Sin sombras

Monocromático

Un color base con varios tonos
Diseño simplificado
Colores blanco y negros para fondos o textos
Diseño dividido en secciones

Minimalista

Interfaces sencilla
No recargadas
Conciso
Consistente
Paleta monocromática o analógica
Tipografía sencilla

Skeumorfismo

Elementos parecidos a la realidad
Uso de texturas, brillos y sombras
Tridimensionalidad

Neumorfismo

Imita interfaces reales
Formas sin bordes
Sombras y luces
Sobrio

Design Systems

Conjunto de documentación reglas, principios y patrones definidos que conforman un producto digital. Agrupa conjuntos de directrices sobre como usarlos.

Ejemplos:

UI en páginas web

Siempre, en la medida de lo posible, debe comenzarse por el diseño de un wireframe con las pantallas a implementar.

El siguiente paso es comenzar con el diseño de mockups y componentes el sitio.

Aspectos básicos que se olvidan diseñar en una web

Página de error 404
Favicon
Espacio en blanco (cuando no hay contenido de sección)
Onboarding
Términos de servicio y privacidad
Imagen de usuario por defecto
Loaders
Logout

Referencia: UI daily tips

Representación del proyecto UI

Es la presentación final del proyecto antes de su implementación, esta debe contener lo siguiente:

Pantalla principal
Pantalla del índice
Pantalla del problema
Pantallas del producto
Pantalla de contacto

Recomendaciones para la presentación

Usar los mismos estilos del producto
Usar un lenguaje formal
Convertir y enviar la presentación en formato PDF
Colocar enlaces portfolio y perfiles sociales
Titular y enumerar cada diapositiva

React Router Match

React router cuenta con el parámetro/función match el cual sirve para obtener los parámetros enviados a través de una URL, estos pueden obtenerse para pasarlos como parámetros a un componente.

const GetWeb = ({match}) => {
  let x = match.params.parametro;
}

Saltos de línea en CSS

Los saltos de línea en textos pueden ser controlados en CSS mediante la propiedad white-space

p{
   white-space: normal;   /* Quita saltos línea, espacios dobles y/o tabulaciones. No desborda el texto*/
   white-space: no-wrap;  /* Quita saltos línea, espacios dobles y/o tabulaciones. Desborda el texto*/
   white-space: pre;      /* Para respetar saltos de línea, espacios dobles y/o tabulaciones. Desborda el texto*/
   white-space: pre-wrap; /* Para respetar saltos de línea, espacios dobles y/o tabulaciones. No desborda el texto */
   white-space: pre-line; /* Para respetar saltos de línea y quitar espacios dobles y/o tabulaciones. No desborda el texto*/
}

Referencia: MDN white-space

Renderizar hijos de un Componente

Un componente puede ser meramente un contenedor, pero para que este renderize otros componentes o etiquetas internas, debe usarse la propiedad children

function MiComponente({children}){
  return(
      <>
        {children}
      </>
  );
}

<MiComponente>
  <div>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</MiComponente>

Crear BD en Mongo

MongoDB sólo creará una BD una vez esta tenga al menos un documento, y por consiguiente una colección.

# Acceder a MongoDB cunado se está ejecutando
mongo

# Mostrar bases de datos
show databases

#Obtener base de datos actual
db.getName()

# Crear o acceder a una BD 
use ejemploBD

# Mostrar colecciones en la BD
show collections

# Crear un documento
var usuario = {name: 'Mario', email: '[email protected]', twitter: '@maxito_abreu'}

# El documento no se insertará hasta ejecutar uno de los siguientes comandos, siendo `user` la colección donde se insertará.
db.users.insert(usuario)
db.users.insertOne(usuario)

#Insertar varios documentos
db.users.insertMany([usuario1, usuario2])

# Mostrar los documentos de la colección `users`
db.users.find()

Seleccionar distinto o igual de en MongoDB

Para buscar un valor distinto a otro, basta usar el operador $ne: con el valor que se quiere excluir dentro del campo que deseamos evitar y para buscar un valor igual se usa el operador $eq:

//Buscar los registros cuya 'age' es diferente de 29


db.users.find({ age: {$ne: 29} })

//Buscar los regustros cuya 'age' es igual a 29

db.users.find({age: {$eq: 29} })

Búsqueda binaria

Algoritmo para búsqueda binaria en Javascript

Para poder efectuar una búsqueda binaria, el array debe estar previamente ordenado.

function binarySearch(arr, l, r, x){
  if(l > r) return -1;
  
  const m = Math.flor( (l +r) / 2);
  
  if(arr[m] === x) return m;

  if(arr[m] < x){
    return binarySearch(arr, m + 1, r, x);
  }
  else{
    return binarySearch(arr, l, m - 1, x);
  }

const arr = [2, 5, 8, 12, 16, 23, 38, 56, 72, 91];

console.log( binarySerarch(arr, 0, arr.length -1, 38) );

Referencia: Vida MMR

Mis notas sobre la web

Temas

Redux

Redux y su uso.

El uso de redux tiene un flujo del tipo WebComponent -> Acción -> Reductor -> Estado y su uso a manera práctica es:

Acciones (Actions)

Definición de las acciones

Primero se definen las acciones:

const ADD_ELEMENTO = 'ADD_ELEMENTO'

Generadores de Acciones

Enseguida los generadores de acciones que retornan un objeto con el tipo de acción y/o datos adicionales, también se pueden omitir las definiciones de las acciones si estas se incluyen a manera de cadena de texto en el generador de acción:

agregarElemento = (datos) => ({type: ADD_ELEMENTO, payload: datos})

Reductores (Reducers)

Después vienen los reducers, que reciben acciones y alteran el estado y siempre reciben como argumento estado y acción:

reducer = (state = initialState, action) => {
  switch(actiopn.type){
    case ADD_ELEMENTO:
      return {
        stateProperty: stateOriginal + cosas a realizar
      }
    default:
      return state;
  }
}

Unión de reducers

Combinar reducers en caso de que haya mas de uno

export default combineReducers({
  reducer1,
  reducer2,
  ...
})

Creación de la "Store"

Se crea una "store" que almacena el estado y recibe un reducer como parámetro:

import {createStore} from 'redux'
const store = createStore(reducer);

Pasos adicionales

Si hay mas de un reducer:

import rootReducer from './reducers';
const store = createStore(rootReducer)

Observar cambios del estado en la "Store

Para monitorear los cambios a los estados se pude "suscribir a la store":

const unsuscribe = store.suscribe(() => {
  acciones a realizar al cambiar el estado de la store
  console.log(store.getState())
})

Redux con React

Para usar redux con React sem realizan lo siguiente:

Importar react-redux

import {Provider} from 'react-redux'

Envolver un componente con el provider con la store como "Prop"

<Provider store={store}>
  <App />
</Provider>

"Mappear" estado y reducers para ser usados en el actual componente:

const mapStateToProps = (state) => {
  operacionsConElState...
  ...
  return {
    stateProperty: statePropertyValue
  }
}
const mapDispatchToProps = (dispatch) => {
  funcionQueActualizaElEstado(state){
    dispatch({
      type: ACTION,
      state
    })
  }
}

"Connectar" redux con react, se conenctan solo el estado y las acciones a despachar en el actual componente:

import {connect} from 'react-redux'
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Componente);

Despachar eventos en algún componente:

import {store} from 'redux';
<Component onClick={() => store.dispatch(agregarElemento(datos))}

Estructura básica BD MySQL/MariaDB

Estructura básica para crear una BD en MySQL/MariaDB

Este es un ejemplo para crear una base de datos a base de comandos, los cuales se pueden ejecutar directamente en el shell del administrador de BD o mediante un archivo .sql el cual se puede cargar también mediante comandos. El ejemplo contiene la creación de llaves auto incrementables, llaves foraneas, enumeraciones y más.

DROP DATABASE IF EXIST libreria_cf;
CREATE DATABASE IF NOT EXIST libreria_cf;

USE libreria_cf;

CREATE TABLE IF NOT EXIST autores(
  autor_id INT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
  nombre VARCHAR(25) NOT NULL,
  apellido VARCHAR(25) NOT NULL,
  seudonimo VARCHAR(25) UNIQUE,
  genero ENUM('M', 'F'),
  fecha_nacimiento DATE NOT NULL,
  pais_origen VARCHAR(40) NOT NULL,
  fecha_creacion DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE libros(
  libro_id INTEGER UNSIGNED PRIMARY KEY AUTO_INCREMENT,
  autor_id INT UNISGNED NOT NULL,
  titulo VARCHAR(50) NOT NULL,
  descripcion VARCHAR(250),
  paginas INTEGER UNGSIGNED,
  fecha_publicacion DATE NOT NULL,
  fecha_creacion DATETIME DEFAULT DEFAULT CURRENT_TIMESTAMP
  FOREING KEY (autor_id) REFERENCES autores(autor_id)
);

INSERT INTO autores(nombre, apellido, seudonimo, genero, fecha_nacimiento, pais_origen), VALUES('Mario', 'Abreu', 'Mariano de la Torre', 'M', '1978-12-30', 'México');

ALTER TABLE libros ADD ventas INT UNSIGNED NOT NULL;

ALTER TABLE libros ADD stock INT UNSIGNED NOT NULL DEFAULT 10;

ALTER TABLE libros DROP COLUMN stock;

ALTER TABLE usuarios RENAME users;

ALTER TABLE usuarios ADD email VARCHAR(50);

ALTER TABLE usuarios ADD email VARCHAR(50) NOT NULL DEFAULT '';

ALTER TABLE tabla ADD columna VARCHAR(50) UNIQUE;

ALTER TABLE usuarios MODIFY telefono VARCHAR(50);

ALTER TABLE usuarios ADD id INT UNSIGNED NOT NULL AUTO_INCREMENT, ADD PRIMARY KEY (id);

ALTER TABLE usuarios ADD FOREIGN KEY(grupo_id) REFERENCES grupos(grupo_id);

ALTER TABLE usuarios DROP FOREIGN KEY grupo_id;

background-clip

background-clip recorta el fondo en función de la distancia del borde, padding o contenido, puede servir para crear espacios entre el background y el border si la necesidad de añadir capas adicionales.

.fondo-recortado{
  padding: 4rem;
  background: whitesmoke url('https://placeimg.com/800/600/any') no-repeat center / cover;
  background-clip: content-box; /* border-box, padding-box*/
}

Número máximo y mínimo

Determinar el número máximo y mínimo de manera sencilla.

let mine = [34, 7, 23, 53, 2, 6, 37, 8, 18, 84, 12, 44];

let min = Math.min(...mine); // 2

let max = Math.max(...mine); // 84

Combinar background-image y background-color

Combinar background image y color

Con la propiedad background-blend-mode se puede mezclar la imagen y color de fondo para lograr un efecto más oscuro o claro con el color definido.

.div{
  min-height: 80vh;
  background: rgba(0,0,0, 0.5) url('https://picsum.photos/600') no-repeat center/cover;
  background-blend-mode: darken /* normal, darken, luminosity, inherit, unset */
}

Similares: Css blend modes

Anulación de estilos en enlaces

Los estilos en los elementos de enlace a pueden llegar a ser anulados si no siguen el orden LVHA, es decir, ":link", ":visited", ":hover" y ":active". En el siguiente ejemplo, el selector a:hover desactivara al selector a:active al no ser definidos en el orden adecuado (LVHA). por el contrario, si se invierte el orden, ambos funcionarán sin problema.

a:active{
 color: red
}

a:hover{
 color: golden;
}

Referencia: CSS Tricks

Generar clave aleatoria o UUID

Podemos generar una clave aleatoria o UUID de una manera muy sencilla con Javascript, para ello basta con lo siguiente:

Math.random() //Nos genera un número decimal aleatorio entre 0 y 1, sin incluirlo
.toString(36) //El número generado lo convertimos a cadena con base 36
.substring(2); //Y finalmente quitamos el 0 y "." inicial. 

const x = Math.random().toString(36).substring(2);
console.log (x)  //"khqljjov4cp"

Imágenes de perfil para usar

https://picsum.photos/id/64/100

https://picsum.photos/id/1027/100