<?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: Ibrahim Raimi </title>
    <description>The latest articles on DEV Community by Ibrahim Raimi  (@ibrahimraimi).</description>
    <link>https://dev.to/ibrahimraimi</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F441205%2F3ff35fa2-96fe-4c91-bd73-29092dc887f0.png</url>
      <title>DEV Community: Ibrahim Raimi </title>
      <link>https://dev.to/ibrahimraimi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ibrahimraimi"/>
    <language>en</language>
    <item>
      <title>The Ultimate Guide to Agile Software Development</title>
      <dc:creator>Ibrahim Raimi </dc:creator>
      <pubDate>Sun, 07 May 2023 19:20:03 +0000</pubDate>
      <link>https://dev.to/ibrahimraimi/the-ultimate-guide-to-agile-software-development-3cfi</link>
      <guid>https://dev.to/ibrahimraimi/the-ultimate-guide-to-agile-software-development-3cfi</guid>
      <description>&lt;h2&gt;
  
  
  Overview
&lt;/h2&gt;

&lt;p&gt;Agile software development methodology has gained immense popularity over the years due to its ability to quickly and efficiently produce software. It is a lightweight and flexible approach to software development that focuses on delivering incremental and interactive results through collaboration, adaptive planning, short delivery times and customer feedback.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Agile Software Development
&lt;/h2&gt;

&lt;p&gt;Agile software development is a project management approach that emphasizes flexibility, collaboration, and iterative development to deliver software products that meet customer needs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FPYcsNFz%2Fagile-methodology-chicago.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ibb.co%2FPYcsNFz%2Fagile-methodology-chicago.png" alt="agile methodology"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Agile software development eliminates the risk of investing months or years in a development process that may ultimately fail due to minor errors made in the early stages. It depends on placing trust in employees and teams to work closely with customers, comprehend the objectives, and offer solutions quickly and incrementally. Here's a quick summary of how agile software development operates:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Planning and Requirements Gathering&lt;/strong&gt;: The team works with the customer to understand the project requirements and create a prioritized backlog of user stories.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Sprint Planning&lt;/strong&gt;: The team selects a set of user stories from the backlog for the upcoming sprint and creates a sprint plan. The sprint plan outlines the specific tasks that need to be completed during the sprint.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Development&lt;/strong&gt;: The team works on the selected user stories during the sprint, using an iterative development process. This means that the team releases working software at the end of each sprint.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Daily Stand-up Meetings&lt;/strong&gt;: The team holds brief daily meetings to discuss progress and any issues that need to be addressed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Sprint Review&lt;/strong&gt;: At the end of each sprint, the team presents the working software to the customer for feedback.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Sprint Retrospective&lt;/strong&gt;: The team reflects on the completed sprint and identifies areas for improvement. The team also use this information to adjust their approach for the next sprint.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Repeat&lt;/strong&gt;: The team continues to work through the backlog of user stories, selecting and completing them in sprints until the product is complete.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  The 3C's of Agile Software Development
&lt;/h2&gt;

&lt;p&gt;Agile software development is based on the principles of collaboration, customer feedback, and the “three C’s” – card, conversation, and confirmation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Card
&lt;/h3&gt;

&lt;p&gt;A card in user stories in Agile is a way of breaking down user stories into smaller, more manageable tasks that can be easily monitored and identified. Each card may include additional information such as priority level or estimated completion date for further support of project management. By breaking down the stories into individual cards, developers can focus on one specific aspect at a time, making tracking progress easier and identifying any potential changes or issues before they become problems during development.&lt;/p&gt;

&lt;h3&gt;
  
  
  Conversation
&lt;/h3&gt;

&lt;p&gt;The second C of Agile is a conversation, which emphasizes frequent communication between team members to identify any possible changes or issues before they become problems during development. This involves regularly discussing progress updates with stakeholders and providing feedback for any feature requests or bug reports to ensure the final product meets all quality assurance standards required by the customer.&lt;/p&gt;

&lt;h3&gt;
  
  
  Confirmation
&lt;/h3&gt;

&lt;p&gt;Finally, the third C of Agile is confirmation, which allows customers to review and test features before making them available in production environments. This helps to ensure applications are error-free while also giving developers valuable insights into customer preferences so they can make necessary improvements before release.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example of Agile Software Development
&lt;/h2&gt;

&lt;p&gt;The most popular and common example of agile software development is Scrum.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Scrum is a software product development strategy that organizes software developers as a team to reach a common goal — creating a ready-for-market product.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  How Scrum works
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;A product owner makes a prioritized wish list known as a product backlog.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The scrum team takes one small piece of the top of the wish list called a sprint backlog and plans to implement it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The team completes their sprint backlog task in a sprint (a 2-4 week period). They assess progress in a meeting called a daily scrum.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The ScrumMaster keeps the team focused on the goal.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;At the sprint’s end, the work is ready to ship or show. The team closes the sprint with a review, then starts a new sprint.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  In layman's terms
&lt;/h4&gt;

&lt;blockquote&gt;
&lt;p&gt;Grace meets with a customer to discuss her company’s needs. Those needs are the product backlog. Grace chooses the most important tasks to work on in the next two weeks. Her team meets in a daily scrum to target work for the day ahead and address roadblocks. At the end of the sprint, Grace delivers the work, reviews the backlog, and sets the goal for the next sprint. The cycle repeats until the software is complete.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Benefits of Agile Software Development
&lt;/h2&gt;

&lt;p&gt;The benefits of Agile are tied directly to its faster, lighter, more engaged mindset. The process delivers what the customer wants, when they want it. There’s much less wasted time spent developing in the wrong direction, and the entire system is quicker to respond to changes.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;It's Faster&lt;/strong&gt;: Speed is one of the biggest benefits of Agile Methodology. A faster software development life cycle means less time between paying and getting paid. That, in turn, means a more profitable business.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Increased customer satisfaction&lt;/strong&gt;: With Agile, customers don’t wait for months or years, only to get exactly what they didn’t want. Instead, they get iterations of something very close to what they want, very fast. The system adjusts quickly to refine the successful customer solution, adapting as it goes to changes in the overall environment.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Values employees&lt;/strong&gt;: Employees whose ideas are valued are vastly more productive than those who are ordered to follow a set of rules. The Agile Methodology respects employees by giving them the goal, then trusting them to reach it. Since they’re the ones with their hands on the controls and the ones who see the obstacles that crop up every day, employees are in the best position to respond to challenges and meet the goals at hand.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Eliminates rework&lt;/strong&gt;: By involving the customer at more than just the phases of requirements and delivery, the project remains on-task and in-tune with customer needs at every step. This means less backtracking and less “out on a limb” time between the time we do the work and the time the customer suggests revisions.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Best Practices for Agile Software Development
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Focus on the customer&lt;/strong&gt;: Agile development puts the customer at the center of the development process, so it's important to understand their needs, preferences, and expectations. Regular communication with the customer throughout the development process helps to ensure that the software product meets their&lt;br&gt;
requirements.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Prioritize user stories&lt;/strong&gt;: User stories are short, simple descriptions of a feature or functionality from the user's perspective. Prioritizing user stories helps the team to focus on the most important features first and to deliver working software more quickly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Use sprints to manage development&lt;/strong&gt;: Sprints are time-boxed periods of development where the team focuses on a specific set of user stories. Using sprints helps the team to manage development in a predictable and controlled way and to deliver working software at regular intervals.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Foster collaboration&lt;/strong&gt;: Agile development emphasizes teamwork and collaboration. Encouraging collaboration between team members, including developers, testers, and business analysts, helps to ensure that everyone is working towards a common goal.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Embrace change&lt;/strong&gt;: Agile development recognizes that change is inevitable and that requirements may evolve throughout the development process. Embracing change and being flexible allows the team to adapt to new requirements and to deliver software that meets the customer's changing needs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Continuously improve&lt;/strong&gt;: Agile development is a continuous improvement process, so it's important to regularly reflect on the development process and identify areas for improvement. This helps the team to become more efficient and effective in delivering working software.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Agile Methodology Tools
&lt;/h2&gt;

