Tutorials

Step-by-step guides drawn from real projects, grouped into tracks by topic.

RSS feed

Applying filters…

AdvancedArticle

The Tailwind class that vanishes without an error

A custom type scale and a class merger that ignores it: the shipped HTML loses the class, and nothing says so.

A design system under constraint step 1

  • Tailwind
  • TypeScript
  • React

4 steps10 min

IntermediateArticle

React context does not cross an island boundary

Composing a compound component inside a .astro file breaks the build; the assembly has to live on the React side.

A design system under constraint step 2

  • Astro
  • React

4 steps9 min

IntermediateArticle

A dark theme that does not flash

The theme has to be applied before the first paint, which a deferred module cannot do.

Web foundations step 1

  • Astro
  • CSS
  • TypeScript

4 steps12 min

Tracks

The tutorials on one subject, in the order they build on each other. Your progress is kept by your browser and never leaves it.

Beginner2 steps

Web foundations

The decisions you make once and that hold up the rest of the project: rendering, theming, tests.

By the end A static site that does not flash on load, and whose tests run against what actually ships.

0 / 2 read

  1. A dark theme that does not flash4 steps12 min
  2. Test the built site, not the dev server4 steps8 min
Start the track
Advanced2 steps

A design system under constraint

What breaks when you wire a component library onto your own tokens, and how to see it before production does.

By the end A reusable component layer whose silent failures are caught by tests rather than by a visitor.

0 / 2 read

  1. The Tailwind class that vanishes without an error4 steps10 min
  2. React context does not cross an island boundary4 steps9 min
Start the track
Start a project

Act

Dark themePin the site's appearancesetTheme({theme:"dark"})
Light themePin the site's appearancesetTheme({theme:"light"})
System themeFollow the system preference againsetTheme({theme:"system"})
Switch the site to FrenchFrançaissetLocale({locale:"fr"})
Labs — ProductFilter Labs by typefilterLabs({type:"Produit"})
Labs — PrototypeFilter Labs by typefilterLabs({type:"Prototype"})
Labs — ResearchFilter Labs by typefilterLabs({type:"Recherche"})
Labs — Reset filtersClear every Labs filterfilterLabs({reset:true})
Journal — EngineeringFilter the Journal by categoryfilterJournal({category:"Ingénierie"})
Journal — SecurityFilter the Journal by categoryfilterJournal({category:"Sécurité"})
Journal — Agent-NativeFilter the Journal by categoryfilterJournal({category:"Agent-Native"})
Journal — StudioFilter the Journal by categoryfilterJournal({category:"Studio"})
Journal — Reset filtersClear every Journal filterfilterJournal({reset:true})
Tutorials — BeginnerFilter tutorials by levelfilterTutorials({level:"Débutant"})
Tutorials — IntermediateFilter tutorials by levelfilterTutorials({level:"Intermédiaire"})
Tutorials — AdvancedFilter tutorials by levelfilterTutorials({level:"Avancé"})
Tutorials — Reset filtersClear every tutorials filterfilterTutorials({reset:true})

Services

DiscoveryFrame the product before the first line of code, so the budget builds instead of correcting.openService({service:"discovery"})
Product designAn interface that holds together, carried by a design system your developers can keep alive without us.openService({service:"design"})
Web developmentA fast web application that holds up over time, with the tests and delivery chain to match.openService({service:"web"})
Mobile developmentAn iOS and Android app from a single codebase, published on both stores.openService({service:"mobile"})
Infrastructure & securityInfrastructure described as code, and Zero Trust access that does not rest on a text message.openService({service:"infrastructure"})
Maintenance & evolutionA product kept current, watched and fixed, with someone who answers when it breaks.openService({service:"maintenance"})
Agent-Native Architecture AdvisoryMake an existing product agent-operable without rewriting it — and without opening more than it should.openService({service:"agent-native"})

Go to

YorroProduct engineering studio in Abidjan and Paris. We design, we build, we ship.navigate({page:"home"})
ServicesBuild a product end to end, or advise a team on its agent-native architecture.navigate({page:"services"})
LabsWhat the studio has built: products, prototypes and research, with where each one actually stands.navigate({page:"labs"})
TutorialsStep-by-step guides drawn from real projects, grouped into tracks by topic.navigate({page:"tutorials"})
JournalThe studio's notes and positions.navigate({page:"journal"})
ContactDescribe your project; you get a framing back, not a boilerplate quote.navigate({page:"contact"})
AboutWho runs the studio, how it works, and what it turns down.navigate({page:"about"})
↑↓ move↵ runesc closeOne Actions layer