laracasts.com
Open in
urlscan Pro
2606:4700:10::6814:1a13
Public Scan
URL:
https://laracasts.com/series/how-to-contribute-to-open-source
Submission: On September 18 via api from DE — Scanned from DE
Submission: On September 18 via api from DE — Scanned from DE
Form analysis 6 forms found in the DOM
POST /newsletters/subscribe
<form id="newsletter-form" class="flex-center flex-col" method="POST" action="/newsletters/subscribe">
<div class="mx-auto flex w-full max-w-full flex-1 flex-col gap-y-2 rounded-xl md:flex-row md:bg-card-400 md:p-1 lg:mx-0" style="max-width: 500px;"><input
class="rounded-lg bg-transparent bg-white px-4 py-3 text-base text-black placeholder-grey-800 md:mr-1 md:flex-1 md:rounded-xl md:bg-transparent md:py-0 md:text-white" type="email" name="email" placeholder="// TODO: Enter email address"
autocomplete="off" required=""><button class="btn btn-base btn-primary w-full max-w-none rounded-lg text-base md:w-38" type="submit"><!----><!----><!----><!----><span class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Subscribe
</span></button></div><!---->
</form>DIALOG
<form class="container space-y-4" method="dialog">
<header class="px-6 text-center md:px-12">
<h1 class="mb-3 text-5xl font-semibold tracking-tight md:hidden">Sign Up</h1>
<h1 class="mb-3 hidden text-5xl font-semibold tracking-tight md:block">Let's Get You Signed Up</h1>
<p class="mx-auto max-w-md text-balance font-medium text-grey-600"> It takes less than a minute, and just might be the best decision you'll make all day. But you can always do this later, if you prefer. </p>
</header>
<div class="dialog-main px-8 md:px-12">
<div class="dark mt-8">
<div class="mx-auto"><!----><!---->
<div class="plans flex flex-wrap justify-center gap-4 pb-6 mt-4">
<div class="w-full lg:flex-1 xl:h-[500px] lg:max-w-[420px]" style="min-width: 240px;">
<div class="panel relative transition-colors duration-300 rounded-xl relative border-none plan group relative z-10 mx-auto mb-5 flex h-full w-full border px-6 py-5 text-center transition-colors duration-300 hover:border-blue lg:mb-0"
data-js="plan-card-monthly-19">
<div class="flex h-full w-full flex-col justify-around">
<div class="mb-4 flex items-center">
<div class="flex gap-x-1"><button class="btn btn-base btn-secondary active is-active rounded-xl px-3 py-2 text-sm font-medium" transparent=""><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Monthly </span></button><button class="btn btn-base btn-secondary rounded-xl px-3 py-2 text-sm font-medium" transparent=""><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Yearly </span></button></div>
<div class="plan-price relative ml-auto text-2xl font-medium leading-none tracking-tight">
<div class="text-right text-base font-bold tracking-wide"><!----></div>
<div class="font-inter relative flex items-baseline text-blue-400"><span data-js="price">$19</span></div>
</div>
</div>
<h5 class="mb-6 text-[30px] font-bold tracking-wide"><a class="inherits-color" href="/subscription?plan=monthly-19">Individual Plan </a></h5>
<a class="flex justify-center" href="/subscription?plan=monthly-19"><img src="/images/plans/sub-monthly.svg?v=6" alt="Individual Plan" class="relative xl:w-[200px]" loading="lazy" style="top: -25px;"></a>
<p class="mx-auto -mt-3 mb-5 text-balance px-4 xl:text-lg" style="max-width: 25rem;">Be in the know. Fetch an endless stream of input with our <strong>monthly</strong> plan.</p>
<!----><a class="btn btn-base btn-secondary has-icon flex-center mx-auto mt-6 w-full gap-x-1 py-4 text-base lg:mx-6 lg:w-auto lg:h-[60px]" transparent="" data-js="join-button" href="/subscription?plan=monthly-19"><!----><!----><svg x="0px" y="0px" viewBox="0 0 191.667 191.667" xml:space="preserve" width="15" class="mr-[11px] flex-shrink-0"><path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685 c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971 l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969 C156.146,65.765,156.146,74.362,150.862,79.646z" class="fill-current"></path></svg><!----><span class="flex-center h-full flex-shrink-0 text-wrap leading-none">Select Plan</span></a>
</div>
<div></div>
</div>
</div>
<div class="w-full lg:flex-1 xl:h-[500px]" style="min-width: 240px;">
<div class="panel relative transition-colors duration-300 rounded-xl relative border-blue plan group relative z-10 mx-auto mb-5 flex h-full w-full border px-6 py-5 text-center transition-colors duration-300 hover:border-blue lg:mb-0"
data-js="plan-card-forever">
<div class="flex h-full w-full flex-col justify-around">
<div class="mb-4 flex items-center">
<div class="flex gap-x-1"><button class="btn btn-base btn-secondary active is-active rounded-xl px-3 py-2 text-sm font-medium" transparent=""><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Forever </span></button></div>
<div class="plan-price relative ml-auto text-2xl font-medium leading-none tracking-tight">
<div class="text-right text-base font-bold tracking-wide"><!----></div>
<div class="font-inter relative flex items-baseline text-blue-400"><span data-js="price">$399</span></div>
</div>
</div>
<h5 class="mb-6 text-[30px] font-bold tracking-wide"><a class="inherits-color" href="/subscription?plan=forever">Forever Plan </a></h5>
<a class="flex justify-center" href="/subscription?plan=forever"><img src="/images/plans/sub-lifetime.svg?v=6" alt="Forever Plan" class="relative xl:w-[200px]" loading="lazy" style="top: -25px;"></a>
<p class="mx-auto -mt-3 mb-5 text-balance px-4 xl:text-lg" style="max-width: 25rem;">Permanently uplink to our mainframe. Pay once, and access Laracasts <strong>forever</strong>.</p>
<!----><a class="btn btn-base btn-secondary has-icon flex-center mx-auto mt-6 w-full gap-x-1 py-4 text-base lg:mx-6 lg:w-auto lg:h-[60px]" transparent="" data-js="join-button" href="/subscription?plan=forever"><!----><!----><svg x="0px" y="0px" viewBox="0 0 191.667 191.667" xml:space="preserve" width="15" class="mr-[11px] flex-shrink-0"><path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685 c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971 l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969 C156.146,65.765,156.146,74.362,150.862,79.646z" class="fill-current"></path></svg><!----><span class="flex-center h-full flex-shrink-0 text-wrap leading-none">Select Plan</span></a>
</div>
<div></div>
</div>
</div>
<div class="w-full lg:flex-1 xl:h-[500px] lg:max-w-[420px]" style="min-width: 240px;">
<div class="panel relative transition-colors duration-300 rounded-xl relative border-none plan group relative z-10 mx-auto mb-5 flex h-full w-full border px-6 py-5 text-center transition-colors duration-300 hover:border-blue lg:mb-0"
data-js="plan-card-business-monthly">
<div class="flex h-full w-full flex-col justify-around">
<div class="mb-4 flex items-center">
<div class="flex gap-x-1"><button class="btn btn-base btn-secondary active is-active rounded-xl px-3 py-2 text-sm font-medium" transparent=""><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Monthly </span></button><button class="btn btn-base btn-secondary rounded-xl px-3 py-2 text-sm font-medium" transparent=""><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Yearly </span></button></div>
<div class="plan-price relative ml-auto text-2xl font-medium leading-none tracking-tight">
<div class="text-right text-base font-bold tracking-wide"><!----></div>
<div class="font-inter relative flex items-baseline text-blue-400"><span data-js="price">$30</span></div>
</div>
</div>
<h5 class="mb-6 text-[30px] font-bold tracking-wide"><a class="inherits-color" href="/subscription?plan=business-monthly&quantity=2">Team Plan </a></h5>
<a class="flex justify-center" href="/subscription?plan=business-monthly&quantity=2"><img src="/images/plans/sub-business.svg?v=6" alt="Team Plan" class="relative xl:w-[200px]" loading="lazy" style="top: -25px;"></a>
<p class="mx-auto -mt-3 mb-5 text-balance px-4 xl:text-lg" style="max-width: 25rem;">Choose your <strong>team</strong> size and grant unlimited access.</p>
<div class="mx-4 flex justify-center gap-x-1" style="margin-bottom: -10px;"><button class="btn btn-base btn-secondary px-4 py-1 group-hover:bg-blue-400 font-bold text-lg hover:!bg-blue-500" type="button" transparent=""
aria-label="Decrease team count"><!----><!----><!----><!----><span class="flex-center h-full flex-shrink-0 text-wrap leading-none"> - </span></button><input type="number" min="2" max="250"
class="plan-team-count flex-center mx-2 w-auto flex-1 flex-grow-0 rounded-lg bg-blue-900 py-1 text-center" style="width: 87px;"><button
class="btn btn-base btn-secondary px-4 py-1 group-hover:bg-blue-400 font-bold text-lg hover:!bg-blue-500" type="button" transparent="" aria-label="Increase team count"><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none"> + </span></button></div>
<a class="btn btn-base btn-secondary has-icon flex-center mx-auto mt-6 w-full gap-x-1 py-4 text-base lg:mx-6 lg:w-auto lg:h-[60px]" transparent="" data-js="join-button" href="/subscription?plan=business-monthly&quantity=2"><!----><!----><svg x="0px" y="0px" viewBox="0 0 191.667 191.667" xml:space="preserve" width="15" class="mr-[11px] flex-shrink-0"><path d="M95.833,0C42.991,0,0,42.99,0,95.833s42.991,95.834,95.833,95.834s95.833-42.991,95.833-95.834S148.676,0,95.833,0z M150.862,79.646l-60.207,60.207c-2.56,2.56-5.963,3.969-9.583,3.969c-3.62,0-7.023-1.409-9.583-3.969l-30.685-30.685 c-2.56-2.56-3.97-5.963-3.97-9.583c0-3.621,1.41-7.024,3.97-9.584c2.559-2.56,5.962-3.97,9.583-3.97c3.62,0,7.024,1.41,9.583,3.971 l21.101,21.1l50.623-50.623c2.56-2.56,5.963-3.969,9.583-3.969c3.62,0,7.023,1.409,9.583,3.969 C156.146,65.765,156.146,74.362,150.862,79.646z" class="fill-current"></path></svg><!----><span class="flex-center h-full flex-shrink-0 text-wrap leading-none">Select Plan</span></a>
</div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="dialog-footer px-8 py-1 md:px-12 flex flex-wrap justify-between gap-4 items-center">
<div><a class="btn btn-base btn-secondary px-8" transparent="" href="/login"><!----><!----><!----><!----><span class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Log In </span></a></div>
<div class="flex gap-x-6"><a class="link font-medium text-grey-600" href="/signup"> Free Forum Account </a><a class="link hidden font-medium text-grey-600 md:inline-block" href="/teams"> Learn More About Teams </a></div>
<div class="hidden md:block"><a class="btn btn-base btn-secondary px-8" type="button" transparent="" href="/contact"><!----><!----><!----><!----><span class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Have a Question? </span></a>
</div>
</footer>
</form>DIALOG
<form class="space-y-8" autocomplete="off" method="dialog" style="height: auto;">
<header class="px-8 text-center md:px-12">
<h2 class="text-3xl font-semibold">Log In</h2>
</header>
<div class="dialog-main px-8 md:px-12">
<div class="control" data-js="email_field"><label class="block text-xs font-medium text-grey-600 block text-2xs text-grey-600 mb-px pl-1" for="email">Email</label>
<div class="relative flex items-center bg-transparent transition-colors duration-300 border-b border-card-600 has-[:focus]:border-blue-400 has-[:autofill]:border-none"><input id="email_23300.892300443247" type="text" name="email"
data-js="email" class="input is-minimal text-sm text-white" autocomplete="username" placeholder="Enter Email" required="" style="padding-right: 100px;">
<div class="h-full self-stretch flex-center rounded-e-md absolute right-0"><!---->
<div class="absolute right-3 mx-auto -mt-px flex h-4 w-4 items-center justify-center rounded-full p-1 bg-grey-800"><svg width="10" height="8" viewBox="0 0 10 8">
<path fill="#FFF" fill-rule="evenodd" stroke="#FFF" stroke-width=".728"
d="M3.533 5.646l-2.199-2.19c-.195-.194-.488-.194-.684 0-.195.195-.195.487 0 .682l2.883 2.87L9.055 1.51c.195-.194.195-.487 0-.681-.196-.195-.49-.195-.685 0L3.533 5.646z"></path>
</svg></div>
</div>
</div><!---->
</div>
<div class="control" data-js="password_field"><label class="block text-xs font-medium text-grey-600 block text-2xs text-grey-600 mb-px pl-1" for="password">Password</label>
<div class="relative flex items-center bg-transparent transition-colors duration-300 border-b border-card-600 has-[:focus]:border-blue-400 has-[:autofill]:border-none"><input id="password_47811.1483773236" type="password" name="password"
data-js="password" class="input is-minimal text-sm text-white" autocomplete="current-password" placeholder="Enter Password" modelmodifiers="[object Object]" required="" style="padding-right: 100px;">
<div class="h-full self-stretch flex-center rounded-e-md absolute right-0"><button type="button" title="Toggle private mode" class="text-2xs font-bold text-blue" style="padding-right: 40px;">Show</button>
<div class="absolute right-3 mx-auto -mt-px flex h-4 w-4 items-center justify-center rounded-full p-1 bg-grey-800"><svg width="10" height="8" viewBox="0 0 10 8">
<path fill="#FFF" fill-rule="evenodd" stroke="#FFF" stroke-width=".728"
d="M3.533 5.646l-2.199-2.19c-.195-.194-.488-.194-.684 0-.195.195-.195.487 0 .682l2.883 2.87L9.055 1.51c.195-.194.195-.487 0-.681-.196-.195-.49-.195-.685 0L3.533 5.646z"></path>
</svg></div>
</div>
</div><!---->
</div><!---->
</div>
<footer class="dialog-footer px-8 py-1 md:px-12 flex flex-wrap justify-end gap-4 mt-10"><button class="btn btn-base btn-primary focus:ring focus:ring-2 w-full mx-auto"><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Log In
</span></button><a class="btn btn-base btn-secondary focus:ring focus:ring-2 w-full mx-auto has-icon" href="/accounts/provider/redirect?"><!----><!----><!----><!----><svg viewBox="0 0 30 29" class="transition-all mr-2" width="14"><path class="fill-current" fill-rule="nonzero" d="M27.959 7.434a14.866 14.866 0 0 0-5.453-5.414C20.21.69 17.703.025 14.984.025c-2.718 0-5.226.665-7.521 1.995A14.864 14.864 0 0 0 2.01 7.434C.67 9.714 0 12.202 0 14.901c0 3.242.953 6.156 2.858 8.746 1.906 2.589 4.367 4.38 7.385 5.375.351.064.611.019.78-.136a.755.755 0 0 0 .254-.58l-.01-1.047c-.007-.658-.01-1.233-.01-1.723l-.448.077a5.765 5.765 0 0 1-1.083.068 8.308 8.308 0 0 1-1.356-.136 3.04 3.04 0 0 1-1.308-.58c-.403-.304-.689-.701-.858-1.192l-.195-.445a4.834 4.834 0 0 0-.614-.988c-.28-.362-.563-.607-.85-.736l-.136-.097a1.428 1.428 0 0 1-.253-.233 1.062 1.062 0 0 1-.176-.271c-.039-.09-.007-.165.098-.223.104-.059.292-.087.566-.087l.39.058c.26.052.582.206.965.465.384.258.7.594.947 1.007.299.53.66.933 1.082 1.21.423.278.85.417 1.278.417.43 0 .8-.032 1.112-.097a3.9 3.9 0 0 0 .878-.29c.117-.866.436-1.53.956-1.996a13.447 13.447 0 0 1-2-.348 7.995 7.995 0 0 1-1.833-.756 5.244 5.244 0 0 1-1.571-1.298c-.416-.516-.758-1.195-1.024-2.034-.267-.84-.4-1.808-.4-2.905 0-1.563.514-2.893 1.541-3.99-.481-1.176-.436-2.493.137-3.952.377-.116.936-.03 1.678.261.741.291 1.284.54 1.629.746.345.207.621.381.83.523a13.948 13.948 0 0 1 3.745-.503c1.288 0 2.537.168 3.747.503l.741-.464c.507-.31 1.106-.595 1.795-.853.69-.258 1.216-.33 1.58-.213.586 1.46.638 2.777.156 3.951 1.028 1.098 1.542 2.428 1.542 3.99 0 1.099-.134 2.07-.4 2.916-.267.846-.611 1.524-1.034 2.034-.423.51-.95.94-1.58 1.288a8.01 8.01 0 0 1-1.834.756c-.592.155-1.259.271-2 .349.676.58 1.014 1.498 1.014 2.75v4.087c0 .232.081.426.244.58.163.155.42.2.77.136 3.019-.994 5.48-2.786 7.386-5.375 1.905-2.59 2.858-5.504 2.858-8.746 0-2.698-.671-5.187-2.01-7.466z"></path></svg><span class="flex-center h-full flex-shrink-0 text-wrap leading-none">Log In With GitHub? </span></a>
<div class="mt-4 flex flex-1 justify-between"><button class="block text-sm text-grey-600 hover:underline"> Forgot Your Password? </button><button class="block text-sm text-grey-600 hover:underline"> Sign Up! </button></div>
</footer>
</form>DIALOG
<form class="space-y-8 py-8" autocomplete="off" method="dialog">
<header class="px-8 text-center md:px-12">
<h2 class="text-3xl font-semibold"> Forgot Your Password? </h2>
</header>
<div class="dialog-main px-8 md:px-12">
<div id="turnstile-3517" class="cf-turnstile" data-sitekey="0x4AAAAAAACQcLxtW0lUz22W"></div>
<div class="control" data-js="email_field"><label class="block text-xs font-medium text-grey-600 block text-2xs text-grey-600 mb-px pl-1" for="email">Email</label>
<div class="relative flex items-center bg-transparent transition-colors duration-300 border-b border-card-600 has-[:focus]:border-blue-400 has-[:autofill]:border-none"><input id="email_9042.250319307905" type="email" name="email"
data-js="email" class="input is-minimal text-sm text-white" autocomplete="username" placeholder="Enter Email" required="" style="padding-right: 100px;">
<div class="h-full self-stretch flex-center rounded-e-md absolute right-0"><!---->
<div class="absolute right-3 mx-auto -mt-px flex h-4 w-4 items-center justify-center rounded-full p-1 bg-grey-800"><svg width="10" height="8" viewBox="0 0 10 8">
<path fill="#FFF" fill-rule="evenodd" stroke="#FFF" stroke-width=".728"
d="M3.533 5.646l-2.199-2.19c-.195-.194-.488-.194-.684 0-.195.195-.195.487 0 .682l2.883 2.87L9.055 1.51c.195-.194.195-.487 0-.681-.196-.195-.49-.195-.685 0L3.533 5.646z"></path>
</svg></div>
</div>
</div><!---->
</div>
</div>
<footer class="dialog-footer px-8 py-1 md:px-12 flex flex-wrap justify-end gap-4 mt-10"><button class="btn btn-base btn-primary focus:ring focus:ring-2 w-full mx-auto"><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Reset </span></button></footer>
</form><form class="w-full space-y-8" autocomplete="off">
<header class="px-8 text-center md:px-12">
<h2 class="text-3xl font-semibold">Sign Up!</h2>
</header>
<div class="dialog-main px-8 md:px-12">
<div class="control" data-js="username_field"><label class="block text-xs font-medium text-grey-600 block text-2xs text-grey-600 mb-px pl-1" for="username">Username</label>
<div class="relative flex items-center bg-transparent transition-colors duration-300 border-b border-card-600 has-[:focus]:border-blue-400 has-[:autofill]:border-none"><input id="username_72109.61483397773" type="text" name="username"
data-js="username" class="input is-minimal text-sm text-white" autocomplete="username" placeholder="JohnDoe" required="" style="padding-right: 100px;">
<div class="h-full self-stretch flex-center rounded-e-md absolute right-0"><!---->
<div class="absolute right-3 mx-auto -mt-px flex h-4 w-4 items-center justify-center rounded-full p-1 bg-grey-800"><svg width="10" height="8" viewBox="0 0 10 8">
<path fill="#FFF" fill-rule="evenodd" stroke="#FFF" stroke-width=".728"
d="M3.533 5.646l-2.199-2.19c-.195-.194-.488-.194-.684 0-.195.195-.195.487 0 .682l2.883 2.87L9.055 1.51c.195-.194.195-.487 0-.681-.196-.195-.49-.195-.685 0L3.533 5.646z"></path>
</svg></div>
</div>
</div><!---->
</div>
<div class="control" data-js="email_field"><label class="block text-xs font-medium text-grey-600 block text-2xs text-grey-600 mb-px pl-1" for="email">Email</label>
<div class="relative flex items-center bg-transparent transition-colors duration-300 border-b border-card-600 has-[:focus]:border-blue-400 has-[:autofill]:border-none"><input id="email_30090.012916111224" type="email" name="email"
data-js="email" class="input is-minimal text-sm text-white" autocomplete="email" placeholder="john@example.com" required="" style="padding-right: 100px;">
<div class="h-full self-stretch flex-center rounded-e-md absolute right-0"><!---->
<div class="absolute right-3 mx-auto -mt-px flex h-4 w-4 items-center justify-center rounded-full p-1 bg-grey-800"><svg width="10" height="8" viewBox="0 0 10 8">
<path fill="#FFF" fill-rule="evenodd" stroke="#FFF" stroke-width=".728"
d="M3.533 5.646l-2.199-2.19c-.195-.194-.488-.194-.684 0-.195.195-.195.487 0 .682l2.883 2.87L9.055 1.51c.195-.194.195-.487 0-.681-.196-.195-.49-.195-.685 0L3.533 5.646z"></path>
</svg></div>
</div>
</div><!---->
</div>
<div class="control" data-js="password_field"><label class="block text-xs font-medium text-grey-600 block text-2xs text-grey-600 mb-px pl-1" for="password">Password</label>
<div class="relative flex items-center bg-transparent transition-colors duration-300 border-b border-card-600 has-[:focus]:border-blue-400 has-[:autofill]:border-none"><input id="password_32861.426881511" type="password" name="password"
data-js="password" class="input is-minimal text-sm text-white" autocomplete="new-password" placeholder="Enter Password" required="" style="padding-right: 100px;">
<div class="h-full self-stretch flex-center rounded-e-md absolute right-0"><button type="button" title="Toggle private mode" class="text-2xs font-bold text-blue" style="padding-right: 40px;">Show</button>
<div class="absolute right-3 mx-auto -mt-px flex h-4 w-4 items-center justify-center rounded-full p-1 bg-grey-800"><svg width="10" height="8" viewBox="0 0 10 8">
<path fill="#FFF" fill-rule="evenodd" stroke="#FFF" stroke-width=".728"
d="M3.533 5.646l-2.199-2.19c-.195-.194-.488-.194-.684 0-.195.195-.195.487 0 .682l2.883 2.87L9.055 1.51c.195-.194.195-.487 0-.681-.196-.195-.49-.195-.685 0L3.533 5.646z"></path>
</svg></div>
</div>
</div><!---->
</div>
<div id="turnstile-7863" class="cf-turnstile" data-sitekey="0x4AAAAAAACQcLxtW0lUz22W"></div><!---->
</div>
<footer class="dialog-footer px-8 py-1 md:px-12 flex flex-wrap justify-center gap-4"><button class="btn btn-base btn-primary focus:ring focus:ring-2 w-full mx-auto" type="submit"><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Register
</span></button><a class="btn btn-base btn-secondary focus:ring focus:ring-2 w-full mx-auto has-icon" href="/accounts/provider/redirect?"><!----><!----><!----><!----><svg viewBox="0 0 30 29" class="transition-all mr-2" width="14"><path class="fill-current" fill-rule="nonzero" d="M27.959 7.434a14.866 14.866 0 0 0-5.453-5.414C20.21.69 17.703.025 14.984.025c-2.718 0-5.226.665-7.521 1.995A14.864 14.864 0 0 0 2.01 7.434C.67 9.714 0 12.202 0 14.901c0 3.242.953 6.156 2.858 8.746 1.906 2.589 4.367 4.38 7.385 5.375.351.064.611.019.78-.136a.755.755 0 0 0 .254-.58l-.01-1.047c-.007-.658-.01-1.233-.01-1.723l-.448.077a5.765 5.765 0 0 1-1.083.068 8.308 8.308 0 0 1-1.356-.136 3.04 3.04 0 0 1-1.308-.58c-.403-.304-.689-.701-.858-1.192l-.195-.445a4.834 4.834 0 0 0-.614-.988c-.28-.362-.563-.607-.85-.736l-.136-.097a1.428 1.428 0 0 1-.253-.233 1.062 1.062 0 0 1-.176-.271c-.039-.09-.007-.165.098-.223.104-.059.292-.087.566-.087l.39.058c.26.052.582.206.965.465.384.258.7.594.947 1.007.299.53.66.933 1.082 1.21.423.278.85.417 1.278.417.43 0 .8-.032 1.112-.097a3.9 3.9 0 0 0 .878-.29c.117-.866.436-1.53.956-1.996a13.447 13.447 0 0 1-2-.348 7.995 7.995 0 0 1-1.833-.756 5.244 5.244 0 0 1-1.571-1.298c-.416-.516-.758-1.195-1.024-2.034-.267-.84-.4-1.808-.4-2.905 0-1.563.514-2.893 1.541-3.99-.481-1.176-.436-2.493.137-3.952.377-.116.936-.03 1.678.261.741.291 1.284.54 1.629.746.345.207.621.381.83.523a13.948 13.948 0 0 1 3.745-.503c1.288 0 2.537.168 3.747.503l.741-.464c.507-.31 1.106-.595 1.795-.853.69-.258 1.216-.33 1.58-.213.586 1.46.638 2.777.156 3.951 1.028 1.098 1.542 2.428 1.542 3.99 0 1.099-.134 2.07-.4 2.916-.267.846-.611 1.524-1.034 2.034-.423.51-.95.94-1.58 1.288a8.01 8.01 0 0 1-1.834.756c-.592.155-1.259.271-2 .349.676.58 1.014 1.498 1.014 2.75v4.087c0 .232.081.426.244.58.163.155.42.2.77.136 3.019-.994 5.48-2.786 7.386-5.375 1.905-2.59 2.858-5.504 2.858-8.746 0-2.698-.671-5.187-2.01-7.466z"></path></svg><span class="flex-center h-full flex-shrink-0 text-wrap leading-none"> Register Using GitHub? </span></a><button
class="block text-sm text-grey-600 hover:underline"> Already Have an Account? </button></footer>
</form>DIALOG
<form method="dialog">
<div class="dialog-main px-8 py-1 text-center"><img loading="lazy" class="lazy" src="/images/icons/flash/info.svg" alt="" width="96" height="96">
<h1 class="mt-2 text-xl font-semibold"></h1>
<p id="flash-dialog-message" class="mt-3 text-sm"></p>
<div class="mt-5 space-y-2"><button class="btn btn-base btn-secondary focus:ring focus:ring-2 w-full mx-auto" value="Cancel"><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none">Cancel</span></button><button class="btn btn-base btn-primary focus:ring focus:ring-2 w-full mx-auto" value="OK"><!----><!----><!----><!----><span
class="flex-center h-full flex-shrink-0 text-wrap leading-none">OK</span></button></div>
</div>
</form>Text Content
Topics Series Path Larabits New! Forum Podcast
*
*
*
* Sign In
* Get Started for Free
Your Instructor
LUKE DOWNING
More Series From Me
Website
Hey there! I’m a full-stack engineer and teacher from the UK. I work with many
web technologies, with a focus on PHP and Laravel. I create libraries that make
it easier to write and test code.
Browse All Series Series Still in Development Last Updated: May 31,
2024Techniques
HOW TO CONTRIBUTE TO OPEN SOURCE
Armed with a computer, some git knowledge, and an idea, any of us can contribute
to the frameworks and packages that we use every day. Cool as that may be, it
can initially be a daunting experience.
So let's go on a journey together, as we take an idea for Laravel Prompts from
musings to merging. Learning the basic processes will put you in good stead for
contributing your own ideas.
Play Series
Add to Watchlist
13 episodes
1h 49m
Intermediate
1. I THE PULL REQUEST
1. 01
SELECTING A PROJECT
So what are we going to contribute? Let's take a look at Laravel
Prompts, a cool package that allows you to create beautiful CLI
applications. There's a little feature I've been wanting to add for some
time now that will make for a great Pull Request.
3m 21s Free to Watch!
2. 02
FORKING AND INSTALLATION
Before we can write any code, we need to install Prompts locally. This
involves a little bit of git work, so we'll go through these steps
together that you can then apply to any project you wish to contribute
to.
4m 26s Free to Watch!
3. 03
GETTING A FEEL FOR THE CODE
You're going to be contributing to a project you've never worked on,
with maintainers you've never worked with - already an uphill battle.
That's why it's super important to get familiar with the codebase before
you start hacking away at it. Let's take a brief look at how Prompts
works.
8m 44s Free to Watch!
4. 04
BUILD IT BACKWARDS
One of my favorite ways to code is to create the final API before
writing the implementation. This approach lends to clean code that is a
joy to use. Let's write a script to demo usage of our steps idea.
7m 07s Free to Watch!
5. 05
SCRIPT DRIVEN DEVELOPMENT
Now that we have a script in place, we can use it to craft the
implementation, which is sort of a play on TDD. We'll run the script
each time we change the code until our script executes successfully.
7m 55s Free to Watch!
6. 06
WORKING ON REVERTING
Let's turn our attention to how reverting a step works. There are
several scenarios we need to consider, so we'll keep hacking away using
our playground script until we get the desired output in the terminal.
17m 14s Free to Watch!
7. 07
PROVE YOUR WORK WORKS
The majority of projects you'll contribute to will have tests in place,
and the maintainers will expect you to add backing tests before they'll
merge your contribution. Let's look at how Prompts' tests are organised
and then begin to craft our own to back up the functionality we've added
for steps.
12m 39s Free to Watch!
8. 08
REFACTOR FOR READABILITY
With tests in place, we can now confidently refactor to clean up our
contribution before publishing it for the world to see. With each change
we make, we'll re-run our step tests to make sure everything still works
until we're happy with how the code looks and feels.
11m 37s Free to Watch!
9. 09
WRITING A PR DESCRIPTION
The time has come - it's time to create our Pull Request. As important
as the code is, it's equally important that our PR description makes it
easy for the maintainer and others to see exactly what we're trying to
achieve. Let's take a look at the PR description I put together for
steps.
3m 39s Free to Watch!
10. 10
FIXING FAILING ACTIONS
Gasp! Shock! Panic! The Github Actions are failing! Don't worry, it's
usually just a simple tweak to get them green. In this case, Prompts
uses PHPStan for type checking, so we'll need to run PHPStan locally and
fix the errors we're seeing.
4m 21s Free to Watch!
2. II MAINTAINER FEEDBACK
1. 11
IMPLEMENTING FEEDBACK: PART 1
If your PR is more than a few lines of code, it's likely that the
maintainer will have feedback with changes they'd like to see. In our
case, we have some fairly extensive changes to make, so let's deal with
those changes (both physically and emotionally) in the next couple of
episodes.
9m 37s Free to Watch!
2. 12
IMPLEMENTING FEEDBACK: PART 2
Along with changing terminology from steps to form, Jess has also
requested that we implement a cool idea she had for chaining prompts
directly rather than passing closures each time. Let's see if we can get
that working to complete our feedback checklist.
15m 18s Free to Watch!
3. III WRAPPING UP
1. 13
SO WHAT'S NEXT?
It's time to celebrate! Our PR was merged, and you're now able to use
this feature in Prompts. We did it! How cool is that? You've seen how to
go from concept to completion with Open Source, on a fairly complex
contribution. What will you do with your newfound knowledge? Let me give
you a suggestion.
3m 12s Free to Watch!
A MASSIVE COMMUNITY OF PROGRAMMERS JUST LIKE YOU.
Think of Laracasts sort of like Netflix, but for developers. You could spend
weeks binging, and still not get through all the content we have to offer.
Push your web development skills to the next level, through expert screencasts
on PHP, Laravel, Vue, and much more.
Get Started For Free!
WANT US TO EMAIL YOU OCCASIONALLY WITH LARACASTS NEWS?
Subscribe
Nine out of ten doctors recommend Laracasts over competing brands. Come inside,
see for yourself, and massively level up your development skills in the process.
LEARN
* Sign Up
* Sign In
* Pricing
* Series
* CreatorSeries
* Laravel Path
* Larabits
* Topics
DISCUSS
* Forum
* Podcast
* Blog
* Support
* Work With Us
EXTRAS
* Gift Certificates
* Lifers
* Teams
* FAQ
* Assets
* Get a Job
* Privacy
* Terms
* Commercial
© Laracasts 2024. All rights reserved.
Yes, all of them. That means you, Todd.
Proudly hosted with Laravel Forge and DigitalOcean.
// Search
* Topics // just browsing?
* Series // it's what you're here for
* Path // walk the path
* Larabits // got five minutes?
* Discussions // let it all out
Sign InSign Up
SIGN UP
LET'S GET YOU SIGNED UP
It takes less than a minute, and just might be the best decision you'll make all
day. But you can always do this later, if you prefer.
Monthly Yearly
$19
INDIVIDUAL PLAN
Be in the know. Fetch an endless stream of input with our monthly plan.
Select Plan
Forever
$399
FOREVER PLAN
Permanently uplink to our mainframe. Pay once, and access Laracasts forever.
Select Plan
Monthly Yearly
$30
TEAM PLAN
Choose your team size and grant unlimited access.
- +
Select Plan
Log In
Free Forum Account Learn More About Teams
Have a Question?
LET'S SORT OUT THE CONFUSION...
CAN I CANCEL AT ANY TIME?
Laracasts subscriptions renew, just like Netflix or Hulu. But, of course you can
cancel at any point. It would be a pretty shabby business, if that wasn't an
option! Seriously — it's not like the gym. Visit your settings page, click
"Cancel," and done. Tears will be shed on this end, but that's not your concern.
IF I SIGN UP, DO I GAIN ACCESS TO EVERYTHING?
Yes! And that's over one thousand lessons of training goodness — by a teacher
who won't put you to sleep. You've seen those terrible Youtube screencasts;
life's too short to endure teenaged umms, uhhs, and typos. Did you know that
nine out of ten doctors recommend Laracasts over competing brands?
DO YOU OFFER STUDENT DISCOUNTS?
Laracasts is already priced below many similar sites, so there isn't much wiggle
room. However, if you live in a country where $19 per month is prohibitively
high, email support@laracasts.com, and we'll see what we can do for you.
Otherwise, please stick with the monthly rate we offer. Thank you!
CAN I PAY USING PAYPAL?
We don't officially support Paypal on the sign up page; however, you can
manually pay for a year's worth of access here.
I'M INTERESTED IN THE LIFETIME ACCOUNT.
Of course you are. They're an incredible deal. Okay, here's how it works: you
make a one-time payment, and we then give you access to everything we've ever
created...as well as everything we create in the future.
WAS TOTAL RECALL A DREAM OR NOT?
Look, we've had this conversation over and over. My vote is that everything
after he's put to sleep at the "Rekall" place is a dream. Did you hear the
doctor say, " Blue sky on Mars? That's a new one." There's your hint. Now,
please, back on track. Are we doing this or not?
LOG IN
Email
Password
Show
Log In Log In With GitHub?
Forgot Your Password? Sign Up!
FORGOT YOUR PASSWORD?
Email
Reset
SIGN UP!
Username
Email
Password
Show
Register Register Using GitHub? Already Have an Account?
CancelOK