She was returning home from a relative’s wedding. My brother was driving her, along with his wife and my other brother’s wife. Then the car ran out of diesel.

This is the story my mom told me.

We were on our way home. Your brother was driving down the hill near the Shahin family’s house when his car ran out of diesel fuel. He had to pull over and park on the side of the road. I and your brothers’ wives decided to continue home on foot since the house was nearby.

As we were walking downhill, we were surprised to encounter a group of Israeli occupation soldiers on patrol in front of us. The soldiers told us to turn around. But I replied, “Turn around and go where? Our house is right there. I want to go home!”

The soldiers repeated, “Turn around and go back.” I kept shouting at them, saying, “Our house is there!” Your brothers’ wives told me, “Let’s wait. We don’t want the soldiers to get angry and do something.” So we waited on the sidewalk until they allowed us to pass.

After some time, the soldiers moved up to the top of the hill and let us continue. We walked down while the soldiers headed upward.

When the soldiers reached the top, one of them turned toward a car that had been parked, waiting for the patrol to pass, and calmly opened fire on the people inside while they were still sitting in the vehicle.

After the soldiers left, people gathered around the car to see what happened and to help the injured. I also went over to look. They found a 7-month-old baby who had been shot. The bullet entered through his mouth and lodged in his mother’s jaw. The boy’s father had also been shot in the hand.

My family were steps away from death. If not for God’s protection, and if the car had not run out of diesel at that exact moment, it could have been my family in that car.

Indeed we belong to Allah, and indeed to Him we shall return. May Allah strengthen the hearts of the child’s family and grant them patience, and may He take retribution from the Israeli army that caused this loss.

Watch original assult video here

What started as one Pacman game is now a growing arcade of contribution-graph games for GitHub and GitLab.

From One Game to an Arcade

Pacman Contribution Graph began with one goal: make contribution graphs more fun and alive.

Now the project supports multiple arcade experiences:

• Pac-Man
• Breakout
• Galaga
• Puzzle Bobble
• Bomberman
• Minesweeper

And this is only the beginning.

Project repo: github.com/abozanona/pacman-contribution-graph

Thank You to All Contributors

This transition from Pacman to Arcade Graph would not be possible without everyone who contributed code, ideas, fixes, and improvements.

Huge thanks to:

• @AndreRuperto
• @Serveny
• @Hiro-Chiba
• @nexpectArpit
• @VagnerNerves

You helped shape both the original Pacman game and the new arcade direction.

10,000+ Users and a Live Leaderboard

The project now has over 10,000 GitHub users who integrated Pacman/Arcade contribution games into their accounts.

You can check the leaderboard here:

Arcade Contribution Graph Leaderboard

If You Haven’t Integrated It Yet, Try It

If you still have not added it to your profile, now is the perfect time. It is super easy to set up with GitHub Actions, and you can generate one or multiple games.

Start here:

• Live demo: abozanona.github.io/pacman-contribution-graph
• Repository: github.com/abozanona/pacman-contribution-graph

Let your contribution graph play games.

The main problem was that iPhone debugging is normally straightforward only when the phone is physically connected to your Mac, and in practice the setup is built around devices being on the same local environment. Since my friend was in another country, I had to recreate that setup over the internet.

The Goal

I needed three things:

1. A way to put my Mac and my friend’s laptop on the same private network.
2. A way to make his physically connected iPhone appear as a USB device on my Mac.
3. A way to make Xcode and Flutter recognize that remote iPhone so I could run and debug the app.

The tools I used were:

• Tailscale for the network layer.
• VirtualHere USB Server on my friend’s side.
• VirtualHere USB Client on my side.
• Xcode on both Macs.

Step 1: Put Both Machines on the Same Network With Tailscale

The first challenge was networking. I needed my Mac and my friend’s laptop to reach each other privately over the internet as if they were on the same trusted network.

That is where Tailscale helped. It creates a private mesh VPN between devices and is very easy to set up. For this use case, that was exactly what I needed.

Another nice detail is that Tailscale has a free personal plan, which is enough for connecting your own devices or a small number of machines for this kind of debugging session.

Once Tailscale was installed and both Macs were connected to the same tailnet, the network problem was basically solved.

Step 2: Share the iPhone USB Connection Over the Internet

Being on the same network was not enough on its own. The iPhone was still physically connected to my friend’s laptop, not mine.

To solve that, I used VirtualHere.

The setup is simple:

• Install the server on the machine that has the iPhone physically connected to it. In my case, that was my friend’s laptop.
• Install the client on your own machine. In my case, that was my Mac.

After that, the iPhone can be exposed from the remote laptop to your local Mac as if it were plugged in locally.

This was the missing piece. Tailscale handled the secure network path, and VirtualHere handled the USB forwarding.

Step 3: Enable Developer Mode on the iPhone

Before trying to run anything from Xcode or Flutter, make sure the target iPhone has Developer Mode enabled.

Without that, the device may appear but you still will not be able to properly deploy and debug a development build.

Also make sure the usual trust prompts are accepted:

• Trust the computer on the iPhone.
• Trust the iPhone from the Mac that is physically connected to it.

Step 4: Install Xcode on Both Macs

This part is important.

I needed Xcode on:

• my Mac, where I wanted to run Flutter and attach the debugger
• my friend’s laptop, because that is the machine physically connected to the iPhone for the first-time setup and pairing steps

When an iPhone is connected to Xcode for the first time, Xcode may spend a long time preparing the device and downloading or generating the required support files. Doing that remotely over the internet can be painfully slow.

What worked better for me was this:

1. Open Xcode on my friend’s laptop while the iPhone is connected there.
2. Let Xcode finish the initial device preparation on his side.
3. Copy the generated device support files from his machine.
4. Send them to me.
5. Extract them into the same location on my Mac.

The directory I needed was:

1

~/Library/Developer/Xcode/iOS DeviceSupport/

Compressing the relevant folder inside that directory and sending it over was much faster than waiting for my Mac to regenerate everything remotely.

It is also a good idea to keep the Xcode version aligned on both Macs to reduce compatibility issues.

