Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

OG Image Options

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="0" data-line-end="1">In this Hasty Treat, Scott and Wes talk about OG images, interesting ways you can work with them, and ways you can work dynamically with them.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:11">00:11</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=02:18">02:18</a></strong> What are OG images?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=06:19">06:19</a></strong> Testing OG images</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://polypane.app/">Polypane, The browser for ambitious web developers</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://metatags.io/">Meta Tags — Preview, Edit and Generate</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://developers.facebook.com/tools/debug/">Sharing Debugger - Meta for Developers</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://cards-dev.twitter.com/validator">Card Validator | Twitter Developers</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=08:27">08:27</a></strong> Creating an OG image</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://github.com/vercel/satori">vercel/satori: Enlightened library to convert HTML and CSS to SVG</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href= "https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation"> Open Graph (OG) Image Generation | Vercel Docs</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href= "https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images"> Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=09:41">09:41</a></strong> Dynamically generating OG images</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://wesbos.com/thumbnail?thumbnail=/static/0005c028a536c87975eb84ae3d32ae57/aeron.jpg&title=Uses&url=https://wesbos.com/uses"> wesbos.com/thumbnail/?thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg&title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=21:16">21:16</a></strong> Using Puppeteer</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://pptr.dev/">Puppeteer | Puppeteer</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://developers.cloudflare.com/browser-rendering/platform/puppeteer/"> Puppeteer · Browser Rendering docs</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://cloudinary.com/ip/gr-sea-gg-brand-home-base?campaignid=18164753405&adgroupid=144188713167&keyword=cloudinary&device=c&matchtype=e&adposition=&gad=1"> Cloudinary - Image and Video Upload, Store ad Monetization</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://playwright.dev/">Fast and reliable end-to-end testing for modern web apps | Playwright</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=28:47">28:47</a></strong> Canva API</li> <li class="has-line-data" data-line-start="23" data-line-end="25"> <a href="https://www.canva.com/developers/">Build The Tools Behind Great Design | Canva Developers</a></li> </ul> <h2 class="code-line" data-line-start="25" data-line-end="26"> <a id="Tweet_us_your_tasty_treats_25"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this Hasty Treat, Scott and Wes talk about OG images, interesting ways you can work with them, and ways you can work dynamically with them.
 Show Notes  00:11 Welcome
 02:18 What are OG images?
 06:19 Testing OG images
 Polypane, The browser for ambitious web developers

 Meta Tags — Preview, Edit and Generate

 Sharing Debugger - Meta for Developers

 Card Validator | Twitter Developers

 08:27 Creating an OG image
 vercel/satori: Enlightened library to convert HTML and CSS to SVG

  Open Graph (OG) Image Generation | Vercel Docs

  Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel

 09:41 Dynamically generating OG images
  wesbos.com/thumbnail/?thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg&title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses

 21:16 Using Puppeteer
 Puppeteer | Puppeteer

  Puppeteer · Browser Rendering docs

  Cloudinary - Image and Video Upload, Store ad Monetization

 Fast and reliable end-to-end testing for modern web apps | Playwright

 28:47 Canva API
 Build The Tools Behind Great Design | Canva Developers

  Tweet us your tasty treats  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

OG Image Options

Poslechněte si podcast