Quick start guide to using Airbnb's style with ESLint.
- Navigate to your project directory and run this:
npx install-peerdeps --dev eslint-config-airbnb
- Save an
.eslintrc
file in your project directory:
{
var hasjQuery = false; | |
jQueryCheck = function() { | |
if (! window.jQuery) { | |
if (! hasjQuery) { | |
hasjQuery = true; | |
var script = document.createElement('script'); | |
script.type = 'text/javascript'; | |
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'; | |
document.getElementsByTagName('body')[0].appendChild(script); | |
} |
/* Commonly used mixins for CSS3 in SASS | |
by Ben Sargent (2012) | |
www.brokendigits.com | |
*/ | |
/* generically prefix any property name */ | |
@mixin prefix($name, $value) { | |
-webkit-#{$name}: $value; | |
-moz-#{$name}: $value; |
// Turns out this function already exists in Sass: mix(fg, bg, %) (http://d.pr/mGqa) | |
// Alpha blending | |
@function blend($bg, $fg) { | |
$r: red($fg) * alpha($fg) + red($bg) * (1 - alpha($fg)); | |
$g: green($fg) * alpha($fg) + green($bg) * (1 - alpha($fg)); | |
$b: blue($fg) * alpha($fg) + blue($bg) * (1 - alpha($fg)); |
npx install-peerdeps --dev eslint-config-airbnb
.eslintrc
file in your project directory:{
@mixin background-image-retina($file, $type, $width, $height) { | |
background-image: url($file + '.' + $type); | |
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) { | |
& { | |
background-image: url($file + '@2x.' + $type); | |
-webkit-background-size: $width $height; | |
} | |
} | |
} |
import React, { PropTypes } from 'react'; | |
import { TransitionMotion, spring } from 'react-motion'; | |
/** | |
* One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3). | |
* | |
* Usage is simple, and really only requires two things–both of which are | |
* injected into your app via react-router–pathname and children: | |
* | |
* <RouteTransition pathname={this.props.pathname}> |
This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.
I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.
Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.
/*! | |
* Copyright 2015 Google Inc. All rights reserved. | |
* | |
* Licensed under the Apache License, Version 2.0 (the "License"); | |
* you may not use this file except in compliance with the License. | |
* You may obtain a copy of the License at | |
* | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* | |
* Unless required by applicable law or agreed to in writing, software |
While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.
Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel | |
// MIT license | |
(function() { | |
var lastTime = 0; | |
var vendors = ['ms', 'moz', 'webkit', 'o']; |