Step 5: Connect to the Device From Your Mac

At this point, the flow looked like this:

1. The iPhone was connected by cable to my friend’s laptop.
2. My friend’s laptop was running the VirtualHere USB server.
3. My Mac was running the VirtualHere USB client.
4. Both Macs were connected through Tailscale.

Once the VirtualHere client attached the remote iPhone on my Mac, Xcode and Flutter could see it.

Step 6: Monitor Installation Progress in Xcode

If app installation feels slow or stuck, you can trace progress directly from Xcode logs.

In recent Xcode versions, open:

Window > Devices and Simulators

Then:

1. Select the physical iPhone from the left panel.
2. Open the device console/log view.
3. Watch installation-related logs in real time while deploying.

You can see detailed progress messages like this:

1

-[IXAppInstallCoordinator _clientDelegate_didUpdateProgress:forPhase:overallProgress:]: <IXInitiatingAppInstallCoordinator<0x827014e00> identity:[com.example.app/XXXXXXXX-516C-4EB6-A17F-XXXXXXXXXXXX/[system-defined]] uuid:XXXXXXXX-3A3D-44F7-9DB5-XXXXXXXXXXXX creator:InstallCoordination Proxy>: Got did update progress delegate with percentComplete 51.000000 phase IXCoordinatorProgressPhaseLoading overallProgress 30.600000

These logs are useful to confirm that installation is still moving forward (for example, loading, staging, or validating) instead of actually hanging.

To confirm that Flutter detected the device, I used:

1

flutter devices

Then I ran the app on that specific device using its identifier:

1

flutter run -d <device-id>

If you want the exact identifier first, flutter devices will print it for you.

What This Setup Actually Solved

This setup gave me something much better than logs: a real debugging environment on the exact phone that had the issue.

That mattered because the bug was not reproducible anywhere else. Once I could run the app directly on my friend’s iPhone, I could inspect the behavior properly instead of guessing from screenshots and log messages.

Final Notes

If you need to debug a Flutter app on a remote iPhone over the internet, the stack that worked for me was:

• Tailscale to connect both Macs privately.
• VirtualHere to forward the iPhone’s USB connection.
• Xcode on both sides for the initial device preparation.
• Flutter commands on my Mac to run the app on the remote iPhone.

It is not the simplest setup, but when the affected user is far away and the bug only happens on their real device, it can save a lot of time.

This idea has been growing in my mind for a long time. I’ve always wanted to come up with a simple way to turn ideas into animated characters without spending days rigging, segmenting, and keyframing manually.

So I started building exactly that. A UI-powered tool that allows anyone to generate Spine2D-style animations using AI prompts.

💡 What is Spine2D Animation Generator?

Imagine describing a character with words “clothing style, colors, vibe”, and the system generates the character image for you.

Then you ask it to segment the character into parts. It does that too.

Tell it to add a skeleton & bone structure. It responds.

Ask it to animate “walk, jump, blink, dance”. It animates.

All with prompts.

No drawing skills required. No complex rigging workflows.
Just type → generate → animate.

This is the vision.

🛠 Current Progress

The tool is still in development. I’ve been working on it only in my free time, so progress has been slow, but steady. The UI is coming together nicely, and many core features are already taking shape.

You can watch a short preview of what I have so far here 👇

I’ve also put up a temporary landing page for it: https://spine2d.com/

It’s a placeholder for now, but one day soon it will become the home of the full product.

If everything goes well, I hope to have a usable version sometime early next year.

The series follows the story of a Palestinian family from a village in Palestine, as they experience the horrors of 1948, the events of Nakba, and the political struggles that led to the destruction of their community and homeland. The story masterfully intertwines the personal lives of the characters with the broader political upheaval of the time, showing the devastating impact of colonialism, foreign occupation, and the subsequent refugee crisis that still affects millions of Palestinians today.

At its core, Al-Taghriba Al-Filistinia focuses on the journey of one Palestinian family, specifically the hardships they face as they try to survive the chaos of war and escape from their burning village. The protagonist, Hassan, and his family are forced to flee their home and begin a dangerous journey across Palestine, facing not only military forces but also betrayal and violence from various factions. The story highlights the struggle of Palestinians during the late 1940s and shows the diverse range of experiences, from those who resisted the British and Zionist gangs, to those who were forced to take refuge in neighboring Arab countries.

This series brings to life the tension between the various factions in Palestine at the time, the British occupation forces, the Zionist gangs, and the Palestinian resistance. The series also vividly depicts the horrors of mass displacement and the dehumanization of a people who were uprooted from their lands.

As a Palestinian, the events depicted in Al-Taghriba Al-Filistinia resonate deeply with me. My grandfather and his family were displaced from their own village, The Gerat Almasmiyah (AlMasmiyeh Alkabeereh), which was located in the southern region of Palestine. Much like the characters in the series, they were victims of the same brutal events that tore Palestine apart during the Nakba. Watching the series takes me back to my own family’s history, and I can’t help but feel a deep connection to the struggle that continues to this day.

What makes Al-Taghriba Al-Filistinia even more significant to me is the work of a dedicated Palestinian mother, Alaa Radwan, who started translating the series into English recently. Alaa, originally displaced from Gaza, now lives in Cairo, but her heart remains deeply rooted in her Palestinian identity and heritage. Through her Patreon project, Alaa has taken it upon herself to translate the entire series (31 episodes in total) to ensure that people around the world, especially non-Arabic speakers, can learn about the Palestinian experience.

Watching the translated episodes, a friend and I were both deeply moved by the portrayal of the conflict, the loss, and the unwavering resilience of the Palestinian people. Through Alaa’s translations, my friend was able to learn about the long-standing conflict with British forces, the rise of Zionist militias, and the tireless efforts of Palestinian resistance fighters. But most importantly, he learned about the human cost of this struggle, the people, their families, and their unwavering desire to return to their homeland.

If you haven’t already, I highly encourage you to watch Al-Taghriba Al-Filistinia on Alaa’s Patreon page. She has done an incredible job of making this pivotal piece of Palestinian history accessible to a wider audience.

By supporting Alaa on Patreon, you’re not just watching a series, you’re supporting a passionate Palestinian woman who is keeping the memory of the Nakba alive, and ensuring that future generations understand the roots of the ongoing conflict.

So, take the time to support Alaa Radwan’s incredible project on Patreon and witness the story of Palestine like never before. We owe it to ourselves, our ancestors, and our future generations to ensure that these stories are told and shared with the world.

Click here to watch Al-Taghriba Al-Filistinia on Alaa’s Patreon!

But then I faced an annoying issue: whenever I launched the app by opening the main.dart file and clicking on the green debug button, the app would run on a different port each time. This caused CORS issues whenever my Dart app sent requests to the API, since the origin kept changing.

So I needed a way to always run the app on the same port.

First Attempt: Running With flutter run

The easiest way I found was to run this command from the terminal:

1

flutter run -d chrome --web-port=51996

This works, and the app does run on the fixed port 51996.

But there’s a problem: if you run it this way, you can’t attach the debugger directly.

To fix that, I had to add a custom configuration to my .vscode/launch.json file:

1
2
3
4
5
6
7
8
9
10
11
12

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter Web Attach",
      "request": "attach",
      "type": "dart",
      "deviceId": "chrome",
      "webPort": 51996
    }
  ]
}

Then, the flow became:

1. Run the command from the terminal.
2. Open the Debug sidebar in VS Code.
3. Select the “Flutter Web Attach” configuration.
4. Start debugging to attach the debugger to the running app in Chrome on that fixed port.

This works fine, but it wasn’t very convenient for me. I wanted something simpler.

Second Attempt: Using dart.flutterAdditionalArgs

Next, I found that you can add this setting in your .vscode/settings.json:

1

"dart.flutterAdditionalArgs": ["--web-port=51996"]

This automatically adds the --web-port argument every time a Dart command is run.

At first, this looked perfect. But then I started getting an error each time I opened VS Code:

1

The Flutter Daemon failed to start.

The reason is that dart.flutterAdditionalArgs applies not only when you run your app, but also when any Dart process starts — including the Flutter Daemon. Since the daemon wasn’t expecting that argument, it failed to start.

The Final (and Best) Solution: dart.flutterRunAdditionalArgs

After some searching, I found a better setting that only applies when you actually run your application:

1

"dart.flutterRunAdditionalArgs": ["--web-port=51996"]

This was exactly what I needed. With this setting:

• I don’t need to add custom launch configurations.
• I can still use the green debug button in VS Code.
• My app always runs on the same port.
• No more CORS issues.
• And no more Flutter Daemon errors.

Conclusion

If you’re running a Flutter web app in Chrome during development and want to avoid CORS issues by sticking to the same port, just add this to your .vscode/settings.json:

1

"dart.flutterRunAdditionalArgs": ["--web-port=51996"]

That’s it. Clean, simple, and you still get the debugger attached automatically.

Update: The Native Solution (Flutter 3.38+)

Starting with Flutter 3.38, there is a much cleaner, native way to handle this that doesn’t rely on VS Code specific settings. You can now use a configuration file named web_dev_config.yaml in the root of your project. This allows you to define persistent server settings that work regardless of whether you are running from the terminal, VS Code, or Android Studio.

Here is how to set it up:

• Create a file named web_dev_config.yaml in your project root.
• Add the following content:

1
2
3

server:
  host: "0.0.0.0" # Optional
  port: 51996     # Your fixed port

This method is superior because it also allows you to configure advanced features like HTTPS certificates, custom response headers, and URL rewrites (proxies), which can help you solve CORS issues without even needing a fixed port in some cases.

Check out the breakdown of these new features in this video:

This clip is from the documentary “From Ground Zero” which you can watch in its entirety on Watermelon+ streaming platform. The entire segment on these children was incredibly heartbreaking. They made a stop-motion animation to tell their story of writing their names on their bodies and then erasing them because it gave them nightmares.

29 November 2024
After more than 13 months of Israeli attacks on Gaza, at least 44,382 people have been killed. Over 105,000 have been wounded, and thousands more are still missing or under the rubble. Despite these horrifying numbers, countries like the United States, Germany, and the United Kingdom continue to send weapons to Israel—helping them carry out more destruction in Gaza and more violence in the West Bank.

Western governments keep saying that “Israel has the right to defend itself.” They repeat this over and over, even while entire families are being wiped out. They don’t call for a stop to the violence. They just ask Israel to “be more careful” when killing innocent people.

30 November 2024
On this day, Israeli forces bombed an aid convoy in Gaza 【source】, killing three workers from the World Central Kitchen (WCK) and at least two others.

This time, the victims were not Palestinians. They were foreign aid workers. And suddenly, the reactions changed. Western governments, who had stayed silent for months, started making loud statements:

• United States: President Joe Biden said he was “outraged and heartbroken.” He admitted that Israel had not done enough to protect civilians and aid workers. He even warned that future U.S. support could depend on how Israel responds.

• United Kingdom, France, and Canada: These countries made their strongest criticism of Israel so far. They called the situation in Gaza “disproportionate” and “intolerable.” They demanded a ceasefire, the full return of humanitarian aid, and even mentioned possible sanctions or recognizing the State of Palestine if Israel didn’t change course.

• European Union: The EU, along with 24 other donor countries, demanded an immediate ceasefire and full humanitarian access. Some countries, like the Netherlands and Sweden, talked about reviewing trade deals and punishing Israeli leaders for war crimes.

It sounded serious. It sounded like things were about to change.

But just a few months later…
Nothing changed. Israel kept killing, the destruction in Gaza kept growing, and the same governments went back to supporting Israel—giving it money, weapons, and political cover.

21 May 2025
Israeli soldiers fired at a group of international diplomats visiting the Jenin refugee camp in the West Bank [source]. These were not Palestinian civilians—they were officials from the EU, Arab countries, Asia, and the West.

• France called the shooting “unjustifiable and unacceptable.”
• Germany strongly condemned the attack and said the visit had been coordinated with Israeli forces.
• France, Italy, and Portugal summoned Israeli ambassadors for explanations.

