Skip to content

Instantly share code, notes, and snippets.

Antoine Lehurt kewah

Block or report user

Report or block kewah

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@elsassph
elsassph / 0-readme.md
Last active Aug 30, 2016
Nginx single-page app local dev server config
View 0-readme.md

Easy single-page app dev using nginx

If you're using only nginx (no Apache thx) and want to serve your projects using a local dev domain.

Install nginx

brew install nginx

Or download/unzip for Win: http://nginx.org/en/docs/windows.html

View provideContext.js
import React from 'react'
const provideContext = (contextKey, contextType) => (
React.createClass({
childContextTypes: {
[contextKey]: contextType
},
getChildContext() {
const { children, ...props } = this.props
@mattdesl
mattdesl / about.md
Last active Aug 9, 2019
fast & optimized browserify builds
View about.md

Small script for development + builds with browserify.

Uses loose-envify for faster inlining and cross-env to handle windows/unix shells.

Dev features:

  • fast rebuilds w/ watchify, LiveReload, syntax errors in DOM, etc.

Build features:

  • uglify, simple dead code elimination, optimized bundle.
@paulirish
paulirish / what-forces-layout.md
Last active Dec 11, 2019
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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
View on-jsx.markdown

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

View Makefile
# Hello, and welcome to makefile basics.
#
# You will learn why `make` is so great, and why, despite its "weird" syntax,
# it is actually a highly expressive, efficient, and powerful way to build
# programs.
#
# Once you're done here, go to
# http://www.gnu.org/software/make/manual/make.html
# to learn SOOOO much more.
@bendc
bendc / functional-utils.js
Last active Dec 1, 2019
A set of pure ES2015 functions aimed to make functional JavaScript more idiomatic.
View functional-utils.js
// array utils
// =================================================================================================
const combine = (...arrays) => [].concat(...arrays);
const compact = arr => arr.filter(Boolean);
const contains = (() => Array.prototype.includes
? (arr, value) => arr.includes(value)
: (arr, value) => arr.some(el => el === value)
View browserify_for_webpack_users.markdown

browserify for webpack users

There's been a strange explosion in misinformation about browserify recently, particularly in comparisons to webpack.

Generally speaking, most of this confusion stems from how webpack is more willing to pull features into its core to ease discoverability while browserify is more likely to push features out to userland instead.

I think that longer-term, separability has more benefits from a maintenance and

@mattdesl
mattdesl / fancy.frag
Last active Sep 2, 2019
how we're currently using glslify + ThreeJS
View fancy.frag
varying vec2 vUv;
uniform sampler2D tDiffuse;
uniform sampler2D tColorLUT;
uniform vec2 resolution;
#pragma glslify: blendOverlay = require(./glsl-blend-overlay)
#pragma glslify: displace = require(./glsl-displace)
#pragma glslify: srcOver = require(./glsl-src-over)
#pragma glslify: colorCorrect = require(glsl-lut/flipY)
View flux.md

Basically Flux

While trying to explain Flux to a friend using words, I realized that a diagram's worth a thousand of them, and went with this.

              +---------------------+               
              |                     |               
              |     Dispatcher      |               
          +-->|          +---------------+
          |   +----------|----------+    |          
You can’t perform that action at this time.