Donald Pipowitch donaldpipowitch

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:

The final result: require() any module on npm in your browser console with browserify

This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.

Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: mathisonian/requirify#5

inspiration

PLEASE DON'T USE THIS GUIDE

It's over 9 years old (as of 2024-02-18), there are many better guides! You might like https://rust-unofficial.github.io/too-many-lists/

% Let's build a binary tree!

Let's build a binary tree of strings in Rust. To recap, each node in a binary tree:

must have a value

Observable React elements with RxJS

Note: if you want to skip history behind this, and just looking for final result see: rx-react-container

When I just started using RxJS with React, I was subscribing to observables in componentDidMount and disposing subscriptions at componentWillUnmount.

But, soon I realised that it is not fun to do all that subscriptions(that are just updating property in component state) manually, and written mixin for this...

Later I have rewritten it as "high order component" and added possibility to pass also obsarvers that will receive events from component.

	# Description: Boxstarter Script
	# Author: Rich Turner <[email protected]>
	# Last Updated: 2019-07-08
	#
	# Run this Boxstarter by calling the following from an ELEVATED PowerShell instance:
	# `set-executionpolicy Unrestricted`
	# `. { iwr -useb https://boxstarter.org/bootstrapper.ps1 } \| iex; get-boxstarter -Force`
	# `Install-BoxstarterPackage -DisableReboots -PackageName <URL-TO-RAW-GIST>`

	#---- TEMPORARY ---

	'use strict';

	var createAsyncActions = require('./createAsyncActions')

	var CategoryAPI = require('../api/CategoryAPI')

	var CategoryActions = createAsyncActions({
	create: function(category) {
	CategoryAPI
	.create(category)

	var net = require('net');

	//
	// Client
	//

	function openSocket() {
	var socket = net.connect(3e3);
	socket.setKeepAlive(true);
	socket.on('connect', onConnect.bind({}, socket));

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
	<title>Basic Example with JSX</title>
	<link rel="stylesheet" href="base.css" />
	</head>
	<body>
	<h1>ReactJs + RxJs</h1>
	<div id="container">

	const touchStart = Rx.Observable.fromEvent(window, 'touchstart').timestamp();
	const touchMove = Rx.Observable.fromEvent(window, 'touchmmove');
	const touchEnd = Rx.Observable.fromEvent(window, 'touchend').timestamp();

	const touchAndHold = touchStart
	.flatMap(() => touchEnd.takeUntil(touchMove), (x, y) => { start: x.timestamp, end: y.timestamp })
	.filter(ts => (ts.end - ts.start) / 1000 > 2);

	const subscription = touchAndHold.subscribe(
	() => console.log('touch and hold!')

	import * as React from 'react';
	import { Component } from 'react';

	export default function HOCBaseRender<Props, State, ComponentState>(
	Comp: new() => Component<Props & State, ComponentState>) {
	return class HOCBase extends Component<Props, State> {
	render() {
	return <Comp {...this.props} {...this.state}/>;
	}
	}