Modern web applications often rely on authentication tokens stored in the browser's localStorage to manage user sessions. During development, teams frequently work across multiple environments—such as a deployed development server and a local localhost instance.

A common workflow challenge arises:
Developers must log in to the development environment, manually copy the access token from localStorage, and paste it into the local environment's localStorage to authenticate their local React app.

This process is:

• Repetitive: Every time the token expires or a new session is needed, the process must be repeated.

• Error-prone: Manual copying and pasting can lead to mistakes, such as copying the wrong value or pasting into the wrong key.

• Time-consuming: Interrupts the development flow and wastes valuable time.

The Solution: Automating LocalStorage Sync with a Chrome Extension

To address this pain point, our team built the LocalStorage Sync Chrome Extension.

Try it out:
Clone the LocalStorage Sync Browser Extension, load it into Chrome, and streamline your development process today!

How Does It Work?

1. Configure Once:
   Set the source environment URL (where you're logged in), the target environment URL (your local app), and the localStorage key (e.g., access_token) in the extension popup.

2. One-Click Sync:
   Click "Sync Now" in the extension. The extension:

   • Reads the token from the source environment's localStorage.

   • Writes the token to the target environment's localStorage.

   • Reloads the target tab so your app picks up the new token.

3. No More Manual Steps:
   No more opening DevTools, copying, switching tabs, and pasting. The extension automates the entire process.

Benefits

• Saves Time: Reduces a multi-step manual process to a single click.

• Reduces Errors: Eliminates mistakes from manual copying and pasting.

• Boosts Productivity: Lets developers focus on coding, not on repetitive setup tasks.

• Easy to Use: Simple configuration and persistent settings for repeated use.

Conclusion

If your team is tired of manually syncing authentication tokens between environments, the LocalStorage Sync Chrome Extension is a simple, effective solution.
Automate the tedious parts of your workflow and get back to building great applications!

"This user cannot be matched to an Atlassian account."

Why? Because Git is still using your personal email and username from your GitHub setup.
Good news: you don’t need two laptops or endless git config switches — you just need to tell Git which identity to use per repository.

🐞 The Problem

By default, Git uses your global config, meaning:

git config --global user.name "Your Personal Name" 

git config --global user.email "you@personal.com"

So, whether you’re in your weekend side project or your company’s Bitbucket repo, Git thinks you’re the same person.

That’s why Bitbucket can’t match your personal email to your Atlassian account.

🛠️ The Fix: Set Identity Per Repo

Let’s make Git smart enough to use work details for Bitbucket and personal details for GitHub.

1. Go to your Bitbucket project folder

     /path/to/bitbucket-project
   

2. Set work-specific details

    git config user.name "Your Work Name" 
    git config user.email "your-work-email@company.com"
   

   💡 This writes settings to the repo’s .git/config file — leaving your global GitHub settings untouched.

3. Check it worked

    git config user.name
   
    git config user.email
   

4. Should show your work identity inside the Bitbucket repo.

🎁 Bonus: Automate It

If you don’t want to remember to switch every time, tell Git to auto-load a config for all repos inside a certain folder.

Edit your global Git config:

git config --global --edit

Add:

[includeIf "gitdir:~/work-projects/"] 
    path = ~/.gitconfig-work

Then in ~/.gitconfig-work:

[user] 
    name = Your Work Name 
    email = your-work-email@company.com

Now, anything in ~/work-projects will automatically use your work identity.

🚀 Final Push

With this setup:

• Personal projects → GitHub email & name

• Work projects → Bitbucket email & name

• No more “user cannot be matched” errors

• No risk of leaking personal details into work commits

💡 Tip: If you’re using SSH keys, you can also set separate keys for GitHub and Bitbucket so your push URLs never get mixed up.

1. Official Distro Repositories

The official repositories of your Linux distribution contain a vast array of pre-approved software. Installing Firefox from here is a breeze:

sudo apt-get update
sudo apt-get install firefox

2. Software Official Repositories

Some software, like Firefox, maintains its repositories. For instance, on Ubuntu, you can add the Mozilla repository and install Firefox:

sudo add-apt-repository ppa:mozillateam/firefox-next
sudo apt-get update
sudo apt-get install firefox

3. Flatpak

Flatpak is a universal packaging system. For Firefox, it's as simple as:

flatpak install flathub org.mozilla.firefox

4. Snap Store

Snaps are containerized software packages. To get Firefox from the Snap Store:

sudo snap install firefox

5. AppImage

AppImage packages are self-contained and run on most Linux systems. Grabbing Firefox is a piece of cake:

Download the latest release from:

https://github.com/srevinsaju/Firefox-Appimage

chmod +x Firefox.AppImage
./Firefox.AppImage

In a nutshell

Whether you prefer the familiarity of your distribution's repositories, the efficiency of Flatpak, the security of the Snap Store, or the portability of AppImage, Linux offers a smorgasbord of options to suit your taste.

Conclusion

So, there you have it! The world of Linux software installation isn't just functional; it's downright fun. Experiment with these methods, explore new apps and revel in the freedom that Linux provides. Happy exploring!

Build Image :

Build an image from a Dockerfile:

docker build -t <image-name>:<tag>

Build an image with a specific Dockerfile:

docker build -f <Dockerfile-name> -t <image-name>:<tag>

List Images :

List all Docker images:

docker images

Pull Image :

Pull a Docker image from a registry:

docker pull <image-name>:<tag>

Remove Image

Remove a Docker image:

docker rmi <image-name>:<tag>

Run Container

Run a container from an image:

docker run <image-name>:<tag>

Run a container in detached mode

docker run -d <image-name>:<tag>

List Containers

List all running containers:

docker ps

List all containers (including stopped ones):

docker ps -a

Stop Container

Stop a running container:

docker stop <container-id>

Remove Container

Remove a stopped container:

docker rm <container-id>

Remove a running container:

docker rm -f <container-id>

Exec Into Container

Execute a command inside a running container interactively:

docker exec -it <container-id> <command>

Logs

Display the logs of a specific container:

docker logs <container-id>

Network Management

List all Docker networks:

docker network ls

Volume Management

List all Docker volumes:

docker volume ls

Docker Compose

Run containers defined in a Compose file:

docker-compose up

Run containers in detached mode and rebuild images:

docker-compose up -d --build

Stop and remove containers, networks, and volumes defined in a Compose file:

docker-compose down

Scale a service to the specified number of instances:

docker-compose scale <service-name>=<num-instances>

Validate and view the Compose file:

docker-compose config

Conclusion

In conclusion, you're now armed with the coolest Docker commands—no nonsense, just pure developer magic. Go forth and containerize like a pro! Whether you're a coding ninja or just getting started, these tricks will keep your projects sailing smoothly. Happy coding, fellow devs!

🚀 Pros of min-width: 0 for All (*)

1. Flexy-Flex Layouts:

Allow images to shrink within a flex container without overflow, ensuring adaptability and responsiveness.

.flex-container {
  display: flex;
  align-items: center;
}

.flex-container img {
  min-width: 0;
  max-width: 100%;
  height: auto;
}

1. No More Overflow Drama:

Avoid text overflow in nested containers by setting the minimum width to zero, preventing unwanted layout issues.

.nested-container {
  overflow: hidden;
}

.nested-container p {
  min-width: 0;
}

1. Break Free from Width Limits:

Override default constraints on buttons to enhance flexibility and prevent unintended limitations in design.

button {
  min-width: 0;
}

1. Browser BFF Vibes:

Ensure consistent behavior for list items by setting a minimum width, promoting uniformity across various browsers.

li {
  min-width: 0;
}

🚨 Cons:

1. Unintended Surprises:

Apply cautiously globally, as it may unintentionally impact specific layouts, potentially causing unforeseen issues.

.specific-element {
  /* Specific styles */
}

* {
  min-width: 0; /* Caution: May impact layout of '.specific-element' */
}

1. Accessibility Speed Bump:

Exercise caution with long text content; setting the minimum width to zero may affect readability for users with accessibility needs.

p {
  min-width: 0; /* Caution: Consider readability for long text content */
}

1. Design Clash Alert:

Be mindful of conflicts with designed layouts, like cards; setting a global minimum width may disrupt intended designs.

.card {
  min-width: 300px; /* Original design intention */
}

* {
  min-width: 0; /* Caution: May conflict with '.card' layout */
}

1. CSS Puzzles Ahead:

Global application increases CSS complexity, potentially complicating maintenance efforts; consider targeted applications for improved manageability.

* {
  min-width: 0; /* Caution: Increases CSS maintenance complexity */
}

1. Performance Tidbit:

Excessive use of performance-critical elements may impact rendering speed; use judiciously to avoid unnecessary performance degradation.

.performance-critical-element {
  min-width: 0; /* Caution: Excessive use may impact rendering performance */
}

Conclusion

In the wild world of frontend dev, setting min-width: 0 can be your ally for flexible layouts. But, like any superhero power, use it wisely! Watch out for unintended layout havoc and accessibility challenges. Stay flexible, keep testing, and know when to let the default styles shine. 🚀✨

credit: https://twitter.com/adamwathan/status/1734696245015494711

Each branch has a unique name, and you can switch between branches to work on different parts of your code. When you're finished making changes on a branch, you can merge those changes back into the main branch (also known as the "master" branch) so that they become part of the main codebase.

Using branches is a common practice in software development, as it allows multiple people to work on the same codebase simultaneously without interfering with each other's work. It also helps to keep the code organized and makes it easier to track changes and revert back to previous versions if necessary.

Best way to use git branches

Quick tip create branches with "feature/task-you-are-working-on"

There is no one-size-fits-all answer to the best way to use Git branches, as it depends on your specific workflow and project requirements. However, here are some general tips that can help you use branches effectively:

1. Use descriptive branch names: Give your branches meaningful names that describe the changes you're making, such as "feature/user-authentication" or "bugfix/404-page".

2. Create branches for specific tasks: Create a new branch for each task or feature you're working on, rather than making changes directly to the main branch. This will help you keep track of changes and isolate any issues that arise.

3. Use feature branches: Consider using a "feature branch" workflow, where each branch corresponds to a specific feature or set of related features. This can make it easier to manage changes and collaborate with other developers.

4. Use pull requests for code review: When you're finished making changes on a branch, submit a pull request to merge your changes into the main branch. This allows others to review your code and provide feedback before it's merged.

5. Delete branches when they're no longer needed: Once a branch has been merged into the main branch and is no longer needed, delete it to keep your repository clean and organized.

6. Use tags for releases: When you're ready to release a new version of your software, consider using Git tags to mark the specific commit that corresponds to that release. This can help you easily track which version of the code was used for a particular release.

Overall, the key to using Git branches effectively is to stay organized, communicate clearly with your team, and follow consistent workflows that work for your project

SSL certificates are required for websites in order to protect user data, validate website ownership, prevent attackers from creating a false version of the site, and transmit trust to users.

What is Certbot?

Certbot is a free, open-source software tool for automatically using Let’s Encrypt certificates on manually-administrated websites to enable HTTPS.

source: certbot

Prerequisites

• Server with CentOS 8

• Apache is installed on the server with the configured virtual host for your domains.

Step 1 - Installing the Certbot Client

Add the CentOS 8 EPEL repository

$ sudo dnf install epel-release

Now Install Certbot with the required packages python3-certbot-apache and mod_ssl

$ sudo dnf install certbot python3-certbot-apache mod_ssl

Step 2 - Getting a Certificate

To obtain a certificate that covers only one domain

$ sudo certbot --apache -d example.com

To obtain a certificate that covers multiple domains

$ sudo certbot --apache -d www.example.com -d example.com

You can also use certbot utility prompt

$ sudo certbot --apache

#Output

Successful Installation output will be something similar to this

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/example.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/example.com/privkey.pem
   Your cert will expire on 2022-01-26. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to E

FF:                    https://eff.org/donate-le

Step 3 - Testing

https://www.ssllabs.com/ssltest/analyze.html?d=example.com

Conclusion

We learned how to install a free SSL certificate on your domain in a very basic and straightforward manner.

• Project on GitHub (in this tutorial I’m using the Next js application).

• Server SSH private key (the key you create while creating a new instance).

Step 1 - Create GitHub Action secrets

We need 3 Action secrets AWS_USERNAME AWS_HOSTNAME AWS_PRIVATE_KEY

• Navigate to the main page of the repository.

• Click on the Setting Tab (top right area).

• Select Action under “Secrets”

• Click on the “New repository secret” button (top right area)

• Set Name to “AWS_PRIVATE_KEY".

• Paste the content of the server SSH private key and remove ----BEGIN RSA PRIVATE KEY---— and ----END RSA PRIVATE KEY---—

• Click on “Add secret”

• follow the above point to add further “action secrets”

• Set AWS_USERNAME value to your Linux users (most commonly centos, apache2) you can use whoami command to get your current user name.

• Set AWS_HOSTNAME value to your server IP address.

You can also add any ENV variable as Action secrets by following the same guide above.

Step 2 - Setup Workflows

This is the part where all magic happens

• Create folders in your project repository my-cool-app/.github/workflows

• Set up your workflow by creating two .yml files. For the sake of simplicity, we named it build.yml and deploy.yml.

#build.yml

name: build

on:
    push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build
      env:
        NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}

