Save 37% off PRO during our Black Friday Sale! »

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

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.

28519fc7c37998eea059b525da5fc7ce?s=128

Ross Wintle

April 07, 2019
Tweet

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

  24. None
  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)

  122. None
  123. None
  124. None
  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