On Slugs and How to Generate Them Quickly

Introduction

I’ve been developing a blog feature for one of my customers this week. A blog is naturally a simple list of posts displayed in a chronological order. Each post will probably consist of properties such as a title, the author’s name, content, and maybe a date.

I think the date is an important one because whenever I judge articles trustworthiness and relevance on the net I always look at how recent the article is. We all know how quickly things become obsolete in tech.

All of this sounds straightforward and it is. But us developers are not about that easy life. We always look for ways to make our lives harder. In theory you could invoke a blog post from the URL by its unique ID pretty easily and be done with it.

The URL would look something like this.

39610 is the unique id of your wonderful, ground breaking article that will wow the elites. That would be easy. But in comes the slug. I personally don’t like that name very much. WordPress calls them permalinks. So you pick whatever names suits you better. Back to business. Here comes the slug!

Isn’t this URL just so much more pleasant on the eye? I think so. But it has other benefits too.

The main reason you would want to use a slug is SEO. Google will reward you for descriptive information about your content in your URL.

I hope you are convinced that your blog needs a slug and this tutorial will show you how to generate slugs on your website using jQuery rather quickly.

Here’s the end result:

* Notice how certain symbols get converted to text and others get ignored. Nifty!

The Nitty Gritty

First of all, the requirements:

• jQuery
• jquery-slugify package

Both can be obtained pretty easily using npm.

npm i jquery

npm i jquery-slugify

When you install jquery-slugify it will also install the speakingurl package, as it’s dependant on it.

Then make sure to import them in your HTML file.

<script src="speakingurl.min.js"></script>
<script src="slugify.min.js"></script>

For the sake of this tutorial I have created a super simple form consisting of two text inputs.

<input id="title" type="text" style="width: 600px"/>
<br>
<input id="slug" type="text" style="width: 600px"/>

The important parts are the IDs. The input with id=‘title’ is the one user will type their article title into. The latter one is the one the slug will be generated into.

And time to discover the magic code that does it all in three lines.

<script>
    jQuery(function ($) {
        $("#slug").slugify("#title", {
            separator: '-' // If you want to change separator from hyphen (-) to underscore (_).
        });
    });
</script>

And you're done! Congrats.

Conclusion

Blogs are very popular these days and can do wonders for your customers SEO. If you’re not going to use WordPress and instead, implement your own solution, make sure that your links are SEO friendly. And as you know now, slugs are a nice and quick way of achieving that.

And if you are too lazy in this holiday season and don't feel like typing all of the 7 lines I've shown you above. I have created a small repo with a working example which you can simply pull and copy into your own project. Enjoy.

https://github.com/madrzak/example-slug