{
  "block": 106144339,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "6614.040477 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-05-18T00:59:54",
  "trx_id": "da2873dae815ec1e0e755759249d9685a5fe8875",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 105979317,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "3901.830072 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-05-12T06:51:12",
  "trx_id": "7eb371d40c088377ad6ebf8196ec4ac81ebc7d7a",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 105511967,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "6626.556233 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-04-26T00:19:30",
  "trx_id": "115d720031b57123b2d755226574d6cc5f1dd583",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 102854199,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "3943.376891 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-01-23T09:47:39",
  "trx_id": "d26bf3cead402709e09a30c0af978c6f99751eb4",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 91300584,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "4107.596088 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2024-12-17T05:05:51",
  "trx_id": "9edf5e6f68fe8a480fae22b617c558b93334f4eb",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 79854776,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "4276.729620 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2023-11-13T20:48:24",
  "trx_id": "94946f9d577f73902f6e2ee7e047dc436124a2bd",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 78348876,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "7214.008406 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2023-09-21T22:42:18",
  "trx_id": "3b53eb09a973c1db48621adf255bdbda7e158c85",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 69114078,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "7435.689844 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2022-11-03T12:23:12",
  "trx_id": "9301e826438427ba2ffc918f4886aff134593755",
  "trx_in_block": 5,
  "virtual_op": 0
}

{
  "block": 60810178,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "7656.223075 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2022-01-17T11:35:45",
  "trx_id": "756b9639ad7338a3b579d570205ca53f27e0b5db",
  "trx_in_block": 5,
  "virtual_op": 0
}

{
  "block": 54608526,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "7839.991733 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2021-06-14T01:29:12",
  "trx_id": "abd7be0420419941a4527ea6d7e3f96c7a131d9d",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 49355957,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "8027.413707 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-11T11:46:57",
  "trx_id": "7a5b8751f6b31ed5f615582e2090a04829ad04c3",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 49207516,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "1912.543513 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-06T05:24:06",
  "trx_id": "cbbd5d4f5a01db47d8509b6561bd89794f30875c",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 49191049,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "8033.621561 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-05T15:24:54",
  "trx_id": "b00a1c8d73748067a9ce648f8fbe4a5d4ac45b4b",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 48259399,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "1920.017158 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-11-02T16:59:48",
  "trx_id": "a7f872a26ebc82a4ec848308cee2a777ab9ee99f",
  "trx_in_block": 2,
  "virtual_op": 0
}

{
  "block": 43217775,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "8236.426920 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-05-09T06:22:09",
  "trx_id": "864ce54ac19cebd151a2f1daf917c38a173aec53",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 43193990,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "1953.311140 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-05-08T10:04:24",
  "trx_id": "3ba127fa71fbfce0239ad14a5dd080d666c50b4f",
  "trx_in_block": 18,
  "virtual_op": 0
}

{
  "block": 35179817,
  "op": [
    "comment",
    {
      "author": "steemitboard",
      "body": "Congratulations @harps116! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@harps116/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>\n\n<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@harps116) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=harps116)_</sub>\n\n\n###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}",
      "parent_author": "harps116",
      "parent_permlink": "reactivity-in-javascript",
      "permlink": "steemitboard-notify-harps116-20190801t185229000z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-08-01T18:52:30",
  "trx_id": "a19205585f51562925ea958f472900ff4afc0a72",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 34389972,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "8413.840577 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-07-05T07:34:15",
  "trx_id": "e3931f140c6f841e6d6f7b56261c1e1e38d94e0d",
  "trx_in_block": 2,
  "virtual_op": 0
}

{
  "block": 24207376,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "8612.724150 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-07-15T20:57:27",
  "trx_id": "bf6fa889889495fc3011dbf455e67db62ea2868f",
  "trx_in_block": 8,
  "virtual_op": 0
}

{
  "block": 23742265,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "28923.475552 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-06-29T09:01:57",
  "trx_id": "0e8137d5319b845822323aa591bb801c209881c2",
  "trx_in_block": 27,
  "virtual_op": 0
}

{
  "block": 21798193,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "reactivity-in-javascript",
      "sbd_payout": "0.186 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "128.355702 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-22T19:15:33",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 7
}

{
  "block": 21625729,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "reactivity-in-javascript",
      "voter": "scorer",
      "weight": 1000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-16T19:30:36",
  "trx_id": "931b929e5813dbdba802c7498f5a4fd1cdf8b85b",
  "trx_in_block": 26,
  "virtual_op": 0
}

{
  "block": 21610828,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "reactivity-in-javascript",
      "voter": "adasq",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-16T07:05:33",
  "trx_id": "890ad6d764626e3aa36418f199afefc38393a2c1",
  "trx_in_block": 14,
  "virtual_op": 0
}

{
  "block": 21606697,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "reactivity-in-javascript",
      "voter": "rpnvyklywkno",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-16T03:39:00",
  "trx_id": "6a1a7085070ed05ce7344c34c3fb39de27413221",
  "trx_in_block": 18,
  "virtual_op": 0
}

{
  "block": 21606687,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "reactivity-in-javascript",
      "voter": "pyatachok",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-16T03:38:30",
  "trx_id": "9bd8333533126ce870d368a7bd16275ef7edfda4",
  "trx_in_block": 28,
  "virtual_op": 0
}

{
  "block": 21597795,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "reactivity-in-javascript",
      "voter": "seanlloyd",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-15T20:13:54",
  "trx_id": "57bc924084e363f020b7f9e9042bd1ac28e518a0",
  "trx_in_block": 34,
  "virtual_op": 0
}

{
  "block": 21597511,
  "op": [
    "comment",
    {
      "author": "cutemachine",
      "body": "I'm a React guy, but if I would have to switch, I would switch to Vue (or HyperApp). Thanks for sharing.",
      "json_metadata": "{\"tags\":[\"javascript\"],\"community\":\"busy\",\"app\":\"busy/2.4.0\"}",
      "parent_author": "harps116",
      "parent_permlink": "reactivity-in-javascript",
      "permlink": "re-harps116-reactivity-in-javascript-20180415t195939546z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-15T19:59:42",
  "trx_id": "0fe56164191b01d30b94187e4f3b7f0957ca36bd",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 21597484,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "reactivity-in-javascript",
      "voter": "cutemachine",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-15T19:58:21",
  "trx_id": "d3c01ecfcf35fa87bb84143808e03e34a1b60fe7",
  "trx_in_block": 60,
  "virtual_op": 0
}

{
  "block": 21597279,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "# Reactivity in JS\n\n> context: I have been using [Vue.js](https://vuejs.org/)for a number of side projects and really enjoy working with it, I also use [Knockout.js](http://knockoutjs.com/)a lot in work which uses a similar approach. I wanted to dive into the abstracted functionality a little deeper to help me understand the libraries I work with.\n\nHow do changes in state translate to changes in the DOM?\n\nLet's start with a variable:\n\n`let a = 10`\n\nand another one: \n\n`let b = a * 10`\n\nthe complete picture now looks like this:\n\n```javascript\n\nlet a = 10\nlet b = a * 10\n\n```\n\nWe want `b` to always be 10 times of a. We now have a problem, when `a` changes `b` will not be aware of that change and not update, no matter what `a` is,`b` will always be the original value of `a` times 10.\n\nThis is a imperative and procedural implementation which does not solve the problem fully, what we need is an approach that is declarative and object oriented.\n\nIn an ideal world we would have a function that looked like this: \n\n```javascript\n\nonStateChanged( () => {\n   b = a * 10\n})\n\n```\n\nThis function would run every time `a` changes to update the value of `b`. So how do we implement this function? We can see that it takes a function that is then ran to set the new state.\n\n> jargon buster: a program is described as stateful if it is designed to remember preceding events or user interactions; the remembered information is called the state of the system.\n\n\n// pseudo code \n```javascript\nlet update; // the function that manipulates the state.\n\nconst onSateChanged = _update => {\n\tupdate = _update; // sets update the passed in function\n}\n\nconst setState = newState => { // receives the new state and then called update\n\tstate = newState\n\tupdate();\n}\n```\n\n> This is an approach that React uses and why setState is always used to well.. set the state.\n\nThere is another way that involves taking the state object and converting it into a reactive object.\n\nOur `onStateChanged` function will be renamed `autorun` why will become clearer as we move through the examples.\n\nLet's implement a mini data observer and look at how Vue.js handles things.\n\nfirst we need to define accessors using the [Object.defineProperty() API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). This will allow us later to get and set the current state.\n\n![convert.png](https://steemitimages.com/DQmXYQesGUkgJ2EVcGWdH1tKFo7wGAtw8v9hACRbC5Sb9TM/convert.png)\n\n[View the code]( https://jsfiddle.net/harps116/wc2e0vgv/16/ )\n\nThat seems to be working as expected, we have a few more parts to create. Later we will change the name to observe rather than convert.\n\nWe are going to create a dependency class that keeps track of the things our state depends on, it will also notify those that depend on it that it has changed.\n\n![dep.png](https://steemitimages.com/DQmVjNcmz6vjhJhSbjhbisgdHeWKntN1ezUQtnQuzB4Z5xm/dep.png)\n\n![dep-2.png](https://steemitimages.com/DQmWb7LoH3tqzyzYRB9reE4N946rgsYYBYRvR64RMghMCfj/dep-2.png)\n\n[View the code](https://jsfiddle.net/harps116/7wf1vc2j/16/)\n\nThis of course is not the complete picture and a simplified version of the general idea. Notice the wrappedUpdate. This is a little trick to ensure that the correct function is added to the subscribers list. As it is assigned to the activeUpdate which our dependency instance checks for in its depend method, we can ensure that what we add to the subscribers list is currently active. \n\nPutting it all together: \n\n![3.png](https://steemitimages.com/DQmU9uNzVuRC6xFwjikr3sD2XLyU4bJLPu3UjJvWwjLCJND/3.png)\n![3.2.png](https://steemitimages.com/DQmccyMkujPF8CqmGqunJY43H6hbYwH9vUuxaaAy91GkzfX/3.2.png)\n![3.3.png](https://steemitimages.com/DQmNyz6mtQmaYaFkGsHLtqCzQfHviMtX8sbFNdEAxhZw4Pp/3.3.png)\n\n[View the code](https://jsfiddle.net/harps116/gL46sfxs/4/)\n\nRead through the code and play around with the state. You see it log out the changes.\n\nYou can read more about reactivity in Vue [here](https://vuejs.org/v2/guide/reactivity.html).\n\nThis idea may change a little in up coming version of Vue. You can read more about it [here](https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf).\n\nHappy Coding!",
      "json_metadata": "{\"tags\":[\"javascript\",\"coding\",\"web-development\"],\"image\":[\"https://steemitimages.com/DQmXYQesGUkgJ2EVcGWdH1tKFo7wGAtw8v9hACRbC5Sb9TM/convert.png\",\"https://steemitimages.com/DQmVjNcmz6vjhJhSbjhbisgdHeWKntN1ezUQtnQuzB4Z5xm/dep.png\",\"https://steemitimages.com/DQmWb7LoH3tqzyzYRB9reE4N946rgsYYBYRvR64RMghMCfj/dep-2.png\",\"https://steemitimages.com/DQmU9uNzVuRC6xFwjikr3sD2XLyU4bJLPu3UjJvWwjLCJND/3.png\",\"https://steemitimages.com/DQmccyMkujPF8CqmGqunJY43H6hbYwH9vUuxaaAy91GkzfX/3.2.png\",\"https://steemitimages.com/DQmNyz6mtQmaYaFkGsHLtqCzQfHviMtX8sbFNdEAxhZw4Pp/3.3.png\"],\"links\":[\"https://vuejs.org/\",\"http://knockoutjs.com/\",\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",\"https://jsfiddle.net/harps116/wc2e0vgv/16/\",\"https://jsfiddle.net/harps116/7wf1vc2j/16/\",\"https://jsfiddle.net/harps116/gL46sfxs/4/\",\"https://vuejs.org/v2/guide/reactivity.html\",\"https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "javascript",
      "permlink": "reactivity-in-javascript",
      "title": "Reactivity in JavaScript"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-15T19:48:06",
  "trx_id": "112976da8f00c193c5c76dcf3e3c19080769f016",
  "trx_in_block": 35,
  "virtual_op": 0
}

{
  "block": 21596776,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "@@ -70,17 +70,16 @@\n js.org/)\n- \n for a nu\n@@ -182,17 +182,16 @@\n js.com/)\n- \n a lot in\n@@ -229,34 +229,8 @@\n oach\n- to reactive functionality\n . I \n",
      "json_metadata": "{\"tags\":[\"javascript\",\"coding\",\"web-development\"],\"image\":[\"https://steemitimages.com/DQmXYQesGUkgJ2EVcGWdH1tKFo7wGAtw8v9hACRbC5Sb9TM/convert.png\",\"https://steemitimages.com/DQmVjNcmz6vjhJhSbjhbisgdHeWKntN1ezUQtnQuzB4Z5xm/dep.png\",\"https://steemitimages.com/DQmWb7LoH3tqzyzYRB9reE4N946rgsYYBYRvR64RMghMCfj/dep-2.png\",\"https://steemitimages.com/DQmU9uNzVuRC6xFwjikr3sD2XLyU4bJLPu3UjJvWwjLCJND/3.png\",\"https://steemitimages.com/DQmccyMkujPF8CqmGqunJY43H6hbYwH9vUuxaaAy91GkzfX/3.2.png\",\"https://steemitimages.com/DQmNyz6mtQmaYaFkGsHLtqCzQfHviMtX8sbFNdEAxhZw4Pp/3.3.png\"],\"links\":[\"https://vuejs.org/\",\"http://knockoutjs.com/\",\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",\"https://jsfiddle.net/harps116/wc2e0vgv/16/\",\"https://jsfiddle.net/harps116/7wf1vc2j/16/\",\"https://jsfiddle.net/harps116/gL46sfxs/4/\",\"https://vuejs.org/v2/guide/reactivity.html\",\"https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "javascript",
      "permlink": "reactivity-in-javascript",
      "title": "Reactivity in JavaScript"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-15T19:22:57",
  "trx_id": "7fbe6ab95f01eaace1744f4bd814b075826b4c68",
  "trx_in_block": 29,
  "virtual_op": 0
}

{
  "block": 21596727,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "@@ -150,19 +150,45 @@\n use \n+%5B\n Knockout\n- \n+.\n js\n+%5D(http://knockoutjs.com/)\n  a l\n@@ -227,16 +227,42 @@\n approach\n+ to reactive functionality\n . I want\n@@ -321,18 +321,65 @@\n e deeper\n-.\n  \n+to help me understand the libraries I work with.\n %0A%0AHow do\n",
      "json_metadata": "{\"tags\":[\"javascript\",\"coding\",\"web-development\"],\"image\":[\"https://steemitimages.com/DQmXYQesGUkgJ2EVcGWdH1tKFo7wGAtw8v9hACRbC5Sb9TM/convert.png\",\"https://steemitimages.com/DQmVjNcmz6vjhJhSbjhbisgdHeWKntN1ezUQtnQuzB4Z5xm/dep.png\",\"https://steemitimages.com/DQmWb7LoH3tqzyzYRB9reE4N946rgsYYBYRvR64RMghMCfj/dep-2.png\",\"https://steemitimages.com/DQmU9uNzVuRC6xFwjikr3sD2XLyU4bJLPu3UjJvWwjLCJND/3.png\",\"https://steemitimages.com/DQmccyMkujPF8CqmGqunJY43H6hbYwH9vUuxaaAy91GkzfX/3.2.png\",\"https://steemitimages.com/DQmNyz6mtQmaYaFkGsHLtqCzQfHviMtX8sbFNdEAxhZw4Pp/3.3.png\"],\"links\":[\"https://vuejs.org/\",\"http://knockoutjs.com/\",\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",\"https://jsfiddle.net/harps116/wc2e0vgv/16/\",\"https://jsfiddle.net/harps116/7wf1vc2j/16/\",\"https://jsfiddle.net/harps116/gL46sfxs/4/\",\"https://vuejs.org/v2/guide/reactivity.html\",\"https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "javascript",
      "permlink": "reactivity-in-javascript",
      "title": "Reactivity in JavaScript"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-15T19:20:30",
  "trx_id": "28d0f3adc8c49ca661ef16d782ff6dc063b97d89",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 21596687,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "@@ -656,17 +656,17 @@\n t %60a%60 is\n- \n+,\n %60b%60 will\n@@ -1008,305 +1008,8 @@\n %60%60%0A%0A\n-// pseudo code %0A%60%60%60javascript%0Alet update; // the function that manipulates the state.%0A%0Aconst onSateChanged = _update =%3E %7B%0A%09update = _update; // sets update the passed in function%0A%7D%0A%0Aconst setState = newState =%3E %7B // receives the new state and then called update%0A%09state = newState%0A%09update();%0A%7D%0A%60%60%60%0A\n This\n@@ -1377,16 +1377,315 @@\n ystem.%0A%0A\n+%0A// pseudo code %0A%60%60%60javascript%0Alet update; // the function that manipulates the state.%0A%0Aconst onSateChanged = _update =%3E %7B%0A%09update = _update; // sets update the passed in function%0A%7D%0A%0Aconst setState = newState =%3E %7B // receives the new state and then called update%0A%09state = newState%0A%09update();%0A%7D%0A%60%60%60%0A%0A\n %3E This i\n",
      "json_metadata": "{\"tags\":[\"javascript\",\"coding\",\"web-development\"],\"image\":[\"https://steemitimages.com/DQmXYQesGUkgJ2EVcGWdH1tKFo7wGAtw8v9hACRbC5Sb9TM/convert.png\",\"https://steemitimages.com/DQmVjNcmz6vjhJhSbjhbisgdHeWKntN1ezUQtnQuzB4Z5xm/dep.png\",\"https://steemitimages.com/DQmWb7LoH3tqzyzYRB9reE4N946rgsYYBYRvR64RMghMCfj/dep-2.png\",\"https://steemitimages.com/DQmU9uNzVuRC6xFwjikr3sD2XLyU4bJLPu3UjJvWwjLCJND/3.png\",\"https://steemitimages.com/DQmccyMkujPF8CqmGqunJY43H6hbYwH9vUuxaaAy91GkzfX/3.2.png\",\"https://steemitimages.com/DQmNyz6mtQmaYaFkGsHLtqCzQfHviMtX8sbFNdEAxhZw4Pp/3.3.png\"],\"links\":[\"https://vuejs.org/\",\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",\"https://jsfiddle.net/harps116/wc2e0vgv/16/\",\"https://jsfiddle.net/harps116/7wf1vc2j/16/\",\"https://jsfiddle.net/harps116/gL46sfxs/4/\",\"https://vuejs.org/v2/guide/reactivity.html\",\"https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "javascript",
      "permlink": "reactivity-in-javascript",
      "title": "Reactivity in JavaScript"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-15T19:18:30",
  "trx_id": "72936a084aa64a661f9354ffa6460faac71bf737",
  "trx_in_block": 43,
  "virtual_op": 0
}

{
  "block": 21596652,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "reactivity-in-javascript",
      "voter": "mahmoudmannaa",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-15T19:16:45",
  "trx_id": "3995663c52cf22cee45aaa8041c1fb16f2191092",
  "trx_in_block": 51,
  "virtual_op": 0
}

{
  "block": 21596628,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "# Reactivity in JS\n\n> context: I have been using [Vue.js](https://vuejs.org/) for a number of side projects and really enjoy working with it, I also use Knockout js a lot in work which uses a similar approach. I wanted to dive into the abstracted functionality a little deeper. \n\nHow do changes in state translate to changes in the DOM?\n\nLet's start with a variable:\n\n`let a = 10`\n\nand another one: \n\n`let b = a * 10`\n\nthe complete picture now looks like this:\n\n```javascript\n\nlet a = 10\nlet b = a * 10\n\n```\n\nWe want `b` to always be 10 times of a. We now have a problem, when `a` changes `b` will not be aware of that change and not update, no matter what `a` is `b` will always be the original value of `a` times 10.\n\nThis is a imperative and procedural implementation which does not solve the problem fully, what we need is an approach that is declarative and object oriented.\n\nIn an ideal world we would have a function that looked like this: \n\n```javascript\n\nonStateChanged( () => {\n   b = a * 10\n})\n\n```\n\n// pseudo code \n```javascript\nlet update; // the function that manipulates the state.\n\nconst onSateChanged = _update => {\n\tupdate = _update; // sets update the passed in function\n}\n\nconst setState = newState => { // receives the new state and then called update\n\tstate = newState\n\tupdate();\n}\n```\nThis function would run every time `a` changes to update the value of `b`. So how do we implement this function? We can see that it takes a function that is then ran to set the new state.\n\n> jargon buster: a program is described as stateful if it is designed to remember preceding events or user interactions; the remembered information is called the state of the system.\n\n> This is an approach that React uses and why setState is always used to well.. set the state.\n\nThere is another way that involves taking the state object and converting it into a reactive object.\n\nOur `onStateChanged` function will be renamed `autorun` why will become clearer as we move through the examples.\n\nLet's implement a mini data observer and look at how Vue.js handles things.\n\nfirst we need to define accessors using the [Object.defineProperty() API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). This will allow us later to get and set the current state.\n\n![convert.png](https://steemitimages.com/DQmXYQesGUkgJ2EVcGWdH1tKFo7wGAtw8v9hACRbC5Sb9TM/convert.png)\n\n[View the code]( https://jsfiddle.net/harps116/wc2e0vgv/16/ )\n\nThat seems to be working as expected, we have a few more parts to create. Later we will change the name to observe rather than convert.\n\nWe are going to create a dependency class that keeps track of the things our state depends on, it will also notify those that depend on it that it has changed.\n\n![dep.png](https://steemitimages.com/DQmVjNcmz6vjhJhSbjhbisgdHeWKntN1ezUQtnQuzB4Z5xm/dep.png)\n\n![dep-2.png](https://steemitimages.com/DQmWb7LoH3tqzyzYRB9reE4N946rgsYYBYRvR64RMghMCfj/dep-2.png)\n\n[View the code](https://jsfiddle.net/harps116/7wf1vc2j/16/)\n\nThis of course is not the complete picture and a simplified version of the general idea. Notice the wrappedUpdate. This is a little trick to ensure that the correct function is added to the subscribers list. As it is assigned to the activeUpdate which our dependency instance checks for in its depend method, we can ensure that what we add to the subscribers list is currently active. \n\nPutting it all together: \n\n![3.png](https://steemitimages.com/DQmU9uNzVuRC6xFwjikr3sD2XLyU4bJLPu3UjJvWwjLCJND/3.png)\n![3.2.png](https://steemitimages.com/DQmccyMkujPF8CqmGqunJY43H6hbYwH9vUuxaaAy91GkzfX/3.2.png)\n![3.3.png](https://steemitimages.com/DQmNyz6mtQmaYaFkGsHLtqCzQfHviMtX8sbFNdEAxhZw4Pp/3.3.png)\n\n[View the code](https://jsfiddle.net/harps116/gL46sfxs/4/)\n\nRead through the code and play around with the state. You see it log out the changes.\n\nYou can read more about reactivity in Vue [here](https://vuejs.org/v2/guide/reactivity.html).\n\nThis idea may change a little in up coming version of Vue. You can read more about it [here](https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf).\n\nHappy Coding!",
      "json_metadata": "{\"tags\":[\"javascript\",\"coding\",\"web-development\"],\"image\":[\"https://steemitimages.com/DQmXYQesGUkgJ2EVcGWdH1tKFo7wGAtw8v9hACRbC5Sb9TM/convert.png\",\"https://steemitimages.com/DQmVjNcmz6vjhJhSbjhbisgdHeWKntN1ezUQtnQuzB4Z5xm/dep.png\",\"https://steemitimages.com/DQmWb7LoH3tqzyzYRB9reE4N946rgsYYBYRvR64RMghMCfj/dep-2.png\",\"https://steemitimages.com/DQmU9uNzVuRC6xFwjikr3sD2XLyU4bJLPu3UjJvWwjLCJND/3.png\",\"https://steemitimages.com/DQmccyMkujPF8CqmGqunJY43H6hbYwH9vUuxaaAy91GkzfX/3.2.png\",\"https://steemitimages.com/DQmNyz6mtQmaYaFkGsHLtqCzQfHviMtX8sbFNdEAxhZw4Pp/3.3.png\"],\"links\":[\"https://vuejs.org/\",\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty\",\"https://jsfiddle.net/harps116/wc2e0vgv/16/\",\"https://jsfiddle.net/harps116/7wf1vc2j/16/\",\"https://jsfiddle.net/harps116/gL46sfxs/4/\",\"https://vuejs.org/v2/guide/reactivity.html\",\"https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "javascript",
      "permlink": "reactivity-in-javascript",
      "title": "Reactivity in JavaScript"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-15T19:15:33",
  "trx_id": "31c8e23a46faccab079e1c52fd26d9e9fbcd7caa",
  "trx_in_block": 10,
  "virtual_op": 0
}

{
  "block": 21241846,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "day-9-force",
      "sbd_payout": "0.016 SBD",
      "steem_payout": "0.004 STEEM",
      "vesting_payout": "30.591829 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-03T11:34:09",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 13
}

{
  "block": 21224446,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-9-force",
      "voter": "matthewdavid",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-02T21:03:57",
  "trx_id": "6684c9fae8444a28aab54e4dd7214e60dc509adc",
  "trx_in_block": 52,
  "virtual_op": 0
}

{
  "block": 21218416,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-9-force",
      "voter": "kid-coder",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-04-02T16:02:27",
  "trx_id": "c17dda9f21866b108f65cdefa4b94bb441ca22e7",
  "trx_in_block": 27,
  "virtual_op": 0
}

{
  "block": 21040326,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-9-force",
      "voter": "ubg",
      "weight": 100
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-03-27T11:35:09",
  "trx_id": "49419ef116629891d2b2f540ac78f3500755b287",
  "trx_in_block": 27,
  "virtual_op": 0
}

{
  "block": 21040306,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "Day 9 ~ Force\n\nI swear I haven't been slacking on my 100 days of learning, ok, I have. I'm actually in the middle of finals and a rather large project at work so I do have some legitimate excuse's. \n\nAlthough I would like to get back on track and there's no better way to avoid what you are supposed to be doing that writing a blog post about force.\n\nSo what is a force?\n\nSimply:\n\n`A vector that causes an object with mass to accelerate.`\n\nAll objects with mass experience force. Some common forces: gravity, tension, spring, buoyancy, air resistance.\n\nThese are things we want to model within our code to create a dynamic simulation of the real world.\n\nNow that we know what a vector is ( an entity with magnitude and acceleration ).\n\nAnd what acceleration is ( the change in velocity over time ) we can apply these concepts to our object with mass, or at least simulate it.\n\nA quick hark back to high school for a refresher on Newtons law's of motion, a great foundation for our simulation and a ready made framework to simulate motion.\n\nSo what happens in the real world according to Newtons law's?\n\nNewtons first law:\n\n`An object at rest stays at rest and an object in motion stays in motion`\n\nThe point: An objects velocity never changes unless something acts upon it. In other words a force. i.e friction, air resistance. However in a vacuum or if there is a net force of zero the object will stay in it's current state.\n\nNewton's second law:\n\n`Force = Mass * Acceleration`\n\nThis is powerful clue as to what we about to do in code. In a previous example we looked at a basic motion algorithm in our update function ( the function that updates the location of the ball in the draw loop ).\n\n![acc_vel.gif](https://steemitimages.com/DQmb66ZbsKVuobn5aQ5KzUEz5RZzy99MmSfRYS6L8GmSCmJ/acc_vel.gif)\n\nThe [code](https://codepen.io/harps116/pen/jZYgZw) for the image.\n\nHere's the basic idea of the function:\n\n```\nupdate() {\n\nacceleration = n;\n\nvelocity.add(acceleration);\nlocation.add(velocity)\n\n}\n```\n\nLet's take a step back for a second, We can now look at this simple function from a different perspective.\n\n```\nNewtons second law: \n\nF = M * A\n\nSolving for A\n\nA = F / M\n\nLet's say M is one ( programmers can just make up world where the mass of everything is one ) \n\nA = F\n\n```\n\nSo we could say: \n\n```\nupdate() {\n\nacceleration = force; <-- our cornerstone! \n\nvelocity.add(acceleration);\nlocation.add(velocity)\n\n}\n\n```\n\nSo now we have a way to get creative, we have to calculate force. This is our key to applying different forces to our objects to create different types of behavior.\n\nNewton's third law:\n\n`For every action there is an equal and opposite reaction`\n\nThe point: forces always occur in pairs. The two forces are of equal strength but in opposite directions.\n\nThis is something we don't really have to worry about this in our simulations as we are currently only working with relatively simple examples.\n\nI'm planning on doing a follow up where I actually write some code to incorporate our new perspective on motion!\n\nHappy coding!\n\nCheck out Daniel Shiffman's great series on the [Nature of Code](http://natureofcode.com/book/introduction/), this 100 days of learning is a great excuse for me to finally work through the lessons and take some notes as I go.",
      "json_metadata": "{\"tags\":[\"learning\",\"programming\",\"javascript\",\"code\"],\"image\":[\"https://steemitimages.com/DQmb66ZbsKVuobn5aQ5KzUEz5RZzy99MmSfRYS6L8GmSCmJ/acc_vel.gif\"],\"links\":[\"https://codepen.io/harps116/pen/jZYgZw\",\"http://natureofcode.com/book/introduction/\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "learning",
      "permlink": "day-9-force",
      "title": "Day 9 ~ Force"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-03-27T11:34:09",
  "trx_id": "8c9d6c4d878029cdecab33aa0c76a6c383d9bcfa",
  "trx_in_block": 64,
  "virtual_op": 0
}

{
  "block": 20183373,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "day-8-acceleration",
      "sbd_payout": "0.105 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "67.432535 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-25T16:08:15",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 4
}

{
  "block": 20092459,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "harps116",
      "delegator": "steem",
      "vesting_shares": "29126.504580 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-22T12:21:33",
  "trx_id": "abf676cda171458d91fd9b64bc9e3a81a3c6b4d5",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 19994478,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-8-acceleration",
      "voter": "petkaditrkov",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-19T02:40:45",
  "trx_id": "2b9158d01170e35e6a083f91d3ec0267377665a5",
  "trx_in_block": 33,
  "virtual_op": 0
}

{
  "block": 19994140,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-8-acceleration",
      "voter": "matthewdavid",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-19T02:23:51",
  "trx_id": "2af0725d7f98771a4054793ad14a727fff141a63",
  "trx_in_block": 38,
  "virtual_op": 0
}

{
  "block": 19987490,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-8-acceleration",
      "voter": "seanlloyd",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-18T20:51:21",
  "trx_id": "5a4df80b4b996cbdd7078aeaf616e304a7b9bd97",
  "trx_in_block": 22,
  "virtual_op": 0
}

{
  "block": 19981829,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "## Day 8\n\nThis my eighth day on the 100 days of learning challenge I set myself.You can read more about this years goals [here](https://steemit.com/personal/@harps116/starting-2018).\n\nThis year has really got off to a flying start. I'm super busy at work and school and I have been squeezing in non work related learning when I can. I have had to do more database work at my day job so I have been wrapping my head around that which has stunted my progress with the Nature of Code.\n\nThat's not going to stop me getting to it when I can, It just my progress will be a little slower.\n\nI managed to get some time this morning to take some notes.\n\n## Acceleration\n\nLet's recap quickly, before we were looking at this example:\n\nThis is a ball that bounces around the screen. If we look at the code, we can see that the ball object has two vectors, location ( where it is ) and velocity ( change in location over time ).\n\nIn our update function we add velocity to location. This gives the ball movement.\n\nInstinctively to make this ball move differently you may think it would be a good idea to change velocities x and mess around with location, add random to location y. All these things directly mess with location and velocity.\n\nLet's assume that this is not a good idea, A cleaner approach would be to add another vector that represents a force acting on the ball. Let's look at what is happening here:\n\n![location+velocity.png](https://steemitimages.com/DQmP49Sece8H8Dd3F4r2mbL38LwrnXyur3tadUAgV9iHvQr/location%2Bvelocity.png)\n\nIn the diagram we are looking at a snapshot of movement. We can see the impact that adding velocity to location has over time. If we wanted to make the velocity change we could potential mess around with the internal variables of the vector. This may work now, but as things get more complex it will gradually get harder to keep track of all the variables.\n\nInstead we could add another vector, In this case acceleration. Just as velocity effects location over time, acceleration effects velocity over time.\n\nAcceleration is any change in velocity over time, it could be the magnitude ( size ) of the velocity ( speed ) the direction of the velocity.\n\nLet's add acceleration to our original bouncing ball:\n\n## Adding Acceleration\n\n### Constant Acceleration\n\nIn this example the acceleration vector is slowly added to the ball over time, you can see that the ball will move faster and faster as the acceleration accumulates.\n\n![acceleration.gif](https://steemitimages.com/DQmUptnfcf5AKfcyvd6rdd4cZrNj2stEpZRxrHaYZfpopPd/acceleration.gif)\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"oEpKBm\" data-default-tab=\"js,result\" data-user=\"harps116\" data-embed-version=\"2\" data-pen-title=\"Simple Bouncing Ball Vector With Constant Acceleration\" class=\"codepen\">See the Pen <a href=\"https://codepen.io/harps116/pen/oEpKBm/\">Simple Bouncing Ball Vector With Constant Acceleration</a> by Adam Harpur (<a href=\"https://codepen.io/harps116\">@harps116</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n\nchange the value of the acceleration vector's x value to see the effect on the balls velocity. You will notice that things will get very fast if the value is over 0.5. This is because every frame the acceleration is increasing by that x value. We are running our animation at the default p5 rate of 60 frames per second. So hopefully you can see how things get very fast in a short span of time.\n\n\n### Constant acceleration with velocity \n\nIn this example we are adding acceleration to an existing velocity that is moving two pixels downward.\n\n![acc_vel.gif](https://steemitimages.com/DQmb66ZbsKVuobn5aQ5KzUEz5RZzy99MmSfRYS6L8GmSCmJ/acc_vel.gif)\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"jZYgZw\" data-default-tab=\"js,result\" data-user=\"harps116\" data-embed-version=\"2\" data-pen-title=\"Simple Bouncing Ball Vector With Constant Acceleration\" class=\"codepen\">See the Pen <a href=\"https://codepen.io/harps116/pen/jZYgZw/\">Simple Bouncing Ball Vector With Constant Acceleration</a> by Adam Harpur (<a href=\"https://codepen.io/harps116\">@harps116</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n\nwith this approach is almost like a wind is acting on the ball that is getting stronger and stronger. The acceleration vectors x component is very low in order to really see the full effect.\n\n### Random acceleration.\n\nHere we use the handy p5 Vector function 'vector_instance'.[random2D()](https://p5js.org/reference/#/p5.Vector) which gives us a random vector with a random x and y component. Note that we wouldn't want a z component as we are still working in 2D.\n\n![random_acc.gif](https://steemitimages.com/DQmbURWZkjyiSrDtzcrWYnZRfnhUwjAtKTa7LNrMWEo4mF6/random_acc.gif)\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"zRpgXy\" data-default-tab=\"js,result\" data-user=\"harps116\" data-embed-version=\"2\" data-pen-title=\"Random Acceleration and Velocity\" class=\"codepen\">See the Pen <a href=\"https://codepen.io/harps116/pen/zRpgXy/\">Random Acceleration and Velocity</a> by Adam Harpur (<a href=\"https://codepen.io/harps116\">@harps116</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n\nCheck out Daniel Shiffman's great series on the [Nature of Code](http://natureofcode.com/book/introduction/), this 100 days of learning is a great excuse for me to finally work through the lessons and take some notes as I go.",
      "json_metadata": "{\"tags\":[\"javascript\",\"code\",\"programming\"],\"image\":[\"https://steemitimages.com/DQmP49Sece8H8Dd3F4r2mbL38LwrnXyur3tadUAgV9iHvQr/location%2Bvelocity.png\",\"https://steemitimages.com/DQmUptnfcf5AKfcyvd6rdd4cZrNj2stEpZRxrHaYZfpopPd/acceleration.gif\",\"https://steemitimages.com/DQmb66ZbsKVuobn5aQ5KzUEz5RZzy99MmSfRYS6L8GmSCmJ/acc_vel.gif\",\"https://steemitimages.com/DQmbURWZkjyiSrDtzcrWYnZRfnhUwjAtKTa7LNrMWEo4mF6/random_acc.gif\"],\"links\":[\"https://steemit.com/personal/@harps116/starting-2018\",\"https://codepen.io/harps116/pen/oEpKBm/\",\"https://codepen.io/harps116\",\"https://codepen.io\",\"https://codepen.io/harps116/pen/jZYgZw/\",\"https://p5js.org/reference/#/p5.Vector\",\"https://codepen.io/harps116/pen/zRpgXy/\",\"http://natureofcode.com/book/introduction/\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "javascript",
      "permlink": "day-8-acceleration",
      "title": "Day 8 ~ Acceleration"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-18T16:08:15",
  "trx_id": "3e79d5fc454dfac8c4a1293ed37d652af09ccd10",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 19862320,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "how-flappy-bird-was-made",
      "sbd_payout": "0.251 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "134.944608 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-14T12:28:48",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 12
}

{
  "block": 19749931,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "how-flappy-bird-was-made",
      "voter": "zsh",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-10T14:44:18",
  "trx_id": "bf37899e45fd358afc757ad6071dadae31f17b1a",
  "trx_in_block": 41,
  "virtual_op": 0
}

{
  "block": 19662822,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "@@ -509,36 +509,9 @@\n g it\n- and due to time constraints\n+,\n  the\n@@ -600,26 +600,77 @@\n tore\n-.  This talk can b\n+ in a short write up like this one.  Think of the following steps lik\n e a \n@@ -3152,22 +3152,16 @@\n d Game:%0A\n-%0A     \n * Create\n@@ -3199,21 +3199,16 @@\n ipes.  %0A\n-     \n * To the\n@@ -3320,22 +3320,18 @@\n , drag.%0A\n+*\n  \n-    *\n  Make th\n@@ -3381,14 +3381,10 @@\n as.%0A\n-     \n *\n+ \n  Add\n",
      "json_metadata": "{\"tags\":[\"javascript\",\"programming\",\"technology\"],\"image\":[\"https://steemitimages.com/DQmeb1KvmvKkkGMwC4R7LgCvPNr9ajFWSjaHJCHyZxniYbn/flappy-bird.jpg\",\"https://steemitimages.com/DQmengU6tTprJhhsGvdRS42G6F1gPQqTszdejzSBFpYkChk/p5.png\",\"https://steemitimages.com/DQmeoxf2cr1fk4vMYJiFUu2H7mksmPLBj132uL43RcdkimA/crappy_bird.gif\"],\"links\":[\"https://p5js.org/\",\"https://codepen.io\",\"https://jsfiddle.net/\",\"https://codepen.io/harps116/pen/KQwOKL/\",\"https://codepen.io/harps116\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "javascript",
      "permlink": "how-flappy-bird-was-made",
      "title": "How Flappy Bird Was Made"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-07T13:55:48",
  "trx_id": "f4375a99166972410e483c5c2e61527d37537f82",
  "trx_in_block": 7,
  "virtual_op": 0
}

{
  "block": 19661700,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "how-flappy-bird-was-made",
      "voter": "seanlloyd",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-07T12:59:39",
  "trx_id": "032fdcf4563e9fbf26b3654fb3f52012cfba6a13",
  "trx_in_block": 149,
  "virtual_op": 0
}

{
  "block": 19661439,
  "op": [
    "comment",
    {
      "author": "dihyrogeno",
      "body": "Thanks ! I learnt something from you. Upvotted and followed",
      "json_metadata": "{\"tags\":[\"javascript\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "harps116",
      "parent_permlink": "how-flappy-bird-was-made",
      "permlink": "re-harps116-how-flappy-bird-was-made-20180207t124810144z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-07T12:46:36",
  "trx_id": "7390e3059bf306d6967092cf790e78555cd822b2",
  "trx_in_block": 16,
  "virtual_op": 0
}

{
  "block": 19661417,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "how-flappy-bird-was-made",
      "voter": "dihyrogeno",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-07T12:45:30",
  "trx_id": "60c38fdef8c5f5d703b5efea69ecf5897e710b70",
  "trx_in_block": 55,
  "virtual_op": 0
}

{
  "block": 19661084,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "### A Journey back in time..\n\nIn 2013 a game was released that in the following year would take the world by storm. A young Vietnamese programmer named Dong Nguyen released a game that he would later remove from the App store from guilt of overuse and the addictive nature of the game. That game was Flappy Bird.\n\n![flappy-bird.jpg](https://steemitimages.com/DQmeb1KvmvKkkGMwC4R7LgCvPNr9ajFWSjaHJCHyZxniYbn/flappy-bird.jpg)\n \nToday I am going to inform you on how to make it. Now this is just one way of doing it and due to time constraints there is no way I can go into any level of detail to have you publishing on the app store.  This talk can be a template for anyone who would like to get started and learn more about theories behind programming and animation. I have been writing code professionally for close to year so my relative knowledge is fairly limited but hopefully I can convey the main aspects of this program.\n\nI will briefly talk about the tools involved and then go on to talk about the concept used to generate a basic physics and game engine using a coding style known as Object Oriented Programming.\n\n### Tooling up\n\nThe Language I will be using is known as JavaScript which is a dynamic , high-level, weakly typed, prototype-based, multi-paradigm interpreted programming language that runs in the browser, currently the only language to run natively in the browser. That’s a lot of jargon for a dead simple and really a fun first language to learn.\n\nI will also be using a library called [P5.js](https://p5js.org/) which is a library written in JavaScript that is a browser implementation of the Proccessing a library designed to make coding more accessible to artists, designers, beginners and educators. ( touch on what a library is ).\n\n![p5.png](https://steemitimages.com/DQmengU6tTprJhhsGvdRS42G6F1gPQqTszdejzSBFpYkChk/p5.png)\n\nDue to the nature of JS, all of the logic can run in the browser, it can be implemented on websites such as [CodePen](https://codepen.io) or [JSFiddle](https://jsfiddle.net/) which give people an environment to run browser based languages. This is the lower barrier to entry and getting started that there is in programming.\n\n### The Process\n\nInitially we must write the code to create a canvas or run our program ( or to use a P5 term the sketch ). The library introduces us to the idea of a setup and a draw concept. The setup allows us to create the things that we are going to use within the draw loop that continues to run throughout the lifespan of the sketch.\n\nLuckily that is very easy in P5.js which uses a very simple syntax to allow rich functionality. Programming languages in general aim to express the sequence of actions required to create functionality. This is as more for the human side of the equation as it is for the machine underneath. \n\nJS’s syntax allows for the concept of Object Orientated Programming, which is for another talk. Simply we are going to create the things needed for the game in code. We need a bird and pipes. That’s it. We then need to give behavior to the bird and the pipes.\n\nLet’s line up the steps in creating the Flappy Bird Game:\n\n     * Create a canvas add a bird and many pipes.  \n     * To the bird add x and y position, a way for it to appear and update in the draw loop. Add forces, gravity, lift, drag.\n     * Make the pipes appear at random points on the canvas.\n     * Add the functionality to react to the space bar being pressed.\n\nHere is the game action:\n\n![crappy_bird.gif](https://steemitimages.com/DQmeoxf2cr1fk4vMYJiFUu2H7mksmPLBj132uL43RcdkimA/crappy_bird.gif)\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"KQwOKL\" data-default-tab=\"js,result\" data-user=\"harps116\" data-embed-version=\"2\" data-pen-title=\"Crappy Bird\" class=\"codepen\">See the Pen <a href=\"https://codepen.io/harps116/pen/KQwOKL/\">Crappy Bird</a> by Adam Harpur (<a href=\"https://codepen.io/harps116\">@harps116</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n\n> Follow the link to view the code\n\nThe Flappy Bird game uses a series of objects with behaviour that reacts to user input. The input simply increases the lift when the space bar is pressed the bird checks it’s y position with that of the pipe to see if its been hit. If that is the case it turns the pipe red. The pips also have a decreasing x position that give the impression that the bird is moving forward. \n\nThe secret to learning how to write code is to first ask how something does what it can do and then write the steps to do it. Libraries like P5.js make exploring ideas easy and enjoyable and I would recommend checking out their [website](https://p5js.org/) for more info.",
      "json_metadata": "{\"tags\":[\"javascript\",\"programming\",\"technology\"],\"image\":[\"https://steemitimages.com/DQmeb1KvmvKkkGMwC4R7LgCvPNr9ajFWSjaHJCHyZxniYbn/flappy-bird.jpg\",\"https://steemitimages.com/DQmengU6tTprJhhsGvdRS42G6F1gPQqTszdejzSBFpYkChk/p5.png\",\"https://steemitimages.com/DQmeoxf2cr1fk4vMYJiFUu2H7mksmPLBj132uL43RcdkimA/crappy_bird.gif\"],\"links\":[\"https://p5js.org/\",\"https://codepen.io\",\"https://jsfiddle.net/\",\"https://codepen.io/harps116/pen/KQwOKL/\",\"https://codepen.io/harps116\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "javascript",
      "permlink": "how-flappy-bird-was-made",
      "title": "How Flappy Bird Was Made"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-07T12:28:48",
  "trx_id": "61fa9bcff1e68329b71a17abfb264a3c1f900d3c",
  "trx_in_block": 32,
  "virtual_op": 0
}

{
  "block": 19578712,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "day-7-more-vectors",
      "sbd_payout": "0.189 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "85.917375 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-04T15:47:33",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 16
}

{
  "block": 19449006,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-7-more-vectors",
      "voter": "matthewdavid",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-31T03:30:06",
  "trx_id": "62529393229798b09cc295f34fd8861e7e7070b1",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 19442699,
  "op": [
    "comment",
    {
      "author": "winstonalden",
      "body": "Hmm. Maybe that's what I'll do with the older one. Thanks for the idea!",
      "json_metadata": "{\"tags\":[\"technology\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "harps116",
      "parent_permlink": "re-winstonalden-computer-rescued-from-trash-is-running-like-new-20180130t211655929z",
      "permlink": "re-harps116-re-winstonalden-computer-rescued-from-trash-is-running-like-new-20180130t221424884z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-30T22:14:27",
  "trx_id": "5fde421ed171953645970789ecc3b7779232b22d",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 19442690,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "re-winstonalden-computer-rescued-from-trash-is-running-like-new-20180130t211655929z",
      "voter": "winstonalden",
      "weight": 500
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-30T22:14:00",
  "trx_id": "3435972581b75e8d3bfcd643dfbe7d6f92a1c270",
  "trx_in_block": 49,
  "virtual_op": 0
}

{
  "block": 19441624,
  "op": [
    "vote",
    {
      "author": "matthewdavid",
      "permlink": "programming-progress-visualized",
      "voter": "harps116",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-30T21:20:39",
  "trx_id": "fcdd6da0eaeb014cfd46a6984f25e41957080edd",
  "trx_in_block": 42,
  "virtual_op": 0
}

{
  "block": 19441549,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "Superb, I have a similar set up as a home server. Nothing more satisfying that bringing an old machine back to life.",
      "json_metadata": "{\"tags\":[\"technology\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "winstonalden",
      "parent_permlink": "computer-rescued-from-trash-is-running-like-new",
      "permlink": "re-winstonalden-computer-rescued-from-trash-is-running-like-new-20180130t211655929z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-30T21:16:54",
  "trx_id": "fe27a599b1932b2d0321fcc047ae5d948f498ed6",
  "trx_in_block": 50,
  "virtual_op": 0
}

{
  "block": 19441512,
  "op": [
    "vote",
    {
      "author": "winstonalden",
      "permlink": "computer-rescued-from-trash-is-running-like-new",
      "voter": "harps116",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-30T21:15:03",
  "trx_id": "08109ea4f85c97eae765d0bf8037b9c0433cfed1",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 19378030,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-7-more-vectors",
      "voter": "seanlloyd",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-28T16:18:18",
  "trx_id": "4efb17da633902112b3e0fbe4a75b73cd58f56fd",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 19377724,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-7-more-vectors",
      "voter": "amos1969",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-28T16:03:00",
  "trx_id": "3084efc5acca71554b5c1f7b51d486aa28639fb1",
  "trx_in_block": 23,
  "virtual_op": 0
}

{
  "block": 19377415,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "## Day 7\n\nThis my seventh post on the 100 days of learning challenge I set myself.You can read more about this years goals [here](https://steemit.com/personal/@harps116/starting-2018).\n\nAs expected my schedule is only getting busier, however I have been squeezing in some learning on my lunch breaks. I learnt a little more about vectors and vector math this week so I'm sharing my notes.\n\n[Last post](https://steemit.com/javascript/@harps116/day-6-vectors) I looked at add a vectors together to vectors, let's remind ourselves how that works:\n\n![add_vectors.png](https://steemitimages.com/DQmZf3wEmjEX7DFHkENTgyE5EEYahJUsXS1Vre4vTbSiiKo/add_vectors.png)\n\nIn the above diagram we are adding A to B to get R. We are putting these vectors A and B end to end to get R. This new line R is the result of adding the two.\n\nThis maps to the idea of location and velocity, let's draw out our bouncing ball example:\n\n![adding_vectors.png](https://steemitimages.com/DQmceb6jjnrFyrBbXNum3QjKNBFp7s2CNixJAcM6TG8AzuZ/adding_vectors.png)\n\nHere is the example in code:\n\n![bounce_ball_vectors.png](https://steemitimages.com/DQmPVWBpKdHYRCDasuBQUSFxUibxQuvTMgucuUYbZ7sYVgG/bounce_ball_vectors.png)\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"qpgPLg\" data-default-tab=\"js,result\" data-user=\"harps116\" data-embed-version=\"2\" data-pen-title=\"Simple Bouncing Ball Vector\" class=\"codepen\">See the Pen <a href=\"https://codepen.io/harps116/pen/qpgPLg/\">Simple Bouncing Ball Vector</a> by Adam Harpur (<a href=\"https://codepen.io/harps116\">@harps116</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n\nWe add the location to velocity to get the new location. The formula in psuedo-code:\n\n```\nnewLocation.x = location.x + velocity.x\nnewLocation.y = location.y + velocity.y\n\n```\nNow that we have have a handle on adding let's look at subtraction. There isn't that much difference. All we are doing is replacing the add with subtract but it does require a little extra thinking. Lets first write the pseudo code and then draw it out.\n\n```\nW.x = V.x - U.x\nW.y = V.y - U.y\n\n```\nWe'll be able to give these letters more meaning after we draw it out:\n\n![sub_vectors.png](https://steemitimages.com/DQmVx8FdP3rb47Dvw7Wow6BbT6MMzvicfmZDj21aQ8iJiD4/sub_vectors.png)\n\nTo subtract the vectors we lay the vectors end to end but when subtracting we inverse the direction of one keeping the magnitude ( size ). The vector between the two is the result. In this case we have found the Velocity between the two points.\n\nnow in we can label those letters:\n\n```\nvelocity.x = mouseV.x - centerV.x\nvelocity.y = mouseV.y - centerV.y\n\n```\n\nHere's an example using code: \n\n![vector_sub.png](https://steemitimages.com/DQmarJcn1xKfrF2UFMEnYuFTVC4h1t14y6o6ztvf5nqr16X/vector_sub.png)\n\n<p data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"WdVyMg\" data-default-tab=\"result\" data-user=\"harps116\" data-embed-version=\"2\" data-pen-title=\"Vector Subtraction P5\" class=\"codepen\">See the Pen <a href=\"https://codepen.io/harps116/pen/WdVyMg/\">Vector Subtraction P5</a> by Adam Harpur (<a href=\"https://codepen.io/harps116\">@harps116</a>) on <a href=\"https://codepen.io\">CodePen</a>.</p>\n\nIt is best to follow the link to see the full functionality, hover your mouse around the screen and the line will follow. \n\nThat's all I managed this week.\n\nThanks for reading!\n\nCheck out Daniel Shiffman's great series on the [Nature of Code](http://natureofcode.com/book/introduction/), this 100 days of learning is a great excuse for me to finally work through the lessons and take some notes as I go.",
      "json_metadata": "{\"tags\":[\"javascript\",\"learning\",\"coding\"],\"image\":[\"https://steemitimages.com/DQmZf3wEmjEX7DFHkENTgyE5EEYahJUsXS1Vre4vTbSiiKo/add_vectors.png\",\"https://steemitimages.com/DQmceb6jjnrFyrBbXNum3QjKNBFp7s2CNixJAcM6TG8AzuZ/adding_vectors.png\",\"https://steemitimages.com/DQmPVWBpKdHYRCDasuBQUSFxUibxQuvTMgucuUYbZ7sYVgG/bounce_ball_vectors.png\",\"https://steemitimages.com/DQmVx8FdP3rb47Dvw7Wow6BbT6MMzvicfmZDj21aQ8iJiD4/sub_vectors.png\",\"https://steemitimages.com/DQmarJcn1xKfrF2UFMEnYuFTVC4h1t14y6o6ztvf5nqr16X/vector_sub.png\"],\"links\":[\"https://steemit.com/personal/@harps116/starting-2018\",\"https://steemit.com/javascript/@harps116/day-6-vectors\",\"https://codepen.io/harps116/pen/qpgPLg/\",\"https://codepen.io/harps116\",\"https://codepen.io\",\"https://codepen.io/harps116/pen/WdVyMg/\",\"http://natureofcode.com/book/introduction/\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "javascript",
      "permlink": "day-7-more-vectors",
      "title": "Day 7 ~ More Vectors"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-28T15:47:33",
  "trx_id": "a2e52866b51b9dd8ba0ae9e09584a203190c0896",
  "trx_in_block": 31,
  "virtual_op": 0
}

{
  "block": 19356528,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "day-6-vectors",
      "sbd_payout": "0.253 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "87.997640 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-27T22:22:57",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 16
}

{
  "block": 19351224,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "day-5-make-some-perlin-noooise-in-1d",
      "sbd_payout": "0.253 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "87.998461 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-27T17:57:39",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 10
}

{
  "block": 19351131,
  "op": [
    "curation_reward",
    {
      "comment_author": "jfuenmayor96",
      "comment_permlink": "create-a-react-project-using-create-react-app",
      "curator": "harps116",
      "reward": "2.046476 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-27T17:53:00",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 33
}

{
  "block": 19345036,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "re-amos1969-re-harps116-the-humanness-of-programs-20180120t124807954z",
      "sbd_payout": "0.066 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "22.511479 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-27T12:48:06",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 17
}

{
  "block": 19300172,
  "op": [
    "curation_reward",
    {
      "comment_author": "amos1969",
      "comment_permlink": "re-harps116-the-humanness-of-programs-20180118t232254631z",
      "curator": "harps116",
      "reward": "2.046659 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-25T23:22:57",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 9
}

{
  "block": 19298591,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "the-humanness-of-programs",
      "sbd_payout": "0.178 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "85.959956 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-25T22:03:51",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 12
}

{
  "block": 19282005,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-6-vectors",
      "voter": "zsh",
      "weight": 9500
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-25T08:14:12",
  "trx_id": "1a8b4e8aff2d3d3cd8bfbe24ba9ec6a2a5488854",
  "trx_in_block": 38,
  "virtual_op": 0
}

{
  "block": 19277310,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "day-4-custom-distribution-controlling-the-random",
      "sbd_payout": "0.199 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "96.196897 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-25T04:19:21",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 9
}

{
  "block": 19235728,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-5-make-some-perlin-noooise-in-1d",
      "voter": "grunzh",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-23T17:39:33",
  "trx_id": "0999fffa1489a5218f84742addc29ce36ffd290f",
  "trx_in_block": 47,
  "virtual_op": 0
}

{
  "block": 19235686,
  "op": [
    "vote",
    {
      "author": "harps116",
      "permlink": "day-6-vectors",
      "voter": "grunzh",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-23T17:37:27",
  "trx_id": "94c9dc26f566a54444742f3e2ea05a05bdec38b8",
  "trx_in_block": 56,
  "virtual_op": 0
}

{
  "block": 19230526,
  "op": [
    "author_reward",
    {
      "author": "harps116",
      "permlink": "re-matthewdavid-learning-vue-js-a-task-list-20180116t131914378z",
      "sbd_payout": "0.101 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "42.985141 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-23T13:19:15",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 5
}

{
  "block": 19227981,
  "op": [
    "curation_reward",
    {
      "comment_author": "steveblucher",
      "comment_permlink": "re-matthewdavid-learning-vue-js-a-task-list-20180116t111200048z",
      "curator": "harps116",
      "reward": "2.046920 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-23T11:12:00",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 7
}

{
  "block": 19200872,
  "op": [
    "comment",
    {
      "author": "harps116",
      "body": "@@ -2494,38 +2494,38 @@\n data-slug-hash=%22\n-eyxGmv\n+qpgPLg\n %22 data-default-t\n@@ -2612,35 +2612,38 @@\n e Bouncing Ball \n-X,Y\n+Vector\n %22 class=%22codepen\n@@ -2689,38 +2689,38 @@\n io/harps116/pen/\n-eyxGmv\n+qpgPLg\n /%22%3ESimple Bounci\n@@ -2719,35 +2719,38 @@\n e Bouncing Ball \n-X,Y\n+Vector\n %3C/a%3E by Adam Har\n",
      "json_metadata": "{\"tags\":[\"javascript\",\"coding\",\"learning\"],\"image\":[\"https://steemitimages.com/DQmSYyNvB9beb78eBhJoYL63eSP711iX2UBg1QALRMXcWrg/vector.png\",\"https://steemitimages.com/DQmSWLg28kjmp5QQP4dCUqCe68ugCZ8YTqUcJEB28MXSuow/x%2Cy.png\",\"https://steemitimages.com/DQmPVWBpKdHYRCDasuBQUSFxUibxQuvTMgucuUYbZ7sYVgG/refactor.png\"],\"links\":[\"https://steemit.com/personal/@harps116/starting-2018\",\"https://codepen.io/DonKarlssonSan/pen/MExzwz/\",\"https://codepen.io/DonKarlssonSan\",\"https://codepen.io\",\"https://codepen.io/harps116/pen/eyxGmv/\",\"https://codepen.io/harps116\",\"https://codepen.io/harps116/pen/qpgPLg/\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "javascript",
      "permlink": "day-6-vectors",
      "title": "Day 6 ~ Vectors"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-22T12:35:57",
  "trx_id": "ea6f329c18fc72c734e572961707bde815ddfbc2",
  "trx_in_block": 20,
  "virtual_op": 0
}