Skip to content

Instantly share code, notes, and snippets.

View connorjclark's full-sized avatar

Connor Clark connorjclark

View GitHub Profile
Match author styles (not UA or user styles) for an element: https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/css/resolver/style_resolver.cc;l=681;drc=28442cacc3be1a7d05a898aba663025a143095ac?originalUrl=https:%2F%2Fcs.chromium.org%2F
... 2 call stack frames away from ...
Collect the rules for an element: https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/css/element_rule_collector.cc;drc=28442cacc3be1a7d05a898aba663025a143095ac;bpv=0;bpt=1;l=207?originalUrl=https:%2F%2Fcs.chromium.org%2F
... which calls this a few times for different matching scenarios ...
Collect matching rules: https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/css/element_rule_collector.cc;l=133;drc=28442cacc3be1a7d05a898aba663025a143095ac?originalUrl=https:%2F%2Fcs.chromium.org%2F
@connorjclark
connorjclark / 5.6.0-6.0v1.json
Last active April 28, 2020 23:20
11ty Lighthouse 5.6 -> 6.0 Scoring
[
{
"name": "performance",
"url": "https://www.teami.io/",
"mean": "13.2 -> 35.4",
"mean Δ": 22.2
},
{
"name": "performance",
"url": "https://tto.koser.us/",
@connorjclark
connorjclark / README.md
Last active April 4, 2025 13:20
Direct Audit

Direct Audit

This recipe is for advanced usages of Lighthouse as a Node library.

Normally, Lighthouse runs Chrome and generates a set of artifacts to use as input to many core modules (such as audits or computed artifacts). You can use these modules directly, but you must provide the inputs yourself.

@connorjclark
connorjclark / readme.md
Last active November 21, 2019 17:50
How Lighthouse builds for DevTools

Rolling

yarn build-devtools && yarn devtools

How Lighthouse builds for DevTools

yarn build-devtools creates these files:

dist
@connorjclark
connorjclark / gist:cc583554ff07cba7cdc416c06721fd6a
Last active November 1, 2019 19:40
detecting core-js polyfills

Context: https://github.com/GoogleChrome/lighthouse/pull/6730/files#diff-4f9810692cc44a0098f356a1dc35cca3R133

Oh boy :) cracks knuckles tl;dr no, also I overlooked so much, thanks for pointing this out.

The minified JS I linked to is every polyfill that @babel/present-env would provide. The recommended distribution of these polyfills is not the module I linked (@babel/polyfill), but instead via @babel/preset-env. Regardless, they both use the polyfills as defined by core-js. You can see that the polyfills module has a standard bundling and minifying script: https://github.com/babel/babel/blob/fced5cea430cc00e916876b663a8d2a84a5dad1f/packages/babel-polyfill/scripts/build-dist.sh, which is what I linked to before. The question is: does the pattern I'm looking for hold for these core-js polyfills regardless of the minifier used? Additionally: where does this pattern come from? I'll focus on that first.

To further complicate, there's core-js@2 and core-js@3, and both seem to be used (or at leas

// fyi a 'plugin' is basically just a transform. idk if polyfils are considered plugins but for the purposes here say they aren't.
// https://github.com/babel/babel/blob/d919ecd254fd3a10997ab4801f11c412b2dd2152/packages/babel-preset-env/data/plugins.json
const pluginData = {"transform-template-literals":{"chrome":"41","edge":"13","firefox":"34","node":"4","samsung":"3.4","opera":"28","electron":"0.24"},"transform-literals":{"chrome":"44","edge":"12","firefox":"53","safari":"9","node":"4","ios":"9","samsung":"4","opera":"31","electron":"0.31"},"transform-function-name":{"chrome":"51","firefox":"53","safari":"10","node":"6.5","ios":"10","samsung":"5","opera":"38","electron":"1.2"},"transform-arrow-functions":{"chrome":"47","edge":"13","firefox":"45","safari":"10","node":"6","ios":"10","samsung":"5","opera":"34","electron":"0.36"},"transform-block-scoped-functions":{"chrome":"41","edge":"12","firefox":"46","safari":"10","node":"4","ie":"11","ios":"10","samsung":"3.4","opera":"28","electron":"0.24"},"transform-c
/(^
| |
)|(Array\.?from\s*=|Array\[['"]from['"]\]\s*=|defineProperty\(Array,\s*['"]from['"]|;e\([^,]*,['"]Array['"],{from)|(Array\.?isArray\s*=|Array\[['"]isArray['"]\]\s*=|defineProperty\(Array,\s*['"]isArray['"]|;e\([^,]*,['"]Array['"],{isArray)|(Array\.?of\s*=|Array\[['"]of['"]\]\s*=|defineProperty\(Array,\s*['"]of['"]|;e\([^,]*,['"]Array['"],{of)|(Array.prototype\.?copyWithin\s*=|Array.prototype\[['"]copyWithin['"]\]\s*=|defineProperty\(Array.prototype,\s*['"]copyWithin['"]|;e\([^,]*,['"]Array['"],{copyWithin)|(Array.prototype\.?fill\s*=|Array.prototype\[['"]fill['"]\]\s*=|defineProperty\(Array.prototype,\s*['"]fill['"]|;e\([^,]*,['"]Array['"],{fill)|(Array.prototype\.?filter\s*=|Array.prototype\[['"]filter['"]\]\s*=|defineProperty\(Array.prototype,\s*['"]filter['"]|;e\([^,]*,['"]Array['"],{filter)|(Array.prototype\.?find\s*=|Array.prototype\[['"]find['"]\]\s*=|defineProperty\(Array.prototype,\s*['"]find['"]|;e\([^,]*,['"]Array['"],{find)|(Array.prototype\.?findIndex\s*=|Array.prototype\[['"]findInd
@connorjclark
connorjclark / calc.js
Created August 15, 2017 19:39
cookie clicker grimoire estimation
var fps = 30;
function calcMagicPerSecond(current, maxMagic) {
return Math.max(0.002,Math.pow(current/Math.max(maxMagic,100),0.5))*0.002*fps;
}
/*
let z = Math.max(maxMagic, 100)
@connorjclark
connorjclark / readme.md
Created April 25, 2017 18:19
req.baseUrl

Question came up during the homework review for express-blogpulse: how to redirect a route relative to the Router being used? Example, on POST /post, how can we best redirect to GET /post/:id for the newly created post?

Answer: use req.baseUrl. click for docs: http://expressjs.com/en/4x/api.html#req.baseUrl.

Something like req.redirect(req.baseUrl + "/" + post.id)

req.baseUrl would be equal to /post in this case, because of the line app.use("/post", require("controllers/post.js"))

def play
cards = (-10..10).to_a - [0]
sum = 0
begin
sum += cards.delete_at(rand(cards.length))
end while sum != 0
20 - cards.length
end
num_trials = 100000