Páginas

domingo, 12 de septiembre de 2021

Javascript: Ejemplos de grupos y rangos

Buscar cadenas mediante grupos y rangos.


Caracter Significado
x|y Busca coincidencia de 'x' o 'y'
[xyz] Busca coincidencia 'x, 'y' o 'z'
[x-z] Busca coincidencia del rango desde 'x' hasta 'z'
[^xyz] Encuentra coincidencia si no hay ningún caracter del patrón, en este caso: ni 'x', ni 'y' ni 'z'
[^a-c] Encuentra coincidencia si no hay ningún caracter del rango. En este caso: ni 'a, no 'b', ni 'c'
(x) Busca coincidencia del grupo. En este caso 'x'
/n Siendo n un número positivo es una referencia posicional al grupo
(?xyz) Busca xyz y establece el nombre name para ese grupo. Luego se puede volver a utilizar
(?:x) Busca x el grupo no se puede volver a utilizar

Ejemplos



Espero que esto ayude

lunes, 30 de agosto de 2021

Javascript: Ejemplo de Promise y Async/Await, manejando la asincronía

Ejemplo de uso del objeto Promise y de las palabras Async/await para manejar la asincronía no bloqueante que es característica de javascript.

El ejemplo contiene tres piezas de código:


1) sincronizar1.js

En este código se muestra como la función setTimeout desencadena una función asíncrona no bloqueante que asigna valor a una variable global. El resultado de ejecutar sincronizar1.js es:

El resultado es que cuando se muestra la variable todavía no ha pasado un segundo y contiene el valor inicial, es decir nada.

2) sincronizar2.js

En este código se muestra el mismo ejemplo y cómo con un objeto de tipo Promesa se accede al valor de la variable global cuando esta está cargada.

El resultado es que cuando se ejecuta el método .then del objeto Promise, la variable ya está cargada con el valor 'Buenos dias'. Pero el console log del método .then se ejecuta al final.

3) sincronizar3.

En este código se muestra el mismo ejemplo combinando la Promesa con el uso de las palabras clave Async/await, consiguiendo ejecutar las sentencias en el orden deseado.

El resultado es que además de que la variable contiene 'Buenos días' las sentencias console se muestran en orden 1, 2 y luego 3.

Referencias

Puedes obtener la explicación en mi video en youtube
Puedes obtener el código javascript en Mi repositorio de Github

lunes, 23 de agosto de 2021

Herramientas para desarrolladores de Chrome

El desarrollo de software en cualquier lenguaje de programación o entorno de trabajo entraña dificultades.

Para escribir código se utilizan IDEs (integrated development environment) que suministran al programador herramientas para facilitar su trabajo. Entre estas herramientas están las de depuración (debug). Los debuggers son muy útiles para los desarrolladores puesto que incorporan funcionalidad para ayudarle a buscar errores y problemas que de otra forma tendrían que buscar de forma manual e intuitiva.

En el caso de desarrollos para aplicaciones web, las herramientas de depuranción de los IDEs sirven para depurar el código que genera html, css y javascript que se envía al browser.Una vez que ese código es generado y enviado la única forma de depurarlo es en el browser que es el que lo está inerpretando. 

Google Chrome incorpora herramientas de depuración. Los demás browsers también tienen este ripo de herramientas pero las mas completas son las de Chrome. Con Chrome sobre una página html cargada en el browser se pueden analizar numerosos aspectos que ayudan a localizar malos funcionamientos y errores. Las herramientas de desarrollador de Chrome, permiten: 

  • Localizar un elemento del DOM (Document Object Model) tanto desde la vista del usuario como desde el código fuente.
  • Saber que estilos se están aplicando a cada elemento. Si se están aplicando de forma directa (inline), por hoja de estilo, porque se han heredado de algún elemento padre o porque son el valor de defecto.
  • Consultar los mensajes que el browser genera o los que genera el programador utilizando el objeto "console" de javascript.
  • Se puede consultar el número de línea en el que se ha producido un error para subsanarlo.
  • Se pueden poner puntos de ruptura (breakpoints) para detener el programa donde convenga al programador y luego avanzar instrucción a instrucción para ver como progresa el flujo de control del programa.
  • Se puede consultar el contenido de las variables e incluso modificar su valor para observar el comportamiento del programa con los nuevos valores almacenados.
  • Se puede saber el tiempo que tarda en cargarse cada elemento de la página.
  • etc.

Si quieres ver una pequeña intro al funcionamiento de estas herramientas, puedes reproducir los videos Herramientas de desarrollador de Chrome (1ª parte) aquí y Herramientas de desarrollador de Chrome (2ª parte) aquí

Espero que esta información te sea de utilidad y te ayude a escribir código siendo más feliz. Y serás más feliz porque si lo utilizas entenderás mejor lo que está sucediendo trás tú programación.

 

martes, 10 de agosto de 2021

Enseñando scratch a los niños

Crear programas para ordenadores o teléfonos desarrolla las habilidades para la resolución de problemas lógicos. Si se enseña a programar a un niño se potencian estás habilidades a una edad temprana que es cuando mejor se aprende y este aprendizaje es muy útil para mejorar sus procesos cognitivos.

El Instituto Tecnológico de Massachussets (MIT) ha desarrollado un lenguaje de programación visual que permite a los pequeños de 8 a 16 años aprender los conceptos de programación de ordenadores. Existe una versión junior, ScratchJr que está diseñado para niños de 5 a 7 años.

Con Scratch se pueden hacer programas muy sencillos, pero a la vez incorpora estructuras que tienen los lenguajes de programación profesionales. Se programa con bloques que están agrupados por las acciones que realizan y están identificados por colores. Se puede mover los objetos por la pantalla, agrandarlos y empequeñecerlos, hacer que desaparezcan y aparezcan, que emitan sonidos, que muestren bocadillos, tomar decisiones condicionales, ejecutar bucles, crear variables, etc. Se aprende rápido lo más básico y también hay campo para profundizar.

La plataforma está además preparada para que los pequeños programadores puedan compartir sus creaciones con otros. Además hay múltiples sitios donde se ofrecen ideas para avanzar en el aprendizaje en forma de retos. Estos retos consisten en proyectos ya llevados a cabo que se presentan para que el programador los intente reproducir y sobre los cuales se puede consultar su código para aprender como están hechos.

En este artículo quiero presentaros un canal de youtube en el que he dejado unos videos para iniciar a los adultos en el uso de Scratch. El objetivo de estos videos es que una vez que entiendas como Scratch funciona, puedas transmitirselo a los pequeños que tengas alrededor.

Los videos están en Introducción a Scratch y hay otros dos que enseñan un proyecto más completo: El gato se va al castillo (Parte 1) y El gato se va al castillo (Parte 2).

Para acceder a Scratch pulsa aquí

domingo, 6 de junio de 2021

JavaScript: Ejemplos de aserciones en expresiones regulares

Incluyen límites para cadenas, palabras y caracteres. También búsquedas de cadenas que están precedidas o seguidas por otras subcadenas.


Caracter Significado
^ Busca coincidencia al comienzo cadena
$ Busca coincidencia al final cadena
\b Busca límites de palabra. Una palabra empieza y termina donde un caracter de palabra no es precedido o seguido por otro caracter de palabra. Se consideran caracteres de palabra las letras mayúsculas y minúsculas del alfabeto latino, los números y el caracter de subrayado.
\B Busca límites de no palabra. Es decir el caracter anterior o siguiente a un caracter son del mismo tipo del propio caracter
x(?=y) Búsqueda hacía delante. Coincide x solo si x está seguida de y
x(?!y) Búsqueda hacía delante negativa. Coincide x solo si x no está seguida de y
(?<=y)x Búsqueda hacía detrás. Coincide x solo si x está precedida de y
(?<!y)x Búsqueda hacía detrás negativa. Coincide x solo si x no está precedida de y

Ejemplos



Espero que esto ayude

miércoles, 12 de mayo de 2021

Javascript: Expresiones regulares

Una expresión regular es un patrón usado para buscar coincidencias de combinaciones de caracteres dentro de otras cadenas de caracteres (strings). En JavaScript, estos patrones son objetos. 

Estos patrones se pueden usar como métodos del objeto tipo RegExp con los métodos exec() y test() y también con objetos String con los métodos match(), matchAll(), replace(), replaceAll(), search() y split(). 

Creación de expresiones regulares

Para crear expresiones regulares existen 2 maneras: 

  • Usando un literal que consiste en un patrón encerrado entre //. 

de esta forma la compilación del patrón se realiza cuando el script se carga. En los casos en los que la expresión regular permanece constante, esta manera mejora el rendimiento.

  • Usando el constructor de RegExp

usando la función constructor la compilación se hace en tiempo de ejecución. Se debe usar esta forma cuando la expresión regular cambia durante la ejecución o no se conoce el patrón de antemano y se obtiene durante la ejecución del script.

Utilizando patrones 

Una expresión regular está compuesta simplemente de caracteres tal como /abc/ o una combinación de caracteres simples y otros especiales tal como /ab*c/. 

En el caso de /abc/ este patrón busca la coincidencia con la cadena abc dentro de la cadena analizada. Por ejemplo: 

 En el caso de /ab*c/, el caracter * es un caracter especial que indica en el patrón que el caracter b en este caso se puede presentar 1 o varias veces. Por ejemplo: 

 

Qué patrones se pueden construir

Entonces un patrón está compuesto por una cadena de caracteres entre barras oblicuas (slashes). Los caracteres pueden representarse a ellos mismos (caracteres simples) o pueden tener un significado especial (carateres especiales). Según la clasificación que hacen en MDN Web Docs de los tipos de caracteres especiales son:

  • Aserciones.- indican el comienzo y el final de líneas y palabras, y otros patrones. Ejemplos de aserciones
  • Clases de caracteres.- Distingue diferentes tipos de caracteres. Por ejemplo, distinguir entre letras y dígitos.
  • Grupos y rangos.- indican grupos y rangos de caracteres. Ejemplos de grupos y rangos
  • Cuantificadores.-  indica el número de repeticiones.
  • Caracteres de escape de propiedades Unicode.- indica por ejemplo, letras mayúsculas y minúsculas, símbolos matemáticos y de puntuación.

Conclusiones

Merece la pena que todo programador le dedique algunas hora a aprender como se manejan las expresiones regulares. Esto ayuda a que en el momento de tener que usarlas se manejen con soltura y no sean una piedra en el camino para poder entender o construir el código. Y no se aprenden en 5 minutos.

 

lunes, 3 de mayo de 2021

Cómo conseguir una buena arquitectura y un buen diseño del software

Robert C. Martin en su libro “Clean Architecture: A Craftsman's Guide to Software Structure and Design” muestra una perspectiva muy acertada de lo que es la arquitectura y el diseño del software. En el capítulo 1 dice:

“La palabra arquitectura se usa a menudo en el contexto de algo de alto nivel que es contrapuesto a algo de bajo de nivel, mientras que diseño parece que implica decisiones de bajo nivel. Esta separación entre arquitectura y diseño no tiene sentido si se mira a lo que hace un arquitecto de software en su día a día.

Considere el arquitecto que diseño mi nueva casa. ¿Tiene la casa una arquitectura? Por supuesto que la tiene. ¿Y en qué consiste esa arquitectura? Pues contiene la forma de la casa, el aspecto exterior, la elevación del terreno y el diseño de los espacios y habitaciones. A medida que analizo los diagramas que el arquitecto me ha preparado, veo una inmensa cantidad de detalles. Veo donde se colocará cada interruptor, cada enchufe y cada punto de luz. Veo que interruptores manejan que luces. Veo dónde está colocado el horno y el tamaño y la ubicación del calentador de agua y la bomba de desagüe. Veo descripciones detalladas de cómo se construirán las paredes, los techos y los cimientos.

En resumen, veo todos los pequeños detalles que dan soporte a las decisiones de alto nivel. En definitiva los detalles y las decisiones de alto nivel son parte de un todo que es la casa que se construirá.

Lo mismo pasa con el diseño de software. Los detalles de bajo nivel y las estructuras de alto nivel son parte de un todo. Forman un tejido continuo que define la forma del sistema. No se puede tener uno sin el otro, por lo tanto no hay una clara línea que los divida. Son realmente un continuo de toma de decisiones desde el nivel de detalle más alto al más bajo.

El objetivo de la arquitectura del software no es más ni menos que minimizar los recursos humanos necesarios para construir y mantener el sistema.

La medida de la calidad de la arquitectura y el diseño del software puede ser simplemente la medida del esfuerzo requerido para cumplir con los requisitos del cliente. Si el esfuerzo es pequeño, y permanece bajo a lo largo de la vida del sistema el diseño es bueno. Si el esfuerzo crece con cada nueva versión, el diseño es malo. Es tan simple como esto.”

La forma de conseguir una buena arquitectura para un sistema software es más compleja a medida que el sistema a construir es más complejo. La complejidad no es la misma si estamos construyendo una web para la venta online de una pequeña librería que si el sistema es una app para acceder a un banco en la cual podemos hacer todo tipo de operaciones, desde transferencias de dinero, abrir una cuenta, invertir en fondos, etc . Cuanto más complejo es el sistema, más importante es que la arquitectura y el diseño sean de calidad.

Cuando se trata de sistemas complejos es difícil plantear una arquitectura idónea al comienzo de la construcción. Esto se debe a que al inicio todo son hipótesis, no hay nada construido sobre lo que probar la efectividad de las estructuras y abstracciones ideadas. Es por esto que actualmente existe una corriente dentro de los “Métodos Ágiles” que invita a crear la arquitectura poco a poco, sin empezar por establecer estructuras rígidas desde el comienzo del desarrollo. Lo importante es encontrar un equilibrio y no implantar estructuras más complejas, ni más simples de lo necesario.

Un inicio de lo que supone construir una arquitectura flexible y ajustada a las necesidades del sistema que se va a construir la aportó Peter De Grace con la Arquitectura Sashimi en 1990 en el libro “Wicked Problems, Righteous Solutions: A Catalog of Modern Software Engineering Paradigms” que se puede leer de forma gratuita registrándose en la web Internet Archive.

Para sistemas construidos con lenguajes basados en el paradigma de Orientación a Objetos, que son los que actualmente están más en boga, existen arquitecturas de referencia acuñadas por reconocidos expertos. Estas arquitecturas recomiendan estructuras genéricas altamente cohesionadas y poco acopladas que hacen uso de las herramientas suministradas por el paradigma OO, concretamente uno de los elementos más extensivamente usado son los interfaces.

Estás son:

  • Arquitectura Onion de Jeffrey Palermo. Se puede consultar en Arquitectura onion
  • Arquitectura Hexagonal de Alistar Cockburn. Se puede consultar en Arquitectura hexagonal
  • Clean Arquitecture de Robert C. Martin que está ampliamente explicada en su libro “Clean Architecture: A Craftsman's Guide to Software Structure and Design: A Craftsman's Guide to Software Structure and Design” que se puede comprar en:

sábado, 23 de enero de 2021

JavaScript: Ejemplo de prueba unitaria con Mocha y Chai

Mocha es un framework de pruebas para JavaScript. Se puede utilizar tanto cuando se ejecutan las funciones de JavaScript en Node, como si ejecutan en un browser.

Con Mocha se pueden escribir funciones que prueban las funciones de los sistemas web desarrollados. Esta práctica consigue automatizar las pruebas de manera que cada vez que se tienen repetir las pruebas sobre el código desarrollado solo es necesario "apretar un botón". Se obtienen automáticamente los resultados permitiendo saber al desarrollador si han ido bien o mal. En el caso de que haya habido resultados incorrectos de las funciones de prueba, estás indicarán exactamente en que parte del código se ha producido el resultado incorrecto y el motivo que lo ha provocado. Esta información es muy valiosa cuando estamos haciendo frente a miles o decenas de miles de líneas de código que están intimamente relacionadas. Muchas veces cambiar algo en una línea, resulta que provoca que falle algo en otra parte del código de forma inesperada. Esto es debido a el acoplamiento entre funciones, que no es deseable pero es inavitable. Las pruebas no resuelven al 100% este problema, pero ayudan mucho. Por ejemplo en las pruebas de regresión que sirven para comprobar que lo que estaba funcionado no ha dejado de funcionar cuando se modifica el código.

En este artículo se muestra un ejemplo de uso de Mocha para probar una función que obtiene usuarios desde el API Rest https://dummyapi.io/data/api . La función a probar es:

A esta función con Mocha se le va a construir una función de prueba. Esta función es:

