Calendar Discord Bot and Turbo Stream Gotchas
Show Notes
In this episode you'll hear about Colin's adventure of building a Google Calendar Discord bot using CloudFlare, mastering Google Calendar APIs, and navigating serverless Postgres with neon.tech. We'll also share our insights on the benefits of being part of Y Combinator, and the unexpected hiccups we faced with Rails' Turbo Streams. Dive in and learn from our experiences!
Resources:
* https://neon.tech/
* Jason's tweet: https://twitter.com/jmcharnes/status/1687286039356829698
* Cloudflare Worker docs: https://developers.cloudflare.com/workers/
* Jumpstart Pro starter kit for Ruby on Rails: https://jumpstartrails.com/
* Turbo Streams documentation: https://turbo.hotwired.dev/handbook/streams
* YCombinator: https://www.ycombinator.com/
* Google Calendar API docs: https://developers.google.com/calendar/api/guides/overview
* Microsoft Startup program for credits: https://www.microsoft.com/en-us/startups
Resources:
* https://neon.tech/
* Jason's tweet: https://twitter.com/jmcharnes/status/1687286039356829698
* Cloudflare Worker docs: https://developers.cloudflare.com/workers/
* Jumpstart Pro starter kit for Ruby on Rails: https://jumpstartrails.com/
* Turbo Streams documentation: https://turbo.hotwired.dev/handbook/streams
* YCombinator: https://www.ycombinator.com/
* Google Calendar API docs: https://developers.google.com/calendar/api/guides/overview
* Microsoft Startup program for credits: https://www.microsoft.com/en-us/startups
Full Transcripts
<title>Build and Learn | Calendar Discord Bot and Turbo Stream Gotchas</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" name="viewport">
<meta content="software development, technology" name="keywords">
<meta content="In this episode you'll hear about Colin's adventure of building a Google Calendar Discord bot using CloudFlare, mastering Google Calendar APIs, and navigating serverless Postgres with neon.tech. We'll also share our insights on the benefits of being part of Y Combinator, and the unexpected..." name="description">
<!-- Twitter -->
<meta content='player' name='twitter:card'>
<meta content='@TransistorFM' name='twitter:site'>
<meta content='Calendar Discord Bot and Turbo Stream Gotchas | Build and Learn | Episode 26' name='twitter:title'>
<meta content='' name='twitter:description'>
<meta content='https://share.transistor.fm/e/5d0802da' name='twitter:player'>
<meta content='500' name='twitter:player:width'>
<meta content='180' name='twitter:player:height'>
<meta content='https://images.transistor.fm/file/transistor/images/show/27278/medium_1655766950-artwork.jpg' name='twitter:image'>
<meta content='Calendar Discord Bot and Turbo Stream Gotchas | Build and Learn | Episode 26' name='twitter:image:alt'>
<meta content='https://media.transistor.fm/5d0802da/cf587fe1.mp3' name='twitter:player:stream'>
<meta content='audio/mpeg' name='twitter:player:stream:content_type'>
<!-- Open Graph -->
<meta content='https://images.transistor.fm/file/transistor/images/show/27278/medium_1655766950-artwork.jpg' property='og:image'>
<meta content='800' property='og:image:height'>
<meta content='800' property='og:image:width'>
<meta content="app-id=1638387281" name="apple-itunes-app">
<link rel="icon" type="image/x-icon" href="https://assets.transistor.fm/assets/favicon-636b619b27c8932b15adac78178e70ebdf1f2c3a33de896176872b88cb3a5e48.ico" />
<link rel="stylesheet" href="https://assets.transistor.fm/assets/media-503a48b2c00c5e9e9d6e910c1990f312942952f6e54b6cba87023cc833cd2009.css" media="all" />
<link rel="alternate" type="application/rss+xml" title="Build and Learn" href="https://feeds.transistor.fm/build-learn" />
<link rel="alternate" type="application/json+oembed" title="Calendar Discord Bot and Turbo Stream Gotchas oEmbed profile" href="https://share.transistor.fm/oembed?url=https%3A%2F%2Fshare.transistor.fm%2Fs%2F5d0802da" />
<style>
@supports(padding: max(0px)) {
.site-container {
padding-left: max(15px, env(safe-area-inset-left));
padding-right: max(15px, env(safe-area-inset-right));
}
.site-featured-episodes .site-container {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
.player {
padding-left: max(15px, env(safe-area-inset-left));
padding-right: max(15px, env(safe-area-inset-right));
}
.container {
padding-left: max(15px, env(safe-area-inset-left));
padding-right: max(15px, env(safe-area-inset-right));
}
.container.main {
padding-left: max(30px, env(safe-area-inset-left));
padding-right: max(30px, env(safe-area-inset-right));
}
@media all and (max-width: 630px) {
.container.main {
padding-left: max(15px, env(safe-area-inset-left));
padding-right: max(15px, env(safe-area-inset-right));
}
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Build and Learn</h1>
<div x-data="transistor.audioEmbedPlayer" data-episodes="[{"id":1467442,"title":"Calendar Discord Bot and Turbo Stream Gotchas","episode_type":"full","number":26,"season":1,"formatted_published_at":"August 21, 2023","duration":2452,"duration_in_minutes":41,"duration_in_mmss":"40:52","trackable_media_url":"https://media.transistor.fm/5d0802da/cf587fe1.mp3","share_url":"https://share.transistor.fm/s/5d0802da","transcript_url":"https://share.transistor.fm/s/5d0802da/transcript","artwork":"https://images.transistor.fm/file/transistor/images/show/27278/thumb_1655766950-artwork.jpg","author":"CJ Avilla, Colin Loretz","description":"\u003cdiv\u003eIn this episode you'll hear about Colin's adventure of building a Google Calendar Discord bot using CloudFlare, mastering Google Calendar APIs, and navigating serverless Postgres with neon.tech. We'll also share our insights on the benefits of being part of Y Combinator, and the unexpected hiccups we faced with Rails' Turbo Streams. Dive in and learn from our experiences!\u003cbr\u003e\u003cbr\u003eResources:\u003cbr\u003e\u003cbr\u003e* https://neon.tech/\u003cbr\u003e* Jason's tweet: https://twitter.com/jmcharnes/status/1687286039356829698\u0026nbsp;\u003cbr\u003e* Cloudflare Worker docs: https://developers.cloudflare.com/workers/\u003cbr\u003e* Jumpstart Pro starter kit for Ruby on Rails: https://jumpstartrails.com/\u003cbr\u003e* Turbo Streams documentation: https://turbo.hotwired.dev/handbook/streams\u003cbr\u003e* YCombinator: https://www.ycombinator.com/\u003cbr\u003e* Google Calendar API docs: https://developers.google.com/calendar/api/guides/overview\u0026nbsp;\u003cbr\u003e* Microsoft Startup program for credits: https://www.microsoft.com/en-us/startups\u003c/div\u003e","formatted_summary":"In this episode you'll hear about Colin's adventure of building a Google Calendar Discord bot using CloudFlare, mastering Google Calendar APIs, and navigating serverless Postgres with neon.tech. We'll also share our insights on the benefits of being part of Y Combinator, and the unexpected hiccups we faced with Rails' Turbo Streams. Dive in and learn from our experiences!Resources:* https://neon.tech/* Jason's tweet: https://twitter.com/jmcharnes/status/1687286039356829698 * Cloudflare Worker docs: https://developers.cloudflare.com/workers/* Jumpstart Pro starter kit for Ruby on Rails: https://jumpstartrails.com/* Turbo Streams documentation: https://turbo.hotwired.dev/handbook/streams* YCombinator: https://www.ycombinator.com/* Google Calendar API docs: https://developers.google.com/calendar/api/guides/overview * Microsoft Startup program for credits: https://www.microsoft.com/en-us/startups","embed_html":"\u003ciframe width=\"100%\" height=\"180\" frameborder=\"no\" scrolling=\"no\" seamless src=\"https://share.transistor.fm/e/5d0802da\"\u003e\u003c/iframe\u003e\n"}]" data-show="{"id":27278,"title":"Build and Learn","website":"https://buildandlearn.dev","multiple_seasons":false,"playlist_limit":25,"feed_url":"https://feeds.transistor.fm/build-learn","private_feed":false,"disable_feed":false,"enable_downloads":true,"apple_podcasts_url":"https://podcasts.apple.com/us/podcast/build-learn/id1638387281","spotify":"https://open.spotify.com/show/2bb1YeEn9GjuJCfIZqokww","overcast":"https://overcast.fm/itunes1638387281","pocket_casts":"https://pca.st/itunes/1638387281","youtube":"","castro":"https://castro.fm/itunes/1638387281","podcast_addict":"https://podcastaddict.com/podcast/3776300","deezer":"https://www.deezer.com/show/4494647","google_podcasts":"https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy50cmFuc2lzdG9yLmZtL2J1aWxkLWxlYXJu","radioPublic":null,"tuneIn":null,"castbox":"https://castbox.fm/vic/1638387281","fountain":null,"jiosaavn":null,"gaana":null,"pandora":null,"anghami":null,"iHeartRadio":null,"soundcloud":null,"amazon_music":"https://music.amazon.com/podcasts/0ff5ba77-af0b-4ca6-a8e7-9a418f3d218a","player_FM":"https://player.fm/series/series-3379394","goodpods":null}" @keydown.window.escape="closePanel">
<div id="embed-player" class="player-large player-light" :class="{ 'player-playlist': isPlaylist }" aria-label="Audio Player for Build and Learn" tabindex="1">
<audio x-ref="audio" @volumechange="updateVolume" @waiting="waiting" @canplaythrough="canPlayThrough = true" @ended="reset" @loadedmetadata="audioLoaded" @keyup.document.right="seekBySeconds(30)" @keyup.document.left="seekBySeconds(-10)" @keyup.document.m="toggleMute" @keyup.document.s="toggleSpeed" @play="play(false, true)" @pause="pause(true)" preload="none" @timejump.window="seekToSeconds($event.detail.timestamp)"></audio>
<div class="player-main">
<div class="player-artwork" tabindex="-1">
<img :src="selectedEpisode.artwork" @click="playPause(selectedEpisodeIndex)" title="Play/Pause">
<button class="playPause playPause-mobile" @click="playPause(selectedEpisodeIndex)" aria-label="Play or Pause">
<span x-show="!playing" title="Play" class="play-btn" aria-hidden="true" focusable="false">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8,16 C12.4183,16 16,12.4183 16,8 C16,3.58172 12.4183,0 8,0 C3.58172,0 0,3.58172 0,8 C0,12.4183 3.58172,16 8,16 Z M7.5547,5.16795 C7.24784,4.96338 6.8533,4.94431 6.52814,5.11833 C6.20298,5.29235 6,5.63121 6,6.00000106 L6,10.0000011 C6,10.3688 6.20298,10.7077 6.52814,10.8817 C6.8533,11.0557 7.24784,11.0366 7.5547,10.8321 L10.5547,8.8321 C10.8329,8.6466 11,8.3344 11,8.00000106 C11,7.66565 10.8329,7.35342 10.5547,7.16795 L7.5547,5.16795 Z"></path>
</svg>
</span>
<span x-show="playing" title="Pause" class="pause-btn" aria-hidden="true" focusable="false">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M16,8 C16,12.4183 12.4183,16 8,16 C3.58172,16 0,12.4183 0,8 C0,3.58172 3.58172,0 8,0 C12.4183,0 16,3.58172 16,8 Z M5,6 C5,5.44772 5.44772,5 6,5 C6.55228,5 7,5.44772 7,6 L7,10 C7,10.5523 6.55228,11 6,11 C5.44772,11 5,10.5523 5,10 L5,6 Z M10,5 C9.4477,5 9,5.44772 9,6 L9,10 C9,10.5523 9.4477,11 10,11 C10.5523,11 11,10.5523 11,10 L11,6 C11,5.44772 10.5523,5 10,5 Z"></path>
</svg>
</span>
<div x-show="loading" x-transition.opacity.duration.350ms class="loader-ring"></div>
</button>
</div>
<div class="player">
<div class="playback-progress">
<div class="currently-playing">
<div class="show-title">
<strong>Build and Learn</strong>
<span x-show="selectedEpisode.number || selectedEpisode.episode_type === 'trailer' || selectedEpisode.episode_type === 'bonus'">• </span>
<span x-show="selectedEpisode.episode_type === 'trailer'">Trailer</span>
<span x-show="selectedEpisode.episode_type === 'bonus'">Bonus</span>
<span x-show="selectedEpisode.number" x-text="`Episode ${selectedEpisode.number}`"></span>
<span x-show="show.multiple_seasons">
• <span x-text="`Season ${selectedEpisode.season}`"></span>
</span>
</div>
<div class="title" x-text="selectedEpisode.title"></div>
</div>
<div class="play-progress">
<button class="playPause playPause-desktop" @click="playPause(selectedEpisodeIndex)" aria-label="Play or Pause" tabindex="1">
<span x-show="!playing" title="Play" class="play-btn" aria-hidden="true" focusable="false">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8,16 C12.4183,16 16,12.4183 16,8 C16,3.58172 12.4183,0 8,0 C3.58172,0 0,3.58172 0,8 C0,12.4183 3.58172,16 8,16 Z M7.5547,5.16795 C7.24784,4.96338 6.8533,4.94431 6.52814,5.11833 C6.20298,5.29235 6,5.63121 6,6.00000106 L6,10.0000011 C6,10.3688 6.20298,10.7077 6.52814,10.8817 C6.8533,11.0557 7.24784,11.0366 7.5547,10.8321 L10.5547,8.8321 C10.8329,8.6466 11,8.3344 11,8.00000106 C11,7.66565 10.8329,7.35342 10.5547,7.16795 L7.5547,5.16795 Z"></path>
</svg>
</span>
<span x-show="playing" title="Pause" class="pause-btn" aria-hidden="true" focusable="false">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M16,8 C16,12.4183 12.4183,16 8,16 C3.58172,16 0,12.4183 0,8 C0,3.58172 3.58172,0 8,0 C12.4183,0 16,3.58172 16,8 Z M5,6 C5,5.44772 5.44772,5 6,5 C6.55228,5 7,5.44772 7,6 L7,10 C7,10.5523 6.55228,11 6,11 C5.44772,11 5,10.5523 5,10 L5,6 Z M10,5 C9.4477,5 9,5.44772 9,6 L9,10 C9,10.5523 9.4477,11 10,11 C10.5523,11 11,10.5523 11,10 L11,6 C11,5.44772 10.5523,5 10,5 Z"></path>
</svg>
</span>
<div x-show="loading" x-transition.opacity.duration.350ms class="loader-ring"></div>
</button>
<div id="progressBar" title="Seek within Episode" @click="seekTo" role="button">
<span id="progress" :style="`width: ${progressPercentage()}%`"></span>
</div>
</div>
<div class="playback-controls">
<div class="playback-duration">
<time id="timer" x-text="formatTime(currentTime)">00:00</time>|<time id="duration" :datetime="formatTime(duration)" x-text="formatTime(duration)">00:00</time>
</div>
<div class="volume-speed-controls">
<button id="rewindBtn" @click="seekBySeconds(-10)" title="Rewind 10 seconds" class="player-rewind" tabindex="2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path d="M19.419962,2.57 L20.789962,1.21 L20.789962,1.20999999 C21.066111,0.931608989 21.064293,0.482064989 20.7859019,0.205919989 C20.6539209,0.0750019893 20.4758579,0.00106998926 20.2899619,2.98926377e-06 L14.9999619,2.98926377e-06 L14.9999619,5.29000299 L14.9999619,5.2900038 C15.0022111,5.6821198 15.3219069,5.9981688 15.7140229,5.9959198 C15.8999189,5.99485348 16.0779819,5.9209207 16.2099629,5.7900028 L17.9999629,4.00000299 L17.9999633,4.00000299 C22.4115033,7.32267305 23.2942133,13.5924931 19.9715433,18.0040031 C16.6488733,22.4155431 10.3790533,23.2982531 5.96754326,19.9755831 C1.55600326,16.6529131 0.67329326,10.3830931 3.99596326,5.97158305 C5.50733326,3.96493305 7.71859326,2.60063305 10.1899933,2.15000305 L10.1899934,2.15000303 C10.7422784,2.05059173 11.1094044,1.52228803 11.0099934,0.970003035 C10.9105821,0.417718035 10.3822784,0.0505920346 9.82999335,0.150003035 L9.82999275,0.150003146 C3.31278275,1.35360315 -0.994707248,7.61255315 0.208852752,14.1298031 C1.41245275,20.6470131 7.67140275,24.9545031 14.1886528,23.7509431 C20.7058628,22.5473431 25.0133528,16.2883931 23.8097928,9.77114315 C23.2799238,6.90203315 21.7229128,4.32424315 19.4300328,2.52000315 L19.419962,2.57 Z M8.99996191,16 L8.99996191,16 C9.55224696,16 9.99996191,15.552285 9.99996191,15 L9.99996191,8 L6.99996191,8 L6.99996191,8 C6.44767691,8 5.99996191,8.447715 5.99996191,9 C5.99996191,9.552285 6.44767691,10 6.99996191,10 L7.99996191,10 L7.99996191,15 L7.99996191,15 C7.99996191,15.5522848 8.44767691,16 8.99996191,16 C8.99996191,16 8.99996191,16 8.99996191,16 L8.99996191,16 Z M13.9999619,16 L13.9999619,16 C15.6568119,16 16.9999619,14.65685 16.9999619,13 L16.9999619,11 L16.9999619,11 C16.9999619,9.34315 15.6568119,8 13.9999619,8 C12.3431119,8 10.9999619,9.34315 10.9999619,11 L10.9999619,13 L10.9999619,13 C10.9999619,14.6568505 12.3431119,16 13.9999619,16 C13.9999619,16 13.9999619,16 13.9999619,16 L13.9999619,16 Z M12.999962,11.0000002 L12.999962,11.0000002 C12.999962,10.4477152 13.447677,10.0000002 13.999962,10.0000002 C14.552247,10.0000002 14.999962,10.4477152 14.999962,11.0000002 C14.999962,11.0000002 14.999962,11.0000002 14.999962,11.0000002 L14.999962,13.0000002 L14.999962,13.0000002 C14.999962,13.5522852 14.552247,14.0000002 13.999962,14.0000002 C13.447677,14.0000002 12.999962,13.5522852 12.999962,13.0000002 L12.999962,11.0000002 Z"></path>
</svg>
</button>
<button id="playbackSpeed" x-text="`${displaySpeed}x`" @click="toggleSpeed" :title="'Change Playback Speed (currently ' + displaySpeed + ' times speed)'" tabindex="3"></button>
<button id="volumeBtn" @click="toggleMute" title="Mute or Unmute" :class="{ 'player-muted': muted, 'player-unmuted': !muted }" tabindex="4">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" class="unmuted"><path d="M3,5.13137l-1.31134e-07,3.55271e-15c-1.65685,7.24234e-08 -3,1.34315 -3,3c0,0 0,1.77636e-15 0,1.77636e-15v6l3.19744e-14,4.52987e-07c2.50178e-07,1.65685 1.34315,3 3,3h2.65l6.35,5v-22l-6.35,5Zm17,6l3.22943e-07,0.000513405c-0.00126608,-2.11713 -0.81346,-4.15334 -2.26965,-5.69014l4.49398e-08,4.72193e-08c-0.381076,-0.400406 -1.01459,-0.416077 -1.415,-0.0350001c-0.400406,0.381076 -0.416077,1.01459 -0.0350001,1.415l3.56262e-08,3.74132e-08c2.29841,2.4137 2.29841,6.2063 -7.12523e-08,8.62l2.29995e-08,-2.28117e-08c-0.392122,0.38892 -0.394718,1.02208 -0.00579837,1.4142c0.00192484,0.00194069 0.00385763,0.00387348 0.00579832,0.00579832l1.49479e-08,1.40058e-08c0.194393,0.182142 0.453427,0.279193 0.719647,0.269627l5.01314e-08,3.09438e-10c0.27566,0.00170152 0.539796,-0.110466 0.73,-0.31l2.80721e-07,-2.96224e-07c1.45628,-1.53671 2.2686,-3.57287 2.27,-5.69Zm-1.4,-10.8l3.78218e-08,2.83663e-08c-0.441828,-0.331371 -1.06863,-0.241828 -1.4,0.2c-0.331371,0.441828 -0.241828,1.06863 0.2,1.4c1.00526e-08,7.53946e-09 2.76447e-08,2.07335e-08 3.76973e-08,2.8273e-08l6.40586e-07,4.8044e-07c5.08102,3.81077 6.11076,11.019 2.3,16.1c-0.653824,0.871765 -1.42823,1.64618 -2.3,2.3l-7.79577e-08,5.84683e-08c-0.441828,0.331371 -0.531371,0.958172 -0.2,1.4l5.13133e-08,6.84178e-08c0.188854,0.251806 0.485243,0.4 0.8,0.4l-4.37114e-08,3.55271e-15c0.21637,9.45784e-09 0.426904,-0.0701779 0.6,-0.2l7.51993e-07,-5.63995e-07c5.96467,-4.47351 7.17351,-12.9353 2.7,-18.9c-0.767532,-1.02338 -1.67662,-1.93247 -2.7,-2.7Z" transform="translate(-7.24234e-08, 0.868629)"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" class="muted"><path d="M0.102122,9.10212v6l3.55271e-14,4.52987e-07c2.50178e-07,1.65685 1.34315,3 3,3h2.65l6.35,5v-5.38l-10.91,-10.91l-2.60839e-07,2.15336e-07c-0.683992,0.56467 -1.08305,1.40307 -1.09,2.29Zm21.38,11l2.57883e-07,-3.48565e-07c4.41117,-5.96232 3.16798,-14.3695 -2.78,-18.8l4.23752e-08,3.17814e-08c-0.441828,-0.331371 -1.06863,-0.241828 -1.4,0.2c-0.331371,0.441828 -0.241828,1.06863 0.2,1.4c1.29779e-08,9.7334e-09 1.62223e-08,1.21668e-08 2.92002e-08,2.19001e-08l6.32019e-07,4.69153e-07c4.96483,3.68544 6.11484,10.643 2.6,15.73l-1.6,-1.59l5.16025e-07,-6.88458e-07c2.41371,-3.22027 2.15172,-7.71217 -0.620001,-10.63l4.49398e-08,4.72193e-08c-0.381076,-0.400406 -1.01459,-0.416077 -1.415,-0.0350001c-0.400406,0.381076 -0.416077,1.01459 -0.0350001,1.415l9.88607e-08,1.03887e-07c2.02516,2.12812 2.29169,5.38058 0.64,7.81l-4.97,-4.91v-9.59l-5.37,4.22l-4.92,-4.93l6.9121e-08,6.91211e-08c-0.392122,-0.392122 -1.02788,-0.392122 -1.42,-1.38242e-07c-0.392122,0.392122 -0.392122,1.02788 -1.38242e-07,1.42c0,0 0,0 0,0l22,22l-3.12092e-08,-3.14662e-08c0.38892,0.392122 1.02208,0.394718 1.4142,0.00579839c0.00194069,-0.00192484 0.00387348,-0.00385763 0.00579832,-0.00579832l4.18882e-08,-4.15461e-08c0.392122,-0.38892 0.394718,-1.02208 0.00579824,-1.4142c-0.00192484,-0.00194069 -0.00385763,-0.00387348 -0.00579832,-0.00579832Z" transform="translate(-0.102122, -0.102122)"></path></svg>
</button>
<button id="fastForwardBtn" @click="seekBySeconds(30)" title="Fast Forward 30 seconds" class="player-forward" tabindex="5">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path d="M15.0000099,16 L15.0000099,16 C16.6568599,16 18.0000099,14.65685 18.0000099,13 L18.0000099,11 L18.0000099,11 C18.0000099,9.34315 16.6568599,8 15.0000099,8 C13.3431599,8 12.0000099,9.34315 12.0000099,11 L12.0000099,13 L12.0000099,13 C12.0000099,14.6568505 13.3431599,16 15.0000099,16 C15.0000099,16 15.0000099,16 15.0000099,16 L15.0000099,16 Z M14.00001,11.0000002 L14.00001,11.0000002 C14.00001,10.4477152 14.447725,10.0000002 15.00001,10.0000002 C15.552295,10.0000002 16.00001,10.4477152 16.00001,11.0000002 C16.00001,11.0000002 16.00001,11.0000002 16.00001,11.0000002 L16.00001,13.0000002 L16.00001,13.0000002 C16.00001,13.5522852 15.552295,14.0000002 15.00001,14.0000002 C14.447725,14.0000002 14.00001,13.5522852 14.00001,13.0000002 L14.00001,11.0000002 Z M7.00000983,7.99999762 L7.00000983,7.99999762 C6.44772496,7.99999762 6.00000983,8.447715 6.00000983,8.99999762 C6.00000983,9.552285 6.44772496,9.99999762 7.00000983,9.99999762 L8.50000983,9.99999762 L8.50000983,9.99999762 C8.77615193,9.99999762 9.00000983,10.223858 9.00000983,10.4999976 C9.00000983,10.776142 8.77615193,10.9999976 8.50000983,10.9999976 L7.00000983,10.9999976 L7.00000983,10.9999976 C6.44772489,10.9999976 6.00000983,11.447715 6.00000983,11.9999976 C6.00000983,12.552285 6.44772489,12.9999976 7.00000983,12.9999976 L8.50000983,12.9999976 L8.50000983,12.9999976 C8.77615187,12.9999976 9.00000983,13.223858 9.00000983,13.4999976 C9.00000983,13.776142 8.77615187,13.9999976 8.50000983,13.9999976 L7.00000983,13.9999976 L7.00000983,13.9999976 C6.44772483,13.9999976 6.00000983,14.447715 6.00000983,14.9999976 C6.00000983,15.552285 6.44772483,15.9999976 7.00000983,15.9999976 L8.50000983,15.9999976 L8.50000983,15.9999976 C9.88071972,15.9999976 11.0000098,14.88071 11.0000098,13.4999976 L11.0000098,13.5000078 C10.9949875,12.9583018 10.8162208,12.4325078 10.4900148,12.0000078 L10.4900147,12.0000079 C10.8162217,11.5675019 10.9949887,11.0417099 11.0000098,10.4999976 L11.0000098,10.4999976 C11.0000098,9.11928762 9.88071974,7.99999762 8.50000983,7.99999762 C8.50000983,7.99999762 8.50000983,7.99999762 8.50000983,7.99999762 L7.00000983,7.99999762 Z M14.18001,0.2 L14.1800101,0.200000017 C13.6277251,0.100588717 13.0994201,0.467715017 13.0000101,1.02000002 C12.9005988,1.57228502 13.2677251,2.10059002 13.8200101,2.20000002 L13.8200112,2.20000022 C19.2469712,3.22467022 22.8157312,8.45476022 21.7910512,13.8817002 C20.7663812,19.3086602 15.5362912,22.8774202 10.1093512,21.8527402 C4.68239119,20.8280702 1.11363119,15.5979802 2.13831119,10.1710402 C2.60451319,7.70190022 3.98319119,5.49877022 6.00003119,4.00000013 L7.79003119,5.79000022 L7.79003121,5.79000024 C8.06842221,6.06614924 8.51796621,6.06433124 8.79411121,5.78594013 C8.92502921,5.65395913 8.99896121,5.47589613 9.00002821,5.29000013 L9.00002821,1.31893483e-07 L3.71002821,1.31893483e-07 L3.71002824,1.31893483e-07 C3.31791224,0.00224888189 3.00186324,0.321944132 3.00411124,0.714060132 C3.00517734,0.899956132 3.07910994,1.07801913 3.21002824,1.21000013 L4.58002824,2.57000013 L4.58002779,2.57000049 C-0.628262215,6.66833049 -1.52806221,14.2128005 2.57026779,19.4211005 C6.66859779,24.6293905 14.2130678,25.5291905 19.4213678,21.4308605 C24.6296578,17.3325305 25.5294578,9.78806049 21.4311278,4.57976049 C19.6268878,2.28688049 17.0490978,0.729870486 14.1799878,0.200000486 L14.18001,0.2 Z"></path>
</svg>
</button>
</div>
</div>
</div>
<nav class="expand open" x-show="!expandedPanel">
<a id="subscribeBtn" title="Subscribe Info" @click.prevent="expandedPanel = 'subscribe'" tabindex="7">Subscribe</a>
<a id="shareBtn" title="Sharing Info" @click.prevent="expandedPanel = 'sharing'" tabindex="8">Share</a>
<a id="infoBtn" title="Additional Episode Info" @click.prevent="expandedPanel = 'more'" tabindex="9">More Info</a>
</nav>
</div>
<div class="subscribe panel" x-show="expandedPanel === 'subscribe'" :class="{ expanded: expandedPanel === 'subscribe' }" x-transition:enter="transition-enter"
x-transition:enter-start="transition-enter-start"
x-transition:enter-end="transition-enter-end"
x-transition:leave="transition-leave"
x-transition:leave-start="transition-leave-start"
x-transition:leave-end="transition-leave-end">
<span class="close-btn" @click.prevent="closePanel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g transform="translate(1.000000, 1.000000)" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="11"></circle>
<line x1="13.828" y1="8.172" x2="8.172" y2="13.828"></line>
<line x1="8.172" y1="8.172" x2="13.828" y2="13.828"></line>
</g>
</g>
</svg>
</span>
<div class="title">Subscribe</div>
<div class='copyable-input' x-show="!show.private_feed && !show.disable_feed">
<label>RSS Feed</label>
<input type="text" :value="show.feed_url" id="rss-feed-input" readonly @click="$el.select()">
<span class="copy-btn" :class="{ 'copied': rss_feed_copied }" title="Copy RSS Feed URL to clipboard" @click="rss_feed_copied = true" data-clipboard-target="#rss-feed-input">
<svg viewBox="0 0 20 20" fill="currentColor" class="input-copy"><path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path><path d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="input-copied"><g id="check-circle"><path d="M20.49,3.51a12,12,0,1,0,0,17A12,12,0,0,0,20.49,3.51ZM17.76,8.65l-6.61,7.71L6.4,12.8a1,1,0,0,1,1.2-1.6l3.25,2.44,5.39-6.29a1,1,0,0,1,1.52,1.3Z"></path></g></svg>
</span>
</div>
<div class="subscribe-links">
<a x-show="show.apple_podcasts_url" :href="show.apple_podcasts_url" target="_subscribe" :title="'Subscribe on Apple Podcasts'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#9933CC" viewBox="0 0 24 24"><title>Apple Podcasts</title><path d="M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z"></path></svg>
<span>Apple Podcasts</span>
</a>
<a x-show="show.google_podcasts" :href="show.google_podcasts" target="_subscribe" :title="'Subscribe on Google Podcasts'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>Google Podcasts</title><g fill="none"><path d="M64 238.545v34.91c0 17.673-14.327 32-32 32s-32-14.327-32-32v-34.91c0-17.673 14.327-32 32-32s32 14.327 32 32z" fill="#0066d9"></path><path d="M448.013 239.455a32.6 32.6 0 0 1-.013-.91c0-17.673 14.327-32 32-32s32 14.327 32 32c0 .304-.004.608-.013.91H512v34.909h-.013c-.48 17.252-14.618 31.09-31.987 31.09s-31.506-13.838-31.987-31.09H448v-34.91h.013z" fill="#4285f4"></path><path d="M174.545 343.273v34.909c0 17.673-14.326 32-32 32s-32-14.327-32-32v-34.91c0-17.672 14.327-32 32-32s32 14.328 32 32zM174.545 133.818V248h-.008c-.386 17.337-14.562 31.273-31.992 31.273S110.94 265.337 110.554 248h-.009V133.818c0-17.673 14.327-32 32-32s32 14.327 32 32z" fill="#ea4335"></path><path d="M337.455 168.727c0 17.673 14.326 32 32 32s32-14.327 32-32v-34.909c0-17.673-14.327-32-32-32s-32 14.327-32 32z" fill="#34a853"></path><path d="M224 66.91c0 17.672 14.327 32 32 32s32-14.328 32-32V32c0-17.673-14.327-32-32-32s-32 14.327-32 32zM224 445.09c0-17.672 14.327-32 32-32s32 14.328 32 32V480c0 17.673-14.327 32-32 32s-32-14.327-32-32z" fill="#fab908"></path><path d="M337.455 264.727c0-17.673 14.326-32 32-32s32 14.327 32 32v113.455c0 17.673-14.327 32-32 32s-32-14.327-32-32z" fill="#34a853"></path><path d="M288 162.91v186.18c0 17.674-14.327 32-32 32s-32-14.326-32-32V162.91c0-17.674 14.327-32 32-32s32 14.326 32 32z" fill="#fab908"></path></g></svg>
<span>Google Podcasts</span>
</a>
<a x-show="show.spotify" :href="show.spotify"target="_subscribe" :title="'Subscribe on Spotify'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#1DB954" viewBox="0 0 24 24"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"></path></svg>
<span>Spotify</span>
</a>
<a x-show="show.pocket_casts" :href="show.pocket_casts" target="_subscribe" :title="'Subscribe on Pocket Casts'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#F43E37" viewBox="0 0 24 24"><title>Pocket Casts</title><path d="M12,0C5.372,0,0,5.372,0,12c0,6.628,5.372,12,12,12c6.628,0,12-5.372,12-12 C24,5.372,18.628,0,12,0z M15.564,12c0-1.968-1.596-3.564-3.564-3.564c-1.968,0-3.564,1.595-3.564,3.564 c0,1.968,1.595,3.564,3.564,3.564V17.6c-3.093,0-5.6-2.507-5.6-5.6c0-3.093,2.507-5.6,5.6-5.6c3.093,0,5.6,2.507,5.6,5.6H15.564z M19,12c0-3.866-3.134-7-7-7c-3.866,0-7,3.134-7,7c0,3.866,3.134,7,7,7v2.333c-5.155,0-9.333-4.179-9.333-9.333 c0-5.155,4.179-9.333,9.333-9.333c5.155,0,9.333,4.179,9.333,9.333H19z"></path></svg>
<span>Pocket Casts</span>
</a>
<a x-show="show.overcast" :href="show.overcast" target="_subscribe" :title="'Subscribe on Overcast'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#FC7E0F" viewBox="0 0 24 24"><title>Overcast</title><path d="M12 24C5.389 24.018.017 18.671 0 12.061V12C0 5.35 5.351 0 12 0s12 5.35 12 12c0 6.649-5.351 12-12 12zm0-4.751l.9-.899-.9-3.45-.9 3.45.9.899zm-1.15-.05L10.4 20.9l1.05-1.052-.6-.649zm2.3 0l-.6.601 1.05 1.051-.45-1.652zm.85 3.102L12 20.3l-2 2.001c.65.1 1.3.199 2 .199s1.35-.05 2-.199zM12 1.5C6.201 1.5 1.5 6.201 1.5 12c-.008 4.468 2.825 8.446 7.051 9.899l2.25-8.35c-.511-.372-.809-.968-.801-1.6 0-1.101.9-2.001 2-2.001s2 .9 2 2.001c0 .649-.301 1.2-.801 1.6l2.25 8.35c4.227-1.453 7.06-5.432 7.051-9.899 0-5.799-4.701-10.5-10.5-10.5zm6.85 15.7c-.255.319-.714.385-1.049.15-.313-.207-.4-.628-.194-.941.014-.021.028-.04.044-.06 0 0 1.35-1.799 1.35-4.35s-1.35-4.35-1.35-4.35c-.239-.289-.198-.719.091-.957.02-.016.039-.031.06-.044.335-.235.794-.169 1.049.15.1.101 1.65 2.15 1.65 5.2S18.949 17.1 18.85 17.2zm-3.651-1.95c-.3-.3-.249-.85.051-1.15 0 0 .75-.799.75-2.1s-.75-2.051-.75-2.1c-.3-.301-.3-.801-.051-1.15.232-.303.666-.357.969-.125.029.022.056.047.082.074C16.301 8.75 17.5 10 17.5 12s-1.199 3.25-1.25 3.301c-.301.299-.75.25-1.051-.051zm-6.398 0c-.301.301-.75.35-1.051.051C7.699 15.199 6.5 14 6.5 12s1.199-3.199 1.25-3.301c.301-.299.801-.299 1.051.051.3.3.249.85-.051 1.15 0 .049-.75.799-.75 2.1s.75 2.1.75 2.1c.3.3.351.799.051 1.15zm-2.602 2.101c-.335.234-.794.169-1.05-.15C5.051 17.1 3.5 15.05 3.5 12s1.551-5.1 1.649-5.2c.256-.319.715-.386 1.05-.15.313.206.4.628.194.941-.013.02-.028.04-.043.059C6.35 7.65 5 9.449 5 12s1.35 4.35 1.35 4.35c.25.3.15.75-.151 1.001z"></path></svg>
<span>Overcast</span>
</a>
<a x-show="show.castro" :href="show.castro" target="_subscribe" :title="'Subscribe on Castro'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34">
<defs>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="castro-linearGradient-1">
<stop stop-color="#00CCBF" offset="0%"></stop>
<stop stop-color="#00B265" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="castro-linearGradient-2">
<stop stop-color="#151515" offset="0%"></stop>
<stop stop-color="#353535" offset="100%"></stop>
</linearGradient>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="castro-c2icon-copy">
<path d="M11.8538809,6.640625e-05 L22.1461191,6.640625e-05 C25.5594004,6.640625e-05 27.2659082,6.640625e-05 29.1031699,0.580955078 C31.1089375,1.31102539 32.6889746,2.8910625 33.4191113,4.89689648 C33.9999336,6.73402539 33.9999336,8.44059961 33.9999336,11.8538809 L33.9999336,22.1461191 C33.9999336,25.5594004 33.9999336,27.2659082 33.4191113,29.1031699 C32.6889746,31.1089375 31.1089375,32.6889746 29.1031699,33.4189785 C27.2659082,33.9999336 25.5594004,33.9999336 22.1461191,33.9999336 L11.8538809,33.9999336 C8.44059961,33.9999336 6.73402539,33.9999336 4.89689648,33.4189785 C2.8910625,32.6889746 1.31102539,31.1089375 0.580955078,29.1031699 C6.640625e-05,27.2659082 6.640625e-05,25.5594004 6.640625e-05,22.1461191 L6.640625e-05,11.8538809 C6.640625e-05,8.44059961 6.640625e-05,6.73402539 0.580955078,4.89689648 C1.31102539,2.8910625 2.8910625,1.31102539 4.89689648,0.580955078 C6.73402539,6.640625e-05 8.44059961,6.640625e-05 11.8538809,6.640625e-05 L11.8538809,6.640625e-05" fill="url(#castro-linearGradient-1)"></path>
<path d="M17.0166016,2.22460938 C25.185998,2.22460938 31.8085937,8.84069727 31.8085937,17.0020586 C31.8085937,25.1634531 25.185998,31.779541 17.0166016,31.779541 C8.84720508,31.779541 2.22460938,25.1634531 2.22460938,17.0020586 C2.22460938,8.84069727 8.84720508,2.22460938 17.0166016,2.22460938 Z" fill="url(#castro-linearGradient-2)"></path>
<path d="M23.1715645,25.4293437 L20.6914902,21.9926543 C22.249082,20.8536211 23.2608809,19.0139023 23.2608809,16.9378105 C23.2608809,13.4801035 20.455084,10.6770957 16.9939238,10.6770957 C13.5327969,10.6770957 10.727,13.4801035 10.727,16.9378105 C10.727,19.023 11.7476973,20.8697578 13.316877,22.0075957 L10.8349434,25.4469414 C8.19662305,23.5391895 6.47985547,20.4378184 6.47985547,16.9354531 C6.47985547,11.1359961 11.1859336,6.43459961 16.991168,6.43459961 C22.7964023,6.43459961 27.5024805,11.1359961 27.5024805,16.9354531 C27.5024805,20.4270937 25.7961387,23.5201309 23.1715645,25.4293437 Z M17.0144766,14.4014238 C18.4110664,14.4014238 19.5432598,15.5324883 19.5432598,16.9276836 C19.5432598,18.3229121 18.4110664,19.4539434 17.0144766,19.4539434 C15.6178535,19.4539434 14.4856934,18.3229121 14.4856934,16.9276836 C14.4856934,15.5324883 15.6178535,14.4014238 17.0144766,14.4014238 Z" fill="#FFFFFF"></path>
</g>
</g>
</svg>
<span>Castro</span>
</a>
<a x-show="show.youtube" :href="show.youtube" target="_subscribe" :title="'Subscribe on YouTube'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#FF0000" viewBox="0 0 24 24"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg>
<span>YouTube</span>
</a>
<a x-show="show.goodpods" :href="show.goodpods" target="_subscribe" :title="'Subscribe on Goodpods'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 49">
<title>Goodpods</title>
<defs>
<ellipse id="goodpods-path-1" cx="24.75" cy="24.25" rx="24.75" ry="24.25"></ellipse>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Goodpods_Icon_50x50" transform="translate(0.500000, 0.500000)">
<ellipse id="goodpods-Oval" fill="#FCDB00" fill-rule="nonzero" opacity="0.757812" cx="24.75" cy="24.25" rx="24.75" ry="24.25"></ellipse>
<g id="Clipped">
<mask id="goodpods-mask-2" fill="white">
<use xlink:href="#goodpods-path-1"></use>
</mask>
<g id="goodpods-Oval"></g>
<g mask="url(#goodpods-mask-2)">
<g transform="translate(-7.250000, -7.000000)">
<rect fill="#FCDB00" fill-rule="nonzero" x="0" y="0" width="69.75" height="63"></rect>
<polygon fill="#FFFFFF" fill-rule="evenodd" points="27.2705 19.583 23.541 24.1608 22.7685 29.1594 21.0654 30.0698 20.8232 34.7013 21.4713 37.9481 23.541 39.3412 25.5758 38.9081 27.2705 37.1495 26.8843 33.562 26.5233 29.8573 24.9825 28.66 25.219 25.5511 28.2879 21.7649 31.8958 21.5526 34.8668 22.1388 36.8106 23.6436 37.9442 26.2491 38.1611 29.1594 37.3102 30.7621 37.3325 33.7096 37.7035 37.2572 38.0532 38.6405 41.51 38.6405 42.5987 37.3095 43.0228 34.2434 42.0502 29.5773 40.1512 28.4202 39.2415 23.6436 35.5693 19.3168 31.508 18.092"></polygon>
<path d="M48.5463,41.0148 C48.4918,41.0148 48.4362,41.0093 48.3797,40.9984 C48.1738,40.9571 47.9725,40.8908 47.7961,40.8061 C47.4878,40.6583 47.1932,40.4923 46.9457,40.3494 C46.5158,40.1023 46.1408,39.9197 45.7089,39.8334 C45.5399,39.7996 45.3024,39.7308 45.1916,39.5239 C45.0807,39.3169 45.1534,39.0838 45.2293,38.9039 C45.2496,38.8514 45.2785,38.7928 45.3133,38.7364 C45.4431,38.5135 45.739,38.4003 45.9988,38.4777 L46.0437,38.4907 C46.1739,38.5281 46.3213,38.5705 46.4429,38.6665 C46.6999,38.8701 46.9999,39.0086 47.3176,39.1554 C47.4533,39.2181 47.5888,39.2808 47.7211,39.3485 C48.0319,39.5061 48.2925,39.5527 48.5676,39.4999 C48.787,39.4574 48.9331,39.5205 49.0167,39.581 C49.1005,39.6421 49.206,39.7614 49.2315,39.9835 C49.2387,40.0471 49.243,40.1108 49.2465,40.1665 L49.2502,40.2198 L49.2442,40.297 C49.2411,40.3376 49.2383,40.3732 49.2343,40.4095 C49.2093,40.6097 49.1124,40.7782 48.9614,40.8868 C48.8442,40.9712 48.7006,41.0148 48.5463,41.0148" fill="#000000" fill-rule="evenodd"></path>
<path d="M46.8688,33.7969 C46.8402,33.7969 46.8134,33.7956 46.7885,33.7944 C46.7691,33.7934 46.7496,33.7925 46.7305,33.7925 C46.4405,33.7905 46.1893,33.649 46.1183,33.4482 C46.0732,33.3193 46.086,33.1764 46.1538,33.045 C46.2342,32.8892 46.3801,32.77 46.5545,32.718 C46.8695,32.6256 47.2111,32.5465 47.5833,32.5877 C47.7654,32.6091 47.9472,32.6248 48.1293,32.6406 C48.429,32.6683 48.7393,32.6612 49.1067,32.6174 C49.4173,32.5805 49.5614,32.5177 49.6572,32.3773 C49.7677,32.2197 50.0402,32.177 50.1889,32.2143 C50.3523,32.2549 50.5143,32.4085 50.5577,32.5641 C50.6262,32.8043 50.616,33.1665 50.1781,33.5234 C50.0402,33.6322 49.843,33.6522 49.7374,33.6546 C49.458,33.6615 49.1779,33.6608 48.8981,33.6598 L48.6316,33.6593 C48.4294,33.677 48.2277,33.6786 48.0326,33.6802 C47.6824,33.683 47.3515,33.6856 47.0343,33.7763 C46.9764,33.7927 46.9203,33.7969 46.8688,33.7969" fill="#000000" fill-rule="evenodd"></path>
<path d="M45.88,29.2518 C45.7366,29.2518 45.5914,29.1986 45.4838,29.105 C45.3896,29.0232 45.335,28.9179 45.3298,28.8085 C45.321,28.6452 45.3229,28.4712 45.3977,28.3168 C45.4853,28.1316 45.6095,27.9522 45.7561,27.7993 C46.3045,27.2276 46.7661,26.5669 47.2127,25.9279 L47.3846,25.6824 C47.5173,25.4952 47.6818,25.2631 48.0145,25.1929 C48.1607,25.1606 48.4333,25.1546 48.5742,25.2736 C48.643,25.3316 48.6795,25.4142 48.6747,25.5005 C48.6674,25.6316 48.6485,25.7832 48.5657,25.9102 C48.3055,26.3085 48.0204,26.7283 47.6692,27.2319 C47.3228,27.7301 46.9655,28.234 46.607,28.7291 C46.5117,28.8618 46.3924,28.9933 46.2533,29.1188 L46.2526,29.1194 C46.1667,29.1963 46.063,29.2201 46.0009,29.2342 L45.9271,29.2499 C45.9114,29.2512 45.8958,29.2518 45.88,29.2518" fill="#000000" fill-rule="evenodd"></path>
<path d="M15.60456,40.2962 C15.50752,40.2962 15.41562,40.2828 15.33212,40.2554 C15.15061,40.1903 15.0157,40.0578 14.95556,39.8895 C14.9071,39.7544 14.91626,39.616 14.98055,39.5103 C15.03491,39.4203 15.09309,39.3244 15.18543,39.253 C15.31935,39.1507 15.47009,39.0357 15.64483,38.9594 C16.36107,38.6464 17.0595,38.2549 17.7348,37.8763 C17.9876,37.7347 18.2403,37.593 18.4945,37.4547 L18.496,37.4539 C18.6525,37.3704 18.8339,37.3574 18.9907,37.3556829 C19.1251,37.3544 19.2514,37.4273 19.3357,37.5563 C19.4088,37.6688 19.4608,37.8455 19.3862,38.0048 C19.2467,38.3034 19.0334,38.5397 18.7519,38.707 C18.6092,38.7922 18.4675,38.8799 18.3259,38.9676 C18.1017,39.1064 17.8697,39.25 17.6344,39.3827 C17.3875,39.5213 17.1346,39.6536 16.8899,39.7816 C16.68306,39.8897 16.47611,39.9979 16.27156,40.1106 C16.05043,40.2324 15.81576,40.2962 15.60456,40.2962" fill="#000000" fill-rule="evenodd"></path>
<path d="M15.71589,33.5028 C15.63566,33.5028 15.55588,33.5016 15.47696,33.5003 L15.31237,33.4983 C15.18957,33.4968 15.05336,33.4723 14.92827,33.4292 C14.69589,33.3481 14.55193,33.1749 14.54254,32.9655 C14.53163,32.7304 14.68476,32.5223 14.91496,32.4597 C15.17637,32.3911 15.44858,32.3406 15.72593,32.3094 C15.87841,32.2922 16.03198,32.2846 16.18054,32.2772 C16.3782,32.2676 16.56507,32.2584 16.74429,32.2282 C17.3555,32.1248 17.8681,32.2895 18.331,32.4823 C18.5541,32.5762 18.6746,32.7674 18.6543,32.994 C18.6307,33.2416 18.3913,33.4454 18.1086,33.4602 C18.0683,33.4627 18.028,33.4625 17.9642,33.4622 L17.8185,33.4569 C17.3024,33.3517 16.69506,33.4109 16.22376,33.4744 C16.05469,33.4973 15.8842,33.5028 15.71589,33.5028" fill="#000000" fill-rule="evenodd"></path>
<path d="M18.4648,28.913 C18.4593,28.913 18.4536,28.9129 18.4481,28.9127 C18.2819,28.9061 18.1096,28.8991 17.9523,28.822 L17.9522,28.822 C17.6991,28.6978 17.4337,28.5578 17.2075,28.3748 C16.40895,27.7327 15.77927,27.053 15.28308,26.2975 C14.94002,25.7764 14.75513,25.2277 14.73352,24.6665 C14.72817,24.4763 14.90804,24.3537 15.01566,24.2973 C15.16749,24.2196 15.3812,24.2953 15.46536,24.4114 C15.55082,24.5306 15.63738,24.6605 15.69544,24.8095 C16.10442,25.833 16.9287,26.577 17.7377,27.2514 C17.8185,27.3188 17.9298,27.3703 18.0477,27.4248 C18.0963,27.4473 18.1446,27.4698 18.1919,27.4935 C18.2518,27.5239 18.3132,27.5511 18.3746,27.5785 C18.4904,27.6302 18.6104,27.6835 18.7256,27.756 C18.9342,27.8837 19.0574,28.1153 19.037,28.3444 C18.9965,28.6653 18.7423,28.913 18.4648,28.913" fill="#000000" fill-rule="evenodd"></path>
<path d="M42.0176,35.0306 C41.9674,35.7918 41.7372,35.7837 41.7288,36.4991 C41.7205,37.2144 41.7211,37.5839 41.4145,37.7041 C41.1076,37.8243 40.1858,38.0462 39.2447,38.0473 C38.3036,38.0485 38.3013,38.0984 38.0888,37.8417 C37.8764,37.5852 37.8007,36.609 37.7665,35.5477 C37.7322,34.4865 37.6977,33.5991 37.5467,32.8787 C37.3957,32.1582 37.5959,30.5927 37.8229,30.0981 C38.0498,29.6035 38.0099,29.6636 38.1834,29.5872 C38.1834,29.5872 38.8639,29.624 39.2447,29.5872 C39.6254,29.5505 40.4998,29.3967 40.8404,29.6043 C41.1811,29.8118 41.3441,30.2162 41.606,31.3815 C41.8681,32.5469 42.0679,34.2693 42.0176,35.0306 M37.2903,24.4938 C37.1506,23.7907 37.2219,24.2047 36.7576,23.297 C36.293,22.3893 36.0367,22.4266 35.2138,21.8853 C34.3907,21.3438 32.6456,20.8439 32.3792,20.7513 C32.1127,20.6586 32.1975,20.7151 31.9063,20.6996 C31.6152,20.6841 31.1603,20.4834 29.6923,20.6996 C28.2242,20.9156 27.0479,21.7806 26.2036,22.7798 C25.3594,23.779 24.8414,24.9049 24.4025,25.7146 C23.9637,26.5244 24.0373,27.215 23.9864,27.6801 C23.9355,28.1452 23.8577,28.0813 23.6951,28.1815 C23.5324,28.2814 23.1689,28.1815 23.1689,28.1815 C22.9959,28.148 23.2193,27.713 23.2543,27.353 C23.2894,26.993 23.1839,26.5559 23.1689,26.2546 C23.1536,25.9535 23.2383,25.8958 23.3322,25.7382 C23.4259,25.5806 23.7682,24.9334 23.9421,24.5818 C24.116,24.2304 24.5301,23.3595 24.7238,23.0133 C24.9174,22.6673 25.0865,22.1508 26.1509,21.2234 C27.2153,20.296 27.7978,20.0777 28.3448,19.8521 C28.892,19.6264 30.0172,19.0136 30.3273,18.9092 C30.6375,18.8048 30.7595,18.7741 31.2341,18.732 C31.7086,18.69 32.974,18.8893 33.3125,18.9242 C33.651,18.9592 33.6212,18.976 33.9936,19.2784 C34.366,19.581 34.8992,20.1388 35.3807,20.4869 C35.862,20.835 36.3933,21.1992 36.5813,21.3693 C36.7694,21.5395 37.1548,21.8285 37.197,22.124 C37.2392,22.4195 37.4622,22.5684 37.6179,22.771 C37.7735,22.9735 37.8008,23.1992 38.1787,24.6379 C38.5566,26.0765 38.6505,26.0826 38.74,26.6436 C38.8294,27.2047 38.7441,27.5915 38.577,27.8025 C38.4101,28.0134 38.3568,27.9092 38.2372,27.7971 C38.1177,27.685 38.0467,27.0177 37.7997,26.2749 C37.5527,25.5322 37.4301,25.1971 37.2903,24.4938 M26.0175,31.8307 C26.1989,32.9929 26.5156,35.4926 26.3145,36.5406 C26.1135,37.5887 25.7719,38.1068 25.3952,38.3556 C25.0187,38.6044 24.1918,38.7467 23.2434,38.4572 C22.2949,38.1676 21.9308,37.9425 21.5922,36.9432 C21.2535,35.9439 21.4421,36.109 21.3169,35.4423 C21.1917,34.7757 21.0351,34.5554 21.0638,34.0383 C21.0926,33.5213 20.9844,31.8448 21.1005,31.2856 C21.2167,30.7264 21.1816,30.1849 21.6981,30.0927 C22.2147,30.0006 22.5234,30.22 22.8632,30.0897 C23.203,29.9595 23.1684,29.9049 23.5139,29.8469 C23.8423,29.7918 24.4819,29.6035 24.8985,29.7942 C25.3151,29.9848 25.8362,30.6683 26.0175,31.8307 M43.1237,32.903 C42.8965,32.2508 42.9956,31.6623 42.8193,30.6064 C42.6429,29.5505 42.185,29.19 42.185,29.19 C42.185,29.19 41.9683,28.5396 41.1105,28.2971 C40.2529,28.0549 40.5036,28.2466 40.4149,27.755 C40.3264,27.2633 40.3098,27.1809 40.1984,26.6819 C40.0868,26.1831 40.0566,25.9512 40.0317,25.4287 C40.0068,24.9062 40.0061,24.3174 39.7707,23.8513 C39.5355,23.3855 39.0958,22.5096 38.6297,21.7308 C38.1635,20.9519 37.8668,20.5576 37.1373,19.951 C36.4079,19.3443 35.9595,18.7084 35.2205,18.3145 C34.4815,17.9208 34.5328,17.8078 33.7945,17.6102 C33.0563,17.4126 32.9546,17.5314 31.9906,17.4497 C31.0267,17.368 30.9325,17.3016 30.1986,17.4497 C29.4647,17.5979 28.9877,18.0293 28.1268,18.427 C27.266,18.8246 26.9136,18.8125 26.3265,19.3171 C25.7395,19.8217 25.8688,19.9766 25.3755,20.3873 C24.8823,20.7979 24.5882,21.0302 23.9252,22.1562 C23.2621,23.2824 22.78,24.4254 22.5417,24.9563 C22.3035,25.4873 22.087,25.6467 22.0574,26.2418 C22.0278,26.8371 22.1506,26.744 22.0096,27.4275 C21.8686,28.1109 21.7195,28.6687 21.7195,28.6687 C21.7195,28.6687 20.8533,28.6521 20.3524,29.6043 C19.8514,30.5565 19.8934,30.9365 19.8258,31.4944 C19.7581,32.0523 19.8942,33.528 19.9966,34.5024 C20.099,35.4768 20.1644,36.8638 20.3344,37.3563 C20.5042,37.8485 21.1192,39.2425 22.4547,39.6581 C23.7903,40.0736 24.0915,40.1312 24.4861,40.0318 C24.8808,39.9325 25.5803,39.7314 26.0739,39.5649 C26.5674,39.3986 27.1552,38.868 27.4287,37.6574 C27.7023,36.4468 27.7194,35.8469 27.6102,34.1747 C27.5011,32.5024 27.5117,31.621 27.0462,30.3541 C26.5808,29.0873 25.8984,28.9041 25.5889,28.6194 C25.2795,28.3348 25.2548,28.4206 25.2954,28.0331 C25.336,27.6456 25.2453,26.7655 26.2268,25.2261 C27.2083,23.6867 28.2239,22.7254 29.6922,22.2928 C31.1604,21.8601 32.2501,22.2085 32.7928,22.4064 C33.3358,22.6045 33.4901,22.6756 33.9601,22.7644 C34.4299,22.8531 34.7586,23.1297 35.0527,23.4798 C35.3469,23.83 35.9578,24.6997 36.2295,25.3004 C36.5011,25.9011 36.3462,26.185 36.6513,26.849 C36.9564,27.513 37.2558,27.7256 37.1922,28.1815 C37.1286,28.6372 37.0623,28.5057 36.9496,28.8298 C36.837,29.154 36.4035,29.7662 36.3407,30.512 C36.2779,31.258 36.2209,31.8745 36.2342,32.6981 C36.2474,33.5215 36.4285,33.7866 36.4171,34.7393 C36.406,35.6918 36.3265,37.2782 36.605,38.0473 C36.8834,38.8166 37.0729,39.3225 37.4031,39.4551 C37.7333,39.5875 37.6555,39.6025 37.8593,39.5866 C37.8593,39.5866 38.0891,39.4559 38.6904,39.4692 C39.2915,39.4824 40.9338,39.5904 41.8151,39.0908 C42.6962,38.5912 42.8559,38.3148 43.0491,36.6858 C43.2425,35.057 43.3507,33.5552 43.1237,32.903" fill="#000000" fill-rule="evenodd"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
<span>Goodpods</span>
</a>
<a x-show="show.amazon_music" :href="show.amazon_music" target="_subscribe" :title="'Subscribe on Amazon Music'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="2.167 .438 251.038 259.969"><title>Amazon Music</title><g fill="none" fill-rule="evenodd"><path d="m221.503 210.324c-105.235 50.083-170.545 8.18-212.352-17.271-2.587-1.604-6.984.375-3.169 4.757 13.928 16.888 59.573 57.593 119.153 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z" fill="#4BA5DC" fill-rule="nonzero"></path><path d="m150.744 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.37 0-50.478-17.506-50.478-52.565 0-27.373 14.85-46.018 35.96-55.126 18.313-8.066 43.884-9.489 63.43-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.799 6.026-5.835 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.36-51.616 75.43-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095" fill="#000"></path><path d="m221.503 210.324c-105.235 50.083-170.545 8.18-212.352-17.271-2.587-1.604-6.984.375-3.169 4.757 13.928 16.888 59.573 57.593 119.153 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z" fill="#4BA5DC" fill-rule="nonzero"></path><path d="m150.744 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.37 0-50.478-17.506-50.478-52.565 0-27.373 14.85-46.018 35.96-55.126 18.313-8.066 43.884-9.489 63.43-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.799 6.026-5.835 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.36-51.616 75.43-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095" fill="#000"></path></g></svg>
<span>Amazon Music</span>
</a>
<a x-show="show.radioPublic" :href="show.radioPublic" target="_subscribe" :title="'Subscribe on RadioPublic'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#CE262F" viewBox="0 0 24 24"><title>RadioPublic</title><path d="M13.793 4.0692c3.0122-.2832 6.0245-1.9773 9.037-.5353v19.892c-4.1555-1.9892-8.3106 1.989-12.4656 0l-.0002-3.1517v-.3473c-3.0646.271-6.1294 1.988-9.1941.5392V.5742c4.2077 1.989 8.4155-1.989 12.6229 0zm2.2949 10.7988c.3625-.0852.725-.1737 1.0875-.2584 1.6054-.3793 2.2448-1.403 2.244-3.015V8.9974c.0004-1.5849-.4136-2.591-2.3648-2.1348-1.0875.2563-2.1747.5422-3.2626.6441v12.9706c.7652-.0717 1.5303-.2347 2.2959-.414zm0-2.1095V9.0973c.1435-.0335.2875-.068.431-.1023.5373-.1282.5864.1568.5876.6274-.0004.7207-.0004 1.441 0 2.1618-.0004.401-.0507.7437-.5876.872a82.0824 82.0824 0 0 1-.431.1023zm-9.148 4.3506v-5.5437c.1609-.0373.3223-.0754.4833-.1134.4667-.1102.6033.0151.6041.6253v3.7832c.0009.5754.0872.8338.2072.9464.7656-.1732 1.5304-.3227 2.2955-.3772v-.0872c-.0855-.1507-.1902-.3854-.1893-.9435v-4.4106c.0008-.9632-.622-1.3306-.9842-1.401.4303-.2724 1.019-.8019 1.0182-1.8793V5.6334c0-1.3907-.7072-2.1254-2.1057-1.8048-1.208.2724-2.4167.6057-3.625.7183v12.9705c.7655-.0712 1.5307-.2313 2.2958-.4083zm0-7.688V6.1437a73.198 73.198 0 0 0 .5177-.1217c.466-.1101.5693.041.5697.5988v1.761c0 .6101-.1715.8239-.6386.934-.1496.0353-.2993.071-.4489.1053z"></path></svg>
<span>RadioPublic</span>
</a>
<a x-show="show.pandora" :href="show.pandora" target="_subscribe" :title="'Subscribe on Pandora'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Pandora</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g fill="#224099" fill-rule="nonzero">
<path d="M19.051,0 L4.949,0 C2.25,0 0,2.221 0,4.95 L0,19.051 C0,21.75 2.22,24 4.949,24 L19.051,24 C21.779,24 24,21.779 24,19.051 L24,4.95 C24,2.25 21.779,0 19.051,0 Z M12.375,15.811 L11.146,15.811 L11.146,18.6 C11.146,18.961 10.845,19.246 10.5,19.246 L6.646,19.246 L6.646,4.756 L13.2,4.756 C16.381,4.756 18.842,6.406 18.842,10.156 C18.842,13.711 16.112,15.81 12.391,15.81 L12.375,15.81 L12.375,15.811 Z"></path>
</g>
</g>
</svg>
<span>Pandora</span>
</a>
<a x-show="show.castbox" :href="show.castbox" target="_subscribe" :title="'Subscribe on Castbox'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#F55B23" viewBox="0 0 24 24"><title>Castbox</title><path d="M12 0c-.29 0-.58.068-.812.206L2.417 5.392c-.46.272-.804.875-.804 1.408v10.4c0 .533.344 1.135.804 1.407l8.77 5.187c.465.275 1.162.275 1.626 0l8.77-5.187c.46-.272.804-.874.804-1.407V6.8c0-.533-.344-1.136-.804-1.408L12.813.206A1.618 1.618 0 0012 0zm-.85 8.304c.394 0 .714.303.714.676v2.224c0 .207.191.375.427.375s.428-.168.428-.375V9.57c0-.373.32-.675.713-.675.394 0 .712.302.712.675v4.713c0 .374-.318.676-.712.676-.394 0-.713-.302-.713-.676v-1.31c0-.206-.192-.374-.428-.374s-.427.168-.427.374v1.226c0 .374-.32.676-.713.676-.394 0-.713-.302-.713-.676v-1.667c0-.207-.192-.375-.428-.375-.235 0-.427.168-.427.375v3.31c0 .373-.319.676-.712.676-.394 0-.713-.303-.713-.676v-2.427c0-.206-.191-.374-.428-.374-.235 0-.427.168-.427.374v.178a.71.71 0 01-.712.708.71.71 0 01-.713-.708v-2.123a.71.71 0 01.713-.708.71.71 0 01.712.708v.178c0 .206.192.373.427.373.237 0 .428-.167.428-.373v-1.53c0-.374.32-.676.713-.676.393 0 .712.303.712.676v.646c0 .206.192.374.427.374.236 0 .428-.168.428-.374V8.98c0-.373.319-.676.713-.676zm4.562 2.416c.393 0 .713.302.713.676v2.691c0 .374-.32.676-.713.676-.394 0-.712-.303-.712-.676v-2.691c0-.374.319-.676.712-.676zm2.28 1.368c.395 0 .713.303.713.676v.67c0 .374-.318.676-.712.676-.394 0-.713-.302-.713-.675v-.67c0-.374.32-.677.713-.677Z"></path></svg>
<span>CastBox</span>
</a>
<a x-show="show.anghami" :href="show.anghami" target="_subscribe" :title="'Subscribe on Anghami'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" width="135px" height="135px" viewBox="0 0 135 135">
<title>Anghami</title>
<g>
<rect fill="#1D1A1A" x="0" y="0" width="135" height="135" rx="23"></rect>
<path d="M87.59,101.72 L87.59,66.31 C87.59,55.35 78.65,46.4 67.68,46.4 C56.71,46.4 47.77,55.34 47.77,66.31 C47.77,77.28 56.71,86.22 67.68,86.22 C71.94,86.22 76.12,84.85 79.58,82.25 L79.58,74.89 C74.82,81.45 65.66,82.97 59.02,78.28 C52.38,73.59 50.94,64.36 55.63,57.72 C60.32,51.08 69.55,49.64 76.19,54.33 C80.01,57.07 82.32,61.54 82.32,66.23 L82.32,100.71 L87.59,101.72 L87.59,101.72 Z" fill="#FF00FF" fill-rule="nonzero"></path>
<path d="M95.59,103.23 L95.59,66.3 C95.59,50.94 83.04,38.46 67.68,38.529707 C52.32,38.529707 39.84,51.08 39.909707,66.44 C39.909707,81.8 52.46,94.28 67.82,94.21 C71.93,94.21 75.97,93.27 79.65,91.54 L79.65,85.63 C68.98,92.19 54.98,88.95 48.42,78.27 C41.86,67.6 45.1,53.6 55.78,47.04 C66.45,40.48 80.45,43.72 87.01,54.4 C89.25,58.01 90.4,62.12 90.4,66.3 L90.4,102.29 L95.59,103.23 L95.59,103.23 Z" fill="#00CEE5" fill-rule="nonzero"></path>
<path d="M103.53,104.68 L103.53,66.31 C103.53,46.48 87.45,30.46 67.61,30.46 C47.77,30.46 31.76,46.54 31.76,66.38 C31.76,86.22 47.84,102.23 67.68,102.23 C71.72,102.23 75.76,101.51 79.58,100.21 L79.58,94.58 C64,101.14 45.97,93.86 39.41,78.28 C32.85,62.7 40.13,44.67 55.71,38.11 C71.29,31.55 89.32,38.83 95.88,54.41 C97.47,58.16 98.33,62.27 98.33,66.31 L98.33,103.74 L103.52,104.68 L103.52,104.68 L103.53,104.68 Z" fill="#03FF16" fill-rule="nonzero"></path>
<path d="M67.75,110.16 C75.11,110.16 82.32,108.28 88.74,104.75 L79.58,103.02 C59.24,109.58 37.46,98.48 30.9,78.21 C24.26,57.87 35.37,36.09 55.71,29.53 C76.05,22.97 97.83,34.07 104.39,54.34 C105.62,58.16 106.27,62.2 106.27,66.24 L106.27,105.19 L111.46,106.13 L111.46,66.32 C111.46,42.09 91.77,22.54 67.61,22.54 C43.45,22.54 23.83,42.23 23.83,66.39 C23.9,90.62 43.59,110.17 67.75,110.17 L67.75,110.17 L67.75,110.16 Z" fill="#E0FF00" fill-rule="nonzero"></path>
</g>
</svg>
<span>Anghami</span>
</a>
<a x-show="show.fountain" :href="show.fountain" target="_subscribe" :title="'Subscribe on Fountain'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
<rect fill="#000000" x="0" y="0" width="26" height="26" rx="6"></rect>
<path d="M9.177901,22.8743184 C9.313901,22.7013184 9.305901,22.6353184 9.080901,22.1103184 C8.718901,21.2633184 8.598901,20.2443184 8.700901,18.8923184 C8.808901,17.4443184 9.039901,16.6323184 9.592901,15.7443184 C9.710901,15.5543184 9.896901,15.3233184 10.004901,15.2303184 C10.440426,14.8721699 11.0338851,14.7734506 11.561901,14.9713184 C12.391901,15.2813184 13.194901,15.3913184 13.984901,15.3023184 C15.172901,15.1703184 16.023901,14.8023184 16.714901,14.1223184 C17.514901,13.3353184 17.658901,12.4773184 17.167901,11.4463184 C16.806901,10.6903184 16.051901,10.1423184 14.986901,9.86531841 C14.396901,9.71131841 13.125901,9.65531841 12.419901,9.75031841 C9.795901,10.1063184 7.793901,12.1683184 7.196901,15.1303184 C6.751901,17.3343184 7.076901,20.0663184 8.012901,21.9863184 C8.340901,22.6593184 8.641901,23.0003184 8.905901,23.0003184 C9.035901,23.0003184 9.103901,22.9693184 9.177901,22.8743184 L9.177901,22.8743184 Z M8.320901,11.2473184 C8.554901,10.8993184 9.351901,10.1623184 9.834901,9.84731841 C10.304901,9.54131841 10.314901,9.52931841 10.520901,9.13331841 C10.884901,8.42931841 11.237901,8.17131841 11.884901,8.13531841 C12.214901,8.11731841 12.318901,8.13231841 12.625901,8.24431841 C13.319901,8.49431841 13.537901,8.55431841 13.943901,8.60431841 C14.999901,8.73531841 16.113901,8.31431841 16.987901,7.45431841 C17.552901,6.89731841 17.789901,6.29531841 17.695901,5.65431841 C17.509901,4.38631841 16.469901,3.40231841 14.992901,3.09731841 C13.264901,2.74131841 11.407901,3.37531841 10.064901,4.78131841 C8.894901,6.00531841 8.228901,7.68231841 8.101901,9.71631841 C8.068901,10.2493184 8.114901,11.4263184 8.169901,11.425319 C8.186901,11.425319 8.254901,11.3453184 8.319901,11.2473184 L8.320901,11.2473184 Z" fill="#FAAF76" fill-rule="nonzero"></path>
</svg>
<span>Fountain</span>
</a>
<a x-show="show.jiosaavn" :href="show.jiosaavn" target="_subscribe" :title="'Subscribe on JioSaavn'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<path d="M0,40 C0,61.9983753 18.0016247,80 40,80 C61.9983753,80 80,61.9983753 80,40 C80,18.0016247 61.9983753,0 40,0 C18.0016247,0 0,18.0016247 0,40 Z" fill="#2BC5B4"></path>
<path d="M34.4760357,62.7457352 C32.981316,60.2437043 30.9666937,58.0016247 28.4646629,56.506905 C25.962632,55.0121852 23.4606011,53.7449228 20.4711617,52.997563 L20.4711617,52.997563 C20.2112104,52.997563 19.983753,52.997563 19.7238018,53.2575142 C19.4638505,53.5174655 19.4638505,53.7449228 19.4638505,54.0048741 C19.4638505,54.2648253 19.4638505,54.4922827 19.7238018,54.4922827 C22.9731925,59.2363932 27.9772543,62.7457352 33.4687246,64.2404549 L33.7286759,64.2404549 C33.9886271,64.2404549 33.9886271,64.2404549 34.2160845,64.2404549 C34.2160845,64.2404549 34.4760357,64.2404549 34.4760357,63.9805037 L34.735987,63.7205524 C34.735987,63.7205524 34.735987,63.4606011 34.735987,63.2331438 C34.735987,63.0056864 34.735987,62.7457352 34.4760357,62.7457352 L34.4760357,62.7457352 Z" fill="#FFFFFF"></path>
<path d="M63.9805037,33.2412673 L63.9805037,32.981316 C62.7457352,28.4971568 60.2437043,24.4679123 56.7343623,21.4784728 C53.2250203,18.4890333 49.2282697,16.2144598 44.7441105,15.4670999 L44.4841592,15.4670999 C44.224208,15.4670999 43.9967506,15.4670999 43.7367994,15.7270512 C43.4768481,15.9870024 43.4768481,16.2144598 43.4768481,16.474411 L43.4768481,16.7343623 C45.7189277,30.4792851 44.224208,44.4841592 39.2201462,57.4817222 C39.2201462,57.7416734 38.960195,57.7416734 38.960195,57.9691308 C38.960195,58.1965881 38.7002437,58.229082 38.4727864,58.229082 C38.2128351,58.229082 38.2128351,58.229082 37.9853777,58.229082 C37.9853777,58.229082 37.7254265,58.229082 37.7254265,57.9691308 L37.4654752,57.7091795 C37.4654752,57.7091795 37.4654752,57.4492283 37.4654752,57.2217709 C37.4654752,57.2217709 37.205524,55.4670999 37.205524,54.71974 C35.7108042,42.7294882 32.2014622,31.226645 26.4500406,20.4711617 C26.4500406,20.2112104 26.1900894,20.2112104 26.1900894,20.2112104 L25.9301381,19.9512591 C25.9301381,19.9512591 25.6701868,19.9512591 25.4427295,19.9512591 C25.1827782,19.9512591 25.1827782,19.9512591 24.9553209,19.9512591 L24.9553209,19.9512591 C21.4459789,22.7132413 18.7164907,26.1900894 16.9618197,30.4467912 C16.9618197,30.7067425 16.9618197,30.9341998 16.9618197,31.1941511 C16.9618197,31.4541024 17.2217709,31.6815597 17.4492283,31.6815597 C22.9406986,35.1909017 27.4573517,39.6750609 30.7067425,45.4264825 C33.9561332,50.9179529 35.7108042,57.4167344 35.9707555,63.6880585 C35.9707555,63.9480097 35.9707555,64.1754671 36.2307067,64.4354184 C36.490658,64.6953696 36.7181154,64.6953696 36.7181154,64.6953696 C37.205524,64.6953696 37.9528838,64.9553209 38.4727864,64.9553209 C38.7327376,64.9553209 38.960195,64.9553209 39.2201462,64.6953696 C39.4800975,64.4354184 39.4800975,64.4354184 39.4800975,64.207961 C40.714866,57.7091795 43.4768481,51.4703493 47.73355,46.2063363 C51.9902518,40.9423233 57.2217709,36.9455727 63.493095,34.2160845 C63.7530463,34.2160845 63.7530463,33.9561332 63.9805037,33.9561332 C63.9805037,33.5012185 63.9805037,33.5012185 63.9805037,33.2412673 Z" fill="#FFFFFF"></path>
<path d="M61.738424,52.2502031 C61.738424,51.9902518 61.738424,51.7627945 61.4784728,51.5028432 C61.2185215,51.242892 60.9910642,51.242892 60.7311129,51.242892 L60.4711617,51.242892 C52.7051178,52.997563 45.7189277,57.2542648 40.714866,63.2331438 C40.4549147,63.493095 40.4549147,63.7205524 40.4549147,63.9805037 C40.4549147,64.2404549 40.4549147,64.4679123 40.714866,64.7278635 C40.9748172,64.9878148 41.2022746,64.9878148 41.4622258,64.9878148 L41.4622258,64.9878148 C45.4589764,64.7278635 49.4557271,63.493095 52.965069,61.4784728 C56.474411,59.4638505 59.4638505,56.474411 61.4784728,52.965069 C61.738424,52.7376117 61.738424,52.5101543 61.738424,52.2502031 L61.738424,52.2502031 Z" fill="#FFFFFF"></path>
</svg>
<span>JioSaavn</span>
</a>
<a x-show="show.gaana" :href="show.gaana" target="_subscribe" :title="'Subscribe on Gaana'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
<polygon fill="#E72C30" points="0 0 40 0 40 40 0 40"></polygon>
<path d="M25.7444444,8.33777778 C26.5688889,8.32888889 27.3888889,8.33777778 28.2844444,8.33777778 C28.1755556,8.99777778 28.0777778,9.62666667 27.9688889,10.2488889 C27.3733333,13.6733333 26.7688889,17.1022222 26.1666667,20.5288889 C25.7866667,22.68 25.4377778,24.8333333 25.0066667,26.98 C24.4266667,29.9044444 22.2266667,31.2511111 19.9666667,31.58 C19.4194695,31.643954 18.8686228,31.6714221 18.3177778,31.6622222 C16.4155556,31.6711111 14.5111111,31.6622222 12.6066667,31.6622222 C12.5698868,31.6592586 12.5338475,31.6502487 12.5,31.6355556 C12.5088889,31.5888889 12.5,31.5355556 12.5222222,31.4955556 C13.0555556,30.5311111 13.5755556,29.5688889 14.1311111,28.6222222 C14.2133333,28.4888889 14.4622222,28.3955556 14.6355556,28.3955556 C16.3088889,28.3777778 17.9711111,28.3866667 19.6444444,28.3866667 C20.9177778,28.3866667 21.5711111,27.86 21.8444444,26.5933333 C21.9777778,26.0666667 22.0511111,25.5644444 22.1688889,24.96 C21.88,24.96 21.6466667,24.9688889 21.4133333,24.96 C20.2711111,24.9311111 19.12,24.9822222 17.9866667,24.8577778 C16.2711111,24.6577778 15.08,23.5688889 14.74,22.0688889 C14.5511111,21.2466667 14.66,20.4333333 14.8,19.62 C15.18,17.46 15.5466667,15.2888889 15.9511111,13.1311111 C16.44,10.5155556 18.4355556,8.63777778 21.0755556,8.43111111 C22.6244444,8.30444444 24.1866667,8.35333333 25.7422222,8.33777778 L25.7444444,8.33777778 Z M22.0222222,11.6111111 L21.1933333,11.6133333 C20.0866667,11.6311111 19.3333333,12.2733333 19.1333333,13.3911111 C18.9177778,14.5955556 18.6955556,15.7933333 18.4888889,17 C18.3066667,18.0822222 18.1,19.1622222 17.9777778,20.2511111 C17.8844444,21.0288889 18.3044444,21.7177778 19.0911111,21.7177778 L22.1866667,21.7177778 C22.58,21.7177778 22.76,21.5822222 22.8266667,21.1822222 C23.2644444,18.5511111 23.72,15.92 24.1733333,13.2888889 C24.3511111,12.3022222 23.8511111,11.6533333 22.8488889,11.6222222 C22.2955556,11.6044444 21.7488889,11.6133333 21.1933333,11.6133333 L22.0222222,11.6111111 Z" fill="#FFFFFF"></path>
</svg>
<span>Gaana</span>
</a>
<a x-show="show.iHeartRadio" :href="show.iHeartRadio" target="_subscribe" :title="'Subscribe on iHeartRadio'">
<svg xmlns="http://www.w3.org/2000/svg" width="345px" height="255px" viewBox="0 0 345 255">
<title>iHeartRadio</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M309.245,89.813 C309.245,116.139 295.016,142.09 266.963,166.959 C265.724,168.053 264.181,168.59 262.644,168.59 C260.852,168.59 259.06,167.855 257.772,166.4 C255.388,163.713 255.632,159.598 258.33,157.209 C283.476,134.929 296.228,112.252 296.228,89.813 L296.228,89.498 C296.228,71.285 284.802,49.845 270.215,40.699 C267.168,38.788 266.25,34.768 268.163,31.726 C270.07,28.679 274.091,27.761 277.138,29.666 C295.437,41.152 309.245,66.878 309.245,89.498 L309.245,89.813 Z M224.752,144.745 C223.746,145.309 222.656,145.574 221.572,145.574 C219.294,145.574 217.082,144.374 215.888,142.245 C214.134,139.109 215.252,135.139 218.393,133.387 C233.462,124.946 243.598,108.544 243.637,92.534 C243.604,77.822 235.491,64.431 222.446,57.568 C219.261,55.892 218.039,51.958 219.714,48.775 C221.39,45.595 225.327,44.371 228.507,46.043 C245.816,55.146 256.583,72.908 256.66,92.44 L256.66,92.639 C256.577,113.178 243.77,134.094 224.752,144.745 Z M172.479,125.617 C156.881,125.608 144.24,112.962 144.24,97.362 C144.24,81.763 156.881,69.116 172.479,69.108 C188.077,69.116 200.718,81.763 200.718,97.362 C200.718,112.962 188.077,125.608 172.479,125.617 Z M129.07,142.245 C127.876,144.374 125.664,145.574 123.385,145.574 C122.301,145.574 121.212,145.309 120.206,144.745 C101.188,134.094 88.381,113.178 88.298,92.639 L88.298,92.44 C88.375,72.908 99.142,55.146 116.451,46.043 C119.631,44.371 123.568,45.595 125.244,48.775 C126.919,51.958 125.697,55.892 122.511,57.568 C109.466,64.431 101.354,77.822 101.32,92.534 C101.36,108.544 111.496,124.946 126.565,133.387 C129.706,135.139 130.823,139.109 129.07,142.245 Z M87.186,166.4 C85.898,167.855 84.106,168.59 82.314,168.59 C80.777,168.59 79.234,168.053 77.995,166.959 C49.942,142.09 35.713,116.139 35.713,89.813 L35.713,89.498 C35.713,66.878 49.521,41.152 67.82,29.666 C70.867,27.761 74.887,28.679 76.795,31.726 C78.708,34.768 77.79,38.788 74.743,40.699 C60.155,49.845 48.73,71.285 48.73,89.498 L48.73,89.813 C48.73,112.252 61.482,134.929 86.628,157.209 C89.326,159.598 89.57,163.713 87.186,166.4 Z M251.004,0 C218.432,0 189.331,17.257 172.479,42.457 C155.627,17.257 126.526,0 93.954,0 C42.049,0 0,42.052 0,93.952 C0,126.88 20.855,150.619 42.641,172.587 L127.821,253.119 C132.284,257.339 139.63,254.174 139.63,248.032 L139.63,185.288 C139.63,167.134 154.332,152.416 172.479,152.386 C190.626,152.416 205.328,167.134 205.328,185.288 L205.328,248.032 C205.328,254.174 212.674,257.339 217.137,253.119 L302.317,172.587 C324.103,150.619 344.958,126.88 344.958,93.952 C344.958,42.052 302.908,0 251.004,0 L251.004,0 Z" fill="#C6002B"></path>
</g>
</svg>
<span>iHeartRadio</span>
</a>
<a x-show="show.tuneIn" :href="show.tuneIn" target="_subscribe" :title="'Subscribe on TuneIn'">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 122.88 122.88" style="enable-background:new 0 0 122.88 122.88" xml:space="preserve"><title>TuneIn</title><style type="text/css">.st0{fill:#14D8CC;}.st1{fill:#1C203C;}</style><g><path class="st1" d="M18.43,0h86.02c10.18,0,18.43,8.25,18.43,18.43v86.02c0,10.18-8.25,18.43-18.43,18.43H18.43 C8.25,122.88,0,114.63,0,104.45l0-86.02C0,8.25,8.25,0,18.43,0L18.43,0z"></path><path class="st0" d="M71.52,36.48c-1.44,0-1.44,1.44-1.44,1.44v8.16H13.44C12,46.08,12,47.52,12,47.52v29.52 c0,1.44,1.44,1.44,1.44,1.44h58.08c1.44,0,1.44-1.44,1.44-1.44v-8.16h32.88c1.44,0,1.44-1.44,1.44-1.44V37.92 c0-1.44-1.44-1.44-1.44-1.44H71.52L71.52,36.48z M80.4,46.08h6.72v2.64l-2.16,0v8.16l2.4,0v2.64h-7.2v-2.64l2.16,0v-8.16l-1.92,0 V46.08L80.4,46.08L80.4,46.08z M89.28,46.08h3.12l2.88,8.16v-8.16h2.64v13.44h-2.88l-3.12-7.92v7.92h-2.64V46.08L89.28,46.08 L89.28,46.08z M14.88,48.96h55.2V75.6h-55.2V48.96L14.88,48.96z M22.08,55.68v2.64h2.88v10.56h2.64V58.32l2.88,0v-2.64H22.08 L22.08,55.68z M32.4,55.68v9.36c0,0,0,4.08,4.56,4.08s4.56-4.08,4.56-4.08v-9.36h-2.64v9.36c0,0,0,1.44-1.92,1.44 s-1.92-1.44-1.92-1.44v-9.36H32.4L32.4,55.68z M43.68,55.68v13.2h2.64v-7.44l2.64,7.44h3.36v-13.2h-2.88v7.44l-2.64-7.44H43.68 L43.68,55.68z M54.24,55.68v13.2h7.92v-2.64h-5.04V63.6h4.8v-2.64h-4.8v-2.64l4.8,0v-2.64H54.24L54.24,55.68z"></path></g></svg>
<span>TuneIn</span>
</a>
<a x-show="show.player_FM" :href="show.player_FM" target="_subscribe" :title="'Subscribe on Player FM'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#C8122A" viewBox="0 0 24 24"><title>Player FM</title><path d="M11.976 0a12 12 0 00-.347.012c-.323.021-.771.063-1.129.11-3.29.448-6.096 2.1-7.993 4.56a12.027 12.027 0 00-1.22 1.94 12 12 0 00-.173.358c-.092.198-.179.4-.261.603a12 12 0 00-.288.788l-.045.143A12 12 0 000 11.986v.037A12 12 0 0012 24a12 12 0 0011.939-10.79l.003-.024A12 12 0 0024 12.018v-.048a12 12 0 00-.769-4.182c-.04-.105-.081-.21-.125-.313a12 12 0 00-.226-.507c-1.487-3.15-4.299-5.59-7.698-6.506-.76-.208-1.978-.39-2.813-.444A12 12 0 0012.024 0h-.048zm2.321 2.88c.166.001.377.056.675.159 1.782.611 3.773 2.157 4.856 3.764.752 1.118 1.337 2.428 1.337 2.987 0 .358-.35.681-.725.681-.35 0-.708-.305-.804-.68-.13-.525-.83-1.852-1.345-2.534-.917-1.205-2.332-2.262-3.72-2.777-.979-.367-1.232-.795-.778-1.336.152-.182.29-.267.504-.265zm-3.885 1.4c.26.001.495.056.7.165 1.31.664 1.24 2.568-.122 3.092-1.686.637-2.533 1.319-3.084 2.437-1.153 2.34-.21 5.1 2.123 6.218 1.712.821 3.668.533 5.03-.725.62-.576.961-1.074 1.267-1.878.428-1.126.917-1.545 1.79-1.545 1.119 0 1.887.943 1.66 2.026-.463 2.13-2.253 4.27-4.42 5.275-1.196.55-1.851.69-3.362.69-1.485 0-2.131-.131-3.284-.655-3.144-1.424-5.075-4.83-4.673-8.21a8.123 8.123 0 015.511-6.734c.315-.105.603-.157.864-.156zm3.463.96c.217.004.499.105.914.306 1.686.803 3.083 2.279 3.834 4.035.28.672.14 1.109-.41 1.283-.42.123-.7-.104-1.066-.864-.681-1.441-1.65-2.437-3.013-3.11-.795-.384-.891-.471-.97-.847-.035-.2 0-.314.184-.532.157-.184.31-.276.527-.271zm-.398 2.443c.23-.001.496.108.84.334.961.629 2.044 1.983 2.044 2.55 0 .289-.28.656-.559.725-.376.097-.646-.087-1.04-.707-.427-.655-.925-1.153-1.44-1.415-.446-.227-.577-.402-.577-.769a.58.58 0 01.245-.515.727.727 0 01.487-.203z"></path></svg>
<span>Player FM</span>
</a>
<a x-show="show.soundcloud" :href="show.soundcloud" target="_subscribe" :title="'Subscribe on SoundCloud'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#FF3300" viewBox="0 0 24 24"><title>SoundCloud</title><path d="M1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c0-.057-.045-.1-.09-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.165 1.308c0 .055.045.094.09.094s.089-.045.104-.104l.21-1.319-.21-1.334c0-.061-.044-.09-.09-.09m1.83-1.229c-.061 0-.12.045-.12.104l-.21 2.563.225 2.458c0 .06.045.12.119.12.061 0 .105-.061.121-.12l.254-2.474-.254-2.548c-.016-.06-.061-.12-.121-.12m.945-.089c-.075 0-.135.06-.15.135l-.193 2.64.21 2.544c.016.077.075.138.149.138.075 0 .135-.061.15-.15l.24-2.532-.24-2.623c0-.075-.06-.135-.135-.135l-.031-.017zm1.155.36c-.005-.09-.075-.149-.159-.149-.09 0-.158.06-.164.149l-.217 2.43.2 2.563c0 .09.075.157.159.157.074 0 .148-.068.148-.158l.227-2.563-.227-2.444.033.015zm.809-1.709c-.101 0-.18.09-.18.181l-.21 3.957.187 2.563c0 .09.08.164.18.164.094 0 .174-.09.18-.18l.209-2.563-.209-3.972c-.008-.104-.088-.18-.18-.18m.959-.914c-.105 0-.195.09-.203.194l-.18 4.872.165 2.548c0 .12.09.209.195.209.104 0 .194-.089.21-.209l.193-2.548-.192-4.856c-.016-.12-.105-.21-.21-.21m.989-.449c-.121 0-.211.089-.225.209l-.165 5.275.165 2.52c.014.119.104.225.225.225.119 0 .225-.105.225-.225l.195-2.52-.196-5.275c0-.12-.105-.225-.225-.225m1.245.045c0-.135-.105-.24-.24-.24-.119 0-.24.105-.24.24l-.149 5.441.149 2.503c.016.135.121.24.256.24s.24-.105.24-.24l.164-2.503-.164-5.456-.016.015zm.749-.134c-.135 0-.255.119-.255.254l-.15 5.322.15 2.473c0 .15.12.255.255.255s.255-.12.255-.27l.15-2.474-.165-5.307c0-.148-.12-.27-.271-.27m1.005.166c-.164 0-.284.135-.284.285l-.103 5.143.135 2.474c0 .149.119.277.284.277.149 0 .271-.12.284-.285l.121-2.443-.135-5.112c-.012-.164-.135-.285-.285-.285m1.184-.945c-.045-.029-.105-.044-.165-.044s-.119.015-.165.044c-.09.054-.149.15-.149.255v.061l-.104 6.048.115 2.449v.008c.008.06.03.135.074.18.058.061.142.104.234.104.08 0 .158-.044.209-.09.058-.06.091-.135.091-.225l.015-.24.117-2.203-.135-6.086c0-.104-.061-.193-.135-.239l-.002-.022zm1.006-.547c-.045-.045-.09-.061-.15-.061-.074 0-.149.016-.209.061-.075.061-.119.15-.119.24v.029l-.137 6.609.076 1.215.061 1.185c0 .164.148.314.328.314.181 0 .33-.15.33-.329l.15-2.414-.15-6.637c0-.12-.074-.221-.165-.277m8.934 3.777c-.405 0-.795.086-1.139.232-.24-2.654-2.46-4.736-5.188-4.736-.659 0-1.305.135-1.889.359-.225.09-.27.18-.285.359v9.368c.016.18.15.33.33.345h8.185C22.681 17.218 24 15.914 24 14.28s-1.319-2.952-2.938-2.952"></path></svg>
<span>SoundCloud</span>
</a>
<a x-show="show.deezer" :href="show.deezer" target="_subscribe" :title="'Subscribe on Deezer'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 163.17">
<defs>
<linearGradient id="deezer-e" x1="90.71" x2="90.5" y1="62.45" y2="49.29" gradientTransform="matrix(2.4611 0 0 2.4611 0 -77.943)" gradientUnits="userSpaceOnUse">
<stop stop-color="#358c7b" offset="0"></stop>
<stop stop-color="#33a65e" offset=".5256"></stop>
</linearGradient>
<linearGradient id="deezer-a" x1="79.29" x2="101.91" y1="79.49" y2="67.97" gradientTransform="matrix(2.4611 0 0 2.4611 0 -77.943)" gradientUnits="userSpaceOnUse">
<stop stop-color="#222b90" offset="0"></stop>
<stop stop-color="#367b99" offset="1"></stop>
</linearGradient>
<linearGradient id="deezer-b" x2="21.95" y1="91.55" y2="91.55" gradientTransform="matrix(2.4611 0 0 2.4611 0 -77.943)" gradientUnits="userSpaceOnUse">
<stop stop-color="#f90" offset="0"></stop>
<stop stop-color="#ff8000" offset="1"></stop>
</linearGradient>
<linearGradient id="deezer-h" x1="26.55" x2="48.49" y1="91.55" y2="91.55" gradientTransform="matrix(2.4611 0 0 2.4611 0 -77.943)" gradientUnits="userSpaceOnUse">
<stop stop-color="#ff8000" offset="0"></stop>
<stop stop-color="#cc1953" offset="1"></stop>
</linearGradient>
<linearGradient id="deezer-g" x1="53.09" x2="75.03" y1="91.55" y2="91.55" gradientTransform="matrix(2.4611 0 0 2.4611 0 -77.943)" gradientUnits="userSpaceOnUse">
<stop stop-color="#cc1953" offset="0"></stop>
<stop stop-color="#241284" offset="1"></stop>
</linearGradient>
<linearGradient id="deezer-i" x1="79.6" x2="101.55" y1="91.55" y2="91.55" gradientTransform="matrix(2.4611 0 0 2.4611 0 -77.943)" gradientUnits="userSpaceOnUse">
<stop stop-color="#222b90" offset="0"></stop>
<stop stop-color="#3559a6" offset="1"></stop>
</linearGradient>
<linearGradient id="deezer-c" x1="52.22" x2="75.9" y1="77.19" y2="70.27" gradientTransform="matrix(2.4611 0 0 2.4611 0 -77.943)" gradientUnits="userSpaceOnUse">
<stop stop-color="#cc1953" offset="0"></stop>
<stop stop-color="#241284" offset="1"></stop>
</linearGradient>
<linearGradient id="deezer-f" x1="25.76" x2="49.27" y1="69.45" y2="78.01" gradientTransform="matrix(2.4611 0 0 2.4611 0 -77.943)" gradientUnits="userSpaceOnUse">
<stop stop-color="#fc0" offset=".0026698"></stop>
<stop stop-color="#ce1938" offset=".9999"></stop>
</linearGradient>
<linearGradient id="deezer-d" x1="28.39" x2="46.65" y1="47.49" y2="64.33" gradientTransform="matrix(2.4611 0 0 2.4611 0 -77.943)" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffd100" offset=".0026698"></stop>
<stop stop-color="#fd5a22" offset="1"></stop>
</linearGradient>
</defs>
<path d="m250 0v31.625h-54.046v-31.625h54.046z" fill="#40ab5d" stroke-width="2.4611"></path>
<path d="m250 43.832v31.625h-54.046v-31.625h54.046z" fill="url(#deezer-e)" stroke-width="2.4611"></path>
<path d="m250 87.69v31.625h-54.046v-31.625h54.046z" fill="url(#deezer-a)" stroke-width="2.4611"></path>
<path d="m54.046 131.55v31.625h-54.046v-31.625h54.046z" fill="url(#deezer-b)" stroke-width="2.4611"></path>
<path d="m119.34 131.55v31.625h-54.071v-31.625h54.071z" fill="url(#deezer-h)" stroke-width="2.4611"></path>
<path d="m184.73 131.55v31.625h-54.071v-31.625h54.071z" fill="url(#deezer-g)" stroke-width="2.4611"></path>
<path d="m250 131.55v31.625h-54.046v-31.625h54.046z" fill="url(#deezer-i)" stroke-width="2.4611"></path>
<path d="m184.73 87.69v31.625h-54.071v-31.625h54.071z" fill="url(#deezer-c)" stroke-width="2.4611"></path>
<path d="m119.34 87.69v31.625h-54.071v-31.625h54.071z" fill="url(#deezer-f)" stroke-width="2.4611"></path>
<path d="m119.34 43.832v31.625h-54.071v-31.625h54.071z" fill="url(#deezer-d)" stroke-width="2.4611"></path>
</svg>
<span>Deezer</span>
</a>
<a x-show="show.podcast_addict" :href="show.podcast_addict" target="_subscribe" :title="'Subscribe on Podcast Addict'">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#F4842D" viewBox="0 0 24 24"><title>Podcast Addict</title><path d="M5.36.037C2.41.037 0 2.447 0 5.397v13.207c0 2.95 2.41 5.36 5.36 5.36h13.28c2.945 0 5.36-2.41 5.36-5.36V5.396c0-2.95-2.415-5.36-5.36-5.36zm6.585 4.285a7.72 7.72 0 017.717 7.544l.005 7.896h-3.39v-1.326a7.68 7.68 0 01-4.327 1.326 7.777 7.777 0 01-2.384-.378v-4.63a3.647 3.647 0 002.416.91 3.666 3.666 0 003.599-2.97h-1.284a2.416 2.416 0 01-4.73-.66v-.031c0-1.095.728-2.023 1.728-2.316V8.403a3.67 3.67 0 00-2.975 3.6v6.852a7.72 7.72 0 013.625-14.533zm.031 1.87V7.43h.006a4.575 4.575 0 014.573 4.574v.01h1.237v-.01a5.81 5.81 0 00-5.81-5.81zm0 2.149v1.246h.006a2.413 2.413 0 012.415 2.416v.01h1.247v-.01a3.662 3.662 0 00-3.662-3.662zm0 2.252c-.78 0-1.409.629-1.409 1.41 0 .78.629 1.409 1.41 1.409.78 0 1.409-.629 1.409-1.41 0-.78-.629-1.409-1.41-1.409z"></path></svg>
<span>Podcast Addict</span>
</a>
</div>
</div>
<div class="sharing panel" x-data="{ timestamp: '00:00', timejump: false }" x-show="expandedPanel === 'sharing'" :class="{ expanded: expandedPanel === 'sharing' }"
x-transition:enter="transition-enter"
x-transition:enter-start="transition-enter-start"
x-transition:enter-end="transition-enter-end"
x-transition:leave="transition-leave"
x-transition:leave-start="transition-leave-start"
x-transition:leave-end="transition-leave-end">
<span class="close-btn" @click.prevent="closePanel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g transform="translate(1.000000, 1.000000)" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="11"></circle>
<line x1="13.828" y1="8.172" x2="8.172" y2="13.828"></line>
<line x1="8.172" y1="8.172" x2="13.828" y2="13.828"></line>
</g>
</g>
</svg>
</span>
<div class="title">Share</div>
<div class="copyable-input">
<label>Embed</label>
<input type="text" :value="selectedEpisode.embed_html" id="embed-html-input" readonly @click="$el.select()">
<span class="copy-btn" :class="{ 'copied': embed_html_copied }" title="Copy Embed code to clipboard" @click="embed_html_copied = true" data-clipboard-target="#embed-html-input">
<svg viewBox="0 0 20 20" fill="currentColor" class="input-copy"><path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path><path d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="input-copied"><g id="check-circle"><path d="M20.49,3.51a12,12,0,1,0,0,17A12,12,0,0,0,20.49,3.51ZM17.76,8.65l-6.61,7.71L6.4,12.8a1,1,0,0,1,1.2-1.6l3.25,2.44,5.39-6.29a1,1,0,0,1,1.52,1.3Z"></path></g></svg>
</span>
</div>
<div class="copyable-input" x-show="!show.private_feed">
<label>Share</label>
<input type="text" :value="`${selectedEpisode.share_url}${timejump ? `?t=${transistor.jumpTime(formattedTimestamp)}` : ''}`" id="share-url-input" readonly @click="$el.select()">
<span class="copy-btn" :class="{ 'copied': share_url_copied }" title="Copy Share URL to clipboard" @click="share_url_copied = true" data-clipboard-target="#share-url-input">
<svg viewBox="0 0 20 20" fill="currentColor" class="input-copy"><path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path><path d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="input-copied"><g id="check-circle"><path d="M20.49,3.51a12,12,0,1,0,0,17A12,12,0,0,0,20.49,3.51ZM17.76,8.65l-6.61,7.71L6.4,12.8a1,1,0,0,1,1.2-1.6l3.25,2.44,5.39-6.29a1,1,0,0,1,1.52,1.3Z"></path></g></svg>
</span>
</div>
<div class="share-links-timestamp">
<div class="share-links">
<a :href="'https://twitter.com/intent/tweet?url='+ selectedEpisode.share_url +'&text=I found a great episode of \''+ show.title +'\'. Listen along here:'" title="Share this episode on Twitter" class="twitter" target="_popup" @click.prevent="popup">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;"><path fill-rule="nonzero" d="M8,0C3.582,0,0,3.582,0,8s3.582,8,8,8c4.418,0,8-3.582,8-8 S12.418,0,8,0z M11.993,5.992c0.004,0.086,0.008,0.174,0.008,0.262c0,2.669-2.03,5.746-5.745,5.746c-1.14,0-2.198-0.336-3.092-0.907 c0.158,0.019,0.326,0.028,0.489,0.028c0.946,0,1.831-0.324,2.522-0.865c-0.884-0.016-1.602-0.6-1.858-1.402 C4.44,8.877,4.622,8.891,4.752,8.891c0.184,0,0.474-0.025,0.644-0.071C4.473,8.633,4,7.817,4,6.84c0-0.009,0-0.018,0-0.027 c0,0.152,0.36,0.243,0.691,0.254c-0.542-0.363-1.122-0.98-1.122-1.682c0-0.369,0.1-0.717,0.273-1.015 c0.996,1.222,2.484,2.026,4.163,2.11C7.97,6.332,7.953,6.178,7.953,6.02C7.953,4.904,8.856,4,9.972,4 c0.581,0,1.105,0.245,1.475,0.639c0.459-0.091,0.892-0.259,1.282-0.49c-0.151,0.472-0.472,0.867-0.888,1.117 c0.408-0.05,0.797-0.158,1.159-0.318C12.729,5.352,12.389,5.707,11.993,5.992z"></path></svg>
</a>
<a :href="'http://www.facebook.com/sharer.php?u='+ selectedEpisode.share_url" class="facebook" target="_popup" title="Share this episode on Facebook" @click.prevent="popup">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="nonzero" d="M8,0C3.582,0,0,3.582,0,8s3.582,8,8,8s8-3.582,8-8S12.418,0,8,0z M11,5h-1 C9.15,5,9,5,9,7h2v2H9v4H7V9H5V7h2c0-1.531,0-4,3-4h1V5z"></path></svg>
</a>
<a x-show="show.enable_downloads" class="download" :href="selectedEpisode.trackable_media_url + '?download=true&src=player'" title="Download MP3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill-rule="nonzero"><path d="M8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 Z M8,10 L10.8086603,7.34823529 C10.995515,7.17159909 11.0513724,6.90613005 10.9502159,6.67547475 C10.8490595,6.44481945 10.6107821,6.29433723 10.3463653,6.29411765 L8.87225476,6.29411765 L8.87225476,3.82352941 C8.87225476,3.36870668 8.481733,3 8,3 C7.518267,3 7.12774524,3.36870668 7.12774524,3.82352941 L7.12774524,6.29411765 L5.6536347,6.29411765 C5.38921794,6.29433723 5.15094053,6.44481945 5.04978408,6.67547475 C4.94862764,6.90613005 5.00448499,7.17159909 5.19133967,7.34823529 L8,10 Z M11.2,11 L4.8,11 C4.3581722,11 4,11.2238576 4,11.5 C4,11.7761424 4.3581722,12 4.8,12 L11.2,12 C11.6418278,12 12,11.7761424 12,11.5 C12,11.2238576 11.6418278,11 11.2,11 Z"></path></g></svg>
</a>
</div>
<div class="share-timestamp" x-show="!show.private_feed">
<input type="checkbox" x-model="timejump"><label>Start at</label><input type="text" placeholder="00:00" x-model="formattedTimestamp">
</div>
</div>
</div>
<div class="details panel" x-show="expandedPanel === 'more'" :class="{ expanded: expandedPanel === 'more' }"
x-transition:enter="transition-enter"
x-transition:enter-start="transition-enter-start"
x-transition:enter-end="transition-enter-end"
x-transition:leave="transition-leave"
x-transition:leave-start="transition-leave-start"
x-transition:leave-end="transition-leave-end">
<span class="close-btn" @click.prevent="closePanel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g transform="translate(1.000000, 1.000000)" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="11"></circle>
<line x1="13.828" y1="8.172" x2="8.172" y2="13.828"></line>
<line x1="8.172" y1="8.172" x2="13.828" y2="13.828"></line>
</g>
</g>
</svg>
</span>
<time class="details-date-time">
<strong x-text="selectedEpisode.formatted_published_at"></strong> •
<strong>Build and Learn</strong>
<span x-show="selectedEpisode.number || selectedEpisode.episode_type === 'trailer' || selectedEpisode.episode_type === 'bonus'">• </span>
<span x-show="selectedEpisode.episode_type === 'trailer'">Trailer</span>
<span x-show="selectedEpisode.episode_type === 'bonus'">Bonus</span>
<span x-show="selectedEpisode.number" x-text="`Episode ${selectedEpisode.number}`"></span>
<span x-show="show.multiple_seasons">
• <span x-text="`Season ${selectedEpisode.season}`"></span>
</span>
</time>
<div class="details-title" x-text="selectedEpisode.title"></div>
<div class="details-author">
<span x-text="`By ${selectedEpisode.author}`"></span>
<span x-show="selectedEpisode.transcript_url && !show.private_feed">
•
<a :href="selectedEpisode.transcript_url" target="_transcript" title="View Episode Transcript">Full Transcript</a>
</span>
<span x-show="show.website && !show.private_feed">
•
<a :href="show.website" target="_website" title="View Podcast Website">View the Website</a>
</span>
</div>
<div class="details-description" x-html="selectedEpisode.description"></div>
</div>
<span class="powered-by">
<a target="_new" title="Visit Transistor.fm - Podcast Hosting and Analytics" tabindex="10" href="https://transistor.fm">
<strong>Broadcast by</strong> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="547px" height="144px" viewBox="0 0 547 144" version="1.1" class="transistor-logo">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="transistor_horizontal" fill-rule="nonzero" fill="#FFFFFF">
<g id="Group" transform="translate(191.000000, 42.000000)">
<polygon id="Shape" points="0.7 10.4 0.7 1.8 38.6 1.8 38.6 10.4 24.5 10.4 24.5 58.3 14.7 58.3 14.7 10.4"></polygon>
<path d="M63.3,26.2 C62.1,26 60.7,25.8 58.7,25.8 C52.4,25.8 48.7,29.9 48.7,38.2 L48.7,58.2 L39.4,58.2 L39.4,18.6 L48.5,18.6 L48.5,24.2 L48.7,24.2 C50.5,20.8 54.5,17.3 59.8,17.3 C61.3,17.3 62.3,17.4 63.3,17.5 L63.3,26.2 L63.3,26.2 Z" id="Shape"></path>
<path d="M107.8,58.2 L98.8,58.2 L98.8,53.2 L98.6,53.2 C95.9,56.6 91.6,59.7 85,59.7 C76.1,59.7 66,52.6 66,38.4 C66,25.8 74.9,17.4 85.7,17.4 C92.3,17.4 96.3,20.9 98.7,24 L98.9,24 L98.9,18.6 L107.9,18.6 L107.9,58.2 L107.8,58.2 Z M87.4,51.5 C93.5,51.5 99.2,46.2 99.2,38.6 C99.2,30.6 94,25.3 87.5,25.3 C79.3,25.3 75.4,31.9 75.4,38.4 C75.4,45 79.2,51.5 87.4,51.5 Z" id="Shape"></path>
<path d="M118.6,18.6 L127.8,18.6 L127.8,23.6 L128,23.6 C131.1,19.1 135.7,17.3 140.1,17.3 C148.3,17.3 155.5,22.7 155.5,35.4 L155.5,58.2 L146.2,58.2 L146.2,35.9 C146.2,29.1 143,25.5 137.7,25.5 C131.9,25.5 127.9,29.6 127.9,37.3 L127.9,58.3 L118.6,58.3 L118.6,18.6 L118.6,18.6 Z" id="Shape"></path>
<path d="M183.6,28.8 C183.2,25.9 181,24 178.3,24 C175.1,24 173.3,26 173.3,28.2 C173.3,30.6 174.5,32.3 181.4,34.6 C189.9,37.3 192.9,41.7 192.9,47.3 C192.9,54.6 187.4,59.7 178.3,59.7 C168.8,59.7 164.1,54.5 163.4,47.1 L172,47.1 C172.4,50.4 174.4,52.9 178.5,52.9 C182,52.9 184,50.7 184,48 C184,45 182.3,43.1 175.7,40.9 C168.3,38.5 164.5,34.8 164.5,28.6 C164.5,22.1 169.6,17.3 178,17.3 C186.5,17.3 191,22.3 192,28.8 L183.6,28.8 L183.6,28.8 Z" id="Shape"></path>
<path d="M201,0.4 L211.3,0.4 L211.3,9.8 L201,9.8 L201,0.4 Z M201.5,18.6 L210.8,18.6 L210.8,58.3 L201.5,58.3 L201.5,18.6 Z" id="Shape"></path>
<path d="M239.5,28.8 C239.1,25.9 236.9,24 234.2,24 C231,24 229.2,26 229.2,28.2 C229.2,30.6 230.4,32.3 237.3,34.6 C245.8,37.3 248.8,41.7 248.8,47.3 C248.8,54.6 243.3,59.7 234.2,59.7 C224.7,59.7 220,54.5 219.3,47.1 L227.9,47.1 C228.3,50.4 230.3,52.9 234.4,52.9 C237.9,52.9 239.9,50.7 239.9,48 C239.9,45 238.2,43.1 231.6,40.9 C224.2,38.5 220.4,34.8 220.4,28.6 C220.4,22.1 225.5,17.3 233.9,17.3 C242.4,17.3 246.9,22.3 247.9,28.8 L239.5,28.8 L239.5,28.8 Z" id="Shape"></path>
<path d="M252.8,18.6 L257.8,18.6 L257.8,5.9 L267.1,5.9 L267.1,18.6 L277,18.6 L277,26.4 L267,26.4 L267,44.1 C267,49.5 268.7,51 272.5,51 C274.1,51 275.9,50.7 277.3,50.3 L277.3,57.8 C275.2,58.4 272.6,58.7 270.3,58.7 C260.4,58.7 257.8,52.7 257.8,44.6 L257.8,26.4 L252.8,26.4 L252.8,18.6 Z" id="Shape"></path>
<path d="M302.3,17.3 C314.7,17.3 323.5,26.4 323.5,38.4 C323.5,50.1 314.6,59.7 302.3,59.7 C290.2,59.7 281.1,50.4 281.1,38.4 C281.1,26.1 290.3,17.3 302.3,17.3 Z M302.3,51.4 C309.3,51.4 314.1,45.8 314.1,38.4 C314.1,31.4 309.6,25.5 302.3,25.5 C295.2,25.5 290.5,31 290.5,38.4 C290.5,46 295.9,51.4 302.3,51.4 Z" id="Shape"></path>
<path d="M350.9,25.8 C344.6,25.8 340.9,29.9 340.9,38.2 L340.9,58.2 L331.6,58.2 L331.6,18.6 L340.7,18.6 L340.7,24.2 L340.9,24.2 C342.7,20.8 346.7,17.3 352,17.3 C353.5,17.3 354.5,17.4 355.5,17.5 L355.5,26.2 C354.3,26 352.9,25.8 350.9,25.8 Z" id="Shape"></path>
</g>
<g id="Group">
<g transform="translate(24.000000, 24.000000)" id="Shape">
<path d="M48,95.9 C45.4,95.9 43.2,93.8 43.2,91.1 L43.2,4.9 C43.2,2.3 45.3,0.1 48,0.1 C50.6,0.1 52.8,2.2 52.8,4.9 L52.8,91.1 C52.8,93.7 50.6,95.9 48,95.9 Z"></path>
<path d="M28,52.8 L5,52.8 C2.4,52.8 0.2,50.7 0.2,48 C0.2,45.3 2.3,43.2 5,43.2 L28,43.2 C30.6,43.2 32.8,45.3 32.8,48 C32.8,50.7 30.6,52.8 28,52.8 Z"></path>
<path d="M91.1,52.8 L68,52.8 C65.4,52.8 63.2,50.7 63.2,48 C63.2,45.3 65.3,43.2 68,43.2 L91,43.2 C93.6,43.2 95.8,45.3 95.8,48 C95.8,50.7 93.7,52.8 91.1,52.8 Z"></path>
</g>
<path d="M72,144 C32.3,144 0,111.7 0,72 C0,32.3 32.3,0 72,0 C111.7,0 144,32.3 144,72 C144,111.7 111.7,144 72,144 Z M72,9.6 C37.6,9.6 9.6,37.6 9.6,72 C9.6,106.4 37.6,134.4 72,134.4 C106.4,134.4 134.4,106.4 134.4,72 C134.4,37.6 106.4,9.6 72,9.6 Z" id="Shape"></path>
</g>
</g>
</g>
</svg>
</a> </span>
</div>
</div>
</div>
</div>
</header>
<div class="container main" x-data="{ transcript: true }">
<aside>
<ul>
<li><time>August 21, 2023</time></li>
<li>by CJ Avilla, Colin Loretz</li>
<li><a target="_new" href="https://buildandlearn.dev">Visit Website</a></li>
</ul>
<div class="subscribe">
<a class="apple-podcasts" target="_new" title="Listen to Build and Learn on Apple Podcasts" href="https://podcasts.apple.com/us/podcast/build-learn/id1638387281">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#9933CC" viewBox="0 0 24 24"><title>Apple Podcasts</title><path d="M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z"></path></svg>
<label>
<span>Listen On</span>
<b>Apple Podcasts</b>
</label>
</a>
<a class="google" target="_new" title="Listen to Build and Learn on Google Podcasts" href="https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy50cmFuc2lzdG9yLmZtL2J1aWxkLWxlYXJu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>Google Podcasts</title><g fill="none"><path d="M64 238.545v34.91c0 17.673-14.327 32-32 32s-32-14.327-32-32v-34.91c0-17.673 14.327-32 32-32s32 14.327 32 32z" fill="#0066d9"></path><path d="M448.013 239.455a32.6 32.6 0 0 1-.013-.91c0-17.673 14.327-32 32-32s32 14.327 32 32c0 .304-.004.608-.013.91H512v34.909h-.013c-.48 17.252-14.618 31.09-31.987 31.09s-31.506-13.838-31.987-31.09H448v-34.91h.013z" fill="#4285f4"></path><path d="M174.545 343.273v34.909c0 17.673-14.326 32-32 32s-32-14.327-32-32v-34.91c0-17.672 14.327-32 32-32s32 14.328 32 32zM174.545 133.818V248h-.008c-.386 17.337-14.562 31.273-31.992 31.273S110.94 265.337 110.554 248h-.009V133.818c0-17.673 14.327-32 32-32s32 14.327 32 32z" fill="#ea4335"></path><path d="M337.455 168.727c0 17.673 14.326 32 32 32s32-14.327 32-32v-34.909c0-17.673-14.327-32-32-32s-32 14.327-32 32z" fill="#34a853"></path><path d="M224 66.91c0 17.672 14.327 32 32 32s32-14.328 32-32V32c0-17.673-14.327-32-32-32s-32 14.327-32 32zM224 445.09c0-17.672 14.327-32 32-32s32 14.328 32 32V480c0 17.673-14.327 32-32 32s-32-14.327-32-32z" fill="#fab908"></path><path d="M337.455 264.727c0-17.673 14.326-32 32-32s32 14.327 32 32v113.455c0 17.673-14.327 32-32 32s-32-14.327-32-32z" fill="#34a853"></path><path d="M288 162.91v186.18c0 17.674-14.327 32-32 32s-32-14.326-32-32V162.91c0-17.674 14.327-32 32-32s32 14.326 32 32z" fill="#fab908"></path></g></svg>
<label>
<span>Listen On</span>
<b>Google Podcasts</b>
</label>
</a>
<a class="spotify" target="_new" title="Listen to Build and Learn on Spotify" href="https://open.spotify.com/show/2bb1YeEn9GjuJCfIZqokww">
<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="#1DB954" viewBox="0 0 24 24"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"></path></svg>
<label>
<span>Listen On</span>
<b>Spotify</b>
</label>
</a>
<a class="rss" target="_new" title="Subscribe to Build and Learn via RSS" href="https://feeds.transistor.fm/build-learn">
<svg xmlns="http://www.w3.org/2000/svg" fill="#FFA500" viewBox="0 0 24 24"><title>RSS Feed</title><path d="M2.66666667,9.33333333 C1.19390733,9.33333333 0,10.5272407 0,12 C0,13.4727593 1.19390733,14.6666667 2.66666667,14.6666667 C6.348565,14.6666667 9.33333333,17.651435 9.33333333,21.3333333 C9.33333333,22.8060927 10.5272407,24 12,24 C13.4727593,24 14.6666667,22.8060927 14.6666667,21.3333333 C14.6666667,14.7059163 9.29408366,9.33333333 2.66666667,9.33333333 Z M2.66666667,18.6666667 C1.19390733,18.6666667 0,19.860574 0,21.3333333 C0,22.8060927 1.19390733,24 2.66666667,24 C4.139426,24 5.33333333,22.8060927 5.33333333,21.3333333 C5.33333333,19.860574 4.139426,18.6666667 2.66666667,18.6666667 Z M2.66666667,0 C1.19390733,0 0,1.19390733 0,2.66666667 C0,4.139426 1.19390733,5.33333333 2.66666667,5.33333333 C11.5032227,5.33333333 18.6666667,12.4967773 18.6666667,21.3333333 C18.6666667,22.8060927 19.860574,24 21.3333333,24 C22.8060927,24 24,22.8060927 24,21.3333333 C24,9.55125867 14.4487413,0 2.66666667,0 Z" id="Shape"></path></svg>
<label>
<span>Subscribe</span>
<b>RSS Feed</b>
</label>
</a> </div>
<div class="twitter">
<a class="twitter-follow-button" href="https://twitter.com/buildandlearn_" data-size="small" data-show-count="false">Follow @buildandlearn_</a>
<br>
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=I found a great episode of Build and Learn. Listen along here:" data-size="small">Tweet This</a>
</div>
</aside>
<article>
<nav class="episode-nav">
<h4 :class="{ 'active': !transcript }">
<a x-on:click.prevent="transcript = false" title="Episode Details" rel="nofollow" href="https://share.transistor.fm/s/5d0802da">Episode Details</a>
</h4>
<span> / </span>
<h4 :class="{ 'active': transcript }">
<a x-on:click.prevent="transcript = true" title="Episode Transcript" rel="nofollow" href="https://share.transistor.fm/s/5d0802da/transcript">Transcript</a>
</h4>
</nav>
<div x-show="!transcript">
<section class="episode-description">
<div>In this episode you'll hear about Colin's adventure of building a Google Calendar Discord bot using CloudFlare, mastering Google Calendar APIs, and navigating serverless Postgres with neon.tech. We'll also share our insights on the benefits of being part of Y Combinator, and the unexpected hiccups we faced with Rails' Turbo Streams. Dive in and learn from our experiences!<br><br>Resources:<br><br>* https://neon.tech/<br>* Jason's tweet: https://twitter.com/jmcharnes/status/1687286039356829698 <br>* Cloudflare Worker docs: https://developers.cloudflare.com/workers/<br>* Jumpstart Pro starter kit for Ruby on Rails: https://jumpstartrails.com/<br>* Turbo Streams documentation: https://turbo.hotwired.dev/handbook/streams<br>* YCombinator: https://www.ycombinator.com/<br>* Google Calendar API docs: https://developers.google.com/calendar/api/guides/overview <br>* Microsoft Startup program for credits: https://www.microsoft.com/en-us/startups</div>
</section>
<section class="episode-people">
<h4>Creators & Guests</h4>
<div class="people">
<div class="person">
<div class="person-avatar">
<img class="person-image" src="https://images.transistor.fm/file/transistor/images/person/92625531-81e9-4944-b3c4-726f7c3869c3/thumb_1666966686-image.jpg" />
<div class="person-role">Host</div>
</div>
<div class="person-details">
<div class="person-name">CJ Avilla</div>
<div class="person-bio">Developer Advocate @StripeDev. Veteran. 📽 https://t.co/2UI0oEAnFK. Building with Ruby, Rails, JavaScript</div>
<div class="person-links">
<a title="View on Twitter" target="_twitter" href="https://twitter.com/cjav_dev">
<svg viewBox="0 -56.9824 36.0059 29.2383"><path d="M31.6992,-52.3535q1.14258,-0.673828 1.97754,-1.72852q0.834961,-1.05469 1.27441,-2.34375q-1.08398,0.615234 -2.25586,1.06934q-1.17188,0.454102 -2.46094,0.688477q-0.996094,-1.05469 -2.3877,-1.68457q-1.3916,-0.629883 -2.97363,-0.629883q-1.55273,0 -2.87109,0.556641q-1.34766,0.585938 -2.3584,1.59668q-1.01074,1.01074 -1.59668,2.3291q-0.556641,1.34766 -0.556641,2.87109q0,0.439453 0.0439453,0.864258q0.0439453,0.424805 0.131836,0.834961q-2.28516,-0.117188 -4.45312,-0.703125q-2.13867,-0.585938 -4.07227,-1.58203q-1.93359,-0.996094 -3.63281,-2.37305q-1.66992,-1.37695 -3.04688,-3.04688q-0.46875,0.820312 -0.732422,1.75781q-0.263672,0.9375 -0.263672,1.96289q0,1.93359 0.893555,3.54492q0.893555,1.61133 2.3877,2.60742q-0.908203,-0.0292969 -1.75781,-0.27832q-0.849609,-0.249023 -1.58203,-0.65918v0.0878906q0,1.34766 0.439453,2.54883q0.46875,1.20117 1.25977,2.16797q0.791016,0.966797 1.875,1.61133q1.08398,0.673828 2.34375,0.9375q-0.46875,0.117188 -0.952148,0.175781q-0.483398,0.0585938 -0.981445,0.0585938q-0.380859,0 -0.717773,-0.0292969q-0.336914,-0.0292969 -0.65918,-0.0878906q0.351562,1.08398 1.02539,2.02148q0.644531,0.9375 1.55273,1.61133q0.908203,0.673828 1.99219,1.08398q1.11328,0.380859 2.31445,0.410156q-0.9375,0.732422 -1.99219,1.31836q-1.08398,0.585938 -2.24121,0.996094q-1.15723,0.410156 -2.3877,0.615234q-1.23047,0.234375 -2.51953,0.234375q-0.439453,0 -0.878906,-0.0292969q-0.439453,-0.0292969 -0.878906,-0.0878906q1.23047,0.791016 2.57812,1.40625q1.31836,0.615234 2.75391,1.04004q1.43555,0.424805 2.92969,0.65918q1.49414,0.205078 3.07617,0.205078q5.09766,0 8.99414,-1.9043q3.92578,-1.9043 6.5918,-4.92188q2.66602,-3.01758 4.04297,-6.76758q1.37695,-3.7207 1.37695,-7.38281q0,-0.234375 -0.0146484,-0.46875q-0.0146484,-0.234375 -0.0146484,-0.46875q1.08398,-0.761719 2.02148,-1.74316q0.9375,-0.981445 1.66992,-2.06543q-1.05469,0.410156 -2.12402,0.703125q-1.06934,0.292969 -2.18262,0.410156Z"></path></svg>
</a> <a title="View on LinkedIn" target="_linkedIn" href="https://www.linkedin.com/in/cjavilla/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
</a> <a title="View on Website" target="_website" href="http://cjav.dev">
<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path></svg>
</a> </div>
</div>
</div>
<div class="person">
<div class="person-avatar">
<img class="person-image" src="https://images.transistor.fm/file/transistor/images/person/0334862f-ac78-4f8d-b552-1f3a081c8b81/thumb_1666966740-image.jpg" />
<div class="person-role">Host</div>
</div>
<div class="person-details">
<div class="person-name">Colin Loretz</div>
<div class="person-bio">I like to build software and communities. Building software at @orbitmodel 🪐 Coworking at @renocollective 🎙Sharing software learnings on @buildandlearn_</div>
<div class="person-links">
<a title="View on Twitter" target="_twitter" href="https://twitter.com/colinloretz">
<svg viewBox="0 -56.9824 36.0059 29.2383"><path d="M31.6992,-52.3535q1.14258,-0.673828 1.97754,-1.72852q0.834961,-1.05469 1.27441,-2.34375q-1.08398,0.615234 -2.25586,1.06934q-1.17188,0.454102 -2.46094,0.688477q-0.996094,-1.05469 -2.3877,-1.68457q-1.3916,-0.629883 -2.97363,-0.629883q-1.55273,0 -2.87109,0.556641q-1.34766,0.585938 -2.3584,1.59668q-1.01074,1.01074 -1.59668,2.3291q-0.556641,1.34766 -0.556641,2.87109q0,0.439453 0.0439453,0.864258q0.0439453,0.424805 0.131836,0.834961q-2.28516,-0.117188 -4.45312,-0.703125q-2.13867,-0.585938 -4.07227,-1.58203q-1.93359,-0.996094 -3.63281,-2.37305q-1.66992,-1.37695 -3.04688,-3.04688q-0.46875,0.820312 -0.732422,1.75781q-0.263672,0.9375 -0.263672,1.96289q0,1.93359 0.893555,3.54492q0.893555,1.61133 2.3877,2.60742q-0.908203,-0.0292969 -1.75781,-0.27832q-0.849609,-0.249023 -1.58203,-0.65918v0.0878906q0,1.34766 0.439453,2.54883q0.46875,1.20117 1.25977,2.16797q0.791016,0.966797 1.875,1.61133q1.08398,0.673828 2.34375,0.9375q-0.46875,0.117188 -0.952148,0.175781q-0.483398,0.0585938 -0.981445,0.0585938q-0.380859,0 -0.717773,-0.0292969q-0.336914,-0.0292969 -0.65918,-0.0878906q0.351562,1.08398 1.02539,2.02148q0.644531,0.9375 1.55273,1.61133q0.908203,0.673828 1.99219,1.08398q1.11328,0.380859 2.31445,0.410156q-0.9375,0.732422 -1.99219,1.31836q-1.08398,0.585938 -2.24121,0.996094q-1.15723,0.410156 -2.3877,0.615234q-1.23047,0.234375 -2.51953,0.234375q-0.439453,0 -0.878906,-0.0292969q-0.439453,-0.0292969 -0.878906,-0.0878906q1.23047,0.791016 2.57812,1.40625q1.31836,0.615234 2.75391,1.04004q1.43555,0.424805 2.92969,0.65918q1.49414,0.205078 3.07617,0.205078q5.09766,0 8.99414,-1.9043q3.92578,-1.9043 6.5918,-4.92188q2.66602,-3.01758 4.04297,-6.76758q1.37695,-3.7207 1.37695,-7.38281q0,-0.234375 -0.0146484,-0.46875q-0.0146484,-0.234375 -0.0146484,-0.46875q1.08398,-0.761719 2.02148,-1.74316q0.9375,-0.981445 1.66992,-2.06543q-1.05469,0.410156 -2.12402,0.703125q-1.06934,0.292969 -2.18262,0.410156Z"></path></svg>
</a> <a title="View on LinkedIn" target="_linkedIn" href="https://www.linkedin.com/in/colinloretz/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
</a> <a title="View on Website" target="_website" href="http://colinloretz.com">
<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path></svg>
</a> </div>
</div>
</div>
</div>
</section>
<section class="show-description">
<h4>What is Build and Learn?</h4>
<p>A podcast about software development and developing ourselves as software engineers. Hosted by CJ Avilla and Colin Loretz.</p>
</section>
</div>
<section class="episode-description" x-show="transcript">
<p>CJ: Welcome to build and learn.</p>
<p>My name is CJ.</p>
<p>Colin: And I'm Colin and today we
<br />are catching up on some things that</p>
<p>we've been working on, some things
<br />that we've been learning recently.</p>
<p>Good to see you again, CJ.</p>
<p>CJ: Yeah.</p>
<p>Likewise.</p>
<p>Likewise.</p>
<p>We're just talking about
<br />Zencaster here and I use the Opal</p>
<p>camera as like my main webcam.</p>
<p>And over the past couple of weeks, it's
<br />been doing this really annoying thing</p>
<p>where every time I start a new call, I
<br />have to unplug it and plug it back in.</p>
<p>And someone told me that there was like a
<br />firmware update that bricked their camera.</p>
<p>And so now I'm just like terrified
<br />to do any updates or anything, but.</p>
<p>yeah, it's I don't know.</p>
<p>what, what webcam do you use?</p>
<p>Colin: That is rough.</p>
<p>yeah, so right now I'm actually using
<br />a 12 year old webcam because, I have a</p>
<p>scarlet solo that's running my XLR mic
<br />and it cannot be plugged into the Mac</p>
<p>while also plugging in a cam link for my,
<br />cause I usually use a Sony, what is this?</p>
<p>A Sony A1000 or something like that.</p>
<p>A, it's one of those like
<br />a point and shoot cameras.</p>
<p>It's not like a full DSLR
<br />and, totally feel you there.</p>
<p>Like I have a MacBook pro that should
<br />be able to handle all this stuff.</p>
<p>I have one of the CalDigit hubs,
<br />which I bought because I was told</p>
<p>that it will handle all this stuff.</p>
<p>And, USB gets a little weird
<br />when you go through powered and</p>
<p>unpowered hubs and all of this.</p>
<p>And there's another tool that I've
<br />got the Elgato stream deck that</p>
<p>is sitting here and I think it's
<br />bricked like when I plug it in and</p>
<p>I ran some like terminal commands, it
<br />shows up, but it doesn't show up as.</p>
<p>A stream deck.</p>
<p>It just shows up as like this
<br />very specific hardware number.</p>
<p>And so I reached out to support.</p>
<p>Cause I was like, I
<br />don't know what happened.</p>
<p>there's no factory reset button.</p>
<p>There's no, it doesn't
<br />show up in my machine.</p>
<p>And I don't, I think this is like
<br />a thing I've been thinking about a</p>
<p>lot lately is I have a lot of old
<br />tech that I don't have easy ways</p>
<p>of disposing in a responsible way.</p>
<p>And I don't want the stream deck to just
<br />become a part of that like I actually</p>
<p>want to use it And I don't want to go
<br />buy another one and then have this one</p>
<p>that's sitting here bricked if it can be
<br />fixed so i've been trying to lean into</p>
<p>the fixing things that I have and making
<br />use of them versus buying new things,</p>
<p>but I definitely have a drawer of things
<br />with batteries in them and old, Old</p>
<p>fitness bands and old Android phones.</p>
<p>And I have a windows phone and a
<br />Facebook phone, all these things</p>
<p>that don't even work anymore.</p>
<p>because they were like failed projects.</p>
<p>CJ: The graveyard of electronics.</p>
<p>There's just like a drawer that's
<br />got the label on it, like cell</p>
<p>phone graveyard or something.</p>
<p>Colin: Yeah.</p>
<p>You probably have the same problem,
<br />but I have More cables than I</p>
<p>know what to do with as well.</p>
<p>And so I'm trying to figure out, like,
<br />how many USBC cables do you really need?</p>
<p>How many, cables, as soon as you get
<br />rid of it, you're going to realize</p>
<p>it was like a proprietary cable that
<br />you needed for some specific thing.</p>
<p>but just having less of those things.</p>
<p>And we've been trying to figure out, can
<br />we do like a repair slash e waste, like</p>
<p>recycling event at the coworking space?</p>
<p>Just because I know this is like
<br />something a lot of people have.</p>
<p>I also don't necessarily want
<br />to fix everyone's things, but.</p>
<p>There's some things where we can be like,
<br />Oh yeah, that's definitely dead on arrival</p>
<p>and let's recycle it in a good way.</p>
<p>and unfortunately, like most of the
<br />ways of doing that in Reno have closed.</p>
<p>So it's an interesting thing
<br />where it's we want to be more.</p>
<p>environmentally conscious and aware
<br />and yet it's not made easy to do that.</p>
<p>So</p>
<p>CJ: Yeah.</p>
<p>It's interesting because I feel like
<br />it is, the path of least resistance</p>
<p>is just throw it in the trash
<br />and like it ends up in a landfill</p>
<p>and causes all kinds of issues.</p>
<p>And to do any sort of responsible.</p>
<p>Disposal of any
<br />electronics is such a pain.</p>
<p>I think Best Buy at some time,
<br />at some point had a program</p>
<p>where you could throw stuff away.</p>
<p>They had an e waste thing, but I know like</p>
<p>Colin: them and Target do.</p>
<p>that might be an option for us.</p>
<p>CJ: nice.</p>
<p>We had a local, our local dump
<br />here in Bedford, New Hampshire</p>
<p>has a community e waste day.</p>
<p>It's once I want to say it's like once
<br />a month or something a lot of people</p>
<p>here don't have their trash picked up.</p>
<p>There's like private companies, like
<br />third parties, you can hire to come pick</p>
<p>your trash up, but most people just bring
<br />their own trash to the transfer center.</p>
<p>And so it's a little bit
<br />different where like we have.</p>
<p>A community run dump where you go and
<br />there's a lion's club sponsored bin where</p>
<p>you can put your clean plastic bags.</p>
<p>And there's a, place where you can put all
<br />your yard waste and there's a place where</p>
<p>you can put, your food scraps and they do
<br />certain things with the food scrap stuff.</p>
<p>it's I don't know.</p>
<p>I liked that when we got here,
<br />it was, definitely different</p>
<p>from coming from big cities where
<br />there's just waste management,</p>
<p>Colin: it's more intentional it sounds
<br />like too, like you know where it's</p>
<p>going to end up versus A lot of that
<br />stuff just ends up in the same trash</p>
<p>can we have single stream here and you
<br />know The argument is that most of the</p>
<p>recycling that gets doesn't get recycled
<br />It ends up in a landfill somewhere or</p>
<p>sold to another country and then becomes
<br />their problem Which is the weirdest</p>
<p>thing I think we made out of Recycling.</p>
<p>CJ: Yeah.</p>
<p>we were one of the topics that we had on
<br />the slate today was to talk about money,</p>
<p>but we're thinking maybe we'll just tease
<br />an episode and tell you that in a future</p>
<p>episode, we will be talking about money.</p>
<p>We want to just share, our own
<br />experience and our own thoughts</p>
<p>around how we're using money.</p>
<p>but if you have ideas about what specific
<br />money topics you might be interested in</p>
<p>hearing, please hit us up, let us know so
<br />that we can talk about those on the show.</p>
<p>So stay tuned for that,</p>
<p>Colin: I think framing the money thing
<br />into the build and learn, like with a</p>
<p>build and learn lens will be interesting
<br />too, because I think you and I both</p>
<p>talked about wanting to bootstrap things.</p>
<p>We've worked at Startups that are
<br />venture backed we've worked in now</p>
<p>I can now say that I've also now I'm
<br />in a larger startup like later stage</p>
<p>startup where, money in stocks and
<br />benefits and all the things that go along</p>
<p>with those are they're all different.</p>
<p>And freelancing and start small
<br />stage startups and tech stars</p>
<p>and YC startups, all these
<br />different things are so different.</p>
<p>And so I think we, it'll be interesting
<br />to talk about like how some of that's</p>
<p>been different over the years for us too.</p>
<p>And, I don't know if we mentioned
<br />it on the show, but I used to do it</p>
<p>podcasts about getting out of debt.</p>
<p>And so we can definitely touch on that
<br />in that episode too, when we get there.</p>
<p>looking forward to that, but, promise that
<br />the show is not going to become like a.</p>
<p>whatever CJ and Colin want to talk
<br />about today, we are still trying to</p>
<p>frame it under the, build and learn.</p>
<p>And, that is going to encompass
<br />things that touch us as software</p>
<p>developers, but also as we start
<br />to just develop our careers even</p>
<p>more, like where does that take us?</p>
<p>And, and definitely curious what
<br />you're wondering about if you're</p>
<p>listening to this, so let us know.</p>
<p>CJ: Yeah, it's a, I think it's like
<br />when we talk about money in personal</p>
<p>finances and we talk, even when we
<br />talk about weight loss or we've talked</p>
<p>about your sort of like running stuff
<br />and we've talked about vacationing and</p>
<p>taking breaks, like all of this is.</p>
<p>Also definitely related to personal
<br />development and you're building your</p>
<p>own life that you want to experience.</p>
<p>And a lot of it comes back to like
<br />our careers as software developers</p>
<p>and engineers, but we're doing it so
<br />that we can have these awesome lives.</p>
<p>Colin: I think we often put a lot of
<br />that off like an early career, right?</p>
<p>We figure we can catch up later
<br />and it's like catching up on</p>
<p>health, extremely difficult.</p>
<p>Catching up on money and things
<br />like that also can be a challenge.</p>
<p>yeah, I think there's a lot that we can.</p>
<p>either worn against, but also not
<br />necessarily give it financial advice.</p>
<p>this worked for us.</p>
<p>This didn't work for us.</p>
<p>Things we would do.</p>
<p>I actually think about this a lot
<br />when I think about could I ever go</p>
<p>back to consulting and freelancing?</p>
<p>And I don't know, I don't know if I
<br />could, I would do it very differently,</p>
<p>which might be a whole other episode.</p>
<p>And then I was just listening to the
<br />latest episode of Build Your Sass from,</p>
<p>and Justin Jackson was interviewing
<br />Paul Jarvis, or they were doing a</p>
<p>catch up, much like we are, just
<br />because they hadn't talked in a while.</p>
<p>and that got me rethinking again
<br />about this whole idea of the</p>
<p>episode was like gaining freedom
<br />by building an indie business.</p>
<p>And it's still something that's swirling
<br />around in my head, all the time.</p>
<p>And it plays a lot into money.</p>
<p>So maybe we'll save that
<br />for that episode as well.</p>
<p>CJ: Yeah, it's interesting too.</p>
<p>I saw Jason Charns, from
<br />the remote Ruby podcast.</p>
<p>He just tweeted, I've been
<br />building my side project for six</p>
<p>years and I just am so tired.</p>
<p>Like I just want it to work.</p>
<p>And man, everyone in the comments was
<br />resonating so hard with that because</p>
<p>I think a lot of people, especially
<br />in tech are dreaming about having</p>
<p>an indie side hustle that, takes
<br />over and gives them independence.</p>
<p>And that might be fun to get into.</p>
<p>Also, it'd be cool to have
<br />Jason come on the show.</p>
<p>,
<br />Colin: me more about this
<br />weight loss challenge</p>
<p>CJ: Oh yeah.</p>
<p>Okay.</p>
<p>I almost skipped over it, but
<br />yeah, so I broke my ankle.</p>
<p>We've talked about this on the show.</p>
<p>now it was probably like 20 months
<br />ago or something and it's still</p>
<p>sore, but, I was looking at my
<br />fitness pal and just like my general</p>
<p>weight and I gained over 20 pounds.</p>
<p>After I broke my ankle and it was
<br />just like hung around since then.</p>
<p>And I am trying to get like more
<br />intentional about losing that extra</p>
<p>weight, for a bunch of reasons.</p>
<p>but yeah, mainly it's just I want to be at
<br />a healthy weight and feel, feel like I'm.</p>
<p>Able to run around and jump and, jump
<br />out of the back of the truck when</p>
<p>I'm going to the dump or whatever.</p>
<p>And just not have my knees, like
<br />given out things, just like playing</p>
<p>with the kids and also being able to
<br />sleep better and things like that.</p>
<p>So this weight loss challenge was,
<br />it's actually organized by someone</p>
<p>that's in a Peloton dads group.</p>
<p>So it's like a super
<br />niche inside of a niche.</p>
<p>It's like dads who want to lose
<br />weight, who are also into Peloton,</p>
<p>who are also like on this one,
<br />like Facebook group or whatever.</p>
<p>But, the way that it's set
<br />up, I think is really good.</p>
<p>And the way that it was presented is.</p>
<p>pretty powerful.</p>
<p>there's these statistics about how
<br />likely you are to actually accomplish</p>
<p>something depending on, a bunch of
<br />factors related to accountability.</p>
<p>So if you just have an idea, you're
<br />maybe 5% likely to do something.</p>
<p>If you say, if you tell someone you're
<br />going to do something, you're maybe 10%.</p>
<p>If you have a plan, you like jumps to 40%
<br />and then if you have a specific plan that</p>
<p>you're going to do something by a specific
<br />date and you have someone who's going to</p>
<p>hold you accountable, then you're like
<br />95% likely to achieve some, some goal.</p>
<p>And the program is in, it's done
<br />in eight week sessions or eight</p>
<p>week cohorts and everyone comes up
<br />with smart goals in the beginning.</p>
<p>those are, specific, measurable,
<br />attainable, realistic, and time bound.</p>
<p>And, you've got to say, I'm going
<br />to lose this much weight by eating</p>
<p>the, this many calories per day and.</p>
<p>Exercising at least five days a
<br />week and whatever, come up with the</p>
<p>five different rules for yourself.</p>
<p>And then you're put into these
<br />little small groups where you have</p>
<p>a thread, a text thread with other.</p>
<p>Dad's from the group and every
<br />single day you're sending each other.</p>
<p>This is like a picture of
<br />what I'm eating right now.</p>
<p>And then, a snapshot of your,
<br />like my fitness pal diary with</p>
<p>here's the food that I ate today.</p>
<p>And, I'm over or, Oh, I'm under.</p>
<p>And it's been really cool to like,
<br />just get the support and accountability</p>
<p>from these other people who are going
<br />through the same thing and, making</p>
<p>suggestions like, Oh, Hey, I would like.</p>
<p>go from two tortillas to one tortilla,
<br />or like I would, try, swapping out</p>
<p>your milk in your latte to this other
<br />milk or whatever, like just like little</p>
<p>kind of things that people, are able
<br />to help you out with, and so I've,</p>
<p>I don't know, I'm pumped about it.</p>
<p>Right now I am 245 pounds and so we can
<br />check in, we can check in eight weeks</p>
<p>and you can hold me accountable too.</p>
<p>So I'm trying to lose
<br />15 pounds so we'll see</p>
<p>Colin: it's out there on the show now.</p>
<p>CJ: yeah, so we'll see,</p>
<p>Colin: I really liked that from,
<br />we've done a lot of work with like</p>
<p>atomic habits from James clear and.</p>
<p>It's a good book.</p>
<p>I think like the, if you're interested in
<br />this kind of stuff, like listening to an</p>
<p>interview with him on a podcast, like the
<br />ground up show has a really good podcast,</p>
<p>with him, where it's just very inspiring.</p>
<p>And one of my favorite quotes
<br />by him is you do not rise</p>
<p>to the level of your goals.</p>
<p>You fall to the level of your systems
<br />is that you have this system, right?</p>
<p>Of people that you're checking in
<br />with, they are checking in with you.</p>
<p>You all agree that you're
<br />going to share to that.</p>
<p>channel and it helps.</p>
<p>And I think a lot of people
<br />try to get through these goals</p>
<p>with like by sheer willpower.</p>
<p>And at the end of the day after
<br />all the work and all the meetings</p>
<p>and all the things you got to do
<br />and you're all the life things like</p>
<p>your willpower is pretty tapped.</p>
<p>And then it's easy to, be like, Oh, I
<br />have this goal, but I want to do that.</p>
<p>And so having a system in place
<br />where you cannot fall below</p>
<p>that level is super powerful.</p>
<p>And, Yeah, that's awesome and
<br />happy to help hold you accountable.</p>
<p>I think for me, I've always
<br />struggled with like consistency.</p>
<p>Like I'll do my running or I'll
<br />start, doing kettlebells or something,</p>
<p>but then I like completely fall
<br />off the wagon or hurt myself or get</p>
<p>obsessed with some other fascination.</p>
<p>and that 1% every, better every day
<br />type of thing, adds up over time.</p>
<p>CJ: totally, yeah.</p>
<p>Is there something that you're working
<br />on right now or are you, you're</p>
<p>in like the resetting phase or do
<br />you have anything on the horizon,</p>
<p>whether it's fitness or otherwise?</p>
<p>Colin: for me it's just wanting to get a
<br />better sense of like, when I'm done with</p>
<p>work, turning off the screens, not then
<br />going home, and then sitting in front of</p>
<p>the second screen, and falling into like
<br />video games and things, hikes, spikes.</p>
<p>running, whatever it is, just
<br />getting out a little bit more.</p>
<p>So no specific goal or anything right now,
<br />but, just, I think like my last job, I</p>
<p>was just, and it was not the work's fault.</p>
<p>It was me and pressure I put
<br />on myself, but I didn't really</p>
<p>have a, my brain never stopped.</p>
<p>So I was always, because we were.</p>
<p>So remote and distributed
<br />like all around the world.</p>
<p>Like I would wake up to
<br />all these notifications.</p>
<p>I go to bed with the other team
<br />waking up and it was like, I never</p>
<p>felt like I was stopping work.</p>
<p>Um, and changing jobs and then focusing
<br />on making sure that five, six o'clock,</p>
<p>whatever, depending on what I did
<br />that day, it's time to go outside.</p>
<p>Time to go do something.</p>
<p>CJ: Yeah, absolutely.</p>
<p>I think in the last episode you talked
<br />about the discord app that you're building</p>
<p>on cloudflare workers for Google calendar.</p>
<p>Is this the same one that
<br />you're working on now?</p>
<p>Colin: it is.</p>
<p>Yeah.</p>
<p>So I've been playing with the calendar
<br />API Learning that all the different</p>
<p>things that cloudflare workers can do
<br />they're very similar to lambdas aws</p>
<p>lambdas but I find myself like now
<br />i'm now that i'm doing google calendar</p>
<p>I think we I don't know if we talked
<br />about this on show or post show last</p>
<p>week But like i'm working on how to get
<br />reminders for when you have a meeting</p>
<p>like we're recording this podcast.</p>
<p>I want to get A DM like a minute or
<br />two before the meeting to say like</p>
<p>meeting with CJ or podcast time.</p>
<p>And there's a bunch involved there
<br />with talking to the API, storing the</p>
<p>upcoming events, making sure that
<br />none of those events have changed.</p>
<p>If you like subscribing to webhooks for
<br />creating, editing and deleting events.</p>
<p>and then having some sort of
<br />cron that goes and checks every</p>
<p>minute to see if there's like an
<br />event happening in two minutes.</p>
<p>But you also don't want to send
<br />a notification more than once.</p>
<p>So there's a whole bunch of stuff
<br />there that like, I feel like I'm</p>
<p>building a calendar app, even though
<br />I'm syncing with a calendar app.</p>
<p>So it's been interesting.</p>
<p>CJ: Yeah.</p>
<p>We were talking about how that, like that
<br />problem is actually pretty common, right?</p>
<p>there's an event that's coming up,
<br />whether that's a booking, like an</p>
<p>Airbnb booking or that you need to send
<br />guests communication before, during</p>
<p>and after the booking or a paint Job,
<br />like we're dealing with a craft work</p>
<p>where like the paint jobs coming up
<br />and we want to send people certain like</p>
<p>nurture emails up into, up to the day
<br />that we start painting in this case.</p>
<p>It's a, I think in your case,
<br />it's much more granular.</p>
<p>And so like the room for error is smaller
<br />because you want to send it like, boom,</p>
<p>like two minutes right before the thing
<br />starts, whereas ours might be like</p>
<p>hours before and, or even days before.</p>
<p>And do you have a sense for
<br />the direction that you're.</p>
<p>Solving, like how you're gonna
<br />solve it, what you're storing and</p>
<p>Colin: well, the thing that's interesting.</p>
<p>I was like, oh, I need to
<br />store all these events.</p>
<p>And I'm like, I actually only
<br />need to store today's events.</p>
<p>Because I don't really
<br />care about tomorrow.</p>
<p>Because I can't I'm not going
<br />to alert on tomorrow yet.</p>
<p>And so I think and I need to write
<br />this out first, but I think I'm going</p>
<p>to have like, when you first off
<br />you subscribe to The calendars, you</p>
<p>actually do get new events, but you
<br />don't automatically, you didn't have</p>
<p>to go get all the existing events.</p>
<p>So I show you the
<br />existing events for today.</p>
<p>Anyway, I also want to subscribe to event
<br />changes in case any of them are canceled,</p>
<p>move, whatever changes happen, right?</p>
<p>If a meeting moves to right now,
<br />then we'll probably miss that one.</p>
<p>But Oh, like those edge cases, I'm
<br />not going to try to catch necessarily.</p>
<p>But I don't think it should
<br />be much of an issue there.</p>
<p>The thing that's interesting is
<br />for me, coming from I've worked</p>
<p>with lambdas before and I like
<br />the way Cloudflare workers work.</p>
<p>You have a server that has
<br />got like a really small route.</p>
<p>You can have multiple routes to it,
<br />but you can't run, like you have to</p>
<p>run a different worker to do your cron.</p>
<p>And so you have to create like a queue
<br />that all of these are connected to.</p>
<p>And so then one worker can.</p>
<p>Send a message on the queue, then
<br />the other worker can go process it.</p>
<p>Or you can have another worker that's
<br />just croning to do the checking to</p>
<p>see if you need to tell anybody.</p>
<p>And then you need to have a
<br />database or like a key value</p>
<p>store between all of these.</p>
<p>And so right now I've got, I'm using
<br />Cloudflare's KV store for who you are</p>
<p>and who you are connected to in Google.</p>
<p>And then I'm using Postgres.</p>
<p>right now I'm using this really cool new.</p>
<p>Company called neon dot tech.</p>
<p>and they've got an integration of
<br />cloudflare, which is how I found them.</p>
<p>But it's like a It's a postgres
<br />serverless postgres design for</p>
<p>Distributed serverless apps.</p>
<p>and so it's really cool to see like
<br />Innovation still happening in this world</p>
<p>where, I used to love Heroku and how
<br />easy it was to, throw a database onto it.</p>
<p>But surprisingly, you don't
<br />see anyone recommending Heroku</p>
<p>for anything these days, right?</p>
<p>You don't see in the dev docs,
<br />like, how to spin up a Heroku</p>
<p>app with a Heroku database.</p>
<p>It's here's CloudFlare, here's
<br />Fly, here's Render, here's</p>
<p>literally everything but Heroku.</p>
<p>So I think that's a sad state
<br />of the world, especially from</p>
<p>how we're like the two of us.</p>
<p>I know we, we grew alongside
<br />of Heroku for so long.</p>
<p>CJ: I think, it's sad.</p>
<p>I still have some old stuff on
<br />Heroku, but all the new stuff seems</p>
<p>to be running pretty well for me,
<br />at least on Vercel and render.</p>
<p>So fingers crossed.</p>
<p>Yeah.</p>
<p>We'll keep, using that, but
<br />neon tech detect that sounds,</p>
<p>is it similar to super base or</p>
<p>Colin: so like super base is more for,
<br />if I understand correctly, like more</p>
<p>like a Firebase, this is just Postgres.</p>
<p>So you can, you run this issue when
<br />you're doing serverless where you might</p>
<p>have lots of instances of a worker
<br />connected into a Postgres and you run</p>
<p>into connect too many connections.</p>
<p>So you have to do connection pooling.</p>
<p>There's like all of these things
<br />where it's I just wanted to build</p>
<p>this little Google calendar app
<br />and I am now dealing with, at.</p>
<p>I'm also preemptively thinking
<br />about lots of people using it.</p>
<p>So a little bit of preemptive scaling
<br />here, but you can't have lots and</p>
<p>lots of workers connecting to a
<br />Postgres without connection pooling</p>
<p>and thinking about that, even if it's.</p>
<p>for a second to go check.</p>
<p>And even right now, I'm like, okay, if
<br />you ask what events do you have today,</p>
<p>I'm just going to go talk to Google
<br />and return what events you have today.</p>
<p>I'm not going to go store that
<br />and try to keep that in sync.</p>
<p>I only am storing events
<br />for notifications.</p>
<p>I would love if Google could tell me
<br />that an event is happening, but then you</p>
<p>run into also like you might miss it.</p>
<p>You might.</p>
<p>You know get it on accident.</p>
<p>There's a bunch of reasons probably why
<br />they don't do that The cool thing that I</p>
<p>like about neon though is that they have
<br />this idea where you create one database</p>
<p>and you can branch it So it's probably
<br />similar to having a dev and a staging</p>
<p>and a production But like I have one
<br />database that has a dev branch a staging</p>
<p>branch and a production branch and they
<br />all have different connection URLs and</p>
<p>you can have, I don't know technically
<br />if it's the same database under the</p>
<p>hood or what's going on there, but it
<br />makes it really easy to like branch</p>
<p>in a situation, create a new timeline
<br />and then revert over to it, backup,</p>
<p>restore to that branch, things like
<br />that as a database too, which is cool.</p>
<p>CJ: That's cool.</p>
<p>Yeah.</p>
<p>Planet scale.</p>
<p>So we use planet scale, as the
<br />backing for our next JS site.</p>
<p>And it also has that branching
<br />feature, which was new to me.</p>
<p>It was like the first time I'd seen that.</p>
<p>yeah, I think planet
<br />scale is my SQL though.</p>
<p>It's not Postgres and I love Postgres, so
<br />I am definitely intrigued by, This neon.</p>
<p>tech, I'm sad to see that they
<br />don't have rails on their guides.</p>
<p>They have Prisma, Django, Go, Hasura.</p>
<p>They have Laravel and Next.</p>
<p>js and they don't have rails.</p>
<p>They need a rails guide here.</p>
<p>Come on neon.</p>
<p>But,</p>
<p>Colin: I think I understand why someone
<br />would not necessarily pick rails like</p>
<p>in a world for very much like most of
<br />the serverless stuff is not in rails.</p>
<p>That's probably why.</p>
<p>CJ: So it sounds like the problem
<br />that I always wondered about too, with</p>
<p>serverless and these edge functions
<br />was like, at some point you have to</p>
<p>go back and talk to the database.</p>
<p>So maybe neon is abstracting over that
<br />and making it so that you can have.</p>
<p>A database closer to,</p>
<p>Colin: Yeah, that part I'm
<br />not thinking about too much.</p>
<p>I'm using the KV store, the key
<br />value store for the, who you</p>
<p>are, because I need it to be
<br />everywhere and fast and accessible.</p>
<p>The Postgres, because it's mostly
<br />going to be in backgrounds,</p>
<p>I'm not as worried about it.</p>
<p>It's going to be like background
<br />workers for storing tomorrow's events.</p>
<p>Like I think, I'm sure there'll be some
<br />sort of flaw in this, but I was thinking</p>
<p>like a midnight cron, which is challenging
<br />because time zones, but like a nighttime</p>
<p>cron for each user at their nighttime,
<br />or however, that's going to be that just</p>
<p>checks to see if they have any upcoming
<br />events that we don't already know about.</p>
<p>That's the thing where it's some
<br />of the events are coming in through</p>
<p>a webhook because they got put on
<br />your calendar at the end of the day.</p>
<p>And then some of them aren't.</p>
<p>going to be, or maybe I'll throw
<br />them away if I, if they're not for</p>
<p>today, I have to figure that out.</p>
<p>Cause I guess something gets put
<br />on your calendar and two weeks from</p>
<p>now, I don't really want to store it.</p>
<p>until two weeks from now.</p>
<p>so yeah, calendars, they're fun.</p>
<p>CJ: calendaring and
<br />dates are just so tough.</p>
<p>Like it's, it sounds like a
<br />fun little project though.</p>
<p>that, is probably exploding out to
<br />be way more than a little project.</p>
<p>Colin: A little bit.</p>
<p>Yeah.</p>
<p>it's helping me to learn
<br />some of the Discord stuff.</p>
<p>And then I'm viewing it on
<br />Cloudflare because it's one</p>
<p>of the vendors that we do use.</p>
<p>Like I can't go use Versal or some
<br />of these things without like vendor.</p>
<p>I just don't think it's even possible.</p>
<p>So I think we can do things on Google,
<br />GCP pretty easily, but we have more of a</p>
<p>push towards doing things on CloudFlare.</p>
<p>It's easier to deploy to and try
<br />not to run VMs and things like that.</p>
<p>and Google, we can talk about
<br />it later, but like Google Cloud</p>
<p>run is like an alternative on
<br />Google, which is pretty cool too.</p>
<p>but yeah, we actually don't use AWS.</p>
<p>We probably do for something, but</p>
<p>CJ: Yeah, sounds familiar.</p>
<p>There's once you get to these big co
<br />tech companies, there's always like</p>
<p>lists of approved vendors that have gone
<br />through, all of the vetting processes</p>
<p>and contract review and whatever, to
<br />make sure that everything's cool where</p>
<p>man at a startup, it's pretty nice.</p>
<p>We get to just pick and choose
<br />whatever we want to work or work with.</p>
<p>and</p>
<p>Colin: You're like, who's going
<br />to give us the best, the most</p>
<p>credits and the best deal?</p>
<p>And what can we move away from if
<br />we needed to easily and all of that?</p>
<p>CJ: Yeah.</p>
<p>I think it's, it's totally public now.</p>
<p>I can't remember if we've mentioned
<br />it on, on the podcast, but we did get</p>
<p>into YC and through Y Combinator, we
<br />get we've, I don't know, we've been</p>
<p>given so many free credits and things
<br />to different services that have been</p>
<p>really helpful because it gives you
<br />like, a chance to experiment with</p>
<p>stuff and like really push its limits.</p>
<p>Colin: It's nice to not take the
<br />money that YC gives you and then</p>
<p>just spend it on services, right?</p>
<p>It's that money can go towards
<br />the team and you get free credits</p>
<p>to at least get to try to get to
<br />product market fit on credits.</p>
<p>CJ: Yeah.</p>
<p>Yeah.</p>
<p>And yeah, I was like, man, for the
<br />startups who are not in accelerators,</p>
<p>this is, I feel like it's quite a leg up.</p>
<p>honestly, like the, all the credits
<br />and stuff you get as part of</p>
<p>the accelerator and the network
<br />connections, they, I don't know,</p>
<p>Colin: Yeah, it's pretty crazy.</p>
<p>Yeah, we got a lot in tech stars.</p>
<p>Microsoft actually doesn't require you to
<br />be an accelerator for this very reason.</p>
<p>They're just like use Azure.</p>
<p>And I think that's because they want
<br />people to use Azure more than anything.</p>
<p>They're like, if you're a startup,
<br />if you can show us your LLC or</p>
<p>your incorporation docs, like cool,
<br />we'll give you a lot of credits.</p>
<p>Because if you grow and successful,
<br />you're probably not going to</p>
<p>get off that cloud, which is.</p>
<p>A good gamble for them.</p>
<p>It's like the first
<br />taste free type of thing.</p>
<p>CJ: Yeah, I feel like Microsoft does
<br />that all the way down the stack.</p>
<p>They like give away so much
<br />free stuff to like schools too.</p>
<p>It's</p>
<p>Colin: Bundling is yeah.</p>
<p>They're like, oh, we got to
<br />teach you access in college and</p>
<p>spreadsheets in Excel and Google doc.</p>
<p>and then Google's no, no schools.</p>
<p>We're going to give you
<br />all of our stuff for free.</p>
<p>CJ: Yeah.</p>
<p>Yeah, so Logan just got a, a PC.</p>
<p>so he's been building and designing like
<br />all these custom gaming PC components,</p>
<p>and then he was gifted one and just
<br />yesterday, so he's been like switching</p>
<p>back between his Mac and his PC and
<br />like starting to feel the frustration of</p>
<p>Oh, it's command, not control for, copy
<br />and paste and little things like that.</p>
<p>And it's funny cause on the PC he's
<br />using Bing and he's using all like</p>
<p>the built in stuff, which is just.</p>
<p>So different than what he's
<br />used to on the Mac and,</p>
<p>Colin: it's a lot of context
<br />switching, tool switching.</p>
<p>CJ: Yes.</p>
<p>Yes.</p>
<p>But, I like making sure that he's
<br />getting exposure to all that stuff,</p>
<p>but, so we've been working on
<br />building out this, it's like inventory</p>
<p>management, project management, CRM tool.</p>
<p>It's basically like a giant crud app
<br />right now where you can create these</p>
<p>paint projects and you can create
<br />locations and you can, upload images</p>
<p>of the rooms that are going to be
<br />painted or the exteriors that are going</p>
<p>to be painted, cabinets, et cetera.</p>
<p>And because there's so many little forms
<br />that you need when you're building out</p>
<p>a project, I wanted to, improve the
<br />usability by adding some like quick ad</p>
<p>features with modals where you could like,
<br />Oh, let me click this link and it'll pop</p>
<p>up in a modal that lets me like quick add
<br />a location or, add a room while I'm trying</p>
<p>to build out an estimate or whatever.</p>
<p>And so as I was doing that, I was
<br />like, Oh, I think I want to use turbo.</p>
<p>so like hot wire and like turbo
<br />streams and turbo frames and all this</p>
<p>stuff to try to make this happen.</p>
<p>And so I was like, let me
<br />go try to get into this.</p>
<p>And there's a couple of
<br />interesting bugs that I think</p>
<p>a lot of people will run into.</p>
<p>Colin: And</p>
<p>this is all Rails stuff for</p>
<p>CJ: yeah, yeah, like you can use
<br />hotwire outside of rails, but</p>
<p>it's, yeah, I think it might be</p>
<p>Colin: It came from</p>
<p>CJ: in some places, but
<br />yeah, came from rails.</p>
<p>The idea is that you can build more
<br />interactive apps, but you have like full.</p>
<p>Client server interaction.</p>
<p>And you build it, you like, you
<br />basically build the application as</p>
<p>if it's like a dumb server rendered
<br />app, but it uses web sockets, like</p>
<p>it like upgrades to web sockets when
<br />it can do smart things on the client.</p>
<p>So The easiest example is if you click
<br />a link, it, will fetch the resulting</p>
<p>page and then do a diff on the
<br />result and inject only the parts that</p>
<p>changed, when you clicked that link.</p>
<p>The, like longer story is that
<br />you can build sort of multiplayer.</p>
<p>Experiences like you might see in Google
<br />docs where there's like lots of people</p>
<p>in there typing at the same time using,
<br />these things called turbo streams.</p>
<p>And the idea is that or the way that,
<br />the jumpstart generators work, cause</p>
<p>I'm using jumpstart pro as the base
<br />for this is that in every single model,</p>
<p>there's three after commit hooks.</p>
<p>So if you create update or delete
<br />something, then it will broadcast out.</p>
<p>Pre pens or deletes or
<br />whatever removed from the page.</p>
<p>So like just by default,
<br />it feels multiplayer.</p>
<p>So if you're looking at like a list of
<br />projects and someone else in another</p>
<p>state creates a project, like boom,
<br />it'll pop onto your screen as a project.</p>
<p>And that all just comes
<br />out of the box for you.</p>
<p>and so I thought I was being clever
<br />in with these quick ads where it's</p>
<p>like, Oh, I want to add a room.</p>
<p>So I'll pop the modal and then when you
<br />submit, it will, it's going to submit</p>
<p>with turbo streams and then I'm going to
<br />broadcast and update so that it updates</p>
<p>like a dropdown in like the bottom form so
<br />that it shows the newly added thing that</p>
<p>was quick added and what was happening
<br />was like everyone's select boxes.</p>
<p>We're all getting updated
<br />because I wasn't targeting or</p>
<p>like scoping down the broadcast.</p>
<p>So like by default, oftentimes you'll see
<br />like turbo stream from, and then a string.</p>
<p>And that's like the unique string.</p>
<p>That's like the channel or like the room
<br />that the web sockets are listening on.</p>
<p>And so I was just saying Oh,
<br />on every single page, we're</p>
<p>all going to listen to the same
<br />channels for that page, basically.</p>
<p>And so when anyone was making changes,
<br />it was updating everyone else's stuff,</p>
<p>which became a, it was like quite
<br />funny, Oh, we were in the middle of</p>
<p>this giant migration and we had to
<br />basically just pump the brakes for</p>
<p>everybody, okay, nobody touch anything
<br />because right now we're all like adding</p>
<p>items to each other's pages and stuff.</p>
<p>And, yeah, so the crux of the.</p>
<p>Problem was that like, when you are
<br />broadcasting, you want to broadcast</p>
<p>with the, an ID that makes it so that
<br />it's scoped to that specific page.</p>
<p>So for instance, if I am on an estimate
<br />page where I'm adding a room that is</p>
<p>related to that estimate, then when
<br />I broadcast, I only want to broadcast</p>
<p>like for that estimate underscore ID,
<br />instead of just estimates or whatever.</p>
<p>And then that way it won't
<br />end up on everybody's pages.</p>
<p>Turbo has been super fun to learn.</p>
<p>I think I'm late to the party for sure,
<br />but it is, yeah, I'm sure a lot of</p>
<p>people have run into that same bug, but.</p>
<p>Colin: This is one of those
<br />Oh, it works on my machine</p>
<p>CJ: Yes.</p>
<p>It's like you don't encounter it until
<br />you're in like these multiplayer modes.</p>
<p>Colin: Yeah.</p>
<p>You're like, Oh, it added it to the list.</p>
<p>I guess we're done here.</p>
<p>Let's</p>
<p>CJ: yeah,</p>
<p>Colin: in.</p>
<p>And</p>
<p>amazing.</p>
<p>CJ: So that was fun.</p>
<p>But, yeah, turbo and turbo frames
<br />and turbo streams and, I dunno.</p>
<p>all of that has been
<br />really fun to play with.</p>
<p>And also it just worked so
<br />seamlessly with stimulus.</p>
<p>I think I wrote three lines
<br />of JavaScript and got like all</p>
<p>these crazy modals working,</p>
<p>Colin: And that's the
<br />inspiration behind it, right?</p>
<p>Is that normally you'd have to do a
<br />bunch of react, manage a bunch of state,</p>
<p>have a bunch of APIs just to do that.</p>
<p>And I see the appeal of
<br />each with like react.</p>
<p>You can have this like really crazy,
<br />fine tuned user experience and do</p>
<p>exactly what you want and when, and then
<br />sometimes you just need to build an app.</p>
<p>And I'm running into this right
<br />now at the coworking space.</p>
<p>We've been using this software for.</p>
<p>years that used to be like conference
<br />room booking and it had an iPad app</p>
<p>so you could see like the conference
<br />rooms booked or not and you could book</p>
<p>it and they just decided to go from
<br />like you can have as many people in</p>
<p>your office to having 15 people in
<br />your office at our very expensive plan.</p>
<p>And they've been slowly moving
<br />upstream to like enterprise.</p>
<p>Like they work with the biggest companies
<br />in the world to help them now with who's</p>
<p>coming into the office, who's got what
<br />desk, who's got which conference room.</p>
<p>And we only needed it
<br />for conference rooms.</p>
<p>And it pains me to pay for it because
<br />it's great software, but now we're paying</p>
<p>a lot for one piece of what it does.</p>
<p>And now with this update.</p>
<p>We like have to get off and now
<br />I'm deciding, do I build this?</p>
<p>Do, and which parts do I build?</p>
<p>It's a lot of the calendars stuff that we
<br />just talked about, which is also scary.</p>
<p>do I just build an app that just.</p>
<p>Turns red and green based on the
<br />availability of the calendar.</p>
<p>Cause right.</p>
<p>Thankfully, like we use Google calendar
<br />for both the rooms, but I'm trying</p>
<p>to decide, do I do a quick little
<br />rails app and like turbo stream,</p>
<p>like just broadcasts, like available,
<br />not available, not available.</p>
<p>They don't need to book
<br />the room on the iPad.</p>
<p>Like I'll, I think it could just be like
<br />a website on an iPad and we'd be fine.</p>
<p>So interesting.</p>
<p>This is one of those, because I write
<br />code, I can get myself in trouble.</p>
<p>Cause it's should I build this?</p>
<p>CJ: Right.</p>
<p>What are we talking about?</p>
<p>Like in terms of monthly
<br />price for something like that?</p>
<p>Colin: So this is where it's not a
<br />lot in the grand scheme of things.</p>
<p>I think it's like 1, 500 for the year.</p>
<p>So actually no, it's more than that.</p>
<p>It's 150 a month.</p>
<p>CJ: Yeah.</p>
<p>Okay.</p>
<p>Colin: so it feels like a lot because
<br />I will say like coworking spaces.</p>
<p>I have, I don't think we've talked
<br />about it on this show, but I've</p>
<p>thought about building coworking space.</p>
<p>Management software and it is, it's
<br />something that Jelly Switch and</p>
<p>Dave Paola, who is our past episode,
<br />past, past guests has talked about.</p>
<p>It's a bad business to be in.</p>
<p>I'm assuming that's the same thing that
<br />happened with the people we used to use</p>
<p>is that it's the margins are so low.</p>
<p>Coworking spaces work as a business if
<br />they can break even, but there aren't.</p>
<p>going to be upgrading and doing like
<br />expansion revenue and all this stuff.</p>
<p>You have to go upstream to the
<br />office management for bigger</p>
<p>offices or yoga studios or
<br />CrossFit gyms or things like that.</p>
<p>We talked about this with Mike because
<br />he did do coworking space software and I</p>
<p>actually met with him and he recommended
<br />do not go like they . Cause it was just</p>
<p>very, every coworking space is different.</p>
<p>Every subscription is different.</p>
<p>Every business model is different and
<br />they usually are non technical people.</p>
<p>Running them.</p>
<p>And so I'm probably in the minority
<br />of like software developer running</p>
<p>a coworking space who also wants
<br />to write their own software.</p>
<p>And, of course, mine's going to be
<br />better than all the ones out there, but</p>
<p>in real world, it probably won't be.</p>
<p>so yeah, I dunno, it's not the biggest
<br />thing, but honestly, I still can't</p>
<p>find just an app that will show.</p>
<p>red or green state based on
<br />calendar, but I have asked</p>
<p>chat GPT to help me with this.</p>
<p>And it's, I think it'll make it
<br />like a day or a weekend project</p>
<p>instead of a multi week project.</p>
<p>So</p>
<p>CJ: Nice.</p>
<p>Okay.</p>
<p>if, yeah, if you are already paying that
<br />much, an interesting nugget that I got</p>
<p>from one of the recent episodes of build
<br />your sass, Justin was like, Oh, not enough</p>
<p>people are saying that you could just go
<br />downstream and just charge less money.</p>
<p>And if you could get a room booking
<br />thing, that's 20 bucks a month per iPad</p>
<p>or whatever that needs to connect to it.</p>
<p>Or I don't know, like how you
<br />would do it, but figure out some</p>
<p>interesting pricing and then.</p>
<p>Build your thing on the side and
<br />then have some other coworking</p>
<p>space pay for it or whatever.</p>
<p>it seems like a problem that a
<br />lot of people might have, right?</p>
<p>Colin: Yeah, and I think shy still
<br />listens to this, but hi shy, if you're</p>
<p>listening, but he, I used to work with
<br />him at orbit and he built like a, it</p>
<p>was called overbooked, which we'll throw
<br />it in the show notes and it's in, it's</p>
<p>an elixir, with Phoenix, I believe.</p>
<p>And it's really cool.</p>
<p>Like it, it actually has most of the
<br />room booking and checking to see if</p>
<p>the room's available and all of that.</p>
<p>It needs the API to like.</p>
<p>display, whether or not the room is
<br />available on an iPad type of thing.</p>
<p>so I'm thinking about just forking that
<br />and adding the Google calendar sync to</p>
<p>it, cause it's an open source project
<br />and shy spent some fun time working</p>
<p>on that and getting it, working on it.</p>
<p>I've never used Elixir or Phoenix.</p>
<p>That's the problem there.</p>
<p>It's Do I want to learn a new language?</p>
<p>I actually do want to learn Elixir,
<br />but, am I going to get my project</p>
<p>done if I also need to learn Elixir?</p>
<p>So that's the balance of
<br />the build and the learn.</p>
<p>But, yeah, I agree on that
<br />other front of just, maybe I</p>
<p>don't build co working software.</p>
<p>Maybe I just build conference room booking</p>
<p>available, not available.</p>
<p>but</p>
<p>CJ: Hot or not.</p>
<p>And by hot, you mean it's booked.</p>
<p>Yeah.</p>
<p>Colin: Can't use the room.</p>
<p>green is go.</p>
<p>CJ: Is it, so would you build like
<br />a mobile app for, like for iPad or</p>
<p>would you just use like the browser?</p>
<p>Colin: I've gotten, yeah.</p>
<p>I could do it in a quick react app
<br />that just lives in the browser.</p>
<p>the alternative I was thinking about
<br />is like doing react, turbo native, do a</p>
<p>rails app that can be shipped to Android.</p>
<p>And it says depends like if I just
<br />need it for us, I'm going to go</p>
<p>the quickest way if I was going
<br />to build it as something I sell.</p>
<p>With accompanying apps, it'd
<br />probably be like Rails or React</p>
<p>Native or something like that.</p>
<p>So TurboNative, React Native, cause I
<br />don't want to support Kotlin, Swift,</p>
<p>CJ: Yeah.</p>
<p>Is there like a no code solution here
<br />where you have the iPad and you put it</p>
<p>like in caffeine mode or whatever and
<br />you just have it on the Google Calendar</p>
<p>page that's this is the page that you're
<br />gonna see and it's like the actual</p>
<p>calendar for the day of who has what time?</p>
<p>Colin: Yeah, we might be able to do that.</p>
<p>We used to have whiteboards.</p>
<p>I will say that did not work well.</p>
<p>Um, cause people would just write
<br />in that they have it, even though</p>
<p>someone booked it on the calendar
<br />and it's we need it to refresh that</p>
<p>people are there and it's like at the
<br />end of the day, this is almost like.</p>
<p>The Google calendar thing I had,
<br />I don't care about tomorrow.</p>
<p>We only care about today.</p>
<p>So it's just show the
<br />list of events for today.</p>
<p>And if you want to get on there, then
<br />maybe we do like a type form that</p>
<p>adds your event to the calendar or</p>
<p>and then put a QR code on the door,
<br />actually at WeWork, I was shocked,</p>
<p>like for as big as WeWork is and as
<br />much money as they've burned, they</p>
<p>just have a QR code on their doors.</p>
<p>They don't have iPads.</p>
<p>CJ: Wow.</p>
<p>Colin: Yeah, calendars.</p>
<p>that's the theme of my life right now.</p>
<p>CJ: Yeah.</p>
<p>They're tough.</p>
<p>They're super tough.</p>
<p>Colin: But yeah.</p>
<p>I guess we're both building and
<br />learning about turbo streams and</p>
<p>calendars and booking jobs, And with</p>
<p>discord, we, we run into this
<br />thing where we want to be able</p>
<p>to like stream developer events,
<br />but we can't show our code.</p>
<p>but the stuff that I'm
<br />working on is completely open.</p>
<p>the Google calendar app,
<br />I'm not using internal code.</p>
<p>I'm using the same APIs that
<br />developers have access to.</p>
<p>so I'm wondering, and I'll have
<br />to talk to my team about this.</p>
<p>So hello, if anyone's listening,
<br />but, just figuring out, if I want</p>
<p>to be that kind of dev rel, I think
<br />that's, we're trying to figure out,</p>
<p>do I want to be more public facing?</p>
<p>Do I want to do streams?</p>
<p>Do I want to work on this live?</p>
<p>What are the pros and cons to that stuff?</p>
<p>Will people show up,
<br />those kinds of things.</p>
<p>Cause some of these calendar things
<br />I could see being some entertaining,</p>
<p>like calendar wrangling live, and just.</p>
<p>hanging out with the community.</p>
<p>we do these events that, one of our
<br />community managers runs where it's like</p>
<p>code and chat where the devs, building
<br />bots and apps just hanging out, but it's</p>
<p>more like a lo fi, body doubling type
<br />of thing where it's like accountability.</p>
<p>Like we started the episode with more than
<br />we're not going to show you how to do it.</p>
<p>We're all just hanging out, just
<br />talking about what we're working</p>
<p>on and hopefully working on stuff.</p>
<p>So digital coworking.</p>
<p>So</p>
<p>CJ: I like that.</p>
<p>Yeah.</p>
<p>It'd be interesting to see, I
<br />think all those directions are fun.</p>
<p>So whatever, yeah, whatever you
<br />land on, it'll be interesting.</p>
<p>All right.</p>
<p>let's wrap it there.</p>
<p>As always, you can head
<br />over to build and learn.</p>
<p>dev to check out all
<br />the links and resources.</p>
<p>We'll put all the fun
<br />things in there about neon.</p>
<p>tech and all the other
<br />things that we talked about.</p>
<p>And, yeah, I think that's a wrap.</p>
<p>Colin: Awesome.</p>
<p>And we don't do this often, but
<br />if you enjoy the show, think about</p>
<p>giving it a review or giving it a star
<br />rating so other people can find it.</p>
<p>we are back this episode,
<br />we'll keep them coming.</p>
<p>So thanks all.</p>
<p>CJ: Bye friends.</p>
</section>
</article>
</div>
<footer class="container">
<p>All audio, artwork, episode descriptions and notes are property of CJ Avilla, Colin Loretz, for Build and Learn, and published with permission by Transistor, Inc.</p>
<span class="broadcast-by">
<a target="_new" title="Broadcast by Transistor.fm" href="https://transistor.fm">
<strong>Broadcast by</strong> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="547px" height="144px" viewBox="0 0 547 144" version="1.1" class="transistor-logo">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="transistor_horizontal" fill-rule="nonzero" fill="#FFFFFF">
<g id="Group" transform="translate(191.000000, 42.000000)">
<polygon id="Shape" points="0.7 10.4 0.7 1.8 38.6 1.8 38.6 10.4 24.5 10.4 24.5 58.3 14.7 58.3 14.7 10.4"></polygon>
<path d="M63.3,26.2 C62.1,26 60.7,25.8 58.7,25.8 C52.4,25.8 48.7,29.9 48.7,38.2 L48.7,58.2 L39.4,58.2 L39.4,18.6 L48.5,18.6 L48.5,24.2 L48.7,24.2 C50.5,20.8 54.5,17.3 59.8,17.3 C61.3,17.3 62.3,17.4 63.3,17.5 L63.3,26.2 L63.3,26.2 Z" id="Shape"></path>
<path d="M107.8,58.2 L98.8,58.2 L98.8,53.2 L98.6,53.2 C95.9,56.6 91.6,59.7 85,59.7 C76.1,59.7 66,52.6 66,38.4 C66,25.8 74.9,17.4 85.7,17.4 C92.3,17.4 96.3,20.9 98.7,24 L98.9,24 L98.9,18.6 L107.9,18.6 L107.9,58.2 L107.8,58.2 Z M87.4,51.5 C93.5,51.5 99.2,46.2 99.2,38.6 C99.2,30.6 94,25.3 87.5,25.3 C79.3,25.3 75.4,31.9 75.4,38.4 C75.4,45 79.2,51.5 87.4,51.5 Z" id="Shape"></path>
<path d="M118.6,18.6 L127.8,18.6 L127.8,23.6 L128,23.6 C131.1,19.1 135.7,17.3 140.1,17.3 C148.3,17.3 155.5,22.7 155.5,35.4 L155.5,58.2 L146.2,58.2 L146.2,35.9 C146.2,29.1 143,25.5 137.7,25.5 C131.9,25.5 127.9,29.6 127.9,37.3 L127.9,58.3 L118.6,58.3 L118.6,18.6 L118.6,18.6 Z" id="Shape"></path>
<path d="M183.6,28.8 C183.2,25.9 181,24 178.3,24 C175.1,24 173.3,26 173.3,28.2 C173.3,30.6 174.5,32.3 181.4,34.6 C189.9,37.3 192.9,41.7 192.9,47.3 C192.9,54.6 187.4,59.7 178.3,59.7 C168.8,59.7 164.1,54.5 163.4,47.1 L172,47.1 C172.4,50.4 174.4,52.9 178.5,52.9 C182,52.9 184,50.7 184,48 C184,45 182.3,43.1 175.7,40.9 C168.3,38.5 164.5,34.8 164.5,28.6 C164.5,22.1 169.6,17.3 178,17.3 C186.5,17.3 191,22.3 192,28.8 L183.6,28.8 L183.6,28.8 Z" id="Shape"></path>
<path d="M201,0.4 L211.3,0.4 L211.3,9.8 L201,9.8 L201,0.4 Z M201.5,18.6 L210.8,18.6 L210.8,58.3 L201.5,58.3 L201.5,18.6 Z" id="Shape"></path>
<path d="M239.5,28.8 C239.1,25.9 236.9,24 234.2,24 C231,24 229.2,26 229.2,28.2 C229.2,30.6 230.4,32.3 237.3,34.6 C245.8,37.3 248.8,41.7 248.8,47.3 C248.8,54.6 243.3,59.7 234.2,59.7 C224.7,59.7 220,54.5 219.3,47.1 L227.9,47.1 C228.3,50.4 230.3,52.9 234.4,52.9 C237.9,52.9 239.9,50.7 239.9,48 C239.9,45 238.2,43.1 231.6,40.9 C224.2,38.5 220.4,34.8 220.4,28.6 C220.4,22.1 225.5,17.3 233.9,17.3 C242.4,17.3 246.9,22.3 247.9,28.8 L239.5,28.8 L239.5,28.8 Z" id="Shape"></path>
<path d="M252.8,18.6 L257.8,18.6 L257.8,5.9 L267.1,5.9 L267.1,18.6 L277,18.6 L277,26.4 L267,26.4 L267,44.1 C267,49.5 268.7,51 272.5,51 C274.1,51 275.9,50.7 277.3,50.3 L277.3,57.8 C275.2,58.4 272.6,58.7 270.3,58.7 C260.4,58.7 257.8,52.7 257.8,44.6 L257.8,26.4 L252.8,26.4 L252.8,18.6 Z" id="Shape"></path>
<path d="M302.3,17.3 C314.7,17.3 323.5,26.4 323.5,38.4 C323.5,50.1 314.6,59.7 302.3,59.7 C290.2,59.7 281.1,50.4 281.1,38.4 C281.1,26.1 290.3,17.3 302.3,17.3 Z M302.3,51.4 C309.3,51.4 314.1,45.8 314.1,38.4 C314.1,31.4 309.6,25.5 302.3,25.5 C295.2,25.5 290.5,31 290.5,38.4 C290.5,46 295.9,51.4 302.3,51.4 Z" id="Shape"></path>
<path d="M350.9,25.8 C344.6,25.8 340.9,29.9 340.9,38.2 L340.9,58.2 L331.6,58.2 L331.6,18.6 L340.7,18.6 L340.7,24.2 L340.9,24.2 C342.7,20.8 346.7,17.3 352,17.3 C353.5,17.3 354.5,17.4 355.5,17.5 L355.5,26.2 C354.3,26 352.9,25.8 350.9,25.8 Z" id="Shape"></path>
</g>
<g id="Group">
<g transform="translate(24.000000, 24.000000)" id="Shape">
<path d="M48,95.9 C45.4,95.9 43.2,93.8 43.2,91.1 L43.2,4.9 C43.2,2.3 45.3,0.1 48,0.1 C50.6,0.1 52.8,2.2 52.8,4.9 L52.8,91.1 C52.8,93.7 50.6,95.9 48,95.9 Z"></path>
<path d="M28,52.8 L5,52.8 C2.4,52.8 0.2,50.7 0.2,48 C0.2,45.3 2.3,43.2 5,43.2 L28,43.2 C30.6,43.2 32.8,45.3 32.8,48 C32.8,50.7 30.6,52.8 28,52.8 Z"></path>
<path d="M91.1,52.8 L68,52.8 C65.4,52.8 63.2,50.7 63.2,48 C63.2,45.3 65.3,43.2 68,43.2 L91,43.2 C93.6,43.2 95.8,45.3 95.8,48 C95.8,50.7 93.7,52.8 91.1,52.8 Z"></path>
</g>
<path d="M72,144 C32.3,144 0,111.7 0,72 C0,32.3 32.3,0 72,0 C111.7,0 144,32.3 144,72 C144,111.7 111.7,144 72,144 Z M72,9.6 C37.6,9.6 9.6,37.6 9.6,72 C9.6,106.4 37.6,134.4 72,134.4 C106.4,134.4 134.4,106.4 134.4,72 C134.4,37.6 106.4,9.6 72,9.6 Z" id="Shape"></path>
</g>
</g>
</g>
</svg>
</a> </span>
</footer>
</body>
<script type="text/javascript" async src="//platform.twitter.com/widgets.js"></script>
</html>