This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.
To capture the video (filesize: 19MB), using the free "QuickTime Player" application:
import React from 'react'; | |
const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children; | |
const Header = ({shouldLinkToHome}) => ( | |
<div> | |
<ConditionalWrap | |
condition={shouldLinkToHome} | |
wrap={children => <a href="/">{children}</a>} | |
> |
Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets
“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important
or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”
You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?
.sidebar_newsletter_sign_up, | |
.sidebar_subscribe, | |
.sign-up-form-single, | |
.signup-form--header, | |
.signup-with-checkboxes, | |
.skinny-sign-up, | |
.slidedown-newsletter, | |
.small-newsletter, | |
.social-link-mail, | |
.social_newsletter_box, |
I tried a few different techniques to make a GIF via command-line and the following gives me the best control of quality and size. Once you're all setup, you'll be pumping out GIFs in no time!
Install FFmpeg
Install ImageMagick
const trackTime = timing => { | |
const now = performance.now(); | |
if (!timing.startTime) timing.startTime = now; | |
const elapsed = now - timing.startTime; | |
const {duration} = timing; | |
if (duration != null && duration <= elapsed) timing.startTime = null; | |
return elapsed; | |
}; | |
const delay = (callback, duration) => { |