madkap

React - Good To Know

Learning ReactJS and keeping track of it all

• ReactJS
  • Event System
    • Synthetic Event
    • Event pooling
    • Supported Events
      • Clipboard, Clipboard, Composition, Keyboard, Focus, Form, Mouse, Selection, Touch, UI, Wheel, Media, Image, Animation, Transition
• React Responsive

madkap

Node.js

Module

A module encapsulates related/shared code into a single unit of code. Understanding module exports

Export a Module

// exports and module.exports are the same object
var exports = module.exports = {};

// create methods for module export
module.exports = {

madkap

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

madkap

Gems

My defaults for starting a rails app

Formtastic

gem 'formtastic'

https://github.com/justinfrench/formtastic

madkap

Capybara

Capybara Nodes

Capybara

save_and_open_page

Matchers

madkap

// from http://codepen.io/ArtemGordinsky/pen/GnLBq
// using http://bourbon.io/docs/#animation

@include keyframes(blink) {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }

madkap

%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  /* or with bourbon
  @include transform(translateY(-50%));
  */
  

madkap

$('#select-all').on 'change', @onChangeSelectAll
$('input[name="check-me"]').on 'change', @onChangeCheckbox

onChangeSelectAll: (e) ->
  $('input[name="check-me"]').prop 'checked', $(e.target).prop('checked')
  
onChangeCheckbox: (e) ->
  selected = false
  number_selected = 0
  $('input[name="check-me"]').each ->

madkap

html {
  font-size: 62.5%; //sets fontsize to 10px
}

@mixin fontsize($size:1.6, $line: $size * 1.5){
  font-size:   ($size * 10) + px;
  line-height: ($line * 10) + px;
  font-size:   $size + rem;
  line-height: $line + rem;
}

madkap

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }