As I was writing last week’s bit on behavior over time graphs, I realized that I kind of want to have a simple tool that enables me to quickly draw and share a behavior over time graph. It seemed like a small-enough project. So I went ahead and wrote it. It is a picture of simplicity. Go to a page, adjust some points, type in a title and you’ve made your own visage of some behavior over time.
If you are using a computer with a mouse or touchpad, the adjustable points on the graph will reveal themselves as your cursor moves over the coordinate space. You can then drag any one of those points up or down. Click on the title at the top of the graph to edit and change it to your liking. If you are using a touch-based device (such as a phone or a tablet), just drag the curve with your finger.
Once you have your curve the way you want it and the title capturing its essence, click the “Share” button. This will change the URL to capture the parameters of the curve and its title. Now you can share your creation with your friends and colleagues or even complete strangers by sharing a URL. In most browsers, clicking the button will also copy the URL to the clipboard for convenience. Like this.
I am currently hosting the tool at https://dglazkov.github.io/botg/. Give it a whirl, and see if it works for you. If you encounter problems or have ideas for new features, file an issue here. Enjoy!
It was an interesting adventure. From the start, I wanted to go with something very simple and fast, so I opted against using dependencies or modern frontend stacks. I thought, hey – maybe I should try to code straight to the platform? After all, I was an Uber TL for the Chrome Web Platform team for a few years. Do I still have the chops?
Here’s what I’d found out. Custom elements are now everywhere. Shadow DOM just works. SVG works as intended, even though WebKit still has its repaint glitches (try to drag the curve and observe the “ripples” appearing on the dashed line in the center). Modules are amazing. Classes are amazing. The future had finally arrived. It is also all very well documented on MDN. It was kind of crazy to read about CSS variables as if they were just an ordinary part of the developer’s tool chest. How cool is that? I remember when we were pitching these ideas and people were looking at us like crazy. And – of course, OMG – VS Code. What an amazing development suite this project grew up to be.
All in all, a pleasant experience. However, here’s one thing I noticed. Even though I’d forgotten some names and keywords, I realized that the path I walked was informed by the intuition developed by working with the other side of the platform. Perhaps for those who haven’t spent years in the C++ entrails of the WebKit and Blink, coding directly to the platform might not be as easy?