DEV Community: Megha Pathak

5 steps for Making Your First Open Source Contribution

Megha Pathak — Thu, 03 Jun 2021 09:58:36 +0000

Hey Everyone! Long time.👋🏻

It's been a long since I wrote something on my personal blog. So if I am resuming it, I will do it in style.
There is a gift for you in this article of mine. By the end of this article, you will make your First Open Source contribution. ✨

Before we start with the question - How to make your first contribution to Open Source?

We should first understand what Open Source Development is. Anyone who is reading the word Open Source Development for the first time, let me define it for you (because you will encounter this word A LOT in this article).

Now, let's find your first Open Source Project

1. Your interest is the most important thing!

I couldn't find a bigger font to write this, so you understand the importance of this point is.

While finding an Open Source project, consider your interests as the foremost thing. Your interest may or may not relate to your day job. It should be something you are really passionate about. It can be anything - Food Softwares, Design tools, Music Softwares, anything that you genuinely appreciate.

Open-source contributions won't feel like "work" if you take care of this point.

2. Figure out how you can help this Open Source project

Fill out this sentence before you jump to the actual contributions:

I can help you with ____________ .

You do not necessarily need to contribute to an Open Source Project with code only. Open Source Development and Contributions goes way beyond code too.

You can help the Open Source project and org with -

Documentation
Design
Social Media Writing
Project Management
Code Reviews
Organizing Meetups and Events

And the list doesn't end here. You can find your own unique way of helping an Open Source Project.

3. Finding an Open Source Organization

There are numerous ways of finding an Open Source Org. Open Source programs like GSoC, GSoD, Hacktoberfest, Linux foundation, etc., act instrumental in this process and make it easier for people to find Open Source orgs. But you don't need to limit yourself till there. Simple searches over the internet can help you find the Open Source Org that inclines with your interests.

4. Once you find an Open Source Project, it is important to understand what you are getting into

There will be hundreds of words that you don't know the meaning of. So it's essential to understand what you are getting into.

There are three best friends you have for this 👇🏻

But when you go through the codebase, documentation, and community. There will be some common Jargons that you will come across. Let's try to demystify some common Jargons for you -

Issues - Issues is a tracking tool that is integrated with the development repository. And as the name suggests, if someone encounters an issue in the project, they can list it using the Issues section.
Mailing List - Open Source orgs generally use mailing lists as Virtual Committees to talk to their community and contributors.
Pull Requests - This is a very vital part of Open Source Development. A pull request is a method of submitting contributions to an open development project. A pull request occurs when you ask for changes committed to an external repository to be considered for inclusion in a project's main repository.
Contributing - These are the guidelines you need to follow if you want to contribute.
ReadMe - This carries all the general information about the project, like how to set it up locally, what the project is about, etc.
Community - This comprises the group of people who are using the project or simply interested in it.
Contributor - Anyone whose Pull request is merged in the main project is considered as a Code Contributor (but as we discussed above, there are others ways of contributing as well).
Chat Channels - Mode of communication where you can discuss your queries about contributing to the project. These are Gitter, IRC, or Slack channels generally.
**Maintainer - **This can be one or more people who build source code into a binary package for distribution, commit patches, or organize code in a source repository.

5. Start Contributing without overthinking

The fifth step is simple - You have to stop overthinking that you are competent enough or not for making an Open Source Contribution.

There will definitely something that you can help with, as long as you are open-minded and willing to explore and learn new stuff.

As I promised to you, by the end of this article, you will make your First Open Source contribution. So let's begin with it 🌟

We will take help of our above checklist -

So, our first step was finding something that Interests you!

Does Hashnode Interest you?

If yes, then voila!

✅ Step 1 is done.

We have Hashnode Support Docs Open Sourced for you so that you can contribute to it.

Step 2 was finding your Value Proposition

There are different ways you can contribute to Hashnode Support Docs. Whatever way you choose is totally up to your interest.

For example:

✅ Some 0th level contributions can be:

Sharing about the Open Source Project (in this case, the Hashnode Support Docs) on the Social Media Channels so that more people can discover it.
Sharing the Hashnode Support Docs with anyone who has some queries that can be resolved using the docs.

✅ Some minor contributions can be:

If you see some bug or want to suggest some optimization in the Hashnode Support Docs, then Opening an Issue for the same.
Finding and reporting Typos in the Docs.
You can help people understand the Contribution guidelines of the project.

✅ Some major contributions can be:

You can contribute guides about any section of Hashnode that can be helpful to Hashnode Users.
You can contribute to Hashnode Support Docs by adding some new features to the site.
You can improve the existing documentation by rephrasing it.
You can do code reviews if you see someone opening a PR and making a code contribution.

Step 3 is already covered, so jumping to Step 4.

Step 4 was understanding what you are getting into.

Once you decide how you want to contribute to the project, it's time to go through the Documentation, Codebase, and Community.

Hashnode's Support Docs' Codebase here. You can fork this project.
The documentation you must go through is the README.md and CONTRIBUTING.md of the project.
The community is here and we have a discord server where you can ask your queries.

Step 5, as suggested above is not to overthink.

And once you make your first contribution, remember to keep the loop of contribution and communication alive. By doing this, you will be able to inspire more people to contribute and make the world of Open Source a long-term thing for you.

Lastly, I want to mention, once you make your contribution, it's essential to have patience. Your contributions will be acknowledged definitely and positively. But like every good thing it takes a little time. 🌟

I can't wait to see your contributions rolling!

Feel free to comment here if you have any follow-up questions 😊

Learn concepts of Vanilla JavaScript while building a Privacy Card Game in 5 easy Steps.

Megha Pathak — Tue, 04 Aug 2020 03:27:52 +0000

Is Vanilla JS even important to learn?

VanillaJS is a name to refer to using plain JavaScript without any additional libraries.

Now you may ask — Is it worth to spend time on learning Vanilla JS when we have so many frameworks around making development process and efficient for us?

If your knowledge is limited only to a single JavaScript framework, you will have a hard time learning a new one. All the JavaScript frameworks and libraries are inevitably based on its Vanilla core. This should convince anyone that knowledge of a pure JavaScript is a must in the long run. — David Kopal

That said, it is true that investing time in Vanilla JavaScript will pay off in the long run. So keeping this significance of Vanilla JS in mind, let’s dive in this tutorial to understand JavaScript concepts along with creating an interesting game.

What are we making?

Demo

Story behind this Project

If you are into stories like me, then you might be interested in knowing — How I came up with the idea of this project? (If you are not interested in knowing this story, skip to the next section to understand the Project Structure).

Some years ago, when I was in school, I attended a seminar about Cyber Security. So when I came across an article about Cybersecurity few months aback, it strikes to me that the whole seminar I attended back in school can be converted to a game to educate kids about Internet Privacy. So Let's Begin.

Step 1 - Understanding Project Structure and Setting Up files

I personally use Visual Studio Code, you can use any IDE you like. The first step is to create the following files with the right extension attached to them.

Step 2 - Creating skeleton of the project with HTML

Now we will create the basic skeleton of our project using HTML. This file will be called index.html.

Give your brain time to think, what will constitute to the structure of this game.

Now start writing down the components -

You are creating a game, so ofcourse there will be a game-board.
Then the game board is divided into hacker-area and player-area.
We are also needed to recorded Life value of both Hacker and You, so that we can calculate the winner. Let's say these stats, hacker-stats, player-stats, life-bar, life-left, life-total.
We also have cards and text(scenarios) written on them, with certain power as well that is revealed after the player chooses any card. We will call these as, card, hacker-card, player-card, text and power.
We have few buttons such as, Next(to bring the next scenarios to the player), start-game button to start the game.
Lastly, we have a winner-section to show the winner-message to notify the player, whether s(he) lost or won against the hacker, and the option for playing the game again, restart.

Each part we discussed in the above points, will serve as an individual class. We have used classes for dividing the components, so that we can use document.querySelectorAll for adding behavior to our game.

You can read more about queryselector and classes here - document.querySelectorAll and Classes in JavaScript

Now we will create the

tag to define the above divisions. Like this -

<div class="game-board">
    <div class="hacker-area">
        <h1>
          <strong>HACKER CARDS</strong> <br/> Choose the best card to stop the hackers' attack
        </h1>
    </div>
</div>

Note - Nest div sections in the right way. Ex - All the other divisions will come under game board, life-bar will come under stats and so on.

Try yourself to create the whole HTML skeleton like this, you can also refer to the code file here.

Steps 3 - Adding Scenarios using a JavaScript Object

Now we will be adding scenarios with a JavaScript Object. There will be 1 hackerCard per scenario and 3 playerCards per scenario. We will write these in the cards.js file. Scenario number 1 will look like this -

var scenarios = [
  {
    hackerCard : {
      description : "I set up a fake Wi-Fi station to steal people’s email and track them online.",
      power : 4,
    },
playerCards : [
      {
        description : "I never use public wifi networks.",
        power : 5,
      },
      {
        description : "I browse the web, but I never do any personal business on a public wifi network.",
        power : 3,
      },
      {
        description : "I connect to any wifi network I can use in public.",
        power : 1,
      }
    ]
  },
];

You can add as many as scenarios you want. I have kept 8 different scenarios, you can refer to them here

Read more about Objects in JavaScript here

Step 4 - Adding behavior to the project with a Script

Our script.js file will contain several functions that will add behavior to our projects. So let's start writing these functions.

First things first, set the starting life totals here

var playerLife = 5;
var hackerLife = 5;

Read more about variable declaration here

Now the Message that will appear when the game is over

var hackerWinnerMessage = "Game over: You got hacked!";
var playerWinnerMessage = "You defeated the hacker!";

Game code starts here

var playerStartLife = parseInt(playerLife);
var hackerStartLife = parseInt(hackerLife);

var roundFinished = false;
var cardSelected = false;

updateScores();

document.querySelector(".game-board").classList.add("before-game");

var allCardElements = document.querySelectorAll(".card");

Now let's add click handler to all player card elements

for(var i = 0; i < allCardElements.length; i++) {
var card = allCardElements[i];
if(card.classList.contains("player-card")) {
card.addEventListener("click",function(e){
cardClicked(this);
});
}
}

We need a function that will execute when a card is clicked

function cardClicked(cardEl) {

  if(cardSelected) { return; }
  cardSelected = true;

  cardEl.classList.add("played-card");

  document.querySelector(".game-board").classList.add("card-selected");

### To wait 500ms to reveal the hacker power

  setTimeout(function(){
    revealHackerPower();
  },500)

Waits for 750ms to reveal the player power

 setTimeout(function(){
    revealPlayerPower();
  },800)

Waits for 1250ms to compare the card scores

 setTimeout(function(){
    compareCards();
  }, 1400);
}

Read more about the set timed out function here.

Now we gotta show the power level on the player card

function revealPlayerPower(){
  var playerCard = document.querySelector(".played-card");
  playerCard.classList.add("reveal-power");
}

Read more about classList and its functionality here.

Similarly a function to show the power level on the hacker card

function revealHackerPower(){
  var hackerCard = document.querySelector(".hacker-card");
  hackerCard.classList.add("reveal-power");
}

A function for comparing the cards based on their power value.

function compareCards(){
  var playerCard = document.querySelector(".played-card");
  var playerPowerEl = playerCard.querySelector(".power");

  var hackerCard = document.querySelector(".hacker-card");
  var hackerPowerEl = hackerCard.querySelector(".power");

  var playerPower = parseInt(playerPowerEl.innerHTML);
  var hackerPower = parseInt(hackerPowerEl.innerHTML);

  var powerDifference = playerPower - hackerPower;

  if (powerDifference < 0) {
    // Player Loses
    playerLife = playerLife + powerDifference;
    hackerCard.classList.add("better-card");
    playerCard.classList.add("worse-card");
    document.querySelector(".player-stats .thumbnail").classList.add("ouch");
  } else if (powerDifference > 0) {
    // Player Wins
    hackerLife = hackerLife - powerDifference;
    playerCard.classList.add("better-card");
    hackerCard.classList.add("worse-card");
    document.querySelector(".hacker-stats .thumbnail").classList.add("ouch");
  } else {
    playerCard.classList.add("tie-card");
    hackerCard.classList.add("tie-card");
  }

  updateScores();

  if(playerLife <= 0) {
    gameOver("Hacker");
  } else if (hackerLife <= 0){
    gameOver("Player")
  }

  roundFinished = true;

  document.querySelector("button.next-turn").removeAttribute("disabled");
}

Once the game is over we will use the following function to show the winner message.

function gameOver(winner) {
  document.querySelector(".game-board").classList.add("game-over");
  document.querySelector(".winner-section").style.display = "flex";
  document.querySelector(".winner-section").classList.remove("player-color");
  document.querySelector(".winner-section").classList.remove("hacker-color");

  if(winner == "Hacker") {
    document.querySelector(".winner-message").innerHTML = hackerWinnerMessage;
    document.querySelector(".winner-section").classList.add("hacker-color");
  } else {
    document.querySelector(".winner-message").innerHTML = playerWinnerMessage;
    document.querySelector(".winner-section").classList.add("player-color");
  }
}

When the Start button is clicked, this function will Start the game

function startGame() {
  document.querySelector(".game-board").classList.remove("before-game");
  document.querySelector(".game-board").classList.add("during-game");
  playTurn();
}

This function updates the displayed life bar and life totals

function updateScores(){

  // Update life totals for each player
  document.querySelector(".player-stats .life-total").innerHTML = playerLife;
  document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife;

  // Update the player lifebar
  var playerPercent = playerLife / playerStartLife * 100;
  if (playerPercent < 0) {
    playerPercent = 0;
  }
  document.querySelector(".player-stats .life-left").style.height =  playerPercent + "%";

  // Update the hacker lifebar
  var hackerPercent = hackerLife / hackerStartLife * 100
  if (hackerPercent < 0) {
    hackerPercent = 0;
  }
  document.querySelector(".hacker-stats .life-left").style.height =  hackerPercent + "%";
}

For shuffling the set of 3 player cards at each run we will use this shuffleArray function

function shuffleArray(a) {
  var j, x, i;
  for (i = a.length; i; i--) {
    j = Math.floor(Math.random() * i);
    x = a[i - 1];
    a[i - 1] = a[j];
    a[j] = x;
  }
  return a;
}

Plays one turn of the game

function playTurn() {

  roundFinished = true;
  cardSelected = false;

  document.querySelector(".game-board").classList.remove("card-selected");

  // Remove "ouch" class from player and hacker thumbnails
  document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch");
  document.querySelector(".player-stats .thumbnail").classList.remove("ouch");

  // Hides the "next turn" button, will show again when turn is over
  document.querySelector(".next-turn").setAttribute("disabled", "true");

  for(var i = 0; i < allCardElements.length; i++) {
    var card = allCardElements[i];
    card.classList.remove("showCard");
  }

  setTimeout(function(){
    revealCards();
  }, 500);
}

For revealing cards to the player

function revealCards(){
  var j = 0;
  var cardIndexes = shuffleArray([0, 1, 2]);

  // Get scenario cards
  console.log("scenarios.length == " + scenarios.length);

  var randomScenarioIndex = Math.floor(Math.random() * scenarios.length);
  var scenario = scenarios[randomScenarioIndex];
  console.log(scenario.hackerCard.description);

  scenarios.splice(randomScenarioIndex, 1);

  console.log("scenarios.length after splice == " + scenarios.length);

  var hackerCard = scenario.hackerCard;
  var hackerCardEl = document.querySelector(".hacker-area .card");

  // Contents of the player cards
  var playerCards = scenario.playerCards;

  for(var i = 0; i < allCardElements.length; i++) {
    var card = allCardElements[i];

    card.classList.remove("worse-card");
    card.classList.remove("better-card");
    card.classList.remove("played-card");
    card.classList.remove("tie-card");
    card.classList.remove("prepared");
    card.classList.remove("reveal-power");

    // Display the payer card details
    if(card.classList.contains("player-card")) {
      card.querySelector(".text").innerHTML = playerCards[cardIndexes[j]].description;
      card.querySelector(".power").innerHTML = playerCards[cardIndexes[j]].power;
      j++;
    }

    // Reveal each card one by one with a delay of 100ms
    setTimeout(function(card, j){
      return function() {
        card.classList.remove("prepared");
        card.style.display = "block";
        card.classList.add("showCard");
      }
    }(card,i), parseInt(i+1) * 200);
  }

  // Display the hacker card
  hackerCardEl.querySelector(".text").innerHTML = hackerCard.description;
  hackerCardEl.querySelector(".power").innerHTML = hackerCard.power;
}

