Agregando interfaces de usuario con Yo-yo

Clase 17 de 46 • Curso Definitivo de JavaScript 2016

Juan Gabriel España Baquero Gabriel España

student•

me parece más facil limpiar el contenido de main-container con main.innerHTML=''; en vez de instalar otra libreria.
¿hay algun problema de cara al proceso?

Luigi Pizarro Caceda

student•

Buena pregunta, el resultado es el mismo pero obviamente no tenemos que cargar una librería extra, a esperar a que el profe nos responda.

David Camacho

student•

Si hacemos un main.innerHTML = yo...; nos va a dar como resultado: [object HTMLDivElement] y agregarlo en plano creo que es otro tema por las "comillas dobles" y 'comillas simples' de todas maneras, como dijo Freddie, la respuesta siempre va a ser: Intentalo

Eder Negrete

student•

Yo limpio el contenedor con jQuery (Ya estamos usando jQuery por materialize). Sólo pongo el contenido pasándole la función: html()

var $main = $('#main-container');  
var el = yo `<h1> Hola mundo </h1>`  
$main.html(el);

Diego Gonzalez

student•

Actualmente en un proyecto que estoy trabajando, utilizando jquery manejando el contenido, limpio el contenedor, agrego y manejo sin recargar la pagina.

una pagina sola, jquery maneja el contenido y la comunicacion con nodejs mediante ajax.
node js me gestiona las consultas a la bd en mi caso Mysql.

Sería la misma idea que hace yo yo, sin utilizar tanta libreria, capáz no queda tan prolijo, pero es la misma idea no?

José de Jesús Uscanga Molina

student•

de donde es que sacan todas estas librerias, yo he usado algunas , pero como las encuentran ?... quisiera saber ...

Oliver Amezquita Morales

student•

como se ponen las comillas invertidas

Javier Saura

student•

La comilla invertida es el acento abierto

Juan Gabriel España Baquero Gabriel España

student•

altgr + } + barra espaciadora

Carlos Viteri

student•

Tengo un error, el signup no es clickeable, no sé por qué, hasta cuando hago hover si aparece la dirección, pero no me deja dar click, cuando hago click en la consola sale, ya vi lo de los inputs y está bien

Uncaught Error: multiple root elements must be wrapped in an enclosing tag

Juan Castro

teacher•

Hola a mi me paso lo mismo, que Sacha tan malo que no lo explico :D

Dentro de yo-yo necesitas que todo el html que escribas este dentro de una etiqueta HTML, no puedes abrir un div, cerrarlo, y despues abrir otro, tendrias que tener un div contenedor que contenga todo los divs que vas a abrir y cerrar.

Luis Jhohan Venegas Tobar

student•

hi! juandc, puedes colocar un ejemplo no entendi muy bien lo que dices y tengo el mismo error

Roberto Prince

student•

yo-yo me manda un error por que dice que

!--

no es un tag, lo que es eso es un comentario de html

<!-- comentario de html -->

y tuve que remover todos mis comentarios y ya funciono

Álvaro René Sánchez Serrano

student•

por que no se pasa el contenido del elemento en formato pug a yo-yo?

Sacha Lifszyc

teacher•

Álvaro, te respondí más detallado en el comentario de arriba.

Saludos!

Álvaro René Sánchez Serrano

student•

Muchas Gracias 😃

Jonatan Camilo Bonilla Malaver

student•

Si las ventajas de Template Strings están en Ecma Script 5, y estamos usando todas funcionalidades del lenguaje con Babel, por qué usamos yo-yo para usar los Template Strings??

Jonatan Camilo Bonilla Malaver

student•

Vea pues, interesante. En la práctica es mejor usar yoyo entonces siempre, o eso depende de lo que quiera y esté haciendo??

Muchas gracias por la respuesta @sergiodxa

Rafael Villarreal

student•

Buenas. Tengo un inconveniente y es que cuando inicio el servidor y busco la ruta en el navegador me sigue mostrando el footer, es decir: Al parecer cuando el el server la ruta signup lee el archivo index, esta letyendo el index.pug no el index.js hice todo lo que hizo sacha pero no me muestra nada en en el navegador solo el footer y sin css que es otro inconveniente. Además la consola del browser no me muestra nigun error.
Que me recomiendan? gracias de antemano…

Ricardo Azpeitia P.

student•

Si al profesor le funciono y a ti no, y no aparece ningún error.
Muy probablemente se te olvido cambiar algo, vuelve a revisar.

Roberto Prince

student•

