The story of Notegram’s January 2016 update

Dima K.
Dima K.
Jan 27, 2016 · 5 min read

This is the translated version of an article I wrote for Microsoft Russia, the original version of which can be found here.

Recently I have released the second update for my project, Notegram.

Notegram is a web application for Microsoft OneNote for quickly sharing templates without any downloads or extensions.

The new Calendar template card

The most important detail in this update is the new calendar template, which now allows selecting the month and year. Also, I improved the design, and while writing this article have added 2 new templates:

2 new templates

Beyond that, I also made many internal changes, about which I would like to talk in this article.

Templating

Notegram was born at a hackathon, and the first version was written in not yet discovered hours of the night by a person who did not know Node.js at all, so before adding any new functions, I had to make some changes to my code.

The original version of Notegram was based on the open source OneNote API example, and did not make use of templating. It used Express with the Jade engine, which I found rather inconvenient. I wanted to write HTML, so I decided to use the Nunjucks engine from Mozilla.

For the transition I first had to add the express-nunjucks npm package to my dependencies list in package.json, and execute the command npm install.

The following code was added to the app.js file of my app:

Also, the following code was added to routes/index.js:

Then a template was created, which, with the help of the previous code fragment, created HTML for each element in an array stored in lib/notegram-templates.js:

This template is similar to the HTML from my previous article, but thanks to Nunjucks, new elements are now created automatically.

「Unlimited Calendar Works」

Infinite Creation of Calendars

The biggest addition in this update is the new Calendar template: while before I had to manually update this template, now it not only shows the current month, but also lets you pick any other year.

The template code is based on the Date JavaScript object, with which I was able to get information about any month that I needed. It has some oddities, such as months being zero-indexed, but I found one property of it useful: if I created, for example, an Date object with a negative month:

I could get information about the previous month:

I started working on the interactive template before making any changes to Notegram. The test version was written on my tablet in JSfiddle — and since Notegram uses Node.js, I could just reuse that code with minimal changes.

One of my working versions can be found here: https://jsfiddle.net/ksrdtL8e/

The first day of the week turned out to be an interesting question. Many of my users live in the US, and prefer to start their week from Sunday, so I added an option for that as well.

Design

Windows, Android, iOS

While the most important part of this update is the internal code, I still made some design revisions as well.

Evolution of the Calendar template

Notegram already used ‘flat’ design, but I still made some changes, based on the Windows 10 News app. I made the template preview images larger, and changed the colors for the template cards. Also, I added a panel with a short description of the project for new users.

With the https://realfavicongenerator.net/ service I added pretty icons for all platforms.

Chrome for Android, where Notegram can now behave like a fully featured application, made me especially happy:

Notegram on Android

More about creating pages with the OneNote API

Also, I would like to go into more detail about the OneNote API.

For creating pages, OneNote API uses a subset of HTML, the list of the tags it supports can be found here.

The only <meta> tag supported by OneNote API is the note’s creation date. It can either be specified in the ISO 8601 format:

Or you can just provide the time zone:

I mostly use tables for my templates — they behave the same way as in HTML.

The <img> tag behaves almost the same way as in HTML, but it has one interesting function: if instead of the src attribute you use data-render-src, you can save a screenshot of the page:

Also, for any element you can add various markings using the data-tag attribute:

The full list of markings can be found here.

Sadly, the API does not currently support handwriting or mathematical formulas, but I hope that this functionality will be added soon.

Conclusion

Notegram running on a Surface tablet

I’m very glad that so many people have enjoyed my project, and I am going to continue working on it. If you have any suggestions, please send them to me here or via Twitter.

Notegram is live right now at http://notegram.me

Dima K.

Written by

Dima K.

A hedgehog on the internet.