Logo
    Search

    Podcast Summary

    • Effective Problem-Solving in Web Development: The Power of Tools and KnowledgeFamiliarize yourself with various debugging tools, inspect elements, and use the network tab effectively to gather accurate information and diagnose issues efficiently.

      Effective problem-solving in web development relies heavily on gathering accurate information. Scott and Wes emphasized the importance of using the right tools for the job and having a good understanding of what each tool can provide. They discussed how inspecting elements and using the network tab are essential for debugging issues. However, they also noted that many developers don't fully utilize the tools at their disposal, leading to potential inefficiencies or incorrect diagnoses. To become a better problem solver, they recommended familiarizing yourself with various tools and understanding their strengths and limitations. They also mentioned that debugging and problem-solving are crucial skills for developers, and they encouraged listeners to share their own tips and experiences on Twitter. In summary, the key to effective problem-solving is being well-equipped with the right tools and knowledge to gather accurate information and diagnose issues efficiently.

    • Identifying the root cause of website performance issuesEffectively address website performance problems by investigating their source, whether it's the database, PHP scripts, time to first byte, server response, or client-side interactions.

      When it comes to optimizing website performance, it's crucial to identify the root cause of the issue. A website being slow can stem from various aspects, such as the database, PHP scripts, time to first byte, server response, or client-side interactions. By knowing where to look and understanding the tools at your disposal, you can effectively address each problem and improve overall website performance. This skill develops over time and can save you from making hasty decisions that may not yield the desired results. For instance, adding more plugins or installing tools to make a site faster without knowing the underlying issue could worsen the situation. Instead, take the time to investigate and follow the "treasure map" to the source of the problem. This approach not only leads to more efficient solutions but also empowers you to become a more proficient developer.

    • Effectively solving complex problemsIdentify end goal, ask right questions, consider underlying principles, gain experience to recognize similar problems, and focus on solutions.

      The ability to identify and solve complex problems efficiently is a crucial skill for developers. This involves asking the right questions to narrow down the issue and drawing on past experiences to recognize and address similar problems. It's important to remember that the root cause of a problem may not always be immediately apparent, and it's essential to keep a broad perspective and consider the end goal. For instance, in programming, it's often not the specific technology that's causing the issue, but rather a more fundamental concept. By focusing on the end goal and gaining a deeper understanding of the underlying principles, developers can more effectively tackle challenges and find solutions. Additionally, experience plays a significant role in problem-solving, as it provides a wealth of knowledge and wisdom that comes from encountering various situations over time. Ultimately, being able to identify and address complex problems is an essential skill for developers, and it's one that can be honed through practice and exposure.

    • Isolate, read, and comment for better understandingTo effectively solve coding issues, isolate problems, read code line by line, and add clear comments for better comprehension and efficiency.

      Understanding the role and function of ingredients or components in a recipe or code can help you effectively problem-solve and substitute when necessary. When dealing with a coding issue, it's essential to isolate the problem, read the code line by line, and add clear comments to enhance comprehension. Despite some developers believing that good code should comment itself, the reality is that clear and concise comments make the code easier to understand and maintain. By translating the code into English through comments, you save time and mental energy, ultimately making the development process more efficient.

    • Streamline development with NetlifyUse Netlify for hosting and simplifying development processes with continuous integration, HTTPS, and handling server-side functions and large media files. Isolate complex issues by creating reduced test cases on platforms like CodePen.

      When it comes to saving time and simplifying development processes, using a hosting platform like Netlify can be a game-changer. Netlify, available at netlify.com, is a service that both hosts and simplifies the development process for projects, particularly those built with Gatsby. With just a few clicks, you can have continuous integration, HTTPS, and other excellent features set up for free. The magic of Netlify lies in its ability to handle server-side functions and large media files, making it a worthwhile investment even when you reach the paid limits. Another valuable piece of advice for developers is to break down complex problems into smaller parts and simplify them. An example of this would be if you're experiencing issues with CSS and your layout is broken. Instead of trying to figure out the problem in the context of your entire project, create a reduced test case on a platform like CodePen to isolate the issue. This technique of isolation is crucial for understanding the root cause of a problem and can save you significant time and frustration in the long run.

    • Isolate the problem before solving itTo efficiently tackle complex development issues, isolate the problem by creating a reduced test case or testing in a clean environment.

      When encountering a complex problem in development, it's crucial to isolate the issue before attempting to solve it. Wes explained this through an example of someone having trouble using SVG clip path in React. By creating a reduced test case in vanilla JavaScript, they determined that the problem was with React itself. Another approach is testing the issue in a clean environment to see if it exists outside of the framework or application. Isolating the problem can be time-consuming, but it saves time in the long run by preventing unnecessary efforts in the wrong direction. Remember, if you're shooting in the dark, you're not making progress.

    • Approaching problem-solving efficiently in web developmentIdentify issues from different perspectives, assess root cause, stay calm under pressure, and try unconventional methods to effectively solve web development problems

      Problem-solving is a crucial skill for web developers. It's important to be able to identify and tackle issues effectively, as these tasks are not easily automatable. To approach problem-solving efficiently, try looking at the issue from different perspectives, or "zoom levels." This means checking the problem in various environments and considering its root cause. Additionally, staying calm under pressure is essential, especially in high-stakes situations. The next time you encounter a problem, remember to take a step back, assess the situation, and approach it with a clear mind. Finally, don't be afraid to try unconventional methods, like standing on your head, to gain a new perspective. By following these steps, you'll be better equipped to handle the challenges that come your way as a web developer.

    • Take a break and clear your mindWhen faced with pressure or complex problems, take a break, clear your mind, and approach the situation calmly to find effective solutions.

      When faced with pressure or complex problems, it's essential to take a step back and approach the situation calmly. This can involve taking a short break, going for a walk, or talking it over with others. The mind can become clouded when we're scared, nervous, or excited, making it harder to correctly solve the problem. Simple actions like deep breathing or restarting a computer can help clear the mind and provide a fresh perspective. Additionally, discussing the problem with others can lead to new insights and potential solutions. If you find yourself stuck on a problem and can't find any relevant resources, it might be an indication that you're thinking about the problem in the wrong way. In such cases, it's helpful to reevaluate your goals and look for commonly used patterns or techniques to achieve them. Another effective strategy is to make the problem as obvious as possible by using visual cues or debugging tools. By taking a calm and methodical approach, you'll be better equipped to tackle complex problems and find effective solutions.

    • Effective Debugging: A Combination of Tools and MindsetUse debuggers and console logs to understand code flow and identify issues. Label console logs for clarity. Utilize version control for tracking changes and reverting. Stay open-minded to different solutions.

      Effective debugging involves a combination of using tools like debuggers and console logs, as well as a problem-solving mindset. The speaker emphasizes the importance of being able to step through code line by line with a debugger to understand the flow and identify issues. However, console logs can also be useful for quick checks and understanding the state of variables. It's important to label console logs to avoid confusion. The speaker also mentions the importance of version control, such as Git, for keeping track of code changes and being able to revert if necessary. Lastly, the speaker shares a quote from a tweet by Bolandev, emphasizing the importance of problem solvers being open-minded and willing to consider different solutions, even if they initially thought they had the answer. Effective debugging requires a combination of technical skills and a problem-solving mindset.

    • Understanding problems before solving themDeeply understanding problems leads to effective solutions in programming and life. React developers carefully consider dev issues and create thoughtful solutions like Suspense, Redux, and Hooks.

      Effective problem-solving in programming, as well as in life, involves taking the time to fully understand the problem before jumping to solutions. The speaker highlights the example of developers at React, who carefully consider the problems developers face and come up with thoughtful solutions like React Suspense, Redux, and React Hooks. This approach requires a deep understanding of the underlying issues and the context in which they arise. The speaker also shares personal anecdotes, such as the loose gas cap causing a check engine light or a furnace repair, to emphasize the importance of checking the simplest things first. In programming, this might mean double-checking syntax, ensuring proper imports, or even stepping away from the problem for a while before returning with fresh eyes. The ability to deeply understand problems and come up with well-considered solutions is a valuable skill that can lead to significant improvements in both code and developer experience.

    • Identifying and solving issues in home ownership and software developmentPersistently troubleshooting and solving problems one by one, recognizing patterns to prevent future issues, and utilizing resources like Google and the Internet are essential skills for both homeowners and software developers.

      Troubleshooting skills are essential in various aspects of life, including home ownership and software development. The speaker shared his experience with identifying and solving issues in his old, drafty house using a thermal draft detector. He emphasized the importance of persistent troubleshooting and solving problems one by one. The speaker also highlighted the value of pattern recognition in identifying and preventing future issues. Furthermore, the use of resources like Google and the Internet for problem-solving was emphasized as an essential skill for developers. The introduction of Prismic, a headless CMS, was presented as a solution for creating and managing content, with a user-friendly interface and GraphQL API. Overall, the discussion emphasized the importance of problem-solving skills, both in everyday life and in software development.

    • Effective Google searches for programming issuesUnderstand search strategies, leave detailed comments, and refine searches for efficient problem-solving and helping others on GitHub.

      Becoming proficient at using search engines, particularly Google, is essential for effectively solving programming issues. The speaker shares his personal experience of trying to use DuckDuckGo instead of Google for programming searches and finding the results to be significantly less helpful. He emphasizes the importance of understanding how to search for specific issues and leaving detailed comments when solving bugs on GitHub. The speaker also offers practical tips for refining searches, such as removing irrelevant information, searching in different browsers, using quotes, and making searches more generic. By following these strategies, developers can increase their chances of finding solutions to their programming problems and helping others in the process.

    • Using synonyms in problem-solvingApproach problems creatively, break them down, read error logs, and don't hesitate to try different words or seek help when searching for solutions.

      Using synonyms or different words when searching for solutions to problems can lead to unexpected and effective results. The speaker shared an experience where changing the word "thumping" to "chugging" in a Google search led him to the solution of a problem with his fridge. He also emphasized the importance of problem-solving skills and suggested breaking down problems into smaller parts, reading error logs, and making a list of steps to take when encountering issues. The speaker also shared a personal story about a sound machine that he loved but had issues with, and how the company quickly sent him replacements after contacting them. Overall, the key takeaway is to approach problems with a creative and persistent mindset, and to not be afraid to try different approaches or seek help from others.

    • Parents' Favorite Sleep Aid and Fitness ResourceParents use Marpac Romeo turtle sound machine for kids' sleep and recommend a science-based fitness YouTube channel for effective workouts. Upcoming courses include beginner JavaScript and TypeScript & React.

      Parents have discovered the Marpac Romeo turtle sound machine as an effective tool for helping their children fall asleep. The device, which does not have a timer but can last up to 12 hours on a single charge, has become a beloved bedtime companion for many kids. The speaker plays a soothing, "creepy" song that the children find comforting, and the parents have reported having to get up multiple times during the night to turn it back on. The turtle uses triple A batteries and can be easily transported when needed. Another recommendation from the discussion was a science-based fitness YouTube channel. The channel provides well-researched workout plans and exercises, with each video lasting between 6 and 12 minutes. The presenter's engaging style and clear infographics make the content accessible and enjoyable for viewers. The channel offers a great resource for individuals looking to start or improve their fitness routine. Lastly, the speakers shared their upcoming courses: a beginner JavaScript course from beginnerjavascript.com and a TypeScript and React course from leveluptutorials.com. Both courses aim to help learners gain a solid foundation in their respective technologies.

    • Learn TypeScript with React from Level Up TutorialsLevel Up Tutorials offers a new course on TypeScript basics with React, available to Pro subscribers in late November, alongside previous courses on Next.js and Svelte.

      TypeScript is a popular topic in the development community, and for those interested, Level Up Tutorials is offering a new course on TypeScript basics with React, starting late November. This course, along with access to previous courses on Next.js and Svelte, is available with a yearly subscription to Level Up Tutorials Pro. During the discussion, the hosts mentioned John Cena and Scott Dalinski, and there was a brief conversation about using Blink 182's music for intros, but it was determined that using the song might result in legal issues due to copyright ownership by Sony Entertainment. Overall, the key takeaway is that for those looking to learn TypeScript with React, Level Up Tutorials is a great resource, and the upcoming course will be available to Pro subscribers.

    Recent Episodes from Syntax - Tasty Web Development Treats

    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

    780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

    780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

    Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more.

    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

    Related Episodes

    Potluck - Programming Languages × Soft Skills × PHP vs JS × Breakdancing x Spice Blends

    Potluck - Programming Languages × Soft Skills × PHP vs JS × Breakdancing x Spice Blends

    It’s another potluck episode in which Wes and Scott answer your questions! This month - programming languages, how to practice soft skills, PHP vs JS, is it every too late to become a developer, 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.

    Mlab - Sponsor

    mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com.

    Show Notes

    5:00

    • Why don’t you work with Typescript?

    10:52

    • How do you recommend working with APIs/libraries that compete with the DOM (e.g. d3 + react, react + google maps)?

    13:40

    • What is meant by the word “state” when referring to Vue or React?

    16:32

    28:23

    32:43

    • As someone trying to break into the field of programming, should you build everything from scratch, or it ok to use plugins and libraries?

    38:52

    • What would WordPress be like if it were built on Node and GraphQL?
    • Ghost

    46:54

    • I’m learning JavaScript at 34… Do you think I can learn to breakdance at 34 too?

    51:16

    • How do you handle high level page layout when using styled components?

    53:13

    • As a junior dev, should I switch from PHP and Laravel to full stack JS? I love PHP, but JS is taking over.

    Links

    ××× 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!

    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

    Konferencja LIVE - zapowiedź, odwołanie, ale będzie ...

    Konferencja LIVE - zapowiedź, odwołanie, ale będzie ...
    Lekka przerwa już za nami. Wracamy do regularnego nagrywania. Nie było nas tak długo, że nie zdążyliśmy zapowiedzieć naszej konferencji, a już musieliśmy ją przełożyć...
    Rozmawiamy na temat konferencji:

    - jakie są założenia?
    - jaki będzie format?
    - kto ma przyjechać
    - dlaczego postanowiliśmy przełożyć?

    Konferencja to temat, który chodził nam po głowie od dobrych 3 lat. W końcu wszystko zaczęło się krystalizować i mocno zabraliśmy się do pracy. Wszystko szło pięknie, do momentu aż Ukraina nie została zaatakowana...

    Zapraszamy do rozmowy i szerszego kontekstu tworzenia konferencji.

    TRANSCRIPT: dc10b815fc184e18b8efb72431323c31

    React and TypeScript - Gabriele Petronella (Small Talk)

    React and TypeScript - Gabriele Petronella (Small Talk)
    Small Talk is a series of live-stream interactive events with our experts, an informal 30-minute chat on their area of expertise where you'll have a chance to interact with them, ask questions and learn straight from the source.

    This time we talk with Gabriele Petronella, our go-to React and TypeScript expert. The popular libraries are at the centre of his workshop, where we'll see how to use them together to overcome the issues related to the scalability and evolvability of your code.

    Small Talk is a chance to go behind the scenes of our experts' work and get a sneak peek of what their workshop will be about and, as usual, you’ll be able to join the conversation by asking questions from home.
    Always wanted to ask a trainer that burning question about what they do? Now you have a chance!

    We’ll discuss how Gabriele's workshop was born, why React and TypeScript are a great couple when used together, what type of professionals will benefit from this the most, what type of exercises we’ll be doing in the workshop and how these will enable you to learn the key concepts during the class.

    Did we say it already? You’re encouraged to be part of the conversation and ask questions during the live streaming through the chat provided by YouTube.

    When: Friday 30th September 2022, from 3 pm CEST

    Who: Gabriele is the co-founder of buildo, a software consulting company based in Milan, where he works as a lead software engineer. Passionate about front-end and back-end architectures, he has extensive experience with react, TypeScript and Scala.

    Workshop link: https://bit.ly/TypeScript_React_ENG_Podcast

    #JavaScript #React #TypeScript #FrontEnd #Framework #WebFramework #Software #SoftwareDevelopment #SoftwareEngineering #SoftwareEngineer #SoftwareDev #BackEnd #FrontEndDevelopment #BackEnd #Code #Coding #Programming