abhisharma2

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:

• Open "Quicktime Player",
• Go to File -> New Screen Recording

abhisharma2

cd usr/local/node_modules
rm -rf generator-* yo
cd ~/
npm install -g yo generator-chrome-extension # or whatever other generator you're using

abhisharma2

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.editor-container {
  width: 20vw;

abhisharma2

var React = require('react');
var ReactDOM = require('react-dom');

var DynamicImage = React.createClass({
  var width = $(window).width();
  getInitialState: function() {
    if (width >= 1028) {
      return {url: 'images/browser.png'};
    } else if (width < 1028 && width >=768) {
      return {url: 'images/ipad.png'};

abhisharma2

Verifying that +abhiously is my openname (Bitcoin username). https://onename.com/abhiously

abhisharma2

.indent-10 {
  text-indext: 10px;
}

.indent-20 {
  text-indext: 20px;
}

.indent-30 {
  text-indext: 30px;

abhisharma2

.button, .button-primary, .button-success, .button-warning, .button-danger, .button-info {
  border-radius: 3px;
  height: inherit;
  display: inline-block;
  padding: 10px 16px;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;

abhisharma2

.ptn {
  padding-top: 0px !important;
}

.prn {
  padding-right: 0px !important;
}

.pbn {
  padding-bottom: 0px !important;

abhisharma2

I hereby claim:

• I am abhisharma2 on github.
• I am abhiously (https://keybase.io/abhiously) on keybase.
• I have a public key whose fingerprint is 9477 0A4D C604 F5DB 68C7 E3BE F450 005B 1F5D 1A51

To claim this, I am signing this object:

{