JTechDev

Custom Web Notes System

There are many note systems out there: Evernote, OneNote, and SimpleNote for example. Wouldn’t it be nice to have your own custom notes system that you are in control of. For some, the simplicity of the Cloud note systems make them unbeatable in usability. What if you want something a little more geeky?

If your like me, you don’t like to just take the easiest approach to a problem. Solving the problem can be more rewarding than the solution itself. In this case, I wanted a note system that was separate from the cloud, I could customize in every way, and portable. I found out how to do this with client side web technologies.

Now, if you are the type of person who uses evernote all the time, Evernote Runs My Life

then this solution is not likely to replace it. Either way it is a fun way of taking notes and perhaps the ones you don’t want synced can stay on this local note system.

Now, let’s get on to the fun part! :smiley:

The Content

To start, I decided that having the notes in HTML would allow me to have flexibility in display and would not be to difficult to type in. Here is the structure I used for my note system:

<div class="note">
    <h2 class="note-title">Note Title</h2>
    <span class="note-date">MM/DD/YY</span>
    <span class="note-tags">Tags: none</span>
    <hr class="note-seperator">
    <p class="note-content">
        Type here to create a note...
    </p>
</div>

This structure allows flexibility while maintaining a somewhat simple design.

To add an indicator of the notebook the user is in I put the following above:

<header>
    <h1><a href="../Notebook.html">Notes</a> - (NOTEBOOK_NAME)</h1>
</header>

With the link referring to a file containing a list of the notebooks available. I put the file one folder up containing the following contents:

<header>
    <h1>Notes</h1>
</header>
<ul id="list">
    <li><a href="General/General.html">General</a></li>
    <li><a href="Brainstorming/Brainstorming.html">Brainstorming</a></li>
    <li><a href="Quotes/Quotes.html">Quotes</a></li>
    <li><a href="Misc/Misc.html">Misc</a></li>
</ul>

The Style

Now, this note system would be pretty ugly if we were to stop here without styling it. I created a style-sheet in the Assets folder in the same directory as the notebook list. I loosely based the style on Material Design and used the color pallets provided.

This is what I put in the style-sheet:

* {
    font-family: "Open Sans";
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff; 
}

header {
    background-color: #3F51B5;
    color: white;
    padding: 50px 40px 50px 40px;
}

header a {
    color: white;
}

header a:hover {
    color: white;
}

a {
    color: #3F51B5;
    text-decoration: none;
}

a:hover {
    color: #303F9F;
}

.note {
    color: rgba( 0, 0, 0, 0.87); 
    padding: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba( 0, 0, 0, 0.12);
}

.note-title {
    margin:0;
    font-weight: normal;
    color: #303F9F;
}

.note-date {
    font-style: italic;
    color: rgba( 0, 0, 0, 0.54);
}

.note-tags {
    float: right;
    color: rgba( 0, 0, 0, 0.54);
}

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

blockquote p {
    display: inline;
}

blockquote footer:before{
    content: '\2014 \00A0';
}

b {
    color: #ff6e40;
}

You should end up with something looking like this:

Notebook Style Screenshot

Pretty cool, right? :sunglasses:

Now, the last step is to style the notebook list. I put the following in the header:

* {
    font-family: "Open Sans";
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff; 
}

header {
    background-color: #3F51B5;
    color: white;
    padding: 50px 40px 50px 40px;
}

#list {
    line-height: 200%;
    list-style-type: none;
    font-size: 20px;
}

a {
    color: #3F51B5;
    text-decoration: none;
}

a:hover {
    color: #303F9F;
}

b {
    color: #ff6e40;
}

And that concludes the basic notes system.

Extras

List of Notes

To make a list of the notes in a notebook, I put the following under the notebook title:

<ul id="list"></ul>

Then, I created a rudimentary js script to insert the notes into the list using JQuery:

$(document).ready( function() {
    var notes = $('.note');
    notes.each(function(index) {
        $(this).attr('id','note-'+index);
        var date = $(this).children('.note-date').text();
        var title = $(this).children('.note-title').text();
        $('#list').append('<li><a href="#note-'+index+'">'+title+' - <i>'+date+'</i></a></li>');
    });
});

Finally, I styled the list by adding the following into the main style-sheet:

#list {
    line-height: 200%;
    list-style-type: none;
}

Code Highlighting

To get code highlighting in my notes, I used Highlight.js. I downloaded it and placed it in the main Assets folder. Then, I added the following to all of the notebooks:

<link rel="stylesheet" href="../Assets/highlight/styles/default.css">
<script src="../Assets/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

When I want to highlight some code, I simply use <pre><code>Place code here...</code></pre>. Highlight.js takes care of the rest! :smile:

Math (LaTeX)

This was probably the hardest thing to find out how to do. I wanted something that would convert math expressions client side while relying only on the browser. Obviously, you always have the choice to use MathML, but that is cumbersome and love to use LaTeX math. I ended up finding a project by Mozilla called TeXZilla, which converts LaTeX math to MathML. Unfortunately, this won’t work on every browser. :cry:

To use TeXZilla, you must download it and include the script by using:

<script src="../Assets/TeXZilla-0.9.9/TeXZilla-min.js"></script>

Then, to make it auto convert, you must use the x-tex Custom Element. This is included using the following:

<script src="../Assets/TeXZilla-0.9.9/customElement.js"></script>

Then you can put something like the following:

<x-tex display="block">\int_{0}^{1} \frac{1}{1 + x^2} d x = \int_{0}^{1} \frac{1}{\tan'(\arctan(x))} d x = \left[ \arctan(x) \right]_0^1 = \frac{\pi}{4} </x-tex>

And it will convert it to MathML.

Note: In Firefox, you will need to enable the dom.webcomponents.enable option.

Conclusion

There are many more things you can do with this note system and I have only scratched the surface. Hopefully I have inspired you to take this further and discover more ways to improve upon this concept.