
Make your own tagging system from scratch - Kequc
http://www.kequc.com/2016/06/03/make-your-own-tagging-system-from-scratch
======
mosselman
The readability of the article is super nice. Feels very much like you are
taken along the explanation and code by the author. Very nice.

~~~
Kequc
Thank you I am the author. I find myself wanting to promote self determination
in the JavaScript world, it seems more often than any other ecosystem I've
involved myself in to be the one that depends heavily on external libraries
and dependencies.

I'd like to advocate for minimising this as JavaScript isn't so archaic as it
once was in it's past. By using ES6 or TypeScript, building fully customised
modules of one's own isn't the chore they're built up to be.

This tagging script took one full day of programming to finish, including the
first draft of the blog post about it. Since then I've done things like added
the `clearValue` function, rather than being explicit as to what I wanted to
happen in every case that it is used. At that point I thought I better post it
before I mess with it too much.

~~~
reacweb
Hello, I will try to use it very soon (next week). I need to tag embroideries
for my wife. Your system covers most of my needs. How difficult would it be to
have some groups of tags (for example, a bird tag would implicitely imply a
animal tag, or a alphabet_a tag would imply a alphabet tag) and have a
different color for tags belonging to these groups ?

~~~
Kequc
I would structure my suggestions like this. In the `_buildSuggestionElement`
method check the type, set a colour from some list you have, or set a class
and change the colour in your css.

    
    
        interface ISuggestion {
            name: string;
            count: number;
            element?: HTMLElement;
            type?: string;
        }

------
mynegation
One suggestion is to complete on TAB with the first or the only tag in the
completion list, so that the user does not have to reach for the mouse.
Ideally completion list should be sorted by usage frequency too, but that is
next level. For an example of how it's done properly, I can refer to the
pinboard.in bookmarking dialog (@idlewords, you rule)

~~~
Kequc
What I like is that all the code is laid bare. You could add a line or two
into the `_onKeyup` method which does this. These tags are sorted by
popularity.

    
    
        if (this.parts.suggestions && (e.which || e.charCode || e.keyCode) == 9) {
            let foo = this.parts.suggestions.children.item(0);
            if (foo) foo.click();
        }

~~~
justinlardinois
I'm a little confused; what's going on in the part of the main if condition
after the &&? It looks like the author intended to check if any of e.which,
e.charCode, or e.keyCode equal 9, but obviously that's not what would happen.

~~~
sago
'obviously'?

The code looks fine to me, c.f.:

    
    
        $ node
        > undefined || undefined || 4
        4
        > undefined || 9 || 4
        9
    

The || operator evaluates to the first of its two operands if it is truthy, or
its second operand otherwise

    
    
        > undefined || false
        false
        > false || undefined
        undefined
    

So:

    
    
        > e = {keyCode:9}
        > e.which || e.charCode || e.keyCode
        9

------
rhizome
(in TypeScript)

------
datashaman
Your concluding paragraph needs an addendum:

> It's refreshing to build systems like this yourself, as it puts the destiny
> of your product wholly into your own hands. Instead of falling at the mercy
> of the developer who made your plugin or extension.

It does however place you on a long path of rediscovering all of the things
which don't work (one bug at a time, in various browsers of varying ages)
which someone else may have done already.

------
partycoder
Or you can use the decorator pattern
[https://en.wikipedia.org/wiki/Decorator_pattern](https://en.wikipedia.org/wiki/Decorator_pattern)

~~~
justinlardinois
As an alternative to...?

------
meeper16
I'm working on a auto-tagging JSON API that might be helpful here.

