DEV Community: Sadiq Salau

Every website needs to fix this!!!

Sadiq Salau — Thu, 05 Feb 2026 07:22:25 +0000

Bad UX every website/PWA overlooks — the mobile navigation

Sadiq Salau ・ Feb 4

Bad UX every website/PWA overlooks — the mobile navigation

Sadiq Salau — Wed, 04 Feb 2026 12:35:45 +0000

Things are different when building a progressive web app compared to a regular website because you have to treat every part of it like a native app.

I have built several progressive web apps, and the most important thing to take care of is the mobile navigation. Once a user installs your PWA (hopefully), they expect it to behave exactly like an app.

Have you ever visited a website on a mobile device, then clicked something that triggered a modal, but the moment you pressed or swiped back, the entire site closed?

Yes! Not even the ChatGPT website handles mobile navigation properly. After clicking the login button, a dialog appears. The pattern for closing a dialog on mobile is by pressing or swiping back, but that wasn’t considered because you were expected to click on the overlay or the close button.

Compared to this progressive web app that handles the navigation properly - Pluxscore

We’ve been building the web with so much focus on mobile responsiveness while ignoring mobile navigation.

Mobile users (especially Android users) are used to swiping back to close modals/dialogs, navigate to another page, or interact with the website/PWA in different cases.

It was during the development of Pluxscore, the first progressive web app I worked on, that I encountered this problem.

In plain JavaScript, when a user swipes back on mobile, the current location is removed from the history stack. The solution is to control UI elements by storing their visibility state in a new navigation.

This means when a user interacts with a dialog trigger, we navigate to the same URL but with a different state.

I had two options for this: either by using the history.state API or URLSearchParams.

https://developer.mozilla.org/en-US/docs/Web/API/History/pushState#examples

/* When using history.state */
function openSidebar(){
  const state = { open_sidebar: true };
  history.pushState(state, "");
}

/* When using URLSearchParams */
function openSidebar(){
  const url = new URL(location);
  url.searchParams.set("open_sidebar", "true");
  history.pushState({}, "", url);
}

I tried URLSearchParams at first, but it makes the URL look like this:

https://example.com?open_sidebar=true

Using history.state is much better, as the URL doesn’t change and you can store serializable values in it.

Because I use React for my progressive web apps, I have to control this state through React Router.

A basic example of that would look like this:

import { useLocation, useNavigate } from "react-router";
import { useCallback } from "react";

export default function App() {
  const navigate = useNavigate();
  const location = useLocation();

  /** Track sidebar state */
  const isSidebarOpened = location.state?.isSidebarOpened || false;

  /* Open sidebar */
  const openSidebar = useCallback(() => {
    navigate(location, {
      state: {
        ...location.state,
        isSidebarOpened: true,
      },
    });
  }, [location, navigate]);

  /* Close sidebar */
  const closeSidebar = useCallback(() => {
    navigate(-1);
  }, [navigate]);

  return (
    <>
      <button onClick={openSidebar}>Open sidebar</button>
      {isSidebarOpened ? (
        <div>
          {/* Sidebar content */}
          <button onClick={closeSidebar}>Close sidebar</button>
        </div>
      ) : null}
    </>
  );
}

But in a complex UI, there are usually more elements that trigger a modal/dialog within a single page, e.g. a sidebar dialog, login dialog, post edit dialog, etc.
So I created two hooks specifically for this: useLocationState.ts and useLocationToggle.ts

useLocationState.ts
This hook provides an API similar to useState that allows one to push any serializable value into the history stack. It accepts a default value if the item doesn’t exist in the current location state.

Removing an item is done by simply navigating back or setting the value to undefined. In a scenario where the app was reloaded, it would navigate to the root.

//useLocationState.ts
import { useCallback, useMemo } from "react";
import { useLocation, useNavigate, type NavigateOptions } from "react-router";

export default function useLocationState<T>(
    key: string,
    defaultValue: T,
): [T, (value?: T, options?: NavigateOptions) => void] {
    const navigate = useNavigate();
    const location = useLocation();

    /** Current value */
    const value =
        typeof location.state?.[key] !== "undefined"
            ? location.state?.[key]
            : defaultValue;

    /** Set value */
    const setValue = useCallback(
        (newValue?: T, options?: NavigateOptions) => {
            if (typeof newValue !== "undefined") {
                navigate(location, {
                    ...options,
                    state: {
                        ...location.state,
                        ...options?.state,
                        [key]: newValue,
                    },
                });
            } else {
                if (location.key !== "default") {
                    navigate(-1);
                } else {
                    navigate("/", { ...options, replace: true });
                }
            }
        },
        [key, navigate, location],
    );

    return useMemo(() => [value, setValue], [value, setValue]);

}

useLocationToggle.ts
This is a wrapper around the useLocationState hook. It stores a boolean and provides a method to toggle the state.

//useLocationToggle.ts
import { useCallback, useMemo } from "react";
import { type NavigateOptions } from "react-router";
import useLocationState from "./useLocationState";

export default function useLocationToggle(
    key: string,
): [boolean, (status: boolean, options?: NavigateOptions) => void] {
    /** Current State */
    const [show, setShow] = useLocationState(key, false);

    /** Toggle Location */
    const toggle = useCallback(
        (status: boolean, options?: NavigateOptions) => {
            if (status) {
                setShow(true, options);
            } else {
                setShow(undefined);
            }
        },
        [key, setShow],
    );

    return useMemo(() => [show, toggle], [show, toggle]);
}

Putting it in use, we will have something similar to useState(), which makes it easier to replace existing code that uses useState().

export default function App(){
  const [opened, setOpened] = useLocationToggle("homepage-sidebar");
  return (
    <>
      <button onClick={()=>setOpened(true)}>Open sidebar</button>
      {opened ? (
        <div>
          {/* Sidebar content */}
          <button onClick={()=>setOpened(false)}>Close sidebar</button>
        </div>
      ) : null}
    </>
  );
}

In the demonstration above, the sidebar is controlled by its own state in the location, the same applies to the matches displayed. We can have a state that looks like this:

/* Sidebar */
{
    sidebar: true,
}

/* Match details */
{
    ['match-1234-details']: true,
}

Ever since then, I started implementing this across all the progressive web apps I build.

As the creator of PWABucket, I believe we can build progressive web apps that are fast, responsive, non-distinguishable from native apps and have good UX across platforms.

Same implementation can be seen in Parcel: (https://parcel.pwabucket.com).

Another example shown in the Tracker PWA: (https://tracker.pwabucket.com/)

The modern web has a lot of rich APIs that, if you build a progressive web app really well and pay extreme attention to detail, you can create truly engaging apps.

I build pixel-perfect progressive web apps. If you’re looking for someone to bring your app ideas to life, I’m currently open for work. Hire me: https://sadiqsalau.com.

Safe - a Sci-Fi themed PWA for encryption

Sadiq Salau — Mon, 11 Aug 2025 10:19:01 +0000

Safe - a progressive web app with an interface out of a Sci-Fi movie for encrypting text, image or file.

It's the newest app published on PWABucket.

PWABucket is an open-source app store for Progressive Web Apps.

Over the years, Progressive Web Apps have evolved significantly.
At PWABucket, we’re building offline-first apps that fully leverage the capabilities of the browser.

Every app at PWABucket is built to work offline first, with optional Google Drive syncing for users who want it.

Safe was created in mind as a tool for encrypting seed phrases generated through Keza, but can be used for encrypting other contents.

It uses AES-256 for encryption, processes and stores everything on the user's device (no internet connection).

To avoid re-encrypting entire files, Safe first generates a random password to encrypt the content. It then encrypts that password with the user’s access code.
If the access code changes, only the generated password needs to be re-encrypted.

Users can import and export entries, and manually encrypt or decrypt what we call a Safe bundle — a ZIP file containing the encrypted password and encrypted data.

Built with TypeScript, React, TailwindCSS, and Vite.

Safe: https://safe.pwabucket.com
PWABucket: https://pwabucket.com
GitHub organization: https://github.com/pwabucket
Source: https://github.com/pwabucket/pwa-safe

VSCode Auto-Import, why? 😭

Sadiq Salau — Sat, 15 Mar 2025 06:11:04 +0000

I debugged this for minutes...

Cpanel Git: Notes for Windows users

Sadiq Salau — Sat, 24 Dec 2022 16:15:38 +0000

If you are using windows (no WSL) purely for your development. There are things you need to put in place.

Setting up nodejs

You can grab an installer from https://nodejs.org/ to setup nodejs. Follow the guide at https://pnpm.io/installation#using-npm if you would also like to install pnpm.

Setting up PHP

Regardless of the stack you are using e.g XAMPP or WAMP, php needs to be added to PATH. This should automatically be taken care of when installing composer.

After setting up your stack, get composer installer at https://getcomposer.org/. You can follow the guide at https://mehulgohil.com/blog/install-composer/ to setup composer. Ensure to tick the box that says "Add PHP to PATH" when prompted.

Generating ssh keys

To generate ssh keys you can follow the guide at https://phoenixnap.com/kb/generate-ssh-key-windows-10

Cpanel Git: Part 3 - Deploying the Laravel API

Sadiq Salau — Sat, 24 Dec 2022 15:34:20 +0000

This part explains how to deploy our laravel application to our hosting.

As always every Cpanel Deployment requires a .cpanel.yml file and deploy keys.

Adding `.cpanel.yml`

Using the content of this github gist: https://gist.github.com/sadiqsalau/e1b8c416503c40769c0ecd10cdd1f345

We are going to create just two new files under our laravel project
.cpanel.yml
.deploy.example.sh

There is already a .gitignore at the root of our laravel application, we will just merge the content of .gitignore in that gist with ours.

Now open .gitignore and add .deploy.sh at the end

With that done, let's commit and push our changes.
git add .
git commit -m "Added cpanel deploy script"
git push

The .cpanel.yml file in that gist will download composer, install your application dependencies and run migrations.
Uncomment the line that run migrations if you want to run migrations.

Generating and adding deploy keys

Following the instructions in the first part of this series. We will generate another deploy key.

Open a new terminal and run
ssh-keygen -t ecdsa-sha2-nistp256 -C "your_email@example.com"

Rename your key. For this tutorial it will be called cpanel_laravel_example

You should add the public key to your github repository deploy keys. (Take a look at part 1 of this series)

Deploying to shared hosting.

Upload the new keys and set the permission of the private key to 0600 (take a look at the first part of this series)

Edit the config file under .ssh folder and register the new deploy key

Create a new cpanel repository

The deployment of the laravel project is similar to that of the react app. You will need to deploy thrice if you are running migrations.

Based on the content of .cpanel.yml in that gist:

First deploy will generate .deploy.sh file - edit if you want to deploy to a different folder - default is api folder at the root of your hosting
Second deploy will copy the laravel application to api folder at the root of your hosting unless the .deploy.sh file was modified, then it will download composer, install dependencies and generate .env for your laravel application.
Third deployment will not run unless a .env file has been detected. It will optimize your laravel app and run migrations if uncommented. Make sure to setup your .env file before running the third deployment.

Check the .cpanel.yml if confused.

Once deployed, your api folder should contain your laravel project.

A symbolic link to public folder of your laravel project will be created at public_html/api

A symbolic link to storage/app/public folder of your laravel project will be created at public_html/storage

This is the default behaviour unless you edit the .deploy.sh file to create links under a different directory. You can always customize your deployment.

Once the laravel project has been deployed go to the pull and deploy tab of your react app.

Update from remote then deploy again.

Visit your site again to see the result.

Cpanel Git: Part 2 - Consuming the Laravel API

Sadiq Salau — Sat, 24 Dec 2022 09:43:55 +0000

This is the second part of my post which will focus on connecting the react app with laravel.

The first thing to do is to scaffold a new laravel project. Ensure you've installed composer.

Scaffolding a new laravel app

We are going to use composer to create our new laravel app.

composer create-project laravel/laravel example-laravel-app

Once scaffolded navigate into your laravel app and initiate a git repository.

cd example-laravel-app
git init
git add .
git commit -m "Initial Project"

Once again head over to github and create a new repository and push to it.. For this tutorial it will be called cpanel-laravel-example

We are going to push to our exisiting repository, so we will follow the github commands.

Once pushed our repository should look like this

Connecting our react app to the laravel app on localhost

Now we are working with two repositories, you can add both of them under a workspace if you are using VSCode.

Let's open the first one: example-react-app

Open the file menu and add the example-laravel-app to workspace.

Editing laravel routes

Under the laravel project open routes/web.php

We will make our route to return the current server time..
So edit the code to this.

Route::get('/', function () {
    return [
        'status'    => true,
        'message'   => null,
        'data'      => now()
    ];
});

Once edited we will launch our laravel server. Let's open a terminal.

Click on the Terminal menu > New terminal

Select the laravel project

We will have our terminal

Let's start the server by running the command php artisan serve

Then open the link in the browser.

We got exactly what we are expecting.
Now let's commit and push our changes.
git add .
git commit -m "Updated route"
git push

Proxying react dev server request

Open vite.config.js under the example-react-app and add the server option. Read more at https://vitejs.dev/config/server-options.html

Update the config with this

export default defineConfig({
  server: {
    proxy: {
      "^/(api|storage)/.*": {
        target: "http://localhost:8000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  plugins: [react()],
});

We are going to proxy every request that begins with /api or /storage to the laravel server.

Also we added the changeOrigin option to avoid CORS error https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

We also need to rewrite the request path by removing /api/ from the beginning because a request to http://localhost:8000/api/ doesn't exist as we haven't defined any route to /api in our laravel application so it will be converted to http://localhost:8000/.

To test this let's open two terminals using the instruction earlier.
One for the react app and one for the laravel project.

Start the laravel server inside the terminal with php artisan serve

Start the react dev server the way you scaffolded it, in my case I used pnpm so it will be pnpm dev. Yours could be yarn dev

Open the react dev server link

Add /api/ at the end. Note the trailing / at the end of api, it's required because that's how we defined our proxy.

You will get the same response as you would if accessing the laravel server directly

With that done let's commit our changes under the react app.
git add .
git commit -m "Enabled proxy for /api and /storage"
git push

Fetching data

A real-world example will be to fetch data from the laravel server in our react app.
So let's edit src/App.jsx in our react app and update it will an effect that fetches the time.

function App() {
  const [loading, setLoading] = useState(true);
  const [time, setTime] = useState(null);

  useEffect(() => {
    fetch("/api/")
      .then((response) => response.json())
      .then((data) => {
        setTime(data.data);
        setLoading(false);
      });
  }, []);

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">{loading ? "Loading" : time}</div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  );
}

This is the result..

Now let's commit and push our changes in the react app.

git add .
git commit -m "Fetch and show time"
git push

A working example of the laravel project can be found at: https://github.com/sadiqsalau/cpanel-laravel-example

With all that done, the next part of this post explains how to deploy the laravel application to our cpanel shared hosting.

Cpanel Git: Part 1 - Deploying the React App

Sadiq Salau — Sat, 24 Dec 2022 04:00:33 +0000

This is my first post here.

I'm going to explain how to deploy a React App on a Cpanel Shared Hosting using Git. Ensure you have git and nodejs setup.

Scaffolding a new react app

You can use your preferred package manager e.g yarn, pnpm or using npx.

pnpm create vite@latest example-react-app

Read about vitejs at: https://vitejs.dev/guide/

Choose a framework
Choose a variant
Follow the remaining prompts

Initiate a git repository

Inside our newly scaffolded react app we are going to run the following commands
git init
git add .
git commit -m "Initial Project"

Creating a github repository

Head over to github.com and create a new repository. You can decide to create a private repository. For the purpose of this tutorial I will call it cpanel-react-example

Pushing to github

Since we have already initiated our github repository we are going to push our existing one. Now inside the react app we scaffolded earlier we will follow the github commands.

With that done, our github repository should look like this.

Adding the build action

We are going to create a new file .github/workflows/build.yml

If you don't understand this, inside your newly scaffolded app you will need to create a folder .github then create a folder workflows inside it. Finally you will create a file build.yml inside the workflows folder.

Edit the build.yml.

name: React App build workflow
on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-20.04
    strategy:
      matrix:
        node-version: [15]
    steps:
    - uses: actions/checkout@v3
    - uses: pnpm/action-setup@v2.2.4
      with:
        version: 7
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'pnpm'
    - name: Install dependencies
      run: pnpm install
    - name: Build
      run: pnpm run build
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist

What the script does is to build our react app and deploy it to the gh-pages branch whenever we push to the main branch. You can read more about github actions at https://docs.github.com/en/actions

We will commit our changes and push to github
git add .
git commit -m "Added github action"
git push

Once pushed we will have a new branch called gh-pages containing our deploy

Deploying to hosting

To deploy to your shared hosting you will need two items:

A .cpanel.yml file - Read more at https://docs.cpanel.net/knowledge-base/web-services/guide-to-git-deployment/
Deploy keys

Creating .cpanel.yml

The .cpanel.yml file is like the github action script but for cpanel. It contains the instructions on how to deploy the react app.

Navigate to the public folder of your react-app and create three new files
.cpanel.yml
.deploy.example.sh
.gitignore

We will edit our files using the content of this github gist: https://gist.github.com/sadiqsalau/c1b0f0e4b15e40274b64854c6c557e24

.cpanel.yml

This file is required for any cpanel deployment. It contains all command to deploy the react app. .cpanel.yml file can be destructive so make sure you take a look at it especially the parts that make use of the command rm -rf. Edit it to suit your deployment.

.deploy.example.sh

This file is an example of .deploy.sh. Treat it like a .env.example file

.deploy.sh

Based on the .cpanel.yml in that gist, this will automatically be created on your shared hosting when you run your first deployment. Treat it like a .env that exports variables that define the path where your react app will be deployed to on your hosting. Once created you should edit it before your next deployment.

.gitignore

Our .gitignore file will exclude .deploy.sh from being tracked by git.

With all three files setup, it's time to commit them. So we will run:
git add .
git commit -m "Added cpanel deploy script"
git push

Generating deploy keys

Open a new terminal and run
ssh-keygen -t ecdsa-sha2-nistp256 -C "your_email@example.com"
Note: Some shared hosting can't clone a repository using a key with password so when prompted to enter a password just press enter.

Also take note of where the generated keys are stored

We are going to rename our keys, for this tutorial they will be renamed to cpanel_react_example

Adding github deploy keys

Now go to your github repository, navigate to Settings > Security > Deploy Keys and add a new deploy key.

Give your key a title e.g Deploy key, for the key field copy the content of your public key (id_ecdsa.pub which we renamed to cpanel_react_example.pub). You can open the public key with a text editor or run the command cat key_name.pub with key_name being the name of your key.

As an example it should look like this

Finally add the deploy key.

Deploying to Cpanel

Login to Cpanel

Navigate to file manager

Creating .ssh folder

Click settings, enable hidden files and create a new folder named .ssh if it doesn't exist

Upload deploy keys

Open .ssh folder and upload your deploy keys

Change private key permission

Right click and change the permission of your private key to 0600

Create .ssh config

Still within our .ssh folder create a new file named config

Edit .ssh config

Edit replacing example-1 with your github repository name and example_1 with your ssh key name.

Host example-1.github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/example_1
  IdentitiesOnly yes

Once done return to cpanel dashboard

Creating a new cpanel repository

Navigate to Git Version Control

The Clone URL will have this format
git@example-repo.github.com:example-user/example-repo.git

The other fields should be filled automatically

Take note of the path to your repository.

Switching-checked out branch

Click on the manage button

Change the checked-out branch to gh-pages

Running first deployment

Switch to the Pull or Deploy tab

Before we deploy, let's open our repository in the file manager to see its contents

If you take a look at the files listed, you should notice that there is no .deploy.sh which we mentioned earlier. It will be created once we run our first deployment.
Let's return to the repository and deploy

Once it has been deployed a new file .deploy.sh will be created. It should be edited if you aren't deploying to the root of your site (usually the public_html folder).

Running the second deployment

Now return and run deploy once more.

Once deployed, navigate to the path where you specified in .deploy.sh, you should see the react app.

Visit the url of your site to see your live app..

Now whenever you make changes to your app and push to github just go to your repository, pull then deploy.

A working example can be found at: https://github.com/sadiqsalau/cpanel-react-example

The next part is using laravel as the API..

DEV Community: Sadiq Salau

Every website needs to fix this!!!

Bad UX every website/PWA overlooks — the mobile navigation

Sadiq Salau ・ Feb 4

Bad UX every website/PWA overlooks — the mobile navigation

Safe - a Sci-Fi themed PWA for encryption

VSCode Auto-Import, why? 😭

Cpanel Git: Notes for Windows users

Setting up nodejs

Setting up PHP

Generating ssh keys

Cpanel Git: Part 3 - Deploying the Laravel API

Adding .cpanel.yml

Generating and adding deploy keys

Deploying to shared hosting.

Create a new cpanel repository

Cpanel Git: Part 2 - Consuming the Laravel API

Scaffolding a new laravel app

Connecting our react app to the laravel app on localhost

Editing laravel routes

Proxying react dev server request

Fetching data

Cpanel Git: Part 1 - Deploying the React App

Scaffolding a new react app

Initiate a git repository

Creating a github repository

Pushing to github

Adding the build action

Deploying to hosting

Creating .cpanel.yml

.cpanel.yml

.deploy.example.sh

.deploy.sh

.gitignore

Generating deploy keys

Adding github deploy keys

Deploying to Cpanel

Login to Cpanel

Navigate to file manager

Creating .ssh folder

Upload deploy keys

Change private key permission

Create .ssh config

Edit .ssh config

Creating a new cpanel repository

Switching-checked out branch

Running first deployment

Running the second deployment

Adding `.cpanel.yml`