Forem: Refine

📊📈 Create charts using Recharts

Necati Özmen — Tue, 28 May 2024 08:31:56 +0000

Introduction

Charts make it easy to represent complex data in a simple and visually appealing way. With charts, you can easily identify trends and patterns and make comparisons across different variables and data types. You can use charts to interpret current data and predict the future.

There are several types of charts you can use to visually represent data. Some of them include Line Charts, Bar Charts, Area Charts, and Scatter charts. The choice of a chart largely depends on the type of data. Different types of charts are suited for different purposes.

There are several libraries for creating charts in the React ecosystem. These React chart libraries include react-flow-charts, react-financial-charts, react-charts and Recharts. In this article, we will explore how to create charts in a Refine project using Recharts.

What is Recharts

Recharts is a popular, MIT-licensed library for creating charts in React and React-based frameworks like refine. Internally, it uses SVG and some lightweight D3 packages as its dependencies.

Recharts has several built-in components that you can compose to create some of the commonest charts such as Area charts, Bar charts, Pie charts, and Line charts.

As an example, the code below illustrates how you can use Rechart's built-in components to create a Bar chart. The component names are self-explanatory.

import {
  BarChart,
  CartesianGrid,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  Bar,
} from "recharts";

<BarChart width={730} height={250} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
  <Bar dataKey="uv" fill="#82ca9d" />
</BarChart>;

How to create a Refine project

In this section, we will create a refine demo project.

npm create refine-app@latest

Select the options below when prompted by the command line tool.

✔ Choose a project template · Vite
✔ What would you like to name your project?: · refine-recharts-demo
✔ Choose your backend service to connect: · REST API
✔ Do you want to use a UI Framework?: · Material UI
✔ Do you want to add example pages?: · Yes
✔ Do you need any Authentication logic?: · No
✔ Choose a package manager: · npm

After setting up the project and installing dependencies, use the command below to launch the development server.

npm run dev

Later in this article, we will create charts using Recharts and render them in a dashboard. Let's add a dashboard to the project we have just created.

Create the src/pages/dashboard/list.tsx file. Copy and paste the code below into it. Be aware that the dashboard directory doesn't exist yet. You need to first create it.

```tsx title="src/pages/dashboard/list.tsx"
import React from "react";

export const DashboardPage: React.FC = () => {
return

Hello world!

;
};




The component above renders a simple "Hello world!" text at the moment. We will add more code to it later. Now we need to export the component above. Create the `src/pages/dashboard/index.ts` file. Copy and paste the code below into it.



```ts 
// src/pages/dashboard/index.ts

export { DashboardPage } from "./list";

You can now import the DashboardPage component we created above and render it in the <App /> component. Add the changes below to the src/App.tsx file.

//src/App.tsx
...
//highlight-next-line
import { DashboardPage } from "./pages/dashboard";

function App() {
  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <ColorModeContextProvider>
          <CssBaseline />
          <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
          <RefineSnackbarProvider>
            <DevtoolsProvider>
              <Refine
              //highlight-start
                dataProvider={{
                  default: dataProvider("https://api.fake-rest.refine.dev"),
                  metrics: dataProvider("https://api.finefoods.refine.dev"),
                }}
                //highlight-end
                notificationProvider={notificationProvider}
                routerProvider={routerBindings}
                resources={[
                  {
                    name: "blog_posts",
                    list: "/blog-posts",
                    create: "/blog-posts/create",
                    edit: "/blog-posts/edit/:id",
                    show: "/blog-posts/show/:id",
                    meta: {
                      canDelete: true,
                    },
                  },
                  {
                    name: "categories",
                    list: "/categories",
                    create: "/categories/create",
                    edit: "/categories/edit/:id",
                    show: "/categories/show/:id",
                    meta: {
                      canDelete: true,
                    },
                  },
                  //highlight-start
                  {
                    name: "dashboard",
                    list: "/dashboard",
                    meta: {
                      label: "Dashboard",
                      dataProviderName: "metrics",
                    },
                  },
                  //highlight-end
                ]}
                options={{
                  syncWithLocation: true,
                  warnWhenUnsavedChanges: true,
                  useNewQueryKeys: true,
                  projectId: "5l4F52-JwXWMu-eZRGwA",
                }}
              >
                <Routes>
                  <Route
                    element={
                      <ThemedLayoutV2 Header={() => <Header sticky />}>
                        <Outlet />
                      </ThemedLayoutV2>
                    }
                  >
                    <Route
                      index
                      element={<NavigateToResource resource="blog_posts" />}
                    />
                    ...
                    //highlight-start
                    <Route path="/dashboard">
                      <Route index element={<DashboardPage />} />
                    </Route>
                    //highlight-end
                    <Route path="*" element={<ErrorComponent />} />
                  </Route>
                </Routes>

                <RefineKbar />
                <UnsavedChangesNotifier />
                <DocumentTitleHandler />
              </Refine>
              <DevtoolsPanel />
            </DevtoolsProvider>
          </RefineSnackbarProvider>
        </ColorModeContextProvider>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}



export default App;

In the code above, we added another data provider. The data provider will fetch data from the fast foods API. 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.

Before we start creating charts, let's create a simple interface for the data from our API. Create the src/interfaces/index.d.ts file. Copy and paste the interface below into it.

// src/interfaces/index.d.ts

export interface IQueryResult {
  date: string;
  value: number;
}

How to install Recharts

You can install Recharts either from the npm package registry or get its UMD build via a CDN. Depending on your package manager, use one of the commands below to install Recharts.

npm install recharts

Create a Line chart using Recharts

Line charts consist of a series of data points connected using line segments. They are mostly used to represent time series data. You can use Rechart's built-in <LineChart /> component to create a Line chart like so:

<LineChart
  width={730}
  height={250}
  data={data}
  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="value" stroke="#8884d8" />
</LineChart>

Charts in general need to have features such as axes, Cartesian grid, legend, and tooltips. Therefore, we need to use the <LineChart /> component with Rechart's built-in general and Cartesian components as in the example above.

The <LineChart /> component has the data prop for passing the data you want to represent on the Line chart. The data should be an array of objects like in the example below.

[
  { name: "a", value: 16 },
  { name: "b", value: 12 },
  { name: "c", value: 18 },
];

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.

// src/pages/dashboard/charts/line-chart.tsx

import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

import { IQueryResult } from "../../../interfaces";

export const LineChartComponent: React.FC<{
  dailyOrders: IQueryResult[];
}> = ({ dailyOrders }) => {
  return (
    <ResponsiveContainer width="100%" height="100%" aspect={500 / 300}>
      <LineChart
        width={500}
        height={300}
        data={dailyOrders}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="#82ca9d" />
      </LineChart>
    </ResponsiveContainer>
  );
};

In the example above, the <LineChart /> component is wrapped in a responsive container. We will do the same while creating other charts later. We need to export the component we created above so that we can easily import and render it anywhere in our project. Create the src/pages/dashboard/charts/index.ts file. Copy and paste the code below into it.

// src/pages/dashboard/charts/index.ts

export { LineChartComponent } from "./line-chart";

Let's now import the above component and render it in the <DashboardPage /> component. Copy and paste the code below into the src/pages/dashboard/list.tsx file.

// src/pages/dashboard/list.tsx

import React from "react";
import { Grid } from "@mui/material";
import { useApiUrl, useCustom } from "@refinedev/core";

import dayjs from "dayjs";

const query = {
  start: dayjs().subtract(7, "days").startOf("day"),
  end: dayjs().startOf("day"),
};

import { LineChartComponent } from "./charts";

import { IQueryResult } from "../../interfaces";

export const formatDate = new Intl.DateTimeFormat("en-US", {
  month: "short",
  year: "numeric",
  day: "numeric",
});

const transformData = (data: IQueryResult[]): IQueryResult[] => {
  return data.map(({ date, value }) => ({
    date: formatDate.format(new Date(date)),
    value,
  }));
};

export const DashboardPage: React.FC = () => {
  const API_URL = useApiUrl("metrics");

  const { data: dailyRevenue } = useCustom({
    url: `${API_URL}/dailyRevenue`,
    method: "get",
    config: {
      query,
    },
    queryOptions: {
      select: ({ data }) => {
        return { data: transformData(data.data) };
      },
    },
  });

  const { data: dailyOrders } = useCustom({
    url: `${API_URL}/dailyOrders`,
    method: "get",
    config: {
      query,
    },
    queryOptions: {
      select: ({ data }) => {
        return { data: transformData(data.data) };
      },
    },
  });

  const { data: newCustomers } = useCustom({
    url: `${API_URL}/newCustomers`,
    method: "get",
    config: {
      query,
    },
    queryOptions: {
      select: ({ data }) => {
        return { data: transformData(data.data) };
      },
    },
  });

  return (
    <Grid
      container
      justifyContent="baseline"
      alignItems={"stretch"}
      spacing={2}
    >
      <Grid item xs={12} sm={6}>
        <LineChartComponent dailyOrders={dailyOrders?.data ?? []} />
      </Grid>
    </Grid>
  );
};

In the code above, we are using the useCustom hook to make custom query requests to the backend. The useCustom hook uses TanStack Query's useQuery hook under the hook. We have been querying the daily revenue, daily orders, and new customers of a restaurant business for the last seven days. We will represent the data in different types of charts. The dashboard should now have a Line chart that looks like the image below.

There are several Line chart variants you can create using Rechart's built-in components. For more complex charts, check out the Recharts documentation.

Create Area chart using Recharts

Recharts has the built-in <AreaChart /> component for creating area charts. You can compose the built-in <AreaChart /> component to create complex area charts in your React project.

You can use the <AreaChart /> component's data prop to pass the data you want to represent on an area chart. Like in the previous example, your data should be an array of objects.

[
  { name: "Name A", data: 4000 },
  { name: "Name B", data: 3000 },
];

To represent the above data in an area chart, you can use the <AreaChart /> component as in the example below. As before, the component names are self-explanatory.

<AreaChart
  width={500}
  height={300}
  data={data}
  margin={{
    top: 10,
    right: 30,
    left: 0,
    bottom: 0,
  }}
>
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Area type="monotone" dataKey="data" stroke="#8884d8" fill="#8884d8" />
</AreaChart>

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.

// dashboard/charts/area-chart.tsx

import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

import { IQueryResult } from "../../../interfaces";

export const AreaChartComponent: React.FC<{ dailyRevenue: IQueryResult[] }> = ({
  dailyRevenue,
}) => {
  return (
    <ResponsiveContainer width="100%" height="100%" aspect={500 / 300}>
      <AreaChart
        width={500}
        height={300}
        data={dailyRevenue}
        margin={{
          top: 10,
          right: 30,
          left: 0,
          bottom: 0,
        }}
      >
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="value" stroke="#8884d8" fill="#8884d8" />
      </AreaChart>
    </ResponsiveContainer>
  );
};

In the example above, we are representing the daily revenue of a restaurant business in an area chart. We are fetching the data in our dashboard component and passing it as a prop to the above component. Once again we are wrapping the area chart in a responsive container.

You need to export the above component by adding the changes below to the src/pages/dashboard/charts/index.ts file.

// pages/dashboard/charts/index.ts

export { LineChartComponent } from "./line-chart";
//highlight-next-line
export { AreaChartComponent } from "./area-chart";

We can now import and render the above component in the <DashboardPage /> component. Add the changes below to the src/pages/dashboard/list.tsx file.

...

import {
  LineChartComponent,
  //highlight-next-line
  AreaChartComponent,
} from "./charts";

 ...

export const DashboardPage: React.FC = () => {

 ...

  return (
    <Grid
      container
      justifyContent="baseline"
      alignItems={"stretch"}
      spacing={2}
    >
      <Grid item xs={12} sm={6}>
        <LineChartComponent dailyOrders={dailyOrders?.data ?? []} />
      </Grid>
      //highlight-start
      <Grid item xs={12} sm={6}>
        <AreaChartComponent dailyRevenue={dailyRevenue?.data ?? []} />
      </Grid>
      //highlight-end
    </Grid>
  );
};

Your dashboard should now have a simple area chart that looks like the image below.

There are several types of Area charts. What we have created above is a simple Area chart. Recharts has built-in functionality for implementing most of them. For more, check out the documentation.

Create a Bar chart using Recharts

Bar charts are among the most common charts for visualizing data. You can use it to visually represent categorical data. Recharts has the built-in <BarChart /> component for creating bar charts.

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 <BarChart /> 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.

// pages/dashboard/charts/bar-chart.tsx

import React from "react";

import {
  BarChart,
  Bar,
  Rectangle,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

import { IQueryResult } from "../../../interfaces";

export const BarChartComponent: React.FC<{ newCustomers: IQueryResult[] }> = ({
  newCustomers,
}) => {
  return (
    <ResponsiveContainer width="100%" height="100%" aspect={500 / 300}>
      <BarChart
        width={500}
        height={300}
        data={newCustomers}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Bar
          dataKey="value"
          fill="#8884d8"
          activeBar={<Rectangle fill="pink" stroke="blue" />}
        />
      </BarChart>
    </ResponsiveContainer>
  );
};

We need to export the component above. Add the changes below to the src/pages/dashboard/charts/index.ts file.

export { LineChartComponent } from "./line-chart";
export { AreaChartComponent } from "./area-chart";
//highlight-next-line
export { BarChartComponent } from "./bar-chart";

We can now import and render the above component. Add the changes below to the src/pages/dashboard/list.tsx file.

...

import {
  LineChartComponent,
  AreaChartComponent,
  //highlight-next-line
  BarChartComponent,
} from "./charts";

...

export const DashboardPage: React.FC = () => {
 ...

  return (
    <Grid
      container
      justifyContent="baseline"
      alignItems={"stretch"}
      spacing={2}
    >
      <Grid item xs={12} sm={6}>
        <LineChartComponent dailyOrders={dailyOrders?.data ?? []} />
      </Grid>
      <Grid item xs={12} sm={6}>
        <AreaChartComponent dailyRevenue={dailyRevenue?.data ?? []} />
      </Grid>
      //highlight-start
      <Grid item xs={12} sm={6}>
        <BarChartComponent newCustomers={newCustomers?.data ?? []} />
      </Grid>
     //highlight-end
    </Grid>
  );
};

After rendering the above component, your dashboard should now have a bar chart that looks like the image below.

Create Scatter chart using Recharts

Scatter charts are useful to graphically represent the relationship between two variables. Like the other charts mentioned above, Recharts has the built-in <ScatterChart /> component for creating scatter charts.

Let's create a simple scatter chart in this article. Create the src/pages/dashboard/charts/scatter-chart.tsx file. Copy and paste the code below into it.

import React from "react";
import {
  ScatterChart,
  Scatter,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

import { IQueryResult } from "../../../interfaces";

const formatData = (
  dailyOrders: IQueryResult[],
  newCustomers: IQueryResult[],
) => {
  const formattedData = [];

  for (let i = 0; i < dailyOrders.length; i++) {
    if (!dailyOrders[i] || !newCustomers[i]) continue;

    if (dailyOrders[i].date === newCustomers[i].date) {
      formattedData.push({
        date: dailyOrders[i].date,
        dailyOrders: dailyOrders[i].value,
        newCustomers: newCustomers[i].value,
      });
    }
  }

  return formattedData;
};

export const ScatterChartComponent: React.FC<{
  dailyOrders: IQueryResult[];
  newCustomers: IQueryResult[];
}> = ({ dailyOrders, newCustomers }) => {
  const formattedData = formatData(dailyOrders, newCustomers);

  return (
    <ResponsiveContainer width="100%" height="100%" aspect={500 / 300}>
      <ScatterChart
        width={500}
        height={300}
        margin={{
          top: 20,
          right: 20,
          bottom: 20,
          left: 20,
        }}
      >
        <XAxis type="number" dataKey="dailyOrders" name="Orders" />
        <YAxis type="number" dataKey="newCustomers" name="Customers" />
        <Tooltip cursor={{ strokeDasharray: "3 3" }} />
        <Scatter name="A school" data={formattedData} fill="#8884d8" />
      </ScatterChart>
    </ResponsiveContainer>
  );
};

In the example above, we wrapped the chart in a responsive container and passed the data to the Scatter component instead of the ScatterChart. Similar to the other charts we have already looked at, the data should be an array of objects.

In the example above, we had to transform the data because we wanted to determine the relationship between two variables(daily orders and new customers).

Let's export the above component. Add the changes below to the src/pages/dashboard/charts/index.ts file.

export { LineChartComponent } from "./line-chart";
export { AreaChartComponent } from "./area-chart";
export { BarChartComponent } from "./bar-chart";
//highlight-next-line
export { ScatterChartComponent } from "./scatter-chart";

You can now import and render the above component in the dashboard. Add the changes below to the src/pages/dashboard/list.tsx file.

// src/pages/dashboard/list.tsx

...

import {
  LineChartComponent,
  AreaChartComponent,
  BarChartComponent,
  //highlight-next-line
  ScatterChartComponent,
} from "./charts";

i...

export const DashboardPage: React.FC = () => {
 ...

  return (
    <Grid
      container
      justifyContent="baseline"
      alignItems={"stretch"}
      spacing={2}
    >
      <Grid item xs={12} sm={6}>
        <LineChartComponent dailyOrders={dailyOrders?.data ?? []} />
      </Grid>
      <Grid item xs={12} sm={6}>
        <AreaChartComponent dailyRevenue={dailyRevenue?.data ?? []} />
      </Grid>
      <Grid item xs={12} sm={6}>
        <BarChartComponent newCustomers={newCustomers?.data ?? []} />
      </Grid>
      //highlight-start
      <Grid item xs={12} sm={6}>
        <ScatterChartComponent
          dailyOrders={dailyOrders?.data ?? []}
          newCustomers={newCustomers?.data ?? []}
        />
      </Grid>
      //highlight-end
    </Grid>
  );
};

After rendering the above component, the dashboard should now have a scatter chart that looks like the image below.

Create a Pie chart using Recharts

A pie chart is one of the most common and easy-to-understand charts. It is a circular graph that is split into multiple sectors. Each sector in a pie chart represents a particular category of data and its size is proportional to the quantity of the category it represents.

In this section, we will create a simple Pie chart using Recharts. Let's start by creating the src/pages/dashboard/charts/pie-chart.tsx file. Copy and paste the code below into it.

import React from "react";
import { PieChart, Pie, ResponsiveContainer } from "recharts";

import { IQueryResult } from "../../../interfaces";

export const PieChartComponent: React.FC<{ dailyOrders: IQueryResult[] }> = ({
  dailyOrders,
}) => {
  return (
    <ResponsiveContainer width="100%" height="100%" aspect={300 / 300}>
      <PieChart width={300} height={300}>
        <Pie
          data={dailyOrders}
          dataKey="value"
          nameKey="date"
          cx="50%"
          cy="40%"
          outerRadius={150}
          fill="#82ca9d"
          label
        />
      </PieChart>
    </ResponsiveContainer>
  );
};

Let's export the above component so that we can import it anywhere in our application. Add the changes below to the src/pages/dashboard/charts/index.ts file.

export { LineChartComponent } from "./line-chart";
export { AreaChartComponent } from "./area-chart";
export { BarChartComponent } from "./bar-chart";
export { ScatterChartComponent } from "./scatter-chart";
//highligh-next-line
export { PieChartComponent } from "./pie-chart";

Let's import and render the above component in our dashboard. Add the changes below to the src/pages/dashboard/list.tsx file.

...

import {
  LineChartComponent,
  AreaChartComponent,
  BarChartComponent,
  ScatterChartComponent,
  //highlight-next-line
  PieChartComponent,
} from "./charts";

...

  return (
    <Grid
      container
      justifyContent="baseline"
      alignItems={"stretch"}
      spacing={2}
    >
      <Grid item xs={12} sm={6}>
        <LineChartComponent dailyOrders={dailyOrders?.data ?? []} />
      </Grid>
      <Grid item xs={12} sm={6}>
        <AreaChartComponent dailyRevenue={dailyRevenue?.data ?? []} />
      </Grid>
      <Grid item xs={12} sm={6}>
        <BarChartComponent newCustomers={newCustomers?.data ?? []} />
      </Grid>
      <Grid item xs={12} sm={6}>
        <ScatterChartComponent
          dailyOrders={dailyOrders?.data ?? []}
          newCustomers={newCustomers?.data ?? []}
        />
      </Grid>
      //highlight-start
      <Grid item xs={12} sm={6}>
        <PieChartComponent dailyOrders={dailyOrders?.data ?? []} />
      </Grid>
      //highlight-end
    </Grid>
  );
};

Your dashboard should now have a Pie chart that looks like the image below.

Create TreeMap using Recharts

A Treemap is a data visualization tool similar to a Pie chart. However, instead of using a circular graph and sectors to represent data, a Treemap instead uses rectangles and nested rectangles.

With a Treemap, a rectangle represents a category, and nested rectangles represent sub-categories within a category. Recharts has the built-in <Treemap /> component for creating Treemaps. You can pass the data as the value of the data attribute.

Let's add a simple Treemap to our dashboard. Create the src/pages/dashboard/charts/treemap.tsx file. Copy and paste the code below into it.

import React from "react";
import { Treemap, ResponsiveContainer } from "recharts";

const data = [
  {
    name: "axis",
    children: [
      { name: "Axes", size: 1302 },
      { name: "Axis", size: 24593 },
      { name: "AxisGridLine", size: 652 },
      { name: "AxisLabel", size: 636 },
      { name: "CartesianAxes", size: 6703 },
    ],
  },
  {
    name: "controls",
    children: [
      { name: "AnchorControl", size: 2138 },
      { name: "ClickControl", size: 3824 },
      { name: "Control", size: 1353 },
      { name: "ControlList", size: 4665 },
      { name: "DragControl", size: 2649 },
      { name: "ExpandControl", size: 2832 },
      { name: "HoverControl", size: 4896 },
      { name: "IControl", size: 763 },
      { name: "PanZoomControl", size: 5222 },
      { name: "SelectionControl", size: 7862 },
      { name: "TooltipControl", size: 8435 },
    ],
  },
  {
    name: "data",
    children: [
      { name: "Data", size: 20544 },
      { name: "DataList", size: 19788 },
      { name: "DataSprite", size: 10349 },
      { name: "EdgeSprite", size: 3301 },
      { name: "NodeSprite", size: 19382 },
      {
        name: "render",
        children: [
          { name: "ArrowType", size: 698 },
          { name: "EdgeRenderer", size: 5569 },
          { name: "IRenderer", size: 353 },
          { name: "ShapeRenderer", size: 2247 },
        ],
      },
      { name: "ScaleBinding", size: 11275 },
      { name: "Tree", size: 7147 },
      { name: "TreeBuilder", size: 9930 },
    ],
  },
  {
    name: "events",
    children: [
      { name: "DataEvent", size: 7313 },
      { name: "SelectionEvent", size: 6880 },
      { name: "TooltipEvent", size: 3701 },
      { name: "VisualizationEvent", size: 2117 },
    ],
  },
  {
    name: "legend",
    children: [
      { name: "Legend", size: 20859 },
      { name: "LegendItem", size: 4614 },
      { name: "LegendRange", size: 10530 },
    ],
  },
];

export const TreemapComponent: React.FC = () => {
  return (
    <ResponsiveContainer width="100%" height="100%" aspect={500 / 300}>
      <Treemap
        width={500}
        height={300}
        data={data}
        dataKey="size"
        aspectRatio={500 / 300}
        stroke="#fff"
        fill="#8884d8"
      />
    </ResponsiveContainer>
  );
};

In the example above, we have hard-coded the data because the API doesn't have a dataset we can use to create a Treemap. In a typical real-world project, you will retrieve the data from an API. You can export the above component from the src/pages/dashboard/charts/index.ts file like so:

export { LineChartComponent } from "./line-chart";
export { AreaChartComponent } from "./area-chart";
export { BarChartComponent } from "./bar-chart";
export { ScatterChartComponent } from "./scatter-chart";
export { PieChartComponent } from "./pie-chart";
//highlight-next-line
export { TreemapComponent } from "./treemap";

You can now import the above component and render it in the dashboard.

import React from "react";
import { Grid } from "@mui/material";
import { useApiUrl, useCustom } from "@refinedev/core";

import dayjs from "dayjs";

const query = {
  start: dayjs().subtract(7, "days").startOf("day"),
  end: dayjs().startOf("day"),
};

import {
  LineChartComponent,
  AreaChartComponent,
  BarChartComponent,
  ScatterChartComponent,
  PieChartComponent,
  //highlight-next-line
  TreemapComponent,
} from "./charts";

import { IQueryResult } from "../../interfaces";

export const formatDate = new Intl.DateTimeFormat("en-US", {
  month: "short",
  year: "numeric",
  day: "numeric",
});

const transformData = (data: IQueryResult[]): IQueryResult[] => {
  return data.map(({ date, value }) => ({
    date: formatDate.format(new Date(date)),
    value,
  }));
};

export const DashboardPage: React.FC = () => {
  const API_URL = useApiUrl("metrics");

  const { data: dailyRevenue } = useCustom({
    url: `${API_URL}/dailyRevenue`,
    method: "get",
    config: {
      query,
    },
    queryOptions: {
      select: ({ data }) => {
        return { data: transformData(data.data) };
      },
    },
  });

  const { data: dailyOrders } = useCustom({
    url: `${API_URL}/dailyOrders`,
    method: "get",
    config: {
      query,
    },
    queryOptions: {
      select: ({ data }) => {
        return { data: transformData(data.data) };
      },
    },
  });

  const { data: newCustomers } = useCustom({
    url: `${API_URL}/newCustomers`,
    method: "get",
    config: {
      query,
    },
    queryOptions: {
      select: ({ data }) => {
        return { data: transformData(data.data) };
      },
    },
  });

  return (
    <Grid
      container
      justifyContent="baseline"
      alignItems={"stretch"}
      spacing={2}
    >
      <Grid item xs={12} sm={6}>
        <LineChartComponent dailyOrders={dailyOrders?.data ?? []} />
      </Grid>
      <Grid item xs={12} sm={6}>
        <AreaChartComponent dailyRevenue={dailyRevenue?.data ?? []} />
      </Grid>
      <Grid item xs={12} sm={6}>
        <BarChartComponent newCustomers={newCustomers?.data ?? []} />
      </Grid>
      <Grid item xs={12} sm={6}>
        <ScatterChartComponent
          dailyOrders={dailyOrders?.data ?? []}
          newCustomers={newCustomers?.data ?? []}
        />
      </Grid>
      <Grid item xs={12} sm={6}>
        <PieChartComponent dailyOrders={dailyOrders?.data ?? []} />
      </Grid>
      //highlight-start
      <Grid item xs={12} sm={6}>
        <TreemapComponent />
      </Grid>
      //highlight-end
    </Grid>
  );
};

Your dashboard should now have a Treemap that looks like the image below.

Conclusion

Sometimes you may have to integrate data visualization in your React project. Charts make it easy to present data in an easy-to-understand and visually appealing way.

There are several frameworks for creating charts in React. Recharts is one of the most popular and feature-rich packages for creating charts in a React project or React-based frameworks such as refine.

Recharts support several types of charts out of the box. In this article, we have only explored a subset of charts you can create using Recharts. Check the documentation for details.

👾 Using Arguments in Bash Scripts

Necati Özmen — Mon, 27 May 2024 07:15:46 +0000

Introduction

Arguments in any bash script are inevitable for any scripting task. They make the script flexible and dynamic instead of static and hard coded. Now there are many variations in how arguments can be used effectively in a script, and this is exactly what we will discuss today. Remember, a solid understanding of arguments is crucial to automate your tasks through script arguments. For each point in this article, we will provide an example from a practical perspective as well.

Let's start with understanding how positional parameters work in the bash script.

Steps to be covered:

Understanding Positional Parameters
Using Special Parameters
Implementing Flags and Options
Handling Variable Numbers of Arguments
- Best Practices for Bash Script Arguments

Understanding Positional Parameters

In bash scripting, positional parameters are a fundamental concept. They’re the variables that bash scripts use to handle input data. When you run a script, you can pass arguments to it, and these arguments are stored in special variables known as positional parameters. The first argument you pass is stored in $1, the second in $2, and so on.

Let’s understand this in detail through an example. Let's say you have a bash script that needs to process three pieces of input data and you want to make use of positional parameters. The below snippet shows how you might use positional parameters to handle this:

#!/bin/bash
echo "Arg 1: $1"
echo "Arg 2: $2"
echo "Arg 3: $3"

When you run this script with three arguments, it will echo back the first three arguments you passed to it. For instance, if you run ./myscript.sh marketing sales engineering, the script will output:

Arg 1: marketing
Arg 2: sales
Arg 3: engineering

This shows how $1, $2, and $3 correspond to the first, second, and third arguments you passed to the script. It is a simple yet powerful way to make your scripts more flexible and reusable.

Using Special Parameters

In bash scripting, there are special parameters that provide additional ways to handle input data. These include $*, $@, and $#.

The $* and $@ parameters represent all arguments that were passed to the script. While they might seem identical, their behavior diverges when you try to iterate over them in a script. Let’s illustrate this with an example:

#!/bin/bash
echo "Iterating with \$*"
for arg in "$*"
do
    echo $arg
done

echo "Iterating with \$@"
for arg in "$@"
do
    echo $arg
done

If you run this script with the arguments ./myscript.sh one two three, you’ll notice that $* treats all arguments as a single string, while $@ treats each argument as a separate string.

The $# parameter is different - it doesn’t represent the arguments themselves, but the number of arguments. This can be useful when your script needs to know how many arguments were passed. Here’s a simple script that uses $#:

#!/bin/bash
echo "You provided $# arguments."

If you run ./myscript.sh apple banana cherry, the script will output You provided 3 arguments. This shows how $# can be used to count the number of arguments passed to a script.

Implementing Flags and Options

Bash scripts often require input parameters to customize behavior, and getopts is a utility that can be used to parse positional parameters.

#!/bin/bash

# Initialize our own variables
OPTIND=1         # Reset in case getopts has been used previously in the shell.
verbose=0
name=""

while getopts "h?vn:" opt; do
    case "$opt" in
    h|\?)
        echo "Usage: $0 [-v] [-n name]"
        exit 0
        ;;
    v)  verbose=1
        ;;
    n)  name=$OPTARG
        ;;
    esac
done

shift $((OPTIND-1))

[ "${1:-}" = "--" ] && shift

echo "verbose=$verbose, name='$name', Leftovers: $@"

In the script above, -h is used for displaying help information, and -n is used for setting a name. The v flag is used to set verbose mode. If -v is provided when the script is run, verbose is set to 1. If -n is provided, the next argument is assigned to the variable name.

Here’s an example of how you might run this script:

$ ./myscript -v -n "Example Name" leftover args

Output:

verbose=1, name='Example Name', Leftovers: leftover args

In this example, the -v flag sets verbose mode, and -n sets the name to “Example Name”. Any arguments provided after the flags (in this case, “leftover args”) are still available in the script.

Handling Variable Numbers of Arguments

Bash scripts often need to accept a variable number of arguments. This is where $@ comes into play. It’s a special shell variable that holds all the arguments provided to the script.

#!/bin/bash

# Initialize an empty string
concatenated=""

# Loop through all arguments
for arg in "$@"; do
    concatenated+="$arg "
done

# Print the concatenated string
echo "Concatenated string: $concatenated"

In the script above, we initialize an empty string concatenated. We then loop through all arguments provided to the script using $@ and append each argument to concatenated.

Here’s an example of how you might run this script:

$ ./myscript arg1 arg2 arg3

Output:

Concatenated string: arg1 arg2 arg3

In this example, the script concatenates the three arguments arg1, arg2, and arg3 into a single string. This demonstrates how a bash script can handle a variable number of arguments.

Best Practices for Script Arguments

Here are some best practices for designing bash scripts with arguments:

Use Intuitive Argument Names: Opt for descriptive and intuitive names for arguments. This improves readability and helps maintain the code.
- Bad: bash script.sh $1 $2
- Good: bash script.sh -u username -p password
Assign Default Values: Where practical, assign default values to arguments. This ensures that your script behaves predictably even when certain inputs are omitted.
- Example: file_path=${1:-"/default/path"}
Inline Comments: Use inline comments to explain the purpose and expected values of arguments. This documentation aids future maintainers and users of your script.
- Example: # -u: Username for login
Leverage getopts for Option Parsing: getopts allows for more flexible and robust argument parsing, supporting both short and long options.
- Example:

while getopts ":u:p:" opt; do
  case ${opt} in
    u ) username=$OPTARG;;
    p ) password=$OPTARG;;
    \? ) echo "Usage: cmd [-u] [-p]";;
  esac
done

Validate Input Early: Check for the existence and format of required arguments at the start of your script to prevent execution with invalid inputs.
- Example:

if [ -z "$username" ] || [ -z "$password" ]; then
  echo "Username and password are required."
  exit 1
fi

Beware of Unquoted Variables: Always quote variables to handle values with spaces correctly.
- Bad: if [ -z $var ]; then
- Good: if [ -z "$var" ]; then
Explicitly Declare Intent: Use set -u to treat unset variables and parameters as an error, preventing scripts from running with unintended states.
- Add set -u at the beginning of your script.

Conclusion

The importance of arguments in developing scripts that can adapt to different situations is highlighted by the fact that they are extensively used in bash scripts. We focused on improving script functionality and user interaction by using positional parameters, special variables, and getopts.

Not only do the given examples provide a useful roadmap, but they also inspire developers to try new things and incorporate these ideas into their scripts. Your scripting skills will certainly improve after adopting these best practices and techniques, allowing you to make your automation tasks more efficient and adaptable.

How to Hide Scrollbar Using CSS?

Necati Özmen — Mon, 20 May 2024 06:06:19 +0000

Introduction

A scrollbar is a GUI element that appears on the right side (or bottom corner) of a webpage or web application to let users navigate a page or an element up and down (and also left and right) without taking their hands off the keyboard or trackpad. However, the default scrollbar may appear bland and out of place, diminishing the overall aesthetics of the webpage or web application.

With the help of new CSS attributes, scrollbars can now be styled and hidden without affecting the user's ability to scroll. In this article, we will demonstrate how to hide the scrollbar in most web browsers using CSS.

Steps we'll cover:

CSS properties to hide element scrollbars.
Hide scrollbars on specific elements.
CSS properties to hide browser scrollbars.
Hide scrollbars in Webkit browsers like Chrome, Safari, Edge, and Firefox.

CSS properties to hide element scrollbars

The CSS property overflow: hidden is used to hide the vertical and horizontal scrollbar on an element. However, This property also affects the element's ability to scroll on its vertical and horizontal axis.
The CSS property overflow-y: hidden is used to hide the vertical scrollbar on an element. This property also affects the element's ability to scroll on its vertical axis.
The CSS property overflow-x: hidden is used to hide the horizontal scrollbar on an element. This property also affects the element's ability to scroll on its horizontal axis.
You can hide a scrollbar on an element while being given the ability to scroll, through the following:
- A pseudo selector ::-webkit-scrollbar, which is only supported for webkit browsers. In the pseudo selector, you can define the display: none property which would hide the scrollbar on the element but retain its scrolling function.
- The -ms-overflow-style: none property which is only supported for for Edge and other legacy browsers like IE.
- The scrollbar-width: none property which is supported by Firefox.

Hide scrollbars on specific elements

We will demonstrate how to hide scrollbars using the CSS attributes mentioned earlier.

Below is a codepen example that shows how to hide an element's scrollbar without affecting its ability to scroll.

In this example, we used the ::-webkit-scrollbar pseudo-selector to hide the scrollbar on the element with a class scroll-container while maintaining its functionality.

.scroll-container::-webkit-scrollbar {
  display: none;
}

Another example is using the property overflow: hidden to hide the scrollbar. However, as shown on the codepen, it affects the element's ability to scroll.

The overflow: hidden property is applied on the element with class scroll-container with a max-height: 350px.

.scroll-container {
  background: white;
  padding: 2em;
  margin: auto;
  max-width: 450px;
  max-height: 350px;
  /* This displays hides the scrollbar on the element, however, it affects its scrolling function */
  overflow: hidden;
}

CSS properties to hide browser scrollbars

The pseudo selector -webkit-scrollbar can also be used to target browser scrollbars in all WebKit-based browsers. However, while this method has been around for a while, it has yet to be standardized and is likely to become outdated once the new scrollbar characteristics provided by MDN are fully implemented and supported in all browsers.
The browser's scrollbar can be hidden when the CSS properties overflow: hidden, overflow-y: hidden, or overflow-x: hidden are added to the body element (the root element). Nonetheless, it is not recommended to apply them to the base body element since it may interfere with the browser's ability to scroll on that page.

Hide scrollbars in Webkit browsers like Chrome, Safari, Edge, and Firefo

We will demonstrate how to hide browser scrollbars using the CSS properties mentioned earlier.

The codepen example that follows demonstrates how to conceal the browser's scrollbar without impairing its scrolling functionality.

In this example, we used the ::-webkit-scrollbar pseudo-selector to hide the scrollbar on the body element while maintaining its functionality.

body::-webkit-scrollbar {
  display: none;
}

Another option is to conceal the scrollbar by using the CSS property: overflow: hidden. Nevertheless, it has an impact on the browser's scrolling capability (which is not advisable) on that page, as seen on the codepen.

The overflow: hidden property is applied to the body element.

body {
  border: 10px solid orange;
  margin: auto;
  max-width: 600px;
  font: 1em / 1.4 sans-serif;
  padding: 2em;
  display: grid;
  place-items: center;
  background: white;
  /* This displays hides the scrollbar on the browser, however, it affects its scrolling function */
  overflow: hidden;
}

Conclusion

In this article, we explained how to hide scrollbars at the element and page levels using CSS. Scrollbars should be hidden for certain UI and aesthetic reasons, but it's crucial to remember that accessibility is improved when scrollbars are displayed in scrollable sections because they make it easier for users to find and navigate content.

Synch vs. Async Programming

Necati Özmen — Tue, 16 Apr 2024 08:34:02 +0000

Introduction

The decision between synchronous and asynchronous programming models is not just a technical one in software development; it affects how programs work together, complete tasks, and react to user inputs.

It's important to remember that choosing the right model can make or break a project as we compare these paradigms. The goal of this article is to clear up some ambiguity about these concepts by making a clear distinction between synchronous and asynchronous programming and explaining their pros, cons, and best uses. By understanding what each strategy is really about, developers can make smart decisions and make their approach match the needs of their applications.

Steps we'll cover in this article include:

Understanding Synchronous Programming
Exploring Asynchronous Programming
Comparing Asynchronous and Synchronous Programming
Practical Examples in Code
Best Practices and Patterns

Understanding Synchronous Programming

What is synchronous programming?

In synchronous programming, tasks are done sequentially. As with a book, you start at the beginning and read every word and line. Synchronous programming requires the completion of each task before starting the next. Control flow is predictable and simple.

The system can become stuck or unresponsive if one task takes too long. Blocking behavior is a hallmark of synchronous programming.

How does it work?

The synchronous programming model advances operations linearly. The process is simplified as below:

Program execution is sequential. Asks are executed in code sequence. From the top down, it executes each line of code.
If a job takes a long time, such as reading a huge file or waiting for human input, the program blocks until it finishes. Synchronous programming blocks.

Use Cases Where Synchronous Programming Shines

Synchronous programming is particularly useful in scenarios where tasks need to be executed in a specific order. For example, if you’re baking a cake, you can’t put it in the oven before you’ve mixed the ingredients. Similarly, in a program, you might need to fetch data from a database before you can process it.

Example: Sequential File Reading

Here’s an example of how synchronous programming might work in the context of reading files:

function readFilesSequentially(fileList) {
    for each file in fileList {
        content = readFile(file) // This is a blocking operation
        process(content)
    }
}

In this pseudocode, readFile(file) is a synchronous operation. The process(content) function won’t be called until readFile(file) has completely finished reading the file. This is a clear demonstration of the sequential and blocking nature of synchronous programming.

Exploring Asynchronous Programming

What is asynchronous programming?

Asynchronous programming is a paradigm that allows tasks to be executed concurrently, rather than sequentially. This means that the execution of the program doesn’t have to wait for a task to complete before moving on to the next one. It’s like being at a buffet - you don’t have to wait for one person to finish serving themselves before you can start.

In asynchronous programming, tasks are often started and then put aside, allowing other tasks to run in the meantime. Once the original task has been completed, it can be picked up where it left off. This non-blocking nature is a key characteristic of asynchronous programming.

How does it work

Concurrent Execution: One of the main aspects of asynchronous programming is the ability to execute multiple tasks concurrently. This can lead to a significant increase in the efficiency and performance of the program, especially in scenarios where tasks are independent or require waiting for some external resource, such as a network request.
Non-Blocking Nature: Asynchronous programming doesn't block the rest of the program because it doesn't wait for long tasks like I/O operations. In UI programming, this can improve user experience and responsiveness.

Use Cases Where Asynchronous Programming should be used

I/O-bound tasks are often programmed asynchronously. Asynchronous tasks can be used in web development to make API queries, access databases, and handle user input without interrupting the main thread.

Example: AJAX Requests in Web Development with Pseudocode

Asynchronous programming can be used to make AJAX queries in web development. See below example:

function fetchAndDisplayData(url) {
  // This is a non-blocking operation
  data = asyncFetch(url);

  data.then((response) => {
    // This code will run once the data has been fetched
    displayData(response);
  });
}

In the above pseudocode, asyncFetch(url) is an asynchronous operation. The displayData(response) function will not be called until asyncFetch(url) has finished fetching the data. Meanwhile, other code can continue to run in the background which demonstrates the non-blocking nature of asynchronous programming.

"www.medium.com/from-the-scratch/wtf-is-synchronous-and-asynchronous-1a75afd039df"

Comparing Asynchronous and Synchronous Programming

Differences between synchronous and asynchronous programming in terms of performance, application execution, and execution time are as below:

Execution

Synchronous: Tasks are executed sequentially, one after the other, in a synchronous system. The result is a control flow that is easy to foresee and implement.

Asynchronous: Tasks can be executed simultaneously in an asynchronous environment. This eliminates the need for the software to wait for one task to finish before proceeding to the next.

Performance

Synchronous: With synchronous performance, if a single job takes too long to finish, the whole system could freeze or become unresponsive.

Asynchronous: The non-blocking aspect of asynchronous programming can result in a more responsive and seamless user experience, especially when it comes to user interface development.

Application suitability

Synchronous: Ideal for situations requiring the execution of steps in a predetermined sequence.

Asynchronous: When jobs are I/O bound instead of CPU bound, they are considered asynchronous.

When to use asynchronous programming

Web based applications

To avoid interrupting the main thread of execution, asynchronous tasks can be utilized to do operations like performing API queries.

Database Management

Data reading and writing operations might be tedious and don't necessarily have to be finished before going on to other tasks.

UI programming
A more responsive and fluid user experience is possible with asynchronous programming when dealing with user input.

File I/O operations
As a general rule, you don't have to finish time-consuming file I/O operations before going on to the next step.

When to use synchronous programming

Sequential data retrieval and processing

For certain programs, retrieving data from a database is a prerequisite to processing that data.

Composing basic scripts
When working with small scripts, synchronous programming might be more understandable and debug-friendly.

CPU-bound tasks
Carrying out operations that are CPU-intensive. Synchronous programming may be more efficient if a task is CPU-bound instead than I/O-bound.

Comparison Table

Below we have compiled the comparison table summarizing the differences between the two approaches.

Criteria	Synchronous Programming	Asynchronous Programming
Execution Pattern	Executes tasks one after another in a linear sequence.	Executes multiple tasks concurrently, without waiting for one to finish before starting another.
Blocking Behavior	Blocks the execution flow until the current task is completed.	Allows the execution to continue with other tasks, utilizing a non-blocking approach.
Performance Impact	May lead to inefficiencies in scenarios involving waiting, as the system remains idle during task execution.	Enhances efficiency and responsiveness, particularly for I/O-bound operations, by not wasting idle time.
Ideal Use Cases	Well-suited for tasks that must be completed in order and where each step depends on the completion of the previous one.	Best for situations requiring high responsiveness or handling operations that involve waiting, such as I/O activities.
When to Use	- When tasks need to be processed in strict sequence. - In simpler scripts or applications where concurrent execution adds unnecessary complexity.	- For applications involving frequent I/O operations. - When building highly responsive user interfaces. - In web servers handling multiple simultaneous requests.
Examples	- Reading and processing a file line by line. - Database transactions where operations must follow a strict order.	- Making concurrent API requests. - Performing background data processing in web applications without disrupting the user experience.

Practical Examples in Code

Synchronous Code Example: Processing a List of Tasks Sequentially

In synchronous programming, tasks are processed sequentially. Here’s an example in Python:

import time

def process_userData(task):
    # Simulate task processing time
    time.sleep(1)
    print(f"Task {task} processed")

tasks = ['task1', 'task2', 'task3']

for task in tasks:
    process_userData(task)

Jobs are processed sequentially by this synchronous method process_userData. If one job takes too long to finish, subsequent tasks will have to wait because of this sequential processing, which can cause delays. The application's performance and the user's experience may suffer as a result.

Asynchronous Code Example: Fetching Data from Multiple Sources Concurrently

In contrast, asynchronous programming allows for concurrent task processing. Here’s an example in Python using the asyncio library:

import asyncio

async def retrieve_data(source):
    # Simulate time taken to fetch data
    await asyncio.sleep(1)
    print(f"Data retrieved {source}")

sources = ['source1', 'source2', 'source3']

async def main():
    tasks = retrieve_data(source) for source in sources]
    await asyncio.gather(*tasks)

asyncio.run(main())

The asynchronous method starts numerous processes at the same time. This ensures that the application can jump from one task to another without interruption. We can enhance the application's performance and user experience by doing this. However, dealing with tasks and callbacks can make it more difficult to implement.

Best Practices and Patterns

Tips for Effective Use of Each Programming Model

Synchronous Programming

Use when simplicity is paramount: Synchronous programming is straightforward to understand, making it ideal for simple tasks and scripts.
Avoid for I/O-bound tasks: Synchronous programming can block the execution thread while waiting for I/O operations (like network requests or disk reads/writes) to complete. Use asynchronous programming for these tasks to avoid blocking.

Asynchronous Programming

Use for I/O-bound tasks: Asynchronous programming shines when dealing with I/O-bound tasks. It allows the execution thread to continue with other tasks while waiting for the I/O operation to complete.
Be mindful of shared resources: Asynchronous programming can lead to race conditions if multiple tasks are accessing and modifying shared resources. Use synchronization primitives like locks or semaphores to prevent this.

Common Design Patterns

Synchronous Programming

The most common pattern in synchronous programming is the sequential execution pattern, where tasks are executed one after the other.

Asynchronous Programming

Promises: Promises represent a value that may not be available yet. They’re used to handle asynchronous operations, providing methods to attach callbacks that will be called when the value is available or when an error occurs.
Async/Await: This is syntactic sugar over promises, making asynchronous code look and behave more like synchronous code. It makes asynchronous code easier to write and understand.

How to Avoid Common Pitfalls

Callback Hell

“Callback hell” refers to heavily nested callbacks that make the code hard to read and understand. Here are some ways to avoid it:

Modularize your code: Break your code into smaller, reusable functions.
Use Promises or Async/Await: These features of JavaScript can flatten your code and make it easier to read and understand.
Error Handling: Always include error handling for your callbacks. Unhandled errors can lead to unpredictable results.

Conclusion

As we come to the end of our discussion of synchronous and asynchronous programming models, it's clear that each has its benefits that are best for certain situations. Because it works in a sequential and blocking way, synchronous programming is easy to understand and is great for tasks that need to be done linearly.

On the other hand, asynchronous programming, which is known for not blocking and allowing multiple tasks to run at the same time, works best when high responsiveness and efficiency are needed, especially in I/O-bound operations. Which of these approaches to use depends on how well you understand the application's needs, performance issues, and the user experience you want.

With the information from this comparison, developers are more prepared to handle the complicated world of software engineering and make sure their projects are not only useful but also the best ones for the job.

Author: Muhammad Khabbab

CSS Rounded Corners Examples

Necati Özmen — Wed, 03 Apr 2024 06:19:56 +0000

Introduction

Rounded corners on HTML help soften the overall design of a website, giving it a more inviting and user-friendly appearance. We'll examine CSS-created rounded corners in this article.

Steps we'll cover:

What is CSS border-radius?
Rounded corners using CSS border-radius
Elliptical corners using CSS border-radius
Random corners using CSS border-radius.
Inverted corners
Notched corners

What is CSS border-radius?

The border-radius attribute in CSS specifies the radius of a HTML element's corners. The border-radius attribute can have between one and four values.

border-radius: 15px 50px 30px 5px;

The first value applies to the top-left corner.
The second to the top-right corner.
The third to the bottom-right corner.
The fourth to the bottom-left corner.

The border-radius can be set for all four sides using the shorthand property shown below:

border-radius: 10px;

The border-radius can be set for the top-left-and-bottom-right and top-right-and-bottom-left corners using the shorthand property shown below:

border-radius: 10px 20px;

The border-radius can be set for the top-left, top-right-and-bottom-left, and bottom-right corners using the shorthand property shown below:

border-radius: 10px 20px 30px;

The above examples display that the border-radius attribute can accept a single radius (defined at all the corners). Defining a single radius for the border-radius attribute will form round corners.

Alternatively, the border-radius attribute can also accept two radii to form elliptical corners. An example is shown below:

border-radius: 40px / 10px;

In the sample above, the '/' separates the two radii from each other.

You can also use the shorthand property on the two radii as shown below:

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 20px / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 15px / 20px 25px 30px;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5px / 20px 15px 30px 35px;

Rounded corners using CSS border-radius

Example:

We will display examples of how to create rounded corners using the border-radius attribute.

HTML:

<html>
  <body>
    <div class="container">
      <div class="four-rounded-corners">
        <p>Four rounded Corners</p>
      </div>

      <div class="rounded-right-corners">
        <p>Right rounded Corners</p>
      </div>

      <div class="rounded-left-corner">
        <p>Left rounded Corners</p>
      </div>

      <div class="rounded-corners-top-left-bottom-right-corners">
        <p>Rounded top left bottom right Corners</p>
      </div>

      <div class="rounded-corners-top-right-bottom-left-corners">
        <p>Rounded top right bottom left Corners</p>
      </div>

      <div class="rounded-circular-corners">
        <p>Rounded Circle Corners</p>
      </div>
    </div>
  </body>
</html>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

div.four-rounded-corners {
  /* using the shorthand property to set the border radius on all corners */
  border-radius: 30px;
  background: orange;
  padding: 100px;
  text-align: center;
  font-size: 32px;
}

div.rounded-right-corners {
  /* using the shorthand property to set the border radius on the top-right and bottom-right corners */
  border-radius: 0px 30px 30px 0px;
  ...;
}

div.rounded-left-corner {
  /* using the shorthand property to set the border radius on the top-left and bottom-left corners */
  border-radius: 30px 0px 0px 30px;
  ...;
}

div.rounded-corners-top-left-bottom-right-corners {
  /* using the shorthand property to set the border radius on the top-left and bottom-left corners */
  border-radius: 30px 0px 30px 0px;
  ...;
}

div.rounded-corners-top-right-bottom-left-corners {
  /* using the shorthand property to set the border radius on the top-right and bottom-left corners */
  border-radius: 0px 30px;
  ...;
}

div.rounded-circular-corners {
  width: 400px;
  height: 400px;
  /* dynamically setting the radius of the corners to be 50% -- half the width and height of the element */
  border-radius: 50%;
  background: orange;
  font-size: 32px;
  display: grid;
  place-items: center;
}

VIEW:

Elliptical corners using CSS border-radius

We will display examples of elliptical borders using CSS border-radius. To create elliptical corners, the border-radius attribute will contain two radii.
Elliptical corners are recognized by the majority of modern browsers. Nonetheless, -webkit versions might be useful for browsers that don't support CSS3 (elliptical corners aren't supported by older versions of -mos-border-radius).

Example

We will create a cylinder-like shape using two radii on the border-radius property.

HTML:

<html>
  <body>
    <div>Elliptical Corners</div>
  </body>
</html>

CSS:

div {
  width: 400px;
  height: 400px;
  border-radius: 100px / 25px; /* setting the 2 radii in the property */
  background: orange;
  font-size: 32px;
  display: grid;
  place-items: center;
}

VIEW:

Random corners using CSS border-radius.

We will display examples of random borders using CSS border-radius.

Example 1

We will create a blob-like shape using the radius defined on the border-radius property.

HTML:

<html>
  <body>
    <div>Elliptical Corners</div>
  </body>
</html>

CSS:

div {
  width: 400px;
  height: 400px;
  border-radius: 60% 30% 30% 20%
    /* setting the radius in percentages for random corners */;
  background: orange;
  font-size: 32px;
  display: grid;
  place-items: center;
}

VIEW:

Example 2:

We will create a blob like shape using the 2 radii defined on the border-radius property.

CSS

div {
  width: 400px;
  height: 400px;
  border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
  background: orange;
  font-size: 32px;
  display: grid;
  place-items: center;
}

VIEW:

Inverted corners

The basic idea for making an inverted corner is to make a pseudo element, remove the border-radius from the corner on the div (bearing the pseudo element) where we want to add the inverted corner, and then cut a border-radius out of that pseudo element.
Next, we use a box-shadow to give the pseudo element's shadow the same color as the parent div element.

Example:

We will create a chat bubble using the idea of inverted corners.

HTML:

<html>
  <body>
    <div>Chat Bubble</div>
  </body>
</html>

CSS:

div {
  margin-top: 50px;
  position: relative;
  width: 200px;
  height: 80px;
  /* background of main div*/
  background: orange;
  padding: 20px;
  border-radius: 0px 8px 8px 8px;
  display: grid;
  place-items: center;
}

div:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  height: 40px;
  width: 40px;
  background: transparent;

  /* border-radius of pseudo element */
  border-bottom-left-radius: 50%;

  /* box shadow to give the shadow of the pseudo-element the same color as the background */
  box-shadow: 0 20px 0 0 orange;
}

VIEW:

Notched corners

We will display examples of notched borders using CSS.

Example 1:

The basic idea for making an notched corner in this example is as follows:

Create a pseudo element from a div element,
Collapse the pseudo element on the section of the div where you want to make the notched corner.
Create a box shadow on the pseudo element.
Set overflow: hidden on the div element to conceal the overflowing bits of its child elements.
Use the box-shadow of the pseudo-element to fill the background of the parent div element.

We will create a partly truncated div element using the idea of notched corners.

HTML:

<html>
  <body>
    <div class="notched-corner">
      <p>Notched Corners</p>
    </div>
  </body>
</html>

CSS:

div.notched-corner {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: transparent;
  overflow: hidden;
}

div.notched-corner:before {
  content: "";
  position: absolute;
  left: 90%;
  top: -20%;
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  background-color: transparent;
  box-shadow: 0 0 0 250px orange;
}

p {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -35%);
}

VIEW:

Example 2:

The clip-path parameter specifies which section of an element should be shown. It can be combined with the polygon() method to form a notched corner (or complex shapes).

HTML:

<html>
  <body>
    <div class="notched-corner">
      <p>Notched Corners</p>
    </div>
  </body>
</html>

CSS:

div.notched-corner {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
  background: orange;
  clip-path: polygon(
    0 10%,
    10% 0,
    90% 0,
    100% 0%,
    100% 90%,
    90% 100%,
    0% 100%,
    0% 90%,
    0% 10%
  );
}

p {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -35%);
  font-size: 32px;
}

VIEW:

Conclusion

In this article, we discussed numerous approaches for building different sorts of corners utilizing CSS features like border-radius, pseudo-elements, box-shadow, clip-path, and many others. With this information, you can construct a variety of visually appealing and inviting designs for your websites or web applications.

Docker Swarm vs. Kubernetes - DevOps Guide

Necati Özmen — Thu, 28 Mar 2024 12:16:34 +0000

Introduction

In the container world, Kubernetes is probably the most famous platform. However, It has some strong contenders, one of which is Docker Swarm. As indicated by its name, it is by none other than the Docker itself. You can say that Docker swarm is the orchestration tool for Docker by Docker. In this article, we will present a detailed comparison between both Docker swarm and Kubernetes.

By the end of this article, you will have strong knowledge to select the best container orchestrator tool for your needs.

Steps we'll cover in this article:

What is Docker Swarm?
What is Kubernetes?
Key Features of Kubernetes
- Docker Swarm vs Kubernetes: A Comparative Analysis
When to use Docker Swarm
When to use Kubernetes

What is Docker Swarm?

Docker Swarm, at its core, is a container orchestration tool. It’s a product of Docker, a company that’s been a trailblazer in the containerization space. Docker Swarm allows you to manage multiple containers deployed across multiple host machines.

But why does this matter, you ask? In the world of microservices and scalable applications, Docker Swarm is akin to the conductor of an orchestra, ensuring each container (or instrument, if you will) performs its part in harmony with the others.

Key Features of Docker Swarm

Docker Swarm is not without its unique selling points. Here are some of its key features:

User-friendly: Docker Swarm is renowned for its simplicity. It integrates seamlessly with the existing Docker API, making it a natural choice for teams already using Docker containers.
Scalaing capabilities: Docker Swarm allows you to scale up or down with ease, making it a great choice for applications that need to handle varying loads.
Load balancing: Docker Swarm has built-in load balancing to distribute tasks evenly across a Swarm.
Rolling updates: This feature allows you to roll out updates incrementally, reducing the risk of a system-wide failure.

Advantages

Simplicity: Docker Swarm’s ease of use is a significant advantage, especially for teams new to container orchestration.
Integration: If you’re already using Docker, Docker Swarm integrates beautifully, allowing you to leverage your existing knowledge and tools.
Speed: Docker Swarm is known for its speed. It can deploy containers faster than some of its competitors.

Challenges

Limited Functionality: Compared to some other orchestration tools (like Kubernetes), Docker Swarm has fewer features. It’s a simpler tool, which can be a pro or a con depending on your needs.
Less Community Support: While Docker Swarm has a community, it’s not as large or active as Kubernetes’. This can make finding help and resources more challenging.

What is Kubernetes?

Kubernetes, often shortened to K8s, is a platform that helps manage containers.

Key Features of Kubernetes

Kubernetes has some cool features that make it a top choice for managing containers:

Scaling: Kubernetes can easily adjust the number of containers based on the need. It’s like having a team that can quickly grow or shrink.
Load Balancing: Kubernetes can spread tasks evenly across all the containers. It ensures no single container is overworked.
Health Checks: Kubernetes keeps an eye on all containers. If one is not working right, Kubernetes can replace it with a new one.
Rolling Updates & Rollbacks: Kubernetes can update containers one by one. If something goes wrong, it can also undo the updates.

Advantages

Feaur rich: Kubernetes has built-in features for auto scaling, load balancing, etc.
Popular: It is used by the vast majority of companies for their container load management. This means it’s easier to find help and resources online.
Flexible: Kubernetes can work with many different types of containers, not just Docker.

Disadvantages

Learning curve: Kubernetes can be hard to learn. Setting up and maintaining is cluster requires strong expertise.
Resource intensive: Kubernetes can use a lot of computer resources. It’s not the best choice for small projects.

Docker Swarm vs Kubernetes: A Comparative Analysis

Installation and Set-up: Ease of Use in Docker Swarm vs Kubernetes

Docker Swarm: Installing Docker Swarm proves straightforward. If you're familiar with Docker commands, initiating a Swarm mode requires a few additional steps. It integrates with the existing Docker CLI, and you activate it with a simple docker swarm init. This ease makes it appealing for developers who need to quickly set up an orchestration environment.

Kubernetes: On the other side, setting up Kubernetes involves more steps. You must choose among various tools like kubeadm, Minikube, or Kubernetes Operations (kops). Despite detailed guides, the process is more involved, especially when configuring a production-ready cluster. Kubernetes demands more from the onset, but its setup scripts and community resources aim to streamline this complexity.

Scalability: How Docker Swarm and Kubernetes Handle Growth

Docker Swarm: Swarm handles scaling in an uncomplicated manner. You scale services with a simple command, docker service scale <service-id>=<number-of-replicas>. It's direct and works well within the confines of smaller, less complex deployments.

Kubernetes: Kubernetes approaches scalability with a more intricate system. It uses controllers like ReplicationControllers, Deployments, or ReplicaSets to manage pod scaling. This complexity grants fine-grained control and robustness, allowing Kubernetes to scale massively and efficiently.

High availability

Docker Swarm
Swarm's high availability is built into its core. The platform automatically redistributes containers if a node fails, striving to maintain the desired state without manual intervention.

Kubernetes
Kubernetes offers high availability at both the master and node levels. It uses a multi-master setup, which is more complex to configure but ensures that the system can withstand the failure of any single node or even multiple nodes.

Networking

Docker Swarm
Swarm uses an overlay network for services to communicate across different nodes. This model is simple to understand and implement, providing out-of-the-box encryption for Swarm services.

Kubernetes
Kubernetes networking is more flexible and configurable. It doesn’t natively dictate a single method for inter-container communication, instead allowing you to integrate with various network plugins and solutions. This flexibility, however, requires more setup and understanding.

Storage

Docker Swarm
Swarm provides basic volume management. You can create named volumes or bind mount host directories to containers. However, it does not natively support advanced features like persistent storage across multiple hosts.

Kubernetes
Kubernetes excels with its sophisticated storage options. It supports persistent volumes that are independent of pod lifecycle, dynamic volume provisioning, and storage classes, providing a more robust solution for stateful applications.

Community Support

Docker Swarm
Swarm’s community is part of the larger Docker community. While there are resources and discussions available, they are less extensive when compared to Kubernetes. The focus within the Docker community may not always center on Swarm, as there are many Docker-native topics discussed.

Kubernetes
The Kubernetes community is vast and active. It has a wealth of documentation, forums, special interest groups, and meetups. This extensive community support translates into a plethora of resources for troubleshooting, plugins, extensions, and best practices.

Comparison summary table

Below you can find a comparison table summarizing the features of Docker Swarm and Kubernetes.

Feature	Docker Swarm	Kubernetes
Installation	Straightforward; integrates with Docker CLI. Simple `docker swarm init` command to start.	More steps involved; requires tools like kubeadm, Minikube, or kops.
Scalability	Simple scaling with a single command. Good for smaller deployments.	Complex but fine-grained control. Supports massive and efficient scaling.
High Availability	Built-in high availability with automatic redistribution of containers.	High availability at master and node levels with a multi-master setup.
Networking	Overlay network for inter-service communication. Simple and encrypted by default.	Flexible and configurable with various network plugins and solutions. Requires more setup.
Storage	Basic volume management, but lacks advanced features like persistent storage across hosts.	Advanced storage options with persistent volumes, dynamic provisioning, and storage classes.
Community Support	Part of the larger Docker community, with fewer resources focused on Swarm.	Vast and active community with extensive resources and discussions focused on Kubernetes.

When to use Docker Swarm

Docker Swarm shines in scenarios where simplicity and fast deployment are top priorities. For small to medium-sized projects, or for development teams taking their first steps into container orchestration, Swarm offers a gentle introduction. You might favor Docker Swarm when you have a handful of services to manage and you need to get them up and running quickly without a steep learning curve.

It's well-suited for applications that require rapid scaling and where intricate, custom orchestration rules are not necessary. If your team is already comfortable with Docker commands and you wish to avoid the complexity of Kubernetes, Swarm is a sensible choice.

Consider Swarm when your project fits these points:

Speed of deployment is critical.
The scale of operations is moderate, not extending to many thousands of nodes.
The existing team has experience with Docker and desires minimal additional learning.
The project does not demand complex orchestration features.

When to use Kubernetes

Kubernetes is designed to address the needs of applications with more complex orchestration requirements. It is the go-to for large-scale, production-grade deployments that need to manage multiple complex services with high availability and intricate networking. Kubernetes excels when you require a robust ecosystem with a vast array of plugins, community support, and enterprise features. It's built to manage stateful applications with sophisticated storage needs and to handle a substantial amount of workloads efficiently.

Kubernetes is ideal for scenarios like:

Large-scale deployments spread across hundreds or thousands of nodes.
Systems that require high availability, autoscaling, and self-healing features.
Projects that benefit from a rich ecosystem of tools and community support.
Environments where the complexity of services demands advanced orchestration and scheduling capabilities.

Conclusion

In this article, we went through the comparison of both Docker Swarm and Kubernetes. Kubernetes is the best choice if you have an enterprise application and high scalability needs with a skillful team of DevOps engineers. Docker Swarm is better for medium to large organizations looking for a simpler solution without the steep learning curve associated with mastering Kubernetes.

Eventually, it will be your business and technical needs that will derive the decision to choose the best container orchestrator for your application.

10 Methods for Vertical Alignment Using CSS

Necati Özmen — Wed, 27 Mar 2024 09:40:17 +0000

Introduction

Vertically aligning HTML contents in CSS has always been a herculean task and has been described by many web developers as tricky to implement. However, modern CSS has made available a number of ways to vertically align HTML contents easily. Content alignment has never been easier at this time, and in this article, we'll look at different techniques to vertically align HTML content using CSS.

Vertical alignment using margins

Margins in CSS are used to generate space around the borders of contents.
Here are examples on how to easily vertically align contents with margins.

Example

Using the CSS property margin:auto, You can vertically and horizontally align HTML contents to the center. However, this is possible only when the following conditions are met:

The parent element should have a given height.
The child element should have a specified height.
The parent element should have either a display of flex or grid.

A sample of this can be displayed below:

HTML CODE:

<html>
  <body>
    <section class="parent-element">
      <div class="child-element">The text is here!</div>
    </section>
  </body>
</html>

CSS CODE:

.parent-element {
  display: [flex or grid];
  height: 500px;
  border: 1px solid #000;
}

.child-element {
  margin: auto;
}

Vertical alignment with Flexbox

Flexbox is a CSS3 layout module that aims to simplify the process of designing flexible, responsive layout structures without the need for positioning or float. Unlike some other CSS frameworks, it is orientation agnostic and lets you automatically align and resize containers based on the height and width of the screen.

Here are examples on how to effortlessly vertically align contents with flexbox.

Example 1

With the CSS properties display: flex, align-items: center and justify-content: space-around, we can vertically and horizontally align HTML contents.

HTML CODE:

<html>
  <body>
    <div class="nav">
      <div class="nav-item">Home</div>
    </div>
  </body>
</html>

CSS CODE:

.nav {
  display: flex;
  justify-content: space-around; /* aligns the items horizontally */
  align-items: center; /* aligns the items vertically */
  height: 100px;
  background-color: #333;
  color: #fff;
}

Example 2:

With the CSS properties display: flex, align-items: center and justify-content: center, we can also vertically align HTML contents.
We will update the first example CSS code to show this:

CSS CODE:

.nav {
  display: flex;
  height: 100px;
  background-color: #333;
  color: #fff;
  justify-content: center; /* aligns the items horizontally */
  align-items: center; /* aligns the items vertically */
}

Vertical alignment using CSS Grid.

The CSS Grid Layout Module provides a two dimension grid-based layout system with rows and columns, allowing you to design web pages with ease.

Here are examples on how to effortlessly vertically contents with flexbox.

Example 1:

With the CSS properties display: grid, align-items: center and justify-content: center, we can also vertically align HTML contents.

HTML CODE:

<html>
  <body>
    <div class="grid">
      <div class="item">Centered Item</div>
    </div>
  </body>
</html>

CSS CODE:

.grid {
  display: grid;
  height: 97vh;
  justify-content: center; /* aligns the items horizontally */
  align-items: center; /* aligns the items vertically */
  border: 1px solid #000;
}

.item {
  font-size: 20px;
}

Example 2:

With the CSS properties display: grid, place-items: center (which is a combination of align-items: center and justify-content: center), we can also vertically align HTML contents.

We will update the CSS code of the first example to show this:

CSS CODE:

.grid {
  display: grid;
  height: 97vh;
  place-items: center; /* aligns the items vertically and horizontally */
  border: 1px solid #000;
}

.item {
  font-size: 20px;
}

Example 3:

With the CSS properties display: grid, align-self: center, we can also vertically align HTML contents.

We will update the CSS code of the first example to show this:

CSS CODE:

.grid {
  display: grid;
  height: 97vh;
  border: 1px solid #000;
}

.item {
  align-self: center; /* aligns the items vertically only */
  font-size: 20px;
}

Vertical alignment using table display (display: table)

Tables are a common and useful tool for displaying data on websites and web applications. It was the common method of presenting information in rows and columns before to the introduction of modules like flex and grid.

Here are examples on how to vertically align contents with tables.

Example:

Using the CSS property display: table, display: table-cell, vertical-align: middle, You can vertically align contents to the center. However, this is possible only when the following conditions are met:

The parent element must have the display: table property.
When the parent element must have a given height.
The child element must have the display: table-cell property.
The child element must have the vertical-align: middle property.

A sample of this can be displayed below:

HTML CODE:

<html>
  <body>
    <div class="parent-element">
      <div class="child-element">Center text!</div>
    </div>
  </body>
</html>

CSS CODE:

.parent-element {
  display: table; /* table display*/
  height: 50vh;
  width: 100%;
  border: 1px solid black;
}

.child-element {
  display: table-cell; /* table-cell display*/
  vertical-align: middle; /* vertical align*/
  text-align: center;
}

Vertical alignment using absolute positioning (position: absolute)

The position CSS property specify how an element is positioned in a document. Positioned elements' final positioning is determined by their top, right, bottom, and left properties.

We could use these positioning properties to vertically align contents.

Example:

Using the CSS properties position: relative and position; absolute and margin; auto, You can vertically align contents to the center. However, this is possible only when the following conditions are met:

The parent element must have the position: relative property. This is to ensure that the positioning of the element occurs solely within the parent container and does not extend outside it.
The parent element should have a specified height.
The child element must have the position: absolute property
The child element should have the positioned properties: top: 0; bottom: 0; left: 0; right: 0;
The child element should have a specified height as well.

HTML CODE:

<html>
  <body>
    <div class="parent-element">
      <div class="child-element">Center text!</div>
    </div>
  </body>
</html>

CSS CODE:

.parent-element {
  position: relative;
  height: 50vh;
  border: 1px solid black;
}

.child-element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 20px; /* requires explicit height*/
  border: 1px solid black;
  text-align: center;
}

Vertical alignment using css transforms

The translate() CSS property repositions an element in both horizontal and vertical directions.

We will give examples on how to use the translate property.

Example 1

Using the CSS properties position: relative and position; absolute and transform: translate(-50%, -50%), You can vertically and horizontally align contents to the center. This has been a popular way to vertically align contents. However this is possible only when the following conditions are met:

The parent element must have the position: relative property.
The parent element should have a specified height.
The child element must have the position: absolute property.
The child element should have the positioned properties: top: 50%; left: 50%;.
The child element should have the translate property: transform: translate(-50%, -50%);. This property repositions the child element to fit into the center of the parent element.

HTML CODE:

<html>
  <body>
    <div class="parent-element">
      <div class="child-element">Center text!</div>
    </div>
  </body>
</html>

CSS CODE:

.parent-element {
  position: relative;
  height: 50vh;
  border: 1px solid black;
}

.child-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Example 2

We can vertically align items only using the CSS properties position: relative and position; absolute and transform: translateY(-50%),

We will update the CSS code of the first example to show this:

CSS CODE:

.parent-element {
  position: relative;
  height: 50vh;
  border: 1px solid black;
}

.child-element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Vertical alignment using line-height

The line-height CSS property specifies the height of a line box. It's widely used to specify the spacing between lines of text. On block-level elements, it sets the minimum height of line boxes within them. On non-replaced inline items, it defines the height used to compute the line box height.

We will give examples on how to use the line-height property to vertically align contents.

Example:

Using the CSS properties line-height: [lineheight value] and height: [height value], You can vertically align HTML contents to the center. However this is possible only when the following conditions are met:

The parent element should have a specified height.
The child element must have the line-height property.
The height of the parent element must be equal to the line-height of the child element.

HTML CODE:

<html>
  <body>
    <div class="parent-element">
      <div class="child-element">Center text!</div>
    </div>
  </body>
</html>

CSS CODE:

.parent-element {
  height: 100px;
  background-color: #333;
}

.child-element {
  line-height: 100px;
  padding: 0 10px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

Vertical alignment using inline display (display: inline) and vertical-align: middle

The CSS's vertical-align attribute specifies how elements on a line are aligned. This property works to aligning inline elements only (and not block elements).

Example:

In this example, with the inline display and the vertical-align property, You can vertically align contents to the center. However this is possible only when the following conditions are met:

The parent element should have a specified line-height. We do this to increase the line box so that the vertical-align property uses to align the contents in the middle of that line-box.
The child element must have the vertical-align property.

HTML CODE:

<html>
  <body>
    <div>
      <a href="#">Some link</a>
      <span>Some text</span>
    </div>
  </body>
</html>

CSS CODE:

div {
  background: #fff;
  margin: 10px;
  line-height: 200px;
  border: 1px solid #000;
}
div > * {
  vertical-align: middle;
  line-height: normal;
}
a {
  background-color: red;
  color: white;
  height: 20px;
  border: solid 1px #666;
  padding: 5px;
}

Vertical alignment using inline-block display (display: inline-block) and vertical-align: middle

In this example, with the inline-block display and the vertical-align property, You can vertically align contents to the center.

Example:

HTML CODE:

<html>
  <body>
    <div class="parent-element">
      vertical align middle:
      <div class="child-element"></div>
    </div>
  </body>
</html>

CSS CODE:

.parent-element {
  padding: 30px 10px;
  border: 1px solid;
}

.child-element {
  vertical-align: middle;
  display: inline-block;
  background: fuchsia;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

Vertical Alignment using “before” pseudo-element and vertical-align: middle

This type of alignment is usually called the ghost element alignment. This alignment employs using the inline-block display property on a ghost (pseudo) element of the parent element, inherits the parent's element full height, then sets the vertical-align: middle property for both thepseudo-element of the parent element and the child element.

Example:

HTML CODE:

<html>
  <body>
    <div class="parent-element">
      <p>Child of parent element with pseudo ghost element</p>
    </div>
  </body>
</html>

CSS CODE:

.parent-element {
  background: #fff;
  width: 240px;
  height: 200px;
  margin: 15px;
  color: #fff;
  resize: vertical;
  overflow: auto;
  padding: 20px;
  border: 1px solid #000;
  position: relative;
}
.parent-element::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.parent-element p {
  display: inline-block;
  vertical-align: middle;
  width: 190px;
  margin: 0;
  padding: 10px;
  background: #83d483;
}

Conclusion

In this article, we examined some CSS techniques for vertical alignment of contents. Using these techniques will make it easy to align contents vertically on your webpages or web applications.

Kubectl Scale - DevOps Guide

Necati Özmen — Mon, 25 Mar 2024 10:56:20 +0000

Introduction

Understanding Kubernetes Workloads

In Kubernetes, we deal with several types of workloads, each serving a unique purpose. Let's dive into what these are and how kubectl scale can be applied to manage them.

Deployments

Imagine Deployments as managers for your application instances. They ensure that a specified number of these instances, known as Pods, are running at any given time. Using kubectl scale, you can tell Kubernetes to increase or decrease the number of Pods in a Deployment.

StatefulSets

StatefulSets are like Deployments but with a memory. They're used when your application needs to remember its state (like a database). You can also scale StatefulSets with kubectl scale, adjusting the number of replicas while maintaining their unique identities and storage.

ReplicaSets

ReplicaSets are the workforce behind Deployments. They make sure the right number of Pod replicas are running. Though usually managed by Deployments, you can directly scale ReplicaSets using kubectl scale if needed.

DaemonSets

DaemonSets ensure that each node in your Kubernetes cluster runs a copy of a Pod. It's like having a utility software installed on every computer in an office. Scaling DaemonSets is a bit different. Instead of changing the number of Pods, scaling here typically involves adding or removing nodes from the cluster.

Understanding these workloads and how to scale them efficiently is crucial in Kubernetes. It ensures your applications have the resources they need when they need them, and also that you're not using more resources than necessary. Whether it's handling peak traffic times or scaling down during quieter periods, kubectl scale gives you the flexibility to manage your application's demands effectively.

Basic Scaling with kubectl scale

Managing your Kubernetes resources effectively means needing to adjust their scale to accommodate different loads or requirements. This is where the kubectl scale command comes into play, offering a straightforward way to change the number of replicas of a resource.

Syntax and Usage

The basic syntax for scaling a resource is:
kubectl scale --replicas=<number> <resource-type>/<resource-name>

This command allows you to specify the desired number of replicas for a particular resource, such as a Deployment or ReplicaSet.

Practical Example

Consider you have a Kubernetes deployment named printing that has currently just one replica. We will use the command kubectl get deployment <deploymentName> to currently serve replicas. Notice the value in the "available" column, which shows the current replica count available to serve. That is currently 1.

Now you want to scale it to 3 replicas. Here's how you would do it:
kubectl scale --replicas=3 deployment/printing

As you can see from above srcreenshot, this command has increased the number of replicas for printing deployment to 3.

Expert tips:

Do not confuse replica with pod; they are both different. Replica is the desired number of running pods whereas the pods are the actual running instances of an application. A deployment with 3 replicas might have 2 running pods if one pod is being unhealthy.
Use the --dry-run flag to simulate the scaling command without actually applying the changes. It is helpful when you want to confirm the command syntax, your access rights, the name of the deployment, etc.

Advanced Scaling Options in Kubectl

A. Conditional Scaling

Conditional scaling in Kubectl allows you to scale resources based on current states. It's like saying, "If there are 'X' replicas now, change it to 'Y' replicas."

Use the command: kubectl scale --current-replicas=<number> --replicas=<new-number> <resource>.

Note that the resource here can refer to any of the deployment types mentioned workloads above, e.g., deployment, replica sets, stateful sets, etc.

Let's try this command. In our example, we will use the "deployment" resource.

kubectl scale --current-replicas=3 --replicas=5 deployment/printing So this command should increase the replicas to 5, right?

What do you think what happened? The scaling operation failed. And this is the difference between this command (conditional scaling) and the simple non-conditional scaling command we discussed above. The conditional scaling command verifies whether you have specified the current replica count correctly or not. If incorrect, it will not scale. This is contrary to the simple non-conditional scaling command that will scale the replicas to the desired number regardless of the current replica count. Let's correct the command and try again. As you can see below, it worked fine this time.

B. Scaling Multiple Resources

Sometimes, you would like to scale multiple resources simultaneously, e.g., scaling two deployments at the same time, like one for API and one for the front end.

You can use the command: kubectl scale --replicas=<number> deployment/<deployment1> deployment/<deployment2>. In our example we have two deployments named printing. You can use the command kubectl get deployments to confirm the name of your deployments. Let's scale both of these in the same command.

kubectl scale --replicas=3 deployment/hello-app deployment/printing

The above screenshots show that both deployments were scaled successfully.

Expert tips:

You can scale more than two deployments in the same command; just use the same format as above.
If you specify two deployments to scale, but the name of one of the deployments is incorrect, the deployment with the correct name will scale successfully, but the other one with the incorrect name will fail, and you will see its error, too. See the screenshot below for an example.

Automated Scaling vs. Manual Scaling

Horizontal Pod Autoscaler (HPA)

Automated scaling in Kubernetes is primarily handled by the Horizontal Pod Autoscaler (HPA). HPA automatically adjusts the number of pods in a deployment, replica set, or stateful set based on observed CPU utilization or other select metrics. It's like having a smart assistant that keeps an eye on your application's load and adjusts resources accordingly without any manual intervention.

To set up HPA, you can use below command:
kubectl autoscale deployment [deployment-name] --min=[min-pods] --max=[max-pods] --cpu-percent=[target-percentage]

This command tells Kubernetes to keep the number of pods between the minimum and maximum limits, scaling up or down based on CPU usage. Let's look at the example below:

kubectl autoscale deployment hello-app --min=2 --max=5 --cpu-percent=80

In the above example, 80% is the target average CPU utilization across all pods in the deployment. When the average CPU utilization exceeds this threshold, Kubernetes will add more pods (not more than 5 which is max). When the average CPU utilization falls below this threshold, Kubernetes will remove pods (not less than 2, which is the minimum).

Expert tip: The scope of this article's scaling options is limited to horizontal scaling. Kubernetes also allows to do vertical scaling. Just like HPA (horizontal pod autoscaler), there is VPA (vertical pod autoscaler) too. Depending on your need, you can utilize vertical pod autoscaler too (a topic for some other day perhaps).

When to Use Manual Scaling

Specific Event-Driven Scenarios: If you know there will be a spike in traffic (like a sale or an event), you can proactively scale up.
Testing and Development: In development environments, you might need to test the behavior of your application under different loads, e.g., load testing, etc.

Conclusion

This article provided a comprehensive overview of kubectl scale, a crucial tool for managing Kubernetes workloads. We explored different scenarios to scale your Kubernetes replica/nodes. We also explored advanced scaling options like conditional scaling, scaling multiple resources simultaneously, and automated scaling using Horizontal Pod Autoscalers (HPA). Finally, we discussed the pros and cons of manual scaling versus automated scaling and potential scenarios where each might be beneficial.

Author: Muhammad Khabbab

Introduction to Chakra UI

Necati Özmen — Fri, 22 Mar 2024 12:22:27 +0000

Introduction

Chakra UI has attracted a lot of attention over the years due to its versatility, ease of use, and customizable approach to integrating into any front-end application.

In this article, we’ll look at how Chakra UI can help developers implement a fluid design with its simple configurations.

What is Chakra UI?

Chakra UI is a comprehensive library of React components made to make creating user interfaces easier. Chakra UI differs from traditional libraries in that it provides a distinct set of movable elements that put simplicity and adaptability first.

Without compromising their ability to customize designs to meet the demands of individual projects, developers can create sleek, modern interfaces with Chakra UI.

From buttons and forms to navigation elements, the library offers a wide range of pre-designed components that ensure developers can get started quickly while still allowing for extensive customization.

Standout Features of Chakra UI

We'll do a practical application in this section.

Components

Developers nowadays don't have the luxury of time to create components like overlays, disclosure, forms, layouts, and many more. Using components in applications is made simple right out of the box with a UI library like Chakra UI.

Consider the following scenario: you have a limited amount of time to develop fundamental components like Slider, and your team needs to release features in batches. It will be intimidating to write the entire logic from scratch.

Slider

Users can choose from a variety of values by using the Slider. The Slider component is useful in scenarios where you have a variety of options on a page and you want the user to choose a specific value and then use that value to perform additional actions. Under the hood, Chakra UI handles stress by providing you with only one state.

Create the components subfolder by going to the src folder. To use the code below, create a Slider.tsx file and copy and paste it.

"use client";

import {
  Box,
  Slider,
  SliderFilledTrack,
  SliderMark,
  SliderThumb,
  SliderTrack,
  Text,
} from "@chakra-ui/react";
import { useState } from "react";

export const SliderComp = () => {
  const [sliderValue, setSliderValue] = useState(50);

  const labelStyles = {
    mt: "2",
    ml: "-2.5",
    fontSize: "1.5rem",
  };

  return (
    <Box>
      <Text fontSize="2rem">1. Slider Component</Text>
      <Box py="2rem">
        <Slider
          aria-label="slider-comp"
          onChange={(val) => setSliderValue(val)}
        >
          <SliderMark value={0} {...labelStyles}>
            0%
          </SliderMark>
          <SliderMark value={50} {...labelStyles}>
            50%
          </SliderMark>
          <SliderMark value={100} {...labelStyles}>
            100%
          </SliderMark>
          <SliderTrack>
            <SliderFilledTrack bg="brand.green100" />
          </SliderTrack>
          <SliderThumb />
        </Slider>
        <Text mt="4rem" fontWeight="700">
          Selected Value: {sliderValue}%
        </Text>
      </Box>
    </Box>
  );
};

The code above controls how the user interacts with the slider by retaining the states of each selected percentage. The useState listens for changes around the Slider and then displays the selected value to the user.

Then, in the app folder, copy and paste this code into the page.tsx.

import { SliderComp } from "@/components/Slider";
import { Box } from "@chakra-ui/react";

const Home = () => {
  return (
    <Box bg="brand.white200" p="3rem">
      <SliderComp />
    </Box>
  );
};
export default Home;

This calls the SliderComp and displays it on the browser.

The output can be seen below.

Stepper

Stepper is most commonly found in form applications, data collection, and onboarding processes. It is a widely used component because it provides a smooth user experience.

It's also a new feature in Chakra UI due to its high demand, revealing that creating such a component from scratch is a lot of work because one will end up with a lot of states(previous and current) to maintain in an application.

Navigate to the components folder and create a Stepper.tsx file. Copy and paste the code below.

import {
  Box,
  Button,
  Flex,
  Stack,
  Step,
  StepIcon,
  StepIndicator,
  StepSeparator,
  StepStatus,
  Stepper,
  Text,
  useSteps,
} from "@chakra-ui/react";
import { useState } from "react";

const ContactInfo = () => {
  return (
    <Box py="2rem">
      <Text>I'm Samuel Ogunleye.</Text>
      <Text>
        Frontend Engineer, as well as a Technical Writer. A big fan of
        open-source software.
      </Text>
    </Box>
  );
};

const Stacks = () => {
  return (
    <Box>
      <Text py="2rem">
        I love JavaScript, TypeScript, and Next.js – all aspects of frontend
        development!
      </Text>
    </Box>
  );
};

const Final = () => {
  return (
    <Box>
      <Text py="2rem">Any other information?</Text>
    </Box>
  );
};

const steps = [
  { title: "Contact", description: ContactInfo },
  { title: "Stacks", description: Stack },
  { title: "Final", description: Final },
];

export const StepperComp = () => {
  const { activeStep } = useSteps({
    index: 1,
    count: steps.length,
  });

  const [currentStep, setCurrentStep] = useState<number>(activeStep);

  const handleNextClick = () => {
    setCurrentStep((prevStep) => (prevStep < 3 ? prevStep + 1 : prevStep));
  };

  const handlePreviousClick = () => {
    setCurrentStep((prevStep) => (prevStep > 1 ? prevStep - 1 : prevStep));
  };

  return (
    <Box mt="5rem">
      <Text fontSize="2rem">2. Stepper Component</Text>
      <Stack py="2rem">
        <Stepper size="lg" colorScheme="green" index={currentStep} gap="2rem">
          {steps.map((step, idx) => {
            return (
              <Step key={idx}>
                {step.title}
                <StepIndicator>
                  <StepStatus complete={<StepIcon />} />
                </StepIndicator>
                <StepSeparator />
              </Step>
            );
          })}
        </Stepper>
        <Box>
          {currentStep === 1 ? (
            <ContactInfo />
          ) : currentStep === 2 ? (
            <Stacks />
          ) : (
            <Final />
          )}
        </Box>

        <Flex columnGap="2rem">
          <Button
            onClick={handlePreviousClick}
            bg="brand.green100"
            color="brand.white100"
            fontSize="1.3rem"
            py="1.8rem"
            cursor={currentStep === 1 ? "not-allowed" : "pointer"}
          >
            Previous
          </Button>

          <Button
            onClick={handleNextClick}
            bg="brand.green100"
            color="brand.white100"
            fontSize="1.3rem"
            py="1.8rem"
            cursor={currentStep === 3 ? "not-allowed" : "pointer"}
          >
            Next
          </Button>
        </Flex>
      </Stack>
    </Box>
  );
};

ContactInfo, Stacks, and Final components contain basic information about a user that will be dynamically rendered inside the StepperComp component.

StepperComp: This is the main component that contains all of the minor components (ContactInfo, Stacks, and Final). It is the component that will be exported to the page.tsx file within the app folder in order to be rendered to the browser.

useSteps: useSteps has a built-in state that keeps track of all the logic for us.

useState: An additional state was added to handle the Previous and Next buttons, allowing the user to navigate through each stepper information that is used inside the handlePreviousClick and handleNextClick functions.

steps: This variable stores each Stepper's data and is dynamically rendered based on the currentStep state.

The output can be seen below.

Building a stepper component from scratch can be a real headache. The complexity of handling various states makes it a difficult task to create a custom solution tailored to your needs.

With Chakra UI, you get the flexibility to leverage and extend existing components that seamlessly handle all the complicated logic behind the scenes.

Hooks

If you've been coding for a while and have encountered the complexity of React logic firsthand, especially dealing with operations within classes, you'll truly appreciate the revolutionary introduction of React hooks.

With the increasing shift from classes to hooks, UI libraries like Chakra UI have made writing logic a breeze. Let’s explore some of the available hooks in Chakra UI.

useClipboard

This is a hook that allows a user to copy any content to the clipboard.

Let's use our Slider component once more. Remember that there is a state that keeps track of how the user selects any value on the Slider. Let's now add the ability to copy the selected stored value to the clipboard.

Navigate to the components folder and create a SliderWithClipboard.tsx file. Copy and paste the code below.

"use client";

import {
  Box,
  Button,
  Editable,
  EditableInput,
  EditablePreview,
  Flex,
  Slider,
  SliderFilledTrack,
  SliderMark,
  SliderThumb,
  SliderTrack,
  Text,
  useClipboard,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";

export const SliderWithClipboardComp = () => {
  const [sliderValue, setSliderValue] = useState(50);
  const { onCopy, setValue, hasCopied } = useClipboard("");

  const labelStyles = {
    mt: "2",
    ml: "-2.5",
    fontSize: "1.5rem",
  };

  useEffect(() => {
    setValue(String(`${sliderValue}%`));
  }, [sliderValue, setValue]);

  return (
    <Box mt="5rem">
      <Text fontSize="2rem">3. Slider With Clipboard Component</Text>
      <Box py="2rem">
        <Slider
          aria-label="slider-comp"
          onChange={(val) => setSliderValue(val)}
        >
          <SliderMark value={0} {...labelStyles}>
            0%
          </SliderMark>
          <SliderMark value={50} {...labelStyles}>
            50%
          </SliderMark>
          <SliderMark value={100} {...labelStyles}>
            100%
          </SliderMark>
          <SliderTrack>
            <SliderFilledTrack bg="brand.green100" />
          </SliderTrack>
          <SliderThumb />
        </Slider>
        <Flex mt="4rem" columnGap="1rem">
          <Text fontWeight="700">Selected Value: {sliderValue}%</Text>
          <Button
            fontSize="1.5rem"
            bg="brand.green100"
            color="brand.white100"
            onClick={onCopy}
          >
            {hasCopied ? "Copied!" : "Copy"}
          </Button>
        </Flex>
        <Editable placeholder="Paste here" mt=".5rem">
          <EditablePreview
            border="1px solid"
            borderColor="brand.green100"
            borderRadius="1rem"
            p=".5rem 1rem"
            w="10%"
          />
          <EditableInput _focus={{ boxShadow: "none" }} />
        </Editable>
      </Box>
    </Box>
  );
};

To achieve the copy functionality, the useClipboard hook was added to the existing Slider component. It provides properties destructured from the useClipboard hook, such as setValue, onCopy, and hasCopied.

The setValue function is used within a useEffect to track and set the current sliderValue whenever a change occurs.

The Editable component previews what was copied from the clipboard.

The output can be seen below.

useDisclosure

This is another type of hook that helps in triggering the action of modals. It is very simple to use because it makes use of readily available components that handle everything under the hood for us.

Creating modals without using prebuilt components involves tracking several user events.

Navigate to the components folder and create a Disclosure.tsx file. Copy and paste the code below.

"use client";

import {
  Box,
  Button,
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerHeader,
  DrawerOverlay,
  Text,
  useDisclosure,
} from "@chakra-ui/react";

export const DisclosureComp = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <Box mt="5rem">
      <Text fontSize="2rem">4. Disclosure Component</Text>
      <Button
        onClick={onOpen}
        fontSize="1.3rem"
        bg="brand.green100"
        color="brand.white100"
        p="1.8rem 2rem"
        mt=".5rem"
      >
        View Profile
      </Button>
      <Drawer placement="bottom" onClose={onClose} isOpen={isOpen}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader
            borderBottomWidth=".2rem"
            borderBottomColor="brand.green100"
            fontSize="1.8rem"
          >
            Basic Information
          </DrawerHeader>
          <DrawerBody py="2rem">
            <Text>Name: Samuel</Text>
            <Text py="1rem">Title: Frontend Engineer</Text>
            <Text>Language: JavaScript, TypeScript</Text>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </Box>
  );
};

The code above returns three values: isOpen which indicates whether the modal is open, onOpen which indicates a function to open the modal, and onClose which indicates a function to close the modal.

The Drawer component handles the rest of the display because it has some logic attached to it that works behind the scenes. This handles some heavylifting that users ought to do.

The output can be seen below.

useTheme

This hook provides you with the ability to alter the theme object. There may be times when you need to change the colors or fonts in an application on a global scale; the theme object allows you to customize to your needs.

Navigate to the components folder and create a Theme.tsx file. Copy and paste the code below.

"use client";

import { Box, Text, useTheme } from "@chakra-ui/react";

export const ThemeComp = () => {
  const theme = useTheme();
  // console.log("theme", theme);

  const customStyle = {
    background: theme.colors.black,
    color: theme.colors.brand.white100,
    fontSize: theme.fontSizes.lg,
  };

  return (
    <Box mt="5rem">
      <Text fontSize="2rem">5. Theme Component</Text>
      <Box
        py="2rem"
        bg="brand.green100"
        color="brand.white100"
        p="1rem"
        rounded="lg"
        // style={customStyle}
      >
        <Text>This text is styled using the color from the theme.</Text>
        <Text py="2rem">
          This text is styled using the color from the theme.
        </Text>
        <Text>This text is styled using the color from the theme.</Text>
      </Box>
    </Box>
  );
};

The console.log in the above code displays all of the application's configurations. It provides complete access to what your application entails. Take a look at the console.log result below.

The customStyle variable is used to modify our app's existing configurations. Look at the output below before making any changes.

Now, let's uncomment the styles prop - styles={customStyle} and look at the new output below.

The background color, the text color, and the font size have all been modified.

Doesn't it look good? That's the power of the useTheme hook!

Theming

Theming is an important aspect of an application; it can be referred to as the application's design system because it involves you having configurations for fonts, colors, and anything else you can think of.

Creating and Customizing Themes:

We'll take a hands-on approach here, demonstrating how to create and customize Chakra UI themes. In our application, we'll be changing the colors and typography.

This configuration structure may differ depending on the developers' knowledge of code architecture.

Navigate to styles folder and you'll see that the configuration was done when you cloned the repo at the start of the application.

globals.css is a file in the styles folder where you can put your CSS styles. Only the font used in our application was imported in our application.

@import url("https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Nunito:wght@300;400;500;600;700;800;900&display=swap");

themes is a subfolder inside the styles folder. There are files named index.ts and global.ts inside the themes folder, as well as another folder called the foundation folder.

To manage all of the colors we will be using in the application, a color.ts file was made and placed inside the foundation folder.

const customColors = {
  brand: {
    white100: "rgba(255, 255, 255, 1)",
    white200: "rgba(255, 253, 248, 1)",
    dark100: "rgba(41, 42, 47, 1)",
    dark200: "rgba(25, 28, 45, 1)",
    green100: "rgba(69, 205, 129, 1)",
  },
};

export { customColors };

The global configuration for the fontFamily and fontSize used throughout the body of the HTML is contained in the global.ts file.

const globalStyles = {
  global: {
    html: {
      fontSize: "62.5%",
      scrollBehavior: "smooth !important",
    },
    body: {
      fontFamily: "'Poppins', sans-serif",
      fontSize: "1.6rem",
    },
  },
};

export { globalStyles };

The index.ts file acts as a bridge, linking all of the separated config files via the extendTheme function. It overrides the application's default theme.

import { extendTheme } from "@chakra-ui/react";
import { customColors as colors } from "@/styles/themes/foundation/colors";
import { globalStyles as styles } from "@/styles/themes/global";

const customTheme = extendTheme({
  colors,
  styles,
});

export { customTheme };

Navigate to the app folder to find the providers.tsx file. This is where the customTheme is now registered within the ChakraProvider, making it available to all components and pages globally.

"use client";

import { customTheme } from "@/styles/themes";
import { ChakraProvider } from "@chakra-ui/react";
import "@/styles/globals.css";

export const Providers = ({ children }: { children: React.ReactNode }) => {
  return <ChakraProvider theme={customTheme}>{children}</ChakraProvider>;
};

Implementing dark mode You may be aware of the popular trend of users switching from dark to light mode on their themes. To demonstrate how it can be utilized in an application, let's build a basic component.

Navigate to the app folder and create a DarkModeToggle.tsx file. Copy and paste the code below.

"use client";

import {
  Box,
  Button,
  Text,
  useColorMode,
  useColorModeValue,
} from "@chakra-ui/react";

export const DarkModeToggleComp = () => {
  const { colorMode, toggleColorMode } = useColorMode();

  const bgValue = useColorModeValue("brand.green100", "brand.dark100");
  const colorValue = useColorModeValue("brand.dark100", "brand.green100");

  return (
    <Box mt="5rem">
      <Text p="2rem" bg={bgValue} fontSize="2rem" color={colorValue}>
        6. Dark Mode Toggle Component
      </Text>
      <Box p="2rem" bg={bgValue}>
        <Text color={colorValue}>Change my color please :)</Text>
      </Box>
      <Button
        mt="1rem"
        fontSize="1.5rem"
        py="1.8rem"
        bg={bgValue}
        color={colorValue}
        onClick={toggleColorMode}
      >
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
    </Box>
  );
};

The useColorMode hook makes it simple to control the light or dark color mode in our application. This makes it easy for developing dynamic user interfaces that change based on the preferences of the user.

UseColorModeValue lets you change particular elements like font sizes, colors, and backgrounds. It works inside the specific component. It accepts two arguments(first and second) which are lightModeValue and darkModeValue respectively.

The output can be seen below.

Integrations

The most fascinating feature of Chakra UI is its compatibility with various other frameworks. It allows us to utilize all of the features, including hooks and components, while combining them with the capabilities of the framework.

Refine offers a dedicated integration package for the Chakra UI framework, which includes a collection of ready-to-use components and hooks designed to seamlessly link Refine with Chakra UI elements.

Refer to Chakra UI docs in Refine here.

Refer to complete tutorial on how to integrate Chakra UI with Refine here.

Let's look at Refine, a React-based framework as a usecase. We will build another simple app from scratch.

Open your terminal, copy and paste the code below.

npm create refine-app@latest

Choosing "Chakra UI" as your UI framework will automatically install all necessary dependencies and create a starter template for you.

Here is an example component that uses Refine and Chakra UI together.

import { Box, Flex } from "@chakra-ui/react";
import { DateField, List, TagField, TextField } from "@refinedev/chakra-ui";
import { useList } from "@refinedev/core";

type ProductProps = {
  id: number;
  title: string;
  status: string;
  publishedAt: string;
  status_color: string;
};

export const RefineWithChakraUIComp = () => {
  const { data, isLoading } = useList<ProductProps>({
    resource: "posts",
  });
  const posts = data?.data;

  return (
    <Box>
      {isLoading ? (
        <TextField p="2rem" value="Fetching posts..." />
      ) : (
        <List title="7. Refine With Chakra UI">
          {posts?.slice(0, 6).map((item) => (
            <Box
              key={item.id}
              bg="brand.white200"
              border="1px solid"
              borderColor="brand.green100"
              borderRadius="1rem"
              mb="1rem"
              overflow="hidden"
              p="1rem"
            >
              <Flex>
                <TextField fontWeight="700" mr="1rem" value="Title:" />
                <TextField value={item.title} />
              </Flex>

              <Flex>
                <TextField fontWeight="700" mr="1rem" value="Status:" />
                <TagField
                  bg={item.status_color}
                  color="brand.white100"
                  value={item.status}
                />
              </Flex>
              <Flex>
                <TextField fontWeight="700" mr="1rem" value="Published Date:" />
                <DateField value={item.publishedAt} />{" "}
              </Flex>
            </Box>
          ))}
        </List>
      )}
    </Box>
  );
};

In the above code, we created a simple application that makes use of Refine features such as DateField, List, TagField, TextField and useList.

DateField: This component manages data formatting without the need for an additional library such as moment.js or day.js. It handles it without any further logic.

List: This acts as a layout and provides default spacing for components like TextField. It allows for the addition of a title prop that can take any value.

TagField: This acts as a Tag, providing a default wrapper for text and the ability to add extra customization such as colors.

TextField: It functions as text, allowing you to render any text.

One interesting feature is how the data retrieval process was set up using the useList hook.

useList: This is a hook that Refine provides out of the box when using their framework. It allows us to dynamically fetch data while also allowing us to filter, sort, and paginate any data retrieved from an API.

Under the hood, it uses react-query, which, by convention, requires a significant amount of setup and configuration in an app before it can function properly. However, because it has been handled by Refine, we can utilize hooks like useList without doing complex configurations.

This differentiates Refine and makes it reliable because it provides a user with two options: the flexibility of using any external UI library or the flexibility of utilizing the hook and other features in Refine in a single application.

It has two destructured properties: data and isLoading. data is the result of an API call, and isLoading helps in rendering useful information to the user before the results are available. This has the standard react-query features.

The resource argument in useList points to the name "posts". This comes from the root layer of our application where Refine was configured.

As you can see from the above output, using Refine components and hooks makes everything function exactly the same way.

Conclusion

By the end of this article, you should have a good understanding of how Chakra UI works, why it’s significant in web applications, and how to integrate it with a React-based framework such as Refine.

Author: Samuel O.

The Basics of Kubernetes CronJob

Necati Özmen — Thu, 21 Mar 2024 11:09:46 +0000

Introduction

Kubernetes is an open-source container orchestration platform that manages containerized applications to run on a cluster of hosts. CronJobs in Kubernetes is the way of running jobs automatically based on time intervals. Developers have been using CronJobs in Linux for a long time. These commands or scripts are scheduled to run at set intervals like every minute, hour, day, week, or month.

CronJobs are very useful for keeping your system up-to-date as well as automating tasks such as backups, maintenance of the system, triggering automated emails, monitoring and alerts, automatically restarting the containers, and many other automation tasks.

This article will discuss how to incorporate CronJobs into your workflow. We will explain through examples how you can set up CronJobs for your Kubernetes environment and implement them in your Kubernetes configuration files. We will also explore ways to troubleshoot any issues related to CronJobs in the Kubernetes environment. At the end of this article, we will list some best practices to help you implement the cronjobs most efficiently and effectively.

Steps we'll cover:

Understanding the Basics of Kubernetes CronJobs
Setting Up Your Environment for Kubernetes CronJobs
Creating Your First Kubernetes CronJob
Debugging and Logging in Kubernetes CronJobs
Real-world Scenarios and Best Practices

Understanding the Basics of Kubernetes CronJobs

Definition and fundamental concepts of CronJobs in Kubernetes

Upon creating a CronJob resource, Kubernetes registers a schedule in cron expression format. This schedule dictates the timing of the Kubernetes cron job. The CronJob Controller checks every 10 seconds to identify any schedules that need executing. At the designated time, Kubernetes initiates a new Job resource to manage that particular execution.

Following this, Kubernetes automatically generates pods as per the schedule, aiming for successful pod creation. If a pod fails to initialize correctly, Kubernetes automatically generates a new one to as another attempt to execute the task again.

High-level overview of how CronJobs differs from traditional cron tasks

A CronJob in Kubernetes schedules recurring tasks, whereas a cron task runs scripts or commands at specific times using the cron daemon. CronJobs, being managed by Kubernetes, can scale and integrate well with Kubernetes features such as secrets and volumes, whereas cron tasks can only leverage the environment of the host machine. CronJobs make use of Kubernetes manifests or kubectl to get configured while crontab files are used by cron tasks.

Setting Up Your Environment for Kubernetes CronJobs

Pre-requisites for working with CronJobs in Kubernetes

Cluster: You can use a minikube Single Node cluster that is enough for local testing. There are other options as well, like 'kind', through which you can create the multi-node cluster.

Kubernetes CLI: You will also require a command line tool for Kubernetes (i.e kubectl), so that you can run the commands against Kubernetes clusters.

Docker Image: An image is required that contains a command or script that you want to run as a CronJob.

Text Editor: It is required for editing the Kubernetes configuration files(YAML)

Quick setup guide (with a screenshot of the setup environment)

First, Install docker Docktop. You can download the setup from the official docker site and install it on your machine.
Minikube can be installed by following the official documentation, and by executing the 'minikube start' command, you can set up a minikube cluster.
Install kubectl(Kubernetes CLI) according to your Operating System by following the official documentation.
Create a YAML file using any text editor for CronJob configuration and apply the configuration by running the command 'kubectl apply -f Your_Config_File.YAML'.

Here is the screenshot of our setup environment that we will be using for running cronjobs in Kubernetes:

Creating Your First Kubernetes CronJob

Step-by-step process to create a basic CronJob

We are going to create a simple cronjob that would use an nginx image and replace the "Welcome to Nginx" Text with appending time for every minute, such as First it will be "Welcome to Nginx at [Current_time]" then after a minute when CronJob runs it will become "Welcome to Nginx at [Current_time + 1 Minute]".

Step 1: Create a YAML File for configuring CronJob based on the above Example:

Step 2: Run 'kubectl apply -f Your_Config_File.YAML' to apply configurations:

Step 3: Check if Cron Jobs are Running by Executing 'kubectl get jobs –watch':

Step 4: Access Pod Logs to Verify Output

YAML configuration walkthrough (with a screenshot of the YAML file and command line execution)

In the Example above, we created a YAML file named 'Nginx-Welcome-Example.yaml', which specifies the desired state and behavior of the Cron Job. To achieve our purpose, we provided the following configurations:

apiVersion: batch/v1 – This is Kubernetes API version that contains the Object Specification.
kind: CronJob – This is the type of Object we want to create.
metadata – The Object is named as 'replace-cronjob', which is a unique identifier within the namespace.
schedule: "* * * * *" – The Job will execute after every minute according to the cron expression.
JobTemplate – Here, we defined the desired state and behavior of our job.
containers: , image: nginx:latest – We created one container in the pod with the 'Nginx' image.
Command: - /bin/bash -c - echo "Welcome to Nginx at $(date)" – This is the actual action that will be performed after every minute. We print the Welcome Text with the current time when the pod is created by the CronJob to the standard output. We can see this output in the logs of each pod created.

Explanation of key configuration parameters

Schedule: The schedule field, which indicates the job's repetition frequency in cron format. A cron expression is a string that has five or six fields separated by spaces, representing minute, hour, day of month, month, day of week and optionally year. Each field can have a certain value or range, represent a list or wildcard, as well as contain special characters. For example, * * * * * means every minute; 0 12 * * * means every day at noon; and 0 0 1 1 * means every year on January 1st.

Job Template: The jobTemplate field defines the template for creating the Job object that runs the pod. The jobTemplate has one field: spec.

Container and Image: The containers field lists containers running in the pod. Each container has many fields: name, image, and command. The name field stands for the specific container name within a given pod. The image field represents the Docker image used by this container. The command field refers to the script or command run inside this container.

Debugging and Logging in Kubernetes CronJobs

How to access and interpret logs generated by CronJobs

The logs generated against the command or script are captured by the container's standard output and standard error streams and stored in the logs of the pod. This means that you cannot access the logs of a CronJob directly because first, you need to know which Pods ran the job created by the CronJob. To list and view the logs of a pod, use kubectl command-line tool.

First, you need to list the pod created by the CronJob by using the following command:

kubectl get pods

Then, copy the name of the pod and replace with [pod_name] in the command below:

kubectl logs [pod_name]

There is another option as well where you can use labels and selectors to filter the Pods based on the name of the CronJob. In our last Example, we created the CronJob with the name 'replace-cronjob', so we could filter the pods of that CronJob and view the logs using the commands below:

kubectl get pods -l cronjob-name=replace-cronjob

The above command will return the following output:

kubectl logs -l cronjob-name= replace-cronjob

The above command will return the following output:

Common issues and how to troubleshoot them (with screenshots of log outputs and debugging commands)

Syntax Errors:
CronJobs has a complex syntax like regular UNIX cron jobs that can take time to get right. Some common syntax errors include using wildcards incorrectly, making mistakes with cron schedules, and specifying an incorrect number of fields. Copy your expression into crontab.guru to check its syntax correctness.

Let's suppose we have a wrong cron expression in our CronJob configuration that does not allow for creating a CronJob. While applying this configuration, it will return the error:

In order to troubleshoot this, we can use the command below:

kubectl create -f Nginx-Welcome-Example.yaml --dry-run=client -o yaml

Timezone:
By default, CronJobs are run based on the Kubernetes cluster's timezone, which may differ from the user or application's timezone, causing scheduling conflicts or unexpected behavior.

To troubleshoot this issue, you can check the timezone of your cluster node by deploying a temporary pod to that specific node for debugging purposes and executing the command within that pod. For example, we deployed the temporary pod(i.e., named debugger-pod) in our node, and then we executed the command below in that pod:

kubectl exec debugger-pod -- date

The command will return the following output:

Image:
If a CronJob specifies an image that is not available, the job will fail. You must see the ImagePullBackOff or ErrImagePull status against the pods created by CronJob. To troubleshoot this issue, you need to describe the pod by running the command below:

kubectl describe pod [pod_name]

The Above Command will return the output below:

Real-world Scenarios and Best Practices

Discussion on practical use cases of CronJobs in production environments

Here are a few practical use cases of CronJobs in a Production Environment:

Email Reminder:
An application sends the users reminders for certificate renewal when they are about to expire and need to be renewed. You can configure a cron job that hits the API, queries the database, filters out certificates that are close to the expiration date and sends an email to users as a reminder for renewal.

Automated analysis and reporting:
You may schedule a cron job that does reports automatically depending on the performance of your site or business. In this case, we can use a cron job to go through server logs, analyze web traffic, sales, or customer behavior every 30 minutes, and then create a PDF report.

Automating data backup:
You can use a cron job to back up databases and restore damaged or lost data. For instance, you can dump your website's database using the cron job daily while also backing up server data on an AWS S3 bucket or any other object storage service.

Best practices for efficient and reliable CronJob implementations

Always give your cron jobs descriptive and meaningful names, as well as comment about what they do and why. Secondly, test your cron jobs and dry run to ensure that you have configured the right cron expressions before deployment.
Job failures might happen due to process failures within a pod or failures in the Kubernetes controller layer, forcing automatic infinite job retries until success. However, setting backoffLimit at some value (neither too low nor too high) facilitates a limited number of re-attempts.
It is considered one of the best practices when configuring CronJob to uphold the 'Principle of Least Privilege'. In that case, only necessary permissions should be assigned to scripts and dependencies. Ultimately, it improves security by reducing the risks involved.

Conclusion

In this article, we have explored Kubernetes CronJobs in great length. We went through how to create cronjobs, maintain them, and apply them to your Kubernetes cluster. We also looked into some best practices that can help you implement your cronjobs in an efficient, reliable, and secure way on production.

As you continue your journey with Kubernetes, further explore and learn more about CronJobs by manipulating them in different ways. You can update or remove your existing CronJob configurations and resources. You can monitor or debug your CronJob executions as well as their outputs. Also, we would recommend you explore the advanced aspects of Kubernetes CronJobs by going through more details and examples in the official documentation.

Author: Muhammad Khabbab

Swiper.js Tutorial

Necati Özmen — Wed, 20 Mar 2024 08:44:19 +0000

Introduction

Sliders have become an integral part of websites and web applications as they have been used to rapidly capture a user's attention as well as emphasize important information, items, or characteristics. There are an array of libraries used to make sliders, but one worth noting is Swiper.

Swiper.js is a powerful JavaScript library that lets you quickly add touch-enabled and responsive sliders to your website or web application. It has been highly embraced by many due to its flexibility in customization as well as being available in various Javascript frameworks. In this article, we will take a dive into the Swiper.js library

Steps we'll cover:

Getting started with Swiper.js
Features available in Swiper.js
Swiper in Javascript Frameworks
Swiper Elements in React

Getting started with Swiper.js

There are a few ways to include Swiper in your project:

1 - Download swiper assets

To download Swiper locally, visit here

2 - Use Swiper from CDN

You can include Swiper in your project by adding the following code to your HTML file:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

If you use ES modules in your browser, there is a CDN version as well:

<script type="module">
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'

  const swiper = new Swiper(...)
</script>

3 - Install from NPM

Install Swiper into your project using the command below:

npm install swiper

Next, import swiper into your Javascript file.

// import Swiper JS
import Swiper from 'swiper';

// import Swiper styles
import 'swiper/swiper-bundle.min.css';

const swiper = new Swiper(...);

Swiper exports only the basic version by default, without any additional modules (such as Navigation, Pagination, and so on). As a result, you must import and configure these as well from swiper/modules.

// core version + navigation, pagination modules:

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

// import Swiper and modules styles
import 'swiper/swiper.min.css';
import 'swiper/modules/navigation.min.css';
import 'swiper/modules/pagination.min.css';


// init Swiper:
const swiper = new Swiper('.swiper', {
  // configure Swiper to use modules
  modules: [Navigation, Pagination],
  ...
});

If you wish to import Swiper with all modules (bundle), import it from swiper/bundle.

// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';

// import styles bundle
import 'swiper/swiper-bundle.min.css';

// init Swiper:
const swiper = new Swiper(...);

Define the Swiper Markup

After the installation process, we will then add the Swiper's HTML layout to our project.

// Slider main container

<div class="swiper">
  // Additional required wrapper

  <div class="swiper-wrapper">
    // Slides
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>

  // If we need pagination

  <div class="swiper-pagination"></div>

  // If we need navigation buttons

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  // If we need scrollbar

  <div class="swiper-scrollbar"></div>
</div>

Initialize Swiper

Next, we need to initialize Swiper after adding the HTML.

const swiper = new Swiper(".swiper", {
  // Optional parameters
  direction: "vertical",
  loop: true,

  // If we need pagination
  pagination: {
    el: ".swiper-pagination",
  },

  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  // And if we need scrollbar
  scrollbar: {
    el: ".swiper-scrollbar",
  },
});

The Swiper object accepts two parameters:

The target element for Swiper, which is indicated as a CSS selector reference to that element (in our case, the .swiper element in the example above ).
An object which accepts configuration options like navigation, pagination, modules, scrollbar, direction, loop, and many more.

Swiper has an array of parameters that can be passed into its configuration options. visit its docs to view these parameters.

Features available in Swiper.js

Swiper Methods and Properties

After Initializing Swiper, we can access helpful methods and properties in the Swiper object.
For example, the properties:

swiper.activeIndex allows you to access the slider's current index value, which you can set to a number.
swiper.previousIndex allows you to access the slider's previous index value, which you can set to a number.
swiper.allowSlideNext can disable or enable the ability to slide to the next slide.
swiper.allowSlidePrev can disable or enable the ability to slide to the previous slide
swiper.el holds the slider container HTML element
swiper.width holds the width of the slider container
swiper.height holds height of the slider container
swiper.swipeDirectionlets you specify the direction of sliding as either 'prev' | 'next'

for methods:

swiper.changeDirection(direction, needUpdate)
swiper.slidePrev(speed, runCallbacks)
swiper.slideTo(index, speed, runCallbacks)

To see more methods and properties that the Swiper Object exposes, visit here

Swiper Events

Swiper includes a number of useful events to which you can listen. There are two techniques to assign events:

Using the on parameter during swiper initialization:

const swiper = new Swiper(".swiper", {
  // ...

  on: {
    init: function () {
      console.log("swiper initialized");
    },
  },
});

Using the on parameter after swiper initialization:

const swiper = new Swiper(".swiper", {
  // ...
});

swiper.on("slideChange", function () {
  console.log("slide changed");
});

Swiper has some events such as:

activeIndexChange, an event that is fired when the active index of the slides changes.
slide change, an event that is fired when the active index of the slides changes.
click, an event that is fired when the Swiper container is clicked

You can listen to a number of events on Swiper. To see more events that Swiper supports, visit here.

Swiper Styles

Swiper includes several CSS style sets:

swiper/swiper-bundle.min.css - bundled Swiper core styles(including modules styles).
swiper/swiper.min.css - Swiper only style(excluding modules styles).
swiper/modules/{{moduleName}}.min.css - a minified Swiper style, based on a module name in lowercase (such as Navigation, Pagination, and so on).
swiper/modules/{{moduleName}}.css - Swiper style (not minified), based on a module name in lowercase (such as Navigation, Pagination, and so on).

Swiper also allows for separate modular styles. That is if you only want to import specific styles for specific modules.

For example, you can access the minified styles for the navigation module simply by importing swiper/modules/navigation.min.css

Check out the Swiper style docs to discover additional style options (as Swiper also supports SCSS and Less options).

N/B: Modules styles are optional if you've already imported bundle styles.

Customization Options

Swiper modules can be customized in a variety of ways. We'll look at different swiper modules and how they can be customized.

Navigation and Pagination

1- Navigation

in Swiper, you can customize Navigation Parameters as Swiper provides

prevEl: A parameter that holds a string which is a CSS selector or HTML element of the element that will function as a "prev" button when clicked.
nextEl: A parameter that holds a string which is a CSS selector or HTML element of the element that will function as a "next" button when clicked.

Here is an example of how some parameters are used. In the code below, we are targeting the classes:

.swiper-button-prev element on the HTML template with the navigation.prevEl parameter
.swiper-button-next element on the HTML template with the navigation.nextEl parameter

Javascript code:

import Swiper from 'swiper';
import { Navigation } from 'swiper/modules';

// import Swiper and modules styles
import 'swiper/swiper.min.css';
import 'swiper/modules/navigation.min.css';

