U.S. Web Design July Meeting – Migrating Your Site to USWDS 2

July 24, 2019 posted by



well hi there and welcome to the July 2019 us web design system monthly call let's see huh yes there we are I've updated the design system logo – to reflect these sort of warm summery hues of July we've sort of successfully navigated the July 4th holiday and it's time to get back to the business of improving the experience of government websites so thanks for being here my name is Dan Williams and I'm the project lead of the US web design system I've got somebody coughing in the background you see if that person is you and you're unmuted me that's you come yeah I think yeah back but anyhow I'm the project lead of the u.s. WDS and we've got a great Jennifer today first off I've got some project updates on the state of us WDS and then we're going to spend the bulk of the call talking about migrating to us WDS – with the help of some of our colleagues from logging gov and the Department of Commerce and we should have plenty of time for Q&A if all goes well and timing things out properly so without need further ado project updates so we're planning on releasing us WDS 2.1 in August next month sometime before the next design system call we should be able to spend some more time next month looking at its new features but here's in general what we expect to deliver there a couple couple key things that are coming in 2.1 the first thing is custom values in mix-ins if you if you are one of the admittedly probably handful of people who might have tried to implement custom values for utilities that kind of allows you to divide define a custom token and a custom value that you can pass into a utility a utility class we're going to be sort of expanding that a bit so that that those custom tokens that you might have defined for utility classes can also be used in mix-ins as well to just make that a little bit more a little bit more useful still sort of a pro tool but but that will be coming in 2.1 and perhaps more importantly we're working on one of the things we're working on is is introducing some more modular component imports and what this what this means is that this new feature will allow developers to customize their project CSS by including only the components that your project uses for example this should allow you to include say only the styles for the Gulf banner and the footer in your project CSS if those are the only design system components your project uses this should allow your project CSS to be smaller simpler and more streamlined sort of just with a few customizations before that you might have had to run it through some sort of you might have run it through something that automatically subsets your CSS this should this should make that process simpler and give you only the CSS you need for your project and leave the rest of it behind that's if it all works it looks like it's going to work and it should be coming in August with signed system 2.1 and that's that's pretty exciting and it's worth noting that both of these cool new features are the result of outside pull requests from you all from the design system community and it's worth being really super explicit here that your input your issues your pull requests these things really do matter and they can make a big difference to the future of the project so thank you for that next us WDS and 10x if you don't already know what 10x is 10x is a funding and product development mechanism inside of GSA that helps fund and support technology-based good for government ideas from federal employees across government the design system itself started with 10x funding back when 10x was called the great pitch and we kind of really love the 10x program and we're excited that we have to design system related 10x projects that are moving into the research and prototyping phase so the 10x team will be moving forward with researching and prototyping a couple things barriers to adoption for the design system and working to make recommendations around what we might do or build to increase adoption of the design system it's you know this is sort of up to their team to decide what exactly this means but it could mean you know what are the most requested new components that the design system doesn't have that we should be developing and they be working to develop them or is there some documentation that we're missing what is it that's really a pain point in getting the design system to better adoption and what can we do what can we build to make that better and the other thing they'll be doing is working to improve the functionality and guidance around us WDS forms and inputs so we have the form components templates and guidance necessary to build a broad range of web forms we know that that there are lots of projects that require form functionality that is a little bit more complicated and beyond what we presently provide with our with our standard form inputs and components so the 10x team is going to be working to see what we can do what we can build to allow more complex forms to be built simpler and easier from from our design system kit so these initiatives are going to be starting soon and I'm sure I'll have more to report in the coming months around their progress here in speaking of 10x with 10x program is accepting new ideas new pinches for its next round of evaluations this sort of open season for 10x pitches is open right now and goes until July 30th so if you're interested in trying to get a good for government idea of yours funded and you're a government federal government employee you should head over to 10x gsa.gov to learn more about what they do and what to do to submit a pitch you know 10x pitch submissions are they're really sort of super short I've done a few of these myself they're not like putting together a massive sort of pitch document they're really just a few sentences they're super short and easy to submit through their website you don't need to do much more than to fill in like the blanks in this like 10x style Madlib like we have observed a problem or opportunity we believe that if we do this thing it will result in this benefit for this for this group of people that's pretty much all you need to submit a 10x project and if they look at this project and they evaluate and think it's worth doing some more research into then they'll let you know and they'll move on with it and it could sort of scale up and up and up as I said sign system itself sort of started from this like short pitch and evolved into where it is right now so if you're a federal employee not just give a shot head over to 10x at gsa.gov to learn more about this the 10x program has been a real supporter of the design system from the start and your idea if you if you have a great idea it could be one that takes off and makes a big difference so next up Publix and yesterday we released public sans version 1.00 six this release gets us closer to submitting public stands to Google Fonts and getting distribution through the Google Fonts ecosystem so you can use it either connect to it through Google Fonts like call in in the head of your website or you could so use it in Google Docs over slides so I wouldn't have to make all of my slides and some other software and import them into Google slides this release also it improves the shape of a number of glyphs and improves the overall readability of the typeface and additionally sort of really critically for the google fonts integration it it it introduces a new Python based build process for the font binaries which is powered by something called font make and Google font tools the result of which is that our font binaries of the font files that we distribute are now much more likely to pass the google fonts pre-production checks and so hopefully by the next monthly call we'll have more to announce on this as well so for the remainder of the call we're gonna be talking about migrating to us WDS – and the first thing to mention is that migration is not mandatory it could be useful to your team or your project to migrate if you expect your website to grow and change over the next few years if you're using a design system – is kind of the foundation of what we will be building and developing for the design system over the medium to long term so if you're looking to take advantage of what we build in the future it's worth trying to migrate to design system – now to take advantage of what we'll build in the coming months and years but if you have a stable site that's relatively static and it's based on us WDS one point X like maybe migration isn't worth the effort we don't consider migrating to version 2 – these thoughts like a requirement of using the design system it's really up to your project and your team so the underlying architecture of the design system had some important changes in us WDS – even if the components themselves didn't change their look and feel – drastically a lot changed under the hood with design system – and this means that migrating from us WDS version 1 to do s WDS version 2 is more complicated than pushing a button or importing a stylesheet and migrating involves at least these important steps and we'll see in the discussion later how good my outline of these steps are and what I missed here but the things the things to largely have to do you update your component markup in your templates you're going to need to update the design system CSS and JavaScript you need to use design tokens for your custom styles I'm gonna have to move to design system to mix ins and grids we have a new set of mix ins particularly for something like doing media queries and and we have a new grid as well you're going to need to update your project settings variables if you changed some of the variables in version 1 around changing the output of different styles or colors or whatever in the design system you'll need to do some the equivalent in version 2 bytes edit by um changing one of the theme settings variables in version 2 and you're going to need to update your override classes if you're to have an implementation that has is overriding a default design system style you will need to know that a lot of the class name is changed in between version 1 and version 2 so if you're overriding something have to make sure that your override is is pointing to the proper class name or names in the instance of some some styles now all the styles now use Bam man so if so some things like a button use multiple classes to achieve the desired effect if it wants an outline and it also wants it to be the secondary color it's a chain of classes instead of one big master class so if you're overriding something that will rule that will require changing classes to update to a design system – or possibly addressing multiple classes where you previously addressed only a single one so taken together this is a not insignificant list of things that that you might need to do to to migrate to version 2 but we've been working hard to improve our migration resources and documentation and today we're introducing three important new sections to our documentation and migration resources a spacing unit conversion table a variables conversion table and complete documentation for all of the us WDS version – settings variables and I can show all of these to you now on our website so if you go to design system dot digital dot gov the easiest way to get to them at migration resources is from the migrate to version 2.0 point 3 button right here in the hero it's also available through the documentation side of the site we'll see that in a second but if you come over here to migrate to version 2.0 point 3 will have essentially all the migration resources on on a page we give sort of an overview of of what's changed from version one to version two at a sort of high-level and a little bit of a run-through of how you might begin to integrate tokens into your project we spent some time in the last call talking about tokens and how to use and integrate tokens and I'm not going to talk about it too much here I'm going to go a little bit more into some of these new bits of documentation that we've just added this exists has existed since we launched version 2 this part in mix-ins and and functions but it's important to call out again here because it lists some of the common mix-ins that you would be using in in your SAS and what you might and how they change from version one to version two so one of the critical ones is is the media query mixin if you're previously including the media X in we now have a mixing called at media and that at media mix in except some spacing unit tokens like mobile large or desktop or something like that so it's important to to understand which of the mix ins have changed so if you see an old one in your in your project SAS can update it to the new one one of the so one of the big things that has changed from version one to version two in using design tokens is that we don't we don't we now suggest not just sort of including any spacing unit value written out in like M's Ram's or pixels like we expect that when folks are writing their style sheets that they'll use these units tokens in in a units function so instead of writing for instance sixteen pixels you would do the units function you do units units too which is functionally an equivalent of sixteen pixels though when the design system compiles it usually will compile these in terms of RAM but so if you're so if you're converting from from a pixel based mentality into a units tokens based mentality we now have a sort of a conversion chart to go from one to the other so essentially how this this chart works is that you know if you had previously suspect four pixels and your USO VDS version one stylesheets excuse me you would now use something like point five units that's the equivalent of four is point five units in design system two if you're writing that as a function it would be something like this units zero point five if you're including it in a utility mix in it would be margin top zero point five if you are using it in a utility class be something like margin top 0.5 and in general the way we've done this is with that we've we tend to round up in general if we if something doesn't entirely fit we tend to round up to the next to the next token unless it's within just a pixel or two of the original value so so in general as you're going through and and migrating for version one to version two and you find pixel values in your style sheets you can replace those pixel values with these units functions and this is a relatively easy way to go from one to the other one of the other things that you'll need to do is you go from version one to version two is you'll need to understand if any if you've made some changes to to the settings variables in version one you'll need to sort of make the equivalent change to a settings variable in version two and if and if you were and if your project is accessing any of those version one variables in its sass it should change that to reference one of the version two variables instead so what are how do you go from a version one variable to version two variable so the variables section over here on the migration page essentially shows what the equivalent is in u.s. WDS to 2a us WD as one variable so for instance if you're looking at h1 font size if you said set the ball the value of h1 font size in version one you'd want to make sure for version two that you adjust the value of theme h1 font size and where previously h1 font size might have accepted pixel or rim values in version 1 now it expects a size token currently the h1 font size is set for the 2xl theme font size token on this conversion chart if you see the accepts the size token this will link you over to the font size token section of the docs where you can see what the available size tokens are and how to set them so this this should allow this should allow teams to to audit their old variables and understand what they need to do in version 2 to set equivalent variables this also goes through and says which of the version 2 settings files this new variable exists in in version 1 there was just one there was just one variables file that included all the custom variables for the design system in version 2 we've really expanded the customization that you can do via theme settings variables and thus the variables file has changed from just being a single file to being multiple files that are that are grouped by sort of kind and the and the settings file column over here will point you to which of the version 2 settings files you would find this variable which and it also will link over to the new documentation around this so if I select typography they'll bring us over to the typography section of the new design system settings page and the design system settings page is a brand new page on the site which through all of the settings variables that are available in the design system and it will sort of tell you the variable name it'll give you the default it'll give the kind of value that it accepts and some usage guidance around how that variable is used in the design system and how you might and how you might set that variable so so yeah so so now now there's no there's better guidance around what all of the settings variables are how you might change them what that means for the design system when you change that variable and where to find that variable in the design system there's also a little bit of guidance on the top around how to include these settings files in your project and where to find them in the distribution package this was a bit of the public design system guidance that was sort of critically missing until right now so I'm happy that it currently exists and and folks can be able to really take advantage of the amount of customization that you can do through design system theme settings this includes things like setting setting the values of your theme tokens so that you can change for instance the colors for your project you can change the values of your primary secondary and accent colors via your theme settings that's something that is pretty important for a lot of projects and I'm glad that it is finally documented here so now we have now we have a little bit more comprehensive migration documentation if you look down here migrating to us W s2 is also in the documentation section in addition to being that link from from the home page if we come back here you can also see that it also includes as we've had since the beginning migration by component which shows what the classes were in us WDS v1 and what the class equivalent class is in us WDS v2 and this goes through essentially every class that was available in in v1 and its equivalent class or classes in in the case of some of these modifier classes in us WDS v2 so taken together this is we're continuously trying to improve this sort of canonical resource for all of the things that have changed from version one to version two to help make migration as easy as possible but it is it is a work in progress and it is something that we are going to be looking to sort of continuous feedback to see how we can improve this and make it a better experience for anyone who is migrating right now or is thinking about migrating in the future which kind of leads us to our you know sort of the next part of this is where we you know will really try to we'll really try to talk about really try to talk about migration and talk to some people who have done it some folks who are thinking about it and and then get some questions from you all around where you are with migration and what are what are your concerns what are your experiences so with me today I actually have sort of exciting I have guests it's not not just me here on the call to talk migration I'm here with John Don Moyer who worked on login gov I'm also here with Stan Smith and kyyy from the Department of Commerce and not unfortunately not here but here in my notes is is iris ebook we who worked on the u.s. WDS Drupal theme and specifically I'm migrating that Drupal theme from design system version 1 to design system version 2 so without sort of any further ado I just want to I'll start by introducing John John dawn wire from 18f who worked on the god worked on loggin gov worked on the core team here at us WDS and and has some has some experienced with migrating in the context of login Dhaka I'm going to stop sharing my screen so we can jump into a to more of a regular discussion but I just wanted to sort of start as a question for John to just give a little bit of context around around the project that he worked on and his role in that project yeah I uh need to know okay yeah so i the the login project it's sort of it had a weird migration in the sense that it never it never truly used us to vvs1 it's used it I think in in spirit login was kind of the foundation of login America was being built around the same time as the foundation of what was then the u.s. web design standards and so they kind of happened in parallel but never actually used it as far as it being like an actual CSS framework so the wall yankov as it stands now uses some combination of a CSS and then a lot of styles that like visual styles that were inspired by the u.s. design system so when it came time to migrate to 2.0 we sort of we reached a stage where we have we have our core application but then we also have a number of static sites and there's currently the login gov site there's a developer's documentation site and then there was also talk or potential around building like a help site separately as opposed to being part of our core static site and we realized like you know we really want a design system to kind of wrangle all these things and provide shared style library and so at the time the us WDS 2.0 was in beta so we started to kind of as a proof of concept and to see how this would work in our environment we built it out I think on beta 3 the first version of our style guide and then when the final version came out we had to upgrade to that and it was a bit of a migration because between beta 3 and 2.0 2.0 point 1 which was I think the the actual release version that was within the BEM name and change has happened so we serve still had a lot to do in terms of changing class names rebuilding our documentation site and I was I was involved in that sort of helping with the project and shaping the direction but we actually had another engineer that was helping at the time Andrew Duncan who may or may not be on this call but he did some amazing work and really led a lot of the technical direction on all of this so that was that was a big help on his part so was it it was essentially the two of you you and Andrew who were mostly involved in this in the migration process at the time I say the migration because really we were we weren't yet integrating this into our apps we were kind of building we were building a design system to power a style guide which I can share in a bit that will sort of showcase some of this but the idea being that there there would be a style guide sort of documentation site and then through the use of an NPM published command that would spit out a package that could then be used and included in other applications and then the first testbed of that application which we actually did in the in the beta phases was our developer documentation site which is a pretty pretty simple static site it was a lot of common Styles no no real unique things like some of the rest of the login application has but we did also collaborate with a visual designer on the team making and some other login folks Andrew tears and anyone else who's sort of invested in its success how how how long did this process take and and at least in the context of like migration like how how did the migration process compared to any estimation you might have had for difficulty or time for completion um I think it was actually pretty pretty much in line with what I was expecting there were it was maybe a little bit longer in terms of when I say migration I mean like going from beta 3 2 2.0 point 1 as the library that we were referencing and we did it I think we did it all in a sprint as kind of like one activity that so in like a two-week chunk 2 to 3 of us were all sort of pitching in on the side and like I I sort of got the ball rolling you did a lot of the initial Changez and then some other engineers we sort of broke things down by component to keep track of it so you've made a list of all all the components that we had built us 30 D s overrides for so things like buttons accordions things like that and we made kind of like a checklist and like going through all of these and I think the there was like one or two stray ones that took a little bit longer but for the most part I was just kind of looking at the migration list and I would command F for a class name and then find and replace all of that class name and then every once in a while that would just based on me sort of how I was finding and replacing sometimes I didn't mess something up and like over replace too much but once I got the hang of it it was it was pretty quick and I would say I did like 70% of the work in like an afternoon and then the remainder 30% found its way or found a way to drag itself out over the other two weeks but so is the nature of a lot of these things it really does seem like you know perhaps expectedly like the complexity of your project will probably determine the complexity of the migration if you have the more custom work you have the more offer overrides you have the more things there will be to to migrate and to change because I like I was talking to Iris last week and I think in the context of something like the Drupal theme I think one of the one of the things that the Drupal theme sort of tries to do is to present the design system in largely its default state so as she was working to to to migrate from version one to version two it was just her essentially involved with that that migration and and they budgeted a day for it and they ended up doing that migration in in two and a half days which is I found to be to be really nice heartening ly speedy yes it seems pretty good to me oh yeah and and I really think like you know the more the more overrides you have the more custom stuff that you're building the more you're gonna have to be going in there and doing more find changes and more double-checking and more replacing an old value with a tokenized value or something like that it's just gonna you know sucking it's not going to change by like maybe vast orders of magnitude but it will change your experience by maybe 4x so what were you here what were your team's biggest challenges in in the migration process Jonah so I would say there's the the initial challenge was I guess figuring out a good method to to tackle all of this some of the things that I don't think I had the checklist thing at when I started and it sort of came out of migration need where I think I was working on navigation and navigation if I recall my I think it uses an accordion component or there was something where there was like I was working on a component that used another components class and I hadn't kept track of how like oh I haven't migrated that yet why why is this breaking and so then there was you know there's these sort of two different pieces and I guess sometimes one thing that would have been helpful for me to think about or maybe have documented somewhere would be if there are instances where a I don't wanna say component but something bigger than that like a series of components that serve themselves together to make something users classes that aren't necessarily named like that like accordion or something like that for their functionality or their spacing or something knowing to migrate those at the same time would have been helpful because I think that was where I just sort of got caught up with like okay well I started to migrate the buttons because there was a button in a nav class but today I migrated all the buttons no I only migrated some of them okay I had to go back and finish migrating the rest of the buttons so that was maybe just a flaw of my like personal migration approach but it's also something to consider just like what what includes what especially when you're thinking about migrating wesen like the class name sense but if you're doing it from a more visual perspective of like checking your implementation on the screen and see anything working I do think that there's a lot of opportunity for improvement on our side around being really explicit about around what the dependencies are for different components and so yeah like knowing that the header includes a search component and includes an accordion component includes buttons and all of that all that stuff and I'm hopeful that we sort of have the we have the groundwork for this in in some of the work that's been done toward this modularization of imports and we've begun to be explicit at least at the sass level around what what are what are the dependencies for each of these components because there's have to be explicitly imported for each component and I think we can we can work together get that into the documentation as well so that you know if you're using this you know you're all they're gonna need to thought about these other things um when I was talking to iris about her challenges one of the she was working on this migration around the time that we were also in the beta period so one of the one of the challenges was that we moved to BEM naming around beta six or so and that came in the middle of what she was doing and and because they had had their their theme pin to like the latest version of the of the beta they went for some like demo presentation and their site was broken because all of a sudden all their class names were wrong so that was sorry sorry about that iris versions yeah yeah that was that wasn't takeaway that's that they got from that let's see and so I just like in general tracking the the markup and and the layout changes with the switch to the Flex grids like just moving from moving from grade one to grid two I think took a little bit of figuring out it was difficult to understand the the settings and the overrides and sort of what you needed to do in version two to achieve the same override effect that you might have achieved in version one in variables I'm hopeful that we're beginning to address that with better documentation on that side but we'll see if that helps for people and and just figuring out how to use the the color tokens and and how you would how you would set theme tokens in the settings again that was something we did better at by the time version 2 was launched but if you were trying to do a migration in the beta period like you were you had to be a little bit uh Hardy in your and your ability to track down what actually needs to happen so really yeah so understanding understanding how settings work and how settings interact with with tokens and how tokens are integrated into the into the SAS takes a little bit of time I think to understand and and getting familiar with the new grid is I think from her perspective was something that took a little work do used from from the login side are there any remaining issues that that went unsolved are still remaining to be solved from from a design system or a migration standpoint yeah so we're we're just like in this sprint in the process of starting to roll this into our core application and so I think a lot of things are going to be coming up soon that we might have some some learnings about something that came up we have logging currently has two different scrum teams that are kind of building two different products and the team that there's a team that's building a dashboard product and they've started to use it a little bit earlier and one of the things that they encountered was so it's a rails app and the way that there there's a lot of forms in this rails app and the way that the they're building out those forms is using a lot of Rails functions to sort of spit out form input but one of the challenges with that is that output is sort of opinionated based on how rails chooses to spit that out which may or may not sync up with the way that we traditionally style forms using the US web design system so there they're looking into some stuff now to see like does it make sense to build something that modifies that form output to sort of work with the styling or do you do custom styling and kind of weighing that essentially like figuring out where in this pipeline do you address the problem and so it's there they're looking for other examples if anyone on the call has experience with this from just general like interacting with design systems when using form tooling let me know I'd be eager to hear what you what you went with but that's that's something that's coming up and the core login application has tons of forms it's basically the application is a form in many ways so I am sure we will figure some things out there I think you should make sure I'll try to make a note of it but to make sure that the the 10x forms team talks to your team when they're when they're thinking this through because that seems like something that's all one be thinking about and helping to address yeah definitely you see so so what advice would you give another team that's approaching a migration right now I guess like checklist or some sort of like try to understand the scope of the work beforehand to the best of your ability I think you're gonna you'll inevitably encounter things along the way and you can kind of add that to the the working list but however you like to do that if it's if you use a some sort of issue tracker or if you just want to create a document and sort of do line by line bulleted lists of all the things that are gonna need to be accounted for checked up on that was the most valuable thing for us and yeah I guess there's there's many ways that you can implement stuff like this and I think everyone's use case is gonna be a little bit different so don't stress out too much if you haven't done it the exact same way that someone else did and I would say also be be very willing to reach out in something if you can to either the team via email or in the u.s. WTS public slack channel if you have access to it like I think that's a a good place to go to to just pick other some brains on this on this subject when I talked to Iris I know that one of the things that one of her additional issues was just around the modularity of the design system styles and that they felt like they were importing a lot of styles that they weren't necessarily using and didn't have a good way to to subset those hopeful that within the next month or so will begin to to address that at least with one kind of solution to to to better subset the design system for only the Styles your project needs because as John was alluding to earlier sometimes you don't it's it's a challenge to know what what Styles you really need in a project because we haven't been very good about really saying like which components are dependent on others at home and how tightly certain certain components are coupled we want to be better about that I think we're going to be working toward that and and from Iris's side around advice like to you know as painful as it may be to read the docs and and that and that hopefully a lot of and that a lot of answers are in there when when you go through the trouble to to look through it I think we will continue to try to be responsive to when folks bring up issues around the docs like are there ways that we can address migrations at a higher level that might be a good starting point for it where you know you might not have to read all the docs to find what you need like how can we get you into the right point better but we'll just need to hear more of everyone's experience doing it to know where we can improve it iris this other tip was to pin live projects to a stable and tested release and that's just good advice so do that so thank you John for checking in with that I'm gonna switch over to over to Stan and Kai from commerce who are in the process now of thinking about doing some migration work on their side I'm hopeful that they can begin to talk a little bit around what their project is what what sort of questions they're facing right now and maybe we can jump in if we have anything to add any advice that we can supply when we hear what they what they are up to and that will also be a jumping-off point for for others on the call after after standing hi talked to to ask any questions of your own around migrations and we'll try to do our best to answer those so I will throw it over to Stan Smith and Kai ye from Department of Commerce to talk about what they're doing over at commerce and what what's on their mind with regard to migration to design system – hey there say hi hey how's it going so we we are mostly working on Commerce gov that's light right now is built on Drupal 8 using us WDS version one so right now we're in this sort of the discovery planning phase for moving to design systems – so in that process we run into a couple issues building that out we have design system one as our sort of parent theme to our commerce theme that we built on top of it but of course whole bunch of customization as you would expect and in moving to design system – we've tested out in local environments and have encountered some interesting results so I was hoping to sort of kick things off and then maybe passed along to try to talk about some of the more intricacies about our initial hurdles and then of course as John mentioned we're gonna have a lot of those conversion items to go through so that find and replace change this name to that name but the up initial items if you think are mostly Drupal related that are sort of tripping us up now and we hope to you everything yeah so if there are Drupal folks who are on the call perk up your ears nouns and and and if and when there's good opportunity jumping in the chat or will figure out how to get you get your audio on so you can not jump in if you have any any anything to add here take it away Kai I don't think I can hear ty right now huh no Kai yet do what I can but can you hit can you hear me now yes you can right yes okay okay so can I can I share my screen I'm not sure my screen can y'all see me moving around yep yeah we can okay so this is a Department of Commerce our our big thing is that it's is that it's it's pretty much like a moving target somewhat because we're not only do we have become mothership which is comic-con but a little offices that are getting pulled in so it's there there's more and more content yeah I as a front-end developer or a little bit leery about it things breaking so this thing that thing that you're seeing is on version one so limit let me just switch over to another branch and I can show you some of the things that I'm encountering all right so just hold on a second can you all hear me you're not nodding yes you're hearing me okay okay so on the face of it everything looks alright the our biggest thing was I'm going to show you the other four 4-tuple people you don't know where I'm going with this I'll just show you that so this is the block layout and what we're expecting this is on version one does our version was built so the headers here above headers all the other ancillary things like young those are the us comin side and below that is the primary and secondary menu and and everything is as expected the arrows below that and contents below that for sidebar second side below footed menu and everything works beautifully from responsiveness to section five away so here I'm gonna switch off to another branch that's where we set up you swgs ruling to so and is that and that's with the us WDS Drupal theme that's with the version to us o VDS dribbles name right that's right CC it just it just messed it up not pretty well you know so but that's because they're there they're putting the menu somewhere else which push everything else down as well so they're this version to that you're seen so if you see the block layout I'll demonstrate the block here so you see how primary menu and secondary menu is pushed to push because were the hamburgers to another mobile menus and I thought you know like we talked about this we thought this was a mistake but I actually looked at it at on Drupal Drupal Dada troubled or slash she lost a TDS and sure enough there's a paragraph that says it's actually pushed up to the upper right and certainly we can write the template files to put it back we expected to but I would kind of like to hear the reasoning from the minds as to why this is what it is you know because it is as I say this is this is a pretty big website and it's kind of it's gonna go on and on I'm wondering if anyone else on the call has has used this the u.s. ws2 version of the uso VDS Drupal team and has found something has found an issue like this if you have speak up and and we can we can share your experience otherwise this is a great time to plug plug my upcoming gigs will be I will be at a Drupal goth con next week in DC as well as some of the folks who are responsible for the u.s. WS Drupal team and I'm hopeful that when we are there we can we can find some good time to dig into what is going on and what the next steps might be for addressing some of this but if anyone has an experience I like to call right now yeah let me know yeah like by by and large that's the only pain boy I mean all the content is we're supposed to be insulated I mean if we resolve this we can go and do this and while the other downpours not only for the components we can be slowly but that's that's like the big stumbling that's kind of messing this up you know so you're seeing this problem kind of replicate another other pieces of content other other than that the main thing the main content is still working the other regions are supposed to be you know they're there's some loose some logical difference and I'm only speaking on the lonely speaking about the Drupal experience right now there there's some there's some logic I need to understand from afar from the triple theme developers for version two and other than that it looks fine it looks like it's gonna work and even I'm wondering if the admins are able to unlock focuses mute buttons so they can they can jump in sounds like some folks are trying to unmute and are unable to are we able to unlock them I'm a lot enabled to unmute sorry sorry about that hey this is Jason Glisson from farmers gov it's a USDA supported project and we're we're we're I posted a longer question about some of the u.s. WS 2.0 stuff but we're gonna be creating a design system for farmers gov with us WDS 2.0 as the base so this design system of our own will be shareable within USDA so we have done some kind of preliminary testing with 2.0 and we lost our our footer menus seems like our our header menus were fine but a lot of that it was very specific custom we've got a lot of Drupal 8 modules that are doing things on the back end to get those working but yeah most of our footer menus and we've got I think two different sets of footer menus they just disappeared and there was actually no output at all for that so yeah actually a lot of the other things on the the site worked really well once we installed 2.0 but yeah something kind of funky going on with the menus that we haven't really had a chance to dive into but I thought it was interesting that some of the other issues were also that you guys were talking about we're also menu related yeah I wonder what yeah I wonder what we can do from the design system side to to help troubleshoot but this there I'd like to be able to help where we can and/or figure out where this is something that we can't can't help with at all so I I'd also like to point out one other thing is that with when you when you're asking people who run the NPM install it's kind of putting files and in place that we're not a hundred percent expecting like for instance this we migrated from one – from one to two that this is a holdover and it's a holdover for the JavaScript but when you do from NPM install this also is here you know and sometimes we get confused as which one that it's looking for and sometimes the drop down and you don't doesn't open because of that that's it there's a little bit of inconsistency and how the theme is advising you to look for and that that probably has something to do with menus going crazy yeah I think I think it's worth it's worth figuring out how we can talk more about supporting supporting implementations supporting a Drupal implementation supporting what folks are building in react or something like that what is the role for the design system in helping to support those and you know what can we do from the design system side to to make sure that we're providing the classes markup and and JavaScript in a way that makes it most useful for these other implementations and what can we do toward coordinating teams that are that are using or developing these implementations so that they can build better ones and learn from each other around where where things are working and where they aren't yeah and I remember then we we spoke earlier and we had talked about maybe planning together birds of a feather type of thing as big of con next week maybe bring some other people who are trying to version one to version two migration sort of share pain points and see us so the folks who are from design system or from your team and elsewhere can sort of join in and maybe give us some guidance and say you know it is meant to be this way maybe try this maybe because I didn't sort of let us know where we are you might be able to thing yeah okay we can type some trick steps there there's a lot of a cigar on the tupled of condor other people on the line you know like we can bring our laptops can you stand yeah bring your laptops with with your local lonesome foods and I'll see you in a bit today we can show yeah well good on picnic tables will hash this out this little little jalapeno no no that's that's probably the best anything else standard kana you want to ask to the group are a Scottish honor me about migration one other one other question I'm sure I've talked to you about it before Dan is um is how to incorporate like a component library like pattern lab practice or book if other folks have done it we're interested in sort of thinking about how do you did it especially within Drupal if if not that's fine we can sort of it's not a high priority it's just sort of something we've been thinking about doing and would be pretty much I'm just in doing the future yeah Jason do you do you have any experience with that as you're building out your design system for us da yeah we so we looked into a couple of other pattern libraries and but we're we're actually engineering kind of our own pattern library based on our own designs so not so much integrating any other pattern library as much as creating our own from scratch yeah no no real experience with that yeah it's kind of like you know once you once you have once you've developed your own sort of implementation based on us WDS how can you how can you communicate to the rest of your team what is now available within your custom system how do you how do you create essentially a documentation site for your custom implementation and yeah I can speak on that just real quick because we we actually had an internal meeting about that this week and the idea is to well so you guys have your fractal I don't know if you guys have the the 2.0 as a fractal design or pattern library but we're planning on doing haven't settled on anything but we made you story book with ours and the idea is that we'll have our Drupal theme in its own repository we'll have our design system with us WDS 2.0 as its own repository in kind of its own separate repository and then we'll have the pattern library with storybook the us WDS 2.0 in its own repository as well so there-there will essentially be three repositories and in the Drupal theme and in the pattern library website repository both of those will have what's called git git sub modules that are linked to the kind of the master pattern library that we're using so when we do a fetch on the Drupal theme or fetch on the the pattern library website repository it's going to pull the most updated design system probably not only from you guys but it will also pull our design system that you know what we'll have in our own repository if that makes sense it sounds like it's a it can it can be sort of just a it's something that we still need to talk about a bunch more I got it potentially as a is a complicated thing that has a bunch of different kinds of solutions and clearly we don't have any great solution from the design system side to core yet but say something we'll want to just continue to keep on on our radar as we move forward if someone begins to find a good solutions that we can we can chew on a little bit more I'd love to hear more about your experience going forward as as you develop this we got a question from the chat around around a project having having some issues with their agency blocking fonts and I know that I've heard this before I'm wondering if this is something that other other groups or agencies have encountered sort of font blocking like inside a building or something and if there have been any ways that you've developed to get around that or is that just the way it is I know from the design system side like we will try to do everything we can do to make sure that sites perform well even if the requested font doesn't load I don't know if there are any special techniques for assuring that fonts do load in a in a sort of firewalled environment anyone having any experience with that good luck anyone else have any sort of questions are things on their mind around around migrating to design system to small questions big questions we're a little bit over but we have some time if folks are able to stay we can ask another question or two and then I'll then I'll wrap it up going once going twice alright that is it well thank you all for coming uh thank you to my guests John and Stan and KY thank you for iris talking to me last week I'll do it again I'll I'll plug my upcoming gigs like I'm on a comedy podcast that we will be in DC at DrupalCon next week and I hope to get there are a couple there are a couple presentations on Thursday that we that I'll be at one panel albeit around a design system and building gov websites and there'll be another panel around this sign system Drupal theme that I'll be attending it'll be a good question to ask good time to ask questions about this Drupal theme and about the design system and how it works with Drupal and and yeah we'll try to put together at birds of a feather so we can all find that picnic table with our computers and sit there and work through some of these open issues as well and thanks thanks for being here thanks for talking it through make sure to ask questions at github or through email or through our slack if you can get in slack I will try to be responsive to all your questions there and until August have a good have a good few weeks and good luck with everything you're doing I appreciate it thank you

No Comments

Leave a Comment

Your email address will not be published. Required fields are marked *