Make your own tagging system from scratch | Hacker News Reader

Make your own tagging system from scratch

kequc.com

77 pointsKequc14 comments

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.

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.

Yes I agree. Using native javascript for specific tasks such as this is probably a good idea in terms of minimising the size of your assets and maximising performance. It can be especially satisfying for the programmer as well.

I do understand the need/popularity of libraries like jQuery however; In development teams there aren't always dedicated people for 'just' the back-end or 'just' the front-end. Most people do both in varying levels of competency, a library like jQuery makes it a lot easier for people less at home in the front-end to create things. 'Easiers' because of the cross-browser compatibility, consistency and the fast amount of online resources. So I do get it, while it is still not that hard to pick up some new things.

If you are in the front-end a lot/only then sticking to gigantic frameworks without using more modern javascript is just a shame, because it can bring you great benefit.

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 ?

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;
    }

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)

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();
    }

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.

'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

(in TypeScript)

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.

Or you can use the decorator pattern https://en.wikipedia.org/wiki/Decorator_pattern

As an alternative to...?

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

Reply on news.ycombinator.com