Load the browserstack.com local tunnel with a .bat file

We are using browserstack.com for our testing on the current project – real IE8 is very different to IE8+ in IE8 mode

Anyway I am lazy (efficient) so I created a batch file to run and create the local tunnel. Take the following and add it to a .bat file (windows only of course) and run it when you are logged into the browser stack – this may change based on your JRE install path

bs2

 

cd C:\Program Files (x86)\Java\jre7\bin
java -jar BrowserStackTunnel.jar *YOURKEYHERE* your.localserver.com,80,0 -force

 

bs1

SSJS JSON parsing part deux

Yesterday’s blog post about adding json2.js created a discussion on it’s use and Johann pointed out that there were already JSON parsing functions baked into XPages SSJS. Phil Riand added them back in 8.5.1 and it has actually been mentioned a number of times on various Blogs. So apologies to all for me not knowing about it. I guess I never bothered to look as I knew how to do it with the json2.js 🙂

Julian Buss added a wiki post about it years ago – http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_ServerSide_JavaScript

	var json = toJson( {a:[1,2,3]} ) //-> '{"a":[1,2,3]}'
	var jsObj = fromJson( '{"a":[1,2,3]}' ) //-> {a:[1,2,3]}
	isJson( '{"a":[1,2,3]}' ) //-> true

So ok I learned something new – happens a lot – but then I also got to thinking – as I mentioned yesterday JSON.parse and JSON.stringify are so ubiquitous I decided to write some code to minic the coding standard in SSJS. This code serves zero purpose other than to make the usage of JSON consistent between SSJS and CSJS. It is a short version of what I wrote about yesterday and does not require the addition of the json2.js to the database.

	if (typeof JSON !== 'object') {
		JSON = {};
	}
	JSON = {
		parse: function(str){
			return fromJson(str)
		},
		stringify: function(obj){
			return toJson(obj)
		}
	}

Safe JSON parsing in XPages SSJS

JSON is now ubiquitous in the world of JavaScript and the origins can be found a http://www.json.org/.

Douglas Crockford was very concerned about using eval() to convert strings to objects and so he created  json2.js which can be found here https://github.com/douglascrockford/JSON-js/blob/master/json2.js. If you look at the code there is a huge RegEx in the middle of it which purposefully ensures that there is no dangerous code which the eval statement is run on. You should read the comments in the code – very insightful !

All browsers (IE8+) now support JSON.stringify or JSON.parse by default and we no longer need these functions to be added as an external library.

I found however that XPages SSJS does not seem to recognize the JSON object. So I added the json2.js code to an SSJS library and then added it as a resource within my XPage.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.resources>
		<xp:script src="/json2.jss" clientSide="false"></xp:script>
	</xp:this.resources>
	<xp:repeat id="repeat1" rows="30" var="rep1">
		<xp:this.value><![CDATA[#{javascript:
			var temp ='[{"name": "marky"},{"name": "Billy"},{"name": "John"}]'
			return JSON.parse(temp)
		}]]>
	</xp:this.value>
		<xp:text escape="true" id="computedField1" value="#{javascript:rep1.name}"></xp:text>
		<hr />
	</xp:repeat>
</xp:view>

And with this I am now able to take a string of text – convert it safely to a JSON object and then use as the source for my repeat control.

json1

This message was inspired by Tim’s Tripcony’s blog post.

I love the idea of storing data as a JSON string inside of a single notes document field. This would move using Lotus Notes closer and closer to a modern NoSQL system, making applications more and more portable – love that idea.

However – this renders searching by field useless – which is usually one of the  requirements of an application.

1291: EXTJS in XPages: Modernizing IBM Notes Views Without Sacrificing Functionality

I am very happy to announce that I have been accepted to speak a second time at IBM Connect this year !!

In this session I am going to quickly review some of the previously published EXTJS related items on the blog (apparently not everyone reads it) but more importantly I want to discuss user experience. If nothing else, I have learned over the last 18 months that not only is EXTJS very cool in loading thousands of notes documents into  usable and functional web based grids, it also demands a serious serious respect and insight into the user experience. If your user’s are willing to wait many seconds to load thousands of documents they will not be willing to load thousands of documents again, and again, and again, as they go to view each individual document and go “uuurgh, not that one” and then reload the web page.

But this is XPages, and we have the technology to do better with a little forethought and planning. There is a monumental difference between:

1. Being able to meet a requirement to load thousands of documents into a grid and allow the user to open and review each document

and

2. Making them not hate the application in meeting requirement 1

(By the way – requirement 2 is never written in the same document as requirement 1 – it is kinda assumed)

 

Come and see the session, I promise it will be entertaining, there will be lots of demonstrations, stacks of free code and you will be able to relate to issues and requirements which you will have come across when modernizing IBM Notes applications.

 

The Abstract

In this session Mark will demonstrate how the use of the EXTJS library can effectively meet the requirement to modernize large data applications without sacrificing user interface familiarity. EXTJS is the only grid framework with large data set optimization built in.
Mark will discuss and provide working examples of how to manage large data sets and with it an exceptional user experience. You will learn how to display 1000s of  documents through XPages in ways previously considered impossible. With user customizable features like REST service integration, categorization, sorting, searching, column totals, filtering, charting, exporting to excel and many more you can put the power of instant data management back into a web user’s hands.

Discovering Page Audits in Chrome Dev tools – apparently I am bloated !

I came across a “tooling” presentation by Addy Osmani which is mostly not relevant to XPages development but in there I saw a nugget about Page auditing within Chrome Dev tools. I am staggered about what I found about the site I am working on site and apparently I need to learn more, quickly……….

Bring up the site and open Chrome dev tools

ch1

 

And then after running it – WOW…apparently I could be doing a better job in here…..

ch2

I have no idea if I can do anything about some of these – but some I definitely can and if it makes for a faster website load time then it can only be a good thing.

ch5

jQueryUI I can definitely make smaller because you can do custom builds of the functionality you need – I need drag and drop, sortable and accordion.

Bootstrap – I think I am stuck with although according to the presentation grunt-uncss looks promising!

Font-awesome – do I REALLY need it for 3 icons? Maybe I don’t now I look at it !!

The rest are used in this single page app – just not right on the front page

ch3

I could combine the CSS and JS files using XPages application properties – but it breaks when I do that. Some manual combining could be done.

ch4

 

“Always include external CSS files before external JavaScript” – I did not know this – good to know and these are all in the XPages theme so might be able to reorganize – unfortunately with dojo always inserted at the top of the page I do not know if that can be overcome – I think so…..

 

I will make some changes and post an update in a few days to see if there is a noticeable difference in page load speed. When developing I always have cache turned off anyway so I will be able to tell if the pages load faster.