49:4 Streamlining WordPress website maintenance

Note: This transcript was auto generated. As our team is small, we have done our best to correct any errors. If you spot any issues, we'd sure appreciate it if you let us know and we can resolve! Thank you for being a part of the community.

Lee:

Welcome to the Trailblazer FM podcast. This is your host, Lee. And on today's show, we have the wonderfully handsome. It's Florian Salman. How are you today, sir?

Florian:

I'm fine. Thank you.

Lee:

How are you? No worries. You didn't know you were going to get complimented, did you, when we first started?

Florian:

I didn't expect that. We're in Germany, we don't do that here.

Lee:

Well, I don't know. I'm British. It's what we do here. Enjoy. Well, Florian, welcome to the show. For the people who have not heard of you, could you just give us a very quick bio?

Florian:

I was a WordPress freelancer for a long time. I studied computer science, also worked in a company, and so on. I had a maintenance agency for quite a long time, WordPress maintenance. I was playing lots of music beside that. My heart is beating for music. But when Corona hit and everyone went to home office, I was focusing more on the maintenance agency we had. I was like, Okay, there are some issues. We have some, I don't know, quality control issues and so on. That is where the idea for the other plug in currently came.

Lee:

Nice. How did you get into WordPress itself? If we rewind even before those days, what got you into WordPress itself?

Florian:

It was. I was working as a full stack developer before, really like the front and back and did everything of that. Because I wanted to play lots of music, we were touring with our band through Germany, actually through Europe also. I'm playing the drums and so on. Then I was thinking, Okay, what is a CMS that you can easily learn where you have many potential people using it? You don't have very big customers, but you have small to medium customers, so you can work alone with them or as a small medium agency. That was why I chose WordPress in the end and not other CMS.

Lee:

Were there any other contenders? I remember for me, it was Drupal or WordPress, and I could have gone in either direction.

Florian:

Yeah. In Germany, many people use type of free. I always say, Why? I don't know why, but it's very popular here. That was for some minutes I thought, Maybe I should go for Type of free. Then I looked into the documentation, I was like, Okay, no, I don't want to do this. Wordpress is so amazing.

Lee:

Then WordPress was so much easier, wasn't it?

Florian:

Yeah. Shopify is also something what many people think about. But I don't know, I just love WordPress. That feeling of you have all those plugins and everyone can just do something for it.

Lee:

You can make it do anything. On that, you have actually launched a product called WP Bug detector. I'd love to know what gave you the idea for the product?

Florian:

Yeah. The idea came from the maintenance agency where I was working for that we actually created with a business partner. We were using all those great maintenance tools that are out there like ManageWP, BlogVault, you name it, MainWP. We had several of them and tried them. I found out that when we run updates or when we were working on the page, we had many clients, really, really a lot of clients. You don't know all those websites by heart. How can you make sure afterwards that you did not break something, that when you run the updates, nothing changed, and when you worked on it, you just changed the part on the website you wanted to work on. You don't have any cross effect somewhere. That is where the idea came from, how we started developing. I mean, there are other tools that are similar, but they're all very hard to set up. It takes a lot of time to build a scenario with the configuration and so on. I was like, We cannot do this for every client. Spend half an hour to set this up and check every month for one hour if all our test scenarios are still the same, if they're still working, there has to be a way to make this automated.

Lee:

For us, I remember the two main things was either a WordPress update would break something and I wouldn't be aware. Actually, there's three things. There was a WordPress update, or I made a very slight CSS change and perhaps didn't close something and it caused an absolute nightmare on a page that I had no idea about, or just frankly, the client had been into WordPress and they'd gotten a little bit crazy and almost ruined the design by moving things around, et cetera. Those three things. And what we used to do was make all of these screenshots. And that was really difficult for A, really long pages and B, really long websites. And then manually having to look through what was going on was a nightmare. How does your product work? How does it know? Tell us the magic.

Florian:

It's a custom algorithm we wrote. It's also based on screenshot comparison. It takes frequently screenshots on a daily basis and it compares them automatically to the day before. You can also do that manually, say I just ran my update, so I just want to check what changed in between. That is the technology, but we're not using a Pixel perfect comparison. This is now getting a little bit technical here because if you do a Pixel perfect comparison, you have issues when a section disappeared and then everything below is marked as wrong. It may happen that on an online shop, a section like the header disappeared and then suddenly everything below is wrong and you don't see that the price also changed because it's not clearer. We detect this vertical shift too. This is really cool.

Lee:

Is that using AI by any chance? Or is it a very Clever algorithm?

Florian:

I would love to say it's using really high scientific AI with the GPT4 API and everything is included. It's a magic. But it's still a quite complex algorithm, but it's not using high scientific AI.

Lee:

Not yet. But at least we've said it now so that this podcast will rank in the search engines because we've said that very popular phrase. I would be interested then, how does it as well handle dynamic content specifically?

Florian:

For dynamic content, right now, there's a CSS Selector box and you just put it in. For example, if you have a cookie overlay or you have a slider or something, and you just put a visibility hidden on it, and then you just hide it from the screenshots.

Lee:

That's easy as that.

Florian:

There are great ideas I have for the future, how we want to automatically detect that, but I don't want to say too much about this now because it's not public yet.

Lee:

Well, that's fine. At the very end, folks, we will find out how we can follow Florian so that we can keep updated on such ideas. Speaking of future updates, I did notice on your website that you are announcing something for WooCommerce soon. So for us, especially with WooCommerce themes, if you don't update the code inside the theme itself, say for the shopping cart, et cetera, then things can get out of date very quickly keeps updating and things will break. How do you plan on handling that?

Florian:

We will very soon implement the feature to test WooCommerce cards and checkouts with products inside. There's almost every tool, also the screenshot based comparison tools that are out there with big configuration set up, etc. None of them has that feature that you just test your checkout with a product inside. But since we have a WordPress plugin, we can automatically pull that case and automatically let you test the checkout so that you know it didn't break and this is how we're going to do it.

Lee:

I can't wait to see that. In fact, we'll have to invite you on just so you can show us how that works specifically as well. Because that's one of the things here. You're taking the shift, aren't you? You're going from a visual, so we start off with the visual issue, which is very common, what's going to break? You've got the algorithm there to detect if something shifted down just because a little bit more content is added, then that's no big deal. But you're more trying to detect those visual bugs. But with the added benefit of being an installed plug in, you can now start to do some of that interactive stuff as well, which screenshots ain't going to cover it. You ain't going to know if you can't get to that particular page. Do you have any other plans for... I don't mean, maybe this is going too far in that, but do you have any other plans in the future for even clicking specific buttons or doing any automated flow through of a website, or are you steering clear from that because everything's very different.

Florian:

Yeah, so that's functional testing. It's funny because sometimes I got the feedback, like, Oh, the plugin is working. It's working so well. It detects the visual differences perfectly. But it doesn't test contact formulas or similar things. I don't know if I'm so happy with it. I'm just saying it's covering this visual aspect which is not covered yet. I don't know any maintenance agency that is really doing this right now at today. Testing contact formulas is definitely like... This is a long vision for bug detector. It will be the bug detector, but I can also say it's not in the short term that we do functional testing.

Lee:

I think that's fair for you to do. Really being able to focus on doing one thing really well in the offset, and the biggest problem for people is the visual aspect of things. We all know very quickly if something doesn't work, we know what to test as agency. Let's create this example. I'm an agency, I'm updating my client's website every month. I don't have the ability to visually check everything looks okay, but I certainly know that I need to check the contact form. I need to go to the shopping cart and make sure that I can still check out. I need to make sure I can add and delete a page. I have essentially a list of things that I need to check for each and every client. That's not a long list. But if I was going to visually check every single page, that's a very long list. So that's where you would come in. Now, we are, folks, if you are listening on the podcast, in a minute, we're going to have a look at how this works. So there'll be a link in the show notes on the podcast for you to come over to YouTube and you can carry on watching the rest of this on YouTube.

Lee:

If you're already watching this interview on YouTube, then you're awesome. If you haven't subscribed, please do and press that like button because that will make me and Florian feel exceptionally happy. Before we have a look, though, at the product, I did spy a little button that said join the API waitlist. Have you got some cool tricks up your sleeve for the API?

Florian:

Yes, we're currently working on an API. There were many people who asked for that so that they integrated into their own dashboards. You will be able to use all the functionality from WP bug detector, but white label. It will be white label opportunity. It's great for hostess, for people who have their own software and that.

Lee:

We have our own SaaS product in the events industry and we use WordPress as the vehicle for that and our clients build their own websites. If we could then provide that white labeled, we're going to look like we're the best company in the world. Look, they've even provided us with this. Meanwhile, it was you.

Florian:

