VIDEO: Enterprise Tooling & CICD in WordPress

This talk was given by Victor Ramirez and took place at WordCamp Atlanta in 2019.

Summary

I recently joined Dow Jones as a WP developer. I discovered not everyone was a WP developer but PHP or other developers who did some WordPress. I had to figure out how to win adoption of ‘the WordPress way’ across multiple countries, devs, stakeholders, & online publications. We also had to make sure that legacy plugins, tools, etc kept up with the new changes of WordPress 5. I’ll share how I won adoption and coordination by using Git for collaboration, regularly scheduled meetings (without death by meetings), & creating standards. I’ll also give a peek at pitfalls to avoid when trying to work within org that never did remote before & worked with multiple outside agencies.

Transcription (via Otter)

Victor Ramirez 00:00
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 was the title that I use, it was like the catchy headline. But just I could tell by the room that I scared people away. So I just want to preface It’s not scary at all. The talk, if I could have put a sub text below, it was like what I’ve learned in enterprise that can benefit everyone, right? So I’m going to 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’m 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 do 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 is important, right. And so I’m also the founder and 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, code nation 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 WP NYC, 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 me 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 News Corp or any of its subsidiaries and whatever illegal 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 mean probably wouldn’t funnier last year. But and Game of Thrones, it’s ending, whoo, 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, it works in modern JavaScript, like with node, react, etc? Raise your hand? Kind of, okay, cool. I see some, like half hands, all right, perfect. It can be complicated. And if you’re a PHP developer, trying to move your way into JavaScript and React, 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 when 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 want 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 if you’re 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 CI CD is? Raise your hand high if you really understand CI CD. Okay, two, three, perfect, that’s perfect. Who when I say CI CD who has no idea what I’m talking about? Raise your hand high and proud. Perfect. Okay, cool. So, CIC D 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 if everyone here, I’m assuming has written a blog post or use WordPress before, right? So imagine if you every time that someone wrote a blog post, and they forgot to 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 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’s, it’s boo, he didn’t pass it. And then he did pass the test. And then it moves to next stage, and it goes to the server. And the benefit of that is, instead of you as the senior developer, or the senior stakeholder or the DevOps 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 and as I get through standards, this will make a lot of sense. And I like to call it just for my stakeholders, I tried to break everything because I work with a not a lot of non technical stakeholders across many different places, many different cultures, many different languages. And I just call it automated QA on steroids. And that’s what C ICD is right?

Victor Ramirez 06:01
So I’m gonna go through some concepts first about how to think about standards, and then it will make sense 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 an actually Kanban was invented by Toyota. So if you guys like Trello, JIRA, anulus 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 they’ve I think they built I think they build a car here in Georgia. I don’t know, I don’t know. But they build a Toyota, they bought a Sienna, each factory builds one model of one car. OEM standards only when they go in if you go and like put some crazy, you know, 30 inch muffler that makes your car sound like a bass drum going down the street, you voided your warranty, and you don’t get the 100,000 mile Toyota warranty, right. And there’s a warrantied life expectancy. So you know exactly this car. When you buy a Toyota Camry, it’s going to last you 10 to 15 years, good for 100,000 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 hotshot developers build websites. Oh, by the way, limited specialization for staff throw a rock, you’re gonna have a Toyota drive a Toyota mechanic, right? This is a hot rodder bill, they’re 50,000 to $250,000. And you know, people like to write big checks. They’re built to spec fully custom, one or two vehicles per garage, not productize. So meaning like, they’re only building one or two vehicles, maybe a backup vehicle for when they go and race, right. There’s no standards, and there shouldn’t be standards, right? If I’m trying to win a NASCAR race, I’m going to Formula One, we have to like throw everything we can every idea for some nos in there. I don’t know Pixy dust whatever 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 to repair shop, you have to call an extremely specialized pit crew. And this is real math, I went and checked out how much the pit crew to maintain a pit crews a half million to $1 million a year, because their union in some states and you can’t just you can’t just call them Hey, man, I 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 is 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 pit crew to maintain it. You want people to throw 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 healthcare system is notorious problem in western medicine in Eastern Europe. What they’re 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. Why did doctors not wash their hands because their people know their people. they’re just like us, right? They go on the golf course they hit like 18 holes or feeling hot, they’re awesome. They got to get in there and do some brain surgery. So instead of doing the, the quick, 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 leads to 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 the next job, right? So that’s why you need standards. The other thing is people have different definitions, the 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 for standards is trust, but verify.

Victor Ramirez 10:58
So that just goes back to the thing of the handwashing like you even though doctors, look, doctors are really smart people, they go to school for 810 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 E Myth by Michael Gerber and the art of the steal by Frank addict now, 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. This 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’d 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. CMS is 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 and internally, you need to internally define standards. So for example, and people will say, well, our developer is going to define the standards, which developer, right, and if you’re not a developer, and you need to define standards, work with a developer define the standards, but don’t just let them go cart launch, right. And the same thing, Toyota doesn’t let the fact the parts that the part company has defined 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, or myself and a couple other people on our team. We’re continually reviewing friction points caused by bad standards and adapt in sprint. 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 did we do wrong? What was the 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 nuts. Sometimes people give us a plugin. 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 way, 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 pick movies for me, without ever calling Google. Yet it took me three hours to understand how a simple Gutenberg block work for an agency. Do you see that? Do you see that the disconnect there? Next, definitions have done this is another problem I run into. We have 10 different teams with a lot of vendors, we have teams all over the world. And these 10 different teams build 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 plugin, right. And this is my growing definition of a complete plugin, a GitHub repo with organizational owner permissions, you’d be amazed how many people we forget, when we adapt the plugin. We don’t have owner permissions on the GitHub repo. Clearly defined file header, there’s file headers, we’re just like, you know, the WordPress file header when you make a plug in or theme. It defines what the link is. And, you know, it says like visit here, we now have a link to our own internal intranet to say to people, Hey, if you need help, or you know, you want like, so you can add those things before they were just generic links that went nowhere write a complete readme 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 plugin does, right? And that’s a problem. Now do that times, you know, 30 developers, 100 developers, different team members, right? And so when I say make a readme, so we have to figure out what kind of stake holder, look at this and understand how this team could use this plugin, 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, QA and 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, a defined style in ES lint. So remember, I said, if you guys aren’t non developers, if you guys remember I said, Hey, like, if they forget a word, or they forget this, and they forget that, you know, have those standards, you can define a style in ES lint, org wide and on a plugin basis, so that no matter who pulls the plugin, they get your coding standards or your linting standards by default, when they pull it into their development environment. Clearly defined directory structure. So and, you know, going back one slide, if you remember, we had 10 different teams, I’d say, out of let’s say this, like six out of the plugins that we pulled in,

Victor Ramirez 15:59
out of those 10, plugins, all of them only had maybe two of these, and then have these so that was like, when I joined the company, I was wow, 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 GIF in there, put other things in there. And the solution again, internally, every time after one of our Sprint’s we’re actively going and looking at it, and saying like, Okay, what else can we improve on what needs to be there cetera? Problem three, trust but verify is, 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 there’s, you know, when people like it’s a Friday night, we have a code push, and you know, there’s hot movie going on, you know, like, end game just came out, people gotta 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 reviewing 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 GitHub 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 is built 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 Craig 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 C ICD is, by the way, see ICD 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, 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 going to talk about it and go along. 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 it 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? NPM is the same thing for node, right? When you run that you see what dependencies are out of date, when guys from non composer NPM people, when you guys, you know, if you’re if you’re working properly in WordPress, you go in, and 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 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 dependency. So literally, you know, at one point, we’re dealing with 800 to 1000 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 you’re 10 organizations, and you might have 10 organizations 10 custom blocks. So one 100 different configurations, right? And that’s it. So think of a if in a WordPress site, it’s a configuration that’s similar in composer NPM. It’s a configuration

Victor Ramirez 19:43
but this problem has been solved. We got to get outside the WordPress space. That’s another thing I recommend get. Go to a non WordPress conference. Go to a non WordPress meetup. Talk to non WordPress people. I’m very lucky in New York City. We have a big react scene, Angular cetera. But one of the things I found in my research was PayPal had the problem only a year ago, they just solved it. So when you guys configure by the way in, in composer, it’s composer dot JSON. In your in your WordPress site you have a WP config that defines certain things. In JavaScript. It’s a web pack, right? At one point PayPal had 635 web packs 897 babble files, and 5657 different es lint, Mariska es lint. It’s just a style file, right? That’s insane. Ken, Ken Dodds, he went and said, 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, are different clients, you build a custom block for 100 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 or 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 HTML, 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 NPM install, you install one single dependency, and then you never have to touch that block again. And you just update WP scripts, you NPM 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 single 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 two, problem number five that I had stakeholders just don’t care. They immediately say like, whoa, you want us like go and like make READMEs 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 Kent C, 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, 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 your and that’s like, I meet a lot of people who essentially say like, oh, I can’t hire him, I 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 get to take a vacation. Right. And that’s the benefit of this stuff. Like, you know, I just went I wouldn’t spoke at WordCamp 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 linchpin, which is a great thing. But you don’t want to become such a linchpin 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, 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 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 1000s a year that we’re saving.

Victor Ramirez 24:03
So here are the tools and assets that we’re building, we are gonna 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 Picasa is my favorite saying, good artists borrow Great artists steal? Their like, I did not invent any of this. I literally just listen and I’m, like, cortado parent, like, I just listen. And I just like repeat what I hear, right? Of course, they like filter it sometimes. But I didn’t think of any of these. I just looked at what’s going on in the development world. And I said, Wow, I learned TensorFlow machine learning in one hour because they had a great readme 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 readme boilerplate. Someone comes in and says, Hey, what are your readme standards? Here you go video at the top or a GIF. This, you know has to have a heading and one of the other benefits to have a really great readme. You guys may not realize this but you guys notice like the wordpress.org repository for the plugins. All of them have like a nice heading a nice text. And I swear, do you think someone’s manually going and writing that in? No, it pulls from the readme, because there’s a standardized readme format that is required to submit to the wordpress.org repo. So because we have standardized our readme, 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 go to our intranet. And then for your plugin, we will plug in boilerplate, which includes our phpcs, or styling or ES lint and other any other configurations. So that way, when someone comes in, they fire up the IDE, they pulled on the plugin, and it auto configures for VS code or PHP storm, whichever one they want to use. We have a Gutenberg plugin boilerplate that uses WP scripts a singular dependency, we have that well documented and tell people how to fire it up what files you 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 VVb. 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, that’s on you, but I’m not paying you for that, right. And that and that’s like something, you know, it is it was good to get some hard medicines sometimes. And then these are 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 you guys like before, for non developers, like it’s essentially some system that will go through and check you Jenkins is it’s like a scripting system. And same with Travis, you write these scripts and these commands, and haven’t run these tests. And it will do those things where reject 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 in making sure that you know all doing actual live testing and making sure it works with everything.

Victor Ramirez 27:49
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 Weidman, 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 you eyes to write tests where you don’t even have to, like, know how to write tests, you just go and they even have consultants that will help you out. And I put that article in there to continuous 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 for 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 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 about

29:38
Chris talked about Jellybean.

Victor Ramirez 29:41
I have not

29:43
syntax basically to put in. Yeah, I guess it’s on good. Oh, cool. He talks about that one. Yeah.

Victor Ramirez 29:55
Actually, so I’m assuming something like WP enforcer might enforce WP standards. Yeah. And

30:03
when you push it, you know for, for basically, you know if you’re gonna use it with obviously get it basically QA is for developers.

Victor Ramirez 30:15
Yeah, perfect. Yeah. And so just because I have to repeat this because there’s no microphone, but just so everyone knows they were he was asking how to how to get enforcer, which are WP enforcer, which was mentioned by the guy I spoken before Chris Weidman 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 ES lint. Airbnb is open source, there’s David, we use Airbnb, Zs, lint, we didn’t make our own PHPs CS standards, we use WP, we didn’t make our own. We are 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 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 right 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 have this conversation here at this event was 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 seven, 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 kinds of standards, and C, ICD 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 five, two and five, six. But if you can move ahead and get, you know, to let you guys know, PHP seven is like 100 times faster, but literally, I’m not making that number up 100 times faster. So if you’re in a host that stolen five, you’re like, you’re burning money, here. 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 cetera, they’re pushing the needle to get like to these higher standards. Any other questions? Any adverse reactions we’re heading for. So our WordPress system is 1% 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 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. They’re dealing with demanded membership teams, the ad tech teams and all those things. I’m wondering percent focus on building a CMS that works for newsrooms, and it’s a really great experience. It’s a very different experience what it did before. But yeah, so that’s how we’re using it.

34:07
WordPress API?

Victor Ramirez 34:11
Yeah, I keep forgetting to repeat the questions. Yeah. So the question was that we are, are we using headless WordPress? And yeah, we are using headless WordPress with the WordPress REST API. But in what’s happening is we’re going to the WordPress REST API, grabbing that data. And then in our plugin, 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 on the fly when it gets published for our system, because you know, we would have to modify then hundreds of 1000s of websites, we’d rather just modify one WordPress to match our standard. And you any other questions? What’s the craziest block you’ve built so far? So the craziest block that we built so far is Dow Jones has a prop Right as a bunch of proprietary API’s, 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 datasets that Dow Jones has, and then manipulate that data into a chart to display and tell the 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 indicate, 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 solved 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 to the chart API, we recently built a byline block. So if anyone’s not familiar, like a byline is like by you know, Victor Ramirez. And let’s say Brett, right. And so when every, 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. Were 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 the that’s how WordPress forums 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 are number one when it comes to user interfaces and user experience? Our number one competitor is Domino’s. 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 Domino’s in a while, but like, when you if anyone has tried to try it just ordered Domino’s, for the kids. See, this is pretty cool. You ordered Domino’s on the website, and there’s a Domino’s 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 some extra money if he gets in the car earlier, right? That’s my user experience for $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 Domino’s is our competitor because people a $10 pizza has an amazing user experience. Right? So what I did was went and looked in the wild instead, what is the user experience when you’re adding names to something Facebook app, Twitter app, you know, and all these other things. So in the Gutenberg,

Victor Ramirez 38:13
the Gutenberg package on the GitHub repo, it’s not well documented, there is an auto Completer. Right. And the default autocomplete er in WordPress, in Gutenberg, if you guys want 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 we did was we with Gutenberg, you can either learn this on the fly, by the way, it’s not documented. But we disabled the standard app, right. And with the autoprefixer package that is available in Gutenberg, you can make any autocomplete er you want. So what we did was we made an autocomplete or block for the byline. That when you add instead of pinging the internal REST API, and that’s how they get the author’s we pinged an external API, just via fetch, which is a standard es six, again, 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 space they want. And, and even better in Gutenberg because we didn’t expect people to know to do at when they dropped that block, you can do there’s packages to build tooltips. So have you ever like hovered over something in Facebook and it says, like, Hey, do this, if you’re trying to do that, you know, that’s available in Gutenberg. It’s not documented again, but like we said, 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 apt to start searching authors, right. And then the other thing we did was, now that byline block, we also restricted that that autocomplete only works in the byline block. If you try to instantiate or press the Add 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 we had a hackathon recently where all the teams got together. And when we demoed our byline, everyone’s like, well, we’re stealing that like, and I was like, 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 API’s? How do we, you know, modify? And how do we, and by having standardization were bigger 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 autocomplete? That’s not really I think, appropriate for chart? Do we? what users are have what API’s available to them? If they’re a bankruptcy desk writer, what API’s 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 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,

41:32
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 blog that has an API? And then I mean, it was possible that never ever, ever go in and edit it three years from now or five years from now. But what happens if that block is not available then? Or for charts? Okay. Yep, yep. Okay, so let me so just to repeat the question,

Victor Ramirez 42:02
I was just asked, What do you do with the API is no longer available? Or the API changes? Are things like that? Right? existing content, right? For existing? Written with? Without, but with beer, same with Gutenberg, right? With the API right at the time, but it doesn’t matter, right. So some API’s you have no control over. And some API’s. 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, Oh, we don’t really like the block from the default standard WordPress, we’re gonna build our own. And I said, 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 to 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 changed, we have our keys changed when the site goes down, we want these you know, this. And also the one thing, we’re actually going to 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 base. Because we want the site to be fast, you don’t want 5000 posts. And if someone wants to edit an old post, they have to go into the AR 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 going to 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 GitHub repo, or go for Richard tambores stuff. By the way, if you want to fork anything. Look at Richard tambores code blocks, I still have stuff about him to drink. So if you’re even, but um, you know, or Coca Cola blocks, look at atomic blocks, look at stackable, we go and look at those and we and that and that’s kinda 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 in the API disappears? That stuff that we don’t have to worry about right now and WordPress really, right, because we’re not giving 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? I was gonna question I think we’re Whatever the question was, What am I doing for state management? So we’re just using the standard Redux wrapper. What’s in? Yeah, so we don’t know. 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 10 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, and that’s like, you know, and I apologize anyone who uses this, but like twig press or not deliberately press what is it called timber twig versus someone’s twitter handle timber, right? Or like timber? And like all these like, or like,

Victor Ramirez 45:52
Brett helped me out? What does 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, where they reconfigure WordPress, right. And a lot of people say, you know, you’ll see on advanced WordPress, people will say, Oh, well, like any developers gonna be able to figure that out in 10 hours anyway. Right? Okay, cool. I have 100 developers, and now I have to spend 100 hours or 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, 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 Yost 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 your enemy, I don’t want to deal with that. And it’s like about what, you know, what’s 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, if it’s not going to give you 10 times the ROI. If it’s like a 10% Bump, don’t even 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. Sorry. Cool. Any other questions?

47:40
Next, with this whole group, project, changing widgets, header menu.

Victor Ramirez 47:46
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 has 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 YouTube are you two 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 going to 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 if 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 we think is like personalization. So I really want it were 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 a fatty and eat this or whatever, like fine, but like, I want essentially, like, you know, I don’t like I just like today. Delta said it’s time to check in. I clicked 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 tried to open the app and 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 downloaded 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 you remember, before I was saying, we restrict the autocomplete, or to a certain block, right, I could restrict the autocomplete to a certain user, I could restrict blocks to certain users, I can restrict blocks to certain IPs, I can let 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 into tact and like, you know, I told you in the safe 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 in the news, I could use it to send, you know, data to, you know, my Twitter feed Are any of those things. So that’s really what I’m excited about, just be 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 we’re close for Easter, the block updates, and that person doesn’t have to go into WordPress, right? Because this is like WordPress, it can be complicated. But I just think anything for another person to log into is 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 same time, they have like a time shortcode and your footer automatically updates your site and ever says copyright 2015 Four years later, right? And so little things like that really contextual data? That’s I’m excited about the same thing for like,

Victor Ramirez 51:44
I can’t really talk. There is some really exciting stuff. We’re doing News Corp 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 noticed, 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 in Gutenberg web hooks, you can grab it and say, don’t use that word and have a big alert that says like, whatever. Or you could be a goofball about it and have like, I don’t know, what is that in drastic 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 is limitless. Because what we’re back to the standardization thing, we’re now we’re catching up JavaScript 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 it 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 that answered your question.

53:17
Are you in neutral open for the online websites? Looking at amp stories?

Victor Ramirez 53:24
So that’s not our team? That’s the doubt. So we call that downstream, like the people were 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 in, click a link in Google, it will be a swipeable 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 app 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 Whippets. And what they do is you give them 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 widgets, and all the editor does is they go in and say that phrase makes no sense. Give me another one, the BOC 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 his 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 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, where it’s like, yeah, I think, how do we bring an amp story into Gutenberg? So

55:19
well, Excel up and is working on the plugin ANP stores? The ANP plug in? Yeah. Right now we’re releasing the beta to also have stories

Victor Ramirez 55:32
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, you gotta 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 blockquote and don’t put an attribution, you can’t publish every blockquote must have an attribution. If an image doesn’t have a caption with an attribution you cannot publish. And so those are the kinds 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.