DEV Community: Elvis Ansima

Configuring a VPS From Scratch (Debian)

Elvis Ansima — Mon, 19 Jan 2026 09:20:07 +0000

A practical guide for developers who want control, security, and predictable infrastructure costs.

+Bonus: Using a Cloudflare Worker as a Secure Proxy

Introduction

Modern application development often relies on managed cloud services such as PaaS platforms, serverless functions, and hosted databases. While these services reduce operational overhead, they can become expensive and opaque as projects grow.

An alternative approach is to deploy applications on a Virtual Private Server (VPS), configured and secured from the ground up. This method provides greater control, predictable costs, and a deeper understanding of the underlying infrastructure.

This guide covers:

Secure configuration of a Debian-based VPS
Installation of a modern web application stack
Best practices for permissions, backups, and monitoring
A bonus section on using a Cloudflare Worker as a reverse proxy to protect production servers

1. Why choose a VPS from scratch?

A properly configured VPS offers:

Fixed and predictable monthly costs
Full control over system configuration
Reduced attack surface
No vendor lock-in

In many cases, a low-cost VPS can replace multiple managed services that are billed per request, per second, or per gigabyte.

2. Base operating system: Debian Stable

Debian Stable is well suited for servers due to:

Long-term stability
Reliable security updates
Minimal breaking changes
Strong community support

Debian releases a new stable version approximately every three years, making it ideal for long-running production environments.

3. Securing the primary entry point: SSH

SSH is the primary administrative access point and should be hardened carefully.

Recommended SSH practices

Disable root login
Disable password-based authentication
Use SSH keys exclusively
Change the default SSH port
Protect against brute-force attacks

Example SSH configuration (`/etc/ssh/sshd_config`)

PermitRootLogin no
PasswordAuthentication no
Port 24560

⚠️ Always confirm key-based authentication works before disabling password access to avoid lockout.

Protection tools

apt install fail2ban

Optional:

CrowdSec for collaborative attack detection and mitigation

4. Firewall configuration

A default-deny firewall policy is recommended.

Using UFW (Uncomplicated Firewall is a program for managing a netfilter firewall designed to be easy to use.) :

ufw allow 24560/tcp   # SSH
ufw allow 80
ufw allow 443
ufw enable

Only explicitly required ports should be exposed.

5. Application stack

A typical modern VPS stack includes:

Web server

Apache

Backend and tooling

PHP (via sury.org for newer versions if needed)
Node.js
Composer
NPM

Data and caching

MariaDB
Redis

Installing only required services reduces complexity and limits attack vectors.

6. File permissions and ownership

A core security principle:

The web server user (www-data) must only have write access where strictly necessary.

For frameworks such as Laravel, this usually includes:

storage/
bootstrap/cache/

Example permission setup

# Application code owned by deployment user
chown -R elvis:www-data /var/www/app

# Writable directories owned by web server
chown -R www-data:www-data storage bootstrap/cache
chmod -R 775 storage bootstrap/cache

This ensures:

Clean Git operations
Controlled write access for the web server
Reduced impact in case of application compromise

7. Backups and data protection

Backups should be:

Encrypted
Incremental
Stored off-site

Recommended tools:

BorgBackup or Restic
Automation with backupninja
Storage on S3-compatible services

Key considerations:

Who can access the backups?
Are backups encrypted at rest?
What happens to data when disks are decommissioned?

8. Disk encryption and threat modeling

Threat modeling should include:

Trust in the hosting provider
Physical access to disks
Disk lifecycle and disposal policies

Disk encryption (LUKS)

Uses AES encryption
Encryption keys protected by a passphrase

Trade-off:

Manual intervention may be required on reboot

Disk encryption is a risk-based decision depending on operational constraints.

9. Monitoring and observability

Basic monitoring should include:

Service availability
Disk usage
Memory consumption
Log inspection

Visibility into system health enables faster detection and resolution of issues.

Here you can use Grafana & Prometheus

10. Bonus: Cloudflare Worker as a secure proxy

A Cloudflare Worker can be used as a reverse proxy to:

Hide the origin server IP
Filter traffic at the edge
Restrict direct access to production infrastructure
Reduce attack surface

Redirect handling considerations

When using:

redirect: 'manual'

If the response is returned directly to the browser, the browser will follow redirects independently, outside Worker control.

Safe redirect strategies

Allow the Worker to follow redirects (redirect: 'follow')
Manually inspect and rewrite Location headers
Enforce a whitelist of allowed redirect domains

This ensures that all navigation remains under controlled domains.

Conclusion

Deploying applications on a VPS configured from scratch provides:

Cost efficiency
Full infrastructure control
Strong security boundaries
Long-term flexibility

Managed cloud services remain valuable for specific use cases, but for many applications, a well-secured VPS combined with edge-level proxying offers a powerful and economical alternative.

Le potentiel rôle de Dieu dans notre sort (Pensée libre Pt II)

Elvis Ansima — Tue, 25 Nov 2025 10:52:22 +0000

Pt I: Read Here

Il existe une réalité que beaucoup évitent d’aborder : malgré nos prières, notre humanisme, notre compassion naturelle… le sort général de nos vies ne semble pas toujours refléter nos efforts ou notre foi.
Surtout dans des contextes difficiles comme le nôtre, certains finissent par se poser la question :
Dieu est-Il injuste ? Est-Il silencieux ? Ou n’existe-t-Il tout simplement pas ?

Pourtant, dans le même monde, dans les mêmes villes, dans les mêmes familles, on voit aussi des choses impossibles à expliquer autrement que par une force extérieure.
Des guérisons inattendues.
Des bénédictions qui arrivent au bon moment.
Des portes qui s’ouvrent après des prières sincères.
Des protections mystérieuses.
Bref… des expériences qui laissent croire qu’il y a quelque chose ou quelqu’un qui veille.

Mais le contraste fait mal :
On voit aussi des personnes qui prient intensément et qui, malgré tout, sont frappées par le malheur.
Des gens de bonne foi qui vivent des épreuves brutales.
Des innocents qui souffrent.
Alors on se demande :
Est-ce une injustice ? Est-ce un prix qu’on paie ? Un mystère ? La réincarnation ?
On n’a pas de réponse simple. C’est un sujet complexe, parfois dérangeant.

Personnellement, je reste convaincu que Dieu existe.
Mais Sa volonté n’est pas la nôtre.

“Car mes pensées ne sont pas vos pensées, et mes voies ne sont pas vos voies.” Ésaïe 55:8

Et c’est peut-être là toute la tension :
Nous cherchons des réponses immédiates, mais Lui voit l’ensemble, y compris ce qui nous dépasse.

On doit quand même admettre quelque chose :
La souffrance reste profondément inopportune, et rien ne l’explique vraiment.
Surtout lorsqu’on constate que, sous d’autres cieux, ceux qui rejettent l’idée même de Dieu vivent très bien, parfois mieux que ceux qui prient chaque jour. Cela peut troubler.

Mais cela révèle aussi une vérité fondamentale :
le bonheur terrestre n’est pas le but dernier.
Si la vie se limitait à naître, chercher à tout obtenir, puis mourir en laissant tout derrière… alors rien n’aurait vraiment de sens.
Le cycle serait absurde.

