GET http://www.dev.michaeljpitz.com/article/tailwind-css-construire-design-system-coherent

Response
200 OK
IP
216.73.216.91
Profiled on
Token
8cccb2

Components

4 Twig Components
12 Render Count
7 ms Render Time
4.0 MiB Memory Usage

Components

Name Metadata Render Count Render Time
CategoryBadge 
[Anonymous]
components/CategoryBadge.html.twig 		7 0.65ms
ArticleCard 
[Anonymous]
components/ArticleCard.html.twig 		3 2.30ms
Navbar 
"App\Twig\Components\NavbarComponent"
components/Navbar.html.twig 		1 3.41ms
Breadcrumb 
"App\Twig\Components\BreadcrumbComponent"
components/Breadcrumb.html.twig 		1 0.43ms

Render calls

Navbar App\Twig\Components\NavbarComponent 4.0 MiB 3.41 ms
Input props 
[]
Attributes 
[]
Component 
App\Twig\Components\NavbarComponent {#1583
  -categoryRepository: App\Repository\CategoryRepository {#1072 …}
}
Breadcrumb App\Twig\Components\BreadcrumbComponent 4.0 MiB 0.43 ms
Input props 
[
  "items" => [
    [
      "label" => "Accueil"
      "url" => "/"
    ]
    [
      "label" => "Articles"
      "url" => "/articles"
    ]
    [
      "label" => "JavaScript"
      "url" => "/categorie/javascript"
    ]
    [
      "label" => "Tailwind CSS"
      "url" => "/categorie/tailwind-css"
    ]
    [
      "label" => "Tailwind CSS : construire un design system cohérent"
    ]
  ]
]
Attributes 
[]
Component 
App\Twig\Components\BreadcrumbComponent {#1680
  +items: [
    [
      "label" => "Accueil"
      "url" => "/"
    ]
    [
      "label" => "Articles"
      "url" => "/articles"
    ]
    [
      "label" => "JavaScript"
      "url" => "/categorie/javascript"
    ]
    [
      "label" => "Tailwind CSS"
      "url" => "/categorie/tailwind-css"
    ]
    [
      "label" => "Tailwind CSS : construire un design system cohérent"
    ]
  ]
}
CategoryBadge 
[Anonymous]
 4.0 MiB 0.37 ms
Input props 
[
  "category" => App\Entity\Category {#1165
    -id: 286
    -title: "JavaScript"
    -slug: "javascript"
    -color: "#f0db4f"
    -description: "JavaScript moderne : ES6+, outils et écosystème front-end."
    -level: 0
    -articles: Doctrine\ORM\PersistentCollection {#1191 …}
    -pages: Doctrine\ORM\PersistentCollection {#1209 …}
  }
]
Attributes 
[
  "category" => "JavaScript"
]
Component 
Symfony\UX\TwigComponent\AnonymousComponent {#1719
  -props: [
    "category" => App\Entity\Category {#1165
      -id: 286
      -title: "JavaScript"
      -slug: "javascript"
      -color: "#f0db4f"
      -description: "JavaScript moderne : ES6+, outils et écosystème front-end."
      -level: 0
      -articles: Doctrine\ORM\PersistentCollection {#1191 …}
      -pages: Doctrine\ORM\PersistentCollection {#1209 …}
    }
  ]
}
CategoryBadge 
[Anonymous]
 4.0 MiB 0.04 ms
Input props 
[
  "category" => App\Entity\Category {#1203
    -id: 290
    -title: "Tailwind CSS"
    -slug: "tailwind-css"
    -color: "#38bdf8"
    -description: "Tailwind CSS : classes utilitaires et design system."
    -level: 286
    -articles: Doctrine\ORM\PersistentCollection {#1210 …}
    -pages: Doctrine\ORM\PersistentCollection {#1212 …}
  }
]
Attributes 
[
  "category" => "Tailwind CSS"
]
Component 
Symfony\UX\TwigComponent\AnonymousComponent {#1739
  -props: [
    "category" => App\Entity\Category {#1203
      -id: 290
      -title: "Tailwind CSS"
      -slug: "tailwind-css"
      -color: "#38bdf8"
      -description: "Tailwind CSS : classes utilitaires et design system."
      -level: 286
      -articles: Doctrine\ORM\PersistentCollection {#1210 …}
      -pages: Doctrine\ORM\PersistentCollection {#1212 …}
    }
  ]
}
ArticleCard 
[Anonymous]
 4.0 MiB 1.14 ms
Input props 
[
  "article" => App\Entity\Article {#1341
    -id: 722
    -title: "Stimulus.js avec Symfony UX : guide pratique"
    -slug: "stimulus-js-symfony-ux-guide-pratique"
    -content: "<h2>Stimulus.js avec Symfony UX : guide pratique</h2><p>Cet article explore en détail les concepts fondamentaux et avancés liés à ce sujet. Que vous soyez débutant ou développeur confirmé, vous trouverez ici des informations pratiques et des exemples concrets.</p><h3>Pourquoi ce sujet est important</h3><p>Dans le développement web moderne, maîtriser ces concepts vous permettra d'écrire un code plus maintenable, plus performant et plus sécurisé. Les équipes qui adoptent ces pratiques constatent une réduction significative du temps de débogage.</p><h3>Mise en pratique</h3><p>Voici comment appliquer ces connaissances dans un projet Symfony réel. Commencez par configurer votre environnement de développement correctement, puis suivez les étapes décrites ci-dessous.</p><pre><code>// Exemple de code commenté&#10;// Adaptez ce code à votre contexte</code></pre><h3>Points clés à retenir</h3><ul><li>Toujours utiliser le typage strict en PHP 8+</li><li>Privilégier les attributs PHP aux annotations pour la configuration</li><li>Tester régulièrement avec PHPUnit pour garantir la stabilité</li></ul><p>N'hésitez pas à laisser un commentaire si vous avez des questions ou des suggestions d'amélioration.</p>"
    -excerpt: "Intégrez Stimulus.js dans votre projet Symfony via AssetMapper pour une interactivité légère."
    -featuredImage: null
    -imageFile: null
    -isPublished: true
    -createdAt: DateTimeImmutable @1782709593 {#1248
      date: 2026-06-29 05:06:33.0 UTC (+00:00)
    }
    -publishedAt: DateTimeImmutable @1781586393 {#1369
      date: 2026-06-16 05:06:33.0 UTC (+00:00)
    }
    -updatedAt: null
    -categories: Doctrine\ORM\PersistentCollection {#1370 …}
    -comments: Doctrine\ORM\PersistentCollection {#1362 …}
    -ratings: Doctrine\ORM\PersistentCollection {#1360 …}
  }
]
Attributes 
[
  "article" => "Stimulus.js avec Symfony UX : guide pratique"
]
Component 
Symfony\UX\TwigComponent\AnonymousComponent {#1774
  -props: [
    "article" => App\Entity\Article {#1341
      -id: 722
      -title: "Stimulus.js avec Symfony UX : guide pratique"
      -slug: "stimulus-js-symfony-ux-guide-pratique"
      -content: "<h2>Stimulus.js avec Symfony UX : guide pratique</h2><p>Cet article explore en détail les concepts fondamentaux et avancés liés à ce sujet. Que vous soyez débutant ou développeur confirmé, vous trouverez ici des informations pratiques et des exemples concrets.</p><h3>Pourquoi ce sujet est important</h3><p>Dans le développement web moderne, maîtriser ces concepts vous permettra d'écrire un code plus maintenable, plus performant et plus sécurisé. Les équipes qui adoptent ces pratiques constatent une réduction significative du temps de débogage.</p><h3>Mise en pratique</h3><p>Voici comment appliquer ces connaissances dans un projet Symfony réel. Commencez par configurer votre environnement de développement correctement, puis suivez les étapes décrites ci-dessous.</p><pre><code>// Exemple de code commenté&#10;// Adaptez ce code à votre contexte</code></pre><h3>Points clés à retenir</h3><ul><li>Toujours utiliser le typage strict en PHP 8+</li><li>Privilégier les attributs PHP aux annotations pour la configuration</li><li>Tester régulièrement avec PHPUnit pour garantir la stabilité</li></ul><p>N'hésitez pas à laisser un commentaire si vous avez des questions ou des suggestions d'amélioration.</p>"
      -excerpt: "Intégrez Stimulus.js dans votre projet Symfony via AssetMapper pour une interactivité légère."
      -featuredImage: null
      -imageFile: null
      -isPublished: true
      -createdAt: DateTimeImmutable @1782709593 {#1248
        date: 2026-06-29 05:06:33.0 UTC (+00:00)
      }
      -publishedAt: DateTimeImmutable @1781586393 {#1369
        date: 2026-06-16 05:06:33.0 UTC (+00:00)
      }
      -updatedAt: null
      -categories: Doctrine\ORM\PersistentCollection {#1370 …}
      -comments: Doctrine\ORM\PersistentCollection {#1362 …}
      -ratings: Doctrine\ORM\PersistentCollection {#1360 …}
    }
  ]
}
CategoryBadge 
[Anonymous]
 4.0 MiB 0.06 ms
Input props 
[
  "category" => App\Entity\Category {#1165
    -id: 286
    -title: "JavaScript"
    -slug: "javascript"
    -color: "#f0db4f"
    -description: "JavaScript moderne : ES6+, outils et écosystème front-end."
    -level: 0
    -articles: Doctrine\ORM\PersistentCollection {#1191 …}
    -pages: Doctrine\ORM\PersistentCollection {#1209 …}
  }
]
Attributes 
[
  "category" => "JavaScript"
]
Component 
Symfony\UX\TwigComponent\AnonymousComponent {#1804
  -props: [
    "category" => App\Entity\Category {#1165
      -id: 286
      -title: "JavaScript"
      -slug: "javascript"
      -color: "#f0db4f"
      -description: "JavaScript moderne : ES6+, outils et écosystème front-end."
      -level: 0
      -articles: Doctrine\ORM\PersistentCollection {#1191 …}
      -pages: Doctrine\ORM\PersistentCollection {#1209 …}
    }
  ]
}
CategoryBadge 
[Anonymous]
 4.0 MiB 0.04 ms
Input props 
[
  "category" => App\Entity\Category {#1596
    -id: 289
    -title: "Stimulus.js"
    -slug: "stimulus-js"
    -color: "#e04c16"
    -description: "Stimulus.js : contrôleurs légers pour enrichir le HTML."
    -level: 286
    -articles: Doctrine\ORM\PersistentCollection {#1600 …}
    -pages: Doctrine\ORM\PersistentCollection {#1603 …}
  }
]
Attributes 
[
  "category" => "Stimulus.js"
]
Component 
Symfony\UX\TwigComponent\AnonymousComponent {#1824
  -props: [
    "category" => App\Entity\Category {#1596
      -id: 289
      -title: "Stimulus.js"
      -slug: "stimulus-js"
      -color: "#e04c16"
      -description: "Stimulus.js : contrôleurs légers pour enrichir le HTML."
      -level: 286
      -articles: Doctrine\ORM\PersistentCollection {#1600 …}
      -pages: Doctrine\ORM\PersistentCollection {#1603 …}
    }
  ]
}
ArticleCard 
[Anonymous]
 4.0 MiB 0.52 ms
Input props 
[
  "article" => App\Entity\Article {#1356
    -id: 728
    -title: "JavaScript ES2024 : les fonctionnalités à connaître"
    -slug: "javascript-es2024-fonctionnalites-a-connaitre"
    -content: "<h2>JavaScript ES2024 : les fonctionnalités à connaître</h2><p>Cet article explore en détail les concepts fondamentaux et avancés liés à ce sujet. Que vous soyez débutant ou développeur confirmé, vous trouverez ici des informations pratiques et des exemples concrets.</p><h3>Pourquoi ce sujet est important</h3><p>Dans le développement web moderne, maîtriser ces concepts vous permettra d'écrire un code plus maintenable, plus performant et plus sécurisé. Les équipes qui adoptent ces pratiques constatent une réduction significative du temps de débogage.</p><h3>Mise en pratique</h3><p>Voici comment appliquer ces connaissances dans un projet Symfony réel. Commencez par configurer votre environnement de développement correctement, puis suivez les étapes décrites ci-dessous.</p><pre><code>// Exemple de code commenté&#10;// Adaptez ce code à votre contexte</code></pre><h3>Points clés à retenir</h3><ul><li>Toujours utiliser le typage strict en PHP 8+</li><li>Privilégier les attributs PHP aux annotations pour la configuration</li><li>Tester régulièrement avec PHPUnit pour garantir la stabilité</li></ul><p>N'hésitez pas à laisser un commentaire si vous avez des questions ou des suggestions d'amélioration.</p>"
    -excerpt: "Tour d'horizon des nouveautés JavaScript ES2024 : groupement, Promise.withResolvers et plus."
    -featuredImage: null
    -imageFile: null
    -isPublished: true
    -createdAt: DateTimeImmutable @1782709593 {#1358
      date: 2026-06-29 05:06:33.0 UTC (+00:00)
    }
    -publishedAt: DateTimeImmutable @1780031193 {#1357
      date: 2026-05-29 05:06:33.0 UTC (+00:00)
    }
    -updatedAt: null
    -categories: Doctrine\ORM\PersistentCollection {#1355 …}
    -comments: Doctrine\ORM\PersistentCollection {#1353 …}
    -ratings: Doctrine\ORM\PersistentCollection {#1351 …}
  }
]
Attributes 
[
  "article" => "JavaScript ES2024 : les fonctionnalités à connaître"
]
Component 
Symfony\UX\TwigComponent\AnonymousComponent {#1835
  -props: [
    "article" => App\Entity\Article {#1356
      -id: 728
      -title: "JavaScript ES2024 : les fonctionnalités à connaître"
      -slug: "javascript-es2024-fonctionnalites-a-connaitre"
      -content: "<h2>JavaScript ES2024 : les fonctionnalités à connaître</h2><p>Cet article explore en détail les concepts fondamentaux et avancés liés à ce sujet. Que vous soyez débutant ou développeur confirmé, vous trouverez ici des informations pratiques et des exemples concrets.</p><h3>Pourquoi ce sujet est important</h3><p>Dans le développement web moderne, maîtriser ces concepts vous permettra d'écrire un code plus maintenable, plus performant et plus sécurisé. Les équipes qui adoptent ces pratiques constatent une réduction significative du temps de débogage.</p><h3>Mise en pratique</h3><p>Voici comment appliquer ces connaissances dans un projet Symfony réel. Commencez par configurer votre environnement de développement correctement, puis suivez les étapes décrites ci-dessous.</p><pre><code>// Exemple de code commenté&#10;// Adaptez ce code à votre contexte</code></pre><h3>Points clés à retenir</h3><ul><li>Toujours utiliser le typage strict en PHP 8+</li><li>Privilégier les attributs PHP aux annotations pour la configuration</li><li>Tester régulièrement avec PHPUnit pour garantir la stabilité</li></ul><p>N'hésitez pas à laisser un commentaire si vous avez des questions ou des suggestions d'amélioration.</p>"
      -excerpt: "Tour d'horizon des nouveautés JavaScript ES2024 : groupement, Promise.withResolvers et plus."
      -featuredImage: null
      -imageFile: null
      -isPublished: true
      -createdAt: DateTimeImmutable @1782709593 {#1358
        date: 2026-06-29 05:06:33.0 UTC (+00:00)
      }
      -publishedAt: DateTimeImmutable @1780031193 {#1357
        date: 2026-05-29 05:06:33.0 UTC (+00:00)
      }
      -updatedAt: null
      -categories: Doctrine\ORM\PersistentCollection {#1355 …}
      -comments: Doctrine\ORM\PersistentCollection {#1353 …}
      -ratings: Doctrine\ORM\PersistentCollection {#1351 …}
    }
  ]
}
CategoryBadge 
[Anonymous]
 4.0 MiB 0.05 ms
Input props 
[
  "category" => App\Entity\Category {#1165
    -id: 286
    -title: "JavaScript"
    -slug: "javascript"
    -color: "#f0db4f"
    -description: "JavaScript moderne : ES6+, outils et écosystème front-end."
    -level: 0
    -articles: Doctrine\ORM\PersistentCollection {#1191 …}
    -pages: Doctrine\ORM\PersistentCollection {#1209 …}
  }
]
Attributes 
[
  "category" => "JavaScript"
]
Component 
Symfony\UX\TwigComponent\AnonymousComponent {#1860
  -props: [
    "category" => App\Entity\Category {#1165
      -id: 286
      -title: "JavaScript"
      -slug: "javascript"
      -color: "#f0db4f"
      -description: "JavaScript moderne : ES6+, outils et écosystème front-end."
      -level: 0
      -articles: Doctrine\ORM\PersistentCollection {#1191 …}
      -pages: Doctrine\ORM\PersistentCollection {#1209 …}
    }
  ]
}
ArticleCard 
[Anonymous]
 4.0 MiB 0.63 ms
Input props 
[
  "article" => App\Entity\Article {#1347
    -id: 731
    -title: "Tailwind CSS en mode sombre : stratégies et pièges"
    -slug: "tailwind-css-mode-sombre-strategies-pieges"
    -content: "<h2>Tailwind CSS en mode sombre : stratégies et pièges</h2><p>Cet article explore en détail les concepts fondamentaux et avancés liés à ce sujet. Que vous soyez débutant ou développeur confirmé, vous trouverez ici des informations pratiques et des exemples concrets.</p><h3>Pourquoi ce sujet est important</h3><p>Dans le développement web moderne, maîtriser ces concepts vous permettra d'écrire un code plus maintenable, plus performant et plus sécurisé. Les équipes qui adoptent ces pratiques constatent une réduction significative du temps de débogage.</p><h3>Mise en pratique</h3><p>Voici comment appliquer ces connaissances dans un projet Symfony réel. Commencez par configurer votre environnement de développement correctement, puis suivez les étapes décrites ci-dessous.</p><pre><code>// Exemple de code commenté&#10;// Adaptez ce code à votre contexte</code></pre><h3>Points clés à retenir</h3><ul><li>Toujours utiliser le typage strict en PHP 8+</li><li>Privilégier les attributs PHP aux annotations pour la configuration</li><li>Tester régulièrement avec PHPUnit pour garantir la stabilité</li></ul><p>N'hésitez pas à laisser un commentaire si vous avez des questions ou des suggestions d'amélioration.</p>"
    -excerpt: "Implémentez un mode sombre fiable avec Tailwind CSS sans casser votre design au fil du temps."
    -featuredImage: null
    -imageFile: null
    -isPublished: true
    -createdAt: DateTimeImmutable @1782709593 {#1349
      date: 2026-06-29 05:06:33.0 UTC (+00:00)
    }
    -publishedAt: DateTimeImmutable @1779253593 {#1348
      date: 2026-05-20 05:06:33.0 UTC (+00:00)
    }
    -updatedAt: null
    -categories: Doctrine\ORM\PersistentCollection {#1346 …}
    -comments: Doctrine\ORM\PersistentCollection {#1344 …}
    -ratings: Doctrine\ORM\PersistentCollection {#1342 …}
  }
]
Attributes 
[
  "article" => "Tailwind CSS en mode sombre : stratégies et pièges"
]
Component 
Symfony\UX\TwigComponent\AnonymousComponent {#1874
  -props: [
    "article" => App\Entity\Article {#1347
      -id: 731
      -title: "Tailwind CSS en mode sombre : stratégies et pièges"
      -slug: "tailwind-css-mode-sombre-strategies-pieges"
      -content: "<h2>Tailwind CSS en mode sombre : stratégies et pièges</h2><p>Cet article explore en détail les concepts fondamentaux et avancés liés à ce sujet. Que vous soyez débutant ou développeur confirmé, vous trouverez ici des informations pratiques et des exemples concrets.</p><h3>Pourquoi ce sujet est important</h3><p>Dans le développement web moderne, maîtriser ces concepts vous permettra d'écrire un code plus maintenable, plus performant et plus sécurisé. Les équipes qui adoptent ces pratiques constatent une réduction significative du temps de débogage.</p><h3>Mise en pratique</h3><p>Voici comment appliquer ces connaissances dans un projet Symfony réel. Commencez par configurer votre environnement de développement correctement, puis suivez les étapes décrites ci-dessous.</p><pre><code>// Exemple de code commenté&#10;// Adaptez ce code à votre contexte</code></pre><h3>Points clés à retenir</h3><ul><li>Toujours utiliser le typage strict en PHP 8+</li><li>Privilégier les attributs PHP aux annotations pour la configuration</li><li>Tester régulièrement avec PHPUnit pour garantir la stabilité</li></ul><p>N'hésitez pas à laisser un commentaire si vous avez des questions ou des suggestions d'amélioration.</p>"
      -excerpt: "Implémentez un mode sombre fiable avec Tailwind CSS sans casser votre design au fil du temps."
      -featuredImage: null
      -imageFile: null
      -isPublished: true
      -createdAt: DateTimeImmutable @1782709593 {#1349
        date: 2026-06-29 05:06:33.0 UTC (+00:00)
      }
      -publishedAt: DateTimeImmutable @1779253593 {#1348
        date: 2026-05-20 05:06:33.0 UTC (+00:00)
      }
      -updatedAt: null
      -categories: Doctrine\ORM\PersistentCollection {#1346 …}
      -comments: Doctrine\ORM\PersistentCollection {#1344 …}
      -ratings: Doctrine\ORM\PersistentCollection {#1342 …}
    }
  ]
}
CategoryBadge 
[Anonymous]
 4.0 MiB 0.06 ms
Input props 
[
  "category" => App\Entity\Category {#1165
    -id: 286
    -title: "JavaScript"
    -slug: "javascript"
    -color: "#f0db4f"
    -description: "JavaScript moderne : ES6+, outils et écosystème front-end."
    -level: 0
    -articles: Doctrine\ORM\PersistentCollection {#1191 …}
    -pages: Doctrine\ORM\PersistentCollection {#1209 …}
  }
]
Attributes 
[
  "category" => "JavaScript"
]
Component 
Symfony\UX\TwigComponent\AnonymousComponent {#1899
  -props: [
    "category" => App\Entity\Category {#1165
      -id: 286
      -title: "JavaScript"
      -slug: "javascript"
      -color: "#f0db4f"
      -description: "JavaScript moderne : ES6+, outils et écosystème front-end."
      -level: 0
      -articles: Doctrine\ORM\PersistentCollection {#1191 …}
      -pages: Doctrine\ORM\PersistentCollection {#1209 …}
    }
  ]
}
CategoryBadge 
[Anonymous]
 4.0 MiB 0.04 ms
Input props 
[
  "category" => App\Entity\Category {#1203
    -id: 290
    -title: "Tailwind CSS"
    -slug: "tailwind-css"
    -color: "#38bdf8"
    -description: "Tailwind CSS : classes utilitaires et design system."
    -level: 286
    -articles: Doctrine\ORM\PersistentCollection {#1210 …}
    -pages: Doctrine\ORM\PersistentCollection {#1212 …}
  }
]
Attributes 
[
  "category" => "Tailwind CSS"
]
Component 
Symfony\UX\TwigComponent\AnonymousComponent {#1919
  -props: [
    "category" => App\Entity\Category {#1203
      -id: 290
      -title: "Tailwind CSS"
      -slug: "tailwind-css"
      -color: "#38bdf8"
      -description: "Tailwind CSS : classes utilitaires et design system."
      -level: 286
      -articles: Doctrine\ORM\PersistentCollection {#1210 …}
      -pages: Doctrine\ORM\PersistentCollection {#1212 …}
    }
  ]
}