Logo
    Search

    Potluck - Peer Dependencies × Vitest × NVM and PNPM × Sprites

    enJuly 13, 2022

    Podcast Summary

    • Troubleshooting network access issuesObtaining correct credentials and understanding network protocols can help resolve complex networking issues.

      Network configurations can be complex and frustrating, but with persistence and the right information, you can overcome issues. Scott shared his experience with having trouble accessing his NAS drive outside of his local network. He discovered that he needed POE credentials from his Internet provider to authenticate network traffic. After obtaining these credentials, he was able to open the correct port forwarding on his router and get his NAS working externally. This process involved understanding various network protocols like PPPoE and UPnP, and dealing with the unique challenges of his specific Internet provider. It's a reminder that networking issues can be complex, but with the right information and determination, they can be resolved. Additionally, the podcast discussed the benefits of using tools like Prismic, Sanity, and LogRocket for web development projects.

    • User customizing Home Assistant look and dealing with peer dependencies in PNPMUser adjusts Home Assistant appearance, handles peer dependencies in PNPM, and considers the implications of keeping or removing them

      The user is in the process of setting up Home Assistant and integrating various devices into it, including an ecobee and a robot vacuum. He's excited about the potential of automating these devices and has even added integrations for photos of his backyard from the sprinkler connection. However, he's not satisfied with the default look of Home Assistant and plans to write his own CSS or fork a theme to make it look better. He finds the current look dated and dislikes the heavy shadows on the light version. The user also had a question about peer dependencies in PNPM and explained that it refers to a situation where a package has dependencies that are required for it to function properly, but are not installed as dependencies of the project itself. He mentioned that if he adds the peer dependency to his project, the error message from PNPM stops, but if he removes the original dependency in the future, he will still have the peer dependency installed. The user also mentioned that he's at a difficult decision point, as he's not sure if he wants to keep the peer dependency or not. The term "Sophie's Choice" was mentioned in relation to this decision, which refers to a difficult decision where no outcome is preferable over the other.

    • Managing Peer Dependencies in Node.jsUse legacy_peer_deps option in NPMRC file to manage peer dependencies manually and ensure compatibility. Consider making GraphQL a pure dependency for easier management.

      Peer dependencies in Node.js packages can be a source of frustration due to the need to manage them yourself and the potential for compatibility issues between different packages and their required versions. When installing a package, peer dependencies are listed as suggested versions that the package is designed to work with. However, if a new version of a required dependency is released before the package is updated, an npm install can fail. This can result in a situation where one package works with an older version, while another requires the latest version, leading to dependency hell. The speaker suggests using the legacy_peer_deps option in the NPMRC file to revert npm to the old behavior of not failing the install when peer dependencies are not met. This allows you to manually ensure that all dependencies are compatible. While the pure dependencies system makes sense in theory, the frequent release of new versions in the JavaScript ecosystem can make managing peer dependencies a challenge. The speaker also mentions encountering similar issues with GraphQL and suggests making GraphQL a pure dependency as a potential solution. Overall, the key takeaway is that while managing peer dependencies can be a pain, there are options available to help navigate the complexity of dependency management in Node.js projects.

    • Testing Node.js ESM code with vtestVtest allows testing Node.js ESM code directly without transpilation, offering simplicity and avoiding Jest's config issues. MongoDB's advanced operations like Upsert, find one and update, and count documents can boost development efficiency.

      During the discussion, Scott shared his experience of using vtest for testing Node.js code that is written in ESM format without the need for transpilation. He mentioned that he encountered issues with different configs for testing when using Jest in the past, leading him to prefer vtest due to its simplicity and the ability to run ESM directly. However, they didn't adopt it for their entire project due to the presence of common JS code. The discussion also touched upon MongoDB operations beyond CRUD. Upsert, a helpful operation, was highlighted as an update or insert operation that creates a new document if it doesn't exist, saving time and effort. Another common operation mentioned was "find one and update," which allows updating a document's value in one query instead of multiple. Count documents was also suggested as a useful operation for determining the number of documents in a collection. These advanced MongoDB operations can make development more efficient and streamlined.

    • MongoDB and Mongoose: Efficient Data ManagementMongoDB and Mongoose offer features like counting, Find by ID, Update many, auto-updating timestamps, and aggregation for efficient data management.

      MongoDB and Mongoose offer various features to efficiently manage and manipulate data. Counting the number of items based on a specific query, using Find by ID, and Update many are some of the handy methods. For auto-updating fields like created and updated timestamps, Mongoose and many other ORMs have this feature built-in. When deciding between pulling a document, updating its fields, and saving it versus using Find 1 and Update, consider whether you need the data from the model to perform the update. Lastly, aggregation is a powerful feature in MongoDB for handling relational data and performing complex operations, such as counting, averaging, and filtering, in a more performant manner as the JavaScript gets run at the database level.

    • Tools for simplifying MongoDB and web application developmentMongoDB aggregation can be complex, but tools like Compass and Studio 3t provide user-friendly interfaces. Query helpers and hooks simplify common tasks with MongoDB and Mongoose. Prismic offers an alternative approach to building websites with components or 'slices'.

      For handling large data sets in MongoDB, aggregation is a powerful tool, but it can be complex and intimidating due to its syntax. However, tools like Compass and Studio 3t offer user-friendly interfaces to help build aggregations step by step. Additionally, MongoDB and Mongoose offer query helpers and hooks to simplify common tasks, such as updating user information and interacting with external databases like Redis. Prismic, a headless CMS, offers an alternative approach to building websites by focusing on components or "slices," allowing for easy drag-and-drop page building. Overall, these tools and techniques can help streamline the process of working with MongoDB and building web applications.

    • Building websites with Prismic and managing Node versions with NVM and PNPMPrismic is a CMS for building websites with components, NVM manages Node versions, and PNPM is a package manager with benefits like saving space and switching Node versions

      Prismic is a content management system that allows you to build websites using components based on slices of content. It's a slick way to build websites and offers free starter files to get started. NVM and PNPM are two different tools that serve distinct purposes. NVM is a Node version manager used to manage different Node versions for multiple code bases, while PNPM is a package manager that saves space and offers other benefits. They don't directly relate, and PNPM will use the Node version selected via NVM just like NPM or Yarn would. However, PNPM does have an env command that can switch the Node version on your computer, making it a potential alternative to NVM. For developers looking to upskill, there are several paths to consider, including cloud computing or serverless, machine learning and AI, Web 3, and IoT. It's a good idea for developers to focus on one specific path and become an expert in that area to advance in their careers.

    • Advanced JavaScript Skills: Cloud Computing, Serverless, Machine Learning, AI, Web 3, and IoTDemonstrating expertise in advanced JavaScript areas like cloud computing, serverless, machine learning, AI, Web 3, and IoT through projects and reusable components can make you a desirable candidate. Publicly publishing components can increase visibility, but private packages may be necessary for certain organizations.

      Having experience and understanding in various advanced areas of JavaScript, such as cloud computing, serverless, machine learning, AI, Web 3, and IoT, can make you a more attractive candidate to potential employers. To demonstrate your knowledge, consider creating small projects in each of these areas. Additionally, reusable components can be developed for future use by either publishing them publicly on NPM or maintaining a private NPM repository with proper credentials for installation. NPM itself offers private packages as a service, allowing organizations to maintain their workflows for both public and private packages. However, publishing components publicly can make them accessible to a larger audience and potentially increase their visibility. Keep in mind that using private packages may require a paid NPM account for both user and organization scopes.

    • Managing dependencies in large teamsUse a private npm registry for large teams to save money and keep code local. For smaller teams or individual projects, consider native JS or lightweight libraries. Lodash still has a place for edge cases and performance-driven tasks, and individual functions can be installed. Use tools like LogRocket for effective debugging and optimization.

      For managing dependencies in large teams, setting up a private npm registry can be beneficial for keeping code local and saving money. This can be done by hosting the registry on an internal VPN. On the other hand, for smaller teams or individual projects, using native JavaScript features or lightweight libraries like Angus's just library may be more suitable. Regarding Lodash, while some of its functions may be replaced by native JavaScript features, it still has a place in modern JS and TS, especially for edge cases and performance-driven tasks. It's no longer necessary to install the whole library; functions can be installed individually. Another key takeaway is the importance of using tools like LogRocket to understand user interactions and identify bugs effectively. LogRocket offers features like session replays, conversion funnels, path analysis, and heat maps, making it an invaluable resource for debugging and optimizing websites.

    • Advancements in technology reduce the need for libraries like Lodash and Underscore.jsSprite sheets and libraries for optimizing JavaScript operations are less relevant due to advancements in technology, but they still have their place in edge cases or for developers prioritizing performance.

      While small libraries like Lodash and Underscore.js were once essential for optimizing complex JavaScript operations, their use has become less common due to advancements in technology. Sprite sheets, another optimization technique, are now less relevant due to the shift towards using larger images and scalable vectors like SVGs. However, these tools are not deprecated and still have their place in edge cases or for developers who prioritize performance. Additionally, the hosts discussed the potential for an episode on programming with ADHD, featuring a doctor of psychology who specializes in the topic.

    • Sprite sheets still have their use casesSprite sheets can improve performance by reducing image requests and overhead, particularly for small icons and emojis. They are also useful in animation and securing access to content through authorization headers.

      While sprite sheets have largely been replaced by more scalable and vector-based designs, there are still some use cases where they can be beneficial, particularly when dealing with large numbers of small images or icons. For instance, Etienne from Missive uses a sprite for their non-native emoji picker to improve performance by reducing the number of image requests and eliminating the overhead of opening and closing SVG tags. Additionally, using an SVG sprite to combine multiple icons into one file can also lead to better performance. Another area where sprite sheets continue to be relevant is in animation, such as Twitter's heart animation, which uses a sprite to step through different frames instead of smoothly animating between them. When it comes to video content, authorization headers can be used to restrict access to specific URLs and prevent unauthorized sharing. However, it's important to note that streaming video works differently than loading images, as it involves downloading chunks of the video at a time, so authorization may need to be handled differently. Overall, while sprite sheets may not be as commonly used as they once were, they still have their place in certain applications, particularly when it comes to optimizing performance and securing access to content.

    • Restrict video access with a specific domainEasily control where your videos can be played by implementing playback restrictions using a specific domain. Be sure to understand the terms of use and permissions when using APIs for copyrighted materials.

      To restrict access to your videos and protect against unauthorized playback, you can implement playback restrictions using a specific domain. This method is easy to set up and allows you to control where your videos can be played. Additionally, there are more advanced options available through an API for more complex use cases. Regarding Luke's question, the use of an API like the NHL's does not automatically mean you are violating copyrights. However, it's essential to understand the terms of use and ensure you have the necessary permissions to use the data, especially when it comes to copyrighted materials like logos. It's always a good idea to consult with a legal professional or the copyright holders directly to clarify any potential issues.

    • Using trademarked logos and copyrighted materials in personal projectsUsing copyrighted logos or materials for personal projects might be permissible under fair use, but selling merchandise with such logos is not allowed. Be aware of API usage and consider proper authorization or licensing as your project grows.

      Using trademarked logos or copyrighted materials for personal projects or discussions might be permissible under fair use, but selling such items could lead to legal issues. For instance, using sports team logos for a statistics-based website like MoneyPuck.com is generally considered acceptable. However, selling merchandise with copyrighted logos, such as custom yetis or stickers, is not allowed. The use of APIs, like the NHL API, can also be a gray area, and while they may be publicly available, unauthorized use could result in legal consequences. Companies make significant revenue from licensing their APIs and data, and they are likely to protect their intellectual property. While it's unlikely that small projects will face legal action, it's essential to be aware of these potential issues and consider obtaining proper authorization or licensing as your project grows.

    • Disposing of Old Home Appliances: A DilemmaHomeowners face decisions on what to do with old appliances, whether to sell, donate, or keep them for future use.

      Both the speaker and I had experiences with home appliances that caused inconvenience and required consideration for disposal or replacement. The speaker shared their frustration with a malfunctioning bidet toilet seat, which required constant battery replacements for the remote control. I, on the other hand, discovered a free SodaStream at a yard sale and was pleasantly surprised by its performance. However, we both acknowledged the potential oddity of purchasing used appliances like these. The speaker also mentioned their new bidet toilet seat, which is a high-end model with features like heated seats, self-cleaning, and deodorizing. They were unsure about what to do with their old bidet seat and considered options like selling, donating, or relocating it. In the end, they decided to keep it for potential use in their basement. The conversation then shifted to the speaker's recent discovery of using nitrous capsules in cold brew coffee makers, which is similar to the compressed gas used in SodaStream and NOS for cars. Overall, the conversation revolved around the experiences and considerations of using and disposing of home appliances.

    • Invest in personal growth with westbos.com and leveluptutorials.comAcquire new skills and knowledge to stay ahead in today's evolving world with discounted courses from westbos.com using code 'syntax' or a monthly subscription to high-quality video tutorials from leveluptutorials.com.

      Importance of continuous learning and improvement, as emphasized by the guests' promotion of their educational platforms, westbos.com and leveluptutorials.com. The whipped cream dispenser anecdote serves as a metaphor for the excitement and value that comes from acquiring new skills and knowledge. West Bos's offerings include a range of courses with discounts available using the code "syntax," while Level Up Tutorials provides high-quality video tutorials at a monthly subscription with a steady stream of new content. Both platforms aim to help individuals level up in their chosen fields and stay ahead in today's rapidly evolving world. So, consider investing in your personal growth and check out these resources for valuable learning opportunities.

    Recent Episodes from Syntax - Tasty Web Development Treats

    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

    779: Why SQLite is Taking Over with Brian Holt & Marco Bambini

    779: Why SQLite is Taking Over with Brian Holt & Marco Bambini

    Scott and CJ dive into the world of SQLite Cloud with special guests Brian Holt and Marco Bambini. They explore why SQLite is gaining traction, its unique features, and the misconceptions surrounding its use—let’s get into it!

    Show Notes

    • 00:00 Welcome to Syntax!
    • 01:20 Who is Brian Holt?
    • 02:26 Who is Marco Bambini?
    • 05:12 Why are people starting to talk so much about SQLite now?
    • 08:47 What makes SQLite special or interesting?
    • 09:46 What is a big misconception about SQLite?
    • 11:13 Installed by default in operating systems.
    • 12:03 A perception that SQLite is intended for single users.
    • 13:36 Convincing developers it’s a full-featured solution.
    • 15:11 What does SQLite do better than Postgres or MySQL?
    • 17:30 SQLite Cloud & local first features.
    • 20:38 Where does SQLite store the offline information?
    • 23:08 Are you typically reaching for ORMs?
    • 25:00 What is SQLite Cloud?
    • 27:29 What makes for an approachable software?
    • 29:18 What make SQLite cloud different from other hosted SQLite options?
    • 32:13 Is SQLite still evolving?
    • 34:40 What about branching?
    • 37:37 What is the GA timeline?
    • 40:04 How does SQLite actually work?
    • 41:19 Questions about security.
    • 44:28 But does it scale?
    • 45:52 Sick Picks + Shameless Plugs.

    Sick Picks

    Brian: Trainer Road
    Marco: Tennis

    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

    A Fireside Chat with USC's Football Team

    A Fireside Chat with USC's Football Team

    At the University of Southern California in Los Angeles, talking to their football team about understanding the bigger picture. When you are at the prime of your career, you have the leverage. This generation of athletes is being smart about branding and entrepreneurship and the time after they retire around 30 years of age. Share this with someone that needs to understand where the bigger picture in life stands <3

    --- Send in a voice message: https://podcasters.spotify.com/pod/show/garyvee/message

    Gatsby v4

    Gatsby v4

    In this Hasty Treat, Wes and Scott talk about what's new in Gatsby v4.

    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.

    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.

    Show Notes

    Tweet us your tasty treats