On est là pour quelque chose qui nous dépasse.
Et peut-être que, consciemment ou non, nous nous préparons pour une autre vie, une existence différente, plus grande, que nous ne comprenons pas encore.

La Bible dit d’ailleurs :

“Tout est permis, mais tout n’est pas utile.” 1 Corinthiens 10:23

Comme pour rappeler que oui, Dieu nous laisse libres, mais que cette liberté s’inscrit dans une histoire plus vaste.

Quant à la souffrance… la question reste ouverte.
Aucune religion, aucun philosophe, aucune science ne détient une réponse parfaite.
C’est un mystère qui nous accompagne.

Alors vivons.
Vivons sans blesser l’autre.
Évitons de juger autant que possible.
Aimons, même maladroitement.
Faisons ce que nous pouvons, là où nous sommes.

Parce qu’au final, malgré le silence apparent,
Dieu reste au contrôle.
Même quand on a l’impression qu’Il ne fait rien.

“Je suis avec vous tous les jours.” Matthieu 28:20

C’est peut-être ça, notre véritable espoir.

Pourquoi changer sera difficile… (Réflexion personnelle)

Elvis Ansima — Tue, 25 Nov 2025 06:20:57 +0000

Il m’arrive souvent, entre deux lignes de code, deux features à shipper ou deux idées de startup; de repenser à l’environnement dans lequel j’ai grandi. Un environnement qui, qu’on le veuille ou non, influence profondément notre manière de travailler, de penser, de créer et même de rêver.

En RDC, beaucoup de gens ont vécu des situations qu’on aurait du mal à imaginer dans un pays “normal”. Des injustices tellement profondes qu’elles laissent des traces invisibles.
On parle de pauvreté extrême, de conflits armés, du coût de la vie… mais ici, ces mots ont un goût différent. Ce ne sont pas des concepts. Ce sont des cicatrices.

Grandir dans ce contexte, ce n’est pas juste vivre.
C’est apprendre à survivre.
Et ça marque.

Je vois des jeunes déjà épuisés psychologiquement alors qu’ils n’ont même pas commencé leur vie.
Je vois des adultes se réfugier dans l’alcool pour oublier.
Je vois des femmes se sacrifier dans la prostitution juste pour que leurs enfants mangent.
Et la plupart gardent le silence, parce que dans ce pays, la douleur fait partie du décor.

Le contraste le plus cruel ?
Pendant que la population se bat pour respirer, ceux qui dirigent vivent dans un luxe déconnecté : maisons aux États-Unis, budgets détournés, projets fantômes…
C’est un décalage tellement immense qu’il dépasse parfois l’entendement.

Alors oui, changer sera difficile.
Pas parce que les idées manquent, pas parce que la jeunesse est incapable, mais parce qu’avant de changer un système, il faut d’abord réparer des gens. Des esprits traumatisés. Des générations entières qui ont grandi en mode “survie”.

Et pourtant, malgré tout ça, il existe une lueur.
Je la vois chez les développeurs, les créatifs, les fondateurs, ceux qui montent des projets avec trois fois rien mais une détermination énorme. Je la vois dans chaque ligne de code qu’on écrit tard la nuit pour essayer d’améliorer un petit bout de notre réalité.

Peut-être que notre rôle, à nous, c’est d’allumer une lumière.
Une seule.
Un projet, une idée, une initiative.
Et espérer que d’autres suivront.

Ce n’est pas un article technique.
C’est juste… un rappel.
Une pensée.
Un morceau de vérité d’un développeur qui code dans un pays où, parfois, rien n’encourage à continuer mais où, paradoxalement, tout nous oblige à ne pas abandonner.

Unfiltered Builder’s Mindset

Elvis Ansima — Sat, 02 Aug 2025 14:17:04 +0000

Stop thinking you need to be ready

you’ll never be

you need proof?
go watch the market

ugly websites

basic tools

yet… people pay

why?

because it solves something

that’s all

you’re not building art

you’re solving problems

you don’t need

a mentor (you may not have one yet)

a cofounder (you may not find one soon)

a perfect design (you’ll improve it later)

businesses aren’t statues

they’re living things

meant to flex

to bend

to pivot

to reinvent

look at netflix, ibm, nintendo

they didn’t succeed by staying rigid

they succeeded by adapting fast

you need:

courage

insight

patience

and momentum

launch.

learn.

adapt.

repeat.

Digital Marketing: What I Know So Far

Elvis Ansima — Fri, 27 Jun 2025 14:47:06 +0000

A lot of people today claim they do digital marketing, but from what I’ve seen, many don’t really understand what it involves. It’s not just about posting nice pictures on social media or running a giveaway. Real digital marketing is about strategy, tools, testing, and results.

Here’s what I’ve learned so far in my journey.

1. Understanding the Customer Journey

One of the first things I learned is that you need to guide people from the moment they discover you to the moment they become customers. This is often called the customer journey.

There are usually three steps:

Top of the journey: People are just discovering your brand
Middle of the journey: People are considering what you offer
Bottom of the journey: People are ready to take action, like buying or signing up

2. Advertising Online Takes Real Skill

Running ads is not as easy as boosting a post on Facebook. You need to:

Choose the right audience
Create different versions of your ad
Manage your budget
Track how much you earn back from your ad spending

Free tool to explore: Google Ads lets you run search and display ads. Depending on your audience Facebook or Twitter(X) ads are also something to consider!

3. Testing is What Makes You Smarter

Real digital marketers do not guess. They test. For example, you might test two different headlines on your website to see which one works better.

This kind of testing helps you learn what people respond to and what brings better results.

Tool to try: PostHog is a tool that allows you to do these kinds of experiments.

4. Data Tells the Real Story

I realized quickly that if you are not looking at numbers, you are just hoping. You need to track:

Where your visitors come from
What pages they visit
How many take action (like signing up or buying)

Free tool to use: Google Analytics helps you understand your website traffic and user behavior.

5. Getting More People to Take Action

It’s not enough to get people to visit your site. You want them to do something like fill out a form or make a purchase. This is called optimizing your website so more people take action.

Free tools:

Microsoft Clarity shows you how people behave on your website
Hotjar (Free Plan) helps you ask users questions directly on your site

6. Watching User Behavior Opened My Eyes

One of the biggest lessons I’ve learned: if you don’t know what users are doing on your site, you are guessing. Watching recordings of how people move and click on your site helps you find problems and improve.

Free tool: Microsoft Clarity gives you full session recordings and click maps for free.

7. Using a Tag Manager Makes Life Easier

I used to place tracking codes manually in the website’s code. Then I learned that you can use something called a tag manager. It’s a single tool that lets you control all your tracking like the Facebook Pixel, Google Ads tracking, and more without touching code every time.

Free tool: Google Tag Manager

8. Email Marketing Still Works

Another important part of digital marketing is sending emails to your audience. You can welcome new users, remind people about your offer, or send newsletters.

Free tools:

MailerLite is simple and has a free plan
Brevo is also a good option
OneSignal
Sendgrid

9. Search Engine Optimization is Free Traffic

If your website appears on Google when people search for something, you can get traffic without paying for ads. This is called search engine optimization and it requires keyword research, writing useful content, and making your site technically sound.

Free tools:

Bing Webmaster for indexing and performance data on bing SE
Google Search Console for indexing and performance data on google SE
Ahrefs Webmaster Tools for keyword tracking

Final Thoughts

Digital marketing is not about showing off but learning, testing, analyzing, and improving. And most of the tools you need to get started are free.

If someone tells you they’re doing digital marketing but they’ve never used tools like analytics, heatmaps, or email automation they are just scratching the surface.

I’m still learning every day, and this is just the beginning.

How to Validate AI API Responses with Zod and AJV (and Avoid Breaking Your Frontend)

Elvis Ansima — Sun, 16 Mar 2025 09:18:50 +0000

Why Validate API Responses from AI?

Integrating AI APIs (like OpenAI, Gemini, or Claude) comes with an annoying risk—responses can be inconsistent, missing fields, or contain unexpected data that breaks your frontend.

For example:

Dev: "Return JSON with name, age, and email fields."

AI: Returns a JSON... with nickname instead of name and no email.

💀 Frontend crashes.

👉 Solution? Validate your AI API responses before using them!

Using AJV for AI API Validation (Schema-Based Approach)

AJV is great when working with strict JSON structures.

1️⃣ Install AJV

npm install ajv

2️⃣ Define Your Expected AI Response Schema

const Ajv = require("ajv");
const ajv = new Ajv();

const schema = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number" },
    email: { type: "string", format: "email" }
  },
  required: ["name", "age", "email"],  // Ensure all fields exist
  additionalProperties: false  // Prevent unexpected fields
};

const validate = ajv.compile(schema);

// Simulated AI API response
const aiResponse = { name: "John Doe", age: 25 };  // Missing 'email' field

if (!validate(aiResponse)) {
  console.error("❌ Invalid AI Response:", validate.errors);
} else {
  console.log("✅ AI Response is Valid!");
}

🔹 Why use AJV?

✅ Works well for structured API responses

✅ Fast and optimized for large-scale AI integrations

✅ Enforces strict field requirements

Using Zod for AI API Validation (TypeScript-Friendly Approach)

Zod is great for AI-generated responses that may contain optional fields or dynamic structures.

1️⃣ Install Zod

npm install zod

2️⃣ Define Your AI Response Schema

import { z } from "zod";

const aiResponseSchema = z.object({
  name: z.string(),
  age: z.number(),
  email: z.string().email().optional(), // Allow missing email field
  metadata: z.object({  // Handling nested AI responses
    model: z.string().optional(),
    confidence: z.number().min(0).max(1).optional()
  }).optional()
});

const aiResponse = { name: "John", age: 25, metadata: { model: "GPT-4", confidence: 0.92 } };

const result = aiResponseSchema.safeParse(aiResponse);

if (!result.success) {
  console.error("❌ Invalid AI Response:", result.error.format());
} else {
  console.log("✅ AI Response is Valid!", result.data);
}

🔹 Why use Zod?

✅ Flexible for dynamic AI responses

✅ Works seamlessly with TypeScript

✅ Provides detailed error messages

Which One Should You Use?

Use AJV when integrating AI APIs that return structured, predictable JSON data.
Use Zod when working with dynamic, AI-generated responses that may have optional fields.

🚀 Best Practice: Always validate AI API responses before passing them to your frontend. This prevents unpredictable errors and ensures a smooth user experience!

🔥 Bonus Tip: If you're using OpenAI or similar APIs, you can prompt the AI to return a schema-compliant response like this:

Return a JSON object strictly following this structure: 
{
  "name": "string",
  "age": "number",
  "email": "string (optional)"
}
Ensure it meets JSON schema validation.

…but still validate it in code! AI doesn’t always listen. 😅

Let me know if you want more AI API validation tips! 🚀

Why Deployment is a Nightmare for Developers (and How to Make It Easier)

Elvis Ansima — Sun, 23 Feb 2025 17:17:41 +0000

TL;DR

Most developers struggle with deployment, which is why platforms like Vercel are popular. However, they’re not ideal for backend-heavy apps. While Fly.io and Render offer alternatives, shared hosting and VPS can be cost-effective solutions with built-in features like file storage, mail servers, cron jobs, databases, and SSH access—all for as little as $40 per year(Namecheap stellar plus plan for example).

The downside? CI/CD setup on shared hosting is tricky. That’s why I built Deployeur, an open-source tool to simplify deployments.

Most developers excel at writing code, running tests, and building applications. But when it comes to deploying their final product, it often turns into a nightmare. This is where platforms like Vercel have gained massive popularity—they simplify the deployment process, making developers' lives significantly easier.

For developers in large-scale companies, this isn’t usually a problem. They typically have dedicated DevOps teams to handle CI/CD pipelines, domain configurations, security setups, and more. But for small teams or solo developers, the story is different. They need to focus on building their product, not wrestling with deployment complexities.

While Vercel is fantastic for frontend projects, it falls short for backend-heavy or monolithic applications. So, what’s the solution? Let’s explore some alternatives and why shared hosting or VPS might be the answer you’re looking for.

The Limitations of Popular Platforms

Platforms like Vercel, Render, and Fly.io have revolutionized deployment with their ease of use and free tiers. However, they come with limitations:

Limitation	Description
Backend Support	Vercel’s cloud functions aren’t ideal for monolithic or backend-heavy apps.
Additional Costs	Many PaaS providers charge extra for features like databases, mail servers, or cron jobs.
Limited Control	You often sacrifice control over the server environment, which can be crucial for certain applications.

Why Shared Hosting and VPS Deserve a Second Look

Shared hosting and Virtual Private Servers (VPS) might seem old-school, but they offer several advantages that modern PaaS providers often lack:

File Storage: Built-in storage eliminates the need for external services like AWS S3 or Cloudflare R2.
Mail Servers: Host your own email server without relying on third-party tools like Mailgun or Sendgrid.
Cron Jobs: Easily set up and manage scheduled tasks.
Databases: No need for separate subscriptions—most shared hosting plans include database support.
SSH Access: Full control over your server environment.

And the best part? You can get all of this for as little as $40 a year. For example, Namecheap offers stellar plans with unlimited disk space, unlimited emails, and more.

Many hosting providers offer support for a wide range of programming languages. The screenshot below highlights some of the languages supported by Namecheap on shared hosting:

The Catch: Setting Up CI/CD on Shared Hosting

The biggest challenge with shared hosting or VPS is setting up an effective CI/CD pipeline. Everyone has their own approach, but it often involves a lot of manual work and configuration.

To simplify this process, I’ve built an open-source tool called Deployeur. It’s designed to make deploying apps on shared hosting as seamless as possible. Whether you’re a solo developer or part of a small team, Deployeur can save you time and effort.

What’s Next?

Stay tuned! In the coming days, I’ll share a step-by-step guide on deploying a typical Laravel application from scratch using Deployeur. Whether you’re new to deployment or looking for a better solution, this guide will walk you through the entire process.

Join the Movement

Deployeur is still in beta, and contributions are more than welcome. If you’re passionate about simplifying deployment for developers, check out the GitHub repository and get involved.

How Downtime Impacts SEO (and How to Build a Website Uptime Monitor with Google Sheets)

Elvis Ansima — Thu, 16 Jan 2025 11:48:36 +0000

Typically, we have dozens of sites we have deployed on the Internet, but things can happen that cause the site to go down, e.g. you experience a DDOS attack, the server encountered a bug and stopped working, your last deployment crashed the production site, etc...
Downtimes aren't just inconvenience - it's a potential disaster. Even a short downtime can affect your search engine rankings, frustrate users, and cost you traffic and therefore your revenue. In this blog, we'll explore how downtime can impact SEO and how you can build a simple uptime monitoring tool using Google Sheets and Google Apps Script.

If you’re short on time, you can skip the DIY setup and grab a ready-to-use template here.

Why Does Downtime Affect SEO?

Search engines like Google prioritize reliable websites & services. When your site is unavailable, Search engine are "discouraged" from pushing your site upfront, it signals to search engines that your site may not be reliable. Here’s how downtime impacts your SEO:

1. Crawling Issues

Search engines use bots to crawl your website periodically. If your site is down during a crawl, the bot may fail to index your pages, leading to:

Missed opportunities for ranking updates.
Pages being temporarily deindexed if repeated downtime occurs.

2. User Experience

When users encounter a site that won’t load or load slowly, they leave it and fast and this can lead to:

Increased bounce rates.
Lower retention rate. Both are negative signals for search engines, which may reduce your rankings.

3. Lost Backlinks and Traffic

If downtime occurs frequently, people linking to your site might lose trust and remove your links. This loss of backlinks directly affects your domain authority and organic rankings.

4. Competitor Advantage

During downtime, users will search for alternatives and often ending up on competitor websites. Over time, this traffic shift can strengthen your competitors’ SEO position.

How to Build a Website Uptime Monitor

Step 1: Set Up the Spreadsheet

Open a new Google Sheet.
Create columns labeled:
- Website URL
- Status
- Last Checked
Add the URLs of the websites you want to monitor under the “Website URL” column.

Step 2: Get to Know Apps Script

Apps Script is Google’s scripting platform for automating tasks in Google Workspace. It’s simple to learn and perfect for creating an uptime monitor.

Go to Extensions > Apps Script in the Google Sheets menu.
Familiarize yourself with the editor and basic commands like accessing sheet data and sending emails.

Step 3: Create a Bare Minimum Uptime Monitor

Copy and paste the following script into the Apps Script editor:

function checkUptime() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var data = sheet.getDataRange().getValues();
  for (var i = 1; i < data.length; i++) {
    var url = data[i][0];
    if (url) {
      try {
        var response = UrlFetchApp.fetch(url, {muteHttpExceptions: true});
        var status = response.getResponseCode();
        sheet.getRange(i + 1, 2).setValue(status === 200 ? "Up" : "Down");
      } catch (e) {
        sheet.getRange(i + 1, 2).setValue("Down");
      }
      sheet.getRange(i + 1, 3).setValue(new Date());
    }
  }
}

Save the script and run it to check the status of your websites. An authorization popup will surely come in, please authorize the app, you will see the unsafe notice, just click continue After that, if you go back to the spreadsheet, you will see new entries

Step 4: Deploy a Web App with Your Favorite JS Libraries

To make your uptime monitor more visually appealing, you can incorporate JavaScript libraries and frameworks as follows:

Create index.html file
Set Up Chart.js for Graphs:
Include the Chart.js library in your index.html file by adding this script tag: <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> just like you would have done in a regular html file.
Use the following example to display uptime data as a bar chart:

  <canvas id="uptimeChart"></canvas>
  <script>
    const ctx = document.getElementById('uptimeChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Site 1', 'Site 2', 'Site 3'],
        datasets: [{
          label: 'Uptime Status',
          data: [95, 85, 100], // Example data
          backgroundColor: ['#4CAF50', '#FF9800', '#F44336'],
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: { beginAtZero: true }
        }
      }
    });
  </script>

Add Styling with Tailwind:

Include Tailwind CSS in your project using a CDN: <script src='https://cdn.tailwindcss.com'></script>.
Create a visually appealing layout using Tailwind classes. For example:

 <div class="flex justify-center items-center bg-gray-100 min-h-screen">
   <div class="p-4 bg-white rounded shadow">
     <h1 class="text-xl font-bold mb-4">Uptime Monitor</h1>
     <canvas id="uptimeChart"></canvas>
   </div>
 </div>

Deploy as a Google Web App:
- In the Apps Script editor, create a doGet function to serve the HTML:
```
 function doGet() {
   return HtmlService.createHtmlOutputFromFile('index');
 }
```

Click on Deploy > New Deployment > Web App and configure access settings (e.g., anyone with the link).
1. Fetch Data from the Spreadsheet:
In your index.html file, use Google Apps Script to pass data to the client-side JavaScript:
```
 function getData() {
   const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
   const data = sheet.getDataRange().getValues();
   return data;
 }
```
- Fetch this data in your index.html using google.script.run.getData and integrate it into your Chart.js configuration or display it in a table.

Step 5: Go Further with a Ready Template

Want to skip the setup process? Grab a pre-built template that includes:

Automated monitoring and email alerts.
A pre-designed dashboard with uptime stats.
Collect users feedback
Instructions for customization.

My Own monitoring status page
Get the template here.

Next Steps

Once your uptime monitor is up and running you can push the boundaries and :

Add triggers to automatically run periodic checks
Integrate webhooks to send alerts to tools like Slack, Discord, Telegram, etc..
Monitor additional metrics, such as response time.
Manipulate your data to see insights in the charts

With these steps, you’ll ensure you , protect your SEO, and keep your users happy. Start monitoring today and take control of your site’s performance!

How to Process Incoming Emails and Trigger Webhooks, In-App Actions, and More Using Cloudflare Email Workers and D1 Database

Elvis Ansima — Sat, 04 Jan 2025 02:01:57 +0000

It's common to have shared mailboxes across teams in companies, eg. contact emails or support email.
Managing them solely from emails clients can be cumbersome. In this article, we’ll demonstrate how to turn received emails into in-app notifications or tickets using Cloudflare Email Workers and D1 database. We will then process the emails message into a Laravel Application.

Overview

Workflow

Receive Emails: Emails sent to support@domain.com are processed using Cloudflare Email Workers.
Store Emails: The emails are stored in Cloudflare D1 to make sure we wont loose the email even if the later processes fail.
Webhook Call to Laravel: Cloudflare sends the email data to Laravel through a webhook.

Why Use This Approach?

Centralized Management: Manage tickets and notifications within your app.
Cloudflare’s Power: Leverage Cloudflare’s global edge network and D1 database.
Scalability: Handle a high volume of emails efficiently.

Step 1: Set Up Cloudflare Email Worker

Cloudflare’s Email Workers allow you to intercept emails and process them programmatically. Once your domain is paired with your Cloudflare, and email routing successfully configured, you can decide what happen when an email is received on a given mail address

Example Worker Code that save a mail content into D1

