Skip to content

Instantly share code, notes, and snippets.

View vanderhoop's full-sized avatar

Travis Vander Hoop vanderhoop

View GitHub Profile
@noamr
noamr / whynp.js
Last active February 7, 2024 08:55
WhyNP: Analyze LoAFs & event timing entries to find cause of bad INP
(function() {
let pending_loaf_entries = [];
let pending_event_entries = [];
let timeout_handle = null;
const combined_map = new Map();
function print() {
const entries = [...combined_map.entries()].sort((a, b) => b.duration - a.duration);
console.log(entries.map(([loaf, event]) => {
let longest_script = null;
@noamr
noamr / whynp.js
Last active October 10, 2023 04:32
Diagnose INP issues by correlating event timing & long animation frames
(function init() {
function processAndFilterLoAFs(entries) {
function floorObject(o) {
return Object.fromEntries(Array.from(Object.entries(o)).map(([key, value]) => [key, typeof value === "number" ? Math.floor(value) :
value
]))
}
function processEntry(entry) {
const startTime = entry.startTime;
@sindresorhus
sindresorhus / esm-package.md
Last active May 23, 2024 02:45
Pure ESM package

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

  1. Use ESM yourself. (preferred)
    Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
  2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
  3. Stay on the existing version of the package until you can move to ESM.

Phoenix 1.4.x to 1.5.0 upgrade instructions

Phoenix 1.5 requires Elixir >= 1.7. Be sure your existing version is up to date by running elixir -v on the command line.

Install the new phx.new project generator

$ mix archive.uninstall phx_new
$ mix archive.install hex phx_new 1.5.0
@bvaughn
bvaughn / index.md
Last active May 4, 2024 11:25
How to use profiling in production mode for react-dom

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

@klaaspieter
klaaspieter / ASS.md
Created June 22, 2017 07:59 — forked from anonymous/ASS.md
Acronyms Seriously Suck - Elon Musk

From time to time, Musk will send out an e-mail to the entire company to enforce a new policy or let them know about something that's bothering him. One of the more famous e-mails arrived in May 2010 with the subject line: Acronyms Seriously Suck:

There is a creeping tendency to use made up acronyms at SpaceX. Excessive use of made up acronyms is a significant impediment to communication and keeping communication good as we grow is incredibly important. Individually, a few acronyms here and there may not seem so bad, but if a thousand people are making these up, over time the result will be a huge glossary that we have to issue to new employees. No one can actually remember all these acronyms and people don't want to seem dumb in a meeting, so they just sit there in ignorance. This is particularly tough on new employees.

That needs to stop immediately or I will take drastic action - I have given enough warning over the years. Unless an acronym is approved by me, it should not enter the SpaceX glossary.

@wesbos
wesbos / tab-trigger.js
Created November 16, 2015 19:33
How to properly get a TAB trigger working with Emmet inside of JSX
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
// put comma-separated syntax selectors for which
// you want to expandEmmet abbreviations into "operand" key
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context": [
{
@paulirish
paulirish / what-forces-layout.md
Last active May 23, 2024 14:12
What forces layout/reflow. The comprehensive list.

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
@omnibs
omnibs / phoenix showdown rackspace onmetal io.md
Last active January 25, 2023 18:33
Phoenix Showdown Comparative Benchmarks @ Rackspace

Comparative Benchmark Numbers @ Rackspace

I've taken the benchmarks from Matthew Rothenberg's phoenix-showdown, updated Phoenix to 0.13.1 and ran the tests on the most powerful machines available at Rackspace.

Results

Framework Throughput (req/s) Latency (ms) Consistency (σ ms)
@fijimunkii
fijimunkii / 3.2.14_kickhash_template.rb
Last active October 4, 2017 18:24
rails: 3.2.14 generator
# README
# pass in this file when creating a rails project
#
# for example:
# rails _3.2.14_ new awesome_app -T -d postgresql -m ~/.kickhash_template.rb
remove_file "README.rdoc"
create_file "README.md", "TODO"
gem_group :development, :test do