@jupeme6

Flujo 6.1. Budgets and savings goals.

Budgets. Set a monthly limit per category. A progress bar shows how much
you have spent vs the limit. The bar changes color: category color under
80 percent, ochre at 80 to 100 (almost there warning), red over 100
(over budget). The percentage and a short warning message appear next to
each bar. Delete a budget with the x button on hover.

Savings goals. Set a goal with a name, target amount and optional
deadline. The app calculates your current savings (total income minus
total expenses across all time) and shows a green progress bar toward
the goal. When you hit 100 percent the goal name turns green with a
checkmark. Useful for things like save 500 for summer trip.

Both features appear in the resumen tab below the charts. They update
automatically when you add or remove expenses. Everything is stored in
localStorage, no server.

Margen Beta 6, the final version. Three new features.Folders with colors. You can create folders (subjects) and assign notes
to them. Each folder gets a color from a preset palette. The sidebar
shows a folder list above the notes, click a folder to filter. A
selector in the editor header lets you assign or change the folder of
the current note. Useful for organizing by subject: Calculus, Physics,
Programming.Linked notes. You can now link notes together using double brackets like
[[Note Title]]. The parser finds the note by title and creates a
clickable link in the preview. Click it and the linked note opens. If
the note doesn’t exist, it shows in red with strikethrough. Useful for
connecting related topics across subjects.Formula OCR. A camera button in the editor header lets you upload a
photo of a math formula. Tesseract.js extracts the text and a basic
converter turns common math notation into LaTeX: ^ becomes ^{}, sqrt
becomes \sqrt{}, int becomes \int, Greek letters get backslashed, etc.
The result is inserted at the cursor wrapped in $$ for block math. It’s
not perfect OCR (Tesseract is designed for text, not math) but it gives
you a starting point that you can edit manually.Calling Margen complete. Six betas across editor, parser, cheat sheet,
LaTeX, dark mode, i18n, code highlighting, PWA, import, export,
onboarding, shortcuts, focus mode, word count, folders, linked notes
and formula OCR.

Margen 5.2. Onboarding, power features, and translation fixes.Language prompt on first launch. New users see a modal asking them to
choose Spanish or English before the app loads. This was the top
complaint from reviewers, who said the language toggle was hard to find.Onboarding tour. First-time visitors get a welcome screen explaining how
Margen works: type markdown on the left, see it rendered on the right,
press + for new note, press ? for cheat sheet, press “formulas” for math
buttons. Also lists the keyboard shortcuts. Dismissible with one click.Keyboard shortcuts. Ctrl+B for bold, Ctrl+I for italic, Ctrl+N for new
note, Ctrl+E for focus mode, Ctrl+S for save. The shortcuts wrap the
selected text or insert empty markers if nothing is selected.Focus mode. A toggle button (or Ctrl+E) hides the sidebar so you can
write without distractions. The editor and preview center on screen
with a max width for comfortable reading.Word counter. A small character and word count appears in the editor
header, updating live as you type.Translation fixes. The welcome note and the markdown cheat sheet now
respect the language setting and switch between Spanish and English
fully. Relative dates like “ahora mismo” now show as “just now” in
English.

Margen 5.1. Fixes based on reviewer feedback.Full i18n. Before, switching to English left several strings in Spanish
because only parts of the UI were translated. Now everything visible
translates: buttons, placeholders, footer, header, cheat sheet, settings
panel, export/import labels. The language toggle updates the UI in real
time without needing a reload.Strikethrough support. Added text syntax to the markdown parser for
strikethrough text. Also added it to the cheat sheet.Auto-detect language. On first launch, Margen now checks the browser’s
language setting and defaults to English or Spanish accordingly. The
user can still override it in settings.Export as .md. The export button now opens a small menu with three
options: export as HTML (downloads a standalone file, no new tab),
export as Markdown (.md file), and print to PDF. Previously it only
exported HTML and opened a new tab, which was annoying.

Beta 5 of Flujo. Improvements based on reviewer feedback.PWA installable. A service worker now caches the core files so the app
works offline on desktop and Android. The manifest is generated
dynamically. CDN assets like Tesseract.js and Google Fonts are not
cached to avoid bloat. The app itself, your expenses and charts all work
offline.Language prompt on first launch. New users now see a modal asking them
to choose Spanish or English before the app loads. This was the top
complaint from reviewers on my other projects, who said the language
toggle was hard to find.Onboarding overlay. First-time visitors get a welcome screen explaining
the four tabs (resumen, apuntes, tickets, deudas) with a short
description of each, plus tips like adding income sources first to see
the Sankey diagram. Dismissible with a single click.Fixed incomplete translations. The canvas text “sin datos para mostrar”
and “sin gastos” now respect the language setting. The footer and header
subtitle also translate. Everything visible to the user is now either
English or Spanish based on the preference.

Beta 4 of Margen, the final version. Four additions.

Code syntax highlighting via highlight.js. Code blocks in the preview now
get colored based on language. Works in dark mode too.

Export and import. An export button downloads the current note as a
standalone HTML file with markdown, LaTeX and code already rendered, and
opens the print dialog so you can save it as PDF. An import button lets
you load an existing .md file as a new note.

PWA installable. A service worker caches the core files so the app works
offline on desktop and Android. The manifest is generated dynamically.
CDN assets like KaTeX and highlight.js are not cached to avoid bloat, so
formulas and code highlighting need internet the first time, but the app
itself, your notes and the markdown parser all work offline.

Calling Margen done. Four betas: basic editor, parser fix and cheat
sheet, LaTeX and dark mode, now code highlighting, import, export and
PWA.

Beta 3 of Margen adds LaTeX support, dark mode and multi-language.

LaTeX is the big one. KaTeX loads from CDN the first time you need it,
then renders $…$ as inline math and $$…$$ as block math. So you can
write $E=mc^2$ inline or a full integral in a block. If a formula has
an error it just shows the raw text instead of breaking the preview.

The formula toolbar was important to me because I don’t know LaTeX
syntax by heart. A “formulas” button in the editor header opens a bar
with 16 buttons: square root, integral, fraction, superscript,
subscript, sum, limit, Greek letters, infinity, plus-minus, inequalities,
arrows. Click one and it inserts the LaTeX at the cursor position, then
you just fill in the blanks. No need to remember that integral is
\int_{}^{} or that fraction is \frac{}{}.

Dark mode uses a warm dark palette instead of the usual cold gray, so
it still feels like the typewriter aesthetic. The toggle is in a settings
panel in the sidebar, along with an ES/EN language switch that
translates the whole UI.

Next version will be the last: code syntax highlighting, PDF export,
and PWA installable for offline use on desktop and Android.

But I’m starting to get tired, so i wil be on vacation for the next week!

Beta 2 of Margen fixes a usability bug and adds helpful features.

Fixed the modified timestamp bug. Before, every time you opened a note
to read it, it would save with modificada=now and jump to the top of the
sidebar list. Now there is a dirty flag that tracks whether you actually
changed anything. Opening a note to read it does not mark it as
modified. The sidebar list stays stable when you are just browsing.

Added a markdown cheat sheet. A ? button in the sidebar opens a floating
panel with the full syntax: headers, bold, italic, lists, code blocks,
links, images, blockquotes, horizontal rules. Useful for when you forget
how to do something without leaving the editor.

Also added a welcome note that appears on first launch with examples of
every markdown feature rendered in the preview. You can delete it if you
want.

Changed the typography from Source Serif 4 to Bitter, a slab serif that
gives a more typewriter feel without being monospaced. Still legible,
but more character.
I personally like this version, this is like, the base of what i want to build, i would leave it like this and thats it, but I feel that i can get better at coding if i just add more things, it would be more usefull

Started a new project called Margen, a markdown note editor for
university notes. The idea came from wanting a clean, offline place to
write notes with formulas, without the bloat of Notion or the
online-only dependency of most editors.

Beta 1 is the basics. A three-column layout: sidebar with the list of
notes, editor pane with a monospace textarea, and a live preview pane
that renders markdown as you type. The markdown parser is written from
scratch, no marked.js or any library, just a chain of regex replaces
handling headers, bold, italic, lists, code blocks, inline code, links,
images, blockquotes and horizontal rules.

The design is “digital typewriter”: white background, serif typography
for the rendered content, monospace for the raw editor, thin dividing
lines instead of cards or shadows. The aesthetic is deliberately calm
and distraction-free, like iA Writer or Bear.

Notes auto-save to localStorage 400ms after you stop typing. There is
also a Ctrl+S shortcut for manual save. The sidebar shows title, first
line preview and relative date for each note, and filters instantly as
you type in the search bar.

Next version will add subjects (folders), tags, and better organization.

Beta 4 of Flujo is up. The biggest one yet, split into two parts
because of the autoescritor’s 10 hour session limit.

Beta 4a added the settings panel with dark mode and language toggle
(ES/EN). The dark mode uses a warm dark brown palette instead of the
usual cold gray, so it still feels editorial. The language toggle
reloads the page to re-translate static text.

Beta 4b added the debts and shared expenses system. You can add people
(flatmates, friends) and track who owes whom. Shared expenses support
four split methods: equal, by shares (e.g. 2:1:1 means one person pays
double), exact amounts per person, and by percentage. The settle-up
section uses a greedy algorithm to minimize the number of transfers
needed to clear all debts, so if three people owe each other small
amounts, it suggests the minimum set of transfers instead of everyone
paying everyone.

Also added pattern detection. The app analyzes your expenses and finds
recurring ones, things you pay the same amount for multiple times. It
separates them into likely subscriptions (same exact amount, repeated)
and general recurring expenses (same description, similar amounts). Shows
the projected annual cost for subscriptions, which is a sobering number
to see.

Next version will be the last: FastAPI backend for sync between phone
and laptop, plus PWA installable.

Beta 4a of Flujo is up. I’m starting to get tired of being all day coding. Started the debts and shared expenses feature,
plus two settings that were requested on my other projects. First, a theme toggle. The app now supports a dark mode alongside the
default cream paper look. The toggle is in a small settings panel in the
header. The dark palette uses a warm dark brown instead of the usual
cold gray, so it still feels like the editorial aesthetic.Second, multi-language support. The interface can switch between Spanish
and English. Switching reloads the page so all the static text gets
re-translated. The dynamic content (expenses, descriptions) stays in
whatever language the user typed it in.Third, the structure for the debts tab is in place. A new “deudas” tab
appears next to resumen, apuntes and tickets. The HTML is there (persons
form, shared expense form with split method selector, movements list,
settle-up section, patterns section) but the JavaScript logic comes in
Beta 4b. The shared expense form supports four split methods: equal, by
shares (e.g. 2:1:1 means one person pays double), exact amounts per
person, and by percentage.Split this into two parts because of the autoescritor session limit.
4b comes next with all the logic for shared expenses, debt settlement
and pattern detection.

Small patch for the Weather App based on reviewer feedback. Three fixes.

First, the language toggle now actually translates the full UI. Before,
switching to English left several strings in Spanish: the forecast
heading, the day labels in both the cards and the canvas chart, the
“highs / lows” legend, and most embarrassingly, the weather description
itself (“algo de nubes” instead of “scattered clouds”). The issue was
that the forecast code was hardcoded in Spanish. Now it queries the
OpenWeatherMap API with the correct lang parameter, and re-translates
the forecast cards, the canvas labels, and the legend when the language
changes.

Second, the units toggle (Celsius / Fahrenheit) was already working but
now also converts wind speed from km/h to mph when Fahrenheit is
selected, which makes sense for imperial users.

Third, the welcome state is in place. First-time visitors now see a
pulsing sun icon and a short prompt instead of a blank page with just a
search bar.

Thanks to everyone who tested and left feedback. Three reviewers asked
for multi-language support and one asked for unit conversion, so those
were the top requested features.

Beta 4a of Flujo is up. Started the debts and shared expenses feature,
plus two settings that were requested on my other projects.

First, a theme toggle. The app now supports a dark mode alongside the
default cream paper look. The toggle is in a small settings panel in the
header. The dark palette uses a warm dark brown instead of the usual
cold gray, so it still feels like the editorial aesthetic.

