Forem: Francesc López

80% of JavaScript code comes from 20% of its features?

Francesc López — Sat, 04 Oct 2025 21:27:47 +0000

I analyzed several popular JavaScript repositories to see how much of the language is actually used in real projects.

Turns out the 80/20 rule is real — about 20–25% of language features cover 80–90% of the code.

I believe the data and interpretation are roughly correct — but I’m always open to feedback or alternative views.

Aggregate Per 1K LOC

Summary

Aggregate Analysis Summary

Dataset Overview:

Total repositories analyzed: 55
Total features in JavaScript catalog: 121
Analysis covers: totals, presence, perKLOC metrics

Total Occurrences - Aggregate Results

80% of totals achieved with 17 features (14.0% of catalog)
90% of totals achieved with 30 features (24.8% of catalog)
95% of totals achieved with 42 features (34.7% of catalog)

File Presence - Aggregate Results

80% of presence achieved with 33 features (27.3% of catalog)
90% of presence achieved with 46 features (38.0% of catalog)
95% of presence achieved with 60 features (49.6% of catalog)

Per 1000 Lines of Code - Aggregate Results

80% of perKLOC achieved with 21 features (17.4% of catalog)
90% of perKLOC achieved with 34 features (28.1% of catalog)
95% of perKLOC achieved with 46 features (38.0% of catalog)

Top 7 Features

Rank	Feature	Count	%	Cumulative %
1	binaryOp_/	1298069	20.08%	20.08%
2	labels	781944	12.09%	32.17%
3	assignOp_=	711165	11.00%	43.17%
4	functions	392279	6.07%	49.24%
5	return	265406	4.10%	53.34%
6	if	255167	3.95%	57.29%
7	binaryOp_+	253173	3.92%	61.21%

Pareto Analysis

80% of usage comes from 17 features (14.0% of catalog):
binaryOp_/, labels, assignOp_=, functions, return, if, binaryOp_+, binaryOp_*, binaryOp_|, arrowFunctions, binaryOp_===, binaryOp_-, binaryOp_>>, logicalAND, binaryOp_<, ternary, awaitExpressions

90% of usage comes from 30 features (24.8% of catalog):
binaryOp_/, labels, assignOp_=, functions, return, if, binaryOp_+, binaryOp_*, binaryOp_|, arrowFunctions, binaryOp_===, binaryOp_-, binaryOp_>>, logicalAND, binaryOp_<, ternary, awaitExpressions, logicalOR, binaryOp_>, binaryOp_!==, exportDecls_named, importDecls, switchCases, jsxElements, updateOp_++, templateLiterals, forClassic, asyncFunctions, break, spreadElement

95% of usage comes from 42 features (34.7% of catalog):
binaryOp_/, labels, assignOp_=, functions, return, if, binaryOp_+, binaryOp_*, binaryOp_|, arrowFunctions, binaryOp_===, binaryOp_-, binaryOp_>>, logicalAND, binaryOp_<, ternary, awaitExpressions, logicalOR, binaryOp_>, binaryOp_!==, exportDecls_named, importDecls, switchCases, jsxElements, updateOp_++, templateLiterals, forClassic, asyncFunctions, break, spreadElement, classFields, classMethods, binaryOp_==, binaryOp_>>>, interpolatedTemplates, throw, classDecls, binaryOp_&, assignOp_+=, binaryOp_<<, binaryOp_%, updateOp_--

Catalog Usage Summary

Total features in JavaScript catalog: 121

Usage Threshold	Features Required	Catalog Percentage
80%	17	14.0%
90%	30	24.8%
95%	42	34.7%

Metrics explained

Totals How often each feature appears overall across all repositories. Shows which constructs dominate codebases globally (like if, =, or function).
Presence In how many different files a feature is found. Reflects how widespread a construct is — some appear everywhere, others only in a few modules.
Per KLOC Density per 1000 lines of code. Normalizes for project size, letting you compare big and small repos fairly.

Each of these views shows a clear Pareto pattern:

A small core of features (around 20–30 out of 121) accounts for most of the language usage.

You can see the results and charts here:

Live reports

GitHub repo

Any comments or insights are welcome

Live Transcription of a Radio Station with Whisper in Vibe Coding Mode

