<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Manav Misra</title>
    <description>The latest articles on Forem by Manav Misra (@codefinity).</description>
    <link>https://forem.com/codefinity</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F302299%2F50d7173d-057e-4763-839e-02bdbab2d015.png</url>
      <title>Forem: Manav Misra</title>
      <link>https://forem.com/codefinity</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/codefinity"/>
    <language>en</language>
    <item>
      <title>MongoDB 1️⃣-Few/Many</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Thu, 09 Mar 2023 14:24:07 +0000</pubDate>
      <link>https://forem.com/codefinity/mongodb-1-fewmany-29ib</link>
      <guid>https://forem.com/codefinity/mongodb-1-fewmany-29ib</guid>
      <description>&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@evertonvila?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText"&gt;Everton Vila&lt;/a&gt; on &lt;a href="https://unsplash.com/photos/AsahNlC0VhQ?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I love 💙 MongoDB and 💯 reach for it before SQL and its limited paradigms whenever feasible. No, not saying NoSQL is 💯 &amp;gt; SQL, but a majority of the time unless all of the data truly is independent and only exists because of relationships, then it probably is. However, that's a convo for another day.&lt;/p&gt;

&lt;p&gt;A common challenge of using MongoDB (unlike in SQL) is the decision fatigue that comes with figuring out the relationships.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Not To Do
&lt;/h2&gt;

&lt;p&gt;One bad solution to this problem is to just use NoSQL like its SQL. &lt;/p&gt;

&lt;p&gt;Just put all the things into separate &lt;strong&gt;collections&lt;/strong&gt; (a la SQL &lt;strong&gt;tables&lt;/strong&gt;) and then use references (Mongoose &lt;code&gt;populate&lt;/code&gt; or native &lt;code&gt;$lookup&lt;/code&gt;) for all the things. In that case, just don't use NoSQL. 🙃&lt;/p&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;p&gt;I'm putting my references at the top because my post really does little more than regurgitate 🤮 and remix what's already been said by official MongoDB folks.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://www.mongodb.com/developer/products/mongodb/mongodb-schema-design-best-practices/"&gt;MongoDB Schema Design Best Practices&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://youtu.be/QAqK-R9HUhc"&gt;MongoDB Schema Design Best Practices (Video)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://youtu.be/8CZs-0it9r4"&gt;Schema Design Anti-Patterns - Part 1&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You should review these for full insights. I am just summarizing and remixing.&lt;/p&gt;

&lt;p&gt;This post just focuses on relationships, and not other considerations that are covered in the aforementioned resources ☝️.&lt;/p&gt;

&lt;h2&gt;
  
  
  TLDR
&lt;/h2&gt;

&lt;p&gt;Information that tends to be viewed/accessed together tends to stay together ergo favor embedding rather than references/&lt;code&gt;populate&lt;/code&gt;/&lt;code&gt;$lookup&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  1️⃣-Few
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;Prefer embedding for one-to-few relationships.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;What's 'few?' A couple of hundred.&lt;/p&gt;

&lt;p&gt;A user with a few different addresses and/or social media accounts. This is a 'one-to-few.'&lt;/p&gt;

&lt;p&gt;It's reasonable that I would click on the user and want to view &lt;strong&gt;all of the details together&lt;/strong&gt; at the same time.&lt;/p&gt;

&lt;p&gt;I don't need to create a separate view in my front-end just to view the addresses. Just show me the user and all of the details including addresses in one view. This means it's one read to get what I want. &lt;/p&gt;

&lt;p&gt;In addition, it's unlikely that I need to make frequent updates to a user's addresses. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Embed&lt;/strong&gt; an array of address subdocuments into the user documents. &lt;strong&gt;Do not&lt;/strong&gt; make it a &lt;strong&gt;reference&lt;/strong&gt; like you would in SQL.&lt;/p&gt;

&lt;p&gt;But......&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Needing to access an object on its own is a compelling reason not to embed it.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let's imagine 🚲s. An e-commerce site that sells products in addition to individual parts that make up said products.&lt;/p&gt;

&lt;p&gt;Chances are, I don't need to click a link to a product and at the same time see a comprehensive listing of all of the associated part details. Instead, I might have links on the web view where I can click on a part number and then see details for a specific part.&lt;/p&gt;

&lt;p&gt;It's also a reasonable use case that I might be shopping for 1️⃣ of the individual parts and &lt;strong&gt;not&lt;/strong&gt; a product. In other words, I need to view a product in isolation and also view a part in isolation. &lt;/p&gt;

&lt;p&gt;In this case, unlike a user's addresses, it makes sense for these &lt;strong&gt;document&lt;/strong&gt; types to be presented by themselves.&lt;/p&gt;

&lt;p&gt;Furthermore, prices change on both products and on individual parts.&lt;/p&gt;

&lt;p&gt;Keep them as separate &lt;strong&gt;collections&lt;/strong&gt; and &lt;strong&gt;do&lt;/strong&gt; use &lt;strong&gt;references.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1️⃣-Many
&lt;/h2&gt;

&lt;p&gt;What's 'many?' More than a 'few'. A few thousand. More specifically, an unbounded array. This is especially important due to Mongo DB's 16MB document limit.&lt;/p&gt;

&lt;p&gt;Just use &lt;strong&gt;references.&lt;/strong&gt; &lt;strong&gt;Don't&lt;/strong&gt; embed.&lt;/p&gt;




&lt;p&gt;There are also use cases for 1️⃣-Squillions mentioned in the aforementioned resources. Not covering that here.&lt;/p&gt;




&lt;h2&gt;
  
  
  Favor Embedding
&lt;/h2&gt;

&lt;p&gt;If not sure, then favor embedding. Unlike SQL, it's 🆗  to have duplicate data, if needed. &lt;/p&gt;

&lt;p&gt;This is only an issue if this embedded data needs to be updated frequently. Then, separate with references, but unless you are sure, then &lt;strong&gt;favor embedding.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;With the users and addresses scenario ☝️, a user doesn't frequently update their addresses (or do they? 👇🏾), social media, etc., so embed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Frequent Updates and/or Isolated Views? References!
&lt;/h2&gt;

&lt;p&gt;For 🚲  products/parts, prices of each might fluctuate somewhat frequently, and, as discussed previously, I probably don't need to look 👀 at all of that information together, anyway.  They would be separate views. Use references.&lt;/p&gt;

&lt;h2&gt;
  
  
  It All Depends 😵‍💫
&lt;/h2&gt;

&lt;p&gt;What post on development would be complete without these infamous words?&lt;/p&gt;

&lt;p&gt;Think all the way back ☝️ to our example regarding users and addresses. The assumption was that users were the focal point of the application.&lt;/p&gt;

&lt;p&gt;What if it's more about the addresses and who is living at what address instead? Say, for a housing complex with tenants.&lt;/p&gt;

&lt;p&gt;What we might do is flip it 🙃. Embed the users into their addresses. As folks move in and out, we'll just be updating that embedded users array for an address &lt;strong&gt;document.&lt;/strong&gt; 🆒.&lt;/p&gt;

&lt;p&gt;The assumption here is that most of the reads pertain to addresses and not users by themselves. We also assume that the users' individual data don't need to updated frequently.&lt;/p&gt;

&lt;p&gt;If this was not the case and there was equal reading/updating of both individual users and addresses, then we should use references, as long as we are sure that there is a need. When in doubt, &lt;strong&gt;favor embedding&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Authors Of &lt;del&gt;Pain&lt;/del&gt; 📚
&lt;/h3&gt;

&lt;p&gt;Consider authors and books data. What is the app about? Is it an authors directory listing for publishers? Then embed books into authors. An author is not going to have an unbounded array situation where they are cranking out books like Tweets. We are assuming a couple of hundred here. Not several thousand.&lt;/p&gt;

&lt;p&gt;Or, is it more about finding books for users/readers? Then, embed authors into books. Again, a book is not going to have an unbounded array of authors.&lt;/p&gt;

&lt;p&gt;What if it's both? What if the site serves both audiences? I might want to have a view showing all of the authors with the embedded 📚 and/or also also just browse books and not worry as much about the author.&lt;/p&gt;

&lt;p&gt;Then, we should use a &lt;strong&gt;reference&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Unsure? &lt;strong&gt;Embed!&lt;/strong&gt; In NoSQL data schemas are flexible and it's easier to retroactively fix a bad design decision later in the process. This is not so with SQL.&lt;/p&gt;

&lt;h3&gt;
  
  
  Hybrid Approaches
&lt;/h3&gt;

&lt;p&gt;Still, favor embedding if not sure.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.mongodb.com/basics/embedded-mongodb"&gt;Embedding MongoDB&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Use this in situations such as movies and reviews. Here, it doesn't make sense to access reviews outside of the context of a movie. I am also facing an unbounded array situation where a bunch of jerks online will all feel obligated to pour their thoughts out about some movie such that over time there are thousands and thousands of reviews. They're kind of like jerks that pour their thoughts out on MongoDB schemas! 😏&lt;/p&gt;

&lt;p&gt;When I click on a movie, do I want to read all of that 💩? No! But...I can use a hybrid approach where I &lt;strong&gt;embed&lt;/strong&gt; the last few reviews in the movie &lt;strong&gt;and&lt;/strong&gt; keep an array of references to all of the rest. Best of both worlds!&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;What you use together, store together.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>mongodb</category>
      <category>database</category>
    </item>
    <item>
      <title>Answer: TailwindCSS classes not able to be chosen with variables with React</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Fri, 19 Aug 2022 22:55:13 +0000</pubDate>
      <link>https://forem.com/codefinity/answer-tailwindcss-classes-not-able-to-be-chosen-with-variables-with-react-1gh0</link>
      <guid>https://forem.com/codefinity/answer-tailwindcss-classes-not-able-to-be-chosen-with-variables-with-react-1gh0</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;div class="ltag__stackexchange--header"&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
          &lt;a href="https://stackoverflow.com/questions/70748804/tailwindcss-classes-not-able-to-be-chosen-with-variables-with-react/73422944#73422944" rel="noopener noreferrer"&gt;
            &lt;span class="title-flare"&gt;answer&lt;/span&gt; re: TailwindCSS classes not able to be chosen with variables with React
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Aug 19 '22&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/70748804/tailwindcss-classes-not-able-to-be-chosen-with-variables-with-react/73422944#73422944" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          0
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;p&gt;I was facing issue when receiving a dynamic color prop that was going to be used as: &lt;code&gt;className={&lt;/code&gt;rounded px-4 py-2 text-white bg-${bgColor}-500&lt;code&gt;}&lt;/code&gt; in the component.&lt;/p&gt;
&lt;p&gt;It was not working properly essentially due to naivety of PurgeCSS.&lt;/p&gt;
&lt;p&gt;We have to use a &lt;code&gt;safelist&lt;/code&gt; option as per &lt;a href="https://tailwindcss.com/docs/content-configuration#using-regular-expressions" rel="nofollow noreferrer"&gt;the docs&lt;/a&gt;…&lt;/p&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    &lt;a href="https://stackoverflow.com/questions/70748804/tailwindcss-classes-not-able-to-be-chosen-with-variables-with-react/73422944#73422944" class="ltag__stackexchange--btn" rel="noopener noreferrer"&gt;Open Full Answer&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


</description>
    </item>
    <item>
      <title>Answer: What is the type of Map.Entry.comparingByValue().reversed()? [duplicate]</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Wed, 02 Feb 2022 01:10:15 +0000</pubDate>
      <link>https://forem.com/codefinity/answer-what-is-the-type-of-mapentrycomparingbyvaluereversed-duplicate-24n3</link>
      <guid>https://forem.com/codefinity/answer-what-is-the-type-of-mapentrycomparingbyvaluereversed-duplicate-24n3</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;div class="ltag__stackexchange--header"&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
          &lt;a href="https://stackoverflow.com/questions/53325650/what-is-the-type-of-map-entry-comparingbyvalue-reversed/53325730#53325730" rel="noopener noreferrer"&gt;
            &lt;span class="title-flare"&gt;answer&lt;/span&gt; re: What is the type of Map.Entry.comparingByValue().reversed()?
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Nov 15 '18&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/53325650/what-is-the-type-of-map-entry-comparingbyvalue-reversed/53325730#53325730" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          7
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;p&gt;When you shorten down&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;Comparator&amp;lt;Entry&amp;lt;String, Integer&amp;gt;&amp;gt; cmp = Entry.comparingByValue();
entries.sort(cmp.reversed());
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;to &lt;/p&gt;

&lt;pre&gt;&lt;code&gt;entries.sort(Entry.comparingByValue().reversed());
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;you remove the type information gleaned from &lt;code&gt;cmp&lt;/code&gt;’s declaration. The compiler still needs to know that information, so you need to add the generic typing to &lt;code&gt;Entry&lt;/code&gt;:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;entries.sort(Entry.&amp;lt;String, Integer&amp;gt;comparingByValue().reversed());
&lt;/code&gt;&lt;/pre&gt;

    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    &lt;a href="https://stackoverflow.com/questions/53325650/what-is-the-type-of-map-entry-comparingbyvalue-reversed/53325730#53325730" class="ltag__stackexchange--btn" rel="noopener noreferrer"&gt;Open Full Answer&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>java</category>
    </item>
    <item>
      <title>Answer: Is there any practical way to call `React.createContext()` within a component?</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Mon, 04 Oct 2021 12:40:44 +0000</pubDate>
      <link>https://forem.com/codefinity/answer-is-there-any-practical-way-to-call-react-createcontext-within-a-component-4o97</link>
      <guid>https://forem.com/codefinity/answer-is-there-any-practical-way-to-call-react-createcontext-within-a-component-4o97</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;div class="ltag__stackexchange--header"&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
          &lt;a href="https://stackoverflow.com/questions/59991375/is-there-any-practical-way-to-call-react-createcontext-within-a-component/59991680#59991680" rel="noopener noreferrer"&gt;
            &lt;span class="title-flare"&gt;answer&lt;/span&gt; re: Is there any practical way to call `React.createContext()` within a component?
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Jan 30 '20&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/59991375/is-there-any-practical-way-to-call-react-createcontext-within-a-component/59991680#59991680" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          4
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;p&gt;&lt;code&gt;React.createContext&lt;/code&gt; will return an object that holds 2 components:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Provider&lt;/li&gt;
&lt;li&gt;Consumer&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;These 2 components can share data, the &lt;code&gt;Consumer&lt;/code&gt; can "grab" the context data from the nearest &lt;code&gt;Provider&lt;/code&gt; up the tree (or use the &lt;code&gt;useContext&lt;/code&gt; hook instead of rendering a &lt;code&gt;Consumer&lt;/code&gt;).&lt;/p&gt;

&lt;p&gt;You should create the context object outside the…&lt;/p&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    &lt;a href="https://stackoverflow.com/questions/59991375/is-there-any-practical-way-to-call-react-createcontext-within-a-component/59991680#59991680" class="ltag__stackexchange--btn" rel="noopener noreferrer"&gt;Open Full Answer&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>react</category>
    </item>
    <item>
      <title>Answer: Import '.json' extension in ES6 Node.js throws an error</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Fri, 24 Sep 2021 12:57:49 +0000</pubDate>
      <link>https://forem.com/codefinity/answer-import-json-extension-in-es6-node-js-throws-an-error-1llg</link>
      <guid>https://forem.com/codefinity/answer-import-json-extension-in-es6-node-js-throws-an-error-1llg</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;div class="ltag__stackexchange--header"&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
          &lt;a href="https://stackoverflow.com/questions/60205891/import-json-extension-in-es6-node-js-throws-an-error/60206393#60206393" rel="noopener noreferrer"&gt;
            &lt;span class="title-flare"&gt;answer&lt;/span&gt; re: Import '.json' extension in ES6 Node.js throws an error
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Feb 13 '20&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/60205891/import-json-extension-in-es6-node-js-throws-an-error/60206393#60206393" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          136
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;p&gt;From Node.js version 17.5.0 onward, importing a JSON file is possible using &lt;a href="https://nodejs.org/api/esm.html#json-modules" rel="nofollow noreferrer"&gt;Import Assertions&lt;/a&gt;:&lt;/p&gt;
&lt;pre class="lang-js prettyprint-override"&gt;&lt;code&gt;import packageFile from "../../package.json" assert { type: "json" }
const {
    name,
    version
  } = packageFile;
&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;assert { type: "json" }&lt;/code&gt; is mandatory&lt;/li&gt;
&lt;li&gt;Destructuring such as &lt;code&gt;{ name, version }&lt;/code&gt; is not possible in the…&lt;/li&gt;
&lt;/ul&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    &lt;a href="https://stackoverflow.com/questions/60205891/import-json-extension-in-es6-node-js-throws-an-error/60206393#60206393" class="ltag__stackexchange--btn" rel="noopener noreferrer"&gt;Open Full Answer&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


