DEV Community: Md. Jamal Uddin

Key Takeaways from My Recent Review of the React Docs

Md. Jamal Uddin — Sun, 20 Oct 2024 09:55:01 +0000

This blog is originally posted on Medium

Hey there, fellow React enthusiasts! I've recently dived deep into the React documentation and want to share my learnings with you. This is a concise minimal guide for those who are looking to build a solid foundation in React. Let's break down the core concepts with simple explanations and code snippets.

This is going to be a somewhat lengthy story, but please hold on to grasp all the core concepts of React at once. You'll find it beneficial to recap and revisit these concepts for further advancement.

Thinking in React
Components and JSX
Props
Conditional Rendering
Rendering Lists
Pure Components
UI Tree
Interactivity and Event Handlers
State
Controlled Components
Uncontrolled Components
Refs
Preventing Default Behavior
Event Propagation
Managing Complex States
Context
Side Effects
The best practices of useEffect
Rules of React
Custom Hooks
Rules of Hooks

Thinking in React

React is all about breaking your UI into reusable components. When building a React app, start by:

Breaking the UI into a component hierarchy
Building a static version with no interactivity
Identifying the minimal representation of UI state
Determining where your state should live
Adding inverse data flow

Reference: https://react.dev/learn/thinking-in-react

Components and JSX

Components are the building blocks of React applications. They can be functional or class-based (old-fashioned, not recommended). JSX is a syntax extension that allows you to write HTML-like code in your JavaScript.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

References:

Components: https://react.dev/learn/your-first-component
JSX: https://react.dev/learn/writing-markup-with-jsx

Props

Props are how we pass data from parent to child components. They’re read-only and help keep our components pure.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<Greeting username="Alice" />

Reference: https://react.dev/learn/passing-props-to-a-component

Conditional Rendering

React allows you to conditionally render components or elements based on certain conditions.

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

Reference: https://react.dev/learn/conditional-rendering

Rendering Lists

Use the map() function to render lists of elements in React. Don't forget to add a unique key prop to each item.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

Reference: https://react.dev/learn/rendering-lists

Pure Components

Pure components always render the same output for the same props and state. They’re predictable and easier to test.

function PureComponent(props) {
  return <div>{props.value}</div>;
}

Reference: https://react.dev/learn/keeping-components-pure

UI Tree

React builds and maintains an internal representation of your UI called the virtual DOM. This allows React to efficiently update only the parts of the actual DOM that have changed.

Reference: https://react.dev/learn/understanding-your-ui-as-a-tree

Interactivity and Event Handlers

React uses synthetic events to handle user interactions consistently across different browsers.

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
}

Reference: https://react.dev/learn/responding-to-events

State

State is used for data that changes over time in a component. Use the useState hook to add state to functional components.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Reference: https://react.dev/learn/state-a-components-memory

Controlled Components

Controlled components have their state controlled by React.

function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Uncontrolled Components

Uncontrolled components manage their state directly on the DOM.

function UncontrolledInput() {
  return <input defaultValue="Hello" />;
}

Refs

Refs provide a way to access DOM nodes or React elements created in the render method.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Preventing Default Behavior

Use preventDefault() to stop the default browser behavior for certain events.

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

Event Propagation

React events propagate similarly to native DOM events. You can use stopPropagation() to prevent event bubbling.

function Parent() {
  return (
    <div onClick={() => console.log('Parent clicked')}>
      <Child />
    </div>
  );
}

function Child() {
  const handleClick = (e) => {
    e.stopPropagation();
    console.log('Child clicked');
  };

  return <button onClick={handleClick}>Click me</button>;
}

Managing Complex States

Consider using the useReducer hook or a state management library like Redux or Zustand for complex state logic.

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed Button</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

Reference: https://react.dev/learn/passing-data-deeply-with-context

Side Effects

Side effects are operations that affect something outside the scope of the function being executed, like data fetching or DOM manipulation. Use the useEffect hook to manage side effects.

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => setData(result));
  }, []); // Empty dependency array means this effect runs once on mount

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

The best practices of `useEffect`

Always include all variables on which your effect depends in the dependency array.
Avoid infinite loops by carefully considering your effect’s dependencies.
Clean up side effects in the return function of useEffect.

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

References:

You Might Not Need useEffect: https://react.dev/learn/you-might-not-need-an-effect
Synchronizing with Effects: https://react.dev/learn/synchronizing-with-effects
Lifecycle of Reactive Effects: https://react.dev/learn/lifecycle-of-reactive-effects

Rules of React

Always start component names with a capital letter.
Close all tags, including self-closing tags.
Don’t modify props directly.
Keep components pure when possible.

Reference: https://react.dev/reference/rules

Custom Hooks

Custom hooks allow you to extract component logic into reusable functions.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

// Usage
function MyComponent() {
  const width = useWindowWidth();
  return <div>Window width: {width}</div>;
}

Rules of Hooks

Only call hooks at the top level of your component.
Only call hooks from React function components or custom hooks.
Use eslint-plugin-react-hooks to enforce these rules.

Reference: https://react.dev/reference/rules/rules-of-hooks

That’s a wrap on our React journey! Remember, the best way to learn is by doing. Start building projects, experiment with these concepts, and don’t be afraid to dive into the React documentation when you need more details. Happy coding!

Unleashing Your Web Development Potential in the Age of AI: Start from HTML and CSS

Md. Jamal Uddin — Sun, 12 Nov 2023 16:45:51 +0000

HTML and CSS are two of the most fundamental building blocks of the internet. HTML, which stands for HyperText Markup Language, is the standard language used to create web pages. It provides the structure of a web page by defining the elements, such as headings, paragraphs, images, and links. CSS, which stands for Cascading Style Sheets, is used to control the presentation of a web page, including the layout, colors, fonts, and other visual aspects.

Together, HTML and CSS form the backbone of the web and are essential skills for anyone interested in web development.

A basic HTML web page skeleton

Every HTML page has a basic skeleton:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML Skeleton</title>
  </head>
  <body>
    <h1>This is a static HTML Skeleton!</h1>
  </body>
</html>

In HTML each code block is a tag and there are several tags to build a web page. above the code block, there is an opening and closing HTML tag, and there are two children called head and body.

The head tag contains the title and other meta tags to show the page title and meta-information about the website
The body tag contains the whole website content that is visible to the end user.

Live Preview:

Let's add a little bit of CSS to make it beautiful

there are several ways to include CSS in an HTML page. Here we will see the top 3 ways to add CSS into HTML:

Add inline CSS as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Add CSS</title>
  </head>
  <body style="background-color: azure;">
    <main
      style="
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
      "
    >
      <h1 style="color: crimson;">Add CSS to make the web page beautiful.</h1>
    </main>
  </body>
</html>

Live Preview:

Another way to add CSS in an HTML file using Style tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS in style tag of the HTML head section</title>
    <style>
      body {
        background-color: lightseagreen;
      }
      main {
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
      }
      h1 {
        color: moccasin;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Add CSS to make the web page beautiful.</h1>
    </main>
  </body>
</html>

Live Preview:

The most common way to use CSS is by adding an external CSS file:

In the external CSS approach, HTML and CSS reside in separate files and link together via a special link tag

Let’s create two files index.html for HTML and style.css for CSS then add the following HTML code to the index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Add External CSS</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main>
      <h1>Add CSS to make the web page beautiful.</h1>
    </main>
  </body>
</html>

add the following CSS Code to the style.css file:

body {
  background-color: burlywood;
}
main {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
h1 {
  color: brown;
  font-weight: 400;
  font-style: italic;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

Here we link the CSS code to the HTML code via the below code:

<link rel="stylesheet" href="./style.css" />

Live Preview:

HTML Tags:

HTML tags, which are essentially snippets of code that define how web content should be displayed, are the building blocks of any web page.

While there are a plethora of HTML tags available, it’s not necessary to memorize all of them. Instead, it’s best to start with the most essential tags and build from there. Some of the most commonly used tags include those that define the overall structure of the page, such as <html>, <head>, and <body>. Other frequently used tags include <p> paragraphs, <h1> to <h6> headings of varying sizes, and <a> for creating hyperlinks.

Additionally, tags such as <img /> can be used to insert images into a web page, while <ul> and <ol> are used for creating lists. There are many other tags available for more specialized purposes, but it’s important to understand that not all tags are equally necessary or commonly used. By starting with the most common tags and gradually expanding your knowledge as needed, you can develop a strong understanding of HTML and create effective, engaging web pages.

CSS for Style

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in HTML. It is an integral part of web development and plays a significant role in creating visually appealing web pages.

To build a great website, it’s important to learn CSS and its features thoroughly. One of the key concepts in CSS is the box model, which describes how elements are rendered on a web page. Understanding the box model is essential for creating layouts and formatting elements on a page.

Flexbox is another powerful CSS feature that helps to create flexible and responsive layouts. It allows elements to be organized flexibly and dynamically, providing a better user experience across different devices. Grid is also a modern CSS feature that provides a more advanced way to create layouts and align elements on a page.

In addition to these features, modern CSS includes many other advanced techniques that can be used to create visually stunning web pages. These include animations, transitions, and transformations that can add dynamic effects to a page. Learning these features will help web developers create websites that are not only visually appealing but also provide a great user experience.

Conclusion

This article offers a great opportunity to learn the fundamental concepts of HTML and CSS, which are important building blocks of web development. By carefully studying and applying these concepts, you can create beautiful websites and expand your potential in this field.

Additionally, you can leverage the power of generative AI to enhance your learning experience and gain a deeper understanding of HTML and CSS. With this knowledge, you can take your web development skills to the next level and achieve great success in your career. Remember, mastering these skills takes time and effort, but it is worth it in the long run.

Credit

Stock Images from Unsplash

How to Generate PDF from html in React Native

Md. Jamal Uddin — Wed, 07 Sep 2022 08:58:49 +0000

Introduction

Generating PDF based on different transaction is an important part of any retail applications. today we are going to show how can we generate PDF documents in React Native.

React Native has several good NPM libraries to generate PDF but articles and blogs are very few. So, I am letting you know how can you generate PDF in React Native using the very popular React Native PDF generation library called react-native-html-to-pdf.

Create a React Native Project

npx react-native init MyRNPDF --template react-native-template-typescript

this command will create a new react native project

Folder Structure of a Newly created React Native Project

Change App.tsx file to print `Hello World!`

// App.tsx
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#aac',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
    color: '#fff',
  },
});

export default App;

Build the Project and Run on an Emulator

npm run android

after successful build of the project you will see a Hello World! message on your emulator/device screen:

Add Dependency Library for PDF generation

npm i react-native-html-to-pdf

we are using TypeScript in our project. So, we have to install below package too for type definition of react-native-html-to-pdf library.

npm i @types/react-native-html-to-pdf

iOS only recommendation

React Native version >= 0.60.0, they have introduced autolinking so we do not required to link the library but need to install pods. but only for iOS we need install dependencies via pod's:

cd ios && pod install && cd ..

Edit the File Path

Go directly to the source code in your

node modules
- react-native-html-to-pdf
- android
  - src
  - main
    - java
    - com
      - christopherdro
      - htmltopdf

In the convert() function change this code block:

File path = (Environment.MEDIA_MOUNTED.equals(state)) ?
          new File(mReactContext.getExternalFilesDir(null), options.getString(DIRECTORY)) :
          new File(mReactContext.getFilesDir(), options.getString(DIRECTORY));

with below code block:

File path = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOCUMENTS), options.getString(DIRECTORY));

And that should change the file path to the appropriate location inside your emulator/device.

Permission for Android

We are accessing external storage so we need to add two permission in AndroidManifest.xml file.

We are going to add the following permissions in the AndroidManifest.xml

default AndroidManifest.xml file:

Permission Code Block:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

Setting PDF generation

Update App.tsx file as per your need with settings of react-native-html-to-pdf library:

import React, {useState} from 'react';
import {Alert, Pressable, StyleSheet, Text, View} from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';

function App() {
  const [isLoading, setIsLoading] = useState(false);
  const [count, setCount] = useState(1);

  const orderLines = [
    {
      id: 1,
      product: 'Product 1',
      quantity: 1,
      price: '$10.00',
    },
    {
      id: 2,
      product: 'Product 2',
      quantity: 2,
      price: '$20.00',
    },
    {
      id: 3,
      product: 'Product 3',
      quantity: 3,
      price: '$30.00',
    },
  ];

  const generatePDF = async () => {
    setIsLoading(true);
    try {
      const html = `
        <html>
          <head>
            <style>
              body {
                font-family: 'Helvetica';
                font-size: 12px;
              }
              header, footer {
                height: 50px;
                background-color: #fff;
                color: #000;
                display: flex;
                justify-content: center;
                padding: 0 20px;
              }
              table {
                width: 100%;
                border-collapse: collapse;
              }
              th, td {
                border: 1px solid #000;
                padding: 5px;
              }
              th {
                background-color: #ccc;
              }
            </style>
          </head>
          <body>
            <header>
              <h1>Invoice for Order #${count}</h1>
            </header>
            <h1>Order Details</h1>
            <table>
              <tr>
                <th>Order ID</th>
                <td>${count}</td> 
              </tr>
              <tr>
                <th>Order Date</th>
                <td>29-Jul-2022</td>
              </tr>
              <tr>
                <th>Order Status</th>
                <td>Completed</td>
              </tr>
              <tr>
                <th>Order Total</th>
                <td>$13232</td>
              </tr>
            </table>
            <h1>Order Lines</h1>
            <table>
              <tr>
                <th>Product ID</th>
                <th>Product Name</th>
                <th>Product Qty</th>
                <th>Product Price</th>
              </tr>
              ${orderLines
                .map(
                  line => `
                <tr>
                  <td>${line.id}</td>
                  <td>${line.product}</td>
                  <td>${line.quantity}</td>
                  <td>${line.price}</td>
                </tr>
              `,
                )
                .join('')}
            </table>
            <footer>
              <p>Thank you for your business!</p>
            </footer>
          </body>
        </html>
      `;
      const options = {
        html,
        fileName: `invoice_${count}`,
        directory: 'Invoices',
      };
      const file = await RNHTMLtoPDF.convert(options);
      Alert.alert('Success', `PDF saved to ${file.filePath}`);
      setCount(count + 1);
      setIsLoading(false);
    } catch (error: any) {
      Alert.alert('Error', error.message);
    }
  };

  if (isLoading) {
    return <Text>Generating PDF...</Text>;
  }

  return (
    <View style={styles.container}>
      <Pressable style={styles.button} onPress={() => generatePDF()}>
        <Text style={styles.text}>Generate PDF</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#aac',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    color: '#fff',
  },
  button: {
    backgroundColor: '#6c8ee3',
    padding: 15,
    borderRadius: 10,
    margin: 20,
  },
});

export default App;

build your project again:

npm run android

Output

First look of our App:
Click the Button to generate PDF file and you'll see an Alert:

Visit the location which is showing in Success Alert and see generated PDF file.

On Emulator:

On your real device you can see the file on your external device folder:

Generate PDF on Real Device:

Locate the generated PDF file:

Resources

Credit

Cover Photo by 2H Media on Unsplash

Intro to SQL: Basic

Md. Jamal Uddin — Wed, 07 Sep 2022 06:20:55 +0000

SQL

SQL stands for Structured Query Language, this is a standard computer language for relational database management. SQL is used for data definition and data manipulation.

Pronounced as “Sequel” or “S-Q-L"

SQL used to communicate with the database and its statements are made up of descriptive words and are easy to learn

Image Source: Medium

What is Data Definition in SQL?

Data Definition is also very often used as a Data Description that means, Data Description in SQL statements to define how to store data in the columns of a table, how to present the data in the results of queries, and whether to apply column-level integrity constraints. SQL is used as a Data Definition Language (DDL).

