Skip to content

Instantly share code, notes, and snippets.

Avatar

Paul Irish paulirish

View GitHub Profile
@alekseykulikov
alekseykulikov / psi-extra-features.md
Last active Jul 30, 2020
Extra features of PageSpeed Insights API
View psi-extra-features.md

In this article, I would like to share three features of PageSpeed Insights (PSI), that is not easy to find in the official documentation. I discovered them while hacking on the Lighthouse plugin and integrating PSI to Treo.sh.

For a context, PSI is a simple yet powerful API by Google, that audits your page using Lighthouse and provides real-world users' data from Chrome UX Report (CrUX).

1. Audit many categories with one request

By default, PSI API returns only performance category. It's possible to pass ?category argument multiple times and get a report with many Lighthouse categories using one request (available categories: performance, accessibility, best-practices, seo, pwa).

curl -i "https://www.googleapis.com/pagespe
@majido
majido / jank-bookmarklet.js
Last active Aug 28, 2018
A bookmarklet to add custom amount of jank to main thread. Crafted for those who 💜 jank!
View jank-bookmarklet.js
javascript:(function(){
var meter = `
<label style="position:fixed; z-index:10000; top: 0; left: 50%; transform: translateX(-50%); background-color: pink; padding: 5px;">
Main thread jank (0-500ms): <input id="jankmeter" type="range" min=0 max=500 value=50>
</label>
`;
const d = document.createElement('jank');
d.innerHTML = meter;
document.body.appendChild(d);
@jkrems
jkrems / es-module-history.md
Last active Jan 23, 2021
History of ES modules
@paulirish
paulirish / install_mosh_locally.sh
Last active Jul 22, 2019 — forked from xiaom/install_mosh_locally.sh
install mosh locally (updated june 2017)
View install_mosh_locally.sh
#!/bin/bash
# 2017-06 (paulirish): updated for latest sources
# and incorporated fixes from my comments here: https://gist.github.com/xiaom/8264691#gistcomment-1648455
# 2015-ish (zmil): this script does absolutely ZERO error checking. however, it worked
# for me on a RHEL 6.3 machine on 2012-08-08. clearly, the version numbers
# and/or URLs should be made variables. cheers, zmil...@cs.wisc.edu
set -x
@bdd
bdd / quickfiles
Last active Feb 7, 2020
FZF_DEFAULT_COMMAND utility for fzf
View quickfiles
#!/bin/bash
# FZF_DEFAULT_COMMAND utility for fzf
#
# Tries to use Watchman, Ripgrep (rg), The Silver Searcher (ag) in this order.
# ...or falls back the fzf's Unix default.
#
# TODO:
# - Use 'git ls-files -cmod' in Git repositories
View redux_egghead_notes.md

###Redux Egghead Video Notes###

####Introduction:#### Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently.

Redux is an evolution of the ideas presented by Facebook's Flux, avoiding the complexity found in Flux by looking to how applications are built with the Elm language.

####1st principle of Redux:#### Everything that changes in your application including the data and ui options is contained in a single object called the state tree

@maxogden
maxogden / readme.md
Last active Jan 7, 2021
Video stabilization using VidStab and FFMPEG (Mac OS X)
View readme.md

Video stabilization using VidStab and FFMPEG

Examples here use the default settings, see the VidStab readme on GitHub for more advanced instructions.

Here's an example video I made

Install ffmpeg with the vidstab plugin from homebrew

brew install ffmpeg --with-libvidstab
@PaulKinlan
PaulKinlan / getdeviceart.sh
Last active Nov 22, 2020
Screen Record for Android
View getdeviceart.sh
#! /bin/bash
mkdir -p ./backgrounds
function get_google_device_art {
local device=$1
# Get the Google Device backgrounds
curl "https://developer.android.com/distribute/marketing-tools/device-art-resources/$1/port_back.png" > "./backgrounds/$1_port_back.png"
curl "https://developer.android.com/distribute/marketing-tools/device-art-resources/$1/port_fore.png" > "./backgrounds/$1_port_fore.png"
@paulirish
paulirish / what-forces-layout.md
Last active Jan 26, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@MSEdge
MSEdge / IE-Edge-diff.idl
Last active Mar 7, 2019
Proprietary / Non-Inteoperable IE APIs no longer in Microsoft Edge
View IE-Edge-diff.idl
interface AesGcmEncryptResult {
readonly attribute ArrayBuffer ciphertext;
readonly attribute ArrayBuffer tag;
};
interface BookmarkCollection {
readonly attribute long length;
any item(unsigned long index);