Joseph Rex josephrexme

AI Writing Tropes to Avoid

Add this file to your AI assistant's system prompt or context to help it avoid common AI writing patterns. Source: tropes.fyi by ossama.is

Word Choice

"Quietly" and Other Magic Adverbs

Frankie Bagnardi aka GreenJello has passed away on Sept 13, 2021 at age 27

Many of you in this channel know of him because he spent much of his time helping others, his death is a great blow to the community

He lost his battle with depression

Rest In Peace Frankie, we will never forget you.

If you are in a dark place, please reach out to chanops or the ones closest to you

Async Operations with `useReducer` Hook

9 March, 2019

We were discussing with @erusev what we can do with async operation when using useReducer() in our application. Our app is simple and we don't want to use a state management library. All our requirements are satisfied with using one root useReducer(). The problem we are facing and don't know how to solve is async operations.

In a discussion with Dan Abramov he recommends Solution 3 but points out that things are fresh with hooks and there could be better ways of handling the problem.

Problem

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

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:

	// helps us in parsing the frontmatter from text content
	const matter = require('gray-matter')
	// helps us safely stringigy the frontmatter as a json object
	const stringifyObject = require('stringify-object')
	// helps us in getting the reading time for a given text
	const readingTime = require('reading-time')

	// please make sure you have installed these dependencies
	// before proceeding further, or remove the require statements
	// that you don't use

	// The reducer function looks at each action that comes in
	// and based on the type generates a new state based on the
	// previous state and any additional data the action carried
	const reducer = (state, action) => {
	switch (action.type) {
	case "COUNT_INCREMENT":
	return {
	...state,
	count: state.count + 1
	};

	function cibc2csv() {
	var table = document.querySelector('table.smart-account')
	var csv = ''
	var head = []
	var row = []

	// read header cells
	table.querySelectorAll('thead th').forEach(th => {
	head.push(`${trim(th.textContent)}`)
	})

	// Lazy (=on-demand) zip()
	for (const [i, x] of zip(naturalNumbers(), naturalNumbers())) {
	console.log(i, x);
	if (i >= 2) break;
	}
	// Output:
	// 0 0
	// 1 1
	// 2 2

	#!/usr/bin/env node

	console.log('yay gist')