</description>
    </item>
    <item>
      <title>Answer: How do I manage MongoDB connections in a Node.js web application?</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Fri, 27 Aug 2021 22:35:32 +0000</pubDate>
      <link>https://forem.com/codefinity/answer-how-do-i-manage-mongodb-connections-in-a-node-js-web-application-o51</link>
      <guid>https://forem.com/codefinity/answer-how-do-i-manage-mongodb-connections-in-a-node-js-web-application-o51</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;div class="ltag__stackexchange--header"&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
          &lt;a href="https://stackoverflow.com/questions/10656574/how-do-i-manage-mongodb-connections-in-a-node-js-web-application/14464750#14464750" rel="noopener noreferrer"&gt;
            &lt;span class="title-flare"&gt;answer&lt;/span&gt; re: How do I manage MongoDB connections in a Node.js web application?
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Jan 22 '13&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/10656574/how-do-i-manage-mongodb-connections-in-a-node-js-web-application/14464750#14464750" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          524
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;p&gt;&lt;a href="https://groups.google.com/d/msg/node-mongodb-native/mSGnnuG8C1o/Hiaqvdu1bWoJ" rel="noreferrer"&gt;The primary committer to node-mongodb-native says&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
  &lt;p&gt;You open do MongoClient.connect once when your app boots up and reuse
  the db object. It's not a singleton connection pool each .connect
  creates a new connection pool.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So, to answer your question directly, &lt;strong&gt;reuse the db object that results from &lt;a href="http://mongodb.github.io/node-mongodb-native/driver-articles/mongoclient.html#mongoclient-connect" rel="noreferrer"&gt;&lt;code&gt;MongoClient.connect()&lt;/code&gt;&lt;/a&gt;&lt;/strong&gt;…&lt;/p&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    &lt;a href="https://stackoverflow.com/questions/10656574/how-do-i-manage-mongodb-connections-in-a-node-js-web-application/14464750#14464750" class="ltag__stackexchange--btn" rel="noopener noreferrer"&gt;Open Full Answer&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


</description>
    </item>
    <item>
      <title>Answer: How To Use DISTINCT With a Join?</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Sun, 25 Jul 2021 06:19:09 +0000</pubDate>
      <link>https://forem.com/codefinity/answer-how-to-use-distinct-with-a-join-c37</link>
      <guid>https://forem.com/codefinity/answer-how-to-use-distinct-with-a-join-c37</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;div class="ltag__stackexchange--header"&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
          &lt;a href="https://stackoverflow.com/questions/68515673/how-to-use-distinct-with-a-join/68516021#68516021" rel="noopener noreferrer"&gt;
            &lt;span class="title-flare"&gt;answer&lt;/span&gt; re: How To Use DISTINCT With a Join?
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Jul 25 '21&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/68515673/how-to-use-distinct-with-a-join/68516021#68516021" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          1
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;pre&gt;&lt;code&gt;SELECT employees.emp_no, employees.first_name, employees.last_name, employees.gender
       MAX(salaries.salary) AS salary 
