DEV Community: David Loor

Putting my step count on my website

David Loor — Mon, 03 Nov 2025 00:00:00 +0000

I spent the weekend adding my step count to my website. Now everyone can see how much I walk.

My smartwatch and Android phone track my steps throughout the day. Since they're Android devices, all that data gets stored in Google Fit. I use Google Cloud's API to pull that data and display it on my site.

What it shows

Just the basics:

Today's steps (shown in the footer of every page)
Weekly total steps
30-day total
My streak

That's it. Just steps.

Why I built it

I'm not a fitness person. I don't have fitness routines or step goals. But I think public accountability might work to make me walk or exercise more.

Also, I wanted to implement an API integration with Google Fit and this seemed like a quick pet project to try it out.

I got inspired by Dries Buytaert who posts his phone battery status, and Aaron Parecki who tracks his sleep and health publicly. I'm doing the same thing with my steps.

How it works

I connected my Google account to pull data from Google Fit, made a simple dashboard to see my stats, and added a page to display them. I can turn it on or off whenever.

The data refreshes automatically every hour using a Cloudflare Worker cron job, so the numbers stay current throughout the day without me having to do anything.

The tech side

If you want to build something like this, here's the basic flow:

Set up a Google Cloud project and enable the Fitness API
Configure OAuth 2.0 credentials to authenticate users
Use the Google Fit API to fetch step data from the dataset.aggregate endpoint
Store access and refresh tokens securely in Cloudflare KV
Calculate stats like weekly totals, monthly totals, and streaks from the raw data
Build a simple UI to display the data
Set up a Cloudflare Worker with a cron trigger to refresh data automatically

I built this with Next.js and TypeScript, hosted on Cloudflare Pages. The authentication and API endpoints run as a separate Cloudflare Worker, while the frontend shows the stats and charts.

See it live

Check out my steps page to see the tracker in action.

How to run open source LLMs (AI) on your computer?

David Loor — Sat, 01 Nov 2025 00:00:00 +0000

I set up my own AI assistant that runs completely on my computer. No internet connection needed. No data sent to the cloud.

If you've been curious about running your own AI but thought it required a degree in computer science, I have good news: it's easier than you think.

Why would you want a local LLM (AI)?

Before we dive into the how, let's talk about the why. Running LLMs (AI) locally has some real advantages:

Privacy : Your conversations never leave your computer. No company is storing, analyzing, or training on your data.
No internet required : Once set up, you can use your AI anywhere: on a plane, in a coffee shop with spotty WiFi, or in the middle of nowhere.
It's free : After the initial setup, there are no subscription fees or API costs.
It's yours : You control everything. No rate limits, no content filters, no terms of service changes.

What you'll need

Here's what I needed to get started (and you'll need the same):

A reasonably modern computer (Windows, Mac, or Linux)
About 30 minutes of your time
Around 4-8 GB of free disk space (depending on which model you choose)

That's it. No expensive GPU required, though if you have one, things will run faster.

What is llama.cpp?

Before we dive into installation, let me explain what we're actually installing.

llama.cpp is software that lets you run Large Language Models (AI) on your computer. Think of it as the engine that makes everything work. These models are just data files, like videos or music files. llama.cpp is the player that knows how to use them.

It's open source, free, and actively maintained. It works on Mac, Windows, and Linux, and it's designed to be fast even on regular computers without fancy graphics cards.

Installation

The easiest way to install llama.cpp is through a package manager.

If you're on a Mac or Linux

Open your terminal and type:

brew install llama.cpp

That's the installation. Seriously.

If you're on Windows

Open PowerShell and run:

winget install llama.cpp

Running your first AI model

This is where it gets exciting. You don't need to download model files manually or figure out where to put them. The tool does it all for you.

Here's what you type to start chatting with an AI:

llama-cli -hf bartowski/Llama-3.2-3B-Instruct-GGUF:Q8_0

This downloads and runs the Llama 3.2 3B model from Hugging Face.

Let me break down what this does in plain English:

llama-cli starts the chat interface
-hf tells it to download from Hugging Face (a repository of LLMs)
bartowski/Llama-3.2-3B-Instruct-GGUF:Q8_0 is the specific model to use

The model identifier has three parts separated by slashes and a colon:

bartowski is the username of who uploaded the model on Hugging Face
Llama-3.2-3B-Instruct-GGUF is the repository name containing the model
Q8_0 is the specific quantization version (quality vs. size)

When you run this command, the model downloads automatically (this might take a few minutes the first time), and then you can start chatting. Type your questions, and the AI responds right there in your terminal.

How to find and use different models

The model I mentioned above (Llama 3.2) is a good starting point. It's relatively small and fast, even on modest hardware. But there are hundreds of other models you can try.

Finding models on Hugging Face

GGUF is the file format that llama.cpp uses. Models on Hugging Face come in different formats, but llama.cpp specifically needs GGUF files.

Go to huggingface.co/models and search for GGUF. Look for repositories that end with -GGUF in the name.

When you find a model you want to try, click on it and look for the repository name. For example, if you see bartowski/Qwen2.5-7B-Instruct-GGUF, you can run:

llama-cli -hf bartowski/Qwen2.5-7B-Instruct-GGUF:Q8_0

Tips for choosing models:

Smaller numbers = faster, but less capable : A 3B model is faster than a 7B model, which is faster than a 13B model. The number refers to how many billions of parameters the model has.
Look for "Instruct" or "Chat" in the name : These models are specifically trained for conversations.
The :Q8_0 part : This is the quantization level. Q8_0 is a good balance of quality and size. Q4_0 is smaller/faster but slightly lower quality.

Taking it a step further: Running an AI server

Once you're comfortable with the basic chat, you can level up by running your AI as a server. This lets you chat with it from your web browser and use it with other apps.

Run this command:

llama-server -hf bartowski/Llama-3.2-3B-Instruct-GGUF:Q8_0

You'll see output like:

main: server is listening on http://127.0.0.1:8080 - starting the main loop

Now open http://127.0.0.1:8080 (or http://localhost:8080) in your web browser. You'll see a chat interface where you can talk to your AI directly from the browser. No additional software needed.

The server also works with any app that supports OpenAI's API format. This means you can use tools like:

Continue.dev (AI coding assistant in VS Code)
Open WebUI (a ChatGPT-like interface)
Any other app that supports custom API endpoints

Where the models are stored

When you run these commands, models download automatically to a cache folder. By default, it's in your home directory under .cache/llama.cpp.

If you want to change where models are stored, you can set an environment variable:

# On Mac/Linuxexport LLAMA_CACHE=/path/to/your/cache# On Windows (PowerShell)$env:LLAMA_CACHE="C:\path\to\your\cache"

What about performance?

Here's what I learned about performance:

On newer Macs (M1/M2/M3/M4): Models run surprisingly fast. The M-series chips have built-in AI acceleration.
On Windows/Linux with a decent GPU : Also fast. If you have an NVIDIA GPU, llama.cpp will use it automatically.
On older computers or laptops without GPUs : Still works! Just stick with smaller models (3B or 7B) and expect slower responses.

For reference, on my M4 Pro with 48GB RAM, a 3B model generates text at about 60-65 tokens per second. That's fast enough to feel like a real conversation.

llama.cpp vs Ollama vs vLLM

You might have heard of other tools like Ollama or vLLM. Here's how they compare:

Ollama

Ollama is built on top of llama.cpp. It adds a simpler interface and automatic model management, but that convenience comes with performance overhead. In my tests on an M4 Pro Mac with 48GB RAM, llama.cpp was an order of magnitude faster than Ollama running the same models.

If you want maximum performance and don't mind using the command line, stick with llama.cpp. If you prefer easier model management and can accept slightly slower speeds, Ollama works well.

vLLM

vLLM doesn't support macOS. It's Linux-only and designed for high-throughput server deployments with multiple GPUs. If you're on a Mac, it's not an option.

Bottom line

For Mac users, especially on Apple Silicon (M1/M2/M3/M4), llama.cpp is the best choice. It's the fastest option and has native Metal acceleration. Ollama is fine if you want simpler management. vLLM isn't available on Mac.

Questions you might have

Is this legal?

Yes. The models on Hugging Face are open source and free to use. Many are published by Meta (Facebook), Mistral AI, and other organizations that explicitly allow personal and commercial use.

Will this slow down my computer?

While the AI is running, it uses CPU/GPU resources. But when you close it, everything returns to normal. It's like running any other application.

Can I use this for work?

That depends on your work's policies. Since everything runs locally and your data doesn't leave your machine, it's generally safer than cloud AI. But check with your IT department first.

Do I need to be online?

Only for the initial download of models. After that, everything works completely offline.

My experience

I've been using my local AI, and I'm impressed. It's not quite as capable as GPT-5, Claude Sonnet 4.5, or Gemini 2.5, but for many tasks (writing emails, brainstorming ideas, answering questions) it's more than good enough.

What I appreciate most is the privacy aspect. My conversations stay on my machine. No data sent to external servers. No training datasets being fed somewhere. This makes it better suited for working with confidential information compared to cloud AI, though you should still follow your organization's security policies.

Is it perfect? No. Responses can sometimes be slow if I'm running a larger model. And the quality isn't quite at the level of the best cloud AIs. But for a free, private, always-available assistant? I'll take that trade-off.

How to manage multiple Drupal sites with one MCP server

David Loor — Sat, 25 Oct 2025 00:00:00 +0000

The problem with context switching

I work on a few Drupal sites. Every time I switch between them, there's this mental overhead: Which modules does this one have? What fields are on the article type? I need to pull some data from the database to display it. Should I create a new view, or does one already exist?

Even with AI assistants like Claude Code, Cursor, or Windsurf, getting answers meant waiting while they ran multiple drush commands sequentially, piecing together fragments of information. So I built Drupal Scout, an MCP server that gives AI assistants instant, comprehensive knowledge about your Drupal site. It's open source on GitHub. Scout is read-only. It analyzes your site but never modifies your database or files.

Without Scout, your AI runs commands like this:

AI: Running drush field:list node article...AI: Running drush config:get field.field.node.article.field_image...AI: Running drush config:get field.field.node.article.field_category...# ...and so on, waiting between each command

With Scout, you just ask: "What fields are on the article type?"

One call. Instant answer. Everything cross-referenced. This saves 70-90% of tokens compared to running commands sequentially, and your AI responds instantly instead of waiting for multiple drush operations.

The multi-project trick

Here's what I learned: You can use the same MCP server for all your projects. Each one gets its own context automatically.

When I figured this out, it changed everything. No more switching configs. No more wondering which site I'm looking at. The AI just knows.

How it works

Drupal Scout looks for a config.json file in your project directory. When you're in project A, it reads A's config. Switch to project B? It reads B's config. Simple.

The MCP server itself lives in one place (I keep mine in ~/.local/drupal-scout-mcp), but each project tells it which Drupal installation to index.

Setting it up

Install Drupal Scout once:

git clone https://github.com/davo20019/drupal-scout-mcp.git ~/.local/drupal-scout-mcpcd ~/.local/drupal-scout-mcppython3 -m venv venvsource venv/bin/activatepip install -r requirements.txt

Then in each Drupal project, drop two files in the root:

config.json (tells Scout where your Drupal lives):

{ "drupal_root": "/path/to/your/drupal", "modules_path": "web/modules"}

.claude.json (connects the MCP server):

claude mcp add --transport stdio drupal-scout -- \ ~/.local/drupal-scout-mcp/venv/bin/python \ ~/.local/drupal-scout-mcp/server.py

That's it. When you cd into that project and start coding, Scout indexes those modules. Switch projects? It indexes the new ones.

What can Drupal Scout do?

Now that you have it set up, what can you actually do with it? Let me show you some real examples.

Analyzing fields and content types

You: "I need to add a phone number field to the staff content type"AI: Let me check if a phone field already exists...AI: Using drupal-scout get_field_info(field_name="phone")Result: Found 2 phone fields:• Phone Number (field_phone_number) Type: telephone, Used in: contact, vendor• Mobile Phone (field_mobile_phone) Type: telephone, Used in: employeeAI: "You can reuse field_phone_number on the staff content type!"

This saved you from creating a duplicate field with a different name. One query showed you all phone-related fields and where they're used.

Finding views and displays

You: "Do we have any views that display user data?"AI: Using drupal-scout get_views_summary(entity_type="users")Result: Found 2 views:• User List (user_list) Displays: page, block• Staff Directory (staff_directory) Displays: page, blockAI: "Yes! The Staff Directory view already exists with filters for department and role."

Instead of creating a new view, you discovered an existing one that does what you need.

Cleaning up taxonomy terms

You: "Can I safely delete the 'Old Category' term?"AI: Using drupal-scout get_taxonomy_info(term_name="Old Category")Result: Term: Old Category (tid: 75)Usage: 0 content items, 0 viewsChildren: NoneSAFE TO DELETE - This term is not used anywhere.AI: "Yes, it's safe to delete. The term isn't used in any content or views."

Now try asking about a term that is used:

You: "What about the 'Technology' term?"AI: Using drupal-scout get_taxonomy_info(term_name="Technology")Result: Term: Technology (tid: 42)Usage: 87 content itemsChildren: AI/ML, Web DevelopmentSample content:• How AI is Changing Development (nid: 123)• Tech Trends 2024 (nid: 156)... and 84 moreWARNING: Has child terms (2 children will become orphaned)CAUTION: Used in 87 pieces of contentAI: "This term is heavily used. Deleting it would affect 87 articles and orphan 2 child terms. Consider merging instead."

This analysis would have taken dozens of drush commands and database queries. Drupal Scout did it in one call.

Debugging with watchdog logs

You: "The site is showing errors, can you check what's wrong?"AI: Using drupal-scout get_watchdog_logs()Result: Found 12 PHP errors:[2024-01-15 14:32:21] Undefined array key 'field_category'Location: /modules/custom/custom_module/custom_module.module:45[2024-01-15 14:30:15] Call to undefined method getCategory()Location: /modules/custom/custom_module/src/Service/CategoryService.php:78AI: "I found two related errors in custom_module. Let me read those files and fix them..."

The AI can immediately jump to the problem files and suggest fixes.

Getting module recommendations

Here's something I find really useful: Drupal Scout can search the Drupal.org API and recommend modules based on what you're trying to do.

You: "I need a way to manage workflow and content moderation"AI: Using drupal-scout search_drupal_modules(keyword="workflow")Result: Found relevant modules:• Workbench Moderation - Provides editorial workflow for content• Content Moderation - Core workflow solution for Drupal 8+• Workflow - Flexible content workflow managementAI: "Based on your Drupal version and needs, I recommend Content Moderation since it's in core for Drupal 8+. Want me to check if it's already enabled?"

Instead of googling for modules or asking around, the AI can search Drupal.org, compare options, and make recommendations based on your specific setup.

Tips for getting the most out of Drupal Scout

1. Ask broad questions first

Instead of diving into implementation, ask Drupal Scout to check what exists:

Instead of: "Create a view showing recent articles"
Try: "Do we have any views showing articles?"

You might discover you already have what you need.

2. Let the AI use the tools

You don't need to specify which MCP tool to use. Just ask natural questions:

"What fields are on the article content type?"
"Can I safely delete this module?"
"Are there any recent errors in the logs?"

The AI knows which tool to call based on your question.

3. Combine analysis with action

Drupal Scout provides read-only analysis. When you need to make changes, the AI can use that information to execute commands safely:

You: "Clean up unused modules"AI: Using drupal-scout find_unused_contrib()Result: Found 3 installed but unused modules: devel, kint, admin_toolbar_toolsAI: "I found 3 unused modules. Should I uninstall them?"You: "Yes"AI: Running: drush pmu devel kint admin_toolbar_toolsAI: Running: composer remove drupal/devel drupal/kint drupal/admin_toolbar_toolsAI: Using drupal-scout reindex_modules()

The AI uses Drupal Scout for analysis, then executes the necessary commands to make changes.

How does MCP actually work?

You might be wondering: "How does the AI know when to use Drupal Scout?" Great question! Understanding this helps you appreciate why MCP is so powerful.

The tool description is the AI's instruction manual

When Drupal Scout connects to your AI assistant, it doesn't just provide functions-it provides documentation about those functions. Each tool has a description that tells the AI:

What the tool does
When to use it
What parameters it accepts
What kind of results it returns

For example, the get_field_info tool has a description like:

Get comprehensive information about Drupal fields. **USE THIS TOOL** for questions about fields, where they're used,field types, and data structure.Examples:• "What fields does the article content type have?"• "Where is field_image used?"• "Do we have a phone number field?"

This description becomes part of the AI's knowledge. When you ask "What fields are on my article content type?", the AI recognizes this matches the pattern and calls the appropriate tool.

The conversation flow

Here's what actually happens when you interact with Drupal Scout:

You ask : "What fields does my article content type have?"
AI thinks : "This is a question about fields. I have get_field_info for that."
AI calls tool : drupal-scout.get_field_info(entity_type="node")
MCP server executes : Runs drush commands, parses configs, analyzes usage
MCP returns data : "Fields Summary (15 fields found)..."
AI formats response : "I found 15 fields on your node entity types..."

The beauty is that you never see steps 2-5. You just get the answer.

Why this is better than traditional prompting

Without MCP, you'd have to tell the AI exactly what to do:

You: "Run drush field-list, then for each field run drush config:get,then parse the YAML and tell me which are phone fields"

With MCP, you just ask naturally:

You: "Do we have a phone field?"

The tool descriptions taught the AI how to handle Drupal-specific questions. You don't need to be a drush expert-the MCP server already is.

It's declarative, not imperative

Here's a key insight: MCP tool descriptions are declarative (describing what exists) rather than imperative (forcing specific actions).

This means:

The MCP doesn't override your prompts
It tells the AI what capabilities are available
The AI still decides when and how to use them
You maintain full control through natural conversation

Think of it like giving the AI a specialized toolkit. You still tell it what to build, but now it has better tools to build with.

What Scout can analyze

Drupal Scout provides deep analysis across your entire Drupal installation with 23+ specialized tools:

Modules & Dependencies (8 tools):

Search for functionality across custom and contrib modules
List all modules with capabilities and hook implementations
Get detailed module information (services, routes, classes, hooks)
Analyze dependencies (forward, reverse, circular)
Find unused contrib modules (with installation status)
Check redundancy before building new features
Find all implementations of a specific Drupal hook
Force reindex when modules change

Entities, Fields & Content (multiple tools):

Complete entity structure with bundle information
Comprehensive field analysis with usage tracking
Entity references showing where content is used
Display configurations for view modes
Search entities by any field value
Get entity info by ID or path

Views Analysis (1 tool):

List all views with displays (page, block, feed, etc.)
Display paths and settings
Filters, sorts, and relationships
Fields being displayed
Filter by entity type

Taxonomy (2 tools):

All vocabularies with term counts and referencing fields
Complete term hierarchies (parent/child relationships)
Detailed usage analysis (content, views, fields)
Safe-to-delete assessment with warnings
Bulk analysis of entire vocabularies (optimized for large datasets)
Export taxonomy data to CSV/Excel

Security Scanning (11 tools):

SQL injection vulnerability detection
Cross-Site Scripting (XSS) checks
CSRF protection analysis
Command injection detection
Path traversal vulnerabilities
Hardcoded secrets and API keys
Access control issues
Deprecated API usage
Anonymous exploits (remotely exploitable)
Security audit (comprehensive report)
Verification guides (how to manually verify findings)

Code Analysis (4 tools):

Read module files with smart chunking for large files
List files in modules with size information
Get module directory tree visualization
Extract specific PHP functions from files

Drupal.org Integration (5 tools):

Search for modules on Drupal.org
Get popular modules by category
Module recommendations based on needs
Detailed module information with issue queue
Search module issue queues for problems

System Health & Monitoring (5 tools):

Watchdog logs with error patterns and diagnostics
Database connectivity verification
Available updates for core and contrib
Full status report (/admin/reports/status equivalent)
Configuration sync status

All 23+ tools work together seamlessly. The AI assistant automatically knows which tool to use based on your question.

Resources

How to Share Your Local WordPress or Drupal Site with Cloudflare Tunnel (Free)

David Loor — Tue, 14 Oct 2025 00:00:00 +0000

When developing locally with DDEV, you might need to share your work with clients, test webhooks from external services, or collaborate with remote team members. Cloudflare Tunnel provides a secure, simple way to expose your local development sites to the internet without opening firewall ports or dealing with complex networking configurations.

What is Cloudflare Tunnel?

Cloudflare Tunnel (formerly Argo Tunnel) is part of Cloudflare's Zero Trust networking solution. It creates a secure, outbound-only connection from your local machine to Cloudflare's edge network, which then routes public traffic to your local services. This means:

No open inbound ports - Your firewall stays secure
No public IP required - Works behind NAT and corporate firewalls
Free for development use - Cloudflare's quick tunnels are free
HTTPS by default - Automatic SSL/TLS encryption
Simple setup - Just one command to get started

What is DDEV?

DDEV is a Docker-based local development environment that makes it easy to set up PHP projects (Drupal, WordPress, Laravel, etc.) with minimal configuration. It provides:

Pre-configured containers for web, database, and other services
Support for multiple PHP versions
Built-in SSL certificates for local HTTPS
Command-line tools for common development tasks

Using DDEV with Cloudflare Tunnel lets you run your site locally and share it publicly whenever needed.

Prerequisites

Before we begin, make sure you have:

A Mac, Linux, or Windows machine with Docker installed
DDEV installed and configured (official installation guide or check out my guide on setting up DDEV for WordPress and Drupal)
A working DDEV project (we'll use example sites like myproject.ddev.site and client-site.ddev.site)
Basic command-line familiarity
No Cloudflare account required for quick tunnels (the method covered in this guide)

Note: If you want persistent URLs with custom domains (covered later), you'll need a free Cloudflare account.

Step 1: Install Cloudflared

The cloudflared daemon is the client that creates the tunnel connection. Installation varies by platform:

macOS (Homebrew)

brew install cloudflared

Linux (Debian/Ubuntu)

wget -q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.debsudo dpkg -i cloudflared-linux-amd64.deb

Linux (RHEL/CentOS)

wget -q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-x86_64.rpmsudo rpm -i cloudflared-linux-x86_64.rpm

Windows

Download the installer from the Cloudflare downloads page or use Chocolatey:

choco install cloudflared

Verify the installation:

cloudflared --version

Step 2: Start Your DDEV Site

Make sure your DDEV project is running. Navigate to your project directory and start DDEV:

cd /path/to/your/projectddev start

Your site will be available locally at something like https://yourproject.ddev.site. Verify it works by opening it in your browser.

Step 3: Create a Cloudflare Tunnel to Your DDEV Site

Here's where it gets interesting. Run one command and cloudflared creates a tunnel with a public URL automatically. No account setup, no authentication, no configuration needed. The basic syntax is:

cloudflared tunnel --url <local-url> --http-host-header <hostname>

Example 1: My Project Site

cloudflared tunnel --url https://myproject.ddev.site/ --http-host-header myproject.ddev.site

Example 2: Client Site

cloudflared tunnel --url https://client-site.ddev.site/ --http-host-header client-site.ddev.site

After running this command, you'll see output like:

2025-10-14T10:30:15Z INF Thank you for trying Cloudflare Tunnel. Doing so, without a Cloudflare account, is a quick way to experiment and try it out. However, be aware that these account-less Tunnels have no uptime guarantee. If you intend to use Tunnels in production you should use a pre-created named tunnel by following: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps2025-10-14T10:30:15Z INF Requesting new quick Tunnel on trycloudflare.com...2025-10-14T10:30:16Z INF +--------------------------------------------------------------------------------------------+2025-10-14T10:30:16Z INF | Your quick Tunnel has been created! Visit it at (it may take some time to be reachable): |2025-10-14T10:30:16Z INF | https://randomly-generated-subdomain.trycloudflare.com |2025-10-14T10:30:16Z INF +--------------------------------------------------------------------------------------------+

Copy the generated URL (e.g., https://randomly-generated-subdomain.trycloudflare.com) and share it with anyone who needs access to your local site!

Understanding the Command Parameters

Let's break down what each parameter does:

--url : The local URL where your DDEV site is running. Use HTTPS if your DDEV site uses SSL (which it does by default).
--http-host-header : This is crucial for DDEV. It tells cloudflared to forward the correct hostname in the HTTP Host header. DDEV routes requests based on this header, so without it, you'll get a "404 Not Found" or see the wrong site.

Why is --http-host-header Necessary?

DDEV's router uses virtual hosting, meaning multiple sites can run on the same IP address and port. The router determines which site to serve based on the Host header in the HTTP request.

When traffic comes through Cloudflare Tunnel, the Host header would normally be the Cloudflare-generated domain (like randomly-generated-subdomain.trycloudflare.com). By specifying --http-host-header myproject.ddev.site, we override this and ensure DDEV sees the correct hostname.

Using Named Tunnels for Persistent URLs

The quick tunnel method above is perfect for ad-hoc sharing, but the URL changes each time you run the command and there's no uptime guarantee. If you need a persistent URL with your own custom domain (like myproject.example.com), you can create a named tunnel. This requires a free Cloudflare account.

1. Authenticate with Cloudflare

cloudflared tunnel login

This opens a browser to authenticate with your Cloudflare account.

2. Create a Named Tunnel

cloudflared tunnel create my-ddev-tunnel

This generates a tunnel ID and credentials file.

3. Create a Configuration File

Create ~/.cloudflared/config.yml:

tunnel: <TUNNEL-ID>credentials-file: /Users/yourusername/.cloudflared/<TUNNEL-ID>.jsoningress: - hostname: mysite.example.com service: https://myproject.ddev.site originRequest: httpHostHeader: myproject.ddev.site noTLSVerify: true - service: http_status:404

Note: noTLSVerify: true is needed because DDEV uses self-signed certificates.

4. Route Your Domain

cloudflared tunnel route dns my-ddev-tunnel mysite.example.com

5. Run the Tunnel

cloudflared tunnel run my-ddev-tunnel

Your site is now accessible at https://mysite.example.com with a persistent URL!

Common Use Cases

1. Client Demos

Share work-in-progress sites with clients without deploying to staging servers:

cloudflared tunnel --url https://client-demo.ddev.site/ --http-host-header client-demo.ddev.site

Send the generated URL to your client for instant feedback.

2. Webhook Testing

Test webhooks from services like Stripe, GitHub, or Twilio that require a public URL:

cloudflared tunnel --url https://webhooks.ddev.site/ --http-host-header webhooks.ddev.site

Configure the webhook in the external service to point to your Cloudflare URL.

3. Mobile Device Testing

Test your responsive designs on real mobile devices without being on the same network:

cloudflared tunnel --url https://mobile-test.ddev.site/ --http-host-header mobile-test.ddev.site

Open the Cloudflare URL on your phone to test on real devices.

4. Remote Collaboration

Share your development environment with remote teammates:

cloudflared tunnel --url https://team-collab.ddev.site/ --http-host-header team-collab.ddev.site

Your team can access the site as if they were running it locally.

Troubleshooting

Getting a 404 or Wrong Site

Make sure you're using the --http-host-header parameter with the correct DDEV hostname:

cloudflared tunnel --url https://mysite.ddev.site/ --http-host-header mysite.ddev.site

SSL Certificate Errors

If you're using a named tunnel with a config file, add noTLSVerify: true to the origin request section since DDEV uses self-signed certificates.

Tunnel Not Starting

Check if cloudflared is already running:

ps aux | grep cloudflared

Kill any existing processes if needed:

pkill cloudflared

DDEV Site Not Accessible Locally

Verify your DDEV site is running:

ddev describe

Make sure the URL you're using matches the output.

Security Considerations

While Cloudflare Tunnel is secure by design, keep these points in mind:

Don't expose production databases - Only tunnel development sites with non-sensitive data
Quick tunnels are temporary - URLs expire and shouldn't be relied upon for production
Use authentication - For sensitive projects, add Cloudflare Access authentication to your named tunnels
Monitor tunnel access - Check Cloudflare Analytics to see who's accessing your tunnels
Shut down tunnels when done - Use Ctrl+C to stop the tunnel when you're finished

Alternative: DDEV's Built-in Share Command

DDEV also has a built-in ddev share command that uses ngrok. However, Cloudflare Tunnel offers several advantages:

Free without rate limits (ngrok free tier has limits)
Better performance through Cloudflare's global network
Integration with Cloudflare Zero Trust for advanced features
Persistent named tunnels with custom domains

That said, ddev share is even simpler if you just need something quick and don't want to install additional tools.

Additional Resources

How to use AI directly on your Kindle

David Loor — Sat, 04 Oct 2025 00:00:00 +0000

It keeps happening. I'm reading on my Kindle, come across something I don't fully understand, and face the same annoying choice: put the Kindle down and grab my phone, or struggle with the Kindle's browser trying to use ChatGPT's interface that wasn't built for e-ink screens.

After dealing with this enough times, I spent this weekend building Kindle-ChatGPT: a simple AI chat that works directly in your Kindle's browser. No app to download, no account to create. Just type your question and get an answer optimized for e-ink.

The problem with AI on Kindle

When I'm reading on my Kindle and come across something I want to understand better, I have two options:

Put down the Kindle and grab my phone
Try to use the Kindle's browser to access a traditional AI chat interface that's not optimized for e-ink displays

Neither option is ideal. The first interrupts my reading flow, and the second gives me an interface that's painful to use on an e-ink screen with its low refresh rate and limited interactivity.

What I built

Kindle-ChatGPT is a web app designed exclusively for Kindle e-reader browsers. Here's what makes it work well on Kindle:

High contrast design : Black and white interface optimized for e-ink displays
Simple interaction : Minimal UI that works with Kindle's browser limitations
No login required : Access it instantly without creating an account
Lightweight : Fast loading and minimal battery drain
Streaming responses : See the AI's answer appear progressively, just like ChatGPT

The name says "ChatGPT" because that's what people search for, but it actually uses Google's Gemini API under the hood.

Technical implementation

I built Kindle-ChatGPT with these technologies:

Next.js 15: React framework with server-side rendering
TypeScript: Type safety for better code quality
Tailwind CSS: Utility-first CSS for rapid UI development
Google Gemini AI: Specifically the gemini-2.5-flash-lite-preview-09-2025 model
Cloudflare Workers: Edge computing for fast global performance

Why Gemini instead of ChatGPT?

While the service is named "ChatGPT" for discoverability, I chose Google's Gemini API for several technical reasons:

Better free tier : Gemini offers more generous rate limits for free usage
Faster responses : The flash-lite model is optimized for speed
Native streaming : Built-in SSE (Server-Sent Events) support for progressive responses
Lower latency : Works well with Cloudflare's edge network

Key technical challenges

Building for Kindle presented unique challenges:

1. Kindle browser detection

The app only works on Kindle browsers to maintain focus on the optimized experience. I implemented device detection to ensure users get the interface designed specifically for e-ink displays.

2. Rate limiting without authentication

Since there's no login, I implemented IP-based rate limiting using Cloudflare KV storage:

// Rate limiting configurationconst RATE_LIMIT_PER_MINUTE = 10; // Max 10 requests per minuteconst DAILY_MESSAGE_LIMIT = 100; // Max 100 messages per dayconst MAX_MESSAGE_LENGTH = 5000; // Max 5000 characters per message

This prevents abuse while keeping the service free and accessible.

3. Streaming responses for e-ink

E-ink displays have slow refresh rates, so I needed to balance streaming speed with readability. The implementation uses Server-Sent Events (SSE) to stream responses from Gemini:

const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/${GEMINI_MODEL}:streamGenerateContent?alt=sse&key=${GEMINI_API_KEY}`;const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents, generationConfig: { temperature: 0.7, maxOutputTokens: 2048, topP: 0.95, topK: 40, }, }),});

4. Conversation history management

To provide context-aware responses, I maintain conversation history on the client side and send it with each request:

const contents = (history || []).map((msg: { role: string; content: string }) => ({ role: msg.role === 'assistant' ? 'model' : 'user', parts: [{ text: msg.content.substring(0, MAX_MESSAGE_LENGTH) }],}));

How to use it

Using Kindle-ChatGPT is straightforward:

Open your Kindle's web browser (Menu → Experimental Browser or Web Browser, depending on your model)
Navigate to kindle-chatgpt.com
Start typing your question in the text area
Press Enter or tap the Send button
Watch the response stream in

Real-world use cases

Here's how I actually use it while reading:

Quick definitions : "What does 'epistemology' mean in simple terms?"
Context about historical events : "What was happening in Europe in 1848?"
Concept clarification : "Explain quantum entanglement like I'm 12"
Author background : "Who is Yuval Noah Harari and what's his background?"
Book recommendations : "What other books are similar to Sapiens?"
Writing help : "Help me rephrase this sentence to be clearer"

The key is that I never have to leave my Kindle. The conversation stays in context, and the high-contrast interface doesn't strain my eyes.

Why Kindle-only?

Some people asked why I restricted it to Kindle browsers. Here's my reasoning:

Focused optimization : By targeting one device type, I can optimize the entire experience
Clear value proposition : Kindle users know exactly what they're getting
Prevents misuse : Limits the potential for bot traffic and abuse
Battery efficiency : The simplified UI is designed specifically for e-ink's power characteristics

If someone tries to access the site from a regular browser, they see a landing page explaining the service and encouraging them to use it on their Kindle.

Security and privacy

Since there's no authentication, privacy was a top concern:

No data storage : Conversations aren't saved on the server
No tracking : No analytics or cookies beyond what's necessary for rate limiting
IP-based rate limiting : Uses Cloudflare KV with automatic expiration
Input validation : Strict message length limits and content validation
Security headers : Proper CSP, X-Frame-Options, and other security headers

Deployment on Cloudflare

I deployed this on Cloudflare Workers using @opennextjs/cloudflare, which adapts Next.js for Cloudflare's edge network. This gives several advantages:

Global edge network : Fast response times worldwide
Free tier : 100,000 requests per day on the free plan
KV storage : Built-in key-value storage for rate limiting
Automatic scaling : Handles traffic spikes without configuration

The build process is simple:

npm run pages:buildnpm run deploy

Lessons learned

Building this taught me several things about working with constrained environments:

1. Constraints can simplify decisions

The Kindle's limitations (slow refresh, limited JavaScript, basic CSS support) forced me to strip away unnecessary complexity. What I ended up with was simpler and more focused.

2. Progressive enhancement matters

The app works with minimal JavaScript. If streaming fails, it falls back to a simple request-response model. This makes it more resilient.

3. Building for yourself speeds up iteration

I built this because I needed it. Every technical decision was tested immediately by actually using the app on my Kindle while reading.

4. Free services need clear limits

Without proper rate limiting, a free AI service would be abused instantly. The 100 messages per day limit is generous enough for legitimate use but prevents abuse.

What's next

I'm considering these additions:

Support for multiple AI models (letting users choose between Gemini, Claude, etc.)
Saved conversation history (optional, with user consent)
Integration with Kindle's built-in dictionary
Export conversations to your email

But I'm being cautious about adding features. The simplicity is part of what makes it work well on Kindle.

Try it yourself

If you have a Kindle e-reader, try it out at kindle-chatgpt.com. It's free and requires no signup.

How to read Nginx access logs

David Loor — Wed, 20 Aug 2025 00:00:00 +0000

When something breaks, the access log tells a story. Who hit the site. What they asked for. Which URLs failed. When a spike started. I used these steps on a real project and they worked. The examples below are safe to copy and run, then tweak for your setup.

What are Nginx access logs?

Nginx access logs are text files that record every HTTP request your web server receives. Each line represents one request and contains details like the client's IP address, timestamp, HTTP method, URL path, status code, response size, and more.

These logs are automatically generated by Nginx as it processes requests. Every time someone visits your site, clicks a link, submits a form, or even hits a broken URL, Nginx writes a line to the access log. This happens in real-time, so the log file is constantly growing.

How access logs work

Nginx uses a configurable log format defined in your nginx.conf file. The default format looks like this:

log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                '$status $body_bytes_sent "$http_referer" '
                '"$http_user_agent"';

This creates log entries like:

192.168.1.100 - - [20/Aug/2025:10:30:45 +0000] "GET /blog/post HTTP/1.1" 200 1234 "https://example.com/" "Mozilla/5.0..."

Many modern setups use a more detailed JSON-like format with key=value pairs, which is what the examples in this post assume.

CDN vs. Origin: Where to look for logs

If you're using a CDN (like Cloudflare, CloudFront, or Fastly), there are two different sets of logs to consider:

CDN edge logs : Show requests from actual users hitting the CDN. These contain the real client IPs, user agents, and geographic locations.

Origin server logs (what this post covers): Show requests that made it through the CDN to your Nginx server. These logs often show the CDN's IP address as the client, not the end user's IP.

For troubleshooting, you usually want the CDN logs first. Only check origin logs when you need to see what actually reached your server or when debugging server-side issues.

All examples assume key=value logs (fields like status="404" and request="GET /path HTTP/1.1"), and files under /var/log/nginx/. Adjust names as needed.

What you will learn

How to read live and gzipped logs in one go
How to find top IPs and top failing URLs
How to pull everything from one IP
How to zoom in on a short time window
How to tie access logs to WAF blocks
How to keep results fast and useful

Quick start

Read everything, no matter if the file is .log or .gz:

zgrep -h . /var/log/nginx/ssl-*.access.log*

That zgrep trick handles both normal and rotated files. Add filters after it.

Tools you'll use

zgrep : Like grep but works on both regular files and compressed (.gz) files. Perfect for log files that get rotated and compressed.

awk : A powerful text processing tool that can split lines by delimiters and extract specific fields. Great for parsing structured log formats.

cut : Extracts specific columns or fields from text. Use -d to specify a delimiter (like quotes or commas) and -f to pick which field number you want.

Find top IPs behind 404 storms

When editors report "lots of broken links," start here.

zgrep -h . /var/log/nginx/ssl-*.access.log* \
| awk -F'status="' '$2 ~ /^404"/' \
| awk -F'x_forwarded_for="' '{print $2}' \
| cut -d'"' -f1 | cut -d',' -f1 \
| LC_ALL=C sort | uniq -c | sort -nr | head

Why it helps. You see the worst offenders first. If an IP is scanning random paths, you will spot it fast.

See everything a single IP did

Handy when you need to explain a block or a spike from one source.

IP="112.134.209.112"
zgrep -h . /var/log/nginx/ssl-*.access.log* \
| grep -F 'x_forwarded_for="'$IP

Tip. In some stacks the client IP can live in src or src_ip. If so, swap the field name in the grep.

Top URLs hit by that IP (ignore query strings)

IP="112.134.209.112"
zgrep -h . /var/log/nginx/ssl-*.access.log* \
| grep -F 'x_forwarded_for="'$IP \
| awk -F'request="' '{print $2}' | cut -d'"' -f1 \
| awk '{print $2}' | cut -d'?' -f1 \
| LC_ALL=C sort | uniq -c | sort -nr | head

Why it helps. Dropping the query string groups "the same page with different params" together, which makes patterns obvious.

Top failing URLs by status

404s:

zgrep -h . /var/log/nginx/ssl-*.access.log* \
| awk -F'status="' '$2 ~ /^404"/' \
| awk -F'request="' '{print $2}' | cut -d'"' -f1 \
| awk '{print $2}' | cut -d'?' -f1 \
| LC_ALL=C sort | uniq -c | sort -nr | head

5xx:

zgrep -h . /var/log/nginx/ssl-*.access.log* \
| awk -F'status="' '{split($2,a,"\""); if (a[1] ~ /^5[0-9][0-9]$/) print}' \
| awk -F'request="' '{print $2}' | cut -d'"' -f1 \
| awk '{print $2}' | cut -d'?' -f1 \
| LC_ALL=C sort | uniq -c | sort -nr | head

Why it helps. This gives you a ranked list of problem paths. Fix the top five and you often fix most of the pain.

Zoom in on a short time window

When a spike hits at a known time, you want before and after.

Simple and quick (good enough for a 10-minute window inside the same hour):

# Example: 09/Aug/2025 23:15–23:25
zgrep -h 'time_local="' /var/log/nginx/ssl-*.access.log* \
| egrep '09/Aug/2025:23:1[5-9]|09/Aug/2025:23:2[0-5]'

Pipe the result into any of the counts above.

Why it helps. You compare traffic right before and right after an event, which is often all you need to see what changed.

Form posts and large bodies

Large POSTs to a form can trip WAF rules. Measure them.

PATH_RE="/about/.*speaker-request-form"
zgrep -h . /var/log/nginx/ssl-*.access.log* \
| awk -F'request="' -v r="$PATH_RE" '
  { split($2,a,"\""); split(a[1],b," "); m=b[1]; u=b[2];
    if (m=="POST" && u ~ r) print }' \
| awk -F'request_length="' '{print $2}' | cut -d'"' -f1 \
| awk '{sum+=$1; c++} END{print "POST count="c, "avg_request_length=" (c?sum/c:0)}'

Why it helps. If average request size is high, your WAF may block inspection. You now have proof and numbers.

Tie access logs to WAF blocks

Grab the exact time and rule from your WAF event.
Filter access logs for that window using the "time window" trick.
Look for the same path, the same IP, or a large request_length.
If the WAF rule talks about body size or inspection limits, confirm with the POST analysis above.

This closes the loop. You can say what happened and why it happened.

Speed tips that matter

Filter early. Add grep 'status="404"' before you sort.
Use LC_ALL=C sort for faster and stable sorting.
Drop query strings to group pages by path.
Sample first. Run head on a pipeline to check you are slicing the right field.
Document your log_format in the repo. Future you will thank you.

Common pitfalls

Counting by remote_addr when your app sits behind a proxy. Use x_forwarded_for or your real client IP field.
Assuming all log files use the same format. Check your nginx.conf log_format before parsing.
Forgetting that rotated logs (.gz files) need zgrep, not grep.
Using complex regex patterns that break when log formats change. Keep it simple.

Takeaways

Logs answer real questions fast. Start with a clear question, pipe only what you need, and count. Tie what you see in Nginx to what your WAF reports. You will move from "something felt slow" to "this URL failed 2,379 times from one IP in ten minutes, and here is the fix."

Why I Chose Next.js with AI-Powered Tools Over WordPress to Rebuild My Website

David Loor — Wed, 12 Feb 2025 00:00:00 +0000

I wanted to redesign my website in one weekend and considered three possible tools: Drupal, WordPress, and Next.js. Since my existing site was built on WordPress, it seemed like the best choice. With WordPress, I would not need to migrate content, my server was already set up, and all I needed to do was apply a new theme.

However, I chose Next.js with AI-powered tools to redesign my website. Here's why.

The Redesign Process

A website redesign is more than just launching a new version. The process depends on how complex the project is and what the goals are. Some redesigns are simple updates, while others require rebuilding the entire site, including its layout, design, and features.

Key parts of a redesign may include:

Creating a new design or improving the existing one
Changing the content layout to make it easier to read and use
Improving SEO by making the site faster and easier to find on search engines
Adding new features based on what users need
Setting up redirects so old URLs still work and don't hurt search rankings
Making the site more accessible and faster for a better user experience
Moving content or restructuring data if switching platforms

My redesign project would need to address all of these aspects.

Design Challenges

I knew that I lacked design skills. More importantly, I don't enjoy the design process. I searched for WordPress themes that matched my vision but couldn't find any. This meant I would have to create a custom theme or page builder templates if I stayed with WordPress. The same issue applied to Drupal because nothing fit my needs.

Since I'm not a designer, I had two choices:

Use an existing theme
Get help

I decided to use AI-powered tools to bring my ideas to life. With just a few descriptive prompts, the AI created all the UI components I needed from navigation menus to content layouts and responsive designs.

From the backend (admin area), Drupal and WordPress do not yet fully support AI-powered tools for generating custom layouts, or they do not work optimally. The available options still require logging into the site and repeatedly clicking through multiple steps. However, the Drupal community is making significant progress in this area, and I plan to write about it soon.

Why I Chose Next.js

I ruled out WordPress and Drupal because they required too much manual work. Despite my Drupal experience, setting up a site with modules and themes would take more time than I had. With only a weekend to complete the project, I needed a simple solution without unnecessary complexity.

Instead, I turned to Next.js with modern development tools. Cursor and Windsurf, both IDEs, simplify UI design by generating structured, production ready code from simple prompts. You can describe what you want in plain English, like "create a responsive navigation menu with a logo and links," and get deployable code instantly. I've been using these tools for personal projects and work for quite some time now.

One of the keys to efficient AI-powered development is crafting good prompts. For the migration process, I provided the URLs of my existing WordPress pages and described the desired Next.js content structure. With these detailed prompts, Cursor generated scripts to scrape the content from my old site and transform it into the new format. The same approach helped create optimized URLs and redirect rules to maintain SEO rankings, while ensuring proper metadata and semantic HTML structure throughout the site.

Traditionally, you'd write every line of code manually. These IDEs generate entire components and pages through simple prompts, following best practices and maintaining code quality. The generated code can be immediately deployed to your server.

To streamline the process, I used:

ChatGPT, Gemini, and Claude for brainstorming and crafting effective prompts
Cursor and Windsurf for code generation and structure
Tailwind CSS for rapid styling and responsive design

Tailwind enabled fast styling with consistent, optimized results.

As a bonus, hosting on Vercel's free tier saves me $5 monthly in hosting costs and eliminates hours spent on WordPress updates and server maintenance every month.

The Power of AI

AI enables us to achieve things we previously could not, whether due to lack of expertise or lack of interest.

Another major factor in my decision was speed.

My old WordPress site scored only 65 on PageSpeed Insights for mobile devices, as evidenced by a last performance test:

PageSpeed Insights results for the old WordPress site showing a mobile performance score of 65

In contrast:

Next.js is incredibly fast, scoring 100 on PageSpeed for both mobile and desktop
Achieving this took only a few well crafted prompts and just a few minutes

Embracing AI While Maintaining Control

AI is revolutionizing software development by dramatically increasing productivity. It allows developers to accomplish tasks that previously required entire teams or seemed out of reach due to time constraints, lack of expertise, or limited interest in certain aspects of development.

However, it's crucial to understand that AI is a powerful assistant, not a replacement for fundamental knowledge and critical thinking. Here are some key insights I've gained:

Learning the fundamentals is more important than ever. You need to understand what the AI is doing and why
Position yourself as the driver, with AI as your assistant handling repetitive and manual tasks
Focus your energy on the challenging aspects: understanding user needs, system design, architecture decisions, and problem solving
Strong communication skills like active listening have become even more crucial in the AI era

The key is to embrace AI while maintaining control over your development process. This means reviewing generated code thoroughly, understanding its implications, and ensuring it aligns with your project requirements and best practices.

In my case, AI allowed me to turn my ideas into reality with a few well crafted prompts. It helped me iterate quickly, experiment, and refine until I got a result I liked, all at a much lower cost in time.

While I do love Drupal and WordPress, and they're great tools for many use cases that I'll continue using where they make sense, AI-powered development with Next.js proved to be the perfect solution for this particular project.

Technology Stack

Here's the complete stack I used to build this website:

Category	Tools
Version Control & Hosting:

GitHub (Free tier) for version control and collaboration
Vercel (Free tier) for hosting and automatic deployments
Cloudflare (Free tier) for DNS management and security | | Frontend Framework & Styling: |
Next.js (Open Source) as the core framework
Tailwind CSS (Open Source) for styling and responsive design | | AI Development Tools: |
Cursor and Windsurf for AI-powered development - using both allowed me to compare different layout outputs and choose the best ones | | Forms & Communication: |
Brevo (Free tier) for the calendar link and contact form, offering a generous 300 emails per day |

Understanding Composer: A Simple Analogy of Grocery Shopping for Better Dependency Management

David Loor — Sat, 06 May 2023 18:26:50 +0000

Whether you’re an application developer working in PHP or simply a tech enthusiast interested in the field, you’ve likely encountered Composer. It plays a significant role in managing dependencies for PHP projects. But in today’s blog post, I’ll take a different approach to understanding PHP’s Composer, by seeing it as a personal shopper who buys groceries for various recipes.

The composer.json – Our Custom Grocery List

Think of the composer.json file as a grocery list that outlines the essential items you need to make your favorite dish. In the realm of dependency management, this list includes the names and desired quantities (versions) of libraries and packages required for the successful functioning of your application recipe.

For example, imagine that you must prepare spaghetti with marinara sauce. You provide a personal shopper with a list containing pasta, tomato sauce, and Italian seasoning. Similarly, when crafting your composer.json file, you specify the required packages, like Laravel and Guzzle, that form the building blocks of your software application.

Composer Commands – Add, Update, or Remove Items From the List

Sometimes, you might want to make changes to your grocery list – perhaps to update an item or remove it altogether. In the context of Composer, you can use commands such as composer require package-name and composer remove package-name to instruct your personal shopper to add or remove items (libraries or packages) from the list (composer.json file).

For instance, if you suddenly decide to add mushrooms to your spaghetti marinara recipe, you can communicate with your personal shopper to include that item. Similarly, when you want to add a new package or update an existing one, you can use the respective composer commands to adjust the list quickly and efficiently.

The composer.lock – The Final Purchased List

Once the personal shopper has perused the shopping aisles, they provide you with an itemized receipt that clearly states the brands and amounts of each ingredient purchased. This is the composer.lock file – a precise representation of the libraries and packages in their specific versions that were procured to follow your grocery list.

By sharing the composer.lock file with your team members, you can be confident that everyone on the project uses the same, carefully selected groceries for the application recipe. This consistency is crucial when developing software, ensuring that all collaborators are working with the same library versions, which eliminates any potential discrepancies.

Summary

This article explores dependency management by drawing a simple analogy between grocery shopping and dependency management in software development. By conceptualizing composer.json and composer.lock files as grocery lists, you can more easily grasp the inner workings of Composer and manage dependencies more effectively.

While using a personal shopper to manage your groceries might not be necessary for whipping up quick meals at home, it becomes essential when running complex projects like hotels or restaurants, highlighting the importance of using the right tools in scenarios that demand them.

Now it’s time to cook up some exceptional applications, knowing full well that you have the perfect ingredients on hand!

How to Use the Drupal Feeds and Feeds Tamper Modules for Easy CSV Data Imports

David Loor — Sat, 29 Apr 2023 16:57:33 +0000

The Feeds module in Drupal 9 is a powerful tool for importing external data into your Drupal website. It supports a variety of formats, including CSV, XML, and JSON, and can import content into nodes, taxonomies, and other entities in your Drupal site. To enhance the importing process, you can use the Feeds Tamper module, which allows you to modify data before it is saved. This tutorial will walk you through the process of using the Feeds module along with Feeds Tamper to import data from a CSV file.

Required modules:
- Install and enable the following modules:
- Feeds
- Feeds Tamper
Create a content type:
- If you don’t already have one, create a content type for the data you want to import from the CSV file.

Set up a Feeds Importer:
- Go to Structure > Feeds types
- Click on Add feed type
- Enter a name and description for your importer

Create a new Feed Type

Basic settings for the new feed

Configure the Fetcher:
- Click on the “Fetcher” dropdown, and choose how you’d like to fetch the file. For this tutorial, use Upload File to manually upload the CSV file. Refer to the Fetcher a. and b. images below.

Fetcher a. Choose the Upload file fetcher

Fetcher b. Fetcher settings

Configure the Parser :
- Click on the “Parser” dropdown, choose CSV, and configure the appropriate CSV settings, like delimiter, No headers. The default settings will work for most of the use cases. Refer to the images below.

Parser a. Choose the CSV Parser

Parser b. Parser settings

Configure the Processor: Click on the “Processor” dropdown and choose Node. Then, click on the “Content Type” dropdown, and choose the target content type, and configure additional settings like author and default language. The Processor dropdown allows you to choose the type of entity that will be created when importing data. Refer to the images below.

Processor a. Choose the processor

Processor b. Choose the Content Type

Processor b. Processor settings

Language : This setting allows you to select the language for the imported content.

Update existing content items : This setting determines how existing content items are handled when new data is imported. You can choose to update existing content items, not update them, or replace them entirely. The module will use the unique mappings you have set up to determine which content items are considered “existing” and should be updated or replaced.

Previously imported items : This setting allows you to choose what to do with items that were previously imported but are no longer present in the feed. You can choose to keep them or take some other action.

Expire content items : This setting allows you to specify when content items should be deleted. You can choose to never delete them or set a specific time period after which they will be deleted.

Owner : This setting allows you to specify the owner of the imported content. You can choose to use the feed author as the owner or select a specific user. If you leave this field blank, the owner will be set as Anonymous.

Click on Save and add mappings
Map the source CSV fields to the target content type fields:
- Click on the Mapping tab: This will take you to the mapping configuration page where you can map source data to target fields.
- Map source CSV columns to the target content type fields by clicking Select a target : This will allow you to select the target Drupal field that you want to map data to. Then, in the “Source” column, select New CSV Source and enter the name of the column from your CSV file that contains the data you want to map to the selected target field.

Optionally, configure unique fields to avoid duplicate imports: This allows you to specify which fields should be used to determine if an imported item is a duplicate of an existing item. If a duplicate is found, the module can be configured to update or replace the existing item.
Tweak other configurations like language handling: This allows you to configure additional settings for your importer, such as how language should be handled.
Click Save : This will save your mapping and other configuration settings.

Map CSV fields to Drupal fields

Import the data using the Feeds importer:
- Go to Content > Feeds importers
- Click on Import for the importer that you created previously
- Upload your CSV file (If you configured file upload as your fetcher)
- Click Import
- The imported content should now appear as nodes of the target content type within your Drupal site /admin/content

Use Feeds Tamper to manipulate imported data

The Feeds Tamper module is a contrib module for the Drupal Feeds module that allows you to modify data before it is imported. It provides a user interface for adding “tamper” plugins to the individual mapped fields of your Feeds importer, which can perform various data manipulation tasks such as splitting, combining, or rewriting data.

Confirm that the Feeds Tamper module is enabled.
Go to the configuration page for your feed importer: Navigate to the configuration page for the feed importer that you want to use with the Feeds Tamper module. You can do this by going to the “Structure” page, then clicking on “Feeds” and selecting the importer you want to configure.
Click on the “Tamper” tab: On the configuration page for your feed importer, click on the “Tamper” tab to access the tamper settings.
Add tamper plugins to mapped fields: In the tamper settings table, find the mapped field to which you want to add a tamper plugin to. In the “Plugin” column for that field, click on the “Add plugin” button. Select the plugin you want to use from the list of available plugins, then configure its settings as needed.
Save your changes: Once you have added and configured all of the tamper plugins you want to use, click on the “Save” button to save your changes.
Repeat these steps for all the source columns you want to modify before storing the data

Feeds tamper module’s use cases

Data cleanup : You can use the Feeds Tamper module to clean up data before it is imported. For example, you can use the “Find and replace” plugin to replace specific words or phrases in your data.
Data transformation : You can use the Feeds Tamper module to transform data before it is imported. For example, you can use the “Explode” plugin to split a single field into multiple values, or the “Implode” plugin to combine multiple fields into a single value. The “Explode” plugin is useful when mapping multiple comma-separated fields from the CSV file to a taxonomy reference field.
Data filtering : You can use the Feeds Tamper module to filter data before it is imported. For example, you can use the “Keyword Filter” plugin to only import items that contain specific keywords.
Data rewriting : You can use the Feeds Tamper module to rewrite data before it is imported. For example, you can use the “Rewrite” plugin to change the format of dates or numbers in your data, or the “Pathauto” plugin to automatically generate URL aliases for imported content.

And that’s it! You have successfully configured the Feeds module in Drupal 9 to import and manipulate data from a CSV file using the Feeds Tamper module.

Creating Gutenberg Blocks with Advanced Custom Fields (ACF) and LazyBlocks: A Comparative Guide

David Loor — Mon, 03 Apr 2023 00:01:52 +0000

Gutenberg, the WordPress block editor, has revolutionized the way we create and design content in WordPress. Advanced Custom Fields (ACF) and LazyBlocks are two popular plugins that extend Gutenberg’s functionality by allowing users to create custom blocks. In this article, we’ll discuss the process of creating Gutenberg blocks with both plugins and analyze their pros and cons.

1.- Advanced Custom Fields (ACF)

ACF is a popular WordPress plugin that allows users to add custom fields to their posts, pages, and custom post types. It also supports creating custom Gutenberg blocks using a user-friendly interface.

Creating Blocks with ACF:

Install and activate the ACF plugin.
Add the callback function my_acf_block_render_callback() to your theme’s functions.php file:

/**
 * Callback to map the block name to a template.
 * @param $block
 * @return void
 */
function my_acf_block_render_callback( $block ) {

    // convert name ("acf/slider") into path friendly slug ("slider")
    $slug = str_replace('acf/', '', $block['name']);

    // include a template part from within the "template-parts/block" folder
    if ( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
        include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
    }
}

/**
 * Example to register acf block.
 */
function my_acf_block_init() {
    // Check if the function exists to avoid errors.
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name' => 'my-nice-block-name',
            'title' => __('This is my first Block'),
            'description' => __('This is a custom block created using ACF.'),
            'render_template' => 'path/to/your/block/template.php',
            'category' => 'formatting',
            'icon' => 'admin-comments',
            'keywords' => array('nice', 'block', 'name'),
        ));
    }
}
add_action('acf/init', 'my_acf_block_init');

In the WordPress dashboard, navigate to Custom Fields > Add New.
Create a new field group, and add the fields you need for the block and configure their settings.
In the field group settings under “Location,” choose “Block” for the rule and set it to “is equal to” your block title (e.g., “This is my first Block”).
Create a new PHP file in your theme’s template-parts/block directory to serve as the template file for your custom block. Use the naming convention content-{slug}.php, where {slug} is the path-friendly slug derived from the block’s name. For example, if your block’s name is “acf/your-block-name”, create a template file named content-your-block-name.php.
In the newly created template file, write the PHP and HTML code that renders the block. Start with the opening PHP tag, and use ACF’s get_field() or the_field() functions to retrieve and display the values of the custom fields you added to the block. These functions allow you to access the data stored in your custom fields and output it in your block’s template.

/**
 * Example of a block template.
 */
<?php
// Get custom field values
$heading = get_field('heading');
$content = get_field('content');
?>

<!-- Output the HTML structure of the block -->
<div class="my-custom-block">
    <h2><?php echo esc_html($heading); ?></h2>
    <p><?php echo esc_html($content); ?></p>
</div>

Pros of ACF:

User-friendly interface.
A wide range of field types to choose from.
Integrates with other WordPress features like custom post types and taxonomies.
Extensive documentation and a large user community.

Cons of ACF:

It can be challenging for users with limited coding experience.
Requires a PRO version for some advanced features.
Performance issues may arise with a high number of custom fields.

2.- LazyBlocks

LazyBlocks is a Gutenberg blocks visual constructor that allows you to create custom Gutenberg blocks using a simple drag-and-drop interface.

Creating Blocks with LazyBlocks:

Install and activate the LazyBlocks plugin.
In the WordPress dashboard, navigate to LazyBlocks > Add New.
Enter the block name and slug, then start adding controls (fields) using the drag-and-drop interface.
Configure the block output by choosing between PHP, HTML, or Handlebars template.
Add the block output code in the provided editor or create a separate template file in your theme. Below are the advantages for each option:
- PHP: Provides full flexibility and control over your block’s output, and allows you to use any PHP functionality to customize your block’s appearance and behavior.
- HTML: Offers a simple and straightforward way to define your block’s output without dealing with PHP code. Ideal for users who prefer working with HTML and CSS only.
- Handlebars template: Combines the simplicity of HTML output with the power of conditional logic and loops, making it a versatile option for users who need more control over their block’s output without writing PHP.
Save the block, and it will be available in the Gutenberg editor.

Pros of LazyBlocks:

Intuitive drag-and-drop interface.
No coding required for basic blocks.
Works with Custom Post Types and Custom Taxonomies.
A decent number of field types available.

Cons of LazyBlocks:

Less comprehensive documentation compared to ACF.
Limited field types compared to ACF.
Fewer features and options compared to ACF.

Demystifying OAuth: A Comprehensive Guide to Understanding and Implementing Open Authorization

David Loor — Sun, 19 Mar 2023 17:54:35 +0000

In today’s interconnected world, users often need to give applications access to their data stored on other platforms. OAuth (Open Authorization) is an open standard that provides a secure way for users to grant third-party applications access to their resources without sharing their credentials. In this blog post, we’ll dive deep into what OAuth is, how it works, and how to implement it in your application.

What is OAuth?

OAuth is a token-based authentication and authorization protocol that allows third-party applications to access users’ resources on a service without sharing their credentials (e.g., username and password). OAuth is widely used to enable secure communication between different web applications and services, such as when a user logs in to a third-party app using their Google or Facebook account.

How OAuth Works

OAuth involves a multi-step process that includes the following steps:

Registration : The third-party application (client) must first register with the service provider (e.g., Google, Facebook) to obtain a client ID and a client secret. The client ID and secret are unique identifiers that the service provider uses to recognize the application during the OAuth process.
Authorization Request : When a user wants to use the third-party application, the application directs the user to the service provider’s authorization server. The user is prompted to log in (if not already logged in) and grant the application permission to access their data. The authorization request typically includes the client ID, requested scopes (permissions), and a redirect URL where the user will be sent after granting or denying permission.
Authorization Grant : If the user grants permission, the service provider’s authorization server sends an authorization grant (usually a code) back to the third-party application. This is typically done via a redirect URL, which includes the grant as a URL parameter. The type of authorization grant depends on the OAuth grant type being used (e.g., authorization code, implicit).
Access Token Request : The third-party application sends the authorization grant (code) to the service provider’s token endpoint, along with the client ID and client secret. This step is done server-to-server to ensure the client secret remains confidential. The application also sends the redirect URL for validation.
Access Token Response : If the authorization grant is valid, the service provider’s token endpoint returns an access token and, optionally, a refresh token. The access token is a string that represents the user’s authorization to access their resources, while the refresh token can be used to obtain new access tokens when the current one expires.
Accessing Protected Resources : The third-party application can now use the access token to make API requests to the service provider on behalf of the user, without the need to access their credentials. The access token is typically included in the HTTP header of the API request, as a Bearer token.
Refreshing Tokens : If the access token has an expiration time, the third-party application may need to use the refresh token to obtain a new access token when the old one expires. The application sends the refresh token to the service provider’s token endpoint, along with the client ID and client secret, to request a new access token. The service provider then returns a new access token and, optionally, a new refresh token.

Implementing OAuth in Your Application

To implement OAuth in your application, follow these general steps:

Choose an OAuth provider (e.g., Google, Facebook) and register your application to obtain a client ID and client secret.
Set up a callback/redirect URL on your application to handle authorization responses from the OAuth provider.
Implement the OAuth flow using an appropriate grant type, following the provider’s documentation.
Implement the necessary code to use the access token to make API requests to the OAuth provider on behalf of the user.

Conclusions

OAuth provides a secure and user-friendly way to allow third-party applications to access users’ resources on other platforms. Understanding how OAuth works and how to implement it in your application can greatly enhance your app’s security and user experience.

Setting Up a Drupal 9 Multisite Locally with DDEV: Hosted on Acquia with Acquia Pipelines

David Loor — Mon, 13 Mar 2023 00:40:00 +0000

In my current job, the team that I lead is providing support to three websites of a large private organization. The three websites are hosted on Acquia. The websites are part of a multisite setup and the source code is managed using the Acquia Pipelines service.

In a nutshell, Acquia Pipelines is a continuous integration and deployment service provided by Acquia, a cloud-based platform that provides enterprise-level hosting, support, and management for Drupal websites.

What is DDEV?

DDEV is a command-line tool that helps developers set up local development environments quickly and easily. It is designed to simplify the process of setting up a local web server, managing dependencies, and configuring development environments. If this is the first time that you are trying to work with DDEV, please make sure that you check this post to get started with DDEV.

What is a Drupal multisite?

Drupal multisite is a feature that allows multiple websites to be managed using a single Drupal codebase and database. In a Drupal multisite setup, multiple websites share a single Drupal installation, which can reduce maintenance time and costs.

Each website in a Drupal multisite configuration has its own unique domain or subdomain and can have its own theme, modules, content, and configurations. However, they share the same core codebase and database.

Drupal multisite is useful when you need to manage multiple websites that share a similar codebase, theme, or functionality, such as a network of related websites, or multiple language versions of a website. It can simplify website maintenance, reduce costs, and improve consistency across websites.

The recipe to setup the local multisite

You need to set up the project using DDEV. Check this post out to get started.
- The docroot location from where the site is served should be web/docroot. You will be asked a question about the docroot location when running the command ddev config
In the .ddev folder, create a file name config.multisite.yaml
The file config.multisite.yaml should have the following content:

additional_hostnames:
  - site1
  - site2
  - site3

Update the sites.php file to add the three local domains and their corresponding folders.

The sites.php file is a configuration file that allows you to map domain names or URLs to specific Drupal site directories.

$sites['site1.ddev.site'] = 'site1_directory';
$sites['site2.ddev.site'] = 'site2_directory';
$sites['site3.ddev.site'] = 'site3_directory';

Create three databases using PHPMyAdmin. If the name of the DDEV project were mysite , you can access phpmyadmin at https://mysite.ddev.site:8037/
Export database backups from acquia and import them into the corresponding databases that you created as part of step 4.
- If the databases are big, you can use a ddev command to import them: ddev import-db --target-db=DATABASE_NAME --src=.tarballs/DB-BACKUP_FILE.sql.gz
In the directory of each file, you need to add this ddev file.
The settings.php file of each site needs to be updated to include the code from this file.
Run ddev ssh and after that composer install
- the ddev ssh command allows you to access the command line interface (CLI) of a running ddev web container, so you can run composer, drush and other commands from inside the web container.