Troy Griggs troyericg

Using localhost in composer was an extremely useful way to develop locally while seeing what interactives look like within guardian pages. Unfortunately composer only accepts HTTPS links now, which is a good thing but makes local dev'ing a bit more difficult.

Now to test from localhost you'll need to serve content over a secure connection which means self-signed certs. Here's a quick and dirty way to do that

1# Create a folder to store the keys

  mkdir ~/ssl

2# Generate SSL keys. Enter a password for now, we'll get rid of it next then just skip over all the other questions

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

Himawari-8 animation tutorial

Here’s how to make animations like this one. It requires intermediate Unix command-line knowledge, to install some tools and to debug if they don’t work. You’ll need these utilities:

curl (or you can translate to wget)
convert and montage, part of ImageMagick
ffmpeg, plus whatever codecs
parallel, for iteration that’s nicer than shell for loops or xargs
run everything in zsh for leading 0s in numerical ranges to work

TLDR: a React component should either manage its own state, or expose a callback so that its parent can. But never both.

Sometimes our first impulse is for a component to entirely manage its own state. Consider this simple theater seating picker that has a letter for a row, and a number for a seat. Clicking the buttons to increment each value is hardly the height of user-interface design, but never mind - that's how it works:

/* @flow */
var React = require('react');

var Letter: React.ReactClass = React.createClass({
  getInitialState: function(): any {

	require 'rubygems'
	require 'fileutils'
	require 'nokogiri'
	require 'open-uri'
	require 'csv'


	###############
	# GET PUBLIC: # A script for downloading/parsing public google spreadsheets
	###############

	# The packages we'll be using
	packages <- c("rvest","dplyr","tidyr","pipeR","ggplot2","stringr","data.table")

	# From those packages, which ones are not yet installed?
	newPackages <- packages[!(packages %in% as.character(installed.packages()[,"Package"]))]

	# If any weren't already installed, install them now
	if(length(newPackages)) install.packages(newPackages)

	# Now make sure all necessary packages are loaded

	import requests as req
	import sys
	from dateutil.parser import parse
	from PIL import Image
	from StringIO import StringIO

	# hi8-fetch.py <date> <zoom level> <output>
	# E.g.: hi8-fetch.py 2016-01-13T22:10:00 8 2016-01-13T221000-z8.png
	# Fetch Himawari-8 full disks at a given zoom level.
	# Valid zoom levels seem to be powers of 2, 1..16, and 20.

	#!/usr/bin/env python

	'''
	Makes template filenames for interpolating Himawari-8 data.
	Assumes filenames like "2015-11-28T023500.png".
	I do this: python betwixt.py day-color \| parallel --colsep ' ' convert -average {1} {2} {3}
	'''

	import os
	import sys

	#!/usr/bin/env osascript -l JavaScript

	// usage: google-earth-perspective-to-geojson.js xSamples ySamples > currentPerspective.geojson

	function run(argv) {
	var xSamples = argv[0] \|\| 50;
	var ySamples = argv[1] \|\| 50;

	var ge = Application('Google Earth Pro');