Jen Wolke: Into the Umbazon

[0:00] Welcome. Thank you for coming. With hundreds of packages available, it can be a bit of a jungle out there when it comes to navigating the Umbraco Marketplace. So today I want to take you on an adventure, and show off some of my favorite places in the Umbazon. We have the beautiful Umbazon up here. My name, as he said, is Jen Wolke. I'm a senior Umbraco developer with ProWorks. I love anything chocolate, and all things Umbraco. I'm also a big fan of reuse and knowledge sharing, which is why I've been looking forward to this adventure. Not only do I get to share some of the packages which have saved me time and effort, but more importantly, I get to highlight some of the incredible work done by community members, some of whom are here today. So, if you see them, give them a big high five and tell them how awesome their work is.

[0:47] If you're not familiar with the Marketplace, it's right here. It's a great place to get all sorts of packages, as we've said, to help you extend Umbraco, and do a lot of things that maybe you need to do when somebody else has already done them, so you don't have to reinvent the wheel. So, let's jump over and take a look at the Umbazon, and talk a little bit about some of the places that we might go today. All of these are free. There's no admission required. All of these packages are free in the Marketplace. Some do have a paid version, but they're all freely available. So, we're going to start down here, at the mouth of the River Skybrud, where you can keep your website traffic flowing smoothly with easy-to-manage redirects.

[1:40] Then we're going to head over here to the Pillars of Wonder, and then up to the SEO Toolkit Ruins, and we're going to take a wander down the Accessibility Reporter Trail, or up it, however you want to look at it. Go across Slimsy Bridge to the Tree of Sustainability. We're going to take a short break there and kind of regroup, maybe catch our breath. You may want to keep your phone handy. There may be things you want to take a picture of or scan along the way, like the QR code of this page, in case you want to come back here and reference it. I'll give you a second in case you want to grab that. You might also just want to keep your phone handy because, as you may have read above, I have a questionable sense of direction. I definitely don't recommend following me anywhere other than into the Umbazon. I'm very familiar with that; we're all good there. But if you see me out in Odense, don't follow me, because I'm probably lost.

[2:37] All right. So, as we travel, keep an eye out for the Umbraco idols, which have been lost in the Umbazon for centuries. To reach true umblightenment... yes, that's a made-up word. I made it up. It's a real thing now. We must recover these idols, otherwise we will be doomed to work harder and not smarter. So, without further delay, let's head into the Umbazon. Don't worry, the jungle is climate-controlled, and has no mosquitoes, snakes or apex predators. I was going to make a joke and say it has excellent Wi-Fi, but it turns out that's maybe not so true. Even though this is all very safe, I'm going to put on this amazing protective jungle hat, because where else can you wear a ridiculous hat, if not at Codegarden or in the Umbazon? So, let's go ahead and get started up the River Skybrud... which doesn't want to click. Fantastic.

[3:30] All right. Here we actually find our first idol. I call him the developer idol, because he's got his hoodie on. So he's going to hang out with us. Skybrud Redirects and Skybrud Redirects Import are very, very popular. Obviously, over a million downloads. It's been around for quite a while, won several awards, was inducted into the Package Hall of Fame in 2024, and it's the fifth most downloaded package, behind Umbraco Forms, uSync, Umbraco Deploy and Contentment. None of which I'm going to talk about today, because those are all really big; most of you are probably familiar with them. Some of you may be familiar with Skybrud. But let's go ahead and jump over and take a look at what Skybrud has to offer. And I should have logged in ahead of time. I apologize.

[4:27] And I'm running locally because of spotty internet. So if you're wondering why my internet is working and yours is not, mine is not. So, while that loads up, I'll go ahead and show you the import file that I'm going to use in just a minute. It's pretty simple: just a basic file with a couple of columns for importing. But this is what we'll use in just a minute, when we talk about the import part of this. So with Skybrud, you can set up redirects at an individual page level. You get this tab once you install the package. It's pretty easy to install: just install the NuGet package, and it works.

[5:16] So I can go here and add a redirect. I'm going to add a redirect for my Codegarden page, and just use "cg", because that's shorter than "cg2025", obviously. I'm just going to set it up as temporary. I don't need to worry about the query strings, because I'm not using any. So, I've added that. So now I will have a redirect to that page. And I cheated: autocomplete. Let's try that again. And so now that's redirecting. And that's great if you just want to do one redirect. But a lot of times when you're migrating a site, you've got hundreds and hundreds.

