DEV Community: Jesus Abril

Google - Cloud Firestore WEB v.9

Jesus Abril — Thu, 21 Oct 2021 15:40:51 +0000

Asumiendo que ya has configurado tu proyecto con la versión web 9, vamos a explicar brevemente como trabajar con esta versión, que para mi opinión personal, se hace más fácil y más rápida a la hora de trabajar con ella.

Esta versión tiene infinidad de métodos, pero solo hablaremos de los más usados y útiles.

Para comenzar

Necesitas importar e instanciar tu base de datos.
Y en nuestro caso lo propagaremos por nuestro proyecto en react.

import { initializeApp } from "firebase/app";
import { getStorage, ref } from "firebase/storage";
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;

Siempre debemos utilizar en esta nueva versión initializeApp con la configuración que obtuviste de tu proyecto.

Perfecto

Ya tenemos nuestra db lista para importar desde donde la necesitemos sin tener que volverla a iniciar.

Subamos datos

En tu archivo JS, donde necesites crear y subir los datos, utilizaremos los métodos que verás a continuación:

import db from "../middleware/firebase";
import { collection, addDoc } from "firebase/firestore";

const subirPelicula = (pelicula) => async {
  try {
     await addDoc(collection(db, "peliculas"), {
        ...pelicula
     });
  } catch(err) => { console.error(err) };
}

Como puedes ver addDoc añadiría un nuevo documento a tu colección llamada "películas", de la instancia de tu db base de datos.

Nota si no añadimos ninguna id o referencia addDoc la añadirá por ti.
Se trata de una key alfanumérica como esta 2FW02pxkfsiHgNCdUnnfs

Obtengamos datos

En algún momento necesitaremos obtener nuestros datos para mostrarlos en algún sitio, pues vamos a ello.

Solo una película

import db from "../middleware/firebase";
import { doc, getDoc, getDocs } from "firebase/firestore";

const obtenerPelicula = (id_pelicula) => async {
  try {
     const docRef = doc(db, "peliculas", id_pelicula);
     const docSnap = await getDoc(docRef);
     if (docSnap.exists()) {
        //Si existe, tendremos nuestra pelicula en docSnap.data()
        peliculas.push(docSnap.data());
     } else {
        console.log("No existe");
     }
  } catch(err) => { console.error(err) };
}

Si en cualquier caso queremos obtener toda la colección de películas... como verás utilizamos el método en plural 🤯 facil no?

import db from "../middleware/firebase";
import { collection, getDocs } from "firebase/firestore";

const obtenerPeliculas = () => async {
  try {
     const querySnapshot = await getDocs(collection(db, "peliculas"));
     querySnapshot.forEach((doc) => {
        peliculas = doc.data();
     });
  } catch(err) => { console.error(err) };
}

Modificar

Si sabes el path o la id que quieres modificar sería tan sencillo como esto, utilizando el setDoc aunque valdría igual addDoc, pero os recomiendo siempre usar la primera para evitar liarse.

import { doc, setDoc } from "firebase/firestore";

await setDoc(doc(db, "peliculas", "id_de_la_pelicula"), {
  enCines: true,
});

Borrar

Al igual que modificar necesitaremos saber la id o path de lo que queremos borrar.

import { doc, deleteDoc } from "firebase/firestore";

await deleteDoc(doc(db, "peliculas", "id_de_la_pelicula"));

Y por último, si lo que queremos es borrar solo un campo.

import { doc, updateDoc, deleteField } from "firebase/firestore";

const peliculaRef= doc(db, "pelicula", "id_de_la_pelicula");

await updateDoc(peliculaRef, {
    campoAEliminar: deleteField()
});

¡Eso es todo!
Os recomiendo usar esta nueva versión, aunque al principio parezca más difícil.

Recordad que todo tiene una curva de aprendizaje, paciencia y práctica.

Si quieren ampliar más, toda la documentación esta muy bien detallada.

Documentación Firestore ES

Trending CSS Frameworks

Jesus Abril — Wed, 19 Aug 2020 10:20:15 +0000

From easy to complex, from simple to the best

How useful is a great CSS Framework? As you know there are many of them, one's easy and others more complexes, but all of them really helpful.

Those chosen are my favorites, there are already popular and getting even more.

Bulma.io CSS

This is a powerful CSS framework which its primary feature is the fact that all its components are dependent of flex box, making it a nice CSS to create easy layouts.
Its simple classes make it very intuitive. Let see an example:

<section class="section">
    <div class="container">
      <h1 class="title">Section</h1>
      <h2 class="subtitle">
        A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
     </h2>
   </div>
</section>

You only need to read its documentation once, amazing isn't it?

Bulma.io CSS

Let talk about my 2nd favorite one

Bootstrap v.5

Almost everybody in web development know about Bootstrap.
And it's simple amazing, the recent arrival of its new version made a big step just leaving out jQuery and rewriting back all its plugins in simple JavaScript. (lighter and faster).
Also, a new feature is the responsive fonts and headings, plus the gutter. 😍

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Bootstrap is a strong framework that you should learn. It is the most used one.

See more about v5.Bootstrap

And the last one at the first position....

Tailwind CSS

How amazing a CSS framework can be? Its prefix classes as...

    'sm': '640px',
    // => @media (min-width: 640px) { ... }

    'md': '768px',
    // => @media (min-width: 768px) { ... }

    'lg': '1024px',
    // => @media (min-width: 1024px) { ... }

    'xl': '1280px',
    // => @media (min-width: 1280px) { ... }

🦄🦄🦄🦄

All you can think and would use to build an amazing HTML web, Tailwind has it already ready to use.

Still, you don't trust me?
This CSS Framework is full of features, almost everything is done in classes like, animations, transitions, negative margins or paddings, dark mode 😍😍.
You don't need a style.css anymore, trust me!

Tailwindcss

Ending the post I would like to introduce a side project that my friend

.ltag__user__id__ .follow-action-button { background-color: #19063A !important; color: #dce9f3 !important; border-color: #19063A !important; }

[Deleted User]

& myself are working on.

WickedTemplates

We are creating pure HTML templates based on the CSS Frameworks I wrote about.

We are not using any stile out of the CSS Frameworks and as you can see, these CSS Frameworks has a lot of potential.

Thanks for reading!.

HTML Templates made with Bulma & Tailwind CSS

Jesus Abril — Fri, 07 Aug 2020 11:49:51 +0000

HTML Templates ready to customize.

Today we have uploaded some free HTML Templates ready to use for your personal blog, landing page or documentary page.

Just check and download them! 👇👇
https://www.wickedtemplates.com/ is a side project that we (@Michael_Andreuzza & me) are working on.

These templates are done using Bulma and Tailwind css frameworks.
We are working on more free templates and Premiun ones.

I would suggest you to also have a look at 👉https://www.colorsandfonts.com/ for a nice Colours Pallete and Gradients to customize your template.

Would be really appreciated if you like to help us to review our work.

Thanks for reading!

Patrones de diseño en #javascript - Singleton

Jesus Abril — Thu, 16 Apr 2020 06:53:29 +0000

El patrón Singleton está diseñado para restringir la creación de objetos pertenecientes a una clase. instancia única.

Veamos un ejemplo:

const alumnos = {
     // Todos los alumnos
     listaAlumnos : [],

     // Obtener un alumno
     get: function(id) {
          return this.listaAlumnos[id]
     }, 

     // Crear un alumno
     crear: function(datos) {       
          this.listaAlumnos.push(datos);
     }, 

     // Listar todos los alumnos
     listado: function() {
          return this.listaAlumnos;
     }
}

const infoAlumno = {
     nombre: 'Jesus', 
     edad: 30
}
const infoAlumno2 = {
     nombre: 'Juan',
     edad: 20
}

alumnos.crear(infoAlumno);
alumnos.crear(infoAlumno2);

const listado = alumnos.listado();
console.log(listado);
//(2) [{…}, {…}]
//0: {nombre: "Jesus", edad: 30}
//1: {nombre: "Juan", edad: 20}

const alumno = alumnos.get(0);
console.log(alumno);
//{nombre: "Jesus", edad: 30}

Singleton permite la creación directa de objetos.
Uno de los patrones más comunes y fáciles de usar en proyectos pequeños.

Patrones de diseño en #javascript - Factory

Jesus Abril — Mon, 13 Apr 2020 14:20:36 +0000

Este patrón de diseño te va a ayudar a crear objetos o clases de tipo similar, cuando no sabes exactamente de qué tipo serán finalmente o cuales vas a utilizar.

Según vayas creando tu proyecto vas a decidir cuales vas a instanciar.

Clases u objetos Similares, te voy a dar un ejemplo:

// Imaginemos que tenemos una pequeña app que crea Webs

function constructorSitios() {
     // creamos el método
     this.crearElemento = (texto, tipo) => {
          let html;

          if (tipo === 'input'){
               html = new InputHTML(texto)
          } else if (tipo === 'img'){
               html = new ImangenHTML(texto)
          } else if (tipo === 'h1'){
               html = new HeadingHTML(texto)
          } else if (tipo === 'p'){
               html = new ParrafoHTML(texto)
          }
          html.tipo = tipo;
          return html;
     }
}

Como vemos, los objetos declarados son objetos similares, son relacionados y comparten mismas propiedades, en este caso la variable texto.

// Ahora imaginemos que necesitamos crear un H1
// Creamos el constructor HeadingHTML
const HeadingHTML = function(texto){
     this.texto = texto;
};
const sitioWeb = new constructorSitios();
sitioWeb.crearElemento('Bienvenidos', 'h1') );

Esto llamará al método que declaremos en nuestra función y una vez pasada la condición if, creará una nueva instancia de HeadingHTML, a su vez le pasamos el texto (Bienvenidos), obteniendo como resultado un objeto que contiene un H1.

HeadingHTML {texto: "Bienvenidos", tipo: "h1"}

En resumen

El factory abre un abanico de posibilidades al trabajar con objetos similares sin tener que duplicar código, solo deberás instanciarlo!.

Patrones de diseño en #javascript - ¿Qué son?

Jesus Abril — Mon, 13 Apr 2020 11:10:47 +0000

Los patrones de diseño o design patterns son soluciones de estructura creados para facilitar la escritura de código.
Digamos con palabras claras, son utilizados para que el código mantenga una misma estructura y sea más legible.

Categorías

De	Descripción
Creación de Objetos	Se usa para definir la manera de crear objetos
Estructura	Definen cómo se componen y relacionan los objetos entre sí
Comportamiento	Definen la comunicación entre objetos
Arquitectura	Definen la funcionalidad sobre la arquitectura de la creación de carpetas, nombres y qué funcionalidad tiene cada archivo

En cada categoría existen varios tipos pero voy a explicar los más importantes en diferentes posts.

Creación de objetos

Comportamiento

Observer en construcción
Mediator en construcción

Los patrones de diseño son muy importantes y son preguntas clave en entrevistas personales.

Patrones de diseño en #javascript - Module

Jesus Abril — Mon, 13 Apr 2020 11:10:02 +0000

Es una forma de crear variables públicas y privadas en tus objetos. Es la encapsulación de código.

Veamos un ejemplo.

const comprarTicket = ( () => {
     // privado
     let evento = 'Conferencia Js 2020';
     const getTicket = () => {
          const elemento = document.createElement('p');
          console.log(`Ticket comprado para ${evento}`);
     }
     // público
     return {
          mostrarTicket: () => {
               getTicket();
          }
     }
})();

comprarTicket.mostrarTicket();

// Ticket comprado para Conferencia Js 2020

Que normalmente está asociado con IIFE - Expresión de función ejecutada inmediatamente

Es muy común su uso y seguramente que ya lo estás utilizando desde hace tiempo.

Este patrón hace que evitemos problemas como la re-declaración de variables con el mismo nombre o bien evita que re-escribas el contenido de tu variable.

El patrón de diseño module no tiene nada que ver con javascript modules, recordemos que los patrones de diseño son la manera más idónea para estructurar tu código.

Diferentes formas de declarar variables en javaScript ⭐

Jesus Abril — Fri, 20 Mar 2020 12:06:37 +0000

Diferentes maneras de declarar variables en JavaScript

Tipos de declaraciones de variables

var

/* Declarando variables con var */
          var myVar; // inicializada sin declarar
          var myVar = 'hola mundo'; //Inicializada declarando el valor string 'hola mundo'
          console.log(myVar); 
          //Resultado:
          // 'hola mundo'

Puede ser declarada tantas veces como quieras con el mismo nombre y no ocurrirá ningun problema.
Su salida dependerá del último valor declarado, en nuestro caso 'hola mundo'.

let

/* Declarando variables con let */
          let nombre = 'Jesus';
          let apellido = 'Abril';
          let nombre = 'Juan';
          console.log(nombre + ' ' + apellido);
          // Resultado:
          // Uncaught SyntaxError: Identifier 'nombre' has already been declared

          //tambien puedes declarar múltiples de la siguiente forma
          let  myNombre   = 'Jesus',  // como puedes observar se usa una coma.
               myApellido = 'Abril';
          console.log(myNombre + ' ' + myApellido);
          // Resultado:
          // Jesus Abril

          let otroNombre;
          console.log(otronombre);
          //Resultado
          //Uncaught ReferenceError: otronombre is not defined
          otroNombre = 'Juan Ramirez';
          console.log(otroNombre);
          // Resultado
          // Juan Ramirez

No permite declaraciones de variables con el mismo nombre;
Puede ser declarada sin inicializar.
Debe ser inicializada antes de su uso.
Deben llamarse diferente.

Utiliza let cuando su valor se cambien en un futuro.

const

/* Declarando variables con const */
          const producto;
          console.log(producto);
          // Resultado
          // Uncaught SyntaxError: Missing initializer in const declaration

          const otroProducto = 'Jabón';
          console.log(otroProducto);
          // Resultado
          // Jabón

Una constante siempre debe inicializarse
No puede llamarse igual a otra variable

Úsala cuando sepas que su valor no cambiará en el futuro.

Podeis reusar el código github

Intro a passportjs con node y mongoDB

Jesus Abril — Mon, 16 Mar 2020 11:25:28 +0000

Seguro, flexible y modular

Passportjs nos ayuda a autentificar a nuestros usuarios, clientes o visitantes, de una forma sencilla, ágil y robusta.
Passportjs está diseñada para trabajar con base en express.

Para comenzar y suponiendo que nuestro proyecto está preconfigurado vamos a instalarlo.

Vamos a necesitar:

//=================================
// * passport
// * passport local
// * passport local moongose
// * express-session
//=================================

passport *es la librería principal.
passport local *es la más simple, solamente para declarar usuario y password.
passport local moongose *es el driver para nuestra base de datos en mongoDB. 4.express-session *nos ayudará a configurar las sesiones una vez logueado el usuario.

Comenzamos instalando lo necesario

npm install passport passport-local passport-local-mongoose express-session --save

Una vez instalados los paquetes necesarios vamos a crear nuestro modelo de usuario.

user.js

const        mongoose   =   require('mongoose'),
passportLocalMongoose   =   require('passport-local-mongoose');

const UserSchema = new mongoose.Schema({
    username: String,
    password: String
});
// añadimos todas las características de passport a nuestro schema
UserSchema.plugin(passportLocalMongoose);
module.exports = mongoose.model('User', UserSchema);

Ahora vamos a nuestro archivo principal js, en mi caso app.js y configuramos passport para funcionar con express y mongodb.

app.js

//declaramos nuestra variables 
const   passport        = require('passport'),
        LocalStrategy   = require('passport-local');
//importamos nuestro modelo Usuario
        User        = require('./models/users'),

//configuramos passport
app.use(require('express-session')({
   secret: 'Una frase secreta para encriptar',
   resave: false,
   saveUninitialized: false
}));
app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());
app.use(function(req, res, next){
    res.locals.currentUser = req.user;
    next();
}); //le pasamos a nuestro express el usuario de manera global

Ya tenemos nuestro servidor a punto para usar passportjs.

Vamos a ello.

app.js


app.post('/login', passport.authenticate('local', 
            {
               successRedirect: '/bienvenido',
               failureRedirect: '/login',
               failureFlash: 'Usuario o contraseña incorrecto'
            }), (request, response){}
        );
app.get('/loggout', (req, res) =>{
    req.logOut();
    res.redirect('/index');
});

Con la función incorporada authenticate() de passportjs, obtendremos el resultado de si el usuario está identificado o no.

Todo esto sucede gracias a passportjs y sus métodos de fácil uso.

Aquí os dejo el link a mi código un poco más complejo pero donde utilizo casi toda la funcionalidad de passportjs codigo

Tomar ScreenShots de nuestra web con Google Dev Tools

Jesus Abril — Tue, 04 Feb 2020 13:54:44 +0000

Una más de las infinitas utilidades de "Herramientas para desarrolladores" de Chrome.

Por si no lo sabías, google Chrome pone a tu disposición muchas utilidades para este área y una que te ayudará a presentar tus proyectos se llama screenshot.

Es tan sencillo como presionar CTRL + MAYUS + P esto abrirá la pestaña de run command, teclea la palabra screenshot y te aparecerán las diferentes posibilidades.

Capturar el área que selecciones. (Este cambiará tu puntero del mouse y podrás seleccionar el área que quieras).
Capturar el full size. (Abarca toda tu web).
Capturar el node. (Lo que ve tu pantalla)
Capturar la pantalla. (Es como el típico screenshot, pero sin ver el browser).

Saquenle provecho a todas las utilidades!

Vean aquí el resultado del full size

Espero que les ayude.

How to set up PHP executable path in VSCode (XAMPP user's)

Jesus Abril — Sat, 11 Jan 2020 15:56:35 +0000

Did you find this message when creating a PHP file in VSCode?

Cannot validate since no PHP executable is set. Use the setting 'php.validate.executablePath' to configure the PHP executable.

1. First of all

Open settings.json and paste this line "php.validate.executablePath": "your_unit:/xampp/php/php.exe", paste this in the last line of your settings.json.
Ok, the annoying message does not pop up anymore, and now?.

That's all

not kidding really😄 but... we want to debug PHP also in VSCode right?.

2. CRTL+SHIFT+P

type ext install PHP Debug and install the first match.

Run XAMPP server, create a php file like test.php with phpinfo(); open it in your browser localhost/test.php copy the HTML source (what you see) and paste it into here: xdebug.org/wizard now hit analise my phpinfo() output.
Follow the instruction and download the .dll file, install it in the folder your_unit:\xampp\php\ext .

3. Almost done!

Now open you php.ini from XAMPP and paste the code in the very last line

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
zend_extension = "you_unit:\xampp\php\ext\downloadedfile.dss

Save it!

Now, restart XAMPP and VSCode and you should be done!

Last thing

Wondering how it works?
Open your project on your browser, set a stop point in VSCode and see the magic!

You can follow the documentation at xdebug.org and also at VSCode extension page.

Thanks for read, it's my really first post