Instantly share code, notes, and snippets.

View 01_DropZone.jsx
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
const ANIMATION_DURATION = 1000;
class BatchDropZone extends React.Component {
static propTypes = {
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 gulpfile.babel.js
/*
* Steps
* 1. Rename your gulpfile.js to gulpfile.babel.js
* 2. Add babel to your package.json (npm install -D babel)
* 3. Start writing ES6 in your gulpfile!
*/
import gulp from 'gulp'; // ES6 imports!
import sass from 'gulp-sass';
View rant.js
// <rant> to actual rant
// (requires modern browsers)
var rants = document.getElementsByTagName('rant');
for (i=0;i<rants.length;i++) {
var rant = new SpeechSynthesisUtterance(rants[i].innerHTML);
window.speechSynthesis.speak(rant);
}
View Gruntfile.js
// requires
/*
* https://github.com/filamentgroup/grunticon
* https://www.npmjs.org/package/grunt-text-replace
*/
'use strict';
module.exports = function (grunt) {
View _html_entities.scss
/**
* The pseudo-element 'content' property doesnt accept normal (&raquo;) style
* HTML entities. These variables below easy the pain of looking up the HEX codes...
*
* Referenced from http://www.danshort.com/HTMLentities/
*
* TODO: Add all the other entities? Worth it? Some day? Maybe?
*/
// Punctuation
View post-merge
#!/usr/bin/env bash
# MIT © Sindre Sorhus - sindresorhus.com
# git hook to run a command after `git pull` if a specified file was changed
# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.
changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
check_run() {
echo "$changed_files" | grep --quiet "$1" && eval "$2"
View random.js
/**
* Get a random floating point number between `min` and `max`.
*
* @param {number} min - min number
* @param {number} max - max number
* @return {number} a random floating point number
*/
function getRandomFloat(min, max) {
return Math.random() * (max - min) + min;
}
View concat.js
module.exports = {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
}
View jquery-test.js
/* REQUIRES http://modernizr.com/download/#-addtest-json-script_defer-load */
(function(window, document, Modernizr, undefined) {
'use strict';
Modernizr.addTest('jQueryVersion', function() {
return (
Modernizr.json &&
Modernizr.scriptdefer &&