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

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

by zertosh • 12 years ago

67 34 12 years ago

ape4• 12 years ago

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.

slg2• 12 years ago

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.

zertosh4• 12 years ago

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.

slg2• 12 years ago

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.

shawabawa3• 12 years ago

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

zertosh4• 12 years ago

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_long• 12 years ago

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

cynwoody• 12 years ago

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

prezjordan• 12 years ago

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"

zellyn• 12 years ago

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

anorwell• 12 years ago

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

angersock• 12 years ago

Wow, it's like an EnterpriseBridgeAdaptor for JavaScript!

michaelmior• 12 years ago

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.

lanna• 12 years ago

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

thatthatis• 12 years ago

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?

crazygringo• 12 years ago

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

zertosh4• 12 years ago

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.

jaredsohn• 12 years ago

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?

chrishenn• 12 years ago

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.

spoiler• 12 years ago

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

camus2• 12 years ago

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.

ajanuary• 12 years ago

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.

marquis2• 12 years ago

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.

catshirt• 12 years ago

source maps seem more suitable for the job

joshuacc2• 12 years ago

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

marquis2• 12 years ago

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

yahelc• 12 years ago

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

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

zertosh4• 12 years ago

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

ryanpetrich• 12 years ago

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

allochthon• 12 years ago

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

CmonDev• 12 years ago

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

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

Related Stories