Younes Jaaidi

@younesjd.dev

975 Followers 134 Following

👨🏻‍🍳 Software Cook, Teacher & Coach @ https://marmicode.io ✨ Google Developer Expert for #Angular 🌊 Nx Champion ✅ https://marmico.de/test.ng: Pragmatic Angular Testing Course 👨🏻‍🏫 https://marmico.de/workshops 📚 https://marmico.de/cookbook

A terminal animation runs npx @testmex/vitestify, scans a large workspace, identifies test frameworks and configuration, then begins transforming files. Verification fails, so one file is rolled back; it reports an estimated $31.50 LLM budget and 6.5 hours of review time saved.

design doc, scaffolding (the noisy boilerplate), failing test, making the test pass.

That sequence is the review. You can watch the feature get built, decision by decision.

🫠 The problem is that most tooling is PR-first. I want to read the story, not just the last scene. So I'm exploring a commit-first review tool:

🔥 A heat map of review cost, so attention goes where it matters.
🏷️ Tags for each Charted Coding step (design, scaffold, red, green, ...), so a reviewer knows what kind of change they're looking at.
🤖 More importantly, it should tell if the AI commits were supervised or not.
👀 Reviewer routing. Maybe one person takes the design doc and another takes the implementation. See who reviewed what, at the commit level.

Still early, but I'm curious how you deal with this? and if such an OSS tool would be useful to you and what you would except from it?

Obviously, diffing, comments etc... are still handled by your current tools (e.g. Github)

Dark-themed code editor showing an Angular component class that uses signal-based inputs and a computed value. The class declares two required inputs, detectors and injections, and a computed property named signals that returns a flattened array of all signals from each injection using this.injections().flatMap(injection => injection.signals). Syntax highlighting emphasizes Angular APIs such as input.required and computed.

Alt text:

Side-by-side comparison of two AI-assisted software development workflows.

Left panel: 🌱 “Common” Spec Kit

A table compares six commands by LLM Cost and Review Cost:

Command LLM Cost Review Cost
/speckit.specify $0.66 ~1,200 words
/speckit.clarify $0.53 ~300 words
/speckit.plan $0.68 ~2,200 words
/speckit.tasks $0.29 ~1,800 words
/speckit.analyze $0.26 —
/speckit.implement $2.56 ~600 lines of code

Total: $4.98 with an estimated review time of 1h30 to 3h.

The review-cost column is shaded red, emphasizing the amount of text and code that must be reviewed.

⸻

Right panel: 🧭 Charted Coding

A similar table compares a different workflow:

Command LLM Cost Review Cost
/charted-design $0.88 ~930 words
/charted-review $0.87 —
3× /charted-scaffold $1.19 (avg. ~$0.40 each) ~230 lines of code (avg. ~80 each)
3× /charted-red $0.69 (avg. ~$0.23 each) ~200 lines of code (avg. ~70 each)
3× /charted-green $2.25 (avg. ~$0.75 each) ~90 lines of code (avg. ~30 each)

Total: $5.88 with an estimated review time of 40 minutes to 1h30.

The review-cost column is shaded green, highlighting that work is split into much smaller, incremental review units.

Overall message: Although Charted Coding costs slightly more in LLM usage ($5.88 vs. $4.98), it dramatically reduces review effort by replacing large documents and a single ~600-line implementation with smaller, incremental design documents and code changes, leading to a much shorter overall review time.

Person standing in front of a brick church, holding out a hand toward a graphic that reads “ASHES TO ASHES, SPEC TO SPEC” with a bouquet icon. A Dutch inscription is visible high on the church wall.

Promotional banner for an online “Pragmatic Angular Testing” workshop. A bearded instructor wearing a red apron stands in a kitchen with copper pans hanging in the background. On the left, large white text reads “PRAGMATIC ANGULAR TESTING WORKSHOP.” On the right, the event details: “June 16–18, Hands-on · Online.” Below, the banner identifies the instructor as Younes Jaaidi, a Google Developer Expert. In front of the instructor is a stylized cooking pot containing Angular, Vitest, JavaScript, and testing-related icons, reinforcing the cooking-themed branding. The overall design uses dark purple tones with bright white and magenta accents.

