DEV Community: Ahmad Jamaly Rabib

Adding dd() in Wordpress development

Ahmad Jamaly Rabib — Mon, 27 May 2024 18:52:07 +0000

Hey folks! Hope you are all doing well. Today I just want to share a common topic, which is related to debugging in Wordpress. I do like default Wordpress debugging. It's just fine. But you know what I like most is the Laravel's dd() function. 😍

So let's just check where and how the functions works.

if (!function_exists('dd')) {
    /**
     * @return never
     */
    function dd(...$vars)
    {
        if (!in_array(\PHP_SAPI, ['cli', 'phpdbg'], true) && !headers_sent()) {
            header('HTTP/1.1 500 Internal Server Error');
        }

        foreach ($vars as $v) {
            VarDumper::dump($v);
        }

        exit(1);
    }
}

We found the dd() function inside the Symfony component var-dumper. Oh! I love Symfony. 😍
So let's check the function now.

\PHP_SAPI is a predefined constant in PHP. It tells us how the PHP script is being executed. So in the condition we found that !in_array(\PHP_SAPI, ['cli', 'phpdbg'], true) let's breakdown this:
\PHP_SAPI is being checked against an array containing 'cli' and 'phpdbg'. Here 'cli' indicates that the script is being run from the command line interface and 'phpdbg' indicates that the script is being run using PHP's interactive debugger. So this condition will be true if the script is not running in CLI or PHP Debugger mode.
headers_sent is a function that checks if HTTP headers have already been sent to the client. So if the header is also not sent then the condition will be true.
If both conditions are true then the server will send a 500 Internal Server Error response
In the next we found this foreach function which is the main part of our dd function.

foreach ($vars as $v) {
  VarDumper::dump($v);
}

So here $vars are actually items of collection. Then inside the foreach it calls the static dump() method inside the [VarDumper](https://github.com/symfony/var-dumper/blob/7.0/VarDumper.php) class.

After this foreach block there is a exit() function call to exit the operation. Pretty straight forward right!

Installation

To use this function in my Wordpress plugin I needed to install this component.

From my plugin directory I ran this command:
composer require --dev symfony/var-dumper.

It was installed. But to use this in my plugin I had to add autoload inside the init action hook.

add_action('init', function () {
            try {
                if (file_exists(__DIR__ . '/vendor/autoload.php')) {
                    require_once __DIR__ . '/vendor/autoload.php';
                }
            } catch (Exception $e) {
                logCatchException($e);
            }
        }, 10, 0);

So now I can call the dd() or dump() method inside any places from my plugin. And it perfectly shows the collection or array data.

public function schedule($postId, $timestamp, $opts)
{
    $timestamp = $this->convertLocalTimeToUtc($timestamp);
    dd($opts);
}

Here is the data:

array:4 [▼
  "expireType" => "change-status"
  "newStatus" => "draft"
  "category" => "0"
  "categoryTaxonomy" => "category"
]

That's all for today. Thank you all for reading it.

React Event Handling

Ahmad Jamaly Rabib — Mon, 19 Jun 2023 10:02:45 +0000

Hello there! 👋 We are going to learn about React Event handling today.

We know about the html event handling with Html and JavaScript. React does this event handling in a similar but kind of different way. We are going to deep dive on it today. 😁

Difference between HTML and React Events

First let's see how we do it in HTML and JavaScript. We created a simple button with a click event and once the button is clicked it will show in the browser console.

<button onclick="handleClick()">Click</button>

<script>
  function handleClick() {
    console.log("You have clicked the event");
  }
</script>

We will do the same thing for React now. We will use our previous code for state and will remove the props locale we passed from the App to Clock component.

function App() {
  return (
    <Clock />
  )
}

We will change the Clock locale based on the click event now. 💪🤗

Now let's create a button in React. 🎉🎊😁
Let's open our Clock component and update in the render method.

  render() {
    const { date } = this.state;
    return (
      <div>
        <h1 className="heading">
          <span>Hello <span>{this.props.children}</span> { date.toLocaleTimeString('en-US')}</span>
        </h1>
        <button>Click here</button>
      </div>
    );
  }

We can see that we have added a button. But the button isn't functional yet. So there is no event handling there yet. Let's work on it and find out the differences with html button click events. 😊

<button onClick={}>Click here</button>

We are adding an onClick event on the React button. Now let's see our html button onclick event.

<button onclick="handleClick()">Click</button>

Here we can clearly see that we are calling a string "handleClick()" not the function handleClick() on the html button click.

So why are calling a string?

This is because of not calling the handleClick() function when the page is loaded. But the handleClick() function will only be called when we click the button. Because that time the onclick event will trigger the handleClick() function.

Note that, in case of React events we need to write camelcase event. Like we are using onClick for React not onclick like we used for html events.

Also we are not calling string in React. We will call functions inside the curly braces onClick={}. Now let's create a handleClick function inside our Clock class component.

handleClick() {
  console.log("The button is clicked");
}

And in our onClick event let's call the handleClick function.

<button onClick={this.handleClick}>Click here</button>

We are using this.handleClick because it is inside the Clock class component. As the handleClick method is inside the class component we have to use this to call that method.

But we found another difference with the html event call with React. Look below codes

HTML => onclick="handleClick()"
React => onClick={this.handleClick}

In React we are not calling the handleClick function like HTML.

The reason is in HTML we are actually calling string but in React we are not calling the string.

So, in the case of React we directly call the handleClick function. It will actually call during page load. Not during the click event. 🤔

Let's go to the browser now and check.

So we can see that the handleClick function is working and the log message is showing.

Handling Default behavior

Let's think about a html link. It has a default behavior to go to the link provided. Let's see an example.

<a href="test.html">Click this</a>

We can see here that this is a link and when we click it will go to the test.html url. We can change this default behavior using return false; with the onclick event.

<a href="test.html" onclick="console.log('You have clicked the event'); return false;">Click here</a>

After updating we can see that this is no longer going to the url and we can see the log message Link is clicked in the console.

But in React we can not use return false; to prevent the default behavior inside DOM.

We can also prevent the default behavior using the preventDefault function when the event will be passed as parameter in JavaScript. And we can use this technique in React events also to prevent default behavior.

Let's go to our React project now. We can see that we have called the this.handleClick function. This handleClick function will actually get the event as a parameter. So we can write this function as handleClick(e) here e is the event. And then we will call the e.preventDefault()function to prevent the default behavior of that event.

  handleClick(e) {
    e.preventDefault();
  }

Now even if we change the button to link or submit button the default behavior will be prevented and we will only see what is inside the handleClick function.

<a type="button" href="test.html" onClick={this.handleClick}>Click here</a>

<button type="submit" onClick={this.handleClick}>Click here</button>

Update locale using React state and click event

Now, let's update the functionality of the handleClick function so that it can change the locale of the Clock when we click the button.

Let's first create a React state locale and set default to bn-BD. And update in our render function.

state = {date: new Date(), locale: 'bn-BD'}

render() {
  const { date, locale } = this.state;
  return (
    <div>
      <h1 className="heading">
        <span>Hello <span>{this.props.children}</span> { date.toLocaleTimeString(locale)}</span>
      </h1>
      <button type="submit" onClick={this.handleClick}>Click here</button>
    </div>
  );
}

We have changed to date.toLocaleTimeString(locale) from date.toLocaleTimeString('en-US').

And now let's update in our handleClick function and check in the browser.

  handleClick(e) {
    e.preventDefault();
    this.setState({
      locale: 'en-US'
    });
  }

Oh no! We got an error! 😭😱 It is saying Uncaught TypeError: Cannot read properties of undefined (reading 'setState')
But this didn't happen in our tick method. Why is it happening here? Let's find out.

So here the problem is we are getting this as undefined. Why is that?

Actually, here we are using the Clock component which is a class component. We might know that class is a blueprint of the object. So here we have this which is the object of the Clock class. By using this we can access all the properties of the Clock class.

So here in the render method when we use this.handleClick it is calling the handleClick method without any issues. But inside the handleClick method this isn't passed, just the reference is passed.

So what happens here is, After the click event this isn't instantly calling the handleClick function. Here it is just a callback function.

When the callback function is called, it can't find this that time. That's why we are getting this as undefined.

Fixing `this` issue

There are several ways to fix the this issue in the class component. Let's try to fix it now. 🎉🥳

1. Making handleClick method as arrow function.

Let's update our handleClick method to an arrow function.

 handleClick = (e) => {
    e.preventDefault();
    this.setState({
      locale: 'en-US'
    });
  }

We can do a console.log(this) inside the handleClick method to check this.

We can see that there is no error and we have successfully updated the state of locale to "en-US".

The reason why the arrow function works but the traditional function not working is because the arrow function doesn't use additional scope for it. So it didn't change this inside the function. Where our normal function has its own scope, so we couldn't access this inside our normal function.

This is one of the main reasons we use arrow functions in such cases.

2. Using bind

If we don't want to use the arrow function (although that is recommended) we can use bind to use this inside the handleClick function.

We need to create a constructor function and update it there.

constructor(props) {
    super(props);
    this.state = {date: new Date(), locale: 'bn-BD'}
    this.handleClick = this.handleClick.bind(this);
  }

And keep the onClick event function same as before.

onClick={this.handleClick}

So that's it!

We are doing the same thing inside the constructor. The bind method binds our object inside the handleClick method so we can access it inside the handleClick method.

So in the constructor we are telling that the this.handleClick is not the full function. this.handleClick means this.handleClick.bind(this) function where we are binding this and passing to handleClick function.

3. Passing Parameters to handleClick function
In this case we actually need to update where we are calling the function in the onClick event. We can actually do this. Instead of adding a constructor.

onClick={this.handleClick.bind(this)}

Also we can pass parameters from this onClick event.

onClick={this.handleClick.bind(this, 'en-US')}

By using this bind we can easily pass the parameters.
So the handleClick method can be updated to

handleClick(locale) {
    this.setState({
      locale
    });
  }

Easy right! 😁🤗

Also there is another way if we want to use arrow function on the onClick event.

onClick= {() => this.handleClick('en-US')}

This one is more easier! yay! 😁😄

That's all about event handling in React today. Thank you for reading. 🙏😊

Here is the github repository for todays code.

I might come out tomorrow with some new topics. Till then goodbye! 👋🙏🙌

Learning React State and LifeCycle

Ahmad Jamaly Rabib — Sat, 10 Jun 2023 19:33:01 +0000

Hello again! 👋😁

Last time we created React Components both class and functional but these aren't fully functional yet. Today we will look at how React components work independently using State.

From the Component section we found that Class Component is stateful. But we don't know what is state yet 😅. Let's find out about it. 🥳💪

So, let's first prepare our project to work with React State. Let's start with our Component files
react_component

Till now we haven't worked with data changes in React. React only changes two times.

When the data/state changes.
When there is change in the props from outside the Component.

We know that if we pass a parameter to the React component and we change the value of the parameter , in this case React changes.

This is called change by props. This can be controlled from outside of the Component. Like we did pass the locale props data to the Component from outside here.

function App() {
  return (
    <Clock locale="en-US"></Clock>
  )
}

In React, State is a memory of a component. It is like a database of the Component.

React works with virtual DOM first to compare the previous state with current state. If there is any change then it paints it in the browser DOM.

But State change only happens inside the React component and the data change should happen by "React way".

So, what is a "React way" data change?

As we have extended the React.Component class we can use the methods of the Component class of React, like we are using the render method.

Let's create the constructor method for the Clock class.

constructor(props) {
  super(props);
  this.state = { date: new Date() }
}

In the constructor function we will have the props as parameter. After that we are using super which calls the base class constructor method properties.

In this way we can use the Component class constructor method's all properties staying inside the Clock class.

Then we created the property this.state which is an object. In this state object we can define any types of properties.

Here, we have defined the date property inside the this.state object.

Now, we can use this.state.date instead of the new Date() inside the render method.

render() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello <span>{this.props.children}</span> { this.state.date.toLocaleTimeString(this.props.locale) }</span>
        </h1>
      </div>
    );
  }

By this way we prepared the methods so that it will update in case of any state change in the "React way".

We can also skip creating a constructor for class if we only need to initialize the state. We can use the public class field syntax to define the state.

state = {date: new Date()}

We have to use the setState method to change the data using the React way. But to do that, we actually need to know when to change the state before changing the state. 😏🤔🥴

This leads us to understanding the Component lifecycle. 🤗 Let's go through some of the methods of React lifecycle.

1. componentDidMount

This method is called immediately after a component is mounted in the real DOM.

This method isn't mounted when the rendering is done in React virtual DOM, it actually mounted when everything is compared, calculated and then when the final result is painted in the browser DOM.

But if we implement this method we also need to find out and update other lifecycle methods to avoid bugs.

2. componentDidUpdate

If we define this method, React will call it immediately after the component is re-rendered with updated props or state. This method isn't called for initial render.

We use it to manipulate the DOM after the update.

3. componentWillUnmount

If we define this method. React called immediately before the component is destroyed.

It performs any necessary cleanup in this method, such as canceled network requests, or cleaning up any DOM elements created in componentDidMount.

Now let's update our Clock class using some React LifeCycle methods. Let's first add the componentDidMount method to make the clock functional. We will use the setInterval method to make the change per second by calling the setState method. Inside the setState we will pass the updated object.

componentDidMount() {
  setInterval(() => {
    this.setState({
      date: new Date()
    });
  });
}

So in this way we have made our clock to self update.

But this timer is resource hungry right. And this will continue to run even if we go to another page or route.

So, to make it stop when we move to another route we will use another lifecycle method componentWillUnmount.

But let's first make a separate function tick for the this.setState.

tick() {
  this.setState({
    date: new Date()
  });
}

And now let's replace the codes inside componentDidMount.

componentDidMount() {
  setInterval(() => this.tick());
}

Now let's clear the timer. But to do this we will add another property this.clockTimer in which we will define the current date.

componentDidMount() {
  this.clockTimer = setInterval(() => this.tick());
}

componentWillUnmount() {
  clearInterval(this.clockTimer);
}

Yes! We are done with the proper functional Clock component. Now we can use this Clock anywhere! 🙌🙏🤗

I still have a lot of things to learn on State. I am still going through the React documentation for state.. Hope I will get a better understanding after going through it.

Here is the code for today's task.

Thank you for reading. If there is anything missing please comment. I will try to learn and update. Thank you! Bye! 👋🙏

Creating React Components and using Props

Ahmad Jamaly Rabib — Mon, 05 Jun 2023 06:09:35 +0000

Hi there! 👋 Today I am going to create Component using the created element which I created on last time.

Components are functional elements of React. In a component we can add different functionalities to prepare before the render.

We can re-use the components to create beautiful UI in a short time.

Why should we use React Components?

We have used React elements before right? It is a valid JS object and we could use dynamic variables inside the elements as we saw in previous post.

So why do we need React Components?

Let's change our previous element to a component.

const root = ReactDOM.createRoot(document.getElementById('root'));

function Clock() {
    return (
        <h1 className="heading" tabIndex={index}>
            <span className="text">Hello {new Date().toLocaleTimeString()}</span>
            <img src="" />
        </h1>
    );
}

root.render(Clock());

We created the Clock component in the above example. This component returns a React element.

We can render the component using html syntax.

root.render(<Clock />);

Using React components we can pass the variable as a parameter using the attribute of that component. These parameters are passed as objects.

function Clock({locale}) {
    return (
        <h1 className="heading" tabIndex={index}>
            <span className="text">Hello {new Date().toLocaleTimeString(locale)}</span>
            <img src="" />
        </h1>
    );
}
root.render(<Clock locale="en-US"/>);

We can make other calculations inside the function and then return the results in Component.

Amazing right! This is like dynamic elements. As React elements can not be dynamic. React introduces the Components. For these dynamic functionalities components are super useful.

Till now we have discussed the functional components. Now, let's learn about the Class component.

But the question is why do we need to use the Class component?

Class component is a stateful component. It means this can be returned to it again and again.

While using a functional component we couldn't find a way to make the component to change by itself, which can return the updated value each time the clock changes other than manually calling it again and again. This can be fixed using a stateful approach.

Now, let's update our functional component to a class component.

class Clock {
  print() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello {new Date().toLocaleTimeString()}</span>
        </h1>
      </div>
    );
  }
}

Here we created a Clock class and in that class we created a print method, which returns the element.

But we know that we can not call class. Class is a skeleton of the Object.

So we need to create an object first. Then call the print method from that object.

const ClockComponent = new Clock();
root.render(ClockComponent.print());

But this will not work if we set root.render(<ClockComponent />) like we used for Clock function before. The problem is React isn't understanding our Clock class as a Component.

So, what should be the workaround for this?
By making the class as a React component.

We can extend the Clock class by React Component class to make it a React component.

import React from "react";
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello {new Date().toLocaleTimeString()}</span>
        </h1>
      </div>
    );
  }
}

Now we have access to all properties of the Component class. Also it automatically creates an object inside the class.

We can use the render method now which is defined in the React Component class. Also we don't need to define any object to use the Clock class component.

We can just simply render the Clock class component. 🤗

root.render(<Clock />);

We can also pass parameters as attributes.

root.render(<Clock locale="en-US"/>);

Now Clock class can access the attribute using its props property. The React Component class already has the props property.

As our Clock class extends it, it also gets access to the props property. 😁

Now, let's access the locale attribute using props property.

import React from "react";
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello {new Date().toLocaleTimeString(this.props.locale)}</span>
        </h1>
      </div>
    );
  }
}

Here, this.props is the object. Here this is the object of the React Component. If we want to get the property inside the class we can call this.

From the above example we get that we can pass props outside and update the component.

We can separate these class components in different files and then we can export the class component.

Let's create a file Clock.jsx. Cut all the Clock component codes to Clock.jsx then export the Clock component.

import React from "react";

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello {new Date().toLocaleTimeString(this.props.locale)}</span>
        </h1>
      </div>
    );
  }
}

export default Clock

Then in the main.jsx file let's import the Clock component.

import ReactDOM from 'react-dom/client'
import Clock from './Clock';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock locale="en-US"/>);

That's it! We are done with creating components and exporting them. We can import and use that component in different locations.

From these Component examples we found that components are reusable. We can pass attributes to it and it will return the results.

This is similar to the html tags and attributes. Pretty easy right! 😍🥳

We can also add components inside another component.

Let's update the component tag with a separate closing tag.

<Clock locale="en-US"></Clock>

Now, we can put anything inside the Clock tag.

<Clock locale="en-US">Test children component</Clock>

To show the children properties we have to use the props again. We can find the children properties in this.props.children. Let's add this in our Clock component.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1 className="heading">
          <span>Hello {this.props.children} {new Date().toLocaleTimeString(this.props.locale)}</span>
        </h1>
      </div>
    );
  }
}

Now, we can see the children property in the browser.

We can also put components inside the component.

root.render(<Clock locale="en-US"><Clock locale="en-US"/><Clock locale="en-US"/></Clock>);

The result will be

We have to keep in mind that we should never change props inside the component.

When we change the attribute or child component of the React Component the render function is always called and the elements are reloaded. So if we change the prop that time it will again call the render function. As a result this will create an infinite loop and our application will crash. 😩

Now as we understand Components we can create reusable components and use them multiple times in our application to make a beautiful app.

Here is the github repo of today's exercise.

