Month: September 2018

Últimamente he leído bastantes artículos por ahí en los que la gente se queja del estado actual del desarrollo web. La principal queja es que aun teniendo conexiones de alta velocidad la páginas siguen cargando lentas. En estos dos artículos lo explican perfectamente:

• The bullshit web
• Dear developer: the Web isn’t about you

Leyendo estos artículos me reconocía en la sensación de hartazgo que supone que una página de noticias (que es básicamente texto y fotos) se vea a trompicones en un ordenador de 16GB de RAM obligándome a usar una extensión para desactivar JS en ese tipo de páginas.

Pero también me di cuenta de que yo mismo he contribuido a ese estado de la web actual. Mis últimos proyectos no funcionan sin JS. Usuarios con navegadores antiguos no pueden acceder a la información que se supone que mis páginas deberían ofrecer. Reconozco mi culpa.

No basta con reconocer la culpa, es necesario además tener espíritu de enmienda. Y fue al leer este breve libro, Resilient Web Design, cuando decidí que había llegado el momento de ser coherente y cambiar el enfoque que tengo con el desarrollo web.

Así que me he propuesto un reto para cumplir antes de fin de año. Voy a desarrollar una web que cumpla los siguientes requisitos:

• Cargue y pueda empezarse a usar en menos de tres segundos.
• Funcione aunque el usuario desactive JavaScript / CSS en su navegador.
• Bonus: la web debe funcionar con las versiones más antiguas que pueda encontrar y usar de Netscape Navigator e Internet Explorer.

Escribiré entradas aquí con todo lo que me vaya pareciendo interesante del proceso. ¡Deseadme suerte!

Llevo un tiempo estudiando Vue.js y me gusta bastante. Lo que más me gusta es poder tener los componentes separados en ficheros .vue con su HTML, CSS y JS.

El problema es que estos ficheros .vue no se pueden usar directamente, hay que convertirlos, y para eso se requiere webpack o browserify o algún programa similar. Aprender a usar estos programas no es trivial, y lleva su tiempo.

Hay un paquete de Node, VUE cli, que permite crear un esqueleto de aplicación para Vue que ya tiene configurado webpack para “compilar” los ficheros .vue, pero no me convence porque aunque quizá para una aplicación que empieces desde cero puede valer no tengo muy claro cómo incorporarlo a un proyecto ya existente (quiero usar Vue para hive.ly).

Total, que al final he hecho un pequeño script al que le pasas tres parámetros:

• La carpeta donde están los ficheros .vue
• La ruta de un fichero js
• La ruta de un fichero css

y genera un fichero js y otro css con el código y los estilos de los ficheros .vue. Basta con cargar estos dos ficheros en nuestra página y ya podremos usar los componentes.

El script está disponible en GitHub y requiere que tengamos instalado PHP en nuestro ordenador.

El único requisito que deben cumplir los ficheros .vue es que el parámetro template de la llamada a Vue.component debe ser una cadena vacía con backticks: “

Ejemplo de fichero .vue:

<template>
	<div>
		<button v-on:click="count++">
			You clicked me {{ count }} times.
		</button>
		<image-counter></image-counter>
	</div>
</template>

<script>
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    };
  },
  template: ``
});
</script>

<style>
button {
	background: red;
}
</style>