| import * as bcrypt from "bcrypt"; | |
| import { createCookieSessionStorage, redirect } from "remix"; | |
| import { db } from "./db.server"; | |
| export type LoginForm = { | |
| username: string; | |
| password: string; | |
| }; |
| // Menu: Twimage Download | |
| // Description: Download twitter images and set their exif info based on the tweet metadata | |
| // Shortcut: command option control t | |
| // Author: Kent C. Dodds | |
| // Twitter: @kentcdodds | |
| import '@johnlindquist/kit' | |
| import fs from 'fs' | |
| import {URL} from 'url' | |
| import {getTweet} from '../lib/twitter' |
Caching is a big subject and it can get pretty complicated. Luckily, the browsers have done all the really hard work for us and we just need to #useThePlatform.
There are three types of caches you'll likely deal with in Remix applications:
Cache-Control header.Cache-Control headers.
| { | |
| "name": "workshop-setup", | |
| "version": "1.0.0", | |
| "description": "This is the common setup script for most of my workshops", | |
| "bin": "./setup.js" | |
| } |
| import { useSyncExternalStore } from 'react' | |
| /** | |
| * This will call the given callback function whenever the contents of the map | |
| * change. | |
| */ | |
| class ObservableMap extends Map { | |
| constructor(entries) { | |
| super(entries) | |
| this.listeners = new Set() |
I was poking around trying to figure out all the packages I have access to publish and got curious. So I write this little script to determine the download stats for all the packages I have publish access to.
Feel free to try it yourself. Just change the username passed to getUserDownloadStats.
By default, the stats are sorted by their average daily downloads (descending). That should give you an idea of the most "popular" package of a given user relative to how long that package has been around.
You can use it with npx like so:
| import { useReducer, useRef } from 'react' | |
| import { Switch } from '#shared/switch.tsx' | |
| function callAll<Args extends Array<unknown>>( | |
| ...fns: Array<((...args: Args) => unknown) | undefined> | |
| ) { | |
| return (...args: Args) => fns.forEach(fn => fn?.(...args)) | |
| } | |
| export type ToggleState = { on: boolean } |
| { | |
| "name": "workshop-computer-validator", | |
| "version": "1.0.0", | |
| "description": "I use this to validate people's computers have the proper versions of node and npm installed for a workshop", | |
| "bin": "./validate-system.js", | |
| "dependencies": { | |
| "semver": "7.1.3" | |
| } | |
| } |
| function useAbortController() { | |
| const abortControllerRef = React.useRef() | |
| const getAbortController = React.useCallback(() => { | |
| if (!abortControllerRef.current) { | |
| abortControllerRef.current = new AbortController() | |
| } | |
| return abortControllerRef.current | |
| }, []) | |
| React.useEffect(() => { |
| /** | |
| * In our app, we have a few middleware that generate a string of HTML. | |
| * On occassion it's fine to just use dangerouslySetInnerHTML directly for | |
| * those, but that requires that you have a host node for the innerHTML. | |
| * | |
| * In certain scenarios (like tags in <head />), there's HTML that we need | |
| * to insert directly where it is. This component enables that because | |
| * we replace <raw-text> and </raw-text> with empty strings. Effectively | |
| * making whatever's between <raw-text> and </raw-text> inlined in place. | |
| * |