<?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: Parth Virgoz</title>
    <description>The latest articles on DEV Community by Parth Virgoz (@parthvirgoz).</description>
    <link>https://dev.to/parthvirgoz</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1141033%2F4bf1f71c-c64e-4c1c-997a-a09ab4c55b14.jpg</url>
      <title>DEV Community: Parth Virgoz</title>
      <link>https://dev.to/parthvirgoz</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/parthvirgoz"/>
    <language>en</language>
    <item>
      <title>How to Train Your AI to Think, Write, and Respond Like You</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Tue, 09 Jun 2026 06:39:01 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/how-to-train-your-ai-to-think-write-and-respond-like-you-4g72</link>
      <guid>https://dev.to/parthvirgoz/how-to-train-your-ai-to-think-write-and-respond-like-you-4g72</guid>
      <description>&lt;h1&gt;
  
  
  How To Train Your AI To Act Like You, Think Like You, And Answer On Your Behalf
&lt;/h1&gt;

&lt;p&gt;Artificial Intelligence is everywhere today.&lt;/p&gt;

&lt;p&gt;People use AI to write articles, answer emails, generate code, create content, and even make business decisions. But there is one problem that most people face.&lt;/p&gt;

&lt;p&gt;The AI sounds nothing like them.&lt;/p&gt;

&lt;p&gt;The answers may be correct, but they often feel generic, robotic, and disconnected from the person's actual knowledge and personality.&lt;/p&gt;

&lt;p&gt;Imagine having an AI that understands how you communicate, how you make decisions, what you believe, and how you explain things. Instead of acting like a random assistant, it acts like a digital version of you.&lt;/p&gt;

&lt;p&gt;That is exactly what we are going to learn in this article.&lt;/p&gt;

&lt;p&gt;By the end, you will understand how to train an AI to write, answer questions, and behave in a way that closely matches your own style.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Does "Act Like You" Actually Mean?
&lt;/h2&gt;

&lt;p&gt;Many people think training AI to act like them means teaching it to use the same words they use.&lt;/p&gt;

&lt;p&gt;That is only a small part of the process.&lt;/p&gt;

&lt;p&gt;To truly represent you, AI needs to understand several things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Your writing style&lt;/li&gt;
&lt;li&gt;Your communication tone&lt;/li&gt;
&lt;li&gt;Your knowledge and experience&lt;/li&gt;
&lt;li&gt;Your decision-making process&lt;/li&gt;
&lt;li&gt;Your personal values&lt;/li&gt;
&lt;li&gt;Your preferred way of solving problems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example, two developers can answer the same question completely differently.&lt;/p&gt;

&lt;p&gt;One might provide a short answer.&lt;/p&gt;

&lt;p&gt;The other might explain the complete architecture, discuss pros and cons, and suggest future improvements.&lt;/p&gt;

&lt;p&gt;Neither answer is wrong.&lt;/p&gt;

&lt;p&gt;They simply reflect different personalities.&lt;/p&gt;

&lt;p&gt;The goal is to teach AI which personality belongs to you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Most People Fail
&lt;/h2&gt;

&lt;p&gt;Most people try something like this:&lt;/p&gt;

&lt;p&gt;"Act as me and answer all questions exactly like me."&lt;/p&gt;

&lt;p&gt;Unfortunately, that almost never works.&lt;/p&gt;

&lt;p&gt;The AI doesn't know who you are.&lt;/p&gt;

&lt;p&gt;It doesn't know:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How you write&lt;/li&gt;
&lt;li&gt;How you think&lt;/li&gt;
&lt;li&gt;What experiences you have&lt;/li&gt;
&lt;li&gt;What opinions you hold&lt;/li&gt;
&lt;li&gt;What mistakes you've learned from&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without data, the AI is simply guessing.&lt;/p&gt;

&lt;p&gt;If you want AI to sound like you, you must first teach it who you are.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Create Your Personal Identity Document
&lt;/h2&gt;

&lt;p&gt;The first step is creating what I call an Identity Document.&lt;/p&gt;

&lt;p&gt;Think of this as a user manual for your brain.&lt;/p&gt;

&lt;p&gt;Write down information such as:&lt;/p&gt;

&lt;h3&gt;
  
  
  Who Are You?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Your profession&lt;/li&gt;
&lt;li&gt;Your background&lt;/li&gt;
&lt;li&gt;Your experience&lt;/li&gt;
&lt;li&gt;Your industry&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How Do You Communicate?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Formal or casual&lt;/li&gt;
&lt;li&gt;Short or detailed&lt;/li&gt;
&lt;li&gt;Technical or beginner-friendly&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What Are Your Values?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Simplicity over complexity&lt;/li&gt;
&lt;li&gt;Speed over perfection&lt;/li&gt;
&lt;li&gt;Quality over quantity&lt;/li&gt;
&lt;li&gt;Long-term thinking over short-term gains&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  How Do You Solve Problems?
&lt;/h3&gt;

&lt;p&gt;Document your typical thinking process.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;p&gt;"When solving a problem, I first look for the simplest solution. If that doesn't work, I gradually increase complexity."&lt;/p&gt;

&lt;p&gt;Statements like this help AI understand your decision-making patterns.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Feed The AI Your Writing
&lt;/h2&gt;

&lt;p&gt;This is where the magic starts happening.&lt;/p&gt;

&lt;p&gt;Instead of describing your style, show it.&lt;/p&gt;

&lt;p&gt;Collect:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Articles&lt;/li&gt;
&lt;li&gt;Emails&lt;/li&gt;
&lt;li&gt;Documentation&lt;/li&gt;
&lt;li&gt;Notes&lt;/li&gt;
&lt;li&gt;Social media posts&lt;/li&gt;
&lt;li&gt;Chat messages&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The more examples you provide, the better.&lt;/p&gt;

&lt;p&gt;After reading enough content, AI begins noticing patterns such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Common phrases you use&lt;/li&gt;
&lt;li&gt;Sentence structure&lt;/li&gt;
&lt;li&gt;Vocabulary choices&lt;/li&gt;
&lt;li&gt;Formatting preferences&lt;/li&gt;
&lt;li&gt;Teaching style&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Most people underestimate how powerful examples are.&lt;/p&gt;

&lt;p&gt;Twenty real examples will usually teach more than two pages of instructions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Teach Your Decision-Making Process
&lt;/h2&gt;

&lt;p&gt;Many people train AI on writing style but forget something important.&lt;/p&gt;

&lt;p&gt;Your writing style is not your personality.&lt;/p&gt;

&lt;p&gt;Your decisions are.&lt;/p&gt;

&lt;p&gt;Let's say someone asks:&lt;/p&gt;

&lt;p&gt;"Should I build this feature?"&lt;/p&gt;

&lt;p&gt;How would you answer?&lt;/p&gt;

&lt;p&gt;Would you focus on business impact?&lt;/p&gt;

&lt;p&gt;Would you focus on technical complexity?&lt;/p&gt;

&lt;p&gt;Would you focus on customer demand?&lt;/p&gt;

&lt;p&gt;Your answer reveals how you think.&lt;/p&gt;

&lt;p&gt;Create a collection of examples showing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Questions&lt;/li&gt;
&lt;li&gt;Your answer&lt;/li&gt;
&lt;li&gt;Why you chose that answer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This helps AI understand your logic rather than simply copying your words.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Feed Your Experiences And Lessons
&lt;/h2&gt;

&lt;p&gt;One of the biggest mistakes people make is only sharing their successes.&lt;/p&gt;

&lt;p&gt;But your personality is shaped just as much by your failures.&lt;/p&gt;

&lt;p&gt;Teach AI things like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Mistakes you've made&lt;/li&gt;
&lt;li&gt;Lessons you've learned&lt;/li&gt;
&lt;li&gt;Projects that failed&lt;/li&gt;
&lt;li&gt;Decisions you regret&lt;/li&gt;
&lt;li&gt;Things you would do differently today&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These experiences create depth.&lt;/p&gt;

&lt;p&gt;Without them, AI becomes a polished marketing version of you rather than a realistic representation of you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Build Your Personal Knowledge Base
&lt;/h2&gt;

&lt;p&gt;Now create a central place where all your information lives.&lt;/p&gt;

&lt;p&gt;This can contain:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Project documentation&lt;/li&gt;
&lt;li&gt;Business processes&lt;/li&gt;
&lt;li&gt;Standard operating procedures&lt;/li&gt;
&lt;li&gt;Frequently asked questions&lt;/li&gt;
&lt;li&gt;Notes&lt;/li&gt;
&lt;li&gt;Research&lt;/li&gt;
&lt;li&gt;Personal frameworks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Think of this as the AI's memory.&lt;/p&gt;

&lt;p&gt;Whenever someone asks a question, the AI can reference your knowledge instead of generating a generic answer.&lt;/p&gt;

&lt;p&gt;The result feels much more authentic.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 6: Create A Master Prompt
&lt;/h2&gt;

&lt;p&gt;Now combine everything.&lt;/p&gt;

&lt;p&gt;A good master prompt might include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Who you are&lt;/li&gt;
&lt;li&gt;What you do&lt;/li&gt;
&lt;li&gt;Your experience&lt;/li&gt;
&lt;li&gt;Your communication style&lt;/li&gt;
&lt;li&gt;Your values&lt;/li&gt;
&lt;li&gt;Your decision-making examples&lt;/li&gt;
&lt;li&gt;Your writing samples&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The AI now has enough information to represent you much more accurately.&lt;/p&gt;

&lt;p&gt;Think of the prompt as the operating system for your personal AI.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 7: Continuously Improve
&lt;/h2&gt;

&lt;p&gt;Training your AI is not a one-time activity.&lt;/p&gt;

&lt;p&gt;Whenever you notice something wrong:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Correct it&lt;/li&gt;
&lt;li&gt;Explain why&lt;/li&gt;
&lt;li&gt;Save the correction&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Over time, the AI becomes more aligned with your style.&lt;/p&gt;

&lt;p&gt;The process is very similar to training a new employee.&lt;/p&gt;

&lt;p&gt;The more feedback you provide, the better the results become.&lt;/p&gt;

&lt;h2&gt;
  
  
  What AI Still Cannot Do
&lt;/h2&gt;

&lt;p&gt;Even after extensive training, AI is not you.&lt;/p&gt;

&lt;p&gt;It does not have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Your emotions&lt;/li&gt;
&lt;li&gt;Your intuition&lt;/li&gt;
&lt;li&gt;Your real-world awareness&lt;/li&gt;
&lt;li&gt;Your consciousness&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What it does have is pattern recognition.&lt;/p&gt;

&lt;p&gt;And for many tasks, pattern recognition is enough.&lt;/p&gt;

&lt;p&gt;If someone asks a question you've answered hundreds of times before, AI can often provide a response that feels remarkably similar to yours.&lt;/p&gt;

&lt;h2&gt;
  
  
  Real-World Applications
&lt;/h2&gt;

&lt;p&gt;Once trained properly, your personal AI can help with:&lt;/p&gt;

&lt;h3&gt;
  
  
  Content Creation
&lt;/h3&gt;

&lt;p&gt;Writing articles, blogs, newsletters, and social media posts in your style.&lt;/p&gt;

&lt;h3&gt;
  
  
  Customer Support
&lt;/h3&gt;

&lt;p&gt;Answering common customer questions using your knowledge.&lt;/p&gt;

&lt;h3&gt;
  
  
  Business Operations
&lt;/h3&gt;

&lt;p&gt;Explaining processes and workflows exactly the way you would.&lt;/p&gt;

&lt;h3&gt;
  
  
  Team Training
&lt;/h3&gt;

&lt;p&gt;Helping new employees learn how you think and work.&lt;/p&gt;

&lt;h3&gt;
  
  
  Personal Brand Scaling
&lt;/h3&gt;

&lt;p&gt;Allowing your expertise to reach more people without requiring your constant attention.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Future Of Personal AI
&lt;/h2&gt;

&lt;p&gt;Today most people use generic AI assistants.&lt;/p&gt;

&lt;p&gt;In the future, many professionals, creators, founders, consultants, and developers will have their own personal AI systems.&lt;/p&gt;

&lt;p&gt;Instead of asking a generic AI for advice, people will interact with AI versions trained on specific experts.&lt;/p&gt;

&lt;p&gt;Imagine learning business from an AI trained by a successful founder.&lt;/p&gt;

&lt;p&gt;Or learning programming from an AI trained on a senior developer's entire knowledge base.&lt;/p&gt;

&lt;p&gt;That future is already beginning.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;The biggest mistake people make with AI is treating it like a search engine.&lt;/p&gt;

&lt;p&gt;The biggest opportunity is treating it like an apprentice.&lt;/p&gt;

&lt;p&gt;Every article you write, every email you send, every lesson you learn, and every decision you make can be used to teach your AI.&lt;/p&gt;

&lt;p&gt;Over time, you are not simply using AI.&lt;/p&gt;

&lt;p&gt;You are building a digital extension of yourself.&lt;/p&gt;

&lt;p&gt;And the people who learn how to do this today will have a massive advantage tomorrow.&lt;/p&gt;

&lt;p&gt;Because the most powerful AI is not the one that knows everything.&lt;/p&gt;

&lt;p&gt;The most powerful AI is the one that knows you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Use AI At Its Highest Potential
&lt;/h2&gt;

&lt;p&gt;Most people use AI like a search engine.&lt;/p&gt;

&lt;p&gt;They ask a question, get an answer, and move on.&lt;/p&gt;

&lt;p&gt;There is nothing wrong with that, but it barely scratches the surface of what AI can do.&lt;/p&gt;

&lt;p&gt;The real power of AI appears when you stop treating it like a tool and start treating it like something you can teach.&lt;/p&gt;

&lt;p&gt;Just like you can train a new employee, mentor a student, or explain your way of working to a team member, you can also teach AI.&lt;/p&gt;

&lt;p&gt;You can teach it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How you think&lt;/li&gt;
&lt;li&gt;How you write&lt;/li&gt;
&lt;li&gt;How you solve problems&lt;/li&gt;
&lt;li&gt;How you make decisions&lt;/li&gt;
&lt;li&gt;What you believe&lt;/li&gt;
&lt;li&gt;What experiences shaped your knowledge&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Every conversation, article, document, project, and lesson becomes training material.&lt;/p&gt;

&lt;p&gt;The more context you provide, the more accurate and useful your AI becomes.&lt;/p&gt;

&lt;p&gt;Most people never do this.&lt;/p&gt;

&lt;p&gt;They ask generic questions and receive generic answers.&lt;/p&gt;

&lt;p&gt;But when you start feeding AI your knowledge, experiences, frameworks, and writing style, something interesting happens.&lt;/p&gt;

&lt;p&gt;The AI begins acting less like a random assistant and more like a digital extension of yourself.&lt;/p&gt;

&lt;p&gt;That is where the highest potential of AI exists.&lt;/p&gt;

&lt;p&gt;Not in asking better questions.&lt;/p&gt;

&lt;p&gt;But in teaching AI who you are.&lt;/p&gt;

&lt;p&gt;The future belongs to people who know how to transfer their knowledge into AI systems.&lt;/p&gt;

&lt;p&gt;Because once your knowledge is captured, it can help you write content, answer questions, support customers, train employees, brainstorm ideas, and scale your expertise far beyond what you could do alone.&lt;/p&gt;

&lt;p&gt;So don't just use AI.&lt;/p&gt;

&lt;p&gt;Teach it.&lt;/p&gt;

&lt;p&gt;Train it.&lt;/p&gt;

&lt;p&gt;Refine it.&lt;/p&gt;

&lt;p&gt;Help it understand how you think.&lt;/p&gt;

&lt;p&gt;Because the most powerful AI isn't the one that knows everything.&lt;/p&gt;

&lt;p&gt;It's the one that knows you.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>discuss</category>
      <category>performance</category>
    </item>
    <item>
      <title>Understanding setInterval and setTimeout: A Comprehensive Guide</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Wed, 31 Jul 2024 13:30:00 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/understanding-setinterval-and-settimeout-a-comprehensive-guide-9jb</link>
      <guid>https://dev.to/parthvirgoz/understanding-setinterval-and-settimeout-a-comprehensive-guide-9jb</guid>
      <description>&lt;p&gt;In JavaScript, timing functions play a crucial role in creating dynamic and interactive web applications. Two of the most commonly used timing functions are &lt;code&gt;setInterval&lt;/code&gt; and &lt;code&gt;setTimeout&lt;/code&gt;. While they may seem similar, they serve different purposes and are used in distinct scenarios. In this blog post, we'll delve into the world of &lt;code&gt;setInterval&lt;/code&gt; and &lt;code&gt;setTimeout&lt;/code&gt;, exploring their syntax, examples, and use cases.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is &lt;code&gt;setInterval&lt;/code&gt;?
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;setInterval&lt;/code&gt; is a timing function that executes a specified function repeatedly at a fixed interval (in milliseconds). The syntax for &lt;code&gt;setInterval&lt;/code&gt; is as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;setInterval&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;delay&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&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%2Fznf1n8xdxg523lqmhelr.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%2Fznf1n8xdxg523lqmhelr.png" alt="setInterval Execution" width="700" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Where &lt;code&gt;function&lt;/code&gt; is the code to be executed, and &lt;code&gt;delay&lt;/code&gt; is the time interval (in milliseconds) between each execution.&lt;/p&gt;

&lt;p&gt;Here's an example of using &lt;code&gt;setInterval&lt;/code&gt; to update a clock every second:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Update a clock every second&lt;/span&gt;
&lt;span class="nf"&gt;setInterval&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;currentTime&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;toLocaleTimeString&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;currentTime&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the &lt;code&gt;setInterval&lt;/code&gt; function will execute the code inside the callback function every 1000 milliseconds (1 second), updating the clock with the current time.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is &lt;code&gt;setTimeout&lt;/code&gt;?
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;setTimeout&lt;/code&gt; is a timing function that executes a specified function once after a specified delay (in milliseconds). The syntax for &lt;code&gt;setTimeout&lt;/code&gt; is similar to &lt;code&gt;setInterval&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;delay&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&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%2Fqukgrlw8mur93wyezw1f.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%2Fqukgrlw8mur93wyezw1f.png" alt="setTimeout Execution" width="400" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Where &lt;code&gt;function&lt;/code&gt; is the code to be executed, and &lt;code&gt;delay&lt;/code&gt; is the time delay (in milliseconds) before the code is executed.&lt;/p&gt;

&lt;p&gt;Here's an example of using &lt;code&gt;setTimeout&lt;/code&gt; to display a message after 5 seconds:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Display a message after 5 seconds&lt;/span&gt;
&lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello, World!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the &lt;code&gt;setTimeout&lt;/code&gt; function will execute the code inside the callback function after a delay of 5000 milliseconds (5 seconds), displaying the message "Hello, World!".&lt;/p&gt;

&lt;h2&gt;
  
  
  Clearing Timers: &lt;code&gt;clearInterval&lt;/code&gt; and &lt;code&gt;clearTimeout&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;When using &lt;code&gt;setInterval&lt;/code&gt; and &lt;code&gt;setTimeout&lt;/code&gt;, it's essential to clear the timers when they're no longer needed to avoid performance issues and memory leaks. Here's how to do it:&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;clearInterval&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;clearInterval&lt;/code&gt; is used to cancel a timer created by &lt;code&gt;setInterval&lt;/code&gt;. The syntax is as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;clearInterval&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;intervalId&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Where &lt;code&gt;intervalId&lt;/code&gt; is the ID of the timer returned by setInterval.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;intervalId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;setInterval&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello, World!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Clear the timer after 5 seconds&lt;/span&gt;
&lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;clearInterval&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;intervalId&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we create an interval timer that logs "Hello, World!" every second. After 5 seconds, we clear the timer using &lt;code&gt;clearInterval&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;clearTimeout&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;clearTimeout&lt;/code&gt; is used to cancel a timer created by &lt;code&gt;setTimeout&lt;/code&gt;. The syntax is as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;clearTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;timeoutId&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Where &lt;code&gt;timeoutId&lt;/code&gt; is the ID of the timer returned by &lt;code&gt;setTimeout&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;timeoutId&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello, World!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;5000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Clear the timer before it executes&lt;/span&gt;
&lt;span class="nf"&gt;clearTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;timeoutId&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we create a timeout timer that logs "Hello, World!" after 5 seconds. Before the timer executes, we clear it using clearTimeout.&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Differences
&lt;/h2&gt;

&lt;p&gt;So, what's the main difference between &lt;code&gt;setInterval&lt;/code&gt; and &lt;code&gt;setTimeout&lt;/code&gt;? Here are the key takeaways:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Repetition&lt;/strong&gt;: &lt;code&gt;setInterval&lt;/code&gt; executes a function repeatedly at a fixed interval, while &lt;code&gt;setTimeout&lt;/code&gt; executes a function once after a specified delay.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Interval vs. Delay&lt;/strong&gt;: &lt;code&gt;setInterval&lt;/code&gt; uses an interval (the time between each execution), while &lt;code&gt;setTimeout&lt;/code&gt; uses a delay (the time before the first execution).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use Cases&lt;/strong&gt;: &lt;code&gt;setInterval&lt;/code&gt; is suitable for ongoing tasks, such as animations, polling, or updating data in real-time. &lt;code&gt;setTimeout&lt;/code&gt; is better suited for one-time tasks, like displaying a message or hiding an element.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Best Practices and Common Pitfalls
&lt;/h2&gt;

&lt;p&gt;Here are some tips to keep in mind when using &lt;code&gt;setInterval&lt;/code&gt; and &lt;code&gt;setTimeout&lt;/code&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Clear timers&lt;/strong&gt;: Use &lt;code&gt;clearInterval&lt;/code&gt; and &lt;code&gt;clearTimeout&lt;/code&gt; to cancel timers when they're no longer needed, to avoid performance issues and memory leaks.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mind the interval&lt;/strong&gt;: Be cautious when setting short intervals, as they can cause performance issues or even crashes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use setTimeout for one-time tasks&lt;/strong&gt;: If you only need to execute a function once, use &lt;code&gt;setTimeout&lt;/code&gt; instead of &lt;code&gt;setInterval&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Avoid multiple timers&lt;/strong&gt;: Be careful not to create multiple timers with the same interval or delay, as this can lead to unexpected behavior.&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;In conclusion, &lt;code&gt;setInterval&lt;/code&gt; and &lt;code&gt;setTimeout&lt;/code&gt; are two powerful timing functions in JavaScript, each with its own strengths and use cases. By understanding the differences between these functions, you can create more efficient, effective, and engaging web applications. Remember to use &lt;code&gt;setInterval&lt;/code&gt; for ongoing tasks and &lt;code&gt;setTimeout&lt;/code&gt; for one-time tasks, and always follow best practices to avoid common pitfalls.&lt;/p&gt;

&lt;p&gt;I hope this guide has helped you grasp the concepts of &lt;code&gt;setInterval&lt;/code&gt; and &lt;code&gt;setTimeout&lt;/code&gt;.&lt;/p&gt;

</description>
      <category>javasc</category>
      <category>webdev</category>
      <category>react</category>
      <category>reactnative</category>
    </item>
    <item>
      <title>Styling in React</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Fri, 12 Jul 2024 13:30:00 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/styling-in-react-594n</link>
      <guid>https://dev.to/parthvirgoz/styling-in-react-594n</guid>
      <description>&lt;p&gt;Styling is an essential aspect of building React applications. You have various options for styling, ranging from traditional CSS to modern CSS-in-JS solutions and component libraries. Let's explore some popular approaches:&lt;/p&gt;

&lt;h1&gt;
  
  
  Traditional CSS
&lt;/h1&gt;

&lt;p&gt;You can use plain old CSS to style your ReactJS app. Create CSS files and import them into your components. This approach provides familiarity and flexibility but may lack some of the benefits of modern styling solutions.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/* styles.css */&lt;/span&gt;
&lt;span class="nc"&gt;.button&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;white&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;10px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;5px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// App.jsx&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./styles.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"button"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Click Me&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Inline Styles
&lt;/h1&gt;

&lt;p&gt;Inline styles in React are specified as an object with camelCase properties instead of a CSS string.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;buttonStyle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;backgroundColor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;blue&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;white&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;10px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;none&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;borderRadius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;5px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;buttonStyle&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Click Me&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;backgroundColor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;green&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;white&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Click Me&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  CSS Modules
&lt;/h1&gt;

&lt;p&gt;CSS Modules allow you to write CSS that's scoped locally to the component, preventing conflicts with styles in other parts of the application.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="c"&gt;/* Button.module.css */&lt;/span&gt;
&lt;span class="nc"&gt;.button&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;white&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;10px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;5px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Button.jsx&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;styles&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./Button.module.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Button&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Click Me&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  CSS-in-JS Solutions
&lt;/h1&gt;

&lt;p&gt;CSS-in-JS libraries like styled-components, Emotion, and Linaria allow you to write CSS directly within your JavaScript code. This approach offers scoped styles, dynamic styling, and better component encapsulation.&lt;/p&gt;

&lt;p&gt;Styled-components is a library for React and React Native that allows you to use component-level styles in your application. It uses tagged template literals to style your components.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Example of using styled-components in React component&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;styled&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;styled-components&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;StyledButton&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;styled&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="s2"&gt;`
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;MyComponent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;StyledButton&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Click me&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;StyledButton&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Styling Libraries
&lt;/h1&gt;

&lt;p&gt;Several CSS-driven styling libraries are available for React developers. These libraries offer pre-styled and utility classes to quickly build attractive interfaces. Some popular options include TailwindCSS, and react-bootstrap. More on &lt;a href="https://devship.tech/react/styling-libraries" rel="noopener noreferrer"&gt;Styling Libraries&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Example of using TailwindCSS in React component&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;MyComponent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;className&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
                Click me
            &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Component Libraries
&lt;/h1&gt;

&lt;p&gt;Several CSS-driven component libraries are available for React developers. These libraries offer pre-styled components to quickly build attractive interfaces. Some popular options include Chakra UI, MUI, Ant Design, Shadcn, MagicUI, NextUI, StyleX, TailwindUI, HeadlessUI, ArkUI, Reactstrap, Keep React and Aceternity UI. More on &lt;a href="https://devship.tech/react/components-libraries" rel="noopener noreferrer"&gt;Components Libraries&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Example of using Chakra UI components in React&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Heading&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@chakra-ui/react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;MyComponent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Heading&lt;/span&gt; &lt;span class="na"&gt;size&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"lg"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Welcome to Chakra UI&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Heading&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt; &lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"blue"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Click me&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Choosing the Right Approach
&lt;/h1&gt;

&lt;p&gt;The choice of styling approach depends on your project requirements, team preferences, and design goals. Consider factors such as developer experience, maintainability, and performance when selecting a styling solution for your React application.&lt;/p&gt;

</description>
      <category>css</category>
      <category>react</category>
      <category>reactnative</category>
      <category>styling</category>
    </item>
    <item>
      <title>An Ultimate Guide to Open Source Contribution for Beginners</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Thu, 13 Jun 2024 13:30:00 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/starting-your-open-source-journey-a-beginners-guide-f67</link>
      <guid>https://dev.to/parthvirgoz/starting-your-open-source-journey-a-beginners-guide-f67</guid>
      <description>&lt;h3&gt;
  
  
  Introduction:
&lt;/h3&gt;

&lt;p&gt;Do you ever stop and think about how you could become part of that small group of people who are writing software that governing the digital world?&lt;/p&gt;

&lt;p&gt;Open-source projects offer the solution. They work as well-stocked workshops where trained coding engineers from various disciplines collaborate to make and develop useful software products. However, if you have just entered the space, you will notice that it is intimidating. No need to be afraid! By clicking here, you can travel to the far-off world of open source that you will love too even though you may be a newbie in coding or an eager developer wanting to get your feet wet.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Understanding Open Source&lt;/strong&gt;:&lt;br&gt;
First things first. Open-source is software with a heart that beats transparency. It is like a recipe that is out in the open, and everyone can see the ingredients and modify them to get something even better. Really cool, isn't it?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Choosing Your Adventure&lt;/strong&gt;:&lt;br&gt;
There are so many projects around that it may be rather difficult to decide which one to join. GitHub, GitLab, and Bitbucket are your playgrounds. Focus on projects that attract you most, where the community welcomes you and the tasks are thrilling.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Getting Your Tools Ready&lt;/strong&gt;:&lt;br&gt;
It's time to arm yourself! Usually, each project comes with its own installation instructions. However, these are not scary as the majority of them include a very user-friendly guide. Just follow the steps on how to install the tools that you need to begin your project with.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Finding Your Mission&lt;/strong&gt;:&lt;br&gt;
So, let's go to work now. Here are some great places to start from - "good first issue" or "beginner-friendly." These small papers are task suggestions for newcomers. Find out which of these ideas interests you and start solving the problem!&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Crafting Your Contribution&lt;/strong&gt;:&lt;br&gt;
You're about to get in the action while adding your special touch. Copy the project, make your personal playground branch, and get your hands dirty by experimenting. Don't be afraid to fall into errors; it's indeed the learning curve. At time, you will be good to go, just send off your article with pull request.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Joining the Party&lt;/strong&gt;:&lt;br&gt;
Through coding, people not only reinforce the project, but they also strengthen the team. Jump into discussions, ask questions, and assist wherever you can. In the open-source community, you can always find someone who is pleasant and who eagerly shares knowledge and opportunities for cooperation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Embracing Feedback&lt;/strong&gt;:&lt;br&gt;
The openness of the community allows feedback to be your ally, as in open source. There is no harm in suggesting a few alternatives; ask for opinions, look for useful insights, and adapt your output to new conditions. The piece should be a cooperative effort between the members.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Celebrating Your Victory&lt;/strong&gt;:&lt;br&gt;
Once you are credited for a pull request, it is time to throw a digital party. Now, you are an official member of the open-source community, a group of tech-savvy people writing the codes of the future.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Conclusion:
&lt;/h3&gt;

&lt;p&gt;Beginners with a burning desire to code, not just the experts, also have a place in the world of open source. So step out of your zone and take a chance. So don't be afraid to take that first step. With this guide as your compass, you're ready to embark on an exciting journey into the world of open source. Happy coding!&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>beginners</category>
      <category>contribution</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Enhancing React Development with npx: A Comparison with npm</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Tue, 04 Jun 2024 03:30:00 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/enhancing-react-development-with-npx-a-comparison-with-npm-17p4</link>
      <guid>https://dev.to/parthvirgoz/enhancing-react-development-with-npx-a-comparison-with-npm-17p4</guid>
      <description>&lt;p&gt;&lt;strong&gt;Introduction&lt;/strong&gt;:&lt;br&gt;
In the dynamic world of React development, efficient package management is crucial for streamlined workflows. npm and npx are two essential tools in the Node.js ecosystem, each offering unique benefits. This article delves into the advantages of leveraging npx over npm in React development scenarios.&lt;/p&gt;
&lt;h2&gt;
  
  
  Why Choose npx for React Development?
&lt;/h2&gt;

&lt;p&gt;When initiating a new React project, utilizing &lt;code&gt;npx create-react-app todo&lt;/code&gt; instead of &lt;code&gt;npm create-react-app todo&lt;/code&gt; is the preferred method. Here's why:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Latest Version Assurance&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;npx&lt;/code&gt; ensures the latest version of &lt;code&gt;create-react-app&lt;/code&gt; without requiring a global installation.&lt;/li&gt;
&lt;li&gt;When executing &lt;code&gt;npx create-react-app todo&lt;/code&gt;, the tool checks for the availability of &lt;code&gt;create-react-app&lt;/code&gt; globally. If not found, it downloads and executes it temporarily. This guarantees that you always use the most up-to-date version of &lt;code&gt;create-react-app&lt;/code&gt; without worrying about version conflicts.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Avoiding Version Conflicts&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Using &lt;code&gt;npm create-react-app todo&lt;/code&gt; relies on &lt;code&gt;create-react-app&lt;/code&gt; being globally installed, potentially leading to version conflicts.&lt;/li&gt;
&lt;li&gt;By contrast, &lt;code&gt;npx create-react-app todo&lt;/code&gt; mitigates version conflicts by fetching and executing &lt;code&gt;create-react-app&lt;/code&gt; locally, ensuring project integrity and stability.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In summary, &lt;code&gt;npx create-react-app todo&lt;/code&gt; offers a seamless, version-agnostic approach to initiating React projects, making it the preferred method for React developers.&lt;/p&gt;
&lt;h2&gt;
  
  
  Understanding the Difference:
&lt;/h2&gt;

&lt;p&gt;While both npm and npx are integral parts of the Node.js ecosystem, they serve distinct purposes:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;npm (Node Package Manager)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;npm serves as the default package manager for Node.js and JavaScript.&lt;/li&gt;
&lt;li&gt;It facilitates package installation, management, versioning, and publishing, both globally and locally within projects.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;npx (Node Package Execute)&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;npx is a tool bundled with npm (from version 5.2.0 onwards) used for executing npm packages.&lt;/li&gt;
&lt;li&gt;Unlike npm, npx allows for the temporary execution of packages without requiring global installation.&lt;/li&gt;
&lt;li&gt;It is commonly employed for one-time tasks, such as running commands or scripts from dependencies.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Command Comparison:
&lt;/h2&gt;

&lt;p&gt;To create a new React app using both npm and npx, consider the following commands:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Using npm&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; create-react-app
create-react-app my-react-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Using npx&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx create-react-app my-react-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Both commands achieve the same outcome of scaffolding a new React project named "my-react-app" in the current directory. However, npx's approach ensures execution with the latest version of &lt;code&gt;create-react-app&lt;/code&gt; without the need for a global installation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;:&lt;br&gt;
In React development workflows, leveraging npx offers significant advantages over npm, particularly in project initiation and management. By ensuring the latest package versions and mitigating version conflicts, npx enhances development efficiency and project integrity. React developers are encouraged to adopt npx as a preferred tool for executing packages, empowering seamless React project workflows and ensuring consistent project environments.&lt;/p&gt;

</description>
      <category>react</category>
      <category>node</category>
      <category>npm</category>
      <category>vite</category>
    </item>
    <item>
      <title>Run Bun! Command Guide</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Tue, 09 Apr 2024 05:30:00 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/run-bun-npm-yarn-and-bun-commands-16e6</link>
      <guid>https://dev.to/parthvirgoz/run-bun-npm-yarn-and-bun-commands-16e6</guid>
      <description>&lt;p&gt;Bun is designed to start fast and run fast.&lt;/p&gt;

&lt;p&gt;Under the hood, Bun uses the JavaScriptCore engine, which Apple develops for Safari. In most cases, the startup and running performance is faster than V8, the engine used by Node.js and Chromium-based browsers. Its transpiler and runtime are written in Zig, a modern, high-performance language. On Linux, this translates into startup times 4x faster than Node.js.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you want to get rid of all those different commands on each package manager I highly recommend installing SWPM and saying goodbye to package manager confusion. It will do all the command translations for you.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This is a command guide for the npm (Node Package Manager), and yarn (Yet Another Resource Negotiator), to bun (JavaScript runtime).&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note: &lt;code&gt;&amp;lt;package&amp;gt;&lt;/code&gt; follow this structure &lt;code&gt;&amp;lt;package[@latest|@#.#.#]&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Package Commands
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;commands&lt;/th&gt;
&lt;th&gt;npm&lt;/th&gt;
&lt;th&gt;yarn&lt;/th&gt;
&lt;th&gt;bun&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;clean cache&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm cache clean&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn cache clean&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun pm cache rm&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;install from &lt;code&gt;package.json&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm install&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn [install]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun install&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;don't read or generate a lockfile&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm install --no-package-lock&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn install --no-lockfile&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun install --no-save&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;lockfile is not updated&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm ci&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn install --frozen-lockfile&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun install --frozen-lockfile&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;add package&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm install &amp;lt;package&amp;gt; [--location=global]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn [global] add &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun add &amp;lt;package&amp;gt; [--global]&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;add package as &lt;code&gt;dependencies&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm install &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn add &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun add &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;add package as &lt;code&gt;devDependencies&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm install &amp;lt;package&amp;gt; --save-dev&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn add &amp;lt;package&amp;gt; --dev&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun add &amp;lt;package&amp;gt; --dev&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;add package as &lt;code&gt;optionalDependencies&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm install &amp;lt;package&amp;gt; --save-optional&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn add &amp;lt;package&amp;gt; --optional&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun add &amp;lt;package&amp;gt; --optional&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;add exact version&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm install &amp;lt;package&amp;gt; --save-exact&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn add &amp;lt;package&amp;gt; --exact&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun add &amp;lt;package&amp;gt; --exact&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;remove package&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm uninstall &amp;lt;package&amp;gt; [--location=global]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn [global] remove &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun remove [&amp;lt;package&amp;gt;] [--global]&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;remove package as &lt;code&gt;dependencies&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm uninstall &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn remove &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun remove &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;remove package as &lt;code&gt;devDependencies&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm uninstall &amp;lt;package&amp;gt; --save-dev&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn remove &amp;lt;package&amp;gt; --dev&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun remove &amp;lt;package&amp;gt; --dev&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;remove package as &lt;code&gt;optionalDependencies&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm uninstall &amp;lt;package&amp;gt; --save-optional&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn remove &amp;lt;package&amp;gt; --optional&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun remove &amp;lt;package&amp;gt; --optional&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;list all package at the top level&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm list --depth 0 [--location=global]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn [global] list --depth 0&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun pm ls&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Shared Commands
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;commands&lt;/th&gt;
&lt;th&gt;npm&lt;/th&gt;
&lt;th&gt;yarn&lt;/th&gt;
&lt;th&gt;bun&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;init or create&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm init&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn init&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun init&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;run scripts&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm run &amp;lt;script&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn run &amp;lt;script&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun run &amp;lt;script&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;run test&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm test&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn test&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun test&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;crate bundle package&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm build&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn build&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun build&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;link local package&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npm link [&amp;lt;folder&amp;gt;]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn link [&amp;lt;folder&amp;gt;]&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bun link [&amp;lt;folder&amp;gt;]&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Run Remotely
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;commands&lt;/th&gt;
&lt;th&gt;npm&lt;/th&gt;
&lt;th&gt;yarn&lt;/th&gt;
&lt;th&gt;bun&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;run package&lt;/td&gt;
&lt;td&gt;&lt;code&gt;npx &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;yarn dlx &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;bunx &amp;lt;package&amp;gt;&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  CLI documentation
&lt;/h2&gt;

&lt;p&gt;&lt;a href="//docs.npmjs.com/"&gt;npm&lt;/a&gt;&lt;br&gt;
&lt;a href="//classic.yarnpkg.com/"&gt;yarn&lt;/a&gt;&lt;br&gt;
&lt;a href="//bun.sh/"&gt;bun&lt;/a&gt;&lt;/p&gt;

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

&lt;p&gt;Transitioning from npm and yarn to Bun offers developers faster startup times and streamlined commands, thanks to its use of the JavaScriptCore engine and Zig language. Bun simplifies package management while enhancing performance, promising a more efficient JavaScript development experience. Explore Bun's capabilities at &lt;a href="//bun.sh"&gt;bun.sh&lt;/a&gt; for optimized workflows and accelerated development.&lt;/p&gt;

</description>
      <category>npm</category>
      <category>bunjs</category>
      <category>javascript</category>
      <category>node</category>
    </item>
    <item>
      <title>JavaScript developers must know this Array method!</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Thu, 30 Nov 2023 13:30:00 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/javascript-developers-must-know-this-array-method-2mhb</link>
      <guid>https://dev.to/parthvirgoz/javascript-developers-must-know-this-array-method-2mhb</guid>
      <description>&lt;p&gt;&lt;strong&gt;push():&lt;/strong&gt; Adds one or more elements to the end of an array and returns the new length of the array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: ['apple', 'banana', 'cherry']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;pop():&lt;/strong&gt; Removes the last element from an array and returns that element.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;last&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 
&lt;span class="c1"&gt;// output: 'cherry', now fruits = ['apple', 'banana']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;shift():&lt;/strong&gt; Removes the first element from an array and returns that element.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;first&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;shift&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 
&lt;span class="c1"&gt;// output: 'apple', now fruits = ['banana', 'cherry']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;unshift():&lt;/strong&gt; Adds one or more elements to the beginning of an array and returns the new length of the array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;unshift&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: ['apple', 'banana', 'cherry']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;indexOf():&lt;/strong&gt; Returns the first index at which a given element can be found in the array, or -1 if it is not present.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;index&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;indexOf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: 1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;includes():&lt;/strong&gt; Determines whether an array includes a certain element, returning true or false as appropriate.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;hasApple&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;includes&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;slice():&lt;/strong&gt; Returns a shallow copy of a portion of an array into a new array object.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;someFruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: ['apple', 'banana']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;reverse():&lt;/strong&gt; Reverses an array in place. The first array element becomes the last, and the last array element becomes the first.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;reverse&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 
&lt;span class="c1"&gt;// output: ['cherry', 'banana', 'apple']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;concat():&lt;/strong&gt; Merges two or more arrays. This method does not change the existing arrays but instead returns a new array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;moreFruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;date&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;allFruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;concat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;moreFruits&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: ['apple', 'banana', 'cherry', 'date']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;join():&lt;/strong&gt; Joins all elements of an array into a string and returns this string.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;, &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: 'apple, banana, cherry'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;lastIndexOf():&lt;/strong&gt; Returns the last index at which a given element can be found in the array, or -1 if it is not present.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;lastIndexOf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;forEach():&lt;/strong&gt; Executes a provided function once for each array element.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fruit&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fruit&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="cm"&gt;/* output:
'apple'
'banana'
'cherry'
*/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;map():&lt;/strong&gt; Creates a new array with the results of calling a provided function on every element in the calling array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;roots&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sqrt&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: [1, 2, 3]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;filter():&lt;/strong&gt; Creates a new array with all elements that pass the test implemented by the provided function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;bigNumbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;number&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: [9]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;reduce():&lt;/strong&gt; Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;sum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;reduce&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;accumulator&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;currentValue&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;accumulator&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;currentValue&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: 10&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;some():&lt;/strong&gt; Tests whether at least one element in the array passes the test implemented by the provided function. Returns a Boolean.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;hasNegativeNumbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;some&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;number&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;every():&lt;/strong&gt; Tests whether all elements in the array pass the test implemented by the provided function. Returns a Boolean.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;allPositiveNumbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;every&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;number&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
&lt;span class="c1"&gt;// output: true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;find():&lt;/strong&gt; Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;15&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;found&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;element&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;9&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt; 
&lt;span class="c1"&gt;// output: 10&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;toString():&lt;/strong&gt; Returns a string representing the specified array and its elements.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cherry&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;fruits&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; 
&lt;span class="c1"&gt;// output: 'apple,banana,cherry'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These methods form the backbone of array manipulation in JavaScript, and knowing how to use them can greatly simplify your coding tasks.&lt;/p&gt;

</description>
      <category>reactnative</category>
      <category>javascript</category>
      <category>react</category>
      <category>frontend</category>
    </item>
    <item>
      <title>21 Internship Programs to Gain Tech Experience 🚀💯</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Tue, 21 Nov 2023 15:54:09 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/this-is-not-for-everyone-5abp</link>
      <guid>https://dev.to/parthvirgoz/this-is-not-for-everyone-5abp</guid>
      <description>&lt;p&gt;The challenge of breaking into the tech often revolves around the dilemma of required experience but struggling to gain that experience without an opportunity.&lt;/p&gt;

&lt;p&gt;To address this issue I’ve manually curated a diverse list of 21 tech internships from open source to more specified programs by various companies.&lt;/p&gt;

&lt;p&gt;I hope this compilation will help you gain valuable experience in the tech industry and allow you to take the first step toward your dream role!&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Outreachy
&lt;/h2&gt;

&lt;p&gt;Outreachy provides internships in open-source and open science. Outreachy provides internships to people subject to systemic bias and impacted by underrepresentation in the technical industry where they are living.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.outreachy.org/" rel="noopener noreferrer"&gt;https://www.outreachy.org/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Open Source Promotion Plan
&lt;/h2&gt;

&lt;p&gt;OSPP has united with domestic and international open-source communities to propose project tasks for the development and maintenance of important open-source software.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://summer-ospp.ac.cn/" rel="noopener noreferrer"&gt;https://summer-ospp.ac.cn/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Winter of Code
&lt;/h2&gt;

&lt;p&gt;GDSC NSEC hosts its annual celebration of the collaborative spirit of communities and open-source technologies, the Winter of Code (WoC). Each year, tentatively in the months of Jan-Feb, they are home to contributors from across the world, looking to contribute to projects dedicated to the event by participating.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://winterofcode.com/" rel="noopener noreferrer"&gt;https://winterofcode.com/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. OpenCode IIITA
&lt;/h2&gt;

&lt;p&gt;A month-long program for students to start their journey in the world of open-source. The Only requirement is an enthusiastic heart to learn.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://opencodeiiita.github.io/" rel="noopener noreferrer"&gt;https://opencodeiiita.github.io/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Open Summer of Code
&lt;/h2&gt;

&lt;p&gt;A 4-week summer program in July provides Belgian-based students the training, network, and support necessary to transform open innovation projects into powerful real-world services.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://osoc.be/" rel="noopener noreferrer"&gt;https://osoc.be/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Google Summer of Code
&lt;/h2&gt;

&lt;p&gt;A global, online program focused on bringing new contributors into open-source software development.&lt;/p&gt;

&lt;p&gt;GSoC Contributors work with an open-source organization on a 12+ week programming project under the guidance of mentors.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://summerofcode.withgoogle.com/" rel="noopener noreferrer"&gt;https://summerofcode.withgoogle.com/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Google Season of Docs
&lt;/h2&gt;

&lt;p&gt;Google Season of Docs provides support for open-source projects to improve their documentation and gives professional technical writers an opportunity to gain experience in open-source. Together we raise awareness of open source, of docs, and of technical writing.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developers.google.com/season-of-docs/" rel="noopener noreferrer"&gt;https://developers.google.com/season-of-docs/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  8. GitHub Octernships Program
&lt;/h2&gt;

&lt;p&gt;The GitHub Octernships program connects students with industry partners in paid professional experiences and mentorship on open source and software development projects.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://education.github.com/students/octernships" rel="noopener noreferrer"&gt;https://education.github.com/students/octernships&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Foundation for Public Code Internship program
&lt;/h2&gt;

&lt;p&gt;This program offers you the opportunity to work on high-value public code projects used around the world and improve the role of technology in society. You’ll help to make public-purpose software and policy – used for example in cities and other public organizations – more open and collaborative.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://publiccode.net/careers/intern.html" rel="noopener noreferrer"&gt;https://publiccode.net/careers/intern.html&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  10. FOSSASIA Internship Program
&lt;/h2&gt;

&lt;p&gt;In the program, FOSSASIA is looking for people who would like to work on the project they choose continuously. Different from GSoC in the internship it is not only about a specific project proposal. They look for participants who are interested in advancing the project and solving bugs or adding features that are required to bring the project forward.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://docs.google.com/forms/d/e/1FAIpQLScp8h5SIPVK5G2SAm5vtrv7KLKeOeYTxlZBkDRE6I7Toybt0A/viewform" rel="noopener noreferrer"&gt;https://docs.google.com/forms/d/e/1FAIpQLScp8h5SIPVK5G2SAm5vtrv7KLKeOeYTxlZBkDRE6I7Toybt0A/viewform&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  11. Google - STEP (Student Training in Engineering Program)
&lt;/h2&gt;

&lt;p&gt;STEP (Student Training in Engineering Program), formerly known as Engineering Practicum, is a 12-week internship for first and second-year undergraduate students with a passion for computer science.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://buildyourfuture.withgoogle.com/programs/step" rel="noopener noreferrer"&gt;https://buildyourfuture.withgoogle.com/programs/step&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  12. Igalia Coding Experience
&lt;/h2&gt;

&lt;p&gt;The Igalia Coding Experience is a grant program for people studying Computer Science, Information Technology, or Free Software, whether in a formal setting (for example, a college or university) or an informal one (self-teaching).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.igalia.com/coding-experience/" rel="noopener noreferrer"&gt;https://www.igalia.com/coding-experience/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  13. CERN Summer Student Programme
&lt;/h2&gt;

&lt;p&gt;If you’re studying computer science, you can join the student program, to work on an advanced IT project and follow IT lectures specially prepared for you by experts at CERN and other institutes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://careers.cern/summer" rel="noopener noreferrer"&gt;https://careers.cern/summer&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  14. FOSSEE GIS Internship
&lt;/h2&gt;

&lt;p&gt;Semester-long internships and Summer fellowships are organized each year. These tasks can involve programming/ scientific computing/ conducting awareness workshops/ collecting data that will be of use to the community.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://fossee.in/fossee-internships" rel="noopener noreferrer"&gt;https://fossee.in/fossee-internships&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  15. VSRP Internships
&lt;/h2&gt;

&lt;p&gt;This program has over 100 projects spanning 16 STEM disciplines, and each project has its own 'Apply' button. Each project is 3 - 6 months long and includes airfares, flights, housing, health insurance, and a monthly stipend.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://vsrp.kaust.edu.sa/internship/search" rel="noopener noreferrer"&gt;https://vsrp.kaust.edu.sa/internship/search&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  16. Free Software Foundation Internships and Traineeships
&lt;/h2&gt;

&lt;p&gt;Generally open for applications throughout the year. Sometimes they offer longer internships and traineeships, and other times they seek applicants with a specific focus (for instance students for summer internships).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://fsfe.org/about/jobs/internship" rel="noopener noreferrer"&gt;https://fsfe.org/about/jobs/internship&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  17. OGP Internship
&lt;/h2&gt;

&lt;p&gt;You will have a direct hand working on things that matter. There will be opportunities to learn, contribute, and have the autonomy to work on tech for the public good.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.open.gov.sg/careers/internships/" rel="noopener noreferrer"&gt;https://www.open.gov.sg/careers/internships/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  18. SheCodeAfrica Programs
&lt;/h2&gt;

&lt;p&gt;Programs are specifically designed to empower young African girls and women in tech with the technical and career skills needed to scale in their fields.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://shecodeafrica.org" rel="noopener noreferrer"&gt;https://shecodeafrica.org&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  19. Layer5 Internship Program
&lt;/h2&gt;

&lt;p&gt;Interns engage as part of the community. Your contributions will affect people you've never met as the Layer5 projects are being broadly referenced and used in organizations large and small.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://layer5.io/careers/internships" rel="noopener noreferrer"&gt;https://layer5.io/careers/internships&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  20. Season of KDE
&lt;/h2&gt;

&lt;p&gt;Every year since 2013, KDE Student Programs has been running Season of KDE as a program similar to, but not quite the same as Google Summer of Code, offering an opportunity to everyone (not just students) to participate in both code and non-code projects that benefits the KDE ecosystem.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://season.kde.org/" rel="noopener noreferrer"&gt;https://season.kde.org/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  21. Summer of Bitcoin
&lt;/h2&gt;

&lt;p&gt;A global, online summer internship program focused on introducing university students to Bitcoin open-source development and design.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.summerofbitcoin.org/" rel="noopener noreferrer"&gt;https://www.summerofbitcoin.org/&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Did you like the resources? Here's more 👇
&lt;/h2&gt;

&lt;p&gt;Over the previous months, I've compiled The Ultimate Bundle with every resource you need from starting to learn to code to landing your dream tech role!&lt;/p&gt;

&lt;p&gt;Includes 900+ resources in total, further divided into 99 categories for easier navigation and access! Save 1000s of hours and focus on what matters!&lt;/p&gt;

&lt;p&gt;I'm currently offering 50%OFF just for my readers! Don't miss out on this!&lt;/p&gt;

&lt;p&gt;⭐ Get it here: &lt;a href="https://madza.gumroad.com/l/ultimate-job-bundle/p6g5jvw" rel="noopener noreferrer"&gt;Ultimate Resources Bundle to Land a Job in Tech!&lt;/a&gt; ⭐&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%2Fj5grdzchaz25n6u24om4.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%2Fj5grdzchaz25n6u24om4.png" alt="Ultimate Resources" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  This package includes:
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;150+ Learning Resources to Learn to Code:&lt;/strong&gt; A comprehensive collection of resources, including tutorials, articles, and handbooks, to help you master coding and programming languages.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;220+ Developer Courses from Top Companies and Universities:&lt;/strong&gt; A huge list of courses offered by reputable companies and universities, covering a wide range of development topics to enhance your skills and knowledge.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;140+ Coding Certificates to Boost Your Resume:&lt;/strong&gt; Obtain valuable certificates in coding and programming, which can significantly enhance your resume and demonstrate your expertise to potential employers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;110+ Tech Internships to Gain Experience:&lt;/strong&gt; Explore a wide list of tech internships that offer real-world experience, allowing you to kickstart your career and build a strong foundation in the tech industry.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;160+ Interview Essentials for Job Seekers in Tech:&lt;/strong&gt; A comprehensive guide featuring essential tips, strategies, and resources to help you prepare for and succeed in tech job interviews.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;120+ Tech Job Boards to Find Your Dream Role:&lt;/strong&gt; Discover a wide array of job boards and platforms tailored to tech professionals, making it easier to find the perfect job opportunity in the tech industry.&lt;/p&gt;




&lt;p&gt;Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>career</category>
      <category>developer</category>
    </item>
    <item>
      <title>Top Popular Apps Built With React Native</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Tue, 14 Nov 2023 13:30:00 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/top-popular-apps-built-with-react-native-1obc</link>
      <guid>https://dev.to/parthvirgoz/top-popular-apps-built-with-react-native-1obc</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;React Native is one of the most popular frameworks for developing native apps for Android and iOS. It was developed by the Facebook team as a modern solution for developing native (or, more specifically, native-like) apps for multiple platforms with one codebase. It is a JavaScript-based framework specifically used in the development of applications for two prominent platforms – Android &amp;amp; iOS.&lt;/p&gt;

&lt;p&gt;React Native application development gained widespread popularity due to its versatility to help developers cross-platform apps with one codebase.&lt;/p&gt;

&lt;p&gt;It is built on top of Facebook’s React JS library, with the enhanced capability to develop native apps. The speed at which applications can be developed is a crucial factor nowadays. React keeps up with the current fast-paced era of app development. Therefore React Native development has gained widespread popularity, making it the second most used framework in recent times.&lt;/p&gt;

&lt;p&gt;It empowers over 10+ million websites (including web apps) across the globe – from small to the world’s most powerful tech giants – including Walmart, Tesla, Facebook, etc. Read on to learn about top companies using React Native.&lt;/p&gt;

&lt;h2&gt;
  
  
  React Native: A Perfect Solution for Multi-platform App Development
&lt;/h2&gt;

&lt;p&gt;With rapidly evolving technology, many businesses often struggle to manage their application to keep up with the latest trends. Without a doubt, native apps have much better performance and offer better performance than hybrid apps, but they are very expensive, not to mention long deployment times.&lt;/p&gt;

&lt;p&gt;In today’s digital era, apps come with an overwhelming number of features to help businesses communicate with their target customers and promote and sell their services and products, etc.&lt;/p&gt;

&lt;p&gt;However, app development is expensive, mainly when you aim to develop a multi-platform app that can run on two prominent platforms – Android and iOS. In this case, react native proves to be the best solution for millions of companies across the globe.&lt;/p&gt;

&lt;p&gt;It enables rapid app development and significantly contributes to app development cost reduction. Here are some top companies that use React Native owing to its versatile nature.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why is React Native a Popular Choice Nowadays?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;You can get developed your apps without employing a separate team of native developers.&lt;/li&gt;
&lt;li&gt;React-Native apps are almost as fast as Native apps in terms of performance.&lt;/li&gt;
&lt;li&gt;You can combine Native components and React Native to develop a robust and scalable application.&lt;/li&gt;
&lt;li&gt;It has backed by Facebook and a large community of developers, making it the sixth most popular framework for app development, as per the Stack Overflow developers survey 2022.&lt;/li&gt;
&lt;li&gt;React Native has excellent features, such as live reload and reusable component, that dramatically improves the development process.&lt;/li&gt;
&lt;li&gt;Businesses can get their developed in less time for multiple platforms.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Top Companies Using React Native
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. Bloomberg&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fa.storyblok.com%2Ff%2F219851%2F500x262%2Ff12fe46196%2Fbloomberg.webp" 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%2Fa.storyblok.com%2Ff%2F219851%2F500x262%2Ff12fe46196%2Fbloomberg.webp" alt="Bloomberg" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
Bloomberg used it a long back in 2016, with the launch of a revamped app for iOS and Android platforms. The company employed React Native to introduce features such as personalized content, videos, and live feeds.&lt;/p&gt;

&lt;p&gt;Before React Native, Bloomberg teams “would have developed the iOS and Android versions in parallel without being able to share most of the code they wrote, leading to delays and repetition,” Lew explains. By comparison, the React Native platform’s unified development capabilities made for a seamless process that allowed each developer to focus on one feature at a time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Facebook&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fa.storyblok.com%2Ff%2F219851%2F500x281%2F435c20232b%2Ffacebook.webp" 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%2Fa.storyblok.com%2Ff%2F219851%2F500x281%2F435c20232b%2Ffacebook.webp" alt="Facebook" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
Facebook is the world’s most popular social media platform that connects users across the globe and allows them to interact with each other.&lt;/p&gt;

&lt;p&gt;It is obvious Facebook would use it as it developed it. Initially, Facebook developed it for the iOS platform to implement modern web techniques in the mobile app. Sooner after a few months, the company released it for Android app development, making it a cross-platform technology.&lt;/p&gt;

&lt;p&gt;Facebook ads manager is entirely built using React Native, while the company used native code and React Native JavaScript in its Facebook Group app.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Discord&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fa.storyblok.com%2Ff%2F219851%2F500x316%2F9f9cdc8ca0%2Fdiscord.webp" 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%2Fa.storyblok.com%2Ff%2F219851%2F500x316%2F9f9cdc8ca0%2Fdiscord.webp" alt="Discord" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
Discord is a popular instant messaging platform that allows a group of users or community to connect over chat, calls, over video calls. It has more than 200 million monthly active users. It has 4.7 stars and 4.5 stars on the App Store and Google Play Store, respectively, and it is a 99.9% crash-free app.&lt;/p&gt;

&lt;p&gt;As stated in the blog published by the Discord team:&lt;/p&gt;

&lt;p&gt;React Native has been instrumental in allowing us to achieve this with a team of only three core iOS engineers!&lt;/p&gt;

&lt;p&gt;As per the blog post, React Native helped the development team in two ways – firstly, they were able to write applications by using a significant amount of the same code for its Android and iOS app development. Secondly, the app’s performance was remarkably improved.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Wix&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fa.storyblok.com%2Ff%2F219851%2F500x222%2F1cb3acf469%2Fwix.webp" 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%2Fa.storyblok.com%2Ff%2F219851%2F500x222%2F1cb3acf469%2Fwix.webp" alt="Wix" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
Wix is a popular website builder platform that includes web design and hosting services to let users create a website quickly using their website design services. It was among the companies that were early adopters of React Native.&lt;/p&gt;

&lt;p&gt;It all started in 2015 when the Wix mobile team was small, with only 4 team members. They decided to implement react for the reasons as follows:&lt;/p&gt;

&lt;p&gt;To make their mobile app more efficient&lt;br&gt;
To develop the app in less time&lt;br&gt;
To develop the significant part of the app using single code (the team shares over 95% of the business logic codebase for iOS and Android)&lt;br&gt;
To build a scalable application&lt;br&gt;
The Wix app has undergone several changes, and a large number of features were added within a short period of time, leveraging React Native.&lt;/p&gt;

&lt;p&gt;Need help from an expert developer?&lt;/p&gt;

&lt;p&gt;Hire Now&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Pinterest&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fa.storyblok.com%2Ff%2F219851%2F500x450%2Faf19464881%2Fpinterest.webp" 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%2Fa.storyblok.com%2Ff%2F219851%2F500x450%2Faf19464881%2Fpinterest.webp" alt="Pinterest" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
Pinterest is an image-sharing and social platform where you can explore new ideas and save them.&lt;/p&gt;

&lt;p&gt;Speaking of Pinterest, initially, the company chose React Native due to its so-called capability of enabling developers to create native-like apps for Android and iOS platforms using a common codebase.&lt;/p&gt;

&lt;p&gt;As per the company’s blog, the implementation of React Native resulted in increased development and reduced development costs. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Walmart&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fa.storyblok.com%2Ff%2F219851%2F500x280%2F3f9154e68c%2Fwalmart.webp" 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%2Fa.storyblok.com%2Ff%2F219851%2F500x280%2F3f9154e68c%2Fwalmart.webp" alt="Walmart" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
Walmart is the world’s leading online retail store. It provides users with a website and top-notch mobile apps to shop from their homes.&lt;/p&gt;

&lt;p&gt;They switched to React Native to build a scalable application with the growing number of smartphone users. They took advantage of React Native in their Android and iOS app development.&lt;/p&gt;

&lt;p&gt;Walmart migrated to React Native in order to increase the development velocity. Also, The company has observed better performance in page transition and a native feel across the app.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;7. Instagram&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fa.storyblok.com%2Ff%2F219851%2F500x333%2Fe4598ba922%2Finstagram-ui2.webp" 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%2Fa.storyblok.com%2Ff%2F219851%2F500x333%2Fe4598ba922%2Finstagram-ui2.webp" alt="Instagram" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
Instagram is another popular example of reacting powered application. It has over 2 billion active users monthly, making it 4th most popular social media platform in the globe in 2023.&lt;/p&gt;

&lt;p&gt;After incorporating RN into its Facebook mobile app and Facebook Ads Manager, Meta leveraged its own developed technology to its third platform – Instagram.&lt;/p&gt;

&lt;p&gt;They shipped various features to the Instagram app using React Native, like revamping the then-existing edit profile UI, adding a push notification feature, and the product development team used in building various core components.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;8. Soundcloud&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fa.storyblok.com%2Ff%2F219851%2F500x250%2F07b633bd4c%2Fsoundcloud.webp" 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%2Fa.storyblok.com%2Ff%2F219851%2F500x250%2F07b633bd4c%2Fsoundcloud.webp" alt="Soundcloud" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
The team published a blog mentioning why they adopted React Native:&lt;/p&gt;

&lt;p&gt;The main driver for us at SoundCloud to use React Native was the lack of enough mobile engineers to start development on a new mobile app.&lt;/p&gt;

&lt;p&gt;They adopted React Native to build its SoundCloud Pulse within five months after Facebook made it open-source. Since it was hard to find iOS developers, they didn’t want to have a gap of months between the launch of the Android and iOS apps.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;9. Flipkart&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fa.storyblok.com%2Ff%2F219851%2F500x356%2F6d15b858bf%2Fflipkart.webp" 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%2Fa.storyblok.com%2Ff%2F219851%2F500x356%2F6d15b858bf%2Fflipkart.webp" alt="Flipkart" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
Search/Browse is built with react-native, an infinite list of heterogeneous items.&lt;/p&gt;

&lt;p&gt;Flipkart is an Indian online shopping portal with active 150+ million per month. The app holds a 4.3 star rating and has over 500 million downloads so far.&lt;/p&gt;

&lt;p&gt;Flipkart’s homepage is developed in Native and has built various components using React Native. However, optimized native apps always exceed react-native apps. The company chose React as one of the tech stacks to enhance the app, keeping the factors below in mind.&lt;/p&gt;

&lt;p&gt;It would not degrade the performance, and they found it quite true. The app’s performance didn’t degrade even after using a significant amount of code.&lt;br&gt;
Parallel usage of the native components, along with leveraging the React Native features&lt;br&gt;
Ability to push minor changes and OTA instantly&lt;/p&gt;

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

&lt;p&gt;React native is a very powerful and widely praised framework across the globe. In this article, we have listed down some big names that use it in their mobile apps. We have also briefly described some hot features that makes it one of the most sought-after app development stack.&lt;/p&gt;

</description>
      <category>react</category>
      <category>reactnative</category>
      <category>javascript</category>
      <category>appdev</category>
    </item>
    <item>
      <title>Implement Insertion sort easily in your program</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Tue, 07 Nov 2023 13:30:00 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/implement-insertion-sort-easily-in-your-program-3aom</link>
      <guid>https://dev.to/parthvirgoz/implement-insertion-sort-easily-in-your-program-3aom</guid>
      <description>&lt;p&gt;Insertion Sort is a comparison-based sorting algorithm that works by iteratively building a sorted portion of the array or list, one element at a time. It starts with the assumption that the first element is already sorted. Then, it considers the next element and inserts it into the correct position in the sorted portion, shifting other elements as necessary. This process is repeated until the entire array is sorted.&lt;/p&gt;

&lt;h2&gt;
  
  
  How Insertion Sort Works
&lt;/h2&gt;

&lt;p&gt;Insertion Sort works by iteratively building a sorted portion of the array or list, one element at a time. It starts with the assumption that the first element is already sorted. Then, it considers the next element and inserts it into the correct position in the sorted portion, shifting other elements as necessary. This process is repeated until the entire array is sorted.&lt;/p&gt;

&lt;p&gt;Here are the step-by-step operations of Insertion Sort on this array:&lt;/p&gt;

&lt;p&gt;Step 1: Start with the second element (2) and compare it with the element in the sorted portion (5). Since 2 is smaller, we shift 5 to the right and insert 2 at the first position: [2, 5, 8, 12, 1].&lt;/p&gt;

&lt;p&gt;Step 2: Move to the third element (8) and compare it with the elements in the sorted portion (2, 5). Since 8 is larger, we leave it at its position: [2, 5, 8, 12, 1].&lt;/p&gt;

&lt;p&gt;Step 3: Repeat step 2 for the fourth element (12). Since 12 is larger than all the elements in the sorted portion, it remains in its position: [2, 5, 8, 12, 1].&lt;/p&gt;

&lt;p&gt;Step 4: Finally, consider the fifth element (1) and compare it with the elements in the sorted portion (2, 5, 8, 12). Since 1 is smaller, we shift all the larger elements to the right and insert 1 at the first position: [1, 2, 5, 8, 12].&lt;/p&gt;

&lt;p&gt;After these steps, the array is sorted in ascending order.&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%2Fhcnxat2e3i8dnxr0yuvg.gif" 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%2Fhcnxat2e3i8dnxr0yuvg.gif" alt="Insertion sort" width="500" height="300"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Implementation Steps
&lt;/h2&gt;

&lt;p&gt;Step 1: Prompt the user to enter the size of the array by using the input() function and convert it to an integer using the int() function. Store the value in a variable named n.&lt;/p&gt;

&lt;p&gt;Step 2: Create an empty list called arr to store the elements of the array.&lt;/p&gt;

&lt;p&gt;Step 3: Use a for loop to iterate n times. Inside the loop, prompt the user to enter each element of the array using the input() function, convert it to an integer, and append it to the arr list.&lt;/p&gt;

&lt;p&gt;Step 4: Use a for loop to iterate over the range from 1 to n.&lt;/p&gt;

&lt;p&gt;Step 5: Inside the loop, store the current element in a variable named current.&lt;/p&gt;

&lt;p&gt;Step 6: Create a variable named j and set it equal to i - 1.&lt;/p&gt;

&lt;p&gt;Step 7: Use a while loop to compare the element at index j with the current element. If the element at index j is greater than the current element and j is greater than or equal to 0, shift the element at index j to the right by assigning the value of arr[j] to arr[j + 1]. Decrement j by 1.&lt;/p&gt;

&lt;p&gt;Step 8: After the while loop completes, insert the current element at the correct position by assigning its value to arr[j + 1].&lt;/p&gt;

&lt;p&gt;Step 9: After the outer for loop completes, use another for loop to iterate over the arr list and print each element, separated by a space, using the print() function with the end parameter set to " ".&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;input&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Enter size of array: &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="n"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nf"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;input&lt;/span&gt;&lt;span class="p"&gt;()))&lt;/span&gt;

&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Unsorted Array: &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;end&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nf"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;current&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="n"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;
    &lt;span class="nf"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;current&lt;/span&gt; &lt;span class="ow"&gt;and&lt;/span&gt; &lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;=&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
        &lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="o"&gt;-=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;
    &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;current&lt;/span&gt;

&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Sorted Array: &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;end&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;Enter the size of the array: 5
8
5
6
2
7
Unsorted Array: 8 5 6 2 7
Sorted Array: 2 5 6 7 8
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Time Complexity
&lt;/h2&gt;

&lt;p&gt;The time complexity of Insertion Sort is O(n^2) in the worst case and average case. In the best case scenario, when the array is already sorted, the time complexity is O(n).&lt;/p&gt;

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

&lt;p&gt;Insertion Sort is a simple yet efficient sorting algorithm that is particularly useful for small datasets or partially sorted arrays. Its simplicity, in-place sorting capability, and average-case time complexity of O(n) make it a valuable tool for programmers. However, it may not be the best choice for large datasets or arrays that are already mostly sorted.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>datastructures</category>
      <category>algorithms</category>
      <category>python</category>
    </item>
    <item>
      <title>Implement Bubble sort easily in your program</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Tue, 31 Oct 2023 13:30:00 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/implement-bubble-sort-easily-in-your-program-597</link>
      <guid>https://dev.to/parthvirgoz/implement-bubble-sort-easily-in-your-program-597</guid>
      <description>&lt;p&gt;Bubble sort is a simple and basic sorting algorithm that repeatedly steps through the list to be sorted, compares adjacent elements, and swaps them if they are in the wrong order. This process is repeated until the entire list is sorted. In this article, we will guide you through the implementation of the bubble sort algorithm in Python.&lt;/p&gt;

&lt;h2&gt;
  
  
  How Bubble Sort Works
&lt;/h2&gt;

&lt;p&gt;Step 1: Start by comparing the first two elements of the list. If the first element is greater than the second element, swap them. If not, leave them as they are.&lt;/p&gt;

&lt;p&gt;Step 2: Move to the next pair of elements and compare them. Again, if the first element is greater than the second element, swap them. Otherwise, leave them as they are.&lt;/p&gt;

&lt;p&gt;Step 3: Repeat this process for each adjacent pair of elements in the list, moving from left to right. Each time you compare and potentially swap elements, the largest element in the unsorted part of the list "bubbles" up to its correct position at the end.&lt;/p&gt;

&lt;p&gt;Step 4: After completing one pass through the list, the largest element will have moved to its correct position at the end. Now, you can ignore this element and repeat the same process for the remaining unsorted part of the list.&lt;/p&gt;

&lt;p&gt;Step 5: Continue these passes until the entire list is sorted. In each pass, the largest remaining element will bubble up to its correct position, gradually sorting the list from left to right.&lt;/p&gt;

&lt;p&gt;Step 6: The process stops when no more swaps are needed, indicating that the list is fully sorted.&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%2F9ho5wg3mipajo7h1u7r1.gif" 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%2F9ho5wg3mipajo7h1u7r1.gif" alt="Bubble sort" width="300" height="180"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Implementation Steps
&lt;/h2&gt;

&lt;p&gt;Let's dive into the implementation of the bubble sort algorithm:&lt;/p&gt;

&lt;p&gt;Step 1: Prompt the user to enter the size of the array by using the &lt;code&gt;input()&lt;/code&gt; function and convert it to an integer using the &lt;code&gt;int()&lt;/code&gt; function. Store the value in a variable named &lt;code&gt;n&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Step 2: Create an empty list called &lt;code&gt;arr&lt;/code&gt; to store the elements of the array.&lt;/p&gt;

&lt;p&gt;Step 3: Use a &lt;code&gt;for&lt;/code&gt; loop to iterate &lt;code&gt;n&lt;/code&gt; times. Inside the loop, prompt the user to enter each element of the array using the &lt;code&gt;input()&lt;/code&gt; function, convert it to an integer, and append it to the &lt;code&gt;arr&lt;/code&gt; list.&lt;/p&gt;

&lt;p&gt;Step 4: Initialize a counter variable, &lt;code&gt;counter&lt;/code&gt;, to 1.&lt;/p&gt;

&lt;p&gt;Step 5: Set up a &lt;code&gt;while&lt;/code&gt; loop that will continue until the &lt;code&gt;counter&lt;/code&gt; is less than &lt;code&gt;n&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Step 6: Inside the &lt;code&gt;while&lt;/code&gt; loop, use a nested &lt;code&gt;for&lt;/code&gt; loop to iterate from 0 to &lt;code&gt;n-counter&lt;/code&gt;. This loop will iterate over the unsorted part of the array.&lt;/p&gt;

&lt;p&gt;Step 7: Within the nested &lt;code&gt;for&lt;/code&gt; loop, compare each element with its adjacent element. If the current element is greater than the next element, swap them. Store the value of the current element in a temporary variable, &lt;code&gt;temp&lt;/code&gt;, before swapping.&lt;/p&gt;

&lt;p&gt;Step 8: Increment the &lt;code&gt;counter&lt;/code&gt; by 1 after the nested &lt;code&gt;for&lt;/code&gt; loop completes. This signifies that the largest element has been moved to its correct position at the end of the array.&lt;/p&gt;

&lt;p&gt;Step 9: After the &lt;code&gt;while&lt;/code&gt; loop completes, use a &lt;code&gt;for&lt;/code&gt; loop to iterate over the sorted &lt;code&gt;arr&lt;/code&gt; list and print each element, separated by a space, using the &lt;code&gt;print()&lt;/code&gt; function with the &lt;code&gt;end&lt;/code&gt; parameter set to &lt;code&gt;" "&lt;/code&gt;.&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%2Fqk55c583ld6c4qdvihqc.gif" 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%2Fqk55c583ld6c4qdvihqc.gif" alt="Bubble Sort lock system" width="599" height="121"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;input&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Enter size of array: &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="n"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nf"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;input&lt;/span&gt;&lt;span class="p"&gt;()))&lt;/span&gt;

&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Unsorted Array: &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;end&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;counter&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;
&lt;span class="nf"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;counter&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nf"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="nf"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]):&lt;/span&gt;
            &lt;span class="n"&gt;temp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
            &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
            &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;temp&lt;/span&gt;
    &lt;span class="n"&gt;counter&lt;/span&gt;&lt;span class="o"&gt;+=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;

&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Sorted Array: &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;end&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;Enter the size of the array: 6
10
5
8
3
6
2
Unsorted Array: 10 5 8 3 6 2
Sorted Array: 2 3 5 6 8 10
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Time Complexity
&lt;/h2&gt;

&lt;p&gt;The time complexity of the bubble sort algorithm is O(n^2) in the worst and average case. This means that the algorithm's performance decreases significantly as the number of elements increases. However, bubble sort performs well for small-sized arrays or partially sorted arrays.&lt;/p&gt;

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

&lt;p&gt;Bubble sort is a simple and intuitive sorting algorithm that can be easily implemented in Python. While it may not be the most efficient sorting algorithm for large datasets, it serves as a good starting point for understanding sorting algorithms and their implementations. By following the step-by-step guide provided in this article, you can successfully implement bubble sort in Python and sort your lists efficiently.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>datastructures</category>
      <category>algorithms</category>
      <category>python</category>
    </item>
    <item>
      <title>Implement Selection sort easily in your program</title>
      <dc:creator>Parth Virgoz</dc:creator>
      <pubDate>Tue, 24 Oct 2023 13:30:00 +0000</pubDate>
      <link>https://dev.to/parthvirgoz/implement-selection-sort-easily-in-your-program-kln</link>
      <guid>https://dev.to/parthvirgoz/implement-selection-sort-easily-in-your-program-kln</guid>
      <description>&lt;p&gt;Selection sort is a simple comparison-based sorting algorithm. It works by dividing the input array into a sorted and an unsorted part. In each iteration, it selects the smallest (or largest) element from the unsorted part and moves it to the sorted part. This process is repeated until the entire array is sorted.&lt;/p&gt;

&lt;h2&gt;
  
  
  How Selection Sort Works
&lt;/h2&gt;

&lt;p&gt;Let's understand the steps involved in the selection sort algorithm:&lt;/p&gt;

&lt;p&gt;Step 1: Start with the first element in the array, which is considered the smallest element.&lt;/p&gt;

&lt;p&gt;Step 2: Traverse through the remaining elements of the array to find the minimum element.&lt;/p&gt;

&lt;p&gt;Step 3: If a smaller element is found, update the minimum element.&lt;/p&gt;

&lt;p&gt;Step 4: After traversing the entire unsorted part of the array, swap the minimum element with the first element of the unsorted part. This places the minimum element in its correct position in the sorted part of the array.&lt;/p&gt;

&lt;p&gt;Step 5: Repeat steps 2 to 4 for the remaining unsorted part of the array until the entire array is sorted.&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%2Fasp8fxjzoc3hpybtjnnz.gif" 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%2Fasp8fxjzoc3hpybtjnnz.gif" alt="Selection sort" width="399" height="285"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Implementation Steps
&lt;/h2&gt;

&lt;p&gt;Let's dive into the implementation of the selection sort algorithm:&lt;/p&gt;

&lt;p&gt;Step 1: Prompt the user to enter the size of the array by using the input() function and convert it to an integer using int() function. Store the value in a variable n.&lt;/p&gt;

&lt;p&gt;Step 2: Create an empty list called arr to store the elements of the array.&lt;/p&gt;

&lt;p&gt;Step 3: Create a loop that iterates n times using the range() function. Inside the loop, prompt the user to enter each element of the array one by one using the input() function, convert it to an integer using int() function, and append it to the arr list.&lt;/p&gt;

&lt;p&gt;Step 4: Create a nested loop that iterates through the array elements. The outer loop iterates from index 0 to n-1, and the inner loop iterates from the next element after the current index to n.&lt;/p&gt;

&lt;p&gt;Step 5: Inside the nested loop, compare the element at index i with the element at index j. If the element at index i is greater than the element at index j, perform the following steps to swap the elements without using a temporary variable:&lt;/p&gt;

&lt;p&gt;Add the element at index j to the element at index i.&lt;/p&gt;

&lt;p&gt;Assign the difference of the new element at index j and the original element at index i to the element at index i.&lt;/p&gt;

&lt;p&gt;Assign the difference of the new element at index i and the original element at index j to the element at index j.&lt;/p&gt;

&lt;p&gt;Step 6: After the nested loop completes, the array will be sorted in ascending order.&lt;/p&gt;

&lt;p&gt;Step 7: Create a loop to iterate through each element in the sorted array. Print each element using the print() function and the end parameter to specify a space character as the separator.&lt;/p&gt;

&lt;p&gt;Step 8: Run the program and enter the size of the array and its elements when prompted. The program will sort the elements using the selection sort algorithm and display the sorted array.&lt;/p&gt;

&lt;p&gt;By following these implementation steps, you can effectively sort an array in ascending order using the selection sort algorithm in Python.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;input&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Enter size of array: &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="n"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nf"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;input&lt;/span&gt;&lt;span class="p"&gt;()))&lt;/span&gt;

&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Unsorted Array: &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;end&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nf"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;j&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nf"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;n&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="nf"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]):&lt;/span&gt;
            &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
            &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
            &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;j&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;-=&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;Sorted Array: &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;i&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;end&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;Enter size of array: 5
64
25
12
22
11
Unsorted Array: 64 25 12 22 11
Sorted Array: 11 12 22 25 64
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Time Complexity
&lt;/h2&gt;

&lt;p&gt;The selection sort algorithm has a time complexity of O(n^2), where n is the number of elements in the array. This makes it inefficient for large arrays. However, it performs well for small arrays or when the auxiliary space is limited.&lt;/p&gt;

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

&lt;p&gt;Selection sort is a simple and intuitive sorting algorithm that can be implemented easily in Python. Although it has a time complexity of O(n²), it can be a good choice for small arrays or situations where auxiliary space is limited. Understanding the selection sort algorithm is essential for any programmer's toolkit when working with sorting algorithms.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>datastructures</category>
      <category>algorithms</category>
      <category>python</category>
    </item>
  </channel>
</rss>
