<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Meer Hamza</title>
    <description>The latest articles on DEV Community by Meer Hamza (@meerhamzadev).</description>
    <link>https://dev.to/meerhamzadev</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F486548%2F23be9a81-ce4e-4c36-aa2e-d0534498fc1c.png</url>
      <title>DEV Community: Meer Hamza</title>
      <link>https://dev.to/meerhamzadev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/meerhamzadev"/>
    <language>en</language>
    <item>
      <title>MicroFrontEnds - An approach toward scalable Frontends ⚡</title>
      <dc:creator>Meer Hamza</dc:creator>
      <pubDate>Wed, 10 Aug 2022 09:09:57 +0000</pubDate>
      <link>https://dev.to/meerhamzadev/microfrontends-an-approach-toward-scalable-frontends-33p4</link>
      <guid>https://dev.to/meerhamzadev/microfrontends-an-approach-toward-scalable-frontends-33p4</guid>
      <description>&lt;p&gt;In this article, we will talk about micro frontends like what are they, why and when to use them, what are their characteristics, and what are their pros and cons. But before diving into micro frontends the understanding of monolith and microservices are mandatory as they are the foundation to understand this architecture. So, let's take a look at them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Mono to Micro
&lt;/h2&gt;

&lt;p&gt;In the earlier days of development, the structure of the applications looks something like this. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7Ykc-YPP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cihcgw6joyzphfkkmvj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Ykc-YPP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cihcgw6joyzphfkkmvj.png" alt="closed-application" width="447" height="447"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These types of applications are known as monolithic applications which consist of a single team and a single codebase. Such applications are tightly coupled. As the number of internet users grew over time this type of structure did not remain suitable for the applications and developers evolved this structure into a new structure that looks something like this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--x8saE5-O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opaq0wkegcw9sd51orjd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--x8saE5-O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opaq0wkegcw9sd51orjd.png" alt="frontend-backend image" width="587" height="467"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this evolved approach, the responsibilities and codebase are split into two teams frontend team that handles the client-side(UI) part of the applications and a backend team that deals with the server and database logic of the application. This approach gives a little flexibility to developers and allows them to either focus on the frontend or backend area of the application. But as the backend codebase grew it gives a similar sense to a monolith which makes it difficult to scale and manage. So the developers start thinking about how to break it into manageable chunks and then the concept of microservices came into being. The structure of a microservice looks something like this.    &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7mR1iuAc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exlkqoegn8dlnbgfmw4b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7mR1iuAc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exlkqoegn8dlnbgfmw4b.png" alt="microservice image" width="716" height="365"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In a microservice structure, the backend is divided into independent services having a dedicated database for each of them. The services communicate with each other via RPC. This approach allows developers a great flexibility by enabling them to work on their services independently in their preferred tech stack without taking care of other services.So, it can say that the benefits of using microservice over the monolith approach would be:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It is easy to scale because we are scaling individual service.&lt;/li&gt;
&lt;li&gt;It makes a system fault tolerant by eradicating the single point of failure.&lt;/li&gt;
&lt;li&gt;Dividing the codebase into logical services makes it easier to understand.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now let's shift our focus toward microfrontends.&lt;/p&gt;

&lt;h2&gt;
  
  
  MicroFrontEnds
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What is Microfrontend?
&lt;/h3&gt;

&lt;p&gt;In simple words, we can say that microfrontend is a microservice that exists within a browser. Microfrontends are sections of your UI, often consisting of individual apps, and each app consists of several components. These apps build using different frontend frameworks and libraries like React, Vue, Svelte, Angular, etc, and looks something like this&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gpOpicHx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6gqj789a3cekh7war2b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gpOpicHx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6gqj789a3cekh7war2b.png" alt="micro frontends" width="711" height="361"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Why we need MicroFrontends?
&lt;/h3&gt;

&lt;p&gt;You might be thinking of why we need such architecture, Isn’t it complicating the whole development process? Isn’t our current approach fulfilling our requirements? Well technically Yes and No. Modern Applications becoming more frontend-focused and starting to have more logic and functionalities on the frontend. So as the application grew, we are finding ourselves in a similar situation we faced on the backend, where the frontend becomes monolithic and becomes difficult to manage. This approach also provides flexibility to new developers as they don’t need to familiarize themselves with the whole codebase. They only need to understand their specific app besides that this approach also allows them to work with their preferred frontend stack. But keep in mind this approach is not for small projects. If your frontend is not tolerant to the first 10,000 users in monolith it will not handle the next 10,000 in microfrontend. Now take a look at how we can split our frontend into microfrontend. &lt;/p&gt;

&lt;h3&gt;
  
  
  Categories of MicroFrontends
&lt;/h3&gt;

&lt;p&gt;The microfrontend divided into two main categories&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Horizontal Splitting&lt;/li&gt;
&lt;li&gt;Vertical Splitting&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Horizontal Splits
&lt;/h4&gt;

&lt;p&gt;In horizontal split, we identified microfrontneds within the same view and assigned them to different teams, so multiple teams take care of page composition through coordination for the final product for the user. In simple words, we split a view into multiple parts which are own by different teams. This approach looks something like this (as presented in the book &lt;a href="https://www.oreilly.com/library/view/building-micro-frontends/9781492082989/"&gt;Building Microfrontends&lt;/a&gt;)  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mxt0fnFC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in3jygvfkeu8pblrb7de.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mxt0fnFC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in3jygvfkeu8pblrb7de.png" alt="horizontal split" width="373" height="367"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Vertical Split
&lt;/h4&gt;

&lt;p&gt;In vertical split, we divided the frontend into logical domains like authentication UI, streaming UI, product UI, etc, and then assigned it to the teams. This makes teams their respective domain expert and gives them full autonomy over their domain. The visualization of vertical split is something like this. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aXPM1suA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpdbvz8vmb495mavh60g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aXPM1suA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpdbvz8vmb495mavh60g.png" alt="verticle split" width="803" height="403"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Best Practices
&lt;/h3&gt;

&lt;p&gt;There are some parameters you should take into count while following this approach.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Technology Agnostic&lt;/strong&gt; - It means each team should have the liberty to choose or upgrade their tech stack without having to coordinate with other teams.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Isolate Code&lt;/strong&gt; - It means you should build independent micro applications. They should not share each other's resources and runtime even if they are implemented on the same framework. They should have separate build and test pipelines and can be deployed as standalone applications and once a team completes its micro-frontend, they can add it to the main application which looks something like this.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XOa_o9tA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyh23947fsfh31jg3nz9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XOa_o9tA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyh23947fsfh31jg3nz9.png" alt="isolate the team" width="880" height="329"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now take a look at the pros and cons of microfrontend approach. &lt;/p&gt;

&lt;h3&gt;
  
  
  Pros of MicroFrontends
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;It provides teams the flexibility to choose their own tech stack.&lt;/li&gt;
&lt;li&gt;This approach allows the development of robust frontends as the whole frontend is decoupled which makes it highly fault tolerant. &lt;/li&gt;
&lt;li&gt;Testing becomes more simple because you only need to test your micro app without taking care of the rest.&lt;/li&gt;
&lt;li&gt;As it is already in your preferred tech stack and decoupled, modification is a lot easier. &lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Cons of MicroFrontends
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;This approach causes duplication of common dependencies as microfrontends are separate and independent apps, e.g all of your apps are in Reactjs and each app has its own react dependencies. &lt;/li&gt;
&lt;li&gt;As all of them are standalone apps, integrating them together can cause some unexpected issues e.g your react microfrontend working perfectly but when you integrate it into the rest of the application that builds on Vuejs and Angular, things start breaking.
&lt;/li&gt;
&lt;li&gt;It might be an expensive approach and could require a good number of resources. &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;So, these are some insights on micro-frontends and how we can apply this approach. Hope you like this and hope this will help you to decide whether this approach works for you or not.&lt;br&gt;
Bye Bye 👋, until the next time. &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>showdev</category>
      <category>architecture</category>
    </item>
    <item>
      <title>Year in Review 2021 - Google DSC, Microsoft LSA, Accrue Inc 📸💥</title>
      <dc:creator>Meer Hamza</dc:creator>
      <pubDate>Sun, 30 Jan 2022 15:39:00 +0000</pubDate>
      <link>https://dev.to/meerhamzadev/year-in-review-2021-google-dsc-microsoft-lsa-accrue-inc-hb3</link>
      <guid>https://dev.to/meerhamzadev/year-in-review-2021-google-dsc-microsoft-lsa-accrue-inc-hb3</guid>
      <description>&lt;p&gt;Last year, I wrote my first year in review, and I find this practice quite helpful to sit and get a flashback of my whole year and get insight from where I started and now where I’m standing. If you are interested in reading about my 2020 version, &lt;a href="https://dev.to/meerhamzadev/year-in-review-2020-48n2"&gt;click here&lt;/a&gt;. Now let’s begin my 2021 journey, Sit tight; it will be a bit long. &lt;/p&gt;

&lt;p&gt;2021 proved a completely unpredictable year for me. Things that I started in 2020 start paying off in 2021. I grew unexpectedly, got a chance to attend various conferences and meetups, and had the privilege to meet some fantastic people. I did lots of things which I can’t imagine. In short, 2021 is remarkable for me.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rejections😥
&lt;/h2&gt;

&lt;p&gt;Failure is an essential part of success. No one in the world succeeds on the first attempt, whether Edison or Turing. So, I started this review with the failures and rejections I faced throughout the year. Each time I fail, the more resilient I become. A significant rejection of mine in 2021 is MLH fellowship rejection. I applied in November and selected the summer cohort. Fortunately, my application got selected, and I received an email for scheduling my interview but the interview did not go so well, as it was my first, and I was rejected, but I learned a lot during the process. After that, I didn't stop applying; I applied for various positions in different companies, gave different hiring tests, but in most roles, I was rejected due to less experience, less score and some other factors. Still, I kept improving, and this didn't last long. I started receiving calls after tests/applications and even direct placement offers (but didn't proceed on them because all are in-person, and I'm still in the university). At last, I got a remote job in an international firm. The point to mention all this here is if you keep trying, nothing remains impossible or unachievable, but if you don't start, you don't succeed.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--C8mxQcbN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ald79eltavbwlwarazw2.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--C8mxQcbN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ald79eltavbwlwarazw2.jpeg" alt="rej" width="880" height="911"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Google Developer Student Clubs⚡
&lt;/h2&gt;

