Forem: Gimnath Perera

❄️ frost-react: instant snowfall for React

Gimnath Perera — Mon, 22 Dec 2025 03:25:55 +0000

frost-react: instant snowfall for React

Every December, every product launch, every fun landing page — I kept running into the same tiny problem: “I just want a clean snowfall effect in my React app… why is this so complicated?” That frustration is exactly why I built frost-react.

frost-react is a lightweight, accessible, and customizable snowfall animation component for React — designed to be simple to use, performant, and pleasant for both developers and users.

🌨 What is frost-react?

frost-react is an npm package that provides a <Snowfall /> React component. Drop it into your app and you instantly get a smooth snowfall animation — no canvas setup, no animation math, no performance headaches.

Built with:
⚛️ React

🧠 TypeScript
⚡ performance-first defaults
♿ accessibility in mind
📦 zero runtime dependencies (besides React)

👉 GitHub: https://github.com/gimnathperera/frost-react

👉 npm: https://www.npmjs.com/package/frost-react

🤔 Why I built this library

1) Existing solutions felt overkill. Most animation libraries are either extremely generic (you still have to build snowfall logic yourself) or heavy and over-engineered for something purely visual. I wanted something that feels like <Snowfall /> — no config required unless you want it.

2) Performance matters (especially on mobile). Snowfall is purely decorative; it should never make your app feel slow. frost-react automatically reduces flake count on mobile, avoids unnecessary re-renders, and keeps animations smooth on low-powered devices. You still get control, but the defaults are safe.

3) Accessibility should not be optional. Many users prefer reduced motion. frost-react respects prefers-reduced-motion, uses clean layering with z-index, and ships with non-intrusive defaults that don’t block interaction. Animation should enhance UX — not harm it.

🚀 Installation & quick start

Install it like any normal npm package:

npm install frost-react

Use it in your app:

import { Snowfall } from "frost-react";

export default function App() {
  return (
    <>
      <Snowfall />
      <main>Your app content</main>
    </>
  );
}

That’s it. You now have snowfall. ❄️

🎛 Customization without the pain

Tweak the animation easily via props:

<Snowfall
  flakeCount={120}
  wind={[-30, 30]}
  speed={[6, 14]}
  size={[12, 28]}
  opacity={[0.5, 0.9]}
  color="#ffffff"
/>

Available props

Prop	What it controls
`enabled`	Turn snowfall on/off
`flakeCount`	Number of snowflakes
`snowflakeCharacter`	Emoji or character used
`speed`	Falling speed
`size`	Snowflake size
`opacity`	Transparency
`wind`	Horizontal drift
`color`	Snow color
`zIndex`	Layer positioning
`className` / `style`	Custom styling

All props are fully typed with TypeScript.

🧩 Works with modern React frameworks

frost-react plays nicely with modern setups:

Next.js (SSR safe)
Remix
Vite
CRA
ESM & CommonJS

No window crashes on the server. No hacks.

🧠 Developer experience matters

Full TypeScript support and clean internal architecture
Storybook playground for testing
Sensible defaults with escape hatches
Zero unnecessary dependencies

Small library. Clean responsibility.

🎄 When should you use frost-react?

Holiday landing pages or seasonal UI flair
Marketing sites and fun dashboards
Temporary events (Xmas, New Year, winter promos)

If you want joy without bloat — this fits.

🧊 Final thoughts

frost-react exists because I wanted a snowfall effect that looks good, performs well, respects users, and doesn’t fight developers. It’s intentionally small, focused, and opinionated — in a good way. If you try it out, break it, improve it, or build something fun with it — I’d love to see it.

Happy coding,
Gimnath❄️

🔗 Links

GitHub: https://github.com/gimnathperera/frost-react
npm: https://www.npmjs.com/package/frost-react

Weekly Tech Discoveries Part - 03

Gimnath Perera — Mon, 28 Jul 2025 00:18:52 +0000

Welcome to another edition of Weekly Tech Discoveries, where we dive deep into the most innovative tools reshaping the technology landscape. This week's lineup features groundbreaking solutions that are solving real problems for developers, HR professionals, and remote teams worldwide.

1. Trae: The AI Revolution in Code Development

Trae isn't just another IDE—it's a glimpse into the future of software development. This intelligent development environment represents a paradigm shift where artificial intelligence becomes your coding partner rather than just a tool.

What makes Trae extraordinary is its contextual understanding. Unlike traditional IDEs that offer basic autocomplete, Trae analyzes your entire project architecture to provide meaningful suggestions. It understands not just syntax, but intent—suggesting entire function implementations based on comments, predicting potential bugs before you run tests, and even refactoring code to follow best practices automatically.

The real magic happens in collaborative scenarios. Trae can analyze pull requests, suggest improvements, and even explain complex code sections to new team members. For startups and enterprises alike, this translates to faster development cycles, reduced debugging time, and improved code quality. Early adopters report up to 40% reduction in routine coding tasks, allowing developers to focus on creative problem-solving rather than boilerplate implementation.

2. Qwenve Corder: Next-Generation Video Processing Excellence

Qwenve Corder emerges as a powerhouse in the video processing domain, offering capabilities that rival proprietary solutions at a fraction of the cost. This library addresses one of the most challenging aspects of modern software development: efficient multimedia handling.

Traditional video processing often involves complex workflows and multiple tools. Qwenve Corder streamlines this by providing a unified API that handles everything from basic format conversion to advanced real-time effects processing. The library's intelligent encoding algorithms automatically optimize video quality based on target platforms and bandwidth constraints.

For content creators and streaming platforms, this means delivering superior user experiences with minimal infrastructure overhead. The library's support for hardware acceleration ensures that processing tasks don't become bottlenecks, while its modular architecture allows developers to include only the components they need, reducing application bloat.

3. Frappe HRMS: Democratizing Enterprise HR Management

At https://github.com/frappe/hrms , we find something truly special: an open-source HR management system that competes with six-figure enterprise solutions. This isn't just software—it's a movement toward accessible, customizable HR technology.

Frappe HRMS transforms how organizations handle their most valuable asset: people. The platform's employee lifecycle management covers everything from onboarding to exit interviews, with sophisticated workflows that adapt to different organizational structures. The attendance tracking system integrates with various devices and methods, from traditional打卡 systems to mobile apps and geolocation services.

The payroll engine deserves special recognition. It handles complex salary structures, statutory compliance across multiple jurisdictions, and tax calculations with remarkable accuracy. Multi-currency support makes it ideal for international organizations, while the built-in reporting dashboard provides insights that would typically require expensive business intelligence tools.

What sets this apart is its extensibility. Organizations can customize workflows, add fields, create custom reports, and integrate with existing systems without touching core code. The active community contributes plugins and extensions regularly, ensuring the platform continues evolving with changing HR needs.

4. Neko: Redefining Remote Browser Access

Neko at https://github.com/m1k1o/neko represents a breakthrough in secure, collaborative browsing. This Docker-based virtual browser solution leverages WebRTC to deliver desktop-quality performance through any web browser.

The implications are profound. Security teams can provide isolated browsing environments for handling suspicious links or sensitive research. Educational institutions can ensure all students have access to identical browser configurations regardless of their personal devices. Support teams can replicate customer issues exactly by sharing the same browser environment.

Neko's architecture is elegantly simple yet powerful. Each browser instance runs in its own Docker container, completely isolated from the host system and other instances. WebRTC provides sub-second latency, making the experience feel native rather than remote. The system supports multiple concurrent users, enabling collaborative browsing sessions where team members can interact with the same web page simultaneously.

For enterprises, this eliminates the headaches of browser compatibility testing. Instead of maintaining multiple browser installations across development machines, teams can spin up identical environments on demand. The Docker integration means scaling is as simple as adding more containers, and the entire system can be managed through standard container orchestration tools.

Final Thoughts

These four tools represent different aspects of a larger trend: the democratization of sophisticated technology. Where once only large enterprises could afford AI-assisted development tools, comprehensive HR systems, or secure remote access solutions, these capabilities are now available to organizations of all sizes through open-source initiatives and innovative architectures.

