Preparing Fur Squared 2024's new technology Sun Nov 26 2023 The new year comes with a refresh of frontend tech and a smoother customer experience for attendees and dealers at Fur Squared. -------------------------------------------------------------------------------- Preparing Fur Squared 2024's new technology =========================================== Published Nov 26, 2023 - 7 min read /-------------- Table of contents --------------\ | Table of contents | | * Preparing Fur Squared 2024's new technology | | * Preparing for 2024 | | * Changes for 2024 | | * What remains? | \-----------------------------------------------/ Two months and no new posts? What have I been up to?! Last year, I brought new life to an ancient registration system used by Fur Squared [L1]. As a direct result of my efforts [L2] : * The convention could open up registration in the first place * Dealers/vendors could pay for their tables * Attendees used to wait three hours to get their badge, this time they only waited at most forty-five minutes at peak times and otherwise were processed in less than five minutes * Convention swag was processed so quickly that the Dealers Den lead thought something was wrong Had I stopped at getting registrations just barely working, attendees would have spent a cumulative 1,700+ hours of waiting in line. Enabling the convention to operate by fixing attendee and dealers registration took only twenty percent of my time. The other eighty percent went towards: * Automating badge printing to a pool of printers. * Using ribbons optimized for printing black and white on the back side. * Adding QR codes to emails for attendees to check in with. * Adding QR codes to badges with unique codes. * Creating several domain-specific web applications designed for scanners: * Registration application where staff check in attendees, confirm attendee identity, and mark badges as received; * Convention swag pickup where staff scan attendee badges, see the rewards they should be given, and record their receipt. * Several administrative tools to otherwise manage or handle special case situations. [I1: A chart where 20% of the time went to registration forms, 50% went to printer automation, 20% went to web apps, and 10% went to admin and badges.] Eighty percent of my time went towards processes and technology that dramatically improved attendee and staff quality of life. It came at a cost — to me. /-----------------------------[cendyne: exhausted]-----------------------------\ \------------------------------------------------------------------------------/ That was five full-time weeks of highly skilled work — on top of the rest of my life. I barely had it done in time for the convention. I delivered on everything I promised and the quality of my product meant that I had no emergency fixes to do during the convention. I got to enjoy most of the convention. Preparing for 2024 ------------------ What is changing this time? I started much earlier. My work began September 10th, 77 days ago. There are still 88 days left before the convention starts (February 22nd). I have plenty of time to deliver high-quality work and to assess what promises I can keep. That said, my quality of life has not been that great during the last seventy-seven days. There were several problems with 2023's registration that needed to be fixed before it went live for 2024. [I2: A legacy form where fields looked antiquated] In short, the old page… * Used a Stripe integration from 2017, which does not support PCI compliance requirements [L3] of the modern day. * Will double-order if an attendee double clicks the submit button. * Is made with multiple inheritance [L4] Django forms with monkey patching [L5] prone to surprises and bugs. * Uses jQuery [L6] from 2018 to rewrite the output HTML from django forms, which were already insane to work with. * Is overall unstable and prone to breaking at any change, requiring around twenty test cases to be executed after every change. * Encodes different assumptions about Fur Squared's Poster policies [L7] than 2024's policies. * Has a clunky lookup and upgrade process tied to keeping track of a stripe charge identifier. * Uses the word "membership" which 501(c)(3) organizations should not use for transactional relationships. * Was confusing for dealers/vendors, as it required their assistants to complete registration prior to theirs. * Is ugly. The existing technology is not suitable to extend and is a time sink of terrible design. /[cendyne: explosion]----------------------------------------------------------\ | It is clear the previous authors cared about coding principles like Don't | | Repeat Yourself [L8] and saw that, with multiple inheritance and monkey | | patching, they could chase this ideal with newfound power. But, the | | implementation became the definition of spaghetti code where wires crossed | | over and under at random to get things done. All the logic, data, | | validation, and mutation were knotted together into an mess that could only | | be extended by worsening its knots. | \------------------------------------------------------------------------------/ It was time for a complete rework of the registration process that attendees, staff, and dealers experience. [I3: A form requesting a name for a dealer / vendor and how many tables they will purchase] Changes for 2024 ---------------- Registration for Fur Squared 2024 [L9] is open! This time, customer-facing experiences are delivered with a React [L10] frontend. I use a bit of Tailwind CSS [L11] and styles from Meraki UI [L12]. [I4: Are you looking to assist a dealer? Here's a code] While I could have gone for Alpine.js [L13] like the admin web apps, I was more familiar with Hono's JSX [L14] implementation, which is like React but for server-side rendering only. React is kind of beefy, so the single page app download is around 250KB uncompressed. /------------------------------------------------------------[kyrmeso: unicorn]\ | Aren't React apps a lot larger? Usually I see them come out around 900KB for | | basic stuff. | \------------------------------------------------------------------------------/ /[cendyne: cooking]------------------------------------------------------------\ | That's the trick! I only used React. If I brought in Redux, Apollo, and | | other things I am not familiar with, it would be much larger. | \------------------------------------------------------------------------------/ /[cendyne: cooking-badly]------------------------------------------------------\ | That said, routing and application state in raw react still is a learning | | experience. I have opinions now on how it should be done. What I have is not | | great, but it is functioning and relatively easy to dissect and understand | | when changes are needed. | \------------------------------------------------------------------------------/ Several frontend and backend changes are now live which improve on the issues described earlier. * It uses Stripe Element [L15], which is up to date, compliant with modern PCI compliance requirements, and enables new payment methods like Apple Pay [L16] and Google Pay [L17]. * Supports 3D Secure [L18] authentication for payments. * Has an asynchronous purchase flow that resists double-charging. * Has a completely new API between the frontend and backend. * Very few instances of surprise breakages, testing has not been burdensome this time. * Supports both the lottery poster policy and the new first come, first served poster tier policy. * Attendees can request a new email with a link to review and manage their attendance. * No mention of "membership". * Dealers/vendors may add and remove assistants at any time prior to the convention with the use of "friend codes". * Collects volunteer information, reducing duplicate data collection and making volunteer data instantly visible. * Is not ugly 😊. Every registration, dealer invite, etc. comes with a clear call to action and shares only the necessary information needed as a transactional email. [I5: A receipt email with a button to edit the registration] At their leisure, attendees may adjust their attendance tier at any time with a new transaction. [I6: Edit your registration, you are at sponsor, would you like to upgrade?] If they're set up with Google or Apple pay, they can get this done in three clicks and no text entry. [I7: Google Pay is selected] This experience is far more convenient, clean, and modern than the old janky customer facing forms. The cost to completely redo the customer experience? Four and a half weeks of full-time work. /[cendyne: distress]-----------------------------------------------------------\ | I need to stop convincing myself this is a weekend project. It is taking 3–4 | | hours every day of the week I have available. | \------------------------------------------------------------------------------/ What remains? ------------- Okay, okay, I've gone on several times about how much time is being sunk into this. It's one of those "Maybe 2025 won't ask so much of me" things. Well, we'll see. There's still more to improve in future years. But, for 2024, what is left on the software side? * I need to finalize all cash based payment flows. * Shift leads need to be able to refund without going into Stripe admin. * Shift leads need to be able to charge for reprinting badges without going into Stripe admin. * Update badge printing code and registration to work together again, since all the registration backend code is new. * Follow up on all the equipment and disposable material stocks before the convention. * Optional, stretch goal: I want to figure out how to scan drivers licenses so check in does not depend on QR codes * Optional, further stretch goal: See if I can get QR code scanning working through a web page on a mobile phone I do need to get back to doing my own things. There's still a backlog of articles from DEF CON that I still need to publish! And other personal things to do. At least this crunch time is coming to an end and I have some holiday time coming up. /--------------------------[cendyne: convention-time]--------------------------\ \------------------------------------------------------------------------------/ Anyway, see you at the convention! -------------------------------------------------------------------------------- [L1]: https://fursquared.com/ [L2]: /posts/2023-04-16-process-engineering-at-a-furry-convention.html [L3]: https://www.pcisecuritystandards.org/merchants/ [L4]: https://en.wikipedia.org/wiki/Multiple_inheritance [L5]: https://en.wikipedia.org/wiki/Monkey_patch [L6]: https://jquery.com/ [L7]: https://fursquared.com/poster/ [L8]: https://en.wikipedia.org/wiki/Don%27t_repeat_yourself [L9]: https://reg.fursquared.com/registration/ [L10]: https://react.dev/ [L11]: https://tailwindcss.com/ [L12]: https://merakiui.com/components [L13]: https://alpinejs.dev/ [L14]: https://hono.dev/guides/jsx [L15]: https://stripe.com/docs/payments/elements [L16]: https://www.apple.com/apple-pay/ [L17]: https://pay.google.com/about/ [L18]: https://stripe.com/docs/payments/3d-secure [I1]: https://c.cdyn.dev/hISA18XR [I2]: https://c.cdyn.dev/EF99JuAA [I3]: https://c.cdyn.dev/1xr2EZMh [I4]: https://c.cdyn.dev/I-VgwUGO [I5]: https://c.cdyn.dev/Bps89s_V [I6]: https://c.cdyn.dev/L7FrLV5g [I7]: https://c.cdyn.dev/IQ2GGXJP