<?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: Indira Kumar A K</title>
    <description>The latest articles on DEV Community by Indira Kumar A K (@indirakumar).</description>
    <link>https://dev.to/indirakumar</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%2F852170%2F73f52721-9bba-4369-aeb7-5dac3c932eb2.jpeg</url>
      <title>DEV Community: Indira Kumar A K</title>
      <link>https://dev.to/indirakumar</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/indirakumar"/>
    <language>en</language>
    <item>
      <title>Why self-assessment is broken (and how I fixed it with binary evidence)</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Tue, 10 Mar 2026 18:31:03 +0000</pubDate>
      <link>https://dev.to/indirakumar/why-self-assessment-is-broken-and-how-i-fixed-it-with-binary-evidence-3h51</link>
      <guid>https://dev.to/indirakumar/why-self-assessment-is-broken-and-how-i-fixed-it-with-binary-evidence-3h51</guid>
      <description>&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;Last month I tried to honestly assess my skills as a solopreneur. The standard approach: list your skills, rate them 1-5.&lt;br&gt;
I gave myself a 4 on SEO. Felt right. I've posted blogs, improved rankings, added valid tags.&lt;br&gt;
Then I started asking specific questions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Have I ranked a page on Google’s 1st page? No.&lt;/li&gt;
&lt;li&gt;Have I done keyword research + published optimized content? No.&lt;/li&gt;
&lt;li&gt;Have I intentionally built backlinks? No.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That 4 was a fantasy. Dunning-Kruger in action, we overrate the skills we're weakest at because we don't know enough to know what we don't know.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Insight
&lt;/h2&gt;

&lt;p&gt;The fix is simple: replace "how good am I?" with "what have I actually done?"&lt;br&gt;
Instead of a 1-5 scale on "SEO," use binary checkpoints:&lt;/p&gt;

&lt;p&gt;Done keyword research and published optimized content?&lt;br&gt;
Ranked a page on Google's first page?&lt;br&gt;
Built backlinks intentionally?&lt;/p&gt;

&lt;p&gt;Binary. No room for ego. You either have the evidence or you don't.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I turned this into proofwork, an evidence-based skill tracker for solopreneurs.&lt;br&gt;
It maps ~85 concrete checkpoints across 4 pillars:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Think&lt;/strong&gt; - Are you validating before building? Do you have a pricing strategy? Are you tracking metrics?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Build&lt;/strong&gt; - Can you ship frontend, backend, and infrastructure? Are you using AI and automation to multiply your output?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sell&lt;/strong&gt; - Can you write copy that converts? Do you understand SEO? Can you build an audience?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sustain&lt;/strong&gt; - Do you have your legal and financial house in order? Are you managing your energy sustainably?&lt;/p&gt;

&lt;h3&gt;
  
  
  The Feature That Made It Useful
&lt;/h3&gt;

&lt;p&gt;The app lets you export your current state as a JSON file: proofwork-2026-03.json.&lt;br&gt;
Fill it out again in 3 months. Load the old snapshot. Hit Compare.&lt;br&gt;
You get a full diff - what evidence you gained, what you lost, per-pillar progression with percentage deltas. This turns a one-time exercise into a longitudinal growth tracker.&lt;/p&gt;

&lt;p&gt;Other features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Share your map via URL (state encoded in hash, no server needed)&lt;/li&gt;
&lt;li&gt;Gap analysis view auto-ranks your weakest skills&lt;/li&gt;
&lt;li&gt;Radar visualization across all branches&lt;/li&gt;
&lt;li&gt;Notes field for reflections (saved in the JSON)&lt;/li&gt;
&lt;li&gt;100% client-side — your data never leaves your browser&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  My Results
&lt;/h2&gt;

&lt;p&gt;After filling it out honestly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Build: ~79% - good, but gaps in testing&lt;/li&gt;
&lt;li&gt;Sell: ~28% - almost nothing proven&lt;/li&gt;
&lt;li&gt;Think: ~28% - had never validated an idea properly&lt;/li&gt;
&lt;li&gt;Sustain: ~55% - no business entity, but good bookkeeping&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I was spending 90% of my time in the one pillar that was already my strongest (build). The classic technical founder trap.&lt;br&gt;
Try It&lt;/p&gt;

&lt;p&gt;Free, open source, no account needed: &lt;a href="https://skillsmap.indirakumar.com/" rel="noopener noreferrer"&gt;skillsmap.indirakumar.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The gaps it reveals might surprise you. They surprised me&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>solopreneur</category>
      <category>productivity</category>
      <category>career</category>
    </item>
    <item>
      <title>Var vs Let vs Const keyword in JavaScript</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Tue, 03 Jan 2023 18:00:47 +0000</pubDate>
      <link>https://dev.to/indirakumar/var-vs-let-vs-const-keyword-in-javascript-32pk</link>
      <guid>https://dev.to/indirakumar/var-vs-let-vs-const-keyword-in-javascript-32pk</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Let vs Const vs Var is one of the oldest rivalries in JavaScript. This is a small article explaining the difference between all of them. Before going any further remember in JavaScript we have only function scope (the declarations are accessible only inside the declared block) and block scope (the declarations are accessible only inside the declared block). If anything is being declared outside all the blocks and functions, then it takes global scope.&lt;/p&gt;

&lt;h2&gt;
  
  
  var Keyword
&lt;/h2&gt;

&lt;p&gt;var keyword takes function scope/global scope, which means a variable declared inside some other block is accessible anywhere in the code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;if (true) {
  var varVariable = "This is true from var";
}
console.log(varVariable);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;This is true from var

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can access this varVariable outside the block as well. As well as you can redeclare the same variable again, this will overwrite the previously declared variable.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;if (true) {
  var varVariable = "This is true from var";
}
varVariable = "This is var variable outside the block";
console.log(varVariable);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;This is var variable outside the block
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt;&lt;br&gt;
variables created using var keyword are hoisted. If you are new to hoisting, then I would suggest you to see this &lt;a href="https://www.youtube.com/watch?v=EvfRXyKa_GI"&gt;video&lt;/a&gt; for better clarity.&lt;/p&gt;
&lt;h2&gt;
  
  
  let Keyword
&lt;/h2&gt;

&lt;p&gt;The let keyword has block scope, which means it has scope only within the block it is declared and can not be accessed outside its block.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;if (true) {
  let letVariable = "This is true from let";
}

