-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·462 lines (434 loc) · 20.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Why switching to WordPress Coding Standards will make you a better developer</title>
<meta name="author" content="Dave Green">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/dave.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/tomorrow-night-bright.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- 1. Talk introduction -->
<section>
<h2>Why switching to</h2>
<h1 class="gold">WordPress <br/> Coding Standards</h1>
<h2>will make you a <br/> better developer</h2>
</section>
<!-- 2. Personal introduction -->
<section data-background="img/dave.jpg">
<h1>Dave Green</h1>
<h3>Senior Developer at <span style="color: #2cc795;">Make Do</span></h3>
<h3><a href="https://davetgreen.me">davetgreen.me</a></h3>
<h3><a href="https://twitter.com/davetgreen">@davetgreen</a></h3>
</section>
<!-- 3. My story -->
<section data-background="img/story.jpg">
<h1>My Story</h1>
<ul>
<li class="fragment">
<p>Have used <strong>PSR2</strong> standards in the past.</p>
</li>
<li class="fragment">
<p><strong>OCD</strong> when it comes to all things digital.</p>
</li>
<li class="fragment">
<p>Work on more <strong>team</strong> projects than ever.</p>
</li>
<li class="fragment">
<p>Recently moved into writing <strong>plugins</strong>.</p>
</li>
<li class="fragment">
<p>Trying to <strong>contribute</strong> more to core.</p>
</li>
<li class="fragment">
<p>Make Do work with a lot of <strong>other agencies</strong>.</p>
</li>
<li class="fragment">
<p>Switched for <strong>PHP</strong> coding in <strong>September 2015</strong>.</p>
</li>
<li class="fragment">
<p>About to make the switch for writing <strong>Javascript</strong>.</p>
</li>
</ul>
</section>
<!-- 4. What they are -->
<section data-background="img/question.jpg">
<h1>So what are they?</h1>
</section>
<!-- 4.1 Set of rules -->
<section data-background="img/checklist.jpg">
<h1>Rules your code should <span>conform</span> to, and will be <span>checked</span> against.</h1>
</section>
<!-- 4.2 Four standards -->
<section data-background="img/wordpress.jpg">
<h1>Developed for wordpress <span>core</span>, official <span>themes</span> and <span>plugins</span>.</h1>
</section>
<!-- 4.3 Four standards -->
<section data-background="img/code.jpg">
<h1>Four language specific standards</h1>
<ul class="lang-list">
<li class="php"><span>PHP</span></li>
<li class="html"><span>HTML</span></li>
<li class="css"><span>CSS</span></li>
<li class="javascript"><span>JS</span></li>
</ul>
</section>
<!-- 4.4 -->
<section data-background="img/accessibility.jpg">
<h1>Accessibility Coding Standards</h1>
<h3>Approved for inclusion in the <br/><span>Core Handbook</span> and announced to the communty in <span>March 2016</span>.</h3>
</section>
<!-- 4.5 -->
<section data-background="img/accessibility.jpg">
<blockquote>
<p class="large">All new or updated code released in WordPress must conform with the WCAG 2.0 guidelines at level AA. </p>
<cite class="large"><strong>Core Handbook</strong></cite>
</blockquote>
</section>
<!-- 4.6 -->
<section data-background="img/community.jpg">
<h1>Written <span>by</span> the community, <span>for</span> the community.</h1>
</section>
<!-- 4.7 -->
<section data-background="img/calendar.jpg">
<h1>Have existed in some form or other since <span class="gold">2009</span>.</h1>
</section>
<!-- 5. What are they are NOT -->
<section data-background="img/not.jpg">
<h1>What they are <span class="gold">NOT</span>.</h1>
</section>
<!-- 5.1 The Hardcore -->
<section data-background="img/albert.jpg">
<h1><span>Not</span> just for the hardcore.</h1>
</section>
<!-- 5.2 Core Contributors -->
<section data-background="img/contributors.jpg">
<h1><span>Not</span> just for core contributors.</h1>
</section>
<!-- 5.3 Right & Wrong -->
<section data-background="img/right-wrong.jpg">
<h1><span>Not</span> a definition of right & wrong.</h1>
<h2>Just the "WordPress way".</h2>
</section>
<!-- 5.4 Guilt -->
<section data-background="img/guilty.jpg">
<h1><span>Not</span> there to make you feel guilty.</h1>
</section>
<!-- 5.4 Complexity -->
<section data-background="img/smash.jpg">
<h1><span>Not</span> going to add more complexity to your code.</h1>
</section>
<!-- 6. 10 Benefits of switching -->
<section data-background="img/happy.jpg">
<h1>10 Benefits of Switching to <span>WPCS</span></h1>
<h3>(there are many more!)</h3>
</section>
<!-- 6.1 -->
<section data-background="img/stress.jpg">
<h1>Reduced Stress</h1>
<h2>No more worrying about how you should write code. <span>Less stress = more code :)</span></h2>
</section>
<!-- 6.2 -->
<section data-background="img/reading.jpg">
<h1>Readable Code</h1>
<h2>Consistent <span>indentation</span>, <span>spacing</span>, <span>structure</span>, <span>naming</span> of things and much more.</h2>
</section>
<!-- 6.3 -->
<section data-background="img/team.jpg">
<h1>Good for Teams</h1>
<h2>All code <span>looks the same</span>, regardless of <span>who</span> wrote it or <span>when</span> it was written, with <span>no fingerprints</span>.</h2>
</section>
<!-- 6.4 -->
<section data-background="img/deprecated.jpg">
<h1>Future Proofing</h1>
<h2>Avoid <span>deprecated</span> functions and use <span>new</span> or <span>alternative</span> functions instead to avoid major issues down the line.</h2>
</section>
<!-- 6.5 -->
<section data-background="img/bugs.jpg">
<h1>Faster Debugging</h1>
<h2>Bugs are <span>quicker to find & fix</span> because the code you write is <span>easier to read & understand</span>.</h2>
</section>
<!-- 6.6 Avoid Buggy Code -->
<section data-background="img/yoda.jpg">
<h1>Avoid Pesky Bugs</h1>
<h2>Evaluate expressions using <span>Yoda conditions</span>. Reverse the expression, you will.</h2>
<pre><code>if ( 'constant' == $variable ) {</code></pre>
</section>
<section data-background="img/yoda.jpg">
<h2>The common approach</h2>
<pre class="large"><code>if ( $variable == 'constant' ) {
$force = 'will be with you';
}</code></pre>
<p>We're checking to see if the variable is equal to the constant. In this case the conditional is <strong>truthy</strong>.</p>
</section>
<section data-background="img/yoda.jpg">
<h2>Make mistakes, you will</h2>
<pre class="large"><code>// Ooops, we lost an equals!
if ( $variable = 'constant' ) {
$force = 'will be with you';
}</code></pre>
<p>Ommitting the second equals sign means that this conditional <strong>silently</strong> resolves as <strong>truthy</strong> and is a bug!</p>
</section>
<section data-background="img/yoda.jpg">
<h2>Reverse it, you shall</h2>
<pre class="large"><code>if ( 'constant' == $variable ) {
$force = 'will be with you';
}</code></pre>
<p>By <strong>reversing</strong> the statement, an ommission of an equals sign will <strong>produce an error</strong> which means you can quickly fix the bug and move on instead of scratching your head!</p>
</section>
<!-- 6.7 -->
<section data-background="img/documentation.jpg">
<h1>Better Inline Docs</h1>
<h2>Standards encourage more <span>consistent</span> and <span>detailed</span> documentation of your code.</h2>
</section>
<section data-background="img/documentation.jpg">
<h2>File documentation</h2>
<pre class="small"><code>/**
* A description of what purpose this
* file serves in the theme/plugin.
*
* @package Example_Theme
*/</code></pre>
</section>
<section data-background="img/documentation.jpg">
<h2>Function documentation</h2>
<pre class="small"><code>/**
* Describe the function's purpose.
* @param int $id Post ID.
* @param array $args Arguments.
* @return string Some text.
*/
function do_something( $id, $args ) {</code></pre>
</section>
<!-- 6.8 -->
<section data-background="img/security.jpg">
<h1>More Secure Code</h1>
<h2>Consistent <span>validatation</span>, <span>sanitization</span> and <span>escaping</span> of both input & output data.</h1>
</section>
<section data-background="img/security.jpg">
<h2>Validating Input</h2>
<p>Here we check to see if the input variable is a <strong>string</strong> as expected, not a <strong>integer</strong>, before adding it to an array.</p>
<pre class="xsmall"><code>$things = array();
if ( isset( $_POST['foo'] ) {
$foo = $_POST['foo'];
if ( 'string' === gettype( $foo ) ) {
$things[] = $foo;
}
}
</code></pre>
</section>
<section data-background="img/security.jpg">
<h2>Sanitizing Input</h2>
<p>Here we properly sanitize an input variable before using it to update post meta.</p>
<pre class="xsmall"><code>if ( isset( $_POST['foo'] ) {
$foo = sanitize_text_field( $_POST['foo'] );
update_post_meta( $id, 'foo_meta', $foo );
}
</code></pre>
</section>
<section data-background="img/security.jpg">
<h2>Escaping output</h2>
<p>Here we output a sanitized input variable, making sure it has been properly escaped.</p>
<pre class="xsmall"><code>if ( isset( $_POST['foo'] ) {
$foo = sanitize_text_field( $_POST['foo'] );
echo '<h1>' . esc_html( $foo ) . '</h1>';
}
</code></pre>
</section>
<!-- 6.9 -->
<section data-background="img/database.jpg">
<h1>Better DB Queries</h1>
<h2>Avoid using <span>WPDB</span> for custom database queries in favour of <span>WordPress API</span> functions and classes like <span>WP_Query</span>.</h2>
<p>(Caching and performance optimisation FTW!)</p>
</section>
<!-- 6.10 -->
<section data-background="img/future.jpg">
<h1>Easier to Maintain</h1>
<h2><span>Anyone can modify</span> your code to fix or improve it <span>right now</span> or <span>in the future</span>.</h2>
</section>
<!-- 7. Making the switch -->
<section>
<h1>Switching to WPCS for writing <span>PHP</span></h1>
<h2>What you will need to "sniff" your PHP while you develop.</h2>
</section>
<!-- 7.1 PHP Code Sniffer -->
<section data-background="img/sniffing.jpg">
<h1>PHP Code Sniffer</h1>
<p>Install PHPCS on your machine using <strong>PEAR</strong> or <strong>Composer</strong>. <strong>Homebrew</strong> is an alternative for Mac OSX users.</p>
<p>Add the path to your <strong>phpcs</strong> command to your system <strong>PATH</strong>, transforming it into a <strong>global</strong> installation.</p>
</section>
<!-- 7.2 WPCS from GitHub -->
<section data-background="img/coding-standards.jpg">
<h1>WPCS from GitHub</h1>
<p>Download the WPCS rules for PHPCS to your machine using <strong>Git</strong>, <strong>Pear</strong>, <strong>Composer</strong> or the old fashioned way</p>
<p>Place them in a suitable directory and make a note of the location. Mine are in: <strong>/Users/davetgreen/.wpcs</strong></p>
</section>
<!-- 7.3 Decent code editor -->
<section data-background="img/typing.jpg">
<h1>A Code Editor / IDE</h1>
<div class="img-row">
<div class="img-col">
<img src="img/sublime.png" alt="Sublime Text" width="150" height="150" />
<small>Sublime</small>
</div>
<div class="img-col">
<img src="img/atom.png" alt="Atom Editor" width="150" height="150" />
<small>Atom</small>
</div>
<div class="img-col">
<img src="img/netbeans.png" alt="Netbeans" width="150" height="150" />
<small>Netbeans</small>
</div>
<div class="img-col">
<img src="img/phpstorm.jpg" alt="PHPStorm" width="150" height="139" />
<small>PHPStorm</small>
</div>
<div class="img-col">
<img src="img/coda.png" alt="Coda 2" width="150" height="150" />
<small>Coda</small>
</div>
</div>
<p>Or any similar software that either has a <strong>PHP Code Sniffer</strong> plugin available or comes with built-in support.</p>
</section>
<!-- 7.4 PHP Code Sniffer -->
<section data-background="img/plugin.jpg">
<h1>Configure PHPCS</h1>
<p>Set-up the plugin or native support for <strong>PHPCS</strong> accordingly. You will need the path to the directory containing the <strong>WPCS</strong> rules you downloaded from GitHub.</p>
<p>There are a number of options available such as checking on save, changing the way errors are displayed and even automatically fixing problems in some cases!</p>
</section>
<!-- 7.5 Command Line -->
<section data-background="img/command-line.jpg">
<h1>Command Line</h1>
<h2>You can run <span>PHPCS</span> manually, or as part of your build workflow by calling it directly in your scripts or using plugins for <span>Grunt</span>, <span>Gulp</span> etc.</h2>
</section>
<!-- 8. Example -->
<section>
<!-- <h1>Quick Example</h1> -->
<pre><code>// A quick example
if($force == "with you") {
$victorious = you_will($be);
}</code></pre>
<ul class="narrow">
<li class="fragment"><p class="small">Inline comments must end in full stops.</p></li>
<li class="fragment"><p class="small">Expected 1 space after IF keyword.</p></li>
<li class="fragment"><p class="small">No space after opening parenthesis is prohibited.</p></li>
<li class="fragment"><p class="small">Use Yoda Condition checks, you must.</p></li>
<li class="fragment"><p class="small">No space before closing parenthesis is prohibited.</p></li>
<li class="fragment"><p class="small">Line indented correctly; expected 1 tabs, found 0.</p></li>
<li class="fragment"><p class="small">Expecting one spaces before closing bracket: 0 found.</p></li>
</ul>
</section>
<section>
<h1>Before</h1>
<pre class="small"><code>// A quick example
if($force == "with you") {
$victorious = you_will($be);
}</code></pre>
</section>
<section>
<h1>After</h1>
<pre class="small"><code>// A quick example.
if ( $force == 'with you' ) {
$victorious = you_will( $be );
}</code></pre>
</section>
<!-- 9. Some Advice -->
<section>
<h1>Some Advice</h1>
</section>
<!-- 10. Useful resources -->
<section>
<h1>Useful Resources</h1>
<ul>
<li>
<p>Core Handbook: Coding Standards
<a href="https://make.wordpress.org/core/handbook/best-practices/coding-standards/"><small>https://make.wordpress.org/core/handbook/best-practices/coding-standards/</small></a></p>
</li>
<li>
<p>GitHub: PHP_CodeSniffer
<a href="https://github.com/squizlabs/PHP_CodeSniffer#installation"><small>https://github.com/squizlabs/PHP_CodeSniffer#installation</small></a></p>
</li>
<li>
<p>GitHub: WordPress Coding Standards
<a href="https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards"><small>https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards</small></a></p>
</li>
</ul>
</section>
<!-- 11. Closing remarks -->
<section>
<blockquote>
<p>Switching to <strong>WordPress Coding Standards</strong> has done more than anything else in recent memory to improve the overall quality of the WordPress code I write.
<br/>
<br/> I wish I had switched earlier, and I encourage you to switch now to reap the benefits.</p>
<cite>Dave Green</cite>
</blockquote>
</section>
<!-- 11.1 Goodbye -->
<section>
<h1>Thank you!</h1>
<h3>Slides available at:<a href="http://davetgreen.me/wpcs-talk/">davetgreen.me/wpcs-talk</a></h3>
<h3><a href="https://twitter.com/davetgreen">@davetgreen</a></h3>
</section>
</div>
<!-- /.slides -->
</div>
<!-- /.reveal -->
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'fade',
dependencies: [{
src: 'lib/js/classList.js',
condition: function() {
return !document.body.classList;
}
}, {
src: 'plugin/markdown/marked.js',
condition: function() {
return !!document.querySelector('[data-markdown]');
}
}, {
src: 'plugin/markdown/markdown.js',
condition: function() {
return !!document.querySelector('[data-markdown]');
}
}, {
src: 'plugin/highlight/highlight.js',
async: true,
callback: function() {
hljs.initHighlightingOnLoad();
}
}, {
src: 'plugin/zoom-js/zoom.js',
async: true
}, {
src: 'plugin/notes/notes.js',
async: true
}]
});
</script>
</body>
</html>