[6:04] So with Skybrud Redirects Import, which is a separate package from Skybrud Redirects, you can import a bunch of redirects all at once, using this tab. This is the standard out-of-the-box redirect management. This is the one that Skybrud uses. And I can go here and import. And I can pick a file, as I should be able to, and drop this over here. And I'm going to leave Overwrite existing unset, and we'll see that it's not going to bring in the one that I've set up in the file for the one I already created manually. And so now I have some new redirects for that page. And as you see, it didn't bring this one in, because it said it already existed. So now if I go back over here, I have some additional redirects. And that is Skybrud Redirects and Skybrud Redirects Import.

[7:10] So, now let's go check out the Pillars of Wonder SEO Checker, where you can determine if your website's best practices stand tall or fall flat. So, no idol here, just some old iPads. As you can see, this one goes up through version 13. It's got a fair number of downloads, not as many as Skybrud, but 10,000, going strong. This one only works on publicly available pages. So, I'm going to show you where it is in the backoffice. Since I don't have internet access, at least not consistent, I'm just going to show you what the interface looks like, and then I'll show you some screenshots of after I've run it.

[8:00] So, you can see here it's grayed out, because it only works on live pages. So, if I go back over here and move down to the Pillars of Wonder, I've got a screenshot here of everything that it ran and checked. So, it checked the page load speed. It checked for title tags. It checked for meta description and search result appearance, image alt tags, and modern image formats. Obviously, I've got a little bit of work to do on this page. I'm really bad at SEO, I'll admit that. I've never put a meta description in. And I'm really bad about just creating PNG files and throwing them up there. So, this is going to give me some feedback right here in the backoffice, so that I don't have to switch around to other tools. So, that is Wonder SEO Checker.

[8:52] So, now that we've seen how to determine if your SEO needs improvement, let's head over to the SEO Toolkit Ruins, to see how to maybe prevent your SEO from crumbling. And we find another idol here. We find the hipster-beanie-wearing idol. So, he's going to hang out up there now. So, this is one of my favorite packages. This is actually my absolute favorite package in the Marketplace, just because it has so much in it. And if you were at the awards last night, it did win the Umbraco Package Awards. So, definitely a great package, if you haven't used it.

[9:38] 126,000 downloads and climbing, which puts it just outside the top 10 downloaded, but it's pretty close. You can see a list of all the things it has right there. But let's go ahead and take a look and see what it does. A couple of notes on this one. It does require using SQL Server, not SQLite. So if you're trying to run it locally, you need to use SQL Server. And one of the things that's really cool about this package: it's actually a set of packages, and you can install them separately. So if you don't need all of them, for example if you're already using Skybrud for redirects, you don't have to install the redirects. You can install each one independently. I've obviously installed all of them, because I think they're all fantastic.

[10:26] So, one that's not listed over here on the side is the sitemap, because there's really nothing to do for it. It just works. So, I'm going to go ahead and show you that. So, if I go to sitemap.xml, it just spits out a sitemap, which is fantastic. I wrote no code for this. You'll have to take my word for it, but I didn't have to do anything. It's just here, and it has mapped my whole site. So, as you can see, it's a very extensive site. It's got a couple dozen pages. So, really, really huge. If I had multiple languages, it would also put all the language variant information in the sitemap, which is awesome. Because that's another thing that I tend to not get right, and there's a lot of trial and error to get it quite right. So, while we're in the browser, let's take a look at the next feature, which is robots.txt.

[11:20] And by default, it will automatically put your sitemap in here for you. You don't have to do anything. And then if I switch over here to the backoffice, as you can see, I've got nothing in here right now. So if I go ahead and add a disallow, it will show up in my robots.txt, magically. Or not so magically, because it's doing work. And let's go ahead and take that out, so Google can crawl my very important site. Just make sure that took effect. So those two are pretty simple. Another one that's really simple, but I think is useful... I'm going to remove that for a second... is the not found page.

[12:08] There are a lot of different ways you can do this in Umbraco. You can use middleware, you can use the config, you can do all kinds of different stuff. But this works out of the box, so if you don't want to mess with any of those, you can just go ahead and use it. So, right now, if I... excuse me... put in a bogus URL, it is not doing what it should do. Maybe I didn't save that. Excuse me. There we go. So, I get the default Umbraco not found page. And if I add one back in, then I'll get the one that we originally saw. Where's the water here?

[13:02] So, that one's quick and easy. And similarly, we've got a script manager, which allows me to add different types of scripts to my page. There are a few that it knows about out of the box: Google Tag Manager, Analytics, Hotjar, Piwik PRO. Don't know what that is, but it's here. And then you can also do custom scripts, and you can add information in the head tag, and also at the top and bottom of your body tag, if you have custom scripting that you need to add in. So, if we take a quick look... yep, let's go ahead and discard those. The nice thing about Google Tag Manager is I don't have to actually put all of the script in; it knows what to do with this. So I just use the code, and it adds all of the other scripting information that I need there, and also in the body tag down here. So it does all that for you. I'm not going to go too much into the redirects, because it works pretty much the same as the other redirects, so not a whole lot new to see there.

[14:12] Another tool that I really like that this has is site audits. If I go to create a new audit, obviously I can name it, and I can tell it where to start in my tree, if I want to just run it on part of the site, if I've got a really large site. But over here, I can select what it's going to check for, which is kind of nice. So, if I just want to check for broken links... I don't know how many clients I've had come and say, there are all these broken links on the site. Where are they? I don't know. Do I just have a report that says there are 400 broken links? Same thing with a lot of these other things. So it will do this for you. This takes a little bit of time to run, so I went ahead and ran one ahead of time so we can see what that looks like. So, you've got your summary up here, of the high level of what's going on. And then down here, you've got, page by page, the number of issues that it found, and then you can link over to the page here.

[15:12] And if I switch over to All checks, we'll see that for two of the things that it checked for, there weren't any issues, and for the other three there were. And I can just click Show occurrences, and it'll show me where all of those issues are. All right. So the next thing for SEO Toolkit that I want to show is the meta fields. And I think this is one of the more powerful features of the tool. So, you can set meta fields at the page level. You get this SEO tab here. And, obviously, I'm really bad at meta tags. I haven't put anything in any of my pages, because I'm lazy. But it will show you what the fallback value is, and I'll show you where you can set those in just a second. And it'll show you what it's going to do over here.

[16:13] And you can set all your meta tags. You can also override the canonical URL if you need to. And then there are all the social media Open Graph tags that you can add. And this will do a preview. Obviously, I've got nothing in here, so my previews are kind of useless. And then down here at the bottom, you can set a bunch of robots directives, or rules, right here for the individual page. But you can also, if we go over to the settings, set them at the document type level. So if I look at the page type, or the document type, for that, which is a content page, first of all I can enable and disable SEO for that document type.

[16:58] And then here is where I can set the override order, or the default fallback order, for all of those fields. So I can set all of these, and then I can rearrange them if I want. If for some reason I want page name to be first, I can do that, and I can do that for all of these. And then down here, you can also set the canonical URL pattern for a whole document type, which is sometimes useful. Sometimes you have specific URL patterns for product pages or something like that. And then you can set robots rules for the whole type. So that is the SEO Toolkit, which, again, is probably my favorite package that I've used so far.

[17:47] And now let's go check out the Accessibility Reporter Trail, where you can find ways to navigate the ever-changing accessibility landscape. So we've actually found another idol. This one I call angry alien guy. So he's going to hang out with these other guys. And this was last year's Package Awards winner, as you can see. Definitely a fair number of downloads; still not up in the millions, but on its way. Accessibility is something that should really be a top priority on every site, but I find that I'm trying to add it in at the end, which doesn't really work very well.

[18:32] I don't know if any of you saw Jemima Abu's talk yesterday. It was really good. She gave lots of really great reasons why accessibility should really be at the forefront of your thinking. So I won't rehash all of that, but it's something that I'm always trying to shoehorn in at the end, which doesn't go very well for me. So this tool makes it really easy to pay attention to that as you're building. So if we go back over to the Content section and look at our Codegarden page again, you'll see... I'm cheating. I have zero accessibility issues up here, and I get a score of 100. Not all the pages on the site do that well. Like I said, I cheated a little bit with this one. So I can rerun the tests. I'm not going to do that, because it does take a little bit of time.

[19:21] But one thing that's really useful is you can export the results right here. So if you need to put them in an issue tracker or something like that, or you need to email them to a developer to investigate, it's really useful. I would have failed tests here; we'll look at some of those in a minute. And these, it says, are incomplete, due to some violations it couldn't proceed with. And then here, this is really helpful, because a lot of times you have to kind of go hunting to figure out where those problems are. And this gives you the code right there inline, so that you don't have to dig through all of your code and figure it out. So it'll tell you exactly where the problems are. I won't go through all of them, but you can see it's very useful. And then we've got passed tests here, and a nice little high five: "You rock!" Always a nice little shout-out. And then this is, I think, also really useful. You've got a section for manual tests. It tells you, here are the things that it couldn't automatically test, and here are some things that you should test manually. A lot around keyboard navigation. And you can kind of check them off and say that you've checked these. So this is kind of a nice reminder of additional things that you should be doing.

[20:34] So, excuse me. In addition to being able to look at a single page... actually, let's look at a different page that maybe has some failed tests, real quick. So, this one has a couple of failed tests, which show up here. And it's the same thing: I can drill down and see where the issues are. But then there's a dashboard in the Content area for Accessibility Reporter, and I can run tests for the entire site. Obviously, this is going to take a while, especially if you've got a really large site, but it will scan the whole site. I went ahead and did that. So now we've got a really nice dashboard that shows us everything sitewide. You've got some really nice graphs here, so you can get a really good visual representation of what's going on. And then down here, you get your list by lowest score, and then you can click in here and go look at the specific issues, and start working on improving the accessibility of your site. Obviously, I've got some work to do on this site. Not a huge surprise to me there.

[21:45] So next, let's head up and across Slimsy Bridge, which helps bridge the gap between desktop and mobile with effortless responsive images. Just an empty box here, so no idol this time. Sorry. Definitely a pretty widely used package. This package is really helpful if you don't have a dedicated front-end team, and you need to make sure that all of your images are resizing responsively. So, let's take a look at this one in the backoffice. I created a demo page for this, to show how this works. So I've just got a few fields. I'm using the same image for all of them, so that we're comparing apples to apples. And this one is just going to use the standard img tag. This one is going to use a special Slimsy tag helper for the images. And then these two are rich text editors. The first one is again going to use a standard image tag, and the second one is going to actually call some Slimsy code that will parse all of your rich text editor content, and convert the images to Slimsy images, so that they're responsive.

[23:06] So if we take a look, the code is pretty much identical. It's just an image tag in both of them, just to pull back the curtain, so to speak. So, the same code there. So, if I open up this page... So, if we look at this on desktop, we've just got the same image four times, all the same size. And we'll see how this goes, because sometimes the emulator tools don't work very well. So, let's switch it to responsive. And then let's switch it back. And that is super tiny. Let's make that a little bigger. Still tiny. It's like you're at the eye doctor.

[23:56] So, as you can see, the first image is extending off the screen, because it's not doing any resizing, but the Slimsy image has been resized to fit the screen, which is very helpful. I had to kind of switch back and forth, because it does the resizing on page load, so the emulator sometimes doesn't catch up. Same thing down here with the rich text editor. Nothing has been done to the first one, but the Slimsy code has run and resized my second image. And if we inspect this real quick, we'll see that Slimsy has swapped this out for a picture tag, and is using WebP format. And the one I originally loaded was a PNG, so it switches it for you. So that is the Slimsy package.

[24:52] So now let's head to the Tree of Sustainability, where those of us who are eco-conscious can get a big tree hug in. We've just got some old primitive cookware, which is in really good shape, considering how long it's been there. This one goes all the way through version 16. I updated all these numbers and the supported versions just last night, so all of this is up to date. And actually, Rick, the package author, has been very helpful to me during this demo, helping me with questions and things. So if you see him around, give him a big high five.

[25:40] So, sustainability is becoming more and more of a thing in web development. We're trying to be a lot more conscious of the carbon footprint of our sites, and starting to... at least maybe outside the US. We don't care about the environment. So it's definitely something that people are starting to think more about: the cost of all our interconnectedness, and all of our digital footprint. So let's take a quick look at the Sustainability package. We're on this page, so let's go ahead and take a look. So, not only is this a really good tool for figuring out the carbon footprint of your page, which is listed over here, but it also gives you a really good view of the performance of your page, because obviously the bigger your page, the longer it's going to take to load.

[26:30] So, this is going to tell you the overall page size. So, not horrible. And then it's going to tell you your total image size, and then your individual image sizes, and also your scripts. Sorry, scrolled right past them. Your scripts, the links, and then your CSS. So you can see everything that you're loading on your page, and the net cost of it. So, again, this is great at a single page level, but you can also go up here to the Sustainability tab and get an overall view of all the pages that you've run. Now, there's not a way to run this across your whole site at once. So I've just gone through and clicked each page, so that there's a fair amount of data in here. But if you switch over to the stats, it'll give you a little more information, and it'll tell you, at a quick glance, the carbon footprint of all your pages, but also the page size. And if I switch over here: obviously, my homepage, I've got some problems. And if I click through to the homepage, I'm going to guess it's because of image sizes. Click the Sustainability tab, and it is. I've got way too big images on that homepage. So, definitely something I need to address.

[28:00] All right. So we're going to stop here and just rest for a quick second. I'm going to need a drink of water, if I can get this cap open. And while we do that, let's talk a little bit about where we want to go next. I want to get some input from you, because we're probably not going to be able to make it to all of these today. So, definitely feel free to come back to the website, and I'll show the QR code again at the end, and check out the rest of them. If you look at these pages, there are videos on all of the pages. So if there are some that we didn't get to, and you want to see a demo of them, there are videos on all of them on the website. You can also look for the other idols that we might not find. So, if we take a look, we can either head down to the south and look at Diplo God Mode Rock and Lake CMS Import, or we can head north to CSP Manager, Block Preview Falls, Content Lock Cave and Rollback Previewer. I was going to do this digitally, and I had a package that is a polling package, but with the internet unreliability, I decided we're just going to do this old school, with a show of hands. So, who wants to go to Diplo God Mode Rock and Lake CMS Import? And who wants to go up to the north and look at CSP Manager and Block Preview Falls? All right, that looks like it's winning. So, we will head north.

[29:30] So, let's check out the CSP Manager. And we've found another idol. This is my spirit idol. This is Grumpy Guy, especially before I've had caffeine in the morning. This has been nominated for the Package Awards the last couple of years, and is definitely gaining some traction. A fair number of downloads. I find that getting my content security policy on my site just right takes a lot of trial and error, and I'm always having to fine-tune things. And as you add new features to your site, you're having to add new rules. So, this package makes that a whole lot less painful, because you can do it right in the backoffice. You don't have to mess with your web.config, or sometimes you even end up with security policy rules in your code. So this makes that much simpler.

[30:27] So if we go over to the CSP Manager and take a look... The other thing I really like is that you can set your CSP separately for the backoffice and the front end. That's really helpful, because I've found that I have to put so many rules in to get the backoffice to work that, by then, it's kind of useless on the front end. So it's really nice that it will separate them for me. And it brings in a base set of rules as a default, to kind of help you out: here's what you're going to need to make the backoffice work. Because sometimes it's a little bit of a black box, and you don't know what you need to add. So, if we go over here to the settings, a couple of other things to call out here. Obviously you can enable and disable it.

[31:16] But the other thing that's really useful is you can set this to report-only mode versus enforced, so that you don't have to go all in at once. You can actually figure out what's wrong with your site before basically rendering it useless. So if we switch back over to the developer tools, and get rid of mobile so you can maybe see something, I'm going to reload this. Excuse me. Scroll up here and find the right one. So, if we take a look, I do not currently have a CSP in my headers.

[32:03] So, if I switch the settings up here, move this down a little bit, and enable it, save that, and reload... Now I have a content security policy here, which is awesome. And I can add rules in here, and it just reloads right away. I don't have to restart anything, restart app services or anything like that. So let's take a look on the front end. Actually, let me disable this, because it does mess with some of my other demos, because I haven't gotten it quite figured out. So, I'm going to disable this before I switch.

[32:57] So, I kept this one simple. I didn't put a lot of rules in here, just so it's easier to see. So really, I just have frame-src, script-src-elem and img-src, and I'm setting them all to self. I currently have it disabled, so I won't have a header for it. I'll spare you looking at the code for that. Let's get some of this stuff out of the way. And I'm going to actually change this one and make it invalid, just so we can see what it does. So, I'm going to set it to report-only first, and reload this page.

[34:07] Apparently, I did not save it. Or I didn't enable it; that would be useful. All right, so let's try that again. So I'll get these report-only warnings, or messages, in the console. And then on the network tab, I will get the CSP in report-only mode. So, I've got this in report-only. And then if I were to enable it in enforced mode, I'm going to lose all my images, because that is not a valid... and I've lost my video as well. So, super easy to enable, disable and update your security policy right here in the backoffice, which I think is a big time saver. So, let's put everything back the way it was, so that nothing gets messed up. And it looks like I've got about 9 minutes left.

[35:26] So, now let's head over to another one of my favorite spots in the Umbazon. Let's head over to Block Preview Falls. Got some fans. All right, good. So this... whoops. This is where you get to see your blocks cascade through the backoffice. And obviously, quite a few downloads. This package addresses... oh, and we found another idol. Let's put him out there with the rest. Getting really close. I call him the psychedelic idol, or the deer-in-headlights idol, whichever one you want to call him.

[36:13] So this package addresses what I think is one of the, we'll say, few shortcomings of Umbraco, and that's the lack of a visual preview in the backoffice. You can't really see what you're doing. Obviously you can save and preview, but then you've got to switch to another browser. So this renders your blocks right here in the backoffice, so you can see them. And I think that's really helpful for content editors, because they can just get a better sense of what they're doing right here, without having to switch tabs and things like that. You'll notice that the colors are a little bit off, and that's because I was lazy and put the CSS to change these backgrounds to green directly in my .cshtml view. So the backoffice doesn't know about that, because it's using the stylesheets that are loaded into the site, and it's not picking up the inline styles. So this is not iframing this in, like some CMSs will do to give you that backoffice preview. It's not loading the live site into the backoffice. So that is Block Preview. Nothing fancy about it: nothing to click, no sections, but just a really powerful tool to let you see what's going on right here.

[37:32] All right. So now let's switch over to Content Lock Cave. Keep an eye on time here. So this is a newer package. It's available for versions 15 and 16, with just about a thousand downloads so far. So it is pretty new. There's a similar package called Back Office Editor Preview... Preview Editor... I never get the name right... Back Office Editor Viewer, which does something very similar, where you can lock content. Actually, you might have seen the icons for it, for version 13. So the demo site I'm using is version 13. So it does a similar thing. But the Content Lock package, if we switch to this one... Sorry, this site, that one is pretty rough. But this will let you kind of isolate your content from other editors while you're working on it. And that is not the right login for that site. Let's try this.

[38:56] And then, to really see what it's doing, let's open this in an incognito browser, so I can have two users. Okay. So, now that I'm logged in, you'll see I've got this little icon, this little visual up here, to tell me who's logged in. And this is going to tell you, in case you've forgotten who you are, that this is you. And if I go over here, let's go work on the homepage. And it's telling me that this page is locked, because I previously logged in as the administrator and I had locked the page.

[39:53] Yep, there's my warning. And this is Pages locked by me. And you'll see that I can edit it. But in the other one, I cannot; these are all grayed out. So, just a nice tool so that you can protect your content while you're working, if you have multiple content editors. There is a way for... if I were to lock this one. Here's how you lock: come over here and say Lock document. So, this page is locked by me. But the administrator can override that. So if you get to the point where you know that the person's on vacation, or they've left or something, you can unlock it as an administrator. If I had done that from the other account, which is not an administrator, it would not have let me do that.

[40:46] So that is pretty much all the time we have here in the Umbazon. So, thank you all for coming. If you want to learn about any of the ones that I didn't get to, you can come back here with this QR code. Also, feel free to come find me; I'm happy to talk about them. You can also look, like I said, for that last idol. We found five of the six, I believe. Yeah. And check out the Marketplace. There are hundreds of packages out there. There's lots of really great stuff built by the community, and if you don't see what you need, build your own and then share it with the rest of us. So, thank you so much. Enjoy the rest of Codegarden. [Applause]