mavame

<div class="column">
  <a class="btn red">Button</a>
  <div class="swatch red"></div>
  <a class="btn darkRed">Button</a>
  <div class="swatch darkRed"></div>
  <a class="btn burntRed">Button</a>
  <div class="swatch burntRed"></div>
  <a class="btn brightBlue">Button</a>
  <div class="swatch brightBlue"></div>
  <a class="btn blue">Button</a>

mavame

/**
 * The first commented line is your dabblet’s title
 */

body {
  text-align:center;
}

div {
  color:#eac;

mavame

// Ch2 from Pro JavaScript Design Patterns
// Interfaces in JS!!

/*
  interface Composite {
    function add(child);
    function remove(child);
    function getChild(index);
  }
  interface FormItem {

mavame

{
	"auto_complete": true,
	"auto_indent": true,
	"bold_folder_labels": true,
	"caret_style": "phase",
	"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker-OceanicNext.tmTheme",
	"default_encoding": "UTF-8",
	"detect_indentation": true,
	"draw_indent_guides": true,
	"draw_white_space": true,

mavame

Learning Vue

Conditional Rendering

<div id="container" v-if="someJSexpression"></div>

If someJSExpression evaluates to true, the div will appear in the DOM. Otherwise, it's left out.

Data Binding

mavame

/**
 * Copy the values of all enumerable own properties from one or more objects to a target object.
 * Portion taken from the Object.assign(target, ...sources) polyfill on MDN.
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill
 * @param {object} target Target object
 * @param {...object} sources Additional objects whose properties to copy into target
 * @return {object} target
 */
export default function assign(target, ...sources) {
  if (target == null) { // TypeError if undefined or null

mavame

import Flickity from 'flickity'; // flickity now appears in main bundle.

const slideshow = document.querySelector('.slideshow');

if (slideshow) {
  new Flickity(...);
} else {
  // well, slideshow doesn't exist but we're still loading Flickity on every page :-(
}

mavame

$breakpoints: (
  xs: 24rem,
  sm: 32rem,
  md: 54rem,
  lg: 64rem,
  xl: 80rem
);

// mobile-first breakpoint mixin
@mixin breakpoint($breakpoint: md, $key: min, $orientation: false) {

mavame

/**
 * Wait for a specified number of milliseconds. If a promise hasn't resolved, reject it.
 * This is a necessary replacement in some cases since cancellable promises aren't a thing
 * and is helpful if you want to wait _no longer than_ a specified amount of time.
 * @param {int} time Amount of time to wait before resolving arbitrarily.
 * @param {function} fn That returns a Promise. It will be run one tick before the timer starts.
 * @return {Promise}
 */
export function waitAndCatch(time, fn) {
  return new Promise((resolve, reject) => {

mavame

// given a csv file on the local filesystem, this program will JSON-serialize the contents in to a new file "output.json"
// First create a new directory and initialize a new node project:
// $ npm init -y && npm i -s csvtojson minimist
// Then run the program:
// $ node index.js -f path-to-csv.csv

const fs = require("fs");
const csv = require("csvtojson/v2");
const argv = require("minimist")(process.argv.slice(2));