Categoría: TypeScript

Cómo Filtrar y Gestionar Datos del Local Storage en JavaScript

Alex Latorre Deja un comentario

En este artículo, exploraremos cómo filtrar y gestionar datos almacenados en el Local Storage de tu navegador web utilizando un script JavaScript. Descubre cómo aplicar expresiones regulares para seleccionar datos específicos y cómo calcular el tamaño del Local Storage. ¡Optimiza tus proyectos web y ofrece a tus usuarios una experiencia más eficiente!

Introducción

Aprenderemos a utilizar un script JavaScript para filtrar datos en el Local Storage y calcular su tamaño. Estos conocimientos son esenciales para el desarrollo de aplicaciones web y pueden marcar la diferencia en la experiencia del usuario. Expliquemos el funcionamiento de este script de manera accesible y amigable.

Filtrando Datos del Local Storage

El primer script que vamos a explorar se utiliza para filtrar datos específicos en el Local Storage. Aquí está el código:

const re = /[a-zA-Z]/g;

Object.keys(localStorage).forEach(function (key) {
  if (key.match(re)) {
    // Realizar alguna acción
  }
});

Vamos a analizarlo paso a paso para comprenderlo a fondo:

  1. const re = /[a-zA-Z]/g;: En esta línea, definimos una expresión regular que busca letras en mayúsculas y minúsculas. Este enfoque es fundamental para seleccionar datos específicos en el Local Storage.
  2. Object.keys(localStorage).forEach(function (key) { ... });: Aquí, obtenemos las claves almacenadas en el Local Storage y las recorremos usando un bucle forEach. Es un paso importante para acceder a los datos que deseamos filtrar.
  3. if (key.match(re)) { ... }: En cada iteración, comprobamos si la clave actual coincide con nuestra expresión regular utilizando el método match(). Si la clave contiene al menos una letra, ejecutamos un código personalizado dentro del bloque if.

Calculando el Tamaño del Local Storage

Añadiremos otro script que calcula el tamaño total del Local Storage y lo muestra en kilobytes (KB) o megabytes (MB). Aquí tienes el código:

var allStrings = '';
for (var key in window.localStorage) {
  if (window.localStorage.hasOwnProperty(key)) {
    allStrings += window.localStorage[key];
  }
}

let size = 3 + (allStrings.length * 16) / (8 * 1024);

if (size > 1024) {
  this.localStorageSize = Math.ceil(size / 1024) + ' MB';
} else {
  this.localStorageSize = allStrings
    ? Math.ceil(3 + (allStrings.length * 16) / (8 * 1024)) + ' KB'
    : '0 KB';
}

Este script recorre todas las claves del Local Storage, recopila sus valores y calcula el tamaño total en KB o MB. Esto es útil para monitorear y gestionar el espacio utilizado por tus datos almacenados en el navegador.

Uso y Personalización

Puedes personalizar estos scripts según tus necesidades. Además de realizar una «acción» en el primer script, ahora también puedes mostrar el tamaño total del Local Storage a tus usuarios. Esto es útil para mantener un control sobre el espacio de almacenamiento y tomar decisiones informadas.

Google Analytics en Angular

Alex Latorre Deja un comentario

Si trabajas con Angular (o algún sistema similar SPA) y has intentado usar google analytics para monitorizar tu página, te habrás dado cuenta de que GA no es capaz de «seguir» los cambios de URL de las SPA.

para que el seguimiento se realize correctamente, debemos llamar la función de Google Analytics que notifica que una URL ha sido visitada. Existen diferentes maneras de hacerlo, pero te explicaré la que yo uso 😉


El Script de Google Analytics

Voy a dar por supuesto que te has registrado en Google Analytics y tienes ya tu identificador ( del estilo ‘UA-4353454353-6’) Si no es así, ya sabes lo que toca!

Añade este código en tu ‘index.html’

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXXX-X', 'auto');
</script>

Este es el código de Google que realizará el seguimiento. (Recuerda cambiar ‘UA-XXXXXXXXX-X’ por tu ID!!)

 

Fíjate que hemos eliminado del script original de GA la línea

ga('send', 'pageview');

Esta es la función que «comunica» la url que estamos visitando. La eliminamos por que la llamaremos desde el constructor de nuestros componentes.

Cargando las funciones GA en los componentes

Ahora, para poder llamar las funciones de Google Analytics desde nuestros componentes, vamos a instalar los @types/google.analytics que contienen las definiciones para Google Analytics. (Puedes consultar el paquete npm para más información)

Para instalarlas ejecutaremos en la carpeta de nuestro proyecto la siguiente instrucción:

npm install --save-dev @types/google.analytics

De esta manera tendremos disponibles las funciones ga() en nuestros componentes.

 

Llamando a desde el constructor del componente

Genial, pues solo nos falta llamar las funciones desde el componente que deseemos (hay que tener en cuenta que deberemos añadir este código a los constructores de cada componente que sea subsceptible de ser llamado por una ruta) 
  constructor(
    private router: Router,
  ) {
    this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        ga('set', 'page', event.urlAfterRedirects);
        ga('send', 'pageview');
    }
    });
  }
Como habrás adivinado, debes importar el Router de angular y el NavigationEnd para poder usarlos: 
import { Router } from '@angular/router';
import { NavigationEnd } from '@angular/router';

En ocasiones algunos usuarios han reportado errores del estilo: 
Cannot find name 'ga'. webpack: Failed to compile.
Esto es debido a que al compilar, angular no reconoce ga() como una función (aunque en realidad si esta disponible). Podemos solucionarlo fácilmente escribiendo la siguiente línea justo debajo de los imports: 
declare var ga: Function;

Y con esto ya lo tienes! Tu página está monitorizada y podrás saber que le gusta a tus visitantes!

Comparando cadenas: Eliminar acentos de una cadena con JavaScript

Alex Latorre 1 comentario

Desde que me dedico a la programación, me he encontrado en multitud de ocasiones con el problema de los acentos, ya se por que no se visualizan bien en las webs, porque el charset no esta bien especificado en la base de datos y nos los «convierte» en «simbolos raros» o porque al comparar cadenas necesitaríamos eliminarlos.

Habitualmente, al hacer buscadores o programar funciones que comparen un texto, nos encontramos con que el usuario es vago o analfabeto y no escribe correctamente. Esto se traduce en errores al comparar las cadenas de texto.

Lo primero que debemos hacer para garantizar que estamos comparando correctamente es pasar todo el texto a mayúsculas (o minúsculas, como prefieras) para lo cual tenemos las funciones toLowerCase() / toUpperCase() y podemos usarlas así:

let str = 'Mi Cadena de prueba';
console.log(str.toLowerCase());
console.log(str.toUpperCase());

Lo que nos produciría la siguiente salida:

mi cadena de prueba
MI CADENA DE PRUEBA

Hasta aquí todo fácil, ¿no? 
Pero … ¿y para eliminar los acentos?
Pues no existe ninguna función que permita eliminarlos, así que lo único que podemos hacer, es definirnos una nosotros mismos.

Si buscas por Internet, podrás ver una gran cantidad de «maneras» de eliminar los acentos, haciendo sustituciones con expresiones regulares o convirtiendo las cadenas de formato.

Pero muchas de ellas son «sucias» y muy rebuscadas. Por eso te propongo esta:

let str = 'Más Cadenas';
console.log(str.normalize('NFD').replace(/[\u00C0-\u00FF]/g, ''));

// Salida: 'Mas Cadenas'

Con esto ya tendríamos nuestra cadena lista para se comparada de manera que si unimos todos los trozos de código, podemos definirnos una función que nos «prepare» nuestro texto para ser comparado. Te pongo un ejemplo:

cleanCadena(value) {
 return return value.normalize('NFD').replace(/[\u00C0-\u00FF]/g, '').toUpperCase();
}

Recuerda que cuando vayas a comprar dos cadenas, deberás pasar ambas por el cleanCadena(), es muy común limpiar únicamente el valor a buscar por despiste!!

Usar un componente en varios módulos en Angular

Alex Latorre Deja un comentario

Como ya debes haber averiguado si estas aquí, los componentes en tu aplicación de Angular sólo puede declararse dentro de un único módulo. Esto supone un problema debido a que en ocasiones queremos reutilizar un componente en diferentes partes de la aplicación (por ejemplo un datepicker o un Pipe).

Para resolver el problema lo más cómodo es declarar un módulo «shared» dentro del cual crearemos los componentes que queramos compartir en el resto de la aplicación.

Un ejemplo seria:

@NgModule({
  declarations: [ SharedComponent ],
  exports: [ SharedComponent ]
})
export class SharedModule {}

Después sólo necesitaremos importar el módulo allí donde queramos usarlo.

@NgModule({
   imports: [ SharedModule ]
})
export class ModuloQueUsaTuSharedComponent {}

Si tienes un grupo de Pipes que quieres usar en toda tu aplicación puede ser muy útil definir un módulo que los contenga a todos. Pero por supuesto, si piensas crear un componente para usarlo en diferentes aplicaciones debes definir un módulo que contenga tu componente de manera que puedas usarlo únicamente importándolo.

Ahora ya sabes cómo definir tus componentes dentro de un módulo como todo un profesional!

Como extra, te dejo aquí un enlace por si buscas más información.

.woff2 Failed to load resource 404 NOT FOUND

Alex Latorre Deja un comentario

Me he encontrado un error «común» en diferentes aplicaciones con Angular al colgarlas en servidores IIS. No es un fallo muy importante, pero puede sacar de quicio solucionarlo, ya que cuando debugas en local, no aparece este error.

Para solucionar este error, simplemente debes definir la extensión .woff2 con el mimeType «application/font-woff2» en el IIS.

Para hacer esto simplemente acudimos a la configuración mime del sitio web.

Alternativamente (y mi preferida) puedes establecer esta configuración en el webconfig, de esta manera no necesitarás tocar configuraciones del servidor (perfecto si no tienes acceso a la administración de IIS) y podrás mover la web de un lugar a otro con la seguridad de que funciona.

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>

Espero que te sea útil !

Lazy Loading en Angular

Alex Latorre Deja un comentario

¿Para qué necesito Lazy Loading?

La mayoría de veces que creamos un proyecto en Angular (o al menos en mi caso) nos interesa que la aplicación cargue de una sola vez, de manera que sacrificando un pequeño período de tiempo al inicio, conseguimos que la velocidad y la fluidez sea mucho mas alta durante el resto de la navegación.

Para aplicaciones web usadas dentro de una red local, esta opción es más que perfecta, pero ¿qué podemos hacer si nuestra aplicación crece mucho y sobrecarga el navegador? ¿y si un tipo de usuario concreto sólo debe acceder a una parte muy pequeña de la aplicación?

Este problema lo solucionamos usando Lazy Loading, que básicamente significa que la aplicación web no se cargará de una sola vez al arranque, si no que se irá cargando a demanda según la necesidad del usuario.

Empezando: las rutas

Para empezar a trabajar con Lazy Loading lo primero es entender como carga las rutas Angular.

Si ya tenemos un proyecto, vamos a abrir nuestro fichero de rutas y si no es así puedes crear un nuevo proyecto especificando  el parámetro –routing para que te genere automáticamente un fichero de rutas:

ng new --routing

En mi caso, mi fichero es el siguiente:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { InicioComponent } from './inicio/inicio/inicio.component';
import { GalleryShowComponent } from './gallery-show/gallery-show/gallery-show.component';
import { AboutComponent } from './about/about/about.component';
import { GallerySelectorComponent } from './gallery-selector/gallery-selector/gallery-selector.component';

const routes: Routes = [
{ path: 'informatica', loadChildren: './inicio/inicio.module#InicioModule' },
{ path: 'gallery/view', loadChildren: './gallery-show/gallery-show.module#GalleryShowModule' },
{ path: 'about', loadChildren: './about/about.module#AboutModule' },
{ path: 'gallery', loadChildren: './gallery-selector/gallery-selector.module#GallerySelectorModule' },
{ path: '**', redirectTo: '/informatica'}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Aquí lo que estamos viendo es que nuestro módulo de rutas define unas rutas concretas para las diferentes páginas que tendremos, pero en lugar de referenciar una ruta a un componente, lo estamos referenciando a un módulo. Vamos a fijarnos en la galaeria (por ejemplo):

{ path: 'gallery', loadChildren: './gallery-selector/gallery-selector.module#GallerySelectorModule' },

Tenemos por un lado el path, donde especificamos la url y en loadChildren escribiremos la ruta al archivo del módulo que contiene nuestros componentes para esa página. La sintaxis especifica después de la ruta el nombre del módulo (separado por una ‘#’.

LoadChildren lo que nos indica es que el módulo tendrá sus propias rutas definidas, por lo que no las cargamos, simplemente cuando las necesitemos ya las buscará.

Fíjate que cargamos ya los componentes que forman parte de los módulos que vamos a usar.

Hasta aquí fácil no?

Creando nuestros módulos

Ahora tendremos que definir nuestros módulos y escribir en ellos las rutas que cargaremos. Para seguir con el ejemplo, os pondré el contenido del módulo gallery-selector (es el que esta funcionando en esta misma web 😀 )

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GallerySelectorComponent } from './gallery-selector/gallery-selector.component';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: GallerySelectorComponent},
];


@NgModule({
  imports: [
    CommonModule, RouterModule.forChild(routes)
  ],
  declarations: [GallerySelectorComponent]
})
export class GallerySelectorModule { }

En este fichero debemos fijarnos sobre todo en cuatro cosas:

  • Importamos los componentes que vamos a usar y forman parte del módulo
  • Definimos una variable routes con las rutas definitivas
  • Importamos Routes y RouterModule
  • Añadimos en imports «RouterModule.forChild(routes)» para que las rutas estén disponibles cuando el archivo de rutas maestro lo consulte.

 

Comandos útiles:

//Generar un módulo nuevo
ng generate module mi-modulo

//Cenerar un componente dentro de un módulo
ng generate component mi-modulo/mi-componente

Probando la configuración

Llegados a este punto nuestra aplicación ya empezará a generar el Lazy loading, pero y si queremos comprobar que realmente funciona?

Sólo tenemos que usar las herramientas de desarrollador de Chrome y fijarnos en las Request que se generan:

Como puedes ver se genera una serie de peticione sque cargan los JS inciales y sólo al visitar un álbum se genera la petición de gallery-show.module.chunk.js

Esto mismo puedes comprobarlo en el apartado de galeria de la web y verlo por ti mismo! (Recuerda que una vez compilado angular renombra los módulos con un hash!)

Como curiosidad, comentar que como convenio se suele poner un + en cada carpeta que contiene un módulo cargado por Lazy Loading. De esta manera tendremos contentos hasta a los más puritanos!