49:1 Zero setup, max efficiency

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 Adam Zieliński. He's all the way from Poland. Actually, he's currently in Poland. We've not flown him in. He's live here on YouTube as well. If you're watching, folks, you can come and check out because we're going to be doing a demonstration of what we're talking about today later on. So check out the playlist timestamps below. Adam is a WordPress core developer at Automattic, and I am super excited to find out, A, who Adam is, and B, what the WordPress playground is all about. So Adam, welcome. First of all, can we get a little bit of a history of your good self? Just let us know a bit more about where you're from, how you got involved with WordPress, and how you got involved with Automattic.

Adam

Thank you for having me, Lee. It's a real pleasure to be with you here. So I started working with software about 15 years ago, still in high school. Turned out I found a gig and I realized, Hey, you can make some money this way. That was nice. My first few projects were based on WordPress. Then I diverged into other stuff like framework, symphony, other programming languages. A couple of years ago, I rediscovered WordPress when I started working in Automattic. F or the last two years, I've been focused on WordPress for 100 % of my time. I'm working as a WordPress core developer. And just last year, I thought, Hey, WordPress is really hard to set up. It's difficult to start working with it. Once you have technical details, it's easy. But getting there, you need PHP and MySQL and all that. So wouldn't it be fun if you could start using WordPress, learning WordPress with a single click on a website? And after some digging, I figured out, yeah, you actually can. And that's WordPress Playground that I'm so thrilled to be talking to you today about.

Lee

Nice one. So before we jump into that as well, there'll be a few people that are insanely jealous that you are working with Automattic. How did you get that role?

Adam

Well, I applied and turns out they're applied.

Lee

It is as easy as that, guys.

Adam

Well, for the record, at the time I already had like 10 years of experience under my belt and I've been working in multiple companies and I was a startup funder, and I have a significant WordPress experience, so there's that. I've been reading at the time and I've been super nervous about this entire application process. I've been reading that out of every hundred people that apply, like, on these things, make it to the end of the entire recruitment process. I don't know what the figures are like today, but that was it at the time. But after the initial interview, I was pretty surprised about this entire trial process at Automattic. Turns out you do a couple of weeks of paid work and this is what you've been doing anyway, like on your day to day job. And that's your recruitment process. So that was very interesting to be doing actual work with the actual team that I later ended up working with.

Lee

That's phenomenal. That's a really great way to test your skills, but also to test whether or not you're all going to work well together as well. I think that's a really good method. And I had heard someone else mention that that's how they do it. That sounds fascinating. Certainly something that we've... I mean, we do a bit of a more long winded way where we'll actually get people in as apprentices into the company. They'll get paid and they'll actually get paid for a year with us. They'll also be doing some form of course, usually with a local college. We'll train them, they'll be doing a course at the same time. Then at the end of the year, if we all gel and if they've managed to pass their course, et cetera, we'll offer them a full-time job. Oh, this is really awesome. It's quite different, but it's also similar in as much, especially at the end of the process. You can really work out whether or not you will get on. And thankfully, most of us all get on, which is awesome. So WordPress Playground, tell us a little bit more about what it's all about.

Adam

Sure. So WordPress Playground is an entire WordPress running in your browser with a click of a mouse. So you don't need to do any prior setup. You don't need to install PHP or a database or a web server. You only need your JavaScript and a web browser. Really, only a web browser because every browser runs JavaScript. So there's zero set up, zero computing infrastructure. You just open a link and that's it. And that's possible thanks to something called Web Assembly. So very briefly, Web Assembly is this way of taking regular desktop software and building it to a byte code that JavaScript can understand. So we can do it with simple programs like maybe just Hello World. But turns out you can do it with quite complex programs like the PHP interpreter in this case. Oh, cool.

Lee

And big question, of course, will it run on Internet Explorer 6?

Adam

Well, I'm sure not, but I really hope no one runs Internet Explorer 6 these days.

Lee

I still have a clause in my contract to say your website will not be supported by Internet Explorer 6.

Adam

Oh, it's so awesome to have that.

Lee

Just in case. That's incredible. So essentially the browser can replicate on the fly an entire server environment with php, MySQL, etc. And you can spark up a WordPress there and then without going through that entire process of, I don't know, going on to say digital ocean and creating a droplet and then installing WordPress and then installing all of your plugins. And then if it screws up, you got to do the whole process again. I assume with WordPress Playground, you can pretty much hit the reset and off you go, start over.

Adam

