<div>Hey, I’m Ryan Hefner and I’d like to welcome you to the All Play podcast. On this show I will be sharing my experiences as I build products and open-source software, sharing the highs and lows that go into building a solid product, and hopefully leading to a successful launch and growth of customers.<br><br>In this episode I share a bit of my background, moving from Ohio to New York to work at <a href="https://fantasy.co">Fantasy</a>. The roles and responsibilities I learned while working at an agency. My transition into working on product at <a href="https://vimeo.com">Vimeo</a>, and how I re-wrote the Vimeo Video Player and eventually grew to become the Director of Engineering at Vimeo, overseeing all things players and video focused. And, how during these career transitions, I have continued to work on products and open-source software.<br><br>I hope you’ll find this show interesting, and look forward to sharing the ups and downs that go into building, launching, and growing products—and who knows, maybe companies.<br><br>To follow along, you can find me at <a href="https://www.ryanhefner.com">ryanhefner.com</a>, follow me on Twitter <a href="https://twitter.com/ryanhfner">@ryanhefner</a>, and keep up with the show on <a href="https://www.allplay.fm">allplay.fm</a> and <a href="https://twitter.com/allplayfm">@allplayfm</a>.<br><br>Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:<br><a href="https://transistor.fm/?via=allplay">Transistor FM</a><br><a href="https://usefathom.com/ref/EKONBS">Fathom Analytics</a></div>

Hey, I’m Ryan Hefner and I’d like to welcome you to the All Play podcast. On this show I will be sharing my experiences as I build products and open-source software, sharing the highs and lows that go into building a solid product, and hopefully leading to a successful launch and growth of customers.In this episode I share a bit of my background, moving from Ohio to New York to work at Fantasy. The roles and responsibilities I learned while working at an agency. My transition into working on product at Vimeo, and how I re-wrote the Vimeo Video Player and eventually grew to become the Director of Engineering at Vimeo, overseeing all things players and video focused. And, how during these career transitions, I have continued to work on products and open-source software.I hope you’ll find this show interesting, and look forward to sharing the ups and downs that go into building, launching, and growing products—and who knows, maybe companies.To follow along, you can find me at ryanhefner.com, follow me on Twitter @ryanhefner, and keep up with the show on allplay.fm and @allplayfm.Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:Transistor FMFathom Analytics

000 - Trailer / Intro

https://share.transistor.fm/s/3b7e99e8/transcript

<div>On this episodes I dig into getting back into action and picking a stack to base the action on. In the past, I have built my products and prototypes in <a href="https://www.laravel.com">Laravel</a>, using an SPA—typically built in <a href="https://react.dev">React</a>—for the majority of stuff, and I go into all the pros, and a few of the cons, I have experienced with that setup along the way.<br><br>Well, now the year is 2024 and as easy as it would be go back to that trusty old cocktail of sorts, I want to push myself to explore something new. I go into how I have been structuring my latest work utilizing <a href="https://nx.dev">Nx</a> for the monorepo setup, and primarily using React + <a href="https://nextjs.org/">Next</a> for the majority of the client apps.<br><br>I love the DX surrounding some of these newer hosting platforms, allowing for instant previews of branches that are in the works, and being able to have as many of those up and running, and viewable, while working on a project. That coupled with the fact that I haven't been working on PHP for the last 4+ years and all the changes that have been going on, in both PHP and Laravel, I feel a little behind the curve in that ecosystem, and honestly I really just like working in Javascript and not having to deal with the context switching between PHP and Javascript.<br><br>So, with all that said, I am not wasting any more time on the debate and am going to go all-in—at least on this first project—on the all Javascript setup, utilizing Nx to manage the monorepo for the project. React + Next for both the marketing site and app, which will be two separate apps deployed on the same push, utilizing shared libraries within the repo. And, will be trying out <a href="https://nestjs.com/">NestJS</a> for the API, because—for a number of reasons—I think that is the way to go vs. utilizing API routes via Next to try to accomplish the external API. <br><br><strong>References</strong></div><ul><li><a href="https://www.laravel.com">Laravel</a></li><li><a href="https://stripe.com/">Stripe</a></li><li><a href="https://www.lemonsqueezy.com/">Lemon Squeezy</a></li><li><a href="https://www.paddle.com/">Paddle</a></li><li><a href="https://pulse.laravel.com/">Laravel Pulse</a> (the one I couldn't think of)</li><li><a href="https://reverb.laravel.com/">Laravel Reverb</a></li><li><a href="https://nextjs.org/">Next</a></li><li><a href="https://www.vercel.com">Vercel</a></li><li><a href="https://render.com/">Render</a></li><li><a href="https://www.netlify.com/">Netlify</a></li><li><a href="https://laravelshift.com/">Laravel Shift</a></li><li><a href="https://nx.dev">Nx</a></li><li><a href="https://nestjs.com/">NestJS</a></li></ul><div>To follow along, you can find me at <a href="https://www.ryanhefner.com/">ryanhefner.com</a>, follow me on Twitter <a href="https://twitter.com/ryanhfner">@ryanhefner</a>, and keep up with the show on <a href="https://www.allplay.fm/">allplay.fm</a> and onTwitter <a href="https://twitter.com/allplayfm">@allplayfm</a>.<br><br>Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:<br><a href="https://transistor.fm/?via=allplay">Transistor FM</a><br><a href="https://usefathom.com/ref/EKONBS">Fathom Analytics</a></div>

On this episodes I dig into getting back into action and picking a stack to base the action on. In the past, I have built my products and prototypes in Laravel, using an SPA—typically built in React—for the majority of stuff, and I go into all the pros, and a few of the cons, I have experienced with that setup along the way.Well, now the year is 2024 and as easy as it would be go back to that trusty old cocktail of sorts, I want to push myself to explore something new. I go into how I have been structuring my latest work utilizing Nx for the monorepo setup, and primarily using React + Next for the majority of the client apps.I love the DX surrounding some of these newer hosting platforms, allowing for instant previews of branches that are in the works, and being able to have as many of those up and running, and viewable, while working on a project. That coupled with the fact that I haven't been working on PHP for the last 4+ years and all the changes that have been going on, in both PHP and Laravel, I feel a little behind the curve in that ecosystem, and honestly I really just like working in Javascript and not having to deal with the context switching between PHP and Javascript.So, with all that said, I am not wasting any more time on the debate and am going to go all-in—at least on this first project—on the all Javascript setup, utilizing Nx to manage the monorepo for the project. React + Next for both the marketing site and app, which will be two separate apps deployed on the same push, utilizing shared libraries within the repo. And, will be trying out NestJS for the API, because—for a number of reasons—I think that is the way to go vs. utilizing API routes via Next to try to accomplish the external API. ReferencesLaravelStripeLemon SqueezyPaddleLaravel Pulse (the one I couldn't think of)Laravel ReverbNextVercelRenderNetlifyLaravel ShiftNxNestJSTo follow along, you can find me at ryanhefner.com, follow me on Twitter @ryanhefner, and keep up with the show on allplay.fm and onTwitter @allplayfm.Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:Transistor FMFathom Analytics

001 - Default to Stacktion

https://share.transistor.fm/s/120dbfad/transcript

<div>CSS and component libraries, where to begin?<br><br>Over the years I have used a bunch of different flavors including, <a href="https://github.com/css-modules/css-modules">css-modules</a>, <a href="https://styled-components.com/">styled-components</a>, CSS + Sass and a few other things. But, over the last 3 years or so, I have been primarily using <a href="https://chakra-ui.com/">ChakraUI</a>, which is a component library that offers a really nice way to setup your theme—based on <a href="https://github.com/styled-system/styled-system">styled-system</a>—as well as control the styles and defaults of the components they offer, along with being able to build and style your own components, using the same system, all accessible via the main theme configuration.<br><br>But, since I am trying to shed the biases of the past, and explore all the new potentially new, hot stuff that could make my life in code potentially better, I decided to explore some of the new stuff that has been spinning out of the ChakraUI world, as well as some thoughts and questions I have about sticking with that world, or going all-in on <a href="https://tailwindcss.com/">Tailwind</a>.<br><br><strong>References</strong></div><ul><li><a href="https://github.com/css-modules/css-modules">CSS modules</a></li><li><a href="https://styled-components.com/">styled-components</a></li><li><a href="https://sass-lang.com/">Sass</a></li><li><a href="https://postcss.org/">PostCSS</a></li><li><a href="https://chakra-ui.com/">ChakraUI</a></li><li><a href="https://github.com/styled-system/styled-system">styled-system</a></li><li><a href="https://emotion.sh/docs/introduction">Emotion</a></li><li><a href="https://panda-css.com/">Panda CSS</a></li><li><a href="https://ark-ui.com/">Ark UI</a></li><li><a href="https://park-ui.com/">Park UI</a></li><li><a href="https://tailwindcss.com/">Tailwind CSS</a></li><li><a href="https://www.radix-ui.com/">Radix</a></li><li><a href="https://ui.shadcn.com/">shadcn/ui</a></li></ul><div>To follow along, you can find me at <a href="https://www.ryanhefner.com/">ryanhefner.com</a>, follow me on Twitter <a href="https://twitter.com/ryanhfner">@ryanhefner</a>, and keep up with the show on <a href="https://www.allplay.fm/">allplay.fm</a> and <a href="https://twitter.com/allplayfm">@allplayfm</a>.<br><br>Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:<br><a href="https://transistor.fm/?via=allplay">Transistor FM</a><br><a href="https://usefathom.com/ref/EKONBS">Fathom Analytics</a></div>

CSS and component libraries, where to begin?Over the years I have used a bunch of different flavors including, css-modules, styled-components, CSS + Sass and a few other things. But, over the last 3 years or so, I have been primarily using ChakraUI, which is a component library that offers a really nice way to setup your theme—based on styled-system—as well as control the styles and defaults of the components they offer, along with being able to build and style your own components, using the same system, all accessible via the main theme configuration.But, since I am trying to shed the biases of the past, and explore all the new potentially new, hot stuff that could make my life in code potentially better, I decided to explore some of the new stuff that has been spinning out of the ChakraUI world, as well as some thoughts and questions I have about sticking with that world, or going all-in on Tailwind.ReferencesCSS modulesstyled-componentsSassPostCSSChakraUIstyled-systemEmotionPanda CSSArk UIPark UITailwind CSSRadixshadcn/uiTo follow along, you can find me at ryanhefner.com, follow me on Twitter @ryanhefner, and keep up with the show on allplay.fm and @allplayfm.Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:Transistor FMFathom Analytics

002 - Style and Error

https://share.transistor.fm/s/3d21f330/transcript

<div>tl;dr I am not going to be editing these episodes, so please bare with me.<br><br>Although, if you want me to reflect on it a bit more, there’s a reason for making the active choice to not edit these episodes. Part of that decision is based on efficiency, as I work through these episodes I am trying to take all the ideas swirling around in my head and pluck a single one that I can try to break down and pick apart within a quick 10 minutes—maybe a little more, or a little less. I could definitely try to get to that same time constraint by recording a bunch of material and whittling it down to fit the space required, but with that approach I feel like you lose all the nuance on the topic, and you don’t get to hear the gears grind through the topic. Also, recording 30 minutes or an hour of material and trying to edit it neatly into a 10 minute episode that sounds fluid and coherent sounds like a miserable task, that I both don’t have the patience, nor the time to take on.<br><br>So, please bare with me if I happen to misspeak or mispronounce a few things from time-to-time. I hope the core ideas ring through and you are still able to take away something. And, along those lines, I go into my OCD approach to listening to albums and podcasts, and recommend that if you do intend on listening to multiple episodes of this podcast, that you should try to do that from the earliest episode and listen until the current/last episode. Just a recommendation, you do you, but from my experience with other episodes, I will probably be referencing either ideas or projects from the past, or may even come up with some made up word that I reference from an earlier show, so listening to them chronologically will probably reduce the confusion level as those pop up.<br><br>To follow along, you can find me at <a href="https://www.ryanhefner.com/">ryanhefner.com</a>, follow me on Twitter <a href="https://twitter.com/ryanhfner">@ryanhefner</a>, and keep up with the show on <a href="https://www.allplay.fm/">allplay.fm</a> and <a href="https://twitter.com/allplayfm">@allplayfm</a>.<br><br>Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:<br><a href="https://transistor.fm/?via=allplay">Transistor FM</a><br><a href="https://usefathom.com/ref/EKONBS">Fathom Analytics</a></div>

tl;dr I am not going to be editing these episodes, so please bare with me.Although, if you want me to reflect on it a bit more, there’s a reason for making the active choice to not edit these episodes. Part of that decision is based on efficiency, as I work through these episodes I am trying to take all the ideas swirling around in my head and pluck a single one that I can try to break down and pick apart within a quick 10 minutes—maybe a little more, or a little less. I could definitely try to get to that same time constraint by recording a bunch of material and whittling it down to fit the space required, but with that approach I feel like you lose all the nuance on the topic, and you don’t get to hear the gears grind through the topic. Also, recording 30 minutes or an hour of material and trying to edit it neatly into a 10 minute episode that sounds fluid and coherent sounds like a miserable task, that I both don’t have the patience, nor the time to take on.So, please bare with me if I happen to misspeak or mispronounce a few things from time-to-time. I hope the core ideas ring through and you are still able to take away something. And, along those lines, I go into my OCD approach to listening to albums and podcasts, and recommend that if you do intend on listening to multiple episodes of this podcast, that you should try to do that from the earliest episode and listen until the current/last episode. Just a recommendation, you do you, but from my experience with other episodes, I will probably be referencing either ideas or projects from the past, or may even come up with some made up word that I reference from an earlier show, so listening to them chronologically will probably reduce the confusion level as those pop up.To follow along, you can find me at ryanhefner.com, follow me on Twitter @ryanhefner, and keep up with the show on allplay.fm and @allplayfm.Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:Transistor FMFathom Analytics

003 - No Edits

https://share.transistor.fm/s/c2ae9182/transcript

<div>In this episode I dig into why I decided to build a custom site for this podcast vs. using one of the templated sites that <a href="https://transistor.fm/?via=allplay">TransistorFM</a> offers. Part of it is based on some of my ideas about utilizing platforms to push traffic back to sites that you own. The other part of it was I just had an idea of what I wanted the site to look like, and how I wanted it to function, and I couldn’t suppress the urge from just building it myself.<br> <br>I also explain how I plan to add a newsletter to the site as well, and you can sign up for at <a href="https://www.allplay.fm">allplay.fm</a>. I am currently using <a href="https://resend.com">Resend</a> to capture the subscribers, and will be using them for the newsletter delivery, but have some plans about how I will be doing that in a later episode.<br><br>In addition to the site, I get into some thoughts I am having about expanding the reach of the podcast—and really just personal stuff in general—and how potentially replicating that across a number of sites that all point back at the sites you own either help or hurt your own sites performance, or really where do people find it and when do they drop off?<br><br>And, I geek out about some of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer">Audio Buffer</a> stuff I am using on the site to use for audio playback and will be publishing the library I am using for that at a later time, and will have an episode about that when it happens.<br><br><strong>References</strong></div><ul><li><a href="https://transistor.fm/?via=allplay">TransistorFM</a></li><li><a href="https://nx.dev">Nx</a></li><li><a href="https://contentlayer.dev/">Contentlayer</a></li><li><a href="https://allplay.transistor.fm/">allplay.transistor.fm</a></li><li><a href="https://resend.com">Resend</a></li></ul><div>To follow along, you can find me at <a href="https://www.ryanhefner.com/">ryanhefner.com</a>, follow me on Twitter <a href="https://twitter.com/ryanhfner">@ryanhefner</a>, and keep up with the show on <a href="https://www.allplay.fm/">allplay.fm</a> and <a href="https://twitter.com/allplayfm">@allplayfm</a>.<br><br>Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:<br><a href="https://transistor.fm/?via=allplay">Transistor FM</a><br><a href="https://usefathom.com/ref/EKONBS">Fathom Analytics</a></div>

In this episode I dig into why I decided to build a custom site for this podcast vs. using one of the templated sites that TransistorFM offers. Part of it is based on some of my ideas about utilizing platforms to push traffic back to sites that you own. The other part of it was I just had an idea of what I wanted the site to look like, and how I wanted it to function, and I couldn’t suppress the urge from just building it myself. I also explain how I plan to add a newsletter to the site as well, and you can sign up for at allplay.fm. I am currently using Resend to capture the subscribers, and will be using them for the newsletter delivery, but have some plans about how I will be doing that in a later episode.In addition to the site, I get into some thoughts I am having about expanding the reach of the podcast—and really just personal stuff in general—and how potentially replicating that across a number of sites that all point back at the sites you own either help or hurt your own sites performance, or really where do people find it and when do they drop off?And, I geek out about some of the Web Audio API and Audio Buffer stuff I am using on the site to use for audio playback and will be publishing the library I am using for that at a later time, and will have an episode about that when it happens.ReferencesTransistorFMNxContentlayerallplay.transistor.fmResendTo follow along, you can find me at ryanhefner.com, follow me on Twitter @ryanhefner, and keep up with the show on allplay.fm and @allplayfm.Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:Transistor FMFathom Analytics

004 - Building allplay.fm

https://share.transistor.fm/s/0342258f/transcript

<div>In this episode I reflect on officially hitting publish on this podcast. The steps that lead up to the release, along with all the excitement and anxiety that builds up before pressing that button.</div><div><br></div><div>From creating the cover art, to settling on the format—or lack there of—to writing descriptions, and deciding whether or not to pay the extra $5/month to Transistor for the AI Transcriptions feature vs. rolling my own (note, I just paid the $5, but may explore some other ideas with custom transcripts on the site, since after playing with the different output options it got the brain gears turnings). Basically, all the stuff that went into launching this.</div><div><br></div><div>Here are a few additional things that were on that launch list:</div><ul><li>Audio quality (via Adobe Audition + custom presets to make the audio sound better)</li><li>Newsletter sign-up form</li><li>Webhooks to refresh the site when new episodes are published</li><li>Sitemap</li><li>`og:image`’s</li></ul><div>Along with some other outstanding stuff that I will be pushing to the site soon:</div><ul><li>Welcome email (for newsletter subscribers)</li><li>Newsletters (<a href="https://www.allplay.fm/#signup">sign up</a> so you will start receiving these once they start going out)</li><li>Standardize copy/words for how I reference what this is</li><li>Tweak site metadata and SEO stuff</li></ul><div>It definitely feels exciting to start seeing it in the various podcatcher sites and apps, and looking forward to talking about all the other stuff I have in the works. Until next time!</div><div><br></div><div>To follow along, you can find me at <a href="https://www.ryanhefner.com/">ryanhefner.com</a>, follow me on Twitter <a href="https://twitter.com/ryanhfner">@ryanhefner</a>, and keep up with the show on <a href="https://www.allplay.fm/">allplay.fm</a> and <a href="https://twitter.com/allplayfm">@allplayfm</a>.</div>

In this episode I reflect on officially hitting publish on this podcast. The steps that lead up to the release, along with all the excitement and anxiety that builds up before pressing that button.From creating the cover art, to settling on the format—or lack there of—to writing descriptions, and deciding whether or not to pay the extra $5/month to Transistor for the AI Transcriptions feature vs. rolling my own (note, I just paid the $5, but may explore some other ideas with custom transcripts on the site, since after playing with the different output options it got the brain gears turnings). Basically, all the stuff that went into launching this.Here are a few additional things that were on that launch list:Audio quality (via Adobe Audition + custom presets to make the audio sound better)Newsletter sign-up formWebhooks to refresh the site when new episodes are publishedSitemap`og:image`’sAlong with some other outstanding stuff that I will be pushing to the site soon:Welcome email (for newsletter subscribers)Newsletters (sign up so you will start receiving these once they start going out)Standardize copy/words for how I reference what this isTweak site metadata and SEO stuffIt definitely feels exciting to start seeing it in the various podcatcher sites and apps, and looking forward to talking about all the other stuff I have in the works. Until next time!To follow along, you can find me at ryanhefner.com, follow me on Twitter @ryanhefner, and keep up with the show on allplay.fm and @allplayfm.

005 - Pressing Publish

https://share.transistor.fm/s/56a8b061/transcript

Follow along as I, Ryan Hefner, build products and tools, while sharing the learnings and challenges along the way.

— All Play

Episodes

Episodes

Listen in your favorite podcatcher

Subscribe to the newletter