Skip to content

Instantly share code, notes, and snippets.


Matt Robinson inanimatt

View GitHub Profile
inanimatt / App.vue
Last active Sep 16, 2019
Tracking online/offline state in Vue
View App.vue
<main id="app">
<h1>{{ isOnline ? "Online" : "Offline" }}</h1>
import { useNetworkDetection } from "@/services/useNetworkDetection";
export default {
inanimatt /
Last active Mar 17, 2018
Getting started with babel

Quick how-to

  • If you don't already have a package.json, make one (npm init or just echo {} > package.json)

  • npm install --save-dev babel-cli babel-preset-env

  • Create .babelrc with your targets:

      "presets": [
        ["env", {
          "targets": {
inanimatt /
Created Sep 4, 2017
Custom video progress bar

Our video player needed redoing (it was videogular before, we're using Vue now). For the seek/progress bar, I thought I'd use <input type="range" min="0" :max="player.duration"> which is nice and straightforward because there's no JS to really write for it, and because it's a browser built-in widget, it's accessible as heck.

One problem: IE is the only browser that lets you style the background colour of the slider track differently according to whether it's before or after the current slider position (it's call the "thumb" for some reason).

Solution: CSS custom properties, linear-gradient background. Use JS to update the custom property when the video time changes:

inanimatt /
Last active Jul 12, 2017
API Status component

Call it like this:

<api-status theme="dark" status-endpoint="/api/status"></api-status>

It uses window.fetch() which you might have to polyfill if you haven't already: yarn add whatwg-fetch

The component expects a JSON response with a property called message. If it's non-empty, it'll show the message. Pretty straightforward.

View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Shape selection</title>
<!-- Vue for doing stuff-->
<script src=""></script>
<!-- Paper for handling graphics -->
<script src=""></script>
<!-- Axios for making API calls -->
inanimatt / index.html
Created Jan 29, 2017
Decimal alignment w/jQuery
View index.html
<html lang="en">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Decimal alignment test</title>
<script src="//" type="text/javascript" charset="utf-8"></script>
<script src="jquery.column.min.js" type="text/javascript" charset="utf-8"></script>
inanimatt / App.vue
Last active Aug 29, 2017
I suck at Vue 2?
View App.vue
<div id="app">
<button @click.prevent="newBlock({type:'rich',data:''})">Add an editor</button>
<div v-for="(block, idx) in blocks" :key="`blocks-${idx}`" class="block">
<a class="handle handle--disabled" v-if="idx === 0">▲</a>
<a class="handle" v-if="idx !== 0" @click.prevent="swapBlock(idx - 1)">▲</a>
<a class="handle" v-if="idx !== (blocks.length - 1)" @click.prevent="swapBlock(idx)">▼</a>
<a class="handle handle--disabled" v-if="idx === (blocks.length - 1)">▼</a>
inanimatt / .php_cs
Last active May 9, 2016
Tui standard code guidelines
View .php_cs
/* This is a cut-down version of the symfony standard code style guidelines
* To use it, add this file to your project root, and run `php-cs-fixer fix`
* gotcha: if you provide a filename, then the guidelines are ignored! Fortunately
* php-cs-fixer keeps a cache and so typically runs on a whole project in less
* than a couple of seconds
* Get PHP-CS-Fixer here:
$finder = Symfony\CS\Finder\DefaultFinder::create()
View .profile
if [ "$(docker-machine status dev)" == "Running" ]; then
echo "✅ Docker machine is running. Loading environment…"
eval $(docker-machine env dev)
echo "❌ Docker machine not started. Run 'docker-machine start dev' to start it."
inanimatt /
Created Nov 11, 2014
Symfony2 mac cache-clearing/permission script
mkdir -p app/cache app/logs app/sessions
rm -rf app/cache/*
rm -rf app/logs/*
HTTPDUSER=`ps aux | grep -E '[a]pache|[h]ttpd|[_]www|[w]ww-data|[n]ginx' | grep -v root | head -1 | cut -d\ -f1`
sudo chmod +a "$HTTPDUSER allow delete,write,append,file_inherit,directory_inherit" app/cache app/logs app/sessions
sudo chmod +a "`whoami` allow delete,write,append,file_inherit,directory_inherit" app/cache app/logs app/sessions