Skip to content
Origami Design System

Origami Newsletter, February 2021

Posted on by Lee Moody.
Tagged with Newsletter

TL;DR:This issue is a big one. It covers our progress toward the recently announced npm migration; a new Origami Image Service placeholder image feature; a new Origami Build Service feature to help teams keep components up to date; and a whole bunch more.

Top Things

Some of the bigger Origami news since our last issue:

Dropping Bower Support

We’ve been making excellent progress towards migrating Origami components from Bower to the npmjs registry. Origami tooling has been updated, and services such as the Origami Build Service are almost ready too.

With the release of npm7 we think now is a good time to drop Bower support. To find out what it means for your team, and what benefits we hope to achieve, see last month’s announcement.

Placeholder Images

The Origami Image Service can now generate placeholder images at specified dimensions and quality. It’s a super useful feature to support prototypes and testing. 🎉

Here’s an example placeholder request, for an image that’s 500px square, of maximum quality:

https://www.ft.com/__origami/service/image/v2/images/placeholder/?width=500&height=500&quality=lossless&source=test

A placeholder image which displays the width, height, format, and quality of the image requested as text within the image.

Build Service Updater

The Origami Build Service helps teams include components in projects quickly, without having to worry about setting up potentially complicated build steps. However it can be tricky to know when a Build Service request is out of date, and including old versions of components which could be upgraded. Now the Build Service has a URL updater page which can check a Build Service URL and let you know which of your components are out of date.

The Build Service updater. For a given Build Service URL it displays a table of requested components which shows the requested version, the latest version, whether it is out of date or not, and where to find migration guides to upgrade as required.

Special Thanks

Huge thanks to Erin Ferguson for helping us write last month’s announcement and for organising training for the team, we can’t wait and look forward to sharing what we learn!

Broader Update

A digest of other things that have happened since our last issue:

  • DEPRECATED: o-assets has been deprecated since it is not used widely and will no longer work for npm only components. There is a new proposal for how we could build with unique component assets in the future.
  • MAJOR: o-test-component has been updated to follow V2 of the Origami Specification, which drops support for Bower. It will support the testing of Origami tools and services as we migrate.
  • MINOR: o-footer-services adds “a Nikkei company” brand strip, similar to o-footer.
  • MINOR: o-icons adds a label, label outline, and restore icon.
  • MINOR: o-share adds a new “corporate” share icon to support an experimental enterprise feature, super-gifting.
  • MINOR: o-tracking improves efficiency when multiple calls are made to oTracking.click.init.
  • MINOR: origami-build-service has had some significant updates. First, we identified and fixed a cross site scripting vulnerability in the demos endpoint — did you know Github adds references for forked pull requests to your repository? Second, we have an experimental V3 api (a work in progress) which will support npm only Origami components and drop features we no longer require. Third, we added the URL Updater discussed above.
  • MINOR: origami-image-service adds a new placeholder feature, as discussed above.
  • MINOR: origami-labels adds support for beta releases (when working on an Origami component you can now add a release: beta github label to release a beta version on merge).
  • MINOR: origami-specialist-title-logos adds FT Forums logos.
  • MINOR: Polyfill Service has seen a number of improvements since our last update.
    • Improvements in CI: Dramatically reduced the time it takes to complete by only testing the polyfills which have changed. Updated to test against the latest versions of all browsers.
    • New polyfills: Element.prototype.getAttributeNames, HTMLSelectElement.prototype.selectedOptions, URL.prototype.toJSON
  • PATCH: o-colors ensures saturation and luminance values are percentages to stop Sass deprecation warnings from being emitted.
  • PATCH: o-cookie-message prevents back/forward cache from showing the cookie message after a reader has already accepted or rejected cookies (credit to Oliver, nice!)
  • PATCH: o-grid is less annoying. Did this Sass warning get you down? “WARNING: The ‘snappy’ grid mode is deprecated and will be removed in the next major version of o-grid…” We’ve removed the warning since the snappy grid is still used on the stream and article pages of ft.com, with no immediate plans to redesign them for the default, fluid grid which new projects use. Warnings should be useful, not frustrating.
  • PATCH: o-layout fixes overflow on viewports smaller than the max container width, where content may wrap or scroll instead.
  • PATCH: o-topper has received a number of visual improvements and bug fixes. Thanks Keran (😭🇨🇦), Gus, and Nick for your work on that.
  • PATCH: o-video fixes a bug which caused video playback to hang when ads failed to load (thanks again to Gus for that one).
  • To support the switch to npm more Origami tools and services have been updated or received major/beta releases, including: