Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button
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 Welcome 00:57 What is a hack week? 01:55 Syntax Brought to you by Sentry 03:42 Scott’s project: a multiplayer editor Liveblocks | Collaborative experiences in days, not months PartyKit | Everything is better with friends BlockNote - Javascript Block-Based text editor | BlockNote Dev toolkit for building collaborative editors – Tiptap microsoft/monaco-editor: A browser based code editor syntaxfm/hackweek-md-multiplayer-editor: Sentry.io Hackweek Submisison - A multiplayer editor for .md files that comits directly to GitHub Convex | The fullstack TypeScript development platform The Everything App 13:57 Multiplayer is so much easier 19:56 Wes’ project: A recording button Oracle VM VirtualBox Run Windows on Mac – Parallels Desktop 19 Virtual Machine for Mac Karabiner-Elements folivora.ai - Great Tools for your Mac! Home Assistant The World’s Leading 2D and 3D Platform | Unity Pro Free Trial SendCutSend | Online Laser Cutting and Waterjet Cutting blender.org - Home of the Blender project - Free and Open 3D Creation Software 42:31 Learning to skateboard 43:59 F1 documentary follow up 45:30 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: BetterDisplay: Unlock your displays on your Mac! Wes: LOVIMAG Magnetic Hooks Heavy Duty Shameless Plugs Scott: Syntax on TikTok Wes: @WesBos on X.com Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky
13 Sep 202351min
CSS Nesting is Here!
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 Welcome 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 👇 04:10 How does CSS nesting work? 09:23 What the ampersand does in nesting 21:05 It works with media queries 25:29 How does it work on all the browsers? 29:32 Lightning CSS Lightning CSS Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky
11 Sep 202331min
Supper Club × What's New With Astro with Fred Schott
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 Welcome 3x guest Fred Schott! Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580 Pika Pkg — Syntax Podcast 212 05:11 What is Astro? 07:37 What’s new in Astro v3? Astro 3.0 | Astro 14:18 Behind the scenes improvements in Astro v3 18:17 HMR Enhancements 20:10 What’s the hosting partner deal with Vercel? Vercel: Our Official Hosting Partner | Astro 28:04 Docs template Starlight announcement Starlight 🌟 Build documentation sites with Astro 31:28 How often do you release updates? 33:47 Marketing open source Time to suit up | Astro Shop SvelteKit • Web development, streamlined 36:18 Making major version numbers less scary 40:04 Does Astro use Vite? Vite | Next Generation Frontend Tooling 42:01 Is it different working on a framework than a tool like Snowpack? 43:53 Thoughts on cloud text editors Project IDX 47:02 How do you keep up to date? 48:43 Do you write in TypeScript? 51:31 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Factorio Shameless Plugs Astro (@astrodotbuild) Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky
8 Sep 202355min
Potluck × Soft Skills × Release Notes × Headless CMS × Organizing Code × Inet CSS?
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 Welcome 01:42 Scott’s butt pincher Affenpinscher 06:08 You keep missing my favorite thing about Civet Civet 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 12:42 Have you thought about release notes or a what’s new section? Conventional Commits How to generate Changelog using Conventional Commits | by Riccardo Canella | Jobtome Engineering | Medium 15:57 Can you explain headless CMS and what the use-cases/implementations are? 19:24 Any suggestions for dealing with web components and the client’s tracking scripts How to Read Flamegraphs 🔥 Chromium F12 Profiler: The Main Thread Pane Agent Creation has a large CPU time · Issue #915 · bluesky-social/atproto 25:27 Why do we need .d.ts files in TypeScript? 30:15 What is inset in CSS? inset - CSS: Cascading Style Sheets | MDN 35:06 Is there a way to use AI/chat gpt to more quickly and easily understand technical documentation? Anthropic \ Home Getting Started 🚀 Astro Documentation ChatGPT Plugin - AskTheCode | GPTStore.ai ChatGPT Plugin - Scraper | GPTStore.ai Overview | TanStack Query Docs Custom instructions for ChatGPT 40:59 why is the following true: the string “undefined”.includes(undefined)? 43:27 How do you organize your code directories? 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 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Surge power bar Wes: Little Hippo Alarm Shameless Plugs Scott: Sentry Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky
6 Sep 20231h
JavaScript Closures & Scope Explained
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 Welcome 01:49 Being tired The Strokes & Weyes Blood Tickets | 14th August | Red Rocks Amphitheatre 05:08 Landscaping 10:53 Gym updates 23:01 House projects 28:39 Why are search engines so awful these days? 39:20 Internet routing 45:17 Linus Tech Tips ethics and issues 48:29 Rewiring a kid’s ATV 50:49 What we’re watching The Stronger By Science Podcast Watch Full Swing | Netflix Official Site Break Point | Official Trailer | Netflix Watch Formula 1: Drive to Survive | Netflix Official Site 58:37 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The First Cat in Space Ate Pizza Wes: Steam cleaner Shameless Plugs Scott: Sentry Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky
4 Sep 202324min
Supper Club × Shipping ESM with Mark Erikson
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 Welcome 01:45 Introducing Shipping ESM with Mark Erikson Mark Erikson (@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.” Mark’s Dev Blog Blogged Answers: My Experience Modernizing Packages to ESM Greatest Hits: The Most Popular and Most Useful Posts I’ve Written arethetypeswrong.github.io: Tool for analyzing TypeScript types of npm packages publint 07:01 How did we get to this space in modules? 16:30 How do you deal with permutations? 22:13 Do bundlers get in the way or helping? 26:16 Are default imports useful? 30:35 Are the types wrong errors 33:41 Has TypeScript made this easier? 37:56 What’s your tool stack for building? 39:32 How do you test? 41:35 Will we ever stop bundling? 48:03 What about source maps? 52:32 Supper Club Questions What is Windows Subsystem for Linux Eagle Oceanic Next DroidSansMono NF Font 55:18 React Types has more downloads than React? 59:42 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Shirley Wu—Taking up space (Keynote, Outlier 2023) Shameless Plugs Replay (@replayio) Replay - The time-travel debugger from the future. Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky
1 Sep 20231h 8min
Anything but Coding - Landscaping, Fitness, and more!
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 Welcome 01:49 Being tired The Strokes & Weyes Blood Tickets | 14th August | Red Rocks Amphitheatre 05:08 Landscaping 10:53 Gym updates 23:01 House projects 28:39 Why are search engines so awful these days? 39:20 Internet routing 45:17 Linus Tech Tips ethics and issues 48:29 Rewiring a kid’s ATV 50:49 What we’re watching The Stronger By Science Podcast Watch Full Swing | Netflix Official Site Break Point | Official Trailer | Netflix Watch Formula 1: Drive to Survive | Netflix Official Site 58:37 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The First Cat in Space Ate Pizza Wes: Steam cleaner Shameless Plugs Scott: Sentry Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky
30 Aug 20231h 5min
OG Image Options
In this Hasty Treat, Scott and Wes talk about OG images, interesting ways you can work with them, and ways you can work dynamically with them. Show Notes 00:11 Welcome 02:18 What are OG images? 06:19 Testing OG images Polypane, The browser for ambitious web developers Meta Tags — Preview, Edit and Generate Sharing Debugger - Meta for Developers Card Validator | Twitter Developers 08:27 Creating an OG image vercel/satori: Enlightened library to convert HTML and CSS to SVG Open Graph (OG) Image Generation | Vercel Docs Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel 09:41 Dynamically generating OG images wesbos.com/thumbnail/?thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg&title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses 21:16 Using Puppeteer Puppeteer | Puppeteer Puppeteer · Browser Rendering docs Cloudinary - Image and Video Upload, Store ad Monetization Fast and reliable end-to-end testing for modern web apps | Playwright 28:47 Canva API Build The Tools Behind Great Design | Canva Developers Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky
28 Aug 202329min
