curvyCorners: esquinas redondeadas mediante Javascript

ByLuis

curvycorners.pngAhora que están tan de moda las esquinas redondeadas, vemos una librería javascript que nos ofrece esta posibilidad sin tener que usar imágenes.
Tan solo identificando las capas que queremos modificar y ejecutando un pequeño script, redondearemos las esquinas de nuestras capas, ya tengan borde o imagen de fondo, mostrando además efecto anti-aliasing.
curvycorners2.png
Me parece que nos va a facilitar la vida a muchos.
curvyCorners
Vía / Bitelia

Similar Posts

|

Laboratorio: evitar el scroll en los textarea con jQuery

ByLuis

Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.

En plan rapidito he hecho un script jQuery que realizaría esta función:

$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});

TrimQuery: usa SQL en Javascript

ByLuis

TrimQuery es un script que permite usar sentencias SQL para obtener datos contenidos en un objeto JSON.

Entre las características que permite, nos encontramos con:

  • Codificado en Javascript estándar.
  • Admite SELECT … FROM.
  • Cláusulas WHERE.
  • Ordenación (ORDER BY) de varias columnas de forma ascendente (ASC) y descendente (DESC).
  • Alias (AS).
  • Agrupaciones (GROUP BY y HAVING).
  • Funciones: SUM, COUNT y AVG.
  • Joins
  • LIMIT y offsets.
  • Parametrización.
  • Es ligero (más o menos), ya que ocupa menos de 700 líneas.

Si por ejemplo disponemos del siguiente objeto:

Invoice  : [ { id: 1, total: 100, custId: 10 },
{ id: 2, total: 200, custId: 10 },
{ id: 3, total: 300, custId: 10 },
{ id: 4, total: 400, custId: 20 } ],
Customer : [ { id: 10, acctBalance: 1000 },
{ id: 20, acctBalance: 2000 },
{ id: 30, acctBalance: 3000 } ]

Podemos obtener datos con la siguiente consulta:

SELECT Customer.id, Customer.acctBalance, Invoice.total
FROM Customer, Invoice
WHERE Customer.id = Invoice.custId
ORDER BY Customer.id

Es sensible a mayúsculas y minúsculas, ya que diferencia entre FROM y from.

Demo

TrimQuery

Vía / dzone

Problemas de las librerías Javascript

ByLuis

Ultimamente están apareciendo muchas librerías Javascript que mejoran el trabajo con Javascript, pero no todo son cosas positivas y hay gente que muestra problemas que aparecen con el uso de estas librerías:

  • Escasa documentación: ya sea online u offline, si la librería es increible, pero no hay una forma sencilla de saber cómo usarla, pues nos quedamos como estábamos.
  • Escaso soporte: estas librerías no suelen tener un sistema que ayude a los usuarios con los problemas que se encuentran.
  • Demasiado grandes: cargar una librería que ocupa mucho, para usar un par de funciones, es mucho lo que se carga y poco lo que se usa, quizás repercute negativamente en rendimiento o en ancho de banda.
  • Demasiado específicas: sobre todo al trabajo de otra gente, por lo que a nosotros nos puede venir parcialmente bien.
  • Diferentes en estructura: diferentes a la forma en que lo hacemos nosotros, en vez de usar estructuras estándares a las que podemos estar todos acostumbrados.
  • No hay guías paso a paso: para poder entender las funcionalidades de las liberías con ejemplos.
  • Escasa información sobre soporte a navegadores
  • Inconsistencia en nombres de métodos y variables: en la W3C hay amplia documentación sobre la metodología que se debería seguir para la nomenclatura de funciones y variables.

Más información

Why good JavaScript libraries fail

Dear JavaScript Library Developers…

Too many libraries, not enough librarians

Six things that suck about the Web in 2006

Vía / QuirksBlog

Selector de hora con Mootools

ByLuis

Cada día son más los scripts que se realizan con frameworks de Javascript, estos, al estar ayudados por las funcionalidades del framework, son más sencillos de desarrollar, lo que aporta más riqueza a la web2.0. En este caso se trata de un selector de horas, que mediante un reloj se puede seleccionar la hora, moviendo las manillas o indicando si queremos AM o PM.
reloj.png
El script es sencillo de usar e implementar, controla independientemente las manillas de las horas y los minutos, permite mover las manillas para indicar la hora y usa CSS sprits para mejorar la velocidad de carga.
NoGray Time Picker
Vía / WebAppers