Codeduthu

Fixing CORS Issue When Calling API in React Native

Pham Quyet Thang — Fri, 22 Dec 2023 00:00:00 GMT

Fixing CORS Issue When Calling API

Introduction:

Many developers face issues related to CORS. But what is CORS? CORS is a mechanism that allows various resources (JavaScript) on a web page to be requested from a domain different from the domain of that page. This is the CORS policy error that most developers encounter. When calling an API to a server without the Access-Control-Allow-Origin header or with an invalid value, this error occurs, and data cannot be retrieved from the API.

Installing rn-fetch-blob to Address the Issue

First, we need to install the rn-fetch-blob library. If using npm:

npm install --save rn-fetch-blob

using yarn

yarn add rn-fetch-blob

To use it on IOS, add the following to the Podfile:

pod 'rn-fetch-blob',
    :path => '../node_modules/rn-fetch-blob'

How it works:
Example of usage:

import RNFetchBlob from 'rn-fetch-blob';

export async function apiLogin({
  phone,
  password,
}: {
  phone: number | string;
  password: string;
}): Promise<any> {
  return RNFetchBlob.config({
    trusty: true,
  }).fetch(
    'POST',
    `${URl_API}/api/auth/login?phone=${phone}&password=${password}`,
  );
}

Now your API calls will work. In the example, I'm demonstrating an API login with parameters phone and password. The use of trusty: true in RNFetchBlob.config helps us resolve this issue.

Other Ways to Handle CORS Errors

A common misconception, especially for developers working with APIs from large companies with comprehensive documentation, is thinking that CORS is a frontend task. But in reality, CORS is entirely a backend task.

You can communicate with the backend to handle CORS.

You can change the project's port to match.

Both approaches are effective, but for standardization, it's best to consult the backend for the most accurate handling.

Conclusion

Using rn-fetch-blob is straightforward and easy, although it may not be the most optimal solution. Still, it can be a choice for you in cases where you face challenges, and the project needs to progress quickly without relying heavily on the backend.

I hope this article is helpful to you. Thank you for reading!

If you have any questions or comments, please leave them below. We can discuss this topic together.

React - Uploading Images and Videos in React Quill using Cloudinary

Pham Quyet Thang — Fri, 22 Dec 2023 00:00:00 GMT

Uploading Images and Videos in React Quill using Cloudinary

1.Introduction:

In the process of developing web applications or blogs, providing a rich text editor for users is a common requirement. This allows users to create, edit, and format their content flexibly and easily. One popular text editor in the programming community is React Quill, known for its high customization and easy integration into your React projects.

However, allowing users to upload and insert images or videos into the text editor is not a simple task. Especially when you need to store and manage thousands of multimedia files. The solution is to use a powerful cloud image storage service like Cloudinary. Cloudinary allows you to store, upload, and manage images and videos efficiently, enhancing the functionality and performance of your application.

In this article, we will learn how to integrate React Quill with the Cloudinary image storage service to address this complex issue. Together, we will build an editor that enables users to conveniently and quickly upload and insert images and videos.

React Quill: An open-source text editor that allows users to create and edit content with various formats.
Cloudinary: A powerful cloud storage service that supports easy management, uploading, and processing of images and videos.

2. Installing react-quill

First, we need to initialize a React project using Vite or create-react-app.

yarn create vite react-quill-upload --template react-ts

Install react-quill:

yarn add react-quill

Import react-quill component:

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function MyComponent() {
  const [value, setValue] = useState('');
  const reactQuillRef = useRef<ReactQuill>(null);

  return <ReactQuill ref={reactQuillRef} theme="snow" value={value} onChange={setValue} />;
}

To upload images in the quill editor, declare the image in the modules and formats section.

<ReactQuill
      ref={reactQuillRef}
      theme="snow"
      placeholder="Start writing..."
      modules={{
        toolbar: {
          container: [
            [{ header: "1" }, { header: "2" }, { font: [] }],
            [{ size: [] }],
            ["bold", "italic", "underline", "strike", "blockquote"],
            [
              { list: "ordered" },
              { list: "bullet" },
              { indent: "-1" },
              { indent: "+1" },
            ],
            ["link", "image", "video"],
            ["code-block"],
            ["clean"],
          ],
        },
        clipboard: {
          matchVisual: false,
        },
      }}
      formats={[
        "header",
        "font",
        "size",
        "bold",
        "italic",
        "underline",
        "strike",
        "blockquote",
        "list",
        "bullet",
        "indent",
        "link",
        "image",
        "video",
        "code-block",
      ]}
      value={value}
      onChange={onChange}
    />

Now you will see the upload image icon on the toolbar of react-quill. Import and print the entire text content, and you will see that by default, react-quill saves your image as base-64:

=> If using this default approach, we can store the image in the database as base-64. In the demo, I only use small-sized images. If the image size is larger, the base-64 string will be larger, consuming more memory.

3. Handle upload image

To avoid storing images in the text content as base-64, we need to integrate a cloud service and only store the image's link. Next, I will guide you on handling the upload action of react-quill and using Cloudinary to store it (you can do the same with any other cloud, e.g., Firebase Storage, ...).
Add the imageHandler

 <ReactQuill
      ref={reactQuillRef}
      theme="snow"
      placeholder="Start writing..."
      modules={{
        toolbar: {
          container: [
             ...
            ["link", "image", "video"],
            ["code-block"],
            ["clean"],
          ],
          handlers: {
            image: imageHandler,   // <- 
          },
        },
        clipboard: {
          matchVisual: false,
        },
      }}
      ...
    />

  const imageHandler = useCallback(() => {
    const input = document.createElement("input");
    input.setAttribute("type", "file");
    input.setAttribute("accept", "image/*");
    input.click();
    input.onchange = async () => {
      if (input !== null && input.files !== null) {
        const file = input.files[0];
        console.log(file)
      }
    };
  }, []);

Explanation: In the code above, I added a function to handle the image container of react-quill. In the imageHandler function, I create an input file element and trigger a click() to open the file import window. You can extend this part to open the cloudinary upload widget ( read more ). Using the widget is more secure and efficient because we can reuse previously uploaded images. If you have time and need, you should use that method!

Function to upload the image to Cloudinary: There are many ways to upload to Cloudinary, but I choose the simplest method of calling the API:

const uploadToCloudinary = async (file: File): Promise<string> => {
  const formData = new FormData();
  formData.append("file", file);
  formData.append(
    "upload_preset",
    import.meta.env.VITE_CLOUDINARY_PRESET
  );
  const res = await fetch(
    `https://api.cloudinary.com/v1_1/${
      import.meta.env.VITE_CLOUDINARY_NAME
    }/upload`,
    { method: "POST", body: formData }
  );
  const data = await res.json();
  const url = data.url;

  return url
}

Explanation: To upload an image to Cloudinary via the API, you need the Product Name and upload_preset, which you can obtain from the cloudinary settings page (set the upload_preset mode to Unsigned for simplicity; for enhanced security, you can use other cloudinary upload methods).

Insert the image URL returned from Cloudinary into the text content.

  const imageHandler = useCallback(() => {
    const input = document.createElement("input");
    input.setAttribute("type", "file");
    input.setAttribute("accept", "image/*");
    input.click();
    input.onchange = async () => {
      if (input !== null && input.files !== null) {
        const file = input.files[0];
        const url = await uploadToCloudinary(file);
        const quill = reactQuillRef.current;
        if (quill) {
          const range = quill.getEditorSelection();
          range && quill.getEditor().insertEmbed(range.index, "image", url);
        }
      }
    };
  }, []);

Explanation: After obtaining the URL from uploading to Cloudinary, we need to assign it to the correct position of the corresponding img tag in the text content:

const range = quill.getEditorSelection();
range && quill.getEditor().insertEmbed(range.index, "image", url);

This part is to determine the position of the img tag and assign it with the URL returned from Cloudinary (before this, use useRef to reference the ReactQuill component).

And here is the result, now the text content only contains the link of the image instead of base-64:

You can find the entire source code at: https://github.com/phamquyetthang/react-quill-image-upload

4. Conclusion

This is my simple guide on handling image uploads in react-quill; you can do something similar with video uploads!

You can view the entire code of this tutorial on my GitHub: https://github.com/phamquyetthang/react-quill-image-upload

I hope this article is helpful to you. Thank you for reading!

If you have any questions or comments, please leave them below.

Securing Swagger Documentation with express-basic-auth in Nodejs - Nestjs | Code đủ thứ

Pham Quyet Thang — Thu, 28 Dec 2023 00:00:00 GMT

import { Image } from 'astro:assets'; import basicAuth from './basic-auth-1.png';

Swagger is a powerful tool for creating and managing API documentation. However, securing Swagger documents is crucial to ensure that sensitive information is not exposed. In this article, we will explore how to use the express-basic-auth library to protect Swagger documentation pages in JavaScript and TypeScript projects. We will focus on two cases: a regular JavaScript/TypeScript project and a NestJS project with @nestjs/swagger.

After implementation, a user/password input form will appear when accessing the document page, and the correct credentials must be entered to view the document: <Image src={basicAuth} alt="Basic auth" style={{height: 300}} height={300} />

1. Install the express-basic-auth library

First, we need to install the express-basic-auth library. For regular JavaScript/TypeScript projects, you can run the following command:

npm install express-basic-auth

If you are using TypeScript, add types for express-basic-auth:

npm install --save-dev @types/express-basic-auth

2. Secure Swagger Document Page in JavaScript/TypeScript Projects

JavaScript

// app.js
const express = require("express");
const basicAuth = require("express-basic-auth");
const swaggerUi = require("swagger-ui-express");
const swaggerDocument = require("./swagger.json");

const app = express();

// Secure Swagger page with express-basic-auth
const users = { admin: "password123" };
app.use(
  "/api-docs",
  basicAuth({ users, challenge: true }),
  swaggerUi.serve,
  swaggerUi.setup(swaggerDocument)
);

// Other routes and middleware of the application
// ...

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

TypeScript

// app.ts
import express from "express";
import basicAuth from "express-basic-auth";
import swaggerUi from "swagger-ui-express";
import swaggerDocument from "./swagger.json";

const app = express();

// Secure Swagger page with express-basic-auth
const users = { admin: "password123" };
app.use(
  "/api-docs",
  basicAuth({ users, challenge: true }),
  swaggerUi.serve,
  swaggerUi.setup(swaggerDocument)
);

// Other routes and middleware of the application
// ...

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

`challenge: true` You need to pass this parameter to express-basic-auth to display the login prompt.

Usersname is admin
password is password123

3. Secure Swagger Document Page in NestJS Project

For NestJS projects, we can use express-basic-auth in the main.ts file of the application.

// main.ts
import { NestFactory } from "@nestjs/core";
import { SwaggerModule, DocumentBuilder } from "@nestjs/swagger";
import * as basicAuth from "express-basic-auth";
import { AppModule } from "./app.module";

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Secure Swagger page with express-basic-auth
  const users = { admin: "password123" };
  app.use("/api-docs", basicAuth({ users, challenge: true }));

  const options = new DocumentBuilder()
    .setTitle("Your API")
    .setDescription("API documentation")
    .setVersion("1.0")
    .build();
  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup("api-docs", app, document);

  const PORT = process.env.PORT || 3000;
  await app.listen(PORT);
}
bootstrap();

