Articles, Blog

WordCamp US 2019 – Room 240 – Friday

November 4, 2019


>>MAURICIO DINARTE: Test test test test test Maceo. MARS yo dinar Tay. Dinar Tay. auricio Dinarte. Dinarte. Behat.
Behat. Welcome to WordCamp US20 2019 ! Is #D Good morning, everyone. How are
you doing today? Good. And so, welcome to WordCamp US
2019. We are very excited tod. I will be the emcee for this
morning in this room. Before we start, I’d like to go
over a few things here. So first is silence your cell
phone or other electronic devices that may make a noise
during the sessions. And if you could move into the center of the row so that others can
get access more easily, that would be great. If you need any help today
during the session, our okay. Yeah, our room manager will be
able to help you. Sorry, I lied. And then, we will not be able to
have Q & A after this presentation or the lightning
sessions. So if you want to talk further with the presenter, they
will be able to meet you at the support desk and sponsor
room down the hall downstairs.
And we want to encourage everyone to join us Sunday for
the contributor day. If you have never been to one and you don’t
know what it’s about, please visit our Get Involved desk in the sponsor
hall, as well, or you can go to the sessions entitled How to Contribute to WordPress.
No experience is needed, and every newcomer is welcome. This is an excellent way to get
to know others. We also have a party tonight at
the City Museum starting at 7:00 p.m.. If you’re going to go
there, please make sure you bring your badge, that’s
required to enter. Don’t forget it. And next, I’m going to introduce
our first speaker presenter today
Mauricio Dinarte. He’s a developer with a passion for
teaching. Over the years, he has presented more than 30 sessions and workshops
at Drupal camps and WordCamps across
America and Europe he is a volunteer in Drupal and
WordPress communities. He truly believes that open
source software communities work together, they’ll have a bigger
impact. Currently, Mauricio is learning
French, he would love to practice with other attendees at
this event. And now, let’s welcome Mauricio.
[ Applause ] MAURICIO DINARTE: Thank you
very much. Good morning, everyone, welcome to WordCamp
US. This session is development behavior-driven development. You
can follow along. My name is Mauricio Dinarte. You can find me online, Twitter,
WordPress.org. I am mostly a developer. But the things I’m going to talk
about are about five different layers. One of the layers and it’s
WordPress or Drupal. It’s mostly the same. I am Nicaragua. It’s known as the land of
volcanos and lakes. We have lakes and volcanos and
volcanos inside lakes and lakes inside volcanos. You can go watch through that
website or in real life. And it is about 90 degrees all
year round. So if you ever need to escape the cold, it’s a good
place. I work with Agaric, working in
Nicaragua, I’m also passionate about teaching. So in this website, English,
Spanish and French. And even though it’s focused on
Drupal, content like, the things we’re going to cover today. You pretty much can apply to
WordPress. I will actually like to thank
Pantheon for the support in being here today, they have a
really nice community outreach program which I invite everyone
to check out. Let’s talk a little bit about
this first. There are many reasons why we
would like to test. What are some objectives? One of the things when you test
and write test, you have a clear definition of what a test is and when you
write a test and that test passes, you know when you’re
done. Sometimes, programming and working writing code just keep
doing it. But if you have a specification and a test that that is a
specification, once the test passes, it’s done, that
suffice. For that specific feature, and it can go to another one, and you can
have very specific scopes into what it is
going to mean. You can also test to verify that, that they have
the vehicle through firms it’s being being processed correctly.
You can test to find bugs before any users or the client. I guess, no one wants to receive
a call from the client, the website’s not working. When you
write text, you’re able to catch those things before pushing code
to production. But testing is sometimes very
hard to sell. How can I convince my client to pay for this? So
let’s talk about the value of testing. For one, for the business, the
time and effort to quality assurance. So instead of having a team of X
amount of people doing testing over and
over every time a new release is going to be pushed out, you can
have automatic tests that will, you know, run in 30
minutes, five minutes, depending how big
your test group is. But the manual process is
reduced, always good to do some testing, but in general, you can
save time. You can also prevent, when
introducing a change, the tests are going to check everything
you have test before. So if something your code
changes somewhere else in the product, it will be able to
catch that. In general, you are able to improve the quality of the product and the
stability of the software that you’re writing.
That’s like for the business, but sometimes developers also about
writing test. . So there are some benefits for
us, as well. For example, testing takes too
long. Scan for it. And it’s long and boring and
it’s also error-broken. prone. Maybe you have a script, you
have a hundred tests, but there are priorities, right? So again, having this suite of
tests that are going to run every time you push code, the environment, for
example, that keeps both to the client,
the priority is, and the developer,
it’s going to save time for them, as well. And in general, we’re not going
to focus on this part of the behavior-driven development. I want to be more pragmatic
today, but in general, we have a way to communicate between client and developers or
stakeholders and the people developing the product. In general, this is a
communication tool. We’re going to have some reference at the end that go more in-depth in
this concept. We said that we’re going to today. The community, regular
communication, the tests are language, we’re
going to see some examples. Many frameworks, multilateral
and more. And if you have continuous integration or
continuous delivery, it integrates very well. This is an example of a test.
We’re going to see something similar later. In general, to have a
context-action-outcome pattern. There will be five features in
the sense of business value. For example, a shopping cart. And the shopping cart feature,
like if to buy products as a customer and to be able to add
items to the shopping cart. So it’s not testing that if I
hit the button, something will happen. It’s tested from the
perspective of a user and providing value to the product. And this, this is an actual test that you could run and can
explain to parse and execute a couple of things, which I’m
going to explain in a moment. Every feature is going to have
one or more scenarios. The scenarios themselves are the
test. So in this case, we only have one test, which is . Given that Wappu costs $10, when
I put this in the shopping cart, I should see the item in the
cart and it should be 10. I am writing test now. In the natural language, it’s
going to be converting this to code that
is going to strike a browser to simulate user interactions on
the website. And that’s what ultimately is going to be
tested. So what are some of the tools? For this test, I’m going to be
using vary ing Vagrants. Just to be clear,
it’s not a hard requirement. This is for in my case, we’re
also going to be useing composer
dependencies. Many that we’re going to depend on. And on the behavior-driven
developing testing side, we have an
extension, and we’re going to explain what each of those are
doing. In terms of package
installation, the recommended way is to use composer. These
are, you know, different packages that we’re going to
install. That means, if you start that
one, which is Behat extension or work, it will install by
default. So you don’t have to do all of
them manually, but I want to be explicit as to, you know, these
are the packages that are required. Some of them have the tendency,
it’s not really necessary to run a
composer require command for each of them, but for you to
know. So Behat tests are like onions,
and if you saw the movie, you might recall that they come in
layers. So the way that this works is that you have at least five layers of
different elements that are going to be interacting together
to write the test. And when I started with Behat, it was very
confusing because maybe you find a tutorial and the tutorial
works. But it has so many things, you
know, interacting at the same time that it’s hard to follow.
So let’s break this down a little bit. The first thing is Gherkin, the
language itself that’s used to write test. Something like you seen on the
screen. I’m on the home page, I should
see a personalized newsfeed. Gherkin has rules. For example, the synthesis sentence is use those to have a
fluent conversation. And that’s mostly Gherkin, just,
like, the definition of how to write test. And on top of that,
we have Behat. And Behat takes care of two
things. We have the steps, which arelike
that Gherkin sentences, given I’m on the home page, that’s the
step. And then we have a step, which
is that code runs behind. So, you know, given I’m on the home page, gets translated by Behat
into this function. I’m on the home page. So the way that we have mashed
up things is by expression. So the function, you have
annotation like given and then the regular expression. If you step much the regular
expression, it is going to connect the two. And execute
this specific function when the steps match. That’s how it
works. And that’s mostly the work of Behat. It is mostly having steps and
step to finishes the steps and
connecting the two. Then, we have Mink. Unified API
control browsers. One thing to notice that Mink
can be used stand alone without Behat. You can use it in the
existing queries just to emulate browser behavior
and controlling the browser. The idea of Mink is that there are
many browsers, as you know. And each of them have different
APIs and different ways of working. So Mink’s, you know, top-level
API that if you follow that, you can swap
from one password to the other without changing your test.
Without changing the code. There are two types of browsers
that Mink can interact with. One is browser emulators. And these are not real browsers,
actually. They implement the specifications so you can actually make a website
or API and photo and do things like that.
So the advantage is they are faster, they can do http headers. But
they cannot execute. One example a to make an API
request, it passes the request, and for example, if you say
after fetching the home page, go to the first element in the menu link, and then it’s just like instructions to parse the
response and go to the next link that was found. So it’s not
really a browser in that sense, so you have the interface
resources. On the other hand, you have browser controllers,
used to simulate user behaviors, like thinking or dragging or
dropping, uploading files and so on. These can execute JavaScript
because they are actually using the browser. They are controlling the Chrome
or whatever you decide to use.
They are a little bit slower, and in theory, they are not supposed to
be able to stick in headers. Why? Remember tests are supposed
to be run in the context of a user. A user doesn’t execute the
headers or code and so on. So most of the P implementations
actually block you from doing that. And this thing is so powerful
that you can even try to think of something and if there’s an
element on top of it, like, a real browser would hide it, it
will let you know that it’s not possible because something else
is going to receive the action. So the idea is to emulate as
close as possible a real user interactive with the browser. So that being said, the driver
is an example of this. This is an implementation that
can connect, first from browsers. And this one correctly hides the
http status codes and headers. Chrome driver is another one
that works specifically with Chrome, in theory, it shouldn’t provide headers or
status codes, but it does. They decided to do it. But it’s not following the API
or the recommendation for Mink. And then we have the Mink
extension, this is an integration layer
between Behat and Mink. And this is what connects both. Among other things, Behat create
will provide you with context steps. I’m on the
home page or given I fill out this foreign element with
value x. Or given I press a button, following, all of these
things are going to be provided by Mink extension. You can also configure yourself
to deal with JavaScript enable tests and JavaScript enabled
browsers. And I think you’re going to be
able to control different browsers in the Mink extension. And then, we also have WordHat,
specifically for WordPress. In a local setup or a remote
server, you can manage comments. By that, I mean for example, you
can create it automatically, activate or deactivate plugins,
switch things, create caches, reMOOUFmove
widgets. Anything the normal user can do in the interface. You are able to do with WordHat
out of the box. As of now, it doesn’t have support for
Gutenberg. So it cannot test Gutenberg with
WordHat yet, but that will be coming in the future, and some
day, we can continue with that. So feel free.
So that’s the general idea. Let’s do a light demo, and of
course, nothing can go wrong. Those are the two demos that I’m
going to be using. So for saving some time, I have
already downloaded dependencies, you know, internet might be slow
or, great, so I did that already. I basically, the extension,
that’s it. So how do I start writing the
test? When I installed the
dependencies in my, this is using composer, for my
dependencies, I will have — oh, excuse me. A vendor bin Behat executable. And if I see that, I can have
regular, yeah, Behat is there. But something’s missing. So the very first thing that we
need to do is that you need to initialize Behat. And you do that by passing a
flag, dash dash. When you do that, what’s it’s going to do, it’s going to create
twofolders and one file. So the folder, Behat is going to look into the features directly
created automatically initialize a test in that folder. Tests are
going to be executed later. So if I come back to the previous
comment, now that I have initialized Behat, it doesn’t
give me an error because it found the context I was looking for, but it didn’t find
any test so far. So let’s start writing test. I have something prepared
already. So I’m going to pull it over. So for context, the example is
about going to Wikipedia and trying to look for something.
And then, we’re going to have an example specific to WordPress.
But I wanted to show that all of these tools can be used
independently of while we’re testing, the tools to test
website. So this is a test. Very similar to the one before. This is going to be ignored by
Behat. The area, this is what is going to be tested. So given, especially if I’m
going to be testing, on the home page of Wikipedia, when I fill the search field with
pantheon, I should see something on the screen. Let’s see how
that works. If I execute this again, I have
a problem. It says that you have steps that
do not have corresponding steps to finish. One thing is that Behat can
actually guide you through the process of writing the test and
writing the code. In this case, we detected there are so many steps, the definition, if I
click, one here, actually give me some
code that I can copy/paste into one of the files that were created before.
But let’s say I don’t want to do this, I want to save some
time. One thing I can do is to tell , to tell Behat that I want to
use some of the context and steps that are provided by Mink.
So I can Behat. file, I can create. In addition
to that, I want to use the ones provided by Mink. And this is what I configured. This is going to be the URL,
Wikipedia, this is how I configured with the driver, and
that’s it. And by doing that, I run the
test, again, and it actually works. So even though it’s not pretty
beautiful, it went to the Wikipedia website and started interacting with the sign just
to show what it would look like. This is what it did. So one very important thing to
notice that this browser actually
follow regular, if you notice the Wikipedia domain, I didn’t
include anything after the extension of the domain. But when you go to the actual
website, you get Wiki. You need to be
careful. Simulate the behavior, and this
is what you actually see the domain. So if you actually try
to test for a specific URLs, make sure or
remember that they are being followed. Here the test is, like,
Pantheon, and then I come to a page. That has some — this one. I come to a page, and it has
some text. And that’s what I’m testing here. Let’s see. Now. Where did
this come from? Again, this comes from the Mink extension. And if I go to the it, in this ID, I can click
on it, and it gives me the step definitions. These are the
possible, regular expressions that this is going to match. Like I fill in and so on, and
you can have a look at that. And this has the HP code under
it. If you want to know what are all of the possible options you have
available, command dash dl, and this is
what comes out of the box. So all of the options on the home
page, loaded page, forward, back ward, fill-in, check, uncheck,
and so on, this is provided by the intention. That’s why I said you don’t have
to write things manually. It already provides a lot of things
for you. Now, let’s see if I want to
execute JavaScript enable this, how do I do that? In this KMAMPL example, I’m
going to use the Chrome, because it is
simpler. The browser window here. And now, if I go to the website
and going to — okay. So this is another example. The only thing you need to do to specific error script,
one is test. And in addition to that, you need to have another Behat
configuration. Where you actually add more
things, you know, in this case, I want to have a
JavaScript-enabled browser. Which is defined here. And that
browser is going to be Chrome. And it’s going to be connecting
to the Chrome driver , Behat and Chrome itself, and
in that port, that could manually run before. It’s just
like open in Chrome in the mode and that specific org. And
when I do that, I execute Behat, again, the first test, that was
pretty fast. But the first test, because it doesn’t have the JavaScript annotation,
it’ll execute as a normal test. Using the command line
interaction. But the other one, the one thing we notice is it is really fast. And
there are some things missing there. Okay. Now, I’m going to switch just to
show an example. This is using WordHat, which is
the extension specifically for WordPress. It comes with example
configuration file that I just basically
copied to my site. It has to be in the directory. In this case, it has way, way
more things available. The important parts are I have
the main station from Behat here. I have the different examples
from Wordhat available. I have my
Chrome extension, which is again, going to be used to
connect to Chrome. It is a lot of site using. You
need to define that path if you want to use wpcli, provide your
user name and password. If you want to be able to interact with
the website, you know, like logging in and logging out by doing that. It is configured, but if I just
execute the command, it’s going to open the browser window is
going to log into the website and it’s going to check for
something. Again, as you can see, it’s
pretty fast, it’s something that we want. We want the test to be
fast. And it’s going to report whether
it succeeded, or not. Just to have a sense of what the test is, in this case, I want to be
able to log into the site and check I have some permissions
and access to some specific websites, excuse me, menus and
actions. So in this case, I have
JavaScript, it is JavaScript-enabled. It doesn’t have to run
JavaScript test perfectly, but it can use it if
you need it. In this case, I have a
background, if I were to have many scenarios, the background is going to run
before any of them. So this is to have a common task
if you want to execute all the time. So I’m going to the dashboard,
and then you can establish the user
and so on. In this case, I’m going to
delete it. And if I want to actually see that code, this is coming from the
Behat extension, actually. One thing to notice is you are
not forced to run Chrome in, you know, UI mode. If you have a
server, you might not have a browser you need to actually
see. Another option is to just run it
in headless mode. I’m going to do it now. This is running
Chrome headless mode. I execute the test, again. And it works. Depending on your setup, that’s
how you do it. One final thing before, about
this. If you decide to run Chrome in UI mode, you need to close all the other
Chrome windows that you might have
opened or it will fail. This is something I recommend before actually starting Chrome in the
mode. And if I apply to this, this is going to open a second
window. But for some reason, if I run
the test, it fails. And it fails in that it cannot
connect to the remote. The thing to remember is if you are
running UI mode, you need to close any window before running.
If you’re using headless mode, additionally for that, it will
just work. And one last thing just to give
an idea of how, like, actual
JavaScript test looks like, we can plan on
your implementation. In this case, this is how the JavaScript test from Wikipedia
that is supposed to complete. JavaScript is basically this
line. You start instruct the browser
to wait. And you say, how long you want to wait for? One second
in this case is expressed in milliseconds. And this is
JavaScript especially that you want to test. And you need to know specific
implementation in Wikipedia, J query is available and why can
use it in my expression here. If it wasn’t the case, I couldn’t
do it. Another thing with Wikipedia,
using it to complete, you get
suggestion that has, you know, and you are
checking for that. And one of the other things you can do is, KPREX for example, checking
the API’s completed. That will require JavaScript, as well. So you will write the JavaScript
expression that will happen here.
And another thing is that, again, knowing the
implementation is required because Wikipedia and, for
example, in Drupal and other applications to complete are bound to key up and
key down events, not to key presses. If you instruct Behat to do a
key press, it will do that. You will see on the browser, but it actually JavaScript that will
really show that complete. This is very dependent on your
implementation. Another example of this might be
you can test with Behat. You might be actually entering
test and foreign elements, but the
reactive state is not being updated. Always test before
sending them to production. But Behat is, basically, that. You have the steps that are step
definition, the HP function, you have the extension that is going
to provide you a lot of steps out of the box, and the WordHat extension that is
going to provide specific steps for WordPress. And then,
depending on how you want to run your test, you can use the
Chrome driver. One advantage is that you can
run tests remotely, like in a different
server completely. Another benefit that you can run tests two or three at a time. And you can use different
browsers, FireFox and Chrome at the same time. But there’s a big
drawback. If you want to use the driver,
you need to have the server running. That means, you need to have
Java in your stuff. And sometimes, adding a new language
to your product is, there might be some requirements or some
politics around that that doesn’t allow you to add a
language just to use one specific tool. So very powerful, but if you’re
not able to do that, the Chrome driver, using Chrome is also a
good alternative . One thing integrate custom steps.
For example, instead of having something creepy, like when I
fill in “give first” with “Andrew,” you could actually
write the step that is more meaningful. When I say definition , you are not only able to use
the steps out of the box, you’re able to write your own steps. So they are, they convey a
better context and meaning about what you’re testing. And these are some references,
slides, videos I used to, you know, to document the text. Official documentation. The Behat implementation can be
read in three hours. And if you read that, you will have a very
good understanding of how the whole system works. So I highly
recommend doing that. And check out the WordHat
documentation, as well, that’s going to save you a lot of time
doing WordPress’s specific tests.
Thank you very much. [ Applause ] Thank you, Mauricio, and now you
can meet with whoever wants to discuss further on this topic.
We will start, again, in nine minutes at 10:00 a.m.. So I need some help to set up
the laptop. coming. WOIKD . WART. ikipedia. WordHat. WJT. idget. NANCY YU: Welcome, again. If people could move to the
front rows a bit, that would be great. This is our lightning session. People are
coming and going. It’ll be easier access to the
seats. My name is Nancy Yu. Welcome,
again. A couple of things I need to
repeat before introducing the next presenter. Please mute your cell phones or
other electronic devices that may make a noise. And then, we will have Q & A
time as part of the talks but the presenter will meet you at
the support desk in the sponsor hall downstairs.
And please join us in the contributor day on Sunday. And you can go to the Get
Involved table and attend one of the introduction sessions if you
want to know more about what it is for. And we have a party tonight at
City Museum starting at 7:00 p.m.. Please bring your badge so you
can enter. Next, we’re going to introduce
our first lightning talk speaker Jeffrey Paul. Jeff is pronounces gif with a hard G and
always waves good-bye on video chats. He works at Studios Hollywood,
USA Network and so on. The 4.8 release, the 4. 9 release continues to provide
product management for WordPress Core and is a tagged product
maintainer. Let’s welcome Jeffrey.
[ Applause ] JEFFREY PAUL: So if you like me
thought I’m not a developer, how can I realistically contribute
to WordPress? Think, again, anybody can contribute to
WordPress and that includes you. In this lightning talk, I’ll
walk you through a couple of examples of how you can
contribute to teams, like coordinating component teams,
and submitting to WordPress TV. Yes, this talk is more broad
than just the WordPress Core team, it was an easy title to go
with. Stick around. You can find me online at Jeff
Paul on Twitter, WordPress and GitHub. Quick background on me, I work
with 10up with the wonderful people you see there. Management
open source practice, which includes the five folks in the
upper right among contributions from
others across the distributed workforce. Open source practice
demonstrates to open source technology, leading by example
and growing a community of which we’re proud to be a part and
upon whose shoulders we stand. We don’t just contribute to
open source projects like WordPress, but we maintain our
own which are most often inspired by our current needs
and patterns we see across clients and sometimes began as
customer solutions. Kudos to the picture of 10
Uppers there, that was the annual
summit last month at Walt Disney World. I originally talked about this topic, the updated post includes
more precise details as well as updated contact info for me.
Props to for finally giving this talk. Over the next dozen or so
slides, I’ll show you the various WordPress
teams that would love you to join in contributing the
WordPress project. Diversity requirements, means
any user of accessible technology can help by providing
reports on issues in their specific environment. As this increases the breadth of
environments that are tested. Providing screen shots or
recordings of the experience is also helpful. Checking clarity
of documentation is also valuable, it’s hard for subject matter or experts to know when
the documentation includes knowledge that the user doesn’t
have. The WordPress Core component
maintainers, in most cases, developers that would love to
have your help running regular meetings, taking notes,
publishing them and tracking within a roadmap or milestone
releases. You can read through the
different components and reach out on Slack for whichever component is of most
interest to you. They’ll be able to help you understand how you
can best help them. Also, ensuring a move toward
resolution as long as most important things we can work on
in core. Meetings where the goal so to
move them toward a resolution. There are a number of
resolutions for possible resolutions for a
ticket. Resolution might involve pinging a specific person for
information, reviewing a patch, providing feedback, may involve
keyword and almost always should include a summary of a
discussion. This applies to core and core
component teams. Helping to ensure that WordPress regularly
updates the community. And props to Aaron Jordan for details and bugs.
There’s a wire framing, prototyping, visual design to
ensure that the user experience of reading and writing on
WordPress is as seamless and graceful as possible. 34.7% and
growing of websites on the web need you. Core, meta, also known as
WordPress. org are in need of SPOVRT
support. If you find this appealing,
start by joining a design triage session. Look to find something
you can get feedback on and slowly work yourself on issues
and gain ownership of the design area that best meets your
interest and capabilities. Do you enjoy ensuring
documentation is updated and accurate? Check out the
documentation team, read through the Gutenberg help hub documentation, dev migration and
API projects to see what interests you most and follow
along in a docs channel on Slack. There’s always opportunities
for copy writing and copy editing. There are a surplus of
opportunities in both areas and they are great for newer
contributes because they’re areas you can hop in and start
contributing immediately. Marketing is a great opportunity
for less technical and those looking to get a more complete
picture of the various WordPress team’s work. As the marketing team works with
most of the other teams. Props to Mike Reid, Harry
Jackson and Amanda Batool for sharing
ways to contribute to the marketing team. The note track system has a
number of tickets that don’t require
coding. UI issues in particular do well for being producible,
particularly for different browsers, browser versions and
the platforms. You can also contribute by
opening metatrack tickets if you notice any UI/UX accessibility
or SEO issues on WordPress.org property. Translations are also
welcome contributions, via translate.WordPress.org. You can
follow on these topics in a meta channel in Slack. And props to Scott Lalwly for
contributing to the meta team. You can contribute to the mobile
team, they ship a new build every two weeks via Apple test
flight. Regular calls for testing for
both the Android and iOS apps. This also includes testing the
Gutenberg mobile experience versus the desktop experience.
The WordPress mobile apps release notes and store
descriptions are all localized. Translations are updated
every two weeks and managed on translate.WordPress.org. Props
for sharing ways to contribute to the mobile team. Do you SPEEX speak a language
other than English? There are many parts of the WordPress that are not fully translated to
the 190 locales. Start by reading the handbook,
read through the translation process works and start
translating. You can correct or suggest new
translations for the WordPress desktop and mobile experience,
this includes emoji and English pirate that allow you to
experience how WordPress is translated. English is used by less than
half of the installs at 36.4%. This is why everyone should make
sure they’re translatable. Also notable, a 24-hour global
event dedicated to the WordPress ecosystem. You can find more details about
that on WPtranslationday.org. Props here to Nico Capano for sharing ways to contribute to
the polygots team. Do you enjoy having others use WordPress?
Check out the support team. Read the handbook, reread the giving
good support section as you’ll be a face to WordPress users and follow
along in the forums channel in Slack. You can contribute by being
active for your favorite plugin or theme. Props for sharing ways
to contribute to the support team.
Do you enjoy testing software and trying to find
efficiencies? There are many tickets that have untested code
available that would benefit from being tested appropriately,
there are many platforms that WordPress supports that would
benefit from specific detailed testing and issue logging. Dive
into whether it’s with automated testing, beta testing or many
other ways of helping with testing. Read through the
handbook and follow along the core test channel in Slack. You can install the beta testing
plugin to help get involved with beta testing WordPress. It’ll
enable you to upgrade your website to the latest candidate
and for more adventurous, there’s nightlies.
You can install to help get involved with the design ideas
in the WordPress Admin. And you can also install the Gutenberg
plugin to help get involved with testing Gutenberg updates before
a major release. And remember, even something as
simple as a well-defined bug report is a beautiful thing.
There’s no team rep for the testing. If you’re passionate
about this area, let’s chat about helping coordinate teams.
Tide helps WordPress coding standards, starting with PHP
compatibility testing. You can help out the Tide team by taking
actionable notes and publishing them, tracking them against the
road map. Testing the update releases ensuring the local
install functions across platforms and helping to update
documentation or other areas that new contributors can assist
the Tide team. Join them via Tide channel in Slack.
Do you enjoy teaching others how to use WordPress? Check out
the Training team. Read through the handbook and the getting
started guide and follow along in the training channel in
Slack. The training team is in need of
people willing to take notes and post them in the blog, to copy
editless ton plan lesson plans and to write
lesson plans. Props to Julie Cool for
contributing to the team. Do you enjoy production SH check out the WordPress TV team, follow
along on WP channel on Slack. You contribute by reviewing
videos coming from WordCamps, and publishing videos, creating
subtitles for existing videos and promoting WordPress to
contributor days. Props to Pascal for contributing
to the team. Do you enjoy organizeing events?
Official events also known as WordCamps, mentorship programs,
contributor outreach and other ways of growing the community.
These all need help coordinating and we’d love to have your help. Take a look through and review
the active projects to see what interests you most and follow
along on the community team channel in Slack. Props for
shares ways to contribute to the community team.
If you want to learn more this weekend, consider these
additional talks. There’s a talk later this
morning, and learn how to best set up to
contribute for the long run. Joe Casabona is speaking later,
that could easily apply to a local meetup
to get started. This afternoon, there’ll be a
panel discussion in 274 to learn how to host a contributor day or
hackathon or WordPress translation day. Chris is hosting workshops to
help create awareness of WordPress
day, and you can find workshop at 3:15
p.m. and tomorrow at 9:00 a.m.. Keep a look for the I make
WordPress help me buttonsment contributor day is this Sunday
with registration at 9:00 a.m., morning session starts at 10:00
a.m. and the afternoon session starts at 1:30 p.m..
Tomorrow after lunch in room 274, you can learn about
organizing WordCamp and ways to contribute via community events.
And tomorrow, just before the state of the word, you can catch a panel
on organizing WordCamps in room 274.
And for those looking for advice or guidance on managing
your contributions to open source projects, 10Up
released the open source best practices. Contribution at the
open web is one of the guiding values. The creation of our open
source tools like distributor, classify and
press along with commitments to
WordPress, reflect 10up’s commitment. Our latest
contribution is the release of the open source best practices
as a public project on GitHub. These practices are intended for
massive enterprise projects like WordPress itself with hundreds
of contributors and dedicated projects, but rather for smaller
projects and teams. We have vital lessons from
projects of all sizes and basic tenants.
So consider reading through these to see how you might help
along your way of contributing. And thanks for listening. If you
have questions or want to learn more, I’ll be at after the talk. If none of the things seem to
fit you best, don’t worry, you’re unique like the rest of
us in the WordPress community. Please search out for me in
person this weekend. Find me @JeffPaul on Twitter and
GitHub. And work to find a way to advance the WordPress
community. Thank you for contributing to WordPress. Now,
go forth and do good work. [ Applause ] So I’ll introduce our next
presenter Tess Coughlan Allen, welcome.
Tess is a writer who loves creating content to help
business grow. Currently, Tess is a marketing
manager and lives in the UK. Welcome, Tess. May need one more
minute to set up. So, today, I want to talk to you
about how you can use WordPress for good. To inspire change, for
social impact and to help charities and nonprofits in your
local area. So first, I’ll pose a question.
Can one day of work truly make an impact? Could it even change people’s
lives? Well, the short answer is, yes,
and I’ve seen it happen. Do action days are
community-run events where volunteers use their skills to
create new WordPress sites for nonprofits from their local
area. And it can impact thousands of
people. For every do action, there’s a
positive and empowering reaction, and this is the
formula we’ve used for the first do action day in Europe. It was a one-day hackathon in
Bristol, which is in the Southwest of the UK. It took place on the 23rd of
February 2018. We had 40 volunteers involved. We put on three workshops and we
created five new WordPress sites for nonprofits in a single day. Probably the most important
statistic, 30 pizzas, thanks to generous
sponsorship. And we were fueled with coffee all day long.
As you can imagine, it’s a super intense kind of event. So if you haven’t come across a
DAKZ day before, it’s because it’s fairly up and coming
initiative. do_action day before, it’s
because it’s fairly up and coming initiative. When we put
on our do_action day, we were the first in Europe, but there
were others that happened around the rest of the world. A year and a half and many more
of these hackathons are popping up all over the world, which is
important because it means more and more communities are being uplifted using WordPress. I co-organized this do_action
event with Michael from my local community and asked him why he
thought Bristol could be the first to organize a
do_action event in Europe. And he said, we chose to organize
Europe’s first ever do_action event in Bristol because we
wanted to help local charities by using WordPress to improve
their outreach and fund raising. He goes on to talk about
some of the professional and personal links that can be
developed. And he’s concluded by saying, Bristol’s WordPress
community feels proud to have been in the vanguard of
do_action in Europe. Michael and I did not do this
alone. We had the help of 40
volunteers, as I said, which included developers, project
managers, a social media expert. And also, seven representatives
from the nonprofits. And that meant that some of the
nonprofits were able to bring more than one person to get
involved on the day. As I mentioned, we put on three
workshops and the purpose of this was to help ensure that the
nonprofits and charities felt comfortable using WordPress.
They understood what type of content they could create and
why that was important. And then how to amplify the
messages across social media to make the most of their WordPress
site. So what went well?
Well, in short, we created five WordPress sites that were
expertly crafted, accessible, responsive, and negotiated deals
with hosting companies and plugins so that they could
provide their services at no cost to the charities and
nonprofits that we were helping. It was also a really lovely
example of connection between teams, all
motivated to help worthy causes. It didn’t come without its range
of challenges, though. First and foremost, organizing a
do_action day is a big task. It’s bigger than you’re ever
going to imagine even though it’s just a one-day event.
We actually struggled to recruit for a particular
voluntary role, which was content creators. We learned that not all of the
nonprofit representatives were as willing participants as some
of the others. And some of the workshops didn’t
fully benefit the nonprofits. Perhaps, they already had those
skills. So some future solutions for
someone else putting on a do_action day. Firstly, there’s
no harm in recruiting a bigger team. Just having two organizers
is a lot of pressure . I wouldn’t say you should have too
many, but it’s good to spread the load. If you identify that there’s an
area where you can’t recruit for, such as the content
creators, you can reach out to other communities outside of the
WordPress bubble. For example, in Bristol, we
reached out to the digital marketing communities. I would
recommend interviewing the nonprofits face to face because
you have many, many applicants. And you have to choose the
people who are best to deal with that
intense working day. And you could make workshops
encouraged but optional. More challenges. So a single day is not very long
to get all of this work done as you can imagine.
And a do_action day presents a real opportunity for
volunteers to learn new skills and try new things. But given
the fact that it’s a single day, that’s really, really difficult. They’re also needed to be
further accessibility improvements at the end of the
day for some of the websites and some of those negotiated deals
and discounts only lasted for one year. There was a risk of
unexpected charges later. More solutions. You could extend
to a day and a half or two days, it would have been great if we’d
had an afternoon for all of the teams to get together and get to
know each other. The project managers could have shared more
of the project requirements beforehand if there were any
skills gaps, there could have been work done to prepare for
those ahead of time. With more time, we could have
spent more effort on a UX and accessibility review during the
event. And I also recommend full
transparency about those deals and discounts. So the nonprofits only go
premium if it really suits them long-term.
So I’d like to just introduce some of the nonprofits
that we helped to give you a better understanding of the
impact. So firstly, Bristol Disability
and Equality forum is run by deaf and disabled people for
deaf and disabled people. And they wanted a website fully accessible, not only to sight
visitors, site visitors but on the backend, so they could do
whatever they wanted with the site without any blockers.
Hands in the air is a grass roots initiative helping men
with their mental health. And they wanted something that was
clean and really approachable for their target audience. Horfield just celebrated 100
years, so they had tips they needed to share. And that
involved restructuring 70 pages of content. Gympanzies, they had nothing
apart from email. This was a total branding activity and new
logo, total new website. And they wanted to reach out to
potential funders as well as the families they wanted to help. And finally, third sector
solutions who help people with unemployment or people with
service needs and they need to totally rethink how they
presented those services. So what impact did our do_action
day have? Well, I got back in touch with all of the nonprofits a year later, and
I was blown away by the impact that our do_action day had. It
turns out that thousands of people from our local area had
access to the services that the charities offered. And they
would never have known about those services if it wasn’t for
our do_action day. But you don’t have to just take
it from me. Here are two of the
representatives from our nonprofits. equality of some kind. I’d been a qualities consultant
before a physically disabled person myself. If you don’t have
the experience, actually, you have no idea. If you’re not accessible, in
this country alone it’s estimated there’s d it’s around 250 billion
pounds. Looking for more engagement of
people visiting the site. I wanted it to be accessible not
only to people visiting the site, but
ideally at the backend so disabled
volunteers could help. To be perfectly frank, in our situation without the hackathon,
we couldn’t have had a new website. It would have been
financially impossible. All I would say is thanks to
everybody. People are really generous with
their time and effort. And did an
amazing job in the amount of time they had available. I’m Stephanie, I’m the founder
of gympanzies. 84% of children with
disabilities can’t access. It causes trauma for the children
and the families. We’re working towards the UK’s
first for disabled children and people. And until this happens,
we are setting up popups. We had one last
summer, and it was successful. And we have some amazing
feedback with one little 3-year-old boy who had his first
ever laugh. This initiative is amazing. And it’s been incredible for us.
If it hadn’t been for the website, we wouldn’t be able to
do the first popup. And without the first popup, we wouldn’t be
able to continue to do the others. And it’s the difference
of people being able to access our services, or not. Our Running the do_action day really
changed something for me. It gave me the confidence and
ambition to make social impact and change. And I hope that this
has inspired you that you can do the same if you want to. Thank
you very much for listening. [ Applause ] Our next speaker is Alain
Schlesser. And a maintainer of the command
line interface for WordPress and a
contributor as well as a component maintainer. He offers high level consulting,
code reviews and software design
coaching in a number of companies that deal with frequent change and ever
growing. Let’s welcome Alain.
[ Applause ] ALAIN: Thank you. In the summer
of 2019, I started with my first client with WordPress. I
switched careers from government agent to software developer. And I was making extensive usage
of WordPress codex to help solve my
problems with my initial project. What I found was that it was
very fast, very detailed and all, and most
of all, in a lot of places, very bad advice, actually. So I thought so myself, I should
blog about this and maybe share what I find with the other
developers. Then, when I delve deep into the
project, I started to hit bugs in WordPress core. And I’m not
talking about exotic edge cases, it was really very
prominent bugs that hindered me and my progress. And I found out
that the bugs were known, there were patches already available
and they were just waiting to be committed. So that the problem would be
solved. But we were waiting several years already. I thought
to myself, maybe I should contribute to WordPress core to
help fix the bugs faster. Maybe this weight of sliding
into contributions slowly, maybe that’s something that’s known to some
of you. For me, after a while, it was
that I was starting to question my
platform, because WordPress had not been the development tool I
hoped it to be. And I, I thought that there
might be something that would be more productive for me.
And just when I considered switching, I experienced one
thing that continues to keep me within this
space, the WordPress community. So that’s all of you folks. This community is very
passionate. Sorry. This community is very passionate. And an inspiring group of people
that all are in, it’s very
intoxicateing if you get into contact with them first. And I was immediately hooked,
but after a while, I noticed that this
group of very interesting and inspiring
people that for some of them the
community had very bad long-term effect on
them. I witnessed stress, frustration, anxiety, burnout and a lot of
churning in general. And I was wondering how is it
possible that such a seemingly positive environment can have
such a devastating effect on some of its members. What I found out is that, I
believe I believe most of it to be traced back to a root cause
of cost. Everything comes with a cost attached. Though, it might be combined
costs, for example, might be the cost in
energy to operate your body and mind, the cost of opportunity
for not doing something else, the financial cost of
accommodation for attending an event. And all of these costs,
the best way to cover them is using money. Money is the best, the tool
that’s best fit for the job. Because it is easily tradeable
for other resources. And it is some intrinsically
valuable in all of those costs. It is the best way to cover
costs. But most of the open source contributors are not being paid
to contribute. They don’t earn money to cover
their costs. So what is it instead to cover the costs is
time. The time is much scarcer
resource than money. And if you overdo it, you’re spending the
time that is actually meant to go into your health or your
family. The main drive how we overdo
things is our natural tendency for pro
social behavior. This is deeply itly ingrained
with us, we maintain the viability, which is fundamental,
evolutionary mechanism. But the pro social behavior is
also rooted in another principle called reciprocity. It’s the basic principle of
getting something for, giving something
and receiving something back. There’s debate that’s gone on
for a while to find out whether the
human species is can truly be actually
exist. But a lot of researchers agree
that whenever we help someone, we ultimately do it to get
something back in return. That can be a direct benefit
like gratitude or recognition, or it can be more indirect
subconscious reward. Like, for example, helping the
fastest way of escaping an uncomfortable situation. And this means that whether we
decide to help, or not, is just a matter of doing the subconscious cost
benefit annualalyzes. And finding out if I help now, does
the return I get from this outweigh the costs I need to
invest? So wouldn’t that mean that just
on their own people would naturally try to only contribute when the return
they get outweighs the cost they need to invest?
Wouldn’t they automatically stop themselves from overdoing
it and hurting themselves ? Well, things are not that
simple, unfortunately. There’s a lot of factors at play. If you help someone, your brain produces serotonin, which makes
you happier about what you just did and encourages you to keep
on doing it. This can lead to an addiction commonly known as “helper’s
high,” which makes you unable to stop helping
even to your own detriment, always
chasing the next helper’s high. Then, there’s another
psychological effect that lets us constantly compare ourselves
to others. And driving our self-esteem from
social KPETcompetitiveness. If we see
someone contribute more than us, it motivates us to try even
harder and push further. And in a different group, we
always tend to strive for conformity to
adhere to what we perceive as being the social norm within
that group. What’s worse, though, is that if
no expectation is explicitly set to
define this norm what that should be,
then we deduce by observing the behavior of the group. This can lead to volunteers that
have regular day jobs, in their spare time try to match the output of
professional full-time contributors to pay by
companies. Because they, that is what they
perceive to be the norm within Slack, for example, they are unaware
that the majority of volunteers and contributors, they don’t
even show up in Slack for weeks and months on end. All they see is the constant
activity of the core team. So taking all of these
psychological sectors into consideration, it makes it even
more important to talk about sustainability in open source
contributions. Money is the best way we have of
covering our costs. And we need to make sure that we
do our best to keep contributing
sustainably. People need to be aware of the costs involved and
how to contribute without hurting themselves or their
family in the process. We need to stop destigmatizing
the money in open source, and we need to make sure that, we need to make sure that
the overall, the overall community
just takes care of its own
contributors to let them stay safe. We don’t need that we’ve been through. We need a constant, a constant
accumulation of reasonable and sustainable effort. And please, if you see someone
that you think are overdoing it or they’re starting to burn out,
please absolutely do talk to them and address the issue. It is very important that we
have each other’s backs in this. So that we all can stay in it
for the long-term. This can often be a deciding
factor of keeping everyone healthy and also keeping the
project healthy in the long run. Let’s all contribute
responsibly. Thank you. [ Applause ] NANCY YU: Thank you very much,
Alain. The next speaker is Ben
Meredith. Ben has been helping us set up the presenters today.
A little bit about Ben, more about Ben, Ben is a developer with
WordPress . Ben is a graduate of the
University of North Carolina and is a lifelong
North Carolinian if we don’t count
four years of middle Tennessee. Ben is the father of two, and
the husband of one very patient wife. He works full-time for WordPress
where he spends his time wowing customers, cracking jokes and
solving problems. When he is not working, he’s
coparenting and reminiscing about free time to play disk golf and the
guitar. Welcome, Ben, thank you. check. Yeah. Names and details of the
following story have been changed to protect the
definitely not innocent. So Terry’s a developer at a
relatively large agency. And they had a client contact
them to say they wanted to sell an information product on their
website. They didn’t want a full
e-commerce solution, basically a form on the front end that
collected and processed the payment correctly and dumped the
information in the backend so the Admin could come and send
off that information product at a later date or later that day. So Terry set out, made the form,
tested the form, everything seemed to be working. Launch day
comes, and they push everything live, everything’s going great.
Couple of thousand dollars in sales. And they get an email
from the client that’s excited. And to use Terry’s words,
that’s when the bottom fell out of my stomach. This talk is for you if you are
like Terry. If you’ve ever made a technical
mistake and you’ve thought how am I going to get out of this?
How am going to fix this problem? This talk is also for
you if you’ve ever had update anxiety. You know what I’m
talking about? Hovering your cursor over that update button
and you’re, like, I could click it, but I’m not really sure if
things are going to go well. And worse yet, if things don’t
go well when I click it, not 100%
positive I could get back to where I am right now. Show of
hands. Anybody have that update anxiety? Not just me.
This talk is also, I think most fundamentally about folks
who want to stand out. And in the best possible way
when it comes to the value that you add to your team. And I want to be careful here,
I’m not saying the coding value, like, your value as a coder or
anything like that. This talk is not primarily for the coders. In fact, I don’t want you to
become a coder if you don’t want to become a coder. But I want
you to see your value in terms of your specific role right now, how it can be enhanced by
leveling up technical troubleshooting.
The tips and tricks I’m going to share in a moment are
what took me from being guy with a religion degree
and basically no tech know-how a few years ago to being the
senior support technician at Give WP, the
donation platform for WordPress. Again, I’m not trying to
tell you to become like I am and be the
technical support technician. I want you and your role whether
it’s content writer or the finance
person, the marketer, the social media
person to add to your tool belt the skill of technical
troubleshooting, which is not coding.
So I’m not saying that I want you to become a coder. I’m saying, stop using I’m not a
coder as a way to opt out of technical troubleshooting. I run
into that a lot in my day job. People will say, well, I’m not a
coder, so I can’t figure out what’s wrong with my site. And
I’m here today to refute that premise, essentially.
Before I get to the three points of my talk just brief points, I
want to peel back the curtain and tell you a secret about any
developer you see walking the halls or in this room. Any
developer you could give them any amount of expertise or, you
know, success, by whatever metric, all of them, 100% of
them have this one thing in common. And it is that we have
all, if we are developers broken websites in
spectacular ways. Often times publicly and
spectacularly, it’s 100% of the developers walking the halls
here have broken websites so you don’t have the option if you’re
planning on leveling up to not break websites. You’re going to
do it. You’re going to break websites. You do, however, have
the option to not break the live site. And that’s my first kind of
metaSPOINTpoint. Or mega point. You can break sites in a way
that’s not public and embarrassing and that’s using
staging sites or local environments. Staging and
testing environments are not optional. That’s the first thing
you should learn. Local They are a sponsor of this
event, go check them. Local by Flywheel is what I use
every day, it’s so easy to spin up a
local site on your machine to do troubleshooting with. I make copies of the local site,
or live site and put it on my local site. You can also use
staging environments, many of the hosts over in the sponsor area have staging environments
involved. So whatever you do, don’t
troubleshoot on the live site unless it’s down. You know, if
it’s all the way down, sure, troubleshoot away. If it’s not
down, pull it to a staging site, troubleshoot there.
And so, here’s my three points. If you work with me for
very long, you’ll hear me say this, it’s like a mantra of
mine. If I can’t isolate and can’t
replicate it and can’t communicate it, it
can’t be fixed. We’ve got to isolate it, replicate it and
communicate it. So first of those is isolate.
What I mean by isolate is when I go to the mechanic with my car and I
say the thing makes a noise when I’m turning left and braking. It
doesn’t make the noise when I’m going straight and braking. It
doesn’t make the noise when I’m going right and braking or when
I’m just going left and not braking.
It only makes this strange noise when I’m turning left and
I’m braking. And we’ve got to isolate it down to just the
situations that make the problem happen. So if you’re having a
bug or issue in WordPress, it’s almost always a
conflict between one of four things. There’s WordPress core itself,
which is tested daily by thousands of people. It’s pretty
stable. And then, there’s plugins and themes. And then, over or under that
depending on how you want to visualize it is PHP version that
the site is running on. It’s almost one of those four
things that is causing the problem.
And you’ve got to isolate it. And so you’ve heard the
conventional wisdom is have you tried deactivating all plugins?
And that still works. And especially if you’re on a live
site, which you already promised me just now that you were, or not on the
live site, the testing site, that deactivate all of the
plugins. If the problem goes away, reactivate.
I use a plugin called Plugin Detective that simulates the
process for you. It’s cool. Check it out. Another pro tip, a
little bit of an aside, I use WP CLI religiously.
As soon as I pull my site to local, duplicate it using
whatever backup system you’ve got and clone the site locally,
the first thing I do is log in to the site via SSH, Local by
Flywheel makes it easy. Then WPDB export and give it a
name I can remember. Like before I broke it.sql. And
I can get back to the database. Kevin Hoffman, a number of our
team taught me a trick of initializing a git repo locally,
as well, in that environment so that I can, then, roll back
changes to files. Come find me after, I’ll show you the video I
made of this. It’s super cool. Anyways, that’s my pro tip
aside. Use WP CLI, it has saved me
thousands of hours. Once I’m isolate I’ve isolated it, plugin A and
theme B causing a problem together. My next step is to replicate it.
And this is the step that lots of people skip. What you will hear when you
submit a support ticket to the theme or to the plugin is the dreaded developer
speak of it works on my machine, right? It’s working for me. This step is prevents that. What
we do to replicate it, again, using a local tool, I spin up a
fresh install of WordPress all by itself. And then, I add theme A and
plugin B and, you know, PHP version C,
whatever the isolated steps that I had
before on my local site. And then, I pay attention because as I’m going through that
replicating it, I’m thinking my next step is going to be to
communicate this to the developers or to whoever’s
fixing the problem. If it’s an internal team or the plugin or
theme shop. And so, the communicate step is honestly what takes you, can
take you from being good troubleshooter
to expert level. And that’s where you give the developers no way to respond
with it works on my machine. You line it out for them. Give them
specific steps. Give them a database backup of
your local site and say I’ve got this. I use screen cast all the
time. They can see as I’m going through how I’ve set up things. Once I isolate it, then I can
replicate it. And once I replicate it, I’ve got to
communicate it to the developers. You become the high five person.
The developers will come in the room, you gave any the exact
steps to give me exactly where I need to be to replicate this
problem. Whatever happened to old Terry?
Well, Terry forgot to put the email on the form that collected the
payment. So it was collecting thousands
of dollars in payments quite effectively. But there was no way to email
out to the users saying that we’ve, you
know, here’s your product. Worse yet, there’s no way to
communicate they can’t communicate it. So now they’ve got a thousand
dollars or so they need to refund and do that. And you
might be thinking to yourself, Ben, that’s not a technical
troubleshooting problem, right? That’s human error. Terry forgot
to put the email on the form. That brings me to my final
point, really. And that’s the all bugs, all
incompatibilities, all the fatal errors that wipe out your screen
and get that site experiencing technical difficulties screen.
All of those are human error. What it is is your theme
developer and the plugin developer from the, let’s say you’ve got ten plugins, there’s
a near zero percent chance that all of the developers involved
and all ten of those plugins and that theme have all tested their
stuff together. It’s just functionally
impossible for plugin developers to test all of the plugins out
there. And so, again, with just ten
plugins, it’s a near 0% chance. And it’s a human error. Yeah, it
looks like a parse error online 233, but it’s actually
just the, these two developers didn’t test in this environment.
And in this way. And in order to become, to level
up your technical troubleshooting, you don’t have
to be a developer, you have to be a human who has made
errors. So that you can replicate that error for the
developers. And that’s what makes them so excited is you give them a user
perspective or a noncoder perspective to be able
to see how to replicate the problems. And so, I obviously don’t have
time to dig really deep into all of those steps and how we do it. So Give WP, we put together a
resource and it’s designed to be this
overwhelmingly large document for you to reference on how to
isolate, replicate and communicate issues.
And over time, I’m hoping to add more deep dive type content
like the WP CLI bit and git repository. But that, you can find here.
It’s Benlikes.us. wc2019 will also take you to
that document. I’d love to commit afterwards,
I’ll be in the WP sponsor booth area. My name is Ben Meredith, I’m the
senior support technician at Give WP, and thanks so much. [ Applause ] Our next speaker is the David
Wolfpaw, and David is a professional developer focusing
on WordPress theme and development. He provides ongoing support and educating users through his
service. He also organized WordPress P Orlando. I appreciated your talk. I’m
going to take this off, actually. Just want to make sure I use the
same back and forth. Cool. Sorry. Morning, everybody. Should I be waiting to get
started until 11:00? Or? Should I — five minutes, what can we talk
about for five minutes? Actually, I want to do a quick
pitch before Ol Ali leaves the room,
and they invited me to help them out this afternoon at 1:00 p.m.. It’s creating a welcoming and
diverse space at your events. So if you want to — if you
organize events and you want to get more diverse people there, involved in your
group, join us at 1:00 p.m.. In one of the workshop rooms.
Looking forward to that. And now I’ll do a dance. Here, I have two pitches for
you. First, go to the workshop, and
second, the URL, if it is readable OVM. io/cool-css. I cut about
two-thirds of this talk out to make it a lightning talk. All of
the original slides are at the URL, you can get bonus
information. This is awesome being able
to speak at WordCamp US and have a large group of people in the
room. But now I feel awkward sitting
here. I need to do something else. Who thinks they traveled
the furthest? I came from Orlando? Where did you come
from? Baltimore? Ohio. I bet some people came from
further. Sarasota, I came further than you, I think.
Orlando’s further than Sarasota. Netherlands, okay, anyone
further than The Netherlands? Serbia,
well, thank you for coming. My sister’s in Serbia right now,
actually. css? take. Can you teach me
afterward? Okay. Cool. Well, again, thank you everybody
for coming. My concern about doing a talk like this is that a
lot of the room can either be, I know everything you’re about to
cover, I know nothing you’re about to cover and have never
used an editor. So my hope is that each person here can learn
one thing. Out of the ten things I’m going to show you, if you
learn one new thing, that’s a win in my book. I’m Dave Wolfpaw, I came from
Orlando, Florida. I’m going to talk about cool things with c
CSS. I’m a developer for a living and I spend most of my
time writing PHP and JavaScript. There’s a lot of great things
you can do. But CSS gets underutilized as a
language of its own. There are a loot of lot of
amazing things you can do. You can redesign the site. It makes it easy to help end
users who I can say go to the customizer, add code to this
additional area that your sites are going to have. I can also start teaching people
a little bit about how the web works in a way that’s more accessible. I wanted to get started with
teaching PHP. We have to find a site to work
on. If I want to use JavaScript, we have to have a environment
created. It’s not quite as easy as
pulling up the browser debugger and showing somebody, you know,
here’s exactly the bit of code that is making this text, this
link underlined in blue and bolded. Things like that. It’s a good way to onboard
people into the idea they can change things on their own
websites. So first, I want to make an
assumption that everything that I’m going to talk about is going
to cover at least 95% of your users. If you’re use ing it, you know, and if you’re
using below 9, some of these things
might not apply to you. But everything here covers pretty
much everyone else. Actually, a lot of these are good on IE, as
well. I’m going to cover a few different things. The first two
I’m going to talk about are pseudo elements and pseudo
classes. A lot of people use them interchangeably. And I
wanted to first show some examples of each and talk about
what makes them different. A pseudo element is going to
create something that doesn’t already exist in your document.
So that’s going to include things like your before and
after to add new pieces of content as well as
things that will affect existing content but
target in a new way, such as the first line element or the, sorry,
pseudoelement or the selection pseudo element. A pseudo class,
meanwhile, changes the display of an element that already
exists. That’s when we look at the focus or hover links or when
we see if a checkbox or radio button has been
checked, or not. We can also target individual
elements and say, is this the only one of this type? Or the
first one of this type? Or the last one? There’s a lot of
pseudo classes that let you target existing elements and
pseudo elements will create new elements. So first, before and
after. These are probably the most common pseudo elements that
a lot of sites use for a variety of reasons such as
fixing, clearing elements to ensure they
break well. I’m going to use examples, by
the way screen shots of things I took on my own site. So first, I
have comments on my slight. And I wanted to make them look like
little speech bubbles. So one of the things I did was
used the before pseudo element to create a little triangle on
the side of the comment to make it look more like a speech
bubble. So the code here is simply
applying a, is creating a new element, applying a border to
that element, and then, changing the positioning of this
it it. I’m saying position this and put it in a certain area. The specific code isn’t quite as important as the idea that I am
taking something that didn’t exist and
attaching it to something that does exist. In this case, the
comment body. And then, as a bonus, I also am targeting
comments that are by the author of the post and making them look
a little bit darker. So that someone can quickly scan
something. I’m also going to be talking
about one of the, one of the selectors here, the content
property. But I’ll get to that a little bit later. Now, as opposed to a pseudo
element. Let’s look at a pseudo class.
If you have installed Gutenberg on your site before it
was part of WordPress or if you were just looking at the demo
Gutenberg post, you have probably seen this. The welcome
to the Gutenberg editor post, right? It has all of the
different blocks that are available to view. Now, by default, the align full element has a margin on the top
and bottom and then, a calculated with to get it to
center and take up the full width of the screen. That works well, but there’s
this big white area here between the post metadata and the start of that
post. I didn’t like there was a little bit of spacing that’s
there that didn’t use elements. I am saying if it is the block
cover block and if it is the first child. Meaning, if it’s
the first element within that page, the first
page, excuse me, then it’s going to have a margin top of zero.
I’m going to compare these two here. So this is a minor change, but
it’s something that I can do to say
only when it’s this type of block. It doesn’t apply to things like
paragraphs, images, other elements. To make it not have the top
margin and look like other elements. A minor change that
allows it to affect any post without me having to go in and
edit custom CSS for it. Similarly, I have comments on my website and I do like the fact
that there are spaces between paragraphs. But it doesn’t really look so
great in a comment. There’s that extra space on the bottom, that
speech bubble doesn’t look that great. And a similar model, I was able
to target the comment content class, that is the tech text within the
comment. And I just said if it is a
paragraph that is the last paragraph in the comment, then
remove that bottom margin. So I’ll jump back and see. It’s not
a major change. But these are the kind of things that just
tighten up the design a little bit and make it look a little
better but not require somebody to have to, you know, find any hackie workarounds to
do. Now, we’re going to move
into ones that are a little bit more complicated. By that, I mean tagging on a few
other pseudoclasses with others. With the not element, what we’re
going to do is target elements that are not of a specific type. So in this case, again, I’m
using my comments because this was a great place to pull screen
shots from in my opinion, the design things I did. I wanted to
have a little visual element here that would connect a
comment and a reply comment. So I have this little dashed line
here that will connect to when somebody is replying to somebody
else. And the way I did that was to
use that after pseudo class since I’m already using the
before pseudo class to create the triangle here. I used the
after pseudo class, created a dashed border. But very specifically, I made
sure that it was on comments that have
children as long as the child is not the
last child. So very specifically targeting,
if it is a comment that has a child
comment, but that comment right there does not have a child of
its own. Otherwise, I would have a dashed line going down the
side here that doesn’t connect anything else.
So you can write a little bit of code that you say apply
in all of these cases but don’t apply it in these other very
specific cases. It does look a little bit. A little bit more
cluttered here where I’m saying we want to get a comment as long
as it’s not the last comment, the last child and as long as it
is targeting the after pseudo element. But it’s a good way to
be very specific without having to write a lot of workaround
code. ORMG Originally, a special
comment walker that was very challenging to update and didn’t
work with WordPress plugins that depended on default comments
being in place. So now let’s look at a couple of
properties. I did mention that we used the
content property, excuse me. And I’m just going to go back really
quick and take a look at these before and after. You’ll notice
that I have on all of these content and then just two
quotes. You know, I’m just saying that the content area is
going to be blank. So if it’s going to be blank,
why did I put it there in the first place? The reason being
that the pseudo elements are not going to take up any space. They
aren’t going to be added to the dom, the HTML document, unless
they have content in them to make them display on the page.
It’s kind of a hackie workaround, but we use it for
pretty much every pseudo element to have a blank content area.
But you can also use that content area to put specific bits of
content in. As an example, when I’m writing
a blog post, I’m going to have a list of categories that I have
attached to this post. This post here, we have the category of WordPress, CSS, code, tutorials.
That looks okay. But it could be hard to figure out where one
category ends, where another one begins if, you know, I had a
category that had multiple words to it.
So we have a quick fix. We’re going to take a look at
all of the list items and add the
pseudo element of after. And then, we’re going to add some
content there. A comma and a space that way there is some
separation there. Does anyone see any issues with
this code? I’ve written it. Yeah. There’s that last hanging
comma at the end of it. So by the way, we could do this with
PHP and use the categories list function that’s built into
WordPress that is already pulling these categories.
Let’s say I don’t have the ability to easily do that. A way to edit PHP files on the
site, I don’t want to create a child theme to add minor edits
like this. I don’t want to affect the other theme. I can use CCSS to achieve a
similar thing. So you’ve identified it has an issue. How
about anyone know what the fix is going to be? Yeah? Use not,
again. Chain them all together. Now, I’m going to say the
same thing, it’s going to be a list item as long as it’s not
the last child. And there we go. We have our comma and our space
without having to worry about having that trailing comma at
the end. Just a minor change between the two. But it’s also a
problem for us without having to touch any PHP.
This one is one of my favorites. Someone over here
asked me what my favorite property was. I would say object fit because
it has improved a lot of what I do in terms of displaying
pictures that keep a specific ratio and take up a certain
space without having anything look
really weird. Let’s say you are somebody who, you know, like myself, getting up on
stage here is a little bit narcissistic and you decide that
you want a gallery of photos of yourself. That was like the easiest thing
I could find. You know, this looks fine. This is just a WordPress default gallery with four columns and a
I I set a specific width and height. Some of the elements
here are squished or stretched out in a weird way. By the way,
I think most all of these are from WordCamp US last year.
They’re squished up. That’s a problem. So one way to solve this would
be to use the object fit property and say contain. I want them to be that width and
height. But I also don’t want them to get their perspective
destroyed. So that looks better, too. But
now we have some that don’t keep that same shape, which is what I
originally wanted. I wanted them to look good in a block gallery
L together. together. We can use cover. Now
I have objects all the same width and height but also keep
their proper perspective. So you will have some, you know, cut
off a little bit. Some people might be missing on the side of
these photos here. I think my head’s cut off at the top of
this one. It has the proper perspective
and looks better than if I had them all squished up.
The reason I like this element, you don’t have to use a
hackie workaround with a background size property
anymore. That means, you can have an image that keeps a certain ratio or video,
if you want to have a full screen video
that doesn’t have to be put into a
background element which means that you can
still have your alt text on it and have some accessibility and SEO wins. You
don’t have to rewrite code, you don’t have to take one of the
blocks in the WordPress or page builder of choice and modify the
HTML to make it work, you know, you’re just using an image and
adding one piece of CSS. And I consider something like that a
win where you don’t have to do a lot of hackie workarounds to get
the thing that you want. Just one property, object fit,
cover. There’s also another great one
that I have started to use a lot more frequently, background
origin. So the idea here is that when I do want to use a
background element, for instance, this one’s going to be
maybe more challenging doing with a PDF. I originally had an
animation here. So I have a background image
here of line, the code here is just a
linear gradient. It’s all in CSS making line to make it look like
a sheet of paper. So this can be good if you have specific
control over the size of everything on the page. But you
never had that. You’re going to be looking on different screen
sizes. People are going to be zooming in or zooming out to
read your text better. And that would mess up your background
element. With something like background origin, you can control how the content
scales with the background. Or excuse me, how the background
scales with the content. So in the case here, and I have
it highlighted. What I changed between the two
images was just the padding on this element. And since I’m
using the background origin of content box, I’m telling it to only change the background based
on the content within this element, not compared to the
full element size itself. So this here and this here are
both using a background that is
scaled to fit the tech sets in there without having to create a
new background each time or force the text to be a certain
size or force it to be padded in a certain way.
I had to change the text size, it would work the same
way. And then, my final thing to
cover is animation. And this is also one that works a lot better with an actual, you know,
animation gif on the screen. But animations can be done with CSS
only now. Well, for a while, but it’s getting a lot better. To make an animation, you use
the animation property, you set up key frames. So in this case, I have two
going on and apologies, that’s not actually animated here. But
I have to make it look like a typewriter typing the words out
here. I made an animation of typing,
and I’m simply saying to take this box that the text is in, in
this case, it says WP y’all, stretching it out from a
zero width to 100% width so it looks
like the text is appearing a little bit at the time. There
should be a blinking carrot animation, which is a single
pixel border element that I say to
take this and make it transparent. And then at P 50 50% of the
animation, make it orange. Half way through one frame, take it from blank to, sorry,
transparent to orange. Sorry. And I think, thankfully,
that’s it. Thank you for having me. [ Applause ] So next speaker is Steve Persch,
and Steve is the technical marketing
manager. He started his web development
career in WordPress and Drupal. From there, he went on to work
at agencies and took on the rep
team leveling out the work flows. Steph STEVE PERSCH: Test test, test. I
think we’re right on time. Well, welcome everyone to the
hierarchy of needs for high-performing websites. My name is Steve Persch.
Pantheon is for WordPress and Drupal teams. And it’s the team
message that’s the heart of my presentation here today. Web ops as we see it is a team
sport. The practices you engage in to build, maintain, optimize
a website to climb the hierarchy of needs are best done together
as a group. I’m borrowing here, obviously, this hierarchy of needs idea from
Abraham Maslow. He said that we human beings, we tend to
organize our needs into a hierarchy. At the base, we have
physiological and safety needs. We all need food, water, warmth,
shelter, physical, emotional safety.
If we don’t have that, it’s hard for us to focus on anything
else. We can ask, where do we belong? And do we feel good about those
places that we fit in? Do we get a sense of self-esteem? And at the top, we have
self-actualization. Are we reaching full potential as human
beings? I think we can translate these
layers fairly cleanly to the needs of a website. At the base of the hierarchy of
needs, we have servers, without servers and abstraction thereof, getting a
steady diet of electricity or bandwidth, you’re not going to
have a website at all. Then we can ask, is our website stable?
Can we safely make changes to our website without bringing
it down? Are we going to get hacked in the next week? Is our website going to crash if
we get a good traffic spike? And is our website in compliance
with things like accessibility and privacy laws and
regulations? Are we in compliance with our
institution’s branding guidelines. Does the look and
feel comply with the things it needs to? Once we know our site
isn’t broken, it isn’t wrong, we can ask, is this website
actually any good? Is it of quality? And does that quality
build towards conversions? Different websites build towards
different things. You may want more page views, more newsletter signups, more
e-commerce checkouts. Everyone on the web team should be forced
toward that top level. This hierarchy of technology isn’t
really a hierarchy of people. A web team should be a
cross-functional team. Each person in their own
technological area, perhaps, but everyone focused towards the
top. To P To illustrate that point,
I’m going to spend the bulk of the time talking about
hypothetical cross dysfunctional team, let’s say, at fictional
demo university. Let’s imagine just last week,
fictional demo university finally got Gutenberg out the
door. Like so many web projects, it
had a little bit of scope creep or a lot. More of a redesign
component to it. No one on the web team is entirely satisfied
with how things turned out. They’ve all retreated to their
own corners and the last week, their own comfort zones.
That is until today. A new coworker arrives. This is Atusoosa. She’s the
brand new director of alumni, she’s settling into her office
here, pulls out her personal Microsoft Surface, she hasn’t
even gotten her work laptop issued by IT yet.
She’s got big ideas for what she can do. She wants to throw
homecoming football game parties with alumni, maybe
regional events. She hears a knock on the door. She’s got the big ideas, the
post-it notes, the president cuts her off. He says, actually, I came from a
meeting of the board of trustees, they want you to
double the number of donations coming from alumni, don’t do
anything until you get that done. President leaves, Atoosa is a
bit deflated, she can focus on the website. She pulls up the
website, it looks good, it’s fine, it’s fast. But something
is missing. Every other university website she looks at
has give or giving or donate in the header menu. And for some
reason, demo university does not. So yes, Atoosa has a problem
here, the ebb with scythe doesn’t generate
enough web site doesn’t generate enough
donations. The person who controls that
global header menu is Sarah, the director of communications. Sarah here is in her own office
down the hall. She’s sitting at her desk, on
her desk, she’s got the family portrait, it’s herself, her
husband, both sets of parents, their kids, everyone’s wearing demo university sweatshirts.
After the Gutenberg relaunch, some pages are feeling like a
bit of a mess, others are too templated. She’s got to figure
that. But then Atoosa walks in and
gets down to business. Can we add this menu item asks
Atoosa? Sarah’s a bit surprised, we just met and we launched a new look and
feel. She says, isn’t it bad to leave
this out? A rival sample university puts
“give” in the header menu. Sarah says, you’re right, but if we
add one more thing, it’ll do that thing where you’ve got the
one line of links, and now you’ve got two lines of links,
it looks broken, it looks weird. Sarah is now the one with the
problem. Adding one more link is going to break the design.
So we will need to go to the designer. Stacy here designer ater at Demo
University, she is not at her desk. She’s in the university coffee
shop sketching out updates to Gutenberg blocks, pen and paper. She likes to avoid looking at
screens before 10:00 a.m. if possible. Sarah walks in, Stacy frowns.
Can we just add one more header link? Let’s make the font
smaller. Stacy says, no, we’ve done that
twice already, not going to do it, again, but Sarah says, we
need to increase donations. Stacy reluctantly pulls out her
laptop, she wants to engage as minimally as possible, moves the
tab key, but the header menu is trapping the focus. The keyboard is not accessible
with this header menu. They can get sued over this. It’s a
bigger problem that Stacy now has.
The solution to the problem should be pretty simple. This is
an HTML template somewhere within WordPress. Let’s find the frontend
developer who can fix this. Jeremy, here at Demo University
is at the standing desk in his office, or rather his open
office, cubical situation here. He’s got the Macbook Air open. All of the cool stickers, graph
QL, he doesn’t have a WordPress sticker on the laptop, that’s
okay. He’s typing away in the VS code here. He’s working on a
style guide outside of WordPress in order to get these Gutenberg
components into order. So it’s deep work, deep focus,
coder Nirvana until Stacy walks in. Jeremy takes off the Bose noise
cancelling headphones. Jeremy’s like okay, I’ll investigate, he
signs in to the WordPress site for the first time in a week and
there’s good news. An update is available for the
plugin that provides the header menu and it has an accessibility
fix. Bad news, there are a bunch of
other plugins that are also out of date. And they are security updates.
Stacy doesn’t see the problem, it’s WordPress, updates the
stuff. What’s the problem? Jeremy’s like, I don’t touch
those parts of WordPress. So now he is the one with the problem.
This site he’s working on could get hacked. The solution should
be sitting here in the cubical next to him. But Nikita is not at his
cubical. He’s wanted silence. He’s in the old university
library, sitting at a 100-year-old oak table, he’s neck deep in tests, hunched
over the Macbook Pro, watching going
in and out of the Gutenberg points, and
it makes sense. He gets Gutenberg now. He’s so happy. So why is his co-worker Jeremy
doing an angry speed walk across the cold marble flow of the
university library starting into library anger whisper
shouts. And Nikita is actually, I don’t think those
vulnerabilities matter for us, I read the thing, it only matters
if you have a certain configuration, certain file
permissions. And Jeremy’s like how can you
possibly be certain? Shouldn’t we update anyway? And he’s like, yeah, I ran them
locally, it’s fine, but our staging server is down. Jeremy rolls his eyes, walks
away. He’s not mad, he’s just disappointed. Well, he’s also mad and now
Nikita is the problem, the site could get hacked but the staging
server is broken. So to fix it, we will need to talk with
Michelle, the systems administrator here at Demo
University. Michelle is sitting one mile away of the second
floor of the IT/maintenance and facility. She’s setting her
coffee down to a brand new Dell laptop. He’s huffing and
puffing, run a mile across campus, the staging site is
down. Michelle doesn’t look away from the Dell laptop, she says,
I know. [ Laughter ]
Nikita asks, do you know why? No, I’ll get to it as soon as I
finish setting up this new laptop for the director of
alumni giving. Nikita collapses and Michelle has the problem,
the new laptop isn’t fully configured but I bet this new
hire could probably finish it. Sure, yeah, here’s your new
laptop, let me know if you need any other software says
Michelle. Atoosa is sitting amongst her
crumpled post-it notes depressed. Says, hey, can you
help me make a website? Michelle is a savvy bureaucratic
operator. She’s heard requests like this before.
She knows she needs to sound helpful but not actually be
helpful. [ Laughter ] So sure, do you want boon 2 or sentos. Never mind, I’ll use iwix. Maybe
I need to do everything myself. Maybe I need to chop this site
in half and go headless. Maybe I need a brand new set of
technology built specifically for WordPress, maybe I need a new
job. [ Laughter ]
And sure, perfect tech could help them out here. And longer, nonlightning version
of this talk, I’d have more time to go into the tech specifically helping
themeing these people. But perfect tech won’t fix a broken
culture. If we could wave a magic wand here, backend
developers like myself many years ago might still be saying,
you know what, I keep the site stable, I keep it up-to-date,
whether or not people fill out the forms, donate to the
university, really not my problem, not my job. Well, if the higher ed funding
apocalypse happens in the next decade, it could become your
problem whether or not people are filling out those forms
donating to the website. So ideally, we’re comfortable
enough with our own tech we’re responsible for that we have
enough time, enough energy to turn some attentions towards
our co-workers and move the whole team together. Maybe we
have some expertise and what can help the team overall deploy
faster. Maybe we have expertise in
automated testing or performance that will help everything run
more smoothly. Maybe we have some expertise and information
architecture or analytics or long-term planning that will,
again, move the whole team toward the
top-level goal. Web ops is a team support. We have to do
these things together. You can’t do it alone.
Thanks so much for listening. I’ll have more time
to answer more questions down in the hallway track. Thank you. [ Applause ] NANCY YU: Thank you, Steve, our
next speaker is Chris Ford, he
learned about management the hard way. A year and a half ago, traded in
the position for Reactive Studios.
Welcome, Chris. [ Applause ] into some difficulties the day I
was supposed to put my slides in. Google Slides decided that
day was the day it was going to make all of my fonts horrifying. And then, the very next day, the
PDF exported. So we’ll go ahead and go to
presenter view. And then, I just need to drag
this to the right. I’ll let you go ahead and drag
that. I actually spoke at WordCamp
Baltimore and the worst thing ever happened, it was 6:00 in
the morning my time, I stood up there are if five solid minutes
and half way through forgot what I was talking about . I can control whether or not I
show up with pants. [ Laughter ]
I think you can just hit “present.” And if I have to turn
around to see where I am, we’ll go ahead and get started. Close
enough. I can see it down there. We’re good. Hello, everyone, my name is
Chris Ford. I, as they said, am a project
manager at Reactive Studios. A WordPress VIP editor. I’m going to be talking about 10
management tips in just about ten minutes. This is not a talk
about tools or processes, I’m not talking about being a scrub
master or anything like that. These are the hard lessons I
have learned beating my head against a keyboard for the last 23 years. I have had a long and varied
career. I graduated from a traditional design school which
meant that there was no commercial internet yet. So I learned how to write CDROMs
and how to do print work. The year I graduated, the commercial
web came on the scene. I went and got a job at a
skateboard company and was supposed to be
designing skateboards and T-shirts. And a week into my job there,
the web guy quit and I became the de facto web person after
that. Some of these things overlap, but I tried to put them on a timeline
from the skateboard company, I went on to be an HTML site
builder. We used things like this really cool new technology called gif89, you
have animations on your page. I misused a lot of flashing red
lights and under construction gifes. From there, I went on to
where my design got even more horrifying. I made buttons sing
and dance. And from there, the dot com
crash happened, I showed up to work one day and the doors were locked and we
weren’t going to get paid. And I thought, hey, I should become a
freelancer. Ran my own freelance business for a lot of years and
then when the transition from tables to font tags moved
to CSS, I had this really crazy, weird opportunity to become a
professional scrapbooker, which believe it or not, is actually a
job. I went and designed idea books
and people basically paid me to document my life and travel around and fling
paint around. And it was super awesome and that industry crashed, as well.
And so, after that scrapbooking detour, because I
knew a lot of photographers, I started designing websites for
them, again. And what I didn’t want to do
anymore is update people’s websites, I wanted to design
people’s websites. So I tried this tool called
WordPress. And one of my clients said, hey,
there’s this theme we want you to use. It’s called a revolution
theme, which became studio press genesis. I
was an early theme designer, if anyone’s familiar with Family
Tree or be crafty, you’ve been in this business for a long
time. When genesis moved to 2. 0, I went into doing more
high-level websites for clients. And from there, I think it was
three or four years ago, my friend Chris
Lemon called me and said, I have a question for you, please don’t
hang up on me. It was an opportunity to go and
be a project manager at Crowd Favorite. I did that for a year,
and moved to Reactive Studios for a year and have been designing processes instead
of web pages for three or four years now. One thing I do want to do is
recognize and acknowledge some of the privilege that has allowed me to
learn some of these lessons. I am white, I grew up in a home
with both of my parents. I had a great education. And so,
I think it’s important for all of us to when we do give these
talks recognize that I may have had
opportunities that you don’t have.
Some of these may not work for you. And that’s okay, as
long as you take one thing home, that’s awesome. The first thing I learned is
that projects are all about people. Is anyone in here a Brinet Brown
fan? Awesome. She tells this story where she dares to lead and she goes to NASA and
she’s a researchability . She’s at NASA talking to
engineers about shame and vulnerability and how engineers
come up to her all the time and say, you know, I don’t have
time for this. I’m sending rockets into space. What do I need to know about
vulnerability? She’s like, okay, is putting
rockets into space the hardest part of your job? And he says, no, I’ve got this
guy who works for me and he’s a director
port and he’s not doing his job. And it’s gotten so bad that I
won’t even put his performance reports in anymore because I
don’t want to deal with it. And so, he sits there for a
minute and goes, okay, I got it, I’ll
sit down now and listen. A project has never failed on me because of the technology or the
design or anything other than people.
It’s also important to remember, how many people in here have worked
on a project and you’re like this client hates me and was put
on this earth to make my life completely miserable?
[ Laughter ] Right? What I’ve had to start
doing is remembering, this is a person. This is a person and
this website is not their whole job. And it’s made me more empathetic
and less likely to go to that place where you’re a horrible person and
please stop making my life miserable. You start thinking
about they’re busy, this isn’t the only thing they have going
on. So my number one rule is to
remember everyone you’re working with, whether it’s a co-worker
or a client is just a person like you trying to do the best
they can with the tools they have. Because projects are about
people if you can work with people you like. Has anyone here
ever worked with a bunch of jerks?
Our number one rule we just got back from our reactive
retreat and every year, we sit down and we talk
about what are visions and values? And for the last three
retreats, the number one rule is we don’t work with jerks.
Whether it’s a client, whether it’s a developer. We’d rather work with a
developer who is not an arrogant people.
Working with people you like makes your life easier. Even if
you work remotely, you spend more time with the people you
work with than your family. Why do you want to spend those
around unpleasant people? This has not always been
possible. There are bills to pay. There are things you have
to do. But if you can swing it, I strongly recommend working
with people you like. This has been the hardest thing
for me to learn. Are there any other perfectionists in the
audience? Yeah? I have always been a perfectionist and a people pleaser and I thought
if I just worked hard enough, if I figured out the perfect
process, if I could do this one thing, this project will go
perfectly. There will be no speed bumps. Nothing will go
wrong. When I was worked the first
three months, I put together a 40-page
document. It was a 40-page management process. And I was so
proud of it. And I had it, and I put it on the server, and I was super excited
to use it. And then, things blew up, right?
Things went off the rails. I got busy, and that awesome,
polished beautiful product plan sat on
the server and I didn’t have time to read it, let alone
implement it. And just remembering that be a
tree, bend. You know. I’ve worked on projects before
that have gone completely off the rails. Completely crazy, the
budget’s crazy, we’re running out of time. We don’t have
enough resources. But if you can react to those
things and figure out, okay, this isn’t
working perfectly, how can I turn this around? So that I’m not stuck with this
horrible process. One of my super powers is when things are
going crazy behind the scenes, the clients never know about it. I am cool, calm and collected. I
am a duck. My feet are furiously paddling
on the bottom, but at the top, I’m cruising along. It’s an
important thing to remember. Since projects aren’t perfect,
that doesn’t mean you can’t learn from them, right? I went to a project management
conference last week, and someone asked the question, how
many people in the room track their time? How many people here track their
time? Oh, awesome. Apply for a job at Reactive. I am the most horrible person in
the entire world about tracking my time up until maybe a year
ago. Especially as a project manager,
you do five minutes here, you do five minutes there, and it’s really difficult
to do. Once I started tracking my time and finding out that
those five minutes eight times a day, nine times a day, ten times
a day you spend on a client, all of a sudden, that’s an hour that
you didn’t bill someone for. That you can’t track. One of the things that I loved
about a year ago last January, we switched to a tool called harvest for time
tracking because it ties into another
tool called forecast. And what that lets us do, not
only know what we’ve done in the past to make better time lines
and estimates, but lets us look at the future. Now we know when we can book
work. Tracking those types of things
down to really granular things, how much time are we spending on
development? How much time were we spending
on QA and being able to go back and be, like, hey, our guessers
are pretty right. STHAST That’s a powerful thing.
This is a really hard lesson. You will be wrong. And
it will suck. I am wrong five, six, seven,
multiple times a day. The only dumb mistake is the one
you make more than twice. And I’m giving you a little leeway
there because I have a hard head and sometimes it takes me a while to
learn a lesson. If you are wrong, be okay with
it. It kind of goes back to that perfectionist thing, again. It drove me crazy for a year
every time I was wrong. I like to be right. Who else here likes
to be right all the time? And that leads into the next
one, which is bad news doesn’t age well. When you’re wrong,
don’t hide it. I told someone one time if you
lie to me or hide things, I can’t
fix them. One of my overwhelmed things is
I hide out . And it’s been really difficult to break that
habit and just suck it up and own up to it. And it’s always
better to let someone know that something bad is comeing. If
you’re measuring things and planning things and tracking all
of those things that we talked about, a lot of
times, you can find out that you’re wrong three weeks before
it goes off the rails. And that’s a much better time to
call a client and say, hey, we’re going to have to push that
deadline or out of scope now and we either need to drop some features or adjust the timeline.
Let people know. It sucks like being wrong. It’s better to face the music or
get it over with than to have to tell someone three weeks after
the fact, hey, you owe us extra money now. No one likes that. Celebrate the
small victories. It is, there are a lot of
losses. There’s a lot of bad news sometimes. Celebrate when
you do things right. It helps keep you sane. Practice
self-care. I take care of my team before I take care of
myself and can get burned out when that happens.
Celebrate the small victories and celebrate them
with your team. One of my favorite sayings is take the
blame and share the credit. Create a culture of helping. No one at Reactive ever says no,
that’s not my job. Be helpful. It makes all of the things we
talked about before a lot easier to manage.
This kind of goes back, take care of yourself, your team is
important but you are too. You’re the one driving the team,
you’re the puppet master of the project. And this is a big one
for me. Everyone is a project manager. Whether you are a
freelancer, whether you’re on a team, you’re managing your time,
you’re doing everything you need to do. I hope that everyone here who
has managed projects got something out of this today.
I will be around in the hallway track for maybe half an hour
after this, then I’m sneaking out for a bit and will be back.
But I’d love to talk to you. Thanks, everyone.
[ Applause ] NANCY YU: Thank you, Chris. Our next speaker is Chris Lema
at Liquid Web. He’s a regular blogger, public
speaker, ander. He’s been working on
e-commerce stores for more than 20 years. Welcome, Chris. heard the story of the
milkshake. If you haven’t, there was a fast
food chain that wanted to sell more milkshakes, so they got a
strategy consultant. This is a true story. Clayton Christianson
is known for doing this research. They got a strategy
consultant to come in and help figure out how to sell more
milkshakes. They did what most marketing people do. They go out
and say, let’s go analyze all of the people that drink milkshakes
and survey them and ask them questions. They started asking about the
viscosity of the milkshake, of the variety
of milkshake flavors. Talked about the size, do you need it
bigger? Smaller? And the feedback was yes to
everything. We want more flavors, more sizes, greater viscosity, a little more
liquidy and less thickness. We want bigger straws, smaller
straws, they got feedback on every front and the fast food
chain tried to deliver on this. And there was no lift in sales.
Right? So they got a research associate
to go sit in the fast food restaurant. Right? In one of the
chain spots. Sat there and just annotated. Who bought a
milkshake? When? What size? What have you, just collected the
data. And at the end of the day, discovered that 40% of the
milkshakes were sold in the morning.
So went back the next day, the research assistant goes back
and says, as people are coming and walking out, they’re all
taking it to go. Says, can I interview? Just ask you a couple
of questions. It wasn’t a demographic issue,
wasn’t age. All of the marketing Lin go ing lingos, they have in common
the commute. They were hiring the milkshake. When you try to eat a bagel on a
40-minute commute, that bagel’s going to be all over your
clothes, most people dressed in work attire,
professional attire. And they’re like, no the bagel’s messy and
muffins are all over the place, but the milkshake is easy. It takes
a while. It’s work, it’s something to do on the drive.
And turns out, it’s fun, right? And feels good.
They found a second group of people buying milkshakes in the
afternoon, 3:00 to 5:00. Mothers, taking their children
for a special treat. Right? Again, the milkshake had a job
to do. And that was instead of going to the toy store or
somewhere else, LOETS go to McDonald let’s go to McDonald’s
and have a milkshake. And came up with what is called today the Jobs Theory or the
jobs to do perspective. We’ll talk about how that plays out
when we talk about a content framework for sales pages, how
you sell your products and everything else. Does that make
sense? Awesome. Now, I have no idea how that
page is going to change. There it is. Okay. So I use a framework to tell
stories. And what I’m going to do now is use a story to explain
the framework. All right. So I want you to imagine that
you love stereos. You love high-fi speaker, WI-FI
connected, all of the different services, services for radio. But high fidelity, quality
sound. Imagine that the most amazing speaker is only sold in a store that
happens to be in your town. And the store is at the top of a
hill. Right? So you wake up on a Saturday
morning and you look out and you think, today’s the day that I’m
going to buy that speaker. I’ve been Jonesing for it, saving up
the money, I want to buy this speaker. And you can look out
and see the road that comes from the top of the hill, the only
store that sells the speaker, you see the road come down in
front of your house. So you walk outside, it’s a nice Saturday
morning, there’s the road, you start walking on the road on the
way to buy your speaker. And halfway down the road, you
get to a river. This is not a stream, not a
brook, we’re talking about football field across, it’s a
river. No problem. You step into the river and start walking
across the river. Only after two steps, the water’s up to your
chin and you realize, huh, this is not what I expected.
You back up out of the river, but you know how to swim.
So you’re okay. And you go to swim, and two are
strokes into crossing the river, you’re a mile down river. That
thing’s moving out and you get out, again, and go, okay, this
was a little more than I expected.
So you walk back up the river to where the path is and you
decide, I can’t walk across, I can’t swim across. And while
you’re sitting there frustrated trying to figure out what’s
next, you hear it before you see it.
And here comes the motor boat, and he pulls up in front
of you and goes, hey, buddy, trying to get across the river?
Yeah. He goes, it’s ten bucks. You go to your wallet, grab the
ten bucks and hand it to him, and he
drives away. [ Laughter ] Now, you’re wet, you’re
frustrated, and you’re broke. That’s not a fun place to borrow
be, right? You decide, I’m going to cool down. You start walking
up river. You’re walking for an hour,
completely out of the path of where you thought you’d be. Be there, after an hour of
walking is a bridge. You’re going, this is amazing.
There’s a bridge. You walk up to the bridge, right? You jump on
the bridge, it’s sturdy, feels good, you cross the bridge. You
cross the bridge, you’re over the water, okay. You start
walking down, takes you about an hour, you get back to the path,
the path’s going to take you up the hill. But you look back. And there’s a group of people on
the other river bank. And some of them are sopping wet. And
some of them are staring at open wallets. Some of them just look pissed
off. And you yell across the river, I’m not better than you,
I’m not smarter than you! But if you’re trying to cross
the river, I know where the bridge is. If you go up about an
hour, and I know that’s out of the way and not what you would
normally do. But if you go up river an hour,
you’ll get to the bridge and if you cross the bridge right
there. You’ll see, I’m not better than you, not smarter
than you, but I did it two hours ago. You walk up an hour, cross
the bridge, come back down and I’ll be here. And if you’re
trying to go up to the hill where the store is that sells
the speakers, I’ll be here and I’ll wait for you and we can go
together. That’s what I call the bridge
framework. The bridge framework consists in
the destination. The destination is the speaker. It’s the thing
we want. It’s the thing that causes us to
do something. Some of you sell products, some of you sell
services, that’s not what the customers want. The customers
want the product or the service to deliver something else to
them. Right? They buy your product so they
can do something to actually make money. They want the thing
that comes after your product or your service. And we have to make sure we’re
synced on that. Are we clear that we’re trying
to go to the same thing? That’s the destination. The second is
the route or what we call the strategy. I walked out of the house and I
said, I’m going to go to the top of the hill but I’m going to
take my helicopter. If I take my helicopter, I don’t need
anything to help me cross the river. I’m in the helicopter. We
have to evaluate, are you using the same strategy I think you’re
using? You’ll notice we spent little
time talking about the speaker and little time talking about
the road. We spent the most of the time talking about the river
and the road blocks. I tried to walk across, I tried
to swim across, I tried to buy my way across, and it didn’t
work. That’s where we spent our time because that’s where we’re
talking about pain. And when we connect with people on pain,
when we have empathy, that’s when people can connect to us and go,
yes, they understand my pain. I’m not better than you, I’m not
smarter than you. But I’ve been where you’ve been. And two hours
ago, I was exactly where you were: And I want to show you how
to cross this river. The bridge, that’s our product or service.
Notice, I spent the least amount of time talking about
that bridge. I didn’t tell you the bridge was steel or magical wood, I didn’t
tell you how many people died making it, how many made it, I
didn’t say any of that because you don’t care. And yet, most of the time, what
do we do? Talk about our product or service over and over and
over. As if that’s what matters. You know that I love
WooCommerce, I totally do, but I can’t stand when someone says
the reason to choose WooCommerce because you can own your own
stuff. I hate that. Not because I don’t think you
shouldn’t own your own stuff, but in the business world with
executives, people have been leasing computers and leasing
buildings forever. The idea we have to own our own stuff
doesn’t compute. Compute to an executive who says
I’m happy with OpEx instead of
capex. We put a spotlight as the
bridge, when someone who woke up on Saturday
morning didn’t need to know there was a bridge because they
didn’t know there was a river in their future.
And then, we end with a reunion. Hey, if you’re trying
to go the same place I’m trying to go, I’ll be here, and we can
go together. It is amazing how people want to
belong and connect. I want to wrap up highlighting a
quick things for you. Mistake number one, pitch the
bridge. If I get to your website and all you want to do is talk
about how awesome your bridge is, I’m going to the river, it’s no not interesting. Does
that make sense? Is it that close to lunch?
[ Laughter ] I’m so hungry, I can’t move my
head. Mistake number two, right? It’s
a lot easier to sell the bridge if people have already tried to
get over the water. Man, when I’ve tried to get over the
water, if I’m talking to someone who needs what I’m selling them
and they, I say, you probably struggle this way. You probably
tried to walk across the river, swim across the river, you tried
to cross over with a guy and they’re like, oh, dear, god, you feel my
pain, and are you about to tell me you figured out where the
bridge is? Oh, I am. And they’re ready to buy, right? Content framework has to focus
on that pain, and it’s easier if they’ve gone through it. Also, we normally skip empathy.
And we will win a lot better if we’re talking to that pain. If
we spend more time on the river and the road blocks than we do on
the bridge. Fourth, we skip the community.
We sit here talking about the product or services it stands
alone when, in fact, everything you sell has on
the other end of it people that have already bought. And those
people are part of a community. And bringing new customers into
that community can be incredibly powerful. I’ll publish these slides so
you can see it. No reason to worry about this right here
because I use this as an example when I talk to people about this
framework. If you watch these two commercials and the links
are tiny and you can’t see it, you’ll find it online. If you
watch these commercials, you’ll see exactly what I’m talking
about. MAU Mowaui Jim talks all about
themselves. Citizen talks about all of your pains and literally
just walks through. We’re doing this in 30 seconds, right?
That’s a commercial. But every time they hit a pain and realize
their bridge cross that pain, you realize, that’s incredible.
My last point, and we’ll wrap up here is that people will
believe, when they believe that you have been there, you’ve done
that, gone through that pain, right? And that you know how to
get to the other side because of your bridge, they will follow.
And this is why this framework works. Thank you very
much. My name’s Chris Lema, you can
find me on Twitter @ChrisLema, I’ll be
around all afternoon, all tomorrow. I’d love to talk about
e-commerce and messaging your products and services. Thanks. [ Applause ] NANCY YU: Thank you, Chris,
this is the last presentation before lunch in this room today.
Lunch is buffet style. And you will be able to see dietary needs, such as gluten free,
vegetarian at each station. If you have dietary needs such as kosher meals or other meals for
special needs, allergies, please see a
uniformed catering staff person for your meal. We’ll be back
here at 1:00 p.m. and the first speaker in this
room is Taylor Morgan. Thank you so much. Enjoy your lunch. TAM ammy Tammy. ie. Well, good afternoon Room 240,
welcome to WordCamp 2019 in St. Louis. I’ll be your host this
afternoon. If you have a cell phone on,
please make sure you silence it. Any electronic devices iPads,
whatever. If you would, please leave these closest to the screen Well, good afternoon Room 240,
welcome to WordCamp 2019 in St. Louis. I’ll be your host this
afternoon. If you have a cell phone on, please make sure you
silence it. Any electronic devices iPads, whatever. If you
would, please leave these closest to the screen for — I’m
waving the microphone. Move to the seats closest to the
screen for those with accessibility needs so they can see a little bit
better. If you have any questions at any time, the room
manager is the guy in the gray, plaid shirt waving his hand. You can ask him.
Oh, yes, contributor day is Sunday, and we want to encourage
you to attend that if you haven’t been to Contributor Day
before and you want to know what it’s all about, go to the Get
Involved table in the sponsor hall. Or you can attend one of
the sessions that’s called Everyone Can Help
Make WordPress better. Any newcomers are welcome. You don’t
have to have experience. Contributing is a good way to
get to know everybody in the WordPress community. And this evening, there’s a
WordFest party, in case you didn’t know. Take your badge to the City
Museum. And you need to your badge to
get in. So make sure you get it. And — now what you came for. Taylor
Morgan. Taylor is a WordPress theme
developer and a board game fanatic. Please welcome, Taylor. [ Applause ] Well, this is WordPress With
Friends. What board games can teach us about creating for the
web. I think we all know, if there’s anything more fun than
playing board games, it’s talking about playing board
games. I hope you’re all excited. I do think there’s a lot in
common between board games and both using the web and creating
for the web. But I don’t just want to give you a list of
similarities because I don’t think that helps us. I think
what’s important is to look at what one can teach us about the
other. Because if they have a lot in
common, it’s very interesting that we view board games as fun and social and
challenging in a good way, but we view, or
we can fall into if the trap of viewing
creating the web as isolating, intimidating or just plain work.
And if they have a lot in common, which I think they do,
they shouldn’t be that way. So first, what do they have in
common? I think that they’re both really about a system that gets you to a
goal. Right? So what do I mean by that? In a board game, you are
literally just playing with cardboard. You have a box that’s made of
cardboard, pieces that are cardboard and plastic and paper. They have symbols on them that
mean nothing out of context. Right?
The only thing that gives this definition, that gives us
any kind of structure is the rules. It’s the rule book. And
it is designed to help you accomplish a goal. We tend to view rules, sometimes
as limiting. But really, without the rules, we have nothing here
except bits and pieces. If you step back a little bit,
you can expand that definition. I said it was a system that
leads you to a goal. You could say a little more elaborately that a board game is a system of
rules that determines content, you know, what’s happening in
the game, where are you? What are you doing? Presented with a
design, you know, usually, a good design helps
bring you into the experience to a group
of people, you usually don’t play alone, you usually play
together to help them achieve a goal. Right? A system of rules
to determine content, present it with a design to a group of
people to help them achieve a goal.
And you can say the exact same thing as a website. It’s a
system of rules of algorithms and page routing and DNS and all
of these other systems that come into play to deliver content,
usually with the design to a group of people to help them
achieve a goal. You might not recognize
this, but this is the function deep inside WordPress that
generates these kind of annoying messages that tell you you’ve
done something wrong in the debug mode. For instance, if you try toing
access something only that should be done outside of the
loop. And even just there call eded it
annoying messages, but they’re helpful messages, right? They’re
a part of the rules and limitations that are designed to
help us get to a goal. You’re doing it wrong not because
WordPress is trying to get on your back and case about stuff
but because there’s a better way to do it that will give you more
reliable result, right? So if both board games and
creating for the web are about these, like, systems that are
trying to push you towards a goal, good rules that
are trying to help you accomplish something, whether
that’s meeting a business goal through the website or whether
it’s, you know, in monopoly, collecting all of the properties
or conquering all of the countries, or whatever, or if
you want to step back and say, oh, my goal is to have a social
experience with my friends and have fun. The rules are designed to get
you there. So why do we view the rules of a
board game and the process of trying to achieve the goal in
the board game is fun, but we viewed the same
limitations as frustrating and the same goals as intimidating
with websites. Well, I think it’s important to
first acknowledge that board games are not always fun. In fact, sometimes, they’re
table-flipping frustrating, right? I know when I think back
to my own experiences with board games. When it’s been not fun, a
lot of times it’s because of attitude, either
my own attitude or the attitude of people I’m playing with. You
can tell so quickly if the people you’re playing a board
game with are just playing to win and don’t care about the
social experience. You can tell if they’re too
focused on that goal. Or you can tell if they’re too focused on
the system. They’ve lost sight of the goal, what you’re trying
to do. They’re nitpicking the rules,
right? And why are you even playing? It like breaks the
spell, and you’re thinking, why am I doing this if this isn’t
helping us grow in our relationship?
Similarly, you can have people that don’t take those things
seriously enough. People not trying to win, they’re not
taking it seriously and that’s not fun either. I think you can
have the same experiences, the same frustrating, not fun
experiences when you’re creating for the web. You can have, you
know, teammates that aren’t taking the end goal seriously.
They’re not trying hard and they’re not meeting you where
you’re at. You can have clients maybe who don’t view you as a partner, as a
resource who can tell them about how to use this system to reach
this goal. They don’t care about that. They want to kind of
control your mouse through the telephone and have
you do whatever they want. They can just not care enough. The other thing just like in a
board game, you can have rules that feel unfair and feel
intimidating. With creating for the web, you can feel
intimidated. You can think that system you’re supposed to be
using is just too much. There’s too much to it, you
can’t rise to the level you need to meet the goal.
So I think what’s gone wrong in most of those things, if you
don’t just want to say attitude, I think what happens is you can
easily hyperfocus on one of those things at the expense of
the bigger picture. You can be too focused on one or too
focused on the other. But to be honest, I feel like
this model is not complete. I think
really what you have to do is take a step back. You have to zoom out and you
have to say the pursuit of this, of what we’re doing here over time leads to
growth. And that is at the heart of the whole matter.
The reason that I like board games so much is because each time I
play them, hopefully, I’m getting a little bit better. It
doesn’t matter if I’ve met my goal and won or missed my goal
and lost. It doesn’t matter if I know every single rule in the
rule book. Some of these modern games and rule books are
hundreds of pages long and you’re not going to know them
all. But if I’ve grown a little, then that is a win. And it’s exciting to play again.
And even though it’s the same game, to play, again, and test
yourself and see if you are a little bit better. To push your
boundaries and stay on the leading edge of your own
ability. So that’s personal growth, right? I think the same thing happens
with creating for the web. I think that’s why I like,
personally, creating websites and working with these systems. It’s why I subject myself to the
systems of rules and limitations, why I try to learn them all is because
I enjoy overcoming those obstacles.
If it was super easy and I can do it in a single click, it
wouldn’t be nearly as fun. But there’s almost an adrenaline
rush when you’ve hit a failure over and over and over and you
finally overcome it. So that’s personal growth, but I
think there’s another aspect, which is communal growth, right? When we play a game, hopefully,
we’re growing closer to the people that we’re playing with.
When we work with other people on a project, whether you’re
talking about your own teammates, people who work with
you on a project or you’re just talking about a client, you are,
hopefully, improving that relationship through the
process. Hopefully, you meet the goal. Even if you don’t, that
can still turn into a positive relationship boost.
And it’s very easy to lose sight of that and just focus on
the goal. So let’s talk about some examples. This is a game called victoryed
Victory 2, it’s a self-published game.
He published it out of his garage and he sells it and I
think it’s one of the better games I’ve ever played. What he wanted to do was combine Risk with settlers of Qaton. It’s Napoleonic strategy.
There’s horses and cannons . Don’t worry, I’m not going to
teach you the whole game. But I am going to tell you that
there’s one goal, and that’s to capture your component’s capital
city, right? On the image, you can see, the two cities on
either side, the far left and the far right, those are the two
capitals. This is an image of a game I was
playing with a friend of mine named Greg. And we played this
game a bunch of times and I’m blue and he’s orange. And what
happens is, you start with just those capital cities and you
kind of push forward and you usually clash in the middle and
it becomes a front loin. And it’s something that pushes
back and forth. But what I missed was that he
bypassed the whole thing and came around and captured my
capital city in one move. And if all I cared about was
winning, this would have been the worst game ever. But this
was the best one ever because I learned something and we had a
shared experience going forward. This is another game call where
you start off together, take turns placing tiles and you get
to an entire map that you’ve created together. And there is a
winner, but you don’t care about the winner. What you care about is the
shared thing you created. I think we can take a lesson here.
I think we can celebrate what each other, what we all do
together, even if it’s not your victory. I think we can celebrate our
teammates’ victories or our competitors’ victories. We can
look at what we create together and not just hyperfocus on this
one individual goal. I’m going to skip that one. There’s a sort of shift in
WordPress, contributing is a big thing, and there’s a shift, I
think, that should happen between viewing it as me versus
they, saying things like, oh, they want us to upgrade our
servers? They are pushing this new editor
to saying we. We are pushing this editor so you can have a
better experience. And that’s an important thing. And everybody
in the room and everybody watching is part of the “we.” If
you’re using WordPress, you’re part of the “we.” What do board
games have to teach us about creating for the web?
I think it teaches us it can and should be fun. That the
system, the rules and the tools we use, those are important
because they help us get the goal. And the goals are
important because it’s what we’re trying to do. But we have
to step back. And also, see the bigger picture of growth,
personal growth as we’re getting better and challenging
ourselves, communal growth as we’re building the relationships
with our coworkers, our clients, with the broader maybe WordPress
community. And that some of the best things
we’ll create, we’ll create like some of those board games, we’ll
create together. Thank you. [ Applause ] just doing this, you’re in room
240. The upcoming session is Code
Like A Writer with Alex Ball. A couple of notes before he gets
up here, please silence all cell
phones and electronic devices. Make sure they don’t make any
noise. Please leave the seats up here close to the screens for
those who may need accessibility . I want to remind you that
there is a Contributor Day on Sunday and Taylor just mentioned
that you don’t have to have experience to come to
contributor day. If you want to know more about it, go to the Get Involved table at the
sponsor hall or you can attend one of the sessions entitled everyone can
help make WordPress better. Newcomers are welcome. Contributing is a great way to
get to know others in the WordPress community. Also, tonight WordFest party is
happening at City Museum. Make sure you have your badge. You’ll
need it to get in. And don’t forget about it. And now, Alex Ball will come in
and talk about coding like a writer. Alex is a senior
software engineer at Mind Grub, which is a digital
agency in Baltimore, Maryland. He has more than a decade of
experience with WordPress. Please welcome Alex. [ Applause ] ALEX BALL: All right, we’re
going to talk about coding like a writer, which may seem like a
weird idea if you’re thinking left brain, right brain, how am
I going to go from this to that? But I know there are definitely
a lot of people who come to WordCamp and work with WordPress
on a regular basis who do not have a background in
computer science. Who have a background in the humanities or
something like that. And I’m one of those people. I
was an English major, writing minor, the first eight years of our
career, I spent it at Baltimore Magazine. Doing everything through short
blurbs to writing feature length cover stories, proofreading,
copy, editing. And the time came we needed to take over the
magazine’s website and have more control over it over the design
and over the editorial content . And then I just kind of jumped
in and taught myself as I went along
and solved problem after problem as I encountered them. And now, you know, fast forwards
forward to 2019, I’m a senior software engineer at Mind Grub
in Baltimore. So what we’ll do is talk about some of the
principles of writing, principles of coding and how you can gain a perspective from a background of
writing or noncoding that will give you more familiarity with
coding and more confidence to step into coding and get more
involved with it. Punctuations save lives and
you’ve heard this because every
proofreading whoing has uttered this phrase.
We’ve got a bunch of punctuation in the simple example. And if it’s missing like the
semicolon at the end, your app not going to run. Another
example would be here when we’ve got a comma separating our
variables, everything’s fine. They’re defined.
If we omit that comma in the middle there, we’re going to get
an error. So the punctuation is important in your coding. The writing, the punctuation is
important, as well, let’s eat, comma, grandma is a great idea,
but let’s eat grandma means you’re in the Donner party. And that’s as bad as your app
not running, maybe worse. When you’re writing, another
thing you don’t want to do is mix your metaphors. You’ve got
gibberish here. The home run hitter scored a
touchdown when the chips were down and
it’s just confusing. It’s a mess, it’s confusing, and
your message gets lost in there . What I want you to think about
when you’re coding along the same
lines, separate the metaphors to avoid confusion. You want a separation of concern
s to avoid confusion in the coding. And that means in your
WordPress development, you want to keep your functions in functions files and
out of your template files. And that avoids confusion. The reason the asterisk is there
is because good functions files still give you a chance to write
something in your own words by use inging
comments. All of your functions should have comments in them
because they will explain exactly what you mean. They give
context to your collaborators to other people who are joining
the project. They’re going to help people who come into your
project know what this function is for and what it does and why
it’s there. We’ll talk about coding
principles. Let’s talk about the idea of
syntax form adherence to standards. You come into coding
knowing this is a big deal, but you don’t always realize that
you’ve come from a situation in writing, usually, where this was
also a big deal. Okay. Anybody who has done any legal writing has dealt with specific syntax
jargon, formatting, all sorts of things
are specific to that. M same thing in academia. You’ve had to
format sources in a very explicit way. Okay.
My brother-in-law’s a screen writer. And now, we’ve got plenty of
tools out there, like final draft that help us format screen
writing. Before that, there was this whole industry around
reference materials for how you screen play has to be formatted. It has to be courier, the
characters, the scene headings, everything. And the fear was that, and they
would instill this fear, if you send this to a movie studio,
they’re not going to look at it, they’re going to throw it in the
trash because it’s not formatted properly.
So we’re used to in writing having to follow certain
formats, having to use certain syntax, and it’s going to be the
same thing in the code, it’s just a different form of
writing. Right? When we are writing, we use
tools, or some of us do, like, spell
check, grammar check, things like that to keep ourselves in
line. There are tools like this that we get to use when we’re
coding, as well. So at Mind GRURKS Grubb Grub, we
have extremely strict coding standards. There’s certain kinds
of code they won’t let run on their platform. So we need to stay in line, and
we’ve got a tool called Code Sniffer that makes it easy to
track your coding while you’re writing. Okay? To keep you adhering to best
practices, to keep you adhering to those standards that you have
specified. You can specify within Code
Sniffer what you want implied. In our case it’s the WordPress
VIP. This is a good example, lines
and red dots showing us errors. And the one we called out is
that we’ve detected usage of a nonsanitized input variable. We are grabbing this URL
parameter. You do not want to take any user
input data and just pass it right along without doing
something with it. You need to sanitize it, you need to
validate it. And to turn that around and put
it back in writing terms, if you
were a journalist, you wouldusage of a nonsanitized
input variable. We are grabbing this URL parameter. You do not
want to take any user input data and just pass it right along
without doing something with it. You need to sanitize it, you
need to validate it. And to turn that around and put
it back in writing terms, if you were a journalist, you would not
just pick up the phone and take a quote or some sort of fact
from a random source. Without some kind of fact
checking, some sort of validating. You have things you’re going to
translate to your coding when you get around to it. Another codeing principle is
DRY, don’t repeat yourself, don’t repeat yourself. Don’t
repeat yourself. It’s a waste of our time, waste
of our 15 minutes. You’re used to this in the writing, too. If
you were giving an assignment for a 500-word piece or
1,000-word piece. You don’t have the space or time to repeat
yourself and be redundant. You need to get to the point. And
it’s a waste of time in your coding as well it’s a waste of
file size. You want to apply things to basically reusable blocks of
code. That’s what DRY is and you’ll
encounter that when coding. And there’s a couple of event
handlers, we’re doing the same thing each time. If you expanded
that to ten lines of something in each one of those, it’s a
waste of space and a waste of everybody’s time reading through
it. You can put it in one reusable block and call it over
and over. That’s what don’t repeat
yourself means in your encoding. If you’d been to the
WordPress. org website at any point in the
last decade plus, you have probably seen this phrase on
there, it’s in the footer right now. Code is poetry. If you look in the code codex,
of the four they have listed in the philosophy, it’s number one.
And it’s a whole separate talk delving into really what it
means, what it means to people individually. But what you
should take away from this in terms of the functional writing
that we’ve talked about so far and the kind of formats and
things, switching gears to this idea of creative
writing, translating to code is that think of poetry and think of Emily
Dickinson rather than Walt Whitman free
verse kind of stuff. It’s easy to read, it’s clean, concise, but also E evocative. Make your code
beautiful and readable and make it do as much as it can with as
little as possible. Another thing I wanted to
get into is a little bit more esoteric,
but I wanted to throw it out there because you will encounter it at some point
in time point, hopefully, in your theme and plugin
development. And once you’ve heard it, I don’t think you’re
going to forget it. So long before AJAX was it was
the hero of a tragic Greek play by Soficlese. In a tragedy, someone, usually
the main character dies at the end.
When you are developing with WordPress and dealing with AJAX
functions, the slide is missing here. So I apologize. But at the
end of the AJAX function, you are going to invoke WP
underscore die. And this is important for them to run
properly. AJAX, tragic hero dies a at the
end, your AJAX functions need to die at the end, also, otherwise
they’re not going to work. That’s a very literate take on
this. But if you get into WordPress development enough,
you will probably run into AJAX functions. So we’ve barely
scratched the surface of what you can do, writing principles
and coding principles. Hopefully, if you can wrap your
mind around the fact that coding is really just another form of writing
with a slightly different language. You can be more comfortable with
it, be less afraid to join the WordPress community the same way you would
join a writing feedback round table if you’re a creative
writer and get feedback on your work there, too. So there’s no time for a Q & A,
but you can find me, I’ll be around all weekend. Some of my
colleagues from Mind Grub are here, as well, you can flag us
down and ask us any questions you might have. Thank you very
much. [ Applause ] Here comes the room manager
trying to steal my thunder, again. If you have questions or
accessibility needs, this is the guy you need to talk to. Our
next session is Thinking Remotely Through Games with Tammie
Lister. While she’s coming up, I’d like to remind you to
silence cell phones and electronics, reserve the seats
next to the near the screens for those with accessibility needs. It must include language because
I have a seat up here, too. I mentioned any needs or
questions are referred to our room manager. We’re having a Contributor Day
on Sunday, you don’t have to have any experience, you can go to the
get involved table at the sponsors’
hall or attend a function called
everyone wants to know WordPress better. There’s a WordFest party this
evening at City Museum and your badge is required, make sure you
take it. And now, I give you, Tammie. some resources at the end. This
hopefully going to be a fast trip through a broad topic. Let’s dive into thinking
remotely. When you think of the term of
games, everyone has an idea of what that word means.
And many of us have played a variety of games over a
lifetime. And P often we might participate in play activities
that we don’t even identify as actually games. Today, I want to talk about why
play is really, really important and really share some foundations of games
and how this can all happen remotely. List images show maps and
something like this, to represent people. Sometimes,
they are connected into teams or they’re grouped in some shape
but they are spread out. Often, they are connected by a
line, but they can still be separate. The line, often;, is a
communication tool. This is all well and good. But if you don’t
connect the mind with actions and the humans themselves, you have this isolated person in a
box diving in for tasks, performing them and
disconnected. Through games, connection
happens. This is a natural part of being
a human. Beyond creating connection in a
team playing games, this can also strengthen everyone’s bond. But beyond the team, by having a
culture of play through games, connections can foster and
flourish across the entire company. It becomes a collective
drawn together through powerful, creative thinking. What exactly are the benefits of
this type of thinking? So here are just a few of the
benefits. You can remove confined thinking and those
boxes that people are mentally stuck in. You dissolve those
thought barriers. Creativity is open because of the very nature
of play. And also, through connecting, I
mentioned this bonding happens, the strengthening of those
connections. And humans, when we share an
experience, we powerfully connect. And ideas can be
created rapidly through this form of play. So children actually learn
through play and adults are no different. When we’re talking
about play, there are often six types of play seen
as stages, which are important to a child’s development. And I
wanted to share them today and bring into context how we can
use these. So the first is unoccupied play.
This is kind of the most basic type. Someone is free to think, to
move and imagine. An object is given without any boundaries,
for example. And then, you have independent
or solitudeitary play. This is when someone is playing on their
own, and it’s really, really important for someone as a
foundation to learn to be able to play on their own and have
that experience. And then you have onlookers’
play. This is how you learn the rules
of engagement. Parallel play is when you see
two children probably using the same tools and the same time,
but they’re separate, they’re not actually connected or
interacting with each other. Associative play is a play
that we probably all remember as a child. When you made something up,
there was no goal, it was cooperation, you were exploring and joining together
and enjoying that moment of play. And finally, cooperative
play, which is what we think of as adults more
in the terms of games. You have a goal and you’re
trying to cooperate towards that goal.
As I mentioned, this is really important to our
development as a child, then using the foundations on a team
or in our processes really can help, as well.
So how can you use this? Well, I’m going to look at just
a few of these and see how we could. The first is with unoccupied
play. By allowing experimentation and giving maybe
a task without boundaries. Like, you give a child a toy and just
say explore and do this. This is something that you can do within
the context of your team. With parallel play, you can
give people the same task, the same boundaries and the play beside
each other is powerful, and sometimes, emerges into
cooperative play. And it’s worth noting that it can also be
somewhere that you consider a safe place to explore
competitiveness. For example, timed and other reward-based way
of challenging each other. Associative play. I would
probably say this is a real crucial part of any team. It’s
when you have the freedom to explore and create. And as a collective, find out
what could be. And cooperative play, for a
team, this is often the type of play that is used, it forms a
basis how the projects start. Get together, think of a goal,
and you’ll start collaborating there. To go back to some of the
plays I’ve explored, I’m going to recall ways you can do this
practically so you can take these back. I’m going to split
these into two areas, and that’s constant and events. The games
I’m going to talk about are things that happened that you
should be using throughout your whole time you are together on
your team and within your company. And events are going to be
specific to the start or end time of a project, for example. So let’s first look at those
constants. One example of this for unoccupied play could be just having an allotted
time, a lab time each week where anyone
can explore and set aside. You can have an aspect of show and
tell. That plays to the inner little children, inner selves to
have a way to communicate what we have explored. For associative play, maybe you
have hack days or weeks to a set time
and a set date. Let’s move on to events. And remember, these are
things that are specific times that you are wanting to kind of
explore in the play space. So for parallel play, you could
do something called 6up. This is a
fun game to play if you’re working on an interface maybe.
You divide a page into six. And you rapidly draw six different
versions. Just do it timed. And this is a great thing to do in
parallel because it really explores what if and what could
be within that. Another one is an elevator
pitch, great one to do to decide a project or write down what you
think you’re going to be working on and see if it’s the
same or where your differences lie.
For cooperative play, maybe if you start a team, you could
all create a team shield, an emblem that represents the team. And the common one is user
journeys or store maps, some way to visually represent story apps is
something I really like. You can all come together and start
plotting the arc. Merged play is a combination of
those games. For example, a retrospective has
that parallel but with that time limit but also has cooperative
play, as well. So I’m going to share two
different forms of retrospeckspective. The rose has fully blossomed, a
bud is just appearing but not really fully grown yet, and the
thorn is something ouchy. You could be doing this at the end
of the project. You could also just be doing this for the team
or for your processes. So the variation on this is
fire, forage or treasure. I really like this variation. I
have to admit, there’s something amazing about setting something
on fire if it’s part of the process. It’s something you want to set
fire to safely. A forage, maybe you see another team do, or a
process you would like to borrow and like to bring into the work
that you do. And treasure is something you
want to celebrate and hold on to. One other type that people don’t
like because they use the word icebreaker, but I like to use “warm-ups. ” It really opens someone up to
the journey. The second kind is mood sketch.
Get everyone to sketch what mood they’re in, quite simply.
Another one which is great is just sketch the space you’re
in at the time, sketch what you’re seeing at the time or the
desk is at the time. If you don’t want a sketch,
share a photo of where you are. And the last one, I said about the team shield, but what about
a personal shield or something that identifies you? This could
be useful when you have someone starting on a team and you want to share what you are.
So I’m going to wrap up with quick tips for games and how we
can start to use them more. First of all, be flexible, think
about adapting both in the format used during the game, but don’t be closed to
changing based on events. Adapt and go with the flow of the play
space. Always summarize. If you’re a group of playing a
group game, you really summarizing is key. But if you do solo play, I would
really, really encourage you to do that. Try and also do that,
any game practice needs documenting. Take photos,
document what happened. You never know when this is going to
be really crucial to you to come back to.
Clearly state the game space, open and close it. Music
can really help with this. Create play lists, it’s fun to
do. Set the tone of the game you’re going to play. Think
about the entire experience, as well, think about the game space
you’re not even aware of, the space the
person occupies if you’re working remotely. And by creating a safe place and
a place to play anyone can sketch.
I firmly believe this, and I firmly believe we should open
and use this more within the work we do. If your game has particular
personalities that dominate, that’s okay, you can use a
talking stick approach so someone holds the
stick when they communicate. But you can have a powerful silence
hat which the group can nominate someone, just for a tiny minute,
step out of the game space and be a little bit quiet and then,
they can come back in. You have to be a little bit careful how
you orchestrate this if you’re facilitating.
But it can be a great way to just encourage everybody to have the
same space. As a facilitator, you should
always be neutral. Don’t always be the facilitator. Make sure if
you find yourself really, really often facilitating, you make
space for playing yourself maybe in solo games. But also, make
sure you get to participate. Because your brain needs that
engagement. So none of what I’ve shared has
to be done in person. You can use async tools. The point is that
games and playing because if the benefits are
essential and really crucial to any part of a team and really the companies that
you are belonging to. I’d love to hear if you’re already
playing in the work space and if maybe you’ve been kind of wanting to
do that. That would be great. Please reach out on all of these
things. Share you photos, your stories, your games or any ideas that you have
around this. Thank you very much. If you’d like to find out
more about playing games, I’m going to publish my slides, but
here are a couple of links. Thank you. [ Applause ] Welcome to room 240. Our next session is Securing
WordPress in an Age of Zero Day
Vulnerabilities. Please, if you will,
[ Applause ] Thank you, Tammie. Welcome to
room 240. Our next session is Securing WordPress in an Age of
Zero Day Vulnerabilities. Please, if you will, silence all
phones and electronics. Please reserve the seats near the
screens for those with accessibility needs. And if you
have any questions or accessibility needs that have
not been addressed, this is the guy in the plaid shirt you need
to talk to. He’s the room manager. We have a Contributor Day coming
up on Sunday. You don’t have to have experience to contribute.
You don’t have to be a developer to contribute. Please go to the Get Involved
table in the sponsor hall or you can
attend a session called Everyone Can Make
WordPress better. And you’ll get more information about
Contributor Day. WordFest is tonight at City
Museum. Your badge will be required. So make sure you don’t
forget it. And now, here is Rahul to talk
about securing WordPress. RAHUL NAGARE: Thank you. Can
everyone hear? I think you can hear me. Hello, everyone, this is Rahul,
I’m the co-founder of Nestify and Scale
Dynamics. At work, I’m responsible for
some of the WooCommerce sites that
generate $200 million a year in revenue. I’m on Twitter, and here, I’m
here to talk about WordPress security. As you know, WordPress is a
common very attractive target for hackerers. If you were to
Google and start a search with “W,” why is
WordPress not secure? Now, I can help you secure your
WordPress site. The thing with WordPress is,
it’s actually really secure by itself and the contributor and volunteers do a
good job of keeping it that way. Why do we keep hearing about all
of the WordPress sites? All of us getting hacked over
and over, again? Well, they keep getting hacked because of something called a 0-Day Vulnerability. What is
that exactly? It’s a security issue recently discovered in either WordPress
Core themes or plugins. And hackers try to use these in
an automated fashion, mostly. You can have a very secure
site with all the secure plugins and everything is going great.
And one day you install an update that has a security bug
in a plugin and suddenly, now, you’re exposed to the security
risk. And these issues are no not just
limited to free plugins you can download from WordPress.org, you
can also have security issues and premium plugins, premium
themes. If you go to this site, this is
a list of recently discovered security issues in WordPress
plugins. You can also go to the same site to see issues with themes and WordPress
Core. And if you look at this, there
are some really popular plugins on this list. And they have lots
of installs. And you can scroll to that site
here, but if you go to this link, there’s one or two
security plugins that have security issues, which is ironic
to say the least. So when a security issue like
this is discovered, hackers try to
attack as quickly as possible before the developers have a chance to fix
that. So you might be wondering, why? Why are they trying to hack my
site when all I’m doing is hosting
Game of Thrones fan fiction, and I guess everything’s better than
last season’s writing. So it would make sense if my
site had great guard information that would get something out of
hacking my site, but I still get hacked even
though there is nothing interesting that a hacker would
want. So when these attacks happen,
hackers have one of these three motives. First is to traffic to some
other site, and they do that either to get
better ranking, better or they have ads
from the Canadian pharmacies on the spam sites they want people
to watch. Next, hackers can inject links
or JavaScript on your site. The SSL rankings increase and
they can get more traffic. If they have JavaScript on your
site, they can do stuff like redirect your visitors to some other sites or
install malware, Bitcoin on the
computers, or if browsing from the mobile device, they can redirect them to app store
and have them install malicious apps. Finally, hackers can use your
site to attack other sites. Basically, what they’re doing is creating an army of thousands of
hacker sites. When the security issue is discovered, how do you
actually use it? It’s a pretty simple process,
actually. It’s a list of WordPress sites,
and this part is pretty easy. All you need to do is go to
services like public web that will give you a list of a million WordPress
sites in one click. And that list will have all of the
plugins that your site uses, all the themes, the exact versions
and so on. So you get that list. Because I tried to hack it, go
to the next site, try to hack it, and so on. In order for
these hacks to be profitable, they need to be done
quickly and on as many sites as possible. Just scroll the browser and tell
it to open as quickly as possible and try to hack them.
And lucky for us, because we use automation, we can apply some
principles to block most of these types of
attacks no matter what plugin they’re targeting. And we use these principles at
Scale Dynamics. We’ve had customers spend thousands of
dollars on firewalls and their websites are still getting
hacked week after week. And when they applied these principles,
those hacks stopped completely. So here they are.
First, it’s this one happens a lot. Your side takes you to a spam
site. And hackers do this by updating the site URL and values in your
database. And if you just add lines like
this and make it read only. Even if the hackers try inject
your database with different site URL values, your site will
still not redirect. And by makeing config read only,
you can be sure that other plugins
are not able to override this file with different values. Next is protection against
automated plugin updates. I’ll share a link to download
the slide, so you don’t have to worry about taking notes right
now. Plugin option updates. These affect a lot of plugin
social welfare and others got hacked like last month because
of this. This is what hackers can do.
They can access certain plugin functions without actually
logging into WP Admin and they can, like,
import CSVs or change values in your site. Inject code and stuff. So to
protect your stuff, what we will do is limit access just from
your home and office IP addresses. So in this example, just
replace, XX and YY with your home IP, office
IP, and any other locations that need to access WP Admin. And
we’ll leave it open so your plugins don’t break. And when you add the PHP access
to the site, even if the hackers are trying to attack, they know
you’re running an insecure plugin and that plugin allows
them access to WP Admin without actually logging in. They won’t
be able to access it because your web server will block it. Next is protection against
general code injections, spam comments and such. If you add lines like this in
your action, what it does, ignore all
of the POST requests not coming to your site. Users will be able
to submit forms, comment, buy products,
everything. But even if hackers are just trying to inject
millions of sites out there, they won’t be able to see your
site. What do you do if your site was
hacked in the past and it still has left over code ingestions?
You can instruct your web browsers, the visitor web
browsers to simply ignore the code injections and not display
them. So in this example, what web browser, CSS,
JavaScript, fonts, all of the images from
Google Analytics and from Google Maps. Even if your site was hacked and
some popup script or readable script, browsers can refuse to load
that. And this gives you enough time
to go in and clean up or hire a cleaning service. But even
during that time, your site will not look like it’s hacked, and
it’s going to other location. So installing malware on your
user’s computer. So what are the results? Redirect spam, blocked. Injections and links, blocked.
Attacking on other sites, blocked. Now, you should still follow
good security practices, stronger
password, secure hosting, application web
file and such. But if you use these principles
along with other security measures, you’ll be protected
against majority of the automated hacks that keep
happening day after day and affect millions of other sites. You can download the slides on
scaledynamix.com/WCUS. You can contact me on Twitter. Thank
you. [ Applause ] Thanks, Rahul. Welcome, again,
to room 240. Our next session is with Matthew
Rodela talking about wrangling multisite, tools and tricks to tame your network. Matthew is a recovering IT
consultant who now builds websites for a living. Based out
of the Washington, D.C. area he’s found success with turnkey
website service and enjoys sharing his experiences running
it with other web consultants. Before he comes up, let me
remind you if you have a cell phone or electronic device with
you, please silence it. Reserve the seats near the screens with those for those with
accessibility needs. And if you have needs not addressed or if
you have questions, that guy in the gray plaid shirt is the one
you’d talk to. We have Contributor Day coming up
Sunday. You can go to the Get Involved
table at the sponsor hall to get more information. Or you can
attend a session called Everyone Can Make WordPress Better. WordFest is tonight at the City
Museum. Make sure you take your badge. That’s how you get in. And now, welcome if you will,,
Matthew. [ Applause ] MATTHEW RODELA: All right.
Thanks, guys. Getting started a little bit
early here. So that’s good news. Because this morning, I was
running through my talk. And it ran about 20, 25 minutes,
so I’m glad I got this extra five minutes at the beginning so
I can take my time with it and feel like I don’t have to
rush so that the poor guys over here doing the transcribing
don’t get aneurysms. So we’re going to be talking
about multisite and specifically, wrangling
WordPress multisite. We’re talking about it from the perspective of solutions
provider. So if you build websites for your customers, I
want you to start thinking about using multisite as a tool and
platform for doing that. And we’re going to be talking
about how to best provide that as a solution for your
customers. And then, how do you make it a little bit easier for
them. Because we love WordPress, we use WordPress. We’re used to
the WordPress dashboard. We know what it can do. And we love it.
That’s why we’re here. But often times, our clients are
the people who are delivering websites to don’t, are intimidated by it,
don’t know how to use it. The perspective is delivering a
platform that they can log in and build out the website, make
it simpler, more controlled, give them the exact tools to do
exactly what they need to do on the platform. And then, they
will be more successful that way.
So before we get started with the main talk, I want to
run over some definitions. First of all, this talk is not
going to, is not for developers, right? We’re not going to be
talking coding or anything like, we’re not going to be getting
too technical. I want this to be a talk that is accessible to
everybody. Whether you’re an implementer, designer,
developer, or someone who just has a platform with a lot of
people who might need a website. But you’ve never really
built websites before. This is a great way to provide a
website platform for your users without being a developer,
without being too technical. We’re not going to get too
technical in this talk. WordPress multisite, though, if
you’re not familiar with what it is, it’s built into WordPress
Core. And it gives you the ability to create a network of sites, what are
called subsites. And all of those subsites act as
their own stand alone WordPress install. But they’re all sharing
resources with one WordPress installation.
You only need to install WordPress once, you only need to
install plugins once, you only need to install themes once. And
all of the subsets are sharing those one installs. And that’s better on resources.
That makes it simpler for you to manage and to make sure that all of the
websites delivering on multisite are the same. So there’s no
deviation. You update a plugin once, and
that plugin is updated on all of your customer sites. So that’s
basically how WordPress Multisite works in a very quick
nutshell. When we’re thinking about
WordPress, we want to think about three different
dashboards. The first is the network Admin
dashboard, where you manage network-wide settings. You
manage all of the sites on your network, this is where you
install plugins, themes and update those. And then, you have the main site
dashboard, this is the, kinds of like the home base, the main
WordPress website. This is where, for example, if you’re
getting people to sign up for your platform, this is where they’ll
come through. This is the main domain for your site. This is often where you’ll
install marketing plugins and stuff like that. And then, you
have the subsites, these are all of the sites that get spun off
of your network for your clients to use.
And those are called subsites. And then, what I kind
of want to reiterate in this talk and get
WordPress solutions providers to start thinking about is the idea of websites as
a service or WAS or turnkey
websites. And I’m going to get into the definition of that in a
ZEK. But before I do, I want to talk about myself really quick.
My name is Matthew Rodela. What the genesis was that brought me
to this place where I am talking about this for you today, I started out in
IT consulting. I’ve been building WordPress websites for
about ten years now. And I acquired a theme, which
was, called Tech Site Builder. And it was a theme that was for
IT consultants to build a website for their IT business. And it came with tutorials about
how to install and configure and build
out the theme. And so I acquired that, and I wanted to turn it
into more of a platform. So I decided to turn it into an automated, multisite system,
kind of like WordPress.com. That was my inspiration for it. And,
you know, we see lots of these types of services out there now,
wix and Squarespace and Weebly. And
that’s what I wanted to do with this theme. Support was getting
to be a headache. And at that time, it was the kind of the common practice to sell a
theme for one price and then support it forever. And that
wasn’t going to work out for my business, and that wasn’t a good
model for the customer either. I wanted to be an automated
multisite, kind of like what WordPress.com was doing . I
spent months, almost a year of trial and error of building this
thing out. Custom coding stuff. This was about five years ago,
and five years ago there wasn’t a lot of tools on the market of
building a website as a service platform. Now, there are, and
that’s what we’re going to talk about later on in the talk. The result was techsitebuilder.
com. They get a platform where they can build out the website
on their own, add their own content, keep it updated on
their own, and we provide the platform for that, we give them
specific tools and plugins that will help them get to the end
goal that they want to get to. Then, through that process,
and through that journey I started thinking about how this
is a good solution for other website consultants and
people who deliver websites to clients. And that’s where I thought about
the WASaaS to describe this model. What is WaaS, apply the SASS SaaS model. You were able to keep software
updated, adding new features, making it low cost for people to use it, but give
them powerful software to use. We’re taking that model and
applying it to website delivery. Turnkey websites delivered automatically via WordPress
Multisite. It’s a perfect platform to do this. It has an
easy to manage core that’s WordPress and then, it allows
you to spin off subsites from that very quickly.
The focus of the business model is on scale and monthly recurring
revenue, MRR, instead of the traditional model for delivering websites which is
charge thousands of dollars, spend many months building this
thing out, customize it for the customer. And then, either go
away or support it over time. It takes a lot of resources, takes
a lot of time, and takes a lot of client management. We automate all of that with
this type of system. Customers love it because they’re usually
paying less than $100 a month to be able to use and have an
effective website for their business. Encourages DIY.
Instead of building a website for a client and saying, hey, I
know best, here it is. This is set in stone. This is your
website. You’re giving them a platform where they know their
business best, they can go in and add the content they want,
add their own services, their own photos, whatever, you’re
giving them the platform to be able to build out what they
want. But you’re giving them the best tools to do that.
And really, to make this business model successful, you
want to focus on a niche. So like I said, Squarespace,
Wix, dominating the market of just general website builders. Where if you focus in, I focus
in on IT businesses, you can focus on whatever industry niche
you want, and you can be the best solution for that industry,
the best website platform for whatever industry you’re
targeting. So now that we kind of have an
idea of what websites as a service means, how that ties
into WordPress Multisite, let’s talk about the tools. I want
this to be a super useful talk for you, and I want you guys to
be able to take away some useful tidbits. So I hopefully won’t go through
this too fast. I’m going to be sharing a lot of links. At the end, I’ll share a link
where you can access this slide presentation if you didn’t get a
chance to write everything down or take a the photo with your
smartphone or whatever. So the first plugin I want to
talk about is WP Ultimo. Five years ago, WPUltimo didn’t
exist well. Now it exists, it’s great. The developer of Ultimo is here.
Thank you for this plugin. Before I had to cobble together
a bunch of sloughs. Now WP Ultimo allows you to
provision websites for your customers in an easy way, allows
them to onboard. It allows them to pay if you want, but allows
you to sell subsites to your multisite plan on a
subscription. You can create multiple pricing plans. And this
is the beauty. On those plans, you can limit them by things
like, you know, how many posts do you allow them to create? So
if you want to sell your platform for $5 a month, let them, you
know, only create five posts, great. That might be all they
need. And that will be perfectly fine for them.
You can limit it by the amount of media they can upload,
the disk space they can use and you can really put controls
around your hosting costs. And keep that in check. And then,
other things, like, how many users they can add. You can make
certain themes available to certain plans. So you might
have, you know, one tier that’s getting started tier and
it’s, you know, very basic theme. And then, you have another tier
that’s e-commerce tier and you give them access to a plugin that’s built for, a
theme built for e-commerce. You can tier out your subscriptions
like that. And then, they can pay monthly,
quarterly, annual, whatever makes sense for your business
model. One of the cool features of WP
Ultimo is it allows you to build a template site. You can build
out a nice beautiful site, you can add starter content to help people get started with
content that fits their industry. And that site gets copied every
time someone signs up for your service or platform. So you can
build out the perfect site and then hand it to them and say,
hey, take it from here. We’ve got you started in the right
direction, we’ve given you the tools, now you can start
building it out from there. That’s a really cool feature of
WPUltimo. You can check that at WPUltimo.
com. That is an example of the
onboarding wizard that WPUltimo provides. You can choose a plan,
your customers can choose a tier plan. You know, middle tier,
basic tier, normal tier, premium tier. They select the plan, then
they create a user account on WordPress, they pay in whatever
way, and then, it provisions a subsite for them for whatever
template you set up in the backend. It creates a nice flow and user
experience for your users to go through.
Another one I’ve been working on with my cofounder is called Key
Press UI manager. Ask And we use this to wrangle
the different admin menus. This was probably one of the number
one road block I found my multisite clients running into.
They would ask, what’s the difference between a page and a
post? What does media mean, exactly? What, how do I get to
the place where I go to customize my theme? The
customizer. And that’s buried under the appearance menu.
So to be able to take some of these menus, rearrange them,
rename them, hide the menus you don’t want to give them access
to, the things that will confuse them. Not only an admin menu, but the
tool bar in the front frontend and the backend . But also the
customizer. I love the customizer, it’s a cool tool for
my clients to use to be able to see the changes they make in the
theme in realtime happening on the theme. That’s very, you
know, what people come to expect from a website platform these
days. So I love directing them to the customizer, but
sometimes, a customizer has extra things that you, that your
clients don’t need or it’s confusing, hard to find things,
things get buried. You can use this plugin to
rearrange and pull out subitems in top level menu items so
they’re easier to find. You can style the dashboard and updates
are coming fast and furious in this plugin. So pretty soon,
you’ll be able to rebrand the dashboard and add the logo and
change branding and we’ve got a Gutenberg piece coming in so you
can show and hide and rename different parts of the Gutenberg
interface to make that a little bit easier for
customers to get their brain wrapped around. We know, especially when
we’ve got, multisite, you have potentially
hundreds of people using a website off of one WordPress
installation. That’s kind of scary. The caveat with backup plugins,
many of them will backup in an instance, but if you need to
restore it, they restore that single instance. With the
multisite, the whole website is considered a single instance,
Mosebachup plugins you can back up multisite, but when you
restore it, you’re restoring the whole network. Sometimes, you want just a
single subsite. One of your customers made a mistake and you
want to restore that from a backup. There are a few
different backup plugins that can do that. My favorite is Updraft Plus. But
when you look for a backup plugin to back up the had network,
network, you want to make sure they have a way to restore a
single subsite and not all buck backup plugins are able to
do that. Until KeyPress Manager gets
these features, I recommend this
plugin. This allows you can put your
logo in there and make it look like your company’s CMS. And
that’s the beautiful gift that WordPress gives us. It’s an open
source platform and we can rearrange it and wrangle it and
do whatever we want to it. You can check that out at
videousermanuals. com/white/label/CMS. You can add
your branding and low go to the header and footer of the
dashboard and customize the dashboard in different ways.
Couple cool plugins, little features, enhancements here and
there to multisite. WordPress Multisite is great,
but it’s built into WordPress Core. It doesn’t get the love as if it
were a separate product, for example. Every time there’s a
WordPress update, there might be one or two things thrown in for
a WordPress Multisite, but doesn’t update or get new
features as often as someone like me who uses it a lot would
like. These plugins fill that gap and adding extra cool
features.. It’s free, it can be found in the repository. And beyond multisite is on code
canyon. That’s just a an example of a
few of the things it adds. They add different sprinkles of
usability that makes using multisite a lot easier.
Okay. Really quick, I’m going to run through hosts.
Talking about hosting can be controversial. Everyone has
their favorite. Or everyone has, you know, a bad experience with
one and they don’t want to use it, again. What I’m going off here are
specifically hosts that are compatible with the domain mapping of
WPUltimo. Because it allows you subsite customers to map their
own domain to their website which is what they would
eventually want, right? When you create a subsite at first, it’s
on a subdomain. You want your users to be able to map your
domain, but there’s a piece missing and that is when they
map the domain in the WordPress dashboard, you still need to
find a way to bring that domain into the control panel of your
host. WPUltimo automates that. One of those hosts in my
favorite is WP Engine, no affiliation with them. That’s
what I happen to use. I like because its with WP
mapping well, it’s got the security and
caching, multi-site provisioning and
one-click staging environment. Another good one is Closte. It’s got an extra feature, and
that is Auto-SSL. Once your customer maps the domain, it automatically gets HTTPS
assigned to it through encrypt. And not many hosts have that
ability built in. It’s a little bit more flexible than some of
the other ones and the pricing scales. So that’s another thing to keep
in mind as your platform grows, you’re going to be getting a lot
of bandwidth usage and stuff like that. You want to be able
to have it scale predictably. A bunch of others here. I’m
not going to go through them all, but if you want to kind of
look into that, you can go to help. WPUltimo.com and that will give
you a list of hosts that are compatible with the automated domain mapping of WP
Ultimo, dev, run Cloud, Server Pilot are
ones, so those are some good lists
that will work with this whole WaaS concept. Just lessons
I’ve learned running a turnkey website platform, be
picky about plugins because the plugins are going to be used by
potentially hundreds of people on your platform. Opt for
premium plugins versus free plugins so you know you’re
getting good support. And so that you know they’re being updated and fully supported by
people who are getting paid by their time. Using a managed
WordPress host, all of the ones I talked about are good, or you
can find one. Make sure it’s got good
WordPress Multisite support. And see if they’re open to
integrating with the automated domain mapping.
And finally, one of the biggest performance hits you’ll
see on a multisite network is all the images people are
uploading. And a lot of, and we know from client experiences
building websites for clients, when they upload their own
images to the sites, they don’t optimize them, they take the full raw
image and upload it and shrink it down to
100 by 100 and kills your load time. Make sure you’re using a
good image optimization plugin, WP Smush
Smoosh works really good and automates
the whole smooshing process. So that’s my time. But if you want to take a look
at these slides, go to getkeypress.
com/WCUS. It’ll take you to the Google slides and you can look
at them at your leisure. And we talked about the concept of
turnkey websites in our Facebook group and we’re always talking
about it, search turnkey websites in
Facebook, and it’ll take you there. Thanks, guys. [ Applause ] Thank you, Matthew. Our next session is supposed to
be with Joe Casabona, as far as I know
it’s canceled. If you’re interested in Contributor Day,
you can go to the sponsor hall and go to the Get Involved table and
learn more about that. I’ll see you, again, at 2:30. ULT Moe. . Bohr KOE. Lest ya. ROI Rest API Rest API. Good afternoon, room 240. If you came to listen to the ROI
of UX, you’ve come to the right place. I want to take a minuteit’s
canceled. If you’re interested in Contributor Day, you can go
to the sponsor hall and go to the Get Involved table and learn
more about that. I’ll see you, again, at 2:30. . Good afternoon, room 240. If
you came to listen to the ROI of UX, you’ve come to the right
place. I want to take a minute to remind you to silence your
phone and or electronic devices so they don’t disturb while we
are listening, please reserve these seats closer to the
screens for those with accessibility needs. And if you have needs that have
the no been not been addressed or if
you have questions, please see our room manager, he’s the guy
running around in a gray plaid shirt.
Contributor Day is Sunday. You don’t have to be a pro to go
to Contributor Day, you don’t have to be a developer to go to
Contributor day. You can go to the Get Involved
table at the sponsors hall or attend a
session called Everyone Can Make
WordPress Better and learn more about
contributor day. WordFest is tonight at the City
Museum: Your badge will be required.
Make sure you take it. If you’re a kid, make sure you’re with
somebody who has a badge. Let me tell you just a bit about Olesya. She is a researcher that thrives
in fast-paced environments, she
firmly believes if a user can’t use it, it doesn’t work. In her free time, she’s really
good at not being a nature person. Please welcomer, Olesya. [ Applause ] OLESYA BOREYKO: Hi, everyone.
Okay. Last talk of today. Let me. . Technology. Okay. The UX of this.. Hi. There are no slides. All right. Cool. Hi, everyone, my name is Olesya,
I’ll be talking about ROI of UX. There are a lot of acronyms. And
I’m going to get to them in a couple of minutes. But first, I’d like for you to
go back about six years and I’m going to tell you a story. About six
years ago, I was working as a freelancer at a, cranking out
the WordPress sites, the 500, $700
WordPress sites. Just working that freelance
grind and being exhausted from those
12-hour days. Having worked at such a
neck-breaking pace, it took a pause and I love
tea, a lot of tea was involved. I really started to think what
exactly am I doing? Why am I doing this?
What problem am I solving? How can I add value to the few
virtual pages that I’m making beyond
just what those virtual pages represent? And at that moment, and it
didn’t happen overnight, but that realization helped me
pivot my understanding of web design. So instead of being a web
designer, I became a researcher and
investigateor, a fixer for my client. And I noticed a lot of my
clients would come to me with an inkling of an
idea for a business. And they didn’t actually know what they
were trying to do. Before, I would be really frustrated as a
web designer because there was no direction. But I started using that as an opportunity to add value and
help them understand understand what they’re trying to achieve
and how to get there. Within a few weeks or a month of
me pivoting my approach and start ing selling that added value, I
closed my first $4,000 website. Within three months, I
signed $20,000 website contract. And none of those jobs took
longer than the $500 websites I was making. The only thing that
changed was my approach. Today, we’re going to talk about
three things, and it’s going to be how to add value, how to
discover the dominant question for the website for
your client, and how to measure your impact. The first foundational thing
that I keep going back to is to understand that website is a tool, it’s not an
end goal. It’s means to an end. I like to think of it in the
$500 website land, your client probably considers that as money
out. So a website will be like a pair
of designer jeans that has an EsS
Es esthetic value. So it is up to you if you’re
making WordPress sites to pivot that understanding froming for your
client . To make sure your value goes
beyond those few virtual pages. And let me give you an
example. For instance, you’re working with an investment adviser . And you developed the website,
you develop the social media strategy SEO and it gets, gets your client
$50,000 lead. So there’s a really clear correlation between
the work that you’ve put in and the money that went back into
your client’s pocket. So establishing those
correlations and thinking in if you remember
in numbers is really, really helpful in adding value and
selling more work. Let me tell you another story.
That’s the second story and the final story. I also feel like we need to get
the energy up a little bit. So this is a very famous
story in the land of UX design, UX, the second acronym, user
experience. You might be familiar with it,
but this story is a story of a $300
million button. A really large retailer hired a
UX consultant to look at the checkout flaw. The stakeholders were okay with
the checkout flow, they were just not extremely happy with
how it was converting. So this is the form that you see
here that they had. So customers would add items to their cart
and then, they would get to the checkout flow and they would
have this form. Email address, password. For repeat customers,
there’s a log-in, for new customers, there’s a button to
register. And you can also recover your password if you
forgot it. Looks fine, right? Sensible
enough. The UXors did what UXors do,
they ran a bunch of usability tests. And
this is what they found out. New customers absolutely loathed
this form. Because they were not there for
a long-term relationship. They were there for, to check
out the items. The first time, they don’t know this online
retailer. They just wanted it to be quick and easy. Repeat customers also weren’t
happy. And you see that there is no
“remember password” field or checkbox here. So they were
constantly forgetting their email addresses or passwords, actually half of 45% of folks in
the database had multiple log ins.
And some of them had as many as ten. So imagine this system that
prevents sales that a lot of people signed off on this
design, right? And it has been sitting there, essentially losing money for
that online retailer. So this is whereis what the
UXors did. Changed one button and added text. So essentially
they said, you don’t have to create an account, but
if you want to, you can. And these are some of the
numbers that resulted in. So 45% increase in purchasing
customers, 50 million sales increase in the first month. And within the first year, it
was a $300 million increase in sales. And I really like this example
because those are astronomical values,
but it’s also very clear cause and effect that proves the value of research
based UX design. I like to view design as an
iceberg. So as you know, 90% of the mass
of an iceberg is under water. So for me, the tip of the
iceberg is that polish. That’s your look and feel and you drive
with it and it’s very important. But that’s not going to deliver
the full value. that you can bring to the table.
In user experience design, you use a number of techniques to
figure out how to find that value. And here I’m listing a number of quantitative techniques in the
button case, they used the combination of quantitative and
qualitative techniques and that’s what most UXers would
do. They used benchmarking, time on
task analytics. They also gathered a lot of
interviews, in-depth interviews and surveys. Talking about adding value, and
I’ve also mentioned the second thing
is asking for the dominant question. So the dominant question here is
just essentially figuring out the
goal for your client behind the website. So I’m going to give you a few
examples here. Say you’re making a website for a restaurant. The
goal there could be bringing more people into the physical
location. And think of it in numbers
terms. Sort of benchmarking, right. You
have to, especially when you’re doing redesign, you’ll have to
benchmark the original state. And finding
the dominant question and what number to actually look at what
indicator to look at is very, very important.
Say you’re making your website for a beauty blog and their goal might
be to drive traffic from social media and monetize on it later
on the website. You know, we talked about investment
advisers. Their goal might be to just
generate leads. So getting, understanding that
and quantifying that would help you
present that value to your client. And so we’ve talked about value
and the dominant question. And now, we’re at a practical part
of the talk where we’re measuring
your impact. This is a very, there is a very
simple loop that happens when you’re
trying to measure your impact. I’ve mentioned redesigns of
websites. And a lot of work of a freelancer is in redesigns. I
cannot stress this enough, you have to measure before the redesign.
You have to figure out what the benchmark is and measure. Then
redesign and measure off the redesign. And the difference
between the two values is going to be that impact that you’re
bringing to the table. Okay. So I’m going to show you a
couple of slides with a lot of numbers on it. So if you have some coffee or
soda or ignore it, I guess. So we’re talking about here.
We’re talking about an improvement score. So I’m kind of diving into the
meat of calculating your impact here. And the formula is very
simple. It’s the metric after minus
metric before divided by metric before.
I’m going to give you a really simple example. Say for this particular example,
you’re working on an e-commerce site. And you’re measuring the success
rate before redesign and after redesign. Success rate is when
someone puts an item in the cart and checks out and pays for it.
So before the redesign, it was 30%. And after redesign, it was
53%. You can plug those numbers in and get an improvement of 76%. Let’s imagine it’s a very small business and they sell a $10
product to 10,000 customers a year. Putting those numbers in the
formula would get you the improvement score of $23,000 a
year. Which is, once again, very small
business doing very few sales. For the second example, I wanted
to be a little out of the box . Say you were hired as a
contractor to work on a very small part of a
large internal tool for a large company. Maybe it’s a good time keeping
tool or like a vacation tracker or something. And before the redesign, the
average time for an employee to complete that task was over 100
seconds. And after it’s 60 something
seconds. So you can plug those numbers in, again, and get the
improvement score of over 66%. Let’s imagine a little
bit more to fill in the blanks here and say they
do that three times a week, they get paid $30 an hour and there
are 1,000 people. So just that small change can
lead to an impact score of $54,600 a
year. So understanding that and calculating that provides you
with that impact score where you can measure the impact and show
it to your client. So this is my last slide, I’m
just going to sum up everything, and
my timer says I am at 15 minutes, which I’m really proud
of. So we talked about three things. We talked about adding value,
defining the dominant question, and measuring your impact. I encourage you all if you’re in that stage where you’re sort of
in the grind of freelance work trying to figure out how to get out of it, how to
upscale and start adding value to your work, think of your work as
something that goes beyond the visual design. Help your client find that
dominant question. And often times, I find that part is even
more valuable than the website itself. And then, measure your impact
and show those dollar signs that you’re
saveing. Yeah. Thank you so much. [ Applause ] sponsored a break. So you have a
break until 3:15. We’ll see you at the next session. Good afternoon, room 240. If you are here to learn about
the REST API and authentication, you’re in the right place. Let me remind you are here to learn about the
REST API and authentication, you’re in the right place. Let
me remind you if you have a phone on your on an electronic
device, I’d like you to silence it so that you don’t disturb
your fellow attendees. Please reserve the seats near the screens for those who have
accessibility needs. And if you have needs that have not been
addressed or have any questions, there’s a guy running around
here in a gray plaid shirt, he’s the room manager, and he can
help you out. Contributor Day is Sunday. And if you have interest in
that, you can go to the Get Involved table in
the sponsor hall or you can attend a session called Everyone
Can Make WordPress Better. Actually, I think that’s
probably running concurrently with this session. So grab it
tomorrow. Or go to the Get Involved table. Word Fest is tonight at the City
Museum, your badge will be required, don’t forget it.
If you’re a kid, find somebody with a badge and go in
with them. Let me introduce my speaker, his name is Jonny Harris. He’s a
developer, he’s been using WordPress since version 1.5.
He’s been contributing to the WordPress core for about seven
years, and he’s a maintainer of multisite users
and site health components. Welcome, Jonny. [ Applause ] JONNY HARRIS: Hello, mic check.
Everyone hear me? Hello, everyone. My name is Jonny Harris and I’m
going to talk about the REST API and authentication. A little bit about me, I’m Jonny Harris, I’m Core contributor. Multisite, Users and Site
Health. I’m going to prewarn to
nondevelopers out here, this is quite a high-level talk. And if you’re nervous, you might
want to do one of these to sort so far sneak out the back.
[ Laughter ] I’m going to start with who
knows what the REST API is? Just show of hands. That’s most
people in the room. So I’m not going to bother to explain the
REST API. If you don’t know what REST API is, quickly Google it
and catch up. So I think the first thing we need to talk
about is what is authentication? And why is it so important in
this context? So authentication, simply put,
is the process of action or verifying
the identity of the user. We have users, and we,
basically, authentication is proving that you are who you say
you are. And with the WordPress context,
you have roles, capabilities and what that user can do is based
upon those things. So why is authentication in the
REST API so important? So we’ve had the REST API in
Core since I believe 4. 7, I believe it was 2007 it went
in. And it was an amazing piece of work when it went in. It’s incredibly featured. Most
of the content types are mapped to endpoint.
But one thing it does limit the REST API is the lack of
authentication. With the REST API you can
obviously read data out of WordPress, you can get posts,
you can get options. But you can also create posts, you can
delete posts, edit existing posts, you can assign new terms and
taxonomies to posts. But all those, you know, things requires you to update any
content or remove content from the WordPress database require
you to have authentication. For obvious reasons. You don’t want
to allow any random person on the internet to start deleting
posts on your site. Unfortunately, the internet is
full of trolls and you’ll have horrible things happen very
quickly if you allow that, so you do need authentication, so
you know the requests are coming in from a valid person. And
yeah, they have the right to do what they want to do.
And, you know, without authentication, it’s the REST
API is limited. Of course, there is, you know, quite a few
existing projects using the REST API. You’ve got Gastby, Front Lean,
really cool JavaScript stuff. But they’re limited without
authentication into Core. So I think it’s important when
we start talking about authentication to understand how authentication
works in WordPress. At the moment, and then we can
start to understand how we can use
plugins and code to build our own authentication mechanisms. So in WordPress Core, WP
includes user. There’s a function called demean
current user. And this is very early in the
boot start process. And it is used to work out whether there’s
a current user logged in. This function uses a filter
called demean user, and you’ll see it returns false here. So by default, it, the filter
runs and if you didn’t hook into it, it wouldn’t do anything. What’s nice about WordPress is
actually feeds its own filter. So in WordPress, you have a
cookie, obviously, to prove you’re logged in. And WordPress
itself will hook into that filter with these two
filters here to work out whether you’re logged in. So those two filters run and
will check if there’s a cookie set. And then, we’ll set the user
accordingly. What’s nice about them being
filters, is in your own code, you can then remove those
filters and change the behavior. If you really wanted to, really
wanted to completely disable how, you know, cookie-based log in, you could
filter, you know, filter WP validate
false cookie. And you could narrow the log in
by cookie, again. Another thing, another way you
can authenticate, you can pass a
http header with a value of x WP. Before I
start talking about headers, everyone know what http header
is? Show of hands. That’s about half the room. So I should probably briefly
explain what HTTP Header is. When you
make a connection to a website,could narrow the log in
by cookie, again. Another thing, another way you
can authenticate, you can pass a http header with a value of x
WP. Before I start talking about headers, everyone know what http
header is? Show of hands. That’s about half the room. So I should
probably briefly explain what HTTP Header is. When you make a
connection to a website, on your phone or, you know, using some sort of other
application. The first part of that is the handshake between
the device and the web server. And the first thing that’s
requested of a site is the headers are sent. So this is an example, requests
that goes to my site. I’m doing a call to the main
space, I’m using the get method, I’m using
I want the path itself, I want it to be
the schema of HTTPS, and there’s a bunch of other stuff in there,
as well. I want it to be JSON. You can also see X WP. Along with the standard headers
like method and path, you can send
your own custom headers. So these, you can’t see them,
you can only see them when you go into the dev tools in Chrome or useing
something to see the headers coming in. But your browser’s
doing that. But you can also the headers. The methods today use a header
of some variety to pass some sort of key to authenticate
against. Okay. So when talking about the REST
API, I think it’s really important to think about use
cases. So there’s a British saying
called “horses for courses. ” And what horses for courses
means every horse can win a race if that horse, if the course is
specifically designed for that horse. Basically, what that means is
every, every problem has a perfect solution. And every tool has, you know,
something as long as you use a hammer, something you use a
screwdriver for. And when people talk about authentication, they
get KPILTed. Oh, let’s use this authentication mechanism. That’s
great . But that only solves one particular use case. It doesn’t
solve all of them. excited. Oh, let’s use this
authentication mechanism. That’s great . But that only solves one
particular use case. It doesn’t solve all of them. It’s
important to put it in the prism of use cases. I’m going to take
you through four use cases. So please keep these in mind
when we talk about it, we’ll reference these, again. The
first use case is the one that everyone in this room will
definitely have used, which is Gutenberg. Gutenberg is a, actually an
application on top of WordPress. JavaScript React based app, it’s used
within WordPress itself. It’s kind of the primary custom
of the REST API at the moment. It’s very popular use case. Use
case two, another popular use case. And it’s going to be a
talk after this one about a lot about sort of
headless WordPress and Gatsby and stuff
like that. This is a very popular use case of booting a site in a different
framework like React view, maybe it’s
hosted on different infrastructure, maybe it’s
served out statically or whatever. And out of WordPress using the
API. So that’s another very popular use case. Use case
three. So this is from a client project
I worked on. I worked on a client that had 52
sites and a multisite. And each site was in a difference
language. And they wanted a tool to be able to take data out of an existing
translation API. Once They want to update the
“about us” page. And they want to automatically update across
the sites on the multisite. They want the tool so they don’t
have to manually edit it themselves. They want a tool to
automatically be able to push that out between the sites. And they want they weren’t a PHP
company or JavaScript, it played nicely with the existing
technologies. Written not in WordPress, not in
any language WordPress recognizes, Python, to be able
to push data into WordPress. Use case four. Has everyone heard of the
website IFTTT. It’s an automation tool that
allows you to — say you want to — whenever you post anything on
Instagram for it to automatically create a post on
your website. You can create one called
recipes. I want it to publish to my WordPress site automatically. It uses the existing XML API,
which is not the greatest to say the
least. And this, it would be much
better if it used the REST API and that’s another use case of
external party that you don’t necessarily trust as a way to
feed data into your WordPress site.
Okay. So there’s our use case. Use cases. So I’m going to
now discuss the different authentication mechanisms. First one is Cookie
authentication. This is built into WordPress and
what Gatsby is making at the moment. But basically, how the, how
Gutenberg currently works is it uses cookie-based authentication and it uses a not
value, which is a secure key, and that is passed to the REST
API. You know, it works, it’s fine,
but one of the issues with cookie-based
authentication is that you have to be on that WordPress site to
get that key in the first place. O so when the page loads, it
puts the key in the header of the site using a JavaScript
variable when it reads the variable out.
Which means that all the authentication has to happen, it
has to be on that site. And as we discussed on the various use
cases, you’re not always on that same domain to be passing
WordPress, you might be in that Python application wanting to
push data in and you’re not in the WordPress context. So where cookie aweuthentication
is a get out of jail free card to be able to use the restREST API in
WordPress, it doesn’t fit a lot of the use cases I mentioned
before. And so, you know, one key
benefit is it’s built into WordPress so you can start
using. If you’re in the WordPress context, so you’re already in the Admin
terminal or the WordPress frontend, you can start using
authentication and do some cool stuff with it. It doesn’t require SSL, so a lot
of the mechanisms I’m going to talk about will require SSL. I know these days, it’s fairly
trivial with tools like Let’s Encrypt,
but SSL isn’t for everyone. If you’re on a smaller host that’s
not providing an SSL, the it can be
difficult. It’s currently not a requirement for WordPress Core.
So, yeah, SSL is something we’re going to talk about quite
a lot in this. Security, it’s okay. It’s not the best. Any
sort of cookie-based authentication isn’t the
greatest thing. It uses a secure key that uses ,, we could do better from a
security level. It’s fairly easy to implement because it’s
already there, you don’t have to worry about it. But there’s no easy way to
revoke access to a user. There’s no
mechanism to do that. There’s no mechanism to do it. And it
doesn’t store any passwords. You have an encrypted key that you
can pass around and you’re not worried too much about that, the
security of that. So if we look back at the use
cases, it’s a good use case for one because obviously, it’s how
it’s currently working. But if we think about the other use
cases, it doesn’t really matter at all. So that’s why we have such a gap
in the ecosystem right now because we do have
authentication, but it doesn’t really fit a lot of the use cases that
we have. Next one is BasicAuth, basic by name, basic by nature. Of the
ones we’re going to talk about, probably the easiest to
implement, to understand. However, I’m not a fan of it for
reasons you’ll learn. Basic Auth uses a an http
header. It’s simple, you take the user name and password and put semicolon in
the middle of it and basic 64 encode it.
And it’s just an encoding mechanism. If you take that 64 and decode
it, you can get the username and password back. And the obvious issue with
BasicAuth. If you communicate it over the wire, you can decrypt
that string and get the password back out of it, again, which is
obviously an issue because you’re communicating a password
down the wire. Which would basically mean if
you want to use BasicAUt uth, HTTPS would be required. YOPG this is a viable solution.
And how it’s been used in the past for local development, it’s
great, easy way for me to just quickly hit the
restREST API for check data and some other tools. It’s on my dev
environment, it would never go into production.
You know, it’s got a lot of issues here. It’s not built into
WordPress. It does require SSL if you want to do it securely.
It’s not secure, it is super easy top implement. You can bay 64 encode it. There’s no easy way to revoke
access. You’re using the password, that might cause a lot
of problems. And if you want to have a
persistent connection where your client was continually
requesting it, you would have to store the password in plain text
in your third party application. That’s horrific you’ve got to
keep a password in plain text lying around.
If that third party gets compromised, you’re done. We look at use case, probably
use case one would work and the rest wouldn’t. Particularly the
one it would be problematic would be if this
then that. That’s the third party, you’re giving your
password freely to a third party and saying, please don’t get
compromised, please don’t do any horrible things to me. If your website is business
critical, like, noway, doesn’t make sense.
Application password. So this is another authentication
mechanism, you know, in WordPress you have passwords, existing
passwords. And basically what Application
Passwords does is adds secondary passwords to your user. For if this then that, I want to
create a secondary password. You can get it to randomly
regenerate and have a nice 64 bit password,
and you can use that password to give to third parties. And it gives you a, quite nice,
there’s like a little UI for this. And you can create
passwords and easily revoke them. So one thing I didn’t mention
here, there’s the REST API core team
have created proof of concept plugins for all of the things
I’m talking about today. You’ll notice here there’s the GitHub
link. Check out the slides afterwards if you want to have a
play around on any of these mechanisms. Sorry about that.
So this one that doesn’t have a REST API, the core team haven’t built
this plugin, but this one’s quite widely used. So it’s got
quite nice UI. It’s quite simple concept for people to
understand. But it’s, again, it’s a
password. And passwords are problematic. In security, people
forget them. You know, having to revoke them and remembering it’s
a bit of a nightmare, having to mainly copy and paste passwords
around is a nightmare. If we look into the table,
again, it’s not built into WordPress. Again, I think, you’re going to
get SSL for this, security I’m a bit
iffy about. Implementation, it’s not standard authentication
mechanism. So you have to write something custom for it. It’s
easy to evoke. I can click get rid of password
and you’re not storing the main password for the user anywhere. So it does have some winss
there. The use cases, doesn’t work for use case one because
you’d have to create a secondary password for that. So that
doesn’t really work. Use case two, you know, you
could possibly get it to work. It’s not great. And then, for
use case three and four, it does work quite well for. If this then that, I can
generate a secondary password. For the application, I can have
a side car password for that. It does map. So now we’re going to get on to
OAuth1. I’m going to talk about OAuth1
isn’t very well supported. I think even Google got rid of
their OAuth1 support I think three or four years ago. It’s an
old standard, it’s been replaced by Oauth2, which I’ll
talk about in a P minute. It’s a clunky standard if you’ve
had to ever implement it. This is a diagram showing how
it’s implemented. I won’t get too deeply into this. But
basically a three-leg process. You have to go, you have access,
request tokens and gets you an access token. Go backwards and
forwards three times. And I always dealt with OAuth1.
If anything goes wrong in the process, you have to start,
again. And for users, that might give
up and might get frustrated. Where you will have some
benefits, I’ll get to in a minute, it’s super clunky and
kind of old tech now, it’s not something I would strongly
recommend. But it is an option. Go through this table, again.
Oh, this is the same one there. Not going to work for us,
obviously. It doesn’t require SSL. It doesn’t require you to
have SSL because it’s storeing secure keys so you don’t have
to, it is secure. It’s somewhat easy to implement
if there are, like, libraries that you can use in PHP and Python and stuff.
You can implement it. Newer languages like GO and
fancy dance JavaScript stuff these days, there’s not a lot of libraries for that,
easy to use that. It does have a simple mechanism to revoke
tokens. So you can generate a token once
you’ve done the handshake, you generate a token and then you
have that nice panel that you can revoke them, which is pretty
cool. And it doesn’t store passwords.
But if we look at the use cases, doesn’t really work for
the first one because you’d have to generate a client for it and
have to do the handshake for the first time you started using
Gutenberg. And the rest of the use cases, it does work quite
nicely. There’s quite a lot, this is
probably one of the few con slides I have because there’s so many
cons with OAuth1. Once you’ve generated a token, you have to
make sure that token is secure. So a lot of, some applications,
that doesn’t make sense. Sometimes, you have to pass that
token down the wire. So you might have some issues around
that and keeping, maintaining that token.
It’s hard to set up and it’s quite hard to maintain if you’ve
got a site with absolutely tons of viewers. I’ve worked on sites
with hundreds of thousands of users maintaining those
implementations can be a real pain.
The existing proof of concept plugin has some issues when I used it
at Scale. It’s use Maintainer of users,
it’s problematic for a number of reasons. I had a site with a half a
million users on it. The user metatable ended up
being 4 million rows. Trying to query these keys out of the
table doesn’t really work and didn’t really scale.
I was getting response times of like five-second queries. I’m
an insane person, I’ve got WordPress site with half a
million users on it, but if you need stuff at real scale, I
didn’t find that particular plugin particularly scaled. And the current Oauth1 one
particularly well supported. It was done as a proof of concept.
And everyone else has kind of left it in the dirt compared to
other stuff. Rightly so, in my opinion. There
are better standards that we can spend our time on. I wouldn’t,
you know, I wouldn’t — I personally wouldn’t use it in
production. Oauth2 is a successor to Oauth1.
There’s a much better maintained plugin for that. Oauth2 plugin is much more,
it’s, it’s much more, there’s much more
test coverage for it, it’s been used in production, I believe,
for several large client sites. And it’s just a better plugin,
if I’m honest. This has a much less clunky
backwards and forwards. So how, you know, I’m not going to go through this diagram too too
many details. How many people have logged in
with Facebook on a website? Or used Twitter or anything the
log in? If you have, you’ve used Oauth2. You see that log-in with
Facebook, it allows you to authenticate it,
bounces you back. So I think it’s a work flow that obviously Facebook’s using it
because it’s a nice work flow and I think people are
comfortable with that work flow, bouncing you around and bouncing
you back. And Oauth2 was a standard that
was very much thought about the ease of use and ease of
implementation. It went for like seven years of implementation and there’s an
open standard where people from different industries helped to
implement the standard. Obviously it isn’t going
through WordPress. One of the things, it does require SSL, it
is part of the standard. Again, meaning it’s maybe not super
appropriate for the WordPress community. But it’s super
powerful, very secure. Easy to implement. There’s
numerous JavaScript libraries that implement Oauth2. It’s got access tokens, you can
remove them and it doesn’t use passwords.
For the use cases, again, the first use case isn’t great.
But the rest of the use cases, it works for. There’s a lot of pros and cons
for this. I mentioned ifed a few before,
there’s library support, revocable
tokens, it’s much simpler than Oauth1. You know, financial level of
security, you can add in and what will
probably be required for implementation in the WordPress
community is adding a middle man called a broker. This is basically basically sits
between your client and your application and basically says
that both sides are legit. Yeah, basically, this guy’s
okay, this guy’s okay. Stops bad actors of brute forcing it. The problem with having a broker
is someone has to host that. That has to be a web server that
someone maintains somewhere . And the original idea was maybe
. org would host a broker, and
everyone talks to the .org broker. But that’s obviously
problematic. Then you have a massive single point of failure
for the WordPress project where everything’s talking to the
single broker, who is going to pay to maintain and keep this
broker up? Who is going to host it? All of these sort of things. The reason Oauth2 hasn’t ended
up in core is because of the questions around using the
broker. And whether Oauth2 is probably
an overkill for what we’re doing. There’s a lot of
specification, a lot of bells and whistles to it. It’s great, but it’s kind of
maybe a sledge hammer. It’s probably
overkill. While I was doing research for
this talk, I found a really funny article from the creator of Oauth where
he’s disowned the project. He got his name removed from it. It’s a funny read. It’s about
how he hates the project now. It’s kind of funny. And next thing is JWT
tokens. And I’m going to give a quick
shoutout. Not only do they work on REST API, they also work on QL, and Jason has
written for JSON WT tokens. So as you can see from this
slide, there’s already four
implementations of JWT. And I think there’s a swell of people
that want to use JWT. JSON web tokens basically how
they work. If you can see on my slide,
maybe not. But you, you have an array of
data. So this data includes your user
ID and expiration date. That sort of is like an JSON
object and encrypted. So you take a JSON object,
encrypt it, and you can give that token
to your third party. That token is what’s called a bearer token.
If you think of a bearer token a bit like your hotel key. One of
those keys you get into a room with. As long as you’ve got that
token, you can get into your hotel room. The tokens have an expiration
date on them. After 24 hours after you check
out, your key is no longer valid anymore. So the mechanism to revoke
access is as long as the token is valid, you can keep using it. But once it’s expired, you
can’t, the token is then ignored and you’re rejected. How long it is is up to you.
Depending on your application, you might want to have an access
token that lasts a year. I can trust this guy, I can have an
access token that lasts forever. Or if you don’t trust the third
party, you can have an access token that lasts 25 minutes.
And after that, you have to reauthenticate. That’s why this
standard is incredibly flexible because it really is, you can really customize it to how, you
know, your level of trust with the third party is communicating
with your REST API. If we go through the table
here, is it built into WordPress? No, it doesn’t require SSL,
because the tokens are encrypted. It’s fairly secure, easy to
implement. There’s numerous libraries in different languages, it’s simple to
implement. There’s no simple way to revoke access. Once you have
an access token, you’ve got access as long as that
access token exists. And it is valid. If you do want to have a
mechanism to revoke access, you have to have what’s called a blacklist, like
wanting to maintain a list of, oh, that token is a bad token, I
don’t want to allow it anymore. And that has scalability issues
to it. In my example, I’ve got half
million users and I want to revoke access to everyone
located. I don’t want to have to go into the plaque list half a
million rows into the database to say I don’t want any of
these. And when any token comes in, I
don’t have to search my entire database for those blacklists.
So maintaining a blacklist is a bit of a nightmare. But it
doesn’t use passwords, which is a massive win.
And for the use cases because it’s so simple to
implement, it is one of the few, authentication mechanisms
I’ve talked about today that will fulfill all four of the use
cases I talked about. So the pros and cons is super
simple to implement. That doesn’t require SSL. Good client
library support. You know, tokens automatically expire
doesn’t require SSL. And that blacklist is the real
pain and maintaining that blacklist. And yeah. Another advantage, as well,
because the token is encrypted, if you
want to, you can actually, you don’t actually need WordPress to
provide that token to you. If you know the encryption key
and the encryption mechanism, you can generate your own tokens
in your application. So in our Python example, you
could give the key to both the WordPress site and the Python
application. It could generate its own tokens if it wanted to. Which is another massive
advantage. A lot of the examples I’ve given today, it’s WordPress
giving you that token to give you access. Whereas JWT tokens, you can
manage your own. I think it’s a win.
What is the future? I am not a member of the REST
API Core team. Kevin sitting here in the front is and he’ll
get angry at me if I start saying things on his behalf. So this is my own personal
opinions on the matter. It’s going to be no surprise to you
what I’m going to say next, I think the future is JWT. I think it’s incredibly sensible
and it maps to a lot of the WordPress ideals and how
WordPress currently works. And it would slot into what we
currently have quite well. But I think as we, you know, as
we realized by doing this talk,
there isn’t one solution that fits all. Like, if — I can’t in good
grace say it’s the solution to all of the problems. It works
quite well for most of them but not all of them. I think it is probably the best
solution if you’re doing the large scale sort of enterprise
size project. I have used Oauth2. For the example I gave
about syndicating content, I use Oauth2 because that’s much more secure
than tokens. It was easy to implement. So I think what
WordPress doesn’t need to solve all of the problems. And I think
JWT solves enough of the problems makes sense that it should go
into Core. If you decide, eh, JWT isn’t for
me, I should have a drop-in or a plugin or something I should be
able to maintain my own mechanisms or maybe have
multiple mechanisms in parallel. For some things, using JWT, some
things Oauth2 and mix and match. So I think WordPress should
support having different mechanisms side
by side more than it currently does.
These slides are going to be available online. You can do
some further reading. Particularly, read that rant
from the Oauth2 guy because it was hi
hilarious. And there was a great post from
Ryan McHugh. He was talking about the gotchas
when he was trying to implement it into core. The slides are
available here. You can take a quick screen shot of that. And
thanks, everyone. [ Applause ] Any questions anyone? Would you mind going back one
slide really quickly? I didn’t have enough time to take a
picture. Thanks. So when you mentioned that with
JWT you can actually generate a key under the right
circumstances in an external application other than
WordPress, that sounds like a major advantage. But it also
makes it sound like you could theoretically generate a
key for anyone’s site. Could you explain a little bit what
information went into that key generation that would keep it
secure without a handshake? JONNY HARRIS: So there’s very
different encryption mechanisms you can use to generate these
tokens. I’m going to do this on the fly. All these different encryption
mechanisms that you can generate tokens with. You can kind of go as much as you want with it. You can generate these tokens.
And everyone knows about encryption. To encrypt
something, you need a key. So to generate that key, both
the WordPress site and your client application would need to have
that key, a shared key . And you need to make sure that key is
kept secure in your client application.
So don’t put that key in GitHub. Don’t spread it around. That key would allow you to then
generate those tokens yourself. As long as you can keep that
encryption key secure, then you can
generate your own tokens, which is a massive win, I think. Any questions? [ Applause ] For the broker that you were
talking about, would the broker need to be a trusted third
party? Okay. That’s what I was wondering. JONNY HARRIS: Yeah. So with brokers, I would expect,
I expect .org would have one. I think the large hosts would have
their own. So if you’re on WP Engine or any of the other ones,
they would probably host their own.
That, again, would really be up to each host to implement that
and keep that secure. And it might be a cost they
might not want to put on themselves. They might just think, oh, let’s
let the .org do the rest for us. If you use Jetpack, that dot com
would become your broker, but
maintaining that and keeping that is big ask for the
WordPress community. And I think it’s maybe too much
to ask for, if, you know, I think it would need a company to
sponsor it, really. Wen
When you mentioned several implementations of JWT out there
already, can you speak a little bit to what you see might be the
path towards getting something like this into Core and what
work has been happening, where that’s been happening? How people might be able to get
involved? JONNY HARRIS: Yes, cool. Okay,
yes, there are four implementations I documented
here. One is just for Graph QL,
there’s three implementations. The first one is on the .org
repo. On the REST API organization on GitHub. And this
was worked on by a member of the XWP team. And that seeks to solve the
problem of revoking tokens by mapping,
basically, it is a layer on top of application passwords. It kind of mixes and matches the
best parts of application passwords
of the ability to revoke tokens. And it has a simple
implementation on the frontend. That’s one project, you know, it’s really
promiseing, the current idea there. I think it needs some
work to get that into Core. The other implementation I used
before is by TM, something like that. And that’s a much more simple
implementation. You can give it the username,
password and that will generate a token and give it back to you. That’s ridiculously easy to use
from an implementation standpoint.
And the last implementation, I haven’t actually looked into. But JWT is just, you can
actually mix and match JWP. We mixed and
matched it with application passwords, but you can also integrate JWT tokens into
Oauth2. You can instead of generating a
secure key with it, you can generate a
JWT token. So, yeah, it’s massively powerful. I’m sure it will be the, what we
use as a solution. But how JWT works under the hood
is really up for, you know, up to
the rest of the team to work out, isn’t it? connection between the site and
the application when using JWT? How do you go from having,
you’re using your application to the application being in possession of a JWT? JONNY HARRIS: I’ll use a super
simple example to explain it. Let’s say on my, on my frontend,
I’m on a React frontend and I’ve got a
log-in button. A dial-up comes up with user
name and password in it. Put the username and password in. And
what would happen is the JavaScript frontend would then
talk to the endpoint, it would send a request to the endpoint with that username and
password you’ve put into the dialogue and
that endpoint would return the token. Either, it would give you an
error message saying your username and
password is done, you take that token, store that in your apply
Lpplication somehow, either in redux, or
cookie. And going forward, every subsequent request for the REST
API, you need to make sure you pass that token in
the header so every request is then authenticated. I guess my question is how are
you making sure that the application is not going to take
that password if you’re entering in your credentials in
the application itself. How do you get to the point where you’re not reimplementing the
Ouauth by going to the site with pay load and redirecting and
making sure you’re doing that securely? JONNY HARRIS: Well, in that
example, depends how you’re implementing JWT, that’s a fun example, but you
can have a different flow that generates a token a different
way. And for my Python thing, you can
give them a token that lasts forever. So you wouldn’t be
asking for the password. You create the token in a secure
way. Maybe don’t do it online. You can go into the terminal,
click generate token and copy and paste that into your
application. You can have a couple of different mechanisms
to be able to generate the tokens. You can either do it via
password or manually generate in the terminal if that makes
sense. I think we’ll call it. Everybody show appreciation for
Jonny Harris. Thank you, Jonny, I’m a
designer. That’s great. You have 15 minutes before the next
session starts so take a break. O aught. Good afternoon. Last session in
this room. Let me take a moment to
Thank you, Jonny, I’m a designer. That’s great. You have
15 minutes before the next session starts so take a break. Good afternoon. Last session in
this room. Let me take a moment to ask you to silence your
phones or electronic devices so as not to disturb the people
near you. Please reserve the seats kind of up here next to the screens for
those who with accessibility needs if you
have needs that have not been addressed or have any questions,
there’s a guy running around here in a gray plaid shirt. He’s
standing up there waving. He’s the room manager, he’ll
take care of you. Contributor Day is Sunday. If you haven’t already, go to
the Get Involved table at the sponsors hall. Or you can attend
tomorrow a session called Everyone Can Make
WordPress Better. You can learn about Contributor Day. You don’t
have to be a developer. You don’t have to be a pro, they can
use lots of different people. WordFest is tonight at the City
Museum. You have to have a badge to get in. So don’t forget it.
If you’re a kid, go in with somebody that has a badge. And
let me tell you about our speakers. Muhammad Muhsin, he has written
for Smashing magazine and worked for companies like JS for WP and
Simpler. He’s joining me remotely with
Jason Bahl on stage. And I think Jason’s going to
have his Twitter handle in his slides.
You can reach out to both of the guys if you need to. And
please welcome Jason. [ Applause ] JASON BAHL: All right. I don’t know if you can see it,
that’s Headless WordPress right there. I thought it was fitting
for the day after Halloween. We’re talking about using
WordPress with static site generators. So first off, who am
I? My name is Jason Bahl @Jasonbahl
on twitter. You can call me JSON Bahl if you
want. I’m a Denver native. I’ve been doing WordPress for over a
decade at this point. I just love WordPress and open
source in general. I’m a creator and maintainer of
WP Graph QL, which you can install on the WordPress site
and turns your WordPress site into a Graph QL server. I’ve got
to show some pictures of my family so you trust me.
[ Laughter ] So let me start by saying, so,
as mentioned, Muhammad was accepted
to speak but unfortunately his Visa
got denied. He’s in India and wasn’t able to travel here. So I was asked to take his spot
since I know a lot about the topic he was going to talk
about. But I wanted to give him the opportunity to present since
he was accepted. We thought about livestreaming,
but thought there might be too many technical difficulties with
that. So I have a video that he’s prepared. We’ve got a
15-minute video that he’s prepared. So I’ll play that. It’s his talk he was planning on
giving originally, and I’ll come up and expand on some of the
things he says. I’ll go ahead and play this, and I will be
back when it’s done. MUHAMMED MUHSIN: Hello, folks.
Thanks so much for having me today. My talk is titled Using P
WordPress with Static Site Generators. My
friend Jason is joining me on stage. You can hit me up if you
have any questions. My name is Muhammad Muhsin and
I’m a senior app developer at rt Camp. I’m also an author at Smashing
Magazine. I come from Sri Lanka. It’s an island in the Indian
Ocean. And I like to travel different places when I get the
time. Let’s talk a little bit about
JAMstack sites. JAM stands for JavaScript, APIs
and Markup. JavaScript because JavaScript is
used dynamic programming. There’s no PHP that renders the
Markup. The APIs because JavaScript is
used to communicate to server side
processors to APIs. And on the markup use ing — JavaScript sites are
created using static site generator,ors. And this is how site generators
work. At the deploy time when the site
is being deployed, it fetches the content. It can be WordPress, it can be
REST API, it applies a template and
this is static site generator and a static site generator will
give you a static site. It happens at the deploy end,
not at . So a static site will — there are a few popular
site generators like Hugo. And Jekyll. And builds for the template. JavaScript is useing gitbook
uses JavaScript, and popular and
Gatsby because that’s what I love most. So why you should use Gatsby,
let’s talk a little bit about that. Well, Gatsby, it’s fast. That is
the most obvious reason you would use Gatsby. It is fast for
the right reasons. When you have a typical website,
it connects to a server site or language which is PHP and. And fetches data for MySQL and
renders into JavaScript. But when it comes to Gatsby
site, it already has rendered the exchange once it’s in
JavaScript. And it sends you the JML files.
And that makes it that much faster and you can across. And it’s easy to get 100% across
as opposed to a typical website. It’s not just fast, it’s also
super secure. It is just static first. That is not server side language
or database. So it’s impossible to hack a
static site. It is also extremely cheap
because it is serving on a static host. It can even get
free hosting on a server file. Sam, the profile of Gatsby, his
company went from $ to $5,000 from $5 a
month in hosting a Gatsby site. Also Gatsby has core helpers. And other benefits which gives
you a great experience. Also a great
user experience. Gatsby is easy to get started. Gatsby has great documentation,
excellent tutorials and many first timers share their experience
with Gatsby. And with Gatsby, the Graph QL,
it uses them and features them useing
it, for example. Watch the video on how to get
started with React. So the hype is real. What What really is Gatsby? It’s a React-based static SITS
site generagenerator. It uses React to the Markup. And it is also an application
framework. You can build React with Gatsby,
comes with multiple APIs, content
flow, JSON, you build JAMstack sites. And you can use all the awesome functionalities that React such
as React context and redux,. And let’s
talk a little bit about React. React is is a JavaScript library
and it replaces the layer of
application. They are composable and
reuseable so you can use a single component. And these components are
declarative and use a template which is similar to HTML, and it’s called JSX, and
you write this within your JavaScript
files and it is how you are used to by writing JavaScript within
your HTML files. And React is virtual, which
makes it blazing fast. Let’s talk a little bit about
GraphQL. It’s a language, and with
GraphQL, you ask what you need and get exactly that. No more
and no less. And it is an argument, and I
would argue it’s a great alternative
to REST API. And GraphQL has a single
endpoint. And you will not need to fetch
multiple endpoints to get multiple records. For example, let’s say you need
a host, a featured image and
operators, you do not need to hit three
different endpoints. You will get all of this data in a single
request. And it was created by Facebook
and is now open source. So today, I want to talk to you
all about using Gatsby and WordPress
and why it’s a great choice. Gatsby is a static site
generator and it has all of the big benefits
of being blazing fast, cheap, easy and so on. And WordPress is a great,
powerful CMS that we all love and use. And it powers a third
of the web. So combining the niftiness of
Gatsby with the power of the CMS that WordPress is, we can have installation
first. That’s what we’re going to talk about today. So the first way is to use the
WordPress REST API. And this would take the REST API
and graph it in a schema. The second way is GraphQL, and
try a schema. And I would say this is the recommended way by
many people and myself. Useing WPgraph QL, you have installed this, it is Gatsby
plugin and this plugin will fetch the
GraphQL from WPGraphQL and stitches them to
schema. Running on your WordPress site
and faster and more scaleable way. Let’s talk about WordPress
GraphQL. GraphQL exposes the data as
GraphQL schema. With this, install WordPress
plugin and the composable part. Starting a Gatsby project. For
starting a Gatsby project, you have them install, you install
gatsby-cli as a global package. After that, you a design folder and gatsby
new my-project and you change it and
type in Gatsby development. And this will open a development
environment in your terminal, and you can go on building your project
in your visual studio or any code of
your choice. I hope you realize how easy it
is to get started with Gatsby. Now that we have talked about
Gatsby, let’s talk about the feature
that it released late last year. Gastby themes. And you let the end user focus
on Markup. It can store in the site folder
and functionality. And let’s say you have a Markup
site and e-commerce site and
documentation site. It can have three different teams on the
same website. And it also has a child theme
support, which is great for us. It was initialized, and the
Gatsby team to WordPress, I’m sorry, porting
the WordPress team and table
WordPress team to Gatsby. Check out Gatsby WordPress.com.
The lessons I learned by using the two technologies. The first
is not put everything in one place. For example, we have Gats by node js, which is the static
files by fetching data and creating
static files. So if this file, do not look all
the code here, but put the code inside separate files and call
these functions into this file. To be a part of the community. Gatsby at WordPress and the
community are super kind and helpful. And the community and receive it
and also to help. As a person and community.
And finally, you do not need a static site generator. Because for a lot of reasons,
WordPress can be a solution for you. For example, when you publish a
poster or page with WordPress, it is
available to you. But with Gatsby, it takes some
time. To build the whole website. And then, the post would be
available. And we are working on the critical builds happening,
which is not yet available for WordPress. So we are waiting for
that. And the other reason is that the WordPress plugins may not work
at first. You have to add functionality using REST API or GraphQL for it to
work. This is a few reasons you may not want to use Gatsby or static site
generator. It has a lot of qualities we talked about
earlier. What we covered today, we
started JAMstack and SS generators. And
we talked about this plugin, which is used to fetch data from the
GraphQL. And we finally spoke about
Gatsby themes. You can read this article I
wrote about how Gatsby and WordPress
have helped me build sites. And you can check out this tutorial that I wrote about
Gatsby theme. You can check out Jason’s talk
about Gatsby and WordPress. And finally, watch Jason Bahl’s
talk. So let us have kindness and
positivity. Thank you for having me today. It was a pleasure
talking to you. I want to mention two people
today, Jason Bahl and Tessa Kriesel. I
had to do this talk remotely. And thank you for making this a
reality. So thank you, Jason, and thank you, Tessa. And we can, you can email me if you
have questions. And we also hired an enterprise
agency, with WordPress products and if
you want to work alongside me, check out rt.camp/join. Thank
you. Good-bye. [ Applause ] JASON BAHL: All right. So I’m,
it was kind of interesting planning this, because he was
accepted for lightning talks. I got the final video and I said,
hey, you present what you want and I’ll try to present around
that. I’ve been working on slides. So let’s take a step back. It’s a framework based on React
that helps build websites and apps.
So the reason I’m here and why Gatsby sponsoring WordCamp.
Gatsby loves WordPress. Gatsby really wants to enhance
WordPress and enhance experience of WordPress users and
developers. We have file system API, search
with SQL. We have REST API, theme API, and
we often turn to plugins to enhance the experiences when the
default experience doesn’t work. Like WP Media offload by
delicious brains. The file system to CDN, like S3
and we turn to things like Elastic
Plus. If we need a better experience exposing JSON from
the WordPress site. And Gatsby wants to give an alternative to
theming. Just like we turn to other
solutions, like offload media, Elastic
Press or WP GraphQL, it wants to enable you to do things you do
with WordPress today, but better.
One example of that, a classic WordPress request, we ask to
render a page, WordPress we hit a WordPress server, execute some PHP. It’ll
check if it’s in the cache. If not, it’ll query SQL. Then I’ll
use the results to build an HTML page. And then, it returns it to
the user. This often happens faster than what I just did. But
there’s so many steps to this process. With Gatsby, since it’s static
site, the pages are compiled ahead of time. So the request
looks like this. You request it, the file’s immediately returned.
There’s no server logic executing to make this happen. So because of this, we get
security benefits, speed benefits and cost benefits as he
covered. So I want to point out some things we’re working on at
Gatsby to make this experience of using WordPress as
a headless CMS a great experience.
So things we’re looking at solving centrally is how do you
do something like template hierarchy and Headless
WordPress? If you’re headless, you don’t have context of what
template is what. We’re trying to work on problems like that.
How do you use Gatsby and easily extend it for templates you
expect to exist. Like a single post or an archive template.
Things you get for free out of WordPress. Things like routing
in Headless WordPress, there’s no concept of routing. We’re looking at common ways to
provide this out of the box if you use Gatsby. How can we use
native press search? And how can we make it work if you have things like Elastic Press or
whatnot active on the server. Things like preview we have
in the works, as well. And then, live data updates. One thing Muhammad mentioned is
a con or a why not to use Gatsby at the moment. When you publish
it, publish content changes in the WordPress, Gatsby has to
rebuild the entire site. We’re working on Gatsby Cloud,
which will have incremental builds. If you publish, let’s
say a typo correction on one page and you
have a thousand pages in your Gatsby site, Gatsby Cloud knows
where that change existed and can just republish that one page
instead of rebuilding your whole static site.
So as we all know, WordPress is just for blogs. I’m just
kidding. It’s also for marketing sites. And it’s also for e-commerce
sites. But it’s not just for that either. WordPress as I see it an
application platform. Gatsby is just a static site generator.
You see, Gatsby can take any data source like content
published in WordPress, get it something from WP graphQL it also includes
React. And that’s a powerful thing. So Gatsby is not just a static
site generator because it has React. It’s an application framework.
So this actually is an example of, like, something you
can do with, this is like an example of a work flow of creating content in WordPress
and seeing it show up in your Gatsby site. Yeah, he’s deleted, and undoing
a deletion. And here, we’re looking at what’s happening
behind the scenes so we can see it’s deleted page 77. Created
page 77. So you can see what’s happening behind the scenes.
Gatsby has context of what’s happening in WordPress. Here you can see created new
page. When we publish it, it shows up. Then we’ll add a featured image. So that’s kind of the gist of
it. So you can have this headless thing that’s not
templated in PHP with WordPress. But it’s not just this static
thing. The files might be static, but there’s dynamic interactivity in it that
can communicate with WordPress or whatever source.
So Gatsby loves WordPress because Gatsby is an application
framework, and WordPress is an application platform. So let’s see. All right. I’ve
got time. All right. So this quick screen shot and
I’ll live demo it. This is an app I built to showcase this. On
the left side is Gatsby app and on the right side is WordPress.
And I wanted to showcase that Gatsby and WordPress can be
used to build things, not just marketing sites or traditional
websites. This is like a Trello-like application. And we’ll actually open up code
really quick and look at it. But as you can see, as I’m dragging
and dropping things across lanes,
you can see it updates. I didn’t do rich UIs in Gatsby
and use WordPress as my framework, all
right. So, sweet. All right. So I’ll take a look, let’s see,
I’ll have to zoom this in quite a bit. All right. So one of the first
things I want to look at real quick is how we can
extend WP graphQL. These are quick examples. In my case, I’ll register a task
post type and a tax lane taxonomy. We can show it to show in
graphQL. So this is our registered task, registered taxonomy, task lanes,
showing GraphQL. Here, we’re registering types like an entry
point for us to query some of the lanes with the custom
resolver. So this basically calls git
terms. And this is an example of registering some fields to our
task lane in the schema. And then, we’ll look at what it
looks like to query these in a second. I’m registering fields
like cards and label so I can query these things. And then, I’m registering
graphQL fields to the schema, and a
couple of other fields. I’ll switch over and look at
what this looks like in graphQL. So just a little bit of code.
What is that? A hundred lines of code. We can register a bunch of stuff
to the graphQL API. And that will allow us to do things like
query. Of course. There we go. We can do things like query a
list of task lanes. Let me zoom in on this. We can query a list of task
lanes, right. Just because WordPress is CMS, we can use it
for organizing things that aren’t necessarily website
content. Right? So we can have lanes. And on that, we can ask
for the cards or the tasks that belong in those lanes. So these,
this is just data that exists here. So I’ll open up this
side-by-side and we can see this kind of stuff happening. Oh, hello. Get out of there. What happened to my other tab? I’ll learn how to internet one
day. What is happening?
There we go. All right. Cool. So this does have
authentication, so I can log in. This is using JWT, if you were
at the previous talk, you might be familiar with that concept. I
can log in. I entered my username and
password. In response, I’m giving a JWT
token. My React application can keep that token and pass it in
future requests to identify who I am. And then then, I can do things
like add a card, which this would be a task in WordPress. So I would say, I don’t know,
WCUS rocks. And what do we want to say? Thanks for coming to my
talk. So I click add card. It’s added
here in the client. WordPress doesn’t have realtime updates,
I’ll have to refresh over there. But we can see, WordPress can be
my beta storage for this. If I expand this table a little bit,
we could see the task lanes. If I drag this over, oh, of
course you’ve got to hit the drop zone. You can see my data’s
changed, right? I can use categories and post types to
build rich UIs using WordPress and Gatsby. Happy to answer any
questions. I think that’s all I’ve got prepared. So thank you
for having me. Started using Gatsby and
WordPress and enjoy. [ Applause ] Can you tell us a little bit
about the SEO implications for Gatsby ? JASON BAHL: Typically, Gatsby
sites see better SEO, partly because performance. Most Gatsby
sites are faster than competitor sites. In cases we’re seeing it faster
than AMP even. You still have to implement
things like metadescriptions and have good content and things
like that and manage your titles and things like that. If you’re
doing that stuff, it should work the same in Gatsby versus
WordPress, but you’re going to get the performance benefit
compared to most WordPress sites.
You can’t make WordPress very fast. I’m not saying you
can’t. But Gatsby makes it easy. Oh, sure, it’s not client-side rendered, server-side rendered.
Yeah, Google has no problem indexing it. Even things like O GTAGs will
work, right? It’s compiled. It uses React but compiled to
HTML so you could turn off JavaScript and have it work. I
can actually, like, here this is a project in the ecosystem static
fuse. It’s a Gatsby site. They’re building WordPress
themes. I can actually go into, where is
my settings? Wrong one. I can go in here and turn off JavaScript,
there’s a Gatsby site. Some things will be a little bit
different. But it works, right? So it’s used with, like, React,
they built it with React. But it outputs HTML and when
JavaScript kicks in, React takes over, again. Could you talk about the path of
converting plugins or making plugins work with Gatsby and WPgraphQL? JASON BAHL: Sure. I touched on
some of the APIs briefly here, but WPgraphQL you can
register fields to the schema. And I tried to touch base a
little bit, taxonomy, and you can register fields and
additional types to the schema. If you have a plugin, for
example, Yoast, let’s say needs to expose
like a metadescription or whatever on every post type that
it’s active on, right? So they can use this register
graphQL field. Oh, where did it go? They can use graphQL field
to register fields to the types and the schema they want to.
Register graphQL field post, for example, . And the name would be
metadescription, right? Or whatever.
So you can use these APIs to expose your data to the WP graphQL
schema that allows Gatsby to see what exists in your WordPress
site. And then, you can in your
components or Gatsby site, you can fetch that data and use it
however you want. Does that help? I’m new to static sites, how
does search work in this environment? JASON BAHL: Depends. One thing
we’re trying to solve, what I mentioned if you’re using
WordPress as a source, we’re hoping to allow just WordPress
search. Still do a post request basically back to WordPress or
graphQL query searching your WordPress server still, and then that could use elastic search or
you could bypass that completely and search to the client to something like
Algoliea or something similar. There’s various options like
that. Hi, I was looking, I’m currently
in the process of migrating my site to Gatsby. I was looking at
Gatsby themes, which seemed to not actually be themes. They’re
more like plugins. Can you explain them and why and when
you’d use a theme? of plugins in the WordPress
base, e-commerce calendar, they have functionality but also
views to render the functionality. The events calendar has a view,
it does things themes do like render HTML and styles to it.
Gatsby themes are more in line with that plugin and in
WordPress. Gatsby themes are trying to be experts at one
specific thing. They can be multiple things depending on how
you write code. But you could have a blog theme like Muhammad
talked about, a theme that’s expert at being a blog sourcing
data from a blog and rendering a blog. And then you could have a theme
at documentation and compose these.
One of the benefits of companies think something like
IBM or something that has hundreds of engineering teams
but one site maybe across many disciplines. They could each own
their theme of the site and it could come together with the
same component library and I’ll put an individual site. So that’s kind of a mental
model. We have a lot of work to do on the marketing site to clear that up. Maybe this relates to that or to
what you said with the previous questions, but if you have, for
example, a block that has some sort of complicated frontend
functionality, if you were rendering it from WordPress, you
could set something up to only for
posts or pages on which that block occurs. Is there any
equivalent way that you could expose that type of
conditional script loading with Gatsby? JASON BAHL: Yeah, so, that’s
pretty interesting. So I did a screen share, Daniel
from Shifter was, asked that a couple of weeks ago. I hopped on
a call with him. Recorded it. It’s on YouTube. He was looking at how to expose
on Q styles so Gatsby could query and use it. So there are
ways to do it and there’s a YouTube video showing how. I
think there’s other ways. In my head, most JavaScript you would
write in Gatsby, you would use the component directly instead of on
Q something from WordPress, and allow Gatsby’s bundler to make
use of it, like tree shake it and things like that. But yeah,
there’s going to be a lot of interesting stuff to figure out
with Gatsby plus Gutenberg that is also something we’re
exploring. uploads work? I remember in an
earlier slide you mentioned some sort of CDN, if you don’t have a
CDN, will it work in another way? JASON BAHL: Yeah, if you’re
using WordPress and upload images to WordPress, it goes to
the file system. But, yeah, CDMs allow your
images to be, like, distributed at the edge. So they can be
served a lot faster. So yeah, if you’re high-traffic
sites or whatever, sometimes the file system doesn’t meet your
needs. So — Makes sense. well. But page builders like Beaver
Builder, things like that. Do you have any tips? Or can you do
Googling for me and tell me what I should Google for planning
that type of thing? JASON BAHL: Yeah, I don’t have
an official answer, but I know somebody, Alex Young, he’s done a video on
YouTube, what is it? WP CAS is his channel and he’s
done WP CAS on YouTube. And somewhere in here, he’s got,
yeah, he’s done a lot of Gatsby
videos, like he did one on spinning contact forms recently. One of these in here is using
Elementor. So using Elementor with it. I don’t think it’s like
a plug and play thing where it’s like everything’s going to work
magically today. But it shows there’s a path to that being the
case at some point. I’m optimistic, you know, things like Gutenberg or Elementor or
Divvy or whatever can work without much effort at some
point. component. And I know there’s a
way for, to use this component with Markdown files. Is there a solution to also use
Gatsby Image with images inside content and WordPress? JASON BAHL: Yeah, right now, you
can use Gatsby with the REST API using Gatsby source WordPress, the
plan is to deprecate that some time in the not so distant future and basically
require WP graphQL as a dependency because there’s so much we can do with it.
Right now, if you’re using WPgraphQL, there’s inline images
that you can use to get images in
line your content. It basically finds images in the
HTML, converts that to a Gatsby image. And there’s also, what is
it? WP, yeah, so the other one, it’s not a plugin. But there’s a comprehensive
article written on how to convert
fields, like featured image, there’s not an inline image in
the content, it’s its own field in the schema. So this shows how
to do that. So we’re working on a new source
plugin that will do some of the stuff out of the box for you,
too. But yeah, this in the time
being, you can reference sources like this to do it today. Thank you. Hi, thanks for the talk. For those of us who are really
familiar with Varnish, generates static
HTML for sites, can you describe the differences between Gatsby
and a solution like Varnish? would say probably comes down to
React. You can use React to build your components, which then, you feed
the data into your components, that creates the static site.
But then, it can also be interactive also. So typically,
if you’re theming in PHP and cache the whole page but also
want to do something dynamic, like a slide show, you’re writing duplicate
stuff in cases. You’re writing PHP or whatever
it might be. So mostly developer experience
and out of the box, like, how React works. You briefly alluded to
Gutenberg. What are your thoughtss on
integrating Gatsby with Gutenberg and structured data? JASON BAHL: Yeah, I have a lot
of opinions about Gutenberg. Yeah, Gutenberg is challenging
for headless right now. Because if you’re trying to do stuff
with WordPress Headless, you need to be able to ask WordPress
for something. And if WordPress can’t describe what that
something is ahead of time, it’s hard for a headless application
to ask for it. There’s no outside schema or registry for
Gutenberg blocks. So there’s no way for a server API to expose
what blocks exist. So I’ve written like a two-page
thing, you can find it on the GitHub issue on Gutenberg 2 1/2
years ago or so about why that’s a problem. And I still hold that
stance. But, yeah, there has been made progress on that in
some degree. So WPgraphQL Gutenberg is an
attempt at solving that problem to a degree. So what this does,
basically, when the Gutenberg client loads, it gets the
registry from the client, stores it baaing in the database and
then adds it to the graphQL API so you can interact with
Gutenberg blocks with graphQL. It doesn’t scale well because
you’re relying on somebody loading the
Gutenberg Admin first for that to happen.
So it’s not ideal. If you had to load the Admin before the
post type was registered. Like, it doesn’t make sense. But it’s
a stopgap and it works. People are using this in production. So
we’ll see. A server side registry would be ideal, though. We have time for one last
question. you have user statistics on how
many sites currently have WP graphQL downloaded and in use? I do have some steps. We can
look at them together. So, it’s okay, it’s not on the . org repo at the moment. It may be some point. Yeah,
let’s take a look at some. You have to come to WP GitHub to
get it. What are we looking at? Let’s see. This week, can I change the
timeframe in here? Whatever, that’s this week’s stats. So we’ve got 20 220 clones, 1300
unique. So that’s for this week. Jason, give it up for Jason. [ Applause ]

No Comments

Leave a Reply