The Problem: "It works on my machine" 😅
I've been building CodeTune, an Islamic companion extension for VS Code that helps developers maintain their spiritual focus (Prayer times, Quran player, Azkar) without leaving their editor.
In early versions, I made a classic architectural mistake: I spun up a local Express server (localhost:3000) inside the extension to handle API requests for prayer times and Hijri dates.
The result?
❌ Port Conflicts: If port 3000 was busy, the extension crashed.
❌ Network Dependency: If the internet flickered, the prayer times disappeared.
❌ Complexity: Managing a Node process alongside the VS Code Webview was a headache.
The Solution: Going "Local-First" 🛠️
For the new v0.0.7 update, I decided to tear down the backend and rebuild it entirely within the VS Code Extension Host.
Here is how I transformed the architecture:
- Mathematical Calculation vs. API Calls Instead of fetching prayer times from an external API (which requires internet), I integrated the adhan JavaScript library directly into the extension source.
Now, the extension calculates astronomical prayer times locally on your CPU in milliseconds.
TypeScript
// The new logic (No more fetch calls!)
import { Coordinates, CalculationMethod, PrayerTimes } from 'adhan';
function calculatePrayerTimes(lat, lon) {
const coordinates = new Coordinates(lat, lon);
const params = CalculationMethod.Egyptian();
const prayerTimes = new PrayerTimes(coordinates, new Date(), params);
return prayerTimes; // Instant results!
}
- Solving the "Where am I?" Problem VS Code Webviews have strict restrictions on the Geolocation API. To solve this without annoying the user with manual inputs, I implemented IP-based Geolocation in the Extension Host.
It detects the city automatically on the first run (using a simple call to ip-api), saves the coordinates locally, and then never needs the internet again for calculations.
What's New in v0.0.7? ✨
After this refactor, the extension is faster, lighter, and more reliable.
🌍 Zero-Config Setup: Install it, and it instantly knows your location (e.g., Asyut, Cairo, London).
✈️ 100% Offline Support: Coding on a plane? Your prayer times and Quran player still work.
🎨 New Visual Identity: A fresh icon representing the fusion of Code < > and Spirituality ●.
🛡️ Privacy: No GPS permissions required.
Screenshots 📸
Here is the result of the new UI with the "Dot" branding and automatic location detection:
Try it out! 👇
If you are a Muslim developer looking to balance your workflow with your spiritual habits, give it a try. It's open-source and free.
VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=FreeRave.codetune
GitHub Repository:
https://github.com/kareem2099/codetune
I'd love to hear your feedback in the comments! Have you ever had to refactor a VS Code extension?
Top comments (0)