Learn for free

 

Se encuentran abiertas las inscripciones para los cursos Gugler!!!

¡Tengo grandes noticias! Estoy emocionado de anunciar que ya están abiertas las inscripciones para los tan esperados cursos Gugler. Si estás buscando avanzar en tu carrera, aprender nuevas habilidades, o simplemente profundizar tus conocimientos en áreas tecnológicas, ¡estos cursos son para ti!

Inscripciones abiertas del segundo cuatrimestre 2024. Inscripciones.gugler.com.ar

Curso de Gugler

 

Libros Gratuitos de Web Code Geeks

 

Bootstrap Programming Cookbook Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons,...     HTML5 Programming Cookbook HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. Its core aims have been to improve the language with support...     Apache Hadoop Cookbook Apache Hadoop is an open-source software framework written in Java for distributed storage and distributed processing of very large data sets on computer clusters built from commodity...     Amazon S3 Tutorial Amazon S3 (Simple Storage Service) is a web service offered by Amazon Web Services. Amazon S3 provides storage through web services interfaces (REST, SOAP, and BitTorrent). Amazon...

Webinario Introducción al Frontend - Gugler Lab

Te invitamos a participar del Webinario Introducción al Frontend. El mismo se realizará el día Miércoles 31 de Marzo de 19:00 a 20:30 horas.

Hablaremos sobre maquetación web utilizando las últimas novedades de HTML5, CSS3 y frameworks CSS.

El acceso es libre y gratuito.

Para presenciar el evento diríjase al siguiente link: Webinario Introducción al Frontend, ingresando con su nombre y apellido.

Te esperamos !!!

HTML + javascript + Haskell = ELM, parte 11

Este es el ultimo post de esta serie de posts. Por supuesto vamos a seguir jugando con ELM.

Lo más interesante de ELM es su capacidad de dibujar, por lo tanto vamos a hacer una pequeña aplicación donde se dibujan 2 botones y un circulo. Y los botones cambian la posición del circulo :

--Importo todo lo necesario.
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Html.Events exposing (onClick)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

-- Definimos una app con una vista y una función update.
main =
  Browser.sandbox { init = 50, update = update, view = view }
   
type Msg = Increment | Decrement

update msg m =
  case msg of
    Increment ->
      m + 10

    Decrement ->
      m - 10

-- La vista dibuja los botones y el circulo.
view model =
  div []
    [ button [ onClick Decrement ] [ Html.text "-" ]
    , 
       svg
       [ viewBox "0 0 400 400"
       , width "400"
       , height "400"
       ]
       [ circle
        [ cx (String.fromInt model)
        , cy "50"
        , r "40"
        , fill "red"
        , stroke "black"
        , strokeWidth "3"
        ]
        []
       ]
    , button [ onClick Increment ] [ Html.text "+" ]
    ]

Si quieren probarlo pueden hacerlo acá : https://elm-lang.org/try

Y creo que esta es la frutilla de la torta.

Dejo link : https://guide.elm-lang.org/

HTML + javascript + Haskell = ELM, parte 10

En Elm, podemos dibujar en el lienzo con una biblioteca gráfica completa. Comenzamos con un collage con dimensiones establecidas, y luego construimos formas. Podemos transformar las formas al moverlas, escalarlas o rotarlas.

La figura muestra un auto simple. Lo describiremos en términos de funciones. Como era de esperar, utilizaremos una combinación de estructuras de datos y funciones para hacer lo que queramos.

import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)

carBottom = filled black (rect 160 50)
carTop =
 filled black (rect 100 60)
 tire = filled red (circle 24)

main = collage 300 300
        [ carBottom
        , carTop |> moveY 30
        , tire |> move (-40, -28)
        , tire |> move ( 40, -28) ]

Primero, definimos algunas formas básicas. Definiremos las dimensiones básicas de las formas y, de forma predeterminada, se mostrarán en el medio del lienzo. main es solo un collage, que toma un ancho, una altura y una lista de formas, llamadas formas en Elm. Cada elemento de la lista es solo una forma. Por ejemplo, carTop |> moveY 30 es solo un rectángulo movido 30 píxeles verticalmente.

En este ejemplo particular, la figura es estática. Con Elm, animar esa figura es casi trivial. Digamos que tenemos un rectángulo con una forma que se ve así:

filled black (rect 80 10)

Podemos animar la paleta mapeando Mouse.x en la función que dibuja esta paleta, así:

import Color exposing (..)

import Graphics.Collage exposing (..)

import Graphics.Element exposing (..)

