DEV Community: uguremirmustafa

Day 2 - Importing data and practicing queries

uguremirmustafa — Wed, 06 Aug 2025 18:57:20 +0000

Today we will learn how to find some structured data and import it into our database.

Generating some dummy data

There are some online tools for generating dummy data for testing purposes. Mockaroo is my favorite.

Let's create some user data and download it as CSV which is one of the most popular ways to store data in a text file.

Make sure your CSV headers match your table column names, or be ready to map them manually. Handle data types carefully - dates, numbers, and text need to be in the right format. Mockaroo has options to create your data in the correct format.

Preparing docker container

We need to run some sql statement to import the data.

That's great but how am I going to pass the data to docker?

Volume mapping in a nutshell:

It's like creating a shared folder between your computer and the Docker container.

The Problem: Docker containers are isolated - they can't see files on your computer by default.

The Solution: Volume mapping creates a "bridge" so both your computer and the container can access the same files.

We need to re-create our docker container. Luckly we don't have any crucial data to save so we can delete the container and create it with a volume mapping.

# stop container
docker stop travel_mania_container

# delete container
docker rm travel_mania_container

# create a folder for the project and
# for the data to share between the host and container
cd ~ && mkdir travel_mania_project \
&& cd ./travel_mania_project \
&& mkdir container_data

# re-create container with a volume mapping
docker run --name travel_mania_container \
  -e POSTGRES_USER=ugur \
  -e POSTGRES_PASSWORD=ugur1234 \
  -e POSTGRES_DB=travel_mania \
  -p 5432:5432 \
  -v ./container_data:/data \
  -d postgres

After this operation don't forget to re-create the users table.

Importing CSV

You can import your data using SQL statements or using GUI of your SQL client. But what happens if your column names does not match 1:1 with the table definition?

In that case, we need to map our column names somehow.

Using column order

First option is to rely on column order. The HEADER option tells PostgreSQL to skip the first row, and you're explicitly mapping the column order by delimiting with comma.

-- Your CSV has:   id, email_addr, username, fname,      lname,     creation_time, update_time
-- Your table has: id, email,      username, first_name, last_name, created_at,    updated_at

COPY users(id, email, username, first_name, last_name, created_at, updated_at)
FROM '/data/MOCK_DATA.csv'
DELIMITER ','
CSV HEADER;

Now you can run the COPY statement we wrote above. Here is the result:

Notice how the column names are mapped correctly.

Using a temp table

You can create a temporary table and insert the csv there. Later insert into actual table from that temp table. In this method you don't import into your main table directly and have an opportunity to map columns more granully.

-- Create temp table matching your CSV exactly
CREATE TEMP TABLE temp_users (
  id INTEGER,
  user_email VARCHAR(255),
  username VARCHAR(50),
  fname VARCHAR(100),
  lname VARCHAR(100),
  creation_time TIMESTAMP,
  update_time TIMESTAMP
);

-- Import to temp table
COPY temp_users FROM '/data/MOCK_DATA.csv' DELIMITER ',' CSV HEADER;

-- Insert into your real table with proper mapping
INSERT INTO users
  (id, email, username, first_name, last_name, created_at, updated_at)
SELECT
  id, user_email, username, fname, lname, creation_time, update_time
FROM temp_users;

-- Clean up
DROP TABLE temp_users;

Practicing queries

Question: Find all users whose first name starts with 'J' and last name starts with 'F'. Order by first name ascending.

Solution:

select
    username,
    first_name,
    last_name,
    email
from
    users
where
    first_name like 'J%'
    and last_name like 'F%'
order by
    first_name;

Question: Find users whose username contains numbers and group them by email domain (gmail.com, yahoo.com, etc.).

Solution:

select
    SPLIT_PART(email, '@', 2) as email_domain,
    COUNT(*) as users_with_numbers_in_username
from
    users
where
    username ~ '[0-9]'
    -- Contains at least one number
group by
    SPLIT_PART(email, '@', 2)
having
    COUNT(*) > 0
order by
    users_with_numbers_in_username desc;

End of Day 2

Today we learned how to import large dataset into the database using COPY statement.

Tomorrow we will learn about string functions like SPLIT_PART, LENGTH, TRIM and date functions AGE, DATE_PART, TO_CHAR.

Day 1 - Learning postgresql in 30 days as a frontend dev

uguremirmustafa — Tue, 05 Aug 2025 18:39:14 +0000

I'm a frontend developer — mostly React, mostly browser-side. But over time, I've realized that understanding the database side of things isn't just “backend stuff” — it's essential if you want to build better apps, debug faster, or go fullstack when needed.

This is not a career switch. I'm not trying to become a backend expert or a database admin. I just want to get decent at PostgreSQL — enough to design schemas, write solid queries, and understand what’s happening under the hood.

For the next 30 days, I’ll document my learning process. No filler. Just focused, practical lessons from a frontend developer’s perspective.

Let’s see how far I can get.

Day 1 starts now.

Installing postgresql on my machine

I'm going to use docker for my postgresql install. If you don't have docker installed on your machine, just figure it out!

Following command will fetch official postgres image and create a database named travel_mania inside travel_mania_container.

docker run --name travel_mania_container \
  -e POSTGRES_USER=ugur \
  -e POSTGRES_PASSWORD=ugur1234 \
  -e POSTGRES_DB=travel_mania \
  -p 5432:5432 \
  -d postgres

--name: container name

-e POSTGRES_USER : user for accessing database

-e POSTGRES_PASSWORD : password for accessing database

-p 5432:5432 : exposed port number to access to instance (host:container) - 5432 default port for pg

-d : detached mode (you can use terminal, process runs in the background)

postgres image name (official postgres image)

List running docker instances and see that our new container is there:

docker ps

# Result:
# CONTAINER ID   IMAGE      COMMAND                  CREATED         STATUS         PORTS                                         NAMES
# 2909bc1cba7d   postgres   "docker-entrypoint.s…"   5 seconds ago   Up 4 seconds   0.0.0.0:5432->5432/tcp, [::]:5432->5432/tcp   travel_mania_container

Connect to docker container and access to our database using `psql`.

psql is the PostgreSQL interactive terminal (CLI tool) — it's the most commonly used command-line interface to interact with a PostgreSQL database.

Connect to container and run psql there:

docker exec -it travel_mania_container psql -U ugur -d travel_mania

Result:


# psql (17.5 (Debian 17.5-1.pgdg120+1))
# Type "help" for help.
#
# travel_mania=#

You can quit by typing \q in psql.

Creating first table

Data stored in sql within tables. Table is simply an excel sheet on steroids.

CREATE TABLE users (
  -- `SERIAL` is PostgreSQL's way of creating auto-incrementing IDs (like auto-generated keys)
  -- `PRIMARY KEY` ensures each user has a unique identifier
  id SERIAL PRIMARY KEY,
  -- `UNIQUE` constraints prevent duplicate emails/usernames
  -- `NOT NULL` makes fields required
  -- `VARCHAR(n)` is for text with a maximum length
  email VARCHAR(255) UNIQUE NOT NULL,
  username VARCHAR(50) UNIQUE NOT NULL,
  first_name VARCHAR(100),
  last_name VARCHAR(100),
  -- `TIMESTAMP` stores date and time info
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Inserting and querying the data

-- Insert a few test users
INSERT INTO users
  (email, username, first_name, last_name)
VALUES
  ('john@example.com', 'john_traveler', 'John', 'Doe'),
  ('sara@example.com', 'sara_explorer', 'Sara', 'Smith');

-- Query all users
SELECT * FROM users;

-- Query specific fields
SELECT username, first_name, email FROM users;

Deleting data

DELETE FROM users
WHERE id = 1;

GUI Database Client

Until now, we've used the psql CLI tool to connect to our database, but we can also use GUI tools. They provide a much more intuitive experience and are mostly used in day-to-day professional work.

I prefer DBeaver as my database client, but you can use anything you like such as pgAdmin, TablePlus, etc.

End of Day 1

Tomorrow we will learn about importing bulk data into database. After that we will work on joining tables and working with large data.

Gzip Compression and IIS Setup on Windows Server for React Projects

uguremirmustafa — Sat, 06 Jan 2024 17:27:31 +0000

Enhancing web application performance heavily relies on the size of downloaded JavaScript and CSS files. To optimize this, it's crucial to compress your static assets before delivering them across the network.

Today, I'll divulge a technique to configure your create-react-app setup for serving compressed (gzipped) files. This approach can potentially shrink the downloaded resource size by a staggering 80-90% compared to the original.

Configuring Webpack

If you initiated your React application using create-react-app, leverage @craco/craco to override your webpack configuration.

To compress .js and .css files, we'll need to tweak the webpack config. Let's start by installing the compression-webpack-plugin package and integrating it into our craco.config.js

Begin by creating the craco configuration file:



# within your project's root directory

# create the configuration file
touch craco.config.js

# install craco and the webpack plugin
npm install -D @craco/craco compression-webpack-plugin



// craco.config.js
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  webpack: {
    plugins: [
      new CompressionPlugin({ algorithm: 'gzip' }),
    ],
  },
};

Now, instead of using react-scripts for the build, we'll utilize craco. Update your package.json with a custom script:



...
"scripts": {
    "start": "react-scripts start",
    "build": "craco build",
    "build-cra": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },
...

Build the project:



npm run build

Once the build is ready, proceed to copy the build folder to the designated path on the IIS server.

web.config and IIS Setup

After transferring the build to the server, create the web.config file to configure IIS:



<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
    <directoryBrowse enabled="false" />
    <staticContent>
        <remove fileExtension=".js" />
        <mimeMap fileExtension=".js" mimeType="text/javascript" />
    </staticContent>
    <urlCompression doStaticCompression="true" />
    <httpCompression
        directory="C:\inetpub\temp\IIS Temporary Compressed Files">
        <scheme name="gzip" dll="C:\Windows\system32\inetsrv\gzip.dll" />
        <staticTypes>
          <add mimeType="text/css" enabled="true" />
          <add mimeType="text/javascript" enabled="true" />
       </staticTypes>
    </httpCompression>
</system.webServer>
</configuration>

IIS expects this file within the root of your build folder.

This setup enables IIS to compress js and css files before dispatching them to the client. Note, we've only activated static compression, as our files are already compressed during the build process.

Remember to restart your IIS after modifying web.config.

Important Notes

Verify that your server supports compression and has this feature enabled. You might need to enable specific Windows Features; refer to this stackoverflow post for detailed guidance.
Ensure your static files include .gz files alongside the actual files.

Don't overlook testing your configuration using the browser's dev tools. As illustrated in the image, the Content Encoding should indicate gzip.

Conclusion

In my scenario, initially downloading 351kb of JavaScript, after optimization, it now occupies almost 37% of the original size: 155kb. Although compression ratios may fluctuate depending on the nature of your files, this usually translates to a substantial improvement.

Thinkpad L14 Fan Speed Configuration with Thinkfan

uguremirmustafa — Mon, 26 Jul 2021 14:37:52 +0000

I love Thinkpads. They are robust and durable. And no need to mention about their world class keyboards!

My newest Thinkpad comes with AMD Ryzen 4750u which is really powerful and absolutely perfect for web development purposes. With my i3 setup it works like a charm, but we need to configure it a bit for silence. Let's start!

Originally posted on my personal website.

1. Install the necessary package

I lately moved my development environment from Arch Linux to Ubuntu, so the following steps might differ in your distro.

sudo apt install thinkfan

2. Create the configuration file

After installing the package we need to create a config file in the following directory: /etc/thinkfan.conf

This file requires three main items:

The fan information
The temperature information
Speed level for temperature levels

In order to provide fan information, we write this line:

tp_fan /proc/acpi/ibm/fan

For the temperature information we should scan the sensors of the device.

find /sys/devices -type f -name 'temp*_input'

Running this comman should give you something like this but without hwmon keyword. Don't forget to add it in front of each line.

hwmon /sys/devices/platform/thinkpad_hwmon/hwmon/hwmon4/temp6_input
hwmon /sys/devices/platform/thinkpad_hwmon/hwmon/hwmon4/temp3_input
hwmon /sys/devices/platform/thinkpad_hwmon/hwmon/hwmon4/temp7_input
hwmon /sys/devices/platform/thinkpad_hwmon/hwmon/hwmon4/temp4_input
hwmon /sys/devices/platform/thinkpad_hwmon/hwmon/hwmon4/temp1_input
hwmon /sys/devices/platform/thinkpad_hwmon/hwmon/hwmon4/temp5_input
hwmon /sys/devices/pci0000:00/0000:00:18.3/hwmon/hwmon3/temp1_input
hwmon /sys/devices/pci0000:00/0000:00:18.3/hwmon/hwmon3/temp2_input
hwmon /sys/devices/pci0000:00/0000:00:02.1/0000:01:00.0/hwmon/hwmon2/temp3_input
hwmon /sys/devices/pci0000:00/0000:00:02.1/0000:01:00.0/hwmon/hwmon2/temp1_input
hwmon /sys/devices/pci0000:00/0000:00:02.1/0000:01:00.0/hwmon/hwmon2/temp2_input
hwmon /sys/devices/pci0000:00/0000:00:08.1/0000:06:00.0/hwmon/hwmon8/temp1_input
hwmon /sys/devices/virtual/thermal/thermal_zone0/hwmon5/temp1_input

After adding these lines to the configuration, we need to add our fan speed data for each temperature level. This is a sane configuration for daily usage but use at your own risk.

# speed level | start temp | end temp

(0, 0,  55)
(1, 48, 60)
(2, 50, 61)
(3, 52, 63)
(4, 56, 65)
(5, 59, 66)
(7, 63, 32767)

Now the config file is ready!

3. Enable acpi_fancontrol

We need to enable acpi_fancontrol on kernel module options! Add this line to /etc/modprobe.d/thinkpad_acpi.conf file:

options thinkpad_acpi fan_control=1

Activate kernel settings by running this:

sudo modprobe -r thinkpad_acpi && sudo modprobe thinkpad_acpi

4. Enable the thinkpan.service

In order to start the service any time you boot up your machine, we need to enable it!

sudo systemctl enable --now thinkfan.service

5. Done!

You can check if the service is running or not with this command:

sudo systemctl status thinkfan.service

I hope you find this tutorial useful! Have a nice day and hit me on Twitter.

Photo by m20 m20

Material UI Reusable Confirmation Dialog in React

uguremirmustafa — Tue, 13 Jul 2021 10:46:56 +0000

We are all familiar with those confirm/cancel dialog windows but have you ever tried implementing it in your React application?

Whenever your user tries to delete an item or perform a destructive action, it is a good practice to ask them if they are sure or not! Let's get started!

Are you sure?

The Problem

Whenever the user tries to perform a destructive action in the application, we need to interfere with the process and ask for confirmation! After getting the confirmation the process should continue. We need to ask custom questions that are related to the action also. By creating this kind of flow, we provide a better user experience.

Our Goal

There are tons of ways to create a confirmation dialog in a react application but we are after a specific user and developer experience.

Make the component reusable and follow dry code principles
Easily pass the custom messages to the dialog
Do it with Material UI and Zustand(Don't worry, it is a damn small library!)

1. Install dependencies

As we mentioned above, we will use Material UI and Zustand in this tutorial. Material UI is one of the most used UI libraries with a large component base. Zustand will be useful as a state management library. You can use Context API instead but Zustand seems cleaner for this project, in my humble opinion!



npm install @material-ui/core @material-ui/icons zustand

2. Create the component JSX

First things first, let's create the component skeleton!



// ConfirmDialog.jsx
// material ui
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Box,
  IconButton,
  Typography,
} from '@material-ui/core';
import { Close } from '@material-ui/icons';

const ConfirmDialog = () => {
  return (
    <Dialog open={true} maxWidth="sm" fullWidth>
      <DialogTitle>Confirm the action</DialogTitle>
      <Box position="absolute" top={0} right={0}>
        <IconButton>
          <Close />
        </IconButton>
      </Box>
      <DialogContent>
        <Typography>some message here</Typography>
      </DialogContent>
      <DialogActions>
        <Button color="primary" variant="contained">
          Cancel
        </Button>
        <Button color="secondary" variant="contained">
          Confirm
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default ConfirmDialog;

Now we can import the component into our application. You can put it at the root of your project, such as App.js. This will make the component reachable from all over your project. You can see your component rendered on the screen like this:

Most probably your colors will not be the same because of my material UI theme configuration but the functionality will be exactly the same.

Well, it looks fine but there is no functionality right now! The message is hard-coded also. Don't worry we will handle it in a second.

3. Create the state store with Zustand

We need to import the create method from Zustand first.



// ConfirmDialog.jsx
// ...
import create from 'zustand';
// ...

After the import, we can create our store with the necessary items.



// ConfirmDialog.jsx
// ...
const useConfirmDialogStore = create((set) => ({
  message: '',
  onSubmit: undefined,
  close: () => set({ onSubmit: undefined }),
}));
// ...

4. Use store data in the dialog JSX.

Now we have our store to store dialog content and its state(open or not). It is time to use it in the actual JSX.



const ConfirmDialog2 = () => {
   // destructure the store data and functions
  const { message, onSubmit, close } = useConfirmDialogStore();
  return (
     // if the onSubmit is undefined the dialog will be closed. 
     // close() function sets the onSubmit to undefined, 
     // so it will close the dialog, if we pass it to the onClose attribute.
    <Dialog open={Boolean(onSubmit)} onClose={close} maxWidth="sm" fullWidth> 
      <DialogTitle>Confirm the action</DialogTitle>
      <Box position="absolute" top={0} right={0}>
        <IconButton onClick={close}>
          <Close />
        </IconButton>
      </Box>
      <DialogContent>
        <Typography>{message}</Typography>
      </DialogContent>
      <DialogActions>
        <Button color="primary" variant="contained" onClick={close}>
          Cancel
        </Button>
        <Button
          color="secondary"
          variant="contained"
          onClick={() => {
            if (onSubmit) {
              onSubmit();
            }
            close();
          }}
        >
          Confirm
        </Button>
      </DialogActions>
    </Dialog>
  );
};

5. Create the utility function to use the store

We are almost done! We need to create the utility function to use our store and open the confirmation to ask the user before deleting some super important data :)



// ConfirmDialog.jsx
// ...
export const confirmDialog = (message, onSubmit) => {
  useConfirmDialogStore.setState({
    message,
    onSubmit,
  });
};
// ...

As you can see, we are exporting this function from the ConfirmDialog.jsx component so it will be available in the other parts of the application.

6. You are done, use it!

We have successfully created our reusable confirmation dialog. Let's use it in our application.

Let's say you have a button labeled as Delete All The Data. I bet you you want to warn the user before implementing this action!



// App.tsx
import { confirmDialog } from './ConfirmDialog';
// ...
<Button
  onClick={() => {
    confirmDialog('Do you really want to delete all the data?', () =>
      console.log('deleting all the data!')
    );
  }}
>
  Delete All The Data
</Button>;

Open your console and enjoy your coffee while deleting all the data after clicking the confirm button!

Conclusion

Providing information to the user about their actions in your application might be crucial. Asking for their confirmation with a dialog window is a good way to provide that information.

I hope you find this tutorial useful.

This implementation is a part of my Fullstack Jira-Clone with React, Hasura, Auth0, and Apollo. I will be sharing my challenges and the solutions to these challenges here while creating the actual project.

If you are interested in the whole project, you can check it here and see the live version here.

I am open to any suggestions and improvements. All kind of contribution is appreciated!

Cheers!

Storing State on Local Storage in a React Application

uguremirmustafa — Tue, 20 Apr 2021 10:13:02 +0000

Originally posted on my personal blog ➡️ devugur

Let's say we have a value kept in the state in a react application and we want to keep it there even if we refresh the page. The simplest solution is local storage of the browser!

import React, { useState, useEffect } from 'react';

export default function Name() {
  const [name, setName] = useState('');
  const handleChange = (e) => {
    setName(e.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} value={name} />
    </div>
  );
}

In the example code, we store the input value in the name variable and we change it by handleChange function. Whenever we refresh it will be gone! We can get the advantage of the useEffect hook and the localStorage of the browser here.

import React, { useState, useEffect } from 'react';

export default function Name() {
  const [name, setName] = useState('');
  const handleChange = (e) => {
    setName(e.target.value);
  };

  useEffect(() => {
    localStorage.setItem('name-state', JSON.stringify(name));
  },[name]);

  return (
    <div>
      <input type="text" onChange={handleChange} value={name} />
    </div>
  );
}

setItem method takes two parameters: key for the data and the data itself. Now the data is stored on local storage but if we refresh we wouldn't see the state updated with the local data. In order to achieve that we need to add one more useEffect hook to the mix.

import React, { useState, useEffect } from 'react';

export default function Name() {
  const [name, setName] = useState('');
  const handleChange = (e) => {
    setName(e.target.value);
  };
  useEffect(() => {
    const data = localStorage.getItem('name-state');
    if (data) {
      setName(JSON.parse(data));
    }
  }, []);
  useEffect(() => {
    localStorage.setItem('name-state', JSON.stringify(name));
  },[name]);

  return (
    <div>
      <input type="text" onChange={handleChange} value={name} />
    </div>
  );
}

Notice that we added the last useEffect hook before the previous one so that the local data is available to us before setting it again.

And that's it. Even if you refresh the browser, the state will be persisted.

If you liked the article and would like to support me, you can follow me on Twitter.

Adding twitter tags to your NextJS blog

uguremirmustafa — Wed, 31 Mar 2021 19:35:54 +0000

Images on your twitter posts will increase the interaction of your tweets, that's a fact. You like blogging on your brand new NextJS website and you would like to share it on twitter. But you realize that your blog url does not look like this card style:

In order to solve this problem you need to have twitter tags in the <head></head> of your page. So how do we manage this in NextJS ?

We can add <Head> tag to our component's return portion.

import Head from 'next/head';

export default function example() {
  return (
    <div>
      <Head>
        <title>My site title</title>
      </Head>
      <h2>My awesome content</h2>
    </div>
  );
}

Whatever we put inside the

tags will be available on the document's head section. So we can add our twitter tags here. But as a better option, we can use next-seo package to handle this problem.

npm i next-seo --save

Now let's create a component called Seo.js

// components/Seo.js
import { NextSeo } from 'next-seo';

export default function Seo({ post }) {
  const { title, excerpt, slug, coverImage } = post;
  return (
    <>
      <NextSeo
        title={title}
        description={excerpt}
        canonical={`https://myawesomewebsite.com/blog/${slug}`}
        openGraph={{
          type: 'website',
          url: 'https://myawesomewebsite.com',
          title: `${title} | originally posted on myawesomewebsite.com`,
          description: excerpt,
          locale: 'en_EN',
          images: [
            {
              url: coverImage,
              width: 800,
              height: 600,
              alt: `hero image for ${title}`,
            },
          ],
          site_name: 'myawesomewebsite.com',
        }}
        twitter={{
          handle: '@myawesometwittername',
          site: 'myawesomewebsite.com',
          cardType: 'summary',
        }}
      />
    </>
  );
}

After editing the fields with your own data you can import this component to your blog component. Notice that we are passing the data as a prop to the Seo.js component and dynamically rendering the meta data. This component can be very useful with dynamic routing in NextJS.

import Seo from '@components/Seo';

export default function example() {
  const post = {
    // ...
  };
  return (
    <div>
      <Seo post={post} />
      <h2>My awesome content</h2>
    </div>
  );
}

And that's it. You can check if your url is working as expected from this card validator.

I hope you find this tutorial helpful. You can find me on twitter where I share daily content related to web development and especially on NextJS.

What is core web vitals

uguremirmustafa — Wed, 31 Mar 2021 16:23:05 +0000

Originally posted on my personal blog

Web vitals is a guidance for developers to provide their users great web experience. What I mean by guidance is that the core rules for creating a better website or web application.

We all want our users to engage with our website. In order to achieve that we have to follow some rules. Let's check out what these rules are.

Largest Contentful Paint (LCP)

Largest contentful paint is the largest image or text block visible in the viewport. LCP is the measure of the render time of this content. According to the Google Core Web Vitals guidance, 2.5 seconds or less is a good time. Be sure that 75% of your users hit under this time when they load your site for the first time.

First Input Delay (FID)

This measure is about the time of interactivity. Whenever your website is loaded, your users should be able to click on a button or type something into input fields after less then 100ms. As we all know that, interactivity is one of the main bits of the modern web. So remember, your users want to click!

Cumulative Layout Shift (CLS)

I bet you have clicked on an advertisement unintentionally because the page layout has changed after a few seconds of the initial load. This is called cumulative layout shift. You want your website's layout is stable. The acceptable measure of CLS is less then 0.1 so be sure that your images have explicit width and height attributes.

Conclusion

These three measurements are crucial for user experience. And user experience matters when it comes to SEO and user engagement with your website. In coming articles, I will try to explain how to improve UX of your website with following core web vitals.

If you find this article helpful, please consider following me on twitter where I share daily content about web development. Have a nice day!

We have some issues!

uguremirmustafa — Wed, 10 Mar 2021 10:56:37 +0000

I bet you have interacted with the github as a developer. Most probably you have seen the different tabs on the repository page. You can see in the image those tabs. Today we will look into the issues tab and try to understand what it does.
If you open a repository in your github account and move to the issues tab you can see a page like this:
Issues page is a kind of commenting system on the repository. Let's say you had your first job and you work in a company with 10 people on a project. One of your colleagues developed an about page for the project and he/she made a typo on the page. Luckily you have realized it before delivering the project to the client. You can create a new issue for it and describe the problem by clicking the new issue button. You can give a title and add the description of the issue with the markdown editor. Let's say you think having a few more features on the application will be very beneficial to the user. You would ask for these features on the issues page. This kind of description will create a progress bar on the issue itself. Whenever somebody creates that feature and checks the checkbox, progress bar of the issue will reflect the progress.
You can assign somebody in the team for resolving the issue on the right panel by clicking the gear icon. You can also select labels for the issue to give some extra feedback to the project owner. You can select a label from the right panel again.
To sum up, github issues are great way to enhance and maintain the project. And it is also a great opportunity join open source community and help them in any way. It even might be a fix to small typo. 😄

Being in contact with the community is always a good idea and a great way to grow as a modern developer. You can follow me and ask me anything on twitter about web development, HTML, CSS and React. I hope this will help you for your next project!

Server-side Paginated React Table

uguremirmustafa — Sat, 06 Mar 2021 20:42:51 +0000

Today we will create server-side paginated table with react-table. In order to see the full code you can visit my github repo.

The technologies used for this project:

NextJS
MongoDB
React-Table
React-Query
Mongoose and mongoose-paginated-v2 plugin

And this is the finished product:

Let's have a look at the Table component.

// components/Table.js

import React from 'react';
import { useTable, usePagination } from 'react-table';

function Table({ setPerPage, setPage, columns, data, currentpage, perPage, totalPage }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    pageOptions,
    state: { pageIndex, pageSize },
  } = useTable(
    {
      columns,
      data,
      useControlledState: (state) => {
        return React.useMemo(
          () => ({
            ...state,
            pageIndex: currentpage,
          }),
          [state, currentpage]
        );
      },
      initialState: { pageIndex: currentpage }, // Pass our hoisted table state
      manualPagination: true,
      pageCount: totalPage,
    },
    usePagination
  );

  return (
    <>
      <table {...getTableProps()} className="table-fixed">
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.slice(0, 1).map((column) => (
                <th column.getHeaderProps()}>
                  {column.render('Header')}
                </th>
              ))}
              {headerGroup.headers.slice(1).map((column) => (
                <th
                  {...column.getHeaderProps()}
                >
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <td {...cell.getCellProps()}>
                      {cell.render('Cell')}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
}

export default Table;

Here we render the table itself. But where the data is coming from? The parent component uses a custom react-query hook to fetch the data from api routes of NextJS.

// pages/api/schools/index.js

import School from '@models/School';
import dbConnect from '@utils/dbConnect';

dbConnect();

export default async function (req, res) {
  switch (req.method) {
    case 'GET':
      await getSchools(req, res);
      break;

    default:
      res.status(400).json({ success: false });
      break;
  }
}
const getSchools = async (req, res) => {
  try {
    let { page, perPage } = req.query;
    console.log(page, perPage);
    const options = {
      page: parseInt(page),
      limit: parseInt(perPage),
    };
    const schools = await School.paginate({}, options);
    res.status(200).json({
      success: true,
      data: schools,
    });
  } catch (error) {
    res.status(400).json({ success: false });
  }
};

And custom hook for fetching data from the API Routes:

// utils/useSchools

const { useQuery } = require('react-query');
const axios = require('axios');

export default function useSchools(page, perPage) {
  return useQuery(
    ['schools', page, perPage],
    async () => {
      const res = await axios.get(`/api/schools?perPage=${perPage}&page=${page}`);
      return res.data;
    },
    { keepPreviousData: true }
  );
}

The last important part is the index.js page where we call the custom hook.

import React, { useState } from 'react';
import Table from '@components/Table/Table';
import useSchools from '@utils/useSchools';

export default function Home() {
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(10);
  const { data: schools, isLoading } = useSchools(page, perPage);
  const list = schools?.data.docs.map((i) => {
    return {
      col1: i.name,
      col2: i.il,
      col3: i.ilce,
      col4: i.kont,
    };
  });
  const data = React.useMemo(() => list, [schools]);
  const columns = React.useMemo(
    () => [
      {
        Header: 'okul adi',
        accessor: 'col1', // accessor is the "key" in the data
      },
      {
        Header: 'il',
        accessor: 'col2',
      },
      {
        Header: 'ilce',
        accessor: 'col3',
      },
      {
        Header: 'kontenjan',
        accessor: 'col4',
      },
    ],
    []
  );
  if (isLoading) return <div>loading...</div>;
  return (
    <div className="p-4 bg-white my-4 rounded shadow-xl grid">
      <Table
        data={data}
        columns={columns}
        setPage={setPage}
        setPerPage={setPerPage}
        currentpage={page}
        perPage={perPage}
        totalPage={schools?.data.totalPages}
      />
    </div>
  );
}

This is a bit long code to include all of it here. So you can check the rest of it from my github repo. Cheers!!

DEV Community: uguremirmustafa

Day 2 - Importing data and practicing queries

Generating some dummy data

Preparing docker container

Volume mapping in a nutshell:

Importing CSV

Using column order

Using a temp table

Practicing queries

End of Day 2

Day 1 - Learning postgresql in 30 days as a frontend dev

Installing postgresql on my machine

List running docker instances and see that our new container is there:

Connect to docker container and access to our database using psql.

Creating first table

Inserting and querying the data

Deleting data

GUI Database Client

End of Day 1

Gzip Compression and IIS Setup on Windows Server for React Projects

Configuring Webpack

web.config and IIS Setup

Important Notes

Conclusion

Thinkpad L14 Fan Speed Configuration with Thinkfan

1. Install the necessary package

2. Create the configuration file

3. Enable acpi_fancontrol

4. Enable the thinkpan.service

5. Done!

Material UI Reusable Confirmation Dialog in React

The Problem

Our Goal

1. Install dependencies

2. Create the component JSX

3. Create the state store with Zustand

4. Use store data in the dialog JSX.

5. Create the utility function to use the store

6. You are done, use it!

Conclusion

Storing State on Local Storage in a React Application

Adding twitter tags to your NextJS blog

What is core web vitals

Largest Contentful Paint (LCP)

First Input Delay (FID)

Cumulative Layout Shift (CLS)

Conclusion

We have some issues!

Server-side Paginated React Table

Connect to docker container and access to our database using `psql`.