
Syntax - Tasty Web Development Treats
Podcast von Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers
Nimm diesen Podcast mit

Mehr als 1 Million Hörer*innen
Du wirst Podimo lieben und damit bist du nicht allein
Mit 4,7 Sternen im App Store bewertet
Alle Folgen
937 Folgen
Wes and Scott dive into some hot takes and classic debates—tabs vs spaces, camel vs snake case, export styles, barrel files, variable naming, and more. SHOW NOTES * 00:00 Welcome to Syntax! * 01:26 CSS variables: descriptive vs. semantic * 03:38 snake_case vs. camelCase * 04:54 Default exports vs. named exports * 06:23 Barrel files vs. direct imports * 09:15 Function declaration vs. function expression * 11:00 Inferred types vs. explicit types * 13:40 Brought to you by Sentry.io [https://sentry.io/syntax/] * 14:40 Long and explicit variable names vs. short with comments * 16:27 Self-documenting code vs. code comments * 17:03 Rebase vs. merge commit * 18:39 Naming event parameters: e vs. event * 20:33 Tabs vs. spaces * 22:18 Big line height vs. small line height * 23:50 Hard line length vs. line wrap HIT US UP ON SOCIALS! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

Scott takes Wes on a tour of Omarchy, DHH’s polished Arch + Hyprland Linux setup that promises speed, beauty, and endless keyboard shortcuts. From first impressions to daily workflows, Scott debates whether it’s good enough to pull him out of the Apple ecosystem for good. SHOW NOTES * 00:00 Welcome to Syntax! * 02:31 Brought to you by Sentry.io [https://sentry.io/syntax]. * 02:55 What is Omarchy [https://omarchy.org/]? * 02:57 Arch-based distribution. * 03:42 Hyprland [https://hypr.land/] window management. * 05:08 Wayland [https://wayland.freedesktop.org/] Display Server Protocol. * 06:27 Installation Defaults. * 06:53 System-wide shortcuts. * 09:01 My first impressions. * 09:41 Connecting to my NAS. * 10:54 Gigantic UI. * 12:21 Day 2 Experiences. * 13:22 Resizing window challenges. * 16:11 Neovim [https://neovim.io/] and Lazyvim [https://www.lazyvim.org/]. * 16:49 Lazygit [https://github.com/jesseduffield/lazygit]. * 19:07 How do you use it and why is it good. * 19:14 Command Palette. * 19:49 Raycast. * Recreating Raycast [https://byteatatime.dev/posts/recreating-raycast]. * 20:50 Using the app launcher. * 21:25 Screensavers. * 21:59 OS Style. * 22:55 My apps, my apps, my apps, check it out. * 25:07 Is the hardware comparable to Mac’s M processors? * 27:24 Installing new apps. * 29:26 Web apps as first class citizens. * 32:47 What I’ll miss. * 35:56 What’s going on with MacOS UI? * 38:37 Annoyances. * 39:31 My advice. * Read the Manual [https://learn.omacom.io/2/the-omarchy-manual/]. * 44:39 Sick Picks & Shameless Plugs. SICK PICKS * Scott: Omarchy Manual [https://learn.omacom.io/2/the-omarchy-manual/57/shell-tools]. * Wes: Ugreen 200w Charger [https://amzn.to/3K0snh6], Silicone USB C [https://amzn.to/41zvWkr]. SHAMELESS PLUGS * Scott: Syntax on YouTube [https://youtube.com/@syntaxfm]. HIT US UP ON SOCIALS! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

Scott, Wes, and CJ dive into Wes’s Hackweek project: a real-time, web-controlled LED grid. They break down the hardware build, custom 3D-printed diffuser, ESP32 microcontroller, and Cloudflare durable objects powering live pixel art, GitHub activity displays, and interactive web drawings. SHOW NOTES * 00:00 Welcome to Syntax! * 02:03 Wes’ Hackweek project: a web-controlled LED grid * 03:52 The hardware: LED panels, soldering, and power * WS2812 LED panels [https://www.amazon.com/s?k=WS2812+led+panels&crid=3QK4XZNYSG63J] * 06:38 ESP32 microcontroller and WLED firmware explained * ESP32 Microcontroller [https://www.amazon.com/s?k=esp+32+microcontroller] * 10:57 Power supply challenges and injection fixes * 15:05 Debugging and testing a DIY LED matrix * 15:56 Shorts, blown circuits, and melted wires * 17:58 Designing and 3D-printing the diffuser for crisp pixels * 21:29 The software: Cloudflare Durable Objects + Party Server * Cloudflare Durable Objects [https://developers.cloudflare.com/durable-objects/] * Party.server [https://docs.partykit.io/reference/partyserver-api/] * 22:18 Real-time sync and state management across clients * Party Client [https://docs.partykit.io/reference/partysocket-api/] * 28:43 Connecting the server to the LED hardware * 41:51 Open access fun: scripts, NSFW images, and moderation * Cloudflare tunnel [https://local.wesbos.com/] * 44:10 Live demos * 45:34 Future plans: stats, rooms, and making it always-on HIT US UP ON SOCIALS! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

CJ takes us behind the scenes of Hackweek to share how he built a custom Sega Genesis game from scratch, complete with assembly code, level loading, and retro hardware tricks. From SGDK to parallax faking, this episode is a deep dive into old-school game dev with a modern twist. SHOW NOTES * 00:00 Welcome to Syntax! * 00:44 Why a Sega game? * Sega Genesis [https://en.wikipedia.org/wiki/Sega_Genesis]. * Sega Master System [https://en.wikipedia.org/wiki/Master_System]. * MKBHD Retro Tech: Sega [https://www.youtube.com/watch?v=PRVr1heimY8]. * 06:55 What is it running on? * 07:49 Working with assembly code. * 10:11 Sega Genesis Development Kit [https://github.com/Stephane-D/SGDK/?tab=readme-ov-file]. * Stephane-D GitHub [https://github.com/Stephane-D]. * 10:54 Awesome Megadrive [https://github.com/And-0/awesome-megadrive]. * 12:02 Booting on an emulator. * 13:07 Gens and KMod [https://segaretro.org/Gens_KMod]. * 15:54 Compiling stage. * 17:44 Genesis Code VS Code Extension [https://marketplace.visualstudio.com/items?itemName=zerasul.genesis-code]. * 18:22 Images and Assets. * 19:46 Loading images with bitmap. * 23:50 Megacat Studios [https://megacatstudios.com/blogs/retro-development/sega-genesis-mega-drive-vdp-graphics-guide-v1-2a-03-14-17]. * 25:21 Z index? * Faking Parallax [https://www.youtube.com/watch?v=wt73KPS_23w]. * 27:34 Specific code examples. * 27:51 Platformer Engine [https://github.com/GerardGascon/PlatformerEngine/blob/main/PlatformerEngine/src/map.c]. * 30:01 Platformer Sample Game. * 30:44 LDTK (Level Designer Toolkit). * 33:13 Tiled Collision mapping. * 37:42 What about debugging? * 39:37 Loading in levels. * RetroGameMechanicsExplained [https://www.youtube.com/c/RetroGameMechanicsExplained]. * Sega Mega-CD Development Unit [https://www.youtube.com/watch?v=aD8kCGBi4wI]. * 43:56 Challenges with graphics. * 49:56 Adding music. * Super Cartridge [https://www.amazon.com/Super-Cartridge-Multi-Sega-Genesis-Consoles/dp/B0B5V9HHY8]. * Flahskit Programmer MD [https://krikzz.com/our-products/accessories/flashkitmd.html]. * Flashkit Cart MD [https://krikzz.com/our-products/cartridges/flashkitmd.html]. HIT US UP ON SOCIALS! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

Scott, Wes, and CJ dive into SynHax, Scott’s Hackweek project for code battles. They discuss live coding duels, referee controls, and the surprisingly simple tech stack that delivers instant updates and audience engagement. SHOW NOTES * 00:00 Welcome to Syntax! * 01:50 Brought to you by Sentry.io [https://sentry.io/syntax/] * 02:30 What is SynHax? * This Button Broke Our Brains (CSS Challenge) [https://www.youtube.com/watch?v=xtRx-aNrNe8] * 04:21 The Stack * SvelteKit [https://svelte.dev/docs/kit/introduction] * Postgres [https://www.postgresql.org/] * Drizzle [https://orm.drizzle.team/] * Zero Sync [https://zero.rocicorp.dev/docs/sync] * Better Auth [https://www.better-auth.com/] * Syntax 931: How to make good choices when starting a coding project [https://www.youtube.com/watch?v=PRzEvvvxli8] * 07:39 How it works * 15:03 The battle experience * 28:28 Fun details * 34:12 Creating new battles & the admin dashboard HIT US UP ON SOCIALS! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]