Skip to content

Instantly share code, notes, and snippets.

@swyxio
swyxio / adaptive_intent.md
Created May 3, 2019 08:04
an adaptive, intent based CLI "state machine"

an adaptive, intent based CLI "state machine"

one realization from working on Netlify's CLI is that the CLI framework we used, oclif, didn't provide a great user experience out of the box.

Emphasis on great: it does a lot of nice things, like offering flag and argument parsing, help documentation, and pluggability. That's good for the CLI developer. But what about the CLI user?

  • Idiomatic oclif code often checks for required preconditions, and if it doesn't exist, it prints a warning and then process.exit(1).
  • Decent code prints a helpful warning telling the user what they got wrong. It is informative.
  • Better code offers a prompt, creates a file, or something similar to solve the precondition before proceeding. (possibly recursively). It is intent-based.
  • Great code remembers past inputs to prompts and uses that to offer useful defaults. It is adaptive.
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import { Route, Link, Redirect } from './Zero'
const paths = [ 'one', 'two', 'three' ]
class App extends Component {
render() {
import React, { Component } from 'react'
import { Block, Flex } from 'jsxstyle'
const Row = Flex
const Col = (props) => <Flex {...props} flexDirection="column"/>
var history = {
redo_list: [],
undo_list: [],
@acdlite
acdlite / app.js
Last active January 20, 2023 08:23
Quick and dirty code splitting with React Router v4
// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
@7ynk3r
7ynk3r / PanResponderExample.jsx
Created August 18, 2016 06:17
PanResponder Example
class PanResponderExample extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.state.pan = new Animated.ValueXY({x: 0, y: 0});
this.state.move = this.state.pan.x.interpolate({
inputRange: [0, 100],
outputRange: [0, 1],
extrapolate: 'clamp',
});
@alexesDev
alexesDev / webpack.config.js
Last active February 13, 2024 07:35
React Native + Webpack (with babel6 and react-native v0.17)
var path = require('path');
var webpack = require('webpack');
var reactNativeExternalsPromise = (function () {
var reactNativeRoot = path.dirname(require.resolve('react-native/package'));
var blacklist = require('react-native/packager/blacklist');
var ReactPackager = require('react-native/packager/react-packager');
const rnEntryPoint = require.resolve('react-native');
return ReactPackager.getDependencies({
@gaearon
gaearon / createAsyncPage.jsx
Last active April 25, 2023 09:06
Webpack's async code splitting with React Router
'use strict';
var React = require('react');
function createAsyncHandler(getHandlerAsync, displayName) {
var Handler = null;
return React.createClass({
displayName: displayName,
@staltz
staltz / introrx.md
Last active May 7, 2024 09:38
The introduction to Reactive Programming you've been missing
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Stripe Getting Started Form</title>
<!-- The required Stripe lib -->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<!-- jQuery is used only for this example; it isn't required to use Stripe -->
@willurd
willurd / web-servers.md
Last active May 7, 2024 14:57
Big list of http static server one-liners

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000