diff --git a/.gitignore b/.gitignore index 5b7223ddc..84cecb46f 100644 --- a/.gitignore +++ b/.gitignore @@ -14,4 +14,8 @@ haters/ .sentryclirc transcripts-flagged/ -test-results \ No newline at end of file +test-results +.vercel +.env +.svelte-kit +.sentryclirc diff --git a/shows/508 - supperclub.md b/shows/508 - supperclub.md index e7696699d..f0bb4c4f4 100644 --- a/shows/508 - supperclub.md +++ b/shows/508 - supperclub.md @@ -1,6 +1,6 @@ --- number: 508 -title: Supper Club × The Primeagan - Vim, Streaming, Rust, all Around Interesting Guy +title: Supper Club × The Primeagen - Vim, Streaming, Rust, all Around Interesting Guy date: 1662724800226 url: https://traffic.libsyn.com/syntax/Syntax_-_508.mp3 guest: @@ -12,7 +12,7 @@ guest: - https://www.twitch.tv/ThePrimeagen --- -In this supper club episode of Syntax, Wes and Scott talk with The Primeagan about his streaming set up, how he decides what to stream, why he makes the kind of content he does, and why he loves Vim. +In this supper club episode of Syntax, Wes and Scott talk with The Primeagen about his streaming set up, how he decides what to stream, why he makes the kind of content he does, and why he loves Vim. ## Hasura - Sponsor diff --git a/shows/616 - adam CSS.md b/shows/616 - adam CSS.md index 990861798..875c6dc0d 100644 --- a/shows/616 - adam CSS.md +++ b/shows/616 - adam CSS.md @@ -39,6 +39,7 @@ In this supper club episode of Syntax, Wes and Scott talk with Adam Argyle about * **[33:06](#t=33:06)** Cascade layers * **[34:40](#t=34:40)** CSS Nesting * **[38:03](#t=38:03)** Animate discrete properties +* [Feature: Transitions on specified discrete properties](https://chromestatus.com/feature/5071230636392448) * **[39:42](#t=39:42)** Linear function * [Linear easing generator](https://linear-easing-generator.netlify.app/) * **[41:33](#t=41:33)** Media query range syntax diff --git a/shows/624 - tasty typescript.md b/shows/624 - tasty typescript.md index f8347d6af..ef89cf24e 100644 --- a/shows/624 - tasty typescript.md +++ b/shows/624 - tasty typescript.md @@ -49,6 +49,6 @@ In this episode of Syntax, Wes and Scott use the fact that Svelte is being conve * [Wes' Facebook](https://www.facebook.com/wesbos.developer) * [Scott's Twitter](https://twitter.com/stolinski) * Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets -* [Wes Bos on Bluesky](https://bsky.app/profile/syntax.fm/wesbos.com) +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) * [Scott on Bluesky](https://bsky.app/profile/tolin.ski) * [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/643 - Supper with Jake.md b/shows/643 - Supper with Jake.md index f57aa2462..fd187d89e 100644 --- a/shows/643 - Supper with Jake.md +++ b/shows/643 - Supper with Jake.md @@ -5,7 +5,7 @@ date: 1689940800938 url: https://traffic.libsyn.com/syntax/Syntax_-_643.mp3 --- -In this supper club episode of Syntax, Wes and Scott talk with Jake Champion about his work with Fastly and Polyfill, the difference between WASY and WASM, what Winter CG is, and what makes Fastly different. +In this supper club episode of Syntax, Wes and Scott talk with Jake Champion about his work with Fastly and Polyfill, the difference between WASI and WASM, what Winter CG is, and what makes Fastly different. ## Show Notes @@ -23,7 +23,7 @@ In this supper club episode of Syntax, Wes and Scott talk with Jake Champion abo * **[16:29](#t=16:29)** What is Winter CG compliance? * [Winter CG proposal](https://github.com/wintercg/proposal-common-minimum-api) * **[17:55](#t=17:55)** What about node API's being in platforms -* **[21:18](#t=21:18)** What is WASY vs WASM? +* **[21:18](#t=21:18)** What is WASI vs WASM? * **[24:37](#t=24:37)** Who is Web Assembly for? * **[31:34](#t=31:34)** Is there anything WASM is not good for? * **[41:39](#t=41:39)** What makes the Fastly runtime different from others diff --git a/shows/651 - Tasty Potluck.md b/shows/651 - Tasty Potluck.md new file mode 100644 index 000000000..225e16bda --- /dev/null +++ b/shows/651 - Tasty Potluck.md @@ -0,0 +1,62 @@ +--- +number: 651 +title: Potluck × Is TypeScript Fancy Duct Tape × Back Pain × Cloud Service Rate Limits +date: 1691582400184 +url: https://traffic.libsyn.com/syntax/Syntax_-_651.mp3 +--- + +In this potluck episode of Syntax, Wes and Scott answer your questions about TypeScript just being fancy duct tape, dealing with back pain while coding, rate limits on cloud services, what to use for email provider, is Firebase a legit platform, and more! + +## Show Notes + +* **[00:11](#t=00:11)** Welcome +* **[03:11](#t=03:11)** The Sunday scaries +* **[06:03](#t=06:03)** Is TypeSctipt just a bunch of fancy Duck Tape? +* [Is TypeScript saving us?](https://stackblitz.com/edit/typescript-xddko7?file=index.ts,index.html) +* **[12:29](#t=12:29)** How do you go years into programming without back pain? +* [Hasty Treat - Stretching For Developers with Scott — Syntax Podcast 293](https://syntax.fm/show/293/hasty-treat-stretching-for-developers-with-scott) +* **[23:51](#t=23:51)** Why don’t cloud services provide an option to shut off services when a spending limit is reached? +* [DigitalOcean | Cloud Hosting for Builders](https://www.digitalocean.com/) +* [Vercel: Develop. Preview. Ship. For the best frontend teams](https://vercel.com/) +* **[28:41](#t=28:41)** How do you choose a CSS library for any project? +* [The most advanced responsive front-end framework in the world. | Foundation](https://get.foundation/) +* [960 Grid System](https://960.gs/) +* **[38:26](#t=38:26)** What's happening to Level Up Tuts? +* [Level Up Tutorials - Learn modern web development](https://levelup.video/) +* [Wheels - Skateboard Wheels - 60mm Cali Roll - Shark Wheel](https://sharkwheel.com/wheels/skateboard-wheels/60mm-cali-roll/) +* **[43:43](#t=43:43)** Not a sponsored Yeti spot +* **[45:16](#t=45:16)** What do you do for email hosting? +* [Google Workspace](https://workspace.google.com/lp/business/) +* [TechSoup Canada](https://www.techsoup.ca/more-nonprofit-deals) +* [Proton Mail: Get a private, secure, and encrypted email account](https://proton.me/mail) +* [Outlook](https://outlook.live.com/owa/) +* [Microsoft 365 Plans](https://www.microsoft.com/en-ca/microsoft-365/business/compare-all-microsoft-365-business-products) +* [Scheduling Software Everyone Will Love · SavvyCal](https://savvycal.com/) +* [Synology Photos](https://www.synology.com/en-global/dsm/feature/photos) +* **[50:34](#t=50:34)** Is Firebase ok to run an app long term with? +* [Firebase](https://firebase.google.com/) +* **[58:57](#t=58:57)** Am I wrong to not do productive work intensely? +* **[01:34](#t=01:34)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +* Scott: [MagSafe Charger, Anker 3-in-1 Cube with MagSafe](https://www.amazon.com/dp/B09TT8GZK9?linkCode=sl1&linkId=b868e82b9d8d18e560d2cb96bf83e2d0&language=en_US) +* Wes: [6amLifestyle Headphone Hanger Stand Under Desk](https://www.amazon.ca/dp/B01LL3WG1U?keywords=aluminum+headphone+hook&sprefix=headphone+hook+al,aps,130&language=en_US&sr=8-8&linkCode=gs2&linkId=acb6afc9455dd8a4e8570e525546d42d&tag=isi777-20) + +## Shameless Plugs + +* Scott: [Sentry](https://sentry.io) +* Wes: [Wes Bos Tutorials](https://wesbos.com/courses) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/652 - Supper.md b/shows/652 - Supper.md new file mode 100644 index 000000000..f05855d3c --- /dev/null +++ b/shows/652 - Supper.md @@ -0,0 +1,62 @@ +--- +number: 652 +title: Supper Club × Flightcontrol with Brandon Bayer +date: 1691755200455 +url: https://traffic.libsyn.com/syntax/Syntax_-_652.mp3 +--- + +Can you have a Vercel like experience on your own AWS? Scott and Wes talk with Brandon Bayer about Flightcontrol - what it is, how to use it on your app, pricing, and more. + +## Show Notes + +* **[00:32](#t=00:32)** Welcome +* **[01:28](#t=01:28)** Who is Brandon Bayer? +* [Brandon 🚀 Flightcontrol (@flybayer) / X](https://twitter.com/flybayer?lang=en) +* [Flightcontrol (@Flightcontrolhq) / X](https://twitter.com/flightcontrolhq) +* [Blitz.js - The Missing Fullstack Toolkit for Next.js](https://blitzjs.com/) +* [Flightcontrol — AWS Without Pain](https://www.flightcontrol.dev/) +* [Tailwind Connect 2023 | Tailwind CSS Live Event](https://connect.tailwindcss.com/) +* **[03:00](#t=03:00)** How do you fly? +* **[06:10](#t=06:10)** What is Flightcontrol? +* **[10:00](#t=10:00)** Why doesn't Amazon make it easier? +* **[11:34](#t=11:34)** Which parts of the AWS stack should I use? +* **[15:08](#t=15:08)** Creating the infrastructure +* **[19:01](#t=19:01)** Ongoing deployment +* **[20:05](#t=20:05)** What languages does Flightcontrol support? +* **[23:35](#t=23:35)** How are events or cron handled? +* **[25:24](#t=25:24)** What is Temporal? +* [Open Source Durable Execution Platform | Temporal Technologies](https://temporal.io/) +* **[29:05](#t=29:05)** What are Nixpacks? +* [GitHub - railwayapp/nixpacks: App source + Nix packages + Docker = Image](https://github.com/railwayapp/nixpacks) +* **[35:50](#t=35:50)** How is Flightcontrol priced? +* [How To Get Free AWS Credits - Flightcontrol](https://www.flightcontrol.dev/docs/guides/aws/aws-credits) +* **[44:44](#t=44:44)** How does Flightcontrol help with scaling? +* [Serverless Compute Engine – AWS Fargate – AWS](https://aws.amazon.com/fargate/) +* **[46:11](#t=46:11)** What are your thoughts on ReactJS, Server components? +* **[49:57](#t=49:57)** Supper Club questions +* [Keychron K3 Ultra-slim Wireless Mechanical Keyboard (Version 2)](https://keychron.ca/products/keychron-k3-wireless-mechanical-keyboard) +* [Learn to Code - for Free | Codecademy](https://www.codecademy.com/) +* **[57:20](#t=57:20)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +* [EAA AirVenture Oshkosh | Oshkosh, Wisconsin | Fly-In & Convention](https://www.eaa.org/airventure) +* [Ko Tao](https://en.wikipedia.org/wiki/Ko_Tao) +* [Ko Lanta Yai](https://en.wikipedia.org/wiki/Ko_Lanta_Yai) + +## Shameless Plugs + +* [Flightcontrol — AWS Without Pain](https://www.flightcontrol.dev/) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/653 - Decorators.md b/shows/653 - Decorators.md new file mode 100644 index 000000000..cbd1646aa --- /dev/null +++ b/shows/653 - Decorators.md @@ -0,0 +1,101 @@ +--- +number: 653 +title: JS Fundamentals - Decorators +date: 1692014400681 +url: https://traffic.libsyn.com/syntax/Syntax_-_653.mp3 +--- + +In this Hasty Treat, Scott and Wes talk about whether decorators are finally here, what the uses cases are for decorators, how to define a decorator, and what auto accessor is. + +## Show Notes + +* **[00:25](#t=00:25)** Welcome +* **[01:00](#t=01:00)** Are decorators finally here? +* [TC39 proposal](https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md) +* [How this compares to other versions of decorators](https://github.com/tc39/proposal-decorators#how-does-this-proposal-compare-to-other-versions-of-decorators) +* **[06:47](#t=06:47)** What are use cases for decorators? +* **[10:55](#t=10:55)** How do you define a decorator? +* **[14:20](#t=14:20)** Auto Accessor + +on classes + +``` +@loggged +class C {} +``` + +on fields + +``` +class C { +@logged x = 1; +} +``` + +Auto Accessor + +``` +class C { + accessor x = 1; +} +``` + +sugar for below + +``` +class C { + #x = 1; // # means private + + get x() { + return this.#x; + } + + set x(val) { + this.#x = val; + } +} +``` + +Can be decorated and decorator can return new get and set and init functions + +``` +function logged(value, { kind, name }) { + if (kind === "accessor") { + let { get, set } = value; + + return { + get() { + console.log(`getting ${name}`); + + return get.call(this); + }, + + set(val) { + console.log(`setting ${name} to ${val}`); + + return set.call(this, val); + }, + + init(initialValue) { + console.log(`initializing ${name} with value ${initialValue}`); + return initialValue; + } + }; + } + + // ... +} +``` + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/654 - Tasty.md b/shows/654 - Tasty.md new file mode 100644 index 000000000..c1f3059a7 --- /dev/null +++ b/shows/654 - Tasty.md @@ -0,0 +1,53 @@ +--- +number: 654 +title: 6 or so New Approved and Proposed JavaScript APIs +date: 1692187200499 +url: https://traffic.libsyn.com/syntax/Syntax_-_654.mp3 +--- + +In this episode of Syntax, Wes and Scott talk about new approved and proposed JavaScript API changes including Promise.withResolvers, .at(), Immutable Array Methods, Array.fromAsync, and more. + +## Show Notes + +* **[00:10](#t=00:10)** Welcome +* **[04:55](#t=04:55)** What are we going to cover? +* **[06:10](#t=06:10)** Promise.withResolvers +* **[09:40](#t=09:40)** .at() +* [You probably knew about JavaScript's new .at() method for accessing array items. Did you know it works for strings too?](https://twitter.com/wesbos/status/1684964556542550031) +* [@IAmAndrewLuca](https://twitter.com/iamandrewluca) +* **[15:59](#t=15:59)** Immutable Array Methods +* [Wes Bos: "🔥 Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3. .toReversed() .toSorted() .toSpliced() - remove items .with() - replace items](https://twitter.com/wesbos/status/1593271021557239809) +* **[21:48](#t=21:48)** Array.fromAsync +* [Proposal for array.fromAsync](https://github.com/tc39/proposal-array-from-async) +* **[27:15](#t=27:15)** Array Grouping +* [Proposal for Array grouping](https://github.com/tc39/proposal-array-grouping) +* **[31:04](#t=31:04)** Observable Events? +* [Observable Events?](https://github.com/domfarolino/observable) +* **[35:28](#t=35:28)** Import Attributes +* **[39:21](#t=39:21)** v.emplace method +* **[41:15](#t=41:15)** Decorators +* [Proposal for Pattern Matching](https://github.com/tc39/proposal-pattern-matching) +* **[45:42](#t=45:42)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +* Scott: [Artifact.news](https://artifact.news/) +* Wes: LED lights for bikes + +## Shameless Plugs + +* Scott: [Sentry](https://sentry.io) +* Wes: [Wes Bos Tutorials](https://wesbos.com/courses) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/655 - Supper Descript.md b/shows/655 - Supper Descript.md new file mode 100644 index 000000000..b95a0d4e9 --- /dev/null +++ b/shows/655 - Supper Descript.md @@ -0,0 +1,73 @@ +--- +number: 655 +title: Supper Club × How Descript Built A Next Gen Video Editor In The Browser With Andrew Lisowski +date: 1692360000942 +url: https://traffic.libsyn.com/syntax/Syntax_-_655.mp3 +--- + +In this supper club episode of Syntax, Wes and Scott talk with Andrew Lisowski about working on Descript, web streams vs local storage, using state machines, writing CSS with Radix, monorepos, and more. + +## Show Notes + +* **[00:35](#t=00:35)** Welcome +* **[01:07](#t=01:07)** What is Descript? +* [Descript | All-in-one video & podcast editing, easy as a doc.](https://www.descript.com/) +* [Work — Sandwich](https://sandwich.co/work/descript-video/) +* **[02:21](#t=02:21)** Who is Andrew Lisowski? +* [Andrew Lisowski (@HipsterSmoothie) / X](https://twitter.com/hipstersmoothie?lang=en) +* [hipstersmoothie.com](https://www.hipstersmoothie.com/) +* [Descript (@DescriptApp) / X](https://twitter.com/DescriptApp) +* [devtools.fm](https://www.devtools.fm/) +* **[04:51](#t=04:51)** How does Descript interact with the webcam? +* **[08:52](#t=08:52)** Web streams vs local first +* [Web Streams Explained — Syntax Podcast 587](https://syntax.fm/show/587/web-streams-explained) +* **[10:06](#t=10:06)** How are you exporting video? +* [GitHub - Yahweasel/libav.js: This is a compilation of the libraries associated with handling audio and video in ffmpeg—libavformat, libavcodec, libavfilter, libavutil, libswresample, and libswscale—for emscripten, and thus the web.](https://github.com/Yahweasel/libav.js/) +* [Riverside.fm - Record Podcasts And Videos From Anywhere](https://riverside.fm/) +* **[14:40](#t=14:40)** How does Descript deal with recording fails? +* **[17:17](#t=17:17)** How does Descript design and build the UI? +* **[19:37](#t=19:37)** What did you like about state machines? +* [XState - JavaScript State Machines and Statecharts](https://xstate.js.org/) +* **[24:12](#t=24:12)** How are you writing your CSS with Radix? +* [Themes – Radix UI](https://www.radix-ui.com/) +* [Home | Open UI](https://open-ui.org/) +* **[30:30](#t=30:30)** How does the marketing site's tech stack compare? +* **[31:44](#t=31:44)** Playwright vs Cypress +* [Fast and reliable end-to-end testing for modern web apps | Playwright](https://playwright.dev/) +* [JavaScript Component Testing and E2E Testing Framework | Cypress](https://www.cypress.io/) +* **[36:26](#t=36:26)** What tech do you use for monorepos? +* **[37:01](#t=37:01)** What's your build tool? +* [Workspaces | Yarn - Package Manager](https://yarnpkg.com/features/workspaces) +* [Turbo](https://turbo.build/) +* [webpack](https://webpack.js.org/) +* **[40:18](#t=40:18)** Moving to the web means moving things to the backend +* **[41:37](#t=41:37)** Descript focuses AI tools on helping creators +* [Eye Contact: AI Video Effect | Descript](https://www.descript.com/eye-contact) +* **[50:50](#t=50:50)** Supper Club questions +* [Topre Switch Mechanical Keyboards](https://mechanicalkeyboards.com/shop/index.php?c=79&l=product_list) +* [REALFORCE | Premium Keyboard, PBT, Capacitive Key Switch](https://www.realforce.co.jp/en/) +* [Iosevka](https://typeof.net/Iosevka/) +* [Github Dark High Contrast - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=hipstersmoothie-public.github-dark-high-contrast) +* **[56:21](#t=56:21)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +* [Lexical](https://lexical.dev/) +* [shadcn/ui](https://ui.shadcn.com/) + +## Shameless Plugs + +* [devtools.fm](https://www.devtools.fm/) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/656 - Hasty Fetch.md b/shows/656 - Hasty Fetch.md new file mode 100644 index 000000000..bca6b65c4 --- /dev/null +++ b/shows/656 - Hasty Fetch.md @@ -0,0 +1,111 @@ +--- +number: 656 +title: 8 Tricks When Using the Fetch() API +date: 1692619200247 +url: https://traffic.libsyn.com/syntax/Syntax_-_656.mp3 +--- + +In this Hasty Treat, Scott and Wes talk about 8 tricks to try when using the Fetch() API. + +## Show Notes + +* **[00:23](#t=00:23)** Welcome +* **[02:14](#t=02:14)** 1) Stream The Result + +``` +// Create a new TextDecoder instance +const decoder = new TextDecoder(); + +// Make the fetch request +fetch('https://api.example.com/streaming-data') + .then(response => { + // Check if the response is valid + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + // Stream the response data using a TextDecoder + const reader = response.body.getReader(); + + // Function to read the streamed chunks + function read() { + return reader.read().then(({ done, value }) => { + // Check if the streaming is complete + if (done) { + console.log('Streaming complete'); + return; + } + + // Decode and process the streamed data + const decodedData = decoder.decode(value, { stream: true }); + console.log(decodedData); + + // Continue reading the next chunk + return read(); + }); + } + + // Start reading the chunks + return read(); + }) + .catch(error => { + // Handle errors + console.log('Error:', error); + }); + ``` + +* **[06:05](#t=06:05)** 2) Download Progress +* [Download progress example](https://twitter.com/wesbos/status/1688914467864903684) +* **[09:40](#t=09:40)** 3) Cancel Streams - Abort Controller + +``` +// Create an AbortController instance +const controller = new AbortController(); + +// Set a timeout to abort the request after 5 seconds +const timeout = setTimeout(() => { +controller.abort(); +}, 5000); + +// Fetch request with the AbortController +fetch('https://api.example.com/data', { signal: controller.signal }) +``` + +* **[11:32](#t=11:32)** 4) Testing if JSON is returned +* **[13:18](#t=13:18)** 5) async + await + catch + +`const data = await fetch().catch(err => console.log(err));` + +* **[14:42](#t=14:42)** 6) to awaited - return error and data at top level + +``` +const [err, data] = collect(fetch()) +if(err) // .... +``` + +* [await-to-js - npm](https://www.npmjs.com/package/await-to-js) +* **[16:58](#t=16:58)** 7) Dev tools - Copy as fetch +* **[17:54](#t=17:54)** 8) You can programatically create a Request, Response and Headers objects + +``` +const myRequest = new Request('https://traffic.libsyn.com/syntax/Syntax_-_641.mp3', { + headers: { + 'Content-Type': 'text/plain', + } +}); + +fetch(myRequest) +``` + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/657 - Tasty.md b/shows/657 - Tasty.md new file mode 100644 index 000000000..56c1dac99 --- /dev/null +++ b/shows/657 - Tasty.md @@ -0,0 +1,89 @@ +--- +number: 657 +title: Rust for JS Devs — Part 2 +date: 1692792000000 +url: https://traffic.libsyn.com/syntax/Syntax_-_657.mp3 +--- + +In this episode of Syntax, Wes and Scott jump into part 2 of their look at Rust for JavaScript developers, including variables in Rust, type systems in Rust, signed and unsigned integers, and more. + +## Show Notes + +* **[00:10](#t=00:10)** Welcome +* **[00:43](#t=00:43)** Audio issue bugs +* **[03:17](#t=03:17)** Building decks +* **[06:06](#t=06:06)** Variables in Rust +* [Syntax 647: Rust for JavaScript Developers - Node vs Rust Concepts](https://syntax.fm/show/647/rust-for-javascript-developers-node-vs-rust-concepts) + +``` +let x = 5; // x is immutable +let mut x = 5; // x is mutable +const MAX_POINTS: u32 = 100_000; // must be defined at compile time +``` + +* **[10:42](#t=10:42)** Type System in Rust +* **[15:52](#t=15:52)** Types in Rust +* **[19:06](#t=19:06)** Why does Rust have signed and unsigned integers? +* **[23:35](#t=23:35)** Slicing strings with &str +* **[27:35](#t=27:35)** enum +* **[27:55](#t=27:55)** struct +* **[28:19](#t=28:19)** Vec +* **[29:33](#t=29:33)** HashMap and HashSet +* **[33:00](#t=33:00)** Converting Signed to Unsigned Numbers + +``` +let unsigned_value: u8 = 200; +let signed_value: i8 = unsigned_value as i8; +``` + +* **[36:12](#t=36:12)** What’s up with &str? +* **[43:31](#t=43:31)** Rust error messages +* **[45:28](#t=45:28)** What is a Struct? + +``` +struct User { + username: String, + email: String, + sign_in_count: u64, + active: bool, +} + +// You can create an instance of a struct like this: +let user1 = User { + email: String::from("someone@example.com"), + username: String::from("someusername123"), + active: true, + sign_in_count: 1, +}; + +impl User { + fn login(&mut self) { + self.login_count += 1; + } +} +``` + +* **[49:17](#t=49:17)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +* Scott: [Thermacell Patio Shield](https://amzn.to/3PZmbXG) +* Wes: [Magnet Phone Mount](https://amzn.to/3OPIHS5) + +## Shameless Plugs + +* Scott: [Sentry](https://sentry.io) +* Wes: [Wes Bos Tutorials](https://wesbos.com/courses) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/658 - supper.md b/shows/658 - supper.md new file mode 100644 index 000000000..d76dd3e69 --- /dev/null +++ b/shows/658 - supper.md @@ -0,0 +1,67 @@ +--- +number: 658 +title: Supper Club × Make React 70% Faster! Million.js with 18 Year Old Aiden Bai +date: 1692966480632 +url: https://traffic.libsyn.com/syntax/Syntax_-_658.mp3 +--- + +In this supper club episode of Syntax, Wes and Scott talk with Aiden Bai about his work on Million.js that aims to make React a lot faster. How does Million.js make React faster? And most importantly: has Aiden ever used a VCR? + +## Show Notes + +- **[00:35](#t=00:35)** Welcome +- **[00:57](#t=00:57)** Introducing Aiden Bai +- [Aiden Bai](https://aidenybai.com/) +- [aidenybai on GitHub](https://github.com/aidenybai) +- [@aidenybai on Twitter](https://twitter.com/aidenybai) +- [Aiden Bai on YouTube](https://www.youtube.com/@aidenbai) +- [Million.js](https://million.dev/) +- **[01:57](#t=01:57)** What is Million.js? +- **[03:20](#t=03:20)** How does React do rendering now? +- **[04:31](#t=04:31)** How does Million.js make it faster? +- **[07:37](#t=07:37)** What goes into creating a compiler? +- **[08:24](#t=08:24)** How do you go from learning JavaScript to writing compilers? +- **[11:05](#t=11:05)** Wyze WebRTC stream work +- **[13:13](#t=13:13)** What are you using to benchmark and test? +- [solidjs.com](https://www.solidjs.com/) +- [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) +- [xkcd: Compiling](https://xkcd.com/303/) +- **[18:19](#t=18:19)** What does a slowly rendering site look like? +- **[23:54](#t=23:54)** How do you handle find on page with large amounts of code? +- **[25:32](#t=25:32)** What does 70% faster with Million.js mean? +- [Hyper™](https://hyper.is/) +- [Warp: Your terminal, reimagined](https://www.warp.dev/) +- **[26:44](#t=26:44)** Why are maps slow? +- [Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion — Syntax Podcast 643](https://syntax.fm/show/643/supper-club-wasm-fastly-edge-and-polyfill-io-with-jake-champion) +- **[28:19](#t=28:19)** Benefits of the Macro API +- **[31:12](#t=31:12)** Does Million.js work across the board? +- **[33:03](#t=33:03)** Does it ever break projects? How do you test Million.js? +- **[35:35](#t=35:35)** How do you keep up on your GitHub issues? +- **[37:40](#t=37:40)** What other areas of tech are you interested in working on? +- [partytown](https://github.com/BuilderIO/partytown) +- **[39:32](#t=39:32)** What was the inspiration for your website? +- **[43:52](#t=43:52)** Supper Club questions +- [Gruvbox with Material Palette](https://github.com/sainnhe/gruvbox-material) +- [iTerm2 - macOS Terminal Replacement](https://iterm2.com/) + +## ××× SIIIIICK ××× PIIIICKS ××× + +- [Barbie (2023) directed by Greta Gerwig • Reviews, film + cast • Letterboxd](https://letterboxd.com/film/barbie/) +- [Teenage Mutant Ninja Turtles: Mutant Mayhem (2023) directed by Jeff Rowe • Reviews, film + cast • Letterboxd](https://letterboxd.com/film/teenage-mutant-ninja-turtles-mutant-mayhem/) + +## Shameless Plugs + +- [Million Kitchen Sink](https://sink.million.dev/) + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/659 - hasty.md b/shows/659 - hasty.md new file mode 100644 index 000000000..a8f879759 --- /dev/null +++ b/shows/659 - hasty.md @@ -0,0 +1,44 @@ +--- +number: 659 +title: OG Image Options +date: 1693224000717 +url: https://traffic.libsyn.com/syntax/Syntax_-_659.mp3 +--- + +In this Hasty Treat, Scott and Wes talk about OG images, interesting ways you can work with them, and ways you can work dynamically with them. + +## Show Notes + +- **[00:11](#t=00:11)** Welcome +- **[02:18](#t=02:18)** What are OG images? +- **[06:19](#t=06:19)** Testing OG images +- [Polypane, The browser for ambitious web developers](https://polypane.app/) +- [Meta Tags — Preview, Edit and Generate](https://metatags.io/) +- [Sharing Debugger - Meta for Developers](https://developers.facebook.com/tools/debug/) +- [Card Validator | Twitter Developers](https://cards-dev.twitter.com/validator) +- **[08:27](#t=08:27)** Creating an OG image +- [vercel/satori: Enlightened library to convert HTML and CSS to SVG](https://github.com/vercel/satori) +- [Open Graph (OG) Image Generation | Vercel Docs](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation) +- [Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel](https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images) +- **[09:41](#t=09:41)** Dynamically generating OG images +- [wesbos.com/thumbnail/?thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg&title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses](https://wesbos.com/thumbnail?thumbnail=/static/0005c028a536c87975eb84ae3d32ae57/aeron.jpg&title=Uses&url=https://wesbos.com/uses) +- **[21:16](#t=21:16)** Using Puppeteer +- [Puppeteer | Puppeteer](https://pptr.dev/) +- [Puppeteer · Browser Rendering docs](https://developers.cloudflare.com/browser-rendering/platform/puppeteer/) +- [Cloudinary - Image and Video Upload, Store ad Monetization](https://cloudinary.com/ip/gr-sea-gg-brand-home-base?campaignid=18164753405&adgroupid=144188713167&keyword=cloudinary&device=c&matchtype=e&adposition=&gad=1) +- [Fast and reliable end-to-end testing for modern web apps | Playwright](https://playwright.dev/) +- **[28:47](#t=28:47)** Canva API +- [Build The Tools Behind Great Design | Canva Developers](https://www.canva.com/developers/) + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/660 - Tasty No Coding.md b/shows/660 - Tasty No Coding.md new file mode 100644 index 000000000..1a2b5d33c --- /dev/null +++ b/shows/660 - Tasty No Coding.md @@ -0,0 +1,50 @@ +--- +number: 660 +title: Anything but Coding - Landscaping, Fitness, and more! +date: 1693396800953 +url: https://traffic.libsyn.com/syntax/Syntax_-_660.mp3 +--- + +In this episode of Syntax, Wes and Scott talk about concerts, getting tired because of being old, landscaping, spinning on your head, gym updates, awful search engines and awful ethics for YouTubers, rewiring old engines, and what's being streamed. + +## Show Notes + +* **[00:10](#t=00:10)** Welcome +* **[01:49](#t=01:49)** Being tired +* [The Strokes & Weyes Blood Tickets | 14th August | Red Rocks Amphitheatre](https://www.theredrocksamphitheater.com/events/the-strokes-weyes-blood/) +* **[05:08](#t=05:08)** Landscaping +* **[10:53](#t=10:53)** Gym updates +* **[23:01](#t=23:01)** House projects +* **[28:39](#t=28:39)** Why are search engines so awful these days? +* **[39:20](#t=39:20)** Internet routing +* **[45:17](#t=45:17)** Linus Tech Tips ethics and issues +* **[48:29](#t=48:29)** Rewiring a kid's ATV +* **[50:49](#t=50:49)** What we're watching +* [The Stronger By Science Podcast](https://sbspod.com/) +* [Watch Full Swing | Netflix Official Site](https://www.netflix.com/ca/title/81483353) +* [Break Point | Official Trailer | Netflix](https://www.youtube.com/watch?v=sWBqn8fdhWs) +* [Watch Formula 1: Drive to Survive | Netflix Official Site](https://www.netflix.com/ca/title/80204890) +* **[58:37](#t=58:37)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +* Scott: [The First Cat in Space Ate Pizza](https://amzn.to/3OtmJ5S) +* Wes: Steam cleaner + +## Shameless Plugs + +* Scott: [Sentry](https://sentry.io) +* Wes: [Wes Bos Tutorials](https://wesbos.com/courses) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/661 - Mark Supperclub.md b/shows/661 - Mark Supperclub.md new file mode 100644 index 000000000..90941d4e8 --- /dev/null +++ b/shows/661 - Mark Supperclub.md @@ -0,0 +1,58 @@ +--- +number: 661 +title: Supper Club × Shipping ESM with Mark Erikson +date: 1693569600565 +url: https://traffic.libsyn.com/syntax/Syntax_-_661.mp3 +--- + +In this supper club episode of Syntax, Wes and Scott talk with Mark Erikson about his work in helping others understand shipping ESM, how to deal with permutations, whether default imports are helpful, whether TypeScript has made it easier, and what Mark's tool stack is for building. + +## Show Notes + +* **[00:36](#t=00:36)** Welcome! +* **[01:45](#t=01:45)** Introducing Shipping ESM with Mark Erikson +* [Mark Erikson (@acemarke)](https://twitter.com/acemarke) +* [Wes Bos on Twitter: "publishing packages that work in esm and cjs is such a nightmare. I've run into so many issues today and took forever to get the proper package.json exports. I can't wait until we're 100% esm. I think I have every single combo covered."](https://twitter.com/wesbos/status/1610385221324619780) +* [Mark's Dev Blog](https://blog.isquaredsoftware.com/) +* [Blogged Answers: My Experience Modernizing Packages to ESM](https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/) +* [Greatest Hits: The Most Popular and Most Useful Posts I've Written](https://blog.isquaredsoftware.com/2020/08/greatest-hits/) +* [arethetypeswrong.github.io: Tool for analyzing TypeScript types of npm packages](https://github.com/arethetypeswrong/arethetypeswrong.github.io) +* [publint](https://publint.dev/) +* **[07:01](#t=07:01)** How did we get to this space in modules? +* **[16:30](#t=16:30)** How do you deal with permutations? +* **[22:13](#t=22:13)** Do bundlers get in the way or helping? +* **[26:16](#t=26:16)** Are default imports useful? +* **[30:35](#t=30:35)** Are the types wrong errors +* **[33:41](#t=33:41)** Has TypeScript made this easier? +* **[37:56](#t=37:56)** What's your tool stack for building? +* **[39:32](#t=39:32)** How do you test? +* **[41:35](#t=41:35)** Will we ever stop bundling? +* **[48:03](#t=48:03)** What about source maps? +* **[52:32](#t=52:32)** Supper Club Questions +* [What is Windows Subsystem for Linux](https://learn.microsoft.com/en-us/windows/wsl/about) +* [Eagle Oceanic Next](https://marketplace.visualstudio.com/items?itemName=graf009.Eagle-Oceanic-Next) +* [DroidSansMono NF Font](https://eng.m.fontke.com/font/24637914/) +* **[55:18](#t=55:18)** React Types has more downloads than React? +* **[59:42](#t=59:42)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +* [Shirley Wu—Taking up space (Keynote, Outlier 2023)](https://www.youtube.com/watch?v=zF7mSTVwVs0) + +## Shameless Plugs + +* [Replay (@replayio)](https://twitter.com/replayio) +* [Replay - The time-travel debugger from the future.](https://www.replay.io/) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/662 - Hasty.md b/shows/662 - Hasty.md new file mode 100644 index 000000000..ac6e5f183 --- /dev/null +++ b/shows/662 - Hasty.md @@ -0,0 +1,36 @@ +--- +number: 662 +title: JavaScript Closures & Scope Explained +date: 1693828800811 +url: https://traffic.libsyn.com/syntax/Syntax_-_662.mp3 +--- + +In this Hasty Treat, Scott and Wes explain closures and the different types of scope used, and examples of where a closure is useful. + +## Show Notes + +* **[00:25](#t=00:25)** Welcome +* **[02:10](#t=02:10)** Scope +* [Beginner JavaScript course](https://beginnerjavascript.com) +* **[04:37](#t=04:37)** Local scope +* **[07:35](#t=07:35)** Enclosing scope +* **[09:39](#t=09:39)** Module scope +* **[10:36](#t=10:36)** JavaScript is lexically scoped +* **[11:50](#t=11:50)** Closures explained +* **[16:06](#t=16:06)** Examples of where a closure is useful +* [Examples of Closures](https://wesbos.com/javascript/03-the-tricky-bits/closures#examples-of-closures) +* [Tricky Bits](https://wesbos.com/javascript/03-the-tricky-bits/scope) +* **[22:56](#t=22:56)** Why don't you just use a class? + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/663 - Tasty potluck.md b/shows/663 - Tasty potluck.md new file mode 100644 index 000000000..d041b6346 --- /dev/null +++ b/shows/663 - Tasty potluck.md @@ -0,0 +1,63 @@ +--- +number: 663 +title: Potluck × Soft Skills × Release Notes × Headless CMS × Organizing Code × Inet CSS? +date: 1694001600531 +url: https://traffic.libsyn.com/syntax/Syntax_-_663.mp3 +--- + +In this potluck episode of Syntax, Wes and Scott answer your questions about learning soft skills, using release notes, headless CMS, dealing with web components and scripts, what inet is, better ways to use ChatGPT, and more! + +## Show Notes + +* **[00:11](#t=00:11)** Welcome +* **[01:42](#t=01:42)** Scott's butt pincher +* [Affenpinscher](https://en.wikipedia.org/wiki/Affenpinscher) +* **[06:08](#t=06:08)** You keep missing my favorite thing about Civet +* [Civet](https://en.wikipedia.org/wiki/Civet) +* **[07:31](#t=07:31)** What soft skills can I learn to help me in my career? +* [HTML, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World | CSS-Tricks - CSS-Tricks](https://css-tricks.com/hmtl-css-and-js-in-an-add-ocd-bi-polar-dyslexic-and-autistic-world/) +* **[12:42](#t=12:42)** Have you thought about release notes or a what's new section? +* [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) +* [How to generate Changelog using Conventional Commits | by Riccardo Canella | Jobtome Engineering | Medium](https://medium.com/jobtome-engineering/how-to-generate-changelog-using-conventional-commits-10be40f5826c) +* **[15:57](#t=15:57)** Can you explain headless CMS and what the use-cases/implementations are? +* **[19:24](#t=19:24)** Any suggestions for dealing with web components and the client's tracking scripts +* [How to Read Flamegraphs 🔥](https://www.webperf.tips/tip/understanding-flamegraphs/) +* [Chromium F12 Profiler: The Main Thread Pane](https://www.webperf.tips/tip/main-profiler-pane/) +* [Agent Creation has a large CPU time · Issue #915 · bluesky-social/atproto](https://github.com/bluesky-social/atproto/issues/915#issuecomment-1539112436) +* **[25:27](#t=25:27)** Why do we need .d.ts files in TypeScript? +* **[30:15](#t=30:15)** What is inset in CSS? +* [inset - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inset) +* **[35:06](#t=35:06)** Is there a way to use AI/chat gpt to more quickly and easily understand technical documentation? +* [Anthropic \ Home](https://www.anthropic.com/) +* [Getting Started 🚀 Astro Documentation](https://docs.astro.build/en/getting-started/) +* [ChatGPT Plugin - AskTheCode | GPTStore.ai](https://gptstore.ai/plugins/askthecode-dsomok-online) +* [ChatGPT Plugin - Scraper | GPTStore.ai](https://gptstore.ai/plugins/api-gafo-tech) +* [Overview | TanStack Query Docs](https://tanstack.com/query/v4/docs/react/overview) +* [Custom instructions for ChatGPT](https://openai.com/blog/custom-instructions-for-chatgpt) +* **[40:59](#t=40:59)** why is the following true: the string "undefined".includes(undefined)? +* **[43:27](#t=43:27)** How do you organize your code directories? +* **[48:50](#t=48:50)** Is there any good reason in 2023 why we should still be loading JS files with all our script tags at the bottom of the body element? +* **[54:32](#t=54:32)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +* Scott: [Surge power bar](https://amzn.to/3YMdzpR) +* Wes: [Little Hippo Alarm](https://amzn.to/3EqvxVH) + +## Shameless Plugs + +* Scott: [Sentry](https://sentry.io) +* Wes: [Wes Bos Tutorials](https://wesbos.com/courses) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/664 - Supper Fred.md b/shows/664 - Supper Fred.md new file mode 100644 index 000000000..daefca5d3 --- /dev/null +++ b/shows/664 - Supper Fred.md @@ -0,0 +1,57 @@ +--- +number: 664 +title: Supper Club × What's New With Astro with Fred Schott +date: 1694170800957 +url: https://traffic.libsyn.com/syntax/Syntax_-_664.mp3 +--- + +In this supper club episode of Syntax, Wes and Scott talk with Fred Schott all things Astro with the announcement of Astro version 3, marketing open source projects, Starlight docs, keeping up to date, and making major version numbers less scary. + +## Show Notes + +* **[00:35](#t=00:35)** Welcome 3x guest Fred Schott! +* [Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580](https://syntax.fm/show/580/supper-club-astro-2-0-with-fred-schott) +* [Pika Pkg — Syntax Podcast 212](https://syntax.fm/show/212/pika-pkg) +* **[05:11](#t=05:11)** What is Astro? +* **[07:37](#t=07:37)** What's new in Astro v3? +* [Astro 3.0 | Astro](https://astro.build/blog/astro-3/) +* **[14:18](#t=14:18)** Behind the scenes improvements in Astro v3 +* **[18:17](#t=18:17)** HMR Enhancements +* **[20:10](#t=20:10)** What's the hosting partner deal with Vercel? +* [Vercel: Our Official Hosting Partner | Astro](https://astro.build/blog/vercel-official-hosting-partner/) +* **[28:04](#t=28:04)** Docs template Starlight announcement +* [Starlight 🌟 Build documentation sites with Astro](https://starlight.astro.build/) +* **[31:28](#t=31:28)** How often do you release updates? +* **[33:47](#t=33:47)** Marketing open source +* [Time to suit up | Astro Shop](https://shop.astro.build/) +* [SvelteKit • Web development, streamlined](https://kit.svelte.dev/) +* **[36:18](#t=36:18)** Making major version numbers less scary +* **[40:04](#t=40:04)** Does Astro use Vite? +* [Vite | Next Generation Frontend Tooling](https://vitejs.dev/) +* **[42:01](#t=42:01)** Is it different working on a framework than a tool like Snowpack? +* **[43:53](#t=43:53)** Thoughts on cloud text editors +* [Project IDX](https://idx.dev/) +* **[47:02](#t=47:02)** How do you keep up to date? +* **[48:43](#t=48:43)** Do you write in TypeScript? +* **[51:31](#t=51:31)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +* [Factorio](https://www.factorio.com/) + +## Shameless Plugs + +* [Astro (@astrodotbuild)](https://twitter.com/astrodotbuild) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/665 - Hasty.md b/shows/665 - Hasty.md new file mode 100644 index 000000000..868b4016e --- /dev/null +++ b/shows/665 - Hasty.md @@ -0,0 +1,33 @@ +--- +number: 665 +title: CSS Nesting is Here! +date: 1694433600253 +url: https://traffic.libsyn.com/syntax/Syntax_-_665.mp3 +--- + +In this Hasty Treat, Scott and Wes talk about the arrival of CSS nesting. What is CSS nesting? How does CSS nesting work? And does it work in all browsers? + +## Show Notes + +* **[00:24](#t=00:24)** Welcome +* **[02:31](#t=02:31)** What's up with CSS nesting? +* ["CSS Nesting just landed in Firefox 117 which puts it at 100% browser support! You can start using it today — here are 11 examples on how it works 👇](https://twitter.com/wesbos/status/1696201171587809761) +* **[04:10](#t=04:10)** How does CSS nesting work? +* **[09:23](#t=09:23)** What the ampersand does in nesting +* **[21:05](#t=21:05)** It works with media queries +* **[25:29](#t=25:29)** How does it work on all the browsers? +* **[29:32](#t=29:32)** Lightning CSS +* [Lightning CSS](https://lightningcss.dev/) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/666 - tasty.md b/shows/666 - tasty.md new file mode 100644 index 000000000..cec3d4238 --- /dev/null +++ b/shows/666 - tasty.md @@ -0,0 +1,59 @@ +--- +number: 666 +title: Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button +date: 1694606400945 +url: https://traffic.libsyn.com/syntax/Syntax_-_666.mp3 +--- + +In this episode of Syntax, Wes and Scott review the projects they built during Sentry's Hackweek: a realtime Markdown multiplayer editor, and a hardware recording button. + +## Show Notes + +* **[00:11](#t=00:11)** Welcome +* **[00:57](#t=00:57)** What is a hack week? +* **[01:55](#t=01:55)** Syntax Brought to you by Sentry +* **[03:42](#t=03:42)** Scott's project: a multiplayer editor +* [Liveblocks | Collaborative experiences in days, not months](https://liveblocks.io/) +* [PartyKit | Everything is better with friends](https://www.partykit.io/) +* [BlockNote - Javascript Block-Based text editor | BlockNote](https://www.blocknotejs.org/) +* [Dev toolkit for building collaborative editors – Tiptap](https://tiptap.dev/) +* [microsoft/monaco-editor: A browser based code editor](https://github.com/microsoft/monaco-editor) +* [syntaxfm/hackweek-md-multiplayer-editor: Sentry.io Hackweek Submisison - A multiplayer editor for .md files that comits directly to GitHub](https://github.com/syntaxfm/hackweek-md-multiplayer-editor) +* [Convex | The fullstack TypeScript development platform](https://www.convex.dev/) +* [The Everything App](https://anytype.io/) +* **[13:57](#t=13:57)** Multiplayer is so much easier +* **[19:56](#t=19:56)** Wes' project: A recording button +* [Oracle VM VirtualBox](https://www.virtualbox.org/) +* [Run Windows on Mac – Parallels Desktop 19 Virtual Machine for Mac](https://www.parallels.com/ca/pd/general/) +* [Karabiner-Elements](https://karabiner-elements.pqrs.org/) +* [folivora.ai - Great Tools for your Mac!](https://folivora.ai/) +* [Home Assistant](https://www.home-assistant.io/) +* [The World’s Leading 2D and 3D Platform | Unity Pro Free Trial](https://unity.com/pages/pro-free-trial?&&&&gad=1) +* [SendCutSend | Online Laser Cutting and Waterjet Cutting](https://sendcutsend.com/) +* [blender.org - Home of the Blender project - Free and Open 3D Creation Software](https://www.blender.org/) +* **[42:31](#t=42:31)** Learning to skateboard +* **[43:59](#t=43:59)** F1 documentary follow up +* **[45:30](#t=45:30)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +* Scott: [BetterDisplay: Unlock your displays on your Mac!](https://github.com/waydabber/BetterDisplay) +* Wes: [LOVIMAG Magnetic Hooks Heavy Duty](https://www.amazon.com/LOVIMAG-Magnetic-Hanging-Magnets-Refrigerator/dp/B0CBTZ78Q4?crid=19L2TLC6SKOWL&keywords=100lb+magnet+hooks&qid=1693326610&sprefix=100lb+magnet+hooks,aps,109&sr=8-4&th=1) + +## Shameless Plugs + +* Scott: [Syntax on TikTok](https://www.tiktok.com/@syntaxfm) +* Wes: [@WesBos on X.com](https://twitter.com/wesbos) + +## Tweet us your tasty treats + +* [Scott's Instagram](https://www.instagram.com/stolinski/) +* [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +* [Wes' Instagram](https://www.instagram.com/wesbos/) +* [Wes' Twitter](https://twitter.com/wesbos) +* [Wes' Facebook](https://www.facebook.com/wesbos.developer) +* [Scott's Twitter](https://twitter.com/stolinski) +* Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +* [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +* [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +* [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/667 - Supper.md b/shows/667 - Supper.md new file mode 100644 index 000000000..17c7afadb --- /dev/null +++ b/shows/667 - Supper.md @@ -0,0 +1,47 @@ +--- +number: 667 +title: Supper Club × How To Get Your First Dev Job With Stuart Bloxham +date: 1694779200689 +url: https://traffic.libsyn.com/syntax/Syntax_-_667.mp3 +--- + +In this supper club episode of Syntax, Wes and Scott talk with Stuart Bloxham about how he learned to code, what his interview process was like when applying for a job, how he found the time to make it all work, and his thoughts on bootcamps and ways to learn. + +## Show Notes + +- **[00:36](#t=00:36)** Welcome +- [Stuart Bloxham on GitHub](https://github.com/sbloxy123) +- [Stuart Bloxham on LinkedIn](https://www.linkedin.com/in/stuart-bloxham-a36197121/?originalSubdomain=uk) +- **[02:09](#t=02:09)** How did you decide to be a web developer? +- **[08:22](#t=08:22)** Did you have clarity when your kid was born? +- **[10:20](#t=10:20)** What was the interview process like? +- **[18:25](#t=18:25)** What and how did you learn? +- **[20:28](#t=20:28)** What's the state of bootcamps in 2023? +- **[22:03](#t=22:03)** How important have soft skills been? +- **[25:14](#t=25:14)** How do you know when you're ready to apply for a job? +- **[35:24](#t=35:24)** Do you like coding? +- **[37:49](#t=37:49)** How did you find the time to make it all work? +- **[41:42](#t=41:42)** How did you deal with burnout? +- **[43:06](#t=43:06)** Supper Club questions +- **[45:34](#t=45:34)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +- [Flowerhorn cichlid](https://en.wikipedia.org/wiki/Flowerhorn_cichlid) + +## Shameless Plugs + +- [Stuart Bloxham's Portfolio](https://www.stuartbloxham.tech/) + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/668 - Hasty.md b/shows/668 - Hasty.md new file mode 100644 index 000000000..aa419ddbd --- /dev/null +++ b/shows/668 - Hasty.md @@ -0,0 +1,42 @@ +--- +number: 668 +title: Hacking the Tonal - Proxying, Intercepting + Debugging Traffic? +date: 1695038400132 +url: https://traffic.libsyn.com/syntax/Syntax_-_668.mp3 +--- + +In this Hasty Treat, Scott and Wes talk about how you can intercept and debug traffic going out from your computer or other internet connected devices in your home, or your garage! + +## Show Notes + +- **[00:25](#t=00:25)** Welcome +- **[01:55](#t=01:55)** Syntax Brought to you by Sentry +- **[02:17](#t=02:17)** Scott's story of wanting to intercept data +- [Tonal](https://www.tonal.com/) +- **[06:36](#t=06:36)** Other examples +- **[08:38](#t=08:38)** Different types of traffic +- **[14:52](#t=14:52)** TCP vs UDP +- **[16:07](#t=16:07)** Why would you want to run a proxy? +- **[24:20](#t=24:20)** Applications to use +- [Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy](https://www.charlesproxy.com/) +- [Proxyman · Native, Modern Web Debugging Proxy · Inspect network traffic from Mac, iOS, Android devices with ease](https://proxyman.io/) +- [Intercept, debug & mock HTTP with HTTP Toolkit](https://httptoolkit.com/) +- [mitmproxy - an interactive HTTPS proxy](https://mitmproxy.org/) +- [Wireshark · Go Deep](https://www.wireshark.org/) +- [Little Snitch](https://www.obdev.at/products/littlesnitch/index.html) +- [Capturing Modes - Fiddler Everywhere](https://docs.telerik.com/fiddler-everywhere/capture-traffic/capturing-modes) +- [Hacksore on Twitter](https://twitter.com/Hacksore/status/1661369171534393348) +- [How I Hacked my Car :: Programming With Style](https://programmingwithstyle.com/posts/howihackedmycar/) + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/669 - Tasty.md b/shows/669 - Tasty.md new file mode 100644 index 000000000..820521766 --- /dev/null +++ b/shows/669 - Tasty.md @@ -0,0 +1,57 @@ +--- +number: 669 +title: The Svelte + SvelteKit Show +date: 1695211200020 +url: https://traffic.libsyn.com/syntax/Syntax_-_669.mp3 +--- + +In this episode of Syntax, Wes reviews his experience building with Svelte and SvelteKit including templating, data fetching, actions, managing state, request handlers, and more. + +## Show Notes + +- **[00:10](#t=00:10)** Welcome +- **[01:12](#t=01:12)** Syntax Brought to you by Sentry +- **[02:11](#t=02:11)** What is Svelte vs SvelteKit +- [From React To SvelteKit — Syntax Podcast 390](https://syntax.fm/show/390/from-react-to-sveltekit) +- [Hasty Treat - Wes & Scott Look At Svelte 3 — Syntax Podcast 173](https://syntax.fm/show/173/hasty-treat-wes-and-scott-look-at-svelte-3) +- [Svelte • Cybernetically enhanced web apps](https://svelte.dev/) +- [SvelteKit • Web development, streamlined](https://kit.svelte.dev/) +- **[05:59](#t=05:59)** Templating in Svelte +- **[18:20](#t=18:20)** Data fetching in SvelteKit +- **[25:23](#t=25:23)** Actions +- **[28:58](#t=28:58)** State +- **[32:41](#t=32:41)** Binding values +- **[36:18](#t=36:18)** Hooks +- **[37:25](#t=37:25)** Request handlers +- [Special elements • Docs • Svelte](https://svelte.dev/docs/special-elements#svelte-window) +- [website/src/actions/anchor.ts at v2 · syntaxfm/website](https://github.com/syntaxfm/website/blob/v2/src/actions/anchor.ts) +- [website/src/actions/click_outside.ts at v2 · syntaxfm/website](https://github.com/syntaxfm/website/blob/v2/src/actions/click_outside.ts) +- **[39:23](#t=39:23)** Svelte Actions +- **[42:26](#t=42:26)** Popover API +- **[45:33](#t=45:33)** Routing +- **[47:22](#t=47:22)** Layouts +- **[50:08](#t=50:08)** Styling +- **[57:09](#t=57:09)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +- Scott: [Aqara Smart Lock U100](https://www.amazon.com/dp/B0BZSD2L1W?linkCode=sl1&linkId=3c99452f2f410bd473c91749cfa27a6f&language=en_US) +- Wes: [Headphones Replacement Ear Pads,Compatible for Bose Quietcomfort QC15 QC25 QC35 35 ii-(Black Floral)](https://www.amazon.ca/dp/B07QXKNDSW?crid=23KX82S9DQKYG&keywords=bose+wc35+ear+pads+flower&sprefix=bose+wc35+ear+pads+flower,aps,105&th=1&language=en_US&sr=8-18&linkCode=gs2&linkId=5d4c231bde102d4022499ff9ea813b91&tag=isi777-20) + +## Shameless Plugs + +- Scott: [Sentry](https://sentry.io) +- Wes: [Wes Bos Tutorials](https://wesbos.com/courses) + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/670 - Supper Tolinski.md b/shows/670 - Supper Tolinski.md new file mode 100644 index 000000000..c80c1bc56 --- /dev/null +++ b/shows/670 - Supper Tolinski.md @@ -0,0 +1,60 @@ +--- +number: 670 +title: Anxiety and Uncertainty with Dr. Courtney Tolinski +date: 1695384000565 +url: https://traffic.libsyn.com/syntax/Syntax_-_670.mp3 +--- + +In this supper club episode of Syntax, Wes and Scott talk with Dr. Courtney Tolinski about signs and symptoms of anxiety, what the long term effects are of anxiety, how to know if you need help, and what kinds of things you can do to deal with anxiety and uncertainty. + +## Show Notes + +- **[00:35](#t=00:35)** Welcome +- **[01:11](#t=01:11)** Syntax Brought to you by Sentry +- **[02:23](#t=02:23)** Introducing Dr. Courtney Tolinski +- [Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout — Syntax Podcast 236](https://syntax.fm/show/236/mental-health-and-dev-ft-dr-courtney-tolinski-depression-anxiety-imposter-syndrome-focus-motivation-burnout) +- [Supper Club × Coding with ADHD with Dr. Courtney Tolinski — Syntax Podcast 532](https://syntax.fm/show/532/supper-club-coding-with-adhd-with-dr-courtney-tolinski) +- **[04:13](#t=04:13)** What is anxiety? +- **[06:44](#t=06:44)** Is there a difference between anxiety and just not wanting to do something? +- **[08:58](#t=08:58)** What kinds of physical symptoms are there? +- **[15:43](#t=15:43)** What are the longer term effects of anxiety? +- **[17:34](#t=17:34)** How do you know if you need help with anxiety? +- **[21:05](#t=21:05)** What can I do to solve my anxiety? +- [Psychology Today Canada: Health, Help, Happiness + Find a Therapist](https://www.psychologytoday.com/ca) +- [Obsidian - Sharpen your thinking](https://obsidian.md/) +- [How We Feel](https://howwefeel.org/) +- [Apple Reveals More iOS 17 Features Not Available Until Later This Year - MacRumors](https://www.macrumors.com/2023/09/13/ios-17-features-coming-later-this-year/) +- [Meditation and Sleep Made Simple - Headspace](https://www.headspace.com/) +- [Bearable Symptom Tracker, Mood Journal, & Health App](https://bearable.app/) +- [BreathingApp — Personal breathing trainer for a better health](https://breathingapp.com/) +- **[30:15](#t=30:15)** How can we recognize anxiety triggers? +- **[33:26](#t=33:26)** What advice do you have for dealing with uncertainty? +- **[37:54](#t=37:54)** How can I deal with keeping up with everything and feeling like I'm falling behind? +- **[43:02](#t=43:02)** Navigating big life decisions +- **[51:39](#t=51:39)** Supper Club questions +- [Being Well Podcast with Dr. Rick Hanson and Forrest Hanson](https://www.rickhanson.net/being-well-podcast/) +- [Celebrity Book Club with Steven & Lily on Apple Podcasts](https://podcasts.apple.com/us/podcast/celebrity-book-club-with-steven-lily/id1547360770) +- [Criminality](https://www.criminalityshow.com/) +- **[58:01](#t=58:01)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +- [Fullstar Compact Vegetable Chopper - Vegetable Cutter, Food Chopper, Veggie Chopper, Onion Chopper, Vegetable Chopper With Container, Vegetable Slicer, Vegetable Cutter, Mandoline Slicer (6 Inserts): Home & Kitchen](https://www.amazon.com/Fullstar-Mini-Vegetable-Chopper-Container/dp/B0BHSXFTGH?crid=8WWJNGJIIFI4&keywords=fullstar+vegetable+chopper&qid=1694728241&sprefix=fullstar+veg,aps,126&sr=8-6&th=1) + +## Shameless Plugs + +- [Learning Differently (@learning.differently) • Instagram photos and videos](https://www.instagram.com/learning.differently/) +- [Zarlengo Foundation Learning Evaluation Center| Denver, Colorado](https://learningevaluationcenter.org/) + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/671 - hasty.md b/shows/671 - hasty.md new file mode 100644 index 000000000..3faf108dd --- /dev/null +++ b/shows/671 - hasty.md @@ -0,0 +1,35 @@ +--- +number: 671 +title: Tauri Vs Electron - Desktop Apps with Web Tech +date: 1695643200113 +url: https://traffic.libsyn.com/syntax/Syntax_-_671.mp3 +--- + +In this Hasty Treat, Scott and Wes talk about the building desktop apps using Electron vs Tauri. + +## Show Notes + +- **[00:26](#t=00:26)** Welcome +- **[00:55](#t=00:55)** Syntax Brought to you by Sentry +- **[01:15](#t=01:15)** Check my hair app +- [Tauri Apps](https://tauri.app/) +- [Electron](https://www.electronjs.org/) +- [Hand Mirror on the Mac App Store](https://apps.apple.com/us/app/hand-mirror/id1502839586?mt=12) +- [SoFriendly/2fhey](https://github.com/SoFriendly/2fhey) +- **[04:19](#t=04:19)** What is Tauri? +- **[08:23](#t=08:23)** The experience of writing apps in Electron vs Tauri +- **[16:17](#t=16:17)** Electron Forge +- **[20:02](#t=20:02)** Building the same app in Electron vs Tauri + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/672 - tasty CSS.md b/shows/672 - tasty CSS.md new file mode 100644 index 000000000..227e38e08 --- /dev/null +++ b/shows/672 - tasty CSS.md @@ -0,0 +1,61 @@ +--- +number: 672 +title: Reacting to State of CSS Survey +date: 1695816000800 +url: https://traffic.libsyn.com/syntax/Syntax_-_672.mp3 +--- + +In this episode of Syntax, Wes and Scott go over some of the results the State of CSS survey for 2023, including drop-shadow, subgrid, logical properties, media range, and more! + +## Show Notes + +- **[00:25:21](#t=00:25)** Welcome +- **[01:31:22](#t=01:31)** Soccer update +- **[03:52:05](#t=03:52)** Syntax Brought to you by Sentry +- **[04:03:18](#t=04:03)** StateOfCSS.com +- [State of CSS 2023](https://2023.stateofcss.com/en-US) +- **[04:21:11](#t=04:21)** Top 5 Most Used Features +- **[09:13:09](#t=09:13)** Drop-shadow +- **[13:00:11](#t=13:00)** Subgrid +- **[18:31:21](#t=18:31)** Logical properties +- **[20:11:20](#t=20:11)** Media range +- **[20:52:11](#t=20:52)** Object view box +- **[23:10:14](#t=23:10)** Anchor positioning +- **[28:21:09](#t=28:21)** Intrinsic sizing keywords +- **[29:32:00](#t=29:32)** View Transitions API +- [Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/) +- [Astro](https://astro.build/) +- [Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580](https://syntax.fm/show/580/supper-club-astro-2-0-with-fred-schott) +- **[31:43:18](#t=31:43)** Updates to colors in CSS +- **[35:07:05](#t=35:07)** Accent color, current color +- **[36:36:11](#t=36:36)** Scroll snap and overscroll behaviour +- **[39:04:22](#t=39:04)** Touch action +- **[40:16:01](#t=40:16)** Line clamp or variable font +- [Variable Fonts](https://v-fonts.com/) +- **[45:28:11](#t=45:28)** Accessibility features +- **[48:33:12](#t=48:33)** :Has has jumped +- **[49:32:11](#t=49:32)** @Property +- **[53:52:13](#t=53:52)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +- Scott: [Kodiak Cakes Strawberries & Cream Oatmeal Packets (Pack of 6)](https://www.amazon.com/dp/B08BR4QV8Z?th=1&linkCode=sl1&linkId=30dd8a123a0b101f6e0e4e2edcc170b4&language=en_US) +- Wes: [Food Storage Containers, Baby Food Storage Containers with Lid, Baby Food and Toddler Snack Containers]() + +## Shameless Plugs + +- Scott: [Syntax Podcast (@syntaxfm) | TikTok](https://www.tiktok.com/@sntaxfm) +- Wes: [Web Unleashed 2023 - FITC](https://fitc.ca/event/webu23/) + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/673 - supper taylor.md b/shows/673 - supper taylor.md new file mode 100644 index 000000000..b230b3daa --- /dev/null +++ b/shows/673 - supper taylor.md @@ -0,0 +1,56 @@ +--- +number: 673 +title: Getting Hired, Interviewing, and Why Recruiters Suck with Taylor Desseyn +date: 1695988800937 +url: https://traffic.libsyn.com/syntax/Syntax_-_673.mp3 +--- + +In this supper club episode of Syntax, Wes and Scott talk with Taylor Desseyn about his work as a job recruiter, how hiring has changed over the last few years, what soft and tech skills developers need, what not to do when applying, and how AI is affecting the hiring process. + +## Show Notes + +- **[00:35](#t=00:35)** Welcome +- **[01:10](#t=01:10)** Syntax Brought to you by Sentry +- **[01:35](#t=01:35)** Who is Taylor Desseyn? +- [taylor desseyn (/tdesseyn)](https://solo.to/tdesseyn) +- [Taylor Desseyn on LinkedIn](https://www.linkedin.com/in/taylordesseyn/) +- [World-class technical talent on tap | Gun.io](https://gun.io/) +- [taylor desseyn (@tdesseyn) / X](https://twitter.com/tdesseyn) +- [Taylor Desseyn](https://www.youtube.com/channel/UCNqJ-P5d9RUCUsQ-grhlUHw) +- **[03:49](#t=03:49)** Why are recruiters just sending emails? +- **[05:26](#t=05:26)** How much does a recruiter make? +- **[06:44](#t=06:44)** How have things changed in the last couple of years? +- **[09:22](#t=09:22)** How can developers stand out when applying? +- **[13:52](#t=13:52)** What do developers do that cost them jobs? +- **[28:46](#t=28:46)** What soft skills are employers looking for? +- **[32:01](#t=32:01)** What tech skills are showing up in job postings? +- **[34:57](#t=34:57)** Are resumes dead? +- **[40:16](#t=40:16)** How does Gun.io vet people? +- [World-class technical talent on tap | Gun.io](https://gun.io/) +- **[43:15](#t=43:15)** How is AI changing hiring? +- **[46:03](#t=46:03)** What's working on social media marketing in hiring? +- **[48:33](#t=48:33)** Supper Club questions +- **[53:39](#t=53:39)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +- [Group Chat - Dee Murthy -](https://deemurthy.com/group-chat/) +- [Watch Painkiller | Netflix Official Site](https://www.netflix.com/ca/title/81095069) + +## Shameless Plugs + +- [Guidance Counselor 2.0 | Podcast on Spotify](https://open.spotify.com/show/2UBzvscEgepXLUKvA5c24x?nd=1) +- [The Unicorn Finders | Podcast on Spotify](https://open.spotify.com/show/5IF9OyWLb7FB78tWRYfuvE?nd=1) + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/674 - hasty.md b/shows/674 - hasty.md new file mode 100644 index 000000000..7fdd20ee4 --- /dev/null +++ b/shows/674 - hasty.md @@ -0,0 +1,40 @@ +--- +number: 674 +title: A11y Treats - Heading Design +date: 1696248000379 +url: https://traffic.libsyn.com/syntax/Syntax_-_674.mp3 +--- + +In this Hasty Treat, Scott and Wes talk about headings on your website, why you should care, how to structure your headings, and what tooling is there for testing your website? + +## Show Notes + +- **[00:26](#t=00:26)** Welcome +- **[01:21](#t=01:21)** Syntax Brought to you by Sentry +- **[01:41](#t=01:41)** Why do we care about Headings? +- [How-to: Accessible heading structure - The A11Y Project](https://www.a11yproject.com/posts/how-to-accessible-heading-structure/) +- **[03:12](#t=03:12)** Heading design provides an outline for your website +- **[08:45](#t=08:45)** Using H1 classes? +- **[10:28](#t=10:28)** Is the logo an H1? +- **[13:03](#t=13:03)** Giving an ARIA level +- **[17:14](#t=17:14)** Can headings be visually hidden? +- **[21:00](#t=21:00)** Benefits of good heading design +- **[22:27](#t=22:27)** Tooling +- [Heading outlines - ADG](https://www.accessibility-developer-guide.com/examples/headings/) +- [HTML Standard](https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) +- [Polypane, The browser for ambitious web developers](https://polypane.app/) +- [HeadingsMap - Chrome Web Store](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi) +- [HeadingsMap – Get this Extension for 🦊 Firefox (en-US)](https://addons.mozilla.org/en-US/firefox/addon/headingsmap/) + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/shows/675 - tasty.md b/shows/675 - tasty.md new file mode 100644 index 000000000..460a44ed8 --- /dev/null +++ b/shows/675 - tasty.md @@ -0,0 +1,59 @@ +--- +number: 675 +title: Potluck × Bun Thoughts × Guesting on Syntax × Why Rust? +date: 1696420800295 +url: https://traffic.libsyn.com/syntax/Syntax_-_675.mp3 +--- + +In this episode of Syntax, Wes and Scott answer your questions about Bun, using custom auth headers, the difference between trpc, REST, or GraphQL, documenting your code, why learn Rust, and more! + +## Show Notes + +- **[00:08](#t=00:08)** Welcome +- **[00:37](#t=00:37)** Scott's macOS bug +- [Tauri Apps](https://tauri.app/) +- **[01:26](#t=01:26)** Syntax Brought to you by Sentry +- **[01:46](#t=01:46)** What are your thoughts on Bun? +- [Bun — A fast all-in-one JavaScript runtime](https://bun.sh/) +- [Zig Programming Language](https://ziglang.org/) +- [Deno, The next-generation JavaScript runtime](https://deno.com/) +- [Cloudflare Workers](https://developers.cloudflare.com/workers/) +- [Netlify Connect](https://www.netlify.com/products/connect/) +- [Storybook](https://storybook.js.org/) +- [Histoire](https://histoire.dev/) +- **[10:32](#t=10:32)** How can I add custom auth header for image requests done by the browser? +- **[16:39](#t=16:39)** What are the differences between trpc, REST, and graphql? +- **[23:55](#t=23:55)** What kind of teams would use trpc, REST, or graphql? +- **[26:19](#t=26:19)** Are there any podcast guest opportunities on Syntax? +- **[31:28](#t=31:28)** With no initial documentation, how do you suggest we document our intricate code, business logic, and integrations? +- **[37:57](#t=37:57)** Rust didn't invent this, they're common paradigms in languages +- **[40:12](#t=40:12)** Why Rust? +- [Rust Programming Language](https://www.rust-lang.org/) +- **[42:59](#t=42:59)** Is Scott still using his Tonal? +- [Tonal](https://www.tonal.com/) +- **[43:49](#t=43:49)** What did I do to make Fetch rebel against me? +- [Proxyman](https://proxyman.io/) +- **[49:47](#t=49:47)** SIIIIICK ××× PIIIICKS ××× + +## ××× SIIIIICK ××× PIIIICKS ××× + +- Scott: [Glow Up](https://www.netflix.com/ca/title/81075536) +- Wes: [SendCutSend](https://sendcutsend.com/) + +## Shameless Plugs + +- Scott: [Syntax on TikTok](https://www.tiktok.com/@syntaxfm) +- Wes: [Wes Bos Tutorials](https://wesbos.com/courses) + +## Tweet us your tasty treats + +- [Scott's Instagram](https://www.instagram.com/stolinski/) +- [LevelUpTutorials Instagram](https://www.instagram.com/LevelUpTutorials/) +- [Wes' Instagram](https://www.instagram.com/wesbos/) +- [Wes' Twitter](https://twitter.com/wesbos) +- [Wes' Facebook](https://www.facebook.com/wesbos.developer) +- [Scott's Twitter](https://twitter.com/stolinski) +- Make sure to include [@SyntaxFM](https://twitter.com/SyntaxFM) in your tweets +- [Wes Bos on Bluesky](https://bsky.app/profile/wesbos.com) +- [Scott on Bluesky](https://bsky.app/profile/tolin.ski) +- [Syntax on Bluesky](https://bsky.app/profile/syntax.fm) diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index d959c535e..8f283f3cd 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,5 +1,5 @@ import type { Actions } from '@sveltejs/kit'; -import type { PageServerLoad, PageServerLoadEvent, } from './$types'; +import type { PageServerLoad } from './$types'; import { SHOW_QUERY } from '$server/ai/queries'; export const load: PageServerLoad = async ({ locals, setHeaders }) => { @@ -7,7 +7,7 @@ export const load: PageServerLoad = async ({ locals, setHeaders }) => { 'cache-control': 'max-age=240' }); return { - latest: locals.prisma.show.findMany(SHOW_QUERY()), + latest: locals.prisma.show.findMany(SHOW_QUERY()) }; }; diff --git a/src/routes/api/oauth/github/callback/+server.ts b/src/routes/api/oauth/github/callback/+server.ts index 7a082c655..e8d455637 100644 --- a/src/routes/api/oauth/github/callback/+server.ts +++ b/src/routes/api/oauth/github/callback/+server.ts @@ -4,7 +4,6 @@ import { find_session } from '../../../../../server/auth/sessions'; import { find_or_create_user } from '../../../../../server/auth/users'; // This route runs after the user has been successfully validated on GitHub -/** @type {import('./$types').RequestHandler} */ export async function GET({ url, cookies, locals }) { // *** ฅ^•ﻌ•^ฅ *** // // *** SyNtAx AuTh *** // diff --git a/src/routes/api/shows/+server.ts b/src/routes/api/shows/+server.ts new file mode 100644 index 000000000..3917b4680 --- /dev/null +++ b/src/routes/api/shows/+server.ts @@ -0,0 +1,33 @@ +import { json } from '@sveltejs/kit'; +import format from 'date-fns/format'; + +export const prerender = true; + +export async function GET({ locals }) { + const data = await locals.prisma.show.findMany({ + orderBy: { number: 'desc' }, + include: { + guests: { + select: { + Guest: { + select: { + github: true, + name: true + } + } + } + } + } + }); + + const shows = data.map((show) => { + return { + ...show, + notesFile: show?.md_file, + displayNumber: show?.number.toString(), + displayDate: format(new Date(show.date), 'MMMM do, yyyy') + }; + }); + + if (data) return json(shows); +} diff --git a/src/routes/api/shows/[number=show_number]/+server.ts b/src/routes/api/shows/[number=show_number]/+server.ts new file mode 100644 index 000000000..f7ff5004f --- /dev/null +++ b/src/routes/api/shows/[number=show_number]/+server.ts @@ -0,0 +1,32 @@ +import { json } from '@sveltejs/kit'; +import format from 'date-fns/format'; + +export const prerender = true; + +export async function GET({ locals, params }) { + const data = await locals.prisma.show.findFirst({ + where: { + number: parseInt(params.number) + }, + orderBy: { number: 'desc' }, + include: { + guests: { + select: { + Guest: { + select: { + github: true, + name: true + } + } + } + } + } + }); + if (data) + return json({ + ...data, + notesFile: data?.md_file, + displayNumber: data?.number.toString(), + displayDate: format(new Date(data.date), 'MMMM do, yyyy') + }); +} diff --git a/src/routes/api/shows/latest/+server.ts b/src/routes/api/shows/latest/+server.ts new file mode 100644 index 000000000..cf0dbd9ee --- /dev/null +++ b/src/routes/api/shows/latest/+server.ts @@ -0,0 +1,29 @@ +import { json } from '@sveltejs/kit'; +import format from 'date-fns/format'; + +export const prerender = true; + +export async function GET({ locals }) { + const data = await locals.prisma.show.findFirst({ + orderBy: { number: 'desc' }, + include: { + guests: { + select: { + Guest: { + select: { + github: true, + name: true + } + } + } + } + } + }); + if (data) + return json({ + ...data, + notesFile: data?.md_file, + displayNumber: data?.number.toString(), + displayDate: format(new Date(data.date), 'MMMM do, yyyy') + }); +}