import Mouse

import Window

import Signal

drawPaddle w h x =

   filled black (rect 80 10)

     |> moveX (toFloat x - toFloat w / 2)

     |> moveY (toFloat h * -0.45)

display (w, h) x = collage w h

     [ drawPaddle w h x ]

main = Signal.map2 display Window.dimensions Mouse.x

En Elm solo nos preocupamos por dibujar la paleta en este momento y dejar que la entrada del usuario determine dónde moverla. 

HTML + javascript + Haskell = ELM, parte 9

Los lenguajes funcionales son excelentes para transformar texto. Elm también es excelente para capturar texto. Aquí hay un ejemplo que toma algo de entrada, lo manipula y lo pone en la pantalla, usando un flujo HTML:

import String
import Html exposing (Html, Attribute, text, toElement, div, input)
import Html.Attributes exposing (..)
import Html.Events exposing (on, targetValue)
import Signal exposing (Address)
import StartApp.Simple as StartApp

--Importamos las bibliotecas que necesitaremos. String nos permite manipular cadenas, y Html nos da
-- acceso a varios aspectos de HTML, incluidos eventos, divs y campos de entrada.

 main = StartApp.start { model = "", view = view, update = update }

--Nuestra función principal de una línea inicia nuestra aplicación, inicializando con una cadena
--vacía, presentando una vista y manejando actualizaciones con nuestra función de actualización, que
--se llamará cada vez que cambie nuestro campo de entrada.

 update newStr oldStr = newStr

--A continuación, nuestra función de actualización trivial simplemente devuelve el nuevo valor del
--campo de entrada cada vez que el campo de entrada se actualiza.

 shout text = String.toUpper text
 whisper text = String.toLower text
 echo text = (shout text) ++ " " ++ (whisper text)

--A continuación, definimos un par de funciones simples para trabajar con texto, las funciones de
--grito y susurro. Los usamos para construir una función de eco para transformar el texto. Estas
--funciones no saben nada sobre las interfaces de usuario. Solo funcionan en datos de cadena sin
--procesar.

 view address string =
div []
     [ input
     [ placeholder "Speak"
       , value string
       , on "input" targetValue (Signal.message address)
       , myStyle
      ]
     []
  , div [ myStyle ] [ text (echo string) ]
]
myStyle = style [ ("width", "100%") ]

--La siguiente tarea es construir nuestra página HTML. Agregamos un control de entrada y un div
--que contendrá nuestro texto modificado. El control de entrada simplemente tiene los elementos
--HTML que Elm necesita para representar el control. La función on establece una señal que
--contendrá actualizaciones del campo de entrada. myStyle devuelve la hoja de estilo para nuestros
--elementos HTML. La función div crea un div HTML con los contenidos y el estilo especificados.

Puede parecer un poco extraño al principio, pero la visión del mundo de Elm es el complemento perfecto para la programación web front-end. Cada interfaz de usuario es solo un flujo de entradas de usuario transformadas

HTML + javascript + Haskell = ELM, parte 8

Seguimos con el post anterior.

Uno de los problemas más comunes de la interfaz de usuario es encontrar dónde hace clic un usuario.

Usemos la función sampleOn. Esa función nos permite muestrear una señal cuando se actualiza otra, como esta:

import Graphics.Element exposing (show)
import Mouse
clickPosition = Signal.sampleOn Mouse.clicks Mouse.position
main = Signal.map show clickPosition

Construimos dos señales, clickPosition y main. Primero, creamos una señal con sampleOn. Cuando la señal Mouse.Clicks se actualice, probaremos la posición más reciente con Mouse.position. El resultado es una nueva señal que devuelve la posición del mouse y cambia cada vez que el usuario hace clic en el mouse. Luego, simplemente construimos nuestra señal principal. Mapeamos show en nuestra señal clickPosition. Sencillo. Podemos muestrear los controles de entrada de la misma manera.

O, supongamos que está implementando el desplazamiento con una barra de desplazamiento. Necesita saber qué tan lejos está el mouse en una página, así:

import Graphics.Element exposing (show)

import Mouse

import Window

div x y = show ((toFloat x) / (toFloat y))

main = Signal.map2 (div) Mouse.y Window.height

Ejecútelo y desplácese en el lado derecho para obtener algo como esto:

0.42973977695167286

Este ejemplo usa map2. Al igual que map, esta función asigna funciones a señales, pero usa dos señales y funciones de dos argumentos. Primero, para simplificar las conversiones de tipos, creamos una versión de división que toma enteros y devuelve texto. A continuación, usamos map2 para mapear div en dos señales, Mouse.y y Window.height. Piense en cómo se vería un programa JavaScript similar. 

