OS X Screencast to animated GIF
This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.
Instructions
To capture the video (filesize: 19MB), using the free "QuickTime Player" application:
import Document, { Head, Main, NextScript } from 'next/document'; | |
// Import styled components ServerStyleSheet | |
import { ServerStyleSheet } from 'styled-components'; | |
export default class MyDocument extends Document { | |
static getInitialProps({ renderPage, req }) { | |
// Step 1: Create an instance of ServerStyleSheet | |
const sheet = new ServerStyleSheet(); |
const waitFor = (ms) => new Promise(r => setTimeout(r, ms)) | |
const asyncForEach = async (array, callback) => { | |
for (let index = 0; index < array.length; index++) { | |
await callback(array[index], index, array) | |
} | |
} | |
const start = async () => { | |
await asyncForEach([1, 2, 3], async (num) => { | |
await waitFor(50) |
function makeElement(type, text) { | |
const el = document.createElement(type); | |
const textNode = document.createTextNode(text); | |
el.appendChild(textNode); | |
return el; | |
} | |
const h1 = (text) => makeElement(`h1`, text); |
ffmpeg -i data/video.mp4 -vcodec h264 -b:v 1000k -acodec mp2 data/output.mp4 |
// connect() is a function that injects Redux-related props into your component. | |
// You can inject data and callbacks that change that data by dispatching actions. | |
function connect(mapStateToProps, mapDispatchToProps) { | |
// It lets us inject component as the last step so people can use it as a decorator. | |
// Generally you don't need to worry about it. | |
return function (WrappedComponent) { | |
// It returns a component | |
return class extends React.Component { | |
render() { | |
return ( |
'use strict'; | |
export default function (question) { | |
var rl = require('readline'); | |
var r = rl.createInterface({ | |
input: process.stdin, | |
output: process.stdout, | |
terminal: false | |
}); | |
return new Promise((resolve, error) => { |
<!-- Month dropdown --> | |
<select name="month" id="month" onchange="" size="1"> | |
<option value="01">January</option> | |
<option value="02">February</option> | |
<option value="03">March</option> | |
<option value="04">April</option> | |
<option value="05">May</option> | |
<option value="06">June</option> | |
<option value="07">July</option> | |
<option value="08">August</option> |
#!/bin/sh | |
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep ".jsx\{0,1\}$") | |
if [[ "$STAGED_FILES" = "" ]]; then | |
exit 0 | |
fi | |
PASS=true |
$ ffmpeg -i input.mp4 -vcodec h264 -acodec mp2 output.mp4 |