Agregando la funcionalidad de like

Clase 23 de 46 • Curso Definitivo de JavaScript 2016

Contenido del curso

Bienvenidos

1
¿Qué necesito para tomar el curso?
00:10 min

Materiales

2
Descarga el código del proyecto
00:10 min

Conceptos Básicos

Construyendo nuestro proyecto

Conclusiones

Sesiones en Vivo

Complementos del curso

Tomar examen

Comentarios

David Camacho

student•

Me exploto el cerebro en 16min. <3

Sebastian Mar

student•

jajajjajaja

Daniel Hernández

student•

no entiendo porque

${like(true)}

se vuelve un ciclo infinito y por quecon .bind() no
?

Sacha Lifszyc

teacher•

es algo muy interesante eso, si lo dejamos así:

${like(true)}

va a llamar a la función cuando llegue a esa línea, y dentro de la función like, estamos llamando a render, pero render va a volver a evaluar la línea

${like(true)}

y así esta llamará a render de nuevo, así infinitamente

para que esto no ocurra tenemos que hacer que lo que esté entre ${} no sea el llamado a la función sino más bien una referencia a la misma, eso lo conseguimos con la función bind, que cambia quién será el objeto "this" dentro de la función y nos devuelve esa función con el this modificado

se entiende? saludos!

Ricardo Gonzales Gonzales Gonzales

student•

En mi caso el # del href hace que la funcion dentro de onclick no se ejecute.

Ricardo Gonzales Gonzales Gonzales

student•

ya lo descubrí. habia puesto comillas de más

Carlos Govea

student•

Por que cuando ejecutamos like sin argumentos " ${like} " no tenemos el problema de la recursividad pero cuando le mandamos argumentos si? Como lo entiendo en ambas se esta invocando a la función.

nicolas fernandez

student•

Porque con “${like}” solo le estas pasando la referencia de la funcion (osea sin los parentesis)que es el callback que se va a ejecutar en respuesta al “onclick”, ahora bien, si le pasamos el parámetro ya sea true o false, en realidad estas ‘ejecutando la función’ en ese instante, y eso no es lo que queremos, para evitar esto necesitas tener una forma de tener una función con el true o false que este “disponible” para ser llamada cuando el evento click suceda, y eso se hace con bind (bind retorna una función)

Camila Di Virgilio

student•

me hace un poco de gracia, como todos estaban llorando por usar YoYo, que no tenía ningún sentido haberla instalado, y aquí es donde se le da un gran uso. Eso deja mucho de que hablar de la calidad de algunos estudiantes… Estudiar es tener un poco de paciencia también, todos queremos ya en dos días ser unos expertos, pero a veces hay un camino de espinas que recorrer. Este curso la verdad es que no esperaba que fuera tan genial…

Julian Lopez

student•

como puedo usar Jquery en mi codigo javascript?

José de Jesús Uscanga Molina

student•

ya sea por medio de un CDN dentro de tu index.pug o desde npm install --save jquery , usando require con browserify

Alejandro Roa

student•

Cuando desarrollamos una api en la vida real, es recomendable usar tanta lógica del lado del front? o podemos usar esas funciones (como el de like) en el back y lanzarle todos los datos al front?

José de Jesús Uscanga Molina

student•

en el frontend solo es comportamiendo el contador del liked deberia ser enviado al backend y tener un contador. puedes hacer pruebas simulando un backend con json-server

Juan David Gomez Gómez Caicedo

student•

En los el archivo de estilo creo que hace falta esto:

.card {

  .fa-heart-o {

   color: $secondary-color;

  .fa-heart {

   display: none;

.card.liked {

  .fa-heart {

   display: block;

   color: red;

  .fa-heart-o {

   display: none;

Jonathan Andres Diaz Moreno

student•

lo bueno de sas es que puedo declarar stylos dentro de otros super !

Sergui Morejón

student•

No entiendo porque en la función de like, se escribe el “return false”.

  function like(liked) {
    pic.liked = liked;
    pic.likes += liked ? 1 : -1;
    var newEl = render(pic);
    yo.update(el, newEl);
    return false;
  }

David Toca

student•

Es para evitar que el comportamiento por defecto del elemento, por ahora no te preocupes por eso

Evert Escalante

student•

Hola a todos comunidad, Resulta que para este tiempo las dos etiquetas que encuentras en font awsome para los corazones son diferente

<i class="far fa-heart"> // corazon vacio
<i class="fas fa-heart">// corazon lleno

entonces cuando quiero usar los selectores que me deja materialize en mi archivo index.scss no se como usar la clase del corazon lleno. para que me tome los estilos que definimos en nuestro selector.

.card .fas fa-heart{
	color: #f44336;
	display: none;
}
.card.like{
	.fas fa-heart{
		display: block;
	}
	.fa-heart {
		display: none;
	}
}

entonces no se como usar la clase del corazon lleno en css porque si uso fa-heart estaria pisando los estilos del corazon vacio… Ayudaaaa @GOLLUM23

Sergui Morejón

student•

Ponlo casi igual al código de Sacha

.far.fa-heart{
	color: #f44336;
}

.fas.fa-heart {
	color: #F44336;
	display:none;
}

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

Brian Bentancourt

student•

otra manera de resolver lo de mostrar like o dislike

<p>
                    <small class="right time"> Hace 1 dia </small>
                    ${
                        pic.liked ? 
                            yo`<a class="left" onclick=${dislike}>
                            <i class="fa fa-heart" aria-hidden="true"></i>
                            </a>`
                        :
                            yo`<a class="left" onclick=${like}>
                            <i class="fa fa-heart-o" aria-hidden="true"></i>
                            </a>`
                    }
                    
                    
                    <span class="left likes">${pic.likes} me gusta</span>
                </p>

Cesar Octavio de Jesus Meza Carrillo

student•

En el momento que daba click al boton like, me mandaba a # y no me cambia el numero de likes, algun comentario ?

esto me lo tope a medio ejercicio

var yo = require('yo-yo');

module.exports = function pictureCard(pic) {
  var el;

  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">Hace 1 día</small>
        <p>
          <a class="left" href="#" onclick=${like}><i class="fa fa-heart-o" aria-hidden="true"></i></a>
          <a class="left" href="#" onclick=${dislike}><i class="fa fa-heart" aria-hidden="true"></i></a>
          <span class="left likes">${picture.likes} me gusta</span>
        </p>
      </div>
    </div>`
  }

    function like(){
      pic.liked = true;
      pic.likes++;
      var newEl = render(pic);
      yo.update(el, newEl);
      return false;
    }

     function dislike(){
      pic.liked = false;
      pic.likes--;
      var newEl = render(pic);
      yo.update(el, newEl);
      return false;
    }

    el = render(pic);
    return el;
}```

Nicolas Alejandro Herrera

student•

por que cuando presiono ctrl + z para para el server, luego cuando ingreso en la CLI nmp start, me da error??? (al cual lo soluciono cambiando el puerto en server,js)

Usuario anónimo

user•

no entiendo hay pic tambien picture y pictures, todos son el mismo
???
y si es el mismo por q le cambian el nombre
???

Marcelo Fontana

student•

pic y picture si son lo mismo: se cambia el nombre para no confundirse y pictures es el array de objetos

Leonardo

student•

no entiendo de donde sale pic, ni eso de que a veces es pic y a veces picture

Jonathan Andres Diaz Moreno

student•

hola leonardo pic sale del homepage/index.js hay tenemos el array con nuestros datos ( hay el es pictures) pero cuando llamamos la funcion en picture-card se convierte en un parametro ( array ) para poderlo utilizar dentro de la funcion del module.exports pero tu le puedes llamar pic o pictures en los dos lados sin problema

Eduar Jesus Tua Lopez Tua

student•

Como se ve afectado el SEO si nuestro sito es excesivamente rico en JS? Las prácticas usadas en este curso son SEO friendly o no?

Ricardo Azpeitia P.

student•

Desde hace ya casi un año google renderiza las paginas con javascript así que esto ya no es una limitante.

Fuente:

Francisco

student•

Una pregunta esas librerias como yo-yo ¿ cómo se comportan con ruby on rails? ¿Alguien la ha probado?

Ricardo Azpeitia P.

student•

Rails es para backend, yo-yo es para frontend a menos así que la integración debería de ser transparente.

Jonathan Andres Diaz Moreno

student•

si estoy de acuerdo son dos cosas diferentes , por que hasta el momento no estamos utilizando nodejs como backend en si

Usuario anónimo

user•

Quisiera saber en esta situacion como hariamos para

acutalizar yo-yo, la situacion seria que quisiera agregar un nuevo post, como tendria que hacerlo añadiendo un nuevo objeto al array pictures o agregando un elemento html al contenedor de estos post (a los que sacha le puso pictures)

Álvaro René Sánchez Serrano

student•

Qué se tendria que hacer para no cambiar el "this" cuando usamos el bind?. osea para conservar su "this" original.

Ricardo Azpeitia P.

student•

var self = this; something( function () { // callback stuff } );

Luis Ricardo Orozco Ebratt

student•

Hola, todo claro excepto por el método bind(). El bucle no debería presentarse ya que solo se llama a la función “like” con el evento click, es decir si no hemos dado click al corazón no se invoca a la función. Agradecería un poco más de detalles. Muchas gracias.

Marcelo Fontana

student•

Si en el onclick pasas un callback como like sin los parentesis, lo que estas haciendo es pasar una referencia a la funcion, sin embargo si lo pasas con los argumentos like(true) en vez de pasar una referencia a la funcion estas diciendo que se ejecute esa funcion cuando pasamos por esa linea.

<p>
                    <small class="right time"> Hace 1 dia </small>
                    ${
                        pic.liked ? 
                            yo`<a class="left" onclick=${dislike}>
                            <i class="fa fa-heart" aria-hidden="true"></i>
                            </a>`
                        :
                            yo`<a class="left" onclick=${like}>
                            <i class="fa fa-heart-o" aria-hidden="true"></i>
                            </a>`
                    }
                    
                    
                    <span class="left likes">${pic.likes} me gusta</span>
                </p>

var yo = require('yo-yo');

module.exports = function pictureCard(pic) {
  var el;

  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">Hace 1 día</small>
        <p>
          <a class="left" href="#" onclick=${like}><i class="fa fa-heart-o" aria-hidden="true"></i></a>
          <a class="left" href="#" onclick=${dislike}><i class="fa fa-heart" aria-hidden="true"></i></a>
          <span class="left likes">${picture.likes} me gusta</span>
        </p>
      </div>
    </div>`
  }

    function like(){
      pic.liked = true;
      pic.likes++;
      var newEl = render(pic);
      yo.update(el, newEl);
      return false;
    }

     function dislike(){
      pic.liked = false;
      pic.likes--;
      var newEl = render(pic);
      yo.update(el, newEl);
      return false;
    }

    el = render(pic);
    return el;
}```

Agregando la funcionalidad de like

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