Posted on
by Lee Moody.
Tagged with Newsletter
TL;DR: Featuring FT Professional updates; front-end technology tooling maps; TSX templates and Storybook demos; and the bit where we failed to deliver around 9k image requests each day due to a confusing and unprompted error, affecting pretty much every FT Group product.
Some of the bigger Origami news since our last update:
We’re getting ready to support the rollout of FT Professional’s rebrand! This month Origami has been working with FT Professional to gather requirements and identify which Origami components require a new professional theme, ahead of a Q2 rollout.
As part of that work Thomas Moody has been designing Professional themed Origami components and adding them to our shared Figma UI Kit – this allows designers to pull reusable components into a design, rather than have to design everything from scratch all the time. We partnered on button updates (these are surprisingly complex, with many states) and made a bunch of other improvements at the same time.
It was fun pairing with Tom on that and picking up a few more Figma tricks as an engineer: designers and engineers unite!
These changes are aimed at increasing design team efficiency and improving designer/engineer hand over by aligning our design tooling and implementation. We have a lot more to do here, as many components are missing or difficult to work with design side. An engineer can’t engineer with a re-usable capability if we don’t design with them in mind.
Origami as a project started over 9 years ago. We’ve come a long way since then with all sorts of new components, tools, and services. Yet the technologies we use within Origami components themselves have stayed largely the same. This kind of adaptable stability is, I think, pretty remarkable and to be celebrated.
However the technology landscape within and outside the FT has changed substantially. Front-end frameworks are mature, we no longer need to support IE11, and there’s a whole ecosystem around design systems which didn’t exist before. What opportunities are we missing to help the FT scale? Wouldn’t it be great if a designer could move from Internal to Specialist teams, or vice-versa, and get up and running quickly with a familiar suite of tools; if a designer in Professional could select a portion of their ft.com design and apply the Professional sub-brand with a click? If they could hand over to an engineer who could see at a glance which re-usable component to pull in, and what options to apply, instead of asking in a back-and-forth conversation or scrabbling around documentation for a few hours? Finally, what if the developer experience for the most used, most recommended technology choices at the FT were prioritised – no more figuring out how to integrate an Origami component with [insert framework of choice] for the 100th time?
Having a thorough understanding of the technology landscape at the FT will help us make technical decisions to achieve such things. Of course, we have our reckons – our assumptions – but we’ll also be reaching out to teams to ask. We would be super grateful for your time. We’ll be looking to put together a front-end technology tooling map which can answer:
We’ll use this to make decisions about how we author Origami components in the future – expect a Request For Comment 😊
As you may know, the Origami team has been working on re-creating Origami component demos in Storybook. We’ve been working at it slowly around competing priorities for forever, having first started talking about Storybook in a Nov 2021 blog post – it’s been a turbulent time for the team during this period, having lost and regained headcount, which slowed down projects outside Business As Usual (BAU) significantly. This isn’t a moan, it’s an excuse.
Anyhow, now we’re a healthier team again at 3 engineers, we’re still trying to do too much. We’ve decided not to work on any more Storybook or TSX templates during Q2 – though we will come back to it, eventually, else maintain multiple systems which make up our custom component registry forever.
For now, our focus will be on supporting the rollout of the new FT Professional sub-brand (excited eek!) and working on a technical architecture proposal for modern Origami components (amazed and curious oooooohhh!) – so we can much more effectively scale to support new brands and sub-brands in the future and better support collaboration across groups.
We’ve created Storybook demos and TSX templates for 26 of our components which need them – most recently this month, o-table 🎉 There are 14 left which we’d like to do, tracked in Epic OR-15 now we’re on Jira. If you’re keen to have a particular interactive demo in Storybook which isn’t already there, or you would benefit immediately from a TSX template rather than copy-pasting and noodling around with HTML attributes, let us know and we’ll get that prioritised especially for you ❤️ One off pull requests, bootcamps, and secondments are also very welcome!
Speaking of BAU. The Origami Image Service surprise exploded experienced a technical malfunction this month, resulting in many thousands of errors (around 9k over 24 hours), with each error representing a failure to deliver a requested image to a reader – impacting pretty much every FT Group product that displays images. We hadn’t made any changes and struggled to identify a cause. Thankfully, a bunch of excellent people across the FT offered to help. It’s a path which lead me to a conversation about ciphers – way out of my comfort zone, I thought I was a humble, front-end focused engineer.
Anyhow, that’s all resolved now so don’t fear, reader! We mitigated the issue reasonably swiftly and subsequently found a fix – there’s an incident summary in Slack and a PR with technical details if you’re interested.
My point is, what a wonderful, supportive culture we have here at the FT. A huge special thanks this month goes to everyone who took time out of their day to help in the #engineering channel, the incident channel, and in subsequent pairing over video call. I want to give a particular shout out to Alex Muller 🙇 and Rowan Manning 🙇, if it wasn’t for the time we spent pairing I’m sure it would have taken much longer to get to a proper resolution.
A digest list of some other things that have happened in March:
t symbol support for formatting for time following FT’s Editorial style.ft-date-format to support formatting time following FT’s Editorial style. To upgrade see the o-date migration guide – nice one, Chee Rabbits and Leigh-Ann Gant!GenericInput TSX template, to use custom form inputs within an o-forms field – which includes label and related layout styles.