micahgodbolt

The apt-get version of node is incredibly old, and installing a new copy is a bit of a runaround.

So here's how you can use NVM to quickly get a fresh copy of Node on your new Bash on Windows install

$ touch ~/.bashrc
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
// restart bash
$ nvm install --lts

micahgodbolt

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
   compass: {                  // Task
     dist: {                   // Target
       options: {              // Target options
         environment: 'production',
         config: 'config.rb'
       }

micahgodbolt

%icon-font:before {
  font-family: "fontcustom";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  display: inline-block;
}

.icon-calendar:before { content: "\f100"; }
.icon-comment:before { content: "\f101"; }

micahgodbolt

interface IMenu {
  stuff?: any;
  items: string[];
}

interface IButton {
...
  menuProps?: IMenu
}

micahgodbolt

class Content extends React.Component {
  constructor() {
   super(); 
  }
  
  render() {
    return (
      <Fabric className='foo'>
        <DefaultButton
          onClick= {() => alert('hello')}

micahgodbolt

import React, { Component } from 'react';
import './App.css';
import { TextField, PrimaryButton, Checkbox, ProgressIndicator} from "office-ui-fabric-react";

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      todo: null

micahgodbolt

Nested Yaml

props:
  BUTTON:
    BACKGROUND:
      value: blue
    COLOR:
      value: white 
    HOVER:
      BACKGROUND:

micahgodbolt

Theo lets you preprocess your JSON data before sending it through to its normal processes. This preprocess allows you to use a nested props structure, which is then converted to standard flat props.

props:
  BUTTON:
    BACKGROUND:
      value: blue
    COLOR:
      value: white 
 HOVER:

micahgodbolt

  <div class="hero" style="background-image:url({{ background_image OR "http://placehold.it/1000x400" }})">
    <h1 class="hero__title">{{ title OR "We Are Awesome" }}</h1>
   {% block body %}
   {% endblock %}
   {% block footer %}
        <a class="hero__cta button button--primary" href="{{ cta_href OR "/some/awesome-link.html" }}>{{ cta_text OR "Find Out Why!" }}</a>
   {% endblock %}
  </div>

micahgodbolt

.ms-Button.ms-Button--primary {
  background-color: $ms-colorBackgroundButtonPrimary;
   color: $ms-colorTextButtonPrimary;

  &:hover {
    background-color: $ms-colorBackgroundButtonPrimaryHover;
  }
}