Winston Fassett WinstonFassett

Ever wanted to delete all your likes/favorites from Twitter but only found broken/expensive tools? You are in the right place.

Go to: https://twitter.com/{username}/likes
Open the console and run the following JavaScript code:

setInterval(() => {
  for (const d of document.querySelectorAll('div[data-testid="unlike"]')) {
    d.click()
 }

As the number of different possible states and transitions between states in a user interface grows, managing styles and animations can quickly become complicated. Even a simple login form has many different "user flows":

https://codepen.io/davidkpiano/pen/WKvPBP

State machines are an excellent pattern for managing state transitions in user interfaces in an intuitive, declarative way. We've been using them a lot on the Keyframers as a way to simplify otherwise complex animations and user flows, like the one above.

So, what is a state machine? Sounds technical, right? It’s actually more simple and intuitive than you might think. (Don’t look at Wikipedia just yet… trust me.)

Let’s approach this from an animation perspective. Suppose you’re creating a loading animation, which can be in only one of four states at any given time:

Alternatives

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name	Stars	Last Commit	Description
three.js	![GitHub

nylas/N1 💌 An extensible desktop mail app built on the modern web.
black-screen/black-screen A terminal emulator for the 21st century.
shockone/black-screen A terminal emulator for the 21st century.
ptmt/react-native-macos React Native for macOS
docker/kitematic Visual Docker Container Management on Mac & Windows
kitematic/kitematic Visual Docker Container Management on Mac & Windows
davezuko/wirk-starter Get started with React, Redux, and React-Router!
TelescopeJS/Telescope 🔭 An open-source social news app built with Meteor & React
coryhouse/react-slingshot React + Redux starter kit / boile

Edit — February 2019

This gist had a far larger impact than I imagined it would, and apparently people are still finding it, so a quick update:

TC39 is currently moving forward with a slightly different version of TLA, referred to as 'variant B', in which a module with TLA doesn't block sibling execution. This vastly reduces the danger of parallelizable work happening in serial and thereby delaying startup, which was the concern that motivated me to write this gist
In the wild, we're seeing (async main(){...}()) as a substitute for TLA. This completely eliminates the blocking problem (yay!) but it's less powerful, and harder to statically analyse (boo). In other words the lack of TLA is causing real problems
Therefore, a version of TLA that solves the original issue is a valuable addition to the language, and I'm in full support of the current proposal, which you can read here.

I'll leave the rest of this document unedited, for archaeological

	import React from 'react'
	import { Button, Text, View } from 'react-native'
	import { useDispatch } from 'react-redux'

	import { useReduxState } from '../hooks/use-redux-state'
	import * as actions from '../redux/actions'
	import * as selectors from '../redux/selectors'

	export function LoginScreen() {
	const dispatch = useDispatch()

	#!/bin/bash
	#
	# Create a RN project which includes react-native-web
	# Takes one argument, the target directory (and app) name,

	if [ $# -ne 1 ]
	then
	echo "usage: $0 <target-dir>"
	exit 1
	fi

	'use strict';

	const authentication = require('feathers-authentication');
	const jwt = require('feathers-authentication-jwt');
	const local = require('feathers-authentication-local');
	const oauth2 = require('feathers-authentication-oauth2');
	const GithubStrategy = require('passport-github');
	// Bring in the oauth-handler
	const makeHandler = require('./oauth-handler');

	import React, { Component } from 'react'
	import { Link } from 'react-router'
	// Drag and Drop
	import { DragDropContext } from 'react-dnd'
	import HTML5Backend from 'react-dnd-html5-backend'
	// Material UI
	import { List } from 'material-ui/List'
	import Subheader from 'material-ui/Subheader'

	class ReorderableList extends Component {