DEV Community: Typing Turtle

FE/BE - Unite Them!

Typing Turtle — Tue, 17 Mar 2026 14:02:20 +0000

tl;dr;

Teams should agree upon and understand the source of truth domain, working together and evolving it together
Unification is a conceptual project; having more to do with organizational and team operational structure than code/architecture

You may notice that the ideas here are nothing new and are well represented in DDD (Domain Driven Design). For more into this topic I highly recommend reading Learning Domain Driven Design

We're rewriting a large system at Anedot. We're using rails as a backend to develop a public API which will be consumed by a bleeding edge TanStack app on the frontend, but is built to be consumed by anyone.

Classically teams are split by frontend and backend specialization. This can lead to "model drift" as conceptual models of the domain that exist within the rails system can become a deeply different beast from the frontend UI models and user flows. This conceptual understanding of the model will eventually lead to differences in code and types.

Over time this "drift" means the frontend lacks understanding of the system capabilities and the backend loses sight of the purpose of it all - features delivered to the user.

Over time, FE ends up:

thinking in API responses, not domain concepts
optimizing for screens, not system behavior
missing invariants and edge cases enforced in the backend
discovering issues only after integration

That’s not a tooling issue, it’s an information flow problem.

In most teams, this is exactly what happens: the frontend becomes a consumer of shapes rather than a participant in the system’s meaning. Over time, that leads to shallow understanding and poorer decisions.

The solution is structured exposure to domain decisions and constraints.

The Source of Truth

If we can all agree on the source of truth for the domain, we can focus on a shared understanding and vigilant maintenance of that model.

So is it the shared public API (OpenAPI spec)?
Or the frontend algebraic data types?
Or the database schema? (we considered generating typescript types from the rails schema)

The reality is that these will always diverge unless you constrain the system.

The domain model should sit in the center. DB, API, and UI are projections of that model.

        UI (view models)
             ↑
        API contract (OpenAPI spec)
             ↑
        Domain model  ← this is the real source of truth
             ↓
        Persistence (DB schema)

If you skip explicitly defining the domain model, the API becomes an accidental one, and drift is inevitable.

The pitfalls of other options

The API is the contract for integration boundaries. APIs are often consumer-optimized, not domain-accurate. They hide or reshape domain concepts and so using them as a source of truth would result in leaky abstractions.

Tightly coupling the DB schema directly in FE leads to tight coupling to storage decisions.

Overall we need both interface correctness and conceptual integrity. We need a good integration boundary and shared understanding of the domain.

How this works

1. Define an explicit domain layer.

Named domain objects (not DB tables, not API DTOs)
Clear invariants
Shared terminology

Constraints on the domain model implemented in rails should be reflected in the TS types.

Example:

// domain (conceptual)
type Subscription = {
  id: string
  status: "active" | "past_due" | "canceled"
  plan: Plan
  billingCycle: BillingCycle
}

2. Treat API schemas as a projection of the domain

The OpenAPI spec should be derived from (or at least aligned with) domain concepts.

Bad:

{
  "user_id": "...",
  "plan_id": "...",
  "stripe_subscription_id": "..."
}

Better:

{
  "subscriptionId": "...",
  "status": "active",
  "plan": { ... }
}

3. Accept that FE models ≠ API models

Trying to unify FE + API types directly is a trap.

Example:

type SubscriptionCard = {
  title: string
  isActive: boolean
  renewalDateFormatted: string
}

4. Prevent drift with process, not just tooling

No "Throw over the wall".

Cross-functional ownership. Teams aligned with features, not function. Same management, same backlog, same project, same retrospectives and plannings/shapings, same post-mortems.

In a word, shared ownership and cultivation of the source of truth domain.

Before building:

Define domain concept
Define API shape
Validate against real user flows

Every API change should answer:

What domain concept does this represent?
Is this shaped for a real workflow?
Are we leaking DB structure?

Unite Them!

Given our constraint for a public API we can generate projections in the correct direction:

DB -> Rails (domain) -> OpenAPI spec -> typescript types -> UI types -> UI

Overall it's important to think about both the technology and human side of software to arrive at truly useful systems while maintaining reliability and speed of development.

Dank Owl - custom themes in Warp terminal and neovim

Typing Turtle — Fri, 24 Feb 2023 18:52:57 +0000

My warp themes

These go in your ~/.warp/themes directory - I have mine symlinked to a clone of the dotfiles referenced above (see setup.sh for details).

