fnky

To make Fred.app work on macOS versions before Tahoe you will need LLVM 20+.

You can grab it either through Homebrew (easiest, brew install llvm), from GitHub (https://github.com/llvm/llvm-project/releases) or from their official site (https://releases.llvm.org/)

Note down the path where you installed it. In case of Homebrew you can run brew --prefix llvm to get the path.

Then continue to download Fred.dmg from Dropbox, and move the Fred.app into a user folder (i.e. ~/Downloads)

fnky

:root {
  --color-scale-black: hsl(0, 0%, 3.5%);
  --color-scale-white: #ffffff;
  --color-scale-gray-1: hsl(0, 0%, 8.5%);
  --color-scale-gray-2: hsl(0, 0%, 11.0%);
  --color-scale-gray-3: hsl(0, 0%, 13.6%);
  --color-scale-gray-4: hsl(0, 0%, 15.8%);
  --color-scale-gray-5: hsl(0, 0%, 17.9%);
  --color-scale-gray-6: hsl(0, 0%, 20.5%);
  --color-scale-gray-7: hsl(0, 0%, 24.3%);

fnky

Animation

• Motion One

  From creator of Popmotion, Pose and Framer Motion. For React, use Framer Motion.

• Framer Motion
• AutoAnimate
• React Spring

Drag and Drop

fnky

import React from "react";

type ReducerWithOptionalAction<S> = (prevState: S, action?: S) => S;
type ReducerStateWithOptionalAction<S> = React.ReducerState<ReducerWithOptionalAction<S>>;
type DispatchWithOptionalAction<S> = React.Dispatch<S> & React.DispatchWithoutAction;
type ReducerValueWithOptionalAction<S> = [
  ReducerStateWithOptionalAction<S>,
  React.DispatchWithOptionalAction<S>,
];
  

fnky

import { json, ActionFunction, useActionData, Form } from "remix";
import { z } from "zod";

// This type infer errors from a ZodType, as produced by `flatten()` of a parsed schema.
type inferSafeParseErrors<T extends z.ZodType<any, any, any>, U = string> = {
  formErrors: U[];
  fieldErrors: {
    [P in keyof z.infer<T>]?: U[];
  };
};

fnky

[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"

fnky

function BetterFixedLazyExample({ lazyValue }) {
  // Initialize with null value.
  const myRef = useRef(null);
  
  useLayoutEffect(() => {
    console.log(myRef.current); // => HTMLDivElement DOM node
  }, []);
  
  // Make sure the ref setter is not blocked by conditionals.
  return (

fnky

import React from 'react';
import { createBrowserHistory } from 'history';

export const historyContext = React.createContext(null);
const HistoryContextProvider = historyContext.Provider;

// This is initialized at the time the file/module is imported, and not on component mount.
const history = createBrowserHistory();

export function History(props) {

fnky

Cheap-ish fonts

A list of cheap-ish fonts, that doesn't put a dent in my wallet.

• Greycliff CF

fnky

Awesome Variable Fonts

A list of open source and free* variable fonts.

* Some fonts may require a license to be used for commerical use.

Open Source

• iA Fonts
• Inter