You can access to my scripts.js file here

Step 5 - Styling the Project

Congratulations! You have covered a big chunk of work till now, give yourself a pat on the back.
Now we will be adding styling to our project.

Styling that can be customized

First we have the customize.css file, that have the basic colors and background images that can be changed anytime to change the whole appearance of the project.

/* Change the colors in this stylesheet to customize the game. */ 

/* Player Styles */

.player-color {
  background-color: #2a79d0;
}

.player-area {
  background-color: #0d3158;
  background-image: url(images/chip.svg);
}

.player-card .power {
  background-image: url(images/shield.svg);
}

/* Hacker Styles */

.hacker-color {
  background-color: #ce3d20;
}

.hacker-area {
  background-color: #3c1912;
  background-image: url(images/chip.svg);
}

.hacker-card .power {
  background-image: url(images/skull.svg);
}

Note - The changes made to the customize.css file doesn't affect the functionality.
You can access the images required for the styling from here

Styling that adds to the functionality

You can try styling all the elements by using class selectors and the reveal animations by yourself, or you can simply take help of this file

What's Next?

If you have followed this article till now, you surely would be able to pull of the creation of whole game successfully. If you encounter any problem you can always refer to my code here.

If you liked this tutorial, share it with your friends and help them in creating there first JavaScript Project.

Stay tuned until the next simplified bomb of knowledge lands to your feed.

Keep Exploring! Keep Coding!

Why Product thinking is essential for Developers and how to apply it?

Megha Pathak — Sun, 17 May 2020 17:44:41 +0000

While developing a software product, product thinking is really important. There is a significant amount of considerations that must happen before an application reaches the market (and even if you are building a Personal Product/Project).

Product thinking is a critical process we should take into account as a first step, even before you think about your application's interface. So, the big question first-

What exactly Product Thinking is?

Product thinking allows you to create features that matter for the users of your products. It lets you see the product in context and not as a combination of features and design efforts.

And you know very well that Context is essential even in small Personal Projects. Because at the end of the day all want to make sure that they are tackling meaningful problems.

Now, you may ask -

What is the difference between Product Thinking and Project Thinking?

Project-oriented mindset (Project thinking) has been around for a long time and was indeed good at what was required of it. The Project Triangle includes - Project Scope, time, and budget. The project itself includes every component of development — from the idea to bug testing and release. Project thinking still works incredibly well, just on a different level than it used to.

But, project thinking alone is not enough for a significant market victory?

Why -

Because, as mentioned above it easy for developers to get bogged down in developing features. It’s not that features aren’t important but that they are often secondary to the reason a customer or user buys our product. That reason is simple; the user buys the product to solve a real world problem for themselves.

It is important to acknowledge that project thinking becomes much less useful when it comes to broader success.

Product thinking is not about local, but about global and grand.

Innovation clashed with legacy and product steadily takes the place of the project. - inVerita

Product thinking = Problem Solving.

So, What is a Problem?

The first step of product thinking is to determine the problem that your users are looking to solve. That’s the reason that they will buy your product (or even give feedback about on your product).

If the problem you choose doesn’t actually exist or the solution you propose doesn’t actually solve the problem – your products are going to be worthless to users.

Sure, there’s the possibility that if you get the solution wrong – you can fix it but if you solve a problem that doesn’t exist; there’s little you can do about that.

The Structure of Product Thinking

You begin with the user and determine:

What the problem is that you need to solve
The audience that you’re going to solve the problem for

Then you look at the job to be done:

Why are you doing this? (Vision)
How will we do this? (Strategy)

Finally you reach your outputs:

What exactly will you achieve? (Goal)

Therefore, developers should think in products first and features second. A smart combination of the project thinking and the product thinking is an optimal strategy for dominating your niche and reaching the set target on time.

Do you have any questions about Product thinking? Ask them in the discussion below.