jherr

VS Code setup

• Settings are listed in settings.json
• Editor Font: Operator Mono
• Terminal Font: SpaceMono NF

Significant Extensions

• Babel JavaScript
• Bracket Pair Colorizer

francisrstokes

import React from 'react';

export class StateDispatcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.state || {};
    this._dispatch = this.dispatch.bind(this);
  }

  dispatch(action) {

sebmarkbage

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

jim-at-jibba

import { Restivus } from 'meteor/nimble:restivus';
import { JsonRoutes } from 'meteor/simple:json-routes';
import { Meteor } from 'meteor/meteor';

import YourCollection from '../your-collection';

JsonRoutes.Middleware.use(
  '/api/yourCollection',
  JsonRoutes.Middleware.parseBearerToken
);

config.json

{
  "vars": {
    "@gray-base": "#000",
    "@gray-darker": "lighten(@gray-base, 13.5%)",
    "@gray-dark": "lighten(@gray-base, 20%)",
    "@gray": "lighten(@gray-base, 33.5%)",
    "@gray-light": "lighten(@gray-base, 46.7%)",
    "@gray-lighter": "lighten(@gray-base, 93.5%)",
    "@brand-primary": "darken(#428bca, 6.5%)",
    "@brand-success": "#5cb85c",

gaearon

// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (

smokinjoe

# From https://github.com/github/hubot/issues/648#issuecomment-78796436

The book Automation and Monitoring with Hubot has a section on debugging.

I've just tested that myself, and it seems to work well. Basically, the steps are:

npm install -g node-inspector
node-inspector --no-preload --web-port 8123
Then, we can insert debugger in our code somewhere to setup a breakpoint. Then we run Hubot:

sebmarkbage

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

kentcdodds

function getWatchers(root) {
  root = angular.element(root || document.documentElement);
  var watcherCount = 0;
 
  function getElemWatchers(element) {
    var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);
    var scopeWatchers = getWatchersFromScope(element.data().$scope);
    var watchers = scopeWatchers.concat(isolateWatchers);
    angular.forEach(element.children(), function (childElement) {
      watchers = watchers.concat(getElemWatchers(angular.element(childElement)));

justinmc

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* Anchor Smooth Scroll - Smooth scroll to the given anchor on click
*   adapted from this stackoverflow answer: http://stackoverflow.com/a/21918502/257494
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
angular.module('yourapp').directive('anchorSmoothScroll', function($location) {
    'use strict';

    return {
        restrict: 'A',
        replace: false,