Merge pull request #4333 from CodeHarborHub/restyled/dev-3

Restyle Dev 3: new content in Js Data Type || new update in blog

Author: ajay-dhangar

blog/Beginner’s Guide to the Top 5 React Hooks.md

@@ -1,5 +1,5 @@
 ---
-title: 'A Beginner’s Guide to the Top 5 React Hooks'
+title: "A Beginner’s Guide to the Top 5 React Hooks"
 sidebar_label: React hooks
 authors: [dharshibalasubramaniyam]
 tags: [react.js, react-hooks]
@@ -36,7 +36,7 @@ In this beginner’s guide, we’ll explore the top 5 React hooks that every Rea
 ### Importing useState hook from react:
 
 ```js
-import { useState } from 'react';
+import { useState } from "react";
 ```
 
 ### Declaring a state variable named count with an initial value of 0,
@@ -61,6 +61,7 @@ const Counter = () => {
   );
 };
 ```
+
 - In above example, when the button is clicked, the onClick event handler calls the setCount function with the updated value of count (count + 1), causing the component to re-render with the new state value.
 
 - Note: We cannot update a state variable like, count = count +1
@@ -71,29 +72,26 @@ const Counter = () => {
 
 ```js
 const Counter = () => {
-  const [person, setPerson] = useState({id: '1', name: 'John', age: 25});
+  const [person, setPerson] = useState({ id: "1", name: "John", age: 25 });
 
   const updateName = (newName) => {
-    setPerson(prevState => {
+    setPerson((prevState) => {
       return { ...prevState, name: newName };
     });
   };
 
   const updateAge = (newAge) => {
-    setPerson(prevState => {
+    setPerson((prevState) => {
       return { ...prevState, age: newAge };
     });
   };
 
-  return (
-    <div>
-      {/* form to update name and age */}
-    </div>
-  );
+  return <div>{/* form to update name and age */}</div>;
 };
 ```
 
 ## 2. ‘useEffect’ hook
+
 - The useEffect hook in React enables functional components to perform side effects, such as data fetching, DOM manipulation, or subscriptions. It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
 
 ### componentDidMount
@@ -105,7 +103,7 @@ const Counter = () => {
 ```js
 useEffect(() => {
   // Perform initialization or side effects
-  console.log("The component is rendered initially.")
+  console.log("The component is rendered initially.");
 }, []);
 ```
 
@@ -118,7 +116,7 @@ useEffect(() => {
 ```js
 useEffect(() => {
   // Effect runs after every render
-  console.log("The component is rendered.")
+  console.log("The component is rendered.");
 });
 ```
 
@@ -127,7 +125,7 @@ useEffect(() => {
 ```js
 useEffect(() => {
   // Perform side effects after state or props update
-  console.log("dependency1 or dependency2 have updated.")
+  console.log("dependency1 or dependency2 have updated.");
 }, [dependency1, dependency2]);
 ```
 
@@ -140,10 +138,10 @@ useEffect(() => {
 ```js
 useEffect(() => {
   // Perform side effects
-  console.log("dependency is updated.")
+  console.log("dependency is updated.");
   return () => {
     // Cleanup tasks
-    console.log("The component is unmounted.")
+    console.log("The component is unmounted.");
   };
 }, [dependency]);
 ```
@@ -158,7 +156,7 @@ useEffect(() => {
 
 ```js
 // themeContext.js
-import React, { createContext } from 'react';
+import React, { createContext } from "react";
 
 export const ThemeContext = createContext(null);
 ```
@@ -169,11 +167,11 @@ export const ThemeContext = createContext(null);
 
 ```js
 function App() {
-  const theme = 'dark';
+  const theme = "dark";
 
   return (
     <ThemeContext.Provider value={theme}>
-      <MyComponent/>
+      <MyComponent />
     </ThemeContext.Provider>
   );
 }
@@ -184,20 +182,21 @@ function App() {
 - Now, any component within the provider can access the context using the useContext hook.
 
 ```js
-import React, { useContext } from 'react';
-import ThemeContext from './ThemeContext';
+import React, { useContext } from "react";
+import ThemeContext from "./ThemeContext";
 
 function MyComponent() {
   const theme = useContext(ThemeContext);
 
-  return <div 
-            style={{
-               background: theme === 'dark' ?
-                    '#222' : '#fff' }
-            }
-         >
-            Content
-         </div>;
+  return (
+    <div
+      style={{
+        background: theme === "dark" ? "#222" : "#fff",
+      }}
+    >
+      Content
+    </div>
+  );
 }
 ```
 
@@ -218,25 +217,21 @@ const Counter = () => {
   // Step 1: Define initial state
   const initialState = { count: 0 };
 
-  return (
-    <div>
-      content
-    </div>
-  );
+  return <div>content</div>;
 };
 ```
 
 ### Reducer Function
 
 - You define a reducer function. This function takes two arguments: the current state and an action, and returns the new state based on the action. The reducer function is responsible for updating the state.
-  
+
 ```js
 // Step 2: Define reducer function
 const reducer = (state, action) => {
   switch (action.type) {
-    case 'increment':
+    case "increment":
       return { count: state.count + 1 };
-    case 'decrement':
+    case "decrement":
       return { count: state.count - 1 };
     default:
       throw new Error();
@@ -251,15 +246,15 @@ const reducer = (state, action) => {
 ```js
 const Counter = () => {
   const initialState = { count: 0 };
-  
+
   // Step 3: Use useReducer hook
   const [state, dispatch] = useReducer(reducer, initialState);
 
   return (
     <div>
       Count: {state.count}
-      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
-      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
+      <button onClick={() => dispatch({ type: "increment" })}>+</button>
+      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
     </div>
   );
 };
@@ -276,7 +271,7 @@ const Counter = () => {
 Example 1
 
 ```js
-import React, { useRef } from 'react';
+import React, { useRef } from "react";
 
 function MyComponent() {
   // Create a ref to store a DOM element
@@ -305,7 +300,7 @@ In this example, myInputRef is created using useRef, and it's attached to the in
 Example 2
 
 ```js
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef } from "react";
 
 function Counter() {
   // State for storing the count
@@ -320,10 +315,10 @@ function Counter() {
     if (intervalIdRef.current !== null) {
       return; // If already running, do nothing
     }
-    
+
     // Start the counter
     intervalIdRef.current = setInterval(() => {
-      setCount(prevCount => prevCount + 1);
+      setCount((prevCount) => prevCount + 1);
     }, 1000);
   };
 
@@ -333,7 +328,7 @@ function Counter() {
     if (intervalIdRef.current === null) {
       return; // If not running, do nothing
     }
-    
+
     // Stop the counter
     clearInterval(intervalIdRef.current);
     intervalIdRef.current = null;
@@ -350,6 +345,7 @@ function Counter() {
 
 export default Counter;
 ```
+
 - We have a state variable count that stores the current count.
 - We create a ref named intervalIdRef using useRef(null). This ref will be used to store the ID returned by setInterval so that we can later clear the interval.
 - startCounter function starts a timer using setInterval and increments the count every second. It first checks if the counter is already running to avoid starting multiple timers simultaneously.

blog/Cybersecurity-in-Cloud-Computing.md

@@ -11,89 +11,113 @@ In this guide, we will explore the key aspects of cybersecurity in cloud computi
 <!-- truncate -->
 
 ## Overview
+
 Cloud computing offers scalable resources and convenience, but it also introduces unique cybersecurity challenges. This guide covers key aspects of cybersecurity in cloud computing, including common threats, best practices, and security frameworks.
 
 ## Table of Contents
 
 ## 1. Introduction to Cloud Computing
+
 Cloud computing provides on-demand delivery of computing resources over the internet, enabling businesses to scale and innovate quickly. However, this flexibility comes with cybersecurity challenges that need to be addressed to protect sensitive data and applications.
 
 ## 2. Common Cloud Security Threats
 
 ### Data Breaches
+
 Data breaches in the cloud can occur due to misconfigured storage, weak authentication, or vulnerabilities in the cloud infrastructure.
 
 ### Insider Threats
+
 Insider threats involve malicious activities by employees or other trusted individuals who have access to sensitive data.
 
 ### Account Hijacking
+
 Attackers can gain unauthorized access to cloud accounts through phishing, brute force attacks, or exploiting vulnerabilities.
 
 ### Denial of Service (DoS) Attacks
+
 DoS attacks overwhelm cloud services with traffic, causing disruptions and potentially leading to data loss.
 
 ## 3. Cloud Security Models
 
 ### Shared Responsibility Model
+
 The shared responsibility model divides security responsibilities between the cloud provider and the customer. Providers secure the infrastructure, while customers are responsible for securing their data and applications.
 
 ### Security as a Service (SECaaS)
+
 SECaaS delivers security services through the cloud, offering solutions like antivirus, intrusion detection, and security monitoring.
 
 ## 4. Best Practices for Cloud Security
 
 ### Data Encryption
+
 Encrypt data both in transit and at rest to protect it from unauthorized access.
 
 ### Identity and Access Management (IAM)
+
 Implement strong IAM practices, including multi-factor authentication (MFA) and least privilege access, to control who can access cloud resources.
 
 ### Regular Audits and Compliance
+
 Conduct regular security audits and ensure compliance with relevant standards and regulations.
 
 ### Secure Application Development
+
 Follow secure coding practices and regularly update applications to fix security vulnerabilities.
 
 ## 5. Cloud Security Frameworks and Standards
 
 ### NIST Cloud Computing Security
+
 The National Institute of Standards and Technology (NIST) provides guidelines and best practices for securing cloud environments.
 
 ### ISO/IEC 27017
+
 This international standard offers guidelines for information security controls specific to cloud services.
 
 ### CSA Cloud Controls Matrix
+
 The Cloud Security Alliance (CSA) provides a framework of security controls tailored to cloud computing environments.
 
 ## 6. Implementing Cloud Security
 
 ### Choosing a Secure Cloud Provider
+
 Select a cloud provider with strong security measures, certifications, and a proven track record.
 
 ### Configuring Security Settings
+
 Properly configure security settings, such as firewalls, encryption, and access controls, to protect cloud resources.
 
 ### Monitoring and Incident Response
+
 Implement continuous monitoring and establish an incident response plan to quickly detect and respond to security incidents.
 
 ## 7. Case Studies of Cloud Security Breaches
 
 ### Analysis of Major Incidents
+
 Examine major cloud security breaches to understand how they occurred and the impact they had.
 
 ### Lessons Learned
+
 Learn from past incidents to improve security measures and prevent similar breaches in the future.
 
 ## 8. Future Trends in Cloud Security
 
 ### AI and Machine Learning
+
 Artificial intelligence and machine learning can enhance cloud security by detecting and responding to threats in real-time.
 
 ### Quantum Computing
+
 Quantum computing poses new challenges and opportunities for cloud security, particularly in the field of encryption.
 
 ### Zero Trust Architecture
+
 Zero trust architecture assumes that threats can come from both outside and inside the network, and it implements strict access controls and continuous monitoring.
 
 ## 9. Conclusion
+
 Securing cloud environments is crucial for protecting sensitive data and maintaining trust. By understanding the unique challenges of cloud security and implementing best practices, organizations can leverage the benefits of cloud computing while minimizing risks.