I wrote some code...you won't believe what happened next

Have you ever been confused about why the code you wrote doesn’t do what you expect? Are you learning to code and don’t want to get caught out? Many people learn to code by example without understanding why the code works – or doesn’t! I hope to inspire and equip you to learn more about what your code is doing.

I will use interactive examples and plain language to explain how learning coding principles can help debugging, help you understand documentation, and make you a better developer. And we’ll learn some basic but invaluable principles that will help de-mystify your code and solve problems faster.

Transcript

1. I tried writing some code… …you won’t believe what happened next
2. Hi! I’m Ross @magicroundabout
3. Let’s talk about code
4. Coding is easy
5. Computers are stupid
6. Computers are stupid The only understand 0 and 1
7. So… Let’s start writing some code
8. +
9. It isn’t
10. Don’t do it!
11. WAT?! Gary Bernhardt’s Geeky 5min talk
 https://www.destroyallsoftware.com/talks/wat
12. Hmm… This isn’t as easy as we thought!
13. What does + do? https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Operators/Arithmetic_Operators
14. What does + do? https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Operators/Arithmetic_Operators
15. What does + do? https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Operators/Arithmetic_Operators
16. People come to coding from all sorts of backgrounds
17. Introducing • Language/terminology • Concepts • Tools
18. To help you • Code better • Fix problems faster • Learn more quickly • Understand documentation • Become curious!
19. Note We will focus on PHP and JavaScript
20. Note I will avoid talking about object oriented programming
21. Note to developers I’m simplifying!!
22. But first… Some terminology
23. Expressions Code that has value
25. Expressions “Evaluate” “What is…”
26. Expressions • 2 • "Hello World!" • $home or home
27. Expressions • 2 • "Hello World!" • $home or home • [ 1, 2, 3 ] • { post_title: "Programming principles" } • $posts[0] • $post->post_title or post.post_title
28. Expressions • 2 • "Hello World!" • [ 1, 2, 3 ] • { post_title: "Programming principles" } Literals: Exactly what you type
29. Expressions • $home or home • $posts[0] • $post->post_title or post.post_title Variables: Names for other things
30. Expressions • get_the_title(); • get_post(123); • $the_query->have_posts(); Functions (and methods): named blocks of code
31. Combining Expressions 2 + 2
32. Combining Expressions 2 + 2 Expression Expression
33. Combining Expressions 2 + 2 Expression Expression Operator
34. Combining Expressions 2 + 2 Expression Expression Operator Expression
35. Combining Expressions is_archive() or is_search()
36. Combining Expressions is_archive() or is_search() Expression Expression
37. Combining Expressions is_archive() or is_search() Expression Expression Operator
38. Combining Expressions is_archive() or is_search() Expression Expression Operator Expression
39. Combining Expressions "The first landing was " + currentYear - moonLandingYear + " years ago"
40. Combining Expressions "The first landing was " + currentYear - moonLandingYear + " years ago" Expression Expression Operator Operator Expression Operator Expression Operator Expression Expression Operator Expression Expression Operator Expression Expression
41. You may be thinking… …what else is there?
42. Statements
43. Statements do stuff… …but don’t have value
44. Statements do stuff… …but don’t have value (normally)
45. Statements Control flow/order/execution if ( $have_posts() ) {
 the_post();
 ...
 } while ( $have_posts() ) {
 the_post();
 ...
 } foreach ( $posts as $post ) {
 echo $post->post_title;
 }
46. Statements Define or “declare” that things exist var my_variable; function sum( $items ) {
 ...
 }
47. Statements “Do” other things echo “Hello World” return $my_variable; exit;
48. Putting it all together if ( bored_now() and hometime() ) { exit; }
49. Putting it all together if ( bored_now() and hometime() ) { Expression Expression Operator Expression exit; } Statement Statement
50. Expressions Operators Statements The building blocks of your code
51. Variables Named “boxes” that can hold values
52. Variables $name
53. Variables $name “Ross”
54. Variables $name “Ross”
55. Variables $name “Ross” Assignment $name = “Ross”
56. Variables $name “Ross” Assignment has value $me = $name = “Ross”
57. Variables $name “Ross” Assignment has value if ($name = “Ross”)
 {
 echo $name;
 }
58. I wrote this code… $a is [1,2] … but what is $b? $a = [1,2,3]; $b = $a; array_pop($a); (PHP)
59. I wrote this code… $a is [1,2] … but what is $b? $a = [1,2,3]; $b = $a; array_pop($a); (PHP)
60. I wrote this code… $a is [1,2] … but what is $b? $a = [1,2,3]; $b = $a; array_pop($a); (PHP)
61. I wrote this code… $a is [1,2] … but what is $b? $a = [1,2,3]; $b = $a; array_pop($a); (PHP)
62. [1,2,3] $b is
63. I wrote this SAME code… a is [1,2] … what is b? var a = [1,2,3]; var b = a; a.pop(); (JavaScript)
64. [1,2] b is
65. WAT?!
66. Copy by reference and Copy by value
67. Copy by value (PHP) $a [1,2,3] $a = [1,2,3]
68. Copy by value (PHP) $a [1,2,3] $b [1,2,3] $b = $a
69. Copy by value (PHP) $a [1,2] $b [1,2,3] array_pop($a)
70. Copy by reference (JavaScript) a [1,2,3] var a = [1,2,3]
71. Copy by reference (JavaScript) a [1,2,3] b var b = a
72. Copy by reference (JavaScript) a [1,2] b a.pop()
73. JavaScript Objects are copied
 by reference Arrays are copied
 by reference
74. PHP Objects are assigned
 by reference Arrays are assigned
 by value
75. References (with objects) Which side is anakin? var anakin = { side: "light" }; var vader = anakin; vader.side = 'dark' (JavaScript)
76. One more thing!
77. I wrote this code… …what happened next? $number = 1; if ($number = 5) { echo “It’s five”; } (PHP)
78. I wrote this code… …what happened next? $number = 1; if ($number = 5) { echo “It’s five”; } (PHP)
79. I wrote this code… …what happened next? $number = 1; if ($number = 5) { echo “It’s five”; } (PHP)
80. I wrote this code… …what happened next? $number = 1; if ($number = 5) { echo “It’s five”; } (PHP)
81. “It’s five”
82. $number = 1; if ($number = 5) { echo “It’s 5”; }
83. $number = 1; if ($number = 5) { echo “It’s 5”; }
84. $number = 1; if ($number == 5) { echo “It’s 5”; }
85. $number = 1; if ($number === 5) { echo “It’s 5”; }
86. $number = 1; if ( 5 == $number ) { echo “It’s 5”; }
87. $number = 1; if ( 5 = $number ) { echo “It’s 5”; } PHP Parse error: Syntax error, unexpected '='
88. $number = 1; if ( 5 = $number ) { echo “It’s 5”; } Yoda notation
89. Variables Assignment References Storing and moving values around
90. Types Categories of “things” that have
 similar properties…
91. Types abcdefgh ijklmnop qrstuvwxyz 1 2 3 4 5 6 7 8 9 10 11 12 13 14
92. Types in programming Numbers 0 1 2 3 0 -1 -2 -3 0 0.1 0.2 0.3 Strings “Hello world” “Ross” “WordCamps are amazing” “42” Booleans true false In PHP: • Integers • Floats
93. Types in programming Objects Arrays Make your own types Lists of things Note: In JavaScript Arrays are a kind of object
94. Types Values have types, not variables
95. Types Values have types, not variables In some other languages
 VARIABLES are typed $number
 (Integer) “Hello World”
96. Types Values have types, not variables In PHP and JS
 VALUES are typed $number “Hello World” (string) 42 (integer)
97. I wrote this code… …what happened next? prompt(‘Give me a number’) + 1 (JavaScript)
98. “5” + 1
99. “51”
100. WAT?!
101. Type conversion Changing one type to another “Casting” - “Coercion” - “Juggling”
102. “5” + 1
103. “5” + 1 String Number
104. “5” + “1” String String
105. “51” String
106. Implicit (automatic) type conversion • Is really complicated • Sometimes does it just right • Often very confusing
107. Implicit (automatic) type conversion https://getify.github.io/coercions-grid/ - thanks Belinda!!
108. Explicit (manual) type conversion “5” + 1
109. Explicit (manual) type conversion parseInt(“5”) + 1
110. Explicit (manual) type conversion 5 + 1
111. Explicit (manual) type conversion 6
112. Anything to a number Number("5") Explicit (manual) type conversion Anything to a string String(5) Anything to a Boolean Boolean(5) Many other ways! JavaScript Better string to number:
 parseInt("3.141", 10)
 parseFloat("3.141")
113. Anything to a whole number (int)”3.141” Explicit (manual) type conversion Anything to a decimal number (float)”3.141” Anything to a Boolean (bool)”yes” Many other ways! PHP Anything to a string
 
 (string)3.141
114. Checking types • typeof thing
 (JavaScript) • getType(thing)
 (PHP) • is_bool() / is_int() / is_string() / is_array() (PHP)
115. Comparing types a == b compare and let the language sort the types out a === b compare both values AND types are the same
116. Types • Be aware! • Know how to test or check the type • Know how to convert types • Know the difference between `==` and `===`
117. Operators again…
118. I wrote this code… …what happened next? "I am " + 2019 - 2000 + " years old" (JavaScript)
119. "NaN years old"
120. WAT?!
121. "NaN years old" Not A Number (JavaScript thing)
125. “BODMAS” Brackets, Order, Division,
 Multiplication, Addition, Subtraction
126. Operator Precedence and Associativity The order in which operators are evaluated
127. 1 + 20 * 4 = ? Operator Precedence
128. 1 + (20 * 4) = ? Operator Precedence
129. 1 + 80 = ? Operator Precedence
130. 81 Operator Precedence
131. Operator Precedence https://www.php.net/manual/en/ language.operators.precedence.php
132. Operator Associativity https://www.php.net/manual/en/ language.operators.precedence.php
133. "I am " + 2019 - 2000 + " years old" Operator Associativity
134. ("I am " + 2019) - 2000 + " years old" Operator Associativity
135. "I am 2019" - 2000 + " years old" Operator Associativity
136. ("I am 2019" - 2000) + " years old" Operator Associativity
137. NaN + " years old" Operator Associativity
138. "NaN years old" Operator Associativity
139. Operator precedence Operator associativity Control the order that expressions are evaluated in
140. Functions
141. Functions Blocks of code Named Reusable Inputs (optional) Outputs (optional)
142. Anatomy of a function function getPostTitle( $post ) { $title = $post->post_title; return $title; }
143. Anatomy of a function function getPostTitle( $post ) { $title = $post->post_title; return $title; } Name
144. Anatomy of a function function getPostTitle( $post ) { $title = $post->post_title; return $title; } Parameter(s)
145. Anatomy of a function function getPostTitle( $post ) { $title = $post->post_title; return $title; } Function code
146. Anatomy of a function function getPostTitle( $post ) { $title = $post->post_title; return $title; } Returned value (output)
147. Anatomy of a function function getPostTitle( $post ) { $title = $post->post_title; return $title; } Name Parameter(s) Function code Returned value (output)
148. I wrote this code… function doubleAll( $array ) { foreach( $array as $index => $item ) { $array[$index] = $item * 2; } } (PHP)
149. I wrote this code… function doubleAll( $array ) { foreach( $array as $index => $item ) { $array[$index] = $item * 2; } } (PHP) $a = [1,2,3]; doubleAll($a);
150. I wrote this code… function doubleAll( $array ) { foreach( $array as $index => $item ) { $array[$index] = $item * 2; } } (PHP) $a = [1,2,3]; doubleAll($a);
151. I wrote this code… function doubleAll( $array ) { foreach( $array as $index => $item ) { $array[$index] = $item * 2; } } (PHP) $a = [1,2,3]; doubleAll($a); …what is $a?
152. [1,2,3]
153. Parameters work like assignment function doubleAll( $array ) { foreach( $array as $index => $item ) { $array[$index] = $item * 2; } }
 $a = [1,2,3]; doubleAll($a);
154. function doubleAll( $array ) { foreach( $array as $index => $item ) { $array[$index] = $item * 2; } }
 $a = [1,2,3]; doubleAll($a); Parameters work like assignment
155. function doubleAll( $array ) { foreach( $array as $index => $item ) { $array[$index] = $item * 2; } }
 $a = [1,2,3]; doubleAll($a); Parameters work like assignment
156. function doubleAll( $array ) { foreach( $array as $index => $item ) { $array[$index] = $item * 2; } return $array; }
 $a = [1,2,3]; $a = doubleAll($a); Returns are important!
157. Scope
158. Scope Variables don’t exist everywhere They can only be seen in certain places
159. Scope function getPostTitle() { return $post->post_title; }
 $post = get_post(123); $title = getPostTitle();
160. Scope function getPostTitle() { return $post->post_title; }
 $post = get_post(123); $title = getPostTitle();
161. Scope function getPostTitle() { return $post->post_title; }
 $post = get_post(123); $title = getPostTitle();
162. Scope function getPostTitle() { return $post->post_title; }
 $post = get_post(123); $title = getPostTitle();
163. Scope Argh!
164. PHEW!
165. WAT?!
166. ..zzZZ
167. ARGH!
168. We learned… Expressions Statements Operators Precedence Associativity Variables Assignment References Values Literals Types Converion/Casting/Coercion Functions Returns Parameters Scope
169. Which way now?
170. Coding is easy
171. Coding is easy
172. Coding is easy HARD
173. Coding is easy HARD
174. Coding is easy HARD FUN!
175. Be curious!
176. Be curious! Go play!
177. Be curious! PHP: • php -a • psysh • https://3v4l.org/ • wp-cli shell Tools for tinkering JavaScript: • Dev tools • JSFiddle/JSBin • node
178. Questions? Ross Wintle - @magicroundabout