Despite my fictional fondness for labeling blog posts as part of a series when they aren't part of a series, this blog post does indeed have a part 1, part 2, and part 3. I consider myself a failure as a developer because I did not start this series with a part 0. You may never know what sort of content was at that initial index in my brain, but I am not going to go back and add it now. That would be silly. Regardless, I would check out those 3 previous posts before continuing or you may be quite lost.

Welcome to Building a Website with Node and a Bunch of Other Stuff, Part 4. I am not certain there will be a part 5 to this, but I don't want to discount it just yet. If you've been following along then you're aware that we've been building a quirky blogging platform called Steaming, after the adjective that describes what type of pile of crap it will be.

One of the core features behind Steaming is the idea that posts will be written without the ability to edit them. I haven't yet implemented this feature yet, and so I will do so in this post. Additionally Steaming is quite ugly at this point, which is fitting, but is easily fixed with some Bootstrap.

Catching Up

TL;DR the previous posts and still want to play along here is what you need to do:

Install Node.js, MongoDB, and Visual Studio Code
Run MongoDB, i.e. mongod.exe
Clone the Part 2 repo, i.e. git clone https://github.com/srakowski/steaming-pt3
Change directories to the cloned repo, i.e. cd steaming-pt3
Install dependencies, i.e. npm install
Open folder in Visual Studio Code
Press F5 in VSCode to run it
Navigate to http://localhost:3000

You should now start exactly where I am starting with this tutorial. Rejoice!

Corrections

From the previous post I've learned a few things and would like to make some corrections before we continue.

First, I've decided that using a contenteditable for the texteditor was stupid. You can make it work, but because browsers don't all have the plaintext option it is not worth the hassle. The only benefit is if you want to provide rich editing capabilities. We do not, or will achieve it through another means like markdown. So I've removed the content editable and went back to a textarea. In create.jade delete the following:

 div#editor(contenteditable="true", style="width: 100%; min-height: 400px; border: 1px solid #AAA;")

 textarea#content(style="display: none;", name="content")

and change it to this:

textarea#editor(name="content", style="width: 100%; min-height: 400px;", wrap="soft", spellcheck="false")

also remove this bit of JavaScript:

function formContent() {

    document.getElementById("content").value = document.getElementById("editor").innerHTML; 

    return true;

}

When we view the steamers created we're going to want white space to be treated as such. This could be achieved with the pre tags, but writing some CSS to tell the browser not to mess with the content works too. In index.jade you'll want to delete this:

p=steamer.content.substring(0, 597) + "..."

and replace it with this:

p(style="white-space: pre;")=steamer.content.substring(0, 597) + "..."

Add the same style to the paragraph in steamer.jade.

No You Can't Edit That!

The key feature that will set Steaming apart from all other blogging software is the inability to modify the content you create. There are a fair number of ways editing can be done, and so we'll need to make some sweet JavaScript to capture and kill as much editing capabilities as possible. This of course doesn't stop the neighborhood arse-hat from side stepping the spirit of Steaming and messing with the JavaScript so they may edit content, but I'll leave it up to the large community Steaming will attract to police this.

One of the main things you need to do to prevent editing is kill off the ability to delete anything. This means we'll need to disable backspace, delete, insert, cut, copy, select and overwrite, and pretty much everything else. I am sure I missed something but here is rough cut at preventing most kinds of editing:

I added this to the script section of create.jade. The only thing I haven't figured out yet is setting the mouse cursor in a position to add characters. I am sure there is an easy fix to this, but I don't feel like researching it too long. Just don't edit. That's the point!

A little breakdown of that code above. Adding a keydown event handler allows us to intercept any attempts at delete, backspace, or flipping to overwrite via insert. I also remove and cut/copy/paste keyboard shortcuts in the same way.

There are ways to make some elements prevent user-select, but this doesn't seem to play nicely with some browsers. So instead of preventing selection I just clear the selection if one exists on keydown. This prevents overwriting pretty well.

