Forem: Shyam1806

Six Incredible React Libraries 💻🚀

Shyam1806 — Fri, 23 Aug 2024 07:38:34 +0000

Victory

A Popular data visualization library for React. It Provides a set of modular and customizable components for creating graphs and Charts.

Link : https://commerce.nearform.com/open-source/victory

React Email

React Email is designed to simplify the sending of emails from React Applications and Integrating with various email Services(Nodemailer , AWS SES).

Link : https://react.email/

Copilotkit

These toolset for Creating Artificial Intelligence(AI) Copilots, enhancing automation and decision making capabilities in Applications.

Link : https://docs.copilotkit.ai

React Content Loader

These Library allows you to create Scalar Vector Graphics (SVG) - powered Component to easily create skeleton loadings

Link : https://www.npmjs.com/package/react-content-loader

React Player

A Customizable component for embedding media players into React Applications.

Link : https://www.npmjs.com/package/react-player

cmdk

cmdk allows developers to render items, automatically filtering and sorting them based on user Inputs.

Link : https://cmdk.paco.me/

Few Design Inspiration Tools For Web Designers

Shyam1806 — Mon, 19 Aug 2024 07:28:57 +0000

Mobbin:

Discover real-world design inspiration.
Website Link: https://mobbin.com/

Dribble:

Dribble is a leading platform to showcase their work and connect with employers.
Website Link: https://dribbble.com/

Dark Design:

A Collection of the best handpicked dark theme website designs.
Website Link: https://www.dark.design/

Awwwards:

The Best Website(Designers and Developers) Inspiration.
Website Link :https://www.awwwards.com/

Some of the Best Animation Libraries in React

Shyam1806 — Wed, 19 Jun 2024 13:54:27 +0000

1.React Spring

Website Link -> https://react-spring.dev

It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

2.AOS

Website Link -> https://michalsnik.github.io/aos

Simple Library to animate UI components using scroll events.

3.Framer Motion

Website Link ->https://www.framer.com/motion

It Utilizing the power behind framer, the best prototyping tools for teams.

4.React-Tweenful

Website Link -> https://teodosii.github.io/react-tweenful

It Creates real-world animations for your pages.

Some of the Best Animation Libraries in React

Shyam1806 — Wed, 19 Jun 2024 13:54:25 +0000

1.React Spring

Website Link -> https://react-spring.dev

It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

2.AOS

Website Link -> https://michalsnik.github.io/aos

Simple Library to animate UI components using scroll events.

3.Framer Motion

Website Link ->https://www.framer.com/motion

It Utilizing the power behind framer, the best prototyping tools for teams.

4.React-Tweenful

Website Link -> https://teodosii.github.io/react-tweenful

It Creates real-world animations for your pages.

Top 6 Productivity Web Development Tools

Shyam1806 — Tue, 18 Jun 2024 06:36:01 +0000

1.DataTableDev

Website URL -> https://www.datatable.dev

It’s a true time-saver for developers and analytics who need a tool to transfer big data and work with it without waiting.

2.Coolors

Website URL -> https://coolors.co/

A super fast color scheme generator that helps you create, save, and share beautiful color palettes in seconds.

3.Getwaves

Website URL -> https://getwaves.io/

Customize the waves to fit your design and download them as SVG

4.Screely

Website URL -> https://screely.com/

Instantly turn your screenshots and designs into beautiful mockups.

5.Blobmaker

Website URL -> https://www.blobmaker.app

Create unique, organic blob shapes for your design projects.

6.GTmetrix

Website URL -> https://gtmetrix.com

See how your site performs, reveal why it's slow and discover optimization opportunities.

Some Code Tricks Every Web Developer Should Know

Shyam1806 — Thu, 06 Jun 2024 13:22:50 +0000

Contenteditable Attribute

This attribute allows you to make an element editable by the user like a text input.

<div contenteditable="true"> Hello User. </div>

Placeholder Color

You can use the ::placeholder psuedo-element to style the placeholder text in an input field allowing you to customize the look
input::placeholder{ color:"#fff; }

Few Secret Tags In HTML

Shyam1806 — Wed, 29 May 2024 15:11:04 +0000

Time Page Refresh & Redirect

You Can Add a special tag inside your document to refresh the page at a set interval.

<meta http-equiv="refresh" content="20"

To Redirect the different websites with set interval
<meta http-equiv="refresh" content="20";https://dev.com

Disable Right Click

Prevents Right Clicking Entire Webpage
body oncontextmenu="return false"

Elective Chaining in Javascript

Shyam1806 — Wed, 22 May 2024 08:02:42 +0000

Elective Chaining
Chaining ?. is used to check properties before ?. if it's **null or **undefined then it returns undefined otherwise its returns the value.

Developers have a lot of work and projects to complete before a time. Source code has large objects, nested loops, containers, for that to check the property.

Let's see the example:

How to get Battery Status of user Machine by using Vanilla JS

Shyam1806 — Fri, 19 Jan 2024 09:30:03 +0000

🚀 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗼𝗿.𝗴𝗲𝘁𝗕𝗮𝘁𝘁𝗲𝗿𝘆()-> 𝘮𝘦𝘵𝘩𝘰𝘥 𝘱𝘳𝘰𝘷𝘪𝘥𝘦𝘴 𝘪𝘯𝘧𝘰𝘳𝘮𝘢𝘵𝘪𝘰𝘯 𝘢𝘣𝘰𝘶𝘵 𝘵𝘩𝘦 𝘴𝘺𝘴𝘵𝘦𝘮'𝘴 𝘣𝘢𝘵𝘵𝘦𝘳y

navigator.getbattery().then((batterystatus)=>{ console.log("status" , batterystatus) })

How to Resolve the 404 Error After Deploying the NodeJS in Vercel

Shyam1806 — Thu, 11 Jan 2024 11:19:36 +0000

Step 1. Check the Project Structure & File Structure
Step 2.Give the proper file name
Step 3.Initally I gave the file name as server.js for that it will throw the particular 404 Error. After I Changed the entry point of the API.I renamed the file name as Index.js.
Need to add Vercel.json in Your Project and i have attached image for refference.Check it

Inside the Vercel.json Need to setup the source directory. For that I have attached an Code below. Check it.
{ "version": 2, "builds": [ { "src": "./index.js", "use": "@vercel/node" } ], "routes": [ { "src": "/(.*)", "dest": "/" } ] }

Once this setup has been done then the code has been pushed in your GitHub and check the vercel deployment. Now u Can resolve the 404 error.Once successfully completed the 404 error you can visible like the below image

Now the above second image like you appear you can use the backend API URL In your project.

Fullscreen API in JS

Shyam1806 — Tue, 26 Dec 2023 17:16:00 +0000

Use The Above Image Trick in Javascript for #Fullscreen API

Javascript Tricky

Shyam1806 — Wed, 20 Dec 2023 12:57:48 +0000

<button onClick="history.back()">Go back</button>