Logo
    Search

    Podcast Summary

    • Middleware in web applicationsMiddleware enhances functionality and organization in web apps by adding checks or logic before route handlers, improving overall efficiency.

      Middleware is code that runs between an initial request and the event handler in a web application. It allows developers to add functionality or perform checks before the user reaches the route handler. Middleware can be used for various purposes, such as authentication, generating data from external systems, and skipping expensive operations. By using middleware, developers can keep the logic of a specific route handler clean and focused, improving the overall organization and efficiency of the application. Middleware is a valuable tool for building web applications, and its use is not limited to back-end servers. It's important to understand when to use middleware and how it can enhance the functionality of your application. For more information and practical examples, check out Syntax FM on YouTube.

    • Middleware acts as a crucial component between request and responseMiddleware simplifies application by adding functionality and streamlining authentication logic across multiple routes

      Middleware is a crucial component in web development, acting like the bread in a sandwich that adds necessary functionality between the request and response. It can be used in various modern frameworks, including Express.js, which introduced the concept via Connect. Authentication is a common use case for middleware, where it checks for user authentication tokens and authorizes access to specific routes or data. By using middleware, developers can avoid duplicating authentication logic across multiple routes and streamline their application. For instance, in an application with admin routes and multiple handlers, middleware can be applied to check user permissions for all admin routes, preventing unauthorized access and simplifying the codebase.

    • Understanding Context and Middleware in Node.jsContext in Node.js refers to request info accessible throughout the cycle, while middleware manipulates it to redirect, save data, or log requests. Effective use can enhance app functionality.

      Context in Node.js refers to the concept of making information available throughout the request cycle, which can be accessed via the request object or the async local storage API. Middleware is a common way to manipulate this context. For instance, you can use middleware to redirect users to specific instances based on their location, save user data in specific regions for data privacy laws, or log request information for debugging and statistics. Middleware functions receive the request and can add information to the context, log data, or return a new response. In development mode, middleware can be used to temporarily enable logging for debugging purposes. Overall, understanding the concept of context and how to use middleware effectively can greatly enhance the functionality of your Node.js applications.

    • Enhance application functionality with middlewareMiddleware enables logging, caching, error handling, and AB testing without modifying codebase, improving functionality and user experience.

      Middleware plays a crucial role in optimizing and managing various aspects of an application's functionality. By using middleware, developers can perform tasks such as logging, caching, error handling, and AB testing without modifying the existing codebase. This allows for easier implementation and maintenance of these features. For instance, logging can be done by starting a timer and outputting emojis based on the process time, acting as a simple performance indicator. AB testing can be employed to check which heading or coupon code works best for specific user groups, such as those from certain countries. Middleware can also be used for error handling and logging, ensuring that errors are captured and resolved in a timely manner using tools like Sentry. Additionally, caching expensive renders can be achieved by memoizing functions or implementing caching in middleware, which can help improve performance by avoiding unnecessary database queries or API calls. Overall, middleware offers a flexible and efficient way to enhance an application's functionality and improve the user experience.

    • Understanding Middleware in Node.js ApplicationsMiddleware functions handle requests in Node.js apps, determine tenant/customer data, parse form data, and can run on the edges for faster response times

      Middleware plays a crucial role in handling requests in Node.js applications, especially in complex scenarios such as multi-tenant applications or parsing form data. Middleware functions can determine which tenant or customer a request belongs to and set appropriate data accordingly. It can also parse form data into JavaScript objects, making it easier to use in the application. Middleware can run in the middle of the application, traditionally in the same environment, or on the edges, in environments like Cloudflare Workers, for faster response times and reduced load on the main application. By understanding the role and capabilities of middleware, developers can build more efficient and effective Node.js applications.

    • Middleware at the edge: The starting and stopping point for requestsEdge middleware at the start and end of requests can optimize performance with fast stores or caching, but be mindful of limitations and avoid overloading with heavy data initialization or unnecessary work.

      Middleware at the edge of an application, such as in Cloudflare Workers or Vercel, acts as the starting and stopping point for requests, similar to the bread of a sandwich. However, it's important to be aware of limitations, such as timeouts and the inability to connect to databases for every request. To optimize performance, consider using fast key-value stores or caching for heavier data initialization. Additionally, be mindful of performing too much work in middleware, as it can lead to increased load times and potential performance issues. While looking up a user on every request may seem fine, especially for quick database lookups based on session data, caching and revalidation can become a hassle. Overall, the middleware at the edge of an application plays a crucial role in handling requests, but it's essential to strike a balance between functionality and performance.

    • Improving User Lookup Queries with Redis CachingRedis caching can save time and data transfer for large user queries by storing user data in cache and updating it whenever information changes. Focus on optimizing time-consuming areas and use Redis cache for user authentication and access checks.

      Caching user data in Redis can significantly improve the performance of user lookup queries in web applications. The speaker shared that they have always checked the current user on every request and never encountered issues. However, they have implemented caching using Redis, which updates the cache whenever the user's information changes. The cache is per session, and when an auth token comes in, the first check is made to the cache. This method can be particularly useful for large queries that involve user data and additional information, which can result in significant time and data transfer savings, especially if the database is hosted off-site. The speaker also suggested using timers or tools to determine where the time is being spent in requests and focusing on optimizing those areas. Additionally, the speaker mentioned that Next.js middleware can be used at a route level to check for user authentication and access, and while it is a one-file solution, the logic for specific checks must be added manually.

    • Implementing Middleware in SvelteKitMiddleware enhances web apps with functionality and security through authentication, error handling, and more. SvelteKit's server-side layouts simplify implementation, while frameworks like Express and Fastify offer built-in middleware.

      Middleware plays a crucial role in managing and securing routes in web applications. The speaker shared their experience with trying to implement middleware in an app router, but found it confusing and time-consuming due to the need to write custom routing and checks. However, they found a solution in SvelteKit's server-side layouts, which allows for middleware implementation before any other code in a specific route. Middleware is a common concept in various JavaScript frameworks like Express and Fastify, and it can be found on NPM or written from scratch. Its use can add functionality and security to applications, such as authentication and error handling. With experience, using middleware becomes a standard practice in web development. In summary, middleware is an essential tool for managing and securing routes in web applications, and its implementation can lead to cleaner and more efficient code. SvelteKit's server-side layouts offer a solution for middleware implementation in specific routes, while frameworks like Express and Fastify provide built-in middleware functionality. Overall, middleware is a valuable addition to any web application development project.

    • Middleware for flexible and easy functionality additionMiddleware are reusable functions or libraries that add functionality to web applications with ease and flexibility, available for various frameworks and modern web technologies.

      Middleware are reusable functions or libraries that can be easily integrated into various web frameworks like Express, Fastify, or even modern web technologies such as fetch or web request/response. These middlewares come in different styles: connect-style, which accepts request, response, and next functions, and the modern style, which returns fetch requests or response objects. One common use case for middleware is implementing rate limiting to prevent excessive requests to your endpoints. You can simply install these middlewares via npm and use them across different frameworks. For instance, you can install a rate limiter middleware to stop users from hitting your sign-up endpoint too frequently. Another example is the "ban hammer," a middleware used in tutorials to prevent users with failed credit card attempts from accessing the system. This middleware would make it seem like the user was logged out but prevent them from logging back in, creating a frustrating experience for the user. Overall, middleware offers flexibility and ease of use, allowing developers to add functionality to their web applications with minimal effort and across different frameworks.

    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

    AsyncLocalStorage + AsyncContext API

    AsyncLocalStorage + AsyncContext API

    In this Hasty Treat, Scott and Wes talk about AsyncLocalStorage, why more frameworks aren’t using it yet, some examples, as well as some footguns.

    Show Notes

    • 00:22 Welcome
    • 01:44 What is AsyncLocalStorage?
    • 03:14 What is context?
    • 07:49 Why aren’t more frameworks using AsyncLocalStorage for context for middleware?
    • 10:16 Examples of usage
    • 14:20 Footguns

    Tweet us your tasty treats

    Our Stacks Explained

    Our Stacks Explained

    In this episode of Syntax, Wes and Scott talk through the tech stack they use to manage their course websites.

    Kontent by Kentico - Sponsor

    Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.

    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.

    .TECH Domains - Sponsor

    Dot Tech domains has launched a new game with wicked prizes. It’s a windows 98 inspired game where you need to find and solve puzzles in each of the drives. This is unreal and you need to see it to believe it - good luck and start the game March 25th at go.tech/syntaxbtc.

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    All About Redux && Cookies vs JWT

    All About Redux && Cookies vs JWT

    Dev Lifts — Sponsor

    Dev Lifts will create a personal training plan tailored to your 2018 health and fitness goals. Use the code SYNTAX for $50 off.

    Join with a friend and we'll make you a Buddy Plan that you can do together (nutrition will still be tailored on a per-individual basis, but workouts will be something you can both do together)! Plus, use the coupon code below and you'll both get $100 off.

    Enter each other's email address as the coupon code and your discount will be applied to your invoices (invoices are sent manually currently, so I'll apply the discount for you both once you've both signed up). Valid thru January 31, 2018.

    The Show Notes!

    01:00

    06:00

    • Modifying Your State
    • Immutability

    07:15

    • Actions + Actions Creators
    • Dispatching

    09:00

    • Reducers

    14:00

    18:30

    • What is the difference between Cookies and JWT?

    Tweet us your tasty treats!

    OCI Identity and Access Management

    OCI Identity and Access Management

    Data breaches occur more often than we’d like them to. As businesses embrace remote work practices, IT resources are more at risk than ever before. Oracle Identity and Access Management (IAM) is an essential tool for protecting enterprise resources against cybersecurity threats. Join Lois Houston and Nikita Abraham, along with special guest Rohit Rahi, as they examine IAM and the key aspects of this service, and discuss how you can control who has access to your resources.

    Oracle MyLearn: https://mylearn.oracle.com/
    Oracle University Learning Community: https://education.oracle.com/ou-community

    Twitter: https://twitter.com/Oracle_Edu
    LinkedIn: https://www.linkedin.com/showcase/oracle-university/

    Special thanks to Arijit Ghosh, Kiran BR, Rashmi Panda, David Wright, the OU Podcast Team, and the OU Studio Team for helping us create this episode.