| #!/usr/bin/env ruby | |
| icon_list = "alligator, anteater, armadillo, auroch, axolotl, badger, bat, beaver, buffalo, camel, chameleon, cheetah, chipmunk, chinchilla, chupacabra, cormorant, coyote, crow, dingo, dinosaur, dolphin, duck, dragon, elephant, ferret, fox, frog, giraffe, gopher, grizzly, hedgehog, hippo, hyena, jackal, ibex, ifrit, iguana, koala, kraken, lemur, leopard, liger, llama, manatee, mink, monkey, narwhal, nyan cat, orangutan, otter, panda, penguin, platypus, python, pumpkin, quagga, rabbit, raccoon, rhino, sheep, shrew, skunk, slow loris, squirrel, turtle, walrus, wolf, wolverine, wombat" | |
| for icon in icon_list.split ', ' do | |
| element = icon.sub ' ', '' | |
| `curl https://ssl.gstatic.com/docs/common/profile/#{element}_lg.png -o icons/#{element}.png` | |
| end |
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
| { | |
| // The plugin looks for a .jsbeautifyrc file in the same directory as the | |
| // source file you're prettifying (or any directory above if it doesn't exist, | |
| // or in your home folder if everything else fails) and uses those options | |
| // along the default ones. | |
| // Details: https://github.com/victorporof/Sublime-HTMLPrettify#using-your-own-jsbeautifyrc-options | |
| // Documentation: https://github.com/einars/js-beautify/ | |
| "html": { | |
| "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "dust"], |
| function u() { | |
| requestAnimationFrame(u); | |
| g = p ? | |
| audio.currentTime * 60 : ( | |
| audio = "RIFFdataWAVEfmt " + atob("EAAAAAEAAQAAeAAAAHgAAAEACAA") + "data", | |
| b.style.background = "radial-gradient(circle,#345,#000)", | |
| b.style.position = "fixed", | |
| b.style.height = b.style.width = "100%", |
| // Not all API methods are implemented in this proof | |
| // See https://www.firebase.com/docs/web/api/query/ | |
| var FirebaseQueryWrapper = (function() { | |
| function FirebaseQueryWrapper(url) { | |
| this.ref = new Firebase(url); | |
| this.parms = {}; | |
| } | |
| var proto = FirebaseQueryWrapper.prototype; |
setProps - depends on reading the last reconciled props from the current reconciled state of the app, at the time of the call. It also depends on an object that doesn't necessarily need to be there outside reconciliation. This is unlike setState, which is state that needs to be there. setState is queued up and merged at the time of reconciliation. Not at the time of the call. setState has a side-effect but is not a stateful nor mutative API.
isMounted - reads the current state of the tree, which may be stale if you're in a batch or reconciliation.
getDOMNode/findDOMNode - Reads the currently flushed node. This currently relies on the state of the system and that everything has flushed at this time. We could potentially do a forced render but that would still rely on the state of the system allowing us to synchronously being able to force a rerender of the system. Note: in 0.14, refs directly to DOM node will resolve to the DOM node. This allow you to get access to a node at the time of its choos
| function flatten(input) { | |
| if (!input) return | |
| var output = []; | |
| while(input.length) | |
| if(input[0] instanceof Array) | |
| input.unshift.apply(input, input.shift()) | |
| else | |
| output.push(input.shift()) | |
| return output | |
| } |
| #!/bin/sh | |
| # retab a list of files from 2 spaces to 4 spaces | |
| # todo: read the list of files from a file | |
| for i in \ | |
| client/scripts/components/describe.jsx \ | |
| client/scripts/components/includes/header.jsx \ | |
| client/scripts/components/index.jsx \ | |
| client/scripts/components/layouts/default.jsx \ |
| { | |
| "env": { | |
| "node": true, | |
| "es6": true | |
| }, | |
| "parser": "babel-eslint", | |
| "rules": { | |
| "no-throw-literal": 1, | |
| "strict": "never", | |
| "semi": [2, "never"], |
| import { Component } from "React"; | |
| export var Enhance = ComposedComponent => class extends Component { | |
| constructor() { | |
| this.state = { data: null }; | |
| } | |
| componentDidMount() { | |
| this.setState({ data: 'Hello' }); | |
| } | |
| render() { |
