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 8ff8b48e31ba..30edbe3b83da 100644 --- a/documentation/blog/2023-08-12-react-admin-vs-refine.md +++ b/documentation/blog/2023-08-12-react-admin-vs-refine.md @@ -458,7 +458,7 @@ To sum it up: - Refine is not only an open-core solution but also a performance-driven framework with it's architecture. - Its headless nature keeps your project well within the realm of vanilla React, making integration seamless.This architecture ensures that your project remains firmly rooted in vanilla React, simplifying integration. -- One of the most importatnt aspect is that Refine empowers you with free enterprise-level features, similar to those found in react-admin's enterprise package, without any additional financial commitment. +- One of the most important aspect is that Refine empowers you with free enterprise-level features, similar to those found in react-admin's enterprise package, without any additional financial commitment. From our point of view, this combination of capabilities, coupled with its user-friendly nature and and remarkably small bundle size positions Refine as an perfect choice for web developers. diff --git a/documentation/blog/2023-10-26-htmx.md b/documentation/blog/2023-10-26-htmx.md index 231eef63c670..9ad91e19a1f8 100644 --- a/documentation/blog/2023-10-26-htmx.md +++ b/documentation/blog/2023-10-26-htmx.md @@ -286,7 +286,7 @@ Additionally, htmx offers a programmatic method for cancelling requests: To stop ## CSS Transitions -HTMX lets you perform CSS Transitions without the need for javascript. we will illustrate this wwith an example: +HTMX lets you perform CSS Transitions without the need for javascript. we will illustrate this with an example: ```tsx
The Empire
diff --git a/documentation/blog/2024-02-05-docker-alternatives.md b/documentation/blog/2024-02-05-docker-alternatives.md index 99f2a68a6045..a7f7cd9b2789 100644 --- a/documentation/blog/2024-02-05-docker-alternatives.md +++ b/documentation/blog/2024-02-05-docker-alternatives.md @@ -283,7 +283,7 @@ This will build the Dockerfile in the current directory with Buildkit, creating ## **Comparison Chart** -Below is a comparison table summarizing the key differences between all the Docker alternatives disussed above. +Below is a comparison table summarizing the key differences between all the Docker alternatives discussed above. | Feature | Docker | containerd | LXD | BuildKit | Podman | buildah | runc | | ----------------- | ------------------------------------- | --------------------------------------------- | ----------------------------------------------- | --------------------------------------- | ----------------------------- | --------------------------------- | ------------------------------------------------------------- | diff --git a/documentation/blog/2024-02-16-async-vs-sync.md b/documentation/blog/2024-02-16-async-vs-sync.md index a5c6ddfa3397..fa695e68a306 100644 --- a/documentation/blog/2024-02-16-async-vs-sync.md +++ b/documentation/blog/2024-02-16-async-vs-sync.md @@ -1,6 +1,6 @@ --- title: Synchronous vs. Asynchronous Programming -description: This article explains the differences between the Syncronous and Asynchronous programming and when to use each. +description: This article explains the differences between the Synchronous and Asynchronous programming and when to use each. slug: synchronous-vs-asynchronous authors: muhammad_khabbab tags: [javascript] diff --git a/documentation/blog/2024-02-23-recharts.md b/documentation/blog/2024-02-23-recharts.md index 22a04ca5249c..467d55946246 100644 --- a/documentation/blog/2024-02-23-recharts.md +++ b/documentation/blog/2024-02-23-recharts.md @@ -3,7 +3,7 @@ title: Create charts using Recharts description: We'll explore how to create charts in a Refine project using Recharts. slug: recharts authors: joseph_mawa -tags: [react, refine] +tags: [react, Refine] image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-02-23-recharts/social.png hide_table_of_contents: false --- @@ -64,7 +64,7 @@ import { ## How to create a Refine project -In this section, we will create a refine demo project. +In this section, we will create a Refine demo project. ```sh npm create refine-app@latest @@ -219,7 +219,7 @@ export default App;

