Forem: X-ray Tango

I hacked time in Chrome for a demo video

X-ray Tango — Sat, 08 Nov 2025 12:30:52 +0000

How I made Chrome believe a full workday passed in seconds to record a Timesheetr demo video.

I wanted to demo how easy it is to add entries to Timesheetr, use the keyboard shortcuts, and basically show how it would be used throughout the day to track timesheets.

Problem: I couldn't just wait for the whole day to pass and screen-capture the process over 8 hours. So I had to make Chrome think that time had changed in between my timesheet entries.

See, when you add an entry in Timesheetr, it automatically ends the previous one at the time of the new entry and calculates its duration.

My demo would have been terrible if every entry had the same timestamp.

So, using a few lines of JavaScript in Chrome’s DevTools, I overrode the browser’s Date object to make my app think the day was flying by.

I didn’t know that was even possible — but it worked!

First, a simple test

The idea was to add a random number of minutes every five seconds.
I ran this in the console:

(() => {
  let fakeNow = new Date("2025-11-02T10:00:00Z");
  const OriginalDate = Date;
  Date = class extends OriginalDate {
    constructor(...args) {
      if (args.length === 0) return new OriginalDate(fakeNow);
      return new OriginalDate(...args);
    }
    static now() { return fakeNow.getTime(); }
  };

  setInterval(() => {
    const minutesToAdd = Math.floor(Math.random() * (60 - 18 + 1)) + 18;
    fakeNow = new Date(fakeNow.getTime() + minutesToAdd * 60 * 1000);
    console.log(`⏰ Fake time advanced by ${minutesToAdd} min →`, fakeNow.toLocaleString());
  }, 5000);

  console.log("✅ Fake time simulation started");
})();

It worked beautifully. My app really thought time was passing.

But for some entries, five seconds was too short , and the random intervals didn’t always make sense.
I kept tweaking the code to make it feel more natural.

Fast forward to the result

I ended up writing a small “demo script” to plan exactly what I’d type and when.
Then I hard-coded the specific times for each entry to make it fit better.
Finally, I added a short beep each time the fake clock advanced — so I’d know if I was early or late (typing too fast or too slow).

(() => {
  const Beep = async () => {
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = ctx.createOscillator();
    const g = ctx.createGain();
    osc.connect(g).connect(ctx.destination);
    osc.type = "sine"; osc.frequency.value = 880; g.gain.value = 0.08;
    osc.start(); setTimeout(() => osc.stop(), 120);
  };

  const steps = [
    ["07:51"],
    ["09:30", 20],
    ["09:43", 10],
    ["10:00", 10],
    ["10:53", 10],
    ["11:37", 10],
    ["13:00", 10],
    ["13:23", 10],
    ["17:30", 10],
  ];

  const OriginalDate = Date;
  let fakeNow = new OriginalDate();
  fakeNow.setHours(7, 51, 0, 0);

  Date = class extends OriginalDate {
    constructor(...a) { return a.length ? new OriginalDate(...a) : new OriginalDate(fakeNow); }
    static now() { return fakeNow.getTime(); }
  };

  const jump = ([h, m]) => {
    fakeNow.setHours(h, m || 0, 0, 0);
    console.log("⏰ Time jump →", fakeNow.toLocaleTimeString());
    Beep();
  };

  let delay = 0;
  steps.forEach(([t, sec]) => {
    const [h, m] = t.split(":").map(Number);
    delay += (sec ?? 0) * 1000;
    setTimeout(() => jump([h, m]), delay);
  });

  console.log("✅ Time hacking started. Watch your console!");
})();

And that’s it — my fake day unfolded perfectly for the demo video.
Take a look at the result:
// Detect dark theme var iframe = document.getElementById('tweet-1987129678612639789-61'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1987129678612639789&theme=dark" }

It’s certainly not the cleanest piece of code, and probably not something to reuse as-is, but it’s a neat trick for time-sensitive demos or tests.

If you ever need to fake time in a web app — this hack is gold.

Building Liberty Drives: A Road Trip Planner Born from Curiosity (and a Bit of Chaos)

X-ray Tango — Sun, 26 Oct 2025 15:05:53 +0000

The best vacations I’ve ever taken were road trips. I did some in the USA and some in New Zealand. One thing you don’t want to do on a road trip is over-plan and leave no room for discovery and wandering. But you also don’t want to just drive with no plan. At least I don't.

Enters: AI

With AI and its world knowledge, I thought there was something interesting to do. So I tried tweaking an OpenAI custom GPT, but the results — in a chat — were hard to read and to come back to. So I decided to build a website where anyone can generate their own custom itinerary, with all the tweaks and requirements from my initial request. It provides a good balance between driving and discovering, accounting for constraints like vehicle type (motorcycle, EV, campervan), accessibility requirements, and more.

Of course, most of it can be obtained with a well-crafted prompt, but what I find interesting isn’t the actual itinerary result — it’s the images (taken for each stop from Unsplash), the pro tips and practical info, and the fact that you can bookmark a trip and download it as a PDF for offline reading later.

Last but not least, it’s a lot of fun to see what road trips others are exploring and the hidden gems the AI brings to light.

The Stack

The tech is intentionally simple — I wanted it fast, light, and easy to maintain:

Frontend: SvelteKit + TypeScript
Backend: Cloudflare Pages + D1 (SQLite)
Styling: TailwindCSS
Images: Unsplash API for every stop
Maps: Mapbox API for route previews

Everything runs on the edge through Cloudflare, so it’s global by default and basically maintenance-free.
No servers. No scaling headaches. Just deploy and go.

The Challenges Along the Way

No project ever goes smoothly from start to finish, and Liberty Drives was no exception.
Half the time I was learning things on the fly, and the other half I was wondering why they suddenly stopped working.

Unsplash API — Getting Out of the Sandbox

One of the first hurdles was getting approved to use the Unsplash API outside of its sandbox mode.
I wanted every itinerary to show real images for each stop, not just gray boxes or random placeholders.

Unsplash’s review process makes sense — they want responsible usage and proper attribution — but it meant making sure every image loaded correctly, displayed credit text, and cached properly.
I ended up re-working how I fetched, stored, and displayed images just to meet their API compliance.
It took a few iterations, but seeing those photos come alive on the page made it completely worth it. And honestly the team at Unsplash was very nice throughout.

SvelteKit Meets Wrangler

Then came the Cloudflare side of things.
SvelteKit runs beautifully in theory, but getting it to play nice with Wrangler and Cloudflare Pages Functions wasn’t always straightforward.

At one point, I spent hours chasing what I thought was a deployment bug — console logs, restarts, rebuilds — only to find out it was just a caching issue.
Classic.
Nothing humbles you like debugging your own impatience.

It also took me a while to understand where to put my backend code: Cloudflare's Function folder VS SvelteKit's src/routes/api folder.

Still, once it clicked, the result was worth it: zero servers, instant deploys, and edge rendering everywhere.

Learning Tailwind

I also learned Tailwind CSS for this project.
There was definitely a learning curve at first — all those class names look like hieroglyphs when you start.
But once it “clicked,” I realized I never wanted to go back to writing vanilla CSS again.

Being able to style everything inline, with predictable utility classes, made building the interface so much faster.
It felt like the perfect companion to SvelteKit’s component approach — simple, contained, and clean.

The OG Image Struggle

One thing I still haven’t cracked properly is generating OG images for the itineraries.

Right now, I’m using the static map image as a base, overlaying some text and the logo, and saving the whole thing as an SVG. That's done automatically at the creation of the itinerary. But from there, I have to manually download the SVG, convert it to PNG, compress it, and upload it — which works, but it’s clunky and definitely not sustainable if the site grows.

I’ve looked at automating that last stretch with headless rendering or Cloudflare Workers, or Cloudflare Images, but haven’t landed on a clean solution yet.
So for now, it’s a bit of a handmade process — which, honestly, feels pretty fitting for a project about road trips.

Where It’s At Now

Right now, Liberty Drives can already do some pretty fun stuff. You tell it how long you’ve got, roughly where you want to go, and what kind of trip you’re in the mood for — and it builds a plan that feels human, not robotic.

It adapts to simple things like what you’re driving (a bike, an EV, or a campervan) and whether you care more about comfort, accessibility, or adventure. It’s not just spitting out data; it’s shaping something that actually makes sense once you’re out there on the road.

Each trip comes alive with real photos from Unsplash, a few travel tips, and the kind of small, practical notes you’d normally only get from someone who’s been there. You can save your trip, keep it for later, or download it to take with you when you go offline.

And maybe the best part? Seeing what other people are planning — the wild routes, unexpected regions, and hidden places the AI keeps surfacing. It’s like getting a glimpse into everyone else’s version of “freedom on the road.”

What’s Next

There’s still a lot I want to build on top of this. Right now, the AI does a good job of coming up with complete trips, but I’d love to give people more control over the result. Things like being able to say, “Add a stop in this town,” or “Include a detour for a hike or a winery.”

I also want to make it easier to start from an existing itinerary — take something that’s already good and tweak it into your own version. The goal isn’t to make AI replace human planning, but to make it a creative partner in the process.

Another idea on the list is creating famous routes — like Route 66 or the Road to Civil Rights — but with all the modern tweaks you’d need today: accessibility, vehicle type, time limits, even budget filters.

And beyond features, I’d love to turn it into more of a community space — where people can rate itineraries, leave comments and suggestions, and help uncover even more hidden gems along the road.

Wrapping Up

At the end of the day, I’m just building something I wish existed. There’s no grand plan or secret growth strategy — most of the time I’m just shooting blind in total darkness, hoping it’ll click for someone else too.

If you’re a fellow builder and want to see how it’s going, it’s live at LibertyDrives.com. Please let me know if you have any feedback or comments.

Sometimes, the best projects aren’t about getting somewhere, they’re about finding the road that finds you.

I Got Tired of Timesheets, So I Built My Own Tool

X-ray Tango — Sun, 07 Sep 2025 13:59:09 +0000

Every Friday, I used to lose time trying to remember what I actually worked on. My employer’s ERP made timesheets feel like unpaid homework — slow forms, clunky UX, way too many clicks.

Funny enough, back when I freelanced part-time, pen and paper was faster than the ERP. Just jot down:

09:00 Project A  
10:30 Meeting  
11:00 Project B

Simple. But as a full-time consultant, the list at the end of the week got long. Translating that back into the ERP became painful again. That’s when I thought: I should automate this.

What I Wanted

Recording should be instant. The system should capture start times automatically, then calculate the time spent.
Reporting should be painless. Group entries by task, push them to the ERP via API, and never open the ERP’s UX again.

I considered Excel, but it wouldn’t give me real automation. I checked a few existing tools, but they felt bloated and didn’t match my pen-and-paper logic:

End a task by simply starting the next one.
Automatically calculate the duration of the previous task.

So I built a web app.

Version 1: Already a Boost

Add entries with one button or a keyboard shortcut.
Date/time auto-populates.
Previous task’s duration auto-calculated.
Select multiple entries → see the total minutes right away.

I’d just take that total and type it into the ERP. Productivity win.

The stack remained super simple: no backend needed.

Frontend deployed to Cloudflare Pages
Data stored in browser localStorage
No signup, no emails, no accounts. Just open the page and log.

Integrating with the ERP

Of course, I wanted more. My employer used Odoo, and I wanted to push timesheets directly to it at the end of each day, with one button click. That meant:

Pulling projects and tasks from Odoo via API
Linking entries in my app
Pushing them back to Odoo in bulk at the end of the day, with rounding options for time spent (minimum 15 minutes)

Then came the classic: CORS issues.
Frontend → Odoo backend? Nope.
I tried using a Chrome extension and it worked, it was just not that practical.
The fix: Cloudflare Workers. They handled the proxy neatly, and suddenly I had a working integration.

Current Tech Stack (for the curious)

Frontend: StencilJS (web components)
Hosting: Cloudflare Pages
Storage: Browser LocalStorage
ERP Integration: Odoo API (Projects & Tasks)
Proxy / CORS Fix: Cloudflare Workers

Lightweight, serverless, and cheap to run.

Small UX Wins

Over time, I kept scratching little itches:

Added a “Break” button (instead of typing it every time) → logs as non-working time.
Polished the design, made it responsive.
Shortcuts for common actions.

Here's a quick screenshot:

I didn’t think mobile mattered at first, but once or twice I wanted to check/edit during my commute. Since the data lives in local storage, it wasn’t super useful. Maybe syncing across devices will come later... That would require a backend, a database, authentication etc.

What’s Next

Teamwork integration (since that’s what I use now).
Maybe calendar pre-fills to auto-generate some entries.
CSV / Excel exports.
Integrate with Zapier/Make hooks.
Sync across devices if users ask for it.
And why not at some point have an LLM improve the description of timesheets? 😅

But the core will stay: simple, fast, no sign-up, no data harvesting.

Wanna Try?

If you’re a freelancer, consultant, or developer who hates timesheets, maybe my app can help:
👉 timesheeter.app

I’d love to hear feedback — especially from devs who know the pain and want to make this faster.