{"id":240,"date":"2017-09-11T18:14:24","date_gmt":"2017-09-11T08:14:24","guid":{"rendered":"http:\/\/www.nerdhold.com\/coder\/?p=240"},"modified":"2017-09-11T18:46:58","modified_gmt":"2017-09-11T08:46:58","slug":"measure-matters","status":"publish","type":"post","link":"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/","title":{"rendered":"Measure What Matters"},"content":{"rendered":"<address>What&#8217;s your average API response time? Do you know? Is it important to your business? What about the 90th percentile? Do response times suffer during peak demand?<\/address>\n<p>Do you think about those questions? How about these ones:<\/p>\n<address>How long does it take to get a software change reviewed? Do you know? Is it important to your business? Is it a bottleneck? Do reviews get skipped during busy periods?<\/address>\n<p>If you care about code reviews, you should measure them. Put them on your system dashboard. They&#8217;re as much an indicator of the health of your software environment as your API response times. Minimising Work In Progress and Mean-Time-To-Release are important parts of your QA process, and making sure your pull requests are reviewed and merged in a timely fashion is a great way to improve those numbers.<\/p>\n<p>What existing products are there out there to do this? Depending on the tools you use, you can probably pull out a few relevant reports. Jira is popular, and I&#8217;ve seen PMs produce some great graphs to include in their monthly management update. The problem is, the numbers you get out of these tools don&#8217;t give you direct, real-time feedback. Their very nature as longer-term averages mean they can&#8217;t represent a call to action.<\/p>\n<h1>Enter TeamLab<\/h1>\n<p>As a software shop, if the tools I&#8217;m using don&#8217;t do what I want, I have an option: build something. This is a dangerous option to have, and countless business hours have been wasted solving the wrong problems, but I really needed a nice visual prompt of how we&#8217;re doing at our code reviews in-the-moment. I also wanted a side-project for the team to tinker with new ideas for writing web applications &#8211; so even if the project didn&#8217;t turn out to be useful, the experiment would teach us something.<\/p>\n<p>I had a specific technology I wanted to try out: <a title=\"React Storybook\" href=\"https:\/\/storybook.js.org\/\" target=\"_blank\">React Storybook<\/a>. This is a really nice way to visualise your React components in various different states, and I wanted something relevant to use as a demo for the team. It was very quick and easy to get up and running with a create-react-app project including Storybook, and I hacked together a quick picture of what my PR display should look like:<br \/>\n<a href=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/Storybook10PRs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-241\" title=\"Storybook Mockup\" alt=\"Storybook10PRs\" src=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/Storybook10PRs.png\" width=\"1316\" height=\"337\" srcset=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/Storybook10PRs.png 1316w, http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/Storybook10PRs-300x76.png 300w, http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/Storybook10PRs-1024x262.png 1024w\" sizes=\"(max-width: 1316px) 100vw, 1316px\" \/><\/a><br \/>\nOn the right, you can see my quick mock-up of a board displaying ten pull requests, and the left is the Storybook control panel.<\/p>\n<p>I decided it would be useful to colour-code the pull requests, and display any reviewers and approvers on the PR cards. A new PR is yellow, and an approved one is green. A PR with reviewers turns blue, and most importantly, any PR which is older than 48 hours turns red.<br \/>\n<a href=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/StorybookPRs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-242\" title=\"Storybook with colour-coded PRs\" alt=\"StorybookPRs\" src=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/StorybookPRs.png\" width=\"937\" height=\"234\" srcset=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/StorybookPRs.png 937w, http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/StorybookPRs-300x74.png 300w\" sizes=\"(max-width: 937px) 100vw, 937px\" \/><\/a><\/p>\n<p>This was a nice little mock-up, but there was no real data behind it at this stage. Fortunately, the Git server we use has a fairly straightforward API, and so it didn&#8217;t take long to get some real data behind this component.<br \/>\n<a href=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/TeamLabPRs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-243\" title=\"Actual PR data from API\" alt=\"TeamLabPRs\" src=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/TeamLabPRs.png\" width=\"1171\" height=\"294\" srcset=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/TeamLabPRs.png 1171w, http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/TeamLabPRs-300x75.png 300w, http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/TeamLabPRs-1024x257.png 1024w\" sizes=\"(max-width: 1171px) 100vw, 1171px\" \/><\/a><\/p>\n<p>It&#8217;s really easy to see when we have PRs which are starting to get stale, and need attention. Quick &#8211; at a glance, how many PRs here have been hanging around too long and need attention?<br \/>\n<a href=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/MorePRs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-244\" title=\"Three approved PRs and two stale ones\" alt=\"MorePRs\" src=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/MorePRs.png\" width=\"1308\" height=\"303\" srcset=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/MorePRs.png 1308w, http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/MorePRs-300x69.png 300w, http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/MorePRs-1024x237.png 1024w\" sizes=\"(max-width: 1308px) 100vw, 1308px\" \/><\/a><\/p>\n<p>This has become the go-to way of seeing our outstanding PRs at a glance, and has since gone up on a big screen on the wall in our dev team office. I soon got requests for a few other widgets to go on the same dashboard, and our little side project has become a key part of our DevOps toolkit.<br \/>\n<a href=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/TVDashboard.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-245\" title=\"PR Display on big TV\" alt=\"TVDashboard\" src=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/TVDashboard.png\" width=\"1792\" height=\"1292\" srcset=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/TVDashboard.png 1792w, http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/TVDashboard-300x216.png 300w, http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/TVDashboard-1024x738.png 1024w\" sizes=\"(max-width: 1792px) 100vw, 1792px\" \/><\/a><\/p>\n<h1>Has It Worked?<\/h1>\n<p>Having those cards up where we can see them during the day has been good &#8211; but the biggest signal is during stand-up each morning. A quick glance at the TeamLab PR board has become part of the ritual, and if those cards start to build up &#8211; especially if they start to turn red &#8211; the team has a really strong signal that we&#8217;re getting behind on our code reviews.<\/p>\n<p>I don&#8217;t currently have a report which tells me the Mean-Time-To-Merge for our PRs &#8211; but I don&#8217;t think I need it. Mean-Time-To-Merge isn&#8217;t as strong or immediate a signal as a pile of glaring red PR cards looming over our morning stand-up, nor does it provide the immediate sense of relief when we clear the board.<\/p>\n<h1>What Next?<\/h1>\n<p>I&#8217;m not sure what will go on the dashboard next, but I have some idea what kinds of things I&#8217;m looking for.<\/p>\n<p>I need things I can measure &#8211; things I can pull straight out of an API. Things which can directly influence numbers like Mean-Time-To-Release &#8211; but I don&#8217;t want to display averages like that. I&#8217;m going to give people a dial they can turn directly. I&#8217;ll pick an angry colour like red for things which are outside targets, and nice friendly colours like blue and green for things which are on track. Once something is off the list, I&#8217;ll make it go away.<\/p>\n<p>In short, I want to find things which I can measure, which team members can directly influence, and which will improve our overall quality &#8211; and I want to put them up where everyone can see them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What&#8217;s your average API response time? Do you know? Is it important to your business? What about the 90th percentile? Do response times suffer during peak demand? Do you think about those questions? How about these ones: How long does it take to get a software change reviewed? Do you know? Is it important to &hellip; <a href=\"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Measure What Matters<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5,8,7],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Measure What Matters - Nerdhold Coder<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Measure What Matters - Nerdhold Coder\" \/>\n<meta property=\"og:description\" content=\"What&#8217;s your average API response time? Do you know? Is it important to your business? What about the 90th percentile? Do response times suffer during peak demand? Do you think about those questions? How about these ones: How long does it take to get a software change reviewed? Do you know? Is it important to &hellip; Continue reading Measure What Matters &rarr;\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/\" \/>\n<meta property=\"og:site_name\" content=\"Nerdhold Coder\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-11T08:14:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-09-11T08:46:58+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/Storybook10PRs.png\" \/>\n<meta name=\"author\" content=\"Lionell Pack\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lionell Pack\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/\",\"url\":\"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/\",\"name\":\"Measure What Matters - Nerdhold Coder\",\"isPartOf\":{\"@id\":\"http:\/\/www.nerdhold.com\/coder\/#website\"},\"datePublished\":\"2017-09-11T08:14:24+00:00\",\"dateModified\":\"2017-09-11T08:46:58+00:00\",\"author\":{\"@id\":\"http:\/\/www.nerdhold.com\/coder\/#\/schema\/person\/ca2988d5c0cb756a846e4d8c54e86b77\"},\"breadcrumb\":{\"@id\":\"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.nerdhold.com\/coder\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Measure What Matters\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.nerdhold.com\/coder\/#website\",\"url\":\"http:\/\/www.nerdhold.com\/coder\/\",\"name\":\"Nerdhold Coder\",\"description\":\"Tinkerings of a C# Coder\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.nerdhold.com\/coder\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.nerdhold.com\/coder\/#\/schema\/person\/ca2988d5c0cb756a846e4d8c54e86b77\",\"name\":\"Lionell Pack\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.nerdhold.com\/coder\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/0.gravatar.com\/avatar\/9be7b23cd97814ac4a40b9b4d2955b5a?s=96&d=mm&r=pg\",\"contentUrl\":\"http:\/\/0.gravatar.com\/avatar\/9be7b23cd97814ac4a40b9b4d2955b5a?s=96&d=mm&r=pg\",\"caption\":\"Lionell Pack\"},\"sameAs\":[\"http:\/\/blog.rophuine.net\"],\"url\":\"http:\/\/www.nerdhold.com\/coder\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Measure What Matters - Nerdhold Coder","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/","og_locale":"en_US","og_type":"article","og_title":"Measure What Matters - Nerdhold Coder","og_description":"What&#8217;s your average API response time? Do you know? Is it important to your business? What about the 90th percentile? Do response times suffer during peak demand? Do you think about those questions? How about these ones: How long does it take to get a software change reviewed? Do you know? Is it important to &hellip; Continue reading Measure What Matters &rarr;","og_url":"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/","og_site_name":"Nerdhold Coder","article_published_time":"2017-09-11T08:14:24+00:00","article_modified_time":"2017-09-11T08:46:58+00:00","og_image":[{"url":"http:\/\/www.nerdhold.com\/coder\/files\/2017\/09\/Storybook10PRs.png"}],"author":"Lionell Pack","twitter_misc":{"Written by":"Lionell Pack","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/","url":"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/","name":"Measure What Matters - Nerdhold Coder","isPartOf":{"@id":"http:\/\/www.nerdhold.com\/coder\/#website"},"datePublished":"2017-09-11T08:14:24+00:00","dateModified":"2017-09-11T08:46:58+00:00","author":{"@id":"http:\/\/www.nerdhold.com\/coder\/#\/schema\/person\/ca2988d5c0cb756a846e4d8c54e86b77"},"breadcrumb":{"@id":"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.nerdhold.com\/coder\/2017\/09\/11\/measure-matters\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.nerdhold.com\/coder\/"},{"@type":"ListItem","position":2,"name":"Measure What Matters"}]},{"@type":"WebSite","@id":"http:\/\/www.nerdhold.com\/coder\/#website","url":"http:\/\/www.nerdhold.com\/coder\/","name":"Nerdhold Coder","description":"Tinkerings of a C# Coder","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.nerdhold.com\/coder\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/www.nerdhold.com\/coder\/#\/schema\/person\/ca2988d5c0cb756a846e4d8c54e86b77","name":"Lionell Pack","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.nerdhold.com\/coder\/#\/schema\/person\/image\/","url":"http:\/\/0.gravatar.com\/avatar\/9be7b23cd97814ac4a40b9b4d2955b5a?s=96&d=mm&r=pg","contentUrl":"http:\/\/0.gravatar.com\/avatar\/9be7b23cd97814ac4a40b9b4d2955b5a?s=96&d=mm&r=pg","caption":"Lionell Pack"},"sameAs":["http:\/\/blog.rophuine.net"],"url":"http:\/\/www.nerdhold.com\/coder\/author\/admin\/"}]}},"_links":{"self":[{"href":"http:\/\/www.nerdhold.com\/coder\/wp-json\/wp\/v2\/posts\/240"}],"collection":[{"href":"http:\/\/www.nerdhold.com\/coder\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.nerdhold.com\/coder\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.nerdhold.com\/coder\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.nerdhold.com\/coder\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":7,"href":"http:\/\/www.nerdhold.com\/coder\/wp-json\/wp\/v2\/posts\/240\/revisions"}],"predecessor-version":[{"id":254,"href":"http:\/\/www.nerdhold.com\/coder\/wp-json\/wp\/v2\/posts\/240\/revisions\/254"}],"wp:attachment":[{"href":"http:\/\/www.nerdhold.com\/coder\/wp-json\/wp\/v2\/media?parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.nerdhold.com\/coder\/wp-json\/wp\/v2\/categories?post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.nerdhold.com\/coder\/wp-json\/wp\/v2\/tags?post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}