console.log(letVariable);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ReferenceError: letVariable is not defined
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But within the block it is accessible.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;if (true) {
  let letVariable = "This is true from let";
  console.log(letVariable);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;This is true from let
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Also if you mistakenly try to redeclare a let keyword variable error will be thrown, because let keyword variables can be declared only once.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;if (true) {
  let letVariable = "This is true from let";
  let letVariable = "This is second declared true from let";
  console.log(letVariable);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SyntaxError: Identifier 'letVariable' has already been declared
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But you can re-assign values of letVariable.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;if (true) {
  let letVariable = "This is true from let";
  letVariable = "This is re-assigned true from let";
  console.log(letVariable);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;This is re-assigned true from let
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  const Keyword
&lt;/h2&gt;

&lt;p&gt;const keyword variables are very similar to let keyword, it has the same block scope. It doesn't allow you to redeclare variables. It also doesn't allow re-assigning new values. However, if you have declared an object with const keyword, Its properties can be changed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const constVar = { name: "Kumar" };

constVar.name = "Indira";
console.log(constVar);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{ name: 'Indira' }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;It is always advised to use const and let as best practices. cont keyword, when you won't or don't accidently wanna re-assign new values to your variable. Use let keyword when you want to re-assign values to your variable.&lt;/p&gt;

&lt;h2&gt;
  
  
  Reference
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const"&gt;const - MDN docs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"&gt;let - MDN docs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>codenewbie</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Function Composition Vs Inheritance</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Mon, 02 Jan 2023 10:44:34 +0000</pubDate>
      <link>https://dev.to/indirakumar/function-composition-vs-inheritance-21n6</link>
      <guid>https://dev.to/indirakumar/function-composition-vs-inheritance-21n6</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Function Composition is pretty much one of the most interesting topics in JavaScript Development. Every single math student would have come across composition in your Set Theory chapter, this function composition is similar to that. The main use case of function composition is that it helps us write clean code and makes the best use of the available code. Let us see why this is better than other approaches.&lt;/p&gt;

&lt;h2&gt;
  
  
  Inheritance
&lt;/h2&gt;

&lt;p&gt;Let us see a situation where you have to create a video game with monsters. An ideal idea anyone would come up with is, to create a Monster class and use OOP concepts.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Monster {
  constructor(name) {
    this.name = name;
  }
  attack() {
    console.log(`${this.name} attacked`);
  }
  walk() {
    console.log(`${this.name} walked`);
  }
}
class FlyingMonster extends Monster {
  fly() {
    console.log(`${this.name} flew`);
  }
}
class SwimmingMonster extends Monster {
  swim() {
    console.log(`${this.name} swam`);
  }
}

const bear = new Monster("bear");
bear.walk;
bear.attack();
const eagle = new FlyingMonster("eagle");
eagle.walk();
eagle.attack();
eagle.fly();
const shark = new SwimmingMonster("shark");
shark.walk();
shark.attack();
shark.swim();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;bear walked
bear attacked
eagle walked
eagle attacked
eagle flew
shark walked
shark attacked
shark swam
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here flying monster and swimming monster are inherited from the parent monster class. Imagine a situation where you have to create a flying swimming monster. &lt;/p&gt;

&lt;p&gt;You would inherit swimming monsters in your new class and create a copy of fly() function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class FlyingSwimmingMonster extends SwimmingMonster {
    fly() {
      console.log(`${this. name} flew`)
    }
}  
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But this will not be efficient in a large codebase because the fly function is repeated and redundant. So to solve this problem. We have a very good approach in functional programming.&lt;/p&gt;

&lt;h2&gt;
  
  
  Functional Programming
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;//Functional Programming approach
// Destructuring the needed parameters for the function then returning a variable that points towards the function
function swimmer({ name }) {
  return {
    //here the arrow function will take teh paramater that swim function will take during the function call.
    swim: (speed) =&amp;gt; console.log(`${name} swam with speed ${speed}`),
  };
}
function attackerAndwalker({ name }) {
  return {
    attack: () =&amp;gt; console.log(`${name} attacked`),
    walk: () =&amp;gt; console.log(`${name} attacked`),
  };
}
function flyer({ name }) {
  return {
    fly: () =&amp;gt; console.log(`${name} flew`),
  };
}

function swimmingMonsterCreator(name) {
  const monster = { name: name };
  return {
    // using the spread operator here, we can add any new function to the object that is beaing created.
    ...monster,
    ...swimmer(monster),
    ...attackerAndwalker(monster),
  };
}
function flyingSwimmingMonsterCreator(name) {
  const monster = { name: name };
  return {
    ...monster,
    ...swimmer(monster),
    ...flyer(monster),
    ...attackerAndwalker(monster),
  };
}

const Dragon = flyingSwimmingMonsterCreator("Toothless");
Dragon.attack();
Dragon.swim(45);
Dragon.fly();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Output&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Toothless attacked
Toothless swam with speed 45
Toothless flew
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here as you can see, each individual function has been coded in such a way that they can be spread using the "spread operator" wherever needed. &lt;/p&gt;

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

&lt;p&gt;Functional programming is more suited for large code bases, where you want redundant code to be much less. Whereas, Object Oriented programming is more suited when you want your logic to be well segregated and preserved. I would really suggest you to read hacker noon's &lt;a href="https://medium.com/hackernoon/javascript-functional-composition-for-every-day-use-22421ef65a10"&gt;blog&lt;/a&gt; on function decomposition, because that gives more use cases on where it can be used.&lt;/p&gt;

&lt;h2&gt;
  
  
  Reference
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://medium.com/hackernoon/javascript-functional-composition-for-every-day-use-22421ef65a10"&gt;Hackernoon Blog for functional composition&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=nnwD5Lwwqdo&amp;amp;ab_channel=WebDevSimplified"&gt;Web Dev simplified video&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Pure vs Impure Functions in JavaScript</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Sun, 01 Jan 2023 09:37:44 +0000</pubDate>
      <link>https://dev.to/indirakumar/pure-vs-impure-functions-in-javascript-1m85</link>
      <guid>https://dev.to/indirakumar/pure-vs-impure-functions-in-javascript-1m85</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;We have reached a day where we are classifying functions as pure and impure. If this is the first time you are hearing this term. Then there is a huge chance you are wondering what "pure function" is on earth. This article focuses on explaining the difference between pure and impure functions and what is observable side effects.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pure Functions
&lt;/h2&gt;

&lt;p&gt;The definition of a pure function is that:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The function always returns the same result if the same arguments are passed in. These functions do not access or modify variables outside of their scope, which means it does not depend on any state or data and only depend on their input arguments. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;They do not cause side effects (such as network requests, logs, or state changes).&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Any function that satisfies the above two conditions can be deemed as a pure function. Now you might wonder what a side effect is, let's dig deep into that.&lt;/p&gt;

&lt;h2&gt;
  
  
  Side Effects
&lt;/h2&gt;

&lt;p&gt;A side effect is any interaction with the outside world from within a function. That could be anything from changing a variable that exists outside the function, to calling another method from within a function.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: If a pure function calls a pure function this isn’t a side effect and the calling function is still pure.&lt;/p&gt;

&lt;p&gt;Side effects include, but are not limited to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Making an HTTP request&lt;/li&gt;
&lt;li&gt;Mutating data&lt;/li&gt;
&lt;li&gt;Printing to a screen or console&lt;/li&gt;
&lt;li&gt;DOM Query/Manipulation&lt;/li&gt;
&lt;li&gt;Generating a random number (Math.random())&lt;/li&gt;
&lt;li&gt;Getting the current time&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Side effects do not mean they are bad, many a times, we require them. But when a function is needed to be pure, it should not contain any side effects. &lt;/p&gt;

&lt;h2&gt;
  
  
  Pure Function Example
&lt;/h2&gt;

&lt;p&gt;For demonstration purposes here is an example of a pure function that calculates the percentage of marks obtained out of 100.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function percentage(obtainedMarks, totalMarks) {
 return (obtainedMarks/totalMarks)*100;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It passes both 1, and 2, of the requirements for a function to be declared pure. It doesn’t depend on any external input, it doesn’t mutate any data and it doesn’t have any side effects. This function will always and always generate the same result no matter what. &lt;/p&gt;

&lt;h2&gt;
  
  
  Impure Functions
&lt;/h2&gt;

&lt;p&gt;Now let's take a look at what an impure function is.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let totalMarks = 100;
function percentage(obtainedMarks) {
 return (obtainedMarks/totalMarks)*100;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here you can observe that the return value will change according to the change in an outside variable.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Are Pure Functions Important In JavaScript?
&lt;/h2&gt;

&lt;p&gt;Pure functions are used heavily in Functional Programming. And, libraries such as ReactJS and Redux require the use of pure functions. &lt;/p&gt;

&lt;p&gt;Not all functions need or should be pure. A button press event handler that modifies the DOM, for instance, is not a good fit for a pure function. However, using other pure functions from the event handler will cut down on the number of impure functions in your application.&lt;/p&gt;

&lt;p&gt;Another reason to use pure functions where possible is testing and refactoring.&lt;/p&gt;

&lt;p&gt;One of the major benefits of using pure functions is they are immediately testable. They will always produce the same result if you pass in the same arguments. &lt;/p&gt;

&lt;p&gt;Additionally, they make it much simpler to maintain and refactor code. A pure function can be changed without worrying about unforeseen consequences messing up the entire application and sending you to debugging hell.&lt;/p&gt;

&lt;p&gt;So simply put, pure functions are an absolute way to have clean code and its a best practice to have &lt;/p&gt;

&lt;h2&gt;
  
  
  Reference:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://jsfunctions.io/pure-versus-impure-functions"&gt;https://jsfunctions.io/pure-versus-impure-functions&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Arrays in JavaScript</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Wed, 14 Dec 2022 06:55:51 +0000</pubDate>
      <link>https://dev.to/indirakumar/arrays-in-javascript-3041</link>
      <guid>https://dev.to/indirakumar/arrays-in-javascript-3041</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Arrays are list-like objects with prototypes having their functions for traversal and mutation. In JavaScript, both the data types and the array length are not fixed, unlike many other programming languages. Let us see the important characteristics of arrays in JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  Characteristics
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;JavaScript arrays are resizable and can contain a mix of different data types. (When those characteristics are undesirable, use typed arrays instead.)&lt;/li&gt;
&lt;li&gt;JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using nonnegative integers &lt;/li&gt;
&lt;li&gt;JavaScript arrays are zero-indexed: the first element of an array is at index 0&lt;/li&gt;
&lt;li&gt;JavaScript array-copy operations create shallow copies.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Properties:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The length property indicates how many elements an array has.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var arr = ['a', 'b'];
arr.length //2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The in operator works for arrays, too:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var arr = [ 'a', 'b', 'c' ];
1 in arr // is there an element at index 1? true
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Arrays are objects and can thus have object properties:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var arr = [];
arr.foo = 123;
arr.foo //123
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt;&lt;br&gt;
While it's certainly possible to add object properties to your array, it's not something that you would normally want to do and it's important to note that object properties will not be included in any methods or functions which enumerate the array's values. &lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const myArray = ["a", "b", "c"]
myArray.foo="bob"
console.log(myArray) // [ 'a', 'b', 'c', foo: 'bob' ]
console.log(myArray.map(i =&amp;gt; i)) // [ 'a', 'b', 'c' ]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Array Methods:
&lt;/h2&gt;

&lt;p&gt;Arrays have many methods (see Array Prototype Methods). Here are a few examples:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var arr = [ 'a', 'b', 'c' ];

arr.slice(1, 2)  // copy elements [ 'b' ]
arr.slice(1) // [ 'b', 'c' ]

arr.push('x')  // append an element 4
arr // [ 'a', 'b', 'c', 'x' ]

arr.pop()  // remove last element 'x'
arr
[ 'a', 'b', 'c' ]

&amp;gt; arr.shift()  // remove first element
'a'
arr //[ 'b', 'c' ]

arr.unshift('x')  // prepend an element 3
arr //[ 'x', 'b', 'c' ]

arr.indexOf('b')  // find the index of an element 1
arr.indexOf('y') -1

arr.join('-')  // all elements in a single string 'x-b-c'
arr.join('') // 'xbc'
arr.join()
'x,b,c'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Iterating Over Arrays
&lt;/h2&gt;

&lt;p&gt;There are so many methods to iterate through an array. But here we will see "forEach", "filter", and "map".&lt;/p&gt;

&lt;p&gt;forEach iterates over an array and hands the current element and its index to a function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[ 'a', 'b', 'c' ].forEach(
    function (elem, index) {  // (1)
        console.log(index + '. ' + elem);
    });
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The preceding code produces the following output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;0. a
1. b
2. c
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here you can just take the elements as well by giving only elem as the parameter to the function.&lt;/p&gt;

&lt;p&gt;map returns a new array by applying a function to each element of an existing array:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[1,2,3].map(function (x) { return x*x })
[ 1, 4, 9 ]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Array.prototype.filter(callback, thisValue?)&lt;br&gt;
The output array contains only those input elements for which the callback returns true. For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[ 1, 0, 3, 0 ].filter(function (x) { return x !== 0 })
[ 1, 3 ]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There are two more functions in iterating over arrays, &lt;br&gt;
They are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/group"&gt;group()&lt;/a&gt;&lt;br&gt;
Groups the elements of an array into an object according to the strings returned by a test function.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/groupToMap"&gt;groupToMap&lt;/a&gt; &lt;br&gt;
Groups the elements of an array into a Map according to values returned by a test function.&lt;br&gt;
&lt;strong&gt;Note:&lt;/strong&gt;&lt;br&gt;
The group() and groupToMap() functions are experimental only and is currently not supported in any web browsers.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thank you so much❤️ &lt;a class="mentioned-user" href="https://dev.to/gilfewster"&gt;@gilfewster&lt;/a&gt;, &lt;a class="mentioned-user" href="https://dev.to/dannyengelman"&gt;@dannyengelman&lt;/a&gt; for your valuable suggestions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Reference
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://exploringjs.com/es5/ch01.html#basic_arrays"&gt;Basic Arrays&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array"&gt;MDN Docs - Array&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://array-methods.github.io/"&gt;Array Methods Cheat Sheet&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>A Comprehensive Course on GitHub</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Mon, 21 Nov 2022 11:55:53 +0000</pubDate>
      <link>https://dev.to/indirakumar/a-comprehensive-course-on-github-2d3n</link>
      <guid>https://dev.to/indirakumar/a-comprehensive-course-on-github-2d3n</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;If you are a person who even in the wildest of dreams wants to be a software developer, then Git is the first thing I would recommend you to learn. Git is a version control system, and GitHub is one of the different tools available to do it. &lt;/p&gt;

&lt;p&gt;Technical terms aside, Have you ever collaborated with different people for working on the same code, and then every time you make a change, you compress it and send the zip file to the other and use it? Such a painful way of informing changes to others right, Professionals reading this would really wonder, but not gonna lie, this is how 80% of my university students exchanged code in their freshmen year. If you have ever faced any similar issues in your coding life, then you are in the right place to improvise yourself.&lt;/p&gt;

&lt;p&gt;If you are a conventional person who wants to all kinds of version control systems and their use cases, then you can read this article(&lt;a href="https://dev.to/indirakumar/version-control-system-3hd4"&gt;Version Control Systems&lt;/a&gt;) and come back to this article, Or if you are the kind of person who just wants to go work instead of reading pages of theory, then you can continue reading the current article.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisite
&lt;/h2&gt;

&lt;p&gt;All the best❤️ for your new venture, I am sure this would definitely change the way you manage your code among teams after finishing this course. First of all, before starting go to &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt; repository and download the entire repository, then run the .exe file to open a small application through which you would learn to use GitHub.&lt;/p&gt;

&lt;p&gt;You would have the following challenges to complete and learn git through those challenges.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--tCOm2TIR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8iew6mm2f3ghjy4fdak.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--tCOm2TIR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8iew6mm2f3ghjy4fdak.png" alt="Image description" width="325" height="583"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Image Credits: &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  How to Approach:
&lt;/h2&gt;

&lt;p&gt;I have divided the course challenges into 5 days for the sake of simplicity and to avoid overkill. It is up to you to complete however much you would like to do. I would suggest you to go ahead with one day at a time for 5 days, but if you think you are faster, then you can obviously finish it in one sitting💯💯.&lt;/p&gt;
&lt;h2&gt;
  
  
  Day 1:
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Get Git:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Git is free open-source software (the source code is public) written by Linus Torvalds who also wrote the Linux operating system's kernel.&lt;/li&gt;
&lt;li&gt;I recommend installing Git by installing the &lt;a href="https://desktop.github.com/"&gt;GitHub desktop app&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;This is the best way to install git bash on your computer, especially if you are a beginner. And also, don’t forget to select “add git bash in Windows Explorer Integration”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--r6ir-8Uh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jd19pgnpls7hv109p75.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--r6ir-8Uh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jd19pgnpls7hv109p75.jpg" alt="Image description" width="582" height="476"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Image Credits: &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Now open git from the start menu.&lt;br&gt;
&lt;strong&gt;Steps:&lt;/strong&gt;&lt;br&gt;
1) You can Set your name using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git config --global user.name "Your Name"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2) Now set your email:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git config --global user.email "youremail@example.com"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Repository:&lt;/strong&gt;&lt;br&gt;
You can imagine it as a project folder with all the relevant files inside of it.  Sometimes they're called "repos" in short.&lt;br&gt;
You tell Git what your project is, and Git will start tracking all the changes to that folder. This makes it a Git repository: A folder of items being tracked by Git. Git tracks when files are added, subtracted, or even a single letter in a single file&lt;br&gt;
You will use Command Line Interface (CLI) to work on Git since that is the most efficient way to get things done once you master it. The first part of the command lets your computer know you're talking to Git. The parts following that are the commands and the different options you want Git to act on.&lt;/p&gt;

&lt;p&gt;Navigate to your preferred folder and right-click (select more options), then chose open with git bash.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Steps:&lt;/strong&gt;&lt;br&gt;
1) First, make a new folder:&lt;br&gt;
Tip: mkdir stands for make directory&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir hello-world
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2) Then go into that folder:&lt;br&gt;
Tip: cd stands for change directory&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd hello-world
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;3) Finally, tell Git to initialize (start tracking) the folder you are now in:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The last command should return something starting with "Initialized empty Git repository". This is the way of telling git that this is my project folder and to take care of all the changes here. Git will create a hidden folder and use that to track all the changes in this ‘hello-world” folder.&lt;/p&gt;

&lt;h2&gt;
  
  
  Day 2:
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Commits:&lt;/strong&gt;&lt;br&gt;
Commits are core to using Git. They are the moments in which you save and describe the work you've done, using commit messages. &lt;br&gt;
Simply put, a commit is a point of history in your folder, every commit will have an id attached to it, which you can use to revert to that point of history in your folder, more on this later.&lt;br&gt;
Navigate to your hello world folder, right-click (select more options), then chose open with git bash.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Steps:&lt;/strong&gt;&lt;br&gt;
1) Create a new file using notepad and save it as readme.txt in your hello world folder.&lt;/p&gt;

&lt;p&gt;2) You can check the status of the folder using:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git status
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Git should tell you that a file has been added.&lt;/p&gt;

&lt;p&gt;3) Then add these files to the stage(only after this, we can commit any of our changes) using the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git add readme.txt
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Why add a command? In real-time, so many files are changed in our repository. But we might not want all of them to be saved in our commit. We would want only a few file changes to be saved in history. So using this add command, we can add all the files which we would like to save in our commit.&lt;/p&gt;

&lt;p&gt;4) Finally, commit those changes to the repository's history with a short (m) message describing the updates.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git commit -m "Created readme"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;whatever is followed after -m is your commit message. It is always advised to put meaningful commit messages. Not “advasdma”. Trust me good commit messages save you tonnes of time if ever your application goes wrong somewhere.&lt;/p&gt;

&lt;p&gt;5) Now add another line to 'readme.txt' and save the file again.&lt;br&gt;
In the terminal, you can view the difference between the file now and how it was at your last commit.&lt;br&gt;
Tell Git to show you the diff:&lt;br&gt;
git diff&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--I50Bbiue--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jis9c3qd9y1avv7vlso.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--I50Bbiue--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jis9c3qd9y1avv7vlso.png" alt="Image description" width="710" height="502"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Image Credits: &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Githubbingggg:&lt;/strong&gt;&lt;br&gt;
The repository you've created so far is just on your computer, which is handy but makes it pretty hard to share and work on with others. No worries, that's what GitHub is for!&lt;br&gt;
GitHub acts as the central repository for you and everyone else to share. You push your changes to it and pull down changes from others.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Steps:&lt;/strong&gt;&lt;br&gt;
1) Create a GitHub Account&lt;br&gt;
Visit github.com and sign up for a free account. High five, welcome!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Remote:&lt;/strong&gt;&lt;br&gt;
When you put something on GitHub that copy lives on one of GitHub's servers. This makes it a remote repository because it is not on your computer, but on a server, "remote" and somewhere else. By pushing your local (on your computer) changes to it, you keep it up to date.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SnojHRZY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ew7krdaa9ipc5i06q07k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SnojHRZY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ew7krdaa9ipc5i06q07k.png" alt="Image description" width="702" height="465"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Image Credits: &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Steps to create a remote Repo:&lt;/strong&gt;&lt;br&gt;
• Go to github.com, log in, and click the '+' in the top right and then click 'New repository'.&lt;br&gt;
• Give it a name that matches your local repository's name, 'hello-world', and a short description.&lt;br&gt;
• Make it public. This means it'll be listed on your public profile.&lt;br&gt;
• Don't initialize with a README because we already have a file, locally, named 'readme.txt'. This is a helper option from GitHub if you hadn't already made it.&lt;br&gt;
• Leave '.gitignore' and 'license' set to 'none'. We won't use them in this tutorial.&lt;br&gt;
• Click create repository!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A readme explains what the project is, how to use it, and oftentimes, how to contribute (though sometimes there is an extra file, 'CONTRIBUTING.md', for those details).&lt;/li&gt;
&lt;li&gt;A .gitignore is a list of files that Git should not track, for instance, files with passwords!&lt;/li&gt;
&lt;li&gt;A license file is the type of license you put on your project. This lets others know how they can use it. Information on the types is here: choosealicense.com.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now, at the top you'll see 'Quick Setup', make sure the 'HTTPS' button is selected and copy the address—this is the address of your repository on GitHub's servers.&lt;br&gt;
Back in your terminal, and inside of the 'hello-world' folder that you initialized as a Git repository in the earlier challenge, you want to tell Git to remember the address of the remote version on GitHub's servers. You can have multiple remotes, so each requires a name. The primary remote is typically named origin.&lt;/p&gt;

&lt;p&gt;To add a remote named 'origin' to your repository:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git remote add origin &amp;lt;URLFROMGITHUB&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Note for Windows users:&lt;/strong&gt;&lt;br&gt;
If you have GitHub Desktop on your computer, a remote named 'origin' is automatically created in your local repository. In that case, you'll just need to tell it what URL to associate with 'origin'. Use this command instead of the 'add' one above:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git remote set-url origin &amp;lt;URLFROMGITHUB&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, you want to push (send) everything you've done locally to your remote repository on GitHub.&lt;/p&gt;

&lt;p&gt;Git has a branching system so that you can work on different parts of a project at different times. We'll learn more about that later, but by default, the first branch is named 'master'. When you push (and later pull) from a project, you tell Git the branch name you want and the name of the remote that it lives on.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Push:&lt;/strong&gt; &lt;br&gt;
Next, you want to push (send) everything you've done locally to your remote repository on GitHub. Git has a branching system so that you can work on different parts of a project at different times. We'll learn more about that later, but by default, the first branch is named 'master'. When you push (and later pull) from a project, you tell Git the branch name you want and the name of the remote that it lives on.&lt;br&gt;
In this case, we'll send our branch named 'master' to our remote on GitHub named 'origin'.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git push origin master
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--AQuqJyzW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c99mmqav8grs1tkugetl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AQuqJyzW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c99mmqav8grs1tkugetl.png" alt="Image description" width="459" height="454"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Image Credits: &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Day 3:
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Forks:&lt;/strong&gt;&lt;br&gt;
So far, we have seen how to use git to manage your repo. Now we will see a fork which is interacting with other people’s repo.&lt;br&gt;
When you fork a repository, you're creating a copy of it on your GitHub account. Your forked copy begins its life as a remote repository—it exists just on your GitHub account, not on your computer. Forks are used for creating your own version of a project or contributing back your changes (such as bug fixes or new features) to the original project.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8WODnuPS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2d8y9k1n6p0h666wbec.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8WODnuPS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2d8y9k1n6p0h666wbec.png" alt="Image description" width="613" height="548"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Image Credits: &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Clone Your Fork Locally&lt;br&gt;
Now, in the terminal, you'll clone the repository onto your computer. &lt;br&gt;
Back out of your 'hello-world' folder:&lt;br&gt;
Tip: the two dots mean to step out of a directory one level&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd ..
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, clone your fork:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git clone &amp;lt;URLFROMGITHUB&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;here&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git clone https://github.com/Indira-kumar/patchwork.git or 
git clone https://github.com/jlord/patchwork.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Go into the folder it created for your local copy of the fork (in this case, named 'patchwork').&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd &amp;lt;FOLDERNAME&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Type git remote -v to see that the address to the fork is already set up.&lt;/p&gt;

&lt;p&gt;Connect to the Original Repository&lt;br&gt;
You can name this remote connection anything you want, but typically people use the name 'upstream'; let's use that for this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git remote add upstream https://github.com/jlord/patchwork.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To be sure you have the correct remotes set up, type git remote -v to list out the addresses you have stored. You should have an 'origin' remote with your fork's address and then an 'upstream' remote with the address to the original, the URL noted above in this step.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Branches:&lt;/strong&gt;&lt;br&gt;
It's common practice when working on a project or with others on a project to create a branch to keep your working changes in. This way you can do your work while the main, commonly named 'master', branch stays stable. You can even create a branch for a branch.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hiSlHeLc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ucuguoy7pkzvonj78z1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hiSlHeLc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ucuguoy7pkzvonj78z1.png" alt="Image description" width="707" height="303"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Image Credits: &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;When you create a branch, Git copies everything from the current branch you're on and places it in the branch you've requested be made.&lt;br&gt;
Branches are case-sensitive so name your branch exactly the way your GitHub name appears.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git branch &amp;lt;BRANCHNAME&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To go into that branch and work on it you checkout a branch. Go to your new branch:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git checkout &amp;lt;BRANCHNAME&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now make changes as you wish in your local repository and then while pushing you get to choose which remote and which branch you want to push to.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git push origin &amp;lt;BRANCHNAME&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sKPbqXMm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdd9iyd2f1dzsaduvs8n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sKPbqXMm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdd9iyd2f1dzsaduvs8n.png" alt="Image description" width="534" height="588"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Image Credits: &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Day 4:
&lt;/h2&gt;

&lt;p&gt;Collaborators are other GitHub users who are permitted to make edits to a repository owned by someone else.&lt;br&gt;
Contributor, this describes another GitHub user who has made contributions, through a Fork and Pull Request, to a project.&lt;br&gt;
The URL should look like this, but with your username.&lt;br&gt;
github.com/YOURUSERNAME/patchwork/settings/collaboration&lt;br&gt;
Here in your repository right now, you can add reporobot as a collaborator.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pulling from a Remote:&lt;/strong&gt;&lt;br&gt;
If you're working on something with someone else, you need to stay up to date with the latest changes. So, you'll want to pull in any changes that may have been pushed to the central GitHub repository.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--d5Kvw5tK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yphr5rduvuiv0sl7nyvx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--d5Kvw5tK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yphr5rduvuiv0sl7nyvx.png" alt="Image description" width="566" height="259"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Image Credits: &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Use the following command to make changes to the local code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git pull &amp;lt;REMOTENAME&amp;gt; &amp;lt;BRANCHNAME&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Day 5:&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Pull Requests:&lt;/strong&gt;&lt;br&gt;
when you make changes and improvements to a project you've forked, you'll want to send those changes to the maintainer of the original and request that they pull those changes into the original so that everyone can benefit from the updates—that's a pull request.&lt;br&gt;
&lt;a href="https://opensource.com/article/19/7/create-pull-request-github"&gt;https://opensource.com/article/19/7/create-pull-request-github&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Merge Locally:&lt;/strong&gt;&lt;br&gt;
First, move into the branch you want to merge into—in this case, the branch 'gh-pages'.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git checkout gh-pages
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now tell Git what branch you want to merge in—in this case, your feature branch that begins with "add-".&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git merge &amp;lt;BRANCHNAME&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Tidy up by deleting your feature branch. Now that it has been merged you don't really need it around.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git branch -d &amp;lt;BRANCHNAME&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5pDdi5dp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dedp8sfa2jraxpb01l6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5pDdi5dp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dedp8sfa2jraxpb01l6.png" alt="Image description" width="519" height="449"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Image Credits: &lt;a href="https://github.com/jlord/git-it-electron"&gt;git-it&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git rm - -cached &amp;lt;FILENAME&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To remove the files from the stage (from the track)&lt;br&gt;
Git merge tool&lt;br&gt;
To manage merge conflicts, and merge hassle-free (winmerge is popular)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Git stash&lt;/strong&gt;&lt;br&gt;
When you are working on a particular branch (branch A), you are not yet done with changes made, so you don’t want to commit your changes, but you have to switch to another branch (branch B) for some change. Then to keep to changes in branch A without committing you would use “git stash”. &lt;br&gt;
Then now you can switch to branch B, and make your changes and commits, and when you come back to branch A for working, you can do “git stash apply” to bring back those unsaved changes&lt;/p&gt;

&lt;p&gt;Here is a &lt;a href="https://www.youtube.com/watch?v=lH3ZkwbVp5E"&gt;video&lt;/a&gt; for an in-depth definition.&lt;/p&gt;

&lt;p&gt;Congratulations on completing the basic GitHub course, now you can go for more advanced topics like rebase, force push etc. in this &lt;a href="https://ooloo.io/project/github-flow"&gt;course&lt;/a&gt;&lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=Y9XZQO1n_7c&amp;amp;t=21s&amp;amp;ab_channel=CodeInsights"&gt;Learn Git in 20 mins&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/jlord/git-it-electron"&gt;Git-it project&lt;/a&gt; - This course is based on this software. Credits to &lt;em&gt;jlord&lt;/em&gt; for such amazing content.&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=eulnSXkhE7I"&gt;CS50 GitHub&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Thank You So much for your time!! Happy Coding❤️&lt;/em&gt;&lt;/p&gt;

</description>
      <category>github</category>
      <category>git</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Version Control System</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Mon, 21 Nov 2022 09:20:20 +0000</pubDate>
      <link>https://dev.to/indirakumar/version-control-system-3hd4</link>
      <guid>https://dev.to/indirakumar/version-control-system-3hd4</guid>
      <description>&lt;h2&gt;
  
  
  What is version control?
&lt;/h2&gt;

&lt;p&gt;Version Control or Source Control (known as VCS) helps you track and manage the software code. As teams get bigger and bigger, development happens faster and faster and so we need a reliable way to track the changes and maintain different versions of our software, that’s where Git and Version control come into the picture.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Version Control:
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1) History of Changes:&lt;/strong&gt;&lt;br&gt;
Complete long-term change history of every file is saved in git. This means every change made by many individuals over the years. Changes include the creation and deletion of files as well as edits to their contents. Different VCS tools differ in how well they handle the renaming and moving of files. This history should also include the author, date, and written notes on the purpose of each change (commit messages). So, reverting to older code at any given time would be possible.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2) Branching &amp;amp; Merging:&lt;/strong&gt;&lt;br&gt;
different people working on different parts of the software is very common, which leads us to the problem of not being able to merge it together leading to unimaginable complexities. For example, let's take Git is not available, and so we would have to make a zip file and send it to all our teammates for any code changes we make, imagine how hard it would be to download and merge those files with theirs. But with git and its features, it is easy to branch different features and merge them when needed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3) Traceability:&lt;/strong&gt;&lt;br&gt;
All the changes being saved along with the purpose of change messages helps in bug analysis and other forensics. we can also deploy famous bug-tracking software like JIRA etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  Two Types of Architecture:
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Centralized:&lt;/strong&gt;&lt;br&gt;
A centralized VCS has a remote central instance and if that is lost, it can cause data loss and can cause productivity issues.&lt;br&gt;
&lt;strong&gt;Distributed:&lt;/strong&gt;&lt;br&gt;
A distributed model architecture avoids these pitfalls by keeping a full copy of the source code at each VCS instance.&lt;br&gt;
Git and mercurial are DVCS&lt;/p&gt;

&lt;p&gt;The difference between a repository hosting services and a version control system:&lt;br&gt;
they are two separate entities. VCS is a low-level command-line-based interface that helps track the changes in your file&lt;br&gt;
Repository hosting services are third-party web applications that wrap and enhance a version control system. And that is where CI/CD pipeline integration etc. can be implemented.&lt;/p&gt;

&lt;p&gt;References:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.atlassian.com/git/tutorials/what-is-version-control" rel="noopener noreferrer"&gt;What is Version Control&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://bitbucket.org/product/code-repository" rel="noopener noreferrer"&gt;How to choose the best source code repository&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thank you for your time!! Happy Coding❤️&lt;/p&gt;

</description>
      <category>architecture</category>
      <category>systemdesign</category>
      <category>cloudstorage</category>
    </item>
    <item>
      <title>A Thorough View of Strings in JavaScript</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Sat, 19 Nov 2022 08:43:36 +0000</pubDate>
      <link>https://dev.to/indirakumar/a-thorough-view-on-strings-in-javascript-1c</link>
      <guid>https://dev.to/indirakumar/a-thorough-view-on-strings-in-javascript-1c</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In JavaScript, textual data is stored as strings. There is no separate type for a single character.&lt;br&gt;
The internal format for strings is always UTF-16, no matter what the pages use. The size of a JavaScript string is always 2 bytes per character. Any string can be created by enclosing the value with single or double quotes or backticks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let single = 'single-quoted';
let double = "double-quoted";
let backticks = `backticks`;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here single and double quotes are the same. But backticks help us embed expressions into strings by just wrapping ${} around&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;alert(`1 + 2 = ${1 + 2}.`); \\ 1 + 2 = 3.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Backticks also allow you to span your texts to multiple lines which is not the same case with quotes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let studentsList = `Guests:
 * Indira
 * Suraj
 * Valli
`;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Tagged Templates:
&lt;/h2&gt;

&lt;p&gt;Backticks are a blessing in another way too. You can use them to format strings using template functions. Here is an example explaining the same&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const person = "Kumar";
const age = 19;

function myTag(strings, personExp, ageExp) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "
  const str2 = strings[2]; // "."

  const ageStr = ageExp &amp;gt; 99 ? "centenarian" : "youngster";

  // We can even return a string built using a template literal
  return `${str0}${personExp}${str1}${ageStr}${str2}`;
}

const output = myTag`That ${person} is a ${age}.`;

console.log(output);
// That Kumar is a youngster.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, myTag is the tagged template that processes the strings, here "that", "is a", "." will be passed as an array of strings, then the expression ${person} is passed to personExp, and ${age} is passed to ageExp.&lt;/p&gt;

&lt;h2&gt;
  
  
  Escape sequences:
&lt;/h2&gt;

&lt;p&gt;These are the characters, that you want to print, but they get skipped because they have special meanings attached to them. &lt;br&gt;
Here is how to do a few formatting in strings in JavaScript.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;\n - New line&lt;/li&gt;
&lt;li&gt;\r - Carriage return, In Windows text files, a combination of two characters \r\n represents a new break, while on non-Windows OS it’s just \n. Most Windows software also understands \n.&lt;/li&gt;
&lt;li&gt;\', \" - Quotes&lt;/li&gt;
&lt;li&gt;\ - Backslash&lt;/li&gt;
&lt;li&gt;\t - Tab&lt;/li&gt;
&lt;li&gt;\b, \f, \v - Backspace, Form Feed, Vertical Tab&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;alert( 'I\'m the Kumar!' ); // I'm the Kumar!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  String Length:
&lt;/h2&gt;

&lt;p&gt;The length property has the string length:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;alert( 'My\n'.length ); // 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;\n is a single “special” character, so the length is indeed 3&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In the String, the length is just a property, it is not a function to be called upon strings.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Accessing characters
&lt;/h2&gt;

&lt;p&gt;In JavaScript, To get a character at position pos, use square brackets [pos] or call the method str.at(pos). The first character starts from the zero position.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let str = `Hello`;
// the first character
alert( str[0] ); // H
alert( str.at(-1) ); // o
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As usual, the last character is indexed at -1 and so on.&lt;/p&gt;

&lt;h2&gt;
  
  
  Properties and Important Methods:
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1) Strings are immutable&lt;/strong&gt;&lt;br&gt;
Strings can’t be changed in JavaScript. It is impossible to change a character.&lt;br&gt;
Examples:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let str = 'Hi';
str[0] = 'h'; // error
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2) Changing the case&lt;/strong&gt;&lt;br&gt;
Methods toLowerCase() and toUpperCase() change the case:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;alert( 'Kumar'.toUpperCase() ); // KUMAR
alert( 'Kumar'.toLowerCase() ); // kumar
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3) Searching a substring:&lt;/strong&gt;&lt;br&gt;
It can be done using the .indexOf() function&lt;br&gt;
let str = 'Widget with id';&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;alert( str.indexOf('Widget') ); // 0, because 'Widget' is found at the beginning
alert( str.indexOf('widget') ); // -1, not found, the search is case-sensitive
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;4) Getting a substring&lt;/strong&gt;&lt;br&gt;
There are 3 methods in JavaScript to get a substring: substring, substr and slice.&lt;/p&gt;

&lt;p&gt;str.slice(start, end)&lt;br&gt;
Returns the part of the string from start to (but not including) end.&lt;/p&gt;

&lt;p&gt;If there is no second argument, then the slice goes till the end of the string:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let str = "stringify";
alert( str.slice(0, 5) ); // 'strin', the substring from 0 to 5 (not including 5)
alert( str.slice(2) ); // 'ringify', from the 2nd position till the end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;str.substring(start, end)&lt;br&gt;
Returns the part of the string between the start and end (not including the end).&lt;/p&gt;

&lt;p&gt;This is almost the same as the slice, but it allows the start to be greater than the end (in this case it simply swaps start and end values).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let str = "stringify";
alert( str.substring(2, 6) ); // "ring"
alert( str.substring(6, 2) ); // "ring"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;str.substr(start [, length])&lt;br&gt;
Returns the part of the string from start, with the given length.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let str = "stringify";
alert( str.substr(2, 4) ); 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Comparing Strings:
&lt;/h2&gt;

&lt;p&gt;Strings are compared character by character in alphabetical order. But there are a few odd things that would happen in the JavaScript world when you compare strings. Let's see a few of them here.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A lowercase letter is always greater than the uppercase:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;alert( 'a' &amp;gt; 'Z' ); // true
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Letters with diacritical marks are “out of order”:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;alert( 'Österreich' &amp;gt; 'New zealand' ); // true&lt;/code&gt;&lt;br&gt;
Here Ö has a diacritical mark. So it is greater than N, even though N comes before O in alphabetical order. This is because of the higher ASCII values of these special characters.&lt;/p&gt;

&lt;p&gt;Here is one more way to compare strings&lt;br&gt;
The call str.localeCompare(str2) returns an integer indicating whether str is less, equal or greater than str2 according to the language rules:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Returns a negative number if str is less than str2.&lt;/li&gt;
&lt;li&gt;Returns a positive number if str is greater than str2.&lt;/li&gt;
&lt;li&gt;Returns 0 if they are equivalent.
For Example:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;alert( 'Österreich'.localeCompare('Zealand') ); // -1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  Unicode in JavaScript source code:
&lt;/h2&gt;

&lt;p&gt;In JavaScript, the identifiers and string literals can be expressed in Unicode via a Unicode escape sequence. The general syntax is \uXXXX, where X denotes four hexadecimal digits. For example, the letter o is denoted as ‘\u006F’ in Unicode.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var f\u006F\u006F = 'abc';
console.log(foo) //abc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;String Concatenation:&lt;br&gt;
How can we end a string article on JavaScript without talking about the great concatenation?&lt;/p&gt;

&lt;p&gt;Here is a brief overview of it. The concat() method joins two or more strings. This method does not change the existing strings. It returns a new string.&lt;br&gt;
&lt;strong&gt;Syntax:&lt;/strong&gt;&lt;br&gt;
string.concat(string1, string2, ..., stringX)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let text1 = "Hello";
let text2 = "world!";
let result = text1.concat(" ", text2);
console.log(result)
//Hello world!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://flaviocopes.com/javascript-unicode/" rel="noopener noreferrer"&gt;Unicode&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.w3schools.com/js/js_string_methods.asp" rel="noopener noreferrer"&gt;String Functions W3 Schools&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://javascript.info/string" rel="noopener noreferrer"&gt;Strings&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates" rel="noopener noreferrer"&gt;Template functions MDN Docs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Thank you for your valuable time!!! Happy Coding❤️&lt;/em&gt;&lt;/p&gt;

</description>
      <category>watercooler</category>
    </item>
    <item>
      <title>JavaScript Primitive vs Reference Values</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Thu, 17 Nov 2022 09:40:45 +0000</pubDate>
      <link>https://dev.to/indirakumar/javascript-primitive-vs-reference-values-1kmm</link>
      <guid>https://dev.to/indirakumar/javascript-primitive-vs-reference-values-1kmm</guid>
      <description>&lt;h2&gt;
  
  
  Introduction:
&lt;/h2&gt;

&lt;p&gt;JavaScript has mainly 2 types of values, namely&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Primitive values (atomic values)&lt;/li&gt;
&lt;li&gt;Reference values (objects which might consist of multiple kinds of values).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In this article, we will learn about&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Memory in JavaScript&lt;/li&gt;
&lt;li&gt;Types of Values in JavaScript&lt;/li&gt;
&lt;li&gt;Properties of Primitive and Dynamic values&lt;/li&gt;
&lt;li&gt;Copying property&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Stack and Heap Memory:
&lt;/h2&gt;

&lt;p&gt;Any variable in JS is stored in either heap or stack.&lt;/p&gt;

&lt;p&gt;Static data:&lt;br&gt;
It is the type of data whose size is known and so is fixed at compile time. It includes&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Primitive values: null, undefined, Boolean, number, string, symbol, and BigInt&lt;/li&gt;
&lt;li&gt;Reference values: Variables that are references and point to other objects&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The above two have fixed sizes and so they are stored in the stack.&lt;/p&gt;

&lt;p&gt;For example, the following declares two variables and initializes their values to a literal string and a number:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let name = 'John';
let age = 25;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Since the above two are primitive values, they will be stored in stack memory as shown below&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F3ylhlz7b0wqlubv7jz6l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F3ylhlz7b0wqlubv7jz6l.png" alt="Image credits:[JavaScript Tutorial](https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/)" width="216" height="310"&gt;&lt;/a&gt;&lt;br&gt;
Image credits:&lt;a href="https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/" rel="noopener noreferrer"&gt;JavaScript Tutorial&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Note:&lt;/em&gt; Many languages consider strings as an object, but JS considers strings as a primitive value&lt;/p&gt;

&lt;p&gt;JavaScript stores objects, and functions in heap. The JS engine doesn't allocate fixed space for these, the memory is expanded as it is used.&lt;/p&gt;

&lt;p&gt;Eg.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let name = 'John';
let age = 25;

let person = {
  name: 'John',
  age: 25,
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.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%2Fzx32fxtzajxqru3yepnk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fzx32fxtzajxqru3yepnk.png" alt="Image credits:[JavaScript Tutorial](https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/)" width="630" height="335"&gt;&lt;/a&gt;&lt;br&gt;
Image credits:&lt;a href="https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/" rel="noopener noreferrer"&gt;JavaScript Tutorial&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here, the 3 variables, name, age, and person(a reference that refers to the object in the heap) are stored in the stack. The actual values of objects are stored in a heap.&lt;/p&gt;
&lt;h2&gt;
  
  
  Dynamic properties:
&lt;/h2&gt;

&lt;p&gt;A reference value can be used to add, change or delete properties at any time. However, this is not the same case for primitive values. In JS, syntactically primitive values are allowed to add properties, but they won't have any effects and are not saved.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fmr5ovhhpo6nhpfliw7bo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fmr5ovhhpo6nhpfliw7bo.png" alt="Image credits:[JavaScript Tutorial](https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/)" width="616" height="763"&gt;&lt;/a&gt;&lt;br&gt;
Image credits:&lt;a href="https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/" rel="noopener noreferrer"&gt;JavaScript Tutorial&lt;/a&gt;&lt;br&gt;
Let us see the same example in the case of primitive values&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F5gdxrwfaxsjsscpniblq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F5gdxrwfaxsjsscpniblq.png" alt="Image description" width="442" height="317"&gt;&lt;/a&gt;&lt;br&gt;
Image credits:&lt;a href="https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/" rel="noopener noreferrer"&gt;JavaScript Tutorial&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  How copying values work:
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Primitive values:&lt;/strong&gt;&lt;br&gt;
In the case of primitive values, when copy statement is executed, the JS engine creates a copy of the value and assigns that value to the new variable.&lt;br&gt;
Eg.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let age = 25;
let newAge = age;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;First, age is initialized with the value 25.&lt;/li&gt;
&lt;li&gt;Second, when the newAge variable is assigned with age, the JS engine creates a copy of the value of the age variable (creates a copy of value 25) and then assigns it to newAge.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Ffjg7uj1y2dj6bfilybhm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Ffjg7uj1y2dj6bfilybhm.png" alt="Image credits:[JavaScript Tutorial](https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/)" width="176" height="318"&gt;&lt;/a&gt;&lt;br&gt;
Image credits:&lt;a href="https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/" rel="noopener noreferrer"&gt;JavaScript Tutorial&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So change in one place doesn't affect the change in another.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Reference Values:&lt;/strong&gt;&lt;br&gt;
When you assign a reference value from one variable to another, the JavaScript engine creates a reference so that both variables refer to the same object on the heap memory. This means that if you change one variable, it’ll affect the other.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let person = {
  name: 'John',
  age: 25,
};

let member = person;

member.age = 26;

console.log(person);
console.log(member);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here both of them give the same output because the "member" reference value is pointing to the same object in the heap.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Ftabgpxodts8ovgrlf8p3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Ftabgpxodts8ovgrlf8p3.png" alt="Image credits:[JavaScript Tutorial](https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/)" width="522" height="232"&gt;&lt;/a&gt;&lt;br&gt;
Image credits:&lt;a href="https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/" rel="noopener noreferrer"&gt;JavaScript Tutorial&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Summary:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Javascript has two types of values: primitive values and reference values.&lt;/li&gt;
&lt;li&gt;You can add, change, or delete properties to a reference value, whereas you cannot do it with a primitive value.&lt;/li&gt;
&lt;li&gt;Copying a primitive value from one variable to another creates a separate value copy. It means that changing the value in one variable does not affect the other.&lt;/li&gt;
&lt;li&gt;Copying a reference from one variable to another creates a reference so that two variables refer to the same object. This means that changing the object via one variable reflects in another variable.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>smartcontract</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>An Introduction to Operating System</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Mon, 31 Oct 2022 03:56:52 +0000</pubDate>
      <link>https://dev.to/indirakumar/an-introduction-to-operating-system-1pnf</link>
      <guid>https://dev.to/indirakumar/an-introduction-to-operating-system-1pnf</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;An Operating System is an &lt;em&gt;interface between user and the hardware or between software and hardware&lt;/em&gt;. A Backend developer should be clear and crisp with the concepts of operating systems. OS has many purposes ranging from file management, memory management, process management, handling inputs and outputs etc. And that’s more or less the same thing a backend developer is expected to do, and so OS knowledge is indispensable.&lt;/p&gt;

&lt;p&gt;The three most common operating systems for personal computers are &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Microsoft Windows, &lt;/li&gt;
&lt;li&gt;MacOS, &lt;/li&gt;
&lt;li&gt;Android,&lt;/li&gt;
&lt;li&gt;Linux.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Obviously for some people, reading different generations of OS is so boring, but still there exist few obsessed souls who want to know about that too, and here is an &lt;a href="https://www.tutorialspoint.com/operating_system/os_overview.htm"&gt;article&lt;/a&gt; for that&lt;/p&gt;

&lt;h2&gt;
  
  
  How Operation System work.
&lt;/h2&gt;

&lt;p&gt;Computer CPU knows how to execute commands. But it needs someone to tell him what command to execute. It is the job of Operation System (OS). Whenever you power your computer, it reads first bytes on your Disk Drive, where it expects to see commands that will start Operation System.&lt;/p&gt;

&lt;p&gt;Important functions of an operating System.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Memory Management&lt;/li&gt;
&lt;li&gt;Processor Management&lt;/li&gt;
&lt;li&gt;Device Management&lt;/li&gt;
&lt;li&gt;File Management&lt;/li&gt;
&lt;li&gt;Network Management&lt;/li&gt;
&lt;li&gt;Security&lt;/li&gt;
&lt;li&gt;Control over system performance&lt;/li&gt;
&lt;li&gt;Job accounting&lt;/li&gt;
&lt;li&gt;Error detecting aids&lt;/li&gt;
&lt;li&gt;Coordination between other software and users&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Memory Management:
&lt;/h2&gt;

&lt;p&gt;Memory management refers to &lt;strong&gt;managing primary memory&lt;/strong&gt;. Primary or Main memory is a large array of words (4 bytes), with each of them having their own address. And so, it can easily by accessed by the CPU. &lt;br&gt;
Any program that is currently running resides in main memory, because since each word has its own address, OS takes the responsibility of storing which program is accessing what part. It takes care of the allocation and deallocation accordingly.&lt;/p&gt;

&lt;h2&gt;
  
  
  Process Scheduling:
&lt;/h2&gt;

&lt;p&gt;This is the process of &lt;strong&gt;scheduling different processe&lt;/strong&gt;s for accessing processor. Here OS keeps tracks of processor and status of process. The program responsible for this task is known as traffic controller.&lt;/p&gt;

&lt;h2&gt;
  
  
  Device Management:
&lt;/h2&gt;

&lt;p&gt;OS manages devices using drivers. OS keeps &lt;strong&gt;tracks of all devices&lt;/strong&gt; and tracks which process uses what device for how much duration. Program responsible for this task is known as the I/O controller.&lt;/p&gt;

&lt;h2&gt;
  
  
  File Management:
&lt;/h2&gt;

&lt;p&gt;A file in any computer in organized in form of &lt;strong&gt;directories&lt;/strong&gt;, for easy navigation and access. An OS keeps of track of &lt;br&gt;
The name  of the file is divided into two parts as shown below:&lt;br&gt;
• name&lt;br&gt;
• extension, separated by a period.&lt;/p&gt;

&lt;p&gt;Collection of files is a file directory. The directory contains information about the files, including attributes, location and ownership. Much of this information, especially that is concerned with storage, is managed by the operating system.&lt;/p&gt;

&lt;p&gt;Apart from the above tasks, OS has few other operations too, A few of them are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Security&lt;/strong&gt; − By means of password and similar other techniques, it prevents unauthorized access to programs and data. &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Error detecting aids&lt;/strong&gt; − Production of dumps, traces, error messages, and other debugging and error detecting aids.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Job accounting&lt;/strong&gt; − Keeping track of time and resources used by various jobs and users.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Resources:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=9GDX-IyZ_C8"&gt;Operating Systems Basics&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://codex.cs.yale.edu/avi/os-book/OS10/index.html"&gt;Operating Systems Concepts&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>beginners</category>
      <category>webdev</category>
      <category>programming</category>
      <category>linux</category>
    </item>
    <item>
      <title>Backend Development</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Sat, 29 Oct 2022 04:17:04 +0000</pubDate>
      <link>https://dev.to/indirakumar/backend-development-53o0</link>
      <guid>https://dev.to/indirakumar/backend-development-53o0</guid>
      <description>&lt;p&gt;Backend development is the process of writing code for anything behind the website or web app you are using. It is the server side of the website and a connector between the database and the frontend/User Interface.&lt;/p&gt;

&lt;p&gt;A good backend developer should have the skills of designing, &lt;em&gt;developing, scaling, and testing code&lt;/em&gt; that runs the business logic of the website.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Summary&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Terminologies&lt;/li&gt;
&lt;li&gt;Technologies and Tools

&lt;ol&gt;
&lt;li&gt;Server&lt;/li&gt;
&lt;li&gt;Databases&lt;/li&gt;
&lt;li&gt;Operating System&lt;/li&gt;
&lt;li&gt;Software Stack &lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;Additional Resources&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Terminologies:
&lt;/h2&gt;

&lt;p&gt;Let's see a few terminologies in Web Development before diving deep into the Backend.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Frontend / User Interface(UI)&lt;/em&gt; - This is the visual page that users see from their browsers and serves as an interface to the backend. The medium article that you are reading right now is a UI.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Backend&lt;/em&gt; - This is typically the server that sends/serves the content to your browser when you enter a website's URL.&lt;/p&gt;

&lt;h2&gt;
  
  
  Technologies and tools:
&lt;/h2&gt;

&lt;h2&gt;
  
  
  1) Server:
&lt;/h2&gt;

&lt;p&gt;The server is typically a computer that listens to requests from a client or the front end. There are two types of servers namely,&lt;/p&gt;

&lt;p&gt;&lt;em&gt;a) Static server:&lt;/em&gt;&lt;br&gt;
Here the webpages lie around as a file, when a request is made, the server sends it to the browser. Here a point to note is, Static server means that static files are saved in the server. In a single line, Every request from any browser will receive the same response i.e. the source code is the same. &lt;/p&gt;

&lt;p&gt;A note to be made is, this has nothing to do with the dynamicity of the webpage itself, it can still have JavaScript and dynamically change contents according to the user events(refer &lt;a href="https://www.w3schools.com/js/js_htmldom.asp"&gt;DOM&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;The best analogy to this is a &lt;strong&gt;Vending Machine&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;b) Dynamic Server:&lt;/em&gt;&lt;br&gt;
This kind of server is the one that modifies the content and renders a unique source code and serves it to the browser.&lt;br&gt;
The best analogy to Dynamic Server is a &lt;strong&gt;Restaurant&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Here is a picture explaining the difference between dynamic and static server&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NVyniHYf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw0ympnpplnfqz9yoa5z.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NVyniHYf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw0ympnpplnfqz9yoa5z.png" alt="Picture credit: [Academind](https://www.youtube.com/watch?v=_wFJj94kSTU) YouTube channel" width="752" height="339"&gt;&lt;/a&gt;Picture credit: &lt;a href="https://www.youtube.com/watch?v=_wFJj94kSTU"&gt;Academind&lt;/a&gt; YouTube channel&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is better, Dynamic or Static?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QxfC_rpY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gll9rgle1wqns0jp5de.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QxfC_rpY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gll9rgle1wqns0jp5de.png" alt="Picture credit: [Academind](https://www.youtube.com/watch?v=_wFJj94kSTU) YouTube channel" width="752" height="327"&gt;&lt;/a&gt;Picture credit: &lt;a href="https://www.youtube.com/watch?v=_wFJj94kSTU"&gt;Academind&lt;/a&gt; YouTube channel&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Deployment of Different servers:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_uYC5xOd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2o9pop7iwumdcrzz6mo4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_uYC5xOd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2o9pop7iwumdcrzz6mo4.png" alt="Picture credit: [Academind](https://www.youtube.com/watch?v=_wFJj94kSTU) YouTube channel" width="752" height="340"&gt;&lt;/a&gt;Picture credit: &lt;a href="https://www.youtube.com/watch?v=_wFJj94kSTU"&gt;Academind&lt;/a&gt; YouTube channel&lt;/p&gt;

&lt;h2&gt;
  
  
  2) Databases:
&lt;/h2&gt;

&lt;p&gt;Databases can be mainly categorized into two:&lt;br&gt;
a) Relational Databases&lt;br&gt;
b) Non Relational Databases&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZmhzZqz_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmsiyxmpk46082cwaccs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZmhzZqz_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmsiyxmpk46082cwaccs.png" alt="Picture Credit: Upwork" width="752" height="530"&gt;&lt;/a&gt;Picture Credit: &lt;a href="https://www.upwork.com/mc/documents/Relational-Databases.png"&gt;Upwork&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Things to learn from the database point of view:&lt;br&gt;
· Schemas&lt;br&gt;
· Normalization&lt;br&gt;
· Stored procedure and triggers&lt;br&gt;
· Knowledge of SQL commands&lt;br&gt;
· Views&lt;/p&gt;

&lt;h2&gt;
  
  
  3) Operating Systems:
&lt;/h2&gt;

&lt;p&gt;Knowledge of Operating Systems and different concepts related to them is indispensable to becoming a Backend Software Developer.&lt;/p&gt;

&lt;p&gt;Here is an article explaining the main concepts of OS:&lt;br&gt;
&lt;a href="https://data-notes.co/the-10-operating-system-concepts-software-developers-need-to-remember-480d0734d710"&gt;The 10 Operating System Concepts Software Developers Need to Remember&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4) Software Stack:
&lt;/h2&gt;

&lt;p&gt;Here you can find the top 10 frameworks for backend Dev:&lt;br&gt;
&lt;a href="https://medium.com/javarevisited/10-best-backend-frameworks-for-web-development-8d19e337f774"&gt;10 Best Backend Frameworks for Web Development in 2022&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Things to learn from the Backend point of view:&lt;br&gt;
· Session management&lt;br&gt;
· Authentication &amp;amp; Authorization&lt;br&gt;
· Caching Mechanisms&lt;br&gt;
· APIs &amp;amp; Web Services&lt;br&gt;
· Software architectures (MVC)&lt;br&gt;
· Software design patterns&lt;br&gt;
· Algorithms and data structures&lt;br&gt;
· Structured logging&lt;br&gt;
· Debugging, profiling, and tracing&lt;br&gt;
· Deployment&lt;br&gt;
· Software testing&lt;br&gt;
· Frameworks and Package Managers&lt;/p&gt;

&lt;h2&gt;
  
  
  Additional Resources:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=cbSrsYiRamo"&gt;What is Backend Development&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/kaperskyguru/introduction-to-backend-development-506a"&gt;Introduction to Backend Development&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=4r6WdaY3SOA"&gt;How Backend works&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.upwork.com/resources/beginners-guide-back-end-development"&gt;Guide to Backend Development&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>career</category>
      <category>database</category>
    </item>
    <item>
      <title>How to dual-boot Ubuntu alongside Windows</title>
      <dc:creator>Indira Kumar A K</dc:creator>
      <pubDate>Sat, 23 Apr 2022 10:55:05 +0000</pubDate>
      <link>https://dev.to/indirakumar/how-to-dual-boot-ubuntu-alongside-windows-64g</link>
      <guid>https://dev.to/indirakumar/how-to-dual-boot-ubuntu-alongside-windows-64g</guid>
      <description>&lt;p&gt;Linux is a paradise for all the developer gods out there, and is something every beginner should be having hands-on. In this article we are going to see how to install Ubuntu alongside windows. This is suggested to most of the beginners because in case if something goes wrong, we can revert back to how the PC was before installation.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;First download Latest version of Ubuntu from here&lt;br&gt;
source: &lt;a href="https://ubuntu.com/#download"&gt;click here&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Create a live USB using &lt;a href="https://rufus.ie/en/"&gt;rufus&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Burn the ISO file of ubuntu into an empty pen drive using rufus(you can refer to rufus &lt;a href="https://rufus.ie/en/"&gt;official website&lt;/a&gt; if you have any doubt).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Now go to &lt;strong&gt;MyPc&lt;/strong&gt; and right click -&amp;gt; manage -&amp;gt; disk management. Now create partitions according to your own convenience(you can use this &lt;a href="https://support.microsoft.com/en-us/windows/create-and-format-a-hard-disk-partition-bbb8e185-1bda-ecd1-3465-c9728f7d7d2e"&gt;article&lt;/a&gt; for reference).&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZDd6FqJz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bppkf9ig8767urxztwuh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZDd6FqJz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bppkf9ig8767urxztwuh.png" alt="The partition that I made" width="880" height="235"&gt;&lt;/a&gt;&lt;br&gt;
I have created two disks with 25 GB SSD disk for root(so that booting is faster) and 200 GB HDD disk for file storage.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Go to start menu search bar and search "Change advanced startup options".&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jPZoCvkO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d798v571sya5slx3v3a3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jPZoCvkO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d798v571sya5slx3v3a3.png" alt="" width="880" height="770"&gt;&lt;/a&gt;&lt;br&gt;&lt;br&gt;
click &lt;strong&gt;Restart Now&lt;/strong&gt;.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xAHANQQj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdrcpw5rkyyhykyp8evv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xAHANQQj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdrcpw5rkyyhykyp8evv.png" alt="Image description" width="598" height="227"&gt;&lt;/a&gt; &lt;br&gt;
Now select &lt;strong&gt;Use a USB Drive&lt;/strong&gt;.&lt;br&gt;
Now it will reboot into the live USB&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Click &lt;strong&gt;Install Ubuntu&lt;/strong&gt; and from now select options according to your convenience.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Troubles that I faced:&lt;/strong&gt; &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;When I installed ubuntu two years ago on dual boot mode, my pc was very slow.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;How to Overcome:&lt;/strong&gt;&lt;br&gt;
The reason why it is slow is, the bootstrap of Ubuntu is saved in HDD part of the disk. So to overcome that, create a separate partition in SSD(you can use this &lt;a href="https://support.microsoft.com/en-us/windows/create-and-format-a-hard-disk-partition-bbb8e185-1bda-ecd1-3465-c9728f7d7d2e"&gt;article&lt;/a&gt; for reference) and use it for root folder of your Ubuntu OS. &lt;/p&gt;

</description>
      <category>ubuntu</category>
      <category>opensource</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