&lt;p&gt;Here are three tools that can aid you and your team in enhancing your Agile software development procedure.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://activecollab.com/" rel="noopener noreferrer"&gt;ActiveCollab&lt;/a&gt;: An affordable tool for small businesses, ActiveCollab is easy to use. This software development aid requires little training and provides excellent support.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.atlassian.com/software/jira?a=capterra" rel="noopener noreferrer"&gt;Atlassian Jira&lt;/a&gt;: This powerful project management tool facilitates development by incorporating Scrum, Kanban, and customizable workflows.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.pivotaltracker.com/" rel="noopener noreferrer"&gt;Pivotal Tracker&lt;/a&gt;: This methodology tool is geared specifically for mobile projects. A little jargon-heavy, it’s user-friendly after a brief orientation period.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Congratulations on reaching this point! Let's review the main points of Agile Software Development: continuously plan and collaborate; involve users in the process; develop in iterations; continuously test and integrate; hold retrospective meetings; and aim for a Minimal Viable Product. To overcome challenges, prioritize communication, stakeholder involvement, and a willingness to embrace change. By adopting the Agile methodology, you can achieve faster time-to-market, increased flexibility, transparency, and improved quality.&lt;/p&gt;

&lt;p&gt;I look forward to connecting with you in the next blog post. Until then, keep developing and solving problems.&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>performance</category>
      <category>microservices</category>
    </item>
    <item>
      <title>10 GitHub Learning Repositories for Beginner Developers</title>
      <dc:creator>Ibrahim Raimi </dc:creator>
      <pubDate>Tue, 04 Apr 2023 14:02:02 +0000</pubDate>
      <link>https://dev.to/ibrahimraimi/10-github-learning-repositories-for-beginner-developers-432</link>
      <guid>https://dev.to/ibrahimraimi/10-github-learning-repositories-for-beginner-developers-432</guid>
      <description>&lt;p&gt;It can be challenging for a beginner developer to know where to begin when learning to code. Fortunately, GitHub has a variety of learning repositories to aid in your initial learning.&lt;/p&gt;

&lt;p&gt;We'll introduce 10 GitHub learning repositories for beginner developers in this article.&lt;/p&gt;

&lt;p&gt;You will find knowledge about the general web, learning roadmaps, computer science principles, interview preparation guides, additional books and websites to use and so much more.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. &lt;a href="https://github.com/vasanthk/how-web-works"&gt;how-web-works&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;What happens behind the scenes when we type &lt;a href="https://www.google.com"&gt;www.google.com&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⭐ GitHub stars 13k&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  2. &lt;a href="https://github.com/kamranahmedse/developer-roadmap"&gt;developer-roadmaps&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Community driven roadmaps, articles and resources for developers&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⭐ GitHub stars 236K&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  3. &lt;a href="https://github.com/EOEboh/Free-Software-Books"&gt;Free-Software-Books&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;List of Free Learning Books and Resources for Developers&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⭐ GitHub stars 92&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  4. &lt;a href="https://github.com/ossu/computer-science"&gt;ossu-computer-science&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Path to a free self-taught education in Computer Science!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⭐ GitHub stars 137k&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  5. &lt;a href="https://github.com/jwasham/coding-interview-university"&gt;coding-interview-university&lt;/a&gt;
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;⭐ GitHub stars 253k&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  6. &lt;a href="https://github.com/freeCodeCamp/freeCodeCamp"&gt;freecodecamp&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;A friendly community where everyone can learn to code for free.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⭐ GitHub stars 364k&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  7. &lt;a href="https://github.com/practical-tutorials/project-based-learning"&gt;project-based-learning&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;A list of programming tutorials in which aspiring software developers learn how to build an application from scratch.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⭐ GitHub stars 96k&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  8. &lt;a href="https://github.com/trekhleb/javascript-algorithms"&gt;javascript-algorithms&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;This repository contains JavaScript based examples of many popular algorithms and data structures.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⭐ GitHub stars 166k&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  9. &lt;a href="https://github.com/donnemartin/system-design-primer"&gt;system-design-primer&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Learn how to design large-scale systems. Prep for the system design interview.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⭐ GitHub stars 216k&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  10. &lt;a href="https://github.com/yangshun/front-end-interview-handbook"&gt;front-end-interview-handbook&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Learn how to design large-scale systems. Prep for the system design interview.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⭐ GitHub stars 37k&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In conclusion, GitHub is a great platform for inexperienced developers who want to brush up on their coding skills and acquire new ones. The ten repositories we've examined in this piece are just a portion of the extensive library of materials on GitHub. Everyone can find something on GitHub to learn, whether they want to study web development, computer science, or a specific programming language. Therefore, get investigating and have fun learning!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>JavaScript Package Managers: NPM, YARN And PNPM</title>
      <dc:creator>Ibrahim Raimi </dc:creator>
      <pubDate>Tue, 28 Mar 2023 08:08:59 +0000</pubDate>
      <link>https://dev.to/ibrahimraimi/javascript-package-managers-npm-yarn-and-pnpm-5e9f</link>
      <guid>https://dev.to/ibrahimraimi/javascript-package-managers-npm-yarn-and-pnpm-5e9f</guid>
      <description>&lt;p&gt;JavaScript has become one of the most popular programming languages in the world, powering everything from web applications to mobile apps and even desktop applications. As a result, the JavaScript ecosystem has grown rapidly, and developers now have access to a wide range of tools and libraries that can help them build more robust and efficient applications. However, managing these tools and libraries can be a challenge, which is why package managers have become an essential part of the JavaScript developer's toolkit.&lt;/p&gt;

&lt;p&gt;In this article, we will take a closer look at three of the most popular JavaScript package managers: NPM, Yarn, and PNPM.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a Package Manager
&lt;/h2&gt;

&lt;p&gt;A package manager is a tool that automates the process of installing, updating, and managing software packages. In the context of JavaScript, packages are libraries or modules that developers use in their applications. Package managers help developers to manage these packages by providing a centralized repository where packages can be stored, versioned, and downloaded as needed.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;They do this by storing packages in a central location on the hard disk or network drive.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  NPM
&lt;/h2&gt;

&lt;p&gt;NPM (short for Node Package Manager) is the default package manager for Nodejs applications. It was first released in 2010 and has since become the most popular package manager in the JavaScript ecosystem. NPM is known for its simplicity and ease of use, making it an ideal choice for beginners.&lt;/p&gt;

&lt;p&gt;One of the key features of NPM is its ability to handle dependencies efficiently. When you install a package using NPM, it automatically installs all the packages that the installed package depends on, recursively. This means that you don't have to worry about manually installing dependencies, which can save a lot of time and effort.&lt;/p&gt;

&lt;h2&gt;
  
  
  Yarn
&lt;/h2&gt;

&lt;p&gt;Yarn is a relatively new package manager, having been released by Meta aka Facebook in 2016. It was designed to address some of the performance and reliability issues that developers were experiencing with NPM. Yarn is built on top of the same package registry as NPM, so it can use the same packages.&lt;/p&gt;

&lt;p&gt;One of the key features of Yarn is its speed. Yarn uses a parallel installation process, which means that it can install packages much faster than NPM. Additionally, Yarn has a caching system that stores packages locally, so you don't have to download them again if you need to reinstall them.&lt;/p&gt;

&lt;p&gt;Yarn also has some additional features that NPM does not have, such as the ability to install packages in a deterministic way. This means that when you install a package, you will always get the same version of that package, regardless of when you install it or which machine you install it on.&lt;/p&gt;

&lt;h2&gt;
  
  
  PNPM
&lt;/h2&gt;

&lt;p&gt;PNPM (short for Performant NPM) is a relatively new package manager that was first released in 2016. It was designed to be a faster alternative to NPM and Yarn, with a focus on performance and disk space usage.&lt;/p&gt;

&lt;p&gt;Like Yarn, PNPM uses parallel installation, which allows it to install packages faster than NPM. However, PNPM takes this a step further by using a single shared folder to store all package dependencies for all projects on a machine. This reduces disk space usage and also speeds up subsequent installations by reusing previously installed packages.&lt;/p&gt;

&lt;p&gt;PNPM also  lets you install multiple versions of a package simultaneously, which is helpful for projects with conflicting dependencies.&lt;/p&gt;

&lt;h2&gt;
  
  
  NPM, Yarn and PNPM Comparison
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Package Installation Speed
&lt;/h3&gt;

&lt;p&gt;One of the most important factors to consider when choosing a package manager is its installation speed. Yarn and PNPM both use parallel installation to download packages simultaneously, which can be significantly faster than NPM's sequential installation.&lt;br&gt;
 PNPM is usually the fastest among the three, as it uses a single shared folder to store all package dependencies for all projects on a machine. Yarn comes in second, with NPM being the slowest of the three.&lt;/p&gt;

&lt;h3&gt;
  
  
  Package Version Management
&lt;/h3&gt;

&lt;p&gt;Package version management is another crucial factor to consider when choosing a package manager. All three package managers use a package.json file to keep track of project dependencies and versions, but Yarn and PNPM both generate a &lt;code&gt;yarn.lock&lt;/code&gt; and &lt;code&gt;pnpm-lock.yaml&lt;/code&gt; file respectively, which ensures that the same package versions are used across all machines. NPM does not generate a lock file by default, but it can be enabled by using the &lt;code&gt;--save-exact&lt;/code&gt; flag.&lt;/p&gt;

&lt;h3&gt;
  
  
  Dependency Management
&lt;/h3&gt;

&lt;p&gt;Managing dependencies can be quite challenging in large-scale projects with multiple dependencies. NPM, Yarn, and PNPM all have different ways of handling dependencies. NPM has a flat dependency structure, which means that it installs all dependencies in the node_modules folder at the root level. Yarn and PNPM both use a nested dependency structure, which installs dependencies in a tree-like structure within the node_modules folder.&lt;/p&gt;

&lt;p&gt;PNPM takes this further by using a single shared folder to store all package dependencies for all projects on a machine, which can significantly reduce disk space usage.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cache Management
&lt;/h3&gt;

&lt;p&gt;All three package managers use a caching system to speed up subsequent installations by reusing previously downloaded packages. Yarn and PNPM both have more advanced caching mechanisms than NPM. Yarn's caching mechanism can be managed using the yarn cache command, while PNPM's caching mechanism is built into its single shared folder structure.&lt;/p&gt;

&lt;h3&gt;
  
  
  Community Support
&lt;/h3&gt;

&lt;p&gt;NPM has the largest package repository of the three, with over 1.5 million packages available for download. It also has a large and active community, which can be a great resource for troubleshooting and support. Yarn has a smaller package repository, but it is growing steadily, and it is backed by Facebook aka Meta, which provides strong community support. PNPM has a smaller community and package repository than NPM and Yarn, but it is actively maintained and has gained a lot of popularity in recent years.&lt;/p&gt;

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