What is Data Manipulation in SQL?

Data manipulation is another part of SQL which includes: Create or insert new data, update existing data, remove existing data etc. So, in this part SQL is used as a Data Manipulation Language (DML).

Features and Usage of SQL

Image Source: Interview Bit

SQL is a non-procedural language. So, you cannot able to write a complete applications. but this is very Simple and powerful language for data definition and data manipulation.

SQL is all about data! It’s working with:

Read/retrieve data from a database
Write/insert data to a database
Update/Modify any existing data to a database

SQL usage a board range of roles in the industry:

Backend Engineer
QA Engineer
Database Admin (DBA)
System Admin
System Engineer
Data Analyst
Data Architect
ETL Developer (Data Engineer)
Data Scientist
Business Analyst

How SQL used by a DBA and a Data Scientist

Manage and Governs the entire database
Gives permission to users
Determines access to data
Manages and creates new tables
Uses SQL to query and retrieve data
End-user of a database
Uses SQL to query and retrieve data

How do Data Scientists Use SQL?

Retrieve data
May create their own table or test environment
Combine multiple sources together
Write complex queries for analysis

SQL and Database Management System (DBMS)

How you write syntax will depend on what DBMS tools are you using. Each DBMS tools has its own “dialect” and basically:

SQL can translate
You will tweak based on the “dialect” your DBMS speaks

Popular Relational DBMS services:

Microsoft SQL Server
MySQL
Oracle PL/SQL
PostgreSQL

SQLite

IBM DB2

Credit

Cover Photo by Myriam Jessier on Unsplash

Conclusion

SQL is a very simple and powerful language for working with data that help us create, insert, update, delete, retrieve data from databases. on the next few articles we will learn more about SQL in details. thanks for learning.

Create, Insert, Retrieve Data in SQL

Md. Jamal Uddin — Tue, 31 Aug 2021 02:37:13 +0000

Create table

We often use table in relational database to make models and predictions, create dashboards, visualize data with other tools, extract data from other sources and store them in an organized way.

Table Creation Syntax:

CREATE TABLE table_name (
    Col_name_1 DATA_TYPE,
    Col_name_2 DATA_TYPE,
    …….
    Col_name_n DATA_TYPE
);

Example:

CREATE TABLE shoes (
    id              NUMBER           PRIMARY KEY,
    brand           VARCHAR(20)      NOT NULL,
    shoe_type       VARCHAR(20),
    color           VARCHAR(10),
    price           DECIMAL(2, 8)    NOT NULL,
    desc            VARCHAR(100)
);

NULL and Primary Key

Every column can be NULL or NOT NULL.
An error will be returned if one tries to submit a column with no value when it is defined as a NOT NULL
Don’t confuse NULL values with empty strings that are different kind of data
Primary keys can be NOT NULL and MUST be have a unique value in a table

ADD / INSERT Data to the Table

INSERT INTO shoes
VALUES (1, ‘Nike’, ‘Slipper’, ‘Black’, ‘9.2’, NULL);

OR add data using explicitly declared the column name:

INSERT INTO shoes (id, brand, shoe_type, color, price, desc)
VALUES (1, ‘Nike’, ‘Slipper’, ‘Black’, ‘9.2’, NULL);

CREATE TEMPORARY TABLE

Temporary tables will be deleted when current session terminated
Faster than creating a real table
Useful for complex queries using subsets and joins

Syntax:

CREATE TEMPORARY TABLE temp_table_name AS (
    SELECT *
    FROM main_table_name
    WHERE param=’value’
);

Example:

CREATE TEMPORARY TABLE Sandals AS (
    SELECT *
    FROM shoes
    WHERE shoe_type=’sandal’
);

ADD COMMENTS in SQL STATEMENTS

Comments help you remember what you were doing and why
Mute the expression of code (commenting out code)
Troubleshoot query issues systematically

Single Line Comments

SELECT shoe_id,
       - -  brand_id,
shoe_name,
shoe_type
FROM shoes;

Multiline Comments / Section Comments

SELECT *
/*  Shoe_id,
    Shoe_name,
Shoe_type,
Shoe_color
*/
FROM shoes;

COMMENTS GONE WRONG

SELECT
-- Getting the avg units for each materials
Material,
Avg_units,
FROM shoes
-- group it by each type
GROUP BY shoe_type
-- Order it by brand
ORDER BY brand;

Credit

Cover Photo by Michael Dziedzic on Unsplash

Main Components of a Computer Systems

Md. Jamal Uddin — Tue, 15 Jun 2021 04:57:14 +0000

In this article, I will walk you through the main components of computer systems, that you can understand what is this and how this machine works and you also be able to send an instruction to this machine to work for you.

The computer basically is a combination of Hardware and Software. Hardware working closely with electrical signals and Software is the way to interact with humans to complete the tasks using machine.

Main 5 Parts of a Computer: ## Central Processing Unit (CPU): Arithmetic & Logical Unit (ALU) source: Wikipedia

Main Memory: RAM, ROM, Cache Memory

source: Tutorialspoint

Input Devices

source: digitalworld839.com

Output Devices

source: digitalworld839.com

Secondary Memory: HDD or SSD

source: Wikipedia

Thanks for now, see you soon :D

Cover image: Photo by Lorenzo Herrera on Unsplash

Filtering Data with SQL

Md. Jamal Uddin — Tue, 22 Dec 2020 10:32:57 +0000

Photo by Devin Avery on Unsplash

We can use several operators and clauses for filtering data with SQL including:

WHERE
BETWEEN
IN
OR
NOT
LIKE

Basic Filtering

When we need to be specific about the data we want to retrieve and reduce the number of records we retrieve to increase query performance and reduce the strain on the client application to governance limitations then we have to use the filter option to be better perform these operations.

let's assume we have a table called accounts:

for filtering, we often use the WHERE clause to perform our query:

Syntax

SELECT column_name_1, column_name_2
FROM table_name
WHERE column_name_1 = value;

WHERE Clause

there are several operators to use in the WHERE clause. see below table:

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
    WHERE name = 'Walmart';

another example

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE id = 1011

Non-matches data

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE name <> 'Alice'

Filtering with a Range of Data

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE id BETWEEN 1001 AND 1021

Filtering with no value

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE name IS NULL

We have to keep in mind that the order of sequence is very important in SQL statements. First SELECT then FROM then WHERE taken place.

Advanced Filtering with SQL

Now we have known how to filter data in SQL to meet our goal or find our exact records of data. but sometimes we need more complex filtering to get our desire records from data sources.

in this section we use:

The `IN` operator

First of all, let's talk about the IN operator. this is used to filter a range of records.

Example

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE name IN ('Walmart', 'Apple');

The `OR` operator

Now we're going to show you the OR operator. that allows you to get the result when only one or both conditions are matched. In this case, DBMS tools ignore the second condition of the WHERE clause if the first condition match.

Example

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE primary_poc = 'Tamara Tume' OR primary_poc = 'Jodee Lupo'

when you need to match both conditions to get the result then you should use the AND operator over OR.

Sometimes IN and ORcan accomplish the same thing; however, generally with IN you don't have to think about the order in which you're placing your different conditions. Using IN, we can use another SELECT for subqueries and when talk began for the performance issue of your complex query then you can use IN over OR because IN executes faster than OR.

`OR` with `AND`

When we use OR with AND we often make simple mistakes and get a different result.

Let's see below two examples for a better understanding:

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE id = 1001 OR id = 1021 AND name = 'McKesson'

Agian

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE (id = 1001 OR id = 1021) AND name = 'McKesson'

You may see different results in two queries. because here SQL performs OR before AND and the first condition is true then omit other conditions. In the second example, we use parenthesis to separate AND and OR conditions to get the actual result.

Note: SQL order of operation is AND before OR. but here you write OR before AND and OR first condition is true so, rest of the condition is omitted.

The `NOT` operator

Finally, we are here to talk about the NOT operator. when we want some result that does not contain a specific thing then we can use the NOT operator the get the result.

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE primary_poc IS NOT NULL AND NOT name = 'Apple'

Using `Wildcards` to Filter data

Sometimes we have to deal with string data and you don't know the whole string or maybe you are looking for something that starts with an alphabet/word or ends with a specific word/alphabet. that's why we use the Wildcards operator to perform filtering with SQL.

we can use

Percentage(%)
Underscore(_)
Bracket []
as a Wildcard operator. but keep in mind that each special character is not supported by all DBMS tools.
DB2 does not support Underscore(_)
SQLite does not support Bracket[]

Let's see some example:

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE name LIKE 'A%'; -- name starts with 'A'

again

SELECT
    id,
    name,
    website,
    primary_poc
FROM accounts
  WHERE name LIKE '%art'; -- name ends with 'art'

there are lots of tips and tricks out there over the internet. you can find them just simpling googling. I just want to share with you the basic concept to understand.

Thanks for reading.

Note: I would love to see your comments and accepting your valuable thought.

Basic Programming Terminology

Md. Jamal Uddin — Wed, 10 Jun 2020 03:39:29 +0000

Let's learn some basic programming terminology and try to understand what kind of vocabulary we used in regular basis while we writing code. these vocabulary will help us to understand what we actually doing.

Program – a sequence of instructions (called statements), which are executed one after another in a predictable manner. Sequential flow is the most common and straightforward sequence of statements, in which statements are executed in the order that they are written – from top to bottom in a sequential manner;
Statement – a single action (like print a text) terminated by semi-colon (;);
Block – a group of zero, one or more statements enclosed by a pair of braces {...}; There are two such blocks in the program above.
Method – a sequence of statements that represents a high-level operation (also known as subprogram or procedure).
Syntax – a set of rules that define how a program needs to be written in order to be valid;
Keyword – a word that has a special meaning in the programming language (public, class, and many others). These words cannot be used as variable names for your own program;
Identifier or name – a word that refers to something in a program (such as a variable or a function name);
Comment – a textual explanation of what the code does.
Whitespace – all characters that are not visible (space, tab, newline, etc.).

That's all for now. thanks for reading.

Who Am I?

This is Md. Jamal Uddin working as a Software Developer based in Dhaka, Bangladesh. I love to learn new things and share them with others. Playing with cutting technologies is my hobby and working with legacy is my day job :). Connect me on Twitter and LinkedIn

Reference:

Photo by Tijana Drndarski on Unsplash
Vocabulary comes from JetBrains Academy.

25 Common Frontend Developer Interview Q&A

Md. Jamal Uddin — Tue, 08 Jan 2019 04:34:51 +0000

Photo by Pexels

Questions:

What is Semantic Element in HTML5?
Viewport height & width in CSS3?
What is CSS breakpoints?
CSS Best Practice about ID and Class?
What is SASS/SCSS?
What is mixin in Sass/SCSS?
What's new in ES6?
What is Event Bubbling?
What is prototype inheritance in JavaScript?
Abstract function in JavaScript?
What is this keyword in Arrow function?
What is this keyword in normal function?
What is the difference between localStorage and sessionStorage?
What is CORS?
What is HTTP request?
How many HTTP methods we have?
What is API and REST API?
Make an AJAX request?
How does the browser work?
What is Pure Function in JavaScript?
Event Handling in JavaScript?
JavaScript execution context?
How to manage your state in React?
How Redux works?
What is Presentational Component and Functional Component?

Let's describes little more:

1. What is the Semantic Element in HTML5?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

More Details: W3Schools

2. View port height & width in CSS3?

The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages, or JavaScript.

This new set of units consists of four different units. Two for each axis, and a minimum and maximum value of the two.

vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side

Note: IE9 uses vm instead of vmin. It does not support vmax.
Just to clarify: 1vmax equals 1vh in portrait mode, whilst in landscape mode, 1vmax will equal 1vw.

More Details: Source

3. What is CSS breakpoints?

CSS breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user. CSS breakpoints are also called media query breakpoints, as they are used with a media query.

/* For mobile phones: */
.col {
  width: 100%;
}

/* For tablets: */
@media only screen and (min-width: 600px) {
  .col-s {width: 50%;}
}

/* For desktop: */
@media only screen and (min-width: 768px) {
  .col-lg {width: 33.33%;}
}

More Details: RWD

4. CSS Best Practice about ID and Class?

We need ways to describe content in an HTML/XHTML document. The basic elements like <h1>, <p>, and <ul> will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this, we need ID's and Classes. For example <ul id="nav">, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example, a footer, where we might do something like this: <div id="footer">. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: <div class="sidebar-box">.

More Details: CSS TRICKS

5. What is SASS/SCSS?

Sass (Syntactically awesome style sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. ... Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

More Details on Sass/SCSS official sit and My Own blog post in bangla

6. What is mixin in Sass/SCSS?

One of the most powerful features of the CSS preprocessor Sass is the mixin, an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead.

@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

when this code we compile to CSS looks like below type:

.box {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}

7. What's new in ES6?

JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more.

arrows
classes
enhanced object literals
template strings
destructuring
default + rest + spread
let + const
iterators + for..of
generators
unicode
modules
module loaders
map + set + weakmap + weakset
proxies
symbols
subclassable built-ins
promises
math + number + string + array + object APIs
binary and octal literals
reflect api
tail calls

More Details: ES6 Features

8. What is Event Bubbling?

The bubbling principle is simple.

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

Let’s say we have 3 nested elements FORM > DIV > P with a handler on each of them:

 <style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

A click on the inner <p> first runs onclick:

On that <p>.
Then on the outer <div>.
Then on the outer <form>.
And so on upwards till the document object.

More Details: JavaScript.info

9. What is prototype inheritance in JavaScript?

Inheritance refers to an object's ability to access methods and other properties from another object. Objects can inherit things from other objects. Inheritance in JavaScript works through something called prototypes and this form of inheritance is often called prototypal inheritance.

More Details on DigitalOcean

10. Abstract function in JavaScript?

In object-oriented programming, abstraction is one of the four central principles (along with encapsulation, inheritance, and polymorphism). Abstraction is valuable for two key reasons:

Abstraction hides certain details and only show the essential features of the object. It tries to reduce and factor out details so that the developer can focus on a few concepts at a time. This approach improves understandability as well as maintainability of the code.
Abstraction helps us to reduce code duplication. Abstraction provides ways of dealing with crosscutting concerns and enables us to avoid tightly coupled code.

The lack of abstraction inevitably leads to problems with maintainability.

More Details on CSS TRICKS

11. What is `this` keyword in Arrow function?

In classic function expressions, the this keyword is bound to different values based on the context in which it is called. With arrow functions, however, this is lexically bound. It means that it uses this from the code that contains the arrow function.

For example, look at the setTimeout function below:

// ES5
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

In the ES5 example, .bind(this) is required to help pass the this context into the function. Otherwise, by default this would be undefined.

// ES6
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};

ES6 arrow functions can’t be bound to a this keyword, so it will lexically go up a scope, and use the value of this in the scope in which it was defined.

More Details on freeCodeCamp Blog

12. What is `this` keyword in normal function?

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind() method to set the value of a function's this regardless of how it's called, and ES2015 introduced arrow functions which don't provide their own this binding (it retains the this value of the enclosing lexical context).

More Details on MDN

13. What is the difference between localStorage, sessionStorage and cookies?

OK, localStorage as it's called its local storage for your browsers, it can save up to 10MB, sessionStorage does the same, but as its name saying, it's session based and will be deleted after closing your browser, also can save less than localStorage, like up to 5MB, but cookies are very tiny data storing in your browser, that can save up 4KB and can be accessed through server or browser both...

More Details on MDN

14. What is CORS?

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

More Details: MDN

15. What is HTTP request?

HTTP Request is a packet of Information that one computer sends to another computer to communicate something. To its core, HTTP Request is a packet of binary data sent by the Client to the server. An HTTP Request contains following parts. Request Line. Headers, 0 or more Headers in the request.

More Details on Codecademy

16. How many HTTP methods we have?

HTTP defines a set of request methods to indicate the desired action to be performed for a given resource. Although they can also be nouns, these request methods are sometimes referred to as HTTP verbs. Each of them implements a different semantic, but some common features are shared by a group of them: e.g. a request method can be safe, idempotent, or cacheable.

GET

The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.

HEAD

The HEAD method asks for a response identical to that of a GET request, but without the response body.

POST

The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.

PUT

The PUT method replaces all current representations of the target resource with the request payload.

DELETE

The DELETE method deletes the specified resource.

CONNECT

The CONNECT method establishes a tunnel to the server identified by the target resource.

OPTIONS

The OPTIONS method is used to describe the communication options for the target resource.

TRACE

The TRACE method performs a message loop-back test along the path to the target resource.

PATCH

The PATCH method is used to apply partial modifications to a resource.

17. What is API and REST API?

API:

a set of functions and procedures that allow the creation of applications which access the features or data of an operating system, application, or other services.

More Details on freeCodeCamp blog

REST API:

REST or RESTful API design (Representational State Transfer) is designed to take advantage of existing protocols. While REST can be used over nearly any protocol, it usually takes advantage of HTTP when used for Web APIs. This means that developers do not need to install libraries or additional software in order to take advantage of a REST API design. REST API Design was defined by Dr. Roy Fielding in his 2000 doctorate dissertation. It is notable for its incredible layer of flexibility. Since data is not tied to methods and resources, REST has the ability to handle multiple types of calls, return different data formats and even change structurally with the correct implementation of hypermedia.

More Details on SitePoint

18. Make an AJAX request?

Here is a generic jQuery AJAX request:

$(function() {
    function LoadPersons(data) {
        // do something with data
    }

    $.ajax({
        type: 'POST',
        url: url,
        data: JSON.stringify(parameters),
        contentType: 'application/json;',
        dataType: 'json',
        success: function(result) {
            // do something with persons (data)
            // e.g. LoadPersons(data);
        }
    });
});

More Details on jQuery official docs

19. How does the browser work?

The web server locates and then sends the information to the web browser, which displays the results. When web browsers contact servers, they're asking to be sent pages built with Hypertext Markup Language (HTML). Browsers interpret those pages and display them on your computer.

More Details on html5rocks

20. What is Pure Function in JavaScript?

Pure functions are functions that accept input and returns a value without modifying any data outside its scope(Side Effects). Its output or return value must depend on the input/arguments and pure functions must return a value. ... Here is a pure function.

More Details on freeCodeCamp blog

21. Event Handling in JavaScript?

JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page.

When the page loads, it is called an event. When the user clicks a button, that click to is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.

More Details on Eloquent Javascript

22. JavaScript execution context?

Execution context (EC) is defined as the environment in which JavaScript code is executed. By environment I mean the value of this, variables, objects, and functions JavaScript code has access to, constitutes its environment.

More Details on medium

23. How to manage your state in React?

There's always been a myriad of ways to manage state in React. Redux has always been a popular choice, but with React 16, and recently released libraries, there are now even more options. you can manage your state using React Context API, Redux or Mobx etc.

More Details on Medium

24. How Redux works?

Actions, reducers, action creators, middleware, pure functions, immutability…
Most of these terms seem totally foreign.

Redux is astonishingly simple. It uses a function called a reducer (a name derived from the JavaScript reduce method) that takes two parameters: An action, and a next state. The reducer has access to the current (soon to be previous) state, applies the given action to that state, and returns the desired next state.

More Details on Dave Ceddia's blog

25. What is Presentational Component and Functional Component?

Presentational Component:

Rarely have their own state (when they do, it’s UI state rather than data).

More Details on Dan Abramov blog

Functional Component:

A React component can be considered pure if it renders the same output for the same state and props.

More Details on Log Rocket

Want to know about "Full Stack Developer Interview Questions" below toptal.com article is a good read.
10 Essential Full-stack Interview Questions

Feel free to comment and share this article with your favorite places and yes encourage me to spread your love by clicking the heart button. Thanks

Who Am I?

Note: this post all data is collected from various sources. I have referenced some of them.

Different Types of Functions in JavaScript

Md. Jamal Uddin — Sat, 03 Nov 2018 12:22:14 +0000

Different Types of Functions in JavaScript

Photo by Markus Spiske on Unsplash

A JavaScript function is a block of code designed to perform a particular task.

MDN Says:

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure — a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it.

A JavaScript function is executed when “something” invokes it (calls it).

Example:

function square(x) {
  return x * x;
}
square(10); // 100

Basic Syntax:

function validFunctionName(parameter) {
  return statement;
}

A function can have multiple parameters or no parameters at all. In the following example, bark does not list any parameter names, whereas power lists two:

bark( )

function bark() {
  return "woof-woof";
}
bark(); //   woof-woof

power( )

function power(base, exponent) {
  let result = 1;
  for(let count = 0; count < exponent; count++) {
    result *= base;
  }
  return result;
}
power(2, 10); // 1024

Function Expression:

A Function Expression defines a named or anonymous function. An anonymous function is a function that has no name.

var fullName = function(firstName, lastName) {
 return `${firstName} ${lastName}`;
}
fullName("Jamal", "Uddin"); // Jamal Uddin

