johnslipper

javascript:(console.save=function(e,o){if(!e)return void console.error('Console.save: No data');o||(o='console.json'),'object'==typeof e&&(e=JSON.stringify(e,void 0,4));var n=new Blob([e],{type:'text/json'}),t=document.createEvent('MouseEvents'),a=document.createElement('a');a.download=o,a.href=window.URL.createObjectURL(n),a.dataset.downloadurl=['text/json',a.download,a.href].join(':'),t.initMouseEvent('click',!0,!1,window,0,0,0,0,0,!1,!1,!1,!1,0,null),a.dispatchEvent(t)});

johnslipper

---
After: 'silverstripe-optimisedimage/config#core'
---
ImageOptimiserService:
  availableCommands:
    jpg:
      jpegoptim: '%s/jpegoptim -p --all-progressive %s'

johnslipper

Relish Animated SVG Sequence (CSS & Velocity JS)

A short introduction sequence made for a single page client gift website (relish.capiche.co.nz) using animation in CSS and Velocity JS. Utilises stroke-dasharray and stroke-dashoffset to simulate a pen tracing out letters.

As the text used for the word 'relish' was outlined shapes rather than live text I was forced to animate overlaid red paths to gradually reveal the text below. If anybody has feedback or a more elegant solution, for example using masks in some way or SnapSVG I'd be interested to hear.

A Pen by John Slipper on CodePen.

License.

johnslipper

<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html">

johnslipper

<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html">