Logo
    Search

    Potluck - Immutability × Turning Off Your Brain × Types vs Interfaces × Hooks vs Components × Making the Most of Your First Job × Confidence in Svelte × More!

    enJune 09, 2021

    Podcast Summary

    • GraphQL allows updating data despite immutability conceptGraphQL uses 'mutations' for updating data without mutating it behind the scenes, and some companies provide solutions for both immutable and mutable data needs.

      While immutability is a valuable concept in programming, not all systems require it exclusively. GraphQL, for instance, uses the term "mutations" for updating, creating, or deleting data, and this does not mean that the data is being mutated behind the scenes. Instead, it's being updated in the database. The front-end world often emphasizes immutability and avoiding side effects, but in reality, there are situations where updating data directly is necessary. Companies like FreshBooks, LogRocket, and Cloudinary, sponsors of this podcast, provide solutions that cater to both immutable and mutable data needs.

    • Maintaining Data ConsistencyTo ensure predictable programming outcomes, avoid mutating data and create new instances instead.

      Consistency in handling data is crucial for predictable outcomes in programming. Absolutes, such as mutating data, can lead to unpredictability and potential issues. The speaker suggests that when working with data, it's essential to maintain a clear understanding of the data's state and avoid mutating objects or arrays. Instead, consider creating new instances of data structures when updating or changing them. Regarding sleep, the speaker shares their personal struggles with keeping their mind focused on coding even during bedtime. They suggest taking a supplement called ZMA, which contains zinc, magnesium, and vitamin B, to help maintain a restful sleep. Additionally, the speaker mentions that they used to fall asleep with the TV on as a child and still find it challenging to sleep without some form of distraction.

    • Effective wind down routines for productivity and mental well-beingPersonal habits like watching documentaries, listening to podcasts, leaving notes, stopping in the middle of a sentence, taking a shower, and jotting down notes can help improve productivity and mental well-being. Attention to microcopy in website development is essential for clear and effective user communication.

      Effective wind down routines are essential for productivity and mental well-being. The speaker shares his personal habits, which include watching documentaries, listening to podcasts, and leaving notes to pick up tasks the next day. He emphasizes the importance of getting out of your head and into your system. Interestingly, authors like Hemingway and Roald Dahl also advocate for stopping in the middle of a sentence or not finishing all ideas while working, allowing the brain to pick up where you left off. The speaker also mentions taking a shower before bed to clear the mind and jotting down notes for future reference. In the context of website development, managing copy and microcopy is crucial for user experience. Microcopy refers to small bits of text that accompany icons or other design elements. The speaker encourages developers to pay attention to these details to ensure clear and effective communication with users.

    • Approaches to Managing Text Content Across a WebsiteConsider components with data attached instead of individual pages, choose the approach that fits project requirements and client's capabilities, weigh pros and cons of each approach.

      When it comes to managing text content across a website, there are different approaches, each with its advantages and disadvantages. The debate revolves around whether to put every piece of text into a Content Management System (CMS) or hardcode it directly into the markup or collect it into an importable JSON file. If you choose the CMS route, it's crucial to consider how to manage all the content in one schema without creating excessive boilerplate. The speakers suggest thinking in terms of components with data attached to them instead of individual pages with numerous fields. Personally, the speakers recommend spending the extra time to make everything editable by the client to avoid potential issues, such as clients not being able to update small text elements. However, there are different levels of implementation, from putting everything in HTML to using a CMS or JSON files. For instance, using JSON files can be beneficial when dealing with call-to-action text used in multiple places on the website or for multilingual translations. Ultimately, the best approach depends on the specific needs of the project and the client's technical abilities. In summary, the key takeaway is that it's essential to weigh the pros and cons of each approach and choose the one that best fits the project's requirements and the client's capabilities.

    • Providing clients with content editing toolsJSON and markdown files offer more control but can be challenging, while CMS platforms provide a user-friendly solution but come with additional costs. A middle ground could be using tools like Tina CMS for front-end editing.

      While providing clients with tools like JSON or markdown files for content editing can offer more control and flexibility, it also comes with potential challenges. JSON formatting can be finicky and prone to errors, and not all clients may be familiar with markdown. CMS platforms can provide a more user-friendly solution for content editing, but there's a trade-off in terms of additional costs and potential dependence on the developer for updates. A middle ground could be using tools like Tina CMS, which offers a front-end UI for editing content directly on the website. Ultimately, it's essential to have a clear understanding of the client's content editing needs and preferences before deciding on the best solution.

    • Integrating user data with CMS: Complexity and expertise matterConsider the project's complexity and your expertise with the CMS's language before deciding between augmenting the CMS or building a custom solution. For simpler applications, APIs and public data submissions can be viable options.

      When it comes to integrating user data with content management systems (CMS) or headless CMSs for applications requiring advanced functionality and dynamic queries, it's essential to consider the complexity of the project and your expertise in the CMS's underlying language. If you find yourself having to extensively augment the CMS, it may not be the best fit, and building the solution from scratch might be a more viable option. However, for simpler applications, exposing APIs and allowing public data submissions can be an acceptable solution. Ultimately, the decision depends on the specific requirements, your proficiency with the CMS, and the time and cost implications. It's a complex conversation without a one-size-fits-all answer. Additionally, separating your application from your marketing CMS can help keep each system clean and focused on its respective purpose.

    • Exploring problem-solving in software developmentEffective problem-solving in software development requires planning, educated guesses, testing, refactoring, and adjusting as new info is revealed. Use comments to outline ideas before writing code, and consider using tools like 1Password and Secret Hub for secure secret management with environmental variables.

      Problem-solving in software development involves a combination of careful planning and educated guesses, as well as a lot of testing, refactoring, and adjusting as new information is revealed. The speaker emphasized that it's not always possible to come up with every solution on the spot and that many times, ideas become clearer once they're put into code. He also suggested using comments to outline ideas before writing code to help validate and organize them. Regarding the use of tools like 1Password and Secret Hub for managing secrets, the speaker expressed excitement about the new partnership between the two services, which allows secrets to be stored and injected into environments using environmental variables. He noted that this approach can be more convenient and secure than using a dotenv file, and also offers additional features like auditing. Overall, the speaker emphasized the importance of experimentation and adjustment in the software development process.

    • 1Password takes over Secret Hub for secure secret management1Password's acquisition of Secret Hub offers a secure alternative to storing secrets in plain text files synced to the cloud, addressing security concerns and offering a dedicated app for managing secrets. However, some free services like Secret Hub can become expensive with added features.

      The Secret Hub, a tool for managing and storing secrets, is now owned by 1Password, a trusted company known for its secure password management services. This is exciting because it means that users can trust 1Password to manage their secrets securely, and the app offers a nice alternative to storing sensitive information in plain text files that get synced to the cloud. During the discussion, it was mentioned that some developers may not like the idea of storing their secrets in a text file that gets synced to the cloud due to security concerns. The Secret Hub aims to address this issue by providing a dedicated app for managing and storing secrets. Additionally, the conversation touched upon the common issue of free services that eventually become expensive as users require more features. The Secret Hub is an example of such a service, offering a free version but then having more expensive tiers for additional features. Furthermore, the discussion included a question about the differences between using a type versus an interface in TypeScript. While interfaces offer more flexibility, types can be used when dealing with nested aliases, as demonstrated in a simple example of a food type and a sandwich type. Lastly, the episode featured a sponsor message for LogRocket, a tool for logging errors and exceptions in web applications, which allows developers to see the errors in a visual, video-like format, making it easier to identify and fix issues.

    • TypeScript Interfaces vs TypesTypeScript interfaces and types have their differences, with interfaces better suited for defining object structures and types for defining data types. However, utility types and aliases must be defined via types, and extending interfaces as sub-properties is not possible.

      When working with TypeScript in interfaces, there are some limitations compared to using types. For instance, if you want to extend a type as a sub property, you cannot do that with interfaces. Similarly, when using utility types or aliases, they must be defined via types and not interfaces. These are just a few exceptions where types might be preferred over interfaces. However, the choice between using types or interfaces in TypeScript ultimately comes down to personal preference and the specific use case. Some developers may prefer the class-based approach in React with TypeScript, while others may prefer function components and hooks. As for generators like Yeoman, they are a tool used for scaffolding and automating the creation of projects, but they were not specifically discussed in the context of the podcast.

    • Yeoman replaced by front-end frameworks and librariesFront-end frameworks and libraries like Create React App, Next.js, Svelte, and Vue now offer built-in scaffolding, reducing the need for Yeoman.

      Yeoman, a popular scaffolding tool from 2011, has been largely replaced by front-end frameworks and all-encompassing UI libraries such as Create React App, Next.js, Svelte, and Vue. These frameworks and libraries provide built-in scaffolding, eliminating the need for a separate tool like Yeoman. The complexity that once required a tool for generating boilerplate has been tucked away within these frameworks and build tools. Additionally, new tools like Google's x, which makes writing scripts easily, could potentially be used for creating custom scaffolding tools or script generators. Overall, the landscape of web development has evolved, and the need for Yeoman has diminished.

    • Choosing the right tool for development tasksGain experience with various tools, learn to adapt, and expand your skillset in web development.

      There are various tools and approaches to solving development problems, and it's essential to choose the one that best fits your needs and preferences. The speaker shared an example of using JavaScript instead of bash scripts for orchestrating tasks, emphasizing the convenience of using familiar dev tools and writing code in a language you're comfortable with. For those starting their careers in web development, the discussion touched on the importance of gaining experience, even if it means working on projects that may not align perfectly with your long-term goals. The speaker advised using such opportunities to learn and build skills that could be applied to future roles. Another topic covered was the use of Content Management Systems (CMS) like WordPress and pre-built themes. The speaker acknowledged the potential limitations of working with such tools but emphasized the value of gaining experience in creating websites, which is a crucial skill for web developers. Additionally, the discussion introduced Cloudinary as a solution for managing and optimizing images, offering features like resizing, compression, and various image transformations. Overall, the conversation highlighted the importance of adapting to different tools and situations while continuing to expand your skillset.

    • Cloudinary add-ons for integration and scriptingCloudinary add-ons enhance functionality with AI background removal, content analysis, and auto taggers. For caching a GraphQL API, rely on libraries like Mercurius, Apollo, React Query, or Oracle for efficient caching solutions.

      Cloudinary offers various add-ons that enable integration with other services and the ability to run scripts. These add-ons include AI background removal, content analysis, and auto taggers, which can be useful for generating alt text and getting screenshots. For caching a GraphQL API, it's recommended to rely on the libraries being used, such as Mercurius for server-side caching and Apollo, React Query, or Oracle for client-side caching. These libraries have built-in caching solutions and can help developers avoid managing the caching aspect themselves. For simple caching needs, storing data in memory can be an effective solution, as long as the data is not critical and does not need to persist beyond the lifetime of the application.

    • Considering Svelte for new projects: Community, resources, and personal preferenceSvelte's growing community, resources, and the speaker's personal preference make it a viable option for new projects. The technology offers productivity and excitement.

      Svelte is a viable option for starting new projects, with a growing community and a number of established organizations using it in production. While there are inherent risks with any technology choice, the community and resources available for Svelte make it a worthwhile consideration for technical leads and teams. The speaker personally prefers Svelte over React and believes that it offers productivity and excitement, making it a great choice for those looking to be happy with their decision for the duration of their project. Additionally, the speaker shared a personal "sick pick" of using deli containers for organizing spices in the kitchen, which has improved their cooking experience. For fitness enthusiasts, the speaker recommended a blender bottle as a cost-effective alternative to the official brand, which often fails to deliver satisfactory results.

    • Investing in a high-quality blender bottle pays offA stainless steel blender bottle is a worthwhile investment for frequent users, especially those who hit the gym daily. Contigo's thermal lock model is recommended for its affordability, ease of cleaning, and non-spill feature.

      Investing in a high-quality, spill-proof blender bottle, preferably made of stainless steel, is a worthwhile investment for those who use them frequently, especially for those who hit the gym daily. The speaker shared her experience of losing a crappy blender bottle and the disgusting state it got in, even after a short period of time. She highly recommends Contigo's thermal lock stainless steel blender bottles, which are affordable, easy to clean, and don't spill. The speaker also mentioned that she has had positive experiences with Contigo's kids' cups and is currently working on a course about SvelteKit, a tech she believes is the future for new projects. Additionally, Level Up Tutorials is currently having a spring sale with 50% off annual subscriptions and a new author form for those interested in writing tutorials for the platform.

    • Learn JavaScript with Pro Subscriptions and Free CoursesUpgrade to Level Up Tutorials Pro for discounted access to a vast library of courses and tools, or explore free JavaScript courses on Wes Bos' website with a discount using the code 'syntax'.

      If you're looking to level up your JavaScript skills, there are great resources available for you. First, consider becoming a pro subscriber at Level Up Tutorials (leveluptutorials.com/pro), where you'll get a lifetime discount of 50% and access to a vast library of new and old courses, as well as additional features and tools. For those who prefer free resources, Wes Bos' website (wesbos.com/courses) offers a variety of free and paid JavaScript courses using popular frameworks like Next.js and Gatsby, with a discount using the code "syntax" for $10 off. Overall, there are numerous opportunities to learn and improve your JavaScript skills through these platforms.

    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

    ShopTalk x Syntax

    ShopTalk x Syntax

    In this episode of Syntax, Scott and Wes do a collaboration with Chis Coyier and Dave Rupert from ShopTalk Show! They talk about favorite tech stacks, podcasting, learning new tech, dealing with FOMO, and more!

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/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.

    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

    07:23 - What’s your favorite stack right now?

    28:52 - What are your thoughts on WordPress? Do you still use it?

    33:59 - What do you want for listeners of Syntax?

    38:21 - How do you deal with FOMO / the pressure to learn new tech?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

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

    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:

    707: What happened in JS, CSS And Web Dev in 2023? 2023 Predictions Results!

    707: What happened in JS, CSS And Web Dev in 2023? 2023 Predictions Results!

    In this episode of Syntax, Wes and Scott review their 2023 predictions and see how they did on ideas like Deno getting hotter, new JS APIs, WASM, Houdini, CSS Container Queries, and more!

    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

    Potluck × Twitter Following × TypeScript × Playwright

    Potluck × Twitter Following × TypeScript × Playwright

    In this potluck episode of Syntax, Wes and Scott answer your questions about strategies to find good Twitter follows, should we use TypeScript for a company blog, what’s Playwright, and more!

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

    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.

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    React + TypeScript

    React + TypeScript

    In this episode of Syntax, Scott and Wes talk about using React with Typescript — how to set it up, components, state, props, passing data, custom hooks, 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.

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    Show Notes

    04:55 - Components

    • Strategies
    • Example:
     type Props = {    value: string; }  const App = (props: Props) => <div />  
    • Return type? JSX.Element
    • FC or FunctionComponent
    • It’s discouraged for this reason: It means that all components accept children, even if they're not supposed to
    • It could be useful for a return type

    12:13 - Props

    • Default props:
     const defaultJoke: JokeProps = {   joke: 'LOL JOE',   id: 'YEAH',   status: 200, };  function JokeItem({ joke = defaultJoke }: JokeProps): JSX.Element {   return (     
  1. {joke.joke} = {joke.id}
  2. ); }
    • Because props are always destructured, you often have to make a new type for your props. You can’t just type each argument by itself.

    18:38 - State

    • Just like Generics, State can be inferred
    • If your type is simple and you’re using useState, it just works:
      const [user, setUser] = useState(null);

    22:27 - useEffect

    • Nothing special required
    • Good use of void: If you want to use a Promise function but not worry about await or .then(), you can pop a void in front of it:
     useEffect(() => { console.log('Mounted'); // getJoke().then(console.log).catch(console.error); void getJoke(); }, [getJoke]);  

    26:09 - Refs

    • Very similar to state however some interesting things with null:
      const ref1 = useRef(null!);
    • “Instantiating the ref with a current value of null but lying to TypeScript that it’s not null.”

    29:33 - Custom Hooks

    • This is a great use case for Tuples

    31:00 - Context

    • This is probably the most complex thing in this list
    • First define the types
    • Use generic to pass in types OR null
    • This can also be non-null if you have default values in createContext:
      const AppCtx = React.createContext(null);

    35:21 - Events

    • The React events system is better than Vanilla JS
    • Can handle them inline and have it inferred: onClick={e ⇒ yeah(e.target)}
     const onSetType = (e: React.ChangeEvent) =>     setType(e.target.value)  
    • React has a bunch of events built in — many of them take a Generic argument so you can specify the type of element that triggered it. Handy for native API methods like play and pause.

    39:27 - ForwardRef

    • Again use of <> to pass in forwarded ref type as param 1, Props types as param 2:
     type Props = { children: React.ReactNode; type: "submit" | "button" }; export type Ref = HTMLButtonElement; export const FancyButton = React.forwardRef((props, ref) => (    ));  

    41:30 - ESLint

    • Typescript-react is good
    • Extend your own
    • Most JS rules apply to TS

    46:20 - React as Global React 17

    • Also add JSX: True to eslint globals for typing things like JSX.Element
    • global.d.ts
     import * as react from "react" import * as react_dom from "react-dom"  declare global {     type React = typeof react     type ReactDOM = typeof react_dom }  

    48:08 - TSConfig

    • jsx: "react"
    • React emit .js files with JSX changed
    • Preserve .jsx file output
    • React-native → .js files with jsx not changed

    53:05 - Frameworks?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!