Conclusion

That's how you can secure the Swagger document page in JavaScript and TypeScript projects using the express-basic-auth library. With this article, you can apply a similar approach in your projects to ensure that your API documentation is securely protected.

Guide to Installing Node.js via NVM on Windows, Linux, and Mac

Pham Quyet Thang — Sat, 13 Jan 2024 00:00:00 GMT

Node.js is an open-source platform used to build web applications, servers, and real-time apps. It is written in JavaScript, the programming language primarily used in web applications.

NVM stands for Node.js Version Manager, a tool that helps you manage multiple Node.js versions on the same system. This is useful when you need different Node.js versions for different projects.

In this article, we will walk through installing Node.js via NVM on every environment: Windows, Linux, and Mac.

Install NVM on Windows

You can install nvm on Windows through choco (learn about choco if you have not used it before). Open an elevated PowerShell window, then run:

# Install Chocolatey
choco install nvm

# Restart PowerShell
Restart-Powershell

After restarting PowerShell, verify that NVM installed successfully with:

nvm --version

If the command returns a version number, you are all set.

Install NVM on Linux

To install NVM on Linux, open a terminal and run:

# Install curl if it is missing
sudo apt install curl

# Install NVM via curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

After installation, check that NVM is available:

nvm --version

If the command returns a version number, the installation worked.

Install NVM on Mac

To install NVM on macOS, open a terminal and run:

# Install Homebrew if you do not have it
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

# Install NVM
brew install nvm

After installation, verify NVM with:

nvm --version

If you see a version number, the setup is complete.

Install Node.js via NVM

Install Node.js through NVM with:

nvm install [version]

For example, to install Node.js 16.13.0:

nvm install 16.13.0

After installation, activate that version:

nvm use [version]

For example, to switch to Node.js 16.13.0:

nvm use 16.13.0

Conclusion

NVM is a handy tool that lets you manage multiple Node.js versions on the same system. With it, you can install, switch, and manage any version you need.

Additional NVM commands

Beyond the basic commands above, NVM offers extra commands that make version management easier. Common ones include:

nvm list to show every Node.js version currently installed.
nvm ls-remote to list every Node.js version available for installation.
nvm uninstall [version] to remove a Node.js version.
nvm alias [alias] [version] to create an alias for a Node.js version.

