Script Inside

Entradas

Mostrando las entradas etiquetadas como javascript

Instalar llnode en macOS Big Sur

El complemento llnode agrega la capacidad de inspeccionar el código fuente JavaScript a las funciones de depuración estándar de C / C ++ cuando se trabaja con procesos Node.js o volcados de núcleo en LLDB. Digamos que es la herramienta imprescindible si queremos detectar fallos en la gestión de memoria en nuestro código. Entorno macOS Big Sur 11.2.3 node 14.15.4 lldb-1200.0.44.2 Al ser llnode un plugin para lldb necesitamos instalar este primero, en el caso de macOS es suficiente con instalar las herramientas de consola de Xcode, nada más, no es necesario tener la versión completa instalada. sudo xcode-select --install Para comprobar que todo es correcto podemos utilizar lldb --version Ahora vamos a instalar llnode y la mejor manera es utilizando brew: brew install llnode Es importante tener en cuenta que esto solo nos instala el plugin pero no lo vincula con lldb ni genera un comando con el que podamos llamar a llnode desde consola directamente así que es normal que una vez instala...

FabricJS vs jCanvas

Trabajar con dibujos en HTML5 puede llegar a ser algo tedioso y complicado si utilizamos las funciones nativas de JavaScript para su creación y posterior gestión, pero como todo en programación existen unas librerías estupendas que nos ayudan con esta tarea. En concreto yo he utilizado 2 de ellas, una para jQuery llamada jCanvas , autodefinida como un plugin que hace el trabajo con canvas HTML5 fácil; y FabricJS una librería independiente para el manejo de lienzos (canvas) en HTML5. Ambas, como su documentación indica, nos ayudan a que el trabajo con dibujos sea mucho más simple, ambas están orientadas a objetos y están disponibles desde CDN o para descargas locales, además de mantener el soporte activo. Estas librerías coinciden en lo siguiente: buena documentación acceso desde CDN o local, con archivos minimizados o brutos programación orientada a objetos un solo archivo es necesario para trabajar con ellas (sin contar jQuery que sería necesario en jCanvas) disponible ...

Código fuente en Blogger

Un blog como este, de programación, requiere que en muchos post sea necesario introducir código para mostrar ejemplos y en Blogger, creedme, no ha sido tarea fácil. Hay que sumar a mi dejadez los pocos plugins que hay para resaltar el código fuente. He trabajo con 3, el último es el que estoy utilizando actualmente y es el que más me convence. SyntaxHighlighter para Windows Live Writer Fue el primero que utilicé, al principio me iba bien pero tiene la desventaja que se ejecuta del lado del redactor y no en el servidor, o sea, el código formateado sale una vez redactas el post con Windows Live (herramienta que utilizo porque la edición online de Blogger me parece desastrosa). Tiene el inconveniente de no ser para usuarios básicos, hay que instalar librerías dll, configurarlas en cada ordenador que tengamos y que utilicemos para escribir en el blog. Otro de los errores que me suelo encontrar al utilizar SyntaxHighlighter para Windows Live Writer es la diferencia de estilos entre lo ...

Sustituir alertas del navegador con jQuery UI

diciembre 31, 2014

Antes que nada decir que reemplazar la funcionalidad de las alertas del navegador con código JavaScript nunca es 100 % compatible, por citar un (y el más importante) ejemplo la ejecución del script no se detiene cuando utilizas librerías JavaScript para sustituir alertas. Teniendo en cuenta lo anterior existen 2 opciones para embellecerlas con jQuery, utilizar librerías externas o utilizar los propios cuadros de diálogos de jQuery UI . Si trabajas con esta última librería sería absurdo utilizar otro plugin para recargar aún más nuestro código. Además que muchas de las librerías (como la de jAlert ) no están actualizadas con las últimas versiones de jQuery lo que nos obligaría a utilizar la librería extra de migración . Pero hacerlo con jQuery UI no es tan trivial como parece, hay que tener en cuenta un par de cosas importantes: auto foco, los cuadros de diálogo de jQuery UI tienen el foco puesto automáticamente en el primer elemento enfocable de nuestro html , lo cual puede que no ...

Uso básico de MomentJS

diciembre 30, 2014

El uso de fechas para cualquier lenguaje de programación es algo básico y en JS, siendo del lado del usuario, su uso, validación e internacionalización es más que importante. El objeto Date de JavaScript es bastante básico y aunque hay clases que extienden sus funcionalidades aún no es suficiente. Para ello existe una librería muy útil llamada momentjs . La documentación esta bastante bien pero aún así hay muchos ejemplos que no me quedan claros. Por ejemplo a la hora de crear un nuevo objeto lo podemos hacer de la siguiente forma: moment(value, "MM/DD/YYYY") o con varios formatos posibles moment(value, ["MM/DD/YYYY", “DD/MM/YYYY”]) Es muy importante que las letras sean en mayúsculas porque el horario se define con letras en minúscula por ejemplo m.format('MM/DD/YYYY HH:mm'), asumiendo que m es la variable resultante del constructor anterior. Se pueden concatenar funciones por ejemplo si queremos validar un campo de un formulario con un formato de ...

DateJS y jQuery UI Datepicker

septiembre 22, 2014

La librería DateJS es una interfaz muy intuitiva para trabajar con fechas en JS, sobre todo internacionalizar las mismas y escribirlas en diferentes idiomas. Trabajando con ella me he dado cuenta que tal y como la descargamos es incompatible con la extensión de jQuery UI Datepicker produciendo el error Maximum call stack size exceeded error al llamar a la función toString que esta librería sobre escribe. Para corregirlo basta con editar el archivo date.js y reemplazar las apariciones de toString por print (es el nombre que escogí yo) salvo en la línea 40 donde aparece s.toString. Con estas modificaciones ya podremos trabajar con ambas características.

jQuery Mobile primeras impresiones

Hoy he tenido que desarrollar una aplicación sencilla para móviles y aprovechando uno de los cursos online de lynda.com he decidido poner en práctica lo que sabía de jQuery Mobile y estas son mis primeras impresiones. Documentación Esto es lo primero que me chocó, la documentación de jQuery Mobile es mucho más deficiente a lo que nos tiene acostumbrado jQuery en sus dos grandes proyectos, incluso con incoherencias o falta de datos en algunos temas como la función jqmData (algo equivalente al data de jQuery). Algunos aspectos me parecían difíciles de entender, los ejemplos poco claros y los códigos fuente con falta de información. Temas Lo de los temas es otro mundo, en una misma distribución de jQuery Mobile utilizas varios temas y la personalización de estos si bien es muy similar a jQuery UI no me ha quedado del todo claro. Comportamiento Lo que peor llevo es cómo funciona jQuery Mobile, es totalmente diferente a jQuery, todo se basa en atributos data que son los encargado...

Valores por defecto en JavaScript

Quisiera compartir con vosotros este maravilloso post con varias opciones para pasar valores por defecto en funciones JavaScript .

Rellenar SELECT con AJAX y jQuery

Uno de los usos más básicos con AJAX es rellenar combos (SELECT). Pero no por básico dejar de ser a veces complicado. Lo primero que debemos saber es que las funciones AJAX de jQuery utilizan la codificación UTF-8 tanto para recibir como para enviar datos. Existen mil maneras de pasar los datos con AJAX aunque las más lógicas serían las que utilizan formatos unificados para el tráfico de datos como son XML y JSON. Particularmente a mi me gusta mucho más utilizar JSON pero en Chrome si creamos un objeto JSON a partir de un array numerado el objeto resultante se ordena obviando el orden que se le haya dado previamente . Rellenando un SELECT con XML Lo primero que haremos será construir un objeto XML codificado en UTF-8 para ello podemos ayudarnos de funciones como utf8_encode en caso de que los valores vengan codificados en ISO. Aquí es dejo un ejemplo de un XML $xml = new XmlWriter(); $xml->openMemory(); $xml->startDocument('1.0', 'UTF-8'); $xml-...

Análisis de algunos plugins para jQuery

Esto no es un listado de los mejores ni los peores complementos (extensiones, plugins) para jQuery . Es un análisis de los que me he visto obligado o necesitado a utilizar durante los desarrollos web de los últimos años. Espero que mi experiencia con ellos os ayuden a elegir mejor cuales utilizar y cuales no. jQuery UI El mejor, imprescindible a la hora de dar un diseño homogéneo y versátil a una aplicación web, fácilmente instalable, amplia documentación, muy actualizado. Constantemente mejorado. La única pega podrían ser los íconos, que son escasos, pero esto se puede palear utilizando Font Awesome , la mejor librería de íconos para los desarrolladores web. jQuery blockUI Muy sencillo pero de una utilidad aplastante, permite bloquear la pantalla al pulsar algún botón o el evento que configuremos, incluso permite ejecutarlo en todas las llamadas AJAX con una configuración muy sencilla de una línea. Última versión la 2.66 del 9 de noviembre de 2013. jQuery Alert Dialogs Es un p...

Enviar archivos con AJAX y jQuery en HTML5

Con la evolución de los navegadores y la llegada de HTML5 ya no es necesario utilizar librerías extras para simular subir archivos por AJAX, la mayoría de estas librerías lo que hacían era utilizar FLASH o hacer un IFRAME para capturar esta subida de archivos. Con HTML5 ya no es necesario esto. Esto es gracias a la introducción del objeto FormData que nos permite crear formularios al vuelo. Asignar un formulario existente a un objeto FormData: var formElement = document.getElementById("someFormElement"); var formData = new FormData(formElement); O puedes recorrer el formulario con jQuery para solo agregar los campos que te interesan: var formData = new FormData(); $('#someFormElement :input').each(function(){ var input = $(this); switch (input.attr('type')){ case "checkbox": ...

jQuery data() vs val()

Hace pocos días me paso una cosa muy curiosa, imagina que tienes el siguiente input: <input type=”text” value=”5” data-numero=”5” /> Si ejecutamos las funciones de jQuery val() o data(“numero”), ambas, devuelven el valor 5, la diferencia es que val() lo devuelve como tipo string y data como integer. Esto solo afecta si se hace una comparativa con ===.

Hacer un select readonly con jQuery

diciembre 20, 2013

Para un select no es aplicable la opción readonly, o está deshabilitado o está activo, pero no puede estar activo y ser readonly. Esto es lo que HTML y los navegadores te dicen pero hay una opción a esto y es deshabilitar todos los option no seleccionados con jQuery, de esta manera con este sencillo código JavaScript podemos simular tener un select readonly . $('#selectid option:not(:selected)').attr('disabled',true); Para los que quieran un poco más de teoría pueden seguir leyendo el post. Diferencias entre controles readonly y disabled La principal diferencia entre readonly y disabled es que aunque en ambos casos el contenido del control sobre el que se aplica no puede ser modificado en caso de readonly este valor si se envía al hacer el submit del formulario mientras en el caso de un control disabled este valor nunca se envía, con lo cual suele ser interesante tener un control no modificable pero que queramos tener su valor al recibir los datos del formulari...

jQuery trabajando con selects

febrero 20, 2013

Los tipo select en los formularios son un poco especiales y unos de los más usados, todos en internet hemos tenido que rellenar un formulario en el cual al menos siempre hay un desplegable. Aquí os dejo algunos atajos para trabajar con desplegables en jQuery. Borrar todos los datos de un desplegable $(‘desplegable option’).remove(); Eliminar todos los datos menos el primero $(‘desplegable option:gt(0)’).remove(); Obtener el valor de un desplegable $(‘desplegable’).val(); Obtener el texto del valor seleccionado en un select $(‘desplegable option:selected’).text(); Obtener el objeto DOM del valor seleccionado y no el objeto jQuery $(‘desplegable option:selected’).get(); Rellenar un desplegable desde un JSON $.each(ob, function(key, value) { $('<option />').text(key) .attr("value",value) ...

jQuery validar campos numéricos

febrero 15, 2013

A veces es necesario validar con JavaScript campos de texto que serán numéricos, si bien en HTML 5 esto se soluciona con los nuevos tipos de campos de texto tenemos que tener presente que es posible que nuestros usuarios no accedan a la web con un navegador moderno. Por eso es este post para mostrar una vía que permite validar campos de texto como numéricos en JavaScript . Con campos numéricos me refiero a números enteros, con decimales y con signo. Nota: recordar que las validaciones por JavaScript nunca deben ser las únicas que hagamos, siempre hay que validar los datos del lado del servidor. Para validar estos campos no voy a utilizar ningún plugin específico de jQuery que los hay, solo utilizaré la librería base y las funciones focusout y keydown . Antes que nada veamos que código ASCII tienen las teclas que nos interesa permitir: Código numérico Teclas 8 Backspace (<-) 9 Tabulador (Tab) 13 Retorno (Return) 46 Suprimir 189 y 173 Signo negativo 190 P...

jQuery, Firefox 15, live + onKey

octubre 22, 2012

Si tenéis errores con Firefox 15 utilizando jQuery con captura de eventos del tipo live blur, y además tenéis sobre ese elemento definidas funciones onKeyUp o por el estilo, tened presente que esto os va a dar error, lo aconsejable para solucionarlo es eliminar las funciones onKey del propio elemento y definirlas dentro del estándar jQuery, o también podéis probar a actualizar vuestra versión de este framework a la más reciente.

Habilitar la copia automática de textos al portapapeles

En anteriores ocasiones he escrito como copiar desde el portapapeles con JS y copiar al portapapeles con JavaScript , pero para aplicar ambas opciones en muchos navegadores no está disponible y en otros hay que hacer configuraciones adicionales. Este tutorial es aplicable a los navegadores Firefox cualquier versión, para Internet Explorer no es necesario habilitar nada en concreto y para el resto de navegadores está pendiente de analizar. Abrimos el navegador y en la barra de navegación (dónde se ponen las direcciones de las páginas web –recuadro rojo imagen 2- ) escribir “about:config”, nos aparecerá la siguiente advertencia: No os preocupéis ignorar este mensaje y pulsad el botón “Tendré cuidado, lo prometo”, el check “Mostrar esta advertencia la próxima vez” marcado también. Una vez pulsado el botón nos aparecen un listado con todas las opciones de configuración de nuestro navegador, es una pantalla como esta: Dónde pone Filtro escribimos “signed.applets.codebase_principal_suppo...

Time to First Byte

El Time To First Byte o TTFB es una medida que se utiliza a menudo como un indicador de la capacidad de respuesta de un servidor web o de otros recursos de red. Es la duración entre el momento en que se realiza una petición HTTP y la recepción del primer byte de la página por el navegador. Se compone del tiempo de conexión de socket, el tiempo necesario para enviar la solicitud HTTP y el tiempo para conseguir el primer byte de la página. Según la definición anterior podemos llegar a la conclusión de que el Time To First Byte depende de las capacidades de nuestro servidor y ellas son las que influyen directamente en que este tiempo sea mayor o menor. Aquí os dejo una web en la que podremos medir el Time to First Byte de nuestro sitio. ¿Cómo mejorar el Time To First Byte ? La respuesta es simple, mejorando las capacidades de nuestro servidor o eliminado carga del mismo. En este segundo aspecto es muy importante ver si estamos utilizando herramientas de compresión de códigos JS o CSS ...

Gestionar clics en botones de redes sociales

diciembre 16, 2011

En cualquier sitio web que se implementen los nuevos botones me gusta (like) de Facebook , o +1 de Google , o tweet de Twitter podemos ver que en realidad todos se basan en el mismo sistema, un código javascript que construye un iframe y sobre el cuál es que se carga todo el código para gestionar nuestras interacciones en cada una de estas redes sociales. Acceder al contenido de estos iframe desde nuestra web con javascript no está permitido porque da un error del tipo Unsafe JavaScript attempt to access frame with URL tu dominio from frame with URL dominio del script. Domains, protocols and ports must match . Lo que viene a decirnos este error es la prohibición de acceder mediante javascript a un iframe con un dominio distinto al nuestro por temas de seguridad. Teniendo en cuenta esto la única solución que nos queda es depender de las interfaces de programación de aplicaciones (APIs) de cada una de estas redes sociales y ver si implementan funciones callback para capturar este t...

Desventajas de minimizar código JavaScript con Minify

noviembre 02, 2011

Minify es una utilidad escrita en PHP5 que permite eliminar los caracteres innecesarios del código fuente sin cambiar su funcionalidad permitiendo incluir en una sola línea de código múltiples archivos JavaScript o CSS reduciendo con ello el tiempo de carga de nuestra página web. Pero todo lo que brilla no es oro y aunque llevo tiempo utilizando Minify hay algunas pegas a tener en cuenta: 1.- hay que tenerlo instalado en el entorno real y en el de desarrollo porque sino a la hora de combinar los archivos hay que estar descartando estas líneas de código 2.- los debuggers de los principales navegadores son incapaces de encontrar correctamente el archivo y en algunos casos la línea de error cuando se produce un fallo en JavaScript lo cual hace más complicada la tarea de corrección de errores 3.- puede dar problemas con las codificaciones de los archivos comprimidos 4.- debes tener configurado apache correctamente con una librería adicional (redirect) que no viene instalada por defecto 5...