export default {
  async email(message, env, ctx) {
    try {
      // Parse email details
      const subject = message.headers.get('subject') || 'No Subject';
      const from = message.from || 'Unknown Sender';
      const rawEmail = await new Response(message.raw).text();

      // Prepare SQL query for storing email
      const query = `
        INSERT INTO emails (sender, subject, body, receivedAt) 
        VALUES (?, ?, ?, ?);
      `;
      const values = [from, subject, rawEmail, new Date().toISOString()];

      // Execute the SQL query
      await env.D1_DATABASE.prepare(query).bind(...values).run();

      // Return success response
      return new Response('Email stored successfully!', { status: 200 });
    } catch (error) {
      // Notify webhook about the error
      const webhookURL = 'https://webhook.site/d1ff620a-xxxxxxxxxxxxxxxxxx';
      const errorDetails = {
        message: 'Error occurred while storing email',
        error: error.toString(),
        stack: error.stack || null,
        timestamp: new Date().toISOString(),
      };

      // Post the error details to the webhook
      await fetch(webhookURL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(errorDetails),
      });

      // Log the error for debugging
      console.error('Error storing email:', error);

      // Return error response
      return new Response('Failed to store email', { status: 500 });
    }
  },
};

The above code is using email worker syntax and assume you have a D1 Database binding available under the D1_DATABASE env variable

Configure Email Routing

Set up an email address like support@domain.com in Cloudflare’s Email Routing.
Route emails to your worker for processing. For more information, please refer to the documentation

Step 2: Extend the Worker

Add REST API endpoints to fetch emails and mark them as sent.

Updated Worker Code

  async fetch(request, env) {
    const url = new URL(request.url);

    // Fetch emails that are not marked as read
    if (url.pathname === '/emails' && request.method === 'GET') {
      try {
        const query = `SELECT * FROM emails WHERE readAt IS NULL ORDER BY id DESC;`;
        const emails = await env.D1_DATABASE.prepare(query).all();

        return new Response(
          JSON.stringify({
            status: 'success',
            data: emails.results || [],
          }),
          { headers: { 'Content-Type': 'application/json' }, status: 200 }
        );
      } catch (err) {
        console.error('Error retrieving emails:', err);
        return new Response(
          JSON.stringify({
            status: 'error',
            message: 'Error retrieving emails',
            error: err.message,
          }),
          { headers: { 'Content-Type': 'application/json' }, status: 500 }
        );
      }
    }

    // Mark email as read
    if (url.pathname.startsWith('/emails/') && request.method === 'PATCH') {
      const id = url.pathname.split('/').pop();

      if (!id || isNaN(id)) {
        return new Response(
          JSON.stringify({
            status: 'error',
            message: 'Invalid email ID provided',
          }),
          { headers: { 'Content-Type': 'application/json' }, status: 400 }
        );
      }

      try {
        const query = `UPDATE emails SET readAt = ? WHERE id = ?;`;
        const result = await env.D1_DATABASE.prepare(query).bind(new Date().toISOString(), id).run();

        if (result.changes === 0) {
          return new Response(
            JSON.stringify({
              status: 'error',
              message: `Email with ID ${id} not found or already marked as read.`,
            }),
            { headers: { 'Content-Type': 'application/json' }, status: 404 }
          );
        }

        return new Response(
          JSON.stringify({
            status: 'success',
            message: `Email with ID ${id} marked as read.`,
          }),
          { headers: { 'Content-Type': 'application/json' }, status: 200 }
        );
      } catch (err) {
        console.error('Error updating email status:', err);
        return new Response(
          JSON.stringify({
            status: 'error',
            message: 'Error updating email status',
            error: err.message,
          }),
          { headers: { 'Content-Type': 'application/json' }, status: 500 }
        );
      }
    }

    // Default 404 response
    return new Response(
      JSON.stringify({
        status: 'error',
        message: 'Endpoint not found',
      }),
      { headers: { 'Content-Type': 'application/json' }, status: 404 }
    );
  }

We have added the fetch handler that help us create HTTP endpoints from where we can fetch emails. you can learn more about the fetch handler here

Step 3: Integrate into a Laravel Project

I Assume you have a working Laravel application, and if not or you are new to laravel please see bootcamp.laravel.com.

We will need a model to store the processed emails and a webhook endpoint to receive the payload from the Cloudflare worker anytime a new mail is received.

In your project, create a model, the migration file and the controller by running the following command php artisan make:model SupportEmailNotification -mc, then :

In the migration file :

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('support_email_notifications', function (Blueprint $table) {
            $table->id();
            $table->string('sender');
            $table->string('subject');
            $table->longText('html_body');
            $table->longText('text_body');
            $table->boolean('read')->default(false);
            $table->timestamps();
            $table->string('cloudflare_id')->unique();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('support_email_notifications');
    }
};

In the controller file :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\SupportEmailNotification;
use Exception;
use PhpMimeMailParser\Parser;
use Illuminate\Support\Facades\Http;


class SupportEmailNotificationController extends Controller
{
    public function store(Request $request)
    {
        $validated = $request->validate(
            [
            'cloudflare_id' => 'required|string|unique:support_email_notifications,cloudflare_id',
            'sender' => 'required|string|max:255',
            'subject' => 'required|string|max:255',
            'raw_body' => 'required|string',
            ]
        );

        try{

            $parser = new Parser();
            $parser->setText($validated['raw_body']);

            // Extract email details
            $htmlBody = $parser->getMessageBody('html') ?? '';
            $textBody = $parser->getMessageBody('text') ?? '';

            // Save the email details to the database
            $emailNotification = new SupportEmailNotification();
            $emailNotification->sender = $validated['sender'];
            $emailNotification->subject = $validated['subject'];
            $emailNotification->html_body = $htmlBody;
            $emailNotification->text_body = $textBody;
            $emailNotification->read = false;
            $emailNotification->cloudflare_id = $validated['cloudflare_id'];
            $emailNotification->save();

            // Call Cloudflare read route to confirm reception
            $cloudflareId = $request->input('cloudflare_id');
            if ($cloudflareId) {
                $this->markAsReadInCloudflare($cloudflareId);
            }

            return response()->json(
                [
                'status' => 'success',
                ], 201
            );
        } catch (\Exception $e) {
            // Handle errors and return a 500 response
            return response()->json(['error' => $e->getMessage()], 500);
        }
    }

    private function markAsReadInCloudflare($cloudflareId)
    {
        //$url = "https://your-cloudflare-worker-domain/emails/{$cloudflareId}";
        $response = Http::patch($url);
        if (!$response->successful()) {
            throw new \Exception("Failed to mark email as read in Cloudflare. ID: $cloudflareId");
        }
    }

}

You must install the PHP-Mime-Mail-Parser that help us process the raw email content

In your model file, add the $fillable property

    protected $fillable = [
        'sender',
        'subject',
        'html_body',
        'text_body',
        'read',
        'cloudflare_id',
        'read_at',
    ];

In your routes/api.php add the webhook route

//existing code
Route::post('/webhook/notifications', [App\Http\Controllers\SupportEmailNotificationController::class, 'store']);

Finally run the migration : php artisan migrate.
The very last step is to update our cloudflare worker so that it will send a webhook call to our application whenever a new email is received.

export default {
  async email(message, env, ctx) {
    const webhookURL = 'https://domain.com/api/webhook/notifications';
    const errorWebHookURL = 'https://webhook.site/xxxxx-ab25-4f8b-8957-8d937d0d49d6';
    try {
      // Parse email details
      const subject = message.headers.get('subject') || 'No Subject';
      const from = message.from || 'Unknown Sender';
      const rawEmail = await new Response(message.raw).text();

      // Prepare SQL query for storing email
      const query = `
        INSERT INTO emails (sender, subject, body, receivedAt) 
        VALUES (?, ?, ?, ?);
      `;
      const values = [from, subject, rawEmail, new Date().toISOString()];

      // Execute the SQL query
      const result = await env.D1_DATABASE.prepare(query).bind(...values).run();

      // Notify webhook of the successfully stored email
      const webhookPayload = {
        cloudflare_id: result.meta.last_row_id.toString(),
        sender: from,
        subject: subject,
        raw_body: rawEmail,
        received_at: new Date().toISOString(),
      };

      await fetch(webhookURL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(webhookPayload),
      });

      // Return success response
      return new Response(
        JSON.stringify({ status: 'success', message: 'Email stored successfully!' }),
        { headers: { 'Content-Type': 'application/json' }, status: 200 }
      );
    } catch (error) {
      // Notify webhook about the error
      const errorDetails = {
        message: 'Error occurred while storing email',
        error: error.toString(),
        stack: error.stack || null,
        timestamp: new Date().toISOString(),
      };

      await fetch(errorWebHookURL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(errorDetails),
      });

      // Log the error for debugging
      console.error('Error storing email:', error);

      // Return error response
      return new Response(
        JSON.stringify({ status: 'error', message: 'Failed to store email', error: error.message }),
        { headers: { 'Content-Type': 'application/json' }, status: 500 }
      );
    }
  },

  async fetch(request, env) {
    const url = new URL(request.url);

    // Fetch emails that are not marked as read
    if (url.pathname === '/emails' && request.method === 'GET') {
      try {
        const query = `SELECT * FROM emails WHERE readAt IS NULL ORDER BY id DESC;`;
        const emails = await env.D1_DATABASE.prepare(query).all();

        return new Response(
          JSON.stringify({ status: 'success', data: emails.results || [] }),
          { headers: { 'Content-Type': 'application/json' }, status: 200 }
        );
      } catch (err) {
        console.error('Error retrieving emails:', err);
        return new Response(
          JSON.stringify({ status: 'error', message: 'Error retrieving emails', error: err.message }),
          { headers: { 'Content-Type': 'application/json' }, status: 500 }
        );
      }
    }

    // Mark email as read
    if (url.pathname.startsWith('/emails/') && request.method === 'PATCH') {
      const id = url.pathname.split('/').pop();

      if (!id || isNaN(id)) {
        return new Response(
          JSON.stringify({ status: 'error', message: 'Invalid email ID provided' }),
          { headers: { 'Content-Type': 'application/json' }, status: 400 }
        );
      }

      try {
        const query = `UPDATE emails SET readAt = ? WHERE id = ?;`;
        const result = await env.D1_DATABASE.prepare(query).bind(new Date().toISOString(), id).run();

        if (result.changes === 0) {
          return new Response(
            JSON.stringify({ status: 'error', message: `Email with ID ${id} not found or already marked as read.` }),
            { headers: { 'Content-Type': 'application/json' }, status: 404 }
          );
        }

        return new Response(
          JSON.stringify({ status: 'success', message: `Email with ID ${id} marked as read.` }),
          { headers: { 'Content-Type': 'application/json' }, status: 200 }
        );
      } catch (err) {
        console.error('Error updating email status:', err);
        return new Response(
          JSON.stringify({ status: 'error', message: 'Error updating email status', error: err.message }),
          { headers: { 'Content-Type': 'application/json' }, status: 500 }
        );
      }
    }

    // Default 404 response
    return new Response(
      JSON.stringify({ status: 'error', message: 'Endpoint not found' }),
      { headers: { 'Content-Type': 'application/json' }, status: 404 }
    );
  },
};

You may have noticed the error webhook is from https://webhook.site which is a pretty cool free tool that helps you test webhook quickly. To call your local laravel instance from the cloudflare worker, you may need to use tunneling software like Cloudflare Tunnel

With Cloudflare email workers we can create a powerful, flexible system to manage emails in various ways.

Some practical examples include:

Turn Emails into Support Tickets: Automatically convert incoming customer emails into tickets, parsed and stored in the D1 database, ready for team follow-up.
Automate Reminders: Trigger automated task or deadline reminders based on email content.
In-App Notifications: Use email content to send real-time notifications to users within your app (e.g., account updates, special offers).

Going further we may study how to implement machine learning algorithms to categorize emails more accurately or trigger custom actions based on the email content and predefined actions.

Things you should try to do with HTML/CSS to avoid JavaScript overuse : The rule of least power

Elvis Ansima — Tue, 30 Jul 2024 18:01:21 +0000

The rule of least power in web development is simple: whenever possible, try to use the least powerful language suitable for a given purpose.

In other words, if something can be done with HTML, do it with HTML or move to CSS, if CSS can't, move to js 👌.

Let's go:

Custom toggle button with pure css

The key here is appearance:none

Input with autosuggestion

Note that styling the dropdown is quite complicated at the time of writing this article, maybe it won't be in the coming years.

You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Color picker

In the example above, we have combined autosuggestion with some custom styles. Another feature of using this native input is that you can pick a color from anywhere on your screen

In page transitions, smooth scrolling to page sections

Are you familiar with the following code snippet?

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

Okay, in modern browsers you can achieve this with less code using the scrollIntoView function, but more interestingly, a single line of CSS can save your day scroll-behavior : smooth;.

Accordion/Dropdown Menu

Image Carousel

The key aspect here is the use of scroll-snaping.

Bonus : Want to see an advanced demo? :

scroll-driven-animations.style

Dialog or modal window

These need a bit of javascript code to open and close, but all this is based on a native element

Note that the browser will make sure that the modal is always on top, no matter what the highest z-index you currently have in your page, no need to calculate anything!

From the demo, we use an experimental css at-rule:@starting-style that allows us to give an initial style to an element when it is rendered for the first time, so that the element will transition from there at the beginning.

Read more about the dialog element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Style a given section based on an other section in the page

We use the pseudo-class :has(), which can target parent elements based on their children : MDN article.

Conclusion

While some functionality can be achieved with pure HTML and CSS, browser support is still an issue. The best way to know if you are not screwing up the majority of your users is to check browser compatibility before using the element. You can use the caniuse website to quickly check browser support for a given html element, css property, or even more: browser APIs.

Exploring the Basis of the IntersectionObserver API

Elvis Ansima — Thu, 16 May 2024 17:23:10 +0000

The web continues to evolve and features such as infinite scrolling and lazy loading images are no longer new to us. These features improve the user experience by dynamically loading content as needed. But how do we implement these features efficiently?

Introduction