&lt;p&gt;Google Developer Student Clubs is a community-based program by Google for university students interested in tech. GDSC has been successfully operating in our university for the past two years. When the application for the 3rd cohort opened, I decided to apply for the GDSC lead but when I saw a video requirement in the application, I decided to quit my decision. One of our seniors, founder of GDSC in our campus, &lt;a href="https://linkedin.com/in/msaaddev"&gt;Saad Irfan&lt;/a&gt; motivated me to apply for the GDSC Lead. I applied and got the email of selection for the next round (interview), which was most challenging for me, but again a huge shoutout to Saad Irfan and &lt;a href="https://linkedin.com/in/iqrafatimame"&gt;Iqra Fatima&lt;/a&gt; (Lead of that time) for motivating and preparing me for the interview 🙌. About a month later, I received an email stating congratulations you are selected as a GDSC Lead of your campus 🎉🎉.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JHNrOcvE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rihdi7spt3w056kv9dha.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JHNrOcvE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rihdi7spt3w056kv9dha.png" alt="I" width="880" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The next big thing was the GDSC summit, where all leads around the country gathered, but due to covid, it was held online ☹. Although it was a good summit, the element of face-to-face conversation is still missing. So, Ma’am &lt;a href="https://www.linkedin.com/in/hmunawar"&gt;Hafsa Munawar&lt;/a&gt;, Google Community Manager, arranged a dinner with the collaboration of GDG Lahore for Leads of Lahore and nearby, where everyone gathered around and spent a fun evening✨.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sXJdHYcJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xluotfkp9zbo6gic6zm.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sXJdHYcJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xluotfkp9zbo6gic6zm.jpeg" alt="n" width="880" height="660"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Microsoft Learn Student Ambassador🔰
&lt;/h2&gt;

&lt;p&gt;In June, I applied for the Microsoft Student Ambassador program. &lt;a href="https://studentambassadors.microsoft.com/"&gt;Microsoft Learn Student Ambassadors&lt;/a&gt; is a program to bring together all the students from all over the world who have a passion for technology and help the community. There are four positions in the program New, Alpha, Beta, Gold. Those who are selected in the program start with the New position, the lowest rank in the program. Every Student Ambassador has to complete certain things to get promoted into Alpha and then to Beta. I also started as a New ambassador, and now I’m a Beta level Ambassador. The MLSA program allows me to meet amazing folks and help me to grow my network both personally and professionally.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--cl5Gxr3T--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i1qsf7lhqn5c6oegq05.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cl5Gxr3T--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i1qsf7lhqn5c6oegq05.png" alt="Image description" width="880" height="356"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Launch My Personal Website🚀
&lt;/h2&gt;

&lt;p&gt;In October 2020, I attended a webinar on &lt;strong&gt;tech profile building&lt;/strong&gt;, where the speaker emphasized the importance of a personal website and its necessity for a developer. After realizing this fact, I decided to create a website for myself. So, I started visiting personal sites for inspiration and started developing my website in November, but I was not satisfied with the initial results so, I decided to redesign everything. I did this almost three times and finally achieved my desired design. I built this website in Reactjs and SCSS with animations.&lt;br&gt;
Website Link: &lt;a href="https://meerhamzadev.web.app/"&gt;https://meerhamzadev.web.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ERPRgMVS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/343r0yumu1b6733m1xeb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ERPRgMVS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/343r0yumu1b6733m1xeb.png" alt="o" width="880" height="382"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Diving into Nodejs 🛠
&lt;/h2&gt;

&lt;p&gt;In the Sept of 2020, I started learning to react, and I have almost mastered it at the start of 2021. So I decided to move further and explore more on the tech ecosystem. I decided to learn the flutter and start my journey but soon realized that flutter was not for me. So I decided to dig more into the JavaScript ecosystem and start learning &lt;a href="https://nodejs.org/en/about/"&gt;Nodejs&lt;/a&gt;. My Nodejs journey is divided into two sections: &lt;strong&gt;Automation&lt;/strong&gt; and &lt;strong&gt;Backend Development&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;During my automation journey, I automated many small tasks and made small tools like jpg-to-docx converter, email-sender, create-react-app clone, etc., for practice purposes. I also made plenty of open-source contributions to such tools. Many people started asking me how to do automation and create such tools, so I decided to write the whole procedure in the form of an article and also create a template for this purpose. You can check out both Article(&lt;a href="https://dev.to/meerhamzadev/building-a-cli-tool-using-node-an-ultimate-beginners-guide-adj"&gt;Building CLI tool using Node&lt;/a&gt;) and Template(&lt;a href="https://github.com/meerhamzadev/node-cli-template"&gt;Node CLI Template&lt;/a&gt;).&lt;/p&gt;

&lt;p&gt;The backend journey is a great one too. I start from small CRUD apps with express and MongoDB. I also created some big projects using express, mongo, mysql, web sockets (implement real-time chat in it), and Kafka (for real-time data used for maps in a semester project). While learning the backend, I learned a lot about the working of the web and its core components. It helps me in understanding how things work under the hood. I plan to go deeper into the backend and its technologies in 2022.&lt;/p&gt;

&lt;h2&gt;
  
  
  Hacktoberfest 2021🎃
&lt;/h2&gt;

&lt;p&gt;In 2020, I participated in the hacktoberfest for the first time. You can read about my first experience of hacktoberfest &lt;a href="https://dev.to/meerhamzadev/my-experience-as-a-newbie-in-hacktober-fest-2020-4695"&gt;here&lt;/a&gt;. I was eagerly waiting for hacktoberfest 2021. So, when it came, I utilized it well and contributed code to some quality repos. My hacktoberfest contributions consist of &lt;a href="https://github.com/space-voyager-21/space-voyager/pull/25"&gt;implementing map tracking for the ISS&lt;/a&gt;(International Space Station), &lt;a href="https://github.com/Abhiramborige/react-app-mahabharath/pull/22"&gt;Making a Website PWA&lt;/a&gt;, &lt;a href="https://github.com/cdthomp1/mongo-express-node-template/pull/12"&gt;Converting a template into a full-fledge CLI tool&lt;/a&gt;, and &lt;a href="https://github.com/greenpress/greenpress/pull/122"&gt;fixing bugs in the green-press CLI&lt;/a&gt;. I not only finished my hacktoberfest but also organized a workshop for students from the platform of GDSC with ACM, where a good number of folks participated and started their hacktoberfest journey.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--o_IIxu3m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy0n4zsjjtr5x2fvi7mz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--o_IIxu3m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy0n4zsjjtr5x2fvi7mz.png" alt="cription" width="880" height="408"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  OpenSource Journey🥂
&lt;/h2&gt;

&lt;p&gt;Last year, I started my open-source journey after the hacktoberfest. Since then, I have been actively contributing to Open Source. I explored a variety of stuff this year and tried to implement my learning to benefit others. My most contributions are in the JavaScript ecosystem, where I contributed to technical documentation, front-end, backend projects, and command-line tools. I raised almost 24 pull requests in different repositories throughout the year, and all got merged 🥳.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--al5MuA7a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6laayl24272w1iu5c7cw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--al5MuA7a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6laayl24272w1iu5c7cw.png" alt="iption" width="880" height="642"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Joining Accrue Inc💥
&lt;/h2&gt;

&lt;p&gt;I have been working in react and front-end technologies from the sept of 2020, and I got into the industry soon in the form of ArcCode, but as it's a service-based startup, I didn’t get many chances to polish my skills. So, I decided to move on and find new opportunities. Luckily, I found my way into &lt;a href="https://accrue.com/"&gt;Accrue Incorporation&lt;/a&gt; in November.&lt;br&gt;
Accrue is a US-based fintech company that builds financial market software by making complex analytics feasible and taking nothing for granted. I got a chance to work as a front-end developer with a fantastic team of developers. I worked on the almanac-chatteau project of the company. Unfortunately, I got to work there only for one month because the company has abandoned the project due to the high consumption of resources. Still, the whole working experience and the environment were tremendous.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wjPArtIb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mavtdsafdkcxg9vmmgsj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wjPArtIb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mavtdsafdkcxg9vmmgsj.png" alt="tion" width="880" height="403"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Devfest'21👨‍💻
&lt;/h2&gt;

&lt;p&gt;DevFest, The developer festival is one of the larger-scale community-driven tech conferences organized by the Google Developer Group (GDG) around the globe. This year, GDG Lahore organized the devfest physically. It happened in the mid of December at the University of Central Punjab (UCP). It was my first major physical event after covid; I and some other GDSC Lead from Lahore helped the GDG team to organize this mega event 😁. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KAXGw5vQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cyy4zahildxj26b5evt.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KAXGw5vQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cyy4zahildxj26b5evt.jpeg" alt="Ima" width="672" height="505"&gt;&lt;/a&gt;&lt;br&gt;
The whole event was a great experience. I got a chance to meet some internet friends face to face and also got the opportunity to make some new friends 🤞.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6KkzFk1G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8tgen2uladczswcwyl8.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6KkzFk1G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8tgen2uladczswcwyl8.jpeg" alt="Imaption" width="880" height="495"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Talks🗣
&lt;/h2&gt;

&lt;p&gt;Google Developer Student Clubs and Microsoft Student Ambassador provide me a platform to conduct workshops, deliver talks, organize boot camps and speaker sessions. I have spoken in various sessions in my, and other universities. The list of my talks are: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;GDSC UET Info Session&lt;/strong&gt; &lt;br&gt;
Once I was selected as a GDSC lead, I decided to spread awareness in my juniors about this incredible community. For this purpose, I organized an introductory virtual session about GDSC and what it will bring for students. This was my first session, and I was excited and nervous simultaneously, but everything went well, and I received an overwhelming response from my juniors. Those who attended and those who didn’t show the same interest and were equally excited to become a part of our GDSC family.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Q/A session about GDSC CUI&lt;/strong&gt;&lt;br&gt;
One of our fellow leads, &lt;a href="https://ansar-javaid.wixsite.com/ansar-portfolio"&gt;Ansar Javaid&lt;/a&gt; from the Comsats University Islamabad, Abbottabad Campus, approached me and asked me if I was available for a Q/A session related to GDSC as it was their first chapter. I and three other leads were the speakers, and we talked about different things related to GDSC. Everything went well, and we received a great response from attendees.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Webinar on Git/Github&lt;/strong&gt;&lt;br&gt;
Version Control is one of the essential skills for a developer. So, I decided to equip our community with this. For this purpose, I organized a session on the basics of version control and its tools, Git and Github. I talked for almost 2 hours about git&amp;amp;gitHub and demonstrated how to use them. It was a great session, and again, we received a pretty positive response. My friend Ansar approached me again and told me, “We want to organize a workshop on the same agenda and want to have me as a speaker”. I agreed and also talked about version control from the platform of &lt;a href="https://gdsc.community.dev/comsats-university-abbottabad-campus/"&gt;GDSC CUI Abbottabad&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Android Seekho&lt;/strong&gt;&lt;br&gt;
Android Seekho is a newly launched android study jam by Google. When our community manager Hufsa introduced us to this program, she advised us to spread the word in our communities. So, I organized an information session related to android seekho and kotlin, where many folks participated and started their android journey through android seekho.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;HTML/CSS Workshop&lt;/strong&gt;&lt;br&gt;
Many of our new members are interested in the domain of the web. So, we decided to organize a Web Bootcamp for them. On our first day of the boot camp, we arranged a session on Career in Web, where our guest speaker &lt;a href="https://www.linkedin.com/in/saad-haxxan"&gt;Saad Hassan&lt;/a&gt; gave a detailed overview of the field of web and web industry in Pakistan. The second day we arranged a session on the topic Basics of the web, where I talked about how the web works and also demonstrated a hands-on workshop on HTML and CSS.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Despite these workshops, I also helped many students who approached me via LinkedIn and other platforms.&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrapping Up🙌
&lt;/h2&gt;

