From a20e23bc0093aef26442e76760dd44d09587c472 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Necati=20=C3=96zmen?= <necatiozmn@gmail.com>
Date: Tue, 14 May 2024 15:01:34 +0300
Subject: [PATCH 1/2] docs(blog): add use id post (#5946)

---
 documentation/blog/2024-05-14-react-use-id.md | 218 ++++++++++++++++++
 1 file changed, 218 insertions(+)
 create mode 100644 documentation/blog/2024-05-14-react-use-id.md

diff --git a/documentation/blog/2024-05-14-react-use-id.md b/documentation/blog/2024-05-14-react-use-id.md
new file mode 100644
index 000000000000..fe0b922b974e
--- /dev/null
+++ b/documentation/blog/2024-05-14-react-use-id.md
@@ -0,0 +1,218 @@
+---
+title: Beginner's Guide to React useId Hook
+description: We'll explore the React useId hook, its use cases, and how it can improve our development process.
+slug: react-useid
+authors: necati
+tags: [react]
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-05-14-react-use-id/social.png
+hide_table_of_contents: false
+---
+
+## Introduction
+
+React is popularly a JavaScript library built to create user interfaces, mainly single-page applications. One of the powerful features of React is Hooks, which allows us to use states and other features in React functional components. The useId hook is a new addition that makes creating unique IDs for elements easy for better accessibility and handling dynamic components.
+
+In this article we'll make it clear what the useId hook is and its use cases. Also included are some practical examples showing how use with useId can improve our development process by ensuring the uniqueness of identifiers in our React applications.
+
+## What is the React useId?
+
+The React useId hook creates a unique id for every instance of a component. It does so in instances where one needs unique identification in form inputs, labels, or actually anything that creates dynamic lists. Use of useId makes sure that all the elements get unique IDs and prevent conflicts to handle proper accessibility by the application.
+
+## When to use React useId?
+
+The React `useId` hook can be pretty useful in a few common scenarios:
+
+**Form Elements and Labels**: Form inputs, and the labels for these inputs, should include IDs to uniquely identify the input. It makes the form better for understanding when read by a screen reader.
+
+**Dynamic Lists and Components**: If you are working with dynamic lists or components then definitely you have a need to use unique key for each item and that would be a good approach to make sure proper render and the update lifecycle in React. And useId makes generating these keys simple.
+
+**Accessibility**: For web applications with some sort of interactivity, uniqueness of IDs can be crucial. In that case, such elements may include a variety of buttons, inputs, and ARIA attributes having unique IDs in support of user experience for assistive technologies.
+
+## How to Use React useId?
+
+Knowing when and how to use `useId` could improve our workflow a lot. It will create seamless unique IDs so important for dynamic content and form controls. This is going to lead to much more readable and maintainable code, together with better accessibility and user experience.
+
+Using the `useId` hook is straightforward. Here's a basic example:
+
+```jsx
+import { useId } from "react";
+
+function MyComponent() {
+  const id = useId();
+  return <div id={id}>My Element</div>;
+}
+```
+
+The example above will generate a unique ID for the div element using useId.
+
+This is how you can use `useId` in different scenarios:
+
+1. **For Form Inputs**:
+
+```jsx
+import { useId } from "react";
+
+function FormComponent() {
+  const inputId = useId();
+  return (
+    <div>
+      <label htmlFor={inputId}>Name</label>
+      <input id={inputId} type="text" />
+    </div>
+  );
+}
+```
+
+2. **For Dynamic Component Lists**:
+
+```jsx
+import { useId } from "react";
+
+function ListComponent({ items }) {
+  return (
+    <ul>
+      {items.map((item) => {
+        const itemId = useId();
+        return (
+          <li key={itemId} id={itemId}>
+            {item}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+```
+
+### What are the benefits of using React useId?
+
+This section will walk us through the advantages of the React `useId` hook and mention a few points we should be aware of. This knowledge will allow us to make informed decisions concerning the use of `useId` in our projects.
+
+The `useId` hook gives us a few benefits that we can use to enhance our development:
+
+1. **Ease of Creating Unique IDs**: Making unique IDs with `useId` is very simple and this reduces the time one would take to handle the ID manually, which is also annoying and error-prone with increasing applications and components.
+
+2. **Improved Accessibility**: By making sure that each interactive element has a unique ID, we make our applications more accessible. Screen readers and other assistive technologies need these unique IDs to be able to modify the user experience and make them much more amenable to people with disabilities.
+
+3. **Improved Readability in Code**: Using `useId` in turn allows us to keep our code quite clean and readable. All the while, it abstracts the complexity of making those unique IDs so that you can focus on the core logic of the components. This leads to more maintainable and understandable code.
+
+HTML accessibility attributes, such as `aria-describedby`, allow you to explain to a user, in other words, that "this element relates to that one." For example: this input is described by this paragraph.
+
+You would write that in plain HTML as follows:
+
+```html
+<label>
+  Password:
+  <input type="password" aria-describedby="password-hint" />
+</label>
+<p id="password-hint">The password should be min. 8 characters.</p>
+```
+
+But in React, hardcoding IDs like this is not a good idea because a component might be rendered more than once on the page, and IDs must be unique. Instead of hardcoding an ID, you can generate a unique ID using `useId`:
+
+```jsx
+import { useId } from "react";
+
+function PasswordField() {
+  const passwordHintId = useId();
+  return (
+    <>
+      <label>
+        Password:
+        <input type="password" aria-describedby={passwordHintId} />
+      </label>
+      <p id={passwordHintId}>The password should be min. 8 characters.</p>
+    </>
+  );
+}
+```
+
+### Why is useId better than an incrementing counter?
+
+Using `useId` is better than an incrementing counter for generating unique IDs in React components for several reasons:
+
+**Consistency Across Renders**
+Incrementing counters could thus result in inconsistencies with the specific use cases where some of the components might unmount and remount, and with SSR. With useId, the IDs are kept in check during the rendering process and across other environments.
+
+**Global State Issues**
+Counters are incremental in general and depend on global state or even external variables to maintain counts. This makes them vulnerable to probable issues like race conditions or conflicts in a concurrent environment. Unique IDs from useId are locally generated within a component, so this is not a problem of this type.
+
+**Simplified Code**
+It is an inbuilt React hook that gels well with the React lifecycle, takes off the weight that one requires more logic and state to manage unique ids, hence cleaning and making the code maintainable.
+
+**Quality Guaranteed**
+useId ensures the uniqueness of generated IDs, but in the context of the component tree, meaning that one doesn't have to care about conflicts with other IDs, spread throughout the application, and manually ensuring their uniqueness. In a lot of cases, it could result in a mistake by using an incrementing counter.
+
+**React Concurrent Mode**
+With the new Concurrent Mode in React, there is a possibility of components rendering out of order or, in some cases, rendering more than once before being committed into the DOM. The useId was developed with these new paradigms in mind, so its IDs will remain the same and unique.
+
+### Example Comparison
+
+#### Using an Incrementing Counter
+
+```jsx
+let counter = 0;
+
+function PasswordField() {
+  const passwordHintId = `password-hint-${counter++}`;
+  return (
+    <>
+      <label>
+        Password:
+        <input type="password" aria-describedby={passwordHintId} />
+      </label>
+      <p id={passwordHintId}>
+        The password should contain at least 18 characters.
+      </p>
+    </>
+  );
+}
+```
+
+What's wrong with this approach:
+
+- If `PasswordField` is unmounted and then remounted, the ID could reset, leading to conflicts.
+- For the simultaneous rendering, it is possible to increase the counter non-atomically.
+
+* Managing the state for that counter can become cumbersome and error-prone.
+
+#### Using `useId`
+
+```jsx
+import { useId } from "react";
+
+function PasswordField() {
+  const passwordHintId = useId();
+  return (
+    <>
+      <label>
+        Password:
+        <input type="password" aria-describedby={passwordHintId} />
+      </label>
+      <p id={passwordHintId}>
+        The password should contain at least 18 characters.
+      </p>
+    </>
+  );
+}
+```
+
+**Advantages**
+
+- A unique ID which never changes for the render.
+- There is no need to handle global state or counters.
+- Works smoothly with React's rendering lifecycle and Concurrent Mode. In other words, `useId` makes it much more reliable and effective to create unique IDs in React, while maintaining coherence, simplicity, and compatibility with modern React features.
+
+## Things to consider with useId
+
+While `useId` is strong, there are a few important things that need attention and should be kept in mind:
+
+1. **SSR Issues**: If you are using `useId` with Server-Side Rendering (SSR), then be aware that id generated on server and id generated on client can be different. This leads to hydration issues and to avoid them, ID generation has to be done in a different way or other techniques have to be utilized to make sure that the IDs remain consistent.
+
+2. **Client-Side Uniqueness Only**: The `useId` hook ensures client-side uniqueness only. If you are working with IDs that must be consistent and unique across multiple client instances, or across both client and server, then you will need additional strategies.
+
+## Conclusion
+
+The `useId` hook serves as a great addition to our toolkit. It allows us to build applications with better accessibility and structure at the same time.
+
+Dealing with the creation of unique IDs in a way that's not too terse for bugs and accessibility problems is tedious. With useId implemented, we can now write much cleaner and more maintainable code, which in turn makes our application more robust and accessible.

From e7587e73fbc435e8256ba8acf5c4b9fcdaaff643 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Necati=20=C3=96zmen?= <necatiozmn@gmail.com>
Date: Tue, 14 May 2024 15:01:42 +0300
Subject: [PATCH 2/2] docs(blog): add cms post (#5940)

---
 .../blog/2023-08-12-react-admin-vs-refine.md  |   6 +-
 documentation/blog/2024-05-10-headless-cms.md | 103 ++++++++++++++++++
 2 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 documentation/blog/2024-05-10-headless-cms.md

diff --git a/documentation/blog/2023-08-12-react-admin-vs-refine.md b/documentation/blog/2023-08-12-react-admin-vs-refine.md
index c8d5f6617b6d..8ff8b48e31ba 100644
--- a/documentation/blog/2023-08-12-react-admin-vs-refine.md
+++ b/documentation/blog/2023-08-12-react-admin-vs-refine.md
@@ -6,7 +6,7 @@ authors: ali_emir
 tags: [Refine, comparison]
 hide_table_of_contents: false
 is_featured: true
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-08-12-react-admin-vs-refine/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-08-12-react-admin-vs-refine/social-2.png
 ---
 
 ## Introduction
@@ -55,9 +55,11 @@ With the start of the Refine project in 2021, it received significant interest f
 
 This traction from the open-source community led to the establishment of Refine Corp in the US in 2022. The company was dedicated to further developing the project with a skilled team of 10 individuals. Shortly after its inception, Refine Corp received pre-seed investment from 500 Global VC.
 
+The seed round, supported by investors such as Senovo, 500 Emerging Europe, Palmdrive Capital, 8vdx, STONKS, in addition to influential angel investors like David J. Phillips and Theo Brown, advances our efforts in bringing Refine to the forefront of enterprise adoption.
+
 In 2023, Refine also backed by YCombinator, solidifying its position as a promising venture.
 
-With over 30K monthly active developers using it and an impressive 21K+ GitHub stars earned in just a year and a half, Refine has gained significant popularity within the developer community.
+With over 30K monthly active developers using it and an impressive 25K+ GitHub stars earned in just a year and a half, Refine has gained significant popularity within the developer community.
 
 According to [OSS Insight data](https://ossinsight.io/collections/react-framework/), since the beginning of 2023, it has consistently ranked in the top three of trending React frameworks and web frameworks.
 
diff --git a/documentation/blog/2024-05-10-headless-cms.md b/documentation/blog/2024-05-10-headless-cms.md
new file mode 100644
index 000000000000..684882a8fc78
--- /dev/null
+++ b/documentation/blog/2024-05-10-headless-cms.md
@@ -0,0 +1,103 @@
+---
+title: What is Headless CMS?
+description: We'll check out what a headless CMS is and its benefits.
+slug: headless-cms
+authors: necati
+tags: [dev-tools]
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-05-10-headless-cms/social.png
+hide_table_of_contents: false
+---
+
+## Introduction
+
+Enter the headless CMS: a modern business necessity in today's fast-paced digital ecosystem with processes requiring streamlined content management. The classic content management systems—literally—were the answer to managing website content, and they did exactly that: managed website content from a centralized backend. In contrast, a headless CMS brings a new level of flexibility and efficiency. In this blog, we dig deeper into what a headless CMS means, its benefits, and why a business would consider deploying it to help them better cater to the many content-driven needs businesses have in these digital times.
+
+Whether you're a marketer, developer, or business owner—understanding what a headless CMS is can seriously level up your digital strategy.
+
+Steps to be covered in this blog:
+
+- [Introduction](#introduction)
+- [What is a Headless CMS?](#what-is-a-headless-cms)
+- [What is The Difference Between Traditional and Headless CMS?](#what-is-the-difference-between-traditional-and-headless-cms)
+- [What Are The Key Benefits of a Headless CMS?](#what-are-the-key-benefits-of-a-headless-cms)
+- [How Headless CMS Works?](#how-headless-cms-works)
+- [Headless CMS's that Refine has data provider support](#headless-cmss-that-refine-has-data-provider-support)
+  - [**Strapi**](#strapi)
+  - [**Hygraph (formerly GraphCMS)**](#hygraph-formerly-graphcms)
+  - [**Sanity**](#sanity)
+  - [**Directus**](#directus)
+- [Conclusion](#conclusion)
+
+## What is a Headless CMS?
+
+The headless CMS is a content management system back-end with the content repository ("body") decoupled from the presentation layer ("head"). This architecture allows the development of an interface by any front-end developer using any front-end tool that can render content. This makes the decoupled architecture highly versatile for any platform where your content is being viewed outside of websites, from mobile apps to smart devices.
+
+This is unlike the traditional CMS systems, which offer very tight coupling of both the content and presentation layers. A headless CMS delivers content as data over APIs, thus more flexible and scalable on how and where the content will be displayed. That's the way businesses can create rich, tailor-made content experiences on every digital channel.
+
+## What is The Difference Between Traditional and Headless CMS?
+
+While a traditional CMS sticks very much to the architecture and, in turn, to the way content is delivered, a headless CMS detaches the content domain from its delivery. Traditional CMS include a "head" at the front end that determines the way in which content is displayed on a website; it strongly couples the content creation layer and the presentation layer. That means to some extent your content locked into the front-end system structure and capabilities of the CMS, limiting flexibility in both cases.
+
+In contrast, the headless CMS has a front-end layer; however, it does not purely work as a content repository but helps in serving content via API to any front-end design or platform.
+
+However, the decoupled approach still leaves the developer open to building the user experience with whatever tooling of their choice, not bound by the CMS capabilities. This separation also increases the portability and reusability of the content on the different platforms: websites, mobile applications, and even IoT devices, while bringing about an approach to multi-platform digital ecosystems in a more contemporary way of managing the content.
+
+This is a basic architectural difference highlighting the potential for a highly adaptable level of headless CMS integration into some of the most varied digital strategies that have been staged for more dynamic and personalized user experiences.
+
+## What Are The Key Benefits of a Headless CMS?
+
+The more obvious advantage with the headless CMS would be flexibility. The content can be easily delivered over an extraordinary range of platforms and devices. This further improves the efficiency of the content management process, allowing updates and changes to be easily pushed through rather than making individual adjustments across the various platforms. Even more, a headless CMS offers better performance with fast loading times since the content is delivered through APIs. Therefore, the user experience is greatly improved.
+
+This provides added flexibility with growing business and changing requirements in content delivery, making it highly adaptable to newer technologies and channels.
+
+## How Headless CMS Works?
+
+Essentially, a headless CMS is one that separates the content creation system from the content delivery system. The whole process usually commences with input and management of content by the content creators and editors through a web interface or dashboard at the backend of the headless CMS. The stored contents can be accessed with either a RESTful API or a GraphQL, which is a modern standard for fetching and manipulating data over the internet.
+
+Developers can make API calls on any front-end framework or technology stack of their choice to consume this content in a website, mobile application, or any other digital properties. The process is dynamic in nature because the front-end asks for content from the headless CMS during an instance and not statically from a pre-rendered fixed page. This eliminates the requirement for manual updating at every single presentation layer, while allowing for immediate updates and changes in the content, which shall be reflected through all platforms.
+
+In short, all this is made possible by APIs, bridging the gap from the content repository to the sea of end-user experiences—delivery is thus ensured to be flexible and efficient. In this architecture, a headless CMS is a CMS that supports the content-first strategy, focusing only on the capability to author and store content separately from how the content would be presented or consumed by front-end applications.
+
+## Headless CMS's that Refine has data provider support
+
+ <div className="centered-image">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-05-10-headless-cms/list.png" alt="headless cms" />
+</div>
+
+You can use these headless CMS's with Refine to manage your data. Here are some of the popular headless CMS's that Refine has data provider support:
+
+### **Strapi**
+
+[Strapi](https://strapi.io/) is among the popular headless CMS platforms oriented to an open-source philosophy. It offers developers the necessary tools to enable them to quickly build APIs that are more flexible and extendable. At its core, Strapi has extensibility features that allow developers to customize the admin panel, APIs, and even the database queries.
+
+It has large community support, scalable with extensibility, and a powerful ecosystem of thousands of plugins. User-friendly, allowing high customization.
+
+[refine-strapi](https://www.npmjs.com/package/@refinedev/strapi) data provider package.
+
+### **Hygraph (formerly GraphCMS)**
+
+[Hygraph](https://hygraph.com/) is an API-first, headless CMS engineered like a GraphQL API. It bestows strong and robust content modeling with eminent relationship capabilities. It allows the user to model a structured content model that fits in your project need and delivers content over all channels with the provided GraphQL.
+
+Offers multi-project support, fine access control, and real-time content updates. Built to fit in complex projects where flexibility and scalability of managing structured content is key.
+
+[refine-hygraph](https://github.com/acomagu/refine-hygraph) data provider package.
+
+### **Sanity**
+
+[Sanity](https://www.sanity.io/) is an editor CMS designed to function in a real-time editing environment. It treats content as if it were structured data. Sanity uses the GROQ (Graph-Relational Object Queries) query language, and the editor it uses to provide for data manipulation is the Portable Text editor.
+
+Highly customizable with excellent support for collaborative workflows. Replete with support for real-time updates, it also has a rich API set to build what they term "structured content."
+
+[refine-sanity](https://github.com/hirenf14/refine-sanity) data provider package.
+
+### **Directus**
+
+[Directus](https://directus.io/) is a headless CMS that wraps around any SQL database with real-time GraphQL + REST API. It mirrors the database schema directly as a completely dynamic API that's ready to take on any content or data management.
+
+The tool is database-agnostic and can directly connect to any SQL database out of the box, reflecting its schema. The product has tremendous power and flexibility for any database type, especially with already deployed databases.
+
+[refine-directus](https://www.npmjs.com/package/@tspvivek/refine-directus) data provider package.
+
+## Conclusion
+
+Web applications, mobile applications, or any other project that needs a strong and customizable CMS with a good developer community. Each of these systems has certain characteristics and advantages, due to which they are suitable for a particular type of project