 All right Victor Ramirez is the John Smith Latino names. So if you Google me, it's all right Just like Victor Ramirez wordpress and I'll show up Cool. So this talk was this is the title that I used it was like the catchy headline But just I could tell by the room that I scared people away So it's I would show on a preface. It's not scary at all The talk if I could have put a subtext below it was like what I've learned in enterprise that can benefit everyone Right, so I'm gonna keep this simple, but if you are a developer you will gain some great insights from this So what do I mean when I say enterprise? So I am the lead software engineer at Dow Jones, and I'm currently on the Wall Street Journal editorial project And I didn't have a job there a year ago about a year ago They recruited me and they had said they came to me and said do you want a job? I said no Then they said well, what if we tell you about the job and the job is to unify Our wordpress systems not only starting with the Wall Street Journal, but across all our publications in Australia the UK South Africa Bangalore all over the world and have a unified wordpress system and set of tools So I was like, okay cool. I'll take that job and it pays. So yeah money's important, right? And so I'm also the founder at an abstract agency. That's my small little WordPress marketing shop. I still have it and that was you know when I worked at Dow Jones I said hey, I still want to be able to be involved in the community and give back the way I'm kind of doing this now And then I'm a mentor at Thinkful Cognition and All-Star code Which is I teach kids and adults to code in various ways. So this has kind of helped my job and helped me kind of Distill things for people to really get it and then finally I'm a co-organizer at WPM YC Meetup and WordCamp NYC this year. So yeah, so that's me and then besides going on my talk rocks I would love if you went on Twitter or Instagram So if you like something if you quote it if you whatever I would love if you tweeted at me It helps you let me know that people are liking what I'm saying and getting it if you don't get it You start to fall asleep. I will catch you and I will change course and try to make it more entertaining Cool, and then finally this is one of the things I have to say now This is 100% my personal and professional opinion nothing I say or present today has anything to do with newscorp or any of its subsidiaries and whatever a legal person would say I have to put that there. Just so you guys know, okay? Cool lawyers are happy. So this and everyone's this meme probably wouldn't funnier last year But and Game of Thrones it's ending boo. I hope to make it home tonight to see it But this was the kind of like the crux of the problem at the Wall Street Journal and for our new future CMS we are going to be using Gutenberg 100% and Gutenberg You know aside from being part of the new wordpress 5.0 and beyond it's modern JavaScript And if you're working in modern JavaScript who here by the way works in modern JavaScript like with node react I said I raise your hand kind of okay cool. I see some like half hands. All right perfect It's it can be complicated and if you're a PHP developer Trying to move your way into JavaScript and react The the the wider you go and the more applications you're working on it can get really complicated to maintain Because it's changing so quickly So what I'm going to cover I'm going to talk about how to think about standardization one of the solutions To solve as you go and you try to work in modern JavaScript development Is standardization and I would say there is some standardization in the WordPress space But there needs to be more standardization if you want to succeed with modern JavaScript development The other thing I'm going to cover is I'm going to share some examples of real problems. I've encountered working in enterprise JavaScript and WordPress and how I solve those and then finally I'm going to give some basic tools and recommendations That are that whether no matter if you're if you're not a developer or even someone who works with developers Or you are a developer you can use these to Standardize your processes and really succeed with Gutenberg So this is just a preface for non developers. Does everyone know what CICD is raise your hand high if you really understand CICD Okay, two three perfect. That's perfect Who when I say CICD who has no idea what I'm talking about raise your hand high and proud perfect, okay, cool So CICD is a buzzword but it also is a real word and it stands for continuous integration and deployment and What it actually means is imagine that you and everyone here I'm assuming has written a blog post or used WordPress before right? So imagine if you every time that someone wrote a blog post and they forgot a headline They forgot the SEO keyword. They forgot to spell check. They forgot to do any of those things when they went to click publish It was rejected and a notification came up and told them everything they forgot to do but it saved it as a draft That's what CICD is for code when a developer goes and submits their code a series of tests so this is like our little developer friend and he submits his code and You see the little X is it's boo He didn't pass it and then he did pass the test and then it moves to the next stage And it goes to the server and the benefit that is instead of you as the senior developer or the senior stakeholder or the dev ops team Instead of having to continuously and make sure people follow standards It's like a bot going and checking all these standards and it automates that deployment process So what that means is like it's less headaches for you and I'll as I get through standards This will make a lot of sense and I like to call it just for my stakeholders I try to break everything because I work with a lot of non technical stakeholders I'm across many different places many different cultures many different languages and I just call it automated QA on steroids And that's what CICD is right So I'm gonna go through some concepts first about how to think about standards And then it will make set and then hopefully it'll help you make sense of the next two sections So when you're building a WordPress website The one thing that I've really pushed is that when in my opinion when you build a WordPress website You want a fleet vehicle not a race car. So what do I mean by a fleet vehicle? The Toyota Camry if you go to New York City every single Uber I'd say like 90% of yellow cabs are a Toyota Camry And the Toyota Camry is one of the most stolen vehicles in the United States and there's a reason for that They're 20 to $40,000 which is a reasonable price, right? Toyota when they build the car they use the Kanban process They actually have a naturally Kanban was invented by Toyota So if you guys like Trello Jira any of those things people don't realize this this is literally Before the 70s people were just smashing rocks together and hoping things would be built then someone invented Kanban, right? One model per factory when they build a Toyota Camry they only build one thing they build I think they build a car here in Georgia I don't know but they build a Toyota they build a Sienna each factory builds one model of one car OEM standards only when they go in it if you go and like put some crazy You know a 30 inch muffler that makes your car sound like a bass drum going down the street You've voided your warranty and you don't get the hundred thousand mile Toyota warranty, right? And there's a warranty life expectancy So you know exactly this car when you buy a Toyota Camry It's gonna last you 10 to 15 years good for a hundred thousand miles and that's great And that's how a website should be right shouldn't our websites We can say like okay. This was built right even if my theme breaks I can swap out any theme because it was built the WordPress way and therefore like it's easy to maintain But that's not how people build websites. That's not how hot shot developers build websites Oh, and by the way limited specialization for staff through a rock. You're gonna get a Toyota drive a Toyota Mechanic right this is a hot Rods are built They're fifty thousand to two hundred fifty thousand dollars and you know people like to write big checks They're built to spec fully custom One or two vehicles per garage not productized so meaning like they're only building one or two vehicles Maybe a backup vehicle for when they go in race, right? There's no standards and there shouldn't be standards right if I'm trying to win a NASCAR race or win a formula one We have to like throw everything we can every idea throw some NOS in there I don't know pixie dust wherever else they use right and there's no warranty when you go and like blow a gasket or like You know flip your car or whatever you do you can't take it to the Toyota repair shop You have to call an extremely specialized pit crew and this is real math I went and checked out how much is a pit crew to maintain a pit crew is a half million to one million dollars a year Because they're union in some states and you can't just you can't just call him. Hey, man Do you want to be my pit crew? No, you need to maintain a specialized peak group of developers And that's where I get to most people including enterprise. They build their websites like hot rods And that's like I'm all for that if you're the if you have the budget, but when outside of Dow Jones when people come to me and they say my budget's only $10,000 over the next two years I put them on something like a framework like theme beans or Genesis because I say you don't have a developer You don't have a development team and therefore you don't want to have to call it pick crew to maintain it You want to be able to throw a rock in Brooklyn and find someone that knows how to use this thing, right? Second you can't just hire smart people Hiring smart people is not a way to solve a problem. And what do I mean by that? Google this if you want to be horrified Doctors don't wash their hands Notoriously It's a notorious problem in the United States health care system. It's a notorious problem in Western medicine in Eastern Europe What they are now doing in some hospitals is they make doctors do UV spray they get sprayed with UV paint They have to come off and wash their hands. Now. Why did doctors not wash their hands? Because they're people. No, they're people. They're just like us, right? They go on the golf course They hit like 18 holes. They're feeling hot. They're awesome. They got to get in there and do some brain surgery So instead of doing the the doubt the quick that they do a quick wash, right? And they think they're good because they're a doctor. They're smart they didn't touch anything when they came in but that leaves a contamination and People change people just forget things all the time right life changes career changes opportunity changes financial changes passion changes You have a doctor and or a developer who just you know, they just don't care anymore because you know They're moving to their next job, right? So that's why you need standards The other thing is people have different definitions of standards stakeholders. How do we benefit? Organizations can we maintain it? Developers do I understand it? Users does this meet my needs? Vendors, what is the scope they want to maintain that tight scope, right? And if you don't define these standards in the beginning all of these people are not going to be happy Finally the other concept that I try to push with standards is trust but verify So that just goes back to the thing of the hand washing like you even though doctors Look doctors are really smart people they go to school for eight ten years, but they won't wash your hands So when anyone says to me we hired really smart developers We don't need any of this I say doctors don't wash their hands. Did you hire a bunch of doctors? They're still not going to do what you told them to do because that's just how life is right So trust but verify and for further reading I really recommend these two books the emith by Michael Gerber and the art of the steel by Frank Abagnale Which is if anyone saw catch me if you can that's actually his business book that he wrote on how to Catch people stealing and people don't hit the crux of the book is people don't steal because people are bad People steal because of opportunity and people change. That's it So let me go through some real problems problem number one No definition of standards is one of the first things I run into and again outside of Dow Jones I work with other agencies in New York City I consult startups and I work with some accelerators and the number one thing I find is there's they never take the Time to define the standards and so just real quick math You know if you have Imagine that you're maintaining 10 organization websites, right? 10 CMSs and maybe you farm it out to five different vendors And you end up with 30 different developers over the course of a year. You have unlimited outcomes, right? And that's dangerous So one of the things we did was we went in internally you do internally define standards So for example and people always say well our developers going to define the standards well which developer, right? And and if you're not a developer and you need to define standards work with a developer to find the standards But don't just let them go carte blanche, right? And the same thing Toyota doesn't let the fact the parts that the part companies define the standards They define the standards the OEM standards and they say this is how our mufflers fit This is how this fit. This is how this fits, right? So the solution for us is An SME sorry subject matter experts which are myself and a couple other people on our team We're continually reviewing friction points caused by bad standards and adapt in sprints So we work in sprint cycles every two weeks. We're going back through all you know We kind of did what did we learn Charlie Brown and say hey, what do we do wrong? What was a problem it took like we had to have three hours of conversations just to understand how this API worked, right? And that's one of the things that drives me not sometimes people give us a plug-in and they'll say well Any developer can really figure that out and I go it took me three hours to figure that out yet I went to Google's and by the if you guys don't know Google has a machine learning Free open-source software called TensorFlow in about one hour I built a machine learning bot that picked movies for me without ever calling Google yet It took me three hours to understand how a simple Gutenberg block work from an agency. Do you see the do you see that the disconnect there? Next definitions have done. This is another problem. I run into We have ten different teams work a lot of vendors you know teams all over the world and These ten different teams built plugins and every single one of them We're missing an item and what I'm actively working on for us is what is the definition of done for a plug-in, right? And this is my growing definition of a complete plug-in a github repo with organizational owner permissions You'd be amazed how many people we forget when we adapt the plug-in. We don't have owner permissions on the github repo Clearly defined file header. There's file headers where it's just like, you know the WordPress file header when you make a plug-in or a theme It defines what the link is and you know it says like visit here We now have a link to our own internal internet to say to people Hey, if you need help or you know you want like so you can add those things before there were just generic links that went nowhere, right? A complete read me for the lowest common denominator So what I always say is and that goes back to the TensorFlow thing I can learn machine I can do machine learning in two hours, but it takes me like five hours to figure out what your plug-in does, right? And that's a problem now do that times, you know 30 developers a hundred developers different team members, right? And so when I say make a remit so we have to figure out like kind of stakeholder look at this and understand How his team could use this plug-in? Branching structure so making sure that you know sometimes developers they'll commit everything to the main master branch, right? And so we define that we have a dev a QA in production And I have some resources if anyone's not working in that kind of workflow at the end of this But yeah, so making sure your proper branching structure for our plugins I define style in ES lint so remember I so if you guys aren't non-developers If you guys remember I said hey like if they to forget a word or they forget this and they forget that you know Have those standards you can define a style in an ES lint or wide and on a plug-in basis So that no matter who pulls the plug-in they get your coding standards or your linting standards by default When they pull it into their development environment Clearly to find directory structure so and and you know going back one slide if you remember we had ten different teams I'd say Out of let's say this is like six out of the plugins that we pulled in Out of those ten plug-ins all of them only had maybe two of these and then have these so that was like when I joined The company I was a while that's insane right and in growing right like what else do you need now? We want to put maybe put a video demonstration of how the UI works put a jiff in there put other things in there And the solution again in turn like every time after one of our you know sprints We're actively going and looking at it and saying like okay. What else can we improve on what needs to be there, etc? Problem three trust but verifies is a very common problem, and that's it. There's that's the problem people man They just like they just don't care and they just get you know and people like it's a Friday night We have a code push and you know there's hot Movie going on you know like endgame just came out people got to go see that right? Whatever and so we have you know we have a culture now of code reviews We're actively we're like working with each development team and making sure we're viewing each other's code and giving honest feedback We're doing testing which I spoke about before a little bit And then in that testing is integrated with our CI CD where before a developer can even push the code into our Repo it's being tested by our CI CD system, and we're rejecting invalid pull requests Problem number four that we're running into and this is a problem that Gutenberg is having overall So if you're interested in contributing we're actually starting to contribute on this as well Is maintaining dependencies? Who here has built a Gutenberg block by the way raise your hand one two? That's it guys It's super easy like it is actually super easy to build a block There's this great thing called a create Guten block You can get a block up and running in like five minutes. The problem is keeping that block running beyond those five minutes and the And and the reason for that is Gutenberg is changing so quickly JavaScript is changing so quickly Security is changing so quickly everything and that's what CI CD is by the way CI CD is that you know You're a big enterprise organization something like Netflix right Netflix gets a call from You know one of the developers and they say uh-oh There's like a zero-day exploit that just came out and we have to solve that problem and patch the bug and the way Development used to work was okay get the team together next week and then in a month We're gonna talk about it and la la la whereas now you can patch that bug Run it through all your tests and make sure it doesn't blow up your system And in two hours patch that bug and have it fixed. That's the benefit of CI CD You're not waiting for these big teams to get together But the problem that that brings is that you have to figure out how to maintain so Let me try to think has anyone done composer with PHP raise your hand composer a couple composer people Okay, cool. So when you when you go and run like composer update, right? MPM is the same thing for node, right when you go and run that you see what dependencies are out of date When and guys if for non composer MPM people when you guys, you know If you're if you're working properly in WordPress you go and when WooCommerce is notorious for this notorious for this You don't go update your plugins on your production site. You go to your staging site You update your plugins cross your fingers and if everything works you go update on the other site That's what that's what you're doing with react to react has when you go and build a Gutenberg block It might have 20 to 50 dependencies and then each of those dependencies have up to 700 800 dependencies So literally, you know at one point we're dealing with 800 to 1,000 dependencies per block But that's not really I'll explain why it's not a problem because so if you think about it each Each block is potentially its own react app So your ten organizations and I'm just you might have ten organizations ten custom blocks So 100 different configurations, right? And that's a kid and so think about if in a WordPress site. It's a configuration that's similar in composer MPM It's a configuration But this problem has been solved we got to get outside the WordPress space That's another thing I recommend get out go to a non WordPress conference Go to a non WordPress meet-up talk to non WordPress people. I'm very lucky in New York City We have a big react scene angular, etc But one of the things I found in my research was PayPal had this problem only a year ago. They just solved it So when you guys configure by the way in in composer it's composer.json in your in in your WordPress site you have a WP config that defines certain things in JavaScript. It's a webpack, right at one point PayPal had 635 webpacks 897 babel files and five thousand six hundred and fifty-seven different ESLintz. Remember I spoke about ESLint It's just a style file, right? That's insane Kent Kent Dodds he went and said that what he said was if I if we do the math if it takes one hour to Disseminate how to use that configuration and one hour to maintain that configuration annually They're burning a lot of money, right now do that math you have 100 blocks, right? Or you know custom blocks etc or different clients you build a custom block for a hundred clients That's 100 things you have to maintain But the solution is to move towards a singular dependency. So In if you go and develop in react or in PayPal They have you can set a singular dependency and that dependency Manages all the scripts for you. It comes with a preset configuration unless you have to do really something really custom but most blocks, you know Some blocks are just things where like it makes a heading and it makes a paragraph and has a button That's not really anything outside of the boundaries of standard HTML. It's not calling an external API It's not doing any crazy like testing and configuration. It's just a chumel, right? So why would you have an advanced configuration? And so WordPress actually is trying to solve this problem They have a package called WP scripts and you just do MPM install you install one singular dependency And then you never have to touch that block again, and you just update WP scripts You MPM update and just run that one test there and we don't even do that We just literally have our CI CD just goes and runs it and if we get a test back that has like it kicks back We just go and modify whatever we need to modify So so that's that's great And if you want WP scripts, we're trying to contribute to that They're moving towards a singular dependency to make it easier for people in the WordPress community to learn react because the number one problem that people are having learning Gutenberg is just JavaScript can be a nightmare Problem number problem number five that I had stakeholders just don't care They immediately say like whoa You want us to like go and like make read me's and make this and make that when does the work get done, right? That's like kind of like how client, you know, they feel about it and Luckily again like in my research I was able to like that, you know people like can't see Dodds at PayPal people at like, you know at react and What's happening in the Gutenberg community? It was an easy thing. It was simple math So if you you know if you as a even like a small agency if you're a small agency if you're a small company If you're maintaining, you know five different let's say you just have five clients right and all five of those clients were built with a custom underscores theme and they Have a custom Gutenberg block and they have a custom plug-in or two if you don't maintain your standards and You try to hire you're and that's like I meet a lot of people who essentially say like I can't hire Anyone don't trust anyone. Oh, I can't hire anyone. They can't do it, right? You're you're essentially you bought yourself the worst job ever, right? Like you're never gonna be able to take a vacation, right? And that's the benefit of this stuff like you know I just went I went and spoke at word camp Madrid and I was gone for two weeks and nothing exploded, right? And I was like and that was awesome And that's like I think everyone should have that ability and as a developer sometimes you become such a lynch pin Which is a great thing, but you don't want to become such a lynch pin that you're literally overnight losing sleep about these things And then for the stakeholders, I just had to show them guys We're gonna have in our you know in our roadmap We might have 100 blocks eventually that are all custom if we have 100 configs with 100 hours annually And then we have to go and explain to every and these vendors You know we work with WordPress development agencies We have to what spend 10 hours to explain to these guys like how to use our standards or how to adapt their standards And you know if they're charging 200 an hour, that's $2,000 every time we want to go and explain So you know it's hundreds of thousands a year that we're saving So here are the tools and assets that we're building we are going to be open sourcing some of them So follow me on Twitter. Hopefully at the end of the year we're gonna have some of these available But the other thing to remember is Anyone can build these tools just listen to Picasso is my favorite saying good artists borrow great artists steal They're like I did not invent any of this I literally just listen and I'm like Kotoro parent like I just listen and I just like repeat what I hear, right? Of course, I like filter it sometimes, but I didn't think of any of these I just looked at was going on in the development world and I said wow I Learned TensorFlow machine learning in one hour because they had a great read me YouTube video and accompanying blog post Maybe we should make that for Gutenberg, right? And so what we have done is we've created a read me boilerplate someone comes in and says hey What are your read me standards here you go video at the top or a jiff This you know has to have a heading and one of the other benefits to have a really great read me You guys may not realize this, but you guys notice like um the wordpress.org repository for the plugins All of them have like a nice heading a nice text nice whatever. Do you think someone's manually going and writing that in? No, it pulls from the read me because there's a standardized read me format that is required to submit to the wordpress.org repo So because we have standardized our read me now We have our own intranet site where any stakeholder can go in and view all the plugins that we have and assets that are available So any developer that comes on I just tell them to go to our intranet And then for your plug-in we have a plug-in boilerplate which includes our phpcs our style in our ESLint and other any other Configurations so that way when someone comes in they fire up the IDE They pulled on the plug-in and auto configures for vs code or PHP storm whichever one they want to use We have a Gutenberg plug-in boilerplate that uses wp scripts a singular dependency We have that well documented and tell people how to fire it up what files they need to change etc We have a theme boilerplate. We do not use a framework. We do have our own theme that we have a theme boilerplate At my company, but I prefer Genesis so again thinking about a standard theme or framework that you can use to build off of And then we have a CMS handbook and knowledge base a lot of it just links to standard wordpress stuff But there are certain things where we have different standards that we have defined And then the other thing we you don't have to this but again defining it for some smaller teams I just recommend using a local by flywheel or vvv But making sure you're all in the same thing like I get it developers have their preferences in my in my personal company abstract I do have some people who are like I prefer this and like that's cool I'm not paying you for that I'm paying you for this and so use this standard I don't and if you have to do the work there and move it over it That's on you, but I'm not paying you for that right and that and that's like something you know It is you know, it's getting some hard medicine sometimes And then these are our standard processes We have our dev workflow, which is again when a developer commits code It gets tested and put it into dev a dev environment And then once that's tested there and it passes then it goes to QA in QA We do integration regression testing and then once it passes that we go to production We use Jenkins for our CI CD So remember I said to you guys like before for non developers like it's essentially some system that will go through and check you could Jenkins It's like a scripting system and same with Travis You write these scripts and these commands and have it run these tests and it will do those things where reject and you Or you it doesn't have to reject you can have hard pass soft pass different things We do unit testing Regret and again like I said regression testing and that's just making sure that oh, sorry Regression testing just making sure that anything that you know work before works now Integration testing is putting it and making sure that you know all doing actual live testing and making sure it works with everything And these are some resources there was actually a great talk about the technical side of this you may not have gone but One of the guys from WP engine automating WordPress development with Chris Weigman that guy that actually everything I kind of learned about CI CD. I just took from WP engine WP engine has amazing resources on that and they actually make it really stupidly easy to see ICD There's an application called deploy bot. There's one called code ship And I think some of them even have like UIs to write tests where you don't even have to like know how to write tests You just go you and they even have consultants that will help you out And that I put that article in there to continue an integration with WP engine deploy bot But the number one thing I find and just in closing So many people get like yeah, we want to do CI CD and react and modern development tools and you know all these buzzwords But what does that really mean and what is the benefit right? And so what I hope to give you guys with this talk was don't I'm working in reverse I'm thinking about what are the standards that we want and then this is actually the easy part if you find a developer Or you work with a partner like WP engine or you work with a partner like Kinsta They can help you get this together But if you don't know why you're defining these standards This is like the biggest waste of time like I actually worked with a team recently their version of CI CD was like Checking that all divs had classes and I was like, okay Like why do we care about that? Is that really going to move the needle and they're like we hate divide us and bootstrap? I'm like, oh, okay, like but that's not a business. I don't care like you know And that and people will just write tests for the sake of tests, but think about what really moves the needle in your organization And that's it. I'm gonna tweet the slides after this and we're open for Q&A I left like 10 minutes for questions guys. So like please if I'm over if I overwhelmed you. I'm sorry, but I've not Yeah, oh cool Yeah, so I'm assuming something like WP enforcer might enforce WP standards Yeah, yeah, and so Yeah, perfect Yeah, and so just so because I have to repeat this because there's no microphone But just so everyone knows they were he was asking have I heard a get enforcer which I get our WP enforcer Which was you know mentioned by the guy I spoke about before Chris Wegman from WP engine There are existing tools out there So if you don't have like, I don't know what standard to use for ESLint Airbnb has open source theirs We use Airbnb ESLint. We didn't make our own PHP SCS standards we use WP. We didn't make our own We aren't making our own, you know Standard JavaScript standards outside of WordPress, but there's a lot of this stuff has been solved So if you find someone or you know, you know someone who you can start there And that's what I meant by steal just go and borrow someone else's workflow and a lot of you know A lot of developers are very giving and you know They do write exactly how they did it or how you know They implemented it the other thing I recommend though, too Is to get out of the WordPress space sometimes because one of the things I had this conversation Here at this event with someone was that a lot of the tutorials and stuff that are being written are being written for people Who are using PHP 5.2 5.6? They're not using PHP 7, right? Sometimes you have to go out of the space and see what people are doing in PHP And that really makes the difference because even though you know like what if you're moving if you're doing these Kind of standards and CICD and etc. You have the benefit that you can start to adapt really cutting-edge stuff Because you're actively testing and actively growing and keeping up with the you know the speed the development is moving But the WordPress space because of backwards compatibility, you know They're they're sticking with 5.2 and 5.6 But if you can move ahead and get you know and tell you guys no PHP 7 is like a hundred times faster But literally I'm not making that number up 100 times faster So if you're in a host that's still in five you're like you're burning money, you know And so that's why I do recommend like you know try to look outside the WordPress space or look work with hosts that are You know just like WP engine Kinsta, etc. They're pushing the needle to get like to these higher standards Any other questions So our WordPress systems 100% headless So the way that we're using The way that we use WordPress is that we still have the Gutenberg editor, but what we're doing is So each Gutenberg block stores the data in the database in a particular way And then what we have is we have a build tool that is going and grabbing All of the like let's say we have a headline block It will take all of the blocks map them into a kind of JSON structure That matches our JSON structure for our own proprietary system and then sends it all over to all of our different systems like for W. Wall Street Journal. We have a mobile app. We have you know Android iOS We have desktop. We also have pro You know because we have paid Wall Street Journal and then also some of our data if you you know When you guys go to New York City and see the tickers on all like the buildings That's powered by WordPress like all of our publishing is being done by WordPress The New York Post for example, they're not Gutenberg yet, but they they use like they give you notifications via SMS or push notifications And that's headless WordPress. And so yeah, we're 100% headless And and the benefit for that is we I as a WordPress developer and building a CMS I'm no longer bothering with the front end and we have a crazy front-end team that you know They handle that and they're dealing with the man membership teams and ad tech teams and all those things I'm 100% focused on building a CMS that works for newsrooms, and it's a really great experience It's a very different experience what I did before But yeah, so that's how we're using it Yeah, I keep forgetting to repeat the questions. Yeah, so the question was that we are are we using how this WordPress? And yeah, we are using headless WordPress with the WordPress API But in what what's happening is we're going to the WordPress API grabbing that data and then in our plug-in We're modifying it to match our JSON standards. What we didn't want to do was modify our Object, you know our data types for WordPress instead We're modifying it on the fly when it gets published for our system because you know We would have to modify than hundreds of thousands of websites. We'd rather just modify one WordPress to match our standard Any other questions? So the craziest block that we built so far is Dow Jones has a Propriet as a bunch of proprietary APIs But one of the blocks that we're currently messing with is a chart block So we're allowing people to grab real-time data from different data sets that Dow Jones has and then manipulate that data into a chart to display and tell a story and That is actually way more complex than it sounds because it's not really a data problem The API is actually the easiest part if and and not to like insult what I do But as a developer once you've like once you know how to pull from an API You know how to authenticate, you know, like what you know how manipulate the data put it where you want it That's the easy part right and then now we solve the dependency issue. So that's another easy That's it. We're making it easier now. It's a user experience problem. What do we want to let people do right? and so one of the things Without getting too heavy into the chart API We recently built a byline block So if anyone's not familiar like a byline is like by you know Victor Amiris and let's say Brett right and so When every and we didn't build that in a uniform way what happened was before I came on everyone was already building it So one agency built it Where in the Gutenberg sidebar? They could search for names and then drag the name into the byline Okay, then one team went and built it where you would type a name and then there'd be a drop-down of all the available names You'd select the name hit a plus to add another name Okay, I thought that was weird and what they were doing was they were bringing in what I the way that I saw it was ACF Into wordpress because that's this that's how wordpress forms work Right, that's what I think ninja forms is like that you drag things from the side gravity forms like that you drag things to the side Right, and that's how wordpress does things But in my mind I was like and this was this is what made it difficult by the way I Said well how how does it work in the wild without us having to train users? I didn't even get into that in here without having to train users Our number was certain when it comes to user interfaces and user experience our number one competitor is dominoes That sounds weird right and I literally say this to every stakeholder and here's why You guys know this is web developers Non-technical stakeholders have no concept of what the cost or scope is of a technical problem, right? So when I order I haven't ordered dominoes in a while But like when you if anyone hasn't try it just order dominoes for the kids see this is pretty cool You order dominoes on the website, and there's a dominoes tracker You literally can see when the pizza goes in the oven when the dude has it in the car And you can cheer him on and like even tip him extra money if he gets in the car earlier, right? That's my user experience for a $10 pizza, right? So why in God's name? For a $100 form block or a $500 this block or a $50,000 enterprise plug-in Do I have this horrible user interface, right? So that's why I say dominoes are competitor because people a $10 pizza has an amazing user experience, right? So what I did was one in looked in the wild and said what is the user experience when you're adding names to something? Facebook at Twitter at you know and all those other things so in the Gutenberg The Gutenberg package on the GitHub repo. It's not well documented. There is an auto-completer Right and the default auto-completer in WordPress in Gutenberg if you guys went to Gutenberg right now and do that It goes and searches the profiles from your WordPress site, right? But we didn't need that we want to pull from external authors, right? Because one person might be writing the story, but there might be five editors on a story, right? And so what we did was we with Gutenberg you can and I to learn this on the fly by the way It's not documented But we disabled the standard at right and with the auto prefix or package that is available in Gutenberg You can make any auto-completer you want So what we did was we made an auto-completer block for the byline that when you hit at instead of pinging the internal REST API and that's how they get the Authors we pinged an external API just via fetch which is a standard ES six You know very simple just fetch to our external API and as the person types it goes and searches all the names And then they when they find the name they want they hit enter and the name populates and it goes to the next base They want and and even better in Gutenberg because we didn't expect people to know to do at when they drop that block You can do there's packages to build tooltips So have you guys ever like hover over something in Facebook and it says like hey do this if you're trying to do that You though that's available in Gutenberg It's not documented again, but like we so we went it's documented okay But they don't really tell you by the way you've seen this in Asana and Facebook So you may want to use it So now that's one of our requirements on every single block requires a tooltip If someone hovers for more than five seconds or something right and so that tooltip then says press at to start searching authors Right and then the other thing we did was now that byline block We also restricted that that auto-completer only works in the byline block if you try to instantiate or press the at symbol In any other block it doesn't work and that block is restricted to only be used once if you try to use that block again It's not available. It's not available in the drop-down list And that was like now that I went through a lot, right? That's a lot of stuff to do but think about that I essentially made my own like Asana experience and it was so and we had a hackathon recently Where all the teams got together and when we demoed our byline everyone's like wow We're stealing that like and I was like get please do and and now instead of thinking about each of us making Our own block now the next problem is how do we add a filter so people can add different apis? How do we you know modify and how do we and by having standardization? We're gonna grow like that and that was a similar thing with the chart block because now back to the user experience problem Do we have a drop-down? Do we have auto-completer? That's not really I think appropriate for a chart Do we what users are have what apis available to them if they're a bankruptcy desk writer? What apis do they need if they're a? Mergers and acquisitions writer what do they need if they're just a contractor and we don't want them to have access to really sensitive data What does that mean and that's that's a really complex problem because it's who's using it Who's writing it who's authorized? How does it look and those are really interesting problems? You can solve now that you have Gutenberg because I wouldn't even know how to begin to do that in an in a form Interface in a form interface that would just you know it might look like a nightmare and too many options, right? So if I overloaded you sorry, but yeah next question so I have a question about Have you thought has your team thought about the? Issue of content and API is changing over time. So let's say that you have a story that is using a block Mm-hmm. It has an API and then I mean it's possible that you never ever ever go in and edit it three years from now Or five years from now, but what happens if that? Blocks not available then for charts. Okay. Yep. Yep. Okay, so let me so just to repeat the question I was just asked what do you do if the API is no longer available or the API changes or things like that, right? Right for existing Without but with what you're saying with Gutenberg, right? Okay, right Right, so some APIs you have no control over and some APIs if we tried to do this we'd violate their standards So for example the Instagram block, right? There's certain blocks where we essentially say And sometimes agencies are like, ah, we don't really like the block from the default standard WordPress We're gonna build our own and I say hold on a second. Who's gonna build it? Who's gonna maintain it? What are the standards? So for example the Instagram block, right? The beauty of the Instagram block is Don't try to build a custom. Just use the standard Instagram block It's pretty good Like I don't care what there can't be a feature that you want to have to maintain that because the Instagram API is changing so often, right? But let's look at the chart API. We thought about that We said, hey, we want the chart data live in the editor, but what's great about Gutenberg is There's two functions. There's an edit function which dictates how it works in the editor Then there's the save function which dictates how it looks the viewer and in your database, right? We flatten the chart we capture it as an image And then we save that to the database and that image is then forever in perpetuity available And that that's really cool because that was immediately we had that same that was the exact same issue to think about What if all of our API's change with our keys change when the site goes down? We want these, you know this and also the one thing we're actually Gonna limit the amount of stories in our WordPress Instance to keep it fast So there will only be like 100 to 500 stories at a time Once the story has been in there for like six months It will get dumped and put into our into our custom API storage space because we want the site to be fast We don't want 5,000 posts and if someone wants to edit an old post They have to go into the our old our system grab the key and they can input it and re-instantiate the story So those are like really and that's interesting problems to solve because you have to think about that, right? When API's disappear one thing change and that's I think one of the scary things about Gutenberg It's gonna force you and this is the one thing I say we just brought on some new developers I tell them like you can't use Stack Overflow. You can't use Google You can't use anything like you have to literally go into the Gutenberg hub repo or go Fork Richard Tambor stuff by the way if you want to fork anything look at Richard Tambor's co blocks I still have his stuff. I bought him to drink so I feel we're even but um, you know or co look at co blocks Look at atomic blocks look at Uh Stackable we go and look at those and we and that and that's kind of like we borrow from but it's a really interesting challenge And that kind of stuff if you think about it What do you do when the API disappears that stuff that we don't have to worry about right now and WordPress really right? Because we're not doing the react thing if it disappears we can like do an interesting image, but that's not predefined for us, right? So yeah, so that's what we're doing to solve that. How am I doing on time? That's gonna question. I think we're anyone have a good the question was what am I doing for state management? So we're just using the standard Redux wrapper. What's in there? Yeah, so we don't No, so anything so we're trying to really just stick to the word My goal is to stick to vanilla WordPress So we're trying to be as vanilla as possible Anything where we have to like pull in like you know someone was like oh I really don't like this about the Gutenberg thing or I don't like this or this could be better Or isn't there a better this we could do and it's only I've never seen something. That's ten times better It's always something that's like 10% better and maybe saves one of our developers 15 minutes But the one thing is as a and that's like you know and I apologize anyone who uses this but like twig press or not That's quick press. What is it called timber twig press is someone's Twitter handle timber right or like timber and like all these like or like Brett help me out. What is that thing called? What are these these custom theme frameworks that kind of like reconfigure WordPress to be in different folders? there's There's all these like you know frameworks out there with a reconfigure WordPress right and a lot of people say You know you'll see on advanced WordPress people will say oh well like any developer is going to be able to figure that out in 10 Hours anyway, right okay, cool I have 100 developers and now I have to spend 100 hour 1000 hours for them to get up to speed now for my team that makes an unhappy developer They're on salary anyway doesn't cost me more money, but it's a waste of time For vendors I now have to pay that vendor money and there's a diminishing ROI unless we're using that across all our systems Right and then I can't go and recruit in the standard WordPress community I have to find someone who knows this really abstract concept, right? And so that too when any earth when you start thinking about anything like because I know tribe event the guys who have event The event plus modern tribe they made their own wrapper for Redux, right? And that was the big conversation advanced WordPress where Yoast and everyone else said now you're gonna have to maintain that Right, and I guess if they're doing enough business to maintain their own Redux wrapper their own Redux great I don't want to maintain that you know me I don't want to deal with that and it's like about what you know What's the going to move the needle right now for example with that chart system if we had to come up with our Own state management that would make sense because Dow Jones our money is data. We trade information, right? That's something where I'd make our own state management system, right? But you have to think about what's if it's not going to give you 10 times the ROI if it's like a 10% bump Don't you don't even do it stick to vanilla WordPress I'm very opinionated by the way, so if like anyone doesn't like what I say, it's fine. I'm sorry cool Any other questions So again, we're headless so I'm not at work excited about widgets because it doesn't really affect us But in my personal life, you know and like and I am excited about I Think it's really exciting because the opportunities that are there if anyone is played with like webflow or plate and outside of page builders Right, there's all these great web experiences like someone has made doom in JavaScript, right? Like there's a JavaScript doom and I think it's like one megabyte, right? I heard this because YouTube was a two megabyte page And then this I think the guy who was in charge of the YouTube team said doom is one megabyte Why is you to our YouTube pages two megabytes, right and not even the video and that makes sense, right? So it's a challenge and I'm excited about the challenge of going and looking at How composition will work right because you could use Gutenberg, and I don't know if this is a use case They're gonna Validate, but you could use Gutenberg to compose newsletters, right? I mean Gutenberg looks just like MailChimp, right? You could use Gutenberg to go and create you know This is something, you know that you might you could do it for print stuff You could do it if the limit is like you as a developer, right and with JavaScript You know we didn't create a custom chart API. We just use there's a react chart API available There's a react game API. There's every as someone's creating something for react, right? TensorFlow there's a JavaScript open source JavaScript machine learning algorithm there, right? So so I guess so yeah with that in mind my number one thing is like personalization So I really want it where like what I love is when I go to a website Within reason I don't want creepy like hey We know everything about you and buy five of these because you know you're fatty and eat this or whatever like but fine But like I want essentially like you know, I don't like I do like today Delta said it's time to check in I click the link in the email and it tried to open the app I Hit cancel and then I got a blank page went back to the email clicked it and it tried to open the app It had cancel I had to go to Delta find my number put it in right and that's like Delta They haven't even solved these problems, right? They're like a fortune 100 fortune 500 company But what that means is now we as WordPress people we can solve that problem I could write a simple cookie or if statement or something to go and see if someone has Canceled downloading the app before or if they don't get redirected to the app to serve different content, right? And so with Gutenberg there's this new level of personalization So if I remember before I was saying we restrict the auto-completer to a certain block, right? I could restrict that auto-completer to a certain user. I could restrict blocks to certain users I can restrict blocks to certain IPs. I can blit, you know restrict to certain Regions to certain languages and so there's all this like really amazing customization for you know for really rich experiences and also once the accessibility issue is solved And that's again. That's like the editor experience accessibility issue You could go and detect and like you know, I told you in the save component You can go and save the data however you want, right? So if you save the data in a proper way, you could use it for tickers and the news I could use it to send, you know data to you know my Twitter feed or any of those things So that's really I'm excited about just being able to push and pull data wherever I want in the world So not really I guess like the widgets and stuff That's nice, but wouldn't it be nice that if I was like a store owner Someone made a widget that just went to Google my business Grabbed the current hours and if I put were closed for Easter the block updates and that person doesn't have to go into WordPress Right because business and like WordPress it can be complicated But I just think anything for another person to log into it's not exciting, right? Wouldn't it be great if we had a block that you know, and that's what I love about like Genesis They already have like you literally put in the the the time they have like a time shortcode on your footer Automatically updates your site never says copyright 2015 four years later, right? And so little things like that really contextual data. That's what I'm excited about the same thing for like I Can't really talk there is some really exciting stuff for doing a newscorp that I can't really talk about but um But for an example, right like think about this. I was talking before about blogging, right? So one of the things if you guys notice you go into Yoast and you can set it up where it will check on I think on save it goes and checks like how your SEO is doing, right? But imagine that you wanted to have that like where if anyone uses a word that's not allowed in your style guide We don't allow that word right so immediately as someone's typing if they type that word you can capture it in real time via hooks There's a hooks thing in a in Gutenberg WP hooks You can grab it and say don't use that word and have like a big alert That says like whatever or you could be even a goofball about it and have like I don't know What is that in Jurassic Park Newman? He's like I didn't say the magic word, right? You could have something like you could you can make your experience whatever you want it to be So I think the exciting thing not just Gutenberg because Gutenberg really is just react The potential limit list because what we're back to the standardization thing We're now we're catching up Javascripts eating the world like that's actually what a lot of people are saying. We're now joining everyone else Everyone's using one common language. That's why TensorFlow was originally written in Python now. They wrote in Javascript I think I just saw someone released like another AI thing it was written in you know Python and now they're made a Javascript wrapper because they realize if you go to any high school code camp if you go to most colleges now To they're all moving towards Javascript. So that standardization. I just think the potential is limitless. So I Don't know if they answered your question Are you in a new store plan for for the online Websites looking at AMP stories So that's not our team. That's the doubt So we call that downstream like the people are doing the websites. They're doing AMP stories, but back to so the question was Are we looking at AMP stories? If everyone's not familiar like in Instagram? There's stories where you click the story and it goes through Google is now launching its own version of stories So when you go and click a link in Google, it will be a swipable story and so I think that's kind of nightmarish because I am in my browser and now I click a link and I have a story but There is a people it shows high engagement for both Instagram and Facebook. So with Gutenberg You can go and build your own AMP stories builder But it would have to be set, you know You have to now that's a user experience problem, right because there's a startup that I work with Outside of Dow Jones called Wibbitz and what they do is you give them a you give them an article and they go and find Using machine learning and AI the most important phrases in that article and then they turn that they match it with stock video footage Or like Getty footage and turn that into a video So if you guys ever seen Bloomberg any Bloomberg video that has text overlays on stock footage and news footage That's generated by a bot called Wibbitz And all the editor does is they go in and say that phrase makes no sense Give me another one the bot gives another one that video makes no sense give this one instead and it's doing that, right? So it would be great if we could do something like that where we read the blog post and go based on this blog that you gave us Here's your amp story with five images and five phrases that were the most important quotes, right? But that's something you could do now because now we can bring in TensorFlow for our machine learning We could bring in react to do kind of like you know the modal experience of editing the story before they go to publish And so that's the kind of stuff you can do now with Gutenberg And that's the people really aren't doing because they're not thinking like that whereas like yeah I think how do we bring amp story into Gutenberg? Yeah Releasing the beta to also have Stories interesting But I think but I think the thing too is how do you get people to do it, right? Because the thing is like everyone guys like how many times you read a blog post. There's no featured image There's no SEO keyword that you got it you have to make the user experience Easy for people to do it like and that's the same thing we even with Gutenberg now We have it where like if you put a block quote and don't put an attribution you can't publish Every block quote must have an attribution if an image doesn't have a caption with an attribution you cannot publish And so those are the kind of things you can do in Gutenberg. You couldn't do in the standard Tiny mce editor for each of those individual components. So Cool. I think it's time, right? All right. Cool All right, thank you so much guys. I hope you enjoyed it. I'm gonna post the slides