Matt Robinson mattattui

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": {

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:

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.

Using Tiny (ID obfuscator) with Symfony2's ParamConverters

Symfony's convenience methods for automatically fetching database entities from URL parameters are super-handy.
Obfuscated/hash IDs are a great idea, especially in APIs (where you aren't concerned with SEO, but might be concerned about sequential numeric ids or exposing database information).
Here's how to make them work together.

The stuff in this gist sets up a Twig filter (obfuscate) to create the obfuscated ids (for URLs), makes the obfuscator available as a service (id_obfuscator) so you can also generate obfuscated URLs in your controllers or whatever, and extends the DoctrineParamConverter to allow it to retrieve entities by their deobfuscated id.

Following Phil Sturgeon's excellent advice in Build APIs You Won't Hate, I've also added an option to allow multiple ids to be loaded at once, like /resources/id1,id2,id3,id4. It's really quite handy sometimes. Bewarned though; it won't

	<template>
	<main id="app">
	<h1>{{ isOnline ? "Online" : "Offline" }}</h1>
	</main>
	</template>

	<script>
	import { useNetworkDetection } from "@/services/useNetworkDetection";

	export default {

	<!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/[email protected]/dist/paper-full.min.js"></script>
	<!-- Axios for making API calls -->

	<!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>

	<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>

	<?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()

	#!/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