Angular 2 Resources

Official web site

https://angular.io

Official Github Repo

https://github.com/angular/angular
A few notable sub-directories:

• Source Code: https://github.com/angular/angular/tree/master/modules/angular2/src
• Release Progress: https://github.com/angular/angular/milestones

Angular CLI

https://github.com/angular/angular-cli
Command line interface. It helps to build skeleton code for a new project that follows best practice. Not officially released yet. But very helpful. It generates project with proper folder structure, unit testing and end2end tests are also included.

npm packages

• angular2: https://www.npmjs.com/package/angular2
  angular-cli: https://www.npmjs.com/package/angular-cli

Blog about Angular 2 (and other Software topics) by Victor Savkin

http://victorsavkin.com
There are not many tutorials here, but those few entries will give us a deep dive into Angular 2 design philosophy.

egghead.io

https://egghead.io/technologies/angular2
A series of short video tutorials about angular 2.

Stackoverflow tagged Angular 2

http://stackoverflow.com/questions/tagged/angular2

ExtJS 6.0.0 GPL is out

Go here: https://www.sencha.com/legal/gpl/, select "Sencha Ext JS" and give your email address.

This version has quite a few feature and performance improvements. https://docs.sencha.com/extjs/6.0/whats_new/6.0.0/whats_new.html

JPA Join Fetch

A couple of key points to have a successful join fetch in JPA (backed by Hibernate):

• Why do we want join fetch? JPA default fetch strategy is "Lazy", which has better performance under most circumstances. But, sometimes we do want to retrieve all children (and sometimes children's children). In that case, join fetch allows us to get everything in one Database round-trip instead of N (or N*N round-tips). This change can easily speed up those queries for 100 times (in my case it went from 20 seconds to 0.2 seconds).
• Make sure in your Entity classes, the child collections are "Set" not "List". If you get the error message: "Hibernate cannot simultaneously fetch multiple bags". This is the root cause.
• How to join multiple levels: 

        root
          .fetch([childAttributeName], JoinType.LEFT)
          .fetch([grandChildAttributeName], JoinType.LEFT);

• Fetch join will return multiple duplicated rows for the parent entity. This is usually undesirable, wrap the return set in a LinkedHashSet will get the unique parent entities in the original select order. (See this Stack Overflow post)

Troubleshoot Networking Problems in Google Chrome Browser

* Developer Tools > Network

* chrome://net-internals/
Screenshot for the socket view: chrome://net-internals/#sockets

* wireshark (hopefully, do not need to go that far)

Coldfusion 10 Solr Indexing Zip File that Contains PDF files

Seems like I should be surprised, if I don't find some surprises in Coldfusion every week. :) Here is another one that took me a few hours to find a solution. And hopefully will save a few hours for someone else.

Environment
Coldfusion 10 Update 15
Windows Server 2012

Symptom
When indexing a bunch of files, Coldfusion stopped indexing without any exception or getting into any error state. It just stopped in the middle of indexing. If I was not looking at it closely, I would not have noticed that it has failed.

Again, Coldfusion stopped  the execution without throwing a fuss is a big surprise for me. If I run it in Brower, there is no usual 500 server error. Everything is just hunky-dory as far as Coldfusion is concerned!?

Cause
After some digging, I found out the following

• It stopped on a zip file
• The zip file has some PDF files in it
• Coldfusion-error.log has the following message

Feb 25, 2015 8:30:28 AM org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: Servlet.service() for servlet [CfmServlet] in context with path [/] threw exception [ROOT CAUSE: 
java.lang.NoClassDefFoundError: org/apache/pdfbox/pdmodel/PDDocument
 at org.apache.tika.parser.pdf.PDFParser.parse(PDFParser.java:53)
 at org.apache.tika.parser.CompositeParser.parse(CompositeParser.java:120)
 at org.apache.tika.parser.AutoDetectParser.parse(AutoDetectParser.java:101)
 at org.apache.tika.parser.DelegatingParser.parse(DelegatingParser.java:52)
 at org.apache.tika.parser.pkg.PackageParser.parseArchive(PackageParser.java:78)
 at org.apache.tika.parser.pkg.ZipParser.parse(ZipParser.java:49)
 at org.apache.tika.parser.CompositeParser.parse(CompositeParser.java:120)
 at org.apache.tika.parser.AutoDetectParser.parse(AutoDetectParser.java:101)
 at coldfusion.tagext.search.SolrUtils.getMetadata(SolrUtils.java:599)
 at coldfusion.tagext.search.SolrUtils.getSolrDocument(SolrUtils.java:753)
 at coldfusion.tagext.search.SolrUtils.addDocument(SolrUtils.java:1339)
 at coldfusion.tagext.search.IndexTag.doUpdate(IndexTag.java:651)
 at coldfusion.tagext.search.IndexTag.doStartTag(IndexTag.java:340)

So, obviously, our Coldfusion distribution is missing some libraries.

Solution
Short answer: find jar file for PDFBox, throw them under Coldfusion lib folder and restart Coldfusion. And I got the jar file from here: pdfbox-0.8.0-incubating.jar

Long Answer: However, as with all Open Source projects, there is not much consideration of backward compatibility or official supported bundled distribution. I tried to download latest version of PDFBox, and it just does not work. So, I will need to find the original bundled version, and here is the journey (without detours I took :( ) to the right jar file

• Search CF10 folder for tika jar file, found tika-parsers-0.6.jar
• Google Tika source, found it SVN root
• Find maven POM file under 0.6 tag: http://svn.apache.org/repos/asf/tika/tags/0.6/tika-parsers/pom.xml
• Located reference of PDFBox

<dependency>
  <groupId>org.apache.pdfbox</groupId>
  <artifactId>pdfbox</artifactId>
  <version>0.8.0-incubating</version>
</dependency>

• Google "pdfbox 0.8.0 incubating"
• voila

Another Challenge (unsolved)
There is still some unsolved challenge for Solr. For example, Verity can index our PDF files correctly, but Solr's PDF reader seem to be sub-par. It only got some fragmented text from our PDF file, and it's missing a lot of keywords in our PDF files.

CFScript bug?

An extra semicolon at the end of "if" block is causing a lot of head scratching for me recently. Please see the code snippet below. Expected output should be:

Figure 1. Expected Output

However, below is the actual output:

Figure 2. Actual Output

Now, please notice this extra ";" at the end of line 6. If I remove it, everything will just work as expected.

<cfscript>
    private struct function test() {
        if(1 == 1) {
            if(1 == 0) {
                writeOutput("1==0");
            }; //<- look at here
            writeOutput("true");
            return {data = 1};
        }
        writeOutput("false");
        return {data = 2};
    }
    writeDump(test());
</cfscript>

Due to the lack of specifications for CFScript language, I cannot tell if this grammar is even allowed. But I can tell you this: the journey of discovering and finding the root cause of this problem is not fun at all!

Symptom

CFScript fall through the "if-else" statement, and did not return to caller from the expected branch.

Cause

An extra semicolon at the end of a block is the root cause.

Node.JS Error "Cannot find module '...'"

Setting up NodeJS is generally a smooth process. There is one thing need to be taken care of manually: set up environment variable NODE_PATH. This variable must point to the npm global installation location, otherwise you NodeJS application may have problem starting with error message like this:

Error: Cannot find module 'XXX'

In Windows, the easiest way is to go Computer > Properties > Advanced System Settings > Environment Variables > User Variables > New

After the configuration, need to exit the current command line and start a new one in order to see the environment variable in effect.

IIS Error: Cannot write configuration file

Symptom

When trying to change IIS configuration, got this error message:

Filename:
    \\?\C:\Windows\System32\inetsrv\config\applicationHost.config
    Error: Cannot write configuration file

Error Message

Diagnosis

Turns out root cause of the problem is a full C: drive.

Windows Explorer

Solution

Luckily, this is a virtual machine with some spare disk capacity. So it's just a matter of allocating more resource, then extend C: drive.

Flex TextArea problem in DataGrid

Problem

Flex 4 TextArea does not take multi-line entry when used as editor in DataGrid.

Solution

Add editorUsesEnterKey="true" attribute to the column with TextArea editor.

P.S.

The solution is straightforward. But the route to finding this solution kind of proves open source or at least show your customer the source code is very important.

I first suspect the enter key is intercepted by DataGrid, but it appears that keydown event is intercepted by DataGrid before the TextArea. Some Googling with various keyword combination did not turn up anything interesting.

Not sure where to start, I added a itemEditEnd event handler to the DataGrid, and set a breakpoint there. After walking through the stack, I saw the following code segment, and thus the solution above pops out. Now I can simply go to documentation of editorUsedEnterKey and make sure this is what I want.

(Code of interest from DataGrid.as)
    /**
     *  @private
     */
    private function editorKeyDownHandler(event:KeyboardEvent):void
    {
        // ESC just kills the editor, no new data
        if (event.keyCode == Keyboard.ESCAPE)
        {
            endEdit(DataGridEventReason.CANCELLED);
        }
        else if (event.ctrlKey && event.charCode == 46)
        {   // Check for Ctrl-.
            endEdit(DataGridEventReason.CANCELLED);
        }
        else if (event.charCode == Keyboard.ENTER && event.keyCode != 229)
        {
            // multiline editors can take the enter key.
            if (!_editedItemPosition)
                return;

            if (columns[_editedItemPosition.columnIndex].editorUsesEnterKey)
                return;

            // Enter edits the item, moves down a row
            // The 229 keyCode is for IME compatability. When entering an IME expression,
            // the enter key is down, but the keyCode is 229 instead of the enter key code.
            // Thanks to Yukari for this little trick...
            if (endEdit(DataGridEventReason.NEW_ROW) && !dontEdit)
            {
                findNextEnterItemRenderer(event);
                if (focusManager)
                    focusManager.defaultButtonEnabled = false;
            }
        }
    }

Ubuntu LTS 12 on VMWare Player Showing Multiple Columns of Identical Screens

Symptoms

After updating to Kernel 3.2.0.67 and reboot, my screen is showing three columns of duplicated desktop. 

Environment: 

• VMWare Player 6.0.3
• Ubuntu: 12.04 LTS, Kernel 3.2.0.67 (post upgrade version, I'm not sure what was the version before my upgrade)
• The VM image was created way back in a very old VMWare Player, started from Ubuntu 10. It has been kept up-to-date by applying Ubuntu patches and eventually to 12.04 LTS. Turn out this probably was the root cause of all the troubles

Solution

After some Google search and reading up on posts, I was eventually lead to the following thread:

Guest display split into identical panes

Flip to page 2, on post 17 from thellstrom, there is the solution that worked for me. I used solution 1b mentioned in the post, and after reboot, everything is back to normal.

Cause

So, based on the article, root cause of the problem is due to VM created on old version of player with virtualHW version 7. I updated the config file from version 7 to 9, and everything appears to be working now.

Just Because You Can Does Not Mean You Should

SQL Injection Attack - Law Enforcement be Aware

Must see, "High Tech" attack of law enforcement IT network. It may crash license plate readers, red light cameras, ...

No seriously, it might work.

SQL Injection Attack

Source: http://coolshell.cn/

Lua in Visual Studio 2013

Build Lua for Windows using Visual Studio 2013 is a very straightforward task.

Project to build lua.exe:

1. Create Project > Visual C++ > Empty Project
2. Add Existing Item ...
• Select all files under src except luac.c
3. Project Property > All Configurations > Configuration Properties > C/C++ > Preprocessor > Preprocess Definitions, add: _CRT_SECURE_NO_WARNINGS

That is it.

To build luac.exe, simply repeat above steps. When selecting files, select all files, except lua.c.

Puzzles for Programmers

http://fun.coolshell.cn/ 

What is the output of the code below?

JSmol Widget for ExtJS 5

Screenshot of the Demo Page Running in Google Chrome

Background

Jmol

Jmol is an open-source viewer for three-dimensional chemical structures, with features for chemicals, crystals, materials and biomolecules. Features include reading a variety of file types and output from quantum chemistry programs, and animation of multi-frame files and computed normal modes from quantum programs.

JSmol

JSmol is a JavaScript framework that allows web developers to create pages that utilize either Java or HTML5 (no Java), at will. This enables Jmol to display interactive 3D molecular structures on devices that do not have Java installed, or for which Java is not available (such as smart phones and some tablet computers, e.g. iPad) or has not been installed because of concerns for Java being a security threat.

I have used Jmol for a few years now. But, over the past few years, due to concerns of security threat? Running Java applet in a browse is getting harder and harder. Shelling out money to buy certificate for open source software is, well, at most a hard sell.

So, JSmol to the rescue, pure JavaScript HTML5 application, works on IE, Firefox, Chrome, and even iPad. What is the catch? At least it does not live well with ExtJS on the same web page. You will get weired error messages like 'Uncaught TypeError: Cannot read property '***' of null'. My guess is JSmol has changed prototype of some basic types.

Problem

• Jmol:   can no longer be used in any major browser without compiling with a trusted certificate
• JSmol: not compatible with ExtJS, and I suspect may have problem with a lot of other libraries as well

Solution

iframe! It gives the web page the needed firewall between ExtJS page and JSmol page.

I have implemented a basic ExtJS 5 Widget that will inject an iframe, then inject JSmol code to render molecule models.

Live demo: Example - JSmol Widget for ExtJS 5

Demo page source code:

• JSmolExt_demo.htm
• JSmolExt_demo.js

Widget Source Code:

• JSmolExt.js

This widget takes JmolConfig object, and will pass it along to the JSmol app in the iframe. For details of the parameters, please refer to: Jmol JavaScript Object/Info.

One more thing, the component has a "safe" option. Because the code to inject JSmol to iframe does not work in Firefox and IE 9. If "safe" is true, it will simply set iframe src to a pre-existing page that host JSmol library. I used this page: A bare bone JSmol Demo Page. Problem with my page is that it is static and does not honor the JSmolConfig passed to the widget. Now it is up to you to pass along the JSmolConfig to a dynamic page.

Just for fun, below is a screenshot of Jmol's official demo from one of my computers.

Github: mirror master -> gh-pages

1. Navigate to the project page
2. To the left of branch dropdown, click "Compare, review, create a pull request";
3. Select: Base: gh-pages, Compare: master
4. Create pull request
5. Merge pull request
6. Confirm merge

Done!

Windows 3 Nostalgia

Must see for Windows 3 nostalgia. :) http://www.michaelv.org/, everything done using HTML, and actually works.

Calculator

Dos Prompt, try DIR

Media Player

Minesweeper, it works too!!

Notepad, you can even save the text file

Finally, where it all begins, Program Manager

Namespace in ActionScript (how to get ObjectProxy's object)

Example, to get raw object of ObjectProxy, your code has to be something like this:

var op:ObjectProxy = new ObjectProxy({a: 1});

var obj:Object = op.object_proxy::object; //get what you wanted 

obj = op.object; //you get undefined here

Actionscript's documentation did not show any namespace qualification. Flash builder's debugger will show correct content in "op.object". All these leads to confusion. So, hopefully this little note can save somebody an hour of head scratching.

Why Sweatband/Helmet/Cap Could Make Better Wearable Than Watch

Compare to a wrist watch, sweatband/helmet/cap wearable provides the following advantages:

• Speaker
• Close to ears, can have wired earphone
• Or simple a speaker close to head bone might work well
• Microphone: being at fixed distance from your mouth, and close to head bones, the microphone can be designed to be efficient. Compare to watch, you no longer need to raise your hand to talk
• Camera: head is always more stable, and provides good stabilization for human vision, thus better for camera too.
• More stable than watch
• Better view of the world around you (imaging playing tennis, rowing boat or skiing, a camera on the watch won't deliver much quality)
• Panorama with multiple cameras is possible
• Ambient Light Sensor: wrist watch are frequently under sleeves or in pockets, it just cannot give an accurate reading of the user's actual ambient light. However a sensor on the head enjoys all the day light a user might enjoy
• Physiology Measurements: there are way more vital signs that can be measured near brain than on the wrist
• Skin resistance change: monitor sweating
• EEG (brain waves): measure brain activities, alertness, attention and focus, etc. Might be good for mediation, board games, ...
• EOG/ENG: Eye movements tracking, can be used to diagnose dizziness, balance problem, ...
• Hear rate: pulse can be taken from temple
• Blood pressure: can be taken from temple
• Blood oxygen level: can be taken from temple
• Body temperature
• Movements tracking: because they are on head rather than wrist, they subject to less swing or up and downs, can track human movements more accurately
• Orientation tracking is more accurate (in terms of North/South/East/West and also Up/Down. You will have more confidence in telling the user is in upside down position.)
• Acceleration is more accurate. For example, when basketball player go for a slam dunk, their hand movements will be very complicated, and you won't know how much power they put in the jump, or how high their jump is, but a sweatband (LeBron James?) can give very accurate reading;

Disadvantages?

• The electronics on sweatband has to be feather light
• Not suitable for work place in the current western culture (while wearing watch at work is widely acceptable, wearing a band or cap at work is still a bold fashion statement)
• The user cannot see it (Oh, maybe something like Google Glass, but retractable will solve this problem)

Potential Applications

• Yoga training
• Meditation training
• Sleep disorder assistance: it knows your toss and turns, you blood oxygen level change, heart rate change and eye movement changes (rapid eye movement sleeping), ...
• Patient assistance: dizziness, epilepsy early warning
• Sports life panorama video 
• Athlete training assistance: tracking and feedback on gait, gravity center change, speed, acceleration, fatigue, ...
• Car Black Box: it is no longer necessary, just make sure your cap power is on
• ...

(Published on July 1, 2014, All Rights Reserved)

Apple's Swift language - first impressions

Just a quick first impression.
Pros:

• Lots of language sugar, should reduce some boilerplate code

Cons:

• Deviation from JSON format see to be arbitrary decision. Why not 

let people = {"Anna": 67, "Beto": 8, "Jack": 33, "Sam": 25}

• Plenty other seemingly arbitrary decisions that are not intuitive. E.g. 
• Use let to make a constant and var to make variable (why not const vs var?)
• func getName() -> String, why not func getName() : String?
• The biggest problem probably is still same as Object-C, you learn it to only write client program for one vendor's hardware. Will Swift ever be open and adopted on server side or other vendors?