XRegExp: ampliación de expresiones regulares en Javascript

ByLuis

XRegExp es una ampliación de Javascript para las expresiones regulares, las cuales en Javascript flaquean a la hora de los modificadores.
En este caso, añade los modificadores s y x, lo cual amplía el uso que podemos darle a las expresiones regulares. El modificador s permite que el punto “.”, que representa a cualquier carácter, represente también al salto de línea, el cual suele ignorar. El modificar x ignora los espacios en la expresión regular, y así poder crear unas expresiones regulares más legibles.
XRegExp
Vía / dzone

Similar Posts

Foo Framework: framework javascript

ByLuis

Foo Framework es un framework javascript realizado sobre Prototype que permite realizar aplicaciones RIA de forma sencilla.

Foo actúa como una máquina virtual que traduce las etiquetas especiales de Foo a Javascript y lo enlaza con datos para crear aplicaciones web. Une la facilidad del HTML y el poder del Javascript para crear aplicaciones web complejas.

Veo una gran utilidad a este framework sobre todo para los casos en que en un proyecto existe un grupo de desarrolladores de páginas sin gran conocimiento de XHTML o Javascript, ya que su desarrollo es muy sencillo, con poco código se puede hacer mucho.

Por ejemplo, con este código se puede hacer una tabla ordenable:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sorting Table</title>
<script language="javascript" src="../scripts/prototype.js"></script>
<script language="javascript" src="../scripts/foo.js"></script>
<script language="javascript" src="../scripts/foo.interact.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script language="javascript">
var dsCatalog = new foo.XMLDataSet('../data/data.xml', {path:'CATALOG.CD'});
</script>
</head>
<body xmlns:f="http://foo.riiv.net/namespace">
<div id="catalog" f:datasource="dsCatalog" f:implement="Sort">
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<th f:sort="{by:'TITLE'}">Title</th>
<th f:sort="{by:'ARTIST'}">Artist</th>
<th f:sort="{by:'COMPANY'}">Company</th>
<th f:sort="{by:'COUNTRY'}">Country</th>
<th f:sort="{by:'PRICE', type:'number'}">Price</th>
<th f:sort="{by:'YEAR', type:'number'}">Year</th>
</tr>
<tr f:each="i in this.data as cd" class="${i%2==0?'odd':'even'}">
<td>${cd.TITLE}</td>
<td>${cd.ARTIST}</td>
<td>${cd.COMPANY}</td>
<td>${cd.COUNTRY}</td>
<td>${cd.PRICE}</td>
<td>${cd.YEAR}</td>
</tr>
</table>
</div>
</body>
</html>

Además Foo es modular, incluyendo una API para desarrolladores que permite crear tus propias etiquetas y plugins sin tener que modificar el core de la aplicación.

Foo Framework

Gracias DiarioTHC

Crear gráficas accesibles con jQuery y canvas

ByLuis

Buen plugin para jQuery que permite crear gráficas de datos accesibles mediante canvas. El script es bastante fácil de usar, se crea una tabla (sí, si, con <table>, que es para lo que se deben usar), y el script dibuja los datos en un canvas.
Ofrece la posibilidad de crear gráficas de pie, barras y líneas, para lo cual, en el class de la etiqueta canvas hay que especificar el origen y el tipo de gráfica (por ejemplo, fgCharting_src-dataTable_type-pie).
Creating accessible charts using canvas and jQuery
Vía / couch

Hapi.js + Vue.js avatar

Hapi.js + Vue.js avatar

ByLuis

En esta nueva versión se ha añadido el poder subir el avatar, recortando la imagen usando la librería Cropper.js y para ello también se usará Vuex para guardar el avatar y que se actualice en toda la app.

Para subir la imagen se usará el siguiente método.

this.cropper
	.getCroppedCanvas( this.outputOptions )
	.toBlob( blob => {
		new ApiFectch()
			.updateAvatar( blob )
			.then( response => {
				if ( response.response ) {
					success( response.message );
					this.avatar = avatar + '?cache=' + new Date();
					this.$store.commit( `user/${ USER_SET_AVATAR }`, new User().getAvatarURL( userData.username ) + '?cache=' + ( new Date() ) );
				} else {
					error( response.message );
				}
			} );
	} );

Para manejar todo habrá que usar Vuex con módulos, por ejemplo, para el módulo user:

import { USER_SET_AVATAR, USER_SET_USERNAME } from '../mutation-types';

const state = {
	avatar: null,
	username: null,
};

const mutations = {
	/**
	 * Sets avatar
	 *
	 * @param {Object} mutationState Vuex state.
	 * @param {String} avatar Avatar string.
	 */
	[ USER_SET_AVATAR ]( mutationState, avatar ) {
		mutationState.avatar = avatar;
	},

	/**
	 * Sets username
	 *
	 * @param {Object} mutationState Vuex state.
	 * @param {String} username User name.
	 */
	[ USER_SET_USERNAME ]( mutationState, username ) {
		mutationState.username = username;
	},
};

export default {
	namespaced: true,
	state,
	mutations,
};

Aquí está el código

wForms: javascript para tus formularios

ByLuis

wForms es cógido Javascript no intrusivo que te ayuda a realizar las acciones más comunes con tus formularios web. Disponible en dos versiones, comprimida y legible, ofrece tres tipos de acciones en los formularios:

  • Validación de los campos de entrada: como se define los campos obligatorios y la comprobación del formato para cada campo.
  • Sincronización entre campos: cómo controlar campos del formulario dependiendo de otros campos.
  • Secciones condicionales: si aparecen o no campos basados en respuestas anteriores.

wForms

Vía / dzone

¿El futuro de Javascript?

ByLuis

El creador de Javascript habla del futuro que tendrá, al menos ECMA. Una de las opciones que indica es la posibilidad de añadir propiedades a objetos e indicar setters y getters (indicar y recuperar el valor).

Object.defineProperty(obj, "length", {  
  get: function() {  
    return this.computeLength();  
  },  
  set: function(value) {  
    this.changeLength(value);  
  }  
});

ECMA Harmony and the Future of JavaScript

|

PHP-Ext: librería PHP para Ext JS

ByLuis

PHP-Ext es una librería open source que nos permite potenciar la capa UI de Javascript en nuestras aplicaciones. Para ello nos ofrece una serie de librerías (compatibles con PHP 4 y 5) para integrar Ext JS en nuestro sistema. Funciona como un mapeado en clases de la librería JS.

Entre las posibilidades que ofrece nos encontramos con la creación de formularios, combos, grids o menus. A parte ayuda a la comunicación entre el cliente y el servidor mediante JSON y XML.

Un ejemplo de uso sería el siguiente:

<?php
header("Content-type:text/javascript");
include_once("../../php-ext/php-ext.php");
include_once(NS_PHP_EXTJS_CORE);
include_once(NS_PHP_EXTJS_PANELS);
$p = new ExtPanel();
$p->Title = "My Panel";
$p->Collapsible = true;
$p->RenderTo = Javascript::variable("Ext.get('content-box')");
$p->Width = 400;
$p->Html = Javascript::variable("Ext.example.bogusMarkup");
echo Ext::OnReady(
$p->getJavascript(false, "p")
);
?>

PHP-Ext

Vía / AjaxLine