nano /var/log/random.log

Coding, life & stuff.
#Alpine.js

Hablemos sobre alpinejs


Alpine.js ofrece las propiedades reactivas y declarativas de grandes frameworks como Vue o React con un coste mucho menor. Mantiene el DOM, pudiendo mejorar y perfeccionar el comportamiento como más convenga. Podríamos considerarlo como un Tailwind para JavaScript.

Alpine nos ofrece 14 directivas y 6 propiedades mágicas que puedes conocer leyendo su documentación.

Hagamos un pequeño ejemplo para entender mejor que es alpinejs

Bueno, pongamos manos a la obra y trabajemos en un widget para el clima que se verá más o menos como esto:

proyecto alpinejs

template original de iaminos.

Para hacer este proyecto necesitamos conocer sobre:

  • template strings
  • algunas directivas de alpine:
    • x-data: Declara un nuevo scope del componente.
    • x-init: Ejecuta una expresión cuando un componente se inicializa.
    • x-text: Actualiza el innerText del elemento.
  • tener una llave api de open weather map.

Asumiendo que bajaron el template vamos a irlo modificando poco a poco.

En el <head> vamos a incluir esta estiqueta javascript:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>

Ya con esto tendremos alpine inicializado.

Ahora vamos a crear una etiqueta script y vamos a incluir lo siguiente:

function temp() {
    return {
        temp: {},
        init() {
            // todo
        }
    }
}

Ahora lo que debemos hacer es declarar el scope e inicializarlo de la siguiente forma:

<div x-data="temp()" x-init="init()">
    <!-- todo -->
</div>

NOTA: voy a remover todas las clases CSS y dejar las directivas de alpine

Acá lo que indicamos es que el scope de este componente será la funcion temp() y que solo estará disponible para todo aquello que esté dentro de las etiquetas div donde fue declarado.

Teniendo encuenta esto pasemos a terminar de armar nuestro widget.

<div x-data="temp()" x-init="init()">
    <div x-text="`${temp.name}`">n/a</div>
    <div>
        <img :src="`http://openweathermap.org/img/w/${temp.weather[0].icon}.png`" alt=""/>
    </div>
    <div>
        <div x-text="`${parseInt(temp.main.temp)}°C`">n/a</div>
        <div>
            <div x-text="`${temp.weather[0].main}`">n/a</div>
            <div>
                <span>☝️</span>
                <span x-text="`${parseInt(temp.main.temp_max)}°C (max)`">n/a</span>
            </div>
            <div>
                <span>👇</span>
                <span x-text="`${parseInt(temp.main.temp_min)}°C (min)`">n/a</span>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div>Wind</div>
            <div x-text="`${temp.wind.speed}k/h`">n/a</div>
        </div>
        <div>
            <div>Humidity</div>
            <div x-text="`${temp.main.humidity}%`">n/a</div>
        </div>
        <div>
            <div>Feels like</div>
            <div x-text="`${parseInt(temp.main.feels_like)}°C`">n/a</div>
        </div>
    </div>
</div>

Y nuestra funcion javascript pasaría a quedar de esta forma:

function temp() {
    return {
        temp: {},
        init() {
            fetch('http://api.openweathermap.org/data/2.5/weather?q=Montevideo,UY&appid=<API_KEY>&units=metric')
                .then(response => response.json())
                .then(response => { this.temp = response })
        }
    }
}

Si no tienes ganas de codear y solo quieres mirar pasa por acá, solo vas a necesitar tu llave api y listo.

Articulos relacionados

#Laravel

Como integrar webmentions usando laravel.

Similar al pingback, Webmention es uno de los cuatro tipos de enlaces de retorno, pero fue diseñado para ser más simple que el protocolo XML-RPC en el que se basa el pingback, y en su lugar solo usa contenido HTTP y x-www-urlencoded. Más allá de los protocolos de enlace de retorno anteriores, Webmention también especifica los detalles del protocolo para cuando una página que es la fuente de un enlace se elimina, se actualiza con nuevos enlaces o se eliminan los enlaces existentes.

  • ダビッド トレス

1 like

4 reposts

Comments

  1. ángel ángel
    Hice un pequeño tutorial de como hacer un widget del clima cono #alpinejs y #openweathermap angelcruz.dev/post/hablemos-…