<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2026-08-30T08:27:23-07:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">AILOGIO</title><subtitle>Blog about development of AI &amp; Payments for Restaurants &amp; Hotels</subtitle><author><name>Your Name</name></author><entry xml:lang="en"><title type="html">LLM Acuracy Validation Mechanisms</title><link href="http://localhost:4000/en/blog/llm-acuracy-validation-mechanisms/" rel="alternate" type="text/html" title="LLM Acuracy Validation Mechanisms" /><published>2026-03-15T01:00:00-07:00</published><updated>2026-03-15T01:00:00-07:00</updated><id>http://localhost:4000/en/blog/llms-acuracy-validation-mechanisms</id><content type="html" xml:base="http://localhost:4000/en/blog/llm-acuracy-validation-mechanisms/"><![CDATA[<h1 id="page-title">
LLM Acuracy Validation Mechanisms
</h1>

<p>Misinformation from LLMs</p>

<p>Factual Inaccuracies
The model produces incorrect statements, leading users to make decisions based on false information.</p>

<p>Unsafe Code Generation</p>

<p>The phenomenon where a Large Language Model (LLM) reproduces a statistically repeated, yet incorrect, answer is known as a hallucination. When these incorrect answers are consistently reproduced across multiple trials due to patterns in the training data, this specific type of error is often referred to as overfitting to common patterns or, more broadly, a hallucinated, high-confidence falsehood. 
www.getzep.com
www.getzep.com
 +1
Key Concepts Related to This Effect:
Hallucination: This is the general term for when an LLM confidently generates inaccurate, fabricated, or irrelevant information.
Overfitting to Training Data: If an incorrect association is strongly reinforced in the training data, the model will often reproduce that error confidently, as it appears to be the most statistically likely output.
Echoing: In multi-agent scenarios, this refers to a failure where an LLM mirrors or replicates the flawed, incorrect, or conversational style of its input (prompt) rather than providing a correct answer.
Misinformation: When these hallucinated patterns are presented as authoritative, they are deemed misinformation. 
OWASP Gen AI Security Project
OWASP Gen AI Security Project
 +3
In essence, because LLMs are probabilistic, if a “wrong” fact appears more frequently or with higher probability in the training data, the model will treat that falsehood as the “correct” answer.</p>

<p>The phenomenon where a Large Language Model (LLM) outputs a factually incorrect answer because that answer is statistically frequent in its training data is most commonly referred to as probabilistic hallucination or statistical regurgitation. 
www.getzep.com
www.getzep.com
 +2
This occurs because LLMs are “stochastic parrots”—they predict the most likely next token based on patterns in their training data rather than verifying factual truth. When a common misconception or a repeated error appears frequently in the dataset (like the myth that the Great Wall of China is visible from the Moon), the model assigns it a high statistical probability and outputs it as a “fact”.</p>

<h2 id="key-related-concepts">Key Related Concepts</h2>
<ul>
  <li>Stochastic Parrot: A metaphor describing how models mimic human language by remixing patterns without actual comprehension of the underlying meaning.</li>
  <li>Knowledge Conflict: When a model relies on its “parametric knowledge” (what it learned during training) even when provided with contradictory, correct information in a prompt.</li>
  <li>Sycophancy: A related bias where a model provides an incorrect answer not just because of its training data, but because it is trying to agree with a perceived bias or user preference in the prompt.</li>
  <li>Popularity Bias: The tendency of the model to favor more “popular” or frequent information from its dataset over niche but correct information</li>
</ul>

<p>Prevention and Mitigation Strategies</p>
<ol>
  <li>Retrieval-Augmented Generation (RAG)</li>
</ol>

<p>Здесь мы говорим о том что применимо к ЛЛМ инференс</p>

<p>если расматривать обучение частной модели то практики отличаются
здесь сейчас о них реч не идес
не охватывает</p>

<p>Are you looking for ways to mitigate these types of errors in a specific application, such as using Retrieval-Augmented Generation (RAG)?</p>

<p>Use Retrieval-Augmented Generation to enhance the reliability of model outputs by retrieving relevant and verified information from trusted external databases during response generation. This helps mitigate the risk of hallucinations and misinformation.</p>

<p>Model Fine-Tuning
Enhance the model with fine-tuning or embeddings to improve output quality. Techniques such as parameter-efficient tuning (PET) and chain-of-thought prompting can help reduce the incidence of misinformation.</p>

<p>Cross-Verification and Human Oversight
Encourage users to cross-check LLM outputs with trusted external sources to ensure the accuracy of the information. Implement human oversight and fact-checking processes, especially for critical or sensitive information. Ensure that human reviewers are properly trained to avoid overreliance on AI-generated content.</p>

<p>Automatic Validation Mechanisms
Implement tools and processes to automatically validate key outputs, especially output from high-stakes environments.</p>

<p>Risk Communication
Identify the risks and possible harms associated with LLM-generated content, then clearly communicate these risks and limitations to users, including the potential for misinformation</p>

<ol>
  <li>User Interface Design
Design APIs and user interfaces that encourage responsible use of LLMs, such as integrating content filters, clearly labeling AI-generated content and informing users on limitations of reliability and accuracy. Be specific about the intended field of use limitations.</li>
</ol>]]></content><author><name>Sergio Ottovini</name></author><category term="bussiness" /><category term="edge case" /><category term="featured image" /><category term="image" /><category term="layout" /><summary type="html"><![CDATA[AI opinion excessively agree with, flatter, or validate a user's stated beliefs.]]></summary></entry><entry xml:lang="it"><title type="html">Dimentica il Lavoro Dimenticato</title><link href="http://localhost:4000/it/blog/dimentica-il-lavoro-dimenticato/" rel="alternate" type="text/html" title="Dimentica il Lavoro Dimenticato" /><published>2026-03-14T01:00:00-07:00</published><updated>2026-03-14T01:00:00-07:00</updated><id>http://localhost:4000/it/blog/dimentica-il-lavoro-dimenticato</id><content type="html" xml:base="http://localhost:4000/it/blog/dimentica-il-lavoro-dimenticato/"><![CDATA[<h3 id="strategia-di-stima-della-decomposizione">Strategia di stima della decomposizione</h3>

<p>Questa è una domanda profonda che va oltre la semplice elencazione dei compiti e si addentra nella disciplina fondamentale della <strong>Scienza dell’Stima (Estimation Science)</strong>. La sfida del “Dimenticare il Lavoro Correlato” si verifica perché spesso ci concentriamo solo sul lavoro <em>visibile</em> (le modifiche al codice) e dimentichiamo il lavoro di supporto, infrastrutturale e preparatorio essenziale.</p>

<p>La soluzione risiede nel forzare una decomposizione completa basata sulla <strong>mappatura delle dipendenze</strong> e sull’<strong>ingegneria inversa</strong> prima che inizi la stima.</p>

<p>Ecco come puoi utilizzare la tua struttura gerarchica proposta per garantire la completezza, concentrandoti specificamente sul risolvere la sfida del “Dimenticare il Lavoro Correlato” durante i progetti di migrazione.</p>

<hr />

<h2 id="1-il-framework-di-decomposizione-gerarchica">1. Il Framework di Decomposizione Gerarchica</h2>

<p>La struttura che proponi (Progetto $\rightarrow$ Fasi $\rightarrow$ Compiti $\rightarrow$ Sottocompiti) è la base corretta. Per renderla robusta contro l’oblio del lavoro correlato, ogni livello deve avere uno scopo specifico:</p>

<table>
  <thead>
    <tr>
      <th style="text-align: left">Livello</th>
      <th style="text-align: left">Area di Focus</th>
      <th style="text-align: left">Obiettivo del Livello</th>
      <th style="text-align: left">Azione Critica per la Completezza</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align: left"><strong>1. Progetto</strong></td>
      <td style="text-align: left">L’Obiettivo Finale</td>
      <td style="text-align: left">Definire lo Scope e i Vincoli (A cosa stiamo migrando?)</td>
      <td style="text-align: left">Definire chiaramente lo <strong>Scope Incluso</strong> vs. <strong>Scope Escluso</strong>.</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>2. Fasi</strong></td>
      <td style="text-align: left">Grandi Tappe</td>
      <td style="text-align: left">Raggruppare i compiti correlati in stadi logici e sequenziali (Il “Come” nella sequenza).</td>
      <td style="text-align: left">Assicurarsi che le fasi abbiano <strong>Criteri di Uscita</strong> chiari e misurabili.</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>3. Compiti</strong></td>
      <td style="text-align: left">Risultati Entregabili</td>
      <td style="text-align: left">Definire le unità di lavoro principali che producono un risultato tangibile (Il “Cosa”).</td>
      <td style="text-align: left">Identificare tutte le <strong>Dipendenze</strong> necessarie tra i compiti.</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>4. Sottocompiti</strong></td>
      <td style="text-align: left">Unità di Lavoro</td>
      <td style="text-align: left">Suddividere i compiti in azioni granulari ed estimabili (Il “Quanto”).</td>
      <td style="text-align: left">Assicurarsi che ogni pezzo di configurazione o impostazione richiesta sia catturato.</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="2-strategia-per-risolvere-il-dimenticare-il-lavoro-correlato">2. Strategia per Risolvere il “Dimenticare il Lavoro Correlato”</h2>

<p>Per ottenere una lista veramente completa, devi adottare tre tecniche strategiche: <strong>Ingegneria Inversa</strong>, <strong>Mappatura delle Dipendenze</strong> e <strong>Definizione dei Confini</strong>.</p>

<h3 id="a-ingegneria-inversa-lavorare-a-ritroso">A. Ingegneria Inversa (Lavorare a Ritroso)</h3>

<p>Invece di iniziare con “Quali passaggi devo fare?”, inizia con l’obiettivo finale.</p>

<ol>
  <li><strong>Definire lo Stato Target:</strong> Definire chiaramente come appare lo <em>stato finale e riuscito</em> del nuovo sistema (es. “Il Sistema B è in esecuzione”, “L’integrità dei dati è verificata”, “Tutti gli API esterni sono funzionali”).</li>
  <li><strong>Identificare i Prerequisiti:</strong> Chiedi: Cosa deve esistere affinché tale stato finale sia vero? (es. Per implementare il Sistema B, dobbiamo avere uno schema di database funzionante; per costruire l’API, dobbiamo avere modelli di dati definiti).</li>
  <li><strong>Decomporre a Ritroso:</strong> Utilizza questi prerequisiti come obiettivi delle Fasi. Questo assicura che tutto il lavoro preparatorio necessario (setup, configurazione) venga forzato nella lista dei compiti.</li>
</ol>

<h3 id="b-mappatura-delle-dipendenze-identificare-il-lavoro-correlato">B. Mappatura delle Dipendenze (Identificare il Lavoro Correlato)</h3>

<p>Questo passaggio risolve direttamente il problema dell’oblio costringendoti a vedere le connessioni tra i compiti.</p>

<ul>
  <li><strong>Identificare i Predecessori:</strong> Per ogni Compito, identifica quali altri Compiti <em>devono</em> essere completati per primo.
    <ul>
      <li><em>Esempio:</em> <strong>Compito 3: Creare Script di Migrazione</strong> $\rightarrow$ Richiede il <strong>Compito 1: Analizzare Schema Legacy</strong> e il <strong>Compito 2: Definire Schema Target</strong>. (Se dimentichi il Compito 1/2, il Compito 3 non può iniziare.)</li>
    </ul>
  </li>
  <li><strong>Identificare i Successori:</strong> Identifica quali compiti successivi dipendono dal completamento del compito corrente. Questo aiuta a gestire la pianificazione e l’allocazione delle risorse.</li>
</ul>

<h3 id="c-definizione-dei-confini-prevenire-leccesso-di-scope">C. Definizione dei Confini (Prevenire l’Eccesso di Scope)</h3>

<p>Il lavoro correlato spesso si insinua quando i confini sono sfocati. Utilizza questo framework per definire dove inizia e finisce un compito e cosa è esplicitamente <strong>fuori dallo scope</strong> del periodo di stima.</p>

<ul>
  <li><strong>Input:</strong> Definire tutti gli input necessari (es. documentazione esistente, accesso all’ambiente).</li>
  <li><strong>Output:</strong> Definire gli output misurabili di ogni Sottocompite (es. “Stringa di connessione al database generata”, non solo “Lavoro sulla configurazione del database”).</li>
  <li><strong>Vincoli:</strong> Documentare esplicitamente i vincoli (es. “La stima non include la risoluzione dei conflitti delle regole di business legacy”).</li>
</ul>

<hr />

<h2 id="3-esempio-decomposizione-del-progetto-di-migrazione">3. Esempio: Decomposizione del Progetto di Migrazione</h2>

<p>Applichiamo questa strategia a una migrazione da <strong>Sistema A $\rightarrow$ Sistema B</strong>.</p>

<h3 id="livello-1-definizione-del-progetto">Livello 1: Definizione del Progetto</h3>
<ul>
  <li><strong>Obiettivo:</strong> Migrare con successo tutti i dati di produzione, le funzionalità e i processi operativi dal Sistema A al Sistema B senza tempo di inattività.</li>
</ul>

<h3 id="livello-2-fasi-la-sequenza">Livello 2: Fasi (La Sequenza)</h3>
<ol>
  <li><strong>Scoperta e Pianificazione:</strong> Comprendere entrambi i sistemi e definire la strategia.</li>
  <li><strong>Mappatura dello Schema e Preparazione dei Dati:</strong> Preparare il nuovo ambiente per l’ingestione dei dati.</li>
  <li><strong>Sviluppo e Logica di Migrazione:</strong> Costruire il codice di trasformazione effettivo.</li>
  <li><strong>Test e Validazione:</strong> Assicurarsi l’equivalenza funzionale e l’integrità dei dati.</li>
  <li><strong>Implementazione e Passaggio (Cutover):</strong> Eseguire la transizione finale e lo smantellamento del Sistema A.</li>
</ol>

<h3 id="livello-3--4-compiti-rightarrow-sottocompiti-la-lista-completa">Livello 3 &amp; 4: Compiti $\rightarrow$ Sottocompiti (La Lista Completa)</h3>

<p>Concentrandoci sulla <strong>Fase 2: Mappatura dello Schema e Preparazione dei Dati</strong>:</p>

<table>
  <thead>
    <tr>
      <th style="text-align: left">Compito</th>
      <th style="text-align: left">Lavoro Correlato / Dipendenze</th>
      <th style="text-align: left">Sottocompiti (Unità di Stima Granulare)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align: left"><strong>C2.1 Analizzare Schema Legacy (Sistema A)</strong></td>
      <td style="text-align: left">Prerequisito per C2.2, C3.1</td>
      <td style="text-align: left">2.1.1 Estrarre tutte le tabelle/view dal DB del Sistema A. / 2.1.2 Documentare tutti i tipi di dati e i vincoli. / 2.1.3 Identificare i set di dati orfani.</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>C2.2 Definire Schema Target (Sistema B)</strong></td>
      <td style="text-align: left">Dipende dai risultati di C2.1</td>
      <td style="text-align: left">2.2.1 Progettare lo schema normalizzato per il Sistema B. / 2.2.2 Mappare i campi legacy alla struttura del Sistema B. / 2.2.3 Definire tutte le chiavi esterne e gli indici richiesti.</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>C2.3 Preparare Script ETL</strong></td>
      <td style="text-align: left">Dipende dai risultati di C2.2 (Modelli di dati)</td>
      <td style="text-align: left">2.3.1 Scrivere gli script SQL iniziali per l’estrazione dei dati. / 2.3.2 Sviluppare le regole di pulizia dei dati (gestione dei valori nulli, formati). / 2.3.3 Creare l’impostazione dell’ambiente di staging temporaneo.</td>
    </tr>
    <tr>
      <td style="text-align: left"><strong>C2.4 Piano di Validazione Dati</strong></td>
      <td style="text-align: left">Dipende dal completamento di C2.3</td>
      <td style="text-align: left">2.4.1 Definire le metriche di riconciliazione (checksum, conteggio record). / 2.4.2 Definire i criteri di accettazione per l’accuratezza dei dati. / 2.4.3 Impostare il framework di reporting della validazione.</td>
    </tr>
  </tbody>
</table>

<h3 id="conclusione-come-raggiungere-la-lista-più-completa">Conclusione: Come Raggiungere la Lista Più Completa?</h3>

<p>La lista più completa di compiti si raggiunge trattando il processo non come una semplice lista di controllo lineare, ma come un <strong>grafo delle dipendenze</strong>.</p>

<ol>
  <li><strong>Inizia dalla Fine:</strong> Definisci lo stato desiderato finale (Ingegneria Inversa).</li>
  <li><strong>Identifica i Punti di Controllo:</strong> Utilizza le tue Fasi come punti di controllo. Il lavoro nella Fase 2 non può iniziare finché tutto il lavoro prerequisito della Fase 1 non è stato completato.</li>
  <li><strong>Forza le Dipendenze:</strong> Scrivi esplicitamente: “Il Compito X richiede l’Input Y.” Questo ti costringe a considerare il lavoro di supporto.</li>
</ol>]]></content><author><name>Sergio Ottovini</name></author><category term="Gestione progetti" /><category term="Business" /><category term="Risoluzione dei problemi" /><category term="Decomposizione" /><category term="Ingegneria inversa" /><category term="Gestione progetti" /><category term="Sviluppo" /><category term="Scienza della stima" /><summary type="html"><![CDATA[Strategia di stima della decomposizione]]></summary></entry><entry xml:lang="it"><title type="html">Primo Post Italiano 2</title><link href="http://localhost:4000/it/blog/primo-post-2/" rel="alternate" type="text/html" title="Primo Post Italiano 2" /><published>2025-03-16T01:00:00-07:00</published><updated>2025-03-16T01:00:00-07:00</updated><id>http://localhost:4000/it/blog/primo-post-2</id><content type="html" xml:base="http://localhost:4000/it/blog/primo-post-2/"><![CDATA[<p>Contenuto italiano qui…</p>

<h2 id="sezione-2">Sezione 2</h2>
<p>Altro contenuto italiano. 2</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 2. Click Event Listener
document.addEventListener('click', (e) =&gt; {
    const btn = e.target.closest('[data-target]');
    if (btn) revealContent(btn);
});
</code></pre></div></div>

<p>Your <code class="language-plaintext highlighter-rouge">href="/#about?show=about"</code> has malformed URL structure (<code class="language-plaintext highlighter-rouge">/#about?</code> confuses pathname/query)—the redirect happens, but <code class="language-plaintext highlighter-rouge">?show=about</code> gets lost or timing fails to activate the target. Fix href + use <code class="language-plaintext highlighter-rouge">sessionStorage</code> for reliable target passing across redirects. <a href="https://stackoverflow.com/questions/67028500/window-location-href-not-returning-anything-after-the-character">stackoverflow</a></p>

<h2 id="fix-menu-link">Fix Menu Link</h2>
<p>Simplify href to just the query param (no hash/path needed):</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"w3-bar-item w3-button w3-padding-large w3-hide-small"</span> 
   <span class="na">href=</span><span class="s">"/?show=about"</span> <span class="na">data-target=</span><span class="s">"about"</span><span class="nt">&gt;</span>ABOUT<span class="nt">&lt;/a&gt;</span>
</code></pre></div></div>

<h2 id="reliable-delegated-click-handler">Reliable Delegated Click Handler</h2>
<p>Replace your click listener with this—stores target in <code class="language-plaintext highlighter-rouge">sessionStorage</code> (survives redirect), clears after use:</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">btn</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nf">closest</span><span class="p">(</span><span class="dl">'</span><span class="s1">a[data-target]</span><span class="dl">'</span><span class="p">);</span>
    <span class="k">if </span><span class="p">(</span><span class="nx">btn</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">e</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span>
        <span class="kd">const</span> <span class="nx">targetId</span> <span class="o">=</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">target</span><span class="p">;</span>
        
        <span class="k">if </span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span> <span class="o">!==</span> <span class="dl">'</span><span class="s1">/</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span>
            <span class="c1">// Store target, redirect to /</span>
            <span class="nx">sessionStorage</span><span class="p">.</span><span class="nf">setItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">pendingTarget</span><span class="dl">'</span><span class="p">,</span> <span class="nx">targetId</span><span class="p">);</span>
            <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">/</span><span class="dl">'</span><span class="p">;</span>
            <span class="k">return</span><span class="p">;</span>
        <span class="p">}</span>
        
        <span class="c1">// On /, reveal now</span>
        <span class="nf">revealContent</span><span class="p">(</span><span class="nx">btn</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">});</span>
</code></pre></div></div>

<h2 id="updated-deep-linking-replaces-your-show-logic">Updated Deep Linking (Replaces Your ?show Logic)</h2>
<p>Handle both URL param <strong>and</strong> sessionStorage in <code class="language-plaintext highlighter-rouge">DOMContentLoaded</code>:</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// In DOMContentLoaded, after loadComponent...</span>
<span class="kd">const</span> <span class="nx">urlParams</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">URLSearchParams</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">search</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">autoOpen</span> <span class="o">=</span> <span class="nx">urlParams</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">show</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">sessionStorage</span><span class="p">.</span><span class="nf">getItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">pendingTarget</span><span class="dl">'</span><span class="p">);</span>

<span class="k">if </span><span class="p">(</span><span class="nx">autoOpen</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">sessionStorage</span><span class="p">.</span><span class="nf">removeItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">pendingTarget</span><span class="dl">'</span><span class="p">);</span>  <span class="c1">// Clear after use</span>
    <span class="nf">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="kd">const</span> <span class="nx">btn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="s2">`[data-target="</span><span class="p">${</span><span class="nx">autoOpen</span><span class="p">}</span><span class="s2">"]`</span><span class="p">);</span>
        <span class="k">if </span><span class="p">(</span><span class="nx">btn</span><span class="p">)</span> <span class="p">{</span>
            <span class="nf">revealContent</span><span class="p">(</span><span class="nx">btn</span><span class="p">);</span>  <span class="c1">// Your fetch/decode/animate function</span>
        <span class="p">}</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nf">replaceState</span><span class="p">({},</span> <span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span><span class="p">);</span>
    <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>  <span class="c1">// Slightly longer for menu fetch</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="why-this-works">Why This Works</h2>
<ul>
  <li>Click “ABOUT” anywhere: Stores “about” → <code class="language-plaintext highlighter-rouge">/</code> → sessionStorage triggers <code class="language-plaintext highlighter-rouge">revealContent</code> → fetches <code class="language-plaintext highlighter-rouge">/about</code> base64 → animates <code class="language-plaintext highlighter-rouge">#about</code>.</li>
  <li>Direct <code class="language-plaintext highlighter-rouge">/?show=about</code>: Same flow.</li>
  <li>No param loss—sessionStorage reliable across pages/404.html.</li>
  <li><code class="language-plaintext highlighter-rouge">revealContent</code> unchanged—handles bot checks, fetch, decode perfectly. <a href="https://www.perplexity.ai/search/bd1ba642-0f74-4391-97f3-a2cc305fda46">perplexity</a></li>
</ul>

<h2 id="404html-reminder">404.html Reminder</h2>
<p>Repo root <code class="language-plaintext highlighter-rouge">404.html</code> = copy of <code class="language-plaintext highlighter-rouge">index.html</code>. GitHub serves it everywhere, running your full JS. Deploy, test <code class="language-plaintext highlighter-rouge">/wrong</code> → click ABOUT → target activates! <a href="https://stackoverflow.com/questions/69556804/client-side-routing-and-404-on-github-pages-uris-after-refresh">stackoverflow</a></p>

<p>🛠️</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;a href="/" class="w3-bar-item w3-button w3-padding-large"&gt;HOME&lt;/a&gt; &lt;a class="w3-bar-item w3-button w3-padding-large w3-hide-small" data-target="contact" href="/?show=contact" &gt;CONTACT&lt;/a&gt;   &lt;a class="w3-bar-item w3-button w3-padding-large w3-hide-small" href="/?show=about" data-target="about"&gt;
  ABOUT
&lt;/a&gt;

// 1. Core Reveal Function
async function revealContent(btn) {
    const targetId = btn.getAttribute('data-target');
    const targetEl = document.getElementById(targetId);
    // const ledto = btn.getAttribute('rq-section-name');


    // FIX: if the button points to a target that doesn't exist, stop here.
    if (!targetEl) {
        console.warn(`Target element #${targetId} not found.`);
        return; 
    }

    var ensource = "";

    if (targetId === "about") {  // Use === for strict equality; define ledto first
        ensource = LTO1;    // Define LTO1 first, e.g., const LTO1 = "/about";
    } else if (targetId === "contact") {  // Use === for strict equality; define ledto first
        ensource = LTO2;    // Define LTO1 first, e.g., const LTO1 = "/about";
    } 

    // Bot Checks
    const trap = btn.parentElement.querySelector('.required-field-if input');
    if (trap &amp;&amp; trap.value !== "") return; // Honeypot fail
    if (Date.now() - PAGE_START &lt; 1000) return; // Timing fail (1s)

    // ... inside revealContent ...
    if (targetEl.innerHTML.trim() === "") {
        targetEl.innerHTML = "Loading..."; // Optional: Quick placeholder
        try {
            const path = atob(ensource);
            const res = await fetch(path);
            const base64Content = await res.text();
            
            // Inject content
            targetEl.innerHTML = decodeURIComponent(escape(atob(base64Content.trim())));

     
            // NOW trigger the animation
            targetEl.classList.add('active');
            requestAnimationFrame(() =&gt; {
                requestAnimationFrame(() =&gt; { // Double frame ensures display:block is rendered
                    targetEl.classList.add('visible');
                });
            });

            // Scroll to target + trigger animation targetEl.scrollIntoView({ 
behavior: 'smooth', 
block: 'start'  // Top of viewport });
   

        } catch (e) {
            targetEl.innerHTML = "Error loading content.";
        }
    } else {
        // If already loaded, just toggle
        const isVisible = targetEl.classList.contains('visible');
        if (!isVisible) {
            targetEl.classList.add('active');
            setTimeout(() =&gt; targetEl.classList.add('visible'), 10);
        } else {
            targetEl.classList.remove('visible');
            setTimeout(() =&gt; targetEl.classList.remove('active'), 600);
        }
    }

}
</code></pre></div></div>

<p>document.addEventListener(‘click’, (e) =&gt; {
    const btn = e.target.closest(‘a[data-target]’);
    if (btn) {
        e.preventDefault();
        const targetId = btn.dataset.target;</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    // CRITICAL: Clear any pending target first
    sessionStorage.removeItem('pendingTarget');
    
    if (window.location.pathname !== '/') {
        // Store ONLY this click's target, then redirect
        sessionStorage.setItem('pendingTarget', targetId);
        window.location.href = '/';
        return;
    }
    
    // On /, reveal immediately (no storage)
    revealContent(btn);
} });
</code></pre></div></div>

<p>document.addEventListener(‘click’, function (event) {
  // Check if the clicked element is a menu link or a toggle button
  if (event.target.hasAttribute(‘data-loc’)) {
    const targetId = event.target.getAttribute(‘data-loc’);
    const targetEl = document.getElementById(targetId);</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>if (targetEl) {
  // 1. Make it active (display: block)
  targetEl.classList.add('active');

  // 2. Trigger animation in next frame
  requestAnimationFrame(() =&gt; {
    targetEl.classList.add('visible');
  });

  // 3. Scroll to the element smoothly
  targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
}   } });
</code></pre></div></div>

<p>// 3. Deep Linking + Language Logic
window.addEventListener(‘DOMContentLoaded’, () =&gt; {
    // Get language first
    const lang = getPreferredLang();
    document.documentElement.lang = lang; // Update &lt;html lang&gt;</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Load language-specific menu
loadComponent('menu-container', `/parts/static_beans/menu_${lang}.html`);
loadComponent('right-bar-container', `/parts/static_beans/sidebar-right.html`);

// Language dropdown setup (if you have it)
if (document.querySelector('.lang-dropdown')) {
    document.getElementById('current-lang').textContent = langNames[lang];
}




// In DOMContentLoaded, after loadComponent... const urlParams = new URLSearchParams(window.location.search); let autoOpen = urlParams.get('show') || sessionStorage.getItem('pendingTarget');
</code></pre></div></div>

<p>if (autoOpen) {
    setTimeout(() =&gt; {
        const btn = document.querySelector(<code class="language-plaintext highlighter-rouge">[data-target="${autoOpen}"]</code>);
        if (btn) {
            revealContent(btn);
            // Scroll after revealContent
            const targetEl = document.getElementById(autoOpen);
            if (targetEl) {
                targetEl.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
            }
        }
        window.history.replaceState({}, document.title, window.location.pathname);
    }, 1000);
}</p>

<p>});</p>

<p>The reason it broke is that you are clearing the storage before you actually use the value. When the browser redirects to /, the script runs from the top; if removeItem happens before you read the value into autoOpen, the data is gone forever.
To fix this, you must read it first, then clear it.
Here is the correct order for your DOMContentLoaded logic:</p>

<p>window.addEventListener(‘DOMContentLoaded’, () =&gt; {
    // 1. Setup language and components
    const lang = getPreferredLang();
    loadComponent(‘menu-container’, <code class="language-plaintext highlighter-rouge">/parts/static_beans/menu_${lang}.html</code>);</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 2. READ the target first
const urlParams = new URLSearchParams(window.location.search);
let autoOpen = urlParams.get('show') || sessionStorage.getItem('pendingTarget');

// 3. NOW clear the storage (it's safe because the value is saved in the variable 'autoOpen')
sessionStorage.removeItem('pendingTarget');

// 4. Proceed with logic
if (autoOpen) {
    setTimeout(() =&gt; {
        const btn = document.querySelector(`[data-target="${autoOpen}"]`);
        if (btn) {
            revealContent(btn); // Your function to show content
            
            const targetEl = document.getElementById(autoOpen);
            if (targetEl) {
                targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }
        // Clean URL
        window.history.replaceState({}, document.title, window.location.pathname);
    }, 1000);
}

// 5. Global listener for buttons (for when you are on other pages)
document.addEventListener('click', (e) =&gt; {
    const btn = e.target.closest('[data-target]');
    if (btn &amp;&amp; window.location.pathname !== '/' &amp;&amp; window.location.pathname !== '/index.html') {
        e.preventDefault();
        const target = btn.getAttribute('data-target');
        sessionStorage.setItem('pendingTarget', target); // Set it here
        window.location.href = '/'; // Redirect
    }
}); });
</code></pre></div></div>

<h2 id="why-yours-broke-vs-why-this-works">Why yours broke vs why this works:</h2>

<ul>
  <li>Your broken version: Clear Storage -&gt; Read Storage (Result: Null).</li>
  <li>This version: Read Storage into Variable -&gt; Clear Storage -&gt; Use Variable.</li>
</ul>

<p>Even though the storage is cleared, the variable autoOpen still holds the string “about”, so your setTimeout logic can finish the job.
Does your revealContent function correctly handle the case where the button might still be loading inside the component, or should we consider a small check to see if btn exists before clicking?</p>

<p>No, you do not need that separate if (!autoOpen) block.
You can handle it all in one clean line using the OR (||) operator. This looks for the URL parameter first, and if it’s missing, it checks sessionStorage.</p>
<h2 id="the-clean-way">The “Clean” Way</h2>
<p>Use this single line at the start of your logic:</p>

<p>// Get from URL OR Storage in one golet autoOpen = urlParams.get(‘show’) || sessionStorage.getItem(‘pendingTarget’);
// Clear it immediately AFTER reading so it doesn’t trigger on the next refresh
sessionStorage.removeItem(‘pendingTarget’); 
if (autoOpen) {
    // … your setTimeout logic …
}</p>

<h2 id="why-the-extra-if-is-unnecessary">Why the extra if is unnecessary:</h2>

<ol>
  <li>urlParams.get(‘show’) returns null if the parameter isn’t in the URL.</li>
  <li>
    <table>
      <tbody>
        <tr>
          <td>In JavaScript, null</td>
          <td> </td>
          <td>“something” evaluates to “something”.</td>
        </tr>
      </tbody>
    </table>
  </li>
  <li>Therefore, if show is missing from the URL, the variable autoOpen automatically tries to take the value from sessionStorage.</li>
</ol>

<h2 id="one-warning">One Warning</h2>
<p>Make sure your Click Listener (on other pages) actually sets the sessionStorage before redirecting, otherwise autoOpen will be empty:</p>

<p>// Inside your click listener for buttons on other pages:const target = btn.getAttribute(‘data-target’);
sessionStorage.setItem(‘pendingTarget’, target); // Store the intent
window.location.href = ‘/’; // Go home to trigger the auto-open logic</p>

<p>Since you mentioned you’re on GitHub Pages, are you finding that window.location.pathname sometimes includes your repository name (e.g., /my-repo/)?</p>

<p>Your logic is almost perfect, but there is one small logic “trap” to be aware of: the root path on GitHub Pages.
On GitHub Pages, window.location.pathname is often /your-repo-name/ instead of just /. If your check !== ‘/’ fails because the path is actually /my-project/, the redirect won’t trigger.
Here is the refined version of your listener to ensure it works on GitHub Pages and handles the state cleanly:</p>

<p>document.addEventListener(‘click’, (e) =&gt; {
    const btn = e.target.closest(‘a[data-target]’);
    if (btn) {
        e.preventDefault();
        const targetId = btn.dataset.target;</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    closeMobileMenu();

    // 1. Get the current path and normalize it
    // This handles both "://domain.com" and "user.github.io/repo/"
    const path = window.location.pathname;
    const isRoot = path === '/' || path === '/index.html' || path.endsWith('/my-repo-name/'); // Change to your repo name if needed

    if (!isRoot) {
        // 2. We are on a sub-page: Save and Redirect
        sessionStorage.setItem('pendingTarget', targetId);
        // Redirect to the base URL of your site
        window.location.href = window.location.origin + (path.startsWith('/my-repo-name') ? '/my-repo-name/' : '/');
        return;
    }
    
    // 3. We are ALREADY on the root: Just reveal
    // Ensure no leftover storage interferes
    sessionStorage.removeItem('pendingTarget');
    revealContent(btn);
} });
</code></pre></div></div>

<h2 id="key-improvements">Key Improvements:</h2>

<ol>
  <li>Normalization: Added a check for /index.html and a note about your repo name. If you don’t check for the repo name, the browser will think /my-repo/ is a “sub-page” and will keep refreshing the home page.</li>
  <li>Origin Redirect: Using window.location.origin ensures the redirect goes back to the very top of your domain.</li>
  <li>Storage Cleanup: By moving removeItem into the isRoot block, you ensure that a “fresh” click on the home page clears any old state before showing the new content.</li>
</ol>

<p>Quick Check: When you look at your site in the browser, does the URL look like username.github.io/ or username.github.io/project-name/? (If it’s the latter, we should adjust the isRoot check to match your project-name exactly).</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 1. Core Reveal Function
async function revealContent(btn) {
    const targetId = btn.getAttribute('data-target');
    const targetEl = document.getElementById(targetId);
    // const ledto = btn.getAttribute('rq-section-name');


    // FIX: if the button points to a target that doesn't exist, stop here.
    if (!targetEl) {
        console.warn(`Target element #${targetId} not found.`);
        return; 
    }
</code></pre></div></div>

<p>console.warn(<code class="language-plaintext highlighter-rouge">Target element #${targetId} not found.</code>);</p>

<p>Error on cklick Homw from Home</p>]]></content><author><name>Your Name</name></author><summary type="html"><![CDATA[Contenuto italiano qui…]]></summary></entry><entry xml:lang="it"><title type="html">Primo Post Italiano 3</title><link href="http://localhost:4000/it/blog/primo-post-3/" rel="alternate" type="text/html" title="Primo Post Italiano 3" /><published>2025-03-15T01:00:00-07:00</published><updated>2025-03-15T01:00:00-07:00</updated><id>http://localhost:4000/it/blog/primo-post-3</id><content type="html" xml:base="http://localhost:4000/it/blog/primo-post-3/"><![CDATA[<p>Contenuto italiano qui…</p>

<h2 id="sezione-3">Sezione 3</h2>
<p>Altro contenuto italiano.</p>]]></content><author><name>Your Name</name></author><summary type="html"><![CDATA[Contenuto italiano qui…]]></summary></entry><entry xml:lang="it"><title type="html">Primo Post Italiano</title><link href="http://localhost:4000/it/blog/primo-post/" rel="alternate" type="text/html" title="Primo Post Italiano" /><published>2025-03-14T01:00:00-07:00</published><updated>2025-03-14T01:00:00-07:00</updated><id>http://localhost:4000/it/blog/primo-post</id><content type="html" xml:base="http://localhost:4000/it/blog/primo-post/"><![CDATA[<p>Contenuto italiano qui…</p>

<h2 id="sezione-n">Sezione N</h2>
<p>Altro contenuto italiano.</p>]]></content><author><name>Your Name</name></author><summary type="html"><![CDATA[Contenuto italiano qui…]]></summary></entry></feed>