Logo
    Search

    Podcast Summary

    • Understanding TypeScript Utility TypesTypeScript utility types are predefined types that simplify common patterns, make code more readable, and help catch errors early.

      TypeScript utility types are a useful addition to the TypeScript language, providing developers with a way to write more expressive, type-safe code. In the Syntax podcast episode, Wes, Barracuda, Boss, and Scott, El Toroloco, discussed the concept of utility types and why they exist. They explained that utility types are a set of predefined types that can be used to write more concise and expressive TypeScript code. These types can help simplify common patterns, such as mapping types or extracting types from existing ones. The hosts also mentioned that utility types can make code more readable and easier to understand, as they provide clear names for common patterns. They also discussed how utility types can help catch errors early, as the compiler can check the types at compile-time. The episode also featured sponsor mentions for Linode, a cloud hosting provider, and LogRocket, a logging and error tracking tool. Linode was praised for its ease of use, clear setup, and award-winning 24/7 support, while LogRocket was highlighted for its visual approach to logging and its ability to provide a scrubbable video replay of errors as they occur. Overall, the episode provided a clear and concise explanation of TypeScript utility types and their benefits, making it a valuable resource for developers looking to write more efficient and type-safe code.

    • Exploring TypeScript's capabilities beyond just adding typesTypeScript offers different levels of usage, from basic typing to creating custom utility types, making the code more dynamic and efficient.

      TypeScript is a versatile programming language used beyond just adding types to JavaScript. It offers different levels of usage for developers. At the basic level, TypeScript is used to type all code with interfaces, types, and return types. The second level involves using utility types to make the code more dynamic and avoid repetition. At the third level, developers can create their own utility types using advanced TypeScript features, which is primarily used by library authors. TypeScript is not just JavaScript with types added; it's a separate language with its own capabilities. The Type Challenges GitHub repo showcases the power of creating custom utility types, although the code can be quite complex and terse. While it may seem unnecessary to use TypeScript for these challenges instead of JavaScript, the resulting code is more concise and efficient. The challenges serve as a fun and educational way to explore the depths of TypeScript and expand your programming skills.

    • Exploring TypeScript's Utility Types: partial, read-only, and requiredTypeScript's utility types, including partial, read-only, and required, help write more flexible and efficient code by reducing repetition and rigidity.

      TypeScript's utility types offer a way to write more flexible and efficient code by reducing repetition and rigidity. Let's explore three of these utility types: partial, read-only, and required. First, the partial type allows you to create a new type based on an existing one, but only requiring some of the original type's properties. This is particularly useful when updating parts of complex types, as you don't need to provide all the original properties to the function. Next, the read-only type ensures that a property cannot be modified once it's been defined. While JavaScript has const for this purpose, TypeScript's read-only type provides stricter enforcement, preventing accidental modifications. Lastly, the required type makes all properties of a type required. This can be helpful when sending data to a database, as it ensures that all necessary fields are included. These are just a few of the many utility types available in TypeScript. By utilizing these and other utility types, you can write cleaner, more efficient code, and reduce the need for repetition and unnecessary rigidity. For a more comprehensive list, be sure to check out the TypeScript documentation.

    • TypeScript Utility Types: Omit, Pick, and Return TypeUse 'omit' to exclude properties, 'pick' to select properties, and 'return type' to get function return types in TypeScript

      TypeScript provides several utility types to help define and manipulate types. These utility types include "omit," "pick," and "return type." "Omit" is useful when you want to create a new type that excludes certain properties from an existing type. For instance, if you have a product type with fields like name, description, price, tags, and ID, and you want to create a new type for creating a product without the ID field, you can use the "omit" utility type. "Pick," on the other hand, is used to create a new type by selecting specific properties from an existing interface. For example, if you have an interface called "ToDo" with properties like title, description, and completed, and you want to create a new type called "ToDoPreview" that only includes the title and completed properties, you can use the "pick" utility type. Lastly, the "return type" utility type allows you to get the type of the value returned by a function. This can be helpful when you want to know the type of the value that a function is expected to return without having to manually define the return type. These utility types can be particularly useful in complex projects, such as those involving GraphQL, where they are used extensively to create and manipulate types. Understanding these utility types can help make your TypeScript code more efficient and effective.

    • TypeScript Utility Types: Enhance your code with dynamic type generationTypeScript utility types enable efficient and effective handling of complex types through functions that generate and manipulate types based on existing data or function returns.

      TypeScript utility types are powerful tools for generating and manipulating complex types in your codebase. These functions allow you to create types based on existing data or the return value of a function, making your code more dynamic and adaptable. For instance, you might encounter situations where you need to modify the case of a type or generate a new type based on an array of strings. TypeScript utility types provide solutions for these scenarios, enabling you to work with types more efficiently and effectively. Although not every developer will use these utility types daily, they become indispensable when dealing with complex types. Understanding these functions may initially be challenging, but once you've gained experience using them, you'll find they significantly enhance your TypeScript development experience. For example, you might have a function called 'makePizza' that returns an object with a name and toppings. Since the type is inferred from the data being returned, you can use the 'ReturnType' utility type to generate a new type based on the function's return value. This way, you can work with complex types more intuitively and avoid rewriting them manually. In summary, TypeScript utility types offer a valuable set of tools for generating and manipulating complex types in your codebase. While not every developer may use them daily, they become essential when dealing with intricate type systems, making your code more dynamic and adaptable.

    • Stay engaged with resonating contentImmerse yourself in new ideas, continuously learn, and never stop asking questions to grow personally and professionally.

      Importance of staying engaged with the content that resonates with you. Whether it's a podcast, a book, or a blog, immersing yourself in it can lead to new insights and perspectives. And don't forget to share the love by subscribing and leaving a review if you enjoy the show. It helps spread the word and support the creators. Additionally, the discussion touched upon the value of continuous learning and the role it plays in personal growth and professional development. So, keep exploring new ideas, stay curious, and never stop asking questions.

    Recent Episodes from Syntax - Tasty Web Development Treats

    790: State of JS 2023 Reactions

    790: State of JS 2023 Reactions

    Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year!

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    789: Do More With AI - LLMs With Big Token Counts

    789: Do More With AI - LLMs With Big Token Counts

    Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 Who is Paul Copplestone?
    • 01:17 Why ‘Supa’ and not ‘Super’?
    • 02:26 How did Supabase start?
    • 08:42 Simplicity in design.
    • 10:32 How do you take Supabase one step beyond the competition?
    • 12:35 How do you decide which libraries are officially supported vs community maintained?
      • 15:17 You don’t need a client library!
    • 16:48 Edge functions for server-side functionality.
    • 18:51 The genesis of pgvector.
    • 20:59 The product strategy.
    • 22:25 What’s the story behind Supabase’s awesome docs?
    • 25:26 The tech behind Supabase.
    • 35:46 How do you balance business goals with open source?
    • 42:01 What’s next for Supabase?
    • 44:15 Supabase’s GA + new features.
    • 48:24 Who runs the X account?
    • 50:39 Sick Picks + Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    787: You Should Try Vue.js

    787: You Should Try Vue.js

    Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

    Show Notes

    Vue.js: The Documentary.

    Sick Picks

    Shameless Plugs

    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

    786: What Open Source license should you use?

    786: What Open Source license should you use?

    Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.

    Show Notes

    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

    785: What’s Next for NextJS with Tim Neutkens

    785: What’s Next for NextJS with Tim Neutkens

    Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 What does the React Compiler do?
    • 05:04 Will React Compiler help with managing Context?
    • 06:39 What happens if you’re not using a React Compiler?
    • 09:30 Will this work on any NextJS version?
    • 12:18 What are React Server Components?
    • 16:28 Shipping all the data inside an encapsulated component.
    • 20:17 Clearing up the frustrations around retrofitting server components.
    • 23:13 Handing migration.
    • 28:30 Is this just a fetch request with props?
    • 36:41 How closely are the NextJS and React teams working?
    • 41:53 Will we ever get Async Client Components?
    • 43:52 Async Local Storage API.
    • 45:31 Turbopack.
    • 57:51 Sick Picks & Shameless Plugs.

    Sick Picks

    Shameless Plugs

    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

    784: Logging × Blogging × Testing × Freelancing

    784: Logging × Blogging × Testing × Freelancing

    In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

    Show Notes

    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

    782: The Developer’s Guide To Fonts with Stephen Nixon

    782: The Developer’s Guide To Fonts with Stephen Nixon

    Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.

    Show Notes

    Sick Picks

    Shameless Plugs

    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

    Related Episodes

    Our Code Styles

    Our Code Styles

    In this episode of Syntax, Wes and Scott talk about their coding styles - functional vs object oriented, interfaces vs types, tabs vs spaces, should comments exist? And a whole lot more.

    Freshbooks - Sponsor

    Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Sanity - Sponsor

    Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Quick Update: Jake Likes React

    Quick Update: Jake Likes React

    Dude, check it out! In this totally rad podcast sesh, you got Seth Whiting, this mega experienced coder with like a decade of tech wizardry, and then there's Jake Pacheco, this chill barber turned code surfer riding the learning waves for 13 weeks. They're diving deep into React, man. Jake's stoked on how React vibes with him, especially after he got the lowdown on JavaScript, HTML, and CSS. He's all about Code Academy's React course, diggin' the hands-on code action over those vid tutorials. He's cruising through concepts like conditional rendering and mapping, and it's all starting to fit in the big picture, ya know?

    The hosts are all about teamwork in the coding lineup. They're sharing tales of hooking up with Chelsea, this other coder shredding through JavaScript. They're high-fiving over helping each other carve through coding challenges. And they're laying it down that grasping the core logic of coding concepts is key to riding the gnarly learning curve. They're throwing in some tips for checking out documentation, suggesting newbie-friendly stops like W3Schools.

    And hey, they're not just riding the wave, they're shaping it too! Seth and Jake are spilling the beans on crafting clean, efficient code. They're droppin' knowledge on the art of efficient code reviews, bro. They're tossing around the idea of "modular code," think of it like building legit components that work together like a killer squad. They're all about nailing that efficient vibe while being cool with different coding styles.

    Wrapping it up, these dudes are pumped about their coding journey, ready to catch more React barrels and ride the coding currents. They're vibing on the energy of their listeners and even throwin' the idea of future collabs into the mix. Seth's leaving you with some stoked words, saying as your coding mojo grows, those initial bumps turn into a seriously tubular coding ride. Keep it cruisin', bro!

    Special thanks to Diarrhea Planet for our intro and outro music and @SkratchTopo for our artwork.

    Functional Reactive Programming - Elm and ReactJS

    Functional Reactive Programming - Elm and ReactJS

    Each episode we’ll focus on one idea from computer science and try to understand how it fits into our world as professional programmers.

    In this episode we discuss functional reactive programming as represented by the Elm language, and how it’s influencing web development through the recent popularity of ReactJS

    Links:

    Episode 3: Alex Koutmos and Observability

    Episode 3: Alex Koutmos and Observability
    In this episode of Beam Radio, Alex Koutmos takes the hot seat as the panel learns about Alex's programming roots, his personal Elixir journey, and what excites him about programming on the Beam. Alex then goes on to discuss the importance of application observability and how the Beam (and specifically the projects in the Beam-Telemetry GitHub organization) allow you to easily achieve application observability. He then goes on to dive into his PromEx project which aims to bring effortless Prometheus and Grafana monitoring to Elixir applications. Alex is currently a Senior Engineer at Boulevard, the author of the Elixir Twitter Tip Series, a frequent blogger at akoutmos.com and the author of the PromEx and Doctor libraries (as well as a few others). Elixir in Action (https://www.manning.com/books/elixir-in-action-second-edition) Learn You Some Erlang (https://learnyousomeerlang.com) Learn you some Erlang “Onion Theory Platform” (https://learnyousomeerlang.com/building-applications-with-otp) Programming Elixir 1.6 (https://pragprog.com/titles/elixir16/programming-elixir-1-6/) Elixir in Action, 2nd edition (https://www.manning.com/books/elixir-in-action-second-edition) Telemetry (https://hexdocs.pm/phoenix/telemetry.html) Keynote: Telemetry and LiveDashboard - Sophie DeBenedetto | ElixirConf EU Virtual 2020 (https://www.youtube.com/watch?v=v9LV0hvPmUQ) Chris Keathley - Telemetry Conventions (https://keathley.io/blog/telemetry-conventions.html) Alex’s talk on PromEx (https://www.youtube.com/watch?v=ikIdh_UTkLM) Bruce Tate: Julia multiple dispatch talk (https://www.youtube.com/watch?v=kc9HwsxE1OY) We want to connect with you! Twitter: @BeamRadio1 Send us your questions via Twitter @BeamRadio1 #ProcessMailbox Keep up to date with our hosts on Twitter @StevenNunez @akoutmos @knewter @lawik @RedRapids @smdebenedetto Sponsored by @GroxioLearning