ericclemmons

<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.0.1/dist/tailwind.min.css">

<!-- Responsive indicators! -->
<div class="fixed top-0 right-0 z-50 bg-pink-500 text-white shadow-md px-2 rounded-bl font-mono">
  <span class="sm:hidden">default</span>
  <span class="hidden sm:inline md:hidden">sm</span>
  <span class="hidden md:inline lg:hidden">md</span>
  <span class="hidden lg:inline xl:hidden">lg</span>
  <span class="hidden xl:inline">xl</span>
</div>

ericclemmons

Gutenblock Demo!

Zach Silveira was kind enough to create a video tutorial:

https://www.youtube.com/watch?v=apZwd0FqQu4&feature=youtu.be

Here are my notes as I followed along...

Getting Started

1. Install Docker for Mac.

ericclemmons

var webpack = require("webpack");

module.exports = {
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          cacheDirectory: true,

ericclemmons

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>Ansi 0 Color</key>
	<dict>
		<key>Alpha Component</key>
		<real>1</real>
		<key>Blue Component</key>
		<real>0.15977835655212402</real>

ericclemmons

Using <details> in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

<details>
 Summary Goes Here

ericclemmons

/**
 * Term: schools.address.state
 * 
 * Stores the state abbreviation for a school's location.
 */
module.exports = {
  table: 'school', // Entity table in DB

  // `?state=tx` is supported (or would throw) here
  filter: function(qb, value) {

ericclemmons

export default {
  ...

  resolve: {
    root: [
      path.join(process.cwd(), "lib"),
    ],
  },

  ...

ericclemmons

class HappyFactory {
  constructor(message) {
    return Promise.resolve(`${message} there!`);
  }
}

new HappyFactory("Howdy").then(::console.log);
// "Howdy there!"

ericclemmons

var _ = require("lodash");
var path = require("path");

var env = process.env.NODE_ENV || "development";

var debug = ["development", "test"].indexOf(env) !== -1;

var defaults = {
  cache: debug,
  debug: debug,

ericclemmons

{
  "ecmaFeatures": {
    "arrowFunctions": true,
    "binaryLiterals": false,
    "blockBindings": true,
    "classes": true,
    "defaultParams": true,
    "destructuring": true,
    "forOf": false,
    "generators": true,