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 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:
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:
var express = require(‘express’);
var nunjucks = require(‘express-nunjucks’);
//including the librariesapp.set(‘views’, path.join(__dirname, ‘views’));
//load templates from the ‘views’ folderapp.set(‘view engine’, ‘html’);
//choosing the right Express enginenunjucks.setup({
autoescape: true,
watch: true
}, app);
//setup Nunjucks
Also, the following code was added to routes/index.js:
var router = require(‘express’).Router();
var templates = require(‘../lib/notegram-templates’);
router.get(‘/’, function (req, res) {
var authUrl = liveConnect.getAuthUrl();
res.render(‘templates’, {templates: templates});
});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:
{% extends “base.html” %}
{% for item in templates %}<div class=”item”><img src=”img/{{item.id}}.png”/>
<h1>{{item.name}}</h1>
<p>{{item.description}}</p>
<div class=”controls”>
<button type=”submit” name=”submit” value=”{{item.id}}”>Save</button>
</div>
</div>
{% endfor %}
This template is similar to the HTML from my previous article, but thanks to Nunjucks, new elements are now created automatically.
「Unlimited Calendar Works」
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:
new Date( 2016, -1 );I could get information about the previous month:
Tue Dec 01 2015 00:00:00 GMT-0800 (PST)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
While the most important part of this update is the internal code, I still made some design revisions as well.
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:
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:
<meta name=”created” content=”2016–01–25T06:30:00–08:00"/>Or you can just provide the time zone:
<meta name=”created” content=”-08:00" />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:
<img data-render-src=”http://www.onenote.com" width=”500"/>Also, for any element you can add various markings using the data-tag attribute:
<span data-tag=”to-do”>Explore OneNote API</span>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
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
