Skip to content

Instantly share code, notes, and snippets.

Matt Van Meter mavame

Block or report user

Report or block mavame

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
mavame / index.html
Created Mar 5, 2013
A CodePen by Matt . button-gradient mixin for sass
View index.html
<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 / dabblet.css
Created Mar 5, 2013
The first commented line is your dabblet’s title
View dabblet.css
* The first commented line is your dabblet’s title
body {
div {
View gist:5426716
// Ch2 from Pro JavaScript Design Patterns
// Interfaces in JS!!
interface Composite {
function add(child);
function remove(child);
function getChild(index);
interface FormItem {
mavame / Preferences.sublime-settings
Last active Mar 9, 2016
Sublime Text 3 User Settings
View Preferences.sublime-settings
"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,

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 / assign.js
Last active Aug 4, 2017
Assign function instead of MDN polyfill
View assign.js
* 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
* @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 / 00-old.js
Last active Sep 7, 2017
Lazy-loading (code splitting) ES6 using Webpack 3
View 00-old.js
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 :-(
View forEach.js
* Maps a callback to an element in an array-like object
* Basically a copy of underscore's _.each
* source:
export function forEach(obj, iteratee, context) {
let ctx = this;
const isObject = function(obj) {
mavame / index.js
Last active Dec 10, 2018
Write JSON file from csv using Node.js
View index.js
// 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));
View 01-promise-wait-and-catch.js
* 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) => {
You can’t perform that action at this time.