That's so cool because I didn't have that on my mind when I first started with the plug in, but it was just the feedback I got. Now we just said, Okay, why should I develop into a black box where I don't know what people want? Just let me listen to the feedback. This is the point where I think feedback is so great when people just come to you and say, Hey, I wish this feature would exist, or, Could you go into this direction? We just say, Yeah, let's do it.

Lee:

Let's do it. I think that's one of my biggest takeaways in any project like this is listening to feedback and doing something with it. I'm one of those people that I feel attacked when somebody gives me feedback. I really have to work through that because I know all they're doing is that they actually really care. They care about the product, they'd love it if they could do something else and they have great ideas. So I have to very often just ignore my pride and go, Yes, tell me, what is it you're looking for? And sometimes the idea I'll be like, It's good, but it's also a lot of work and it might be taking us off in a different direction. Other times like this with the API, it's like, Oh, yeah, that's brilliant. Well, enough chatting. Can we take a look? Are you all right to share your screen and let's take a look at how this works?

Florian:

So this here is the WordPress back end. We already, like we all know it, we've seen it sometimes too often. And here is the WP bug detector directly integrated as a WordPress plugin. You can see it here, we have the comparison grid and the settings. What we see here is, let's start with that, is for example, it's a website version of the 5th of May from 2 AM. I was working very late. We just took some screenshots of the website and we can check them out and just see the prices, the surprising page. Looks good so far. Let's say now I did some maintenance work here, I changed something, and now I want to check if there is a change, if something broke, etc. Then I would click here on this button, on this new comparison button, and it would just take a new set of screenshots of the website how it is now and compares it to the 5th of May. This would result in a comparison, as you can see here. There's a comparison of one date to the other, and there we can really instantly see where changes are. We have those two fields where it says needs review, and we have those where it says no differences found.

Florian:

We could also filter that and just see the ones that are problematic. Now we can just click on it and see here on desktop, tablet, mobile, what changed. If we look into it, we directly see here the prices changed. Now let's have a look at it. You see here in the comparison. All the prices are there.

Lee:

Oh wow!

Florian:

This is really cool. We can see that before and after. We can directly see the changes. So.

Lee:

At this point, I could be proactive as well. So if I've got a log in the system, because a lot of us will use a login WordPress to tell us if a client did any activity, so we know if they've updated anything. This will allow us to check, has the client actually updated the prices or is this actually a bug? Yeah, that's awesome.

Florian:

Exactly, yeah, 100 %. And for example, here on the About page, we can see how something changed, but only on the tablet, not on the desktop, but mobile. So let's Go and check. .

Lee:

I was going to ask you about that. That's good.

Florian:

Yeah. We can scroll down and then we see something changed here. Okay, what is that? It looks like a slider, so let's have a look at it. We see, okay, the name changed, and here also the stars changed and also here. You can directly find all changes on the website. There are other bigger things, where for example, here we can see the whole homepage broke, and we have absolutely no clue how it looked before. Now we could just go to the before and the after, and we see many things changed, but we cannot see everything at once. We just go to the differences and we see, okay, here, let's scroll down and we see, for example, the links, they are broken but the text was already broken before. We can really inspect where are the issues, what changed. We see here the image and the image, the links changed, but some other parts were still broken before. This is really interesting. It makes the inspection very neat, very easy to handle.

Lee:

I guess there's a couple of use cases here as well. Not only is that just the ongoing maintenance, but I imagine as well if you're a team who are actively building a website for your client, if you could run this on a daily basis, this would give you a little bit of a progress update and also allow you to work out whether a bug existed a few days ago because that's often something... It's great to have GitHub and we're able to commit every single day, etc. And all of that. But we don't know if visually a bug was visible several days ago. We don't know if it's been caused within the last 24 hours. Whereas if we can go back to that page and say, Oh, look, that sentence was overlapping four days ago. We can also have a look at what we did in GitHub four days ago as well and start to work out what could that have been. Where can we go and resolve that?

Florian:

Yeah, 100 %. Or maybe when you create a website and you share the access with the customer, you already finished the website. There are only some small last changes and the customer asked if you can already exchange some text or some images and so on. You share the access and then suddenly something's changed and the client says, Oh, no, you still have to fix this. You're like, No, I think it was already working, so why is broken now? Then you can just see, Okay, before I shared the access with the customer, it was there and now it's gone. So we know that in between something happened.

Lee:

Are there any performance issues here? Are you storing the pictures within the website? Do we have a danger of filling up our hosting here or is this a toasted service?