Exactly this. Actually, there's one technical detail to that I'll clarify. So you mentioned MySQL. Wordpress Playground actually runs on SQLite. There's no way to run MySQL in the browser. There's an entire story to that with the plugging that translate all my SQL queries into SQLite to make it possible. But I could talk for an hour probably about just that.

Lee

No, that's just as cool. I was quite impressed by the idea of an entire MySQL database running in there, but SQLite, that solves the problem. Perfectly fine. What are the key benefits then for users and for creators in the WordPress space?

Adam

Zero set up is a huge one. If you want to mess up around with the site, like try a set of plugins, themes, create some pages. Well, you don't have to set up any hosting account. You don't have to install anything. You just go to playground.wordpress.net, and it's all there. It's your private site. It runs in your browser. You can do anything you want there. Maybe you want to upload your own plugin without risking breaking any live site. Maybe you want to build an entire theme in a site editor and then export it. Maybe you just want to prepare something and send someone a link to share that. All of this is possible on playground.wordpress.net And it all runs on your device. You're not actually sharing any data with any service provider. It's also private. If you want to reset it, just visit the link again.

Lee

That's incredible. When I first checked it out, I thought this was some hosted environment like the other sandbox environments that you can create where you can create something, you get a special link and it's done an entire installation of WordPress on somebody else's server. I'm always a bit hesitant then to upload our stuff to test it, whereas it's all happening in the browser. What can folks test with the playground beyond just plugins and themes, though? For example, php environments, can you play around with that?

Adam

Yeah, absolutely. So you can change php version to any version supported by WordPress, going all the way back to 5.6. You can change WordPress version. You have full control over the files and the data in there. So maybe you want to import some Starter content, or maybe you want to run a WordPress REST API request to set up some plugin. You can do all that. Even better, you can do it all with a JSON file. They're called Blueprint and they allow you to prepare preconfigured WordPress playground instance if you want to, for example, share it with other people. There's an amazing example of it's called Glot Press Playground and Alex Kirk prepared that. So if you wanted to participate in translating WordPress, what you had to do was install WordPress, install translations plugin, maybe install another translations plugin, get translations, install the plugin that you want to translate if you wanted to do that. It was a very involved process, huge ask. Right now, what you have to do is just click on a link and it all happens for you.

Lee

In fact, we'll put a link to that in the show notes because you've already provided us with that. That was fascinating because I was having a look at that earlier. That's incredible. So you've mentioned the, the Jason, it's almost like a recipe that will start something up ready for you to rock and roll. If I'm then working on that website in my browser, this is all localized to me. If I close the browser, is it all gone or is there a way of saving that progress and eventually even exporting that out to the real world if I want to?

Adam

Sure. So there is a download button and what it does... So normally in WordPress, when you export things, you get a pretty limited set of information. So maybe you'll get your posts and maybe you'll get some additional metadata for them, but you won't get user accounts, for example. Or maybe you want to get media files. With WordPress Playground, you get everything. So you get all your WordPress files, you get any plugins you installed, you get the entire database because it's just another file. It is a SQL database. And then you can take that. At a later time, if you want to, you can reupload it to the site and you will recreate it. You can host it anywhere you want. And if you want to scrape the entire site that you build, well, you just close the tab and it's gone. In the future, there will be a way to preserve that over multiple browsing sessions, but that's it what it is for today.

Lee

So I can play with it right now. I'll spark one up. I can play around with that. If I want to save my progress, hit that download button. I can then reopen and do some other things and then go back to my work. But hopefully in the future, you might even have a snapshots function or something like that that might be able to save some of those sessions in the browser. That'd be pretty epic. Are there some specific use cases that you think for, say, web agencies, web developers might want to use the playground for?

Adam

There are multiple angles to go about it. One would be to show a demo of your product, plug in or theme, right on your company homepage. Every user would be able to visit and instantly see your WordPress where your thing is running. Technically, maybe you can do that today with a regular hosted WordPress. However, there are many concerns with that. What if you give users admin access and some user is just malicious and puts offensive content in there? You don't want that to happen. There are people invented ways of resetting WordPress every couple of minutes or putting in a read only mode or doing a bunch of these tricks that are not obvious and you probably can find a way around it. But with WordPress playground, there is no centralized data store, so everyone is safe. You can upload anything you want and it will not affect other users. For developers specifically, you can use WordPress Playground to learn WordPress directly in your web browser. I prepared a demo of that. There's this interactive tutorial on my blog that teaches you how to use the new HTML tag processor API released in WordPress 6.0. The way it looks like is you visit a page, you read about a premise like a paragraph of text, and there's a code snippet.

