del relative time format porque es nativo de la plataforma y creo que
funciona bastante bien es verdad que necesitamos una cuanta línea de código
de hecho si queréis os la comento un poco vale vamos a ir paso por paso esto
es un hook en react que recibe el time stamp el local es porque en el objeto
este que tenemos en el window que te da el date time format y hacer el relative
time format necesitas indicarle cuál es el lenguaje que vas a utilizar pero el
genial de esto es que ya tenemos una forma nativa todos los lenguajes que vamos a
soportar ahora por ahora sólo es español pero si el día de mañana cambiamos pues
mira entonces para hacer el time ago lo hacemos con este método el get time ago
le pasamos el time stamp y le pasamos en qué idioma lo queremos aquí creamos
primero este esta instancia relative time format hacemos un new intel relative time
format esto de la plataforma vale esto es sin dependencias y le decimos en qué
idioma lo vamos a hacer en este caso pues esto sería español así que así
estaría ahora lo que tenemos que decir es calcular el número de segundos que ha
pasado desde el time stamp al momento actual para eso tenemos este get seconds
div que esto bueno es un poco más pero bueno no es muy complicado es tú le pasas el
time stamp miras la fecha que tienes ahora le restas el time stamp y lo divides entre mil
porque el time stamp es en milisegundos y con esto tienes el número de segundos que
han pasado entre la fecha de ahora y el time stamp que te están enviando ahora que
tenemos el número de segundos de diferencia el número de segundos que han
pasado lo que tenemos que hacer es utilizar también este método aquí para no
sólo saber el número de segundos dependiendo del número de segundos podemos
decir que han sido segundos minutos días bueno horas días semanas no dependiendo de de la
de cómo de grandes vale que esto ya te lo hace date fns vale cierto es verdad es
verdad pero el date fns mira cuánto ocupa el date fns date fns 18k bueno pues 18k que no
hemos salvado lo que estamos haciendo es vale cuántos segundos han pasado vamos a ir
mirando cuántos segundos han pasado y los vamos a comparar con estas unidades de forma que se ha
pasado más de un segundo menos de un minuto por ejemplo pues vamos a hablar hace tres segundos se ha
pasado menos de una hora pues vamos a decir han pasado cuatro minutos si ya entendéis no más o menos
es como para adaptar las unidades para que tengan más sentido no vas a decir hace 340 segundos no tiene
sentido pero sabiendo cuántos segundos han pasado también puedes calcular se han pasado días segundos minutos
lo que sea eso es básicamente lo que conseguimos aquí por un lado el valor o sea por ejemplo si
calculamos que al final vamos a hablar en días la unidad sería de y el valor sería 3 esto se hace
pues haciendo una división ya que sabes la unidad de segundos que tiene un día pues esto divides y ya
está y una vez que tienes tanto el valor como la unidad lo que haces es formatear la fecha le pasas el
valor le pasa la unidad y este que está imago ya te dice hace tres días además esto te lo pone en el idioma que
que tú consideres vamos a verlo en funcionamiento en randies
vale un poquito sería esto lo pondríamos así el time stamp vamos a poner
time stamp new date vamos a poner new date menos esto debería ser hace dos tres una hora
return esto no podemos hacer vale get seconds div esto tampoco lo tenemos
vamos a poner por aquí poco para que lo veamos en funcionamiento y esto es todo me lo necesitamos
esto también lo necesitamos
mira hace una hora vale veis lo que he hecho yo aquí es un bueno he copiado un poco las cosas que
teníamos pero era para que veáis lo que cómo funciona no entonces hacemos el relative time forma la instancia
el time stamp yo he calculado aquí de hace una hora por ejemplo pues esto sería hace dos horas
porque estoy restando el número de milisegundos que han pasado de hace dos horas segundos que han pasado
pues nada pillamos aquí la diferencia aquí pues hacemos el for para ver justamente cuál es realmente el que el que encaja con esto y ya tendríamos aquí valor y unidad sería seguramente dos y horas
puedo poner un console log si queréis para lo que veáis value unit
esto sería valor bueno menos dos cierto porque dos es dentro de dos horas cierto cierto cierto el valor tiene que ser en negativo porque es en el pasado y una vez que tienes por un lado el valor y otro la unidad
pues lo formatea y ya te lo pone en idioma que tú quieras y esto pues está genial porque ya puedes poner en japonés que
te lo debería poner bueno a ver qué he hecho aquí que no me lo ha puesto en japonés
me debería aquí donde he puesto tu tu tu tu tu relative time format a ver acá
ahora me lo ha puesto en catalán porque no me lo pone en japonés
jp no es japonés pensaba que era japonés jp ahora
mira en japo
y en chino también se hace falta
no en chino no es así pues era así
bueno pues no me acuerdo con el chino pensaba que era así
así es en chino
hombre ya está bien es una forma de tener un relative time format de forma nativa por la plataforma
ahora
está muy soportado hombre yo lo soporto
pero a ver
internet explorer 11 no tiene soporte
si no te importa internet explorer 11 que en mi caso
pues no tiene ningún problema de utilizarlo
más allá de eso está bastante bien soportado
safari 13.1 bueno eso sí que puede ser un problema porque safari 13.1 es de 2020
o sea es de hace relativamente hace poco
si safari realmente 2020 es un problema
a ver que tampoco es que tenga muchos usuarios cuántos usuarios son
de safari 3.1 a la 13.1 hay 1,32% de usuarios
pero bueno se puede poner un polifil
creo que es mejor tener un polifil
bueno esto soy yo que soy un amante de la plataforma
pero preferiría tener un polifil y mantener esto de forma nativa
que utilizar una librería para hacer esto
esto soy yo que soy así especialito
y además lo que es genial es que puedes cargar el polifil con un import dinámico
esto está genial y así solo lo cargas a los navegadores que lo utilizan
y los que no lo necesiten pues
pues no lo cargan y eso que te ahorras
mira que ilusión tengo aquí
mira mira que cara de ilusionado
madre mía esa mirada de ilusión
vale no sé por dónde
bueno os estaba explicando esto
lo del time ago
ya lo he enseñado
además hay genial esto
y ya lo tenemos funcionando
vale una vez que ya formatea
pues nada lo único que hacemos es devolverlo
¿qué hace todo esto?
¿no?
porque si ya tengo el time ago
¿para qué me sirve esto?
¿no?
esto
es que además de tener el time ago
por un tema de accesibilidad
y a veces bueno no sé
dicen que tema de SEO también ayuda
se le pasa el date time
si no me equivoco
el time date time
esto es un atributo
que representa la fecha
¿veis?
date time
para representar la fecha
porque tú en el time
claro tú lo pones en forma escrita
hace tres horas
hace no sé qué
y el date time digamos que es una forma
legible por una máquina
para entender que tú
la fecha que estás poniendo ahí
pues es esa
porque tú puedes decir
hace dos horas
pero a lo mejor
mira
¿ves?
esto tiene todo sentido
el día de San Valentín
vale
pero el día de San Valentín
a lo mejor la máquina no entiende
pues tú le pones date time
y le pones el día que es
y esto para crawlers
y cosas así
pues a veces tiene sentido
¿por qué?
porque cuando buscas
por ejemplo
el periódico
noticia
última hora
yo que sé
hay veces
que vais a encontrar
que pone
hace dos horas
¿no?
Ansu Fati
noticia
yo que sé
hace un día
hace siete horas
pues esto
a veces
lo hace gracias a eso
a veces
hay otras veces
que lo hace automáticamente
pero bueno
para que lo sepáis
pobre Ansu Fati
cago en la leche
a veces
¿por qué?
no