Similar Posts

Codetcha: CAPTCHA resolviendo Javascript

ByLuis

La verdad es que este CAPTCHA es muy friqui, pero es una idea interesante que quizás se pueda utilizar. Se trata de un CAPTCHA que en vez de tener que escribir una palabra, hay que modificar un código Javascript para que no tenga errores y así validar el formulario.
codetcha.png
Para pasar el CAPTCHA hay que eliminar todos los errores, se puede ir viendo si el código es correcto y si no es así, qué errores sigue habiendo. El código de Codetcha se puede usar para clases o ejemplos de Javascript, porque me da la sensación de que no es muy accesible este CAPTCHA.
Aún así la idea se podría sustituir usando matemáticas en vez de Javascript.
Codetcha

Progreso de subida de ficheros únicamente con HTML5

ByLuis

Uno de los mayores problemas con los que nos hemos encontrado a la hora de hacer aplicaciones que suben ficheros, es mostrar al usuario cuánto se ha subido y así poder saber cuánto queda. Ahora con HTML5 y XMLHttpRequest Level 2 podemos mostrarlo sin necesidad de parte del servidor.

El script hace uso de Evento de Progreso de HTML5 para poder mostrar:

  • total: total de bytes
  • loaded: bytes subidos
  • lengthComputable: indica si el tamaño del fichero es conocido
  • transferSpeed: velocidad de transferencia
  • timeRemaining: tiempo que falta (en formato Date)

Por ahora solo es compatible con Firefox, Chrome y Safari.

En el post lo explican con gran detalle.

Html5 File Upload with Progress

|

fleXcroll: scroll bars personalizados para tu web

ByLuis

Librería que nos permite usar scrolls personalizados en nuestras páginas web, ya sean verticales u horizontales. Aunque hay que intentar que no aparezcan en nuestra página, en caso de que sea necesario, porque los hay que son totalmente necesarios, quizás se puedan personalizar con este script.
fleXcroll.png
Por lo poco que he visto del código (que no está fácil de seguir porque está ofuscado), veo que fija el tamaño de la capa y con la propiedad overflow muestra los scrolls. Dibuja los scrolls personalizados encima y mediante ellos realiza el scroll de la capa, usando scrollTop y scrollLeft (que creo que antes no funcionaba del todo bien en Opera 8 y en la versión 9 lo han solucionado). Algo que yo no solía hacer y que he visto como lo hace aquí, es capturar el evento selectstart y hacer que devuelva false, para que cuando se haga el drag del scroll no se seleccione la imagen que usamos para personalizar el control.
FleXcroll, Flexible and Accessible Custom Scroll Bars
Vía / aNieto2K

DOM Tool: transforma HTML en código DOM

ByLuis

A la hora de generar nuevo código HTML mediante Javascript, nos enfrentamos a la decisión de utilizar innerHTML o DOM. El problema de usar DOM es que nos puede llevar mucho tiempo generar el código Javascript necesario para crear el HTML necesario.
Todo este proceso se puede hacer de forma mucho más sencilla mediante DOM Tool, una aplicación que nos devolverá el código Javascript necesario para pasar un HTML que introduciremos mediante un formulario.
Ya no hay excusas para no usar DOM.
DOM Tool
Vía / dzone

Crear aplicación web con Hapi.js, Vue y MongoDB

Crear aplicación web con Hapi.js, Vue y MongoDB

ByLuis

Estoy aprendiendo Hapi.js y Vue.js y qué mejor que ir anotando aquí lo que voy aprendiendo, y si a alguien le sirve, mejor que mejor.

Pretendo crear una aplicación web e ir explicando en diferentes posts, que iré añadiendo aquí, lo que estoy aprendiendo.

He estado viendo distintos boilerplates y el que más me ha gustado ha sido appy. Podría usarlo, pero prefiero aprender poco a poco que pegarme con algo ya hecho e indagar qué hace cada cosa.

Lo que más me gusta de appy es que diferencia entre el backend y el frontend de forma bastante clara, distintos directorios y aplicaciones para cada cosa. Es por ello que voy a seguir esta estructura. Aquí hay un artículo bastante majo que explica más o menos lo mismo.

Pues nada más, iré subiendo posts sobre lo que voy aprendiendo. Eso sí, porfa, si meto la pata en algo, no me lo tengas muy en cuenta, estoy aprendiendo.

  1. Hapi.js+Vue.js Crear servidor backend (código v0.1.0)
  2. Reorganización de la configuración (código v0.2.0)
  3. Empezar añadiendo routes (código v0.3.0)
  4. Conectando a mongodb (código v0.4.0)
  5. Modelos mejorados y controladores (código v0.5.0)
  6. Inicializando el frontend (código v0.6.0)
  7. Vue router y login form “tonto” (código v0.7.0)
  8. Comunicación entre frontend y el servidor usando JWT (login) (código v0.8.0)
  9. i18n (código v0.9.0)
  10. Activación de usuario, recordar contraseña, … (código v0.10.0)
  11. Roles (código v0.11.0)
  12. Vuex y avatares (código v0.12.0)