Thank you for reading. 🙏 I will try to write about the state and lifecycle in the next post. Till then bye 👋🙌

Learning React: Markup with JSX and Rendering Elements

Ahmad Jamaly Rabib — Thu, 01 Jun 2023 06:35:53 +0000

Hello there! 👋
Today I am writing about JSX and React elements.

In Learning React : JSX post I discussed my understanding of JSX. But today I will dive deeper with React Documentation on JSX and will check how we create React elements, use it with JSX and render using React DOM. 💪

JSX is a syntax extension for JavaScript which lets us write HTML like markup inside a JS file. It is just syntactic sugar that makes our development easier.

Let's first prepare our project to work with it. In the Installing React with Vite post we learned about installing react to our local machine. I have removed all the folders and files from src folder except App.jsx and main.jsx. Here is the github link of the skeleton project.

We know that React doesn't work with DOM and DOM elements. React has it's virtual DOM and it creates React elements.

Now let's create a simple React element in the main.jsx file.

import React from 'react'
const element = React.createElement('h1', null, 'Hello, world!');
console.log(element);

main.jsx file is our main file in the React project.
Let's see in the browser the console.log result of the element.

We can see the React element which is also a JS object unlike the HTML elements.

We can also create the same element using JSX in React. This time while working on the React project we don't have to include babel manually because babel is already included in the React project.

const element = <h1>Hello World!</h1>;
console.log(element);

This will provide the same result as the React.createElement.
We can show dynamic values to JSX using curly braces.

const element = <h1>Hello {name}!</h1>;

We can also use any valid JS expressions in JSX

const element = <h1>Hello {firstname + lastname}!</h1>;

JSX itself is a valid JS expression. We can return JSX expression in a function.

function getGreeting(user) {
    if (user) {
        return (
            <h1 className="heading">
                <span>Hello, {user}!</span>
            </h1>
        )
    } else {
        return <h1>Hello, user!</h1>
    }
}


console.log(getGreeting('rabib'));

We can also call the function inside the element.

function getGreeting(user) {
    if (user) {
        return (
            <span>{user}!</span>
        )
    } else {
        return <span>user!</span>;
    }
}

const element = <h1>Hello {getGreeting('rabib')}</h1>
console.log(element);

This is called Interpolation.

Now let's get some idea about Attributes in JSX
JSX attributes are not the same as HTML attributes.

JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects.
JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like class.

That is why in JSX attributes are mostly written in camelCase. For example we use className instead of class in JSX. Let's check the below element.

const element = (
    <h1 className="heading">
        <span className="text">Hello {new Date().toLocaleTimeString()}</span>
        <img src="" className="img-fluid"/>
    </h1>
);

console.log(element);

To create multiline element we use first bracket () to wrap the element contents. Otherwise if there there is a semicolon ; inside the element before ending, then JS expression will alredy set before ending the element. Which could create issues.

Here we are using className attribute which is added to React element object as props property element. Let's see in the console.

Also we can see from the console that by creating child elements inside the h1 tag we are creating child objects inside the React element object.

There are two child object elements for text and image and these are added as array elements inside the props of the parent object element h1.

Preventing malicious attack in React

To prevent any malicious attack React automatically escape the values inside the {}

So from now we might get the idea what React Element is. React element is the smallest building block of React.

Now let's print our React element in the browser. We will use ReactDOM library to render the React element in the browser.

We can see in our React project there is a index.html file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

We will render inside the root div.

let index = 0;
const element = (
        <h1 className="heading" tabIndex={index}>
            <span className="text">Hello {new Date().toLocaleTimeString()}</span>
            <img src="" />
        </h1>
    );
ReactDOM.createRoot(document.getElementById('root')).render(element);

We can see in the browser that the created element is shown.

Now let's update the time in each interval.

let index = 0;

const root = ReactDOM.createRoot(document.getElementById('root'));
setInterval(() => {
    const element = (
        <h1 className="heading" tabIndex={index}>
            <span className="text">Hello {new Date().toLocaleTimeString()}</span>
            <img src="" />
        </h1>
    );

    root.render(element);
}, 1000);

We can see from the above example that, only time is updating in the DOM. But inside the React virtual DOM the element is created each time. And react only updating the DOM after comparing the states inside the virtual DOM. Amazing! isn't it?

Normally, we will never create the element multiple times but we will change the data and based on the component we will update the UI based on the date change.

I will learn about how to create and use the component and share in my next post. 😊

I found it really helpful going through Writing Markup with JSX post from React official Documentation while learning JSX.

I have started posting about my learning for the last few days. Here are the previous posts about React.

Thank you for reading. Bye 👋

Installing React with Vite

Ahmad Jamaly Rabib — Tue, 30 May 2023 05:45:04 +0000

From the React Official Documentation I came to know that we have to use React frameworks like Next.js, Remix, Gatsby etc.

Also the create-react-app is no longer valid if we want to create a React app. 😞

From React's official documentation

You can definitely use React without a framework—that’s how you’d use React for a part of your page. However, if you’re building a new app or a site fully with React, we recommend using a framework.

But as a beginner I want to explore only the React library. That's why I need to install React in my local. To acheive this we can use bundler tools like Vite.

So let's start with the installation. 🤗😁
Let's first install Node.js. Then Let's scaffold our first Vite project for React.

With NPM:

npm create vite@latest

With Yarn:

yarn create vite

After enter there will be prompt to proceed. Next steps will be:

Enter Project name: … myreactapp
Select a framework: › React
Select a variant: › JavaScript + SWC

There will be several options to select which Framework/library/Language to select. We can select by moving the arrow keys.

After this the our react application will be created. In this case my React app name is myreactapp.

Now after all this We just have to

  cd myreactapp
  npm install
  npm run dev

Our react app will be ready and running.

Now let's open the URL http://localhost:5174/ in browser and see our created React app is running.

It is really great how Vite has made the steps really easy to install and scaffold any library. I have became a fan of Vite. I will try to go through the documentation of Vite later. 🙌

I will dive into development Application from now on. 🤞
Thank you for reading 🙏 will keep posting on my learning here. Till then bye 👋😄

Learning React: Virtual DOM

Ahmad Jamaly Rabib — Mon, 29 May 2023 02:07:54 +0000

Hello there! 👋 I have recently learned about React's Virtual DOM. Instead of manipulating DOM directly like jQuery, React creates its own separate DOM. Let's see how it works.

It is said that DOM read/write is slow, that's why the DOM element add/remove is slow. But the reality is DOM is really fast and the DOM element update/delete is similar to an object property adding or removing in JS. But why it seems that the DOM elements are not updating quickly is that the Render process in the browser after the DOM change.

Let's see the browser workflow first.

In the top image we are seeing that the browser follows several steps to show the contents.

At first the browser receives the HTML file and then parses it using its render engine and creates a DOM tree. In the DOM tree the created HTML elements stay as nodes.
Like the HTML document, browser parse the CSS file contents using CSS parser. After parsing it is created similarly like the DOM for CSS. It is called CSSOM. Where the styles also stay as nodes.
These Parsed CSS and HTML together makes Render Tree. This Render Tree goes between a phase called layout. In this phase the Render tree coordinates are calculated and the elements are attached. So in this phase the render tree has all the information like the HTML, Style and the coordinates where it will paint the elements.
After that the painting phase is done based on the Render Tree nodes information.
And in the last stage the page is displayed to the end users.

So when we update anything in the DOM, the browser re-run the process again. All the HTML elements creation and positioning, CSS style information re-calculation is done again and after all this the page is repainted and displayed.

Although the modern browsers do these things in a very fast way, for better UX currently most of the web applications are made as SPA (Single Page Application).

While using SPA we have to handle lot's of DOM operations. Usually we can see that the web applications make 100's of DOM manipulation for single actions. 🥹😭😩

When we will make these large amounts of DOM manipulation it is likely to be affected after some time in our application. But we have to do it anyway. 😞 So to minimize the effect in the performance we can try these two things.

Doing Batch Update 🤞
Try to do as less DOM operation as possible 😅

Let's see an example for the batch update here. Let's first create a HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <div class="container">

    </div>
    <script src="./dom.js"></script>

</body>
</html>

Now let's create the dom.js file.

let increment = 0;

let container = document.querySelector('.container');

// slow
while (increment < 50000) {
    increment++;
    container.innerHTML += ' ' + increment;
}

In the dom.js file we can see that we are updating the container html for each increment in the while loop. So here the DOM operation is happening 50000 times. Which is a lot! And for this the page loads after a long time of waiting.

Now let's update the dom.js file. Let's create a blank array and push the numbers to the array for each increment.

let array = [];
let increment = 0;

let container = document.querySelector('.container');
// fast
while (increment < 50000) {
    array.push(++increment);
}

container.innerHTML = array.join(' ');

So after all the elements are pushed to the array we can just put the array elements inside the container html using array.join(' '). So this only takes one DOM operation and the page loads instantly.

From this above example we can clearly see that due to too much DOM operation our page loads slowly. But with just simple modification we can achieve faster page load while getting the same output. This way is called batch update.

We can do batch update without using virtual DOM or React. But if we want to update DOM only for the element which is updated we need to use Virtual DOM.

To achieve this DOM should have two separate snapshots before updating the element and after updating the element. So that it can compare between these snapshots to check where to update.

But using DOM to do this task is difficult and it creates problems also it would take a lots of resource which could bring more problems. So React created Virtual DOM to achieve this feature.

So what is Virtual DOM?

It is a playground DOM for React, where React makes the changes.
It works similar like the browser DOM but there are no repainting steps here.
Only the JS elements are created/updated here. All the updates are done inside the virtual DOM, so there is no pressure on DOM to add/update the elements. 🤗

How does Virtual DOM work?
We can think of a Virtual DOM as a tree. Where the nodes are different components. If there is any change in the state of a node then it creates a new tree. In the new tree all the changed components and new components are newly created.

So, in this case React can compare the previous state and new state in the Virtual DOM to check which element in which position is changed. There is an efficient algorithm to compare the previous and later states. This algorithm is called the diffing or reconciliation algorithm.

Now let's see how normal DOM and virtual DOM works in case of updating elements with two examples using Reactive way.

Working with normal DOM
let's first create the HTML file.
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Tutorial</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <ul id="fruits"></ul>
        <br>
        <p>
            <input type="text" id="input">
        </p>
        <button id="button" onclick="addItem()">Add Item</button>
    </div>
    <script src="./dom.js"></script>
</body>
</html>

In the HTML file we can see that there is a ul list element area for elements.
Also there is a text input area and button to add items.
Now let's update in the dom.js file.

// Let's first declare the variables

const display = document.getElementById('fruits');
const button = document.querySelector('#button');

let fruits = ['mango', 'guava', 'apple', 'orange'];

From the above code we can see that we have initialized the variable display for ul element and button. Also created an array for the initial lists of fruits.

Now let's create a function init and call to append and sort the fruits elements inside the display.

const init = function () {
    display.innerHTML = '';
    let liElements = '';
    fruits.sort().forEach(fruit => {
        let item = document.createElement('li');
        item.textContent = fruit;
        liElements += item.outerHTML;
    });
    display.innerHTML = liElements;
}

// Using appendChild
const init = function () {
    display.innerHTML = '';
    fruits.sort().forEach(fruit => {
        let item = document.createElement('li');
        item.textContent = fruit;
        display.appendChild(item);
    });
}

init();

During button click we will call the addItem function. So now let's add this function.

const addItem = function () {
    fruits.myPush(document.getElementById('input').value);
}

In the above code we are seeing that the new input value will be passed as a parameter in the myPush function.
We need to create the myPush function as a custom array prototype function.

Array.prototype.myPush = function (...a) {
    this.push(a[0]);
    init();
}

In this Array.prototype.myPush function we are pushing the elements to the array and calling the init function.

So here the array is fruits and if we call the function using fruits.myPush('banana') then banana will be passed as parameter and it will be pushed to the fruits array. 🥳

Now let's see how the things gets re-rendered when we add any element in the DOM.

Let's first open dev tools in Chrome. From the options->More tools select Rendering.

Then from the Rendering tab check Paint Flashing.

Then open the index.html file in the browser or use the live server plugin to open the page. Now let's see how the rendering is done.

From the rendering example we can see that all the elements are re-rendering and repainting when any element is added in any position. 😕

Now let's create the same project using React to take advantage of Virtual DOM. 😎
First let's create the index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Tutorial</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="root"></div>

    <!-- Load React. -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel" src="./fruits.js"></script>
</body>
</html>

Now let's create and modify the fruits.js file. We will see the state changes by tracking using the useState hook.

The React useState Hook allows us to track state in a function component.

const domContainer = document.querySelector('#root');

const Fruits = () => {
    const [fruit, setFruit] = React.useState('');
    const [fruits, setFruits] = React.useState(['mango', 'guava', 'apple', 'orange']);
};

Above we can see that we created a component Fruits where we are destructuring the returned values from useState.

We have two const variables [fruit, setFruit] and [fruits, setFruits].

Here fruit and fruits are the current state and setFruit and setFruits are the functions that are used to update the states.

The initial state of fruit is an empty string, React.useState('').

And the initial state of fruits is an array of fruits, React.useState(['mango', 'guava', 'apple', 'orange']).

Now let's update the states in the Fruits component.

const domContainer = document.querySelector('#root');

const Fruits = () => {
    const [fruit, setFruit] = React.useState('');
    const [fruits, setFruits] = React.useState(['mango', 'guava', 'apple', 'orange']);

    return (
        <div className="container">
            <ul id="fruits">
                {fruits.sort().map((fruit, index) => (
                    <li key={index}>{fruit}</li>
                ))}
            </ul>
            <br />
            <p><input type="text" value={fruit} onChange={(e) => setFruit(e.target.value)} /></p>
            <button onClick={() => setFruits([...fruits, fruit])}>Add Item</button>
        </div>
    );
};

ReactDOM.render(<Fruits />, domContainer)

From the return area of the component we can see that we are updating the states during key input and button click. Now let's run the project in the browser and see how the render is done while using React state.

From the top result examples we can see that React efficiently updates the state and updates in that specific area in the DOM.

So from the examples of React Virtual DOM and browser DOM we can say that both are fast but Virtual DOM works in a more efficient way that's why it looks like it is working faster. 🙌😍

This is all from my today's learning. I will keep posting everyday from learning React. Thank you for reading. Bye 👋

I have started posting about my learning for the last few days. Here are the previous posts about React.

Learning React : JSX

Ahmad Jamaly Rabib — Thu, 25 May 2023 10:33:01 +0000

I am continuing to learn React. It is my second day learning React. If you are only reading this article then you can also visit my experience of learning React on Day 1. 😄

Let's hope I will get the knowledge to work with React very soon and just not learn then forget. 😁😅

So, yesterday we stopped after creating a React element using the React.createElement() method. 😎
Today we will learn about JSX-> JavaScript XML.
JSX looks almost like HTML and it is really easy to use while using React.

So I am creating a similar React component for the increment button that we did in vanilla JS yesterday. Let’s update in the increment.js file.

const domContainer = document.querySelector('#root');
const reactIncrement = (
    <div>
        <h1 id="display">0</h1>
        <div>
            <button id="button">Increment +</button>
        </div>
    </div>
);

ReactDOM.render(reactIncrement, domContainer);

Here as we can see I have simply written JSX to render the element in the root div. Let me run the html now. But I got an error in the console. 😞

Uncaught SyntaxError: Unexpected token '<' (at increment.js)

The reason for this error is Javascript doesn't recognize the JSX tags we have used. Even though I renamed the increment.js file to increment.jsx (As I am now using JSX :wink:) it didn't work. 😟

To get rid of this situation at last we found a way. We need to use a transpiler.
Transpilers are tools that convert one programming language into another language. 😲
In this case of React we will use Babel as a Transpiler. Babel will convert our JSX codes to vanilla JS.
There are also other use cases of Babel to help us coding without worring about the compatibility of different browsers. 😍

Here I checked my JSX code in babel.io website how it converted our JSX code to JS.

So let's go to babel website -> setup -> In the browser link and copy the babel script to our html file. Also let's add the increment.js script type to "text/babel".

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel" src="./increment.jsx"></script>

Now when we run the html in the browser we can see that the counter button and display is appearing and there is no console error.

Let's add the increment functionality in the JS file. Let's first create an Increment method.

const Increment = () => {};

Now let's copy the JSX codes we wrote before in the increment.js file inside the function, so that this Increment method returns that JSX code.

const Increment = () => {
  return (
    <div>
        <h1 id="display">0</h1>
        <div>
            <button id="button">Increment +</button>
        </div>
    </div>
  );
}
// Render Increment
ReactDOM.render(<Increment />, domContainer);

We are still viewing the same button and display with no functionality update till now. 😒

Now let's copy the increment functionality from the vanilla JS code that we wrote yesterday in our increment.js file.

const domContainer = document.querySelector('#root');
const Increment = () => {
  return (
    <div>
        <h1 id="display">0</h1>
        <div>
            <button id="button">Increment +</button>
        </div>
    </div>
  );
}

let number = 0;

let button = document.querySelector('#button');
let display = document.querySelector('#display');

button.addEventListener('click', () => {
    number++;
    display.textContent = number;
});

ReactDOM.render(<Increment />, domContainer);

Did we get what we wanted? No! 😞
I got a console error after copying this.

Let's fix this issue now.

So from the console error we found that the button is null. That means the button is not defined. So it seems we are calling the button event even before the button is initialized and rendered by calling the Increment function.

So now let's render the elements first before calling the button.

ReactDOM.render(<Increment />, domContainer);

let number = 0;

let button = document.querySelector('#button');
let display = document.querySelector('#display');

button.addEventListener('click', () => {
    number++;
    display.textContent = number;
});

It works now!

But does it solve the problem? Can we use multiple components this way? Let's say we want two counters. Will it work? This is the reason we are working with React right?
The answer is no. 😭 We still haven't achieved what we want.

I tried adding the Increment component multiple times in the render.

ReactDOM.render(<><Increment /><Increment /><Increment /></>, domContainer);

The functionality should work independently, but it didn't.

In the above image we saw that only the first component is working but the others aren't.

The main reason for the above issue is that we aren't doing things in React way. Now let's do our coding in the React way. 💪

React tells us that we shouldn't manipulate DOM. But in our code we are still selecting DOM components, creating counter variable then updating counter using DOM manipulation. Which is actually prohibited in React.

So let's first remove our button and display counter functionality code.

To achieve this functionality using React we need to use State.

State is a built-in React object which is used to contain data or information about the component.

So in our counter functionality what is the state? This is our number variable. Because only this data is changing and based on this our components' content is changing.

Now let's use this knowledge to create a State inside the Increment function.

const Increment = () => {
    const counter = React.useState(0);
    ...
};

So what did I do there? I am using useState and setting an initial value which is 0 in this case. Let's do a console.log(counter).

So, it returns an array which has two elements.
The first one is the value we set for the state and the second one is a function.

This function actually helps us by returning an updated value based on the parameter we will pass to the function.

So, this function updates the state and triggers a re-render of our component.
This can be used like this:

const [state, setState] = React.useState(initialValue);

Let's update our Increment method now.

const [counter, setCounter] = React.useState(0);

Here we created the setCounter function which we will call during the button click event. So our updated button will be:

<button id="button" onClick={ () => setCounter(counter + 1) }>Increment +</button>

I am using JSX. The onClick function isn't the same as normal HTML. Couldn't find the issue the first time. Also I am using curly braces {} not quotation " like we used to use in HTML. Found these differences in JSX for now. I need to get used to it 😆

To show that counter in the display we will update our display area where we will bind the counter variable inside h1.

<h1 id="display">{ counter }</h1>

So after the updates I have now successfully created a React component, which is reusable and can be used several times. And most interestingly I can call this multiple times and can have multiple independent components without writing more codes. 😅

This is my JS code now.

const Increment = () => {
    const [counter, setCounter] = React.useState(0);
    return (
        <div>
            <h1 id="display">{ counter }</h1>
            <div>
                <button id="button" onClick={ () => setCounter(counter + 1) }>Increment +</button>
            </div>
        </div>
    );
};

ReactDOM.render(<div className="container"><Increment /><Increment /><Increment /></div>, domContainer);

I have called the Increment method 3 times and it is now working fine!

Here is the github link for the two projects I have worked till now.

This is all for today. I will try to learn about React DOM tomorrow. Hopefully write something from that. Till then bye! 👋

At last I am learning React: Day 1

Ahmad Jamaly Rabib — Wed, 24 May 2023 10:21:44 +0000

It is strange that after all these years I still haven't learned React. 😞 😓

I was still using vanilla JS and jQuery in my projects. Until now I am determined to work on some projects where I need to use React. At last! 😅

I have started learning React a few times before but then couldn't keep up. 😒 😭 But this time I will try to be consistent. I am learning from this React JS Tutorial Bangla Series for Beginners | Think in a React way playlist in youtube. This is in Bangla tutorial from
Learn with Sumit - LWS - Bangladesh. I love the contents of this tutorial. This is better than paid courses. And whatever I will learn each day I will post here.

So, why React? 😒

React is not a language like Javascript. It is a library made with Javascript. We create interactive UI using React.

But we can create UI with Javascript or jQuery right? Like I have been doing this for years. Then why do we need React? 😒

Actually React is introduced to make scalable larger applications with less hassle. Let's look at this JS code below.

let number1 = 0;
let number2 = 0;


let button1 = document.querySelector('#button1');
let display1 = document.querySelector('#display1');
let button2 = document.querySelector('#button2');
let display2 = document.querySelector('#display2');


button1.addEventListener('click', () => {
    number1++;
    display1.textContent = number1;
});


button2.addEventListener('click', () => {
    number2++;
    display2.textContent = number2;
});

In this JS code I created two buttons and two display areas to implement counters. If I click the buttons the display counters will increment independently. So now imagine I want to create hundreds of elements and events using Vanilla JS. How can we manage this? It is possible but I am afraid how much time and effort it would take to make that possible.

So to make it possible and to make the lives of the developers easier in 2011 React was first introduced by Jordan Walke. It was named FaxJS first. It was named ReactJS in 2013 and made open source. 😌

Lets see how React works to make and manage components.
Let's first create the html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Counter</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
</body>
</html>

Now let's create a div inside body with the id root.

<div id="root"></div>

Our React application will be generated inside this root div. This means whatever components we create will be inside this root div.

Also let's not forget to include the react library scripts inside the body.

    <!-- Load React. -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

Here we can see that we have included two scripts. One is react and another is react-dom.
Here the react library generates HTML inside the root div.
And the react-dom library renders the HTML elements which are generated by the react library inside the root div in the HTML file.
Now let's add our script in the html file.

<script src="./increment.js"></script>

By doing this we have already set up our html file. From now on we will not add anything extra in the html. We will just write the JS code in our increment.js file. 😌

Let's now open 📂 the increment.js file and check if we are loading the react and react-dom libraries in this file by using console.log(). ⤵️

console.log(React);
console.log(ReactDOM);

As you can see from the above image, the React and ReactDOM library are both loaded. If you are seeing the same in the console area then we have successfully loaded the react libraries.

Now let's jump into creating components in React. Let's update in the increment.js file. First let's get the root div element using querySelector in the variable domContainer.

const domContainer = document.querySelector('#root');

Then we will call the render method in ReactDOM. This render method receives two parameters. In the first parameter we pass what to print and in the second parameter we pass where to print. Let's look at the below code:

ReactDOM.render('Hello world!', domContainer);

In this way text will be shown in the root div. We created an HTML element this way. Now let's add React elements to the root div using React.

React uses React.createElement method to create elements.

let newElement = React.createElement('div', null, 'Hello World!');
// Render inside root div
ReactDOM.render(newElement, domContainer);

From the createElement method we can see that it has 3 parameters.

We can define which type of element we want to create. We added div.
Data to pass inside that element. We passed null;
Content inside that element. We passed Hello World! In the content parameter we can also pass another React element. Check the below code:

// Passing React content in the 3rd parameter
let pElement = React.createElement('div', null, React.createElement('p', null, 'Hello World!'));

We can also pass multiple React Elements.

// Passing Multiple React contents
let multiElement = React.createElement('div', null, [
    React.createElement('p', null, 'Hello World!'),
    React.createElement('p', null, 'New World!'),
]);

It's good right? But yeah maybe creating normal html was a bit easy for us.
But let's see how browser works in any webpage.

We can see that Browser actually parses the Web page then by createElement creates DOM. 😲

In the same way React also creates elements and creates a separate DOM for React. Which we call Virtual DOM. 🔥

But to make markup like HTML while using React it gives us a markup syntax. Which is called JSX.
Here JSX means JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. 😍

I will try to learn about JSX tomorrow. See ya! 👋 Thanks for reading. I will try to keep my pace from now on. 🙇

Managing different scripts in separate pages while using barba.js

Ahmad Jamaly Rabib — Wed, 10 May 2023 10:58:48 +0000

Those who don't know about barba.js, Barba.js is a small (7kb minified and compressed) and easy-to-use library that helps you create fluid and smooth transitions between your website’s pages. It makes your website run like a SPA (Single Page Application) and help reduce the delay between your pages, minimize browser HTTP requests and enhance your user’s web experience.

I am using barba.js for this website Visit Suruga and it is performing really well. You can visit the website and check how the smooth transitions are working.

But everything isn't perfect. Same goes for barba.js.

Lets see how barba.js works:

Barba.js follows a specific DOM structure.

<body data-barba="wrapper">
  <!-- put here content that will not change
  between your pages, like <header> or <nav> -->

  <main data-barba="container" data-barba-namespace="home">
    <!-- put here the content you wish to change
    between your pages, like your main content <h1> or <p> -->
  </main>

  <!-- put here content that will not change
  between your pages, like <footer> -->