FROM employees 
JOIN salaries ON employees.emp_no = salaries.emp_no 
GROUP BY employees.emp_no 
ORDER BY salary DESC 
LIMIT 10;
&lt;/code&gt;&lt;/pre&gt;
&lt;pre class="lang-sh prettyprint-override"&gt;&lt;code&gt;+--------+------------+-----------+--------+--------+
| emp_no | first_name | last_name | gender | salary |
+--------+------------+-----------+--------+--------+
|  43624 | Tokuyasu   | Pesch     | M      | 158220 |
|&lt;/code&gt;&lt;/pre&gt;…
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    &lt;a href="https://stackoverflow.com/questions/68515673/how-to-use-distinct-with-a-join/68516021#68516021" class="ltag__stackexchange--btn" rel="noopener noreferrer"&gt;Open Full Answer&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>mysql</category>
    </item>
    <item>
      <title>How To Use DISTINCT With a Join?</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Sun, 25 Jul 2021 05:11:44 +0000</pubDate>
      <link>https://forem.com/codefinity/how-to-use-distinct-with-a-join-4ahj</link>
      <guid>https://forem.com/codefinity/how-to-use-distinct-with-a-join-4ahj</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;div class="ltag__stackexchange--header"&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
          &lt;a href="https://stackoverflow.com/questions/68515673/how-to-use-distinct-with-a-join" rel="noopener noreferrer"&gt;
            How To Use DISTINCT With a Join?
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Jul 25 '21&lt;/span&gt;
            &lt;span&gt;Comments: 8&lt;/span&gt;
            &lt;span&gt;Answers: 3&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/68515673/how-to-use-distinct-with-a-join" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          -1
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;p&gt;This is practice with the MySQL Employees DB. The diagram for it is &lt;a href="https://dev.mysql.com/doc/employee/en/sakila-structure.html" rel="nofollow noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;I want to know the top 10 &lt;code&gt;salaries.salary&lt;/code&gt;, by &lt;code&gt;employees.gender&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;I have tried:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;SELECT DISTINCT employees.emp_no, employees.first_name, employees.last_name, employees.gender, salaries.salary
FROM employees 
JOIN salaries ON employees.emp_no = salaries.emp_no 
ORDER BY salaries.salary DESC 
LIMIT&lt;/code&gt;&lt;/pre&gt;…
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    &lt;a href="https://stackoverflow.com/questions/68515673/how-to-use-distinct-with-a-join" class="ltag__stackexchange--btn" rel="noopener noreferrer"&gt;Open Full Question&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>help</category>
      <category>mysql</category>
    </item>
    <item>
      <title>Answer: TIC TAC TOE javascript</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Mon, 19 Jul 2021 00:02:31 +0000</pubDate>
      <link>https://forem.com/codefinity/answer-tic-tac-toe-javascript-1ohm</link>
      <guid>https://forem.com/codefinity/answer-tic-tac-toe-javascript-1ohm</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;div class="ltag__stackexchange--header"&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
          &lt;a href="https://stackoverflow.com/questions/33976338/tic-tac-toe-javascript/68433917#68433917" rel="noopener noreferrer"&gt;
            &lt;span class="title-flare"&gt;answer&lt;/span&gt; re: TIC TAC TOE javascript
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Jul 19 '21&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/33976338/tic-tac-toe-javascript/68433917#68433917" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          0
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;h1 id="this-answer-does-not-use-jquery-hdw5"&gt;This Answer Does not Use &lt;code&gt;jQuery&lt;/code&gt;
&lt;/h1&gt;
&lt;p&gt;Using an &lt;strong&gt;array&lt;/strong&gt; similar to what's shown in the above  👆🏾answer, we can just use a few different array &lt;strong&gt;methods:&lt;/strong&gt;&lt;/p&gt;
&lt;pre class="lang-js prettyprint-override"&gt;&lt;code&gt;const WINNING_INDICES = [
  [0, 1, 2]
  [0, 3, 6],
  [0, 4, 8],
  [1, 4, 7],
  [2, 5, 8],
  [2, 4, 6],
  [3, 4,&lt;/code&gt;&lt;/pre&gt;…
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    &lt;a href="https://stackoverflow.com/questions/33976338/tic-tac-toe-javascript/68433917#68433917" class="ltag__stackexchange--btn" rel="noopener noreferrer"&gt;Open Full Answer&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>javascript</category>
    </item>
    <item>
      <title>Answer: Does Jest support ES6 import/export?</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Thu, 08 Jul 2021 20:53:14 +0000</pubDate>
      <link>https://forem.com/codefinity/answer-does-jest-support-es6-import-export-37l6</link>
      <guid>https://forem.com/codefinity/answer-does-jest-support-es6-import-export-37l6</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;div class="ltag__stackexchange--header"&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
          &lt;a href="https://stackoverflow.com/questions/35756479/does-jest-support-es6-import-export/68308506#68308506" rel="noopener noreferrer"&gt;
            &lt;span class="title-flare"&gt;answer&lt;/span&gt; re: Does Jest support ES6 import/export?
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Jul  8 '21&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/35756479/does-jest-support-es6-import-export/68308506#68308506" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          8
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;p&gt;In &lt;code&gt;package.json&lt;/code&gt;, kindly set like this one: &lt;code&gt;"test": "node --experimental-vm-modules node_modules/.bin/jest"&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;Should be good!&lt;/p&gt;

    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    &lt;a href="https://stackoverflow.com/questions/35756479/does-jest-support-es6-import-export/68308506#68308506" class="ltag__stackexchange--btn" rel="noopener noreferrer"&gt;Open Full Answer&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>testing</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Why is the Keyword `as` Needed When Narrowing TypeScript Interfaces With an `if`?</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Sat, 26 Jun 2021 03:33:51 +0000</pubDate>
      <link>https://forem.com/codefinity/why-is-the-keyword-as-needed-when-narrowing-typescript-interfaces-with-an-if-122n</link>
      <guid>https://forem.com/codefinity/why-is-the-keyword-as-needed-when-narrowing-typescript-interfaces-with-an-if-122n</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;div class="ltag__stackexchange--header"&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
          &lt;a href="https://stackoverflow.com/questions/68138986/why-is-the-keyword-as-needed-when-narrowing-typescript-interfaces-with-an-if" rel="noopener noreferrer"&gt;
            Why is the Keyword `as` Needed When Narrowing TypeScript Interfaces With an `if`?
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Jun 26 '21&lt;/span&gt;
            &lt;span&gt;Comments: 1&lt;/span&gt;
            &lt;span&gt;Answers: 2&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/68138986/why-is-the-keyword-as-needed-when-narrowing-typescript-interfaces-with-an-if" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          1
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;p&gt;Given some &lt;strong&gt;interfaces&lt;/strong&gt; for &lt;code&gt;Circle&lt;/code&gt; and &lt;code&gt;Square&lt;/code&gt; as follows:&lt;/p&gt;
&lt;pre class="lang-js prettyprint-override"&gt;&lt;code&gt;export default interface Circle {
  radius: number
}
&lt;/code&gt;&lt;/pre&gt;
&lt;pre class="lang-js prettyprint-override"&gt;&lt;code&gt;export default interface Square {
  sideLength: number;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;I can use &lt;code&gt;as&lt;/code&gt; to calculate the area properly:&lt;/p&gt;
&lt;pre class="lang-js prettyprint-override"&gt;&lt;code&gt;function getArea(shape: Circle | Square) {
  if ((shape as Circle).radius) {
    return Math.PI * (shape as&lt;/code&gt;&lt;/pre&gt;…
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    &lt;a href="https://stackoverflow.com/questions/68138986/why-is-the-keyword-as-needed-when-narrowing-typescript-interfaces-with-an-if" class="ltag__stackexchange--btn" rel="noopener noreferrer"&gt;Open Full Question&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>help</category>
      <category>typescript</category>
    </item>
    <item>
      <title>How Can I Set Up Absolute Imports in `jsconfig.json` for Create React App?</title>
      <dc:creator>Manav Misra</dc:creator>
      <pubDate>Fri, 18 Jun 2021 16:24:38 +0000</pubDate>
      <link>https://forem.com/codefinity/how-can-i-set-up-absolute-imports-in-jsconfig-json-for-create-react-app-1l01</link>
      <guid>https://forem.com/codefinity/how-can-i-set-up-absolute-imports-in-jsconfig-json-for-create-react-app-1l01</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;h1&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
            &lt;a href="https://stackoverflow.com/questions/68037786/how-can-i-set-up-absolute-imports-in-jsconfig-json-for-create-react-app" rel="noopener noreferrer"&gt;
               How Can I Set Up Absolute Imports in `jsconfig.json` for Create React App?
            &lt;/a&gt;
        &lt;/h1&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Jun 18 '21&lt;/span&gt;
            &lt;span&gt;Comments: 1&lt;/span&gt;
            &lt;span&gt;Answers: 0&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/68037786/how-can-i-set-up-absolute-imports-in-jsconfig-json-for-create-react-app" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          0
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;p&gt;Given this setup
&lt;a href="https://i.stack.imgur.com/jPQDR.png" rel="nofollow noreferrer"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Txy_3oP5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.stack.imgur.com/jPQDR.png" alt="Project directory structure"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;I am trying to do: &lt;code&gt;import Loader from "base/Loader";&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;This is with Create React App, and there is a &lt;code&gt;jsconfig.json&lt;/code&gt; like so:&lt;/p&gt;
&lt;pre class="lang-json prettyprint-override"&gt;&lt;code&gt;{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src", "src/components"]
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Still, the &lt;strong&gt;import&lt;/strong&gt; fails. It only works if I say, &lt;code&gt;import Loader from "components/base/Loader"&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;…&lt;/p&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    
      &lt;a href="https://stackoverflow.com/questions/68037786/how-can-i-set-up-absolute-imports-in-jsconfig-json-for-create-react-app" rel="noopener noreferrer"&gt;Open Full Question&lt;/a&gt;
    
  &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>help</category>
    </item>
  </channel>
</rss>
