CINXE.COM

<!doctype html> <html lang="en-US" class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="application-name" content="ShopTalk"> <link href="https://fonts.cdnfonts.com/css/cooper-hewitt?styles=34273,34274,34281" rel="stylesheet"> <link rel="stylesheet" href="https://shoptalkshow.com/wp-content/themes/shoptalk6/style.css?v=10"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="pingback" href="https://shoptalkshow.com/xmlrpc.php"> <title>639: DX, JSON, XML, HTML, and Databases! Oh My! – ShopTalk</title> <meta name='robots' content='max-image-preview:large' /> <link rel='dns-prefetch' href='//stats.wp.com' /> <link rel='dns-prefetch' href='//c0.wp.com' /> <link rel='dns-prefetch' href='//i0.wp.com' /> <link rel="alternate" type="application/rss+xml" title="ShopTalk » 639: DX, JSON, XML, HTML, and Databases! Oh My! Comments Feed" href="https://shoptalkshow.com/639/feed/" /> <script type="text/javascript"> /* <![CDATA[ */ window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/shoptalkshow.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.6.2"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); /* ]]> */ </script> <link rel='stylesheet' id='jetpack_related-posts-css' href='https://c0.wp.com/p/jetpack/13.9.1/modules/related-posts/related-posts.css' type='text/css' media='all' /> <style id='wp-emoji-styles-inline-css' type='text/css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wp-block-library-css' href='https://c0.wp.com/c/6.6.2/wp-includes/css/dist/block-library/style.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='mediaelement-css' href='https://c0.wp.com/c/6.6.2/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='wp-mediaelement-css' href='https://c0.wp.com/c/6.6.2/wp-includes/js/mediaelement/wp-mediaelement.min.css' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css' type='text/css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <script type="text/javascript" id="jetpack_related-posts-js-extra"> /* <![CDATA[ */ var related_posts_js_options = {"post_heading":"h4"}; /* ]]> */ </script> <script type="text/javascript" src="https://c0.wp.com/p/jetpack/13.9.1/_inc/build/related-posts/related-posts.min.js" id="jetpack_related-posts-js"></script> <link rel="https://api.w.org/" href="https://shoptalkshow.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://shoptalkshow.com/wp-json/wp/v2/posts/7929" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://shoptalkshow.com/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.6.2" /> <meta name="generator" content="Seriously Simple Podcasting 3.6.1" /> <link rel="canonical" href="https://shoptalkshow.com/639/" /> <link rel='shortlink' href='https://shoptalkshow.com/?p=7929' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://shoptalkshow.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fshoptalkshow.com%2F639%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://shoptalkshow.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fshoptalkshow.com%2F639%2F&format=xml" /> <link rel="alternate" type="application/rss+xml" title="Podcast RSS feed" href="https://shoptalkshow.com/feed/podcast" /> <style>img#wpstats{display:none}</style> </head> <body class="post-template-default single single-post postid-7929 single-format-standard jps-theme-shoptalk6"> <header class="site-header"> <div class="site-header-inside"> <div class="logo-and-tagline"> <a href="/" class="logo"> <img class="logo-img" src="https://shoptalkshow.com/wp-content/themes/shoptalk6/images/logo.png" alt="ShopTalk Show Logo"> </a> <h1 class="sr-only"> ShopTalk Show </h1> <div class="about-show"> A weekly podcast about building websites from <a href="https://daverupert.com">Dave Rupert</a> and <a href="https://chriscoyier.net">Chris Coyier</a>. Please <a href="https://plnk.to/shoptalk?to=page">subscribe where you prefer</a>. Join us on Discord by supporting the show on <a href="https://www.patreon.com/shoptalkshow">Patreon</a>. <a href="/ask/" class="button main-button">Send in Discussion Topic →or Ask a Question or whatever</a> </div> </div> </div> </header> <a href="https://www.google.com/search?q=site:shoptalkshow.com%20fun" class="jetpack-search-filter__link"> Search <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.0726 10.4326C12.4801 10.4326 10.4 12.5451 10.4 15.1053C10.4 17.6978 12.5125 19.7779 15.0726 19.7779C17.6651 19.7779 19.7453 17.6654 19.7453 15.1053C19.744 12.544 17.664 10.4326 15.0726 10.4326Z"></path> <path d="M16.0327 0.447479C7.42401 0.447479 0.447693 7.4238 0.447693 16.0324C0.447693 24.6398 7.42401 31.6161 16.0314 31.6161C24.64 31.6161 31.6163 24.6398 31.6163 16.0324C31.6163 7.4238 24.64 0.447479 16.0327 0.447479ZM23.6163 24.0324C23.3926 24.2562 23.0401 24.385 22.6563 24.385C22.2726 24.385 21.9526 24.2575 21.6963 24.0324L18.7526 21.0887L18.4651 21.2487C17.4088 21.825 16.2576 22.145 15.0724 22.145C11.1998 22.145 8.06509 19.0087 8.06509 15.1376C8.06509 11.265 11.2013 8.13023 15.0724 8.13023C18.9451 8.13023 22.0798 11.2665 22.0798 15.1376C22.0798 16.5138 21.6961 17.8251 20.9273 18.9776L20.7348 19.2976L23.6473 22.2101C23.8711 22.4664 24.0311 22.7864 24.0311 23.1376C23.9998 23.4563 23.8723 23.7763 23.616 24.0326L23.6163 24.0324Z"></path> </svg> </a> <div class="page-wrap"> <main> <section class="audio-player"> <podcast-player> <audio controls="controls" preload="none" width="100%" src="https://cdn.simplecast.com/audio/167887a0-ac00-4cf9-bc69-b5ca845997db/episodes/audio/f9d5c847-d910-47ef-b340-fabdab7d0a11/default_tc.mp3?nocache"></audio> </podcast-player> </section> <div class="grid two-one"> <div> <header id="show-title" class="show-title bar-over"> <h1> 639: DX, JSON, XML, HTML, and Databases! Oh My! </h1> <div class="time-and-download"> <time datetime="2024-10-28" pubdate> October 28th 2024 </time> <a download class="button button-mini" href="https://cdn.simplecast.com/audio/167887a0-ac00-4cf9-bc69-b5ca845997db/episodes/audio/f9d5c847-d910-47ef-b340-fabdab7d0a11/default_tc.mp3?nocache">Download MP3</a> </div> </header> <div class="apply-typography"> How important is the DX of software vs how important is the person showing off the software, Douglas Crockford and JSON, remembering XML, trying to write better HTML for email, new TC39 proposal, workshopping t-shirts, and what do you do if you want a little bit of database on your website? </div> <section class="tags"> Tags: <a href="https://shoptalkshow.com/tag/database/" rel="tag">database</a><a href="https://shoptalkshow.com/tag/dx/" rel="tag">dx</a><a href="https://shoptalkshow.com/tag/javascript/" rel="tag">Javascript</a> </section> </div> <div> <section id="guests"> <h2>Guests</h2> <div class="all-guests"> <div class="guest"> <img src="https://res.cloudinary.com/css-tricks/image/upload/c_fill,f_auto,g_center,h_500,q_auto,w_500,x_0,y_0/v1582209201/chris-and-dave_otspfa.jpg" alt="Chris Coyier and Dave Rupert in silly sunglasses and a sign that says Shawp Tawlkk Shough DOT COM"> <div class="guest-text"> <h3>Chris Coyier and Dave Rupert</h3> <div class="guest-bio"> This episode is with just Chris & Dave, ShopTalk Show's hosts. Chris is the co-founder of <a href="https://codepen.io">CodePen</a> and creator of <a href="https://css-tricks.com">CSS-Tricks</a>, and Dave is lead developer at <a href="https://paravelinc.com/">Paravel</a>. </div> </div> </div> </div> </section> </div> </div> <div class="grid"> <div class="time-jumps"> <h2>Time Jump Links</h2> <ul> <li><a href="#t=00:20">00:20</a> Dave's dogs updates</li> <li><a href="#t=03:32">03:32</a> Chris' Web Unleashed talk on DX</li> <li><a href="#t=10:39">10:39</a> How often is DX based on a cool person showing it off?</li> <li><a href="#t=13:21">13:21</a> Sponsor: Bluehost</li> <li><a href="#t=14:05">14:05</a> Douglas Crockford and JSON</li> <li><a href="#t=22:49">22:49</a> Remember XML?</li> <li><a href="#t=25:07">25:07</a> HTML Email</li> <li><a href="#t=34:47">34:47</a> JavaScript - New TC39 proposal</li> <li><a href="#t=43:24">43:24</a> Workshopping some t-shirts</li> <li><a href="#t=44:15">44:15</a> What do you use if you want just a little bit of database for your website?</li> </ul> </div> <div> <div> <section id="links" class="episode-links"> <h2 class="mini-header">Links</h2> <div id="link-dump" class="apply-typography"> <ul> <li><a href="https://fitc.ca/event/webu24/">Web Unleashed 2024 - FITC</a></li> <li><a href="https://blog.codepen.io/2019/09/09/new-high-contrast-syntax-highlighting-themes/">New High Contrast Syntax Highlighting Themes – CodePen</a></li> <li><a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a></li> <li><a href="https://www.json.org/json-en.html">JSON</a></li> <li><a href="https://www.jsonfeed.org/">JSON Feed</a></li> <li><a href="https://tv.apple.com/ca/show/slow-horses/umc.cmc.2szz3fdt71tl1ulnbp8utgq5o">Slow Horses</a></li> <li><a href="https://bleepbloop.studio/posts/new-tc39-proposal-does-javascript-require-a-compiler-soon">JavaScript Compiler Proposal</a></li> <li><a href="https://pawelgrzybek.com/whats-new-in-ecmascript-2024/">ECMAScript 2024 Updates</a></li> <li><a href="https://www.contentful.com/?">Contentful</a></li> <li><a href="https://strapi.io/">Strapi</a></li> <li><a href="https://www.sanity.io/">Sanity Content System</a></li> <li><a href="https://www.heroku.com/">Heroku</a></li> <li><a href="https://www.cloudflare.com/">Cloudflare</a></li> <li><a href="https://turso.tech/">Turso</a></li> <li><a href="https://docs.netlify.com/blobs/overview/">Netlify Blobs</a></li> <li><a href="https://bolt.new/">bolt.new</a></li> </ul> </div> </section> </div> </div> </div> <section id="episode-sponsors" class="episode-sponsors"> <h2>Episode Sponsors 🧡</h2> <div class="all-sponsors"> <div class="sponsor episode-card"> <h3> <a href="https://www.bluehost.com/"> Bluehost </a> <a href="#t=13:21"> (13:21) </a> </h3> Find unique domains, web hosting, and WordPress tools, all in one place. Empower your business or digital agency with Bluehost. </div> </div> </section> <section id="transcript" class="episode-transcript apply-typography"> <h2 class="mini-header">Transcript</h2> [Banjo music] MANTRA: Just Build Websites! Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--in the shed with the dogs who are probably going to freak out--Rupert. With me is Chris Coyier. Hey, Chris. How are you doing? Chris Coyier: Yeah. How are your two little dogs? Dave: Uh... Chris: Being puppies? Dave: Yeah, yeah. Chris: Not going to return them, right? [Laughter] Dave: Well, a little too late. Um... [Laughter] I like the dogs. They're very sweet. I think I underestimated how much I would be the primary caretaker of the dogs-- Chris: Hmm... Dave: --because, when we got them, it was summertime. Oh, yeah. Kids are around. They've got nothing to do. They can watch some dogs. But then a week later, they went to school. And then now... [laughter] I am the sole caretaker of two dogs because my wife is working at the school most days a week and doing other stuff, and so... But it's just like-- Chris: Casa d' Dave at home. Dave: Oh, dude. Chris: All by your lonesome. Dave: I'm busy at work. Chris: Yeah. Dave: Trying to whatever - deliver value there. But you know it's just... I've had dogs before. It's fine. Never had two young pups at the same time, but they're just-- Chris: Yeah. Dave: One is dumb as bricks, eats rocks, they dig holes. My yard is shredded. It's just... I'm not winning the game. You know? Chris: Yeah. Dave: I feel that, but they're sweet pups. But I'm just... I'm not winning. I just want everyone to know that. [Laughter] Dave: Not winning the dog game. Chris: Fair enough. I'm sorry, man. Life is hard, you know. [Laughter] Dave: Yeah. Well, one dog would have been different. But then I don't even know if I'd win the one-dog game because that means that dog requires a bunch of attention. At least they go out, and they play, and run around, and rassle and stuff like that. Chris: Together. Yeah. Dave: Yeah, yeah. Chris: That's kind of the point, right? Dave: Yeah. But I think just the fact that all logistics fall on me, you know. I can't walk through a door without having two dogs take me out at the knees. You know what I mean? [Laughter] It's just like that gets you after a while. It's like raising a toddler is really what it's like - if you've been there. Chris: Hmm... Dave: Where you're just like, "We're just doing this all day long, huh? All day long? Is it bedtime yet?" You know what I'm feeling? [Laughter] Dave: Is it bedtime yet? Chris: Just to rub it in a little bit, we're relatively new to not having any dogs after a long time. I open the door, and I just take a big whiff, and "Ah! Just the pleasure of coming home to nothing." [Laughter] I just love it. Dave: Doesn't smell like a pile of farts, like right now. Chris: Yeah. It's not even the smell. It's the smell of chill. [Laughter] Dave: Yeah. Yeah, not chaos. Not clitter-clatter of a dog just peeling out, slamming into the wall, licking your guests in the crotch. Chris: [Laughter] Dave: Yeah. None of that is going on. Chris: Right. Dave: That's great. Barking at every squirrel, every person that would ever come to the house. Yeah, it's neat. Yeah, I'm sure. I had a year of that. That was great. Oh, well. It's fine. <a href="#t=00:03:33">00:03:33</a> Chris: Well, I'm fresh back from Toronto at Web Unleashed. It was kind of fun. Haven't been to a Web conference in a little while. I spoke about developer experience and things. And I had a good time putting together that talk, so I'm sure I'll turn it into some kind of long-form blog post at some point so everyone can enjoy it. I have to give it one more time. That will help me refine it a little further before I do that blog post thing. Dave: What's kind of the big thesis? Like, "DX, it's great"? [Laughter] Chris: Yup. Yup. Dave: Yeah? Okay. Chris: Yeah, and it was a funny one to talk about. I feel like when you get to talk about... Let's say your talk is about JavaScript, CSS, or whatever. It's almost, by its nature, scientific truth. Dave: Mm-hmm. Chris: You're going to show something, some code, and then you're going to show it execute in a Web browser. You're going to be like, "Look. This equals that. Isn't that interesting?" You have that possibility, at least, that you can do that. You almost feel like a little scientist. You know? Dave: Mm-hmm. Chris: Here I'm proving something for you. Then you can talk about it. Maybe you'll have some general opinions and stuff. Then it waivers into it. But I felt pretty sound when I do that whereas, with this, it's so squishy. Dave: Hmm... Chris: I'm just talking about I didn't apply any scientific rigor to my opinions about what makes for a good developer experience. You could because it falls under the general realm of UX, which is a discipline that you can apply science and stuff to. But I didn't here. Mostly it's me just being like, "Listen. I've been a developer for a long time. I'm a cofounder at a company, which we have to provide DX to the people who work here, too. And it happens to be a developer product, so we're providing DX to 10+ million users. Dave: Yeah, yeah. Chris: So, like, um... DX is on the mind. Not to mention we're making a new version of CodePen in which the DX of it is freshly considered in a lot of ways. Dave: Right. Chris: So, it's on my mind. Dave: Mm-hmm. Chris: And I just load it up with examples. I point at CodePen a little bit, but then I point at all kinds of other tools that I think are doing a good job. And then connect it to the larger world. I'm like, "You see how--?" Here's one that I slipped in there. I don't know how well it lands or whatever, but here's a little one. Dave: Mm-hmm. <a href="#t=00:05:53">00:05:53</a> Chris: It's not a new concept, but it's just the concept of syntax highlighting in code. Dave: Mm-hmm. Mm-hmm. Chris: We've had that forever, right? But if you don't have that, it's not the end of the world but just the presence of it is part of DX in a code editor. You can look at an object, and it has one color. Then a method on the object has a different color, and it allows you to understand that. Or the color of an open and curly bracket matches the closing bracket of curly bracket color, and then it allows you to be like, "Ooh, I see that." Through that (and indentation and stuff), I'm understanding that that's a block of code that's all related to each other, executes in that order, and things like that. That's positive. It's helping you do something. It also helps you when you screw up. There are some. Our high contrast theme on CodePen, when there's a problem, it can't syntax-highlight correctly because you've made some syntactical problem. It has a pretty gnarly red color it tries to apply to the problem area, which is just a little bit of DX to keep you on the rails. Now, it's not slapping your wrist. It's not taking your focus away (like literally the browser focus). It's not popping up a modal or anything. It's just a little bit of a nudge. Any developer that's been a developer for any length of time can just instantly see a syntax highlighting problem and get there and be like, "Ooh, I better look at that." You know? <a href="#t=00:07:22">00:07:22</a> Dave: Yeah, especially in CodePen. It's like, "Oh, why are you mad?" You know? It's sort of like code telling you they're mad. Then it becomes kind of a game, sort of, for me. But it's like, "Why are you mad?" Ninety percent of the time now TypeScript is mad. Chris: But mad... I don't know if it's too strong of a word or not. Those are slightly different, right? TypeScript is red squiggles. Dave: Mm-hmm. Chris: I go all into that, too, because I absolutely love red squiggles, Dave. I think red squiggles are one of the most important DX concepts there is. Dave: [Laughter] Okay. Chris: If you're building a developer product, squiggle them up, baby. Find a way to provide red squiggles about your thing. There should be some, like, Web component red squiggles thing. There should be red squiggles for everything you can think of because it's so... oh, we already know what they are. And it's mad, I guess, is a way to put it. But it's not so mad-- Dave: That it shut down the application, yeah. Chris: --that it stops you from what you're doing. Dave: Yeah. Chris: Yeah, it's like the right amount of mad, and I think that's why I like it. And syntax highlighting falls in that bucket a little bit, too, and so does, like, "Oh, my code is so malformed that Prettier can't even prettier it." Do you ever get that? Dave: Mm-hmm. Oh, yeah, yeah. Chris: That's also one of those, like, "Oh, it's a little mad at me. Why is this behaving?" And I like all those little moments of just light friction so that you can fix it and get back on track. Dave: Mm-hmm. Chris: I think that's cool. And I made an analogy to, like, rumble strips on highways. You're driving along in your car, and you're an absolute fool. You look at your phone - or whatever - and then you hear the [lip trill]. It's just bad syntax highlighting. It's that same, you know, little less life and death when it's code. Dave: Yeah, yeah. Chris: But that thing is trying to be, like, "Hey, you're screwing up a little bit," and correct you without instantly issuing you a ticket or stopping your car or doing something more dramatic. It's more like a subtle push, and I like that. Dave: Yeah. Chris: That's part of the thesis is things like that. I'm connecting real world stuff to DX stuff to get you to think about the concept. It's not like syntax highlighting... anybody is doubting syntax highlighting as a good thing. But it gets you to think about are there other little, small things that I can push a developer back on track? Dave: Yeah. Well, you think about, in my neighborhood, they're redoing all the curb cuts, and they're adding in those accessible bumpy bricks, the dots. Chris: Mm-hmm. Yeah. Dave: That's an accessibility feature, like, "Hey, you're reaching an intersection. Pay attention." But it's also awesome for me as a parent. Go to the dots. You can go to the dots and then you have to stop." It's good for just walking. If I'm looking at my phone, it's like, "Oh, shoot. I need to pay attention. I'm at the road," or something. Chris: Mm-hmm. Dave: I don't generally go that far, but yeah. They're cool. These feedback mechanisms help you exist, sort of. Chris: Yeah, feedback mechanisms is good. <a href="#t=00:10:33">00:10:33</a> Dave: Do you get into the idea of developer advocacy as DX at all? Chris: I want to, but I have to deliver this. In one circumstance, I have to give it in 20 minutes, and it's pretty quick. But I do get into... I quote Swix thing in there that he said something cool that I wanted to share. But there is this idea there's stuff around a product that is part of the DX of the product. Dave: Mm-hmm. Chris: Even though it's not the product. Docs is a clear example, and I do get into some examples of that because it's unavoidable. Good DX is good docs. It's a pretty big aspect to it. But that's not everything. The person on social media representing your product is kind of the DX of it. Dave: I was going to say, how many times do you use a product because somebody who is cool that you trust is the face of it or part of it? Chris: Hmm... Dave: I feel like that is a piece of DX that is often lost. Chris: Sure. Dave: Just that developer advocacy. I know there's somebody I trust (through whatever means that is). I've heard them do a conference and they're funny, like Phil Hawksworth - or something. Chris: Sure. Dave: Is that enough to make me trust the developer experience here? Chris: Was good? Yeah, like how many CMSs do you stop using because--? Dave: [Laughter] Because one guy just flips out. Chris: Yeah. [Laughter] Dave: Well, yeah. Not to bring up old drama because it is very hot and fresh and just keeps... It's like a fondu pot of hot drama, dude, that just keeps going. Chris: Oh, gosh. Dave: It just pumps it up from the bottom and spits it back out at the top, a fondu fountain. It is not helping me in, like, "What if I have to eject from a technology?" brain because I always defensively code around that. Chris: Mm-hmm. Dave: I over-index on that. I know I do. And people that listen to the podcast for 12 years, you've probably said, "Yeah, Dave over-indexes on needing to suddenly leave a technology in the middle of the night." Chris: Hmm... Dave: This situation, this WordPress situation, is not helping me on that. [Laughter] Chris: Uh... Dave: It has just reaffirmed my belief that all it takes is for one person with an inordinate amount of power to turn something really weird. Chris: Yeah. Right. My blog is going to be industry standard Markdown file and no proprietary anything because then I can move anywhere at any time. Dave: But even if John Gruber goes weird, I've got to figure out a backup for the Markdown. Chris: Yeah. [Laughter] Dave: You've got to think about this, man. Chris: Yeah. HTML only. Fair enough. <a href="#t=00:13:21">00:13:21</a> [Banjo music starts] Chris: Hey, do you got great ideas but no idea how to build a website? Get Bluehost with their AI design tool. You can quickly generate high quality, fast loading WordPress sites instantly. Once you've nailed the look, just hit enter, and your site goes live. It's really that simple. It doesn't matter whether you're a blogger, influencer, just starting out your side hustle, Bluehost has you covered with built-in marketing and e-commerce tools to help you grow and scale your website for the long haul. When you upgrade to Bluehost Cloud, you get 100% uptime and 24/7 support to ensure your site stays online through heavy traffic. Bluehost really makes building your dream website easier than ever. So, what's stopping you? You already got the vision. Make it real. Visit bluehost.com/shoptalk right now and get started today. [Banjo music stops] <a href="#t=00:14:18">00:14:18</a> Chris: That was fun. Yeah, there's some fun stuff. I've never seen Douglas Crockford before. He was there. Have you ever-- Dave: Oh, okay. Yeah. Chris: --met him or seen him? Dave: I have met him and seen him before. He would not ever remember meeting me, but yeah. He's a crotchy old man. Chris: His talk... He seemed friendly. I had all these moments. I kept thinking of moments to make a joke about JSON - or something. And I just didn't because, in each case, I could see him there in the audience. [Laughter] I don't think he was at my talk, but I was on a couple of panels while he was there. I kept thinking, "Oh, my God. I better shut up," because I hadn't even said, "Hi," yet. You know? I feel like if we had met each other, it'd be funny to do it. But have the first thing that somebody has ever said be a jab at JSON. Dave: Would you go so far to say you did not want to comment in JSON? Chris: [Laughter] I will not comment. Dave: Ha-ha-ha-ha-ha. Chris: Yeah, I was on a panel about making mistakes. And it was like, "Chris, what mistakes have you made?" I'd be like, "I forgot to put trailing commas in the JSON specification." [Laughter] Dave: [Laughter] That's good. Chris: But I couldn't do it. His talk did have some stuff about JSON in it. It started that way, which is a little unavailable. And it's kind of like what the people want to hear. You know? Dave: Mm-hmm. Yeah, play the hits. Chris: It's like hearing the Steve Miller band play "Fly Like an Eagle," or whatever. You've got to do it. Dave: You've got to play the hits, man. Chris: You've got to play the hits. And he had some regrets in there. Not anything that immediately you'd think of, I think. He thinks of null as a mistake. That's one of the valid values for a thing. He's like, "It's just not necessary." Dave: Null and undefined. Yeah. Chris: Yeah. Dave: Nonexistence is null kind of deal. Chris: Nonexistence is null, so why would you put it at all? Yeah. Dave: Hmm-hmm-hmm-hmm-hmm. Chris: I think, except for then you could still iterate it over. I don't know what the thing there was. Then there were a couple of mistakes, but none of them were the things that you think of. I think of mostly comments and trailing commas. I want those things. Dave: Yeah. Things that are helpful. <a href="#t=00:16:23">00:16:23</a> Chris: But then he kind of goes into inventing a new format. The way that he thinks about JSON, I feel like, is a lot different than how we do - for some reason. He's just much more computer science-y than your average random front-end developer that digest JSON. Dave: Mm-hmm. Chris: He talks about this new format and how much more flexible it is. It has more types. But it's all the way down to like a byte format. Dave: Oh... Chris: He talked about lots of advantages of this new format except for that it's not human authorable. That seemed-- Dave: It's kind of like an RPC kind of deal? Chris: I think so, yeah. Dave: It's like you have a contract with types. Chris: There's a continuation bit. Dave: Yeah. Okay. Chris: Right. Yeah, it was a little above my head, I'd say. But one of the types in it -- because it's all the same types and more -- one of the types in it is like a blob. Dave: Okay. Yeah. Chris: Meaning - whatever - a JPEG. Dave: You send blobs over wire. Chris: Yeah, it can be a binary format in which JSON cannot. But we do have blobs in JavaScript. I get that JSON is not JavaScript, but it does seem like you could extend it with that - or something. Dave: Mm-hmm. Mm-hmm. Yeah. I mean it's just a JavaScript object notation, so it's an object that notates some sort of key value pair system. Chris: Yeah. I think the new format is called Nota because he made a joke that's like the whole name is bad. It's like the name JavaScript is already bad because it's not Java and it's not a script. [Laughter] So, those two words sucked. Then object is weird because it's not really an object or the way that people in Java think of as an object. It's very not that, so they really don't like it. Dave: Mm-hmm. Chris: The only word in Jason that's any good is notation. So, he took that one and just called it Nota, which I think is the new format. Dave: Okay. <a href="#t=00:18:25">00:18:25</a> Chris: But he did make a very strong point. He's like, "Listen. I have never versioned JSON at all." In fact, he'll hand out a business card, and the entire spec of JSON fits on the business card, which I think is a classy little move. Dave: [Laughter] It's like, "Rule number one: No functions. No block." [Laughter] Chris: You can go to jason.org, too, and that whole page is very... There's just not much there. It also is the whole spec. You can see the kind of white box on the right is, like, "That's it. That's the spec." It's never changed ever. It just was invented or discovered (as he's once put it) and then that's it. It's been the same forever. In this world of just unending constant change, this has never changed. It has never changed. It's not versioned and, in his mind, it will never change. Dave: Mm-hmm. Mm-hmm. Chris: There will never be a JSON 2 that has - whatever - trailing commas and comments and whatever other little niche features that you think it should have. He's just not going to do it. Now, other people might do it, and he even lists criteria for that. I forget what they all were. One of the criteria, though, is: make it substantially better. I think that was his poke at the idea that, like, don't just add the comments. That's not substantially better enough to cause the churn that it's going to cause. Dave: Fair. Fair, I guess. Chris: Yeah. Dave: Yeah, I mean I guess you introduce... If JSON 2 comes out and they say, "We support comments," and everyone starts chucking comments in their JSON, every JSON 1 app dies. Right? It would just choke. Chris: Yeah. Yes. Totally. Dave: Okay, I want to do it less. Chris: Yeah. [Laughter] Chris: Right. Dave: Yeah, yeah, yeah. <a href="#t=00:20:20">00:20:20</a> Chris: There are little moments where I think it's a little bit fine. The example I think of is Microsoft. When you go into VS Code, and you go "setting," look at your personal settings, it's like a UI look, but also you just click that little button - or whatever. It's really just a chunk of JSON is all your settings. That only ever is ever digested by VS Code. It only matters to one thing in the whole world, which is VS Code. It actually uses JSON C internally. You can write comments in there. Just go ahead // write whatever you want in there. That was Microsoft saying, "We actually are going to use a variation of JSON in here, and we can do that because we just can. It's only used in that one context. It's not sent across networks." It might be to some regard, but it's not this interchange format meant for two unknown parties to communicate. Dave: Mm-hmm. Chris: It's VS Code talking to VS Code. Dave: Right. Chris: In that case, I think it's kind of cool. Dave: It's not a syndication. It's just - whatever - a private store. Chris: Yeah. Dave: Yeah. Interesting. Yeah. Chris: It was fun. Zach was there from 11ty. It was cool to hang out with him. Dave: Cool. <a href="#t=00:21:41">00:21:41</a> Chris: Interesting case of JSON not taking over is RSS. Now, there's that JSON feed. I think it was jasonfeed.org - or whatever it is. Dave: Mm-hmm. Manton Reece, yeah, kind of was involved in that. Chris: Yeah. Dave: Yeah. Chris: Right, and I don't know. It's one of those, like, can this start to slowly win? Dave: Mm-hmm. Chris: Wouldn't that be nice? I even asked Zach. I'm like, "Well, is 11ty supported?" Oh, yeah, absolutely. We have JSON feeds. I'm like, "Do you have it on your site?" "No. No." Dave: No. Chris: [Laughter] I don't know. I feel like if it's going to take off, we need to all start actually doing it. Dave: I do think it's a lot cleaner than RSS. Chris: Oh, God. Yeah. Dave: I don't know. Those are kind of... I don't know. As much as I love them, they are pretty brutal object formats." Chris: Mm-hmm. Dave: You write your first C-data statement, and you're like, "What did I do wrong here?" [Laughter] Dave: How did my life get me to here? <a href="#t=00:22:50">00:22:50</a> Chris: In the Discord there was a funny one. There's the tech nerd guy in the show "Slow Horses," which I really need to get into. So many people love it. I have not seen it, but there's an image of the nerd. Apparently, there's a nerd character on it who, on his desk, has an easily thousand-page book about XML. Dave: Yes. Perfect. Chris: I'm like, "Wow!" Here I thought it was angle brackets with data in it, but probably not. It was a savior at one point. People thought XML was the real big deal there. It infected HTML for a while. Dave: People thought it was going to take over, and there was a moment where XHTML2 Strict was what you did. Chris: Yeah. Yeah. Dave: Then there was a moment where they were just like, "There's going to be no HTML. It's just going to arbitrary XML that gets rendered by an XSTL (XML style sheet)." Thank goodness that didn't happen. Chris: Yeah. I think, at the moment, that was definitely worse. Somehow I thought it was cooler - or something. Maybe it was a little newer at the time and my young brain was like, "Newer is better." Or I liked the letter X - or something. I was like, "Yeah, X." Dave: I do like X, yeah. Chris: Somehow, X is better. Dave: It's extreme. It was the X-Games, that era. Chris: Yeah. Dave: But, well, I think it was also a gateway drug. There was this pressure to validate your website, which is an old concept (but you can still do it) where you validate your markup and XHTML Strict, it would break if you did it wrong. Then XHTML Transitional was a little more permissive about stuff. Then it just was... Yeah, I don't know. It was like you could run it through the validator and it would tell you if you did a good job on your website, and that was great. Everyone would be like, "Great, I did a good job." Chris: Mm-hmm. Dave: Then I'm going to blame Paul Irish came along and said, "You could just put doc type lightning bolt," and [laughter] that's legal. Chris: Mm-hmm. Dave: Or dock type HTML, and that's a website. It was like, "What?! Now that's cool because that's less." <a href="#t=00:25:08">00:25:08</a> Chris: Yeah. It came up for me today because I was looking at putting together just a little template (kind of for myself and kind of because it makes a half decent blog post) about HTML email and my desire to use it a little bit. I've had this tirade forever where instead of using HTML email to do, like, "Columns and have big images, buttons, and calls to action, GIFs, and everything... Ack! We have all of HTML. Let's go crazy," almost pretend like it's still a plain text email. Use semantic HTML, but because it's an HTML email, you can adjust the line height. You can rein in the line length. You can make links out of words instead of having to just paste the entire URL to see. There are just a few things that's nice about HTML email, and just use only those things and nothing more. How little can you do to pull that off, I was kind of exploring. The answer is not little enough. You cannot provide a very chill HTML 5 document with the chill doc type and all that stuff and have it render decently in Outlook 2007 or Office 365 and stuff. There'll just be problems, so you still need... You have to use a table if you're going to rein in that width and all this stuff. There's still kind of a lot you have to do to get full coverage on that look with a fallback that isn't super gross. But I did validate that you can mess with the doc type. There's a gross table layout, and I was like, "I'm just going to change just the doc type to the HTML 5 doc type and see if Outlook 2007 still respects all the stuff, and it does." I was like, "Well, that's my one small win here is that at least the modern doc type in email can be chill." Dave: Yeah, that's really surprising to me just because it seems like Microsoft is hell bent on eliminating the sins of IE. [Laughter] But for their email client they're like, "Only use the old one, guys." Chris: Hmm... Dave: Only old stuff. Chris: No, they want to. I'm sure that's another building far away from any building you've been in, or who knows. Dave: Oh, yeah, yeah. Chris: It's just such a big company that who knows, but I have a feeling. They even had an initiative at one point to fix it somehow. But you know it's arguably a harder problem than browsers are. Dave: Mm-hmm. Chris: At least with browsers it was like, "It was just IE and now Edge." There's just one. Dave: Yeah. Chris: But email, there is absolutely not just one. There's like 15 just from Microsoft. Dave: Yeah. Yeah, I mean I think if it's Outlook 2007, there's certain people with arcane knowledge maintaining it. You know what I mean? Chris: Right. Dave: Yeah. Chris: I forget why that one is of significance, but it is somehow. But then there is Web-based ones, and there is not. There's client-based ones. <a href="#t=00:28:23">00:28:23</a> Dave: Well, the Web-based emails are a miracle to me. When I see a blog post rendered in an RSS reader, I'm like, "Wow! How'd you do it?" Chris: Hmm... Dave: Sometimes, you know. Chris: Yeah. Dave: Or where they kind of mess with the images and make them full bleed. People do tricks with them in different... I'll shout out Feedbin does a really great job rendering RSS feeds. They'll take YouTube videos and they'll do a custom embed and stuff like that. It's really impressive. Chris: Yeah. Dave: But when an email client does it, man-- Chris: Also, they're not iframed. At least in Gmail and other ones I've seen. They don't appear to be, anyway. I don't know if they use some Shadow DOM thing. I don't think so, though. Why that's so wild to me, even in this little typographic email thing I was just talking about, the CSS that I wrote to colorize the links, for example, you know what the selector is? A. A{color blue} -- whatever the blue color I choose for the email is. If that's rendered on a webpage, that A CSS will bleed over the entire interface of it if it's not iframed. Dave: Wow. Yeah. Chris: How is that being determined and scoped and all that? It even is relevant to just a reply to an email. You get an HTML email, and then I just hit the reply button, now it's still that same email, but you need that A to not bleed outside of the reply to that email. It's just... Oh, my God. Ugh! Yuck! Dave: Yeah. Yeah. No, it's... Yeah, the replies and how they break code up. Some add those blue reply lines and all that junk. It's hard. Chris: Yeah, I'll say. Extra claps for all the work done, HTML rendering, and how all that works. The big joke is that "Oh, it uses Microsoft Word as a rendering engine." I guess it's not a joke. It's true. It's just that the reasons why have always been a little unclear, I think. I'm sure there are very good reasons for it. Just up and not doing that anymore also causes problems, I'm sure. Dave: Yeah. I'm sure there is. Well, and email is such a huge vector of attack, like security stuff. Chris: Yeah. Dave: Just phishing and whatever. That's hard. Chris: Certainly, the temptation is, "Just use whatever the rendering engine is for a browser." Dave: Yeah. Chris: It's HTML, so use an HTML thing. Dave: Right. Chris: Not that simple. Not that simple. Dave: Yeah. I bet your threat model is huge. <a href="#t=00:31:15">00:31:15</a> Chris: Things do get simpler over time. One thing you can do is you could have an engine where the JavaScript engine is just completely turned off. You better. Dave: Mm-hmm. Chris: You know? Dave: Mm-hmm. Chris: That would be smart. Dave: I would love... I always fantasize about making a browser that had no JS engine and maybe no CSS engine. [Laughter] I'd just say, "If you have body," and then I take the first header, and I pretend that's your main navigation. I kind of chuck it somewhere to the side. Then I take the main content, and I lay that out. If you have a search thing-- Chris: Indie HTML renderer. Dave: Yeah. Chris: I love it. Dave: That just takes over. It's almost like links, but the command line browser, but a little more opinionated or something. [Laughter] Chris: Yeah. Dave: I don't know. It'd be interesting what you could do. Chris: It's not unheard of. That's a little unheard of. But remember how Amazon Silk, that's a browser? Dave: Yeah. Yeah. Chris: It would... In a sense, it cloud rendered the website. Dave: Mm-hmm. Mm-hmm. Chris: Then what it sent down was almost like a PDF. Dave: Mm-hmm. Mm-hmm. Chris: Because it was an image of the website that you could scroll, but it retained some interactivity. Whatever the click regions were, were still active click regions. Dave: Yep. Chris: It was like an image with an image map on it. I don't know if that's fair, but-- Dave: Opera Mini did that kind of, too. Chris: Yeah. Dave: It would just give you a fake version of the website. I guess reader modes do that, too, now. I'm kind of basically describing reader mode for the entire Internet. Chris: Yeah, perhaps. Dave: But I don't know. I don't have the time to do that, so I'm not going to do that. Chris: But reader mode has to get the whole website; kind of render it. I don't know if it needs to render it, actually. Dave: It does. Yeah. Chris: Then figure it out. Dave: I mean it needs... Yeah, it needs text on page, right? If you're hydrating-- Chris: Mm-hmm. But it doesn't solve... What was cool about Silk in Opera Mini is that it avoided downloading the entire website. That delivering this rasterized version of it was one request. Dave: Mm-hmm. Chris: So, it made it way faster in those bandwidth constrained environments. Dave: Yeah. Chris: Which is just cool. Dave: Yeah. Chris: Good idea. Dave: Slurped out images and all that. Chris: What if the Web was a rendered target? What if instead of that network tab with 37 requests, it was one because what it got was a dot-website file - or something. All that work was already done. That is an alternate version of the Internet that's interesting to think about. Dave: Like fully compiled websites? Chris: Yeah. Dave: I know Google tried to do that with Amp and stuff like that. Chris: Yeah, I guess it was closer to that. Dave: Basically close to that, right? Or just one CSS file, one JavaScript file, one HTML file, plus images. Then they did the trusted bundle thing. Signed bundles. I forget what they called them. I don't know. I wasn't a fan of that. Yeah, it is interesting to think, and how far away are we from that because we do run giant servers to compress hundreds of megabytes of application data into a single screen. We kind of do that already. But then we just send 50 files down to the client. Chris: Yeah, we do. I guess this dovetails nicely into that conversation about compiled JavaScript. Dave: Oh, yeah. <a href="#t=00:34:53">00:34:53</a> Chris: The point was made during all that, which is... We'll back up and explain more, but the idea is we run a ton of build processes already. Most websites, perhaps you could argue, run some kind of build process to produce them. Because we're doing that anyway, why don't we just lean into that a little more all the way down to the language level? Do you know what I'm talking about? Dave: It was a proposal, we should say. No one made this - or whatever. Chris: Yeah. Dave: The TC39 met, and somebody (I think from Chrome) proposed two JavaScripts: js0 and jsSugar, which is a cool rapper name. Chris: Mm-hmm. Dave: So, js0 is basically the platform, base platform. Then if you want to add features to it, you are jsSugar. That compiles down to js0. If you wanted to add--I'm just going to pick--async await, that was a huge language feature. The argument is, every time they roll out a language feature it open up all these security holes, all these problems, all this. It's a high lift to get a new thing into JavaScript core. The idea was let's... I think people misinterpret it, but I think it was also not clear. But the idea was, "We'll freeze what JavaScript does, and then anything new," like let's say async await - we'll rewind the clock, "async await would be--" The syntax, you could custom sugar syntax that you could write that then transpiles down to promises - or something like that. I think that was... I don't know. When I saw the deck the first time, I was like, "Oh, hell no." Then Nils in the Discord kind of broke it down. He wrote a blog post, too. We can post it here. But it was... I think the more I read through it all, I was like, "I sort of see what they're saying." I love the idea of JavaScript being a scripted language, like you just write it and it works. You don't have to compile nothing. But I did sort of hate it less when I read through it. Chris: Yeah. Don't know. I mean it feels like one of these lifts that's like, "Well, that's not going to happen." [Laughter] Dave: Yeah. Chris: There's just way too much. Way too much - I don't know. What do you call that? Momentum with the current processes. And, sure, it's a big lift, but stuff happens all the time. Did we get async await? Absolutely, we did. We get big stuff all the time. How big of a problem really is this? The problem is, I kind of get it. There are features that drop in JavaScript. A lot, actually. It's just ever-changing language, unlike something like Go, by the way, which changes super slowly and offers very little sugar anything. Dave: Mm-hmm. Mm-hmm. <a href="#t=00:38:08">00:38:08</a> Chris: It's just a different way of rocking a language that I feel like people are liking more and more. JavaScript, with its ever-changing nature is like, "Oh, my gosh. What do we need to learn now? And is this just somebody's little pet project?" But there are certain things that are absolutely just syntactic sugar. Some people argue that most things in languages are just syntactic sugar. But you could imagine some new kind of way to loop over arrays or something. Dave: Mm-hmm. Chris: You're like, "Look at this! That's a new way." In fact, I just saw one. I was looking at this other post. Pawel Grzybek - or something - a great blogger. Dave: Oh, yeah. Yeah. Chris: Earlier in August. What's new in ECMAScript 2024? It's just a list of the new things that are now in ES 2024. There's one of them called -- Gosh, what was it? -- array group, array grouping. Dave: Yeah, that's cool. Chris: So, there's going to be now object.groupby. Yeah, it is kind of cool, right? Dave: It's my favorite function. Yeah. It's my favorite way to group objects. Chris: [Laughter] Now I can't even tell if you-- Dave: I used Lodash - or whatever - before, right? You'd always reach for something to do this before. Chris: Yeah. Yeah. Dave: Basically, organize by whatever. If I have a list of blog posts, organize them by tag - or something - or author. Chris: Something that's inside the object. Dave: Yeah. Chris: That's in the array, so it's one level nested deep. But this will look into the array and pull a value out and give you a callback function so you can group them by something else. It does look nice. It also looks very Polyfillable or very Lodashable, as it was. It was literally in Lodash, right? I think this would say that we should not add that directly to the language of JavaScript. Dave: Yeah. Chris: That belongs in some higher abstracted thing. That I get. Leave it at some other step. Dave: I get that. But I also like, "Let's make it better." You know? What I love is these are backed by C binaries, right? The C binary for array group is hopefully be faster than me doing it on the client in JavaScript. Give me that. I want that. I don't want the language to freeze. I want it to get better. Chris: Kind of. The famous one in Go is that there is only a for loop. That's it. That's the only kind of loop that you can have. Dave: Mm-hmm. Chris: That's on purpose because it's the fastest kind. Dave: It's the fastest. Therefore, the best. Chris: Yeah. [Laughter] Chris: But that's the deal. And if that were true in JavaScript, then you want all other types to be syntactic sugar. You want something to compile it down to a for loop because that's what it needs to be to be fast anyway. <a href="#t=00:41:12">00:41:12</a> Dave: You can take for each from my cold, dead hands. Chris: [Laughter] That's a good one. Dave: For of. Chris: Like for of, for in. Dave: For in, map. I'm going to put map under the bus, man. Chris: I don't like them because I can never remember. Dave: Oh, yeah. One is good and one is from the 1930s. [Laughter] Dave: For of and for in. You're like, "One of these is not the right one." Chris: It just doesn't explain the difference well. It's not a big problem in my life. I could just figure it out in two seconds. But I like features that are a little more self-explanatory. Dave: Yeah. Yeah. Chris: But then there are other things that feel like they cannot be in that same category. The very first one in Pawel's post here is about testing the validity of the Unicode version of emojis where you can see if that's well formed or not. It's kind of like a language feature that needs to talk to some deeper part of a Unicode standard. To me, it feels like you can't ship that in the same way. In the world of CSS land, it reminds me of container queries. You can't just Polyfill container queries. It's not happening. There's no alternate syntax that just makes container queries work. It needs to be part of the browser itself to work. But I guess that's the point here is that sometimes that's the case. And if it needs to be a low-level language feature because it needs to talk to the computer, the browser, and deeper things, then it can go in js0 - or whatever. But if it's just sugar and it can be compiled away, then it should be in the other thing. It's so theoretical. Dave: [Laughter] I just searched "jsSugar" on my work computer, and I'm going to get a call from HR, dude. [Laughter] Dave: It is routing to very bad Japanese websites or elicit. Not bad, I guess, but elicit Japanese websites. I'm in trouble now, dude. I got fired because of JavaScript. Chris: jsSugar. Dave: Oh, man. I was thinking we need to maybe put some T-shirts... We should spin up a shop. "Take for each from my cold, dead hands" is a good shirt. What was I thinking of earlier? "Sundays are for RSS" would be a good one. Oh, shoot. I had another one that was really good. But anyway, we have a few catchphrases we need to do, man. "Macho Man Randy Standards," would be good. Chris: I'm happy to do it. I'm happy to do it. Dave: Ooh, yeah. Chris: Now that we've reached the age where we realize that there's no money in T-shirts. They're only for fun. Dave: Yeah, and it has to be print on demand because I know fast fashion is bad, but I also cannot have another box full of T-shirts in my house ever again in my life. [Laughter] I'm forbidden from having that. Chris: Yeah. Dave: Oh, boy. <a href="#t=00:44:15">00:44:15</a> Chris: We have a few questions we could get to from the people. Dave: Sure! Chris: Here's one from Darby Dixon III. Amazing name. I hope that's your real name. Dave: It's a power name. Yeah, that's good. Chris: Yeah. Dave: Good name. Good name. Chris: It feels a little southern, doesn't it? Dave: Yeah. Yeah. Chris: Draws a line between two different types of websites in this question saying works for a university, knows Drupal. It's a big Drupal deal. Big, complex, whatever. Then builds other stuff where he just uses Netlify and a little 11ty - whatever - for small sites and thinks of those as two kind of extremes: simple SSG, simple hosting, whatever, and monolith Drupal bad boy thing. Fair enough. "But there's a point between those two extremes where I want to nerd out a bit and extend my skills and just use a tiny bit of database. I want a website with, say, a single piece of dynamic data that I can do an admin backend so I can update that piece of data when and wherever, and I can channel that piece of data into a nice, light, public site. So, a little bit of database. What would you use for a little bit of database?" Dave: There's a lot of headless CMS tools, right? You've got your hosted ones like Contentful. Chris: That's out immediately to me because I'm like, "Oh, it's like $550 a month," or whatever. Dave: Yeah. Chris: It's really for enterprise. Dave: It got expensive. Chris: Yeah. Dave: Strapi is another cool one that you could do. You just need a database in the cloud. Go to Heroku. Get the free one. Chris: Sanity is a good one, I think. Dave: Sanity was the one I couldn't think of. Yeah. But you could do Heroku. Spin up a database in Heroku. Bing, bong - that's zero dollars or $8 a month or something. Then you get on a thing like Retool or something that hooks into that database. But the trick is now your small app needs to hit the database securely. You're talking about either at runtime hitting it, which you probably need a serverless function. Chris: Yeah. Dave: I would even maybe look at the cloud workers over on Cloudflare to hit that. Chris: Mm-hmm. Well, that's where I'd stop immediately because I would just go KV. Dave: I think you're right. Yeah. <a href="#t=00:46:50">00:46:50</a> Chris: You need a little bit of database. That's the point of it. KV meaning key value meaning it's not like PostgreSQL. It is not a relational database that you cannot SQL query it. It's like a flat DV. It's super dumb on purpose. You have a key and you ask for the value of that key and it gives it to you. In your case, Darby Dixon, you could say, "My data is the key, and the value of my data is like - I don't know," it could be an integer or a string or, more likely for you, a little piece of stringified JSON that you pluck out and you do whatever you're going to do with it, and you put it back as JSON. Now, the cool thing about this is a cloud function like that, you can hit client-side. It will have a URL, and you could fetch against it if you want to. But what's kind of cool is it's a little confusing to think about but where a Cloudflare worker can run can be pre-request. As it's serving the HTML, you can run the worker during that phase, such that the HTML that it's delivering already has been manipulated by the worker (if need be). Meaning, you could take that chunk of JSON and drop it in a text area, hidden text area, to grab - or something - or inject a script tag and say "window.data," "window.bydata=" that string of JSON - or whatever. You can do that kind of thing, meaning a client side request for the data is not even necessary. It's already there, which adds just a little bit of power to it. Now, I went kind of deep in the weeds a little bit there, but the point of that is spitting up a PostgreSQL and making authenticated client-side functions to hit it is a lot. Dave: Well, yeah. Chris: It's super doable. Dave: The more I was talking, the more I was like, "Golly. Ugh." Chris: Yeah. <a href="#t=00:48:55">00:48:55</a> Dave: I think KV would be awesome. You get an admin dashboard for KV that is, like-- Chris: Totally, you do. Yeah. Dave: Is that a problem, though, if I'm taking customer data, like, "Enter your social security number," and I just have it in an app? Chris: Well, every app has that problem. Dave: Okay. Yeah. I guess so. Chris: If you have a team or something, Cloudflare (the website itself) has roles and permissions and whatnot that you can give different people access to different parts of stuff. Dave: Mm-hmm. Okay. Yeah. No, I think... Yeah, I would probably say Cloudflare KV is the right choice for, like, you just need a little bit of data. Chris: Yeah. Dave: Yeah, because otherwise you get into this whole big security context of, like, "Okay, only the authenticated admin user can hit this endpoint." If that's what you want to build, that's awesome. You could do that. I would also maybe look at Turso or something, like one of these SQLite kind of things, just to hit a database. Chris: Yeah. I'll note that since you already use Netlify, this came a little later but Netlify's Netlify Blobs that are kind of the same thing. Dave: Okay. All right. Chris: That's if you-- Dave: Didn't know about Netlify Blobs. Chris: Yeah. It's unstructured data. It has a simple key value data store thing. They could also be... I think they're even more flexible. Dave: All right. Chris: And very easy to write. Dave: Well, there you go. No, I mean I think that's a really easy way to do it. I guess it's just kind of how big do you want to go. How much data are you updating? Is it really just one key value? Then make it as easy as possible on yourself. Then that's where I was... With the database rights. Now you have this whole caching layer you need to do so you don't throttle your database every time you refresh the website. Then you have this whole thing. That's where that Cloudflare seems like really durable (would be the right word I want to use). Chris: Yeah. We're talking so abstractly. Do you need auth anyway because what you're trying to build has that? Well, that just jumps you up in complexity a whole bunch. <a href="#t=00:51:19">00:51:19</a> Dave: Brad Frost, the other day, tweeted or posted on Mastodon about, like, say you want to build a simple website. What would you do? It's a fun thought and experiment, but I think we were talking in the Discord. I think it would be really fun to be, like, "How would you build this given these client briefs?" The client is based in Washington. The client only has three engineers. The client has this and that. Really picky about fonts. Wants to tinker and update the text of the website every single day. You could go through all your client, your past client, nightmare clients, and just write them out fully abstracted. Chris: Mm-hmm. Dave: Just be like, "How would you build a website for this person with these needs?" Maybe you mix and match all these things and randomly generate it. Chris: It feels like you're describing a prompt for AI, doesn't it? Dave: Sort of like a prompt for AI, but then it's up to people. The original idea in the Discord was we had a bracket, like a Final Four bracket of CMSs and technologies and whatever. Chris: Mm-hmm. Dave: Everyone would pick their favorite one. 11ty is at the top. It wins, right? But given this set of circumstances, who wins the bracket? I think it would be a neat way to battle royal things. It would be a fun play at home game or on stream game. Maybe I'll build it. I'll build it. Chris: Okay. Dave: No, I'm not going to build it. I'm too tired. Chris: It does seem that the answer to the general question of what are devs going to do to quickly spin up apps in the future - or whatever. It does seem like -- like it or not -- it's probably going to be AI something. Dave: Maybe. Maybe. Yeah. Chris: We'll see. Dave: Vite is really good, too. [Laughter] <a href="#t=00:53:24">00:53:24</a> Chris: Yeah. I'm thinking of, right now, kind of the most impressive thing that's happened recently is that StackBlitz announced this bolt.new. Have you seen it? Dave: No. Chris: Have you typed in bolt.new yet? Oh, gosh. You should. It's wildly impressive to me. It's one of these... It's a little bit like Vercel's V0 - or whatever. Dave: Oh, okay. Chris: You do have to do a prompt, but it has a bunch of examples and stuff, too. But type in kind of whatever, and it scaffolds out a whole ass working app for you based on your prompt. It does pretty good, to me, like way, way better than I thought it would. It has... I don't know how it's all built or anything, but I wanted it to make an email for me because I've been thinking about this email stuff. I'm like, "Scaffold out a little HTML email for me," and it's like, "First, install Next.js." It made a TSX (TypeScript typed thing), and then it made an email. The end result was kind of cool, but I was like, "Well, that's the worst set of technologies you could have possibly chosen." I'm not even trying to poke at it because the audience for this thing is designed to build stuff with JavaScript apps. That's what people use StackBlitz for. It's pushing you toward that kind of thing that StackBlitz is good at doing, so no real shade. I am kind of impressed at what it's able to do, though. It makes me think, "Well, of course, this is how people are going to get started." They're going to be like, "Give me this boop-a-doopa-doo." Dave: Uh, well... [Laughter] I said, "Can you build me a search results page with fluent UI Web components?" and it started using the React component. So, anyway, nailed it, dude! Chris: [Laughter] Yeah. Dave: Way to go. Yeah. Chris: It really likes React, so it's going to push you towards that. Dave: Love React. Let's see what it gets out. But anyway, all right. Well, hey, I've got to go. I've got meetings firing up. Chris: Okay. All good. Dave: We'll see. Next week... Tune in next week to find out if AI built a website. [Laughter] We'll find out. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. Adam Argyle pointed out that, on 2x, that sounds like "shart." So, when I say, "Star, heart, favorite it up," it sounds like "shart." Chris: [Laughter] Dave: I'll just start saying that, so shart it up in the apps, man. [Laughter] Dave: Shart it up in the apps. Then follow us on Mastodon. That's the good one. Then join us in the D-d-d-d-discord because that's where cool people hang out. All right, Chris. Do you got anything else you'd like to say? Chris: I just feel like when you shitting and you fart, it's fine. But if you're farting and you shit, it's a problem. You know? There needs to be different words. Dave: Mistakes happen. Yeah. [Laughter] Chris: ShopTalkShow.com. </section> <div class="read-full-transcript-area" id="read-full-transcript-area"> <button class="button full-transcript-button" id="full-transcript-button">Read Full Transcript</button> </div> <div> <div class="related-posts bar-over"> <h2 class="mini-header">Related Shows</h2> <div id='jp-relatedposts' class='jp-relatedposts' > </div> </div> </div> <section class="show-nav"> <div class="show-nav-grid"> <a href="https://shoptalkshow.com/638/" rel="prev">← Prev Episode</a> <a href="https://shoptalkshow.com/640/" rel="next">Next Episode →</a> </div> </section> </main> <footer class="site-footer"> <div class="apply-typography"> Copyright © 2024 ShopTalk Show. All rights reserved. <a href="https://twitter.com/shoptalkshow" class="twitter-follow-button">Twitter</a> <a href="https://front-end.social/@shoptalkshow">Mastodon</a> <a href="/series/">Series</a> <a href="https://www.youtube.com/c/shoptalkshow">YouTube</a> <a href="/feed/podcast/">RSS</a> <a href="/advertise/">Advertise</a> </div> </footer> </div> <div class="jetpack-instant-search__widget-area" style="display: none"> <div id="jetpack-search-filters-2" class="widget jetpack-filters widget_search"> <div id="jetpack-search-filters-2-wrapper" class="jetpack-instant-search-wrapper"> </div></div> </div> <script type="text/javascript" src="https://c0.wp.com/c/6.6.2/wp-includes/js/dist/hooks.min.js" id="wp-hooks-js"></script> <script type="text/javascript" src="https://c0.wp.com/c/6.6.2/wp-includes/js/dist/i18n.min.js" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" src="https://shoptalkshow.com/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-assets/build/i18n-loader.js?minify=true&ver=becd7d9884bc1b331e45" id="wp-jp-i18n-loader-js"></script> <script type="text/javascript" id="wp-jp-i18n-loader-js-after"> /* <![CDATA[ */ wp.jpI18nLoader.state = {"baseUrl":"https://shoptalkshow.com/wp-content/languages/","locale":"en_US","domainMap":{"jetpack-admin-ui":"plugins/jetpack","jetpack-assets":"plugins/jetpack","jetpack-backup-pkg":"plugins/jetpack","jetpack-blaze":"plugins/jetpack","jetpack-boost-core":"plugins/jetpack","jetpack-boost-speed-score":"plugins/jetpack","jetpack-classic-theme-helper":"plugins/jetpack","jetpack-compat":"plugins/jetpack","jetpack-config":"plugins/jetpack","jetpack-connection":"plugins/jetpack","jetpack-explat":"plugins/jetpack","jetpack-forms":"plugins/jetpack","jetpack-image-cdn":"plugins/jetpack","jetpack-import":"plugins/jetpack","jetpack-ip":"plugins/jetpack","jetpack-jitm":"plugins/jetpack","jetpack-licensing":"plugins/jetpack","jetpack-masterbar":"plugins/jetpack","jetpack-my-jetpack":"plugins/jetpack","jetpack-password-checker":"plugins/jetpack","jetpack-plugins-installer":"plugins/jetpack","jetpack-post-list":"plugins/jetpack","jetpack-protect-models":"plugins/jetpack","jetpack-protect-status":"plugins/jetpack","jetpack-publicize-pkg":"plugins/jetpack","jetpack-search-pkg":"plugins/jetpack","jetpack-stats":"plugins/jetpack","jetpack-stats-admin":"plugins/jetpack","jetpack-sync":"plugins/jetpack","jetpack-videopress-pkg":"plugins/jetpack","jetpack-waf":"plugins/jetpack","jetpack-wordads":"plugins/jetpack","woocommerce-analytics":"plugins/jetpack"},"domainPaths":{"jetpack-admin-ui":"jetpack_vendor/automattic/jetpack-admin-ui/","jetpack-assets":"jetpack_vendor/automattic/jetpack-assets/","jetpack-backup-pkg":"jetpack_vendor/automattic/jetpack-backup/","jetpack-blaze":"jetpack_vendor/automattic/jetpack-blaze/","jetpack-boost-core":"jetpack_vendor/automattic/jetpack-boost-core/","jetpack-boost-speed-score":"jetpack_vendor/automattic/jetpack-boost-speed-score/","jetpack-classic-theme-helper":"jetpack_vendor/automattic/jetpack-classic-theme-helper/","jetpack-compat":"jetpack_vendor/automattic/jetpack-compat/","jetpack-config":"jetpack_vendor/automattic/jetpack-config/","jetpack-connection":"jetpack_vendor/automattic/jetpack-connection/","jetpack-explat":"jetpack_vendor/automattic/jetpack-explat/","jetpack-forms":"jetpack_vendor/automattic/jetpack-forms/","jetpack-image-cdn":"jetpack_vendor/automattic/jetpack-image-cdn/","jetpack-import":"jetpack_vendor/automattic/jetpack-import/","jetpack-ip":"jetpack_vendor/automattic/jetpack-ip/","jetpack-jitm":"jetpack_vendor/automattic/jetpack-jitm/","jetpack-licensing":"jetpack_vendor/automattic/jetpack-licensing/","jetpack-masterbar":"jetpack_vendor/automattic/jetpack-masterbar/","jetpack-my-jetpack":"jetpack_vendor/automattic/jetpack-my-jetpack/","jetpack-password-checker":"jetpack_vendor/automattic/jetpack-password-checker/","jetpack-plugins-installer":"jetpack_vendor/automattic/jetpack-plugins-installer/","jetpack-post-list":"jetpack_vendor/automattic/jetpack-post-list/","jetpack-protect-models":"jetpack_vendor/automattic/jetpack-protect-models/","jetpack-protect-status":"jetpack_vendor/automattic/jetpack-protect-status/","jetpack-publicize-pkg":"jetpack_vendor/automattic/jetpack-publicize/","jetpack-search-pkg":"jetpack_vendor/automattic/jetpack-search/","jetpack-stats":"jetpack_vendor/automattic/jetpack-stats/","jetpack-stats-admin":"jetpack_vendor/automattic/jetpack-stats-admin/","jetpack-sync":"jetpack_vendor/automattic/jetpack-sync/","jetpack-videopress-pkg":"jetpack_vendor/automattic/jetpack-videopress/","jetpack-waf":"jetpack_vendor/automattic/jetpack-waf/","jetpack-wordads":"jetpack_vendor/automattic/jetpack-wordads/","woocommerce-analytics":"jetpack_vendor/automattic/woocommerce-analytics/"}}; /* ]]> */ </script> <script type="text/javascript" src="https://c0.wp.com/c/6.6.2/wp-includes/js/dist/vendor/wp-polyfill.min.js" id="wp-polyfill-js"></script> <script type="text/javascript" src="https://c0.wp.com/c/6.6.2/wp-includes/js/dist/url.min.js" id="wp-url-js"></script> <script type="text/javascript" id="jetpack-instant-search-js-before"> /* <![CDATA[ */ var JetpackInstantSearchOptions=JSON.parse(decodeURIComponent("%7B%22overlayOptions%22%3A%7B%22colorTheme%22%3A%22dark%22%2C%22enableInfScroll%22%3Atrue%2C%22enableFilteringOpensOverlay%22%3Atrue%2C%22enablePostDate%22%3Atrue%2C%22enableSort%22%3Atrue%2C%22highlightColor%22%3A%22%23FFC%22%2C%22overlayTrigger%22%3A%22submit%22%2C%22resultFormat%22%3A%22expanded%22%2C%22showPoweredBy%22%3Atrue%2C%22defaultSort%22%3A%22relevance%22%2C%22excludedPostTypes%22%3A%5B%22attachment%22%2C%22podcast%22%5D%7D%2C%22homeUrl%22%3A%22https%3A%5C%2F%5C%2Fshoptalkshow.com%22%2C%22locale%22%3A%22en-US%22%2C%22postsPerPage%22%3A5%2C%22siteId%22%3A54408968%2C%22postTypes%22%3A%7B%22post%22%3A%7B%22singular_name%22%3A%22Post%22%2C%22name%22%3A%22Posts%22%7D%2C%22page%22%3A%7B%22singular_name%22%3A%22Page%22%2C%22name%22%3A%22Pages%22%7D%2C%22attachment%22%3A%7B%22singular_name%22%3A%22Media%22%2C%22name%22%3A%22Media%22%7D%2C%22series%22%3A%7B%22singular_name%22%3A%22Series%22%2C%22name%22%3A%22Series%22%7D%2C%22video%22%3A%7B%22singular_name%22%3A%22video%22%2C%22name%22%3A%22Video%22%7D%2C%22podcast%22%3A%7B%22singular_name%22%3A%22Episode%22%2C%22name%22%3A%22Episode%22%7D%7D%2C%22webpackPublicPath%22%3A%22https%3A%5C%2F%5C%2Fshoptalkshow.com%5C%2Fwp-content%5C%2Fplugins%5C%2Fjetpack%5C%2Fjetpack_vendor%5C%2Fautomattic%5C%2Fjetpack-search%5C%2Fbuild%5C%2Finstant-search%5C%2F%22%2C%22isPhotonEnabled%22%3Atrue%2C%22isFreePlan%22%3Afalse%2C%22apiRoot%22%3A%22https%3A%5C%2F%5C%2Fshoptalkshow.com%5C%2Fwp-json%5C%2F%22%2C%22apiNonce%22%3A%2234d23e2357%22%2C%22isPrivateSite%22%3Afalse%2C%22isWpcom%22%3Afalse%2C%22hasOverlayWidgets%22%3Atrue%2C%22widgets%22%3A%5B%7B%22filters%22%3A%5B%7B%22name%22%3A%22Post%20Types%22%2C%22type%22%3A%22post_type%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-2%22%2C%22filter_id%22%3A%22post_type_0%22%7D%2C%7B%22name%22%3A%22Podcasts%22%2C%22type%22%3A%22taxonomy%22%2C%22taxonomy%22%3A%22series%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-2%22%2C%22filter_id%22%3A%22taxonomy_1%22%7D%2C%7B%22name%22%3A%22Categories%22%2C%22type%22%3A%22taxonomy%22%2C%22taxonomy%22%3A%22category%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-2%22%2C%22filter_id%22%3A%22taxonomy_2%22%7D%2C%7B%22name%22%3A%22Tags%22%2C%22type%22%3A%22taxonomy%22%2C%22taxonomy%22%3A%22post_tag%22%2C%22count%22%3A5%2C%22widget_id%22%3A%22jetpack-search-filters-2%22%2C%22filter_id%22%3A%22taxonomy_3%22%7D%2C%7B%22name%22%3A%22Year%22%2C%22type%22%3A%22date_histogram%22%2C%22count%22%3A5%2C%22field%22%3A%22post_date%22%2C%22interval%22%3A%22year%22%2C%22widget_id%22%3A%22jetpack-search-filters-2%22%2C%22filter_id%22%3A%22date_histogram_4%22%7D%5D%2C%22widget_id%22%3A%22jetpack-search-filters-2%22%7D%5D%2C%22widgetsOutsideOverlay%22%3A%5B%5D%2C%22hasNonSearchWidgets%22%3Afalse%2C%22preventTrackingCookiesReset%22%3Afalse%7D")); /* ]]> */ </script> <script type="text/javascript" src="https://shoptalkshow.com/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-search/build/instant-search/jp-search.js?minify=false&ver=ad35b3c0c4998c47e4fc" id="jetpack-instant-search-js"></script> <script type="text/javascript" src="//stats.wp.com/w.js?ver=202448" id="jp-tracks-js"></script> <script type="text/javascript" src="https://stats.wp.com/e-202448.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"54408968\",\"post\":\"7929\",\"tz\":\"-6\",\"srv\":\"shoptalkshow.com\",\"j\":\"1:13.9.1\"}") ]); _stq.push([ "clickTrackerInit", "54408968", "7929" ]); /* ]]> */ </script> <script src="https://shoptalkshow.com/wp-content/themes/shoptalk6/javascripts/main.js?v2.0"></script> <script src="https://shoptalkshow.com/wp-content/themes/shoptalk6/javascripts/lite-yt-embed.js?v1.0"></script> <script type="module" src="https://shoptalkshow.com/wp-content/themes/shoptalk6/javascripts/podcast-player.js?v1.3"></script> </body> </html>