&lt;p&gt;No doubt, 2021 was the most different year of my life. For me, It was one of the best years. This year, many things happened, but I only mentioned the most significant parts. That's all for my 2021, and I’m super excited for my 2022 and hope this year will be better for me ✌.&lt;/p&gt;

</description>
      <category>yearinreview</category>
      <category>progress</category>
      <category>community</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Building a CLI tool using node - An Ultimate Beginners guide 🚀</title>
      <dc:creator>Meer Hamza</dc:creator>
      <pubDate>Mon, 06 Dec 2021 18:00:20 +0000</pubDate>
      <link>https://dev.to/meerhamzadev/building-a-cli-tool-using-node-an-ultimate-beginners-guide-adj</link>
      <guid>https://dev.to/meerhamzadev/building-a-cli-tool-using-node-an-ultimate-beginners-guide-adj</guid>
      <description>&lt;h2&gt;
  
  
  What is a CLI Tool
&lt;/h2&gt;

&lt;p&gt;A tool that allows you to perform certain tasks or operations right from your terminal is a CLI tool.&lt;/p&gt;

&lt;p&gt;As a programmer 👨‍💻, we use CLI tools on daily basis, from creating projects to managing versions of the projects, CLI is everywhere. In this article, we will explore how you can create a CLI tool on your own from scratch and publish it on npm. We will use Nodejs for this purpose, but first, let’s understand what are the perks of using nodejs:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Nodejs has a handful of packages and libraries to do a variety of tasks.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.npmjs.com/" rel="noopener noreferrer"&gt;npmjs&lt;/a&gt; is the world's largest software registry with thousand of packages, where we can publish ours.&lt;/li&gt;
&lt;li&gt;By creating a CLI in node:

&lt;ul&gt;
&lt;li&gt;We can automate repetitive tasks.&lt;/li&gt;
&lt;li&gt;We can create and publish open-source npm packages like create-react-app.&lt;/li&gt;
&lt;li&gt;We can create troubleshooting tools, etc&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;To build a CLI in Node, you should have the prior knowledge of:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Fundamental JavaScript (not vanilla)&lt;/li&gt;
&lt;li&gt;Basics of nodejs &amp;amp; npm&lt;/li&gt;
&lt;li&gt;Asynchronous JavaScript&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In this article, we will create a CLI tool that generates random passwords from your terminal.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting up the project
&lt;/h2&gt;

&lt;p&gt;First, we will create a directory that will keep our cli code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;random-password-generator
&lt;span class="nb"&gt;cd &lt;/span&gt;random-password-generator
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After creating the project folder we have to initialize our nodejs project&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;npm&lt;/span&gt; &lt;span class="nx"&gt;init&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It will ask some questions from you, you can also use &lt;code&gt;npm init -y&lt;/code&gt; to set the default values. This will create a package.json file.&lt;/p&gt;

&lt;h3&gt;
  
  
  What is package.json file
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;package.json&lt;/code&gt; file is the heart of any Node project. It records important metadata about a project which is required before publishing to npm, and also defines attributes of a project that npm uses to install dependencies, run scripts, and identify the execution point to our package.&lt;/p&gt;

&lt;h2&gt;
  
  
  Creating the CLI tool:
&lt;/h2&gt;

&lt;p&gt;Create a file &lt;code&gt;index.js&lt;/code&gt; in the root of the project directory. This will be the main starting point of the execution and it'll run all the associated functions and commands.&lt;br&gt;
Now let's begin to create our cli tool. Our cli tool consists of the following features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Randomly generates strong passwords.&lt;/li&gt;
&lt;li&gt;Automatically copy passwords to the clipboard, when created.&lt;/li&gt;
&lt;li&gt;Have a history feature that shows the lastly created password.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To implement the random password generation functionality paste the following code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;chars&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&amp;amp;*()ABCDEFGHIJKLMNOPQRSTUVWXYZ&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;passwordLength&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;passwordLength&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;randomNumber&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;random&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;chars&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;chars&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;substring&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;randomNumber&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;randomNumber&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will generate a random password on every run.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6vflapi5fhm4q3ccz1ye.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6vflapi5fhm4q3ccz1ye.png" alt="Console Output"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Perfect, a strong random password is generating on every run but if you notice to generate the password you have to run &lt;code&gt;node index.js&lt;/code&gt; every time which is not ideal, especially in the case of a cli tool. We are supposed to write a command for example &lt;strong&gt;passgen&lt;/strong&gt; or &lt;strong&gt;pswdgen&lt;/strong&gt; to generate the passwords. So, to achieve this functionality we have to modify our &lt;code&gt;index.js&lt;/code&gt; and &lt;code&gt;package.json&lt;/code&gt; files. In the index.js file add this line&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;#!/usr/bin/env node&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above line is called shebang. It tells the system to execute the code using the node environment. Make sure to add it to the first line of your main execution file. In &lt;code&gt;package.json&lt;/code&gt; add the following code above the &lt;strong&gt;main&lt;/strong&gt; key in such format "main-command-name": "main-file-path", In our case:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"bin"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"pswdgen"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"./index.js"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, to generate the password you simply type pswdgen on the terminal but to enable it and test your cli locally you have to link it first. To link the cli run the following command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;npm&lt;/span&gt; &lt;span class="nx"&gt;link&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;if you face any error try to run it with a -f flag&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The output would be&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F174svpe7thfx0soew4m0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F174svpe7thfx0soew4m0.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we work on the auto copy feature of the cli. For this purpose, we use a package named &lt;a href="https://www.npmjs.com/package/clipboardy" rel="noopener noreferrer"&gt;clipboardy&lt;/a&gt;. To install run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;npm&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="nx"&gt;clipboardy&lt;/span&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mf"&gt;3.0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To automatically copy the password on the clipboard we simply have to add this line after the loop&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="nx"&gt;clipboard&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;writeSync&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Make sure you import clipboardy&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now, we implement a history feature through which we can view the lastly created password through the &lt;code&gt;-h&lt;/code&gt; or &lt;code&gt;--history&lt;/code&gt; flag. For this purpose, we use &lt;a href="https://www.npmjs.com/package/conf" rel="noopener noreferrer"&gt;conf&lt;/a&gt; package. But first, let's create the flag feature. We use &lt;code&gt;process.argv&lt;/code&gt;for this purpose, &lt;code&gt;process.argv&lt;/code&gt; is an inbuilt API used to get the arguments passed via command line like &lt;code&gt;-h&lt;/code&gt;. We will slice it to remove the first two indexes of it to get relevant data only.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;flags&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;argv&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now to store password we use the following code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;prevPassword&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Make sure to import and initialized conf as follow&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Conf&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;conf&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Conf&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To use &lt;code&gt;-h&lt;/code&gt; feature only when requested we make it sure to use the get history code of the conf in a &lt;code&gt;if&lt;/code&gt; statement as follow:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;flags&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-h&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;flags&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;--history&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;prevPassword&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Also make sure to use the mentioned code above the config.set code.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The output would be&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr14aae6v9pzhvzm88uds.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr14aae6v9pzhvzm88uds.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Our cli is complete 🎉🎉 but if you notice at the codebase all things are coded on a single function and file which makes codebase messy and also it will become hard to debug as it increases and the interface of the cli is also not good and user friendly, the user didn't get any idea of the password, as it copies on the clipboard or not.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzjt78dvv7kctejwr9hdd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzjt78dvv7kctejwr9hdd.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;First, instead of a single function let’s divide it into multiple functions according to their functionality. It will be divided into four functions &lt;code&gt;passwordGenerator&lt;/code&gt;, &lt;code&gt;copyToClipboard&lt;/code&gt;, &lt;code&gt;savePassword&lt;/code&gt; and &lt;code&gt;history&lt;/code&gt;. Now we will create a separate folder named &lt;code&gt;functions&lt;/code&gt; and create a file for each function respectively. Now, we work on the interface of the cli. For this purpose, we use 2 packages.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://www.npmjs.com/package/cli-welcome" rel="noopener noreferrer"&gt;cli-welcome&lt;/a&gt; for a welcome cli header&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.npmjs.com/package/chalk" rel="noopener noreferrer"&gt;chalk&lt;/a&gt; to style the output string.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To install cli-welcome, run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i cli-welcome
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We will create a folder name &lt;code&gt;utils&lt;/code&gt; and create a file &lt;code&gt;header&lt;/code&gt; in it where we add the following code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;welcome&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cli-welcome&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;welcome&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`password-generator-cli`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;tagLine&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`by Meer Hamza`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;bgColor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`#00ff00`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`#ffffff`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`randomly generates strong passwords`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;bold&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;clear&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;version&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`1.0`&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and now simply import this file and call the header function above all the function calls. This will generate this beautiful header&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2k34rv73gng5zct99awo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2k34rv73gng5zct99awo.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, in the &lt;code&gt;utils&lt;/code&gt; we create a file, name &lt;code&gt;cli&lt;/code&gt; or &lt;code&gt;body&lt;/code&gt; and paste the following code and its associated imports from the &lt;code&gt;index.js&lt;/code&gt; to it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Conf&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;flags&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;argv&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;flags&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-h&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;flags&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;--history&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nf"&gt;history&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;passwordGenerator&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="nf"&gt;copyToClipBoard&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nf"&gt;savePassword&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, we beautify the output and the copy to the clipboard message using the chalk. To install chalk, run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;npm&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="nx"&gt;chalk&lt;/span&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;4&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mf"&gt;1.2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, we will style different things like &lt;code&gt;password&lt;/code&gt;, &lt;code&gt;previous password&lt;/code&gt; etc. for example to style copy to clipboard message we write the following code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chalk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;gray&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Password copy to the clipboard&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The final look of the cli will be:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foc4yt0mkofio0rvl58w4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foc4yt0mkofio0rvl58w4.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;with  &lt;code&gt;-h&lt;/code&gt; flag&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft237y73zmf3iwu9qhq48.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft237y73zmf3iwu9qhq48.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Publishing the CLI tool
&lt;/h2&gt;

&lt;p&gt;After creating the cli, to make it accessible to everyone we publish it to &lt;a href="https://www.npmjs.com/" rel="noopener noreferrer"&gt;npm js&lt;/a&gt;, which is the home of thousands of packages, as a package. So, make sure you have created an account on the npmjs. After the account creation, run the following command in your terminal&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;npm&lt;/span&gt; &lt;span class="nx"&gt;login&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You will be asked to enter your username, password, and email. If all is correct, you will be logged in.&lt;/p&gt;

&lt;p&gt;Then, to publish your cli run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;npm&lt;/span&gt; &lt;span class="nx"&gt;publish&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command publicly published your cli on npm with the name specified in project's &lt;code&gt;package.json&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"package-name"&lt;/span&gt;&lt;span class="err"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It can also give the error if another package with the same name exists. Keep in mind there's a difference in &lt;code&gt;name&lt;/code&gt; and &lt;code&gt;command-name&lt;/code&gt; we specified in the &lt;em&gt;bin&lt;/em&gt; attribute, &lt;code&gt;name&lt;/code&gt; is used to download packages from npmjs while &lt;code&gt;command-name&lt;/code&gt; specified in the &lt;em&gt;bin&lt;/em&gt; used to run cli and functions. To install your package from &lt;em&gt;npm&lt;/em&gt; simply run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;npm&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;g&lt;/span&gt; &lt;span class="nx"&gt;pswd&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;generator&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;cli&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Whenever you make changes in the CLI, you have to change the version in the &lt;code&gt;package.json&lt;/code&gt; and then republished the changes otherwise it will give error.  &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Congratulations, you learned how to create a CLI tool using Node.js 🎉🎉. The sky is the limit, go create something awesome. I also created an open-source template so you don't need to start everything from scratch. &lt;br&gt;
&lt;a href="https://github.com/MeerHamza1421/node-cli-template" rel="noopener noreferrer"&gt;github.com/meerhamzadev/node-cli-template&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;code link: &lt;a href="https://drive.google.com/drive/folders/1ZiSjiD5EL-BjMtdS3Ovbib7FUIOW6O8-?usp=sharing" rel="noopener noreferrer"&gt;code&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>npm</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Year in Review-2020</title>
      <dc:creator>Meer Hamza</dc:creator>
      <pubDate>Tue, 19 Jan 2021 17:11:56 +0000</pubDate>
      <link>https://dev.to/meerhamzadev/year-in-review-2020-48n2</link>
      <guid>https://dev.to/meerhamzadev/year-in-review-2020-48n2</guid>
      <description>&lt;p&gt;2020 proved a great year for me from both personal and professional perspectives. This year, I learned a lot, try a lot of stuff, dig into different technologies, and most important I find my domain of interest. I spend this year with full productivity and positivity and achieved a lot, some of my achievements and events listed below.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;GitHub&lt;/li&gt;
&lt;li&gt;Skills&lt;/li&gt;
&lt;li&gt;HacktoberFest 2020&lt;/li&gt;
&lt;li&gt;Open Source&lt;/li&gt;
&lt;li&gt;Scholarship&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  GitHub⚡
&lt;/h1&gt;

&lt;p&gt;The first and the most important achievement of mine is to step into GitHub. I didn't know or even hear about it before a DSC seminar held in December 2019. I created my account on 10 Feb 2020 and will write an article about my 1 year on GitHub soon.&lt;br&gt;
&lt;br&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KCb9hFng--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/cww9u4uhx6meqlxowekz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KCb9hFng--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/cww9u4uhx6meqlxowekz.png" alt='"something went wrong"' width="753" height="501"&gt;&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;br&gt;
I learned a lot from GitHub and also avail Github Student Pack🧰,  In case if you don't know about student pack let's take a look: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Github's Student Developer Pack is one of the best resources that you can avail as a Student. The GitHub Student Developer Pack delivers $200k worth of stuff to every student by providing access to the best real-world tools and training required to get started as a developer.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It increased my productivity and boosted my skills. I do several courses from front-end Masters and get access to jet-brains and other world-class tools through this pack which proves great learning and development experience for me.&lt;br&gt;
&lt;br&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Ir8q0tXY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/vzl6fiy0pwurr0bkg8xi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ir8q0tXY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/vzl6fiy0pwurr0bkg8xi.png" alt='"something went wrong"' width="880" height="443"&gt;&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Skills⚙️
&lt;/h1&gt;

&lt;p&gt;If we talk about acquiring skills; 2020 is a game-changer for me. It was the most productive year of my life. Before 2020, I only have a little knowledge of C++ and have a bad habit of spoon-feeding. I overcome this and try a bunch of stuff to get my domain of interest. I tried cybersecurity, machine learning, android development, and web development. And, find web development my cup of tea. First, I find it a little tricky and hard to learn but focus and practice turn it into great fun and pleasure for me. After gaining a grip on the basics of  Html, CSS, and Javascript, I dived into React.js and build a lot in it with SCSS. I also learn about version control and set hands on Git. Also, learn how to make GUI based desktop applications using C++. Also, learn the basics of flutter and have a plan to dive deep into it 🙌. &lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Hactober-Fest 2020💥
&lt;/h1&gt;

&lt;p&gt;This year, I also participated in hactober-fest and it was a tremendous experience for me. It was my first step into the amazing world of open-source. It was great fun and I successfully completed my 4 PRs and earned a Tee-shirt and a cool swag 🎉🥳.&lt;br&gt;
&lt;br&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7QnqoN76--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5hndbhc4o21mz1gi8130.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7QnqoN76--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5hndbhc4o21mz1gi8130.png" alt="Alt Text" width="880" height="439"&gt;&lt;/a&gt; &lt;br&gt;
&lt;br&gt;&lt;br&gt;
If you want to know more about hacktober-fest and my experience in it check out this article &lt;a href="https://dev.to/meerhamza1421/my-experience-as-a-newbie-in-hacktober-fest-2020-4695"&gt;My experience in hacktober-fest 2020&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Open Source🌐
&lt;/h1&gt;

&lt;p&gt;After hacktober-fest, I start contributing to open-source. In case if you don't know about open-source softwares let's take a look: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Open source softwares are softwares with source code that anyone can inspect, modify, and enhance.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I contributed to different repos by solving a handful of both technical and non-technical issues. It proved a great experience from both learning and collaboration perspective. I communicate with awesome people and understand codes of different signatures which is great fun. My Github's 2020 stats given below:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TnZQOj7m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fyddbtuvpt15c7y646yh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TnZQOj7m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fyddbtuvpt15c7y646yh.png" alt="Alt Text" width="600" height="699"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Some of the solved issues:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---qyLx-Vp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/8uodp0iac0fei0xiolle.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---qyLx-Vp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/8uodp0iac0fei0xiolle.png" alt="Alt Text" width="483" height="156"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mx44vFzj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zieu7yohsfftp193uwt6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mx44vFzj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zieu7yohsfftp193uwt6.png" alt="Alt Text" width="686" height="115"&gt;&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;br&gt;
Due to personal and open-source contributions, I also listed as one of the active Github users in Pakistan🇵🇰🎉&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IPlqG5lQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/xdu2aby109d0s7nfdqto.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IPlqG5lQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/xdu2aby109d0s7nfdqto.png" alt="Alt Text" width="335" height="74"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Scholarship👨‍🎓
&lt;/h1&gt;

&lt;p&gt;In the mid of October, I was shortlisted as one of the selected candidates for the Ehsaas Scholarship program🎉. If you don't know about the Ehsaas Scholarship program let's take a look: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The Ehsaas undergraduate scholarships initiative is the largest undergraduate scholarship program in Pakistan. It is a 4-year program that covers 100% of the tuition fee and also provides a stipend to students.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It's one of the greatest news of 2020&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sP9e8ygm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/kzqo71l7wbi214eztuc3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sP9e8ygm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/kzqo71l7wbi214eztuc3.png" alt="Alt Text" width="880" height="395"&gt;&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Wrapping Up🙌
&lt;/h1&gt;

&lt;p&gt;No doubt, 2020 was the most diverse and unpredictable year. Strange events, unpredictably long lockdowns, disturbed life, and much more.&lt;br&gt;
For me, it's a great productive year. I achieved a lot this year and mention some significant achievements✨ here. For 2021, I'm super excited and hope to achieve more this year. That's all from my 2020🤝&lt;/p&gt;

</description>
      <category>yearinreview</category>
    </item>
    <item>
      <title>My Hacktober-Fest 2020 experience</title>
      <dc:creator>Meer Hamza</dc:creator>
      <pubDate>Sat, 10 Oct 2020 04:24:16 +0000</pubDate>
      <link>https://dev.to/meerhamzadev/my-experience-as-a-newbie-in-hacktober-fest-2020-4695</link>
      <guid>https://dev.to/meerhamzadev/my-experience-as-a-newbie-in-hacktober-fest-2020-4695</guid>
      <description>&lt;p&gt;Yes, guys, it’s October and we all know the awesome HacktoberFest happens in the month of October. Where people around the globe participate and contribute to open source. At any chance, if you don’t know about HactoberFest let’s take a glimpse:&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;What is HacktoberFest&lt;/strong&gt;:
&lt;/h3&gt;

&lt;p&gt;HacktoberFest is an event open for everyone in our global community. Whether you’re a developer, student learning to code, event host, or company of any size, you can help in the growth of open source and make positive contributions to the community. All backgrounds and skill levels are encouraged to complete the challenge.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; HacktoberFest is a celebration open to everyone in our global community.&lt;/li&gt;
&lt;li&gt; Pull requests can be made in any GitHub-hosted repositories/projects.&lt;/li&gt;
&lt;li&gt; You can sign up anytime between October 1 and October 31.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;RULES&lt;/strong&gt;:
&lt;/h3&gt;

&lt;p&gt;To earn your HacktoberFest tee or tree reward, you must register and make four valid pull requests (PRs) between October 1-31 (in any time zone). PRs can be made to any public repo on GitHub. If a maintainer reports your pull request as spam or behavior, not in line with the project’s code of conduct, you will be ineligible to participate. This year, the first 70,000 participants who successfully complete the challenge will be eligible to receive a prize. You can also grab one, Do sign in:  &lt;a href="https://hacktoberfest.digitalocean.com/"&gt;https://hacktoberfest.digitalocean.com/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;My Experience&lt;/strong&gt;:
&lt;/h2&gt;

&lt;p&gt;As a developer and student, it’s my first event and I enjoyed it a lot. I learned a bunch of new stuff and also improved previous stuff a lot. I understand the power of the open source. It clears lots of my confusions and insecurities related to open source. It told me ‘&lt;em&gt;why open source is necessary&lt;/em&gt;’. I collaborate with new people. Able to understand the codes of different signatures. Learn many new and professional programming practices. Learn how to merge your code in other’s code which is a plus point for me. I recognized my weak points. Long story short it's a great experience for me. Yesterday, I completed my 4 PRs and I am very happy🥳🥳.    &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Suggestion&lt;/strong&gt;:
&lt;/h3&gt;

&lt;p&gt;It's a humble suggestion to all newbies, go and participate in it no matter what's your skill level. It would be a great experience for you all. &lt;/p&gt;

</description>
      <category>hacktoberfest</category>
      <category>github</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