The convergence of containerization, real-time web technologies, and artificial intelligence is creating opportunities that didn't exist even a few years ago. Developers can now build applications that were previously impossible, HR professionals can access enterprise-grade tools without enterprise budgets, and remote teams can collaborate with unprecedented efficiency and security.

What's particularly exciting is how these tools complement each other. A developer using Trae to build an application might deploy it using container technologies similar to Neko, while the organization uses Frappe HRMS to manage their team. This ecosystem approach creates powerful synergies that amplify the value of each individual tool.

As we move forward, expect to see more innovations like these—tools that don't just solve problems, but eliminate entire categories of technical challenges. The future of technology lies not in making complex things possible, but in making the previously impossible simple, accessible, and affordable.

Stay tuned for next week's discoveries, where we'll continue exploring the tools and technologies that are reshaping our digital landscape.

Weekly Tech Discoveries Part - 02

Gimnath Perera — Wed, 25 Jun 2025 15:07:28 +0000

🧠 Weekly Tech Discovery

Staying up-to-date in the fast-moving world of tech can feel like trying to drink from a firehose — especially if you're a developer constantly balancing learning new tools while shipping features and maintaining codebases.

That’s where this weekly discovery series comes in. Each week, I’ll curate and explore tools, platforms, libraries, and AI-powered innovations that are making waves across the development community.

This week, we’re diving into five unique tools that span from mobile-first coding apps to conversational UI builders — all designed to boost your productivity and creativity as a developer.

Let’s dive in!

1. 21st.dev – Mobile-First Development Gets Real

Designed for mobile devices, offering better experience and more features

Platform: Web / Mobile

Category: AI Coding Assistant / Mobile Development

While most developers still rely heavily on desktop environments, the trend toward mobile-first workflows is growing. Enter 21st.dev, a mobile app tailored specifically for developers who want to interact with code and AI models on the go.

The app promises a native mobile experience with support for AI-assisted coding, command execution, and even integration with GitHub and other cloud-based tools.

📱 Whether you're debugging code during a commute or brainstorming ideas between meetings, 21st.dev makes it easier than ever to stay productive outside your laptop.

🔗 Visit 21st.dev

2. Clideo Resize Video – Simple, Fast, and Powerful Media Tool

Create stunning visuals without the hassle

Platform: Web

Category: Media Editing / UI Components

Clideo started out as a simple online video editing suite but has evolved into a broader toolkit for visual content creation. Its Resize Video feature is particularly useful for developers who need to quickly adapt media assets for different platforms — no downloads or installations required.

🛠️ Bonus: Clideo also offers downloadable UI components and templates that can be integrated directly into web projects, saving time and effort when building landing pages or marketing sites.

🔗 Resize Video Tool | Explore UI Components

3. Qwen AI Chat – Alibaba’s AI-Powered Developer Companion

Designed for mobile devices, offering better experience and more features

Platform: Web / Mobile

Category: AI Assistant / Code Generation

Developed by Alibaba Cloud, Qwen is one of the leading large language models in the market today. While it's already integrated into many IDEs and tools, the standalone chat interface at chat.qwen.ai provides a clean, focused environment for developers to interact with the model.

🤖 Qwen excels at tasks like:

Generating boilerplate code
Debugging snippets
Writing documentation
Translating code between languages

It's especially handy for developers working in multilingual environments or those who want a mobile-friendly assistant that understands both natural language and programming syntax.

🔗 Try Qwen Chat

4. Lovable.dev – Build Apps & Websites by Talking to AI

What do you want to build? Create stunning apps & websites by chatting with AI.

Platform: Web

Category: AI Website Builder / No-Code

Lovable.dev is a fascinating experiment in conversational design. Instead of dragging and dropping elements or writing HTML/CSS, you simply describe what you want — and AI builds it for you.

💬 For example, typing "a homepage for a SaaS product with a pricing table and testimonials" will generate a complete layout with responsive design and basic interactivity.

✨ Ideal for MVP builders, designers, and developers looking to speed up early-stage prototyping.

🔗 Visit Lovable.dev

5. Bolt.new – AI-Powered Design-to-Code Platform

What do you want to build? Create stunning apps & websites by chatting with AI.

Platform: Web

Category: AI UI Builder / Code Generator

Bolt.new joins the growing list of AI-driven platforms that convert natural language input into functional frontend code. It’s similar to Lovable in concept but focuses more on generating reusable UI components and structured layouts.

⚡ Whether you're building a dashboard, landing page, or component library, Bolt.new helps accelerate the process by reducing repetitive boilerplate work.

🔗 Try Bolt.new

💡 Why These Tools Matter

What stands out about this week’s picks is how AI is becoming deeply embedded in the everyday tools developers use. From mobile coding assistants to voice-controlled UI builders, these platforms aren’t just gimmicks — they represent real shifts in how we approach problem-solving and prototyping.

Here’s a quick breakdown:

Tool	Use Case	AI Integration Level
21st.dev	Mobile coding	High
Clideo	Media editing	Low
Qwen	Code generation & help	Very High
Lovable	Conversational UI builder	High
Bolt.new	AI-powered UI scaffolding	High

These tools are worth exploring not only because they save time but because they offer glimpses into the future of development — one where human creativity and machine intelligence work hand-in-hand.

📌 Final Thoughts

This week’s discoveries show how rapidly the development landscape is evolving. Whether you're a full-stack engineer, a designer, or someone just starting out, there’s something here for everyone.

If you found this helpful, consider subscribing to get a new list every week 👇

📌 Want More Like This?

Follow along next week for more exciting tools, libraries, and AI-powered innovations shaping the future of development.

*Got feedback or suggestions for next week’s tools? Hit reply or reach out on gimnathperera@gmail.com

Unlocking the Potential of Convex.dev: Revolutionizing Backend Development

Gimnath Perera — Fri, 26 Jul 2024 19:07:37 +0000

In the ever-evolving landscape of software development, creating robust and scalable backend systems has always been a challenge. From managing databases to handling real-time updates, developers often juggle multiple tools and frameworks to build efficient backends. Enter Convex.dev, a cutting-edge platform designed to simplify and enhance backend development. In this article, we'll explore the key features, benefits, and use cases of Convex.dev, showcasing how it is revolutionizing the way developers build backends.

What is Convex.dev?

Convex.dev is a comprehensive backend-as-a-service (BaaS) platform that provides developers with the tools and infrastructure needed to build and deploy scalable backend applications effortlessly. It abstracts away the complexities of traditional backend development, offering a streamlined and efficient approach to handling data, authentication, and real-time updates.

Key Features of Convex.dev

1. Real-time Data Sync
Convex.dev excels in providing real-time data synchronization, allowing applications to reflect changes instantly across all connected clients. This feature is particularly useful for collaborative applications, live dashboards, and any scenario requiring immediate data consistency.

2. Serverless Architecture
By adopting a serverless architecture, Convex.dev eliminates the need for developers to manage servers, scaling automatically based on demand. This approach not only reduces operational overhead but also ensures that applications remain performant under varying loads.

3. GraphQL API
Convex.dev offers a powerful GraphQL API, enabling developers to query and manipulate data with ease. The flexibility of GraphQL allows for efficient data fetching, minimizing over-fetching or under-fetching of data and improving overall application performance.

4. Integrated Authentication
Security is a critical aspect of any backend system. Convex.dev simplifies authentication by providing built-in support for various authentication methods, including OAuth, JWT, and social logins. This integration ensures secure and seamless user authentication without the hassle of implementing it from scratch.

5. Data Persistence and Storage
With Convex.dev, developers can leverage its robust data persistence and storage capabilities. The platform supports multiple database options, allowing developers to choose the best fit for their application's needs. Additionally, it offers automated backups and data recovery options, ensuring data integrity and availability.

6. Custom Logic with Serverless Functions
Convex.dev allows developers to write custom business logic using serverless functions. These functions can be triggered by various events, such as database changes or API requests, providing a flexible way to implement complex workflows and business rules.

Benefits of Using Convex.dev

- Rapid Development and Deployment
Convex.dev's intuitive interface and comprehensive toolset enable developers to quickly build and deploy backend applications. This rapid development cycle reduces time-to-market, allowing businesses to deliver features and updates faster.

- Scalability and Performance
The serverless architecture of Convex.dev ensures that applications can scale effortlessly to handle increased traffic and demand. Developers can focus on building features without worrying about infrastructure scaling issues.

- Cost Efficiency
By abstracting away server management and offering a pay-as-you-go pricing model, Convex.dev helps businesses save on infrastructure costs. The platform's automatic scaling ensures that resources are used efficiently, reducing unnecessary expenses.

- Enhanced Collaboration
The real-time data synchronization feature fosters collaboration among team members, enabling them to work on shared data seamlessly. This is particularly beneficial for remote teams and applications requiring real-time collaboration.

- Security and Compliance
Convex.dev prioritizes security by providing robust authentication mechanisms and ensuring data encryption. The platform also complies with industry standards and regulations, giving businesses peace of mind regarding data protection and privacy.

Use Cases of Convex.dev

- Collaborative Applications
Applications such as project management tools, collaborative document editors, and team communication platforms benefit greatly from Convex.dev's real-time data synchronization and integrated authentication features.

- E-commerce Platforms
E-commerce platforms can leverage Convex.dev's scalability and performance to handle high traffic during peak shopping seasons. The platform's GraphQL API allows for efficient product data querying and management.

- IoT Applications
Convex.dev's real-time data capabilities make it an ideal choice for IoT applications that require instant data updates and device synchronization. The platform's serverless functions enable custom logic for processing and responding to IoT events.

- Live Dashboards and Analytics
Businesses can create live dashboards and analytics applications using Convex.dev's real-time data synchronization. These applications provide up-to-date insights and visualizations, helping businesses make informed decisions.

Conclusion

Convex.dev is a game-changer in the world of backend development, offering a comprehensive and efficient solution for building scalable and performant backend systems. With its real-time data synchronization, serverless architecture, and integrated authentication, Convex.dev simplifies the complexities of backend development, allowing developers to focus on creating innovative applications. Whether you're building collaborative tools, e-commerce platforms, IoT applications, or live dashboards, Convex.dev provides the features and flexibility needed to bring your ideas to life. Embrace the future of backend development with Convex.dev and unlock the full potential of your applications.

Weekly Tech Discoveries Part - 01

Gimnath Perera — Sat, 10 Feb 2024 18:23:24 +0000

01. v0.dev by Vercel

Introducing v0.dev by Vercel, a groundbreaking AI-powered UI generation tool. With v0, users can effortlessly create stunning UI designs based on simple prompts. What sets v0 apart is its unique ability to not only generate UIs but also provide the option to download or copy the source code in HTML and React components. Experience the future of UI design with v0 by Vercel.

02. Galeileo.ai

Discover Galeileo.ai, an innovative platform empowering users to effortlessly generate captivating designs for web, mobile, and desktop applications. By simply providing prompts, users can unlock a world of stunning possibilities. What makes Galeileo.ai stand out is its seamless integration with Figma, offering designers and design enthusiasts an unparalleled level of convenience. Say goodbye to complexity and hello to a smoother design process with Galeileo.ai.

03. Fig

Introducing Fig, the ultimate terminal autocomplete tool designed to streamline your workflow. With Fig, typing commands becomes a breeze as it anticipates your next move and suggests completions in real-time. Whether you're a seasoned developer or just getting started, Fig enhances your productivity by eliminating guesswork and reducing typing time. Experience the future of terminal navigation with Fig.

04. Refine.dev

Refine is a platform that enables developers to build and manage data-driven applications with ease. It provides a powerful framework and a user-friendly interface for creating custom admin panels, dashboards, and CRUD interfaces. Refine abstracts away much of the complexity involved in backend development, allowing developers to focus on building robust applications quickly and efficiently. With features like data filtering, sorting, and pagination, Refine simplifies the process of working with databases and APIs, making it an invaluable tool for developers looking to accelerate their workflow and deliver exceptional user experiences.

05. Convex

Convex is a Backend-as-a-Service (BaaS) platform similar to Firebase, offering developers a comprehensive set of tools to build and manage their applications. With Convex , developers can easily handle user authentication, database management, file storage, and more, all through a simple and intuitive interface. Whether you're creating a web or mobile app, Convex simplifies the backend development process, allowing you to focus on building great user experiences without worrying about server management or infrastructure setup. Experience the power of Convex and accelerate your app development journey today!

