Monday, December 28, 2015

Print angular module dependencies

Here is a simple function to print angular module dependencies:

    angular.__moduleDependencies__ = function (moduleName, indent, nonlast, seen) {
        var module, suffix;
        indent = indent || '';
        seen = seen || [];
        suffix = (indent === '' ? '' : (nonlast ? '├─ ' : '└─ '));
        if (seen.indexOf(moduleName) !== -1) {
            console.log(indent + suffix + moduleName + ' ^');
            return;
        }
        seen.push(moduleName);
        module = angular.module(moduleName);
        if (angular.isDefined(module)) {
            console.log(indent + suffix + moduleName);
            angular.forEach(module.requires, function(requiredModuleName, key){
                var requiredMod = angular.module(requiredModuleName);
                if (angular.isDefined(requiredMod)) {
                    
                    angular.__moduleDependencies__(requiredModuleName,
                        indent + '| ', key < (module.requires.length - 1), seen);
                } else {
                    console.error(indent + requiredModuleName);
                }
            });
        } else {
            console.error(indent + suffix + moduleName);
        }
    };

Usage

angular.__moduleDependencies__('todomvc')


Output

todomvc
 | ├─ ngRoute
 | | └─ ng
 | | | └─ ngLocale
 | └─ ngResource
 | | └─ ng ^

Sunday, December 27, 2015

Filed Eclipse enhancement

Many time I copy a file and the only difference is that I need to map a noun to another.e.g.

firstName -> lastName

getFirstName() -> getLastName()

FIRSTNAME -> LASTNAME

and even better:

FIRST_NAME -> LAST_NAME

FIRST-NAME -> LAST-NAME

This is supported by emacs to some extent. See below.

The Eclipse find/replace dialog should support this using a Case mapping chekbox option like this:

__ Options ____________________

[ ] Case sensitive

    [X] Case mapping

Some languages use camel case, some use hyphen or underscore. The dialog could take that into account.

Support Emacs style case matching replace behavior.

"
15.10.3 Replace Commands and Case
:
:
In addition, when the newstring argument is all or partly lower case, replacement commands try to preserve the case pattern of each occurrence. Thus, the command

M-x replace-string RET foo RET bar RET

replaces a lower case ‘foo’ with a lower case ‘bar’, an all-caps ‘FOO’ with ‘BAR’, and a capitalized ‘Foo’ with ‘Bar’. (These three alternatives—lower case, all caps, and capitalized, are the only ones that replace-string can distinguish.)

If upper-case letters are used in the replacement string, they remain upper case every time that text is inserted. If upper-case letters are used in the first argument, the second argument is always substituted exactly as given, with no case conversion. Likewise, if either case-replace or case-fold-search is set to nil, replacement is done without case conversion.
"

REF: http://www.gnu.org/software/emacs/manual/html_node/emacs/Replacement-and-Case.html#Replacement-and-Case

Sunday, December 13, 2015

TIP: Track window innerWidth using AngularJS

Here is a simple Plumkr to track the window innerWidth using AngularJS:

Try it

Tuesday, July 07, 2015

Eclipse Console Support for Frontend builds

If you use Eclipse of frontend development and use any of the front end tools such as ESLint or JSHint to do static analysis of your Java Script code, then Frontend Maven Plugin Console Support is the plugin for you.

This plugin parses the messages in Eclipse consoles (Process Console or Maven Console) and converts them to hyperlinks. It also adds warnings and error markers as applicable.


Install it using Help > Install New Software in your Eclipse IDE and specifying this update site:

http://cdn.rawgit.com/sandipchitale/frontend.maven.plugin.console.support/1.0.9/frontend.maven.plugin.console.support.updatesite/site.xml

I will soon add this to Eclipse Marketplace.

Enjoy!

Sunday, July 05, 2015

A simple Maven Event Spy

In the context of this blog entry I developed a simple Maven Event Spy. However it works by itself too.

Simply drop mavenbuildspy.jar into your Maven installation's lib/ext folder and run your Maven build and you will see something like:



Alternatively download it somewhere and invoke it on-demand in your Maven build with:

mvn -Dmaven.ext.class.path=path-to/mavenbuildspy.jar ....

Feedback welcome!

Tuesday, June 09, 2015

Selectively run Maven phases and goals from Eclipse IDE

CALL FOR ACTION: If you like this feature please vote up on 470138.


1129 installs from Eclipse Marketplace so far.



This kinda answers this SO question.

Recent updates:
  • Save named configurations
  • The dialog is now mode less, thus allowing multiple invocations. If there is are multiple Maven projects in the workspace, a selector to invoke Phases and Goals on selected other project is shown.
  • Run goals in selection order instead of build agenda order. Using this mode you can run goals in any order. An astute reader may note that you can also type goals in text area before running them. This allows you to even run goals not associated with any phase.
  • Selecting a phase selects the associated goals
  • Expand all Phases
  • Expand all/Collapse all
  • If there is only one Maven project in the workspace, that is always selected.
  • Added a simple Maven Build Spy. It shows the success or failure of the goals, the timing and the exception message as a tooltip for failed goals.


You can even use the spy in your maven builds by:
  • Downloading the Maven Build Spy jar.
  • And then passing the following parameter to your mvn build like so:
> mvn -Dmaven.ext.class.path=path-to/mavenbuildspy.jar ....

When you run a phase, Maven runs all the preceding phases as per the lifecycle definition. However, sometimes I only want to run a selective subset of phases. The only way to do that is to actually run the goals associated with those phases explicitly. However how to get that list of goals? One would think that running:

> mvn help:describe -Dcmd=deploy

would do the trick. But alas it does not. It only lists the statically associated goals as per the static lifecycle definition - and not the actual goals you may configured in the pom's plugin configuration section. IMO this is simply - unimplemented yet useful functionality of Maven.

In this blog entry I talked about listing phases and actual associated goals of a maven lifecycle of a maven pom. In it I talked about an Eclipse plugin based on m2e code. I have improved it further. Now you can show the phases and goals in a checked tree dialog using the Project > Phases and Goals command.

You can run the selected phases or goals using the Launch selected goals command. When a phase is selected all goals associated with that phase are run. In Single Selection Mode the goals simply get added to the set in the order in which they were selected. This allows execution of orders in any order you want.

Maven 3.3.1 or greater is required to run the goals.

NOTE: If you install external Maven 3.3.1+ and try to use it as the installed Maven using Window > Preferences > Maven > Installations you may see an error during the build:

-Dmaven.multiModuleProjectDirectory system property is not set...

To fix that configure the property in your JDK/JRE installation using Window > Preferences > Java > Installed JREs > select default JDK/JRE > edit.

- See more at: http://marketplace.eclipse.org/content/phases-and-goals

You can print the listing to the Maven Console using the Log All command.


To use
  • Make sure you have m2e plugins installed into your Eclipse.
  • Then install the fragement from this update site URL:
https://cdn.rawgit.com/sandipchitale/m2e-phasesandgoals/1.0.28/org.eclipse.m2e.core.ui.phasesandgoals.updatesite/site.xml

or use:

Drag to your running Eclipse workspace to install Phases and GOals

button.


Current standing see: Eclipse Marketplace

  • Restart Eclipse
  • Select a maven project node and invoke Project > Show Phases and Goals command. You will see the output like above in the Maven Console. If a resource from Maven Project is not selected you are prompted to select on.
Github

https://github.com/sandipchitale/m2e-phasesandgoals


BTW This is implemented as a fragment for https://github.com/eclipse/m2e-core/tree/master/org.eclipse.m2e.core.ui

Enjoy!

Sunday, June 07, 2015

List Maven POMs phases and goals bounds to the phases

For longest time I have wanted to be able to show the actual goals associated with the phases of maven lifecycles. There is the following maven command:

> mvn -B help:describe -Dcmd=deploy

but alas it only lists the static set of goals associated with the phases as specified in the original lifecycle. And then it struck me that m2e add the Lifecycles section to the Maven project's properties page.


So I git cloned the m2e repo  https://git.eclipse.org/r/m2e/m2e-core , looked through the code and
the wrote a small Eclipse plugin fragment to add a command to list the phase and goals into the console. Here is the result.


To use
  • Make sure you have m2e plugins installed into your Eclipse.
  • Then install the fragement from this update site URL:
https://cdn.rawgit.com/sandipchitale/m2e-phasesandgoals/master/org.eclipse.m2e.core.ui.phasesandgoals.updatesite/site.xml
  • Restart Eclipse
  • Select a maven project node and invoke Project > Show Phases and Goals command. You will see the output like above in the Maven Console.
Update

Now displays likely lifecycle and execution ids.

TODO
  • Show the output in a tree view.
  • Allow the user to launch mvn build with the goals associated with a phase.
Github

https://github.com/sandipchitale/m2e-phasesandgoals



Sunday, May 24, 2015

Tinckering with 3D Printing

Here are some videos of the printing in progress. I finally picked up the 3D print over the weekend.


This was my first 3D print design. The material is very hard and the pieces move nicely, after I applied some plumber's grease. As you can see the arcs completing the circles of Yin and Yang broke while handling the movement. Lesson to be learned I guess.

This printer is going to print the model


Monday, April 20, 2015

Question on KQED forum - Philosopher John Searle on 'Seeing Things As They Are'

I sent this question on KQED forum today - Philosopher John Searle on 'Seeing Things As They Are'.

Can John comment on the separation of subject and object of perception and the truth about respective things. I always find that people confuse between the two and think of truth of the subject is same as the truth of the object. For example:

  • When a person reports a spiritual experience there are two parts - the perception in their brain (subject) which in IMO is different from the object - the thing they experience i.e. spirit (say!). I think no one will/can deny that the truth of the persons inner experience but that does not mean the spirit is true.
  • Or when a person perceives the red pigment... (perception of) the color is really the property of brain of the person experiencing the red color. The emission or reflection of a particular frequency of light is the property of the pigment. So IMO when people like Dan Dennett claim that the Colors are real (in "what is real?" debates etc)...what they really mean is that the distinct perception of a particular frequency which the person has learned to call red is real. Not the color red itself.
It is easy to see how the exact same perception (for scenarios above) inside brains can be induced using other mechanism and it happens all the time...drugs or pressing on the eyeball - sometime you see red color.

Part of the question was read by Michael Krasny but unfortunately not the whole question. Granted that the question is long. But then John changed it to his own notions of "subjective visual perception" describing "objective visual perception" and so on and did not comment on my central point about separation of subject and object component of an experience.

I sent this email to Michael Krasny:

Kudos on great program. As always :)

Thanks for asking my question during the program. But it came across as opposite of what I was saying/asking because John answered it by saying something like (paraphrasing) "...when one describes the subjective visual field, one ends up describing objective visual field..." (or some such). However I was suggesting something exactly opposite. In certain cases the description is really the description of subjective perception and is different from the objective reality out there.

This is my pet objection to reports like this http://www.newsweek.com/proof-heaven-doctors-experience-afterlife-65327 in the Newsweek. Just because the doctor had a Afterlife experience (perception in his brain) does not mean Afterlife exists. It most likely was caused by traumatic state of his brain.And of course the fact that a doctor had that experience does not mean it is somehow MORE true. Sometimes this strategy is used to imply truth of something just because some person of good repute - say Einstein said it - well some times even Einstein has been wrong.

Awaiting his response.

The above has been my pet objection to articles like this.

You can hear the question followed by answer directly by matching the thumb with this red one:

Sunday, February 15, 2015

Single Devtools with all my enhancements

I have consolidated all my enhancements to Chrome Devtools into one.

DevTools app is featured at Showcase Chrome Debugging Protocol Clients

The URL for enhanced Chrome Devtools is:

http://chrome-developer-tools.googlecode.com/git-history/enhanced/devtools-frontend/Source/devtools/front_end/inspector.html

which you need to load in DevTools app above. Please note that DevTools app is not essential to try out the enhanced version of Chrome Devtools but it sure makes it easy.

The enhancements are:




You need to enable experiments:



I have now made this the default Devtools URL in Chrome Devtools App.

Friday, February 13, 2015

Appolymer - a simple Chrome app shell using Polymer

Appolymer is a simple Chrome App shell using Polymer



> git clone https://github.com/sandipchitale/appolymer.git
> cd appolymer
> npm install
> bower install

The following is needed to deal with CSP policy issue with Polymer in Chrome App

> grunt vulcanize

This processes the app/appolymer.html file and produces app/appolymer-csp.html and app/appolymer-csp.js. Please note that the app/js/background.js uses app/appolymer-csp.html as the URL of the created application window.

Here is the relevant portion of the Gruntfile.js:

  grunt.initConfig({
    :
    :
    vulcanize: {
   options: {
     csp: true
   },
   csp: {
    files: {
    'app/appolymer-csp.html': 'app/appolymer.html'
    },
   }
    },
    :
    :

> cd app

Install using  Settings > Extension > Select Developer Mode > Load unpacked extension... from app folder.

Thursday, February 05, 2015

All files outline - Chrome Devtools Enhancement

Call to action: If you like this functionality then please * the issue 456520.

UPDATE: I just committed a change whereby the identifier at the current caret position is used as initial query string in the Go to member dialog. This gets me very close to the Ctrl+click navigation I am after.

The current implementation of Go to member (CTRL+SHIFT+P) in the Chrome Devtools shows the outline of members in the current script file. That is good, but not as good as showing the members from all the loaded scripts. This is different than simply doing the Search across all sources which will find the text in all files as opposed to the definition of a symbol. That is what I have implemented as Go to member all files (CTRL+ALT+SHIFT+P).



In the screenshot below you can see that it is showing the members from all files as opposed to only the current file.


To try this you can use DevTools App and enter the url:

http://chrome-developer-tools.googlecode.com/git-history/allfilesoutline/devtools-frontend/Source/devtools/front_end/inspector.html

I have filed an issue 456520 and submitted a patch.

It works great when I am doing inspector inception as mentioned here. The members can be filtered by typing the search text. The dialog shows the matching members. The line number:script name are shown on the right side. Hovering on the right side will show the full URL of the script. Selecting the member will open up that script at the specific line number.


Feedback welcome!

Wednesday, February 04, 2015

Update: Show constructor definition - Chrome Devtools Enhancement

Call to action: If you like this functionality then please * the issue 453801.

Based on the feedback on the review on issue 453801 I have made some changes to the implementation.

The functionality is now split into the following actions:

For function objects
  •  Show function documentation
For object objects
  •  Show constructor definition
  •  Show constructor documentation
The Show constructor definition works similar to the existing Show function definition, except that it shows the definition of the 'constructor' property.

To turn on the following actions:
  • Show function documentation
  • Show constructor documentation
You have to enable it on the experiments tab by selecting the Show function documentation checkbox and entering the url for APIs like this:


That way the API URLs do not have to be hard coded into the code and you can add additional URLs. The {api} token will be replaced by the API name.

The URLs are (for easy copy/paste):

https://developer.mozilla.org/en-US/docs/Web/API/{api}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/{api}
https://developer.mozilla.org/de/docs/DOM/window.{api}

or alternatively

https://docs.webplatform.org/wiki/javascript/{api}
https://docs.webplatform.org/wiki/dom/{api}
https://docs.webplatform.org/wiki/dom/Window/{api}
https://docs.webplatform.org/wiki/svg/objects/{api}
https://docs.webplatform.org/wiki/apis/webaudio/{api}

To try this you can use DevTools App and enter the url:

http://chrome-developer-tools.googlecode.com/git-history/issue453801/devtools-frontend/Source/devtools/front_end/inspector.html

Make sure that Enable experiments is checked.

Feedback welcome!



Thursday, January 29, 2015

Show class definition - Chrome Devtools Enhancement

Chrome Devtools Scope Variables Pane supports Show function definition context menu for properties of function type. Along the same lines I developed a Show class definition action. Basically it allows you to jump to the definition of the constructor of  properties of type object.

For example see the below screenshots. The context menu on johndoe property's value shows the Show class definition action.


Invoking the Show class definition will open the source file where the Person function is defined and highlight it like so:


If the source location is not found and if the property is either a instance of standard JavaScript type or DOM type then it will show the API page from MDN e.g.



BTW the above also works for the Show function definition action already supported by Chrome Devtools:


You can try it by loading this devtools:

http://chrome-developer-tools.googlecode.com/git/devtools-frontend/Source/devtools/front_end/inspector.html

URL in Chrome Devtools App.

I have filed an issue 453801 and submitted a patch. Please vote on the issue if you like this feature.

Feedback welcome.

Sunday, January 25, 2015

Detect window metric changes using Highlight changed properties enhancement

May times it is not clear which window metrics properties are affected when you move, resize or scroll windows. I found the Highlight changed properties enhancement to Chrome Devtools very useful here. For example I loaded up the enhancement into Chrome Devtools App, started debugging, suspended the Javascript execution, added a watchpoint on window,expanded the watchpoint, resumed the debugger, moved, resized the window and suspended the Javascript execution again, and looked at the highlighted properties. Viola.


BTW if you like the Highlight changed properties enhancement then Star or comment on the Chrome Devtools issue 441374. The patch is being reviewed at the moment and hopefully the enhancement will become available in Chrome Browser soon.

NOTE: Now the Highlight changed properties enhancement is coded as an experiment. You will have to turn on the behavior by selecting the Setting (Gear) > Experiments > Highligh changed properties checkbox.

Make sure to load this devtools:

http://chrome-developer-tools.googlecode.com/git/devtools-frontend/Source/devtools/front_end/inspector.html


URL in Chrome Devtools App,


Monday, January 19, 2015

Chrome Developer Tools Enhancement - highlight on change - Settings

In this blog post I blogged about Chrome Developer Tools Enhancement -  highlight on change. I have coded it  as an experiment.to control this feature.



To try this use this URL for the devltools:

http://chrome-developer-tools.googlecode.com/git/devtools-frontend/Source/devtools/front_end/inspector.html

as explained in this blog entry.