DEV Community: Sandeep Kherkatary

What to Expect from React 19? React Compiliers, React Canary, React Actions.

Sandeep Kherkatary — Wed, 20 Mar 2024 05:42:13 +0000

It's been nearly two year since react 18 was released. It introduced many new features, but it also had limitations. This year, we'll be getting React 19, and its release date is quickly approaching. So let's take a look at what new features we can expect from React 19.

Features in React 19

1.React Compiliers

React Compiler is no longer a research project; it now powers Instagram.com in production, and will be added to other Meta surfaces, And also there will be a open source release.

React Compilier aims to tackle a lot of issues like manual memoization, javascript optimization.

2.Auto Memoization

React sometimes re-render too much when state changes. Since the early days of React the solution for such cases has been manual memoization like useMemo,useCallback. But manual memoization is a compromise. It clutters up our code, is easy to get wrong, and requires extra work to keep up to date. React Compilier aims to optimize it and perform a auto memoization.

3. Javascript Optimization

JavaScript is a notoriously challenging language to optimize, due to its loose rules and dynamic nature. React Compiler is able to compile code safely by modeling both the rules of JavaScript and the “rules of React”. For example, React components must be idempotent — returning the same value given the same inputs — and can’t mutate props or state values. These rules limit what developers can do and help to carve out a safe space for the compiler to optimize.

React Actions

React Labs have been exploring solutions for sending data from the client to the server with Server Actions for execution of database mutations and implement forms.
Actions allow you to pass a function to DOM elements such as <form/>

<form action={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

React's form action handles data submission for you, allowing synchronous or asynchronous functions defined on client-side or server-side with hooks for managing form state.

React Canaries

React Canaries is a new officially supported release channel for React. It allows adopting new React features before they are released in a stable version. Canaries are similar to how Meta has been using React internally. Canaries are designed for curated setups, like frameworks, and not for most users.
New Features in Canary include

Directives
Document Metadata
Asset Loading
Actions

react@canary is now ready to ship to react@latest. The new features mentioned above are compatible with any environment your app runs in, providing everything needed for production use.

To read more about react 19 reffer to
ReactLabs:february2024
React server Components
React Canaries

Why REST API ?

Sandeep Kherkatary — Fri, 10 Feb 2023 05:05:06 +0000

Learn REST api (tutorial)

REST stands for Representational State Transfer. It is a software architectural style for building web services that define a set of constraints and properties. REST APIs are used to create web services that can be consumed by a variety of clients, such as web browsers, mobile devices, and other servers.

How does the REST API work?
A REST API sends an HTTP request to a server, and the server returns a response. The type of request and the format of the response are determined by the API's endpoint and the HTTP method used. The most common HTTP methods used in REST APIs are

GET
POST
PUT
DELETE

Advantages of using the REST API

Scalability:
REST APIs can be easily scaled up or down to accommodate changes in the number of clients or amount of data transferred.

Flexibility:
REST APIs are flexible and can be used by a variety of clients such as web browsers, mobile devices, and other servers.

Performance:
The REST API is optimized for performance and is suitable for applications that require fast and efficient data transfer. Interoperability:
REST APIs are based on open standards such as HTTP and JSON, so they can be easily integrated with other systems.

REST APIs are essential tools for building modern web services. They are scalable, flexible, efficient, and can be used by a large number of clients. When creating web services, consider using REST APIs to make them easier to consume, manage, and scale.

Exploring Color Theory: A Comprehensive Guide for Beginners

Sandeep Kherkatary — Mon, 16 Jan 2023 08:51:33 +0000

Colors play a major role in designing and marketing. Different colors have different meanings, connotations, and psychological effects. And knowing how to choose the right colors is a big differentiator between a noob and pro designer.

So how does one choose the right colors? Well one Practical answer is using the color wheel. Yes, the one invented by Sir Isaac Newton. Basically he mapped the color spectrum in a circle which is now called the color wheel and is used by designers to find harmonious color combinations.

Color wheel by Sir Isan Newton

Choosing harmonious colors
Color Harmony is basically combinations of color, when put together looks aesthetically pleasing to our eyes. There are some combinations derived using the color wheel.

1.Complementary colors
Complementary colours can be found typically on opposite sides of the colour wheel, one is a primary colour and the other is a secondary colour. Blue and orange, red and green, and yellow and purple are the three primary complementary colours.

2.Analogous colors
Analogous colors are basically the three colors next to each other. One of them is the a dominant color, the other is a supporting color and the third one is either the mix of two, or something that pops.
ref-blog by BY LUCIA TONELLI

3.Triad
Lets say you have an Equilateral Triangle, now placing it in the middle of the color wheel we get three vertices pointing towards three colors. Those three colors form the Triad. This combination are use for intense and striking effects.
ref-a blog on triadic combinations by Jeanette Lynton

4.Achromatic
Achromatic colors have no saturation or hue in them. They are different shades of black ,grey and white. These color combinations give a monotonous harmony depicting seriousness in a artwork or design.

5.Monochromatic colors
This color harmony uses darker to lighter shades of only one color or hue. This means one color is used with different amounts of black and white. This combination has a contrast but unified effect on the artwork or design.

recomended Reading

- What Is Color Theory? Meaning & Fundamentals by Will Fanguy

- Color and Marketing (have sub topics)

Some useful websites for your Frontend design

Sandeep Kherkatary — Sat, 31 Dec 2022 06:26:44 +0000

Finding a good background or a cool looking animation is a hassle and selecting right color is tough. We share the same pain guys, so let me help you with some these useful and amazing sites that can help you out and reduce your pain of witch hunting.

1.GET WAVES

This site lets you create SVG waves for your backgrounds. you can just copy the svg code or download the svg file.
https://getwaves.io/

2.BGJar
There are various types of background choices available and not just limited to waves. It has shapes & colored patterns, hexagons, circuit board , clouds , abstracts and many more.
https://bgjar.com/

3. Coolors
The ultimate color palette generator, you can randomly generated your colors or you can just find palettes related to your brand colors.
https://coolors.co/

4.Lottieflies
Its an animation library, Yup you heard it right. This site provides you light weight scalable animations for various projects, ads and social media etc.
https://lottiefiles.com/

5.Feather Icons
This site is so simple and yet so useful. Variety of icon available for use. All you have to do is adjust the size and download the svg file. Yeah, its as simple as that.
https://feathericons.com/

6.Box Shadows
It does what its name suggests, box shadow generator, I guess no details or introduction is required for this. This generator gives you more flexibility for designing the shadows.
https://box-shadow.dev/

Thank you for reading. Hope this helps you guys.
Follow for more , Adios and Happy New Year.