Unless it's your first time here, you've probably noticed NTN has a new look and feel. A few weeks ago I decided to take some of my lessons learned from NTNv1 and rewrite a large part of the backend and all of the front end. I had several reasons for wanting to do this. NTNv1 was built around NTN Tools and NTN Notes was added after NTN Tools was finished. This pivot resulted in a few design decisions that I wasn't really happy about and a cluttered UI.

So, what all has changed?

Backend

When I say a large part of the backend was rewritten, I actually mean everything except NTN Tools was scraped. A tools rewrite is on the road-map, but NTNv1 was frustrating to use as a blogging platform so the blogging part of the backend really needed to be rewritten in order for me to be happy with it again.

A Change of Focus

NTN Notes is now the central part of NTN and NTN Tools has been relegated to act more like a plugin. This is outwardly apparent when you go to neverthenetwork.com. NTNv1 had a landing page that showed the four most recent articles and a list of all the tools. The lack of a landing page isn't just a UI change, it's a projection of how NTNv2 actually works on the backend. It's now a blogging platform first and a set of tools second.

Markdown Renderer

When I originally decided that I was going to add a blog to NTN, I had planned on using something like wordpress or ghost, but had issues with how both of the platforms worked. Neither of them really jived with my vision for NTN Tools and it was going to take me longer to figure out how to get NTN Tools to work with either than it would for me to build my own blogging back-end. The second issue was that I really don't like writing in my browser. I'd rather work with raw markdown files in a text editor.

NTNv1 used Flask-FlatPages to render markdown to HTML. It worked ok, but I did have occasional formatting inconsistencies that didn't show up when I rendered locally using pandoc. Since I was already using pandoc to render locally, I decided to use pypandoc for NTNv2, along with a custom notes class and beautiful soup to do a little bit of post processing on the rendered HTML. So far, I've been very pleased with the combination.

NTN-Notes as a Platform?

In this iteration of NTN, I've been doing a lot of work to remove couplings between content and code. The blogging content is fully separated and most of the site configuration takes place in config.py. However, I did a few hacky things to get NTN Tools to work as a flask blueprint. Despite this, it would take minimal effort to use NTN's code to make a completely different blog. One of my goals is to complete this split by the end of 2020 and to release the backend as a new open source blogging platform.

As with NTNv1, the source code for NTNv2 is available on github. I haven't really taken the time to make the codebase contributor friendly yet, but it is out there.

Design

I've done a lot of thinking about what a technical blog should look like. I received some really great feedback a few months ago about how it was strange that my site's navbar changes between the Notes and the Tools sections of the site. I've also always felt that the way I handled post tags in NTNv1 was far from elegant and really limiting. Finally, I was never really in love with the overall look and feel of the site. Weighing all these factors, I felt like it was best to start the design from scratch.

Simplicity

The web has become very bloated over the years. I think that's a product of all the cool things we are doing with web technologies. It's tempting to stack multiple frameworks and to pull libraries down from all over the web to build a really flashy website, but the websites I actually enjoy interacting with, tend to be the most simple. hackernews is a fantastic example of this.

That's not to say that we should all switch back to vanilla HTMLv2. I think it's all about striking the right balance. NTNv2 takes advantage of modern CSS features such as variables and media queries so the site is responsive and pays attention to your preferred color scheme. NTN Tools acts like a single page web app¹, but it only relies on javascript and a bit of jQuery. NTNv2 isn't flashy at all, but it's a technical blog, so it shouldn't be.

Legibility

When I was selecting the colors NTNv2, I knew I wanted to dial back the contrast a bit so the page was easier on your eyes, but not so much that the site wasn't readable. I stumbled upon a firefox extension called Tota11y that performs web accessibility testing. One of it's features is checking the page for sufficient contrast. Had I not found Tota11y, I would've shipped with a slightly less dark background for night-mode and a slightly less dark font color for day-mode. At a glance the contrast seemed fine, but it's probable many users would've had issues reading some of my longer articles.

NTNv1 articles had a width of 70% of the viewport size². My thought was that in order to reduce the amount of scrolling, text should take up as much width as possible while still retaining some sort of margin. After re-reading many of my published articles, I found that 70% of the width can actually be pretty fatiguing. 70% was a problem at 1080p, but it gets worse on higher resolution displays. On NTNv2 I settled on a width of 800px³. 800px is slightly wider than the output produced by reader view in firefox, but I think 800px looks a little better on websites and is just as readable.

NTN Tools

At this point I've done the minium to get NTN Tools to integrate with the new look, but there is still a lot to be done. I don't hate how NTN Tools looks on desktop, but right now it really doesn't look great on mobile. This probably won't change until I start working on the NTN Tools backend re-write. For now it works, but I'm ready to start blogging again so I've placed tools on the back burner for now.

Looking Forward

I'm coming off a 7 month hiatus from working on NTN and am excited to be back. I decided to take a little break when I started my new job, but I've honestly missed blogging. I've started working on an in depth series about writing Python extensions in C, but I'll probably drop a few shorter articles before it's finished⁴. In addition to blogging, I've got plenty of new tools I'd like to write and planned enhancements to the site. I think it's pretty safe to say you can expect a lot of new content over the next few months.

If you have any thoughts or comments about the redesign, please send me an email. I'd love to hear from you.