But let’s be honest.
Just like before, these words won’t last.
These governments will soon move on and go back to business as usual with Israel—just like they always do.

The Hypocrisy is Clear

When Palestinians are killed, Western governments largely remain silent. When others are harmed—especially foreigners—suddenly, there’s outrage, statements, and demands. This pattern is consistent. The response depends on who is affected, not what is happening. This shows a double standard in how governments apply international law and human rights. Despite repeated violations and ongoing violence, these same governments continue to support Israel politically and militarily. Public statements may shift temporarily when international personnel are harmed, but in practice, little changes.

At the same time, public opinion is shifting. People across many countries are paying closer attention, asking questions, and showing support for Palestinians. While governments may act based on politics and alliances, many individuals are pushing for a more consistent and fair approach. This growing awareness may not change government policies overnight—but it makes it harder for them to justify ongoing double standards.

So to the people—thank you! Your solidarity means everything.
And to the governments—shame on you! Your double standards are clear, and history will remember.

MMPose is an open-source pose estimation toolbox built on PyTorch and part of the OpenMMLab ecosystem. It supports a wide range of pose estimation tasks, including 2D and 3D human and animal pose estimation.

Ps: You can refer to https://mmpose.readthedocs.io/en/latest/demos.html for more details on animals pose estimation using mmpose.

Here are the steps to do that:

Setup Docker container file

To get started create a file named Dockerfile with the following content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

FROM python:3.10-slim

# Install system dependencies and build tools
RUN apt-get update && apt-get install -y git build-essential gcc g++ libgl1-mesa-glx libglib2.0-0 libsm6 libxext6 libxrender-dev wget ffmpeg && apt-get clean && rm -rf /var/lib/apt/lists/*

# Install PyTorch for CPU
RUN pip3 install --no-cache-dir torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu

# Create a working directory
WORKDIR /app

# Install MMPose dependencies
RUN pip3 install --no-cache-dir opencv-python
RUN pip3 install --no-cache-dir openmim
RUN pip3 install --no-cache-dir mmengine
RUN pip3 install --no-cache-dir -U mmcv==2.1.0
RUN pip3 install --no-cache-dir mmdet
RUN pip3 install --no-cache-dir mmpose

# Make directories for input/output
RUN mkdir -p /app/input /app/output

# Download model checkpoint => This will save time and prevent python code from downloading them each time the code is executed.
RUN mkdir -p /root/.cache/torch/hub/checkpoints/ && cd /root/.cache/torch/hub/checkpoints/ && wget -q https://download.openmmlab.com/mmpose/v1/projects/rtmposev1/rtmpose-m_simcc-ap10k_pt-aic-coco_210e-256x256-7a041aa1_20230206.pth
RUN mkdir -p /root/.cache/torch/hub/checkpoints/ && cd /root/.cache/torch/hub/checkpoints/ && wget -q https://download.openmmlab.com/mmdetection/v3.0/rtmdet/rtmdet_m_8xb32-300e_coco/rtmdet_m_8xb32-300e_coco_20220719_112220-229f527c.pth

# Clone MMPose for configs and demo scripts. We will use it later in the code
RUN git clone -b main --depth 1 https://github.com/open-mmlab/mmpose.git /app/mmpose

CMD ["/bin/bash"]

Add code to detect poses

Next step is creating a file named animal_pose.py with the following content. This file holds the logic for pose estimation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

import os
import numpy as np
import mmcv
from mmpose.utils import register_all_modules
from mmpose.apis import MMPoseInferencer

input_dir = 'input'
output_dir = 'output'

def main():
    os.makedirs(output_dir, exist_ok=True)

    register_all_modules()
    inferencer = MMPoseInferencer('animal')

    input_files = [f for f in os.listdir(input_dir) 
                  if f.lower().endswith(('.png', '.jpg', '.jpeg', '.mp4'))]
    if not input_files:
        return

    for input_file in input_files:
        input_path = os.path.join(input_dir, input_file)
        if input_path.endswith(".mp4"):
            process_video(input_path, inferencer)
        else:
            process_image(input_path, inferencer)

    
def process_video(input_path, inferencer):
    video = mmcv.VideoReader(input_path)
    
    for frame_idx, frame in enumerate(video):
        result_generator = inferencer(frame, vis_out_dir=output_dir)
        result = next(result_generator)

        predictions = result["predictions"][0][0]
        keypoints = np.array(predictions["keypoints"])
        keypoint_scores = np.array(predictions["keypoint_scores"])

def process_image(input_path, inferencer):
    result_generator = inferencer(input_path, vis_out_dir=output_dir)
    result = next(result_generator)
    
    predictions = result["predictions"][0][0]
    keypoints = np.array(predictions["keypoints"])
    keypoint_scores = np.array(predictions["keypoint_scores"])


if __name__ == '__main__':
    main()

This code will detect poses for both videos and images.

Link everything together

And finally create a file named run.sh with the following content. This bash script build the docker image, moves files to it, and executes the python script. The output result for input images can be found in out directory.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#!/bin/bash
# Check if file provided
if [ "$1" == "" ]; then
    echo "Usage: ./direct_run.sh /path/to/animal_image.jpg"
    exit 1
fi

# Create directories
mkdir -p input output

# Copy image to input
cp "$1" input/
echo "Copied $1 to input directory"

# Build the Docker image
echo "Building Docker image..."
docker build --platform linux/arm64 -t mmpose-animal-m2 .

# Run inference directly (non-interactive mode)
echo "Running animal pose detection..."
docker run --rm --platform linux/arm64 \
    -v "$(pwd)/input:/app/input" \
    -v "$(pwd)/output:/app/output" \
    -v "$(pwd)/animal_pose.py:/app/animal_pose.py" \
    mmpose-animal-m2 python3 /app/animal_pose.py

echo ""
echo "Processing complete! Check the 'output' directory for results."

If you want to get the poses coordinates, you can print keypoints & keypoint_scores and use them.

The command you are looking for is js.

If you run js -v in the terminal from cpanel dashboard, you’ll see this output:

1
2
3
4
5

$ js -v
JavaScript-C 1.8.5 2011-03-31
usage: js [options] [scriptfile] [scriptarg...]
Options:
...

Even if the cPanel admin doesn’t allow you to install Node.js or another JS engine, the js command is usually available.

The command is very limited—it doesn’t support modern JavaScript syntax. It appears to be based on an older version of JavaScript (likely ES5 or earlier). For example:

• Missing string.replaceAll()
• No console.log()
• No support for async functions

To work around this, you’ll need to:

1. Manually implement missing features.
2. Rewrite parts of your code to be compatible.

The biggest challenge is retrieving the output of your JS code. Since console.log() doesn’t work, I found an unconventional solution: throwing an error with the result.

When you throw an error, it prints to the console, and you can capture it from PHP.

Here’s a working example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function executeJs($jsCode) {
    // Add missing functionality
    $replaceAllString = "
        String.prototype.replaceAll = function(match, replace) {
            return this.replace(new RegExp(match, 'g'), function() { return replace });
        }
    ";

    // Combine with user's JS code
    $jsCode = $replaceAllString . $jsCode;

    // Create a temporary file
    $tempFile = tmpfile();
    $metaData = stream_get_meta_data($tempFile);
    $tmpFilename = $metaData['uri'];
    fwrite($tempFile, $jsCode);

    // Execute JS and capture output
    $cmd = "/bin/js -f " . escapeshellarg($tmpFilename) . " 2>&1";
    $result = shell_exec($cmd);

    // Clean up the output
    $result = str_replace("uncaught exception: ", "", $result);
    return trim($result);
}

This method isn’t perfect, but it’s a useful workaround when you’re restricted to shared hosting.

Required Packages

Before starting, install the necessary packages:

1
2

$ go get github.com/stretchr/testify/suite
$ go get github.com/testcontainers/testcontainers-go

Setting Up the Server

Create a function to return the Gin server:

1
2
3
4
5
6
7
8
9
10
11
12
13

func GetServer() *http.Server {
// ...

routersInit := routers.InitRouter()
server := &http.Server{
Addr:           endPoint,
Handler:        routersInit,
ReadTimeout:    readTimeout,
WriteTimeout:   writeTimeout,
MaxHeaderBytes: maxHeaderBytes,
}
return server
}

Start the server normally in your main file:

1
2
3
4
5

server := GetServer()
err := server.ListenAndServe()
if err != nil {
log.Printf("Server err: %v", err)
}

Creating a Test Database with Testcontainers

To run integration tests, use Testcontainers to set up a PostgreSQL database. The connection string retrieved from the test container should be used later when connecting to the database, depending on whether an integration test is running.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

package testintegration

import (
"context"
"log"
"net/http"
"path/filepath"
"time"

"github.com/testcontainers/testcontainers-go"
"github.com/testcontainers/testcontainers-go/modules/postgres"
"github.com/testcontainers/testcontainers-go/wait"
)

type PostgresContainer struct {
*postgres.PostgresContainer
ConnectionString string
Server           *http.Server
ServerCancel     context.CancelFunc
}

func CreatePostgresContainer(ctx context.Context) (*PostgresContainer, error) {
pgContainer, err := postgres.RunContainer(ctx,
testcontainers.WithImage("postgres:15.3-alpine"),
postgres.WithInitScripts(filepath.Join("..", "migrations", "1728047791947_initial.sql")),
testcontainers.WithWaitStrategy(
wait.ForLog("database system is ready to accept connections").WithOccurrence(2).WithStartupTimeout(5*time.Second)),
)
if err != nil {
return nil, err
}

connStr, err := pgContainer.ConnectionString(ctx, "sslmode=disable")
if err != nil {
return nil, err
}

ctx, cancel := context.WithCancel(context.Background())
server := GetServer()

go func() {
<-ctx.Done()
if err := server.Shutdown(context.Background()); err != nil {
log.Printf("Server shutdown error: %v", err)
}
}()

go func() {
if err := server.ListenAndServe(); err != nil && err != http.ErrServerClosed {
log.Printf("Server error: %v", err)
}
}()

return &PostgresContainer{
PostgresContainer: pgContainer,
ConnectionString:  connStr,
Server:            server,
ServerCancel:      cancel,
}, nil
}

Writing an Integration Test Suite

Use testify/suite to manage test setup and teardown.

• Setup: We create a test database using Testcontainers and start the test server.
• Teardown: We terminate the test database and shut down the test server.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

package testintegration

import (
"context"
"encoding/json"
"fmt"
"io/ioutil"
"log"
"net/http"
"testing"

"github.com/stretchr/testify/suite"
)

type ProjectTestSuite struct {
suite.Suite
pgContainer *PostgresContainer
ctx         context.Context
}

func (suite *ProjectTestSuite) SetupSuite() {
suite.ctx = context.Background()
pgContainer, err := CreatePostgresContainer(suite.ctx)
if err != nil {
log.Fatal(err)
}
suite.pgContainer = pgContainer
}

func (suite *ProjectTestSuite) TearDownSuite() {
if err := suite.pgContainer.Terminate(suite.ctx); err != nil {
log.Fatalf("error terminating postgres container: %s", err)
}
suite.pgContainer.ServerCancel()
}

func (s *ProjectTestSuite) TestGetEndpointResponse(endpoint string, expectedStruct interface{}) {
url := fmt.Sprintf("%s%s", "http://localhost:8000", endpoint)

resp, err := http.Get(url)
s.Require().NoError(err, "Failed to send GET request")
defer resp.Body.Close()

s.Equal(http.StatusOK, resp.StatusCode, "Unexpected status code")

body, err := ioutil.ReadAll(resp.Body)
s.Require().NoError(err, "Failed to read response body")

var actualResponse interface{}
err = json.Unmarshal(body, &actualResponse)
s.Require().NoError(err, "Failed to unmarshal response body")

expectedJSON, err := json.Marshal(expectedStruct)
s.Require().NoError(err, "Failed to marshal expected struct")

var expectedResponse interface{}
err = json.Unmarshal(expectedJSON, &expectedResponse)
s.Require().NoError(err, "Failed to unmarshal expected JSON")

s.Equal(expectedResponse, actualResponse, "Response does not match expected struct")
}

func TestProjectTestSuite(t *testing.T) {
suite.Run(t, new(ProjectTestSuite))
}

Example Test Case

To test an endpoint, call it with the expected response. The function will send a request to the given endpoint, retrieve the response, and compare it to the expected output.

1
2
3
4
5

package testintegration

func (suite *ProjectTestSuite) TestGetEndpoint() {
suite.TestGetEndpointResponse("/api/web/v1/videos", "expected_response")
}

Running the Tests

To run the integration tests, use:

1

$ go test -v ./...

This will execute all tests in your project.

Conclusion

By setting up integration tests with Testcontainers and testify/suite, you can ensure that your Golang Gin project works correctly with a real database. This approach makes it easier to catch issues early and maintain the quality of your application.

Luckily, Stripe does collect some payment-related information, including the IP address from where a payment was made. While Stripe doesn’t show this IP address directly, there is a way to retrieve it.

Getting the User’s IP Address from Stripe

1. Subscribe to Stripe’s Fraud Teams – You can sign up for a one-month free trial of Stripe Radar for Fraud Teams. This will give you access to additional fraud detection details, including user IP addresses.

2. Find the IP Address – After subscribing:

   • Go to the Transactions page.
   • Filter records by the user’s email address.
   • Click on any payment for that user.
   • Click Show all insights to open a popup.
   • In the Checkout details section, you’ll find the user’s IP address.

Automating the Process with Stripe API

Manually collecting users’ zip codes one by one would take forever. Fortunately, we can automate this using Stripe’s API.

Step 1: Get Subscription Users
Use the /v1/subscriptions endpoint to fetch all subscribers:

1

GET /v1/subscriptions

Step 2: Get Payment Intent IDs
For each user, retrieve their payment intent IDs using:

1

GET /v1/payment_intents

Step 3: Fetch IP Address from Payment Intent
Once you have the paymentIntentID, call this API endpoint to get IP address details:

1

GET /v1/payment_intents/${paymentIntentID}?expand%5B%5D=source&expand%5B%5D=customer&expand%5B%5D=payment_method&include_only%5B%5D=payment_method.billing_details.address%2Cpayment_method.card.country

This will return:

• The user’s IP address
• The country code

Using IP Geolocation to Get Address Details

With the IP address, we can determine the user’s approximate zip code and country.

One option is to use ip-api.com, which provides geolocation data based on an IP address. Simply send a request like this:

1

GET http://ip-api.com/json/{IP_ADDRESS}

The response will include details like:

• Country
• Region
• City
• Zip code

Final Thoughts

If your Stripe account isn’t collecting users’ billing addresses and you want to collect them, this method allows you to retrieve them using payment IPs and geolocation services. While it requires subscribing to Fraud Teams for a short period, it provides a useful workaround to collect addresses for users.

I’m sharing a part of my current workout playlist, based on recommendations from my music app. Hopefully, you’ll find some inspiration for your own workouts.

Step 1: Create a New Repository

Start by creating a new repository with the exact same name as your GitHub username. This special repository is what powers your GitHub profile page.

Step 2: Set Up GitHub Actions

Inside your repository, create a workflow file to generate and update the Pac-Man game automatically.

• Navigate to your repository
• Create a new directory: .github/workflows/
• Inside that folder, create a file called main.yml
• Add the following content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

name: generate pacman game

on:
  schedule: # Run automatically every 24 hours
    - cron: "0 */24 * * *"
  workflow_dispatch: # Allows manual triggering
  push: # Runs on every push to the main branch
    branches:
      - main

jobs:
  generate:
    permissions:
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 5

    steps:
      - name: generate pacman-contribution-graph.svg
        uses: abozanona/pacman-contribution-graph@main
        with:
          github_user_name: ${{ github.repository_owner }}

      # Push the generated SVG to the output branch
      - name: push pacman-contribution-graph.svg to the output branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

This workflow will generate a Pac-Man contribution graph and update it automatically every day!

Step 3: Add the Pac-Man Graph to Your Profile README

Now, let’s embed the generated graph into your profile.

• In your repository, create a README.md file (or edit an existing one).
• Add the following content:

1
2
3
4
5
6
7

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/[USERNAME]/[USERNAME]/output/pacman-contribution-graph-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/[USERNAME]/[USERNAME]/output/pacman-contribution-graph.svg">
  <img alt="pacman contribution graph" src="https://raw.githubusercontent.com/[USERNAME]/[USERNAME]/output/pacman-contribution-graph.svg">
</picture>

_generated with [abozanona/pacman-contribution-graph](https://abozanona.github.io/pacman-contribution-graph/)_

📌 Don’t forget to replace [USERNAME] with your actual GitHub username!

Step 4: Push Your Changes and Enjoy!

Commit and push your changes to GitHub. Within a few minutes, your profile will display a Pac-Man game playing across your contribution graph! 🎮

For an example in action, check out abozanona’s GitHub repository. Also have a look at the project’s home page to check other ways of integrating the game.

By following 👻these 👻steps,🟩you 👻 can make your 🟡GitHub 🟩profile more 👻fun and 🟩unique.

Her words came back to my mind many times this past year, especially during the demonstrations I participated in here in Hamburg, the war on Gaza, the destruction and the killing of innocent people. The Prophet Muhammad (peace be upon him) said, “How wonderful is the affair of the believer! Verily, all of his affairs are good, and this is not for anyone except the believer. If something good happens to him, he is grateful and that is good for him. If something bad happens to him, he is patient and that is good for him”. This hadith reflects the resilience of the people of Gaza. No matter how much they suffer, they continue to stand firm, resist, and hold onto hope. Their strength in the face of such devastation is a lesson for the world.

Since the start of the war on Gaza, I have participated in many protests in Hamburg. People from different backgrounds, religions, and nationalities came together to stand for Palestine. We marched through the streets, holding Palestinian flags, chanting for justice, and demanding an end to the genocide in Gaza. I have recorded many moments from the protests I attended in Hamburg. Here is a playlist of those videos:

Despite the massive support for Palestine worldwide, German goverment, like many Western goverments, continues its blind support for Israel. The government justifies this with what they call “guilt complex/historical responsibility” Because of their history, they feel responsible for supporting Israel no matter what. But it makes no sense to support a genocide out of guilt. First, because today’s Germans did not commit the crimes of the past. And second, because supporting a new injustice does not correct an old one.

I have met many German friends who disagree with their government’s stance. They told me how this “historical responsibility” is taught in schools and from a young age. But things are changing. More and more people are questioning this narrative and standing up against all forms of injustice, including the genocide in Gaza.

Also watch:

• Daniel Gerlach: Gaza doesn’t exist anymore
• Daniel Gerlach: Palestinian journalists killed in Gaza
• Annalena Baerbock denies that Nasrallah had agreed to a ceasefire with Israel
• German government’s human rights commissioner cannot name war crime committed by Israel in Gaza

I am not afraid of being killed by an Israeli soldier. I know that if I die, I will go to a better place. What bothers me the most is that after I die, they will reduce me to a number. A single number added to the total death toll. But I’m not just a number, and each one of us is more than a number. We are lives, dreams, hopes, families, stories, and memories.

What gives me strength is the solidarity from people all over the world. Seeing people in different countries protesting, raising awareness, and demanding justice gives me hope that Palestine will one day be free.

One moment that touched me deeply was a video I saw of Italian tourists singing “Bella Ciao” on Shuhada Street in Hebron. This street is the one I used to take to high school. It runs through the heart of Hebron, where Israeli settlers have occupied the city center. It is now closed to Palestinians except for those who live there, and even they must show identification to pass.

I have had many interactions with Israeli soldiers and settlers on that street. It is a place filled with tension and injustice. But seeing people from across the world stand there and sing a song of resistance gave me hope. It showed that more people are becoming aware of the Palestinian struggle.

Much of what we know about the war on Gaza comes from brave journalists risking their lives to report the truth. Many of us around the world have followed them on Instagram, relying on their updates to understand what is happening on the ground. Here are some of the journalists whose work has made a difference: @wael_eldahdouh @anasjamal44 @anas.jamal33 @hossam_shbat

The struggle continues, and so does our resistance. One day, Palestine will be free.

Then, I stumbled upon snk (check it out here). It’s a super cool project that turns your GitHub contribution graph into a snake game. You simply provide your GitHub username, and it generates an image of a snake weaving its way through your contributions. Awesome, right? But there was one problem: snk only supports GitHub. Since I primarily use GitLab for private projects, I needed something similar, but there wasn’t a solution out there. So, I decided to create my own.

Introducing the Pac-Man Contribution Game 🎮

Instead of a snake, I thought, why not Pac-Man? Pac-Man is iconic, dynamic, and just plain fun. I developed a game that overlays a Pac-Man grid on your GitLab or GitHub contribution history. Here’s how it works:

• The game generates your contribution grid and populates it with Pac-Man and four ghosts.
• Pac-Man’s mission? Clear all the cells on the grid.
• The ghosts? Chasing Pac-Man to stop him!
• If Pac-Man eats enough cells, he gets a power-up and can turn the tables on the ghosts, making them flee.
• The game ends when Pac-Man clears the entire grid.

It’s a fully automated experience — no user input required! Just sit back and watch as Pac-Man chomps his way through your contributions.

How It Works

The game pulls your commit history from GitHub or GitLab and translates it into a contribution grid. Then, it places Pac-Man and the ghosts on the grid.

There are two export options for the game:

1. HTML Canvas: Perfect for running the game in your browser.
2. Animated SVG: Downloadable and sharable for use anywhere.

You can try the game for yourself right now: Pac-Man Contribution Game Demo.

You can also see how it looks like on Github profiles live on @abozanona.

This is how canvas export for my gitlab account looks like:

What’s Next?

Of course, the project isn’t perfect (yet). Here are a few things I’m working on improving:

• Smarter movement algorithms: Currently, the sprites use basic algorithms. I want them to behave more like the real Pac-Man game.
• Better sprite design: Pac-Man’s mouth animation, ghost shapes, and collision effects could all use some love.
• Fixing SVG issues: The exported SVG occasionally has glitches with sprite movement and design that need smoothing out. And Pac-Man never goes out of power-up mode; this results in a huge svg file size.

I’m also planning to add some exciting new features, like the ability to integrate the game directly into your GitHub profile — similar to how the snk game works.

Why I Built This

At its core, this project is about creativity and having fun with your developer tools. Contribution graphs are a snapshot of your coding journey, and turning them into a playable game adds a unique twist. Whether you’re showcasing your coding streak or just having a laugh, I hope this Pac-Man game brings some joy to your day.

Check out the project repository for more details and to see how it works. Feedback, ideas, and contributions are always welcome!

This wasn’t the experience we wanted. The goal was to keep the videos inline — playing directly on the page without taking over the entire screen. Another related issue, when users clicked on a video on mobile, it would also jump into fullscreen mode, disrupting the browsing flow.

After some research, I found the culprit: the missing playsinline attribute.

The playsinline attribute is a simple yet powerful property for HTML <video> elements. By default, mobile browsers often play videos in fullscreen mode to provide a better viewing experience on small screens. However, there are many cases — like my project — where you don’t want that behavior.

Adding the playsinline attribute tells the browser to play the video directly within the page (inline) instead of switching to fullscreen. Here’s what it looks like:

1

<video src="example.mp4" controls playsinline></video>

With playsinline in place, the video stays embedded within the page, allowing users to watch it without breaking their browsing flow.

By adding this small but impactful attribute, I was able to resolve the fullscreen playback issue on mobile and create a smoother experience for our video library users.

Starting Fresh with a Strong Foundation

The first step was selecting a reliable framework. I chose a Vue.js Vuetify theme to rebuild the website, offering a modern design and a solid structure. After completing the initial build, I shifted my focus to aggressive optimization to ensure top-notch performance.

Code Refinement and Optimization

A key part of improving speed was streamlining the codebase:

1. Cleaning Up Components and Dependencies
   I identified and removed unused components and unnecessary dependencies from the code and package.json, ensuring a lean and efficient setup.

2. Strict Code Quality Rules
   Enforcing strict linting rules in .eslintrc helped catch and prevent issues like undefined or unimported components.

3. Bundle Analysis and Reduction
   Using my "bundle-visualize" command (npx vite-bundle-visualizer), I identified large, unused modules in the bundle. Removing them reduced the overall bundle size and optimized load times.

4. Minification of CSS and JS
   Enabling CSS and JavaScript minification in the build process further reduced file sizes, cutting down the data sent to users.

Addressing CSS Bottlenecks

One major hurdle was the size of the bundled CSS file. During analysis, I found several opportunities for improvement:

• Optimizing Material Design Icons (MDI)
  By default, all MDI icons were included in the CSS file. Importing only the icons used in the project and loading them in SVG format significantly reduced the file size.

• Simplifying Component Usage
  I avoided Vuetify components with overly complex functionality and styles, instead opting for simpler custom components that better fit the project’s needs.

• Dynamic CSS Loading
  CSS files are now loaded dynamically for components only when they are rendered. This split approach ensures smaller, more manageable CSS files while improving rendering performance.

Optimizing Images

Images often account for a large portion of page load times, so I implemented the following strategies:

• WebP Conversion and Compression
  Images uploaded by users are compressed and converted to WebP format in a separate thread, reducing their size without compromising quality.

• Lazy Loading
  For image-heavy pages, lazy loading ensures that images are loaded only when they appear on the screen, improving initial load times.

• Leveraging a CDN
  All images are served through a CDN, ensuring faster delivery to users regardless of their geographic location.

Additionally, when migrating all images from the old website to the new one, I compressed them and converted them to WebP. The customer was impressed by the enhanced user experience during testing.

Server-Level Enhancements

To support the front-end improvements, I optimized the server setup:

• Gzip Compression
  Configuring gzip compression on the nginx server ensured that transferred files were compressed, speeding up delivery.

• Effective Caching
  Proper caching mechanisms for objects(redis), assets(cache time) and pages(zgip) minimized redundant data transfer and improved repeat visits’ speed.

Splitting Applications and Resources

The project involved three distinct applications, which initially shared a single JavaScript file. I split the Vue application into three separate modules, ensuring that each application loaded only the libraries and resources it needed. This significantly reduced unnecessary resource loading across the board.

Impressive Results and Future Plans

Applying these strategies has drastically reduced the website’s loading time compared to the old version. The final CSS and JavaScript bundles are much smaller, and the split CSS files have made a noticeable difference in performance.

However, the optimization journey doesn’t stop here. I plan to explore additional techniques to further improve loading speed in the future. This project has been a rewarding challenge, blending technical problem-solving with creative thinking. I’m excited to see how users respond to the improved experience when the site launches in February.

Typically, I implement Basic Authentication through nginx site configurations, which works well. However, I recalled reading that this could also be achieved with Cloudflare Workers—offering a simpler and more flexible solution. In this post, I’ll guide you through implementing Basic Authentication using Cloudflare Workers.

What Is Basic Authentication and Why Use It?

Basic Authentication is a simple way to secure access to web resources by requiring a username and password. It’s particularly useful during internal testing or development phases when you want to restrict access to specific users without setting up a full-fledged authentication system.

Some advantages include:

• Quick Setup: Easy to configure without additional software or database dependencies.
• Ideal for Testing: Ensures only internal testers can access the website or specific resources.
• Lightweight: Minimal performance impact compared to more complex authentication mechanisms.

How to Integrate Basic Authentication with Cloudflare

Turns out, it’s a straightforward process. Here’s how:

1. Navigate to Cloudflare Workers
   In the Cloudflare dashboard, go to Workers & Pages > Overview from the left sidebar and create a new worker.

2. Add the Code
   Copy and paste the following code into your worker script, then deploy it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

const CREDENTIALS = {
  username: 'internal_tester',
  password: '$t7on8_p@@@w6',
};

// Main entry point
addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const authorizationHeader = request.headers.get('authorization');

  if (!authorizationHeader) {
    return unauthorizedResponse('Missing authorization.');
  }

  const [providedUsername, providedPassword] = extractCredentials(authorizationHeader);

  if (!isValidUser(providedUsername, providedPassword)) {
    return unauthorizedResponse('Invalid username/password.');
  }

  return fetch(request);
}