Add env variable under env: if any.

#deploy.yml

name: deploy

on:
  push:
    branches:
      - main
  workflow_dispatch:  

jobs:
  deploy:
      needs: [build]  # require build to pass before deploy runs
    name: Deploy
    runs-on: ubuntu-latest
    environment: production

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: SSH to Host
      env:
        AWS_PRIVATE_KEY: ${{ secrets.AWS_PRIVATE_KEY  }}
        AWS_HOSTNAME: ${{ secrets.AWS_HOSTNAME }}
        AWS_USERNAME : ${{ secrets.AWS_USERNAME  }}

      run: |
          echo "$AWS_PRIVATE_KEY" > private_key && chmod 600 private_key
          ssh -o StrictHostKeyChecking=no -i private_key ${AWS_USERNAME}@${AWS_HOSTNAME} '

            # 📌 Start your instance/server related tasks form here.
            # 1
            cat whereami.txt
            # 2
            bash ~/scripts/my-app-deploy.sh
          '

#1

Tip: Create whereami.txt a file on your server to test out the connection.

#2

You can run your .sh file stored on your LightSail server, the script will contain all the required commands to build and start your application.

#my-app-deploy.sh

pm2 stop my-app

git pull

npm install

npm run build

pm2 start my-app

echo "my-app-deploy script executed"

WTH is pm2?

it is a production process manager for Node.js applications with a built-in load balancer.

git clone -b <BRANCH_NAME> <REPO_URL> <FOLDER_NAME>

Install required packages

composer install --no-scripts

composer install --optimize-autoloader

If required*

npm install

Change dir permission

sudo chmod 777 -R bootstrap

sudo chmod 777 -R storage

Create .env

mv .env.example .env

Generate new key

php artisan key:generate

Link storage

php artisan storage:link

Clear cache and optimize

php artisan optimize:clear

php artisan optimize

How to run (local)

php artisan server --port=8000

• Linux Server, I'm using AWS Lightsail Linux (centos 8) server

• Next js application in the GitHub repo.

• Node & Apache pre-install and setup

I'm assuming you've previously met all of the prerequisites.

Step 1 - Clone your repo in your domain root directory

NOTE: You can configure your domain and its root directory how you want.

git clone my-next-app:username/my-next-app.git

Step 2 - Install PM2

if you are wondering what is PM2, it is a production process manager for Node.js applications with a built-in load balancer.

for more information, you can check out their site here.

sudo npm install -g pm2

“-g” to install pm2 globally 

Step 3 - Build and Start your Next js Application

cd into your project directory e.g “/my-next-app”

Run Build Command

npm run build