Historically, determining the visibility of an element, or the relative visibility of two elements, has been a challenging task. Traditional methods were often unreliable and could slow down both the browser and web pages. Implementing intersection detection in the past involved using event handlers and loops, frequently calling methods such as Element.getBoundingClientRect(). This approach could lead to significant performance issues, especially on complex or content-heavy pages.

How Does IntersectionObserver Work?

The IntersectionObserver API simplifies the process of detecting visibility changes. It allows you to asynchronously observe changes in the intersection of a target element with a parent element or the viewport. This means you can easily detect when an element enters or leaves the viewport or any other element you specify as the root.

Implementing the observer requires 2 steps. One is to provide the element we want to monitor and the second is to set up the observer with a so-called configuration object.

The following code illustrate a very basic implementation

const tagetElement= document.querySelector('#load-more');
const observerCallback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      //perform code on intersection
    }
  });
};

const observer = new IntersectionObserver(observerCallback , {
  root: null, // Root element, null means the browser viewport
  rootMargin: '0px',
  threshold: 1.0 // Trigger the callback when 100% of the target is visible
});

// Start observing the target element
observer.observe(tagetElement);

Terminology :

Target Element: The element you want to observe.
Root Element: The element that is used as the viewport for checking the visibility of the target. If not specified, the browser’s viewport is used by default.
Threshold: A single number or an array of numbers indicating at what percentage of the target's visibility the observer's callback should be executed.
Root Margin: An offset margin applied to the root’s bounding box, affecting when the observer's callback is triggered.
Observer callback : When the intersection of the target element crosses the specified threshold, the callback function is executed. This callback provides entries, which are objects containing information about each observed target element and its intersection status.

Quick Example with a load more on Scroll Implementation

Implementing infinite scrolling with IntersectionObserver is simple and efficient. In the following snippet I will share html css and javascript code that can be used together to implement the load more on scroll feature.

body {
    padding: 20px 40px;
    margin: 0px auto;
    max-width: 1440px;
    background-color: bisque;
}

.main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 110vh;
}

.content {
    height: 90vh;
    width: 70vw;
    display: grid;
    place-content: center;
    background-color: rgb(240, 240, 240);
}

<div class="main-content">
    <!-- Initial content that will be displayed -->
    <div class="content">Content #1 (initial)</div>
</div>
<!-- Load more trigger element -->
<div id="load-more"></div>

<!-- we use jQuery to manipulate the DOM easily -->
<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>

// Select the element that will trigger loading more content
const loadMoreTrigger = document.querySelector('#load-more');
const content = ["Content #2", "Content #3", "You are done!"];
let index = 0; // This can be used to fetch data in chunks using pagination

const loadMoreCallback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            if (content[index]) {
                loadMoreContent();
            } else {
                // Stop observing the trigger element if all content has been loaded
                observer.unobserve(entry.target);
            }
        }
    });
};

const observer = new IntersectionObserver(loadMoreCallback, {
    root: null, // Use the browser's viewport as the root
    rootMargin: '0px', // No margin around the root
    threshold: 1.0 // Trigger the callback when 100% of the target is visible
});

observer.observe(loadMoreTrigger);

const loadMoreContent = () => {
    $('.main-content').append(`<div class="content">${content[index]}</div>`);
    index++; // Increment the index to load the next piece of content
};

This example shows how to use IntersectionObserver to implement infinite scrolling. When the user scrolls to the #load-more element, the callback function loads more content, the load-more is pushed almost down, and when the user scrolls again we load data and so on.

If the content is larger, we can say that we have created a so-called infinite scroll effect.

Please access a fully working demo here

Conclusion and Next Steps

The IntersectionObserver API provides a robust, efficient way to handle visibility changes on your web pages. Using this API, you can implement features such as infinite scrolling and lazy image loading without compromising performance. It removes the need for performance-draining event listeners and provides a simpler, more maintainable solution.

Next steps could include exploring more advanced use cases for IntersectionObserver, such as triggering animations, monitoring ad visibility, or implementing intelligent preloading strategies. By mastering this API, you can significantly improve the user experience on your websites and web applications.

Managing permissions in Laravel applications using Spatie/laravel-permission

Elvis Ansima — Tue, 30 Apr 2024 19:43:15 +0000

In this post, I'll share my approach to managing roles and permissions in Laravel apps.

I will be using Spatie(laravel-permission), which is an optional package that can be used to implement RBAC in your apps. For getting started, please check their official documentation at https://spatie.be/docs/laravel-permission/v6/introduction.

In summary we will discuss on how to:

Manage roles/permissions both in development and production environments
Protect routes

Why Spatie?

RBAC can be tedious because we end up doing more than we thought. It's okay to bring your own implementation, but trust me it will not an easy path.

A manual implementation can look like this (These SQLs should be turned into models/migrations):

-- Permission table
CREATE TABLE IF NOT EXISTS Permissions (
    ID INT PRIMARY KEY AUTO_INCREMENT,
    permission_name VARCHAR(255)
);

-- Role table
CREATE TABLE IF NOT EXISTS Roles (
    ID INT PRIMARY KEY AUTO_INCREMENT,
    role_name VARCHAR(255)
);

-- Table to associate roles with their permissions
CREATE TABLE IF NOT EXISTS Role_Permissions (
    Role_ID INT,
    Permission_ID INT,
    FOREIGN KEY (Role_ID) REFERENCES Roles(ID),
    FOREIGN KEY (Permission_ID) REFERENCES Permissions(ID),
    PRIMARY KEY (Role_ID, Permission_ID)
);

-- Users Table
CREATE TABLE IF NOT EXISTS Users (
    ID INT PRIMARY KEY AUTO_INCREMENT,
    Name VARCHAR(255)
);

-- Table to associate users with roles
CREATE TABLE IF NOT EXISTS User_Role (
    User_ID INT,
    Role_ID INT,
    FOREIGN KEY (User_ID) REFERENCES Users(ID),
    FOREIGN KEY (Role_ID) REFERENCES Roles(ID),
    PRIMARY KEY (User_ID, Role_ID)
);

Following example illustrate how to retrieve permissions for a user with id 1 :

SELECT Users.ID, Users.Name, Roles.role_name, Permissions.permission_name
FROM Users
JOIN User_Role ON Users.ID = User_Role.User_ID
JOIN Roles ON User_Role.Role_ID = Roles.ID
JOIN Role_Permissions ON Roles.ID = Role_Permissions.Role_ID
JOIN Permissions ON Role_Permissions.Permission_ID = Permissions.ID
WHERE Users.id=1;

