Logo
    Search

    Podcast Summary

    • Upgrading Syntax.fmsight to the latest Next.js versionsStaying updated with technology, collaborating with teams, and utilizing tools like LogRocket can lead to significant improvements in the development process.

      Upgrading a website to the latest versions of technologies like Next.js and learning from the experience can lead to significant improvements. Wes Bos and Scott Tolinski from Syntax discussed their experience upgrading their website, Syntax.fmsight, to the latest versions of Next.js, including nowv2. The site, which was built around three and a half years ago, initially used a custom Node server to handle requests and pass them to Next.js. However, with the latest versions, this custom setup was no longer necessary. The process of upgrading involved collaboration with the Next.js team and resulted in several major changes to the site. Wes and Scott shared that this experience offered valuable lessons for developers working with Next.js or considering similar upgrades. They emphasized the importance of staying updated with the latest technology versions and the benefits that come with it. Moreover, they introduced LogRocket as a sponsor and a valuable tool for developers. LogRocket provides session replay capabilities, enabling developers to see exactly what users do on their websites, making it easier to identify and fix bugs. This metaphorical "detective work" can save time and effort compared to traditional methods of debugging. Overall, the episode highlighted the importance of staying current with technology, collaborating with teams, and utilizing tools like LogRocket to enhance the development process.

    • Outdated technology and neglecting updates can cause unexpected issues with website deploymentStay updated with technology changes and consider the pros and cons of different hosting solutions for specific use cases to avoid unexpected issues with website deployment.

      Relying on outdated technology and neglecting updates can lead to unexpected issues with website deployment. In this case, the use of a custom Node.js server for a website resulted in the inability to deploy new content due to Vercel's shift towards serverless processes. The custom server was used for three reasons: an API for controlling data, on-demand page builds for releasing podcast episodes, and custom routing for cleaner URLs. However, these functionalities can now be achieved through other platforms like Gatsby or SAP. The incident served as a reminder to stay updated with technology changes and consider the pros and cons of different hosting solutions for specific use cases.

    • Next.js Improvements for Building Web PagesNext.js offers serverless endpoints, on-demand page building, and seamless serverless functionality through API routes and improved serverless experience.

      Next.js offers several improvements for building dynamic and static web pages, including API routes, on-demand page building, and seamless serverless functionality. API routes allow for serverless endpoints, access to helper functions, and deployment without the need for external servers or packages. On-demand page building ensures that new content is available immediately without requiring a full website regeneration. Next.js also offers a better serverless experience compared to other options, as it bundles and manages dependencies without the need for external packages or manual publishing. Overall, these features make Next.js a versatile and efficient choice for building dynamic and static web applications.

    • Dynamic regeneration for Syntax.fmSyntax.fm uses static generation for its pages but tests a feature called 'unstable regen' for dynamic regeneration after every visitor to ensure the latest episode is shown.

      The Syntax.fm website uses static generation for its pages, which makes the site blazing fast. However, they encountered a challenge when they needed the site to be dynamic and regenerated when a new episode is published. To solve this, they're currently testing a feature called "unstable regen" that allows the site to regenerate after every visitor, ensuring that the latest episode is shown to the next visitor. Additionally, Next.js now supports custom routing, making the site faster and more efficient during builds and deployments. However, a potential downside is that Vercel, the hosting platform for Next.js, has a lockdown on API routes, which may require developers to remap the API folder to their own server if they cannot deploy on Vercel. Overall, the combination of static generation and dynamic regeneration provides a best-of-both-worlds solution for Syntax.fm.

    • Vercel's advantages for static site generation and API routesVercel simplifies static site generation and API routes with seamless integration, automatic deployment, and ease of setup, making it a preferred choice over other options for some projects.

      The use of Vercel for static site generation and API routes offers benefits and conveniences that make it a preferred choice over other options like Gatsby or Sapper for a specific project. The speaker mentions that Vercel's "secret sauce" allows for the API routes to work seamlessly, and the simplicity of the pages and lib folder setup makes the process less complicated. Additionally, the ability to automatically deploy and the absence of the need to regenerate the site at specific times are advantages. While Gatsby and Sapper also have their merits, such as static generation and server-side rendering capabilities, they may not offer the same level of convenience and ease in certain contexts. Overall, the team's experience with Vercel has been positive and they appreciate the support and improvements made by the next team.

    • Planning updates for Syntax podcast's new seasonThe team is revamping the podcast's website design, considering new audio and visual elements, and may retire the 'El Toro Loco' bumper. Excited for the future and invite listeners to explore the full archive.

      The Syntax podcast team is planning to start a new season with potential visual updates and new content, while continuing to record and release episodes in advance. The team is considering improvements to the website design and user experience, as well as new audio and visual elements. They also mentioned the possibility of retiring the "El Toro Loco" bumper due to sensitivity concerns, and are open to suggestions for a replacement. Overall, the team is excited about the future of the podcast and looks forward to continuing to provide valuable content for their audience. Additionally, they encouraged listeners to check out their full archive on syntax.fm and subscribe or leave a review in their podcast player if they enjoy the show.

    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

    How to use collaboration tools to improve apprenticeship training outcomes

    How to use collaboration tools to improve apprenticeship training outcomes
    Collaboration tools are becoming increasingly popular in apprenticeship training, and for a good reason. These tools can significantly enhance the learning experience and improve outcomes for both apprentices and trainers. One of the key benefits of collaboration tools is their ability to facilitate communication between apprentices and trainers, regardless of their physical location. This can be especially helpful for apprentices who cannot attend in-person training sessions due to distance or scheduling conflicts. By using collaboration tools such as video-conferencing, messaging apps, and shared online workspaces, trainers can provide their apprentices more personalized guidance and support, ultimately leading to better outcomes. Another advantage of collaboration tools is their ability to foster a sense of community among apprentices. By providing a platform for apprentices to connect and collaborate, these tools can help build relationships and encourage the sharing of ideas and insights. This not only enhances the learning experience, but also helps to create a supportive learning environment. #collaborationtools #apprenticeship #training #elearning #education #skillsdevelopment #onlinelearning #virtualtraining #teamwork #learningoutcomes

    Discovering Next.js with Guillermo Rauch

    Discovering Next.js with Guillermo Rauch

    In this episode of Semaphore Uncut, we talk to Guillermo Rauch. Guillermo is CEO and co-founder of Vercel. We talk about how React has emerged as a de-facto standard for the front-end. Guillermo describes Vercel's Next.js framework that is built around React. And we also discuss front-end testing and microservices engineering trends.

    Key takeaways:

    • Next.js improves React development and deployment
    • Next.js is a powerful framework around de-facto standard React
    • Front-ends are globally distributed - Next.js supports CDN from the start
    • Front-end engineers need short feedback loops
    • Fast feedback drives front-end quality
    • Adopt new front-end tech one page at a time
    • Test in production-like preview builds
    • Use headless, visual regression tests for GUI components
    • Testing benefits from React being functional and declarative
    • The risks and rewards of microservices
    • Emerging patterns and systems mitigate microservices risk

    About Semaphore Uncut
    In each episode of Semaphore Uncut, we invite software industry professionals to discuss the impact they are making and what excites them about the emerging technologies.

    When To Consider Another COVID-19 Booster

    When To Consider Another COVID-19 Booster
    This week, U.S. Food and Drug Administration vaccine advisors will meet to discuss long-term COVID vaccine strategy. This follows the recent FDA authorization and CDC recommendation of a second booster available for people 50 and older and some immunocompromised people. Going forward, will the strategy change from counting boosters to making a COVID vaccine a seasonal shot? Allison Aubrey talks to Emily Kwong about the latest on boosters, what's known about the vaccination timeline for younger children, and what some experts are saying about the BA.2 variant.

    Learn more about sponsor message choices: podcastchoices.com/adchoices

    NPR Privacy Policy

    718: React Server Components

    718: React Server Components

    Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don’t like about it, and tips to learn 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

    Pros + Cons of JavaScript Servers, Serverless, and Cloudflare Workers

    Pros + Cons of JavaScript Servers, Serverless, and Cloudflare Workers

    In this Hasty Treat, Scott and Wes talk about the pros and cons of JavaScript servers, Serverless, and Cloudflare Workers.

    Hashnode - Sponsor

    Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.

    Hashnode: Everything you need to start blogging as a developer!

    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

    Tweet us your tasty treats