```bash
npm i web3 @web3-react/core @web3-react/metamask
```

@web 8.2.0 - install packages

```ts
import { initializeConnector } from '@web3-react/core'
import { MetaMask } from '@web3-react/metamask'

export const [metaMask, useMetaMask] = initializeConnector<MetaMask>(
  (actions) => new MetaMask({ actions })
)
```

@web 8.2.0 - connectors/metaMask.ts

```ts
import { Web3ReactHooks } from '@web3-react/core'
import { MetaMask } from '@web3-react/metamask'
import { metaMask, useMetaMask } from './metaMask'

export const connectors: [MetaMask, Web3ReactHooks][] = [[metaMask, useMetaMask]]
```

@web 8.2.0 - connectors/index.ts

```tsx
import { Web3ReactProvider } from '@web3-react/core'
import { connectors } from './connectors'

function App() {
  return (
    <Web3ReactProvider connectors={connectors}>
      {/* Your app code goes here */}
    </Web3ReactProvider>
  )
}
```

@web 8.2.0 - App.tsx

```tsx
import { useEffect, useState } from "react";
import { useWeb3React } from "@web3-react/core";
import Web3 from "web3";

export const MetaMaskBtn = () => {
  const [loading, setLoading] = useState(false)

  … 

  const onConnectMetaMask = async () => {
    const chainId = process.env.SUPPORT_CHAIN_ID || "5";
    try {
      if (
        chainId &&
        window.ethereum &&
        window.ethereum.networkVersion !== chainId
      ) {
        try {
          await window.ethereum.request({
            method: "wallet_switchEthereumChain",
            params: [{ chainId: Web3.utils.toHex(parseInt(chainId)) }],
          });
        } catch (err: any) {
          console.log("Network changed rejected", err);
        }
      } else {
        setLoading(true);
        try {
          await connector.activate(chainId);
        } catch (err) {
          console.log("User rejected the request", err);
          setLoading(false);
        }
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    {/* Your html code goes here */}
  )
}
```

@web 8.2.0 - components/MetaMaskBtn/index.tsx

```ts
const onDisconnectMetaMask = () => {
    if (connector?.deactivate) {
      connector.deactivate()
    } else {
      connector.resetState()
    }
}
```

@web 8.2.0 - onDisconnectMetaMask

<p>As someone who has previously worked with the <a href="https://www.npmjs.com/package/@web3-react/core">@web-react/core</a> legacy version 6.1.9, I understand how daunting it can be to update to the latest version, 8.2.0. However, as I have just started a new freelance job and discovered that they are using the latest version, I see the importance of familiarizing myself with the new syntax.
In this article, I want to share my experience of updating to @web-react/core v8.2.0 and guide you through the changes in syntax and functionality. By the end of this article, you will have a better understanding of the new updates and be able to use @web-react/core v8.2.0 confidently in your projects.</p>


Connect Your React App to the Blockchain with MetaMask and @web3-react v8.2.0

K6 simple result

```ts
import http from 'k6/http';
import { check, sleep } from 'k6';

export const options = {
  vus: 10,
  // duration: '30s',
  thresholds: {
    http_req_duration: ['p(95)<1500'],
  },
  tags: {
    environment: 'production',
  },
  stages: [
    { duration: '10s', target: 100 },
    { duration: '20s', target: 200 },
  ],
};

export default function () {
  const res = http.post(
    'http://localhost:3000/user',
    JSON.stringify({
      name: `User ${__VU}-${__ITER}`,
      email: `user${__VU}-${__ITER}@gmail.com`,
      password: 'password',
    }),
    { headers: { 'Content-Type': 'application/json' } },
  );
  check(res, { 'Status was 201: ': (r) => [200, 201].includes(r.status) });
  sleep(1);
}
```

Load Testing K6 - k6 full options

K6 load test full option result

<p>Load testing is like taking your application to the gym - it helps you build up its strength and endurance so it can handle any amount of traffic you throw at it. Just like how a personal trainer helps you identify weaknesses in your body, load testing helps you spot performance issues and bottlenecks in your application. So, grab your sweatbands and protein powder, because in this article we'll be pumping some iron with <a href="https://nestjs.com/">NestJS</a> and <a href="https://k6.io/">k6</a>, a powerful open-source load testing tool.</p>


How to Master Load Testing in NestJS with k6

```jsx
import "./App.css";

function App() {
  const [className, setClassName] = useState("");
  const [results, setResults] = useState([]);

  return (
    <div className="App">
      <header className="App-header">
        <p>
          Drag and drop one or multiple files or directories into the rectangle
        </p>
        <div
          id="dropzone"
          className={className}
          onDragOver={onDragOver}
          onDragEnter={onDragEnter}
          onDragLeave={onDragLeave}
          onDrop={onDropItems}
        >
          Drop your directory here
        </div>

        {!!results.length &&
          results.map((result) => <div key={result.path}>{result.path}</div>)}
      </header>
    </div>
  );
}

export default App;
```

Multi upload HTML markdown

```jsx
const supportsFileSystemAccessAPI =
  "getAsFileSystemHandle" in DataTransferItem.prototype;
const supportsWebkitGetAsEntry =
  "webkitGetAsEntry" in DataTransferItem.prototype;

const onDragOver = (e) => {
  e.preventDefault();
};

const onDragEnter = () => {
  setClassName("outline");
};

const onDragLeave = () => {
  setClassName("");
};

const onDropItems = async (e) => {
  // Prevent navigation.
  e.preventDefault();
  if (!supportsFileSystemAccessAPI && !supportsWebkitGetAsEntry) {
    // Cannot handle directories.
    return;
  }
  // Unhighlight the drop zone.
  setClassName("");

  const files = await getAllFileEntries(e.dataTransfer.items);
  const flattenFiles = files.reduce((acc, val) => acc.concat(val), []);
  console.log("Results here dude!!! : ", flattenFiles);
  setResults(flattenFiles);
};

const getAllFileEntries = async (dataTransferItemList) => {
  let fileEntries = [];
  // Use BFS to traverse entire directory/file structure
  let queue = [];
  // Unfortunately dataTransferItemList is not iterable i.e. no forEach
  for (let i = 0; i < dataTransferItemList.length; i++) {
    queue.push(dataTransferItemList[i].webkitGetAsEntry());
  }
  while (queue.length > 0) {
    let entry = queue.shift();
    if (entry.isFile) {
      fileEntries.push(entry);
    } else if (entry.isDirectory) {
      let reader = entry.createReader();
      queue.push(...(await readAllDirectoryEntries(reader)));
    }
  }
  // return fileEntries;
  return Promise.all(
    fileEntries.map((entry) => readEntryContentAsync(entry))
  );
};

// Get all the entries (files or sub-directories) in a directory by calling readEntries until it returns empty array
const readAllDirectoryEntries = async (directoryReader) => {
  let entries = [];
  let readEntries = await readEntriesPromise(directoryReader);
  while (readEntries.length > 0) {
    entries.push(...readEntries);
    readEntries = await readEntriesPromise(directoryReader);
  }
  return entries;
};

// Wrap readEntries in a promise to make working with readEntries easier
const readEntriesPromise = async (directoryReader) => {
  try {
    return await new Promise((resolve, reject) => {
      directoryReader.readEntries(resolve, reject);
    });
  } catch (err) {
    console.error(err);
  }
};

const readEntryContentAsync = async (entry) => {
  return new Promise((resolve, reject) => {
    let reading = 0;
    const contents = [];

    reading++;
    entry.file(async (file) => {
      reading--;
      const rawFile = file;
      rawFile.path = entry.fullPath;
      contents.push(rawFile);

      if (reading === 0) {
        resolve(contents);
      }
    });
  });
};
```


Multi upload Javascript

<p>Are you tired of dragging and dropping files one by one like it's 1995? Well, fear not! In this tutorial, we're gonna make drag and drop work for directories like a charm, using nothing but a little bit of JavaScript and a dash of magic.</p>
<p><em>Disclaimer: &quot;Please don't take this seriously, I'm just assuming all of my readers are React wizards who could create a React app using just their minds. So, I'll spare you the boredom of explaining how to use create-react-app.&quot;</em></p>


Multi-File Upload Made Easy: How to Drag and Drop Directories in Your Web App

<p>As I reflect on my career path in IT, I'm reminded that every journey is unique and worth sharing. Perhaps my experiences will resonate with others in the industry, or maybe they'll simply find my story entertaining. Either way, I hope that by sharing my unique perspective, I can provide some value to those who read it.</p>


Techie's Saga

Ctrl+Alt+Humor: A Techie's Saga [1]

```css
.text-box {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

Truncate string text-overflow: ellipsis;

```css
.text-box {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* From which line on to truncate */
  overflow: hidden;
}
```

Truncate string -webkit-line-clamp

<p>String truncation is something I always have to Google whenever I need to use it 😆. To keep it short, this involves replacing any text beyond the desired number of lines with three dots. It's a simple yet magical solution that can save a lot of space and make your text more visually appealing.</p>
