May 2024

# May 12

Ask Box just got enhanced animation 🎮 We've overhauled the motion design for both side boxes, making them not only appear more natural but also significantly smoother.

🎁 Bonus for Devs: Behind the scene, we completely eliminated all layout calculations during the animation. This means the animation can be off-loaded completely to GPU, making it not only smoother, but also saving CPU resources for other things.

Build note

Let's start with production, that is, ask.box at the moment. This is how it looks when you open or close the side panel. You may feel that it's smooth enough, but we can do much better. Notice that the "layout" calculation is as much as "style" calculation. That's not great, because "layout" is much more expensive.

The reason why we need to trigger "layout" is because we are animating "width" (not great). We need to animate "width" because it's not possible to resize with "scale" (great!) while keeping the border and border radius intact. Notice the card: it is expanding while side collapsing, but its border and border radius stay the same. We thought this performance is the best compromise to have the beautiful animation.

But we was wrong. We can do better

This is the same animation that we are working on. This is the ultimate animation: there's absolutely zero "layout" calculation! The "style" calculation is as much as the current version, but no "layout":

# May 14

OpenAI's latest model GPT-4o is now available on ask.box. Reasons to switch to to GPT-4o from GPT4-Turbo:

# May 19

We widened the chat area, so you can scroll anywhere on the screen. The scrollbar now stays at the edge, so it should never collide with your text. Even better, we did this without impacting the recent smooth animation 🌸

Build note

In farewell of DevTool's Layers panel, here's the secret sauce of Ask Box's silky smooth (i.e., zero-layout) animation 🎉

This technique leads to today's challenge of the "ugly scroll", which is deemed as a bug by almost 25% (3 persons) of all beta users, including our own CEO / BE dev, despite my protest that it was a feature.

The problem feature root cause reason was that, as shown in the Layers panel above, there are not 1, nor 2, but 3 layers to achieve the smooth animation! In short, the Actual Chat does not know the layout of the Animating Chat, thus the Actual Chat plays it safe and use a narrow, fixed width instead of a fluid one.

That, my friends, is what I'll (hope to) fix today 🤞

# May 28

We added a small little button to copy code block 📋

🙇 This is requested by @hai, so thank you!

# May 29

We now support down to 768 pixels of a screen 🤏 This means you can use Ask Box on smol laptops, tablets, and even phones in landscape position, with complete functionality.

Build note

Ask Box will support more screen sizes soon 🎉 This comes from a personal need, because in one of my jobs, I use a 1024 x 768 px screen. Ask Box currently requires 1024 minimum width, but with stage manager and browser frame, my 1024 px only deliver around 900 px of browser width for good reasons. So anyway, we push it a bit further and Ask Box will soon only need 768 px to deliver!

Fun fact, this means you can also use Ask Box on phones. 768 is much smaller than most phone's screen height (e.g., Pixel has 915 px, while iPhone has 844 px vertically).

This is likely the furthest we can go though. The next breakpoint is around 500 px, which is technically too small as Ask Box requires at least 600 px to run the zero-layout animation. We need another layout to reach phone in vertical screen.

# May 30

You can now Cmd K (or Ctrl K) from anywhere to start a new chat 🧼 You no longer need to focus on the ask box first. Even better, the ask box will be focused automatically for you to start a new chat right away.

We also support Cmd B and Cmd Shift B to toggle the home and settings panels, respectively. For our friends on Windows and Linux, they will be Ctrl B and Ctrl Shift B.

🙇 This is requested by @hai, @nhi, and @chinh, so thank you!

Build note

The sidebar positioning is having a bug but it does look cool

Let's talk keyboard shortcut

# May 31

We use an emoji as our favicon 📮 This is a short term solution while we are working with a real designer instead of me. There's no meaning here, don't read too much into it. It's just an emoji that will stand out in your hundred of tabs.

🙇 Thanks @nhi for requesting this (who actually did not say "favicon" but "something on the sidebar", hopefully it's favicon)