 So good morning, everyone, and thank you for coming to my talk called Six Weeks on the Dark Side. My name is Marge. I've gotten out of use of the computer. So a bit about me. I don't do presentations very often, but recently when I was talking to some other people about doing this presentation, I said, I remember the last one you did. It was something about consolidating a whole bunch of websites. Don't remember much, except the part where you said you fell through a trampoline and didn't spill your drink. So anyway, I'm happy to say that since then, since that time, I've stayed safe during work events. So I've been involved with Drupal for just over a decade. I'm a senior consultant at Anex, which is based in Canberra, Australia, where I've been for almost two years. And prior to that, I was in the public service for about 16 years. I spent most of my time since 2017 working on GovCMS sites almost exclusively. In the last couple of years, I've become interested in doing Google Analytics and doing things with Tag Manager. And I'm also on the Drupal South Steering Committee and also a co-organiser of the Drupal ACT Meetups. So when I'm not touching computers, I like to spend time outside nowhere near them, trying to take photos of a while. I also support the Essendon Football Club, love watching Test Cricut, and I have two Black Greyhounds. So this is a story about a GovCMS SAS project that went from kickoff to forklift in six weeks. There were some technical slides, but it's aimed towards anyone who wants to know how we sort of built a site, sort of overall, and how we got it finished on time despite a few issues arising. So the client is Safe Work Australia, so a bit about them. They develop the Australian national policy relating to work health and safety and workers' compensation stuff. So you can visit their website to learn more about them, and they're also quite active on LinkedIn and so on, and they've got some good stuff about being safe at work. So Annex was already supporting their main site, which is the one here, not the one I did, so this is their main website, which we inherited about 18 months ago. And last year they came to us saying, oh, we'd like you to build a new site called the Safe Work Australia interactive data website. And this would be a site that aims to make their work health and safety and workers' compensation data more accessible using interactive dashboards from their online data collections. So the timeline was six weeks, and six weeks, it can definitely drag on when you're waiting for something in the post or whatever, but it goes extra quick when you're building a website. The sprints were two weeks in length, so it was a three-sprint project. And in our initial kickoff meeting, we had close to 30 people, perhaps more, actually turn up. And at the time, I was looking at all these people, like how am I meant to be and stand up each day with so many people, I meant to explain what I'm doing, but day-to-day there was probably only four to six people that turned up, so that was good. So the dark side refers to the theme colours, or the colour palette that is used on the site. The top right here called grey 900 was the background, with the other greys below being backgrounds for other components on the site. The brighter colours, say the red and blue, are used minimally on the site, for example, hyperlinks and buttons and so on. And then the white is the text. So after finding out the colours to be used on this site, and reflecting upon my interests, I decided this was going to be a site I'd enjoy working on. That's for actually working on the project. So our NX project team was made up of five people. Two of us were full-time on the project, and three were on for the ongoing stages of the project. So full-time was Quinn, who is here today, thank you for coming along. He was primarily a test-up and moving into a delivery manager role, pretty much any role that needs feeling at the moment. He's amazing, and then also myself as the dev and tech lead. Our engagement lead, Jen, popped in to make sure we're all on track, and she did a lot more before, and sort of behind the scenes stuff. She wasn't coming to meetings every day, but she was doing a lot of stuff behind the scenes. Then we had our designer, Matt, who came in as required, and then we had another developer, Adam, who styled components alongside me, and he was there for maybe 90% of the project, so basically the whole time. So as for the content on the site, it's a brand new site, so there was no migration planning done. We did have to integrate Power BI dashboards and also replicate a tool called the lost-time injury frequency rates calculator. So it's actually a tool that's already available on the main website, and it was being replicated rather than transferred. So I was aware of this calculator, but not entirely sure how it worked. But yeah, maintaining two things I wouldn't recommend doing, but that's how it goes. So anyway, this calculator turns out it uses a multi-field taxonomy term, arrest, export view, and some driver's script. And although there are four fields per term, there are around 120 entries often nested three deep. So I'm not sure if anyone else here has used taxonomy terms a lot, but sometimes, this is perhaps more Drupal 7, if the list got long and they started sort of jumping around, getting out of order, and it was just really bad, I guess. Anyway, I'm happy to say that didn't happen on this one, because that would have been a nightmare to fix. So anyway, in hindsight, I wish I'd sussed out the calculator beforehand. It was very tedious to do all this manual data entry, and for some reason I thought I'd knock it over in a couple of hours. It was more like a five or six hour job. It was really tedious anyway. Anyway, this example here shows the nested select list or like a taxonomy term hierarchy under the industry there. So you've chosen the first one, then the second one pops up, you choose the second one, and then you're putting the numbers below and then hit calculate, and it comes up with a answer. So I suspect I've put the numbers in wrong here, but that's just how it would look if you did it. So the start of the show and the reason for building this site is the data visualizations. Power BI was the tool already in use, so we needed to figure out the best way to display it. There's essentially two options of how to get the data visualizations from Power BI onto the site. One is called published to web, where an iframe is created, and the other, which is more secure and flexible, called embedded for customer. So as this was a six week project, we discussed the pros and cons of each. We decided to go with the published to web option, which is the iframe option. So all I needed to do was supply the data visualization people with some breakpoints and the theme colors to keep everything on the dark side. And the breakpoints are needed because the iframes out of Power BI aren't responsive, so yeah. So it's a bit clunky, but it's a proof of concept, so that's what we thought was best. Design, so this project started off with the design actually being provided to us from the client. It's kind of a dark version of their primary site. So on the left, the white one, is their main site that was already live, and then here is what they gave us. So I really like this because we can have a good idea of what they wanted, and just a general vision, general feel for what their vision was. So often we'll get supplied either a logo or branding colors, and there's a lot of back and forth with design ideas, so this sort of so far, so many steps ahead than what we could have been at this stage. So you may have noticed that some of the sections on the home page don't quite line up. There's different widths of things. So our designer quickly knocked out another version of the home page. So you can see it takes all the components that the client wanted, but put it in a better order. Anyway, this quickly got the tick of approval, so work could begin. However, all those safe work had done the right thing, and arranged my access to GovCMS systems. I didn't have access to the GovCMS dashboard or added to the GovCMS support ticketing system for the safe work team. So this took a bit of back and forth to sort out, but by the end of the first week, my access was good to go. So just keep in mind this is the first week out of six weeks, so it feels a lot like you're losing a lot of time. So my sidekick, Adam, hadn't worked on a GovCMS site before. Although I'm comfortable using Pygmy and Ahoy to set up a local GovCMS site, every other project we do at Anex uses Lando. And honestly, I hadn't actually used Lando until I joined Anex, so there we go. So anyway, with access sorted and wanting Adam to get stuck into work, I set up our repo to include a Lando, YAML file, a Composer file, and a few other things needed for this to work with the GovCMS site locally. And although this workaround is OK enough, it's easy for it to fall behind without actively keeping the Composer files up to date. So if Lando was an option included in GovCMS, alongside with Pygmy and Ahoy, I think it would give developers an option to use something they're perhaps more familiar with. And on that note, I know there is some talk about that happening, but I'm not sure. It's like very, very early stages, but I really hope it's something that GovCMS and everyone involved can get going. Unfortunately, during the second week, there was an update to GovCMS sites that seemed to have issues for a few days, which is pretty uncommon. You often do have an update come through. It's sort of you can't push for an hour or a day or something, but for a reason, it just seemed to be not working for him. Although config was enabled on the site, there just seemed to be problems deploying config changes. And at this stage, it's mostly just enabling module. And it's quite limiting, along with being incredibly frustrating. I pretty much had full days of failed deployments, but then the occasional one worked, although I pushed up the same code. At one point, I had some other devs watch me as I screen-shared and went through the same process for it to work, and then it would just fail the next time. I did log a support ticket to have the modules enabled, but I suspect it was a busy time of year. It just didn't get actioned. And I think another thing for that is that, because it's not a live site, it's a bit lower priority. So I wouldn't say this is a typical way things get handled. I think it was just like a bad week for asking for things. So by the third week, it still wasn't working. So that Monday morning, I had a chat to my delivery manager about changing to developing off the GovSIMS platform, because I was simply out of ideas. We'd been open with our issues and the safe work team, and within a few hours, everyone was on board to switch over to platform SH. We'd host our non-GovCMS sites within and do some other development things with. By around 2 p.m., I could enable the modules I needed and transferring any config I could to this new Shiny development environment. That afternoon, I felt like I'd achieved more in eight hours than I had the two weeks prior. Deployments were looking, sorry, deployments were working within five minutes and things were looking great. So during the last year or so, Annex had been using Tailwind CSS in projects. So Tailwind CSS is an open-source CSS framework, and I'm just paraphrasing how they've described it. So there's no premade classes or elements, like buttons or tables, similar to how Bootstrap would work. So instead, it creates a list of utility CSS classes that can be used to style each element by mixing and matching stuff together. So I was reasonably excited to be able to start a theme from scratch, as pretty much all my work had been sort of adapting myself to other people's themes, rather than creating them brand new. Then it dawned on me, I hadn't actually started a new theme for around five years. It was on Drupal 7, most likely with the Omega theme, and I don't know how it would work really well with Drashi, just like spin something it was all good. So I was able to get a theme set up, no worries, but it was getting Tailwind to work, which had me stumped and input from other devs at the time on how to fix it just, again, weren't working. So I trawled through all our sites that used Tailwind, mostly to find that there was always something different enough that I couldn't just do a copy and paste job to get it working. And this was a task I was working on also while the deployments were failing too. So of course, by this time I'm feeling a bit, there, what am I doing? Should I quit and work on a farm kind of thing? What am I doing? Should I hand my dev badge back in? Anyway, in the end, I actually found a Tailwind theme that had been set up for Drupal without anything in the way. It was just good to go kind of thing. So thank you to whoever made that. I believe it did say it wasn't for production use, but I was sort of just ignored that bit. It was all good. So I did some minor config changes. So CSS nesting would compile properly and we were set to go. And this happened around the start of the third week and this was the final obstacle we had to start smashing out our work. So over the project, I created mostly most of the config components. So the paragraphs, the blocks, the views and tachonomy, all those kinds of things. And I then set up the twig file so that other developer could style these items. So people don't know a twig file is like a template file. And out of the box, they work perfectly fine. But if we climb them into our own theme, we can have better control over where things display. So a high level one might be just a whole page. So you've got the header, the content in the middle and the photo and then that can go down to, each component can have a twig file or template file. So hopefully this might not explain it, might not. So this is the bits that are printing out the icon, the title, the summary and a button. So the other developer Adam predominantly worked on the homepage components and showed that they were responsive and matched the design. And he also did the header and footer stuff too. So there were three content types used on this site. We just reused the standard page, the type that comes with the GovCMS out of the box. And then I created two more content types to match the content requirements. We probably could have had one, but it's probably better to split some of these out. So on all the content types is a section at the top that displays the title and summary like a hero banner type of thing. So this is the standard page. So there's that and there's the breadcrumbs, a left-hand nav and body text. So there's nothing fancy going on. It's just sort of a standard layout. So at the top is also an option for the hero area to include a background image and also some cards and that's a component that we've reused from the homepage. And then a tint or like overlay color is applied to the background image. So the color contrast for accessibility on the text is always compliant and also it felt like it was keeping it on brand by making it a bit darker. On mobile, the left-hand menu turns into an accordion and everything stacks, which is pretty standard and how I would expect it to work. Next one is the catalog content type and this is similar to the standard page. It just had some different paragraphs that you could choose from. And I guess the only reason I would separate them out is for the ease of like path order. So when a content author goes in to create a new page, the URL will print out the correctly kind of thing and also I had two different menus for the tint nav. So that's why I would have two different content types that are similar for that reason. And then the interactive data content type is the one that holds the Power BI dashboard code. So it's where the iframe paragraph which is used is available. So compared to other content types, this is a single with content page with no left-hand navigation. And this screen shows a comparison of how the Power BI generated iframes display on from mobile, mobile tablet and desktop sizes. So we can see the decision to have the iframes has its drawbacks, the main one being that we can't edit or remove that gray toolbar at the bottom. So it looks a bit out of place, but overall the data visualization people did a great job matching all the colors and fonts and all that sort of stuff up to make it look so like as seamless as possible. From a content author point of view, the three sizes is achieved by having a paragraph that field for each different size. I tried to simplify the process by only having fields where iframe data would be different to one another. This would be the title and the link to the iframe itself. So typically what it spits out is that big long thing at the bottom, which includes the width and height and all that sort of thing. And I did it this way so that I could set those heights and widths so people couldn't start making their own kind of thing, make it just to keep everything like concise and stuff. So behind the scenes in the twig file, the rest of the iframe components are written out. This allows for uniform output of things like height and width, as I said before, and then also when to hide or show something on a particular screen width as well. So although the original spec said there would only be one dataset per content page, towards the end of the project, there was a request to make the load time a bit faster if there were three datasets on one page. So essentially the page was trying to load nine iframes at the same time. So I knew of lazy loading for images, but I was happy to find that it also worked for iframes. And the outcome was better than expected. The SafeWork testing team came back to me saying that it had half the time loading time for a page with three sets of data on the page and loaded obviously two thirds quicker when it was just one because it was one. This was the only scope create that happened in the project. To me that's pretty insignificant and probably something I should have considered when I was building it originally rather than them coming back to me. There were only two views to display content and that was for the interactive data and the catalog content type. And essentially they looked the same as each other so I've just got one here. So the views in views, the fields were gathered as required and the output was written in the twig file and then styled. The cards displayed here, I used CSS grid to ensure the responsiveness was smooth. So from four width it has four cards and then it's like when you drag the thing in it goes three to two and then single column for a smallest or mobile width that works nicely. The search was set up using solar search and content had taxonomy terms applied from two different vocabularies. One vocab that was turned into a facet put it on the search page which is that little box over there and then the secondary taxonomy term on the there's a secondary taxonomy term but it's not used for, it's not a filter it's just used for searching purposes so that field is just there. Anyway at the time this was done there wasn't much content so if we did add more filters it would have been more filters than actual search results so that's another reason it's something we can also add on later if needed. So global accessibility awareness day is actually tomorrow, I realized this last week but of course it should be on our at the front of our minds every day when we're building. There's some stats sort of screenshot here from the accessibility day website. I think it shows that developer or at least digital teams can do a lot better if this is the percentage of things that can be fixed quickly and are still issues. I think the issues I see in Drupal sites is sort of more missing form input labels and empty buttons but personally I think Drupal by default has a great way of making sure alt text on images is set if you don't mess with the default settings too much. The one that stands out the top is the low contrast text which means like say the background color versus the text color sort of clash might be you have a white background with yellow text you just can't read it and that also happens even if when the font's really big if it's made into a smaller size it can become inaccessible. So having a dark theme made accessibility great for text contrast. We weren't in the majority of those statistics on the previous page. So there were a few minor fixes to be done but overall the accessibility report was pretty good. The tool here that being used is called Lighthouse and it's available as a browser extension and some others were used too but this is the one that gave us some nice looking numbers there. So this result is showing after we tested after the forklift was done but the results were same beforehand so we lifted up exactly the same thing that was put down. So we had arranged for the forklift to take place on the last possible day of 2022. We worked hard to get everything done on time despite less than ideal start. I was impressed by the forklift process and my computer's doing something. By the forklift process with GovCMS it went smoothly and faster than their suggested timeframe. I'd like to back that up by saying I've done had to do another forklift since and I've had the same great experience. So if anyone's ever worried about it I don't be I guess. And during that week some of us from the Annex and SafeWork team got together for lunch and although most of us are actually based in Canberra this was the first time I'd actually seen everyone as a team. So while this project finished in mid December 2022 it only went live into beta testing in March this year. So the Mandarin, a new site made for public sector leaders and execs published an article on this site going live into the beta. So I often feel a bit apprehensive about anything I've built getting the limelight or being published or whatever it's just like, ugh, you know people are going to point out where I've done something terribly wrong and so on. But to me this was a nice small way of telling everyone it was live. So in the end the site was built on time even though it seemed doomed and felt a little dark in another sense at the beginning. From the third week developments reasonably quick with progress visible most days. I made plenty of silly mistakes like refreshing the wrong tab multiple times as well as forgetting to re-enable JavaScript for a good hour or so when I was styling something but at least I was doing it while looking at a dark theme. Google Analytics was enabled documentation and training was completed and pushing the code back to GovCMS was working smoothly as expected when the forklift was done. I'm glad that the accessibility issues were minimal and that post-project no warranty fixes were needed that I'm at least aware of and no one told me of. I was lucky that the project didn't have significant scope creep as that frequently happens on most projects and the SafeWork team were just a fantastic bunch of people to work with. And my eyes at the end definitely appreciated the dark theme. So we're being quite white-ified quit and worked on a farm or something outside. So overall it felt like a very quick and very rewarding six weeks on the dark side. Thank you. Are there any questions? Yes? Sorry. It's okay. Yeah. Yeah so that particular one what it was called sorry that one it doesn't do responsive. Yeah so that's why otherwise the other way that it's done it they are responsive but you have to I don't remember what it was but you have to do there's a lot more bright points of failure so you have to join this to this and this and this it was just like for a short project it wasn't worth the time to get this thing set up and then someone has to get approved this and do that and it's just I think overall be better doing it the other way. So I think we came to this conclusion this is a proof of concept really we'll see if people like this data then we'll go all out and do something a bit more fancy. So the question was so the iFrame approach is quite easy for content to do because you're just copying a snippet of code and you're pasting it if we took the other approach would it be as easy as you know? Yes I hope. Well I don't actually know but I presume I hope so I just haven't seen it I guess we didn't explore it to know. And the other approach you'd have the grey base removed so it'd be a more seamless display. Yes definitely yeah so that's I think that's probably the biggest nothing not being responsive to the biggest issue. The biggest issue. Yeah. We need to know that now before we dive into it. So then with the lazy load was there like a threshold where you felt the lazy load if you've got like say a page with like this site's plan 12 the cut-offs So the lazy load works if you go to a page and there's only one showing at the top you only load that one until you scroll down so I don't think there's a threshold to how many you have It was more like you just loaded like 12 at one time like I'm aware that that's an issue but I was just wondering like in your exploration of it was it like a threshold loading before you had to find another Oh no it's working fine it was just slow so I'll probably come up with a better answer later Got it And then my last question was why did you So yeah the forklift was done because we I just had so much trouble getting everything set up in the beginning and I'm just like I can't actually do anything it wasn't so much over for the content I wasn't getting anywhere developing on GovCMS itself and it's like nah just stop it here we'll do it on our own thing so right we didn't probably didn't have to forklift in the end at all I just wasn't sure how much content was coming through at the side of the second or third week we weren't really sure how much content was going to be there so it's like I don't want to have to do something where we have to re-enter all the content so it's like we'll just do a forklift and it was a really good experience Yeah so in the end Marge was the superstar of the project and you've probably seen that and really had three weeks to build the site was what actually happened and yeah got done and I think the clients were extremely happy and great communication the whole time and yeah we came in under hours somehow and yeah right before Christmas and it all worked out and it is a great site so yeah it was there was some stress at the end of week two and now I'm starting to sweat a lot and yeah first project as a DM and a little worried but yeah it all worked out and it was awesome and thank you Did you learn anything from doing a dark theme because normally we build sites in like a light theme was there any like gotchas that you found along the way No I actually preferred it especially with the colour contrast we knew if the text was white and we had dark everything else it was fine what were you doing just dark yeah dark by default so there was I don't think there was anything surprising that came up in it all no which was really good like I said if anything it was easier I recommend it for everyone please do more dark theme sites save our eyes I think that's the biggest thing eyes weren't burning