npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

browserslist-ga

v0.0.13

Published

Target browsers tailored to your audience

Downloads

67,941

Readme

Target browsers tailored to your audience.



How to use

In the root directory of your project run:

npx browserslist-ga

(npx comes with npm 5.2+, for older versions run npm install -g browserslist-ga and then browserslist-ga)
(to run the latest code directly from GitHub, execute npx github:browserslist/browserslist-ga instead)

You'll be asked to login with your Google Account (please see this issue if you are unable to sign in). Your access token will only be used locally to generate a browserslist-stats.json file in the root of your project. After finishing the steps, you can use your stats with Browserlist by adding the following to your Browserslist config:

> 0.5% in my stats  # Or a different percentage

Note that you can query against your custom usage data while also querying against global or regional data. For example, the query > 1% in my stats, > 5% in US, 10% is permitted.

Why should I care?

Browsers update very often these days, with major releases getting published every month. With each new browser version comes support for new web platform features. Thanks to open source projects such as Autoprefixer and Babel we are able to use these features while supporting older browsers. But this backward compatibility comes with a cost. We can't really keep adding prefixes, polyfills and other fallbacks to support every browser ever invented.

Browserslist is an open source project that can minimize those costs by allowing you to configure which browsers you care about. It is supported by tools such as Autoprefixer, babel-preset-env, postcss-normalize and many others. Here's how you configure Browserslist:

> 1%              # I want to support browser versions that have more than 1% of global usage
Last 2 versions   # And the latest 2 versions of each browser
IE 9              # And also Internet Explorer 9 specifically

The global browser usage data comes from caniuse.com and is downloaded from npm when you run npm install. Package managers such as npm and Yarn will generate a lockfile with the exact version of each package that was installed. This means the caniuse database that is used to perform these queries will always be the same. This is great because it's predictable, but it's important to update this package from time to time to keep up with the latest stats. Apart from remembering to update this package, there's something else you should consider:

  • For instance, in China there are some popular browsers that are not used in the US and Europe.
  • Or maybe your audience uses mostly mobile browsers.
  • Or maybe you are building an application for the government and need to support Internet Explorer 8.

The point being, it's important to make decisions based on your audience. Browserslist-GA aims to help you with that. It integrates Google Analytics with Browserslist to keep your targeted browsers updated.

Notes

There are some differences compared to the caniuse Google Analytics importer:

  • All browsers on iOS use Safari's WebKit as the underlying engine, and hence will be resolved to Safari. The  caniuse Google Analytics parser only converts some of the data to Safari, while the remaining is left untracked (see #1).
  • YaBrowser, a popular browser in russian-speaking countries, uses the Blink web browser engine and is based on Chromium. It is currently not available on caniuse and so is resolved to Chrome (or Chrome for Android) and the version is mapped to the nearest available version (see #2).
  • Just like for YaBrowser, the same approach is applied to the Coc Coc browser.

Kudos

All the praise goes to the humans and martians that develop and maintain Can I Use and Browserslist.