Online Slugifier

This is an online tool to create slugs. Slugs are human readable URLs generated from a string, that comply with URL standards.

The challenge

Slugs are Human readable URLs created from a string. They normally identify a resource, while keeping it fairly readable for normal people.
Used normally in GET requests, they are very good for SEO, has they increase the chances of a higher score on page indexing on most search engines.

As part of my work, I sometimes need to create URLs that allow easy readability. I normally use it to create branches on GitHub.

So I decided to build a simple tool that would allow me to generate a slug and made it available online, so I could access it everywhere.

The Solution

A simple javascript tool that will convert the string, making it all lower case, replacing all the spaces by “-” except the start and end ones, and replacing any special characters.
You can find a live demo by clicking on the button bellow

The implementation

You can use the tool by simply adding it to your page, or to your project using CommonJS or AMD module definition.
You use it by simply creating a new instance of Slugifier and optionally passing an object literal with a set of configs. The tool allows for a few options such as:

separator: Defines a different separator (other than “-“);
lowercase: (boolean) Determines if all chars are to be lowercased. Defaults to yes;
truncate: (Number) Truncates the slug at nth char. Sending 0 or NaN will not truncate. Defaults to 0;
symbols: (boolean) Determines if symbols are to be converted. Defaults to yes;

// simplest implementation
var slugifier = new Slugifier();
console.log(slugifier.slug('Some Random String'));
// Output: some-random-string

// Using configs
var slugifier_Max10 = new Slugifier({ separator: "_", truncate: 10 });
console.log(slugifier_Max10.slug('Some Random String'));
// Output: some_rando

You can take a look at the code on my GitHub page.

Responsive Blogger Gallery Helper

After finding a nice article online that would help me create a responsive blogger gallery, I got tired of the boring part of manually wrapping the images into the appropriate div/spans elements and decided to automate it by creating a js tool.

The challenge

These past days I was uploading my blog with some of the photos I took and wanted to display them in a responsive way. I looked for any responsive gallery plugin for blogger, but couldn’t find any. I stumbled upon this website that proposed a CSS approach. Being purely CSS I felt it would be very light, and had a further read. The article in question is the following:

How to Create a Responsive Blogger Image Gallery

The downside of this approach, apart from the extensive reading I had to do (yes I know, I am a bit lazy), was the fact that I had to do several steps in order to have it working:

  1. Add the CSS into the page
  2. Upload the images
  3. Wrap the images in a set of divs with custom classes
  4. “rinse and repeat” until all images were done

As I said before, I am a bit lazy, and that all process started being a bit time consuming. As any decent developer, as things start to get repetitive you should find a way to automate them… So that is what I did.

The solution

I created a small tool that allows you to drop the images HTML and renders a completed rework on all the elements to make it compliant to the expected result.
You can find it here by clicking on the button bellow and I invite you to try it. Be sure to read the original post from Georgia Lou Studios, though, so you can have a better understanding of what is the expected result.

The implementation

The implementation was simply to have a javascript HTML parser, that could be invoked by just providing a selector of the input element we wanted to extract the images to convert.

The tool has a single method that will perform the conversion of the images called convert, and it optionally accepts 2 parameters, that will determine if you want to add placeholders for the Alt tag and an H3 tag for the title.

// You can either use HP or HtmlParser
var result = HP('#input').convert(true, true);

If you want to take a look at all of the (mini) project, have a pick at my GitHub page