Petar Slovic
JSPolice Review & Contributions
Let's improve JS Open Source Projects.
Contribute!

SpoilerAlert

Petar Slovic Petar Slovic

Repo https://github.com/joshbuddy/spoiler-alert

SpoilerAlert is a nifty little JavaScript plugin for those who post spoilers on their websites. You don’t want to unintentionally read a spoiler to your favorite TV show’s last episode in an article - because how can you know that it’s a spoiler before you read it! Instead, authors of the website can use SpoilerAlert to mark spoilers in the text, and the plugin will blur them.

Then, when you mouseover the spoiler, it will partially un-blur. Now you can click on it - if you’re totally sure - to reveal the text.

SpoilerAlert in action

Contributions

We’ve created several pull requests, trying to contribute some of the things which we discuss here, and adding a few tiny features.

There are still some things that can be worked on - and I encourage you to take it on!

Code

Code is short and pretty well written. The whole plugin is just a function wrapped in an IIFE - Immediately Invoked Function Expression. It takes the element selector you passed in, finds the elements that match it, and applies blur to them.

Code Style

Code style is a bit inconsistent. There’s sometimes no space after an parentheses, like so ){. Or no space in between operators and operands, like so a+b. I think that small things like these amount to noticeable cognitive dissonance. And I don’t think it’s just a matter of whether or not you’ve got a case of that developer OCD. I find that it can decrease readability of the code and have a deteriorating effect on the communication between team members.

The cure is to use a tool like ESLint which offers a really good set of rules that not only help you write pretty and consistent code, but also helps you avoid some common syntactic and logical errors.

Browser Support

Although good, the browser support is lacking on some platforms, as a few issues tell us. One issue even asks if there should be a CSS-only fallback for those who have JavaScript disabled. But I don’t really think that we should concern ourselves with the JavaScript disabled issue, as the Web has become a very interactive place, and, in normal circumstances browsing it with JavaScript turned off doesn’t make much sense.

The plugin relies on CSS Filters for providing the blur effect.

.blur {
  filter: blur(4px);
}

The support is pretty good, as can be seen on caniuse. Still, there should be some kind of fallback provided. The other way of creating a blur effect on text is via text-shadow, which is supported by the browsers a bit better.

This still leaves blurring images unavailable on older browsers. But since the spoilers are mainly found in text, I think we can reasonably disregard this case.

Contributing

There is no CONTRIBUTING file to outline this, but there is a Makefile that does the minification of the source. And you need to run npm install before to get the uglify package which is used for that purpose.

GitHub

Overall, the GitHub page of the project is pretty well maintained.

What I find really amazing about this plugin is that, even though it has less than 100 lines of code, it has 9 contributors! And it seems that they were collaborating quite nicely on this project, and that’s what GitHub is all about!

README.md

A README file is present, and it’s not bad - it’s got a description, API and examples and a link to a demo. But there is space for improvement. I recently found a great npm package - CommonReadme - that tries to standardize README files in the NodeJS community by providing a well thought out template that anyone can use. It also takes as much info as possible from your package.json and inserts it into the generated template.

GitHub Issues

There are several issues open on GitHub. Some have responses and some don’t. There are also several closed issues and merged pull requests, which is great.

The issues aren’t labeled, and that’s okay for such a small project. But even a small project, when there’s a lot of people working on it, can benefit from using a labeling system. Here are a few good articles that tackle this problem and offer systematic solutions:

Tests

There are no tests. There is not much to test, as the plugin is very small, but it would be great to see some tests nonetheless.

Commits

Commits are pretty good too. You can see that they are atomic, which is great. But, there are some meaningless commit messages too, like “Much better cleanup” and “Lines”.

Full Checklist

GitHub Page / Docs:

Issues & Collaboration

Git

The Code