Dragging and dropping content allows the user to plug-in whatever they want. Cancelling the ondrop event kills that ability.

Finally, that nasty select + context menu gives a number of options to edit, so I shut that crap down hardcore by intercepting the oncontextmenu and falsing that hoser.

Yay! This is a great start to one of the key features of Steaming. I tested it a bit in Chrome. It stops most editing. Again, this doesn't prevent idiots from cheating the system, but you can't help stupid.

Things Need To Be Pretty

When I work on projects I tend to get consumed by how things look and feel instead of getting the functionality working. This would be okay if I had a sense of design and knew how to make things work right off the bat, but unfortunately it is a skill I haven't quite leveled up on. Since I started this series with no real idea of what I was going to do I have escaped that problem until now. That being said, I'm cutting this tutorial short overall because I spent way too long playing around with aesthetics... Anyways, let's make Steaming a bit nicer to look at, shall we?

Boostrappin'

Luckily in the world of websites the ancients decided to give to humanity a thing called Bootstrap. If you've spent a week in the web space I am sure you're already more than aware of Bootstrap. Using it provides you with a ton of tools and styles to give you pretty, responsive, mobile-first websites. Luckily it is available via a CDN do you don't need to install anything.

Open up layout.jade and add make it so...

Note you may want to update the versions to match whatever better version of Bootstrap is out by the time you read this. You'll probably need to ignore whatever else I write here, but I am sure you will manage. JQuery is needed by some of the Bootstrap components... so you get that now too.

Using the layout above Steaming should automatically have a bit of a better feel to it. The content will be centered in the browser and t he fonts will probably look a bit nicer, but let's continue modifying things to make the site even better.

Low Go! (er... Logo) and Stylin'

A wonderful website like this needs a fashionable logo to go with it. I could throw a job up on Fiverr and see what I get (seriously check out that site if you want cheap logos or ideas for logos), or I can whip out some Google Fonts and Inkscape and make my own. Since this is a steaming heap I'll go with the latter.

Google Fonts provides you with a wide assortment of free, but licensed, fonts you can use for websites or design work. I picked Grand Hotel for Steaming, as I am fond of this font and have used it in other projects.

Inkscape is a free and open source vector graphics editing software. It has a lot of power if you learn to use it correctly. I've used it for graphics works on some of my Ludum Dare games. Take a look at the site 2D Game Art For Programmers. This person has the mother lode of awesome and accessible tutorials on creating game art in Inkscape. The skills you learn there do transfer over into other domains (like creating steaming crappy websites).

A little work last night produced the beautiful logo you see here:

I believe the tagline to be very fitting. Steaming is a blogging platform that defies quality. You are encouraged not to write quality posts. Just let it steam!

Create an images folder in your project and add the Steaming logo above to it... or feel free to make and contribute your own. I am okay with that. We're going to want to modify our layout to include this awesome logo. Open layout.jade and make it look this now:

Note that I moved sign in / sign up / sign out buttons from index.jade to the layout. It makes sense because we'll most likely want to access these buttons from most pages. Index.jade needs to be updated so that the

You're also going to want to modify the style.css file a bit. There was some padding and anchor coloring that came with the standard Express templates. We're going to want to clean that up a bit. Modify style.css to look like this:

Success?

You should now have a cleaner looking Steaming website that looks something like this:

I've updated the other forms to look nicer but I didn't see the point in loading this blog post up with Gists to make it look longer. Instead, head over to GitHub and get the code. You can get the code for this part of the tutorial here: https://github.com/srakowski/steaming-pt4

Next Time

Arrggh! It was my intention to finish up with this series with this post, but I spent way too long playing around with look and feel stuff. That being said, we need to firm up Steaming... add some validation and fix some potential problems. I also need to figure out how to get the final website deployed so I can point the domain steaming.rocks at it. If you'd like to petition me to stop making a fool of myself I'll hear you out...

Thanks for reading!