{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Webinar Recap: U.S. Web Design System September 2021 Monthly Call |Digital.gov",
    "description": "Webinar Recap: U.S. Web Design System September 2021 Monthly Call",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2021/11/05/webinar-recap-u-s-web-design-system-september-2021-monthly-call/index.json","item" : [
    {"kicker" : "USWDS","title" :"Webinar Recap: U.S. Web Design System September 2021 Monthly Call","deck" : "Where do we go from USWDS 2.0?","summary" : "For our September call, we focused on the future of the U.S. Web Design System (USWDS): Where does the design system go from USWDS 2.0? What did we learn from our 1.0 and 2.0 releases? Read key points and takeaways from this month’s presentation.","date" : "2021-11-05T13:34:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","authors" : {"kathryn-mullan" : "Kathryn Mullan"},"topics" : {
        
            "research" : "Research",
            "usability" : "Usability"
            },"primary_image" : { "uid" : "uswds-2-illio-feature-image", "alt" :
  "A colorful collection of screens and interface components", "width" :
  "1548", "height" :
  "906", "credit" :
  "", "caption" :
  "", "format" :
  "png" },"branch" : "bc-archive-content-3",
      "filename" :"2021-11-05-webinar-recap-u-s-web-design-system-september-2021-monthly-call.md",
      
      "filepath" :"news/2021/11/2021-11-05-webinar-recap-u-s-web-design-system-september-2021-monthly-call.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2021/11/2021-11-05-webinar-recap-u-s-web-design-system-september-2021-monthly-call.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2021/11/2021-11-05-webinar-recap-u-s-web-design-system-september-2021-monthly-call.md","slug" : "webinar-recap-u-s-web-design-system-september-2021-monthly-call","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2021/11/05/webinar-recap-u-s-web-design-system-september-2021-monthly-call/","weight" : "1","content" :"\u003cp\u003eThe \u003ca href=\"https://designsystem.digital.gov/files/monthly-calls/uswds-monthly-call-september-2021-distro.pptx\"\u003epresentation deck and script\u003c/a\u003e from the U.S. Web Design System (USWDS) \u003ca href=\"https://digital.gov/event/2021/09/16/uswds-monthly-call-september-2021/\"\u003eSeptember Monthly Call\u003c/a\u003e are now available. Remember to tune in for the U.S. Web Design System monthly calls every third Thursday of the month.\u003c/p\u003e\n\u003ch2 id=\"we-have-a-new-major-version-coming-in-january-2022-uswds-30\"\u003eWe have a new major version coming in January 2022: USWDS 3.0\u003c/h2\u003e\n\u003cp\u003eFor our September call, we focused on the future of USWDS. Where does the design system go from USWDS 2.0? What did we learn from our 1.0 and 2.0 releases? What challenges can the design system better address as we move forward? How can the design system be ready to grow and evolve alongside the teams that use it? \u003c/p\u003e\n\u003cp\u003eThere were three key points from this month’s presentation. \u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eThe USWDS 3.0 beta program will begin in October 2021.\u003c/li\u003e\n\u003cli\u003eThis new version will do four things:\n\u003cul\u003e\n\u003cli\u003eSignal the end of IE11 support.\u003c/li\u003e\n\u003cli\u003eUpdate to modern Sass Module Syntax.\u003c/li\u003e\n\u003cli\u003eAllow requiring JavaScript for some functionality.\u003c/li\u003e\n\u003cli\u003ePublish versioned component packages.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eHere’s what the next release will not do:\n\u003cul\u003e\n\u003cli\u003eMove straight to cutting-edge CSS.\u003c/li\u003e\n\u003cli\u003eChange markup or look-and-feel.\u003c/li\u003e\n\u003cli\u003eRadically change our JavaScript.\u003c/li\u003e\n\u003cli\u003eRemove the familiar USWDS omnibus package.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"we-want-to-support-informed-incremental-design\"\u003eWe want to support informed incremental design\u003c/h2\u003e\n\u003cp\u003eStarting with USWDS 3.0, we’ll be publishing individual component packages, in addition to the familiar USWDS omnibus package. Unbundling the design system will allow components to evolve at their own speed and enable projects to tailor their implementation to their unique needs.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eWe want to make it easier to stay up-to-date with the design system.\u003c/li\u003e\n\u003cli\u003eWe want to prevent major changes to some components from blocking teams from updating to critical changes in other components.\u003c/li\u003e\n\u003cli\u003eWe want to make it very clear what’s changed in the design system from version to version so teams can update their implementations intentionally and strategically, at the speed that’s right for their project.\u003c/li\u003e\n\u003cli\u003eWe want you to know how the design system is changing and how these specific changes will impact your project.\u003c/li\u003e\n\u003cli\u003eWe’re going to be more strict about semantic versioning to better communicate the impact of the changes we make from version to version.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"well-be-making-it-as-easy-as-possible-to-upgrade-and-migrate-to-uswds-30\"\u003eWe’ll be making it as easy as possible to upgrade and migrate to USWDS 3.0\u003c/h2\u003e\n\u003cp\u003eWe aim to make an upgrade from the latest version to USWDS 3.0 take minutes, not hours, days, or weeks. Our overall focus is on ease of use over time for designers, developers, and program managers. We learned an important lesson with USWDS 2.0: that migration pain makes any change that much harder.\u003c/p\u003e\n\u003cp\u003eThe biggest migration update, from a developer’s perspective, will probably be related to the Sass Modules work, but we expect that most projects will be able to update only a few lines of code to successfully migrate. Other USWDS conventions (tokens, settings, functions, mixins, and component JavaScript) will continue to work as expected.\u003c/p\u003e\n\u003cp\u003eFollowing along with the USWDS 3.0 \u003ca href=\"https://github.com/uswds/uswds/discussions/4365\"\u003ebeta program\u003c/a\u003e will not only help teams better understand what will be changing, but will help the design system make the upgrade process as seamless and painless as possible for everyone.\u003c/p\u003e\n\u003ch2 id=\"resources\"\u003eResources\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eLearn more about the \u003ca href=\"https://github.com/uswds/uswds/releases\"\u003eUSWDS release history and versions\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eSee the progress we are making on our \u003ca href=\"https://designsystem.digital.gov/about/product-roadmap/\"\u003eproduct roadmap\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eJoin the \u003ca href=\"https://chat.18f.gov/\"\u003eUSWDS Slack channel\u003c/a\u003e. \u003c/li\u003e\n\u003cli\u003eJoin the \u003ca href=\"https://designsystem.digital.gov/about/community/\"\u003eUSWDS Community\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eFollow us on \u003ca href=\"https://github.com/uswds\"\u003eGitHub\u003c/a\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"qa-follow-up\"\u003eQ\u0026amp;A follow-up\u003c/h2\u003e\n\u003cp\u003eHere is a snapshot overview of our lively question and answer session for your reference.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eQ: Will there be a shared (tokens or styles) package for all these new independent components? And what would the versioning strategy be?\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eA: Yes, there will be a core package that contains global tokens, settings, functions, and mixins. Each new package will follow semantic versioning, starting at 1.0.0. We will continue to maintain the bundled package (USWDS), which will follow semantic versioning as well, continuing from its 3.0.0 release. We expect that the core package will be pretty stable. The settings, functions, mixins, and token APIs should not change frequently.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eQ: Will this also make it easier for teams to create (and even share) their own components? Like a template repo for building new components and/or a list of other non-official components, so we can see what other teams have built and shared?\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eA: Yes, we hope that the changes in USWDS 3.0 will make it easier for teams to contribute back to USWDS. We’re re-organizing the codebase around components, so we will be better able to formalize component requirements and provide a more clear template for component development.\u003c/p\u003e\n\u003cp\u003eNon-official and community components are a possibility down the road. I think we see USWDS as something of a hardware store for components, and there may be a practical way forward for components that aren\u0026rsquo;t the “store brand.” The changes we’re making now make this more possible, but it’s not something that’s coming in the near term.\u003c/p\u003e\n\u003cp\u003eIn the coming months, we will start to discuss component APIs—this may also be a way forward for developing component variants that share common core functionality.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eQ: Seems like 3.0 will have more customer-facing UX changes, and 2.0 is more on restructuring. Is that true?\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eA: Not exactly. USWDS 2.0 was a restructuring, but it was more of a complete re-architecting of the “language” of the platform, rebuilding the way we use styles, tokens, and variables. In a way, USWDS 2.0 was a complete rewrite of the USWDS style API. \u003c/p\u003e\n\u003cp\u003eNeither USWDS 2.0 or USWDS 3.0 are focused on UX changes. USWDS 3.0 is what we might think of as a platform for change rather than the change itself. USWDS 3.0 changes a couple key ground rules (and how we organize and distribute the design system), so we’re better able to evolve moving forward, and teams are better able to evolve with us.\u003c/p\u003e\n\u003cp\u003eSo, USWDS 3.0 will not be a release with a lot of dramatic user-facing changes! It is more of a signpost release. For example, USWDS 3.0 will drop IE11 support, but it doesn\u0026rsquo;t all-of-a-sudden implement CSS Grid or custom properties. It will allow requiring JS for some interactions but doesn’t go all-in on something like web components. USWDS 3.0 allows us to more easily make these enhancements down the road.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eQ: What assurances do agencies have for continued support and development for years down the line?\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eA: The USWDS team knows that long-term support is critical to building a successful service and earning the trust of the teams that use it. In addition, GSA recognizes the value of providing shared services that accelerate the adoption of modern systems, increase operational efficiencies, deliver better results and better value overall. Our expectation is to be able to provide ongoing support and continue our development for the foreseeable future.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eQ: Would SSG/R (static site generation/server-side rendering) be a consideration as part of the conversation when relaxing the “no JavaScript” rule? Or at least the concept of hydration as a prerequisite to preserving progressive enhancement so that even for users who have JavaScript enabled, content can still be delivered first and fast?\u003c/strong\u003e \u003c/p\u003e\n\u003cp\u003eA: Yes, hydration is a good model here. We’re committed to developing with performance in mind and content up front.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eQ: Is there any file showing the current version of USWDS, so I can be sure that I’m on it?\u003c/strong\u003e  \u003c/p\u003e\n\u003cp\u003eA: Consult \u003ca href=\"https://github.com/uswds/uswds/releases\"\u003eGitHub\u003c/a\u003e for our current releases. Check your `package.json` file if you’ve downloaded the USWDS package from NPM. Look for a line like \u003ccode\u003e“uswds”: “^2.8.0”\u003c/code\u003e—in this case, the active USWDS version is 2.8.0.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eQ: How does Layout Paragraphs play with USWDS?\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eA:  You can see a USWDS Paragraph components implementation on the \u003ca href=\"https://designsystem.digital.gov/documentation/implementations\"\u003eUSWDS Implementations page\u003c/a\u003e or at \u003ca href=\"https://www.drupal.org/project/uswds_paragraph_components\"\u003edrupal.org\u003c/a\u003e.\u003c/p\u003e\n"}
  ]
}