Skip to content

Instantly share code, notes, and snippets.

Avatar

Matt Robinson inanimatt

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

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
inanimatt / 0readme.md
Created Sep 4, 2017
Custom video progress bar
View 0readme.md

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
inanimatt / -README.md
Last active Jul 12, 2017
API Status component
View -README.md

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>
<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 -->
@inanimatt
inanimatt / index.html
Created Jan 29, 2017
Decimal alignment w/jQuery
View index.html
<!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>
@inanimatt
inanimatt / App.vue
Last active Aug 29, 2017
I suck at Vue 2?
View App.vue
<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>
@inanimatt
inanimatt / .php_cs
Last active May 9, 2016
Tui standard code guidelines
View .php_cs
<?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()
View .profile
//…
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
@inanimatt
inanimatt / cc.sh
Created Nov 11, 2014
Symfony2 mac cache-clearing/permission script
View cc.sh
#!/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
You can’t perform that action at this time.