Monitorear las entradas del usuario es un trabajo funcional.

HTML + javascript + Haskell = ELM, parte 7

Seguimos con el post anterior.

Agregaremos un par de funciones para contar la cantidad de interacciones con el mouse. En lenguajes funcionales como Elm, debes aprender trucos para manejar el estado. Hemos visto cómo las señales pueden ayudar a acceder a cosas como la posición del mouse que cambia con el tiempo y cómo usamos la recursividad para procesar listas. Gestionamos el estado por la forma en que estructuramos nuestras funciones. Las funciones de folds, que quizás conozcas de Lisp o Haskell, son un buen ejemplo. Toman una función de dos argumentos, un valor inicial y una lista. Aquí hay un ejemplo de foldl en Elm:

> foldl (+)  0  [1, 2, 3]
6 : number

Esto es lo que sucede en cada paso:

• fold (+) 0 [1, 2, 3]. fold toma el valor inicial de la lista, 1, y el acumulador, 0, y los suma, devolviendo 1, y usa ese número, con el resto de la lista, llamando a fold nuevamente.
• fold (+) 1 [2, 3]. Elm toma el valor más a la izquierda de la lista, 2, y el acumulador, 1, y los pasa a la función (+), devolviendo 3.
• fold (+) 3 [3]. Llamamos (+) con el acumulador 3 y el elemento de lista más a la izquierda de 3, devolviendo 6, y hemos terminado.

Ahora, creamos una señal con foldp. Esa señal agrega el acumulador, llamado presses, al valor x de la señal de Keyboard.arrows. Luego podemos asignar ese valor a la función show. Ahora, cuando ejecute la aplicación, obtendrá un total de presses. 

Usemos el mismo principio general para contar los movimientos del mouse. Signal.map aplica una señal a una función. Signal.foldp se pliega sobre una señal:

import Mouse

import Graphics.Element exposing (show)

count signal = Signal.foldp (\_ n -> n + 1) 0 signal

main = Signal.map show (count Mouse.position)

La función de conteo toma una señal y agrega una cada vez que la señal cambia. foldp funciona igual que foldl, pero en lugar de doblar una lista desde la izquierda, foldp se pliega a través del tiempo. Nuestra función foldp toma una función anónima que agrega uno a un valor, comienza con un valor inicial de 0 y proporciona una señal. Nuestra nueva señal tendrá valores que comienzan con 0 que aumentan cada vez que se actualiza la señal. Podemos cambiar fácilmente el programa para contar los clics del mouse:

import Mouse

import Graphics.Element exposing (show)

main = Signal.map show (count Mouse.clicks)

count signal = Signal.foldp (\_ n -> n + 1) 0 signal

En este caso, la función de conteo cuenta el número de actualizaciones de señal, que son clics del mouse. Puede comenzar a ver cómo podemos escribir código que respete las reglas de la programación funcional, pero que sea reactivo y fácil de entender.

Veamos cómo funcionarían las señales del teclado:

import Graphics.Element exposing (show)

import Keyboard

main = Signal.map show Keyboard.arrows

Map actualiza el texto cuando cambia la señal, por lo que obtenemos un programa limpio que nos dice el estado de las teclas de flecha, en una forma que podemos usar fácilmente. Como podemos componer con funciones, podemos ser más sofisticados.

HTML + javascript + Haskell = ELM, parte 6

Seguimos con el post anterior.

Elm fue construido desde cero para manejar los aspectos más difíciles del desarrollo de la interfaz de usuario. Se puede utilizar para crear una aplicación comercial con controles de interfaz de usuario o un juego, debe poder reaccionar ante los eventos. De hecho, todo lo que haces es una reacción a algún evento. El programa típico de JavaScript se basa en enviar eventos a través de funciones de callbacks, lo que hace que los programas sean mucho más receptivos pero a un costo. Son demasiado difíciles de leer. Aquí hay un ejemplo típico usando la biblioteca JQuery con JavaScript que le permite tomar la posición del mouse:

$(document).ready(function () {
       var position = {'x': 0, 'y': 0};
      $(document).bind('mousemove', function(event) {
                   position = {'x': event.pageX, 'y': event.pageY};
       });
       setInterval(function () {
      // custom position code
      }, seconds * 1000);
});

Comprender ese código requiere un poco de experiencia. Cuando se carga la página, recibimos una devolución de llamada lista. En ese momento, vinculamos el evento mousemove a una función que establece una variable de posición. Luego, a intervalos específicos, tenemos otra función de callback que utiliza la posición. Tenga en cuenta que nuestro código vincula funciones anónimas a eventos. Dicho de otra manera, estamos poniendo JavaScript a cargo de la organización del código. A esta estrategia de programación de adentro hacia afuera la llamamos inversión de control.

Para una característica tan trivial, ese código es demasiado complejo, pero es una compensación. Obtenemos una mejor capacidad de respuesta ya que este programa cambiará la posición del mouse cada vez que el usuario mueva el mouse. Cambiamos la simplicidad. El problema es que realmente necesitamos ambos.

import Graphics.Element exposing (..)

import Mouse

main = Signal.map show Mouse.position

La directiva de exposición nos permite mostrar sin especificar el módulo. Luego, haga clic en el botón de compilación. Verás una salida similar a esta:

(29, 162)

Eso es mucho más simple. Importamos los módulos Graphics.Element y Mouse, y luego declaramos la función principal.

Conceptualmente, la señal Mouse.position representa los valores de xey que varían con el tiempo. Signal.map aplica una señal a una sola función.

En el código anterior, la señal Mouse.position representa una tupla que contiene la posición del mouse a lo largo del tiempo. Nuestra función es show, que se convierte en texto.

Mouse.position se "disparará" cada vez que el mouse se mueva, y Signal.map volverá a evaluar show con la nueva posición del mouse. Curiosamente, el resultado es una nueva señal!

Mirando la parte inferior de la ventana, puede ver que la principal es en realidad una señal, una que mostramos en la pantalla. Eso significa que Elm actualizará la ventana cada vez que se mueva la posición del mouse.

No hay call back ni inversión de control. Simplemente usamos una señal, la convertimos a texto y mapeamos el valor actual cuando la señal cambia. 

HTML + javascript + Haskell = ELM, parte 5

Seguimos con el post anterior.

Elm incluye Pattern Matching, Puede usarlo para simplificar algunas definiciones de funciones:

> first (head::tail) = head
<function> : List a -> a
> first [1, 2, 3]
1 : number

Se deberá cubrir todos los casos o se puede tener este error:

> first []

Error: Runtime error in module Repl (on line 23, column 22 to 26):

Non-exhaustive pattern match in case-expression.

Make sure your patterns cover every case!

Como head :: tail no coincide [], Elm no sabe qué hacer con esta expresión. Usar una coincidencia de patrón no exhaustiva es una de las pocas formas en que puede bloquear un lenguaje de la familia ML y es totalmente evitable.

Elm es un lenguaje curry como Haskell :

> add x y = x + y

<function> : number -> number -> number

Observe el tipo de datos de la función. Es posible que haya esperado una función que tome dos argumentos de tipo número y devuelva un tipo de número. Así es como funciona el curry. Elm puede aplicar parcialmente add, lo que significa que puede completar uno de los dos números, así:

> inc = (add 1)

<function> : number -> number

Acabamos de crear una nueva función parcialmente aplicada llamada inc. Esa nueva función aplica uno de los argumentos para agregar. Completamos x, pero no y, así que Elm básicamente está haciendo esto:

addX y = 1 + y

Curry significa cambiar las funciones de múltiples argumentos a una cadena de funciones que cada una toma un solo argumento. Ahora, podemos manejar el curry nosotros mismos. Recuerde, las funciones currificadas no pueden tomar más de un argumento a la vez:

> add x y = x + y

<function> : number -> number -> number

> add 2 1

3 : number

> (add 2) 1

3 : number

Además de curring, puedes usar funciones parcialmente aplicadas para crear algunos algoritmos geniales. 

Elm infiere que vas a hacer aritmética con números. Elm usa el número de clase de tipo porque esa es la clase de tipo que admite el operador +. Sin embargo, no está limitado a enteros:

> add 1 2

3 : number

> add 1.0 2

3 : Float

> add 1.0 2.3

3.3 : Float

Y esto funciona porque Elm es polimórfico. Calcula el tipo más general que funcionará, en función de su uso de operadores. De hecho, puede ver el mismo comportamiento con el operador ++:

> concat x y = x ++ y

<function> : appendable -> appendable -> appendable

Elm asume que la función usa dos elementos anexables, como este:

> concat ["a", "b"] ["c", "d"]

["a","b","c","d"] : [String]

> concat "ab" "cd"

"abcd" : String

