<figure><img alt="" src="https://cdn-images-1.medium.com/max/864/1*n9y7kWtUdCdo-cEQrUqXaA.png"><figcaption>Face recognition</figcaption></figure>Face recognition is a technology that identifies or verifies individuals by analyzing and comparing their facial features with a database of known faces. It goes beyond face detection, which simply detects the presence of faces in images or videos.
Face recognition involves several steps:
<ol>
<li>Face Detection: Face detection algorithms initially detect faces in an image or video frame. This step locates and extracts the facial regions.</li>
<li>Feature Extraction: The facial features of the face’s position, shape, and texture are extracted. These features are often represented as mathematical vectors or templates, capturing unique characteristics that distinguish one face from another.</li>
<li>Database Comparison: The extracted facial features are compared with a pre-existing database of known faces. The database may contain a set of templates or feature vectors associated with specific individuals.</li>
<li>Matching and Identification: The system compares the extracted features with the database to find the closest match or matches. If a match is found, the identity of the person associated with the matched template is determined. In cases where the system is designed for verification purposes, the match is used to confirm or reject the claimed identity of an individual.</li>
</ol>
In this blog post, we will deep dive into how to build your own face recognition web app using the face-api.js library. With face-api.js, you can easily detect and recognize faces in images or real-time video streams right in the browser. Let’s dive in and create our own face recognition web app!
<h4>Prerequisites</h4>
To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. In case you are new to JavaScript don’t worry I have mentioned the GitHub link to the whole code implementation which uses Next JS and also attached a link to a live demo where you can play around.
Let’s dive into the coding part.
<h4>Load models using face-api.js</h4>
To load models first you need to download the required model files. Find all the required models in my <a href="https://github.com/NSV1991/nextjs-portfolio/tree/main/public/models">GitHub</a> repository. After downloading we need to load these models using face-api.js.
<pre>import { loadFaceLandmarkModel, loadFaceRecognitionModel, loadSsdMobilenetv1Model, } from 'face-api.js'; const MODEL_URL = '/models'; const loadModels = async () =&gt; { await loadSsdMobilenetv1Model(MODEL_URL); await loadFaceLandmarkModel(MODEL_URL); await loadFaceRecognitionModel(MODEL_URL); }; useEffect(() =&gt; { loadModels(); }, []);</pre>
We have loaded 3 models
<ol>
<li>Mobilenet SSD: Used for detecting faces and getting bounding box data to highlight the faces in an image.</li>
<li>Face Landmark: Used for extracting data like face position, shape, and texture.</li>
<li>Face Recognition: Used for comparing facial features with existing data from the database.</li>
</ol>
<h4>Extract face data from the image to create a database</h4>
We will need some image database with facial features data to compare and recognize the person in the image. For that, we will use face-API functions like those given in the below example.
<pre>import { FaceMatcher, LabeledFaceDescriptors, detectSingleFace, } from 'face-api.js'; const FACE_MATCHER_THRESHOLD = 0.6; const processImagesForRecognition = async () =&gt; { let labeledFaceDescriptors = []; labeledFaceDescriptors = await Promise.all( imageElements?.map(async (imageEle) =&gt; { if (imageEle) { const label = imageEle?.alt.split(' ')[0]; const faceDescription = await detectSingleFace(imageEle) .withFaceLandmarks() .withFaceDescriptor(); if (!faceDescription) { throw new Error(`no faces detected for ${label}`); } const faceDescriptors = [faceDescription.descriptor]; return new LabeledFaceDescriptors(label, faceDescriptors); } }) ); const faceMatcher = new FaceMatcher( labeledFaceDescriptors, FACE_MATCHER_THRESHOLD ); };</pre>
We are iterating through the uploaded images for creating the database. We have used the detectSingleFace function for detecting a face from an image, then extracting facial features using withFaceLandmarks and converting them into readable descriptions using withFaceDescriptor method. At last, we are creating an instance of the faceMatcher using FaceMatcher constructor by providing all data extracted from our images.
<h4>Recognize face from Image</h4>
We have extracted data from images to create a database for recognition. Now we have to implement recognition logic for our query image or image from which the faces need to be recognized.
<pre>import { detectAllFaces, draw, matchDimensions, resizeResults, } from 'face-api.js'; const loadRecognizedFaces = async () =&gt; { const resultsQuery = await detectAllFaces(queryImageElement.current) .withFaceLandmarks() .withFaceDescriptors(); await matchDimensions( queryCanvasElement.current, queryImageElement.current ); const results = await resizeResults(resultsQuery, { width: (queryImageElement.current as HTMLImageElement).width, height: (queryImageElement.current as HTMLImageElement).height, }); const queryDrawBoxes = results.map((res) =&gt; { const bestMatch = faceMatcher.findBestMatch(res.descriptor); return new draw.DrawBox(res.detection.box, { label: bestMatch.toString(), }); }); queryDrawBoxes.forEach((drawBox) =&gt; drawBox.draw(queryCanvasElement.current as unknown as HTMLCanvasElement) ); };</pre>
In the above code, we have used the detextAllFaces method by chaining it withFaceLandmarks and withFaceDescriptors to detect and extract facial feature data from the image.
We will use canvas to highlight detected faces by drawing a rectangle around them. First, we need to fetch the dimensions of our image element and canvas element to resize the canvas as per the image element. By doing this we make sure that we are drawing the bounding box in the correct position.
Now we find the best match from our database created earlier using the findBestMatch method from the faceMatcher instance.
<pre>const bestMatch = faceMatcher.findBestMatch(res.descriptor);</pre>
Finally, we draw the bounding box over the canvas using data from bestMatch object. The final result should highlight the faces with name labels in the image.
<h4>Conclusion</h4>
Congratulations! You have successfully built a face recognition web app using face-api.js. The above code is written in NextJS, but you can take references and build your web app in any JavaScript framework. In the references below you can find links for code implementation and a link to the demo.
Happy coding!
<h4>Reference</h4>
GitHub code for face recognition: <a href="https://github.com/NSV1991/nextjs-portfolio/tree/main/src/pages/work/face-recognition">https://github.com/NSV1991/nextjs-portfolio/tree/main/src/pages/work/face-recognition</a>
Live demo for face recognition: <a href="https://neerajvageele.com/work/face-recognition">https://neerajvageele.com/work/face-recognition</a>
Find more from my work <a href="https://neerajvageele.com/work">https://neerajvageele.com/work</a>
GitHub code for face-api.js: <a href="https://github.com/justadudewhohacks/face-api.js/tree/master">https://github.com/justadudewhohacks/face-api.js/tree/master</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=7982cd4a8bdb" width="1" height="1" alt="">

