| import React from 'react'; | |
| import PropTypes from 'prop-types'; | |
| import classNames from 'classnames'; | |
| const ANIMATION_DURATION = 1000; | |
| class BatchDropZone extends React.Component { | |
| static propTypes = { |
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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| /* | |
| * 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'; | |
| // <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); | |
| } |
| // requires | |
| /* | |
| * https://github.com/filamentgroup/grunticon | |
| * https://www.npmjs.org/package/grunt-text-replace | |
| */ | |
| 'use strict'; | |
| module.exports = function (grunt) { |
| /** | |
| * The pseudo-element 'content' property doesnt accept normal (») 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 |
| #!/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" |
| /** | |
| * 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; | |
| } |
| module.exports = { | |
| options: { | |
| separator: ';' | |
| }, | |
| dist: { | |
| src: ['src/**/*.js'], | |
| dest: 'dist/<%= pkg.name %>.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 && |