Esta función de prueba contiene pruebas para el fichero readUser.js que se especifica con describe('readUsers: ', (). En este fichero hay una única función que es getResource y sus pruebas se especifican con describe('getResource', (). Sobre esta función se realizan 5 casos de prueba, cada uno de ellos descritos con it ('should... En should hay una autoexplicación textual del contenido de la prueba. A continuación se ejercita (ejecuta) la función y con expect y assert se comprueba el resultado de la misma. Es habitual utilizar alguna librería para mejorar la legibilidad de los expect y los assert con los frameworks de prueba. En este ejemplo se está usando Chai.

Para ejecutar la prueba se utiliza el comando:

Y el resultado de la prueba se muestra de la siguiente manera:

Conclusión

La construcción de pruebas automatizadas proporciona una red de seguridad a los sistemas. Esto se debe a que gracias a las pruebas los desarrolladores pueden modificar el código apoyandose en programas que desvelan si al cambiar alguna línea se ha arreglado algo pero se ha estropeado otra parte de forma imprevista. Así los sistemas se mantienen al día con mucho menos esfuerzo y se consigue mantenerlos firmes y robustos a lo largo del tiempo.

Agradecimientos

Este ejemplo lo he podido construir gracias a lo que he aprendido en un curso de Dimitris Loukas llamado JavaScript Testing Best Practices.

Código

El código se puede descargar en https://github.com/MarisaAfuera/exampleMochaChai


sábado, 2 de enero de 2021

JavaScript: Ejemplo de función reduce de array

La función reduce trata los elementos de un array con una función que suministra el programador, siendo su objetivo procesar dichos elementos para obtener un único valor.

Este post muestra un ejemplo codificado de tres maneras distintas con la intención de que sea comprensible para el máximo número de programadores. Las características de las tres formas son:

  • Codificado con arrow function
  • Codificado con función anónima 
  • Codificado con función clásica

El ejemplo aplica reduce sobre un array de objetos que representan comunidades autónomas con nombre(propiedad name) y población(propiedad population). Con la función reduce se suministra una función que suma las poblaciones de cada una de las comunidades autónomas para acabar obteniendo la población total. Notese que la función reduce carga en accumulator un elemento con la misma estructura que los del array que está tratando, es decir un objeto con las propiedades name y population.

Codificado con función arrow


Codificado con función anónima


Codificado con función clásica


La función reduce tiene mas posibilidades siendo posible enviar más parámetros a la función desarrollada por el programador. Para más información Función reduce

Espero que sea de ayuda. 

Ciao

JavaScript: Ejemplo de función filter de array

El método filter() se aplica sobre un array y devuelve un nuevo array que contiene los elementos que cumplan la condición establecida por el programador en la función invocada por filter.

Este post muestra un ejemplo codificado de tres maneras distintas con la intención de que sea comprensible para el máximo número de programadores. Las características de las tres formas son:

  • Codificado con arrow function
  • Codificado con función anónima 
  • Codificado con función clásica

En el ejemplo se trata un array screens que contiene objetos que representan pantallas. De cada pantalla se conoce la marca (propiedad brand), los píxeles horizontales (propiedad horizontalPixel) y los píxeles verticales (propiedad verticalPixel). La función filter procesa cada pantalla seleccionando solo aquellas que tienen más de 1200 píxeles horizontales.

Codificado con arrow function

Codificado con función anonima

Codificado con función clásica 

En este último caso parece como que decideIfBig recibe el parámetro (objeto de tipo screens) 'automágicamente'. Cuando pasamos la función a filter no indicamos que parámetros puede usar. Lo que ocurre es que filter de forma predefinida envía parámetros a la función decideIfBig, en este caso el elemento de screens que es el array que se está procesando. Para más información Función filter

Espero que esto ayude.

viernes, 1 de enero de 2021

JavaScript: Ejemplo de función map de array

La función map permite operar con los elementos de un array sin necesidad de hacer que el programador tenga que realizar operaciones de bucle for o foreach. La función map así facilita el trabajo de los programadores que no tienen que controlar las iteraciones y sus índices, que en muchos casos son el origen de errores inesperados tales como bucles que nunca acaban o tratamientos que se salen de los límites del array.

Supongamos que tenemos el siguiente array:


se requiere tratar cada elemento para añadir la propiedad priceByMeter, que se obtiene de dividir el valor de price por el de meters. Con la función map el código podría ser como sigue:


en este código se define una nueva variable a la que se le asigna el resultado de aplicar la función map al array flats. La función map aplica una función anónima que recibe el parámetro flat, este parámetro representa a cada uno de los elementos de flats que en este caso son objetos. Sobre cada uno de los 3 elementos de flats se aplica la función que devuelve un objeto nuevo robj.  En robj cargamos las propiedades del objeto de flats y añadimos la nueva propiedad priceByMeter calculada con price y meters. La función anónima devuelve el nuevo objeto, que para cada elemento de flats incorpora la nueva propiedad. El resultado es que pricebymeter es un nuevo array que contiene los siguientes elementos:


Conclusión

La función map permite hacer código que se ocupa más de decir lo que hay que hacer que de decir como se ha de hacer. Esto es el camino hacía la programación funcional que produce código más fácil de entender. Pero esto es otra historia.

Espero que este ejemplo sirva para que algún hacendoso programador pueda comprender está función no gastando mucho de su apreciado tiempo.