Yup vs. Zod vs. Joi: A Comprehensive Comparison of JavaScript Validation Libraries

Gimnath Perera — Wed, 02 Aug 2023 17:09:40 +0000

Introduction

When it comes to handling data validation in JavaScript, developers often face the challenge of choosing the right library. Three popular options for validation are Yup, Zod, and Joi. In this article, we will dive into each library's features, code snippets, and compare their strengths and weaknesses to help you make an informed decision for your projects.

Yup: Elegant and Easy

Yup is a simple and elegant library for data schema validation. It provides a declarative API, making it easy to read and understand validation rules. Its lightweight nature makes it a great choice for smaller projects or scenarios where performance is critical.

Example Usage:

Pros:

Declarative syntax for easy-to-read validation rules.
Lightweight and fast for small to medium-sized projects.
Good community support and actively maintained.

Cons:

Lack of complex validation features for more extensive projects.
Limited ecosystem compared to other libraries.

Zod: Powerful and Type-Safe

Zod is a powerful validation library that shines in its ability to leverage TypeScript's type system. If you're using TypeScript, Zod's type inference will ensure that your validation code is type-safe, providing extra confidence in your data handling.

Example Usage:

Pros:

Strong TypeScript support for type-safe validation.
Powerful validation capabilities and rich validation API.
Excellent error messages and error handling.

Cons:

Learning curve for developers unfamiliar with TypeScript.
Might add overhead for projects not using TypeScript.

Joi: Feature-Rich and Battle-Tested

Joi is a mature and feature-rich validation library, often used in Node.js applications. It provides a wide range of validation rules and customization options, making it suitable for complex validation scenarios.

Example Usage:

Pros:

Battle-tested and widely used in the Node.js ecosystem.
Extensive set of validation rules and options.
Robust error handling and customization capabilities.

Cons:

Bulkier and can add some overhead to smaller projects.
May require more effort for type safety in TypeScript projects.

Conclusion

Each validation library, Yup, Zod, and Joi, has its own unique strengths and use cases.

Yup is an excellent choice for simple validation needs, thanks to its simplicity and lightweight nature.
Zod is a powerful option for TypeScript projects, leveraging type safety and robust validation capabilities.
Joi is the go-to library for more complex scenarios, offering a wide range of validation rules and customization options.

Ultimately, the choice depends on your project's requirements, familiarity with TypeScript, and the level of complexity your data validation demands. Whatever library you choose, these validation tools will undoubtedly enhance the reliability and accuracy of your JavaScript applications. Happy coding!

Let's dive in to Cross-Origin

Gimnath Perera — Thu, 13 Jul 2023 03:04:37 +0000

What is Cors-Origin?

A technique or protocol called Cross-Origin Resource Sharing (CORS) enables devices on one domain to access resources located on other domains.

Browsers typically block requests that come from beyond their own domain for security concerns. In some circumstances, you might want to get around this and access resources from different domains, and CORS makes this feasible.

What is Same-Origin Policy?

Another notion, called Same-Origin Policy (SOP), permits resource access on related domains. We'll talk about the SOP and how it contributes to website security in this guide. We will also go through how CORS increases the SOP's speed and versatility.

This means that if two domains want to share resources, their origins must be the same. The domain, port number, and protocol type of two websites must match for their origins to be the same. The sources are regarded as having separate origins if any one of the three qualities is discovered to be different.

Despite being a restrictive system, SOP is quite secure and prevents potential assaults on websites using cross-domain resources.

SOP provides protection for websites but may also be used as a meeting place to communicate with external websites.

What is Cross-origin Resource Sharing (CORS)?

The introduction of CORS enables rapid and simple access to subdomains and reliable third parties. As was previously mentioned, CORS provides controlled resource sharing between cross-domain origins.

In accordance with CORS requirements, the browser and the cross-origin website you are attempting to access exchange HTTP headers that specify trustworthy web origins and associated characteristics for access control.

CORS provides restricted access to websites that span domains and is therefore secure. CORS is typically used to address restrictions brought on by SOP. CORS can, however, pose serious security threats if it is implemented incorrectly. CORS configuration issues could lead to difficulties and mistakes.

Let's find out more about CORS mistakes and how to prevent them.

How to find the error?

You need to determine which request is problematic and why in order to comprehend the underlying problem with the CORS settings. You could do it by following these steps:

Open browser developer tools and click Console if you see something like this when you are making the api request. You have the Cross origin issue.

How to enable CORS in your apps

You can use several steps to prevent this CORS errors ruining your app.

Fix 01:

By include the following in a.htaccess file in your app's web root directory (public), you can allow sending CORS headers from your app:

You can set a specific url by using this Origin: Access-Control-Allow-Origin: http://localhost:3000 or you can make all urls enabled by using this Access-Control-Allow-Origin: *

Fix 02:

There are plenty of google extensions available to prevent CORS errors from occurring. By installing one of those browser extension can easily solve your problem.

But keep this in mind, this is not the ideal solution and this is not practical when you deploy your application because can we ask our client to install a browser extension to run our app 😂

Fix 03:

By building a middleware/proxy we can prevent CORS errors. This is the best solution among all the solutions that are mentioned above. Following code snippet is an example how you can use a simple node middleware to overcome CORS errors.

How does that function? Every response from the server receives an Access-Control-Allow-Origin: * header thanks to the proxy's use of express middleware. The proxy requests a response another server at its own /random GET endpoint. The request is not blocked by the same-origin policy despite the fact that the domains are distinct. This is a server-to-server request, after all. The resultant data and the Access-Control-Allow-Origin: * header are then created by the proxy and sent back to the original requester (a browser app).

Conclusion

The frontend developer may suffer greatly from the CORS error. However, it gets a little more tolerable once you comprehend the underlying same-origin policy that is responsible for the mistake and how it defends against the malicious cross-site request forgery attack.

Finally, thanks to all these fixes, you won't ever have to worry about running into a red CORS error in your browser console logs. Instead, you'll pull out the plugin or a proxy and declare in its face:

How To Use Error Boundaries in React ♥

Gimnath Perera — Sun, 09 Oct 2022 15:17:40 +0000

What are Error Boundaries

Error Boundaries were introduced in React v16 as a way to catch tricky errors that occur during the render phase. In the past, this would have caused the app to unmount completely, and the user would just see a blank web page, which is not ideal!

You can learn more about React Error Boundaries via code snippets and interactive demos.

Let's get started

In this article we build a react application from scratch and walk you through Error Boundaries.

Prerequisites

Node v16.4.2
npm v7.19.1
Visual Studio Code

Create react application

Let's create a simple react application using following command. Open terminal in your project directory and run this command.

npx create-react-app client

let's open our project file with visual studio code.

cd client
code .

Cheers! Your folder structure may looks like this at this point.

Encountering Errors without Error Boundaries

Unexpected is expected, We will inevitably occurs unexpected errors in our applications when we develop, test and even in the production. You may trying to loop through an error which doesn't exist or you may trying to access to a nested object property which isn't populated in the moment. Most of the time you have control of the behavior of your application but sometimes you don't.

Simulate the error

Let's create a file name BugDemo.js. The following code snippet will be helped you to understand what normally happens without any Error Boundary in react applications.

If you import the component in App.js file and run the application using npm start or yarn start command you can see the below screen.

When we continuously press plus button the counter value of the component button is getting increased. But what happens when the counter value reaches 5 ?

Yes! A blank screen the end user can be shocked. Sometimes the whole application can be crashed. It is very important to use Error Boundaries because of this.

Solve the problem with Error Boundaries

Create a new file in the component/ directory and paste the below code.

Now, Let's wrap our imported BugDemo component with this newly created Error Boundary in App.js, like this;

The moment of truth

Let's check what happens now when the user reaches counter value 5. No Blank screens anymore.

Likewise you can show the error message to the user or you can re-try the task which was failing before if it is possible.

Conclusion

With the evolution of React 16+. Error Boundaries are generally available to use. The common standard is to use at least a one Error Boundary in the root of your application. This will increase the user-experience (UX) of your application and it will prevent the user seeing a blank or crashed pages throughout your application.