 Well, thank you everyone for coming into this nice hot room and sitting down Taking a break with us. I know it's been a great day. You guys have been doing a lot. Hopefully contributing a lot today and Getting involved with WordPress as a community. That's awesome Today we wanted to talk to you so I'm mark and this is Kate right over here John should be making his way down. Hopefully when he gets a chance for those of you Who are waiting to see him? But we wanted to talk about visual data using the WordPress API a bit I'm a designer at automatic and so I'm not a developer they most API stuff really kind kind of goes over my head, but But I find it fascinating nonetheless It's it's going to open up a lot of doors with a lot of new ways that we can use WordPress so That being said if Yeah, so Rather than visual data using red. What are you building with WordPress is kind of the question. I wanted to propose to you Oftentimes We think of WordPress as There we go So WordPress a lot of times looks like this right this is recognizable to us We have WordPress we had a theme and we've got some plug-ins and we create one of these things right an online store a blog a Website or portfolio We're familiar with this. This is what it's always kind of been about and what it's grown to become but And we know WordPress is kind of built on this stack We're familiar with as well my sequel PHP HTML CSS and and we've even got some JavaScript in there Which is really cool, right? But what if it looked more like this like what if What if WordPress Was something that you just did all this stuff with right? like it was this foundation by which you built some really cool stuff and I really think the API opened that up for all of us with 4.7 right the API was introduced now we have Where we at 28% of the web will you guys know yeah on WordPress? I mean these these sites all the ones that are upgraded to 4.7 We can connect with for the most part right we can pull a lot of that public data We can learn about things and share that data with each other with communities other communities So rather maybe than what are you building with WordPress What are you building on WordPress would be the better question? How are you using this we? We're getting to an era right where devices are so versatile the internet of things People are on the go How are we using word WordPress to engage those lives everywhere that people are moving? Making it a part of their life helping to get the job that they need done done right? How are we using WordPress to do those things? One one way I just kind of wanted to share with all of you if you have cell phones or laptops try going to this URL right now Open them up It's got a question there for you What is the most important part of a website in one or two words? Leave a comment, okay? I told you I'm not a developer. I'm a designer So oauth is over my head and if anybody wants to explain that to me in detail so that I would understand I'd love it, but I couldn't quite get past it for this So what I did is I opened up comments on this blog post and that allows anybody like you to leave a comment And then I can pull this data through the API So I'm sorry. I'm like walking in the way of everybody, but yeah Just WPUX testing Dot-com forward slash WCEU. Okay, leave a comment one word one or two word answer What is the most important part of a website? You guys feel comfortable. I see still see some typing away And in English if possible. Oh is connection. Oh, we're in the best room for that. Aren't we like the basement, right? Yeah, boy, I didn't plan that too well Yeah John come on up come on up Yeah, so I is it is it happening has anybody been able to post anything because if no one has then we're This demo is gonna go So What I could do. Let's see if I could get Yeah, so oh boy as it comes through yeah, yeah, so you know what if it's not happening for people We're gonna miss some visual data, so But I can talk about it Let me know if it goes through for anyone raise your hand give me a shout out all right two people We've got two comments in there three four five. Yes, it's happening That means less people or you could go shut off your cell phones and let the others jump on So let's see So if I refresh this page, we should start seeing something some data showing And let's see how this works and of course that's gonna take a second So what I'm doing though as a designer not a developer so those of you who are developers don't laugh too loudly at my code but I'm using the API and WordPress and something called processing Does anybody heard processing? All right one two three four about four people processing is a is an open-source language for visual graphics and I'm actually it's built on Java. I'm actually using the JavaScript version of it called p5 JS if anybody's heard that and So whoa there we go. Okay. All right. Let's clap like that's in the basement right in the basement We got some data going okay, so these are comments from you all and We got them showing up. I'm just pulling basically the comments from this post ID Using API. I'm Organizing some global variables I'm pre-loading the the JSON file And then this is where processing kind of happens They've got a function called setup where you kind of set up your canvas and that's what I'm displaying this stuff on and Then they have this function called draw which renders everything on the canvas and the function draw will will loop and Repeat itself, but I called a No loop function up here. So our method so that it doesn't and we could just look at the data, but but what I'm doing is I'm taking these comments and looping through them. I'm grabbing what the words are how many people might have commented the same thing we don't have that happening yet and Displaying them randomly on the screen here. So we have visibility Theme more speed content communication UX security speed speed So that oh secured UX security speed, I believe and then speed and more speed It'd be great if I looped through the array right and look for the common words. Yes And you couldn't post it. Okay. Well, there's a problem with my setup probably Using comments open like that from the same IP Oh There you go, okay, that's a good that's yeah, that's yeah catching new spammers, right you spam just kidding just kidding Yeah, yeah and so so what I what I was hoping for is a few comments that might have been the same and That made it through The graph for the bubbles would change color and size based on based on that So it's just displaying some visual data. It's real basic in a very rudimentary form Just to show like there there really is an ease of use with the API to do something super simple and I think that's important to understand for all of us because as I mentioned before like we could do some really cool things with this We could build stuff that people haven't really thought of yet, right? Like let's not get stuck in the mind frame of blog website Commerce and portfolio. Let's expand that. What else can we build on WordPress? That's gonna attract a lot of people. We're implementing a lot of JavaScript and stuff. Let's Let's do something and that's why it like Kate is invited here to also speak to you about some of this which Which she'll go into more detail But my answer was user need I didn't enter it in of course, but that would be my answer to the So as I mentioned the rest API, there's great documentation on this Ryan McHugh's and Catam here as well. They're working on Getting the word out about the API and sharing it making it Understandable for everybody giving examples P5.js is the other software. I was using So Yeah, that's kind of me. That's what I did. I like to do this stuff. I like to elaborate more into it I'd love to answer any questions at the end but I'd like to introduce Kate who's a lead of the mobile team at automatic and she's gonna go into about The mobile application using the APIs and how that all works as I mentioned being mobile with this right using word press How are you doing? Yeah We're better now you're here Yeah So, you know when I was going to mark about this You know one of the ways that mobile fits into it is that for mobile? I need to be louder You want me to move this mic? Is this better? Oh Okay, so I need to project Okay, so so So when Mark and I were talking about this and how these things fit together One of the things that came up is that with the mobile apps We've always built on wordpress, right? And so every wordpress.org site was in some way a back-end, right that the mobile app would talk to and communicate with and You know, it's always super fun to debug something that is working on somebody else's machine, right? And so this is why we're really excited for the rest API, especially v2 where we're really hopeful there'll be authentication Because it has the potential for us to really improve our mobile experience if we can drop XML RPC So what press as an art an open source project you still can't hear me. I Okay, I'm just gonna calm and stand in the middle. Ah the cameras. Okay. I'm not gonna do that. I Really don't like to be videoed Now's a great time to mention that So what press as can you hear me now? Okay, so great Thank you So wordpress as an open source project has been this thing that people extended in all these like fascinating and exciting ways, right? But we don't build the app like that like the app is really a client of every wordpress site and it is most it is open source And it is DPL and people could fork it and make their own incredible thing Mostly we haven't seen people do that And you know when we look at like really great open source projects on mobile mainly what we see are Components and like pieces of apps they get used in multiple different applications And we've been doing some work in general on our architecture lately And a big part of that is moving things out into components so that we can share them with the community and hope that They'll find the components kind of more exciting to build on than they did like an entire application So I think you know one of the challenges with the wordpress mobile experience is that we've really been trying to serve the 80% You know kind of this vanilla use case of people who just want to post blog posts or have like a relatively straightforward site. Well and We want to give them a great experience, but we do do our best to serve everybody else But if you wanted to build something more niche you'd probably create something really different, right? Which is where the components could be really really helpful to other people So earlier this year we shipped a complete rewrite of our network stack on Android, which is called fluxi And what it does is it abstracts the networking layer complexity? And so the app talks to calm it talks to jetpack sites. It talks to org sites And now all of that is abstracted into one place which we call fluxi And so it's easy for anyone to build on any different kind of wordpress site without worrying too much what that site is And there's also a demo project, which is called instaflux So is I'm told it's an Instagram clone, but it doesn't have filters So can it really be an Instagram clone if there are no filters? And so hopefully this is a much simpler project that people could take and build on and do some experiments So another component with super super excited about is called Aztec So Aztec is our all native text editor So our current solution was a hybrid one and there was some performance problems there was some kind of irritating and intractable bugs and You know Aztec is bought as much closer to the metal. So it's all native. It's faster. It's more performant It has accessibility improvements And you know again, it's like it's an HTML text editor and it's just like a component now So other people could also use that in their applications if they wanted to Provided they were willing to adhere to the GPL So if you want to try it's in the beta, but it'll be opt-in to the production apps very soon So one of the things that Mark and I tried was we had this kind of cool So there's also processing for Android processing is not just in Java It's also in JavaScript and it's on Android So we thought this was super exciting and we decided to combine it with fluxi to kind of see what we could create there And we learned some things that I'm going to share with you So the setup is a little bit challenging Because fluxi expects a level of complexity in the app that you know Processing is trying to hide from people so processing tries to make it easy to make a very straightforward one-screen app and You know when you're using something like fluxi Your expectation is that you have this need for like a pretty complex networking stack Right, so it expects you to have a lot more of your app there than you really do with a processing app We generally discovered that it was overkill for just reading and visualizing data like you do not need you do not need it for that But we kind of started to think about some really interesting ideas for like maybe you could run a generated photo blog Where you know processing would take images that you'd take and do interesting things with them and then post it straight to your blog and I kind of like Love the level of indirection there because processing was created as a tool for artists to make it easier for them to learn to code Or easier to create digital things and You know when I think about like processing and Android and fluxi I think also about Lady Gaga Does anybody else love a Lady Gaga? Matt, I know you love Lady Gaga So Lady Gaga has this concept that like life is art, right? And so I'm kind of like well is there any way better way to kind of for regular people who aren't Lady Count Gaga to create art than on their most personal device and to kind of introduce some randomness and some Digital creativity with processing and then just share it on any word press blog that they want John I'm sleeping But I'm not okay. So who was there in the design contribution day section? Thank you for coming I just want to note that This is my second award camp and I noticed how there's a lot of designers who want to get involved With this kind of work, but don't know that this world exists quite frankly Because they live in designer world and In designer world you can't get jobs anymore if you just do design Like oh my gosh, I really wish I could do this coding thing, but I don't know where to go So if you think long term the opportunity I imagine for word camp is it'll be There'll be hundreds more designers showing up at these spaces I don't think it's unlikely because of the opportunity that exists in a place like this where Coding and culture are combined I like how our lanyard says Code is poetry. You know as Matt has been forwarding for a long time I've been doing this for a long time too Talking about code as a kind of a humanistic type of thing to do and I wanted to bring up something super old. Can I use your computer? Is this what's driving this? Yeah, I want to show you something from the 90s because it's always good to go backwards in time Because that's how we understand things. I want to show you Back in the 90s. I was trying to teach designers how to code and People didn't like me then Nothing like me anymore right now, but they're very angry people back then Let's see design my numbers Vimeo see look for there. Okay. Here we go. So this is something This is something I made a long time ago that I'm glad there are things like this but I wanted to show people the power of Computation because who who remembered when you could type in programs in basic basic? older people Good you see there was an era where you'd buy the computer and you turn it on and it did nothing at all It just was so we worthless and it had no software, right? So you had to write software on it because it would just blink at you and that was a beautiful time Because everybody had to program to know how to use the computer But because it was right there in your face You had to learn programming and you couldn't make a complex program it was limited and so people from that era were Advantage because they had this simple experience to write code, but by the 90s it became very hard to code manuals that were 32 pages long were becoming 200 pages long We're becoming five books of 200 pages long and then it became virtual so you couldn't tell how many pages there were Right, and so I saw in the 90s. It was impossible for somebody who doesn't know all this culture of Coding to break through so I proposed this system called designed by numbers and a very simple Architecture on the one hand you have a display area like there was in the 80s And then you had a programming area, you know a very simple program and then you could just run So this was the basic idea. You'd have a little canvas an area to write your code To sort of play the thing and stop it. Okay, it's very simple, right? And also I constrained the system very tightly because I at the time was a Little bit too who's Swiss here, and it was Swiss people here Okay, like that. So I was a very Swiss oriented designer, which means I wanted to control everything So I controlled everything so you could only draw in a hundred by a hundred pixel box You can only draw in black and white because all the gray values were zero to one hundred Why because nobody understands why? 255 is an important number So zero to one hundred zero to one hundred. It was beautiful. I think it was my masterpiece It was so constrained and in that little bit of square area I wanted people to type in commands because at the time everybody was using Photoshop and I wanted to tell people that you could write code like this again So this is a long time ago. So it's hard to imagine what this was like, but type in code and I had very simple commands Let me show you in one minute and the 30 seconds What I wanted to show so you can enter a program, you know with a comment You can set the paper color to zero You can set it to paper to 100. It's black You can set paper 50, which is gray Paper 20 makes it lighter. So this is kind of like getting you kind of in touch with the the paper command This is the first command paper paper zero pen 100 And then you draw a line I want to say that people didn't understand that the pen command doesn't do anything It just makes you hold on to the pen But you can't draw only when you enter numbers, can you draw then I would show how if you set a variable You could have a remote control to a line. So by changing B I can move the line up and down and I can move it up and down with just one edit. So teaching people how to use variables and then I place it into a Block and I put it into a block and adding a repeat. I wanted to show people that it's so easy to draw 20 lines It's so easy to draw a hundred lines because the average designer couldn't draw that fast so and also by just adding a little bit of paper in between a repeat it became an animation and Then animation with simple mathematics could be changed was just a little bit of twist and so the intent of this work at the time was to show people how Simple a program could be but how complex the output outcome could be and this was in the 90s And the 90s people said oh Designers will never have to program Ever you know go back home, you know go back to the cave you came from that was the mentality but what happened was I I had in 2001 Actually in 1998 I had these two people working on my research team as graduate students one Person was named Ben Fry and the other was Casey Reese and Ben Fry and Casey Reese Really liked my system designed by numbers, but thought it was a bit constraining You know John people want to drop things bigger than a hundred pixels You know John people want to make things in color, and I said no no no no no 100 pixels 100 great caca great. That's all we get to do here So what did they do? They did the best thing possible. They didn't listen to me and They went off and made a better version of it called Processing and processing is a graphic system that manages 2d and 3d coordinates very lovingly with tons of libraries Built as a community starting in 2001 It's international community of people who love to write things that graphically process things either for television commercials or For art installations and it and as mark was pointing out it's gone to To JavaScript. It's gone to Android as well. So pretty interesting ecosystem but it also exists over here and So what I like is what is happening is that the two worlds are coming together Right now with the work that Mark and Kate and her team are trying to weave together Why is it important? It's important because I believe in diversity and inclusion We bring two things together that are different and push them together. What happens something new happens I know in Europe you have different chocolates here because you have Cadbury and we have like Nestle's or whatever But do you know what the peanut butter cup is? It's peanut butter and it's chocolate together. Mmm. So good delicious You put the two together it becomes more delicious So I'm hoping that processing and word pressed together can be that proverbial deliciousness Why is this important? It's important because of this thing that I noticed When I was in the venture capital world, I was I was looking at money, you know money It's money. Everyone's money. It's a very powerful thing and I was looking at different startups and Who was acquiring them? specifically startups that were founded or co-founded by designers and I saw a pattern where acquisitions look kind of like this but in 2009 it went like this It just kind of likes it was that proverbial up and to the right All these designer co-founded companies were being acquired and it's happened all of a sudden and the reason why it happened I linked to a very simple fact. The fact is that this is when Mobile computing took off And when mobile computing took off what happened is you had smaller screen real estate you had higher user experience expectations and Many large companies like Google did not have that competency inside their company So they acquired a lot of these designer led startups, which were unusually good at creating experience For mobile, right? It's kind of obvious sort of in hindsight Now why is it important? It's important because all of you have this thing called a smartphone, right? You have a smartphone. Well, maybe some of you are Iconoclastic, so you may have a Motorola Star-Tac. I know I know some of us ride, you know We're trying to be like kind of glad I don't use a smartphone. I have a led display or whatever But some of you those of you who have a smartphone You probably have this thing. Have you heard of this thing called Facebook? Have you heard of it? Have you heard of this thing called Facebook? This is very popular now, you know But I mean I heard of this thing called Google Yeah, you heard of that interesting you know and there's a few others but What's interesting is that of the top 10 mobile apps used on smartphones globally Are the top 10 eight of them are owned by Google or Facebook? Which is kind of amazing, isn't it? and then if you imagine how many how many Millions if not billions, but how many millions of dollars are spent by Google and Facebook To be on your home screen To be in your smartphone That's a lot of people It's a lot of innovation It's a lot of resources so meanwhile a Upstairs in our contribution day section, you know, you'll hear often times Mobile mobile consumption patterns have changed everything. How are we doing there and the fact is that as you can see By this graph companies that began here before 2008 2009 are all disadvantaged Platforms designed before this era are all disadvantaged because They had a legacy of desktop computing as the core Whereas all platforms that started afterwards Have less of a legacy problem because bless you because they began with different stacks They began with mobile as a simple factor So when you ask yourself Why is it that at WordPress the ecosystem? It's hard to catch up to anyone who's over here. Number one This is lots and lots of euro lots and lots of money Over here. This is like a massive amount of money number one and number two the timing was off So if word pray if Matt Mollinow egg like we're cloned himself It was like that's that's kind of that's that's not correct if Matt were to sort of arrive again over here It would be a different system, right? But it's not that's a fact. We can't go we can't change time travel, etc So we have two facts working against us But that's okay Because what I believe is that we have people who are still the believers who think they can somehow Beat this system number one and number two though. We need a way to innovate to find solutions faster That's why what is so neat about bringing the processing people Who really I do believe wish they had more things to do Watch out. Don't don't tell them I said that but but they're all out there and they don't know about us and They have amazing they have they have all the VR AR stuff figured out They have all the data visual system figured out and if they dock into our system. I find that kind of exciting Because it means it'll be we'll be able to start to see different Innovations on the mobile platform with this thing is this am I connecting with you? It's kind of hard to because I'm not sure if I'm saying things right because I'm not supposed to be asleep right now Is that working is that that so so big takeaway? This is a this is a this is a problem or said differently. It's an opportunity and Then said differently this thing that happened Processing for Android talking to fluxi Connecting is a landmark achievement This has happened in the last two days It's kind of like trying to connect two parts of railroads together No one knows it now except all of you here in this room Don't keep it a secret Tell people so I like to first send energy and love towards Kate and Mark right now. Do you feel the love? Again, it's still in the dirt. It's still its seed. It hasn't popped out yet But I imagine that a year from now. We'll see processing experiments using mobile Talking to the WordPress ecosystem at scale. Wouldn't that be neat? I'm looking forward to that all of you are too good Okay Peanut butter and chocolate covered everything covered. Okay. Good. All right any questions? Yes, go ahead As we move to maybe a screen list thank you Yes Who is the oh who is the Yes, so glad you asked this question the people that know the best are people who cannot see I Mean this in all My sincerity because we just discovered that you can talk to something and get it to do something People who cannot see do that all the time So I believe that this group of people who we've largely ignored You know besides some accessibility things as you bring into the foreground are going to teach us new patterns So it hasn't happened yet, but it will happen if we are inclusive of those groups Yeah, I mean we all know about Alexa and how funny it is when you when you're around like so you can't say You know, so you know, it's not perfect yet Yeah questions Okay, everyone's afternoon. No coffee. All right