Using AngularJS in Eclipse, Part 4) Create Components

This is the last of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the Create Components:

Using AngularJS in Eclipse, Part 3) Wire up a Backend

This is the third of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control 
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the Wire up a Backend:

Using AngularJS in Eclipse, Part 2) Add Some Control

This is the second of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control 
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the Add Some Control:

Using AngularJS in Eclipse, Part 1) The Basics

This is the first of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control 
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the The Basics.

I'm doing this on an OSX laptop and the first step was to download and unzip (eclipse-standard-kepler-SR1-macosx-cocoa.tar.gz (32bit version of Eclipse's Kerpler) into the ~/_Dev/_AngularJS folder.

I fired up eclipse, chose the ~/_Dev/_AngularJS/workspace as the workspace root and installed the Eclipse Grovy REPL Scripting Environment 1.6.0 (update site) and Angular-JS Eclipse Tooling (update site) plugins.

A really SIMPLE and clean AngularJS+Firebase example

As seen on the First PoC of sending TeamMentor's server-side request URLS to Firebase (and seeing it in realtime in an AngularJS page) I created a Simple AngularJS website which I'm very happy with (and I mean Simple with a capital S).

The main reason I really like the solution shown below, is because it represents a number of really nice, clean and Simple solutions for common (complex) problems that exist while developing in Javascript.

The created application is an:

• AngularJS real-time viewer for HTTP requests, 
• ... made to an ASP.NET web application (TeamMentor),  
• ... captured by an custom C# HttpHandler filter, 
• ... submitted to Firebase using its REST API and 
• ... pushed back to the AngularJS app using open HTML 5 WebSockets.

Eclipse Groovy REPL script to sync a Browser with file changes (with recursive folder search via Java's WatchService)

Since I am using Eclipse to develop using AngularJS (see Creating an Eclipse UI to run AngularJS e2e tests using Karma), I needed a way to refresh the browser window every-time I made changes to any AngularJS related file (note that due to the nature of the AngularJS projects, I need the change to trigger on any change made inside the root folder and all its subfolders).

Since there didn't seem to be an easy way to do this ('auto browser refresh on file changes') in  Eclipse, I used the Eclipse Grovy REPL Scripting Environment to develop a script/macro that:

• Based on a title of an opened eclipse editor file:
• ... find the full path of that file, and:
• ... create a Java WatchService that monitors the file's folder and subfolders, and:
• ... when a StandardWatchEventKinds.ENTRY_MODIFY is received :
• Create/Open a new Eclipse view with a browser (called Synced Browser), and:
• ...refresh the index page 

First PoC of sending TeamMentor's server-side request URLS to Firebase (and seeing it in realtime in an AngularJS page)

After getting my head around how Firebase works (see Using Firebase to sync data with a webpage (via Javascript, REST and Firebase Admin panel) and Trying our Firebase (Beta) hosting solution and good example of Firebase Security rules), I really wanted to see how it could work on a key feature that I've been wanting to add to TeamMentor for ages: Realtime viewing  of traffic and logs

And it worked :)

This is really exciting!!! (can you tell :)  ), specially since I can see so many great uses of this type of technique and technology in TeamMentor (for example it will allow for much better understanding on how the content is used, and for better collaboration between its readers (and authors))

Trying out Firebase (Beta) hosting solution and good example of Firebase Security rules

Since Firebase now offers a Beta hosting service (and I was looking for a quick way to publish one of the firebase PoCs I'm working at the moment), I decided to take it for a spin.

I have to say that I'm really impressed with the end result, and as you will see below, there entire process (from install to published website) was really smooth.

Note 1: in the example below I already had created an Firebase app to hold the data (see Using Firebase to sync data with a webpage (via Javascript, REST and Firebase Admin panel) for details on how to create one) 

Note 2: at the time I wrote this post, the website created is/was (depending on when you are reading this) hosted at https://tm-admin-test.firebaseapp.com/

Starting with the instructions from Firebase hosting page:

XSS considerations when developing with Firebase

Following my previous post on Using Firebase to sync data with a webpage (via Javascript, REST and Firebase Admin panel), here are a couple security notes and 'areas of concern', that should be taken into account when developing real-time apps with Firebase:

• Firebase will reflect any payloads sent to it
• We are talking about DOM based XSS
• The current browsers XSS protection does not protect against DOM based XSS
• It is very easy to create a vulnerability (as you will see below, all it takes is a simple change from .text() to .html())
• If powerful DOM based API-manipulation frameworks are used (like jQuery), there are many more injection points (sinks)
• By nature of Firebase applications, the XSS exploit will have wormable capabilities (i.e. it will be able to distribute and self-propagate itself VERY quickly)
• Current static-analysis tools will struggle to pick up this type of vulns

Note: I think (and I will want to double check this) that if is safe (i.e OK) to put received Firebase data/payloads, on an AngularJS auto-binded location/variable (for example {{name}} : {{message}} )

Let's use the chat application provided by Firebase to see this in action (note that as you will see below, the chat application as provided by Firebase, is secure and not exploitable)

Using Firebase to sync data with a webpage (via Javascript, REST and Firebase Admin panel)

If you haven't seen the Anant Narayanan presentation on AngularJS conference called Building realtime apps with Firebase and AngularJS you are missing something good.

Firebase really seems to fix one of the pain points that I currently have in client-server development, which is how to send/synchronise data across multiple clients (including the server).

I first heard about Firebase from the Wire up a Backend example that can be found at http://angularjs.org, and today I was able to give it a test drive (since I want to use it on the AngularJS front-ends that I'm currently developing for TeamMentor)

Creating an Eclipse UI to run AngularJS e2e tests using Karma

This post shows how I created a nice set of views in Eclipse to quickly see the execution result of AngularJS e2e (end-to-end) tests, without leaving the Eclipse UI.

The image below shows this UI in action, where:

• The source code of the test is shown in the Eclipse Java editor
• Just below is the console out of the Karma runner (which is detecting files changes)
• On the top-right is the hooked browser (i.e. the one that will run the tests)
• On the middle-right is the simple AngularJS Hello World page
• On the bottom-right is the debug view of the hooked browser (which is what you get if you click on the Debug Button included on the top-right page)

Example of DOM XSS in WebSocket.org echo demo page (that bypasses Chrome's XSS detection)

I was looking at WebSockets today (because of its use in Firebase which is used in one of AngularJS samples), and noticed an DOM XSS example on the WebSocket echo page which is used as an example of how to use WebSockets (I found that page from this article Inspecting WebSocket Traffic with Chrome Developer Tools)

For historical record (and to reuse them in a Javascript SAST) I've copied the current (vulnerable) version of the HTML and JS provided to this gist.

Code samples (like these) should not be provided with these types of security vulnerabilities, since they should represent best practices.

Specially when we know that the normal developer workflow is to start with copy-n-pastes from these type of examples (note how that page, as of Fev 2014) has no references to security).


Let see the vulnerability in action.

Removing broken links from TeamMentor Articles using C# REPL and HtmlAgilityPack

After creating and using the TeamMentor TBot page to delete articles based on list of Guids the next action to do is to clean up and fix the links to the articles we removed.

Note that this is not a simple task, since there are multiple cases where the links are inside <li> tags (with or without text) which will also need to be removed (there was also a problem caused by the fact that the <li> tags were not correctly normalised (as you will see below)

I used the TM Link Status tool since it provides a nice analysis of what needs to be fixed, including REPL environments to script the object created during the 'link analysis' phase'.

Here is the workflow I followed, including some of the probs I had to solve along the way:

Reverting changes mades to TeamMentor articles

The problem was simple, there were a number of commits made to an TeamMentor GitHub repo that I wanted to completely reverse (without re-writing history).

For reference this happened when I was doing some 'Link fixing' tests on a server that was configured to auto commit to GitHub (which meant that the option to do a pure git reset --hard was not available since it would break the TM server)

In this case, the last good commit was e794cc839689dfc7915099d39972abde643a969d and the last bad commit was c53002083e85673f9a4dd7e6dbd2a37bc7ff9e2f (currently HEAD of master)

My first idea was to just do a git revert to the e794cc839689dfc7915099d39972abde643a969d which worked ok locally.

But I struggled to merge it with the master HEAD, because git was being too cleaver , since it realised that these two commits were compatible, and just fast-forwarded into the most recent one (vs doing a 'reverse merge')

Just added Flattr to this blog (I wonder how much Flattrs I will get?)

After Just Signed up for Flattr, what do you think of it? I decided to give it a try in this blog, since after all I'm also a content creator (and have recently reached my 1000 blog post).

What is interesting is that adding Flattr to this blog feels better than when I tried using Google AdSense (see Just disabled AdSense for this blog).

I guess the difference is that by adding AdSense to my blog I was exploiting my readers and benefiting from the 'getting out of control' ad industry (whose business model is to monitor and spy on everybody).

While by using Flattr I basically asking my readers to support me (if they like a particular blog post or content).

I also fell that it is a better relationship with the readers, since AdSense kinda pushes for the 'blockbuster post' with as much traffic as possible, where Flattr will (I hope) reward good and solid content, that added value to the reader, and that the reader liked enough to want to support it (lets see what happens :)  ).

For reference here is how I added Flattr to this blog:

Just Signed up for Flattr, what do you think of it?

While reading the Eclipse Memory Analyzer (MAT) - Tutorial I noticed a link to https://flattr.com which is a micro-payment solution for consumers of content to support the content creators.

Here is more info about Flattr:

• How Flattr works , Where can I flattr? , FAQ , Contact (Sweden and in London UK :)  )
• Flattr Wikipedia Article
• Bootstrapping a Podcast Economy with Flattr
• Twitter cuts off another payment service: Flattr is told to stop tying Favorites to money  and Twitter is forcing us to drop users ability to flattr creators by favoriting their tweets

Here are the steps I took to register:

TeamMentor TBot page to delete articles based on list of Guids

Continuing on the thread where I'm helping Serge to prune the TeamMentor's ASP.NET 3.5 library (see here, here and here for how I set-up the current test environment), one of his requirements was to be able to batch delete TeamMentor articles based on a list of GUIDs.

Without touching the 3.4 codebase I was able to add a new TBot Admin page with this feature (which is quite a cool 3.4 TeamMentor capability that I will blog about in a different post).

As with the previous examples, the TBot Script, called Delete_Articles_By_Guid.cshtml was developed on a GitHub hosted, TeamMentor UserData Repo:

Eclipse Plugin that allows the execution of REPL Groovy Scripts (in the current Eclipse Instance) and Fluent API for Eclipse+SWT

For the past 6 months I have been working on an Eclipse plugin that implements a Groovy REPL that makes it very easy to learn Eclipse and SWT.

I also started the creation of a fluent API for Eclipse and SWT, in order to reduce the amount of code that needs to be written when creating Eclipse plugins.

The plan is to release the next version of this plugin as an kind of Eclipse Plugin Builder, but it is already quite usable in the current state.

Setting up a Minecraft server in Azure (for use at weekly CodeClub session)

For almost one year, I've been doing a weekly CodeClub session at one of my kids schools, and sometimes at a local restaurant (see here)

Since there is quite a lot of passion in the kids for Minecraft, I decided that for this term, we would try to use a Minecraft server in class, and see if we (me and kids) can figure out how to use Minecraft without a mouse (ie, with only programming).

Since my first experiments with a Minecraft server where quite positive (see Setting up a CraftBukkit based Minecraft server on OSX (Nov 2013)) I decided that it was time to take it up a notch, and try to create a Minecraft server in Azure (so that the kids can access it from home).

Here are the steps I took:

Adding files to TeamMentor's web root via a UserData folder (synced with GitHub)

This post shows how to add custom files to the TeamMentor's webroot using a special feature of the TeamMentor's UserData folder.

In this demo I'm going to use the UserData setup in this post (currently synchronised with a GitHub repo)

Basically we are going to edit a file in GitHub, which will end up in the root of the associated TeamMentor website (which is quite a powerful PoC and bug fixing feature).

First step is to go to the synced GitHub repo (created here) and click the Create a new file here button in GitHub's UI:

Using TeamMentor 3.4 TBot admin pages to load and sync UserData with a GitHub hosted repo

Continuing from where Using TeamMentor 3.4 TBot admin pages to load and sync a Library hosted on GitHub left, this post shows how to use the same technique to sync TeamMentor's UserData with a GitHub repo.

For more details on how the UserData repo/folder fits within TeamMentor's architecture, see these posts:

Using TeamMentor 3.4 TBot admin pages to load and sync a Library hosted on GitHub

Serge asked me to help making some changes to the TeamMentor's Asp.NET 3.5 library, and since we need a test server to look at what might be changed (and run some scripts) this is a good time to show about how to use the TeamMentor's 3.4 Tbot pages to load a Library hosted on GitHub

I will also show, how once the TM server is configured with a library using a Git url,  changes can be auto committed/pushed to that Git server, every-time there is a content edition using TM's web editors.

Step 1: Preparing the target TM server

Lets start with an Azure hosted TeamMentor server, for example this one:

Viewing Eclipse and SWT objects (Workbench, Display and Shell) using Groovy's ObjectBrowser and using TeamMentor's Plugin ObjectBrowser

Using the Groovy REPL included in TeamMentor's Eclipse Plugin (see update site and more info here, here, and here) it is possible to view in real time a number of Eclipse/SWT objects (for example the Workbench, Display or Shell )

Using Groovy's ObjectBrowser:

Let's start with Groovy's ObjectBrowser which I used to use just about every day, since it gave me access to a live view of an particular Object's Fields, Properties (from getters) and Methods.

Eclipse Groovy REPL - Open TeamMentor Article in multiple formats

Part of the new TeamMentor Fortify Eclipse plugin v1.6.0 (update site here, installation instructions here) is a really powerful TeamMentor and Eclipse API which can be easily accessed via the included Groovy REPL.

In this first post (of several in this topic) I will show how to use the APIs to Open TeamMentor Article in multiple formats


The first step is to open the Util - Write Script (TeamMentor DSL) view (which is the name of the provided Groovy REPL) using the TeamMentor menu (note that the Advanced mode features config property needs to be checked, or the Advanced and Debug Features sub-menu will not be visible):

Fixing Coding Signing issue where Eclipse Plugin didn't install in Indigo

As mentioned in the Saga to sign an eclipse plugin with a code cert the problems didn't finish after the plugin was signed OK.

During the final QA stage Roman reported that he was Unable to install plugin on Indigo.

I was able to replicate that issue on a clean install of Indigo, where I got the following error when trying to install the TeamMentor Plugin: