Jim Cummins jimthedev

gif-from-tweet

There are so many great GIFs out there and I want to have copies of them. Twitter makes that harder than it should be by converting them to MP4 and not providing access to the source material. To make it easier, I made a bash pipeline that takes a tweet URL and a filename, extracts the MP4 from that tweet and uses ffmpeg to convert back to GIF.

Dependencies

ffmpeg
- macOS: brew install ffmpeg
- Ubuntu/Debian: apt install ffmpeg

Why we dropped Lerna from PouchDB

We dropped Lerna from our monorepo architecture in PouchDB 6.0.0. I got a question about this from @reconbot, so I thought I'd explain our reasoning.

First off, I don't want this post to be read as "Lerna sucks, don't use Lerna." We started out using Lerna, but eventually outgrew it because we wrote our own custom thing. Lerna is still a great idea if you're getting started with monorepos (monorepi?).

Backstory:

https://pouchdb.com/2016/01/13/pouchdb-5.2.0-a-better-build-system-with-rollup.html

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

	# ZSH
	autoload -U add-zsh-hook

	# place default node version under $HOME/.node-version
	load-nvmrc() {
	DEFAULT_NODE_VERSION=`cat $HOME/.node-version`
	if [[ -f .nvmrc && -r .nvmrc ]]; then
	fnm use
	elif [[ `node -v` != $DEFAULT_NODE_VERSION ]]; then
	echo Reverting to node from "`node -v`" to "$DEFAULT_NODE_VERSION"

	let lastFocused = [];
	setInterval(() => {
	const focused = document.querySelector(':focus');
	if (focused && lastFocused[lastFocused.length - 1] != focused) {
	lastFocused.push(focused);
	}
	}, 100)

	//Copied from SO checking if an element is in view
	const checkIfInView = (elementPosition, extraOffset) =>
	elementPosition.top >= 0 &&
	elementPosition.left >= 0 &&
	elementPosition.bottom + extraOffset <=
	(window.innerHeight \|\| document.documentElement.clientHeight) &&
	elementPosition.right + extraOffset <=
	(window.innerWidth \|\| document.documentElement.clientWidth);

	//React hook that sets state when in view

	type AAndB = {
	a: string;
	b: string;
	};

	type Neither = {
	someOtherProp: string;
	};

	type Props = AAndB \| Neither;

	const createLogger = (backgroundColor, color) => {
	const logger = (message, ...args) => {
	if (logger.enabled === false) {
	return;
	}

	console.groupCollapsed(
	`%c${message}`,
	`background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
	...args

	function increment(props, state) {
	return {
	value: state.value + props.step,
	};
	}

	function decrement(props, state) {
	return {
	value: state.value - props.step,
	};

	import React from 'react';
	import styled from 'styled-components';

	const Item = styled.div`
	margin-top: 1px;
	padding: 15px;
	background: #333;

	${({first}) => first ? `
	margin-top: 0;