Skip to content

Instantly share code, notes, and snippets.


Ahmad Bamieh Bamieh

View GitHub Profile

Important: At the time of writing (2019-11-11) Immutable.js is effectively abandonware, so I can no longer recommend anyone to follow the advice given here. I'll leave the article here for posterity, since it's still getting some traffic.

Understanding Immutable.Record

Functional programming principles and with it immutable data are changing the way we write frontend applications. If the recent de-facto frontend stack of React and Redux feels like it goes perfectly together with immutable data, that's because it's specifically designed for that.

There's several interesting implementations of immutable data for JavaScript, but here I'll be focusing on Facebook's own Immutable.js, and specifically on one of i

ebidel / wcr_lazyload.html
Created Jan 21, 2016
How to use the WebComponentsReady when lazy loading the webcomponents.js polyfills (,output)
View wcr_lazyload.html
<!doctype html>
<base href="">
<!-- <script src="webcomponentsjs/webcomponents-lite.min.js"></script> -->
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-button/paper-button.html">
wuct / AuthorizationHOC.js
Created Dec 22, 2015
An authorization high-order-component using recompose, redux and react-router.
View AuthorizationHOC.js
import { emptyObject } from 'fbjs/lib/emptyObject';
import { connect } from 'react-redux';
import { pushState } from 'redux-router';
import pure from 'recompose/pure';
import defaultProps from 'recompose/defaultProps';
import doOnReceiveProps from 'recompose/doOnReceiveProps';
import renderNothing from 'recompose/renderNothing';
import renderComponent from 'recompose/renderComponent';
import branch from 'recompose/branch';
import compose from 'recompose/compose';
paulirish /
Last active Aug 7, 2022
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
ebidel / app.html
Last active May 1, 2021
Fast Polymer app loading (Promises version) - optimized for first render, progressively enhanced lazy loading
View app.html
<!DOCTYPE html>
body.loading #splash {
opacity: 1;
#splash {
position: absolute;
top: 0;
View es6mixin.js
var Bar1 = base => class extends base {
var Bar2 = base => class extends base {
pgilad /
Last active Jul 3, 2022
Git commit-msg hook to validate for jira issue or the word merge


  • copy the file commit-msg to .git/hooks/commit-msg
  • make sure your delete the sample file .git/hooks/commit-msg.sample
  • Make commit msg executable. chmod +x .git/hooks/commit-msg
  • Edit commit-msg to better fit your development branch, commit regex and error message
  • Profit $$

Shell example

soheilhy /
Last active Aug 6, 2022
How to proxy web apps using nginx?

Virtual Hosts on nginx (CSC309)

When hosting our web applications, we often have one public IP address (i.e., an IP address visible to the outside world) using which we want to host multiple web apps. For example, one may wants to host three different web apps respectively for,, and on the same machine using a single IP address.

How can we do that? Well, the good news is Internet browsers

mikaelbr / destructuring.js
Last active Jul 15, 2022
Complete collection of JavaScript destructuring. Runnable demos and slides about the same topic:
View destructuring.js
// === Arrays
var [a, b] = [1, 2];
console.log(a, b);
//=> 1 2
// Use from functions, only select from pattern
var foo = () => [1, 2, 3];