jnsprnw

Recommended Tools/Apps

Mailmate

Numi

Optimage

Sublime Text

Ulysses

Tower

jnsprnw

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
const imageminZopfli = require('imagemin-zopfli');
const imageminMozjpeg = require('imagemin-mozjpeg');

imagemin(['source/*.jpg'], 'output', {
	progressive: true,
	use: [
		imageminZopfli({
      more: true,

jnsprnw

<template>
  <picture>
    <!-- First we need to list the available image sources the browser can select as src in the image tag -->
    <!-- We use media queries to let the browser select the source by the viewport width -->
    <!-- We also define file type (webp or jpg) to let the browser select between supported formats. List the WebPs first as they are preferable -->
    <template v-for="format in formats">
      <source
        media="(min-width: 1200px)"
        :srcset="`${base + img}-l.${format}`"
        :type="'image/' + format" />

jnsprnw

jnsprnw

jnsprnw

<template>
  <header ref="header">
    <Graphic>
      <div slot="legend">
        <span v-html="10&#8239;%" />
      </div>
      <template slot="content">
        <h1>Content</h1>
      </template>
    </Graphic>

jnsprnw

<template>
  <svg class="vis">
    <circle
      v-for="(item, n) in data"
      :key="n"
      :cx="states[state]['x'](item)"
      :cy="states[state]['y'](item)"
      :r="states[state]['r'](item)"
      :style="{
        'opacity': states[state]['o'](item),

jnsprnw

General

[a, b] = [1, 2]
[a, b, ...rest] = [1, 2, 3, 4, 5]
{ a, b } = { a: 1, b: 2 }
{ a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 }  // ES2016

Array destructuring

jnsprnw

<template>
  <div ref="result">
    {{ result }}
  </div>
</template>

<script>

export default {

jnsprnw

#!/usr/bin/env ruby
# encoding: utf-8
Dir.chdir(File.dirname(__FILE__))

require "awesome_print"

# Skript um ein Spaltenlayout für zwei unterschiedliche Breiten zu finden

BREITE_1 = 250
BREITE_2 = 200