Skip to main content

Duet Design System January 2020 Update

You’re reading the fifth Duet Design System monthly update. This update focuses on new feature and component improvements we’ve been working on.

The past month has kept us rather busy. We’ve spent most of our time helping developers working in the different product teams to get their applications production ready, while also improving the accessibility of Duet Design System’s Web Components.

Compared to the beginning of December, we’re now down from roughly 30 accessibility issues to just 4 non-critical ones. This means that our components now fully support all the common screen reader and OS combinations like:

In addition to accessibility improvements, we’ve also worked on new components. For some time one of the most requested component has been a modal, so we’re happy to tell that Modal is finally out of prototype status and ready for production use.

We’ve also improved the overall automation for Duet’s icon library. Its generation doesn’t include manual steps anymore, which means we’re able to add new icons or edit existing ones much more effortlessly.

Finally, we’re happy to announce that we have a new frontend developer, Nick Williams, starting to work with us to help make Duet Design System even more robust for the teams consuming it. Welcome Nick!

New this month

In this section we’ll highlight every month new features and progress from Duet Design System. This month’s highlights include:

Server side rendering

Server Side Rendering refers to JavaScript application’s ability to render on the server rather than in the user’s browser. Duet’s components now support this and can be rendered on a Node.js server for better performance.

import hydrate from "@duetds/components/hydrate"

hydrate.renderToString(content, {
  clientHydrateAnnotations: true,
  removeScripts: false,
  removeUnusedStyles: false
})

Updated components view

We’ve been working on improving the components listing and created preview images for each component. Additionally Duet’s global search has been improved to make it easier to find a specific component.

Introducing tutorials

To make it easier to learn how to build applications using Duet Design System, we’ve started writing tutorials that currently cover topics like layout creation and server side rendering.

On the roadmap next

  • Our first priority is to onboard new team members and determine together how we want to continue developing features in 2020.
  • The next priority is to focus on a new drag and drop browser based interface builder for Duet’s Web Components.
  • Finally, we’re also focusing on getting the last missing components ready for production usage. For an up-to-date list on progress and what’s under work, view component statuses.

Until February!

Written by Ariel Salminen.

Ariel Salminen.

Get in Touch

Does your team need help? I’m Ariel Salminen, a Design Systems Architect specialized in helping organizations build and maintain design systems. I’m available for both local and remote projects around the world.

Keyboard Shortcuts