Skip to content

Instantly share code, notes, and snippets.

Avatar

Ahmad Bamieh Bamieh

View GitHub Profile
View understanding-immutable-record.md

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 Jan 21, 2016
How to use the WebComponentsReady when lazy loading the webcomponents.js polyfills (http://jsbin.com/dihasa/edit?html,output)
View wcr_lazyload.html
<!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 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
paulirish / what-forces-layout.md
Last active Aug 7, 2022
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
Fast Polymer app loading (Promises version) - optimized for first render, progressively enhanced lazy loading
View app.html
<!DOCTYPE html>
<html>
<head>
<style>
body.loading #splash {
opacity: 1;
}
#splash {
position: absolute;
top: 0;
View es6mixin.js
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 Jul 3, 2022
Git commit-msg hook to validate for jira issue or the word merge
View Instructions.md

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 Aug 6, 2022
How to proxy web apps using nginx?
View nginxproxy.md

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 Jul 15, 2022
Complete collection of JavaScript destructuring. Runnable demos and slides about the same topic: http://git.mikaelb.net/presentations/bartjs/destructuring
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];