Skip to content

Instantly share code, notes, and snippets.

View mattattui's full-sized avatar

Matt Robinson mattattui

22 followers · 1 following
View GitHub Profile
@mattattui
mattattui / App.vue
Last active September 16, 2019 15:44
Tracking online/offline state in Vue
<template>
<main id="app">
<h1>{{ isOnline ? "Online" : "Offline" }}</h1>
</main>
</template>
<script>
import { useNetworkDetection } from "@/services/useNetworkDetection";
export default {
@mattattui
mattattui / readme.md
Last active March 17, 2018 09:16
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": {

@mattattui
mattattui / 0readme.md
Created September 4, 2017 13:00
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:

@mattattui
mattattui / -README.md
Last active July 12, 2017 14:28
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.

@mattattui
mattattui / index.html
Last active October 24, 2020 11:28
Vue + Paper
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shape selection</title>
<!-- Vue for doing stuff-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- Paper for handling graphics -->
<script src="https://unpkg.com/paper@0.11.3/dist/paper-full.min.js"></script>
<!-- Axios for making API calls -->
@mattattui
mattattui / index.html
Created January 29, 2017 00:30
Decimal alignment w/jQuery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Decimal alignment test</title>
<script src="//code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.column.min.js" type="text/javascript" charset="utf-8"></script>
</head>
@mattattui
mattattui / App.vue
Last active August 29, 2017 13:28
I suck at Vue 2?
<template>
<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>
@mattattui
mattattui / .php_cs
Last active May 9, 2016 16:27
Tui standard code guidelines
<?php
/* 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: https://github.com/FriendsOfPhp/PHP-CS-Fixer
*/
$finder = Symfony\CS\Finder\DefaultFinder::create()
@mattattui
mattattui / .profile
Created February 8, 2016 17:58
//…
if [ "$(docker-machine status dev)" == "Running" ]; then
echo "✅ Docker machine is running. Loading environment…"
eval $(docker-machine env dev)
else
echo "❌ Docker machine not started. Run 'docker-machine start dev' to start it."
fi
@mattattui
mattattui / cc.sh
Created November 11, 2014 11:58
Symfony2 mac cache-clearing/permission script
#!/bin/sh
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