Agregando la fecha de publicación

Clase 24 de 46 • Curso Definitivo de JavaScript 2016

Raúl Segura Nabarret

student•

i18n = internationalization

MIND BLOWN jaja

Platzi Team

student•

😮 jajaja

Fredy Bustos

student•

momento se realmente muy util y practico..

Fredy Bustos

student•

moment se ve realmente muy util y practico*

Oliver Amezquita Morales

student•

var moment = require('moment');
require('moment/locale/es');
moment.locale('es');

Eugenio Contreras Sánchez

student•

Alguna diferencia si agrego la sentencia:

require('moment/locale/es');

en el index.js de picture-card? me parece un poco más ordenado y funciona de la misma manera.

Martín Varela

student•

Si, tienes razón, de acuerdo.

Victor Gamez

student•

Piensa que estas definiendo el idioma que va a coger la libreria “moment”. Si lo pones dentro del Index.js de picture-card, no te detectara esa configuración hasta que el cliente no carge esa parte del JS.
Es como si pusiéramos los requires del ./signup y ./signin en el index del homepage.

Reinaldo Mendoza

student•

Muy buen recurso momentjs

Ricardo Gonzales Gonzales Gonzales

student•

momentjs, titile, se puede usar con angular?

Martín Varela

student•

Si, son librerías puras de JS, las puedes utilizar con Angular, reactjs, etc.

David Camacho

student•

Buenas noches, tengo una duda.. Porque se debe hacer el require y llamar al metodo locale de moment en el archivo signup/index.js

Martín Varela

student•

Hola, el require solo lo debes hacer en el archivo que necesites utilizar alguna funcionalidad de la librería.

Rubén Rangel

student•

Voy viendo el curso en estos días, y si efectivamente estas confundiendo los archivos, el index que uso no es el de signup, es el index de src

Liz Villegas Villegas

student•

He visto que en diferentes index.js de su respectivas carpetas dentro de src se repiten los require, hay alguna forma de no hacerlo? es decir, si en homepage usamos la librería de moment, por que ponerla de nuevo en el index.js de picture-card? Así como el require hay varias cosas que se siguen repitiendo en varios js

Sergio Daniel Xalambrí

student•

Cuando trabajamos con módulos cada uno de estos debe definir sus requires/imports manualmente, esto es porque cada módulo se debe poder usar por su cuenta, entonces pensá que si solo cargas moment en un único archivo que pasa si un día no usas más ese archivo? todos tus módulos que dependían de que ese archivo volviese global moment ya no van a funcionar. Al tener los requires en cada módulo te aseguras que esto nunca pase.

Otra ventaja es de lectura, al leer un módulo si todos sus require/imports están definidos al principio con una lectura rápida ya podés saber que librerías o módulos se usan ahí.

Miguel Sosa

student•

En lugar de hacer…

new Date().setDate(new Date().getDate() -10)

es por lejos, más sencillo hacerlo así…

// new Date('MM/DD/YYYY')
// por ejemplo
new Date('12/24/2015');

Nestor Beltran

student•

excelente @mikesan , pero lo que pasa es que de la fomra en la que tu lo planteas, tendrías que todos los días ir y modificar la fecha que le pasas al new Dat(), de la forma en la que lo hizo el profesor no ya que con el getDate() consulta automáticamente la fecha del día actual de esta forma seguirá calculando en base al día en curso, saludos 😃

Miguel Sosa

student•

Tienes razón @NestorBeltran en su momento no lo pensé, pero ahora que lo dices es lo más lógico, hacerlo dinámico para ir siempre 10 días hacia atrás jeje

Carles

student•

Me encanta el curso, es cierto que el título no es el idoneo para decir que es el curso definitivo de javascript. Yo diria más bien “EL CURSO DEFINITIVO DE LAS LIBRERIAS JAVASCRIPT”, a mi me parece muy interesante, desconocia “yo”, curioso, si, es un estilo react al hacer la misma función sin ser componentes react. Pero como digo, estaría bien que si hicieran realmente EL CURSO DEFINITVO DE JAVASCRIPT, pero sin usar librerias.

Alejandro Sanabria

student•

@farpierres la librerías en Javascript son parte fundamental del día a día de lo que hacemos como front ends, sin ellas tendríamos el doble de trabajo y poco productivos seríamos, lo que tu quisieras sería más bien fundamentos de Javascript

Carles

student•

Estoy deacuerdo con tu comentario, las librerías nos agilizan mucho el trabajo. Lo que quizás me venia a referir que busco algo más técnico, profundizar en conceptos tan básicos como el scoope, los clousures, POO, patrones de diseño.
Pero como decía en mi anterior mensaje, me encanta éste curso, estoy aprendiendo mucho la verdad, por ejemplo conocía moments.js pero no format.js, me gusta como explicas, gracias. Me encantaría más chicha Javascript : )

David Zonana

student•

En que parte le decimos a moment.js que sea una fecha relativa?

Sergio Daniel Xalambrí

student•

Una vez tenés el objeto que te devuelve moment usas el método fromNow

http://momentjs.com/docs/#/displaying/fromnow/

Yonathan Gutierrez

student•

buenas tardes, por alguna razón, no me aparece la cuenta regresiva de los días pero en las dos tarjetas si aparece el "a few seconds ago" sin embargo en la segunda puse la linea completa para que se cumpliera lo instruido... faltaría algo?

Miguel Rivas

student•

createdAt: new  te(new  te() - 10)

Miguel Rivas

student•

perdon(@ /@y0sh_claus">y0sh_claus)
, di un espacio en la linea anterior, te paso mi linea de cod., a mi me funciona:

createdAt: new  te(new  te() - 10)

Rubén Rangel

student•

var moment = require('moment');

require('moment/locale/es');

He comprobado que para la internacionalización solo es necesario las dos lineas de arriba en el index.js de /src

Andrez Jhair Segovia Cruz

student•

Si, tan solo con esas dos lineas puede hacer el cambio de idioma.

Pero, cuando tenes mas de dos idiomas cargados con el require.
require('moment/locale/fr'); require('moment/locale/es');

Necesitaras llamar la función locale de moment para cambiar entre esos dos idiomas.
moment.locale('fr');

José Manuel Cornelio

student•

¿Como se puede borrar la caché de la aplicación? No importa los cambios que haga al JSON con las “pictures” estos no se muestran. Aunque reinicie el servidor. Nada funciona

Yeison Daza

student•

Puedes abrir las dev tools y en la pestaña de network selecciona la opción llamada disable cache, es la mejor opción para matar el cache

José Manuel Cornelio

student•

Tengo seleccionada la opción “Disable Cache”. Pero lo que me interesa es poder borrar la cache la aplicación. Ya encontre como con el comando

npm cache clean

Pero aun asi no me siguen cargando los cambios por más que borre la cache, reinicie la máquina, haga gulp y reinicie el servidor todo sigue igual. Ya no se que hacer realmente

Juanca

student•

Q esta mal aca? no logro que me aparezca el span

function render(picture) {
return yo<div class="card ${picture.liked ? 'liked' : ''}"> <div class="card-image"> <img class="activator" src="${picture.url}"> </div> <div class="card-content"> <a href="/user/${picture.user.username}" class="card-title"> <img src="${picture.user.avatar}" class="avatar" /> <span class="username">${picture.user.username}</span> </a> <small class="right time">${moment(picture.createdAt).fromNow}</small> <p> <a class="left" href="#" onclick=${like.bind(null, true)}><i class="fa fa-heart-o" aria-hidden="true"></i></a> <a class="left" href="#" onclick=${like.bind(null, false)}><i class="fa fa-heart" aria-hidden="true"></i></a> <span class="left likes">${picture.likes} me gusta</span> </p> </div> </div>;
}

Alejandro Sanabria

student•

El atributo class antes de react 16 se debe llamar className. Todas tus clases deberían ser por ejemplo className=“username”

Balam Omaña

student•

.card.liked {
	.fa-heart {
	display: block;
	}	
	.fa-heart-o {
	display: none;
}
}

Como es que eso interactua con el index.js que al hacerle like o dislike aparezca o desaparezca el corazón rojo?

Jair Alexander Escobar Ramirez

student•

A mi costó entenderlo.
Lo que pasa en ./picture-card/index.js es que al principio tienes esto:

<yo`<div class="card ${picture.liked ? 'liked': ''}" >>

Lo que está encerrado entre llaves y precedido por $, es un condicional if pero en un solo renglón. Entonces, si la condición es verdadera, es decir, picture.like es true, o sea, es un me gusta, entonces la línea se lee así:

<yo`<div class="card liked" >>

Ahora, eso entiendo sin cursar nada de html ni de css , es que .card ahora tiene o es la clase liked.
Si pasamos a index.scss, verás que .en card.liked, si existe, o sea, si el condicional que te mostré arriba es verdadero, entonces el bloque de estilo se ejecuta para modificar los corazones de PlatziGram para que así, pase de estar sin color, a tener un intenso, pero muy sensual color rojo.

JESUS DARIO MARENCO PORTO

student•

una pregunta suelta, si uso la ip de mi compu en el navegador de mi cel junto con el puerto 3000, no deberia ver la aplicacion en este punto? porque no me saleeee? uso ubuntu

David Toca

student•

Solo funciona si estan en la misma red WiFi, y usando la ip local que le da el router

David Toca

student•

Para ese tipo de pruebas puedes usar

Agregando la fecha de publicación

Bienvenidos

¿Qué necesito para tomar el curso?

Materiales

Descarga el código del proyecto

Conceptos Básicos

Bienvenidos al curso de definitivo de JavaScript

¿Por qué JavaScript?

Construyendo nuestro proyecto

Construyendo la primer página de Platzigram

Introducción a Node.js y Npm

Inicializando nuestro proyecto con Npm

¿Qué son los gestores de paquetes?

Package bundling con gulp y sass

Agregando vistas con Pug

Sirviendo archivos estáticos con Express

Organizando nuestros assets y agregando un favicon

Fix para agregar JavaScript en el cliente

Agregando JavaScript en el cliente

Agregando navegación con Page.js

Automatizando el build

Agregando interfaces de usuario con Yo-yo

Modularizando nuestro proyecto

Agregando la página de /signin

Cambiando el título de la página

Agregando un timeline para los usuarios

Agregando las imágenes de los usuarios al timeline

Agregando la funcionalidad de like

Agregando la fecha de publicación

Utilizando FormatJS para internacionalizar las fechas

Utilizando FormatJS para internacionalizar los textos

Cambiando el idioma y almacenándolo en localStorage

Obteniendo una respuesta del servidor con Superagent

Obteniendo una respuesta del servidor con Axios

Obteniendo una respuesta del servidor con Fetch API

Obteniendo una respuesta del servidor con async/await

Agregando un botón para subir una nueva foto

Subiendo la foto a nuestro servidor web

Conclusiones

Cierre del curso

Es hora de construir el backend de Platzigram

Desafio 1: Hacer la página de un usuario

Desafio 2: Agregar un spinner mientras carga las imágenes del timeline

Desafio 3: Agregar un modal para mostrar una imagen en el perfil del usuario

Sesiones en Vivo

Stream 1: Resolviendo el primer desafío

Stream 2: Resolviendo el segundo desafío

Stream 3: Resolviendo el tercer reto

Stream 4: Resolviendo el cuarto reto

Stream Extra: Acceder a la webcam usando JavaScript

Complementos del curso

Unit testing en JavaScript con Mocha

Entendiendo los tiempos de ejecución en JavaScript

Usando babel en el lado del servidor (en Node.js)