In the last post, I started work on the factory for the project and created the methods for managing default values. Since the last post, I have worked on it a bit more changing the name of the factory to just Notific8 and adding methods to deal with checking for the notification container that the notification will be displayed within.

This post is another post that will be strictly for planning. There will be some HTML snippets but they won’t be inserted into the new version of the code yet.

Starting from Scratch

I want to start writing the HTML template from scratch to get a better understanding of what I want to encompass in the project. In addition to the notification wrapper, I know that I will need to have the following in a notification with all options set to display the full set of combinations:

A message

A title

An image (will be moved from an external module to the code base for the rewrite)

A close button with text for sticky notifications

A close button for non-sticky notifications

There are a few things crossed out above. I’ve thought it over and it’s odd to have two different close experiences in the notifications depending on whether or not it’s a sticky notification. A manual notification close experience (the user clicking the close button) should be consistent regardless of whether or not it’s sticky. If a developer decides that they want to add some text later, it’s pretty easy to add with CSS using ::before / ::after and content in a custom stylesheet.

An extremely basic pseudocode example would be:

Future Planning Even Further

Anyone who has been doing front-end web development for the past 3–5 years at a minimum has at some point come across the concept of web components. The W3C has been working on a spec for years for developers to create custom tags. Libraries like Polymer have arisen to make them usable now. Even the Angular team is working on the Angular Elements Project to enable creating custom components in Angular that can be exported for use with any library and be compatible with web component standards.

One of my curiosities lately has been whether or not it’s worth creating a custom tag for the notifications. It wouldn’t be a true web component right now but just a semantic tag to describe the notification. The thought behind that is down the road, this project could potentially be converted to be a web components.

I still need to test it out in Edge, but in Chrome, Safari, and Firefox, it was a matter of appending the element to the body and styling it, ensuring to set its display property accordingly. But just because I can do it, should I? I’m rather conflicted on that because I quite like the ability to have semantic tags in HTML and I make use of the new ones provided in HTML5 a lot to avoid <div> soup.

An example of the optimal HTML I envision:

Where to Go From Here

The next steps for me are to remove the sticky notification close message option and add the image options (path and alt text). Once that is done, it’s starting on the notification class itself including the template. By that point, I’ll decide whether I want to use a custom tag or something more appropriate like an <article> tag. If there are any thoughts one way or the other, please leave a comment.

Follow Along!

Firstly, thanks for following along with this blog series! If you want to track the progress of the project, the code is hosted on GitHub at https://github.com/willsteinmetz/notific8 I’ll be working from the ts-2018 branch and post the relevant commit hash(es) at the end of every post that introduces code changes including commits between posts.