monjer monjer

Webpack & Tailwind CSS Setup

Create your package.json

npm init -y

Create your src folder

Create a folder called src and add an empty index.js file. The code that webpack compiles goes in here including any Javascript modules and the main Tailwind file.

ANSI Escape Sequences

Standard escape codes are prefixed with Escape:

Ctrl-Key: ^[
Octal: \033
Unicode: \u001b
Hexadecimal: \x1B
Decimal: 27

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

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

	"use strict";

	[foo,bar] = TNG(foo,bar);
	// NOTE: intentionally not TNG(..) wrapping useBaz(), so that it's
	// basically like a "custom hook" that can be called only from other
	// TNG-wrapped functions

	function foo(origX,origY) {
	var [x,setX] = useState(origX);
	var [y,setY] = useState(origY);

	/**
	* Check if an element is truncated.
	*
	* CSS to be used:
	* .truncate {
	* width: 250px;
	* white-space: nowrap;
	* overflow: hidden;
	* text-overflow: ellipsis;
	* }

	Video Tutorial:
	https://egghead.io/series/getting-started-with-redux

	Lesson 05:
	Redux: Writing a Counter Reducer with Tests
	http://jsbin.com/piqapi/edit?js,console

	Lesson 06:
	Redux: Store Methods: getState(), dispatch(), and subscribe()
	http://jsbin.com/jadunek/edit?js,console

	// Update: Hey Folks - I've got a full Gulpfile with everything else over at https://github.com/wesbos/React-For-Beginners-Starter-Files

	var source = require('vinyl-source-stream');
	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var browserify = require('browserify');
	var reactify = require('reactify');
	var babelify = require('babelify');
	var watchify = require('watchify');
	var notify = require('gulp-notify');

	/**
	* This gulpfile will copy static libraries and a index.html file as well as
	* merge, babelify and uglify the rest of the javascript project.
	*
	* TODO:
	* - Separate media, libs and src with different watchers.
	* - Media and libs should only be copied to dist if they are different sizes.
	*
	* The expected project is to be laid out as such:
	*

	var gulp = require('gulp')

	var browserify = require('browserify')
	var watchify = require('watchify')
	var babelify = require('babelify')

	var source = require('vinyl-source-stream')
	var buffer = require('vinyl-buffer')
	var merge = require('utils-merge')