Adam

You can run that code snippet in your browser and you can change it. Every concept is introduced using a code snippet. You don't need any prior set up, you don't need to follow any steps, and you don't need to worry, Oh, this thing was written three years ago. I wonder how much has changed since then. Maybe the set up is not the same anymore. Now, you just read and you learn as you go. The future plan for that is to... My ideal vision is to have entire WordPress documentation consisting of interactive code snippets. And even better, I would really love them to be that nerdy cool tangent on that. I would really love them to be testable so that every time someone merges the change into WordPress, it's tested against all the documentation snippets so that everything is always up to date. So anytime you want to go and learn something, you know you're running the latest version.

Lee

I was just thinking, so you mentioned about putting it up as a demonstration. So I run Event engine and what we have is we do an installed and set up for you event website and we have our own customized plug ins that work specifically in the events industry. If we were going to put a demonstration up using the WordPress playground, how can we ensure that somebody who's going to go ahead and check that out can't steal that? We obviously want them to subscribe at some point. What you first described was you can run WordPress in your browser and you've got the database, you've got all the files, you can download a copy of it, etc. Is there a way there for to display a read only, as it were, quote unquote, read only, or at least limit the level of access that somebody might be able to have when they're taking a look?

Adam

Let me ask you a question first. What's the monetization model on this? Are you charging for code or for API access or what would I pay for if I was your customer?

Lee

So you would be paying to use the product on our service. You wouldn't actually be ever accessing the code. We'd never give them access to the plug ins, etc. These are for people who don't know how to code. They want to be able to input their own information, but they also pay us for the design, etc. So we're not releasing this to them because it would be an absolute nightmare. It's something that we used to do. So we like to try and restrict what they do, but we also don't want competitors to just go ahead and grab everything that we've... All our work that we've done so far.

Adam

All right. So that would probably not be the best use case for WordPress Playground then, because you have to ship. So the entire WordPress runs on end user device, so you have to ship all the code that runs there. So if you're concerned about other people copying the code, well, that could happen. However, what you could do, I know I've read recently how tailwind explorers... What was the word for that? Obfuscating class names to make it not impossible to steal, but maybe difficult enough.

Lee

I guess I was using us as a use case, but then there's also people who have premium WordPress plugins who maybe don't want people to just grab the source of the latest version of the premium plugin they've put a demo for.

Adam

Yeah, so plenty of premium plugins I've seen charge for API access. So that's one monetization use case. And then you would release the plugin inside WordPress Playground as a demo, but maybe that doesn't necessarily mean you would release API source code because that would still be on the back end. However, if your business model is charging for source code and you're embedding it in something, people can click a button and download it. Well, yeah, that could be a bit more of a problem. What you could do, however, is make the download feature difficult enough to access. So right now on playground.wordpress.net. There's an explicit button for that because I wanted to make it easy for people. However, in your demo, if you don't have that button, well, it would take quite a bit of effort and technical knowledge and maybe some hacking to do that. That would probably be a deterrent enough for most use cases.

Lee

It sounds like the three biggest use cases here really are for people to test work that they're working on within a team, for example, for plug in developers and theme developers who want to showcase what they have to be able to put that up online for people to test. And then finally, a great low to no code or no tech experience way to learn how to use WordPress without having any of the other issues like hosting, getting it set up, configuring WordPress, or even knowing what the php version is that you need to run is, what are all these error messages and calling up your host and all of that good stuff.

Adam

Precisely. And as for the no code tank end of it, there's this idea to integrate this with ChatGPT down the road.

Lee

The algorithm will love us now. We've just said ChatGPT, let's just say AI. I'll put that in the description and we'll be blowing up on YouTube now. Carry on, my friend.

Adam

Ai, AI, AI. But then you would have an environment where you have entire WordPress stack running, so you control back end and front end, and you have something that can write code for both of these parts, and then you can test it. And here's the cool thing. There was this hackathon in February where we built an entire coding environment for WordPress running in the browser, even on a mobile phone while you're offline. Then you combine all these things and you get zero set up development experience that's aided by AI, how cool is that?

Lee