</body>

Barba.js will only update the contents which are inside the data-barba="container". Other parts of this DOM will remain the same what we had during the page load.

For this feature we have to load all the scripts, styles, libraries during the page load. Even if that page isn't using those style or script, which eventually make the initial page loading a bit slower.

Normally almost all pages has the same style and scripts needed. But there are few pages which requires extra libraries or styles. If we don't load those libraries the functionality will not work on those pages.

To fix this issue we took the advantage of the data-barba-namespace attribute. Normally it is used for Transition rules and Views.

So we set the page name spot in the data-barba-namespace value in that page. And we also did added the library scripts in the bottom of the page (If we load the page first time). And after that based on the namespace value we added the same script inside barba hook.

barba.hooks.enter((data) => {
   if (data.next.namespace === 'spot') {
     // Initialize library
   } 
});

By doing this even if we go to the spot page after transition from another page the library will be initialized in the page. So there will be no more error and the initial loading time of the index page will be reduced.

That's all for today. Thank you for reading!

How I am using composer to install Dolibarr modules

Ahmad Jamaly Rabib — Mon, 08 May 2023 18:12:20 +0000

Those who don't know about Dolibarr, Dolibarr is a Open Source ERP and CRM system for businesses. It's codebase is written in PHP.

Here is the repository if you are interested. btw I don't think any developer will be comfortable working on this codebase first time 😅

It had a composer file to manage some dependency before but in the current stable version it is disabled. You can check the commit message here 😜

So anyway, to install any module we need to zip the module and upload via Dolibarr admin panel. Or we can copy the module to the htdocs/custom folder area. 😐

But it causes some issues when we are continuously updating modules and managing version control system for modules.

Also it causes some security risk when we open the upload functionality of the modules. 😱

And honestly why we shouldn't use composer to install modules? It felt like I am in the age of Dinosaurs. 🙄

So what we did was simple. Initialize the dolibarr project with composer. Created separate repositories for the modules.

And when we need to install any modules we just need to add that in the composer.json file.

{
    "name": "dolibarr/dolibarr",
    "description": "Dolibarr ERP & CRM is a modern and easy to use web software to manage your business",
    "license": "GPL-3.0-or-later",
    "require": {
        "myproject/dashboard": "dev-master",
        "myproject/report": "dev-master"
    },
    "repositories": [
        {
            "url": "git@github.com:myproject/dashboard.git",
            "type": "git"
        },
        {
            "url": "git@github.com:myproject/report.git",
            "type": "git"
        }
    ],
    "config" : {
       "vendor-dir" : "../vendor"
    }
}

I did install the modules outside the project folder in the vendor directory and created symlink to show this as the custom folder inside htdocs directory.

And in the modules I added composer.json to make the module repositories as packages. Here is the composer.json file of the module

{
    "name": "myproject/dashboard",
    "description": "This module shows custom dashboard",
    "type": "dolibarr-module",
    "license": "MIT",
    "authors": [
        {
            "name": "Ahmad Jamaly Rabib",
            "email": "rabib@japantravel.com"
        }
    ],
    "require": {}
}

I have kept the require as empty as it is not needed now but we can modify based on our needs.

So in this way whenever we add/update any module in our dolibarr main project we just need to run composer install or composer update. No need to copy the folders or making zip files to upload from dolibarr dashboard. 😎🥳

We can do the same approach for any PHP projects to reuse codes and reduce complexity. 😇 Thank you for reading!

Wordpress: Getting out of meta queries

Ahmad Jamaly Rabib — Fri, 03 Feb 2023 19:19:35 +0000

I recently faced a really weird issue. I need to fetch data for event posts where the scenario is

There are two meta keys start_date and expire_date.
I need to show all the events where these posts expire_date value is greater than today's date and the events start_date should be less than or equal today's date. Pretty straight forward right?
But here is a catch. I also need to add a query where the start_date id greater than today's date. This can be a OR condition where I need to show the events in both of these cases.

So normally what I did was to create a meta_query where the relation will be OR at first then for the expire_date and start_date condition an array with AND condition. In another array other condition for the greater start_date.
It looks like this:

'meta_query' => [
            'relation' => 'OR',
            [
                [
                    'key' => 'start_date',
                    'value' => date('Y-m-d'),
                    'compare' => '<=',
                    'type' => 'DATE'
                ],
                [
                    'key' => 'expire_date',
                    'value' => date('Y-m-d'),
                    'compare' => '>=',
                    'type' => 'DATE'
                ],
                'relation' => 'AND'
            ],
            [
                'key' => 'start_date',
                'value' => date('Y-m-d'),
                'compare' => '>',
                'type' => 'DATE'
            ]
        ];

This actually giving the correct result but it made the query complex. It made several inner joins and the condition was not efficient. So it was taking a lot of time to show the event results.
These are the joins made for this meta query:

INNER JOIN wp_postmeta ON (wp_posts.ID = wp_postmeta.post_id)
    INNER JOIN wp_postmeta AS mt1 ON (wp_posts.ID = mt1.post_id)
    INNER JOIN wp_postmeta AS mt2 ON (wp_posts.ID = mt2.post_id)
    INNER JOIN wp_postmeta AS mt3 ON (wp_posts.ID = mt3.post_id)
    INNER JOIN wp_postmeta AS mt4 ON (wp_posts.ID = mt4.post_id)

Here is the where condition only for this meta_query:

wp_postmeta.meta_key = 'start_date'
        AND((mt1.meta_key = 'expire_date')
        AND(((mt2.meta_key = 'start_date'
            AND CAST(mt2.meta_value AS DATE) <= '2023-02-03')
        AND(mt3.meta_key = 'expire_date'
            AND mt3.meta_value >= '1675350000'))
    OR(mt4.meta_key = 'start_date'
        AND CAST(mt4.meta_value AS DATE) > '2023-02-03')))

It was taking almost 30 seconds to 1 minute to fetch all the event datas and showing.
So I removed all the meta queries and replaced with the wpdb query to write custom queries.

From this above meta_query I replaced it. Queried to get the id's from two separate conditions for start_date and expire_date then merging these two arrays. Removed extra joins and too much complex meta_queries.

$ids1 = $wpdb->get_col("`QUERY for the expire and start date`");
$ids2 = $wpdb->get_col("`Query for start_date post ids`");

$ids = array_merge($ids1, $ids2);
in the wp args 'post__in' => $ids

Above wpdb queries made my query clear and I also understood what I was doing. It's performance improved. And I am now feeling relax! 😅
See you again! 🫶