Second, multi-language support. The interface can switch between
Spanish and English. Switching reloads the page so all the static text
gets re-translated. The dynamic content (expenses, descriptions) stays
in whatever language the user typed it in.

Third, the structure for the debts tab is in place. A new “deudas” tab
appears next to resumen, apuntes and tickets. The HTML is there
(persons form, shared expense form with split method selector,
movements list, settle-up section, patterns section) but the JavaScript
logic comes in Beta 4b. The shared expense form supports four split
methods: equal, by shares (e.g. 2:1:1), exact amounts per person, and
by percentage. The settle-up section will use a greedy algorithm to
minimize the number of transfers needed to clear all debts.

Beta 3.1 is a bugfix release. Two issues.

First, the OCR ticket scanner was completely broken. When you uploaded a
photo it would say “procesando imagen” forever and never finish. Turned
out I was calling tesseractCargado.createWorker where tesseractCargado
is a boolean (true), not the Tesseract library object. So I was doing
true.createWorker which is undefined.createWorker which throws a
TypeError that nobody caught. Switched to Tesseract.createWorker and
added a 90 second timeout plus proper try/catch so it can never hang
again.

Second, the Sankey text was blurry. Canvas draws with whatever font is
available at draw time, and if Google Fonts was still loading on the
first render it fell back to Arial which looked bad when scaled by
devicePixelRatio. Fixed by waiting for document.fonts.ready before the
first draw, rounding all Y coordinates to integers so they align with
physical pixels, and redrawing on window resize so the DPR stays
correct.

Beta 3 is up
Tabs and OCR Update!!
Three changes.

First, the Sankey is now proportional. Before, every node had a minimum
height of 38px, so a 10 euro expense looked the same as a 400 euro
income. Now the minimum is 3px and both sides use the global total as
their scale, so node heights actually reflect the amounts. A 10 euro
category is a tiny sliver next to a 400 euro income source.

Second, added tabs. The app was getting long with everything in one
column. Now there are three tabs: resumen (income sources and charts),
apuntes (the expense form and list), and tickets (new). The tab bar uses
the same editorial styling, lowercase text with an ochre underline on
the active tab.

Third, the big one: OCR ticket scanning. On the tickets tab you upload a
photo of a supermarket receipt and Tesseract.js extracts the text, then
a regex parser pulls out product names and prices. Each detected item
shows up in a list with a checkbox, you pick a category, hit save, and
all items become individual expenses. The parser looks for lines ending
in a decimal number (the classic receipt format) and skips lines that
look like totals, subtotals or payment info.

Tesseract loads from CDN the first time you use it. It runs entirely in
the browser, no server involved, which keeps the local-first promise.
The recognition is decent for clean photos, struggles with crumpled
receipts. The parser is basic but catches most supermarket formats. If
it fails, there is a details panel showing the raw OCR text so you can
see what went wrong.

Beta 2.1 is a visual rework of the Sankey diagram.
Charts Update!:
The previous version
worked but looked rough: the flow ribbons were angular, the nodes were
plain rectangles, and the two sides used independent scales so the
ribbons went diagonal instead of horizontal.

I asked another AI for help with the algorithm and it suggested a
cleaner approach. Each ribbon is now a single bezier curve with control
points at 42 percent of the horizontal distance (the same proportion D3
uses in its Sankey layout), instead of two curves joined at the ends.
The nodes are rounded rectangles with a soft shadow. Both sides share
the same scale so the ribbons flow straight. Nodes are centered
vertically instead of pinned to the top.

I kept the editorial palette: dark green for income nodes, black ink for
the center “total” node, cream with a colored accent stripe for each
expense category. The ribbons use the category color at 30 percent
opacity so overlaps create natural layering.

Also fixed a timezone bug in the 6 month bar chart. I was using
toISOString to build the month key, which converts to UTC and can return
the wrong month near midnight. Switched to getFullYear and getMonth
which stay in local time. The bars were technically drawing before but
some months were mismatched, now they line up correctly.
I still have to work that better, but it isnt thaaat bad