Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Ross Wintle

April 07, 2019
Tweet

More Decks by Ross Wintle

Other Decks in Technology

Transcript

  1. I tried writing
    some code…
    …you won’t believe what happened next

    View Slide

  2. Hi!
    I’m Ross
    @magicroundabout

    View Slide

  3. Let’s talk
    about code

    View Slide

  4. Coding is easy

    View Slide

  5. Computers are
    stupid

    View Slide

  6. Computers are
    stupid
    The only understand 0 and 1

    View Slide

  7. So…
    Let’s start writing some code

    View Slide

  8. +

    View Slide

  9. It isn’t

    View Slide

  10. Don’t do it!

    View Slide

  11. WAT?!
    Gary Bernhardt’s Geeky 5min talk

    https://www.destroyallsoftware.com/talks/wat

    View Slide

  12. Hmm…
    This isn’t as easy as we thought!

    View Slide

  13. What does + do?
    https://developer.mozilla.org/en-US/docs/Web/
    JavaScript/Reference/Operators/Arithmetic_Operators

    View Slide

  14. What does + do?
    https://developer.mozilla.org/en-US/docs/Web/
    JavaScript/Reference/Operators/Arithmetic_Operators

    View Slide

  15. What does + do?
    https://developer.mozilla.org/en-US/docs/Web/
    JavaScript/Reference/Operators/Arithmetic_Operators

    View Slide

  16. People come to
    coding from all
    sorts of backgrounds

    View Slide

  17. Introducing
    • Language/terminology

    • Concepts

    • Tools

    View Slide

  18. To help you
    • Code better

    • Fix problems faster

    • Learn more quickly

    • Understand documentation

    • Become curious!

    View Slide

  19. Note
    We will focus on PHP and JavaScript

    View Slide

  20. Note
    I will avoid talking about object oriented
    programming

    View Slide

  21. Note to developers
    I’m simplifying!!

    View Slide

  22. But first…
    Some terminology

    View Slide

  23. Expressions
    Code that has value

    View Slide

  24. View Slide

  25. Expressions
    “Evaluate”

    “What is…”

    View Slide

  26. Expressions
    • 2
    • "Hello World!"
    • $home or home

    View Slide

  27. Expressions
    • 2
    • "Hello World!"
    • $home or home
    • [ 1, 2, 3 ]
    • { post_title: "Programming principles" }
    • $posts[0]
    • $post->post_title or post.post_title

    View Slide

  28. Expressions
    • 2
    • "Hello World!"
    • [ 1, 2, 3 ]
    • { post_title: "Programming principles" }
    Literals: Exactly what you type

    View Slide

  29. Expressions
    • $home or home
    • $posts[0]
    • $post->post_title or post.post_title
    Variables: Names for other things

    View Slide

  30. Expressions
    • get_the_title();
    • get_post(123);
    • $the_query->have_posts();
    Functions (and methods): named blocks of code

    View Slide

  31. Combining Expressions
    2 + 2

    View Slide

  32. Combining Expressions
    2 + 2
    Expression Expression

    View Slide

  33. Combining Expressions
    2 + 2
    Expression Expression
    Operator

    View Slide

  34. Combining Expressions
    2 + 2
    Expression Expression
    Operator
    Expression

    View Slide

  35. Combining Expressions
    is_archive() or is_search()

    View Slide

  36. Combining Expressions
    is_archive() or is_search()
    Expression Expression

    View Slide

  37. Combining Expressions
    is_archive() or is_search()
    Expression Expression
    Operator

    View Slide

  38. Combining Expressions
    is_archive() or is_search()
    Expression Expression
    Operator
    Expression

    View Slide

  39. Combining Expressions
    "The first landing was " + currentYear - moonLandingYear + " years ago"

    View Slide

  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

    View Slide

  41. You may be thinking…
    …what else is there?

    View Slide

  42. Statements

    View Slide

  43. Statements
    do stuff…

    …but don’t have value

    View Slide

  44. Statements
    do stuff…

    …but don’t have value

    (normally)

    View Slide

  45. Statements
    Control flow/order/execution
    if ( $have_posts() ) {

    the_post();

    ...

    }
    while ( $have_posts() ) {

    the_post();

    ...

    }
    foreach ( $posts as $post ) {

    echo $post->post_title;

    }

    View Slide

  46. Statements
    Define or “declare” that things exist
    var my_variable;
    function sum( $items ) {

    ...

    }

    View Slide

  47. Statements
    “Do” other things
    echo “Hello World” return $my_variable;
    exit;

    View Slide

  48. Putting it all together
    if ( bored_now() and hometime() ) {
    exit;
    }

    View Slide

  49. Putting it all together
    if ( bored_now() and hometime() ) {
    Expression Expression
    Operator
    Expression
    exit;
    } Statement
    Statement

    View Slide

  50. Expressions
    Operators
    Statements
    The building blocks of your code

    View Slide

  51. Variables
    Named “boxes” that can hold values

    View Slide

  52. Variables
    $name

    View Slide

  53. Variables
    $name
    “Ross”

    View Slide

  54. Variables
    $name
    “Ross”

    View Slide

  55. Variables
    $name
    “Ross”
    Assignment
    $name = “Ross”

    View Slide

  56. Variables
    $name
    “Ross”
    Assignment has value
    $me = $name = “Ross”

    View Slide

  57. Variables
    $name
    “Ross”
    Assignment has value
    if ($name = “Ross”)

    {

    echo $name;

    }

    View Slide

  58. I wrote this code…
    $a is [1,2] … but what is $b?
    $a = [1,2,3];
    $b = $a;
    array_pop($a);
    (PHP)

    View Slide

  59. I wrote this code…
    $a is [1,2] … but what is $b?
    $a = [1,2,3];
    $b = $a;
    array_pop($a);
    (PHP)

    View Slide

  60. I wrote this code…
    $a is [1,2] … but what is $b?
    $a = [1,2,3];
    $b = $a;
    array_pop($a);
    (PHP)

    View Slide

  61. I wrote this code…
    $a is [1,2] … but what is $b?
    $a = [1,2,3];
    $b = $a;
    array_pop($a);
    (PHP)

    View Slide

  62. [1,2,3]
    $b is

    View Slide

  63. I wrote this SAME code…
    a is [1,2] … what is b?
    var a = [1,2,3];
    var b = a;
    a.pop();
    (JavaScript)

    View Slide

  64. [1,2]
    b is

    View Slide

  65. WAT?!

    View Slide

  66. Copy by reference
    and
    Copy by value

    View Slide

  67. Copy by value (PHP)
    $a
    [1,2,3]
    $a = [1,2,3]

    View Slide

  68. Copy by value (PHP)
    $a
    [1,2,3]
    $b
    [1,2,3]
    $b = $a

    View Slide

  69. Copy by value (PHP)
    $a
    [1,2]
    $b
    [1,2,3]
    array_pop($a)

    View Slide

  70. Copy by reference (JavaScript)
    a [1,2,3]
    var a = [1,2,3]

    View Slide

  71. Copy by reference (JavaScript)
    a [1,2,3] b
    var b = a

    View Slide

  72. Copy by reference (JavaScript)
    a [1,2] b
    a.pop()

    View Slide

  73. JavaScript
    Objects are copied

    by reference

    Arrays are copied

    by reference

    View Slide

  74. PHP
    Objects are assigned

    by reference

    Arrays are assigned

    by value

    View Slide

  75. References (with objects)
    Which side is anakin?
    var anakin = { side: "light" };
    var vader = anakin;
    vader.side = 'dark'
    (JavaScript)

    View Slide

  76. One more
    thing!

    View Slide

  77. I wrote this code…
    …what happened next?
    $number = 1;
    if ($number = 5) {
    echo “It’s five”;
    }
    (PHP)

    View Slide

  78. I wrote this code…
    …what happened next?
    $number = 1;
    if ($number = 5) {
    echo “It’s five”;
    }
    (PHP)

    View Slide

  79. I wrote this code…
    …what happened next?
    $number = 1;
    if ($number = 5) {
    echo “It’s five”;
    }
    (PHP)

    View Slide

  80. I wrote this code…
    …what happened next?
    $number = 1;
    if ($number = 5) {
    echo “It’s five”;
    }
    (PHP)

    View Slide

  81. “It’s five”

    View Slide

  82. $number = 1;
    if ($number = 5) {
    echo “It’s 5”;
    }

    View Slide

  83. $number = 1;
    if ($number = 5) {
    echo “It’s 5”;
    }

    View Slide

  84. $number = 1;
    if ($number == 5) {
    echo “It’s 5”;
    }

    View Slide

  85. $number = 1;
    if ($number === 5) {
    echo “It’s 5”;
    }

    View Slide

  86. $number = 1;
    if ( 5 == $number ) {
    echo “It’s 5”;
    }

    View Slide

  87. $number = 1;
    if ( 5 = $number ) {
    echo “It’s 5”;
    }
    PHP Parse error: Syntax error, unexpected '='

    View Slide

  88. $number = 1;
    if ( 5 = $number ) {
    echo “It’s 5”;
    }
    Yoda notation

    View Slide

  89. Variables
    Assignment
    References
    Storing and moving values around

    View Slide

  90. Types
    Categories of “things” that have

    similar properties…

    View Slide

  91. Types
    abcdefgh
    ijklmnop
    qrstuvwxyz
    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14

    View Slide

  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

    View Slide

  93. Types
    in programming
    Objects Arrays
    Make your own types Lists of things
    Note: In JavaScript Arrays
    are a kind of object

    View Slide

  94. Types
    Values have types, not variables

    View Slide

  95. Types
    Values have types, not variables
    In some other languages

    VARIABLES are typed
    $number

    (Integer)
    “Hello World”

    View Slide

  96. Types
    Values have types, not variables
    In PHP and JS

    VALUES are typed
    $number
    “Hello World”
    (string)
    42
    (integer)

    View Slide

  97. I wrote this code…
    …what happened next?
    prompt(‘Give me a number’) + 1
    (JavaScript)

    View Slide

  98. “5” + 1

    View Slide

  99. “51”

    View Slide

  100. WAT?!

    View Slide

  101. Type conversion
    Changing one type to another
    “Casting” - “Coercion” - “Juggling”

    View Slide

  102. “5” + 1

    View Slide

  103. “5” + 1
    String Number

    View Slide

  104. “5” + “1”
    String String

    View Slide

  105. “51”
    String

    View Slide

  106. Implicit (automatic) type conversion
    • Is really complicated

    • Sometimes does it just right

    • Often very confusing

    View Slide

  107. Implicit (automatic) type conversion
    https://getify.github.io/coercions-grid/ - thanks Belinda!!

    View Slide

  108. Explicit (manual) type conversion
    “5” + 1

    View Slide

  109. Explicit (manual) type conversion
    parseInt(“5”) + 1

    View Slide

  110. Explicit (manual) type conversion
    5 + 1

    View Slide

  111. Explicit (manual) type conversion
    6

    View Slide

  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")

    View Slide

  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

    View Slide

  114. Checking types
    • typeof thing

    (JavaScript)

    • getType(thing)

    (PHP)

    • is_bool() / is_int() / is_string() / is_array()
    (PHP)

    View Slide

  115. Comparing types
    a == b
    compare and let the language sort the types out

    a === b
    compare both values AND types are the same

    View Slide

  116. Types
    • Be aware!

    • Know how to test or check the type

    • Know how to convert types

    • Know the difference between `==` and `===`

    View Slide

  117. Operators
    again…

    View Slide

  118. I wrote this code…
    …what happened next?
    "I am " + 2019 - 2000 + " years old"
    (JavaScript)

    View Slide

  119. "NaN years old"

    View Slide

  120. WAT?!

    View Slide

  121. "NaN years old"
    Not A Number
    (JavaScript thing)

    View Slide

  122. View Slide

  123. View Slide

  124. View Slide

  125. “BODMAS”
    Brackets, Order, Division,

    Multiplication, Addition, Subtraction

    View Slide

  126. Operator
    Precedence and
    Associativity
    The order in which operators are evaluated

    View Slide

  127. 1 + 20 * 4 = ?
    Operator Precedence

    View Slide

  128. 1 + (20 * 4) = ?
    Operator Precedence

    View Slide

  129. 1 + 80 = ?
    Operator Precedence

    View Slide

  130. 81
    Operator Precedence

    View Slide

  131. Operator Precedence
    https://www.php.net/manual/en/
    language.operators.precedence.php

    View Slide

  132. Operator Associativity
    https://www.php.net/manual/en/
    language.operators.precedence.php

    View Slide

  133. "I am " + 2019 - 2000 + " years old"
    Operator Associativity

    View Slide

  134. ("I am " + 2019) - 2000 + " years old"
    Operator Associativity

    View Slide

  135. "I am 2019" - 2000 + " years old"
    Operator Associativity

    View Slide

  136. ("I am 2019" - 2000) + " years old"
    Operator Associativity

    View Slide

  137. NaN + " years old"
    Operator Associativity

    View Slide

  138. "NaN years old"
    Operator Associativity

    View Slide

  139. Operator precedence
    Operator associativity
    Control the order that expressions

    are evaluated in

    View Slide

  140. Functions

    View Slide

  141. Functions
    Blocks of code Named
    Reusable
    Inputs (optional) Outputs (optional)

    View Slide

  142. Anatomy of a function
    function getPostTitle( $post ) {
    $title = $post->post_title;
    return $title;
    }

    View Slide

  143. Anatomy of a function
    function getPostTitle( $post ) {
    $title = $post->post_title;
    return $title;
    }
    Name

    View Slide

  144. Anatomy of a function
    function getPostTitle( $post ) {
    $title = $post->post_title;
    return $title;
    }
    Parameter(s)

    View Slide

  145. Anatomy of a function
    function getPostTitle( $post ) {
    $title = $post->post_title;
    return $title;
    }
    Function
    code

    View Slide

  146. Anatomy of a function
    function getPostTitle( $post ) {
    $title = $post->post_title;
    return $title;
    } Returned value (output)

    View Slide

  147. Anatomy of a function
    function getPostTitle( $post ) {
    $title = $post->post_title;
    return $title;
    }
    Name Parameter(s)
    Function
    code
    Returned value (output)

    View Slide

  148. I wrote this code…
    function doubleAll( $array ) {
    foreach( $array as $index => $item ) {
    $array[$index] = $item * 2;
    }
    }
    (PHP)

    View Slide

  149. I wrote this code…
    function doubleAll( $array ) {
    foreach( $array as $index => $item ) {
    $array[$index] = $item * 2;
    }
    }
    (PHP)
    $a = [1,2,3];
    doubleAll($a);

    View Slide

  150. I wrote this code…
    function doubleAll( $array ) {
    foreach( $array as $index => $item ) {
    $array[$index] = $item * 2;
    }
    }
    (PHP)
    $a = [1,2,3];
    doubleAll($a);

    View Slide

  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?

    View Slide

  152. [1,2,3]

    View Slide

  153. Parameters work like assignment
    function doubleAll( $array ) {
    foreach( $array as $index => $item ) {
    $array[$index] = $item * 2;
    }
    }

    $a = [1,2,3];
    doubleAll($a);

    View Slide

  154. function doubleAll( $array ) {
    foreach( $array as $index => $item ) {
    $array[$index] = $item * 2;
    }
    }

    $a = [1,2,3];
    doubleAll($a);
    Parameters work like assignment

    View Slide

  155. function doubleAll( $array ) {
    foreach( $array as $index => $item ) {
    $array[$index] = $item * 2;
    }
    }

    $a = [1,2,3];
    doubleAll($a);
    Parameters work like assignment

    View Slide

  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!

    View Slide

  157. Scope

    View Slide

  158. Scope
    Variables don’t exist everywhere
    They can only be seen in certain places

    View Slide

  159. Scope
    function getPostTitle() {
    return $post->post_title;
    }

    $post = get_post(123);
    $title = getPostTitle();

    View Slide

  160. Scope
    function getPostTitle() {
    return $post->post_title;
    }

    $post = get_post(123);
    $title = getPostTitle();

    View Slide

  161. Scope
    function getPostTitle() {
    return $post->post_title;
    }

    $post = get_post(123);
    $title = getPostTitle();

    View Slide

  162. Scope
    function getPostTitle() {
    return $post->post_title;
    }

    $post = get_post(123);
    $title = getPostTitle();

    View Slide

  163. Scope
    Argh!

    View Slide

  164. PHEW!

    View Slide

  165. WAT?!

    View Slide

  166. ..zzZZ

    View Slide

  167. ARGH!

    View Slide

  168. We learned…
    Expressions
    Statements
    Operators
    Precedence
    Associativity
    Variables
    Assignment
    References
    Values
    Literals
    Types
    Converion/Casting/Coercion
    Functions
    Returns
    Parameters
    Scope

    View Slide

  169. Which way now?

    View Slide

  170. Coding is easy

    View Slide

  171. Coding is easy

    View Slide

  172. Coding is easy
    HARD

    View Slide

  173. Coding is easy
    HARD

    View Slide

  174. Coding is easy
    HARD
    FUN!

    View Slide

  175. Be curious!

    View Slide

  176. Be curious!
    Go play!

    View Slide

  177. Be curious!
    PHP:

    • php -a

    • psysh

    • https://3v4l.org/

    • wp-cli shell
    Tools for tinkering
    JavaScript:

    • Dev tools

    • JSFiddle/JSBin

    • node

    View Slide

  178. Questions?
    Ross Wintle - @magicroundabout

    View Slide