 All right, good afternoon everyone, it's 3.30, this is our last portion of the day of the stress. I want to remind everyone that if you go to the after party tonight, be sure to bring your badge. And if you want to train, bring your government ID. All right, so our next talk is about deciding what the FBI would do to mark your reign. Mark is an interdisciplinary designer dedicated to making the web more accessible and human-friendly by facilitating the transfer of information to the sign. Mark works in automatic contributing to the open source project WordPress. The WordPress WordPress API is often perceived by designers as something developers talk about checkups filled with lines of code. This talk aims to help designers familiarize themselves with the API and grow our computational design skills with its help. We'll cover what an API is, what it's used for, and how we can communicate with it. Please tell me what can they mark your reign presenting designing the API. Thank you. All right, so just to be clear, this is designing with the API, not designing the API. I'm not a designer, not a API designer. So as mentioned, I do work in automatic as a product designer, and I do enjoy giving back to the community and having fun with WordPress. In fact, I'd like to, my goal with this talk is hopefully to encourage you to think of WordPress differently than maybe you normally do, and be more innovative with it to help the future progress with WordPress. So on my off hours, I do enjoy history, so I'm going to talk a little bit about history before we get into things. This particular suggestion is on www.worthpress.org forward slash ideas where people can offer up ideas that they'd like to see done with WordPress. This member, Motik, says, you know what, let's make WordPress a CMS. And right below Andy Kaye here says, you know what, it's blogging. Let's find something for CMS, because if you want that. Now, this conversation happened 11 years ago, back in 2007. This is not new. This is history. But you might all be familiar with that debate that went back and forth with is WordPress a CMS, is it not a CMS? And it's interesting because a CMS, a content management system is software that helps you perform CRUD operations that create, read, update, delete content, right? And if we understand that there is content on your website, then where does that content live? It lives in the database. So essentially, the content on your website is data. And this is a neat way to look at it. You know, we're familiar with content is king, but if we look at your content as data, then it's neat to think that there could be ways that we can access that data. And do some interesting things with it. And that's hopefully what I'm going to get to you today. But again with history, WordPress was forked from the evolution cafe block back in 2003. We're familiar with this. It catered primarily to bloggers. All right, it was a blogging software. In 2005, we introduced something called Pages into core. You couldn't create a page before this easily. So Pages was introduced into core, and now you can have an about-me page. So WordPress gained in popularity, started taking more market share, it became a CMS. People were using it to create more than just blogs, they were creating websites. Then in 2016, the API was merged into core. And this allowed people to create more than just websites. Native apps were being created, built on top of WordPress, which is a really cool future, right? These are things that people can create and build on top of WordPress. So if we look at this progression, we think of Moore's law. I mean, what's the logical conclusion to this, right? By 2019, you know, I mean that's not quite the case. But WordPress, as we know, what percentage of all websites right now are built on WordPress? 30% I believe is the number I know. 30% of all websites are on WordPress right now. That is crazy. It's crazy. What can we do with that? So technological singularity occurs in WordPress and AI, and we're excited. I've never held my hands quite like this in response to something on my screen, but I believe people do. And when WordPress becomes an AI, I will surely do this. I will respond accordingly. So WordPress Skynet? So WordPress, what are you building with WordPress? And in fact, what are you building on WordPress is kind of the point I want to ask you. Think about what you're doing with it. What other ways can you innovate with it? What are some interests that you have that maybe WordPress can help support those ideals? Oftentimes, when we think of WordPress, this is what we think of. You can install WordPress, you have the themes and plugins, and you're going to create something like this. This is the common paradigm, right? In fact, it's automatic on our sign-up steps. These are the four above hints that we kind of put you in. What were you creating? What sort of site did you want to create? We know of WordPress under the hood, right? It looks something like this, a SQL, PHP, HTML, CSS. As of late, we're getting a lot more Java script involved in there. This produces a lot of what we see out there. But we know that WordPress can now look like this. And with this is great possibility. So ultimately, WordPress becomes anything we want it to become. I can now use whatever front-end software I want to use to create whatever product I want to create. And that's all thanks to the REST API. A lot of this work that's been done has allowed WordPress to become something greater than what it was initially planned to be. So an API application programming interface really enables software systems to communicate with this defined set of rules. This is important for us as designers, as developers, as people who use WordPress and bloggers, anybody who wants to communicate or facilitate that transfer of information, this is another way we can really do it. This is how we can facilitate this transfer of information between software systems. So because I'm a designer, when I think of WordPress, the API, I didn't know anything about it. And it looks a lot like this to me. So for those of you who don't know, this is a grammatically correct sentence. Buffalo, buffalo, buffalo, buffalo, buffalo, buffalo, buffalo, buffalo, buffalo, buffalo, buffalo. And that's really what I saw when I looked at the API. But if we swap out the verb with its synonym, we add a few commas, things start looking a little easier to read. Maybe we stack it differently, add in some words, and then we can understand what's being said here in this grammatically correct sentence. Buffalo bison, that other buffalo bison fully also believe in buffalo bison. And this just resonated with me when I looked at the WordPress app. Basically, this is what we were reading. But it was a way for us to understand what we were reading, which I hope to help us get there a little bit. And you kind of get the picture. That's what the sentence is about. So, I mean, it's really buffalo, buffalo, buffalo, buffalo, buffalo, buffalo, buffalo, buffalo, buffalo. I couldn't be decided, this is a J-Song file. Can you leave that up long enough when you copy down? Yeah, so let's take a look at this. With the simple zoom, I like a few things. We can kind of see that, you know, this is, there's an ID, there's a type, post. Okay, so we get an idea that we're looking at, post. There's an author ID. There's all sorts of nuggets of, like, interesting things in this when we start investigating for it. That's what I had to do. I kind of had to come and understand this a little better. Luckily, browsers have plugins that help format J-Song files and more so. And you can get something like this. It's really easy to read. And if you saw, Chris's talk earlier, you saw some of this and this talk as well. It's helpful to get an idea. This is content. This is the content on your website. Right here, it looks a lot like data. And this is the kind of stuff that we now are capable of grabbing and doing some stuff with. So, just to clarify on a little, go on to the technical side of it, if you'll bear with me. The API consists of two main things, really. Two huge things, right? Endpoints and routes. We could see the great documentation on .org, but essentially an endpoint is a function available through that API. So it's whatever you want to happen when that route is called, right? A route, and you have to register a route and it gives you the URI of where you go to get that function, return that to the result. So here you can kind of see an example. It's just returning a string here and then the route, when you go to this route here, it'll perform that function and return it right here. So, fairly simple. This is all it's really doing. This is what it looks like on .org. .org is a multi-site, but on the high level, this is the API there. And so, world domination, right? This is cool stuff. I want to be a part of this. How am I going to help with software and do really cool things throughout this whole thing? How we end with this. So different ways to design the API. I want to talk about some things that I've done, give examples, some things that other people have done, some of which you might have seen in the clock previous. But I find this fascinating because I can do some fun things that I like, like data visuals or something, some sort of app that creates that really pulls content from these sites. And one such example was at the AIGA Design Week. I talked about computational design. And I did an example. I went to their website, which happened to be a WordPress website through the pool. It was the latest update, so they had the API already rinsed in. And I was able to grab the API. And just on code in here, I was able to create a HTML5 of the storage search. And what I did is I went to their mission statement. And I read their mission statement. And they talked about design, diversity, and community. And so I live on stage. I said, okay, let's test your mission statement against your posts. Are you writing about the things that you say you care about? And so I typed in the word design, looping through their posts here. And basically, each circle here is one of their posts. And the number and size of the circle is how many times that word was used within that post. So when I typed in design, they were writing a lot about design. And it kind of confirmed to them they were sweating it at the time. But it confirmed to them that they are doing their writing about what they say they care about. And it was kind of a neat thing. You could go to this code pen and fork it, throw in someone else's website, and investigate what other people are writing about compared to their mission statements or their desires. And to do that, I was using P5JS, which is the JavaScript library for digital data. And this is pretty much how simple it was. I'm creating a variable and I'm really just going to their API. So the post section of it, pulling out 10 posts. And then I'm looping through that essentially, which the other photos. But I'm looping through that and pulling out that. Another example here I gave at WordCamp Europe. I asked a question to the audience. I said, what is the most important part of the website? I posted this question on a website and I opened up comments so that anybody can leave a comment without any approval and everything would just show up, right? So the audience went to this post. They all entered in there in the comments section what their one word answer would be. And I refreshed the page and when we wrote this was kind of what showed up, some visual data. Visual data about if the word was used, was commented more than once. It was a bigger circle. It changes colors as the circles got larger. And I mean, this was fantastic. That's like someone up here was obviously like to that person I'm just up here saying beard, beard, beard. And again, I'm looping through and you can see rather than going to the posts, I'm going to the comments of a specific post. So I'm able to pull just those comments. If any of you are familiar with theming, Foxhound is a theme developed by Billy Yuan, designed by Miller Choice. It's a React single page theme that is built on the API. It was a really cool experiment that they were doing. This is a React Native app that I built. It took me about a day to do this. To figure out kind of React Native, I wanted to explore that more and I wanted to do something with the rest API. What I had to do here was a little more technical though. I wanted to loop through media. All these photos with these quotes are just images in the media library. But what I wanted to do is I wanted to return a random media based on every click of the button there. And so there was a lot more involved I had to create then, actually, and to write a function because to grab just the ID of the media library. But it was a fun project because rather than looping through posts or looping through comments, let's do the media. And it basically looks something like this. You know, I'm grabbing the API here with the URL on top of the media and then I wrote a plugin that allowed me to grab that extended API and allowed me to get these. And that kind of looks something like this. So the plugin is right here. And just getting, ultimately, getting these IDs and then returning them with this route. Registration. Yeah.