Arrow Function:

An Arrow Function Expression is a shorter syntax for writing function expressions. Arrow functions do not create their value.

We can write the arrow function in multiple ways:

First:

It just looks like a regular function expression, but has the arrow (=>) key.

const double = (value) => {
  return value * 2
}
double(10); // 20

Second:

Omit the return keyword

const double2 = value => value * 2;
double2(10); // 20

Third:

If our function has no parameter

const noise = () => console.log("Pling");
noise(); // Pling

or

const noise2 = _ => console.log("Pling");
noise2(); // Pling

Fourth:

If we have two or more parameters, you can must be used parenthesis

const addAll = (x, y, z) => x + y + z;

addAll(10, 20, 30); // 60

Fifth:

We can use the default value in our parameters

const multiply = (a = 2, b = 3, c = 1) => a * b * c;
multiply(2, 2, 2); // 8
multiply(2, 2);    // 4
multiply(3);       // 9
multiply();        // 6

JavaScript is extremely broad-minded about the number of arguments you pass to a function. If you pass too many, the extra ones are ignored. If you pass too few, the missing parameters get assigned the value undefined.

Return:

Remember, the return keyword can ONLY be used inside of a function. Let's take a look at another example.

function returnOnlyOnce(){
  return "Hello";
  return "Goodbye";
}
returnOnlyOnce(); // "Hello"

We see from this example that the return keyword can only be executed once in a function. Once it is executed, the function is complete, and no other lines of code will be executed.

Function Shorthand methods:

The shorthand method definition can be used in a method declaration on object literals and ES6 classes. We can define them using a function name, followed by a list of parameters in a pair of parentheses (para1, ..., paramN) and a pair of curly braces { ... } that delimit the body statements.

The following example uses a shorthand method definition in an object literal:

const fruits = {  
  items: [],
  add(...items) {
    this.items.push(...items);
  },
  get(index) {
    return this.items[index];
  }
};
fruits.add('mango', 'banana', 'guava');  
fruits.get(1); // banana

add() and get() methods in the fruits object are defined using a short method definition. These methods are called as usual: fruits.add(...) and fruits.get(...).

Generator Function:

ES6 introduced a new way of working with functions and iterators in the form of Generators (or generator functions). A generator is a function that can stop midway and then continue from where it stopped. In short, a generator appears to be a function, but it behaves like an iterator.

Note: async/await is based on generators. Read more here.

Example:

function * generatorFunction() { 
  yield 'Hello, ';
console.log('I will be printed after the pause');  
  yield 'World!';
}
const generatorObject = generatorFunction();
console.log(generatorObject.next().value);
console.log(generatorObject.next().value);
console.log(generatorObject.next().value);
// output should be as follows.
// Hello, 
// I will be printed after the pause
// World!
// undefined

Function with: new Function

The Function constructor creates a new Function object.

var sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6)); // 8

Source of truth:

P.S.: English is not my native language, and this is my very first English article, so if you have found any mistakes, please pardon me, also hearts to encourage me to write more articles.

Happy Programming! :)

DEV Community: Md. Jamal Uddin

Key Takeaways from My Recent Review of the React Docs

Table of Contents

Thinking in React

Components and JSX

Props

Conditional Rendering

Rendering Lists

Pure Components

UI Tree

Interactivity and Event Handlers

State

Controlled Components

Uncontrolled Components

Refs

Preventing Default Behavior

Event Propagation

Managing Complex States

Context

Side Effects

The best practices of useEffect

Rules of React

Custom Hooks

Rules of Hooks

Unleashing Your Web Development Potential in the Age of AI: Start from HTML and CSS

A basic HTML web page skeleton

HTML Tags:

CSS for Style

Conclusion

Credit

How to Generate PDF from html in React Native

Introduction

Create a React Native Project

Folder Structure of a Newly created React Native Project

Change App.tsx file to print Hello World!

Build the Project and Run on an Emulator

Add Dependency Library for PDF generation

iOS only recommendation

Edit the File Path

Permission for Android

Setting PDF generation

build your project again:

Output

Resources

Credit

Intro to SQL: Basic

SQL

What is Data Definition in SQL?

What is Data Manipulation in SQL?

Features and Usage of SQL

How SQL used by a DBA and a Data Scientist

How do Data Scientists Use SQL?

SQL and Database Management System (DBMS)

Popular Relational DBMS services:

Credit

Conclusion

Create, Insert, Retrieve Data in SQL

Create table

NULL and Primary Key

ADD / INSERT Data to the Table

CREATE TEMPORARY TABLE

ADD COMMENTS in SQL STATEMENTS

Credit

Main Components of a Computer Systems

Main Memory: RAM, ROM, Cache Memory

Input Devices

Output Devices

Secondary Memory: HDD or SSD

Filtering Data with SQL

Basic Filtering

Syntax

WHERE Clause

Filtering with a Range of Data

Filtering with no value

Advanced Filtering with SQL

The IN operator

The OR operator

OR with AND

The NOT operator

Using Wildcards to Filter data

The best practices of `useEffect`

Change App.tsx file to print `Hello World!`

The `IN` operator

The `OR` operator

`OR` with `AND`

The `NOT` operator

Using `Wildcards` to Filter data

11. What is `this` keyword in Arrow function?

12. What is `this` keyword in normal function?