Yeah, the Zoom lady has told usthat recording is on. So I'd
like to take this opportunity towelcome everybody who is joining
us today. I apologise, excuse mefor being a few minutes late. I
was asked at a last minute fieldhockey tournament at my boys
schools were involved in andthings were running late. And so
I was trying to catch the startof the first match before I had
to rush off but that didn't workout. So I'll probably get a
WhatsApp message a bit later onto let me know what the score
was there. I apologise if thatdistracts me. As you're joining,
please let us know in the chatwhere you're joining us from and
let me know what the weather islike in your part of the world
because currently in Caterham,we are entering what I like to
think of as winter in Cape Town.June and July are our two
months. So it has been as the asthe colloquialisms says raining
cats and dogs for the past fewdays. It is it is cold. Not as
cold as countries that havethings like snow and subzero
temperatures but it is cold forCape Town. And it is dark in the
mornings and we don't observeany form of daylight savings. So
currently when I get up at 6amit is pitch black and it stays
pitch black until about 10 pastquarter past seven which is when
I'm sort of getting into the carand taking the boys to work so
we drive sorry to school so wedrive to school in darkness. So
I am keen to hear whether you'vegot some or whether or not
agencies it's cloudy and cool inAnaheim, California. Karolina is
from Argentina. It's cloudy hereand cold. Laura says that
they've just had five days ofrain but the sun is out today.
That's excellent. Rita is fromReno and it's sunny. Snohomish,
low 41. High 66. No rain. Yes,as long there will be a video
definitely. I'm just reading thecomments as they come through.
Artists from Frankfurt, Germanysunny weather today. I'm so glad
to hear that answer because I amtravelling to Europe next week
to WordCamp Europe and I'mlooking forward to getting some
some free summer. Jim says dryspell low temperatures. Ah
Natalia is from Greece and shesays it's warm and sunny. Yes.
So a bunch of my colleagues, notmy current colleagues, but
friends of mine who work atCodeable which is a WordPress
freelancing platform that I ampart of or used to be part of.
I'm still in the WhatsApp group.They have a WordCamp Europe
Whatsapp group that getsreinvigorated every time every
year round about this time andthey've all been posting their
pictures about how sunny it isin Greece right now. So Jerry
from Edinburgh says 12 degreesin Edinburgh K. Laura says I saw
someone swimming in the ocean inGreece. It WordCamp yes, there's
a lot of that going on. As longas you'll be there to also I'll
see you there. On the air fromUkraine. Hi there. Welcome.
machi from Bangkok. It's sohacia Yes, I believe Bangkok
gets very hot. Marks is hangingthere. Yes, I've only got to,
I've only got to hang in theretill Tuesday, at which point I
bought bought a flight and theyland in summer. It's gonna be
great. Okay, cool. So whileeverybody is joining, let's
let's kick things off here.Today we are going to be talking
about WordPress codingstandards. And before we get
into the official announcementsof the workshop, I have a quick
note on today's presentation.Usually, I try and make these
workshops as interactive aspossible. So I try and present
something where you can followalong with me on your side, you
can try out the code, you cantest it for yourself. But there
are excuse me, there are certainthings that require a little bit
of developer tooling to be setup some software to be installed
and depending on your youroperating system and your and
your local developmentenvironment. The path to set
these things up is a little bitdifferent. And I'm speaking
specifically about the composerpackage manager or dependency
manager for PHP, and the npmpackage manager for JavaScript,
which is installed when youinstal the Node js runtime. If
you are on a Mac, it's fairlystraightforward. You make sure
you've got homebrew installedand then you can instal
everything else throughhomebrew. Generally. If you are
on a Linux system, you cangenerally instal all the things
you need to instal usingwhatever package manager you
have, or you could probablyinstal most Linux systems, I
think you can instal homebrew aswell. And you can do it that
way. Windows is a slightlydifferent story. Because Windows
is not a Unix like operatingsystem. It doesn't have a Unix
like terminal. So setting up alot of these command line tools
requires a combination of eitherusing something like PowerShell.
And then something calledchocolaty, which is a package
manager for Windows. Sochocolaty is kind of a
comparison, comparable packagemanager to homebrew. And I've
always found it interesting thatthe windows sort of MSA default,
but one that is popular is namedafter chocolate, the windows
one. And the Mac one is namedafter brewing beer, I've always
found that interesting. Thereare obviously other ways to do
it, you can instal I think GitBash, which is a command line
tool, you can use the Windowssubsystem for Linux, which is
another way of doing things. Butit's one of those things that
really, it requires an entireseries of workshops or even
tutorials to kind of guide theuser through installing these
things. So today, we're going tobe looking at some tools that
require these packages and thesepieces of software. And I'm not
going to be able to have time toguide you through that
installation process. So if youhave these things installed on
your machine already, that'sgreat, and you should be able to
follow along. If you don't, thenI all I would suggest then is
just to watch the presentation.Keep an eye on the recording,
download the slides, all thelinks. And then when you have
some time to look into thesethings, instal these pieces of
software, and then and theninstal the packages and things
that I'm showing you today. I, Iwould love to do a workshop one
day around installing all ofthese things, but it's probably
going to have to be threedifferent workshops, one for Mac
OS, one for Windows, and thenone to cover anybody who uses
Linux, which I don't even knowwhat the percentage of that is.
And so, so for today, justplease bear with me on that one,
when we get to that section ofof the presentation. Okay. With
that out of the way, let's let'sdo the official announcements.
So again, welcome to everybody.And thank you to Laura, who is
CO hosting with me here today.It is lovely to have Laura on as
my co host. Laura recentlyjoined the training faculty
programme, which is a teamwithin the training team that
kind of helps administer thingsand move things forward. So it's
very cool to have you heretoday, Laura. Then if you can't
see this announcement slideright now, please do let me
know. There is a known bug withZoom, that we're aware of
uncertain situations that whenthe presentation is being shared
before you join the Zoom chat.You some folks can't see it. So
if you don't see a Google Slidesslide in front of you right now
that says announcements at thetop, please let us know either
in the chat or just unmute andlet us know. And I'll and I'll
disable and re enable thescreenshare. As always, we're
presenting in focus mode, butyou are welcome to enable your
video if you would like Lauraand I to see your face. You
don't have to, but you'rewelcome to do so. Focus Mode
just means that you can seeLaura and myself but you can't
see each other. And this justprevents any kind of zoo
bombing. I was saying to Laura,before the session started, I've
been very fortunate, and that Ihave never been zoomed, bombed.
But maybe I should say that withmy fingers crossed because it
could happen today. And then asalways, you are always welcome
to ask questions, you're welcometo post your questions in the
chat or unmute to ask questions.The only thing that I asked is
that if your question is notspecifically related to what I'm
doing on screen at the time,please keep your questions for
the place that I leave forquestions, or just post them in
the chat and then we'll catch upwith them as we go along. All
right, there is some code thatyou can some example code that
we're going to look at today,I'm going to share the link to
it in the chat. So you'rewelcome to download this plugin.
And like any of my otherworkshops, this is the first
time that the plugin doesn'tactually physically do anything.
It's literally just some examplecode that we're going to look
at. And we're going to we'regoing to see how it applies to
WordPress coding standards. Andthen if you're finding that
downloading the zip file endsup, if you're on a Mac, and
you're using Safari, anddownloading the zip file results
in just the PHP file sitting insomewhere in your desktop, there
is a setting on safari that youneed to I think disable, and
then it will allow you todownload the zip file that way.
And then lastly, just this ismore of a reminder to myself,
but if I start talking too fast,please let me know please slow
me down. I really do try andkeep my my pace measured. But
whenever I do more sort offreeform chats when I do those
developer AMA's I tend to getvery excited about whatever I'm
talking about and I tend tospeed up and then the Zoom
closed captioning can't keep upkeep up with my heart, my South
African accent and the closedcaptioning breaks. So let me
know if I'm going too fast and Iwill slow down. And then last
but not least,
as I'm asked earlier, yes, Iwill be posting this as it's
being recorded. It will beposted to WordPress.tv tomorrow
during the course of my daytomorrow, and I share it in the
chat in the Meetup event thenext day. Okay. Let us get on to
our learning outcomes today. Sotoday we're going to be looking
at what are coding standards andwhy we should use them. And then
we're going to specificallylooking at the coding standards
for WordPress, we're going to belooking at the HTML and CSS
coding standards at about thesame time. And we're going to
look at how we can validate anyHTML and CSS code that we have
using some online tools. Andthen we're going to be looking
at the PHP and JavaScript codingstandards. And then I'm going to
be showing you how you can dowhat's known as linting, your
PHP or JavaScript code on yourcomputer. The linting part is
where I will be using thingsinstalled via composer and npm.
So that'll be the part where ifyou don't have those things
installed, now, you might needto instal them later. And try
this out later. If you'rewatching this on WordPress TV
later, now would be a great timeto pause and go and instal those
things or wait until we get tothe section where I talk about
it and then pause there andinstal it there. And then if
there's time, and this is one ofthe other reasons why I set the
session to be an hour and a halflong, I want to show you
something that one of mycolleagues at Automattic setup,
Ryan, Walter, there's some ofyou might know Ryan, he, he does
like the coding live streams andand Ryan Walter codes or
something like that on Twitch.And he's actually set up a
starter template on GitHub thatyou can use to sort of pre
configure all of these lintersfor you. So if there's time, I'm
going to show you where that isand how you use that. Alright,
and so today, my lips code slideis going to say let's lint
because we're not going to becoding today, we're going to be
linting. And if you don't knowwhat linting is, don't worry, I
will explain that in a minute.All right. Before we continue,
I'm going to pause and grab aquick sip of water. If there are
any questions, now's a perfecttime to ask them. Otherwise, we
will kick off in approximatelyhowever long it takes me to have
a sip of water.
anybody remembers when I firststarted doing these workshops
about a year ago, I used to havecoffee a step at rush hour but
have a very big coffee flask.This was given to me by the
company when I joined. And Iused to have a fresh one of
those whenever I did myworkshops. And then I used to
wonder why am I why I used tospeed up towards the end of the
workshop. And I couldn't figureout why. And so someone said to
me coffee at four o'clock whileyou're doing a workshop? Is that
the best idea? And I wait, no,you're absolutely right. So I've
mostly switched towards it now.Okay, thank you, Laura, for
posting those links in the chat.Very, very handy that okay. So
the first question, what arecoding standards? Now, there are
many ways you can define whatcoding standards are, I tend to
refer to Wikipedia as the onlineEncyclopaedia of things. Given
that we know this is managed byhumans, sometimes these things
are wrong, but in this case,they're not 100% Wrong. And
Wikipedia says that codingstandards or Wikipedia actually
refers to them as coding, I'mjust trying to zoom in my screen
here. The coding conventions,coding standards or coding
conventions, it's the samething. They are a set of
guidelines for a specificprogramming language that
recommend programming stylepractices, you can say best
practices, and methods for eachaspect of a programme written in
that language. So essentially,the long and the short of it is
a specific way to write thatcode. Now, coding standards
create a baseline forcollaboration and review within
various aspects of an opensource, project and community.
If you're working in a companycoding standards provide the
same thing. Most companies willhave a defined coding standard
most open source projects willhave a defined coding standard.
And the bottom line is they helpavoid common coding errors,
improve the readability of thecode and simplify modification.
So the general idea is that ifeverybody within a code project
be at an open source project, ora company based project follows
a coding standard, it's easy foranybody else in that project or
that team to read the codesuggest changes to the code, it
looks like it was all written byone person. In terms of
WordPress, if you are planningto contribute to WordPress Core,
you do need to familiarise.familiarise yourself with these
standards because any code thatyou submit will need to comply
with it. While it is notstrictly a requirement, it is a
good idea to also follow thesestandards while developing
plugins and themes. And when Isay it's not a requirement, you
won't get penalised for notfollowing the WordPress coding
standards if you submit a pluginor a theme to the various
repositories, but it does makeit easier if you want anybody
else to help you to contributeto your plugin or theme within
the project because if theproject is following it, you're
more likely to have folks usingthe code the same coding
standards now Within theWordPress, sphere ecosystem,
you'll call it what you willthere is a defined set of coding
standards, you can find them allat this link that I've just
shared in the chat. And it's inthe developer resources under
the heading coding standards, Iactually think it's just I just
want to check I actually thinkit's linked from Yes, it's
linked from the home ofdevelopers@wordpress.org, and is
the second item in the listafter code reference, which
shows you how important theproject thinks the coding
standards are. And there arefour sets of programming coding
standards, one set ofaccessibility standards, and
then two sets of inlinedocumentation standards. So the
inline, I'm going to start fromthe bottom here, inline
documentation standards are forwhen you are writing comments in
your code and inlinedocumentation. We're not going
to be covering those today. Theaccessibility coding standards
are for making sure that yourfront ends are accessible. We're
not going to be focusing onthese today, either I want to
have a separate workshop onaccessibility, because that is
an entire topic on its own. Sotoday, we're just gonna be
focusing on the four the fourprogramming languages, the CSS,
HTML, JavaScript, and PHP. AndI'm not going to get into a
debate today about whether ornot CSS or HTML is a programming
language. If you don't know whatI'm talking about, you are
blessed. If you do, I feel sorryfor you. But I do consider them
programming languages. Okay. Sofrom that coding standards page,
we can click through to the HTMLand CSS coding standards. So I'm
going to do that now. So hereare the CSS coding standards.
And here are the HTML codingstandards, I will share these
links in the chat with you as wego. And you will notice if you
open up these two documents,that the HTML and CSS coding
standards are not very longdocuments. And the main reason
for that is that we jump back tomy slides I'm sloughing at
eDreams. Currently, the mainreason for that is that the HTML
and CSS coding standards prettymuch follow the World Wide Web
Consortium, also known as theW3C, standards for HTML and CSS.
So if you I'm going to open thatthat page now as well, and share
it with you in the chat. So ifyou and by the way, all of these
links are in the resources of myslides, so you don't need to
copy them now if you don't wantto. But if you are following the
W3C standards for HTML and CSS,then you should be following the
standards for WordPress. Theonly major differences is that
in the WordPress HTML codingstances, they talk about the
fact that self closing elementslike a break tag should have a
space between the closing partof the element. They talk about
attributes and tags havingcertain lowercase and uppercase
properties. They talk about codeshould only be single or double
quoted. And not like thisexample here where there are no
quotes around attributes. Andthen at the bottom, they talk
about HTML indentation. And thisis the thing you will find
across all WordPress codingstandards, be it HTML, CSS, PHP,
or JavaScript. WordPress prefersusing tabs over spaces. Again,
I'm not going to get into anargument over that one of the
best arguments that I've seenfor using tabs versus spaces,
and we'll dive into tabs andspaces in a second is that tabs
are more accessible for folkswho have visual impairment. And
for me, that's a good enoughreason. And those are the only
major sort of changes ordifferences between the W3C HTML
standards, and the WordPressHTML standards. In terms of the
CSS coding standards, mostly itis the same. The one slight
difference is that if you takeand I'm going to show you in a
second how you can validatethis, if you take this code
here, and you validate itaccording to the W3C CSS coding
standards, it will come back asvalid. WordPress says no, we
don't want things to be likethat. We want the CSS code to
have proper indentation, to havetabs not spaces, to use blank
lines between sections. And thateach selector should be on its
own line. So those are theslight differences there. Okay,
so those are the main CSS andHTML standards. You can read
through these, these pieces ofdocumentation, whenever you have
a chance. I do recommendreading, reading through them
and making sure you understandhow they work. Now if you have
the plugin installed on yourlocal WordPress instal, which I
don't have at the moment, so letme fix that. I'm going to open
up my local version of WordPressand I'm going to instal that
plugin. I might need might noteven have a plug in on my
desktop. So I might actuallyeven have to download let's see.
Debugging. No, I don't have ityet. So let me let me grab that
from my own slides.
And let's save it to my desktop.And then let's add it
and I'm not going to worry aboutactivating it like right now
because as I mentioned, itdoesn't do anything. But if you
have that installed on yourlocal WordPress instal, and you
open it up in your code editor,and you browse to the WP content
plugin WP learning codingstandards folder, you will see
there are four files. One is aPHP file, one is a JavaScript
file, one is an HTML file, andone is a CSS file. If you have a
look at the HTML file, you willsee that if you didn't know any
better, this HTML file looksvalid. And if you load this page
in a browser, it will work. Andone of the reasons it will work
is that a browser will fix anyproblems might exist within the
HTML. However, the W3C has a hasa HTML validator, which you can
access if you jump back overhere, which you can access at
validator dot w three.org, webthree.org. And if you copy and
paste your HTML code in there,you will see it starts reporting
a couple of errors. You can doit by a URI. So you can you can
valid validates a page on awebsite, you can validate by a
file upload so I could uploadthis HTML file if I wanted to.
But I'm gonna go with directinput for now. It's nice and
easy. I paste the code in there,I hit check. And it does some
checks for me, I see that Adriansays I get an error when I
activate it's best not to Yes, Ihaven't done any kind of
checking the PHP is just random.PHP says a very good chance
don't instal it on the site thatyou want to keep working. It's
just for once it's just examplecredit doesn't physically do
anything. And you'll see that atthe bottom of this ticket
system, you're right consideradding if there's warning, it
says consider adding a langattribute to the HTML start tag
to declare the language of thisdocument. And it also says that
this the first start tag isHTML. And it's expected DOCTYPE
html. So you can effectivelytake these changes. And you can
pop them here. So this one, Ijust need to add this right to
the top. And then it says I needto add a Lang attributes. And
I'm just going to make it Ithink it's just en is for
English. And now if I copy pastethis code back into the checker,
and hit check, it will returnall happy no errors. You will
notice though, that the breaktag is not using that space that
the WordPress coding standardsrecommended. So if you were to
submit this HTML code as part ofa file somewhere or part of a
PHP file, or a template orwhatever, that might get picked
up as an error. And you wouldthen ask you to fix that. So
that's a good reason to know whysorry, that's a good reason to
know what those additional HTMLcoding standards are. Similarly,
for CSS, if we have a look atthe CSS file, it just has one
line of CSS code. The W3C has avalidator for CSS as well, for
some reason, it's under thejigsaw dot W3C dot org
subdomain. I'm not quite surewhy I'm going to copy and paste
both validators out and pop themin the chat because I realised I
forgot to do the previous one.So there they go. So if I open
up this, I can. If I can openit, come on, there we go. So
there is my CSS validator, samething I can do by URI by UI is
nice, because you can, let's sayyou're building a site. And
you've got everything in ahomepage and the CSS is in line
somewhere, you can just send itthat link to that page, and
it'll validate the CSS on thatpage. It's quite handy. File
Upload works. In our case, if wewere using a file, let's
actually use a file. Why not?Let's do it that way, instead of
direct, direct post. So let menavigate to this plugin. And let
me find the CSS file. And thereit is, and it's upload and check
it, and it checks it and says,Hey, we're happy. It validates
the CSS level three and sGv. Soall good. And you will notice
that in the file itself,everything is on one line. And
why am I mentioning that? Well,because according to the
WordPress, CSS coding standards,having everything on one line is
incorrect. So according to W3C,it's perfectly valid. WordPress
has some additional layers ontop of that, WordPress would
prefer it if you had it likethis if you had it on the next
line. And on the next line likethat with tabs over here, that
would be WordPress preference.So obviously, it would be ideal
if there was some way that wecould do this validation number
one, not on the internet becausethen it would require us to have
an internet connection on at alltimes. and also within our
little coding project to pick upthose specific WordPress
standards over and above theW3C. And there are ways to do
this. And I'm going to dive intothose in the next part of my
workshop. But for now, I justwant to pause, grab another
quick sip of water and check ifthere are any questions at this
point in time.
Okay, they don't seem to behaving that don't seem to be
have. There don't seem to be anyquestions. So I will move on.
Meet me fumbling my words is agood reminder that I'm talking
too fast. All right. So the nextset of standards we're going to
talk about first are the PHP andJavaScript standards. Now, these
are very, very different fromthe HTML and CSS standards, I'm
going to dive into the historyof why. But first, let's have a
look at them. So let's open upthe PHP coding standards. And
I'll share that with you in thechat. And then from here, I'm
just going to pop open theJavaScript ones. And I'll share
that with you in the chat. Okay.So if you have this open in
front of you, or if you'rewatching it on screen with me
now, you will see that thisdocument and I'm going to start
scrolling. This is theJavaScript one is a lot longer,
and has a lot more information,and has a lot more rules and the
way things should be done. AndI'm still scrolling even even
halfway yet. There's a lot moregoing on, there's a lot more to
be aware of. The PHP, one Ithink is even longer. Yes. If
you have a look at it, if youcan see that it'll draggable
item on my on the side of mybrowser here, this one is very
sort of short ish. But if Iswitch over to PHP, it's even
shorter, which means even morescrolling needs to happen. So in
PHP, there are even more rulesand guidelines and things like
that. So to understand why thisis the case, we need to
understand about the history ofthe use of PHP or JavaScript in
the WordPress project. And weneed to understand the history
of the web. So those of you whoknow know that HTML is a concept
and the W3C itself, was wasfounded in about 1994 by Sir Tim
Berners Lee. So that means thestandards for HTML and CSS at
that point in time were definedand then continued to evolve
over time. WordPress, as we allknow, from the big celebration
this past weekend turned 20. Sothat means WordPress came out in
2003. That means that from 1994to 2003, there were nine years
of HTML and CSS standards tobuild on. So we're Chris
WordPress could quite easilyadopt the HTML and the CSS
standards and go forward withthem. And that's why they are
only minimal changes. PHP andJavaScript, several very
different PHP came out in 1994.The very first version of PHP
came out in 1994. And JavaScriptone year later in 1995. And
there's a group in the PHPcommunity called PHP fig, which
is the PHP framework intointerrupt. I can never remember
the name of it. PHP frameworkinterrupt group, there it is PHP
framework interrupted. Theyfirst met at a PHP conference in
around 2009. I think it was, I'mjust going to check my notes
because I couldn't actually findany hard dates on this. I found
it in a German translatedversion of a Wikipedia page on
the PHP interrupt group. BecauseI think the first group met in
edit it was a German conference.Yes, here we go. They were
founded in 2009. So WordPressstarted using PHP before there
was even a group to define PHPstandards. And the PHP framework
interrupt group have sincedeveloped something which they
call the PSR standards. So ifyou go to I'm going to copy the
link out for anybody who wantsto go and read about that. If
you click on the PSRS, they haveall the different coding
standards there. And they arevery, very different from
WordPress coding standards. Andthat is because WordPress has
been around so long. So if youdon't know there's a little bit
of a, I wouldn't say fight. Butthose who follow a PSR strictly
sort of looked down on those ofus who follow WordPress coding
standards. Those of us whofollow WordPress coding
standards tend to feel a littlebit judged by the folks who
follow the PSRS. My generalopinion on the matter is use
whichever coding standard yourproject or or product users. So
in when I'm working in WordPresscode, I'm using the WordPress
coding standards. When I'mworking in a Laravel project,
I'm using whatever the Laravelproject follows. And I find ways
to automate that process, I usea tool called PHP storm. It is a
paid tool. It is I think, $99 ayear. But I have saved more than
that by using it over time. Andit has ways and in fact, I think
I would actually like to sharethat with you today. I'm not
trying to convince you to buyPHP stuff. But I would like to
show you one of the reasons whyI use PHP stop. So these are my
notes from today's workshop. ButI just want to go into the
settings, I'm going completelyoff scripture. But I want to
show you why I love PHP still somuch this, this, this reason
alone is worth the money. I cango into the settings for PHP,
but code style. And I can set ona per project basis, I can set
my coding style to the paycoding style, the Zen Coding
style symphony to the PSR iswhich is the PHP fig group
codeigniter coding style,Laravel, PSR, 12, Drupal, Joomla
and all WordPress, I set up perproject and then I never have to
worry about it again, it willauto format my code for me, it
just saves me all of this brainspace. So the long and the short
of it is if you want your codingstyle to follow if you want your
code to easily follow a codingstyle pay for PHP storm and this
workshop is over. Okay, anyway,moving on. But the point I'm
trying to make here is thatWordPress has its own coding
style it was adapted from sofor, let's find the
documentation yet. ForJavaScript, it was adapted from
the jQuery JavaScript styleguide. And it has then evolved
over time. There were someconversations recently in the
core JavaScript group aboutupdating some of the coding
styles to meet more modernJavaScript functionality. Some
of that is happening. Some of itisn't the PHP coding standards,
it doesn't if you have a look atthe JavaScript coding standards,
it actually says they wereadapted from jQuery, you do not
find anything about what PHP wasadapted from. Because PHP wasn't
really adapted from anythingwithin the WordPress coding
standards for PHP were defined.It's very specific to WordPress.
I don't know any other projectthat follows a similar, the same
standard. It has taken piecesfrom here and there, some of it
is taken from something calledthe peer coding standards.
That's an interesting question.retargets are Christian. And
second, some of them wereadapted from the peer coding
standards. Some of them wereadapted elsewhere. Some of them
were just based on the C codinglanguage, which is what PHP is
written in. And it became theWordPress coding standards, and
then that's the way it was.Okay. There are however, some
tools that you can use insteadof having to memorise all of
that there are some tools thatyou can use to do what's known
as linting linting. If we if wehave a look at Wikipedia, again,
let's just do a quick search forlint. linting, I think is the
word I'm looking for. Yes.linting is the term for static
code analysis to flagprogramming errors, bugs,
stylistic errors and suspiciousconstructs. So in this case, it
will scan through your code andcheck. Are there any issues with
your code according to aspecific code slot? Okay, I'm
going to take a pause there andcheck if there are any questions
at this point. Before we diveinto how these tools work. Rita
says Can we have a workshop onPHP store? Maybe please. So
Rita, I would love to do aworkshop on PHP storm. The
problem I have is that in theWordPress projects, not
specifically an automatic rule,the company that I work for but
I WordPress project rule is thatwe are not really supposed to
promote one specific paid toolover another. So what I could do
in the future maybe and this issomething that I have been
thinking about is I want to andI know it's possible to do so I
want to set up my my VS codeeditor that I use for presenting
these workshops and I'm kind ofgetting back. I want to set that
up. So it's running similarsituations to PHP storm. Exactly
what Adrienne is saying now andthen show the comparison, show
the pros and cons to both. Forme, PHP storm I came from.
Before PHP storm I was usingsomething called Zen Studio.
Before Zen Studio was usingsomething called Apache NetBeans
with the PHP edition. I'vealways used what's known as an
IDE versus a code editor. SoI've always used something that
comes fully fledged with bakedin functionality for the
language that I'm working on.That's how I started
programming. I startedprogramming in Well, I didn't
start programming in an IDE Istarted in basic in a text
editor but when I studiedprogramming in college, it was
IDE Delphi or basic in tele j nonot entirely clear what does it
Visual J plus plus for Java. SoI see the benefit in spending
the money on an IDE. But I alsounderstand that the open source
free versions, open source andor free versions have a benefit
as well. So maybe in the future,we'll do a PHP store versus VS
code shelf showdown. But Iwouldn't like to present a
workshop just on PHP stormbecause it does have a cost
involved. Not everybody canafford that cost, especially
around the world differentdifferent. What's the word?
currencies and currency rates?So maybe a comparison would be
would be Yeah, it is quiteexpensive. I won't disagree with
that. Okay. So let me close downsome of these windows. And let's
get on to how we can do all ofthis in an automated way. All
right. So the first code linteror code examiner, the tool that
we're going to look at is knownas the pH is known as PHP code
sniffer. And it has worked. Theyare WordPress coding standard
sniffs for PHP code sniffer. Soa PHP code sniffer does sniffs
your code. That's the term ituses. Basically, it reads
through your code. And it looksfor any problems and it reports
those problems to you on thecommand line. As I mentioned
earlier, it does require you tohave composer installed. Well, I
say it does. It doesn't actuallyrequire composure, but using it
through composure is one of theeasiest ways to do it. You can
instal a PHP code sniffer orwhat's known as phpcs. You can
instal it on its own. And thenyou have to clone the WordPress
Codex added sniffs, and thensome links and folders up and I
actually have an article on myblog, you're welcome to go and
find it and read it that talksyou through the process. Doing
it through composer while itdoes require composer it is the
most straightforward way to setit up. So if you're looking at
instal composer, you also doneed to have PHP installed on
the command your command line.But there are instructions in
the Getting Started section ofcomposer which talks about
system requirements and how toinstal things. Once you have it
installed, and you switch toyour terminal, then you can run
composer on type today composerminus V and it'll give you some
information and show you thecomposer is installed. In this
case I've got composer version235 installed on my on my
command line. But I'm going todo now is I'm just going to
quickly switch over to myLearnPress site. And I'm going
to switch into the WP learn noplugins WP learn coding
standards folder. So this is nowinside of that folder. And if we
do an ls minus L ageia, we willsee there are the four files
coding standard CSS, HTML, JSand PHP. With those things
installed, you can startinstalling the different
packages. So I'm going to openup the links so that you can see
what they look like if you wantto instal them yourself. I'm
just moving my notes aroundbecause I can't see my notes on
the split screen. So please giveme one second. Come on. There we
go. So this is the link to PHPcode sniffer. This is the link
to the coding standards. Theyare here in my slides. So code
Sniffer, basically a tokenizeyour PHP files into text
violations of a specific set ofcoding standards. By default, it
doesn't include the WordPresscoding standards. So you have to
instal those separately as well.Those are maintained over here
by the WordPress project. Sothey are PHP code sniffer rules
or sniffs to enforce theWordPress coding conventions.
This is specific to PHP. So onceyou have everything up to instal
these things, you run thefollowing three commands. Okay,
going to just hop over to myslides so we can see them. So
the first one is to instal PHPcode sniffer installer. So
you're running composer requireyou use the dash dash dev
command to say I want to onlyinstal it as what's known as a
dev dependency, meaning don'tupload any of these dependencies
to the production environment.And then you instal this PHP
code, sniffer composer installerpackage. So we'll start with
that. And that goes and findsthe things and downloads the
things and then it asks you Doyou trust this PHP code, sniffer
component composer instal aplugin, it is safe to trust
this. So you can just say yes,and it will do some more
downloads. And if you haveinstalled this on another
project, the way composer worksit actually keeps a cached
version of the of the code in atemporary location. So the first
time I did this, it may havetaken a few minutes. When I do
it. Now it's much quickerbecause it's just pulling it
from the cached version. Okay,so that's the first step. The
second step is to instal PHPcode sniffer. So you use this
command So composer require dashdash David is the squids, squids
labs pH poster for package. Soyou run that and it instals a
whole bunch of things. In thiscase, it already has been
installed, so it's all good. Andthen the last thing you need,
let's go back to my slides isthe WordPress coding standards.
And again, that's requiring as adev dependency. So there we go
require def WP coding standardsthat EPCs. Okay, so what that
does is that instals The codesniffer package in the plugin
situation, and allows me to runit with the WordPress coding
standards. I want to show you inthe in my visual code studio,
what this is done physically onthe hard drive. So it's created
first of all, a composer jsonfile, which is the file that
manages all my composerpackages. It's also installed
something called composer lock,which is the file that sort of
when it instals The packagesthat gets the version number and
then locks your packages to thatversion. And then it creates
what's known as a vendor folder.So the vendor folder is where,
where all of these dependenciesare installed physically on your
computer. So there's the codingstandards, there's the squizz,
labs, PHP code, sniffer one.There's the dealer, direct PHP
code, sniffer plugin. And thenthere is a bin directory, which
includes the PHP code beautifyexecutable, and the PHP, CS or
PHP code sniffer executable. Sothat's the one we're going to
use on our command line. Oncewe've done that, we need to tell
PHP code sniffer. Which files touse and which files to ignore.
Because what we don't want is wedon't want the code sniffer to
be running through our vendorfolder. So PHP code sniffer
supports an xml configurationfile. So I'm going to create
that right now. So I'm going tojust close down some of these.
I'll leave the PHP one open. Andso I want to do is create a new
file in my in my plugin folder.And I call it phpcs dot XML,
very specific name that needs tobe called PHPs dot XML. And then
the basic rule sets that I needlooks a little bit like this.
And taking that out now, becauseI'll explain what I'm doing in a
second. So the rule said, we canjust call it the WordPress
coding standards, you can callit whatever you want, you can
call it WBCs. If you want orcoding standards, whatever you
wanna do is just an English or ahuman readable name for it. The
ref is wordpresser. This is thecoding standard we want to
adhere to, we tend to addextensions to run through. So in
other words, only look at PHPfiles, don't worry about
JavaScript, CSS, HTML, any ofthat only look at PHP files.
This file attribute means lookat all the files in the project
root. So scan through all thefiles in the project group that
are PHP files, but then excludecertain directories. And in this
case, we don't want to runthrough the vendor directory,
because those are thedependencies, we only want to
focus on our code. So this isthe base, the base, PHP, XML
that you might need. For doingthis, I'm going to paste this in
the chat if anybody wants thatit is in my slides if you need
it. Let me just verify that theyput it in my slides, I'm pretty
sure. Yes, there it is in myslides, okay. And then once
you've installed all thesoftware, and you've set up your
your phpcs xml file, then it'sliterally one command that you
run. So you run dot slash vendorbin phpcs. And you say use the
phpcs xml as the standard set ofguidelines that we're going to
use. So I'm going to copy thisup now. And I'm going to open up
the terminal. And what I'm alsogoing to do is I'm just going to
clear my screen so that we canjump right to the top. And this
is basically now going to run onthe PHP file that I have. So
let's do that. And there we go.A whole bunch of errors have
been reported to 41 errors andsix warnings affecting 16 lines.
So this is basically taking allof those coding standards on
that PHP pages that we saw, andapplying them to our code and in
and this is what I love aboutthis is in 25 lines of code of
this plugin PHP file, they aremore than to go back there.
There are more errors andwarnings than there are lines of
code. Now a lot of these errorsare duplicates. So for example,
you will see if we look at thisone here, it says tears must be
used tabs must be used hazards.I'm using spaces and not tabs
and those kinds of things. Sonow you can go through and you
can start fixing these errors.So let's have a look at the
first one. The first one saysmissing package tag and the file
comment. So what that means isat the top of this file,
WordPress coding standardsrequires a package tag, though
so if you don't know what thismeans, but that's just a
requirement from the codingstandards. You can go read about
that on the coding standardsdocumentation. And now if we run
this again it should say rightthat that area has been gone and
yes, that area has been gone,sorry has been removed. Now the
next one whitespace find at theend of line and so on and so
forth and you go through and youfix one by one by one Okay, any
questions on all of that I'm notgoing to go through these now
because we're gonna be hereforever. But any questions on
all of that, and how it gets setup and what you need to use to
get it going while I grabanother sip of water?
Okay, so we've spoken about thePHP coding standards and how we
can automatically lead them.Let's jump on to JavaScript
coding standards. Now,JavaScript is slightly different
to PHP, the coding standards aremore or less the same for
certain things like spacesbetween things and the way
functions need to be declaredand that kind of thing. But then
there are other areas thatthings are slightly different,
because the slight differencesin the JavaScript language.
because JavaScript is not likePHP, we obviously can't instal
any composer packages tovalidate PHP code. But if you
don't know, the sort of modernJavaScript version of composure
is something called npm. I'mgoing to open that up dark very
quickly. Yeah. So npm is what'sknown as the package manager for
JavaScript, is it it sort ofcomes with the Node js runtime
environment. Node. JS is aJavaScript runtime that was
developed a number of years ago,it basically allows folks to
write JavaScript code and haveit executed on a server as
opposed to just being in abrowser. So as with me open up
the server here. And let me jumpback here. As with PHP, there is
a package that you can use, it'spredefined. It is specific to,
again, like the PHP WordPresscoding standards, this one is
specific to the WordPressproject. You can find the
documentation for this in theBlock Editor handbook, because
we a lot of the journals. Soyour question that I'll get to
in a second is defining thedeveloper resources for the
Block Editor, because that'swhere a lot of the JavaScript
functionality has been happeningthese days. And the nice thing
is, once you have no js and npminstalled, you instal one
package, and you're good to go.We're gonna pause there for a
second. Because Jim says, is theauto fix reliable? So Jim, when
you say auto fix, I assume youmean this line at the bottom
here where it says PHP CBF canfix the 46 marks and violations
automatically? Is that whatyou're asking? Good. Okay. Can I
ask you to hold on to thatquestion, because I want to show
you something very cool in asecond, after I've done the
JavaScript stuff, and that'llhelp answer your question. Okay.
So just bear with me, I'mgetting me. Okay. So with the
JavaScript code linter it'sbasically just the words press
scripts package that you need toinstal. But before you do that,
you need to instal Node js andnpm. Fortunately, installing
node j s, also instals npm. Soit's one instal that you need to
do. If you go to the Node jswebsite, which is something No
gs.org And you click you'll see,it automatically picks up that
I'm on Mac OS, and it gives metwo versions to instal you can
also instal it through packagemanagers. So if you have
homebrew installed, you caninstal node. JS from homebrew,
if you're on a boon to Linux,you can instal it that way.
Windows, you generally have todo the download way and then
instal it that way. And oncethat's up and running, you will
be able to run something called,which is clear this out. npm on
the command line, and I'm goingto go minus V again to check the
version. And there it's tellingus npm version 6.1 4.7 is
installed and ready to rock androll. Because all of this
happens in the WordPress scriptspackage, the only command that
we need to run as this one thatnpm instal WordPress scripts
save Dev. So I'm going to runthat because it does take a
while. And while that's running,I want to have a chat about
WordPress scripts very quickly.WordPress scripts is what the
Gutenberg Project uses todevelop and bold, the Block
Editor, the site edits and allof those things. So it contains
a lot more functionality thanjust what you need for linting.
However, the advantage ofinstalling it means that if you
ever decide you want tocontribute or work on the
Gutenberg Project One day, youalready have all of those
packages enabled and installedand ready to go. So there is
also a just going to find achair. There is a WordPress es
lint es lint plugin. Es Lint isbasically a linter for
JavaScript. And you can alsoinstal that as an option that
provides configuration customrules for WordPress development.
You can do the set you've gotthe simple single command there
and then and then you can run itand you can use it My
recommendation, though, is toget used to using WordPress
scripts. Because it does set youup for working in the WordPress
project as a whole. Okay, let'ssee if we see this is still busy
installing, so it takes a while.So while that's installing,
let's jump back over to Jim'squestion. So Jim was saying, Jim
has asked me should I say, Ithink I've cleared out that
screen at the bottom of the letme open up a new terminal here.
While that's installing, let'sgo to that site. Contribute
what's called, like a story P.Encoding coding standards. And
let's run the PHP CS linter onagain, so we can see that
message. So Jim was asking thisline yet PHP CBF can fix the 46
marks no violationsautomatically. So PHP CBFs,
called PHP code Beautify. Itcomes with the PHP code, sniffer
package. And what's cool aboutPHP cvf is you can actually have
it set up in your editor. So youcan do it in PHP storm. And you
can do it in VS code. Ispecifically didn't want to go
through the process today,because I'd have to uninstall it
from my VS code and reconfigureit. But I want to show you very
quickly how it all works. Soit's an extension in VS code,
for example. Let me just open upmy extensions. And the extension
is called PHP sniffer andbeautify. I'm going to find this
online so I can share the linkwith you. Even though it's not
in my slides because I thinkit's useful to to have if you're
not sure you can just search forit. PHP code sniffer and
beautify vs. Code. SamuelHilson, let me make sure that's
the same one Samuel Hilson. Yes,exactly the same one. Excellent.
So your first step is you justwant to get you the agent. Your
first step is you instal thatpackage, or that extension, then
what you do is you make somechanges to your to your
configuration, what you'll needto do, and this is where you
will need to have the WordPresscoding standards GitHub
repository cloned to your localmachine, you then go into the
settings, and I'm gonna I'mprobably this I'm probably going
to do this as part of that VScode vs. PHP storm workshop. So
I will, I will show you thethorough steps of this one day.
But basically, it's just findthe church in a Here we go. So
you, you need to have the PHPCBF executable installed
globally in your system. Andthen sets under extensions, PHP
Sniffer, so let's find it therequickly. So it's under
extensions. PHP Sniffer, therewe go. So you need to have PHP
CBF setup, you need to havephpcs setup as well. So these
are installed globally usinghomebrew. Once that's done, then
you need to configure yoursniffer arguments in your
settings dot json file, whichI'm going to click through to
here. And you'll see I have itup here I have this PHP setup
executable path. I've set thestandard to WordPress, and then
it has the PHP, XML and all ofthose things configured. And so
what I also have is I have notquite sure where I have it
installed, I think it's just inmy home directory. I have the
coding standards installed sothat the visual code setup and
the plugin can connect to thosecoding standards. And then what
can happen is if you have andthank you to Adrian, who was the
one who pointed out theshortcuts me on this one, if you
use I think it's Option CommandL auto format in this code, it
will automatically fix the codefor you. And you'll notice I'm
going to Ctrl Zed, so we can seethe changes. You'll notice how
it's spaced everything out. SoI'm going to just jump between
the two. So first of all, it'sspaces, everything else, number
one. Number two, you'll noticethat the the way this function
has been set up has changed.Sorry, I'm using the wrong
things there. And it's kind offixed those problems. So that's
effectively what it's doing.It's running PHP CBF on the code
fixing those problems. If we nowgo back to where we ran that
original command and run it,there are still some errors, but
way less. Okay, so it's not 100%Perfect, but it's better than
then having 46 warnings anderrors. So now I just have a
couple of things I need to fix.So there's a missing doc comment
for the function register CustomPost Type. And there's a
precision alignment of onespaces issue because I'm using
spaces not tabs correctly orsomething along those lines. So
yes, it does work. It fixes alot of the problems for you, but
it's not going to fix everysingle thing. You do need to
still run it against yourlinting tool and just check that
there aren't any missing thingsbecause it can't pick up
everything. Okay, let's check onit. In the installing of
WordPress scripts. Okay. So Jim,I hope that answers your
question. I will do thatworkshop on setting up VS code
and how that all works. So whatI, what I think I might do, if
folks, if you folks areinterested in this, let me know
maybe in the chat, but what Ithink I might do is I might take
you through the process of allthe things or the extensions or
the configurations, I have setup in VS code to get all the
tools that I'm used to in PHPstorm, and sort of how long that
takes, and then show you justworking out of the box and PHP
store. Maybe we'll do that.
Or maybe what we'll do is wethese are the things that I like
about PHP, so let's set them upin VS code. Maybe all did that
were up. I haven't figured itout yet. But if you're keen on
that, I can definitely do that.Okay. Rachel says yes. And Talia
says yes, please return his key.And again, it sounds like we
need to do that. Cool. I will, Iwill make a note of it. And I
will, I will definitely get it.All right. Back to JavaScript
coding sense. Once you've gotthe WordPress course package,
sorry, did I lost myself on atangent here? So I'm going to
pop over back to my slides andjust remind myself Yes, sorry.
The other thing you need to do,I've done this a little bit the
wrong way around, but you needto also run npm in it. And what
npm init does is it creates theme go back to here. I'm seeing
something beep at me. And I'mnot sure if it's important. So
just going to check. Okay, Idon't think it's important. It's
another conversation, that's allgood. If you, let's just hop
back over here. So folks, I'velost my tangent there. If you
run npm, and knit in the commandline for the project, what this,
this will initialise the projectto use npm for adding other
dependencies and we need, wedon't need it for dependencies
right now. But we need it to beable to set up the WordPress
scripts that we're going to run.So when you do that, you can
pretty much accept the defaultvalues for the for the infinite
questions. So I'm going toaccept that one as the default,
I'm going to accept that point,I'm not going to worry about
description, I'm going to leavethat as it is, I'm not going to
worry about a test command. I'mhappy with that being in the
GitHub repository. I'm notworried about keywords, I can
put my name in there, but I'mnot going to worry about it.
Now. The only thing I do need todo is I need to change the
licence to GPL, two or three orlater because it's a WordPress
product. And the nice thingabout this is, if I type it in
wrong, it'll actually say to me,Hey, this is not a valid
expression. So maybe it'ssimilar to this. And so this is
the code I'm going to paste inthere. I prefer to use two or
later. Three just has someslightly more restrictive things
that I don't think areacceptable for WordPress core,
but it's fine for if you'redoing plugins or themes. So I
stick to GPL. Two or later, itsays Are you happy with this,
I'm happy with this at thispoint in time, because it's not
super important. So I just saidyes. And what that will do is
that will create this packagedot JSON file. And the only
thing that I know probably madeit, the only thing that I need
package json file right now isthe scripts area here. So what
I'm now going to do is I'm goingto replace what's in my package
json scripts with the scriptscommand from the WordPress
scripts package. So once I'veinstalled that, if I scroll
down, you'll see here is thescripts example. I'm going to
copy the whole thing out justbecause I'm lazy. But I'll show
you the two that we'respecifically going to look at
today. So I'm going to copy thatout of there. I'm going to pop
it in there, make sure thatthere is a comedy. Oh, wait,
there's two additional lines inthis JSON object. I don't need
that. There we go. There's theword prescripts, I need to make
sure there's a comma there VScode is great at picking up
those errors. So that's lovely.And there we go. So that's our
script section. And what thisallows us to do this allows us
to run any one of thesepredefined scripts on our
project. And the two that we'regoing to look at are lint, Jas
and lint, CSS. So to run those,I think I do have it in my
slides. Let's jump over to thenext slide over here. So there's
the scripts we discussed. Andliterally, it's a case of you
just run npm run Lint, Jas. Solet's do that. Let's clear this
out. And now it's only going torun and lead JavaScript code,
which is what I like about thisprocess. I didn't set up a phpcs
xml file and tell it what filesto worry about and Teletoon
certain other things and all theother stuff. I just say learn to
my JS files, and it will thenlook for me my js file, it will
find one and it'll report onthose errors. What I don't like
about this linter is it's alittle bit trickier to figure
out what's going on and thereason I say that is this item
over here actually means a spacenot That character actually
means there needs to be a spacethere, I find the the formatting
of phpcs to be a little biteasier to read on the terminal.
But at least it does give me theerrors that I need to understand
I need to fix. And then I can gothrough just as I do with the
PHP code. And I can go throughand I can fix those errors. As I
might have mentioned earlier,which I think I did, there's
also a CSS linter. So just likeI can load the JavaScript code,
I can lend the CSS code as well.So I can run npm, run Lint, CSS,
it'll then look in ECS. Andthere we go. It's already
telling me expected a new lineexpected certain things. So it's
picking up WordPress codingstandard issue. So remember,
earlier, we saw that W3C washappy, because according to W3C
standards, that is correct CSScode, but according to WordPress
coding standards, we need tomake these few changes. Okay.
And there are ways to also dothe auto formatting of your code
in your vs. Code setup. There isa plugin, I don't have it
installed, because I don't knowI don't do a lot of JavaScript
programming. But there is aplugin called I think it's es
lint, and another plugin calledprettier, you instal those two
extensions, you configure themwith your, with your linting.
And then it will also do theauto formatting in the in the
Vyas code editor for you aswell. Okay, any questions around
all of that anything that didn'tmake sense, I know, it was a lot
to take in. So that's some ofthe reasons why I made sure that
my slides were fairly extensivetoday. So that you can take them
and you can go through and youcan read about these things and
understand, hopefully, you'll beable to use this this
presentation to remember what wewere talking about, and you'll
be able to set them up on yoursite. I'm gonna take another sip
of water before I show yousomething very, very cool.
Okay, just checking if therewere any other questions. Okay,
that's if you any questionsright now. So the last thing
that I want to show you, okay,is there is there's, there is
this package with this GitHubrepository that Ryan, who's the
chap that I mentioned earlier,has created. Ryan is currently
also at Automattic. He is adeveloper advocate. And he does
a lot of similar work to what Ido. And he set up this project,
which basically has all of therequired linters pre configured.
So it has the linting andformatting tools for PHP,
JavaScript, CSS, and packagejson files. And a bowl process
provided by WordPress scripts.So you will see there is the
phpcs file that we saw earlier,you will see that he has the
composer dot JSON, which instalsall the required packages for
you, you will see that there isthe package dot JSON, which also
resolves all the requiredpackages and set up the scripts
for you. And all that you needto do this as you need to have
no js and npm installed on yourmachine, you use a template to
start up your new project. So inother words, if I click on here,
I click on use to this template.And I can create a new
repository, I can then set upthe repository in my GitHub
account, I can clone it to mylocal machine. And then I
literally just run npm runsetup. And it will do all the
installation and all theeverything else and it off,
it'll go and do it all for me.No problem, Laura. So I do
recommend checking out thisproject template and use it as a
learning experience. So use ittoo. What's nice about it is you
don't have to worry about allthe things I just walked
through, you just start a newproject a new plugin or a new
theme. You can either keep thisas a template on your GitHub and
then keep it locally and thenjust copy the pieces you need.
And at the bottom, you'll alsosee that Ryan mentions that if
you're using VS code, if you addthe following to your settings
that JSON editor code actions onsave every time you save a file,
it'll automatically fixeverything it'll run through fix
it all for you so that if youdon't even have to auto format
using the keyboard hotkeys, youdo need to configure your VS
code automatically. So fileswhich is possible. But this is a
great way to automate everythingfor you to run through to pick
up the problems and fix them foryou. So I highly recommend
checking this out. Ryan is anamazing coder and he has grabbed
these resources from sort of allof the best practices and put
them together in one package. Soplease do check that out. I'm
going to copy this into the chatif anybody wants to grab it now.
It's a great way to learn aboutand set up and configure all the
coding standards in one place.Okay, and then finally, as I
mentioned, all of the all of thethings that I've discussed today
are linked through at the end ofmy slides. The slides are show
right on the Meetup chat so ifyou want to get all of these
links you're welcome to get themthere. The only sort of hiccup
that you might struggle with isgetting composer installed
getting no Jason npm installed.But once you figured those out
of your operating system therest of just running commands on
the command line. Awesome. Anyquestions around any of this
stuff that I've presentedWordPress coding standards in
general? Anything else you wantto ask that you feel like I
didn't cover today around thetopic of WordPress coding
standards, now's a perfect timeto ask while I refresh my voice
again
Ooh, Karolina with the curveballCarolina and pronouncing your
name correctly. Anyrecommendations for doing this
with gulp it should it bepossible. And I'll tell you why.
As far as I know. WordPressscripts essentially just uses I
think es lint to lint, theJavaScript. So you should be
able to set up your gulp to runes lint with the coding
standards, you would probablyhave to pull the word prescripts
packages apart and see what whatother packages are being used.
But it should be possible. Iunfortunately, I skipped over
the gulp and grunt days, I wentfrom writing mostly PHP code and
vanilla JavaScript to working inprojects where gulp and grunt
were already set up. And I justkept reusing them straight over
to webpack. And using webpack,something called Laravel mix,
which is which is built aroundsomething called webpack to
transpile, my CSS and JavaScriptcode, my Sass and my lesson, all
of that kind of stuff inTypeScript and all that. So I
personally can't recommend anysuggestions for doing gulp. It
should be possible. But I don'tI don't know the ins and outs.
Jerry says are the steps thesame for setting up linting in
WP and Vi? I think so I wouldthink it is the same. I actually
think that WP and V might havesome details around that. Let's
just have a look here. BecauseWP and V is essentially using
npm to instal so my assumptionwould be yes, you should be able
to do it. Because because you'reessentially you're able to run
WP and V from your WordPresssource code directory. So you're
managing the source code on yourmachine. WP E and V, if I'm not
mistaken, will create a packagedot JSON file. So you should
just be able to instal WordPressscripts if it isn't already
being used by WP env and thenmake sure the subsidy and run
the scripts that should work.But that information is
untested. I've never tried itbefore, but theoretically it
should. For the PHP code, youshould just be able to instal
composer and then instal thepackages in your plugin theme or
WordPress source and then run itthe same way that should that
should theoretically possible.Because if memory serves WP E
and V just basically manages thedocker instance that serves the
code to the browser, but yourcode is actually sitting on your
machine. So anytime, anytime thecode is physically on your
machine that you're working on,you should be able to run these
things without any problem.Yeah.
Currently, they're mixing upwith WordPress in the company I
work for and just got the ideamaybe there was something that I
could add to the project. I justwant to I just want to check. I
know that some time ago, when Iwas still working in delicious
brains. And we did it we did anarticle about Gulp versus grunt
in the Battle of the BoardSourceor something. I just want to see
if we covered if recovered wasthere.
So this, this article might helptrying to see. So you'll see
they're talking about compilinglists and linting and those
things.
There's a good chance I say Isay this. I say this without any
proof. But grunt does alsocreate as far as I remember a
package json file. So if youjust include WordPress scripts,
and the and set up the scriptsin your package json already,
that should work theoretically.But I've never tried. So your
your mileage may vary as theysay. But you're welcome to read
through this article. Maybe I'llshare it in the chat with you.
Maybe there's something herethat will be useful. On that
one, okay. I think I think wealso we did a, there was a npm
scripts visible to and this iseffectively what the WordPress
scripts does it uses npm scriptsis a build tool. So this one
actually talks about thedifferences between the two. And
I seem to recall that one, whatI do I do remember is there was
a project that I was working on,where we used either grunt or
gulp for something, I can'tremember exactly what and for
those of you who are listening,if you've never heard of grunt
or Gulp, excuse me, they weresort of JavaScript task runners
that existed pre webpack, prenpm, almost pre Node.js. I seem
to recall, there was a projectwhere we had we were using
either Gulp or Grunt, I don'tremember which one to do some,
some CSS or JavaScripttranspiling. And then I needed
to use something in webpack. AndI think I just installed the
package and set up the scriptsin the Grunt file. And I think
it just worked. I'm going to goand see if I can find that
because I think it was I wasworking on the seriously simple
podcasting plugin. So I don'tfind it. And if I do find it,
I'll share it in the meetup.comevent chat tomorrow. But I do
seem to recall, I did kind ofwhat they call Frankenstein
Gulp, Grunt and webpack.Together, so it should
theoretically be possible. Butit's not something I done
recently. So I can't say forsure. Okay, any other questions
around all of this? While Iclosed down my multiple tabs, I
discovered today, this iscompletely off topic. But I
discovered today that braveallows me to use vertical tabs.
And I'm trying to decide ifthat's better. And I've been
using horizontal tabs for solong, but I like the idea of
having them that will down thesite. So I'm going to be playing
with that over the next few fewdays or weeks. Anyway,
but does it take up more screenspace? That's the thing I kind
of
so so that's the kind of theinteresting question, is it?
Yes, it does take up more screenspace. But if you look at
something like composer, there'sso much whitespace anyway, does
it matter? That's what I'm notsure why I haven't quite figured
out yet.
Yeah, that's the one issue withworking with the WordPress is
when you get the the list viewand then your styles, it shrinks
everything down. And then itdistorts everything so
correct. I discovered this iscompletely off topic. But I
discovered recently thatWikipedia launched a Yes,
probably better for largescreens. Wikipedia launched a
maximise View button at thebottom on the right here, you
can toggle between a fixed widthand a full width by clicking on
this button. And right now onthis I present on a 1920 by 1080
resolution when I'm presentingworkshops. So right now that
view is no good. But when Iswitch back to four to 560 by
one 440 There's so much whitespace on the side, and then I'd
much prefer to have it maximise.So yeah, it's an interesting, I
guess it's a first of allproblem. Okay, thanks. Thank you
so much for joining me today. Ihope that wasn't too much of an
information dump. I will be Iwill be reviewing and getting
back to this topic in a futureworkshop. And as I say, maybe
we'll do some other workshopsaround getting composer
installed, getting no Jasonstalled. We might do workshops,
I might just do tutorials, weare going to get to a point. as
I progress through through thesort of the functionality and
things that I'm working on, werebeing able to come to one of
these workshops that I presentwill require you to have
composer and Node js installedif you want to code along with
me. So So whichever way we doplan to set that content up, I
do recommend getting sort ofconsuming that content and
trying to figure those thingsout. As much as I would love to
not have to worry aboutdependency managers. It is the
way that modern web developmenthas moved. It does make life a
lot easier. So I do recommendmaybe making sure rest of the
year resolution for the rest of2023 for the next six months or
2023 Make it a personal sort ofgoal to get composer and no js
and npm just up and running onyour local machine. You don't
have to use them, but just getthem up and running. I do highly
recommend that because theythere are so many amazing tools
and PHP tools, JavaScript toolsand things There are data that
are available to you. If youhave these these pieces of
software installed. Rita says,May I see your package the JSON
file? Sure. I'll actually copyit into the chat for you. This
is what the final one lookslike. There we go. I'll pop that
in the chat. No problem there.Okay, next week, Thursday, I
will not be presenting aworkshop. As I mentioned
earlier, I will be at WordCampEurope. So I will not see well,
next week. And the week afterthat, I will have been
travelling back from WordCampEurope. So I'm probably planning
a less code heavy session. I wasthinking of doing a because
we've just celebrated the 20thanniversary of WordPress, I was
thinking of doing a WordPressquiz for fun. So if you're
interested in that Detroit, wewill have we'll have 20
questions, celebrating 20 yearsof WordPress. And I'll try and
figure out how we can do prizes.I don't know how we're going to
do that. I, I hosted a quiz atmy local Meetup recently, and we
had some WordPress swag that wecould give away. But I don't
know how I can give away swag inan online workshop. So we'll
figure that out. For those ofyou who are going to Athens,
please do come and find me. Iobviously don't know all of you,
because I'm just presenting andI'm just seeing names. But
please do come and find me andtell me hey, I'm Natalia and I
joined one of your workshops. SoI am whoever and I join all the
workshops. I would love toconnect with as many people as
possible. I do talk fast. Someof you have probably noticed I'm
getting sped up now because I'mvery excited about WordCamp
Europe. So it's a slow me down.But yes, I would love to meet as
many people as I can what I'mdoing, Laura, again,
thank you any other things aboutnext Thursday is the
contribution contributors day atWordPress. So especially those
people in Europe because it's3am My time, so if anybody in
Europe, and that timezone Africaso join in, you can join
virtually to even if you're notpart of being at WordPress.
Absolutely. Thank you, Laura forreminding me about that. Yes. So
we will be the next weekThursday is contribute today.
And we can group and you canjoin remotely join the training
team or any other team and comeand help us build WordPress.
Thank you Laura for reminding meabout that. And thank you Laura
for CO hosting today. It's beenlovely to have seen Laura and
some workshops in the past. It'slovely to finally to finally
meet you in person. Thank youeverybody for joining me. I hope
you have a great Thursday andenjoy the rest of your week and
your weekend. Bye bye everyone