You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This pattern keeps component logic modular and allows for complex client-side interactions like collapsing, DOM manipulation, and event handling.
119
+
120
+
### Mobile-First Responsive Architecture
121
+
122
+
Quartz implements sophisticated mobile-first patterns for optimal UX across devices. The mobile breakpoint is **800px** (defined in `quartz/styles/variables.scss`).
123
+
124
+
#### Unified Mobile Menu Pattern
125
+
126
+
On mobile (<800px), Explorer, Search, and RecentNotes merge into a **single overlay menu**:
127
+
128
+
1.**Opening Explorer on Mobile**:
129
+
- Explorer overlay opens with file tree
130
+
- Search component is **dynamically moved** into Explorer overlay (at top)
131
+
- RecentNotes component is **dynamically moved** into Explorer overlay (at bottom)
132
+
- Background scroll locked via `mobile-no-scroll` class on `<html>`
133
+
134
+
2.**Closing Explorer on Mobile**:
135
+
- All components **restored to original DOM positions**
- Interactions: `mcp__playwright__browser_click`, `browser_navigate`, etc.
447
+
448
+
**Testing Pattern**:
449
+
1. Navigate to localhost:8080 (requires `npx quartz build --serve` running)
450
+
2. Take snapshots/screenshots to verify UI state
451
+
3. Interact with elements (click, type, etc.)
452
+
4. Verify responsive behavior at different viewport sizes
453
+
5. Store artifacts in `.playwright-mcp/` for comparison
454
+
455
+
See `.playwright-mcp/` directory for example test artifacts.
456
+
313
457
## Debugging Tips
314
458
315
459
1.**Verbose logging**: Check build output for plugin logging
@@ -326,6 +470,10 @@ When running `npx quartz build --serve`:
326
470
4.**Relative paths**: Link resolution uses `RelativeURL`; don't mix with other path types
327
471
5.**Incremental builds**: Emitters must implement `partialEmit()` to work efficiently in watch mode
328
472
6.**Resource conflicts**: Ensure CSS/JS resource names don't conflict across plugins
473
+
7.**Script loading order** ⚠️: SPA router and foundational utilities must load first via `unshift()`, not `push()`. Component scripts depend on `window.addCleanup()` from SPA router.
474
+
8.**GFM Autolink Literal Bug**: Standard `remark-gfm` treats `@2x` in filenames (e.g., `image@2x.png`) as email addresses. Use `remark-gfm-configurable` with `autolinkLiteral: false` to fix. See `quartz/plugins/transformers/gfm.ts`
475
+
9.**Mobile viewport detection**: Use `checkVisibility()` on mobile-only elements OR `window.matchMedia()` for viewport checks. Don't rely solely on CSS classes.
476
+
10.**DOM manipulation for mobile**: When moving components between parents, ALWAYS store original parent and next sibling references to restore exact positions. See `explorer.inline.ts` for pattern.
Copy file name to clipboardExpand all lines: content/2025/10/20/La Alucinación es el Feature Fundamental de los LLMs.md
+6-1Lines changed: 6 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,4 +43,9 @@ Esto **no es útil** porque automáticamente le atribuimos una "falta" a un LLM,
43
43
44
44
Este es el primer artículo de una serie enfocada en los principios y prácticas fundamentales alrededor del desarrollo de software asistido por Inteligencia Artificial Generativa.
45
45
46
-
[Publicado en LinkedIn en 27 de Octubre del 2025](https://www.linkedin.com/posts/anibalrojas_un-llmnopuedenoalucinar-porque-en-esencia-activity-7388654847971205120-6cmz?utm_source=share&utm_medium=member_desktop&rcm=ACoAAABYcI8BB_U41_Zfnth-a-K6afvWfwlghiM).
46
+
En la segunda parte de la serie, [Las matemáticas del Código Asistido por IA](/2025/10/28/las-matematicas-del-codigo-asistido-por-ia), exploro de una forma más formal el impacto de las alucinaciones positivas y negativas en el valor del uso de los Asistentes de Programación.
47
+
48
+
Compartido y publicado en:
49
+
-[LinkedIn el 27 de Octubre del 2025](https://www.linkedin.com/posts/anibalrojas_un-llmnopuedenoalucinar-porque-en-esencia-activity-7388654847971205120-6cmz?utm_source=share&utm_medium=member_desktop&rcm=ACoAAABYcI8BB_U41_Zfnth-a-K6afvWfwlghiM).
50
+
-[Substack el 27 de Octubre del 2025](https://open.substack.com/pub/anibal/p/la-alucinacion-es-el-feature-fundamental?r=7wicq&utm_campaign=post&utm_medium=web&showWelcomeOnShare=false).
51
+
-[(Twitter) el 27 de Octubre del 2025](https://x.com/anibal/status/1982917439898955921).
Copy file name to clipboardExpand all lines: content/2025/10/24/Backpressure en contra de las Alucinaciones de los LLMs.md
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,17 +4,19 @@ tags:
4
4
- llms
5
5
- backpressure
6
6
- alucinaciones-negativas
7
+
- asistentes-de-programación
8
+
- desarrollo-de-software
7
9
journal: Website
8
10
journal-date: 2025-10-24
9
11
date: 2025-10-24
10
12
---
11
13
> Este es el segundo artículo en la serie Principios Fundamentales para el Desarrollo de Software Asistido por IA, el primero está disponible en [[La Alucinación es el Feature Fundamental de los LLMs]]
12
14
13
-
No recuerdo cuando fue la primera vez que leí el termino "**backpressure**" usado para englobar los mecanismos que permiten contrarrestar las [[La Alucinación es el Feature Fundamental de los LLMs#^1bb028|Alucinaciones Negativas]] que generan los Coding Assistants, es decir las alucinaciones que *no agregan valor* en el contextoen el que estamos operando.
15
+
No recuerdo cuando fue la primera vez que leí el termino "**backpressure**" usado para englobar los mecanismos que permiten contrarrestar las [[La Alucinación es el Feature Fundamental de los LLMs#^1bb028|Alucinaciones Negativas]] que generan los Asistentes de Programación, es decir las alucinaciones que *no agregan valor* en el contexto, code base, en el que estamos trabajando.
14
16
15
-
**Backpressure** es un termino que originalmente viene de la dinámica de fluidos, y que se refiere a resistencia de un fluido, un gas o un líquido, a fluir cuando se encuentra con una presión "en contra" mayor en su recorrido. Es un término que se ha utilizado también en sistemas de software para describir mecanismos que permiten regular el flujo de datos para evitar la sobrecarga de un sistema "aguas abajo".
17
+
**Backpressure** es un termino que originalmente viene de la dinámica de fluidos, y que se refiere a resistencia de un fluido, un gas o un líquido, a fluir cuando se encuentra con una presión "en contra" en su recorrido. Es un término que se ha adoptado también en sistemas de software para describir mecanismos que permiten regular el flujo de datos para evitar la sobrecarga de un sistema "aguas abajo".
16
18
17
-
Yo una vez me enfrenté a un sistema aguas abajo que era un programa *muy*antiguo que corría en un mainframe y que estaba escrito en Fortran, y solo podía realizar muy pocas operaciones por segundo. Funcionaba, aunque nadie entendía el código, era un cálculo muy complejo, y había que vivir con él y tuvimos que hacer un ajuste para que nuestro sistema no lo destruyera a punta de peticiones.
19
+
Yo una vez me enfrenté a un sistema "aguas abajo" que era un programa *antiguo* que corría en un mainframe y que estaba escrito en Fortran, y solo podía realizar muy pocas operaciones por segundo. Funcionaba, aunque nadie entendía el código, era un cálculo muy complejo, y había que vivir con él y tuvimos que hacer un ajuste para que nuestro sistema no lo destruyera a punta de peticiones.
18
20
19
21
Como es axiomático que los LLMs van a producir [[La Alucinación es el Feature Fundamental de los LLMs#^1bb028|Alucinaciones Negativas]] entonces tenemos que implementar mecanismos que nos permitan minimizarlas y/o contrarrestarlas aka **backpressure**. El mecanismo más obvio en este sentido es el ***human-in-the-loop***, cuando un programador *humano*, con experiencia, revisa el código generado por un AI Assistant y lo acepta o no. Esto tradicionalmente asociado a un Pull Request, Code Review o QA.
De nuestro primer artículo en la serie, [La Alucinación es el Feature Fundamental de los LLMs](/2025/10/20/la-alucinacion-es-el-feature-fundamental-de-los-llms), tenemos que las alucinaciones de los LLMs pueden ser positivas o negativas según agreguen o sustraigan *valor* a nuestro trabajo, a *"nuestro código"*.
18
+
19
+
Ahora vamos a dar un paso atrás para aproximarnos un poco más formalmente a qué significa usar un LLM, en particular un **Asistente de Programación** como Claude Code, Cursor, Google CLI, Windsurf, etc en nuestro trabajo con:
20
+
21
+
```
22
+
f(modelo,contexto,prompt) = contexto'
23
+
```
24
+
25
+
Donde:
26
+
27
+
-**f**: Representa una interacción con el Asistente de Programación
28
+
-**modelo** (m): De forma *simplificada*, es un modelo como Claude Sonnet 4.5, Gemini Pro 2.5, ChatGPT 5, etc, pero esto suele ser un *sistema* más complejo como Warp, Github Copilot o Claude Code.
29
+
-**contexto** (c): Incluye el código existente, la documentación, *posiblemente las herramientas disponibles*, **no** la *ventana de contexto* que es irrelevante en esta discusión.
30
+
-**prompt** (p): Es la instrucción que le damos al Asistente, la cual usualmente implica modificar el código de alguna forma, pero puede ser realizar un commit, instalar un paquete, etc. Excluye hacer una pregunta que solo sea respondida en la UI del Asistente.
31
+
-**contexto'** (c'): El nuevo contexto, modificado a raíz del uso del Asistente , el código modificado, un commit, documentación actualizada, un deployment, etc.
32
+
33
+
Ya con esta base, y de nuevo de forma simplificada, podemos decir que una secuencia de interacciones se representa de esta forma:
34
+
35
+
```
36
+
f(m,c,p₁) = c'
37
+
f(m,c',p₂) = c''
38
+
f(m,c'',p₃) = c'''
39
+
...
40
+
```
41
+
42
+
Donde el contexto va mutando a medida que alimentamos al Asistente con diferentes prompts para el modelo y este "echa código" y/o ejecuta otras acciones. Esta secuencia podría representar lo que conocemos como una sesión.
43
+
44
+
Por otra parte podemos decir que *contexto'* es igual a *contexto* inicial más las alucinaciones que el Asistente aplicó sobre el mismo, positivas (*a₊*) o negativas (*a₋*). Si estas alucinaciones agregan o quitan LOCs es irrelevante en este momento. Entonces:
45
+
46
+
```
47
+
c' = c + ∑ a₊ + ∑ a₋
48
+
```
49
+
50
+
Por lo que, con una simple sustitución:
51
+
52
+
```
53
+
f(m,c,p) = c + ∑ a₊ + ∑ a₋
54
+
```
55
+
56
+
Y ahora podemos empezar a conectar con el tema del *valor* (*v*). Como las alucinaciones positivas nos agregan valor mientras que las negativas nos lo restan vamos a hacer explícito esto con el símbolo "*-*":
57
+
58
+
```
59
+
v(f(m,c,p)) = v(c) + v(∑ a₊) - v(∑ a₋)
60
+
```
61
+
62
+
Obviamente si las alucinaciones negativas son más que las positivas pues invertimos un montón de nuestro tiempo, generación de tokens, uso de GPUs y electricidad para poco o nada.
63
+
64
+
**PERO**, la "fórmula" anterior está incompleta, porque determinar si una alucinación es positiva o negativa tiene un costo no trivial. Más aún, descartar, rechazar, corregir las alucinaciones negativas se suma al costo de detectarlas, por esto:
65
+
66
+
```
67
+
v(f(m,c,p)) = v(c) + v(∑ a₊) - v(∑ a₋) - c(∑ a₋)
68
+
```
69
+
70
+
Donde *c(∑ a₋)* es el costo de detectar y remover las alucinaciones negativas porque nosotros solo queremos quedarnos con las alucinaciones positivas. Porque al final queremos aproximarnos lo máximo posible a:
71
+
72
+
```
73
+
f(m,c,p) = c + ∑ a₊
74
+
```
75
+
76
+
Que debido a que [La Alucinación es el Feature Fundamental de los LLMs](/2025/10/20/la-alucinacion-es-el-feature-fundamental-de-los-llms) es no-trivial y siempre tendrá un costo asociado.
77
+
78
+
Obviamente no pretendo que esto sea un modelo matemático real, sino un artefacto que nos ayude a entender el *sistema* que estamos operando en esta búsqueda de tener una aproximación sistemática y metódica, que *tienda* a producir código de calidad de forma repetible.
79
+
80
+
Más sobre este "sistema" y cómo podemos operarlo en el próximo post de la serie.
0 commit comments