robwierzbowski

To answer the "punctuation inside or outside quotes?" question, ask yourself if the punctuation belongs to the quote or the sentence that contains the quote.

Keep punctuation inside when it's part of the quoted sentence.

If the quoted sentence ends but the unquoted sentence continues, periods become commas.

"How are you doing today?" he asked.
"Check out my quotes," Rob said. "This punctuation seems pretty natural."

If you do it the other way, it's all kinds of wrong.

robwierzbowski

A good pull request:

• Is easy to effectively code review
• Is easy to effectively QA
• Adds quality code and useful information to our codebase

This is primarily accomplished by keeping PRs and commits small, well described and single purpose.

Why bother?

robwierzbowski

/**
 * Return a reference to a document fragment's content that persists when the
 * fragment's content is inserted into the DOM
 * http://stackoverflow.com/a/13347298/530653z
 * @param {DocumentFragment} fragment - fragment to return references from
 * @returns {HTMLElement} A reference to the contents of fragment
 */
const getReference = function(fragment) {
  return [].slice.call(fragment.childNodes, 0)[0];
};

robwierzbowski

JavaScript Bundlers

Webpack

• An all in one asset transformer and bundler.
• Recommends that we use its internal dev server.
• Built within / serving the React community.
• Convention based, Rails-esque; many defaults for a "normal" project.
• Run off of a large config file.
• Has its own plugin ecosystem (Similar to babel / rollup transforms. Are they sharable?).

robwierzbowski

// Not the most expressive code, but it does the trick.
// Run with swap = true to test swapping doors.
const montyBurns = function (swap = false) {
  let wins = 0;

  for (let i = 0; i < 10000; i++) {
    const doors = [
      'empty',
      'empty',
      'empty',

robwierzbowski

.userSummary {
  /* element rules */
  
  &.--compact { 
    /* modifier rules */
  }
}

.image {
  /* element rules */

robwierzbowski

.image {
  /* element rules */
  
  &.-loading { 
    /* state rules */
  }
  
  &.-loaded {
    /* state rules */
  }

robwierzbowski

.userSummary { 
  /* element rules */
}

.image { 
  /* element rules */
}

.firstName,
.lastName { 

robwierzbowski

/* vars.css */

$off-black: hsl(0, 0%, 14%);
$serif-family: "Charter BT", "Times New Roman", serif;

/* component style.css */

@import 'vars.css';

.firstName {

robwierzbowski

<article styleName='userList'>
  <h1 styleName='title'>Friends</h1>
  <ul styleName='users'>
    <li styleName='user'>
      <UserPreview user={1} compact={true} />
    </li>
    <li styleName='user'>
      <UserPreview user={2} compact={true} />
    </li>
    <li styleName='user'>