Florian:

Yeah, it's a nice good question because in the beginning we stored them on WordPress, but now we're storing them on the server. At first I wanted to leave everything on the WordPress as far as possible because I'm not a fan of saving everything on our servers. From Germany, I love being GDPR relevant and so on. But we just decided then to store all those images on our servers in Frankfurt, they're located and it's just better. It doesn't build the hosting space.

Lee:

I can imagine, especially if someone's doing a daily detect with a, say, a 50 or 100 page website, then that's going to be a significant amount of data. That must be a lot of pressure on your servers as well.

Florian:

Yeah, that's true.

Lee:

Well, you do sell the daily package. So what would you recommend to a business as well then? A lot of the agencies that are listening in right now would be doing, say, monthly or weekly WordPress updates, or they may be doing just say security updates, etc. Whenever there's security patches released. What are the different options that you guys have for testing? I'm assuming you're not doing hourly because that would be nuts, but what are the options that people can have?

Florian:

Let me show you that. It's very easy to select the pages you want to test. Maybe you don't want to test the whole website because you could probably lose the overview. Maybe you just want to test some posts and some pages and you can easily select them and select two products and then you're done and just say, Okay, I want to test those things. That's very easy. What's really cool is the email notifications. As soon as there are some changes detected, you can set up an email notification here at the bottom where you just say, send me an email whenever you find something. This, in combination with the daily check, is very cool because then you don't really have to check that anymore. You just get the email. You can maybe forward it to some other services so that you get push notifications somewhere else, also on the feature list. Then the maintenance becomes so easy with that.

Lee:

That's fantastic. Can you also show us the dynamic content as well? Just how would I select that to say, All right, ignore this?

Florian:

Yeah. It's basically this custom CSS box. You can already see as a placeholder, you can just say, just set a CSS Selector like cookie banner. You set the visibility to hidden. Or maybe you want to do some other CSS things. The cool thing is the CSS only gets loaded when the screenshot is taken. Because I was asked about that, does the CSS have load on the whole page? Every time when I set that visibility hidden, no. It just gets loaded when you take the screenshot, of course.

Lee:

What's this delay thing here?

Florian:

This delay thing, it's to... Let me explain that. When the screenshot is taken, the server goes to the website, it opens the page, it waits a little bit, it scrolls down, it scrolls up again. Lazy, loaded images and all those, normally they get recognized and we have all the JavaScript and all the images. But in very rare cases, like 5 % to 10 % of the websites, sometimes you have to increase this delay a little bit. You just have to set a little bit higher so the page waits another couple of seconds before it takes the screenshot.

Lee:

That's really clever. That's something that we would struggle with, a really long page. You've automated the whole process of go all the way down, get everything loaded, then take the screenshot. You're not going to get a half loaded page.

Florian:

Even resize it a bit. We do lots of things here to create the screenshot. It's also a custom coded functionality.

Lee:

That's fantastic. Well, mate, that looks absolutely fantastic. Could you let us know where we need to go to check that out, but also how we can connect with you?

Florian:

Yeah, sure. Of course, you can go to the website. It's wp-bug-detector.com. It's German style. You can connect with me on LinkedIn. I'm very active there and I love just getting new ideas, chatting about everything, how you can use it and so on.

Lee:

Well, folks, you can check out all of the links in the show notes. I am personally really impressed with this product, mate. You've seen there is a clear problem for agency owners who do regular maintenance and can't test multiple pages all of the time. So you've automated that process in a really clever way. And you've thought of so much as well with regards to dynamic content, with regards to loading the entire page first and making sure everything loads, adding in those customized settings, even those settings in there as well for don't test all posts, just just two because they're pretty much all the same after that, or only test two products, et cetera. So again, you've gone to the nth degree and you've got so many more plans as well for the future, which sounds ridiculously exciting. So we'd love to have you back on again in a few months. If you could show us where you've gotten to then and maybe give us a peek of the API if you'd like to in the future. Hopefully, you will be back. Is there anything else you'd like to share with our audience before we say goodbye?

Florian:

No, I just want to thank you for inviting me to the podcast. I'm a big fan and now being here, that's really cool.

Lee:

Thanks. A big fan, I like it. I'll send you an autograph. I'm joking. I'm a big fan as well. Thank you so much for just taking the time and sharing your product with us. Thank you and take care. Cheerio.

Florian:

Thanks. See you.