markusand

export default {
    bind(el, bindings) {
        el.dragEvents = ['dragenter', 'dragover', 'dragleave', 'drop'];
        el.dragEvents.forEach(dragEvent => {
            el.addEventListener(dragEvent, (event) => {
                if (!el.classList.contains(dragEvent)) {
                    el.classList.remove(...el.dragEvents);
                    el.classList.add(dragEvent);
                }
                event.preventDefault();

markusand

<template lang="html">
  <label class="drop-box" ref="dropBox" v-drop-file="load">
    <img v-if="image" :src="image" />
    <span v-else>
      <i class="icon">cloud_upload</i>
      {{ message }}
    </span>
    <input
      type="file"
      accept="image/*"

markusand

<?php
/* Cache proxy for darksky.net API requests */
define('API_KEY', '***********************');
define('TIMEOUT', 10 * 60); // In seconds (10 minutes)

// Coordinates MUST be the first element in URL as https://api.server.io/v1/weather/[LAT,LON]
$params = explode('/', trim($_SERVER['PATH_INFO'], '/'));
$coords = filter_var(array_shift($params), FILTER_SANITIZE_STRING);

// Validate coordinates

markusand

<?php

/* Validation schema example */
$schema = [
    'id' => ['field' => 'id'],
    'name' => [
        'field' => 'name',
        'required' => true,
        'validation' => ['type' => 'string']
    ],

markusand

rules: {
	'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
	'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
	'no-tabs': 'off',
	'indent': ['error', 'tab', {
		'SwitchCase': 1
	}],
	'max-len': ['error', {
		'code': 100,
		'ignoreTrailingComments': true,

markusand

Create a Processing library

Compile a Processing sketch into a library that can be used with an import. This is helpful to reduce the amount of Processing tabs in a project, specially for that bunch of classes that won't be changed and belong to a same conceptual group.

Translate Processing's .pde files to .java files, getting rid of all the Processing core functions by java equivalents (ex. sin() to Math.sin()) and/or import Processing classes (ex. PVector). Add package name at the beginning of every java class file.

Open Terminal and go to sketch's directory. Type the following command

javac -cp [processing_path]:[extra_libraries] -source 1.6 -target 1.6 -d . *.java

markusand

/**
*  import StaggerDirective from '@/utils/directive.stagger';
*  Vue.directive('stagger', StaggerDirective);
*
*  Optional directive value selects elements through CSS selectors  v-stagger="'.stagger-item'"
*  Optional argument defines generic stagger interval  v-stagger:250 (default: 100ms)
*  Optional data-stagger for single item delay
*/

export default {

markusand

export default {
  bind(el, binding) {
    const { value: { msg, callback } } = binding;
    el.ask = () => {
      if (confirm(msg)) callback();
    };
    el.addEventListener('click', el.ask);
  },
  unbind(el) { el.removeEventListener('click', el.ask); }
};

markusand

.scroll-show {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.scroll-show-enter { opacity: 1; }

markusand

Vuex Saccharin

Syntactic sugar helpers to leverage Vuex usage and write less repetitive code.

📦 Install

npm i gist:7b2bec2ef24eb5c1d30d83660af49ed6