They/Them. Open source. Comic books. Board games. Prev: Babel, Yarn, Flow, Parcel, Biome
![function Example() {
let [cardNumber, setCardNumber] = useState()
let { inputProps, ...otherStuff } = useInputMask({
mask: "0000 0000 0000 0000",
value: cardNumber,
onValueChange: setCardNumber,
})
// <MyInput> needs to accept all of these props:
//
// inputProps = {
// value,
// onInput, onPaste, onFocus, onBlur,
// onKeyDown, onKeyPress, onKeyUp,
// }
return <MyInput {...inputProps}/>
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreifvrvm2ajojsa27syjr55k2mfya2t7yk76ipihy7tppgdtviuxcda)
![Title: Anchor Positioning Containment
Section 1: In this example, the tooltip should be constrained by the scroll area of the dialog component. Its positioning should prefer the “max-height” relative to the parent scroll area and should close when its anchor is not visible [images of a scroll area inside of a dialog slowly being scrolled and the position of the tooltip flipping to use the largest available area and then disappearing when the button it is anchored to scrolls away]
Section 2: As the tooltip gets larger it should try to remain centered within the x-axis of the scroll area, and its height should fit the content as long as there is space available in the y-axis [images of the tooltip content getting longer and longer, staying within the width of the scroll area, and eventually wrapping to a new line, then overflowing with an ellipsis when there is no longer enough room for more lines]](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreigp77fkfj4pv47uramgqpzyx5t6pedn3soypm4pupq7cvfuuen2n4)
![let text = "aaabbbccc"
let start = 3
let end = 6
// Today: Need to call .slice() 3 times
let before = text.slice(0, start)
let inner = text.slice(start, end)
let after = text.slice(end)
// Proposal: string.slices()
let [before, inner, after] = "aaabbbccc".slices(3, 6)
// ["aaa", "bbb", "ccc"]
// Example: Highlighting search result text
let text = "NYC flights are booked:"
let search = "flights"
let start = text.indexOf(search)
let end = start + search.length
let [before, match, after] = text.slices(start, end)
let html = `<span>${before}<em>${match}</em>${after}</span>`
// >>> "<span>NYC <em>flights</em> are booked"](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreiamuoalerwstz6ipz4jqidnneh52cv7wrzduogaiymxmaebtfdxra)
![// This dreaded "global state" does not make you a terrible developer.
let connection = null
// Look this isn't so bad...
function db() {
assert(connection != null, "Call connect() first")
return connection
}
// Your database tests can know they need to call this every time
export async function connect() {
assert(connection == null, "Do not call connect() twice")
connection = new Database()
await connection.connect()
}
// And this one after each test...
export function close() {
assert(connection != null, "I cannot close() what is not opened")
connection.close()
connection = null
}
// Look how nice it will be to just import this function directly
export function booksList() {
return db().query("SELECT * FROM books").all()
}
// Or this one... do you really need some DatabaseServiceFactoryController?
export function booksGet(id) {
return db().query("SELECT * FROM books WHERE id = ?").get([id])
}
// The answer is no, feel free to be a little bit bad
export function booksAdd({ title }) {
return db().query("INSERT INTO books (title) VALUES (?)").run([title])
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreicom5jpuimd7x2rqho5uafel6v7khrzsdqznyqm6f3mjxqldohyv4)
![// JS strings are represented as UTF-16, but most langs/tools
// have preferred using UTF-8 for many years, which complicates interop
//
// We can never change the underlying representation of JavaScript strings, but
// still many tools need to operate on raw utf-8 bytes.
//
// It would be nice if we could do use some familiar string APIs but operating
// on UTF-8 bytes
// The body returned by fetching example.com will return UTF-8 bytes.
// We can access those bytes directly in an ArrayBuffer.
let response = await fetch("https://example.com/")
let buffer = await response.arrayBuffer()
// You can then construct a Uint8Array from that buffer and each element
// will represent one UTF-8 code unit.
let bytes = new Uint8Array(buffer)
// However, now you're just working with numbers
console.log(bytes) // >> Uint8Array(1256) [60, 33, 100, 111, 99, 116, ...]
// If you want to do any string-like operations on these arrays, you basically
// need to do everything yourself
// Proposal:
// What if we had a new TypedArray class that had string-ish methods?
let utf8 = new Utf8String(buffer)
// This is still just a Uint8Array/ArrayBuffer under the hood
utf8 instanceof Uint8Array // true
utf8.buffer === buffer // true
// Indices would still just be numbers
// (They wouldn't automatically convert to UTF-16 strings)
utf8[0] // >> 60
// But accessing malformed data would return U+FFFD (�) the "Replacement Char"
utf8[malformedCharIndex] // >> 65533
// Then we can start getting into the fun bits: Now you can have familiar
// String-like APIs that operate on UTF-8 encoded bytes rather than UTF-16
utf8.trim() // >> Utf8String
utf8.padEnd(5) // >> Utf8String
// For operations that need another string, you'd use other Utf8Strings
let other = Utf8String.from("<h1>Example Domain</h1>")
utf8.includes(other)
utf8.localeCompare(other, { sensitivity: "base" })
// Maybe even regex operations could still work
utf8.match(/Example/)
utf8.replace(/Example/, Utf8String.from("Paragon"))](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreifaj4xneiwoeyricso3ihgdhlnpf7fxsmftxmlno6xjvhvrpbyrwi)
They/Them. Open source. Comic books. Board games. Prev: Babel, Yarn, Flow, Parcel, Biome