Forem: adarsh

7 Interesting GitHub Repositories to Become a Pro React Developer

adarsh — Sun, 29 Sep 2024 08:39:57 +0000

React is one of the most popular and preferred frontend UI libraries, used in nearly 50 million projects each month.

It provides all the functionality you need to streamline the process of developing fast, scalable websites and web applications. Pair React with Next.js, and you can build amazing applications capable of handling millions of users. The demand for skilled React developers remains high.

Because of this, there’s a growing need for programmers who are proficient in this powerful JavaScript library.

Let’s get started!

1. Under the Hood: ReactJS

This repository explains the inner workings of React. One of the best ways to master a library is to dig deeper into its core concepts.

Bogdan-Lyashenko / Under-the-hood-ReactJS

Entire React code base explanation by visual block schemes (Stack version)

Under the hood: React

This repository contains an explanation of inner work of React. In fact, I was debugging through the entire code base and put all the logic on visual block-schemes, analyzed them, summarized and explained main concepts and approaches. I've already finished with Stack version and now I work with the next, Fiber version.

I wanted to automate process of "learning and documenting" a complex codebase as much as possible, so I started Codecrumbs project. It will help to build projects like "Under the hood ReactJs" in a shorter time and in a simpler way!

Each scheme is clickable and can be opened in a new tab, use that to zoom it and be able to read from it. Keep the article and a scheme you are reading about at that moment in separate windows (tabs), that will help to match text and code flow easier.

We…

View on GitHub

2. Awesome React

A never-ending list of resources, tools, and references related to React and its ecosystem.

enaqx / awesome-react

A collection of awesome things regarding React ecosystem

Awesome React

Offer API docs that look as good as Stripe's using our sponsor Fern. Request a preview of your docs on Fern.

A collection of awesome things regarding the React ecosystem.

React

React General Resources

React Tutorials

View on GitHub

3. React TypeScript Cheatsheet

A cheatsheet for React developers getting started with TypeScript.

React TypeScript Cheatsheets | React TypeScript Cheatsheets

React TypeScript Cheatsheets

react-typescript-cheatsheet.netlify.app

4. React Patterns

A compilation of React patterns, techniques, tips, and tricks.

vasanthk / react-bits

✨ React patterns, techniques, tips and tricks ✨

React Bits

A compilation of React Patterns, techniques, tips and tricks.

Gitbook format: https://vasanthk.gitbooks.io/react-bits

Github repo: https://github.com/vasanthk/react-bits

Your contributions are heartily ♡ welcome. (✿◠‿◠)

Translations by community:

中文版 (Chinese): react-bits-cn

한국어 (Korean): react-bits-ko

View on GitHub

5. React Roadmap

Learn React systematically. This roadmap covers everything you need to know about React and its ecosystem in 2024.

React Developer Roadmap: Learn to become a React developer

Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.

roadmap.sh

6. A Production-Ready React Application

Dub.sh is one of the best production-grade examples of a React application. It includes Next.js, next-auth, Prisma, and more. It’s also a monorepo.

dubinc / dub

Open-source link management infrastructure. Loved by modern marketing teams like Vercel, Raycast, and Perplexity.

Dub.co

The open-source Bitly successor
Learn more »

Introduction · Features · Tech Stack · Self-hosting · Contributing

Introduction

Dub.co is the open-source link management infrastructure for modern marketing teams.

Features

Tech Stack

Next.js – framework
TypeScript – language
Tailwind – CSS
Upstash – redis
Tinybird – analytics
PlanetScale – database
NextAuth.js – auth
BoxyHQ – SSO/SAML
Turborepo – monorepo
Stripe – payments
Resend – emails
Vercel – deployments
Pangea - link scanning

Self-Hosting

You can self-host Dub.co for greater control over your data and design. Read this guide to learn more.

Contributing

We love our contributors! Here's how you can contribute:

Open an issue if you believe you've encountered a bug.
Follow the local development guide to get your local dev environment set up.
Make a pull request to add new features/make quality-of-life improvements/fix bugs.

Repo Activity

License

Inspired by…

View on GitHub

7. Production-Ready React Hooks

A comprehensive collection of production-ready React hooks, including useScroll, useBattery, useQueue, and more.

streamich / react-use

React Hooks — 👍

👍
react-use

^{Collection of essential React Hooks
Port of libreact

Translations: 🇨🇳 汉语}

npm i react-use

Sensors
- useBattery — tracks device battery state.
- useGeolocation — tracks geo location state of user's device.
- useHover and useHoverDirty — tracks mouse hover state of some element.
- useHash — tracks location hash value.
- useIdle — tracks whether user is being inactive.
- useIntersection — tracks an HTML element's intersection.
- useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys.
- useLocation and useSearchParam — tracks page navigation bar location state.
- useLongPress — tracks long press gesture of some element.
- useMedia — tracks state of a CSS media query.
- useMediaDevices — tracks state of connected hardware devices.
- useMotion — tracks state of device's motion sensor.
- useMouse and useMouseHovered — tracks state of mouse position.
- useMouseWheel — tracks deltaY of scrolled mouse wheel.
- useNetworkState — tracks the state of browser's network connection.
- useOrientation — tracks…

View on GitHub

Wrapping It Up!

Congratulations on making it this far! You’re a fantastic reader!

These are just a few great repositories available for React. There are many more to explore, so feel free to dive deeper into the React ecosystem and find even more amazing resources!

7 Github Repositories to Become a Pro Frontend Developer

adarsh — Fri, 27 Sep 2024 16:58:07 +0000

The front end is a crucial part of any application, and having a firm hand on the front end is necessary to be in the top 1% of the world. Your front end decides whether the customer or user is ready for business with you, so it is as important as it is to build a good-looking UI.

Here are some of the top repositories available that can improve your front-end skills ten times over what they are right now.

1. Awesome Frontend
This awesome repository consists of a curated list of awesome front-end development resources.

Awesome frontend

2. Developer Roadmap
This repository has a detailed roadmap that you can follow. This repo is very popular among developer communities
RoadMap

3. Awesome CSS
This repository is a curated list of frameworks, style guides, and cool nuggets of information for writing awesome CSS. It does not contain resources to learn CSS.

If you want to learn about CSS Flexbox in-depth, check this ebook for free:
Ebook for you

4. CSS Protips
A collection of pointers to help you advance your CSS skills. One of the best-recommended repositories for beginners to dive into CSS.

Protips

5. Frontend Development
A manually curated collection of resources for front-end web developers. An advanced repository for collections of useful pieces of knowledge and tools.

frontend-dev-bookmarks

6. Front-End Checklist
The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

Front-End-Checklist

7. Awesome Web Components
A curated list of awesome Web Components tools, articles, and resources.

Awesome Web Components

Conclusion
These are some of the many tricks that you can use to get accurate results. If you know more, let me know in the comments.

If you wish, you can support me by buying me a Chai.

6 Cool Things You Can Do With Regular HTML

adarsh — Tue, 24 Sep 2024 10:07:29 +0000

It's no wonder that HTML can do some stuff that we might even think that it is an external library. If efficiently used we can even hack NASA (I'm just kidding). So let's look into some cool features of HyperText Markup Language.

1. Color Picker
Create a color picker by simply using the tag and giving it a property of type=’color’.

2. Accordion
The tag defines a visible heading for the element.

The heading can be clicked to view/hide the details.

You can create simple accordions using this method, without the need to implement CSS classes and JavaScript click handlers that toggle visibility whenever clicked.

3. Make a call
Call someone direct from your website.

4. Progress bar
You can use the element which will represent the completion of something.

5. Autocomplete
The tag is used to provide an “autocomplete” feature for the elements.

6. Emoji
Many UTF-8 characters cannot be typed on a keyboard. Some keyboards and devices also do not have an emoji input. However, emojis can always be displayed using numbers (known as ‘entity numbers’).

Conclusion
Here we discussed a few HTML-only things that might save you time, and avoid the need to complicate things by incorporating CSS and JavaScript.

I hope you have found this useful. Were any of these tips new to you? If so, be sure to let us know in the comments.

10 Websites every Web developer should at least look

adarsh — Tue, 17 Sep 2024 07:54:51 +0000

If you are a web developer, you might be obsessed with finding a website that can save you tons of time.

Here are websites that I personally use to save at least 25 hour/week.

Quick tip: If you wanna build your application fast, try this: SaaS boilerplate for beginners

UI verse

UI verse is massive library with 100s of design elements that you can just copy paste into your website. It is one of the largest Open source UI library.

Link https://uiverse.io/checkboxes

Glitch

Glitch helps to create your next web project in browser with no setup and instant deployment.

Link: glitch.com

Shots.so

Create beautifully designed image backgrounds for your images. With over 100’s of prebuilt as well as customizable templates, you can make your images 10X better

Link: www.shots.so

Dev Docs

What if you have a documentation which have documented almost everything you need? DevDocs combines multiple API documentations in a fast, organized, and searchable interface.

Link: https://devdocs.io/

LambdaTest Free Online Tools

A collection of free online tools, utilities, and libraries that will help developers, testers, designers, in their day to day tasks

Link: https://www.lambdatest.com/free-online-tools

Mobbin

The world’s largest mobile and web design library. Save hours of UI & UX research with our library of 300,000+ screens from the world’s best designed apps.

Link: Mobbin.com

Ping Test

You can ping any IP address or hostname from 10 locations in parallel.

Link: https://tools.keycdn.com/ping

LandingFolio

Most developers are not designers and this website is the best choice for developers to get inspiration

Link: https://www.landingfolio.com/

Free for Dev

A compilation of free software and services, covering everything from SaaS to developer tools, APIs, and cloud platforms.

Link: https://free-for.dev/#/

Tiny Wow

We always look for a free alternative and this website is a goldmine. Discover a wide range of free tools and services.

Link: https://tinywow.com/

Conclusion

Thanks for checking out this blog. We discussed a lot of tools in the blog. Follow me here so that you wont miss any future updates.

Keep building

The Only Next.js Guide you need

adarsh — Mon, 16 Sep 2024 04:54:09 +0000

Next.js has quickly become one of the most popular frameworks on the web, powering many of the sites you visit daily.

Here is the full un-cut version of the blog:

This guide is going to be a no-nonsense, straight-to-the-point introduction to Next.js. It’s one of the easiest frameworks to get started with, but mastering it is a whole different story.

The Origins of Next.js

Before diving into Next.js, let’s take a step back. React was created by a team of developers at Facebook. Another group of developers recognized that React lacked certain essential features that developers often needed. To bridge this gap, they built Next.js on top of React, adding these crucial features and enhancing the overall development experience.

You can checkout the full video version from here

Installation

Let’s start from scratch.

First things first: you’ll need to install Next.js. Assuming you already have Node.js installed on your computer, here’s how you do it.

npx create-next-app@latest

Understanding the Project Structure

When you first open your Next.js project, you’ll see many files and folders. Don’t be overwhelmed. Focus primarily on the src and app folders, which are the core parts of your application.

Routing in Next.js: Next.js uses a file-system based router. The structure of your folders inside the app directory defines your app’s routes. For example, a folder named about inside the app directory will correspond to the /about route.

Key File Conventions in Next.js

Layout and Page Files

layout.jsx: Shared among multiple routes, the layout.jsx file defines the layout for pages within a specific folder. The root layout can include <html> and <body> tags, but inner layouts should use <div> or <section> tags.

page.jsx: Defines the unique UI for each route and makes routes publicly accessible.

Special Files

loading.js: Used to create a loading UI with React Suspense.

not-found.js: Customizes the 404 page

route.js: Handles API requests for a route.

Advanced Routing Features

Route Groups

Deeply nested routing structures can become messy. To keep things organized, use route groups. By placing folder names inside parentheses, you can omit those folders from the URL.

For example, the structure app/(accounts)/(dashboard)/billing/page.js will correspond to a cleaner URL like /billing.

Dynamic and Parallel Routes

Dynamic Routes: Use square brackets to create routes that handle multiple parameters, such as product or blog pages.

Parallel Routes: Allows conditional rendering of multiple pages within the same layout, useful for different user roles like /admin and /user.

Intercepting Routes

Intercepting routes let you modify default routing behavior, such as displaying a login modal instead of a full page while keeping the URL consistent.

Here is how it looks in your file system

Also there is a specific way to match these folders:

Middleware and Data Fetching

Middleware

Middleware is useful for tasks like authentication and authorization. To set up middleware in Next.js, create a middleware.ts file in the root of your project.

This can protect API routes or specific pages based on user identity.

Data Fetching

Next.js provides several options for data fetching:

Fetch API: For making HTTP requests.

Database Clients: Directly interact with databases.

Client-side Data Fetching Libraries: Tools like React Query.

Route Handlers: For custom data fetching logic.

Next.js also introduces Server Actions, asynchronous functions executed on the server to handle form submissions and data mutation

Example of server action:

Server Components vs. Client Components

Server Components

Server Components are rendered and cached on the server, handling data fetching and other server-side logic before sending HTML to the client. They are ideal for tasks that don’t require client-side interactivity.

Client Components

Client Components run in the browser and are used for interactive features like onClick events. To designate a component as a Client Component, add the “use client” directive at the top of your file.

Rendering Methods in Next.js

Server-Side Rendering (SSR)

Server-Side Rendering generates HTML on the server for each request.

This method is useful for dynamic content that changes based on user data or other factors.

Static Site Generation (SSG)

Static Site Generation pre-renders HTML during the build process, which is then served to the client. This method is ideal for content that doesn’t change often.

Dynamic Rendering

Dynamic Rendering generates HTML at request time for each user, suitable for personalized content.

Styling and Optimization

Tailwind CSS

When it comes to styling your Next.js app, Tailwind CSS is the go-to choice. It’s popular, flexible, and easy to integrate.

Image and Script Optimization

<Image> Component: Automatically optimizes images for performance.
<Script> Tag: Allows loading of third-party scripts efficiently.

Deployment

The simplest way to deploy your Next.js app is via Vercel, which offers seamless integration. For more control, consider deploying to an AWS EC2 instance.

Thanks for checking this out. Here is the complete video with full details so that you dont want to miss any details

You can checkout the full video version from here

10 Things Every JavaScript Developer Should Know

adarsh — Fri, 13 Sep 2024 14:54:33 +0000

JavaScript is one of the most popular and widely used programming languages.

When asked what JavaScript does 20 years ago, a JavaScript developer would simply say that it is used to script websites. Now he will say that he can use JavaScript for frontend development, backend development, mobile application development, desktop application development, game development, AR/VR development, and more.

A lot of frameworks and libraries are there for JavaScript. These frameworks and libraries are just a piece of cake if your Javascript fundamentals are strong and clear. A lot of concepts are a bit overwhelming for developers, but a good knowledge of these concepts will help you in the long run.

Frameworks and libraries come and go, but the fundamentals always remain the same. It’s easy to build any kind of application and learn to use any framework and library if the fundamentals are clear. Despite JavaScript's importance for web and mobile development, many hiring managers aren't aware of what they need in a JavaScript developer.

If you are an aspiring JavaScript developer, here are 10 important and must-know topics for you that will be handy.

Scope

Scope defines whether you can access or reference a particular value or expression. We are unable to use a declared variable if it is not included in the current scope. This idea is crucial to understand because it makes it easier to separate logic in your code and makes it easier to read.

In JavaScript, we have 3 types of scopes:

Global scope: Variables and expressions can be referred to anywhere in a global scope. This is the default scope.

Local scope: Variables and expressions can be referenced only within the boundary.

We declare variables with the let, const, and var keywords. If we declare variables outside of blocks or functions, they will always be global variables.

//global scope example
var nameis = "John";  //global scope
let age = 30;   //global scope
const isMarried = false;  //global scope


{
  console.log(nameis, age, isMarried);

  //some useful code
}
function someUsefullfunction() {
  console.log(nameis, age, isMarried);
}

someUsefullfunction();

The var keyword declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

//global scope example of var
var nameis = "John";
var age = 30;
var isMarried = false;

function printName() {
  console.log(nameis, age, isMarried); //outputs John 30 false
}

printName()

//local scope example of var


function printName() {
    var nameis = "John";
    var age = 30;
    var isMarried = false;
}

console.log(nameis)//this will show an error

var cannot have block scope, i.e., sections created with a pair of curly braces.


  {
    var x = 1;
  }
  console.log(x); // 1;   x can be accessed here

The let and const keywords can belong to the block scope if they are inside a block or boundary. They cannot be accessed outside the block as a global variable.

 {
    const x = 1;
    let y=x*x
 }
  console.log(y); // ReferenceError: y is not defined

Hoisting

When developers are unclear about the concept of hoisting in JavaScript, they frequently encounter unexpected outcomes. Before the execution of the code, the interpreter appears to move the declaration of functions, variables, or classes to the top of their scope. This process is known as JavaScript hoisting. Hoisting allows functions to be safely used in code before they are declared.

Hoisting lets you use a function before you declare it in your code.


 FavoriteYoutuber("Mr. Beast");

  function FavoriteYoutuber(name) {
  console.log("My Favorite Youtuber  is " + name);
}

You can also hoist your variables, but keep in mind that if you declare them with var, the default initialization of the var is undefined, whereas let and const are also hoisted but, unlike var, are not initialized with a default value.


 console.log(num); // Returns 'undefined' from hoisted var declaration
 var num = 6; // Initialization and declaration.
 console.log(num); // Returns 6 after the line with initialization is  executed.



 console.log(numberofsix); // Throws ReferenceError exception as the variable value is uninitialized
 let numberofsix = 6; // Initialization

Callbacks

You'll get much better at JavaScript once you comprehend how callback functions function, which is a crucial component of the language. A callback is a function that is passed as an argument to another function, and its execution is delayed until that function to which it is passed is executed.

//callback function with parameters and return value

function greeting(parameter) {
  console.log(parameter);
}
function callBackFunction(callback) {
  callback("Hello World");
   console.log("I am in a callback function");

}

callBackFunction(greeting);

Here you can see the greeting function is passed as an argument to the callBackFunction, and it executes the greeting function and then the calling function.

Callback functions are beneficial for brief asynchronous operations with two to three nested callbacks or less, but not for longer operations. Imagine a callback having many nested callbacks inside of it; it would appear like this.

This issue is resolved and made easier for programmers by promises and async/await.

Promises

A promise is an object that has the potential to produce only one value in the future: either a resolved value or an explanation for why it cannot be resolved (such as a network error). There are three possible states for a promise: fulfilled, rejected, or pending.

Pending state: The initial stage in which the result is unknown because the operation has not yet been completed.

Fulfilled state: Promises that have been successfully carried out and have produced value are said to be in a fulfilled state.

Rejected state: The condition of a promise signifying a failed operation along with the cause of the failure.

Let's look at an example.


let promise = new Promise(function (resolve, reject) {
  if (0 == 1) {
    resolve("Heyyy") //This will not work  0!=1

  } 

  else reject("0 is not equal to 1"); // This will work 
});

 promise
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.log(error);
  });

Here, promises are demonstrated clearly. It promises to return something resolved or else rejected. In this situation, it is rejected because of 0!=1 and returns with a message “0 is not equal to 1”.

We use .then () and .catch() methods so that we can return the value of the called handler, i.e., resolve or reject it.

Async & Await

Asynchronous JavaScript has never been easy. We have used callbacks for a while. Then, we employed promises. We use asynchronous functions most of the time now.

Asynchronous programming is handy when it is required that a certain piece of code should be executed only after the code above it is successfully executed. To handle this scenario, JavaScript introduced async/await in ECMAScript 2017.

Asynchronous functions contain the async keyword. You can use it in a normal function declaration:


  async function functionName (arguments) {
    // asynchronously do something here
}

//Arrow functions also work fine with async


 const functionName = async (arguments) => {
    // Do something asynchronous
    }

Let's look at an example where we need things to work asynchronously.


function shootVideo() {
  setTimeout(() => {
    console.log("Shooting video...");
  },2000);
}
function editVideo(){
    setTimeout(() => {
        console.log("Editing video...");
    },1000)
}

function uploadOnYoutube(){
        console.log("Uploading video on youtube...");
}
function uploadVideo() {
  shootVideo();
  editVideo();
  uploadOnYoutube();
}

uploadVideo()

Here the output will be:

This is not the intended way to upload a video. Now with the help of asynchronous JavaScript, let's see how things work.


function shootVideo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("Shooting video..."));
    }, 2000);
  });
}
function editVideo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("Editing video..."));
    }, 1000);
  });
}

function uploadOnYoutube() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("Uploading video on youtube..."));
    }, 1000);
  });
}
async function uploadVideo() {
  await shootVideo();
  await editVideo();
  await uploadOnYoutube();
}

uploadVideo();

Now our output is as expected:

Closure

A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables.

The inner function can access the variables defined in its scope, the scope of its parent functions, or even its grandparent functions, and the global variables. But the outer function can not have access to the inner function variable (Scoping).

Let's now see a visual example of this:

//javascript closure grandparent example
function grandparent() {
    let car="BMW"
    var parent = function () {
        let house="4BHK"
        var child = function () {
            return ("The child gets " + car + " and " + house);
        };
        return child;
    };
    return parent;
}

console.log( grandparent()()()) //The Child gets BMW and 4BHK house

In this case, the grandparent is unable to access anything that belongs to either the parent or the child, whereas the child can access it from both of them.

Immediately Invoked Function Expression

An Immediately Invoked Function Expression is a JavaScript function that runs as soon as it is defined.

IIFEs are incredibly helpful because they can be used to easily isolate variable declarations while not contaminating the global object. Therefore, the primary reason to use IIFE is to immediately execute the code and obtain data privacy.


(function(){
    console.log('IIFE');
}
)();

The wrapping parentheses ( /* function */ )() are actually what make our function, internally, be considered as an expression.

Modular Programming

A module is a compact piece of independent, reusable code in JavaScript. Any non-trivial JavaScript-based application must be built using modules, which are the cornerstone of many JavaScript design patterns.

Using modules has the benefit of making it more maintainable, among other things. When a module is isolated from other pieces of code, updating that module is much simpler.

Reusability is another advantage of using modules, which can reduce code redundancy.

Let's make a module for finding out if a year is a leap or not:

                   IsLeapYear.js

//module for checking if a year is a leap

export default function isLeapYear(year) {
    return (year % 4 == 0 && year % 100 != 0)
            || year % 400 == 0;
}

For determining whether a given year is a leap year or not, we now have a standalone module. Importing the file and calling the function are the only steps left to take.

//import is leap year
import isLeapYear from './isLeapYear.js';

isLeapYear(2000)

Memoization & Performance Enhancing

The programming technique called Memoization improves function performance by caching previously computed results. JavaScript objects make excellent candidates for caches because of how they behave like associative arrays.

Each time a memoized function is called, its parameters are used to index the cache.

If the data is present, then it can be returned without executing the entire function. However, if the data is not cached, then the function is executed, and the result is added to the cache.

Let's look at an example:

 console.time("Fibonacci");
 function Fibonacci(n) {
  if (n < 2) {
    return 1;
  } else
  return Fibonacci(n - 1) + Fibonacci(n - 2);
}
console.log(Fibonacci(40));
console.timeEnd("Fibonacci");

This simple program to find the 40th Fibonacci number took almost 2 seconds to complete.

The search for the 100th Fibonacci term would be extremely time-consuming if we clung to this method.

Now let's just include our memoization technique here:


console.time("Fibonacci");
function Fibonacci(n, memo = {}) {
  if (n in the memo) {
    return memo[n];
  }

  if (n < 2) {
    return 1;
  } else memo[n] = Fibonacci(n - 1, memo) + Fibonacci(n - 2, memo);

  return memo[n];
}
console.log(Fibonacci(40));
console.timeEnd("Fibonacci");

Including a simple memo variable just increased the performance of the function 10x, from 2 seconds to 12 ms.

This time, our function ran in just 12.957 milliseconds. What happens is that a memoized function "remembers" the outputs associated with a particular set of inputs. The result is returned rather than being recalculated in subsequent calls with remembered inputs.

Error Handling

There is a possibility that while writing code you will reach a point where a bug prevents you from continuing, so you must be a problem solver here.

No matter if you are working on the front end or the back end, for 'handling' errors in the first year or so, you will probably use console.log or possibly console.error.

You need to change that if you want to write good applications and swap out your lazy logs for properly handled errors. You might want to look into creating your own Error constructor, learning how to catch errors properly, and displaying errors to users.

No matter how good a programmer we are, occasionally our scripts contain errors.

They might happen as a result of mistakes we make, resulting in unexpected user input, an incorrect server response, or for a myriad of other reasons. Typically, when a script encounters an error, it immediately terminates and prints the error to the console.

However, there is a syntax construct known as try...catch that enables us to catch errors and prevent the script from terminating prematurely.

try {

    // code...

  } catch (err) {

    // error handling

  }

Conclusion

It's a strange language, JavaScript. But when you look closer, you typically understand why things operate that way.

I sincerely hope that this list will help you understand some of the crucial JavaScript concepts that you should know, and if you are aware of any additional concepts that are noteworthy, please mention them in the comments section :)

How to get Paid in Your JavaScript Applications with LemonSqueezy

adarsh — Sat, 10 Aug 2024 05:06:31 +0000

NOTE: I don’t want paywall to block the learning, here is the friendly link.

First of all, we software developers are really lucky, we can build products, courses and even start a complete B2B business from scratch.

But the one thing that will be holding you back will be how to accept payments.

The problem with this is sometimes we will have international clients and you can directly send money. For example, if you are in India like me I can send money via UPI to anyone in India who has a bank account but not to someone who is in the USA due to regulations.

How LemonSqueezy Solves this problem

The solution to this problem is to use a payment gateway that can handle international transactions. One such gateway that’s gaining popularity among developers is LemonSqueezy.

It’s not just a payment processor; it’s a complete payment platform brought up for digital products and services.

Why LemonSqueezy

LemonSqueezy is designed with developers in mind. It provides a simple API that you can easily integrate into your JavaScript applications. Whether you’re selling a SaaS product, digital downloads, or online courses, LemonSqueezy is what you need.

Note: Stripe is also great, now that Stripe acquired Lemon squezy, it's the best reason to start using it.

Getting Started

Sign up for a LemonSqueezy account. It’s free to start; you only pay when you make sales.

Create your product in the LemonSqueezy dashboard. You can set up one-time purchases, subscriptions, or even pay-what-you-want models.

The flow of the LemonSqueezy platform is shown below

Store, where you have products
Products, where you have variants of the product
Variants, which can be Subscription, One-time Payment, Yearly payment

Now, install the LemonSqueezy SDK in your JavaScript project

npm install @lemonsqueezy/lemonsqueezy.js

Initialize the SDK in your application

const configureLemonSqueezy = lemonSqueezySetup({
  apiKey: process.env.LEMON_SQUEEZY_API_KEY,
  onError(error) {
    console.log(error);
  },
});

Now you are all set to start the actual LemonSqueezy thing. We need to have a checkout URL, so that we can send our users to a payment gateway.

The main arguments, that we need for the checkout URL are:

Store ID
Variant ID
Checkout options

From the frontend of your code you can send the Variant ID and the store can be hard-coded as it is less likely to change

import {
  lemonSqueezySetup,
  type Variant,
} from "@lemonsqueezy/lemonsqueezy.js";

export async function getCheckoutURL(variantId: number, embed = true) {

  if (!Number.isInteger(variantId) || variantId <= 0) {
    throw new Error("Invalid variantId. Must be a positive integer.");
  }
  if (typeof embed !== "boolean") {
    throw new Error("Invalid embed value. Must be a boolean.");
  }
  const { userId } = auth();
  const user = await currentUser();

  // get emailj
  const userEmail = user?.emailAddresses[0].emailAddress ?? "";

  const checkout = await createCheckout(
    process.env.LEMONSQUEEZY_STORE_ID as string,
    variantId,
    {
      checkoutOptions: {
        embed,
        media: true,
        logo: true,
        dark: true,
      },
      checkoutData: {
        email: userEmail,
        custom: {
          user_id: userId,
        },
      },

      productOptions: {
        enabledVariants: [variantId],
        redirectUrl: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard/billing/`,
        receiptButtonText: "Go to Dashboard",
        receiptThankYouNote: "Thank you for signing up to Lemon Stand!",
      },
    }
  );


  return checkout.data?.data.attributes.url;
}

Now with this, you can process the payment in your application. But there is a problem: How do we track all these?

LemonSqueezy Webhooks

If you don’t know what webhooks are, here is a simple explanation:

A webhook is an event triggered when a certain event happens and which will send a POST request to your endpoint and you can catch that event and later process it.

LemonSqueezy makes it easy to handle webhooks, the SDK provides various methods to work with webhooks. You should grab your webhook secret from the LemonSqueezy console first.

And then in you /api/webhooks/route.ts, you can have a POST endpoint.

export async function POST(request: Request) {
  try {
    if (!process.env.LEMONSQUEEZY_WEBHOOK_SECRET) {
      return new Response("Lemon Squeezy Webhook Secret not set in .env", {
        status: 400,
      });
    }
  } catch (error) {
    console.log(error);
  }
}

Now we need to make sure the request is from Lemon Squeezy and not from some internet nerds to protect our application.

const rawBody = await request.text();
  const secret = process.env.LEMONSQUEEZY_WEBHOOK_SECRET;

  const hmac = crypto.createHmac("sha256", secret);
  const digest = Buffer.from(hmac.update(rawBody).digest("hex"), "utf8");
  const signature = Buffer.from(
    request.headers.get("X-Signature") || "",
    "utf8"
  );

  if (!crypto.timingSafeEqual(digest, signature)) {
    throw new Error("Invalid signature.");
  }
  console.log("Signature verified");

  const data = JSON.parse(rawBody) as unknown;

We need to temporarily store the data of the webhook, just to keep track if a webhook fails.

export async function storeWebhookEvent(eventName: string, body: any) {
  const { data, error } = await supabase
    .from("webhook_events")
    .upsert(
      [
        {
          user_id: body.meta.custom_data.user_id,
          event_name: eventName,
          body,
        },
      ],
      { onConflict: "id" }
    )
    .select();

  if (error) {
    throw error;
  }
  return data;
}

Now we can process the webhook depending up on your needs.

export async function processWebhookEvent(webhookEvent: any) {
  try {
    const { data: dbWebhookEvent, error } = await supabase
      .from("webhook_events")
      .select("*")
      .eq("id", webhookEvent[0].id)
      .single();

    if (error || !dbWebhookEvent) {
      throw new Error(
        `Webhook event #${webhookEvent.id} not found in the database.`
      );
    }
  } catch (error) {
    console.error(error);
  }

  const eventBody = webhookEvent[0].body;


  if (
    webhookEvent[0].event_name.startsWith("subscription_updated") ||
    webhookEvent[0].event_name.startsWith("subscription_created")
  ) {
    const attributes = eventBody.data.attributes;
    const variantId = attributes.variant_id;

    const { data: plan, error: planError } = await supabase
      .from("plans")
      .select("*")
      .eq("variant_id", variantId)
      .single();

    if (planError || !plan) {
      throw new Error(`Plan with variantId ${variantId} not found.`);
    }
    let priceId = eventBody.data.attributes.first_subscription_item.price_id;
    let lPrice = await getPrice(priceId);

    const updateData = {
      lemon_squeezy_id: eventBody.data.id,
      order_id: attributes.order_id,
      status: attributes.status,
      renews_at: attributes.renews_at,
      ends_at: attributes.ends_at,
      trial_ends_at: attributes.trial_ends_at,
      price: lPrice.data?.data.attributes.unit_price,
      is_paused: attributes.status == "paused" ? true : false,
      subscription_item_id: attributes.first_subscription_item.id,
      is_usage_based: attributes.first_subscription_item.is_usage_based,
      user_id: eventBody.meta.custom_data.user_id,
      plan_id: plan.id,
    };

    const { error: upsertError } = await supabase
      .from("subscriptions")
      .upsert([updateData], { onConflict: "lemon_squeezy_id" });
    if (upsertError) {
      throw new Error(`Failed to upsert subscription: ${upsertError.message}`);
    }

    /** 
     * Mark the webhook event as processed
     * You can remove the webhook from the db if it is processed successfully
     * Implement this in your DB
    */



}

Now you can have various utility functions like pauseUserSubscription, cancelSub etc to make your app complete.

LemonSqueezy provides methods to implement this, here is a dummy code for you to cancel the subscription

export async function cancelSub(id: string) {
  // Get user subscriptions
  const userSubscriptions = await getUserSubscription();

  // Check if the subscription exists
  const subscription = userSubscriptions?.find(
    (sub) => sub.lemon_squeezy_id === id
  );

  if (!subscription) {
    throw new Error(`Subscription #${id} not found.`);
  }

  const cancelledSub = await cancelSubscription(id);

  console.log(cancelledSub, "cancelledSub");

  if (cancelledSub.error) {
    throw new Error(cancelledSub.error.message);
  }

  // Update the db
  try {
   //DB logic
  } catch (error) {
    throw new Error(`Failed to cancel Subscription #${id} in the database.`);
  }

  revalidatePath("/");

  return cancelledSub;
}

That’s it. That’s all you need to get started with payment processing.

Now, you can check the documentation for your custom needs and use case and try building this on your own and you will see how easy it is to work with LemonSqueezy

Conclusion

In this detailed blog on LemonSqueezy, we learned how to implement payment processing in your full-stack application.

If you learned something new and useful, share this post with others.

JavaScript + OOPs

adarsh — Tue, 09 Jul 2024 10:29:30 +0000

OOP — or Object-Oriented Programming — can help you organize your code in a more logical and manageable way, and it can make it easier to reuse and extend your code in the future.

In JavaScript, object-oriented programming (OOP) is a programming paradigm that is based on the concept of “objects”, which are collections of data and functions that work together to perform certain tasks.

In OOP, objects are created from “classes”, which are templates that define the properties and methods of the objects they create.

Advantages of OOP

One of the key advantages of using OOP in JavaScript is that it allows you to organize your code in a more logical and manageable way. With OOP, you can create classes that represent real-world objects and define the properties and methods that those objects have. This makes it easier to understand and work with your code, especially as it grows in complexity.

Another benefit of OOP in JavaScript or programming is that it allows for code reuse and extensibility.

Once you have defined a class, you can create as many objects from that class as you need. This can save you a lot of time and effort because you don’t have to write the same code over and over again for each object.

Additionally, you can create new classes that inherit from existing classes, which allows you to reuse and extend the functionality of existing code.

Getting started with OOP
To get started with OOP in JavaScript, you first need to understand the concept of a class. In JavaScript, a class is a template that defines the properties and methods of the objects it creates. Here is an example of a simple class that represents a person:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

In this example, the Person class has two properties: name and age. It also has one method, greet(), which outputs a greeting to the console.

To create an object from this class, you use the new keyword followed by the name of the class, like this:

const person1 = new Person("John", 25);
const person2 = new Person("Jane", 30);

Once you have created an object, you can access its properties and methods using dot notation, like this:

OOP Inheritance in JavaScript
In addition to defining classes and creating objects, OOP in JavaScript also allows for inheritance. This means that you can create new classes that inherit the properties and methods of existing classes. For example, let’s say you want to create a Student class that represents a student at a school. The Student class could inherit from the Person class, like this:

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  info() {
    console.log(`${this.name} is ${this.age} years old and goes to ${this.school}.`);
  }
}

Four Pillars of OOPS
The four pillars of object-oriented programming (OOP) in JavaScript are:

Encapsulation:
Encapsulation refers to the idea of wrapping data and functionality together inside an object. In OOP, objects are the basic building blocks of your code, and each object has its own properties and methods. This allows you to organize your code in a way that makes it easier to understand and work with.

For example, you might create a Person class that has properties like name and age, and methods like greet() and introduce().

Abstraction:

Abstraction is the process of hiding the details of an object’s implementation and only exposing the necessary information to the user. In OOP, you can use abstraction to make your code more modular and flexible.

For example, you can define an abstract class that provides a common interface for a group of related objects, without specifying how those objects are implemented.

Inheritance:
Inheritance is the process of creating new classes that inherit the properties and methods of existing classes. This allows you to reuse and extend existing code, which can save you time and effort.

For example, if you have a Person class that defines common properties and methods for a person, you can create a Student class that inherits from the Person class and adds additional functionality.

Polymorphism:
Polymorphism is the ability of different objects to respond to the same method call in different ways. In OOP, polymorphism allows you to create objects that share a common interface, but have different implementations. This makes your code more flexible and allows you to write code that is more easily maintainable and extensible.

For example, you can create a Shape class that defines a common draw() method, and then create subclasses for different types of shapes (e.g. Circle, Rectangle, etc.) that each implement the draw() method in their own way.

Here is an example of how these pillars of OOP might be used in a JavaScript program:

// Encapsulation: define a Person class with properties and methods
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Inheritance: define a Student class that inherits from the Person class
class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  info() {
    console.log(`${this.name} is ${this.age} years old and goes to ${this.school}.`);
  }
}

// Abstraction: define an abstract Shape class with a common draw() method
abstract class Shape {
  abstract draw(): void;
}

// Polymorphism: define subclasses of Shape that implement the draw() method in their own way
class Circle extends Shape {
  draw() {
    console.log("Drawing a circle...");
  }
}
class Rectangle extends Shape {
  draw() {
    console.log("Drawing a rectangle...");
  }
}

Wrapping Up
Object-oriented programming is a fundamental concept in JavaScript and can greatly improve the structure and organization of your code. By understanding and implementing concepts such as encapsulation, inheritance, and polymorphism, you can create more efficient and maintainable programs.

Whether you’re a beginner or an experienced developer, taking the time to master OOP in JavaScript will pay off in the long run. Thanks for reading, and happy coding.

React JS Netflix Clone??

adarsh — Tue, 21 Sep 2021 06:12:46 +0000

Do you wanna create NETFLIX clone using React??

check this link
video link

So I have created a video where you can learn concepts like
react js state,useState hook ,useEFFECT hook and api calling via a simple project do check that

Forem: adarsh

7 Interesting GitHub Repositories to Become a Pro React Developer

1. Under the Hood: ReactJS

Bogdan-Lyashenko / Under-the-hood-ReactJS

Entire React code base explanation by visual block schemes (Stack version)

Under the hood: React

I wanted to automate process of "learning and documenting" a complex codebase as much as possible, so I started Codecrumbs project. It will help to build projects like "Under the hood ReactJs" in a shorter time and in a simpler way!

2. Awesome React

enaqx / awesome-react

A collection of awesome things regarding React ecosystem

Awesome React

React

React General Resources

React Tutorials

3. React TypeScript Cheatsheet

React TypeScript Cheatsheets | React TypeScript Cheatsheets

4. React Patterns

vasanthk / react-bits

✨ React patterns, techniques, tips and tricks ✨

React Bits

5. React Roadmap

React Developer Roadmap: Learn to become a React developer

6. A Production-Ready React Application

dubinc / dub

Open-source link management infrastructure. Loved by modern marketing teams like Vercel, Raycast, and Perplexity.

Dub.co

Introduction

Features

Tech Stack

Self-Hosting

Contributing

Repo Activity

License

7. Production-Ready React Hooks

streamich / react-use

React Hooks — 👍

👍 react-use

Wrapping It Up!

7 Github Repositories to Become a Pro Frontend Developer

6 Cool Things You Can Do With Regular HTML

10 Websites every Web developer should at least look

UI verse

Glitch

Shots.so

Dev Docs

LambdaTest Free Online Tools

Mobbin

Ping Test

LandingFolio

Free for Dev

Tiny Wow

The Only Next.js Guide you need

The Origins of Next.js

Installation

Understanding the Project Structure

Key File Conventions in Next.js

Layout and Page Files

Special Files

Advanced Routing Features

Route Groups

Dynamic and Parallel Routes

Intercepting Routes

Middleware and Data Fetching

Middleware

Data Fetching

Server Components vs. Client Components

Server Components

Client Components

Rendering Methods in Next.js

Server-Side Rendering (SSR)

Static Site Generation (SSG)

Dynamic Rendering

Styling and Optimization

Tailwind CSS

Image and Script Optimization

Deployment

10 Things Every JavaScript Developer Should Know

Scope

Hoisting

Callbacks

👍
react-use