Categories
html5 Programación

HTML5 Template Tag: la novedad

Para solventar el uso de templates, personalmente uso y me encanta Mustache, ya que tiene
El 7 de mayo, se publicó el borrador de la etiqueta template de HTML5, Y se puede hacer algo como esto:

HTML:

<template id="template-row">
  <tr class="">
     <td></td>
     <td></td>
     <td></td>
  </tr>
</template>
 

Y repetir el template dentro de una tabla con el siguiente script:

JAVASCRIPT:

var t = document.querySelector("#tabla tbody"),
row = document.getElementById("template-row");
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "Nombres";
td[2].textContent = "Apellidos";
t.appendChild(row.content.cloneNode(true));
 

El código anterior permite reutilizar el template dentro de una tabla en cualquier contexto. Este ejemplo fue la fila de una tabla, sin embargo podemos usarlo con listas, párrafos, imágenes o lo que se nos ocurra siguiendo algunas limitaciones.

Para tener en cuenta:

  • El código dentro de template no es mostrado por el navegador.
  • El código dentro de template no es parte del documento, es decir que document.getElementById('#template-row'); no tiene hijos.
  • Los templates son inactivos hasta que son usados, es decir, que las imágenes no se cargan, archivos multimedia no son reproducidos y scripts no son ejecutados.

Por el momento ningún navegador soporta la etiqueta, pero ya lo veremos muy pronto. Podemos ver un ejemplo completo se puede ver en JSFiddle, por mientras todavía nos queda Mustache.

Visto en Frontend.pe.

Categories
Programación

Todos debemos aprender a programar

Todo el mundo en este país debería aprender como programar una computadora... porque esto te enseña como pensar.

Categories
Programación

Eclipse XText

Hace un año, algo menos me parece, me enteré de la existencia de Eclipse Xtext. A pesar de haber visto en ese entonces un vídeo mostrando sus características, hasta ahora no había tenido la oportunidad de probarlo realmente. XText es un framework destinado a facilitar el desarrollo de lenguajes de programación o DSLs. Ofrece la posibilidad de crear los compiladores y de poder integrarlos dentro de Eclipse; permitiendo entre otras, la coloración de código, la verificación instantánea de sintaxis, completado de código, etc. Para una pequeña introducción, vean mejor el siguiente video.

Internamente usa AntLR para generar el parser. De ahí que la sintaxis usada para definir la gramática en Xtext sea casi la misma que la de AntLR. A pesar de haber tenido algunas limitaciones mientras intentaba definir la gramática de un lenguaje existente, me dejado una grata impresión.

Categories
Firefox Google Chrome Internet Explorer JavaScript Miniposts Programación

Plugins de Desarrollo Web para Varios Navegadores

Una interesante lista de plugins para desarrollo web en los principales navegadores.

Categories
Google Chrome Programación Recursos

¿Cómo hacer extensiones para Google Chrome?

Si quieres aprender a programar extensiones de Google, este jueves habrá un seminario online en donde los mismos chicos de Google podrán darte las pautas.

El seminario será una hora, para lo cuál debes inscribirte de antemano y si tienes alguna pregunta, puedes plantearla desde ahora.

Los detalles del seminario online: