Show HN: Beautify-with-words unminifies JS with unique words for variable names(github.com)

67 pointsby zertosh12 anni fa34 comments

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

https://github.com/zertosh/beautify-with-words

34 comments

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

yahelc12 anni fa

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

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

zertosh12 anni fa

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

marquis12 anni fa

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.

joshuacc12 anni fa

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

marquis12 anni fa

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

joshuacc12 anni fa

Glad to help!

catshirt12 anni fa

source maps seem more suitable for the job

CmonDev12 anni fa

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

allochthon12 anni fa

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

ape412 anni fa

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.

slg12 anni fa

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.

zertosh12 anni fa

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.

slg12 anni fa

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.

shawabawa312 anni fa

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

anorwell12 anni fa

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

michaelmior12 anni fa

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.

angersock12 anni fa

Wow, it's like an EnterpriseBridgeAdaptor for JavaScript!

zertosh12 anni fa

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.

nathan_long12 anni fa

>> 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".

billyhoffman12 anni fa

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.

joshklein12 anni fa

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

cynwoody12 anni fa

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_...

prezjordan12 anni fa

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"

zellyn12 anni fa

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

lanna12 anni fa

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".

thatthatis12 anni fa

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?

crazygringo12 anni fa

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.)

jaredsohn12 anni fa

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?

zertosh12 anni fa

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.

chrishenn12 anni fa

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.

spoiler12 anni fa

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! :-)

camus212 anni fa

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.

ajanuary12 anni fa

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.