Build your own face recognition web app using face-api.js

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*L_2fYpEIjLef72Oc_6g-xQ.png"><figcaption>Object Recognition in Image</figcaption></figure>Object detection is a technique of identifying objects in images or videos using machine learning or deep learning algorithms. We are going to use TensorFlow.js which is a JavaScript library for machine learning. We will use coco-ssd, one of the models from TensorFlow which is used to classify and locate the object in an image. In this blog, we will dive into the process of implementing object detection in images using TensorFlow within a Next.js environment.
<h4>Prerequisites</h4>
<ol>
<li>TensorFlow.js</li>
<li>COCOSSD Model</li>
<li>NextJS</li>
</ol>
Before we move to implementation, please create and run NextJS application. You can find details on creating NextJS project <a href="https://nextjs.org/docs/getting-started/installation">here</a>.
<h4>Implementation steps</h4>
<ol>
<li>Install required libraries</li>
<li>Implement and manage state for image upload feature</li>
<li>Load COCOSSD model</li>
<li>Use the COCOSSD method to scan the image and get the results</li>
<li>Draw image on canvas</li>
<li>Use results to draw a rectangle to highlight detected objects on the canvas</li>
</ol>
<h4>Install required libraries</h4>
Use the below commands to install TensorFlow.js and COCOSSD Model.
<pre>npm install @tensorflow/tfjs @tensorflow-models/coco-ssd</pre>
<h4>Implement and manage state for image upload feature</h4>
Create a file in the pages folder and copy the below code for image upload.
<pre>export default function ObjectDetection() { const canvasEle = useRef(null); const imageEle = useRef(null); const [uploadedImage, setUploadedImage] = useState(null); return ( &lt;div className={styles.container}&gt; &lt;div className={styles.imageSection}&gt; &lt;div className={styles.previewArea}&gt; {uploadedImage &amp;&amp; ( &lt;&gt; &lt;Image ref={imageEle} src={uploadedImage} alt='sample image' width={500} height={500} style={{ objectFit: 'fill' }} /&gt; &lt;canvas ref={canvasEle} className={styles.canvas} width={500} height={500} /&gt; &lt;/&gt; )} &lt;/div&gt; &lt;div&gt; &lt;label htmlFor='fileSelect' className={styles.fileUpload}&gt; &lt;span&gt; &lt;i className='bi bi-upload'&gt;&lt;/i&gt; &lt;/span&gt; Upload an image &lt;/label&gt; &lt;input id='fileSelect' type='file' onChange={setImage} hidden /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; ); }</pre>
<h4>Load COCOSSD model</h4>
Import COCOSSD model in the component and use the load method to initialize the model, before we can use it to scan images.
Note: Make sure to place a loader in UI as it will take few seconds to load COCOSSD model.
<pre> import { load as cocoModalLoad } from '@tensorflow-models/coco-ssd'; export default function ObjectDetection() { const [objectDetector, setObjectDetectors] = useState(null); const [isLoading, setIsLoading] = useState(true); const loadOCRModel = async () =&gt; { const model = await cocoModalLoad(); setObjectDetectors(model); setIsLoading(false); }; useEffect(() =&gt; { loadOCRModel(); }, []); } </pre>
<h4>Use the COCOSSD method to scan the image and get the results</h4>
Use the initialized object of the model to detect objects from the image. Also, create a button Start detection to trigger image detection.
<pre>export default function ObjectDetection() { const [detectedObjects, setDetectedObjects] = useState([]); const startDetecting = async () =&gt; { const image = browser.fromPixels(imageEle.current); const predictions = await objectDetector.detect(image); setDetectedObjects(predictions); }; }</pre>
<h4>Draw image on canvas</h4>
Before we highlight the detected objects in the image we have to draw the image on canvas.
<pre> const draw = (ctx) =&gt; { canvasEle.current.width = imageEle.current.width; canvasEle.current.height = imageEle.current.height; ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, imageEle.current.width, imageEle.current.height); ctx.drawImage( imageEle.current, 0, 0, imageEle.current.width, imageEle.current.height ); };</pre>
Here ctx param represents canvas 2d context, which is used to draw the image and shapes.
<h4>Use results to draw a rectangle to highlight detected objects on the canvas</h4>
In the last step, we will use the prediction results from the model and use the data to highlight detected objects on the canvas image.
<pre>const draw = (ctx, objects) =&gt; { canvasEle.current.width = imageEle.current.width; canvasEle.current.height = imageEle.current.height; // Clear part of the canvas ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, imageEle.current.width, imageEle.current.height); ctx.drawImage( imageEle.current, 0, 0, imageEle.current.width, imageEle.current.height ); for (let i = 0; i &lt; objects.length; i += 1) { // Draw the background rectangle for text ctx.fillStyle = 'rgba(0, 128, 0, 0.5)'; ctx.strokeStyle = 'white'; ctx.fillRect( objects[i].bbox[0], objects[i].bbox[1], objects[i].bbox[2], 20 ); // Write image class on top left of rect ctx.font = '16px Arial'; ctx.fillStyle = 'white'; ctx.fillText( objects[i].class, objects[i].bbox[0] + 4, objects[i].bbox[1] + 16 ); // draw rectangle using data from prediction result ctx.beginPath(); ctx.rect( objects[i].bbox[0], objects[i].bbox[1], objects[i].bbox[2], objects[i].bbox[3] ); ctx.strokeStyle = 'green'; ctx.stroke(); ctx.closePath(); } };</pre>
<h4>Conclusion</h4>
By following the above steps one can easily implement object detection using TensorFlow.JS and COCO SSD model in NextJS. Find the whole implementation with proper UI on my GitHub project demo given below. You can also check the live demo running on my website given below. Stay tuned for more technical blogs.
Github link:- <a href="https://github.com/NSV1991/nextjs-portfolio/blob/main/src/pages/work/object-detection/index.jsx">https://github.com/NSV1991/nextjs-portfolio/blob/main/src/pages/work/object-detection/index.jsx</a>
Live demo:- <a href="https://neerajvageele.com/work/object-detection">https://neerajvageele.com/work/object-detection</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3577e64280bf" width="1" height="1" alt="">

Object detection in the image using TensorFlow in NextJS

<figure><img alt="" src="https://cdn-images-1.medium.com/max/960/1*RjhamtBEg7GvplPUv40AdQ.jpeg"></figure><h4>What is SEO?</h4>
SEO, which stands for Search Engine Optimization, is a set of techniques used to improve the visibility and ranking of websites and web pages in search engine results pages (SERPs) such as Google, Bing, and Yahoo.
<h4>How NEXTJS helps to improve SEO?</h4>
NEXTJS comes with built-in features and optimizations that can help improve your website’s SEO. Here are some ways to use NEXTJS to improve SEO:
<ol>
<li>Server Side Rendering</li>
<li>Automatic code splitting</li>
<li>Dynamic meta tags</li>
<li>Sitemap generation</li>
<li>Optimized images</li>
<li>Schema.org integration</li>
</ol>
Let’s review how metadata has been traditionally set in NEXTJS before we explore the new Metadata API.
<h4>How to set static metadata in NEXTJS?</h4>
In NEXTJS, you can set static metadata in the Head component by defining the metadata directly in the component’s JSX code. Here’s how to set static metadata in NEXTJS:
<pre>import Head from 'next/head'; function MyPage() { return ( &lt;&gt; &lt;Head&gt; &lt;title&gt;My Page Title&lt;/title&gt; &lt;meta name="description" content="My page description" /&gt; &lt;/Head&gt; {/* page content */} &lt;/&gt; ); } export default MyPage;</pre>
<h4>How to set dynamic metadata in NEXTJS?</h4>
In NEXTJS, you can dynamically set metadata by passing props to the Head component. Here’s how to dynamically set metadata in NEXTJS:
<pre>export async function getStaticProps() { const pageTitle = "My Page Title"; const pageDescription = "My page description"; return { props: { pageTitle, pageDescription } } } function MyPage({pageTitle, pageDescription}) { return ( &lt;&gt; &lt;Head&gt; &lt;title&gt;{pageTitle}&lt;/title&gt; &lt;meta name="description" content={pageDescription} /&gt; &lt;/Head&gt; {/* page content */} &lt;/&gt; ); } export default MyPage;</pre>
<h4>How to set dynamic metadata using New Metadata API in NEXTJS 13.2?</h4>
In NEXTJS, you can dynamically set metadata using a new Metadata API, allowing you to define metadata (e.g. title, meta, and link tags inside your HTML head element) by exporting a Metadata object from a layout or page.
<pre>// either Static metadata export const metadata = { title: 'Page title', }; // Output: // &lt;head&gt; // &lt;title&gt;Page title&lt;/title&gt; // &lt;/head&gt; // or Dynamic metadata export async function generateMetadata({ params, searchParams }) { const details = await getPageDetails(params.id); return { title: details.title }; } // Output: // &lt;head&gt; // &lt;title&gt;My Unique Page title&lt;/title&gt; // &lt;/head&gt; function MyPage() { return ( &lt;&gt; {/* page content */} &lt;/&gt; ); } export default MyPage;</pre>
The Metadata API in NEXTJS 13.2 supports a new file-based convention in addition to the configuration-based metadata. This allows for easier customization of your web pages to improve their SEO and sharing capabilities.
<ol>
<li>opengraph-image.( jpg | png | svg )</li>
<li>twitter-image.( jpg | png | svg )</li>
<li>favicon.ico</li>
<li>icon.( ico | jpg | png | svg )</li>
<li>sitemap.( xml | js | jsx | ts | tsx )</li>
<li>robots.( txt | js | jsx | ts | tsx )</li>
<li>manifest.( json | js | jsx | ts | tsx )</li>
</ol>
As an example of file-based metadata usage, you could use it to include a favicon for your application and an open graph image for your /home page.
<pre>src -&gt; pages -&gt; contact-us -&gt; index.js -&gt; home -&gt; index.js -&gt; opengraph-image.svg</pre>
When using file-based metadata in NEXTJS, the files will automatically be served with hashed file names for caching purposes in production. Additionally, Next.js will update the relevant head elements with the appropriate metadata details, such as the asset’s URL, file type, and image size.
<pre>// Visiting "/contact-us" &lt;link rel="icon" href="&lt;computedUrl&gt;"/&gt; // Visiting "/home" &lt;link rel="icon" href="&lt;computedUrl&gt;"/&gt; &lt;meta property="og:image" content="&lt;computedUrl&gt;" type="&lt;computedType&gt;" ... /&gt;</pre>
The Metadata API now offers both config-based and file-based options, providing a complete solution for managing both static and dynamic metadata. You can access additional information about file-based metadata and review the API reference to understand how to use this feature in your application. Please note that the availability of the Metadata API may differ based on the platform or application being used.
For more exciting work visit
<a href="https://neerajvageele.com/work">https://neerajvageele.com/work</a>
Know more about me
<a href="http://neerajvageele.com/">neerajvageele.com</a>
<h4>References</h4>
<ul>
<li><a href="https://nextjs.org/blog/next-13-3#file-based-metadata-api">Next.js 13.3</a></li>
<li><a href="https://beta.nextjs.org/docs/api-reference/metadata">Metadata | Next.js</a></li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9ece81ff483e" width="1" height="1" alt="">

New metadata API in NEXT JS to improve SEO

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*y2zfnXgnFQ8kjBpD7iZSPw.png"></figure><h3>What is Builder.io?</h3>
Builder.io is a platform that allows users to create and edit websites and digital experiences without requiring any coding knowledge. It is essentially a drag-and-drop website builder that enables users to design and publish websites, landing pages, and other digital experiences quickly and easily.
The platform offers a wide range of customizable templates and design tools, including a visual editor, which allows users to create pages by dragging and dropping different elements onto a canvas. Users can also integrate their websites with various third-party tools and services, such as e-commerce platforms, marketing automation tools, and analytics software.
<h3>How to use it in your web app?</h3>
Follow below steps to integrate builder.io in your NEXT JS web app.
<h4>Get API key from Builder.io</h4>
<ol>
<li>Go to the <a href="https://builder.io/">Builder.io</a> website and sign up for an account.</li>
<li>Once you have signed up and logged in, click on your username in the top right corner of the screen.</li>
<li>You can find your Public API Key in Account Settings for the Space.</li>
<li>Within your Builder Space, go to the <a href="https://builder.io/account/space">Account Settings</a> section.</li>
<li>Click the copy icon to the right of the Public API Key field.</li>
</ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BrgvqK-OOY2PvO7wQwqTsg.png"></figure><h3>Create NEXT web app</h3>
To create a Next.js app with TypeScript, you can follow these steps:
1. Open your terminal and navigate to the directory where you want to create your project.
2. Run the following command to create a new Next.js app with TypeScript:
<pre>npx create-next-app@latest builderio-integration-next --typescript --eslint</pre>
This command creates a new Next.js app with TypeScript support and installs all the necessary dependencies.
3. Once the installation is complete, navigate to the project directory:
<pre>cd builderio-integration-next</pre>
4. You can then start the development server by running the following command:
<pre>npm run dev</pre>
This will start the development server at <a href="http://localhost:3000/">http://localhost:3000</a>.
5. You can now start building your Next.js app using TypeScript. All of your TypeScript files should have the .tsx extension, and you can import modules using the import keyword.
<h4>Install and integrate Builder.io in web app</h4>
To install Builder.io React in a Next.js app, you can follow these steps:
1. Open your terminal and navigate to your Next.js project directory.
2. Install the Builder.io React package using either npm :
<pre>npm install @builder.io/react</pre>
3. Modify your index.tsx as below
<pre> import { builder, BuilderComponent, useIsPreviewing } from '@builder.io/react'; import DefaultErrorPage from 'next/error'; builder.init(BUILDER_IO_API_KEY); export async function getStaticProps() { /* Fetch the first page from Builder that matches the current URL. The `userAttributes` field is used for targeting content, learn more here: https://www.builder.io/c/docs/targeting-with-builder */ const page = await builder .get('page', { userAttributes: { urlPath: '/' + (params?.page?.join('/') || ''), }, }) .toPromise(); return { props: { page: page || null, }, revalidate: 5, }; } export default function HomePage({ page }: any) { const isPreviewing = useIsPreviewing(); if (!page &amp;&amp; !isPreviewing) { return &lt;DefaultErrorPage statusCode={404} /&gt;; } return ( &lt;&gt; &lt;h2&gt;Builder io demo&lt;/h2&gt; &lt;BuilderComponent model='page' content={page} /&gt; &lt;/&gt; ); }</pre>
<h4>Create a home page in your Builder.io account space</h4>
To create a page for home page in builder.io follow below steps
<ol>
<li>Go to <a href="https://builder.io/content">content</a> section in your account space</li>
<li>Click on New button on top left corner of list for creating new page</li>
</ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*crdlDMe3-FV93bEcVyMhCQ.png"></figure>3. Input name and url of page you want to configure in your webapp
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZCucEz3vtBp342hD55-MZg.png"></figure>Here our page name is Home page and url is ‘/’. 4. You can select a blank page or a template to show on page.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3tp8dpmPwPVRnPWGDTxYjw.png"></figure>5. Select any template for now and click on publish to view changes.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xB5AVyeLyWrXyIlD4To76A.png"></figure>6. To configure preview URL go to cotent page and click on page settings.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PfPlxg7gAN2j2jVuk5vQ9Q.png"></figure>7. Configure the preview URL where you want to see the changes reflected. In our case we can use <a href="http://localhost:3000/">http://localhost:3000</a> where our local NEXT JS app is running. We can also provide live app URL to see the changes.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FJV4Hu1PUIw8xMqHcF136g.png"></figure>8. Save the changes and that would be all would should see the changes in your local app as below.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4PN3evWoGLLX37urnO7O7A.png"></figure><h4>Conclusion</h4>
That’s all your builder.io is successfully configured with your NEXT JS web app. It will take some time for you to configure, after successful configuration it will be easy to make changes on your page without writing code. We can also include our custom component made in ReactJS and much more.
If you want to save some time for project setup here the code already done for you, just clone and use your API KEY. You must configure it in Builder.io account.
<a href="https://github.com/NSV1991/builderio-integration-next">https://github.com/NSV1991/builderio-integration-next</a>
Find more from my latest work
<a href="https://neerajvageele.com/work">https://neerajvageele.com/work</a>
Explore my skills
<a href="https://neerajvageele.com/skill">https://neerajvageele.com/skill</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9e7181837cb" width="1" height="1" alt="">

Integrate Builder.io in your NEXT JS web app

<figure><img alt="" src="https://cdn-images-1.medium.com/max/567/1*CKAwha3zrbNfw5FB0_WvKg.jpeg"></figure>Web3, also known as the decentralized web or the blockchain web, is the next iteration of the internet. It represents a paradigm shift in the way we use the internet by enabling greater privacy, security, and user control over data. Web3 is a decentralized system that uses blockchain technology to create a more transparent and trustless internet. Here’s a simple breakdown of what Web3 is all about.
<h3>What is Web3?</h3>
Web3 is a set of protocols and technologies that enable a decentralized internet. In other words, it’s a way to create a network of computers that can communicate with each other in a secure, transparent, and decentralized way. Web3 is built on top of blockchain technology, which is a distributed ledger that records transactions in a transparent and immutable way.
The current version of the internet, Web2, is centralized and controlled by a few large corporations. Web3, on the other hand, is decentralized and gives users greater control over their data. With Web3, users can interact with applications and services without relying on intermediaries or central authorities.
<h3>How does Web3 work?</h3>
Web3 uses a decentralized network of computers to enable trustless transactions. This network is made up of nodes that run on a peer-to-peer network. Each node has a copy of the blockchain, which is a public ledger that records all transactions on the network.
When a user wants to interact with an application or service on the Web3 network, they use a decentralized application (dApp) that runs on top of the blockchain. These dApps are built on top of smart contracts, which are self-executing contracts that automatically execute the terms of the agreement between two parties.
Because the Web3 network is decentralized, there is no single point of failure or control. This means that the network is more secure and resistant to censorship or attacks. Additionally, because transactions are recorded on the blockchain, they are transparent and immutable.
<h3>What are the benefits of Web3?</h3>
The benefits of Web3 are numerous. Here are a few key advantages:
<ol>
<li>Greater privacy: With Web3, users have greater control over their data and can interact with applications without giving away personal information.</li>
<li>Enhanced security: Web3 is more secure than Web2 because it is decentralized and resistant to censorship or attacks.</li>
<li>Reduced costs: Because Web3 eliminates intermediaries, transactions can be completed more quickly and at a lower cost.</li>
<li>Increased transparency: Transactions on the Web3 network are transparent and recorded on the blockchain, which means that they cannot be altered or deleted.</li>
</ol>
<h3>What are challenges with Web3?</h3>
While Web3 has many potential benefits, there are also some potential drawbacks or challenges to consider. Here are a few cons of Web3:
<ol>
<li>Complexity: Web3 is a complex system that requires a certain level of technical expertise to use and develop on. This could limit its adoption by mainstream users and businesses.</li>
<li>Scalability: Current blockchain technology has limitations in terms of scalability, which could limit the number of transactions that can be processed on the Web3 network.</li>
<li>Energy consumption: Some blockchain networks, such as Bitcoin and Ethereum, require a significant amount of energy to maintain. This has raised concerns about the environmental impact of Web3.</li>
<li>Regulatory challenges: Because Web3 is decentralized and operates outside of traditional regulatory frameworks, it could present challenges for governments and regulators who seek to maintain control over the internet.</li>
<li>Lack of interoperability: Different blockchain networks are often not compatible with each other, which could limit the ability of Web3 to achieve widespread adoption and integration with existing systems.</li>
</ol>
<h3>Is it the future of Internet?</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/948/1*T9fDB4GGuwPofy_1gw_lrQ.jpeg"></figure>Web3 has the potential to be the future of the internet, but it is important to note that it is still a developing technology and there are many challenges that need to be addressed before it can become mainstream. However, Web3 offers several advantages over Web2, such as greater privacy, security, and user control over data, which could make it more appealing to users and businesses.
Additionally, Web3 is built on top of blockchain technology, which is a secure and transparent way to record transactions. This could lead to greater transparency and accountability in various sectors, such as finance, healthcare, and supply chain management.
While it is difficult to predict the future of technology, it is clear that Web3 has the potential to transform the way we use the internet and interact with each other. As more developers and organizations continue to build on Web3 and address the challenges it faces, it is possible that it could become the dominant paradigm for the internet in the years to come.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1f65267368c" width="1" height="1" alt="">

What is Web3? Is it future of internet?

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1003/1*gh_NUet6zu4xNTiBT-HrkA.png"></figure>React version 18 introduced several new features and improvements to the popular JavaScript library, including several new hooks. In this blog post, we’ll take a closer look at the new hooks introduced in React 18 and how you can use them in your React applications.
<h3>1. useEvent</h3>
The useEvent hook allows you to listen for a DOM event on an element. It's similar to the addEventListener method, but it returns a cleanup function that removes the event listener when the component unmounts.
Here’s an example of how you might use the useEvent hook to listen for a click event:
<pre>import { useEvent } from 'react'; function MyComponent() { useEvent(window, 'click', () =&gt; { console.log('Clicked!'); }); return &lt;div&gt;My component&lt;/div&gt;; }</pre>
In this example, we’re using the useEvent hook to listen for a click event on the window object. When the event is triggered, we log a message to the console.
<h3>2. useRootClose</h3>
The useRootClose hook allows you to close a component when the user clicks outside of it. This is particularly useful for dropdown menus or modals.
Here’s an example of how you might use the useRootClose hook to close a dropdown menu:
<pre>import { useRootClose } from 'react'; function DropdownMenu({ isOpen, onClose }) { const ref = useRef(null); useRootClose(ref, onClose); return ( &lt;div ref={ref} style={{ display: isOpen ? 'block' : 'none' }}&gt; My dropdown menu &lt;/div&gt; ); }</pre>
In this example, we’re using the useRootClose hook to listen for clicks outside of the dropdown menu. When a click is detected outside of the menu, we call the onClose function, which closes the menu.
<h3>3. useTransition</h3>
The useTransition hook allows you to add transitions to your components. It works by temporarily hiding the component while the transition is in progress, and then showing it again when the transition is complete.
Here’s an example of how you might use the useTransition hook to add a fade-in transition to a component:
<pre>import { useTransition } from 'react'; function MyComponent({ isVisible }) { const transitions = useTransition(isVisible, null, { from: { opacity: 0 }, enter: { opacity: 1 }, leave: { opacity: 0 }, }); return transitions.map(({ item, key, props }) =&gt; ( item &amp;&amp; &lt;div key={key} style={props}&gt;My component&lt;/div&gt; )); }</pre>
In this example, we’re using the useTransition hook to add a fade-in transition to our component. We pass in a boolean isVisible prop, which determines whether or not the component is visible. When the isVisible prop changes, the useTransition hook animates the opacity of the component.
<h3>Conclusion</h3>
The new hooks introduced in React 18 add powerful new functionality to the React library. With useEvent, useRootClose, and useTransition, you can easily listen for events, add transitions, and close components when the user clicks outside of them. If you're using React version 18 or later, be sure to give these new hooks a try in your next project!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d9da64634e4" width="1" height="1" alt="">

New hooks introduced in React 18

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*HSHAGoAvkTmaGZM3vWAMBg.jpeg"></figure>Cisco Webex is a cloud-based video conferencing and collaboration platform that allows users to connect and collaborate with colleagues and clients in real-time. It offers a range of features such as video and audio conferencing, screen sharing, file sharing, chat, and virtual whiteboarding.
With Webex, users can join or host meetings from anywhere with an internet connection, whether they’re using a computer, tablet, or smartphone. The platform is designed to be user-friendly and customizable, allowing users to personalize their meeting experience with various layouts and features.
<h3>Steps to integrate WebEx</h3>
First step is to create a developers account and get API credentials.
To obtain a Client ID and Client Secret for Cisco Webex, you will need to create a new OAuth integration in your Webex developer account. Here are the steps to follow:
<ol>
<li>Login with google or create a new account at <a href="https://web.webex.com/sign-in">https://web.webex.com/sign-in</a>
</li>
<li>Log in with the same email id to your Webex Developer account at <a href="https://developer.webex.com/">https://developer.webex.com</a> .</li>
</ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2IdmslgaUGms7KSwQwXqgQ.png"></figure>3. Click on “Start Building App” in the middle dashboard.
4. Choose the type of integration you want to create. For example, if you want to create an integration for a web application, select “Web App”.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nD-5pHXyXCgjtCwbrKZ-iw.png"></figure>5. Fill in the required information for your integration, such as the name and description.
6. Enter the redirect URI for your application. This is the URI where the user will be redirected after they authorize the integration.
7. Click on “Add Scopes” to select the permissions you need for your integration. For example, if you want to create and manage meetings, you will need to select the “spark:all” scope.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/661/1*CWgSpFu8guQHvOZCXF8FNA.png"></figure>8. Click on “Save Changes” to create the integration.
9. Once you have created the integration, you will see the Client ID and Client Secret on the “OAuth” tab. You can use these credentials to authenticate your application with the Webex API.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WrVXtiwNQ_wERmGH6rGGmg.png"></figure>10. You will get access token for testing purpose from <a href="https://developer.webex.com/docs/getting-started#accounts-and-authentication">https://developer.webex.com/docs/getting-started#accounts-and-authentication</a> . You must logged in to get accessToken
Note: You should keep your Client Secret secure and not share it publicly or with anyone who should not have access to it.
Second step is to install and integrate WebEx browser SDK.
<ol><li>Install WebEx widget</li></ol>
<pre>npx install-peerdeps @webex/widgets</pre>
2. To use widget simply write below code
<pre>import {WebexMeetingsWidget} from '@webex/widgets'; import '@webex/widgets/dist/css/webex-widgets.css'; export default function App() { return ( &lt;WebexMeetingsWidget style={{width: "1000px", height: "500px"}} // Substitute with any arbitrary size or use `className` accessToken="&lt;ACCESS_TOKEN&gt;" meetingDestination="Person ID or Email Address or SIP URI or Room ID" /&gt; ); }</pre>
3. Your vedio call will start if destination is valid. You can use registered email address on webex for developer account as meetingDestination.
That would be all, your video call will start. If you are new to ReactJS you can visit official documentation, link is in reference.
Reference: <a href="https://developer.webex.com/docs">https://developer.webex.com/docs</a>
<a href="https://www.npmjs.com/package/@webex/widgets/v/1.25.2">@webex/widgets</a>
<a href="https://reactjs.org/docs/getting-started.html">https://reactjs.org/docs/getting-started.html</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b90de2769078" width="1" height="1" alt="">

Video call using WebEx by Cisco in ReactJS

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*eWUjOCd3NX0YumGQSDNQAw.png"></figure>React’s useState hook is used for managing state within a functional component. It allows you to declare a state variable and provide a function to update its value. React will automatically re-render the component whenever the state changes.
Here is how the useState hook works:
1. Import the useState hook from the react library:
<pre>import React, { useState } from 'react';</pre>
2. Call the useState hook inside your functional component, by passing the initial state value as an argument:
<pre>const [isPageLoaded, setIsPageLoaded] = useState(false);</pre>
The useState hook returns an array with two elements:
<ul>
<li>The current state value, which is initially set to the provided initial state value (in this example, isPageLoaded is set to false).</li>
<li>A function to update the state value, which is conventionally named using the set prefix followed by the state variable name (in this example, setIsPageLoaded ).</li>
</ul>
3. You can use the state value and the update function in your component’s logic and JSX. For example:
<pre>function demo() { const [isPageLoaded, setIsPageLoaded] = useState(false); useEffect(()=&gt; { // if page is loading first time if(!isPageLoaded) { setIsPageLoaded(true); // to do trigger api } },[]); return ( &lt;div&gt; &lt;p&gt;Page Loaded! {isPageLoaded}&lt;/p&gt; &lt;/div&gt; ); }</pre>
In this example, the component renders a paragraph element that displays the text Page Loaded! Whenever a page is loaded, we check if it is the first time if yes, we update the set using setIsPageLoaded and we can trigger an API on page load.
Whenever the setIsPageLoaded function is called, React will update the component’s state and trigger a re-render, which will reflect the updated state value in the UI.
React useState can hold any type of data, including primitive types like string, number, and boolean, as well as more complex types like arrays and objects.
Here are some examples of how you can use useState hook to store different types of data:
<ul><li>Storing a boolean value:</li></ul>
<pre>const [isLoggedin, setIsLoggedIn] = useState(false);</pre>
<ul><li>Storing a string:</li></ul>
<pre>const [name, setName] = useState('John Doe');</pre>
<ul><li>Storing a number:</li></ul>
<pre>const [count, setCount] = useState(0);</pre>
<ul><li>Storing an array:</li></ul>
<pre>const [list, setList] = useState(['apple', 'banana', 'orange']);</pre>
<ul><li>Storing an object:</li></ul>
<pre>const [user, setUser] = useState({ name: 'John Doe', age: 30 });</pre>
Note that when updating the state using the setter function returned by useState, you should always provide the new state value rather than trying to modify the existing state directly. This is because React uses the new value to trigger a re-render of the component.
I hope you have got some basic understanding of useState hook. To learn more about React you can go through the official documentation.
<a href="https://reactjs.org/docs/getting-started.html">Getting Started — React (reactjs.org)</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=56288eea8fcf" width="1" height="1" alt="">

Discover Blog Insights