farp
Fabricate Warpcast views quickly.
About
The problem it solves farp simply makes producing user-fabricated content easier and faster. This can have positive side-effects of bringing existing users back or onboarding new users to Warpcast; through content virality. farp is specifically inspired by the proliferation of user-fabricated content that is popular on platforms like X (f.k.a Twitter). There are existing tools for creating fake iMessage screenshots and Twitter posts. So, naturally, I thought "why not for Warpcast?".
How it's made
Challenges we ran into Much of the challenges I faced were in enabling a smooth user experience. This involved debugging niche problems in HTML & CSS and ensuring compatibility between different browser environments. One particular problem was creating a "content editable" div as an alternative to a plain textarea HTML element. This was important to solve as I wanted to give immediate feedback to the user when they are typing a user or channel mention while editing a cast text. To have the effect of mentions colored differently than ordinary text, there were specific DOM manipulation and CSS styling necessary so that the text input being set in state was correct, and the text displayed to the user appeared natural. The end result involved overlaying the content editable div as an inline-block with transparent text and background, and displaying the display text under it with a lower z-index. This ensured the caret and cursor placement from the content editable div line up perfectly with the displayed text underneath, and the cursor is placed at the correct location upon focus. Another interesting problem was a Safari-specific behaviour on mobile wherein the browser automatically zooms in whenever a text input is focused. As I was testing the app myself, I found it unintuitive to zoom out after editing text in order to get a proper screenshot. It was found that this zooming behaviour is caused when the font size of a text input element is less than 16 pixels!