Skip to content

Instantly share code, notes, and snippets.

View HasanBakar's full-sized avatar
🏠
Working from home

Abu Bakar HasanBakar

🏠
Working from home
14 followers · 8 following
View GitHub Profile
@HasanBakar
HasanBakar / ScoreBeat Frontend testing.md
Last active August 30, 2025 12:52

1 🔴 hydrated

Console Error

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

  • A server/client branch if (typeof window !== 'undefined'). - Variable input such as Date.now() or Math.random() which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error$ npm run lint

scorebeat@0.1.0 lint

@HasanBakar
HasanBakar / Javascript_advance_concepts.md
Created January 12, 2025 13:46

The image outlines different types of data structures in JavaScript, categorized into Keyed Collections, Structured Data, and Indexed Collections. Here's an explanation of each with examples:

Keyed Collections

Keyed collections are objects that store data as key-value pairs. They include Map, WeakMap, Set, and WeakSet.

1. Map

  • A collection of key-value pairs where keys can be of any type.
  • Maintains the order of insertion.
@HasanBakar
HasanBakar / Dreams Accademy.md
Created December 19, 2024 12:34

Question 2

#!/bin/python3

import math
import os
import random
import re
import sys
@HasanBakar
HasanBakar / Final QA.md
Created November 29, 2024 13:12

1. Question: Creating a React Project with Vite

i. Commands to Create a New React Project

  1. Install Node.js (if not already installed).
  2. Create a new React project:
    • Method 1: 
      npm create vite@latest my-react-app
cd my-react-app

npm install

@HasanBakar
HasanBakar / HTML.md
Created November 28, 2024 22:09

A comprehensive list of important HTML concepts for modern web development :

1. Basic Structure of HTML

  • HTML document structure (<!DOCTYPE html>, <html>, <head>, <body>)
  • Metadata tags (<title>, <meta>)
  • Using semantic HTML (<header>, <main>, <footer>, <section>, <article>, <nav>)

2. Text Content and Formatting

  • Text elements (<p>, <span>, <div>, <strong>, <em>, <blockquote>, <code>)
  • Headings (to) and their importance for SEO and accessibility
@HasanBakar
HasanBakar / CBI-034 Mid Term QA.md
Created November 28, 2024 21:53

Answers:

1. Basic HTML Page

Option 1: Basic Structure

<!DOCTYPE html>
<html lang="en">
@HasanBakar
HasanBakar / Ethical_Hacking.md
Last active June 13, 2025 02:38

Ethical Hacking 12-Week Study Plan: Core 20% Concepts

This 12-week study plan follows the 80-20 rule, focusing on the 20% of concepts that will yield 80% of your results in ethical hacking. The goal is to provide you with a solid foundation and practical knowledge to start building projects while also encouraging problem-solving and critical thinking.

Phase 1: Foundation and Setup (Weeks 1-3)

Week 1: Introduction to Ethical Hacking and Networking Basics

  • Goal: Understand the core concepts of ethical hacking and networking.
  • Topics:
  • What is ethical hacking? ✅✅✅
@HasanBakar
HasanBakar / Lecture_12.md
Created September 28, 2024 08:59

Lecture 12: Components and Props

  • Functional Components:

    • Components written as JavaScript functions that return JSX.
    function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

  • Class Components:

@HasanBakar
HasanBakar / Lecture_11.md
Created September 28, 2024 08:52

Lecture 11: Setting up a React Project

  • Using vite:
    • Fast build tool for modern web projects.
    • Command to create a new React project: 
      npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev
@HasanBakar
HasanBakar / Lecture_10.md
Created September 28, 2024 08:47

Lecture 10: Introduction to React.js

  • What is React?
    • React is a JavaScript library for building user interfaces.
    • React allows developers to create reusable UI components, making the development process more efficient.
  • Benefits of React:
    • Component-based architecture: Breaks down the UI into independent, reusable components.
    • Declarative: You describe what the UI should look like, and React handles updates efficiently.
    • Virtual DOM: React uses a lightweight copy of the real DOM, leading to better performance.
    • Unidirectional data flow: Data flows in one direction, making debugging easier.