bradtraversy

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.

fnky

ANSI Escape Sequences

Standard escape codes are prefixed with Escape:

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

getify

"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);

mttmzr

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

mxstbr

Enable tab completion for JSX with Emmet in Atom

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

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

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

justin3737

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

paulirish

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

wesbos

// 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');

Falconerd

/**
 * 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:
 *

Fishrock123

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')