A Node.js CLI tool to detect and list Tailwind CSS border-width related classes in your project files with their exact locations.
A CLI tool to replace Tailwind CSS breakpoint variants from sm:/md:/lg:/xl:/2xl: to max-sm:/max-md:/max-lg:/max-xl:/max-2xl: with precise class extraction based on Tailwind's official extractor logic.
class and className attributesmax- prefix
Except where otherwise specified, the alt attribute depend on what the image is intended to represent, as described in the following sections.
The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt attribute does not change the meaning of the page.
So, in general, alternative text can be written by considering what one would have written had one not been able to include the image.
| function App() { | |
| return ( | |
| <> | |
| {(() => { | |
| const [isOpen, setOpen] = useState(false); | |
| return ( | |
| <> | |
| <Button onClick={() => setOpen(true)}>First</Button> | |
| <Popover isOpen={isOpen} onOpenChange={setOpen}> | |
| ... |
| function HooksSeparator<T>({ | |
| setup, | |
| children, | |
| }: { | |
| setup: () => T; | |
| children: (prop: T) => ReactNode; | |
| }) { | |
| return children(setup()); | |
| } |
| import type { Dispatch, DispatchWithoutAction, ReactNode, SetStateAction } from 'react'; | |
| import { useCallback, useState } from 'react'; | |
| /** | |
| * The implement a hooks version of React PowerPlug’s `<State />`. | |
| * https://renatorib.github.io/react-powerplug/#/docs-components-state | |
| * | |
| * @example | |
| * <State initial={false}> | |
| * {({ state: isOpen, setState: setOpen }) => ( |
なんでもないようなことを書きたい。少し考えてみて、それが今の僕の求めているものだと気づいた。意味とか、理由とか、そういう目的ありきの思考パターンの外で、ただなにかを感じられるようになりたい。
僕は昔から、正しさを探していた。たぶん物心がついたくらいのころからしばらく、あらゆる物事には正しいやり方があり、唯一の答えがあるという世界認識をしていた。理屈っぽかったし、そこから逸脱することが気持ち悪かった。
なにかふざけたことをするときには、そのモードに入るためのスイッチを意識的に切り替えなければならなかった。オンかオフの2方向しかない、間のない機械的なメカニズム。しかしその先にも正しさからの逸脱はなく、今あるのとは別のもう一つの正しさの体系があるだけだった。
学校の課題で一番苦手なのは作文だった。どれくらいのものかと言うと、一文字も書けないまま数時間フリーズしてしまう程度には書けなかった。答えがいろいろあるということも理由の一つではあったが、いま考えると、自分がイメージできる正解の線が見つからなかったからだと思う。もちろん、一文字の綻びもない完全な解答が存在するとまでは考えていなかったが、それでも、こういう場合にはこういうことを書くもんだ、という正解パターンの型が常に存在するようには思っていた。
その型を見い出して実演できるだけの技量などは到底なかった。けれど完璧主義者の僕にとっては、不格好でもとりあえずやってみて60点の解答を目指すよりは、失敗の形跡を残さずに0点を出した方が自尊心を傷つけずに済んだ。当時、国語の成績はむしろ良い方だった。
| <?php | |
| // Implementation like lodash’s `sampleSize()` | |
| // https://lodash.com/docs/4.17.15#sampleSize | |
| function array_sample_size(array $array, int $size = 1) | |
| { | |
| $size = min($size, count($array)); | |
| $keys = array_rand($array, $size); | |
| if (!is_array($keys)) { |
| const plugin = require("tailwindcss/plugin"); | |
| const rem = (px) => `${px / 16}rem`; | |
| // https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/ | |
| const getFluidSize = (minSize, maxSize, minWidth = 640, maxWidth = 1280) => { | |
| const v = (100 * (maxSize - minSize)) / (maxWidth - minWidth); | |
| const r = (minWidth * maxSize - maxWidth * minSize) / (minWidth - maxWidth); | |
| return `clamp(${rem(minSize)}, ${v.toPrecision(3)}vw + ${rem(r.toPrecision(3))}, ${rem( |
| // https://standard.shiftbrain.com/blog/default-action-for-click-event-of-a-element | |
| import gsap from "gsap"; | |
| import ScrollToPlugin from "gsap/ScrollToPlugin"; | |
| import { forceFocus } from "./dom-utils"; | |
| gsap.registerPlugin(ScrollToPlugin); | |
| window.addEventListener( | |
| "click", |