View create-react-app-for-testing
create-react-app comes with Jest which is awesome, but sometimes you need a real DOM/browser to test with. Here's a quick way to get up and running testing your app.
1. Create a *separate* app for testing, using create-react-app:
```
create-react-app tests
cd tests
```
2. Modify the index.html to include the Jasmine spec runner (see index.html below)
3. Modify the index.js to just run your tests rather than bootstrap a React app. (see index.js below)
View index.html
<div class="crossbow">
<div class="zombie boy"></div>
<div class="zombie girl"></div>
<div class="zombie boy"></div>
</div>
View Avatar.js
/**
* A sample Angular 1 component, created using the component helper above.
* Uses Aphrodite for CSS
*/
import component from './component';
import { StyleSheet, css } from 'aphrodite';
const styles = StyleSheet.create({
avatar: {
View Task.js
// Angular 1.x components don't let you do a "replace:true", so they're always nested in another HTML tag.
// This nesting makes it so you can't use some really useful css pseudo-classes like ":last-of-type".
// This workaround puts a CSS class on the actual root, so you can take adavantage of these CSS goodies.
export default class Task {
constructor($element){
// add class to component root element for easier css styling
// using aphrodite
$element.addClass(css(styles.container))
View multichoice.js
/**
* Abstraction around multichoice questions that works in windows, despite https://github.com/nodejs/node/issues/5384
* Uses arrow keys for non-windows and number selection for windows
*/
var inquirer = require("inquirer");
var isWindows = /^win/.test(process.platform);
module.exports = function(questions) {
if (!isWindows) {
View 20CSSRulesForRyan.css
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }
*, html, body { -webkit-font-smoothing: antialiased; }
a { color: #39464e; text-decoration: none; }
a:hover { text-decoration: underline; }
input, textarea, select { font-family: "Open Sans", "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; }
View joyentdocker
# Use joyent's configuration for docker in the cloud.
# This makes it easy to toggle between using joyent and using local docker.
# Use your joyent username on line 8
# Use your joyent host if different
function jdocker
set -e DOCKER_TLS_VERIFY
set -gx DOCKER_CERT_PATH ~/.sdc/docker/<YOUR JOYENT USERNAME>
set -gx DOCKER_HOST "tcp://us-east-3b.docker.joyent.com:2376"
docker --tls $argv
View postcss-syntax
component(nav){
part (item){
option(selected){
background: blue;
}
}
}
View model.js
/**
* Feedback from real use:
* 1. Need to be able to transform the entire request before it even arrives to the model,
* not just transform each item (but want that too)
* 2. Declaring which fields you want is kinda lame, I wasted time trying to track down
* why the "children" field wasn't showing up.
* 3. Caching most definitely needs to be optional
* 4. transformOut CAN'T modify the original object right? Or the UI will hork? It's safe when using toJSON and fromJSON since those make new objects I think. Will need to add a test for this.
* 5. model.json() and model.rest() APIs seem wonky, should just be combined. Can still make cache separete or make it an option.
*/
View styles.less
atom-text-editor::shadow {
.line-numbers{
padding-left: 4px !important;
}
.git-line-modified, .git-line-added{
margin-left: -4px;
padding-left: 2px !important;
opacity: .5
}