{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "event",
    "type" : "single",
    "title" : "USWDS Monthly Call - December 2021 |Digital.gov",
    "description": "USWDS Monthly Call - December 2021",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2021/12/16/uswds-monthly-call-december-2021/index.json","item" : [
    {"kicker" : "USWDS","title" :"USWDS Monthly Call - December 2021","summary" : "Get started with the design system and a how-to demo of template creation and a prototyping approach.","date" : "2021-12-16T14:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","start_date" : "2021-12-16T14:00:00-05:00","end_date" : "2021-12-16T15:00:00-05:00",
      "event_organizer" : "Digital.gov","host" : "U.S. Web Design System","registration_url" : "https://www.eventbrite.com/e/uswds-monthly-call-rapid-prototyping-with-uswds-dec-2021-tickets-223514707507","captions" : "https://www.captionedtext.com/client/event.aspx?EventID=4961960&CustomerID=321","authors" : {"philip-levy" : "Philip Levy","dan-williams" : "Dan Williams"},"topics" : {
        
            "design" : "Design",
            "design" : "Design",
            "open-source" : "Open source",
            "software-engineering" : "Software engineering"
            },"content" :"\u003cp\u003e\u003ca href=\"https://designsystem.digital.gov/files/monthly-calls/uswds-monthly-call-december-2021-distro.pptx.zip\"\u003eView the slides\u003c/a\u003e (PowerPoint presentation, 1.3 MB, 27 pages)\u003c/p\u003e\n\u003cdiv class=\"usa-accordion accordion\"\u003e\u003ch3 class=\"usa-accordion__heading\"\u003e\n    \u003cbutton\n      class=\"usa-accordion__button\"\n      title=\"View \"\n      aria-expanded=\"false\"\n      aria-controls=\"accordion-1\"\n    \u003e\n      \u003cspan class=\"icon\"\u003e\n          \u003csvg\n            class=\"usa-icon dg-icon dg-icon--standard margin-bottom-05\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          \u003e\n            \n            \u003cuse xlink:href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/uswds/img/sprite.svg#content_copy\"\u003e\u003c/use\u003e\n          \u003c/svg\u003e\n        \u003c/span\u003e\u003cspan class=\"src\"\u003e\n        \u003cstrong class=\"kicker\"\u003eSlide by Slide\u003c/strong\u003eUSWDS Monthly Call Script for December 2021\n        \u003c/span\n      \u003e\n    \u003c/button\u003e\n  \u003c/h3\u003e\u003cdiv\n      id=\"accordion-1\"\n      class=\"accordion-body usa-accordion__content usa-prose\"\n    \u003e\u003cp\u003e\u003cstrong\u003eSlide 1:\u003c/strong\u003e Hi there and welcome to the U.S. Web Design System monthly call for December 2021. And, for December it\u0026rsquo;s a good old fashioned red and green to match the wreaths and bows you may be seeing on doors and windows around your neighborhood, too.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 2:\u003c/strong\u003e My name is Dan Williams, and I\u0026rsquo;m the USWDS product lead and this is my avatar, which maybe looks a little like a younger version of an imagined me. Others say, not so much. Thanks for being here!\u003c/p\u003e\n\u003cp\u003eFirst, I\u0026rsquo;d like to mention that we\u0026rsquo;re recording this monthly call, so please refrain from turning on your camera. We will manually turn off any cameras to ensure the recording doesn\u0026rsquo;t show us on camera.\u003c/p\u003e\n\u003cp\u003eI’d also like to remind you that all attendees must abide by the TTS Code of Conduct, which is \u003ca href=\"https://handbook.tts.gsa.gov/about-us/code-of-conduct/\"\u003eonline\u003c/a\u003e. We’ve posted the link to the code of conduct in the chat.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ll be posting other links and references into the chat as we go along, and I encourage you to ask questions in the chat at any time. If any member of our team can answer your question in the chat, we\u0026rsquo;ll do so, otherwise there\u0026rsquo;ll be some time for questions and answers at the end of the hour. Also, be sure to introduce yourself in the chat as well — it\u0026rsquo;s nice to know who\u0026rsquo;s here. It\u0026rsquo;s good to have you here today.\u003c/p\u003e\n\u003cp\u003eFor those of you who find the chat distracting, you’re welcome to close or hide the chat window during the main presentation. You can reopen it later during the Q\u0026amp;A session at the end of this call.\u003c/p\u003e\n\u003cp\u003eSo thanks! And, with that, let\u0026rsquo;s get started!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 3:\u003c/strong\u003e So what\u0026rsquo;s our agenda for today?\u003c/p\u003e\n\u003cp\u003eFirst we\u0026rsquo;ll show off an interesting new site launch.\u003c/p\u003e\n\u003cp\u003eThen I\u0026rsquo;ve got a couple design system updates related to our newest design system version.\u003c/p\u003e\n\u003cp\u003eAnd then the main event: Rapid web prototyping with USWDS — where we\u0026rsquo;ll take a look at a few simple tools and techniques that can help you get building and testing with USWDS code faster than you might have imagined.  \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 4:\u003c/strong\u003e So let\u0026rsquo;s get into it with site launches.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 5:\u003c/strong\u003e We\u0026rsquo;ve only got one to show off this month, and it\u0026rsquo;s \u003ca href=\"https://zerotrust.cyber.gov/\"\u003ehttps://zerotrust.cyber.gov/\u003c/a\u003e — home of the Zero Trust Cybersecurity Principles that support executive order 14028. While the public comment period has ended on some of the concept documents this site is introducing, it\u0026rsquo;s still worth visiting to learn a bit more about Zero Trust —a security principle that no actor, system, network, or service operating either outside or within a security perimeter is trusted. The zerotrust.cyber.gov site is a straightforward USWDS documentation site that gets the job done. No fuss, no muss. Don\u0026rsquo;t overthink it.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 6:\u003c/strong\u003e Great work, everyone! I\u0026rsquo;m sure there\u0026rsquo;s a lot going on behind the scenes, and I expect that 2022 will be a big year. Get your rest now! And be sure to let us know when a new site launches, either with an email to \u003ca href=\"mailto:uswds@support.digitalgov.gov\"\u003euswds@support.digitalgov.gov\u003c/a\u003e or a note on the USWDS public Slack channel.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 7:\u003c/strong\u003e Which brings me to a quick point about the design system: If you don\u0026rsquo;t tell us, we won’t know. One of the nice things about using the design system, is that you don\u0026rsquo;t need to buy anything from us, set up an interagency agreement, or interact with the design system at all if you don\u0026rsquo;t want to. But that also means that we don\u0026rsquo;t always know just who\u0026rsquo;s using it — we can scan and find some things, but we can\u0026rsquo;t scan and find people. \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 8:\u003c/strong\u003e And that\u0026rsquo;s why we currently have a survey open for feds — and we\u0026rsquo;ll post \u003ca href=\"https://touchpoints.app.cloud.gov/touchpoints/7038a8b3/submit\"\u003ethe link to that survey\u003c/a\u003e in the chat — and this survey is essentially a way for folks to just let us know who you are and what project or projects you support. It\u0026rsquo;s a really short survey that should hopefully take you no longer than 5 minutes. Many of you have likely already taken it. If you have, thanks! If not, consider it. The more we know, the better we\u0026rsquo;ll be able to plot a good path for the design system, and help connect teams to others in the same situation.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 9:\u003c/strong\u003e So now, a few product updates.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 10:\u003c/strong\u003e We just released USWDS 2.13.0 — lucky release 13 — ending the year with an accessibility focused release. \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 11:\u003c/strong\u003e It improves the accessibility and the voicing of File Upload, so screen reader software will announce when you\u0026rsquo;ve added files to the File Upload component. \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 12:\u003c/strong\u003e We also fixed a somewhat edge-case-y issue with the mobile nav, where there could be a way to escape the focus trap of the active nav panel. Now the mobile nav makes the background completely inert when it\u0026rsquo;s active. \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 13:\u003c/strong\u003e We also improved the default ARIA labeling in the Date Picker, properly using aria-labelled by and aria-described by to contextualize the component. \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 14:\u003c/strong\u003e And we also resolved the many deprecation warnings you\u0026rsquo;ve undoubtedly noticed while compiling USWDS Sass. Now, we\u0026rsquo;ll fully resolve this when we move to Sass Modules in USWDS 3.0, but for now we got rid of it by removing all traces of division from the Sass codebase! To be honest, I do not get how the new division function emulates division with recursive multiplication. But Andrew Duthie does, and he helped us with this, that\u0026rsquo;s all that\u0026rsquo;s important. \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 15:\u003c/strong\u003e And finally, we improved the resilience of icon-only buttons. Well, what\u0026rsquo;s an icon-only button and where do we have them? We don\u0026rsquo;t have many, but this is something like the small Search button that has only a magnifying glass, or the social buttons in the footer that include only a social media icon. These examples both used to be built with background images — and while the background image solution is accessible and supports screen readers, it could be a problem for sighted users if, for some reason, the image path was broken and did not load. In that case it would just be a blank button with no obvious functionality.\u003c/p\u003e\n\u003cp\u003eNow, to fix this we needed to make a breaking change. Here\u0026rsquo;s the breaking change you asked for.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 16:\u003c/strong\u003e So, if you use the small search button or the footer social buttons on your site, you\u0026rsquo;ll need to update your makeup when you upgrade to USWDS 2.13.0. It\u0026rsquo;s a small change, but each of these components now requires an inline image. We\u0026rsquo;ve outlined the necessary changes in the \u003ca href=\"https://github.com/uswds/uswds/releases/tag/v2.13.0\"\u003eUSWDS 2.12.0 release notes\u003c/a\u003e  — and we\u0026rsquo;re linking to the release notes here in the chat as well.\u003c/p\u003e\n\u003cp\u003eNow this is just the kind of annoying breaking change caused by a necessary accessibility improvement that we\u0026rsquo;ll be trying to address as we move beyond USWDS 3.0. It shouldn\u0026rsquo;t be painful to stay up to date with the design system — and 2022 is the year we do something about it. Stay tuned. I expect to talk more about this in January and February.\u003c/p\u003e\n\u003cp\u003eBut for now, when you update to USWDS 2.13.0, be aware that there\u0026rsquo;ll be some modest effort to update those two components. \u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 17:\u003c/strong\u003e So that USWDS 2.13.0 — the last minor release of the year and perhaps the last minor release before USWDS 3.0.0. At some point in the not-too-distant future, we\u0026rsquo;ll be mostly freezing 2.x development so we can work exclusively on 3.0.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 18:\u003c/strong\u003e And now the good stuff: Rapid Web Prototyping with USWDS!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 19:\u003c/strong\u003e And to talk about prototyping, let me introduce Philip Levy — a contractor on the USWDS team who\u0026rsquo;s really been digging into using the design system for prototyping — and who\u0026rsquo;s developed a number of useful techniques for improving the speed of a USWDS prototyping workflow. And with that, I\u0026rsquo;ll pass it over to Philip. Take it away!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 20:\u003c/strong\u003e [PHILIP] Agenda\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 21:\u003c/strong\u003e Why rapid web prototyping?\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eRapid prototyping accelerates learning, reduces risk, and improves outcomes.\u003c/li\u003e\n\u003cli\u003eTesting small interactive prototypes generates meaningful feedback early in the process.\u003c/li\u003e\n\u003cli\u003eUsing USWDS tokens and utility classes aligns design and development around a common design language.\u003c/li\u003e\n\u003cli\u003ePrototyping can involve the whole team and create a shared understanding of what you’re building\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 22:\u003c/strong\u003e A shared understanding\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 23:\u003c/strong\u003e How we do it\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 24:\u003c/strong\u003e [DEMO of rapid web prototyping]\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 25:\u003c/strong\u003e Philip walked us through these quick ways to get started with web prototyping:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eDon\u0026rsquo;t bother compiling. Use compiled CSS and JS with \u003ca href=\"https://cdnjs.com/libraries/uswds?utm_source=slack-uswds\u0026amp;utm_medium=social\u0026amp;utm_campaign=decmc\"\u003eCDNJS\u003c/a\u003e.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eUse a tool like \u003ca href=\"https://codepen.io/?utm_source=slack-uswds\u0026amp;utm_medium=social\u0026amp;utm_campaign=decmc\"\u003eCodePen\u003c/a\u003e to code in the browser with instant rendering.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eCut and paste component code from \u003ca href=\"https://designsystem.digital.gov/components/overview/?utm_source=slack-uswds\u0026amp;utm_medium=social\u0026amp;utm_campaign=decmc\"\u003ethe USWDS website\u003c/a\u003e right into your CodePen.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eCustomize the look and feel with \u003ca href=\"https://designsystem.digital.gov/utilities/?utm_source=slack-uswds\u0026amp;utm_medium=social\u0026amp;utm_campaign=decmc\"\u003eutility classes\u003c/a\u003e.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eWe then walked through a few templates in CodePen: a \u003ca href=\"https://codepen.io/pglevy/pen/gOxNXGY?utm_source=slack-uswds\u0026amp;utm_medium=social\u0026amp;utm_campaign=decmc\"\u003eblank slate\u003c/a\u003e, \u003ca href=\"https://codepen.io/pglevy/pen/abBgJbe?utm_source=slack-uswds\u0026amp;utm_medium=social\u0026amp;utm_campaign=decmc\"\u003epage boilerplate\u003c/a\u003e, and a simple \u003ca href=\"https://codepen.io/pglevy/pen/mdMZXOX?utm_source=slack-uswds\u0026amp;utm_medium=social\u0026amp;utm_campaign=decmc\"\u003eUSWDS user flow\u003c/a\u003e. Once you’re comfortable with CodePen and want to move to the next level, \u003ca href=\"https://github.com/uswds/uswds-sandbox?utm_source=slack-uswds\u0026amp;utm_medium=social\u0026amp;utm_campaign=decmc\"\u003euswds-sandbox\u003c/a\u003e can be an effective starting point for more complex Jekyll-based prototypes.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eFor more information, see the \u003ca href=\"https://federalist-d5e7c07c-6ffa-4b8e-935f-49a7df24a505.app.cloud.gov/preview/uswds/uswds-sandbox/rwp-with-uswds/?utm_source=slack-uswds\u0026amp;utm_medium=social\u0026amp;utm_campaign=decmc\"\u003ehandout\u003c/a\u003e provided during the monthly call.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 26:\u003c/strong\u003e Thank you so much for that, Philip. So, let\u0026rsquo;s move on to Q\u0026amp;A.\u003c/p\u003e\n\u003cp\u003e[Q\u0026amp;A]\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 27:\u003c/strong\u003e Thanks for joining today’s USWDS monthly call. Next month, the monthly call will be on January 20, 2022, the third Thursday, and we’ll be starting off the new year by discussing “Getting started for developers” and some big improvements to USWDS Gulp.\u003c/p\u003e\n\u003cp\u003eAs always, I encourage you to join our community in the #uswds-public Slack channel so you can follow our progress, get answers, and contribute to the discussion.\u003c/p\u003e\n\u003cp\u003eFollow us on Github at github.com/uswds, check out our website, and \u003ca href=\"https://designsystem.digital.gov/about/community/\"\u003evisit this site\u003c/a\u003e to join us and your colleagues across government who are using USWDS.\u003c/p\u003e\n\u003cp\u003eThank you, and see you next month!\u003c/p\u003e\n\u003c/div\u003e\u003c/div\u003e\n\n\u003chr\u003e\n\u003cp\u003eHow can designers and developers work together to design in code? How can prototypes help answer critical design questions? How can USWDS help you build faster than you might have thought possible?\u003c/p\u003e\n\u003cp\u003eJoin the USWDS team for our December call, as we look at rapid prototyping with USWDS.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThis event is part of a monthly series that takes place on the third Thursday of each month. Don’t forget to set a placeholder on your personal calendar for our future events.\u003c/em\u003e\u003c/p\u003e\n\u003ch2 id=\"about-the-uswds\"\u003eAbout the USWDS\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"https://designsystem.digital.gov/\"\u003eThe U.S. Web Design System\u003c/a\u003e is a toolkit of principles, guidance, and code to help government teams design and build accessible, mobile-friendly websites backed by user research and modern best practices.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://designsystem.digital.gov/\"\u003eThe U.S. Web Design System\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/uswds/uswds/issues\"\u003eContribute on GitHub\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"mailto:uswds@support.digitalgov.gov\"\u003eEmail Us\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://digital.gov/communities/uswds/\"\u003eJoin our community\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://twitter.com/uswds\"\u003eFollow @uswds on Twitter\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n",
      "branch" : "bc-archive-content-3",
      "filename" :"2021-12-06-uswds-monthly-call-december-2021.md",
      
      "filepath" :"events/2021/12/2021-12-06-uswds-monthly-call-december-2021.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/events/2021/12/2021-12-06-uswds-monthly-call-december-2021.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/events/2021/12/2021-12-06-uswds-monthly-call-december-2021.md","slug" : "uswds-monthly-call-december-2021","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2021/12/16/uswds-monthly-call-december-2021/"
    }
  ]
}