

Show HN: Beautify-with-words unminifies JS with unique words for variable names - zertosh
https://github.com/zertosh/beautify-with-words

======
shawabawa3
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

~~~
anorwell
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](https://github.com/ANorwell/beautify-with-words)

~~~
michaelmior
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.

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

~~~
zertosh
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.

~~~
slg
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.

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

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

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

~~~
jaredsohn
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="](http://beautifywithwords.com?url=")
\+ location,'_self',''))

Edit2: [http://jsbeautifier.org/](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
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
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! :-)

------
ryanpetrich
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](https://github.com/rpetrich/beautify-with-words)

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

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

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

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

~~~
joshuacc
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](https://github.com/btford/ngmin)

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

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

~~~
joshuacc
Glad to help!

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

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

