TL;DR:
This issue features a big Fastly cost saving, new font formats, and a major release of Origami Build Tools.
Top Things
These are some of the bigger things we’ve done over the last month.
Fastly Cost Saving
This month we updated our Fastly configuration for the Origami Build Service and Origami Image Service. Our new Fastly contract meant that our previous architecture was no longer good from a cost perspective (it used to be fine with our old contract).
With the update we’re saving ~£5,000 per month.
Thank you Sam Parkinson for calculating the cost saving and helping this work get prioritised.
This will help improve the performance of so many of our sites including ft.com, Specialist Titles, internal products and tools.
As we helped fix a double font loading bug on ft.com at the same time, we don’t have statistics on how much the new font format improved the performance of ft.com for our readers. But both updates together made a huge improvement:
Visually complete: 8% faster
DOM content loaded: 17% faster
Total page size: 18% smaller
Big thanks to Nick Colley for making the suggestion that we include woff2; and for helping us deploy the updates quickly to Customer Products projects!
Origami Build Tools v10
We released another major of Origami Build Tools. This release includes some significant maintenance work updating a number of outdated or deprecated dependencies. But more excitingly we’ve made improvements to the workflow for component maintainers too 🎉
If you contribute to Origami components or your team actively maintains one we recommend upgrading to v10. Please let us know if you have any issues or feedback.
Simplified Interface
To help engineers new to Origami components get up and running with component development we simplified the most common command. To start working on a component with Origami Build Tools it was common to run the following command:
obt demo --run-server --watch --verbose
That’s a lot of options to understand at first. Instead we simplified this to:
obt develop
If you’ve never used Origami Build Tools before and would like to understand what this command does, see the Origami Build Tools readme.
Speed Improvements
Origami Build Tools now compiles component code faster. It’s an important metric for Origami Build Tools as it helps keep the feedback loop short between an engineer making a code change and seeing the result of that change.
As an unscientific example on an FT MacBook Pro laptop: the quickest of three o-table demo builds is 2.18 seconds over 4.11 seconds — around a 53% improvement.
We improved the performance of Origami Build Tools by creating two new packages:
Financial-Times/scrumple: a fast (and scrappy) JavaScript bundler for developing Origami components, based on a now-deleted tool called Pax.
This month our special thanks goes to Rowan Manning! In case you missed the news, at the start of May Rowan moved from the Origami team (O&R) to Customer Products. So a big thank you to Rowan for all their work on and leading Origami over the years 😃. Jake Champion is the stand-in Tech Lead, if you have questions about Origami please contact them instead of Rowan.
Broader Update
A digest of other things that have happened since our last update:
NEW: Financial-Times/origami-workshop: We created a small tool to help attendees of the Intro to Origami workshop complete the manual build tutorial. The tool helps attendees focus on building projects with Origami components, instead of setting up build tools which may differ depending on their team.
MINOR: Financial-Times/create-origami-component: Updates component boilerplate to make it easier to create new origami components. Adds .eslintrc.js and .stylelintrc.js configuration, and includes our new Github Actions.
MINOR: Financial-Times/polyfill-library: Updates the Intl.PluralRules polyfill to deliver to Edge <18 (another thanks to an external contributor, Github user glsignal).
MINOR: Financial-Times/origami-screencap-service: We’re a small team that have to prioritise work carefully, so we decided to decommission the origami-screencap-service this month. It was a 10% project which allowed us to capture screenshots of any website. Please let us know if this service would be useful to your team, and we’ll consider reviving it with a support policy.
MINOR: Financial-Times/o-share: With the help of the design team, we updated o-share to be inline with the style used on our article pages. For example, o-share now supports icon labels and has no margin at larger sizes. This helps design consistency across projects and allowed us to remove custom overrides from the article page.
MINOR: Financial-Times/origami-component-converter: this project helps us process Origami components ready to be published to npm. It used a static last of components before but now uses Origami Repo Data to get the latest list of components dynamically. That’s one less thing to think about when creating a new component!
PATCH: Financial-Times/o-meter: Fixes styling for Chrome 83 and the latest version of Microsoft Edge.
MAJOR: Financial-Times/origami-ci-tools: We updated our CI tools to use the latest version of Origami Build Tools, which will speed up the testing and deployment or Origami components. We also fixed some bugs related to publishing packages without namespaces or with names that differ from the repository name.
PATCH: Financial-Times/origami-website: We’re always improving our documentation, specification, and tutorials. This month we made quite a few changes representing feedback from workshops and our work on our build tools.
PATCH: Financial-Times/origami-image-service: as well as the money saving Fastly work discussed previously, we updated the Image Service to convert png image to jpeg if the image has no alpha channel (no transparency). Doing so should result in smaller images, slightly lower storage costs for us, and help keep our sites and apps quick to load for readers.
PATCH: Financial-Times/origami-registry-ui: as Origami Build Tools primary focus is building components not projects, we no longer use Origami Build Tools to build the front end of the registry. Instead we run a few npm scripts.
PATCH: Financial-Times/o-syntax-highlight: o-syntax-highlight no longer errors when a code tag has other CSS classes. In addition it does not error if a a code block has no language defined, as this may prevent other code blocks that are correct from highlighting, instead it provides a warning in the console.
PATCH: Financial-Times/o-quote: We updated the o-quote documentation with usage descriptions from the design team (thanks Josh Wade).
PATCH: Financial-Times/o-grid: The snappy mode of o-grid has been deprecated. We updated the deprecation notice to output less, once per Sass entry point (warnings should be helpful not annoying).
PATCH: Financial-Times/origami-image-service: as well as the money saving Fastly work discussed previously, we updated the Image Service to convert png image to jpeg if the image has no alpha channel (no transparency). Doing so should result in smaller images, slightly lower storage costs for us, and help keep our sites and apps quick to load for readers.
PATCH: Financial-Times/origami-registry-ui: as Origami Build Tools primary focus is building components not projects, we no longer use Origami Build Tools to build the front end of the registry. Instead we run a few npm scripts.
PATCH: Financial-Times/o-comments: Style changes to increase the scan-ability of comment replies (credit to Glynn Phillips and the Content Innovation team!)
All Components: We added our new stylelint configuration to each Origami component, so engineers may get immediate feedback in their editor when authoring component Sass instead of having to run the Origami Build Tools verify command.
All Components: We configured all our components to automatically approve and merge development dependency updates when made by Dependabot (during work hours). This saves us manually doing this work for ~90 repositories so we can focus on more important tasks.
All Components: We added a Github Action to apply the Origami type label to new issues, to help us manage incoming work for components, services, and other project types.
