andrea/knowledgebase
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge

Browse source
This commit is contained in:
Andrea Fazzi 2024-10-01 16:18:11 +02:00
commit f9988f2ac4
21 changed files with 441 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
journals/2023_03_18.md
View file

@ -1,7 +1,8 @@
- **06:08** [[quick capture]]: https://httptoolkit.com/blog/docker-image-registry-facade/ #Docker
- **12:09** [[quick capture]]: concurrency - Goroutines with ListenAndServe increases performance? - Stack Overflow [concurrency - Goroutines with ListenAndServe increases performance? - Stack Overflow](https://stackoverflow.com/questions/30487703/goroutines-with-listenandserve-increases-performance) #golang
- **12:12** [[quick capture]]: Running multiple HTTP servers in Go | by Uday Hiwarale | RunGo | Medium [Running multiple HTTP servers in Go | by Uday Hiwarale | RunGo | Medium](https://medium.com/rungo/running-multiple-http-servers-in-go-d15300f4e59f) #golang
- **15:18** [[quick capture]]: Introducing react.dev [Introducing react.dev](https://news.ycombinator.com/item?id=35186812) #react #Javascript**20:21** [[quick capture]]: a[low:high:max] in Golang – A Rare Slice Trick [a[low:high:max] in Golang – A Rare Slice Trick](https://news.ycombinator.com/item?id=35210730) #golang
- **15:18** [[quick capture]]: Introducing react.dev [Introducing react.dev](https://news.ycombinator.com/item?id=35186812) #react #Javascript
- **20:21** [[quick capture]]: a[low:high:max] in Golang – A Rare Slice Trick [a[low:high:max] in Golang – A Rare Slice Trick](https://news.ycombinator.com/item?id=35210730) #golang
- **20:24** [[quick capture]]: Anki-fy your life [Anki-fy your life](https://news.ycombinator.com/item?id=35209775) #anki #flashcards
- **20:26** [[quick capture]]: Simulations and games in economics education [Simulations and games in economics education](https://news.ycombinator.com/item?id=35209248) #gamedev #gamification
- [Roadmap](https://wails.io/blog/the-road-to-wails-v3/) verso la versione 3 di #Wails #golang

2
journals/2024_03_06.md
View file

@ -6,7 +6,7 @@
- [Netbox](https://github.com/netbox-community/netbox)
- [ProxMox](https://git.proxmox.com/)
- OneDev
- [Traefik](https://doc.traefik.io/traefik/)
- [Traefik](https://doc.traefik.io/traefik/) #traefik
- [ZeroSSL](https://www.zerossl.org/#/)
- [Borgmatic](https://torsion.org/borgmatic/)
- ## TPSA #homelab #mittelab

5
journals/2024_09_16.md
View file

@ -1,3 +1,5 @@
- Progetto per la RAI radiofonica
- Tra i vari ambiti in cui la IA è presente c'è la scuola
- Correzine esercizi 1 C LIN #scuola
- Caputi Emma
- Annotazione positiva per aver svolto correttamente gli esercizi. Ha inoltre il quaderno in ordine.
@ -14,4 +16,5 @@
- http://raspberry.vpn:3002/watch?v=3OkUkxaI4IM
- Il video è propedeutico a quello relativo al "state-based UI"
- Il codice sorgente del video è
- id:: 66e7d525-aada-44d3-9c74-7d3ad14b59fa
- https://gist.github.com/cferdinandi/aaa0ccf87ea2acd56472244a37622673
id:: 66e7d525-aada-44d3-9c74-7d3ad14b59fa

27
journals/2024_09_17.md Normal file
View file

@ -0,0 +1,27 @@
## Fatti di via del Pozzo 4
- ### 03 febbraio 2024
- Lite tra un uomo e gli inquilini dell'appartamento
- Oggetto della mail: Situazione via del Pozzo 4 (ce l'hai in copia)
- Nella mail segnaliamo l'odore sgradevole di cane e gli effluvi di cannabis
- ### 25 agosto 2024
- Ululati e guaiti dei cani durante la notte, lite tra il ragazzo cubano e la compagna
- Oggetto della mail: Aggiornamenti Via del Pozzo 4 (mittente: juju.canciani@gmail.com)
- ### 26 agosto 2024
- Ancora ululati durante la notte
- Oggetto della mail: Aggiornamenti Via del Pozzo 4 (mittente: juju.canciani@gmail.com)
- ### 27 agosto 2024
- Intorno a mezzogiorno intervento del veterinario e della polizia locale. I cani vengono portati via.
- Arrivo degli operatori di Acegas
- Il ragazzo cubano viene portato via e denunciato (lo sappiamo da un articolo di TriestePrima) per allaccio abusivo alla rete elettrica
- Oggetto della mail: Aggiornamenti Via del Pozzo 4 (mittente: juju.canciani@gmail.com)
- ### 19 agosto 2024
- L'inquilino cubano apre demolisce la finestra che dà sul cortile
- Viene segnalato l'accaduto tramite all'amministrazione il giorno 19.08
- Oggetto della mail: Richiesta di urgente riscontro immobile via del Pozzo, 4
- La demolozione della porta viene anche segnalata nella mail con oggetto "Aggiornamenti Via del Pozzo 4" (mittente: juju.canciani@gmail.com)
- ### 07 settembre 2024
- Notiamo i primi allacci abusivi al contatore generale del condominio e segnaliamo all'amministratore
- Oggetto della mail: Utilizzo illecito della rete elettrica di condominio - via del Pozzo 4
- ### 14 settembre 2024
- Intervento delle forze dell'ordine su segnalazione di Andrea Fazzi per allaccio abusivo
- Oggetto della mail: Intervento delle forze dell'ordine per allaccio abusivo alla rete elettrica in via del Pozzo n. 4

5
journals/2024_09_18.md
View file

@ -4,4 +4,7 @@
- Brocchieri no
- Appartamento di Patrizia ha comprato un appartamento con un abuso
- Albino con avvocato
- Sasha avvocato
- Sasha avvocato
- Chris Ferdinandi su come implementare una UI state-based utilizzando i #webcomponents
- http://raspberry.vpn:3002/watch?v=yBENeFs_dKs
- https://gist.github.com/cferdinandi/3dc2826f88dd5195a113d79e399ffc91

9
journals/2024_09_20.md
View file

@ -1 +1,8 @@
- **07:02** [[quick capture]]: [Open Source Icon Sets - Iconify](https://icon-sets.iconify.design/)
- **07:02** [[quick capture]]: [Open Source Icon Sets - Iconify](https://icon-sets.iconify.design/)
- Learn CSS Grid
- https://learncssgrid.com/
- Mappa mentale sulle proprietà delle potenze 1 C LIN #scuola
- Dora presenta lo schema (stessa base, stesso esponente)
- Emma presenta lo schema (per operazione)
- Esercizi sulle potenze
- pag. 37 dal n. 231 al 238

2
journals/2024_09_22.md Normal file
View file

@ -0,0 +1,2 @@
- Link accessibilità sito www.carduccidante.edu.it
- https://form.agid.gov.it/view/a1bdc8d0-7677-11ef-9a73-e9726662ef7e

10
journals/2024_09_23.md
View file

@ -1 +1,9 @@
- **11:00** [[quick capture]]: [Forget ChatGPT: why researchers now run small AIs on their laptops](https://news.ycombinator.com/item?id=41609393)
- **11:00** [[quick capture]]: [Forget ChatGPT: why researchers now run small AIs on their laptops](https://news.ycombinator.com/item?id=41609393)
- Risposta ad una [issue](https://github.com/supabase/cli/issues/265) su #podman e #supabase
- I managed it to work removing /var/run/docker.sock and creating a new symbolic link to the socket in `/run/user/UID...`. I consider this an ugly hack so I'm waiting for further suggestions. Thank you.
- ```bash
export DOCKER_HOST=unix:///run/user/$(id -u)/podman/podman.sock
sudo rm /var/run/docker.sock
ln -s /run/user/$(id -u)/podman/podman.sock docker.sock
```
- https://github.com/containers/podman/discussions/14238

20
journals/2024_09_25.md
View file

@ -1 +1,19 @@
- **11:36** [[quick capture]]: [Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days](https://www.thesprintbook.com/book) #book
- **11:36** [[quick capture]]: [Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days](https://www.thesprintbook.com/book) #book
- Buonasera, sintetizzo di seguito l'esito del mio colloquio con l'amministrazione Minzi Cleva. In generale posso dire di aver ricevuto una buona impressione. L'amministratrice, la sig.ra Lucia Minzi Cleva, si è mostrata professionale, disponibile, preparata e ha fornito alcune informazioni che ritengo importante condividere (per punti).
- Le spese a nostro carico sono alte e ci sono margini per abbassarle. In particolare si può intervenire sulle spese per le pulizie, per la posta, per l'energia elettrica e per la gestione del conto corrente. L'amministrazione Minzi Cleva mi invierà un preventivo che provvederò a girare su questo gruppo e sugli indirizzi mail che ho raccolto fino a questo momento.
- Per cambiare amministratore è necessario essere **7 "teste" su 14 e avere 501 millesimi**. In questo momento siamo *6/14 con poco meno di 500 millesimi*. E' necessario quindi **coinvolgere altri proprietari**, anche più di uno, per avere la certezza della riuscita.
- Per il cambio di amministratore possiamo chiedere la convocazione di un'assemblea straordinaria. L'attuale amministrazione ha **10 giorni per rispondere** e può indire l'assemblea **entro 60 giorni**. Il giorno dell'assemblea dobbiamo avere una **maggioranza sicura** e il nome del nuovo amministratore **pronto**.
- Siamo 14 unità, per il cambio occorre avere 501/1000 e 7 teste.
- Canciani, Benelli, Gazzin, Jancar, Maracini, Pascutti, Morpurgo (?), Schergat (?)
- La nutrita maggioranza vorrebbe cambiare amministratore
- Si può convocare un'assemblea straordinaria se 2/5 chiede un'assemblea straordinaria (odg: cambio amministratore). Si raccomanda di convocare l'assemblea solo se si ha la certezza di riuscire a destituire l'attuale amministratore. Nel momento in cui si decide di cambiare e si hanno le condizioni che tutti questi dicano lo stesso. Tutti devono essere d'accordo verso lo stesso amministratore. Si manda a nome di più condomini tramite raccomandata e l'amministratore ha 60 giorni per indirla. «I sottoscritti NOME, COGNOME e MILLESIMI chiedono un'assemblea straordinario con punto all'odg "Cambio amministratore e nel contempo di chiudere la gestione (anche per il discorso del 50%)"».
- L'amministratore potrebbe dimettersi e chiede di nominare un altro amministratore.
- Sarebbe importante che lui non facesse ostruzionismo.
- Confedilizia sportelli per inquilini, è lui che dovrebbe aiutarci, l'avvocato agirebbe per conto di un solo gruppo.
- Preventivo, importi molto alti. La tenuta del conto corrente bancario la considera inserita a parte. Vedere un attimo i contratti di assicurazione perché sembrano alti. La posta è abbastanza alta e che eventualmente si può pensare ad una soluzione ibrida. Per una volta a settimana le pulizie sono alte. Potremmo valutare alternativa a Blu Energy. Chiedere all'amministratore una bolletta e vedere quanto si paga.
- Anche i lavori sono a maggioranza. L'approvazione del rendiconto che è ad 1/3.
- Il capocasa non ha nesssun tipo di responsabilità.
- Chiedere la chiusura al 31.10.2024 in modo tale
- Assemblea in comune
- Mollo il colpo
- Art. 66

5
journals/2024_09_26.md
View file

@ -1 +1,4 @@
- **16:43** [[quick capture]]: [Llama 3.2](https://simonwillison.net/2024/Sep/25/llama-32/)
- **16:43** [[quick capture]]: [Llama 3.2](https://simonwillison.net/2024/Sep/25/llama-32/)
- Demo e documentazione MDN per la gestione delle finestre "modal" in #Javascript per il framework #css `pico`
- https://codesandbox.io/embed/4mrnhq?view=Editor+%2B+Preview&module=%2Fjs%2Fmodal.js
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement

7
journals/2024_09_27.md Normal file
View file

@ -0,0 +1,7 @@
- Riunione per l'orientamento
- Eliminato il PCTO, eliminata la piattaforma LAF School
- L'Università di Trieste propone dei percorsi di 15 ore per ogni anno del triennio. Di conseguenza le prime 15 ore sono fatte così.
- Saremo noi a decidere come svolgere le restanti 15 ore.
- Sembrerebbe che ci siano 30 ore per anno.
- Nei consigli di classe non dobbiamo dare adito ad altre proposte.
- Prima dell'Esame di Stato il tutor orientatore invierà al coordinatore la reportistica con il conteggio sommativo delle ore.

2
journals/2024_09_29.md Normal file
View file

@ -0,0 +1,2 @@
- Un *data store* in vanilla #Javascript #leanwebclub
- https://gomakethings.com/simple-reactive-data-stores-with-vanilla-javascript-and-proxies/

3
journals/2024_10_01.md
View file

@ -1,3 +1,4 @@
- **12:16** [[quick capture]]: [SSH forwarding with reverse proxy (Traefik) - Traefik / Traefik v3 (latest) - Traefik Labs Community Forum](https://community.traefik.io/t/ssh-forwarding-with-reverse-proxy-traefik/24246) #traefik #ssh #homelab
- **13:35** [[quick capture]]: [Traefik Docker Documentation - Traefik](https://doc.traefik.io/traefik/providers/docker/)
- **15:32** [[quick capture]]: [synapse/contrib/docker/docker-compose.yml at develop · matrix-org/synapse](https://github.com/matrix-org/synapse/blob/develop/contrib/docker/docker-compose.yml) #synapse #traefik
- **15:32** [[quick capture]]: [synapse/contrib/docker/docker-compose.yml at develop · matrix-org/synapse](https://github.com/matrix-org/synapse/blob/develop/contrib/docker/docker-compose.yml) #synapse #traefik
- Documentazione per l'installazione di #synapse

34
pages/Javascript.md Normal file
View file

@ -0,0 +1,34 @@
## Blocchi asincroni
- La coppia di parole chiave `async/await` consente di gestire blocchi di codice in maniera asincrona.
- ```js
async function getArticles() {
app.innerHTML = 'Fetching all articles...';
try {
let response = await fetch(endpoint);
if (!response.ok) throw response.status;
let dragons = await response.json();
if (!dragons) throw 'no data';
app.innerHTML = dragons.articles.map(function(item) {
return `${articleTmpl(item)}`;
}).join('');
} catch (error) {
console.warn(error);
}
}
```
- Per evitare che il LSP emetta degli errori su linee di codice come quella che segue, è importante commentare la funzione asincrona utilizzando le convenzioni di JSDoc.
- ```js
let articles = await getStuff() // LSP emette l'errore 'await' has no effect on the type of this expression
```
- La soluzione consiste nel commentare la funzione con JSDoc
- ```js
/**
* Fetch photos from the API
* @return {Promise} response - The response from the API
*/
function getStuff() { ... }
```

4
pages/contents.md
View file

@ -1,4 +1,6 @@
- {{renderer :tocgen2, [[amministrazione sistemi linux]], calc(100vh - 129px)}}
- {{renderer :tocgen2, [[amministrazione sistemi linux]]}}
- {{renderer :tocgen2, [[amministrazione sistemi linux]], calc(100vh - 135px)}}
- {{renderer :tocgen2, [[amministrazione sistemi linux]], calc(100vh - 135px)}}
- {{renderer :tocgen2, [[amministrazione sistemi linux]], calc(100vh - 135px)}}
- {{renderer :tocgen2, [[hls__9781837630684-building_production_grade_web_applications_with_supabase_1725625620379_0]], calc(100vh - 135px)}}
- {{renderer :tocgen2, [[webcomponents]], calc(100vh - 135px)}}

33
pages/forgejo.md Normal file
View file

@ -0,0 +1,33 @@
- E' un sistema di revisione basato su #git
- E' presente tra i servizi del mio #homelab
- Si integra con #podman e #traefik
- Consente un #CDCI alla #Github
- Configurazione #homelab
- `docker-compose.yml` implementato per poter funzionare con #traefik
- ```yaml
networks:
proxy:
external: true
services:
server:
image: codeberg.org/forgejo/forgejo:8
container_name: forgejo
environment:
- USER_UID=1000
- USER_GID=1000
restart: unless-stopped
volumes:
- ./forgejo:/data
- /etc/timezone:/etc/timezone:ro
- /etc/localtime:/etc/localtime:ro
labels:
- traefik.http.routers.forgejo.entrypoints=websecure
- traefik.http.routers.forgejo.tls=true
- traefik.http.routers.forgejo.rule=Host(`forgejo.hackersgarage.dev`)
- traefik.http.routers.forgejo.tls.certresolver=letsencrypt
- traefik.http.services.forgejo.loadbalancer.server.port=3000
networks:
- proxy
- default
```

7
pages/hls__9781837630684-BUILDING_PRODUCTION_GRADE_WEB_APPLICATIONS_WITH_SUPABASE_1725625620379_0.md
View file

@ -27,4 +27,9 @@ file-path:: ../assets/9781837630684-BUILDING_PRODUCTION_GRADE_WEB_APPLICATIONS_W
hl-color:: yellow
id:: 66e7ed8b-007a-4e62-9024-f6fbe6c6f024
hl-type:: area
hl-stamp:: 1726475659385
hl-stamp:: 1726475659385
- The first line – the Supabase URL – is the API URL, while the second is the anonymous key. You’ll find both of these values printed in the Terminal output of your local instance when you run the CLI with npx supabase start. You can also run npx supabase status to show those values again
ls-type:: annotation
hl-page:: 62
hl-color:: yellow
id:: 66f29caf-0482-48fb-aa8d-8bb33959ea2f

43
pages/podman.md Normal file
View file

@ -0,0 +1,43 @@
## Introduzione
- Podman è un gestore di container come docker che funziona in modalità serverless
- ## Installazione su un sistema #archlinux
id:: 66f12589-34d7-4a14-b226-d59679c70d28
- Per installare `podman` su un sistema Arch Linux in modo che funzioni come `docker`
- ```bash
sudo pacman -R docker # uninstall previous docker installation
sudo pacman -S podman # install podman
podman run -p 8080:80/tcp docker.io/library/httpd # test the installation
docker ps
```
- Se si vuole mimare il comportamento di `docker` con `podman`
- ```bash
sudo pacman -S podman-docker
sudo pacman -S docker-compose
systemctl --user enable podman.sock
systemctl --user start podman.sock
export DOCKER_HOST=unix:///run/user/$(id -u)/podman/podman.sock
sudo rm /var/run/docker.sock
ln -s /run/user/$(id -u)/podman/podman.sock docker.sock
docker ps # test the aliasing
```
- ## Installazione su un sistema #debian
- Per installare `podman` su un sistema Debian/Ubuntu in modo che funzioni come `docker`
- ```bash
sudo apt install podman podman-docker
```
- Per emulare le funzionalità di `docker compose`
- ```bash
systemctl enable podman.socket
systemctl start podman.socket
wget https://github.com/docker/compose/releases/download/v2.29.7/docker-compose-linux-x86_64
chmod +x ...
mv docker-compose /usr/bin/
```
- **Attenzione** per un bug di podman su Ubuntu 24.04 è necessario utilizzare un repository sperimentale
- ```bash
sudo add-apt-repository ppa:brightbox/experimental
sudo apt update
sudo apt upgrade
```
- Riferimento: https://www.monotux.tech/posts/2024/09/ubuntu-2404-podman/

22
pages/supabase.md
View file

@ -22,4 +22,24 @@
- Image Proxy
- Si costruirà un sistema di ticket basato su Supabase e `Next.js`. Le spiegazioni del libro dovrebbero comunque essere indipendenti dalla tecnologia scelta per il frontend.
- Il sistema sarà [multi-tenant](66e7ed8b-007a-4e62-9024-f6fbe6c6f024), questo significa che l'accesso alle risorse dipenderà dai permessi dell'utente autenticato e dal dominio su cui è installata l'applicazione.
-
- ## Installazione di `Supabase CLI`
- Si possono utilizzare i moduli di #golang
- ```bash
go install github.com/supabase/cli@latest
sudo ln -s "$(go env GOPATH)/bin/cli" /usr/bin/supabase
```
- Creare una cartella di progetto ed eseguire il comando `supabase`
- ```bash
mkdir myproject && cd myproject
supabase init
supabase start
```
- E' necessario avere `docker` o `podman` installato sul sistema.
- https://dev.to/zakariachahboun/supabase-self-hosting-with-podman-1mhl
- https://github.com/supabase/cli/issues/265
- Per installare #podman su #archlinux fare riferimento a ((66f12589-34d7-4a14-b226-d59679c70d28))
- ## Primi passi con il client #Javascript
- Prima di tutto occorre [recuperare](66f29caf-0482-48fb-aa8d-8bb33959ea2f) l'URL dell'instanza supabase e la chiave anonima.
-
-
-

61
pages/traefik.md Normal file
View file

@ -0,0 +1,61 @@
- Traefik è un reverse proxy utilizzato nella mia infrastruttura #homelab
- ## Configurazione mediante #Docker
- https://doc.traefik.io/traefik/getting-started/quick-start/
- ```bash
mkdir -p traefik/config traefik/certificates
touch traefik/certificates/acme.json
```
- ```yaml
# docker-compose.yml
services:
traefik:
image: traefik:latest
container_name: traefik
ports:
- "80:80"
- "443:443"
volumes:
- ./config/traefik.yml:/traefik.yml
- ./certificates/acme.json:/acme.json
- /var/run/docker.sock:/var/run/docker.sock
networks:
- proxy
networks:
proxy:
external: true
```
- Ricordarsi poi di creare la rete
- ```bash
docker network create proxy
```
- ```yaml
# traefik.yml
log:
level: INFO
api:
dashboard: true
insecure: true
entryPoints:
web:
address: ":80"
websecure:
address: ":443"
providers:
docker:
network: proxy
certificatesResolvers:
letsencrypt:
acme:
email: postmaster@andreafazzi.eu
storage: acme.json
httpChallenge:
entryPoint: web
```
-

149
pages/webcomponents.md Normal file
View file

@ -0,0 +1,149 @@
- {{renderer :tocgen2}}
- I web component sono una tecnologia dello standard HTML5
- Permettono di rendere il codice Javascript modulare, riusabile e orientato agli oggetti
- Secondo Chris Ferdinandi autore di #leanwebclub i vantaggi nell'utilizzo dei web component possono riassumersi in questi punti:
- They auto-instantiate.
- You can easily have multiple instances on a page.
- You can add options and settings declaratively in your markup.
- It’s much more obvious what a component does just by looking at the HTML.
- The custom element provides a simple, scoped hook for styling with CSS.
- You can detect and react to attribute changes.
- You can detect when the JS has loaded with CSS.
- Event handling is much easier.
- ## Boilerplate per un Web Component
- ```js
class GridOfPhotos extends HTMLElement {
/**
* Instantiate the component
*/
constructor () {
// Inherit parent class properties
super();
// Track the current focused image button on the grid
this.currentImageBtn = null;
// Listen for events
this.addEventListener('click', this);
}
/**
* Runs each time the element is appended to or moved in the DOM
*/
async connectedCallback () {
// Fetch the photos from the API
this.photos = await this.fetchPhotos();
// If there are no photos
if (!this.photos || !this.photos.length) {
this.innerHTML = '<p>There are no available photos at this time. Please try again later. Sorry!</p>';
}
// Render the element
this.innerHTML = `
<div>
${this.photos.map( (image) => {
return `<button id="open-photo-button" class="outline contrast"><img id="${image.id}" src="${image.url}" alt="${image.description}"></img></button>`
} ).join('')}
</div>
`
}
/**
* Fetch photos from the API
* @return {Promise} response - The response from the API
*/
async fetchPhotos () {
try {
let response = await fetch(endpoint);
if (!response.ok) throw response.status;
let data = await response.json();
if (!data) throw 'No data!';
return data;
} catch (error) {
console.warn("ERR:", error);
}
}
/**
* Handle events
* @param {Event} event - The event object
*/
handleEvent (event) {
this[`on${event.type}`](event);
}
/**
* Open the modal window that shows the photo.
*/
handleOpenPhoto (event) {
let btn = event.target.closest('#open-photo-button');
if (!btn) return;
this.currentImageBtn = btn;
let id = btn.querySelector('img').getAttribute('id');
let image = this.photos.find( (image) => { return image.id === id } );
// Create the dialog element
let dialog = document.createElement('dialog');
dialog.setAttribute('open', '');
dialog.setAttribute('aria-live', 'polite');
dialog.innerHTML = `
<article>
<h2>${image.name}</h2>
<p>
${image.description}
</p>
<img id="${image.id}" src="${image.url}" alt="${image.description}"></img>
<footer>
<button id="add-photo-button" class="primary">Add to cart</button>
<button id="close-photo-button" class="secondary">Cancel</button>
</footer>
</article>
`
this.append(dialog);
dialog.focus();
}
/**
* Close the modal window that shows the photo.
*/
handleClosePhoto (event) {
let btn = event.target.closest('#close-photo-button');
if (!btn) return;
let dialog = event.target.closest('dialog');
if (!dialog) return;
dialog.close();
dialog.remove();
this.currentImageBtn.focus();
}
/**
* Handle the click event
* @param {Event} event - The event object
*/
onclick (event) {
this.handleOpenPhoto(event);
this.handleClosePhoto(event);
}
}
// Define the new web component
if ('customElements' in window) {
customElements.define('grid-of-photos', GridOfPhotos);
}
```
- ## Comunicazione tra web component
- Per far comunicare tra loro due o più web component oppure per far comunicare un web component con altre parti della codebase Javascript, si possono utilizzare gli eventi custom.
- https://gomakethings.com/how-to-get-different-web-components-to-talk-to-each-other-part-2/