<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>rishabhmhjn | Blog</title><description>Startups, Tech, SAAS, Amritsar – Tokyo – Prague – Singapore, Social Media, Tourism</description><link>https://rishabhmhjn.com/</link><language>en</language><item><title>AI Has Democratized the How</title><link>https://rishabhmhjn.com/blog/ai-has-democratized-the-how/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/ai-has-democratized-the-how/</guid><pubDate>Mon, 06 Jul 2026 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;For the longest time, business work was gated by access to the right playbook.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;How do we hire and onboard better?&lt;/li&gt;
&lt;li&gt;How do we prepare for compliance?&lt;/li&gt;
&lt;li&gt;How do we improve sales follow-ups?&lt;/li&gt;
&lt;li&gt;How do we standardize daily operations?&lt;/li&gt;
&lt;li&gt;How do we set up useful software or automation?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These were not impossible questions. But they were expensive questions. They needed senior people, consultants, networks, trial and error, or patience to turn scattered documentation into an answer.&lt;/p&gt;
&lt;p&gt;AI has cut that path short.&lt;/p&gt;
&lt;p&gt;The HOW is mostly sorted now.&lt;/p&gt;
&lt;p&gt;The manual is within reach, even far away from traditional centers of capital, hiring, and mentorship.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;the-excuse-is-changing&quot;&gt;The excuse is changing&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;For years, “I do not have the right resources” was a believable explanation. Sometimes it was true.&lt;/p&gt;
&lt;p&gt;AI has changed the meaning of that excuse.&lt;/p&gt;
&lt;p&gt;If someone was genuinely blocked because they did not know how to write a process, set up a workflow, or train staff, AI should help.&lt;/p&gt;
&lt;p&gt;If they still feel stuck, the problem may not be resources anymore.&lt;/p&gt;
&lt;p&gt;Maybe the next missing piece is clarity.&lt;/p&gt;
&lt;p&gt;Maybe they need to define the business, choose the customer, take the risk, and carry the responsibility.&lt;/p&gt;
&lt;p&gt;AI is exposing the difference between people blocked by access and people ready to act once access improves.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;the-how-is-not-the-job&quot;&gt;The how is not the job&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;AI can suggest:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;an HR pipeline&lt;/li&gt;
&lt;li&gt;a compliance checklist&lt;/li&gt;
&lt;li&gt;a sales follow-up process&lt;/li&gt;
&lt;li&gt;an inventory workflow&lt;/li&gt;
&lt;li&gt;a customer support playbook&lt;/li&gt;
&lt;li&gt;a software setup&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;But it does not know your customers, constraints, standards, economics, or appetite for risk.&lt;/p&gt;
&lt;p&gt;It can explain how other companies solve a problem. It cannot decide whether that answer fits yours.&lt;/p&gt;
&lt;p&gt;The scarce skill is no longer just knowing the procedure. It is knowing the structure in which the procedure must be applied.&lt;/p&gt;
&lt;p&gt;That is where experienced people become more important, not less. They can look at an AI-generated answer and say: this is too complex, too risky, good enough, or solving the wrong problem.&lt;/p&gt;
&lt;p&gt;Execution has become more abundant. Decision quality has not.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;the-real-advantage&quot;&gt;The real advantage&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;When the how becomes widely available, the advantage shifts toward what and why.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;What customer is worth serving?&lt;/li&gt;
&lt;li&gt;What problem is painful enough?&lt;/li&gt;
&lt;li&gt;What should be standardized?&lt;/li&gt;
&lt;li&gt;What should be ignored?&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;AI can shorten the path, but it does not choose the destination.&lt;/p&gt;
&lt;p&gt;This is a positive shift. Too many capable people did not have access to the path. AI gives them leverage, whether they run a shop, factory, agency, SaaS company, or local service business.&lt;/p&gt;
&lt;p&gt;It also raises the bar for honesty.&lt;/p&gt;
&lt;p&gt;If the manual is no longer hidden, the better question is: what do you want to build with it?&lt;/p&gt;
&lt;p&gt;The gate is open now. More people can walk through it.&lt;/p&gt;
</content:encoded><category>AI</category><category>SAAS</category></item><item><title>Astro Blog with Nx Monorepo</title><link>https://rishabhmhjn.com/blog/astro-blog-nx/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/astro-blog-nx/</guid><pubDate>Sun, 20 Jul 2025 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;I had been thinking about migrating my WordPress blog into something more developer-oriented. WordPress is great — battle-tested, popular, and has a plugin for everything — but it’s not built for people like me who want full control over their content and workflow.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;-my-wishlist&quot;&gt;✅ My Wishlist&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;What I really wanted was a blog system that would let me:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;✍️ Write posts in Markdown&lt;/li&gt;
&lt;li&gt;🧳 Work comfortably from my tablet (via GitHub Mobile or Codespaces)&lt;/li&gt;
&lt;li&gt;⚙️ Build into static pages (fast + SEO-friendly)&lt;/li&gt;
&lt;li&gt;📚 Display posts in reverse chronological order like a traditional blog&lt;/li&gt;
&lt;li&gt;🚀 Deploy via CI (GitHub Actions) and host on GitHub Pages or similar tooling&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;div&gt;&lt;h2 id=&quot;-enter-astro--starlight&quot;&gt;🚧 Enter Astro + Starlight&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;After evaluating a few static site generators, I chose &lt;a href=&quot;https://astro.build/&quot;&gt;&lt;strong&gt;Astro&lt;/strong&gt;&lt;/a&gt;, using the &lt;a href=&quot;https://github.com/HiDeoo/starlight-theme-rapide&quot;&gt;&lt;strong&gt;Starlight Rapide theme&lt;/strong&gt;&lt;/a&gt;. The reasons were simple:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Fast static builds&lt;/li&gt;
&lt;li&gt;Clean, minimal layout&lt;/li&gt;
&lt;li&gt;Native Markdown support&lt;/li&gt;
&lt;li&gt;Easy to host and maintain&lt;/li&gt;
&lt;li&gt;Content collections for typed Markdown posts&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;div&gt;&lt;h2 id=&quot;-keeping-it-inside-a-monorepo&quot;&gt;🧱 Keeping It Inside a Monorepo&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;I already had an Nx workspace (&lt;code dir=&quot;auto&quot;&gt;rishabhmhjn-srcs&lt;/code&gt;) where I plan to keep all my projects. I added the Astro blog as an app inside &lt;code dir=&quot;auto&quot;&gt;apps/rishabhmhjn.com&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Each blog post lives under &lt;code dir=&quot;auto&quot;&gt;src/content/blog/&lt;/code&gt;, with frontmatter like:&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;title&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;span&gt;My First Post&lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;pubDate&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;2025-07-15&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;description&lt;/span&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;span&gt;This is the first post on my new Astro blog!&lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;tags&lt;/span&gt;&lt;span&gt;: [&lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;span&gt;astro&lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;span&gt;, &lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;span&gt;starter&lt;/span&gt;&lt;span&gt;&quot;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;---&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;This setup makes it super easy to write and commit from anywhere — even on mobile.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;-cicd-with-github-actions--pages&quot;&gt;🚀 CI/CD with GitHub Actions + Pages&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;I created a GitHub Actions workflow that builds the Astro site and deploys to GitHub Pages. The steps are simple:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Install dependencies&lt;/li&gt;
&lt;li&gt;Run astro build (wrapped in Nx)&lt;/li&gt;
&lt;li&gt;Deploy &lt;code dir=&quot;auto&quot;&gt;dist/projects/rishabhmhjn.com&lt;/code&gt; using &lt;code dir=&quot;auto&quot;&gt;peaceiris/actions-gh-pages&lt;/code&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;More at &lt;code dir=&quot;auto&quot;&gt;.github/workflows/rishabhmhjn.com.yml&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;I verified my custom subdomain on GitHub by:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Adding a TXT record (_github-challenge-&lt;username&gt;)&lt;/username&gt;&lt;/li&gt;
&lt;li&gt;Setting up a CNAME DNS record pointing astro.rishabhmhjn.com to rishabhmhjn.github.io&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;It now lives at &lt;a href=&quot;https://astro.rishabhmhjn.com&quot;&gt;https://astro.rishabhmhjn.com&lt;/a&gt; 🚀&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;-actual-part-of-writing&quot;&gt;✍🏼 Actual part of writing&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;I wanted to be able to perform some level of coding on my tablet and explore tools like codespaces. I am actually writing this blog on my tablet!&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Codespaces on tablet&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;2560&quot; height=&quot;1600&quot; src=&quot;https://rishabhmhjn.com/_astro/2025-07-20-codespaces-on-tablet.BiXTAG-1_ZjYjBx.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
</content:encoded><category>astro</category></item><item><title>#100daysofcode Day 5: Shared styles in NX #Angular libraries</title><link>https://rishabhmhjn.com/blog/100daysofcode-day-5-shared-styles-in-nx-angular-libraries/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/100daysofcode-day-5-shared-styles-in-nx-angular-libraries/</guid><pubDate>Tue, 14 Mar 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;With another missed day in my challenge, I will work on packaging styles with a library and use them in our newly created Angular app.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;angular-app-styles&quot;&gt;Angular app styles&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;It is easier to serve or build styles inside your app with the default configurations. Once you scaffold an application, the styles are available at &lt;code dir=&quot;auto&quot;&gt;{projectRoot}/src/styles.scss&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;To test it out, let us serve our application.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ nx serve linkinbio&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Now, open &lt;a href=&quot;http://localhost:4200/&quot;&gt;http://localhost:4200/&lt;/a&gt; and you can see your app component.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-14-at-16.53.57&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;306&quot; height=&quot;124&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-14-100daysofcode-day-5-shared-styles-in-nx-angular-libraries-01.WVH9wJhB_Z1Qh576.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;If we make a small change to our styles, we can see that in real-time in our app.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;styles.scss&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;/* You can add global styles to this file, and also import other style files */&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;p {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;font-weight: bold;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-14-at-16.56.07&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;302&quot; height=&quot;120&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-14-100daysofcode-day-5-shared-styles-in-nx-angular-libraries-02.DnaL7Wnl_1hMLh5.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;Great. So our styling works.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;the-problem&quot;&gt;The problem&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;This is good for a self-contained application.&lt;/p&gt;
&lt;p&gt;However, in the case of large applications, there will be a requirement for sharing styles across your libraries and including them as part of the main application build process.&lt;/p&gt;
&lt;p&gt;Creating a shared UI library containing variables, mixins, and shared component-specific styles is helpful.&lt;/p&gt;
&lt;p&gt;So we will learn how to include styles from an NX library into our application.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;solution--sharing-styles-across-nx-libraries&quot;&gt;Solution – sharing styles across NX libraries&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;create-styles&quot;&gt;Create styles&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Let’s create some styles in our ui-shared library at &lt;code dir=&quot;auto&quot;&gt;libs/linkinbio/ui/shared/src/styles/linkinbio-ui-shared&lt;/code&gt;&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;libs/linkinbio/ui/shared/src/styles/linkinbio-ui-shared/_variables.scss&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$color-red: red;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;libs/linkinbio/ui/shared/src/styles/linkinbio-ui-shared/theme.scss&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;p {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;font-weight: bold;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;update-appprojectjson&quot;&gt;Update app/project.json&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Now, let’s add the instructions to tell angular compiler to set &lt;code dir=&quot;auto&quot;&gt;libs/linkinbio/ui/shared/src/styles&lt;/code&gt; as one of the paths to look for for our new styles.&lt;/p&gt;
&lt;p&gt;To do that, we will add the following &lt;code dir=&quot;auto&quot;&gt;stylePreprocessorOptions&lt;/code&gt; property to &lt;code dir=&quot;auto&quot;&gt;projects/linkinbio/project.json&lt;/code&gt; file.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;styles&quot;: [&quot;projects/linkinbio/src/styles.scss&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;stylePreprocessorOptions&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;          &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;includePaths&quot;: [&quot;libs/linkinbio/ui/shared/src/styles&quot;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;scripts&quot;: []&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;import-library-styles&quot;&gt;Import library styles&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Now, you can easily import the styles into your app:&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;styles.scss&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;/* You can add global styles to this file, and also import other style files */&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;@use &apos;linkinbio-ui-shared/variables&apos; as ui-shared-variables;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;@import &apos;linkinbio-ui-shared/theme&apos;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;// @import &apos;@rishabhmhjn/linkinbio/ui/shared/linkinbio-ui-shared&apos;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;p {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;font-weight: bold;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;color: ui-shared-variables.$color-red;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;You can see your styles applied in the browser.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-14-at-17.28.17&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;340&quot; height=&quot;127&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-14-100daysofcode-day-5-shared-styles-in-nx-angular-libraries-03.DNzH9pxV_lCLEi.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;It is important to note that I have added a distinct folder, &lt;code dir=&quot;auto&quot;&gt;linkinbio-ui-shared&lt;/code&gt;, inside the library styles folder. This is because, in the future, it is likely I will need to import styles from other libraries too.&lt;/p&gt;
&lt;p&gt;To ensure the names of the shared styles do not collide with one another, I have chosen to namespace them by putting them in their own unique project name.&lt;/p&gt;
&lt;p&gt;That’s it! Happy coding 🙂&lt;/p&gt;
</content:encoded><category>100daysofcode</category><category>Angular</category><category>Nx</category></item><item><title>#100daysofcode Day 4: Break in the challenge &amp; Ng Scaffolding</title><link>https://rishabhmhjn.com/blog/100daysofcode-day-4-break-in-the-challenge-ng-scaffolding/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/100daysofcode-day-4-break-in-the-challenge-ng-scaffolding/</guid><pubDate>Mon, 13 Mar 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;I had to take a break! I was working from early in the morning and was finishing Statusbrew tasks until late at night before I could get back home to figure out what to write about the blog and then code/screenshot/document and write about it.&lt;/p&gt;
&lt;p&gt;I was up until 2 am consistently for the whole week. I was drained a lot on Wednesday, thinking I would write the blog upon waking up, and, predictably, that didn’t happen.&lt;/p&gt;
&lt;p&gt;I would only delay this process for a while, but it won’t be canceled. I want to write daily. I want to build up this habit and do this consistently. A cliché but giving up isn’t an option.&lt;/p&gt;
&lt;p&gt;I have to mention that writing regularly is one of the things I want to do, me prioritizing Statusbrew tasks, which is for sure would be my priority, is another way to ensure I get done with the complicated Statusbrew tasks so that I can come back to writing as quickly as possible with a more bandwidth.&lt;/p&gt;
&lt;p&gt;Another goal of mine is to return to Sales and Marketing by the end of this month. Looking at the current pace of tasks, it seems unlikely I would be done by the end of the month, but the deviation would probably be for about a week. This doesn’t mean that the Statusbrew tasks will entirely disappear. It just means that I would focus on mentoring &amp;#x26; quality control in development while spending significantly more time on Sales.&lt;/p&gt;
&lt;p&gt;Getting back to the challenge now. Day 4 it is.&lt;/p&gt;
&lt;p&gt;Today, I want to set up an Angular application inside our nx monorepo.&lt;/p&gt;
&lt;p&gt;My goal in the next few days is to learn the following concepts/frameworks and combine them to build the application:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;SSR – Server-Side Rendering (
Angular
)&lt;/li&gt;
&lt;li&gt;PWA – Progressive Web Application (
Angular
)&lt;/li&gt;
&lt;li&gt;NestJS&lt;/li&gt;
&lt;li&gt;Storybook
(with
Compodoc
)&lt;/li&gt;
&lt;li&gt;Testing (
Angular
&amp;#x26;
NestJS
)&lt;/li&gt;
&lt;li&gt;Railway&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;While considering the type of application to cover the above, apart from the de-facto todos app, I want to build something that can align with what we can use at Statusbrew. There is one app idea I think may require integration across all the above – Link In Bio.&lt;/p&gt;
&lt;p&gt;It has been asked by a few of our clients already. Quite simply, some brands like to share a page on their bio containing some of the most common links to their brand web pages, social profiles, news articles, and dynamic content, such as links to the latest blog posts, giveaways, etc.&lt;/p&gt;
&lt;p&gt;There are some great apps already out there. e.g. &lt;a href=&quot;https://lnk.bio/&quot;&gt;https://lnk.bio/&lt;/a&gt; is simple yet filled with compelling features like sync with the latest YouTube videos, and stats.&lt;/p&gt;
&lt;p&gt;I plan to eventually have similar features more aligned with our clients’ preferences. Thinking about it in detail feels like a year-long project, but we would start with the basics here and add more features as we move along.&lt;/p&gt;
&lt;p&gt;Today, we will bootstrap 2 angular entities, a library, and an app, and use the incremental build feature to build both.&lt;/p&gt;
&lt;p&gt;We will start by installing &lt;a href=&quot;https://nx.dev/packages/angular&quot;&gt;nx angular&lt;/a&gt; dependency on our project. I initially tried using the console with the following commands but it seems the workflow to initialize the app afterward is not well laid out.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ yarn add -D @nrwl/angular @angular-devkit/core @angular-devkit/schematics&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;I had to use the NX Console extension to add the dependency properly. You can find more information &lt;a href=&quot;https://nx.dev/recipes/nx-console/console-add-dependency-command&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Let’s just go ahead and add the nx angular depenency to our project.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-13-at-00.48.17&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1260&quot; height=&quot;238&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-13-100daysofcode-day-4-break-in-the-challenge-ng-scaffolding-01.C0_uGcBX_253Li9.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-13-at-00.48.38&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1272&quot; height=&quot;378&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-13-100daysofcode-day-4-break-in-the-challenge-ng-scaffolding-02.BI924WPr_1Brrli.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;Let it go through the process and modify the repository. You will see changes to package.json, &lt;code dir=&quot;auto&quot;&gt;nx.json&lt;/code&gt;, &lt;code dir=&quot;auto&quot;&gt;.gitignore&lt;/code&gt;, and &lt;code dir=&quot;auto&quot;&gt;.vscode/extenstions.json&lt;/code&gt;. You will also find some jest.* files added.&lt;/p&gt;
&lt;p&gt;Here are the commands that it seems to have run in the process&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ yarn add -D -W  @nrwl/angular&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ yarn nx g @nrwl/angular:init  --interactive=false&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;We will make some changes to the nx.json file related to generator configs that would look like this&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;generators&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;@nrwl/angular:application&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;style&quot;: &quot;scss&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;linter&quot;: &quot;eslint&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;unitTestRunner&quot;: &quot;jest&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;e2eTestRunner&quot;: &quot;cypress&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;strict&quot;: true,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;prefix&quot;: &quot;rm&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;standalone&quot;: true&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;@nrwl/angular:library&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;linter&quot;: &quot;eslint&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;unitTestRunner&quot;: &quot;jest&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;strict&quot;: true,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;prefix&quot;: &quot;rm&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;style&quot;: &quot;scss&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;changeDetection&quot;: &quot;OnPush&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;standalone&quot;: true&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;@nrwl/angular:component&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;style&quot;: &quot;scss&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;prefix&quot;: &quot;rm&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;changeDetection&quot;: &quot;OnPush&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;standalone&quot;: true&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Now, we will generate a ui library for &lt;code dir=&quot;auto&quot;&gt;linkinbio&lt;/code&gt;. I would be using the UI to create the lib, which would use the following command.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ yarn nx generate @nrwl/angular:library shared \&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--buildable \&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--directory=linkinbio/ui \&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--no-interactive&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Our new library is now available at &lt;code dir=&quot;auto&quot;&gt;/libs/linkinbio/ui/shared&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;You can now quickly build the library using the nx-console, project.json or with the following command&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ nx build linkinbio-ui-shared&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Now, let’s quickly create a new application. Again, I will use nx-console to initialize the app, which eventually uses the following command.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ nx generate @nrwl/angular:application linkinbio&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;I learned that we must manually add the missing &lt;code dir=&quot;auto&quot;&gt;@angular-eslint/eslint-plugin&lt;/code&gt; since it is not added after scaffolding. Let’s add that package too.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ yarn add -D @angular-eslint/eslint-plugin&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Now, we can launch the newly created app&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ nx serve linkinbio&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Let’s make the following changes to the app&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Add
imports: [LinkinbioUiSharedComponent]
to
app.component.ts&lt;/li&gt;
&lt;li&gt;Update the content of
app.component.html
to just [
]&lt;/li&gt;
&lt;li&gt;Remove
nx-welcome.component.ts&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;You can see our app successfully imported a component from a library project.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-13-at-01.26.07&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;826&quot; height=&quot;280&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-13-100daysofcode-day-4-break-in-the-challenge-ng-scaffolding-03.C2qIljcQ_2pAsbo.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;Let us build the app to ensure proper library imports as well as incremental builds.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ nx build linkinbio&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;   &lt;/span&gt;&lt;/span&gt;&lt;span&gt;✔    1/1 dependent project tasks succeeded [0 read from cache]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;   &lt;/span&gt;&lt;/span&gt;&lt;span&gt;Hint: you can run the command with --verbose to see the full dependent project outputs&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;———————————————————————————————————————————————————————————————————————————————————————————————————————————————————&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&gt; nx run linkinbio:build:production&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;✔ Browser application bundle generation complete.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;✔ Copying assets complete.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;✔ Index html generation complete.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;main.068e18dfd9616db8.js      | main          |  82.28 kB |                25.05 kB&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;polyfills.a0e551d9f0aaa365.js | polyfills     |  33.09 kB |                10.65 kB&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;runtime.dfd26405657e5395.js   | runtime       | 896 bytes |               509 bytes&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;                              &lt;/span&gt;&lt;/span&gt;&lt;span&gt;| Initial Total | 116.24 kB |                36.19 kB&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;Build at: 2023-03-13T00:27:27.824Z - Hash: 0e4718ad16d04a5c - Time: 5027ms&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;———————————————————————————————————————————————————————————————————————————————————————————————————————————————————&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&gt;  NX   Successfully ran target build for project linkinbio and 1 task it depends on (8s)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;You will see that the initial instructions are to build the library before building the app. In the end, the app builds successfully&lt;/p&gt;
&lt;p&gt;This will be it for tonight. We will work with Angular Material and Storybook tomorrow to create UI components.&lt;/p&gt;
&lt;p&gt;See you tomorrow.&lt;/p&gt;
</content:encoded><category>100daysofcode</category><category>Angular</category><category>Nx</category></item><item><title>#100daysofcode Day 3: Shared eslint-plugin</title><link>https://rishabhmhjn.com/blog/100daysofcode-day-3-shared-eslint-plugin/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/100daysofcode-day-3-shared-eslint-plugin/</guid><pubDate>Wed, 08 Mar 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Today’s challenge will be a quick one.&lt;/p&gt;
&lt;p&gt;I would create and use a custom eslint-plugin in our upcoming libraries &amp;#x26; projects. Our goal with the eslint-plugin library will be to share reusable eslint configurations.&lt;/p&gt;
&lt;p&gt;Before we generate any new library, I want to change the configuration of nx to add new libraries to the &lt;code dir=&quot;auto&quot;&gt;/libs&lt;/code&gt; folder and new projects to the &lt;code dir=&quot;auto&quot;&gt;/projects&lt;/code&gt; folder. Update the &lt;code dir=&quot;auto&quot;&gt;nx.json&lt;/code&gt; file to reflect the following:&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;workspaceLayout&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;appsDir&quot;: &quot;projects&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;libsDir&quot;: &quot;libs&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Next, we will generate 2 ui libraries by running the following commands.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ nx generate @nrwl/js:library lib1 --unitTestRunner=none --bundler=esbuild --directory=ui --no-interactive&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ nx generate @nrwl/js:library lib2 --unitTestRunner=none --bundler=esbuild --directory=ui --no-interactive&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Alternatively, we can generate the new libraries using the nx-console extension gui.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-07-at-23.56.08&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;682&quot; height=&quot;408&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-08-100daysofcode-day-3-shared-eslint-plugin-01.Byi4rrRW_OMfar.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;Let’s learn about some of the newly generated library files.&lt;/p&gt;
&lt;div&gt;&lt;h4 id=&quot;tsconfigbasejson&quot;&gt;&lt;code dir=&quot;auto&quot;&gt;tsconfig.base.json&lt;/code&gt;&lt;/h4&gt;&lt;/div&gt;
&lt;p&gt;This will be the root Typescript configuration for our project. All future libraries or projects will be extending this configuration.
The important section to note is &lt;code dir=&quot;auto&quot;&gt;paths&lt;/code&gt; where we can see our newly added library mentioned.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;paths&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;@rishabhmhjn/ui/lib1&quot;: [&quot;libs/ui/lib1/src/index.ts&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;@rishabhmhjn/ui/lib2&quot;: [&quot;libs/ui/lib2/src/index.ts&quot;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;...&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;div&gt;&lt;h4 id=&quot;libsuilib12&quot;&gt;libs/ui/lib{1,2}&lt;/h4&gt;&lt;/div&gt;
&lt;div&gt;&lt;h5 id=&quot;projectjson&quot;&gt;project.json&lt;/h5&gt;&lt;/div&gt;
&lt;p&gt;This critical file contains the configurations and commands we would like to run via our nx console.&lt;/p&gt;
&lt;p&gt;If you have installed the nx-console extension, you will see small links to run the commands (or targets) directly from the project.json file.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-08-at-00.49.22&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;754&quot; height=&quot;220&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-08-100daysofcode-day-3-shared-eslint-plugin-02.BWsvbdsg_Z2rc03Q.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;We can go ahead and run the build command directly from the project.json file or type the following command in the console.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ nx run ui-lib2:build&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;The library will be compiled to the &lt;code dir=&quot;auto&quot;&gt;/dist&lt;/code&gt; folder.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;eslint&quot;&gt;&lt;code dir=&quot;auto&quot;&gt;Eslint&lt;/code&gt;&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;There will be 3 files related to eslint that are added to our repository.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;/.eslintrc.json&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;/.eslintignore&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;/libs/ui-lib{1,2}/.eslintrc.json&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;There are 2 essential things to note about the root &lt;code dir=&quot;auto&quot;&gt;.eslintrc.json&lt;/code&gt;.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;nx’ eslint-rule:
@nrwl/nx/enforce-module-boundaries
This handy rule triggers warnings if we have circular dependencies in our libraries or projects. You can read more about the rule
here&lt;/li&gt;
&lt;li&gt;By default, the whole repository is marked as ignored with
“ignorePatterns”: [“**/*”]
. Every individual library or project does the opposite and marks themselves as not ignored in their respective
.eslintrc.json
configurations&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Besides &lt;code dir=&quot;auto&quot;&gt;ignorePatterns&lt;/code&gt; in the &lt;code dir=&quot;auto&quot;&gt;.eslintrc.json&lt;/code&gt; file, we also see a &lt;code dir=&quot;auto&quot;&gt;.eslintignore&lt;/code&gt; file that contains more file patterns to be ignored globally.&lt;/p&gt;
&lt;p&gt;Now, we will quickly test the &lt;code dir=&quot;auto&quot;&gt;@nrwl/nx/enforce-module-boundaries&lt;/code&gt; rule by updating the following 2 files:&lt;/p&gt;
&lt;p&gt;&lt;code dir=&quot;auto&quot;&gt;/libs/ui/lib1/src/lib/ui-lib1.ts&lt;/code&gt;&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;import { uiLib2 } from &apos;@rishabhmhjn/ui/lib2&apos;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;export function uiLib1(): string {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;return &apos;ui-lib1&apos;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;export function testBoundaries() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;return uiLib2();&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;&lt;code dir=&quot;auto&quot;&gt;/libs/ui/lib2/src/lib/ui-lib2.ts&lt;/code&gt;&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;import { uiLib1 } from &apos;@rishabhmhjn/ui/lib1&apos;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;export function uiLib2(): string {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;return &apos;ui-lib2&apos;;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;export function testBoundaries() {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;return uiLib1();&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;We can see that the eslint extension will be showing an error:&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-08-at-00.37.19&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1450&quot; height=&quot;396&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-08-100daysofcode-day-3-shared-eslint-plugin-03.Df9w3VXR_2r13ra.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;This means our eslint setup is working!&lt;/p&gt;
&lt;p&gt;We can also see that the warning goes off if we deactivate the rule in the root .eslintrc.json config&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;@nrwl/nx/enforce-module-boundaries&quot;: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;          &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;off&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;          &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{...}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Now we can create our shared eslint-plugin library where will move the &lt;code dir=&quot;auto&quot;&gt;@nrwl/nx/enforce-module-boundaries&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Let’s create a new library: &lt;code dir=&quot;auto&quot;&gt;@rishabhmhjn/eslint-config&lt;/code&gt;.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ nx generate @nrwl/js:library eslint-plugin \&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--unitTestRunner=none \&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--bundler=esbuild \&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--directory=etc \&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--importPath=@rishabhmhjn/eslint-plugin \&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--js \&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;--no-interactive&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;It is essential to know that eslint-plugin can only use configs exposed from other npm packages and not via the typescript’s &lt;code dir=&quot;auto&quot;&gt;paths&lt;/code&gt; configuration.&lt;/p&gt;
&lt;p&gt;Since we will add our newly added library as a &lt;code dir=&quot;auto&quot;&gt;link&lt;/code&gt;ed package directly into our root package.json, we can choose to remove the path entry from the &lt;code dir=&quot;auto&quot;&gt;tsconfig.base.json&lt;/code&gt; file.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;tsconfig.base.json&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;paths&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;@rishabhmhjn/eslint-plugin&quot;: [&quot;libs/etc/eslint-plugin/src/index.ts&quot;], // You may remove this line&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;@rishabhmhjn/ui/lib1&quot;: [&quot;libs/ui/lib1/src/index.ts&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;@rishabhmhjn/ui/lib2&quot;: [&quot;libs/ui/lib2/src/index.ts&quot;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;div&gt;&lt;h5 id=&quot;packagejson&quot;&gt;&lt;code dir=&quot;auto&quot;&gt;package.json&lt;/code&gt;&lt;/h5&gt;&lt;/div&gt;
&lt;p&gt;Our package name is already set to what we need, so we do not require any change here.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;name&quot;: &quot;@rishabhmhjn/eslint-plugin&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;version&quot;: &quot;0.0.1&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;type&quot;: &quot;commonjs&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;We will add the new library as a yarn-linked package with the following command.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ yarn add link:./libs/etc/eslint-plugin -D&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;This will create a new entry &lt;code dir=&quot;auto&quot;&gt;&quot;@rishabhmhjn/eslint-plugin&quot;: &quot;link:./libs/etc/eslint-plugin&quot;&lt;/code&gt; in the &lt;code dir=&quot;auto&quot;&gt;devDependencies&lt;/code&gt; of the root package.json file.&lt;/p&gt;
&lt;p&gt;Now let’s make the following changes to our repository:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Update
libs/etc/eslint-plugin/package.json
This exposes our main
index.js
file that will export our shared eslint configs.&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;name&quot;: &quot;@rishabhmhjn/eslint-plugin&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;version&quot;: &quot;0.0.1&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;type&quot;: &quot;commonjs&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;main&quot;: &quot;src/index.js&quot; // Add this line&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Remove
libs/etc/eslint-plugin/src/lib/etc-eslint-plugin.js
We don’t need this file&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Add
libs/etc/eslint-plugin/src/lib/configs/nx.js
This is the config containing the set of rules bunched together. We can see that this is the javascript equivalent of the rule in the current root
.eslintrc.json
file.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;module.exports = {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;plugins: [&apos;@nrwl/nx&apos;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;overrides: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;files: [&apos;*.ts&apos;, &apos;*.tsx&apos;, &apos;*.js&apos;, &apos;*.jsx&apos;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;rules: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&apos;@nrwl/nx/enforce-module-boundaries&apos;: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;          &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&apos;error&apos;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;          &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;            &lt;/span&gt;&lt;/span&gt;&lt;span&gt;enforceBuildableLibDependency: true,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;            &lt;/span&gt;&lt;/span&gt;&lt;span&gt;allow: [],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;            &lt;/span&gt;&lt;/span&gt;&lt;span&gt;depConstraints: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;              &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;                &lt;/span&gt;&lt;/span&gt;&lt;span&gt;sourceTag: &apos;*&apos;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;                &lt;/span&gt;&lt;/span&gt;&lt;span&gt;onlyDependOnLibsWithTags: [&apos;*&apos;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;              &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;            &lt;/span&gt;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;          &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;};&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Update
libs/etc/eslint-plugin/src/index.js
This is how we name and export the configs. Currently, we are exporting the
nx
config as
plugin:@rishabhmhjn/eslint-plugin/nx
or short
plugin:@rishabhmhjn/nx&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;module.exports = {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;configs: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;nx: require(&apos;./lib/configs/nx&apos;)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;};&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Once these changes are made, we can remove the rule from the root config and extend the config we just exposed with our new eslint-plugin library.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Update
.eslintrc.json&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;root&quot;: true,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;ignorePatterns&quot;: [&quot;**/*&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;plugins&quot;: [&quot;@nrwl/nx&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;extends&quot;: [&quot;plugin:@rishabhmhjn/eslint-plugin/nx&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;overrides&quot;: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;files&quot;: [&quot;*.ts&quot;, &quot;*.tsx&quot;, &quot;*.js&quot;, &quot;*.jsx&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;rules&quot;: {}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;files&quot;: [&quot;*.ts&quot;, &quot;*.tsx&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;extends&quot;: [&quot;plugin:@nrwl/nx/typescript&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;rules&quot;: {}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;files&quot;: [&quot;*.js&quot;, &quot;*.jsx&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;extends&quot;: [&quot;plugin:@nrwl/nx/javascript&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;rules&quot;: {}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Now we can go back to the &lt;code dir=&quot;auto&quot;&gt;libs/ui/lib1/src/lib/ui-lib{1,2}.ts&lt;/code&gt; files and still see that the same lint error.&lt;/p&gt;
&lt;p&gt;Except for this time, the rule triggering this error comes from our new eslint-plugin library, not the rule inside the root &lt;code dir=&quot;auto&quot;&gt;.eslintrc.json&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Hope you found this helpful. This was a very crude introduction to setting up an eslint plugin, but we will explore this further tomorrow along with&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Setting up an angular web app project&lt;/li&gt;
&lt;li&gt;Add a few eslint configs and implement them differently across libs&lt;/li&gt;
&lt;li&gt;Add lint-staged config with a husky pre-commit hook&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;See you again tomorrow.&lt;/p&gt;
</content:encoded><category>100daysofcode</category></item><item><title>#100daysofcode Day 2: Toastmasters, Nx, Commitlint, Husky</title><link>https://rishabhmhjn.com/blog/100daysofcode-day-2-nx-monorepo/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/100daysofcode-day-2-nx-monorepo/</guid><pubDate>Tue, 07 Mar 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;It’s 23:31 at the time of starting this blog! I just returned from a Toastmasters event.&lt;/p&gt;
&lt;p&gt;I didn’t get time to work on the challenge today in the coworking space as I was busy with a few meetings and the goal of completing the skeleton of the data management flow of our Create post page with custom hooks. I am happy that it was finished before I left for the Toastmasters.&lt;/p&gt;
&lt;p&gt;Tomorrow, I will complete the integration of data management hooks with the screens.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;toastmasters&quot;&gt;Toastmasters&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;A fellow at the coworking space invited me to join him at the Toastmasters event. Toastmasters is an organization that encourages people to learn public speaking and communication skills through regular events, usually weekly.&lt;/p&gt;
&lt;p&gt;It’s an incredible stroke of luck that I recently talked about improving my speaking skills, and today there I was as part of a community that’s doing just that. The participants were half Czech and half expat.&lt;/p&gt;
&lt;p&gt;The topic of today was confusing: Reverse Toastmasters. It was about doing all the things they usually do, but in reverse.&lt;/p&gt;
&lt;p&gt;It kicked off with an ending farewell note, feedback on the speeches (that were yet to come), and lastly the introduction of what the Toastmasters event is. It was confusing for all the participants! However, it was fun and interesting.&lt;/p&gt;
&lt;p&gt;I am inclined towards joining one of these groups. I found the people to be kind and supportive. Everyone seemed to have come with a shared ambition of learning how to speak in public. That is just what I was looking for!&lt;/p&gt;
&lt;p&gt;I still struggle to find the right words to communicate well. The easier, straightforward topics for me to talk about are differences in culture, work, and jokes.&lt;/p&gt;
&lt;p&gt;But my goal is to give an informative presentation on a specific topic. It’s easy to do small talks about random topics with a handful of people, but it is challenging to keep a large audience engaged when you have all their attention and expectations to gain something out of the time they spend listening to you. It’s daunting!&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;When you learn to write, you learn to think&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;One of the ways I feel I can overcome this hurdle is by writing. It’s very late now, but I want to write a blog daily; no excuse! So here we are.&lt;/p&gt;
&lt;p&gt;For the challenge, today I will create and publish the 100daysofcode repository with support for &lt;code dir=&quot;auto&quot;&gt;nx&lt;/code&gt;, &lt;code dir=&quot;auto&quot;&gt;commitlint&lt;/code&gt; and &lt;code dir=&quot;auto&quot;&gt;husky&lt;/code&gt;. Let’s get started.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;monorepo-setup&quot;&gt;Monorepo setup&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;nx&quot;&gt;Nx&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;We will initialize our 100daysofcode challenge monorepo using the &lt;code dir=&quot;auto&quot;&gt;create-nx-workspace&lt;/code&gt; command. I will talk more about monorepo and their benefits in the coming days. For now, let’s create our repository.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ npx create-nx-workspace@latest @rishabhmhjn/100daysofcode --preset=ts --package-manager=yarn&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;This should initialize your repository with the following files.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-06-at-23.14.44&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;476&quot; height=&quot;730&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-07-100daysofcode-day-2-nx-monorepo-01.CIol61rp_QB5rd.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;install-recommended-vs-code-extensions&quot;&gt;Install recommended VS Code extensions&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;I suggest you also install the VSCode extension for NX, which will make it easier to run NX commands directly from the editor.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-06-at-23.16.17&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1144&quot; height=&quot;344&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-07-100daysofcode-day-2-nx-monorepo-02.86u2sSDf_ZkjrsU.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;The recommendation to install Nx console is already added to your .&lt;code dir=&quot;auto&quot;&gt;vscode/extensions.json&lt;/code&gt; file, so it should appear in your Extensions tab under the &lt;strong&gt;Recommended&lt;/strong&gt; window.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;I will also add some of the extensions I use daily to my list of recommended extensions.&lt;/p&gt;
&lt;p&gt;I could type in their IDs directly into the JSON file manually.&lt;/p&gt;
&lt;p&gt;I can also search the extensions and press the &lt;strong&gt;Add to Workspace Recommendations&lt;/strong&gt; file directly from the UI. The extension IDs are added to the &lt;code dir=&quot;auto&quot;&gt;.vscode/extensions.json&lt;/code&gt; file automatically.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-06-at-23.24.07&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1370&quot; height=&quot;872&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-07-100daysofcode-day-2-nx-monorepo-03.Dakxych3_Z2l7TeA.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;This is how my &lt;code dir=&quot;auto&quot;&gt;.vscode/extensions.json&lt;/code&gt; file looks like&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;recommendations&quot;: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;nrwl.angular-console&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;esbenp.prettier-vscode&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;formulahendry.auto-rename-tag&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;jannisx11.batch-rename-extension&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;aaron-bond.better-comments&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;wmaurer.change-case&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;naumovs.color-highlight&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;dbaeumer.vscode-eslint&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;editorconfig.editorconfig&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;oderwat.indent-rainbow&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;ecmel.vscode-html-css&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;eamodio.gitlens&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;davidanson.vscode-markdownlint&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;pnp.polacode&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;medo64.render-crlf&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;ms-vscode.sublime-keybindings&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;angular.ng-template&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;prettier&quot;&gt;Prettier&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Now we can start adding our custom configs, starting with &lt;code dir=&quot;auto&quot;&gt;prettier&lt;/code&gt;. I use the following config for our projects.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;singleQuote&quot;: true,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;useTabs&quot;: false,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;tabWidth&quot;: 2,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;semi&quot;: true,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;trailingComma&quot;: &quot;none&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;bracketSpacing&quot;: true,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;htmlWhitespaceSensitivity&quot;: &quot;strict&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;printWidth&quot;: 80,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;overrides&quot;: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;files&quot;: [&quot;**/*.html&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;options&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;printWidth&quot;: 120&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;files&quot;: &quot;*.{yaml,yml}&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;options&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;        &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;singleQuote&quot;: false&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;commitlint&quot;&gt;Commitlint&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Commitlint helps you create consistent commit messages. You can follow the instructions at &lt;a href=&quot;https://github.com/conventional-changelog/commitlint&quot;&gt;https://github.com/conventional-changelog/commitlint&lt;/a&gt;.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;# Install commitlint cli and conventional config&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ yarn add @commitlint/{config-conventional,cli} -D&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;I tend to follow &lt;a href=&quot;https://github.com/angular/angular/blob/main/CONTRIBUTING.md#-commit-message-format&quot;&gt;Angular’s commit message guidelines.&lt;/a&gt; We can install the &lt;a href=&quot;https://www.npmjs.com/package/@commitlint/config-angular&quot;&gt;package&lt;/a&gt; containing their commitlint rules.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;# Install the angular commit lint config&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ yarn add @commitlint/config-angular -D&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Now, although &lt;code dir=&quot;auto&quot;&gt;commitlint&lt;/code&gt; manual suggests using a &lt;code dir=&quot;auto&quot;&gt;commitlint.config.js&lt;/code&gt; file, I will go a different route and use a &lt;code dir=&quot;auto&quot;&gt;.commitlintrc&lt;/code&gt; file.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;echo &apos;{&quot;extends&quot;: [&quot;@commitlint/config-angular&quot;]}&apos; &gt; .commitlintrc&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;I will also instruct the VSCode editor to fetch the schema of the JSON file so that I can get a neat explanation of what the various property means. To do that, I will add a new file &lt;code dir=&quot;auto&quot;&gt;.vscode/settings.json&lt;/code&gt;.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;span&gt;.vscode/settings.json&lt;/span&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;json.schemas&quot;: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;fileMatch&quot;: [&quot;.commitlintrc.json&quot;, &quot;.commitlintrc&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;url&quot;: &quot;https://json.schemastore.org/commitlintrc.json&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Once the schema is fetched, you can hover on to the properties and also get code completions:&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2023-03-06-at-23.53.24&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;784&quot; height=&quot;324&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-07-100daysofcode-day-2-nx-monorepo-04.DNSFjUSZ_1UgbUk.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;husky&quot;&gt;Husky&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;We also need to add &lt;code dir=&quot;auto&quot;&gt;husky&lt;/code&gt; that automatically runs the pre-commit hooks for &lt;code dir=&quot;auto&quot;&gt;commitlint&lt;/code&gt; and the &lt;code dir=&quot;auto&quot;&gt;eslint&lt;/code&gt; later.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;# Install Husky v6&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;yarn add husky --dev&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;# Activate hooks&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;yarn husky install&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;# Add the pre-commit hook&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;npx husky add .husky/commit-msg  &apos;npx --no -- commitlint --edit ${1}&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;This should add a few files to the &lt;code dir=&quot;auto&quot;&gt;.husky&lt;/code&gt; folder.&lt;/p&gt;
&lt;p&gt;To ensure the git hooks are installed automatically if you move systems or when someone else works on your repository, you need to add the following command to your scripts in package.json&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;scripts&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;prepare&quot;: &quot;husky install&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;},&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Before committing the above changes, we should add our own &lt;code dir=&quot;auto&quot;&gt;commitlint&lt;/code&gt; config. I foresee using the following config for the coming time, so I will add it manually. This is what my &lt;code dir=&quot;auto&quot;&gt;.commitlintrc&lt;/code&gt; will look like.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;{&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;extends&quot;: [&quot;@commitlint/config-angular&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;helpUrl&quot;: &quot;https://commitlint.js.org/#/reference-rules&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;rules&quot;: {&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;type-enum&quot;: [&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;2,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;always&quot;,&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;[&quot;build&quot;, &quot;docs&quot;, &quot;feat&quot;, &quot;fix&quot;, &quot;perf&quot;, &quot;refactor&quot;, &quot;revert&quot;]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;scope-max-length&quot;: [2, &quot;always&quot;, 16],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;scope-min-length&quot;: [2, &quot;always&quot;, 2],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;scope-empty&quot;: [2, &quot;never&quot;],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;scope-enum&quot;: [2, &quot;always&quot;, [&quot;infra&quot;]],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;subject-case&quot;: [2, &quot;always&quot;, [&quot;sentence-case&quot;, &quot;lower-case&quot;]],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;header-max-length&quot;: [2, &quot;always&quot;, 72],&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;&quot;body-max-line-length&quot;: [2, &quot;always&quot;, 72]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;I will add more &lt;code dir=&quot;auto&quot;&gt;scope-enum&lt;/code&gt; in the coming days of the challenge. You can read more about the &lt;code dir=&quot;auto&quot;&gt;commitlint&lt;/code&gt; rules &lt;a href=&quot;https://commitlint.js.org/#/reference-rules&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Now, if you would try to commit with a non-conforming commit message, you will get an error, and the commit will fail.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;# 1. Without any format&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ git commit -m &quot;Any Commit&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;⧗   input: Any Commit&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;✖   subject may not be empty [subject-empty]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;✖   type may not be empty [type-empty]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;✖   scope may not be empty [scope-empty]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;✖   found 3 problems, 0 warnings&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;ⓘ   Get help: https://commitlint.js.org/#/reference-rules&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;husky - commit-msg hook exited with code 1 (error)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;# 2. Following the format but exceeding max header length&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ git commit -m &quot;feat(infra): Adding .prettierrc, .commitlintrc and recommended vscode extensions&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;⧗   input: feat(infra): Adding .prettierrc, .commitlintrc and recommended vscode extensions&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;✖   header must not be longer than 72 characters, current length is 80 [header-max-length]&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;✖   found 1 problems, 0 warnings&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;ⓘ   Get help: https://commitlint.js.org/#/reference-rules&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;husky - commit-msg hook exited with code 1 (error)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;This means that our pre-commit hook with commitlint is working. We can now commit the current code with a proper message.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;$ git commit -m &quot;feat(infra): Adding .prettierrc, .commitlintrc and .vscode/extensions&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;[main febffba] feat(infra): Adding .prettierrc, .commitlintrc and .vscode/extensions&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;7 files changed, 1010 insertions(+), 18 deletions(-)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;create mode 100644 .commitlintrc&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;create mode 100755 .husky/commit-msg&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;rewrite .prettierrc (84%)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt; &lt;/span&gt;&lt;/span&gt;&lt;span&gt;create mode 100644 .vscode/settings.json&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Success! Now I will push this newly created repository to my github profile.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/rishabhmhjn/100daysofcode&quot;&gt;https://github.com/rishabhmhjn/100daysofcode&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;It’s 01:33 now! I planned to do more, but I need to sleep to be able to finish my ComposePage tomorrow.&lt;/p&gt;
&lt;p&gt;Tomorrow, for the challenge, I plan to work on the following within the new nx monorepo:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Create a simple Angular/React/Vite project&lt;/li&gt;
&lt;li&gt;Create &amp;#x26; test custom eslint-plugin&lt;/li&gt;
&lt;li&gt;Update the Readme.md&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;It was a very crude post today, but I hope it will be useful to you.&lt;/p&gt;
&lt;p&gt;See you tomorrow.&lt;/p&gt;
</content:encoded><category>100daysofcode</category></item><item><title>#100daysofcode Day 1: Taking the first step</title><link>https://rishabhmhjn.com/blog/100daysofcode-day-1-taking-the-first-step/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/100daysofcode-day-1-taking-the-first-step/</guid><pubDate>Sun, 05 Mar 2023 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;“I can’t see a way through”, said the boy.
“Can you see your next step?”
“Yes”
“Just take that,” said the horse.
The Boy, the Mole, the Fox and the Horse&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I have been going over this for long, and it is high time I do this. Rephrasing, It would be a waste of my time if I don’t do this!&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;background&quot;&gt;Background&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;I have been a developer for most of the last 13 years. I have built tools and libraries consumed primarily internally at my company, &lt;a href=&quot;https://statusbrew.com/&quot;&gt;Statusbrew&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;I used to be active in building &lt;a href=&quot;https://rishabhmhjn.com/blog/tags/amritsar-startups/&quot;&gt;communities&lt;/a&gt; of creators, developers, and startup/small business owners in my &lt;a href=&quot;https://rishabhmhjn.com/blog/tags/amritsar/&quot;&gt;home city&lt;/a&gt;. I had many occasions to meet new people and share knowledge with them. We were also covered frequently by the local press. Many people in our city knew about us and were following our work.&lt;/p&gt;
&lt;p&gt;After the pandemic started, I passed on the opportunity to become active in the social space as I focused on sales and revamping our web and mobile applications. It’s been nearly 2 years since I also gave up even on talking to my own customers and delved deeper into coding behind my work desk. That closed work focus was the need of the time, but now most of the hard work is done.&lt;/p&gt;
&lt;p&gt;I have temporarily moved to Prague and have spent a significant chunk of the last 2 years here but working from home. I moved to a co-working space in November and saw my communication and social circle improve. I am inspired by the tech talks I get to attend nowadays, and I envision being part of the core community soon.&lt;/p&gt;
&lt;p&gt;It was not easy getting back within groups of people and talking. Often I find myself in the situation I was in 12 years ago when I moved to Japan – my accent and the words I use are hard for people to understand. I am also stumbling during simple discussions. This is due to the lack of social interactions in the last years.&lt;/p&gt;
&lt;p&gt;So things need to change. I needed push myself to become more active virtually and in daily dealings for my growth.&lt;/p&gt;
&lt;p&gt;Thus, this challenge.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;objective&quot;&gt;Objective&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;I am taking up this challenge to work on the following aspects:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Knowledge sharing&lt;/li&gt;
&lt;li&gt;Communication&lt;/li&gt;
&lt;li&gt;Time management&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;knowledge-sharing&quot;&gt;Knowledge sharing&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Every day, I work on exciting solutions, designs, and architecture that goes into building a complex application. A portion of that knowledge gets shared with my team, but most of it gets lost as I move on to the next problem.&lt;/p&gt;
&lt;p&gt;Occasionally, I get to attend tech meetups and discuss challenges with other developers. Most expressed excitement when they learn about some unique designs we have worked on our with our application architecture. I reciprocated similarly when I learned something new from them.&lt;/p&gt;
&lt;p&gt;I started to take small steps of knowledge sharing and technical discussions in my current workspace. When I am stuck, I reach out to developers in the space; those discussions have benefitted me.&lt;/p&gt;
&lt;p&gt;A simple example:&lt;/p&gt;
&lt;p&gt;I could find a workaround for using Components with Generics and &lt;code dir=&quot;auto&quot;&gt;memo&lt;/code&gt; (or even &lt;code dir=&quot;auto&quot;&gt;forwardRefs&lt;/code&gt;) that helped enforce strict type definitions in my component designs. This solution was given by a fellow react developer in my coworking space.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;100daysofcode-generic-type-memo&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1206&quot; height=&quot;1012&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-05-100daysofcode-day-1-taking-the-first-step-01.DgpzPwfI_Z8IhTk.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;communication&quot;&gt;Communication&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;There is no doubt that writing and speaking skills are incredibly essential nowadays. We have infinite thoughts, though a majority of them are banal. But there are many ideas that, when shared, can lead to meaningful interactions and connections.&lt;/p&gt;
&lt;p&gt;During all that hustle in the last 3 years, I hadn’t been reading, writing, or engaging in public communication. Recently, I had moments when it was hard to express myself and communicate well.&lt;/p&gt;
&lt;p&gt;With this challenge, I will focus on articulating and publishing a daily post, however small it will be, on this blog under the #100daysofcode tag.&lt;/p&gt;
&lt;p&gt;I will discuss javascript, typescript, mono repo, angular, react, and architecture designs. Currently, I do not plan to publish open-source libraries, but I would love to release something helpful to others whenever possible.&lt;/p&gt;
&lt;p&gt;I will also use various tools and modes to share knowledge, an upcoming &lt;a href=&quot;https://github.com/rishabhmhjn&quot;&gt;github monorep&lt;/a&gt;, &lt;a href=&quot;https://snack.expo.dev/&quot;&gt;Expo Snacks&lt;/a&gt; &amp;#x26; &lt;a href=&quot;https://gist.github.com/rishabhmhjn&quot;&gt;gists&lt;/a&gt;. I also plan to publish a mundane looking timelapse of one of my daily pomodoro sessions on the &lt;a href=&quot;https://instagram.com/ramenhacker&quot;&gt;@ramenhacker&lt;/a&gt; Instagram page.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;time-management&quot;&gt;Time management&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Without a doubt, my work at Statusbrew has and will likely continue to precede other initiatives. However, I want to push myself to pursue other interests, knowing that now it’s more possible to do so than ever before.&lt;/p&gt;
&lt;p&gt;My tentative time divisions would be as follows:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Statusbrew (8 – 10 hours)&lt;/li&gt;
&lt;li&gt;Publish a readable gist/snack/monorep (0.5 hour)&lt;/li&gt;
&lt;li&gt;Timelapse reel (0.5 hour)&lt;/li&gt;
&lt;li&gt;Daily progress report blog post (1 hour)&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Undoubtedly, I won’t have the same bandwidth to strictly follow the above time allocation. I reckon it will be a tentative time division when looked at over the course of a week or month.&lt;/p&gt;
&lt;p&gt;This blog has taken me about 4 hours to write! Of course, I don’t intend to write lengthy monologues every day. But I don’t want to take more than 20-30 minutes to write the next set of posts&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;goal&quot;&gt;Goal&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;My ultimate goal with this challenge is to give a presentation about a topic I have mastered at a developer meetup.&lt;/p&gt;
&lt;p&gt;To achieve this goal, I will&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Learn to organize my thoughts into speaking bits and writing&lt;/li&gt;
&lt;li&gt;Be more active in the nearby developer communities&lt;/li&gt;
&lt;li&gt;Become comfortable in front of an audience or camera&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h2 id=&quot;next-steps&quot;&gt;Next Steps&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;In the coming week, I will set up a high-level plan of action and milestones leading toward my goal.&lt;/p&gt;
&lt;p&gt;Tomorrow, I will set up and publish a monorepo with my frequently used configs, such as .dotfiles, eslint, and prettier. Soon, I will be writing about Angular, React, Vite, Monorepo architecture, and the best practices we have implemented.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;A7400533&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1365&quot; height=&quot;2048&quot; src=&quot;https://rishabhmhjn.com/_astro/2023-03-05-100daysofcode-day-1-taking-the-first-step-02.CxZbeVsO_Z19C5t4.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;From Starbucks in front of the Astronomical Clock in Prague&lt;/p&gt;
&lt;p&gt;This challenge will not solve all my communication problems. But it sure will help improve it a little bit. So I am taking the next step.&lt;/p&gt;
&lt;p&gt;Have a great rest of the weekend. See you soon.&lt;/p&gt;
</content:encoded><category>100daysofcode</category></item><item><title>Cracking competitive exams is easier now than before</title><link>https://rishabhmhjn.com/blog/cracking-competitive-exams-is-easier-now-than-before/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/cracking-competitive-exams-is-easier-now-than-before/</guid><pubDate>Sat, 24 Sep 2022 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;I think those in the 2020s who would study as hard as those in the 2000s or earlier while preparing for competitive exams have the same, if not better, odds of getting into a good engineering, medical, or commerce school.&lt;/p&gt;
&lt;p&gt;One may challenge this, arguing that 1) the number of students appearing for the competitive exams is higher and 2) the increase in the number of seats has not been enough; concluding that there’s higher competition than before.&lt;/p&gt;
&lt;p&gt;I agree with the arguments but would differ with the conclusion.&lt;/p&gt;
&lt;p&gt;There is more accessibility to learning material and coaching with or without in-class learning. Multiple techniques for solving an equation can be learned through an internet search. There is more training and test material available than before.&lt;/p&gt;
&lt;p&gt;On the other side, nowadays, students are perpetually distracted by social media or phones. Many are lesser inclined to devote themselves to 3/4/5 years of rigorous college training. Then there is the rise of job opportunities like content writing, photography, or travel/fashion/motivational blogging/speaking.&lt;/p&gt;
&lt;p&gt;This works in favor of those willing to stay focused to pursue higher education to have higher odds of getting into a good school.&lt;/p&gt;
</content:encoded></item><item><title>Rise of shallow and desperate mentors</title><link>https://rishabhmhjn.com/blog/rise-of-shallow-and-desperate-mentors/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/rise-of-shallow-and-desperate-mentors/</guid><pubDate>Sat, 24 Sep 2022 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Back in the 90s when I was growing up, our parents used to look out for people in their 20s to give us advice on career and skill development.&lt;/p&gt;
&lt;p&gt;As far as I remember, the then-20s people didn’t have any urge to teach us what to do or to become an inspiration or mentor to us.&lt;/p&gt;
&lt;p&gt;I believe it’s because even though, I think, they were more stable, skillful, and successful, they probably felt that they still have a long way to go. Despite others’ perception of them doing well, they felt they still might not know enough. They were humble and conservative when referring to their skills.&lt;/p&gt;
&lt;p&gt;Also, I cannot recall a discussion that didn’t conclude with studying to develop skills in STEM, skills that are attained over a long period.&lt;/p&gt;
&lt;p&gt;Nowadays, I frequently come across folks barely holding a digital agency job but overtly desperate to teach others how to start up, earn a side income, or travel freely.&lt;/p&gt;
&lt;p&gt;None of it alludes to studying hard. The majority of it seems to be selling the ‘idea’ of appearing successful.&lt;/p&gt;
</content:encoded></item><item><title>Amritsar Startup Manifesto</title><link>https://rishabhmhjn.com/blog/amritsar-startup-manifesto/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/amritsar-startup-manifesto/</guid><pubDate>Tue, 11 Aug 2020 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;Guidelines for Entrepreneurship &amp;#x26; Innovation to Unlock, Inspire and Drive Growth in Amritsar&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Amritsar had been a very prominent business hub up until a few decades ago. But due to the changing socio-economic environment coupled with the failure to keep up with the latest technology and skills, the city has failed to compete with the global market.&lt;/p&gt;
&lt;p&gt;Perhaps the draconian government policies are to be blamed.&lt;/p&gt;
&lt;p&gt;Still, we believe that the failure to understand the changing global business dynamics, slower technology adoption, and lack of growth mindset has led to the loss of confidence of its people and the business community outside.&lt;/p&gt;
&lt;p&gt;India has seen a meteoric rise in the consumption of technology. Internet penetration has increased. Smartphones and data are one of the most economical commodities compared to the rest of the world.&lt;/p&gt;
&lt;p&gt;The rising importance of technology-driven economic growth can transform the lives of thousands of people by providing them with high-paying jobs, competitive skills, and a global level-playing field. The increasing availability of high-speed internet means that we can nurture and grow technology businesses that can serve customers from all over the world, right from the comfort of being in our city.&lt;/p&gt;
&lt;p&gt;In the coming time, the growth of technology businesses will outpace that of traditional economic sectors.&lt;/p&gt;
&lt;p&gt;But, as with many industries, there are roadblocks in the growth of businesses. This is why I, along with some of my fellow entrepreneurs at &lt;a href=&quot;https://www.facebook.com/amritsarfounders/&quot;&gt;Amritsar Founders&lt;/a&gt;, decided to join and call for radical changes.&lt;/p&gt;
&lt;p&gt;We have recognized the following areas which need to be focused on to catapult and sustain the growth of businesses in Amritsar.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Upgrade talent pool&lt;/li&gt;
&lt;li&gt;Make available world-class and affordable infrastructure&lt;/li&gt;
&lt;li&gt;Update policies to support disruptive innovation&lt;/li&gt;
&lt;li&gt;Simplify access to finance&lt;/li&gt;
&lt;/ol&gt;
&lt;blockquote&gt;
&lt;p&gt;This is an audacious goal that needs buy-ins from many players such as local educational institutes, industry leaders, entrepreneurs, police, lawmakers, and politicians.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;div&gt;&lt;h2 id=&quot;1-upgrade-talent-pool&quot;&gt;1) Upgrade talent pool&lt;/h2&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Set up skill development programs in collaboration with the local educational institutes&lt;/li&gt;
&lt;li&gt;Make it easier for startups to hire from overseas&lt;/li&gt;
&lt;li&gt;Incentivize individuals and startups to train teachers and students&lt;/li&gt;
&lt;li&gt;Support women to start and scale their businesses&lt;/li&gt;
&lt;li&gt;Encourage and organize hackathons, meetups, and conferences&lt;/li&gt;
&lt;li&gt;Invite global mentors and companies to provide training to local businesses and institutes&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;h2 id=&quot;2-make-available-world-class-and-affordable-infrastructure&quot;&gt;2) Make available world-class and affordable infrastructure&lt;/h2&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Invest in high-speed internet connectivity, even in rural areas&lt;/li&gt;
&lt;li&gt;Provide cheap and affordable office and co-working spaces on flexible terms&lt;/li&gt;
&lt;li&gt;Invest in technology at the local universities&lt;/li&gt;
&lt;li&gt;Provide accessible rentable housing spaces for non-resident workers&lt;/li&gt;
&lt;li&gt;Invest in entertainment, sports, and playgrounds for recreational purposes&lt;/li&gt;
&lt;li&gt;Provide resources to local businesses to take part in regional as well as global conferences and exhibitions&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;h2 id=&quot;3-update-policies-to-support-disruptive-innovation&quot;&gt;3) Update policies to support disruptive innovation&lt;/h2&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Work with startups to eliminate regulations in technology&lt;/li&gt;
&lt;li&gt;Formulate employer protection laws to instill confidence in entrepreneurs and investors&lt;/li&gt;
&lt;li&gt;Review regulations surrounding the sharing economy – office spaces, housing, cars, internet, etc&lt;/li&gt;
&lt;li&gt;Standardize and facilitate company creation&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;h2 id=&quot;4-simplify-access-to-finance&quot;&gt;4) Simplify access to finance&lt;/h2&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Provide and educate about tax relieves for entrepreneurs&lt;/li&gt;
&lt;li&gt;Lower minimum investment and compensation requirements for hiring from abroad&lt;/li&gt;
&lt;li&gt;Ease regulations on ESI, PF, and Insurance&lt;/li&gt;
&lt;li&gt;Provide affordable loans and tax relieves to the skill development centers&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We hope to represent and share a common vision of various entrepreneurs, professionals, small business owners, mentors, investors, and consultants irrespective of the industries. We aim to collaborate, communicate, and contribute to the growth of the local business ecosystem by promoting reasonable and actionable recommendations.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;We encourage you to be part of our journey and work with us to bring Amritsar to the top of the World’s Business Map.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;a href=&quot;https://docs.google.com/forms/d/e/1FAIpQLSdyPKyN2CtesNS6OweIf22kKUCJZv5sos5y5IVAtqSWahWrZQ/viewform?embedded=true&quot;&gt;Embedded content&lt;/a&gt;&lt;/p&gt;
</content:encoded><category>Amritsar</category><category>Amritsar Startups</category></item><item><title>Amritsar Co-working Spaces – Cases For and Against</title><link>https://rishabhmhjn.com/blog/co-working-in-amritsar-cases-for-and-against/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/co-working-in-amritsar-cases-for-and-against/</guid><pubDate>Tue, 04 Aug 2020 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Many times, we at &lt;a href=&quot;https://www.facebook.com/amritsarfounders&quot;&gt;Amritsar Founders&lt;/a&gt; are invited by Colleges and Universities to work on proposals of Incubation Centers at their respective places. It’s an audacious project, and something that can change the corporate face of our city.&lt;/p&gt;
&lt;p&gt;I wanted to talk about one of the features of Incubation Centers that is seen as a necessity in the whole framework: &lt;strong&gt;co-working spaces&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Ideally, co-working spaces can provide necessary infrastructure such as an office with a desk and chair, power connection, internet and meeting rooms to the budding entrepreneurs &amp;#x26; small businesses. Co-workings can also provide private cabin spaces for bigger teams. Other perks include security, permanent office address &amp;#x26; cafeteria. Luxury ones may consist of gyms &amp;#x26; fitness centers too.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;cases-for&quot;&gt;Cases For&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;Let me start with how co-working spaces can be valuable to our community.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;1-never-feel-lonely&quot;&gt;1) Never feel lonely&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;If you have worked as a solo entrepreneur or a freelancer, you know that it is lonely to be doing things on your own without a peer group. Co-working spaces provide an excellent opportunity to be surrounded by those who are also working on their dreams that would keep you motivated and inspired to work on yours.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;We at &lt;a href=&quot;https://statusbrew.com/&quot;&gt;Statusbrew&lt;/a&gt; have seemingly been working from our cave, &lt;a href=&quot;https://facebook.com/statusbrewhq&quot;&gt;Statusbrew HQ&lt;/a&gt;, with little interaction with the outside community, and it had been a lonely journey. &lt;a href=&quot;https://www.facebook.com/groups/amritsarstartups/&quot;&gt;Amritsar Startups&lt;/a&gt; was our initiative to create a community of go-getters and our answer to eliminate working alone. Later, I found solace with my newly formed group of entrepreneurs at &lt;a href=&quot;https://www.facebook.com/amritsarfounders/&quot;&gt;Amritsar Founders&lt;/a&gt;. It’s truly remarkable how ideas and thoughts can be shared and transferred when you have a group of like-minded people you can call your own.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;div&gt;&lt;h3 id=&quot;2-networking&quot;&gt;2) Networking&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Having surrounded with like-minded people and the ability to interact with them, many opportunities can unfold. You can learn new skills, connect with potential clients, and even get a direct connect to the investors.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;3-save-costs&quot;&gt;3) Save costs&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;No rental contracts (office, internet, electricity, etc.), no maintenance, no hassle of dealing with infra! Co-working saves you not only real money but also saves you time and opportunity costs. This is great for freelancers as well as small to mid-sized companies.&lt;/p&gt;
&lt;p&gt;And oh, the improvements to infra is also part of the job of your co-working provider. You don’t need to worry about upgrading infra anymore.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;cases-against&quot;&gt;Cases Against&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;1-distractions&quot;&gt;1) Distractions&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;As promising the idea of networking is, it can also be a perpetual means to distract oneself. Some teammates would be found more often at common spaces or someone else’s desk than getting their own job done. Other teams at the space can be loud. There will be circumstances out of your control and can lead to reduced productivity.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;2-restrictions&quot;&gt;2) Restrictions&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Since you do not own the place, you would be potentially stuck with one allotted desk space for a considerable time. You would not be able to change orientation or decorate your workspace the way you like. Even bringing personal work amenities like whiteboards might require approvals.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;3-bloated-costs&quot;&gt;3) Bloated costs&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;It might prove to be cost-effective for freelancers or small businesses by saving some upfront costs. However, it can prove to be quite expensive for mid to large companies as pricing is usually set on a per seat basis.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;co-working-scope-in-amritsar&quot;&gt;Co-working scope in Amritsar&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;Talking about this puts me in a very slippery slope as I am still part of the local communities, but I feel we need to talk about the core challenges that surround co-working, which ironically, have little to do with co-working.&lt;/p&gt;
&lt;p&gt;I think creative teams, HR and admin teams can work out of co-working spaces efficiently without significant concerns.&lt;/p&gt;
&lt;p&gt;But it can be an issue for core, tech (product or service) companies to be working out of co-working spaces due to requirements of safeguarding intellectual properties and private information. Core development and sales teams can be the ones under a more rigorous scrutiny for this.&lt;/p&gt;
&lt;p&gt;However additionally, since in Amritsar, a majority of the companies are into IT services – digital marketing, web &amp;#x26; app development, etc., there can be understandable concerns about keeping their internal business processes secret.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;issues-with-co-working-spaces-in-amritsar&quot;&gt;Issues with Co-working spaces in Amritsar&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Hoping clients
– since both your clients and other teams can now know about each other (visits, or overhearing discussions), they can quickly jump.&lt;/li&gt;
&lt;li&gt;Copying of ideas
– expertise in creative content&lt;/li&gt;
&lt;li&gt;Information security leak
– personal information of clients, contracts and intellectual property&lt;/li&gt;
&lt;li&gt;Talent poaching
– other teams can pay more to recruit your trained staff&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;ways-co-working-spaces-can-work-in-amritsar&quot;&gt;Ways Co-working spaces can work in Amritsar&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Co-working can be a great fit for companies that do not have major overlapping business processes since there will be no concern about clients or team spillovers.&lt;/p&gt;
&lt;p&gt;Companies that require a high level of information security can work out of cabins so that their internal discussions or plans cannot be overheard by other tenants. Sales teams can make use of conference rooms to make sales calls, deliver product demos, or meet clients.&lt;/p&gt;
&lt;p&gt;Moreover, a simple agreement must be signed by all co-working tenants to ensure they adhere to a certain level of information protection. Defaulters should be penalized and may also be asked to leave the co-working space after a thorough hearing process.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;I believe co-working is terrific and it would provide many opportunities for the community in growing their ventures. With this, we may also be able to attract a lot of investors, perhaps have a global incubator from our city. With a good plan and careful execution, we can see many global companies starting from the Holy City.&lt;/p&gt;
</content:encoded><category>Amritsar</category><category>Amritsar Startups</category></item><item><title>Levels of Politeness – Lessons from Japan</title><link>https://rishabhmhjn.com/blog/levels-of-politeness/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/levels-of-politeness/</guid><pubDate>Wed, 17 Jun 2020 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;This one is also one of the many learnings from my 4 years in Japan. In Japan, it is very important to choose the right politeness level as it can make or break your relationships with your friends, clients, or your team.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://kawakawalearningstudio.com/all/japanese-keigo-polite-speech-japanese/&quot;&gt;Keigo&lt;/a&gt; is crucial and particular to Japan. However, some of it can also be easily implemented in your own day to day conversations.&lt;/p&gt;
&lt;p&gt;In the following examples, the politeness increases as we go down the list.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;1-name--your-name--name-please--tell-me-your-name&quot;&gt;1) Name? / Your Name? / Name please? / Tell me your name.&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;This will be the most straightforward but blunt way to ask someone their name.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;2-what-is-your-name&quot;&gt;2) What is your name?&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;Asking a question in a complete form is a basic and safest way to ask someone their name.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;3-can-you-tell-me-your-name&quot;&gt;3) Can you tell me your name?&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;There is a subtle difference between this and the next one. In this way, we are making the other person DO THE WORK to complete this task. However, this one is politer than the previous version because you are asking for permission first before you can have their name.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;4-maycan-i-ask-your-name&quot;&gt;4) May/Can I ask your name?&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;This one also asks for permission before you can have their name. However, in this version, you are the one who is DOING THE WORK to complete this task. You may use this with your managers and your clients.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;5-is-it-ok-if-i-ask-your-name&quot;&gt;5) Is it OK if I ask your name?&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;This version is politer than all the above as it is checking whether it is OK to ask for permission to have your name, and then proceed to ask. Best to converse with your clients.&lt;/p&gt;
&lt;p&gt;Which level of politeness do you use with your friends, team, and clients?&lt;/p&gt;
</content:encoded><category>Japan</category><category>Lessons from Japan</category></item><item><title>[WIP] List of Tools and Resources for Startups &amp; Small Businesses 2020</title><link>https://rishabhmhjn.com/blog/tools-and-resources-for-startups/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/tools-and-resources-for-startups/</guid><pubDate>Sat, 13 Jun 2020 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;&lt;em&gt;This list is the result of a &lt;a href=&quot;https://www.facebook.com/groups/amritsarstartups/permalink/3290937014271236/&quot;&gt;discussion&lt;/a&gt; on the &lt;a href=&quot;https://www.facebook.com/groups/amritsarstartups/&quot;&gt;Amritsar Startups&lt;/a&gt; Facebook Group.&lt;/em&gt;&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;marketing&quot;&gt;Marketing&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;website&quot;&gt;Website&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Squarespace&lt;/li&gt;
&lt;li&gt;Wix&lt;/li&gt;
&lt;li&gt;WordPress&lt;/li&gt;
&lt;li&gt;Ghost&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;social&quot;&gt;Social&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Facebook Business Manager&lt;/li&gt;
&lt;li&gt;Statusbrew&lt;/li&gt;
&lt;li&gt;SproutSocial&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;design&quot;&gt;Design&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Pixlr&lt;/li&gt;
&lt;li&gt;Canva&lt;/li&gt;
&lt;li&gt;Adobe Spark&lt;/li&gt;
&lt;li&gt;Snapseed (
Android
/
iOS
)&lt;/li&gt;
&lt;li&gt;Screenflow&lt;/li&gt;
&lt;li&gt;Final Cut Pro X&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;analytics&quot;&gt;Analytics&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Google Analytics&lt;/li&gt;
&lt;li&gt;Facebook Pixel&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;stock&quot;&gt;Stock&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Unsplash&lt;/li&gt;
&lt;li&gt;Artlist&lt;/li&gt;
&lt;li&gt;Epidemic Music&lt;/li&gt;
&lt;li&gt;Soundcloud&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h2 id=&quot;sales&quot;&gt;Sales&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;lead-generation&quot;&gt;Lead Generation&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Google Maps&lt;/li&gt;
&lt;li&gt;Related Pages/Businesses blocks on Facebook, Twitter, LinkedIn, Instagram&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;crm&quot;&gt;CRM&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Pipedrive&lt;/li&gt;
&lt;li&gt;Salesforce&lt;/li&gt;
&lt;li&gt;Google Sheets&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;support&quot;&gt;Support&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Zendesk&lt;/li&gt;
&lt;li&gt;Freshdesk&lt;/li&gt;
&lt;li&gt;Zoho&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;payment-also-support-invoicing&quot;&gt;Payment (also support invoicing)&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Stripe&lt;/li&gt;
&lt;li&gt;PayPal&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;misc&quot;&gt;Misc&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;MyOperator&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h2 id=&quot;productivity&quot;&gt;Productivity&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;team-communication&quot;&gt;Team Communication&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Google Meet/Hangouts&lt;/li&gt;
&lt;li&gt;Slack&lt;/li&gt;
&lt;li&gt;Zoom&lt;/li&gt;
&lt;li&gt;Skype&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;taskproject-management&quot;&gt;Task/Project Management&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Trello&lt;/li&gt;
&lt;li&gt;Asana&lt;/li&gt;
&lt;li&gt;Basecamp&lt;/li&gt;
&lt;li&gt;Google Sheets&lt;/li&gt;
&lt;li&gt;Microsoft To Do&lt;/li&gt;
&lt;li&gt;Google Tasks&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;file-sharing&quot;&gt;File Sharing&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Google Drive&lt;/li&gt;
&lt;li&gt;Dropbox&lt;/li&gt;
&lt;li&gt;Box&lt;/li&gt;
&lt;li&gt;Evernote&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h3 id=&quot;misc-1&quot;&gt;Misc&lt;/h3&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;1Password&lt;/li&gt;
&lt;li&gt;Lastpass&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;&lt;h2 id=&quot;finance&quot;&gt;Finance&lt;/h2&gt;&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;Expensify&lt;/li&gt;
&lt;li&gt;Quickbooks&lt;/li&gt;
&lt;li&gt;Freshbooks&lt;/li&gt;
&lt;/ol&gt;
</content:encoded><category>Amritsar Startups</category></item><item><title>Ghost Theme Development with Docker</title><link>https://rishabhmhjn.com/blog/ghost-theme-development-environment-with-docker/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/ghost-theme-development-environment-with-docker/</guid><pubDate>Sun, 07 Jun 2020 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Ghost is great! It is easy to use and set up. Ghost has been our choice for our &lt;a href=&quot;https://statusbrew.com/insights&quot;&gt;blog&lt;/a&gt; at &lt;a href=&quot;https://statusbrew.com/&quot;&gt;Statusbrew&lt;/a&gt;. I used Ghost as a platform for this blog too.&lt;/p&gt;
&lt;p&gt;Ghost, however, does require a little bit of programming knowledge to get started. Although it is easier to set up a local ghost blog to start theming, a consistent dev environment becomes necessary as more devs work on the same theme.&lt;/p&gt;
&lt;p&gt;Docker is an amazing tool to sync dev environments. After learning about it, we at Statusbrew decided to start moving our various applications/services to Docker.&lt;/p&gt;
&lt;p&gt;As I started to work on the theme of this blog, I realized it would be good to create a Docker environment for Ghost theme development.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Boilerplate repository is available at &lt;a href=&quot;https://github.com/amritsarstartups/ghost-theme-docker&quot;&gt;https://github.com/amritsarstartups/ghost-theme-docker&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;div&gt;&lt;h2 id=&quot;dockerfile&quot;&gt;Dockerfile&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;# Choose the ghost version&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;FROM ghost&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;LABEL maintainer=&quot;rishabhmhjn&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;# Set the working directory.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;WORKDIR /var/lib/ghost&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;RUN ghost config url http://localhost:3102&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;EXPOSE 2368&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;div&gt;&lt;h2 id=&quot;docker-composeyml&quot;&gt;docker-compose.yml&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;version: &apos;3.7&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;services:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;  &lt;/span&gt;&lt;/span&gt;&lt;span&gt;ghost-theme-docker:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;image: ghost-theme-docker:1.0&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;container_name: ghost-theme-docker&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;restart: unless-stopped&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;build:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;context: .&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;dockerfile: Dockerfile&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;volumes:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- &apos;./.tmp/data:/var/lib/ghost/content/data&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- &apos;./.tmp/images:/var/lib/ghost/content/images&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- &apos;./.tmp/settings:/var/lib/ghost/content/settings&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- &apos;./Pico:/var/lib/ghost/content/themes/Pico&apos;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;ports:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- &quot;3102:2368&quot;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;environment:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- NODE_ENV=development   # ← This is the key to success&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;The volumes have been added to share data between your Docker image and the host. In this example, we are using the theme &lt;a href=&quot;https://github.com/TryGhost/Pico.git&quot;&gt;Pico&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;After you have your Docker files in place, you can build and run the image using the following:&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;docker-compose -f &quot;docker-compose.yml&quot; up -d --build&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Once the build is complete, you can access your new blog at &lt;a href=&quot;http://localhost:3102/&quot;&gt;http://localhost:3102/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Screenshot-2020-06-07-14.04.15&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1064&quot; height=&quot;692&quot; src=&quot;https://rishabhmhjn.com/_astro/2020-06-07-ghost-theme-development-environment-with-docker-01.Co3WpSbj_Z17p02e.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;Then you can go to &lt;a href=&quot;http://localhost:3102/ghost&quot;&gt;http://localhost:3102/ghost&lt;/a&gt; to set up your new admin account. On the Ghost dashboard, click on Design in the left sidebar and activate your new theme.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://i0.wp.com/142.93.214.151/content/images/2020/06/Screenshot-2020-06-07-14.03.52.png?ssl=1&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;You can make changes to your new theme and refresh the page to see it reflected in the website.&lt;/p&gt;
&lt;p&gt;The key to success was defining the node environment.&lt;/p&gt;
&lt;div&gt;&lt;figure&gt;&lt;figcaption&gt;&lt;/figcaption&gt;&lt;pre&gt;&lt;code&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;    &lt;/span&gt;&lt;/span&gt;&lt;span&gt;environment:&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;      &lt;/span&gt;&lt;/span&gt;&lt;span&gt;- NODE_ENV=development   # ← This is the key to success&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;&lt;/div&gt;
&lt;p&gt;Happy Ghost theming!&lt;/p&gt;
</content:encoded></item><item><title>Local Govt in Punjab Pushing Back on Online Classes</title><link>https://rishabhmhjn.com/blog/local-govt-in-punjab-pushing-back-on-online-classes/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/local-govt-in-punjab-pushing-back-on-online-classes/</guid><pubDate>Mon, 11 May 2020 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;All this rhetoric about the Punjab Government pushing back on schools to not charge for online classes seems to allude the following:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;There was a huge opportunity to revamp &amp;#x26; scale our education delivery process with technology. With this, even the remotest locations could have been provided with the best of teachers and training.
The govt’s uncharacteristic regulation on curbing schools to charge would just lead to schools pulling back their investment plans.&lt;/li&gt;
&lt;li&gt;I believe that a not-insignificant number of parents who are insisting against fees to schools are seemingly OK with their kids being at home on phones or TV sets but not learning new skills. Precious time (months!) are being lost in a child’s education.
The online classes could have helped them not lose those days, especially in subjects like Science and Maths (to which I am close to, and I know it is difficult to catch up if you miss those classes)&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Since &lt;a href=&quot;https://rishabhmhjn.com/blog/tags/covid-19/&quot;&gt;COVID-19&lt;/a&gt; caught us off-guard and proved that our preparedness was nowhere close to what should have been there, one of the easier problems to solve was to let the educational institutes make use of Technology to ensure the children don’t lag behind in education, and now we are blowing this one too!&lt;/p&gt;
</content:encoded><category>Amritsar</category><category>Covid-19</category></item><item><title>Million Dollar SAAS Companies from Tier 2 Cities in India &amp; Statusbrew</title><link>https://rishabhmhjn.com/blog/million-dollar-startups-from-tier-2-indian-cities/</link><guid isPermaLink="true">https://rishabhmhjn.com/blog/million-dollar-startups-from-tier-2-indian-cities/</guid><pubDate>Sun, 10 May 2020 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;These are unprecedented times. There was arguably never a such instance where humanity had to collectively experience a challenge so lethal and ubiquitous in the documented history of our existence.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;People have been forced to stay indoors.
Businesses temporarily shut down.
Mass lay-offs, migration of labor.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Whenever people from any part of the world come together again, they would have that one collective experience to talk about. &lt;em&gt;Where were you during this?&lt;/em&gt; &lt;em&gt;How was it there?&lt;/em&gt; &lt;em&gt;I am sorry for your loss.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;While human loss is something (&lt;em&gt;and an emphatic something&lt;/em&gt;) to reckon with, the invisible economic decline has not eluded the minds of many concerned. Forced shutdowns &amp;#x26; Stay At Home orders mean that any business which is not deemed as an &lt;em&gt;Essential Service&lt;/em&gt; is required to keep shut. &lt;a href=&quot;https://citiesspeak.org/2020/03/30/whats-the-difference-between-shelter-in-place-safer-at-home-and-stay-home-orders/&quot;&gt;Shelter In Place&lt;/a&gt; orders take it further, and &lt;a href=&quot;https://www.cbsnews.com/news/elon-musk-threatens-to-move-tesla-production-out-of-california-over-stay-at-home-order/&quot;&gt;Elon is pissed&lt;/a&gt;!&lt;/p&gt;
&lt;p&gt;While some industries that relied on being physically available have taken the plunge (Hyperlocal Market Places, Retail, Travel &amp;#x26; Tourism, Sports, etc.), some notable businesses have witnessed a growth curve during this period of crisis. It is not surprising to see that majority of those businesses are from Tech, specifically internet businesses.&lt;/p&gt;
&lt;p&gt;I would like to focus on a specific category of internet businesses – &lt;a href=&quot;https://rishabhmhjn.com/blog/tags/saas/&quot;&gt;SAAS&lt;/a&gt;.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;what-is-saas&quot;&gt;What is SAAS?&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;SAAS, or Software as a Service, primarily refers to the software delivery model where software is hosted on a server and can be accessed online, usually via a subscription. Contrast it with the traditional model of software delivery where software had to be purchased (via CD or similar) and had to be installed on an individual machine; SAAS is usually accessed via a web-browser, a mobile app, or an &lt;a href=&quot;https://www.altexsoft.com/blog/engineering/what-is-api-definition-types-specifications-documentation/&quot;&gt;API&lt;/a&gt;.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;the-microsoft-office-example&quot;&gt;The Microsoft Office example&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;An easy to understand example would be Microsoft Office.&lt;/p&gt;
&lt;p&gt;Earlier it was shipped on CDs or DVDs with a one time purchase and could be licensed to only one computer. This kind of software was also known as On-Premise Software. A new version of software always had to be purchased again.&lt;/p&gt;
&lt;p&gt;Office 365, however, has a SAAS model where it is made to be available on a subscription model. Updates are provided regularly and at no extra cost.&lt;/p&gt;
&lt;p&gt;You can find more about the differences b/w SAAS and On-Premise Software at &lt;a href=&quot;https://www.sales-i.com/saas-vs-on-premises-which-is-right-for-you&quot;&gt;https://www.sales-i.com/saas-vs-on-premises-which-is-right-for-you&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Other notable examples in SAAS are G-Suite, Zoom, Atlassian, Zoho &amp;#x26; &lt;a href=&quot;https://statusbrew.com/&quot;&gt;Statusbrew&lt;/a&gt; (I am one of the co-founders).&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;saas-from-an-entrepreneurs-perspective&quot;&gt;SAAS from an entrepreneur’s perspective&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;SAAS has revolutionized the software industry for good. Someone with a good domain/industry knowledge can rent a server online (via SAAS, or specifically PAAS (Platform as a Service) like AWS and Azure) can deploy their piece of software and can deliver it to anyone around the world over the internet. It doesn’t require any hefty infrastructure investment, logistics, or a large number of outside sales reps. Troubleshooting (after-sales) can be done online. The software can get smarter and can add features in shorter cycles.&lt;/p&gt;
&lt;p&gt;This also means that the software can be provided cheaply and at scale. More users can purchase it. The sales cycles are shortened as the majority of communication &amp;#x26; transactions happen online.&lt;/p&gt;
&lt;p&gt;The beauty of SAAS is that if you have a good understanding of a customer problem or an inefficiency in the industry, you can solve that using SAAS. The key is having the right domain knowledge &amp;#x26; expertise.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;saas-from-the-buyers-perspective&quot;&gt;SAAS from the buyers’ perspective&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;There is no hefty infrastructure spending on the buyers’ side as well. A business owner can now focus more on their customers rather than managing internal developers or thinking about maintenance or infrastructure. So, where in the early days, software was usually owned by large companies that could afford to buy and maintain the software, now small businesses can own software at a significantly lower cost.&lt;/p&gt;
&lt;p&gt;For once, SAAS has been able to align the goals of the service provider and the customer, as customers can now pay for the portion of software that is used. They can increase or decrease the plan pricing at virtually any time of the subscription.&lt;/p&gt;
&lt;p&gt;Due to this, SAAS is sometimes also called On-Demand Software.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;advantages-to-saas-businesses-in-india&quot;&gt;Advantages to SAAS businesses in India&lt;/h2&gt;&lt;/div&gt;
&lt;p&gt;Due to the nature of SAAS businesses, India has a few advantages compared to other countries.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;change-in-buyer-behavior&quot;&gt;Change in buyer behavior&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;In the early days, buyers usually would meet the software seller or reseller and then make a decision to purchase (this still is a significant way of business dealing in Japan.) Now, the software can now be created from anywhere and the prospect can evaluate it online, and decide to purchase. Therefore, software providers in India have a level playing field to produce good quality software and sell it to anyone in the world.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;availability-of-domain-expertise&quot;&gt;Availability of domain expertise&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;No matter what the product is, there is still some amount of Human Assistance required. Customer Support, After Sales, etc. India gets a huge advantage as there is a significant number of trained and qualified talent in India who have provided services in their respective industries for a considerable period.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;efficient-use-of-capital&quot;&gt;Efficient use of capital&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;The limited amount of cash with the early-stage startups can produce more results in India due to the cost of living advantages. Since in the early days, the majority of expenses are in human resources specifically in engineering, a lot more can be done with the cash in hand available to startups in India than what could be done in places like Silicon Valley. The cloud infrastructure has also made it possible to create the software from tier 2 cities like Amritsar without having to spend on expensive server costs.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;raw-unsolved-consumer-problems&quot;&gt;Raw unsolved consumer problems&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;As more consumers and businesses go online in India, many with their first exposure to software, there is a growing need to support the demands of scale using automation and customer management. With the contextual understanding of both the local businesses and their customers, it is easier to build software to support their specific requirements.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;limitations-of-saas-during-covid-19&quot;&gt;Limitations of SAAS during COVID-19&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;It is important to note that not all SAAS businesses may have seen a growth curve during the &lt;a href=&quot;https://rishabhmhjn.com/blog/tags/covid-19/&quot;&gt;COVID-19&lt;/a&gt; time due to the limitations imposed on the industries they support.&lt;/p&gt;
&lt;p&gt;A quick example will be &lt;a href=&quot;https://www.petpooja.com/&quot;&gt;Petpooja&lt;/a&gt;, a SAAS startup that provides POS software to restaurants. As restaurants temporarily shut down, service providers to this industry, like Petpooja, might find it hard to acquire new customers or even retain the old ones.&lt;/p&gt;
&lt;div&gt;&lt;h2 id=&quot;statusbrew--social-media-management-saas-from-amritsar&quot;&gt;Statusbrew – Social Media Management SAAS from Amritsar&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;h3 id=&quot;2011-to-2013--twitter-drupal--linode&quot;&gt;2011 to 2013 – Twitter, Drupal &amp;#x26; Linode&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;Tushar made the first version on Statusbrew (previously called Unfollowers) back in 2011. After he graduated, he came back to Amritsar and started working on the MVP. Twitter was the only social network supported back then. The analytics app was made on top of Drupal CMS and was served from our Linode VPS in Newark, NJ.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;Tushar working on his MacBook in December 2011&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;2000&quot; height=&quot;1196&quot; src=&quot;https://rishabhmhjn.com/_astro/2020-05-10-million-dollar-startups-from-tier-2-indian-cities-01.CqFSwnE1_Z24MPNy.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Tushar working on his MacBook in December 2011&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;All that was needed to reach this level was discipline, a good internet connection, a MacBook Pro, and an understanding of the changing social media consumer behavior.&lt;/p&gt;
&lt;p&gt;He didn’t spend too much on the infrastructure and scaled the servers as the customer base grew. At the end of 2013, he successfully integrated Stripe as the payment gateway, which helped in monetization from our early customers.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;imag0826&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1952&quot; height=&quot;3264&quot; src=&quot;https://rishabhmhjn.com/_astro/2020-05-10-million-dollar-startups-from-tier-2-indian-cities-02.DI1dJKy1_Z2hyRYx.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Picture from 2011 to 2013 – Snowboarding, Ice-skating, Sapporo &amp;#x26; Singapore&lt;/em&gt;&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;2014-to-2019--reaching-usd-85k-mrr&quot;&gt;2014 to 2019 – Reaching USD 85k MRR&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;With nearly three years in Social Media Management and the relevant domain expertise, Tushar had grown the company to the north of USD 40k MRR (monthly recurring revenue) before I joined him in Apr 2015.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;2015-01-25-09.10.43&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;2000&quot; height=&quot;1500&quot; src=&quot;https://rishabhmhjn.com/_astro/2020-05-10-million-dollar-startups-from-tier-2-indian-cities-03.DplVdi1M_1YwGne.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;2014 – India and Japan&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;With our combined knowledge of infra scaling, consumer patterns from Japan, US, and the rest of the world, agility in supporting other networks such as Instagram, LinkedIn and our team, which initially comprised of our childhood friends Sankalp and Supreet (who are still with us to this date), we saw a tremendous growth in user adoption and revenues.&lt;/p&gt;
&lt;p&gt;&lt;img alt=&quot;2015-01-25-09.10.43&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;2000&quot; height=&quot;1500&quot; src=&quot;https://rishabhmhjn.com/_astro/2020-05-10-million-dollar-startups-from-tier-2-indian-cities-03.DplVdi1M_1YwGne.webp&quot; srcset=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Beginning of our team building in Amritsar&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Our revenues peaked at USD 85k of MRR. We had built a global platform with a highly talented team, high-quality support serving nearly 8000 customers, and having team members from 7 different countries, all working from Amritsar.&lt;/p&gt;
&lt;div&gt;&lt;h3 id=&quot;2019-and-beyond-covid-19&quot;&gt;2019 and beyond COVID-19&lt;/h3&gt;&lt;/div&gt;
&lt;p&gt;In 2019, we made a big decision to change our business model from B2C to B2B and build a next-generation social media suite with tools like Publishing, Customer Support, and Analytics.&lt;/p&gt;
&lt;p&gt;We also started to build an inside sales team with arguably the most lucrative compensation packages of up to 2x in bonuses on reaching sales targets.&lt;/p&gt;
&lt;p&gt;Although COVID-19 did lead to some customer churn, we continue to grow at a net rate of over 10% MOM. Our product and marketing team have worked hard to keep our application and communication stable.&lt;/p&gt;
&lt;p&gt;We are also looking at adding more talent to our development, marketing, and sales teams who would currently be working remotely and may be required to work from our &lt;a href=&quot;https://facebook.com/statusbrewhq&quot;&gt;HQ&lt;/a&gt; once the lockdown is over.&lt;/p&gt;
&lt;p&gt;I thank you for reading this long text, and I hope I was able to convince you about the possibility of creating a global company from wherever you are. Please reach out to me on &lt;a href=&quot;https://www.linkedin.com/in/rishabhmhjn/&quot;&gt;LinkedIn&lt;/a&gt; or &lt;a href=&quot;https://twitter.com/rishabhmhjn&quot;&gt;Twitter&lt;/a&gt; if you have any questions.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;We have been building communities of creators, go-getters &amp;#x26; entrepreneurs from Amritsar and regions around. Join us at &lt;a href=&quot;https://facebook.com/amritsarfounders&quot;&gt;Amritsar Founders&lt;/a&gt; (an exclusive group for entrepreneurs), &lt;a href=&quot;https://www.facebook.com/groups/amritsarstartups/&quot;&gt;Amritsar Startups&lt;/a&gt; (an inclusive group of developers, entrepreneurs, business owners or enterprises).&lt;/em&gt;&lt;/p&gt;
</content:encoded><category>Amritsar</category><category>Amritsar Startups</category><category>Covid-19</category><category>SAAS</category><category>Statusbrew</category></item></channel></rss>