Chris Sandvik csandman

Safari's date-picker is the cause of 1/3 of our customer support issues

...and obviously we're building a workaround. But I'm absolutely flabbergasted that a standard <input type="date"> HTML field, in a standard browser, from a company that bases its reputation good design, could be so dreadful.

The context

I'm the developer for a startup that sells a genetic test to recommend medications for high blood pressure. For medical reasons we need to know our customers' birth date. Most of our customers are in their 60s or older. We've found that many of them use iPads or iPhones. And they're the ones who complain to our customer support that our site is unusable.

The problem

Update, March 2022: As of macOS 12.3, Aegisub r9198 and v3.3.2 (wangqr fork) no longer crash on launch.

Download a pre-built binary

ver. 9018-rcombs-local-6a556aac6: https://elifessler.com/aegi/6a556aa-Aegisub.app.zip (129.6 MB, built 2021-12-23)

Or, build it yourself

Chakra React Select

UPDATE: I finally made an NPM package for this component! It is made with TypeScript, and now has a fully customizable styling system. It is also far ahead of this wrapper at this point. Check it out here if you'd like: https://github.com/csandman/chakra-react-select

In order to use this component, you can implement it and use it like you would normally use react-select. It should accept all of the props that the original takes, however customizing the theme or the components could break this implementation. There are also a few extra things you can do with this wrapper that pull from the chakra library.

You can pass the size prop with either sm, md, or lg. These will reflect the sizes available on the Chakra <Input /> component (with the exception of xs because it's too small to work).
In your options objects, you can add the key isFixed to emulate the exa

Tiny wrapper component for React-Datepicker to stylistically fit with Chakra-UI 1.x.

<DatePicker selectedDate={myDate} onChange={(d) => console.log(d)} />

Clearable version:

<DatePicker selectedDate={myDate} onChange={(d) => console.log(d)} isClearable={true} />

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

Reddit API

I could not find a simple example showing how to consume the Reddit API to get the comments for a post. This shows step by step how to authenticate and the endpoints to request.

Setup

You need to create an app to get an app id and secret. Go to https://www.reddit.com/prefs/apps and at the bottom of the page under "developed applications" create a new app or view a current one.

If you click "edit" to open the app view you will be able to see the app id and secret, these are required for authentication.

	import { Node, nodeInputRule } from "@tiptap/core";
	import { mergeAttributes } from "@tiptap/react";

	import { uploadImagePlugin, UploadFn } from "./upload_image";

	/**
	* Tiptap Extension to upload images
	* @see https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521#gistcomment-3744392
	* @since 7th July 2021
	*

	// try it : https://codesandbox.io/s/sample-next-ts-rhf-zod-9ieev

	import React from "react";
	import { useForm } from "react-hook-form";
	import { zodResolver } from "@hookform/resolvers/zod";
	import { z } from "zod";

	import type { FieldError } from "react-hook-form";

	// JSON.stringify(error) will not work, because of circulare structure. So we need this helper.

	// util/copy-attachments.js

	// This is supposed to copy all files to the url where next.js expects them as a static file.
	// The example I have is too tailored to my library to make any sense to anyone else.
	// However, the theory is: static file is expected at /some/url/hey.png
	// When running next.js in dev, server.js will serve this url instead, because this file is not in
	// the public folder, but is instead in the content folder I manage.
	// When building, I run this script (see package.json example below) which will move hey.png
	// to public/some/url/hey.png.