CINXE.COM

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="970buBKzbKqpYwYLs088hahcsfPP5w5IOBb5CS6eC8N6wDHFhuLZyxikR_yhamda_wrjFqRhTZJQcLpNh1rD8w" /> <meta name="transistor-theme" content="cardboard" /> <link rel="shortcut icon" type="image/png" href="https://img.transistor.fm/jCpzVgCd9DF-R6pJUHXTt8NCrTT9pWJfqaf4KRVJYV4/rs:fill:16:16:1/q:90/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9mYXZp/Y29ucy9zaXRlLzIy/MTgvMTU3MjI3ODIx/Ni1mYXZpY29uLnBu/Zw.png" sizes="16x16" /> <link rel="shortcut icon" type="image/png" href="https://img.transistor.fm/gq8w5bKHD_8PChH_jlpKwGMGDgLUqYlCedDoub4s7I0/rs:fill:32:32:1/q:90/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9mYXZp/Y29ucy9zaXRlLzIy/MTgvMTU3MjI3ODIx/Ni1mYXZpY29uLnBu/Zw.png" sizes="32x32" /> <link rel="shortcut icon" type="image/png" href="https://img.transistor.fm/PDNu38Wqhj9Buy80RVpfqHGTX-iJub-TmesxXgf5qnQ/rs:fill:64:64:1/q:90/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9mYXZp/Y29ucy9zaXRlLzIy/MTgvMTU3MjI3ODIx/Ni1mYXZpY29uLnBu/Zw.png" sizes="64x54" /> <link rel="shortcut icon" type="image/png" href="https://img.transistor.fm/FPYWCoj1SsPFhAyyvJ3RIy5cggz81TQ5w4WuKg0KoV0/rs:fill:256:256:1/q:90/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9mYXZp/Y29ucy9zaXRlLzIy/MTgvMTU3MjI3ODIx/Ni1mYXZpY29uLnBu/Zw.png" sizes="256x256" /> <link rel="apple-touch-icon" type="image/png" href="https://img.transistor.fm/FPYWCoj1SsPFhAyyvJ3RIy5cggz81TQ5w4WuKg0KoV0/rs:fill:256:256:1/q:90/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9mYXZp/Y29ucy9zaXRlLzIy/MTgvMTU3MjI3ODIx/Ni1mYXZpY29uLnBu/Zw.png" />  <meta name="twitter:site" content="@TransistorFM"> <meta name="twitter:title" content="Smashing Podcast"> <meta name="twitter:description" content="An interview show from your friends at Smashing Magazine. Drew McLellan and Vitaly Friedman talk to design and development experts about their work on the web, as well as catching you up with the latest news and articles at Smashing Magazine. Suitable for cats."> <meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://img.transistor.fm/qO6MWhXEe9uxmYqY6fs8UIoZ70ZwdvKN0DBdWDhgWpo/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9zaG93/LzUyMjcvMTU3MjAw/ODUxOC1hcnR3b3Jr/LmpwZw.webp">   <meta property="og:url" content="https://podcast.smashingmagazine.com"> <meta property="og:image" content="https://img.transistor.fm/qO6MWhXEe9uxmYqY6fs8UIoZ70ZwdvKN0DBdWDhgWpo/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9zaG93/LzUyMjcvMTU3MjAw/ODUxOC1hcnR3b3Jr/LmpwZw.webp"> <meta property="og:type" content="website"> <meta property="og:site_name" content="Smashing Podcast"> <meta property="og:description" content="An interview show from your friends at Smashing Magazine. Drew McLellan and Vitaly Friedman talk to design and development experts about their work on the web, as well as catching you up with the latest news and articles at Smashing Magazine. Suitable for cats."> <meta property="og:title" content="Smashing Podcast">  <meta content="An interview show from your friends at Smashing Magazine. Drew McLellan and Vitaly Friedman talk to design and development experts about their work on the web, as well as catching you up with the latest news and articles at Smashing Magazine. Suitable for cats." name="description" /> <meta content="web design, web development, ux design" name="keywords" />  <meta content="app-id=1485403438" name="apple-itunes-app">  <link rel="alternate" type="application/rss+xml" title="Smashing Podcast" href="https://feeds.transistor.fm/smashing" /> <script src="https://assets.transistor.fm/assets/sites-e0f42c6689a3360f50dce89cdab3fb08c010ad2481d51f73f873c02a6808286c.js" defer data-turbo-track="reload"></script> <script> document.addEventListener('alpine:init', () => { transistor.translations.add({ comments: {"headline":"Comments and Discussion","loading":"Loading comments\u0026hellip;","view_and_reply":"View post and reply on Bluesky","likes":"likes","reposts":"reposts","replies":"replies","join_discussion":"Reply on Bluesky \u003ca :href=\"postUrl\" :title=\"t('comments.view_and_reply')\" target=\"_bsky\"\u003ehere\u003c/a\u003e to join the discussion.","no_comments":"No comments yet. Be the first by \u003ca :href=\"postUrl\" :title=\"t('comments.view_and_reply')\" target=\"_bsky\" class=\"episode-comments-reply-link\"\u003ereplying on Bluesky\u003c/a\u003e!","error_loading":"There was a problem loading the comments. Please try again soon."} }) }) </script> <title>Smashing Podcast</title> <meta content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes" name="viewport" /> <style> :root { --color-primary: #FFFFFF; --color-secondary: #333333; --color-border: #D33A2C; } </style> <link rel="stylesheet" href="https://podcast.smashingmagazine.com/theme-assets/theme-cardboard-1739717708.css" /> <script type="module" src="https://podcast.smashingmagazine.com/theme-assets/theme-cardboard-1739717708.js"></script> <style> .site-intro div { font-size: 80%; text-align: center; } </style> </head> <body x-data='{ mobileNavOpen: false }' class="index relative"> <header class="site-header"> <a href="/" class="site-header-link" title="Home"> <h1 class="site-header-title !top-0"> Smashing Podcast </h1> </a> <div class="site-header-nav"> <nav class="site-nav" x-show="mobileNavOpen" @click.outside="mobileNavOpen = false" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" > <a title="Home" class="current" href="/">Home</a> <a title="Episodes" class="" href="/episodes">Episodes</a> <a title="About" class="" href="/about">About</a> <a title="Subscribe" class="" href="/subscribe">Subscribe</a> </nav> <div class="site-subscribe"> <h2 class="site-subscribe-heading"> Listen Anywhere </h2> <a href="https://podcasts.apple.com/gb/podcast/smashing-podcast/id1485403438" class="site-subscribe-link apple_podcasts" target="_apple_podcasts" title="Listen to Smashing Podcast on Apple Podcasts"> <svg role="img" fill="#9933CC" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apple Podcasts</title><path d="M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z"/></svg> <label> <span>Listen On</span> <b>Apple Podcasts</b> </label> </a><a href="https://open.spotify.com/show/4bRsUmTtsTpa6ZKqSslbVV" class="site-subscribe-link spotify" target="_spotify" title="Listen to Smashing Podcast on Spotify"> <svg role="img" fill="#1DB954" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg> <label> <span>Listen On</span> <b>Spotify</b> </label> </a><a href="https://pca.st/73eh6rjh" class="site-subscribe-link pocket_casts" target="_pocket_casts" title="Listen to Smashing Podcast on Pocket Casts"> <svg role="img" fill="#F43E37" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Pocket Casts</title><path d="M12,0C5.372,0,0,5.372,0,12c0,6.628,5.372,12,12,12c6.628,0,12-5.372,12-12 C24,5.372,18.628,0,12,0z M15.564,12c0-1.968-1.596-3.564-3.564-3.564c-1.968,0-3.564,1.595-3.564,3.564 c0,1.968,1.595,3.564,3.564,3.564V17.6c-3.093,0-5.6-2.507-5.6-5.6c0-3.093,2.507-5.6,5.6-5.6c3.093,0,5.6,2.507,5.6,5.6H15.564z M19,12c0-3.866-3.134-7-7-7c-3.866,0-7,3.134-7,7c0,3.866,3.134,7,7,7v2.333c-5.155,0-9.333-4.179-9.333-9.333 c0-5.155,4.179-9.333,9.333-9.333c5.155,0,9.333,4.179,9.333,9.333H19z"/></svg> <label> <span>Listen On</span> <b>Pocket Casts</b> </label> </a><a href="https://music.amazon.com/podcasts/7c694966-cfcb-4162-b826-ce13dbeef7b5" class="site-subscribe-link amazon_music" target="_amazon_music" title="Listen to Smashing Podcast on Amazon Music"> <svg role="img" viewBox="2.167 .438 251.038 259.969" xmlns="http://www.w3.org/2000/svg"><title>Amazon Music</title><g fill="none" fill-rule="evenodd"><path d="m221.503 210.324c-105.235 50.083-170.545 8.18-212.352-17.271-2.587-1.604-6.984.375-3.169 4.757 13.928 16.888 59.573 57.593 119.153 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z" fill="#4BA5DC" fill-rule="nonzero"/><path d="m150.744 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.37 0-50.478-17.506-50.478-52.565 0-27.373 14.85-46.018 35.96-55.126 18.313-8.066 43.884-9.489 63.43-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.799 6.026-5.835 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.36-51.616 75.43-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095" fill="#000"/><path d="m221.503 210.324c-105.235 50.083-170.545 8.18-212.352-17.271-2.587-1.604-6.984.375-3.169 4.757 13.928 16.888 59.573 57.593 119.153 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z" fill="#4BA5DC" fill-rule="nonzero"/><path d="m150.744 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.37 0-50.478-17.506-50.478-52.565 0-27.373 14.85-46.018 35.96-55.126 18.313-8.066 43.884-9.489 63.43-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.799 6.026-5.835 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.36-51.616 75.43-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095" fill="#000"/></g></svg> <label> <span>Listen On</span> <b>Amazon Music</b> </label> </a> <a href="/subscribe" class="site-subscribe-link site-subscribe-more-link" title="More Options"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-width="2" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /> </svg> </a> </div> </div> <div @click="mobileNavOpen = !mobileNavOpen" class="site-mobile-nav-trigger"> <svg x-show="!mobileNavOpen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"> <path d="M0 64H448v64H0V64zM0 224H448v64H0V224zM448 384v64H0V384H448z"/> </svg> <svg x-show="mobileNavOpen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"> <path d="M294.6 166.6L317.3 144 272 98.7l-22.6 22.6L160 210.7 70.6 121.4 48 98.7 2.7 144l22.6 22.6L114.7 256 25.4 345.4 2.7 368 48 413.3l22.6-22.6L160 301.3l89.4 89.4L272 413.3 317.3 368l-22.6-22.6L205.3 256l89.4-89.4z"/> </svg> </div> </header> <main class="site-content"> <div class="site-home-page"> <header> <div class="site-podcast-artwork"> <img src="https://img.transistor.fm/qO6MWhXEe9uxmYqY6fs8UIoZ70ZwdvKN0DBdWDhgWpo/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9zaG93/LzUyMjcvMTU3MjAw/ODUxOC1hcnR3b3Jr/LmpwZw.webp" alt="Smashing Podcast" /> </div> <hgroup class=""> <div class="site-podcast-artwork"> <img src="https://img.transistor.fm/qO6MWhXEe9uxmYqY6fs8UIoZ70ZwdvKN0DBdWDhgWpo/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9zaG93/LzUyMjcvMTU3MjAw/ODUxOC1hcnR3b3Jr/LmpwZw.webp" alt="Smashing Podcast" /> </div> <div class="site-home-introduction w-full relative"> <h3 class="site-heading"> Introduction </h3> <div class="site-home-text"> <div>An interview show from your friends at Smashing Magazine. Hosted by Drew McLellan and Vitaly Friedman.</div> </div> </div> <div class="site-home-featured"> <div class="site-episodes-featured"> <h3 class="site-heading"> Recommended Episode </h3> <div class="site-episode site-episode-card"> <div class="site-episode-card-inner"> <div class="site-episode-meta"> <div x-data="{ episode: { url: 'https://media.transistor.fm/24dfea32/6dd539ed.mp3?src=site', title: `What is CX Design? with Debbie Levitt`, duration: '3364', artwork: 'https://img.transistor.fm/bwGPxrv971NTTnwwAV3NdGAAmT2ktKdgqvXFRHUIQ-Y/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9lcGlz/b2RlLzEyNTQ2ODcv/MTY3OTMzMjAyMi1h/cnR3b3JrLmpwZw.webp' }, get selected() { return $store.player.audio_url === this.episode.url } }"> <button x-show="!selected || !$store.player.playing" @click.prevent="$dispatch('play-episode', episode)" title="Play Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M384 256L0 32V480L384 256z"/> </svg> </button> <button x-show="selected && $store.player.playing" @click.prevent="$dispatch('pause-episode')" title="Pause Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M128 64H0V448H128V64zm192 0H192V448H320V64z"/> </svg> </button> </div> <time class="site-episode-meta-published"> March 21, 2023 </time> <time class="site-episode-meta-duration"> 56:04 </time><span class="site-episode-meta-number">E58 </span><span class="site-episode-meta-type">Recommended</span> </div> <a href="/episodes/what-is-cx-design-with-debbie-levitt" class="block"> <h2 class="site-episode-title"> What is CX Design? with Debbie Levitt </h2> </a> <a href="/episodes/what-is-cx-design-with-debbie-levitt" class="block"> <p class="site-episode-summary"> We ask what is Customer Experience design, and how does it differ from User Experience design? Vitaly Friedman talks to expert Debbie Levitt to find out. </p> </a> </div> <a href="/episodes/what-is-cx-design-with-debbie-levitt" class="site-episode-link-overlay" title="View episode: What is CX Design? with Debbie Levitt"></a> </div> </div> </div> </hgroup> </header> <section class="site-episodes-latest site-container"> <h2 class="site-heading"> Latest Episodes </h2> <div class="site-episodes site-episodes-panel"> <div class="site-episode site-episode-card"> <div class="site-episode-card-inner"> <div class="site-episode-meta"> <div x-data="{ episode: { url: 'https://media.transistor.fm/2d55b214/31224d07.mp3?src=site', title: `What is Service Design? with Lou Downe`, duration: '2833', artwork: 'https://img.transistor.fm/iel1Bt3myGyptM-hbQWbuHABziRMZQSyXO9jwhY1tPM/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9lcGlz/b2RlLzE3MDYxNjMv/MTcwNjM2MzUzMi1h/cnR3b3JrLmpwZw.webp' }, get selected() { return $store.player.audio_url === this.episode.url } }"> <button x-show="!selected || !$store.player.playing" @click.prevent="$dispatch('play-episode', episode)" title="Play Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M384 256L0 32V480L384 256z"/> </svg> </button> <button x-show="selected && $store.player.playing" @click.prevent="$dispatch('pause-episode')" title="Pause Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M128 64H0V448H128V64zm192 0H192V448H320V64z"/> </svg> </button> </div> <time class="site-episode-meta-published"> January 30, 2024 </time> <time class="site-episode-meta-duration"> 47:13 </time><span class="site-episode-meta-number">E67 </span> </div> <a href="/episodes/what-is-service-design-with-lou-downe" class="block"> <h2 class="site-episode-title"> What is Service Design? with Lou Downe </h2> </a> <a href="/episodes/what-is-service-design-with-lou-downe" class="block"> <p class="site-episode-summary"> We鈥檙e talking about Service Design. What is it, and how is it different from what we鈥檇 normally consider user experience design? Drew McLellan talks to expert Lou Down... </p> </a> </div> <a href="/episodes/what-is-service-design-with-lou-downe" class="site-episode-link-overlay" title="View episode: What is Service Design? with Lou Downe"></a> </div> <div class="site-episode site-episode-card"> <div class="site-episode-card-inner"> <div class="site-episode-meta"> <div x-data="{ episode: { url: 'https://media.transistor.fm/2a69108d/c250676b.mp3?src=site', title: `What is a Tech Union? with Ethan Marcotte`, duration: '2084', artwork: 'https://img.transistor.fm/Zj8eHUGos7k1VHyWujAphNqd1sdERxO8YVz9lm0wEtk/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9lcGlz/b2RlLzE1NDk3NzMv/MTY5NzU0NzI1Mi1h/cnR3b3JrLmpwZw.webp' }, get selected() { return $store.player.audio_url === this.episode.url } }"> <button x-show="!selected || !$store.player.playing" @click.prevent="$dispatch('play-episode', episode)" title="Play Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M384 256L0 32V480L384 256z"/> </svg> </button> <button x-show="selected && $store.player.playing" @click.prevent="$dispatch('pause-episode')" title="Pause Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M128 64H0V448H128V64zm192 0H192V448H320V64z"/> </svg> </button> </div> <time class="site-episode-meta-published"> October 17, 2023 </time> <time class="site-episode-meta-duration"> 34:44 </time><span class="site-episode-meta-number">E66 </span> </div> <a href="/episodes/what-is-a-tech-union-with-ethan-marcotte" class="block"> <h2 class="site-episode-title"> What is a Tech Union? with Ethan Marcotte </h2> </a> <a href="/episodes/what-is-a-tech-union-with-ethan-marcotte" class="block"> <p class="site-episode-summary"> We鈥檙e talking about Tech Unions. What part can unions play in a modern tech workplace? Drew McLellan talks to Ethan Marcotte to find out. </p> </a> </div> <a href="/episodes/what-is-a-tech-union-with-ethan-marcotte" class="site-episode-link-overlay" title="View episode: What is a Tech Union? with Ethan Marcotte"></a> </div> <div class="site-episode site-episode-card"> <div class="site-episode-card-inner"> <div class="site-episode-meta"> <div x-data="{ episode: { url: 'https://media.transistor.fm/2423c4eb/1970d319.mp3?src=site', title: `How do you run a grassroots conference? with Alex Older`, duration: '2653', artwork: 'https://img.transistor.fm/nB5iXZmJNuOIxa7ij5tTnwDae961-WJX0ive-VCR7TE/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9lcGlz/b2RlLzE1MTY4ODAv/MTY5NTQ4NDA4OS1h/cnR3b3JrLmpwZw.webp' }, get selected() { return $store.player.audio_url === this.episode.url } }"> <button x-show="!selected || !$store.player.playing" @click.prevent="$dispatch('play-episode', episode)" title="Play Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M384 256L0 32V480L384 256z"/> </svg> </button> <button x-show="selected && $store.player.playing" @click.prevent="$dispatch('pause-episode')" title="Pause Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M128 64H0V448H128V64zm192 0H192V448H320V64z"/> </svg> </button> </div> <time class="site-episode-meta-published"> September 26, 2023 </time> <time class="site-episode-meta-duration"> 44:13 </time><span class="site-episode-meta-number">E65 </span> </div> <a href="/episodes/how-do-you-run-a-grassroots-conference-with-alex-older" class="block"> <h2 class="site-episode-title"> How do you run a grassroots conference? with Alex Older </h2> </a> <a href="/episodes/how-do-you-run-a-grassroots-conference-with-alex-older" class="block"> <p class="site-episode-summary"> We鈥檙e talking about running grassroots conferences and meet-ups. What does it take to organise a small industry event for your community? Drew McLellan talks to WDC鈥檚 ... </p> </a> </div> <a href="/episodes/how-do-you-run-a-grassroots-conference-with-alex-older" class="site-episode-link-overlay" title="View episode: How do you run a grassroots conference? with Alex Older"></a> </div> <div class="site-episode site-episode-card"> <div class="site-episode-card-inner"> <div class="site-episode-meta"> <div x-data="{ episode: { url: 'https://media.transistor.fm/d1090373/17591d47.mp3?src=site', title: `What is a Headless CMS? with Alvin Bryan`, duration: '2010', artwork: 'https://img.transistor.fm/JSDmg4kb3yYZoqUdgLAJm8-0n-tNMpb21U6wlj2KKYM/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9lcGlz/b2RlLzE0NDE0NjAv/MTY5MDg3ODM3MS1h/cnR3b3JrLmpwZw.webp' }, get selected() { return $store.player.audio_url === this.episode.url } }"> <button x-show="!selected || !$store.player.playing" @click.prevent="$dispatch('play-episode', episode)" title="Play Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M384 256L0 32V480L384 256z"/> </svg> </button> <button x-show="selected && $store.player.playing" @click.prevent="$dispatch('pause-episode')" title="Pause Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M128 64H0V448H128V64zm192 0H192V448H320V64z"/> </svg> </button> </div> <time class="site-episode-meta-published"> August 1, 2023 </time> <time class="site-episode-meta-duration"> 33:30 </time><span class="site-episode-meta-number">E64 </span> </div> <a href="/episodes/what-is-a-headless-cms-with-alvin-bryan" class="block"> <h2 class="site-episode-title"> What is a Headless CMS? with Alvin Bryan </h2> </a> <a href="/episodes/what-is-a-headless-cms-with-alvin-bryan" class="block"> <p class="site-episode-summary"> We're talking about headless content management systems. What are they, and how do they differ from more traditional systems? Drew McLellan talks to Alvin Bryan to fin... </p> </a> </div> <a href="/episodes/what-is-a-headless-cms-with-alvin-bryan" class="site-episode-link-overlay" title="View episode: What is a Headless CMS? with Alvin Bryan"></a> </div> <div class="site-episode site-episode-card"> <div class="site-episode-card-inner"> <div class="site-episode-meta"> <div x-data="{ episode: { url: 'https://media.transistor.fm/2f9338f9/3fb3c666.mp3?src=site', title: `What is The Transitional Web? with Chris Ferdinandi`, duration: '2758', artwork: 'https://img.transistor.fm/YNcP_Cv5C7f1_ZCvMKa03k7K5LSgNZOss7CZSdsFddc/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9lcGlz/b2RlLzE0MTY3NzAv/MTY4OTExMjEwNC1h/cnR3b3JrLmpwZw.webp' }, get selected() { return $store.player.audio_url === this.episode.url } }"> <button x-show="!selected || !$store.player.playing" @click.prevent="$dispatch('play-episode', episode)" title="Play Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M384 256L0 32V480L384 256z"/> </svg> </button> <button x-show="selected && $store.player.playing" @click.prevent="$dispatch('pause-episode')" title="Pause Episode" role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor" class="w-3.5 h-3.5"> <path d="M128 64H0V448H128V64zm192 0H192V448H320V64z"/> </svg> </button> </div> <time class="site-episode-meta-published"> July 11, 2023 </time> <time class="site-episode-meta-duration"> 45:58 </time><span class="site-episode-meta-number">E63 </span> </div> <a href="/episodes/what-is-the-transitional-web-with-chris-ferdinandi" class="block"> <h2 class="site-episode-title"> What is The Transitional Web? with Chris Ferdinandi </h2> </a> <a href="/episodes/what-is-the-transitional-web-with-chris-ferdinandi" class="block"> <p class="site-episode-summary"> We're talking about The Transitional Web. What is it, and how does it describe the technologies we鈥檙e using? Drew McLellan talks to Chris Ferdinandi to find out. </p> </a> </div> <a href="/episodes/what-is-the-transitional-web-with-chris-ferdinandi" class="site-episode-link-overlay" title="View episode: What is The Transitional Web? with Chris Ferdinandi"></a> </div> <a href="/episodes" class="site-episodes-more-button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" /> </svg> <span>More Episodes</span> </a> </div> </section> </div> </main> <footer class="site-footer"> <div class="site-footer-content"> <div class="site-logo"> <a href="/" class="inline-flex" title="Home"> <h1 class="site-footer-title"> Smashing Podcast </h1> </a> <div class="site-social"> <a href="SmashingMag" class="site-social-link site-social-twitter" target="_twitter" title="View Smashing Podcast on Twitter"> <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg> </a> <a href="https://www.facebook.com/smashmag/" class="site-social-link site-social-facebook" target="_facebook" title="View Smashing Podcast on Facebook"> <svg role="img" class="icon-facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 -58.125 30 30"><title>Facebook</title><path d="M28.3594,-58.125h-26.7188q-0.673828,0 -1.15723,0.483398q-0.483398,0.483398 -0.483398,1.15723v26.7188q0,0.673828 0.483398,1.15723q0.483398,0.483398 1.15723,0.483398h14.3848v-11.6309h-3.92578v-4.51172h3.92578v-3.33984q0,-2.90039 1.61133,-4.43848q1.61133,-1.53809 4.21875,-1.53809q1.23047,0 2.19727,0.0585938q0.966797,0.0585938 1.28906,0.117188v4.04297h-2.40234q-1.40625,0 -1.81641,0.615234q-0.410156,0.615234 -0.410156,1.58203v2.90039h4.45312l-0.556641,4.54102h-3.89648v11.6016h7.61719q0.703125,0 1.18652,-0.483398q0.483398,-0.483398 0.483398,-1.15723v-26.7188q0,-0.673828 -0.483398,-1.15723q-0.483398,-0.483398 -1.15723,-0.483398Z"></path></svg> </a> </div> </div> <div class="site-footer-subscribe"> <h2 class="site-heading"> Listen Anywhere </h2> <div class="site-subscribe"> <a href="https://podcasts.apple.com/gb/podcast/smashing-podcast/id1485403438" class="site-subscribe-link apple_podcasts" target="_apple_podcasts" title="Listen to Smashing Podcast on Apple Podcasts"> <svg role="img" fill="#9933CC" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apple Podcasts</title><path d="M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z"/></svg> <label> <span>Listen On</span> <b>Apple Podcasts</b> </label> </a><a href="https://open.spotify.com/show/4bRsUmTtsTpa6ZKqSslbVV" class="site-subscribe-link spotify" target="_spotify" title="Listen to Smashing Podcast on Spotify"> <svg role="img" fill="#1DB954" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify</title><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg> <label> <span>Listen On</span> <b>Spotify</b> </label> </a><a href="https://overcast.fm/itunes1485403438/smashing-podcast" class="site-subscribe-link overcast" target="_overcast" title="Listen to Smashing Podcast on Overcast"> <svg role="img" fill="#FC7E0F" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Overcast</title><path d="M12 24C5.389 24.018.017 18.671 0 12.061V12C0 5.35 5.351 0 12 0s12 5.35 12 12c0 6.649-5.351 12-12 12zm0-4.751l.9-.899-.9-3.45-.9 3.45.9.899zm-1.15-.05L10.4 20.9l1.05-1.052-.6-.649zm2.3 0l-.6.601 1.05 1.051-.45-1.652zm.85 3.102L12 20.3l-2 2.001c.65.1 1.3.199 2 .199s1.35-.05 2-.199zM12 1.5C6.201 1.5 1.5 6.201 1.5 12c-.008 4.468 2.825 8.446 7.051 9.899l2.25-8.35c-.511-.372-.809-.968-.801-1.6 0-1.101.9-2.001 2-2.001s2 .9 2 2.001c0 .649-.301 1.2-.801 1.6l2.25 8.35c4.227-1.453 7.06-5.432 7.051-9.899 0-5.799-4.701-10.5-10.5-10.5zm6.85 15.7c-.255.319-.714.385-1.049.15-.313-.207-.4-.628-.194-.941.014-.021.028-.04.044-.06 0 0 1.35-1.799 1.35-4.35s-1.35-4.35-1.35-4.35c-.239-.289-.198-.719.091-.957.02-.016.039-.031.06-.044.335-.235.794-.169 1.049.15.1.101 1.65 2.15 1.65 5.2S18.949 17.1 18.85 17.2zm-3.651-1.95c-.3-.3-.249-.85.051-1.15 0 0 .75-.799.75-2.1s-.75-2.051-.75-2.1c-.3-.301-.3-.801-.051-1.15.232-.303.666-.357.969-.125.029.022.056.047.082.074C16.301 8.75 17.5 10 17.5 12s-1.199 3.25-1.25 3.301c-.301.299-.75.25-1.051-.051zm-6.398 0c-.301.301-.75.35-1.051.051C7.699 15.199 6.5 14 6.5 12s1.199-3.199 1.25-3.301c.301-.299.801-.299 1.051.051.3.3.249.85-.051 1.15 0 .049-.75.799-.75 2.1s.75 2.1.75 2.1c.3.3.351.799.051 1.15zm-2.602 2.101c-.335.234-.794.169-1.05-.15C5.051 17.1 3.5 15.05 3.5 12s1.551-5.1 1.649-5.2c.256-.319.715-.386 1.05-.15.313.206.4.628.194.941-.013.02-.028.04-.043.059C6.35 7.65 5 9.449 5 12s1.35 4.35 1.35 4.35c.25.3.15.75-.151 1.001z"/></svg> <label> <span>Listen On</span> <b>Overcast</b> </label> </a><a href="https://pca.st/73eh6rjh" class="site-subscribe-link pocket_casts" target="_pocket_casts" title="Listen to Smashing Podcast on Pocket Casts"> <svg role="img" fill="#F43E37" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Pocket Casts</title><path d="M12,0C5.372,0,0,5.372,0,12c0,6.628,5.372,12,12,12c6.628,0,12-5.372,12-12 C24,5.372,18.628,0,12,0z M15.564,12c0-1.968-1.596-3.564-3.564-3.564c-1.968,0-3.564,1.595-3.564,3.564 c0,1.968,1.595,3.564,3.564,3.564V17.6c-3.093,0-5.6-2.507-5.6-5.6c0-3.093,2.507-5.6,5.6-5.6c3.093,0,5.6,2.507,5.6,5.6H15.564z M19,12c0-3.866-3.134-7-7-7c-3.866,0-7,3.134-7,7c0,3.866,3.134,7,7,7v2.333c-5.155,0-9.333-4.179-9.333-9.333 c0-5.155,4.179-9.333,9.333-9.333c5.155,0,9.333,4.179,9.333,9.333H19z"/></svg> <label> <span>Listen On</span> <b>Pocket Casts</b> </label> </a> <a href="/subscribe" class="site-subscribe-link site-subscribe-more-link" title="More Options"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-width="2" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /> </svg> </a> </div> </div> </div> <nav class="site-nav"> <a title="Home" class="current" href="/">Home</a> <a title="Episodes" class="" href="/episodes">Episodes</a> <a title="About" class="" href="/about">About</a> <a title="Subscribe" class="" href="/subscribe">Subscribe</a> </nav> <div class="site-credits site-container"> <div class="site-powered-by"> <a href="https://transistor.fm" target="_transistor" title="Transistor.fm - Podcast Hosting and Analytics"> <span>Broadcast by</span> <svg class="transistor-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 547 144"><title>transistor logo</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="transistor-horizontal-logo" fill-rule="nonzero" fill="#FFFFFF"><g transform="translate(191.000000, 42.000000)"><polygon points="0.7 10.4 0.7 1.8 38.6 1.8 38.6 10.4 24.5 10.4 24.5 58.3 14.7 58.3 14.7 10.4"></polygon><path d="M63.3,26.2 C62.1,26 60.7,25.8 58.7,25.8 C52.4,25.8 48.7,29.9 48.7,38.2 L48.7,58.2 L39.4,58.2 L39.4,18.6 L48.5,18.6 L48.5,24.2 L48.7,24.2 C50.5,20.8 54.5,17.3 59.8,17.3 C61.3,17.3 62.3,17.4 63.3,17.5 L63.3,26.2 L63.3,26.2 Z"></path><path d="M107.8,58.2 L98.8,58.2 L98.8,53.2 L98.6,53.2 C95.9,56.6 91.6,59.7 85,59.7 C76.1,59.7 66,52.6 66,38.4 C66,25.8 74.9,17.4 85.7,17.4 C92.3,17.4 96.3,20.9 98.7,24 L98.9,24 L98.9,18.6 L107.9,18.6 L107.9,58.2 L107.8,58.2 Z M87.4,51.5 C93.5,51.5 99.2,46.2 99.2,38.6 C99.2,30.6 94,25.3 87.5,25.3 C79.3,25.3 75.4,31.9 75.4,38.4 C75.4,45 79.2,51.5 87.4,51.5 Z"></path><path d="M118.6,18.6 L127.8,18.6 L127.8,23.6 L128,23.6 C131.1,19.1 135.7,17.3 140.1,17.3 C148.3,17.3 155.5,22.7 155.5,35.4 L155.5,58.2 L146.2,58.2 L146.2,35.9 C146.2,29.1 143,25.5 137.7,25.5 C131.9,25.5 127.9,29.6 127.9,37.3 L127.9,58.3 L118.6,58.3 L118.6,18.6 L118.6,18.6 Z"></path><path d="M183.6,28.8 C183.2,25.9 181,24 178.3,24 C175.1,24 173.3,26 173.3,28.2 C173.3,30.6 174.5,32.3 181.4,34.6 C189.9,37.3 192.9,41.7 192.9,47.3 C192.9,54.6 187.4,59.7 178.3,59.7 C168.8,59.7 164.1,54.5 163.4,47.1 L172,47.1 C172.4,50.4 174.4,52.9 178.5,52.9 C182,52.9 184,50.7 184,48 C184,45 182.3,43.1 175.7,40.9 C168.3,38.5 164.5,34.8 164.5,28.6 C164.5,22.1 169.6,17.3 178,17.3 C186.5,17.3 191,22.3 192,28.8 L183.6,28.8 L183.6,28.8 Z"></path><path d="M201,0.4 L211.3,0.4 L211.3,9.8 L201,9.8 L201,0.4 Z M201.5,18.6 L210.8,18.6 L210.8,58.3 L201.5,58.3 L201.5,18.6 Z"></path><path d="M239.5,28.8 C239.1,25.9 236.9,24 234.2,24 C231,24 229.2,26 229.2,28.2 C229.2,30.6 230.4,32.3 237.3,34.6 C245.8,37.3 248.8,41.7 248.8,47.3 C248.8,54.6 243.3,59.7 234.2,59.7 C224.7,59.7 220,54.5 219.3,47.1 L227.9,47.1 C228.3,50.4 230.3,52.9 234.4,52.9 C237.9,52.9 239.9,50.7 239.9,48 C239.9,45 238.2,43.1 231.6,40.9 C224.2,38.5 220.4,34.8 220.4,28.6 C220.4,22.1 225.5,17.3 233.9,17.3 C242.4,17.3 246.9,22.3 247.9,28.8 L239.5,28.8 L239.5,28.8 Z"></path><path d="M252.8,18.6 L257.8,18.6 L257.8,5.9 L267.1,5.9 L267.1,18.6 L277,18.6 L277,26.4 L267,26.4 L267,44.1 C267,49.5 268.7,51 272.5,51 C274.1,51 275.9,50.7 277.3,50.3 L277.3,57.8 C275.2,58.4 272.6,58.7 270.3,58.7 C260.4,58.7 257.8,52.7 257.8,44.6 L257.8,26.4 L252.8,26.4 L252.8,18.6 Z"></path><path d="M302.3,17.3 C314.7,17.3 323.5,26.4 323.5,38.4 C323.5,50.1 314.6,59.7 302.3,59.7 C290.2,59.7 281.1,50.4 281.1,38.4 C281.1,26.1 290.3,17.3 302.3,17.3 Z M302.3,51.4 C309.3,51.4 314.1,45.8 314.1,38.4 C314.1,31.4 309.6,25.5 302.3,25.5 C295.2,25.5 290.5,31 290.5,38.4 C290.5,46 295.9,51.4 302.3,51.4 Z"></path><path d="M350.9,25.8 C344.6,25.8 340.9,29.9 340.9,38.2 L340.9,58.2 L331.6,58.2 L331.6,18.6 L340.7,18.6 L340.7,24.2 L340.9,24.2 C342.7,20.8 346.7,17.3 352,17.3 C353.5,17.3 354.5,17.4 355.5,17.5 L355.5,26.2 C354.3,26 352.9,25.8 350.9,25.8 Z"></path></g><g><g transform="translate(24.000000, 24.000000)"><path d="M48,95.9 C45.4,95.9 43.2,93.8 43.2,91.1 L43.2,4.9 C43.2,2.3 45.3,0.1 48,0.1 C50.6,0.1 52.8,2.2 52.8,4.9 L52.8,91.1 C52.8,93.7 50.6,95.9 48,95.9 Z"></path><path d="M28,52.8 L5,52.8 C2.4,52.8 0.2,50.7 0.2,48 C0.2,45.3 2.3,43.2 5,43.2 L28,43.2 C30.6,43.2 32.8,45.3 32.8,48 C32.8,50.7 30.6,52.8 28,52.8 Z"></path><path d="M91.1,52.8 L68,52.8 C65.4,52.8 63.2,50.7 63.2,48 C63.2,45.3 65.3,43.2 68,43.2 L91,43.2 C93.6,43.2 95.8,45.3 95.8,48 C95.8,50.7 93.7,52.8 91.1,52.8 Z"></path></g><path d="M72,144 C32.3,144 0,111.7 0,72 C0,32.3 32.3,0 72,0 C111.7,0 144,32.3 144,72 C144,111.7 111.7,144 72,144 Z M72,9.6 C37.6,9.6 9.6,37.6 9.6,72 C9.6,106.4 37.6,134.4 72,134.4 C106.4,134.4 134.4,106.4 134.4,72 C134.4,37.6 106.4,9.6 72,9.6 Z"></path></g></g></g></svg> </a> </div> <div class="site-copyright"> 漏 2023 Smashing Media AG </div> </div> </footer> <span id="default-audio" data-default-audio-url="https://media.transistor.fm/2d55b214/31224d07.mp3?src=site" data-default-audio-title="What is Service Design? with Lou Downe" data-default-audio-duration="2833" ></span> <div data-turbo-permanent id="site-player" class="player player-sticky" aria-label="Audio Player" tabindex="0" x-data="() => ({ minimized: false, handlePlayEpisode({ detail: episode }) { if ($store.player.audio_url === episode.url) { this.play() $store.player.playing = true return } this.playEpisode(episode) $store.player = { loading: true, playing: false, audio_url: episode.url, artwork: episode.artwork } }, ...transistor.audioPlayer() })" x-init="$dispatch('player-element', $refs.audio)" @play-episode.window="handlePlayEpisode" @pause-episode.window="pause; $store.player.playing = false" @seek-episode.window="seekTo($event.detail)" @timejump.window="seekToSeconds($event.detail.timestamp); active = true" :class="{ 'open': active, 'minimized': minimized }" > <div class="player-inner"> <audio x-ref="audio" preload="none" @volumechange="updateVolume" @waiting="waiting" @canplaythrough="canPlayThrough = true" @play="play(false, true); $store.player.playing = true" @pause="pause; $store.player.playing = false" @ended="reset; $store.player.playing = false" @loadedmetadata="init; $store.player.loading = !($store.player.playing = true)" @timeupdate="$dispatch('player-progress', progressPercentage())" @keyup.document.right="seekBySeconds(30)" @keyup.document.left="seekBySeconds(-10)" @keyup.document.m="toggleMute" @keyup.document.s="toggleSpeed" ></audio> <div class="player-artwork"> <img x-show="$store.player.artwork" :src="$store.player.artwork" /> <button @click="minimized = !minimized" class="player-minimize" title="Minimize Player"> <svg x-bind:class="{ '-rotate-90': minimized, 'rotate-90': !minimized }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="relative transition-transform w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15M9 12l3 3m0 0l3-3m-3 3V2.25" /> </svg> </button> <nav class="player-buttons"> <button class="player-button player-play" x-show="!$store.player.loading && !$store.player.playing" @click.prevent="$dispatch('play-episode', {url: $store.player.audio_url})" title="Play " role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"> <path d="M384 256L0 32V480L384 256z"/> </svg> </button> <button class="player-button player-pause" x-show="!$store.player.loading && $store.player.playing" @click.prevent="$dispatch('pause-episode')" title="Pause " role="button" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"> <path d="M128 64H0V448H128V64zm192 0H192V448H320V64z"/> </svg> </button> <span x-show="$store.player.loading" class="player-loading"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> </span> </nav> <div class="player-progress" title="Seek within Episode" @click="seekTo; $store.player.playing = true"> <div class="player-progress-bar" :style="`width: ${progressPercentage()}%`" role="progressbar" aria-label="Audio player progress"></div> </div> </div> <div class="player-progress-controls"> <div class="player-currently-playing"> <div class="player-title site-heading" x-text="title"></div> </div> <div class="player-progress" title="Seek within Episode" @click="seekTo; $store.player.playing = true"> <div class="player-progress-bar" :style="`width: ${progressPercentage()}%`" role="progressbar" aria-label="Audio player progress"></div> <div class="player-duration"> <span x-text="formatTime(currentTime)"></span> <span :datetime="formatTime(duration)" x-text="formatTime(duration)"></span> </div> </div> <div class="player-controls-duration"> <div class="player-controls"> <button @click="toggleSpeed" title="Change Playback Speed" class="player-speed" x-text="`${displaySpeed}x`"></button> <button @click="seekBySeconds(-10)" title="Rewind 10 seconds" class="player-rewind"> <svg role="img" class="icon-rewind" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>rewind</title><path d="M19.419962,2.57 L20.789962,1.21 L20.789962,1.20999999 C21.066111,0.931608989 21.064293,0.482064989 20.7859019,0.205919989 C20.6539209,0.0750019893 20.4758579,0.00106998926 20.2899619,2.98926377e-06 L14.9999619,2.98926377e-06 L14.9999619,5.29000299 L14.9999619,5.2900038 C15.0022111,5.6821198 15.3219069,5.9981688 15.7140229,5.9959198 C15.8999189,5.99485348 16.0779819,5.9209207 16.2099629,5.7900028 L17.9999629,4.00000299 L17.9999633,4.00000299 C22.4115033,7.32267305 23.2942133,13.5924931 19.9715433,18.0040031 C16.6488733,22.4155431 10.3790533,23.2982531 5.96754326,19.9755831 C1.55600326,16.6529131 0.67329326,10.3830931 3.99596326,5.97158305 C5.50733326,3.96493305 7.71859326,2.60063305 10.1899933,2.15000305 L10.1899934,2.15000303 C10.7422784,2.05059173 11.1094044,1.52228803 11.0099934,0.970003035 C10.9105821,0.417718035 10.3822784,0.0505920346 9.82999335,0.150003035 L9.82999275,0.150003146 C3.31278275,1.35360315 -0.994707248,7.61255315 0.208852752,14.1298031 C1.41245275,20.6470131 7.67140275,24.9545031 14.1886528,23.7509431 C20.7058628,22.5473431 25.0133528,16.2883931 23.8097928,9.77114315 C23.2799238,6.90203315 21.7229128,4.32424315 19.4300328,2.52000315 L19.419962,2.57 Z M8.99996191,16 L8.99996191,16 C9.55224696,16 9.99996191,15.552285 9.99996191,15 L9.99996191,8 L6.99996191,8 L6.99996191,8 C6.44767691,8 5.99996191,8.447715 5.99996191,9 C5.99996191,9.552285 6.44767691,10 6.99996191,10 L7.99996191,10 L7.99996191,15 L7.99996191,15 C7.99996191,15.5522848 8.44767691,16 8.99996191,16 C8.99996191,16 8.99996191,16 8.99996191,16 L8.99996191,16 Z M13.9999619,16 L13.9999619,16 C15.6568119,16 16.9999619,14.65685 16.9999619,13 L16.9999619,11 L16.9999619,11 C16.9999619,9.34315 15.6568119,8 13.9999619,8 C12.3431119,8 10.9999619,9.34315 10.9999619,11 L10.9999619,13 L10.9999619,13 C10.9999619,14.6568505 12.3431119,16 13.9999619,16 C13.9999619,16 13.9999619,16 13.9999619,16 L13.9999619,16 Z M12.999962,11.0000002 L12.999962,11.0000002 C12.999962,10.4477152 13.447677,10.0000002 13.999962,10.0000002 C14.552247,10.0000002 14.999962,10.4477152 14.999962,11.0000002 C14.999962,11.0000002 14.999962,11.0000002 14.999962,11.0000002 L14.999962,13.0000002 L14.999962,13.0000002 C14.999962,13.5522852 14.552247,14.0000002 13.999962,14.0000002 C13.447677,14.0000002 12.999962,13.5522852 12.999962,13.0000002 L12.999962,11.0000002 Z"></path></svg> </button> <button @click="seekBySeconds(30)" title="Fast Forward 30 seconds" class="player-fastforward"> <svg role="img" class="icon-fastforward" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>fast forward</title><path d="M15.0000099,16 L15.0000099,16 C16.6568599,16 18.0000099,14.65685 18.0000099,13 L18.0000099,11 L18.0000099,11 C18.0000099,9.34315 16.6568599,8 15.0000099,8 C13.3431599,8 12.0000099,9.34315 12.0000099,11 L12.0000099,13 L12.0000099,13 C12.0000099,14.6568505 13.3431599,16 15.0000099,16 C15.0000099,16 15.0000099,16 15.0000099,16 L15.0000099,16 Z M14.00001,11.0000002 L14.00001,11.0000002 C14.00001,10.4477152 14.447725,10.0000002 15.00001,10.0000002 C15.552295,10.0000002 16.00001,10.4477152 16.00001,11.0000002 C16.00001,11.0000002 16.00001,11.0000002 16.00001,11.0000002 L16.00001,13.0000002 L16.00001,13.0000002 C16.00001,13.5522852 15.552295,14.0000002 15.00001,14.0000002 C14.447725,14.0000002 14.00001,13.5522852 14.00001,13.0000002 L14.00001,11.0000002 Z M7.00000983,7.99999762 L7.00000983,7.99999762 C6.44772496,7.99999762 6.00000983,8.447715 6.00000983,8.99999762 C6.00000983,9.552285 6.44772496,9.99999762 7.00000983,9.99999762 L8.50000983,9.99999762 L8.50000983,9.99999762 C8.77615193,9.99999762 9.00000983,10.223858 9.00000983,10.4999976 C9.00000983,10.776142 8.77615193,10.9999976 8.50000983,10.9999976 L7.00000983,10.9999976 L7.00000983,10.9999976 C6.44772489,10.9999976 6.00000983,11.447715 6.00000983,11.9999976 C6.00000983,12.552285 6.44772489,12.9999976 7.00000983,12.9999976 L8.50000983,12.9999976 L8.50000983,12.9999976 C8.77615187,12.9999976 9.00000983,13.223858 9.00000983,13.4999976 C9.00000983,13.776142 8.77615187,13.9999976 8.50000983,13.9999976 L7.00000983,13.9999976 L7.00000983,13.9999976 C6.44772483,13.9999976 6.00000983,14.447715 6.00000983,14.9999976 C6.00000983,15.552285 6.44772483,15.9999976 7.00000983,15.9999976 L8.50000983,15.9999976 L8.50000983,15.9999976 C9.88071972,15.9999976 11.0000098,14.88071 11.0000098,13.4999976 L11.0000098,13.5000078 C10.9949875,12.9583018 10.8162208,12.4325078 10.4900148,12.0000078 L10.4900147,12.0000079 C10.8162217,11.5675019 10.9949887,11.0417099 11.0000098,10.4999976 L11.0000098,10.4999976 C11.0000098,9.11928762 9.88071974,7.99999762 8.50000983,7.99999762 C8.50000983,7.99999762 8.50000983,7.99999762 8.50000983,7.99999762 L7.00000983,7.99999762 Z M14.18001,0.2 L14.1800101,0.200000017 C13.6277251,0.100588717 13.0994201,0.467715017 13.0000101,1.02000002 C12.9005988,1.57228502 13.2677251,2.10059002 13.8200101,2.20000002 L13.8200112,2.20000022 C19.2469712,3.22467022 22.8157312,8.45476022 21.7910512,13.8817002 C20.7663812,19.3086602 15.5362912,22.8774202 10.1093512,21.8527402 C4.68239119,20.8280702 1.11363119,15.5979802 2.13831119,10.1710402 C2.60451319,7.70190022 3.98319119,5.49877022 6.00003119,4.00000013 L7.79003119,5.79000022 L7.79003121,5.79000024 C8.06842221,6.06614924 8.51796621,6.06433124 8.79411121,5.78594013 C8.92502921,5.65395913 8.99896121,5.47589613 9.00002821,5.29000013 L9.00002821,1.31893483e-07 L3.71002821,1.31893483e-07 L3.71002824,1.31893483e-07 C3.31791224,0.00224888189 3.00186324,0.321944132 3.00411124,0.714060132 C3.00517734,0.899956132 3.07910994,1.07801913 3.21002824,1.21000013 L4.58002824,2.57000013 L4.58002779,2.57000049 C-0.628262215,6.66833049 -1.52806221,14.2128005 2.57026779,19.4211005 C6.66859779,24.6293905 14.2130678,25.5291905 19.4213678,21.4308605 C24.6296578,17.3325305 25.5294578,9.78806049 21.4311278,4.57976049 C19.6268878,2.28688049 17.0490978,0.729870486 14.1799878,0.200000486 L14.18001,0.2 Z"></path></svg> </button> <button type="button" @click="mute()" x-show="!muted" title="Mute" class="player-mute"> <svg role="img" class="icon-volume" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>volume</title><path d="M3,5.13137l-1.31134e-07,3.55271e-15c-1.65685,7.24234e-08 -3,1.34315 -3,3c0,0 0,1.77636e-15 0,1.77636e-15v6l3.19744e-14,4.52987e-07c2.50178e-07,1.65685 1.34315,3 3,3h2.65l6.35,5v-22l-6.35,5Zm17,6l3.22943e-07,0.000513405c-0.00126608,-2.11713 -0.81346,-4.15334 -2.26965,-5.69014l4.49398e-08,4.72193e-08c-0.381076,-0.400406 -1.01459,-0.416077 -1.415,-0.0350001c-0.400406,0.381076 -0.416077,1.01459 -0.0350001,1.415l3.56262e-08,3.74132e-08c2.29841,2.4137 2.29841,6.2063 -7.12523e-08,8.62l2.29995e-08,-2.28117e-08c-0.392122,0.38892 -0.394718,1.02208 -0.00579837,1.4142c0.00192484,0.00194069 0.00385763,0.00387348 0.00579832,0.00579832l1.49479e-08,1.40058e-08c0.194393,0.182142 0.453427,0.279193 0.719647,0.269627l5.01314e-08,3.09438e-10c0.27566,0.00170152 0.539796,-0.110466 0.73,-0.31l2.80721e-07,-2.96224e-07c1.45628,-1.53671 2.2686,-3.57287 2.27,-5.69Zm-1.4,-10.8l3.78218e-08,2.83663e-08c-0.441828,-0.331371 -1.06863,-0.241828 -1.4,0.2c-0.331371,0.441828 -0.241828,1.06863 0.2,1.4c1.00526e-08,7.53946e-09 2.76447e-08,2.07335e-08 3.76973e-08,2.8273e-08l6.40586e-07,4.8044e-07c5.08102,3.81077 6.11076,11.019 2.3,16.1c-0.653824,0.871765 -1.42823,1.64618 -2.3,2.3l-7.79577e-08,5.84683e-08c-0.441828,0.331371 -0.531371,0.958172 -0.2,1.4l5.13133e-08,6.84178e-08c0.188854,0.251806 0.485243,0.4 0.8,0.4l-4.37114e-08,3.55271e-15c0.21637,9.45784e-09 0.426904,-0.0701779 0.6,-0.2l7.51993e-07,-5.63995e-07c5.96467,-4.47351 7.17351,-12.9353 2.7,-18.9c-0.767532,-1.02338 -1.67662,-1.93247 -2.7,-2.7Z" transform="translate(-7.24234e-08, 0.868629)"></path></svg> </button> <button type="button" @click="unmute()" x-show="muted" title="Unmute" class="player-unmute"> <svg role="img" class="icon-muted" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>muted</title><path d="M0.102122,9.10212v6l3.55271e-14,4.52987e-07c2.50178e-07,1.65685 1.34315,3 3,3h2.65l6.35,5v-5.38l-10.91,-10.91l-2.60839e-07,2.15336e-07c-0.683992,0.56467 -1.08305,1.40307 -1.09,2.29Zm21.38,11l2.57883e-07,-3.48565e-07c4.41117,-5.96232 3.16798,-14.3695 -2.78,-18.8l4.23752e-08,3.17814e-08c-0.441828,-0.331371 -1.06863,-0.241828 -1.4,0.2c-0.331371,0.441828 -0.241828,1.06863 0.2,1.4c1.29779e-08,9.7334e-09 1.62223e-08,1.21668e-08 2.92002e-08,2.19001e-08l6.32019e-07,4.69153e-07c4.96483,3.68544 6.11484,10.643 2.6,15.73l-1.6,-1.59l5.16025e-07,-6.88458e-07c2.41371,-3.22027 2.15172,-7.71217 -0.620001,-10.63l4.49398e-08,4.72193e-08c-0.381076,-0.400406 -1.01459,-0.416077 -1.415,-0.0350001c-0.400406,0.381076 -0.416077,1.01459 -0.0350001,1.415l9.88607e-08,1.03887e-07c2.02516,2.12812 2.29169,5.38058 0.64,7.81l-4.97,-4.91v-9.59l-5.37,4.22l-4.92,-4.93l6.9121e-08,6.91211e-08c-0.392122,-0.392122 -1.02788,-0.392122 -1.42,-1.38242e-07c-0.392122,0.392122 -0.392122,1.02788 -1.38242e-07,1.42c0,0 0,0 0,0l22,22l-3.12092e-08,-3.14662e-08c0.38892,0.392122 1.02208,0.394718 1.4142,0.00579839c0.00194069,-0.00192484 0.00387348,-0.00385763 0.00579832,-0.00579832l4.18882e-08,-4.15461e-08c0.392122,-0.38892 0.394718,-1.02208 0.00579824,-1.4142c-0.00192484,-0.00194069 -0.00385763,-0.00387348 -0.00579832,-0.00579832Z" transform="translate(-0.102122, -0.102122)"></path></svg> </button> </div> <div class="player-duration"> <span x-text="formatTime(currentTime)"></span> <span :datetime="formatTime(duration)" x-text="formatTime(duration)"></span> </div> </div> </div> </div> </div> </body> </html>