Skip to content

Instantly share code, notes, and snippets.

View addyosmani's full-sized avatar
🎯
Focusing

Addy Osmani addyosmani

🎯
Focusing
42.4k followers · 264 following
View GitHub Profile
@ebidel
ebidel / polymer-perf-bookmarklet.js
Last active May 1, 2021 15:42
Polymer performance numbers bookmarklet
javascript:(function(){(function printStats(){var loadTimes=window.chrome.loadTimes();firstPaint=loadTimes.firstPaintTime*1000;firstPaintTime=firstPaint-(loadTimes.startLoadTime*1000);console.info('First paint took',firstPaintTime,'ms');console.info('Load took',performance.timing.loadEventStart-performance.timing.navigationStart,'ms');var instances=0;if(parseFloat(Polymer.version)<1){instances=[].slice.call(document.querySelectorAll('html /deep/ *')).filter(function(el){return el.localName.indexOf('-')!=-1||el.getAttribute('is');}).length;}else{instances=Polymer.telemetry.instanceCount;}console.info('Custom element instances:',instances);var reflectCount=0;if(Polymer.telemetry){console.info('=== Properties set to reflectToAttribute ===');Polymer.telemetry.registrations.forEach(function(el){for(var prop in el.properties){if(el.properties[prop].reflectToAttribute){console.log(el.is+'.'+prop);reflectCount++;}}});}else{console.info('=== Properties set to reflect ===');Polymer.elements.forEach(function(el){for(var
@developit
developit / *polkompress.md
Last active April 13, 2021 22:50
polkompress

Polkompress

A tiny zero-dependency compression middleware for polka (& express!) with native Brotli support.

@cowboy
cowboy / jquery-cdn-fallback.html
Created February 1, 2011 00:22
Google CDN -> jQuery CDN fallback
<!--
See JSFiddle:
http://jsfiddle.net/cowboy/6asBw/
-->
<!-- unminified -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
@fletcherist
fletcherist / CpuMeter.js
Created October 11, 2017 15:13
CPU Metrics for Chrome Extensions
((name, context = window, func) => { context[name] = func() })
('CpuMeter', this, () => {
const isEmptyObject = object => Object.keys(object).length === 0
const getProcessorUsage = (usage, oldUsage) =>
Math.floor((usage.kernel + usage.user - oldUsage.kernel - oldUsage.user) / (usage.total - oldUsage.total) * 100)
class CpuMeter {
constructor() {
if (!chrome || !chrome.system || !chrome.system.cpu) {
throw new Error(`No access to chrome.system.cpu!
@rmurphey
rmurphey / gist:846908
Created February 28, 2011 03:47
examples of testing with jasmine
function multiply(a, b) {
return a * b;
}
function divide(a, b) {
if (b === 0) {
throw "Don't try to divide by zero!";
}
return Math.round(a / b);
@martinschierle
martinschierle / cwv_crawler.js
Last active August 3, 2020 12:39
Small puppeteer script to run over a domain, crawl random urls, capture screenshots with lcp and cls elems highlighted, and also writing out a heatmap of lcp and cls bounding boxes across all crawled pages.
const puppeteer = require('puppeteer');
const { createCanvas, loadImage } = require('canvas')
const mustache = require('mustache')
var fs = require('fs');
const fsExtra = require('fs-extra')
let MAX_URLS = 50;
let TEMPLATE = fs.readFileSync('template.html', 'utf8');
@Integralist
Integralist / Description.md
Last active April 25, 2020 16:20
This is how BBC News currently implements it's Image Enhancer for responsive images. Note: this is a completely rebuilt version of the code so the BBC's original source code doesn't actually look anything like the below example.

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

  • Create new instance of ImageEnhancer
  • Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
    • We set the width & height HTML attributes of the image to the required size
    • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
    • We then set a class of image-replace onto each newly created transparent image
  • We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe
@krisselden
krisselden / index.js
Created April 3, 2017 22:02
Chrome Code Coverage Automation
import * as fs from "fs";
import { createSession } from "chrome-debugging-client";
createSession(async (session) => {
let browser = await session.spawnBrowser("canary");
let api = await session.createAPIClient("localhost", browser.remoteDebuggingPort);
let tabs = await api.listTabs();
let tab = tabs[0];
let client = await session.openDebuggingProtocol(tab.webSocketDebuggerUrl);
await client.send("Profiler.enable");
@NV
NV / clone_object_with_circular_references.js
Created November 26, 2011 18:22
Clone an Object with all its circular references. Take that jQuery.extend!
function cloneObject(object) {
return extendObject({}, object);
}
function extendObject(base, object) {
var visited = [object];
// http://en.wikipedia.org/wiki/Adjacency_list_model
var set = [{value: base}];
@getify
getify / index.html
Created November 23, 2011 18:17
showing how i use $LAB in my pages -- aka, best-practice recommendation
<!DOCTYPE html>
<html>
<head>...</head>
<body>
...
<script src="load.js"></script>
</body>
</html>