You can learn more on the official NVM repository (https://github.com/nvm-sh/nvm).

How to modify library in node module and save it forever

Pham Quyet Thang — Thu, 18 Jan 2024 00:00:00 GMT

Ways to Fix Errors in node_modules and Preserve Edits (Using patch-package, ...)

1. When Fixing a Library from npm:

For JavaScript enthusiasts, installing third-party libraries using the command npm install <package name> (or yarn) is a familiar routine.

After installation, these libraries reside in the node_modules directory, and we can easily use them.

What's inside the node_module is usually not something we need to know in detail. The node_module can sometimes be an untouchable area.

Deleting the node_module and reinstalling is a spiritual solution many have used in desperation to fix bugs.

Issues arise when we encounter a problem with a library but don't want to find an alternative.

So, how can we fix libraries ourselves without losing changes if we delete the node_module?

Here are some approaches:

2. Ways to Fix Libraries in node_modules

Approach 1: Fork the Package's Repo

You can go to the source code of the package, fork it to your own Git repository, make changes, and then edit it.

Afterward, declare it in your package.json like this: For example:

Replace the package version with the path to your repository in the format git+{repo}.

You may encounter some issues if you try to modify mega-packages like those from Facebook. Some packages are subdirectories of others.

You can go to https://gitpkg.vercel.app/, paste the link directly to the directory containing that package. The website will render a link and yarn (npm) command for you.

(That's the theory, but whether it runs or not... To be sure, you can try approach 2.)

Approach 2: Use patch-package

This approach is more direct than the first one.

Boldly find the code in your node_module that you want to edit and bravely make the changes.

Then run the command:

npx patch-package <package name>

patch-package will create a patches folder, declaring your changes.

You can push this folder to Git and run the npx patch-package command to reapply your changes.

To avoid one step each time you reinstall the project, you can add the line "postinstall": "npx patch-package" to the scripts like this to let node_module automatically render your changes every time you reinstall.

3. Demo:

I have a small demo.

It involves changing the default logo of the metro in REACT-NATIVE.

After some investigation, I found out it was written in a file named TerminalReporter.js in /node_modules/metro/src/lib.

I thought there would be some complicated algorithms to print it out, like the C++ days at school, but no, it's just an array containing each line of #### :)))))

So, I just changed it.

From:

To:

(I did it during the deadline days, too busy, so I decided to spend a day messing around to relieve stress after finishing.)

20 SQL Interview Questions – Senior Level Part 1 (Questions 1 through 5)

Pham Quyet Thang — Tue, 23 Jan 2024 00:00:00 GMT

1. What are window functions in SQL and how are they used?

Window functions operate over a “window” of rows related to the current row, typically defined with an OVER clause. They allow you to perform calculations such as running totals, rankings, and moving averages without collapsing rows the way aggregate queries do.

Basic syntax

SELECT
  column1,
  column2,
  window_function(column3)
    OVER (PARTITION BY partition_column ORDER BY order_column)
FROM table_name;

column1, column2: ordinary columns returned in the result set.

window_function(column3): the function applied over the window.

PARTITION BY: splits the dataset into independent partitions (optional).

ORDER BY: defines ordering inside each partition (optional).

Example:

-- Running sum of salary per department
SELECT
  employee_id,
  department_id,
  salary,
  SUM(salary) OVER (
    PARTITION BY department_id
    ORDER BY employee_id
  ) AS cumulative_salary
FROM employees;

Popular window functions include ROW_NUMBER(), RANK(), DENSE_RANK(), SUM(), AVG(), MIN(), and MAX(). They are invaluable whenever you need to compare each row against its peers without losing detail.

2. Explain database sharding

Database sharding splits a large dataset into smaller, independent chunks called shards. Each shard holds a subset of the data—often determined by a key range or hashing strategy—and can be hosted separately. Sharding improves scalability and performance by distributing load across multiple nodes.

Key traits

Data partitioning
- Tables are divided into shards, each storing a specific slice of the data (for example, by customer region or primary-key range).
Workload distribution
- Each shard handles reads and writes for its own data range, and some deployments dedicate shards to read or write workloads.
Scalability
- Instead of scaling a single monolithic database, you add more shards to handle growth.
Performance
- Queries touch less data per shard, so they complete faster when routed intelligently.
Distributed management
- Operating multiple shards requires coordination, metadata tracking, and careful failover planning.

Challenges and considerations

Data synchronization: ensure consistency across shards when cross-shard operations occur.
Shard key selection: choose a partitioning strategy that avoids hotspots (one shard receiving disproportionate traffic).
Metadata management: keep reliable metadata about shard locations, ranges, and status.

Sharding is complex and best reserved for systems that truly need horizontal scaling.

3. How do you design an effective database?

Designing a solid database schema demands a deep understanding of application requirements and data usage patterns. Core steps include:

1. Gather application requirements

Understand entities, workflows, and how data is accessed to capture the right relationships.

2. Normalize data

Apply normalization rules to reduce redundancy and keep data consistent.

3. Define primary and foreign keys

Assign primary keys for uniqueness and foreign keys to model relationships.

4. Choose appropriate data types

Pick data types that match the value range and precision you need.

5. Classify data

Organize data into tables based on behavior and usage to keep schemas coherent.

6. Design for performance

Anticipate frequent queries and add supporting indexes or structures ahead of time.

7. Consider partitioning and sharding (when needed)

Use partitioning or sharding to keep very large tables performant and scalable.

8. Plan data synchronization

Define how data stays consistent across tables, services, or replicas.

9. Add constraints

Enforce integrity with constraints such as foreign keys, unique indexes, and checks.

10. Test and optimize

Benchmark and profile the schema under realistic workloads to uncover bottlenecks.

11. Maintain and iterate

Establish maintenance routines to evolve the schema as requirements change.

Effective design is iterative—keep measuring, refining, and validating against real-world use.

4. Differentiate OLAP and OLTP databases

OLAP (Online Analytical Processing) and OLTP (Online Transaction Processing) systems target different workloads.

OLAP

Purpose: supports complex analysis, multidimensional reporting, and aggregated insights.
Query style: heavy, computation-intensive queries over large datasets.
Data model: multidimensional structures with historical data and precomputed metrics.
Users: managers, analysts, and decision-makers who need big-picture visibility.

OLTP

Purpose: handles day-to-day business transactions (insert, update, delete).
Query style: short, simple, highly concurrent operations.
Data model: row-oriented schemas optimized for strict consistency and fast commits; typically stores only current transactional data.
Users: operational staff and applications running core business processes.

Summary

OLAP focuses on analytics; OLTP focuses on transactional workloads.
OLAP queries are complex and scan lots of data; OLTP queries are simple and frequent.
OLAP uses multidimensional storage; OLTP uses normalized row-oriented tables.
OLAP serves leadership insights; OLTP powers daily operations.

5. How do you optimize a query execution plan?

Improving a query plan centers on helping the optimizer make better choices and reducing the data it must process. Techniques include:

Use indexes wisely: index columns involved in WHERE, JOIN, and ORDER BY clauses to avoid full-table scans.
Keep statistics current: up-to-date table and index statistics let the optimizer estimate cardinality accurately.
Avoid SELECT *: return only the columns you need to cut down on I/O and network transfer.
Choose joins carefully: pick the right join type (INNER, LEFT, etc.) to limit intermediate row counts.
Order filters strategically: put the most selective predicates first when possible to prune rows early.
Limit result size: use LIMIT (or database-specific equivalents) when you only need a subset.
Partition large tables: partitioning reduces the data scanned for queries that target specific ranges.
Skip functions in WHERE: wrapping indexed columns in functions can disable index usage; rewrite predicates when you can.
Refresh database statistics: periodically regenerate statistics so the optimizer reflects real data distribution.
Leverage tuning tools: use your database’s explain/analyze, profiling, or advisor tools to spot bottlenecks.
Inspect execution plans: review generated plans to find unnecessary scans, sorts, or joins and adjust queries or schema accordingly.
Consider denormalization: for read-heavy workloads, denormalizing select tables can reduce joins and improve speed.

Always test and measure—optimizations depend on schema design, workload patterns, and the database engine in use.

20 SQL Interview Questions – Intern Level Part 4 (Questions 16 through 20)

Pham Quyet Thang — Tue, 23 Jan 2024 00:00:00 GMT

16. Describe the difference between CHAR and VARCHAR data types

CHAR and VARCHAR both store character strings but manage storage differently.

CHAR (Fixed-length)

Storage: CHAR(n) uses a fixed length. Every value occupies n characters, padding with spaces if necessary.
Example: With CHAR(5), storing ABC takes all five slots (ABC ).
Use cases: Ideal when data length is predictable and consistent.

VARCHAR (Variable-length)

Storage: VARCHAR(n) uses only as much space as the actual string plus some overhead; no extra padding.
Example: With VARCHAR(5), storing ABC uses only three characters.
Use cases: Preferred when data length varies and storage efficiency matters.

Choosing between CHAR and VARCHAR

Use CHAR for fixed-length data that benefits from uniform storage.
Use VARCHAR for variable-length data to conserve space.
In most cases, VARCHAR is favored due to better storage utilization.

17. What is an INDEX and why is it important?

An INDEX is a specialized data structure that speeds up data retrieval from a table. It helps the database locate rows faster, lowering query complexity and improving performance.

Why indexes matter

Faster lookups: An index creates an ordered structure so the database can quickly find rows based on indexed column values.
Lower query cost: Searches or sorts on indexed columns avoid scanning the entire table.
Better sorting and joins: Indexes make ordering and join operations more efficient.
Optimized WHERE clauses: Indexed columns significantly speed up filtering conditions.

Usage tips

Create indexes with CREATE INDEX on columns frequently used in WHERE clauses, joins, or ORDER BY.
Avoid over-indexing; too many indexes increase storage requirements and slow down INSERT/UPDATE/DELETE operations.
Choose indexes strategically to balance read performance with write overhead.

18. How do you insert a new record into a table?

Use the INSERT INTO statement to add a new row:

INSERT INTO table_name (column1, column2, column3, ...)
VALUES (value1, value2, value3, ...);

table_name: the table receiving the new row.

column1, column2, ...: columns to populate.

value1, value2, ...: the values to insert.

Example:

INSERT INTO employees (employee_id, employee_name, department_id, salary)
VALUES (101, 'John Doe', 3, 50000);

This inserts a full record into employees. If a column is auto-incremented, omit it:

INSERT INTO employees (employee_name, department_id, salary)
VALUES ('Jane Smith', 2, 60000);

Here the database generates employee_id automatically.

19. Explain the purpose of the LIMIT clause

LIMIT restricts how many rows a query returns. It is useful when you only need a subset of results, which reduces memory usage and speeds up responses.

Syntax

SELECT column1, column2, ...
FROM table_name
WHERE condition
LIMIT row_count;

SELECT: columns to return.

FROM: source table.

WHERE (optional): filter condition.

LIMIT: maximum number of rows to retrieve.

Example:

-- Fetch the top 5 highest-paid employees
SELECT employee_id, employee_name, salary
FROM employees
ORDER BY salary DESC
LIMIT 5;

This query returns only five rows, ordered by salary from highest to lowest.

20. How do you update data in a table?

Use the UPDATE statement to modify existing rows:

UPDATE table_name
SET column1 = value1, column2 = value2, ...
WHERE condition;

table_name: table to update.

SET: columns and new values.

WHERE: condition that selects which rows to change.

Example:

-- Update the salary of employee 101
UPDATE employees
SET salary = 55000
WHERE employee_id = 101;

Always include a WHERE clause to avoid updating every row accidentally. Ensure new values match the columns’ data types and constraints.

20 SQL Interview Questions – Intern Level Part 1 (Questions 1 through 5)

Pham Quyet Thang — Tue, 23 Jan 2024 00:00:00 GMT

1. What is SQL and why is it important?

What is SQL?

SQL is a database query language used to interact with database management systems.

Why does SQL matter?

SQL is essential because it lets you query, update, and manage data in relational databases.

What is SQL used for?

SQL is used to query data, update data, manage databases, and perform other data-related operations.

Why is SQL important in programming?

SQL provides a standardized, powerful way to manipulate data in relational database systems, helping keep data consistent and secure.

2. Differentiate SQL and MySQL

SQL (Structured Query Language) is a standard query language used to interact with database management systems (DBMS). MySQL, meanwhile, is an open-source relational DBMS that relies on SQL as its query language.

Key differences between SQL and MySQL:

SQL:

A standardized language for database queries.
Not a specific database engine; it can be used with many DBMS implementations.

MySQL:

An open-source relational DBMS.
Uses SQL as its query language for working with data.
Developed and maintained by Oracle Corporation.

In short, SQL is the general-purpose language for interacting with databases, while MySQL is a specific database system that uses SQL.

3. Explain the basic structure of an SQL query

A basic SQL query usually follows these clauses:

SELECT:

Choose the columns you want to retrieve. Use * to select every column.

SELECT column1, column2 FROM table_name;

FROM:

Specify the table that holds the data.

SELECT column1, column2 FROM employees;

WHERE:

Filter the data; only rows matching the condition are returned.

SELECT column1, column2 FROM employees WHERE department = 'IT';

GROUP BY:

Group rows based on one or more columns.

SELECT department, COUNT(*) FROM employees GROUP BY department;

HAVING:

Filter groups after GROUP BY; only groups that satisfy the condition remain.

SELECT department, COUNT(*) FROM employees GROUP BY department HAVING COUNT(*) > 5;

ORDER BY:

Sort the result set by one or more columns.

SELECT column1, column2 FROM employees ORDER BY column1 ASC;

This is just a basic structure; you can extend or adjust the query depending on your needs.

4. List the types of SQL commands

DQL (Data Query Language):

SELECT: Query data from the database.

DML (Data Manipulation Language):

INSERT: Add new data into a table.
UPDATE: Modify existing data in a table.
DELETE: Remove data from a table.

DDL (Data Definition Language):

CREATE: Create databases, tables, indexes, or other objects.
ALTER: Modify database, table, or other object structures.
DROP: Delete databases, tables, indexes, or other objects.

DCL (Data Control Language):

GRANT: Give permissions to access database objects.
REVOKE: Remove previously granted permissions.

TCL (Transaction Control Language):

COMMIT: Persist changes made in a transaction.
ROLLBACK: Undo changes made in a transaction.
SAVEPOINT: Mark a transaction point you can roll back to later.

Each command category serves a specific purpose: DQL for querying, DML for modifying data, DDL for managing structure, DCL for access control, and TCL for transaction control.

5. Define the SELECT statement and how to use it

Definition

The SELECT statement retrieves data from one or more tables in a database. It is a DQL (Data Query Language) command that lets you specify which columns to fetch and the conditions for returning data.

Usage

Basic syntax:

SELECT column1, column2, ...
FROM table_name
WHERE condition;

SELECT: lists the columns to retrieve.
FROM: specifies the table containing the data.
WHERE (optional): filters the rows returned.

Examples:

-- Retrieve every column from the "employees" table
SELECT * FROM employees;

-- Retrieve specific columns from the "products" table
SELECT product_name, price FROM products WHERE category = 'Electronics';

The SELECT statement is fundamental for exploring and analyzing SQL data, and you can customize it for a wide range of query scenarios.

20 SQL Interview Questions – Intern Level Part 3 (Questions 11 through 15)

Pham Quyet Thang — Tue, 23 Jan 2024 00:00:00 GMT

11. Differentiate INNER JOIN and OUTER JOIN

INNER JOIN and OUTER JOIN are distinct join types with different behaviors:

INNER JOIN

Key trait: Returns rows only when the join condition matches in both tables.
Result: Contains rows that have matching values in both tables.
Syntax: SELECT ... FROM table1 INNER JOIN table2 ON condition;

OUTER JOIN (LEFT, RIGHT, FULL)

Key trait: Returns rows from at least one table even if the join condition fails.
Result types:
- LEFT JOIN (or LEFT OUTER JOIN): All rows from the left table plus matching rows from the right table.
- RIGHT JOIN (or RIGHT OUTER JOIN): All rows from the right table plus matching rows from the left table.
- FULL JOIN (or FULL OUTER JOIN): Every row from both tables, whether or not there is a match.
Syntax: SELECT ... FROM table1 LEFT|RIGHT|FULL JOIN table2 ON condition;

Example:

-- INNER JOIN
SELECT e.employee_id, e.employee_name, d.department_name
FROM employees e
INNER JOIN departments d ON e.department_id = d.department_id;

-- LEFT JOIN
SELECT c.customer_id, c.customer_name, o.order_id
FROM customers c
LEFT JOIN orders o ON c.customer_id = o.customer_id;

The INNER JOIN returns rows only where both tables have matching departments. The LEFT JOIN returns all customers, plus their orders when they exist.

12. How is DISTINCT used?

DISTINCT removes duplicate rows from query results so only unique values appear in the selected columns.

Syntax

SELECT DISTINCT column1, column2, ...
FROM table_name
WHERE condition;

SELECT DISTINCT: chooses the columns to return unique values for.

FROM: identifies the source table.

WHERE (optional): filters rows before deduplication.

Example:

-- Retrieve unique departments
SELECT DISTINCT department
FROM employees;

This query lists every department exactly once, eliminating duplicates.

13. Explain database normalization

Normalization is the process of structuring a database to reduce data redundancy and improve data integrity. It helps maintain consistent, efficient data storage.

Common normal forms include First Normal Form (1NF), Second Normal Form (2NF), Third Normal Form (3NF), Boyce-Codd Normal Form (BCNF), Fourth Normal Form (4NF), and Fifth Normal Form (5NF).

Key normal forms

1NF: Each cell holds a single value, and column values share the same data type.
2NF: The table is in 1NF, and every non-key column depends fully on the entire primary key.
3NF: The table is in 2NF, and non-key columns do not depend on other non-key columns (no transitive dependency).
BCNF: A stronger version of 3NF ensuring every determinant is a candidate key.

Benefits

Less redundancy: Store each piece of data once, minimizing duplicates and saving space.
Consistency: Well-structured tables reduce the risk of inconsistent data.
Better performance: Properly normalized schemas can improve query efficiency.

Over-normalizing may introduce too many joins and hurt performance, so balance normalization with practical requirements.

14. What is a PRIMARY KEY?

In a database table, a PRIMARY KEY is a column or set of columns whose values uniquely identify each row. It enforces uniqueness and ensures every record is distinguishable.

Characteristics

Unique: No two rows share the same primary key value.
Not null: Primary key columns cannot contain NULL.
Identifier: Serves as the definitive way to reference each record.

Syntax

CREATE TABLE table_name (
    column1 datatype PRIMARY KEY,
    column2 datatype,
    ...
);

For composite keys:

CREATE TABLE table_name (
    column1 datatype,
    column2 datatype,
    ...
    PRIMARY KEY (column1, column2)
);

Example:

CREATE TABLE employees (
    employee_id INT PRIMARY KEY,
    employee_name VARCHAR(50),
    department_id INT
);

employee_id uniquely identifies each row in employees.

15. What is a FOREIGN KEY and how is it used?

A FOREIGN KEY is a column (or set of columns) in one table that references a primary key or unique key in another table. It defines relationships between tables and enforces referential integrity.

Key roles

Establish relationships: Links rows in the child table to rows in the parent table.
Preserve integrity: Prevents orphaned records by requiring referenced values to exist in the parent table.

Syntax

CREATE TABLE child_table (
    column1 datatype,
    foreign_key_column datatype,
    FOREIGN KEY (foreign_key_column) REFERENCES parent_table(parent_key_column)
);

foreign_key_column: column in the child table that stores the reference.

parent_table: table that owns the referenced primary key.

parent_key_column: primary key column in the parent table.

Example:

CREATE TABLE departments (
    department_id INT PRIMARY KEY,
    department_name VARCHAR(50)
);

CREATE TABLE employees (
    employee_id INT PRIMARY KEY,
    employee_name VARCHAR(50),
    department_id INT,
    FOREIGN KEY (department_id) REFERENCES departments(department_id)
);

Here, department_id in employees references department_id in departments, linking each employee to a department and enforcing valid relationships.

20 SQL Interview Questions – Intern Level Part 2 (Questions 6 through 10)

Pham Quyet Thang — Tue, 23 Jan 2024 00:00:00 GMT

6. How do you retrieve every column from a table named "employees"?

Use the SELECT statement with the wildcard * to fetch all columns:

SELECT *
FROM employees;

Here the asterisk acts as a wildcard, so the query returns every column for each row in the employees table.

7. Explain the WHERE clause in SQL

Definition

The WHERE clause filters query results using one or more conditions. It restricts the returned dataset to only the rows that satisfy the specified criteria.

Usage

Basic syntax:

SELECT column1, column2, ...
FROM table_name
WHERE condition;

SELECT: specifies the columns to retrieve.

FROM: identifies the table containing the data.

WHERE: applies the filtering condition.

Example:

-- Fetch all employees in the IT department
SELECT *
FROM employees
WHERE department = 'IT';

This query returns only the rows where the department column equals IT. The WHERE clause is essential for narrowing down results to the records that matter.

8. What is the purpose of the ORDER BY clause?

ORDER BY sorts query results based on the values of one or more columns, either ascending (ASC) or descending (DESC).

Usage

SELECT column1, column2, ...
FROM table_name
ORDER BY column1 [ASC|DESC], column2 [ASC|DESC], ...;

SELECT: identifies the columns to return.

FROM: defines the source table.

ORDER BY: lists the columns used for sorting.

Example:

-- Show all employees, sorted alphabetically by name
SELECT *
FROM employees
ORDER BY employee_name ASC;

The result set is sorted by employee_name in ascending order (A–Z). Use ORDER BY when you need predictable, readable output.

9. Describe the GROUP BY clause and what it does

GROUP BY groups rows that share the same values in specified columns, which allows you to run aggregate functions such as SUM, AVG, COUNT, MAX, and MIN on each group.

Usage

SELECT column1, aggregate_function(column2), ...
FROM table_name
GROUP BY column1, ...;

SELECT: chooses the columns and aggregates to return.

FROM: names the table source.

GROUP BY: lists the columns used for grouping.

Example:

-- Total number of products sold in each category
SELECT category, SUM(quantity_sold) AS total_sold
FROM sales
GROUP BY category;

The query groups sales by category and calculates the total quantity sold for each category. GROUP BY helps you analyze distributions and summaries across segments of your data.

10. What is a JOIN in SQL and how does it work?

Definition

A JOIN combines data from two or more tables based on a related column. When your data is split across multiple tables, JOIN pulls matching rows together in a unified result set.

Syntax

SELECT column1, column2, ...
FROM table1
JOIN table2 ON join_condition;

SELECT: lists the columns to return from the join.

FROM: specifies the primary table.

JOIN: identifies the table to combine with the primary table.

ON: defines the matching condition between the two tables.

Example:

-- Combine employee data with department names
SELECT employees.employee_id,
       employees.employee_name,
       departments.department_name
FROM employees
JOIN departments ON employees.department_id = departments.department_id;

This query joins employees and departments using the shared department_id. The output includes employee details along with the name of their department.

Common JOIN types include INNER JOIN, LEFT JOIN, RIGHT JOIN, and FULL JOIN, each suited to different data-combining scenarios.

Build a cross platform desktop app with electron and react typescript, tailwind css

Pham Quyet Thang — Tue, 21 May 2024 00:00:00 GMT

Hello everyone, I just released the first version of Offline Dev Tools - A small desktop application built with electron, react typescript, tailwindcss, shadcn/ui, and some other tools.

It provides some useful offline tools such as data generation, data transformation, base64 encoding/decoding, time zone comparison, ...

The software is inspired by DevToys and other libraries like https://transform.tools/, faker-js. I designed and built it myself in a few weeks. There are still many features I want to improve and add to the software in the future.

Regarding the application I built, you can view it or download and use it on Linux, Windows, or macOS.

https://github.com/phamquyetthang/offline-dev-tools

</div>

Electron-forge vs electron-vite

When starting to build and explore electron, I initialized the project with electron-vite because I was familiar with vite and react recently, And it really did a great job when I didn't spend much time to start the project, integrate tailwindcss and shadcn/ui into the project. Everything you need is here: https://electron-vite.org/guide/

I have completed about 30% of the features in my software using electron-vite, until I encountered some issues when packaging (building for production) or installing additional packages. The electron-vite community and documentation are not large enough for me to find help with the issues I encountered.

After evaluating multiple times, I decided to switch to electron-forge and have been working conveniently with it until now.

Installing react typescript and tailwindcss into the electron-forge project is not difficult but will take quite a while if you do not have experience (not as easy as electron-vite), In this article I will help you save a little time and get started an electron-forge project that works seamlessly with react typescript and tailwindcss.

Create new app with Electron Forge

npm init electron-app@latest my-new-app -- --template=webpack-typescript

my-new-app: Please change this to your project name

--template=webpack-typescript: indicates you will use webpack, and typescript instead of javascript

electron-forge supports you to initialize with vite but it seems it is not ready to combine with react so please just work with webpack for now

After running the above command, a project will be created and you can run it with the npm start command Looking through the files, you will see the content in the src/index.html file being displayed on the interface.

And the src/renderer.ts file will be where we write our typescipt code.

Install React to the project:

npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

# or with yarn
yarn add react react-dom
yarn add -D @types/react @types/react-dom

Now you can create an app.tsx file in src to be the root file for your react part

// # src/app.tsx

import './index.css'; // import css

import * as React from "react";
import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
   <h1>Hello react</h1>
  </React.StrictMode>
);

Import to src/renderer.ts:

// # src/renderer.ts
import './index.css'
import './app' // <== add this line

Modify the src/index.html file so that it works with the document.getElementById('root') line in the app.tsx file:

<!-- # src/index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My app name</title>
  </head>

  <body>
    <div id="root"></div>
    <!-- <== add this, root element -->
  </body>
</html>

You may get the error Cannot use JSX unless the '--jsx' flag is provided.ts, please add this line to the tsconfig.json file.

{
  "compilerOptions": {
    "jsx": "react-jsx" // <== add this line
    // other existed configs
  }
}

Rerun the project and you will see the code you just changed displayed

From this point, you can organize the project structure of a react application and import it into src/app.tsx

Install tailwindscss

First, install tailwind css dependentces

npm install tailwindcss autoprefixer --save-dev

# or with yarn
yarn add -D tailwindcss autoprefixer

Init file config

npx tailwindcss init

A tailwind.config.js file will be created in the project's root directory

Open that file and modify this section so tailwind understands where its classnames will be used:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{ts,tsx,html}', // <== Update this
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

For webpack and electron to work with tailwind, we also need to install postcss, postcss-loader

npm install postcss postcss-loader

# or with yarn
yarn add postcss postcss-loader

Then create the file postcss.config.js with the following content:

//postcss.config.js

import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default {
  plugins: [tailwindcss('./tailwind.config.js'), autoprefixer],
}

Add postcss-loader to webpack.renderer.config.ts

// webpack.renderer.config.ts

rules.push({
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    { loader: 'postcss-loader' }, // <== add this
  ],
})

Add the Tailwind directives to your CSS, src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Now let's test it by adding a few classnames to the h1 tag


const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <h1 className="font-bold text-2xl underline text-red-700">Hello react</h1>
  </React.StrictMode>
);

You will see the UI has been applied on the interface.

Completed tailwind css integration, you can use components of shadcn/ui if you want.

See my project to see how I work with shadcn/ui , tailwindcss in the electron project.

Above I have guided you to create an electron typescript project, integrating react, and tailwind css.

Please ask questions if there is any part that is difficult to understand!

Finally, thank you for taking the time to read the article, please support the original article at: https://www.codeduthu.com/en/blog/electron-react-typescript-tailwind-css

Codeduthu

Fixing CORS Issue When Calling API in React Native

Introduction:

Installing rn-fetch-blob to Address the Issue

Other Ways to Handle CORS Errors

Conclusion

React - Uploading Images and Videos in React Quill using Cloudinary

Uploading Images and Videos in React Quill using Cloudinary

1.Introduction:

2. Installing react-quill

3. Handle upload image

4. Conclusion

Securing Swagger Documentation with express-basic-auth in Nodejs - Nestjs | Code đủ thứ

1. Install the express-basic-auth library

2. Secure Swagger Document Page in JavaScript/TypeScript Projects

challenge: true You need to pass this parameter to express-basic-auth to display the login prompt.

3. Secure Swagger Document Page in NestJS Project

Conclusion

Guide to Installing Node.js via NVM on Windows, Linux, and Mac

Install NVM on Windows

Install NVM on Linux

Install NVM on Mac

Install Node.js via NVM

Conclusion

Additional NVM commands

How to modify library in node module and save it forever

1. When Fixing a Library from npm:

So, how can we fix libraries ourselves without losing changes if we delete the node_module?

2. Ways to Fix Libraries in node_modules

Approach 1: Fork the Package's Repo

Approach 2: Use patch-package

3. Demo:

20 SQL Interview Questions – Senior Level Part 1 (Questions 1 through 5)

1. What are window functions in SQL and how are they used?

Basic syntax

2. Explain database sharding

Key traits

Challenges and considerations

3. How do you design an effective database?

1. Gather application requirements

2. Normalize data

3. Define primary and foreign keys

4. Choose appropriate data types

5. Classify data

6. Design for performance

7. Consider partitioning and sharding (when needed)

8. Plan data synchronization

9. Add constraints

10. Test and optimize

11. Maintain and iterate

4. Differentiate OLAP and OLTP databases

OLAP

OLTP

Summary

5. How do you optimize a query execution plan?

20 SQL Interview Questions – Intern Level Part 4 (Questions 16 through 20)

16. Describe the difference between CHAR and VARCHAR data types

CHAR (Fixed-length)

VARCHAR (Variable-length)

Choosing between CHAR and VARCHAR

17. What is an INDEX and why is it important?

Why indexes matter

Usage tips

18. How do you insert a new record into a table?

19. Explain the purpose of the LIMIT clause

Syntax

20. How do you update data in a table?

20 SQL Interview Questions – Intern Level Part 1 (Questions 1 through 5)

1. What is SQL and why is it important?

What is SQL?

Why does SQL matter?

What is SQL used for?

Why is SQL important in programming?

2. Differentiate SQL and MySQL

SQL:

MySQL:

3. Explain the basic structure of an SQL query

SELECT:

FROM:

WHERE:

`challenge: true` You need to pass this parameter to express-basic-auth to display the login prompt.