Una duda genuina. Que ventaja tiene empty-element en lugar de algo como

main.innerHTML = ""

o mejor aun

function empty(el){

  el.innerHTML = ""

  return el

después de todo creo que como programadores debemos de ser moderados con las dependencias por que no sabes lo que tiene dentro

Yeison Daza

student•

Es una buena opción la que planteas, son formas diferentes de hacerlo.

En este caso la librería tiene algunas opciones más en caso de requerir un uso avanzado.

Sergio Daniel Xalambrí

student•

En realidad es lo mismo, de hecho lo que vos hiciste es un poco más simple de lo que hace la librería y bien podés hacer eso.

Otra cosa es que lo de ser moderado con las dependencias porque no sabes lo que tiene adentro, en realidad leer el código fuente de una dependencia es decisión del desarrollador y depende de que tanto le interese saber como funciona es dependencia, en el caso de empty-element si revisas el código fuente es super simple.

/* global HTMLElement */

'use strict'

module.exports = function emptyElement (element) {
  if (!(element instanceof HTMLElement)) {
    throw new TypeError('Expected an element')
  }

  var node
  while ((node = element.lastChild)) element.removeChild(node)
  return element
}

Juan Martin Cataldo

student•

Hola Sacha, excelente el curso hasta el momento.

Tengo 2 dudas:

Coincido con Alvarito, porque no usar las vistas que generaste con pug ? y lo otro, porque descargar una libreria para algo tan simple como vaciar el dom? Saludos y gracias!

Juan Martin Cataldo

student•

Ah ok, entiendo lo de empty. Ok lo de pug, pero hoy en dia (sacando react) que librería se usa para renderear las vistas?

Juan Martin Cataldo

student•

Me mal expresé: libreria de templates en el cliente. Asumo que para renderear las vistas sugeris yo-yo.

Cristhian Hernandez

student•

No me llama el código html con yo-yo ![](

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var babel = require('babelify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

gulp.task('styles', function(){
  gulp
    .src('index.scss')
    .pipe(sass())
    .pipe(rename('app.css'))
    .pipe(gulp.dest('public'));
})

gulp.task('assets', function(){
  gulp
    .src('assets/*')
    .pipe(gulp.dest('public'));
})

gulp.task('script', function(){
  browserify('./src/index.js')
    .transform(babel)
    .bundle()
    .pipe(source('index.js'))
    .pipe(rename('app.js'))
    .pipe(gulp.dest('public'));
})

gulp.task('default', ['styles', 'script', 'assets'], () => {
  gulp.watch('./assets/*', ['styles'])
  gulp.watch('./src/*', ['script'])
})```

index.js

$('.dropdown-trigger').dropdown();

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

var main = document.getElementById('main-container');

page('/', function(ctx, next) { main.innerHTML = '<a href="/signup" >Signup</a>'; })

page('/signup', function(ctx, next) { var element = yo`<div class="container">

      <div class="row">
          <div class="signup-box">
              <h1 class="tottusgram">Tottusgram</h1>
              <form class="signup-form">
                <h2>Regístrate y comparte tus momentos especiales con Tottus</h2>
                <div class="section">
                  <a href="" class="btn btn-fb hide-on-small-only">Iniciar sesión con Facebook</a>
                  <a href="" class="btn btn-fb hide-on-med-and-up">Iniciar sesión</a>
                </div>
                <div class="divider"></div>
                <div class="section">
                  <input type="email" name="email" placeholder="Correo Electrónico">
                  <input type="text" name="name" placeholder="Nombre Completo">
                  <input type="text" name="username" placeholder="Nombre de Usuario">
                  <input type="password" name="password" placeholder="Contraseña">
                  <button class="btn waves-effect waves-ligth btn-signup" type="submit">Regístrate</button>
                </div>
              </form>
          </div>
      </div>
      
      <div class="row">
        <div class="login-box">
          ¿Tienes una cuenta? <a href="/signin">Entrar</a>
        </div>
      </div>

    </div>
  </div>
</div>

</div> </div>`

})

page.start();

Jorge Resendiz

student•

Hola Cristhian, me esta pasando lo mismo que a ti, pudiste solucionar la situación, pues no obtengo ningún error, solamente no se muestra el html.

Evert Escalante

student•

Hola a todos comunidad Platzi, me sucede que no me se ejecuta el ultimo paso de esta clase que es ejecutar el empty para que nos borre lo que contenia el main y cargar la vista.
Las vistas cargan bien.

empty(main).appendChild(el);

este es el codigo del entero

var page = require('page');
var yo = require('yo-yo');
var empty = require ('empty-element');


var main = document.getElementById('main-container');

page('/', (ctx, next) => {
	main.innerHTML = '<a href="/signup">signup</a>'
})

page('/signup', (ctx, next) => {
	var el = yo`<div class="container">
			<div class="row">
				<div class="col s10 push-s1">
					<div class="row">
						<div class="col m5 hide-on-small-only">
							<img class="iphone" src="iphone.png" />
						</div>
						<div class="col s12 m7">
							<div class="row">
								<div class="signup-box">
								  <h1 class="platzigram">Platzigram</h1>
							    <form class="signup-form">
								    <h2>Registrate para ver fotos de tus amigos</h2>
								    <div class="section">
									    <a class="btn btn-fb hide-on-small-only"> Iniciar Sesion Con facebook</a>
									    <a class="btn btn-fb hide-on-med-and-up"> Iniciar Sesion</a>	
								    </div>
								    <div class="divider"></div>
								    <div class="section">
									   <input type="email" name="email" placeholder="Correo electronico" />
									   <input type="text" name="name" placeholder="Nombre completo" />
									   <input type="text" name="username" placeholder="Nombre de usuario" />
									   <input type="password" name="password" placeholder="Contraseña" />
									   <button class="btn waves-effect waves-light btn-signup" type="submit">Resgistrarse</button>
								   </div>
							   </form>
						   </div>
					   </div>
					 <div class="row">
						<div class="login-box">
							¿Tienes una cuenta? <a href="/signin">Entrar</a>
						</div>
					</div>
			  </div>
		  </div>
		</div>
	</div>		
</div>`;

empty(main).appendChild(el);
})

page();

Diego Forero

Team Platzi•

Lo único que veo que pueda estar fallando es que estas usando arrow function, prueba a hacerlo como lo hace sacha que es con una función anónima normal, es probable que el contexto que tiene las arrow function de problema con em empty.

Evert Escalante

student•

Hola gracias por el consejo ,pero no ah funcionado, No se realiza la peticion de empty, pero si recargo la pagina si desaparece

Jonatan Camilo Bonilla Malaver

student•

Para limpiar el contenedor yo aproveché el hecho de que estamos usando jQuery por materialize-css, y usé la siguiente línea:

$('#main-container').empty();

Hacer esto y no usar la librería que indica el profe afecta el algo el proceso o no hay problema??

Rafael Villarreal

student•

llevo como 2 horas mirando una misma linea de código:
el = document.createElement(tag)
por que la consola del navegador dice:
InvalidCharacterError: String contains an invalid character app.js:1302:0.
ya revisé todo e hice lo mismo que Sacha pero por algun arazón no me muestra el signup y me sale ese error.
ayuda porfavor.

Sergio Daniel Xalambrí

student•

Estás seguro que es en esa línea el error? Cual es el valor de tag?

David Ramirez

student•

Buenas! Tengo el mismo problema! Encontraste alguna solucion?

Comparti cual fue tu solucion! 😃

Yo tambien estoy estancado en ese error!

Jesús Heber Grajeda Barranco

student•

Entre al código fuente de emptyElement porque no estuve convencido de su uso, a lo cual encontré que simplemente lo que hace es un module.exports de la siguiente función (en realidad borre el manejo de error ya que se me hace inservible en este caso). Si no les parece agregar un modulo más pueden copiar esta función en su index.js y funciona igual 😃

function emptyElement(element) {
  while (element.lastChild) { //Mientras existan hijos del elemento
    element.removeChild(element.lastChild) //Remover el ultimo nodo hijo 
  }
  return element //Regresa el elemento vacio
}

Ignacio Esteban Aredez Diaz

student•

Al poner el contenido deja de poner la foto al a izquierda, esto que peude ser?

en vez de la izqueirda la pone arriba dle texto como si fuese solo una columna centrada

Ignacio Esteban Aredez Diaz

student•

Listo el fallo era que no habia eliminado la etiqueta de cierre en la imagen

Froilan Asimov

student•

tengo este error , que podra ser ...

Pseudo-clase o pseudo-elemento desconocido '-webkit-inner-spin-button'. Grupo de reglas ignorado por un mal selector. app.css:1989:22

Pseudo-clase o pseudo-elemento desconocido '-webkit-search-cancel-button'. Grupo de reglas ignorado por un mal selector. app.css:2008:22

Error al leer el valor de 'box-shadow'. Declaración ignorada. app.css:2109:15

Propiedad desconocida 'user-select'. Declaración ignorada. app.css:2583:13

Propiedad desconocida 'user-select'. Declaración ignorada. app.css:3756:13

Pseudo-clase o pseudo-elemento desconocido '-webkit-input-placeholder'. Grupo de reglas ignorado por un mal selector. app.css:4040:2

Pseudo-clase o pseudo-elemento desconocido '-ms-input-placeholder'. Grupo de reglas ignorado por un mal selector. app.css:4051:1

Propiedad desconocida 'overflow-wrap'. Declaración ignorada. app.css:4394:15

Propiedad desconocida 'user-select'. Declaración ignorada. app.css:4419:13

Se esperaba 'none', URL, o función de filtro pero se encontró 'alpha('. Error al leer el valor de 'filter'. Declaración ignorada. app.css:4856:12

Pseudo-clase o pseudo-elemento desconocido '-webkit-slider-runnable-track'. Grupo de reglas ignorado por un mal selector. app.css:4907:19

Pseudo-clase o pseudo-elemento desconocido '-webkit-slider-thumb'. Grupo de reglas ignorado por un mal selector. app.css:4912:19

Pseudo-clase o pseudo-elemento desconocido '-webkit-slider-runnable-track'. Grupo de reglas ignorado por un mal selector. app.css:4923:25

Pseudo-clase o pseudo-elemento desconocido '-ms-track'. Grupo de reglas ignorado por un mal selector. app.css:4951:19

Pseudo-clase o pseudo-elemento desconocido '-ms-fill-lower'. Grupo de reglas ignorado por un mal selector. app.css:4959:19

Pseudo-clase o pseudo-elemento desconocido '-ms-fill-upper'. Grupo de reglas ignorado por un mal selector. app.css:4962:19

Pseudo-clase o pseudo-elemento desconocido '-ms-thumb'. Grupo de reglas ignorado por un mal selector. app.css:4965:19

Pseudo-clase o pseudo-elemento desconocido '-ms-fill-lower'. Grupo de reglas ignorado por un mal selector. app.css:4972:25

Pseudo-clase o pseudo-elemento desconocido '-ms-fill-upper'. Grupo de reglas ignorado por un mal selector. app.css:4975:25

Error al leer el valor de 'letter-spacing'. Declaración ignorada. app.css:4994:18

Propiedad desconocida 'user-select'. Declaración ignorada. app.css:5582:13

Se esperaba 'none', URL, o función de filtro pero se encontró 'alpha('. Error al leer el valor de 'filter'. Declaración ignorada. app.css:5641:10

Propiedad desconocida '-moz-opacity'. Declaración ignorada. app.css:5642:14

Propiedad desconocida '-moz-border-radius'. Declaración ignorada. app.css:5686:22

Propiedad desconocida '-moz-box-shadow'. Declaración ignorada. app.css:5689:19

Propiedad desconocida 'zoom'. Declaración ignorada. app.css:5699:6

Se esperaba 'none', URL, o función de filtro pero se encontró 'alpha('. Error al leer el valor de 'filter'. Declaración ignorada. app.css:5708:10

Propiedad desconocida '-moz-opacity'. Declaración ignorada. app.css:5709:14

Se esperaba el fin de un selector una pseudo-class de acción del usuario después de pseudo-element pero se encontró ':'. Grupo de reglas ignorado por un mal selector. app.css:5808:29

Error al leer el valor de 'letter-spacing'. Declaración ignorada. app.css:5855:18

Error al leer el valor de 'letter-spacing'. Declaración ignorada. app.css:6003:18

Error al leer el valor de 'letter-spacing'. Declaración ignorada. app.css:6033:18

Pseudo-clase o pseudo-elemento desconocido '-webkit-inner-spin-button'. Grupo de reglas ignorado por un mal selector. materialize.min.css:6:29729

Pseudo-clase o pseudo-elemento desconocido '-webkit-search-cancel-button'. Grupo de reglas ignorado por un mal selector. materialize.min.css:6:29910

Error al leer el valor de 'display'. Declaración ignorada. materialize.min.css:6:30460

Error al leer el valor de 'display'. Declaración ignorada. materialize.min.css:6:30481

Error al leer el valor de 'box-shadow'. Declaración ignorada. materialize.min.css:6:31416

Propiedad desconocida 'user-select'. Declaración ignorada. materialize.min.css:6:40347

Error al leer el valor de 'display'. Declaración ignorada. materialize.min.css:6:57114

Error al leer el valor de 'display'. Declaración ignorada. materialize.min.css:6:57135

Error al leer el valor de 'display'. Declaración ignorada. materialize.min.css:6:57662

Error al leer el valor de 'display'. Declaración ignorada. materialize.min.css:6:57683

Propiedad desconocida 'user-select'. Declaración ignorada. materialize.min.css:13:166

Error al leer el valor de 'cursor'. Declaración ignorada. materialize.min.css:13:5018

Error al leer el valor de 'cursor'. Declaración ignorada. materialize.min.css:13:5222

Pseudo-clase o pseudo-elemento desconocido '-webkit-input-placeholder'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:5698

Pseudo-clase o pseudo-elemento desconocido '-ms-input-placeholder'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:5804

Propiedad desconocida 'overflow-wrap'. Declaración ignorada. materialize.min.css:13:16248

Propiedad desconocida 'user-select'. Declaración ignorada. materialize.min.css:13:16652

Se esperaba 'none', URL, o función de filtro pero se encontró 'alpha('. Error al leer el valor de 'filter'. Declaración ignorada. materialize.min.css:13:25725

Pseudo-clase o pseudo-elemento desconocido '-webkit-slider-runnable-track'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:26625

Pseudo-clase o pseudo-elemento desconocido '-webkit-slider-thumb'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:26716

Pseudo-clase o pseudo-elemento desconocido '-webkit-slider-runnable-track'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:26955

Pseudo-clase o pseudo-elemento desconocido '-ms-track'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:27394

Pseudo-clase o pseudo-elemento desconocido '-ms-fill-lower'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:27519

Pseudo-clase o pseudo-elemento desconocido '-ms-fill-upper'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:27569

Pseudo-clase o pseudo-elemento desconocido '-ms-thumb'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:27619

Pseudo-clase o pseudo-elemento desconocido '-ms-fill-lower'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:27726

Pseudo-clase o pseudo-elemento desconocido '-ms-fill-upper'. Grupo de reglas ignorado por un mal selector. materialize.min.css:13:27782

Error al leer el valor de 'letter-spacing'. Declaración ignorada. materialize.min.css:13:28027

Propiedad desconocida 'user-select'. Declaración ignorada. materialize.min.css:13:38491

Se esperaba 'none', URL, o función de filtro pero se encontró 'alpha('. Error al leer el valor de 'filter'. Declaración ignorada. materialize.min.css:16:347

Propiedad desconocida '-moz-opacity'. Declaración ignorada. materialize.min.css:16:376

Propiedad desconocida 'zoom'. Declaración ignorada. materialize.min.css:16:1136

Se esperaba 'none', URL, o función de filtro pero se encontró 'alpha('. Error al leer el valor de 'filter'. Declaración ignorada. materialize.min.css:16:1314

Propiedad desconocida '-moz-opacity'. Declaración ignorada. materialize.min.css:16:1345

Se esperaba el fin de un selector una pseudo-class de acción del usuario después de pseudo-element pero se encontró ':'. Grupo de reglas ignorado por un mal selector. materialize.min.css:16:2518

Error al leer el valor de 'letter-spacing'. Declaración ignorada. materialize.min.css:16:3095

Error al leer el valor de 'display'. Declaración ignorada. materialize.min.css:16:4033

Error al leer el valor de 'display'. Declaración ignorada. materialize.min.css:16:4054

Error al leer el valor de 'letter-spacing'. Declaración ignorada. materialize.min.css:16:5873

Error al leer el valor de 'letter-spacing'. Declaración ignorada. materialize.min.css:16:6304

downloadable font: download failed (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: file:///home/tank/Documentos/platzigram/fonts/roboto/Roboto-Regular.woff2 app.css:3172:12

downloadable font: download failed (font-family: "Roboto" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: file:///home/tank/Documentos/platzigram/fonts/roboto/Roboto-Regular.woff app.css:3172:12

downloadable font: download failed (font-family: "Roboto" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: file:///home/tank/Documentos/platzigram/fonts/roboto/Roboto-Regular.ttf app.css:3172:12

downloadable font: no supported format found (font-family: "Roboto" style:normal weight:normal stretch:normal src index:4) source: (end of source list) app.css:3172:12

GET

https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/fonts/roboto/Roboto-Regular.woff2

Froilan Asimov

student•

ya no amigos, ya encontre el error

ANDRES ALBERTO MOLINA SALDARRIAGA

student•

...y cual era el error?

oscar enrique ordoñez izquierdo

student•

al momento de instalar Yo-Yo me sale este error:

D:\imegram>npm install --save yo-yo

imegram@0.1.0 D:\imegram

`-- yo-yo@1.3.0

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:

npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14

npm WARN imegram@0.1.0 No repository field.

Alejandro Irimia Mesa

student•

Los errores que te da son de tipo Warning por lo que debería de funcionarte correctamente.

¿Es así?

/* global HTMLElement */

'use strict'

module.exports = function emptyElement (element) {
  if (!(element instanceof HTMLElement)) {
    throw new TypeError('Expected an element')
  }

  var node
  while ((node = element.lastChild)) element.removeChild(node)
  return element
}

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var babel = require('babelify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

gulp.task('styles', function(){
  gulp
    .src('index.scss')
    .pipe(sass())
    .pipe(rename('app.css'))
    .pipe(gulp.dest('public'));
})

gulp.task('assets', function(){
  gulp
    .src('assets/*')
    .pipe(gulp.dest('public'));
})

gulp.task('script', function(){
  browserify('./src/index.js')
    .transform(babel)
    .bundle()
    .pipe(source('index.js'))
    .pipe(rename('app.js'))
    .pipe(gulp.dest('public'));
})

gulp.task('default', ['styles', 'script', 'assets'], () => {
  gulp.watch('./assets/*', ['styles'])
  gulp.watch('./src/*', ['script'])
})```

index.js

      <div class="row">
          <div class="signup-box">
              <h1 class="tottusgram">Tottusgram</h1>
              <form class="signup-form">
                <h2>Regístrate y comparte tus momentos especiales con Tottus</h2>
                <div class="section">
                  <a href="" class="btn btn-fb hide-on-small-only">Iniciar sesión con Facebook</a>
                  <a href="" class="btn btn-fb hide-on-med-and-up">Iniciar sesión</a>
                </div>
                <div class="divider"></div>
                <div class="section">
                  <input type="email" name="email" placeholder="Correo Electrónico">
                  <input type="text" name="name" placeholder="Nombre Completo">
                  <input type="text" name="username" placeholder="Nombre de Usuario">
                  <input type="password" name="password" placeholder="Contraseña">
                  <button class="btn waves-effect waves-ligth btn-signup" type="submit">Regístrate</button>
                </div>
              </form>
          </div>
      </div>
      
      <div class="row">
        <div class="login-box">
          ¿Tienes una cuenta? <a href="/signin">Entrar</a>
        </div>
      </div>

    </div>
  </div>
</div>

var page = require('page');
var yo = require('yo-yo');
var empty = require ('empty-element');


var main = document.getElementById('main-container');

page('/', (ctx, next) => {
	main.innerHTML = '<a href="/signup">signup</a>'
})

page('/signup', (ctx, next) => {
	var el = yo`<div class="container">
			<div class="row">
				<div class="col s10 push-s1">
					<div class="row">
						<div class="col m5 hide-on-small-only">
							<img class="iphone" src="iphone.png" />
						</div>
						<div class="col s12 m7">
							<div class="row">
								<div class="signup-box">
								  <h1 class="platzigram">Platzigram</h1>
							    <form class="signup-form">
								    <h2>Registrate para ver fotos de tus amigos</h2>
								    <div class="section">
									    <a class="btn btn-fb hide-on-small-only"> Iniciar Sesion Con facebook</a>
									    <a class="btn btn-fb hide-on-med-and-up"> Iniciar Sesion</a>	
								    </div>
								    <div class="divider"></div>
								    <div class="section">
									   <input type="email" name="email" placeholder="Correo electronico" />
									   <input type="text" name="name" placeholder="Nombre completo" />
									   <input type="text" name="username" placeholder="Nombre de usuario" />
									   <input type="password" name="password" placeholder="Contraseña" />
									   <button class="btn waves-effect waves-light btn-signup" type="submit">Resgistrarse</button>
								   </div>
							   </form>
						   </div>
					   </div>
					 <div class="row">
						<div class="login-box">
							¿Tienes una cuenta? <a href="/signin">Entrar</a>
						</div>
					</div>
			  </div>
		  </div>
		</div>
	</div>		
</div>`;

empty(main).appendChild(el);
})

page();

function emptyElement(element) {
  while (element.lastChild) { //Mientras existan hijos del elemento
    element.removeChild(element.lastChild) //Remover el ultimo nodo hijo 
  }
  return element //Regresa el elemento vacio
}

Agregando interfaces de usuario con Yo-yo

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)