Logo
    Search

    Hasty Treat - How To Publish A React Component To NPM

    enAugust 19, 2019

    Podcast Summary

    • Publishing a React library with Create React LibraryCreate React Library simplifies setting up a React library repo with Rollup, Babel, and Jest, and includes Sentry for error tracking.

      Publishing a React library can be a straightforward process using tools like Create React Library. Wes and Scott from Syntex discuss their experiences with this in their latest episode. They share how they used Create React Library to quickly set up a repo, which comes with Rollup for bundling, Babel for transpiling, and Jest for testing. The sponsor of the episode, Sentry, was also highlighted for its role in error and exception tracking, making it easier to identify and fix bugs. While this isn't the only way to publish a React library, the team was impressed by the ease and speed of this approach. If you're curious about publishing your own React library, give Create React Library a try. And, as a bonus, use the coupon code "tasty treat" on Sentry for two months free.

    • Utilizing Create React App with custom librariesCreate React App integrates well with custom libraries, offering features like peer dependencies, CSS modules, and optional TypeScript. However, managing outdated dependencies and resolving conflicts can be challenging.

      The discussed tool, which is a library built into Create React App, offers impressive features such as supporting complicated peer dependencies, CSS modules, and optional TypeScript, with an active community. It allows for a seamless development experience with both the library and Create React App linked up, enabling easy importing and usage. However, potential challenges include dealing with outdated dependencies and resolving conflicts between React instances in the bundlers. To publish the package on npm, one needs an npm account. Despite some hurdles, the overall development process is convenient as it sets up the package with minimal configuration. For more detailed insights, check out the speaker's YouTube video.

    • Documenting NPM packages with libraries like Storybook, Styleguidest, and DoczDocumenting NPM packages is essential, but using libraries like Storybook, Styleguidest, and Docz can be challenging due to potential hurdles and outdated instructions. Contributing to these communities can help improve the documentation experience for all.

      Publishing a package on NPM is a straightforward process once you have an account and npm installed. However, creating high-quality documentation for your package can be a challenge. The speaker explored various documentation libraries such as Storybook, Styleguidest, and Docz, but found each had its own set of issues. Documentation is crucial for a community project, and the speaker expressed a desire for others to contribute and improve the library. Despite encountering several open GitHub issues with Docz, the speaker found its documentation system to be the most appealing. The process of setting up and using these libraries can be frustrating due to outdated instructions or open issues. If you plan to use a documentation library for your project, be prepared for potential hurdles and consider contributing to the community by reporting and resolving issues.

    • Evaluating documentation tools based on usability and preferenceConsider practical usage examples, simplicity, and personal preference when choosing a documentation solution. Evaluate various tools to find the best fit for your specific needs.

      While tools like Storybook and Docsaurus are effective for documenting components, it's essential to consider their usability and personal preference when choosing a documentation solution. The speaker found some existing documentation platforms lacking in practical usage examples and preferred a simpler approach using GitHub readmes. They also expressed a desire for a forms library with a more straightforward API due to the complexity of existing options. Overall, it's crucial to evaluate various documentation tools and find the one that best fits your specific needs and preferences.

    • Sharing open-source projects benefits creators and communityTransforming personal projects into libraries saves time, fosters collaboration, and increases impact for creators and users.

      Creating and sharing open-source projects can benefit both the creator and the wider community. By transforming a personal project into a public library, it becomes a collaborative effort that can grow and be useful for others. This not only saves time for the creator, but also allows others to easily use and build upon the project. The process of turning a local project into a library and linking it to another project can be simplified using tools like `npm link` or `yarn link`. This allows for local development and easy integration of the library into other projects without the need for publishing and installing new versions. This approach has been particularly useful for the speaker in the discussion, who has been able to create a personal "bootstrap" of React styled components and use them in their projects with minimal effort. By sharing these components as a library, they have also opened up the possibility for others to use and contribute to them. Overall, the process of creating and sharing open-source libraries can lead to time savings, increased collaboration, and the potential for wider impact. It's a win-win situation for both the creator and the community.

    • Easily Starting and Maintaining Open Source ProjectsStarting and maintaining an open source project is simpler than expected with the help of tools and libraries. Community involvement and sharing tips can lead to future releases and milestones.

      Starting and maintaining an open source project can be easier than expected with the help of existing tools and libraries. The speaker in this conversation expressed surprise at how simple it was to get started with Create React Library and even considered publishing a simple component called "dump" on NPM. They also mentioned the benefits of community involvement and potential future plans for more releases and milestones. The speaker also shared their experience with having a popular package called "wait" and joked about creating more packages with various verbs. For anyone interested in hosting or maintaining open source projects, they encouraged sharing tips and tricks on Syntax's Twitter account. Overall, the conversation emphasized the accessibility and ease of starting and contributing to open source projects.

    • Explore resources like Syntax.fm for deeper understandingExplore resources for deeper understanding, practice active listening, ask thoughtful questions, engage in the community.

      The importance of exploring various resources, such as syntax.fm, for deepening your understanding of programming concepts. This platform offers a wealth of knowledge through its full archive of shows. Additionally, consider subscribing to the podcast, leaving a review, or engaging in the community to enhance your learning experience. Another key takeaway is the value of practicing active listening and asking thoughtful questions to maximize the benefits of learning from others. By applying these skills, you can make meaningful connections with the material and foster a deeper appreciation for the subject matter.

    Recent Episodes from Syntax - Tasty Web Development Treats

    792: Perfect Sitemaps for SEO

    792: Perfect Sitemaps for SEO

    Scott and Wes break down the importance of sitemaps for SEO. They dive into the different file formats, essential fields, and common pitfalls to avoid when creating and submitting your sitemap to search engines.

    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

    791: LLRT The Serverless Runtime w/ Richard Davison

    791: LLRT The Serverless Runtime w/ Richard Davison

    Scott and Wes chat with Richard Davison from AWS about LLRT, a new runtime tailored specifically for Lambda. They dive into the benefits of using LLRT, challenges with JavaScript in serverless, and why Rust was chosen for its development.

    Show Notes

    Sick Picks

    Shameless Plugs

    • Richard: Javascript

    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

    790: State of JS 2023 Reactions

    790: State of JS 2023 Reactions

    Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year!

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    789: Do More With AI - LLMs With Big Token Counts

    789: Do More With AI - LLMs With Big Token Counts

    Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 Who is Paul Copplestone?
    • 01:17 Why ‘Supa’ and not ‘Super’?
    • 02:26 How did Supabase start?
    • 08:42 Simplicity in design.
    • 10:32 How do you take Supabase one step beyond the competition?
    • 12:35 How do you decide which libraries are officially supported vs community maintained?
      • 15:17 You don’t need a client library!
    • 16:48 Edge functions for server-side functionality.
    • 18:51 The genesis of pgvector.
    • 20:59 The product strategy.
    • 22:25 What’s the story behind Supabase’s awesome docs?
    • 25:26 The tech behind Supabase.
    • 35:46 How do you balance business goals with open source?
    • 42:01 What’s next for Supabase?
    • 44:15 Supabase’s GA + new features.
    • 48:24 Who runs the X account?
    • 50:39 Sick Picks + Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    787: You Should Try Vue.js

    787: You Should Try Vue.js

    Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

    Show Notes

    Vue.js: The Documentary.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    786: What Open Source license should you use?

    786: What Open Source license should you use?

    Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    785: What’s Next for NextJS with Tim Neutkens

    785: What’s Next for NextJS with Tim Neutkens

    Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 What does the React Compiler do?
    • 05:04 Will React Compiler help with managing Context?
    • 06:39 What happens if you’re not using a React Compiler?
    • 09:30 Will this work on any NextJS version?
    • 12:18 What are React Server Components?
    • 16:28 Shipping all the data inside an encapsulated component.
    • 20:17 Clearing up the frustrations around retrofitting server components.
    • 23:13 Handing migration.
    • 28:30 Is this just a fetch request with props?
    • 36:41 How closely are the NextJS and React teams working?
    • 41:53 Will we ever get Async Client Components?
    • 43:52 Async Local Storage API.
    • 45:31 Turbopack.
    • 57:51 Sick Picks & Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    784: Logging × Blogging × Testing × Freelancing

    784: Logging × Blogging × Testing × Freelancing

    In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    Related Episodes

    94: Taking the Contribution Plunge | DLN Xtend

    94: Taking the Contribution Plunge | DLN Xtend
    On this episode of DLN Xtend we discuss some open source projects to which we have personally contributed. Welcome to episode 94 of DLN Xtend. DLN Xtend is a community powered podcast. We take conversations from the DLN Community from places like the DLN Discourse Forums, Telegram group, Discord server and more. We also take topics from other shows around the network to give our takes. 00:00:00 Introduction 00:01:09 Co-op Classes 00:10:20 iPad Troubles 00:15:25 Multimedia Codec on openSUSE 00:19:28 Taking the Contribution Plunge 00:47:57 Game of the Week 00:52:35 Camera Corner Feedback 00:56:36 HP Down 01:02:41 Time to Vote 01:02:56 Close 01:03:43 Extra Matt - G.I. Joe: Operation Blackout - https://store.steampowered.com/app/1432220/GIJoeOperation_Blackout/ Wendy - Camera Corner - https://discourse.destinationlinux.network/t/wendys-camera-corner/4740 - Rapid Photo of DL - https://youtu.be/MleSPnyvugs?t=3273 Nate - openSUSE Multimedia Codecs Installation Video - https://youtu.be/7weBCq2r9Ec Community Powered Logo Contest - Vote Now! - https://discourse.destinationlinux.network/t/time-to-vote-linux-out-loud-logo/4800 Contact info Matt (Twitter @MattDLN) Wendy (Mastodon @WendyDLN) Nate (Website CubicleNate.com)

    29: Our Linux Stories | DLN Xtend

    29: Our Linux Stories | DLN Xtend
    On this week's episode of DLN Xtend we decide to get a little personal and tell our Linux story. Welcome to episode 29 of DLN Xtend. DLN Xtend is a community powered podcast. We take conversations from the DLN Community from places like the DLN Discourse Forums, Telegram group, Discord server and more. We also take topics from other shows around the network to give our takes. 00:00 Introduction 10:30 Our Linux Stories 31:54 Host Related Interest 44:31 Wrap Up Matt Distro- Elementary OS- elementary.io (looking forward to version 6) Game- Warframe (f2p)(gold rated proton) -https://store.steampowered.com/app/230410/Warframe/ Nate - SSD Upgrade for root on server Wendy- Darktable update Wrap Up Join us in the DLN Community: Discourse: https://discourse.destinationlinux.network/ Telegram: https://destinationlinux.org/telegram Mumble: https://destinationlinux.network/mumble/ Discord: https://destinationlinux.org/discord servers to continue the discussion! Contact info Matt (Twitter @MattDLN) Wendy (https://dlnxtend.com/wendy) (Instagram @LinuxandLifts) Nate (cubiclenate.com)

    Mitigating the Risks of an Acquisition with Michael Cheng

    Mitigating the Risks of an Acquisition with Michael Cheng

    Michael Cheng is an M&A Specialist who has had an extensive career that includes a former stint at Facebook as a Product Manager and his current role as a Lawyer. In this episode, Michael returns to the show to have an in-depth discussion around acquisitions. Michael shares his thoughts on why most acquisitions leave everyone involved feeling unsatisfied, and what he thinks should be done by both parties to mitigate the high failure rate of acquisitions. We also chat about the common grievances founders have after going through an acquisition, and the approach Michael recommends to mitigate those regrets. Michael also shares insights on why it’s harder on an open-source company to be successfully acquired if they are in between being a purely services-based or SaaS company. 


    Highlights:

    • I introduce returning guest Michael Cheng, whose illustrious career spans roles as a Product Manager for Facebook, a Lawyer, and an M&A Specialist (00:22)
    • Michael gives some background on his career history and why he’s pursued so many different roles (01:00)
    • Michael and I discuss the bird’s eye view of the steps it takes to get acquired (02:23)
    • Why most acquisitions fail (06:11) 
    • The common grievances that sellers have after going through an acquisition (08:11)
    • Michael’s thoughts on the likely outcomes for acquisitions of open-source companies (10:28)
    • What open-source founders can do to favor a successful outcome when approaching an acquisition (13:32)
    • How Michael thinks success should be measured when evaluating the outcome of an acquisition (17:56)
    • Why looking at the open-source community of companies being acquired is so crucial and often overlooked (22:13)
    • How the due diligence process is different for an open-source startup versus a SaaS company (25:20)
    • Michael describes how each core function in a company is affected by an acquisition (28:12)
    • The advice Michael would give to founders to help them make peace with the outcome of an acquisition (33:42)
    • How you can connect with Michael to learn more (37:02)


    Links:

    Michael

    Dodgeball Marketing Podcast #72: Anticipating SEO Problems Before They Happen

    Dodgeball Marketing Podcast #72: Anticipating SEO Problems Before They Happen

    In this episode, we talk about anticipating SEO problems before they happen.

    00:00:44 - Maintain Documentation of Hosting Locations
    00:03:17 - Plan Workflows of New Content, Site Updates, and Changes
    00:05:53 - Redesign Your Website Every Two Years for SEO Purposes
    00:09:48 - Plan for Rankings to Drop with a New Site Launch
    00:12:42 - Plan to Test Page Speed with New Add-Ons and Plug-Ins

    For more on the tools and tips in this episode, please visit:
    https://www.dodgeballseo.com/
    https://craftcms.com/