Skip to content

Instantly share code, notes, and snippets.

Avatar

Philip Walton philipwalton

View GitHub Profile
@philipwalton
philipwalton / module.html
Last active Jul 20, 2020
Measure the Core Web Vitals without a bundler
View module.html
<!-- Load `web-vitals` using a module script. -->
<script type="module">
import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals@0.2.1/dist/web-vitals.es5.min.js?module';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
</script>
View TTI Polyfill
// ==UserScript==
// @name Time to Consistently Interactive Polyfill
// @namespace http://developers.google.com/
// @version 0.1
// @description Polyfill to detect Time to Interactive
// @author Deepanjan Roy
// @include http://*
// @include https://*
// @run-at document-start
// @noframes
View gist:464d5acfea8e07d18215bac9244e60f8
[16:54:43] COMMAND POST "/wd/hub/session"
[16:54:43] DATA {"desiredCapabilities":{"javascriptEnabled":true,"locationContextEnabled":true,"handlesAlerts":true,"rotatable":true,"browserName":"chrome","loggingPrefs":{"browser":"ALL","driver":"ALL"},"requestOrigins":{"url":"http://webdriver.io","version":"4.6.2","name":"webdriverio"}}}
[16:54:44] INFO SET SESSION ID e1f26aa1-9834-4891-b653-3d00282ef8a1
[16:54:44] RESULT {"applicationCacheEnabled":false,"rotatable":false,"mobileEmulationEnabled":false,"networkConnectionEnabled":false,"chrome":{"chromedriverVersion":"2.24.417412 (ac882d3ce7c0d99292439bf3405780058fcca0a6)","userDataDir":"/var/folders/tn/jvvbl2tn0h52glcy9r49q2d00073gj/T/.org.chromium.Chromium.k1JYf7"},"takesHeapSnapshot":true,"pageLoadStrategy":"normal","databaseEnabled":false,"handlesAlerts":true,"hasTouchScreen":true,"version":"57.0.2987.133","platform":"MAC","browserConnectionEnabled":false,"nativeEvents":true,"acceptSslCerts":true,"webdriver.remote.sessionid":"e1f26aa1-9834-4891-b653-3d00
View gist:ac1f6da62722021d5f4b

TL;DR Mimic what Polyfill.js and Hitch.js were trying to do, but server-side.

Essentially, we create a JavaScript library (a post-processor of sorts) that accepts a CSS file and outputs a JavaScript file. The JS file would consist of:

  • An AST of the original CSS
  • Some JavaSript feature detects
  • Some logic that knows how to turn the AST back into a stylesheet (based on the findings of the feature detects).
  • The necessary plugins to polyfill the missing features (again, based on the findings of the feature detects).

All of this could be packaged as a command-line tool (similar to webpack or browserify), and it would output a single JS file that could do everything.

@philipwalton
philipwalton / ga-browser-stats.json
Last active Aug 29, 2015
Browser Version Sample Format
View ga-browser-stats.json
{
"total": 10459,
"metric": "sessions",
"viewId": "42124519",
"dateRange": "Last 30 days",
"generatedOn": "Sat Jun 21 2014 21:02:41 GMT-0700 (PDT)",
"browsers": [
{
"name": "Chrome",
"count": 6853,
@philipwalton
philipwalton / gist:8402139
Last active Jan 3, 2016
Async events handling strategies
View gist:8402139
// host library code
program()
.initStuff()
.then(function() {
dispatcher.emit('beforeRenderPost')
})
.then(function() {
dispatcher.emit('afterRenderPost')
})
.then(function() {