Our React Wish List
Syntax - Tasty Web Development Treats1 Heinä 2020

Our React Wish List

In this episode of Syntax, Scott and Wes talk about what they wish existed in React! DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes React 03:53 - Unmount delay for animation 06:20 - Suspense with SSR released (or not because I think they are shelving it) Dan's tweet: https://twitter.com/dan_abramov/status/1259614150386425858 09:24 - File based components Like Svelte and Vue This would look like a file with a special scoped tag per page. 11:50 - Prevent Default shortcuts 13:00 - No more useIsoLayoutEffect useLayoutEffect on SSR should just work without a custom hook Simple data fetching strategy based on promises 15:52 - Recommended hooks E.g. "here is the best way to do things" Official list of best practice hooks 18:25 - A good form strategy Bind inputs to state directly without any change handlers Inputs and forms all around need more magic - it's painful 20:43 - Write once deploy everywhere Not likely ever E.g. automatic transformation into react-native (obviously not going to happen) 22:28 - Compile time directives https://github.com/bukharim96/directive-x 25:11 - Slots instead of children Allows for things like named slots more explicit than children JSX 26:44 - Removal of htmlFor, className and all other abominations of html 29:09 - Import Raact from React for JSX to work Soon will be fixed https://github.com/babel/babel/pull/11154 react-require 32:31 - Better conditional / if statement syntax 33:09 - Fragments by default Just do it for us - the error message already knows 33:54 - Automatic key ids If mapping an object, check for common _id or id 36:36 - Simple scoped CSS built in 37:29 - Short hand for props with same name is prop={prop} 39:00 - Prop interpolation without backticks: name="$first $last" Or just backticks without brackets name=${first} ${last} instead of name={${first} ${last}} Tooling 39:43 - Story for typescript/prettier/babel 40:11 - Automatic a href client side routing 41:51 - Scaffolding and component generation Links Svelte Vue React Native NativeScript react-spring Paul Henschel Scream Sneeze: https://twitter.com/morganc_smith/status/1235332301044801538 ××× SIIIIICK ××× PIIIICKS ××× Scott: Software Engineering Daily Podcast Wes: PicQuic Screwdriver Shameless Plugs Scott: Sapper For Everyone - Sign up for the year and save 25%! Wes: Wes' New Gatsby Course - Use the coupon code 'Syntax' for $10 off! 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

Jaksot(964)

876: MIDI & Music in the Browser

876: MIDI & Music in the Browser

Wes and Scott talk about the Web Audio and Web MIDI APIs, diving into how they enable powerful music and sound manipulation in the browser. They explore MIDI messaging, synthesizing audio, creative coding with music, and share hands-on projects, tips, and libraries to get started. Show Notes 00:00 Welcome to Syntax! 01:17 Brought to you by Sentry.io 02:04 Fun audio experiments Bebot 05:32 What is MIDI? Web MIDI API 14:18 Advanced examples with WEBMIDI.js WEBMIDI.js 17:02 Outputting MIDI messages 24:40 Exploring the Web Audio API webmidirtc 31:20 Audio sampling in the browser 37:35 Media Recorder 39:21 Fun projects MIDI chord machine 42:08 Sick Picks + Shameless Plugs Sick Picks Scott: MX Master 3S Wes: Microcontoller Shameless Plugs The MOST Starred JS Projects Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

12 Helmi 48min

875: JavaScript Signals Explained

875: JavaScript Signals Explained

JavaScript is missing a built-in way to make variables reactive—but Signals might change that. Scott and Wes break down what Signals are, how they compare to React state, and how different frameworks like Preact, Solid, Vue, and Qwik are already using them. Show Notes 00:00 Welcome to Syntax! 01:49 Brought to you by Sentry.io. 02:28 Why JavaScript needs reactive variables. 03:16 What exactly are signals? Signals Proposal. 04:02 Understanding computed state. 04:59 How signals differ from React state. 06:12 How different frameworks handle reactivity. 07:09 DOM Parts. Pull Request. 07:26 HTML Template Instantiation. Template Instantiation. 09:10 Comparing signals across frameworks: Preact, Solid.js, Vue, and more. PreactJS Signals. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

10 Helmi 16min

874: Fast Apps - Easy Perf Wins

874: Fast Apps - Easy Perf Wins

Is your app feeling sluggish? Scott and Wes break down the biggest performance bottlenecks—like bloated assets, slow databases, and waterfall requests—and share easy wins to make your site feel lightning fast. From smarter caching to preloading tricks, these tips will have your app zipping along in no time! Show Notes 00:00 Welcome to Syntax! 00:58 Brought to you by Sentry.io. 02:01 What makes apps slow? 02:10 Loading too much. 03:26 Slow database work. 04:04 Slow server. 04:54 Waterfall requests. 06:34 How do I know what is slow? 06:45 Web vitals. 12:50 Streaming. 14:05 Network tab. 18:18 Performance tab. 22:53 Caching. 22:59 Client-side caching. 23:38 Server-side caching. Valkey.io. Redis.io. 25:40 Local data. 26:11 Gzip. 29:23 CDN. 30:57 Images. Cloudinary. Cloudflare Images. Imgix. Vercel Images. 31:08 Serving. 34:16 Compressing. 35:06 Ship fewer images. 35:50 Loading JS. Async vs Defer Attributes. 37:00 CSS. 38:28 Preloading & Prefetch. 39:40 Preloading on hover. 41:44 Ship less code. 43:49 Icons Nucleo App. 47:01 Fonts Tolin.ski. 51:13 Sick Picks + Shameless Plugs. Sick Picks Scott: Skywalkers on Netflix. Wes: Oxo Swivel Peeler. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

5 Helmi 54min

873: Standard Schema: The Universal JavaScript Data Interface

873: Standard Schema: The Universal JavaScript Data Interface

Wes and Scott talk about the standard schema for data validation, a collective effort by various library authors to create a unified interface. They discuss the benefits, how it works, and its impact on developers and libraries. Show Notes 00:00 Welcome to Syntax! 01:24 Brought to you by Sentry.io 02:44 What is Standard Schema and how does it work? Standard Schema Spec Fabian Hiller Valibot David Blass ArkType Colin McDonnell Zod 06:00 Benefits of Standard Schema 08:54 Implementation and usage 11:25 Is this primarily for end users or library authors? Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

3 Helmi 13min

872: Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths

872: Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths

Wes and Scott answer questions about HTML semantics, TypeScript, adapting to AI’s impact on web development, and the best and worst browsers for developers. They also tackle project planning, deploying SvelteKit apps, and navigating online opinions in tech. Show Notes 00:00 Welcome to Syntax! 01:04 Best container element for a grid of products? 04:50 TypeScript null checks 09:44 Adapt to AI or get left behind Syntax Episode 870 13:13 Why did 3D never take off? three.js React Three Fiber Rep Fitness Rack Builder Maxime Heckel GitHub Universe The element 18:53 Podcast audio and video in one feed? Who Smarted? 21:06 Brought to you buy Sentry.io 22:30 Best and worst browsers for web dev? Firefox Edge Chrome Arc Safari 27:39 Why use a lock file for managing dependency versions Don’t gitignore your lock files! 30:34 Should you build your own sync engine? Scott’s Naive Sync Example 34:21 Best practices when starting a new project from scratch Habit Path 38:33 How to deploy a SvelteKit app on something other than Vercel or Netlify Coolify Crash Course 42:54 The reality of online opinions in tech 48:10 Spending $120k on an app idea 54:12 Sick Picks + Shameless Plugs Sick Picks Scott: My Mind Wes: Metal Detector Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

29 Tammi 57min

871: Coding Agents Cursor + Windsurf Tips

871: Coding Agents Cursor + Windsurf Tips

Scott and Wes explore the world of coding agents, diving into tools like Cursor and Windsurf that promise to change how we write and manage code. They discuss modes, workflows, and practical tips for experimenting with these AI-powered tools in your next project. Show Notes 00:00 Welcome to Syntax! 04:12 What are AI Agents? Cursor Features, Windsurf Features. 07:25 Brought to you by Sentry.io. 07:50 Chat Mode. 08:11 Composer Mode. 08:55 Agent Mode. 10:03 Inline Chat Mode. 11:02 JavaScript Set Methods Demo. Wes’ Example on X. 16:10 Fire Dispatch Data. 20:01 Rules Files. Cursor Directory. 22:37 Use screenshots. 23:36 Refactoring to separate files. 23:53 Use it to experiment. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

27 Tammi 27min

870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding

870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding

Wes and Scott talk with Kevin Hou and Varun Mohan from Windsurf about the evolving landscape of AI in coding, and the future of software development. Show Notes 00:00 Welcome to Syntax! 00:50 The origins of Windsurf and Codeium Windsurf Codeium Vs Code Cursor 03:14 Rethinking IDE UX 05:45 Will Microsoft eventually implement these AI features in VS Code? 09:27 The "agentic" editor concept 17:58 The future of software development with AI 24:37 AI in large codebases 28:22 Brought to you by Sentry.io 28:46 How does AI stay current with frequent language/library updates? 33:07 Behind Windsurf's fresh design 35:23 Challenges with forking VS Code 38:47 AI and future innovations 43:04 How Windsurf approaches AI experimentation 45:11 Pricing and user segments 48:38 Will Windsurf ever run in the browser? 50:58 Sick Pick + Shameless Plugs Sick Picks Kevin: Ricoh GR IIIx Varun: Di2 Shifter Shameless Plugs Windsurf Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

22 Tammi 57min

869: Node + TypeScript in 2025

869: Node + TypeScript in 2025

Scott and Wes explore the experimental world of running TypeScript in Node, breaking down the differences between type stripping and compiling. They cover the pros, cons, and quirks of the current implementation, plus explore tools like tsx, ts-node, and even alternatives like Deno. Show Notes 00:00 Welcome to Syntax! 00:41 Brought to you by Sentry.io. 01:29 Running TypeScript in Node. 01:45 Experimental Type Stripping. 03:17 TypeScript refresher. 04:05 TypeScript can be compiled and/or Type Stripped. 05:09 Current Node implementation is only type stripping. 05:40 Limitations of no compiling. 05:57 Enums. 08:30 Other issues. 08:35 Parameter properties. 09:20 Experimental transform types. 10:01 Importing types with type keyword. 11:17 No need for sourcemaps. 11:42 No dependencies. 13:08 Other tools. 13:25 tsx. 14:28 ts-node. 14:44 JSDoc. 16:30 Deno and Bun. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

20 Tammi 18min

Suosittua kategoriassa Politiikka ja uutiset

rss-ootsa-kuullut-tasta
aikalisa
tervo-halme
ootsa-kuullut-tasta-2
politiikan-puskaradio
viisupodi
rss-podme-livebox
et-sa-noin-voi-sanoo-esittaa
rss-vaalirankkurit-podcast
otetaan-yhdet
aihe
linda-maria
the-ulkopolitist
rss-polikulaari-humanisti-vastaa-ja-muut-ts-podcastit
rss-hyvaa-huomenta-bryssel
radio-antro
rss-valiokunta
rss-kaikki-paskaksi-ystavat
rss-kuka-mina-olen
rss-tasta-on-kyse-ivan-puopolo-verkkouutiset