Skip to content

Instantly share code, notes, and snippets.

View Bamieh's full-sized avatar

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
ebidel / wcr_lazyload.html
Created January 21, 2016 18:56
How to use the WebComponentsReady when lazy loading the webcomponents.js polyfills (http://jsbin.com/dihasa/edit?html,output)
<!doctype html>
<html>
<head>
<base href="https://polygit.org/components/">
<!-- <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">
</head>
<body>
@wuct
wuct / AuthorizationHOC.js
Created December 22, 2015 06:22
An authorization high-order-component using recompose, redux and react-router.
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
paulirish / what-forces-layout.md
Last active March 29, 2024 13:42
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
ebidel / app.html
Last active May 1, 2021 15:42
Fast Polymer app loading (Promises version) - optimized for first render, progressively enhanced lazy loading
<!DOCTYPE html>
<html>
<head>
<style>
body.loading #splash {
opacity: 1;
}
#splash {
position: absolute;
top: 0;
var Bar1 = base => class extends base {
componentWillMount(){
super.componentWillMount();
console.log('Bar1');
}
};
var Bar2 = base => class extends base {
componentWillMount(){
super.componentWillMount();
@pgilad
pgilad / Instructions.md
Last active August 17, 2023 19:20
Git commit-msg hook to validate for jira issue or the word merge

Instructions

  • 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
soheilhy / nginxproxy.md
Last active March 22, 2024 08:54
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 example1.com, example2.com, and example1.com/images on the same machine using a single IP address.

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

@mikaelbr
mikaelbr / destructuring.js
Last active February 21, 2024 20:41
Complete collection of JavaScript destructuring. Runnable demos and slides about the same topic: http://git.mikaelb.net/presentations/bartjs/destructuring
// === Arrays
var [a, b] = [1, 2];
console.log(a, b);
//=> 1 2
// Use from functions, only select from pattern
var foo = () => [1, 2, 3];