Welcome to the Devlog

This is where I document the journey of building Evidentia: technical decisions, design philosophy, and the occasional deep-dive into topics that fascinate me.

What to Expect

This devlog will cover:

  • Technical deep-dives - How features are built, architectural decisions, and lessons learned
  • Design philosophy - The thinking behind UX choices and pedagogical approaches
  • Interactive explorations - Visualizations and diagrams that explain complex concepts
  • Behind-the-scenes - Development process, tools, and workflows

The goal is not just to document what was built, but why it was built that way.

The Tools I Will Use

Diagrams with Mermaid

For technical diagrams, flowcharts, and architecture visualizations, I am using Mermaid. Here is an example showing the data flow in Evidentia:

Mermaid makes it easy to create diagrams using a simple text syntax. The diagram above shows how lesson data flows through the application.

Visualizations

For mathematical and logical visualizations, I am using Mafs. Here is a simple example showing the logical implication "If P, then Q" as a spatial relationship:

This is a preview of how I plan to visualize formal fallacies. For example, with Affirming the Consequent, I can show why "Q is true, therefore P is true" does not follow from "If P, then Q" - the outer circle (Q) being true does not mean you are in the inner circle (P).

Mathematical Notation with KaTeX

For mathematical expressions and formal logic notation, I am using KaTeX. Here are some examples:

Inline math like flows naturally within text. For more complex expressions, display mode centers them:

This is particularly useful for formal logic. For example, modus ponens can be written as:

Or the definition of a logical fallacy like affirming the consequent:

Code Examples

Of course, code blocks are essential for a technical devlog:

// Example: The curriculum data flow
import { getLesson, getFallacyById } from '@/lib/curriculum'

// Lessons are pre-indexed for fast lookup
const lesson = getLesson('level-1-lesson-1')
const fallacy = getFallacyById('F042')

// Progress is persisted client-side
const progress = localStorage.getItem('evidentia-progress-v2')

The Vision

From the project's reflection document:

Making Logic Accessible & Friendly

Logic education is often dry, academic, and intimidating. The goal is to create an approachable, welcoming learning experience. Friendly without being condescending, rigorous without being academic.

This devlog is part of that mission. By showing my work, I hope to:

  1. Demonstrate that educational software can be both pedagogically sound AND technically excellent
  2. Share techniques that others might find useful
  3. Hold myself accountable to building something worth using

Drafts and Publishing

Not everything makes it to publication. I keep drafts in a separate folder until they are ready. This allows ideas to develop without the pressure of immediate publication.

When a post is ready, it gets added to the registry and appears in the listing.

What is Next

Future posts will cover:

  • The baseline alignment debugging story (how LLMs can assist with visual debugging)
  • Token-efficient techniques for AI-assisted development
  • The Mafs visualization system for formal fallacies
  • Building the Illogicle word game

Thanks for reading. More to come.