Eso es polimorfismo. Como es de esperar, también puede usar polimorfismo con puntos. Digamos que tengo un punto y quiero calcular la distancia al eje x. Eso es fácil de hacer:

> somePoint = {x=5, y=4}

{ x = 5, y = 4 } : {x : number, y : number'}

> xDist point = abs point.x

<function> : {a | x : number} -> number

> xDist somePoint

5 : number

La inferencia de tipos de Elm infiere que x e y son números dentro de un registro. Ahora, puedo pasarlo en cualquier punto:

> twoD = {x=5, y=4}

{ x = 5, y = 4 } : {x : number, y : number'}

> threeD = {x=5, y=4, z=3}

{ x = 5, y = 4, z = 3 } : {x : number, y : number', z : number''}

> xDist twoD

5 : number

> xDist threeD

5 : number

Alternativamente, podría usar la coincidencia de patrones, así:

> xDist {x} = abs x

<function> : { a | x : number } -> number

> xDist threeD

5 : number

Con  Pattern Matching seleccionar el campo x, y el resto del ejemplo funciona de la misma manera. El punto es que los registros también son completamente polimórficos. A Elm no le importa que los registros que utilizamos sean del mismo tipo. Solo necesita el registro para tener un campo x. Estás viendo el poder de un sistema de tipos que hará todo lo posible para detectar problemas reales, pero que se saldrá del camino cuando no haya ninguno.

HTML + javascript + Haskell = ELM, parte 4

Seguimos con el post anteriro.

Como con cualquier lenguaje funcional, la base de Elm es la función. Definir una es trivial. Veamos algunas funciones :

> add x y = x + y
<function> : number -> number -> number
> double x = x * 2
<function> : number -> number
> anonymousInc = \x -> x + 1
<function> : number -> number
> double (add 1 2)
6 : number
> List.map anonymousInc [1, 2, 3]
[2,3,4] : [number]

La sintaxis para crear funciones es muy simple e intuitiva. add es una función con nombre con dos argumentos, x e y. Las funciones anónimas expresan parámetros como \ x, y el cuerpo de la función sigue los caracteres ->.

Como Elixir, Elm tiene el operador de tubería que permite componer funciones, de esta manera:

> 5 |> anonymousInc |> double

12 : number

https://emanuelpeg.blogspot.com/2017/03/pipe-operator-de-elixir.html
Y Factor : https://emanuelpeg.blogspot.com/2019/08/factor.html

Tomamos 5 y lo pasamos como el primer argumento a anonymousInc, para obtener 6. Luego, lo pasamos como el primer argumento para duplicar. También podemos hacer que esa expresión se ejecute de derecha a izquierda:

> double <| anonymousInc <| 5

12 : number

Evan Czaplicki, creador de Elm, dice que obtuvo esta función de F#, que a su vez obtuvo la idea de las tuberías de Unix, por lo que esta idea ha existido por un tiempo, ¡pero es buena!

Al igual que con cualquier lenguaje funcional, hay muchas funciones que le permitirán trabajar con funciones de todo tipo de formas:

> List.map double [1..3]

[2,4,6] : List number

> List.filter (\x -> x < 3) [1..20]

[1,2] : List comparable

[1..3] es un rango. Puede explorar más funciones de la Lista con la biblioteca de listas.

Cuando está componiendo una solución con Elm, puede tener la tentación de codificar cada caso como un cuerpo de función separado como lo haría en Haskell, Erlang o Elixir, pero no se puede :( :

> factorial 1 = 1

<function> : number -> number'

> factorial x = x * factorial (x - 1)

<function> : number -> number

> 

RangeError: Maximum call stack size exceeded

Parece que la segunda llamada reemplazó a la primera. En cambio, debe usar el mismo cuerpo de función y dividir el problema usando mayúsculas y minúsculas o si, de esta manera:

> factorial x = \

|  if | x == 0 -> 1 \

|      | otherwise -> x * factorial (x - 1)

<function> : number -> number

> factorial 5

120 : number

Suficientemente simple. factorial 0 es 1; de lo contrario, factorial x es x * factorial (x-1). Manejaría la recursividad de la lista de la misma manera:

> count list = \

| case list of \

| [] -> 0 \

| head::tail -> 1 + count tail

<function> : [a] -> number

> count [4, 5, 6]

3 : number

La cantidad de elementos de una lista vacía es cero y la cantidad de elementos de cualquier otra lista es 1 más la cantidad del resto. Veamos cómo atacar problemas similares con la coincidencia de patrones.

Por ahora vamos bien, pero seguimos en otro post... 

HTML + javascript + Haskell = ELM, parte 3

Seguimos con el post anteriro.

Construimos tipos para el color y la pieza, y eso estuvo bien perooooooo nuestro ejemplo de ajedrez se volvió un poco más complicado cuando queríamos extraer el color. Lo que realmente necesitamos es una forma de acceder a los campos con nombre. Esa cosa es un registro, y es un compañero natural para los objetos de JavaScript. Digamos que queremos representar una pieza de ajedrez con los campos Color y Pieza:

> blackQueen = {color=Black, piece=Queen}
{ color = Black, piece = Queen } : { color : Repl.Color, piece : Repl.Piece }
> blackQueen.color
Black : Repl.Color
> blackQueen.piece
Queen : Repl.Piece

El Repl. es solo un alcance para los tipos, y el . es forma que llamamos a color es en realidad una función:

> .color blackQueen

Black : Repl.Color

Ahora, podemos acceder a los componentes de nuestro tipo estructurado. Al igual que con muchos lenguajes funcionales, los registros son inmutables, pero podemos crear uno nuevo con campos actualizados, o incluso campos cambiados, como este:

> whiteQueen = { blackQueen | color <- White }

{ color = White, piece = Queen } : { piece : Repl.Piece, color : Repl.Color }

> position = { column = "d", row = 1 }

{ column = "d", row = 1 } : {column : String, row : number}

> homeWhiteQueen = { whiteQueen | position = position }

{ color = White, piece = Queen, position = { column = "d", row = 1 } }

: { piece : Repl.Piece

, color : Repl.Color

, position : { column : String, row : number }

}

> colorAndPosition = { homeWhiteQueen - piece }

{ color = White, position = { column = "d", row = 1 } }

: { color : Repl.Color, position : { column : String, row : number }

}

> colorAndPosition.color

White : Repl.Color

Creamos tres nuevos registros, todos de diferentes tipos, transformando nuestro registro original. 

Por ahora vamos bien, pero seguimos en otro post... 

HTML + javascript + Haskell = ELM, parte 2

Seguimos con el post anteriro. 

elm provee el if tradicional :

 if x < 0 then "too small" else "ok"
"ok" : String

Similar al if de Ruby o al case de otros lengujes podemos escribir lo siguiente :

> x = 5
5 : number
> if | x < 0 -> "too small" \
|      | x > 0 -> "too big" \
|      | otherwise -> "just right"
"too big" : String

La barra invertida es porque estoy usando el RELP y tengo que avisarle de los enteres que no tienen sentido

Este if es muy similar a pattern matchinig pero Elm tiene pattern matching :

> list = [1, 2, 3]
[1,2,3] : [number]
> case list of \
| head::tail -> tail \
| [] -> []
[2,3] : [number]

Esta sentencia devuelve el final de una lista, si existe, las vacia, de otro modo. Se puede ver el uso de pattern matching.

La belleza y el poder de un sistema de tipos se ve cuando constrimos nuestros propios tipos de datos complejos. Veamos un ejemplo, una pieza de ajedrez tiene un tipo y un color. Lo que podemos hacer es lo siguiente :

> type Color = Black | White
> type Piece = Pawn | Knight | Bishop | Rook | Queen | King
> type ChessPiece = CP Color Piece
> piece = CP Black Queen
CP Black Queen : ChessPiece

Un constructor de tipos nos permite construir nuevas instancias de un tipo. Nuestro tipo ChessPiece consta de los caracteres CP, nuestro constructor de tipos, seguido de un Color y una Pieza. Ahora, podemos usar la combinación de mayúsculas y minúsculas para separar la pieza, así:

> color = case piece of \

| CP White _ -> White \

| CP Black _ -> Black

Black : Color

Crearemos un tipo que funcione como Lista. Para esto debe saber que Cons construye una lista, dado un elemento y otra lista :

type List = Nil | Cons Int List

Esta es una definición recursiva, una lista es una lista vacia o una construcción de un elemento y una lista. 

Ese tipo de datos es interesante, pero podemos hacerlo mejor. Podemos definir una lista abstracta, una que pueda contener cualquier tipo de datos, como este: 

type List a = Empty | Cons a (List a)

Es igual que la definición anterior pero con tipo generico a. 

Si desea saber cómo se evalúa una lista en Elm, observe el tipo de datos. Puede representar el tipo para la lista [1, 2] como Cons 1 (Cons 2 Empty).

Ahora, cuando te digo que puedes combinar el encabezado de una lista con la cola, tiene sentido. Cons funciona en tipos en tiempo de compilación. La contraparte en tiempo de ejecución del operador Cons que trabaja con datos es ::, y funciona así :

> 1 :: 2 :: 3 :: []

[1,2,3] : [number]

Por ahora vamos bien, pero seguimos en otro post... 

HTML + javascript + Haskell = ELM

Supongamos que tenemos que hacer un juego en Html, css y javascript. Ante esta idea, viene otra muy rápidamente relacionada con el suicidio.

Por suerte existe ELM, que es un lenguaje inspirado en Haskell el cual esta orientado a sistemas reactivos y compila a HTML y javascript.

Antes de comenzar debemos instalar ELM. ELM cuenta con 2 herramientas, una es el RELP y otra es le server. Por ahora vamos a utilizar el RELP.

Para instalar el RELP, vamos a : https://guide.elm-lang.org/install/elm.html
O podemos utilizar el try : https://elm-lang.org/try

Instalado el RELP, vamos a ver expresiones en ELM y literales : 

 > 4

4 : number

> "String"

"String" : String

> 5 < 4

False : Bool

Todo retorna un valor y ese valor tiene un tipo. ELM es de tipado estático y su tipado es muy poderoso pero algo quisquilloso :

> [1, "2"]

[1 of 1] Compiling Repl

 ( repl-temp-000.elm )

The 2nd element of this list is an unexpected type of value.

3|

 [1, "2"]

^^^

...

> 4 + "4"

[1 of 1] Compiling Repl

...

( repl-temp-000.elm )

As I infer the type of values flowing through your program, I see a conflict

between these two types: number String

> "4" ++ "4"

"44" : String

> 4 ++ 4

[1 of 1] Compiling Repl

...

Expected Type: appendable

...

> [1, 2] ++ [3, 4]

[1,2,3,4] : [number]

( repl-temp-000.elm ) 

Por lo visto, ELM es de tipado fuerte y estático.  ELM esta influenciado por el sistema de tipos de Haskell y ML. Su sistema de tipo contiene type classes. Esto se puede ver como las interfaces de Java. Es decir, un tipo implementa estas interfaces y todas las funciones que trabajan con este data type, puede ser utilizados con el tipo.

Por ejemplo tanto las listas como los Strings son appendable por lo tanto toda función que necesitan un appendable pueden ser utilizadas con listas o String por ejemplo ++.

A la vez ELM infiere el tipo, no es necesario indicar le tipo dado que este es inferido por el compilador : 

> a = [1, 2, 3]

[1,2,3] : [number]

A la vez cuenta con un sistema de tipos polimorfico, lo que significa que puede tratar los tipos que heredan de la misma type class de la misma manera. Verá que Elm aprovecha al máximo su herencia de ML y Haskell para construir uno de los mejores sistemas de tipos del mundo.

> a[1] = 2

[1 of 1] Compiling Repl ( repl-temp-000.elm )

> a[1] = 2

<function> : List number -> number'

Elm es un lenguaje de tipado estático, y muy estricto, aunque en REPL, puede redefinir valores primitivos por conveniencia. Elm es como Elixir a este aspecto. : List number -> number'

Creo que por este post estamos, continuará ...

Dejo link :  https://elm-lang.org/

70 libros gratuitos de javascript.

Ya que estoy recomendado libros quiero recomendarle este sitio donde pueden bajar varios libros sobre tecnologías que se utilizan en el front-end.

Dejo link: http://on.edupioneer.net/38ae0c8df8

Libro gratuito de CouchDb, HTML 5, JAXB y JavaFx

Quiero recomendar estos Libros gratuitos:

Download Dev Guides!

CouchDB Database for the Web CouchDB, is an open source database that focuses on ease of use and on being “a database that completely embraces the web”. It is a NoSQL database that uses JSON to store data, JavaScript as its query language using MapReduce, and HTTP for an API. One of its distinguishing features is multi-master replication. This is a hands-on course on CouchDB. You will learn how to install and configure CouchDB and how to perform common operations with it. Additionally, you will build an example application from scratch and then finish the course with more advanced topics like scaling, replication and load balancing.

HTML5 Programming Cookbook HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.

JAXB Tutorial Java offers several options for handling XML structures and files. One of the most common and used ones is JAXB. JAXB stands for Java Architecture for XML Binding. It offers the possibility to convert Java objects into XML structures and the other way around. JAXB comes with the JRE standard bundle since the first versions of the JRE 1.6. The first specification of JAXB was done in March 2003 and the work process is tracked in the Java Specification Request 31. In this specification request you can find a lot of information regarding the long life of JAXB and all the improvements that have been made. As already mentioned, JAXB is included in the JRE bundle since the update 1.6. Before that it was necessary to include their libraries in the specific Java project in order to be able to use it. Before JAXB was available (long time ago), the way Java had to handle XML documents was the DOM. This was not a very good approach because there was almost not abstraction from XML nodes into Java objects and all value types were inferred as Strings. JAXB provides several benefits like Object oriented approach related to XML nodes and attributes, typed values, annotations and may others.

JavaFX Cookbook JavaFX is a software platform for creating and delivering desktop applications, as well as rich internet applications (RIAs) that can run across a wide variety of devices. JavaFX is intended to replace Swing as the standard GUI library for Java SE, but both will be included for the foreseeable future. JavaFX has support for desktop computers and web browsers on Microsoft Windows, Linux, and Mac OS X. JavaFX 2.0 and later is implemented as a native Java library, and applications using JavaFX are written in native Java code. JavaFX Script has been scrapped by Oracle, but development is being continued in the Visage project. JavaFX 2.x does not support the Solaris operating system or mobile phones; however, Oracle plans to integrate JavaFX to Java SE Embedded 8, and Java FX for ARM processors is in developer preview phase. In this ebook, we provide a compilation of JavaFX programming examples that will help you kick-start your own web projects. We cover a wide range of topics, from Concurrency and Media, to Animation and FXML.With our straightforward tutorials, you will be able to get your own projects up and running in minimum time.

Libros gratuitos de Java code Geeks

5 steps to successful public cloud migration Cloud computing has been gaining momentum for years. As the technology leaves the early adopter phase and becomes mainstream, many organizations find themselves scrambling to overcome the challenges that come with a more distributed infrastructure. One of those difficulties is getting through a major cloud migration. It is one thing to roll out a few applications and cloud pilot projects, it is an entirely different challenge to start using the cloud across multiple lines of business at massive scale. That is the point that organizations are beginning to reach, and the time has come to take a serious look at cloud migration...

Performance testing and APM in the AWS cloud Application performance management technologies have evolved substantially since the advent of mainstream cloud computing technologies. AWS and APM have matured side-by-side, leading to complementary capabilities that allow organizations to test applications with a greater degree of precision. As a result, AWS has emerged as a stable, productive environment for APM initiatives. This eBook discusses the history of application performance testing, and with that backdrop, offers advice on combining performance testing and Application Performance Monitoring (APM) in the AWS cloud.

AngularJS Programming Cookbook AngularJS (commonly referred to as “Angular”) is an open-source web application framework maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for clientside model-view-controller (MVC) and model-view-viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. The AngularJS library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources. In this ebook, we provide a compilation of AngularJS based examples that will help you kick-start your own web projects. We cover a wide range of topics...

jQuery Programming Cookbook jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications. In this ebook, we provide a compilation of jQuery based examples that will help you kick-start your own web projects. We cover a wide range of topics, from UI Widgets, to Drag and Drop functionality and CSS manipulation. With our straightforward tutorials, you will be able to get your own projects up and running in minimum time.

Microsoft SharePoint Monitoring The primary intended audience for this document is any expert in professional services who needs to assure the health of SharePoint and systems connected to it. If you’re a systems architect, you can gain understanding of SharePoint components and how other applications can take advantage of SharePoint. If you’re an independent consultant, you’ll learn about the elements of comprehensive coverage and total visibility into operations with prebuilt monitoring configurations. Everything in this eBook is based on real-world examples and configurations where AppDynamics was deployed to monitor SharePoint.

Top 5 Java Performance Considerations Perhaps more than any programming language, Java continues to have a profound impact on how people navigate today’s world. Java’s functionality is responsible for setting a great deal of what users expect in terms of performance from their internet-accessible devices. The history of Java is more than two decades long and the language continues to grow and adapt in response to evolving consumer and business expectations. Throughout all of these changes, however, the performance of Java applications remains a paramount concern for developers. Read this eBook to get a deep dive on the top 5 Java Performance Considerations.

HTML5 Programming Cookbook HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML. In this ebook, we provide a compilation of HTML5 based examples that will help you kick-start your own web projects. We cover a wide range of topics, from graphics and animation, to geolocation and offline storage. With our straightforward tutorials, you will be able to get your own projects up and running in minimum time.

CSS Programming Cookbook Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file..