&lt;p&gt;To summarize, there are three popular JavaScript package managers: NPM, Yarn, and PNPM. Each has its own advantages and disadvantages. NPM is the most popular and has the biggest package repository, but can sometimes be slow. Yarn is faster than NPM and has parallel installation and deterministic dependency resolution. PNPM is the fastest and uses less disk space.&lt;/p&gt;

&lt;p&gt;The package manager you choose will depend on what you need. Each one has its own features and drawbacks, so it's important to consider them carefully before deciding.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>node</category>
    </item>
    <item>
      <title>Data fetching in React with SWR</title>
      <dc:creator>Ibrahim Raimi </dc:creator>
      <pubDate>Fri, 03 Feb 2023 14:34:35 +0000</pubDate>
      <link>https://dev.to/ibrahimraimi/data-fetching-in-react-with-swr-5gb0</link>
      <guid>https://dev.to/ibrahimraimi/data-fetching-in-react-with-swr-5gb0</guid>
      <description>&lt;h2&gt;
  
  
  What is SWR?
&lt;/h2&gt;

&lt;p&gt;Usually, when we make a fetch request, we use the native &lt;code&gt;fetch&lt;/code&gt; or a third-party library like &lt;code&gt;axios&lt;/code&gt;. The browser then makes an HTTP call and accepts a response. While the call is being made, the user waits, usually staring at a loading indicator.&lt;/p&gt;

&lt;p&gt;SWR enhances data fetching with caching, revalidation, and request deduplication. The name "SWR" is derived from &lt;code&gt;stale-while-revalidate&lt;/code&gt;, an HTTP cache invalidation strategy. It exposes React hooks that we can use for data fetching in our applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why use SWR instead of fetch or axios?
&lt;/h2&gt;

&lt;p&gt;When we use SWR for data fetching, it returns the data from the cache (stale), then sends the request (revalidate) and returns the up-to-date data. SWR will automatically cache the response the first time we fetch it.&lt;/p&gt;

&lt;p&gt;With just one single line of code, you can simplify the logic of data fetching in your project, and also have all these amazing features out-of-the-box:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Fast&lt;/strong&gt;, &lt;strong&gt;lightweight&lt;/strong&gt;, and &lt;strong&gt;reusable&lt;/strong&gt; data fetching&lt;/li&gt;
&lt;li&gt;Built-in &lt;strong&gt;cache&lt;/strong&gt; and request deduplication&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Real-time&lt;/strong&gt; experience&lt;/li&gt;
&lt;li&gt;Transport and protocol agnostic&lt;/li&gt;
&lt;li&gt;SSR / ISR / SSG support&lt;/li&gt;
&lt;li&gt;TypeScript ready&lt;/li&gt;
&lt;li&gt;React Native&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;SWR has you covered in all aspects of speed, correctness, and stability to help you build better experiences:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Fast page navigation&lt;/li&gt;
&lt;li&gt;Polling on interval&lt;/li&gt;
&lt;li&gt;Data dependency&lt;/li&gt;
&lt;li&gt;Revalidation on focus&lt;/li&gt;
&lt;li&gt;Revalidation on network recovery&lt;/li&gt;
&lt;li&gt;Local mutation (Optimistic UI)&lt;/li&gt;
&lt;li&gt;Smart error retry&lt;/li&gt;
&lt;li&gt;Pagination and scroll position recovery&lt;/li&gt;
&lt;li&gt;React Suspense&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Getting Started
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Installation
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;yarn add swr
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or&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;swr
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For normal RESTful API with JSON data, you first need to create a &lt;code&gt;fetcher&lt;/code&gt; function, which is just a wrapper of the native &lt;code&gt;fetch&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;fetcher&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can also use &lt;code&gt;axios&lt;/code&gt; in you fetcher 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;const&lt;/span&gt; &lt;span class="nx"&gt;fetcher&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Why do we still need fetch or axios when using SWR?
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;SWR does not replace native &lt;code&gt;fetch&lt;/code&gt; or &lt;code&gt;axios&lt;/code&gt;. We'll always need them because SWR only wraps around them. And one of the arguments we pass to the &lt;code&gt;useSWR&lt;/code&gt; hook is the fetcher function that uses &lt;code&gt;fetch&lt;/code&gt; or &lt;code&gt;axios&lt;/code&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now we can import the &lt;code&gt;useSWR&lt;/code&gt; hook and start using it inside any function components:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;useSWR&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;swr&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Profile&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="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;isLoading&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useSWR&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/api/users/123&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;fetcher&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Failed&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="nx"&gt;load&lt;/span&gt; &lt;span class="nx"&gt;profile&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isLoading&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Loading&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
  &lt;span class="c1"&gt;// render data&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&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;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&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;p&gt;NOTE: We have 3 possible states of a request: &lt;code&gt;loading&lt;/code&gt;, &lt;code&gt;ready&lt;/code&gt;, or &lt;code&gt;error&lt;/code&gt;.&lt;br&gt;
We use the value of &lt;code&gt;data&lt;/code&gt;, &lt;code&gt;error&lt;/code&gt;, and &lt;code&gt;isLoading&lt;/code&gt; to determine these states and return the corresponding UI.&lt;/p&gt;
&lt;h2&gt;
  
  
  Make it Reusable
&lt;/h2&gt;

&lt;p&gt;The real power of using SWR shows when you can reuse data fetching code. When building an application, we might need to reuse the data we fetch in multiple places. SWR makes it incredibly easy to create custom data-fetching hooks that we can use in any of our components.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;useUser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userId&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="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useSWR&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`/api/users/&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;fetcher&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="na"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;isLoading&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;isError&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we can use it in any component like this:&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;Profile&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;userId&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="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;isLoading&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;isError&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isLoading&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Loading&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isError&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;An&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="nx"&gt;occurred&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;img&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;avatar&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;span&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;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/span&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;span&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;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt; &lt;span class="nx"&gt;Email&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/span&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&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;p&gt;SWR is a better way to fetch data in our React applications. It abstracts away many features that we normally would have written ourselves if our application requires them. It also gives us good defaults so we don't have to spend a lot of time in configuration. Most important of all, it has a simple API and is easy to use.&lt;br&gt;
For more information on SWR, check out the official &lt;a href="https://swr.vercel.app/docs/getting-started" rel="noopener noreferrer"&gt;documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There is also an alternative to SWR called &lt;a href="https://react-query-v3.tanstack.com/" rel="noopener noreferrer"&gt;react-query&lt;/a&gt; which I haven't used, yet. I'll cover that in a future post. I hope you enjoyed this post. Have you used SWR before or have any questions about SWR? Let me know in the comments.&lt;/p&gt;

&lt;p&gt;Until next time, peace ✌️&lt;/p&gt;

</description>
      <category>ethereum</category>
      <category>crypto</category>
      <category>blockchain</category>
      <category>web3</category>
    </item>
    <item>
      <title>How to increase developer productivity</title>
      <dc:creator>Ibrahim Raimi </dc:creator>
      <pubDate>Thu, 12 Jan 2023 23:19:58 +0000</pubDate>
      <link>https://dev.to/ibrahimraimi/how-to-increase-developer-productivity-567o</link>
      <guid>https://dev.to/ibrahimraimi/how-to-increase-developer-productivity-567o</guid>
      <description>&lt;p&gt;Improving developer productivity can pay dividends - personally and professionally. Every developer encounters productivity challenges in their career, which can accumulate into bigger issues.&lt;/p&gt;

&lt;p&gt;Improving your productivity helps with more than just your day-to-day tasks. To enhance your productivity, consider how productive you are now. look for opportunities to improve and decide how you want to reach your productivity goals.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why does developer productivity matter
&lt;/h3&gt;

&lt;p&gt;Ultimately, programmer productivity matters because developers thrive and enjoy their jobs when they're productive. And productivity allows you to accomplish more and reach for bigger, more ambitious goals.&lt;/p&gt;

&lt;p&gt;Without strong productivity, projects may lag behind and team members may be more susceptible to early burnout and frustration. Productive, happy teams have a certain dynamism that propels organizations forward. These are often the teams that attract the best talent and inspire the next big ideas.&lt;/p&gt;

&lt;h3&gt;
  
  
  What causes lack of productivity among developers
&lt;/h3&gt;

&lt;p&gt;You may have your own list of areas you want to improve on, but productivity challenges generally fall into these areas for engineers:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Unclear or nonexistent benchmarks&lt;/strong&gt;: When the goal isn't clear, no one knows how to measure developer productivity for the project, or there aren't enough benchmarks, your team may lag or lack sufficient motivation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Communication woes&lt;/strong&gt;: Misunderstanding, unmet expectations, insufficient communication, and other communication challenges can strain a team's coding productivity.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Burnout&lt;/strong&gt;: A common challenge for engineers, burnout is a real possibility for devs who experience stress, don't practice self-care, or struggle with other productivity areas. No one wants to experience burnout. Prevention is key.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Bad habits&lt;/strong&gt;: Sometimes,  we all practice habits that aren't helping our productivity. If you're a manager, you may recognize bad habits in your team members, but tread carefully to encourage successful change.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Lack of cooperation among team members&lt;/strong&gt;: If one team member cooperates with another, productivity may increase. On the other hand, if one doesn't cooperate with others, productivity decreases.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Lack of awareness&lt;/strong&gt;: A developer on your team may not know there's a better, more productive way to work.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Lack of employee training&lt;/strong&gt;: Training helps an employee to increase his productivity. Lack of training is one of the causes of poor productivity.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Lack of favorable environmental conditions&lt;/strong&gt;: If the environmental condition of the organization is not good, then the productivity level may be less.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Tips to increase developer productivity
&lt;/h3&gt;

&lt;p&gt;Whether you are a developer yourself or you primarily manage a team of developers, implementing these practices at your organization will boost overall productivity. If you manage others, remember to model good productivity in your own work. Aside from setting a positive example, growing your own productivity is a win-win.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Schedule your sleep&lt;/strong&gt;: Plan for at least seven to nine hours of sleep every night. If necessary, set a timer and commit yourself to go to bed and waking up at consistent times. Try to stick to the schedule even on your days off.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Be a healthy remote worker&lt;/strong&gt;: If you work remotely, be extra careful to create enough work-life separation and balance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Follow a routine&lt;/strong&gt;: Remote workers may struggle more with following a daily routine, but everyone benefits from building a consistent lifestyle. Routines help people feel more grounded and connected.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Stay active&lt;/strong&gt;: Exercise is important, even if it’s just walking around the room once in a while.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Eat a balanced diet&lt;/strong&gt;: Healthy eating helps you feel your best so you can be more productive at work.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Seek mentors&lt;/strong&gt;: A coding mentor can help you break past challenges and see problems from a new perspective.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Mentor others&lt;/strong&gt;: Serving as a mentor to someone else may fuel your own coding productivity and your mentee’s productivity as well.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Find your zone&lt;/strong&gt;: Experiment with your work environment. Find when you’re the most productive and plan your big projects around that schedule.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Use music&lt;/strong&gt;: Your favorite tunes might help you focus or they might be a distraction. Experiment with different sounds or keep your environment quiet and see how your productivity is impacted.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Try positive procrastination&lt;/strong&gt;: Working through a hard task is sometimes easier if you rest your brain while taking a break, enjoying lunch, or changing projects temporarily.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Thanks for reading! Please leave any comments or feedback below - this will really helps me improve! 👇‍&lt;/p&gt;

</description>
      <category>php</category>
      <category>laravel</category>
      <category>softwareengineering</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