-In the code above, we added another data provider. The data provider will fetch data from the [fast foods API](https://api.finefoods.refine.dev). It's a dummy API created by the refine team. You can use it to create simple projects when testing out refine. We will use the API to create charts later. +In the code above, we added another data provider. The data provider will fetch data from the [fast foods API](https://api.finefoods.refine.dev). It's a dummy API created by the Refine team. You can use it to create simple projects when testing out refine. We will use the API to create charts later. You will now see a dashboard entry in the sidebar. The dashboard will look like the image below. We will create charts and render them in the dashboard in the next sub-sections. @@ -276,7 +276,7 @@ The `` component has the `data` prop for passing the data you want ]; ``` -Let's create a simple Line chart in our refine project. We will render it in the dashboard we created above. Start by creating the `src/pages/dashboard/charts/line-chart.tsx` file. Copy and paste the code below into it. The `charts` directory doesn't exist yet. Start by creating it. +Let's create a simple Line chart in our Refine project. We will render it in the dashboard we created above. Start by creating the `src/pages/dashboard/charts/line-chart.tsx` file. Copy and paste the code below into it. The `charts` directory doesn't exist yet. Start by creating it. ```tsx title="src/pages/dashboard/charts/line-chart.tsx" import React from "react"; @@ -327,7 +327,7 @@ Let's now import the above component and render it in the `` co
-Show DasboardPage code +Show DashboardPage code

@@ -462,7 +462,7 @@ To represent the above data in an area chart, you can use the `` co ``` -Let's now add an area chart to the refine project we created above. Create the `src/pages/dashboard/charts/area-chart.tsx` file. Copy and paste the code below into it. +Let's now add an area chart to the Refine project we created above. Create the `src/pages/dashboard/charts/area-chart.tsx` file. Copy and paste the code below into it. ```tsx title="src/pages/dashboard/charts/area-chart.tsx" import { @@ -572,7 +572,7 @@ Bar charts are among the most common charts for visualizing data. You can use it Like the other types of charts, the data you want to represent on a bar chart should be an array of objects. You need to pass it to the `` component as the value of the `data` prop. -Let's add a bar chart to the dashboard in the refine project we created above. Create the `src/pages/dashboard/charts/bar-chart.tsx` file. Copy and paste the code below into it. +Let's add a bar chart to the dashboard in the Refine project we created above. Create the `src/pages/dashboard/charts/bar-chart.tsx` file. Copy and paste the code below into it. ```tsx title="src/pages/dashboard/charts/bar-chart.tsx" import React from "react"; @@ -868,7 +868,7 @@ export { LineChartComponent } from "./line-chart"; export { AreaChartComponent } from "./area-chart"; export { BarChartComponent } from "./bar-chart"; export { ScatterChartComponent } from "./scatter-chart"; -//highligh-next-line +//highlight-next-line export { PieChartComponent } from "./pie-chart"; ``` diff --git a/documentation/blog/2024-02-28-css-box-shadow.md b/documentation/blog/2024-02-28-css-box-shadow.md index 273e3acd9c85..aade254ef661 100644 --- a/documentation/blog/2024-02-28-css-box-shadow.md +++ b/documentation/blog/2024-02-28-css-box-shadow.md @@ -118,7 +118,7 @@ In this section, we will explore CSS Box shadow examples. Some of them are used **Example 1** -In the example below, we are applying two box shadows seprated by commas. The first shadow effect has y-offset of `1px` and blur radius of `2px`. The x-offset and spread radius are both zero. The second box shadow has positive length values except the x-offset. Its value is zero. +In the example below, we are applying two box shadows separated by commas. The first shadow effect has y-offset of `1px` and blur radius of `2px`. The x-offset and spread radius are both zero. The second box shadow has positive length values except the x-offset. Its value is zero. ```css .box { @@ -514,7 +514,7 @@ The code above will generate a box shadow that looks like the image below. **Example 20** -In the box shadow example below we have two box shadows seprated by a comma. The first box shadow has positive value for the y-offset and blur radius but a negative value for the spread radius. In the second box radius all length values are zero except the spread radius. +In the box shadow example below we have two box shadows separated by a comma. The first box shadow has positive value for the y-offset and blur radius but a negative value for the spread radius. In the second box radius all length values are zero except the spread radius. ```css .box { diff --git a/documentation/blog/2024-02-29-ts-map.md b/documentation/blog/2024-02-29-ts-map.md index 19a8f5733e13..e063453d7a36 100644 --- a/documentation/blog/2024-02-29-ts-map.md +++ b/documentation/blog/2024-02-29-ts-map.md @@ -85,7 +85,7 @@ Where necessary, it uses the [`as`](https://www.typescriptlang.org/docs/handbook Before we get into the mechanics of the above examples, in this section, we spend some time to get a fair understanding of the above-mentioned underlying building blocks that make a custom-type mapper utility. -### TypeScript Custom Type Mapper Building Blocks: The Index Singature Syntax +### TypeScript Custom Type Mapper Building Blocks: The Index Signature Syntax TypeScript index signature syntax forms the most important component of a custom type mapper. An example looks like this: diff --git a/documentation/blog/2024-03-07-internal-tools-development.md b/documentation/blog/2024-03-07-internal-tools-development.md index ad15e316fe07..f93553d0f944 100644 --- a/documentation/blog/2024-03-07-internal-tools-development.md +++ b/documentation/blog/2024-03-07-internal-tools-development.md @@ -12,7 +12,7 @@ hide_table_of_contents: false This post provides an industry-centric perspective on the track custom internal tools development. We cover the trail of emergent technologies in web based internal tools development, and present a comprehensive guide on building enterprise tools with cutting-edge open source frameworks and libraries in the React/Node.js ecosystem. -Internal tools are specialized software applications used by a company's back-office departments. They empower a workforce by automating complex business processes and workflows for staff, managers, admnistrators and other stakeholders. Software based business process and workflow management helps companies achieve greater efficiency and productivity by enabling better collaboration among participants, more refined processes and streamlined workflows. +Internal tools are specialized software applications used by a company's back-office departments. They empower a workforce by automating complex business processes and workflows for staff, managers, administrators and other stakeholders. Software based business process and workflow management helps companies achieve greater efficiency and productivity by enabling better collaboration among participants, more refined processes and streamlined workflows. In this post, we briefly review the current state of the enterprise tools landscape to understand how internal tools development looks like entering 2024. We first get a brief historical account of how off-the-shelf desktop based internal tools solutions made their way to the web via cloud hosted applications. We evaluate the pros and cons of internal tool builder platforms and differentiate them from more custom development using cutting edge open source technologies in the React/Node.js ecosystem. @@ -58,7 +58,7 @@ Below is a quick rundown of common enterprise internal tools used by stable busn For C level administrators and decision makers, user and roles management is a key feature implemented to allow structuring their organization. Approval workflow is another feature typical to admin panels for all levels of admin scopes. - **Dashboards** - Dasboards present data metrics, visualizations, reports and real-time analytics in a page specifically intended to provide insightful overview to a stakeholder. Dashboards are used in ERP softwares, admin panels, business intelligence software and any tool that offer central access and management of resources. + Dashboards present data metrics, visualizations, reports and real-time analytics in a page specifically intended to provide insightful overview to a stakeholder. Dashboards are used in ERP software, admin panels, business intelligence software and any tool that offer central access and management of resources. - **Business Intelligence Tools** Essentially, business intelligence tools specialize in capturing, transforming, manipulating and analyzing data. Generating reports and visualizations are integral parts of BI software. In most cases, data processing is handled by powerful engines running in the background. BI tools are also able to integrate with ERP systems and third party services. @@ -76,7 +76,7 @@ Below is a quick rundown of common enterprise internal tools used by stable busn - **Collaboration Tools** Central to workforce empowerment are collaboration tools such as Slack, Google Groups, Discord, Discourse, Trello and a host of other technologies that foster workplace communication and teamwork. Most of them start with a free tier and offer commercial features on its top. -Apart from these common types, internal tools vary specific to industries. For example, inventory management software help automate and manage processes in warehouses, e-commerce stocks and sales stores. Logistics and supply chain software refine complex workflows that involve multiple stakeholders. And there are other types of internal tools for sourcing and procurement, manufacturing, research & development and engineering, asset management, etc. +Apart from these common types, internal tools vary specific to industries. For example, inventory management software help automate and manage processes in warehouses, e-commerce stocks and sales stores. Logistics and supply chain software Refine complex workflows that involve multiple stakeholders. And there are other types of internal tools for sourcing and procurement, manufacturing, research & development and engineering, asset management, etc. Besides implementing domain specific logic for each of these types, internal tools have to implement the following core functionalities: @@ -144,7 +144,7 @@ Modern internal tools development involves the following considerations that app - **Scalability and adaptability**. Mostly shaped by architectural decisions and choice of underlying technologies. - **Extensibility and integration support**. - **Development speed and efficiency**. Depends on the team size, sprint cycles, and the velocity offered by development infrastructure, frameworks and libraries. -- **Developer experience**. Often aligns with optimal developer environment, technological choices and the team culture that enables developement of a product. +- **Developer experience**. Often aligns with optimal developer environment, technological choices and the team culture that enables development of a product. - **User experience, interface design and implementation** - **Backend API integration, data fetching and management** @@ -204,7 +204,7 @@ Refine offers unmatched flexibility in backend API integration. Again, Refine's Refine's minimal coupling ensures a greater surface for backend API integration with the help of data providers. This gives Refine an upper edge over Redwood which is coupled to a backend that offers somewhat tedious integrations to external APIs via Prisma and other middlewares. -**Interoperability and Mutliple Data Sources** +**Interoperability and Multiple Data Sources** Internal tools are centered around a single source of data that is shared across business units. Interoperability of internal tools is essential to enterprise operations. Refine is geared to implement interoperable modules by connecting to a single data source with a primary data provider. In BI tools, that usually fetch and process data from multiple sources, multiple data providers can also be used to access the necessary data. diff --git a/documentation/blog/2024-03-11-jwt-authentication.md b/documentation/blog/2024-03-11-jwt-authentication.md index 90b21a2a2b71..69b6ae91517a 100644 --- a/documentation/blog/2024-03-11-jwt-authentication.md +++ b/documentation/blog/2024-03-11-jwt-authentication.md @@ -237,7 +237,7 @@ Let's implement a simple user authorization with JWTs. Add the changes below to //highlight-start require("dotenv").config(); const jwt = require("jsonwebtoken"); -//highlight-ned +//highlight-end const express = require("express"); const app = express(); diff --git a/documentation/blog/2024-03-18-low-code-platforms.md b/documentation/blog/2024-03-18-low-code-platforms.md index 0fe6fcaab2c7..1566b279e881 100644 --- a/documentation/blog/2024-03-18-low-code-platforms.md +++ b/documentation/blog/2024-03-18-low-code-platforms.md @@ -150,4 +150,4 @@ In short, while low-code can kickstart app development, relying on it without un Low-code platforms are ideal for quick prototyping and involving non-technical users in app creation. However, as project complexity increases, the limitations of low-code platforms become apparent, often leading to challenges in scalability and customization. -Despite these challenges, low-code remains a usefull tool for certain use cases, underscoring the importance of choosing the right approach based on project requirements. Ultimately, while low-code platforms offer a promising route for fast and accessible app development, they may not always be the best choice for more complex, long-term software projects. +Despite these challenges, low-code remains a useful tool for certain use cases, underscoring the importance of choosing the right approach based on project requirements. Ultimately, while low-code platforms offer a promising route for fast and accessible app development, they may not always be the best choice for more complex, long-term software projects. diff --git a/documentation/blog/2024-03-19-ts-shadcn.md b/documentation/blog/2024-03-19-ts-shadcn.md index 7d34bd2ab879..740b1376b56c 100644 --- a/documentation/blog/2024-03-19-ts-shadcn.md +++ b/documentation/blog/2024-03-19-ts-shadcn.md @@ -3,7 +3,7 @@ title: Building a CRUD app with Shadcn UI and Refine description: We demonstrate how to integrate Shadcn UI components to build a collection of components and pages within a Refine app. slug: shadcn-ui authors: abdullah_numan -tags: [tailwind, refine] +tags: [tailwind, Refine] image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-03-19-ts-shadcn/social.png hide_table_of_contents: false --- @@ -57,7 +57,7 @@ In other words, Shadcn is a tool that provides a collection of headless UI compo ### How Does Shadcn Work ? -Shadcn works with an app's existing tooling system to install the components at a configured path. The installed components provide style maps and defaults for component variants that are normally diffcult to implement with typical TailwindCSS. Shadcn helps easily generate component variant styles and inject only the necessary TailwindCSS styles to the main stylesheeet +Shadcn works with an app's existing tooling system to install the components at a configured path. The installed components provide style maps and defaults for component variants that are normally difficult to implement with typical TailwindCSS. Shadcn helps easily generate component variant styles and inject only the necessary TailwindCSS styles to the main stylesheeet Shadcn generated markups and styles are customizable at will. They are intended to complement existing data, local state management as well as rendering logic implemented as regular part of a React component. @@ -76,7 +76,7 @@ Standout features of Shadcn UI are: ### Shadcn Comes with Support for Vite and TypeScript -Shadcn integrates with Vite, which is a powerful frontent tooling system that efficiently handles JavaScript/TypeScript module bundling, build and styles injection. While using Shadcn with Vite, we have to configure the paths where Shadcn will install its components. We use the `vite.config.ts` file for this. +Shadcn integrates with Vite, which is a powerful frontend tooling system that efficiently handles JavaScript/TypeScript module bundling, build and styles injection. While using Shadcn with Vite, we have to configure the paths where Shadcn will install its components. We use the `vite.config.ts` file for this. Shadcn has full support for TypeScript. We have to configure the TS compiler paths inside `tsconfig.json` file for TypeScript to compile target Shadcn `.ts` and `.tsx` files. @@ -94,7 +94,7 @@ The benefits of using Shadcn are many folded, especially for composing collectio Use of CVA in Shadcn gives developers the smooth control they dream of while implementing component variants with otherwise painstaking TailwindCSS. - **Accessibility in Mind**: - Shadcn implements WAI-ARIA out-out-of-the-box. Developers save the time needed to spend of implmenting accessibility with Shadcn UI. + Shadcn implements WAI-ARIA out-out-of-the-box. Developers save the time needed to spend of implementing accessibility with Shadcn UI. - **Greater Extensibility**: Perhaps the most remarkable outcome of using Shadcn is that it offers as much extensibility as a developer wants in building components tailored for any functionality. Shadcn components can be extended and integrated with frameworks such as Next.js, Remix, Gatsby, Refine and so on. They can also be coupled to any other library of choice. @@ -552,7 +552,7 @@ With all these set up, we can now go ahead for generating and using Shadcn compo In this section, we first generate the Shadcn components we need for our demo app. -Shadcn stores the generated components inside the `./src/components/ui/` directory. After each generation, we examine and analyse the markup and related Tailwind style maps in order to makes sense of how Shadcn works and how they are suitable for our use in a Refine page. We also tweak and customize them to our taste and specs. +Shadcn stores the generated components inside the `./src/components/ui/` directory. After each generation, we examine and analyze the markup and related Tailwind style maps in order to makes sense of how Shadcn works and how they are suitable for our use in a Refine page. We also tweak and customize them to our taste and specs. The Shadcn components we install and examine are: `