{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "event",
    "type" : "single",
    "title" : "USWDS Monthly Call - January 2022 |Digital.gov",
    "description": "USWDS Monthly Call - January 2022",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2022/01/20/uswds-monthly-call-january-2022/index.json","item" : [
    {"kicker" : "USWDS","title" :"USWDS Monthly Call - January 2022","deck" : "Getting Started with USWDS: Developers","summary" : "New resources for developers who are new to USWDS.","date" : "2022-01-20T14:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","start_date" : "2022-01-20T14:00:00-05:00","end_date" : "2022-01-20T15:00:00-05:00",
      "event_organizer" : "Digital.gov","host" : "U.S. Web Design System","registration_url" : "https://www.eventbrite.com/e/uswds-monthly-call-getting-started-with-uswds-developers-jan-2022-tickets-239379870637","captions" : "https://www.captionedtext.com/client/event.aspx?EventID=4992556&CustomerID=321","authors" : {"dan-williams" : "Dan Williams","james-mejia" : "James Mejia"},"topics" : {
        
            "open-source" : "Open source",
            "software-engineering" : "Software engineering"
            },"primary_image" : { "uid" : "uswds-january-title-card", "alt" :
  "Title card image of multi-colored diagonal shapes with the lines of text on a black background. The first line has Overcoming Your Fear of Data in white text. The second line has January 13, 2022 in yellow text. The Digitalgov logo in white is below the text.", "width" :
  "960", "height" :
  "540", "credit" :
  "", "caption" :
  "", "format" :
  "jpg" },"content" :"\u003cp\u003e\u003ca href=\"https://designsystem.digital.gov/files/monthly-calls/uswds-monthly-call-january-2022-distro.pptx.zip\"\u003eView the slides (PowerPoint presentation, 1.5 MB, 30 pages)\u003c/a\u003e\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 January 2022\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 the first monthly call of the new year: January 2022. And, for January it\u0026rsquo;s some frosty blues for the USWDS logo.\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, I guess, looks like me three years ago — so young, so energetic! 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 available at handbook.tts.gsa.gov/code-of-conduct. 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 2:\u003c/strong\u003e So what\u0026rsquo;s our agenda for today? First we\u0026rsquo;ll show off a few great new site launches. Then I\u0026rsquo;ve got a couple important design system updates.\u003c/p\u003e\n\u003cp\u003eAnd then we\u0026rsquo;ll kick off the new year with a new Getting started tutorial, designed to give anyone interested a straightforward way to learn about a few key USWDS concepts, and a little playground to experiment without worrying about screwing anything up.\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 Two great site launches this month, and the first is \u003ca href=\"https://itvmo.gsa.gov/\"\u003ehttps://itvmo.gsa.gov/\u003c/a\u003e, website for GSA\u0026rsquo;s Information Technology Vendor Management Office, an independent advisor and advocate to help agencies buy common IT goods and services in compliance with procurement laws. Their site — like many of the good new sites we\u0026rsquo;ve seen recently — keeps it simple with a straightforward text-based hero, strong blues, and a focus on clear messaging.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 6:\u003c/strong\u003e And finally, one you might have heard of: \u003ca href=\"https://www.covidtests.gov/\"\u003ehttps://www.covidtests.gov/\u003c/a\u003e — the website that had more visitors on Tuesday than all other .gov sites combined. covidtests.gov works with the US Postal Service to provide four free COVID tests to any household. Their site uses USWDS to deliver a calm, authoritative, and engaging introduction to COVID testing resources, with a clean mix of photography and illustration — keeping it simple and getting it done. Congratulations.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 7:\u003c/strong\u003e Great work, everyone! 2022 is going to be a big important year. 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 8:\u003c/strong\u003e So now, a few product updates.\u003c/p\u003e\n\u003cp\u003eFirst, though, before I get into it, I\u0026rsquo;d like to say thank you to everyone who answered our survey last month. We know it usually stinks to answer surveys — and even short ones have to compete with every other dang thing we\u0026rsquo;re trying to get done day after day. So thanks for trusting us with your time. I really appreciate it.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 9:\u003c/strong\u003e So, moving on to design system releases. We just released USWDS 2.13.1 — a patch release with a few important bug fixes.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 10:\u003c/strong\u003e First, we fixed an input bug with Date Picker in Safari that prevented selections from the Date Picker from propagating into the input field.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 11:\u003c/strong\u003e We also fixed a display bug with the external link icon in Safari. Now external link icons don\u0026rsquo;t have bars on the top and bottom.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 12:\u003c/strong\u003e We also improved a few internal functions. We made some changes to the new divide() function to prevent infinite loops when dividing by zero.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 13:\u003c/strong\u003e We also optimized the performance of the luminance() function — if you use custom colors and find some slow compile times, this release could save you some serious pain and suffering.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 14:\u003c/strong\u003e We also improved our package exports for better compatibility with Webpack 5.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 15:\u003c/strong\u003e And finally, we fixed the display of the Dropdown input in Windows high contrast mode.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 16:\u003c/strong\u003e And that\u0026rsquo;s USWDS 2.13.1 — available now.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 17:\u003c/strong\u003e We also released a new Beta release out now: Beta 2, with some improvements to JavaScript component lifecycles.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 18:\u003c/strong\u003e JavaScript component in USWDS 3.0 Beta 2 allows initialization of components on references on elements other than document.body.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 19:\u003c/strong\u003e This means that our JavaScript components are more flexible and easy to use, and can be more easily rendered after page load when using something like React or Angular.\u003c/p\u003e\n\u003cp\u003eAnd that\u0026rsquo;s USWDS 3.0 Beta 2.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 20:\u003c/strong\u003e And finally, USWDS Gulp: we\u0026rsquo;ve been maintaining our uswds-gulp repo as a way to get teams going using Gulp to compile USWDS stylesheets. But as anyone who\u0026rsquo;s used it can tell you, it\u0026rsquo;s kind of like documentation masquerading as a real package. In a way, it\u0026rsquo;s similar to some of the issues we have with delivering components: there\u0026rsquo;s a lot to copy and paste, and it\u0026rsquo;s very difficult to maintain. If we make changes to the uswds-gulp repo, it can be a challenge for downstream teams to know what changed and how to implement that change in their own gulpfile.\u003c/p\u003e\n\u003cp\u003eWouldn\u0026rsquo;t it be better if we were more able to abstract away the Gulp internals and focus on letting developers customize their input and output settings, and just use our compile functions without copying the source code into their projects.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 21:\u003c/strong\u003e So this is exactly what we\u0026rsquo;ve tried to do with the next version of uswds-gulp, USWDS Compile — a new USWDS compiler package, built from uswds-gulp, but built to be a real package and a real project compiling dependency.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 22:\u003c/strong\u003e We tried to make it straightforward: you install the package and import it into a gulpfile. Then you have access to its settings and functions. It has a simple, documented API, and can do everything that uswds gulp can do, with far fewer lines of code.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 23:\u003c/strong\u003e This results in less project overhead. uswds-gulp was a pain to maintain. USWDS compile has no complicated peer dependencies or multi-line install commands. There\u0026rsquo;s no copying gulpfiles. No searching for lines in a gulpfile to update. And no worrying that updating the dependency will break or wipe out your customizations.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 24:\u003c/strong\u003e And there\u0026rsquo;s no installing from GitHub. USWDS Compile is a real package in the npm registry. In fact, it\u0026rsquo;s the first package we\u0026rsquo;ve published as a scoped package to npm, scoped to our uswds organization. As we move forward to USWDS 3.0, you\u0026rsquo;ll see us publish more scoped packages, that is packages that begin @uswds-slash.\u003c/p\u003e\n\u003cp\u003eThere are a few important benefits to scoped packages. First, it keeps all USWDS packages together. It\u0026rsquo;s also more secure — we\u0026rsquo;re the only ones who can publish a uswds-scoped package, so — as we move forward — if you\u0026rsquo;re wondering whether a package that has USWDS in the name is really published by us, look for the @uswds org scope. And finally, it\u0026rsquo;ll be easy to know which packages we support. If it\u0026rsquo;s published to our org, it\u0026rsquo;s our package and we support it!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 25:\u003c/strong\u003e We\u0026rsquo;ll dig into USWDS Compile a bit more in today\u0026rsquo;s tutorial, but for now I\u0026rsquo;ll point you to the new \u003ca href=\"https://github.com/uswds/uswds-compile\"\u003euswds-compile repo\u003c/a\u003e. uswds-compile is currently out as a beta release, and we urge you to check it out and give it a shot. If you currently compile with Gulp, it could be worth using uswds-compile, and if you\u0026rsquo;re a current user of uswds-gulp, definitely check out uswds-compile. At some point soon — after we release the final 1.0 version of uswds-compile — we\u0026rsquo;re going to be archiving uswds-gulp.\u003c/p\u003e\n\u003cp\u003ePersonally, I\u0026rsquo;ve been waiting for these improvements for some time, and I\u0026rsquo;m really happy to release them today!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 26:\u003c/strong\u003e And now: Getting started with USWDS — a step-by-step tutorial.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ve spent a lot of time over the last few months trying to make it easier to get started with the design system — to make it easier to introduce key concepts and techniques to developers who are new to working with USWDS.\u003c/p\u003e\n\u003cp\u003eThis month, I\u0026rsquo;d like to walk you through a new tutorial project we\u0026rsquo;ve started as a GitHub repo. Because there\u0026rsquo;s only so much you can learn, sometimes,  by reading docs — sometimes it can be really helpful to just jump into some code. So we developed a small, simple Jekyll site whose purpose is to guide folks through the process of installing USWDS into a project.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ll walk through:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eInstalling the design system source code into a project,\u003c/li\u003e\n\u003cli\u003eCompiling USWDS styles,\u003c/li\u003e\n\u003cli\u003eAdding USWDS code to a page or site,\u003c/li\u003e\n\u003cli\u003eHarmonizing USWDS with any existing CSS, and\u003c/li\u003e\n\u003cli\u003eCustomizing USWDS to adapt to your project tone and needs.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eSo let\u0026rsquo;s get to it. I\u0026rsquo;ll get started by heading over to our \u003ca href=\"https://github.com/uswds/uswds-tutorial\"\u003euswds-tutorial repo on Github\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 27:\u003c/strong\u003e  DEMO\u003c/p\u003e\n\u003cp\u003eDuring the demo, Dan walked attendees through a new USWDS tutorial on Github, which helps developers get started with installing and using USWDS code on an existing project. The tutorial first installs a simple non-USWDS Jekyll site you can host locally, then you progress through the tutorial by installing USWDS and integrating it into the site. We encourage you to give it a shot and let us know if it\u0026rsquo;s helpful to you.\u003c/p\u003e\n\u003cp\u003eHere\u0026rsquo;s what you\u0026rsquo;ll learn:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eHow to install USWDS source code from npm\u003c/li\u003e\n\u003cli\u003eHow to install the USWDS compiler \u003c/li\u003e\n\u003cli\u003eHow to set up the compiler and compile USWDS source code\u003c/li\u003e\n\u003cli\u003eHow to add USWDS CSS and JavaScript to a project\u003c/li\u003e\n\u003cli\u003eHow to add the USWDS Banner and Identifier\u003c/li\u003e\n\u003cli\u003eHow to integrate USWDS styles and existing project styles\u003c/li\u003e\n\u003cli\u003eHow to customize USWDS\u003c/li\u003e\n\u003cli\u003eHow to optimize USWDS and use less unused CSS\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 28:\u003c/strong\u003e And that\u0026rsquo;s “getting started with USWDS”: installing, compiling, adding, harmonizing, and customizing. And there are plenty of places to go from there. To try it for yourself, head over to the \u003ca href=\"https://github.com/uswds/uswds-tutorial\"\u003erepo on Github\u003c/a\u003e and follow the instructions in the README.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 29:\u003c/strong\u003e So let\u0026rsquo;s move on to Q\u0026amp;A.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 30:\u003c/strong\u003e Thanks for joining today’s USWDS monthly call. Next month, the monthly call will be on February 17, 2022, the third Thursday of the month, and we\u0026rsquo;ll be talking about how we\u0026rsquo;re thinking about USWDS API and what that means for where we go after USWDS 3.0.\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 visit designsystem.digital.gov/about/community 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\u003eFor our first monthly call of 2022, we\u0026rsquo;ll take a look at a new tutorial focused on getting started with the design system. Our team will also demo a new getting started guide for developers, with improved guidance for how to install, compile, and begin to customize the design system.\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 this year.\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" :"2022-01-06-uswds-monthly-call-january-2022.md",
      
      "filepath" :"events/2022/01/2022-01-06-uswds-monthly-call-january-2022.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/events/2022/01/2022-01-06-uswds-monthly-call-january-2022.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/events/2022/01/2022-01-06-uswds-monthly-call-january-2022.md","slug" : "uswds-monthly-call-january-2022","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2022/01/20/uswds-monthly-call-january-2022/"
    }
  ]
}