I use the font Dank Mono but you can switch the font. If you do want Dank Mono in all it's glory you'll want to run it through the nerd-font patcher.

It's not too bad just pay close attention to the instructions.

UPDATE:

Made a quick script to pull the top deep dream AI generated image into my theme: https://github.com/danieluhl/random-warp-bg

This runs in a terminal startup script that also pulls my latest dotfiles: https://github.com/danieluhl/dotfiles-3/blob/main/public/login.sh

Which gets kicked off here:
https://github.com/danieluhl/dotfiles-3/blob/main/public/zshrc#L126

UPDATE 2:

you can now run

npx get-warp-bg --theme [theme-folder]

Passing your theme directory, e.g. for ~/.warp/themes/night_owl you would run npx get-warp-bg --theme night_owl

Flip the Bit to Win Puzzle

Typing Turtle — Wed, 22 Feb 2023 12:43:22 +0000

Cracking the coding interview problem 5.3:

You have an integer and you can flip exactly one bit from a 0 to a 1. Write code to find the length of the longest sequence of 1s you could create.

EXAMPLE:
Input: 1775 (11011101111)
Output: 8

My first thought here is to take the approach of looking carefully at how I solve this by hand. I look at the longest string of 1s with only one zero separating them.

This would be pretty difficult to do programatically.

My second approach is the totally inefficient but works path of flipping each zero to a 1 and then checking the entire number for the largest string of 1s. This would be wildly inefficient for something like '100000000001'. But the input is not too long so performance is probably not a big concern. However, I wouldn't expect an interview to be satisfied with this algorithm.

My third path is thinking through processing in a loop one bit at a time. This path often involves a bunch of mutable state but is often the most optimized.

Here's my pseudocode I wrote on my notepad:

variables:
isSecondZero = false;
currentRun = 0;
combinedRun = 0;

while(1)
  currentRun++
  combinedRun++
  if zero, keep incrementing large until
    we hit a second zero, but reset currentRun
  if second zero, set combinedRun to currentRun

So for example '11011101111' when we hit the first zero we start counting fresh but also save up the "combined" total. When we hit another zero we save the total length and also treat it as a first zero for the next combined total.

Here's my first pass JS solution:

const findLargestRun = (binaryString) => {
  // const binaryString = num.toString(2);
  let currentRun = 0;
  let combinedRun = 0;
  let isSecondZero = false;
  let longestRun = 0;
  [...binaryString].forEach((digit) => {
    if (digit === '1') {
      currentRun++;
      combinedRun++;
      return;
    }
    if (isSecondZero) {
      longestRun = Math.max(longestRun, combinedRun);
      combinedRun = currentRun + 1;
      isSecondZero = false;
    } else {
      isSecondZero = true;
      combinedRun++;
      currentRun = 0;
    }
  });
  return Math.max(longestRun, combinedRun);
};

This works for everything except zero so I'd add an exception at the top for completeness. I also don't feel great about spreading the string into an array for the loop so I'd probably switch to a for loop for style points. I think the important part here is variable naming. It's difficult to convey the concept of resetting but also combining on the second zero.

Cracking the Coding Interview 5.2

Typing Turtle — Tue, 21 Feb 2023 14:28:00 +0000

Chapter 5 is all about bit manipulation. I'll be working with JS. Here's the puzzle:

Given a real number between 0 and 1 (e.g. 0.72) that is passed in as a double, print the binary representation. If the number cannot be represented accurately in binary with at most 32 characters, print "ERROR".

My first thought is that this requires knowledge of binary representation of decimals which is something like twos compliment. Off to do some googling!

...

So I found that it's similar to powers of two where each position is represented by 2^n where n is the position, but it's sort of reversed and 1/2^n.

So 0.75 would be 1/2^1 + 1/2^2 = 1/2 + 1/4 = 0.11

For this problem I can't just say input.toString(2) because I need to check if it can be represented in 32 bits.

What does it mean to be represented in 32 bits? It means if I get to 0.111011...10 to the 32nd position and still have remainder, then it cannot be represented completely.

First pass algorithm

First I'm going to try this basic pattern:

Subtract 1/2^n from the input
If the result is negative, keep n position a zero
If the result is positive, make n position a 1
Move to the next position
Check if we still have a remainder
- If yes, check if we're at position 32, possibly error

This should work fine when zero is the input because the first round will come up negative and there will be no remainder.

Here's my quick first pass that seems to work:

