Skip to content

Instantly share code, notes, and snippets.

View jpnelson's full-sized avatar
🦆
I'm a duck

Joshua Nelson jpnelson

🦆
I'm a duck
View GitHub Profile
​​let lastHeroElement;
// Simplified version of our TTFMP instrumentation
function recursiveCheckForFirstMeaningfulPaint() {
const heroElement = document.getElementById("FMP-target");
// To prevent against false positives during client-side route requests
const isSameHeroElement = lastHeroElement === heroElement;
const isImageHeroLoading =
heroElement.tagName === "IMG" && !heroElement.complete;
// Simplified version of our FCP polyfill for client transitions
function onClientTransition() {
requestAnimationFrame(() => {
performance.measure('TTFCP');
});
}
// An alternative fallback from https://docs.sentry.io/clients/node/integrations/express/#express
var app = require('express')();
var Raven = require('raven');
// Must configure Raven before doing anything else with it
Raven.config('__DSN__').install();
// The request handler must be the first middleware on the app
app.use(Raven.requestHandler());
@jpnelson
jpnelson / styled-component-displayname-transform.js
Last active April 9, 2017 23:33
Styled components – add a displayName
const path = require('path');
function basename(str) {
var base = new String(str).substring(str.lastIndexOf('/') + 1);
if(base.lastIndexOf(".") != -1)
base = base.substring(0, base.lastIndexOf("."));
return base;
}
module.exports = function (fileInfo, api) {
@jpnelson
jpnelson / akutil-polyfills
Created July 26, 2016 04:40
For sandboxes like codepen. {"es6-map": "^0.1.4", "skatejs-named-slots": "^0.2.10", "webcomponents.js": "webcomponents/webcomponentsjs#b77ca74"}
!function(root, factory) {
"object" == typeof exports && "object" == typeof module ? module.exports = factory(require("d"), require("event-emitter"), require("es6-symbol"), require("es6-iterator")) : "function" == typeof define && define.amd ? define([ "d", "event-emitter", "es6-symbol", "es6-iterator" ], factory) : "object" == typeof exports ? exports.akutilPolyfills = factory(require("d"), require("event-emitter"), require("es6-symbol"), require("es6-iterator")) : root.akutilPolyfills = factory(root.d, root["event-emitter"], root["es6-symbol"], root["es6-iterator"]);
}(this, function(__WEBPACK_EXTERNAL_MODULE_19__, __WEBPACK_EXTERNAL_MODULE_20__, __WEBPACK_EXTERNAL_MODULE_21__, __WEBPACK_EXTERNAL_MODULE_46__) {
/******/
return function(modules) {
/******/
/******/
// The require function
/******/
function __webpack_require__(moduleId) {
@jpnelson
jpnelson / split.css
Last active June 14, 2022 16:51
Responsive, resizable panel layout with flexbox
.container {
height: 500px;
border: 2px solid grey;
position:relative;
}
.split {
display: flex;
height: 100%;
border: 1px solid black;