CINXE.COM

Dependency Injection and the art of services and containers Video Tutorial Screencast | SymfonyCasts

<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head prefix="og: http://ogp.me/ns#"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Get your object-oriented skills sharp by exploring the ideas and reasons behind dependency injection. This simple principle separates developers who write functional code from those that are able to build great, and maintanable applications"> <link rel="canonical" href="https://symfonycasts.com/screencast/dependency-injection"> <meta property="og:title" content="Dependency Injection and the art of services and containers Video Tutorial Screencast"> <meta property="og:description" content="Get your object-oriented skills sharp by exploring the ideas and reasons behind dependency injection. This simple principle separates developers who write functional code from those that are able to build great, and maintanable applications"> <meta property="og:url" content="https://symfonycasts.com/screencast/dependency-injection"> <meta property="og:image" content="https://symfonycasts.com/static/media/cache/course_video_poster_large/uploads/screencast/dependency-injection/dependency-injection-394.png"> <meta name="twitter:card" content="summary"> <title>Dependency Injection and the art of services and containers Video Tutorial Screencast | SymfonyCasts</title> <link rel="stylesheet" href="https://symfonycasts.com/build/150.42a35cc8.css" data-turbo-track="reload"><link rel="stylesheet" href="https://symfonycasts.com/build/tailwind.d798e5a4.css" data-turbo-track="reload"> <link rel="preconnect" href="https://kit.fontawesome.com"> <link rel="preconnect" href="https://api.fontshare.com"> <link rel="stylesheet" href="https://kit.fontawesome.com/f44096511e.css" crossorigin="anonymous"> <script async defer src="https://sa.symfonycasts.com/latest.js"></script> <script src="https://symfonycasts.com/build/runtime.f090d72d.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/8764.79cb6dbe.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/560.7017a8cd.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4987.fd46174f.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4184.24dfa7a0.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/2624.eedc0a93.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/969.cbfbbb6b.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4430.b8f58b3a.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/4079.d25f5551.js" defer data-turbo-track="reload"></script><script src="https://symfonycasts.com/build/tailwind.1044c30e.js" defer data-turbo-track="reload"></script> </head> <body class="min-h-screen bg-white text-black-8 dark:text-white dark:bg-black-9" data-user-id="" data-is-dark-mode-on="false" > <header data-controller="mobile-menu" class="border-b border-black-2 dark:border-black-8 dark:bg-black-9"> <section class="max-w-screen-2xl mx-auto py-3 px-5 flex justify-between items-center"> <div class="flex grow"> <button data-action="mobile-menu#toggle:prevent" class="md:hidden cursor-pointer relative w-4 h-6 mt-2.5 mr-3"> <div class="bg-black-9 dark:bg-white w-4 h-0.5 rounded absolute top-4 -mt-0.5 transition-all duration-500 before:content-[''] before:bg-black-9 before:dark:bg-white before:w-4 before:h-0.5 before:rounded before:absolute before:transition-all before:duration-500 before:-translate-x-2 before:translate-y-2 after:content-[''] after:bg-black-9 after:dark:bg-white after:w-4 after:h-0.5 after:rounded after:absolute after:transition-all after:duration-500 after:-translate-x-2 after:-translate-y-2"></div> </button> <a href="/" class="text-3xl font-medium"> <div class="bg-[url('../images/symfonycasts-logo-dm.svg')] w-[52px] h-[45px] bg-cover bg-no-repeat min-[1099px]:bg-[url('../images/symfonycasts-logo.svg')] min-[1099px]:dark:bg-[url('../images/symfonycasts-logo-dm.svg')] min-[1099px]:w-[240px] min-[1099px]:bg-contain mr-5" alt="SymfonyCasts Logo"></div> </a> <span class="hidden md:flex md:grow items-center"> <form action="/screencast/dependency-injection/search" data-controller="rich-search" role="search" aria-expanded="false" class="group w-[228px] aria-expanded:w-full transition-all relative" > <div class="relative"> <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> <svg aria-hidden="true" class="w-5 h-5 text-black-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg> </div> <input data-rich-search-target="input" autocomplete="off" data-action="keydown.meta+k@window->rich-search#openByKey keydown.ctrl+k@window->rich-search#openByKey focus->rich-search#open keydown->rich-search#hotkeys rich-search#syncInput" value="" name="q" type="text" class="w-full focus:ring-0 focus:ring-offset-0 focus:outline-none group-aria-expanded:border group-aria-expanded:rounded-b-none group-aria-expanded:border-b-0 group-aria-expanded:border-blue-6 bg-black-1 border dark:border-black-7 border-black-2 text-black-5 text-sm rounded-lg block pl-10 p-2 dark:bg-black-7 dark:placeholder-black-5 dark:text-white" placeholder="Search Tutorials" spellcheck="false" aria-label="search" > </div> <div data-rich-search-target="list" class="absolute w-full bg-black-1 dark:bg-black-7 rounded-b-lg z-30 group-aria-expanded:block hidden border border-t-0 border-blue-6" > <ul> <li data-rich-search-target="listItem" data-action="mouseover->rich-search#moveWithMouse click->rich-search#selectAndSubmit" class="group aria-selected:bg-blue-6 aria-selected:text-white cursor-pointer" aria-selected="true" data-search-action="/screencast/dependency-injection/search" > <div class="flex justify-between items-center p-3"> <i class="fa fa-search"></i> <span data-rich-search-target="textItem" class="pl-3 grow text-ellipsis overflow-hidden whitespace-nowrap"></span> <span class="text-black-9 dark:text-white rounded p-1 bg-black-2 dark:bg-black-8 font-normal text-sm min-w-[92px]">In this course</span> </div> </li> <li data-rich-search-target="listItem" data-action="mouseover->rich-search#moveWithMouse click->rich-search#selectAndSubmit" class="group aria-selected:bg-blue-6 aria-selected:text-white cursor-pointer rounded-b-lg" aria-selected="false" data-search-action="/search" > <div class="flex justify-between items-center p-3"> <i class="fa fa-search"></i> <span data-rich-search-target="textItem" class="grow pl-3 text-ellipsis overflow-hidden whitespace-nowrap"></span> <span class="text-black-9 dark:text-white rounded p-1 bg-black-2 dark:bg-black-8 font-normal text-sm min-w-[121px]">All SymfonyCasts</span> </div> </li> </ul> </div> </form> </span> </div> <div class="font-semibold"> <nav class="space-x-1.5 sm:space-x-2 min-[812px]:space-x-3 xl:space-x-5" aria-label="main"> <div class="inline-block md:hidden" data-controller="dropdown" data-dropdown-offset-value="40" data-dropdown-placement-value="bottom" data-dropdown-close-on-click-inside-value="false" data-dropdown-use-overlay-value="true" > <button data-action="dropdown#toggle:prevent" type="button" class="py-1 px-2.5"> <span class="sr-only">Open Search Menu</span> <i class="fas fa-search fa-fw"></i> </button> <div class="absolute z-50 hidden w-auto bg-white rounded-lg shadow dark:bg-black-8 py-5 px-7 after:absolute after:content-[&#039;&#039;] after:top-0 after:-translate-y-6 after:left-0 after:right-0 after:mx-auto after:border-[12px] after:w-4 after:border-b-white after:dark:border-b-black-8 after:border-transparent" data-dropdown-target="block" > <form action="/search" data-controller="rich-search" role="search" aria-expanded="false" class="group w-[228px] aria-expanded:w-full transition-all relative" > <div class="relative"> <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> <svg aria-hidden="true" class="w-5 h-5 text-black-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg> </div> <input data-rich-search-target="input" autocomplete="off" data-action="" value="" name="q" type="text" class="w-full focus:ring-0 focus:ring-offset-0 focus:outline-none group-aria-expanded:border group-aria-expanded:border-blue-6 bg-black-1 border dark:border-black-7 border-black-2 text-black-5 text-sm rounded-lg block pl-10 p-2 dark:bg-black-7 dark:placeholder-black-5 dark:text-white" placeholder="Search Tutorials" spellcheck="false" aria-label="search" > </div> </form> <h4 class="pt-4 pb-3 text-sm text-black-4 font-normal">Popular Search Topics</h4> <ul class="list-none font-semibold text-lg gap-3"> <li> <a href="/search?q=API%20Platform"> API Platform </a> </li> <li> <a href="/search?q=Doctrine"> Doctrine </a> </li> <li> <a href="/search?q=Turbo"> Turbo </a> </li> <li> <a href="/search?q=EasyAdmin"> EasyAdmin </a> </li> </ul> </div> </div> <div class="hidden md:inline-block" data-controller="dropdown" data-dropdown-offset-value="20" data-dropdown-placement-value="bottom" data-dropdown-close-on-click-inside-value="true" data-dropdown-use-overlay-value="false" > <a href="/courses" class="hover:text-blue-6">Tutorials</a> <button data-action="dropdown#toggle:prevent" type="button" class=""> <i class="fa-regular fa-ellipsis pl-1 hover:text-blue-6"></i> </button> <div class="z-50 absolute hidden w-auto bg-white divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 py-5 px-7" data-dropdown-target="block" > <a href="/courses" class="hover:text-blue-6"><span class="text-lg font-semibold underline">View all Courses</span> <span class="font-sm font-normal">(123)</span></a> <div class="grid grid-cols-2"> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #06E7FC"></i>Symfony 7</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony6"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #6B02F7"></i>Symfony 6</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony5"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #A6F124"></i>Symfony 5</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/rest"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #7BE89B"></i>APIs</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/js-tools"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #ED268F"></i>JavaScript Frameworks &amp; Tools</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/javascript"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #ED268F"></i>JavaScript Fundamentals</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/testing"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #E7E517"></i>Testing</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/drupal"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #AF04F6"></i>Drupal 8</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/oo"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #3502ED"></i>OOP</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/php"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #07DBDE"></i>PHP</a> </div> <div class="py-[6px] px-[6px] font-normal"> <a class="hover:text-blue-6" href="/tracks/extras"><i class="fa-solid fa-circle-small pr-3 text-[10px]" style="color: #E645CD"></i>Dev Tools</a> </div> </div> </div> </div> <a href="/gift-card/" class="hover:text-blue-6 hidden lg:inline">Gift Card</a> <a class="hover:text-blue-6 hidden lg:inline" href="/pricing">Pricing</a> <span class="hidden lg:inline border-r border-black-3 dark:border-black-6"></span> <div class="inline-block" data-controller="dropdown" data-dropdown-offset-value="40" data-dropdown-placement-value="bottom" data-dropdown-close-on-click-inside-value="true" data-dropdown-use-overlay-value="false" > <button data-action="dropdown#toggle:prevent" type="button" class="test-notifications-bell rounded-full py-1 px-2.5 hover:bg-black-1 hover:dark:bg-black-7 active:dark:bg-blue-8 active:dark:text-blue-5 active:bg-blue-1 active:text-blue-6"> <i class="fa fa-bell fa-fw relative"> <div class="bg-red-500 border-2 border-white dark:border-black-8 rounded-full h-[10px] w-[10px] absolute right-[-2px] top-[-2px]"></div> </i> </button> <div class="z-50 absolute h-[580px] overflow-y-scroll hidden md:2w-[530px] bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 py-5 px-7 after:absolute after:content-[&#039;&#039;] after:top-0 after:-translate-y-6 after:right-5 after:border-[12px] after:w-4 after:border-b-white after:dark:border-b-gray-700 after:border-transparent" data-dropdown-target="block" > <div class="flex justify-between"> <span class="text-lg font-semibold pb-4">Notifications</span> </div> <div class="flex pt-7"> <turbo-frame id="user-notifications-page1" src="/updates" loading="lazy" target="_top"> Loading more entries <i class="fa fa-spinner fa-spin"></i> </turbo-frame> </div> </div> </div> <a href="#" class="nav-link py-1 px-2.5 hover:text-blue-6" data-controller="dark-mode-toggle" data-dark-mode-toggle-url-value="/api/set-dark-mode" data-dark-mode-toggle-class-name-value="dark" data-action="dark-mode-toggle#toggle:prevent" ><i class="fa fa-adjust fa-fw"></i></a> <span class="whitespace-nowrap"> <a class="btn-secondary-sm mr-2 whitespace-nowrap hidden md:inline-block" href="/login">Log In</a> <a class="btn-blue-sm whitespace-nowrap inline-block" href="/signup">Sign Up</a> </span> </nav> </div> </section> <section data-mobile-menu-target="menu" class="absolute top-68 z-40 border-b border-black-2 dark:border-black-7 bg-white dark:bg-black-8 w-full text-2xl flex-col origin-top animate-open-menu hidden"> <nav class="flex flex-col justify-between min-h-screen py-8" aria-label="mobile"> <div class="flex flex-col gap-2.5 p-0"> <div data-controller="toggle" data-toggle-button-toggle-classes-value="fa-angle-down fa-angle-up" data-toggle-hidden-classes-value="h-0 py-0" data-toggle-shown-classes-value="py-5" data-toggle-transition-height-value="true" > <div class="flex justify-between px-5"> <a href="/courses" class="hover:text-blue-6"> Tutorials </a> <button data-action="toggle#toggle:prevent"> <i class="fa-regular fa-angle-down pl-2 hover:text-blue-6"></i> </button> </div> <div class="bg-black-1 dark:bg-black-7 px-5 py-5 hidden overflow-hidden transition-all duration-500" data-toggle-target="content"> <span class="text-xs font-medium">Tracks (11)</span> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Symfony 7</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony6"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Symfony 6</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/symfony5"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Symfony 5</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/rest"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>APIs</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/js-tools"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>JavaScript Frameworks &amp; Tools</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/javascript"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>JavaScript Fundamentals</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/testing"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Testing</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/drupal"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Drupal 8</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/oo"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>OOP</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/php"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>PHP</a> </div> <div class="py-[6px] px-[6px] text-base font-normal"> <a class="hover:text-blue-6" href="/tracks/extras"><i class="fa-solid fa-circle-small pr-3 text-[10px]"></i>Dev Tools</a> </div> <a href="/courses" class="hover:text-blue-6"><span class="text-lg font-semibold underline">View all Courses</span> <span class="text-xs font-normal">(123)</span></a> </div> </div> <a href="/gift-card/" class="hover:text-blue-6 px-5"> Gift Card </a> <a class="hover:text-blue-6 px-5" href="/pricing">Pricing</a> </div> <div class="flex flex-col px-3"> <a class="btn-secondary-sm text-center" href="/login">Log In</a> <a class="btn-blue-sm text-center mt-2.5" href="/signup">Sign Up</a> </div> </nav> </section> </header> <main class="mx-auto"> <div id="course-wrapper" class="relative md:static md:grid transition-all duration-500 md:grid-cols-[375px_minmax(0,1fr)]" data-controller="toggle chapters-sidebar-mobile chapters-list" data-toggle-shown-classes-value="md:grid-cols-[375px_minmax(0,1fr)]" data-toggle-hidden-classes-value="md:grid-cols-[74px_minmax(0,1fr)] chapter-list-hidden" data-toggle-start-hidden-value="false" data-toggle-fully-hidden-class-value="" data-toggle-cookie-name-value="isChapterListHidden" data-toggle-target="content" data-chapters-list-full-rendered-url-value="/screencast/34/_chaptersList/progress?isChapterListHidden=0" > <div class="md:hidden z-30 fixed bottom-10 left-1/3" > <button class="btn-primary-sm hidden" data-action="chapters-sidebar-mobile#close" data-chapters-sidebar-mobile-target="closeButton" >Close Chapter List <i class="fa-solid fa-layer-group"></i></button> <button class="btn-primary-sm" data-action="chapters-sidebar-mobile#open" data-chapters-sidebar-mobile-target="openButton" >View Chapter List <i class="fa-solid fa-layer-group"></i></button> </div> <div data-simplebar id="chapter-list-34" data-turbo-permanent="true" data-chapters-sidebar-mobile-target="content" class="!absolute z-20 w-full md:!sticky hidden md:block -mb-10 top-0 md:h-screen overflow-y-scroll border-r border-black-3 dark:border-black-6 shadow-md md:shadow-none" style="scrollbar-width:none;" > <div class="bg-white dark:bg-black-9 flex-shrink-0" > <!-- start course chapter list --> <div class="pt-4"> <!-- Table of contents --> <turbo-frame id="chapters-list-34" target="_top" data-chapters-list-target="sidebar" > <div class="px-5"> <div class="flex pb-3 md:justify-between" data-toggle-target="addHidingClass" data-hiding-class="md:justify-end" data-showing-class="md:justify-between" > <p class="text-xl font-semibold block md:sidebar-collapsed:hidden">Chapters</p> <button class="js-chapter-arrow hidden md:block" > <i class="fa-solid fa-arrow-left-to-line transition-all duration-500 " data-toggle-target="addHidingClass" data-hiding-class="md:rotate-180" ></i> </button> </div> <div class="text-xs flex gap-2 md:sidebar-collapsed:hidden pb-5 whitespace-nowrap"> <span class="uppercase"><i class="fa-solid fa-layer-group pr-2"></i>5 Chapters</span> <span>|</span> <span><i class="fa fa-clock pr-2"></i> 22:50</span> <span>|</span> </div> </div> <ul class="border-t border-black-3 dark:border-black-6 pt-5 js-chapter-list"> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/dependency-injection/intro" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">01</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Dependency Injection</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">1:36</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/dependency-injection/services" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">02</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Services and Dependency Injection</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">4:19</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/dependency-injection/injection-interfaces" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">03</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Injecting Config &amp; Services and using Interfaces</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">5:28</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/dependency-injection/container" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">04</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">Dependency Injection Container</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">10:23</div> </div> </div> </div> </div> </li> <li class=" hover:bg-black-1 hover:dark:bg-black-8 px-4 md:px-0"> <div class="md:px-5 py-2.5" data-toggle-target="addHidingClass" data-hiding-class="md:px-2" data-showing-class="md:px-5" > <div class="relative"> <a href="/screencast/dependency-injection/container-in-your-project" class=" block z-20 absolute w-full h-full js-chapter-link" ></a> <div> <div class="flex justify-between items-center"> <div class="border relative border-black-2 dark:border-black-5 rounded-2xl flex items-center justify-center w-14 h-[50px] flex-shrink-0"> <span class="text-sm z-10 font-medium">05</span> <div class="h-full absolute bg-black-2 dark:bg-black-7 rounded-l-2xl left-0" style="width: 0%;" ></div> </div> <div class="flex-grow pl-3 pr-2 md:sidebar-collapsed:hidden"> <div class="font-medium text-sm ">A Container in your Project</div> </div> <div class="font-medium text-xs flex items-center md:sidebar-collapsed:hidden">1:04</div> </div> </div> </div> </div> </li> </ul> </turbo-frame> </div> <!-- closes actual list of chapters --> </div> </div> <div class="flex-grow overflow-hidden course-content"> <div class="bg-contain bg-no-repeat overflow-hidden bg-[url('../images/hero-gradient.png')] dark:bg-[url('../images/hero-gradient-dark.png')] min-w-0"> <div class="max-w-screen-xl mx-auto px-4"> <div class="pt-6"> <div class="bg-black-9 text-white dark:bg-black-2 dark:text-black-9 text-center p-4 rounded-3xl mb-5"> <p class="font-semibold mr-1">This course is archived!</p> </div> </div> <div class="flex justify-between text-sm pt-3 sm:pt-9 mb-3"> <div class="flex justify-start gap-2"> <div class="bg-[url('../images/sf-lm.svg')] dark:bg-[url('../images/sf-dm.svg')] w-6 h-4 bg-contain bg-no-repeat mt-[3px]" alt="SymfonyCasts Logo"></div> <span>></span> <a href="/tracks/drupal"> Drupal 8 </a> <span>></span> <p>Course Overview</p> </div> <div class="flex justify-end"> </div> </div> <section class="flex flex-col xl:flex-row xl:h-[294px] drop-shadow-md"> <div style="background-image: url(https://symfonycasts.com/static/media/cache/course_video_poster_large/uploads/screencast/dependency-injection/dependency-injection-394.png);" class="xl:order-2 relative rounded-t-3xl xl:rounded-r-3xl xl:rounded-tl-none bg-cover bg-center h-[210px] xl:h-full xl:w-[470px]"> <div class="absolute right-2 top-4"> <turbo-frame id="bookmark-controls-course-34"> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <button class="bg-white text-black-8 rounded-xl px-3 py-2" data-placement="bottom" > <i class="fal fa-bookmark"></i> </button> <span class="sr-only">Login to bookmark this course</span> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Login to bookmark this course</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </turbo-frame> </div> </div> <div class="xl:order-1 bg-white dark:bg-black-7 p-6 rounded-b-3xl xl:rounded-l-3xl xl:rounded-br-none flex-grow"> <h1 class="text-[32px] font-semibold leading-9">Dependency Injection and the art of services and containers</h1> <p class="pt-2">Unlock next-level object-oriented programming with an insightful tutorial on dependency injection, services, and the Pimple container.</p> <div class="mt-14"> </div> </div> </section> <div class="flex flex-col xl:flex-row mt-10 border-b border-black-3 dark:border-black-6 pb-10"> <div class="xl:w-[205px] xl:shrink-0"> <ul class="text-xs font-medium uppercase space-y-4 border-b border-black-3 dark:border-black-6 pb-5"> <li><i class="pr-2 fa-solid fa-circle-user"></i>3035 students</li> <li><i class="pr-2 fa-solid fa-closed-captioning"></i>EN Captions</li> <li><i class="pr-2 fa-solid fa-language"></i>EN Script</li> <li><i class="pr-2 fa-solid fa-award"></i>Certificate of Completion</li> </ul> <h3 class="text-sm pt-5 mb-3">Your Guides</h3> <div class="space-y-2"> <div> <a href="https://github.com/weaverryan" target="_blank"> <img class="rounded-xl h-10 w-10 inline mr-2" src="https://avatars.githubusercontent.com/u/121003?v=4&amp;s=200" alt="Ryan Weaver"> <span class="font-semibold whitespace-nowrap">Ryan Weaver</span> </a> </div> <div> <a href="https://github.com/Leannapelham" target="_blank"> <img class="rounded-xl h-10 w-10 inline mr-2" src="https://avatars.githubusercontent.com/u/777948?v=4&amp;s=200" alt="Leanna Pelham"> <span class="font-semibold whitespace-nowrap">Leanna Pelham</span> </a> </div> </div> </div> <div class="xl:pl-10"> <h3 class="text-xl font-semibold mt-6 xl:mt-0">About this course</h3> <div class="break-words text-lg prose dark:prose-invert overview"><p>Get your object-oriented skills sharp by exploring the ideas and reasons behind dependency injection. This simple principle separates developers who write functional code from those that are able to build great, and maintanable applications. In this tutorial, we'll see dependency injection in action, why it's important, and how it relates to services and service-oriented architecture. We'll also refactor our application to use a dependency injection container, using a fantastic - but simple - container called Pimple.</p> <p>If you're ready to take your object-oriented code to the next level, AND actually be excited about doing it, this tutorial is for you!</p> </div> </div> </div> <h2 class="text-[22px] mt-[56px] mb-4 font-semibold mb-4"> Next courses in the <a class="underline" href="/tracks/drupal#the-oo-prerequisites">Drupal 8: The OO Prerequisites</a> section of the <a class="underline" href="/tracks/drupal"> Drupal 8 </a> Track! </h2> <div class="grid grid-cols-1 min-[900px]:grid-cols-2 xl:grid-cols-3 mb-14"> <div class="mb-5 pb-1 mr-3"> <a href="/screencast/oo"> <div class=""> <img class="rounded-tr-[20px] rounded-tl-[20px]" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/oo/oo-599.png" alt="Object&#x20;Oriented&#x20;Programming&#x20;&#x28;Course&#x20;1&#x29;"> </div> <div class="p-5 rounded-br-[20px] rounded-bl-[20px] border-r border-l border-b border-black-2 dark:border-black-7"> <h6 class="h-[56px] mb-3 text-lg font-semibold line-clamp-2">Object Oriented Programming (Course 1)</h6> <div class="text-[11px] flex uppercase gap-2"> <span><i class="fa-solid fa-layer-group pr-2"></i>11 Videos</span> <span>|</span> <span><i class="fa fa-clock pr-2"></i> 56:33</span> <span>|</span> <span><i class="fa-solid fa-flag-swallowtail pr-2"></i> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <span>0%</span> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> Your Progress <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <div class="progress-bar-container"> </div> </span> </div> </div> </a> </div> <div class="mb-5 pb-1 mr-3"> <a href="/screencast/oo-ep2"> <div class=""> <img class="rounded-tr-[20px] rounded-tl-[20px]" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/oo-ep2/oo-ep2-271.png" alt="OOP&#x20;&#x28;Course&#x20;2&#x29;&#x3A;&#x20;Services,&#x20;Dependency&#x20;Injection&#x20;and&#x20;Containers"> </div> <div class="p-5 rounded-br-[20px] rounded-bl-[20px] border-r border-l border-b border-black-2 dark:border-black-7"> <h6 class="h-[56px] mb-3 text-lg font-semibold line-clamp-2">OOP (Course 2): Services, Dependency Injection and Containers</h6> <div class="text-[11px] flex uppercase gap-2"> <span><i class="fa-solid fa-layer-group pr-2"></i>13 Videos</span> <span>|</span> <span><i class="fa fa-clock pr-2"></i> 1:08:56</span> <span>|</span> <span><i class="fa-solid fa-flag-swallowtail pr-2"></i> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <span>0%</span> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> Your Progress <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <div class="progress-bar-container"> </div> </span> </div> </div> </a> </div> <div class="mb-5 pb-1 mr-3"> <a href="/screencast/oo-ep3"> <div class=""> <img class="rounded-tr-[20px] rounded-tl-[20px]" src="https://symfonycasts.com/static/media/cache/course_tiles_outbound/uploads/screencast/oo-ep3/oo-ep3-916.png" alt="OOP&#x20;&#x28;course&#x20;3&#x29;&#x3A;&#x20;Inheritance,&#x20;Abstract&#x20;Classes,&#x20;Interfaces&#x20;and&#x20;other&#x20;amazing&#x20;things"> </div> <div class="p-5 rounded-br-[20px] rounded-bl-[20px] border-r border-l border-b border-black-2 dark:border-black-7"> <h6 class="h-[56px] mb-3 text-lg font-semibold line-clamp-2">OOP (course 3): Inheritance, Abstract Classes, Interfaces and other amazing things</h6> <div class="text-[11px] flex uppercase gap-2"> <span><i class="fa-solid fa-layer-group pr-2"></i>10 Videos</span> <span>|</span> <span><i class="fa fa-clock pr-2"></i> 56:55</span> <span>|</span> <span><i class="fa-solid fa-flag-swallowtail pr-2"></i> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <span>0%</span> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> Your Progress <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <div class="progress-bar-container"> </div> </span> </div> </div> </a> </div> </div> <!-- Course Comments Section --> <a id="comments"></a> <div class="mt-6"> <div data-turbo="false" data-controller="user-nickname comment" data-comment-new-comment-form-url-value="/comment/course-34/form/new" data-comment-comments-total-value="15" data-comment-comments-translation-value="&#x7B;&quot;singular&quot;&#x3A;&quot;Comment&quot;,&quot;plural&quot;&#x3A;&quot;Comments&quot;&#x7D;" data-comment-comments-tf-id-value="comments-course-34" > <div class="flex justify-between pb-8"> <h3 class="text-xl font-semibold"> <span data-comment-target="commentsTotal">15</span> <span data-comment-target="commentsTotalTranslation">Comments</span> </h3> <div data-controller="dropdown" data-dropdown-placement-value="bottom-end"> <span class="text-xs border-r border-black-6 pr-3">Sort By</span> <button class="ml-3 text-sm" data-action="dropdown#toggle" data-comment-target="sortBtn"> <span class="sr-only">Open Sort By Menu</span> <span class="font-semibold">Most Useful</span> <i class="fas fa-caret-down"></i> </button> <ul data-dropdown-target="block" class="absolute text-sm z-10 hidden w-auto bg-white divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 py-2"> <li><a class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" href="#best" data-action="comment#sort" data-target-url="/comment/course-34?sort=best">Most Useful</a></li> <li><a class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" href="#newest" data-action="comment#sort" data-target-url="/comment/course-34?sort=newest">Newest</a></li> <li><a class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" href="#oldest" data-action="comment#sort" data-target-url="/comment/course-34?sort=oldest">Oldest</a></li> </ul> </div> </div> <div class="js-form-container comment-form-level-0"> <div class="w-full text-center"> <div class="break-normal font-semibold border border-black-2 dark:border-black-9 p-5 mb-9 bg-white dark:bg-black-8 rounded-xl" style="box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.06), 0px 9px 20px 0px rgba(0, 0, 0, 0.06), 0px 37px 37px 0px rgba(0, 0, 0, 0.05), 0px 83px 50px 0px rgba(0, 0, 0, 0.03), 0px 147px 59px 0px rgba(0, 0, 0, 0.01), 0px 229px 64px 0px rgba(0, 0, 0, 0.00);"> <a href="/login" class="text-blue-6">Login</a> or <a href="/signup" class="text-blue-6">Register</a> to join the conversation </div> </div> </div> <div data-comment-target="comments" class="js-comments-container"> <turbo-frame src="/comment/course-34/list" id="comments-course-34"> <turbo-frame id="comments-course-34"> <div data-controller="comment-height"> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="71" data-disqus-comment-id="1110648673"> <a id="comment-71"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>CCCrazyPannda</strong> <a id="comment-71" class="text-black-2" href="#comment-71" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-71" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1110648673"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Gotta say that after doing lots, and lots, and lots of research on DI and DI containers, this is the clearest example I've seen. Nicely done!</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes">8</span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-71" data-action="comment#reply" data-form-url="/comment/71/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-71" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-71"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="642" data-disqus-comment-id="1697148287"> <a id="comment-642"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Ryan Dennler</strong> <a id="comment-642" class="text-black-2" href="#comment-642" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-642" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1697148287"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Very very nice tutorial on Dependency Injection, knpuniversity is really amazing. Thanks guys.</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes">1</span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-642" data-action="comment#reply" data-form-url="/comment/642/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-642" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-642"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="488" data-disqus-comment-id="1499853316"> <a id="comment-488"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <a href="/u/Skylar"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://secure.gravatar.com/avatar/a37974cf449ecfccd8c41b531520a119?s=100&amp;d=https%3A%2F%2Fsymfonycasts.com%2Fassets%2Fimages%2Favatars%2Fdefault-user.png" alt="Skylar avatar"> </a> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <a href="/u/Skylar"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://secure.gravatar.com/avatar/a37974cf449ecfccd8c41b531520a119?s=100&amp;d=https%3A%2F%2Fsymfonycasts.com%2Fassets%2Fimages%2Favatars%2Fdefault-user.png" alt="Skylar avatar"> </a> </span> <span class="space-x-1"> <a href="/u/Skylar"> <strong>Skylar</strong> </a> <a id="comment-488" class="text-black-2" href="#comment-488" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-488" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1499853316"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Clear, concise and chock full of nuts. I am definately purchasing more</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes">1</span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-488" data-action="comment#reply" data-form-url="/comment/488/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-488" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-488"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="49" data-disqus-comment-id="1054516613"> <a id="comment-49"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Dmitry Minkovsky</strong> <a id="comment-49" class="text-black-2" href="#comment-49" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-49" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1054516613"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Great stuff. Clearly you guys spent a ton of time producing something this polished. Thank you!</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-49" data-action="comment#reply" data-form-url="/comment/49/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-49" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-49"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="58" data-disqus-comment-id="1068529519"> <a id="comment-58"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>MopedTobias</strong> <a id="comment-58" class="text-black-2" href="#comment-58" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-58" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1068529519"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>I cannot watch the videos neither download them. What's up?</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-58" data-action="comment#reply" data-form-url="/comment/58/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-58" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-58"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="59" data-disqus-comment-id="1068532725"> <a id="comment-59"></a> <div class="comment-level-1 pr-4 py-2 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <a href="/u/weaverryan"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://avatars.githubusercontent.com/u/121003?v=4&amp;s=100" alt="weaverryan avatar"> </a> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <a href="/u/weaverryan"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://avatars.githubusercontent.com/u/121003?v=4&amp;s=100" alt="weaverryan avatar"> </a> </span> <span class="space-x-1"> <a href="/u/weaverryan"> <strong>weaverryan</strong> </a> <span class="px-1 font-semibold rounded text-xs text-white" style="background: linear-gradient(332.1deg, #0286C4 8.33%, #FFB800 162.53%);" title="SymfonyCasts Staff">SFCASTS</span> <a href="#comment-58"><small><i class="fas fa-share"></i> MopedTobias</small></a> <a id="comment-59" class="text-black-2" href="#comment-59" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-59" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1068532725"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Hi @MopedTobias!</p><p>I've just checked and things seem to be working fine. Are you using a browser plugin to force https? If so, try disabling that - it confuses Amazon's signed URLs (something we'll fix soon). If it's not that, let me know what you're seeing and we'll work it out.</p><p>Cheers!</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-59" data-action="comment#reply" data-form-url="/comment/59/form/reply?offset=2"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-59" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-59"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="581" data-disqus-comment-id="1592858370"> <a id="comment-581"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Joan</strong> <a id="comment-581" class="text-black-2" href="#comment-581" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-581" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1592858370"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>I really needed this, thanks!</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-581" data-action="comment#reply" data-form-url="/comment/581/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-581" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-581"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="1606" data-disqus-comment-id="2452871820"> <a id="comment-1606"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Putera Kahfi</strong> <a id="comment-1606" class="text-black-2" href="#comment-1606" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-1606" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-2452871820"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>thanks for the really usefull tutorial. Good job knpuniversity!</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-1606" data-action="comment#reply" data-form-url="/comment/1606/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-1606" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-1606"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="120" data-disqus-comment-id="1176504283"> <a id="comment-120"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Gaurav</strong> <a id="comment-120" class="text-black-2" href="#comment-120" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-120" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1176504283"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Thank you very much for this great stuff</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-120" data-action="comment#reply" data-form-url="/comment/120/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-120" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-120"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="27265" data-disqus-comment-id="906566942"> <a id="comment-27265"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Dave</strong> <a id="comment-27265" class="text-black-2" href="#comment-27265" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-27265" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-906566942"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Shouldn't you also create a DbInterface to be more flexible?</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-27265" data-action="comment#reply" data-form-url="/comment/27265/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-27265" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-27265"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="27276" data-disqus-comment-id="915444928"> <a id="comment-27276"></a> <div class="comment-level-1 pr-4 py-2 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <a href="/u/weaverryan"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://avatars.githubusercontent.com/u/121003?v=4&amp;s=100" alt="weaverryan avatar"> </a> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <a href="/u/weaverryan"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://avatars.githubusercontent.com/u/121003?v=4&amp;s=100" alt="weaverryan avatar"> </a> </span> <span class="space-x-1"> <a href="/u/weaverryan"> <strong>weaverryan</strong> </a> <span class="px-1 font-semibold rounded text-xs text-white" style="background: linear-gradient(332.1deg, #0286C4 8.33%, #FFB800 162.53%);" title="SymfonyCasts Staff">SFCASTS</span> <a href="#comment-27265"><small><i class="fas fa-share"></i> Dave</small></a> <a id="comment-27276" class="text-black-2" href="#comment-27276" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-27276" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-915444928"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Hi Dave!</p><p>Yes, that's a great idea. You're talking specifically about the "Injecting Config &amp; Services and using Interfaces" chapter, where we injected the mailer, then made it more awesome (read: flexible) by creating a MailerInterface. The idea is that we don't really care what your mailer object looks like, as long as it has a sendMessage function on it.</p><p>We could (and it would be a great idea) do the same thing with the database connection. We could create a DatabaseInterface which has all the same methods as PHP's PDO object (or at least all of the one's we're going to be using). You can then make a new class that sub-classes PHP's PDO (e.g. MyDatabase) that extends \PDO and implements this interface. The advantage of doing all of this is that your FriendHarvester now expects any object that implements DatabaseInterface. If you wanted to completely replace PDO with something else, you can do that.</p><p>Cheers!</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes">1</span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-27276" data-action="comment#reply" data-form-url="/comment/27276/form/reply?offset=2"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-27276" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-27276"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="27299" data-disqus-comment-id="948781076"> <a id="comment-27299"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Paca-vaca</strong> <a id="comment-27299" class="text-black-2" href="#comment-27299" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-27299" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-948781076"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Hi - good tutorial</p><p></p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-27299" data-action="comment#reply" data-form-url="/comment/27299/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-27299" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-27299"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="1707" data-disqus-comment-id="2497343686"> <a id="comment-1707"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Michal Majer</strong> <a id="comment-1707" class="text-black-2" href="#comment-1707" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-1707" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-2497343686"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Great job guys! I feel like I'm becoming a better devoloper every day on this website. :)</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-1707" data-action="comment#reply" data-form-url="/comment/1707/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-1707" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-1707"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="471" data-disqus-comment-id="1479387853"> <a id="comment-471"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Ron Chaplin</strong> <a id="comment-471" class="text-black-2" href="#comment-471" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-471" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-1479387853"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>Awesome Series! I have been using DI in Symfony for a while, but this helped me to understand the underlying process so much better! Great Job!</p><p>I've recently started using the jms/di-extra-bundle from packagist to allow for dependency injection using annotations. This allows for even cleaner setups I think as there is no requirement for separated config files.</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-471" data-action="comment#reply" data-form-url="/comment/471/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-471" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-471"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> <div class="js-comment-container transition-all rounded-md p-2" data-comment-id="1789" data-disqus-comment-id="2540627502"> <a id="comment-1789"></a> <div class="comment-level-0 pr-4 flex justify-start"> <div class="hidden lg:block lg:min-w-fit"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </div> <div class="ml-3 grow min-w-0"> <div class="flex justify-between"> <div> <span class="lg:hidden pr-2 lg:pr-0"> <img class="inline lg:block mb-2 w-[25px] h-[25px] lg:w-[42px] lg:h-[42px] rounded" src="https://symfonycasts.com/assets/images/avatars/default-user.png" alt="Default user avatar"> </span> <span class="space-x-1"> <strong>Alexander Lomia</strong> <a id="comment-1789" class="text-black-2" href="#comment-1789" title="June 16, 2018 00:06" data-controller="comment#setHighlighted:prevent" data-comment-id-param="comment-1789" ><span class="text-xs text-black-4 capitalize">6 years ago</span></a> <a id="comment-2540627502"></a> </span> </div> </div> <div data-controller="highlight-js" class="js-comment-text"> <div class="comment-code prose dark:prose-invert leading-6"> <p>These screencasts are pure gold, keep up the good work!</p> </div> </div> <div class="space-x-3 mt-1 mb-3"> <span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <i class="fal fa-thumbs-up"></i> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content"> Please, log in to vote for this comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> <span class="js-comment-votes"></span> </span> <span>|</span> <a class="js-comment-reply" href="#reply-1789" data-action="comment#reply" data-form-url="/comment/1789/form/reply?offset=1"><i class="fal fa-comments-alt mr-1"></i>Reply</a> <span>|</span> <span data-controller="tooltip" data-tooltip-offset-value="10" data-tooltip-placement-value="bottom" data-action="focusin->tooltip#mouseEnter focusout->tooltip#mouseLeave open->tooltip#mouseEnter" > <a href="#share-1789" title="Share Comment Link" data-action="comment#share" data-target-url="https://symfonycasts.com/screencast/dependency-injection#comment-1789"><i class="fal fa-share-alt"></i></a> <div data-tooltip-target="block" class=" hidden absolute z-50 inline-block p-2 text-sm text-gray-500 duration-300 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600"> <div class="text-center" data-tooltip-target="content">Share Comment</div> <div data-tooltip-target="arrow" class="w-[10px] h-[10px] z-10 absolute bg-white border-t border-l border-gray-200 dark:border-gray-600 dark:bg-gray-800"></div> </div> </span> </div> </div> </div> </div> </div> </turbo-frame> </turbo-frame> </div> <div data-controller="modal" data-action="turbo:before-cache@window->modal#close modal:open->modal#open modal:close->modal#close modal:close@window->modal#close" data-comment-target="deleteConfirmModal" data-modal-shown-value="false" data-modal-close-click-outside-value="true" > <dialog class="open:flex p-0 bg-white dark:bg-black-9 text-left transform rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:bg-opacity-80 backdrop:backdrop-blur-sm" data-modal-target="dialog" data-action="close->modal#close click->modal#clickOutside" > <div class="flex grow p-5"> <div class="grow overflow-auto justify-center items-center"> <div class="break-words text-center dark:text-white"> <h3 class="p-4 text-2xl text-center font-medium text-black-9 dark:text-white"> Delete comment? </h3> <div class="p-4 flex gap-2 justify-center"> <button data-action="comment#doDelete" class="btn-blue-sm bg-context-orange hover:bg-context-darkred my-3"><i class="fa fa-trash pr-1"></i>Delete</button> <button data-action="modal#close" class="btn-blue-sm my-3"><i class="fa fa-xmark pr-1"></i>Cancel</button> </div> </div> </div> <button class="absolute right-4 top-4 dark:text-white flex items-center opacity-70 transition-opacity hover:opacity-100" data-action="modal#close" type="button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg> </button> </div> </dialog> </div> <div class="js-comment-share-modal"> <div data-controller="modal" data-action="turbo:before-cache@window->modal#close modal:open->modal#open modal:close->modal#close modal:close@window->modal#close" data-modal-shown-value="false" data-modal-close-click-outside-value="true" > <dialog class="open:flex p-0 bg-white dark:bg-black-9 text-left transform rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:bg-opacity-80 backdrop:backdrop-blur-sm" data-modal-target="dialog" data-action="close->modal#close click->modal#clickOutside" > <div class="flex grow p-5"> <div class="grow overflow-auto justify-center items-center"> <div class="break-words text-center dark:text-white"> <h3 class="p-4 text-2xl text-center font-medium text-black-9 dark:text-white border-b border-black-3 dark:border-black-6"> Share this comment </h3> <div class="m-3"> <input class="bg-black-1 border dark:border-black-7 border-black-2 text-black-5 text-sm rounded-lg focus:ring-transparent focus:border-none p-2 dark:bg-black-7 dark:placeholder-black-5 dark:text-white dark:focus:ring-transparent dark:focus:border-none" type="text" readonly style="width: 100%"> </div> <div class="px-4 py-2 flex gap-2 justify-center"> <button data-action="comment#copyShareUrl" class="js-copy-share-url-btn btn-blue-sm my-3"><i class="fa fa-copy pr-1"></i>Copy link</button> <button data-action="modal#close" class="btn-secondary-sm my-3"><i class="fa fa-xmark pr-1"></i>Cancel</button> </div> </div> </div> <button class="absolute right-4 top-4 dark:text-white flex items-center opacity-70 transition-opacity hover:opacity-100" data-action="modal#close" type="button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg> </button> </div> </dialog> </div> </div> <div data-comment-target="noCommentsMessage" style="display: none;"> <div class=""> <img class="mx-auto w-36" src="https://symfonycasts.com/build/images/planet-astronaut.b2e6de60.png" alt="astronaut with balloons in space" loading="lazy"> <p class="text-center mt-4 ml-2"><span class="font-semibold">"Houston: no signs of life" </span><br> <span class="mt-2">Start the conversation!</span></p> </div> </div> </div> </div> <!-- Closes the Course Comments Section --> </div> </div> </div> </div> </main> <footer class="my-10 max-w-7xl mx-auto border-t border-black-2 dark:border-black-6 px-5"> <section class="flex flex-col md:flex-row md:justify-between mb-16 pt-11"> <div> <div class="bg-[url('../images/symfonycasts-logo-dm.svg')] w-[65px] h-[55px] bg-cover bg-no-repeat" alt="SymfonyCasts Logo"></div> <div class="text-[32px] font-semibold mt-4 mb-8 dark:text-white">Where learning is really fun.</div> <div class="text-xs min-[500px]:text-base flex"> <div><a href="/contact" class="btn-secondary-lg whitespace-nowrap">Get in touch<i class="fa-solid fa-envelope pl-2.5"></i></a></div> <div><a href="/pricing" class="btn-blue-lg ml-3 whitespace-nowrap">All Access Pass<i class="fa-solid fa-bolt-lightning pl-2.5"></i></a></div> </div> </div> <div class="flex flex-row mt-6 md:mt-0"> <div class="mr-16"> <ul class="text-[22px] font-semibold dark:text-white"> <li class="pb-3"><a href="/courses#all" class="hover:text-blue-6">Courses</a></li> <li class="pb-3"><a href="/courses#tracks" class="hover:text-blue-6">Tracks</a></li> <li class="pb-3"><a href="/pricing" class="hover:text-blue-6">Pricing</a></li> <li class="pb-3"><a href="/gift-card/" class="hover:text-blue-6">Gift Card</a></li> <li class="pb-3"><a href="/blog" class="hover:text-blue-6">Blog</a></li> </ul> </div> <div> <ul class="text-sm pt-2.5 dark:text-black-4"> <li class="pb-3"><a href="/faq" class="hover:text-blue-6">FAQ</a></li> <li class="pb-3"><a href="/about" class="hover:text-blue-6">About</a></li> <li class="pb-3"><a href="/terms" class="hover:text-blue-6">Terms</a> <span>&amp;</span> <a href="/privacy" class="hover:text-blue-6">Privacy</a></li> <li class="pb-3"><a href="/courses?status=upcoming&amp;sort=popular#all" class="hover:text-blue-6">Roadmap</a></li> <li class="pb-3"><a href="/contact" class="hover:text-blue-6">Contact</a></li> </ul> </div> </div> </section> <section class="flex flex-col md:flex-row md:justify-between"> <div class="dark:text-white"> <a href="https://github.com/SymfonyCasts" class="hover:text-blue-6"><i class="fa-brands fa-github pr-8"></i></a> <a href="https://twitter.com/SymfonyCasts" class="hover:text-blue-6"><i class="fa-brands fa-x-twitter pr-8"></i></a> <a href="https://www.facebook.com/SymfonyCasts/" class="hover:text-blue-6"><i class="fa-brands fa-facebook-f pr-8"></i></a> <a href="https://www.linkedin.com/company/symfonycasts/" class="hover:text-blue-6"><i class="fa-brands fa-linkedin pr-8"></i></a> <span>Powered by <span class="text-blue-6">KnpUniversity</span></span> </div> <div> <p class="dark:text-black-4 mt-6 md:mt-0">Hosted with <i class="fa-solid fa-heart text-red-600"></i> on <a href="https://symfony.com/cloud/" class="underline hover:text-blue-6">platform.sh</a></p> </div> </section> </footer> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10