Francesc López — Mon, 09 Jun 2025 14:25:20 +0000

The Project

This project is a small experiment to capture and transcribe in real time an audio stream from a radio station and display the most relevant fragments using a minimalist web interface. All of it is automated with Docker.

It's also a personal vibe coding test, done with a clear goal but no prior planning—just following intuition to see how far one can accelerate development. Although the project works, I acknowledge that with this process you lose part of the pleasure of structured knowledge and planning, which would make the solution more robust and scalable.

This fast and improvised way of coding tends to skip certain abstractions and structures that are often what enable deeper creativity: the kind that emerges when tools not only work, but you understand why they work.

Access the Demo

Try it: https://eurekatop.com/radioalert
SSE Endpoint: https://eurekatop.com/radioalert/events

Backend: Automatic Transcription with Whisper

The core of the project is a Python script that listens to the stream as if it were a browser. At first, I tried using ffmpeg to capture the stream, but it failed because the station has anti-bot protections and the connection was not accepted.

As an alternative, I found that using httpx.stream() allows reading the audio stream without issues—as long as the request looks like a real browser's. That’s why you need to add some headers...

The script is split into two parts: one for capturing the stream and another for transcription and keyword filtering. This transcription runs in parallel with the stream capture, so there's no need to wait for it to finish before continuing to capture.

The audio is processed in 4-second chunks and transcribed using the optimized Whisper model (int8).

model = WhisperModel("/models/whisper-small", compute_type="int8")
segments, _ = model.transcribe(BytesIO(audio_data), language="ca")

Once transcribed, it checks for keywords like “barça”, “avui”, or “lamine yamal”. If any are found, it triggers an alert and logs everything to a .log file. For example:

🕒 [2025-06-09 14:10:23] 🗣️ [12] avui a catalunya hem vist que...

🚨 🕒 [2025-06-09 14:10:23] ALERT: Keyword detected: avui

The system includes a short queue of previous audio to avoid cutting off sentence beginnings, since the model needs context to understand the stream correctly.

All of it is automated with Docker.

Frontend: Live Visualization

A small Node.js server displays the transcribed lines live from a .log file, sending them via Server-Sent Events to the terminal-style web interface.

fs.readFile(FILE_PATH, 'utf8', (err, data) => {
  const lines = data.trim().split('\n').slice(-30)
  lines.forEach(line => res.write(`data: ${line}\n\n`))
})

On the client side, the connection remains open with the browser's EventSource(), which automatically receives real-time updates:

const eventSource = new EventSource('/events')
eventSource.onmessage = function(event) {
  console.log(event.data)
}

Learnings

Whisper is quite reliable.
Adding a buffer of previous audio improves accuracy in clipped sentences.
With httpx.stream and lightweight threads, you can capture audio stably without overloading the main process. ffmpeg was initially used but discarded to avoid anti-bot protections by simulating a real browser connection.
Server-Sent Events are a very simple yet effective tool to stream live data to a web app.

Stack and Techniques

🐍 Python + faster-whisper
📡 httpx for capturing audio streams
🎛️ Transcription with the optimized Whisper-small model
🐳 Docker to encapsulate the service
🟩 Node.js + Express to expose the file as an SSE feed
🎨 HTML + CSS in terminal-console style

Visualizing MIDI with Three.js, Tone.js, and TypeScript

Francesc López — Sat, 05 Apr 2025 10:00:23 +0000

Some time ago i built a fun little music visualizer that reads a MIDI file and generates a 3D piano roll in sync with the music. The project combines music and 3D graphics for a creative coding experience.

🧠 Idea

The concept is simple: load a MIDI file, and use Three.js to create the 3D visuals triggered by the notes. Tone.js handles the MIDI playback, and everything runs in the browser.

🔧 Tech Stack

Three.js for 3D rendering
Tone.js for MIDI playback
Vite for bundling and development
TypeScript for type-safety and cleaner code

🎮 Try it live

👉 Live demo on Surge

📦 Source code on GitHub

🧩 What could be better

Some parts of the code are a bit rough. Still, it's fun to share this as-is!

💭 Let me know what you think

Thanks for reading, and I hope you enjoy the music! 🎧✨