Uncategorized

Technology

Design

Development

Best Blogs of Blockchain Technology 

Blockchain

How to make a new server

Creating a server in nginx

Top 5 Illustrator Plugins

Making a Node JS App to Send Push Notifications to Google Chrome

Test Blog 2

Test eaeafeafea

Heading to the Shopping Page

How you can do things in blockchain

Best Graphic Design and Website Design Services in Kanpur

Best Graphic Design and Website Design/Development Services in Kanpur

Best Web/Graphic Designer in Lucknow

Best Web & Graphic Designer in Lucknow

Best Javascript Frameworks by Usage in 2023

Below we have listed the most popular frameworks which is being demanded in most of the web developer jobs.

Most Demanded Javascript Frameworks for a Job in 2023.

Most Popular Javascript Frameworks to Land a Job in 2023

Installation of package

Understanding how it works

Setup Backend for Razorpay Payment Object

Configuration of Razorpay

Trigger Razorpay Payment Window

Extra Setup & Methods

Razorpay is an Indian fintech company that provides online payment solutions for businesses. It enables businesses to accept various digital payment methods and offers features like subscription billing and vendor payouts to streamline payment processes.

Razorpay is the leading payment gateway and choice of most of the businesses across India. It is being used by major businesses despite its high transaction charges is because of its innovative features and least failure rate.

Razorpay

This guide on razorpay integration with reactjs or nextjs is all what you need to make your life easier while setting up razorpay payment gateway

Total We will Learn How to Integrate or Setup Razorpay with React , Nextjs or any other js framework

Install, Setup & Gather Essential components for Razorpay Integration

Install Razorpay NPM Package

Install Any Unique ID Generator Package (optional)

Nano ID NPM Package for short Unique ID generation

Make sure to collect key & secret from razorpay dashboard of Test Mode.

Collect Razorpay Key & Secret

API Keys can be Found and Generated at Shown Location on the Dashboard Below.

Use Collected Razorpay Key & Secret in dot env file.

Create Environment Variable File in Root Directory of your Project

To make dot env work perfectly we might have to restart server.

Restart Server

Understanding How Razorpay Payments Work from Server to Frontend End Step By Step

A Razorpay Object is generated always on the server to prevent tampering.

Initialize Razorpay SDK by loading razorpay checkout js in script tag

Use Razorpay Payment Object which is already generated on the server by calling our api to trigger payment window.


Handle all the events properly on the frontend to avoid any unexpected behaviour

Payment Object needs to be generated only on the server to avoid any value tampering

How to setup backend in reactjs or nextjs for Razorpay Payment Object Generation?

In NextJS We can utilize api folder to create a serverless function

It should be in the location [YOUR PROJECT]/pages/api/payments.js

Create file named payment.js in api folder inside pages folder of your project.

Once backend is done , move to frontend part to work on frontend mechanics.

Now Let's see How to Setup Nextjs or React for Razorpay Frontend

Let's see how we can write init function for razorpaySDK.

Init Function is required to load razorpay checkout js in a script tag.

Let's Write Code to Trigger Payment Window

Setup Frontend Element to Trigger Payment Window

If everything is done correctly you would be able to see the payment window like the image below

Once Everything is Done, Press the button to trigger Window.

Once Testing & Implementation is complete , you may switch to live mode and replace the given api keys with the old values we used in our .env.local file.

Don't Forget to Switch to Live Mode & Replace Key & Secret in .env file

Explore more options & customizations allowed by the razorpay SDK but not generally used and are completely optional.

Extra Tips & Tricks

How to Setup Razorpay in React or Next.js

When Schema.org arrived on the scene I thought we might have arrived at the point where library metadata  could finally blossom; adding value outside of library systems to help library curated resources become first class citizens, and hence results, in the global web we all inhabit.  But as yet it has not happened.

Library Metadata Evolution: The Final Mile

The recent release of the Schema.org vocabulary (version 3.5) includes new types and properties, proposed by the W3C Schema Architypes Community Group, specifically target at facilitating the web sharing of archives data to aid discovery. When the Group, which I have the privilege to chair, approached the challenge of building a proposal to make Schema.org useful for archives, it was identified that the vocabulary could be already used to describe the things &amp; collections that you find in archives.  What was missing was the ability to identify the archive holding organisation, and the fact that an item is being held <span class="readmore"><a href="https://www.dataliberate.com/2019/04/03/something-for-archives-in-schema-org/">...</a></span>

Something For Archives in Schema.org

Thoughts about Linked Data, Schema.org, Structured Data, Cultural Heritage Meta Data, and associated technologies

Data Liberate Blog

See what Chat GPT has to Say About Midjourney AI

Midjourney is a curse to Designers.  See How it steals from other Artist's Hardwork.

I am sharing all my secret React hacks that i often use in my web development workflow. It can not only make a developer's life easy but also helps to make code look better.

Write Less develop more.

We are going to learn about best React and NextJS hacks which i learnt during my web development cycle.

This method in React or NextJS is used to restructure the available object or array of objects. It can be used in several ways.


How to Remap Array of Objects or Objects to match required object structure?


Using this method we can shorten the text content without making any change to the original text.


How to truncate or slice off or shorten the text content without manually editing it in React. 
or 
How to add excerpt in description using React or NextJS


How to convert any input text to url friendly text.



This method can be used to separate text by any symbol but in this example we will be checking how to use comma to separate and iterate through the array to generate a list


How to generate list from comma separated text content


Multiple Data Fetching in one async function 

Using Helper function to generate Dynamic content based on input and using Template Literals.


How to Iterate without any dependency Array in React. Loop n times without for loop.


More Hacks will be added shortly. Stay Tuned

Top 100+ React/Next JS Hacks to boost productivity

We are killing our time day and night to make insightful and helpful blogs come to live.

Coming Soon to set blogs on fire.

How to test your website or web app on MacOS for Free.

How to test your website or web app on MacOS for Free [for Windows Users]

All you need to know to win over CHATGPT as a professional

All you need to know to win over CHAT GPT as a professional

How to Mint NFT for free  without using API on Polygon/Matic

How to Mint NFT for free with or without using API on Polygon/Matic Blockchain 

10 Technologies of future you must know to stay updated.

To mint an NFT using Node.js, you will first need to have a Node.js environment set up on your machine. Then, you will need to install the necessary dependencies, such as a package for interfacing with the blockchain where you want to mint the NFT.

Follow these steps to mint a NFT using Node JS only. 

Here are the steps you can follow to mint an NFT using Node.js:

Install Node.js on your machine if it is not already installed.

 1.You can do this by following the instructions on the Node.js website (https://nodejs.org/en/).



2.Create a new Node.js project by running the following command in a terminal or command prompt:

3.Install the necessary dependencies for minting an NFT. For example, if you want to mint an NFT on the Ethereum blockchain, you can install the 'ethereum-witness' package by running the following command:

4.Import the dependencies into your Node.js project. For example, if you installed the ethereum-witness package, you can import it into your project using the following line of code:

5.Connect to the blockchain where you want to mint the NFT. For example, if you want to mint an NFT on the Ethereum blockchain, you can connect to the blockchain using the 'ethereum-witness' package like this:

6.Create a transaction to mint the NFT. This will involve creating a data payload that contains information about the NFT, such as its name, symbol, and total supply. You will also need to specify the address of the account that will be used to mint the NFT.

7.Sign the transaction with the private key of the account that will be used to mint the NFT. This will prove that the transaction is authorized by the owner of the account.

8.Broadcast the signed transaction to the blockchain. This will add the transaction to the blockchain, and the NFT will be minted once the transaction is confirmed.

Keep in mind that minting an NFT is a complex process and requires a deep understanding of blockchain technology. If you are new to blockchain and NFTs, it is recommended that you seek guidance from experienced developers or consult relevant documentation and tutorials.

To mint an NFT using Node.js, you will need to use a library like 'ethereumjs-tx' to create and sign a transaction that calls the mint() function on the contract that controls the NFT. This will require you to have an Ethereum wallet with some Ether in it to pay for the transaction fees.

Another way of minting a NFT using Node JS but with different method.

Here is an example of how you could do this:

This code is just an example and will likely need to be customized for your specific use case. For instance, you will need to provide your own contract address and ABI, as well as your own wallet address and private key.

Ultimate NFT Minting Guide using Node JS 

How to Mint a NFT using Node JS [Easy]

As we all know, Heroku recently stopped providing free dynos and has few drawbacks like automatic sleep. It also has high pricing in some services as compared to other cloud platforms. To get rid of such problems we might need Heroku alternatives at some points.


Why do we need Heroku alternatives?

We made a customized list of best alternatives free & paid which will help you deploy your apps on right cloud platform. 

Let's have a look at list of all 10+ alternatives.

Cyclic

Cyclic is a cloud platform for which provides free cloud platform to host your apps full stack, backend or frontend with enough computing power. It provides 1024 mb of RAM, Database and File Storage.




Cyclic is a cloud platform for hosting full stack Node.js apps for free.

You can deploy 3 apps for free without any automatic sleep or hourly limits. It doesn't restrict number of build per day and has no hourly execution limit.



You can make 100k API requests per month per app for free. Get Started Now with 10$ of Credits which will unlock hidden power of Cyclic.

What's Included in Cyclic Free Plan

Digital Ocean Functions

Digital Ocean is one of the leading platform for deploying apps, services and much more. It is used by leading companies across the world and has very high uptime. We are using Digital Ocean since 2019 and have never faced any error so far. It offers bare metals, cloud computing, droplets or shared hosting for small apps, databases, storage spaces etc.

Digital Ocean offer functions for hosting serverless apps. It also offers services more than just serverless apps.

Digital Ocean doesn't not offer any free forever plan yet but provides a whooping $200 in credits which you can use to subscribe to any service of Digital Ocean. Credits expire after 60 days so make sure to use them before they expire. You can deploy multiple apps at once with same FREE Credits.

Get $200 Credits FREE for 60 Days. 

What services can we use with $200 Credits

Cloudways

Cloudways is a very famous cloud platform for hosting managed websites/ecommerce stores. Usually people host wordpress/php based cloud apps here but you can install node runtime manually using CLI. 

Cloudways is a Digital Ocean Brand for managed hosting. It provides managed cloud hosting.

Cloudways provide more than just hosting as addons. For Example : Transactional Email , Mailbox, DNS Manager, CDN etc. It has Let's Encrypt FREE SSL/TLS Certificate for instant SSL along with varnish caching. Easy management of apps is the main USP of this platform. Being a managed hosting , Cloudways has one of the best customer support for their customers.   

Features of Cloudways

Netlify

Netlify is one of the most commonly used platform to deploy node apps instantly with just few clicks. It offers free forever package along which has enough power to kickstart a node runtime apps within a few minutes. It has bandwidth of 100GB per month in Free Forever plan.

Netlify is a widely used cloud hosting platform with inbuilt CI/CD Capabilities.

Netlify supports a lot of frameworks out of the box. Netlify is recommended by a lot of developers because of it being easy to use and comes bundled with bunch of features.

What's Included in Free Plan

Vercel

Vercel is my top choice for hosting my node runtime apps, be it frontend or backend apps or maybe full stack apps. I like vercel because of features packed in free/hobby plan. Vercel apps are super fast and provides a very low latency. 

Vercel is my favorite platform of all the options in the list.

Vercel can be best substitute for Heroku because it allows running backend and frontend on same platform.
You can deploy your app easily on vercel within few clicks and It's recommend for NextJS / React JS Apps. If you are making a NextJS app then I must recommend Vercel for your app.
Vercel Serverless Functions can be deployed in multiple languages:

Node.js
Go
Python
Ruby.

Vercel supports all modern frontend frameworks such as React, Vue, NextJS, Svelte, Gatsby.js,
 Remix,
 Blitz.js (Legacy),
 Astro,
 Hexo,
 Eleventy,
 Docusaurus 2,
 Docusaurus 1,
 Preact,
 SolidStart,
 Dojo,
 Ember.js and a lot more

Railway

Railway as the name says itself, Railway apps are fast and scalable. It includes CI/CD Pipeline by default. You can easily deploy your GitHub Projects with a single click. It has a very simple UI where you can start your project without any complications.

Railway 

Railway.app supports frameworks and their boilerplate templates out of the box along with automatic preset of Databases such as Redis, MongoGB, PostgreSQL, MySQL and a lot more..


Boilerplates & Presets available out of the box

Render

Render is also a cloud platform to host your website , node app, backend app, Redis DB, PostGRES and static website. It provides same limitations as of Heroku. It provides 750 Hours of running time per month and has automatic sleep to save running hours from getting wasted. It can be bypassed by any ping service which invokes API every 15 minutes before the instance sleeps. 

Please Login to Admin Panel