arnie arnoldsandoval

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript

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()
 }

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

Inspired by dannyfritz/commit-message-emoji

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

Making Accessible Ember Components

Making the web accessible is important. We have ethical and, in some cases, legal obligations to ensuring access to all of users.

Luckily for us, it's easy to make an accessible Ember Component.

What are components?

To understand the accessibility story around Ember Components, we have to start by talking about Web Components. Ember Components are designed to be interoperable with the final Web Components API.

	import { AnimatePresence, usePresence } from "framer-motion";
	import { classNames } from "~/lib/utils/class-names";
	import { useCounter } from "@kyleshevlin/use-common";
	import { useCallback } from "react";

	const Box = ({ count }: { count: number }) => {
	const [isPresent, safeToRemove] = usePresence();

	const onAnimationEnd = useCallback(() => {
	if (!isPresent) safeToRemove();

	function createStore (reducers) {
	var state = reducers()
	const store = {
	dispatch: (action) => {
	state = reducers(state, action)
	},
	getState: () => {
	return state
	}
	}

Commit type	Emoji
Initial commit	🎉 `:tada:`
Version tag	🔖 `:bookmark:`
New feature	✨ `:sparkles:`
Bugfix	🐛 `:bug:`

	var Index = React.createClass({

	getInitialState: function () {
	return {
	lastPress: 0
	}
	},

	onPress: function () {
	var delta = new Date().getTime() - this.state.lastPress;

	// Restify Server CheatSheet.
	// More about the API: http://mcavage.me/node-restify/#server-api
	// Install restify with npm install restify


	// 1.1. Creating a Server.
	// http://mcavage.me/node-restify/#Creating-a-Server


	var restify = require('restify');