Introducing ‘My Browser’ - Andy Bell - Front-End Developer

A new tool to make sharing information about a user’s environment simpler.

Getting technical details from a bug report or support ticket is hard.

Often, when a report of a weird bug on the front-end of a website or web app comes in, it’ll contain something like “Feature X doesn’t work very well on Safari” or “The layout is odd on Firefox” . The problem here is that there’s a plethora of Safari and Firefox versions and even more variation in operating systems.

This vague information often results in more questions that are hard to answer. It’s really difficult to extract relevant data from whoever reported the issue because you’ve normally got to explain in a lot of detail how to get it to you. I decided to make a little web app that does all of that for you, the moment that you land on the page.

There’s existing tools to extract browser information, but they could be better, so I decided to build “ My Browser ” to make everyone’s lives a little easier. I’ll spend some time in this post explaining what it’s all about.

I made “ My Browser ” to do one job and to do it well. Its job is to extract and present data about a user’s browser and environment. It takes the information, stores it, then provides an easy to share url that links to a report. That’s all it does and I’ve worked hard to make sure it does it as efficiently as possible.

I’ve put a lot of effort into making the user experience frictionless and sharing the generated report easy. This is done by providing clear and simple options that require little to no effort. In my opinion, that’s where other similar tools fall down. They’re great at gathering and presenting data, but sharing that data is clunky. I’ve often found that I’ve had to explain how to use these tools, which to me, defeats the object of their purpose.

A tool that causes more problems isn’t a very helpful tool.

Progressive first

Although the site is built with bleeding edge technology such as web components, it’s built with a progressive-first approach. This means that in order to get the best experience, you need to be on a modern browser, but to do the most basic function—reporting data, you can still do it by pressing a “generate report” button, which is the default state. The data can also be read, regardless of your browser.

The app enhances the user experience by detecting supported features and presenting their UI only where they are supported. It removes default and fallback UI elements at the same time. This means that a user on IE9 will get a very different experience to someone on Chrome, but they shouldn’t notice because the app already works well for them.

We’re given so much for free to make a progressively enhanced website or web app. We’ve got feature detection and @supports in CSS which means that “My Browser” ships with no polyfills, fallbacks or hacks like Autoprefixer. The app degrades gracefully instead.

This has been a very refreshing way to work that I’ve enjoyed a lot. The fact that the whole thing comes in around 25kb tells you how effective progressive enhancement can be for performance too.

Privacy matters

I’m very fortunate to be friends with some very smart and influencial people. Because of this, I shared an early version of “ My Browser ” with some of them for some initial feedback. I got some incredibly useful ideas and support which I’m endlessly thankful for. In particular, the amazingly talented Laura Kalbag reached out and gave me some very useful advice on privacy and how I was initially handling data.

Based on this help from her, changes were made and extra protection was added to make sure that any data stored on “ My Browser ” is completely anonymous and there’s no way that your browser can be fingerprinted by corporations or governments.

Privacy is so important to me and I’ll continue to work hard to make sure that all of the data that is collected is protected, transparent and anonymous.

An evolving project

What you see today on mybrowser.fyi is very much a minimum viable product. There’s plans to make it even more useful, which you can see on the roadmap . If you do think of something that will be useful, go ahead and log a feature request!

I also want everything to be transparent, even though the code isn’t open source. If you find a bug or issue, please go ahead and log it on the public issue tracker .

Wrapping up

Go ahead and try out mybrowser.fyi and see if it’ll be helpful for you and your team. If you find it useful, please share it with your network. It’ll be great if it makes a positive impact on as many teams as possible :rocket:

If you've got any questions or comments, get in touch on Twitter .