TypeScript Fundamentals — Getting a Bit Deeper
Syntax - Tasty Web Development Treats28 Huhti 2021

TypeScript Fundamentals — Getting a Bit Deeper

In this episode of Syntax, Scott and Wes continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases. Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes Deep end stuff 03:30 - any vs unknown 06:20 - never https://twitter.com/Igorbdsq/status/1351681019196436482 09:14 - .d.ts Definition files Usually for existing libraries that don’t have types Can be generated or hand-written Also really handy for pure JS projects, you still get good autocomplete because of these 13:25 - Type generation Can be generated from GraphQL, or Schemas, or from JSON Output 17:20 - TypeScript generics (variables) Kind of like functions, they return something different based on what you pass it makeFood makeFood This function makes food and shares lots of the same functionality between making a pizza and sandwich If the only thing that differs is the type returned, we can use generics You often see this as a single char T It can be anything Promise is a generic querySelector uses generics 21:48 - Promises / Async + Await Functions now return a Promise type, but with a generic Promise Promise Promise, Request, Request stringified added headers 29:48 - Type assertion (type casting) Type assertion is when you want to tell TypeScript “Hey I know better than you”. Two ways: as keyword (most popular) someValue as HTMLParagraphElement Tagged before someValue 34:14 - TypeScript without TypeScript (JSDoc / TSDoc) Really nice! You can also add comments / descriptions https://github.com/developit/redaxios/blob/master/src/index.js 40:08 - Interfaces vs Types Interfaces have better perf https://twitter.com/wesbos/status/1362418379919937545 https://blog.logrocket.com/types-vs-interfaces-in-typescript/ What do you default to? How we write TypeScript 44:27 - Interface or Types Scott - Types Wes - Interfaces 44:50 - any vs unknown Scott - any Wes - unknown / any 46:52 - Any (No Implicit or Implicit Allowed) Scott - No implicit any Wes - No implicit any 48:31 - Return types (Implicit or Explicit) Scott - Explicit always Wes - Not always 50:49 - Compile (TSC, Strip TS) Scott - Strip Wes - Both 52:38 - Type Assertion (as or ) Scott - as Wes - as 53:09 - Arrays (Dog[] or Array) Scott - Dog[] Wes - Dog[] 54:02 - Assert or Generic (if both work) querySelector(’.thing’) as HTMLVideoElement; or querySelector(’.thing’); Scott - querySelector(’.thing’); Wes - querySelector(’.thing’); Links Syntax 324: TypeScript Fundamentals Syntax 327: Hasty Treat - TypeScript Compilers and Build Tools Axios VS Code Syntax 310: Serverless, Deno and TypeScript with Brian Leroux Cloudinary Notion ××× SIIIIICK ××× PIIIICKS ××× Scott: Powerowl 16 Battery Recharger Wes: Fairywill Pro P11 Shameless Plugs Scott: Level 2 Node Authentication - Sign up for the year and save 25%! Wes: Beginner Javascript - 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(967)

879: Fullstack Cloudflare

879: Fullstack Cloudflare

Wes and CJ break down everything Cloudflare—from Workers and R2 Storage to Hyperdrive and AI Gateway. Get the scoop on what makes Cloudflare tick, the quirks of their ecosystem, and whether vendor lock-in is a real concern. Show Notes 00:00 Welcome to Syntax! 01:40 Brought to you by Sentry.io. 01:58 What we’re talking about today. 02:48 Cloudflare Workers. 03:06 How Cloudflare Workers… work. 04:39 How Cloudflare Workers run. 06:05 Workers size limitations in JavaScript. 07:37 Cloudflare has their own way. 08:13 Potential vendor lock-in. 08:51 You pay based on CPU time, not wall time. 10:26 Cloudflare Pages. Compatibility Matrix 12:07 Durable Objects. Zeb X Post. PartyKit.io, tldraw. 16:41 Cloudflare Workflows. 19:52 How we do something similar on Syntax.fm. 20:52 Cloudflare Queues. 25:26 Files. 26:15 R2 Storage. Ep 780: Cloud Storage: Bandwidth, Storage and BIG ZIPS. 28:00 The Open Bandwidth Alliance. 28:39 Image Pipelines. 33:24 Cloudflare Stream. Streaming Video in 2025. 34:24 Data. 36:37 Key Value. 40:16 Time To Live. 41:13 Hyperdrive. How It Works. Query caching. 44:01 Vectorize Data. 45:41 AI Gateway. 47:49 Automated Rate-Limiting. 48:50 Frameworks. Orange.js. 52:13 Analytics Engine. Counterscale. Ep 761: Cloudflare Analytics Engine, Workers + more with Ben Vinegar. 52:52 WebRTC Engine. 53:01 Puppeteer API. 54:09 Sick Picks + Shameless Plugs. Sick Picks CJ: Flush MicroSD Adapter for Macbook Wes: Synology. Shameless Plugs Wes: 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

24 Helmi 202558min

878: You Are Sleeping On Nuxt, Nitro and Vue w/ Daniel Roe

878: You Are Sleeping On Nuxt, Nitro and Vue w/ Daniel Roe

Wes and Scott talk with Daniel Roe about Nuxt and Nitro, demystifying the UnJS ecosystem, serverless deployments, open-source sustainability, and the future of full-stack web development. Show Notes 00:00 Welcome to Syntax! 02:52 Daniel’s work with Nitro Nitro 06:01 What’s the connection between Nitro and Nuxt? Nuxt 09:23 What makes something an UnJS package? UnJS 12:55 Nitro’s built-in features 18:21 What would Daniel use to build an app today? Cloudflare Vercel Netlify 28:01 Brought to you by Sentry.io 28:36 Nuxt and SST SST 32:25 Nuxt vs. Next.js in 2025 Next.js 40:06 Keeping docs up to date 44:46 Who is behind the fantastic design of the Nuxt website? Anthony Fu Rmoon Vite 47:27 Why is Vue awesome? Vue alien-signals 52:47 How do you make money in full-time open source? 55:32 Sick Picks + Shameless Plugs Sick Picks Daniel: DeskPad Shameless Plugs Daniel: React to Nuxt 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

19 Helmi 202558min

877: Tailwind 4

877: Tailwind 4

Tailwind 4.0 is here, and Scott and Wes break down all the spicy new features, from CSS-powered configs to first-class container queries. Plus, they dig into Tailwind Oxide, @property magic, and whether it’s finally time to stop asking, “Why not just use normal CSS?” Show Notes 00:00 Welcome to Syntax! 00:16 Brought to you by Sentry.io. 01:03 Tailwind 4. Tailwind CSS V4.0 Blog. 02:53 Wes’ favorite new feature. 05:45 @property. CSS Houdini API. 07:28 The config is now a CSS file. 08:25 Tailwind Oxide. 10:48 P3 color space. 12:36 Dynamic Utilities + Variants. 13:36 Data attributes. 15:32 First class container query support. 17:03 Starting Style. 19:22 When to use inline styles. 20:13 Descendant selector. Styling Descendants. 20:48 Why not just use “normal” CSS? 22:03 No text shadow support. Scott has to use Tailwind. 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

17 Helmi 202525min

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 202548min

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 202516min

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 202554min

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 202513min

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 202557min

Suosittua kategoriassa Politiikka ja uutiset

aikalisa
rss-ootsa-kuullut-tasta
ootsa-kuullut-tasta-2
tervo-halme
rss-kuka-mina-olen
et-sa-noin-voi-sanoo-esittaa
politiikan-puskaradio
otetaan-yhdet
rss-vaalirankkurit-podcast
rss-podme-livebox
aihe
rikosmyytit
radio-antro
rss-tasta-on-kyse-ivan-puopolo-verkkouutiset
linda-maria
the-ulkopolitist
eevan-politiikkapodi-totuuksia-suomesta
rss-raha-talous-ja-politiikka