const decimalToBinary = (dec, pos = 1, result = []) => {
  const sub = 1 / 2 ** pos;
  let next = dec - sub;
  let binaryPosition = 1;
  if (next < 0) {
    binaryPosition = 0;
    next = dec;
  }
  result.push(binaryPosition);

  // check exit conditions
  if (next === 0) {
    return result.join('');
  } else if (pos === 32) {
    return 'ERROR';
  }
  return decimalToBinary(next, pos + 1, result);
};

console.log(decimalToBinary(0.75));
console.log(decimalToBinary(0.25));

I might add a check at the beginning that the input is as intended (between 0 and 1). I'm also not sure how to find valid and invalid decimal input, all random decimals I tried return ERROR - which is probably accurate.

Time to read the book solution!

The book starts with a slightly different algorithm:

0b0.101 = 1 * 1/2 + 0 * 1/2^2 + 1 * 1/2^3

But this is equivalent to my algorithm. But this is where the similarities end. In the book they use an iterative (vs recursive) approach which multiplies the number by 2 and checking if it's gone over 1. If it is, the binary is a 1 for the position, otherwise it's a zero.

This is similar but multiplying by 2 instead of subtracting the 1/2^n (essentially division with remainder). It's interesting that they multiply by two instead of bit shifting by 1 (num << 1).

Here's my implementation in JS of their solution:

const printBinary = (num) => {
  if (num >= 1 || num <= 0) {
    return 'ERROR';
  }

  let binary = '';
  while (num > 0) {
    if (binary.length >= 32) {
      return 'ERROR';
    }

    const twoNum = num * 2;
    if (twoNum >= 1) {
      binary = binary + '1';
      num = twoNum - 1;
    } else {
      binary = binary + '0';
      num = twoNum;
    }
  }
  return binary;
};

While the BigO of the solutions is the same, the recursive in JS will have some overhead of function calls. Since we know the max calls will be 32 it's not a concern, so the biggest question is which is easier to comprehend. I think my solution keeps closer to the mathematical solutions which is the logical way most people will approach understanding this problem. If we did need this function to be hyper-optimized, we may need to take a closer look at the individual operations of each pattern and take the one with the fewest cycles.

This was pretty fun, see you in the next one!

Work Time vs Home

Typing Turtle — Fri, 23 Apr 2021 15:08:12 +0000

I've recently realized how short the hours at work are. On a workday we tend to think of tons of time available at work, and very little once we get home. However, if you've taken part of a workday to do non-work activity (e.g. read a book) you'll quickly realize how short the at-work time really is.

Each moment matters. The number of times you need to go to the bathroom maters. I'm not saying we should be paranoid about optimal time usage in every moment. In fact, we tend to greatly overestimate the time it takes to do the connective tissue tasks throughout the day. But we should be aware of where time is going at all times and try to not get lulled into a false sense of having lots of time to spare during the day.

Habit Breaker: circles

Typing Turtle — Thu, 15 Apr 2021 14:39:17 +0000

I draw circles for todos in my notes. I draw starting at the top of the circle and go counter-clockwise. Sometimes the smallest habit breakers bring moments of awareness into the day. This week I'm doing this: start the circle at bottom-right and go clockwise.

Fiction Reading for Software Engineers

Typing Turtle — Fri, 09 Apr 2021 15:58:45 +0000

My favorite line in the Harry Potter movies is zombie Dumbledore towards the end:

Of course it's happening inside your head, Harry. Why should that mean that it's not real?

Software engineering is primarily a people problem. Software engineering also happens entirely in your head.

When you read good fiction books you begin to build the muscle of creating a good story in your head. You can build out worlds and mental models more easily. Same for playing games like D&D.

Bring this skill and habit to engineering in how you think and communicate the non-fiction reality in terms that pulls others in and captures their imagination and in the end creates clarity and cohesion.

Speak as if Someone is Listening

Typing Turtle — Fri, 02 Apr 2021 14:26:00 +0000

I was riding in an uber with my wife long ago and noticed our conversation took on a strange tone. Without any planning, we both began to speak with half our minds taking the point of view of the driver. It's hard to describe, but you'd know it if this has happened to you.

It reminds me of a line from Seneca: "Live among men as if God beheld you; speak with God as if men were listening"

Our minds are great. With each new person that enters a room we can immediately adjust what we say to accommodate a level of empathy for how that person will understand or react to what we are saying.

Recently my manager and tech lead are only coming to two standups per week. The other three standups are markedly different. With less people in the room and no manager it's easier to open up and express oneself in a clear manner. If you don't have an open space like this for your team, I do highly recommend finding it.

Can't Stop, Won't Stop