// Extract username and password from the Authorization header
function extractCredentials(authorizationHeader) {
  const [type, encodedCredentials] = authorizationHeader.split(' ');

  if (type !== 'Basic' || !encodedCredentials) {
    return ['', ''];
  }

  const decodedCredentials = atob(encodedCredentials);
  return decodedCredentials.split(':');
}

// Check if the provided username and password are valid
function isValidUser(username, password) {
  return username === CREDENTIALS.username && password === CREDENTIALS.password;
}

// Generate a 401 Unauthorized response
function unauthorizedResponse(message) {
  const response = new Response(message, { status: 401 });
  response.headers.set('WWW-Authenticate', 'Basic realm="Secure Area"');
  return response;
}

Explanation of the Code

• Static Credentials: The CREDENTIALS object contains the username and password. This can be adjusted as needed.
• Request Handling:
  • Checks for the Authorization header in the incoming request.
  • If the header is missing or credentials are invalid, it responds with a 401 Unauthorized status.
  • If valid, it fetches and serves the original request.
• Response Headers: The WWW-Authenticate header prompts the browser to display a login dialog when authentication is required.

Deployment

After deploying the worker, you can attach it to your domain or specific route where Basic Authentication is needed. Now, only users with the correct credentials will have access to the secured pages.

Conclusion

With just a few lines of JavaScript and Cloudflare Workers, you can implement a lightweight and effective Basic Authentication mechanism. This is ideal for securing your site during development or testing phases without complicating the process.

And voilà! Your Basic Authentication is ready for internal testers to use.