browserslist-config-sfgov v0.0.1
browserslist-config-sfgov
This is a shareable list of the browsers supported by the San Francisco Digital Services, for use with tools that support browserslist, such as autoprefixer, postcss-preset-env, Babel, and eslint-plugin-compat.
This list is automatically generated from analytics data, and is tailored to support 99% of browsers used within the last year by visitors to sf.gov.
Usage
To use this config, first install browserslist-config-sfgov
as a development
dependency:
npm install --save-dev browserslist-config-sfgov
Then, in the browserslist
field of your package.json
, your
.browserslistrc
, or any of the other supported browserslist config
locations, use:
extends browserslist-config-sfgov
For example, in your package.json
:
+ "browserslist": ["extends browserslist-config-sfgov"]
You can add entries to the list if you'd like to support specific browsers. You may exclude
specific browsers from your own config with the not
prefix, e.g. to exclude
Internet Explorer entirely in your .browserslistrc
:
extends browserslist-config-sfgov
not ie
Updating
This package uses browserslist-ga-export to convert a CSV export from
Google Analytics into browserslist-stats.json
,
which is read when browserslist encounters the in my stats
identifier from
index.js
. The update process is manual:
- Install the dev dependencies with
npm install
- Follow the CSV export instructions from browserslist-ga-export
- Copy your CSV export to the
data
directory, e.g. asdata/stats.csv
Run
browserslist-ga-export
on the CSV file:npx browserslist-ga-export --reportPath=data/stats.csv
You should see a success message in your terminal and a diff in
browserslist-stats.json
. Add the CSV export
and your changes, commit them, then file a pull
request.
Automated updating
You can automate the updating of the stats, but it's complicated because Google Analytics doesn't provide a way to export custom reports via the API. (Aaaaarrrgh Google, why?) Here's the workaround:
- Create a new Google Sheet
- Add the Google Analytics add-on
- Create a new report from the Sheets menu bar:
Add-ons
→Google Analytics
→Create new report
. This will create a new worksheet that houses your report's configuration (not the report data itself). Set the following options in your report:
Option Value Report Name "Browser stats" (for instance) Start Date 30daysAgo
(or use a different period)End Date yesterday
Metrics :pageviews
Dimensions ga:operatingSystem,ga:operatingSystemVersion,ga:browser,ga:browserVersion,ga:deviceCategory
Order -ga:pageviews
Limit 1000
(or go lower for less coverage)Run your report from the Sheets menu bar:
Add-ons
→Google Analytics
→Run reports
- Set up the report to run periodically:
Add-ons
→Google Analytics
→Schedule reports
- Set up a Google service account to access the Google Sheets API
- Share the Sheet with the email address of your new service account
- In your environment (
.env
locally), set up the following variables:GOOGLE_SHEET_ID
: your sheet's ID (in the URL between/sheets/d/
and/edit#...
)GOOGLE_CREDS_JSON
: your Google service account credentials JSON, on a single line
- Test the export script with
script/export-browser-stats
- Test the whole update process with
npm run update
- Figure out where to run this in the cloud
😅
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago