- Be a Vim user.
- Install UltiSnips.
- Add the code below to
$YOUR_VIM_FOLDER/UltiSnips/javascript.snippets.
snippet ii "magic import" b
import `!p
| // Create a queue to push events and stub all methods | |
| window.analytics || (window.analytics = {}); | |
| window.analytics_queue || (window.analytics_queue = []); | |
| (function() { | |
| var methods = ['identify', 'track', 'trackLink', 'trackForm', 'trackClick', 'trackSubmit', 'page', 'pageview', 'ab', 'alias', 'ready', 'group', 'on', 'once', 'off']; | |
| var factory = function(method) { | |
| return function () { | |
| var args = Array.prototype.slice.call(arguments); | |
| args.unshift(method); |
| import React, { Component, PropTypes } from 'react' | |
| import ReactDOM from 'react-dom' | |
| import throttle from 'lodash/throttle' | |
| import { INTERVAL } from './constants.js' | |
| let bound // are the event handlers bound? | |
| let current // current scroll position, from top of document | |
| let queue // array of React Components to check |
| keycode 66 = | |
| keycode 66 = Control_L | |
| keycode 133 = | |
| keycode 133 = Meta_L | |
| keycode 64 = Alt_L | |
| clear mod1 | |
| clear mod4 |
So migrating my existing app wasn't as troublesome as I originally thought. First thing I did was take a look at my router and routes
and figure try to make a mental model of all the files where I had nested routes in the existing app because those components/containers will contain {this.props.children}. So I need to replace those with the nested <Match /> components.
So just to give an example:
<Router history={history}>
<Route path="/" component={App}>| // getComponent is a function that returns a promise for a component | |
| // It will not be called until the first mount | |
| function asyncComponent(getComponent) { | |
| return class AsyncComponent extends React.Component { | |
| static Component = null; | |
| state = { Component: AsyncComponent.Component }; | |
| componentWillMount() { | |
| if (!this.state.Component) { | |
| getComponent().then(Component => { |
| <!-- | |
| * Liquid Snippet for generating responsive image srcsets based on Shopify's native image transforms. | |
| * Published June 17, 2016 by Joseph Bergdoll | |
| * www.extendedplay.nyc | |
| * | |
| * Full list of Shopify's generated image transforms: | |
| * https://ecommerce.shopify.com/c/ecommerce-design/t/very-important-please-read-new-image-sizes-supported-up-to-2048x2048-for-retina-support-110766 | |
| * | |
| * Simply include it within your image element, define the `image`, and the maximum size. | |
| * Product Images and Theme Asset Images should have either `product: 'true'` or `asset: 'true'` declared, respectively. |
curl to get the JSON response for the latest releasegrep to find the line containing file URLcut and tr to extract the URLwget to download itcurl -s https://api.github.com/repos/jgm/pandoc/releases/latest \
| grep "browser_download_url.*deb" \
| cut -d : -f 2,3 \
| tr -d \" \| const router = (routes, fn=(a,b)=>a(b)) => { | |
| let current = null | |
| const listen = () => { | |
| window.addEventListener('hashchange', () => { | |
| trigger(window.location.hashname.slice(1)) | |
| }) | |
| } | |
| const trigger = path => { |
| <?php | |
| /** | |
| * Simple PHP Templating function | |
| * | |
| * @param $names - string|array Template names | |
| * @param $args - Associative array of variables to pass to the template file. | |
| * @return string - Output of the template file. Likely HTML. | |
| */ | |
| function template( $names, $args ){ | |
| // allow for single file names |