Author: koas

El operador unario + en JavaScript

Me enteré el otro día leyendo un artículo de que el operador unario + en JavaScript sirve para intentar convertir al tipo Number al operando que le siga. Si no lo consigue el resultado será NaN.

Es decir, que en vez de usar 

let cadena = "5";
let numero = parseInt(cadena, 10);

podemos usar

let cadena = "5";
let numero = +cadena;

Es mucho más conciso, si bien esto es algo que quizá no todo el mundo conoce y puede llevar a confusión, y ya sabemos que…

Os presento payum.club

El año pasado me propuse el reto de hacer una aplicación que pudiera funcionar sin JS y cargara rápidamente. La idea era hacer un ejercicio de programación que partiera de lo más básico (contenido HTML generado desde el servidor y sin usar JS, enviando la información desde el cliente con formularios) y sobre ello ir añadiendo con JS mejoras en la funcionalidad.

Por desgracia, tengo que reconocer que he fallado. No he tenido tiempo para hacer esto. Realmente lo que ha pasado es que el (poco) tiempo que el trabajo me ha dejado libre he preferido usarlo en aprender Vue.js.

Durante muchos años estuve programando JS a pelo (Vanilla JS) y cuando empecé a usar jQuery fue una gozada, todo era mucho más sencillo y avanzaba mucho más rápido. Pues con Vue.js me ha pasado lo mismo, desarrollar una aplicación es mucho más entretenido ahora y me permite librarme de implementar mucho código que antes había que picar sí o sí. Además después de tantos años trabajando con JS se agradece un poco de variedad.

Así que si bien este mensaje implica aceptar un pequeño fracaso también me permite anunciar un pequeño éxito: ya controlo suficiente de Vue.js como para hacer una sencilla aplicación. Y esa aplicación es Payum.club

Vale que no es nada del otro mundo (al menos la versión que hay colgada al escribir este mensaje), pero me ha servido para aprender las bases que me permitirán hacer cualquier aplicación mucho más compleja (enrutado, estado global, comunicación con APIs, PWA).

Y el sol refulgió, y el pueblo lo festejó comiendo en comunidad una oveja y anchoas y carpas y garbanzos y orangutanes y sopa de arroz y fruta y murciélagos….

Una clase de PHP para evitar ataques de fuerza bruta en el acceso a nuestra aplicación web

Tenía este código por casa desde hace tiempo y ahora que lo he vuelto a usar para un nuevo proyecto he pensado que ya era el momento de ponerlo un poco en limpio y compartirlo.

PHP Login Blacklist

Permite detectar intentos de ataques por fuerza bruta en nuestra aplicación guardando en una base de datos SQLite los nombres de usuario para los que haya fallado la autenticación y permitiendo que no ejecutemos el código de autenticación si no han pasado X segundos desde el último intento.

Espero que le resulte útil a alguien, es una forma sencilla de aumentar la seguridad de nuestra aplicación.

Reto para el último trimestre de 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:

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!

Compilar ficheros vue (single file components) sin usar webpack o browserify

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>