pm2 start npm --name "my-next-app" -- start

Step 4 - Open Port & Setup

firewall-cmd --zone=public --add-port=3000/tcp --permanent

firewall-cmd --reload

/usr/sbin/setsebool httpd_can_network_connect true
//OR
/usr/sbin/setsebool httpd_can_network_connect 1

To make the changes persist. Use “-P”

/usr/sbin/setsebool -P httpd_can_network_connect 1

Now Restart your Apache server

service httpd restart

Step 5 - Make a few changes to the “your-domain.conf” file

Port 80 :

<VirtualHost *:80>
    ...
    ProxyRequests Off
    ProxyPreserveHost On
    ProxyVia Full

    <Proxy *>
        Require all granted
    </Proxy>

    ProxyPass / http://127.0.0.1:3000/
    ProxyPassReverse / http://127.0.0.1:3000/
    ...
</VirtualHost>

Port 443 :

<VirtualHost *:443>
    ...
    ProxyPreserveHost on
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
    LogLevel warn
   ...
</VirtualHost>

Restart your Apache server

service httpd restart

YAY ! 🥳 Visit your site and access your Next js application

⚙ Troubleshooting

If you get an error, make sure you follow each step exactly. Moreover, if you continue to encounter problems, consider the solutions listed below.

Site Throwing 503

• Make sure there is no error occurring on build and run time

• Check if the application is running

pm2 show my-next-app

//OR

pm2 monit

• The port on which your application is running is open and accessible, in my case it was 3000 (checkout Step 4)

• Run the following command to check open and running ports

netstat -tulpn | grep LISTEN

• Restart your instance manually, Go to your server management panel and restart your server, and re-run Step 3 and Step 4

In the end, if the given solution doesn't work for you then like a PRO Google 😎 it.