Alberto albermav

58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

Gettings started writing a ESLint rule

First, take a look at the ESLint rule documentation. Just skim it for now. It's very long and boring. You can come back to it later.

ESLint rules works on the AST (Abstract Syntax Tree) representation of the code. In short, this is a tree structure that describes the code in a very verbose form. ESLint walks this tree and rules can subscribe to be notified when it hits a specific node type, like a Literal type, which could be the "hello" part of const welcome = "hello";.

Go ahead and play around with some code in AST Explorer (Make sure the parser is espree). It's a great tool!

Here are some good articles on the subject (ignore the scaffolding parts):

https://insideops.wordpress.com/2015/12/08/creating-custom-rules-for-eslint/

Reduce boilerplate in Redux

Create actions similar to Flummox.
Generate action ids.
Supports actions with decorators, promises, and therefore ES7 async.

	"use client";

	import React, { useEffect, useId, useState } from "react";
	import { motion, AnimatePresence, MotionConfig } from "framer-motion";
	import { PlusIcon, XIcon } from "lucide-react";
	import { createPortal } from "react-dom";
	import { cn } from "@/lib/utils";
	import { buttonVariants } from "../button";

	const transition = {

	import {View, Text, StyleSheet, LayoutChangeEvent} from 'react-native';
	import React, {useCallback, useState} from 'react';
	import Animated, {
	Extrapolate,
	SharedValue,
	interpolate,
	runOnJS,
	useAnimatedGestureHandler,
	useAnimatedStyle,
	useSharedValue,

	interface TLBoundsWithCenter {
	minX: number
	midX: number
	maxX: number
	minY: number
	midY: number
	maxY: number
	width: number
	height: number
	}

	// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

	// Remove any duplicates from an array of primitives.
	const unique = [...new Set(arr)]

	// Sleep in async functions. Use: await sleep(2000).
	const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
	// or
	const sleep = util.promisify(setTimeout);

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (