{"componentChunkName":"component---src-templates-project-detail-js","path":"/project/climb-tracker/","result":{"data":{"site":{"siteMetadata":{"host":"xenodochial-pasteur-bb9d87.netlify.com"}},"markdownRemark":{"html":"<p>I've been bouldering for about five years now. Over this period of time, I've had good days and I've had bad days. I've had long periods of growth as well as long periods of stagnation. I've taken time off due to injury or various life events, and I've had stints where I'm gone to the gym three or more times a week. Once I was hooked, I couldn't not track my workouts. And since I wanted to track data, I couldn't help but go overboard and make a web app for it. This satisfying all my competing desires to build products, climb fake rocks, and enable my incredibly casual interest in the quantified self.</p>\n<h2>Building a product from scratch</h2>\n<p>Whenever I build a product from scratch, I start with asking why I even feel the urge to build the product. This first helps me prioritize work and second keeps me from adding scope for scope's sake. I'm a firm believer in Kathy Sierra's <a href=\"http://seriouspony.com/badass-users-the-book/\">Making Users Awesome</a> concept. The gist of which is that users don't want products, or web apps, or material goods. They want to be more awesome. To this extent, no amount of clever engineering or smart design will keep users if you aren't making them feel more awesome.</p>\n<p>I knew that in my mind I would be more awesome if I had an unlimited memory when it came to how my climbing sessions went. What to build and how to build it all came after this core hypothesis.</p>\n<h2>Being mindful of user experience</h2>\n<p>The experiment that tested this hypothesis needed to be able to track pertinent climbing metrics, and it needed to be able to report those metrics back to a user at a later date. So I set out to make a single page that allowed a user to punch in the difficulty of a problem they just climbed using the <a href=\"https://en.wikipedia.org/wiki/Grade_(bouldering)#Hueco_scale\">Hueco, or V-Scale</a>. My user experience chops kicked in at this point. I think one of the most important and undervalued aspects of user experience (especially in today's increasingly dynamic use of technology) is designing for context.</p>\n<p>In this case, the context is climbing in a gym. Your hands are chalky, your fingers hurt, your fingerprint may be worn to the point where it won't unlock your phone anymore, and yet I'm asking you to interact with this app. Your mind is on the wall: what will you climb next? What did you do wrong? Does your friend need a spotter? Are you in a stranger's way? And yet, I'm asking you to interact with this app. For these reasons, I assumed that a short time to input data would be important. I say \"assume\" because despite being an active boulderer, a seasoned web developer, and a student of user experience, I didn't actually know for sure until I tested the assumption.</p>\n<h2>Testing assumptions</h2>\n<p>In addition to making users awesome, I am a fan of the <a href=\"http://theleanstartup.com/\">Lean</a> methodology. Although not prescribed directly in The Lean Startup, the <a href=\"https://hackernoon.com/the-mvp-is-dead-long-live-the-rat-233d5d16ab02\">Riskiest Assumption Test</a> perfectly describes the importance and science behind what an MVP is meant to do. In the case of Climb Tracker, the riskiest assumption was that people would be willing to pull out their phones to log their climbs as they climbed. This could be tested before I went down the path of making beautiful charts to report back metrics to a user.</p>\n<p>I could have done this test in a low-tech manner, but this was my side project, and I'm an engineer. Of course I wanted to make a good project, but I'm also not about to turn down a good excuse to kick the tires on new tech. In 2016, that new tech was React. So I made a prototype of the climb tracking experience in React and shipped it as a progressive web app. I used React and Firebase to quickly take care of authentication and realtime storage.</p>\n<h2>Carrying through with product development</h2>\n<p>The test was mostly successful. I loved the experience, and my friends were pleased with it. One friend ultimately didn't care enough to bother tracking everything (the product would likely never work for him). Another friend liked it, but really didn't want to climb with his phone on him. He immediately asked for a UI that worked on his Android Wear watch. I politely but firmly told him no :)</p>\n<p>Now that my riskiest assumption had been tested and passed, I could move on to building the rest of the app. Instead, I did nothing. As side projects so often go, it fell to the wayside. It still stored data forever in Firebase, so I wasn't losing information for future analysis, but I didn't make the time to improve the app.</p>\n<p>I have since worked on it more and added a Reports section, which includes monthly digests for every month with reported climbs in it. I want to do more beyond this, but even as is, I'm happy with it as a side project.</p>\n<h2>Technology Used</h2>\n<ul>\n<li>React</li>\n<li>Gulp</li>\n<li>Less</li>\n<li>Firebase</li>\n<li>PWA</li>\n</ul>","fields":{"id":"climb-tracker"}},"dataProjectsToml":{"projects":[{"name":"Nomad Web UI","slug":"nomad-web-ui","tags":["JavaScript","EmberJS","Cluster Scheduler","DevOps","Work"],"url":"https://nomadproject.io","year":2018,"thumbnail":"nomad-ui.png","description":"The Web UI for the Nomad cluster scheduler developed and maintained by HashiCorp. Cluster schedulers are tools designed to take arbitrary workloads and run them on arbitrary computers in a cluster. The UI helps operators in an organization maintain availability of services and computation while monitoring resources across the cluster. The UI also helps developers deploy their own services without needing the expertise operators sepcialize in.\n"},{"name":"HashiConf Generative Art Plotter","slug":"hashiconf-genart-plotter","tags":["Processing","Generative Art","SVG"],"url":null,"year":2018,"thumbnail":"hashiconf-genart-plotter.jpg","description":"An art installation at HashiConf 2018. Throughout the two conference days, the 2D plotter and a preview monitor were installed in the HashiCafe for attendees to watch and (if they were lucky) take home a one-of-a-kind keepsake.\n"},{"name":"CIVIC Platform","slug":"civic-platform","tags":["JavaScript","Data Visualization","Python","Leadership","Volunteering"],"url":"https://civicplatform.org","year":2018,"thumbnail":"civic-platform.png","description":"The CIVIC Platform is the flagship product from the CIVIC Software foundation: a non-profit I am the volunteer CTO of. The platform facilitates a data pipeline, moving public data into structured, queryable databases in the cloud. It exposes numerous APIs for building tools and stories with public data. It also comes with a web application that curates stories in the form of cards to show insights that are consumable by any citizen.\n"},{"name":"U.S. in Water","slug":"us-in-water","tags":["JavaScript","Cartography","Tippecanoe","GCP"],"url":"http://stuff.mlange.io/wc-final","year":2017,"thumbnail":"us-in-water.png","description":"A detailed look at all the rivers, streams, and bodies of water in the United States as tracked in the <a href=\"https://nhd.usgs.gov/\">USGS National Hydrography Dataset</a>. Many gigabytes of data were converted into vector tiles using Mapbox's Tippecanoe tool.\n"},{"name":"Climb Tracker","slug":"climb-tracker","tags":["JavaScript","React","Firebase"],"url":"https://climb.mlange.io","year":2016,"thumbnail":"ct-tracker-thumb.png","description":"A simple web app for tracking bouldering workouts. It focuses on quickly marking which problems were completed and which were attempted. In this way, at the end of the workout, a histogram and tally of problems and problem difficulties is plotted. There are also monthly reports to look back on.\n"},{"name":"Emoji Skin Tone Randomizer","slug":"emoji-skin-tone-randomizer","tags":["JavaScript","Chrome"],"url":"https://github.com/DingoEatingFuzz/chrome-emoji-skin-tone-randomizer","year":2016,"thumbnail":"emoji-skin-tones.png","description":"A chrome extension for assigning a random skin tone to a skin tone eligible emoji that doesn't already have one assigned.\n"},{"name":"Headers Middleman","slug":"headers-middleman","tags":["JavaScript","React","Chrome"],"url":"https://github.com/DingoEatingFuzz/chrome-headers-middleman","year":2015,"thumbnail":"headers-middle-man.png","description":"A chrome extension for modifying the headers of HTTP Requests based on regex pattern matching.\n"},{"name":"NPR Songs We Love Bookmarklets","slug":"npr-songs-we-love","tags":["JavaScript","Browsers"],"url":"https://github.com/DingoEatingFuzz/npr-music-we-love-bookmarklets","year":2015,"thumbnail":"npr-songs-we-love.png","description":"The NPR Songs We Love app was a wonderful thing, but it had no way to pin/favorite/star/save the tracks you liked. This was solvable in many ways, but the way that sounded the most interesting at the time was bookmarklets. With a click of a bookmarklet, the track would be saved to localstorage. I went overboard and created additional bookmarklets for seeing the track list and for disliking tracks. You know, just for fun.\n"},{"name":"Github Avatar Arrangement","slug":"github-avatar-arrangement","tags":["Python","Processing"],"url":"https://github.com/DingoEatingFuzz/github-gravatars","year":2014,"thumbnail":"github-gravatars.png","description":"A quick sketch that generates all possible Github Avatars (not including color variations). Since Github default avatars are created through the toggling of 15 states, the resulting space is only 2<sup>15</sup>. Which is high, but not so high it isn't presentable in a single image.\n"}],"images":[{"project":"hashiconf-genart-plotter","url":"/images/hashiconf-genart-plotter.jpg","alt":"A finished plot of the Consul product","caption":"Each of the six HashiCorp products can potentially be plotted via the generative art algorithm. This is an example of the Consul product, which is the only product\ngrid that features circles.\n"},{"project":"hashiconf-genart-plotter","url":"/images/hashiconf-genart-plotter-nomad.jpg","alt":"A finished plot of the Nomad product","caption":"This is an example of the Nomad product. Each plot is unique, so although each product grid is typically very well ordered, here they are not.\nUsing perlin noise, some lines are dropped, spaced irregularly, and slightly rotated.\n"},{"project":"hashiconf-genart-plotter","url":"/images/hashiconf-genart-plotter-terraform.jpg","alt":"A finished plot of the Terraform product","caption":"To prevent the art from going to abstract, each plot includes the product logo, stylized in a way that complements the line art a plotter produces.\nThen, to tie the plot to the event, the latest product version number is plotted to hopefully invoke nostalgia years later.\n"},{"project":"us-in-water","url":"/images/us-in-water-fullscreen.png","alt":"A fullscreen seenshot of the U.S. in Water project","caption":"The project is presented as a minimalist map with a set of clickable features on the left-hand side. The features on the left are hand-picked coordinates\nthat I think are interesting to look at.\n"},{"project":"us-in-water","url":"/images/us-in-water-central-california.png","alt":"Central California in the U.S. in Water map","caption":"Central California has well-documented flowlines, which make for a rich picture of the passage of water.\n"},{"project":"us-in-water","url":"/images/us-in-water-louisiana.png","alt":"Louisiana in the U.S. in Water map","caption":"As the state sinks and eordes while the gulf rises, the total land area of Luisiana is shrinking.\n"},{"project":"us-in-water","url":"/images/us-in-water-mt-hood.png","alt":"Mt. Hood in the U.S. in Water map","caption":"The shape of Mt. Hood is distinct through the features of glaciers and lakes alone.\n"},{"project":"us-in-water","url":"/images/us-in-water-salton-sea.png","alt":"Salton Sea in the U.S. in Water map","caption":"The Salton Sea is the biggest lake in California. Evident in the water lines, there are massive-scale feats of engineering surrounding the lake.\n"},{"project":"civic-platform","url":"/images/civic-platform-overview.png","alt":"The CIVIC Platform home page","caption":"The CIVIC Platform website is a gateway to a suite of story cards that each provide an interactive tool or insight that lets people understand their city a little bit better.\n"},{"project":"civic-platform","url":"/images/civic-platform-housing.png","alt":"A story card in the 2018 housing collection","caption":"All StoryCards aim to have some explanation, some data visualization, and some interactivity.\n"},{"project":"civic-platform","url":"/images/civic-platform-disaster.png","alt":"A multivariate plot chart in the 2018 disaster collection","caption":"The frontend <a href=\"https://github.com/hackoregon/civic\" target=\"_blank\" />civic frontend repo</a> provides a collection of a UI components that enable quickly making rich and interactive visual explanations.\n"},{"project":"civic-platform","url":"/images/civic-platform-sandbox.png","alt":"The CIVIC platform sandbox","caption":"The CIVIC sandbox is a feature of the CIVIC platform that gives people a chance to dive deeper into data without having to make the jump into developer tools to run databases and notebooks locally.\n"},{"project":"climb-tracker","url":"/images/ct-home.png","alt":"The landing page for the Climb Tracker app","caption":"A straight-forward page that markets some features and requires auth. The background photo I took in Zion National Park.\n"},{"project":"climb-tracker","url":"/images/ct-tracker-blank.png","alt":"The Climb Tracker tracker with nothing tracked yet","caption":"This is the screen you see after authenticating. It is the tracker, which is the primary experience. It has two features which are immediately\nidentifiable: a list of colored buttons for tracking a climb of a difficulty, and an undo button in the event you track something in error.\nThe third less obvious feature is the \"A\" button, which marks attempts at problems.\n"},{"project":"climb-tracker","url":"/images/ct-tracker-full.png","alt":"The Climb Tracker tracker with various climbs tracked","caption":"As you use the climb tracker throughout your session, a histogram is formed that makes it very clear which difficulties you are focusing on.\nThis can be used to tell you when your warmup is done, if you're pushing yourself too hard and maybe that's why you aren't finishing anything, or\nsimply, what your success rate per difficulty is. The stripe-textured regions denote attempts.\n"},{"project":"climb-tracker","url":"/images/ct-reports.png","alt":"The Climb Tracker reports section","caption":"The reports section gives you a detailed memory of your climbing progress and frequency over time. The dashboard metrics at the top\nare useful for quick stats for the current month. Proceeding the dashboard metrics are monthly report cards that feature kabob\ncharts to illustrate difficulty histograms over time.\n"},{"project":"headers-middleman","url":"/images/headers-middle-man-large.png","alt":"Headers Middleman options page","caption":"The options page for Headers Middleman. Used to add \"rules\", which are regular expressions that match URLs, and \"headers\" which can be values\nfor new headers, values to override headers, or removing an unwanted header.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-love.png","alt":"NPR Songs We Love love indication","caption":"Since clicking a bookmark to add an entry to local storage gives no feedback to the user, this heart is flashed on the screen. It's just slapped\ninto the DOM with some jQuery.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-hate.png","alt":"NPR Songs We Love hate indication","caption":"Hate is a nearly identical bookmark to Love. The only differences are the local storage key and the hotlinked icon URL.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-list.png","alt":"NPR Songs We Love love list","caption":"The Love List bookmarklet acts as a toggle. If the Love List element is found on the page, it's removed, otherwise it's added. This ended up being\na tricky bookmarklet since it contains full blown templating for binding the loved track data. Included in this project write up is\na sample of what that templating looks like.\n"},{"project":"npr-songs-we-love","url":"/images/songs-we-love-bookmarklets.png","alt":"NPR Songs We Love bookmarklet page","caption":"This was the quick and dirty \"installation\" page. A user interested in this augmentation to the Songs We Love 2014 app would drag these links\ninto their bookmark bar. The trick being that they aren't your typical link. They take the form of <code>javascript:&lt;insert-lots-of-javascript-here&gt;</code>.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-jobs.png","alt":"Nomad UI jobs list","caption":"The Jobs List page serves as the home page for developers interacting with Nomad. It represents all software known to the cluster.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-deployments.png","alt":"Nomad UI job deployments","caption":"Nomad supports automatic rolling and green/blue deployments as well as optional canary deployments. All of this is represented in the UI\nand kept up to date in realtime.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-logs.png","alt":"Nomad UI stdout log streaming","caption":"Nomad also has a streaming HTTP API for tailing logs for allocations. The UI lets any privileged user see these logs using fetch and streaming\nrequests when possible and falling back to polling otherwise.\n"},{"project":"nomad-web-ui","url":"/images/nomad-ui-stats.png","alt":"Nomad UI metrics over time","caption":"Stats in Nomad are not stored, but the UI makes a best effort attempt at tracking data over time by storing previous values in memory,\naccounting for skipped data, and persisting historical data (up to a limit) between page views.\n"}]}},"pageContext":{"slug":"/project/climb-tracker/"}},"staticQueryHashes":[]}