Skip to content

Instantly share code, notes, and snippets.

View eiriklv's full-sized avatar

Eirik L. Vullum eiriklv

342 followers · 345 following
View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
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
@aulizko
aulizko / server.es6.js
Last active September 8, 2015 08:21
SSR with react-router@1.0.0-beta4
// That variant actually works with 1.0.0-beta4
// Link to the previous (1.0.0-beta3) version:
// https://github.com/cdebotton/react-universal/blob/master/src/server.js#L49
import createLocation from 'history/lib/createLocation';
import createHistory from 'history/lib/createMemoryHistory';
import ReactDOM from 'react-dom/server';
import {Router} from 'react-router';
import Layout from './views/Layout';
import Application from './containers/Application';
@paulirish
paulirish / how-to-view-source-of-chrome-extension.md
Last active April 25, 2024 04:16
How to view-source of a Chrome extension

Option 1: Command-line download extension as zip and extract

extension_id=jifpbeccnghkjeaalbbjmodiffmgedin   # change this ID
curl -L -o "$extension_id.zip" "https://clients2.google.com/service/update2/crx?response=redirect&os=mac&arch=x86-64&nacl_arch=x86-64&prod=chromecrx&prodchannel=stable&prodversion=44.0.2403.130&x=id%3D$extension_id%26uc" 
unzip -d "$extension_id-source" "$extension_id.zip"

Thx to crxviewer for the magic download URL.

@HenrikJoreteg
HenrikJoreteg / README.md
Last active September 20, 2021 01:36
Minimalist routing in Redux

Why would you want to do this? Because you often don't need more. It's nice to not have to think about your "router" as this big special thing.

Instead, with this approch, your app's current pathname is just another piece of state, just like anything else.

This also means that when doing server-side rendering of a redux app, you can just do:

var app = require('your/redux/app')
var React = require('react')
@geowarin
geowarin / index-template.html
Created August 5, 2015 14:33
Template index for the html-webpack-plugin and react
<!DOCTYPE html>
<html{% if(o.htmlWebpackPlugin.files.manifest) { %} manifest="{%= o.htmlWebpackPlugin.files.manifest %}"{% } %}>
<head>
<meta charset="UTF-8">
<title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
{% if (o.htmlWebpackPlugin.files.favicon) { %}
<link rel="shortcut icon" href="{%=o.htmlWebpackPlugin.files.favicon%}">
{% } %}
{% for (var css in o.htmlWebpackPlugin.files.css) { %}
<link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
@donspaulding
donspaulding / pooFlinger.js
Created July 13, 2015 21:32
Continually fling poo at someone...
'use strict';
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
function flingPoo(){
res.write("&#x1f4a9;");
setTimeout(flingPoo, 1000);
}
flingPoo();
@samccone
samccone / gist:3a266295cde754511988
Last active May 23, 2016 15:19
Perf Wins
anonymous
anonymous / blockerList.json
Created June 25, 2015 00:05
Testing Safari Content Blocker on iMore.com
[
{
"action": {
"type": "block"
},
"trigger": {
"url-filter": ".*",
"resource-type": ["script"],
"load-type": ["third-party"],
"if-domain": ["imore.com"]
@clementgenzmer
clementgenzmer / FBAnimationPerformanceTracker.h
Last active September 18, 2023 23:02
FBAnimationPerformanceTracker
/*
* This is an example provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
@ohanhi
ohanhi / frp.md
Last active December 23, 2022 13:06
Learning FP the hard way: Experiences on the Elm language

Learning FP the hard way: Experiences on the Elm language

by Ossi Hanhinen, @ohanhi

with the support of Futurice 💚.

Licensed under CC BY 4.0.

Editorial note