Typing Turtle — Thu, 25 Mar 2021 13:09:16 +0000

Friday Nights

On typical Fridays, I would often go hang out at bars with friends, celebrate weekly wins, and was overjoyed for the weekend.

Because of this routine, when I went deep in self-reflection by meditating on a Friday after work I saw the welling up of joy and anticipation for the night.

I wondered, where does this feeling come from? There's nothing inherently different about my internal state now vs any other meditative sitting. Why is this coming up? Why can't I control it? Why can't I bring it up on other days?

Societal expectations, habits, and history are very strong and deeply ingrained in the mind. It takes years of practice to unwind these subconscious patterns and master them. However, just noticing them at a surface level and understanding their nature can help setup success.

Working Late

Another example of the same situation "feeling" a different way is when I do work on my own time. I'm not "on the clock", but I have an itch to scratch or rising motivation that I can't explain.

I could go play video games, watch tv, catch up on reading, but instead I choose to think through a hard problem or debug some code.

The difference in feeling is subtle yet influences everything about the activity:

I'm more open to rabbit holes and going deep to investigate underlying logic; it's my time, I can do what I want with it.
I'm more creative in problem solving. I'm no longer driving precisely at what the company/manager/team wants or what some ticket says, I'm coding for myself and what I want
I engage my subconscious, often if I've taking my free time on a problem it will stick with me throughout the night even in sleep thinking through all different paths I could have taken
It feels good! When it's my time I feel more comfortable with not being productive. It's not about the goal, it's about the journey.
It's more productive. Despite the previous bullet, it's usually much more productive because when stress goes down and creativity goes up programming gets better. Happy engineers write better code.

It's not something I can control, like Friday nights it's an involuntary shift in approach that happens naturally and is difficult to reproduce.

Not All Good

Sometimes working on your own time is a recipe for disaster. Burnout lives here and work/life balance can quickly go out the window. Like the involuntary feeling of excitement and anticipation that a Friday night brings, we need to be aware of the feeling going into off-hours work. Is it going to be the big win, or are we pushing ourselves into a bad area?

Re-framing

There's a lack of distinction in our industry between positive off-hours work and negative. Corporations tend to play on the safe side saying you shouldn't work off hours and go so far as to say don't use internal comms off hours because it sets a bad example. This throws the baby out with the bath water.

We need new terminology and re-framing around the concept of positive, motivating, productive off-hours work. Something with no shame attached and that doesn't require an apology the next day.

I don't have any brilliant ideas here, if you do, please comment!

Other Thoughts

Maybe this is connected to "flow" time but having flow time during the day still feels different than working off-hours. Again, this feeling of freedom and change in approach is something I have yet to be able to replicate during the work day. It's not about time of day either, take a vacation day and do some work and you get the same results.

Mistake vs Tragedy

Typing Turtle — Tue, 09 Mar 2021 21:55:23 +0000

Fair warning, I'm getting into stoic philosophy a bit here. If you're not into the stoic perspective, I recommend looking up research on growth vs static mindset. Same junk different name 😋

Tragedy is severe an unwarranted injustice where nobody is at fault. The circumstances of nature happen to come together in a way that something awful happens and it's pointless.

I was playing a video game the other day and started reflecting on the several mistakes I made - mostly around optimizing for time/resources. The thought is, if I had more information, awareness, reaction time, etc. I would have taken a different action.

I started thinking, what's the difference between a tragedy and a mistake?

Stoic philosophy often points towards determinism, that is, we cannot change the past and given the trajectory of the universe we also cannot alter the future. We can learn from the past and adjust our actions and all of this is predictable. The question I often get when talking to others about this is, "so what? How does this change anything about how I live". This is a great question for any philosophical line of thinking.

In the case of determinism, the hurdle of understanding its truth is just the start, and most people have trouble getting past that. But humor me for a moment and assume determinism is true. This assumption sets us down an interesting path chain of logic!

Let's look at a common occurrence when a player makes a mistake in a video game: the other players blame them for losing the game, the player may hit their keyboard and blame the speed of their computer, everyone feels awful.

None of this makes sense from a lens of determinism. Instead, we can think deeply about all the factors that led up to the moment of that mistake with the knowledge that it was inevitable given the situation. We stop thinking in terms of agency and start thinking in systems!

Regret, guilt, and blame do not exist in this worldview, there is no place for them, instead we get technical, creative, and curious.

What if the computer was a factor? How could I test that? How can I most accurately re-create the situation in a simulator to adjust and try different things to optimize the outcome next time it happens? Maybe I can even get an AI to do that work for me!

I've been in 12 severe car accidents, I know that's a lot, but I swear I'm a good driver. One particularly bad accident involved getting t-boned by a large truck completely smashing my car.

This left me quite shaken up and I spent the entire night re-living the few hours before the accident: "if only I hadn't forgot my wallet and gone back in the house", "if only I hadn't taken extra time in the shower", "if I had taken a different route to work", on and on and on and on. So many events led to us both being in that exact time and place and boom!

I felt so powerless in that moment: the accident had taken place and there's nothing I could do to change that fact. This was a key turning point and realization for me. Stoicism takes this feeling of powerlessness and normalizes it applying the idea broadly to all events. Yes you're powerless, and that's OK. In fact, it's better to understand this true nature so you can get past the mental anguish that would arise otherwise.

There is a key moment where it's critical to catch yourself, reflect, and practice making mental adjustments by thinking through the deterministic worldview. The key moment to look for is just when you realize you've made a mistake. Take a moment to check what's going on in your body and mind. What is your natural thought process? How do you feel? Does your heart rate go up, maybe tightness in the chest or lump in the throat, maybe a sinking feeling?

With practice you can replace the typical default bad feelings of regret, loss, and guilt with immediate curiosity: "huh, I wonder why that happened". Remove your self from the equation by default and you'll quickly find yourself chuckling on the inside by others' reactions.

Learning from Shoveling the Yard

Typing Turtle — Fri, 05 Mar 2021 20:09:37 +0000

Shoveling Sucks

Living in the northeast shoveling driveways is a known pain. This year I got a small electric snowblower which helped a bit but it's always been a chore. My back aches after, it's cold and wet and often early in the morning so we can get the car out for the day.

I need a sledding hill!

This year due to travel restrictions it didn't make much sense to take our usual winter vacation out of state. I have a 1yo boy and I wanted to introduce him to sledding. Local tubing places have height restrictions he does not meet.

After much research I looked out the window and realized I have a pretty good slope in my yard. Just need to pile up some snow. So I took an afternoon and built a curving path with walls so you don't fly out and a big wall at the end to catch you. It was awesome. The baby giggled the whole way down. We spent the next two weeks tubing every day!

Wait, shoveling is awesome?

Only in later reflection did it hit me: the activity of shoveling in the yard was physically the same as shoveling the driveway, but my mental state was profoundly different. I actually enjoyed it. How could this be? And, if I can deconstruct this phenomenon, could I enjoy shoveling the yard just as much? Or even expand this to apply to other chores I dislike?

Key differences

Driveway

Needs to be done (no autonomy)
Known solution (no creativity)
Same every year (no variety)
Result is restored ability to drive the car

Yard

I had the idea
I decided how to form the hill
I did the work on my time
I planned out each phase, got creative with the process
Result is something both I and others enjoy

Shifting State of Mind

If something is boring, turn it into a game. Maybe next time I'll try to get all the snow in one area and build an igloo.

When my wife pesters me to go shovel I shouldn't take this as a burden, but as a sign of how grateful she is that I'm around to take care of these sorts of tasks. I'm much happier when I'm doing something that I know others will enjoy.

My First Chrome Plugin

Typing Turtle — Fri, 05 Mar 2021 18:06:41 +0000

It was much faster than I thought it would be.

Generate the Project

I used Yeoman to generate the scaffolding. Make a project folder and run:

npm install -g yo generator-web-extension
yo web-extension

Lots of options but I'd go with the minimum for now. One thing I did include was a button in the extension.

Then go to your chrome extensions and click "Load Unpacked". Find the dist directory that was generated and you should have your dev extension in chrome ready to go. Click the puzzle piece in the extensions area and pin your extension.

Now we can fire up the watcher and start coding while getting a live refresh:

npm run dev chrome

Code Structure

There's a little popup when you click the extension. Think of this as it's own separate web page. In fact, you can right-click the extension and "inspect" just like it's a web page. This is where you'll see any console.log for the extension bits.

We'll be injecting a super simple timer onto the page. To do this the extension needs to send a message to the page.

Go to app/pages/popup.html and add a button with class timerButton.

Now look in /app/scripts and you'll see three files, two we'll be touching are:

popup.js: this is for code that runs inside the extension "page"

contentscript.js: this is for code that runs in the page the user is currently on

So we need to send a message from popup.js to contentscript.js to trigger injection of a timer on the page.

popup.js:

document.querySelector('.timerButton').addEventListener('click', addTimer);
function addTimer() {
  browser.tabs
    .query({
      active: true,
      currentWindow: true,
    })
    .then(tabs => {
      browser.tabs
        .sendMessage(tabs[0].id, {
          timerMessage: `create`,
        })
        .then(response => {
          console.log({response});
        })
        .catch(({message}) => console.error('error', message));
    });
}

Once we hit the page we'll do all the timer stuff including injecting some html on the page that has some hacky draggability:

const SECOND = 1000;
const MINUTE = SECOND * 60;
class Timer {
  timerHtmlHandle;
  timerInterval;
  originalTime;
  currentTime;
  startTimer() {
    this.timerInterval = setInterval(this.tick.bind(this), SECOND);
  }
  stopTimer() {
    clearInterval(this.timerInterval);
    this.timerInterval = null;
  }
  toggleTimer() {
    this.timerInterval ? this.stopTimer() : this.startTimer();
  }
  resetTimer(seedTime = prompt('Enter Timer Minutes') * MINUTE) {
    this.stopTimer();
    this.currentTime = this.originalTime = seedTime;
    this.tick();
  }
  refreshTimer() {
    this.stopTimer();
    this.currentTime = this.originalTime;
    this.tick();
  }
  addMinute() {
    this.currentTime = this.currentTime + MINUTE;
    this.tick();
  }
  tick() {
    const timerText = `${Math.floor(this.currentTime / MINUTE)}:${`${
      (this.currentTime % MINUTE) / SECOND
    }`.padStart(2, '0')}`;

    this.timerHtmlHandle.innerText = timerText;
    this.currentTime = this.currentTime - SECOND;

    if (this.currentTime < 0) {
      this.stopTimer();
    } else if (this.currentTime < MINUTE * 2) {
      // two minute warning
      this.timerHtmlHandle.style.color = '#f5b20a';
    } else if (this.currentTime < MINUTE) {
      // one minute warning
      this.timerHtmlHandle.style.color = '#da521f';
    }
  }
}
const duhlTimer = new Timer();

const addTimer = () => {
  const timerHtml = `
    <div draggable="true" class="duhl-timer">
      <div class="drag"></div>
      <div class="ext-timer">0:00</div>
      <button class="refreshTimer">🔂</button>
      <button class="addMinute">1️⃣</button>
      <button class="resetTimer">🆕</button>
      <button class="toggleTimer">⏯</button>
    </div>
  `;
  document.body.insertAdjacentHTML('afterbegin', timerHtml);
  duhlTimer.timerHtmlHandle = document.querySelector('.ext-timer');
  document
    .querySelector('.duhl-timer .refreshTimer')
    .addEventListener('click', () => duhlTimer.refreshTimer());
  document
    .querySelector('.duhl-timer .addMinute')
    .addEventListener('click', () => duhlTimer.addMinute());
  document
    .querySelector('.duhl-timer .resetTimer')
    .addEventListener('click', () => duhlTimer.resetTimer());
  document
    .querySelector('.duhl-timer .toggleTimer')
    .addEventListener('click', () => duhlTimer.toggleTimer());
  document.querySelector('.duhl-timer').addEventListener('dragend', e => {
    console.log(e);
    e.target.style.top = `${e.pageY}px`;
    e.target.style.left = `${e.pageX}px`;
  });
};

browser.runtime.onMessage.addListener((req, sender, sendResponse) => {
  // only one timer for you!
  if (duhlTimer && duhlTimer.timerHtmlHandle) {
    return;
  }
  addTimer();
  // reflow before starting things or it gets wonky
  setTimeout(() => {
    duhlTimer.resetTimer(5 * MINUTE);
  });
});

Finally the related contentscript.css

.duhl-timer {
  padding: 0 4px;
  position: absolute;
  z-index: 10000000;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid #fff;
  border-radius: 12px;
  color: #fff;
}

.duhl-timer .drag {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 12px 0 2px 0;
  background: repeating-linear-gradient(
    to bottom,
    #666,
    #666 2px,
    #333 2px,
    #333 4px
  );
  cursor: move;
}

.duhl-timer .ext-timer {
  font-size: 3rem;
  line-height: 3rem;
  text-align: center;
}

.duhl-timer button {
  padding: 2px 6px;
  border: none;
  background: none;
  border-radius: 4px;
}

.duhl-timer button:hover {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
}
.duhl-timer button:active {
  background: rgba(255, 255, 255, 0.2);
}

And that's my timer injection plugin!

src