A large modern lecture hall with tiered seating filled with attendees at a tech conference or developer meetup. Many people are using laptops, tablets, or phones while listening to a presentation taking place out of frame. The room features high ceilings with curved wooden panels, large floor-to-ceiling windows letting in natural light, and dark walls with purple seating accents. The audience appears engaged, with most facing toward the front-right side of the room. The atmosphere is professional and focused, typical of a software engineering conference session.

Two men sitting at a wooden table, both looking serious and focused at a laptop in front of them.
The person on the left has curly hair and a beard, wearing a white t-shirt with a burgundy apron, giving a “chef / software cook” vibe.
The person on the right wears glasses, a gray beanie, a dark hoodie, and a white apron.

Background details:

* Rustic wooden furniture
* Decorative flowers and candles
* Large ocean-wave wall art
* Warm circular lamp behind the left person that almost looks like a halo/light fixture compositionally

The mood feels like:

* intense discussion
* startup founders debating something
* “two engineers reviewing production incidents”
* or “chef meets hacker podcast thumbnail.”

Promotional card for a ‘Pragmatic Angular Testing’ workshop. The design features a dark cooking-themed background with blurred kitchen utensils and a semi-transparent overlay. At the center is a stylized cooking pot illustration containing testing-related logos and icons, including Angular, Playwright masks, a checkmark, and a small astronaut character. A language toggle with a UK flag and ‘EN’ appears in the top-right corner. Below the illustration, the title ‘Pragmatic React Testing’ is displayed in large purple text, followed by the description: ‘Three days to turn testing chaos into a well-seasoned strategy. Learn to build tests that survive refactors, migrations, and deadlines.’ At the bottom are icons and labels indicating ‘3 Days’ and pricing ‘From €970’, along with a rounded ‘VIEW DETAILS’ button.

Screenshot of a video call with six participants in a grid layout. Three participants have cameras on in the top row: a smiling woman with glasses and a space-themed virtual background, a man in an apron smiling in front of copper pans and kitchen decor, and a woman waving in a bright room. In the bottom row, a man wearing headphones waves at the camera with a blurred background, another woman waves while smiling, and one participant has their camera off with the name ‘Hugo’ displayed on a black screen.

Man with curly hair and beard at a conference coffee break, pointing at a closed laptop on a small round table. In the background, attendees stand near a buffet counter with drinks and glasses.

Code snippet of a Vitest Angular test titled “search for a cookbook.”
It enables fake timers with vi.useFakeTimers(), creates a component using TestBed.createComponent(SearchForm), and then awaits fixture.whenStable(), annotated with a comment indicating a timeout issue (“⏳ test timeout 🤔”).

Slide comparing manual vs automatic handling of fake timers in a Vitest test.

Top-left code shows a test using fake timers manually:
• vi.runAllTimersAsync() to flush framework internals (e.g. Angular sync)
• vi.advanceTimersByTimeAsync(300) to handle debounce
Annotations explain both steps are required and can slow tests.

Bottom-left note explains that since Vitest 4.1.0, a “fast-forward” mode can automatically advance timers.

Right side shows simplified code using:
• vi.setTimerTickMode('nextTimerAsync')
No manual timer flushing or advancing is needed.

Footer includes author handle (@yjaaidi / @younesjd.dev) and a link to marmicode testing content.

Slack DM from November 15th, 2024. Younes Jaaidi: "My speculation is that Vitest will surpass Jest usage by Q1 2026 🔮". Brandon Roberts replies: "2026! 💀"

GitHub pull request page showing ‘refactor: remove experimental Jest and Web Test Runner builders #32582’ merged into angular:main. The screenshot highlights the pull request summary with 29 files changed, 34 checks, and a large red ‘−2,938’ code deletion indicator pointed to by a purple arrow.

screenshot of Dominik's post about Code Review fatigue then Younes's post about Charted Coding which tries to fix code review fatigue.

video shows different steps of charted coding https://github.com/marmicode/skills

A child sitting at a wooden table raises their hand excitedly while looking at a laptop. The laptop screen shows a split view with a Gemini conversation on the left and a brightly colored green game or animation on the right. The scene is indoors with soft lighting and a curtain in the background.

Younes and Rainer discussing what's on the screen on stage

A presenter stands at the front of a classroom, gesturing with raised hands while speaking to a group of attendees seated at desks with laptops. A large screen displays the slide “How to evaluate?” on a purple background. The room has floor-to-ceiling windows on one side and a whiteboard with diagrams on the other. The participants are focused on the talk, with some typing or taking notes.

A split-screen screenshot of a code editor. On the left, a TypeScript test file (recipe-search.browser.spec.ts) shows a describe block, a todo test, and an unfinished mountRecipeSearch async function. On the right, a hint panel displays a highlighted purple box containing guidance: seed a fake repository with two recipe entries before mounting, and configure TestBed with provideRecipeRepositoryFake() inside mountRecipeSearch before calling createComponent()

Screenshot of

eXtreme Programming (XP)
XP is a software development methodology that hasn't sold its soul to the devil of certification-driven business models.

Screenshot of Stackblitz running Vitest browser mode

Two smiling people stand by a round table covered with shiny hexagonal stickers featuring a purple design. They appear to be at a conference, with one wearing a badge labeled “NG-DE.” The setting has warm lighting, arched walls, and a casual atmosphere.

Two smiling people stand by a round table covered with shiny hexagonal stickers featuring a purple design. They appear to be at a conference, with one wearing a badge labeled “NG-DE.” The setting has warm lighting, arched walls, and a casual atmosphere.

Two speakers smile for a selfie on stage in front of a large, cheerful audience seated in rows inside a bright hall with arched walls and pink lighting. The crowd, many wearing conference badges, waves and makes peace signs toward the camera. A strong light beam shines from the back of the room, creating a radiant atmosphere.

A speaker presenting on stage at a tech conference, standing in front of a large screen displaying the slide “Experimental Vitest support.” The audience is seated in a spacious hall with arched architecture and soft purple lighting, creating a professional and engaging atmosphere.

Group photo of enthusiastic workshop participants in a classroom setting. Around fifteen people are smiling and posing together, some raising their hands or giving thumbs-up. Laptops, drinks, and notebooks are on the tables, and everyone wears name badges on lanyards. The atmosphere is friendly and energetic.

Banner for the ‘Pragmatic Angular Testing Workshop’. The background shows a bearded man wearing a colorful apron, standing in a kitchen with copper pans and developer-themed stickers. The text reads: ‘🍽️ Full Course · 3 Days Workshop · Online. 🐥 Early Bird Starts at €970. Three days to turn your testing chaos into a well-seasoned strategy. Learn to build tests that survive refactors, migrations, and deadlines.’ Buttons below say ‘BOOK A SESSION’ and ‘REQUEST A CUSTOM SESSION’. A small note at the bottom mentions: ‘🇫🇷 Formation également disponible en Français et éligible au financement OPCO.’

Code editor showing a Vitest test case written in TypeScript. The test is defined with it.fails() and labeled “🐞 should bind inputs even when property is assigned using constructor injection”. It defines two Angular standalone components — Title and Container. Title declares an input<string>() property and injects a service in the constructor. Container passes a "title" input to <jsc-title>. The test renders Container and expects the heading to be 'Hello input!'.

Pragmatic angular testing with vitest workshop banner with Evan You on banner

Vitest UI screenshot testing a workshop invite component

Live coding session of Charted Coding workflow with Cursor

code snippet with Angular's create component bindings option

Diagram representing charted coding and human / AI agent participation.
Creative tasks require more human attention than repetitive & time-consuming work.

It goes from design doc to writing failing tests and making them pass then finally refactoring.

screenshot of Younes' charted coding video showing design doc and mermaid.

Me sharing my screen and showing AI-assisted TDD with Cursor.

Rainer speaking at NgRome and Younes on screen talking with him.

Google Meet screenshot with Rainer speaking at NgRome and Younes watching

AI Agent responding with:
The MealPlanner service is currently not implemented-its methods all throw "Work in progress!" errors.
To write meaningful tests, the service needs at least a minimal implementation or a mock.

An infographic highlighting the 3 major phases of Charted Coding:
- Charting
- Auto-pilot
- Rerouting / Fine-tuning

It highlights how AI Agent participant increases on repetitive and time-consuming work while it decreases in favor of human participation for creative work.

Younes in apron explaining the benefits of combining Cursor & WallabyJS & Vitest for a TDD experience instead of common vibe coding + code & fix. The video also showcases a demo.

William Marques introducing the meetup and very focused attendees listened