I can't imagine doing it on my phone, especially if I was... Well, I could imagine doing it on my phone if I wasn't doing any code. But if I could tell ChatGPT to do it all for me, that would be even better. We actually use ChatGPT quite a lot just for code in itself because there's so many things that you tend to forget. And now with the cool thing now is ChatGPT 4, I think it's a recent change, you can actually put in URLs. I'll, for example, link to the WordPress codex of a specific page and then ask it to work up some examples based on the information on that page to see whether or not we can work out ways that we can use it. Yeah. So it's incredible. It's an incredible resource. And we were having this conversation just yesterday in the team, and some of the developers were saying, Well, will this replace us? I was saying, No, I believe this will just become an amazing tool for developers to help us be more productive, help us to perhaps work things out that would have taken us maybe two or three days to work out.

Lee

ChatGPT and other AI models can help us code more efficiently and also explain to us what the thinking process was. Equally, we have noticed that ChatGPT can be a terrible programmer. Makes some bad decisions, so you really have to be careful with what you're doing there.

Adam

You still have to know programming. It is really cool that it saves you so much time. Lately with WordPress playground specifically, I asked it to, Hey, here's a code example of before and after. Write me a pull request description. And it did. It was pretty good description.

Lee

I like that. Actually, on that You mentioned, I'm pretty sure you mentioned poll request. How can the playground make it easier to test that poll request, etc?

Adam

Every poll request, for example, let's talk about Gutenberg. Every poll request in Gutenberg goes through CI that runs all the unit tests. So in order to run them, it has to build Gutenberg as a plugin. So the output of that is a zip bundle. It's the same zip file you would put in a plugin directory. So playground out, you can set it up to download that and install it as a newer plugin. And then you have pull request previewer. I actually built one for Gutenberg repo specifically, and it can be integrated with pretty much any Repo that has a plugin or a theme and the CI pipeline to build it.

Lee

That's fantastic. Folks, if you want to find out more, there are a whole load of links in the show notes that Adam has provided us, including that link to the translation demonstration that you mentioned earlier, Adam. So if you're listening on the podcast, I would now recommend that you look at the show notes because Adam is going to share his screen and going to give us a demonstration. So that will be on the YouTube channel. Let's do that bit, mate.

Adam

All right. So playground.wordpress.net is this address where WordPress Playground lives. And when you go there, you see a WordPress website, and it's running entirely in your web browser. There is no php server behind that. So I can go and create a new post here, and I can publish it. And it's all in here on my browser. I can go and change the WordPress version to say 6.1. This one has the same theme, so we don't see any difference in a face value. But I'll go back to 6.0, boom, there's the other theme. I can change the PHP version. Maybe I'm concerned, what are my plugging runs on 8.2? Well, let's eat. Let's go there and find out. Maybe I want to edit this page and then maybe I want to save my progress. Actually, I'm going to create a new one. Let's create a post. Just call it test, test. I'll publish it. There it is. Then I can just go ahead and save it. Boom, there's a zip file with my entire site in it. Some other cool things you can do with that, we won't be able to access them via user interface here, but there are some other cool demos.

Adam

So for example, here on developer.wordpress.org/playground, there is this demo where you can actually pick any theme you want from this selection and choose a couple of plugins. I'm going to click Start and now it installs the themes, plug ins, and boom, here's my website. And if I go to WP Admin, there's the Gutenberg plugin installed over there. So technically, what it does, and here we are getting into the non UI way of customizing WordPress playground is... Oh, I didn't want that. There's an iframe over here pointing to playground.wordpress.net/remote. And it has some query parameters over here, as you can see, there's php 1.0 and WP equals 6.2. Actually, I meant this one. So it also mentions plug in equal Gutenberg and plug in equal classic editor and theme equal raft, which means that's exactly what playground is going to install. In fact, if I take these query parameters and I copy them over to this original tab where we started, it will do the exact same thing.

Lee

Brilliant. Yeah.

Adam

Now notice how the little browser UI we had here is now gone. That's because of this mode equal seamless thing. So that's useful also.

Lee

That's really helpful.

Adam

There's a bunch of other things you can set up. However, query parameter API is limited. As of a couple of days ago, there's this new API called Blueprint, which allows you to set up WordPress playground using a JSON file. In this JSON file, you can decide which versions of software do you want to use, but also that you want to log in or create a directory, write some files, even set site options. Pretty much anything you can do with WordPress, you should be able to do it this way. And if there's no convenient helper or step, you can just run any HP code or run any HTTP request. Some other cool uses of this WordPress playground and the Web assemblyPHP are for teaching. Here's a blog post I wrote a while ago that teaches you the new tag processor API in WordPress 6.2. The way it does it is that there are code examples all over the place that I can run. And this is the cool part, I can modify them. Nice. Maybe if I say hello here and click run again, it runs. And this is not some trick or a gimmick, or there's no server behind this that powers it.

Adam

No, it all runs in your browser. So this is actual php snippet running the actual tech processor library from actual WordPress, giving you the output here. And if you want to do something more fancy, it can even support libraries. In here, there's a comparison against Dom document, which is not a standard php class. You need to have an extension. And you can also use php extensions in WordPress playground, which is really cool. Another cool use case of WordPress playground is showcasing the existing plugins and even exposing them for people to use right then and there. This example is called Glot Press Playground and it was built by Alex Kirk. If you wanted to translate WordPress, it used to be a case that you had to install WordPress, install translations plugin, maybe install a plugin that you want to translate if you wanted to do that. Maybe you had to download some translation files that already exist. That's a big ask. You cannot tell everyone, Well, you'll be able to start translating in 10 minutes. Maybe you have to say, Well, it will take you hours and hours of work, and maybe you won't even succeed.

Adam

But with this thing, well, you can just open a link and there it is all set up for you. I can just translate something here and this is already translated but I'm going to say t's not a word but I'll do it anyway. You can just translate it, it's here and then I can export it. I think there's an export button here. Then once I do it, I'll be able to go to the actual translate. Wordpress. Org interface and put that translation in there and propose it for inclusion in the translation directory.

Lee

As simple as that. Yeah. Perfect. I was actually going to ask, how do you download that once you've edited all that? But you went straight for it. Export button, you've got your profile, and then submit.

Adam

Yeah. And I even messed something up. Alex showed me how to click something right in the interface where the string exists in context. Then it shows up here. Once it's here, you have a button that unfortunately I'm not able to demo right now that says just submit to translate wordpress. Org. Then you don't even need to export and re upload it.

Lee

Sorry, mate, that is a nerd or a geek's paradise. Incredible tool for web agencies. I did tell you actually, just before we started recording this, that I hadn't actually heard of WordPress Playground. I sent it round to my team and everybody went mental with excitement. And they're all right now, as you and I are recording this, they are all actually playing with it. And I can see them messaging each other saying, OMG, look at this. I've just tested, etc. So I can't wait to show them this recording as well. I can't believe I'd never heard of it. I've obviously been living under a rock. So if you folks like me had never heard of this, please let us know in the show notes, or if you're on YouTube, please let us know in the comments as well. Adam, how can people learn more about the Playground?

Adam

Sure. So the single official resource you can go to is developer.wordpress.org/playground. And all these links will be in the description below. There's also a recent post I published on web.dev/wordpress-playground, where a recent take on what you can do with WordPress playground, how the internal work, and what the future may look like, are described. I also published an interactive introduction to WordPress Playground API on my blog where you can go over some code snippets, click run, and see the magic happen. Finally, there's WordPress Playground GitHub Repository and official documentation, which I highly encourage you to visit. Take a look. Share any ideas at all you may have in issues and discussions. I would love to get in touch with as many of you as possible. These interactions inform the future of our WordPress playground is what I'm saying. The translations playground I just demoed, that was only possible because Alex actually reached out and we added some cool new APIs to Playground that made it all possible. This is very live project and it benefits from every interested contributor.

Lee

Out there. That's amazing. Well, on that, then how can people connect with you? And then we shall say goodbye.

Adam

Absolutely. Playground Repository is a really good way of doing that because I'm paying attention to that all the time, issues and discussions over there for sure. I'm also on Twitter @adamzielin and feel free to reach out to me on my personal email address, which is adam@adaziel.Com. Also, there's a meta playground Slack on WordPress.Org Slack. Should I say there's a meta playground Slack channel on WordPress.Org Slack. Yeah. And if you like this and you find this exciting and you know anyone else who might also get excited about it, please share this and help me reach as many people as possible. This is a super cool new thing that was never possible before. You can run entire WordPress in your browser, and I would just really love to spread the news to as many people as possible about this.

Lee

Well, I love how excited you are about it. It's very infectious. You sent me a lot of information before we recorded this, and I too got extremely excited. Folks, if you are excited, please go and have a play with the playground. Share it with your team, share it with your friends. I think this is game changing and can absolutely speed up our overall productivity as a community. I think this is absolutely incredible, so be sure to check it out. This is going to be a show notes full of links, so head on over to Trailblazer FM, come to the show notes and you'll see all of those resources in there. And we'll also try and fit as much as we can into the YouTube description as well, although that's slightly more limited. So thanks, folks. Thank you so much for listening. And if you're on YouTube, thank you so much for watching. Cheerio.

Adam

Thank you for having me. Cheers.