<?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: Uzeyr OZ</title>
    <description>The latest articles on DEV Community by Uzeyr OZ (@muzeyr).</description>
    <link>https://dev.to/muzeyr</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%2F488680%2Fdf2049f8-7579-4cf9-902d-a01df51f5f16.jpeg</url>
      <title>DEV Community: Uzeyr OZ</title>
      <link>https://dev.to/muzeyr</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/muzeyr"/>
    <language>en</language>
    <item>
      <title>Gin Framework (Go)</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Wed, 25 Oct 2023 17:12:01 +0000</pubDate>
      <link>https://dev.to/muzeyr/gin-framework-go-p8o</link>
      <guid>https://dev.to/muzeyr/gin-framework-go-p8o</guid>
      <description>&lt;p&gt;&lt;strong&gt;Introduction to Gin Framework&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When it comes to developing web applications in the Go programming language, the Gin web framework can be a powerful ally. In this article, we will explore what Gin Framework is, how to install it, and provide a step-by-step breakdown of a simple Go web application using Gin.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Installation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Before we dive into Gin, you'll need to install it. Thankfully, installing Gin is a straightforward process. You can use the &lt;code&gt;go get&lt;/code&gt; command to fetch and install the Gin package. Open your terminal or command prompt and run the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;go get &lt;span class="nt"&gt;-u&lt;/span&gt; github.com/gin-gonic/gin
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command will download the Gin package and its dependencies to your Go workspace.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Getting Started with Gin&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;After successfully installing Gin, you can start building web applications with it. Here's how you can get started:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Import Gin Package&lt;/strong&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;First, you need to import the Gin package in your Go source code. Add the following import statement at the top of your Go file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;   &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="s"&gt;"github.com/gin-gonic/gin"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Creating a Simple Gin Application&lt;/strong&gt;:&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let's create a basic Go web application using Gin. Below is the code for a simple "Hello World" web application. We will break down each part of the code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;   &lt;span class="k"&gt;package&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;

   &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
       &lt;span class="s"&gt;"net/http"&lt;/span&gt;
       &lt;span class="s"&gt;"github.com/gin-gonic/gin"&lt;/span&gt;
   &lt;span class="p"&gt;)&lt;/span&gt;

   &lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="n"&gt;r&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;gin&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Default&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
       &lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;GET&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"/hello"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;func&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;c&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;gin&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
           &lt;span class="c"&gt;// Send a JSON response&lt;/span&gt;
           &lt;span class="n"&gt;c&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;http&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;StatusOK&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;gin&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;H&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
               &lt;span class="s"&gt;"message"&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="s"&gt;"Hello Go members!"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
           &lt;span class="p"&gt;})&lt;/span&gt;
       &lt;span class="p"&gt;})&lt;/span&gt;

       &lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Run&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;&lt;strong&gt;Explanation of the Code&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;We import the necessary packages, including &lt;code&gt;net/http&lt;/code&gt; for HTTP-related functionalities and Gin.&lt;/li&gt;
&lt;li&gt;In the &lt;code&gt;main&lt;/code&gt; function, we create a Gin router using &lt;code&gt;gin.Default()&lt;/code&gt;, which sets up the default middleware and configurations.&lt;/li&gt;
&lt;li&gt;We define a route using &lt;code&gt;r.GET("/hello", ...)&lt;/code&gt;, which specifies that the endpoint "/hello" will be accessible via an HTTP GET request.&lt;/li&gt;
&lt;li&gt;Inside the route handler, we respond with a JSON message, indicating "Hello GoLinuxCloud members!" when someone accesses "/hello."&lt;/li&gt;
&lt;li&gt;Finally, we start the web server by calling &lt;code&gt;r.Run()&lt;/code&gt;, which listens and serves on port 8080.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And that's it! You've just created a simple Go web application using the Gin Framework. You can now access the "Hello World" message by navigating to &lt;code&gt;http://localhost:8080/hello&lt;/code&gt; in your web browser. Gin Framework makes it easy to develop efficient and performant web applications in Go.&lt;/p&gt;

</description>
      <category>go</category>
    </item>
    <item>
      <title>PNPM: The Performant Package Manager for JavaScript</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Sat, 18 Mar 2023 07:18:00 +0000</pubDate>
      <link>https://dev.to/muzeyr/pnpm-the-performant-package-manager-for-javascript-55em</link>
      <guid>https://dev.to/muzeyr/pnpm-the-performant-package-manager-for-javascript-55em</guid>
      <description>&lt;p&gt;PNPM is a package manager used for managing JavaScript packages. Unlike other popular package managers such as NPM and Yarn, it uses symbolic links to reduce disk space usage.&lt;/p&gt;

&lt;p&gt;📦 **Disk space usage: **npm downloads and stores a separate copy of each package, which can quickly take up a lot of disk space. PNPM, on the other hand, stores packages in a single location and uses symbolic links to share them across projects, reducing disk space usage.&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;Symbolic links:&lt;/strong&gt; PNPM uses symbolic links to share packages between projects, whereas npm downloads a separate copy of each package for each project. This makes PNPM more efficient in terms of disk space and installation times.&lt;/p&gt;

&lt;p&gt;⏱️ &lt;strong&gt;Installation times:&lt;/strong&gt; PNPM's use of symbolic links means that installation times are generally faster than with npm.&lt;/p&gt;

&lt;p&gt;💻 &lt;strong&gt;Community support:&lt;/strong&gt; npm has a larger community and is more widely used, meaning that there is more documentation and support available. PNPM is gaining popularity quickly but is still newer than npm.&lt;/p&gt;

&lt;p&gt;As for where the name &lt;strong&gt;PNPM&lt;/strong&gt; comes from, it stands for "&lt;strong&gt;Performant NPM.&lt;/strong&gt;" The goal of &lt;strong&gt;PNPM&lt;/strong&gt; is to improve on some of the issues faced by other package managers like npm and Yarn, including disk space usage and installation times.&lt;/p&gt;

&lt;p&gt;Now, here's a re-written explanation of how to migrate a project to PNPM with emojis on each line:&lt;/p&gt;

&lt;p&gt;🚀 &lt;strong&gt;To migrate your project to PNPM:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;📥 Install PNPM using npm or yarn by running the following command in your terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install -g pnpm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔑 #npm #pnpm #yarn&lt;/p&gt;

&lt;p&gt;📂 Navigate to your project directory and run the following command to install all dependencies listed in the package.json file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pnpm install

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

&lt;/div&gt;



&lt;p&gt;📦 #dependencies #packagejson&lt;/p&gt;

&lt;p&gt;🔍 Delete the package-lock.json or yarn.lock files in your project directory. These files are not needed as PNPM manages dependencies using symbolic links.&lt;br&gt;
🔗 #symboliclinks #packagelockjson #yarnlock&lt;/p&gt;

&lt;p&gt;🚀 Finally, to run your project, use the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pnpm start

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

&lt;/div&gt;



&lt;p&gt;🚀 #start #run #pnpm&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Understanding Single Thread and Event Loop in Node.js: A Simple Analogy</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Fri, 17 Mar 2023 06:06:30 +0000</pubDate>
      <link>https://dev.to/muzeyr/understanding-single-thread-and-event-loop-in-nodejs-a-simple-analogy-2643</link>
      <guid>https://dev.to/muzeyr/understanding-single-thread-and-event-loop-in-nodejs-a-simple-analogy-2643</guid>
      <description>&lt;p&gt;Interviewers often ask questions about single thread and event loop in Node.js, and I have a great analogy that I use to explain it. It's important to always keep things simple and use straightforward explanations.&lt;/p&gt;

&lt;p&gt;👉 Node.js uses a single thread to manage multiple requests, and it does so using an asynchronous structure that allows it to handle multiple tasks simultaneously without blocking the thread.&lt;/p&gt;

&lt;p&gt;👉 I like to use the example of a cafe shop with one barista who is handling multiple coffee orders from customers. The barista can take multiple orders at once and prepare them in parallel, without waiting for one order to be fully completed before starting on another. This is similar to how Node.js manages multiple requests using a single thread.&lt;/p&gt;

&lt;p&gt;👉 However, if one order is more complex and takes a longer time to prepare, the barista may get bogged down and other orders may have to wait. Similarly, if one request takes a long time to complete in Node.js, it can block the thread and make other requests wait.&lt;/p&gt;

&lt;p&gt;👉 To overcome this issue, Node.js uses a cluster mode to take advantage of multiple CPU cores. This means that it can handle requests in parallel, similar to hiring more baristas to prepare coffee orders simultaneously in the cafe shop.&lt;/p&gt;

&lt;p&gt;👉 When explaining single thread and event loop in Node.js, it's important to use clear and concise language that everyone can understand. This analogy is a great way to make these concepts more accessible to non-technical people and help them understand the benefits of asynchronous programming and cluster mode.&lt;/p&gt;

&lt;h1&gt;
  
  
  NodeJS #SingleThread #EventLoop #AsynchronousProgramming #ClusterMode #CPUCore #Performance #CafeShop #Barista #CoffeeOrders #ParallelProcessing #InterviewTips
&lt;/h1&gt;

</description>
    </item>
    <item>
      <title>Vite- React - Typescript</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Tue, 14 Mar 2023 06:05:50 +0000</pubDate>
      <link>https://dev.to/muzeyr/vite-react-typescript-pa9</link>
      <guid>https://dev.to/muzeyr/vite-react-typescript-pa9</guid>
      <description>&lt;p&gt;In one of my side projects where I was constantly calling components in React, the paths such as ../../../ were bothering me. So, I created a React project with Vite. I had previously tried it with the Craco library, but then I realized that Vite had a more straightforward integration that already supported it, and I wanted to share it with you.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;React&lt;/li&gt;
&lt;li&gt;TypeScript&lt;/li&gt;
&lt;li&gt;Vite&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Steps to set this up:&lt;/p&gt;

&lt;p&gt;Step 1:&lt;/p&gt;

&lt;p&gt;In "vite.config.ts":&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import * as path from 'path'

export default defineConfig({
plugins: [react()],
resolve: {
alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
},
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Step 2:&lt;/p&gt;

&lt;p&gt;In "tsconfig.json":&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
{
"compilerOptions": {
"types": ["node"],
"paths": {
"@/": ["./src/"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

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

&lt;/div&gt;



&lt;p&gt;Usage:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import Comp from '@/components/Loading'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
    </item>
    <item>
      <title>Node Express User Micro service</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Sun, 19 Feb 2023 09:31:46 +0000</pubDate>
      <link>https://dev.to/muzeyr/node-express-user-micro-service-57ci</link>
      <guid>https://dev.to/muzeyr/node-express-user-micro-service-57ci</guid>
      <description>&lt;p&gt;&lt;strong&gt;Step 1: Prepare the Project Structure&lt;/strong&gt;&lt;br&gt;
First, create a new directory for the project and navigate into it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir users-module
cd users-module

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

&lt;/div&gt;



&lt;p&gt;Inside the users-module directory, create a new file called package.json and add the following content:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "name": "users-module",
  "version": "1.0.0",
  "description": "A module for managing users",
  "main": "app.js",
  "dependencies": {
    "express": "^4.17.1"
  }
}

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

&lt;/div&gt;



&lt;p&gt;This file contains information about the project, its dependencies, and its entry point (app.js). We've included the express dependency, which we'll use to create the API for our users module.&lt;/p&gt;

&lt;p&gt;Next, run npm install to install the dependencies:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 2: Create the API&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In this step, we'll create the API for our users module using Express. Create a new file called app.js and add the following content:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const express = require('express')
const app = express()

app.get('/', (req, res) =&amp;gt; {
  res.send('Hello, world!')
})

app.listen(3000, () =&amp;gt; {
  console.log('Server listening on port 3000')
})

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

&lt;/div&gt;



&lt;p&gt;This code creates an Express app and defines a single route that responds with "Hello, world!" when the root URL is requested. We've also included a listener that starts the server and logs a message when it's running.&lt;/p&gt;

&lt;p&gt;To test the API, run node app.js and open &lt;a href="http://localhost:3000"&gt;http://localhost:3000&lt;/a&gt; in your browser. You should see the "Hello, world!" message.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 3: Containerize the App with Docker&lt;/strong&gt;&lt;br&gt;
In this step, we'll create a Dockerfile that will define how to build our Docker image. Create a new file called Dockerfile in the project root directory and add the following content:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;FROM node:16-alpine

WORKDIR /app

COPY package.json .
RUN npm install

COPY . .

EXPOSE 3000

CMD ["node", "app.js"]

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

&lt;/div&gt;



&lt;p&gt;This Dockerfile starts with the official Node.js 16 Alpine image as its base. It sets the working directory to /app, copies the package.json file and runs npm install to install the dependencies. It then copies the rest of the project files and exposes port 3000. Finally, it sets the command to run the app.js file with Node.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 4: Build and Run the Docker Image&lt;/strong&gt;&lt;br&gt;
In this step, we'll use the Dockerfile to build our Docker image and run a container from it.&lt;/p&gt;

&lt;p&gt;First, build the image with the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker build -t users-module .

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

&lt;/div&gt;



&lt;p&gt;This command tells Docker to build an image with the tag users-module using the Dockerfile in the current directory.&lt;/p&gt;

&lt;p&gt;Once the build is complete, you can run a container from the image using the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker run -p 3000:3000 users-module

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

&lt;/div&gt;



&lt;p&gt;This command tells Docker to run a container from the users-module image and map port 3000 in the container to port 3000 on the host.&lt;/p&gt;

&lt;p&gt;To test the container, open &lt;a href="http://localhost:3000"&gt;http://localhost:3000&lt;/a&gt; in your browser. You should see the "Hello, world!" message.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
In this article, we created a "users" module using Node.js and Express, and containerized it using Docker. This is a&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to create a docker-compose.yml file for PostgreSQL and RabbitMQ</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Sun, 19 Feb 2023 09:23:55 +0000</pubDate>
      <link>https://dev.to/muzeyr/step-by-step-guide-on-how-to-create-a-docker-composeyml-file-for-postgresql-and-rabbitmq-ll5</link>
      <guid>https://dev.to/muzeyr/step-by-step-guide-on-how-to-create-a-docker-composeyml-file-for-postgresql-and-rabbitmq-ll5</guid>
      <description>&lt;p&gt;Step 1: Install Docker and Docker Compose&lt;br&gt;
Make sure you have Docker and Docker Compose installed on your machine. If you don't, you can download and install them from the Docker website.&lt;/p&gt;

&lt;p&gt;Step 2: Create a new directory&lt;br&gt;
Create a new directory for your project and navigate to it in your terminal.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ mkdir myproject
$ cd myproject

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

&lt;/div&gt;



&lt;p&gt;Step 3: Create a new docker-compose.yml file&lt;br&gt;
Create a new file called docker-compose.yml in your project directory.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ touch docker-compose.yml

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

&lt;/div&gt;



&lt;p&gt;Step 4: Define services in the docker-compose.yml file&lt;br&gt;
Add the following code to the docker-compose.yml file to define the services for PostgreSQL and RabbitMQ.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;version: '3'

services:
  db:
    image: postgres
    restart: always
    environment:
      POSTGRES_USER: myuser
      POSTGRES_PASSWORD: mypassword
      POSTGRES_DB: mydatabase

  rabbitmq:
    image: rabbitmq
    restart: always
    ports:
      # AMQP protocol port
      - "5672:5672"
      # HTTP management UI
      - "15672:15672"
    environment:
      RABBITMQ_DEFAULT_USER: myuser
      RABBITMQ_DEFAULT_PASS: mypassword

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

&lt;/div&gt;



&lt;p&gt;In the above code, we define two services: db for PostgreSQL and rabbitmq for RabbitMQ. We use the official Docker images for both services, and we set some environment variables to configure them. You can change the values of these variables to suit your needs.&lt;/p&gt;

&lt;p&gt;Step 5: Run the services with Docker Compose&lt;br&gt;
Save the docker-compose.yml file and run the services with Docker Compose.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker-compose up -d

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

&lt;/div&gt;



&lt;p&gt;The -d flag runs the services in the background. You should see output similar to the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Creating network "myproject_default" with the default driver
Creating myproject_db_1 ... done
Creating myproject_rabbitmq_1 ... done

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

&lt;/div&gt;



&lt;p&gt;Step 6: Verify the services&lt;br&gt;
You can now verify that the services are running by checking the logs or connecting to them. For example, to connect to PostgreSQL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker exec -it myproject_db_1 psql -U myuser mydatabase

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

&lt;/div&gt;



&lt;p&gt;And to connect to RabbitMQ:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker exec -it myproject_rabbitmq_1 rabbitmqctl list_users

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

&lt;/div&gt;



&lt;p&gt;That's it! You now have a docker-compose.yml file for PostgreSQL and RabbitMQ. You can add more services to the file as needed, and run them all with a single command using Docker Compose.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>vue</category>
      <category>angular</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>TypeScript with Node.js and Express</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Sun, 19 Feb 2023 09:20:43 +0000</pubDate>
      <link>https://dev.to/muzeyr/typescript-with-nodejs-and-express-41b8</link>
      <guid>https://dev.to/muzeyr/typescript-with-nodejs-and-express-41b8</guid>
      <description>&lt;p&gt;TypeScript is a popular programming language that provides static typing and class-based object-oriented programming features. It is a superset of JavaScript and is compiled to plain JavaScript code. TypeScript provides many benefits, such as enhanced code readability, early error detection, and better maintainability of code. In this article, we will discuss how to set up TypeScript with Node.js and Express, which is a popular framework for building web applications.&lt;/p&gt;

&lt;p&gt;Step 1: Install Node.js and npm&lt;/p&gt;

&lt;p&gt;Before getting started with TypeScript, you need to have Node.js and npm (Node Package Manager) installed on your system. You can download and install them from the official Node.js website.&lt;/p&gt;

&lt;p&gt;Step 2: Create a new Node.js project&lt;/p&gt;

&lt;p&gt;Next, create a new Node.js project using the npm init command. This will create a package.json file, which is used to manage dependencies and scripts for your project.&lt;/p&gt;

&lt;p&gt;Step 3: Install TypeScript&lt;/p&gt;

&lt;p&gt;To install TypeScript, use the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install --save-dev typescript

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

&lt;/div&gt;



&lt;p&gt;This command will install TypeScript as a development dependency for your project.&lt;/p&gt;

&lt;p&gt;Step 4: Configure TypeScript&lt;/p&gt;

&lt;p&gt;Create a new file named tsconfig.json in the root directory of your project. This file is used to configure the TypeScript compiler.&lt;/p&gt;

&lt;p&gt;Here is an example tsconfig.json file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

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

&lt;/div&gt;



&lt;p&gt;This configuration specifies that the target ECMAScript version is ES6, the module system is CommonJS, the output directory is dist, and the TypeScript compiler should enforce strict type checking. The include option specifies the files and directories that should be compiled, and the exclude option specifies the files and directories that should be excluded from compilation.&lt;/p&gt;

&lt;p&gt;Step 5: Install Express and @types/express&lt;/p&gt;

&lt;p&gt;To use Express with TypeScript, you need to install both the express package and the @types/express package, which provides TypeScript definitions for Express.&lt;/p&gt;

&lt;p&gt;To install these packages, use the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install express @types/express

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

&lt;/div&gt;



&lt;p&gt;Step 6: Create an Express server in TypeScript&lt;/p&gt;

&lt;p&gt;Now, let's create an Express server using TypeScript. Create a new file named app.ts in the src directory of your project. Here is an example app.ts file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import express, { Request, Response } from 'express';

const app = express();

app.get('/', (req: Request, res: Response) =&amp;gt; {
  res.send('Hello, world!');
});

app.listen(3000, () =&amp;gt; {
  console.log('Server listening on port 3000');
});

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

&lt;/div&gt;



&lt;p&gt;This code imports the express package and the Request and Response types from the @types/express package. It creates a new Express application, defines a route for the root path, and starts the server on port 3000.&lt;/p&gt;

&lt;p&gt;Step 7: Compile TypeScript&lt;/p&gt;

&lt;p&gt;To compile the TypeScript code to JavaScript, use the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx tsc

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

&lt;/div&gt;



&lt;p&gt;This command will compile the TypeScript files in the src directory and output the JavaScript files to the dist directory, as specified in the tsconfig.json file.&lt;/p&gt;

&lt;p&gt;Step 8: Run the Express server&lt;/p&gt;

&lt;p&gt;To run the Express server, use the following command:&lt;br&gt;
&lt;/p&gt;

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

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

&lt;/div&gt;



&lt;p&gt;This command will start the Express server and listen for incoming requests on port 3000.&lt;/p&gt;

&lt;p&gt;In this article, we have discussed how to set up TypeScript with Node.js and Express. We started by installing Node.js and npm, and then creating a new Node.js project. &lt;/p&gt;

&lt;p&gt;We installed TypeScript as a development dependency, configured the TypeScript compiler using a tsconfig.json file, and installed Express and @types/express packages. &lt;/p&gt;

&lt;p&gt;We then created an Express server using TypeScript and compiled the TypeScript code to JavaScript using the tsc command. Finally, we ran the Express server and tested it using a web browser. &lt;/p&gt;

&lt;p&gt;By following these steps, you can easily set up TypeScript with Node.js and Express and start building web applications with improved code maintainability and error detection.&lt;/p&gt;

</description>
      <category>support</category>
      <category>discuss</category>
    </item>
    <item>
      <title>VS Code ShurtCode active tab</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Mon, 06 Feb 2023 12:46:00 +0000</pubDate>
      <link>https://dev.to/muzeyr/vs-code-shurtcode-active-tab-4b9l</link>
      <guid>https://dev.to/muzeyr/vs-code-shurtcode-active-tab-4b9l</guid>
      <description>&lt;p&gt;&lt;strong&gt;In macOS,&lt;/strong&gt; you can assign keyboard shortcuts to quickly open the related code file in VS Code. To do this, follow these steps:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Go to Code&lt;/strong&gt; &amp;gt; &lt;strong&gt;Preferences&lt;/strong&gt; &amp;gt; &lt;strong&gt;Keyboard Shortcuts.&lt;/strong&gt;&lt;br&gt;
On the page, click the "edit &lt;strong&gt;keybindings&lt;/strong&gt;.json" button on the top right.&lt;br&gt;
Append the configuration below and save.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[
    {
        "key": "cmd+0",
        "command": "workbench.action.openLastEditorInGroup"
    },
    {
        "key": "cmd+1",
        "command": "workbench.action.openEditorAtIndex1"
    },
    {
        "key": "cmd+2",
        "command": "workbench.action.openEditorAtIndex2"
    },
    {
        "key": "cmd+3",
        "command": "workbench.action.openEditorAtIndex3"
    },
    {
        "key": "cmd+4",
        "command": "workbench.action.openEditorAtIndex4"
    },
    {
        "key": "cmd+5",
        "command": "workbench.action.openEditorAtIndex5"
    },
    {
        "key": "cmd+6",
        "command": "workbench.action.openEditorAtIndex6"
    },
    {
        "key": "cmd+7",
        "command": "workbench.action.openEditorAtIndex7"
    },
    {
        "key": "cmd+8",
        "command": "workbench.action.openEditorAtIndex8"
    },
    {
        "key": "cmd+9",
        "command": "workbench.action.openEditorAtIndex9"
    },
    {
        "key": "ctrl+1",
        "command": "workbench.action.focusFirstEditorGroup"
    },
    {
        "key": "ctrl+2",
        "command": "workbench.action.focusSecondEditorGroup"
    },
    {
        "key": "ctrl+3",
        "command": "workbench.action.focusThirdEditorGroup"
    }
]

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

&lt;/div&gt;



&lt;p&gt;With these keyboard shortcuts, you can use CMD+[1-9] to switch between tabs and CTRL+[1-3] to focus editor groups in VS Code.&lt;/p&gt;

&lt;p&gt;🌎🙂😎 Let's Connect!&lt;br&gt;
My Twitter: &lt;a href="https://twitter.com/muzeyrozcan" rel="noopener noreferrer"&gt;@muzeyrozcan&lt;/a&gt;&lt;br&gt;
&lt;a href="https://muzeyr.substack.com/" rel="noopener noreferrer"&gt;My Substack &lt;/a&gt;(here I will publish more in-depth articles)&lt;/p&gt;

</description>
      <category>web3</category>
      <category>ethereum</category>
      <category>blockchain</category>
    </item>
    <item>
      <title>npm create vite@latest</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Mon, 06 Feb 2023 11:22:51 +0000</pubDate>
      <link>https://dev.to/muzeyr/npm-create-vitelatest-1j1m</link>
      <guid>https://dev.to/muzeyr/npm-create-vitelatest-1j1m</guid>
      <description>&lt;p&gt;Vite.js is a performance-focused web development framework for building applications with JavaScript and TypeScript. It prioritizes fast development cycles and high performance, as well as having a modular structure to minimize file size and enhance loading speed.&lt;/p&gt;

&lt;p&gt;It is easy to use, offering all the necessary tools for quickly setting up and developing projects. Vite also increases loading and execution speed by only loading modules when necessary.&lt;/p&gt;

&lt;p&gt;Overall, Vite is an ideal solution for fast and performance-focused web development, providing advantages such as ease of use, low file size, and fast loading speed.&lt;/p&gt;

&lt;p&gt;With NPM:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; npm create vite@latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With Yarn:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;yarn create vite

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

&lt;/div&gt;



&lt;p&gt;With PNPM:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm create vite
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;**&lt;br&gt;
Community Templates**&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"Create-vite"&lt;/strong&gt; is a tool that enables quick project creation from basic templates for popular frameworks. The tool helps to save time and effort in setting up a project from scratch.&lt;/p&gt;

&lt;p&gt;Awesome Vite is a community-maintained resource of templates, which includes popular tools and targets different frameworks. This makes it easier for developers to choose a suitable template for their project.&lt;/p&gt;

&lt;p&gt;Degit is another useful tool that can be used to scaffold a project using one of the templates from Awesome Vite. This enables developers to quickly start their project with a pre-configured setup, saving them time and effort in setting up their project from scratch.&lt;/p&gt;

&lt;p&gt;In conclusion, Create-vite, Awesome Vite and Degit are valuable tools for web developers looking to quickly start a new project with a basic template. These tools make it easier to set up projects, reducing the time and effort required, and helping developers to focus on writing code and building their applications.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx degit user/project my-project
cd my-project
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install
npm run dev

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

&lt;/div&gt;



&lt;p&gt;If the project uses main as the default branch, suffix the project repo with #main&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
npx degit user/project#main my-project
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>watercooler</category>
    </item>
    <item>
      <title>Test Driven Development with React</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Mon, 06 Feb 2023 11:19:42 +0000</pubDate>
      <link>https://dev.to/muzeyr/test-driven-development-with-react-3oa2</link>
      <guid>https://dev.to/muzeyr/test-driven-development-with-react-3oa2</guid>
      <description>&lt;p&gt;React is a popular JavaScript library for building user interfaces, and using a test-driven development (TDD) approach can help ensure that your code is working correctly and catch bugs early in the development process. This article will show you how to implement TDD in a React app with three buttons: Add, Remove, and Reset.&lt;/p&gt;

&lt;p&gt;First, let's create a simple React component to display a count and the three buttons.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleAdd = () =&amp;gt; {
    setCount(count + 1);
  };

  const handleRemove = () =&amp;gt; {
    setCount(count - 1);
  };

  const handleReset = () =&amp;gt; {
    setCount(0);
  };

  return (
    &amp;lt;div&amp;gt;
      &amp;lt;p&amp;gt;Count: {count}&amp;lt;/p&amp;gt;
      &amp;lt;button onClick={handleAdd}&amp;gt;Add&amp;lt;/button&amp;gt;
      &amp;lt;button onClick={handleRemove}&amp;gt;Remove&amp;lt;/button&amp;gt;
      &amp;lt;button onClick={handleReset}&amp;gt;Reset&amp;lt;/button&amp;gt;
    &amp;lt;/div&amp;gt;
  );
}

export default Counter;

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

&lt;/div&gt;



&lt;p&gt;Next, let's write test scripts to verify that the buttons and count are functioning as expected. We'll use Jest as the testing framework.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';

describe('Counter', () =&amp;gt; {
  it('displays the count', () =&amp;gt; {
    const { getByText } = render(&amp;lt;Counter /&amp;gt;);
    const countElement = getByText('Count: 0');
    expect(countElement).toBeInTheDocument();
  });

  it('increases the count when the Add button is clicked', () =&amp;gt; {
    const { getByText } = render(&amp;lt;Counter /&amp;gt;);
    const addButton = getByText('Add');
    fireEvent.click(addButton);
    const countElement = getByText('Count: 1');
    expect(countElement).toBeInTheDocument();
  });

  it('decreases the count when the Remove button is clicked', () =&amp;gt; {
    const { getByText } = render(&amp;lt;Counter /&amp;gt;);
    const removeButton = getByText('Remove');
    fireEvent.click(removeButton);
    const countElement = getByText('Count: -1');
    expect(countElement).toBeInTheDocument();
  });

  it('resets the count to 0 when the Reset button is clicked', () =&amp;gt; {
    const { getByText } = render(&amp;lt;Counter /&amp;gt;);
    const resetButton = getByText('Reset');
    fireEvent.click(resetButton);
    const countElement = getByText('Count: 0');
    expect(countElement).toBeInTheDocument();
  });

  it('does not go below 0 when the count is decremented', () =&amp;gt; {
    const { getByText } = render(&amp;lt;Counter /&amp;gt;);
    const removeButton = getByText('Remove');
    fireEvent.click(removeButton);
    let countElement = getByText('Count: -1');
    expect(countElement).toBeInTheDocument();
    fireEvent.click(removeButton);
countElement = getByText('Count: -2');
expect(countElement).toBeInTheDocument();
fireEvent.click(removeButton);
countElement = getByText('Count: -3');
expect(countElement).toBeInTheDocument();

const addButton = getByText('Add');
fireEvent.click(addButton);
countElement = getByText('Count: -2');
expect(countElement).toBeInTheDocument();
fireEvent.click(addButton);
countElement = getByText('Count: -1');
expect(countElement).toBeInTheDocument();
fireEvent.click(addButton);
countElement = getByText('Count: 0');
expect(countElement).toBeInTheDocument();





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

&lt;/div&gt;



</description>
    </item>
    <item>
      <title>10 Simple Steps for SQL Performance Tuning</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Mon, 06 Feb 2023 06:26:59 +0000</pubDate>
      <link>https://dev.to/muzeyr/10-simple-steps-for-sql-performance-tuning-189i</link>
      <guid>https://dev.to/muzeyr/10-simple-steps-for-sql-performance-tuning-189i</guid>
      <description>&lt;p&gt;Database query performance plays a crucial role in determining the overall performance and efficiency of an application. Slow-running queries can lead to longer loading times and decreased user satisfaction.&lt;/p&gt;

&lt;p&gt;In my article written to increase performance in the database, the SQL statements and table structures will be as follows, consisting of the &lt;code&gt;product&lt;/code&gt;, &lt;code&gt;curation&lt;/code&gt;, and &lt;code&gt;viewed_products&lt;/code&gt; tables.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CREATE TABLE product (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE curation (
  id INT AUTO_INCREMENT PRIMARY KEY,
  product_id INT NOT NULL,
  user_id INT NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (product_id) REFERENCES product(id)
);

CREATE TABLE `viewed_products` (
  `id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

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

&lt;/div&gt;



&lt;p&gt;In the &lt;code&gt;product&lt;/code&gt; table, the &lt;code&gt;id&lt;/code&gt; field is the primary key and &lt;code&gt;created_at&lt;/code&gt; field is a timestamp field that automatically updates with the current date and time. The curation table has a foreign key constraint on the &lt;code&gt;product_id&lt;/code&gt; field, which references the &lt;code&gt;id&lt;/code&gt; field in the &lt;code&gt;product&lt;/code&gt; table. The &lt;code&gt;user_id&lt;/code&gt; field in the &lt;code&gt;curation&lt;/code&gt; table specifies which user has seen the product. The &lt;code&gt;created_at&lt;/code&gt; field in the curation table is a timestamp field that automatically updates with the current date and time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Importance of Database Query Performance:&lt;/strong&gt; The performance of database queries has a significant impact on the overall performance and efficiency of an application. Slow running queries can result in longer load times and decreased user satisfaction.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Writing and Optimizing Database Queries:&lt;/strong&gt; Writing well-optimized database queries can greatly improve performance. This involves selecting the appropriate data types, using indexes, and avoiding slow-running operations like subqueries or full table scans.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Database Indexes and Types of Indexes:&lt;/strong&gt; Indexes are used to speed up the search process in a database. There are several types of indexes including B-tree, Hash, and Bitmap indexes. The choice of index type depends on the specific use case and query requirements.&lt;/p&gt;

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

&lt;p&gt;Before adding indexes to the relevant tables in the database, I observed that the performance was 0.00261 milliseconds and I have a screen shot. I would like to show that the performance has greatly increased by adding the index, although it should be noted that the number of records is low and therefore, measurements taken here may not reflect the truth by 100%.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ALTER TABLE curation
ADD CONSTRAINT fk_curation_product_id
FOREIGN KEY (product_id)
REFERENCES product(id);

ALTER TABLE viewed_products 
ADD CONSTRAINT fk_viewed_products_product_id 
FOREIGN KEY (product_id) 
REFERENCES product(id);

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

&lt;/div&gt;



&lt;p&gt;SQL statement that I used to observe the performance.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT *
FROM product p
JOIN curation c ON p.id = c.product_id
WHERE p.id NOT IN (SELECT product_id FROM viewed_products WHERE user_id = 1)

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

&lt;/div&gt;



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

&lt;p&gt;**Using Indexes for Sorting and Grouping Queries: **Indexes can be used to sort and group query results more efficiently. For example, a query that sorts by a particular column can use an index on that column to avoid a full table scan.&lt;/p&gt;

&lt;p&gt;By creating the SQL statement into a view, it can improve performance by not retrieving data from all tables. This can help to reduce the workload on the database and improve query performance.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CREATE VIEW product_curation_view AS 
SELECT *
FROM product p
JOIN curation c ON p.id = c.product_id
WHERE p.id NOT IN (SELECT product_id FROM viewed_products WHERE user_id = 1)
order by c.id desc;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;**Impact of Database System and Server Settings: The **configuration of the database system and server can have a major impact on performance. Settings such as the buffer cache size, max connection limit, and query execution timeout can all be optimized to improve performance.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Load Testing and Monitoring Database Performance:&lt;/strong&gt; Load testing is the process of testing an application under heavy loads to determine its performance and scalability. Monitoring database performance can help identify and resolve performance issues, such as slow running queries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Profile Analysis and Optimization of SQL Queries:&lt;/strong&gt; Profiling SQL queries can help identify performance bottlenecks, such as slow-running operations or missing indexes. Optimizing these issues can result in significant performance improvements.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Functional and Additional Indexes:&lt;/strong&gt; Functional and additional indexes are used to improve the performance of specific types of queries. For example, a functional index can be created on an expression, while an additional index can be created on a computed column.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ALTER TABLE product
ADD INDEX product_created_at_idx (created_at);

ALTER TABLE curation
ADD INDEX curation_product_id_idx (product_id),
ADD INDEX curation_created_at_idx (created_at);

ALTER TABLE viewed_products
ADD INDEX viewed_products_product_id_idx (product_id),
ADD INDEX viewed_products_user_id_idx (user_id),
ADD INDEX viewed_products_created_at_idx (created_at);

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

&lt;/div&gt;



&lt;p&gt;In this example, functional indexes are added to improve query performance for the created_at columns in all three tables, as well as additional indexes for the product_id and user_id columns in the curation and viewed_products tables. These indexes allow the database to quickly retrieve the data it needs, reducing the time it takes to execute a query.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Database Cache Mechanisms:&lt;/strong&gt; Database cache mechanisms can greatly improve the performance of queries by storing frequently accessed data in memory. This can avoid the need for expensive disk I/O operations and result in faster query execution.&lt;/p&gt;

&lt;p&gt;To set up database cache mechanisms, you can use caching technologies such as Memcached or Redis. These are in-memory data stores that cache frequently accessed data, so that the database doesn't have to retrieve the same information from disk multiple times.&lt;/p&gt;

&lt;p&gt;Here is an example of how to set up Memcached for a MySQL database:&lt;/p&gt;

&lt;p&gt;First, you need to install the lru-cache library:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install lru-cache

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

&lt;/div&gt;



&lt;p&gt;Next, you need to require the library in your code and create a new cache instance:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const LRU = require('lru-cache');

const cache = new LRU({
  max: 500, // max number of items in cache
  maxAge: 1000 * 60 * 60 // 1 hour
});

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

&lt;/div&gt;



&lt;p&gt;To store data in the cache, you can use the set method:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cache.set('key', 'value');

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

&lt;/div&gt;



&lt;p&gt;To retrieve data from the cache, you can use the get method:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const value = cache.get('key');

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

&lt;/div&gt;



&lt;p&gt;When you make a database query, you can first check if the data is in the cache. If it is, you can return the cached data. If it's not, you can query the database and store the result in the cache:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const value = cache.get('key');
if (value) {
  return value;
} else {
  // Query the database
  const result = await database.query('SELECT ...');
  cache.set('key', result);
  return result;
}


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

&lt;/div&gt;



&lt;p&gt;This is a simple example of how you could use the lru-cache library to implement a cache mechanism in a Node.js application.&lt;/p&gt;

&lt;p&gt;Continual Improvement of Database Performance: Maintaining good performance is an ongoing process, as the database and its workloads change over time. Continually monitoring and optimizing performance can ensure that the database remains efficient and performs well even as its requirements evolve.&lt;/p&gt;

&lt;p&gt;All sql statements are below, you can use them if necessary.&lt;br&gt;
&lt;/p&gt;

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

--
-- Table structure for table `curation`
--

CREATE TABLE `curation` (
  `id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `curation`
--

INSERT INTO `curation` (`id`, `product_id`, `user_id`, `created_at`) VALUES
(1, 84, 1, '2023-02-06 05:41:00'),
(2, 102, 1, '2023-02-06 05:41:00'),
(3, 180, 1, '2023-02-06 05:41:00'),
(4, 38, 1, '2023-02-06 05:41:00'),
(5, 15, 1, '2023-02-06 05:41:00'),
(6, 117, 1, '2023-02-06 05:41:00'),
(7, 142, 1, '2023-02-06 05:41:00'),
(8, 205, 1, '2023-02-06 05:41:00'),
(9, 145, 1, '2023-02-06 05:41:00'),
(10, 189, 1, '2023-02-06 05:41:00'),
(11, 208, 1, '2023-02-06 05:41:00'),
(12, 99, 1, '2023-02-06 05:41:00'),
(13, 155, 1, '2023-02-06 05:41:00'),
(14, 173, 1, '2023-02-06 05:41:00'),
(15, 29, 1, '2023-02-06 05:41:00'),
(16, 201, 1, '2023-02-06 05:41:00'),
(17, 49, 1, '2023-02-06 05:41:00'),
(18, 196, 1, '2023-02-06 05:41:00'),
(19, 103, 1, '2023-02-06 05:41:00'),
(20, 58, 1, '2023-02-06 05:41:00'),
(21, 185, 1, '2023-02-06 05:41:00'),
(22, 123, 1, '2023-02-06 05:41:00'),
(23, 124, 1, '2023-02-06 05:41:00'),
(24, 177, 1, '2023-02-06 05:41:00'),
(25, 179, 1, '2023-02-06 05:41:00'),
(26, 34, 1, '2023-02-06 05:41:00'),
(27, 110, 1, '2023-02-06 05:41:00');

-- --------------------------------------------------------

--
-- Table structure for table `product`
--

CREATE TABLE `product` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `description` varchar(255) NOT NULL,
  `price` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `product`
--

INSERT INTO `product` (`id`, `name`, `created_at`, `description`, `price`) VALUES
(1, 'Smartphone X', '2023-02-06 05:24:28', 'This latest smartphone has a high-resolution camera and fast processor', 200),
(2, 'Laptop Y', '2023-02-06 05:24:28', 'This powerful laptop has a long battery life and large storage capacity', 1000),
(3, 'Tablet Z', '2023-02-06 05:24:28', 'This lightweight tablet is perfect for entertainment and on-the-go computing', 300),
(4, 'Headphones A', '2023-02-06 05:24:28', 'These headphones have excellent sound quality and a comfortable fit', 100),
(5, 'Speaker B', '2023-02-06 05:24:28', 'This compact speaker delivers powerful, clear sound', 80),
(6, 'Smartwatch C', '2023-02-06 05:24:28', 'This smartwatch has a variety of health and fitness tracking features', 250),
(7, 'Camera D', '2023-02-06 05:24:28', 'This high-performance camera has advanced features for professional photographers', 1500),
(8, 'Fitness Tracker E', '2023-02-06 05:24:28', 'This fitness tracker has a heart rate monitor and activity tracking features', 150),
(9, 'VR Headset F', '2023-02-06 05:24:28', 'This VR headset offers an immersive virtual reality experience', 500),
(10, 'Drone G', '2023-02-06 05:24:28', 'This drone has advanced flight control features and a high-resolution camera', 1000),
(11, 'Denim Jacket', '2023-02-06 05:26:18', 'This stylish denim jacket is made from high-quality materials', 70),
(12, 'Sweater Coat', '2023-02-06 05:26:18', 'This warm sweater coat is perfect for chilly weather', 100),
(13, 'Fashion Boots', '2023-02-06 05:26:18', 'These fashion boots are both stylish and comfortable', 150),
(14, 'Casual Shoes', '2023-02-06 05:26:18', 'These casual shoes are suitable for everyday wear', 60),
(15, 'Dress Shirt', '2023-02-06 05:26:18', 'This dress shirt is made from premium cotton and has a tailored fit', 40),
(16, 'T-Shirt', '2023-02-06 05:26:18', 'This soft T-shirt is perfect for casual outfits', 15),
(17, 'Jeans', '2023-02-06 05:26:18', 'These jeans are both comfortable and stylish', 50),
(18, 'Sneakers', '2023-02-06 05:26:18', 'These sneakers have a classic design and are suitable for casual and sports wear', 70),
(19, 'Fashion Sunglasses', '2023-02-06 05:26:18', 'These sunglasses are both stylish and offer UV protection', 30),
(20, 'Leather Bag', '2023-02-06 05:26:18', 'This high-quality leather bag is perfect for work or everyday use', 130),
(21, 'Baby Onesie', '2023-02-06 05:28:11', 'This soft and comfortable baby onesie is perfect for your little one', 10),
(22, 'Baby Romper', '2023-02-06 05:28:11', 'This cute and stylish baby romper is perfect for warm weather', 15),
(23, 'Baby Bibs', '2023-02-06 05:28:11', 'These soft and absorbent baby bibs are perfect for mealtime', 6),
(24, 'Baby Booties', '2023-02-06 05:28:11', 'These cozy baby booties will keep your little ones feet warm', 8),
(25, 'Baby Hat', '2023-02-06 05:28:11', 'This soft and warm baby hat is perfect for cold weather', 6),
(26, 'Baby Socks', '2023-02-06 05:28:11', 'These soft and comfortable baby socks are perfect for your little ones delicate skin', 4),
(27, 'Baby Swaddle', '2023-02-06 05:28:11', 'This soft and stretchy baby swaddle is perfect for keeping your little one snug and secure', 13),
(28, 'Baby Blanket', '2023-02-06 05:28:11', 'This soft and warm baby blanket is perfect for snuggling with your little one', 15),
(29, 'Baby Hooded Towel', '2023-02-06 05:28:11', 'This soft and absorbent baby hooded towel is perfect for bathtime', 13),
(30, 'Baby Washcloth Set', '2023-02-06 05:28:11', 'This set of soft and gentle baby washcloths is perfect for cleaning your little one', 7),
(31, 'Baby Onesie', '2023-02-06 05:28:17', 'This soft and comfortable baby onesie is perfect for your little one', 10),
(32, 'Baby Romper', '2023-02-06 05:28:17', 'This cute and stylish baby romper is perfect for warm weather', 15),
(33, 'Baby Bibs', '2023-02-06 05:28:17', 'These soft and absorbent baby bibs are perfect for mealtime', 6),
(34, 'Baby Booties', '2023-02-06 05:28:17', 'These cozy baby booties will keep your little ones feet warm', 8),
(35, 'Baby Hat', '2023-02-06 05:28:17', 'This soft and warm baby hat is perfect for cold weather', 6),
(36, 'Baby Socks', '2023-02-06 05:28:17', 'These soft and comfortable baby socks are perfect for your little ones delicate skin', 4),
(37, 'Baby Swaddle', '2023-02-06 05:28:17', 'This soft and stretchy baby swaddle is perfect for keeping your little one snug and secure', 13),
(38, 'Baby Blanket', '2023-02-06 05:28:17', 'This soft and warm baby blanket is perfect for snuggling with your little one', 15),
(39, 'Baby Hooded Towel', '2023-02-06 05:28:17', 'This soft and absorbent baby hooded towel is perfect for bathtime', 13),
(40, 'Baby Washcloth Set', '2023-02-06 05:28:17', 'This set of soft and gentle baby washcloths is perfect for cleaning your little one', 7),
(101, 'Smartphone X', '2023-02-06 02:24:28', 'This latest smartphone has a high-resolution camera and fast processor', 200),
(102, 'Laptop Y', '2023-02-06 02:24:28', 'This powerful laptop has a long battery life and large storage capacity', 1000),
(103, 'Tablet Z', '2023-02-06 02:24:28', 'This lightweight tablet is perfect for entertainment and on-the-go computing', 300),
(104, 'Headphones A', '2023-02-06 02:24:28', 'These headphones have excellent sound quality and a comfortable fit', 100),
(105, 'Speaker B', '2023-02-06 02:24:28', 'This compact speaker delivers powerful, clear sound', 80),
(106, 'Smartwatch C', '2023-02-06 02:24:28', 'This smartwatch has a variety of health and fitness tracking features', 250),
(107, 'Camera D', '2023-02-06 02:24:28', 'This high-performance camera has advanced features for professional photographers', 1500),
(108, 'Fitness Tracker E', '2023-02-06 02:24:28', 'This fitness tracker has a heart rate monitor and activity tracking features', 150),
(109, 'VR Headset F', '2023-02-06 02:24:28', 'This VR headset offers an immersive virtual reality experience', 500),
(110, 'Drone G', '2023-02-06 02:24:28', 'This drone has advanced flight control features and a high-resolution camera', 1000),
(111, 'Denim Jacket', '2023-02-06 02:26:18', 'This stylish denim jacket is made from high-quality materials', 70),
(112, 'Sweater Coat', '2023-02-06 02:26:18', 'This warm sweater coat is perfect for chilly weather', 100),
(113, 'Fashion Boots', '2023-02-06 02:26:18', 'These fashion boots are both stylish and comfortable', 150),
(114, 'Casual Shoes', '2023-02-06 02:26:18', 'These casual shoes are suitable for everyday wear', 60),
(115, 'Dress Shirt', '2023-02-06 02:26:18', 'This dress shirt is made from premium cotton and has a tailored fit', 40),
(116, 'T-Shirt', '2023-02-06 02:26:18', 'This soft T-shirt is perfect for casual outfits', 15),
(117, 'Jeans', '2023-02-06 02:26:18', 'These jeans are both comfortable and stylish', 50),
(118, 'Sneakers', '2023-02-06 02:26:18', 'These sneakers have a classic design and are suitable for casual and sports wear', 70),
(119, 'Fashion Sunglasses', '2023-02-06 02:26:18', 'These sunglasses are both stylish and offer UV protection', 30),
(120, 'Leather Bag', '2023-02-06 02:26:18', 'This high-quality leather bag is perfect for work or everyday use', 130),
(121, 'Baby Onesie', '2023-02-06 02:28:11', 'This soft and comfortable baby onesie is perfect for your little one', 10),
(122, 'Baby Romper', '2023-02-06 02:28:11', 'This cute and stylish baby romper is perfect for warm weather', 15),
(123, 'Baby Bibs', '2023-02-06 02:28:11', 'These soft and absorbent baby bibs are perfect for mealtime', 6),
(124, 'Baby Booties', '2023-02-06 02:28:11', 'These cozy baby booties will keep your little ones feet warm', 8),
(125, 'Baby Hat', '2023-02-06 02:28:11', 'This soft and warm baby hat is perfect for cold weather', 6),
(126, 'Baby Socks', '2023-02-06 02:28:11', 'These soft and comfortable baby socks are perfect for your little ones delicate skin', 4),
(127, 'Baby Swaddle', '2023-02-06 02:28:11', 'This soft and stretchy baby swaddle is perfect for keeping your little one snug and secure', 13),
(128, 'Baby Blanket', '2023-02-06 02:28:11', 'This soft and warm baby blanket is perfect for snuggling with your little one', 15),
(129, 'Baby Hooded Towel', '2023-02-06 02:28:11', 'This soft and absorbent baby hooded towel is perfect for bathtime', 13),
(130, 'Baby Washcloth Set', '2023-02-06 02:28:11', 'This set of soft and gentle baby washcloths is perfect for cleaning your little one', 7),
(131, 'Baby Onesie', '2023-02-06 02:28:17', 'This soft and comfortable baby onesie is perfect for your little one', 10),
(132, 'Baby Romper', '2023-02-06 02:28:17', 'This cute and stylish baby romper is perfect for warm weather', 15),
(133, 'Baby Bibs', '2023-02-06 02:28:17', 'These soft and absorbent baby bibs are perfect for mealtime', 6),
(134, 'Baby Booties', '2023-02-06 02:28:17', 'These cozy baby booties will keep your little ones feet warm', 8),
(135, 'Baby Hat', '2023-02-06 02:28:17', 'This soft and warm baby hat is perfect for cold weather', 6),
(136, 'Baby Socks', '2023-02-06 02:28:17', 'These soft and comfortable baby socks are perfect for your little ones delicate skin', 4),
(137, 'Baby Swaddle', '2023-02-06 02:28:17', 'This soft and stretchy baby swaddle is perfect for keeping your little one snug and secure', 13),
(138, 'Baby Blanket', '2023-02-06 02:28:17', 'This soft and warm baby blanket is perfect for snuggling with your little one', 15),
(139, 'Baby Hooded Towel', '2023-02-06 02:28:17', 'This soft and absorbent baby hooded towel is perfect for bathtime', 13),
(140, 'Baby Washcloth Set', '2023-02-06 02:28:17', 'This set of soft and gentle baby washcloths is perfect for cleaning your little one', 7),
(141, 'Baby Onesie', '2023-02-06 05:31:18', 'This soft and comfortable baby onesie is perfect for your little one.', 10),
(142, 'Baby Romper', '2023-02-06 05:31:18', 'This cute and stylish baby romper is perfect for warm weather.', 15),
(143, 'Baby Bibs', '2023-02-06 05:31:18', 'These soft and absorbent baby bibs are perfect for mealtime.', 6),
(144, 'Baby Booties', '2023-02-06 05:31:18', 'These cozy baby booties will keep your little ones feet warm.', 8),
(145, 'Baby Hat', '2023-02-06 05:31:18', 'This soft and warm baby hat is perfect for cold weather.', 6),
(146, 'Baby Socks', '2023-02-06 05:31:18', 'These soft and comfortable baby socks are perfect for your little ones delicate skin.', 4),
(147, 'Baby Swaddle', '2023-02-06 05:31:18', 'This soft and stretchy baby swaddle is perfect for keeping your little one snug and secure.', 13),
(148, 'Baby Blanket', '2023-02-06 05:31:18', 'This soft and warm baby blanket is perfect for snuggling with your little one.', 15),
(149, 'Baby Hooded Towel', '2023-02-06 05:31:18', 'This soft and absorbent baby hooded towel is perfect for bathtime.', 13),
(150, 'Baby Washcloth Set', '2023-02-06 05:31:18', 'This set of soft and gentle baby washcloths is perfect for cleaning your little one.', 7),
(151, 'Cotton Onesie', '2023-02-06 05:31:18', 'This soft and comfortable cotton onesie is perfect for your little one.', 10),
(152, 'Cotton Romper', '2023-02-06 05:31:18', 'This cute and stylish cotton romper is perfect for warm weather.', 15),
(153, 'Cotton Bibs', '2023-02-06 05:31:18', 'These soft and absorbent cotton bibs are perfect for mealtime.', 6),
(154, 'Cotton Booties', '2023-02-06 05:31:18', 'These cozy cotton booties will keep your little ones feet warm.', 8),
(155, 'Cotton Hat', '2023-02-06 05:31:18', 'This soft and warm cotton hat is perfect for cold weather.', 6),
(156, 'Cotton Socks', '2023-02-06 05:31:18', 'These soft and comfortable cotton socks are perfect for your little one delicate skin.', 4),
(157, 'Cotton Swaddle', '2023-02-06 05:31:18', 'This soft and stretchy cotton swaddle is perfect for keeping your little one snug and secure.', 13),
(158, 'Cotton Blanket', '2023-02-06 05:31:18', 'This soft and warm cotton blanket is perfect for snuggling with your little one.', 15),
(159, 'Cotton Hooded Towel', '2023-02-06 05:31:18', 'This soft and absorbent cotton hooded towel is perfect for bathtime.', 13),
(160, 'Cotton Washcloth Set', '2023-02-06 05:31:18', 'This set of soft and gentle cotton washcloths is perfect for cleaning your little one.', 7),
(161, 'Baby Onesie', '2023-02-06 05:31:22', 'This soft and comfortable baby onesie is perfect for your little one.', 10),
(162, 'Baby Romper', '2023-02-06 05:31:22', 'This cute and stylish baby romper is perfect for warm weather.', 15),
(163, 'Baby Bibs', '2023-02-06 05:31:22', 'These soft and absorbent baby bibs are perfect for mealtime.', 6),
(164, 'Baby Booties', '2023-02-06 05:31:22', 'These cozy baby booties will keep your little ones feet warm.', 8),
(165, 'Baby Hat', '2023-02-06 05:31:22', 'This soft and warm baby hat is perfect for cold weather.', 6),
(166, 'Baby Socks', '2023-02-06 05:31:22', 'These soft and comfortable baby socks are perfect for your little ones delicate skin.', 4),
(167, 'Baby Swaddle', '2023-02-06 05:31:22', 'This soft and stretchy baby swaddle is perfect for keeping your little one snug and secure.', 13),
(168, 'Baby Blanket', '2023-02-06 05:31:22', 'This soft and warm baby blanket is perfect for snuggling with your little one.', 15),
(169, 'Baby Hooded Towel', '2023-02-06 05:31:22', 'This soft and absorbent baby hooded towel is perfect for bathtime.', 13),
(170, 'Baby Washcloth Set', '2023-02-06 05:31:22', 'This set of soft and gentle baby washcloths is perfect for cleaning your little one.', 7),
(171, 'Cotton Onesie', '2023-02-06 05:31:22', 'This soft and comfortable cotton onesie is perfect for your little one.', 10),
(172, 'Cotton Romper', '2023-02-06 05:31:22', 'This cute and stylish cotton romper is perfect for warm weather.', 15),
(173, 'Cotton Bibs', '2023-02-06 05:31:22', 'These soft and absorbent cotton bibs are perfect for mealtime.', 6),
(174, 'Cotton Booties', '2023-02-06 05:31:22', 'These cozy cotton booties will keep your little ones feet warm.', 8),
(175, 'Cotton Hat', '2023-02-06 05:31:22', 'This soft and warm cotton hat is perfect for cold weather.', 6),
(176, 'Cotton Socks', '2023-02-06 05:31:22', 'These soft and comfortable cotton socks are perfect for your little one delicate skin.', 4),
(177, 'Cotton Swaddle', '2023-02-06 05:31:22', 'This soft and stretchy cotton swaddle is perfect for keeping your little one snug and secure.', 13),
(178, 'Cotton Blanket', '2023-02-06 05:31:22', 'This soft and warm cotton blanket is perfect for snuggling with your little one.', 15),
(179, 'Cotton Hooded Towel', '2023-02-06 05:31:22', 'This soft and absorbent cotton hooded towel is perfect for bathtime.', 13),
(180, 'Cotton Washcloth Set', '2023-02-06 05:31:22', 'This set of soft and gentle cotton washcloths is perfect for cleaning your little one.', 7),
(181, 'Soft and comfortable baby bodysuit yellow', '2023-02-06 05:35:00', 'This baby bodysuit is made of soft and comfortable material', 36),
(182, 'Adorable baby romper with cute pattern yellow', '2023-02-06 05:35:00', 'This baby romper features a cute pattern that is sure to delight', 48),
(183, 'Striped baby jumpsuit yellow', '2023-02-06 05:35:00', 'This striped baby jumpsuit is both stylish and practical', 34),
(184, 'Cute and cozy baby onesie yellow', '2023-02-06 05:35:00', 'This baby onesie is both cute and cozy, perfect for keeping your little one warm', 25),
(185, 'Trendy baby hoodie yellow', '2023-02-06 05:35:00', 'This baby hoodie is both trendy and practical, perfect for keeping your little one warm', 24),
(186, 'Soft baby blanket yellow', '2023-02-06 05:35:00', 'This soft baby blanket is perfect for keeping your little one warm and comfortable', 47),
(187, 'Stylish baby bib yellow', '2023-02-06 05:35:00', 'This stylish baby bib is both functional and trendy, perfect for mealtime', 62),
(188, 'Cute baby booties yellow', '2023-02-06 05:35:00', 'These cute baby booties will keep your little one\'s feet warm and stylish', 70),
(189, 'Comfortable baby hat yellow', '2023-02-06 05:35:00', 'This comfortable baby hat is perfect for keeping your little one warm on chilly days', 66),
(190, 'Stylish baby gloves yellow', '2023-02-06 05:35:00', 'These stylish baby gloves will keep your little one\'s hands warm and looking great', 18),
(191, 'Trendy baby socks yellow', '2023-02-06 05:35:00', 'These trendy baby socks are both stylish and practical', 92),
(192, 'Cozy baby leggings yellow', '2023-02-06 05:35:00', 'These cozy baby leggings are perfect for keeping your little one warm and comfortable', 7),
(193, 'Cute baby t-shirt yellow', '2023-02-06 05:35:00', 'This cute baby t-shirt is perfect for keeping your little one cool and comfortable', 58),
(194, 'Comfortable baby pants yellow', '2023-02-06 05:35:00', 'These comfortable baby pants are perfect for keeping your little one cool and cozy', 71),
(195, 'Stylish baby dress yellow', '2023-02-06 05:35:00', 'This stylish baby dress is perfect for special occasions', 82),
(196, 'Cute baby skirt yellow', '2023-02-06 05:35:00', 'This cute baby skirt is perfect for keeping your little one stylish and comfortable', 96),
(197, 'Comfortable baby shorts yellow', '2023-02-06 05:35:00', 'These comfortable baby shorts are perfect for keeping your little one cool and comfortable', 33),
(198, 'Stylish baby sweater yellow', '2023-02-06 05:35:00', 'This stylish baby sweater is perfect for keeping your little one warm and looking great', 81),
(199, 'Cute baby hat yellow', '2023-02-06 05:35:00', 'This cute baby hat is both stylish and practical, perfect for keeping your little one warm', 6),
(200, 'Comfortable baby jacket yellow', '2023-02-06 05:35:00', 'This comfortable baby jacket is perfect for keeping your little one warm and cozy on chilly days', 86),
(201, 'Soft and comfortable baby bodysuit yellow', '2023-02-06 05:35:08', 'This baby bodysuit is made of soft and comfortable material', 15),
(202, 'Adorable baby romper with cute pattern yellow', '2023-02-06 05:35:08', 'This baby romper features a cute pattern that is sure to delight', 38),
(203, 'Striped baby jumpsuit yellow', '2023-02-06 05:35:08', 'This striped baby jumpsuit is both stylish and practical', 46),
(204, 'Cute and cozy baby onesie yellow', '2023-02-06 05:35:08', 'This baby onesie is both cute and cozy, perfect for keeping your little one warm', 16),
(205, 'Trendy baby hoodie yellow', '2023-02-06 05:35:08', 'This baby hoodie is both trendy and practical, perfect for keeping your little one warm', 45),
(206, 'Soft baby blanket yellow', '2023-02-06 05:35:08', 'This soft baby blanket is perfect for keeping your little one warm and comfortable', 75),
(207, 'Stylish baby bib yellow', '2023-02-06 05:35:08', 'This stylish baby bib is both functional and trendy, perfect for mealtime', 40),
(208, 'Cute baby booties yellow', '2023-02-06 05:35:08', 'These cute baby booties will keep your little one\'s feet warm and stylish', 75),
(209, 'Comfortable baby hat yellow', '2023-02-06 05:35:08', 'This comfortable baby hat is perfect for keeping your little one warm on chilly days', 55),
(210, 'Stylish baby gloves yellow', '2023-02-06 05:35:08', 'These stylish baby gloves will keep your little one\'s hands warm and looking great', 50),
(211, 'Trendy baby socks yellow', '2023-02-06 05:35:08', 'These trendy baby socks are both stylish and practical', 88),
(212, 'Cozy baby leggings yellow', '2023-02-06 05:35:08', 'These cozy baby leggings are perfect for keeping your little one warm and comfortable', 91),
(213, 'Cute baby t-shirt yellow', '2023-02-06 05:35:08', 'This cute baby t-shirt is perfect for keeping your little one cool and comfortable', 90),
(214, 'Comfortable baby pants yellow', '2023-02-06 05:35:08', 'These comfortable baby pants are perfect for keeping your little one cool and cozy', 77),
(215, 'Stylish baby dress yellow', '2023-02-06 05:35:08', 'This stylish baby dress is perfect for special occasions', 17),
(216, 'Cute baby skirt yellow', '2023-02-06 05:35:08', 'This cute baby skirt is perfect for keeping your little one stylish and comfortable', 54),
(217, 'Comfortable baby shorts yellow', '2023-02-06 05:35:08', 'These comfortable baby shorts are perfect for keeping your little one cool and comfortable', 18),
(218, 'Stylish baby sweater yellow', '2023-02-06 05:35:08', 'This stylish baby sweater is perfect for keeping your little one warm and looking great', 28),
(219, 'Cute baby hat yellow', '2023-02-06 05:35:08', 'This cute baby hat is both stylish and practical, perfect for keeping your little one warm', 86),
(220, 'Comfortable baby jacket yellow', '2023-02-06 05:35:08', 'This comfortable baby jacket is perfect for keeping your little one warm and cozy on chilly days', 47),
(221, 'Soft and comfortable baby bodysuit yellow', '2023-02-06 05:35:12', 'This baby bodysuit is made of soft and comfortable material', 9),
(222, 'Adorable baby romper with cute pattern yellow', '2023-02-06 05:35:12', 'This baby romper features a cute pattern that is sure to delight', 25),
(223, 'Striped baby jumpsuit yellow', '2023-02-06 05:35:12', 'This striped baby jumpsuit is both stylish and practical', 98),
(224, 'Cute and cozy baby onesie yellow', '2023-02-06 05:35:12', 'This baby onesie is both cute and cozy, perfect for keeping your little one warm', 15),
(225, 'Trendy baby hoodie yellow', '2023-02-06 05:35:12', 'This baby hoodie is both trendy and practical, perfect for keeping your little one warm', 83),
(226, 'Soft baby blanket yellow', '2023-02-06 05:35:12', 'This soft baby blanket is perfect for keeping your little one warm and comfortable', 67),
(227, 'Stylish baby bib yellow', '2023-02-06 05:35:12', 'This stylish baby bib is both functional and trendy, perfect for mealtime', 90),
(228, 'Cute baby booties yellow', '2023-02-06 05:35:12', 'These cute baby booties will keep your little one\'s feet warm and stylish', 47),
(229, 'Comfortable baby hat yellow', '2023-02-06 05:35:12', 'This comfortable baby hat is perfect for keeping your little one warm on chilly days', 66),
(230, 'Stylish baby gloves yellow', '2023-02-06 05:35:12', 'These stylish baby gloves will keep your little one\'s hands warm and looking great', 89),
(231, 'Trendy baby socks yellow', '2023-02-06 05:35:12', 'These trendy baby socks are both stylish and practical', 46),
(232, 'Cozy baby leggings yellow', '2023-02-06 05:35:12', 'These cozy baby leggings are perfect for keeping your little one warm and comfortable', 65),
(233, 'Cute baby t-shirt yellow', '2023-02-06 05:35:12', 'This cute baby t-shirt is perfect for keeping your little one cool and comfortable', 88),
(234, 'Comfortable baby pants yellow', '2023-02-06 05:35:12', 'These comfortable baby pants are perfect for keeping your little one cool and cozy', 47),
(235, 'Stylish baby dress yellow', '2023-02-06 05:35:12', 'This stylish baby dress is perfect for special occasions', 69),
(236, 'Cute baby skirt yellow', '2023-02-06 05:35:12', 'This cute baby skirt is perfect for keeping your little one stylish and comfortable', 6),
(237, 'Comfortable baby shorts yellow', '2023-02-06 05:35:12', 'These comfortable baby shorts are perfect for keeping your little one cool and comfortable', 23),
(238, 'Stylish baby sweater yellow', '2023-02-06 05:35:12', 'This stylish baby sweater is perfect for keeping your little one warm and looking great', 97),
(239, 'Cute baby hat yellow', '2023-02-06 05:35:12', 'This cute baby hat is both stylish and practical, perfect for keeping your little one warm', 19),
(240, 'Comfortable baby jacket yellow', '2023-02-06 05:35:12', 'This comfortable baby jacket is perfect for keeping your little one warm and cozy on chilly days', 2);

-- --------------------------------------------------------

--
-- Table structure for table `viewed_products`
--

CREATE TABLE `viewed_products` (
  `id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `viewed_products`
--

INSERT INTO `viewed_products` (`id`, `product_id`, `user_id`, `created_at`) VALUES
(1, 164, 1, '2023-02-06 05:42:29'),
(2, 88, 1, '2023-02-06 05:42:29'),
(3, 167, 1, '2023-02-06 05:42:29'),
(4, 136, 1, '2023-02-06 05:42:29'),
(5, 178, 1, '2023-02-06 05:42:29'),
(6, 52, 1, '2023-02-06 05:42:29'),
(7, 155, 1, '2023-02-06 05:42:29'),
(8, 187, 1, '2023-02-06 05:42:29'),
(9, 36, 1, '2023-02-06 05:42:29'),
(10, 51, 1, '2023-02-06 05:42:29'),
(11, 148, 1, '2023-02-06 05:42:29'),
(12, 23, 1, '2023-02-06 05:42:33'),
(13, 18, 1, '2023-02-06 05:42:33'),
(14, 18, 1, '2023-02-06 05:42:33'),
(15, 36, 1, '2023-02-06 05:42:33'),
(16, 126, 1, '2023-02-06 05:42:33'),
(17, 90, 1, '2023-02-06 05:42:33'),
(18, 70, 1, '2023-02-06 05:42:33'),
(19, 80, 1, '2023-02-06 05:42:33'),
(20, 191, 1, '2023-02-06 05:42:33'),
(21, 67, 1, '2023-02-06 05:42:33'),
(22, 194, 1, '2023-02-06 05:42:33'),
(23, 89, 1, '2023-02-06 05:42:36'),
(24, 214, 1, '2023-02-06 05:42:36'),
(25, 154, 1, '2023-02-06 05:42:36'),
(26, 127, 1, '2023-02-06 05:42:36'),
(27, 173, 1, '2023-02-06 05:42:36'),
(28, 52, 1, '2023-02-06 05:42:36'),
(29, 172, 1, '2023-02-06 05:42:36'),
(30, 54, 1, '2023-02-06 05:42:36'),
(31, 188, 1, '2023-02-06 05:42:36'),
(32, 127, 1, '2023-02-06 05:42:36'),
(33, 72, 1, '2023-02-06 05:42:36');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `curation`
--
ALTER TABLE `curation`
  ADD PRIMARY KEY (`id`),
  ADD KEY `fk_curation_product_id` (`product_id`);

--
-- Indexes for table `product`
--
ALTER TABLE `product`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `viewed_products`
--
ALTER TABLE `viewed_products`
  ADD PRIMARY KEY (`id`),
  ADD KEY `fk_viewed_products_product_id` (`product_id`);

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

&lt;/div&gt;



</description>
    </item>
    <item>
      <title>Test Driven Development with React</title>
      <dc:creator>Uzeyr OZ</dc:creator>
      <pubDate>Mon, 06 Feb 2023 06:00:29 +0000</pubDate>
      <link>https://dev.to/muzeyr/test-driven-development-with-react-4i45</link>
      <guid>https://dev.to/muzeyr/test-driven-development-with-react-4i45</guid>
      <description>&lt;p&gt;React is a popular JavaScript library for building user interfaces, and using a test-driven development (TDD) approach can help ensure that your code is working correctly and catch bugs early in the development process. This article will show you how to implement TDD in a React app with three buttons: Add, Remove, and Reset.&lt;/p&gt;

&lt;p&gt;First, let's create a simple React component to display a count and the three buttons.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleAdd = () =&amp;gt; {
    setCount(count + 1);
  };

  const handleRemove = () =&amp;gt; {
    setCount(count - 1);
  };

  const handleReset = () =&amp;gt; {
    setCount(0);
  };

  return (
    &amp;lt;div&amp;gt;
      &amp;lt;p&amp;gt;Count: {count}&amp;lt;/p&amp;gt;
      &amp;lt;button onClick={handleAdd}&amp;gt;Add&amp;lt;/button&amp;gt;
      &amp;lt;button onClick={handleRemove}&amp;gt;Remove&amp;lt;/button&amp;gt;
      &amp;lt;button onClick={handleReset}&amp;gt;Reset&amp;lt;/button&amp;gt;
    &amp;lt;/div&amp;gt;
  );
}

export default Counter;

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

&lt;/div&gt;



&lt;p&gt;Next, let's write test scripts to verify that the buttons and count are functioning as expected. We'll use Jest as the testing framework.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';

describe('Counter', () =&amp;gt; {
  it('displays the count', () =&amp;gt; {
    const { getByText } = render(&amp;lt;Counter /&amp;gt;);
    const countElement = getByText('Count: 0');
    expect(countElement).toBeInTheDocument();
  });

  it('increases the count when the Add button is clicked', () =&amp;gt; {
    const { getByText } = render(&amp;lt;Counter /&amp;gt;);
    const addButton = getByText('Add');
    fireEvent.click(addButton);
    const countElement = getByText('Count: 1');
    expect(countElement).toBeInTheDocument();
  });

  it('decreases the count when the Remove button is clicked', () =&amp;gt; {
    const { getByText } = render(&amp;lt;Counter /&amp;gt;);
    const removeButton = getByText('Remove');
    fireEvent.click(removeButton);
    const countElement = getByText('Count: -1');
    expect(countElement).toBeInTheDocument();
  });

  it('resets the count to 0 when the Reset button is clicked', () =&amp;gt; {
    const { getByText } = render(&amp;lt;Counter /&amp;gt;);
    const resetButton = getByText('Reset');
    fireEvent.click(resetButton);
    const countElement = getByText('Count: 0');
    expect(countElement).toBeInTheDocument();
  });

  it('does not go below 0 when the count is decremented', () =&amp;gt; {
    const { getByText } = render(&amp;lt;Counter /&amp;gt;);
    const removeButton = getByText('Remove');
    fireEvent.click(removeButton);
    let countElement = getByText('Count: -1');
    expect(countElement).toBeInTheDocument();
    fireEvent.click(removeButton);
countElement = getByText('Count: -2');
expect(countElement).toBeInTheDocument();
fireEvent.click(removeButton);
countElement = getByText('Count: -3');
expect(countElement).toBeInTheDocument();

const addButton = getByText('Add');
fireEvent.click(addButton);
countElement = getByText('Count: -2');
expect(countElement).toBeInTheDocument();
fireEvent.click(addButton);
countElement = getByText('Count: -1');
expect(countElement).toBeInTheDocument();
fireEvent.click(addButton);
countElement = getByText('Count: 0');
expect(countElement).toBeInTheDocument();




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

&lt;/div&gt;



</description>
      <category>productivity</category>
      <category>refactorit</category>
      <category>coding</category>
    </item>
  </channel>
</rss>
