Live data from Hacker News

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

github.com

11–20 of 35 posts

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

#11
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.

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

#12
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.

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

#13

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

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

#14

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…

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.

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

#15
post #6

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

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

#16
post #6

Earlier quoted context omitted.

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 for(counter1=0; 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.

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

#17
post #6

Earlier quoted context omitted.

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

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

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

#18

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

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

#19
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.
Post reply on HN