Tweet

Steve Ruiz

27 Jun, 9 tweets, 3 min read

A few updates to tldraw.com. First off, lots of perf improvements, even when lots of shapes are on the screen. Slickest SVG canvas on the web.

Slick when creating shapes, too.

I'm also handling window resize events much better. There's a slight debounce before showing shapes that had previously fallen outside of the viewport.

(The gifs so far were all at regular speed, btw)

I've also added a Text and Arrows to the classes that can be used in the code editor, along with a new TextControl for setting text.

We've also got a good start on the code editor's docs.

There's been plenty of under-the-hood work on the code editor (essentially building a public object-oriented API around the private functional one).

And even further under the hood, you'll find a few dozen new tests. Already finding and fixing plenty of bugs, and now that I've got the framework all set up, I'm on my way to total coverage for user actions. Pretty wild to see how many things you can do in this app.

Thanks again to the 92(!) of you who have sponsored me and this project. Check it out for yourself at tldraw.com.

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @steveruizok

Steve Ruiz

@steveruizok

30 Jun

Live cursors are interesting. You don't really want to be constantly sending updates but you do want the cursors to move smoothly and naturally like this. What's the trick?

Here's what it looks like without any animations.

Regular tweens/duration-based animations won't work here because each new update will "redirect" the animation. While the cursor is moving from A to B, a new update may come in that means it should move instead from its current point (C) to point D instead.

Read 6 tweets

Steve Ruiz

@steveruizok

29 Jun

perf breakthru on ios, panning and zooming back to 60 FPS

I was over here staring at the performance tab, all signs green, no dropped frames reported—while also watching things obviously skip around at <30 fps. Super frustrating, couldn't figure it out.

Finally I think, maybe I'm not actually updating the state on every frame? Of course I was, but somehow in a way that didn't quite count for Safari.

Read 7 tweets

Steve Ruiz

@steveruizok

18 May

Let's look at rotation in a canvas UI. Rotation is hard. 💀

When we have a single shape selected, we can start dragging on a handle here and then rotate the shape. The shape rotates around its center point.

When more than one item is selected, we do something a little different. We're actually making two changes to these shapes as we rotate the group. I'll show each change separately.

Read 12 tweets

Steve Ruiz

@steveruizok

16 May

something new

This is building on some of the patterns that I used in globs.design: a normal design canvas space and a code editor that can be used to create things on the canvas.

I've added the ability to create controls like these. A control's values may be used in the code; and when you change the control's value, the code will run again with the new value.

Read 6 tweets

Steve Ruiz

@steveruizok

25 Feb

Turning brush strokes into polygons is fun, but what does a regular dab-style brush engine look like in the browser? brush-engine.vercel.app

This is a *much* easier problem than creating pressure-sensitive stroke polygons. All we do is repeat a texture (in this case, a circle) at a regular distances along a line, with the pressure (real or simulated) determining the size of the texture.

This is how apps like Photoshop or Procreate work. There's some interpolation between points in order to fill in the blank spaces—and you can use a lot more data to determine the texture's size, skew, opacity, etc—but that's the general idea.

Read 5 tweets

Steve Ruiz

@steveruizok

25 Feb

Would you a design tool's exported code in a project?

Ok, some context. I've spent the week researching these kinds of features, maybe it'll help to tweet through it. 🧵

These days, we expect that a modern design tool will include some kind of "inspection" mode where a developer can view dimensions, export values for colors, typography, etc. Pretty basic but a dev can use this information in any kind of project with zero commitment.

Read 13 tweets

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!