Fernando Muñoz · Frontend Tech Lead in Madrid

NM-000 · C90

About me

Frontend Tech Lead · Madrid

“Memoirs of a coder who writes”

Side A

I am Nando Muñoz, and for more than ten years I have been building products for big brands as a frontend tech lead. I came to the craft before AI did, and I have built frontend teams on Adobe Experience Manager and Salesforce Commerce Cloud.
I read, I underline and I write. I published a book of poems, Leyendo Claroscuros, and since then the word has mostly ended up in two places: poetry and the Cádiz Carnival, where I analyse popurrís verse by verse, with a calm that doesn't fit on social media.
For years I have been writing about both crafts and building things outside of work

Side B

Where to find me

Pick a tape from the shelf

Projects

013 tapes

NM About meFrontend Tech Lead · Madrid NM-000C90

Dynamic cassette · Low noise · High output

NM-000 · C90

About me

Frontend Tech Lead · Madrid

“Memoirs of a coder who writes”

C90NM
Side A
1. I am Nando Muñoz, and for more than ten years I have been building products for big brands as a frontend tech lead. I came to the craft before AI did, and I have built frontend teams on Adobe Experience Manager and Salesforce Commerce Cloud.
2. I read, I underline and I write. I published a book of poems, Leyendo Claroscuros, and since then the word has mostly ended up in two places: poetry and the Cádiz Carnival, where I analyse popurrís verse by verse, with a calm that doesn't fit on social media.
3. For years I have been writing about both crafts and building things outside of work
Side B
1. Where to find me
  GitHub nandovejer
  X @nandovejer
  Blog soynando.com
  LinkedIn in/nandovejer
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM LUZDesign system NM-001C60

Dynamic cassette · Low noise · High output

NM-001 · C60

LUZ

Design system · 2024

“Enhance native HTML instead of replacing it.”

C60NM
Side A
1. LUZ (Light, Usable & Zero-dependency) is a design system in HTML, CSS and ES modules, with no runtime dependencies. The HTML you write comes out styled with no class, and classes only add what HTML cannot say.
2. You adopt it in independent layers: just the tokens, the tokens and the components, or the catalog on top, with search, cookie consent, a language switch and patterns for a landing page, a blog or documentation. A project that already has a design can load it inside one marked region and migrate page by page.
3. It brings components from buttons, forms and tables to tabs, modal dialogs, alerts and a video, audio and MIDI player. Each one has a page in the documentation with a live example, the markup to copy, and when to use it and when not to.
4. It aims for WCAG 2.2 level AA in its three colour modes, light, dark and high contrast: it works with a keyboard, focus is always visible and every page works without JavaScript. Automated checks run on every change, and the accessibility statement also says what has not been tested yet.
5. It is made for people while staying plain enough for an AI agent to write it correctly: the site publishes the closed list of classes, and luz-check reads a project's HTML and CSS offline and says which classes, elements, load order or colours are wrong.
6. Every change starts with a failing test, and every file has a size ceiling that nobody raises to make it pass. The colour palette is its own, and everything, fonts included, is under the MIT licence, with no registration and no telemetry.
Side B
1. Facts
  Technologies
  JavaScript · HTML · CSS
  Status
  Online
  Date
  2024
2. Links
  
  View demo
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM IKAYBrowser fingerprint NM-002C60

Dynamic cassette · Low noise · High output

NM-002 · C60

IKAY

Browser fingerprint · 2026

“Thirty-three data points, zero permissions.”

C60NM
Side A
1. IKAY reads 33 pieces of data that any website gets from your browser without asking for a single permission, and shows them as the file a website keeps on you.
2. The data runs from the city your IP gives away and the time zone, which compared with that IP's hints at a VPN, to memory, graphics card, battery, installed typefaces and incognito mode. It also follows your mouse, clicks and keys live, without storing anything.
3. Each one comes as a sentence, marked protected or not protected, with what it means for you and the technical detail folded away for the curious. At the end it computes “your ID”, a fingerprint that survives cookies and incognito mode, without storing or sending anything.
4. The page looks like a dossier: paper and ink, numbered chapters and entries, and a single alarm red used like a highlighter. Headings are set in Fraunces, reading text in Inter Tight and every value found in Fira Code.
5. It is in Spanish, English and Arabic, which reads right to left with no special cases. It has automatic, light, dark and high-contrast looks, with text at 7:1 or more in the last one, works with a keyboard, and no status relies on colour alone.
6. It is the modern version of the original IKAY, from 2020, which needed a build and had 16 cards: HTML, CSS and JavaScript on the LUZ tokens, no bundler and nothing to install. The tokens and typefaces are served from the repository itself, with no CDN, and there are no cookies and no analytics.
Side B
1. Facts
  Technologies
  JavaScript · CSS · HTML · LUZ
  Status
  Online
  Date
  2026
2. Links
  
  View demo
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM Chrome Local AIAI in the browser NM-003C60

Dynamic cassette · Low noise · High output

NM-003 · C60

Chrome Local AI

AI in the browser · 2025

“Artificial intelligence that never leaves your computer.”

C60NM
Side A
1. Demos of the AI APIs built into Chrome with Gemini Nano. Everything runs on your device: there is no server and, once the model is downloaded, no connection is needed either.
2. There is a playground with streamed answers, a chat with several sessions you can branch, JSON output that follows a schema, recipes to classify, extract or moderate text, a synonym finder that explains the nuances, and a toolkit to summarise, translate and rewrite the same text.
3. Every demo starts with a step-by-step guide; the site is bilingual and built with Astro, TypeScript and LUZ.
Side B
1. Facts
  Technologies
  TypeScript · Astro · Chrome AI · LUZ
  Status
  Online
  Date
  2025
2. Links
  
  View demo
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM ¿Quién canta hoy?Cádiz Carnival NM-004C60

Dynamic cassette · Low noise · High output

NM-004 · C60

¿Quién canta hoy?

Cádiz Carnival · 2023

“Which groups sing today, and in what order.”

C60NM
Side A
1. It answers the question everyone asks during the Cádiz Carnival: which group is on stage at the COAC right now, and when will mine be on. The contest at the Gran Teatro Falla lasts weeks, with one session a night and more than ten groups in each, and the official listing is a long table with no times.
2. This site turns it into a page for your phone that tells you which session is tonight, roughly when each group goes on, which one is live and how long until the next.
3. Each group's time is worked out from the running order, adding up the length of the performance and the set-up; they are estimates, not the official schedule. Every time is Cádiz time wherever you are, and the night's session still counts as that day's until the early morning.
4. Each group shows its category, coro, comparsa, chirigota or cuarteto, its author and its town. A search by author takes you to the group inside its session, and there is a link to the live broadcast on YouTube and another that looks up what the group performed the year before.
5. When the site is built, the real content of the sessions is written into the HTML, with its structured data, for search engines and readers without JavaScript. It has light, dark and high-contrast modes, and the last two meet WCAG level AA.
6. No accounts, no cookies and no server: React and TypeScript on a LUZ theme of its own, with the date logic kept apart from the components and tested, also against a simulated clock. Moving to a new round means adding the JSON copied from the official listing and editing a single file; the dates come from the JSON itself.
Side B
1. Facts
  Technologies
  TypeScript · React · Vite · LUZ
  Status
  Online
  Date
  2023
2. Links
  
  View demo
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM Ares APIMusic archive NM-005C60

Dynamic cassette · Low noise · High output

NM-005 · C60

Ares API

Music archive · 2026

“A whole body of work in JSON files.”

C60NM
Side A
1. A static, zero-dependency API with the complete discography and works of Antonio Martínez Ares, the comparsa writer of the Cádiz Carnival. It serves the compositions, the lyrics and their historical context as JSON files hosted on GitHub Pages, with no database, no server and no build step.
2. It includes a light index for search autocomplete without downloading all the data, the data split by era, and open CORS so any website can use it. It loads in under a second on a normal network and is free software under the MIT licence.
Side B
1. Facts
  Technologies
  JavaScript · HTML · CSS · JSON
  Status
  Online
  Date
  2026
2. Links
  
  View demo
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM Toolbar AEMChrome extension NM-006C60

Dynamic cassette · Low noise · High output

NM-006 · C60

Toolbar AEM

Chrome extension · 2025

“Jump between consoles without retyping URLs.”

C60NM
Side A
1. A Chrome extension that adds a floating toolbar to Adobe Experience Manager pages to jump between the Editor, the published view, Sites and CRXDE without retyping URLs, keeping the content path.
2. It reopens the same page on another environment (local, dev, QA, stage), gives each one its own coloured favicon so you never mistake Stage for Local, and keeps bookmarks to the paths you use most.
3. It works with AEM as a Cloud Service, AMS, on-premise and the local SDK, and settings are shared with the team as a JSON file. Plain JavaScript, Manifest V3, no build step and no dependencies.
Side B
1. Facts
  Technologies
  JavaScript · CSS · HTML · Chrome Extension
  Status
  Repository
  Date
  2025
2. Links
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM Acme StudioAccessibility NM-007C60

Dynamic cassette · Low noise · High output

NM-007 · C60

Acme Studio

Accessibility · 2026

“Broken on purpose, so you can learn to fix it.”

C60NM
Side A
1. The website of a made-up studio, Acme Studio, that looks clean but is broken on purpose so you can practise accessibility audits.
2. It has a skip link pointing to the wrong target, images without alternative text, an icon-only button with no name, a tampered tab order, headings that skip levels, a div that looks like a button but ignores the keyboard, and a table with no headers. The contact form adds labels that do not match their fields and fields with only a placeholder.
3. Every error is commented in the code, so you can check what you found.
Side B
1. Facts
  Technologies
  HTML
  Status
  Online
  Date
  2026
2. Links
  
  View demo
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM Libros del mundoLibrary NM-008C60

Dynamic cassette · Low noise · High output

NM-008 · C60

Libros del mundo

Library · 2024

“One book per country, published since 2010.”

C60NM
Side A
1. A literary journey across the continents: a list of books chosen by a simple rule, published from 2010 on and written by authors from the country they stand for. The idea is to look at what is being written and read today in each place, told from within, with the voices and themes of the 21st century.
2. It is an open, collaborative repository: anyone can suggest a book with a pull request and a short note on why they chose it, as long as it can be found in libraries or online.
Side B
1. Facts
  Technologies
  Markdown
  Status
  Repository
  Date
  2024
2. Links
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM String TransformerText tool NM-009C60

Dynamic cassette · Low noise · High output

NM-009 · C60

String Transformer

Text tool · 2023

“What you type never leaves your browser.”

C60NM
Side A
1. Turns any text into more than 50 formats in eight categories: naming conventions such as camelCase, snake_case or kebab-case, encodings such as Base64, URL, hex or Morse, classic ciphers such as ROT13 or Atbash, SHA hashes, a JWT payload and utilities to sort, dedupe or clean up lines.
2. It transforms as you type, tells you when the input is not in the expected format, suggests the format it detects and flips the conversion with one button. It all happens in the browser and nothing is sent to a server; it installs as a PWA, works offline and can also be used as a library or from the command line.
Side B
1. Facts
  Technologies
  JavaScript · HTML · CSS · PWA
  Status
  Online
  Date
  2023
2. Links
  
  View demo
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM Gestor de comparsasData dashboard NM-010C60

Dynamic cassette · Low noise · High output

NM-010 · C60

Gestor de comparsas

Data dashboard · 2026

“No backend: it all fits in one index.html.”

C60NM
Side A
1. A single-page app to record, import and analyse the comparsas of the COAC, the Cádiz carnival contest, and their kinds of discourse in each round, from the preliminaries to the final. It loads data from CSV, Excel or a form, avoids duplicate comparsa-and-year entries, is edited right in the table and saves changes in the browser.
2. A dashboard shows metrics and charts with filters, and questions in plain language are answered by Chrome’s local AI using only the filtered data. No backend and nothing to install: it all fits in one index.html.
Side B
1. Facts
  Technologies
  HTML · JavaScript · Chrome AI
  Status
  Online
  Date
  2026
2. Links
  
  View demo
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM illo-loaderWeb component NM-011C60

Dynamic cassette · Low noise · High output

NM-011 · C60

illo-loader

Web component · 2025

“One tag and any symbol.”

C60NM
Side A
1. A web component that shows an animated loading indicator and takes a single tag in any project, with or without a framework.
2. The animation is made of the symbol you choose, from a shaded block to dots, bars or musical signs, and it follows light and dark colour schemes with a smooth, configurable animation. Load it as a module from a CDN or from the repository’s own files.
Side B
1. Facts
  Technologies
  JavaScript · Web Components
  Status
  Repository
  Date
  2025
2. Links
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off
NM js-subtypenpm library NM-012C60

Dynamic cassette · Low noise · High output

NM-012 · C60

js-subtype

npm library · 2024

“More precise than typeof.”

C60NM
Side A
1. A small, zero-dependency library that tells you the exact subtype of any JavaScript value —Array, Date, Map, RegExp…— where typeof only says “object”.
2. It exposes a single function, getType, which returns the subtype’s name, handy to validate input precisely or decide how to handle a value. It works in Node.js and in modern browsers, installs from npm or yarn and is MIT licensed.
Side B
1. Facts
  Technologies
  JavaScript · Node.js
  Status
  Repository
  Date
  2024
2. Links
  
  View code
  
  Project page
B Date/Time
Noise reduction ☐On ☐Off A Date/Time
Noise reduction ☐On ☐Off

Where to find me

004 tapes