The above approach can work and you can implement a middleware (https://laravel.com/docs/11.x/middleware) to check if a user has required permission(s) before accessing a resource. This can be tedious and error-prone if not done right. Spatie/laravel-permission exists to save us time and ensure we have a high-quality implementation in place.

Managing permissions

I assume you have already read the Spatie official documentation, if not please read : https://spatie.be/docs/laravel-permission/v6/introduction.

Now you want to ensure that you have the flexibility to add new roles/permissions as your application grows and this may change from time to time.

From the docs, these are the lines we can use to create a perm and link to a role

$writers_role = \Spatie\Permission\Models\Role::create(['name' => 'writer']);
$edit_article_permission = \Spatie\Permission\Models\Permission::create(['name' => 'edit articles']);

$writers_role->givePermissionTo($edit_article_permission ); //give 'edit articles' permission to writers

Simple! But where should you run this code to get permissions in your DB? There are many options. For example, you can use Laravel Tinker, or even run this code once and delete it, etc... But how to make the process easy as the app keeps growing? 🤔🤔

I have 2 suggestions that usually work for me :

Use a migration file with no call to Schema related functions

It's a hack, but it works well. Firstly, this ensures that we will never create this permission twice, and as migrations are well handled by Laravel, we do not have to worry about calling the same code twice. We can create the permission in the up method and delete it in the down method.

The migration can look like this

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;

return new class extends Migration
{
    public function up(): void
    {
        $writers_role = Role::findOrCreate('publishers');
        $edit_article_permission = Permission::findOrCreate('edit articles');
        $writers_role->givePermissionTo($edit_article_permission); //give 'edit articles' permission to writers
    }

    public function down(): void
    {
        //here you can revert above created roles or permissions but you must ensure no user is still using any of them
    }
};

This is flexible because you can run migrations in production environment without breaking anything.

Create a specific artisan command

In Laravel it is not complicated to create a console command.
Spatie/laravel-permission comes with some predefined artisan commands, but they are not suitable for production as they are manual in nature, find more info about them here

We will create our own command.
Go to your terminal and run:

php artisan make:command InitPerms

This will create a file at app/Console/Commands/InitPerms.php

Paste inside InitPerms.php the following code:

<?php
namespace App\Console\Commands;
use Illuminate\Console\Command;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;

class InitPerms extends Command
{

    protected $signature = 'init:perms';
    protected $description = 'Create permissions';
    public function handle()
    {
        $writers_role = Role::findOrCreate('writer');
        $edit_article_permission = Permission::findOrCreate('edit articles');
        $writers_role->givePermissionTo($edit_article_permission); //give 'edit articles' permission to writers
        $this->info("Done!");
    }
}

The permissions can then be created within your application by running php artisan init:perms from your terminal.
This approach is good because you can run the command as many times as you like, modify the code, add more permissions whenever you really want.

Tip
If you have the env file for your production environment (typically for a small scale application) and you can access your database remotely you can run php artisan init:perms --env=production to execute the permission logic in your production DB (notice the env flag)

This approach is also good because you can add this command to your deployment pipeline, for example, and the permissions will be updated each time you trigger a new deployment.

Protect your routes

Implementing routes guard using spatie/laravel-permission can be done in a sec!
Simply calling the can() method is enough to check if a specific user has a give permission.
eg.

<?php
$user = Auth::user(); //get currently authenticated user
$hasPermToDeleteUsers = $user->can('delete users'); //return a true if user has permission

Spatie/laravel-permission create middleware that you can use in your route to protect them from unauthorized access
They have three middleware classes: \Spatie\Permission\Middleware\RoleMiddleware (for checking if user has given role),
\Spatie\Permission\Middleware\PermissionMiddleware (for checking if user has specific permission) ,
\Spatie\Permission\Middleware\RoleOrPermissionMiddleware (for checking if user has specific role or permission)

Here is an example using the permission middleware :

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    '\Spatie\Permission\Middleware\PermissionMiddleware::class:edit articles|delete articles', //notice here the middleware
    'verified',
])->group(function () {
    Route::get('/dashboard', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');
});

You can also register a your middleware alias to avoid using FQCN and improve code readability : https://laravel.com/docs/11.x/middleware#middleware-aliases

Conclusion

You can choose any of the above methods and your permissions will be well maintained over time across all your environments.
Some people also recommend writing these permissions in a seeder, but I personally don't like this as seeding itself in sensitive environments is dangerous!
If you have an application that heavily manipulates permissions, you can also create a UI where people can manage other users' permissions and roles.

Remember that there are only best practices, not perfect code. Have you found any of the above techniques useful in your particular situation? Please share in the comments!

DEV Community: Elvis Ansima

Configuring a VPS From Scratch (Debian)

Introduction

1. Why choose a VPS from scratch?

2. Base operating system: Debian Stable

3. Securing the primary entry point: SSH

Recommended SSH practices

Example SSH configuration (/etc/ssh/sshd_config)

Protection tools

4. Firewall configuration

5. Application stack

Web server

Backend and tooling

Data and caching

6. File permissions and ownership

Example permission setup

7. Backups and data protection

8. Disk encryption and threat modeling

Disk encryption (LUKS)

9. Monitoring and observability

10. Bonus: Cloudflare Worker as a secure proxy

Redirect handling considerations

Safe redirect strategies

Conclusion

Le potentiel rôle de Dieu dans notre sort (Pensée libre Pt II)

Pourquoi changer sera difficile… (Réflexion personnelle)

Unfiltered Builder’s Mindset

Digital Marketing: What I Know So Far

1. Understanding the Customer Journey

2. Advertising Online Takes Real Skill

3. Testing is What Makes You Smarter

4. Data Tells the Real Story

5. Getting More People to Take Action

6. Watching User Behavior Opened My Eyes

7. Using a Tag Manager Makes Life Easier

8. Email Marketing Still Works

9. Search Engine Optimization is Free Traffic

Final Thoughts

How to Validate AI API Responses with Zod and AJV (and Avoid Breaking Your Frontend)

Why Validate API Responses from AI?

Using AJV for AI API Validation (Schema-Based Approach)

1️⃣ Install AJV

2️⃣ Define Your Expected AI Response Schema

Using Zod for AI API Validation (TypeScript-Friendly Approach)

1️⃣ Install Zod

2️⃣ Define Your AI Response Schema

Which One Should You Use?

Why Deployment is a Nightmare for Developers (and How to Make It Easier)

The Limitations of Popular Platforms

Why Shared Hosting and VPS Deserve a Second Look

The Catch: Setting Up CI/CD on Shared Hosting

What’s Next?

Join the Movement

How Downtime Impacts SEO (and How to Build a Website Uptime Monitor with Google Sheets)

Why Does Downtime Affect SEO?

1. Crawling Issues

2. User Experience

3. Lost Backlinks and Traffic

4. Competitor Advantage

How to Build a Website Uptime Monitor

Step 1: Set Up the Spreadsheet

Step 2: Get to Know Apps Script

Step 3: Create a Bare Minimum Uptime Monitor

Step 4: Deploy a Web App with Your Favorite JS Libraries

Step 5: Go Further with a Ready Template

Next Steps

How to Process Incoming Emails and Trigger Webhooks, In-App Actions, and More Using Cloudflare Email Workers and D1 Database

Overview

Workflow

Why Use This Approach?

Step 1: Set Up Cloudflare Email Worker

Example Worker Code that save a mail content into D1

Configure Email Routing

Step 2: Extend the Worker

Updated Worker Code

Step 3: Integrate into a Laravel Project

Things you should try to do with HTML/CSS to avoid JavaScript overuse : The rule of least power

Custom toggle button with pure css

Input with autosuggestion

Color picker

Example SSH configuration (`/etc/ssh/sshd_config`)