Figma has a “wireframe view” that might help here as a fallback, if it means keeping images etc out of memory, though it would be up to the app to switch into that. (And actually I’m not even sure if that would work)
Feb 3, 2023 • 4 tweets • 2 min read
feels pretty good
Here's the full interaction, complete with hover indicators.
|
Note that you can interact with text directly either: a) when editing text or b) when the text tool is selected. This will mean you can't create text on top of other text, but I'm guessing this is okay.
Feb 3, 2023 • 4 tweets • 2 min read
In @figma, holding shift while drawing a selection box over items will: 1. select deselected items 2. deselect selected items
Is this the right behavior? Have you ever accidentally selected / deselected items while shift-selecting?
@figma I remember working out some more complicated logic here with a rule like "if any new items are being added to the selection, don't deselect any other items"
Jan 11, 2023 • 10 tweets • 2 min read
Remind me next time to migrate the database before shipping runtime validation 💀
In tldraw’s beta db, there were lots of different versions of our data scattered around, including some from the wild times before we wrote client-side migrations, and some that just included broken data, x = NaN etc.
Dec 15, 2022 • 6 tweets • 1 min read
The ChatGPT thing really made me appreciate how quickly AI goes from novelty to expectation. Airplane Wi-Fi phenomenon
The bar just keeps getting higher, meaning a lot of cool stuff is going to fall into the “neat? I guess?” range
Dec 14, 2022 • 5 tweets • 2 min read
Another canvas battle: what happens if you start drawing a selection box and then scroll using your mouse wheel / trackpad?
Most apps only update the selection box when you move your cursor. The correct behavior (imo) is to update that selection box whenever your cursor's position in the document changes.
Dec 14, 2022 • 5 tweets • 7 min read
1200 shape drag challenge feat. @tldraw@excalidraw@framer@MiroHQ@mural. Winner is... Mural!
@tldraw@excalidraw@framer@MiroHQ@Mural For completeness, here's figma / figjam. Plenty smooth, though I think not as fast as Mural's. Also all these tests are on an M1 macbook, so this is about the best you could hope for.
Dec 14, 2022 • 4 tweets • 1 min read
speed it up
Changes here are mostly moving some updates out of react (updating a element’s style directly rather than setting a style prop in jsx). We also skipped a few redundant updates to state and skipped a lot of rafs
Dec 4, 2022 • 9 tweets • 2 min read
in a world where all you need to do is draw boxes and stuff, vanilla js + html canvas can be silly fast
The scene here has two HTML canvases: one for the elements and one for the indicators. Each frame, it checks a flag to see whether it needs to render the elements; and another to see whether it needs to render the indicators.
Nov 29, 2022 • 4 tweets • 1 min read
Is there a James Hoffman equivalent for other things other than coffee? Highly opinionated but fair and extremely knowledgeable maven person for ______?
There’s Ian McCollum of Forgotten Weapons, who shares some (hundreds of) amazing stories and mechanical details about historical firearms
Nov 28, 2022 • 4 tweets • 1 min read
TIL be careful with `Array.every` and empty arrays.
Paging the symbolic logic crew.
There are no dragons.
Every dragon is a lizard.
Every dragon is not a lizard.
Nov 27, 2022 • 9 tweets • 3 min read
@ctjlewis Oh boy I have a bunch of thoughts here:
@ctjlewis First, Figma acquired the very talented Visly team a few years ago, I imagine they’ve been working on something in design to code handoff.
Nov 2, 2022 • 12 tweets • 4 min read
did an afternoon experiment with @preetster / rough.js style lines today
The premise is that for each line, instead of drawing a straight line, you draw a cubic bezier curve with slightly (seedly) random offsets to each of the points / control points.
Oct 31, 2022 • 4 tweets • 1 min read
writing on a galaxy tab
The latency on these devices in the browser isn’t great, though it’s workable. Here’s a comparison between an ultra minimal web app (vanilla js, HTML canvas) and tldraw.
Oct 16, 2022 • 4 tweets • 1 min read
finally! an excuse to add animation
looks like all our obsessive perf optimizations for dragging / resizing interactions also means this thing sings for animation
Oct 16, 2022 • 4 tweets • 1 min read
guess it's my turn to implement these interactions
"Regular" logic (via @diegohaz) 23epw7.csb.app
Oct 15, 2022 • 6 tweets • 2 min read
prototyping tools! Lots of fun experimentation in this space. I’ve seen ridiculously over-engineered no-code prototypes and built some ridiculously over-engineered code prototypes, too. My advice…
Prototyping is mostly about FAKING something well enough to get useful feedback from users / stakeholders. Take screenshots and animate them. Keynote works! Do the minimum and spend the time saved on more variations of the prototype.
Oct 7, 2022 • 7 tweets • 1 min read
I really hope this becomes a standard across spatial ui / canvas apps. Some of the logic is Figma specific, but a bunch could be abstracted into a UX specification that could be adopted/collaborated on by other spatial app teams.
Conventions are hard to track in software—who came up with multi cursors in a code editor? Option drag to clone?
Sep 3, 2022 • 13 tweets • 2 min read
Here are some things I've learned about undo / redo
The most simple way to think of history is as a stack of previous states. Undoing takes the current state, puts it into a new stack of "redoable" states, and then restores the most recent previous state. Redoing does the reverse. "Doing" something clears the redoable stack.
Jul 16, 2022 • 4 tweets • 1 min read
On a larger React project, should I be writing unit tests for components in Jest? Or should I jump into browser-based testing with something like Cypress?
Let me add some context, since the answers coming in are all over! For tldraw, we’ve got a “pure typescript” core that we can unit test for interactions like resizing or commands like undo / redo.
Jun 1, 2022 • 5 tweets • 2 min read
this "swipe" effect I'm making for @tldraw's eraser is sending major fruit ninja 🤺💫
The trail itself is a perfect-freehand stroke with a tapered start. Unlike a regular drawn line, I'm using an interval to remove the front 10% of the line every other frame.
