Bùi Xuân Hải buixuanhai

Prereq:

apt-get install zsh
apt-get install git-core

Getting zsh to work in ubuntu is weird, since sh does not understand the source command. So, you do this to install zsh

wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | zsh

VIM KEYBOARD SHORTCUTS

MOVEMENT

h        -   Move left
j        -   Move down
k        -   Move up
l        -   Move right
$        -   Move to end of line
0        -   Move to beginning of line (including whitespace)

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

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

How To Use React-Intl: internationalize your React app

This short tutorial assumes you know about ES6 syntax.

Get started

yarn add react-intl or npm i --save react-intl.

Create a messages file

This file should contain every message for your app.
It has an object of (locale, messages) couples:

Eric Elliott's "Composing Software" Series

A collection of links to the excellent "Composing Software" series of medium stories by Eric Elliott.

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

This will log the currently active element as it changes. Really great for accessibility testing when you're trying to figure out what element has focus (so you can either prevent it from getting focus or make the fact that it has focus more visually obvious for example).

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	// handy method to create a Higher Order Component out of a
	// Render Prop Component (like a Context.Consumer).
	// handles, statics, displayName, refs, and value forwarding

	function createHOCFromRenderProp({prop, Consumer}) {
	return Component => {
	function Wrapper(props, ref) {
	return (
	<Consumer>
	{value => <Component {...{...props, [prop]: value, ref}} />}