DEV Community

Christian Heilmann
Christian Heilmann

Posted on • Originally published at christianheilmann.com

9 2

Showing different titles depending if the tab is active or not

I just encountered a sneaky thing I had not seen, although it probably worked in 1999 already. A web site was showing a different title on the tab, depending on it being active or not.

Different titles showing on active and inactive tab

The whole trick is to use the blur and focus event handlers on the window to change the title.

window.onblur = function() {
    document.title = 'Please come back!';
}
window.onfocus = function() {
    document.title = 'You have 6 items';
}
Enter fullscreen mode Exit fullscreen mode

You could also change the favicon that way. Maybe this is a common practice and it feels pretty spammy, but there may be some good use cases for it, too.

If you don't want to clobber other events, it is better to use addEventListener:

let activeTitle = 'You have 6 items';
let inactiveTitle = 'Please come back';
document.title = activeTitle;
window.addEventListener('blur', e => {
    document.title = inactiveTitle;
});
window.addEventListener('focus', e => {
    document.title = activeTitle;
});
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series