Logo
    Search

    Supper Club × tRPC With Alex KATT Johansson

    enOctober 21, 2022

    Podcast Summary

    • An alternative to REST and GraphQL for building APIs using functions and TypeScriptDevelopers define functions, tRPC infers API specification, and HTTP GET and POST are used for queries and mutations, simplifying API development and handling client-side caching automatically

      TRPC is an alternative to REST and GraphQL for building APIs. Instead of focusing on endpoints and APIs, developers express their entire back end as functions and use TypeScript to infer the API specification. Queries and mutations are called over HTTP GET and POST, respectively, allowing for easy caching at the HTTP layer. With the React client for tRPC, which is built on top of React Query, client-side caching is handled automatically. Essentially, developers define functions and behind the scenes, these functions make fetch calls. This approach simplifies API development by eliminating the need for schema definitions and generating client-side caches. Companies like Polypane, Fire Hydrant, and Kentico are already using tRPC to build better websites, incident management systems, and headless CMSs.

    • Streamlined Type-Safe APIs with tRPCTRPC allows for end-to-end type safety and auto-completion between client and server in a TypeScript project, eliminating the need for separate GraphQL servers or clients, and improving developer productivity through code navigation and type checking.

      TRPC provides end-to-end type safety and auto-completion between the client and server in a TypeScript project, without the need for a separate GraphQL server or client. The client and server both define their types, and the client imports the server's types, giving it compiled-time information for type checking and code navigation. This setup avoids the need to export runtime types or deal with crossover between client and server environments. TypeScript's powerful type inference system infers the types of variables and functions, allowing for seamless type checking and renaming across the application. Overall, tRPC offers a more streamlined approach to building type-safe APIs, with the added benefit of improved developer productivity through code navigation and type checking.

    • Improve development experience with TypeScript, tRPC, XOD, and PolypaneUsing TypeScript with tools like tRPC and input validation libraries such as XOD, along with Polypane, can streamline development by providing static typing, improved business logic handling, better tooling, and responsive testing.

      Using TypeScript with tools like tRPC and input validation libraries such as XOD can greatly enhance the developer experience by providing static typing, improved business logic handling, and better tooling for testing and debugging. Polypane, a browser with power tools for working on the web, is an excellent companion for this setup. It offers multiple panes for responsive testing, accessibility tools, SEO tools, and web quality checks. Polypane keeps all panes in sync, enabling developers to see the impact of changes across different devices and sizes without repetition. Additionally, Polypane provides access to dev tools and offers a free 14-day trial with a 20% discount using the code "syntax20." While XOD is an excellent input validation library for TypeScript, it's not a requirement for using tRPC, as other libraries like Yap and Deepgram are also compatible. XOD's creator, Colin, was also instrumental in the initial development of tRPC. The combination of TypeScript, tRPC, and XOD, along with tools like Polypane, can lead to a more efficient, effective, and enjoyable development experience.

    • Using XOD for TypeScript-centric schema validationXOD offers optional types by default, making it a powerful and convenient choice for TypeScript developers for schema validation. It keeps everything in one language when working with TypeScript clients.

      XOD is a TypeScript-centric schema validation library that offers optional types by default, making it more aligned with TypeScript's type system. This contrasts with other libraries where you have to explicitly define optional types. XOD's optional types and its growing community make it a powerful and convenient choice for schema validation. The speaker, who has been using it for validation in their back end, appreciates this feature and the fact that it keeps everything in one language when working with TypeScript clients. When it comes to tRPC, it's important to note that it was created after the speaker's extensive experience with GraphQL. While there are similarities in concepts, tRPC is designed specifically for TypeScript, eliminating the need for extra cogeneration steps when working with clients in other languages. Although GraphQL offers more advanced features like a normalized cache, tRPC is simpler and faster, as it doesn't require discussions about API contracts or how data should be structured. However, it's worth mentioning that GraphQL's extensive feature set comes at a cost, requiring a good understanding of how the graph model works.

    • Understanding the differences between GraphQL and tRPCGraphQL and tRPC serve similar purposes but have distinct approaches. GraphQL offers a schema for data relationships and can lead to the 'n+1' problem, while tRPC does not have a schema and requires manual data loading. Both have their advantages and disadvantages, and understanding the differences is crucial for choosing the right tool for your project.

      While both GraphQL and tRPC are used for fetching data from a server to a client, they have distinct approaches and use cases. GraphQL allows for defining a schema to relate data and can lead to the "n+1" problem, where multiple database queries are required to fetch related data. tRPC, on the other hand, does not have any relationship between entities in the back end and requires developers to handle database queries and data loading themselves. The lack of a schema system in tRPC can be an advantage for smaller teams or projects where full-stack development is desired, but it also introduces an area of potential issues that need to be handled manually. It's essential to understand the differences and choose the right tool based on the specific needs and constraints of your project. Additionally, implementing proper authorization and authentication is crucial for securing your GraphQL or tRPC API. Furthermore, the discussion touched upon Fire Hydrant, an incident management platform that simplifies the process of resolving incidents, communicating with stakeholders, and learning from incidents. It offers out-of-the-box automations, a service catalog, and retrospectives, making it an invaluable tool for engineering teams looking to improve their incident response and post-incident analysis processes.

    • Modern API framework with typed APIs for client and server communicationTRPC is a modern framework that provides typed APIs for both client and server communication, enabling automatic batching and eliminating manual query synchronization. It's framework-agnostic and comes with specialized adapters for React, Next.js, and other popular frameworks.

      TRPC is a modern API framework that provides typed APIs for both client and server communication. It allows for automatic batching of requests, eliminating the need for manual synchronization of query names. tRPC is framework-agnostic and can be used with various environments like Deno, Bun, and Node.js. It comes with specialized adapters for React and Next.js, offering features like automatic server-side rendering and server-side props helpers. The community also supports adapters for other frameworks like Vue, Nuxt, and Svelte. As the creator of this framework, it's a rewarding experience to see people adopt and contribute to the project, creating new community-driven adapters.

    • Community support drives the success of tRPCThe project tRPC, which combines TypeScript and GraphQL benefits without complexities, has seen significant growth through word-of-mouth and community contributions, with 90,000 weekly downloads on NPM and increasing GitHub stars.

      The organic growth and support from the community have been key factors in the success of the project, tRPC. The creator was surprised and grateful for the intricate contributions from individuals he had never interacted with before. The project, which offers benefits of both TypeScript and GraphQL without their extra complexities, has seen significant growth through word-of-mouth. With approximately 90,000 weekly downloads on NPM and a continuously increasing number of GitHub stars, the project has gained traction in the community. Content by Kentico, a sponsor of this episode, was also discussed as a headless CMS with a user-friendly content calendar and interface, making it an effective tool for managing and organizing content.

    • Content.ai's advanced features and extended trial offerContent.ai provides a headless CMS solution with advanced features including real human support, automatic redirects, team-based tasks and to-dos, live editing, and support for both REST and GraphQL APIs. They are currently offering an extended 3-month trial instead of the usual 1-month trial.

      Content.ai offers a headless CMS solution with advanced features such as real human support for technical issues, automatic redirects, team-based tasks and to-dos, live editing, and support for both REST and GraphQL APIs. The user interface and tools are next level, and Content.ai is currently offering an extended 3-month trial instead of the usual 1-month trial. In the future, tRPC, a project sponsored by Content.ai, plans to release version 10 with improved developer experience and TypeScript performance, and explore the possibility of binary transports as an alternative to JSON for situations where it becomes too bloated. TypeScript, which Content.ai heavily relies on, can be challenging to work with due to its heavy reliance on inference, a feature that makes the language so powerful but can impact performance. To improve the performance of tRPC, the team had to reconsider their approach and find ways to optimize the codebase. TypeScript crashes and the need for frequent restarts can be frustrating, but the benefits of using inference make it a more than worthwhile investment. Content.ai's commitment to providing a superior user experience and advanced features sets it apart from other CMS solutions.

    • Combining trial and error and performance tracing tools for optimal TypeScript backend performanceTypeScript's nonlinear complexity in handling procedures and routers can slow down large backend projects, but tRPC's logic and JavaScript foundation can scale infinitely. Use trial and error and performance tracing tools for best results, while enjoying custom error codes and client-side error handling.

      TypeScript's nonlinear complexity in handling procedures and routers can lead to slow feedback in large backend projects. The best solution, according to the speaker, is a combination of trial and error and using performance tracing tools. However, the logic and JavaScript underlying tRPC can scale infinitely, making it a powerful choice. tRPC also borrows concepts from GraphQL, such as custom error codes that map to proper HTTP error codes, allowing for full control and browser standards. The ability to throw and handle tRPC errors with custom shapes in the client is a standout feature. The speaker's inspiration for building tRPC was a combination of necessity and borrowing ideas, with a focus on creating a tool that offers the best of both worlds in terms of control and standards. If you're looking to pick up tRPC, the speaker encourages checking out the documentation.

    • Exploring the Best of Both Worlds with tRPCThe speaker is updating his codebase with tRPC to leverage modern APIs and front-end experiences while maintaining the simplicity and productivity of PHP and the LAMP stack.

      The speaker values the simplicity and productivity of working with PHP and the LAMP stack, but recognizes the importance of modern APIs and front-end experiences. He is currently making changes to his codebase to combine the best of both worlds using tRPC, which not only handles type safety between the front and back end but also offers a flexible middleware structure for creating complex back ends in a declarative way. The speaker also mentioned that tRPC is more than just a way to infer types between the front and back end and that its advanced middleware structure is worth exploring. In terms of personal preferences, the speaker uses an M1 Air laptop and is considering getting a split ergonomic keyboard for better posture. He uses the standard dark font and theme in Visual Studio Code and has never been particularly interested in customizing his text editor settings.

    • Exploring coding tools: A personal journeyStart small with a passion project, find what works best for you, and stay updated through platforms like Twitter. Enjoy the process and don't get too fixated on specific tools or technologies.

      Finding the right tools and environment for coding can be a personal journey, and starting small with a passion project is more important than getting bogged down in the latest trends or tech stacks. The speaker shared his experiences of starting out in coding through IRC rooms and using various tools, and emphasized the importance of finding what works best for an individual. He also mentioned staying updated through platforms like Twitter and being excited about the potential of WebAssembly (WASM) in the future of web development. The speaker didn't have a specific "sick pick" to share, but encouraged exploring different options and finding what fits best. The key is to enjoy the process and not get too fixated on specific tools or technologies.

    • Discovering TypeSafe SQL Query Building with Case CelieLearn about Case Celie, a TypeScript-friendly SQL query builder, and how it offers type safety without much additional work. Also, follow @alex.js for updates on new tools and technologies.

      Alex was discussing the use of Case Celie, a TypeScript-friendly SQL query builder inspired by KneX, which offers type safety without much additional work. This was a new discovery for him and he was excited to share it with the audience. He also mentioned his Twitter handle, @alex.js, and shared a personal anecdote about how he strives to secure short and desirable usernames in various online communities. The conversation also touched upon TRPC, a new technology that Alex believes will open many people's eyes and provide a better understanding of its implementation. Overall, the discussion provided valuable insights into new tools and technologies that can enhance productivity and development experience for developers.

    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

    TypeScript Fundamentals

    TypeScript Fundamentals

    In this episode of Syntax, Scott and Wes talk about TypeScript fundamentals — what it is, how you use it, why people love it so much, and more!

    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.

    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.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Show Notes

    What is TypeScript?

    03:12 - Types?

    • What are types and why should you care?
    • JS is a typed language, it’s just not strongly typed
      • JS does not care about reassignment of a variable to a new type
      • Does not care about your types, but they do exist

    06:34 - The Fundamentals

    • You write your JavaScript code, but each time you create a variable, function, parameter, you “type it” — which means you describe what that data will look like.
      • Create a variable: Will it be a string? A number? A custom type of show?
      • Create a function: What params does it take? What type are they? What does it return?
    • Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed.
      • This can allow you to prevent shipping code that has these errors by checking your code.
      • Some of the biggest benefits here come via errors in your text editor

    13:30 - Explaining the types

    • You can create your own types
    • Strings
    • Numbers
      • We only have numbers in TS, no floats/ints
      • We do have BigInt though, but not something most people will use
    • Arrays
      • Will be a list of another type
    • Unions
      • This type will be one of the possible options
      • String of DRAFT PUBLISHED or ARCHIVED
    • Intersections
      • An intersection type combines multiple types into one
    • Objects
      • These are custom types where each property is its own type
    • Any
      • Explicit any
      • Implicit any
    • Language types
      • These things are technically just Objects, but they have their own types
      • Dates
      • Timeouts
      • DOM Elements / Nodes
    • Void
      • When a function returns nothing — usually used with side effects like click handlers
    • Enum
      • A set of named constants
        • Used when you have a select amount of values — I like to think of these as the select lists of TS
        • String unions are also used for this same thing

    30:28 - Inference

    • Automatic detection of types
    • Typescript will try to infer your types based on their definition
    • Not every type can be inferred, leading to implicit anys and the need for explicit types

    33:25 - Getting types

    • Most popular packages already have types — you install them like npm i @types/whatever
    • If a package doesn’t have types, you have to create them yourself, which can be annoying
      • MakeTypes
      • Console log a JSON.stringify(obj), and pipe it in
    • Node has types
    • Vanilla JS has types, for the language and all of the DOM - HTMLInputElement
    • React has types
    • Typing Node modules that don’t have types

    Overall benefits

    40:39 - Type hinting

    • With TS and your editor (VSCode) you’ll get more information about your code as you type it — allowing you to know exactly what things expect
      • This seems like a small deal but in practice leads to being much more efficient

    42:50 - Refactoring

    • Rename a function, type, or variable and it will be updated everywhere in the project!
    • Moving a function to a new file is actually part of TypeScript
    • Drag + Drop file, update imports

    48:10 - Compiling

    • TSC vs Babel / Esbuild
    • Only TSC type checks
    • Compiling TS with babel will not allow you to break the build on type errors, you’ll need to run TSC in coordination or in the CI/CD

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: ESM & Snowpack - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

    Tweet us your tasty treats!

    GraphQL? Here is what you need to know!

    GraphQL? Here is what you need to know!

    Snipcart — Sponsor

    Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free!

    Freshbooks — Sponsor

    If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.

    { show(id: 027) { notes }}

    02:40

    • What is GraphQL anyways?
    • GraphQL Relational Data

    04:45

    • How is it different than REST?

    08:30

    • GraphQL's self documenting Nature

    09:20

    • You don't need to replace your existing REST api
    • It can sit infront of multiple APIs

    10:00

    11:50

    13:30

    • Why we like Apollo
    • Setup is amazingly fast

    15:00

    • Pagination
    • Refreshing of data

    18:00

    • The GraphQL Core Concepts
    • Queries
    • Mutations
    • Filtering and Sorting
    • It's not really a query language

    21:00

    • How do you say Schema?

    22:00

    • More on Resolvers

    22:50

    • Mutations
    • Updating the cache

    27:00

    • Using with existing APIs
    • Do you have two schemas now? One for MongoDB and one for GraphQL?

    35:00

    45:00

    53:00

    • Apollo Link
    • Apollo VS Redux

    56:00

    • Graphiql

    SIIIIICK PICKS

    Shameless Plugs

    Tweet us your tasty treats!

    Using GraphQL queries in Remix loader functions

    Using GraphQL queries in Remix loader functions

    Hey Kent! We've been using Hasura to generate CRUD APIs for our small team. Our existing web applications are all using Next.js, and consume the GraphQL API via Apollo Client and TypeScript hooks generated from the remote schema using graphql-code-generator. This workflow has saved us a lot of time, particularly in API development, and I love the generated type-safe hooks. After watching your new Remix content, we're very excited to try Remix as an alternative to Next, mostly to leverage the performance benefits and the effortless error boundaries within nested routes. Do you have some best practices for utilizing GraphQL queries in Remix loader functions? It would be great for us to continue to take advantage of code generation, if possible. Thank you so much!

    Links:

    Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More!

    Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More!

    It’s another potluck! In this episode, Scott and Wes answer your questions about VSCode, Vercel vs Netlify, staying up to date with dev concepts, models and mutations, websites vs seb apps, adaptive vs responsive design, and more!

    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.

    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.

    Vonage - Sponsor

    Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.

    Show Notes

    02:10 - Sometimes in VSCode when intellisense tells us the TypeScript type of a variable, it just gives the name of the type rather than how the type is defined. This is annoying for objects as I want to know what fields it contains! How do you handle this? Is there some VSCode magic to make it show the full type definition or is there some way to bring up the definition in the .d.ts file?

    04:55 - What techniques do you guys use to keep different tech stack requirements fresh between projects?

    10:35 - How do you feel about Vercel vs. Netlify? Pros/cons? Thanks!

    18:32 - Should a model name be singular or plural?

    22:57 - I’ve just listened to the CSS Typography and Systems Hasty Treat, and realized that we often try to apply website design to web apps (me at least). Can you elaborate on the differences in designing for a website and for a web app?

    25:46 - What’s the difference between adaptive and responsive design?

    32:40 - Multi-vendor platforms? Have you done it before? A partner and I, are planning to build a peer-2-peer platform (similar to Etsy and Amazon, where users can register as a merchant or a buyer). What is the easiest way to make payment transactions (Stripe or PayPal)? Do you know any frameworks that will make my life easier?

    36:16 - Is there a golden rule for mutations? I’ve been using GraphQL for last couple of months, and everything is great as long as I’m just fetching data. When I need to write mutations, the story gets murky. Looking around internet, there are not too many best practices to be found - most of the articles and blogs focus on data fetching.

    42:19 - What do you think about the future of Svelte? I know they are replacing Sapper with SvelteKit, which uses Snowpack. What direction do you think Svelte will go in?

    45:32 - How can I get back into a habit of learning new things and stop heavily relying on video tutorials all the time? I really struggle to sit down and read for long periods of time. Also have you guys came across the Genesis framework, and if so, could you recommend any learning material? Thanks.

    48:54 - My team uses handlebars templates for generating newsletters. The content is coming from a CMS for generating final HTML. I’m fairly new to handlebars and mustache syntax, so instead of learning handlebars I’m thinking about using React to generate the html on server side. I see some great potential here as the entire team is well-versed with React. What is your opinion about this?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!