Show HN: Beautify-with-words unminifies JS with unique words for variable names | Hacker News Reader

Show HN: Beautify-with-words unminifies JS with unique words for variable names

github.com

67 pointszertosh34 comments

While it's a good idea, I feel like it should rename with real words, or not rename at all. From the example:

  function(bedad, latay, vublu) {
            if (!adag(this, "on", bedad, [ latay, vublu ]) || !latay) return this;
            this._events || (this._events = {});
            var cyem = this._events[bedad] || (this._events[bedad] = []);

bedad, latay and vublu don't make it much easier to remember which variable is which than just using a,b,c

I'm the author. Since "a", "b", "c" get recycled by different scopes, it makes it really hard to figure out which "a" you're looking that. By having unique names, you can easily spot where one variable is used exclusively. I was going to use a dictionary but I didn't want the tool to be language specific or run into unsavory words.

>> I didn't want the tool to be language specific or run into unsavory words

Good thoughts. However, "beedip" is foreign to everyone, whereas if you pick a language, it's at least native to some people.

Also, you could have maybe 50 known inoffensive words; there probably aren't more than that many unique variables in a scope. Things like "hat" and "bread".

Why don't you prefix variables based on their usage in the code?

function(a,b,c) -> function(arg1_cat, arg2_tree, arg3_carrot)

for(i=0; i< 10; i++) -> for(counter1=0; counter1 < 10; counter1++)

var a -> var global_pants;

You could do this reasonably well with regular expressions/find+replace.

To be more sophisticated you would use a a tokenizer/parser and rename based on the identifiers location in the AST nodes. I did something similar a few years ago for a commercial product that included a JavaScript beautifier and our customers loved it.

Or perhaps a consistent "namespace", e.g. with a standard prefix prepended to a simple noun.

You could use first names as your dictionary. The US Census Bureau has lists† (in the form of frequency tables) of male and female given names.

†http://www.census.gov/genealogy/www/data/1990surnames/names_...

I'm going to have to disagree. Fake words are still better than single letters. It's much easier to scan for "vublu" in a segment of code than it is to scan for "v"

The problem with a,b,c is that the minifiers aggressively re-use the same identifiers when scoping rules allow them to.

I forked the original to address this [1]. Here's a sample:

    var strategy = moduleInterfaceFactory.Events = {
        on: function(strategyFacade, strategyFactoryDecorator, interfaceFacade) {
            if (!flyweight(this, "on", strategyFacade, [ strategyFactoryDecorator, interfaceFacade ]) || !strategyFactoryDecorator) return this;
            this._events || (this._events = {});
            var strategyPattern = this._events[strategyFacade] || (this._events[strategyFacade] = []);
            strategyPattern.push({
                callback: strategyFactoryDecorator,
                context: interfaceFacade,
                ctx: interfaceFacade || this
            });
            return this;
        }

[1] https://github.com/ANorwell/beautify-with-words

Wow, it's like an EnterpriseBridgeAdaptor for JavaScript!

While I find this humorous (which I assume was the goal), I think using common development terminology could be worse than complete jibberish since you start to apply irrelevant meaning when reading the beautified code.

It is a lot easier once you've figured out what a particular variable stands for to do a global search and replace for "vublu" than "a".

That actually makes sense, it is more "grepable" even if it is less easy to reason about. I find it a lot easier to reason about "a" because my brain doesn't try to reason by association -- what could vublu mean, why would they name it vublu?

I really like the idea behind this. Anyone have any experience using something similar?

My specific question would be whether using longer gibberish variable names is any more helpful than using short names. I don't know if 'quinis' is better than 'h' or 'tenmiey' is better than 'a'? I guess at the very least it should provide a much easier find and replace once you figure out what the variable should actually be named.

I'm the author. Search-and-replace is the main problem this solves. Another neat effect is that if you use something like Sublime Text, you can highlight a word (variable), and see all the occurrences. Makes it much easier to figure out what unminifed code is doing without all the collisions from "h" for example.

Makes sense. I would add that tip to the readme. I don't think it will be immediately obvious to people, so bringing attention to the ability to find and replace will make the renaming a more attractive feature.

In some cases it should be able to figure out a good name for the variables. eg (var hello = 0; hello < 10; hello++) {} hello would be better named i.

Feature suggestion: An optional variable prefix/suffix to make them stand out, making it easier to replace variable names as you read through the code and see what you've chosen and what was auto-generated.

Alternatively, an option to pass in a partial mapping for variable names you've already figured out.

Very cool. Nice work.

I think it would be even cooler as a Firefox extension -- open up a .min.js file in one tab, hit your button, and get a new tab with the beautified js. I don't know anything about FF extensions, but since this is written in JS in the first place, it seems doable.

(Or alternatively, it would also be cool as a standalone site, just paste the URL or uglified JavaScript in a box, and get the pretty version.)

I'm the author. I've made extensions for Chrome before (https://github.com/zertosh/jquery-audit) and I don't think I can incorporate this in a nice way. I'll look into FF. As for a standalone site, I really dig that idea - stay tuned. I'm also learning more about the Uglify internals to submit this as a patch.

I think the way to go would be to create a standalone site and then have a bookmarklet that opens the existing page on that site.

Edit: If you want to use your own bookmarklet, feel free to start off with this: void(open("http://beautifywithwords.com?url=" + location,'_self',''))

Edit2: http://jsbeautifier.org/ has some similarities to this (and integrates with various browsers, editors, etc.) but I don't think it replaces variable names. Perhaps it would make sense to integrate your code into it as an extra feature?

I've always wondered what coding is like for those who don't speak english, or only speak a little. I imagine it's something like working with code beatified by this tool.

Almost every codebase is filled with english verbs and nouns. They are one of the primary tools for making source code readable by humans, not just machines.

Very cool tool.

I'm not a native English speaker, and I've actually started programming way before I've become fluent in English.

It wasn't that difficult. I remember not knowing how things would translate to my own language, but from the code, I'd know what they meant.

Now that I think back, my first steps in English were probably made in programming and cartoons; before my mum realised I enjoy languages and signed me up for advanced lessons.

So, it's nothing weird. I'd like to think programmers have a higher-than-average IQ, which makes understanding and learning easier. Maybe I'm just biased! :-)

Basic stuffs are not that difficult, i mean function/for/while/var ... is easy to understand wherever one comes from.

The biggest benefit of being an english native speaker is that most resources on the web are in English(docs,articles,videos). And since being a developper is about learning new things all the time, it's easier to learn about new technologies or tools when one can read english articles or documentations.

My english (writing and speaking) is horrible but i force myself to read english docs on a regular basis,because it's just mandatory today.

Wow, this is amazing. Wanted something like this for so long. Forked to support passing in a list of pre-canned words to use: https://github.com/rpetrich/beautify-with-words

Neat. More useful for projects without unminified sources, like Google Analytics.

Here's the output for ga.js: https://gist.github.com/yahelc/00299f2e4a3c07cafa1a

You read my mind. That was one of the sources I was going through that motived me to make this.

Often with AngularJS, after minification, you find you've not properly injected a service or something and looking for a missing 'a' is near impossible. This would be really useful to hunting that down. Would make a great post-min debug Grunt module.

source maps seem more suitable for the job

You might find ngmin[1] helpful for that. Then you can use the shorter injection syntax and have it expanded via a compilation step. Since you mentioned Grunt, you'd probably want to just use grunt-ngmin[2].

[1] https://github.com/btford/ngmin

[2] https://github.com/btford/grunt-ngmin

How I never found that.. thanks! That is going to save us a world of pain in debugging.

Glad to help!

All JS on the web is open-source even if you don't want this :).

The variable names remind me of the names in an early RPG video game.

Reply on news.ycombinator.com