It is a lovely Saturday afternoon here in Washington DC, and I'm doing some light reading on Microsoft System Center Configuration Manager and the R programming language for statistical analysis. I figure to mentally manage the workload of learning about two separate technologies, I should take breaks - but there is a problem: I don't take a break unless something external bugs me like fire alarms. Pesky real world interference.
Enter the Pomodoro Technique. The Pomodoro Technique is a simple time management method developed by Francesco Cirillo that breaks up work into predetermined time intervals and breaks; generally 25 minutes with short breaks in between such as 5 minutes. I've found the Pomodoro Technique to be very helpful in forcing myself to take breaks - especially when you set a timer! I want to take it a step further and be able to track my studies and work as I go so that I can look back and see historical progress. It would be even better if I could integrate this with software that I already near constantly run - such as Outlook 2016.
Good news: Outlook 2016 features the ability to create and add extensions through their add-ins integrations which can be built by 3rd parties and then added to the Windows Store. Add-ins are essentially extensions to Outlook that utilize an XML manifest detailing the actual extension and then JavaScript/HTML/CSS that compose the extension itself. Hooray for cross-platform functionality.
Even cooler news: Microsoft provides a front-end framework for "...building experiences that fit seamlessly into Office and Office 365" dubbed Office UI Fabric featuring components built with React, or vanilla JavaScript, or Fabric for iOS and or AngularJS. My adventure to track my studies and work is turning out to be pretty educational. :)
1.1: Behold the add-in lifecycle
You can develop add-ins with Visual Studio or the IDE/editor of your choice. As I write this, my Visual Studio 2017 Enterprise installation is currently updating with R Tools for Visual Studio, so I'll use my Mac OS X with Atom (I travel with multiple laptops - TSA can be a nightmare) and the handy Microsoft Office Add-in Project Generator - YO OFFICE! to start off my project. Visual Studio also apparently has powerful support for developing Office Add-ins through their Office Developer Tools, so I may run through the setup steps for that when (if...) my R Tools installation completes.
Before we get too deep in the technical aspects of developing our pomodoro timer, it is important to begin to conceptualize a first pass of a design for it - that way there isn't an existential crisis later when I discover I don't have any actual idea of what I'm building. I did a quick prototype on paper for the design that I've envisioned.
It is a simple sidebar with a timer, timer progress bar, work log where we can input our actual work and a table to track the work that has been saved so far. There are some additional elements such as a toolbar and buttons. Now that we have a conceptual understanding of what the application will be, we can dig down into some of the specifics.
Functional requirements
- User-specified time countdown
- Programmatic user-specified breaks
- Input field for a work log
- Export functionality of the work log into Office products
Functional elements
- The add-in should be able to execute a user-specified countdown.
- The add-in's user-specified countdown should have an audible/visible alarm associated with it.
- The add-in should enable the user to programmatically switch to a "break" countdown instead of a work countdown.
- The add-in should be able to record and save input (text/speech/etc) from the user for a specific countdown period.
- The add-in's historical work log should be able to be edited.
- The add-in's historical work log should support copy to clipboard and direct input to a text field in an Office product.
Design requirements
- The add-in should behave similarly no matter the device or viewport.
- The add-in should be optimized for a touch interface (I personally use my Surfacebook's touchscreen all the time).
- The add-in should adhere to Office UI Fabric's Style Guide's specification.
Welp. I really have my work cut out for me here. We should probably synthesize the above requirements into a minimum viable product (MVP) specification. Luckily, I set out this morning with a pretty simple task: make myself take breaks!
Minimum viable product specification
- Countdown based on a specified timer and alert completion of the countdown so that I can encourage a productive work schedule.
Let's get started with some coding. It just so happens that I've now spent hours researching, writing and occasionally chatting with the hotel staff in the lobby during my pomodoro breaks. In that time, I was able to successfully install the Office Developer Tools, and boy am I glad that I did.
The sample project deployment from Visual Studio 2017 was an incredibly smooth process. Once the tool is installed, you can create an Add-in sample project just by selecting the appropriate project template [item 1.2 below], and a fully functional add-in is created. Once you run the project code, it automatically uploads your add-in to Exchange and you magically have a functional Outlook add-in [item 1.3 below].
1.2 The Outlook add-in template
1.3 The Pomodoro add-in sample template after it is deployed
Alas, we'll be using very little of the sample project code other than to give us a general idea of the architecture and format for the add-in code. For this reason, we'll set up an additional project. I'm a big fan of TypeScript for a number of reasons; so we'll be using TypeScript to build out our pomodoro app. If you're unfamiliar with TypeScript, it is a typed superset of JavaScript that compiles down to vanilla JavaScript. TypeScript will enable me to use ECMAScript 2016 and some fancy Intellisense in VS.
npm install -g typescript
Let's set up our actual pomodoro project now.
tsc --init ## initializes our TypeScript project
git init ## never not version control
npm init ## never not manage your dependencies
Time is a fickle thing to deal with in JavaScript. I'd rather abstract away the complexities of dealing with JavaScript's Date object, so we'll use a library suited to the task instead. Moment.js is my preferred swiss army knife for this purpose.
npm install --save moment
npm install --save office-ui-fabric-js
to be continued...