const swiper = new Swiper('.swiper', {
  modules: [Navigation],
  ....,
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

// OR (Alternative)

const swiper = new Swiper('.swiper', {
  modules: [Navigation],
  ....,
});
swiper.nextEl = '.swiper-button-next';
swiper.prevEl = '.swiper-button-prev';

The HTML template:

// Slider main container

<div class="swiper">
  // Additional required wrapper

  <div class="swiper-wrapper">
    // Slides
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>

  // navigation buttons

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

To explore more Navigation options, visit here.

2- Pagination

in Swiper, you can customize Pagination Parameters as Swiper provides

bullets: A parameter that holds an array of pagination bullets HTML elements. To get specific slide HTMLElement use swiper.pagination.bullets[1].
el: A parameter that holds the HTMLElement of pagination container element.

Here is an example of how a parameter is used. In the code below, we are targeting the class:

.swiper-pagination element on the HTML template with the navigation.el parameter

Javascript code:

import Swiper from 'swiper';
import { Pagination, Navigation } from 'swiper/modules';

// import Swiper and modules styles
import 'swiper/swiper.min.css';
import 'swiper/modules/navigation.min.css';
import 'swiper/modules/pagination.min.css';

const swiper = new Swiper('.swiper', {
  modules: [Pagination, Navigation],
  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  ...
});

// OR (Alternative)

const swiper = new Swiper('.swiper', {
  modules: [Pagination, Navigation],
  ...,
});
swiper.el = '.swiper-pagination';

The HTML template:

// Slider main container
<div class="swiper">
  // Additional required wrapper

  <div class="swiper-wrapper">
    // Slides
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>

  // If we need pagination
  <div class="swiper-pagination"></div>
</div>

Additional Features

Some other customization features include:

3- Scrollbar

in Swiper, you can customize Scrollbar parameters as Swiper provides:

dragEl: A parameter that holds the HTMLElement of Scrollbar draggable handler element.
el: A parameter that holds the HTMLElement of Scrollbar container element.

Here is an example of how a parameter is used. In the code below, we are targeting a class:

.swiper-scrollbar element on the HTML template with the scrollbar.el parameter

Javascript code:

import Swiper from 'swiper';
import { Scrollbar } from 'swiper/modules';

// import Swiper and modules styles
import 'swiper/swiper.min.css';
import 'swiper/modules/scrollbar.min.css';

const swiper = new Swiper('.swiper', {
  modules: [Scrollbar],
  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

// OR (Alternative)

const swiper = new Swiper('.swiper', {
  modules: [Scrollbar],
  ....,
});
swiper.el = '.swiper-scrollbar';

The HTML template:

// Slider main container

<div class="swiper">
  // Additional required wrapper

  <div class="swiper-wrapper">
    // Slides
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>

  // If we need scrollbar
  <div class="swiper-scrollbar"></div>
</div>

4- Thumbs

For Thumbs, you would require two Swiper instances:

A First Swiper instance for the first slider, which the thumb will control.
A second Swiper instance for the thumb slider itself.

in Swiper, you can customize Thumb Parameters as Swiper provides:

swiper: A parameter that holds the Swiper instance of the thumbs Swiper.

Here is an example of how a thumb parameter is used. In the code below, we are targeting the thumbs.swiper property in the swiper2 Swiper instance with the swiper Swiper instance.

Javascript code:

import Swiper from "swiper";
import { Thumbs } from "swiper/modules";

// import Swiper and modules styles
import "swiper/swiper.min.css";
import "swiper/modules/thumbs.min.css";

//  Initialize Swiper
let swiper = new Swiper(".mySwiper", {
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});

let swiper2 = new Swiper(".mySwiper2", {
  modules: [Thumbs],
  spaceBetween: 10,
  thumbs: {
    swiper: swiper,
  },
});

The HTML template:

<div class="swiper-container">
  <div class="swiper mySwiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide_1">Slide 1</div>
      <div class="swiper-slide slide_2">Slide 2</div>
      <div class="swiper-slide slide_3">Slide 3</div>
      <div class="swiper-slide slide_4">Slide 4</div>
      <div class="swiper-slide slide_5">Slide 5</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <div thumbsSlider="" class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide_1">Slide 1</div>
      <div class="swiper-slide slide_2">Slide 2</div>
      <div class="swiper-slide slide_3">Slide 3</div>
      <div class="swiper-slide slide_4">Slide 4</div>
      <div class="swiper-slide slide_5">Slide 5</div>
    </div>
  </div>
</div>

To explore more module customization options, visit here.

Swiper in Javascript Frameworks

Swiper is supported by javascript frameworks like as React, Vue, and Angular. However, in this article, we will focus on Swiper for React.

Swiper React

Swiper React is a component of the main Swiper library that is only accessible through NPM:

  npm i swiper

After installation, you can access Swiper React packages from the swiper/react exports

Usage

swiper/react exports 2 components:

<Swiper></Swiper, which represents the Swiper container element.
<SwiperSlide></SwiperSlide>, which represents the individual Swiper slides.

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";

export default () => {
  return (
    <Swiper>
      <SwiperSlide>Content 1</SwiperSlide>
      <SwiperSlide>Content 2</SwiperSlide>
      <SwiperSlide>Content 3</SwiperSlide>
      <SwiperSlide>Content 4</SwiperSlide>
    </Swiper>
  );
};

N/B: Swiper React by default utilizes the core version of Swiper (without any additional modules). If you wish to use Navigation, Pagination, and other modules, you must first install them.

// import Swiper core and required modules

import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";

import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";

export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      navigation={true}
      pagination={true}
    >
      <SwiperSlide>Content 1</SwiperSlide>
      <SwiperSlide>Content 2</SwiperSlide>
      <SwiperSlide>Content 3</SwiperSlide>
      <SwiperSlide>Content 4</SwiperSlide>
      ...
    </Swiper>
  );
};

Swiper props

All of the Swiper parameters are sent as component props to the Swiper React component, along with a few extra properties:

tag: The Swiper container HTML element tag.
wrapperTag: The Swiper wrapper HTML element tag.
onSwiper: This is a Callback that receives the Swiper instance.

Also, it supports all Swiper events in the format of on{Eventname}. SlideChange event, for instance, becomes onSlideChange prop:

...
<Swiper
    onSlideChange={() => {/*...*/}}
    ...
  >

Swiper slide props

The <SwiperSlide></SwiperSlide> component accepts the following extra properties:

tag : Swiper Slide HTML element tag
zoom: Enables the extra wrapper needed for the zoom mode.
virtualIndex: The real index of Swiper slides. It Must be configured for virtual slides

The <SwiperSlide></SwiperSlide> can accept render functions that return an object with the following properties:

isActive: When the current slide is active, this is true.
isPrev: returns true when the current slide is the previous one from the active
isNext: returns true when the current slide is the next slide after the active slide
isVisible: returns true when the current slide is visible (the watchSlidesProgress Swiper argument must be enabled).
isDuplicate: returns true if the current slide is a duplicate (when loop mode is enabled).

An example of the use of a render function is shown below:

<Swiper>
  <SwiperSlide>
    {({ isActive }) => (
      <div>Current slide is {isActive ? "active" : "Slide 1"}</div>
    )}
  </SwiperSlide>
</Swiper>

Swiper Hooks

Swiper hooks are simply hooks in react that easily make available the Swiper instance and SwiperSlides values.

useSwiper: Swiper React provides the useSwiper hook to easily obtain the Swiper instance in Swiper components:

// some-inner-component.jsx
import { React } from "react";
import { useSwiper } from "swiper/react";

export default function SlideNextButton() {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
  );
}

useSwiperSlide: useSwiperSlide is an additional hook for components inside Swiper slides to obtain slide data (the same data as in the <SwiperSlide></SwiperSlide> render function).

// some-inner-component.jsx
import { React } from "react";
import { useSwiperSlide } from "swiper/react";

export default function SlideTitle() {
  const swiperSlide = useSwiperSlide();

  return (
    <p>Current slide is {swiperSlide.isActive ? "active" : "not active"}</p>
  );
}

Swiper Elements in React

Let's look more closely at how to use the Swiper web component in React.

Because React does not yet have native support for custom elements (web components), it is necessary to use Swiper Element in React by giving parameters as props and using custom initialization.
Also, events cannot be allocated using React's on[Event] syntax and must be added using the.addEventListener function or by handing them in on in parameters:

import { useEffect, useRef } from "react";
import { register } from "swiper/element/bundle";

register();

export default function App() {
  const swiperElRef = useRef(null);

  useEffect(() => {
    // listen for Swiper events using addEventListener
    swiperElRef.current.addEventListener("swiperprogress", (e) => {
      const [swiper, progress] = e.detail;
      console.log(progress);
    });

    swiperElRef.current.addEventListener("swiperslidechange", (e) => {
      console.log("slide changed");
    });
  }, []);

  return (
    <swiper-container
      ref={swiperElRef}
      slides-per-view="3"
      navigation="true"
      pagination="true"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      ...
    </swiper-container>
  );
}

Conclusion

This post covered Swiper.JS, a versatile and user-friendly tool for creating customizable carousels and sliders.

Swiper.JS is a feature-rich library, so it's important that you look through its documentation to learn about all of its features and maybe even give it a try.

GraphQL vs REST - Key Differences and Use Cases

Necati Özmen — Fri, 15 Mar 2024 08:05:24 +0000

Introduction

The internet is connected using a standard method called HTTP. This enabled communication between devices to be possible. Despite all these, protocols were put in place for the design and communication of these devices to be efficient. Protocols were created, SOAP, XML-RPC, etc. But the protocols that have stood the test of time are REST, coined by Roy Fielding in 2000 in his doctoral dissertation, Architectural Styles and the Design of Network-based Software Architecture, and GraphQL, a new kid on the block. These two have proven themselves over time, and they have become the most used protocols in the world.

In this article, we will explore the key differences between GraphQL and REST, and discuss the use cases where each approach excels.

Steps we'll cover:

Introduction
Architectural Style
Data Fetching
Flexibility and Efficiency
Performance
Use Cases
Summary of differences: REST vs. GraphQL

Architectural Style

In this section, we will discuss the architectural style of REST and GraphQL, and highlight the key differences between the two approaches. Let's start with REST.

REST

REST is an age-old method for networked applications or devices to communicate with each other. It is sending and receiving data between each other. Right from the time of the invention of the internet by Tim Benners-Lee, REST has been the go-to method for the internet.

In REST, one device sends the request, and the other device receives and processes the request and sends it back to the sender. Now, this sender is known as the client, while the receiver is known as the server.

This communication in REST is handled by a protocol called HTTP. This HTTP is the backbone of communication in REST, and it is designed in a way that suits the needs of REST. This is because the HTTP enables the separation of concerns, which is one of the principles a networked application must observe before it can be called a RESTful API.

The building blocks of REST are called the resources. A resource in REST is a single entity that can be manipulated and sent to the client as data. A resource can be media, documents, database data, etc. HTTP has different methods that can be used to perform specific operations on a resource. They are:

GET
POST
DELETE
PUT
OPTIONS

This makes REST completely stateless, which is one of its principles. The statelessness of REST means that each request is not dependent on the data elsewhere. Every data needed for that request is contained in the request itself. This makes REST to be very scalable and reliable. This makes it readable, scalable, and reliable.

REST is perfect, but as the application grows, it becomes complex to manage. As each request is based on a particular resource, we will find ourselves making multiple rounds of requests to fetch what we need. This leads to over-fetching and under-fetching of data. This brings a performance bottleneck to the application.
Because users will have to wait before all the requests are completed before they can see the data they need, this is where GraphQL comes in.

GraphQL

GraphQL is a query language and data manipulation language for APIs. GraphQL still uses HTTP for communication; it does not use another protocol. So, this is one of the similarities between GraphQL and REST.

GraphQL was built in 2015 by Facebook; it was designed to solve the problem of over-fetching and under-fetching of data that we already saw in REST. It is doing a very nice job of giving REST a run for its money.

In REST, we have resources, and each resource is mapped to an HTTP verb; it can be GET, POST, DELETE, or PUT. In the case of GraphQL, it does not do any mapping or use anything close to that. GraphQL communicates only via the POST method. Each request of GraphQL contains a POST body that holds information describing the structure of the data to be fetched, what resources to be fetched, and how many to fetch.

So, we can say that GraphQL merged PUT, DELETE, GET, and POST requests into one entity. The data contained in the POST body describing how to fetch the data is actually in a query language that GraphQL understands. The GraphQL server receives these requests, interprets the POST body, and goes on to fetch and structure the data as instructed.

One of the key benefits of GraphQL compared to a traditional REST API is its ability to support declarative data fetching. This means that each component can (and ideally should) request precisely the fields it needs to render, avoiding any unnecessary data transmission over the network.

Data Fetching

In this section, we will discuss the differences between GraphQL and REST in terms of data fetching. How do both approaches handle data fetching, and what are the advantages and disadvantages of each approach?

REST

The discussion of REST data-fetching will include the following points:

Endpoints for specific resources
Over-fetching or under-fetching of data
Multiple requests for related data
Limited control over the response structure

Endpoints for specific resources are one of the defining characteristics of REST. They are represented below:

    GET /users/1

    {
      "id": 1,
      "name": "John Doe",
      "email": "",
        "address": {
            "street": "123 Main St",
            "city": "New York",
            "state": "NY",
            "zip": "10001"
        }
    }

    GET /users

    [
        {
            "id": 1,
            "name": "John Doe",
            "email": "",
            "address": {
            "street": "123 Main St",
            "city": "New York",
            "state": "NY",
            "zip": "10001"
            }
        },
        {
            "id": 2,
            "name": "Jane Doe",
            "email": "",
            "address": {
            "street": "456 Main St",
            "city": "New York",
            "state": "NY",
            "zip": "10001"
            }
        }
    ]

    GET /users/1/address

    {
        "street": "123 Main St",
        "city": "New York",
        "state": "NY",
        "zip": "10001"
    }

    GET /articles
    GET /articles/456

The examples above show how URIs are used to identify collections (e.g., /users, /articles) and individual resource instances (e.g., /users/1, /articles/456).

Each endpoint returns a fixed set of data, and clients may need to make multiple requests to different endpoints to gather all the necessary information. This can result in inefficiencies, particularly in scenarios where bandwidth is a critical factor. Additionally, the need for multiple requests to fetch related data can lead to performance issues.

Example:

    // GET /users/1
    {
      "id": 1,
      "name": "John Doe",
      "email": "",
        "address": {
            "street": "123 Main St",
            "city": "New York",
            "state": "NY",
            "zip": "10001"
        }
    }

In the above example, the client may only need the user's name and email, but the endpoint returns the entire user object, including the address. This is an example of over-fetching, where the server returns more data than is required. This can be mitigated by creating a new endpoint that returns only the required data, but it can lead to an explosion of endpoints.

Additionally, the client may need to make multiple requests to fetch related data, such as the user's address, etc. This also leads to making multiple requests, which hampers the performance of the application.

We see that in REST, we have limited control over the response structure; the shape and size of the response are determined by the server, and clients have no control over the structure of the response. This can lead to inefficiencies, as the client may need to make multiple requests to fetch related data.

GraphQL

GraphQL excels in scenarios where the client's data requirements are dynamic or where different clients (web, mobile, etc.) necessitate distinct data sets. The ability to request precisely the needed data in a single query mitigates over-fetching, addressing one of the challenges faced by REST.

Let's see an example:

    // GraphQL query
    {
      user(id: 1) {
        name
        email
      }
    }

    // Response
    {
      "data": {
        "user": {
          "name": "John Doe",
          "email": ""
        }
      }
    }

In the above example, the client requests only the user's name and email, and the server returns precisely that data. This is an example where the server returns only the required data. This is in contrast to REST, where the server returns the entire user object, including the address.

However, this flexibility introduces complexities, especially for those accustomed to the straightforward nature of REST. Additionally, the need for a robust schema and increased complexity in resolving queries may pose challenges for certain use cases. Examples of the use cases where GraphQL may pose a challenge include scenarios where the data requirements are static or where the data requirements are simple. In these cases, the simplicity of REST may be preferable.

Let's look at GraphQL's ability to batch multiple queries in a single request:

    // GraphQL query
    {
      user(id: 1) {
        name
        email
      }
      article(id: 456) {
        title
        body
      }
    }

    // Response
    {
      "data": {
        "user": {
          "name": "John Doe",
          "email": ""
        },
        "article": {
          "title": "GraphQL vs REST",
          "body": "GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data."
        }
      }
    }

In the above example, the client requests data for the user and the article in a single query. This contrasts REST, where the client must make two separate requests to fetch the user and the article. Everything was gotten in a single request.

In REST, we must make two separate requests to fetch the user and the article.

    // GET /users/1
    {
      "id": 1,
      "name": "John Doe",
      "email": "",
        "address": {
            "street": "123 Main St",
            "city": "New York",
            "state": "NY",
            "zip": "10001"
        }
    }

    // GET /articles/456
    {
      "id": 456,
      "title": "GraphQL vs REST",
      "body": "GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data."
    }

Flexibility and Efficiency

In this section, we will discuss the flexibility and efficiency of GraphQL and REST.

REST

We will discuss the following points:

Static endpoints
Versioning is often required for changes
Limited flexibility in response format
Stateless nature simplifies caching

Let's start with static endpoints. REST relies on static endpoints, where each endpoint returns a fixed set of data. In as much as it offers simplicity and predictability, making it easy for developers to understand and navigate the API, this can lead to inefficiencies and rigidity. It can easily become a limitation in scenarios where dynamic or complex data retrieval is required.

Looking at versioning, REST APIs are often versioned to accommodate changes. As RESTful APIs evolve, there might be a need to introduce changes to the existing endpoints or data structures. It can be achieved through various strategies, such as URI versioning (/v1/users), custom headers, or query parameters. This evolution can pose challenges for existing clients, as modifications may unintentionally disrupt their functionality. It can lead to a proliferation of endpoints and can be challenging to manage.
Limited flexibility in response format.

The server determines the shape and size of the response, and clients have no control over the structure of the response. This lack of flexibility in response format may be a drawback in scenarios where clients have varying data requirements.

The stateless nature of RESTful services simplifies caching. Each request contains all the information required to fulfill it, and the server does not need to maintain any state. This makes it easy to cache responses, improving performance and scalability.

GraphQL

Here we will discuss the following points:

Dynamic queries tailored to client needs
No need for versioning (backward-compatible)
Fine-grained control over the response structure
Challenges in caching due to variable queries

GraphQL's main selling point is that it allows dynamic queries, which lets the users craft and design their queries to meet their specific needs. This is unlike REST, where each endpoint returns a fixed set of data. Clients can specify the shape and structure of the response, resulting in more efficient data retrieval.

With the way GraphQL is structured, it does not require versioning. GraphQL is backward-compatible, and new fields can be added to the schema without impacting existing queries. This is in contrast to REST, where changes to the API may unintentionally disrupt existing clients.

GraphQL gives clients fine-grained control over the response structure. Clients can specify precisely the data they need, and the server returns precisely that data.

Caching proves to be difficult with GraphQL. The dynamic nature of GraphQL queries makes it challenging to cache responses. The same query may be executed with different arguments, resulting in different responses. Caching becomes more complex as responses are no longer uniform, and caching mechanisms must account for the variability in queries.
This can lead to cache invalidation issues and can be challenging to manage. Although tools and libraries have emerged to address these challenges, caching in GraphQL requires careful consideration.

Performance

In the last sections, we have seen how GraphQL and REST differ in terms of data fetching and flexibility. In this section, we will discuss the performance of both. Let's go!

REST

When it comes to performance, REST is like the reliable workhorse of the web world. In straightforward scenarios where you're dealing with basic data retrieval and modifications, REST gets the job done efficiently.

But, and there's always a "but," REST has its downsides. Sometimes, REST can give you more than you asked for. It is called over-fetching, as we have previously known. Picture this: you ask for some user details, and REST dutifully sends everything—name, email, posts, and maybe even the favorite color of their cat. It's like ordering a coffee and getting the entire coffee shop menu.

And then there's this thing with separate requests. If you want details about a user and their posts, you're making one request for the user and another for the posts. It's like having to visit two different stores to buy bread and cheese when all you want is a good old sandwich.
So, while REST is awesome for simple tasks, it can get a bit tricky in more complex situations. Just be ready to make multiple stops on your data-fetching journey.

GraphQL

GraphQL is very powerful and excels greatly on how to make data fetching smooth and efficient. It is so proficient when it comes to handling data, sends you exactly what you asked for, and does not add any extra info to your response.

Also, GraphQL does not make multiple requests just to get data for you. This is because of the design of GraphQL. You make a single request and you get all the data you need from different resources.

So, in the world of data performance, GraphQL takes the lead because of these points:

No overhead
No over-fetching
No multiple requests.

Use Cases

Let's look at different use cases where REST and GraphQL will play out their best roles.

REST

In the use case of REST, it is more suitable for CRUD applications. For example, applications like blogs, e-commerce, and other applications that require basic data retrieval and modifications. Applications that do not require complex data handling and manipulation.

Also, REST caching capability makes it ideal for applications where performance and scalability are critical.

GraphQL

GraphQL takes its game to the higher levels. If you are building an application that requires complex and dynamic data handling and manipulation, GraphQL is the way to go. For example, if you are building a social media that has a target of a billion users, then you are better off using GraphQL. This is because it will help you identify and manage the data you need to handle. Social media requires a lot of data, for instance, a single User model can have a lot of data, like name, email, address, posts, comments, likes, and so on. GraphQL will help you manage all these data in a single request.

Also, GraphQL is best suited for real-time applications. Your social media application will indeed have a chat section. GraphQL's subscription feature is unparalleled and powerful. It will help you manage the real-time data in your application with ease.

Summary of differences: REST vs. GraphQL

	REST	GraphQL
Architectural Style	Structured for communication between client and server	A query language uses HTTP, and is very easy to setup..
Data Fetching	Excels well but becomes a problem when much more info in the data is needed.	Its main selling point. It was the problem it was created to solve.
Flexibility and Efficiency	Very easy to setup but becomes less efficient when the resources grows over time.	High flexible to adapt to any project but difficult to work with at first.
Performance	Great in performance but under-performs when it involves complex resource fetching.	Has high performance but underperforms in terms of caching.
Use Cases	Used mainly for not-too complex applications and also for CRUD project.	Excels greatly in complex projects and especially chat apps.

Conclusion

In this article, we started by introducing REAT and GraphQL. Next, we discussed and learned about the architectural style of REST and GraphQL. We also discussed the data fetching of both approaches. We saw different scenarios where REST and GraphQL will be used. We saw the ups and downs of each approach and how they can be used to solve different problems.

Further down, We looked at the flexibility and efficiency of both approaches. How performant they were, and also where they greatly lacked.
In conclusion, both are good in their ways; it all depends on where they are used. But we should be careful not to use anyone to where it might be an overkill for the scenario.